/* Facade ENT — structure inspiree des espaces scolaires classiques (bandeau
   etablissement, barre d'onglets sombre, sous-bandeau de section, liste de matieres
   coloree avec compteurs, contenus groupes par jour).
   Ecrite a la main : 6 Ko, contre ~120 Ko pour le CDN Tailwind qui compile dans le
   navigateur. Le lien campus fait 2 Mbps partages. */
:root{
  --marque:#0d5c9e;           /* bleu Pronote : barres, boutons, element retenu */
  /* CODES COULEURS DES INCIDENTS — charte Index Education. Ils ne servent QU'A
     CA : un rouge d'erreur de formulaire et un rouge d'absence non justifiee ne
     sont pas la meme information, et les melanger interdit d'en changer un. */
  --pn-abs:#E60000;           /* absence non justifiee */
  --pn-just:#009900;          /* absence justifiee */
  --pn-ret:#FF9900;           /* retard */
  --pn-disp:#993399;          /* dispense, infirmerie */
  --pn-sel:#CCE5FF;           /* ligne selectionnee, bleu pastel */
  --pn-th:#EFEFEF;            /* en-tete de tableau, gris technique */
  --pn-tht:#333333;           /* texte des en-tetes */
  --pn-vide:#DDDDDD;          /* quadrillage des creneaux sans incident */
  --pn-selt:#000000;          /* texte sur la ligne selectionnee */
  --nav:#3f4650; --nav-h:#4c545f;
  --sous:#ededed; --sous-t:#0d4c80;
  --bandeau:#7f8792;          /* bandeau de periode, gris moyen texte blanc */
  --vide:#e2e5ea;             /* creneau sans cours */
  --grille:#c9ced6;           /* bordure des colonnes de l'emploi du temps */
  --trait:#e6e9ee;            /* lignes horaires */
  --sso:#334155;              /* sous-onglet actif : ardoise, pas la marque */
  --txt:#1a1f28; --dim:#6b7480; --ligne:#e3e7ec; --fond:#f2f4f7; --carte:#fff;
  --v:#16a34a; --r:#dc2626; --o:#ea580c;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--fond);overflow-x:hidden}
body{margin:0;background:var(--fond);color:var(--txt);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
[hidden]{display:none!important}
a{color:inherit}

/* ── Bandeau etablissement ───────────────────────────────────────────────── */
.b-e{background:var(--carte);border-bottom:1px solid var(--ligne);
  padding:max(10px,env(safe-area-inset-top)) 14px 10px;display:flex;align-items:center;gap:12px}
/* Avatar : c'est lui qui mene au compte, l'onglet « Mes donnees » n'existe plus */
.b-av{margin-left:auto;display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--dim);
  padding:5px 9px 5px 5px;border:1px solid var(--ligne);border-radius:22px;background:var(--carte)}
.b-av svg{width:26px;height:26px;flex:0 0 26px;color:var(--marque)}
.b-av span{font-size:13px;font-weight:600;white-space:nowrap}
@media (max-width:480px){ .b-av span{display:none} .b-av{padding:5px;border-radius:50%} }
/* Sur ordinateur l'en-tete s'aligne a gauche, comme le reste de la page. */
@media (min-width:900px){
  .b-e{padding:12px 22px}
  .b-t,.f-b{padding-left:22px;padding-right:22px}
}
.b-n{font-size:17px;font-weight:800;letter-spacing:.01em;text-transform:uppercase;color:var(--marque)}
.b-s{font-size:13px;color:var(--dim);margin-top:2px}

/* ── Barre de rubrique : hamburger, titre, action — TELEPHONE uniquement ─── */
.b-r{background:var(--nav);display:flex;align-items:center;gap:14px;padding:0 14px;min-height:58px}
.b-r-t{color:#fff;font-size:16px;font-weight:700;line-height:1.15;flex:1;min-width:0}
.ham{display:flex;flex-direction:column;justify-content:center;gap:5px;width:34px;height:44px;
  cursor:pointer;flex:0 0 34px}
.ham span{display:block;height:2.5px;background:#fff;border-radius:2px}

/* ── Tiroir lateral ──────────────────────────────────────────────────────── */
/* Ouvert par une case a cocher masquee, rubriques repliees par <details> :
   aucune ligne de JavaScript, donc il s'ouvre meme quand le reseau rame. */
.tr-i:checked ~ .tr{transform:none}
.tr-i:checked ~ .tr-o{opacity:1;pointer-events:auto}
.tr{position:fixed;top:0;left:0;bottom:0;width:min(87vw,340px);z-index:40;overflow-y:auto;
  background:var(--nav);transform:translateX(-102%);transition:transform .22s ease;
  padding-bottom:env(safe-area-inset-bottom)}
.tr-o{position:fixed;inset:0;z-index:39;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;
  transition:opacity .22s ease}
.tr-r,.tr-d>summary{display:flex;align-items:center;gap:12px;color:#fff;font-size:16px;
  font-weight:700;line-height:1.2;padding:17px 18px;text-decoration:none;cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.07)}
.tr-acc svg{width:26px;height:26px;flex:0 0 26px}
.tr-d>summary{list-style:none}
.tr-d>summary::-webkit-details-marker{display:none}
/* Chevron : vers le bas quand la rubrique est fermee, vers le haut quand elle est ouverte */
.tr-d>summary::after{content:'';margin-left:auto;width:11px;height:11px;flex:0 0 11px;
  border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg) translateY(-3px);
  transition:transform .18s ease}
.tr-d[open]>summary::after{transform:rotate(-135deg) translateY(-3px)}
.tr-ss{background:rgba(255,255,255,.09)}
.tr-s{display:block;color:rgba(255,255,255,.82);font-size:15px;padding:14px 18px 14px 18px;
  text-decoration:none}
.tr-s.on{color:#fff;font-weight:700;box-shadow:inset 4px 0 0 var(--marque)}
.tr-r.on{box-shadow:inset 4px 0 0 var(--marque)}

/* ── Onglets horizontaux : ORDINATEUR ────────────────────────────────────── */
/* Sur grand ecran on retrouve la barre d'onglets, et le tiroir disparait
   completement : c'est la forme que les familles connaissent. */
.b-o{display:none}
@media (min-width:900px){
  .b-r,.tr,.tr-o{display:none}
  .b-o{display:flex;background:var(--nav);align-items:stretch}
  .b-o a{color:#e7eaee;text-decoration:none;font-size:14px;font-weight:600;line-height:1.15;
    padding:12px 18px;display:flex;align-items:center;text-align:center;white-space:nowrap}
  .b-o a:hover{background:var(--nav-h)}
  .b-o a.on{background:var(--carte);color:var(--txt);font-weight:700}
  .b-o a.og-m{padding:12px 16px}
  .b-o a.og-m svg{width:24px;height:24px}
}

/* Seconde rangee : les sous-entrees de l'onglet actif. Elles n'existaient que
   dans le tiroir du telephone — sur ordinateur, la moitie des ecrans n'etait
   atteignable qu'en tapant l'adresse. Telephone exclu : le tiroir les porte. */
.b-so{display:none}
@media (min-width:900px){
  .b-so{display:flex;background:var(--sous);border-bottom:1px solid var(--grille);
    padding:0 22px;gap:0}
  .b-so a{padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--txt);
    text-decoration:none;border-right:1px solid var(--grille)}
  .b-so a:first-child{border-left:1px solid var(--grille)}
  .b-so a:hover{background:var(--carte)}
  .b-so a.on{background:var(--sso);color:#fff;font-weight:700;
    border-color:var(--sso);box-shadow:inset 0 -3px 0 var(--marque)}
}

/* ── Sous-bandeau de section ─────────────────────────────────────────────── */
.b-t{background:var(--sous);color:var(--sous-t);font-size:13.5px;font-weight:700;
  padding:9px 14px;border-bottom:1px solid var(--ligne)}

/* ── Menu de la restauration ───────────────────────────────────────────────
   Cinq colonnes, la semaine d'un coup d'oeil : une famille veut savoir « quel
   jour y a-t-il du poisson », pas « que sert-on mardi ». Le jour du jour est
   souligne, parce que c'est celui qu'on regarde neuf fois sur dix. */
.ct{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--grille);border:1px solid var(--grille)}
.ct-j{background:var(--carte);padding:0 0 8px;min-width:0}
.ct-auj{box-shadow:inset 0 3px 0 var(--marque)}
.ct-t{display:flex;align-items:baseline;gap:6px;padding:7px 9px;
  background:var(--bandeau);color:#fff;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.ct-t i{font-style:normal;font-weight:400;opacity:.75}
.ct-t b{margin-left:auto;font-size:10px;font-weight:700;text-transform:none;
  letter-spacing:0;padding:1px 6px;background:var(--marque);border-radius:2px}
.ct-l{margin:0;padding:8px 9px 0}
.ct-l dt{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);margin-top:6px}
.ct-l dt:first-child{margin-top:0}
.ct-l dd{margin:1px 0 0;font-size:12.5px;line-height:1.3}
.ct-l dd.ct-p{font-weight:700}
.ct-n{margin:8px 9px 0;padding:5px 7px;font-size:11px;line-height:1.35;color:var(--sous-t);
  background:var(--sous);border-left:3px solid var(--marque)}
.ct-0{margin:10px 9px;font-size:11.5px;color:var(--dim);font-style:italic}
/* Saisie : quatre champs par jour, et un bouton qui n'occupe pas la moitie de la
   colonne. Le formulaire est un par jour — on corrige le mardi sans toucher au
   reste de la semaine. */
.ct-f{padding:8px 9px 0}
.ct-c{display:block;margin-bottom:6px}
.ct-c span{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--dim);margin-bottom:2px}
.ct-c input{width:100%;box-sizing:border-box;height:26px;padding:3px 7px;font:inherit;
  font-size:12px;color:var(--txt);background:var(--fond);border:1px solid var(--grille)}
.ct-f button{width:100%;padding:5px 8px;font:inherit;font-size:11.5px;font-weight:700;
  color:#fff;background:var(--marque);border:1px solid var(--marque);cursor:pointer}
.ct-f button:hover{filter:brightness(1.08)}
.ct-sem{font-size:12px;font-weight:700}
.ct-s{font-size:11.5px;font-weight:600;color:var(--marque);text-decoration:none;
  padding:4px 9px;border:1px solid var(--grille);background:var(--carte)}
.ct-s:hover{background:var(--sous)}
/* Sous 900 px, cinq colonnes de 100 px ne se lisent pas : la semaine s'empile. */
@media (max-width:900px){
  .ct{grid-template-columns:minmax(0,1fr)}
}

/* Effectifs du service : combien de repas preparer, classe par classe. */
.ct-sv{margin:14px 0 0;border-top:1px solid var(--grille);overflow-x:auto}
.ct-tb{font-size:12px;width:100%;table-layout:fixed}
.ct-tb col.ct-cj{width:58px}
.ct-tb col.ct-ca{width:296px}
.ct-tb th,.ct-tb td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-tb th{padding:5px 8px;text-align:center;font-size:11px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--dim);background:var(--sous);
  border-bottom:1px solid var(--grille)}
.ct-tb th:first-child,.ct-tb .ct-th{text-align:left}
.ct-tb td{padding:4px 8px;text-align:center;border-bottom:1px solid var(--ligne);
  font-variant-numeric:tabular-nums;font-weight:700}
.ct-tb .ct-cn{text-align:left;font-weight:600}
.ct-tb .ct-z{color:var(--dim);font-weight:400}
.ct-ab{font-style:normal;font-size:10.5px;font-weight:400;color:var(--dim)}
.ct-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 10px;
  border-bottom:1px solid var(--ligne)}
.ct-aide{margin:0;font-size:11.5px;color:var(--dim);line-height:1.35}
.ct-rg .ct-cn{font-weight:600}
.ct-ck{display:flex;align-items:center;justify-content:center;cursor:pointer;margin:0}
.ct-ck input{width:16px;height:16px;accent-color:var(--marque);margin:0;cursor:pointer}
.ct-col{font:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--dim);background:none;border:0;padding:0;cursor:pointer}
.ct-col:hover{color:var(--marque);text-decoration:underline}
.ct-rgb{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 10px;border-top:1px solid var(--ligne)}
.ct-rgb .note{padding:0;margin:0;text-align:left}
.ct-rgb button{padding:6px 14px;font:inherit;font-size:12px;font-weight:700;color:#fff;
  background:var(--marque);border:1px solid var(--marque);border-radius:3px;cursor:pointer}
.ct-rgb button:hover{filter:brightness(1.08)}
.ct-tt td{background:var(--sous);font-size:13px}
.ct-r{margin:0;padding:5px 9px 0;font-size:11px;color:var(--dim)}
.ct-r b{font-size:15px;color:var(--txt);font-variant-numeric:tabular-nums}

/* Classes & eleves : l'ecran montre les DIVISIONS, pas les 252 noms. Une liste de
   252 lignes sous une colonne de 9 divisions repondait a deux questions dans le
   meme espace ; les eleves d'une classe s'ouvrent maintenant dans une fenetre. */
.cl-w{padding-top:12px}
.cl-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cl-bar .ef-rf{flex:1 1 300px;min-width:0;margin:0}
.cl-bar .ef-rq{width:100%}
.cl-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.cl-c{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 10px;
  padding:12px 14px;background:var(--carte);border:1px solid var(--ligne);border-radius:4px;
  text-decoration:none;color:var(--txt)}
.cl-c b{font-size:15px;font-weight:700}
.cl-c i{grid-row:1 / span 2;font-style:normal;font-size:22px;font-weight:800;
  color:var(--marque);font-variant-numeric:tabular-nums}
