/* ============================================================================
   University OS — Système d'interface
   DA validée le 1er septembre 2026.

   Signature DO COM (Bricolage Grotesque · Inter · JetBrains Mono · émeraude)
   posée sur une coque d'application claire.

   Règle : l'accent est la couleur de l'ÉCOLE et change en marque blanche.
   Les couleurs sémantiques (bon / alerte / critique) n'en font jamais partie —
   un impayé est rouge chez tout le monde.
   ============================================================================ */

:root{
  /* ⚠️ Indispensable. Sans cette déclaration, Brave (et Chrome avec
     l'assombrissement forcé activé) applique SON propre filtre sombre par
     dessus le nôtre et casse le rendu : du texte blanc redevient sombre.
     « color-scheme » dit au navigateur que la page gère ses deux thèmes
     elle-même — c'est l'opt-out documenté de l'auto-dark de Chromium. */
  color-scheme: light;

  /* Neutres FROIDS-NEUTRES, sans teinte.
     Corrigé le 2 septembre 2026 (deuxième passe). Le premier réglage avait
     assombri le fond pour « reposer les yeux » : résultat, un gris légèrement
     vert, des cartes à peine détachées du fond, et un écran terne. Le défaut
     n'était pas la luminosité mais LA TEINTE et LE MANQUE DE RELIEF.

     On revient donc à des cartes BLANCHES sur un fond très clair neutre, avec
     un filet net : c'est le contraste carte/fond qui fait qu'un tableau de bord
     « respire ». Le repos vient du texte, adouci de #0F1113 à #18181B, pas de
     l'écran entier passé au gris. */
  --fond:      #FAFAFA;
  --surface:   #FFFFFF;
  --surface-2: #F4F4F5;
  --bord:      #E4E4E7;
  --bord-fort: #D4D4D8;
  --texte:     #18181B;
  --texte-2:   #52525B;
  --texte-3:   #70707A;

  /* ============================ LA MARQUE DU PRODUIT ========================
     ⚠️ Ces deux jetons sont les SEULS que la marque blanche ne touche jamais.
     --accent est la couleur de l'ÉCOLE et se repeint à chaque client ; si le
     signe University OS s'y accrochait, il changerait de couleur d'un
     établissement à l'autre — ce ne serait plus une marque, ce serait un
     thème. L'encre reste l'encre. Elle s'inverse avec le fond, rien de plus.
     Voir identite/charte.html. */
  --encre-marque:     #17191C;
  --encre-marque-sur: #FFFFFF;

  --accent:      #10B981;
  --accent-fonce:#047857;
  --accent-voile:#10B98114;

  /* ======================= LA PALETTE DES DONNÉES ==========================
     ⚠️ Indépendante de l'accent, et ce n'est pas un détail de goût.

     La première série des graphiques était var(--accent). Chez une école dont
     la couleur est un rouge — l'ISE est en #B91C1C, notre « critique » en
     #B42318 — l'histogramme peignait « sous la moyenne » et « au-dessus de la
     moyenne » du MÊME rouge. L'information n'était pas enlaidie : elle était
     détruite. Et tout l'écran passait pour une alerte permanente.

     La règle qui supprime la classe entière du problème : l'accent dit CHEZ
     QUI on est (écusson, rail, bouton, anneau de focus) ; les couleurs
     sémantiques disent CE QUI SE PASSE ; et la donnée a ses propres couleurs,
     stables d'une école à l'autre.

     Bénéfice de bord : une démonstration a la même allure chez tous les
     prospects, quelle que soit la couleur du client.

     Ni rouge ni vert franc ici : ces deux-là appartiennent au sens. */
  --donnee-1: #2563EB;
  --donnee-2: #7C3AED;
  --donnee-3: #0D9488;
  --donnee-4: #DB2777;
  --donnee-5: #D97706;
  --donnee-6: #475569;

  --bon:      #047857;
  --alerte:   #B45309;
  --critique: #B42318;
  --bon-voile:     #04785714;
  --alerte-voile:  #B4530914;
  --critique-voile:#B4231814;

  /* Une carte se lit par son FILET, pas par son ombre. L'ombre lourde des
     premières maquettes faisait « composant flottant » ; ici elle n'est plus
     qu'un souffle. */
  --ombre: 0 1px 2px rgba(24,24,27,.04);
  --ombre-flottante: 0 10px 30px rgba(24,24,27,.10), 0 2px 8px rgba(24,24,27,.06);
  --r: 12px;

  /* Deux familles, deux rôles.
     « marque » = Bricolage Grotesque, la signature DO COM : elle porte le nom
     de l'établissement, la page de connexion, les pages commerciales.
     « titre » = Inter serré : dans un outil de travail dense, une grotesque de
     caractère fatigue à 13 px et fait « site vitrine » là où on attend un
     instrument. Les meilleurs tableaux de bord tiennent avec UNE famille et
     jouent sur la graisse et l'interlettrage. */
  --marque: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --titre:  "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --texte-f:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --fond:#09090B; --surface:#131316; --surface-2:#1C1C20;
    --bord:#27272A; --bord-fort:#3F3F46;
    --texte:#FAFAFA; --texte-2:#A1A1AA; --texte-3:#8A8A94;
    --encre-marque:#F7F8F8; --encre-marque-sur:#17191C;
    --accent:#10B981; --accent-fonce:#34D399; --accent-voile:#10B9811F;
    --donnee-1:#60A5FA; --donnee-2:#A78BFA; --donnee-3:#2DD4BF;
    --donnee-4:#F472B6; --donnee-5:#FBBF24; --donnee-6:#94A3B8;
    --bon:#34D399; --alerte:#F59E0B; --critique:#F87171;
    --bon-voile:#34D3991F; --alerte-voile:#F59E0B1F; --critique-voile:#F871711F;
    --ombre: 0 1px 2px rgba(0,0,0,.5);
  --ombre-flottante: 0 10px 30px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --fond:#09090B; --surface:#131316; --surface-2:#1C1C20;
  --bord:#27272A; --bord-fort:#3F3F46;
  --texte:#FAFAFA; --texte-2:#A1A1AA; --texte-3:#8A8A94;
  --encre-marque:#F7F8F8; --encre-marque-sur:#17191C;
  --accent:#10B981; --accent-fonce:#34D399; --accent-voile:#10B9811F;
  --donnee-1:#60A5FA; --donnee-2:#A78BFA; --donnee-3:#2DD4BF;
  --donnee-4:#F472B6; --donnee-5:#FBBF24; --donnee-6:#94A3B8;
  --bon:#34D399; --alerte:#F59E0B; --critique:#F87171;
  --bon-voile:#34D3991F; --alerte-voile:#F59E0B1F; --critique-voile:#F871711F;
  --ombre: 0 1px 2px rgba(0,0,0,.5);
  --ombre-flottante: 0 10px 30px rgba(0,0,0,.55);
}

