/* ══════════════════════════════════════════════════════════════════════════════
   menu-lateral.css — LE STYLE DU MENU LATÉRAL, POUR LES DEUX MONDES.

   Extrait de shell.css le 2026-08-03, à la demande de l'utilisateur : « propage
   cette structure de menu dans l'ensemble du projet ». Le shell dessinait des
   rubriques repliables ; les pages héritées recevaient l'arbre Bootstrap de
   menu.php. Deux balisages, deux feuilles, un seul menu — donc deux endroits à
   corriger au moindre défaut, et une navigation qui changeait de forme selon la
   page. Le balisage est désormais dans inclusions/menu_lateral.php, le style ici,
   et les deux mondes chargent l'un et l'autre.

   ⚠ CES RÈGLES NE SONT PLUS DANS shell.css. Ne pas les y recopier « pour aller
     vite » : c'est précisément la duplication qu'on vient de retirer.

   ⚠ .side N'EXISTE QUE DANS LE SHELL. Les sélecteurs sont donc ancrés sur
     .navwrap, le conteneur que les deux mondes partagent — .side a.nav est
     devenu .navwrap a.nav, à spécificité égale.

   Les jetons de couleur (--blue, --bl, --ink2, --surf2, --line, --amber, la
   famille --stu-or et --grad-ic) sont émis des DEUX côtés : par shell.css et la
   couche de rôle pour le shell, par stu_style_role() pour les pages héritées.
   Un jeton ajouté ici doit exister dans les deux, sans quoi la moitié du projet
   affiche un menu incolore.
   ══════════════════════════════════════════════════════════════════════════════ */
.navwrap{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:0 4px}
/* groupes repliables (accordéon) — en-tête « menu principal » avec icône + compteur */
.grp{margin-bottom:2px}
.grp-h{width:100%;border:1px solid transparent;background:transparent;font:inherit;color:var(--ink2);padding:8px 10px;margin:1px 0;display:flex;align-items:center;gap:10px;cursor:pointer;border-radius:12px;transition:.15s}
.grp-h:hover{background:var(--surf2)}
.grp-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--bl);color:var(--blue);font-size:1rem;transition:.15s}
.grp-nm{flex:1;text-align:left;font-size:.9rem;font-weight:750;letter-spacing:-.01em}
.grp-ct{flex:none;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center;border-radius:999px;background:var(--stu-or-tint);color:var(--stu-or-kk);font-size:.68rem;font-weight:800;font-variant-numeric:tabular-nums;transition:.15s}
.grp-car{flex:none;font-size:.8rem;transition:transform .2s ease;opacity:.5}
/* LE CADENAS D'UNE RUBRIQUE À ACCÈS PARTIEL. menu.php:117 le pose sur « GESTION
   ETAB. » quand le compte n'a pas tous les droits de gestion. Il y arrivait sous
   forme de BALISAGE glissé dans le libellé, que le shell échappait : la vue
   enseignant affichait donc « <span class="bi bi-lock-fill text-info"> </span>
   GESTION ETAB. » en toutes lettres. shell_menu.php l'extrait maintenant du
   texte, menu_lateral.php le redessine, et c'est cette règle qui l'habille.
   Ambre et non rouge : ce n'est pas une erreur, c'est une limite. */
.grp-lk{flex:none;font-size:.72rem;color:var(--amber);opacity:.9}
.grp-h:hover .grp-ic{background:var(--bl2);color:var(--blue-7)}
.grp.open>.grp-h{background:var(--bl-025);border-color:var(--bl2);color:var(--blue-8)}
/* LA PASTILLE DU MENU OUVERT. Elle est sur les 40+ pages, dans la colonne de
   gauche, et gardait un dégradé cyan écrit en dur : un parent voyait une
   pastille bleue dans un menu violet. Balayage complet du 2026-08-03 — toutes
   les couleurs de MARQUE écrites en dur passent aux jetons de rôle. Ce qui est
   SÉMANTIQUE ne bouge pas : vert de succès, rouge de danger, ambre d'alerte, et
   le rose/bleu des pastilles .apc-ava qui distinguent filles et garçons.

   LA COLONNE ENTIÈRE EST REPASSÉE EN COULEUR PRINCIPALE LE 2026-08-03, à la
   demande de l'utilisateur, et la règle de l'interface tient en une phrase :

       le MENU dit QUI VOUS ÊTES · l'ORANGE du logo dit OÙ CLIQUER.

   Elle avait porté la secondaire quelques heures plus tôt, et le menu disait
   alors deux couleurs à la fois : en-têtes de rubrique en secondaire, entrées
   en principale. Il n'en dit plus qu'une. L'accent de marque, lui, n'a pas
   disparu du menu — il s'y concentre sur le COMPTEUR (--stu-or-*, la famille
   orange fixe de role_utilisateur.php), seule tache orange de la colonne, et
   la seule information qui ne soit pas une identité.

   Partout ailleurs — boutons, pictogrammes de page, jauges — c'est l'orange qui
   parle. Les icônes du menu sont la seule exception, et elles la justifient. */