.cl-c span{font-size:11.5px;color:var(--dim)}
.cl-c:hover{border-color:var(--marque);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.cl-ret{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:12.5px;
  font-weight:700;text-decoration:none;color:var(--marque);background:var(--carte);
  border:1px solid var(--grille);border-radius:3px}
.cl-ret:hover{background:var(--sous)}
.cl-ret .ico{margin:0}
.cl-tt{font-size:14px;font-weight:700;margin-right:auto}
.cl-t{background:var(--carte);border:1px solid var(--grille)}
.cl-t tbody tr{cursor:pointer}
.bt-cr3{background:var(--carte);color:var(--marque)}
.bt-cr3:hover{background:var(--sous);filter:none}

/* ── Barre de filtres ────────────────────────────────────────────────────── */
.f-b{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px;
  background:var(--carte);border-bottom:1px solid var(--ligne)}
.seg{display:inline-flex;border:1px solid var(--marque);border-radius:6px;overflow:hidden}
.seg a{padding:8px 14px;font-size:13px;font-weight:600;color:var(--marque);text-decoration:none;
  border-right:1px solid var(--marque)}
.seg a:last-child{border-right:0}
.seg a.on{background:var(--marque);color:#fff}
.f-l{font-size:13px;color:var(--dim);display:inline-flex;align-items:center;min-height:34px}
/* Navigation de semaine */
.f-b:has(.sem){background:var(--bandeau);border-bottom:0}
.f-b:has(.sem) .f-l{color:#fff}
/* Cahier de textes : la navigation de date au CENTRE, l'etat a DROITE. Colles
   l'un contre l'autre a gauche, on ne voyait pas que « Fait » etait un filtre.
   Sous 720 px les deux repassent l'un sous l'autre, centres. */
.f-b:has(.f-etat){display:grid;grid-template-columns:1fr auto 1fr;gap:10px;justify-items:center}
.f-b:has(.f-etat) .sem{grid-column:2}
/* « Aujourd'hui » a gauche : place automatiquement, il prenait la colonne de
   droite et repoussait le filtre d'etat sur une deuxieme ligne. */
.f-b:has(.f-etat) .f-auj{grid-column:1;grid-row:1;justify-self:start;
  font-size:13.5px;font-weight:600;color:#fff;text-decoration:underline;
  text-underline-offset:3px;min-height:38px;display:inline-flex;align-items:center}
.f-b:has(.f-etat) .f-etat{grid-column:3;justify-self:end}
/* Sur le bandeau, le segment doit se lire en blanc : le vert de marque y disparait. */
.f-b:has(.sem) .f-etat .seg{border-color:rgba(255,255,255,.6)}
.f-b:has(.sem) .f-etat .seg a{color:#fff;border-right-color:rgba(255,255,255,.45)}
.f-b:has(.sem) .f-etat .seg a.on{background:#fff;color:var(--bandeau)}
@media (max-width:719px){
  .f-b:has(.f-etat){grid-template-columns:minmax(0,1fr)}
  .f-b:has(.f-etat) .sem,.f-b:has(.f-etat) .f-etat,.f-b:has(.f-etat) .f-auj{
    grid-column:1;grid-row:auto;justify-self:center}
}
.sem{display:inline-flex;align-items:center;gap:6px;color:#fff}
.sem b{font-size:14px;padding:0 4px;font-weight:700}
.sem-b{display:flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid rgba(255,255,255,.5);border-radius:5px;text-decoration:none;color:#fff;
  font-size:19px;line-height:1}

/* ── Corps : liste des matieres + contenus ───────────────────────────────── */
/* minmax(0,…) est indispensable : par defaut une colonne de grille prend la largeur
   de son contenu le plus large. Le ruban des matieres, en flex, elargissait alors
   toute la page au lieu de defiler — d'ou le debordement horizontal sur telephone. */
.col{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media (min-width:820px){ .col{grid-template-columns:280px minmax(0,1fr)} }

/* Liste des matieres : colonne a gauche sur grand ecran, rubans defilants sur mobile */
.mat{background:var(--carte);border-bottom:1px solid var(--ligne);min-width:0;max-width:100%}
@media (min-width:820px){
  /* Le sommaire reste sous les yeux pendant qu'on parcourt une longue liste :
     sticky plutot que fixed, pour qu'il continue de suivre la grille et ne
     recouvre jamais le contenu. `align-self:start` est indispensable — sans lui la
     colonne s'etire sur toute la hauteur et sticky n'a plus rien a accrocher. */
  .mat{border-right:1px solid var(--ligne);border-bottom:0;
    position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto}
}
.mat-l{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding:8px;max-width:100%}
/* Sur telephone le ruban des matieres reste colle en haut : c'est le seul moyen de
   changer de matiere sans remonter toute la page. */
@media (max-width:819px){
  .mat{position:sticky;top:0;z-index:5;box-shadow:0 1px 0 var(--ligne)}
}
.mat-l::-webkit-scrollbar{display:none}
@media (min-width:820px){ .mat-l{display:block;padding:0} }
.mat-i{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:11px 13px;
  text-decoration:none;border-radius:8px;white-space:nowrap;font-size:13px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase}
@media (min-width:820px){ .mat-i{border-radius:0;border-bottom:1px solid var(--ligne);white-space:normal} }
.mat-i.on{background:var(--sous)}
.mat-c{width:4px;align-self:stretch;min-height:17px;border-radius:2px;flex:0 0 4px}
.mat-n{flex:1;min-width:0}
.mat-q{color:var(--dim);font-weight:600;font-size:12.5px}

/* Contenus */
.cont{padding:14px;min-width:0}
@media (min-width:900px){ .cont{padding:18px 22px} }
.jour{font-size:19px;font-weight:800;color:var(--marque);margin:6px 0 4px;
  padding-bottom:8px;border-bottom:1px solid var(--ligne)}
.ent-i{padding:16px 0 15px;border-bottom:1px solid var(--ligne)}
.ent-h2{display:flex;gap:11px;align-items:flex-start}
.ent-c{width:3px;align-self:stretch;min-height:34px;border-radius:2px;flex:0 0 3px}
.ent-m{font-size:13.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.ent-p{font-size:13px;color:var(--dim);margin-top:1px}
.ent-t{margin-left:auto;font-size:13px;color:var(--dim);white-space:nowrap;padding-left:10px}
.ent-ti{font-weight:700;margin:10px 0 5px}
.ent-x{color:var(--txt);opacity:.85;white-space:pre-line}
.pil{display:inline-block;margin-top:12px;padding:8px 16px;border:1px solid var(--marque);
  border-radius:20px;color:var(--marque);font-size:13.5px;font-weight:600;text-decoration:none;background:var(--carte)}

/* ── Emploi du temps ─────────────────────────────────────────────────────── */
/* Grille sur grand ecran, liste jour par jour sur telephone : une grille de six
   colonnes est illisible sur cinq pouces, une liste fait perdre la vue d'ensemble
   sur un ordinateur. Les deux rendus viennent des memes donnees. */
.edt{display:none}
.edt-m{display:block}
@media (min-width:760px){ .edt{display:block;overflow-x:auto} .edt-m{display:none} }

.edt-h{display:grid;grid-template-columns:56px repeat(5,1fr);gap:1px;margin-bottom:1px}
.edt-j{background:transparent;color:var(--txt);text-align:center;padding:7px 4px 9px;
  font-size:13px;font-weight:600;text-transform:none}
.edt-j.auj{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.edt-c{position:relative;display:grid;grid-template-columns:56px repeat(5,1fr);gap:1px}
.edt-hh{position:relative}
.edt-hl{position:absolute;left:0;right:6px;text-align:right;font-size:11.5px;color:var(--dim);
  transform:translateY(-6px)}
.edt-col{position:relative;background:var(--carte);border:1px solid var(--grille)}

.edt-li{display:none}
 /* Pas de bordure basse : elle se doublait avec la ligne horaire juste en dessous
    et avec le bord haut du creneau suivant, ce qui epaississait la grille. */
.cr{position:absolute;left:2px;right:2px;border:1px solid var(--grille);border-bottom:0;
  border-left:4px solid;border-radius:2px;padding:5px 6px;overflow:hidden}
/* Creneau sans cours : un simple aplat gris */
.cr-vide{position:absolute;left:2px;right:2px;background:var(--vide);border-radius:2px}
.cr-vide + .cr-vide{border-top:1px solid var(--carte)}
.cr{text-align:center;padding:6px 5px}
.cr-m{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.01em;
  line-height:1.2;color:var(--txt)}

.cr-s{font-size:10.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Selecteur de jour : six cibles larges, le jour courant souligne */
.sel-j{display:flex;gap:6px;margin-bottom:14px}
.sel-j a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 2px;border:1px solid var(--ligne);border-radius:9px;background:var(--carte);
  text-decoration:none;color:var(--dim);min-height:52px;justify-content:center}
.sel-j a b{font-size:15px;font-weight:800;color:var(--txt)}
.sel-j a i{font-style:normal;font-size:12px}
.sel-j a.auj{border-color:var(--marque)}
.sel-j a.on{background:var(--marque);border-color:var(--marque)}
.sel-j a.on b,.sel-j a.on i{color:#fff}

.cm{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid;
  border-radius:7px;padding:11px 13px;margin-bottom:8px}
.cm-h{display:flex;align-items:baseline;gap:10px}
.cm-m{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.cm-t{margin-left:auto;font-size:13px;color:var(--dim);white-space:nowrap}
.cm-d{font-size:12.5px;color:var(--dim);margin-top:3px}
.jour.auj{color:var(--marque)}

/* ── Communication : liste a gauche, message a droite ────────────────────── */
/* Deux volets, deux FONDS distincts : la liste sur le fond de page, le message lu
   sur une carte. Sans cette difference les deux zones se confondent et on ne sait
   plus laquelle on parcourt. La hauteur est celle de la fenetre moins les barres,
   pour que le volet droit ne s'arrete pas au milieu de l'ecran. */
.ms{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .ms{grid-template-columns:330px minmax(0,1fr);gap:18px;
    align-items:stretch;padding:18px;min-height:calc(100dvh - 132px)}
}
.ms-l{list-style:none;margin:0;padding:0;background:var(--carte);border-bottom:1px solid var(--ligne)}
@media (min-width:900px){
  .ms-l{border:1px solid var(--ligne);border-radius:10px;overflow:hidden;
    position:sticky;top:18px;align-self:start;max-height:calc(100dvh - 168px);overflow-y:auto}
  .ms-l li:last-child a{border-bottom:0}
}
.ms-l a{display:block;padding:14px 16px;text-decoration:none;border-bottom:1px solid var(--ligne);
  border-left:3px solid transparent}
.ms-l a.on{background:var(--sous);border-left-color:var(--marque)}
/* Objet a gauche, trombone a droite : on repere une piece jointe sans ouvrir. */
.ms-pj{float:right;margin-left:10px;color:var(--dim);font-size:15px}
.ms-s{display:block;font-size:14.5px;overflow-wrap:anywhere}
.ms-d{display:block;font-size:12.5px;color:var(--dim);margin-top:3px;line-height:1.45}
/* Non lu : le sujet en gras et une pastille, comme dans une messagerie */
.ms-l a.nl .ms-s{font-weight:700}
.ms-l a.nl .ms-s::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--marque);margin-right:8px;vertical-align:1px}
.ms-v{padding:18px 20px;min-width:0}
@media (min-width:900px){
  /* Le message lu est une CARTE, pas la suite de la liste. Elle occupe toute la
     hauteur disponible et respire : 34 px de marge interne, pas 20. */
  .ms-v{background:var(--carte);border:1px solid var(--ligne);border-radius:10px;
    padding:30px 34px 34px;align-self:stretch}
  .ms-v .ent-x{max-width:78ch}
}
.ms-v h2{font-size:19px;margin:10px 0 4px;overflow-wrap:anywhere}
@media (min-width:900px){ .ms-v h2{font-size:21px;margin-top:0} }
.ms-m{font-size:13px;color:var(--dim);margin-bottom:14px;line-height:1.45}
@media (min-width:900px){
  .ms-m{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--ligne)}
}
.ms-r{display:none;font-size:13.5px;font-weight:600;color:var(--marque);text-decoration:none}
/* Sur telephone on ne montre qu'un volet a la fois */
@media (max-width:899px){
  .ms.ouvert .ms-l{display:none}
  .ms:not(.ouvert) .ms-v{display:none}
  .ms-r{display:inline-block;min-height:40px;line-height:40px}
}
@media (min-width:900px){ .ms-vide{display:flex;align-items:center;justify-content:center} }

/* ── Travail a faire, dans le cahier de textes ───────────────────────────── */
.dv{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid var(--marque);
  border-radius:7px;padding:12px 14px;margin-top:10px}
.dv.fait{border-left-color:var(--dim)}
.dv-c{min-width:0}
.dv form{margin:0}
/* Ligne d'entete : la matiere a gauche, la pastille « Fait » a droite. */
.dv-m{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.dv-fb{text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:700;color:var(--v);
  background:color-mix(in srgb,var(--v) 14%,transparent);border-radius:99px;padding:2px 9px}
.dv-g{font-size:12.5px;color:var(--dim);margin-top:3px}
.dv-t{font-size:14.5px;font-weight:600;margin-top:5px;overflow-wrap:anywhere}
.dv-x{font-size:13.5px;color:var(--dim);margin-top:4px;overflow-wrap:anywhere;white-space:pre-line}
/* Piece jointe : la pastille grise de Pronote, cliquable en entier. */
.dv-pj{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:7px 11px;
  background:var(--sous);border-radius:6px;font-size:13px;color:var(--texte);text-decoration:none;
  min-height:38px;box-sizing:border-box;max-width:100%;overflow-wrap:anywhere}
/* « J'ai termine » : aligne a droite, comme dans Pronote. */
.dv-f{display:flex;justify-content:flex-end;margin-top:8px}
.dv-f button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--dim);padding:6px 0;min-height:38px}
.dv-k{width:17px;height:17px;flex:0 0 auto;border:1.5px solid var(--dim);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:#fff}
.dv-k.on{background:var(--marque);border-color:var(--marque)}
.dv.fait .dv-t{opacity:.6}
.dv-b{margin-top:12px;padding-top:10px;border-top:1px dashed var(--ligne)}
.dv-h{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}

/* Travail a faire : une fois rendu, il s'efface visuellement sans disparaitre */
.ent-i.fait{opacity:.55}
.ent-i.fait .ent-ti{text-decoration:line-through}
.ent-i form:not(.dv-f){display:inline}

/* Notes */
.tab{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed;background:var(--carte);border:1px solid var(--ligne);border-radius:8px;overflow:hidden}
.tab th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);
  padding:10px 12px;background:var(--sous);color:var(--sous-t)}
.tab td{padding:11px 12px;border-top:1px solid var(--ligne);overflow-wrap:anywhere}
.tab .mm{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;text-transform:uppercase}
.tab .cc{width:3px;height:16px;border-radius:2px;flex:0 0 3px}
.nn{font-weight:800;white-space:nowrap;font-size:16px}
.nn span{font-weight:500;color:var(--dim);font-size:12.5px}
.nn.bien{color:var(--v)} .nn.moyen{color:var(--o)} .nn.faible{color:var(--r)}

/* ── Bulletin ────────────────────────────────────────────────────────────── */
/* En-tete : l'eleve et la periode, comme sur un bulletin papier */
.bu-e{display:flex;align-items:center;gap:12px;background:var(--sous);border:1px solid var(--ligne);
  border-radius:8px 8px 0 0;padding:13px 16px;border-bottom:0}
.bu-e b{font-size:16px;display:block}
.bu-e i{font-style:normal;font-size:13px;color:var(--dim)}
.bu-p{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--sous-t)}
.bu-t{border-radius:0 0 8px 8px}
.bu-pr{display:block;font-size:12px;color:var(--dim);margin-top:2px;text-transform:none;font-weight:400}
/* Appreciation : une ligne pleine largeur sous la matiere */
.bu-a td{padding:0 12px 12px;border-top:0;font-size:13.5px;color:var(--dim);font-style:italic}
.bu-t tfoot td{border-top:2px solid var(--ligne);font-size:15px;background:var(--sous)}
.bu-g{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;padding:14px 16px;margin-top:14px}
.bu-g span{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.bu-g p{margin:6px 0 0;font-size:14.5px}
.tab td.dim{color:var(--dim)}
/* Colonnes secondaires : masquees sur telephone, ou la place manque.
   Le rang, lui, reste : c'est l'information que le parent cherche en premier. */
@media (max-width:600px){ .c-x{display:none} }
.nowrap{white-space:nowrap}
.rg{font-weight:700;white-space:nowrap}
.rg span{font-weight:400;color:var(--dim);font-size:12.5px}

/* Vie scolaire */
.abs{list-style:none;margin:0;padding:0}
.abs li{background:var(--carte);border:1px solid var(--ligne);border-left:3px solid var(--r);
  border-radius:8px;padding:12px 14px;margin-bottom:9px}
.abs li.ok{border-left-color:var(--v)}
.abs b{display:block}
.abs i{font-style:normal;font-size:13px;color:var(--dim)}
.eti{display:inline-block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:3px 8px;border-radius:4px;background:#fee2e2;color:#991b1b;margin-left:8px}
.eti.ok{background:#dcfce7;color:#166534}

/* Saisie professeur */
.frm{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;padding:16px;margin-bottom:14px}
.frm label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--dim);margin:4px 0 6px}
.frm input,.frm textarea{width:100%;padding:11px 12px;border:1px solid var(--ligne);border-radius:6px;
  font:inherit;margin-bottom:12px;background:var(--carte);color:var(--txt)}
.frm input:focus,.frm textarea:focus{outline:0;border-color:var(--marque)}
/* Case a cocher : libelle en clair a droite, pas en petites capitales. */
.frm label.ck{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
  font-size:14px;font-weight:500;min-height:40px}
.frm label.ck input{width:auto;margin:0;accent-color:var(--marque)}
.el{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--ligne)}
.el>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.el input{width:74px;margin:0;text-align:center;font-weight:700;padding:11px 6px}
.el button{border:1px solid var(--r);background:#fff;color:var(--r);font:inherit;font-size:12.5px;
  font-weight:700;padding:10px 12px;border-radius:6px;cursor:pointer}
.val{width:100%;border:0;background:var(--marque);color:#fff;font:inherit;font-size:15px;font-weight:700;
  padding:14px;border-radius:6px;cursor:pointer;margin-top:12px}

/* Annuaire */
.acc{max-width:520px;margin:0 auto;padding:30px 16px}
.acc h1{font-size:23px;margin:0 0 6px;letter-spacing:-.01em}
.acc p{color:var(--dim);margin:0 0 18px}
.acc-q{width:100%;padding:14px 15px;font:inherit;font-size:16px;border:1px solid var(--ligne);
  border-radius:8px;background:var(--carte)}
.acc-q:focus{outline:0;border-color:var(--marque)}
.acc-r{display:grid;gap:8px;margin-top:14px}
.acc-i{display:flex;align-items:center;gap:12px;background:var(--carte);border:1px solid var(--ligne);
  border-radius:8px;padding:13px 15px;text-decoration:none}
.acc-p{width:5px;height:32px;border-radius:3px;flex:0 0 5px;background:var(--marque)}
.acc-i b{display:block;font-size:15px}
.acc-i i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:1px}
.vide{color:var(--dim);text-align:center;padding:30px 12px}
.note{color:var(--dim);font-size:12px;text-align:center;padding:14px}

/* ── Mes donnees ─────────────────────────────────────────────────────────── */
.prof{max-width:620px}
.prof-a{width:104px;height:104px;border-radius:50%;background:var(--sous);color:var(--marque);
  display:flex;align-items:center;justify-content:center;margin:4px 0 18px}
.prof-a svg{width:70px;height:70px}
.prof-h{font-size:15px;margin:20px 0 9px;color:var(--txt)}
.prof-h:first-of-type{margin-top:0}
.tab td.dim{color:var(--dim)}

/* ── Bibliotheque de cours ───────────────────────────────────────────────── */
.res{list-style:none;margin:0 0 16px;padding:0}
.res li{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--carte);border:1px solid var(--ligne);
  border-left:4px solid var(--dim);border-radius:7px;padding:12px 14px;margin-bottom:8px}
.res-p{width:26px;flex:0 0 26px;text-align:center;font-size:15px;color:var(--dim)}
.res-t{flex:1;min-width:0;font-weight:600}
.res-t i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);font-weight:400;margin-top:2px}
.res .pil{margin-top:0;flex:0 0 auto}

/* ── Accueil : blocs ─────────────────────────────────────────────────────── */
.acc-g{display:grid;gap:14px}
@media (min-width:900px){ .acc-g{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start} }
.w{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;overflow:hidden}
.w-h{display:flex;align-items:center;gap:10px;padding:6px 15px;border-bottom:1px solid var(--ligne);
  background:var(--sous);min-height:46px}
.w-h b{font-size:14.5px;color:var(--sous-t)}
.w-h a{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--marque);text-decoration:none;
  display:flex;align-items:center;min-height:40px;padding:0 4px;margin-right:-4px}
