/**
 * menu-lateral.css
 * ─────────────────────────────────────────────────────────────
 * Le menu de gauche, UN SEUL pour toutes les pages et tous les modes d'animation (décision du pilote du 16/10/2026) :
 * le style de l'ancien menu « animation allumée » (icône et texte côte à côte, panneau à fond plein), mais toujours
 * déplié, et plus étroit que lui (188px au lieu de 232px). Le bas du menu porte l'avatar et la cloche (templates/base/_nav.html.twig).
 *
 *   - pages ordinaires : le menu est la première colonne de la page ;
 *   - pages plein écran (body.page-ville) : le menu est fixe, la scène commence à sa droite (plein-ecran.css,
 *     fiche-ville.css) ;
 *   - sous 850px : rien de tout ça, la barre du haut du site reste (responsive.css).
 *
 * Fond plein, sans flou : pas de verre dépoli sur une scène qui s'anime (sobriete.css).
 * L'ancien état « replié » (public/js/menuOnload.js) ne sert plus qu'aux petits écrans ; le bouton « Réduire le menu » a le sien
 * (public/js/menu-lateral.js, clé menuLateralReplie) ; le menu part réduit aux icônes partout (décision du 01/11/2026), un clic le déplie et le choix se retient.
 */
:root { --menu-largeur: 188px; }

@media (min-width: 851px) {
    /* 100dvh après 100vh : sur une tablette, ou un téléphone en « version pour ordinateur », 100vh compte aussi la barre
       du navigateur, et le bas du menu (« Réduire le menu », l'avatar du profil) passait dessous, invisible
       (constat du pilote du 01/11/2026). 100dvh suit la hauteur réellement visible, comme commun.css et _header.css. */
    body > header[role="banner"] {
        box-sizing: border-box; width: var(--menu-largeur); height: 100vh; height: 100dvh; gap: 0;
        justify-content: flex-start; padding: 12px 0 14px;
        background: var(--panneau-fond); backdrop-filter: none; -webkit-backdrop-filter: none;
        border-right: 1px solid var(--panneau-bord);
    }
    /* Pages ordinaires : le menu est la première colonne. Pages plein écran : il est fixe (plein-ecran.css). */
    body:not(.page-ville):not(.en-cadre) { grid-template-columns: var(--menu-largeur) minmax(0, 1fr); }

    /* Toujours en grand : icône et texte côte à côte, quel que soit l'état replié mémorisé. */
    body > header .logo, body > header .logo--reduit { width: 100%; }
    body > header .logo--reduit .logo__nom { display: block; }
    body > header nav { width: 100%; background: transparent; height: auto; flex: 1; }
    /* Écran bas (téléphone couché, fenêtre réduite) : ce sont les rubriques qui défilent, le bas du menu reste en vue.
       Pas sur l'en-tête entier : le sous-menu de l'avatar, qui déborde à droite, serait coupé. */
    body > header nav { min-height: 0; overflow-y: auto; }
    body > header .menu, body > header .menu--reduit { width: 100%; padding: 0 12px; box-sizing: border-box; }
    body > header .menu__item { align-items: stretch; gap: 8px; }
    body > header .menu__item a { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 10px 12px; text-align: left; }
    body > header .menu--reduit .texte_menu, body > header .texte_menu { display: inline; font-size: 14px; }
    body > header #toggle_conteneur { display: none; }

    /* Le bouton « Réduire le menu » : le menu part réduit, un clic le déplie, ce choix se retient sur l'appareil (menu-lateral.js). */
    body > header .menu__replier {
        display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: none; border-radius: 8px;
        background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
    }
    body > header .menu__replier:hover, body > header .menu__replier:focus-visible {
        background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); outline: none;
    }
    body > header .menu__replier .material-symbols-outlined { font-size: 20px; }

    /* Menu réduit : les icônes seules, 68px. Même mise en page, rien ne bouge d'autre. */
    body.menu-replie { --menu-largeur: 80px; }
    body.menu-replie > header .texte_menu,
    body.menu-replie > header .logo__nom { display: none; }
    body.menu-replie > header .menu__item a, body.menu-replie > header .menu__replier { justify-content: center; padding-inline: 0; }
    body.menu-replie > header .menu, body.menu-replie > header .menu__bas { padding: 0 16px; }
    body.menu-replie > header .menu__replier .material-symbols-outlined { transform: scaleX(-1); }
    body.menu-replie > header .menu__compte { flex-direction: column; }

    /* Le bas : l'interrupteur d'animation, puis l'avatar et la cloche. */
    body > header .menu__bas {
        box-sizing: border-box; width: 100%; padding: 0 12px; margin-top: auto;
        display: flex; flex-direction: column; gap: 10px;
    }
    body > header .menu__compte { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    body > header .menu__user, body > header .menu__user.menu--reduit { width: auto; }
    body > header .menu__user ul li.deroulant, body > header .menu__user.menu--reduit li.deroulant { width: auto; }
    body > header .menu__user ul .sous, body > header .menu__user.menu--reduit ul .sous { left: calc(100% + 8px); bottom: -8px; }
    /* Le sous-menu du profil s'ouvre au survol, à côté de l'avatar. Deux défauts le refermaient avant qu'on l'atteigne (vus sur le
       menu réduit, 01/11/2026) : la marge de 8 px entre l'avatar et lui ne faisait partie ni de l'un ni de l'autre, et `pointer-events: none`
       (layout/_nav.css) coupait le survol dès que le curseur quittait l'avatar, rendant le délai de fermeture de 250 ms inutile.
       Masqué, il reste intouchable (visibility: hidden) ; pendant le délai de fermeture il est encore visible, donc atteignable. */
    body > header .menu__user ul .sous { pointer-events: auto; }
    body > header .menu__user ul .sous::before { content: ""; position: absolute; top: 0; bottom: 0; right: 100%; width: 24px; }
    body > header .cloche--sidebar { margin: 0; }
    body > header .cloche[hidden] { display: none; }
}

/* La maquette en plein écran (mode tiers : atelier-modes.js pose .fiche--mode-grand) passe par-dessus
   toute la page, menu compris, comme avant ; « Retour » ramène la page et son menu. */
@media (min-width: 851px) {
    body.fiche--mode-grand > header[role="banner"] { display: none; }
}

/* Sous 850px la barre du haut garde ses éléments sur une ligne : le bas du menu n'est qu'un conteneur transparent. */
@media (max-width: 850px) {
    body > header .menu__replier { display: none; }
    body > header .menu__bas, body > header .menu__compte { display: contents; }
}