/* ------------------------------------------------------------------
   MABASE ÉCOLE DE CONDUITE — ce qui s'ajoute au style commun.

   Presque rien ici ne redéfinit une couleur : tout passe par les
   variables de mabase.css, déjà déclinées en clair et en sombre. Une
   couleur écrite en dur serait juste dans un thème et fausse dans
   l'autre — et le défaut ne se verrait que chez celui qui a l'autre.
   C'est arrivé le 13 septembre 2026 : le devis s'affichait blanc sur
   blanc sur un iPhone en mode sombre.

   LA SEULE EXCEPTION EST ÉCRITE EN TOUTES LETTRES PLUS BAS :
   .contrat-dans-la-page. Un document contractuel est un papier, et un
   papier est blanc dans les deux thèmes. Cette boîte redéfinit donc
   les variables du thème POUR SON CONTENU — c'est l'inverse d'une
   couleur en dur posée au hasard : tout ce qu'elle contient reste
   cohérent, parce que les teintes y sont redéclarées ensemble.
   ------------------------------------------------------------------ */

/* --- Le « ? » et son panneau --------------------------------------- */

.aide-zone{position:fixed;right:18px;bottom:18px;z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px}

.aide-bouton{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre);font-size:20px;font-weight:700;
  cursor:pointer;box-shadow:0 2px 10px rgba(16,24,32,.14);line-height:1;
}
.aide-bouton:hover{border-color:var(--accent);color:var(--accent)}
.aide-bouton:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.aide-panneau{
  order:-1;                       /* le panneau au-dessus du bouton */
  width:min(440px, calc(100vw - 36px));
  max-height:min(72vh, 620px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--trait);border-radius:10px;
  box-shadow:0 8px 34px rgba(16,24,32,.2);
  padding:16px 18px;font-size:14.5px;line-height:1.55;text-align:left;
}
.aide-panneau h2{margin:0 0 6px;font-size:17px}
.aide-panneau h3{margin:16px 0 6px;font-size:13px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--gris);font-weight:700}
.aide-panneau .aide-quoi{margin:0;color:var(--gris)}
.aide-panneau ul,.aide-panneau ol{margin:0;padding-left:20px}
.aide-panneau li{margin:0 0 7px}
.aide-panneau .aide-refus li::marker{color:var(--alerte)}

/* --- Le compte d'un élève : deux colonnes, comme un grand livre ---- */

.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
@media (max-width:780px){.deux-colonnes{grid-template-columns:1fr}}

