:root {
    /* Palette "Premium sombre et chaleureuse" — terracotta, or antique, bleu nuit. */
    --dounia-orange: #B8541A;
    --dounia-orange-dark: #8F4114;
    --dounia-gold: #D4A430;
    --dounia-gold-dark: #B08820;
    --dounia-green: #1F5C3F;
    --dounia-green-dark: #163F2B;
    --dounia-brown: #6B4423;
    --dounia-blue: #1A2E4A;
    --dounia-cream: #F5EFE6;
    /* Dégradé signature Dounia — terracotta > or > bleu nuit, look premium. */
    --dounia-gradient: linear-gradient(90deg, var(--dounia-orange), var(--dounia-gold) 55%, var(--dounia-blue));
    --bs-primary: var(--dounia-orange);
    --bs-primary-rgb: 184, 84, 26;
}

.btn-primary {
    background: var(--dounia-gradient) !important;
    border: none !important;
    color: #2A1B08 !important;
    font-weight: 500 !important;
}
.btn-primary:hover, .btn-primary:focus {
    filter: brightness(0.94);
}

.btn-secondary {
    background-color: var(--dounia-brown) !important;
    border-color: var(--dounia-brown) !important;
}

a, .mention, .hashtag {
    color: var(--dounia-green-dark);
}
a:hover, .hashtag:hover {
    color: var(--dounia-orange);
}

.post-container {
    border-radius: 14px !important;
    box-shadow: 0 1px 4px rgba(46, 92, 158, 0.10) !important;
    border: 1px solid rgba(46, 92, 158, 0.08) !important;
}

.like-btn.liked, .like-btn.liked .like-count {
    color: var(--dounia-orange) !important;
}

.like-count, .comment-count {
    color: var(--dounia-brown);
}

.load-more-btn {
    background: var(--dounia-gradient) !important;
    color: #fff !important;
    border-radius: 20px !important;
}
.load-more-btn:hover {
    filter: brightness(0.94);
}

.badge {
    background-color: var(--dounia-gold) !important;
    color: var(--dounia-brown) !important;
}

.add-to-post {
    border-color: rgba(46, 92, 158, 0.15) !important;
    border-radius: 14px !important;
}

.dounia-quick-links {
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 14px;
    padding: 10px;
    margin-top: 12px;
    box-shadow: 0 1px 4px rgba(46, 92, 158, 0.10);
    border: 1px solid rgba(46, 92, 158, 0.08);
}
.dounia-quick-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 10px;
    text-decoration: none !important;
    color: var(--dounia-brown) !important;
    font-size: 12px;
    font-weight: 500;
    transition: background-color 0.15s ease;
}
.dounia-quick-link:hover {
    background-color: rgba(232, 114, 12, 0.08);
}
.dounia-quick-link i {
    font-size: 20px;
    color: var(--dounia-orange);
}
.dounia-quick-link:nth-child(2) i {
    color: var(--dounia-green);
}
.dounia-quick-link:nth-child(3) i {
    color: var(--dounia-green-dark);
}
.dounia-quick-link:nth-child(4) i {
    color: var(--dounia-gold-dark);
}

