/* =========================================================
   THOMATHS — NAVBAR
   Barre de navigation principale : logo, liens, badge
   environnement, toggle mode édition, lien admin.

   Responsive : au-delà de 920px la nav et les infos de droite
   sont visibles en ligne ; en dessous, elles se replient dans
   un tiroir (drawer) ouvert par le bouton hamburger. Seuil
   mesuré (logo + liens + toggle mode édition + lien admin,
   badge environnement retiré cf. plus bas ~890px de large
   nécessaire) avec une marge de sécurité : sans lui, topbar-
   right se retrouve poussé hors écran (sans wrap ni scroll)
   avant que le hamburger ne prenne le relais — d'où un menu
   qui semblait "disparaître" plutôt que de laisser place au
   hamburger à temps.

   Ne code aucune couleur en dur : tout passe par les tokens
   définis dans tokens.css.
   ========================================================= */

:root {
    /* Hauteur de la navbar, seule source de vérité : tout calc(100vh - …)
       ou `top`/`margin-top` qui doit se caler sous la navbar (ici et dans
       doc.css/editable.css/imports.css/exercise_card.css/sheet_detail.css)
       lit cette variable plutôt qu'un 52px recopié à la main — la valeur
       ne se change plus qu'à un seul endroit. */
    --nav-height: 52px;
    /* Hauteur de la context bar (fil d'Ariane + actions, sous la navbar) —
       seule source de vérité pour .ctx-bar-inner (context_bar.css) ET
       .dp-context-bar-inner (sheet_detail.css, page Feuille, prof/élève,
       implémentation dédiée mais mêmes dimensions), posée ici plutôt que
       dans context_bar.css car sheet_detail.html ne charge pas ce fichier. */
    --ctx-bar-height: 44px;
}

/* ---------- Conteneur fixe ---------- */
header.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    /* Plus sombre que --bg-elev (qui sert aussi de fond à plein d'autres
       éléments — cards, panneaux — donc pas question d'y toucher) : la
       maquette de référence a une navbar nettement plus sombre que le fond
       de page (--bg, theme.css). color-mix() reste local à ce fichier —
       aucun autre élément du site ne se cale sur cette teinte précise. */
    background-color: color-mix(in srgb, var(--bg) 80%, black 20%);
    border-bottom: 1px solid var(--border-soft);
    /* Pas d'ombre portée (contrairement à l'ancienne navbar 68px) : sur les
       pages avec une barre de contexte collée juste en dessous (doc-context-
       bar), l'ombre retombait dessus en une bande sombre disgracieuse à la
       jonction des deux — la bordure basse suffit à séparer visuellement. */
}

/* Le scroll ne vit plus au niveau de la fenêtre : #app-body (tout ce qui
   est sous la navbar) est le seul bloc qui défile, sur tout le site. La
   navbar (position:fixed) n'est donc plus jamais réduite par une scrollbar
   de fenêtre — elle gagne sa pleine largeur, et tout ce qui est position:
   fixed (sidebars, panneaux) aussi. Les position:sticky descendants
   d'#app-body qui visaient auparavant `top: 68px` (pour passer sous la
   navbar en scroll fenêtre) doivent désormais utiliser `top: 0` : #app-body
   commence déjà juste sous la navbar. */
body { overflow: hidden; }
#app-body {
    /* --doc-topbar-h (0 par défaut, mesuré par _leftmenu_base.html) exclut
       la context bar de ce conteneur : elle est position:fixed (context_
       bar.css), plus jamais un enfant sticky d'#app-body — sa hauteur ne
       doit donc plus être comprise dans la zone de scroll, sous peine de
       laisser un vide de sa hauteur en bas de page. Conséquence recherchée :
       la scrollbar native d'#app-body démarre sous la context bar, jamais
       derrière elle. */
    margin-top: calc(var(--nav-height) + var(--doc-topbar-h, 0px));
    height: calc(100vh - var(--nav-height) - var(--doc-topbar-h, 0px));
    overflow-y: auto;
    /* overflow-x: hidden explicite — sans lui, un axe "auto" (overflow-y) et
       l'autre "visible" (overflow-x par défaut) se comportent tous deux comme
       "auto" (spec CSS overflow), ce qui autorisait une scrollbar horizontale
       dès qu'un élément débordait légèrement de la largeur disponible. */
    overflow-x: hidden;
    /* Réserve la place de la scrollbar verticale même sur les pages assez
       courtes pour ne pas en avoir besoin : sinon .doc-page (centré en
       margin:auto) se recale de quelques px selon que la page précédente
       avait une scrollbar ou non — décalages visibles entre Cours & TD /
       Exercices (longues) et Devoirs (courte), par ex. */
    scrollbar-gutter: stable;
}

