/* =========================================================
   MYDJAKA — VARIABLES GLOBALES
   Palette unifiée entre auth et dashboard.
========================================================= */

:root {

    /* =====================================================
       CHARTE MYDJAKA — IDENTITÉ VISUELLE OFFICIELLE
       ---------------------------------------------------
       3 couleurs principales :
         • Vert Forêt Profond  #0A2320
         • Vert Citron         #B1C01F
         • Forest Green        #2B6942
       Plus leurs déclinaisons 80 / 60 / 40 / 20 %.
    ===================================================== */

    /* ---- Vert Forêt Profond ---- */
    --forest-deep:      #0A2320;    /* 100% */
    --forest-deep-80:   #1d443a;
    --forest-deep-60:   #1e5148;
    --forest-deep-40:   #216458;
    --forest-deep-20:   #247d6c;

    /* ---- Forest Green ---- */
    --forest:           #2B6942;    /* 100% */
    --forest-80:        #2c6942;
    --forest-60:        #348551;
    --forest-40:        #45a266;
    --forest-20:        #63ba86;

    /* ---- Vert Citron ---- */
    --citron:           #B1C01F;    /* 100% */
    --citron-80:        #cde035;
    --citron-60:        #daea63;
    --citron-40:        #e8f39c;
    --citron-20:        #f2f9cb;


    /* =====================================================
       TOKENS SÉMANTIQUES (aliases pour l'app)
    ===================================================== */

    /* Fond principal : citron 40 % — signature de la marque */
    --primary:          var(--citron-40);
    --primary-hover:    var(--citron-60);
    --bg-lime:          var(--citron-40);

    /* Verts d'action */
    --primary-dark:     var(--forest-deep);
    --primary-green:    var(--forest);
    --icon-lime:        var(--citron);

    /* Texte — valeurs vérifiées au contraste sur le fond
       Citron 40 % : muted 5.24:1 et light 3.4:1 (AA / AA large). */
    --text-dark:        var(--forest-deep);
    --text-main:        var(--forest-deep);
    --text-muted:       #506659;
    --text-light:       #6d8479;


    /* =====================================================
       SURFACES "GLACÉ" iOS
    ===================================================== */

    /* Inputs glassy sur fond citron */
    --bg-input:         rgba(255, 255, 255, 0.55);
    --bg-input-focus:   rgba(255, 255, 255, 0.75);

    /* Cartes en verre dépoli teintées citron doux */
    --bg-surface:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(242, 249, 203, 0.35) 100%
        );
    --bg-surface-strong:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(242, 249, 203, 0.55) 100%
        );
    --glass-border:     rgba(255, 255, 255, 0.75);
    --glass-blur:       24px;
    --glass-saturate:   180%;
    --border-color:     rgba(255, 255, 255, 0.55);

    /* Voile teinté citron pour le header sticky et le bottom nav.
       Mélange citron 40 % + blanc, translucide, saturé — c'est
       ce qui donne la vitre teintée signature de la marque. */
    --bar-frost:        rgba(232, 243, 156, 0.72);

    /* Ombres douces multi-couches (basées sur le forest deep) */
    --shadow-soft:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 18px 40px -14px rgba(10, 35, 32, .18),
        0 4px 12px -2px rgba(10, 35, 32, .08);
    --shadow-btn:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 10px 24px rgba(10, 35, 32, .32),
        0 2px 6px rgba(10, 35, 32, .14);
    --shadow-btn-citron:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 10px 24px rgba(177, 192, 31, .35),
        0 2px 6px rgba(10, 35, 32, .12);


    /* =====================================================
       TYPO + RAYONS
    ===================================================== */

    --font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
}


/* =========================================================
   MODE SOMBRE — L'INVERSE EXACT, MÊME CHARTE
   ---------------------------------------------------------
   Le Vert Forêt Profond devient le fond, le Vert Citron
   devient le texte et l'accent. Les 3 couleurs de la charte
   restent les seules utilisées, on inverse juste leurs rôles.
========================================================= */