.w-l{list-style:none;margin:0;padding:0}
.w-l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:11px 15px;
  border-left:4px solid var(--dim);border-bottom:1px solid var(--ligne)}
.w-l li:last-child{border-bottom:0}
.w-t{grid-column:1;grid-row:1/3;align-self:center;font-size:13px;font-weight:700;color:var(--dim);white-space:nowrap}
/* Toujours en colonne 2 : sans cette contrainte, un bloc sans horaire voit son
   titre tomber en colonne 1 et la description se coller a droite. */
.w-m{grid-column:2;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  overflow-wrap:anywhere}
.w-d{grid-column:2;font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
.w-v{color:var(--dim);padding:18px 15px;margin:0;font-size:13.5px}
/* Sous-titre d'echeance dans le bloc « Travail a faire » */
.w-j{font-size:12.5px;font-weight:700;color:var(--sous-t);background:var(--sous);
  padding:7px 15px;border-bottom:1px solid var(--ligne)}
/* Case a cocher : un bouton, donc il fonctionne sans JavaScript */
.w-c{grid-row:1/3;align-self:center;margin:0}
.w-c button{border:0;background:none;font-size:21px;line-height:1;color:var(--dim);cursor:pointer;
  min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center;margin-left:-8px}
.w-c button:hover{color:var(--marque)}
.w-l li .nn{font-size:14px}

/* Agenda : pastille date a gauche, comme un post-it */
.ag{list-style:none;margin:0;padding:0}
.ag li{display:flex;gap:13px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--ligne)}
.ag li:last-child{border-bottom:0}
.ag-d{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:46px;flex:0 0 46px;padding:5px 0;border-radius:6px;background:var(--sous);color:var(--sous-t)}
.ag-d b{font-size:17px;font-weight:800;line-height:1}
.ag-d i{font-style:normal;font-size:11px;margin-top:1px}
.ag li>span:last-child b{display:block;font-size:14px}
.ag li>span:last-child i{display:block;font-style:normal;font-size:12.5px;color:var(--dim);margin-top:1px}

/* ── Rubriques a venir ───────────────────────────────────────────────────── */
.avenir{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;padding:20px}
.avenir b{display:block;font-size:16px;margin-bottom:6px}
.avenir p{color:var(--dim);margin:0 0 10px}
.avenir-n{font-size:13px;border-top:1px solid var(--ligne);padding-top:12px;margin-top:4px!important}

/* ── Confort tactile sur telephone ───────────────────────────────────────── */
@media (max-width:759px){
  .mat-i{padding:12px 14px;font-size:13.5px}
  .pil{padding:11px 18px;font-size:14px}
  .tab td,.tab th{padding:13px 12px}
  .el{padding:12px 0}
  .el input{width:80px;padding:13px 6px;font-size:16px}   /* 16px : evite le zoom iOS */
  .el button{padding:12px 14px}
  .frm input,.frm textarea{font-size:16px;padding:13px}
  .acc-q{font-size:16px}
  .cont{padding:12px}
  .jour{font-size:17px}
}

@media (prefers-color-scheme: dark){
  .gr-d8 input{color-scheme:dark}
  .gr-d8 input::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.6)}
  :root{--txt:#e6eaf2;--dim:#96a0b0;--ligne:#2a3140;--fond:#0e1219;--carte:#161c26;
        --nav:#1d232e;--nav-h:#28303d;--sous:#1b2430;--sous-t:#8fc4f0;
        --bandeau:#39424f;--vide:#1d242f;--grille:#2f3846;--trait:#232b37;
        --sso:#4a5a72}
  .pil{background:var(--carte)}
  .el button{background:var(--carte)}
  .eti{background:rgba(220,38,38,.2);color:#fca5a5}
  .eti.ok{background:rgba(22,163,74,.2);color:#86efac}
}

/* ── Cours annule (absence d'un professeur) ──────────────────────────────── */
/* Le bloc reste a sa place : l'eleve doit voir le trou dans sa journee. Hachures
   pour qu'on le distingue d'un creneau libre meme sans lire le libelle. */
.cr-off{background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,
  var(--grille) 5px,var(--grille) 10px)!important;border-style:dashed}
.cr-off .cr-m{text-decoration:line-through;color:var(--dim)}
.cr-x{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--o);margin-top:2px}
.cm-off .cm-m{text-decoration:line-through}
.cm-x{font-size:12.5px;font-weight:700;color:var(--o);margin-top:3px}
.w-off .w-m{text-decoration:line-through;color:var(--dim)}
.w-off .w-d{color:var(--o);font-weight:600}

/* Actions d'un devoir : « Voir le cours » a gauche, « J'ai termine » a droite. */
.dv-a{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px}
.dv-a .dv-f{margin-top:0;flex:1}
.dv-fb.non{color:var(--dim);background:var(--sous)}

/* ── Profil : photo et deconnexion ───────────────────────────────────────── */
.b-av img,.prof-a img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
/* La photo se change en cliquant l'avatar. Un crayon discret pose dessus est le
   seul indice necessaire : le formulaire complet — libelle, contraintes, bouton —
   prenait un demi-ecran pour une action qu'on fait une fois. */