:root[data-theme="light"]{ color-scheme: light; }

*{box-sizing:border-box}
/* L'attribut hidden est écrasé par tout display: explicite (flex, grid…).
   Sans cette ligne, un élément marqué caché reste visible. */
[hidden]{display:none!important}
body{
  margin:0;background:var(--fond);color:var(--texte);
  font-family:var(--texte-f);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ============================== COQUE ============================== */
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}
/* Un élément de grille ne descend pas sous la largeur minimale de son contenu
   tant qu'on ne le lui autorise pas. Sans ces min-width:0, un tableau large
   pousse la page entière et le défilement horizontal apparaît sur le corps
   au lieu de rester dans le tableau. */
.app > *{min-width:0}
main{min-width:0}
.duo > *,.duo-egal > *,.travail > *{min-width:0}

/* Rail et en-tête en blanc, zone de travail en gris très clair, cartes
   blanches sur ce gris : c'est ce léger décalage — pas une ombre — qui donne
   du relief. Une carte blanche sur fond blanc n'existe que par son filet, et
   l'écran paraît plat. */
.rail{
  background:var(--surface);border-right:1px solid var(--bord);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.rail-haut{padding:16px 14px;border-bottom:1px solid var(--bord)}

.selecteur{
  width:100%;display:flex;align-items:center;gap:10px;text-align:left;
  background:var(--fond);border:1px solid var(--bord);border-radius:10px;
  padding:9px 10px;cursor:pointer;color:var(--texte);transition:border-color .15s;
}
.selecteur:hover{border-color:var(--bord-fort)}
.selecteur.fige{cursor:default}
.selecteur.fige:hover{border-color:var(--bord)}
.ecusson{
  width:32px;height:32px;flex:0 0 32px;border-radius:9px;
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-family:var(--marque);font-weight:700;font-size:13px;letter-spacing:-.02em;
  transition:background .3s ease;
}
.selecteur .ident{min-width:0;flex:1}
.selecteur .ident b{
  display:block;font-family:var(--marque);font-weight:600;font-size:13px;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.selecteur .ident span{display:block;font-size:11px;color:var(--texte-3)}
.chev{color:var(--texte-3);flex:0 0 auto}

.menu-ecoles{
  display:none;margin-top:6px;background:var(--surface);border:1px solid var(--bord);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-flottante);
}
.menu-ecoles.ouvert{display:block}
.menu-ecoles button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;padding:9px 10px;cursor:pointer;color:var(--texte);font-size:13px;
}
.menu-ecoles button:hover{background:var(--surface-2)}
.pastille{width:9px;height:9px;border-radius:50%;flex:0 0 9px}

nav{padding:12px 10px;overflow-y:auto;flex:1}
.groupe{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--texte-3);
  padding:14px 10px 6px;font-weight:500;
}
nav a{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  color:var(--texte-2);text-decoration:none;font-size:13.5px;font-weight:500;
  transition:background .12s,color .12s;
}
nav a:hover{background:var(--surface-2);color:var(--texte)}
nav a[aria-current="page"]{background:var(--accent-voile);color:var(--accent-fonce)}
nav a svg{flex:0 0 16px;opacity:.85}
nav a .compteur{
  margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--texte-3);
  background:var(--surface-2);padding:1px 6px;border-radius:5px;
}
nav a .compteur.attention{color:var(--critique);background:var(--critique-voile)}