.topbar-inner {
    display: flex;
    align-items: center;
    height: var(--nav-height);
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Bloc logo + hamburger ---------- */
.topbar-left {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    width: 36px;
    height: 36px;
    /* min-width/padding:0 nécessaires : sans ça le `button { min-width:120px;
       padding:8px 16px }` générique de form.css l'emporte sur width (min-width
       prime sur width), et le bouton s'étale en pilule au lieu d'un carré. */
    min-width: 0;
    padding: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    /* .topbar-left est en align-items:stretch (pour que .brand occupe toute
       la hauteur de la barre) — un enfant à hauteur fixe comme celui-ci ne
       "stretch" pas mais reste calé en haut (flex-start) au lieu d'être
       centré. align-self:center l'aligne verticalement au milieu des 52px
       de la navbar, indépendamment du stretch du parent. */
    align-self: center;
}
.nav-toggle:hover { background: var(--surface-2); }
.nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    position: relative;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
}
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after  { top: 6px; }

.brand {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    text-decoration: none;
    /* Étend la zone de survol jusqu'au bord gauche de la barre (au-delà du
       padding de .topbar-inner) sans déplacer le texte : la marge négative
       annule le padding du parent, et le padding gagné en compensation
       remet le texte exactement à la même position visuelle. */
    margin-left: -32px;
    padding: 0 24px 0 36px;
    white-space: nowrap;
    transition: background 0.15s;
}
/* --page-accent : couleur d'identité de la PAGE, posée sur <body> par les
   pages thémées (cf. le bloc « THÈMES DE PAGE » plus bas). Le Σ, l'onglet
   actif et le fil d'Ariane courant (context_bar.css) la consomment tous les
   trois — c'est ce qui garantit qu'ils ne peuvent plus être dépareillés.
   Sans thème, elle n'existe pas et le bleu --accent s'applique. */
.brand-mark { color: var(--page-accent, var(--accent)); margin-right: 6px; font-size: 1.2em; }
.brand:hover { background: var(--surface-2); }

/* ---------- Liens de navigation (desktop) ---------- */
.main-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

/* Enrobe "Cours & TD" pour son sous-menu Sup/Spé au survol (prof
   uniquement, cf. base.html) — position:relative sert d'ancre au menu
   flottant, display:flex + align-self:stretch le fait participer à la
   hauteur de .main-nav (align-items:stretch) exactement comme un .nav-link
   seul l'aurait fait. */
.nav-item-dropdown {
    position: relative;
    display: flex;
    align-self: stretch;
}
.nav-item-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Pas de right:0 : la largeur du lien parent ("Devoirs", "Colles"...)
       est souvent plus courte que les libellés du sous-menu ("Devoirs
       surveillés", "Prog. de colles"...) — largeur au contenu (min-content
       via les items en white-space:nowrap) pour ne jamais les tronquer,
       plutôt que forcer la largeur du lien au-dessus. */
    min-width: 100%;
    width: max-content;
    margin: 0;
    /* Pas de padding vertical propre : l'espace au-dessus/en dessous des
       items vient du padding de chaque lien (8px ci-dessous), pas d'un
       padding du menu qui laissait un vide au-dessus du premier item. */
    padding: 0;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    /* overflow:hidden : les liens n'ont plus leur propre border-radius (ils
       vont maintenant bord à bord, cf. padding:0 en horizontal ci-dessus) —
       c'est ce cadre qui garde les coins arrondis en clippant leur fond de
       survol. */
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 310;
}
.nav-item-dropdown:hover .nav-item-dropdown-menu,
.nav-item-dropdown:focus-within .nav-item-dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.nav-item-dropdown-menu a {
    /* Pas de padding horizontal ni de border-radius propres : le lien va
       bord à bord avec le menu (padding horizontal nul ci-dessus), donc son
       fond de survol occupe toute la largeur réelle du menu, pas juste celle
       du texte "Sup"/"Spé" avec une marge de chaque côté. */
    padding: 8px 0;
    color: var(--text-muted);
    text-decoration: none;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 500;
    white-space: nowrap;
}
.nav-item-dropdown-menu a:hover {
    color: var(--text);
    background: var(--surface-2);
}

/* Variante avec logo de type (Devoirs/Colles) : texte aligné à gauche,
   logo collé au bord gauche du menu plutôt que centré comme Sup/Spé. */