.prof-a{position:relative}
.ph{margin:0}
label.prof-a{cursor:pointer}
.ph-cr{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:50%;
  background:var(--marque);color:#fff;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--fond)}
.ph-cr svg{width:15px;height:15px}
label.prof-a:hover .ph-cr,label.prof-a:focus-within .ph-cr{filter:brightness(1.15)}
/* Le champ reste focalisable au clavier, mais ne prend aucune place. */
.ph-f{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ph-f:focus-visible+.ph-env,label.prof-a:focus-within{outline:2px solid var(--marque);outline-offset:3px}
/* Retrait : un lien discret, pas un second bouton plein. */
.ph-x{margin:-10px 0 16px}
.ph-x button{border:0;background:none;padding:6px 0;min-height:38px;cursor:pointer;
  font:inherit;font-size:13px;color:var(--dim);text-decoration:underline;text-underline-offset:3px}
/* Bouton secondaire : meme gabarit, sans le poids visuel d'une action principale. */
.val.sec{background:none;border:1px solid var(--ligne);color:var(--texte)}
.msg{margin:0 0 14px;padding:11px 13px;border-radius:7px;font-size:13.5px;
  background:color-mix(in srgb,var(--r) 12%,transparent);color:var(--r)}
.msg.ok{background:color-mix(in srgb,var(--v) 12%,transparent);color:var(--v)}
.dx{margin-top:14px}
/* Remplacement : le cours a bien lieu — on l'annonce sans l'alarmisme de l'annulation. */
.cr-x.rp,.cm-x.rp{color:var(--marque)}
.w-rp{color:var(--marque);font-weight:700}

/* ── Connexion ───────────────────────────────────────────────────────────── */
/* Structure reprise de l'ecran d'identification scolaire francais — onglet,
   champs obligatoires, libelle et lien « oublie ? » sur la meme ligne, champs
   soulignes — mais AUX COULEURS DE L'ENT. C'est la meme application : l'eleve ne
   doit pas avoir l'impression de changer d'outil entre la connexion et son espace,
   ni en clair ni en sombre. */
.cnx-b{display:flex;align-items:center;justify-content:center;min-height:100dvh;
  padding:24px 16px}
.cnx{width:100%;max-width:540px}
/* Repere en haut a gauche, hors de la carte. */
.cnx-r{display:flex;align-items:center;gap:10px;color:var(--txt);font-size:15px;margin-bottom:16px}
.cnx-r svg{width:34px;height:26px;flex:0 0 auto;color:var(--marque)}
/* Onglet : il partage le fond de la carte et s'y raccorde, comme un dossier. */
.cnx-o{display:inline-block;background:var(--carte);color:var(--marque);
  font-size:15px;font-weight:700;padding:11px 22px;border:1px solid var(--ligne);
  border-bottom:0;border-top:3px solid var(--marque);border-radius:6px 6px 0 0}
.cnx-c{background:var(--carte);border:1px solid var(--ligne);
  border-radius:0 8px 8px 8px;padding:22px 20px;margin-top:-1px}
.cnx-t{font-size:19px;margin:0 0 4px;color:var(--txt);overflow-wrap:anywhere}
.cnx-s{font-size:14px;color:var(--dim);margin:12px 0 0;line-height:1.5}
.cnx-s code{background:var(--sous);color:var(--txt);padding:2px 6px;border-radius:4px;font-size:13px}
/* Mention des champs obligatoires, alignee a droite comme sur la maquette. */
.cnx-ob{font-size:13px;color:var(--dim);text-align:right;margin:0 0 6px}
.cnx-ob b,.cnx-l b{color:var(--r);font-weight:700;margin-left:2px}
/* Le libelle et son lien « oublie ? » partagent la ligne. Ils passent l'un sous
   l'autre sur les ecrans etroits plutot que de se chevaucher. */
.cnx-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-top:16px}
.cnx-l label{font-size:15px;color:var(--txt)}
.cnx-l a{font-size:13.5px;color:var(--marque);text-decoration:underline;
  text-underline-offset:3px;min-height:38px;display:inline-flex;align-items:center}
/* Champ souligne plutot qu'encadre : le trait epais porte le focus. */
.cnx input{width:100%;box-sizing:border-box;margin-top:6px;padding:13px 14px;
  font:inherit;font-size:16px;color:var(--txt);background:var(--sous);
  border:0;border-bottom:2px solid var(--dim);border-radius:6px 6px 0 0}
.cnx input:focus{outline:0;border-bottom-color:var(--marque);
  background:color-mix(in srgb,var(--marque) 10%,var(--sous))}
/* Le mot de passe reserve la place du bouton d'affichage. */
.cnx-mp{position:relative}
.cnx-mp input{padding-right:52px}
.cnx-oeil{position:absolute;right:4px;bottom:3px;width:44px;height:44px;border:0;
  background:none;color:var(--dim);cursor:pointer;display:flex;align-items:center;
  justify-content:center;padding:0}
.cnx-oeil svg{width:21px;height:21px}
/* Le trait oblique n'apparait que quand le mot de passe est masque. */
.cnx-oeil .barre{display:inline}
.cnx-oeil.on{color:var(--marque)}
.cnx-oeil.on .barre{display:none}
/* Bouton centre et non pleine largeur, comme sur la maquette : il se lit comme
   une action, pas comme une barre. */
.cnx .val{display:block;width:auto;margin:26px auto 0;padding:14px 44px;
  text-align:center;text-decoration:none;line-height:normal}
.cnx .msg{margin:0 0 14px}

/* ── Fiches eleves, cote personnel ───────────────────────────────────────── */
/* Mobile d'abord : une fiche par ligne, le bouton PLEINE LARGEUR sous les
   informations. Au-dela de 600 px il repasse a droite, sur la meme ligne. */
.fic{list-style:none;margin:0;padding:0}
.fic li{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;
  padding:12px 14px;margin-bottom:8px}
.fic-i{min-width:0}
.fic-i b{display:block;font-size:15px;overflow-wrap:anywhere}
.fic-i span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.fic-id i{font-style:normal;color:var(--o)}
.fic-id i.exp{color:var(--r);font-weight:700}
.fic form{margin:10px 0 0}
.fic .pil{display:block;width:100%;text-align:center}
@media (min-width:600px){
  .fic li{display:flex;align-items:center;justify-content:space-between;gap:14px}
  .fic form{margin:0;flex:0 0 auto}
  .fic .pil{width:auto}
}
/* Recherche : le champ prend la place disponible, le bouton reste tapable. */
.rch{display:flex;gap:8px;align-items:center;margin:0;flex:1 1 220px;min-width:0}
.rch input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--ligne);border-radius:6px;
  background:var(--carte);color:var(--txt);font:inherit;font-size:14px;min-height:40px}
.rch button{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--marque);
  border-radius:6px;background:none;color:var(--marque);font:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer}
/* Le code provisoire : gros, selectionnable, impossible a rater. */
.pin-b{display:block}
.pin-b span{display:block;font-weight:400;margin-top:4px;line-height:1.45}
.pin{font-size:26px;letter-spacing:.22em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  user-select:all}

/* Acces IA gratuit : dans le PIED du tiroir, pas sur le tableau de bord.
   L'accueil de l'eleve reste scolaire ; l'offre gratuite vit sur le portail, ou
   elle sert a faire entrer les gens. Ici c'est un raccourci, pas une reclame. */
.tr-ia{display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 12px;align-items:center;
  margin-top:14px;padding:14px 18px;border-top:1px solid var(--ligne);
  text-decoration:none;color:var(--txt);min-height:44px}
.tr-ia svg{grid-row:1/3;width:20px;height:20px;color:var(--marque)}
.tr-ia span{font-size:14.5px;font-weight:600}
.tr-ia i{font-style:normal;font-size:12px;color:var(--dim)}

/* Pastille de matiere dans les fiches classe et enseignant : un liseré de la
   couleur de la matiere suffit, on lit la liste sans la decoder. */
.fic-i .pu,.pu{display:inline-block;margin:3px 6px 0 0;padding:2px 8px;border:1px solid;
  border-left-width:3px;border-radius:4px;font-size:12px;color:var(--txt)}

/* ── Administration Vie scolaire ──────────────────────────────────────────── */
/* Tableau : il defile DANS son cadre plutot que d'elargir la page. Sans ce
   conteneur, cinq colonnes sur un telephone poussent tout l'ecran de cote. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.tb-e,.tb-a{min-width:520px}
.tb-e th,.tb-a th{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);text-align:left;padding:10px 12px;background:var(--sous)}
.tb-e td,.tb-a td{padding:11px 12px;border-top:1px solid var(--ligne);vertical-align:middle;
  overflow-wrap:anywhere}
.tb-e b,.tb-a b{font-size:14.5px}
.tb-cl{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:2px}
.tb-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.c-a{text-align:right}
.c-a form{margin:0;display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Plusieurs actions sur une meme ligne : elles se rangent l'une sous l'autre,
   alignees a droite, au lieu de sortir du tableau. */
.c-a form+form{margin-top:6px}
.tb-e .c-a{min-width:210px}
@media (min-width:1100px){
  .tb-e .c-a{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
  .tb-e .c-a form+form{margin-top:0}
}
/* La ligne qui vient de recevoir un code, pour la retrouver d'un coup d'oeil. */
tr.sur td{background:color-mix(in srgb,var(--v) 10%,transparent)}
/* Une absence non justifiee se repere sans lire : un liseré rouge sur la ligne. */
tr.nj td:first-child{box-shadow:inset 3px 0 0 var(--r)}
/* Etats, en pastille : trois mots suffisent, la couleur porte le reste. */
.st{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;
  white-space:nowrap}
.st-ok{color:var(--v);background:color-mix(in srgb,var(--v) 14%,transparent)}
.st-prov{color:var(--o);background:color-mix(in srgb,var(--o) 14%,transparent)}
.st-exp{color:var(--r);background:color-mix(in srgb,var(--r) 14%,transparent)}
.st-non{color:var(--dim);background:var(--sous)}
/* Justification : le motif se choisit dans une liste fermee, jamais en texte libre. */
.c-a form.jf{flex-wrap:nowrap}
.jf select{padding:7px 8px;min-height:36px;border:1px solid var(--ligne);border-radius:6px;
  background:var(--carte);color:var(--txt);font:inherit;font-size:13px;
  flex:0 1 auto;min-width:0;max-width:118px}
.jf .pil{flex:0 0 auto;padding:8px 12px}
@media (max-width:600px){ .c-a form.jf{flex-wrap:wrap} }
.pil.sec{border-color:var(--ligne);color:var(--dim)}
.act{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;padding:14px;margin-bottom:14px}
.act .val{margin-top:0;width:auto;padding:13px 22px}
/* Diffusion d'une information : repliee par defaut, elle ne mange pas l'ecran. */
.dif{background:var(--carte);border:1px solid var(--ligne);border-radius:8px;margin-bottom:14px}
.dif summary{padding:14px 16px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--marque);
  min-height:44px;display:flex;align-items:center}
.dif .frm{border:0;border-top:1px solid var(--ligne);border-radius:0;margin:0}
.dif select{width:100%;padding:11px 12px;border:1px solid var(--ligne);border-radius:6px;
  background:var(--fond);color:var(--txt);font:inherit;font-size:15px;min-height:44px}

/* Choix du destinataire. Deux niveaux : la PORTEE — quatre choix exclusifs —
   puis le NOM.
   Les quatre portees etaient collees dans un seul cadre, sans point radio : on
   lisait quatre paragraphes, pas quatre options a choisir. Elles redeviennent
   quatre cartes distinctes, espacees, chacune avec sa pastille de selection :
   c'est la forme que tout le monde reconnait comme « choisissez-en une ». */
.cib{border:0;border-top:1px solid var(--ligne);margin:0;padding:14px 16px 0}
.cib legend{font-size:12.5px;font-weight:700;color:var(--dim);text-transform:uppercase;
  letter-spacing:.04em;padding:0}
.cib-t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:10px 0 14px}
.cib-o{display:grid;grid-template-columns:15px minmax(0,1fr);gap:9px;align-items:start;
  padding:9px 11px;min-height:48px;cursor:pointer;position:relative;
  border:1px solid var(--grille);border-radius:3px;background:var(--carte)}
/* La pastille est dessinee, pas native : le rond du navigateur ne se colore pas
   avec la carte et sautait d'un systeme a l'autre. Elle reste un vrai bouton
   radio dans le DOM, pour le clavier et pour le formulaire sans JavaScript. */
.cib-o input{position:absolute;opacity:0;width:1px;height:1px}
.cib-o::before{content:'';width:15px;height:15px;margin-top:1px;border-radius:50%;
  border:2px solid var(--grille);background:var(--carte);box-sizing:border-box}
.cib-o:has(input:checked)::before{border-color:#fff;background:#fff;
  box-shadow:inset 0 0 0 3px var(--marque)}
/* `.frm label` met tout en majuscules et en bloc : dans une carte, il faut
   reprendre la main, sinon le titre et le sous-titre se collent sur une ligne. */
.frm .cib-o,.frm .chx-i{text-transform:none;letter-spacing:normal;font-weight:400;margin:0}
/* `.frm label{display:block}` est plus specifique que `.cib-o` : sans cette
   reprise, la carte restait en flux et la pastille dessinee s'ecrasait en trait
   vertical de quelques pixels. C'est exactement ce qui la rendait illisible. */