[data-theme="dark"] {

    /* Le fond passe du citron au forêt profond */
    --primary:          var(--forest-deep);
    --primary-hover:    var(--forest-deep-80);
    --bg-lime:          var(--forest-deep);

    /* Les verts d'action s'éclaircissent pour rester lisibles
       sur fond sombre (on monte dans les déclinaisons). */
    --primary-dark:     var(--citron-40);
    --primary-green:    var(--forest-20);
    --icon-lime:        var(--citron);

    /* Texte : le citron devient l'encre */
    --text-dark:        var(--citron-40);
    --text-main:        var(--citron-40);
    --text-muted:       #8fa596;
    --text-light:       #6d8577;

    /* Inputs : verre sombre teinté forêt */
    --bg-input:         rgba(29, 68, 58, 0.45);
    --bg-input-focus:   rgba(30, 81, 72, 0.65);

    /* Cartes : verre sombre, dégradé forêt profond */
    --bg-surface:
        linear-gradient(
            145deg,
            rgba(29, 68, 58, 0.58) 0%,
            rgba(10, 35, 32, 0.42) 100%
        );
    --bg-surface-strong:
        linear-gradient(
            145deg,
            rgba(30, 81, 72, 0.72) 0%,
            rgba(10, 35, 32, 0.58) 100%
        );

    /* Les bordures deviennent des filets citron très discrets */
    --glass-border:     rgba(177, 192, 31, 0.20);
    --border-color:     rgba(177, 192, 31, 0.15);

    /* Voile des barres : forêt profond translucide */
    --bar-frost:        rgba(10, 35, 32, 0.78);

    /* Ombres : plus profondes, avec un liseré citron au lieu
       d'un reflet blanc (le blanc jure sur du vert sombre). */
    --shadow-soft:
        inset 0 1px 0 rgba(177, 192, 31, .10),
        0 18px 40px -14px rgba(0, 0, 0, .55),
        0 4px 12px -2px rgba(0, 0, 0, .35);
    --shadow-btn:
        inset 0 1px 0 rgba(255, 255, 255, .22),
        0 10px 24px rgba(0, 0, 0, .45),
        0 2px 6px rgba(0, 0, 0, .3);
    --shadow-btn-citron:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        0 10px 28px rgba(177, 192, 31, .3),
        0 2px 6px rgba(0, 0, 0, .35);
}


/* =========================================================
   RESET
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    min-height: 100%;
}

/* Fond global "glacé" MYDJAKA : citron 40% signature + halos
   subtils empruntés directement à la charte officielle. Ces
   halos donnent la profondeur que les surfaces glassy vont
   pouvoir accrocher. */
body {
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 12% 6%,
            rgba(242, 249, 203, .8) 0%,     /* citron 20 % — highlight en haut à gauche */
            transparent 42%
        ),
        radial-gradient(
            circle at 88% 90%,
            rgba(43, 105, 66, .12) 0%,      /* forest green — poche verte en bas à droite */
            transparent 55%
        ),
        radial-gradient(
            circle at 50% 130%,
            rgba(177, 192, 31, .22) 0%,     /* citron 100 % — halo vibrant sous la fold */
            transparent 60%
        ),
        var(--bg-lime);
    background-attachment: fixed;
    transition: background-color .35s ease;
}

/* Fond sombre : mêmes halos, teintes inversées — le forêt
   profond porte, le forest green et le citron éclairent. */
[data-theme="dark"] body {
    background:
        radial-gradient(
            circle at 12% 6%,
            rgba(43, 105, 66, .38) 0%,      /* forest green — lueur en haut à gauche */
            transparent 45%
        ),
        radial-gradient(
            circle at 88% 90%,
            rgba(177, 192, 31, .14) 0%,     /* citron — poche lumineuse en bas à droite */
            transparent 55%
        ),
        radial-gradient(
            circle at 50% 130%,
            rgba(52, 133, 81, .28) 0%,      /* forest 60 % — halo sous la fold */
            transparent 62%
        ),
        var(--forest-deep);
    background-attachment: fixed;
}


/* =========================================================
   ICÔNES SVG — INVERSION DES REMPLISSAGES EN MODE SOMBRE
   ---------------------------------------------------------
   .bottom-dark est du Forêt Profond : invisible sur fond
   sombre. On le remonte au citron clair. Le forest green
   monte d'un cran, le citron reste le point d'accent.
========================================================= */