.rail-bas{padding:12px 14px;border-top:1px solid var(--bord);display:flex;align-items:center;gap:10px}
.avatar{
  width:30px;height:30px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--bord);display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--texte-2);flex:0 0 30px;
}
.rail-bas .qui{flex:1;min-width:0}
.rail-bas .qui b{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-bas .qui span{display:block;font-size:11px;color:var(--texte-3)}

/* ---------- En-tête ---------- */
.entete{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--bord);
  display:flex;align-items:center;gap:14px;padding:10px 22px;min-height:60px;
  flex-wrap:wrap;
}
/* Le titre cède la place avant tout le reste : il est le seul élément dont on
   peut couper la fin sans perdre une fonction. */
.entete .titre-page{min-width:0;flex:1 1 190px}
.entete h1{
  font-family:var(--titre);font-weight:600;font-size:17px;letter-spacing:-.022em;margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.entete .fil{
  font-size:12px;color:var(--texte-3);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recherche{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--surface-2);border:1px solid var(--bord);border-radius:8px;
  padding:7px 10px;min-width:210px;color:var(--texte-3);font-size:13px;
}
.recherche input{
  border:0;background:none;outline:none;color:var(--texte);font-family:inherit;
  font-size:13px;width:100%;
}
.raccourci{
  font-family:var(--mono);font-size:10.5px;border:1px solid var(--bord);
  border-radius:4px;padding:1px 5px;color:var(--texte-3);
}
.pousse{margin-left:auto}

.bouton{
  display:inline-flex;align-items:center;gap:7px;border-radius:8px;
  border:1px solid var(--bord);background:var(--surface);color:var(--texte);
  padding:7px 12px;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;
  text-decoration:none;
}
.bouton:hover{border-color:var(--bord-fort);background:var(--surface-2)}
.bouton.plein{background:var(--accent);border-color:var(--accent);color:#fff}
.bouton.plein:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.bouton.icone{padding:7px 9px}
/* Un bouton désactivé doit se VOIR désactivé : sans cela l'utilisateur clique
   dans le vide et croit que l'application est cassée. */
.bouton:disabled,.bouton[disabled]{
  opacity:.45;cursor:not-allowed;
  background:var(--surface-2);border-color:var(--bord);color:var(--texte-3);
}
.bouton.plein:disabled,.bouton.plein[disabled]{
  background:var(--surface-2);border-color:var(--bord);color:var(--texte-3);
}

main{padding:22px;max-width:1320px}

/* ============================== CARTES ============================== */
.carte{
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  box-shadow:var(--ombre);
}
.carte-tete{padding:18px 20px 0}
.carte-tete h2{font-family:var(--titre);font-weight:600;font-size:14.5px;letter-spacing:-.012em;margin:0}
.carte-tete p{margin:3px 0 0;font-size:12.5px;color:var(--texte-3)}
.carte-corps{padding:16px 20px 20px}

.grille-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.kpi{padding:18px 20px}
.kpi .haut{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kpi .etiq{font-size:12.5px;color:var(--texte-2);font-weight:500;min-width:0}
.kpi .val{
  font-family:var(--titre);font-weight:600;font-size:30px;letter-spacing:-.028em;
  margin-top:9px;font-variant-numeric:tabular-nums;line-height:1.1;
}
.kpi .val i{font-style:normal;font-size:.5em;color:var(--texte-3);font-weight:600;margin-left:2px}
.kpi .val.court{font-size:25px}
.kpi .pied{font-size:12px;color:var(--texte-3);margin-top:6px}

.puce{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;
  padding:2.5px 8px;border-radius:6px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;
}
.puce.bon{color:var(--bon);background:var(--bon-voile);border-color:var(--bon-voile)}
.puce.alerte{color:var(--alerte);background:var(--alerte-voile)}
.puce.critique{color:var(--critique);background:var(--critique-voile)}
.puce.neutre{color:var(--texte-2);background:var(--surface-2);border-color:var(--bord)}

.duo{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px}
.duo-egal{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media(max-width:1080px){.duo,.duo-egal{grid-template-columns:1fr}}

/* ---------- Onglets ---------- */
.onglets{display:flex;gap:2px;background:var(--surface-2);padding:3px;border-radius:9px;margin:0 18px}
.onglets button{
  flex:1;border:0;background:none;padding:7px 12px;border-radius:7px;cursor:pointer;
  font-size:13px;font-weight:500;color:var(--texte-2);transition:.15s;
}
.onglets button[aria-selected="true"]{background:var(--surface);color:var(--texte);box-shadow:var(--ombre)}

/* ---------- Tableaux ---------- */
.enveloppe{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px;color:var(--texte)}
th{
  text-align:left;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texte-3);font-weight:500;padding:9px 12px;border-bottom:1px solid var(--bord);
}
td{padding:11px 12px;border-bottom:1px solid var(--bord);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
th.n,td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
td:first-child,th:first-child{padding-left:20px}
td:last-child,th:last-child{padding-right:20px}
.fort{font-weight:600}
.discret{color:var(--texte-3);font-size:12px}

.barre{height:6px;border-radius:3px;background:var(--surface-2);min-width:76px;position:relative;overflow:hidden}
.barre span{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--accent);transition:width .5s ease}
.barre.att span{background:var(--alerte)}
.barre.bas span{background:var(--critique)}

/* ---------- Graphiques et répartitions ---------- */
svg.graph{width:100%;height:auto;display:block}
.legende{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.lg{display:flex;align-items:center;gap:9px;font-size:13px}
.lg .pt{width:9px;height:9px;border-radius:2px;flex:0 0 9px}
.lg .nm{flex:1}
.lg .vl{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.lg .pc{font-family:var(--mono);font-size:11.5px;color:var(--texte-3);width:46px;text-align:right}

.repart{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-bottom:14px}
.repart i{display:block;height:100%}

/* ---------- Bandeau d'information ---------- */
.bandeau-info{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--bord);border-left:3px solid var(--alerte);
  background:var(--surface);border-radius:var(--r);padding:14px 16px;
}
.bandeau-info.critique{border-left-color:var(--critique)}
.bandeau-info.bon{border-left-color:var(--bon)}
.bandeau-info b{display:block;font-family:var(--titre);font-weight:600;font-size:13.5px;letter-spacing:-.01em}
.bandeau-info p{margin:3px 0 0;font-size:13px;color:var(--texte-2);max-width:74ch}

@media(max-width:1240px){ .entete .recherche{display:none} }

/* ---------- Sélecteur de rôle (démonstration) ---------- */
.bascule-role{
  display:flex;align-items:center;gap:2px;margin-left:auto;
  background:var(--surface-2);border:1px solid var(--bord);
  border-radius:9px;padding:3px;
}
.bascule-role .etiq-role{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--texte-3);padding:0 8px 0 6px;font-weight:500;white-space:nowrap;
}
.bascule-role a{
  padding:5px 10px;border-radius:7px;font-size:12.5px;font-weight:500;
  color:var(--texte-2);text-decoration:none;white-space:nowrap;transition:.15s;
}
.bascule-role a:hover{color:var(--texte);background:var(--surface)}
.bascule-role a[aria-current="page"]{
  background:var(--surface);color:var(--accent-fonce);box-shadow:var(--ombre);
}

/* ---------- Graphiques (SVG maison, aucune bibliothèque) ---------- */
.grille-graphes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:16px;padding:16px 20px;
}
.graphe-carte{
  border:1px solid var(--bord);border-radius:var(--r);
  padding:14px 16px 12px;background:var(--surface);
}
.graphe-tete{margin-bottom:10px}
.graphe-tete b{
  display:block;font-family:var(--titre);font-weight:600;font-size:13.5px;
  letter-spacing:-.01em;
}
.graphe-tete span{display:block;font-size:11.5px;color:var(--texte-3);margin-top:1px}
.legende-compacte{
  display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--texte-2);
}
.legende-compacte span{display:inline-flex;align-items:center;gap:5px}
.legende-compacte i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}