a.button-white-outline[href="inscription.php"] {
    background-color: var(--dounia-orange) !important;
    border-color: var(--dounia-orange) !important;
    color: #fff !important;
    font-weight: 500 !important;
}
a.button-white-outline[href="inscription.php"]:hover {
    background-color: var(--dounia-orange-dark) !important;
    border-color: var(--dounia-orange-dark) !important;
}
a.button-white-outline[href="connexion.php"] {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #fff !important;
    color: #fff !important;
    font-weight: 500 !important;
}
a.button-white-outline[href="connexion.php"]:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.messages-container, .comments-container {
    position: relative;
}
.messages-container::before, .comments-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    transform: translate(-50%, -50%);
    background-image: url('../images/logo/dounia-watermark.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}
.messages-container > *, .comments-container > * {
    position: relative;
    z-index: 1;
}

/* ============================================
   CORRECTIONS RESPONSIVE GLOBALES (mobile)
   ============================================ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
* {
    box-sizing: border-box;
}
img, video {
    max-width: 100%;
    height: auto;
}
.container, .profile-container, .job-form-container, .settings-page,
.jeux-container, .main-content, .right-sidebar {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

@media screen and (max-width: 600px) {
    body {
        font-size: 15px;
    }
    .profile-photo, .friend-avatar {
        max-width: 100%;
    }
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .dounia-quick-links, .dounia-decouverte {
        overflow-x: auto;
    }
    input, textarea, select, button {
        font-size: 16px !important; /* évite le zoom automatique iOS au focus */
    }

    /* Réduit la bande de stories : petites vignettes en ligne au lieu de grandes cartes empilées */
    .story-gallery {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-height: 110px !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .story {
        flex: 0 0 auto !important;
        width: 70px !important;
        height: 95px !important;
        border-radius: 12px !important;
    }
    .story p {
        font-size: 10px !important;
    }

    /* Plateaux de jeu (Scrabble, Dames, Échecs) : autorise le défilement horizontal
       au lieu de déborder de l'écran sur mobile */
    #scrabble-grid, #plateau-grid {
        max-width: 96vw;
        overflow-x: auto;
        display: block !important;
    }
    #scrabble-board, #plateau-generique {
        max-width: 100vw;
        overflow-x: auto;
    }

    /* Toutes les modales/fenêtres popup de la plateforme : ne jamais dépasser l'écran */
    #resultat-modal > div, #guide-modal > div, .share-modal-content, .report-modal-content,
    #shareModal .share-modal-content, #reportModal .report-modal-content {
        max-width: 92vw !important;
        width: 92vw !important;
    }

    /* Barre d'icônes de la messagerie : évite le débordement/écrasement */
    .input-icons {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Cartes et fenêtres de découverte/défilement : items plus compacts sur mobile */
    #decouverte-scroll > div, .dounia-decouverte div[style*="width:110px"] {
        width: 90px !important;
    }
}

/* ============================================
   MODE SOMBRE — couverture complète
   Le bouton et le mécanisme existent déjà (script.js, classe .dark-theme sur body).
   Ici on complète pour que TOUT le texte et les menus s'adaptent, pas juste le fond.
   ============================================ */
.dark-theme {
    --dounia-text: #EDEDED;
    --dounia-text-muted: #A8A8A8;
    --dounia-card-bg: #1A1A1A;
    --dounia-border-dark: #2E2E2E;
}
:root {
    --dounia-text: #2e2c2c;
    --dounia-text-muted: #626262;
    --dounia-card-bg: #ffffff;
    --dounia-border-dark: #e5e5e5;
}

.dark-theme, .dark-theme body {
    color: var(--dounia-text) !important;
}
.dark-theme .post-container,
.dark-theme .write-post-container,
.dark-theme .comment-modal-content,
.dark-theme .settings-menu,
.dark-theme .story-gallery,
.dark-theme .dounia-quick-links {
    background: var(--dounia-card-bg) !important;
    color: var(--dounia-text) !important;
    border-color: var(--dounia-border-dark) !important;
}
.dark-theme p, .dark-theme span, .dark-theme small,
.dark-theme .comment-username, .dark-theme .comment-text,
.dark-theme h1, .dark-theme h2, .dark-theme h3, .dark-theme h4 {
    color: var(--dounia-text) !important;
}
.dark-theme .like-count, .dark-theme .comment-count,
.dark-theme small, .dark-theme .comment-date {
    color: var(--dounia-text-muted) !important;
}
.dark-theme textarea, .dark-theme input, .dark-theme .form-control {
    background-color: var(--dounia-card-bg) !important;
    color: var(--dounia-text) !important;
    border-color: var(--dounia-border-dark) !important;
}
.dark-theme a {
    color: var(--dounia-gold) !important;
}
.dark-theme .add-to-post,
.dark-theme .add-post-links a {
    border-color: var(--dounia-border-dark) !important;
    color: var(--dounia-text) !important;
}