.frm .cib-o{display:grid;grid-template-columns:15px minmax(0,1fr);gap:9px;align-items:start}
.cib-o > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.cib-o b{display:block;font-size:12.5px;font-weight:700;line-height:1.2}
.cib-o i{display:block;font-size:11px;font-style:normal;color:var(--dim);line-height:1.25}
.cib-o:hover{border-color:var(--marque);background:var(--sous)}
.cib-o:has(input:checked){background:var(--marque);border-color:var(--marque)}
.cib-o:has(input:checked) b{color:#fff}
.cib-o:has(input:checked) i{color:rgba(255,255,255,.85)}
.cib-o:has(input:focus-visible){outline:2px solid var(--marque);outline-offset:2px}
.cib-p{margin-bottom:12px}
.cib-p > label,.cib-p > .frm-l{display:block;font-size:12px;font-weight:700;
  color:var(--dim);text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px}

/* Pastilles de noms : classes, professeurs, eleves. Elles tiennent toutes a
   l'ecran, donc le choix se fait en une lecture au lieu d'un defilement. */
.chx{display:flex;flex-wrap:wrap;gap:6px}
.chx-i{display:inline-flex;align-items:center;cursor:pointer;position:relative;margin:0}
.chx-i input{position:absolute;opacity:0;width:1px;height:1px}
.chx-i > span{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
  border:1px solid var(--grille);border-radius:3px;background:var(--carte);
  font-size:12px;font-weight:600;color:var(--txt);line-height:1.2;white-space:nowrap}
.chx-i > span i{font-style:normal;font-size:10.5px;font-weight:700;color:var(--dim);
  background:var(--sous);border-radius:2px;padding:1px 5px}
.chx-i:hover > span{background:var(--sous);border-color:var(--marque)}
.chx-i input:checked + span{background:var(--marque);border-color:var(--marque);color:#fff}
.chx-i input:checked + span i{background:rgba(255,255,255,.22);color:#fff}
.chx-i input:focus-visible + span{outline:2px solid var(--marque);outline-offset:1px}
/* Les deux longues listes — 252 eleves, 21 professeurs — ne peuvent pas rester
   depliees : elles repousseraient l'objet et le message hors de l'ecran. Elles
   deviennent un menu qui s'ouvre. <details> se replie sans une ligne de script,
   et le resume garde sous les yeux le nom du destinataire, menu ferme. */
.dd{border:1px solid var(--grille);border-radius:3px;background:var(--carte)}
.dd summary{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  list-style:none;min-height:32px}
.dd summary::-webkit-details-marker{display:none}
.dd summary::after{content:'';margin-left:auto;flex:0 0 auto;width:7px;height:7px;
  border-right:2px solid var(--dim);border-bottom:2px solid var(--dim);
  transform:rotate(45deg) translate(-2px,-2px)}
.dd[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.dd summary b{font-size:12.5px;font-weight:700;color:var(--txt)}
.dd summary i{font-size:11.5px;font-style:normal;color:var(--dim)}
.dd[open] summary{border-bottom:1px solid var(--ligne);background:var(--sous)}
.dd summary:hover{background:var(--sous)}
.dd-p{padding:8px}
.frm .dd-q,.dd-q{width:100%;box-sizing:border-box;margin:0 0 6px;padding:6px 9px;
  min-height:0;height:30px;border:1px solid var(--grille);border-radius:3px;
  background:var(--fond);color:var(--txt);font:inherit;font-size:12.5px}
/* Trois lignes visibles, pas dix. Un menu deroule qui couvre la moitie de la
   fenetre cache le formulaire qu'on est en train de remplir ; et quand un champ
   de filtre est la, on tape trois lettres au lieu de faire defiler. Le cadre
   defile pour le reste, et la quatrieme ligne coupee dit qu'il y en a plus. */
.dd-l{max-height:84px;overflow-y:auto;border:1px solid var(--ligne);border-radius:3px;
  background:var(--fond)}
/* Sans champ de filtre, on montre cinq lignes : la regle des trois lignes vaut
   quand on peut taper pour reduire. Neuf classes se parcourent a l'oeil. */
.dd-l5{max-height:145px}
/* Le meme menu dans une barre de filtres : largeur fixe, pour ne pas sauter
   quand le nom de la classe change, et le panneau flotte au-dessus de la grille
   plutot que de la pousser vers le bas. */
.dd-cls{position:relative;flex:0 0 auto;min-width:210px;background:var(--carte)}
.dd-cls summary{padding:5px 9px;min-height:28px}
.dd-cls summary b{font-size:12px}
.dd-cls summary i{font-size:11px}
.dd-cls .dd-p{position:absolute;z-index:40;left:0;top:100%;padding:6px;
  min-width:100%;width:max-content;max-width:340px;box-sizing:border-box;
  background:var(--carte);border:1px solid var(--grille);border-top:0;
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.dd-cls .dd-i i.dd-x{color:var(--marque);font-weight:700}
.dd-cls .dd-i:has(input:checked) i.dd-x{color:#fff}
.dd-cls[open] summary{border-bottom:0}
.dd-i,.frm .dd-i{display:flex;align-items:baseline;gap:8px;margin:0;padding:5px 9px;
  cursor:pointer;position:relative;border-bottom:1px solid var(--ligne);
  text-transform:none;letter-spacing:normal;font-weight:400}
.dd-i:last-child{border-bottom:0}
.dd-i input{position:absolute;opacity:0;width:1px;height:1px}
.dd-i b{font-size:12.5px;font-weight:600;color:var(--txt)}
.dd-i i{margin-left:auto;font-size:11px;font-style:normal;color:var(--dim);white-space:nowrap}
.dd-i:hover{background:var(--sous)}
.dd-i:has(input:checked){background:var(--marque)}
.dd-i:has(input:checked) b,.dd-i:has(input:checked) i{color:#fff}
.dd-i:has(input:focus-visible){outline:2px solid var(--marque);outline-offset:-2px}

/* Rubrique seule sur sa ligne, piece jointe apres le message : on ecrit d'abord,
   on joint ensuite. */
.frm-r{margin-bottom:10px}
.frm-pj{margin-top:12px}
.frm-pj .note{text-align:left;padding:0;margin:4px 0 0}
.cib-p .note{text-align:left;padding:0;margin:5px 0 0;font-size:11.5px}

/* Alerte d'absence non justifiee : elle suit l'eleve sur tous ses ecrans. */
.al{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;
  background:var(--r);color:#fff}
.al b{font-size:14.5px}
.al span{font-size:13px;opacity:.92;flex:1 1 220px}
.al a{color:#fff;font-weight:700;font-size:13.5px;text-decoration:underline;
  text-underline-offset:3px;min-height:38px;display:inline-flex;align-items:center}

/* ── Feuille d'identifiants a imprimer ────────────────────────────────────── */
.imp-b{padding:18px;background:var(--fond)}
.imp-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:10px}
.imp-h b{display:block;font-size:17px;color:var(--marque)}
.imp-h span{font-size:13px;color:var(--dim)}
.imp-a{display:flex;gap:10px;align-items:center}
.imp-a .val{margin:0;width:auto;padding:12px 22px}
.imp-w{margin:0 0 16px;font-size:13px;color:var(--r);font-weight:600}
.imp-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.imp-c{border:1px dashed var(--dim);border-radius:8px;padding:13px 15px;background:var(--carte);
  break-inside:avoid}
.imp-e{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim)}
.imp-n{font-size:15.5px;font-weight:700;margin:3px 0 9px;overflow-wrap:anywhere}
.imp-c dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px;align-items:baseline}
.imp-c dt{font-size:12px;color:var(--dim)}
.imp-c dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
  overflow-wrap:anywhere}
.imp-p{font-size:19px!important;font-weight:700;letter-spacing:.16em}
.imp-f{margin-top:9px;font-size:11px;color:var(--dim)}
/* A l'impression : sur blanc, sans les boutons, quatre vignettes par ligne. */
@media print{
  .imp-b{background:#fff;color:#000;padding:0}
  .imp-a{display:none}
  .imp-h{border-bottom:1px solid #000;padding-bottom:8px}
  .imp-h b,.imp-h span,.imp-e,.imp-c dt,.imp-f{color:#000}
  .imp-w{color:#000}
  .imp-c{background:#fff;border-color:#666}
  .imp-g{grid-template-columns:repeat(3,1fr)}
}
/* Ecran « deja connecte » : deux actions de meme poids, l'une sous l'autre. */
.cnx-c form{margin:10px 0 0}
.cnx-c .val+form .val{margin-top:0}

/* ── Multi-profil : les comptes deja utilises sur cet appareil ────────────── */
/* Un telephone de famille sert a plusieurs enfants. Retaper l'identifiant a
   chaque bascule est le genre de friction qui fait abandonner l'outil. */
.pf{margin-top:22px;padding-top:18px;border-top:1px solid var(--ligne)}
.pf-t{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);margin-bottom:10px}
.pf-l{display:flex;align-items:stretch;gap:8px;margin-bottom:8px}
.pf-b{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 13px;
  background:var(--sous);border:1px solid var(--ligne);border-radius:8px;
  text-decoration:none;color:var(--txt);min-height:44px}
.pf-b b{display:block;font-size:14.5px;overflow-wrap:anywhere}
.pf-b i{display:block;font-style:normal;font-size:12px;color:var(--dim);overflow-wrap:anywhere}
/* Pastille d'initiales : elle distingue deux enfants sans lire le nom. */
.pf-av{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--marque);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;letter-spacing:.02em}
/* Retrait d'un profil : discret, mais atteignable au doigt. */
.pf-x{flex:0 0 auto;width:44px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--ligne);border-radius:8px;color:var(--dim);text-decoration:none;
  font-size:19px;line-height:1}
/* Profil deja choisi, en tete du formulaire : on ne saisit plus que le code. */
.pf-a{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 13px;margin-bottom:16px;
  background:var(--sous);border:1px solid var(--ligne);border-radius:8px}
.pf-a b{display:block;font-size:14.5px}
.pf-a i{display:block;font-style:normal;font-size:12px;color:var(--dim)}
.pf-a a{margin-left:auto;font-size:13px;color:var(--marque);text-decoration:underline;
  text-underline-offset:3px;min-height:38px;display:inline-flex;align-items:center}

/* ── Tableau de bord de la vie scolaire ───────────────────────────────────── */
/* Quatre compteurs, cliquables. Un chiffre sans action est une decoration :
   chacun mene a l'ecran ou l'on traite ce qu'il annonce. */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kp{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:16px 14px;
  min-height:88px;background:var(--carte);border:1px solid var(--ligne);
  border-left:3px solid var(--marque);border-radius:8px;text-decoration:none;color:var(--txt)}
.kp-n{font-size:30px;font-weight:700;line-height:1;color:var(--marque)}
.kp-l{font-size:12.5px;color:var(--dim);overflow-wrap:anywhere}
/* Ce qui reste a traiter passe en rouge : c'est ce qu'on vient chercher. */
.kp.urgent{border-left-color:var(--r)}
.kp.urgent .kp-n{color:var(--r)}
/* Destinataire d'une information, cote personnel : qui l'a recue. */
.ms-c{display:inline-block;margin-top:4px;padding:2px 8px;border-radius:99px;
  background:var(--sous);color:var(--marque);font-size:12px;font-weight:700}
/* Champ fichier dans un formulaire : meme gabarit que les autres controles. */
.frm input[type=file]{padding:10px 12px;font-size:14px}
.frm input[type=file]::file-selector-button{margin-right:10px;padding:8px 12px;min-height:36px;
  border:1px solid var(--marque);border-radius:6px;background:none;color:var(--marque);
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}

/* ── Filtres du tableau des absences ──────────────────────────────────────── */
/* Une ligne sur ordinateur, empiles sur telephone. Le champ de recherche prend
   la place restante : c'est celui qu'on utilise le plus. */
.flt{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.flt select,.flt input{padding:10px 12px;min-height:42px;border:1px solid var(--ligne);
  border-radius:6px;background:var(--carte);color:var(--txt);font:inherit;font-size:14px}
.flt select{flex:0 0 auto;max-width:190px}
.flt input{flex:1 1 180px;min-width:0}
.flt-n{flex:0 0 auto;font-size:12.5px;color:var(--dim)}
@media (max-width:600px){
  .flt{flex-direction:column;align-items:stretch}
  .flt select,.flt input{max-width:none;width:100%}
  .flt-n{text-align:right}
}

/* ── GRILLE D'APPEL — poste de travail de la vie scolaire ─────────────────── */
/* Dense a dessein : un agent regarde cet ecran toute la journee sur un moniteur
   de bureau. Chaque ligne qu'il doit faire defiler est une absence qu'il ne voit
   pas. Ce parti pris s'arrete ICI — l'espace eleve reste sobre et tactile, il se
   consulte sur un telephone.
   Sous 1000 px les trois colonnes s'empilent : dense ne doit pas vouloir dire
   inutilisable si un agent ouvre la page depuis son telephone. */
.gr{display:grid;grid-template-columns:15% minmax(0,65%) 20%;gap:0;
  min-height:calc(100dvh - 118px);font-size:12px}
@media (max-width:1000px){ .gr{grid-template-columns:minmax(0,1fr)} }

/* Colonne gauche : les classes, compactes, avec leur effectif. */
.gr-cl{border-right:1px solid var(--grille);background:var(--carte);overflow-y:auto}
.gr-cli{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:6px 10px;border-bottom:1px solid var(--ligne);text-decoration:none;
  color:var(--txt);font-size:12px;line-height:1.3}
.gr-cli i{font-style:normal;font-size:11px;color:var(--dim);
  background:var(--sous);border-radius:3px;padding:0 5px;min-width:14px;text-align:center}
.gr-cli i.gr-i-on{background:var(--r);color:#fff;font-weight:700}
.gr-cli.on i.gr-i-on{background:var(--r);color:#fff}
.gr-cli:hover{background:var(--sous)}
.gr-cli.on{background:color-mix(in srgb,var(--marque) 13%,var(--carte));color:var(--txt);
  font-weight:700;box-shadow:inset 3px 0 0 var(--marque)}
.gr-cli.on i{background:var(--marque);color:#fff}

/* Colonne centrale : la grille. Bordures fines, pas d'ombre, pas d'arrondi. */
.gr-g{overflow:auto;padding:0 0 8px}
.gr-t{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed}
.gr-t th{position:sticky;top:0;z-index:1;background:var(--pn-th);color:var(--pn-tht);
  font-size:11px;font-weight:700;padding:4px 3px;border:1px solid var(--grille);
  text-align:center;white-space:nowrap}
.gr-t td{border:1px solid var(--grille);padding:0;height:22px;text-align:center}
.gr-t .gr-n{text-align:left;padding:2px 6px;white-space:nowrap}
.gr-t .gr-n b{font-weight:600;font-size:11.5px}
/* Zebrage : une nuance, pas une rayure. Sur 252 lignes, c'est ce qui evite de
   sauter d'un eleve a la ligne du voisin en suivant une colonne du regard. */
.gr-t tbody tr td{background:var(--carte)}
.gr-t tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--sous) 55%,var(--carte))}
.gr-t tbody tr:hover td{background:color-mix(in srgb,var(--marque) 9%,var(--carte));cursor:pointer}
/* La ligne editee s'allume ENTIEREMENT, avec un repere au bord et le nom en gras :
   saisir une absence sur le mauvais eleve ne se rattrape qu'en s'en apercevant. */
.gr-t tbody tr.sel td{background:var(--pn-sel);color:var(--pn-selt);
  border-top-color:var(--marque);border-bottom-color:var(--marque)}
.gr-t tbody tr.sel td a{color:var(--pn-selt)}
.gr-t tbody tr.sel .gr-n{box-shadow:inset 3px 0 0 var(--marque)}
.gr-t tbody tr.sel .gr-n b{font-weight:800;color:var(--pn-selt)}
/* Le point du creneau vide doit rester lisible sur le bleu pastel. */
.gr-t tbody tr.sel .gr-v > a > i{color:var(--pn-selt);opacity:.5}
.gr-t th.gr-h,.gr-c{width:34px}
/* La case est un lien : toute sa surface se clique, pas seulement le rectangle. */
.gr-t td > a{display:block;width:100%;height:100%;line-height:20px;text-decoration:none;color:inherit}
/* Creneau sans incident : un point, pas un trou. Une grille de vides se lit comme
   une zone morte — le point dit « cette heure existe, il ne s'y est rien passe ». */
.gr-t tbody tr td.gr-v{background-image:linear-gradient(var(--pn-vide),var(--pn-vide));
  background-size:calc(100% - 7px) calc(100% - 7px);background-position:center;
  background-repeat:no-repeat}
.gr-t tbody tr td.gr-v > a{background:var(--carte);margin:4px;width:auto;height:auto;
  min-height:12px;line-height:12px}
.gr-t tbody tr:nth-child(even) td.gr-v > a{background:color-mix(in srgb,var(--sous) 55%,var(--carte))}
.gr-t tbody tr.sel td.gr-v > a{background:var(--pn-sel)}
.gr-v > a > i{font-style:normal;color:var(--dim);opacity:.55;font-size:12px;line-height:12px}
.gr-v:hover > a > i{opacity:1;color:var(--marque)}
/* La case choisie porte un cadre net : c'est elle qu'on est en train d'editer. */
.gr-t td.gr-ch{box-shadow:inset 0 0 0 2px var(--marque)}
.gr-t th.gr-n,.gr-t td.gr-n{width:auto;min-width:150px}
/* Les cases : des rectangles pleins, lisibles d'un coup d'oeil a un metre. */
/* Absence sur la journee entiere : pas de case ou la poser, donc a cote du nom. */
.gr-j{display:inline-block!important;width:auto!important;height:15px!important;
  line-height:15px!important;padding:0 5px;margin-left:8px;border-radius:2px;font-size:9.5px}
.gr-a,.gr-aj,.gr-r,.gr-d{display:block;width:100%;height:20px;line-height:20px;
  text-align:center;font-size:10.5px;font-weight:700;color:#fff}
.gr-a{background:var(--pn-abs)}
.gr-aj{background:var(--pn-just)}
.gr-r{background:var(--pn-ret)}
.gr-d{background:var(--pn-disp)}
/* Retour a toutes les classes : dans le bandeau, et seulement quand un filtre est
   pose. Une ligne permanente « Toutes les classes » occupait la place pour defaire
   quelque chose qui, la plupart du temps, n'etait pas fait. */
.gr-raz{margin-left:auto;color:#fff;text-decoration:none;font-size:10px;font-weight:700;
  border:1px solid rgba(255,255,255,.5);border-radius:2px;padding:0 5px;text-transform:none;
  letter-spacing:0}
.gr-raz:hover{background:rgba(255,255,255,.2)}
.gr-cl .blc-t .blc-n{margin-left:6px}

/* Recherche rapide dans la grille d'appel : on tape un nom parce qu'on ignore
   justement dans quelle classe il est — elle traverse donc la classe affichee. */
/* Nature du jour affiche : un futur vide et un jour de classe vide se
   ressemblaient trait pour trait. */
.gr-vide{margin:14px 10px;padding:10px 12px;border:1px dashed var(--grille);
  background:var(--carte);font-size:12px;color:var(--dim);text-align:center}
.gr-q{height:28px;flex:1 1 320px;min-width:220px;max-width:520px;padding:4px 10px;
  font:inherit;font-size:12.5px;
  color:var(--txt);background:var(--carte);border:1px solid var(--grille)}
.gr-q::placeholder{color:var(--dim);opacity:1}
/* La legende vit dans la barre de filtres, poussee a droite : sous la grille il
   fallait descendre 28 lignes pour savoir ce que voulait dire un « D ». */
.gr-lg{margin:0 0 0 auto;font-size:11px;color:var(--dim);display:flex;gap:6px;
  align-items:center;flex-wrap:wrap}
.gr-lg span{display:inline-block;width:18px;height:16px;line-height:16px;text-align:center;
  font-size:10px}

/* Motif REFUSE : l'absence reste non justifiee — elle compte, elle remonte a la
   famille — mais elle porte une marque. Sans elle on redemande un mot que la
   famille a deja fourni et que l'etablissement a refuse. */
.gr-ref{position:relative}
.gr-ref::after{content:'';position:absolute;right:1px;bottom:1px;width:0;height:0;
  border-left:5px solid transparent;border-bottom:5px solid #fff}
.ac-2{display:grid;grid-template-columns:1fr 1fr;gap:6px}

/* Colonne droite : le panneau d'actions, empile, boutons carres. */
.gr-a8{border-left:1px solid var(--grille);background:var(--carte);padding:8px;overflow-y:auto}
.gr-a8t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--dim);margin-bottom:6px}
.gr-a8 select,.gr-a8 input{width:100%;padding:5px 7px;margin-bottom:5px;font:inherit;font-size:11.5px;
  border:1px solid var(--grille);border-radius:2px;background:var(--fond);color:var(--txt)}
.gr-f{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--ligne)}
.gr-f:last-child{border-bottom:0}
.gr-a8 button{display:block;width:100%;padding:6px 8px;margin-bottom:4px;font:inherit;
  font-size:11.5px;font-weight:600;border:1px solid var(--marque);border-radius:2px;
  background:var(--marque);color:#fff;cursor:pointer;text-align:center}
.gr-a8 button:hover{filter:brightness(1.08)}
.gr-f:not(#f-abs) button{background:none;color:var(--marque)}
/* ── Confort de lecture sur ecran de bureau ────────────────────────────────
   La densite extreme se justifiait quand la grille montrait 252 eleves ; elle en
   montre 28 depuis qu'une classe est selectionnee d'office. Le gain est calibre
   sur la place mesuree : a 1440x900, 76 px restaient libres sous le tableau, et
   passer la ligne de 22 a 24 px en consomme 56 — rien ne se met a defiler. */
@media (min-width: 1200px) and (min-height: 860px) {
  .gr-t{font-size:12px}
  .gr-t td{height:24px}
  .gr-t .gr-n b{font-size:12.5px}
  .gr-a,.gr-aj,.gr-r,.gr-d{height:22px;line-height:22px;font-size:11px}
  .gr-v > a > i{line-height:22px;font-size:14px}
  .gr-t td > a{line-height:22px}
  .gr-cli{font-size:12.5px;padding:7px 10px}
  .ef-t{font-size:12px}
  .ef-t td{height:25px}
  .ef-t td.ef-n,.ef-t td.ef-p{font-size:12.5px}
  .ef-ac{font-size:12px;padding:2px 10px;line-height:18px}
  .ac-s{font-size:13.5px}
  .ac-h,.ac-e{font-size:12px}
  .ac-b button{font-size:12.5px;padding:6px 9px}
  .ac-t{font-size:11px}
}

/* ── Volet d'actions : trois blocs, pas une pile de formulaires ───────────── */
.ac{border:1px solid var(--grille);background:color-mix(in srgb,var(--fond) 55%,var(--carte))}
/* Veille : le volet ne propose rien tant qu'aucune case n'est choisie. */
.ac-veille{margin:auto;padding:18px 12px;text-align:center;font-size:11.5px;line-height:1.5;
  color:var(--dim);opacity:.5}
/* Bloc sans objet : visible mais inerte — le masquer ferait sauter la colonne a
   chaque clic, et on perdrait de vue ce qui existe. */
.ac-off{opacity:.5;pointer-events:none}
.ac-t{padding:4px 8px;background:var(--bandeau);color:#fff;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.ac > *:not(.ac-t){margin:0;padding:0 8px}
.ac > *:first-of-type{padding-top:8px}
.ac form{padding:8px}
.ac-s{font-size:12.5px;font-weight:700;line-height:1.3;padding-top:8px!important}
.ac-h{font-size:11px;color:var(--dim);padding-bottom:2px}
.ac-e{font-size:11px;font-weight:700;color:var(--o);padding-bottom:8px}
.ac-n{font-size:10.5px;color:var(--dim);line-height:1.35;margin-top:6px!important;padding:0!important}
/* Trois boutons empiles, chacun portant SA lettre repere — la meme que dans la
   grille. On choisit a la couleur et a la lettre, sans lire. */
.ac-b{display:flex;flex-direction:column;gap:5px}
.ac-b button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;margin:0;
  font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;text-align:left;
  border:1px solid var(--grille);background:var(--carte);color:var(--txt)}
.ac-b button span{flex:0 0 auto;width:18px;height:18px;line-height:18px;text-align:center;
  font-size:10.5px;display:inline-block}
.ac-b button:disabled{opacity:.45;cursor:not-allowed}
.ac-b .b-abs{border-color:color-mix(in srgb,var(--r) 45%,var(--grille))}
.ac-b .b-ret{border-color:color-mix(in srgb,var(--o) 45%,var(--grille))}
.ac-b .b-dis{border-color:var(--grille)}
.ac-b button:not(:disabled):hover{background:var(--sous)}
.ac select{width:100%;padding:5px 7px;margin-bottom:6px;font:inherit;font-size:11.5px;
  border:1px solid var(--ligne);background:var(--carte);color:var(--txt)}
.ac select:disabled{opacity:.5}
/* Champ libre du motif « Autre » : meme largeur que le menu au-dessus, pour que
   les deux se lisent comme une seule reponse. */
.ac #ac-detail{width:100%;box-sizing:border-box;margin-top:6px;padding:5px 8px;font:inherit;
  font-size:12px;color:var(--txt);background:var(--carte);border:1px solid var(--ligne)}
.ac #ac-detail::placeholder{color:var(--dim);opacity:1}
.ac #ac-detail:disabled{opacity:.5}
.ac #ac-just,.ac #ac-ref{width:100%;padding:6px 8px;font:inherit;font-size:11.5px;
  font-weight:700;cursor:pointer;border:1px solid var(--marque);
  background:var(--marque);color:#fff}
.ac #ac-ref{border-color:var(--r);background:var(--r)}
.ac #ac-just:disabled,.ac #ac-ref:disabled{background:var(--carte);color:var(--dim);
  border-color:var(--grille);cursor:not-allowed}
.ac .gr-eff{padding-top:0}
.ac .gr-sup{width:100%;padding:5px 8px;font:inherit;font-size:11px;font-weight:700;cursor:pointer}

/* Les trois saisies portent la couleur de la legende : on choisit a la couleur,
   comme on lit la grille a la couleur. Contournes et non pleins — trois aplats
   massifs empiles font un mur, et le rouge plein hurle avant qu'on ait agi. */
.gr-a8 .b-abs,.gr-a8 .b-ret,.gr-a8 .b-dis{color:#fff;font-weight:700;
  padding:6px 8px;min-height:0}
.gr-a8 .b-abs{background:var(--pn-abs);border-color:var(--pn-abs)}
.gr-a8 .b-ret{background:var(--pn-ret);border-color:var(--pn-ret)}
.gr-a8 .b-dis{background:var(--pn-disp);border-color:var(--pn-disp)}
.gr-a8 .b-abs:hover,.gr-a8 .b-ret:hover,.gr-a8 .b-dis:hover{filter:brightness(1.1)}
.gr-a8 .b-abs:disabled,.gr-a8 .b-ret:disabled,.gr-a8 .b-dis:disabled{
  background:var(--carte);border-color:var(--grille);color:var(--dim);filter:none}
/* La pastille dans le bouton reprend le badge de la grille : on choisit a la
   couleur, comme on lit la grille a la couleur. */
.gr-a8 .b-abs .gr-a,.gr-a8 .b-ret .gr-r,.gr-a8 .b-dis .gr-d{background:rgba(0,0,0,.22)}
/* Les blocs du panneau respirent : sans cet ecart, « saisir » et « effacer »
   se touchaient — deux gestes opposes a un pixel l'un de l'autre. */
.gr-a8{display:flex;flex-direction:column;gap:14px}
.gr-a8 .gr-f{margin:0;padding-bottom:14px}
.gr-a8 > #gr-e{margin-bottom:0}
.gr-a8 button{margin-bottom:6px}
.gr-a8 .gr-f button:last-of-type{margin-bottom:0}
/* Selecteur de date, dans la barre de filtres. */
/* Le filtre d'etat n'a plus de rangee d'onglets : il n'arrive que par un lien
   (« Absences a justifier » sur l'accueil). Il se montre alors ici, avec sa croix
   — un filtre invisible ferait chercher des eleves que la grille cache. */
.gr-fx{display:inline-flex;align-items:center;gap:7px;padding:4px 9px;font-size:11px;
  font-weight:700;text-decoration:none;color:#fff;background:var(--bandeau);
  border:1px solid var(--grille)}
.gr-fx b{font-weight:700;opacity:.7}
.gr-fx:hover b{opacity:1}
.gr-d8{display:inline-flex;gap:5px;align-items:center;margin:0}
.gr-d8 input{padding:4px 7px;font:inherit;font-size:12px;border:1px solid var(--grille);
  border-radius:2px;background:var(--carte);color:var(--txt);color-scheme:light}
.gr-d8 button{padding:5px 10px;font:inherit;font-size:12px;border:1px solid var(--marque);
  border-radius:2px;background:none;color:var(--marque);cursor:pointer}
/* La barre de filtres se resserre sur ce seul ecran. */
.gr ~ *,.f-b:has(.gr-d8){font-size:12px}
.f-b:has(.gr-d8) .seg{border-radius:0;box-shadow:none;border-color:var(--grille)}
.f-b:has(.gr-d8) .seg a{padding:4px 11px;font-size:11px;font-weight:600;border-radius:0;
  border-right-color:var(--grille);color:var(--txt);background:var(--carte)}
.f-b:has(.gr-d8) .seg a:hover{background:var(--sous)}
.f-b:has(.gr-d8) .seg a.on{background:var(--bandeau);color:#fff;font-weight:700}
/* Effacement d'une saisie : rouge, et seulement quand il y a quelque chose a
   effacer. Un bouton rouge inerte invite a cliquer plus fort. */
.gr-sup{background:var(--r)!important;border-color:var(--r)!important;color:#fff!important}

/* ── Enseignants ───────────────────────────────────────────────────────────── */
.en{margin:0}
.en-t th.en-m,.en-t td.en-m{width:26%}
.en-t th.en-h,.en-t td.en-h{width:18%;color:var(--dim);font-size:11px}
.en-t th.ef-n,.en-t td.ef-n{width:22%}
.en-t th.ef-p,.en-t td.ef-p{width:16%}
.en-t th.ef-i,.en-t td.ef-i{width:14%}
.en-t td.en-m .pu{margin:0 4px 0 0}
.en-t td form{margin:0}
.en-pin{margin:10px}

/* ── Boutons de logiciel metier ────────────────────────────────────────────
   Rectangulaires, gris, compacts. Ni degrade, ni ombre, ni arrondi marque : ce
   qui distingue un outil de bureau d'une page web, c'est justement l'absence
   d'effets. */
.bt-log{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;font-size:11.5px;
  font-weight:700;color:var(--txt);background:var(--sous);border:1px solid var(--grille);
  border-radius:2px;cursor:pointer}
.bt-log:hover{background:var(--vide)}
/* Icone carree d'action, posee dans la barre de titre du tableau. */
/* Creer une classe, inscrire un eleve : les deux gestes de la rentree. Ils
   tenaient dans un carre de 18 px portant un « + » — personne ne les voyait. */
.bt-cr{display:flex;align-items:center;justify-content:center;gap:7px;
  margin:8px;padding:8px 10px;font-size:12.5px;font-weight:700;text-decoration:none;
  color:#fff;background:var(--marque);border:1px solid var(--marque);border-radius:3px}
.bt-cr:hover{filter:brightness(1.1)}
.bt-cr .ico{margin:0}
.bt-cr2{display:inline-flex;margin:0 8px 0 0;flex:0 0 auto;white-space:nowrap}
.bt-ic{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;
  margin-left:6px;font-size:14px;font-weight:700;line-height:1;text-decoration:none;
  color:var(--txt);background:var(--sous);border:1px solid var(--grille);border-radius:2px}
.bt-ic:hover{background:#fff}
/* En-tetes de colonnes : gris technique uni, cales a gauche, sans relief. */
.gr-t th,.fd-t th{box-shadow:none;text-shadow:none}
.gr-t thead th{text-align:center}
.gr-t thead th.gr-n,.ef-t thead th{text-align:left}
/* Accuse de lecture : une case a cocher du systeme, carree et familiere. */
.dv-l{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer;margin-bottom:8px}
.dv-l input{width:15px;height:15px;margin:0;accent-color:var(--marque);flex:0 0 auto}
.dv-b{margin-left:23px}

/* ── Effectifs : classes, eleves, inscriptions (meme grille dense) ─────────── */
.gr-2c{grid-template-columns:15% minmax(0,85%)}
.gr-2d{grid-template-columns:minmax(0,1fr) 20%}
/* L'editeur d'emploi du temps n'a plus qu'une seule colonne : la grille. */
.gr-1c{grid-template-columns:minmax(0,1fr)}
@media (max-width:1000px){ .gr-2d{grid-template-columns:minmax(0,1fr)} }
.ef-h{margin:0;padding:5px 8px;border-bottom:1px solid var(--grille);background:var(--carte);
  font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-h b{color:var(--txt);font-size:12px}
.ef-add{display:block;padding:5px 8px;font:inherit;font-size:11.5px;font-weight:700;
  border:1px solid var(--marque);background:var(--marque);color:#fff;cursor:pointer;
  text-align:center;text-decoration:none;white-space:nowrap}
.ef-add:hover{filter:brightness(1.08)}
/* Dans la colonne des classes, le bouton etait colle a la premiere division et se
   lisait comme une ligne de plus. Il s en detache : sa propre marge, un fond plus
   soutenu que les lignes, et un trait de separation sous lui. */
.gr-cl .ef-add{margin:7px;width:calc(100% - 14px);padding:7px 8px;border-radius:3px;
  background:var(--marque);border-color:color-mix(in srgb,var(--marque) 70%,#000);
  box-shadow:0 1px 2px rgba(0,0,0,.18)}
.gr-cl .ef-add + .gr-cli{border-top:1px solid var(--grille)}
.gr-cl .ef-add:hover{background:color-mix(in srgb,var(--marque) 85%,#000);filter:none}
/* Les divisions, elles, ne sont pas des boutons : fond de carte, pas de relief. */
.gr-cli{background:var(--carte)}
.ef-t td{text-align:left;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ef-t th{text-align:left;padding:4px 6px}
.ef-t td.ef-n{font-weight:600}
.ef-t th.ef-n,.ef-t td.ef-n{width:48%}
.ef-t th.ef-p,.ef-t td.ef-p{width:30%}
/* « Actif » repete 252 fois n'apprenait rien. Le signal utile est son contraire :
   pas d'identifiant, pas de connexion — et personne ne le saura avant decembre. */
.ef-nc{font-style:normal;font-size:10px;font-weight:700;color:var(--r);margin-left:8px;
  border:1px solid var(--r);border-radius:2px;padding:0 4px}
/* Etat du compte : trois mots, trois couleurs. « Sans compte » doit sauter aux
   yeux — cet eleve ne peut pas se connecter et ne le dira qu'en decembre. */
.st-v,.st-o,.st-n{display:inline-block;padding:0 5px;font-size:10.5px;font-weight:700;
  line-height:15px;border-radius:2px;color:#fff}
.st-v{background:var(--v)}
.st-o{background:var(--o)}
.st-n{background:var(--r)}
.ef-av{margin:0 0 5px;font-size:11px;line-height:1.35;color:var(--r)}
/* Bout de ligne : un bouton LIBELLE. Deux pictogrammes a 45 % d'opacite se
   voulaient discrets et devenaient invisibles — on ne clique pas ce qu'on ne
   voit pas, et le guichet croyait l'action absente. */
.ef-t th.ef-x,.ef-t td.ef-x{width:6%;text-align:right;padding:0 6px}
.ef-t td .ef-ac{color:var(--marque)}
.ef-t td .ef-ac:hover{color:#fff}
/* L'oeil suit la couleur du texte (fill:currentColor) : il s'inverse avec le
   bouton au survol, la ou une icone de couleur figee se serait perdue. */
.ic-oeil{width:13px;height:13px;vertical-align:-2px;margin-right:5px}
.ef-ac{display:inline-flex;align-items:center;padding:1px 9px;font-size:11.5px;font-weight:700;line-height:17px;
  text-decoration:none;color:var(--marque);border:1px solid var(--marque);
  border-radius:2px;background:var(--carte);white-space:nowrap}
.ef-ac:hover,tr.sel .ef-ac{background:var(--marque);color:#fff}

/* Blocs. Un bandeau nomme chacun d'eux : sans lui, la liste des classes et le
   tableau flottaient cote a cote sans frontiere visible. */
.blc{border:1px solid var(--grille);background:var(--carte)}
.blc + .blc{border-left:0}
.blc-t{display:flex;align-items:center;gap:8px;padding:4px 8px;
  background:var(--bandeau);color:#fff;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.blc-n{margin-left:auto;background:rgba(255,255,255,.22);border-radius:3px;padding:0 6px;
  font-size:10.5px}
/* Le geste le plus frequent se pose AVANT le titre : l'oeil part de la gauche,
   et un bouton colle au bord droit d'un ecran de 1440 px se cherche. */
.ef-ins{flex:0 0 auto}
.ef-bar{min-height:32px;gap:10px}
/* Recherche : elle traverse tout l'etablissement, donc elle est dans la barre du
   tableau et non dans la colonne des classes. */
.ef-rf{display:flex;gap:0;flex:1 1 340px;min-width:0;max-width:560px}
.ef-rq{flex:1;min-width:0;width:auto;height:24px;padding:3px 10px;font:inherit;font-size:12.5px;
  color:var(--txt);background:var(--carte);border:1px solid var(--carte);border-right:0}
.ef-rq::placeholder{color:var(--dim);opacity:1}
.ef-rq:focus{outline:2px solid #fff;outline-offset:-1px}
.ef-rb{padding:0 12px;height:24px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--carte);background:var(--sous);color:var(--txt);white-space:nowrap}
.ef-rb:hover{background:var(--carte)}
.ef-rx{color:#fff;text-decoration:none;font-weight:700;padding:0 4px}
.ef-t th.ef-cl,.ef-t td.ef-cl{width:18%}
.ef-ins{display:inline-flex;gap:4px;align-items:baseline}
.ef-ins .ef-h{font-size:11.5px;font-weight:800;text-decoration:underline;
  text-underline-offset:2px}
.ef-bar > .ef-h{flex:1;min-width:0;color:#fff;font-size:11px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis}

/* ── Bascule d'annee (direction) ───────────────────────────────────────────── */
.bs{max-width:720px}
.bs-h{margin:0 0 10px;font-size:18px}
.bs-a{margin:0 0 12px;font-size:13px}
.bs-a b{font-size:15px}
.bs-t{margin-bottom:14px}
.bs-t td:first-child{width:60%}
.bs-d{margin:0 0 12px;font-size:12.5px;color:var(--dim)}
.bs .cf{margin:0 0 14px}
.fd-par .cf{margin:0 0 12px}
.bs .cf-f button{width:100%}

/* ── Editeur d'emploi du temps (vie scolaire) ──────────────────────────────
   Trois vues sur la meme grille. Dense : 11 px, bordures 1 px, aucun arrondi. */
.pl{margin:0;min-width:0;display:flex;flex-direction:column}
/* Emploi du temps : les classes a gauche, la recherche et la grille a droite. */
.pl-w2{min-height:calc(100dvh - 118px)}
.pl-w2 .gr-cl i{background:var(--sous);border-radius:3px;padding:0 5px;font-size:10.5px}

.pl-f{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:5px 8px;
  border-bottom:1px solid var(--grille);background:var(--carte)}
@media (min-width:900px){ .pl-f{padding-left:22px;padding-right:22px} }
/* Le formulaire de recherche vit maintenant DANS la barre, a cote du menu des
   classes : c'est lui qui prend la largeur restante. */
.pl-fs{display:flex;align-items:center;gap:8px;flex:1 1 420px;min-width:0;margin:0}
.dd-w{flex:0 0 auto;margin:0}
.dd-go{display:block;width:100%;margin-top:6px;padding:5px 8px;font:inherit;font-size:11.5px;
  font-weight:700;color:#fff;background:var(--marque);border:1px solid var(--marque);cursor:pointer}
.pl-f select{padding:3px 6px;font:inherit;font-size:11.5px;border:1px solid var(--grille);
  background:var(--fond);color:var(--txt);max-width:220px}
.pl-b{padding:3px 9px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid var(--marque);background:var(--marque);color:#fff}
/* Le bouton reste, hors de l'ecran : sans JavaScript il fait marcher la touche
   Entree sur tous les navigateurs, y compris les anciens. */
.pl-go{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
/* Barre unique : on part toujours d'un NOM, jamais d'un type. */
.pl-w{position:relative;flex:1 1 420px;min-width:0;max-width:760px}
.pl-ic{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:16px;
  color:var(--dim);pointer-events:none;line-height:1}
.pl-q{width:100%;height:30px;padding:4px 10px 4px 28px;font:inherit;font-size:13px;
  color:var(--txt);background:var(--carte);border:1px solid var(--grille)}
.pl-q::placeholder{color:var(--dim);opacity:1}
.pl-q:focus{outline:2px solid var(--marque);outline-offset:-2px}
.pl-l{position:absolute;z-index:30;left:0;right:0;top:100%;margin:0;padding:0;list-style:none;
  background:var(--carte);border:1px solid var(--grille);max-height:260px;overflow-y:auto;
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.pl-l button{display:flex;align-items:baseline;gap:8px;width:100%;padding:4px 8px;font:inherit;
  font-size:11.5px;text-align:left;border:0;background:none;color:var(--txt);cursor:pointer}
.pl-l button i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--dim);white-space:nowrap}
.pl-l button:hover,.pl-l button.on{background:var(--marque);color:#fff}
.pl-l button:hover i,.pl-l button.on i{color:rgba(255,255,255,.85)}
/* Repli sans JavaScript : le serveur liste les correspondances. */
.pl-res{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--grille)}
.pl-res a{display:flex;gap:8px;padding:4px 8px;font-size:11.5px;text-decoration:none;color:var(--txt);
  border-bottom:1px solid var(--ligne)}
.pl-res a:hover{background:var(--sous)}
.pl-res i{margin-left:auto;font-style:normal;font-size:10.5px;color:var(--dim)}
/* Vue lecture seule : les cases inertes sont grisees, pour ne pas passer pour une panne. */
.pl-off{background:repeating-linear-gradient(45deg,var(--vide),var(--vide) 4px,
  transparent 4px,transparent 8px)}
.pl-g{overflow:auto;padding:10px}
/* L'editeur porte la MEME grille que l'espace eleve : elle doit donc s'afficher
   ici quelle que soit la largeur, l'espace d'administration etant fait pour un PC. */
.pl .edt{display:block;overflow-x:auto}
.pl .edt-m{display:none}
/* Un creneau libre : invisible au repos, il se propose au survol. Une grille
   constellee de « + » serait illisible, et on ne cherche pas un trou au hasard. */
.cr-add{position:absolute;left:2px;right:2px;display:flex;align-items:center;
  justify-content:center;border:1px dashed transparent;border-radius:2px;
  color:var(--dim);text-decoration:none;font-size:15px;font-weight:700;background:var(--vide)}
.cr-add span{opacity:0}
.cr-add:hover,.cr-add:focus{border-color:var(--marque);background:color-mix(in srgb,var(--marque) 12%,var(--carte))}
.cr-add:hover span,.cr-add:focus span{opacity:1;color:var(--marque)}
/* Un cours editable reste un bloc de cours : on ne le deguise pas en bouton. */
.cr-ed{cursor:pointer;text-decoration:none;color:inherit;display:block}
.cr-ed:hover{filter:brightness(.96);box-shadow:inset 0 0 0 1px var(--marque)}
.pl-t{table-layout:fixed}
.pl-t th.pl-h{width:46px;background:var(--bandeau);color:#fff;font-size:11px}
.pl-t td{height:34px;vertical-align:top;padding:0}
.pl-v{background:var(--vide)}
/* La case vide porte un « + » qui n'apparait qu'au survol : une grille constellee
   de plus est illisible, et on ne cherche pas une case vide au hasard. */
.pl-a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:var(--dim);text-decoration:none;font-size:13px;font-weight:700;opacity:0}
.pl-v:hover .pl-a,.pl-a:focus{opacity:1;background:color-mix(in srgb,var(--marque) 12%,transparent)}
.pl-k{background:var(--carte)}
.pl-k a{display:block;padding:2px 5px;text-decoration:none;color:var(--txt);height:100%}
.pl-k b{display:block;font-size:10.5px;font-weight:700;line-height:1.2;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pl-k i{display:block;font-style:normal;font-size:9.5px;color:var(--dim);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.pl-k a:hover{background:var(--sous)}
.pl-d{margin:0 0 10px;font-size:11.5px;color:var(--dim);line-height:1.4}
/* Le conflit s'affiche DANS la fenetre, sans effacer la saisie. */
.pl-err{margin:0 0 8px;padding:6px 8px;border:1px solid var(--r);border-left-width:3px;
  background:color-mix(in srgb,var(--r) 10%,var(--carte));color:var(--r);
  font-size:11.5px;line-height:1.4}

/* ── Tableau de bord d'un eleve ────────────────────────────────────────────
   Les trois gros carres de compteurs ont disparu : ils occupaient le tiers de la
   fenetre pour trois nombres qui tiennent sur une ligne. La place sert desormais
   aux donnees elles-memes. */
#d-fiche{width:85vw;max-width:85vw;height:85vh}
/* Fenetre « Nouveau communique » : A QUI a gauche, QUOI a droite. En une seule
   colonne, le destinataire sortait de l'ecran des qu'on descendait ecrire le
   message — or c'est justement ce qu'on veut garder sous les yeux en ecrivant,
   et ce qu'on relit avant de cliquer « Diffuser ». */
#d-com{width:min(1040px,calc(100vw - 24px))}
.mo-com .frm{border:0;margin:0;padding:16px 18px;max-height:82vh;overflow-y:auto;
  display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);
  gap:0 24px;align-items:start}
.mo-com .com-l{grid-column:1;grid-row:1}
.mo-com .cib{border-top:0;padding:0}
.mo-com .cib legend{margin-bottom:2px}
.mo-com .com-r{grid-column:2;grid-row:1;min-width:0}
.mo-com .com-r .frm-l:first-child{margin-top:0}
.mo-com .frm-r{margin:14px 0 0}
.mo-com .frm-r .seg-r{display:flex;align-items:stretch;width:100%}
.mo-com .frm-r .seg-r label{flex:1 1 0}
.mo-com .frm-r .seg-r span{display:flex;align-items:center;justify-content:center;
  width:100%;padding:6px}
/* Le pied tient la ligne entiere : la phrase de confiance a gauche, l'action a
   droite, separees du formulaire par un trait. */
.mo-com .com-f{grid-column:1 / -1;display:flex;align-items:center;gap:12px;
  margin-top:14px;padding-top:10px;border-top:1px solid var(--ligne)}
.mo-com .com-f .note{margin:0;padding:0;text-align:left;flex:1 1 auto}
.mo-com .com-f .mo-b{margin:0;flex:0 0 auto}
.mo-com textarea{min-height:190px;resize:vertical}
/* Sous 820 px la fenetre redevient une colonne : deux colonnes de 150 px ne se
   lisent pas, et le telephone n'a de toute facon qu'une largeur. */
@media (max-width:820px){
  .mo-com .frm{grid-template-columns:minmax(0,1fr)}
  .mo-com .com-l,.mo-com .com-r,.mo-com .com-f{grid-column:1;grid-row:auto}
  .mo-com .com-r{margin-top:14px}
  .mo-com textarea{min-height:110px}
}
.mo-com .frm input[type="text"],.mo-com .frm input:not([type]),.mo-com .frm textarea,
.mo-com .frm select{width:100%;box-sizing:border-box}
.frm-l{display:block;font-size:11.5px;font-weight:700;margin:10px 0 4px}
.frm-2{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 18px}
@media (min-width:640px){ .frm-2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.frm-2 .note{margin:4px 0 0}
/* Segment de rubriques : trois choix, tous visibles, un seul geste. Un menu
   deroulant en cachait deux sur trois et demandait deux clics. */
.seg-r{display:inline-flex;border:1px solid var(--grille);border-radius:2px;overflow:hidden}
.seg-r label{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.frm .seg-r label{margin:0}
.seg-r span{display:flex;align-items:center}
.seg-r input{position:absolute;opacity:0;width:1px;height:1px}
.seg-r span{padding:6px 14px;font-size:11.5px;font-weight:600;color:var(--txt);
  background:var(--carte);border-right:1px solid var(--grille);white-space:nowrap}
.seg-r label:last-child span{border-right:0}
.seg-r label:hover span{background:var(--sous)}
.seg-r input:checked + span{background:var(--marque);color:#fff;font-weight:700}
.seg-r input:focus-visible + span{outline:2px solid var(--marque);outline-offset:-2px}
.bt-com{text-decoration:none}
.ico{vertical-align:-2px;flex:0 0 auto}
.fd-o .ico{margin-right:4px}
.bt-ic .ico{margin:0}
#d-fiche .mo-c{display:flex;flex-direction:column;height:calc(85vh - 27px);overflow:hidden}
.fd{display:flex;flex-direction:column;min-height:0;flex:1}
.fd-e{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:6px 10px;
  border-bottom:1px solid var(--grille);font-size:11.5px;color:var(--dim)}
.fd-e b{font-size:13.5px;color:var(--txt)}
.fd-r{margin-left:auto;font-size:11px}
/* Onglets internes : des boutons plats, soulignes quand ils sont actifs. */
.fd-n{display:flex;gap:0;border-bottom:1px solid var(--grille);background:var(--fond)}
.fd-o{padding:5px 10px;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  border:0;border-bottom:2px solid transparent;background:none;color:var(--dim);
  white-space:nowrap}
.fd-o:hover{color:var(--txt);background:var(--sous)}
.fd-o.on{color:var(--marque);border-bottom-color:var(--marque);background:var(--carte)}
.fd-c2{flex:1;min-height:0;overflow:auto;background:var(--carte)}
.fd-p{padding:0}
.fd-0{margin:0;padding:10px;font-size:11.5px;color:var(--dim)}
/* Releve : la barre des matieres a gauche, les notes a droite — la disposition
   exacte de l'espace eleve. Un agent qui telephone a une famille decrit alors le
   meme ecran que celui qu'elle a sous les yeux. */
.fd-col{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}
@media (min-width:760px){ .fd-col{grid-template-columns:190px minmax(0,1fr)} }
.fd-col .mat{border-right:1px solid var(--grille);overflow-y:auto}
.fd-col .mat-l{padding:0}
.fd-md{min-width:0;overflow:auto}
.fd-mt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;
  padding:5px 8px;border-bottom:1px solid var(--grille);font-size:11px;color:var(--dim)}
.fd-mt > b{font-size:12.5px;color:var(--txt)}
.fd-mt span b{color:var(--txt)}
/* L'emploi du temps est celui de l'eleve : la meme grille, pas une seconde. */
.fd-edtp{padding:8px}
.fd .edt{display:block;overflow-x:auto}
.fd .edt-m{display:none}

/* Lignes serrees a 20 px, bordures 1 px, aucun arrondi. */
.fd-t{width:100%;border-collapse:collapse;font-size:11px}
.fd-t th{position:sticky;top:0;z-index:1;background:var(--bandeau);color:#fff;font-size:11px;
  font-weight:700;text-align:left;padding:3px 6px;border:1px solid var(--grille);white-space:nowrap}
.fd-t td{height:20px;padding:1px 6px;border:1px solid var(--grille);line-height:18px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-t th.fd-c,.fd-t td.fd-c{text-align:center}
.fd-t tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--sous) 40%,transparent)}
.fd-t tbody tr:hover td{background:var(--sous)}
/* Ligne de regroupement par matiere : c'est la qu'on lit la moyenne. */
.fd-g td{background:var(--sous)!important;font-size:11.5px}
.fd-g .fd-c{font-weight:700}
.fd-b{font-style:normal;color:var(--dim);font-size:10px}
/* Type et statut : la couleur remplit la CELLULE. Sur un releve de trente lignes,
   c'est la colonne entiere qu'on parcourt du regard — une pastille au milieu
   oblige l'oeil a viser, et les bords de la case restent neutres. */
.fd-t td.cel{font-weight:700;color:#fff;text-align:center}
.cel-r{background:var(--r)}
.cel-o{background:var(--o)}
.cel-v{background:var(--v)}
.cel-n{background:var(--bandeau)}
.fd-t tbody tr:nth-child(even) td.cel,.fd-t tbody tr:hover td.cel{background-blend-mode:normal}
.fd-t tbody tr:hover td.cel{filter:brightness(1.08)}
.st-r{display:inline-block;padding:0 5px;font-size:10.5px;font-weight:700;line-height:15px;
  border-radius:2px;color:#fff;background:var(--r)}
/* Mini emploi du temps : une colonne par jour, une ligne par creneau. */
.fd-edt{table-layout:fixed}
.fd-edt th.fd-h{width:52px;text-align:center;font-size:10.5px}
.fd-h i{display:block;font-style:normal;font-weight:400;opacity:.8}
.fd-k{font-size:10.5px;line-height:1.15;padding:1px 4px!important}
.fd-k b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.fd-k i{font-style:normal;color:var(--dim);font-size:9.5px}
.fd-v{background:var(--vide)}
.fd-f{padding:10px}
.fd-f label{display:block;font-size:11.5px;font-weight:600;margin:0 0 4px}
.fd-f select{padding:5px 7px;font:inherit;font-size:12px;border:1px solid var(--ligne);
  background:var(--fond);color:var(--txt);min-width:220px}
.fs-l{display:flex;gap:6px;align-items:center}
.fs-l button{flex:0 0 auto;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;border:1px solid var(--marque);background:var(--marque);color:#fff}
.fs-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* Parametres du compte : DEUX univers d'action, donc deux cartes. Cote a cote
   quand il y a la place, empilees sinon. Melanger « redonner un code » et
   « desinscrire » dans une seule colonne, c'est inviter a confondre les deux. */
.fd-par{padding:12px}
.cart{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:820px){ .cart{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cart-b{padding:16px;border:1px solid var(--grille);border-radius:4px;
  background:color-mix(in srgb,var(--fond) 60%,var(--carte))}
.cart-t{margin:0 0 8px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--dim)}
.cart-d{margin:0 0 12px;font-size:11.5px;line-height:1.5;color:var(--txt)}
.cart-d b{font-weight:700}
/* Le menu et son bouton sur UNE ligne : ce sont les deux moities du meme geste. */
.cart-l{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cart-l select{flex:1 1 180px;min-width:0;padding:6px 8px;font:inherit;font-size:12px;
  border:1px solid var(--ligne);background:var(--carte);color:var(--txt)}
.cart-l button{flex:0 0 auto;padding:6px 14px;font:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;border:1px solid var(--marque);background:var(--marque);color:#fff}
.cart-l button:hover{filter:brightness(1.08)}

/* Code provisoire : il ne s'affiche qu'une fois, il s'affiche donc GRAND.
   Le bouton, lui, ne s'etire plus sur toute la modale : un bouton large comme un
   ecran se lit comme une banniere, pas comme une action qu'on declenche. */
.fd-mdp button{display:block;width:100%;max-width:250px;padding:7px 12px;font:inherit;
  font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid var(--marque);
  background:var(--marque);color:#fff}
.fd-mdp button:hover{filter:brightness(1.08)}
.mdp-ok{margin:12px 0 0;padding:10px;border:1px solid var(--v);border-left-width:3px;
  background:color-mix(in srgb,var(--v) 10%,var(--carte))}
.mdp-ok.ef-ko{border-color:var(--r);background:color-mix(in srgb,var(--r) 10%,var(--carte))}
.mdp-t{margin:0;font-size:12px}
.mdp-c{margin:4px 0 6px}
.mdp-c b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:700;
  letter-spacing:.18em;color:var(--v)}
.mdp-n{margin:0;font-size:11px;color:var(--dim);line-height:1.4}

/* Ecran de confirmation : il dit ce qui va se passer AVANT que ce soit ecrit. */
.cf{margin:10px;border:1px solid var(--marque);border-left-width:3px;
  background:color-mix(in srgb,var(--marque) 7%,var(--carte));padding:9px 10px}
.cf-r{border-color:var(--r);background:color-mix(in srgb,var(--r) 8%,var(--carte))}
.cf-q{margin:0 0 4px;font-size:12.5px;line-height:1.4}
.cf-r .cf-q{color:var(--r)}
.cf-d{margin:0 0 9px;font-size:11.5px;color:var(--dim);line-height:1.4}
.cf-f{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.cf-f button{padding:5px 10px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--marque);background:var(--marque);color:#fff}

/* Fenetres modales. <dialog> natif : fond sombre, touche Echap et piege a
   tabulation sans une ligne de JavaScript ni un octet de bibliotheque. Sans
   JavaScript, le serveur pose l'attribut `open` et le formulaire marche pareil. */
.mo{padding:0;border:1px solid var(--grille);border-radius:4px;background:var(--carte);
  color:var(--txt);width:min(340px,calc(100vw - 24px));box-shadow:0 8px 28px rgba(0,0,0,.28)}
.mo::backdrop{background:rgba(11,15,22,.72)}
.mo:not([open]){display:none}
.mo[open]{position:fixed;inset:0;margin:auto;height:fit-content}
.mo-t{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;background:var(--bandeau);color:#fff;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.mo-x{color:#fff;text-decoration:none;font-size:13px;line-height:1;padding:2px 4px}
.mo-f{padding:10px}
.mo-f label{display:block;font-size:11.5px;font-weight:600;margin:0 0 3px}
.mo-f input,.mo-f select{width:100%;padding:5px 7px;margin-bottom:8px;font:inherit;
  font-size:12px;border:1px solid var(--ligne);background:var(--fond);color:var(--txt)}
.mo-q{margin:0 0 8px;font-size:12.5px;font-weight:700}
/* Note sous un champ : d'ou vient la liste, et ou aller si le nom manque. */
.mo-n{margin:4px 0 8px;font-size:11px;color:var(--dim);line-height:1.35}
.mo-n a{color:var(--marque);font-weight:600}
.mo-b{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:2px}
.mo-a{font-size:11.5px;color:var(--dim);text-decoration:none;padding:5px 4px}
.mo-a:hover{text-decoration:underline}
.mo-b button{width:auto;margin:0;padding:5px 10px;font:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  border:1px solid var(--marque);background:var(--marque);color:#fff}
.mo-b button:hover{filter:brightness(1.08)}
.ef-ok{margin-top:8px;margin-left:8px;margin-right:8px;padding:6px 8px;border:1px solid var(--v);border-left-width:3px;
  background:color-mix(in srgb,var(--v) 10%,var(--carte));font-size:11.5px;line-height:1.45}
.ef-ok.ef-ko{border-color:var(--r);background:color-mix(in srgb,var(--r) 10%,var(--carte))}
.ef-ok b{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.gr-note{margin:4px 0 0;font-size:10.5px;color:var(--dim);line-height:1.35}