/* ---------- Message flottant ---------- */
.message-flottant{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);
  background:var(--texte);color:var(--fond);
  padding:10px 16px;border-radius:9px;font-size:13px;font-weight:500;
  box-shadow:0 8px 26px rgba(0,0,0,.24);
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;
  z-index:200;max-width:calc(100% - 32px);text-align:center;
}
.message-flottant.visible{opacity:1;transform:translate(-50%,0)}
.message-flottant.alerte{background:var(--critique);color:#fff}

/* ---------- Sur-titre : l'intitulé discret au-dessus d'une liste ---------- */
.sur-titre{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--texte-3);font-weight:500;margin-bottom:6px;
}

/* ---------- Sélecteur de période, dans l'en-tête ---------- */
.champ-select{
  appearance:none;-webkit-appearance:none;
  background:var(--surface);color:var(--texte);
  border:1px solid var(--bord);border-radius:8px;
  padding:7px 30px 7px 11px;font:inherit;font-size:13px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23888%27 stroke-width=%273%27><path d=%27M6 9l6 6 6-6%27/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;
}
.champ-select:hover{border-color:var(--bord-fort)}

/* ---------- Bloc "pas encore construit", dit honnêtement ---------- */
.chantier{
  border:1px dashed var(--bord-fort);border-radius:var(--r);
  padding:26px 22px;text-align:center;background:var(--surface-2);
}
.chantier h3{font-family:var(--titre);font-weight:600;font-size:15px;margin:10px 0 6px;letter-spacing:-.012em}
.chantier p{margin:0 auto;max-width:56ch;font-size:13px;color:var(--texte-2)}
.chantier .ic{color:var(--texte-3)}

/* ---------- Mobile ---------- */
.menu-mobile{display:none}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{
    position:fixed;left:0;top:0;bottom:0;width:262px;z-index:60;
    transform:translateX(-100%);transition:transform .25s ease;height:100dvh;
  }
  .rail.ouvert{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.4)}
  .menu-mobile{display:inline-flex}
  main{padding:16px}
  .entete{padding:0 14px}
  .recherche{display:none}
  .entete h1{font-size:15.5px}
  .bascule-role{display:none}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ============================ GRAPHIQUES ============================
   Les styles vivent ici, pas dans le JavaScript : un graphique doit suivre
   le thème clair/sombre et la couleur de l'école sans être redessiné. */