.grp.open>.grp-h .grp-ic{background:var(--grad-ic);color:#fff;box-shadow:0 5px 13px rgba(var(--stu-role-rgb,0,161,255),.35)}
.grp.open>.grp-h .grp-ct{background:var(--stu-or-tint2);color:var(--stu-or-kk)}
/* Le chevron suit l'en-tête : --blue-7, la principale assombrie, qui bascule
   déjà avec le thème par la couche de rôle. */
.grp.open .grp-car{transform:rotate(180deg);opacity:1;color:var(--blue-8)}
.grp-b{display:none;flex-direction:column;gap:2px;padding:2px 0 8px 10px;margin-left:24px;border-left:1px solid var(--line)}
.grp.open>.grp-b{display:flex}
/* UN MODULE SANS SOUS-MENU (2026-08-03). « Accueil » est déclaré dans menu.php
   comme une simple destination, pas comme une rubrique : la conversion en faisait
   pourtant une section d'UNE entrée, que le menu affichait en accordéon. Il
   fallait donc déplier « Accueil » pour cliquer « Accueil ». Un module dont
   l'unique entrée porte son propre nom devient un lien direct — même géométrie
   que .grp-h, pour que la colonne reste régulière, mais sans chevron ni
   compteur. */
a.grp-h{text-decoration:none}
a.grp-h:hover{background:var(--surf2)}
a.grp-h.on{background:var(--bl-025);border-color:var(--bl2);color:var(--blue-8)}
a.grp-h.on .grp-ic{background:var(--grad-ic);color:#fff;
  box-shadow:0 5px 13px rgba(var(--stu-role-rgb,0,161,255),.35)}
.navwrap::-webkit-scrollbar{width:0}
.navwrap a.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--ink2);font-size:.9rem;font-weight:600;transition:.14s;position:relative}
.navwrap a.nav i{font-size:1.08rem;width:20px;text-align:center;color:var(--blue)}
.navwrap a.nav:hover{background:var(--surf2);color:var(--ink)}
.navwrap a.nav.on{background:var(--bl);color:var(--blue-7)}
.navwrap a.nav.on i{color:var(--blue)}
.navwrap a.nav.on::before{content:"";position:absolute;left:-11px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--blue)}

/* ── LA CARTE DE PROFIL ────────────────────────────────────────────────────────
   Elle coiffe le menu : photo, nom, rôle, année académique. Le shell l'avait,
   les pages héritées n'avaient qu'un logo identique pour tous — rien n'y disait
   sur quel compte on travaillait, alors que la confusion entre un compte
   d'établissement et un personnel promu est l'erreur la plus courante du projet
   (les deux portent securite = 5). Balisage : inclusions/profil_carte.php. */
.profcard{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--cardg);overflow:hidden;padding:0 12px 14px;margin-bottom:14px;text-align:center;box-shadow:var(--sh)}
.profcard-cover{height:50px;margin:0 -12px;background:linear-gradient(120deg,var(--blue),var(--blue-8))}
.profcard-ph{width:60px;height:60px;border-radius:16px;object-fit:cover;border:3px solid var(--surf);background:var(--surf);margin:-30px auto 8px;display:block;box-shadow:0 6px 16px rgba(18,28,55,.16)}
.profcard-nm{font-weight:800;font-size:.96rem;letter-spacing:-.02em;color:var(--ink);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profcard-sub{margin-top:5px;font-size:.7rem;font-weight:700;color:var(--blue-7);display:inline-flex;align-items:center;gap:5px;background:var(--bl);padding:2px 9px;border-radius:999px}
.profcard-yr{margin-top:6px;font-size:.69rem;color:var(--ink3);font-weight:600}
.profcard-off{margin-top:8px;display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:.67rem;font-weight:700;color:var(--ink3);background:transparent;border:1px solid var(--line);border-radius:8px;padding:3px 8px;cursor:pointer;transition:.13s}
.profcard-off:hover{color:var(--blue-7);border-color:var(--blue);background:var(--bl)}
.profcard-off[disabled]{opacity:.6;cursor:default}

/* ── LA COLONNE DES PAGES HÉRITÉES ─────────────────────────────────────────────
   Le shell a .side, une colonne flex qui répartit carte + menu et donne au menu
   la hauteur restante. Les pages héritées ont #sidebar.sidebar-wrapper, un BLOC
   de hauteur fixe (position:fixed, top/bottom à 20px) : .navwrap{flex:1} n'y
   trouve aucun conteneur flex, le menu garde sa hauteur naturelle et déborde de
   la carte blanche au lieu d'y défiler. Ces trois propriétés lui rendent la
   géométrie du shell, sans toucher au thème d'origine — l'ancre #id est plus
   spécifique que la classe, donc elle passe devant sans !important. */
#sidebar.sidebar-wrapper{display:flex;flex-direction:column;padding:14px 12px;overflow:hidden}