/* =========================================================
MBVUMBO DARK MODE
Immersive Cultural Dark Theme
========================================================= */

body.dark-mode {

    background:
        #0f1110;

    color:
        #f1f1f1;

    transition:
        background .4s ease,
        color .4s ease;
}

/* =========================================================
GLOBAL TYPOGRAPHY
========================================================= */

body.dark-mode p,
body.dark-mode li,
body.dark-mode span,
body.dark-mode small {

    color:
        rgba(255,255,255,.82);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {

    color:
        #ffffff;
}

/* =========================================================
BACKGROUND ATMOSPHERE
========================================================= */

body.dark-mode::before {

    content: '';

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at top left,
            rgba(200,169,107,.08),
            transparent 35%
        );

    z-index: -1;
}

/* =========================================================
HEADER
========================================================= */

body.dark-mode .site-header,
body.dark-mode .main-header {

    background:
        rgba(10,10,10,.75);

    backdrop-filter:
        blur(20px);

    border-bottom:
        1px solid rgba(255,255,255,.05);
}

body.dark-mode .main-nav a {

    color:
        rgba(255,255,255,.9);
}

body.dark-mode .main-nav a:hover {

    color:
        var(--gold);
}

/* =========================================================
HERO
========================================================= */

body.dark-mode .hero-overlay {

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.55),
            rgba(0,0,0,.92)
        );
}

body.dark-mode .hero-content p {

    color:
        rgba(255,255,255,.82);
}

/* =========================================================
CARDS
========================================================= */

body.dark-mode .card-global,
body.dark-mode .lexique-card,
body.dark-mode .event-card,
body.dark-mode .timeline-content {

    background:
        #181b1a;

    box-shadow:
        0 20px 60px rgba(0,0,0,.45);

    border:
        1px solid rgba(255,255,255,.04);
}

body.dark-mode .card-global h2,
body.dark-mode .card-global h3,
body.dark-mode .lexique-card h2,
body.dark-mode .lexique-card h3,
body.dark-mode .event-card h2,
body.dark-mode .timeline-content h2 {

    color:
        #ffffff;
}

body.dark-mode .card-global p,
body.dark-mode .lexique-card p,
body.dark-mode .event-card p,
body.dark-mode .timeline-content p {

    color:
        rgba(255,255,255,.76);
}

/* =========================================================
BUTTONS
========================================================= */

body.dark-mode .btn-primary-custom {

    background:
        var(--gold);

    color:
        #111;
}

body.dark-mode .btn-primary-custom:hover {

    background:
        #d9bb7d;

    color:
        #111;
}

body.dark-mode .btn-secondary-custom {

    border:
        1px solid rgba(255,255,255,.15);

    color:
        white;
}

/* =========================================================
SEARCH INPUTS
========================================================= */

body.dark-mode .rubrique-search-input,
body.dark-mode .lexique-search-input,
body.dark-mode .events-search-input {

    background:
        #181b1a;

    color:
        white;

    border:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        none;
}

body.dark-mode input::placeholder {

    color:
        rgba(255,255,255,.45);
}

/* =========================================================
LEXIQUE
========================================================= */

body.dark-mode .lexique-letter {

    background:
        var(--gold);

    color:
        #111;
}

body.dark-mode .lexique-pronunciation {

    background:
        rgba(200,169,107,.12);

    color:
        #f3d39b;
}

body.dark-mode .lexique-tags span,
body.dark-mode .timeline-tags span {

    background:
        rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.78);
}

/* =========================================================
ALPHABET FILTER
========================================================= */

body.dark-mode .alphabet-filter a {

    background:
        #1b1e1d;

    color:
        rgba(255,255,255,.82);

    box-shadow:
        none;

    border:
        1px solid rgba(255,255,255,.05);
}

body.dark-mode .alphabet-filter a:hover {

    background:
        var(--gold);

    color:
        #111;
}

/* =========================================================
TIMELINE
========================================================= */

body.dark-mode .timeline-wrapper::before {

    background:
        rgba(200,169,107,.6);
}

body.dark-mode .timeline-date {

    color:
        var(--gold);
}

body.dark-mode .timeline-badge {

    background:
        var(--gold);

    color:
        #111;
}

/* =========================================================
RUBRIQUE INTRO
========================================================= */

body.dark-mode .rubrique-intro-content,
body.dark-mode .timeline-intro-content,
body.dark-mode .events-intro-text {

    color:
        rgba(255,255,255,.82);
}

/* =========================================================
GALLERY
========================================================= */

body.dark-mode .gallery-card {

    border-radius:
        24px;

    overflow:
        hidden;
}

/* =========================================================
FOOTER
========================================================= */

body.dark-mode .site-footer {

    background:
        #090909;

    border-top:
        1px solid rgba(255,255,255,.05);
}

body.dark-mode .site-footer p,
body.dark-mode .site-footer a {

    color:
        rgba(255,255,255,.7);
}

/* =========================================================
SCROLLBAR
========================================================= */

body.dark-mode ::-webkit-scrollbar-track {

    background:
        #111;
}

body.dark-mode ::-webkit-scrollbar-thumb {

    background:
        var(--gold);
}

/* =========================================================
SELECTION
========================================================= */

body.dark-mode ::selection {

    background:
        var(--gold);

    color:
        #111;
}

/* =========================================================
TABLES
========================================================= */

body.dark-mode table {

    background:
        #181b1a;

    color:
        white;
}

body.dark-mode td,
body.dark-mode th {

    border-color:
        rgba(255,255,255,.08);
}

/* =========================================================
FORMS
========================================================= */

body.dark-mode textarea,
body.dark-mode select {

    background:
        #181b1a;

    color:
        white;

    border:
        1px solid rgba(255,255,255,.08);
}

/* =========================================================
EMPTY STATES
========================================================= */

body.dark-mode .empty-state {

    color:
        rgba(255,255,255,.72);
}

/* =========================================================
SHADOW ATMOSPHERE
========================================================= */

body.dark-mode .card-global:hover,
body.dark-mode .lexique-card:hover,
body.dark-mode .event-card:hover {

    box-shadow:
        0 30px 80px rgba(0,0,0,.55);
}

/* =========================================================
TRANSITIONS
========================================================= */

body.dark-mode * {

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

/* =========================================================
MOBILE
========================================================= */

@media(max-width:768px){

body.dark-mode .site-header {

background:
rgba(8,8,8,.9);
}

}