.graph{width:100%;height:auto;display:block;overflow:visible}
.g-grille{stroke:var(--bord);stroke-width:1}
.g-axe{fill:var(--texte-3);font-size:10.5px;font-family:var(--texte-f)}
.g-axe.fort{fill:var(--texte-2);font-weight:600}
.g-valeur{fill:var(--texte-2);font-size:10px;font-weight:600;font-family:var(--texte-f)}
.g-ligne{fill:none;stroke:var(--donnee-1);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.g-cible{stroke:var(--bord-fort);stroke-width:1;stroke-dasharray:4 4}
.g-repere{stroke:var(--bord-fort);stroke-width:1;pointer-events:none;transition:opacity .12s}
.g-point{
  fill:var(--surface);stroke:var(--donnee-1);stroke-width:2;
  transition:r .12s ease,stroke-width .12s ease;pointer-events:none;
}
.g-point.actif{r:6;stroke-width:2.5}
.g-zone{cursor:crosshair}
.g-bande{fill:transparent;transition:fill .12s}
.g-bande.actif{fill:var(--surface-2)}
.g-barre{transition:opacity .12s}
svg:hover .g-barre{opacity:.92}

/* L'infobulle : une seule pour toute la page, positionnée en pixels écran. */
.info-graphe{
  position:fixed;top:0;left:0;z-index:400;pointer-events:none;
  background:var(--surface);border:1px solid var(--bord);border-radius:10px;
  box-shadow:var(--ombre-flottante);padding:9px 11px;min-width:150px;
  font-size:12.5px;color:var(--texte-2);
}
.info-graphe b{
  display:block;color:var(--texte);font-weight:600;font-size:12.5px;
  margin-bottom:6px;letter-spacing:-.005em;
}
.info-graphe span{display:flex;align-items:center;gap:7px;margin-top:3px}
.info-graphe i{width:8px;height:8px;border-radius:2px;flex:0 0 8px}
.info-graphe em{
  margin-left:auto;font-style:normal;font-weight:600;color:var(--texte);
  font-variant-numeric:tabular-nums;
}
.info-graphe .det{
  display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--bord);
  color:var(--texte-3);font-size:11.5px;
}