[data-theme="dark"] .bottom-dark  { fill: var(--citron-40); }
[data-theme="dark"] .bottom-green { fill: var(--forest-20); }
[data-theme="dark"] .bottom-lime  { fill: var(--citron); }


/* =========================================================
   SPLASH
========================================================= */

/* Splash en couches superposées : image animée → voile →
   formes flottantes → reflet → contenu. Chaque couche est
   isolée pour pouvoir être animée indépendamment. */
.splash-screen {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 6vh 7vw 5vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4vh;
    color: #fff;
    overflow: hidden;
    background: var(--forest-deep);
    isolation: isolate;
}

/* Le contenu passe au-dessus de toutes les couches décoratives */
.splash-brand,
.splash-copy,
.splash-actions {
    position: relative;
    z-index: 4;
}


/* ---------------------------------------------------------
   COUCHE 1 — L'image, en zoom / travelling lent (Ken Burns)
   Un aller-retour de 28 s : assez lent pour être perçu
   comme du mouvement vivant, pas comme une animation.
--------------------------------------------------------- */

.splash-bg {
    position: absolute;
    inset: -6%;                 /* marge pour que le zoom ne révèle aucun bord */
    z-index: 0;
    background: url('../assets/brand-signage.jpg') center/cover no-repeat;
    animation: splash-kenburns 28s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes splash-kenburns {
    0%   { transform: scale(1)    translate3d(0, 0, 0); }
    100% { transform: scale(1.14) translate3d(-2%, -3%, 0); }
}


/* ---------------------------------------------------------
   COUCHE 2 — Voile Forêt Profond dégradé
   Il respire très légèrement pour que la scène ne soit
   jamais tout à fait figée.
--------------------------------------------------------- */

.splash-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(10, 35, 32, .32) 0%,
            rgba(10, 35, 32, .52) 40%,
            rgba(10, 35, 32, .93) 100%
        );
    animation: splash-veil-breathe 14s ease-in-out infinite alternate;
}

@keyframes splash-veil-breathe {
    0%   { opacity: .92; }
    100% { opacity: 1; }
}


/* ---------------------------------------------------------
   COUCHE 3 — Les formes du logo qui dérivent
   Reprise exacte des 4 géométries de la marque (chevron,
   triangle, carré arrondi, maison). Elles montent lentement
   en tournant, à des vitesses différentes : ça crée de la
   profondeur sans jamais attirer l'œil.
--------------------------------------------------------- */

