/* =====================================================================
   SIGE-Mali — Feuille de style
   Polices système uniquement (aucun téléchargement), mobile d'abord.
   ===================================================================== */

:root {
  --papier: #F2F4F1;        /* fond : papier de registre */
  --surface: #FFFFFF;
  --surface-2: #E7EBE6;
  --encre: #18261F;         /* texte principal */
  --encre-2: #4A5A52;       /* texte secondaire */
  --trait: #CDD5CF;         /* bordures */
  --vert: #1D6B45;          /* actions principales */
  --vert-fonce: #14512F;
  --vert-pale: #DCEBE2;
  --or: #E2A72B;            /* focus et repères */
  --or-pale: #FBEFD3;
  --rouge: #B42318;         /* erreurs uniquement */
  --rouge-pale: #FBE4E1;
  --rayon: 10px;
  --rayon-petit: 6px;
  --ombre: 0 1px 2px rgba(24, 38, 31, .08);
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #121A16; --surface: #1A241F; --surface-2: #223029;
    --encre: #E6EDE8; --encre-2: #A6B5AD; --trait: #33443B;
    --vert: #3FA372; --vert-fonce: #5BBE8C; --vert-pale: #1F3A2C;
    --or: #F0BC4C; --or-pale: #3A2F14; --rouge: #F07167; --rouge-pale: #3D1E1B;
    --ombre: none;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 16px/1.5 var(--police);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 650; }
h3 { font-size: 1.05rem; font-weight: 650; }
p { margin: 0 0 .75rem; }
a { color: var(--vert); }

:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; border-radius: 4px; }

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

/* ---------- Bandeau tricolore (repère officiel) ---------- */
.bandeau-republique { display: flex; height: 5px; position: sticky; top: 0; z-index: 30; }
.bandeau-republique span { flex: 1; }
.bandeau-republique span:nth-child(1) { background: #1D6B45; }
.bandeau-republique span:nth-child(2) { background: #E2A72B; }
.bandeau-republique span:nth-child(3) { background: #B42318; }

.chargement { padding: 3rem 1rem; text-align: center; color: var(--encre-2); }

/* ---------- Écran de connexion ---------- */
.connexion {
  min-height: calc(100vh - 5px);
  display: grid;
  place-items: center;
  padding: 1.5rem 1rem;
}
.connexion-carte { width: 100%; max-width: 380px; }
.connexion-carte.installation { max-width: 640px; }
.connexion-carte.installation h2 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.connexion-carte.installation .champ small { display: block; margin-top: .2rem; }
.resultat-installation { display: grid; gap: .75rem; margin: 1rem 0; }
.resultat-installation dt { color: var(--encre-2); font-size: .9rem; }
.resultat-installation dd { margin: .15rem 0 0; }
.resultat-installation .mot-de-passe { font-size: 1.4rem; letter-spacing: .05em; font-family: ui-monospace, monospace; }
.connexion-entete { margin-bottom: 1.75rem; }
.connexion-entete .devise { color: var(--encre-2); font-size: .9rem; margin-bottom: 1.25rem; }
.connexion-entete h1 { font-size: 2rem; margin-bottom: .25rem; }
.connexion-entete .sous-titre { color: var(--encre-2); margin: 0; }
.connexion form {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.25rem;
  box-shadow: var(--ombre);
}
.connexion .aide { font-size: .85rem; color: var(--encre-2); margin-top: 1rem; }

/* ---------- Formulaires ---------- */
.champ { display: grid; gap: .3rem; margin-bottom: 1rem; }
.champ > span { font-weight: 600; font-size: .92rem; }
.champ .indication { font-weight: 400; font-size: .82rem; color: var(--encre-2); }

input, select, textarea {
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-petit);
  padding: .6rem .7rem;
  min-height: 44px;            /* cible tactile confortable */
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--vert); outline: 3px solid var(--or); outline-offset: 0; }
input[aria-invalid="true"] { border-color: var(--rouge); background: var(--rouge-pale); }
input.court { max-width: 7.5rem; text-align: right; }

.saisie-unite { display: flex; align-items: center; gap: .5rem; }
.saisie-unite .unite { color: var(--encre-2); font-size: .9rem; white-space: nowrap; }

.case { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.case input { width: 1.25rem; height: 1.25rem; min-height: 0; accent-color: var(--vert); }

/* ---------- Boutons ---------- */
.bouton {
  font: inherit; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 44px; padding: .55rem 1rem;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--vert);
  background: var(--vert); color: #fff;
  cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.bouton.secondaire { background: transparent; color: var(--vert); }
.bouton.secondaire:hover { background: var(--vert-pale); }
.bouton.discret { background: transparent; border-color: transparent; color: var(--encre-2); }
.bouton.discret:hover { background: var(--surface-2); color: var(--encre); }
.bouton.danger { background: transparent; color: var(--rouge); border-color: var(--rouge); }
.bouton.danger:hover { background: var(--rouge-pale); }
.bouton.large { width: 100%; }
.bouton.petit { min-height: 36px; padding: .3rem .7rem; font-size: .9rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }

/* ---------- Messages ---------- */
.message {
  border-radius: var(--rayon-petit);
  padding: .7rem .9rem; margin-bottom: 1rem; font-size: .95rem;
  border-left: 4px solid;
}
.message.erreur { background: var(--rouge-pale); border-color: var(--rouge); }
.message.info { background: var(--or-pale); border-color: var(--or); }
.message.succes { background: var(--vert-pale); border-color: var(--vert); }
.message:empty { display: none; }

.notifications {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: grid; gap: .5rem; z-index: 50; width: min(92vw, 420px);
}
.notification {
  background: var(--encre); color: var(--papier);
  padding: .75rem 1rem; border-radius: var(--rayon-petit);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
  animation: apparition .18s ease-out;
}
.notification.erreur { background: var(--rouge); color: #fff; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Structure générale ---------- */
.coquille { display: grid; min-height: calc(100vh - 5px); grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); }

.entete {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 5px; z-index: 20;
}
.entete .marque { font-weight: 750; font-size: 1.05rem; color: var(--encre); text-decoration: none; }
.entete .ecole { color: var(--encre-2); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entete .espace { flex: 1; }
.entete .qui { text-align: right; font-size: .85rem; line-height: 1.25; display: none; }
.entete .qui small { color: var(--encre-2); display: block; }

.corps { display: grid; grid-template-columns: minmax(0, 1fr); }

.navigation {
  display: none;
  background: var(--surface);
  border-right: 1px solid var(--trait);
  padding: 1rem .5rem;
}
.navigation a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .75rem; border-radius: var(--rayon-petit);
  color: var(--encre); text-decoration: none; font-weight: 500;
}
.navigation a:hover { background: var(--surface-2); }
.navigation a[aria-current="page"] { background: var(--vert-pale); color: var(--vert-fonce); font-weight: 650; }
.navigation a.bientot { color: var(--encre-2); }
.navigation .titre-nav { font-size: .8rem; color: var(--encre-2); padding: 1rem .75rem .35rem; }

.contenu { padding: 1.25rem 1rem 6rem; max-width: 980px; width: 100%; min-width: 0; }

@media (min-width: 860px) {
  .corps { grid-template-columns: 240px minmax(0, 1fr); }
  .navigation { display: block; }
  .entete .qui { display: block; }
  .contenu { padding: 2rem 2.5rem 4rem; }
  .menu-mobile { display: none !important; }
}

/* Menu mobile en bas d'écran */
.menu-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: var(--surface); border-top: 1px solid var(--trait);
  padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom));
}
.menu-mobile a {
  flex: 1; text-align: center; padding: .45rem .25rem;
  color: var(--encre-2); text-decoration: none; font-size: .78rem; font-weight: 600;
  border-radius: var(--rayon-petit);
}
.menu-mobile a svg { display: block; margin: 0 auto .15rem; }
.menu-mobile a[aria-current="page"] { color: var(--vert); background: var(--vert-pale); }

/* ---------- Accueil ---------- */
.salutation { margin-bottom: 1.5rem; }
.salutation p { color: var(--encre-2); margin: 0; }

.modules { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .modules { grid-template-columns: 1fr 1fr; } }

.module {
  display: grid; grid-template-columns: auto 1fr; gap: .25rem .9rem; align-items: start;
  padding: 1rem; border-radius: var(--rayon);
  background: var(--surface); border: 1px solid var(--trait);
  color: var(--encre); text-decoration: none;
}
a.module:hover { border-color: var(--vert); }
.module .icone {
  grid-row: span 2; width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--vert-pale); color: var(--vert-fonce);
}
.module strong { font-size: 1rem; }
.module span.desc { color: var(--encre-2); font-size: .88rem; }
.module.inactif { background: transparent; border-style: dashed; }
.module.inactif .icone { background: var(--surface-2); color: var(--encre-2); }
.module .phase { font-size: .78rem; color: var(--encre-2); }

/* ---------- Paramètres ---------- */
.en-tete-page { margin-bottom: 1.25rem; }
.en-tete-page p { color: var(--encre-2); margin: 0; }

.onglets {
  display: flex; gap: .25rem; overflow-x: auto;
  border-bottom: 1px solid var(--trait);
  margin: 0 -1rem 1.25rem; padding: 0 1rem;
  scrollbar-width: none;
}
.onglets::-webkit-scrollbar { display: none; }
.onglets a {
  white-space: nowrap; padding: .7rem .8rem;
  color: var(--encre-2); text-decoration: none; font-weight: 600; font-size: .95rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.onglets a[aria-current="page"] { color: var(--vert-fonce); border-bottom-color: var(--vert); }
@media (min-width: 860px) { .onglets { margin: 0 0 1.5rem; padding: 0; } }

.bloc {
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1rem; margin-bottom: 1rem;
}
.bloc > h2, .bloc > h3 { margin-bottom: .9rem; }
.bloc .explication { color: var(--encre-2); font-size: .9rem; margin-top: -.5rem; }

.ligne-param {
  display: grid; gap: .35rem .9rem; align-items: center;
  padding: .7rem 0; border-top: 1px solid var(--surface-2);
}
.ligne-param:first-of-type { border-top: 0; }
.ligne-param label { font-weight: 500; }
@media (min-width: 640px) { .ligne-param { grid-template-columns: 1fr 15rem; } }

.barre-enregistrer {
  position: sticky; bottom: 4.5rem; z-index: 10;
  display: flex; gap: .6rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--or-pale); border: 1px solid var(--or);
  padding: .6rem .8rem; border-radius: var(--rayon);
}
@media (min-width: 860px) { .barre-enregistrer { bottom: 1rem; } }
.barre-enregistrer[hidden] { display: none; }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; margin: 0 -1rem; padding: 0 1rem; position: relative; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--surface-2); vertical-align: middle; }
th { font-size: .82rem; color: var(--encre-2); font-weight: 600; }
td.nombre, th.nombre { text-align: right; }
tfoot td { font-weight: 700; border-bottom: 0; }

/* Barème : bande de couleur de 0 à 20 */
.echelle { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin: .25rem 0 1rem; border: 1px solid var(--trait); }
.echelle span { display: block; height: 100%; }
.echelle-legende { display: flex; justify-content: space-between; font-size: .78rem; color: var(--encre-2); margin-top: -.75rem; margin-bottom: 1rem; }