/* ---------- Anneau ---------- */
.anneau-bloc{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.anneau-svg{flex:0 0 168px;max-width:168px}
.anneau-svg svg{width:100%;height:auto;display:block}
.anneau-val{
  fill:var(--texte);font-family:var(--titre);font-weight:600;font-size:21px;
  letter-spacing:-.03em;
}
.anneau-lbl{fill:var(--texte-3);font-size:10px;font-family:var(--texte-f)}
.part{transition:opacity .15s ease,transform .15s ease;transform-origin:100px 100px;cursor:default}
.part.terne{opacity:.35}
.part.actif{transform:scale(1.045)}
.anneau-legende{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.anneau-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:8px 10px;border-radius:8px;cursor:default;
  color:var(--texte-2);font:inherit;font-size:13px;transition:background .12s;
}
.anneau-item.actif{background:var(--surface-2)}
.anneau-item .pt{width:9px;height:9px;border-radius:3px;flex:0 0 9px}
.anneau-item .nm{flex:1;min-width:0;color:var(--texte);font-weight:500}
.anneau-item .nm em{
  display:block;font-style:normal;font-size:11.5px;color:var(--texte-3);font-weight:400;
}
.anneau-item .vl{
  text-align:right;font-weight:600;color:var(--texte);font-variant-numeric:tabular-nums;
}
.anneau-item .vl em{
  display:block;font-style:normal;font-size:11.5px;color:var(--texte-3);font-weight:400;
}

/* ==================== LISTES RICHES (fiches et classement) ====================
   Un tableau dense convient à la saisie ; il convient mal à une liste qu'on
   PARCOURT (les derniers versements, les filières les plus en retard). Ces deux
   composants donnent une ligne par entité, avec de l'air et une hiérarchie. */
.fiches{display:flex;flex-direction:column;gap:8px;padding:4px 20px 20px}
.fiche{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--bord);border-radius:10px;padding:10px 12px;
  background:var(--surface);transition:border-color .12s,background .12s;
}
.fiche:hover{border-color:var(--bord-fort);background:var(--surface-2)}
.fiche .rond{
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--bord);
  display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--texte-2);
}
.fiche .qui{flex:1;min-width:0}
.fiche .qui b{
  display:block;font-size:13.5px;font-weight:600;color:var(--texte);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fiche .qui span{
  display:block;font-size:11.5px;color:var(--texte-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fiche .droite{text-align:right;flex:0 0 auto}
.fiche .droite b{
  display:block;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.fiche .droite span{display:block;font-size:11.5px;color:var(--texte-3)}

.classement{display:flex;flex-direction:column;gap:8px;padding:4px 20px 20px}
.rang{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--bord);border-radius:10px;padding:11px 13px;
  transition:border-color .12s;
}
.rang:hover{border-color:var(--bord-fort)}
.rang .num{
  flex:0 0 30px;height:30px;border-radius:8px;background:var(--surface-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;
  font-weight:500;color:var(--texte-3);
}
.rang .corps{flex:1;min-width:0}
.rang .haut{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.rang .haut b{font-size:13.5px;font-weight:600;color:var(--texte);letter-spacing:-.005em}
.rang .haut .vl{
  margin-left:auto;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
}
.rang .bas{
  display:flex;align-items:center;gap:10px;margin-top:7px;
  font-size:11.5px;color:var(--texte-3);
}
.rang .bas .jauge{
  flex:1;min-width:60px;height:5px;border-radius:3px;background:var(--surface-2);
  overflow:hidden;
}
.rang .bas .jauge i{display:block;height:100%;border-radius:3px;transition:width .5s ease}

/* ---------- Étiquette de catégorie, plus sobre qu'une pastille d'état ---------- */
.balise{
  display:inline-flex;align-items:center;font-size:11px;font-weight:500;
  padding:1.5px 7px;border-radius:5px;border:1px solid var(--bord);
  color:var(--texte-3);background:var(--surface-2);white-space:nowrap;
}

/* ---------- Onglets à icône, pour les grandes bascules de vue ---------- */
.onglets-icone{
  display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:10px;
  margin:0 20px;flex-wrap:wrap;
}
.onglets-icone button{
  flex:1;min-width:110px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:0;background:none;padding:8px 12px;border-radius:7px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:var(--texte-2);transition:.15s;
}
.onglets-icone button:hover{color:var(--texte)}
.onglets-icone button[aria-selected="true"]{
  background:var(--surface);color:var(--texte);box-shadow:var(--ombre);
}
.onglets-icone svg{flex:0 0 15px;opacity:.9}

/* ---------- Chip de tendance, dans les cartes de tête ---------- */
.tendance{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
  padding:2px 7px;border-radius:6px;white-space:nowrap;
}
.tendance.hausse{color:var(--bon);background:var(--bon-voile)}
.tendance.baisse{color:var(--critique);background:var(--critique-voile)}
.tendance.plat{color:var(--texte-2);background:var(--surface-2)}
.kpi .pied .avec{display:inline-flex;align-items:center;gap:5px;color:var(--texte-2);font-weight:500}

/* ============================ FENÊTRES MODALES ============================
   Définies une fois ici : quatre écrans en ouvrent une, et elles se ressemblent
   toutes — un titre, un corps, deux boutons. */
dialog{
  border:1px solid var(--bord);border-radius:var(--r);padding:0;
  background:var(--surface);color:var(--texte);
  max-width:520px;width:calc(100% - 32px);
  box-shadow:var(--ombre-flottante);
}
dialog::backdrop{background:rgba(9,9,11,.5)}
dialog .tete{padding:16px 20px;border-bottom:1px solid var(--bord)}
dialog .tete h2{
  font-family:var(--titre);font-weight:600;font-size:16px;letter-spacing:-.015em;margin:0;
}
dialog .tete p{margin:3px 0 0;font-size:12.5px;color:var(--texte-3)}
dialog .corps{padding:18px 20px;max-height:60vh;overflow-y:auto}
dialog .pied{
  display:flex;gap:10px;justify-content:flex-end;align-items:center;
  padding:14px 20px;border-top:1px solid var(--bord);flex-wrap:wrap;
}
dialog .champ{margin-bottom:14px}
dialog .champ label{
  display:block;font-size:12px;color:var(--texte-2);margin-bottom:5px;font-weight:500;
}
dialog .champ input[type=text],
dialog .champ input[type=email],
dialog .champ input[type=date],
dialog .champ input[type=number]{
  width:100%;border:1px solid var(--bord);border-radius:8px;
  background:var(--surface);color:var(--texte);padding:9px 11px;
  font-family:inherit;font-size:13.5px;
}
dialog .champ input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-voile);
}
dialog .deux{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){dialog .deux{grid-template-columns:1fr}}
dialog .err{display:block;color:var(--critique);font-size:12px;margin-top:6px;min-height:1em}
dialog .aide{display:block;color:var(--texte-3);font-size:12px;margin-top:5px}
dialog .raccourcis{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
dialog .raccourcis button{
  border:1px solid var(--bord);background:var(--surface-2);color:var(--texte-2);
  border-radius:7px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;
}
dialog .raccourcis button:hover{border-color:var(--accent);color:var(--texte)}
dialog code{
  font-family:var(--mono);font-size:13px;background:var(--surface-2);
  border:1px solid var(--bord);border-radius:6px;padding:2px 7px;
}

/* ============================ FEUILLE D'APPEL ============================
   Quatre états, un par bouton. Pas de menu déroulant : un professeur fait
   l'appel debout, devant trente personnes qui attendent. */
.appel-tete{
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  padding:0 20px 14px;border-bottom:1px solid var(--bord);
}
.appel-tete .champ{margin-bottom:0;flex:1;min-width:170px}
.appel-tete label{display:block;font-size:12px;color:var(--texte-2);margin-bottom:5px;font-weight:500}
.appel-tete input[type=date]{
  width:100%;border:1px solid var(--bord);border-radius:8px;background:var(--surface);
  color:var(--texte);padding:8px 10px;font-family:inherit;font-size:13.5px;
}

.appel-ligne{
  display:flex;align-items:center;gap:12px;padding:9px 20px;
  border-bottom:1px solid var(--bord);
}
.appel-ligne:last-child{border-bottom:0}
.appel-ligne .qui{flex:1;min-width:0}
.appel-ligne .qui b{display:block;font-size:13.5px;font-weight:600}
.appel-ligne .qui span{display:block;font-size:11.5px;color:var(--texte-3)}
.appel-ligne .passe{
  font-size:11px;font-weight:500;color:var(--critique);
  background:var(--critique-voile);padding:1.5px 7px;border-radius:5px;white-space:nowrap;
}

.etats{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:9px;flex:0 0 auto}
.etats button{
  border:0;background:none;padding:6px 10px;border-radius:7px;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;color:var(--texte-3);transition:.12s;
  white-space:nowrap;
}
.etats button:hover{color:var(--texte)}
.etats button[aria-pressed="true"]{background:var(--surface);box-shadow:var(--ombre)}
.etats button[data-etat="present"][aria-pressed="true"]{color:var(--bon)}
.etats button[data-etat="retard"][aria-pressed="true"]{color:var(--alerte)}
.etats button[data-etat="absent"][aria-pressed="true"]{color:var(--critique)}
.etats button[data-etat="excuse"][aria-pressed="true"]{color:var(--texte-2)}
@media(max-width:620px){
  .appel-ligne{flex-wrap:wrap}
  .etats{width:100%}
  .etats button{flex:1;padding:8px 4px}
}

/* ============================ DOCUMENTS IMPRIMÉS ============================
   Composés en HTML, mis en page par le navigateur. « Enregistrer au format
   PDF » est dans toutes les boîtes d'impression — pas de moteur à embarquer,
   et ce qu'on voit à l'écran est ce qui sort de l'imprimante.

   Ces documents sont TOUJOURS en noir sur blanc, même si l'écran est en thème
   sombre : on n'imprime pas une page noire, et une école qui photocopie ne veut
   pas de fond gris. */
#impression{display:none}

.feuille-doc{
  background:#fff;color:#14181B;padding:26mm 20mm;
  font-family:var(--texte-f);font-size:11pt;line-height:1.45;
}
.feuille-doc + .feuille-doc{border-top:1px dashed #bbb}

.doc-tete{
  display:flex;gap:14px;align-items:flex-start;
  border-bottom:2px solid #14181B;padding-bottom:12px;margin-bottom:16px;
}
.doc-sceau{
  width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:#14181B;color:#fff;
  display:grid;place-items:center;font-family:var(--marque);font-weight:700;font-size:14px;
}
.doc-tete h1{font-family:var(--marque);font-weight:700;font-size:16pt;letter-spacing:-.02em;margin:0}
.doc-lieu{font-size:9pt;color:#5A6268;margin-top:1px}
.doc-type{margin-left:auto;text-align:right;font-size:9pt;color:#5A6268}
.doc-type b{display:block;font-size:11pt;color:#14181B;font-weight:600}

.doc-ident{
  display:grid;grid-template-columns:1fr 1fr;gap:6px 20px;margin-bottom:16px;font-size:10pt;
}
.doc-ident span{color:#5A6268;display:inline-block;min-width:78px}
.doc-ident b{font-weight:600}

.feuille-doc table{width:100%;border-collapse:collapse;font-size:9.5pt}
.feuille-doc th{
  text-align:left;font-size:8pt;letter-spacing:.05em;text-transform:uppercase;
  color:#5A6268;font-weight:600;padding:7px 8px;border-bottom:1px solid #14181B;
}
.feuille-doc td{padding:6px 8px;border-bottom:1px solid #E3E6E6}
.feuille-doc .n{text-align:right;font-variant-numeric:tabular-nums}
.feuille-doc tr.ue td{background:#F2F4F4;font-weight:600}
.feuille-doc td.ec{padding-left:22px}
.feuille-doc td.ec i{color:#5A6268;font-style:normal;font-size:8.5pt}
.feuille-doc tr.total td{
  border-top:2px solid #14181B;border-bottom:0;font-weight:700;padding-top:9px;
}

.doc-corps{font-size:11pt;line-height:1.75;margin:18px 0}
.doc-corps p{margin:0 0 12px}
.doc-nom{
  font-family:var(--marque);font-weight:700;font-size:15pt;text-align:center;
  margin:18px 0 !important;letter-spacing:-.02em;
}
.doc-lieu-date{margin-top:20px;font-size:10pt;color:#5A6268}

.doc-pied{
  display:flex;gap:20px;align-items:flex-end;
  margin-top:26px;padding-top:14px;border-top:1px solid #E3E6E6;
}
.doc-verif{font-size:8.5pt;color:#5A6268;line-height:1.5;flex:1}
.doc-verif b{color:#14181B;font-size:9pt}
.doc-verif code{font-family:var(--mono);font-size:10pt;color:#14181B;letter-spacing:.06em}

/* La signature du produit au pied du document. Encre en dur : le papier n'a
   pas de thème. Elle reste au troisième rang derrière l'établissement (en
   tête, à 16 pt) et le code de vérification — c'est l'école qui délivre, le
   produit ne fait qu'attester. */
.doc-marque{display:flex;align-items:center;gap:5px;margin-top:9px}
.doc-marque svg{display:block;flex:0 0 auto}
.doc-marque span{
  font-family:var(--marque);font-weight:700;font-size:8.5pt;
  letter-spacing:-.02em;color:#14181B;
}
.doc-marque span i{font-style:normal;color:#5A6268}
.doc-qr{flex:0 0 auto}
.doc-signature{flex:0 0 150px;text-align:center;font-size:8.5pt;color:#5A6268}
.doc-signature .trait{border-top:1px solid #14181B;margin-bottom:5px;height:36px}

@media print{
  /* Pendant l'impression, l'application disparaît complètement : il ne doit
     rester QUE le document. */
  body.en-impression > *{display:none !important}
  body.en-impression #impression{display:block !important}
  body.en-impression{background:#fff;margin:0}
  .feuille-doc{
    padding:0;page-break-after:always;break-after:page;border:0;
  }
  .feuille-doc:last-child{page-break-after:auto;break-after:auto}
  .feuille-doc + .feuille-doc{border-top:0}
  .feuille-doc.large{font-size:9.5pt}
  .feuille-doc table{page-break-inside:auto}
  .feuille-doc tr{page-break-inside:avoid}
  @page{size:A4;margin:16mm 14mm}
}

/* ---------- Liste de paires étiquette / valeur ---------- */
.paire{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px;align-items:baseline}
.paire dt{color:var(--texte-3);font-size:12.5px;white-space:nowrap}
.paire dd{margin:0;font-weight:500}
.paire a{color:var(--accent-fonce);text-decoration:none}
.paire a:hover{text-decoration:underline}
@media(max-width:420px){.paire{grid-template-columns:1fr;gap:2px 0}.paire dd{margin-bottom:8px}}

/* ⚠️ Bug attrapé à l'écran, et qui aurait imprimé des relevés PRESQUE VIDES.
   La règle générale « table{color:var(--texte)} » s'applique aussi aux tableaux
   des documents : en thème sombre, --texte vaut blanc — donc du texte blanc sur
   du papier blanc. Le nom des matières et les notes disparaissaient ; seuls les
   codes en gris restaient. Personne ne l'aurait vu avant la première impression
   d'un établissement, parce qu'on travaille en thème clair.

   Un document imprimé ne suit JAMAIS le thème de l'écran : il fixe ses couleurs. */
.feuille-doc,
.feuille-doc table,
.feuille-doc td,
.feuille-doc th,
.feuille-doc tr.ue td,
.feuille-doc tr.total td,
.feuille-doc b,
.feuille-doc p{color:#14181B}
.feuille-doc th{color:#5A6268}
.feuille-doc td.ec i,
.feuille-doc .doc-lieu,
.feuille-doc .doc-type,
.feuille-doc .doc-ident span,
.feuille-doc .doc-verif,
.feuille-doc .doc-signature,
.feuille-doc .doc-lieu-date{color:#5A6268}
.feuille-doc .doc-sceau{color:#fff}
.feuille-doc tbody tr:hover{background:transparent}

/* ============================================================================
   LA SIGNATURE DU PRODUIT
   ----------------------------------------------------------------------------
   Le signe « Le socle » et le mot. Elle n'apparaît QUE là où c'est University
   OS qui parle : la page de connexion, la page publique de vérification, le
   pied des documents imprimés. Jamais dans le rail d'une école — là, c'est
   l'établissement qui est chez lui. Voir identite/charte.html.
   ========================================================================== */
.marque-uos{display:inline-flex;align-items:center;gap:8px}
.marque-uos svg{display:block;flex:0 0 auto;color:var(--encre-marque)}
.marque-uos .mot{
  font-family:var(--marque);font-weight:700;font-size:13px;
  letter-spacing:-.02em;line-height:1;color:var(--texte);
}
.marque-uos .mot i{font-style:normal;color:var(--texte-3)}

/* Le bouton d'une action qu'on ne défait pas — retirer une séance, retirer un
   réglage, quitter en perdant sa saisie. La couleur est SÉMANTIQUE, pas
   l'accent : elle ne change pas d'une école à l'autre, parce que « on va
   perdre quelque chose » ne dépend pas de l'établissement. */
/* ⚠️ PAS var(--critique) : en thème sombre ce jeton est un rouge CLAIR (#F87171),
   calibré pour du TEXTE sur fond sombre. Du blanc posé dessus tombe à 2,8:1 —
   sous le seuil lisible. Un fond veut un rouge foncé, un texte veut un rouge
   clair : ce ne sont pas les mêmes valeurs, et les confondre est la façon la
   plus courante de rendre un bouton d'alerte illisible la nuit. */
.bouton.plein.danger{background:#B42318;border-color:#B42318;color:#fff}
.bouton.plein.danger:hover{background:#9A1D14;border-color:#9A1D14}

/* La boîte de confirmation partagée (UOS.confirmer) reste étroite : elle pose
   une question, elle n'affiche pas un formulaire. */
#uos-confirmer{max-width:420px}