.nav-item-dropdown-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    text-align: left !important;
    padding-left: 10px !important;
    padding-right: 14px !important;
}
.nav-item-dropdown-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    object-fit: contain;
}
/* Même bleu que l'icône "Programmes de colles" de la sidebar Devoirs
   (devoirs.css) — même SVG copié ici, même variable de couleur. */
.nav-item-dropdown-icon-programme-colle { color: var(--kind-programme-colle); }

.nav-link {
    display: flex;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    color: var(--text-muted);
    text-decoration: none;
    padding: 0 21px;
    font-weight: 500;
    font-size: 1.05rem;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    /* "Cours & TD" (le plus long des libellés) ne doit jamais passer à la
       ligne : un lien qui s'enroule sur 2 lignes grandit en hauteur et
       déborde de la topbar (hauteur fixe 52px, cf. .topbar-inner), écrasant
       visuellement son propre texte au lieu de simplement le tronquer. */
    white-space: nowrap;
    flex-shrink: 0;
}
.nav-link:hover { color: var(--text); background: var(--surface-2); }
.nav-link.is-active { color: var(--page-accent, var(--accent)); border-bottom-color: var(--page-accent, var(--accent)); }

/* ---------- Bloc de droite (desktop) ---------- */
.topbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
}

.env-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.86rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.env-badge-icon { color: var(--accent); font-size: 0.95em; }

.admin-badge {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    background: var(--danger);
    color: #fff;
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* Les chiffres n'ont pas de jambage : leur encre flotte au-dessus du
       milieu réel de la boîte de ligne. Léger décalage pour un centrage
       optique correct dans le rond. */
    padding-top: 0.12em;
}

/* ---------- Menu compte (avatar + dropdown) ---------- */
.account-menu { position: relative; }
.account-menu-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    color: var(--accent);
    cursor: pointer;
}
.account-menu-trigger:hover { background: var(--surface-2); }
.account-menu-avatar { display: inline-flex; width: 22px; height: 22px; }
.account-menu-avatar svg { width: 100%; height: 100%; }
.account-menu-chevron { width: 12px; height: 12px; color: var(--text-muted); }
.account-menu-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 16px;
    height: 16px;
    min-width: 0;
    font-size: 0.58rem;
    border: 2px solid var(--surface-2);
}

.account-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 40;
}
.account-menu-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 6px;
}
.account-menu-role { font-size: 0.85rem; font-weight: 600; color: var(--text); }

.account-menu-view-group { display: flex; flex-direction: column; margin-bottom: 6px; }
.account-menu-check { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); visibility: hidden; }
.account-menu-view-btn.is-active .account-menu-check { visibility: visible; }

.account-menu-item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
}
.account-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.account-menu-item:not(:disabled):hover { background: var(--surface-2); }
.account-menu-item:disabled { opacity: 0.5; cursor: not-allowed; }
.account-menu-item-danger { color: var(--danger); }
.account-menu-item-danger svg { color: var(--danger); }
.account-menu-item-danger:not(:disabled):hover { background: rgba(217, 83, 79, 0.1); }
.account-menu-logout-form { margin: 0; }
.account-menu-logout-form .account-menu-item { min-width: 0; }
.account-menu-item > span:not(.admin-badge) { flex: 1; }

.account-menu-separator { height: 1px; background: var(--border-soft); margin: 6px 4px; }

.account-menu-brightness {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
}
.account-menu-brightness svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-muted); }
.account-menu-brightness input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.account-menu-brightness-value { font-size: 0.8rem; color: var(--text-muted); width: 34px; flex-shrink: 0; text-align: right; }

/* ---------- Tiroir mobile : masqué par défaut (desktop) ----------
   N'apparaît que sous 860px (cf. media query). Sans ça, il s'afficherait
   en flux normal sur desktop et dupliquerait le menu. */
.nav-drawer,
.nav-drawer-backdrop { display: none; }

/* =========================================================
   RESPONSIVE — bascule en menu hamburger sous 860px
   ========================================================= */