/* Séries */
.liste-series { display: grid; gap: .5rem; }
.serie-ligne {
  display: flex; align-items: center; gap: .75rem; width: 100%;
  padding: .75rem .9rem; border-radius: var(--rayon-petit);
  background: var(--surface); border: 1px solid var(--trait);
  font: inherit; color: var(--encre); text-align: left; cursor: pointer;
}
.serie-ligne:hover { border-color: var(--vert); }
.serie-ligne[aria-expanded="true"] { border-color: var(--vert); background: var(--vert-pale); }
.serie-ligne .code { font-weight: 750; min-width: 4.2rem; }
.serie-ligne .lib { flex: 1; font-size: .92rem; color: var(--encre-2); }
.serie-ligne .total { font-size: .85rem; color: var(--encre-2); white-space: nowrap; }
.serie-detail { padding: 1rem .25rem .5rem; }

.pastille {
  display: inline-block; font-size: .78rem; font-weight: 600;
  padding: .1rem .5rem; border-radius: 999px;
  background: var(--surface-2); color: var(--encre-2);
}
.pastille.vert { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille.or { background: var(--or-pale); color: #7A5508; }
.pastille.rouge { background: var(--rouge-pale); color: var(--rouge); }
@media (prefers-color-scheme: dark) { .pastille.or { color: var(--or); } }

/* Utilisateurs */
.carte-utilisateur {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center;
  padding: .8rem 0; border-top: 1px solid var(--surface-2);
}
.carte-utilisateur:first-child { border-top: 0; }
.carte-utilisateur .nom { font-weight: 600; }
.carte-utilisateur .meta { font-size: .85rem; color: var(--encre-2); }
.carte-utilisateur.desactive .nom { color: var(--encre-2); text-decoration: line-through; }

.mot-de-passe-affiche {
  font-size: 1.6rem; font-weight: 750; letter-spacing: .08em;
  background: var(--or-pale); border: 1px dashed var(--or);
  padding: .6rem 1rem; border-radius: var(--rayon-petit);
  text-align: center; margin: .5rem 0 1rem; user-select: all;
}

/* Matrice des droits */
.matrice td.oui { color: var(--vert); font-weight: 700; text-align: center; }
.matrice td.non { color: var(--trait); text-align: center; }
.matrice th.role { text-align: center; font-size: .78rem; }

/* Fenêtre de dialogue */
dialog {
  border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 1.25rem; width: min(94vw, 520px); max-height: 90vh;
  background: var(--surface); color: var(--encre);
}
dialog::backdrop { background: rgba(18, 26, 22, .55); }
dialog h2 { margin-bottom: 1rem; }

.affectations-classe { margin-bottom: 1rem; }
.affectations-classe h3 { font-size: .95rem; margin-bottom: .25rem; }

.vide { color: var(--encre-2); padding: 1rem 0; }
.cache-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ligne-param .indication { display: block; font-size: .82rem; color: var(--encre-2); font-weight: 400; }
.titre-a-venir { margin: 2rem 0 .75rem; font-size: 1rem; color: var(--encre-2); }
.carte-utilisateur { grid-template-columns: 1fr; }
.carte-utilisateur .actions { margin-top: .35rem; gap: .25rem; }
.carte-utilisateur .pastille { margin-top: .3rem; }
@media (min-width: 720px) {
  .carte-utilisateur { grid-template-columns: 1fr auto; }
  .carte-utilisateur .actions { margin-top: 0; justify-content: flex-end; }
}
.matrice tbody th { color: var(--encre); font-weight: 400; font-size: .92rem; }
.explication { color: var(--encre-2); font-size: .9rem; }
fieldset.bloc { margin: 0 0 .75rem; }
fieldset legend { padding: 0 .25rem; }
.liste-series { grid-template-columns: minmax(0, 1fr); }
.serie-ligne { flex-wrap: wrap; row-gap: .2rem; }
.serie-ligne .lib { flex: 1 1 11rem; min-width: 0; }
.bouton.texte-alerte { color: var(--rouge); }
.bouton.texte-alerte:hover { background: var(--rouge-pale); color: var(--rouge); }
/* Notifications au-dessus du menu du bas sur téléphone */
.notifications { bottom: calc(5rem + env(safe-area-inset-bottom)); }
@media (min-width: 860px) { .notifications { bottom: 1.5rem; } }
/* Lecture seule : la valeur s'affiche comme du texte, pas comme un champ */
input:disabled, select:disabled {
  background: transparent; border-color: transparent; color: var(--encre);
  opacity: 1; -webkit-text-fill-color: var(--encre); appearance: none; padding-left: 0;
}
input.court:disabled { padding-right: 0; text-align: left; max-width: 4.5rem; font-weight: 650; }
select:disabled { font-weight: 650; }

/* =====================================================================
   Phase 3 — Élèves et effectifs
   ===================================================================== */
:root { --serie-filles: #1F7A4D; --serie-garcons: #5B5FC7; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --serie-filles: #3FA372; --serie-garcons: #7E83E8; }
}

.fil { margin-bottom: .75rem; font-size: .92rem; }
.fil a { text-decoration: none; font-weight: 600; }
.espace { flex: 1; }

/* Barre de filtres */
.barre-outils { display: grid; gap: .6rem; margin-bottom: .6rem; }
@media (min-width: 640px) { .barre-outils { grid-template-columns: minmax(12rem, 18rem) 1fr; } }
.barre-outils.secondaire { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.resume-liste { color: var(--encre-2); font-size: .9rem; margin: .5rem 0 .75rem; }

/* Liste des élèves */
.liste-eleves { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.ligne-eleve {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  padding: .65rem .9rem; border-top: 1px solid var(--surface-2);
  color: var(--encre); text-decoration: none; min-height: 56px;
}
.ligne-eleve:first-child { border-top: 0; }
.ligne-eleve:hover { background: var(--vert-pale); }
.ligne-eleve.sorti .identite strong { color: var(--encre-2); }
.ligne-eleve .identite { display: grid; min-width: 0; }
.ligne-eleve .identite strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne-eleve .meta { font-size: .82rem; color: var(--encre-2); }
.ligne-eleve .marques { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.liste-eleves .vide { padding: 1.25rem; margin: 0; }

.sexe {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .85rem; color: #fff;
}
.sexe-F { background: var(--serie-filles); }
.sexe-M { background: var(--serie-garcons); }
.sexe.grand { width: 52px; height: 52px; font-size: 1.2rem; flex: none; }

/* Fiche élève */
.en-tete-fiche { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .5rem; }
.en-tete-fiche h1 { margin-bottom: .1rem; }
.en-tete-fiche .meta { color: var(--encre-2); margin-bottom: .4rem; }
.grille-fiche { display: grid; gap: 1rem; margin-top: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .grille-fiche { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grille-fiche .bloc { margin-bottom: 0; }
dl { margin: 0; }
.ligne-info { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .5rem; padding: .45rem 0; border-top: 1px solid var(--surface-2); }
.ligne-info:first-child { border-top: 0; }
.ligne-info dt { color: var(--encre-2); font-size: .9rem; }
.ligne-info dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .ligne-info { grid-template-columns: 1fr; gap: 0; } }

.parcours { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--trait); }
.parcours li { position: relative; display: grid; padding: 0 0 .9rem .5rem; font-size: .92rem; }
.parcours li::before {
  content: ''; position: absolute; left: -1.43rem; top: .3rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--vert);
}
.parcours .date { font-size: .8rem; color: var(--encre-2); }
.parcours .auteur { font-size: .8rem; color: var(--encre-2); }
.liste-simple { margin: .25rem 0 .5rem; padding-left: 1.1rem; }
.liste-simple li { margin: .2rem 0; }

/* Formulaire élève */
.grille-champs { display: grid; gap: 0 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grille-champs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.choix-sexe { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.choix-sexe legend { font-weight: 600; font-size: .92rem; padding: 0; margin-bottom: .3rem; width: 100%; }
[hidden] { display: none !important; }

/* Statistiques */
.entete-rapport { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1rem; }
.entete-rapport h2 { margin-bottom: .2rem; }
.entete-bloc { display: flex; gap: .75rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .5rem; }
.entete-bloc h2 { margin: 0; }
.entete-bloc select { width: auto; min-width: 12rem; }

.tuiles { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 860px) { .tuiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tuile { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .9rem 1rem; display: grid; gap: .1rem; }
.tuile .valeur { font-size: 1.7rem; font-weight: 750; line-height: 1.1; color: var(--encre); }
.tuile .libelle { font-weight: 600; color: var(--encre); font-size: .92rem; }
.tuile .detail { font-size: .8rem; color: var(--encre-2); }

.tableau-effectifs td .bouton { margin-left: .25rem; }

.legende { display: flex; gap: 1.25rem; font-size: .88rem; color: var(--encre-2); margin: .25rem 0 .5rem; }
.legende > span { display: inline-flex; align-items: center; gap: .4rem; }
.pastille-couleur { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pastille-couleur.marque-filles { background: var(--serie-filles); }
.pastille-couleur.marque-garcons { background: var(--serie-garcons); }

.conteneur-pyramide { max-width: 680px; }
.pyramide { width: 100%; height: auto; display: block; font-family: var(--police); }
.pyramide .marque-filles { fill: var(--serie-filles); }
.pyramide .marque-garcons { fill: var(--serie-garcons); }
.pyramide .age { font-size: 13px; font-weight: 650; fill: var(--encre); }
.pyramide .valeur { font-size: 12px; fill: var(--encre-2); }
.pyramide .entete-serie, .pyramide .entete-age { font-size: 12px; font-weight: 650; fill: var(--encre-2); }
.pyramide .axe { stroke: var(--trait); stroke-width: 1; }
.pyramide .zone-survol { fill: transparent; }
.pyramide .ligne-pyramide:hover .zone-survol, .pyramide .ligne-pyramide:focus .zone-survol { fill: var(--surface-2); }
.pyramide .ligne-pyramide:focus { outline: none; }
.vue-tableau { margin-top: .75rem; }
.vue-tableau summary, .detail-groupe summary { cursor: pointer; color: var(--vert); font-weight: 600; padding: .4rem 0; }
.detail-groupe ol { columns: 2; font-size: .88rem; margin: .25rem 0 .5rem; }

/* =====================================================================
   Documents officiels A4 (certificats)
   ===================================================================== */
.page-document { min-height: calc(100vh - 5px); background: var(--surface-2); padding-bottom: 2rem; }
.barre-document {
  display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--trait); position: sticky; top: 5px; z-index: 5;
}
.zone-document { padding: 1rem .5rem; overflow-x: auto; }

.feuille-a4 {
  width: 210mm; min-height: 297mm; margin: 0 auto; padding: 18mm 20mm;
  background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-size: 12.5pt; line-height: 1.6;
  display: flex; flex-direction: column;
}
.doc-entete { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; font-size: 9.5pt; line-height: 1.35; }
.doc-entete p { margin: 0; }
.doc-administration { text-align: center; }
.doc-administration .trait, .doc-republique .trait { letter-spacing: -1px; }
.doc-administration .etab { font-weight: 700; margin-top: 1mm; }
.doc-administration .petit { font-size: 8.5pt; }
.doc-republique { text-align: center; }
.doc-republique .pays { font-weight: 700; font-size: 11pt; }
.doc-republique .devise { font-style: italic; }
.doc-republique .drapeau { display: flex; width: 18mm; height: 3mm; margin: 2mm auto 4mm; }
.doc-republique .drapeau span { flex: 1; }
.doc-republique .drapeau span:nth-child(1) { background: #14B53A; }
.doc-republique .drapeau span:nth-child(2) { background: #FCD116; }
.doc-republique .drapeau span:nth-child(3) { background: #CE1126; }
.doc-republique .numero { font-weight: 700; border: 1px solid #111; display: inline-block; padding: .5mm 3mm; }
.doc-titre {
  text-align: center; font-size: 17pt; letter-spacing: .04em; margin: 16mm 0 10mm;
  padding: 3mm 0; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111;
}
.doc-corps { flex: 1; text-align: justify; }
.doc-corps p { margin: 0 0 5mm; text-indent: 8mm; }
.doc-pied { margin-top: 10mm; }
.doc-pied p { margin: 0; }
.doc-signature { margin: 6mm 0 0 auto; width: 75mm; text-align: center; }
.zone-cachet {
  height: 32mm; border: 1px dashed #999; margin: 3mm 0; display: grid; place-items: center;
  color: #999; font-size: 9pt; font-style: italic;
}
.doc-mention { margin-top: 12mm !important; font-size: 8pt; color: #555; text-align: center; }

@page { size: A4; margin: 0; }
@media print {
  body { background: #fff; }
  .bandeau-republique, .barre-document, .entete, .navigation, .menu-mobile, .notifications,
  .onglets, .ne-pas-imprimer, .fil, .barre-enregistrer { display: none !important; }
  .page-document, .zone-document { background: #fff; padding: 0; min-height: 0; }
  .feuille-a4 { box-shadow: none; margin: 0; width: 210mm; min-height: 297mm; }
  .corps { display: block; }
  .contenu { padding: 10mm 12mm; max-width: none; }
  .bloc, .tuile { break-inside: avoid; }
}
.tableau-conteneur td.nombre, .tableau-conteneur th.nombre { white-space: nowrap; }
.tableau-effectifs td:first-child { white-space: nowrap; }
.tableau-conteneur table thead th { vertical-align: bottom; }

/* =====================================================================
   Phase 4 — Appel et assiduité
   ===================================================================== */
/* Niveaux d'alerte : toujours accompagnés de leur libellé */
.pastille.niveau-excellente { background: var(--vert-pale); color: var(--vert-fonce); }
.pastille.niveau-normale { background: var(--surface-2); color: var(--encre-2); }
.pastille.niveau-vigilance { background: var(--or-pale); color: #7A5508; }
.pastille.niveau-alerte { background: #FCE3CF; color: #8A3B0C; }
.pastille.niveau-critique { background: var(--rouge); color: #fff; }
.pastille.niveau-sans_donnees { background: transparent; color: var(--encre-2); border: 1px dashed var(--trait); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pastille.niveau-vigilance { color: var(--or); }
  :root:not([data-theme="light"]) .pastille.niveau-alerte { background: #4A2A14; color: #F5A36B; }
}
.texte-alerte { color: var(--rouge); }

/* Choix de la séance */
.choix-seance .grille-champs { gap: 0 1rem; }
.heures { display: flex; align-items: center; gap: .5rem; }
.heures input { max-width: 8.5rem; }
.puces-creneaux { display: flex; flex-wrap: wrap; gap: .4rem; }
.puce {
  font: inherit; font-size: .88rem; font-weight: 600; min-height: 36px; padding: .3rem .75rem;
  border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); color: var(--encre-2); cursor: pointer;
}
.puce.active { background: var(--vert); border-color: var(--vert); color: #fff; }

/* Feuille d'appel */
.entete-feuille {
  position: sticky; top: calc(5px + 3.1rem); z-index: 8;
  display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr);
  background: var(--papier); padding: .5rem 0;
}
@media (min-width: 640px) { .entete-feuille { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
.compteurs-appel { display: flex; gap: .4rem; flex-wrap: wrap; }
.compteur { padding: .25rem .6rem; border-radius: 999px; font-size: .88rem; background: var(--surface); border: 1px solid var(--trait); }
.compteur.present strong { color: var(--vert); }
.compteur.absent strong { color: var(--rouge); }
.compteur.retard strong { color: #9A6A00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .compteur.retard strong { color: var(--or); } }

.liste-appel { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; }
.ligne-appel {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center;
  padding: .55rem .75rem; border-top: 1px solid var(--surface-2); border-left: 4px solid transparent;
}
.ligne-appel:first-child { border-top: 0; }
.ligne-appel[data-etat="A"] { border-left-color: var(--rouge); background: var(--rouge-pale); }
.ligne-appel[data-etat="R"] { border-left-color: var(--or); background: var(--or-pale); }
.nom-appel { min-width: 0; line-height: 1.3; }
.nom-appel .matricule { display: block; font-size: .78rem; color: var(--encre-2); }
.groupe-etats { display: flex; gap: .3rem; }
.etat {
  width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--trait);
  background: var(--surface); color: var(--encre-2); font: inherit; font-weight: 750; cursor: pointer;
}
.etat-P[aria-pressed="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.etat-A[aria-pressed="true"] { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.etat-R[aria-pressed="true"] { background: var(--or); border-color: var(--or); color: #241A00; }
.detail-ligne { grid-column: 1 / -1; display: grid; gap: .4rem; }
.detail-ligne:empty { display: none; }
.detail-ligne input.heure { max-width: 8rem; }
.case.petite { min-height: 32px; font-size: .9rem; }
.barre-valider {
  position: sticky; bottom: calc(4.4rem + env(safe-area-inset-bottom)); z-index: 8;
  padding: .75rem 0; background: linear-gradient(to top, var(--papier) 70%, transparent);
}
@media (min-width: 860px) { .barre-valider { bottom: 0; } }
.resultat-appel { margin-top: 1rem; border-left: 4px solid var(--vert); }

/* Suivi du jour */
.suivi-classe { padding: .6rem 0; border-top: 1px solid var(--surface-2); }
.suivi-classe:first-of-type { border-top: 0; }
.suivi-classe h3 { margin-bottom: .3rem; }
.liste-seances { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.liste-seances li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .92rem; }
.liste-seances .creneau { font-weight: 650; min-width: 6.5rem; }
.liste-seances .quoi { flex: 1; min-width: 10rem; }
.liste-seances .chiffres { display: flex; gap: .3rem; }

/* Absences à justifier */
.liste-justifier { display: grid; gap: .6rem; }
.carte-absence {
  display: grid; gap: .5rem; grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--trait); border-left: 4px solid var(--rouge);
  border-radius: var(--rayon); padding: .75rem .9rem;
}
@media (min-width: 720px) { .carte-absence { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.carte-absence .qui { display: grid; gap: .1rem; min-width: 0; }
.carte-absence .meta { font-size: .85rem; color: var(--encre-2); }
.carte-absence .actions { margin-top: 0; }

/* Tableau d'assiduité */
.tableau-assiduite td { vertical-align: middle; }
.tableau-assiduite td:first-child { white-space: nowrap; }
.jauge { display: inline-block; width: 48px; height: 6px; border-radius: 3px; background: var(--surface-2); margin-right: .4rem; vertical-align: middle; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--vert); border-radius: 3px; }
.ligne-niveau-critique td:first-child a { font-weight: 700; color: var(--rouge); }
.graphique-semaines { width: 100%; max-width: 680px; height: auto; display: block; font-family: var(--police); }
.graphique-semaines .barre-semaine { fill: var(--vert); }
.graphique-semaines .valeur { font-size: 12px; font-weight: 650; fill: var(--encre); }
.graphique-semaines .graduation { font-size: 11px; fill: var(--encre-2); }
.graphique-semaines .grille { stroke: var(--surface-2); }
.graphique-semaines .axe { stroke: var(--trait); }

/* Fiche élève : assiduité */
.bloc-large { grid-column: 1 / -1; }
.chiffres-assiduite { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .75rem; }
.chiffres-assiduite strong { font-size: 1.15rem; }
.liste-absences { list-style: none; margin: 0; padding: 0; }
.liste-absences li { display: grid; gap: .15rem; padding: .45rem 0; border-top: 1px solid var(--surface-2); font-size: .92rem; }
.liste-absences li:first-child { border-top: 0; }
.liste-absences .date { font-size: .8rem; color: var(--encre-2); }

/* Accueil : élèves à suivre */
.alertes-accueil { border-left: 4px solid var(--rouge); margin-bottom: 1rem; }
.alertes-accueil .entete-bloc a { font-weight: 600; text-decoration: none; }
.liste-alertes { list-style: none; margin: 0; padding: 0; }
.liste-alertes li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .75rem; padding: .45rem 0; border-top: 1px solid var(--surface-2); }
.liste-alertes li:first-child { border-top: 0; }
.liste-alertes .meta { grid-column: 1; font-size: .82rem; color: var(--encre-2); }
.liste-alertes .pastille { grid-row: 1 / span 2; grid-column: 2; align-self: center; }

/* Documents : billet A5, tableaux de rapport */
.feuille-a5 {
  width: 148mm; min-height: 200mm; margin: 0 auto; padding: 12mm 12mm;
  background: #fff; color: #111; box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
  font-family: Georgia, "Times New Roman", "Noto Serif", serif; font-size: 11pt; line-height: 1.5;
}
.billet-entete { display: flex; justify-content: space-between; gap: 6mm; align-items: flex-start; font-size: 9pt; }
.billet-entete p { margin: 0; }
.billet-entete .etab { font-weight: 700; font-size: 10.5pt; }
.billet-entete .numero { font-weight: 700; border: 1px solid #111; padding: .5mm 2.5mm; white-space: nowrap; }
.billet-titre { margin: 7mm 0 6mm; font-size: 15pt; }
.billet-tableau, .rapport-tableau { width: 100%; border-collapse: collapse; margin: 4mm 0; font-size: 9.5pt; }
.billet-tableau th, .billet-tableau td, .rapport-tableau th, .rapport-tableau td { border: 1px solid #555; padding: 1.5mm 2mm; text-align: left; vertical-align: top; color: #111; }
.billet-tableau th, .rapport-tableau th { background: #eee; font-weight: 700; font-size: 9pt; }
.rapport-tableau td:not(:first-child), .rapport-tableau th:not(:first-child) { text-align: right; }
.rapport-tableau tfoot td { font-weight: 700; }
.rapport .doc-titre { font-size: 14pt; margin: 10mm 0 6mm; }
.rapport-sous-titre { font-size: 12pt; margin: 6mm 0 2mm; }
.billet-pied { margin-top: 6mm; }
.doc-signature.petite { width: 60mm; }
.doc-signature.petite .zone-cachet { height: 22mm; }
.destinataire { text-indent: 0 !important; margin-bottom: 8mm !important; }
@media print {
  .feuille-a5 { box-shadow: none; margin: 0; }
  .barre-valider, .entete-feuille, .puces-creneaux { position: static; }
}
/* Masque le filet de liste visible entre l'en-tête de l'application et les compteurs */
.entete-feuille { box-shadow: 0 -16px 0 var(--papier); }
.rapport-tableau td:not(:first-child), .rapport-tableau th:not(:first-child) { white-space: nowrap; }
.rapport-tableau { font-size: 9pt; }
.graphique-semaines .grille { stroke: var(--trait); stroke-dasharray: 2 3; }
.bloc table td:first-child a { white-space: nowrap; }

/* =====================================================================
   Phase 5 — Notes et bulletins
   ===================================================================== */
.selecteurs-notes { display: grid; gap: 0 .75rem; grid-template-columns: minmax(0, 1fr); margin-bottom: .25rem; }
@media (min-width: 640px) {
  .selecteurs-notes.trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
  .selecteurs-notes.deux { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Grille de saisie */
.grille-notes-conteneur { border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); margin: .5rem 0; padding: 0; }
.grille-notes { font-size: .92rem; }
.grille-notes th, .grille-notes td { padding: 0; border-bottom: 1px solid var(--surface-2); border-right: 1px solid var(--surface-2); }
.grille-notes thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); vertical-align: bottom; padding: .4rem .4rem; }
.grille-notes .numero { width: 2.2rem; text-align: right; color: var(--encre-2); font-size: .8rem; padding: 0 .4rem; }
.grille-notes .nom-eleve {
  position: sticky; left: 0; z-index: 2; background: var(--surface); text-align: left; font-weight: 400;
  padding: .3rem .6rem; min-width: 11rem; max-width: 15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 1px 0 0 var(--trait);
}
.grille-notes thead .nom-eleve { z-index: 4; }
.grille-notes .eleve-sorti .nom-eleve { color: var(--encre-2); }
.grille-notes .eleve-sorti .pastille { margin-left: .35rem; }
.titre-eval {
  display: grid; justify-items: center; gap: 0; width: 100%; min-width: 4.6rem;
  font: inherit; font-weight: 700; font-size: .85rem; color: var(--encre);
  background: none; border: 0; border-radius: 6px; padding: .2rem .2rem; cursor: pointer;
}
button.titre-eval:hover { background: var(--vert-pale); }
.titre-eval small { font-weight: 400; color: var(--encre-2); font-size: .75rem; }
.colonne-eval.compo { background: var(--or-pale) !important; }
.cellule input {
  width: 100%; min-width: 4.6rem; min-height: 40px; border: 0; border-radius: 0; background: transparent;
  text-align: center; font-variant-numeric: tabular-nums; padding: .3rem .25rem;
}
.cellule input:focus { outline: 3px solid var(--or); outline-offset: -3px; background: var(--surface); }
.cellule input.modifiee { background: var(--or-pale); }
.cellule input[aria-invalid="true"] { background: var(--rouge-pale); color: var(--rouge); font-weight: 700; }
.cellule input:disabled { background: transparent; -webkit-text-fill-color: var(--encre); padding-left: .25rem; text-align: center; font-weight: 400; }
.cellule input.appreciation { text-align: left; min-width: 14rem; padding: .3rem .5rem; }
.grille-notes .calcule { background: var(--surface-2); padding: .3rem .55rem; text-align: right; white-space: nowrap; color: var(--encre); }
.grille-notes thead .calcule { background: var(--surface-2); }
.grille-notes .moyenne { font-weight: 750; }
.sous-moyenne { color: var(--rouge); }
.incomplete { text-decoration: underline dotted; text-underline-offset: 3px; }
.grille-notes tfoot td { padding: .4rem .4rem; font-size: .85rem; color: var(--encre-2); font-weight: 600; text-align: center; }
.grille-notes tfoot td:nth-child(2) { text-align: left; position: sticky; left: 0; background: var(--surface); }
.stats-grille { margin: .25rem 0 .5rem; }
.barre-statut-notes {
  position: sticky; bottom: calc(4.4rem + env(safe-area-inset-bottom)); z-index: 8;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .5rem .75rem; margin-top: .5rem;
}
@media (min-width: 860px) { .barre-statut-notes { bottom: .75rem; } }
.statut-enregistrement { font-size: .9rem; font-weight: 600; }
.statut-enregistrement.ok { color: var(--vert); }
.statut-enregistrement.attente { color: #9A6A00; }
.statut-enregistrement.erreur { color: var(--rouge); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .statut-enregistrement.attente { color: var(--or); } }

/* Résultats */
.etat-saisie { list-style: none; margin: 0; padding: 0; }
.etat-saisie li { display: flex; flex-wrap: wrap; gap: .3rem .75rem; align-items: center; justify-content: space-between; padding: .45rem 0; border-top: 1px solid var(--surface-2); }
.etat-saisie li:first-child { border-top: 0; }
.etat-saisie .chiffres { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; font-size: .88rem; color: var(--encre-2); }
.etat-saisie .moy { min-width: 5.5rem; text-align: right; }
.tableau-resultats { font-size: .9rem; }
.tableau-resultats th, .tableau-resultats td { padding: .4rem .45rem; }
.tableau-resultats .nom-eleve { position: sticky; left: 0; background: var(--surface); text-align: left; font-weight: 400; white-space: nowrap; box-shadow: 1px 0 0 var(--surface-2); }
.tableau-resultats .nom-eleve a { color: var(--encre); text-decoration: none; }
.tableau-resultats .nom-eleve a:hover { text-decoration: underline; }
.matiere-verticale { vertical-align: bottom; height: 8.5rem; padding-bottom: .5rem !important; }
.matiere-verticale span {
  writing-mode: vertical-rl; transform: rotate(180deg); display: inline-block; max-height: 7.5rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--encre);
}
.matiere-verticale small { display: block; font-size: .72rem; color: var(--encre-2); text-align: center; }
.tableau-resultats .moyenne { font-weight: 750; }
.tableau-resultats tfoot td { font-weight: 650; color: var(--encre-2); }
.tableau-resultats .eleve-sorti { opacity: .7; }

/* Conseil */
.liste-conseil { display: grid; gap: .6rem; }
.carte-conseil {
  display: grid; gap: .5rem .9rem; grid-template-columns: minmax(0, 1fr);
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .75rem .9rem;
}
@media (min-width: 900px) { .carte-conseil { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); } }
.carte-conseil .qui { display: grid; gap: .1rem; align-content: start; }
.carte-conseil .meta { font-size: .85rem; color: var(--encre-2); }
.carte-conseil .saisies { display: grid; gap: .4rem; }
.carte-conseil .saisies .champ { margin-bottom: 0; }
.carte-conseil textarea { min-height: 3.2rem; }
.carte-conseil .puce { font-size: .78rem; min-height: 30px; padding: .2rem .55rem; }

/* Fiche élève : résultats */
.liste-resultats { list-style: none; margin: 0; padding: 0; }
.liste-resultats li { display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--surface-2); }
.liste-resultats li:first-child { border-top: 0; }

/* ---------------- Bulletin officiel A4 ---------------- */
.feuille-a4.bulletin { padding: 11mm 13mm 9mm; font-size: 9.5pt; line-height: 1.35; position: relative; }
.bulletin .doc-entete { font-size: 8.5pt; }
.bulletin-titre { margin: 5mm 0 2mm !important; font-size: 13pt !important; padding: 2mm 0 !important; }
.mention-provisoire { text-align: center; font-size: 8.5pt; font-style: italic; margin: 0 0 2mm; color: #8a1a12; }
.feuille-a4.provisoire::before {
  content: 'PROVISOIRE'; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 64pt; font-weight: 700; color: rgba(180, 35, 24, .07); letter-spacing: .1em; pointer-events: none;
}
.bulletin-identite { display: grid; grid-template-columns: 1fr 1fr; gap: .4mm 6mm; margin: 2mm 0 3mm; padding: 2mm 3mm; border: 1px solid #555; }
.bulletin-identite div { display: flex; gap: 2mm; }
.bulletin-identite dt { color: #444; min-width: 24mm; }
.bulletin-identite dd { margin: 0; }
.bulletin-notes { width: 100%; border-collapse: collapse; font-size: 9pt; }
.bulletin-notes th, .bulletin-notes td { border: 1px solid #555; padding: 1.1mm 1.5mm; text-align: center; color: #111; vertical-align: middle; }
.bulletin-notes th { background: #ececec; font-size: 8pt; }
.bulletin-notes td:first-child, .bulletin-notes th:first-child { text-align: left; }
.bulletin-notes .prof { display: block; font-size: 7pt; color: #555; }
.bulletin-notes .appreciation { text-align: left; font-size: 8pt; font-style: italic; width: 34%; }
.bulletin-notes th.appreciation { font-style: normal; }
.bulletin-notes .fort { font-weight: 700; }
.bulletin-notes .non-notee td { color: #666; }
.bulletin-notes .centre { text-align: center !important; font-style: italic; }
.bulletin-notes tfoot td { font-weight: 700; background: #f6f6f6; }
.bulletin-resultat { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr; gap: 3mm; margin: 3mm 0 1.5mm; }
.case-resultat { border: 1px solid #555; padding: 1.5mm 3mm; display: grid; text-align: center; }
.case-resultat span { font-size: 8pt; color: #444; }
.case-resultat strong { font-size: 12pt; }
.case-resultat em { font-size: 8.5pt; }
.case-resultat.principale { border-width: 2px; }
.case-resultat.principale strong { font-size: 14pt; }
.bulletin-classe, .bulletin-note { font-size: 8.5pt; margin: 0 0 2mm; text-align: center; }
.bulletin-cadres { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3mm; margin-top: 2mm; }
.bulletin-cadres .cadre { border: 1px solid #555; padding: 1.5mm 3mm; min-height: 24mm; }
.bulletin-cadres h2 { font-size: 9pt; margin: 0 0 1.5mm; }
.bulletin-cadres .mini { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.bulletin-cadres .mini td { padding: .4mm 0; color: #111; border: 0; }
.bulletin-cadres .mini td:last-child { text-align: right; }
.texte-conseil { margin: 0; font-style: italic; }
.bulletin-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4mm; margin-top: 3mm; text-align: center; font-size: 8.5pt; }
.bulletin-signatures p { margin: 0; }
.bulletin-signatures .zone-cachet { height: 20mm; margin: 1.5mm 0; }
.bulletin-signatures .nom { font-weight: 700; }
.bulletin .doc-mention { margin-top: 3mm !important; font-size: 7pt; }
.lot-bulletins .feuille-a4 { margin-bottom: 8mm; }
@media print {
  .lot-bulletins .feuille-a4 { margin: 0; break-after: page; }
  .lot-bulletins .feuille-a4:last-child { break-after: auto; }
  .feuille-a4.provisoire::before { color: rgba(180, 35, 24, .09); }
  .barre-statut-notes { display: none !important; }
}
.grille-notes tbody th, .grille-notes tbody td, .tableau-resultats tbody th, .tableau-resultats tbody td { vertical-align: middle; }
.tableau-resultats td:nth-last-child(2) { white-space: nowrap; }
.phrase-type { margin-top: .35rem; font-size: .88rem; min-height: 36px; color: var(--encre-2); }
.bulletin-titre .periode { display: block; font-size: 11pt; font-weight: 400; letter-spacing: 0; margin-top: .5mm; }

/* Téléphone : grille plus compacte, sélecteurs sur deux colonnes */
@media (max-width: 639px) {
  .selecteurs-notes.trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .selecteurs-notes.trois .champ:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .selecteurs-notes .champ { margin-bottom: .5rem; }
  .selecteurs-notes .champ > span { font-size: .8rem; }
  .grille-notes .numero { display: none; }
  .grille-notes .nom-eleve { min-width: 7.5rem; max-width: 9.5rem; font-size: .85rem; padding: .25rem .4rem; }
  .cellule input { min-width: 3.6rem; }
  .titre-eval { min-width: 3.6rem; font-size: .8rem; }
  .barre-statut-notes { padding: .3rem .6rem; }
  .statut-enregistrement { font-size: .82rem; }
}

/* Bulletin : tient sur une page A4 */
.feuille-a4.bulletin { padding: 9mm 12mm 7mm; }
.bulletin .doc-entete { gap: 5mm; }
.bulletin-titre { margin: 3.5mm 0 1.5mm !important; padding: 1.5mm 0 !important; }
.bulletin-identite { margin: 1.5mm 0 2.5mm; padding: 1.5mm 3mm; }
.bulletin-notes th, .bulletin-notes td { padding: .8mm 1.4mm; }
.bulletin-resultat { margin: 2.5mm 0 1mm; }
.case-resultat { padding: 1mm 3mm; }
.bulletin-cadres .cadre { min-height: 20mm; }
.bulletin-signatures .zone-cachet { height: 15mm; }
.bulletin .doc-mention { margin-top: 2mm !important; }
.barre-statut-notes { flex-wrap: nowrap; }
.barre-statut-notes .statut-enregistrement { flex: 1; min-width: 0; }
.barre-statut-notes .espace { display: none; }

/* =====================================================================
   Phase 6 — Bourses, versements, quittances
   ===================================================================== */
.tuile-alerte { border-color: var(--or); background: var(--or-pale); }
.liste-bourses .ligne-bourse { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; border-top: 1px solid var(--surface-2); }
.liste-bourses .ligne-bourse:first-child { border-top: 0; }
.liste-bourses .ligne-bourse > input[type="checkbox"], .liste-bourses .case-vide { width: 1.3rem; height: 1.3rem; margin: 0 0 0 .9rem; accent-color: var(--vert); }
.liste-bourses .ligne-bourse .ligne-eleve { border-top: 0; }
.liste-bourses .ligne-bourse:not(:has(> input, > .case-vide)) { grid-template-columns: minmax(0, 1fr); }
.liste-bourses .meta.texte-alerte { color: var(--rouge); }
.barre-lot {
  position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 6; margin-top: .75rem;
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .9rem;
  background: var(--encre); color: var(--papier); border-radius: var(--rayon); box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}
.barre-lot .bouton.discret { color: var(--papier); }
@media (min-width: 900px) { .barre-lot { bottom: 1rem; } }

.choix-mode { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choix-mode legend { font-weight: 600; font-size: .92rem; margin-bottom: .3rem; }
.choix-mode .mode { position: relative; }
.choix-mode .mode input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix-mode .mode span {
  display: grid; place-items: center; text-align: center; min-height: 52px; padding: .4rem;
  border: 2px solid var(--trait); border-radius: var(--rayon-petit); font-weight: 600; font-size: .9rem; background: var(--surface);
}
.choix-mode .mode input:checked + span { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
.choix-mode .mode input:focus-visible + span { outline: 3px solid var(--or); outline-offset: 2px; }
.choix-mode .mode-orange_money input:checked + span { border-color: #E06A00; }
.choix-mode .mode-moov_money input:checked + span { border-color: #1C5FAE; }
.montant-a-verser { font-size: 1.8rem; font-weight: 750; margin: .25rem 0 .75rem; font-variant-numeric: tabular-nums; }

.lien { background: none; border: 0; padding: 0; color: var(--vert); text-decoration: underline; cursor: pointer; font: inherit; min-height: 0; }
.actions-decision { flex-wrap: wrap; margin-top: .75rem; }
.tableau-echeances td { vertical-align: middle; }
.actions-ligne { text-align: right; white-space: nowrap; }
.liste-versements { list-style: none; margin: 0; padding: 0; }
.liste-versements li { display: flex; gap: .75rem; justify-content: space-between; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--surface-2); }
.liste-versements li:first-child { border-top: 0; }
.liste-versements li.annule strong, .tableau-journal tr.annule td { text-decoration: line-through; color: var(--encre-2); }
.liste-versements li.annule .texte-alerte { text-decoration: none; }
.liste-versements p { margin: .2rem 0 0; }

.formulaire-bourse fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.formulaire-bourse legend { font-weight: 700; margin-bottom: .5rem; }
.propositions { display: grid; gap: .25rem; margin-top: .4rem; }
.proposition { text-align: left; padding: .6rem .75rem; min-height: 44px; border: 1px solid var(--trait); border-radius: var(--rayon-petit); background: var(--surface); color: var(--encre); font: inherit; cursor: pointer; }
.proposition:hover, .proposition:focus-visible { background: var(--vert-pale); }
.eleve-choisi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .75rem; border: 2px solid var(--vert); border-radius: var(--rayon-petit); }
.tableau-journal td { vertical-align: top; }

/* Vérification publique (QR code) */
.page-verification { min-height: 100vh; display: grid; place-items: start center; padding: 1.5rem 16px; background: var(--papier); }
.carte-verification { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 1.25rem; }
.carte-verification .marque { font-weight: 800; color: var(--vert); margin: 0 0 .25rem; }
.carte-verification h1 { font-size: 1.25rem; }
.verdict { border-radius: var(--rayon-petit); padding: .9rem 1rem; margin: 1rem 0; }
.verdict p { margin: 0; }
.verdict-titre { font-size: 1.2rem; font-weight: 800; margin-bottom: .25rem !important; }
.verdict-valide { background: var(--vert-pale); color: var(--vert-fonce); border: 2px solid var(--vert); }
.verdict-annulee, .verdict-invalide { background: var(--rouge-pale); color: var(--rouge); border: 2px solid var(--rouge); }

/* Quittance : deux exemplaires A5 paysage sur une feuille A4 */
.feuille-quittances { padding: 0; font-size: 9.5pt; line-height: 1.35; }
.quittance { position: relative; height: 146mm; padding: 9mm 13mm 6mm; display: flex; flex-direction: column; overflow: hidden; }
.quittance p { margin: 0; }
.quittance-entete { display: flex; justify-content: space-between; gap: 6mm; }
.quittance-entete .etab { font-weight: 700; font-size: 10.5pt; }
.quittance-entete .petit { font-size: 8pt; }
.quittance-entete .droite { text-align: right; }
.quittance-entete .pays { font-weight: 700; }
.quittance-entete .exemplaire { margin-top: 1.5mm; font-size: 8pt; font-weight: 700; border: 1px solid #111; padding: .3mm 2mm; display: inline-block; }
.quittance-titre { text-align: center; margin: 3.5mm 0 3mm; padding: 1.5mm 0; border-top: 1.5px solid #111; border-bottom: 1.5px solid #111; }
.quittance-titre h1 { font-size: 14pt; letter-spacing: .05em; margin: 0; }
.quittance-corps { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5mm; }
.quittance-details { display: grid; grid-template-columns: 22mm minmax(0, 1fr); gap: .6mm 3mm; margin: 0; }
.quittance-details dt { color: #444; }
.quittance-details dd { margin: 0; }
.quittance-qr { text-align: center; font-size: 7pt; color: #444; }
.quittance-qr svg { display: block; }
.quittance-montant { margin: 3mm 0 0; border: 1.5px solid #111; padding: 2mm 3mm; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4mm; align-items: center; }
.quittance-montant .chiffres { font-size: 15pt; font-weight: 700; white-space: nowrap; }
.quittance-montant .lettres { font-style: italic; }
.quittance-annulation { margin-top: 2mm !important; color: #B42318; font-weight: 700; }
.quittance-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: auto; text-align: center; }
.quittance-signatures .zone-cachet { height: 16mm; margin: 1.5mm 0; }
.quittance-mention { font-size: 6.5pt; color: #555; text-align: center; margin-top: 1.5mm !important; overflow-wrap: anywhere; }
.ligne-decoupe { height: 5mm; line-height: 5mm; text-align: center; color: #777; font-size: 8pt; overflow: hidden; white-space: nowrap; border-top: 1px dashed #999; }
.tampon-annule {
  position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  font-size: 46pt; font-weight: 800; letter-spacing: .1em; color: rgba(180, 35, 24, .35);
  border: 6px solid rgba(180, 35, 24, .35); padding: 0 8mm; pointer-events: none; z-index: 2;
}
.rapport .petit, .billet-tableau .petit { font-size: 8pt; }
.case-avis { white-space: nowrap; font-size: 8.5pt; }
.etat-echeance .bouton, .etat-echeance > .indication:last-child { margin-top: .35rem; }
.tableau-echeances .pastille { white-space: nowrap; }
/* Téléphone : les pastilles passent sous le nom pour lui laisser la place */
@media (max-width: 600px) {
  .liste-bourses .ligne-eleve { grid-template-columns: auto minmax(0, 1fr); }
  .liste-bourses .ligne-eleve .marques { grid-column: 2; justify-content: flex-start; }
}
.tuile .valeur.montant { font-size: 1.35rem; white-space: nowrap; }
.rapport .doc-pied { break-inside: avoid; margin-top: 6mm; }
.rapport .doc-pied .zone-cachet { height: 24mm; }
.rapport > p { margin: 0 0 3mm; }
@media print { .feuille-a4.rapport { min-height: 0; } }

/* =====================================================================
   Phase 6 (suite) — Frais scolaires et kits
   ===================================================================== */
.jauge-frais { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.jauge-frais span { display: block; height: 100%; background: var(--vert); border-radius: 3px; }
.ligne-jauge { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tuile .detail .jauge-frais { width: 100%; max-width: 120px; margin-right: .3rem; }
.raccourcis-montant { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.6rem 0 .8rem; }
.choix-canal { border: 0; padding: 0; margin: 0 0 .8rem; }
.choix-canal legend { font-weight: 600; font-size: .92rem; margin-bottom: .2rem; }
dialog textarea[readonly] { background: var(--surface-2); }

.tarif-eleve { padding: .7rem 0; border-top: 1px solid var(--surface-2); }
.tarif-eleve:first-of-type { border-top: 0; }
.tarif-titre { display: flex; flex-wrap: wrap; gap: .25rem .5rem; align-items: baseline; margin-bottom: .4rem; }
.echeance-unique { margin: 0; }
.echeances-mois { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .3rem; }
.echeances-mois li { border-radius: var(--rayon-petit); padding: .3rem .2rem; text-align: center; border: 1px solid var(--trait); background: var(--surface); display: grid; gap: .05rem; }
.echeances-mois .mois { font-size: .75rem; color: var(--encre-2); text-transform: capitalize; }
.echeances-mois .montant-mois { font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; }
.etat-payee { background: var(--vert-pale) !important; border-color: var(--vert) !important; }
.etat-payee .montant-mois { color: var(--vert-fonce); }
.etat-partielle, .etat-due { background: var(--or-pale) !important; border-color: var(--or) !important; }
.etat-en_retard { background: var(--rouge-pale) !important; border-color: var(--rouge) !important; }
.etat-en_retard .montant-mois { color: var(--rouge); }
.etat-etat, .etat-exonere { background: var(--surface-2) !important; border-style: dashed !important; }
.legende-echeances { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .7rem 0 0; font-size: .78rem; color: var(--encre-2); }
.puce-etat { display: inline-flex; align-items: center; gap: .3rem; background: none !important; border: 0 !important; }
.puce-etat::before { content: ""; width: 10px; height: 10px; border-radius: 3px; border: 1px solid var(--trait); background: var(--surface); }
.puce-etat.etat-payee::before { background: var(--vert-pale); border-color: var(--vert); }
.puce-etat.etat-partielle::before, .puce-etat.etat-due::before { background: var(--or-pale); border-color: var(--or); }
.puce-etat.etat-en_retard::before { background: var(--rouge-pale); border-color: var(--rouge); }
.puce-etat.etat-etat::before { background: var(--surface-2); border-style: dashed; }

.puces-niveaux { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.ligne-kit .icone-kit { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--vert); }
.ligne-kit .icone-kit.don { background: #8A5A00; }
tr.inactif td { color: var(--encre-2); }
.liste-bourses .ligne-bourse > div.ligne-eleve:hover { background: transparent; }

/* Reçu de frais */
.recu .quittance-corps > div:first-child { display: grid; gap: 2mm; }
.recu-lignes { border-collapse: collapse; font-size: 9pt; width: auto; min-width: 70mm; }
.recu-lignes td { padding: .4mm 3mm .4mm 0; border-bottom: 1px dotted #999; color: #111; }
.recu-lignes td:last-child { text-align: right; white-space: nowrap; }
.recu-solde { margin-top: 2mm !important; font-size: 8.5pt; }
.recu .quittance-signatures .zone-cachet { height: 14mm; }

/* Lettres de rappel (2 par feuille) */
.lettre-rappel { height: 146mm; padding: 9mm 14mm 6mm; display: flex; flex-direction: column; font-size: 9.5pt; line-height: 1.4; }
.lettre-rappel h2 { font-size: 12pt; margin: 3mm 0 2mm; text-align: center; letter-spacing: .04em; text-transform: uppercase; }
.lettre-rappel p { margin: 0 0 2mm; }
.destinataire-rappel { margin-top: 3mm !important; }
.lettre-rappel .billet-tableau { margin: 1mm 0 2mm; }
.lettre-rappel .billet-tableau tfoot td { font-weight: 700; }
.lettre-rappel .doc-signature { margin-top: auto; }
.signatures-deux { display: flex; justify-content: space-between; gap: 10mm; }
.signatures-deux .doc-signature { margin: 4mm 0 0; }
.tableau-emargement td { height: 8mm; vertical-align: middle; }
.tableau-emargement td:last-child { width: 45mm; }
.billet-tableau tr.annule td { text-decoration: line-through; color: #777; }
.billet-tableau .nombre { text-align: right; white-space: nowrap; }

/* =====================================================================
   Phase 7 — Délibérations, orientation, procès-verbal
   ===================================================================== */
.cartes-deliberation { display: grid; gap: .75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .cartes-deliberation { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-deliberation { display: grid; gap: .45rem; padding: 1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre); text-decoration: none; }
.carte-deliberation:hover { border-color: var(--vert); }
.carte-deliberation .titre { display: flex; justify-content: space-between; gap: .5rem; align-items: center; font-size: 1.1rem; }
.carte-deliberation .meta, .carte-deliberation p { margin: 0; }
.carte-deliberation .meta { font-size: .85rem; color: var(--encre-2); }
.repartition { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.repartition .seg { flex-basis: 0; min-width: 4px; }
.seg-admis { background: var(--vert); }
.seg-redouble { background: var(--or); }
.seg-exclu_travail { background: var(--rouge); }
.seg-exclu_age { background: #7A1A12; }
.chiffres-decision { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .9rem; color: var(--encre-2); }
.chiffres-decision strong { color: var(--encre); }

.en-tete-delib { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: flex-start; margin-bottom: .75rem; }
.en-tete-delib h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .2rem; }
.en-tete-delib .meta { color: var(--encre-2); font-size: .88rem; margin: 0; }
.en-tete-delib .actions { flex-wrap: wrap; }
.titre-bloc { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.titre-bloc h3 { margin: 0; }
.bloc-seance p { margin: .4rem 0 0; }
.obstacles ul { margin: .3rem 0 0; padding-left: 1.1rem; }

.liste-delib { display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 900px) { .liste-delib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-eleve-delib { background: var(--surface); border: 1px solid var(--trait); border-left: 5px solid var(--trait); border-radius: var(--rayon); padding: .75rem .9rem; display: grid; gap: .35rem; }
.carte-eleve-delib.decision-admis { border-left-color: var(--vert); }
.carte-eleve-delib.decision-redouble { border-left-color: var(--or); }
.carte-eleve-delib.decision-exclu_travail, .carte-eleve-delib.decision-exclu_age { border-left-color: var(--rouge); }
.carte-eleve-delib p { margin: 0; }
.carte-eleve-delib .tete { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; align-items: center; }
.carte-eleve-delib .rang { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-weight: 700; font-size: .85rem; }
.carte-eleve-delib .qui { display: grid; min-width: 0; }
.carte-eleve-delib .qui strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-eleve-delib .meta { font-size: .8rem; color: var(--encre-2); }
.carte-eleve-delib .mag { display: grid; justify-items: end; line-height: 1.05; }
.carte-eleve-delib .mag .valeur { font-size: 1.4rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.carte-eleve-delib .mag .libelle { font-size: .7rem; color: var(--encre-2); letter-spacing: .06em; }
.moyennes-periodes { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.carte-eleve-delib .examen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.libelle-examen { font-weight: 700; font-size: .8rem; letter-spacing: .04em; }
.segments { display: inline-flex; border: 1px solid var(--trait); border-radius: var(--rayon-petit); overflow: hidden; }
.segment { border: 0; border-right: 1px solid var(--trait); background: var(--surface); color: var(--encre); font: inherit; font-size: .82rem; padding: .35rem .65rem; min-height: 36px; cursor: pointer; }
.segment:last-child { border-right: 0; }
.segment.actif { background: var(--vert); color: #fff; font-weight: 700; }
.segment:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }
.carte-eleve-delib .motif { font-size: .85rem; font-style: italic; }
.carte-eleve-delib .alerte { font-size: .82rem; color: #7A5508; }
.carte-eleve-delib .voeux, .carte-eleve-delib .observation { font-size: .85rem; }
.carte-eleve-delib > .bouton { justify-self: start; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .carte-eleve-delib .alerte { color: var(--or); } }

.liste-membres { display: grid; gap: .4rem; margin-bottom: .5rem; }
.ligne-membre { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .4rem; }
.bloc-voeux { border: 1px solid var(--trait); border-radius: var(--rayon-petit); padding: .6rem .8rem; margin: 0 0 1rem; }

/* Procès-verbal */
.pv { position: relative; font-size: 10.5pt; }
.pv .doc-titre { margin: 8mm 0 2mm; font-size: 15pt; }
.pv-sous-titre { text-align: center; font-weight: 700; margin: 0 0 4mm !important; }
.pv p { margin: 0 0 2.5mm; }
.pv .rapport-sous-titre { font-size: 10.5pt; margin: 4mm 0 1.5mm; }
.pv-tableau { font-size: 8pt; }
.pv-tableau th, .pv-tableau td { padding: 1mm 1.4mm; }
.pv-groupe { break-inside: auto; }
.pv-tableau tr { break-inside: avoid; }
.filigrane {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); pointer-events: none;
  font-size: 72pt; font-weight: 800; letter-spacing: .1em; color: rgba(180, 35, 24, .12); z-index: 1; white-space: nowrap;
}
@media print { .filigrane { position: fixed; } .feuille-a4.pv { min-height: 0; } }
.fiche-voeux h2 { text-transform: none; }

/* =====================================================================
   Phase 8 — Hors ligne, sauvegarde, synchronisation
   ===================================================================== */
.temoin-reseau {
  display: inline-flex; align-items: center; gap: .2rem; padding: .25rem .6rem; margin-right: .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-decoration: none; background: var(--or-pale); color: #7A5508; border: 1px solid var(--or); white-space: nowrap;
}
.temoin-reseau.hors-ligne { background: var(--rouge-pale); color: var(--rouge); border-color: var(--rouge); }
.temoin-reseau.hors-ligne::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rouge); margin-right: .2rem; }
.temoin-reseau .compte { font-weight: 600; }
@media (max-width: 600px) { .temoin-reseau { position: fixed; top: calc(.5rem + env(safe-area-inset-top)); right: .5rem; z-index: 30; margin: 0; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .temoin-reseau { color: var(--or); } :root:not([data-theme="light"]) .temoin-reseau.hors-ligne { color: var(--rouge); } }
.cellule input.en-attente { background: repeating-linear-gradient(135deg, var(--or-pale) 0 6px, transparent 6px 12px); }
.statut-enregistrement.hors-ligne { color: var(--rouge); font-weight: 700; }
.etapes { margin: .3rem 0 1rem; padding-left: 1.3rem; }
.etapes li { margin: .3rem 0; }

/* =====================================================================
   Phase 9 — Tableau de bord
   ===================================================================== */
.actions-rapport { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.champ-date { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--encre-2); }
.champ-date input { width: auto; min-width: 9.5rem; }

/* Tuiles : un chiffre « héros » (effectif) puis quatre indicateurs */
.tuiles-tableau { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.tuiles-tableau .heros { grid-column: 1 / -1; }
.tuiles-tableau .heros .valeur { font-size: 2.6rem; }
@media (min-width: 700px) { .tuiles-tableau { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tuiles-tableau .heros { grid-column: auto; grid-row: span 2; align-content: center; } }
@media (min-width: 1100px) { .tuiles-tableau { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } .tuiles-tableau .heros { grid-row: auto; } }
.tuile.montant .valeur { font-size: 1.25rem; overflow-wrap: anywhere; }
.tuiles-petites .tuile .valeur { font-size: 1.3rem; }

/* Alertes du jour : icône + libellé, jamais la couleur seule */
.liste-alertes-jour { list-style: none; margin: 0; padding: 0; }
.liste-alertes-jour li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .35rem .75rem; align-items: center;
  padding: .55rem 0; border-top: 1px solid var(--surface-2);
}
.liste-alertes-jour li:first-child { border-top: 0; }
.liste-alertes-jour .voir { font-weight: 600; white-space: nowrap; }
@media (max-width: 520px) {
  .liste-alertes-jour li { grid-template-columns: minmax(0, 1fr) auto; }
  .liste-alertes-jour .marque-niveau { grid-column: 1 / -1; justify-self: start; }
}
.marque-niveau {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.marque-niveau.niveau-critique { background: var(--rouge); color: #fff; }
.marque-niveau.niveau-alerte { background: #FCE3CF; color: #8A3B0C; }
.marque-niveau.niveau-info { background: var(--surface-2); color: var(--encre-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .marque-niveau.niveau-alerte { background: #4A2A14; color: #F5A36B; }
  :root:not([data-theme="light"]) .marque-niveau.niveau-critique { color: #1A0D0B; }
}

/* Graphiques. Une seule série : bleu (validé daltonisme, clair et sombre), pour ne pas la confondre avec « Filles » (vert) */
:root { --serie-unique: #1C6FA6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie-unique: #3D8FD1; } }
.grille-graphes { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 1100px) { .grille-graphes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grille-graphes .bloc { margin-bottom: 0; min-width: 0; }
.graphe { position: relative; width: 100%; min-height: 60px; }
.svg-graphe { display: block; max-width: 100%; height: auto; font-family: var(--police); overflow: visible; }
.svg-graphe .libelle { font-size: 12.5px; fill: var(--encre); }
.svg-graphe .libelle.fort { font-weight: 700; }
.svg-graphe .valeur { font-size: 12px; font-weight: 650; fill: var(--encre); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.svg-graphe .graduation { font-size: 11px; fill: var(--encre-2); }
.svg-graphe .texte-seuil { font-size: 11px; font-weight: 650; fill: var(--encre-2); }
.svg-graphe .axe { stroke: var(--trait); stroke-width: 1; }
.svg-graphe .grille { stroke: var(--surface-2); stroke-width: 1; }
.svg-graphe .seuil { stroke: var(--encre-2); stroke-width: 1; stroke-dasharray: 3 3; }
.svg-graphe .piste { stroke: var(--trait); stroke-width: 2; }
.svg-graphe .marque-filles { fill: var(--serie-filles); }
.svg-graphe .marque-garcons { fill: var(--serie-garcons); }
.svg-graphe .marque-principale { fill: var(--serie-unique); }
.svg-graphe .point { fill: var(--serie-unique); stroke: var(--surface); stroke-width: 2; }
.svg-graphe .point.global { fill: var(--encre); }
.svg-graphe .zone-survol { fill: transparent; }
.svg-graphe .ligne-graphe:hover .zone-survol, .svg-graphe .ligne-graphe:focus .zone-survol { fill: var(--surface-2); }
.svg-graphe .ligne-graphe:focus { outline: none; }
.svg-graphe .ligne-graphe:focus-visible .zone-survol { stroke: var(--or); stroke-width: 2; }
.infobulle {
  position: absolute; z-index: 4; max-width: 18rem; pointer-events: none;
  background: var(--encre); color: var(--surface); font-size: .82rem; line-height: 1.35;
  padding: .4rem .6rem; border-radius: var(--rayon-petit); box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

/* Recouvrement des frais : jauges */
.liste-jauges { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 900px) { .liste-jauges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ligne-recouvrement { display: grid; gap: .25rem; }
.jauge-titre { display: flex; justify-content: space-between; gap: .5rem; }
.jauge { display: block; width: 100%; height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.jauge-remplie { display: block; height: 100%; background: var(--serie-unique); border-radius: 0 6px 6px 0; }
.pied-rapport { margin-top: 1rem; }

@media print {
  .tableau-bord .vue-tableau { display: none; }
  .grille-graphes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tuiles-tableau { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tuiles-tableau .heros { grid-column: auto; grid-row: auto; }
  .infobulle { display: none !important; }
}

/* =====================================================================
   Éditeur : OA tech-System (connexion, accueil, assistance)
   ===================================================================== */
.signature-editeur { display: flex; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--trait); font-size: .82rem; color: var(--encre-2); }
.signature-editeur img { flex: none; width: 48px; height: auto; }
.signature-editeur > div { display: grid; gap: .15rem; min-width: 0; }
.signature-editeur .une-solution strong { color: var(--encre); }
.contacts-editeur { display: flex; flex-wrap: wrap; gap: .1rem .75rem; }
.contacts-editeur a { color: var(--encre-2); text-decoration: none; white-space: nowrap; }
.contacts-editeur a:hover { color: var(--vert); text-decoration: underline; }
.pied-accueil { margin-top: 2rem; }
.lien-assistance { display: inline-block; margin-top: 1.5rem; font-weight: 600; }
.carte-editeur { display: grid; gap: 1rem 1.5rem; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .carte-editeur { grid-template-columns: 170px minmax(0, 1fr); } }
.carte-editeur img { width: 160px; height: auto; padding: .75rem; border-radius: var(--rayon); background: #0B1A2E; }
.carte-editeur h2 { margin-bottom: .1rem; }
@media print { .signature-editeur, .lien-assistance { display: none !important; } }

/* ---------------------------------------------------------------------
   Logo de l'école (facultatif) : documents imprimés, paramètres, tableau de bord
   --------------------------------------------------------------------- */
/* Logo de l'école à côté de son nom, sous Ministère / Académie / CAP */
.doc-ecole { display: flex; align-items: center; justify-content: center; gap: 3mm; margin-top: 1mm; }
.doc-ecole-texte { min-width: 0; }
.avec-logo .doc-ecole-texte { text-align: left; }
.doc-logo { display: block; flex: none; max-width: 18mm; max-height: 18mm; width: auto; height: auto; object-fit: contain; }
.bulletin .doc-logo { max-width: 15mm; max-height: 15mm; }
.mini-logo { flex: none; display: block; max-width: 16mm; max-height: 16mm; width: auto; height: auto; object-fit: contain; }
.quittance-entete .mini-logo + div, .billet-entete .remplit { flex: 1; min-width: 0; }
.apercu-logo { display: grid; place-items: center; width: 180px; height: 180px; margin: .5rem 0 1rem; padding: .75rem;
  border: 1px dashed var(--trait); border-radius: 8px; background: #fff; }
.apercu-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.apercu-logo .indication { text-align: center; color: var(--encre-2); font-size: .85rem; margin: 0; }
.titre-avec-logo { display: flex; align-items: center; gap: .75rem; }
.logo-tableau { flex: none; width: auto; height: auto; max-width: 56px; max-height: 56px; object-fit: contain; }

/* =====================================================================
   Phase 11 — Jardin d'enfants (préscolaire) : évaluation A / ECA / NA
   ===================================================================== */
.barre-enfant .champ { margin-bottom: .5rem; }
.carte-enfant { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .8rem 1rem; margin-bottom: 1rem; }
.carte-enfant h2 { font-size: 1.15rem; }
.bilan-competences { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.domaine-prescolaire h3 { font-size: 1rem; margin: 0 0 .5rem; color: var(--vert-fonce); }
.liste-competences { list-style: none; margin: 0; padding: 0; }
.liste-competences li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-top: 1px solid var(--trait); }
.liste-competences li:first-child { border-top: 0; }
.liste-competences .libelle { flex: 1; min-width: 0; }
.choix-niveau { display: inline-flex; gap: .3rem; flex-shrink: 0; }
/* Grandes cibles tactiles : la maîtresse saisit au téléphone, en classe */
.choix-niveau .niveau {
  min-width: 48px; min-height: 44px; padding: 0 .5rem; border-radius: var(--rayon-petit);
  border: 1.5px solid var(--trait); background: var(--surface); color: var(--encre-2);
  font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer;
}
.choix-niveau .niveau:disabled { cursor: not-allowed; opacity: .6; }
.choix-niveau .niveau[aria-checked="true"].vert { background: var(--vert); border-color: var(--vert); color: #fff; }
.choix-niveau .niveau[aria-checked="true"].or { background: var(--or); border-color: var(--or); color: #3A2A00; }
.choix-niveau .niveau[aria-checked="true"].rouge { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.choix-niveau .niveau:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
.navigation-enfant { justify-content: space-between; }
.navigation-enfant .statut-enregistrement { flex: 1; text-align: center; min-width: 8rem; }
@media (max-width: 479px) {
  .liste-competences li { flex-direction: column; align-items: stretch; gap: .4rem; }
  .choix-niveau { display: grid; grid-template-columns: repeat(3, 1fr); }
  .navigation-enfant .statut-enregistrement { order: -1; flex-basis: 100%; }
  .navigation-enfant .bouton { flex: 1; }
}
/* Paramètres du référentiel */
.ligne-referentiel { display: flex; gap: .5rem; align-items: center; }
.ligne-referentiel input { flex: 1; min-width: 0; }
.ligne-referentiel.inactif input, .bloc.inactif > .ligne-referentiel input { text-decoration: line-through; color: var(--encre-2); }
.liste-referentiel { list-style: none; margin: .5rem 0 .5rem 1rem; padding: 0; display: grid; gap: .4rem; }
.ajout-referentiel { display: flex; gap: .5rem; align-items: center; }
.ajout-referentiel input { flex: 1; min-width: 0; }
/* Carnet imprimé */
.carnet-competences .domaine th { background: #ececec; text-align: left; font-size: 8.5pt; }
.carnet-competences .case-niveau { width: 17mm; text-align: center !important; font-weight: 700; }
.carnet-competences td { font-size: 8.5pt; }
.navigation-enfant .bouton { white-space: nowrap; }
.navigation-enfant .statut-enregistrement:empty { display: none; }

/* =====================================================================
   Phase 12 — Pointage des enseignants
   ===================================================================== */
.formulaire-pointage h2 { margin-bottom: .4rem; }
.grille-champs.trois { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
.champ-mois { margin-bottom: .5rem; }
.champ-mois input { width: auto; min-width: 11rem; }
.filtres-pointage { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.liste-cours { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.carte-cours { display: flex; gap: .6rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--trait);
  border-left: 4px solid var(--trait); border-radius: var(--rayon); padding: .7rem .9rem; }
.carte-cours.statut-a_valider { border-left-color: var(--or); }
.carte-cours.statut-valide { border-left-color: var(--vert); }
.carte-cours.statut-rejete { border-left-color: var(--rouge); opacity: .85; }
.carte-cours .corps-cours { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.carte-cours .ligne-1 { display: flex; justify-content: space-between; gap: .5rem; align-items: center; flex-wrap: wrap; }
.carte-cours .contenu-cours { font-style: italic; color: var(--encre); overflow-wrap: anywhere; }
.carte-cours .contenu-cours.vide { color: var(--encre-2); font-style: normal; font-size: .88rem; }
.carte-cours .indication { font-size: .82rem; color: var(--encre-2); }
.carte-cours .actions-cours { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .2rem; }
.case-cours { display: flex; align-items: center; min-height: 44px; padding-right: .2rem; cursor: pointer; }
.case-cours input { width: 1.35rem; height: 1.35rem; accent-color: var(--vert); }
.barre-validation { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  background: var(--papier); padding: .4rem 0; margin-bottom: .4rem; }
.bloc-depliable { margin-top: 1rem; }
.bloc-depliable > summary { cursor: pointer; font-weight: 600; color: var(--vert-fonce); padding: .6rem 0; min-height: 44px; }
.tableau-heures .fort { font-weight: 700; }
.liste-taux { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.liste-taux li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: .6rem; align-items: center;
  background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .6rem .8rem; }
.liste-taux li.inactif { opacity: .6; }
.liste-taux .taux { display: flex; align-items: center; gap: .4rem; }
.liste-taux .taux span { font-size: .82rem; color: var(--encre-2); white-space: nowrap; }
@media (max-width: 639px) {
  .grille-champs.trois { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grille-champs.trois .champ:first-child { grid-column: 1 / -1; }
  .liste-taux li { grid-template-columns: minmax(0, 1fr); }
}
/* Documents imprimés */
.tableau-emargement td { font-size: 8pt; }
.tableau-emargement .signature-electronique { font-size: 7pt; color: #333; width: 24mm; }
.tableau-emargement .non-payable td { color: #555; }
.etat-heures .bulletin-notes td, .etat-heures .bulletin-notes th { font-size: 8.5pt; }
.etat-heures .appreciation { width: 26mm; }
@media print { .tableau-emargement tr { break-inside: avoid; } .fiche-emargement, .etat-heures { min-height: 0; } }

/* =====================================================================
   Phase 13 — Paie du personnel
   ===================================================================== */
.tuiles-paie { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.tuiles-paie .tuile.montant .valeur { font-size: 1.3rem; }
.tableau-paie .fort, .lignes-paie .net td { font-weight: 700; }
.tableau-paie .ligne-erreur { background: var(--rouge-pale); }
button.lien { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--vert-fonce); text-decoration: underline; cursor: pointer; text-align: left; min-height: 0; }
.detail-bulletin { min-width: min(36rem, 90vw); }
.detail-bulletin h3 { margin: 1rem 0 .4rem; font-size: 1rem; }
.lignes-paie { width: 100%; border-collapse: collapse; font-size: .92rem; }
.lignes-paie th, .lignes-paie td { padding: .35rem .4rem; border-bottom: 1px solid var(--trait); }
.lignes-paie .legale td { color: var(--encre-2); }
.lignes-paie tfoot td { font-weight: 600; }
.ligne-formulaire { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; }
.ligne-formulaire .champ { margin-bottom: 0; flex: 1 1 9rem; }
.liste-simple { margin: .3rem 0 .6rem; padding-left: 1.1rem; }
.formulaire-employe { max-width: 46rem; }
.formulaire-employe h3 { margin: 1rem 0 .4rem; font-size: 1rem; color: var(--vert-fonce); }
.tableau-bareme { border-collapse: collapse; margin-bottom: .6rem; }
.tableau-bareme td, .tableau-bareme th { padding: .3rem .5rem; text-align: left; }
.tableau-bareme input { width: 9rem; }
/* Documents de paie */
.bulletin-paie .table-paie td:nth-child(n+2), .bulletin-paie .table-paie th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.bulletin-paie .table-paie td:first-child { width: 55%; }
.bulletin-cadres.une-colonne { grid-template-columns: 1fr; }
.bulletin-cadres .charges-ligne { margin: 0; font-size: 8pt; }
.bulletin-signatures.deux { grid-template-columns: 1fr 1fr; }
.feuille-a4.paysage { width: 297mm; min-height: 210mm; padding: 12mm 14mm; page: paysage; }
.etat-paie .bulletin-notes td, .etat-paie .bulletin-notes th { font-size: 8pt; }
.etat-paie .bulletin-notes td:nth-child(n+3) { text-align: right; white-space: nowrap; }
@page paysage { size: A4 landscape; margin: 0; }
@media print { .feuille-a4.paysage { width: 297mm; min-height: 210mm; } }
/* Déclarations INPS (modèles officiels) */
.entete-inps { text-align: center; font-size: 9pt; line-height: 1.35; border-bottom: 1.5px solid #111; padding-bottom: 2mm; margin-bottom: 3mm; }
.entete-inps p { margin: 0; }
.entete-inps h1 { font-size: 13pt; margin: 2mm 0 0; letter-spacing: .03em; }
.entete-inps.deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 6mm; }
.entete-inps .fort, .pied-declaration .fort { font-weight: 700; }
.cadre-employeur { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 5mm; border: 1px solid #555; padding: 2mm 3mm; font-size: 9pt; line-height: 1.4; margin-bottom: 3mm; }
.cadre-employeur.une { grid-template-columns: 1fr; gap: 0; }
.cadre-employeur p { margin: 0; }
.tableau-inps th, .tableau-inps td { font-size: 7.5pt !important; padding: .9mm 1.2mm !important; }
.tableau-inps td:nth-child(n+4) { text-align: right !important; white-space: nowrap; }
.tableau-inps .taux th { background: #f6f6f6; font-weight: 400; }
.pied-declaration { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8mm; margin-top: 4mm; font-size: 9pt; }
.pied-declaration p { margin: 0 0 1.5mm; }
.pied-declaration .centre { text-align: center; }
.pied-declaration .zone-cachet { height: 20mm; }
.titre-section { font-size: 10.5pt; margin: 4mm 0 1mm; }
.declaration-cotisations p { font-size: 9.5pt; margin: 0 0 1.5mm; }
.declaration-cotisations .bulletin-notes td:nth-child(n+2) { text-align: right; }
.declaration-cotisations .taux td { background: #f6f6f6; }

/* =====================================================================
   Phase 14 — Écoles franco-arabes : texte arabe (police du système :
   Noto Naskh Arabic sur Android, Arial / Traditional Arabic sous Windows)
   ===================================================================== */
:root { --police-arabe: "Noto Naskh Arabic", "Traditional Arabic", "Simplified Arabic", "Arabic Typesetting", "Arial", "Tahoma", "DejaVu Sans", sans-serif; }
[lang="ar"], .ar { font-family: var(--police-arabe); direction: rtl; unicode-bidi: isolate; }
.feuille-a4 .ar.sous { display: block; font-size: 9pt; color: #333; line-height: 1.3; }
.feuille-a4 th .ar.sous { font-weight: 700; }
.bulletin-titre .titre-ar { display: block; font-size: 13pt; font-weight: 700; margin-top: .5mm; }
.doc-republique .hegire { margin-top: 1mm !important; font-size: 9pt; }
.doc-administration .etab.ar, .doc-republique .pays.ar { font-size: 11pt; }
.nom-arabe { font-family: var(--police-arabe); color: var(--encre-2); }
.groupe-catalogue { border: 1px solid var(--trait); border-radius: var(--rayon-petit); margin: 0 0 .8rem; padding: .3rem .8rem .5rem; }
.groupe-catalogue legend { font-weight: 700; padding: 0 .3rem; }
.liste-noms-arabes { max-height: 60vh; overflow-y: auto; display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* =====================================================================
   Phase 15 — Emploi du temps
   ===================================================================== */
.grille-edt { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; background: var(--surface); }
.grille-edt th, .grille-edt td { border: 1px solid var(--trait); padding: .3rem; vertical-align: middle; text-align: center; font-size: .86rem; }
.grille-edt thead th { background: var(--surface-2); }
.grille-edt .sous-titre { display: block; font-size: .78rem; font-weight: 400; color: var(--encre-2); }
.grille-edt .col-heure { width: 7.5rem; white-space: nowrap; font-size: .8rem; }
.grille-edt .col-min { width: 3rem; color: var(--encre-2); font-size: .78rem; }
.grille-edt .cellule-commune { font-weight: 700; letter-spacing: .04em; color: var(--encre-2); background: var(--surface-2); }
.grille-edt .ligne-pause .cellule-commune { background: var(--or-pale); }
.grille-edt .cellule-seance { background: var(--vert-pale); padding: 0; }
.seance-edt { display: grid; gap: .1rem; width: 100%; height: 100%; min-height: 3rem; padding: .35rem; background: none; border: 0; font: inherit; color: var(--encre); text-align: center; cursor: default; align-content: center; }
button.seance-edt { cursor: pointer; }
button.seance-edt:hover { background: rgba(29, 107, 69, .08); }
.seance-edt .detail { font-size: .75rem; color: var(--encre-2); }
.seance-edt .ar { font-size: .85rem; }
.ajout-edt { width: 100%; min-height: 2.6rem; border: 1px dashed var(--trait); background: none; color: var(--encre-2); border-radius: var(--rayon-petit); font-size: 1.1rem; cursor: pointer; }
.ajout-edt:hover { border-color: var(--vert); color: var(--vert); }
.actions-edt { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.volumes-edt { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.volumes-edt li { display: flex; justify-content: space-between; gap: .5rem; border-bottom: 1px dotted var(--trait); padding: .2rem 0; }
.puces-jours { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: .6rem; }
.puce { min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--trait); background: var(--surface); font: inherit; font-weight: 600; cursor: pointer; }
.puce[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: #fff; }
.liste-jour { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.liste-jour li { display: flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); padding: .55rem .75rem; }
.liste-jour .heure { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 6.5rem; font-size: .9rem; }
.liste-jour .cours { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.liste-jour .cours .detail { font-size: .8rem; color: var(--encre-2); }
.liste-jour li.libre { opacity: .7; }
.liste-jour li.ligne-pause, .liste-jour li.ligne-activite { background: var(--surface-2); justify-content: flex-start; font-weight: 600; color: var(--encre-2); }
.tableau-horaires input, .tableau-horaires select { min-width: 6rem; }
.cours-du-jour { border-color: var(--vert); }
.hors-edt { margin-left: .3rem; }
/* Impression */
.table-edt { table-layout: fixed; }
.table-edt th, .table-edt td { font-size: 8.5pt !important; text-align: center !important; vertical-align: middle !important; padding: 1mm !important; }
.table-edt .heure { white-space: nowrap; width: 22mm; font-weight: 700; }
.table-edt td:last-child, .table-edt th:last-child { width: 11mm; }
.table-edt .commune td { background: #f1f1f1; }
.table-edt .centre-fort { font-weight: 700; letter-spacing: .08em; }
.table-edt .prof { display: block; font-size: 7.5pt; color: #444; }
.table-edt .ar.sous { text-align: center; }
.document-edt .doc-titre { margin: 4mm 0 3mm !important; }
.grille-edt .libelle-ar { margin-left: .8rem; }
.liste-jour li { flex-wrap: wrap; min-width: 0; }
.liste-jour .cours { min-width: 8rem; }

/* Assistance : adresses à donner aux téléphones (QR code) */
.adresses-telephones { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.carte-adresse { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.carte-adresse svg { flex: none; }
.carte-adresse strong { font-size: 1.05rem; word-break: break-all; }

/* Bouton « Installer l'application » (accueil, assistance) */
.installer-app { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-left: 4px solid var(--vert); }
.installer-app img { flex: none; border-radius: 12px; }
.installer-app .texte { flex: 1 1 14rem; display: grid; gap: .2rem; }
.installer-app .texte span { color: var(--encre-2); font-size: .92rem; }
.installer-app .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.etapes-installation { padding-left: 1.3rem; display: grid; gap: .6rem; margin: .75rem 0; }