/* ============================================================
   Menu mobile v15 « tuiles en chute » — commun à tous les thèmes
   (Academy, Senior, Kids v1/v2, Ados v1/v2/v3)

   Structure partagée ; toutes les couleurs passent par des
   variables --mix-*. Les valeurs par défaut ci-dessous sont
   dérivées de la palette du thème actif (--accent-color,
   --card-bg, --border-color, --text-main, --text-muted), si bien
   que chaque thème obtient un menu accordé sans rien écrire.

   Ce fichier est chargé AVANT le CSS de thème (voir base.php) :
   un thème peut donc redéfinir n'importe quelle variable --mix-*
   dans son :root / [data-mode="dark"] (cf. style_academy.css qui
   impose sa déclinaison « voile givré » exacte).
   ============================================================ */

/* Défauts — thème clair */
:root {
    --mix-backdrop-bg: rgba(248, 250, 252, 0.78);
    --mix-backdrop-blur: blur(6px) saturate(1.1);
    --mix-tile-bg: var(--card-bg, #ffffff);
    --mix-tile-border: var(--border-color, #e2e8f0);
    --mix-tile-color: var(--text-main, #334155);
    --mix-shadow: 0 10px 24px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.06);
    --mix-icon: var(--text-muted, #94a3b8);
    --mix-hover-border: color-mix(in srgb, var(--accent-color, #0284c7) 45%, transparent);
    --mix-hover-icon: var(--accent-color, #0284c7);
    --mix-active-bg: color-mix(in srgb, var(--accent-color, #0284c7) 12%, #ffffff);
    --mix-active-border: color-mix(in srgb, var(--accent-color, #0284c7) 40%, transparent);
    --mix-active-color: var(--accent-color, #0284c7);
    --mix-lang-color: var(--text-muted, #64748b);
    --mix-lang-hover-bg: rgba(0,0,0,0.05);
    --mix-lang-hover-color: var(--text-main, #334155);
    --mix-lang-active-bg: var(--accent-color, #0284c7);
    --mix-lang-active-color: #ffffff;
    --mix-go-color: var(--text-muted, #cbd5e1);
    --mix-panel-divider: var(--border-color, #e2e8f0);
    --mix-item-hover-bg: rgba(0,0,0,0.05);
    --mix-item-active-bg: color-mix(in srgb, var(--accent-color, #0284c7) 14%, transparent);
    --mix-icon-chip-bg: rgba(0,0,0,0.06);
    --mix-icon-chip-active-bg: color-mix(in srgb, var(--accent-color, #0284c7) 22%, transparent);
    --mix-text-sub: var(--text-muted, #94a3b8);
    --mix-font-btn-bg: rgba(0,0,0,0.03);
    --mix-font-btn-border: var(--border-color, #e2e8f0);
    --mix-font-btn-active-border: color-mix(in srgb, var(--accent-color, #0284c7) 50%, transparent);
    /* Couleur d'état "ouvert" des boutons topbar : accent éclairci
       pour rester lisible sur une topbar sombre */
    --mix-btn-open-color: color-mix(in srgb, var(--accent-color, #0284c7) 60%, white);
}

/* Défauts — thème sombre */
[data-mode="dark"] {
    --mix-backdrop-bg: rgba(0, 0, 0, 0.55);
    --mix-backdrop-blur: blur(5px);
    --mix-tile-bg: var(--card-bg, #0f172a);
    --mix-tile-border: var(--border-color, rgba(255,255,255,0.1));
    --mix-tile-color: var(--text-main, #cbd5e1);
    --mix-shadow: 0 12px 32px rgba(0,0,0,0.4);
    --mix-icon: var(--text-muted, #64748b);
    --mix-hover-border: color-mix(in srgb, var(--accent-color, #38bdf8) 50%, transparent);
    --mix-hover-icon: color-mix(in srgb, var(--accent-color, #38bdf8) 50%, white);
    --mix-active-bg: color-mix(in srgb, var(--accent-color, #0284c7) 30%, var(--card-bg, #0f172a));
    --mix-active-border: color-mix(in srgb, var(--accent-color, #38bdf8) 50%, transparent);
    --mix-active-color: color-mix(in srgb, var(--accent-color, #38bdf8) 55%, white);
    --mix-lang-color: var(--text-muted, #94a3b8);
    --mix-lang-hover-bg: rgba(255,255,255,0.07);
    --mix-lang-hover-color: var(--text-main, #e2e8f0);
    --mix-lang-active-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 55%, white);
    --mix-lang-active-color: #0f172a;
    --mix-go-color: var(--text-muted, #475569);
    --mix-panel-divider: var(--border-color, rgba(255,255,255,0.1));
    --mix-item-hover-bg: rgba(255,255,255,0.07);
    --mix-item-active-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 20%, transparent);
    --mix-icon-chip-bg: rgba(255,255,255,0.08);
    --mix-icon-chip-active-bg: color-mix(in srgb, var(--accent-color, #38bdf8) 28%, transparent);
    --mix-text-sub: var(--text-muted, #64748b);
    --mix-font-btn-bg: rgba(255,255,255,0.06);
    --mix-font-btn-border: rgba(255,255,255,0.15);
    --mix-font-btn-active-border: color-mix(in srgb, var(--accent-color, #38bdf8) 60%, transparent);
    --mix-btn-open-color: color-mix(in srgb, var(--accent-color, #38bdf8) 60%, white);
}

/* ============================================================
   Navbar mobile + menu v15 (< 1024px)
   ============================================================ */
@media (max-width: 1023px) {
    /* html body : gagne sur les règles body non scopées des thèmes */
    html body {
        padding-top: 80px;
    }

    .navbar {
        display: none !important;
    }

    .mobile-navbar {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 56px;
        background: var(--nav-bg, #0f172a);
        color: var(--nav-text, #ffffff);
        /* Au-dessus du voile (1060) et des stacks (1070), comme la v15 :
           le bouton menu reste net et cliquable quand le menu est ouvert */
        z-index: 1080;
        align-items: center;
        padding: 0.5rem 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .mobile-navbar-logo {
        flex-shrink: 0;
        height: 30px;
        display: flex;
        align-items: center;
    }

    .mobile-navbar-spacer {
        flex-grow: 1;
    }

    .mobile-navbar-icons {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }

    .navbar-icon {
        padding: 0.5rem;
        font-size: 1.25rem;
        cursor: pointer;
        border: none;
        background: transparent;
        color: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
    }

    .navbar-icon:hover {
        opacity: 0.8;
    }

    .mobile-bottom-nav {
        display: none;
    }

    /* V15 Menu - Backdrop & Stack */
    .mix-backdrop {
        position: fixed;
        inset: 0;
        background: var(--mix-backdrop-bg);
        backdrop-filter: var(--mix-backdrop-blur);
        -webkit-backdrop-filter: var(--mix-backdrop-blur);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s;
        z-index: 1060;
    }
    .mix-backdrop.show { opacity: 1; pointer-events: auto; }

    .mix-stack {
        position: fixed;
        top: 82px;
        left: 16px; right: 16px;
        max-width: 420px;
        margin: 0 auto;
        z-index: 1070;
        pointer-events: none;
    }
    .mix-stack.open { pointer-events: auto; }

    /* Grille de tuiles */
    .mix-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .mix-tile {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        aspect-ratio: 1.35;
        border-radius: 16px;
        background: var(--mix-tile-bg);
        border: 1px solid var(--mix-tile-border);
        color: var(--mix-tile-color);
        font-weight: 600;
        font-size: 0.92rem;
        box-shadow: var(--mix-shadow);
        text-decoration: none;
        opacity: 0;
        transform: translateY(-130px) rotate(-4deg) scale(0.92);
        transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease,
                    border-color 0.15s;
    }
    .mix-tile:nth-child(even) { transform: translateY(-130px) rotate(4deg) scale(0.92); }
    .mix-stack.open .mix-tile {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }

    /* Cascade delays */
    .mix-stack.open .mix-tile:nth-child(1) { transition-delay: 0.00s; }
    .mix-stack.open .mix-tile:nth-child(2) { transition-delay: 0.08s; }
    .mix-stack.open .mix-tile:nth-child(3) { transition-delay: 0.16s; }
    .mix-stack.open .mix-tile:nth-child(4) { transition-delay: 0.24s; }

    .mix-tile i { font-size: 1.7rem; color: var(--mix-icon); transition: color 0.15s; }
    .mix-tile:hover { border-color: var(--mix-hover-border); }
    .mix-tile:hover i { color: var(--mix-hover-icon); }
    .mix-tile:active { transform: scale(0.97); transition-duration: 0.1s; }
    .mix-tile.active {
        background: var(--mix-active-bg);
        border-color: var(--mix-active-border);
        color: var(--mix-active-color);
    }
    .mix-tile.active i { color: var(--mix-active-color); }

    /* Tuiles pleine largeur */
    .mix-tile-wide {
        display: flex;
        align-items: center;
        margin-top: 12px;
        background: var(--mix-tile-bg);
        border: 1px solid var(--mix-tile-border);
        border-radius: 16px;
        padding: 0 16px;
        height: 58px;
        box-shadow: var(--mix-shadow);
        opacity: 0;
        transform: translateY(-130px) rotate(-2deg) scale(0.92);
        transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease,
                    border-color 0.15s;
        text-decoration: none;
    }
    .mix-stack.open .mix-tile-wide {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
    .mix-stack.open .mix-tile-wide.settings { transition-delay: 0.32s; }
    .mix-stack.open .mix-tile-wide.langs    { transition-delay: 0.40s; }
    .mix-tile-wide:hover { border-color: var(--mix-hover-border); }

    /* Tuile langues */
    .mix-tile-wide.langs { justify-content: space-between; gap: 8px; padding: 0 10px; }
    .mix-lang {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--mix-lang-color);
        transition: background 0.15s, color 0.15s;
        text-decoration: none;
    }
    .mix-lang:hover { background: var(--mix-lang-hover-bg); color: var(--mix-lang-hover-color); }
    .mix-lang.active { background: var(--mix-lang-active-bg); color: var(--mix-lang-active-color); }

    /* Tuile réglages */
    .mix-tile-wide.settings {
        gap: 14px;
        color: var(--mix-tile-color);
        font-weight: 600;
        font-size: 0.92rem;
        cursor: pointer;
    }
    .mix-tile-wide.settings i.lead { color: var(--mix-icon); font-size: 1.15rem; width: 24px; text-align: center; transition: color 0.15s; }
    .mix-tile-wide.settings:hover i.lead { color: var(--mix-hover-icon); }
    .mix-tile-wide.settings .go { margin-left: auto; color: var(--mix-go-color); font-size: 0.8rem; }

    /* Boutons topbar (menu + profil) : bordure basée sur currentColor
       pour rester visible quelle que soit la couleur de la topbar */
    #menuBtn,
    #loginLinkMobile {
        width: auto;
        height: 38px;
        padding: 0 14px;
        border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
        border-radius: 10px;
    }
    #menuBtn { gap: 8px; }
    #menuBtn:hover,
    #loginLinkMobile:hover {
        border-color: color-mix(in srgb, currentColor 60%, transparent);
        background: color-mix(in srgb, currentColor 10%, transparent);
    }
    #menuBtn .fa-chevron-down { transition: transform 0.28s; font-size: 0.85rem; }
    #menuBtn.open .fa-chevron-down { transform: rotate(180deg); }
    #menuBtn.open,
    #loginLinkMobile.open {
        background: color-mix(in srgb, var(--mix-btn-open-color) 15%, transparent);
        color: var(--mix-btn-open-color);
        border-color: color-mix(in srgb, var(--mix-btn-open-color) 60%, transparent);
    }

    /* Panneau Réglages - V15 */
    .mix-panel {
        background: var(--mix-tile-bg);
        border: 1px solid var(--mix-tile-border);
        border-radius: 16px;
        box-shadow: var(--mix-shadow);
        padding: 14px 16px 16px;
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-130px) rotate(-2deg) scale(0.92);
        transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                    opacity 0.3s ease;
    }
    .mix-stack.open .mix-panel {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }

    .mix-panel-header {
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--mix-tile-color);
        font-weight: 600;
        font-size: 1rem;
        padding-bottom: 10px;
        margin-bottom: 4px;
        border-bottom: 1px solid var(--mix-panel-divider);
    }
    .mix-panel-back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: 1px solid var(--mix-tile-border);
        border-radius: 10px;
        background: none;
        color: var(--mix-tile-color);
        cursor: pointer;
        transition: border-color 0.15s, background 0.15s;
    }
    .mix-panel-back:hover {
        border-color: var(--mix-hover-border);
        background: var(--mix-item-active-bg);
        color: var(--mix-active-color);
    }

    /* Items réglages dans le panneau v15 */
    .mix-panel .stg-oc-label { color: var(--mix-text-sub); }
    .mix-panel .stg-oc-item { color: var(--mix-tile-color); }
    .mix-panel .stg-oc-item:hover { background: var(--mix-item-hover-bg); }
    .mix-panel .stg-oc-item.active { background: var(--mix-item-active-bg); color: var(--mix-active-color); }
    .mix-panel .stg-oc-icon { background: var(--mix-icon-chip-bg); }
    .mix-panel .stg-oc-item.active .stg-oc-icon { background: var(--mix-icon-chip-active-bg); }
    .mix-panel .stg-oc-text-sub { color: var(--mix-text-sub); }
    .mix-panel .stg-oc-font-label { color: var(--mix-text-sub); }
    .mix-panel .stg-oc-font-btn {
        background: var(--mix-font-btn-bg);
        border-color: var(--mix-font-btn-border);
        color: var(--mix-tile-color);
    }
    .mix-panel .stg-oc-font-btn.active {
        border-color: var(--mix-font-btn-active-border);
        background: var(--mix-item-active-bg);
        color: var(--mix-active-color);
    }
    .mix-panel .stg-oc-font-section.is-open { border-top-color: var(--mix-panel-divider); }
    .mix-panel hr { border-color: var(--mix-font-btn-border); opacity: 1; }
}

/* Desktop : masquer les éléments mobiles.
   (On ne touche pas à .navbar ici — chaque thème gère son affichage
   desktop ; la règle display:none ci-dessus est limitée à < 1024px.) */
@media (min-width: 1024px) {
    .mobile-navbar,
    .mobile-navbar-logo,
    .mobile-navbar-spacer,
    .mobile-navbar-icons,
    .mix-backdrop,
    .mix-stack {
        display: none;
    }
}