/* =========================================================================
   Scolaris — feuille de style unique.

   Contraintes de terrain qui ont dicté ces choix :
   · Écrans de 5 pouces à 24 pouces, sur le même code.
   · Android d'entrée de gamme : pas d'animation coûteuse, pas d'ombre partout.
   · Lumière du jour et néons : contrastes élevés, pas de gris pâle sur blanc.
   · Impression : les documents officiels doivent sortir corrects du premier
     coup, sans « aperçu avant impression » à régler.
   ========================================================================= */

:root{
  --marine-900:#14283F; --marine-800:#1F3A5F; --marine-700:#2C4E7A;
  --or-600:#A9761B; --or-500:#C9992E; --or-100:#F7EBD2;
  --papier:#EEF1F5; --surface:#FFFFFF; --surface-2:#F5F7FA;
  --encre:#101B29; --encre-2:#2A3746; --ardoise:#5B6779; --ardoise-clair:#8794A6;
  --trait:#C9D2DE; --trait-fort:#9DAABC;
  --succes:#1E6444; --succes-fond:#DFF0E6;
  --alerte:#95590A; --alerte-fond:#FBEEDA;
  --erreur:#9E1F17; --erreur-fond:#FAE4E1;
  --info-fond:#E6EBF2;
  /* Graphiques : deux teintes, validées pour la deutéranopie, la protanopie
     et la tritanopie, sur le fond clair comme sur le fond sombre. */
  --graphe-1:#1F5FA8; --graphe-2:#B3306E; --graphe-grille:#C9D2DE;
  --r:6px;
  --ombre:0 1px 2px rgba(16,27,41,.06);
  --ombre-forte:0 8px 24px -8px rgba(16,27,41,.28);
  --police:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --police-donnees:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --barre:64px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]){
    --papier:#0C1420; --surface:#131F2E; --surface-2:#182637;
    --encre:#E4EAF2; --encre-2:#C3CDDB; --ardoise:#93A1B4; --ardoise-clair:#6F7E92;
    --trait:#28374A; --trait-fort:#3C4E66;
    --or-600:#D9AC55; --or-100:#2E2412;
    --succes:#6FC79B; --succes-fond:#12271D;
    --alerte:#E0A959; --alerte-fond:#31240F;
    --erreur:#F0908A; --erreur-fond:#33191A;
    --info-fond:#1C2836;
    --graphe-1:#5A97DD; --graphe-2:#DE6199; --graphe-grille:#2E3F55;
    --ombre:0 1px 2px rgba(0,0,0,.3);
  }
}
:root[data-theme="sombre"]{
  --papier:#0C1420; --surface:#131F2E; --surface-2:#182637;
  --encre:#E4EAF2; --encre-2:#C3CDDB; --ardoise:#93A1B4; --ardoise-clair:#6F7E92;
  --trait:#28374A; --trait-fort:#3C4E66;
  --or-600:#D9AC55; --or-100:#2E2412;
  --succes:#6FC79B; --succes-fond:#12271D;
  --alerte:#E0A959; --alerte-fond:#31240F;
  --erreur:#F0908A; --erreur-fond:#33191A;
  --info-fond:#1C2836;
  --graphe-1:#5A97DD; --graphe-2:#DE6199; --graphe-grille:#2E3F55;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--police);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
.noscript{padding:2rem;background:var(--erreur-fond);color:var(--erreur);font-weight:600}

/* ------------------------------------------------------------ chargement */
.chargement{
  min-height:100dvh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.6rem;background:var(--marine-800);color:#fff;
}
/* L'emblème sur l'écran d'attente. Il tient lieu de signe de vie pendant les
   deux secondes du démarrage, et surtout il dit de quel logiciel il s'agit à
   quelqu'un qui n'a pas encore appris à lire le nom. */
.chargement-logo{width:88px;height:88px;object-fit:contain;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.chargement-marque{font-size:1.9rem;font-weight:700;letter-spacing:-.02em}
.chargement-texte{color:#A9BDD6;font-size:.9rem}

/* ------------------------------------------------------------- structure */
.app{display:flex;min-height:100dvh}

.laterale{
  width:250px;flex-shrink:0;background:var(--marine-900);color:#D5E0EE;
  display:flex;flex-direction:column;position:sticky;top:0;height:100dvh;
  overflow-y:auto;
}
.laterale-entete{padding:1.1rem 1.1rem .9rem;border-bottom:1px solid rgba(255,255,255,.1)}
.laterale-marque{font-size:1.15rem;font-weight:700;color:#fff;
  letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
.laterale-logo{width:26px;height:26px;object-fit:contain;flex:none}
.laterale-etab{font-size:.76rem;color:#93AAC6;margin-top:.2rem;line-height:1.35}
.nav-groupe{padding:.7rem 0 .2rem}
.nav-titre{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#6E88A8;padding:0 1.1rem .35rem;font-weight:600;
}
.nav-lien{
  display:flex;align-items:center;gap:.6rem;padding:.52rem 1.1rem;
  color:#D5E0EE;cursor:pointer;border:none;background:none;width:100%;
  text-align:left;font:inherit;font-size:.9rem;
}
.nav-lien:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-lien.actif{background:var(--marine-700);color:#fff;box-shadow:inset 3px 0 0 var(--or-500)}
.nav-lien:focus-visible{outline:2px solid var(--or-500);outline-offset:-2px}
.nav-icone{width:1.15rem;text-align:center;flex-shrink:0;opacity:.9}
.laterale-pied{margin-top:auto;padding:.9rem 1.1rem;border-top:1px solid rgba(255,255,255,.1);font-size:.76rem;color:#8AA2BF}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
.entete{
  background:var(--surface);border-bottom:1px solid var(--trait);
  padding:.7rem 1.2rem;display:flex;align-items:center;gap:.9rem;
  position:sticky;top:0;z-index:20;
}
.entete h1{font-size:1.05rem;margin:0;font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entete-identite{font-size:.8rem;color:var(--ardoise);text-align:right;line-height:1.3}
.entete-identite strong{display:block;color:var(--encre)}
.contenu{padding:1.3rem;flex:1;max-width:1400px;width:100%}

.bouton-menu{display:none;background:none;border:1px solid var(--trait);
  border-radius:var(--r);padding:.35rem .6rem;font-size:1.1rem;cursor:pointer;color:var(--encre)}

/* ------------------------------------------------------------- éléments */
h2{font-size:1.25rem;margin:0 0 .35rem;font-weight:650;letter-spacing:-.01em}
h3{font-size:1rem;margin:1.5rem 0 .5rem;font-weight:600}
p{margin:0 0 .8rem;max-width:72ch}
.sous-titre{color:var(--ardoise);font-size:.88rem;margin:0 0 1.2rem;max-width:74ch}

.carte{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);
  padding:1.1rem 1.2rem;margin-bottom:1rem;box-shadow:var(--ombre)}
.carte-titre{font-weight:600;margin-bottom:.7rem;font-size:.95rem}

.grille{display:grid;gap:1rem}
.grille-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* Une donnée que l'écran montre sans la laisser modifier : elle occupe la
   place d'un champ pour que la lecture du formulaire reste régulière. */
.valeur-figee{padding:.5rem .6rem;border:1px dashed var(--trait);
  border-radius:var(--r);color:var(--ardoise);background:transparent}
/* L'aperçu du logo, À LA TAILLE OÙ IL S'IMPRIMERA — 26 mm de large, 16 mm de
   haut. Agrandi à la largeur de l'écran, un logo de 80 pixels paraît net et
   l'école ne découvre le flou que sur le premier paquet de bulletins.
   Le damier discret montre la transparence, seule façon de voir avant
   impression qu'un logo traîne un fond blanc derrière lui. */
.apercu-logo{display:flex;align-items:center;justify-content:center;
  min-height:22mm;padding:.8rem;border:1px dashed var(--trait);
  border-radius:var(--r);
  background-color:#fff;
  background-image:linear-gradient(45deg,#eceff3 25%,transparent 25%,
    transparent 75%,#eceff3 75%),linear-gradient(45deg,#eceff3 25%,
    transparent 25%,transparent 75%,#eceff3 75%);
  background-size:14px 14px;background-position:0 0,7px 7px}
.apercu-logo img{max-width:26mm;max-height:16mm;width:auto;height:auto}
.apercu-vide{font-size:.85rem;color:var(--ardoise);text-align:center}
/* ---------------------------------------------- conseil de discipline
   Un cas par bloc, nettement séparé du suivant : le conseil examine plusieurs
   élèves dans la même séance, et confondre deux dossiers à l'écran est le
   genre d'erreur qui se retrouve ensuite dans le procès-verbal. */
.bloc-cas{border:1px solid var(--trait);border-left:3px solid var(--marine);
  border-radius:var(--r);padding:.8rem 1rem;margin-top:1rem;
  background:var(--surface-2)}
.bloc-cas h4{margin:0 0 .6rem;font-size:1rem}
/* Le procès-verbal imprimé. */
.feuille .titre-pv{font-size:10.5pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;margin:1rem 0 .35rem;border-bottom:1px solid #999;
  padding-bottom:.15rem}
.feuille table.table-pv-entete{width:100%;margin-bottom:.4rem}
.feuille table.table-pv-entete th{text-align:left;background:#f2f2f2}

/* ------------------------------------------------------------- infirmerie
   Les coordonnées de la famille ne sont pas une décoration : c'est le seul
   élément de l'écran dont l'absence coûte des heures le jour où quelque chose
   arrive. Elles sont donc lisibles à un mètre. */
.contacts-urgence{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.contact-urgence{display:flex;align-items:center;gap:.5rem;
  border:1px solid var(--trait);border-left:3px solid var(--brique, #9E1F17);
  border-radius:var(--r);padding:.35rem .7rem;background:var(--surface)}
.contact-nom{font-weight:600}
.contact-tel{font-family:var(--police-donnees);font-size:1.05em}
/* Une donnée de santé affichée à l'écran : discrètement marquée, pour que
   celui qui la lit sache qu'il lit autre chose qu'une note. */
.donnee-sante{font-style:italic}
.grille-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.grille-4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.tuile{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:.95rem 1.05rem}
.tuile-valeur{font-size:1.75rem;font-weight:650;line-height:1.1;color:var(--marine-800);
  font-variant-numeric:tabular-nums}
:root[data-theme="sombre"] .tuile-valeur,
@media (prefers-color-scheme:dark){:root:not([data-theme="clair"]) .tuile-valeur{color:#8FB2DC}}
.tuile-libelle{font-size:.78rem;color:var(--ardoise);margin-top:.25rem}

/* -------------------------------------------------------------- formulaires */
.champ{margin-bottom:.85rem}
label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.28rem;color:var(--encre-2)}
.aide{font-size:.76rem;color:var(--ardoise);margin-top:.25rem;line-height:1.4}
input,select,textarea{
  width:100%;padding:.55rem .7rem;border:1px solid var(--trait-fort);
  border-radius:var(--r);font:inherit;font-size:.92rem;background:var(--surface);
  color:var(--encre);
}
/* Sans cette règle, la largeur de 100 % ci-dessus s'applique aussi aux cases à
   cocher : la case se retrouve étirée, loin de son libellé, et l'utilisateur ne
   sait plus à quoi elle se rapporte. Défaut constaté sur tous les écrans qui en
   comportent (élèves, appel, programmes, ouverture d'année). */
input[type=checkbox],input[type=radio]{
  width:auto;min-width:0;margin:0;vertical-align:middle;accent-color:var(--marine-700)}
label.coche{
  display:flex;align-items:center;gap:.5rem;font-weight:400;margin:.4rem 0;
  cursor:pointer;color:var(--encre)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--marine-700);box-shadow:0 0 0 3px rgba(44,78,122,.18)}
input[type="number"]{font-family:var(--police-donnees);text-align:right}
input:disabled,select:disabled{background:var(--surface-2);color:var(--ardoise)}
textarea{min-height:5rem;resize:vertical}

.bouton{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.55rem 1.05rem;border-radius:var(--r);border:1px solid transparent;
  font:inherit;font-size:.9rem;font-weight:550;cursor:pointer;
  background:var(--marine-800);color:#fff;min-height:40px;
}
.bouton:hover{background:var(--marine-700)}
.bouton:focus-visible{outline:2px solid var(--or-500);outline-offset:2px}
.bouton:disabled{opacity:.55;cursor:not-allowed}
.bouton.secondaire{background:var(--surface);color:var(--encre);border-color:var(--trait-fort)}
.bouton.secondaire:hover{background:var(--surface-2)}
.bouton.discret{background:none;color:var(--marine-700);border-color:transparent;padding:.4rem .6rem}
.bouton.danger{background:var(--erreur);color:#fff}
.bouton.pleine{width:100%}
.barre-actions{display:flex;flex-wrap:wrap;gap:.55rem;margin:1rem 0}

/* ------------------------------------------------------------------ tables */
.table-zone{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem;min-width:520px}
th{
  text-align:left;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ardoise);padding:.6rem .8rem;background:var(--surface-2);
  border-bottom:1.5px solid var(--trait-fort);white-space:nowrap;position:sticky;top:0;
}
td{padding:.55rem .8rem;border-bottom:1px solid var(--trait);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.num{font-family:var(--police-donnees);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td input{padding:.35rem .45rem;font-size:.88rem}

/* ---------------------------------------------------------------- étiquettes */
.etiq{display:inline-block;font-size:.7rem;font-weight:600;padding:.15rem .48rem;
  border-radius:3px;white-space:nowrap;letter-spacing:.02em}
.etiq-succes{background:var(--succes-fond);color:var(--succes)}
.etiq-alerte{background:var(--alerte-fond);color:var(--alerte)}
.etiq-erreur{background:var(--erreur-fond);color:var(--erreur)}
.etiq-neutre{background:var(--info-fond);color:var(--ardoise)}
.etiq-or{background:var(--or-100);color:var(--or-600)}

/* ---------------------------------------------------------------- encarts */
.encart{border-radius:var(--r);padding:.85rem 1rem;margin-bottom:1rem;
  border:1px solid;font-size:.89rem;line-height:1.5}
.encart p{margin:0}
.encart p + p{margin-top:.5rem}
.encart-info{background:var(--info-fond);border-color:var(--trait-fort);color:var(--encre-2)}
.encart-succes{background:var(--succes-fond);border-color:var(--succes);color:var(--succes)}
.encart-alerte{background:var(--alerte-fond);border-color:var(--alerte);color:var(--alerte)}
.encart-erreur{background:var(--erreur-fond);border-color:var(--erreur);color:var(--erreur)}
.encart-titre{font-weight:650;margin-bottom:.3rem}

/* ----------------------------------------------------------- écrans pleins */
.plein{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:1.2rem;background:var(--marine-900);
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:26px 26px}
.panneau{background:var(--surface);border-radius:10px;padding:1.7rem;width:100%;
  max-width:440px;box-shadow:var(--ombre-forte)}
.panneau.large{max-width:720px}
.panneau-marque{font-size:1.6rem;font-weight:700;color:var(--marine-800);
  letter-spacing:-.02em;margin-bottom:.15rem}
:root[data-theme="sombre"] .panneau-marque{color:#8FB2DC}
.panneau-sous{color:var(--ardoise);font-size:.86rem;margin-bottom:1.4rem}

/* ------------------------------------------------------------- messages */
.messages{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
  z-index:9000;display:flex;flex-direction:column;gap:.5rem;width:min(94vw,460px)}
.message{background:var(--marine-900);color:#fff;padding:.7rem 1rem;border-radius:var(--r);
  box-shadow:var(--ombre-forte);font-size:.88rem;display:flex;gap:.6rem;align-items:flex-start}
.message.succes{background:var(--succes);color:#fff}
.message.erreur{background:var(--erreur);color:#fff}
.message.alerte{background:var(--alerte);color:#fff}

.bandeau-reseau{position:fixed;top:0;left:0;right:0;z-index:9500;padding:.45rem 1rem;
  text-align:center;font-size:.82rem;font-weight:600;background:var(--alerte);color:#fff}
.bandeau-reseau.synchro{background:var(--marine-700)}
.bandeau-reseau[hidden]{display:none}

/* -------------------------------------------------------------------- divers */
.vide{text-align:center;padding:2.5rem 1rem;color:var(--ardoise)}
.vide-titre{font-weight:600;color:var(--encre-2);margin-bottom:.3rem}
.filtres{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin-bottom:1rem}
.filtres .champ{margin-bottom:0;min-width:190px;flex:1}
.filtres select{text-overflow:ellipsis}
.pagination{display:flex;gap:.5rem;align-items:center;justify-content:center;
  margin-top:1rem;font-size:.85rem;color:var(--ardoise)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------- mobile */
@media (max-width:900px){
  .laterale{position:fixed;left:0;top:0;bottom:0;z-index:100;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:var(--ombre-forte)}
  .laterale.ouverte{transform:translateX(0)}
  .bouton-menu{display:block}
  .contenu{padding:.9rem}
  .voile{position:fixed;inset:0;background:rgba(16,27,41,.5);z-index:99}
  body{font-size:16px}      /* évite le zoom automatique sur iOS */
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------- impression */
@page{size:A4;margin:14mm}
@media print{
  /* « ecran-seul » : filtres, avertissements de saisie, boutons d'action.
     Utile devant l'écran, hors sujet sur un document qu'on affiche au mur. */
  .laterale,.entete,.barre-actions,.filtres,.messages,.bandeau-reseau,
  .bouton,.pagination,.ecran-seul{display:none!important}
  /* Un encart posé À CÔTÉ d'une feuille est un conseil de saisie — « 30
     créneaux n'ont pas d'enseignant nommé ». Il occupait trente millimètres
     en haut de l'emploi du temps affiché au mur, et poussait la dernière
     ligne sur une seconde page. Ceux que le document porte lui-même, à
     l'intérieur de la feuille, restent imprimés. */
  .encart{display:none!important}
  .feuille .encart{display:block!important}
  body{background:#fff;color:#000;font-size:11pt}
  .contenu{padding:0;max-width:none}
  .carte{border:none;box-shadow:none;padding:0;margin:0}
  .table-zone{border:none;overflow:visible}
  table{min-width:0}
  th{background:#eee!important;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .feuille{page-break-after:always}
  .feuille:last-child{page-break-after:auto}
  .filigrane{position:fixed;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-32deg);
    font-size:64pt;color:rgba(0,0,0,.10);font-weight:800;letter-spacing:.1em;
    pointer-events:none;z-index:1000}
}

/* ------------------------------------------------------- document imprimable */
/* Une feuille est du PAPIER, quel que soit le thème de l'écran.
   Elle redéfinit donc les jetons de couleur pour tout ce qu'elle contient —
   tuiles, encarts, tableaux, graphiques. Sans cela, en thème sombre, une tuile
   garde son fond nuit et son encre claire sur un fond blanc : le document
   devient illisible à l'écran, et pire encore une fois imprimé. Redéfinir les
   jetons plutôt que chaque composant vaut aussi pour les écrans à venir. */
.feuille{
  --surface:#FFFFFF; --surface-2:#F4F6F9; --papier:#FFFFFF;
  --encre:#101B29; --encre-2:#2A3746;
  --ardoise:#5B6779; --ardoise-clair:#8794A6;
  --trait:#C9D2DE; --trait-fort:#9DAABC;
  --succes:#1E6444; --succes-fond:#DFF0E6;
  --alerte:#95590A; --alerte-fond:#FBEEDA;
  --erreur:#9E1F17; --erreur-fond:#FAE4E1;
  --info-fond:#E6EBF2;
  --graphe-1:#1F5FA8; --graphe-2:#B3306E; --graphe-grille:#C9D2DE;
  background:#fff;color:#000;padding:14mm;max-width:210mm;margin:0 auto 1.2rem;
  border:1px solid var(--trait);border-radius:var(--r)}
/* Une feuille en paysage : 297 mm au lieu de 210. À l'écran comme sur le
   papier, sans quoi l'aperçu montrerait une colonne écrasée que l'imprimante
   étalerait ensuite — et on corrigerait un défaut qui n'existe pas. */
.feuille-paysage{max-width:297mm}
.feuille .tuile{background:#fff;border-color:#B9C4D2}
.feuille .tuile-valeur{color:#1F3A5F}
.feuille .graphe{background:#fff;border-color:#C9D2DE}
.feuille-entete-bloc{border-bottom:2px solid #000;padding-bottom:.5rem;
  margin-bottom:1rem}
.feuille-entete{display:flex;justify-content:space-between;gap:.5rem;
  align-items:flex-start}
.feuille-entete div{font-size:9.5pt;line-height:1.35}
.feuille-titre{text-align:center;font-size:14pt;font-weight:700;margin:.9rem 0;
  text-transform:uppercase;letter-spacing:.04em}
.feuille table{font-size:9.5pt;min-width:0}
.feuille th,.feuille td{border:1px solid #666;padding:.28rem .4rem;color:#000}
/* Un en-tête de colonne se replie sur DEUX LIGNES plutôt que d'élargir sa
   colonne. À l'écran, une colonne large ne coûte qu'un peu de défilement ;
   sur une feuille A4, elle pousse les dernières colonnes hors de la page.
   C'est « Classe(s) d'affectation » — quatre-vingt-un pixels de place pour
   cent trente et un de titre — qui faisait déborder le répertoire. */
.feuille th{background:#e8e8e8;text-transform:none;font-size:9pt;letter-spacing:0;
  position:static;white-space:normal;overflow-wrap:anywhere}
.signatures{display:flex;justify-content:space-between;margin-top:2.5rem;font-size:9.5pt}
.signatures div{text-align:center;min-width:32%}
.signature-ligne{margin-top:2.8rem;border-top:1px solid #000;padding-top:.2rem}

/* ------------------------------------------------ charte documentaire (js/charte.js)
   L'en-tête administratif d'Afrique francophone :

     Ministère de l'Éducation Nationale        République Centrafricaine
     Enseignement Catholique Associé            Unité - Dignité - Travail

                    COMPLEXE SCOLAIRE SAINT GABRIEL
               BP 1249 Bangui · +236 … · contact@saint-gabriel.cf

   À gauche l'autorité de tutelle, à droite l'État et sa devise, au centre
   l'école. Un parent la reconnaît avant même d'avoir lu le titre, et une
   feuille qui s'en écarte est lue comme un document de fortune. */
/* Deux colonnes SEULEMENT sur la première ligne. « Ministère des Enseignements
   Secondaires » et « République Centrafricaine » y tiennent alors chacun sur sa
   ligne ; intercaler le nom de l'école entre les deux les replierait tous les
   trois sur deux ou trois lignes, et l'en-tête deviendrait un pavé irrégulier. */
/* La gauche reçoit un peu plus que la moitié : « Enseignement Catholique
   Associé de Centrafrique — ECAC » est la plus longue ligne de tout l'en-tête,
   quand « République Centrafricaine » et sa devise sont courtes. Partager à
   égalité replierait la gauche sur deux lignes en laissant la droite à moitié
   vide. */
.feuille-entete>.entete-gauche{flex:1.25 1 0;text-align:left;padding-right:.6rem}
.feuille-entete>.entete-droite{flex:.9 1 0;text-align:right;padding-left:.6rem}
/* Le ministère ouvre la colonne de gauche ; l'organe d'attache le suit en
   retrait de graisse, parce qu'il en dépend.

   Ces quatre lignes — ministère, organe d'attache, État, devise — sont d'un
   demi-point plus petites que le reste de l'en-tête, et pour une seule raison :
   « Ministère des Enseignements Secondaires » et « Enseignement Catholique
   Associé de Centrafrique — ECAC » doivent tenir chacun sur SA ligne. Repliés
   sur deux, ils décalent tout l'en-tête et lui donnent l'air d'un brouillon.
   `text-wrap:balance` répartit à égalité le peu qui déborderait malgré tout,
   au lieu de laisser un mot seul en fin de bloc. */
.feuille-entete>.entete-gauche>div,
.feuille-entete>.entete-droite>div{font-size:9pt!important;text-wrap:balance}
.entete-ministere{font-weight:600}
.entete-tutelle{font-style:italic}
/* L'État et sa devise. La devise se lit sous le nom du pays, sur une seule
   ligne : elle n'est ni un slogan d'école ni une monnaie. */
.entete-pays{text-transform:uppercase;font-weight:600;letter-spacing:.03em}
.entete-devise-nationale{font-style:italic}
/* L'école occupe SA propre ligne, sur toute la largeur : c'est ce qu'on lit en
   premier, et c'est le plus long des trois intitulés de l'en-tête. */
.entete-etablissement{display:grid;justify-items:center;margin-top:.45rem}
/* Avec un logo : trois colonnes, dont la troisième est vide et de la même
   largeur que la première. C'est elle qui maintient le nom de l'école au
   MILIEU de la feuille — sans elle, le logo le pousserait vers la droite et
   l'en-tête pencherait sur deux mille documents. */
.entete-etablissement.avec-logo{grid-template-columns:24mm 1fr 24mm;
  align-items:center;gap:.6rem}
.entete-etablissement.avec-logo .entete-bloc-ecole{grid-column:2}
/* La devise de l'école suit son nom, en italique et plus petit : elle
   accompagne l'identité sans lui disputer la première lecture. */
.entete-devise-ecole{font-style:italic;font-size:9pt;line-height:1.2;
  margin-top:.1rem}
.entete-nom{font-weight:700;font-size:12pt!important;text-transform:uppercase;
  line-height:1.15!important;letter-spacing:.01em}
/* Les coordonnées prennent toute la largeur, sous le nom : le logo ne leur
   dispute pas la place, et la ligne tient d'un seul tenant. */
.entete-contacts{font-size:8.5pt!important;color:#333;line-height:1.3;
  text-align:center;margin-top:.1rem}
/* Le logo se range À CÔTÉ du nom, non au-dessus : au-dessus il pousse le nom
   d'une ligne et repousse tout le document. La hauteur est bornée pour qu'un
   logo carré et un logo tout en largeur occupent la même place — sans quoi
   l'en-tête change de hauteur d'une école à l'autre. */
.entete-logo{max-height:16mm;max-width:26mm;width:auto;height:auto;
  display:block;justify-self:start}
/* Sur un téléphone, 26 mm pris de chaque côté ne laissent plus rien au nom :
   le logo passe au-dessus, centré. */
@media (max-width:640px){
  .entete-etablissement.avec-logo{grid-template-columns:1fr}
  .entete-etablissement.avec-logo .entete-bloc-ecole{grid-column:1}
  .entete-logo{justify-self:center;margin-bottom:.3rem}
}
/* Numéro d'autorisation, code national, numéro de la pièce : sous l'en-tête et
   non dans l'angle droit, qui appartient à l'État. */
.entete-references{display:flex;justify-content:flex-end;flex-wrap:wrap;
  gap:.2rem 1rem;margin-top:.35rem}
.entete-references div{font-size:8.5pt;color:#333}
.feuille-titre-bloc{text-align:center;margin:.9rem 0}
.feuille-titre-bloc .feuille-titre{margin:0}
.feuille-sous-titre{font-size:10pt;color:#333;margin-top:.15rem}
.feuille-pied{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1.5rem;margin-top:1.6rem;font-size:9pt}
.feuille-verification{max-width:52%;color:#333}
.aide-impression{font-size:7.5pt;line-height:1.3;color:#555}
.feuille-signataire{text-align:center;min-width:34%}
.signataire-qualite{margin-top:.3rem}
/* L'espace où l'on signe et où l'on appose le cachet. Trop court, la feuille
   est inutilisable et l'école réimprime tout le lot. */
.signataire-espace{height:22mm}
.signataire-nom{font-weight:700;border-top:1px solid #000;padding-top:.15rem;
  display:inline-block;min-width:55mm}
.feuille-devise{text-align:center;font-style:italic;font-size:9pt;color:#333;
  margin-top:.8rem;border-top:1px solid #999;padding-top:.3rem}

/* ---------------------------------------------------- grille d'emploi du temps
   Imprimée, elle ne porte que la discipline : une case qui empile matière,
   professeur et salle donne un tableau illisible en A4, et l'école retourne à
   sa grille manuscrite. Les professeurs sont listés dessous. */
.grille-edt{width:100%;table-layout:fixed}
.grille-edt th,.grille-edt td{text-align:center;vertical-align:middle;
  padding:.3rem .2rem}
.grille-edt .edt-heure{width:9.5%;white-space:nowrap;font-weight:600;
  font-size:.78rem;background:var(--surface-2)}
.grille-edt .edt-matiere{font-weight:600;line-height:1.2}
.grille-edt .edt-detail{font-size:.72rem;color:var(--ardoise)}
/* LA PAUSE TRAVERSE LA GRILLE, elle n'occupe pas six cases.

   Une récréation découpée en une case grise par jour se confond, à l'œil, avec
   six heures libres. Une bande continue se lit pour ce qu'elle est : une
   interruption de toute l'école, à la même minute pour tout le monde. C'est
   aussi la forme des emplois du temps affichés au mur d'une salle de classe,
   et un document qui ressemble à celui qu'on remplaçait est un document qu'on
   adopte. */
.grille-edt .edt-pause{background:repeating-linear-gradient(45deg,
  transparent,transparent 4px,rgba(0,0,0,.06) 4px,rgba(0,0,0,.06) 8px);
  font-size:.75rem;font-style:italic;color:var(--ardoise);
  letter-spacing:.06em;padding:.22rem .4rem}
.grille-edt .edt-pause-nom{font-variant:small-caps;font-style:normal;
  font-weight:600;letter-spacing:.1em}
.grille-edt .edt-pause-heure{margin-left:.6rem;font-size:.7rem}
/* Une discipline hors bulletin — étude, vie de classe — se lit sans peser :
   elle occupe l'heure sans être un cours noté. */
.grille-edt .edt-hors-bulletin{font-weight:500;font-style:italic}
.ligne-pause-reglage td{background:var(--surface-2)}
.grille-edt select{width:100%;font-size:.78rem;padding:.2rem;border-radius:4px}
.grille-edt td.edt-remplie{background:var(--surface-2)}
/* LA PLANIFICATION DE L'ANNÉE, imprimée et affichée en salle des professeurs.
   Elle remplace un document composé à la main chaque rentrée : elle doit en
   avoir la tenue, sinon l'école reprendra le sien. */
.planif-regle{font-weight:600;margin:.2rem 0 .9rem;font-size:.92rem}
.planif-titre{margin:1.3rem 0 .2rem;font-size:1.02rem}
.planif-mesure{margin:0 0 .5rem;font-size:.82rem;color:var(--ardoise)}
.planif-alerte{font-size:.78rem;font-style:italic;color:var(--ardoise);
  margin-top:.15rem}
.planif-evenements{margin-top:.7rem}
/* Les responsables de la classe, sous l'emploi du temps affiché au mur.
   C'est là qu'un surveillant, un remplaçant ou un parent de passage les
   cherche — donc là qu'ils doivent être. */
.edt-responsables{margin-bottom:.8rem}
.edt-responsables-liste{display:grid;grid-template-columns:auto 1fr;
  gap:.1rem .7rem;margin:.2rem 0 0;font-size:.82rem}
.edt-responsables-liste dt{font-weight:600}
.edt-responsables-liste dd{margin:0}
/* Le procès-verbal d'un conseil d'enseignement : un acte, pas une note. */
.pv-entete{font-weight:600;margin:0 0 .3rem}
.pv-quorum{font-size:.82rem;color:var(--ardoise);margin:.1rem 0}
.pv-presences{font-size:.82rem;margin:.1rem 0;line-height:1.35}
.pv-section{margin-top:.7rem}
.pv-texte{white-space:pre-wrap;margin:.15rem 0 0}
.edt-corps{margin-top:1rem}
.edt-corps-titre{font-weight:600;margin-bottom:.35rem;font-size:.9rem}


/* ============================ GRAPHIQUES ==================================
   Dessinés en SVG, sans librairie. La valeur est écrite au bout de chaque
   barre : le graphique doit rester lisible photocopié en noir et blanc, punaisé
   au tableau d'affichage du bureau. */
.graphe{margin:0 0 1.4rem;background:var(--surface);border:1px solid var(--trait);
  border-radius:var(--r);padding:.9rem 1rem 1rem}
.graphe figcaption{font-weight:600;font-size:.95rem;margin-bottom:.5rem;
  color:var(--encre)}
.graphe svg{display:block;width:100%;height:auto;overflow:visible}
.graphe-axe{stroke:var(--trait-fort);stroke-width:1}
.graphe-valeur{font-family:var(--police-donnees);font-size:11px;
  fill:var(--encre-2);font-weight:600}
.graphe-etiquette{font-size:11px;fill:var(--ardoise)}
.graphe-sous-etiquette{font-size:10px;fill:var(--ardoise-clair)}

.graphe-legende{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:.6rem;
  font-size:.85rem;color:var(--encre-2)}
.graphe-legende-item{display:inline-flex;align-items:center;gap:.4rem}
.graphe-pastille{width:12px;height:12px;border-radius:3px;display:inline-block}

.barres{display:flex;flex-direction:column;gap:.4rem}
.barre-ligne{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr auto;
  gap:.7rem;align-items:center;font-size:.9rem}
.barre-libelle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barre-piste{background:var(--surface-2);border-radius:4px;height:18px;
  overflow:hidden}
.barre-remplissage{display:block;height:100%;border-radius:0 4px 4px 0;min-width:2px}
.barre-valeur{font-family:var(--police-donnees);font-size:.85rem;
  color:var(--encre-2);white-space:nowrap}
.barre-manquante .barre-libelle{color:var(--ardoise);font-style:italic}

@media (max-width:640px){
  .barre-ligne{grid-template-columns:minmax(5rem,9rem) 1fr auto;font-size:.82rem}
}

@media print{
  .graphe{border-color:#000;break-inside:avoid;page-break-inside:avoid}
  .graphe-valeur{fill:#000}
  .graphe-etiquette,.graphe-sous-etiquette{fill:#222}
  .barre-piste{border:1px solid #999;background:#fff}
}

/* ========================== ESPACE DES FAMILLES ===========================
   Écran ouvert par un parent, sur un téléphone, souvent debout. Une question
   par carte, dans l'ordre où on se les pose, et des chiffres assez grands pour
   être lus à bout de bras. */
.carte-enfant{background:var(--surface-2)}
.enfant-nom{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
.enfant-details{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.85rem;
  color:var(--ardoise);margin-top:.2rem;align-items:center}

.resume-ecolage{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;
  margin:.4rem 0 .8rem;text-align:center}
.chiffre-cle{font-size:1.6rem;font-weight:750;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--marine-800)}
:root[data-theme="sombre"] .chiffre-cle{color:#8FB2DC}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="clair"]) .chiffre-cle{color:#8FB2DC}}
.chiffre-sec{font-size:1.15rem;font-weight:650;line-height:1.2;
  font-variant-numeric:tabular-nums}

/* La jauge porte un liseré : le remplissage ne se lit pas à la couleur seule,
   et le pourcentage est de toute façon écrit juste en dessous. */
.jauge{height:.7rem;border:1px solid var(--trait-fort);border-radius:999px;
  overflow:hidden;background:var(--surface-2)}
.jauge-remplie{height:100%;background:var(--marine-700);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 5px,
    rgba(255,255,255,.22) 5px,rgba(255,255,255,.22) 10px)}

.annonce{border-left:4px solid var(--trait-fort);padding:.5rem .8rem;
  margin:.5rem 0;background:var(--surface-2);border-radius:0 var(--r) var(--r) 0}
.annonce-urgente{border-left-color:var(--erreur);background:var(--erreur-fond)}
.annonce-tete{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.annonce-titre{font-weight:650}
.annonce-date{font-size:.78rem;color:var(--ardoise);margin-left:auto}
.annonce-corps{margin:.3rem 0 0;white-space:pre-wrap}

@media (max-width:640px){
  .resume-ecolage{grid-template-columns:1fr;gap:.5rem;text-align:left}
  .resume-ecolage>div{display:flex;align-items:baseline;gap:.5rem}
  .enfant-nom{font-size:1.05rem}
}

/* ============================== BULLETIN ==================================
   Le document qui sort le plus de l'école : lu par des parents qui n'ont
   parfois pas été scolarisés, gardé des années, présenté à un établissement
   d'accueil ou à une commission de bourse. Sa mise en page n'est pas une
   question de goût.

   Rien n'y repose sur la couleur : ces feuilles sont photocopiées en noir et
   blanc par centaines. Ce qui distingue, c'est la graisse, le trait, le fond
   gris clair et la taille. */

/* Le résultat en grand — ce que le parent cherche des yeux en premier. */
.resultat-vedette{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;
  margin:.9rem 0 1rem}
/* Une cinquième case — la moyenne cumulée — apparaît à partir du deuxième
   trimestre. Cinq colonnes plutôt que quatre plus une orpheline : une case
   seule sur sa ligne se lit comme un ajout de dernière minute. */
.resultat-vedette:has(> :nth-child(5)){grid-template-columns:repeat(5,1fr)}
.resultat-case{border:1px solid #666;border-radius:var(--r);padding:.55rem .5rem;
  text-align:center}
.resultat-fort{border-width:2px;background:#F0F2F5}
.resultat-valeur{font-size:17pt;font-weight:750;line-height:1.1;
  font-variant-numeric:tabular-nums}
.resultat-fort .resultat-valeur{font-size:22pt}
.resultat-libelle{font-size:7.5pt;color:#333;margin-top:.2rem;
  text-transform:uppercase;letter-spacing:.03em}

/* Largeurs fixes : voir tableauMatieres(). En école bilingue, les intitulés
   doublés élargiraient sinon le tableau jusqu'à faire sortir la dernière
   colonne de la feuille. */
table.bulletin-matieres{width:100%;font-size:9pt;table-layout:fixed;
  /* En dessous de cette largeur, huit colonnes deviennent huit colonnes de
     deux caractères : sur un téléphone, le tableau se fait défiler
     horizontalement (.table-zone) plutôt que de s'écraser jusqu'à
     l'illisible. 42rem tient dans la largeur utile d'un A4. */
  min-width:42rem}
table.bulletin-matieres td,table.bulletin-matieres th{overflow-wrap:anywhere}
/* La seconde langue, sous la première et non à côté : dans une colonne de 7 %,
   « Moy. / Avg. » sur une ligne déborde. */
table.bulletin-matieres .entete-seconde-langue{font-weight:400}
table.bulletin-matieres .matiere-nom{font-weight:600}
/* La note de l'élève est la colonne qu'on lit : elle est plus lourde et plus
   grande que celles qui l'entourent. */
table.bulletin-matieres .note-eleve{font-weight:750;font-size:10pt}
table.bulletin-matieres .appreciation{font-size:8pt;line-height:1.25}
table.bulletin-matieres .ligne-total th{background:#dcdcdc;font-weight:700}
/* Les domaines de compétence. L'intitulé annonce le groupe, la synthèse le
   conclut : deux repères visuels distincts, sans couleur vive — un bulletin
   se photocopie en noir et blanc dans toutes les écoles de la région. */
.cases-en-ligne{display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  align-items:center;padding-top:.2rem}
.case-libelle{display:inline-flex;align-items:center;gap:.3rem;font-size:.9em;
  white-space:nowrap}
.sous-disciplines{font-size:.78em;color:#4a5560;line-height:1.15;
  margin-top:.05rem}
/* Au dernier cran de resserrement, le détail des sous-disciplines s'efface :
   la note de la matière, elle, ne peut pas s'effacer. */
.feuille-tres-serree .cases-en-ligne{display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  align-items:center;padding-top:.2rem}
.case-libelle{display:inline-flex;align-items:center;gap:.3rem;font-size:.9em;
  white-space:nowrap}
.sous-disciplines{font-size:.72em}
.sans-synthese-domaine .cases-en-ligne{display:flex;flex-wrap:wrap;gap:.35rem .9rem;
  align-items:center;padding-top:.2rem}
.case-libelle{display:inline-flex;align-items:center;gap:.3rem;font-size:.9em;
  white-space:nowrap}
.sous-disciplines{display:none}
.entete-domaine th{background:#eef2f6;font-weight:700;text-align:left;
  letter-spacing:.02em;padding-top:.18rem;padding-bottom:.18rem}
.ligne-domaine th{background:#f4f6f8;font-weight:700;border-top:1px solid #b9c2cc}
.ligne-domaine .domaine-nom{text-align:left}
/* Le repli, quand la feuille déborde : voir `tenirSurUnePage`. */
.sans-entete-domaine .entete-domaine{display:none}
.sans-synthese-domaine .ligne-domaine{display:none}
/* Les notes exactes de l'enfant, épreuve par épreuve — ce que le parent
   réclame et ce qui rend la moyenne vérifiable. La colonne est étroite : les
   notes s'y replient sur deux lignes plutôt que d'écraser les disciplines. */
table.bulletin-matieres .col-notes{font-size:8.5pt;line-height:1.5;
  white-space:normal}
.note-comptee{font-variant-numeric:tabular-nums}
/* Une note écartée du calcul reste visible — elle serait réclamée — mais se
   distingue. En gris et entre parenthèses à l'écran ; les parenthèses seules
   suffisent une fois la feuille photocopiée en noir et blanc, ce qu'aucune
   nuance de gris ne garantit. */
.note-ecartee{color:#666;font-style:italic;font-variant-numeric:tabular-nums}
.note-separateur{color:#999;margin:0 .18rem}
.note-absente{color:#777}
table.bulletin-matieres .enseignant-matiere{font-size:8pt;line-height:1.25}
.legende-notes{font-size:7.5pt;color:#555;margin:.25rem 0 0;line-height:1.35}

.bulletin-bas{display:grid;gap:.8rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bulletin-encadre{border:1px solid #666;border-radius:var(--r);
  padding:.5rem .7rem;font-size:9pt;break-inside:avoid;page-break-inside:avoid}
.bulletin-encadre-titre{font-weight:700;text-transform:uppercase;
  font-size:8.5pt;letter-spacing:.05em;border-bottom:1px solid #999;
  padding-bottom:.2rem;margin-bottom:.4rem}
.bulletin-encadre .cartouche-case{border-bottom:1px dotted var(--trait)}
.bulletin-progression{margin-top:.8rem}
table.repartition-classe,table.table-progression{width:100%;margin-top:.4rem;
  font-size:8.5pt}
table.repartition-classe td{border:none;border-bottom:1px dotted var(--trait);
  padding:.15rem .3rem}
table.table-progression .ligne-courante{font-weight:700;background:#EFF2F6}

.liste-faits{margin:.4rem 0 0 1rem;padding:0;font-size:8.5pt;line-height:1.4}
.liste-faits li{margin:.15rem 0}
.fait-date{font-family:var(--police-donnees);margin-right:.4rem}
.fait-sanction{font-weight:700}
/* Une distinction se voit AUTANT qu'une sanction : un bulletin qui ne remonte
   que le mauvais apprend à l'élève que seul le mauvais se voit. */
.fait-valorisant{font-weight:700;text-decoration:underline}

.bulletin-appreciations{display:grid;gap:.6rem;margin-top:1rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.appreciation-case{border:1px solid #666;border-radius:var(--r);
  padding:.4rem .6rem;min-height:3.4rem}
.appreciation-libelle{font-size:7.5pt;text-transform:uppercase;
  letter-spacing:.04em;color:#333;margin-bottom:.2rem}
.appreciation-texte{font-size:9.5pt;line-height:1.4;min-height:1.6rem}

@media (max-width:640px){
  .resultat-vedette{grid-template-columns:repeat(2,1fr)}
}
@media print{
  .resultat-fort{background:#F0F2F5!important;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  table.bulletin-matieres .ligne-total th,table.table-progression .ligne-courante{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bulletin-bas,.bulletin-appreciations{break-inside:avoid;
    page-break-inside:avoid}
}

/* ------------------------------------------ actes de vie scolaire imprimés
   Un billet de sortie tient sur un tiers de page : lui donner la feuille
   entière gaspille deux feuilles par jour dans une école qui en délivre dix.
   Le talon-réponse, lui, est ce qui PROUVE la remise — sans lui, l'école n'a
   que sa parole quand une famille soutient n'avoir rien reçu. */
.billet{font-size:11pt;line-height:1.7}
.billet .signatures{margin-top:1.4rem}
.talon{margin-top:2rem}
.talon-decoupe{font-size:8pt;color:#777;letter-spacing:.1em;
  white-space:nowrap;overflow:hidden;margin-bottom:.5rem}
.talon-titre{font-weight:700;font-size:9.5pt;text-transform:uppercase;
  letter-spacing:.03em;margin-bottom:.4rem}
.talon p{font-size:9.5pt;line-height:1.9;max-width:none}
.talon .signatures{margin-top:1.2rem;font-size:9pt}
@media print{.talon{break-inside:avoid;page-break-inside:avoid}}

/* -------------------------------------- bulletins de remise des codes
   Sept cents codes à distribuer, un par famille, glissés dans les carnets de
   correspondance. On en met quatre par page — plus serré, le code cesse
   d'être recopiable ; plus large, l'école y passe une rame de papier. Chaque
   bulletin se découpe et ne se coupe jamais entre deux pages. */
.feuille-remises{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.remise{border:1px dashed #999;border-radius:.3rem;padding:.7rem .8rem;
  break-inside:avoid;page-break-inside:avoid}
.remise-titre{font-weight:700;font-size:9pt;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:.35rem}
.remise-code{font-family:var(--police-donnees,monospace);font-size:15pt;
  font-weight:700;letter-spacing:.12em;margin:.4rem 0;text-align:center}
.remise-aide{font-size:8pt;line-height:1.45;color:#444;margin:0;max-width:none}
@media print{.feuille-remises{gap:.5rem}}
@media (max-width:640px){.feuille-remises{grid-template-columns:1fr}}

/* ------------------------------------------------------- écoles bilingues
   Un acte bilingue n'est PAS deux feuilles : c'est une feuille, un en-tête,
   un numéro, une signature — et deux rédactions séparées d'un filet. C'est
   ainsi que sont rédigés les actes des établissements bilingues du Cameroun,
   et c'est ce qui permet à un guichet de n'en accepter qu'un exemplaire. */
/* Le bloc de seconde langue d'un acte suit la même convention que partout
   ailleurs : italique, corps réduit, interligne resserré. Il était jusqu'ici
   au même corps que le français, séparé par un filet pleine largeur et deux
   centimètres de blanc — une attestation bilingue prenait deux feuilles là où
   une suffit, et rien ne disait à l'œil laquelle des deux rédactions fait foi. */
.filet-langues{border-top:.3pt solid #bbb;width:28%;margin:.5rem auto .35rem}
.bloc-seconde-langue{font-style:italic;font-size:.82em;line-height:1.5}
.bloc-seconde-langue p{margin-bottom:.45rem}
/* ===================== LA CONVENTION DU BILINGUISME =======================
   Les documents bilingues d'Afrique centrale suivent tous la même règle
   typographique, et les administrations la reconnaissent : LA LANGUE DE
   TRAVAIL EN PREMIER, à sa taille normale ; la seconde juste dessous, en
   italique, en plus petit, et collée à la première.

   Ce n'est pas de l'ornement. Trois raisons, dans cet ordre :

   1. ÇA TIENT SUR LA PAGE. Deux rédactions au même corps et au même interligne
      font un bulletin de deux feuilles et un diplôme qui déborde. En réduisant
      la seconde à 82 % et en supprimant l'interligne entre les deux, le
      document garde sa pagination d'origine.
   2. L'ŒIL SAUTE CE QU'IL NE LIT PAS. Un francophone reconnaît l'italique
      grise et passe ; sans ce contraste, il relit deux fois chaque phrase.
   3. LA HIÉRARCHIE EST DITE. Le document fait foi dans la langue de l'école ;
      la traduction accompagne, elle ne concurrence pas.

   Une seule classe porte la règle, et tout document qui affiche deux langues
   l'emploie — titre, libellé, phrase entière. */
.seconde-langue{font-style:italic;font-size:.82em;line-height:1.15;
  color:#333;display:block;margin-top:.05em}
/* Dans l'en-tête, la seconde langue reprend le gabarit de la ligne qu'elle
   traduit — même graisse, même casse, même alignement — mais en italique plus
   petit. Sans cela, « Central African Republic » sous « RÉPUBLIQUE
   CENTRAFRICAINE » paraîtrait appartenir à une autre rubrique. */
.feuille-entete .seconde-langue{margin-top:0;font-weight:inherit;
  text-transform:inherit;letter-spacing:inherit}
.entete-bloc-ecole .seconde-langue{margin-top:.05rem;font-weight:inherit;
  text-transform:inherit;letter-spacing:inherit}
/* Sur une même ligne — un libellé de colonne, une case de tableau — la seconde
   langue reste au fil du texte : la mettre en bloc casserait la cellule. */
.seconde-langue.au-fil{display:inline;margin-top:0}
.seconde-langue.au-fil::before{content:" / "}

.feuille-titre-second{font-size:11.5pt;margin-top:.05rem;color:#333;
  font-style:italic;letter-spacing:.03em}

/* ==================== CORPS DES ACTES (certificats, attestations) =========
   Un acte se lit à voix haute au guichet. Interligne large, phrases entières,
   et le nom du titulaire détaché au centre : c'est lui qu'on cherche des yeux
   avant tout le reste. */
.corps-acte{line-height:1.95;margin-top:1rem;font-size:10.5pt}
.corps-acte p{max-width:none;margin:0 0 .7rem}
.nom-en-vedette{text-align:center;font-weight:700;font-size:13pt;
  letter-spacing:.02em;margin:1rem 0!important;text-transform:uppercase}
/* L'attestation de fin de maternelle est encadrée par la famille : elle mérite
   un peu de tenue, sans devenir un diplôme d'opérette. */
.corps-solennel{border:2px double #666;border-radius:var(--r);padding:1.2rem 1.4rem;
  margin-top:1.2rem}
.nom-solennel{font-size:15pt;margin:1.2rem 0!important}
.mention-promotion{text-align:center;font-weight:700;font-size:11.5pt;
  letter-spacing:.03em;margin:1rem 0!important}

table.carte-identite{width:100%;margin-top:.8rem}
table.carte-identite th{background:transparent;font-weight:600;
  text-transform:none;letter-spacing:0}

/* Le tableau d'honneur s'affiche au mur : il se lit à trois mètres. */
.honneur-sous-titre{text-align:center;font-size:10pt;color:#333;
  margin-bottom:1rem}
ol.palmares{list-style:none;padding:0;margin:.5rem 0 1rem;counter-reset:none}
ol.palmares li{display:flex;align-items:baseline;gap:.8rem;
  padding:.45rem .3rem;border-bottom:1px solid var(--trait)}
.palmares-rang{min-width:2.6rem;font-weight:700;font-size:11pt;
  font-family:var(--police-donnees)}
.palmares-nom{flex:1;font-weight:650;font-size:12pt;text-transform:uppercase;
  letter-spacing:.01em}
.palmares-moyenne{font-family:var(--police-donnees);font-weight:650;
  font-size:11pt;white-space:nowrap}
.palmares-mention{font-size:9pt;color:#333;min-width:7rem;text-align:right}

/* ====================== REGISTRES ET DOCUMENTS ============================
   Le cartouche d'identification, en haut de chaque feuille. C'est ce qui rend
   une feuille lisible quand elle circule SEULE — arrachée d'un lot, punaisée
   en salle des professeurs, glissée dans un dossier. */
.cartouche{display:grid;gap:.25rem .9rem;margin:.7rem 0 1rem;
  grid-template-columns:repeat(2,1fr);
  border:1px solid #666;border-radius:var(--r);padding:.5rem .7rem}
@media (min-width:700px){.cartouche{grid-template-columns:repeat(3,1fr)}}
.cartouche-case{display:flex;justify-content:space-between;gap:.5rem;
  font-size:9pt;border-bottom:1px dotted var(--trait);padding:.12rem 0}
.cartouche-libelle{color:var(--ardoise)}
.cartouche-valeur{font-weight:650;text-align:right}

/* Le registre lui-même. Les cases vides doivent être ASSEZ HAUTES pour qu'on y
   écrive au stylo : une grille dense s'imprime bien et ne se remplit pas. */
table.registre{width:100%;font-size:9pt}
table.registre th{text-align:center;line-height:1.15}
table.registre td{padding:.3rem .35rem}
table.registre .num{font-family:var(--police-donnees);text-align:right}
table.registre .case-vierge{min-width:3.2rem;height:1.55rem;background:#fff}
.consigne{font-size:8.5pt;color:#333;font-style:italic;margin:.5rem 0 .9rem;
  max-width:none}
.titre-section{font-size:10.5pt;text-transform:uppercase;letter-spacing:.04em;
  margin:1.1rem 0 .4rem;border-bottom:1px solid #999;padding-bottom:.15rem}
.lecture-taux{font-size:9pt;margin:.3rem 0 .8rem}
/* Histogramme en caractères pleins : il survit à la photocopie en noir et
   blanc, au fax, et à l'affichage au tableau — ce qu'aucune barre colorée ne
   fait. */
.barre-tranche{font-family:var(--police-donnees);letter-spacing:-1px;
  color:var(--encre-2);font-size:.8rem}
/* La première colonne d'un tableau qui se lit en lignes — la ventilation
   filles / garçons / total. Elle nomme l'indicateur ; les chiffres sont à
   droite, alignés, et c'est entre eux que l'œil compare. */
table.registre th.libelle-ligne{text-align:left;font-weight:600;
  white-space:nowrap}
/* UN NOM NE SE COUPE PAS N'IMPORTE OÙ. « BANGASSO / U Aïcha » sur un document
   remis à une famille n'est pas un défaut d'affichage : c'est le nom de leur
   enfant, mal écrit. Les colonnes d'un tableau dense sont étroites et la règle
   générale y autorise la coupure partout ; on la retire pour ce qui porte un
   nom propre ou un intitulé de discipline, quitte à césurer proprement. */
table.registre th,table.registre td.nom{overflow-wrap:normal;hyphens:auto}

@media print{
  .cartouche{break-inside:avoid;page-break-inside:avoid}
  table.registre .case-vierge{height:1.7rem}
  .barre-tranche{color:#000}
  /* Un petit tableau de synthèse ne se coupe pas. Huit lignes réparties sur
     deux feuilles obligent à comparer deux colonnes d'une page à l'autre, et
     c'est justement ce qu'on fait quarante fois dans une séance de conseil.
     Les grands tableaux — quarante élèves — se coupent, eux : c'est normal,
     et leur ligne d'en-tête se répète. */
  .bloc-insecable{break-inside:avoid;page-break-inside:avoid}
  /* Un titre de section en bas de page, sa table en haut de la suivante :
     le lecteur croit à deux documents. */
  .titre-section,.titre-bloc{break-after:avoid;page-break-after:avoid}
}

/* ======================== SAISIE DES NOTES ================================
   Le seul écran du logiciel qu'on ouvre debout, dans une salle de classe, sur
   un téléphone. Il ne s'agit donc pas d'un tableau qu'on rétrécit : c'est une
   liste d'élèves, une ligne chacun, un champ large et des pastilles qu'on
   atteint au pouce sans viser. Sur un écran large, la ligne se replie sur une
   seule rangée et retrouve l'allure d'un tableau.

   L'état d'une ligne ne se lit JAMAIS à la couleur seule : « ✓ » ou « · » le
   disent, parce que le logiciel tourne aussi sur des écrans délavés et que
   certains enseignants distinguent mal le vert du gris. */
.saisie-notes{display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0}
.ligne-saisie{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;
  justify-content:space-between;padding:.45rem .7rem;background:var(--surface);
  border:1px solid var(--trait);border-radius:var(--r)}
.ligne-saisie:focus-within{border-color:var(--encre-2);
  box-shadow:0 0 0 2px rgba(31,95,168,.14)}
.ligne-eleve{display:flex;align-items:baseline;gap:.5rem;min-width:14rem;flex:1 1 16rem}
.ligne-etat{font-weight:700;width:1rem;text-align:center;color:var(--ardoise)}
.ligne-rang{font-size:.75rem;color:var(--ardoise-clair);min-width:1.4rem;
  text-align:right;font-family:var(--police-donnees)}
.ligne-nom{font-weight:550}
.ligne-matricule{font-size:.75rem;color:var(--ardoise);
  font-family:var(--police-donnees)}
.ligne-note{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ligne-bareme{color:var(--ardoise);font-size:.85rem}
input.saisie-note{width:5rem;min-height:2.4rem;text-align:right;font-size:1.05rem;
  font-family:var(--police-donnees);padding:.3rem .5rem}
input.saisie-note:disabled{background:var(--surface-2);color:var(--ardoise-clair)}

/* Les pastilles de motif. Cible d'au moins 40 px de haut : un pouce ne vise
   pas mieux, et une absence marquée par erreur vaut un zéro à un élève. */
.chips{display:inline-flex;gap:.25rem;flex-wrap:wrap}
.chip{border:1px solid var(--trait);background:var(--surface);color:var(--encre-2);
  border-radius:999px;padding:.35rem .65rem;font-size:.78rem;font-weight:550;
  cursor:pointer;min-height:2.2rem}
.chip:hover:not(:disabled){border-color:var(--encre-2)}
.chip[aria-pressed="true"]{background:var(--encre);color:var(--papier);
  border-color:var(--encre)}
.chip:disabled{opacity:.5;cursor:default}

/* Le compte de ce qui manque, en permanence sous les yeux : c'est lui qui
   empêche un registre à trous d'être arrêté sans qu'on s'en aperçoive. */
.compteur-saisie{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem .8rem;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--trait);font-size:.92rem}
.compteur-saisie[data-complet="non"]{border-left:4px solid var(--alerte)}
.compteur-saisie[data-complet="oui"]{border-left:4px solid var(--succes)}
.compteur-saisie .bouton{margin-left:auto}
.liste-manquants{margin:.4rem 0 .6rem 1.1rem}
.liste-manquants li{margin:.15rem 0}
.barre-saisie{position:sticky;bottom:0;background:var(--papier);
  padding:.6rem 0;border-top:1px solid var(--trait);z-index:5}

@media (max-width:640px){
  .ligne-saisie{flex-direction:column;align-items:stretch;gap:.4rem}
  /* En colonne, « flex-basis » porte sur la HAUTEUR : sans cette remise à
     zéro, chaque ligne d'élève mesurerait seize rem de haut et l'écran
     n'afficherait plus qu'un élève à la fois. */
  .ligne-eleve{flex:0 0 auto;min-width:0}
  .ligne-note{justify-content:space-between}
  input.saisie-note{flex:1 1 auto;width:auto;font-size:1.15rem;min-height:2.8rem}
  .chip{min-height:2.6rem;padding:.45rem .7rem}
}

/* Cas non traités d'une réinscription : regroupés par classe, détail à la
   demande. Soixante noms d'affilée ne se lisent pas ; « 6ème A — 28 élèves »
   se lit, et s'ouvre quand on en a besoin. */
.groupe-cas{margin:.35rem 0}
.groupe-cas>summary{cursor:pointer;font-weight:550;padding:.2rem 0}
.groupe-cas ul{margin:.3rem 0 .6rem 1.2rem}

/* --- Placement du personnel ------------------------------------------------
   Le tableau de placement s'affiche par classe : un intertitre, un tableau,
   et l'on n'ouvre jamais une classe à cheval sur deux pages. */
.bloc-classe{margin-bottom:.9rem;break-inside:avoid;page-break-inside:avoid}
.titre-bloc{margin:.7rem 0 .3rem;font-size:.95rem;font-weight:700}
.feuille .titre-bloc{font-size:10pt;color:#000}
.manquant{font-weight:700;letter-spacing:.03em}
.feuille .manquant{color:#000;text-decoration:underline}

/* --- Fiches de remise des accès -------------------------------------------
   Une fiche par enseignant, à découper aux ciseaux. Deux par ligne à l'écran
   comme à l'impression, avec un liseré pointillé qui dit où couper. */
.fiches-remise{display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:.8rem}
.fiche-remise{border:1px dashed #6b7a8f;border-radius:6px;padding:.8rem 1rem;
  background:#fff;break-inside:avoid;page-break-inside:avoid}
.fiche-remise-titre{font-size:.75rem;text-transform:uppercase;
  letter-spacing:.06em;color:#5a6a7d}
.fiche-remise-nom{font-weight:700;font-size:1.02rem;margin:.15rem 0 .5rem}
.fiche-remise dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;
  margin:0}
.fiche-remise dt{color:#5a6a7d;font-size:.82rem}
.fiche-remise dd{margin:0;font-size:.9rem}
.fiche-remise code{font-family:ui-monospace,Menlo,Consolas,monospace}
.fiche-remise-secret{font-size:1.05rem;font-weight:700;letter-spacing:.04em}
.fiche-remise-note{font-size:.76rem;color:#5a6a7d;margin:.6rem 0 0;line-height:1.35}
@media print{.fiches-remise{grid-template-columns:1fr 1fr}
  .fiche-remise{border-color:#000}
  .fiche-remise-titre,.fiche-remise dt,.fiche-remise-note{color:#000}}

/* --- Rappel des périodes précédentes sur le bulletin ------------------------
   Une colonne étroite par trimestre déjà arrêté, en regard de chaque
   discipline. Elle est grisée pour qu'on ne la confonde pas d'un coup d'œil
   avec la moyenne de la période en cours. */
.bulletin-matieres th.colonne-rappel{font-size:8.5pt;white-space:nowrap}
.bulletin-matieres td.colonne-rappel{color:#4a5768;font-size:9pt}
.feuille .bulletin-matieres td.colonne-rappel{color:#333}
.variation-moyenne{margin:.35rem 0 .6rem;font-style:italic}

/* --- Registre des résultats scolaires --------------------------------------
   Deux colonnes à l'écran comme à l'impression : le tableau d'honneur d'un
   côté, les absentéistes de l'autre. Sur un téléphone, elles se replient. */
.colonnes-deux{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:.6rem 0}
.liste-citation{margin:.3rem 0 0;padding-left:1.4rem;line-height:1.55;
  font-size:.9rem}
.liste-citation li{margin-bottom:.15rem}
@media print{.colonnes-deux{grid-template-columns:1fr 1fr}
  .liste-citation{font-size:9.5pt}}

/* --- Case à cocher dans une barre de filtres ------------------------------- */
.champ.case-a-cocher{flex-direction:row;align-items:center;gap:.45rem;
  align-self:flex-end;padding-bottom:.4rem;font-size:.88rem}
.champ.case-a-cocher input{width:auto;margin:0}

/* --- Bulletin : photo, colonnes d'épreuves, code d'authenticité ------------ */

/* La photo se pose à droite du cartouche. Sans photo, le cartouche reprend
   toute la largeur : pas de trou réservé à une image absente. */
.cartouche-avec-photo{display:grid;grid-template-columns:1fr auto;gap:.6rem;
  align-items:start}
.photo-eleve{width:26mm;border:1px solid #666;border-radius:3px;overflow:hidden;
  background:#fff}
.photo-eleve img{display:block;width:100%;height:33mm;object-fit:cover}
@media (max-width:640px){
  .cartouche-avec-photo{grid-template-columns:1fr}
  .photo-eleve{width:22mm;justify-self:start}
}

/* Une colonne par épreuve : étroites, alignées à droite, sans césure. Ce qui
   n'a pas compté (AbsJ, Disp.) se distingue sans couleur — en italique. */
.bulletin-matieres th.colonne-epreuve{font-size:8.5pt;white-space:nowrap;
  text-align:right}
.bulletin-matieres td.cellule-epreuve{white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bulletin-matieres td.note-ecartee{font-style:italic;color:#4a5768}
.feuille .bulletin-matieres td.note-ecartee{color:#333}

/* Le code de vérification : en gros, en chiffres tabulaires, groupé par
   quatre. Il doit se recopier au guichet sans faute et survivre à une
   photocopie — d'où le cadre plein et non un fond gris. */
.bulletin-authenticite{border:1px solid #666;border-radius:var(--r);
  padding:.55rem .8rem;margin-top:.8rem;break-inside:avoid;
  page-break-inside:avoid}
.bulletin-authenticite.provisoire{border-style:dashed}
.authenticite-titre{font-size:8.5pt;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700}
.authenticite-code{font-family:var(--police-donnees,ui-monospace,monospace);
  font-size:12.5pt;font-weight:700;letter-spacing:.08em;margin:.25rem 0 .3rem;
  word-break:break-all;font-variant-numeric:tabular-nums}
.bulletin-authenticite p{margin:0;font-size:8.5pt;line-height:1.35;color:#333}

/* --- Vignette photo dans la liste des élèves ------------------------------- */
.vignette-eleve{display:inline-block;width:34px;height:44px;border-radius:3px;
  overflow:hidden;background:var(--fond-doux,#eef1f5);border:1px solid var(--trait);
  vertical-align:middle}
.vignette-image{display:block;width:100%;height:100%;object-fit:cover}
.vignette-vide{display:flex;width:100%;height:100%;align-items:center;
  justify-content:center;font-size:.72rem;font-weight:700;color:#6b7a8f;
  letter-spacing:.02em}
.vignette-cliquable{cursor:pointer}
.vignette-cliquable:hover{border-color:var(--trait-fort,#5a6a7d)}

/* --- Feuille en composition serrée -----------------------------------------
   Pour les tableaux à dix colonnes et plus — le répertoire téléphonique du
   personnel. Sans elle, les dernières colonnes, qui sont justement les
   contacts, sortent de la page A4 à l'impression.

   La répartition à largeur fixe s'applique À L'ÉCRAN AUSSI, et non dans le
   seul bloc « @media print ». Une mise en page qu'on ne voit qu'en imprimant
   est une mise en page que personne ne relit : le répertoire téléphonique
   débordait de trente millimètres à droite, et cela ne se voyait sur aucun
   écran. Ce que la direction consulte est maintenant ce qui sortira. */
.feuille-dense table{font-size:8pt;table-layout:fixed;width:100%}
/* L'en-tête d'une feuille dense descend d'un demi-point : « naissance » et
   « affectation » ne tiennent pas sur une colonne de quinze millimètres à
   neuf points, et se coupaient en plein milieu d'un mot. */
.feuille-dense th{font-size:7.6pt}
.feuille-dense th,.feuille-dense td{padding:.16rem .22rem;
  overflow-wrap:anywhere}
.feuille-dense .table-zone{overflow-x:auto;max-width:100%}
@media print{
  .feuille-dense table{font-size:7.4pt}
  .feuille-dense .table-zone{overflow:visible}
}


/* ================= LE BULLETIN TIENT SUR UNE SEULE A4 =====================
   Ce n'est pas une préférence de mise en page. Un bulletin sur deux feuilles
   se sépare, et c'est la seconde — celle qui porte les signatures et le code
   de vérification — qui se perd. Une école de six cents élèves y consomme en
   outre douze rames par trimestre au lieu de six.

   La contrainte est dure : 182 × 269 mm, avec quatorze disciplines, trois
   épreuves chacune, la photo, le nom de chaque professeur, le rappel du
   trimestre passé et le code d'authentification.

   Ces règles valent À L'ÉCRAN AUSSI, et c'est délibéré : la feuille affichée
   est un aperçu au format A4, et c'est elle que le logiciel mesure avant
   d'ouvrir la boîte d'impression. Deux compositions différentes — une pour
   voir, une pour imprimer — rendraient la mesure fausse et la surprise
   certaine.

   Rien n'est supprimé : tout est resserré. Une seule chose disparaît à
   l'impression, la barre de répartition des moyennes de la classe — les
   effectifs qu'elle illustre sont écrits en chiffres juste à côté. */
.bulletin-feuille{font-size:9pt;line-height:1.25}

.bulletin-feuille .entete-ministere,.bulletin-feuille .entete-tutelle,
.bulletin-feuille .entete-pays,.bulletin-feuille .entete-devise-nationale{
  font-size:8.5pt;line-height:1.15}
.bulletin-feuille .entete-nom{font-size:11pt!important}
.bulletin-feuille .entete-devise-ecole{font-size:8pt}
.bulletin-feuille .entete-contacts{font-size:7.5pt;line-height:1.15}
.bulletin-feuille .entete-references{font-size:7.5pt}
.bulletin-feuille .feuille-entete-bloc{padding-bottom:.25rem;margin-bottom:.3rem}
.bulletin-feuille .feuille-titre-bloc{margin:.35rem 0 .3rem}
.bulletin-feuille .feuille-titre{font-size:13pt;margin:.2rem 0}
.bulletin-feuille .feuille-sous-titre{font-size:8.5pt}

.bulletin-feuille .cartouche{gap:.1rem .4rem;font-size:8.5pt}
.bulletin-feuille .cartouche-case{padding:.1rem .35rem}
.bulletin-feuille .photo-eleve{width:22mm}
.bulletin-feuille .photo-eleve img{height:28mm}

.bulletin-feuille .resultat-vedette{gap:.35rem;margin:.35rem 0 .3rem}
.bulletin-feuille .resultat-case{padding:.25rem .3rem}
.bulletin-feuille .resultat-valeur{font-size:14pt}
.bulletin-feuille .resultat-libelle{font-size:6.8pt;line-height:1.1}
.bulletin-feuille .variation-moyenne{margin:.15rem 0 .3rem;font-size:8pt}

/* Le tableau des disciplines : quatorze lignes doivent tenir. */
.bulletin-feuille .bulletin-matieres{font-size:8pt}
.bulletin-feuille .bulletin-matieres th,
.bulletin-feuille .bulletin-matieres td{padding:.1rem .25rem;line-height:1.15}
.bulletin-feuille .bulletin-matieres th{font-size:7.5pt}
.bulletin-feuille .matiere-nom,
.bulletin-feuille .enseignant-matiere,
.bulletin-feuille .appreciation{overflow-wrap:anywhere}
.bulletin-feuille .enseignant-matiere{font-size:7.2pt}
.bulletin-feuille .legende-notes{font-size:7pt;margin-top:.15rem}

/* Les trois encadrés courts sur une seule rangée : le travail de la classe,
   la conduite, le rappel du trimestre précédent. Empilés, ils coûtaient à eux
   seuls la moitié d'une page. */
.bulletin-feuille .bulletin-bas{grid-template-columns:1fr 1fr 1fr;gap:.4rem;
  margin-top:.4rem}
.bulletin-feuille .bulletin-encadre{padding:.3rem .45rem;font-size:7.6pt}
.bulletin-feuille .bulletin-encadre-titre{font-size:7.2pt;margin-bottom:.15rem}
.bulletin-feuille .bulletin-encadre .cartouche-case{padding:.02rem 0}
.bulletin-feuille .table-progression{font-size:7.2pt}
.bulletin-feuille .table-progression th,
.bulletin-feuille .table-progression td{padding:.08rem .18rem}

.bulletin-feuille .bulletin-appreciations{margin-top:.4rem}
.bulletin-feuille .appreciation-case{min-height:11mm}

.bulletin-feuille .bulletin-authenticite{margin-top:.35rem;padding:.3rem .5rem}
.bulletin-feuille .authenticite-titre{font-size:7pt}
.bulletin-feuille .authenticite-code{font-size:10.5pt;margin:.1rem 0 .15rem}
.bulletin-feuille .bulletin-authenticite p{font-size:7pt;line-height:1.2}

.bulletin-feuille .signatures{margin-top:.5rem;font-size:8pt}
.bulletin-feuille .signature-ligne{margin-top:8mm}

/* Le filet de sécurité. Une école dont le programme compte dix-huit
   disciplines, ou dont les intitulés sont très longs, dépasserait malgré tout :
   l'écran mesure la feuille avant d'imprimer et pose cette classe, qui
   resserre d'un cran. Mieux vaut du 7,5 points lisible qu'une seconde feuille
   qui se perd. */
.feuille-tres-serree{font-size:8pt}
.feuille-tres-serree .bulletin-matieres{font-size:7.2pt}
.feuille-tres-serree .bulletin-matieres th,
.feuille-tres-serree .bulletin-matieres td{padding:.05rem .18rem}
.feuille-tres-serree .bulletin-matieres th{font-size:6.8pt}
.feuille-tres-serree .resultat-valeur{font-size:12pt}
.feuille-tres-serree .photo-eleve{width:19mm}
.feuille-tres-serree .photo-eleve img{height:24mm}
.feuille-tres-serree .bulletin-encadre{font-size:7pt}
.feuille-tres-serree .signature-ligne{margin-top:6mm}
.feuille-tres-serree .repartition-classe{display:none}

@media print{
  /* La page porte déjà sa marge de 14 mm : la feuille ne doit pas en ajouter
     une seconde, sinon on perd 28 mm de hauteur — le quart du tableau des
     disciplines — pour du blanc. */
  .feuille{padding:0;border:none;max-width:none;margin:0}
  /* Les barres de répartition disparaissent : leur contenu est écrit en
     chiffres dans la colonne d'à côté. */
  .bulletin-feuille .repartition-classe{display:none}
}

/* La répartition des moyennes de la classe, sur une ligne au lieu de sept. */
.repartition-ligne{margin-top:.2rem;line-height:1.3}
.repartition-ligne .cartouche-libelle{display:block}

/* Les colonnes de chiffres ne se replient jamais : « 12,40 » coupé en deux
   ajoute une ligne à chaque discipline, et il y en a quatorze. */
.bulletin-feuille .bulletin-matieres .num{white-space:nowrap}
.bulletin-feuille .matiere-nom{overflow-wrap:normal;hyphens:auto}

/* Les trois encadrés du bas s'alignent en haut : étirés à la même hauteur,
   ils imposaient au bulletin la hauteur du plus long. */
.bulletin-feuille .bulletin-bas{align-items:start}

/* Dernier resserrement du bulletin : les blocs autour du tableau. Chacun ne
   perd que quelques millimètres, mais additionnés ils font la différence
   entre une feuille et deux — avec la photo, quatorze disciplines et le nom
   de chaque professeur. */
.bulletin-feuille .feuille-entete-bloc{padding-bottom:.15rem;margin-bottom:.2rem}
.bulletin-feuille .feuille-entete div{line-height:1.15}
.bulletin-feuille .entete-nom{margin-top:.1rem}
.bulletin-feuille .entete-contacts{margin-top:.05rem}
.bulletin-feuille .entete-references{margin-top:.05rem}
.bulletin-feuille .feuille-titre-bloc{margin:.2rem 0 .2rem}
.bulletin-feuille .feuille-titre{font-size:12.5pt;margin:.1rem 0}

.bulletin-feuille .resultat-vedette{gap:.3rem;margin:.3rem 0 .2rem}
.bulletin-feuille .resultat-case{padding:.18rem .25rem}
.bulletin-feuille .resultat-valeur{font-size:13pt;line-height:1.05}

.bulletin-feuille .bulletin-matieres th,
.bulletin-feuille .bulletin-matieres td{padding:.06rem .22rem;line-height:1.1}

.bulletin-feuille .bulletin-appreciations{margin-top:.3rem}
.bulletin-feuille .appreciation-case{min-height:9mm}
.bulletin-feuille .bulletin-authenticite{margin-top:.25rem;padding:.22rem .45rem}
.bulletin-feuille .authenticite-code{font-size:10pt;margin:.05rem 0 .1rem}
.bulletin-feuille .signatures{margin-top:.35rem}
.bulletin-feuille .signature-ligne{margin-top:6.5mm}

/* Le dernier demi-point. Mesuré sur un bulletin de onze disciplines avec
   photo, trois épreuves, le nom de chaque professeur et le rappel du
   trimestre : 275 mm pour 269 disponibles. Un demi-point de moins sur
   l'ensemble ramène la feuille à 260 mm et laisse une marge de sûreté aux
   écoles dont les intitulés sont plus longs. */
.bulletin-feuille{font-size:8.5pt}
.bulletin-feuille .bulletin-matieres{font-size:7.8pt}
.bulletin-feuille .cartouche{font-size:8pt;gap:.08rem .35rem}
.bulletin-feuille .cartouche-case{padding:.08rem .3rem}

/* Le cartouche d'identité : TOUJOURS trois colonnes sur le bulletin.
   La règle générale passe à trois colonnes au-delà de 700 px de large ; or la
   zone imprimable d'une A4 à 14 mm de marge fait 182 mm, soit 688 px. Le
   cartouche retombait donc à deux colonnes — cinq lignes au lieu de trois, un
   centimètre et demi perdu — précisément à l'impression, c'est-à-dire là où
   on ne le voyait pas. */
.bulletin-feuille .cartouche{grid-template-columns:repeat(3,1fr);
  margin:.3rem 0 .35rem;padding:.3rem .5rem}
.bulletin-feuille .cartouche-avec-photo{gap:.4rem;margin:.3rem 0 .35rem}
.bulletin-feuille .cartouche-avec-photo .cartouche{margin:0}
.bulletin-feuille .bulletin-matieres td{line-height:1.05}
.bulletin-feuille .appreciation-case{min-height:8mm}
.bulletin-feuille .signature-ligne{margin-top:5mm}

/* ================= AUCUN DOCUMENT NE DÉBORDE DE LA PAGE ===================
   Tout ce que Scolaris imprime est au format A4. La hauteur peut courir sur
   plusieurs pages — un registre de dix-huit classes, c'est normal — mais la
   LARGEUR, jamais : ce qui sort du bord droit est perdu, et c'est toujours la
   dernière colonne, celle des contacts ou des noms.

   Trois verrous, dans cet ordre : la feuille ne dépasse pas la page, sa zone
   de tableau ne défile pas (il n'y a pas de barre de défilement sur du
   papier), et un mot trop long se coupe plutôt que de pousser sa colonne. */
@media print{
  .feuille{max-width:100%;overflow:hidden}
  .feuille .table-zone{overflow:hidden;max-width:100%}
  .feuille table{max-width:100%}
  .feuille th,.feuille td{overflow-wrap:anywhere}
  /* Les feuilles denses — répertoire téléphonique, registre des résultats —
     comptent plus de dix colonnes : leur tableau se répartit à largeur fixe,
     faute de quoi une seule colonne large en écrase cinq. */
  .feuille-dense table{table-layout:fixed;width:100%}
}

/* --------------- L'emploi du temps dans l'espace des familles -------------
   Jour par jour, en liste. Une grille à sept colonnes tient sur la feuille
   affichée en salle des professeurs ; sur le téléphone d'un parent, elle se
   réduit à des cases de deux caractères que personne ne lit. */
.jour-emploi{margin-top:.7rem}
.jour-emploi-titre{font-weight:700;font-size:.9rem;
  border-bottom:1px solid var(--trait);padding-bottom:.15rem}
.liste-seances{list-style:none;margin:.3rem 0 0;padding:0}
.liste-seances li{display:flex;gap:.6rem;align-items:baseline;
  padding:.3rem 0;border-bottom:1px dotted var(--trait)}
.liste-seances li:last-child{border-bottom:none}
.seance-heure{font-family:var(--police-donnees);font-size:.8rem;
  flex:0 0 auto;min-width:6.4rem}
.seance-corps{display:flex;flex-direction:column;min-width:0}
.seance-matiere{font-weight:600}
.seance-detail{font-size:.8rem;color:var(--encre-2)}

/* Une date, un matricule ou un montant coupé en deux se recopie faux. */
.insecable{white-space:nowrap}

/* ========================= LA CARTE SCOLAIRE ==============================
   Une carte d'identité scolaire, et non une fiche de renseignements sur une
   feuille A4 — ce que le logiciel produisait jusqu'ici, et qu'aucune école ne
   plastifiait.

   LE PLI PLUTÔT QUE LE RECTO-VERSO. La carte s'imprime en BANDE : le recto en
   haut, le verso en bas, tête-bêche. On découpe la bande, on la plie au
   milieu, on colle les deux dos, on plastifie. Le verso est donc dessiné à
   l'envers (rotation d'un demi-tour) : une fois la moitié basse repliée
   derrière la haute, il se lit à l'endroit. Sans cette rotation, toute une
   école imprime des cartes dont le dos est la tête en bas, et s'en aperçoit
   après la plastifieuse.

   Ce choix évite le mode recto-verso de l'imprimante, dont le calage est
   incertain sur les machines d'entrée de gamme : un décalage de trois
   millimètres et les cartes sont bonnes à jeter. Il coûte du papier — quatre
   cartes par feuille au lieu de huit — et c'est le prix d'une fabrication qui
   réussit du premier coup.

   Les millimètres sont ici des millimètres RÉELS : ces mesures visent le
   papier, pas l'écran. */
.planche-cartes{display:grid;grid-template-columns:repeat(2,85mm);
  grid-auto-rows:110mm;gap:4mm;justify-content:center;
  page-break-after:always;margin:0 auto}
.planche-cartes:last-child{page-break-after:auto}

.carte-pliee{width:85mm;height:108mm;border:1px dashed #999;
  display:flex;flex-direction:column;break-inside:avoid;page-break-inside:avoid;
  background:#fff;color:#000}
/* LA CARTE DOIT TENIR EN BILINGUE AUSSI. Une école qui active la seconde
   langue voit chaque libellé doubler — « MATRICULE / REGISTRATION NUMBER » —
   et le titre du document avec. Réglée au plus juste pour le français seul, la
   carte débordait alors son cadre : la classe passait sous le pied de page.
   Tout est donc dimensionné pour le CAS LE PLUS LONG, et le français seul
   respire un peu. */
.carte-face{height:54mm;box-sizing:border-box;padding:2.2mm 2.6mm;
  display:flex;flex-direction:column;overflow:hidden;font-size:6.5pt;
  line-height:1.25}
/* La moitié basse se replie DERRIÈRE la haute : dessinée à l'endroit, elle se
   lirait la tête en bas sur la carte finie. */
.carte-face.verso{transform:rotate(180deg);border-top:1px dashed #bbb}
.carte-pli{height:0;border-top:1px dashed #999;position:relative}
.carte-pli::after{content:"pli";position:absolute;right:1mm;top:-2.6mm;
  font-size:5pt;color:#999;background:#fff;padding:0 1mm}

.carte-entete{display:flex;align-items:center;gap:1.6mm;flex:none;
  border-bottom:.4mm solid var(--marine-800);padding-bottom:.8mm}
.carte-logo{width:9mm;height:9mm;object-fit:contain;flex:none}
.carte-ecole{flex:1;min-width:0}
.carte-ecole-nom{font-weight:700;font-size:5.8pt;line-height:1.1;
  text-transform:uppercase;letter-spacing:0}
.carte-ecole-lieu{font-size:5.5pt;color:#444}
/* SCOPÉ À L'EN-TÊTE DE LA CARTE, ET NON À LA CLASSE NUE.
   `.carte-titre` est déjà le titre des cartes de l'INTERFACE — quatre-vingt-
   dix-sept écrans s'en servent. Écrite ici sans parent, cette règle venait
   plus loin dans la feuille et l'emportait partout : tous les titres de
   l'application s'affichaient en 5.8 points, alignés à droite, dans une
   colonne de 34 millimètres. Rien ne tombait en panne, et rien ne le
   signalait — sauf l'œil, sur une copie d'écran. */
.carte-entete .carte-titre{font-weight:700;font-size:5.8pt;letter-spacing:.03em;
  text-align:right;color:var(--marine-800);max-width:34mm;line-height:1.15}

.carte-corps{display:flex;gap:2.2mm;margin-top:1.2mm;flex:1;min-height:0;
  align-items:flex-start;overflow:hidden}
.carte-photo{width:18mm;height:24mm;object-fit:cover;border:.3mm solid #666;
  flex:none;background:#f2f2f2}
.carte-photo-absente{width:18mm;height:24mm;border:.3mm dashed #999;flex:none;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:4.6pt;color:#888;padding:.8mm;line-height:1.15}
.carte-champs{flex:1;min-width:0;display:flex;flex-direction:column;gap:.4mm}
.carte-champ{display:flex;gap:1.5mm;align-items:baseline}
/* En école bilingue, chaque libellé porte ses deux langues — « MATRICULE /
   REGISTRATION No. ». Sur une carte de 85 mm, la colonne doit donc pouvoir se
   replier sur deux lignes plutôt que repousser la valeur hors du cadre. */
.carte-libelle{font-size:4.8pt;color:#555;width:17mm;flex:none;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.15;
  overflow-wrap:anywhere}
.carte-valeur{font-weight:650;font-size:6.5pt;min-width:0;line-height:1.2;
  overflow-wrap:anywhere}
.carte-valeur.vedette{font-size:7.6pt;text-transform:uppercase;line-height:1.1}
.carte-pied{display:flex;justify-content:space-between;align-items:flex-end;
  gap:2mm;border-top:.3mm solid #999;padding-top:.8mm;margin-top:.8mm;
  font-size:5pt;color:#444;flex:none}
.carte-code{font-family:var(--police-donnees);font-size:6pt;letter-spacing:.06em;
  font-weight:650;color:#000}
.carte-mentions{font-size:5pt;line-height:1.25;color:#333}
.carte-signature{text-align:center;min-width:26mm}
.carte-signature-trait{border-bottom:.3mm solid #666;height:5mm}
.carte-urgence{border:.3mm solid #000;padding:1mm 1.5mm;margin-top:1mm}
.carte-urgence-titre{font-size:5pt;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase}
.carte-sante{font-size:6pt;font-weight:650}

@media print{
  .planche-cartes{gap:4mm}
  .carte-pliee{border-color:#666}
}

/* ====================== LE DIPLÔME DU TABLEAU D'HONNEUR ===================
   Ce que l'école remet à l'enfant et que la famille encadre. Le logiciel en
   produisait une liste de noms dans un tableau : exact, et sans valeur pour
   celui qui le reçoit. Un tableau d'honneur qui ne se distingue pas d'un
   relevé de notes ne récompense personne.

   Le dessin reprend la facture des diplômes d'écoles de la région : bordure à
   dents, filet intérieur, titre en capitales espacées, corps de texte aéré,
   valeurs portées en évidence dans le fil de la phrase. Le cachet et la
   signature vont en bas à droite, où la main les cherche.

   Tout est dessiné en CSS — aucune image à charger, aucun fichier à joindre :
   la feuille sort identique sur un poste hors ligne, ce qui est la condition
   de tout ce logiciel. */
.diplome{position:relative;padding:9mm;background:#fff;color:#000;
  page-break-after:always;break-inside:avoid}
.diplome:last-child{page-break-after:auto}
/* La bordure à dents : deux dégradés en chevron, répétés. Elle imite le galon
   imprimé des diplômes sans peser un octet de plus. */
.diplome-cadre{border:1.2mm solid var(--marine-800);padding:2mm;
  background:
    repeating-linear-gradient(135deg,var(--marine-800) 0 3mm,
                              transparent 3mm 6mm) padding-box;
  background-color:#fff}
.diplome-interieur{border:.4mm solid var(--marine-800);background:#fff;
  padding:8mm 10mm;text-align:center;position:relative;overflow:hidden}
.diplome-entete{display:flex;justify-content:space-between;gap:6mm;
  font-size:8.5pt;line-height:1.35;text-align:left;margin-bottom:4mm}
.diplome-entete>div{max-width:48%}
.diplome-entete .droite{text-align:right}
.diplome-tutelle{font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:8pt}
/* L'emblème de l'école, au-dessus du titre. C'est ce qui identifie la feuille
   de loin, avant toute lecture — la première raison d'être d'un logo sur un
   document officiel. Le filigrane du fond, lui, authentifie de près. */
.diplome-logo{display:block;margin:1mm auto 2mm;height:20mm;width:auto;
  max-width:46mm;object-fit:contain}
.diplome-titre{font-family:Georgia,"Times New Roman",serif;font-style:italic;
  font-weight:700;font-size:30pt;letter-spacing:.04em;color:#B01B2E;
  margin:2mm 0 1mm;line-height:1.1}
.diplome-filet{width:38%;margin:0 auto 5mm;border-bottom:.5mm solid #B01B2E}
.diplome-corps{font-size:12.5pt;line-height:2.15;text-align:center;
  max-width:none}
.diplome-corps p{margin:0 0 .6rem}
/* La traduction est COLLÉE à la phrase qu'elle traduit : un interligne normal
   entre les deux les ferait lire comme deux phrases distinctes, et rallongerait
   le diplôme d'un tiers. */
.diplome-corps p.seconde-langue{margin:-.35rem 0 .9rem;line-height:1.45}
.diplome-corps strong{font-weight:700}
.diplome-nom{font-size:17pt;font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;display:block;margin:3mm 0}
.diplome-valeur{font-weight:700;border-bottom:.3mm dotted #666;
  padding:0 2mm;white-space:nowrap}
.diplome-mention{display:inline-block;margin-top:3mm;font-size:12pt;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#B01B2E}
.diplome-pied{display:flex;justify-content:space-between;align-items:flex-end;
  margin-top:8mm;font-size:9pt;text-align:left;gap:8mm}
.diplome-lieu{font-style:italic}
.diplome-signature{text-align:center;min-width:52mm}
.diplome-signature-trait{border-bottom:.3mm solid #666;height:14mm;
  margin-bottom:1mm}
/* Le sceau de l'école en fond, très pâle : il authentifie sans gêner la
   lecture. À 8 % d'opacité il survit à une photocopie sans la noircir. */
.diplome-sceau{position:absolute;top:52%;left:50%;width:70mm;height:70mm;
  transform:translate(-50%,-50%);opacity:.07;object-fit:contain;
  pointer-events:none}
.diplome-devise{margin-top:4mm;font-size:8pt;font-style:italic;color:#444}

@media print{
  .diplome-cadre{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .diplome-titre,.diplome-mention{-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .diplome-sceau{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Une section repliée dans un formulaire. Le titre doit se voir comme un
   bouton — sinon personne ne l'ouvre, et les champs qu'elle contient
   n'existent pas. */
.replie{border:1px solid var(--trait);border-radius:var(--r);
  margin:.5rem 0 .8rem;background:var(--surface-2)}
.replie > summary{cursor:pointer;padding:.45rem .7rem;font-weight:600;
  font-size:.92rem;color:var(--encre-2);user-select:none}
.replie > summary:hover{color:var(--encre)}
.replie[open] > summary{border-bottom:1px solid var(--trait)}
.replie > *:not(summary){padding:.2rem .7rem .5rem}
@media print{
  /* Une section repliée s'imprime OUVERTE : sur le papier, rien ne se
     déplie, et un champ caché est un champ perdu. */
  .replie > *:not(summary){display:block!important}
  .replie > summary{list-style:none}
}

/* ==================== LA FICHE DE RENSEIGNEMENTS =========================
   La feuille qu'on remet à la famille et qu'elle remplit à la main.

   Tout ici sert une seule fin : qu'une fiche revienne LISIBLE. Une fiche
   illisible se retape au jugé, et une date de naissance devinée ressort trois
   ans plus tard, le jour de l'inscription au concours d'entrée en sixième.

   · LIGNE POINTILLÉE, PAS CASE RECTANGULAIRE. Une case invite à écrire petit
     et au milieu ; une ligne invite à écrire dessus, en pleine hauteur.
   · 7 MM DE HAUTEUR AU MOINS. C'est la hauteur d'une majuscule tracée au
     stylo à bille par quelqu'un qui écrit vite, debout, sur un coin de table.
     En dessous, on écrit entre les lignes ou on renonce.
   · LE CADRE PHOTO AU FORMAT D'USAGE : 35 × 45 mm, celui des photos
     d'identité que tous les studios de quartier produisent. Un cadre à la
     mauvaise taille reçoit une photo découpée aux ciseaux. */
.feuille-fiche .fiche-tete{display:flex;gap:1rem;align-items:flex-start;
  justify-content:space-between;margin-bottom:.6rem}
.feuille-fiche .fiche-tete .consigne{flex:1;margin:0}

.cadre-photo{width:35mm;min-height:45mm;flex:0 0 35mm;
  border:.4mm dashed #777;border-radius:1mm;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  font-size:8pt;color:#555;line-height:1.3;padding:2mm}
.cadre-photo-image{width:100%;height:auto;border-radius:.5mm}

/* Deux colonnes : c'est ce qui fait tenir quarante champs sur deux feuilles
   plutôt que sur quatre. Un champ long — une adresse — prend les deux. */
.fiche-grille{display:grid;grid-template-columns:1fr 1fr;
  gap:.35rem 1.2rem;margin:.3rem 0 .7rem}
.fiche-champ{display:flex;align-items:baseline;gap:.4rem;min-height:7mm}
.fiche-champ-large{grid-column:1 / -1}
.fiche-libelle{font-size:9pt;white-space:nowrap;color:#000}
.fiche-requis{color:#000;font-weight:700}
.fiche-indice{font-size:7.5pt;color:#555;font-style:italic}
.ligne-a-remplir{flex:1;min-height:7mm;
  border-bottom:.3mm dotted #444;align-self:stretch}
.ligne-remplie{flex:1;min-height:7mm;border-bottom:.3mm dotted #444;
  font-weight:700;font-size:9.5pt;align-self:stretch}

.fiche-cases{display:flex;gap:1rem;flex-wrap:wrap;font-size:9pt}
.fiche-case-choix{display:inline-flex;align-items:center;gap:.3rem}
/* Une case à cocher qui survit à la photocopie : un carré plein tracé au
   trait, et non une bordure fine que le noir et blanc efface. */
.case-a-cocher{display:inline-block;width:4.5mm;height:4.5mm;
  border:.35mm solid #000;text-align:center;line-height:4.2mm;
  font-size:8pt;font-weight:700}

.fiche-section{break-inside:avoid;page-break-inside:avoid}
.fiche-texte-engagement{font-size:8.5pt;line-height:1.45;margin:.3rem 0 .8rem;
  text-align:justify}
.fiche-signature{display:grid;grid-template-columns:1fr 1fr 1.4fr;
  gap:.4rem 1.2rem;margin-top:.5rem}
.fiche-signature > div{display:flex;align-items:baseline;gap:.4rem;
  min-height:12mm}

/* Le cadre que la famille ne remplit pas — et qui le dit. Sans lui, un parent
   attribue un matricule qui existe déjà, et la correction coûte plus cher que
   la saisie. */
.cadre-administration{border:.4mm solid #000;padding:.5rem .7rem;
  margin-top:1rem;background:#fafafa}
.cadre-administration-titre{font-size:9pt;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.2rem}

@media print{
  /* Le panneau des fiches s'ouvre AU MILIEU de l'écran des élèves. Sans
     cette règle, l'impression sortirait le titre de l'écran, les filtres et
     les cent lignes de la liste avant d'arriver à la première fiche — et la
     secrétaire jetterait les trois premières feuilles à chaque fois. */
  .impression-fiche > *:not(.panneau-fiche){display:none!important}
  .cadre-administration{background:transparent}
  .feuille-fiche .fiche-champ{min-height:7.5mm}
  .feuille-fiche .ligne-a-remplir,.feuille-fiche .ligne-remplie{min-height:7.5mm}
}