@media (max-width: 920px) {

    .nav-toggle {
        display: inline-flex;
        /* Colle le hamburger au bord gauche de la barre, comme .brand le
           fait en desktop via sa propre marge négative (cf. plus haut) —
           sans ça il reste calé à 32px (padding de .topbar-inner). */
        margin-left: -32px;
    }

    /* .brand n'a plus besoin d'étendre sa zone de survol jusqu'au bord :
       le hamburger occupe maintenant cette place. Sans ce reset, la marge
       négative de .brand (desktop) le fait chevaucher le hamburger : leur
       survol respectif se déclenche l'un sur l'autre. */
    .brand { margin-left: 0; padding-left: 8px; }

    .main-nav { display: none; }

    /* Le menu compte (avatar) reste visible et collé à droite même en
       mobile — il porte déjà Vue professeur/élève, Gestion, luminosité et
       déconnexion, donc il n'y a plus besoin de le dupliquer dans le
       tiroir hamburger (cf. suppression de .nav-drawer-section). */

    /* ---------- Tiroir mobile ---------- */
    .nav-drawer {
        display: block;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        bottom: 0;
        width: 260px;
        max-width: 80vw;
        background: var(--bg-elev);
        border-right: 1px solid var(--border);
        z-index: 310;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        overflow-y: auto;
        padding: 16px 0;
    }
    .nav-drawer.is-open { transform: translateX(0); }

    .nav-drawer .nav-link {
        display: block;
        height: auto;
        border-radius: 0;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding: 12px 20px;
    }
    .nav-drawer .nav-link.is-active { color: var(--page-accent, var(--accent)); border-left-color: var(--page-accent, var(--accent)); background: var(--surface); }

    .nav-drawer-backdrop {
        display: block;
        position: fixed;
        inset: var(--nav-height) 0 0 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 305;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }
    .nav-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
}


/* =========================================================
   THÈMES DE PAGE — le n-uplet (Σ, onglet nav + son trait, fil d'Ariane)
   =========================================================
   UNE SEULE déclaration par page : --page-accent sur <body>. Les trois
   éléments la consomment (nav.css ci-dessus pour le Σ et l'onglet,
   context_bar.css pour le fil d'Ariane), donc ils ne peuvent plus être
   dépareillés.

   AVANT, chaque page réécrivait 3 à 4 règles à la main, avec trois
   mécanismes différents (feuille chargée par page, classe sur <body>,
   :has()). Résultat mesuré : planning avait le trait de l'onglet en vert
   mais son TEXTE resté bleu (seul border-bottom-color était repeint), et
   imports ne repeignait pas l'onglet du tout.

   La teinte est celle des PETITS TEXTES sur fond sombre : prendre la
   version avivée quand la couleur de base manque de contraste sur
   --bg-elev (c'est le cas de --kind-banque et --kind-devoirs).
   ========================================================= */
body.planning-ctx-active  { --page-accent: #39c687; }
body.devoirs-ctx-active   { --page-accent: var(--kind-devoirs-text); }
body.devoirs-ds-ctx-active{ --page-accent: var(--kind-ds); }
body.correction-ctx-active{ --page-accent: var(--kind-correction-text); }
body:has(.import-page),
body:has(.review-page)    { --page-accent: #F27CD0; }
body.colles-ctx-active    { --page-accent: var(--kind-programme-colle); }
body.colle-notee-ctx-active { --page-accent: var(--kind-colle); }
/* Page feuille : la teinte dépend du type du document (cf. sheet_detail.css,
   qui pose .dp-kind-* sur <body>).
   :has(.dp-page), :has(.spdf-page) est INDISPENSABLE : base.html pose
   dp-kind-<type> dès qu'un `sheet` est dans le contexte, ce qui est aussi le
   cas de la page d'import (elle reçoit la feuille cible). Sans ce filtre,
   /imports/ héritait du vert « cours » au lieu de son rose — mesuré. Le
   sélecteur ne s'applique donc que si le conteneur propre à une page feuille
   est réellement présent — `.dp-page` pour l'ancienne page classique,
   `.spdf-page` pour la nouvelle (sheet_pdf.html, exercise_picker_pdf.html :
   ni l'une ni l'autre n'a de `.dp-page`, cf. leur propre commentaire).
   Colle/DM/DS manquaient à cette liste (mesurée : la page « Importer… » sur
   une feuille de colle héritait du bleu/violet par défaut au lieu du teal de
   --kind-colle) — repris des teintes déjà utilisées ailleurs pour ces genres
   (colle-notee-ctx-active, --kind-devoirs-text, --kind-ds). */
body.dp-kind-cours:has(.dp-page, .spdf-page)  { --page-accent: var(--kind-cours-text, #39c687); }
body.dp-kind-td:has(.dp-page, .spdf-page)     { --page-accent: #8B74FA; }
body.dp-kind-resume:has(.dp-page, .spdf-page) { --page-accent: #5B9AF0; }
body.dp-kind-banque:has(.dp-page, .spdf-page) { --page-accent: #F27CD0; }
body.dp-kind-colle:has(.dp-page, .spdf-page)  { --page-accent: var(--kind-colle); }
body.dp-kind-dm:has(.dp-page, .spdf-page)     { --page-accent: var(--kind-devoirs-text); }
body.dp-kind-ds:has(.dp-page, .spdf-page)     { --page-accent: var(--kind-ds); }