.montant{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.montant.negatif{color:var(--alerte)}
tr.annulee td{opacity:.55;text-decoration:line-through}
tr.annulation td{font-style:italic}

/* Les totaux d'un compte : trois chiffres qu'on lit d'un coup d'œil. */
.bandeau-solde{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.bandeau-solde .chiffre{flex:1 1 150px;border:1px solid var(--trait);
  background:var(--surface);padding:10px 12px;border-radius:8px}
.bandeau-solde .chiffre b{display:block;font-size:22px;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em}
.bandeau-solde .chiffre span{color:var(--gris);font-size:13px}
.bandeau-solde .chiffre.du b{color:var(--encre)}
.bandeau-solde .chiffre.solde.doit b{color:var(--alerte)}

/* --- Ce qui manque -------------------------------------------------
   Ce bloc doit être vu avant le reste : c'est la seule chose de la
   page qui demande une action. Mais il ne crie pas — un écran qui
   crie tout le temps n'est plus écouté. Un filet à gauche suffit.
   ------------------------------------------------------------------ */

.manques{border:1px solid var(--trait);background:var(--surface);
  border-radius:8px;padding:12px 14px;margin:0 0 18px}
.manques h2{margin:0 0 8px;font-size:15px}
.manques ul{margin:0;padding:0;list-style:none}
.manques li{padding:7px 0;border-top:1px solid var(--trait)}
.manques li:first-child{border-top:0}
.manques li b{display:block}
.manques li span{color:var(--gris);font-size:13.5px}
.manques li.u3 b{color:var(--alerte)}
.manques.rien{color:var(--gris);font-size:14px}

/* --- L'état de la caisse -------------------------------------------- */

.caisse-etat{border:1px solid var(--trait);border-radius:8px;
  background:var(--surface);padding:14px 16px;margin:0 0 18px}
.caisse-etat.pas-bon{border-color:var(--alerte);background:var(--alerte-fond)}
.caisse-etat .verdict{font-weight:700;font-size:16px;margin:0 0 4px}
.caisse-etat .detail{color:var(--gris);font-size:14px;margin:0}

/* --- Les listes denses ---------------------------------------------- */

table.dense{min-width:0}
table.dense td,table.dense th{padding:7px 9px}

/* --- La colonne des noms, dans un tableau qui s'édite sur place -----
   Le tableau des tarifs a neuf colonnes et se défile de côté. Le
   navigateur, pour caser les neuf, serrait la première jusqu'à ce que
   « Évaluation préalable » se lise « Évaluati » — c'est-à-dire jusqu'à
   ce qu'on ne sache plus quelle ligne on modifie. Le nom est la seule
   colonne qu'on lit pour se repérer : elle ne se serre pas.
   ------------------------------------------------------------------ */
/* --- Le champ d'une image (le logo) ---------------------------------
   L'aperçu est encadré et sur damier clair : un logo à fond
   transparent posé sur du blanc ne se distingue pas du vide, et on ne
   sait plus s'il est chargé. */
.champ-image{margin:0 0 14px}
.champ-image .apercu{display:block;max-height:70px;max-width:260px;object-fit:contain;
  border:1px solid var(--trait);padding:8px;margin:0 0 8px;background:var(--surface);
  background-image:linear-gradient(45deg,#0000000a 25%,transparent 25%,transparent 75%,#0000000a 75%),
    linear-gradient(45deg,#0000000a 25%,transparent 25%,transparent 75%,#0000000a 75%);
  background-size:14px 14px;background-position:0 0,7px 7px}
.champ-image .apercu.vide{display:none}
.champ-image .choisir{display:block;margin:0 0 8px;font-size:13px}

/* --- Une ligne en brouillon -----------------------------------------
   Elle se distingue sans se barrer : un brouillon n'est pas annulé, il
   est en attente de relecture — et c'est justement le moment où l'on a
   besoin de le lire. */
/* UNE LIGNE DE TABLEAU RESTE UNE LIGNE DE TABLEAU.

   mabase.css donne à .brouillon un display: flex — c'est le bandeau
   « ce document est un brouillon », qui doit aligner un texte et un
   bouton. Posée sur un <tr>, la même classe transformait la ligne en
   boîte flex : les cellules se dépliaient les unes sous les autres,
   la ligne devenait une carte encadrée, et le tableau perdait ses
   colonnes.

   LE DÉFAUT ÉTAIT SUR QUATRE ÉCRANS et personne ne l'avait nommé :
   les types de créneau désactivés, les programmes en brouillon, les
   lignes closes du PCA, et les offres sans prix. On ne le voyait que
   quand il y avait une ligne à griser — c'est-à-dire rarement, et
   jamais chez celui qui a tout rempli.

   Le sélecteur est plus précis que .brouillon, donc il gagne, et il
   ne touche à rien d'autre : le bandeau garde son flex partout où il
   n'est pas une ligne de tableau. */
tr.brouillon{display:table-row;flex-wrap:nowrap;gap:0;align-items:initial;
  background:none;border:0;padding:0;margin:0;font-size:inherit;max-width:none}
tr.brouillon td{background:var(--fond);color:var(--gris)}
tr.brouillon .nom-eleve{color:var(--gris)}

/* --- Des cases à cocher en colonnes ---------------------------------
   Les catégories de permis sont une vingtaine : en pile, elles font
   une page à elles seules et on ne voit plus le formulaire autour. */
.cases-en-grille{display:grid;gap:2px 18px;margin:6px 0 14px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.cases-en-grille .case{margin:0}

/* --- L'aperçu d'un document qu'on est en train d'écrire -------------
   Il ressemble à la feuille imprimée sans l'être : encadré, sur fond
   clair, un peu en retrait. Assez proche pour qu'on juge le rendu,
   assez distinct pour qu'on ne croie pas l'avoir déjà publié. */
.feuille-apercu{border:1px solid var(--trait);background:var(--surface);
  padding:22px 26px;margin:10px 0 18px;max-width:46em}
.feuille-apercu h2{font-size:17px;margin:20px 0 6px}
.feuille-apercu h2:first-child{margin-top:0}
.feuille-apercu h3{font-size:14.5px;margin:14px 0 4px}
.feuille-apercu table{width:100%;border-collapse:collapse;font-size:13px}
.feuille-apercu td{border:1px solid var(--trait);padding:4px 6px;vertical-align:top}

table.nommee td:first-child,table.nommee th:first-child{min-width:17em}
table.nommee td:first-child input[type=text]{min-width:15em}
.pastille{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;
  border:1px solid var(--trait);color:var(--gris);white-space:nowrap}
.pastille.actif{border-color:var(--accent);color:var(--accent)}

/* Le nom d'un élève dans une liste : ce qu'on cherche des yeux. */
.nom-eleve{font-weight:600;text-decoration:none;color:inherit}
.nom-eleve:hover{color:var(--accent)}
.sous{display:block;color:var(--gris);font-size:12.5px}

/* --- Un bouton qui a l'air d'un lien --------------------------------
   « Dupliquer » doit partir en POST — c'est une écriture, et une
   écriture ne s'attrape pas au clic d'un lien préchargé — mais il se
   range à côté de « Ouvrir », qui en est un. Le bouton porte donc
   l'apparence du lien sans en prendre le comportement : même couleur,
   même soulignement, même taille, et le clavier le trouve comme un
   bouton parce que c'en est un. */
.lien-nu{background:none;border:0;padding:0;margin:0;font:inherit;
  color:var(--accent);text-decoration:underline;cursor:pointer}
.lien-nu:hover{text-decoration:none}
.lien-nu:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- La colonne des actions d'un tableau ----------------------------
   Le « Annuler » et le « Rendre » vivent dans un <details> logé au
   bout d'une ligne. Sans ces deux règles, le mot passe par-dessus la
   bordure de la cellule dès que la colonne se serre — vu sur la
   première capture, et parfaitement lisible… juste au mauvais endroit.
   ------------------------------------------------------------------ */

td > details.menu-admin{display:inline-block;position:relative}
td > details.menu-admin > summary{white-space:nowrap;cursor:pointer;
  color:var(--gris);padding:2px 4px}
td > details.menu-admin > summary:hover{color:var(--accent)}
td > details.menu-admin > .tiroir{position:absolute;right:0;z-index:20;
  width:min(280px, 70vw);background:var(--surface);border:1px solid var(--trait);
  border-radius:8px;box-shadow:0 6px 24px rgba(16,24,32,.18);padding:10px 12px}
td > details.menu-admin > .tiroir input{width:100%}

/* Les dates de tableau : courtes, et sur une seule ligne. */
td.quand{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ==================================================================
   LE PLANNING

   Une grille, pas une liste : une auto-école se pilote en regardant
   des TROUS, et un trou ne se voit pas dans une liste. Les cases
   vides sont donc aussi soignées que les pleines — ce sont elles
   qu'on survole.
   ================================================================== */

.grille-planning {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: .86rem;
}

.grille-planning th,
.grille-planning td {
  border: 1px solid var(--trait, #e2e2e2);
  vertical-align: top;
  padding: 0;
}

.grille-planning thead th {
  padding: .4rem .3rem;
  background: var(--fond-doux, #f6f4f7);
  font-weight: 600;
  text-align: center;
  line-height: 1.25;
}

.grille-planning thead th .sous {
  display: block;
  font-weight: 400;
  font-size: .78em;
  opacity: .65;
}

.grille-planning thead th.aujourdhui {
  background: color-mix(in srgb, var(--teinte, #C77DBB) 18%, transparent);
}

.grille-planning .col-heure {
  width: 4.2rem;
  text-align: right;
  padding: .3rem .45rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: .7;
  background: var(--fond-doux, #f6f4f7);
  white-space: nowrap;
}

.grille-planning td.case { height: 2.6rem; }

/* Une case libre invite : c'est elle qui porte la fonction. */
.grille-planning td.case.vide[data-case] { cursor: pointer; }

.grille-planning td.case.vide[data-case]:hover,
.grille-planning td.case.visee {
  background: color-mix(in srgb, var(--teinte, #C77DBB) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--teinte, #C77DBB);
}

.grille-planning td.case[data-case]:focus-visible {
  outline: 2px solid var(--teinte, #C77DBB);
  outline-offset: -2px;
}

/* Le passé ne se remplit pas : le montrer cliquable serait mentir. */
.grille-planning td.case.passe { background: repeating-linear-gradient(
  45deg, transparent, transparent 4px,
  rgba(0, 0, 0, .025) 4px, rgba(0, 0, 0, .025) 8px); }

.grille-planning .creneau {
  display: block;
  padding: .22rem .35rem;
  margin: 1px;
  border-left: 3px solid var(--teinte, #C77DBB);
  background: #fff;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  line-height: 1.3;
  overflow: hidden;
}

.grille-planning .creneau:hover { background: var(--fond-doux, #f6f4f7); }
.grille-planning .creneau .quand {
  display: block;
  font-size: .78em;
  opacity: .6;
  font-variant-numeric: tabular-nums;
}
.grille-planning .creneau .eleve { display: block; font-weight: 600; }
.grille-planning .creneau .ens { display: block; font-size: .78em; opacity: .65; }
.grille-planning .creneau .vide-dedans { display: block; font-style: italic; opacity: .6; }

/* UNE LEÇON ANNULÉE NE BARRE PLUS LE PLANNING.

   Elle n'y est plus du tout par défaut — voir creneaux_de(). Ce style
   ne sert donc qu'au moment où on demande à les revoir : là, il faut
   qu'elles se distinguent des vraies d'un seul coup d'œil, sinon le
   « voir les annulés » devient un piège. */
.grille-planning .creneau.etat-annule {
  opacity: .5;
  text-decoration: line-through;
  background: repeating-linear-gradient(
    135deg, transparent 0 5px, rgba(128,128,128,.16) 5px 10px) !important;
}
.grille-planning .creneau.etat-realise { border-left-style: double; }
.grille-planning .creneau.nature-indisponibilite { background: #f0f0f0; }
.grille-planning .creneau.nature-examen { border-left-width: 5px; }

/* ------------------------------------------------------------------
   Le panneau des élèves disponibles.

   Il s'ouvre au survol et s'épingle au clic : cocher trois noms en
   gardant la souris immobile est impossible, et un panneau qui
   disparaît pendant qu'on le remplit fait renoncer.
   ------------------------------------------------------------------ */

.panneau-dispo {
  position: absolute;
  z-index: 40;
  width: 366px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid var(--trait, #d8d4da);
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .16);
  font-size: .88rem;
}

.panneau-dispo .tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .7rem;
  border-bottom: 1px solid var(--trait, #e8e4ea);
  background: var(--fond-doux, #f6f4f7);
  border-radius: 6px 6px 0 0;
}

.panneau-dispo .fermer {
  border: 0;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .2rem;
  opacity: .6;
}
.panneau-dispo .fermer:hover { opacity: 1; }

/* LE CHAMP DE RECHERCHE, ENTRE LA TÊTE ET LA LISTE.

   Il est discret exprès : le panneau sert d'abord à voir qui est
   disponible, et la recherche est le second recours. Un champ qui
   dominerait la tête ferait chercher là où il suffisait de lire. */
.panneau-dispo .chercher {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .4rem .7rem;
  border-bottom: 1px solid var(--trait, #e8e4ea);
}
.panneau-dispo .chercher input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;          /* sans ça, un champ dans un flex déborde */
  margin: 0;
  padding: .28rem .45rem;
  font-size: .88rem;
}

.panneau-dispo .corps { max-height: 46vh; overflow-y: auto; padding: .3rem 0; }
.panneau-dispo .corps p { margin: .5rem .7rem; }

.panneau-dispo .pied {
  padding: .55rem .7rem;
  border-top: 1px solid var(--trait, #e8e4ea);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.ligne-dispo,
.liste-dispo .ligne-dispo {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .35rem .7rem;
  cursor: pointer;
}

.ligne-dispo:hover { background: var(--fond-doux, #f6f4f7); }
.ligne-dispo input { margin-top: .18rem; flex: 0 0 auto; }
.ligne-dispo b { display: block; font-weight: 600; }
.ligne-dispo .sous { display: block; font-size: .82em; opacity: .68; }

/* La ligne porte DEUX gestes : cocher pour proposer à plusieurs, et
   le bouton qui pose pour celui-là. Le label ne couvre donc que la
   case et le nom — sinon le bouton cocherait la case en passant. */
.ligne-dispo > label.prend {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.ligne-dispo .poser {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: .1rem;
  padding: .18rem .5rem;
  white-space: nowrap;
}
.ligne-dispo.empeche .poser { display: none; }

.duree-lecon { display: inline-flex; align-items: center; gap: .35rem; }
.duree-lecon select { width: auto; margin: 0; }

/* La répétition d'une leçon : un encadré à part dans le formulaire,
   parce que c'est une décision à part — poser une leçon et en poser
   douze ne s'annulent pas de la même façon. */
fieldset.repetition {
  border: 1px solid var(--trait, #e2e2e2);
  border-radius: 5px;
  padding: .4rem .8rem .7rem;
  margin: .8rem 0;
}
fieldset.repetition legend { padding: 0 .3rem; font-weight: 600; }
fieldset.repetition input[type="number"],
fieldset.repetition select { width: auto; }

/* Un élève qu'on ne peut pas appeler reste VISIBLE, avec sa raison :
   un nom qu'on cherche et qu'on ne trouve pas fait douter de toute la
   liste. */
.ligne-dispo.empeche { opacity: .55; cursor: default; }
.ligne-dispo.empeche .sous { font-style: italic; }

.liste-dispo {
  border: 1px solid var(--trait, #e2e2e2);
  border-radius: 5px;
  max-height: 22rem;
  overflow-y: auto;
  margin: .6rem 0;
}

.cases-categories { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.cases-categories fieldset {
  border: 1px solid var(--trait, #e2e2e2);
  border-radius: 5px;
  padding: .3rem .5rem .45rem;
  margin: 0;
}
.cases-categories legend { padding: 0 .25rem; }
.cases-categories label.case {
  display: inline-flex;
  align-items: center;
  gap: .22rem;
  margin-right: .5rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .grille-planning { font-size: .8rem; }
  .grille-planning .col-heure { width: 3.2rem; }
  .panneau-dispo { width: calc(100vw - 24px); }
}

/* Un bouton désactivé doit le PARAÎTRE. Sans ça, il garde la couleur
   pleine d'un bouton prêt à l'emploi : on clique, rien ne se passe, et
   on croit à une panne — alors qu'il attend simplement qu'on coche un
   nom. */
.btn:disabled,
.btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.6);
}

/* ==================================================================
   L'ESPACE ÉLÈVE

   Un autre public, donc une autre densité. Le bureau lit des tableaux
   toute la journée ; l'élève ouvre son espace trois fois par mois, sur
   un téléphone, souvent debout. Plus grand, plus aéré, moins de
   colonnes — et ce qui demande une action en haut.
   ================================================================== */

body.espace { font-size: 1rem; }

/* LA CLASSE QUI N'EXISTAIT PAS.

   Les trois pages publiques — signature du devis, du contrat, de la
   convention — et l'espace élève posent tous leur contenu dans
   <main class="dedans">. Cette classe n'était définie nulle part.
   Aucune règle, donc aucune marge et aucune largeur maximale : sur un
   grand écran le texte s'étirait d'un bord à l'autre, et sur un
   téléphone il touchait les deux bords, sans un millimètre de blanc.

   Personne ne le signale jamais — on met ça sur le compte du
   téléphone. C'est en photographiant la page à 390 px, pour vérifier
   autre chose, qu'elle s'est vue.

   La largeur est plus étroite que celle du bureau : ces pages-là se
   LISENT, et une ligne de texte trop longue se relit deux fois. */
.dedans {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 480px) { .dedans { padding: 0 14px; } }

.bandeau-espace {
  background: var(--teinte, #C77DBB);
  color: #fff;
  padding: .7rem 0;
}

.bandeau-espace .dedans {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bandeau-espace .marque {
  font-weight: 700;
  font-size: 1.1rem;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}

.bandeau-espace .menu { display: flex; gap: .2rem; flex-wrap: wrap; }

.bandeau-espace .menu a {
  color: #fff;
  text-decoration: none;
  padding: .35rem .6rem;
  border-radius: 4px;
  opacity: .88;
}
.bandeau-espace .menu a:hover { background: rgba(255, 255, 255, .16); opacity: 1; }
.bandeau-espace .menu a.ici { background: rgba(255, 255, 255, .24); opacity: 1; font-weight: 600; }

.bandeau-espace .qui { display: flex; align-items: center; gap: .6rem; font-size: .88rem; }
.bandeau-espace .qui a { color: #fff; }

.pastille-compte {
  display: inline-block;
  min-width: 1.2em;
  margin-left: .3rem;
  padding: 0 .3em;
  border-radius: 999px;
  background: #fff;
  color: var(--teinte, #C77DBB);
  font-weight: 700;
  font-size: .78em;
  text-align: center;
}

.pied-espace { margin: 3rem 0 2rem; border-top: 1px solid var(--trait, #e2e2e2); padding-top: 1rem; }

.porte { max-width: 30rem; margin: 3rem auto; }

/* ------------------------------------------------------------------
   La carte d'un créneau proposé.

   C'est l'élément le plus important de l'espace : un créneau se prend
   dans l'heure ou il part à quelqu'un d'autre. Il est donc grand,
   lisible de loin, et son bouton est le seul plein de la page.
   ------------------------------------------------------------------ */

.carte-creneau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border: 2px solid var(--teinte, #C77DBB);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  margin: .8rem 0;
  background: #fff;
}

.carte-creneau .quand-gros { min-width: 11rem; }
.carte-creneau .quand-gros b { display: block; font-size: 1.15rem; }
.carte-creneau .quand-gros span {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--teinte, #C77DBB);
  font-variant-numeric: tabular-nums;
}
.carte-creneau .details { flex: 1 1 14rem; }
.carte-creneau .details p { margin: 0 0 .25rem; }
.carte-creneau .actions { display: flex; flex-direction: column; gap: .4rem; }

.piece-elve,
.message-elve {
  border: 1px solid var(--trait, #e2e2e2);
  border-radius: 6px;
  padding: .8rem 1rem;
  margin: .6rem 0;
  background: #fff;
}

.piece-elve .entete,
.message-elve .entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}

.piece-elve input[type=file] { margin: .4rem .6rem .4rem 0; max-width: 100%; }

.message-elve.neuf { border-left: 4px solid var(--teinte, #C77DBB); }

.corps-message {
  margin: .4rem 0 0;
  padding: .6rem .8rem;
  background: var(--fond-doux, #f6f4f7);
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font: inherit;
  font-size: .94em;
  line-height: 1.5;
}

.alerte-pastille {
  background: color-mix(in srgb, #c0392b 16%, transparent);
  color: #922b21;
}

.liste-nue { list-style: none; padding: 0; }
.liste-nue > li {
  padding: .45rem 0;
  border-bottom: 1px solid var(--trait, #eee);
}
.liste-nue > li:last-child { border-bottom: 0; }
.liste-nue .sous { display: block; font-size: .85em; opacity: .68; }

@media (max-width: 620px) {
  .carte-creneau { flex-direction: column; align-items: stretch; }
  .carte-creneau .actions { flex-direction: row; flex-wrap: wrap; }
  .bandeau-espace .menu a { padding: .3rem .45rem; font-size: .92rem; }
}

/* Le nom de l'élève, dans le bandeau mauve : il héritait de la couleur
   de texte du site, presque noire, et devenait illisible sur le fond.
   Une couleur qui dépend de son contexte doit être posée avec lui. */
.bandeau-espace .qui span { color: #fff; opacity: .9; }

/* ------------------------------------------------------------------
   Le contrat affiché dans une page de l'application.

   Il garde sa mise en page de document — colonnes, articles, tableaux —
   mais dans un cadre qui dit qu'on est dans l'application et pas devant
   une feuille. Ce que l'élève LIT ici est le même fichier que ce qu'il
   IMPRIMERA : deux fichiers qui se ressemblent finissent par diverger,
   et ce jour-là on fait signer un texte et on en archive un autre.
   ------------------------------------------------------------------ */

/* UN DOCUMENT EST UN PAPIER, DANS LES DEUX THÈMES.

   Le 13 septembre 2026, au téléphone : « le devis s'affiche page
   blanche ». Le fond de cette boîte était écrit en dur — du blanc —
   tandis que le texte à l'intérieur suivait le thème du visiteur. En
   mode sombre, l'encre devient claire : texte blanc sur papier blanc.
   La page n'était pas vide, elle était invisible.

   C'est la faute qu'on ne fait qu'une fois par endroit et partout :
   une couleur posée en dur à côté d'une couleur qui varie. Plutôt que
   de peindre chaque élément, on redéfinit ICI les teintes du thème :
   tout ce qui s'affiche dans cette boîte — titres, mentions en gris,
   filets des tableaux — redevient lisible sur du blanc, quel que soit
   le réglage du téléphone. Le document reste un document, et c'est
   bien ce qu'on veut : ce que l'élève lit à l'écran doit ressembler à
   ce qu'il imprimera. */
.contrat-dans-la-page {
  --encre: #1A1A1A;
  --gris: #5B5B5B;
  --trait: #D8D4DA;
  --papier: #FFFFFF;
  --surface: #F7F7F8;
  --plein: #F0F0F2;
  --fond-tete: #F4F4F6;
  border: 1px solid #D8D4DA;
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  background: #fff;
  color: #1A1A1A;
  max-height: 70vh;
  overflow-y: auto;
  font-size: .92rem;
  line-height: 1.55;
}

/* LE TAMPON D'ACQUITTEMENT, À L'ÉCRAN COMME SUR LE PAPIER.

   Il vit dans la boîte du document et hérite donc de ses couleurs
   d'encre — pas de celles de l'application : une facture affichée en
   sombre puis imprimée en clair n'est plus la même pièce. Voir la
   feuille papier.css, qui porte les mêmes règles en millimètres. */
.contrat-dans-la-page .acquittement {
  margin: .8rem 0 0 auto;
  max-width: 26rem;
  padding: .55rem .7rem;
  border: 1px solid var(--trait, #D8D4DA);
  border-radius: 4px;
  font-size: .9em;
}
.contrat-dans-la-page .acquittement p { margin: 0 0 .25rem; }
.contrat-dans-la-page .acquittement p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .contrat-dans-la-page .acquittement { max-width: 100%; }
}

/* SUR UN TÉLÉPHONE, CETTE BOÎTE EST UN PIÈGE, ET ELLE S'OUVRE ICI.

   Le 13 septembre 2026 : « je peux visualiser la version pdf mais je
   ne peux pas signer avec mon iPhone ». Le document est dans une boîte
   à défilement interne haute de 70 % de l'écran, et le formulaire
   d'acceptation est SOUS elle. Sur un ordinateur on voit les deux. Sur
   un téléphone, le doigt qui glisse fait défiler la boîte, pas la
   page — et quand la boîte arrive au bout, iOS ne rend pas toujours la
   main au parent. L'élève lit son devis en entier et n'atteint jamais
   le bouton. Il ne voit aucune erreur : il n'y en a pas. Il y a un mur.
   Pire encore : sur iPhone, « vh » compte la barre d'adresse, donc la
   boîte occupe presque tout l'écran et le mur commence tout de suite.

   Sur écran étroit, le document se déroule donc dans la page, et le
   formulaire vient après lui, comme n'importe quel texte. On perd le
   cadre ; on gagne la signature. Cela vaut aussi pour le contrat et la
   convention, qui partagent cette boîte — et qui étaient murés pareil. */
@media (max-width: 760px) {
  .contrat-dans-la-page {
    max-height: none;
    overflow-y: visible;
    padding: 1rem .9rem;
  }

  /* ET LES PRIX DOIVENT TENIR DANS L'ÉCRAN.
     En vérifiant le mur ci-dessus, le rendu à 390 px a montré pire :
     les colonnes « prix unitaire » et « total » sortaient à droite.
     Un devis dont on ne voit pas les montants n'est pas un devis, et
     personne ne l'aurait signalé — on ne réclame pas ce qu'on ne sait
     pas manquant.

     Le tableau défile donc sur lui-même, horizontalement. C'est un
     geste connu, et il ne rejoue pas le piège d'au-dessus : un
     défilement HORIZONTAL ne retient jamais un doigt qui descend. */
  .contrat-dans-la-page table {
    display: block;
    /* LA LARGEUR EST CE QUI MANQUAIT. « display:block » seul laisse la
       table garder la largeur que ses colonnes réclament : elle sortait
       du papier blanc, et la colonne des totaux se retrouvait sur le
       fond de la page — noire, en thème sombre. On voyait « la colonne
       de droite en noir », et c'était exactement ça : plus du papier.
       Bornée à 100 % du bloc qui la contient, elle défile DEDANS. */
    width: 100%;
    max-width: 100%;
    /* ET SURTOUT min-width. Le socle pose « table { min-width: 640px } »
       — utile pour les tableaux du bureau, qui défilent dans leur
       cadre. Sur un document contractuel lu à 390 px, il faisait sortir
       la table du papier : max-width ne peut rien contre lui, min-width
       l'emporte toujours. C'est cette ligne-là qui manquait, et c'est
       elle qui mettait « la colonne de droite en noir ». */
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .78rem;
    white-space: nowrap;
  }
  .contrat-dans-la-page table td,
  .contrat-dans-la-page table th { padding-left: .4rem; padding-right: .4rem; }
  /* La colonne des prestations, elle, peut revenir à la ligne : c'est
     la seule assez longue pour rendre le tableau large à elle seule. */
  .contrat-dans-la-page table td:first-child { white-space: normal; min-width: 8.5em; }
  /* L'en-tête est le plus long de la colonne (« PRIX UNITAIRE TTC »)
     et c'est lui qui poussait le total hors de l'écran. Il peut se
     casser en deux lignes : on le lit une fois, alors qu'un montant
     coupé se cherche à chaque ligne. */
  .contrat-dans-la-page table th { white-space: normal; }
}

/* Sous 430 px — un iPhone tenu droit — les trois colonnes de montants
   ne tiennent qu'en serrant les marges intérieures. Le total est la
   colonne qu'on cherche : elle doit être VUE, pas atteinte en faisant
   glisser le doigt. */
@media (max-width: 430px) {
  .contrat-dans-la-page table { font-size: .73rem; }
  .contrat-dans-la-page table td,
  .contrat-dans-la-page table th { padding-left: .22rem; padding-right: .22rem; }
  .contrat-dans-la-page table td:first-child { min-width: 6.5em; }
}

.contrat-dans-la-page h2 {
  font-size: 1.02rem;
  margin: 1.4rem 0 .4rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--trait, #e6e2e8);
}
.contrat-dans-la-page h3 { font-size: .95rem; margin: .9rem 0 .25rem; }
.contrat-dans-la-page p { margin: 0 0 .5rem; }
.contrat-dans-la-page .petit { font-size: .86em; opacity: .78; }
.contrat-dans-la-page table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.contrat-dans-la-page th,
.contrat-dans-la-page td { padding: .3rem .5rem; border-bottom: 1px solid #ededed; }
.contrat-dans-la-page .n { text-align: right; font-variant-numeric: tabular-nums; }
.contrat-dans-la-page .totaux { width: auto; margin-left: auto; }
.contrat-dans-la-page .totaux .grand td { font-weight: 700; font-size: 1.05em; }

.contrat-dans-la-page .tete,
.contrat-dans-la-page .parties { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.contrat-dans-la-page .tete { justify-content: space-between; margin-bottom: 1rem; }
.contrat-dans-la-page .piece h1 { font-size: 1.2rem; margin: 0; }
.contrat-dans-la-page .vendeur { font-size: .88em; opacity: .8; }
.contrat-dans-la-page .vendeur .raison { font-weight: 700; opacity: 1; font-size: 1.05em; }
.contrat-dans-la-page .case-partie {
  flex: 1 1 16rem;
  padding: .7rem .9rem;
  background: var(--fond-doux, #f6f4f7);
  border-radius: 4px;
}
.contrat-dans-la-page .case-partie .nom { font-weight: 700; }
.contrat-dans-la-page .etiquette {
  font-size: .76em;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .6;
  margin-bottom: .2rem;
}
.contrat-dans-la-page .sous-titre { font-style: italic; opacity: .75; font-size: .9em; }
.contrat-dans-la-page .signature { display: flex; gap: 1.4rem; margin-top: 1.6rem; }
.contrat-dans-la-page .signature .case {
  flex: 1 1 0;
  border: 1px solid var(--trait, #ddd);
  border-radius: 4px;
  padding: .7rem .9rem 2.2rem;
}
.contrat-dans-la-page .signe { margin: .3rem 0 0; }
.contrat-dans-la-page .ligne-a-remplir { font-size: .9em; opacity: .7; }

/* ==================================================================
   LES TIROIRS DANS LA PAGE

   La classe « menu-admin » a été écrite pour la BARRE SOMBRE du haut :
   son titre y est gris clair, ce qui se lit très bien sur du bleu nuit.
   Réemployée dans la page, sur fond blanc, elle donnait un titre gris
   pâle sur blanc — « Saisir une dépense », « Ajouter un tarif » et
   « Ajouter une prestation » étaient à la limite du lisible, et donc
   introuvables pour qui ne savait pas déjà qu'ils existaient.

   Un lien qu'on ne voit pas est un écran qui n'existe pas. On rend donc
   à ces titres-là une encre de texte, et l'aspect d'un bouton discret.
   ================================================================== */

main details.menu-admin > summary{
  display:inline-block;
  color:var(--encre);
  font-weight:600;
  padding:8px 14px;
  margin:6px 0;
  border:1px solid var(--trait);
  border-radius:8px;
  background:var(--surface);
  cursor:pointer;
}
main details.menu-admin > summary:hover{
  color:var(--accent);
  border-color:var(--accent);
}
main details.menu-admin[open] > summary{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  margin-bottom:0;
}
/* Le tiroir, lui, reste DANS le flux quand il est dans la page : il ne
   doit rien recouvrir. C'est en haut, sur la barre, qu'il flotte. */
main details.menu-admin > .tiroir{
  position:static;
  width:auto;
  margin:0 0 12px;
  border:1px solid var(--trait);
  border-radius:0 8px 8px 8px;
  padding:14px 16px;
  box-shadow:none;
  background:var(--surface);
}

/* ------------------------------------------------------------------
   LES CHAMPS DES PAGES PUBLIQUES, EN MODE SOMBRE.

   Même soirée, même cause : « l'endroit pour saisir nom et prénom en
   noir ». Le champ prenait la couleur du papier — presque celle de la
   page — et sa bordure, un gris de trait à peine plus clair. Sur un
   téléphone en mode sombre, il ne restait rien à voir : un rectangle
   noir sur fond noir, qu'il fallait deviner.

   Un champ de saisie doit s'annoncer. On le pose donc sur la surface,
   d'un cran plus claire que la page, avec une bordure qui se voit. La
   règle ne vaut que pour les pages publiques — signature, espace
   élève — parce que c'est là que quelqu'un arrive sans savoir où
   cliquer, depuis un appareil qu'on n'a pas choisi.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.espace input[type=text],
  :root:not([data-theme="light"]) body.espace input[type=email],
  :root:not([data-theme="light"]) body.espace input[type=password],
  :root:not([data-theme="light"]) body.espace textarea,
  :root:not([data-theme="light"]) body.espace select {
    background: var(--surface);
    border-color: #3C4E5C;
  }
  /* La case à cocher aussi : sans cette ligne, iOS la dessine dans sa
     propre teinte claire et elle disparaît sur le fond sombre. */
  :root:not([data-theme="light"]) body.espace input[type=checkbox] {
    accent-color: var(--accent);
  }
}

/* --- Le planning d'une journée, une colonne par enseignant ----------
   La semaine a sept colonnes, toujours ; la journée en a autant que
   l'école a d'enseignants. Elles se partagent la place à égalité, et
   la grille se défile de côté plutôt que de serrer les noms jusqu'à
   les rendre illisibles.
   ------------------------------------------------------------------ */
.grille-jour th:not(.col-heure) { min-width: 11em; }
.grille-jour td.case { min-width: 11em; }

/* La colonne des heures porte DEUX choses ici — l'heure et ce qui reste
   de flotte. Les 4,2 rem de la vue semaine les écrasaient l'une sur
   l'autre. */
.grille-jour .col-heure { width: 9.6rem; text-align: left; }

/* L'avertissement d'un titre expiré vit DANS un en-tête de colonne :
   il prend la couleur d'alerte, pas le cadre ni le fond d'un
   paragraphe d'alerte, qui feraient une boîte dans une case. */
.grille-planning thead th .sous.alerte {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font-size: .72em;
  color: var(--alerte);
}

/* Ce qui reste de flotte à cette heure-là. Il se lit dans la colonne
   des heures, avant de décrocher le téléphone — après, c'est trop
   tard. En rouge quand une boîte est saturée : ce n'est pas une
   alarme, c'est la réponse à « est-ce que je peux encore caser
   quelqu'un ». */
.col-heure .flotte {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--gris);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.col-heure .flotte.pleine { color: var(--alerte); }


/* --- La table des types de créneau ----------------------------------
   Le nom est ce qu'on lit pour se repérer entre vingt lignes : il ne se
   serre pas — même recette que la table des tarifs, la cellule ET le
   champ, parce que le min-width d'une cellule seule n'est qu'une
   suggestion en table-layout auto.

   Et le bouton reste sur la ligne de la case « en service » : le .btn
   général porte une marge haute de 22 px, faite pour un formulaire en
   colonne. Dans une cellule de tableau, elle repoussait le bouton sous
   la case et doublait la hauteur de chaque ligne — vingt types
   faisaient alors trois écrans.
   ------------------------------------------------------------------ */
table.types-creneau td:first-child,
table.types-creneau th:first-child { min-width: 19em; }
table.types-creneau td:first-child input[type=text] { min-width: 17em; }
table.types-creneau .colonne-actions { white-space: nowrap; }
table.types-creneau .colonne-actions .case { display: inline-flex; margin: 0 .6rem 0 0; }
table.types-creneau .colonne-actions .btn { margin-top: 0; vertical-align: middle; }
table.types-creneau input[type=color] { width: 3.2rem; height: 1.9rem; padding: 0; }
table.types-creneau tr.separateur td {
  background: var(--fond-doux, #f6f4f7);
  padding-top: .55rem;
  padding-bottom: .35rem;
}

/* --- LE FIL D'UN ÉLÈVE ---------------------------------------------

   Une colonne d'heures étroite, le fait au milieu, qui l'a fait à
   droite. Ce qui range vraiment la lecture, ce ne sont pas les
   couleurs : c'est la ligne de séparation qui annonce chaque jour.
   La barre de couleur à gauche sert seulement à retrouver du regard
   les lignes d'une même famille en parcourant — elle est discrète
   exprès, un fil bariolé ne se lit pas. */
table.fil td:first-child { width: 3.4em; white-space: nowrap; }
table.fil td:last-child  { text-align: right; white-space: nowrap; }
table.fil .sous {
  display: block;
  font-size: .85em;
  opacity: .7;
}
table.fil tr.separateur td {
  background: var(--fond-doux, #f6f4f7);
  padding-top: .55rem;
  padding-bottom: .35rem;
  text-align: left;
}
table.fil tr[class^="f-"] td:nth-child(2) {
  border-left: 3px solid transparent;
  padding-left: .5rem;
}
table.fil tr.f-dossier  td:nth-child(2) { border-left-color: #8a8f98; }
table.fil tr.f-document td:nth-child(2) { border-left-color: #2E6F9E; }
table.fil tr.f-argent   td:nth-child(2) { border-left-color: #1E8A6E; }
table.fil tr.f-conduite td:nth-child(2) { border-left-color: #B8762A; }
table.fil tr.f-envoi    td:nth-child(2) { border-left-color: #7A5AA8; }
table.fil tr.f-contact  td:nth-child(2) { border-left-color: #C0483F; }

/* Au téléphone, la colonne « par qui » passe sous le fait plutôt que
   de comprimer les deux. Un nom d'auteur à trois lettres par ligne
   n'apprend rien. */
@media (max-width: 560px) {
  table.fil td:last-child { display: none; }
}

/* « Acquittée » n'est pas une alerte : c'est une bonne nouvelle, et
   elle se lit d'un coup d'œil dans une colonne d'états. */
.sous.ok-sous { color: var(--vert, #1E8A6E); }


/* --- LA LÉGENDE DU PLANNING ----------------------------------------

   Elle ne nomme que ce qui est posé ce jour-là. Une légende qui liste
   les vingt et un types possibles est une légende qu'on ne lit pas —
   et les jours où il n'y a que de la B manuelle, celle-ci tient sur
   une ligne et se fait oublier. */
.legende-planning {
  list-style: none;
  margin: .6rem 0 .2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-size: .84rem;
}
.legende-planning li { display: flex; align-items: center; gap: .35rem; }
.pastille-couleur {
  display: inline-block;
  width: .8em;
  height: .8em;
  border-radius: 2px;
  flex: 0 0 auto;
  /* Un contour très léger : sans lui, une pastille claire disparaît
     sur fond clair, et une sombre sur fond sombre. */
  box-shadow: 0 0 0 1px rgba(128, 128, 128, .35);
}

/* La teinte du type remplit la case ; le texte garde l'encre du
   thème. C'est ce qui permet à la même règle de tenir en clair et en
   sombre — voir la tête de style_du_creneau(). */
.grille-planning .creneau { border-radius: 3px; }

/* --- L'ÉTAT PCA -----------------------------------------------------
   Neuf colonnes de chiffres : la première porte le nom, les huit
   autres sont des montants qu'on compare en les lisant à la
   verticale. Les chiffres alignés sur leurs unités est la seule chose
   qui rende cette lecture possible. */
table.pca th .sous { display: block; font-size: .75em; opacity: .6; font-weight: 400; }
table.pca td.montant, table.pca th.montant { white-space: nowrap; }
table.pca td.pca-plein { font-weight: 600; }
table.pca tfoot tr.gros th, table.pca tfoot tr.gros td {
  border-top: 2px solid var(--trait, #d8d4da);
  padding-top: .5rem;
}

/* --- LES ÉCRANS QUI ONT BESOIN DE TOUTE LA LARGEUR ------------------

   Le planning et le PCA sont des grilles, pas des textes. L'enveloppe
   serrée à 1000 px a du sens pour tout le reste — une ligne de texte
   trop longue se perd au retour à la marge — mais elle étrangle une
   grille de sept colonnes.

   ON GARDE UNE BORNE, ET DES MARGES. « Toute la largeur » ne veut pas
   dire collé aux bords : les gouttières restent, et au-delà de
   2 100 px la grille cesse de s'étirer. Passé cette largeur, chaque
   case devient si vaste que l'œil doit voyager d'un bout à l'autre
   d'une ligne pour lire deux chiffres — on aurait remplacé une gêne
   par une autre. */
main.enveloppe.pleine-largeur {
  max-width: min(2100px, calc(100vw - 32px));
}

/* Les textes de la page, eux, gardent leur largeur de lecture : c'est
   la grille qui s'élargit, pas les phrases. */
main.pleine-largeur > p.dim.large,
main.pleine-largeur > .manques {
  max-width: 78ch;
}

/* --- L'ENCART D'UNE LEÇON POSÉE --------------------------------------
   Il partage la boîte du panneau des disponibles — même taille, même
   ombre, même façon de se placer : deux encarts qui se ressemblent
   s'apprennent une fois. Ce qui change est son contenu : un formulaire
   court, pas une liste qui défile. */
.panneau-creneau .corps { padding: .7rem; max-height: none; }
.panneau-creneau .c-eleves { font-weight: 600; margin: 0 0 .6rem; }
.panneau-creneau label { display: block; margin-top: .5rem; }
.panneau-creneau input[type="text"] { width: 100%; margin: .15rem 0 .4rem; }
.panneau-creneau .case { display: flex; align-items: flex-start; gap: .35rem; }
.panneau-creneau .deux-boutons {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin: .7rem 0 0;
  flex-wrap: wrap;
}

/* La case d'une leçon se clique : on le dit avec le curseur, sinon
   rien n'annonce qu'il s'y passe quelque chose. */
.grille-planning .creneau { cursor: pointer; }

/* Le changement de durée : une ligne, un choix, un bouton — au-dessus
   de l'annulation, comme dans la conversation qu'on a au téléphone. */
.panneau-creneau .c-duree { margin: 0 0 .7rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--trait, #e8e4ea); }
.panneau-creneau .c-duree-ligne { display: flex; gap: .4rem; align-items: center; }
.panneau-creneau .c-duree-ligne select { flex: 1 1 auto; min-width: 0; margin: 0; }

/* Le pointage : une ligne par élève, le nom à gauche, ce qu'il a fait à
   droite. Le nom peut être long — il se coupe plutôt que de pousser le
   choix hors de l'encart, parce qu'un sélecteur qu'on ne voit plus est
   un pointage qu'on ne fait pas. */
.panneau-creneau .c-presence { margin: 0 0 .7rem; padding-bottom: .7rem;
  border-bottom: 1px solid var(--trait, #e8e4ea); }
.panneau-creneau .c-presence-titre { margin: 0 0 .35rem; }
.panneau-creneau .c-presence-ligne { display: flex; gap: .4rem; margin: 0 0 .3rem;
  align-items: center; }
.panneau-creneau .c-presence-nom { flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9em; }
.panneau-creneau .c-presence-ligne select { flex: 0 1 10.5rem; min-width: 0; margin: 0; }
.panneau-creneau .c-decompte { margin-top: .45rem; }

/* --- LES LIGNES DE QUART D'HEURE -------------------------------------

   Une case d'une heure est un bloc muet : on y pose une leçon « vers
   le milieu » sans savoir si le milieu est 9 h 30. Trois traits fins
   suffisent à rendre l'heure mesurable — et à faire comprendre, sans
   une phrase, qu'une leçon peut commencer à la demie.

   TRÈS DISCRETS, EXPRÈS. Ce sont des repères, pas un quadrillage : ils
   doivent se voir quand on les cherche et disparaître quand on lit un
   nom. Le dernier quart ne porte pas de trait — il est déjà borné par
   le bord de la case, et deux traits collés font un trait épais.

   ILS NE S'AFFICHENT QUE SUR LES CASES VIDES : sur une case pleine,
   la teinte du type prend toute la place, et des traits par-dessus
   feraient une texture au lieu d'une couleur. */
.grille-planning .case.vide {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(100% / var(--quarts, 4) - 1px),
    var(--trait, #d8d4da) calc(100% / var(--quarts, 4) - 1px),
    var(--trait, #d8d4da) calc(100% / var(--quarts, 4))
  );
  background-size: 100% calc(100% - 1px);   /* pas de trait sur le bord bas */
  background-repeat: no-repeat;
  opacity: 1;
}
/* Sur un thème sombre, le même trait doit rester un murmure. */
:root[data-theme="dark"] .grille-planning .case.vide,
:root:not([data-theme="light"]) .grille-planning .case.vide {
  --trait: rgba(160, 160, 170, .22);
}

/* Le choix du quart, dans le panneau : quatre boutons plutôt qu'une
   liste déroulante — on les vise du doigt, et on voit les quatre
   d'un coup. */
.panneau-dispo .quarts {
  display: flex;
  gap: .25rem;
  padding: .4rem .7rem 0;
  align-items: center;
}
.panneau-dispo .quarts .dim { margin-right: .2rem; }
.panneau-dispo .quarts button {
  flex: 1 1 auto;
  padding: .22rem .1rem;
  font-size: .84rem;
  border: 1px solid var(--trait, #d8d4da);
  background: transparent;
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.panneau-dispo .quarts button[aria-pressed="true"] {
  background: var(--accent, #2E6F9E);
  border-color: var(--accent, #2E6F9E);
  color: #fff;
  font-weight: 600;
}

/* --- LA BARRE D'UNE LISTE PAGINÉE ------------------------------------
   L'ordre à gauche, le compte au milieu, les flèches à droite. Sur un
   téléphone les trois passent l'un sous l'autre plutôt que de se
   serrer : trois éléments comprimés sur une ligne, ce sont trois
   éléments qu'on rate du doigt. */
.barre-liste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin: .4rem 0 .8rem;
}
.barre-liste .tri-liste { display: flex; align-items: center; gap: .4rem; margin: 0; }
.barre-liste .tri-liste select { margin: 0; }
.barre-liste .compte-liste { margin: 0; }
.barre-liste .fleches { margin-left: auto; display: flex; gap: .4rem; }

.fleches.sous-table {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .9rem 0 .2rem;
}

/* La flèche qui ne mène nulle part n'est pas un lien : elle se voit
   éteinte et ne répond pas. Un bouton cliquable sans effet fait
   croire à une panne. */
.btn.eteint {
  opacity: .38;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 560px) {
  .barre-liste .fleches { margin-left: 0; width: 100%; }
  .barre-liste .fleches .btn { flex: 1 1 auto; text-align: center; }
}

/* --- L'EXERCICE COMPTABLE ---------------------------------------------

   Le tableau des exercices porte, sous chaque ligne, ce qui la
   concerne : la note du comptable, l'écart, et le geste. Ces lignes de
   suite sont rattachées visuellement à celle du dessus — sans quoi on
   arrête l'exercice d'à côté, ce qui est précisément le genre d'erreur
   qu'on ne remarque pas. */
tr.suite > td { border-top: 0; padding-top: 0; padding-bottom: .5rem; }
tr.suite + tr > td { border-top: 1px solid var(--trait, #e8e4ea); }
.ligne-geste { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap;
  margin: 0; }
.ligne-geste input[type="text"] { flex: 1 1 22rem; min-width: 12rem; margin: 0; }
.ligne-geste .btn { flex: 0 0 auto; }

/* --- LE LOGO DE L'ÉCOLE, DANS LE DOCUMENT AFFICHÉ À L'ÉCRAN -------

   Mêmes règles que dans papier.css, en rem plutôt qu'en millimètres :
   le document se lit dans la page avant de s'imprimer, et les deux
   doivent montrer la même chose. Un logo qui apparaît à l'impression
   mais pas à l'écran, c'est un logo qu'on croit absent et qu'on
   téléverse deux fois. */
.contrat-dans-la-page .vendeur .logo-ecole,
.feuille-apercu .vendeur .logo-ecole {
  display: block;
  max-height: 4.2rem;
  max-width: 16rem;
  width: auto;
  margin: 0 0 .6rem;
}

/* --- L'ENQUÊTE DE SATISFACTION, CÔTÉ ÉLÈVE ------------------------

   Elle se remplit avec un pouce, debout, sur un téléphone — c'est le
   seul endroit où elle se remplit vraiment. Cinq cibles larges par
   question, pas une liste déroulante : une liste déroulante sur un
   téléphone, c'est un menu qui s'ouvre, un doigt qui glisse, et une
   question sur six qu'on saute. */
.note-question { border: 0; padding: 0; margin: 0 0 1.1rem; }
.note-question legend { padding: 0; font-weight: 600; margin: 0 0 .4rem; }
.notes { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.notes .note { margin: 0; }
.notes .note input { position: absolute; opacity: 0; pointer-events: none; }
.notes .note span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 8px;
  border: 1px solid var(--trait, #D8D4DA); background: var(--surface, #fff);
  font-size: 1.05rem; cursor: pointer; user-select: none;
}
.notes .note input:checked + span {
  border-color: var(--accent, #A32B2B); background: var(--accent, #A32B2B);
  color: #fff; font-weight: 700;
}
/* LE FOCUS SE VOIT : on remplit ça au clavier aussi, et un bouton
   qu'on ne voit pas sélectionné est un bouton qu'on clique deux fois. */
.notes .note input:focus-visible + span {
  outline: 2px solid var(--accent, #A32B2B); outline-offset: 2px;
}
@media (max-width: 420px) {
  .notes .note span { width: 2.9rem; height: 2.9rem; }
  .notes .dim { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------
   LA RÉSERVATION EN LIGNE

   L'écran de l'élève est une liste d'heures cliquables, et rien
   d'autre. Chaque heure est un bouton assez grand pour un pouce sur
   un téléphone — c'est là que ça se réserve, le soir, dans le bus.
   Une cible de 44 px est le minimum en dessous duquel on clique à
   côté ; on ne descend pas dessous, même pour faire tenir une heure
   de plus par ligne.
   ------------------------------------------------------------------ */
.jour-resa { margin: 0 0 1.4rem; }
.jour-resa h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.heures-resa { display: flex; flex-wrap: wrap; gap: .5rem; }
.heures-resa form { margin: 0; }
.btn.creneau-libre {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: .1rem; min-width: 7.2rem; min-height: 44px; padding: .45rem .7rem;
  line-height: 1.25; text-align: left;
}
.btn.creneau-libre b { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.btn.creneau-libre .sous { font-size: .78rem; opacity: .8; }

.semaine-resa {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem;
  margin: 0 0 1.1rem;
}
.semaine-resa span { flex: 1 1 auto; text-align: center; }

/* Les jours d'ouverture, en ligne : sept cases qu'on lit d'un coup
   d'œil plutôt qu'une liste à dérouler. */
.jours-resa { border: 1px solid var(--trait, #D8D4DA); border-radius: 8px;
  padding: .7rem .9rem; margin: 0 0 1rem; }
.jours-resa legend { padding: 0 .35rem; font-weight: 600; }
.jours-resa label.case { display: inline-flex; align-items: center; gap: .35rem;
  margin: 0 1rem .3rem 0; }

/* L'AVERTISSEMENT D'ANNULATION est dans le volet, au-dessus du
   bouton — jamais après. Le volet est fermé : on ne propose pas
   d'annuler à qui ne le cherchait pas. */
.annuler-lecon { margin: .5rem 0 0; }
.annuler-lecon > summary { cursor: pointer; font-size: .88rem; opacity: .75; }
.annuler-lecon > summary:hover { opacity: 1; }
.annuler-lecon[open] > summary { margin-bottom: .5rem; }
.annuler-lecon p.alerte, .annuler-lecon p.ok { margin: .3rem 0; }
.annuler-lecon input[type="text"] { max-width: 26rem; }

/* L'interrupteur « ouvrir à la réservation », sur la fiche d'un
   créneau : une ligne, pas un encadré — c'est un détail de l'heure,
   pas une section. */
.ouvrir-resa { display: flex; flex-wrap: wrap; align-items: center;
  gap: .7rem; margin: 0 0 1.1rem; }
.ouvrir-resa label.case { display: inline-flex; align-items: center; gap: .4rem;
  margin: 0; }
.ouvrir-resa .dim { flex: 1 1 100%; margin: 0; }

/* Le bouton de dépôt ANTS, dans la colonne d'actions : au-dessus du
   lien du récapitulatif, pas à côté — la colonne est étroite, et un
   bouton qui passe à la ligne tout seul se retrouve sous le mauvais
   élève. */
.depot-ants { margin: 0 0 .3rem; }
.depot-ants .btn { width: 100%; }

/* La reprise AGX (27/09/2026). */
.reprise-mode ol{margin:6px 0 6px 20px;padding:0}
.reprise-mode li{margin:4px 0}
.onglets-reprise{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.bandeau-controle{padding:10px 14px;margin:10px 0}
.bandeau-controle.juste{border-left:4px solid #1F7A4D}
.bandeau-controle.faux{border-left:4px solid #B3261E}
.reprise-decision{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:10px 0 18px}
.reprise-decision label{display:flex;flex-direction:column;gap:3px;font-size:13px;min-width:240px}
.reprise-colonnes tr.a-venir td{background:rgba(236,141,93,.08)}
.reprise-colonnes{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.reprise-argent{margin-top:18px}
.reprise-argent table{min-width:0}

/* L'application installable des élèves (27/09/2026). */
.cache{display:none !important}
.form-code.replie{display:none}
.form-code.replie:target{display:block}
.champ-code{font-size:1.5rem;letter-spacing:.25em;text-align:center;max-width:12rem}
.coche.rester{display:flex;align-items:center;gap:.5rem;margin:.8rem 0 .2rem;font-weight:600}
.installer .icone-appli{border-radius:22px;box-shadow:0 2px 10px rgba(0,0,0,.12);margin:.4rem 0}
.installer .marche{margin:1rem 0;padding:.8rem 1rem}
.installer .marche ol{margin:.4rem 0 .4rem 1.2rem;padding:0}
.installer .marche li{margin:.35rem 0}
.bandeau-installer{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.7rem;padding:.6rem .8rem;
  background:#fff;border:1px solid var(--trait,#e5dcd6);border-radius:10px}
.bandeau-installer span{flex:1 1 14rem}
html.en-appli .installer-lien{display:none}
.affiche-appli{max-width:640px;margin:1.5rem auto;padding:2rem 2.2rem;background:#fff;border:1px solid var(--trait,#e5dcd6);
  border-radius:16px;text-align:center}
.affiche-appli h2{font-size:1.8rem;margin:.6rem 0 .3rem}
.affiche-appli .accroche{font-size:1.1rem;margin:0 0 1rem}
.affiche-appli .qr{width:260px;height:260px;margin:0 auto}
.affiche-appli .qr svg{width:100%;height:100%}
.affiche-appli .adresse-qr{font-size:.8rem;color:#6b6b6b;word-break:break-all}
.affiche-appli .deux-gestes{display:grid;grid-template-columns:1fr 1fr;gap:1rem;text-align:left;margin:1.2rem 0}
.affiche-appli .deux-gestes h3{margin:.2rem 0}
.affiche-appli .pied-affiche{font-size:.9rem;color:#555}
.affiche-appli .icone-appli{border-radius:24px}
@media print{
  .affiche-appli{border:0;box-shadow:none;margin:0 auto;max-width:none;padding:1cm}
  .affiche-appli .qr{width:9cm;height:9cm}
}
@media print{
  body:has(.affiche-appli) .barre, body:has(.affiche-appli) .lateral, body:has(.affiche-appli) footer,
  body:has(.affiche-appli) .ecran-seul, body:has(.affiche-appli) .pied{display:none !important}
  body:has(.affiche-appli) .charpente{display:block}
  body:has(.affiche-appli){background:#fff}
}
.affiche-appli .sous-titre-affiche{font-size:1.25rem;font-weight:600;margin:0 0 .4rem}
.nom-appli input[type=text]{max-width:16rem}

/* --- La charte CER dans l'espace des élèves (27/09/2026) -----------
   Tête blanche avec le logo, filet rouge ; le menu en gris, la page
   où l'on est en rouge ; les boutons en rouge CER. */
body.espace.charte-cer{--teinte:#D22F41;--accent:#D22F41;--accent-texte:#fff}
body.espace.charte-cer .bandeau-espace{background:#fff;color:#302C2D;border-bottom:3px solid #D22F41;padding:.55rem 0}
body.espace .marque{display:flex;align-items:center;gap:.7rem}
body.espace .marque-logo{height:34px;width:auto;display:block}
body.espace .marque-appli{font-weight:800;letter-spacing:.04em;font-size:.95rem;padding-left:.7rem;border-left:1px solid rgba(0,0,0,.15)}
body.espace:not(.charte-cer) .marque-appli{border-left-color:rgba(255,255,255,.4)}
body.espace.charte-cer .marque-appli{color:#D22F41}
body.espace.charte-cer .bandeau-espace .menu a{color:#302C2D;opacity:1}
body.espace.charte-cer .bandeau-espace .menu a:hover{background:#FBEAEC;color:#D22F41}
body.espace.charte-cer .bandeau-espace .menu a.ici{background:#D22F41;color:#fff}
body.espace.charte-cer .bandeau-espace .qui,body.espace.charte-cer .bandeau-espace .qui a,
body.espace.charte-cer .bandeau-espace .qui span{color:#302C2D}
body.espace.charte-cer .pastille-compte{background:#D22F41;color:#fff}
body.espace.charte-cer .menu a.ici .pastille-compte{background:#fff;color:#D22F41}
body.espace.charte-cer .btn:not(.discret){background:#D22F41;border-color:#D22F41;color:#fff}
body.espace.charte-cer .btn:not(.discret):hover{background:#B82435;border-color:#B82435}
body.espace.charte-cer a{accent-color:#D22F41}
@media (max-width:480px){body.espace .marque-logo{height:26px}body.espace .marque-appli{font-size:.85rem;padding-left:.5rem}}
/* La tête sur deux rangs : le logo et « qui » en haut, le menu dessous,
   sur une seule ligne qui défile au doigt sur téléphone (27/09/2026). */
body.espace .bandeau-espace .qui{order:2}
body.espace .bandeau-espace .menu{order:3;flex:1 1 100%}
.pied-espace{margin:3rem auto 2rem}
@media (max-width:640px){
  body.espace .bandeau-espace .dedans{gap:.5rem}
  body.espace .bandeau-espace .menu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -14px;padding:0 14px 2px}
  body.espace .bandeau-espace .menu::-webkit-scrollbar{display:none}
  body.espace .bandeau-espace .menu a{white-space:nowrap;flex:0 0 auto}
  body.espace .bandeau-espace .qui span{display:none}
  body.espace .bandeau-espace .qui a{font-size:.85rem}
}
body.espace .bandeau-espace .menu{gap:0}
body.espace .bandeau-espace .menu a{padding:.35rem .5rem;font-size:.95rem}
@media (max-width:640px){
  body.espace .marque-appli{display:none}
  body.espace .marque-logo{height:28px}
  body.espace .bandeau-espace .qui{margin-left:auto}
}
@media (min-width:641px){body.espace .dedans{max-width:880px}body.espace .bandeau-espace .menu a{font-size:.93rem}}

/* La porte par mot de passe (27/09/2026) */
.champ-mdp{position:relative}
.champ-mdp input{padding-right:5.5rem;width:100%}
.voir-mdp{position:absolute;right:.35rem;top:50%;transform:translateY(-50%);border:0;background:transparent;
  color:var(--accent);font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;padding:.3rem .5rem}
.liens-porte{display:flex;gap:.6rem;flex-wrap:wrap;margin:.2rem 0 1.2rem}
.carte-mdp{margin:.4rem 0 1.4rem}
.carte-mdp summary{cursor:pointer;color:var(--accent);font-weight:600}
.alerte-texte{color:var(--alerte);font-weight:600}
body.espace label.coche.rester{display:flex;flex-direction:row;align-items:center;gap:.6rem;border:0;padding:0;background:none;
  text-align:left;color:inherit;font-size:1rem;margin:1rem 0 .2rem}
body.espace label.coche.rester input[type=checkbox]{width:1.25rem;height:1.25rem;margin:0;flex:0 0 auto;accent-color:var(--accent)}

/* ==================================================================
   LE SUIVI PÉDAGOGIQUE (27/09/2026)
   Quatre états, quatre couleurs — les mêmes partout : non vu (gris),
   abordé (ambre), traité (bleu), assimilé (vert).
   ================================================================== */
:root{--etat0:#B8BCC2;--etat1:#E9A23B;--etat2:#3D86D6;--etat3:#2E9E57}
.etat{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.78rem;font-weight:700;white-space:nowrap;vertical-align:middle}
.etat-0{background:#EEF0F2;color:#5A6068}.etat-1{background:#FCEFD9;color:#8A5A0B}
.etat-2{background:#E1EDFA;color:#1D5696}.etat-3{background:#DDF3E5;color:#1D6B3A}
.etat-fond-0{background:var(--etat0)}.etat-fond-1{background:var(--etat1)}.etat-fond-2{background:var(--etat2)}.etat-fond-3{background:var(--etat3)}
i.point{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;margin-right:.4rem;flex:0 0 auto;vertical-align:middle}
.barre-progression{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--etat0);margin:.3rem 0}
.barre-progression span{display:block;height:100%}
.legende-progression{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.82rem;margin:.2rem 0 .8rem;color:var(--gris)}
.legende-progression i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.3rem;vertical-align:-1px}

.suivi-grille{display:grid;grid-template-columns:minmax(260px,1fr) minmax(360px,1.6fr) minmax(260px,1fr);gap:18px;align-items:start}
@media (max-width:1180px){.suivi-grille{grid-template-columns:minmax(250px,1fr) minmax(340px,1.5fr)}.suivi-arbre{grid-row:span 2}.suivi-lecon{grid-column:2}}
@media (max-width:760px){.suivi-grille{grid-template-columns:1fr}.suivi-arbre{grid-row:auto}.suivi-lecon{grid-column:auto}}
.suivi-arbre,.suivi-objectif,.suivi-lecon{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:12px 14px}
.suivi-arbre{position:sticky;top:8px;max-height:calc(100vh - 16px);overflow:auto}
@media (max-width:760px){.suivi-arbre{position:static;max-height:none}}
.arbre-c{border-top:1px solid var(--trait);padding:.4rem 0}
.arbre-c summary{cursor:pointer;font-size:.92rem;line-height:1.35}
.arbre-c ul{list-style:none;margin:.3rem 0 .2rem;padding:0}
.arbre-c ul.micro{margin:.1rem 0 .3rem 1.2rem}
.arbre-synthese{margin:.3rem 0}
a.obj{display:flex;align-items:flex-start;gap:.1rem;padding:.35rem .4rem;border-radius:6px;color:var(--encre);text-decoration:none;font-size:.88rem;line-height:1.3}
a.obj i.point{margin-top:.25rem}
a.obj b{margin-right:.3rem}
a.obj:hover{background:var(--fond)}
a.obj.choisi{background:#FBEAEC;outline:2px solid #D22F41}
.micro a.obj{font-size:.84rem;color:var(--gris)}
.trame{margin:.6rem 0 1rem;border:1px solid var(--trait);border-radius:8px;padding:.5rem .8rem;background:var(--fond)}
.trame summary{cursor:pointer;font-weight:700}
.trame h3{font-size:.95rem;margin:.6rem 0 .2rem}
.trame ul{margin:.2rem 0 .6rem 1.1rem;padding:0}
.remc{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:560px){.remc{grid-template-columns:1fr}}
.remc div{background:var(--surface);border:1px solid var(--trait);border-radius:6px;padding:.4rem .6rem}
.remc h4{margin:0 0 .2rem;font-size:.85rem;color:#D22F41}
.remc p{margin:0;font-size:.88rem}
.etats-choix{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:.6rem 0}
.etats-choix legend{font-weight:700;margin-bottom:.35rem;padding:0}
.etats-choix label{position:relative;margin:0}
.etats-choix input{position:absolute;opacity:0;pointer-events:none}
.etats-choix span{display:inline-block;padding:.55rem .9rem;border:2px solid var(--trait);border-radius:8px;font-weight:600;cursor:pointer;min-width:5.5rem;text-align:center}
.etats-choix input:checked + span{border-color:var(--encre);background:var(--fond)}
.etats-choix .c1 input:checked + span{border-color:var(--etat1);background:#FCEFD9}
.etats-choix .c2 input:checked + span{border-color:var(--etat2);background:#E1EDFA}
.etats-choix .c3 input:checked + span{border-color:var(--etat3);background:#DDF3E5}
.etats-choix .c0 input:checked + span{border-color:var(--etat0);background:#EEF0F2}
.etats-choix input:focus-visible + span{outline:2px solid #D22F41;outline-offset:2px}
.outils-medias{display:flex;flex-wrap:wrap;gap:6px;margin:.6rem 0}
.outils-medias .btn{padding:.5rem .8rem}
.medias-attente{display:flex;flex-wrap:wrap;gap:8px}
.medias-attente figure.attente{margin:0;width:150px;border:1px solid var(--trait);border-radius:6px;padding:4px;background:var(--fond)}
.medias-attente img,.medias-attente video{width:100%;height:95px;object-fit:cover;border-radius:4px;display:block;background:#000}
.medias-attente .doc{height:95px;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.medias-attente figcaption{font-size:.75rem;margin-top:3px}
.devoir-case{margin:.8rem 0;padding:.6rem .8rem;border:1px dashed #D22F41;border-radius:8px;background:#FFF8F8}
.devoir-case input[type=text]{margin-top:.4rem}
form.en-ligne{display:inline;margin:0}
.observation{border-top:1px solid var(--trait);padding:.6rem 0}
.observation header{font-size:.88rem;line-height:1.45}
.observation header time{color:var(--gris);font-variant-numeric:tabular-nums;margin-right:.3rem}
.observation p{margin:.3rem 0}
.medias{display:flex;flex-wrap:wrap;gap:8px;margin:.4rem 0}
.media{margin:0;max-width:320px}
.media img{max-width:100%;max-height:240px;border-radius:6px;border:1px solid var(--trait);display:block;background:#fff}
.media video{width:320px;max-width:100%;border-radius:6px;background:#000;display:block}
.media figcaption{font-size:.75rem;color:var(--gris)}
.liste-devoirs{padding-left:1.1rem}
.liste-devoirs li{margin:.35rem 0}
.livret-c{display:grid;gap:8px}
.livret-competence summary{cursor:pointer;line-height:1.5}
.livret-sous{list-style:none;padding:0;margin:.5rem 0}
.livret-sous > li{padding:.3rem 0;border-top:1px solid var(--trait)}
.livret-micro{list-style:none;margin:.2rem 0 0 1.4rem;padding:0;font-size:.9rem}
.lecon-historique header{display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:baseline}
.lecon-historique h3{margin:0;font-size:1.02rem}
.bilan-mot{background:var(--fond);border-radius:6px;padding:.5rem .7rem}
.prochaine,.devoir-donne{font-size:.92rem}
.carte.lecon-historique,.carte.synthese-carte,.carte.blanc-carte{margin:.7rem 0}
.synthese-details{list-style:none;padding:0;font-size:.9rem}
.verdict{display:inline-block;padding:.1rem .55rem;border-radius:6px;font-weight:700;font-size:.85rem}
.verdict.favorable{background:#DDF3E5;color:#1D6B3A}.verdict.defavorable{background:#FBE3E5;color:#9B1C2B}
.grille-examen h3{margin:1rem 0 .3rem;font-size:1rem}
.ligne-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.4rem;padding:.4rem 0;border-top:1px solid var(--trait)}
.ligne-note .lib{flex:1 1 16rem}
.choix-notes{display:flex;gap:4px}
.choix-notes label{margin:0;position:relative}
.choix-notes input{position:absolute;opacity:0}
.choix-notes span{display:inline-block;min-width:2.6rem;text-align:center;padding:.45rem .4rem;border:2px solid var(--trait);border-radius:6px;font-weight:700;cursor:pointer}
.choix-notes input:checked + span{border-color:#D22F41;background:#FBEAEC;color:#9B1C2B}
.choix-notes input:focus-visible + span{outline:2px solid #D22F41}
.total-examen{position:sticky;bottom:0;background:var(--surface);border:2px solid var(--trait);border-radius:8px;padding:.6rem .9rem;margin:1rem 0;font-size:1.1rem;z-index:5}
.synthese-grille .oui-non label{display:inline-flex;gap:.3rem;margin-right:.8rem}
.grille-lecture td,.grille-lecture th{font-size:.85rem}
.livret-reglages{display:grid;grid-template-columns:minmax(300px,1.1fr) minmax(320px,1fr);gap:18px;align-items:start}
@media (max-width:900px){.livret-reglages{grid-template-columns:1fr}}
.livret-arbre{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:10px 12px}
.livret-arbre > div,.livret-arbre > form{display:flex;align-items:center;gap:4px;padding:.25rem 0;font-size:.9rem}
.livret-arbre .n1{border-top:2px solid var(--trait);margin-top:.5rem;padding-top:.5rem}
.livret-arbre .n2{padding-left:1rem}
.livret-arbre .n3{padding-left:2.4rem;font-size:.85rem}
.livret-arbre .inactif a{text-decoration:line-through;color:var(--gris)}
.livret-arbre .choisi{background:#FBEAEC;border-radius:6px}
.livret-arbre .ajout input{flex:1;font-size:.82rem;padding:.25rem .4rem}
.fleche-ordre{border:1px solid var(--trait);background:var(--fond);border-radius:4px;width:1.6rem;height:1.6rem;padding:0;cursor:pointer;font-size:.8rem;line-height:1}
.livret-edition{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:12px 16px;position:sticky;top:8px}
.devoir-media-apercu video,.devoir-media-apercu img{max-width:100%;max-height:260px;border-radius:6px;display:block;margin-bottom:.3rem}

/* --- L'outil de dessin : plein écran ------------------------------- */
html.dessin-ouvert,html.dessin-ouvert body{overflow:hidden}
.dessin-modale{position:fixed;inset:0;z-index:1000;background:#1E2227;display:flex;flex-direction:column;padding:8px;gap:6px}
.dessin-modale[hidden]{display:none}
.dessin-barre{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:#fff}
.dessin-groupe{display:flex;align-items:center;gap:4px}
.dessin-groupe label{color:#fff;display:flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem}
.dessin-groupe select,.dessin-groupe input[type=text]{width:auto;padding:.3rem .4rem;font-size:.85rem}
.dessin-groupe.outils button,.dessin-groupe.actions button:not(.btn){min-width:2.6rem;height:2.6rem;border-radius:8px;border:1px solid #4A515A;background:#2C3238;color:#fff;font-size:1.05rem;cursor:pointer}
.dessin-groupe.outils button.actif{background:#D22F41;border-color:#D22F41}
.dessin-groupe input[type=range]{width:130px;accent-color:#D22F41}
.apercu-trait{display:inline-block;border-radius:50%;border:1px solid #fff}
.dessin-groupe.actions{margin-left:auto}
.dessin-palette{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.teinte{width:30px;height:30px;border-radius:50%;border:2px solid #4A515A;cursor:pointer;padding:0}
.teinte.actif{outline:3px solid #fff;outline-offset:1px}
.teinte-libre{display:inline-flex;align-items:center;gap:.2rem;color:#fff;font-size:1.2rem;margin:0 0 0 .3rem;cursor:pointer}
.teinte-libre input{width:38px;height:32px;border:0;padding:0;background:none;cursor:pointer}
.dessin-toile{position:relative;flex:1;min-height:0;margin:0 auto;max-width:100%;max-height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.dessin-toile canvas{position:absolute;max-width:100%;max-height:100%;width:auto;height:auto;aspect-ratio:inherit;background:transparent;border-radius:4px}
.dessin-toile canvas[data-canvas-fond]{background:#fff}
.dessin-modale .btn.discret{color:#fff;border-color:#8A929B;background:transparent}
.barre-progression + .legende-progression::after{content:'sous-compétences';color:var(--gris);font-size:.78rem}
.suivi-objectif textarea,.suivi-lecon textarea,.suivi-objectif input[type=text],form[data-medias] textarea{width:100%;box-sizing:border-box}
.devoir-case label.case{display:flex;gap:.5rem;align-items:flex-start;margin:0}
.devoir-case label.case input{margin-top:.2rem}
.livret-edition textarea,.livret-edition input[type=text],.livret-edition input[type=url],
form[data-medias] select,form[data-medias] input[type=text],.synthese-grille + p + fieldset ~ textarea{width:100%;box-sizing:border-box}
.livret-edition textarea{font:inherit;font-size:.92rem}

/* Mon devoir maison */
.devoirs-liste{list-style:none;padding:0;display:grid;gap:8px}
.devoir-tuile{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;color:inherit;padding:.8rem 1rem;position:relative}
.devoir-tuile.nouveau{border-left:4px solid #D22F41}
.devoir-tuile .pastille-compte{position:absolute;top:.6rem;right:.6rem}
.devoir-ouvert .devoir-video{width:100%;max-height:60vh;background:#000;border-radius:8px;margin:.6rem 0}
.devoir-ouvert .devoir-image{max-width:100%;border-radius:8px;margin:.6rem 0}
.devoir-texte{background:var(--fond);border-radius:8px;padding:.8rem 1rem;margin:.6rem 0;line-height:1.55}
.consigne{background:#FFF8F8;border:1px dashed #D22F41;border-radius:8px;padding:.6rem .8rem}
.devoir-fait{margin-top:1rem}

.choix-notes.lettres .lA input:checked + span{border-color:var(--etat3);background:#DDF3E5;color:#1D6B3A}
.choix-notes.lettres .lB input:checked + span{border-color:var(--etat1);background:#FCEFD9;color:#8A5A0B}
.choix-notes.lettres .lC input:checked + span{border-color:#D22F41;background:#FBE3E5;color:#9B1C2B}
.onglets-livret{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0 1rem}
.onglets-livret a{padding:.4rem .75rem;border:1px solid var(--trait);border-radius:999px;text-decoration:none;color:var(--encre);font-size:.88rem;background:var(--surface)}
.onglets-livret a.ici{background:#D22F41;border-color:#D22F41;color:#fff}

/* La signature au doigt */
.signature-modale{position:fixed;inset:0;z-index:1001;background:rgba(20,22,26,.85);display:flex;align-items:center;justify-content:center;padding:12px}
.signature-boite{background:#fff;border-radius:12px;padding:16px;width:min(920px,100%)}
.signature-boite h2{margin:0 0 .2rem}
.signature-boite canvas{width:100%;height:auto;border:2px dashed #BDBDBD;border-radius:8px;display:block;background:#fff}
.signature-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:.8rem 0 0}
.signatures{display:flex;flex-wrap:wrap;gap:12px;margin:.6rem 0}
.signatures figure{margin:0;border:1px solid var(--trait);border-radius:8px;padding:6px 8px;background:#fff}
.signatures img{height:70px;width:auto;display:block}
.signatures figcaption{font-size:.75rem;color:var(--gris)}
.appeler{display:flex;flex-wrap:wrap;gap:8px;margin:.5rem 0}

/* ==================================================================
   LE MODE TABLETTE (27/09/2026)
   ================================================================== */
body.tablette{background:#F5F6F8;margin:0}
.tablette-tete{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;background:#1B2733;color:#fff;padding:10px 16px}
.tablette-tete .marque-mot{color:#fff}
.tablette-nom{font-weight:700;letter-spacing:.04em}
.tablette-tete .reseau{margin-left:auto;font-size:.88rem;font-weight:600}
.reseau.en-ligne{color:#7FD99A}.reseau.hors-ligne{color:#F2B33D}
.attente-envoi{font-size:.85rem;opacity:.85}
.attente-envoi.a-envoyer{background:#F2B33D;color:#231005;border-radius:999px;padding:.1rem .6rem;opacity:1;font-weight:700}
.tablette-message{margin:0;padding:.6rem 16px;font-size:.92rem;background:#E8EEF5}
.tablette-message.ok{background:#DDF3E5}.tablette-message.alerte{background:#FCEFD9}
.tablette-message .btn{margin-left:.5rem}
.tablette-corps{max-width:1400px;margin:0 auto;padding:12px 16px 40px}
.tablette-corps h2.jour{text-transform:capitalize;font-size:1.05rem;margin:1.2rem 0 .4rem}
.lecons-tablette{list-style:none;padding:0;margin:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.lecon-tuile{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;padding:.8rem 1rem;text-decoration:none;color:inherit;min-height:48px}
.lecon-tuile .pastille-compte{margin-left:auto}
.ajout-eleve{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:1.2rem}
.ajout-eleve label{flex:1 0 100%}
.ajout-eleve input{flex:1 1 240px}
body.tablette .suivi-objectif textarea{width:100%;box-sizing:border-box}

/* Le planning d'AGX, en face de celui d'AE (28/09/2026) */
.pa-semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.5rem;margin:1rem 0}
@media (max-width:1100px){.pa-semaine{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pa-semaine{grid-template-columns:1fr}}
.pa-jour{background:var(--fond-carte,#fff);border:1px solid var(--trait,#ddd);border-radius:6px;padding:.5rem;display:flex;flex-direction:column;gap:.4rem;min-width:0}
.pa-jour.aujourdhui{border-color:currentColor}
.pa-jour h2{font-size:.95rem;margin:0}
.pa-lecon{display:flex;flex-direction:column;gap:.1rem;padding:.35rem .45rem;border-radius:4px;border-left:4px solid #999;text-decoration:none;color:inherit;background:rgba(0,0,0,.03);font-size:.85rem;overflow-wrap:anywhere}
.pa-lecon.agx{border-left-color:#c77d1a}
.pa-lecon.agx.aussi{border-left-color:#2f7d4f}
.pa-lecon.ae{border-left-color:#3b6fb6}
.pa-etiquette{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;opacity:.75}

/* La fiche TEST (28/09/2026) */
.pastille-test{display:inline-block;margin-left:.5rem;padding:.1rem .5rem;border-radius:4px;background:#8a2be2;color:#fff;font-size:.8rem;letter-spacing:.08em;vertical-align:middle}
.bandeau-test{border-left:4px solid #8a2be2;background:rgba(138,43,226,.08);padding:.5rem .8rem;border-radius:4px}

/* Les chiffres d'AGX (28/09/2026) */
.stats-agx th{white-space:nowrap}
.barre-agx{display:inline-block;width:80px;height:.55rem;background:rgba(0,0,0,.08);border-radius:3px;vertical-align:middle;margin-right:.3rem}
.barre-agx span{display:block;height:100%;background:#3b6fb6;border-radius:3px}

.pourcentage-progression{margin:.2rem 0 .1rem;font-size:.95rem}.pourcentage-progression b{font-size:1.5rem;color:var(--etat3,#2F7D4F);margin-right:.3rem}

/* L'encart « Observation », agrandi (28/09/2026, Riadh) : on écrit
   au volant, sur tablette — grand, lisible, et il grandit avec le texte. */
.form-observation textarea,#texte,#travaille,#prochaine,.form-bilan textarea{min-height:11rem;font-size:1.05rem;line-height:1.5;padding:.7rem;resize:vertical}
body.tablette .form-observation textarea,body.tablette .form-bilan textarea{min-height:13rem;font-size:1.15rem}
#prochaine,.form-bilan textarea[data-prochaine]{min-height:9rem}
.pourcentage-competence{font-variant-numeric:tabular-nums;font-weight:700;color:var(--etat3);margin-left:.4rem}
.progression-competences{display:grid;gap:.35rem;margin:.5rem 0 .8rem}
.progression-competences div{display:grid;grid-template-columns:5.5rem 1fr 3.2rem;align-items:center;gap:.5rem;font-size:.9rem}
.progression-competences .barre-progression{margin:0}
.onglets-eleve{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 .8rem}
.onglets-eleve a{padding:.45rem .9rem;border:1px solid var(--trait);border-radius:999px;text-decoration:none}
.onglets-eleve a.ici{background:var(--encre,#1B2733);color:#fff;border-color:transparent}

/* La reprise AGX — le planning ajustable et la note (29/09/2026). */
.reprise-lecons{margin-top:18px}
.reprise-lecons tr.ajustee td{background:rgba(59,111,182,.07)}
.reprise-lecons td.ajuster{white-space:nowrap;vertical-align:top}
.reprise-lecons td.ajuster details[open]{white-space:normal;min-width:240px}
.reprise-lecons summary{list-style:none;cursor:pointer}
.reprise-lecons summary::-webkit-details-marker{display:none}
.form-lecon-agx{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:6px 8px;margin:8px 0;max-width:720px}
.form-lecon-agx label{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.form-lecon-agx input{min-width:0}
.form-lecon-agx .boutons{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.ajout-lecon-agx{margin-top:10px}
.lecons-retirees{margin:6px 0 0 18px;padding:0}
.lecons-retirees li{margin:4px 0;color:var(--gris)}
td.reprise-note{max-width:260px;white-space:normal;font-size:13px}

/* Les droits (29/09/2026). */
.onglets-droits{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:14px 0}
.onglets-droits form{display:inline-flex;gap:6px;align-items:center;margin-left:8px}
.droits-legende ul{margin:6px 0 6px 18px;padding:0}
.droits-legende li{margin:2px 0}
.form-droits h3{margin:18px 0 6px}
.form-droits table{min-width:0}
.form-droits td:first-child{width:50%}
.form-droits tr.regle td{background:rgba(59,111,182,.08)}
.form-droits tr.regle td:first-child{font-weight:600}
.form-droits select{max-width:100%}