:root{
  /* VALEUR PAR DÉFAUT DE LA COULEUR PRINCIPALE — l'ardoise de l'espace établissement
     depuis le 2026-08-04, l'orange #ef7f4f auparavant. Elle est écrasée sur toute page
     du shell par le bloc <style id="stu-role-couleur"> que shell_haut.php émet
     quelques lignes après le <link> de cette feuille : ce qui s'affiche vient donc
     TOUJOURS de inclusions/role_utilisateur.php. Elle n'en était pas moins un piège —
     on lisait ici « la couleur de l'application est orange », ce qui n'était plus vrai
     depuis deux refontes. */
  --blue:#475569;--blue-6:#404d5f;--blue-7:#374252;--blue-8:#2d3643;--bl:#e9ebed;--bl2:#cfd3d8;--bl-025:#f8f8f9;
  --green:#16a06a;--green-l:#e6f6ee;--amber:#eaa03a;--amber-l:#fdf1dd;
  --ink:#1b2333;--ink2:#5a6478;--ink3:#8b94a6;--line:#e7ecf4;--line2:#eef1f7;
  --paper:#f5f8fd;--surf:#ffffff;--surf2:#f4f7fc;
  /* dégradé doux façon entête (.hero) appliqué aux surfaces de toute la page */
  --cardg:linear-gradient(160deg,#ffffff,#f4f8fe);
  --pageg:linear-gradient(180deg,#eef4fc,#f5f8fd 340px);
  --sh:0 1px 2px rgba(24,44,90,.04),0 6px 18px rgba(24,44,90,.05);
  --sh2:0 2px 6px rgba(24,44,90,.05),0 16px 40px rgba(24,44,90,.09);
  --side:250px;--sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;--serif:"Iowan Old Style",Georgia,serif;
  /* Couleurs de TEXTE porteuses de sens. Elles etaient ecrites en dur dans les
     pages : sur fond sombre, un rouge a 85 de luminance passait a 2,6:1 de
     contraste. Ces jetons sont eclaircis en mode sombre, comme --ink. */
  --danger:#c0392b;--info:#0a78c8;--info2:#0a6fb0;
  --grad-or:linear-gradient(160deg,#fff6f0,#fde7d9);--grad-bl:linear-gradient(160deg,#eaf4ff,#dbecff);--grad-bl2:linear-gradient(180deg,transparent,var(--grad-bl-bd));--grad-bl-bd:#cfe6fa;--tint-k:#00a1ff;--tint-k2:#0090ea;--tint-bl:#e7f5ff;--tint-bl2:#eef8ff;--tint-bl3:#f4fbff;--tint-bl4:#d6eeff;--tint-bl5:var(--grad-bl-bd);--tint-bl6:#dceefc;--tint-rg:#fbeceb;--tint-rg2:#fdeceb;--tint-rg3:#fdecea;--mh-or:#fbe9df;--mh-or-b:#f4d6c6;--mh-or-k:#d3562a;--mh-bl:#e7f2fb;--mh-bl-b:#cfe6f7;--mh-bl-k:#0a6fb0;--mh-rg:#fdeceb;--mh-rg-b:#f6d0cc;--mh-rg-k:#c0392b;--mh-x:#fff;--btn-noir:#252f45;--btn-noir-h:#161d2c;--purple:#5b4fb9;--warn-ink:#8a6414;--rank:#5b6b86;
}
/* Défauts sombres des trois fonds discrets : l'ardoise fondue dans le papier #0c1122,
   comme les calcule role_utilisateur.php. Écrasés eux aussi par le bloc de rôle. */
:root[data-theme="dark"]{--ink:#e9edf7;--ink2:#a4aec4;--ink3:#7a8399;--line:#232c44;--line2:#1d253a;--paper:#0c1122;--surf:#141b30;--surf2:#1a2238;--bl:#171d2f;--bl2:#1e2537;--bl-025:#121829;--green-l:#12291f;--amber-l:#2a2413;
  --cardg:linear-gradient(160deg,#161e35,#111830);--pageg:linear-gradient(180deg,#0a0f1e,#0c1122 340px);
  --sh:0 2px 6px rgba(0,0,0,.35),0 14px 36px rgba(0,0,0,.45);--sh2:0 2px 8px rgba(0,0,0,.45),0 24px 56px rgba(0,0,0,.55);
  --danger:#ff8f80;--info:#5cb8f7;--info2:#7cc4f7;--purple:#b0a4f5;--warn-ink:#e3b35a;--rank:#8c9ab4;}
*{box-sizing:border-box}
body{margin:0;background:var(--pageg);color:var(--ink);font-family:var(--sans);letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
/* L'attribut hidden ne vaut qu'une règle du navigateur : la moindre déclaration
   display le fait sauter, et les boutons cachés d'une fenêtre s'affichaient tous
   en même temps. On lui rend la priorité, une fois, pour toutes les pages. */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ---------------- shell ---------------- */
.shell{display:flex;min-height:100vh;width:100%}
.side{width:var(--side);flex:0 0 var(--side);align-self:flex-start;position:sticky;top:0;height:100vh;overflow:hidden;
  background:var(--cardg);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;gap:2px}
/* Le menu latéral a quitté cette feuille le 2026-08-03 : son style est
   partagé avec les pages héritées et vit dans assets/css/menu-lateral.css,
   que shell_haut.php et entete.php chargent tous les deux. */
.side .cap:not(:first-child){margin-top:8px}
/* Carte profil : bannière dégradée + photo en médaillon */
/* La carte de profil a quitté cette feuille le 2026-08-03 : elle est partagée
   avec les pages héritées et vit dans assets/css/menu-lateral.css, aux côtés
   du menu qu'elle coiffe. */
.side .cap{font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);padding:10px 12px 6px}
.side .sp{flex:1}
.side .out{margin-top:6px;display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:11px;color:var(--blue);font-size:.85rem;font-weight:700;border:1px solid var(--line);justify-content:center}
.side .out:hover{background:var(--surf2);color:var(--danger)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:15px 30px;background:var(--surf);border-bottom:1px solid var(--line)}
.topbar .burger{display:none}
.topbar h1{font-size:1.1rem;font-weight:800;letter-spacing:-.03em;margin:0}
.topbar .meta{color:var(--ink3);font-size:.8rem}
.topbar .sp{flex:1}
/* ⚠ `position:relative` N'EST PAS DÉCORATIF ICI : le compteur `.bdg` est en
 * `position:absolute` et se cale sur le premier ancêtre positionné. Sans cette
 * ligne, il s'ancrait sur `.hd` — ce qui marchait par chance, tant que `.hd`
 * restait `relative` et qu'aucun bouton à badge ne vivait ailleurs. Le badge
 * appartient au BOUTON, pas au conteneur : on le dit. (Sans quoi, en passant
 * `.hd` en `static` sur téléphone — voir la requête média plus bas —, tous les
 * compteurs se seraient empilés dans le coin de la barre.) */
.icbtn{position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surf);color:var(--blue);display:grid;place-items:center;cursor:pointer;font-size:1.05rem;transition:.14s}
.icbtn:hover{color:var(--blue);border-color:var(--blue)}
/* Le micro EN TRAIN D'ÉCOUTER (assets/js/stu-voix.js). Sans cet état, la dictée
   fonctionnait sans que rien ne bouge à l'écran — donc, pour l'utilisateur,
   elle ne fonctionnait pas. La pulsation dit que l'écoute est en cours ; le
   second clic l'arrête. */
.stu-mic-on{background:#fdecec!important;border-color:#e2564d!important;color:#c9372c!important;animation:stuMicPulse 1.1s ease-in-out infinite}
@keyframes stuMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(201,55,44,.35)}50%{box-shadow:0 0 0 6px rgba(201,55,44,0)}}
@media (prefers-reduced-motion:reduce){.stu-mic-on{animation:none}}
.content{padding:30px;max-width:1200px;width:100%;margin:0 auto}

/* ── LE FIL D'ARIANE PASSE SOUS LE BANDEAU DE LA PAGE (2026-08-04) ────────────
 * Demandé par le client : le fil doit être « juste en dessous de l'entête de
 * chaque page ». Or shell_haut.php l'écrit AVANT le contenu — il tombait donc
 * au-dessus du bandeau.
 *
 * On ne touche pas les soixante pages : elles posent déjà leur bandeau et le
 * fil comme FRÈRES, enfants directs de .content. Mesuré sur le rendu réel :
 * 54 pages sur 60 dans ce cas. Une colonne flex et trois ordres suffisent donc
 * — le bandeau d'abord, le fil ensuite, le reste après. L'ordre du document est
 * conservé à l'intérieur d'un même rang, rien d'autre ne bouge.
 *
 * ⚠ Les six pages dont le bandeau est NICHÉ dans leur .cc (mon-espace et les
 *   cinq pages de création) ne peuvent pas être servies ainsi : leur bandeau
 *   n'est pas frère du fil. Elles emploient $shell_fil_differe et placent le
 *   fil elles-mêmes — voir inclusions/shell_haut.php.
 *
 * ⚠ Ne PAS transformer .content en flex sans ce commentaire : un lecteur qui
 *   verrait « display:flex » sur un conteneur de page croirait à une erreur. */
.content{display:flex;flex-direction:column}
.content > *{order:3}
.content > .hero{order:1}
.content > .fil{order:2}

/* ---------------- barre : dropdowns, badges, avatar ---------------- */
.hd{position:relative}
.avbtn{position:relative;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:var(--surf2);display:block;transition:.14s}
.avbtn:hover .avatar{border-color:var(--blue)}
.avatar.lg{width:46px;height:46px;border-radius:12px;flex:none}
.bdg{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;background:var(--blue);color:#fff;font-size:.63rem;font-weight:800;border-radius:999px;display:grid;place-items:center;border:2px solid var(--surf);line-height:1}
.bdg.am{background:var(--amber)}
.menu{position:absolute;right:0;top:calc(100% + 10px);width:330px;max-width:86vw;background:var(--surf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh2);padding:8px;display:none;z-index:60;animation:fade .16s ease}
.menu.menu-sm{width:236px}
.hd.open .menu{display:block}
.mhead{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;font-weight:800;color:var(--ink);padding:8px 10px 10px}
.mhead .c{background:var(--bl);color:var(--blue-7);border-radius:999px;font-size:.7rem;font-weight:800;padding:1px 8px}
.mrow{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:9px 11px;border-radius:10px;color:var(--ink2);font-size:.88rem;font-weight:600}
.mrow span{display:inline-flex;align-items:center;gap:9px}
.mrow i{color:var(--stu-or-k)}
.mrow:hover{background:var(--surf2);color:var(--ink)}
.mrow.cur{background:var(--bl);color:var(--blue-7)}.mrow.cur i{color:var(--stu-or-k)}
.mrow.logout:hover{color:var(--danger)}.mrow.logout:hover i{color:var(--danger)}
.mscroll{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:0 2px}
.mit{background:var(--surf2);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.mit-t{font-size:.84rem;font-weight:700;color:var(--ink);line-height:1.3}
.mit-x{font-size:.8rem;color:var(--ink2);margin-top:2px}
.mit-d{font-size:.72rem;color:var(--ink3);margin-top:5px;display:flex;align-items:center;gap:5px}
.mempty{color:var(--ink3);font-size:.85rem;text-align:center;padding:20px 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
.mempty i{font-size:1.4rem;opacity:.5}
.mcta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:10px;border-radius:11px;background:var(--blue);color:#fff;font-size:.85rem;font-weight:750}
.mcta:hover{background:var(--blue-6)}
.me-head{display:flex;align-items:center;gap:11px;padding:6px 6px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.me-n{font-weight:800;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-head small{color:var(--ink3)}

/* ---------------- hero (clair, aéré) ---------------- */
/* LE BANDEAU SUIT LE RÔLE (2026-08-03). Son fond, sa bordure, son surtitre et
   ses pictogrammes étaient écrits en HEXADÉCIMAL : la couche de couleur du rôle
   ne redéfinit que des VARIABLES, elle ne pouvait donc rien y faire. Résultat
   signalé par l'utilisateur — un parent (violet) recevait un bandeau bleu, avec
   des icônes violettes posées dessus. Quatre jetons, valeurs de repli à
   l'identique de l'ancien dégradé : voir stu_role_css() dans role_utilisateur.php. */
.hero{position:relative;border-radius:22px;padding:32px 32px;overflow:hidden;background:var(--hero-bg,linear-gradient(160deg,#1aa9ff,#0090ea));border:1px solid var(--hero-bd,#0a86d8)}
.hero::after{content:"";position:absolute;right:-50px;top:-50px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);z-index:1}
/* icônes éducatives en filigrane, couleur orange */
.hero-deco{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Le filigrane doit se détacher DU BANDEAU, pas de la page : le teindre avec la
   couleur du rôle le rendrait invisible maintenant que le fond porte cette même
   couleur. Blanc à faible opacité — la seule valeur qui tienne sur les 19 rôles. */
.hero-deco i{position:absolute;color:var(--hero-ic,var(--blue))}
.hero-deco i:nth-child(1){top:-12px;left:8%;font-size:5rem;opacity:.20;transform:rotate(-12deg)}
.hero-deco i:nth-child(2){bottom:-18px;left:24%;font-size:4rem;opacity:.16;transform:rotate(9deg)}
.hero-deco i:nth-child(3){top:26%;left:44%;font-size:2.6rem;opacity:.14;transform:rotate(15deg)}
.hero-deco i:nth-child(4){top:-8px;right:30%;font-size:3.4rem;opacity:.15;transform:rotate(-6deg)}
.hero-deco i:nth-child(5){bottom:-10px;right:20%;font-size:4.4rem;opacity:.18;transform:rotate(8deg)}
.hero-deco i:nth-child(6){top:14%;right:6%;font-size:6rem;opacity:.22;transform:rotate(-10deg)}
.hero-deco i:nth-child(7){bottom:12%;left:2%;font-size:3rem;opacity:.13;transform:rotate(6deg)}
.hero-deco i:nth-child(8){top:40%;right:40%;font-size:2.2rem;opacity:.13;transform:rotate(-14deg)}
.hero-deco i:nth-child(9){bottom:30%;right:12%;font-size:2.4rem;opacity:.12;transform:rotate(10deg)}
.hero-deco i:nth-child(10){top:6%;left:34%;font-size:2.2rem;opacity:.12;transform:rotate(-8deg)}
.hero .k,.hero h2,.hero .m{position:relative;z-index:2}
.hero>*{position:relative}
/* Le surtitre était #ffe0cf — une crème pensée du temps où le bandeau était
   orange, restée posée sur un dégradé bleu. Il devient une teinte claire de la
   couleur du rôle, donc lisible sur son propre fond quel que soit le profil. */
.hero .k{font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--hero-k,#ffe0cf)}
.hero h2{margin:8px 0 0;font-size:clamp(1.7rem,4vw,2.5rem);font-weight:900;letter-spacing:-.04em;color:#fff;line-height:1.05}
.hero .m{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px 10px}
.hero .m span{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:7px 13px;font-size:.85rem;font-weight:650;color:#fff}
/* Même raison que le filigrane : ces icônes sont DANS le bandeau, sur des
   pastilles de blanc translucide. Les teindre en couleur de rôle les noyait. */
.hero .m i{color:var(--hero-ic,var(--blue))}

/* ---------------- KPI ---------------- */
.kpis{display:flex;flex-wrap:wrap;gap:16px;margin-top:18px}
.kpi{flex:1 1 170px;min-width:150px;background:var(--cardg);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--sh);transition:transform .16s,box-shadow .16s,border-color .16s}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--bl2)}
.kpi .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;margin-bottom:12px;background:var(--stu-or-tint);color:var(--stu-or-k)}
.kpi.g .ic,.kpi.am .ic{background:var(--stu-or-tint);color:var(--stu-or-k)}
.kpi .n{font-size:2.3rem;font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.kpi .t{color:var(--ink3);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;margin-top:5px}
.kpi .dl{margin-top:14px;display:flex;gap:12px;border-top:1px solid var(--line2);padding-top:12px}
.kpi .dl a{font-size:1rem;color:var(--ink3);transition:.14s}
.kpi .dl a:hover{color:var(--blue)}

.sec{margin-top:28px}
.lbl{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;display:flex;align-items:center;gap:12px}
.lbl::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------------- graphes moyennes & performance (hauteur égale) ---------------- */
.charts2{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;align-items:stretch}
.chart-panel{display:flex;flex-direction:column}
.ch-h{display:flex;align-items:center;gap:12px}
.ch-ic{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.15rem}
.ch-ic.mo{background:var(--bl);color:var(--blue-7)}
.ch-ic.pe{background:var(--bl);color:var(--blue-7)}
.ch-t{flex:1;min-width:0}
.ch-v{flex:none;text-align:right;line-height:1}
.ch-v b{font-size:1.6rem;font-weight:900;letter-spacing:-.04em;color:var(--blue-7)}
.ch-v.g b{color:var(--green)}
.ch-v small{font-size:.72rem;color:var(--ink3);font-weight:700;margin-left:2px}
/* boîte à hauteur FIXE identique pour les deux graphes */
.chartbox{height:320px;margin-top:16px;width:100%}
.alie-wide{flex:1 1 100%!important}
.chartbox.empty{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink3);font-size:.9rem;background:var(--surf2);border-radius:14px}
/* jauge de performance (taux de réussite) */
.gaugebox{position:relative;display:grid;place-items:center}
.gaugesvg{width:186px;height:186px;display:block}
.gnum{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;line-height:1}
.gnum b{display:block;font-size:2.2rem;font-weight:900;letter-spacing:-.05em;color:var(--green)}
.gnum small{font-size:.85rem;font-weight:800;color:var(--green)}
.gnum span{display:block;margin-top:5px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3)}
.chart{width:100%;height:100%;display:block}
.chart .cg{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.ch-x{display:flex;justify-content:space-between;margin-top:8px;padding:0 2px;color:var(--ink3);font-size:.68rem;font-weight:700}
.ch-x span{flex:1;text-align:center}
@media(max-width:760px){.charts2{grid-template-columns:1fr}}

/* ---------------- perf + alie ---------------- */
.row2{display:flex;gap:18px;flex-wrap:wrap}
.row2>.panel{flex:2 1 380px}.row2>.alie{flex:1 1 280px}
.panel{background:var(--cardg);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--sh)}
.panel h3{margin:0;font-size:1.05rem;font-weight:800;letter-spacing:-.02em}.panel .s{color:var(--ink3);font-size:.85rem;margin-top:4px}
.gauge{display:flex;align-items:center;gap:24px;margin-top:20px;flex-wrap:wrap}
.ring{--p:0;width:116px;height:116px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;background:conic-gradient(var(--blue) calc(var(--p)*1%),var(--surf2) 0)}
.ring::before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--surf)}
.ring b{position:relative;font-size:1.65rem;font-weight:900;color:var(--ink)}
.ring b small{font-size:.68rem;color:var(--ink3);font-weight:700}
.spark{display:flex;align-items:flex-end;gap:5px;height:78px;margin-top:8px}
.spark i{flex:1;min-width:6px;background:linear-gradient(var(--blue),var(--blue-8));border-radius:6px 6px 3px 3px;opacity:.9}
.empty{color:var(--ink3);font-size:.9rem;padding:18px 0;display:flex;align-items:center;gap:9px}
.alie{background:var(--grad-or);border:1px solid var(--bl2);border-radius:20px;padding:24px;box-shadow:var(--sh);position:relative;overflow:hidden}
/* La carte ALIE prend var(--grad-or), donc la couleur du rôle ; son halo était
   resté orange. Même correction. */
.alie::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(var(--stu-role-rgb,239,127,79),.16),transparent 70%);z-index:0}
.alie>*{position:relative;z-index:1}
/* L'ORBE D'ALIE — la plus grande pastille des pages d'accueil. Elle mélangeait
   --amber, un jeton SÉMANTIQUE (celui des alertes), et --blue-7, la principale :
   deux couleurs qui ne se répondaient pas, dont l'une n'avait rien à faire là.
   Elle prend le dégradé d'accent, comme les cinq pastilles du menu et des
   sections — c'est la même chose, en plus grand. */
.alie .orb{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;color:#fff;font-size:1.45rem;background:var(--grad-ic)}
.alie .say{font-family:var(--serif);font-size:1.06rem;margin:16px 0 18px;color:var(--ink);line-height:1.5}
/* icônes éducatives/thématiques en filigrane (comme l'entête) */
.alie-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.alie-deco i{position:absolute;color:var(--stu-or-k)}
.alie-deco i:nth-child(1){top:-6px;right:5%;font-size:4.6rem;opacity:.11;transform:rotate(-10deg)}
.alie-deco i:nth-child(2){bottom:-12px;right:22%;font-size:3.4rem;opacity:.10;transform:rotate(8deg)}
.alie-deco i:nth-child(3){top:40%;right:34%;font-size:2.4rem;opacity:.08;transform:rotate(14deg)}
.alie-deco i:nth-child(4){bottom:10%;right:3%;font-size:3rem;opacity:.10;transform:rotate(-6deg)}
.alie-deco i:nth-child(5){top:8%;right:40%;font-size:2rem;opacity:.08;transform:rotate(10deg)}
.alie-deco i:nth-child(6){bottom:36%;right:46%;font-size:2rem;opacity:.07;transform:rotate(-12deg)}
/* ⚠ LES OMBRES SUIVENT LE FOND (2026-08-03). Le bouton prenait bien la couleur
   du rôle en fond — var(--blue) est repeint par la couche de rôle — mais son
   ombre portée restait rgba(239,127,79), L'ORANGE DE LA DIRECTION, écrit en dur.
   Un élève avait donc un bouton bleu posé sur un halo orange, un parent un
   bouton violet sur ce même halo. Signalé par l'utilisateur. Le fallback garde
   l'orange d'origine, pour un rendu identique en l'absence de rôle. */
.btn{border:0;border-radius:12px;padding:12px 18px;font:inherit;font-size:.9rem;font-weight:800;cursor:pointer;display:inline-flex;gap:9px;align-items:center;background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(var(--stu-role-rgb,239,127,79),.28);transition:.15s;text-decoration:none}
/* ⚠ `:not(:disabled)` À LA SOURCE, plutôt qu'une contre-règle. Neutraliser le
   survol après coup obligerait à réécrire la couleur de fond — or elle dépend
   de la variante (.btn-info, .btn-g, .btn-ghost…), qu'une contre-règle ne peut
   pas connaître : un bouton désactivé aurait viré au bleu au survol. */
.btn:hover:not(:disabled){transform:translateY(-2px);background:var(--blue-6)}
/* ── UN BOUTON DÉSACTIVÉ DOIT AVOIR L'AIR DÉSACTIVÉ (2026-08-11) ──────────────
   🔴 SIGNALÉ PAR LE CLIENT : « je veux que les boutons d'enregistrement soient
      inactifs pendant le traitement ». Ils l'ÉTAIENT déjà — les neuf pages de
      création et de modification posent `disabled` avant l'envoi et le retirent
      à la réponse, échec compris. Mais RIEN NE LE MONTRAIT : la seule règle
      `[disabled]` du projet vivait sous `.stumodal-f`, donc uniquement dans les
      pieds de fenêtre. Ailleurs, le bouton gardait sa couleur, son relief et son
      effet de survol — on cliquait donc à nouveau, en croyant que rien ne s'était
      passé. Le défaut n'était pas dans le comportement, il était dans ce qui se
      voit.
   ⚠ `pointer-events:none` serait une erreur ici : il empêcherait le curseur
     « progress » d'apparaître, et masquerait un éventuel `title`. `disabled`
     suffit à bloquer le clic — on ne s'occupe que de l'apparence. */
.btn:disabled,.btn[disabled]{opacity:.55;cursor:progress;filter:saturate(.65);transform:none}
/* duo « Assistant & communauté » : deux blocs impactants côte à côte, largeur égale */
.row2.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.row2.duo>.alie{flex:none}
.alie-t{font-weight:900;margin-top:12px;font-size:1.05rem}
/* Bloc communauté : fond bleu subtil (teinte légèrement distincte), icônes orange */
.alie2{background:linear-gradient(160deg,var(--stu-or-tint),var(--stu-or-tint3));border-color:var(--stu-or-bd)}
/* Le halo du bloc communauté gardait un bleu écrit en dur, alors que son fond
   (--grad-bl) suit la secondaire : halo bleu sur fond orange chez un enseignant. */
.alie2::after{background:radial-gradient(circle,rgba(var(--stu-or-rgb,244,125,74),.14),transparent 70%)}
.orb2{background:#fff!important;color:var(--stu-or-k)!important;font-size:1.35rem!important}
.alie-links{display:flex;gap:10px;flex-wrap:wrap}
.btn-g{background:var(--blue);box-shadow:0 8px 20px rgba(var(--stu-role-rgb,239,127,79),.28)}
.btn-g:hover:not(:disabled){background:var(--blue-6)}
/* Le bouton principal de la carte « Communauté connectée » : elle est teintée
   d orange, il l est aussi. La règle vise .alie2 et non .btn-g, qui sert
   ailleurs sur des cartes au rôle (alie-portfolio.php). */
.alie2 .btn-g{background:var(--stu-or-btn);box-shadow:0 8px 20px rgba(var(--stu-or-rgb,244,125,74),.28)}
.alie2 .btn-g:hover:not(:disabled){background:var(--stu-or-btn-h)}
.btn-ghost{background:var(--surf);color:var(--ink2);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover:not(:disabled){background:var(--surf2);color:var(--blue);border-color:var(--blue)}
.btn-ghost i{color:var(--stu-or-k)}
@media(max-width:680px){.row2.duo{grid-template-columns:1fr}}

/* ---------------- répertoire ---------------- */
.rep{background:var(--cardg);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh);overflow:hidden}
.tabs{display:flex;gap:4px;padding:14px 16px 0;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs::-webkit-scrollbar{height:0}
.tab{border:0;background:transparent;font:inherit;font-size:.88rem;font-weight:750;color:var(--ink3);padding:11px 15px;cursor:pointer;white-space:nowrap;display:flex;gap:8px;align-items:center;transition:.14s;border-bottom:2.5px solid transparent;margin-bottom:-1px}
.tab .c{background:var(--surf2);color:var(--ink2);border-radius:999px;font-size:.72rem;padding:1px 9px;font-weight:800}
.tab i{color:var(--stu-or-k)}
.tab:hover{color:var(--blue)}
.tab.on{color:var(--blue-7);border-bottom-color:var(--blue)}
.tab.on .c{background:var(--blue);color:#fff}
.pane{display:none;padding:20px}.pane.on{display:block;animation:fade .28s ease}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.panehead{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:9px;background:var(--surf2);border:1px solid var(--line);border-radius:12px;padding:10px 14px;transition:.15s}
/* L'anneau de focus est le même cas : la bordure suivait le rôle, l'anneau non. */
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(var(--stu-role-rgb,239,127,79),.12);background:var(--surf)}
.search input{border:0;background:transparent;outline:0;font:inherit;font-size:.92rem;color:var(--ink);width:100%}
.search i{color:var(--stu-or-k)}
.exp{display:flex;gap:8px}
.exp a{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--ink2);border:1px solid var(--line);border-radius:11px;padding:9px 13px;background:var(--surf);transition:.14s}
.exp a:hover{border-color:var(--blue);color:var(--blue)}
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
table.stu{width:100%;border-collapse:collapse;font-size:.9rem}
/* L'en-tête de colonne était en --ink3 sur --surf2, soit 2,84:1 — sous le seuil
   même d'un pictogramme, alors que c'est du TEXTE (petit, capitales, espacé,
   donc déjà exigeant à lire). --ink2 donne 5,58:1 sans rien changer d'autre au
   dessin. Corrigé le 2026-08-03, après l'avoir d'abord contourné dans la seule
   feuille du module IA — le défaut valait pour les trente-trois pages. */
table.stu th{background:var(--surf2);color:var(--ink2);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;text-align:left;padding:12px 16px;white-space:nowrap;border-bottom:1px solid var(--line)}
table.stu td{padding:12px 16px;border-top:1px solid var(--line2);color:var(--ink2);vertical-align:middle}
table.stu tbody tr{transition:background .12s}
table.stu tbody tr:hover td{background:var(--bl-025)}
table.stu tbody td:first-child{font-weight:700;color:var(--ink)}
.pill{font-size:.72rem;font-weight:800;border-radius:999px;padding:3px 10px;display:inline-block}
.pill.f{background:var(--tint-bl);color:var(--info)}.pill.m{background:var(--bl);color:var(--blue-7)}
:root[data-theme="dark"] .pill.f{background:#122a3f;color:#6cc4ff}
.count{color:var(--ink3);font-size:.8rem;margin-top:12px}
.norow{color:var(--ink3);text-align:center;padding:28px}

/* ── PAGINATION DES RÉPERTOIRES (2026-08-09) ─────────────────────────────────
   Les tableaux du répertoire rendaient TOUTES leurs lignes d'un coup : lisible
   sur un petit établissement, illisible dès quelques centaines d'apprenants —
   et rien ne bornait la requête. Le découpage est posé par shell_js.php sur
   tout tableau « .stu[id^=t-] », donc sur les écrans à venir comme sur
   accueil.php. Il coopère avec la recherche : on pagine ce qui est FILTRÉ. */
.pager{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.pager .pg-etat{color:var(--ink3);font-size:.8rem;margin-right:auto}
.pager .pg-b{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink2);
  font-size:.82rem;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.pager .pg-b:hover:not(:disabled){background:var(--bl-025);border-color:var(--bl2);color:var(--ink)}
.pager .pg-b:disabled{opacity:.45;cursor:default}
/* La page courante prend l'orange de l'action, comme les autres commandes du
   projet — « le menu dit le rôle, l'orange du logo dit l'action ».
   ⚠ --stu-or-btn ET NON --stu-or : c'est le jeton prévu pour un APLAT portant du
     texte blanc (les boutons de .alie2 l'emploient déjà). --stu-or est la teinte
     nue, calibrée pour du texte et des icônes, pas pour un fond. Le premier jet
     visait « --stu-or-t », qui n'existe pas : la couleur du texte serait tombée
     en « invalide », donc héritée, et le libellé aurait pu disparaître dans
     l'aplat. */
.pager .pg-b[aria-current="page"]{background:var(--stu-or-btn);border-color:var(--stu-or-btn);color:#fff;cursor:default}
.pager .pg-gap{color:var(--ink3);padding:0 2px;font-size:.82rem}
.pager .pg-taille{display:inline-flex;align-items:center;gap:6px;color:var(--ink3);font-size:.78rem}
.pager .pg-taille select{border:1px solid var(--line);border-radius:8px;background:var(--surf);color:var(--ink2);
  font:inherit;font-size:.8rem;padding:5px 7px}
@media(max-width:620px){.pager .pg-etat{margin-right:0;width:100%}}

/* bouton documents + modal « À télécharger » */
.docbtn{border:1px solid var(--line);background:var(--surf);color:var(--ink2);border-radius:9px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;display:inline-flex;gap:6px;align-items:center;transition:.14s}
.docbtn:hover{border-color:var(--blue);color:var(--blue)}
.faint{color:var(--ink3)}
.wait{display:inline-block;padding:.1rem .5rem;border-radius:999px;background:var(--bl);color:var(--blue-7);font-size:.72rem;font-weight:600}
.stumodal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(18,28,55,.5)}
.stumodal.open{display:flex;animation:fade .18s ease}
/* ── Modals : taille normale, fond neutre, EN-TÊTE ORANGE SUBTIL bien visible ── */
.stumodal-card{background:var(--surf);border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh2);width:1040px;max-width:100%;max-height:86vh;overflow:hidden;display:flex;flex-direction:column;animation:rise .3s cubic-bezier(.2,.75,.2,1)}
/* ⚠ « xl » VIVAIT DANS LE STYLE D'UNE SEULE PAGE (a-propos-du-cours.php:668) :
   les fenêtres des autres écrans ne pouvaient pas s'en servir, la classe n'y
   existait pas. Remontée ici, dans la feuille partagée, où toute fenêtre du
   projet peut la demander. `max-width:100%` est déjà porté par .stumodal-card :
   sur un écran étroit, la carte se réduit d'elle-même. */
.stumodal-card.xl{width:1160px}
.stumodal-card .stumodal-h{background:var(--mh-or) !important;border-bottom-color:var(--mh-or-b) !important}
.stumodal-card .stumodal-k{color:var(--mh-or-k)}
.stumodal-card .stumodal-x{background:var(--mh-x)}
/* Modals du bloc Gestion & outils : en-tête BLEU subtil */
.stumodal.blue .stumodal-card .stumodal-h{background:var(--mh-bl) !important;border-bottom-color:var(--mh-bl-b) !important}
.stumodal.blue .stumodal-card .stumodal-k{color:var(--mh-bl-k)}

/* Modal destructif : en-tête ROUGE subtil (couleur du bouton de suppression) */
.stumodal.red .stumodal-card .stumodal-h{background:var(--mh-rg) !important;border-bottom-color:var(--mh-rg-b) !important}
.stumodal.red .stumodal-card .stumodal-k{color:var(--mh-rg-k)}
/* Le theme se regle par le bouton (data-theme) ET par la preference du
   systeme : les deux doivent mener au meme endroit, sinon un en-tete reste
   clair pendant que son texte, lui, passe en clair aussi. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grad-or:linear-gradient(160deg,rgba(239,127,79,.17),rgba(239,127,79,.08));--grad-bl:linear-gradient(160deg,rgba(0,161,255,.17),rgba(0,161,255,.08));--grad-bl2:linear-gradient(180deg,transparent,rgba(0,161,255,.30));--grad-bl-bd:rgba(0,161,255,.30);--tint-k:#7cc4f7;--tint-k2:#a8d8fb;--tint-bl:rgba(0,161,255,.15);--tint-bl2:rgba(0,161,255,.11);--tint-bl3:rgba(0,161,255,.08);--tint-bl4:rgba(0,161,255,.22);--tint-bl5:rgba(0,161,255,.30);--tint-bl6:rgba(0,161,255,.18);--tint-rg:rgba(192,57,43,.20);--tint-rg2:rgba(192,57,43,.20);--tint-rg3:rgba(192,57,43,.20);--mh-or:rgba(239,127,79,.20);--mh-or-b:rgba(239,127,79,.30);--mh-or-k:#ffb59a;--mh-bl:rgba(0,161,255,.18);--mh-bl-b:rgba(0,161,255,.30);--mh-bl-k:#7cc4f7;--mh-rg:rgba(192,57,43,.22);--mh-rg-b:rgba(192,57,43,.32);--mh-rg-k:#ff8f80;--mh-x:#1a2238;--btn-noir:#0f1626;--btn-noir-h:#070c16;}}
:root[data-theme="dark"]{--grad-or:linear-gradient(160deg,rgba(239,127,79,.17),rgba(239,127,79,.08));--grad-bl:linear-gradient(160deg,rgba(0,161,255,.17),rgba(0,161,255,.08));--grad-bl2:linear-gradient(180deg,transparent,rgba(0,161,255,.30));--grad-bl-bd:rgba(0,161,255,.30);--tint-k:#7cc4f7;--tint-k2:#a8d8fb;--tint-bl:rgba(0,161,255,.15);--tint-bl2:rgba(0,161,255,.11);--tint-bl3:rgba(0,161,255,.08);--tint-bl4:rgba(0,161,255,.22);--tint-bl5:rgba(0,161,255,.30);--tint-bl6:rgba(0,161,255,.18);--tint-rg:rgba(192,57,43,.20);--tint-rg2:rgba(192,57,43,.20);--tint-rg3:rgba(192,57,43,.20);--mh-or:rgba(239,127,79,.20);--mh-or-b:rgba(239,127,79,.30);--mh-or-k:#ffb59a;--mh-bl:rgba(0,161,255,.18);--mh-bl-b:rgba(0,161,255,.30);--mh-bl-k:#7cc4f7;--mh-rg:rgba(192,57,43,.22);--mh-rg-b:rgba(192,57,43,.32);--mh-rg-k:#ff8f80;--mh-x:#1a2238;--btn-noir:#0f1626;--btn-noir-h:#070c16;}
:root[data-theme="light"]{--grad-or:linear-gradient(160deg,#fff6f0,#fde7d9);--grad-bl:linear-gradient(160deg,#eaf4ff,#dbecff);--grad-bl2:linear-gradient(180deg,transparent,var(--grad-bl-bd));--grad-bl-bd:#cfe6fa;--tint-k:#00a1ff;--tint-k2:#0090ea;--tint-bl:#e7f5ff;--tint-bl2:#eef8ff;--tint-bl3:#f4fbff;--tint-bl4:#d6eeff;--tint-bl5:var(--grad-bl-bd);--tint-bl6:#dceefc;--tint-rg:#fbeceb;--tint-rg2:#fdeceb;--tint-rg3:#fdecea;--mh-or:#fbe9df;--mh-or-b:#f4d6c6;--mh-or-k:#d3562a;--mh-bl:#e7f2fb;--mh-bl-b:#cfe6f7;--mh-bl-k:#0a6fb0;--mh-rg:#fdeceb;--mh-rg-b:#f6d0cc;--mh-rg-k:#c0392b;--mh-x:#fff;--btn-noir:#252f45;--btn-noir-h:#161d2c;}

/* Même défaut que le bandeau : un bleu en dur qu'aucune variable n'atteignait,
   alors que ce bouton est l'accent de marque de cinq pages du shell. Il prend
   la nuance -dd, la seule qui porte du texte blanc sur les 19 rôles. */
.btn-blue{background:var(--stu-role-dd,#00a1ff)!important;box-shadow:0 8px 20px rgba(var(--stu-role-rgb,0,161,255),.28)!important}

.stumodal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid var(--line)}
.stumodal-k{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:7px}
.stumodal-h h4{margin:6px 0 0;font-size:1.15rem;font-weight:800;letter-spacing:-.02em}
.stumodal-x{width:38px;height:38px;flex:none;border:1px solid var(--line);background:var(--surf);border-radius:11px;color:var(--ink2);cursor:pointer;display:grid;place-items:center}
.stumodal-x:hover{color:var(--danger);border-color:#e0b4b4}
.stumodal-b{padding:16px 18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
/* Le pied de fenêtre n'était défini nulle part : les boutons se plaçaient donc
   au hasard, chaque page les habillant à sa façon — et seulement quand ils
   tombaient dans une zone .cc. Il est ici, une fois, pour toutes les pages du
   shell : boutons alignés à droite, même gabarit, « Fermer » sur fond sombre. */
/* Les menus déroulants des fragments repris. Sans Bootstrap, .dropdown-menu
   n'était rien : la liste restait ouverte en permanence, avec ses puces, et
   chaque ligne de tableau en devenait trois fois trop haute. */
.cc .dropdown{position:relative;display:inline-block}
.cc .dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;display:none;
  min-width:190px;margin:0;padding:6px;list-style:none;text-align:start;
  background:var(--surf);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2)}
.cc .dropdown-menu.stuouvert{display:block}
.cc .dropdown-menu li{list-style:none}
.cc .dropdown-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;
  font-size:.85rem;font-weight:650;color:var(--ink2);white-space:nowrap;cursor:pointer}
.cc .dropdown-item:hover{background:var(--tint-bl);color:var(--blue-7)}
.cc .dropdown-item i{font-size:.95rem;color:var(--stu-or-k)}
.cc .dropdown-toggle::after{content:"";display:inline-block;margin-inline-start:6px;
  border:4px solid transparent;border-top-color:currentColor;translate:0 2px}

/* Les champs d'une fenêtre, décrits une fois pour toutes. Auparavant chaque page
   ne stylait que les siens, et seulement ceux placés dans un .ed-fld : les
   listes posées dans un tableau — les groupes, coefficients et barèmes de
   l'assignation multi-matière, par exemple — restaient à l'état brut. */
.stumodal-b select,.stumodal-b input[type=text],.stumodal-b input[type=search],
.stumodal-b input[type=number],.stumodal-b input[type=password],.stumodal-b input[type=date],
.stumodal-b input[type=email],.stumodal-b input[type=tel],.stumodal-b textarea{
  width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf);
  color:var(--ink);font:inherit;font-size:.88rem;transition:border-color .13s,box-shadow .13s}
.stumodal-b select:focus,.stumodal-b input:focus,.stumodal-b textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--tint-bl)}
.stumodal-b select[disabled],.stumodal-b input[disabled],.stumodal-b textarea[disabled]{
  opacity:.62;cursor:not-allowed;background:var(--surf2)}
.stumodal-b select[multiple]{padding:6px;height:auto}
.stumodal-b select[multiple] option{padding:6px 8px;border-radius:7px}
.stumodal-b td select,.stumodal-b td input[type=text]{min-width:110px;padding:7px 10px;font-size:.83rem}

/* Un champ obligatoire resté vide se signale en rouge, et la marque s'efface dès
   qu'on le renseigne. C'est ce que faisait l'ancienne page en posant text-danger
   et une bordure sur chaque champ manquant. */
.stumodal-b .stu-ko,.stumodal-b .stu-ko:focus{border-color:var(--danger) !important;box-shadow:0 0 0 4px var(--tint-rg) !important}
.stumodal-b label.stu-ko-l{color:var(--danger)}

.stumodal-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:9px;padding:14px 18px;border-top:1px solid var(--line);background:var(--surf2)}
.stumodal-f .btn{border:0;border-radius:12px;padding:10px 16px;font:inherit;font-size:.87rem;font-weight:800;line-height:1.2;cursor:pointer;display:inline-flex;gap:8px;align-items:center;background:var(--blue);color:#fff;text-decoration:none;transition:.15s;white-space:nowrap}
.stumodal-f .btn:hover{background:var(--blue-6);color:#fff}
.stumodal-f .btn[disabled]{opacity:.6;cursor:progress}
.stumodal-f .btn-ghost,.stumodal-f .btn-dark{background:var(--btn-noir);color:#fff;border:0}
.stumodal-f .btn-ghost:hover,.stumodal-f .btn-dark:hover{background:var(--btn-noir-h);color:#fff}
.stumodal-f .btn-ko{background:var(--danger)}
.stumodal-f .btn-ko:hover{background:#a93226}
.stumodal-f .btn .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;display:none;animation:stuftourne .7s linear infinite}
.stumodal-f .btn.charge .spin{display:inline-block}
@keyframes stuftourne{to{transform:rotate(360deg)}}
@media(max-width:560px){.stumodal-f{justify-content:stretch}.stumodal-f .btn{flex:1 1 auto;justify-content:center}}
.docrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surf2)}
.docrow-i{width:40px;height:40px;flex:none;border-radius:11px;background:var(--stu-or-tint);color:var(--stu-or-k);display:grid;place-items:center;font-size:1.15rem}
.docrow-t{flex:1;font-weight:700;font-size:.92rem;min-width:0}
.docdl{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;border-radius:9px;padding:8px 11px;border:1px solid var(--line);color:var(--ink2);background:var(--surf);white-space:nowrap}
.docdl.pdf:hover{border-color:#d9534f;color:#d9534f}.docdl.xls:hover{border-color:var(--green);color:var(--green)}
@media(max-width:520px){.docrow{flex-wrap:wrap}.docrow-t{flex-basis:100%}}

/* tableau personnel enrichi */
.pers-av{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--line);background:var(--surf2);display:block}
.pers-nom{font-weight:700;color:var(--ink)}
/* Avatar cliquable → profil enseignant */
.pers-avlink{position:relative;display:inline-block;border-radius:50%;line-height:0}
.pers-avlink .pers-av{transition:box-shadow .15s,transform .15s}
.pers-avgo{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:.6rem;box-shadow:0 0 0 2px var(--surf);opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.pers-avlink:hover .pers-av{box-shadow:0 0 0 3px var(--bl2);transform:translateY(-1px)}
.pers-avlink:hover .pers-avgo{opacity:1;transform:scale(1)}
/* Nom cliquable → profil enseignant */
.pers-link{display:inline-flex;align-items:center;gap:3px;text-decoration:none;color:inherit}
.pers-link .pers-nom{cursor:pointer}
.pers-link:hover .pers-nom{color:var(--blue-7);text-decoration:underline}
.pers-chev{font-size:.72rem;color:var(--ink3);transition:transform .15s,color .15s}
.pers-link:hover .pers-chev{color:var(--blue-7);transform:translateX(2px)}
.pers-hint{font-size:.68rem;color:var(--blue);font-weight:600;margin-top:1px;opacity:.85}
.pers-ens{max-width:300px;font-size:.85rem;line-height:1.35}
.pers-ens .more{background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:1px 8px;font-size:.7rem;font-weight:800;color:var(--ink2);margin-left:4px}
.enslink{display:inline;text-align:left;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--ink2);cursor:pointer}
.enslink:hover{color:var(--blue)}
.enslink:hover .more{border-color:var(--blue);color:var(--blue)}
.ensrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surf)}
.ensrow-i{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--stu-or-tint);color:var(--stu-or-k)}
.ensrow-t{font-size:.92rem;color:var(--ink);font-weight:600}
.tel{color:var(--ink2);white-space:nowrap;font-weight:600}
.tel:hover{color:var(--blue)}

/* ---------------- pied de page calqué sur accueil-espace-membre ---------------- */
.stu-foot{margin-top:34px}
.foot-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.foot-card{background:var(--cardg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);overflow:hidden;padding:16px}
.foot-card img{width:100%;height:150px;object-fit:cover;border-radius:12px;margin-bottom:14px;display:block}
.foot-card h5{margin:0 0 8px;font-size:1.05rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.foot-card p{margin:0;font-size:.9rem;line-height:1.55;color:var(--ink2)}
.foot-social{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:16px}
.soc-card{background:var(--cardg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:18px;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
.soc-h{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.soc-ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line)}
.soc-h span{display:block;font-size:.82rem;color:var(--ink3);font-weight:600}
.soc-h strong{font-size:1.05rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
/* Les trois boutons du PIED (Facebook, YouTube, TikTok) : ils sont sur les 40+
   pages du shell, donc c'est là que le halo orange sous un fond de rôle se
   voyait le plus. */
.soc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);color:#fff;font-weight:800;font-size:.9rem;padding:11px 16px;border-radius:12px;text-decoration:none;box-shadow:0 8px 20px rgba(var(--stu-role-rgb,239,127,79),.28);transition:.15s}
.soc-btn i{transition:transform .15s}
.soc-btn:hover{background:var(--blue-6)}
.soc-btn:hover i{transform:translateX(3px)}
.foot-copy{text-align:center;color:var(--ink3);font-size:.82rem;font-weight:600;padding:24px 0 10px}
@media(max-width:860px){.foot-cards,.foot-social{grid-template-columns:1fr}}

@media(max-width:900px){.content{padding:20px}}
/* Telephone : le titre passe AU-DESSUS de la rangee d'icones. Tout tenait sur une
   seule ligne, ou le titre etait ecrase entre le bouton de menu et les icones.
   Le ressort .sp prend toute la largeur et sert de saut de ligne. */
@media(max-width:640px){
  .topbar{padding:12px 14px;gap:8px;flex-wrap:wrap;row-gap:10px}
  .topbar h1{font-size:1rem}
  .topbar .meta{display:block;font-size:.74rem;margin-top:1px}
  .topbar .sp{flex:0 0 100%;height:0;margin:0}
  .topbar .hd,.topbar>.icbtn:not(.burger),.topbar>a{order:1}

  /* ── LES MENUS DÉROULANTS, SUR TÉLÉPHONE ──────────────────────────────────
   *
   * ⚠ ILS SORTAIENT DE L'ÉCRAN. `.menu` est en `position:absolute; right:0`,
   *   donc ancré au bord droit de SON bouton (`.hd{position:relative}`). Sur
   *   grand écran les boutons sont tous à droite, l'ancrage tombe juste. Sur
   *   téléphone, `.topbar` passe à la ligne et les six boutons se répartissent
   *   sur toute la largeur : celui de gauche ouvrait un panneau de 300 px calé
   *   sur SON bord droit, qui débordait donc largement à gauche. D'où des menus
   *   « excentrés », dont une partie était inatteignable.
   *
   *   `max-width:86vw` ne corrigeait rien : il borne la LARGEUR, pas la
   *   position — un panneau de 300 px ancré à 60 px du bord gauche déborde
   *   quelle que soit sa largeur maximale.
   *
   * LA CORRECTION TIENT EN UNE LIGNE, ET C'EST `.hd{position:static}` :
   *   sans ancêtre positionné, le panneau prend `.topbar` pour référence — elle
   *   est `position:sticky`, donc positionnée. On peut alors l'étendre d'un bord
   *   à l'autre de la barre, sous elle, comme le fait n'importe quelle
   *   application mobile. Aucun JS, aucune mesure de hauteur à tenir à jour. */
  .topbar .hd{position:static}
  .topbar .hd .menu,.topbar .hd .menu.menu-sm{
    left:10px;right:10px;width:auto;max-width:none;top:calc(100% + 6px);
    /* Le panneau ne doit jamais dépasser l'écran : la liste défile à
       l'intérieur plutôt que de pousser le bas hors de vue. */
    max-height:calc(100vh - 100%);overflow:auto;
  }
  /* La zone de liste garde sa propre hauteur bornée, sinon un menu très fourni
     rendrait le pied du panneau (« Ouvrir la messagerie ») inatteignable. */
  .topbar .hd .menu .mscroll{max-height:52vh}

  /* ── LE FILET CONTRE LE DÉBORDEMENT HORIZONTAL ────────────────────────────
   * Les menus corrigés ci-dessus n'étaient pas les seuls à pouvoir sortir de
   * l'écran : les listes d'action des tableaux (.cc .dropdown-menu, 190 px
   * ancrés à droite de leur bouton) le peuvent aussi quand le bouton est près
   * du bord gauche. Un panneau qui dépasse fait défiler TOUTE LA PAGE de côté —
   * et l'on croit alors la mise en page cassée, alors qu'un seul élément
   * dépasse. On borne au niveau du document : le panneau reste peut-être
   * partiellement caché, mais la page ne bascule pas.
   *
   * ⚠ `overflow-x:clip` et non `hidden` : `hidden` sur <body> crée un contexte
   *   de défilement qui casserait `position:sticky` — la barre du haut cesserait
   *   de suivre. `clip` coupe sans rien changer au défilement. */
  html{overflow-x:clip}
  body{overflow-x:clip}
  /* Une liste d'action de tableau ne doit jamais être plus large que l'écran. */
  .cc .dropdown-menu{max-width:calc(100vw - 28px)}
}
@media(max-width:860px){
  .side{position:fixed;left:0;top:0;height:100vh;z-index:60;width:264px;flex-basis:264px;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 60px rgba(0,0,0,.18)}
  .side.open{transform:none}
  .main{width:100%}
  .topbar .burger{display:grid}
  .backdrop{display:none;position:fixed;inset:0;background:rgba(20,30,60,.4);z-index:50}
  .backdrop.open{display:block}
}
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .55s cubic-bezier(.2,.75,.2,1) forwards}
  /* ⚠ .d3 ET .d4 N'EXISTAIENT PAS, alors que quatre pages les écrivaient déjà
     (alie, nouvel-apprenant, nouveau-personnel, nouveau-parent). Le panneau
     n'était pas cassé — il apparaissait simplement en même temps que le premier,
     et l'escalier voulu s'arrêtait au deuxième. */
  .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.1s}
  .reveal.d3{animation-delay:.15s}.reveal.d4{animation-delay:.2s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ---------------- correction de copies (kit formulaire + résultats) ---------------- */
.cc .d-none,.d-none{display:none!important}
.cc .text-danger{color:var(--danger)}.cc .text-warning{color:var(--amber)}.cc .text-success{color:var(--green)}
.cc .opacity-50{opacity:.6}.cc .opacity-75{opacity:.75}.cc .fw-semibold{font-weight:700}.cc .small{font-size:.85rem}
.cc .flex-grow-1{flex:1;min-width:0}.cc .text-nowrap{white-space:nowrap}.cc .align-middle{vertical-align:middle}
.cc-grid{display:grid;grid-template-columns:370px 1fr;gap:18px;align-items:start}
.cc .panel{padding:22px}
.cc .ch-h{margin-bottom:16px}
/* En-tête « Réglages » (panneau gauche) en bandeau orange subtil */
.cc .cc-grid>.panel:first-child{overflow:hidden}
.cc .cc-grid>.panel:first-child .ch-h{margin:-22px -22px 18px;padding:16px 20px;background:var(--grad-or);border-bottom:1px solid var(--bl2)}
.cc .mt2{margin-top:14px}
.cc .form-label{display:block;font-size:.78rem;font-weight:700;color:var(--ink2);margin-bottom:6px}
.cc .hint-inline{font-size:.72rem;color:var(--ink3);font-weight:600}
.cc .form-select,.cc .form-control{width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 12px;font:inherit;font-size:.9rem;background:var(--surf);color:var(--ink);line-height:1.4}
.cc .form-select:focus,.cc .form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--bl)}
.cc textarea.form-control{resize:vertical}
.cc .input-group{display:flex;gap:8px;align-items:flex-start}
.cc .input-group .form-control{flex:1}
.cc .hint{display:block;margin-top:8px;font-size:.76rem;color:var(--ink3)}
.cc .cc-voix{display:flex;align-items:center;gap:9px}.cc .cc-voix .hint{margin:0}
.cc .cc-uploads{display:flex;gap:8px;flex-wrap:wrap}
.cc .cc-upload{cursor:pointer;flex:1 1 140px;justify-content:center}
.cc .badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:800}
.cc .badge.bg-success{background:var(--green-l);color:var(--green)}
.cc .badge.bg-warning{background:var(--amber-l);color:var(--amber)}
.cc .badge.bg-danger{background:var(--tint-rg);color:var(--danger)}
.cc .badge.bg-secondary,.cc .badge.bg-light{background:var(--surf2);color:var(--ink2)}
.cc .alert{border-radius:10px;padding:10px 13px;font-size:.85rem;margin-bottom:10px}
.cc .alert-warning{background:var(--amber-l);color:var(--blue-8);border:1px solid var(--bl2)}
/* Compat fragments renvoyés par les contrôleurs (Bootstrap + FontAwesome, INCHANGÉS côté serveur) */
.cc .alert-primary{background:var(--bl);color:var(--blue-8);border:1px solid var(--bl2)}
.cc .alert-secondary{background:var(--surf2);color:var(--ink2);border:1px solid var(--line)}
.cc .alert-success{background:var(--green-l);color:var(--green);border:1px solid #bfe6d3}
.cc .alert-danger{background:var(--tint-rg);color:var(--danger);border:1px solid #f3c6c2}
.cc .alert h5,.cc .alert h6{font-size:.95rem;font-weight:800;margin:0 0 6px}
.cc .row,.cc .form-group.row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 0}
.cc .form-group{margin-bottom:10px}
.cc [class*="col-md-6"],.cc [class*="col-sm-6"]{flex:1 1 calc(50% - 10px);min-width:210px}
/* La grille ne connaissait que les moitiés et les pleines largeurs : les
   fragments repris qui utilisent des tiers et des quarts — les fenêtres de la
   page financière, notamment — s'empilaient sur toute la largeur. */
.cc [class*="col-md-4"],.cc [class*="col-sm-4"],.cc [class*="col-lg-4"]{flex:1 1 calc(33.333% - 10px);min-width:190px}
.cc [class*="col-md-3"],.cc [class*="col-sm-3"],.cc [class*="col-lg-3"]{flex:1 1 calc(25% - 10px);min-width:165px}
.cc [class*="col-md-2"],.cc [class*="col-sm-2"],.cc [class*="col-lg-2"]{flex:1 1 calc(16.666% - 10px);min-width:120px}
.cc [class*="col-md-8"],.cc [class*="col-sm-8"],.cc [class*="col-lg-8"]{flex:1 1 calc(66.666% - 10px);min-width:230px}
.cc [class*="col-md-9"],.cc [class*="col-sm-9"],.cc [class*="col-lg-9"]{flex:1 1 calc(75% - 10px);min-width:250px}
.cc [class*="col-lg-6"]{flex:1 1 calc(50% - 10px);min-width:210px}
.cc [class*="col-lg-12"]{flex:1 1 100%;min-width:0}
@media(max-width:720px){.cc [class*="col-"]{flex:1 1 100% !important;min-width:0}}
.cc [class*="col-md-12"],.cc [class*="col-sm-12"]{flex:1 1 100%;min-width:0}
.cc .border-secondary{border-color:var(--line)!important}
.cc .col-md-6.border,.cc .col-sm-6.border,.cc .col-md-6.border-secondary,.cc .col-sm-6.border-secondary{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--surf2)}
.cc .col-md-6 h6,.cc .col-sm-6 h6{display:flex;align-items:center;gap:7px}
.cc .col-md-6 ul,.cc .col-sm-6 ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.cc .col-md-6 li,.cc .col-sm-6 li{font-size:.84rem;color:var(--ink2);display:flex;align-items:center;gap:8px}
.cc .font-weight-bold{font-weight:800}
.cc .main_text_stu{color:var(--ink)}
.cc .main_fa_stu{color:var(--blue)}
/* main_block_stu : les fragments renvoyés par les contrôleurs hérités s en
   servent comme d un paragraphe — <span class="main_block_stu">…</span>. Sans
   display:block, le bilan de saisie des notes (new_controle_notes_eval.php)
   s affiche d un seul tenant, ses cinq statistiques collées les unes aux
   autres. Cette classe manquait à la couche de compatibilité. */
.cc .main_block_stu{display:block;margin-bottom:8px}
.cc .mt-3{margin-top:14px}.cc .mt-2{margin-top:10px}.cc .mb-2{margin-bottom:8px}.cc .w-100{width:100%}
.cc .text-center{text-align:center}
.cc img.rounded-circle{border-radius:50%}.cc .img-2x{width:34px;height:34px;object-fit:cover}.cc .me-2{margin-right:8px}
/* FontAwesome non chargé dans le shell → mappé sur bootstrap-icons */
.cc i.fa{font-family:"bootstrap-icons"!important;font-style:normal;font-weight:normal;line-height:1;display:inline-block}
.cc i.fa-book::before{content:"\f194"}
.cc i.fa-user::before{content:"\f4e1"}
.cc i.fa-phone::before{content:"\f5c1"}
.cc i.fa-whatsapp::before{content:"\f618"}
.cc .apc-mne{margin-top:4px}
.cc .btn-success{background:var(--green);box-shadow:0 8px 20px rgba(22,160,106,.25)}
.cc .btn-outline-success{background:var(--surf);border:1px solid #bfe6d3;color:var(--green);box-shadow:none}
.cc .btn-sm{padding:8px 13px;font-size:.83rem}
.cc .btn.w-100{width:100%;justify-content:center}
.cc .input-group-text{display:inline-flex;align-items:center;padding:6px 10px;background:var(--surf2);border:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--ink2);border-radius:9px}
.cc .cc-note{width:78px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;font:inherit;font-size:.9rem;text-align:center}
/* tableau des questions */
.cc table.table{width:100%;border-collapse:collapse;margin-bottom:10px}
.cc table.table th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:800;padding:8px 10px;border-bottom:1px solid var(--line)}
.cc table.table td{padding:8px 10px;border-bottom:1px solid var(--line2);font-size:.85rem;color:var(--ink2);vertical-align:top}
/* panneau résultats + cartes */
.cc .cc-res-panel{padding:0;overflow:hidden;display:flex;flex-direction:column}
.cc .chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid #d3e9fb;background:var(--tint-bl6)}
.cc .chat-head h3{margin:0;font-size:1.02rem;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px}
.cc .chat-head .ch-t{min-width:0}
.cc .chat-head .ch-t .s{font-size:.78rem;color:#5a7a94;font-weight:600;margin-top:2px}
.cc .chat-head h3 i{color:var(--stu-or-k)}
.cc .chat-head-act{display:flex;align-items:center;gap:8px;flex:none}
.cc .cc-res-body{padding:18px 20px;min-height:200px;max-height:72vh;overflow-y:auto}
.cc .cc-card{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;background:var(--surf);box-shadow:var(--sh)}
.cc .cc-card .cc-photo{width:110px;height:140px;object-fit:cover;border:1px solid var(--line);border-radius:10px;flex:none}
.cc .cc-card .cc-head{display:flex;gap:14px}
.cc .cc-status{margin-top:4px;font-size:.85rem}
.cc .empty.tall{padding:60px 20px}.cc .empty.tall i{font-size:2rem;color:var(--ink3)}
/* types d'épreuve : multi-sélection en grille (icône + libellé + coche) */
.cc .cc-types{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cc .cc-type{position:relative;display:flex;align-items:center;gap:9px;text-align:left;border:1px solid var(--line);background:var(--surf);color:var(--ink2);border-radius:12px;padding:10px 12px;font:inherit;font-size:.83rem;font-weight:700;cursor:pointer;transition:.14s;min-width:0}
.cc .cc-type i{font-size:1.05rem;color:var(--ink3);flex:none;transition:.14s}
.cc .cc-type span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .cc-type::after{content:"\F633";font-family:"bootstrap-icons";position:absolute;right:9px;top:50%;transform:translateY(-50%) scale(.6);opacity:0;color:var(--blue);font-size:1rem;transition:.14s}
.cc .cc-type:hover{border-color:var(--bl2);background:var(--bl-025)}
.cc .cc-type.on{background:var(--bl);border-color:var(--blue);color:var(--blue-8);padding-right:28px}
.cc .cc-type.on i{color:var(--stu-or-k)}
.cc .cc-type.on::after{opacity:1;transform:translateY(-50%) scale(1)}
.cc .cc-types-count{margin-top:8px;font-size:.75rem;color:var(--ink3);font-weight:600}
.cc .cc-types-count span{color:var(--blue-7);font-weight:800}
@media(max-width:520px){.cc .cc-types{grid-template-columns:1fr}}
/* exemples de barème (chips) */
.cc .cc-baremes{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.cc .cc-chip{display:inline-flex;align-items:flex-start;gap:7px;text-align:left;background:var(--bl-025);border:1px solid var(--bl2);border-radius:11px;padding:8px 11px;font:inherit;font-size:.8rem;font-weight:600;color:var(--ink2);cursor:pointer;transition:.14s;line-height:1.35}
.cc .cc-chip i{color:var(--stu-or-k);flex:none;margin-top:1px}
.cc .cc-chip:hover{background:var(--bl);border-color:var(--blue);color:var(--blue-8)}
/* barre d'outils résultats : bilan + filtres/tri + export */
.cc .cc-toolbar{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.cc .cc-bilan{display:flex;flex-wrap:wrap;gap:8px}
.cc .cc-bchip{display:inline-flex;align-items:baseline;gap:5px;background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:.8rem;font-weight:600;color:var(--ink2)}
.cc .cc-bchip b{font-size:1rem;font-weight:900;color:var(--ink)}
.cc .cc-bchip.g b{color:var(--green)}.cc .cc-bchip.b b{color:var(--info)}
.cc .cc-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cc .prep-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cc .prep-filters .pf{border:1px solid var(--line);background:var(--surf);color:var(--ink2);border-radius:999px;padding:6px 12px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;transition:.14s}
.cc .prep-filters .pf:hover{border-color:var(--blue);color:var(--blue)}
.cc .prep-filters .pf.on{background:var(--blue);border-color:var(--blue);color:#fff}
.cc .prep-typesel{border:1px solid var(--line);background:var(--surf);color:var(--ink);border-radius:999px;padding:6px 11px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.cc .cc-exp{background:var(--surf);border:1px solid var(--line);color:var(--ink2);box-shadow:none;margin-left:auto}
.cc .cc-exp:first-of-type{margin-left:auto}
.cc .cc-exp:hover{border-color:var(--blue);color:var(--blue)}
/* nom d'élève éditable */
.cc .cc-nomwrap{display:inline-flex;align-items:center;gap:6px;background:var(--surf2);border:1px solid var(--line);border-radius:999px;padding:3px 5px 3px 10px}
.cc .cc-nomwrap i{color:var(--stu-or-k)}
.cc .cc-nom{border:0;background:transparent;outline:none;font:inherit;font-size:.82rem;font-weight:700;color:var(--ink);width:150px;padding:2px 4px}
@media(max-width:900px){.cc-grid{grid-template-columns:1fr}}
/* bannière de reprise de session */
.cc .cc-resume{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;background:var(--bl-025);border:1px solid var(--bl2);border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:.86rem;color:var(--ink)}
.cc .cc-resume i{color:var(--stu-or-k)}
.cc .cc-resume-act{display:flex;gap:8px}
.cc .cc-resume #ccResumeYes{background:var(--blue);border:0;color:#fff;font-weight:600}
/* rubrique « Mes corrections » (calquée sur « Mes préparations ») */
.cc .prep-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.cc .prep-toolbar .search{display:flex;align-items:center;gap:8px;background:var(--surf2);border:1px solid var(--line);border-radius:11px;padding:8px 12px;flex:1;min-width:200px;max-width:340px}
.cc .prep-toolbar .search i{color:var(--stu-or-k)}
.cc .prep-toolbar .search input{border:0;background:transparent;outline:none;font:inherit;font-size:.9rem;color:var(--ink);width:100%}
.cc .prep-filters .pf-lbl,.cc .prep-typebox .pf-lbl{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-right:2px}
.cc .prep-typebox{display:inline-flex;align-items:center;gap:7px}
/* KPIs (calqués sur preparation-cours) */
.cc .cc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cc .cc-kpis .pk{display:flex;align-items:center;gap:12px;background:var(--cardg);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--sh)}
.cc .cc-kpis .pk-i{width:40px;height:40px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:var(--stu-or-tint);color:var(--stu-or-k)}
.cc .cc-kpis .pk.g .pk-i{background:var(--green-l);color:var(--green)}
.cc .cc-kpis .pk.r .pk-i{background:var(--tint-rg3);color:var(--danger)}
.cc .cc-kpis .pk.b .pk-i{background:var(--stu-or-tint);color:var(--stu-or-k)}
.cc .cc-kpis .pk-t{font-size:.85rem;color:var(--ink2);line-height:1.2}
.cc .cc-kpis .pk-t b{display:block;font-size:1.5rem;font-weight:900;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
@media(max-width:760px){.cc .cc-kpis{grid-template-columns:1fr 1fr}}
/* modale caméra */
.cccam-stage{background:#000;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.cccam-stage video{width:100%;height:100%;object-fit:cover;display:block}
.cccam-stage img{width:100%;height:100%;object-fit:contain;display:block;background:#000}
/* progression globale */
.cc .cc-prog{display:flex;align-items:center;gap:10px}
.cc .cc-prog-track{flex:1;height:8px;background:var(--surf2);border-radius:999px;overflow:hidden}
.cc .cc-prog-bar{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue-6));transition:width .3s}
.cc .cc-prog-txt{font-size:.78rem;font-weight:700;color:var(--ink2);white-space:nowrap}
/* badge « à revoir » + surlignage */
.cc .badge.cc-review{background:var(--tint-rg3);color:var(--danger);display:inline-flex;align-items:center;gap:4px}
.cc .cc-card[data-review="1"]{border-left:3px solid #e0a52b}
.cc .prep-filters .pf[data-v="review"].on{background:#e0a52b;border-color:#e0a52b}
/* histogramme des notes (bilan) */
.cc .cc-histo{display:flex;align-items:flex-end;gap:4px;height:40px;padding-top:14px;margin-left:4px}
.cc .cc-hbar{position:relative;width:22px;background:var(--bl);border-radius:5px 5px 0 0;height:var(--h);min-height:3px}
.cc .cc-hbar.g{background:var(--green-l)}
.cc .cc-hbar b{position:absolute;top:-13px;left:0;right:0;text-align:center;font-size:.62rem;font-weight:800;color:var(--ink2)}
.cccam-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cccam-th{position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.cccam-th img{width:100%;height:100%;object-fit:cover;display:block}
.cccam-th b{position:absolute;left:2px;bottom:2px;background:rgba(0,0,0,.6);color:#fff;font-size:.6rem;font-weight:800;border-radius:5px;padding:0 5px}
.cccam-del{position:absolute;right:2px;top:2px;width:18px;height:18px;border:0;border-radius:6px;background:rgba(192,57,43,.92);color:#fff;font-size:.6rem;display:grid;place-items:center;cursor:pointer;padding:0;line-height:1}
.cccam-del:hover{background:#c0392b}
.cccam-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.cccam-bar .prep-typesel{border:1px solid var(--line);background:var(--surf);color:var(--ink);border-radius:10px;padding:7px 10px;font:inherit;font-size:.82rem;font-weight:700}
/* ===== Compat : classes Bootstrap émises par le JS existant, re-mappées sur les
   tokens du shell autonome (aucune dépendance à bootstrap.css). Scopé sous .cc. ===== */
.cc .small{font-size:.82rem}
.cc .fw-semibold{font-weight:700}.cc .fw-bold{font-weight:800}
.cc .text-muted,.cc .opacity-50{color:var(--ink3)}
.cc .opacity-75{color:var(--ink2)}
.cc .text-danger{color:var(--danger)}.cc .text-success{color:var(--green)}.cc .text-warning{color:var(--amber)}
.cc .text-center{text-align:center}.cc .text-dark{color:var(--ink)}.cc .text-white{color:#fff}
.cc .text-nowrap{white-space:nowrap}
.cc .d-flex{display:flex}.cc .d-block{display:block}
.cc .justify-content-between{justify-content:space-between}.cc .align-items-center{align-items:center}
.cc .flex-wrap{flex-wrap:wrap}.cc .w-100{width:100%}
.cc .m-0{margin:0}.cc .mb-0{margin-bottom:0}.cc .mb-1{margin-bottom:.25rem}.cc .mb-2{margin-bottom:.5rem}.cc .mb-3{margin-bottom:1rem}
.cc .mt-1{margin-top:.25rem}.cc .mt-2{margin-top:.5rem}.cc .mt-3{margin-top:1rem}
.cc .me-1{margin-right:.25rem}.cc .me-2{margin-right:.5rem}.cc .me-3{margin-right:1rem}.cc .ms-2{margin-left:.5rem}
.cc .p-2{padding:.5rem}.cc .p-3{padding:1rem}.cc .ps-3{padding-left:1rem}
.cc .border{border:1px solid var(--line)}.cc .rounded{border-radius:12px}
.cc .bg-light{background:var(--surf2)}
.cc ul.ps-3{padding-left:1.1rem;margin:0}
/* list-group (recherche notion / résultats sémantiques) */
.cc .list-group{display:flex;flex-direction:column;gap:6px}
.cc .list-group-item{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf2);color:var(--ink2);font-size:.9rem}
.cc a.list-group-item-action{transition:.14s;cursor:pointer}
.cc a.list-group-item-action:hover{border-color:var(--blue);color:var(--blue-7);background:var(--bl-025)}
/* tables générées par le JS (veille, diagnostic) */
.cc .table{width:100%;border-collapse:collapse;font-size:.9rem}
.cc .table th{background:var(--surf2);color:var(--ink3);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.cc .table td{padding:11px 14px;border-top:1px solid var(--line2);color:var(--ink2);vertical-align:middle}
.cc .table.align-middle td{vertical-align:middle}
.cc .table-hover tbody tr:hover td{background:var(--bl-025)}
.cc .table-sm th,.cc .table-sm td{padding:8px 11px}
/* barre de progression (efficacité des stratégies) */
.cc .progress{height:8px;background:var(--surf2);border-radius:999px;overflow:hidden}
.cc .progress-bar{height:100%;background:var(--blue)}
.cc .progress-bar.bg-success{background:var(--green)}.cc .progress-bar.bg-warning{background:var(--amber)}.cc .progress-bar.bg-danger{background:#c0392b}
/* interrupteurs (réglages de veille) */
.cc .form-check{position:relative;padding-left:2.6em;min-height:1.4rem}
.cc .form-check.form-switch .form-check-input{position:absolute;left:0;top:.05em;width:2.1em;height:1.15em;margin:0;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:999px;cursor:pointer;transition:.15s;border:0;flex:none}
.cc .form-check-input:checked{background:var(--green)}
.cc .form-check-input::before{content:"";position:absolute;top:2px;left:2px;width:calc(1.15em - 4px);height:calc(1.15em - 4px);border-radius:50%;background:#fff;transition:.15s}
.cc .form-check-input:checked::before{transform:translateX(.95em)}
.cc .form-check-input:disabled{opacity:.5;cursor:not-allowed}
.cc .form-check-label{font-size:.9rem;color:var(--ink2);cursor:pointer}
/* badges additionnels (bg-info + variantes -subtle) */
.cc .badge.bg-info{background:var(--tint-bl);color:var(--info)}
.cc .badge.bg-danger-subtle{background:var(--tint-rg);color:var(--danger)}
.cc .badge.bg-success-subtle{background:var(--green-l);color:var(--green)}
.cc .badge.bg-warning-subtle{background:var(--amber-l);color:var(--amber)}
.cc .badge.bg-warning.text-dark,.cc .badge.bg-light.text-dark{color:var(--ink)}
/* boutons additionnels (variantes info / outline) */
/* .btn-info N'EST PAS SÉMANTIQUE ICI. Le nom vient de Bootstrap, mais sur les
   six pages du shell qui l'emploient — préparation de cours, correction de
   copies, crédits, veille, finances, fiabilité — c'est un bouton d'ACTION
   secondaire, pas un message d'information. Il gardait #00a1ff en dur, comme
   .btn-blue avant lui : même nuance -dd, la seule qui porte du blanc sur les
   dix-neuf rôles. Les vrais sémantiques (success, danger) gardent leur sens et
   ne bougent pas. */
.cc .btn-info,.cc .btn-g.btn-info{background:var(--stu-role-dd,#00a1ff);box-shadow:0 8px 20px rgba(var(--stu-role-rgb,0,161,255),.25)}
.cc .btn-info:hover{background:var(--stu-role-d,#0090ea)}
.cc .btn-danger{background:#c0392b;box-shadow:0 8px 20px rgba(192,57,43,.22)}
.cc .btn-danger:hover{background:#a83224}
.cc .btn-light{background:var(--surf);color:var(--ink2);border:1px solid var(--line);box-shadow:none}
.cc .btn-light:hover{background:var(--surf2);color:var(--blue)}
/* La variante contour du même bouton : bordure et texte suivent le rôle. */
.cc .btn-outline-info{background:var(--surf);border:1px solid var(--bl2,#bcdffb);color:var(--stu-role-txt,var(--info));box-shadow:none}
.cc .btn-outline-info:hover{border-color:var(--stu-role,#00a1ff);color:var(--stu-role-txt,#0090ea)}
.cc .btn-outline-secondary{background:var(--surf);border:1px solid var(--line);color:var(--ink2);box-shadow:none}
.cc .btn-outline-secondary:hover{border-color:var(--blue);color:var(--blue)}
.cc .btn-outline-danger{background:var(--surf);border:1px solid #e0b4b4;color:var(--danger);box-shadow:none}
.cc .btn-outline-danger:hover{border-color:#c0392b;background:var(--tint-rg)}
.cc .main_white_stu_text{color:#fff}
.cc .btn-light.main_white_stu_text,.cc .btn-outline-info.main_white_stu_text,.cc .btn-outline-secondary.main_white_stu_text{color:inherit}
/* petites cartes générées (flags, recos) */
.cc .border.rounded{background:var(--surf2)}
.cc .apc-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.cc .apc-pcard{display:flex;align-items:center;gap:13px;background:var(--cardg);border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh)}
.cc .apc-pcard .ic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;background:var(--stu-or-tint);color:var(--stu-or-k)}
.cc .apc-pcard span{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink3)}
.cc .apc-pcard b{font-size:.98rem;font-weight:800;color:var(--ink)}
.cc .apc-statgrid{display:grid;grid-template-columns:auto repeat(5,1fr);gap:12px;align-items:center}
.cc .apc-ring{--pct:0;--rc:var(--green);width:104px;height:104px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--rc) calc(var(--pct)*1%),var(--surf2) 0)}
.cc .apc-ring::before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:var(--surf)}
.cc .apc-ring b{position:relative;font-size:1.5rem;font-weight:900;color:var(--ink);line-height:1}
.cc .apc-ring b small{font-size:.8rem;font-weight:800}
.cc .apc-ring span{position:relative;font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink3);display:block;text-align:center;margin-top:2px}
.cc .apc-ms{background:var(--cardg);border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;box-shadow:var(--sh)}
.cc .apc-ms b{display:block;font-size:1.3rem;font-weight:900;color:var(--ink);letter-spacing:-.03em}
.cc .apc-ms span{font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink3)}
.cc .apc-re{margin-top:14px}
.cc .apc-re-bar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--surf2);box-shadow:inset 0 0 0 1px var(--line)}
.cc .apc-re-bar .ok{background:linear-gradient(90deg,#1fa254,#27c06a)}
.cc .apc-re-bar .ko{background:linear-gradient(90deg,#e0574a,#c0392b)}
.cc .apc-re-lg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:9px;font-size:.86rem;font-weight:700;color:var(--ink2)}
.cc .apc-re-lg .ok{color:#1e8e4e}.cc .apc-re-lg .ko{color:var(--danger)}
.cc .apc-re-lg b{color:inherit}
.cc .apc-mf{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cc .apc-mfcol{background:var(--cardg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--sh)}
.cc .apc-mfcol .h{font-size:.82rem;font-weight:800;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.cc .apc-mfcol .h.ok{color:var(--green)}.cc .apc-mfcol .h.ko{color:var(--danger)}
.cc .apc-mfcol .chips{display:flex;flex-wrap:wrap;gap:6px}
.cc .apc-mfcol .chips span{font-size:.8rem;font-weight:700;border-radius:8px;padding:4px 10px}
.cc .apc-mfcol .chips span.ok{background:var(--green-l);color:var(--green)}
.cc .apc-mfcol .chips span.ko{background:var(--tint-rg);color:var(--danger)}
.cc .apc-mfcol.ok{border-color:var(--green-l)}.cc .apc-mfcol.ko{border-color:#f6d7d3}
.cc .apc-mrows{display:flex;flex-direction:column;gap:2px}
.cc .apc-mrow-in{display:flex;align-items:center;gap:6px;border-radius:10px;transition:.14s}
.cc .apc-mrow-in:hover{background:var(--bl-025)}
.cc .apc-mrow-main{flex:1;min-width:0;display:flex;align-items:center;gap:11px;padding:8px 6px;text-decoration:none}
.cc .apc-mrow-pv{flex:none;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--danger);border:1px solid var(--line);margin-right:6px;transition:.14s}
.cc .apc-mrow-pv:hover{border-color:#c0392b;background:var(--tint-rg2)}
.cc .apc-mrow-p{flex:none;width:60px;text-align:center;border-radius:9px;padding:5px 4px;line-height:1}
.cc .apc-mrow-p b{font-size:1.06rem;font-weight:900;letter-spacing:-.03em}
.cc .apc-mrow-p small{display:block;font-size:.56rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;opacity:.9;margin-top:2px}
.cc .apc-mrow-in.ok .apc-mrow-p{background:var(--green-l);color:var(--green)}
.cc .apc-mrow-in.ko .apc-mrow-p{background:var(--tint-rg2);color:var(--danger)}
.cc .apc-mrow-n{flex:1;min-width:0;font-weight:800;color:var(--ink);font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .apc-mrow-bar{flex:none;width:64px;height:7px;border-radius:999px;background:var(--surf2);overflow:hidden}
.cc .apc-mrow-in.ok .apc-mrow-bar i{display:block;height:100%;background:linear-gradient(90deg,#27c06a,#1fa254)}
.cc .apc-mrow-in.ko .apc-mrow-bar i{display:block;height:100%;background:linear-gradient(90deg,#e0574a,#c0392b)}
@media(max-width:900px){.cc .apc-statgrid{grid-template-columns:repeat(3,1fr)}.cc .apc-ring{grid-column:1/-1;margin:0 auto}.cc .apc-mf{grid-template-columns:1fr}}
.cc .apc-tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.cc .apc-tool{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:var(--cardg);border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:var(--sh);transition:transform .14s,box-shadow .14s,border-color .14s;text-decoration:none}
.cc .apc-tool:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--grad-bl-bd)}
.cc .apc-tool .ic{grid-row:1/3;width:40px;height:40px;flex:none;border-radius:11px;display:grid;place-items:center;font-size:1.15rem;background:var(--stu-or-tint);color:var(--stu-or-k);margin:0;transition:.14s}
.cc .apc-tool:hover .ic{background:var(--grad-or2);color:#fff;box-shadow:0 5px 13px rgba(var(--stu-or-rgb,244,125,74),.3)}
.cc .apc-tool b{grid-column:2;align-self:end;font-size:.92rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .apc-tool small{grid-column:2;align-self:start;font-size:.76rem;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .apc-tool-danger .ic{background:var(--tint-rg2);color:var(--danger)}
.cc .apc-tool-danger:hover{border-color:#e0574a}.cc .apc-tool-danger:hover .ic{background:linear-gradient(150deg,#e0574a,#c0392b);box-shadow:0 5px 13px rgba(192,57,43,.3)}
.cc .apc-tool-danger .ic{background:var(--tint-rg2);color:var(--danger)}
.cc .apc-tool-danger:hover{border-color:#e0574a}
.cc .apc-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.cc .apc-docs a{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:.85rem;font-weight:700;color:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surf);transition:.14s}
.cc .apc-docs a:hover{border-color:var(--blue);color:var(--blue-7);background:var(--bl-025)}
.cc .apc-docs a i{color:var(--stu-or-k);font-size:1.05rem}
/* liste verticale (discussions sécurisées, style ancienne page) */
.cc .apc-list{display:flex;flex-direction:column;gap:6px}
.cc .apc-list a{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--surf);color:var(--ink);font-weight:700;font-size:.9rem;text-decoration:none;transition:.14s}
.cc .apc-list a::after{content:"\F285";font-family:"bootstrap-icons";margin-left:auto;color:var(--ink3);font-weight:400;font-size:.85rem}
.cc .apc-list a>i{color:var(--stu-or-k);font-size:1.05rem}
.cc .apc-list a:hover{border-color:var(--stu-role,#00a1ff);background:var(--tint-bl3);color:var(--blue-7)}
/* en-tête : actions + recherche */
.cc .apc-hactions{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cc .apc-search{display:flex;align-items:center;gap:7px;background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:6px 11px;transition:.15s}
.cc .apc-search:focus-within{border-color:var(--stu-role,#00a1ff);box-shadow:0 0 0 3px rgba(var(--stu-role-rgb,0,161,255),.14)}
.cc .apc-search i{color:var(--ink3);font-size:.9rem}
.cc .apc-search input{border:0;background:transparent;outline:none;font:inherit;font-size:.86rem;color:var(--ink);width:210px;max-width:44vw}
/* matières & enseignants (liste enrichie) */
.cc .apc-mat{display:flex;flex-direction:column;gap:8px}
.cc .apc-matrow{display:flex;align-items:center;gap:12px;background:var(--cardg);border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:var(--sh);transition:.14s}
.cc .apc-matrow:hover{border-color:var(--grad-bl-bd);box-shadow:var(--sh2)}
.cc .apc-matrow.warn{border-left:3px solid var(--amber)}
.cc .apc-matico{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;background:var(--stu-or-tint);color:var(--stu-or-k);font-size:1.15rem}
.cc .apc-matbody{flex:1;min-width:0}
.cc .apc-matn{font-weight:800;color:var(--ink);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .apc-matsub{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.cc .apc-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:800;border-radius:7px;padding:3px 8px;background:var(--surf2);color:var(--ink2);text-decoration:none;white-space:nowrap}
.cc .apc-chip.ens{background:var(--tint-bl);color:var(--info2)}.cc .apc-chip.ens:hover{background:var(--tint-bl4)}
.cc .apc-chip.ko{background:var(--tint-rg2);color:var(--danger)}
/* enseignants en charge — l'équipe de la classe, une carte par personne.
   Se replie de trois colonnes à une : la liste des matières qu'une personne
   assure peut être longue, et doit rester lisible sur un téléphone. */
.cc .apc-ens{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.cc .apc-enscard{display:flex;align-items:flex-start;gap:11px;background:var(--cardg);border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:var(--sh);transition:.14s}
.cc .apc-enscard:hover{border-color:var(--grad-bl-bd);box-shadow:var(--sh2)}
.cc .apc-ensav{position:relative;width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;color:#fff;background:var(--ink3);overflow:hidden;text-decoration:none}
.cc .apc-ensav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.cc .apc-ensb{flex:1;min-width:0}
.cc .apc-ensn{display:block;font-weight:800;color:var(--ink);font-size:.93rem;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .apc-ensn:hover{color:var(--info2)}
.cc .apc-enschips{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px}
.cc .apc-ensmats{margin-top:6px;font-size:.76rem;color:var(--ink3);line-height:1.45}
.cc .apc-matens{position:relative;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.8rem;color:#fff;background:var(--stu-role-d,#0090ea);overflow:hidden;text-decoration:none;box-shadow:0 2px 6px rgba(var(--stu-role-rgb,10,144,234),.3)}
.cc .apc-matens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc .apc-matbtns{flex:none;display:flex;align-items:center;gap:5px}
.cc .apc-matacts{display:inline-flex;gap:5px}
.cc .apc-matdt{width:30px;height:30px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;color:var(--ink3);transition:.14s;background:var(--surf)}
.cc .apc-matdt:hover{border-color:var(--blue);color:var(--blue-7)}
/* élèves (liste enrichie) */
.cc .apc-eleves{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.cc .apc-eleve{display:flex;align-items:center;gap:11px;background:var(--cardg);border:1px solid var(--line);border-radius:13px;padding:9px 12px;box-shadow:var(--sh);transition:.14s;text-decoration:none}
.cc .apc-eleve:hover{border-color:var(--grad-bl-bd);background:var(--bl-025)}
.cc .apc-ava{position:relative;width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.9rem;color:#fff;background:var(--ink3);overflow:hidden}
.cc .apc-ava.f{background:#e0559b}.cc .apc-ava.m{background:#00a1ff}
.cc .apc-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.cc .apc-elb{flex:1;min-width:0;display:flex;flex-direction:column}
.cc .apc-eln{font-size:.88rem;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc .apc-elm{font-size:.72rem;color:var(--ink3);font-weight:600}
.cc .apc-elc{color:var(--ink3);font-size:.9rem;flex:none}
/* évolution (graphe SVG) */
/* ===== Groupes de sections + accordéons style accueil (.grp) ===== */
/* ⚠ LES DEUX COLONNES SONT RÉTABLIES (2026-08-11). Elles avaient été retirées au
   profit du `display:block`, ce qui donnait deux sections pleine largeur
   empilées — « Accès » puis « Contacts complémentaires » — là où elles tiennent
   côte à côte et se lisent ensemble. La grille est en `auto-fit` : sur un écran
   étroit elle revient d'elle-même à une colonne, sans requête de média. */
.cc .apc-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;align-items:start}
.cc .apc-group{display:flex;align-items:center;gap:11px;margin:30px 0 10px;color:var(--ink);font-size:.8rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.cc .apc-group i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--grad-or2);color:#fff;font-size:1rem;letter-spacing:0;box-shadow:0 5px 13px rgba(var(--stu-or-rgb,244,125,74),.3)}
.cc .apc-group::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--tint-bl5),transparent)}
.cc .apc-group:first-child{margin-top:8px}
.cc .apc-subhead{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
.cc .apc-subhead.first{margin-top:2px}
.cc .apc-subhead i{color:var(--stu-or-k);font-size:.9rem}
.cc .apc-subhead::after{content:"";flex:1;height:1px;border-radius:2px;background:linear-gradient(90deg,var(--line),transparent)}
/* Accordéon calqué sur l'accordéon d'accueil (.grp) */
.cc .apc-acc{background:var(--cardg);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);margin-bottom:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.cc .apc-acc[open]{border-color:var(--grad-bl-bd);box-shadow:var(--sh2)}
.cc .apc-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:13px 15px;font-weight:800;color:var(--ink2);font-size:.93rem;transition:.15s}
.cc .apc-acc>summary::-webkit-details-marker{display:none}
.cc .apc-acc>summary>i:first-child{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:10px;background:var(--tint-bl);color:var(--tint-k);font-size:1.05rem;transition:.15s}
.cc .apc-acc>summary:hover{background:var(--tint-bl3)}
.cc .apc-acc[open]>summary{color:var(--info2);background:var(--tint-bl2);border-bottom:1px solid var(--grad-bl-bd)}
.cc .apc-acc[open]>summary>i:first-child{background:var(--grad-or2);color:#fff;box-shadow:0 5px 13px rgba(var(--stu-or-rgb,244,125,74),.35)}
.cc .apc-acc>summary .chev{margin-left:auto;font-size:.85rem;color:var(--ink3);opacity:.55;transition:transform .2s,opacity .2s,color .2s}
.cc .apc-acc[open]>summary .chev{transform:rotate(180deg);opacity:1;color:var(--info2)}
.cc .apc-acc .apc-acc-b{padding:14px 15px 16px}
.cc .apc-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cc .apc-charts .panel{display:flex;flex-direction:column}
.cc .apc-chart-t{display:flex;align-items:center;gap:8px;font-size:.92rem;font-weight:800;color:var(--ink);margin-bottom:8px}
@media(max-width:900px){.cc .apc-charts{grid-template-columns:1fr}}
.cc .apc-seqsel{display:flex;flex-wrap:wrap;gap:8px}
.cc .apc-seq{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surf);color:var(--ink2);font-weight:800;font-size:.85rem;transition:.14s}
.cc .apc-seq:hover{border-color:var(--blue);color:var(--blue-7)}
.cc .apc-seq.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 4px 12px rgba(0,140,224,.28)}
.cc .apc-kdelta{display:block;margin-top:3px;font-size:.72rem;font-weight:800;letter-spacing:0}
.cc .apc-kdelta.up{color:var(--green)}.cc .apc-kdelta.down{color:var(--danger)}
.cc .apc-evo-h{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-bottom:10px;font-size:.82rem}
.cc .apc-evo-leg{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-weight:700}
.cc .apc-evo-leg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.cc .apc-evo-delta{display:inline-flex;align-items:center;gap:4px;font-weight:800;border-radius:999px;padding:2px 10px;font-size:.78rem}
.cc .apc-evo-delta.up{background:var(--green-l);color:var(--green)}
.cc .apc-evo-delta.down{background:var(--tint-rg);color:var(--danger)}
.cc .apc-evo{width:100%}
.cc .apc-evo svg{width:100%;height:220px;display:block}
.cc .apc-evo .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.cc .apc-evo text{font-family:var(--sans);font-size:10px;fill:var(--ink3)}
/* commentaires */
.cc .apc-coms{display:flex;flex-direction:column;gap:8px}
.cc .apc-com{background:var(--cardg);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px;padding:11px 14px;box-shadow:var(--sh)}
.cc .apc-com-t{font-size:.9rem;color:var(--ink);line-height:1.5}
.cc .apc-com-d{font-size:.74rem;color:var(--ink3);margin-top:6px;display:flex;align-items:center;gap:5px}

/* ── Programme du cours : ce qui est déjà écrit, avant ce qu'on peut ajouter.
   Le modal proposait une liste de « Chapitre 1..20 » sans rapport avec le
   prévisionnel, et sans montrer les leçons déjà saisies : on écrasait sans le
   savoir. Voir a-propos-du-cours.php. */
.cc .prog-liste{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:220px;overflow-y:auto}
.cc .prog-item{display:flex;gap:12px;align-items:baseline;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surf2);font-size:.86rem}
.cc .prog-item b{flex:none;font-weight:850;color:var(--blue-7);font-size:.78rem;min-width:62px}
.cc .prog-item span{color:var(--ink2);overflow:hidden;text-overflow:ellipsis}

/* Un champ dont le format est refusé (assets/js/stu-champs.js). Rouge de
   DANGER, jeton sémantique : une erreur de saisie ne change pas de sens selon
   le rôle connecté, elle ne suit donc pas la couleur du profil. */
.stu-champ-ko{border-color:var(--danger) !important;box-shadow:0 0 0 3px rgba(192,57,43,.14) !important}

/* ══ CHOIX ET ÉTAPES — l'habillage commun des formulaires de saisie ═══════════
   Demande de l'utilisateur (2026-08-04) : « un affichage plus sophistiqué pour
   les input radio et le système de pagination ».

   Les cinq pages de saisie avaient chacune sa classe de conteneur — na-oui,
   ma-radios, mp-radios, pa-radios, np-radios — et deux noms de fil d'étapes
   différents. Elles portent maintenant EN PLUS `stu-radios` et `stu-fil` : les
   règles de page restent en place, celles-ci les habillent par-dessus. Un seul
   endroit à retoucher, et rien à défaire si une page veut se singulariser. */

/* ── Les choix : de vraies pastilles cliquables ─────────────────────────────
   Un bouton radio de 13 px, sur un téléphone, se rate une fois sur trois. La
   pastille prend toute la hauteur de la ligne et reste une VRAIE <label> autour
   d'un vrai <input> : le clavier, le lecteur d'écran et la validation native
   continuent de fonctionner — on habille, on ne remplace pas. */
.stu-radios{display:flex;flex-wrap:wrap;gap:8px}
.stu-radios>label{position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--surf);
  font-size:.89rem;font-weight:650;color:var(--ink2);cursor:pointer;transition:.14s;user-select:none;margin:0}
.stu-radios>label:hover{border-color:var(--blue);color:var(--ink);background:var(--bl-025)}
/* La coche elle-même : dessinée, mais toujours présente et focalisable. */
.stu-radios>label>input[type=radio]{appearance:none;-webkit-appearance:none;margin:0;flex:none;
  width:17px;height:17px;border:2px solid var(--ink3);border-radius:50%;background:var(--surf);
  transition:.14s;cursor:pointer}
.stu-radios>label>input[type=radio]:checked{border-color:var(--blue);border-width:5px}
.stu-radios>label:has(>input:checked){border-color:var(--blue);background:var(--bl);color:var(--blue-8);font-weight:800}
/* :has() n'existe pas partout ; la classe posée par stu-champs.js prend le
   relais nulle part ici, donc on double la mise en évidence par le focus. */
.stu-radios>label>input[type=radio]:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
/* Un choix obligatoire resté vide (assets/js/stu-champs.js). Rouge SÉMANTIQUE :
   une erreur de saisie ne change pas de sens selon le rôle connecté. */
.stu-radios>label.stu-radio-ko{border-color:var(--danger);background:rgba(192,57,43,.06);color:var(--danger)}
.stu-radios>label.stu-radio-ko>input[type=radio]{border-color:var(--danger)}

/* ── Le fil des étapes ──────────────────────────────────────────────────────
   Trois états à distinguer d'un coup d'œil, et non deux : FRANCHIE (on peut y
   revenir), COURANTE, À VENIR (inatteignable). L'étape franchie porte une coche
   et devient cliquable ; celle à venir reste éteinte — proposer un lien mort
   apprend à l'utilisateur que les liens ne veulent rien dire. */
.stu-fil{counter-reset:etape}
.stu-fil li{position:relative;transition:.16s}
.stu-fil li[data-ouvrable="1"]{cursor:pointer}
.stu-fil li[data-ouvrable="1"]:hover{background:var(--bl-025)}
.stu-fil li[data-ouvrable="0"]{opacity:.55}
.stu-fil li .n{transition:.16s;font-variant-numeric:tabular-nums}
.stu-fil li[aria-current="step"]{font-weight:800}
/* La pastille de l'étape courante respire, celle qui est faite se tait. */
.stu-fil li[aria-current="step"] .n{box-shadow:0 0 0 4px rgba(var(--stu-role-rgb,0,161,255),.16)}
.stu-fil li[data-fait="1"] .n{box-shadow:none}
/* La jauge : elle glisse au lieu de sauter. */
.stu-jauge,.na-jauge{transition:width .32s cubic-bezier(.4,0,.2,1)}
@media (max-width:640px){
  /* Sur un téléphone, les intitulés d'étape mangent la colonne : on ne garde
     que les pastilles, alignées, et l'intitulé de l'étape COURANTE. */
  .stu-fil li{flex:1 1 auto;justify-content:center;padding:.7rem .5rem;font-size:0}
  .stu-fil li .n{font-size:.9rem}
  .stu-fil li[aria-current="step"]{font-size:.82rem;flex:2 1 auto}
}

/* ── LE FIL D'ÉTAPES, DÉTACHÉ DE L'EN-TÊTE ────────────────────────────────────
   Demande de l'utilisateur : « une pagination beaucoup mieux stylée, attrayante,
   DÉCALÉE DE L'ENTÊTE ». Le fil touchait le bandeau : deux blocs colorés collés
   se lisent comme un seul, et l'on ne voyait plus où commençait la saisie.

   Il devient une CARTE posée, avec sa propre respiration et son ombre — le même
   vocabulaire que les panneaux du shell, pour qu'il appartienne visiblement à la
   page et non au bandeau. */
.stu-fil{margin-top:22px !important;margin-bottom:26px !important;
  background:var(--cardg);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh);padding:6px;overflow:hidden}
/* Les bordures internes disparaissent : la carte porte déjà la sienne, et deux
   traits l'un sur l'autre font sale. */
.stu-fil li{border:0 !important;background:transparent !important;border-radius:12px !important}
.stu-fil li+li{position:relative}
/* Un chevron discret entre deux étapes, plutôt qu'un filet : il indique un SENS,
   ce qu'un trait ne fait pas. Masqué quand la barre se replie en colonne. */
.stu-fil li+li::before{content:"";position:absolute;left:-1px;top:50%;width:7px;height:7px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);opacity:.9}
.stu-fil li[aria-current="step"]{background:var(--bl) !important;color:var(--blue-8) !important}
.stu-fil li[data-fait="1"]{color:var(--ink2) !important}
.stu-fil li[data-fait="1"]:hover{background:var(--bl-025) !important}
/* La jauge court SOUS la carte, sur toute sa largeur : elle mesure l'avancement
   de bout en bout, elle n'appartient à aucune étape en particulier. */
.stu-fil>.na-jauge,.stu-fil>.stu-jauge{position:absolute;left:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-7));border-radius:0 3px 3px 0;z-index:1}
.stu-fil{position:relative}
@media (max-width:640px){ .stu-fil li+li::before{display:none} }

/* ── LE RÉCAPITULATIF, GROUPÉ ─────────────────────────────────────────────────
   Vingt lignes à plat ne se relisent pas — et c'est justement le moment où l'on
   relit, juste avant d'enregistrer. Quatre à six blocs titrés, chacun sur sa
   grille, et le champ vide DIT qu'il est vide au lieu de disparaître. */
.na-rc-bloc{margin:0 0 20px}
.na-rc-bloc:last-child{margin-bottom:0}
.na-rc-bloc>h4{display:flex;align-items:center;gap:9px;margin:0 0 10px;
  font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blue-7)}
.na-rc-bloc>h4 i{font-size:.95rem;letter-spacing:0}
.na-rc-bloc>h4::after{content:"";flex:1;height:1px;background:var(--bl2)}
.na-rc-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:0 1.75rem}
.na-rc-l{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:9px 0;border-bottom:1px solid var(--line2)}
.na-rc-l dt{color:var(--ink3);font-size:.82rem;font-weight:650;flex:none}
.na-rc-l dd{margin:0;font-weight:700;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.na-rc-l.vide dd{font-weight:600}
.na-rc-l.vide dd span{color:var(--ink3);font-style:italic;font-weight:600}

/* ── LE COMPTE CRÉÉ ───────────────────────────────────────────────────────────
   La seule fois où un mot de passe s'affiche. Il ne se reverra pas : il lui faut
   une carte, pas une ligne de bandeau — et de quoi le copier sans le retaper. */
/* ── LE BLOC DE CONFIRMATION SUIT LE RÔLE (2026-08-11, demande du client) ─────
   Il était peint en vert fixe (--green / --green-l), la couleur du « succès ».
   Il prend désormais la famille du RÔLE connecté (--stu-role*, posée par
   inclusions/role_utilisateur.php), comme le reste de l'espace : l'écran de
   création d'un établissement n'a pas à changer de palette au dernier écran.
   ⚠ LE SENS DU SUCCÈS N'EST PAS PERDU POUR AUTANT : il est porté par l'ICÔNE
     (bi-patch-check-fill) et par le titre, pas par la couleur du cadre. On
     déplace le signal, on ne le supprime pas.
   ⚠ REPLI SUR LE VERT : ces blocs s'affichent aussi sur des pages ouvertes SANS
     session — création d'un compte depuis le portail. Aucune couche de rôle n'y
     est posée, donc aucun --stu-role* : sans second argument, la bordure serait
     tombée en « invalide » et le bloc aurait perdu son cadre. */
.na-cree{margin-top:16px;border:1px solid var(--stu-role, var(--green));border-radius:16px;
  background:var(--stu-role-tint, var(--green-l));padding:18px 20px;box-shadow:var(--sh)}
.na-cree-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.na-cree-h>i{font-size:1.5rem;color:var(--stu-role-k, var(--green));flex:none;line-height:1.2}
.na-cree-h b{display:block;font-size:1.05rem;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.na-cree-h small{display:block;margin-top:2px;font-size:.82rem;color:var(--ink2)}
.na-cree-ids{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:10px}
.na-id{display:flex;align-items:center;gap:10px;background:var(--surf);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.na-id .k{flex:none;font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
/* Le mot de passe se lit caractère par caractère : chasse fixe, et de l'air
   entre les lettres — « xxq8TZEMh » ne se recopie pas à l'œil autrement. */
.na-id code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:.04em;
  overflow-wrap:anywhere;background:none;padding:0}
.na-cp{flex:none;width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:var(--surf2);color:var(--ink2);transition:.14s}
.na-cp:hover{border-color:var(--blue);color:var(--blue-7);background:var(--bl-025)}
.na-cree-n{margin:12px 0 0;font-size:.84rem;line-height:1.55;color:var(--ink2);
  display:flex;gap:8px;align-items:flex-start}
.na-cree-n i{color:var(--stu-role-k, var(--green));flex:none;margin-top:.15em}
.na-cree-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

/* L'observation est un TEXTE LIBRE, pas une étiquette : dans une grille de
   colonnes étroites, elle se retrouvait pressée sur trois caractères de large et
   s'enroulait sur dix lignes. Elle prend la largeur entière et passe sous son
   intitulé plutôt qu'à côté — c'est ainsi qu'on lit un paragraphe. */
.na-rc-l.large{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px}
.na-rc-l.large dd{text-align:left;font-weight:600;line-height:1.55;white-space:pre-line}

/* ── LES CODES D'ACCÈS, MASQUÉS PAR DÉFAUT ────────────────────────────────────
   Cette page s'affiche souvent dans un bureau, parfois devant l'élève ou un
   tiers. Les codes se révèlent d'un geste délibéré, tous ensemble.

   ⚠ ON MASQUE PAR LE STYLE, PAS EN REMPLAÇANT LA VALEUR PAR DES POINTS : le
     texte reste réel, donc sélectionnable et copiable même caché. Personne n'est
     obligé de l'afficher pour le prendre. */
.na-codes{margin-top:16px;border:1px solid var(--bl2);border-radius:14px;background:var(--bl-025);padding:14px 16px}
.na-codes-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}
.na-codes-h>span{font-size:.72rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--blue-7)}
.na-oeil{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:9px;
  background:var(--surf);color:var(--ink2);font:inherit;font-size:.78rem;font-weight:750;
  padding:5px 11px;cursor:pointer;transition:.14s}
.na-oeil:hover{border-color:var(--blue);color:var(--blue-7)}
/* TROIS CODES PAR LIGNE. En auto-fit, le nombre de colonnes dépendait de la
   largeur du modal : deux ici, quatre là, et les six codes se lisaient dans un
   ordre différent selon l'écran. Trois colonnes fixes donnent deux rangées de
   trois, toujours les mêmes — on retrouve un code à sa place. En dessous de
   900 px on passe à deux, puis à une : trois colonnes de 9 rem tronqueraient
   un code de huit caractères. */
.na-codes-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:900px){.na-codes-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.na-codes-g{grid-template-columns:1fr}}
.na-codes.masque .na-id code{-webkit-text-security:disc;text-security:disc;color:var(--ink3);letter-spacing:.18em}
/* Les navigateurs sans -webkit-text-security (Firefox) : on floute. Le texte est
   toujours là, toujours copiable, simplement illisible à l'œil. */
@supports not (-webkit-text-security:disc){
  .na-codes.masque .na-id code{filter:blur(5px);user-select:all}
}
.na-codes-n{margin:11px 0 0;font-size:.79rem;line-height:1.5;color:var(--ink3)}

/* L'avertissement de doublon liste plusieurs élèves, une par ligne : sans
   white-space, les retours à la ligne s'écrasent et tout se lit d'un bloc. */
.na-dit span{white-space:pre-line}

/* ══════════════════════════════════════════════════════════════════════════════
   FORMULAIRES DE CRÉATION EN PLUSIEURS ÉTAPES  (.na-*)
   ──────────────────────────────────────────────────────────────────────────────
   Remontées ici le 2026-08-04, depuis la feuille privée de nouvel-apprenant.php.

   Elles n'ont jamais eu de raison d'être propres à l'inscription d'un élève :
   un fil d'étapes, un panneau d'étape, une grille de champs, un bandeau de
   message et un récapitulatif sont ce que demande TOUT formulaire de création en
   plusieurs étapes. nouveau-personnel.php et nouveau-parent.php écrivaient
   chacun son propre dialecte pour dire la même chose — .np-steps, .np-pane,
   .np-grid, .np-f, .np-msg d'un côté, .pa-* de l'autre — et les trois pages ne
   se ressemblaient plus.

   ⚠ LE PRÉFIXE .na- EST CONSERVÉ À DESSEIN. Le renommer aurait touché les trois
     pages, leurs scripts et leurs tests dans le même mouvement : beaucoup de
     risque pour un préfixe. Il ne veut plus dire « nouvel apprenant » mais
     « formulaire en étapes » — c'est écrit ici, une fois.
   ══════════════════════════════════════════════════════════════════════════════ */
/* Le retour : discret, mais toujours au même endroit — au-dessus du titre. */
.na-retour{display:inline-flex;align-items:center;gap:.15rem;margin:0 0 .75rem;
  padding:.35rem .7rem .35rem .45rem;border:1px solid var(--bd);border-radius:2rem;
  background:var(--surf);color:var(--txt2);text-decoration:none;font-size:.86rem;
  transition:border-color .2s,color .2s,background .2s}
.na-retour:hover{border-color:var(--stu-role);color:var(--stu-role-txt);background:var(--stu-role-tint3)}
.na-retour i{font-size:1.15rem}

/* La frise : trois jalons reliés par un trait qui se remplit. Le trait dit la
   progression mieux qu'un numéro — on voit d'un coup où l'on en est. */
.na-fil{display:flex;gap:0;list-style:none;padding:0;margin:0 0 1.4rem;flex-wrap:wrap;position:relative}
.na-fil li{flex:1 1 13rem;display:flex;align-items:center;gap:.7rem;padding:.85rem 1rem;
  border:1px solid var(--bd);background:var(--surf);position:relative;
  color:var(--txt2);font-size:.9rem;font-weight:500;
  transition:border-color .25s,color .25s,background .25s,box-shadow .25s}
.na-fil li:first-child{border-radius:.8rem 0 0 .8rem}
.na-fil li:last-child{border-radius:0 .8rem .8rem 0}
.na-fil li+li{border-left:0}
.na-fil li .n{flex:0 0 1.85rem;height:1.85rem;display:grid;place-items:center;border-radius:50%;
  background:var(--surf2);color:var(--txt2);font-weight:700;font-size:.85rem;
  box-shadow:0 0 0 0 var(--stu-role-tint);transition:background .25s,color .25s,box-shadow .25s}
.na-fil li[aria-current="step"]{border-color:var(--stu-role);color:var(--txt);
  background:var(--stu-role-tint3);z-index:1}
.na-fil li[aria-current="step"] .n{background:var(--stu-role-d);color:#fff;
  box-shadow:0 0 0 .28rem var(--stu-role-tint)}
.na-fil li[data-fait="1"]{color:var(--txt)}
.na-fil li[data-fait="1"] .n{background:var(--ok,#1e8f57);color:#fff}
.na-fil li[data-fait="1"] .n::before{content:"\2713"}
.na-fil li[data-fait="1"] .n span{display:none}
@media(max-width:640px){
  .na-fil li,.na-fil li:first-child,.na-fil li:last-child{border-radius:.8rem;border-left:1px solid var(--bd)}
  .na-fil{gap:.45rem}
}

/* Les champs verrouillés doivent SE VOIR verrouillés : le matricule de
   l'établissement et son code secret viennent de la session, ils ne se
   saisissent pas. Un champ grisé sans explication passe pour une panne. */
.na-cols input[readonly]{background:var(--surf2);color:var(--txt2);cursor:default;border-style:dashed}
.na-cade{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--txt2);margin-top:.3rem}
.na-cade i{font-size:.85rem}

/* Le matricule attribué est le résultat de l'étape : on le montre comme tel. */
#AlertSecretCode_1{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
  font-weight:600;border-style:solid}
#AlertSecretCode_1.na-ok{background:rgba(30,143,87,.1);color:var(--ok,#1e8f57);
  border-color:rgba(30,143,87,.4)}
/* Le fil de progression court derrière les jalons et se remplit par tiers.
   Une barre dit l'avancement d'un coup d'œil, là où trois pastilles obligent
   à les comparer. */
.na-jauge{position:absolute;left:0;bottom:-1px;height:2px;width:0;border-radius:2px;
  background:var(--stu-role-d);transition:width .45s cubic-bezier(.4,0,.2,1);z-index:2}
/* Un jalon franchi se rouvre d'un clic ; un jalon non atteint reste inerte. */
.na-fil li[data-fait="1"],.na-fil li[aria-current="step"]{cursor:pointer}
.na-fil li[data-fait="1"]:hover{background:var(--stu-role-tint3);border-color:var(--stu-role)}
.na-fil li[data-ouvrable="0"]{cursor:not-allowed;opacity:.72}
.na-etape{display:none}
.na-etape.on{display:block}
.na-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem 1.15rem}
.na-cols .large{grid-column:1/-1}
.na-lab{display:block;font-size:.83rem;color:var(--txt2);margin-bottom:.35rem}
.na-lab .req{color:var(--dgr,#d9534f)}
.na-oui{display:flex;gap:1.25rem;padding-top:.4rem}
.na-oui label{display:flex;align-items:center;gap:.4rem;margin:0;color:var(--txt);font-size:.9rem;cursor:pointer}
.na-oui input{width:auto;margin:0}
.na-bas{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.35rem;flex-wrap:wrap}
.na-dit{margin-top:.9rem;padding:.75rem .95rem;border-radius:.65rem;font-size:.9rem;display:none;
  align-items:flex-start;gap:.55rem}
.na-dit.on{display:flex}
.na-dit i{font-size:1.05rem;line-height:1.35}
.na-dit.ok{background:rgba(30,143,87,.12);color:var(--ok,#1e8f57);border:1px solid rgba(30,143,87,.32)}
.na-dit.ko{background:rgba(217,83,79,.12);color:#d9534f;border:1px solid rgba(217,83,79,.32)}
/* ⚠ LE RÉCAPITULATIF N'EST PLUS UNE GRILLE, ET C'EST CE QUI SERRAIT LES
   OBSERVATIONS. Cette règle datait de l'époque où le récapitulatif était une
   liste plate de lignes : elle rangeait ses ENFANTS en colonnes de 15 rem. Depuis
   qu'il est fait de blocs titrés, ce sont les BLOCS qu'elle mettait côte à côte —
   « Observations » se retrouvait dans une colonne étroite à côté de « Personnes à
   contacter », et son texte s'enroulait sur dix lignes de dix caractères.

   Les blocs s'empilent donc sur toute la largeur ; c'est la grille INTERNE de
   chaque bloc (.na-rc-grille) qui répartit ses lignes en colonnes. */
.na-recap{display:block;margin:0}
.na-vide{color:var(--txt2);font-size:.9rem;margin:0}

/* ── CRÉATION D'UN ÉTABLISSEMENT — le mot d'accueil (.ce-*) ───────────────────
   Deux règles seulement : le reste de ces deux pages parle la langue commune.
   Le bloc d'aide vient de con_db_monecolier.php ($don_inscrip_eta), qui rend une
   <ul> de contacts en balisage hérité — d'où le rattrapage de puces ici plutôt
   qu'une réécriture de la variable, partagée avec les pages non refaites. */
.ce-intro{margin:0;color:var(--txt2);font-size:.95rem;line-height:1.65}
.ce-intro b{color:var(--txt)}
.ce-aide{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--bd);
  color:var(--txt2);font-size:.9rem}
.ce-aide ul{margin:0;padding-left:1.1rem;display:grid;gap:.3rem}
.ce-aide li{line-height:1.5}
.ce-aide a{color:var(--stu-role-txt);text-decoration:none}
.ce-aide a:hover{text-decoration:underline}

/* ── LES PROFILS : IDENTITÉ, REPÈRES, LISTES D'ACCÈS ─────────────────────────
   🔴 CES RÈGLES ÉTAIENT RECOPIÉES DANS CHAQUE PAGE DE PROFIL — 23 dans
   `profil-apprenant.php`, 11 dans `profil-parents.php`, pour les mêmes classes.
   Ce n'était pas une page fautive et une page saine : c'est une famille qui
   n'avait jamais été remontée ici, et que chaque profil réimplémentait. Les
   voisines `.apc-group` et `.apc-grid2` y étaient déjà : la moitié du chemin
   avait été faite.
   ⚠ UNE SEULE DIVERGENCE À TRANCHER : le survol de `.pe-list a`. L'apprenant le
     peignait en bleu, le parent en orange. On garde l'ORANGE — ce sont des
     ACTIONS (ouvrir un PDF, appeler, écrire), et la règle de marque du projet
     veut que le menu dise le rôle et l'orange dise l'action. */
.cc .pf-id{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.cc .pf-id img{width:88px;height:88px;border-radius:18px;object-fit:cover;border:1px solid var(--line);background:var(--surf2)}
.cc .pf-id .nm{font-size:1.2rem;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.cc .pf-id .rl{display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:.8rem;font-weight:800;color:var(--blue-7);background:var(--bl);border:1px solid var(--bl2);border-radius:999px;padding:3px 11px}
.cc .pf-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px}
.cc .pf-msc{background:var(--cardg);border:1px solid var(--line);border-radius:13px;padding:11px 13px;box-shadow:var(--sh)}
.cc .pf-msc b{display:block;font-size:.95rem;font-weight:800;color:var(--ink);word-break:break-word}
.cc .pf-msc span{display:block;margin-top:2px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3)}
/* ── « ACCÈS » : DES TUILES, PAS UNE COLONNE (2026-08-11) ────────────────────
   🔴 CE BLOC ÉTAIT LE PLUS MAUVAIS DE L'ESPACE PARENT. `.pe-list` empilait ses
     liens en `flex-direction:column`, et son parent `.apc-grid2` était forcé en
     `display:block` : six actions minuscules — Fiche PDF, Excel, Mon espace,
     Rapport, Appeler, Écrire — occupaient SIX LIGNES SUR TOUTE LA LARGEUR, soit
     plus de 300 px de haut pour six mots. Une page de profil doit se lire d'un
     coup d'œil, pas se dérouler.
   On reprend l'idiome DÉJÀ dans cette feuille (`.apc-eleves`, l. 941) : une
   grille qui se remplit, des tuiles bordées, une pastille pour l'icône. Six
   actions tiennent alors sur deux rangées.
   ⚠ L'icône garde sa couleur en ligne quand la page en pose une (PDF rouge,
     Excel vert) : on ne fixe QUE la pastille, jamais le glyphe. */
.cc .pe-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px}
.cc .pe-list li{min-width:0}
.cc .pe-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink2);font-weight:700;font-size:.87rem;transition:.14s;
  background:var(--cardg);border:1px solid var(--line);box-shadow:var(--sh);min-width:0;overflow-wrap:anywhere}
.cc .pe-list a:hover{background:var(--stu-or-tint3,rgba(244,125,74,.07));color:var(--stu-or-k,#b35c36);
  border-color:var(--stu-or-tint1,rgba(244,125,74,.4));transform:translateY(-1px)}
.cc .pe-list i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;font-size:.95rem;
  background:var(--stu-or-tint3,rgba(244,125,74,.1));color:var(--stu-or-k,#b35c36)}

/* ── Tableaux d'informations : lisibles, sans lignes de grille ───────────────
   Deux colonnes fixes (l'intitulé, puis la valeur), pas de bordure horizontale
   sur chaque cellule : le contraste de la casse et de la couleur suffit à
   séparer les lignes, et un « — » ne mérite pas un trait.
   ⚠ La largeur de l'intitulé est BORNÉE (`width:1%` + `white-space:nowrap`) :
     sans cela la valeur se retrouvait collée à droite d'un intitulé étiré, ce
     qu'on voit sur la capture — « DATE DE NAISSANCE » à gauche, la date au
     milieu de nulle part. */
.cc .pf-t{width:100%;border-collapse:separate;border-spacing:0;font-size:.88rem}
.cc .pf-t th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
  font-weight:800;padding:9px 14px 9px 0;width:1%;white-space:nowrap;vertical-align:top}
.cc .pf-t td{padding:9px 0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.cc .pf-t tr+tr th,.cc .pf-t tr+tr td{border-top:1px solid var(--line2)}
/* Une valeur absente s'efface au lieu de crier : elle reste lisible pour qui la
   cherche, sans peser autant qu'une information réelle. */
.cc .pf-t td.vide{color:var(--ink3);font-weight:500}

/* ── IMPRESSION DU RÉCAPITULATIF DE VÉRIFICATION (2026-08-11) ─────────────────
   Posée par window.stuImprimerRecap() : une COPIE du récapitulatif est déposée
   au premier niveau dans #stuImpression, et le reste de la page est masqué le
   temps de l'impression. Cloner plutôt que masquer les voisins évite d'avoir à
   ré-afficher toute la chaîne d'ancêtres du bloc, règle qui casserait au premier
   changement de balisage.
   ⚠ #stuImpression reste caché À L'ÉCRAN : il n'existe que pour l'imprimante. */
#stuImpression{display:none}
.stu-imp-titre{font-size:1.25rem;font-weight:900;margin:0 0 2px}
.stu-imp-date{font-size:.8rem;color:#555;margin:0 0 14px}

@media print{
  /* On masque les FRÈRES de la copie, pas ses ancêtres : elle est fille directe
     de <body>, donc rien ne la contraint. */
  body.stu-en-impression > *{display:none !important}
  body.stu-en-impression #stuImpression{display:block !important}
  body.stu-en-impression{background:#fff !important}
  /* Le récapitulatif s'imprime à plat : ni ombre, ni fond, ni colonne étroite. */
  #stuImpression .na-recap{display:block;box-shadow:none;background:#fff;border:0;padding:0}
  #stuImpression dl,#stuImpression div{break-inside:avoid;page-break-inside:avoid}
}