.splash-shapes {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

.splash-shapes .shape {
    position: absolute;
    display: block;
    will-change: transform, opacity;
}

.splash-shapes .shape path,
.splash-shapes .shape rect {
    fill: currentColor;
}

/* Chaque forme a sa taille, sa position, sa teinte et son
   propre rythme — aucune ne doit être synchronisée avec
   une autre, sinon le mouvement devient mécanique. */

.shape-1 {
    width: 92px;  height: 92px;
    left: -4%;    top: 58%;
    color: rgba(177, 192, 31, .14);
    animation: shape-drift-a 26s linear infinite;
}

.shape-2 {
    width: 64px;  height: 64px;
    left: 74%;    top: 72%;
    color: rgba(232, 243, 156, .10);
    animation: shape-drift-b 34s linear infinite;
    animation-delay: -8s;
}

.shape-3 {
    width: 48px;  height: 48px;
    left: 18%;    top: 88%;
    color: rgba(99, 186, 134, .16);
    animation: shape-drift-a 30s linear infinite;
    animation-delay: -14s;
}

.shape-4 {
    width: 76px;  height: 76px;
    left: 58%;    top: 96%;
    color: rgba(177, 192, 31, .11);
    animation: shape-drift-c 38s linear infinite;
    animation-delay: -4s;
}

.shape-5 {
    width: 36px;  height: 36px;
    left: 88%;    top: 44%;
    color: rgba(232, 243, 156, .13);
    animation: shape-drift-b 22s linear infinite;
    animation-delay: -18s;
}

.shape-6 {
    width: 58px;  height: 58px;
    left: 34%;    top: 104%;
    color: rgba(99, 186, 134, .12);
    animation: shape-drift-c 30s linear infinite;
    animation-delay: -11s;
}

/* Trois trajectoires distinctes : montée droite, montée avec
   dérive latérale, montée avec rotation marquée. */

@keyframes shape-drift-a {
    0%   { transform: translate3d(0, 0, 0)        rotate(0deg);   opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translate3d(14px, -120vh, 0) rotate(120deg); opacity: 0; }
}

@keyframes shape-drift-b {
    0%   { transform: translate3d(0, 0, 0)         rotate(0deg);    opacity: 0; }
    14%  { opacity: 1; }
    86%  { opacity: 1; }
    100% { transform: translate3d(-42px, -120vh, 0) rotate(-95deg);  opacity: 0; }
}

@keyframes shape-drift-c {
    0%   { transform: translate3d(0, 0, 0)        rotate(0deg);   opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate3d(28px, -125vh, 0) rotate(200deg); opacity: 0; }
}


/* ---------------------------------------------------------
   COUCHE 4 — Reflet qui balaie l'écran
   Une bande lumineuse diagonale qui traverse toutes les
   9 s. C'est le rappel du rendu « glacé » sur le splash.
--------------------------------------------------------- */

.splash-sheen {
    position: absolute;
    inset: -30%;
    z-index: 3;
    pointer-events: none;
    background:
        linear-gradient(
            104deg,
            transparent 38%,
            rgba(255, 255, 255, .055) 47%,
            rgba(232, 243, 156, .09) 50%,
            rgba(255, 255, 255, .055) 53%,
            transparent 62%
        );
    animation: splash-sheen-sweep 9s ease-in-out infinite;
    will-change: transform;
}

@keyframes splash-sheen-sweep {
    0%, 62%  { transform: translate3d(-65%, 0, 0); }
    100%     { transform: translate3d(65%, 0, 0); }
}


/* ---------------------------------------------------------
   ENTRÉE DU CONTENU
   Chaque bloc monte et se révèle, décalé par --delay.
--------------------------------------------------------- */

.splash-reveal {
    opacity: 0;
    animation: splash-reveal-up .8s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: var(--delay, 0s);
}

@keyframes splash-reveal-up {
    from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
}

/* Le titre se révèle ligne par ligne */
.splash-title span {
    display: block;
}


/* ---------------------------------------------------------
   ACCESSIBILITÉ
   Mouvement réduit : on fige toutes les couches et on rend
   le contenu immédiatement visible.
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .splash-bg,
    .splash-veil,
    .splash-sheen,
    .splash-shapes .shape {
        animation: none !important;
    }

    .splash-shapes { display: none; }

    .splash-reveal {
        opacity: 1;
        animation: none !important;
        transform: none;
        filter: none;
    }
}


/* ---- Bloc marque en haut ---- */

.splash-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.splash-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, .45));
}

.splash-wordmark {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.1;
}

.splash-name {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.splash-baseline {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--citron-40);
    opacity: .92;
}


/* ---- Accroche ---- */

.splash-copy {
    margin-top: auto;
    max-width: 640px;
}

.splash-title {
    font-size: clamp(2.6rem, 8vw, 4.4rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .35);
}

/* Le mot accentué passe en Citron, comme sur l'affichage */
.splash-title em {
    font-style: normal;
    color: var(--citron-80);
}