/* Modales de partage/signalement — aucun style n'existait, les rendant invisibles à l'usage */
.share-modal, .report-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.share-modal[style*="block"], .report-modal[style*="block"] {
    display: flex !important;
}
.share-modal-content, .report-modal-content {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    max-width: 420px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.close-share-modal, .close-report-modal {
    float: right;
    cursor: pointer;
    font-size: 22px;
    color: #999;
}
.share-btn-confirm {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: var(--dounia-gradient);
    color: #2A1B08;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 12px;
}
.share-link {
    display: flex;
    gap: 8px;
}
.share-link input {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #ddd;
}
.share-link button {
    padding: 8px 14px;
    border: none;
    border-radius: 6px;
    background: var(--dounia-brown, #8D5929);
    color: #fff;
    cursor: pointer;
}

body.dark-theme {
    color: #e8e8e8;
}
body.dark-theme .post-container,
body.dark-theme .write-post-container,
body.dark-theme .comment-modal-content,
body.dark-theme .dounia-quick-links,
body.dark-theme .settings-menu {
    background-color: #1a1a1a !important;
    color: #e8e8e8 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
body.dark-theme .comment,
body.dark-theme .comment-text,
body.dark-theme .comment-username,
body.dark-theme p,
body.dark-theme span,
body.dark-theme small,
body.dark-theme label {
    color: #e8e8e8 !important;
}
body.dark-theme .comment-date,
body.dark-theme .like-count,
body.dark-theme .comment-count,
body.dark-theme .text-muted {
    color: #9a9a9a !important;
}
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select,
body.dark-theme .form-control {
    background-color: #262626 !important;
    color: #e8e8e8 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
    color: #8a8a8a !important;
}
body.dark-theme .dounia-quick-link {
    color: #e8e8e8 !important;
}
body.dark-theme a:not(.button):not(.btn) {
    color: var(--dounia-gold) !important;
}
body.dark-theme .story-gallery,
body.dark-theme .left-sidebar {
    background-color: transparent !important;
}

/* Correction responsive : sur mobile, on affiche la colonne des stories/raccourcis/découverte
   en haut du flux (pleine largeur) plutôt que de la masquer complètement comme avant. */
@media screen and (max-width: 768px) {
    .left-sidebar {
        display: block !important;
        flex-basis: 100% !important;
        width: 100% !important;
        position: static !important;
        order: -1;
        margin-bottom: 12px;
        padding: 10px !important;
    }
    .story-gallery {
        flex-direction: row !important;
        max-height: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 6px !important;
    }
    .story-gallery .story, .story-gallery .story1 {
        flex: 0 0 auto;
    }
}
body.dark-theme .messages-container::before,
body.dark-theme .comments-container::before {
    opacity: 0.6;
}

/* Barre de navigation basse mobile (site entier, via header.php) */
.dounia-mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    background: #8D5929;
}
.dounia-mobile-bottom-nav a {
    color: #fff;
    font-size: 20px;
    text-decoration: none;
}
.dounia-mobile-bottom-nav a.active {
    color: #F5C542;
}
@media screen and (max-width: 768px) {
    .dounia-mobile-bottom-nav {
        display: flex !important;
    }
    body {
        padding-bottom: 60px;
    }
    /* Stories en cercles compacts (façon Instagram/WhatsApp) sur mobile */
    .story-gallery .story {
        width: 148px !important;
        height: 148px !important;
        border-radius: 16px !important;
        flex: 0 0 auto;
    }
    .story-gallery .story p {
        display: block;
        font-size: 11px;
    }
    /* Raccourcis en pastilles colorées Dounia au lieu de cartes */
    .dounia-quick-links {
        display: flex;
        gap: 8px;
        overflow-x: auto;
    }
    .dounia-quick-link {
        flex: 0 0 auto;
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        gap: 6px;
        padding: 7px 14px;
        border-radius: 16px;
        font-size: 12px;
        color: #fff !important;
        background: #E8720C;
    }
    .dounia-quick-link i, .dounia-quick-link span { color: #fff !important; }
    .dounia-quick-link:nth-child(2) { background: #2E7D4F; }
    .dounia-quick-link:nth-child(3) { background: #8D5929; }
    .dounia-quick-link:nth-child(4) { background: #F5C542; }
    .dounia-quick-link:nth-child(4), .dounia-quick-link:nth-child(4) i, .dounia-quick-link:nth-child(4) span { color: #2A1B08 !important; }
}

/* Fil de publications façon Facebook mobile : carte blanche classique, texte au-dessus de la photo, barre d'actions en dessous */
@media screen and (max-width: 768px) {
    .post-container {
        padding: 12px !important;
        margin: 0 0 8px !important;
        border-radius: 0 !important;
        border-bottom: 8px solid var(--surface-0, #f0f2f5) !important;
        background: #fff !important;
        box-shadow: none !important;
    }
    .post-image-container {
        margin: 8px -12px !important;
    }
    .post-img, .post-video {
        width: 100% !important;
        border-radius: 0 !important;
        max-height: 420px;
        object-fit: cover;
    }
    .post-text {
        margin: 8px 0 !important;
        font-size: 14px;
    }
}
@media screen and (max-width: 768px) {
    .activity-icons {
        display: flex !important;
        justify-content: space-around;
        border-top: 1px solid var(--border, #eee);
        padding-top: 8px !important;
        margin-top: 8px !important;
    }
    .activity-icons div {
        margin-right: 0 !important;
    }
}

/* ============================================
   DESIGN PROFESSIONNEL ORDINATEUR (sobre, distinct de Facebook)
   Ne s'applique qu'au-dessus de 768px pour ne pas perturber le mobile
   ============================================ */
@media screen and (min-width: 769px) {
    body { background: #F4F4F2 !important; }
    .post-container {
        border: 1px solid #E4E2DA !important;
        border-radius: 8px !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    .post-img, .post-video {
        border: 1px solid #E4E2DA;
        border-radius: 6px !important;
    }
    .left-sidebar, .dounia-decouverte, .dounia-quick-links {
        background: #fff !important;
        border: 1px solid #E4E2DA !important;
        border-radius: 8px !important;
        box-shadow: none !important;
    }
    .dounia-quick-link {
        background: transparent !important;
        color: #2C2C2A !important;
    }
    .dounia-quick-link i {
        color: #8D5929 !important;
    }
    .story-gallery .story {
        border-radius: 14px !important;
        width: 116px !important;
        height: 116px !important;
        border: 1.5px solid #E4E2DA;
    }
    .story-gallery .story p {
        display: block;
        font-size: 11px;
    }
    .story-gallery .story img.upload-icon {
        display: block;
    }
    .write-post-container, .post-input-container {
        border: 1px solid #E4E2DA !important;
        box-shadow: none !important;
        border-radius: 8px !important;
    }
}

/* Stories déplacées en pleine largeur, juste sous la navigation */
.dounia-stories-top {
    width: 100%;
    max-width: 100%;
    background: #fff;
    padding: 10px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #E4E2DA;
    margin-top: 8px;
    position: relative;
    z-index: 10;
}
@media screen and (min-width: 769px) {
    .dounia-stories-top { border: 1px solid #E4E2DA; border-radius: 0 0 8px 8px; }
}

/* Sécurité : garantit que le panneau de notifications (offcanvas Bootstrap) reste bien
   caché tant qu'il n'est pas explicitement ouvert, même si Bootstrap tarde à charger */
.offcanvas:not(.show) {
    visibility: hidden !important;
    transform: translateX(100%) !important;
}