.splash-lead {
    margin-top: 18px;
    font-size: clamp(.95rem, 3.6vw, 1.1rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
    max-width: 30ch;
}


/* ---- Actions ---- */

.splash-actions {
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    flex-shrink: 0;
}


/* =========================================================
   BOUTONS COMMUNS
========================================================= */

.btn {
    width: 100%;
    padding: 18px;
    border-radius: 16px;
    border: none;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s, background .3s, box-shadow .3s;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn:active {
    transform: scale(.98);
}

/* CTA principale : dégradé Forest → Forest Deep tiré directement
   de la charte. Reflet iOS en haut, ombre profonde en bas. */
.btn-primary {
    background:
        linear-gradient(
            180deg,
            var(--forest) 0%,
            var(--forest-deep) 100%
        );
    color: #fff;
    box-shadow: var(--shadow-btn);
    position: relative;
    letter-spacing: .01em;
}

.btn-primary:hover {
    background:
        linear-gradient(
            180deg,
            var(--forest-60) 0%,
            var(--forest-deep-80) 100%
        );
}

/* CTA lime (secondaire brand) : citron 80% → citron */
.btn-citron {
    background:
        linear-gradient(
            180deg,
            var(--citron-80) 0%,
            var(--citron) 100%
        );
    color: var(--forest-deep);
    box-shadow: var(--shadow-btn-citron);
}

.btn-citron:hover {
    background:
        linear-gradient(
            180deg,
            var(--citron-60) 0%,
            var(--citron-80) 100%
        );
}

/* Bouton verre sur la splash — encore plus glassy */
.btn-glass {
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .3),
        0 8px 24px rgba(0, 0, 0, .2);
}

.btn-glass:hover {
    background: rgba(255, 255, 255, .28);
}

.btn-text {
    background: none;
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
}


/* =========================================================
   SVG ICON SYSTEM (partagé avec le dashboard)
========================================================= */

.mdj-icon {
    display: block;
    flex-shrink: 0;
    overflow: visible;
}

.bottom-dark { fill: var(--primary-dark); }
.bottom-green { fill: var(--primary-green); }
.bottom-lime { fill: var(--icon-lime); }

/* Traits (stroke) : mêmes rôles que les remplissages, pour
   les parties d'icônes dessinées en ligne plutôt qu'en aplat
   (anse du cadenas, flèche de l'enveloppe…). Passer par des
   classes plutôt que des attributs fill/stroke en dur permet
   à ces traits de basculer en mode sombre comme le reste. */
.mdj-stroke-dark  { stroke: var(--primary-dark); }
.mdj-stroke-green { stroke: var(--primary-green); }
.mdj-stroke-lime  { stroke: var(--icon-lime); }


/* =========================================================
   BOUTON THÈME CLAIR / SOMBRE
   ---------------------------------------------------------
   Deux icônes superposées (lune + soleil) dans le langage
   visuel MYDJAKA : formes pleines multicolores + point
   d'accent citron. Seule celle qui correspond au thème
   COURANT est visible, l'autre est en attente derrière.
========================================================= */

.theme-toggle {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;

    border-radius: 50%;
    border: 1px solid var(--glass-border);
    background: var(--bg-surface);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 4px 14px -4px rgba(10, 35, 32, .2);

    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1),
                box-shadow .2s ease;
}

.theme-toggle:hover { transform: scale(1.06); }
.theme-toggle:active { transform: scale(.94); }

.theme-toggle svg {
    width: 24px;
    height: 24px;
    position: absolute;
    overflow: visible;
    transition:
        opacity .28s ease,
        transform .42s cubic-bezier(.34, 1.56, .64, 1);
}

/* --- Mode clair : la LUNE est proposée (clic → sombre) --- */
.theme-icon-moon { opacity: 1; transform: rotate(0deg)   scale(1); }
.theme-icon-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }

/* --- Mode sombre : le SOLEIL est proposé (clic → clair) --- */
[data-theme="dark"] .theme-icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
[data-theme="dark"] .theme-icon-sun  { opacity: 1; transform: rotate(0deg)  scale(1); }

/* En mode sombre le bouton s'éclaire d'un liseré citron */
[data-theme="dark"] .theme-toggle {
    border-color: rgba(177, 192, 31, .3);
    box-shadow:
        inset 0 1px 0 rgba(177, 192, 31, .14),
        0 4px 14px -4px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
    .theme-toggle, .theme-toggle svg { transition: none; }
}


/* =========================================================
   PROGRESS BAR (navigation entre pages, non bloquante)
   ---------------------------------------------------------
   Barre fine en haut de l'écran qui n'apparaît que si la
   navigation dépasse quelques dizaines de ms. Reste discrète,
   n'interrompt jamais l'utilisateur, ne cache aucun contenu.
========================================================= */

.page-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 99998;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
    background: transparent;
    overflow: hidden;
}

.page-progress.is-active {
    opacity: 1;
}

.page-progress-bar {
    display: block;
    width: 40%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--forest-deep) 0%,
            var(--forest) 45%,
            var(--citron) 100%
        );
    box-shadow: 0 0 10px rgba(177, 192, 31, .55);
    border-radius: 0 3px 3px 0;
    position: absolute;
    left: -40%;
    animation: mdj-progress 1s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes mdj-progress {
    0%   { left: -40%; }
    100% { left: 100%; }
}


/* =========================================================
   SPLASH LOADER — première ouverture uniquement
   ---------------------------------------------------------
   Logo officiel MYDJAKA ERP centré avec animation bounce
   puis pulse. Ne réapparaît pas pour les nav suivantes
   (drapeau dans sessionStorage géré par app.js).
========================================================= */

.page-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-lime);
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility .45s ease;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    color: var(--primary-dark);
}


/* ------ Logo officiel MYDJAKA ------ */

.loader-mark {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    /* Halo lime doux derrière le logo */
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, .55) 0%,
            rgba(255, 255, 255, 0) 65%
        );

    /* Entrée bouncée puis pulse infini */
    animation:
        mdj-logo-in .7s cubic-bezier(.34, 1.56, .64, 1) both,
        mdj-logo-pulse 2.2s .7s ease-in-out infinite;
}

.loader-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(7, 71, 40, .25));
}


/* ------ Wordmark ------ */

.loader-brand {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .18em;
    color: var(--primary-dark);
    animation: mdj-brand-in .55s .15s cubic-bezier(.22, 1, .36, 1) both;
}


/* ------ 3 points ------ */

.loader-dots {
    display: flex;
    gap: 6px;
    margin-top: -6px;
}

.loader-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-dark);
    animation: mdj-dots 1.1s infinite ease-in-out;
    opacity: .35;
}

.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s;  }


/* ------ Fade sortant ------ */

.page-loader.leaving {
    background: rgba(232, 243, 156, .96);
    backdrop-filter: blur(5px);
}

.page-loader.leaving .loader-mark {
    animation:
        mdj-logo-out .35s ease forwards;
}


/* ------ Keyframes ------ */

@keyframes mdj-logo-in {
    0%   { opacity: 0; transform: scale(.4) rotate(-25deg); }
    60%  { opacity: 1; transform: scale(1.08) rotate(6deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes mdj-logo-pulse {
    0%, 100% { transform: scale(1);    filter: drop-shadow(0 0 0 rgba(177, 192, 31, 0)); }
    50%      { transform: scale(1.06); filter: drop-shadow(0 0 22px rgba(177, 192, 31, .45)); }
}

@keyframes mdj-logo-out {
    to { opacity: 0; transform: scale(.85); }
}

@keyframes mdj-brand-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@keyframes mdj-dots {
    0%, 80%, 100% { transform: translateY(0);    opacity: .35; }
    40%           { transform: translateY(-5px); opacity: 1;   }
}


/* ------ Accessibilité ------ */

@media (prefers-reduced-motion: reduce) {
    .page-loader, .btn { transition: none; }
    .loader-mark,
    .loader-brand,
    .loader-dots span {
        animation: none !important;
    }
}


/* =========================================================
   FORMES "DÉCOUPÉES" DANS LES ICÔNES
   ---------------------------------------------------------
   Certaines icônes ont une forme interne censée représenter
   un trou (la lentille de la loupe, le point du dashboard,
   le rabat du portefeuille). En clair ce trou est blanc ;
   en sombre il doit prendre la teinte du fond, sinon il
   ressort comme une tache lumineuse.

   Note : ces règles CSS l'emportent sur les attributs de
   présentation fill="..." présents dans le markup SVG.
========================================================= */

.icon-punch  { fill: #fff; }
.dash-dot    { fill: #fff; }
.wallet-flap { fill: #092920; }

[data-theme="dark"] .icon-punch  { fill: var(--forest-deep); }
[data-theme="dark"] .dash-dot    { fill: var(--forest-deep); }
[data-theme="dark"] .wallet-flap { fill: var(--forest-deep); }

/* Sur la pastille citron du menu actif, le trou reprend
   la couleur de la pastille pour rester un vrai découpage. */
[data-theme="dark"] .menu-item.active .dash-dot,
[data-theme="dark"] .menu-item.active .wallet-flap {
    fill: var(--citron);
}