/* MABASE FORMA PRO — mêmes couleurs que mabase.pro.
   Polices du système : la page ne charge rien de l'extérieur, ce qui
   permet de fermer la porte aux ressources tierces (voir l'en-tête
   Content-Security-Policy dans le socle). */

:root{
  --papier:#F6F7F8;
  --surface:#FFFFFF;
  --encre:#101820;
  --plein:#1B2733;
  --gris:#5D6C79;
  --trait:#DCE2E7;
  --accent:#EE7B45;
  --accent-texte:#231005;
  --alerte:#A32C1A;
  --alerte-fond:#FBEDE9;
  --ombre:0 1px 2px rgba(16,24,32,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0D1216; --surface:#151E26; --encre:#E8EEF2; --plein:#1E2C39;
    --gris:#93A4B1; --trait:#25333F; --accent:#F58F5C; --accent-texte:#1A0C03;
    --alerte:#F5A18F; --alerte-fond:#331914; --ombre:none;
  }
}

*{box-sizing:border-box}
/* « hidden » doit gagner. Sans cette ligne, tout élément à qui une règle
   d'auteur donne un display — .btn est en inline-block — reste visible
   quand JavaScript le cache : la règle du navigateur pour [hidden] a
   moins de poids que la nôtre. Le chrono montrait « Démarrer » pendant
   qu'il tournait, et « Pause » à l'arrêt : les quatre boutons en même
   temps, tous menteurs. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--papier); color:var(--encre);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.enveloppe{max-width:1000px;margin:0 auto;padding:0 24px}
.enveloppe.seul{display:flex;justify-content:center;padding-top:6vh;padding-bottom:6vh}

h1{font-size:clamp(24px,3.4vw,33px);line-height:1.15;letter-spacing:-.02em;margin:26px 0 12px;text-wrap:balance}
h2{font-size:19px;letter-spacing:-.01em;margin:30px 0 10px}
p{margin:0 0 14px}
.dim{color:var(--gris)}
.petit{font-size:14px}
.large{max-width:62ch}

/* Barre du haut */
.barre{background:var(--plein);color:#fff}
/* min-height et non height : la barre porte maintenant la marque
   dessinée en plus du mot, et sur une application au menu long le
   « Se déconnecter » passait à la ligne — hors de la barre, par-dessus
   le titre de la page. Une hauteur fixe ne se voit pas tant que le
   contenu tient dedans ; le jour où il n'y tient plus, elle déborde en
   silence. */
.barre-dedans{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:56px;padding:5px 0;flex-wrap:wrap}
.marque,.marque-seule{font-weight:700;letter-spacing:-.02em;text-decoration:none;color:inherit;font-size:18px}
.marque em,.marque-seule em{font-style:normal;color:var(--accent)}
.marque-mot{font-weight:inherit;white-space:nowrap}
.marque-mot em{font-style:normal;color:var(--accent)}
.marque span{font-weight:500;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.72;margin-left:8px}
.qui{display:flex;align-items:center;gap:12px;font-size:14px;color:#C3D0DB}
.qui a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4)}
.qui a:hover{border-bottom-color:var(--accent)}

/* Carte de connexion / installation */
.carte-connexion{
  background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre);
  padding:34px 32px 28px;width:100%;max-width:430px;
}
.large-carte{max-width:560px}
.carte-connexion h1{font-size:22px;margin:14px 0 8px}
.marque-seule{font-size:22px}

label{display:block;font-size:13.5px;font-weight:600;margin:16px 0 5px}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:10px 12px;font:inherit;font-size:16px;
  background:var(--saisie,#fff);color:var(--encre);
  border:1px solid var(--trait);border-radius:0;
}
input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.btn{
  display:inline-block;margin-top:22px;padding:11px 20px;font:inherit;font-weight:600;
  background:var(--accent);color:var(--accent-texte);border:1px solid var(--accent);
  cursor:pointer;text-decoration:none;
}
.btn:hover{filter:brightness(1.05)}
.btn.discret{background:transparent;color:var(--encre);border-color:var(--trait)}
/* Le bouton qui efface. Il ne prend pas la couleur d'accent : celle-ci
   veut dire « c'est là qu'il faut cliquer », et on ne dit pas ça d'une
   suppression. Il porte la couleur des alertes, contour seul, pour se
   distinguer sans attirer la main. */
.btn.danger{background:transparent;color:var(--alerte);border-color:var(--alerte);font-weight:600}
.btn.danger:hover{background:var(--alerte);color:#fff;filter:none}

.alerte{
  background:var(--alerte-fond);color:var(--alerte);
  border-left:3px solid var(--alerte);padding:10px 14px;font-size:14.5px;margin:16px 0 0;
}

/* Tuiles du tableau de bord */
.tuiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin:22px 0 8px}
.tuile{background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre);padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px}
.etiquette{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.tuile strong{font-size:21px;letter-spacing:-.01em}
/* Une tuile qui porte un NOM et non un nombre : 21 pixels conviennent à
   « 12 », pas à « Jean-Philippe Vandenberghe », qui déborde et pousse
   les tuiles voisines. */
.tuile strong.petit-fort{font-size:16px;line-height:1.25;overflow-wrap:anywhere}

.suite{max-width:64ch;padding-left:20px;color:var(--gris)}
.suite li{margin-bottom:8px}
.suite strong{color:var(--encre)}

/* Journal */
.tableau-large{overflow-x:auto;border:1px solid var(--trait);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:640px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--trait);vertical-align:top}
th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);background:var(--papier)}
tr:last-child td{border-bottom:none}
.chiffres{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Navigation */
/* Huit onglets ne tiennent plus sur une ligne dans une enveloppe de
   1000 px : « Messages » fait passer « Se déconnecter » à la ligne
   suivante. J'ai essayé de récupérer la place en rétrécissant la police
   — mesuré : il manquait encore une cinquantaine de pixels, et le
   compteur de non-lus en reprend trente dès qu'il s'affiche. Rogner
   jusqu'à 12 px pour gagner une ligne aurait rendu la barre moins
   lisible tous les jours, pour un défaut qui n'en est pas un : la barre
   sait se replier, elle grandit au lieu de déborder, et rien ne passe
   par-dessus le titre. On resserre un peu, et on l'accepte. */
.menu{display:flex;gap:12px;margin-right:auto;margin-left:8px;font-size:13.5px;
  flex-wrap:wrap;min-width:0}
.menu a{color:#C3D0DB;text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.menu a:hover{color:#fff}
.menu a.ici{color:#fff;border-bottom-color:var(--accent)}
.fil{font-size:14px;color:var(--gris);margin:22px 0 0}
.fil a{color:var(--gris)}
.lien-fort{color:var(--encre);text-decoration:none;font-weight:600;border-bottom:1px solid var(--trait)}
.lien-fort:hover{border-bottom-color:var(--accent)}
a{color:var(--encre)}

/* Pastilles d'état */
.pastille{display:inline-block;font-size:11.5px;letter-spacing:.04em;padding:2px 8px;
  border:1px solid var(--trait);color:var(--gris);white-space:nowrap;margin-left:4px}
.pastille.actif{border-color:#1F7A4D;color:#1F7A4D}
.pastille.fini{border-color:var(--gris)}
.pastille.stop{border-color:var(--alerte);color:var(--alerte)}
.pastille.attente{border-color:var(--accent);color:var(--encre)}
.pastille.retard{border-color:var(--alerte);color:var(--alerte);font-weight:600}
.pastille.attention{border-color:var(--accent);color:var(--accent-fonce,#B4541F);font-weight:600}

/* ── LA MESSAGERIE ──────────────────────────────────────────────────
   Le compteur de la barre : un chiffre plein, pas une pastille bordée.
   Dans une barre sombre, un contour se perd ; un rond plein se voit du
   coin de l'œil, ce qui est exactement son travail. */
.compteur{display:inline-block;min-width:19px;padding:1px 6px;margin-left:4px;
  border-radius:10px;background:var(--accent);color:#231005;
  font-size:11.5px;font-weight:700;line-height:17px;text-align:center;
  font-variant-numeric:tabular-nums}
tr.a-lire td{background:rgba(236,141,93,.07)}

/* Les bulles. Le fil est une conversation, pas un registre : ce que
   j'écris est aligné à droite, ce qu'on m'écrit à gauche, et l'on sait
   qui parle sans lire la signature. La largeur est bornée à 80 % pour
   que le décalage reste visible même sur un message d'une ligne. */
.conversation{display:flex;flex-direction:column;gap:10px;margin:14px 0 20px;
  max-width:720px}
.bulle{max-width:80%;padding:10px 13px;border:1px solid var(--trait);
  background:var(--papier)}
.bulle.de-moi{align-self:flex-end;border-color:var(--accent)}
.bulle.de-lui{align-self:flex-start}
.bulle .dit{margin:0;font-size:15px;line-height:1.5;white-space:normal}
.bulle .signe{margin:5px 0 0;font-size:12px;color:var(--gris)}
@media (max-width:640px){.bulle{max-width:92%}}

/* Le carnet d'envoi : un repli par promotion, qu'on ouvre pour voir qui
   il y a dedans AVANT de cocher. */
.groupe-envoi{border:1px solid var(--trait);margin:0 0 8px;background:var(--papier)}
.groupe-envoi>summary{padding:10px 13px;cursor:pointer;font-weight:600;font-size:14.5px}
.groupe-envoi>summary .dim{font-weight:400;font-size:13px;margin-left:6px}
.tiroir-envoi{padding:0 13px 10px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:2px}
.tiroir-envoi label.case{margin:0;padding:6px 2px;min-height:36px;display:flex;
  align-items:baseline;gap:8px;font-size:14px}
.tiroir-envoi label.case input{flex:none;position:relative;top:2px}
/* Ce qui appelle une correction sans être une erreur : une mention qui
   manque, un compte rendu non écrit. Le mot compte autant que la
   teinte — l'orange seul ne se lit pas pour tout le monde, et sur fond
   sombre il faut le remonter pour qu'il reste lisible.
   La classe était employée dans trois écrans de FORMA PRO sans jamais
   avoir été définie ici : le texte s'affichait, en couleur ordinaire,
   et ne signalait donc rien du tout. */
.attention{color:var(--accent-fonce,#B4541F);font-weight:600}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .attention{color:var(--accent)}
}
:root[data-theme="dark"] .attention{color:var(--accent)}

/* « neutre » : ce qui n'est ni bon ni mauvais — hors score, à venir. */
.pastille.neutre{border-style:dashed}

/* Une liste sans puces, quand ce sont les éléments qui portent le sens
   et non leur énumération. */
.liste-nue{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:5px}
.liste-nue li{font-size:13.5px}

/* Le bandeau du brouillon : il doit se voir sans faire peur — ce n'est
   pas une erreur, c'est une proposition. */
.brouillon{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  background:var(--surface);border:1px solid var(--accent);
  padding:10px 14px;margin:16px 0;font-size:14.5px;max-width:70ch}
.brouillon .btn{margin-top:0}
.brouillon-note{margin:10px 0 0}

/* Un champ qu'on ne montre que si on veut le corriger. */
.tiroir-champ{margin:14px 0}
.tiroir-champ summary{cursor:pointer;font-size:14px;color:var(--gris)}
.tiroir-champ summary:hover{color:var(--encre)}

/* Ce qui a été dit, rapporté tel quel : une citation, pas un commentaire. */
.cite{border-left:3px solid var(--trait);padding:2px 0 2px 14px;margin:10px 0 18px;
  max-width:62ch;white-space:normal}
tr.parti td{opacity:.55}

/* Bandeau de jours : le calendrier et l'émargement d'un coup d'œil */
.jours{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 18px}
.jour{font-size:12px;font-variant-numeric:tabular-nums;padding:3px 7px;
  border:1px solid var(--trait);background:var(--surface);color:var(--gris);white-space:nowrap}
.jour.centre{border-color:#9FBBD0;color:var(--encre)}
.jour.entreprise{border-color:#D8B36A;color:var(--encre)}
.jour.sans{opacity:.5}
.jour.signe{border-color:#1F7A4D;color:#1F7A4D}
.jour.manque{border-color:var(--alerte);color:var(--alerte)}

/* Fiche en deux colonnes */
.fiche{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;margin:6px 0 18px;max-width:70ch}
.fiche dt{font-size:13.5px;color:var(--gris);white-space:nowrap}
.fiche dd{margin:0}
.note{background:var(--surface);border-left:3px solid var(--trait);padding:10px 14px;max-width:70ch}

.juste{color:#1F7A4D;font-weight:600}
.faux{color:var(--alerte);font-weight:600}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .juste{color:#63C495}}

.pied{border-top:1px solid var(--trait);margin-top:44px;padding:20px 24px 40px;color:var(--gris);font-size:13.5px}

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

/* Choix d'une période avant d'éditer une feuille */
.periode{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:4px 0 6px}
.periode label{display:flex;align-items:center;gap:6px;font-weight:400;font-size:14.5px;margin:0}
.periode input[type=date],.periode select{padding:7px 9px;font:inherit;font-size:15px;
  background:var(--saisie,#fff);color:var(--encre);border:1px solid var(--trait)}
.periode .btn{margin-top:0}

/* Le choix de la demi-journée sur l'écran « Faire signer ».
   Deux liens plutôt qu'une liste déroulante : un lien s'applique en
   partant, il n'y a donc pas d'état « choisi mais pas appliqué ». Celle
   qu'on regarde est écrite en clair, pas seulement cochée quelque part. */
/* L'ARDOISE À SIGNER — LA SEULE CHOSE DE CETTE APPLICATION QUI NE SUIT
   PAS LE THÈME, ET C'EST DÉLIBÉRÉ.

   Elle a d'abord pris son fond dans « --surface », comme le reste. Sur
   un iPhone en mode sombre, --surface vaut #151E26 : un rectangle noir.
   Le stylo, lui, est noir en dur dans signer.js — parce que la
   signature part en JPEG sur fond blanc, et qu'un trait clair y
   deviendrait invisible. Encre noire sur fond noir : l'écran paraissait
   éteint, et rien ne disait pourquoi.

   La règle qui en sort : CE QU'ON VOIT EN SIGNANT DOIT ÊTRE CE QUI SERA
   ENREGISTRÉ. La pièce justificative est un trait sombre sur du blanc ;
   l'ardoise est donc blanche dans les deux thèmes, avec un cadre qui la
   détache du fond sombre. Toucher à l'un de ces trois réglages — ce
   fond, la couleur du stylo, le fond du JPEG — oblige à toucher aux
   trois. */
.ardoise{display:block;width:100%;max-width:520px;height:180px;
  background:#ffffff;border:2px dashed #b9c3cc;border-radius:10px;
  touch-action:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ardoise{border-color:#3c4c59}
}
:root[data-theme="dark"] .ardoise{border-color:#3c4c59}

.demis{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.demi-ici{font-size:16px;padding:5px 12px;border:1px solid var(--accent);
  background:var(--surface);color:var(--encre);border-radius:3px}

/* Saisie */
.accuse{background:#EAF5EE;border-left:3px solid #1F7A4D;color:#14603A;padding:9px 14px;
  font-size:14.5px;max-width:70ch}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .accuse{background:#12291F;color:#7FD1A6}}
.saisie{max-width:640px;margin-top:10px}
.champ{margin-bottom:14px}
.champ label{margin:0 0 4px}
/* Tous les types de champ qui portent du texte, pas seulement trois :
   un « type=email » ou « type=tel » laissé de côté gardait l'habillage
   du navigateur au milieu d'un formulaire habillé — on le voyait tout
   de suite, et on ne savait pas pourquoi. */
.champ input[type=text],.champ input[type=date],.champ input[type=time],
.champ input[type=email],.champ input[type=tel],.champ input[type=number],
.champ input[type=search],.champ input[type=url],
.champ select,.champ textarea{
  width:100%;padding:9px 11px;font:inherit;font-size:15.5px;
  background:var(--saisie,#fff);color:var(--encre);border:1px solid var(--trait)}
.champ textarea{resize:vertical}
/* Deux champs qui vont ensemble — les heures en centre et en entreprise,
   une date et une heure — se lisent mieux côte à côte qu'empilés : on
   voit du même coup d'œil qu'ils forment une paire. En dessous de la
   largeur d'un champ lisible, ils repassent l'un sous l'autre d'eux-mêmes.
   (Les pages de signature portent leur propre .rangee, en flex, dans leur
   <style> à elles : elles n'appellent pas cette feuille, il n'y a pas de
   collision — mais si un jour elles l'appelaient, il faudrait renommer.) */
.rangee{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
/* Un bouton dans un tableau ne se casse pas en trois lignes : la colonne
   qui le porte est étroite par nature, et « Ce mois seul » empilé sur
   trois lignes triple la hauteur de la rangée sans rien dire de plus. */
table .btn{white-space:nowrap}
.champ .aide{display:block;font-size:13px;color:var(--gris);margin-top:3px}
.champ .mot-faux{display:block;font-size:13px;color:var(--alerte);font-weight:600;margin-top:3px}
.champ-faux input,.champ-faux select,.champ-faux textarea{border-color:var(--alerte)}
.rythme{display:flex;gap:8px;flex-wrap:wrap}
.jour-rythme{display:flex;flex-direction:column;gap:3px;font-size:12.5px;font-weight:400;margin:0}
.jour-rythme span{color:var(--gris)}
.jour-rythme select{padding:6px 8px;font-size:14px}
.actions-saisie{display:flex;gap:10px;align-items:center;margin-top:20px;flex-wrap:wrap}
.actions-saisie .btn{margin-top:0;flex:0 0 auto;white-space:nowrap}
/* Un formulaire d'un seul bouton, glissé dans une rangée d'actions : il
   ne doit pas prendre plus de place que le bouton qu'il porte. */
.actions-saisie form{display:contents}

/* Une adresse de signature : longue, à recopier, jamais à relire. */
.adresse{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px}

/* Des formulaires d'une seule commande, alignés dans une cellule. */
form.enligne{display:inline-flex;gap:6px;align-items:center;margin:0 6px 4px 0}
.petit-btn{padding:5px 10px;font-size:13.5px}

/* La grille d'évaluation : elle se remplit souvent sur une tablette
   posée sur les genoux, d'où des cibles larges plutôt que jolies. */
table.grille-eval th{font-size:12.5px}
table.grille-eval td{vertical-align:middle}
table.grille-eval tr.bloquant td:first-child{font-weight:600}
label.coche{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 8px;cursor:pointer;min-width:44px;min-height:44px;justify-content:center}
label.coche span{font-size:11.5px;color:var(--gris)}
label.coche input{width:18px;height:18px;margin:0}
label.coche:has(input:checked){background:var(--accent);border-radius:7px}
label.coche:has(input:checked) span{color:var(--accent-texte,#231005);font-weight:700}

/* Le dépouillement d'un questionnaire : une barre par niveau, et les
   mots tels qu'ils ont été écrits. Aucun nom nulle part — c'est la
   contrepartie d'un questionnaire qu'on demande sincère. */
.repartition{display:flex;flex-direction:column;gap:4px;margin:6px 0 10px;max-width:560px}
.part{display:grid;grid-template-columns:120px 1fr 32px;gap:10px;align-items:center;font-size:13px}
.part-lib{color:var(--gris)}
.part-barre{background:var(--trait);height:12px;overflow:hidden}
.part-barre span{display:block;height:100%;background:var(--accent)}
.part-n{text-align:right;font-variant-numeric:tabular-nums;color:var(--gris)}
.verbatims{margin:6px 0 10px;padding-left:18px;max-width:66ch}
.verbatims li{margin-bottom:6px;font-size:14.5px}

/* Le positionnement : un QCM et des constats, remplis en face de la
   personne. Les propositions sont larges — on coche en parlant. */
.question{margin:0 0 16px;padding:0 0 12px;border-bottom:1px solid var(--trait)}
.question .enonce{margin:0 0 8px;font-weight:600}
label.prop{display:flex;gap:9px;align-items:flex-start;margin:0 0 5px;
  padding:8px 10px;border:1px solid var(--trait);cursor:pointer;
  font-weight:400;min-height:44px;background:var(--surface)}
label.prop input{margin:3px 0 0;width:18px;height:18px;flex:none}
label.prop:has(input:checked){border-color:var(--accent);background:var(--accent);
  color:var(--accent-texte,#231005);font-weight:600}
.constat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,240px);gap:10px;
  align-items:start;margin:0 0 6px}
.constat input[type=text]{padding:8px 10px;font:inherit;font-size:14px}
.constat.manquant label.prop{border-color:var(--alerte)}
@media (max-width:640px){.constat{grid-template-columns:1fr}}

/* Une barre de filtres qui porte ses compteurs. Elle remplace une
   rangée de tuiles là où les états sont trop nombreux pour tenir en
   ligne : ce sont des portes, pas des indicateurs. */
.filtres{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 4px}
.filtres a{display:inline-flex;align-items:baseline;gap:7px;padding:7px 12px;
  border:1px solid var(--trait);background:var(--surface);color:var(--encre);
  text-decoration:none;font-size:13.5px}
.filtres a b{font-variant-numeric:tabular-nums;font-size:14.5px}
.filtres a:hover{border-color:var(--accent)}
.filtres a.ici{border-color:var(--accent);background:var(--accent);color:var(--accent-texte)}
.filtres a.vide{color:var(--gris)}
.filtres a.vide b{color:var(--gris)}
/* Un compteur qui n'est pas une porte : même forme, mais rien à
   cliquer. Il ne prend donc ni bordure au survol ni curseur. */
.etat-compte{display:inline-flex;align-items:baseline;gap:7px;padding:7px 12px;
  border:1px solid var(--trait);background:var(--surface);color:var(--gris);font-size:13.5px}
.etat-compte b{font-variant-numeric:tabular-nums;font-size:14.5px;color:var(--encre)}
.etat-compte.a-faire b{color:var(--accent-fonce,#B4541F)}

/* L'entretien préalable du prospect : trois ou cinq choix courts, en
   rangée plutôt qu'en colonne — on les lit d'un coup d'œil pendant
   qu'on parle, et la grille tient sur un écran. Ils repassent en
   colonne sur un téléphone, où une rangée de cinq serait illisible. */
.rangee-choix{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.rangee-choix label.prop{margin:0;flex:1 1 auto;min-width:120px;justify-content:flex-start}
/* Le choix qui veut dire « pas de réponse » reste gris même coché : la
   couleur d'accent dit « voilà ce qui a été répondu », et l'absence de
   réponse n'est pas une réponse. */
label.prop.sans-reponse:has(input:checked){border-color:var(--trait);
  background:var(--surface);color:var(--gris);font-weight:400}
.question .commentaire{width:100%;padding:8px 10px;font:inherit;font-size:14px;margin-top:2px}
.question textarea{width:100%;padding:8px 10px;font:inherit;font-size:14.5px}
/* Une condition d'accès n'est pas une question comme les autres : elle
   ne se juge pas, elle se constate. Le liseré le dit sans crier. */
.question.bloquante{border-left:3px solid var(--trait);padding-left:11px}
@media (max-width:640px){.rangee-choix label.prop{flex:1 1 100%}}

/* ------------------------------------------------------------------
   LES SESSIONS EN COLONNES.
   Quatre temps du parcours plutôt qu'une liste triée par date : la
   question qu'on se pose en ouvrant cet écran n'est pas « laquelle est
   la plus récente », c'est « où en est chacune ».
   ------------------------------------------------------------------ */
.colonnes{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  align-items:start;margin:18px 0 8px}
.colonne{background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre);
  padding:14px 13px 13px;display:flex;flex-direction:column;gap:10px;min-width:0}
.colonne header{display:flex;flex-direction:column;gap:2px}
.colonne h2{margin:0;font-size:15px;letter-spacing:0;display:flex;align-items:baseline;gap:8px}
.colonne .compte{font-size:12.5px;font-weight:400;color:var(--gris);
  font-variant-numeric:tabular-nums}
.colonne header p{margin:0}
/* Un liseré de tête par colonne : le seul repère de couleur de l'écran,
   et il porte une information — l'avancement, pas la décoration. */
.colonne{border-top:3px solid var(--trait)}
.colonne.c-prevue{border-top-color:#9FBBD0}
.colonne.c-encours{border-top-color:var(--accent)}
.colonne.c-terminee{border-top-color:#1F7A4D}
.carte{border:1px solid var(--trait);background:var(--papier);padding:10px 11px;
  display:flex;flex-direction:column;gap:3px;min-width:0}
.carte .titre{display:block;font-weight:600;text-decoration:none;line-height:1.3;
  overflow-wrap:anywhere}
.carte .titre:hover{color:var(--accent)}
.carte p{margin:0;font-size:13px}
.carte .code{color:var(--gris);font-size:12.5px}
.carte .quand{font-variant-numeric:tabular-nums;color:var(--gris);font-size:12.5px}
.carte .chiffres-carte{font-size:13px}
.vide-colonne{margin:0;color:var(--gris);font-size:13px;font-style:italic}

/* ------------------------------------------------------------------
   LE PARCOURS D'UNE PROMOTION.
   Une ligne par stagiaire, une colonne par étape. On lit la ligne pour
   suivre quelqu'un, la colonne pour voir qui manque à l'appel.
   ------------------------------------------------------------------ */
table.parcours{min-width:900px}
table.parcours th{vertical-align:bottom;font-size:11px;white-space:nowrap;padding:8px 4px}
/* La colonne des noms s'appelait « qui ». C'est aussi la classe du coin
   droit de la barre du haut, dont la règle « .qui a { color:#fff } »
   s'appliquait ici : les noms des stagiaires étaient écrits en blanc
   sur blanc, présents dans la page et invisibles à l'écran. Une
   collision de noms de classe ne lève aucune erreur — elle se voit, ou
   elle ne se voit pas. D'où un nom qui n'appartient qu'à ce tableau. */
table.parcours th.nom-perso,table.parcours td.nom-perso{text-align:left;
  white-space:normal;min-width:150px;position:sticky;left:0;z-index:2;background:var(--surface);
  box-shadow:1px 0 0 var(--trait)}
table.parcours thead th.nom-perso{z-index:3;background:var(--papier)}
table.parcours tr.collectif th.nom-perso{background:var(--surface)}
table.parcours tr.collectif th{background:var(--surface);border-bottom:1px solid var(--trait);
  text-transform:none;letter-spacing:0;font-weight:400;padding-top:2px;padding-bottom:6px}
table.parcours td.etape{text-align:center;vertical-align:middle;padding:5px 3px}
.jeton{display:inline-block;font-size:11.5px;line-height:1.4;padding:3px 6px;
  border:1px solid var(--trait);color:var(--gris);text-decoration:none;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
a.jeton:hover{border-color:var(--accent);color:var(--encre)}
.jeton.fini{border-color:#1F7A4D;color:#1F7A4D}
.jeton.actif{border-color:var(--accent);color:var(--encre);font-weight:600}
.jeton.inerte{opacity:.55;font-style:italic}
td.e-manque{background:var(--alerte-fond)}
td.e-hors{opacity:.5}

/* Le tiroir Administration : ouvert par le navigateur lui-même, sans
   une ligne de script — la politique de sécurité du site interdit le
   code écrit à même la page, et un menu n'a pas besoin d'en avoir. */
.menu-admin{position:relative}
.menu-admin summary{list-style:none;cursor:pointer;color:#C3D0DB;font-size:14.5px;
  padding:4px 0;border-bottom:2px solid transparent}
.menu-admin summary::-webkit-details-marker{display:none}
.menu-admin summary::after{content:" ▾";font-size:11px;opacity:.8}
.menu-admin summary:hover{color:#fff}
.menu-admin summary.ici{color:#fff;border-bottom-color:var(--accent)}
.menu-admin .tiroir{position:absolute;z-index:20;top:100%;left:0;margin-top:6px;
  background:var(--surface);border:1px solid var(--trait);box-shadow:0 6px 18px rgba(16,24,32,.14);
  min-width:210px;display:flex;flex-direction:column;padding:5px 0}
.menu-admin .tiroir a{color:var(--encre);text-decoration:none;padding:8px 14px;font-size:14.5px}
.menu-admin .tiroir a:hover{background:var(--papier);color:var(--accent)}
/* Sur un téléphone, la barre du haut n'a pas la place d'une rangée de
   six entrées : elle s'enroule, et le tiroir s'ouvre en dessous plutôt
   qu'en flottant hors de l'écran. Sans cette règle, l'ajout du menu
   Administration faisait déborder la page entière sur le côté — le
   banc à l'écran l'a vu tout de suite. */
@media (max-width:760px){
  .barre-dedans{height:auto;padding:8px 0}
  .menu{margin-left:0;gap:14px;width:100%}
  .menu-admin{width:100%}
  .menu-admin .tiroir{position:static;box-shadow:none;margin-top:4px;min-width:0;width:100%}
}

/* ------------------------------------------------------------------
   LE CALENDRIER D'UNE SESSION.
   Une case par jour, et dans la case ce qui décide de la journée. On
   la lit d'un coup d'œil, on la règle d'un clic.
   ------------------------------------------------------------------ */
.mois{border:1px solid var(--trait);background:var(--surface);overflow:hidden;margin:14px 0 8px}
.entete-mois{display:grid;grid-template-columns:repeat(7,1fr);background:var(--papier);
  border-bottom:1px solid var(--trait)}
.entete-mois span{padding:6px 8px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gris);text-align:center}
.semaine{display:grid;grid-template-columns:repeat(7,1fr)}
.semaine + .semaine{border-top:1px solid var(--trait)}
.case-jour{border-left:1px solid var(--trait);padding:6px 7px 8px;min-height:104px;
  display:flex;flex-direction:column;gap:3px;min-width:0}
.case-jour:first-child{border-left:0}
.case-jour.hors-mois{opacity:.4}
.case-jour.aujourdhui{box-shadow:inset 0 0 0 2px var(--accent)}
.case-jour.horaire-a-part{box-shadow:inset 0 0 0 2px var(--gris)}
.case-jour .tete-jour{display:flex;align-items:baseline;gap:6px;text-decoration:none;
  border-bottom:1px solid transparent}
/* Seule la tête de jour CLIQUABLE se souligne au survol. Vue du dehors,
   elle n'est qu'un span : un soulignement au survol promettrait un lien
   qui n'existe pas. */
.case-jour a.tete-jour:hover{border-bottom-color:var(--accent)}
.case-jour .num{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}
.case-jour .nat{font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.05em}
.case-jour p{margin:0;font-size:11.5px;line-height:1.35}
.case-jour .ferie{color:var(--alerte);font-weight:600}
.case-jour .motif{color:var(--gris)}
.case-jour .heures{font-variant-numeric:tabular-nums;color:var(--encre);font-weight:600}
.case-jour .demi{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px;color:var(--gris)}
.case-jour .lettre{font-weight:700;color:var(--encre);font-size:10.5px}
.case-jour .qui-anime{color:var(--encre)}
.case-jour .qui-anime.a-signe{border-bottom:1px solid #1F7A4D}
.case-jour .sig-compte{margin-left:auto;font-variant-numeric:tabular-nums;
  border:1px solid var(--trait);padding:0 4px;font-size:10.5px}
.case-jour .sig-compte.complet{border-color:#1F7A4D;color:#1F7A4D}
/* Les natures : un fond très pâle, jamais une couleur pleine — on doit
   pouvoir lire le texte par-dessus, et l'imprimer si besoin. */
.case-jour.n-centre{background:var(--surface)}
.case-jour.n-entreprise{background:#FBF6EA}
.case-jour.n-examen{background:#EEF4F9}
.case-jour.n-ferie,.case-jour.n-conge{background:var(--papier)}
.case-jour.n-sans{background:var(--papier)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .case-jour.n-entreprise{background:#231D10}
  :root:not([data-theme="light"]) .case-jour.n-examen{background:#131E28}
}
@media (max-width:760px){
  /* Sept colonnes de 50 px ne se lisent pas : sur un téléphone, le mois
     devient une liste de jours, un par ligne. */
  .entete-mois{display:none}
  .semaine{grid-template-columns:1fr}
  .case-jour{border-left:0;border-top:1px solid var(--trait);min-height:0}
  .case-jour.hors-mois{display:none}
}

/* La recherche, à côté du bouton de création : les deux gestes qu'on
   fait en arrivant sur la liste. */
.barre-recherche{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0 6px}
.barre-recherche .btn{margin-top:0}
.recherche{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:260px}
.recherche input[type=search]{flex:1;min-width:200px;padding:9px 11px;font:inherit;font-size:15px;
  background:var(--surface);color:var(--encre);border:1px solid var(--trait)}
.recherche select{padding:8px 9px;font:inherit;font-size:14.5px;
  background:var(--saisie,#fff);color:var(--encre);border:1px solid var(--trait)}
.invisible{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.case-jour .demi.vide{color:var(--gris);font-style:italic;opacity:.7}

/* Les créneaux d'un stagiaire dans le calendrier : trois natures, trois
   marques discrètes. La couleur ne porte pas seule l'information — le
   mot est écrit à côté, pour qui ne distingue pas les teintes. */
.creneau{display:block;font-size:11px;line-height:1.3;padding:1px 5px;
  border-left:3px solid var(--trait);background:var(--papier);margin:0 0 2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.creneau.c-vehicule{border-left-color:var(--accent)}
.creneau.c-salle{border-left-color:#1F7A4D}
.creneau.c-theorique{border-left-color:#9FBBD0}
td .creneau{display:inline-block;white-space:normal}

/* Le menu qui passe d'une application à l'autre. La pastille du nom de
   l'application EST le déclencheur : elle disait déjà où l'on se
   trouve, elle ouvre maintenant les deux autres. Rien de plus dans la
   barre — c'est ce que la première version faisait déborder. */
/* La marque et son menu forment UN élément pour la barre : deux
   éléments séparés, c'était un écart de 16 px de plus, et la
   barre passait sur deux lignes à 1280 px de large. */
.marque-zone{display:flex;align-items:center;gap:7px;min-width:0}
.menu-apps{margin-left:0}
.menu-apps .tiroir{min-width:250px}
.menu-apps summary{font-weight:500;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;opacity:1;color:#fff;padding:0}
/* Le mot après « mabase.pro » — AE, FORMA, STAGES, RH, AGENDA, SCI — en
   capitales espacées comme dans la barre, de la couleur des carrés du M
   de son application (posée en ligne par nom_application_html ;
   Riadh, 24/09/2026). */
.appli-nom{font-style:normal;font-weight:600;font-size:.82em;text-transform:uppercase;letter-spacing:.11em;white-space:nowrap}
.menu-apps summary:hover{opacity:1;text-decoration:underline}
.menu-apps summary::after{content:" ▾";font-size:10px;letter-spacing:0}
.menu-apps summary .appli-nom{font-size:inherit}
.menu-apps .tiroir a.ici-appli{font-weight:600}
.menu-apps .tiroir a.ici-appli::after{content:" · ici";font-size:12px;opacity:.75;font-weight:400}
@media (max-width:760px){ .menu-apps .tiroir{position:absolute;min-width:200px;width:auto} }

/* La pastille, quand elle ne mène nulle part : un stagiaire n'a pas les
   deux autres applications à ouvrir. */
.marque-appli{font-weight:500;font-size:12.5px;letter-spacing:.11em;
  text-transform:uppercase;opacity:.72;color:#fff}

/* Une pièce que le centre n'a pas encore produite. Elle se voit, elle
   ne se clique pas : promettre un document absent ferait chercher. */
.carte-attente{opacity:.72;border-style:dashed}
.carte .entrer{font-size:13px;color:var(--accent);margin-top:4px}
.attente-note{font-style:italic}

/* ------------------------------------------------------------------
   L'ESPACE DU STAGIAIRE.
   Une grille de cartes, dont certaines s'ouvrent et d'autres attendent.
   Sans « text-decoration:none », toute la carte se souligne — titre,
   description et flèche — parce que la carte entière est un lien.
   ------------------------------------------------------------------ */
.cartes{display:grid;gap:10px;margin:10px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.cartes .carte{text-decoration:none;color:inherit}
.cartes .carte *{text-decoration:none}
.cartes .carte:hover{border-color:var(--accent)}
.cartes .carte strong{font-size:15px}
.carte-attente{opacity:.72;border-style:dashed}
.carte .entrer{font-size:13px;color:var(--accent);margin-top:4px}
.attente-note{font-style:italic}

/* ------------------------------------------------------------------
   LE CHRONO DES BILANS.

   Il se lit d'un coup d'œil, à un mètre, sur une tablette posée sur le
   tableau de bord d'une voiture. D'où le total en gros, l'étape en
   cours juste dessous, et la liste en petit. Le dépassement est la
   seule chose qui change de couleur : c'est la seule qui doive sauter
   aux yeux pendant qu'on regarde ailleurs.
   ------------------------------------------------------------------ */
.chrono{border:1px solid var(--trait);padding:14px 16px;margin:10px 0 18px}
.chrono-tete{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline}
.chrono-gros{font-size:30px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px}
.chrono-gros .petit{font-size:12.5px;font-weight:400}
.chrono-ici{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.chrono-ici b{font-size:14px}
.chrono-ici #chrono-etape{font-variant-numeric:tabular-nums;font-size:14px}
.chrono-depasse{color:var(--alerte);font-weight:600;font-size:12.5px}
.chrono-boutons{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.chrono-boutons .chrono-arme{border-color:var(--alerte);color:var(--alerte)}
.chrono-liste{list-style:none;padding:0;margin:10px 0 6px;
  display:flex;flex-direction:column;gap:2px}
.chrono-liste li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  font-size:13px;padding:3px 0;border-top:1px solid var(--trait)}
.chrono-liste li span{flex:1 1 180px;min-width:0}
.chrono-liste li b{font-variant-numeric:tabular-nums}
.chrono-liste li i{font-style:normal;font-size:12px}
.chrono-liste li em{font-style:normal}
.chrono-liste li.avenir{color:var(--gris)}
.chrono-liste li.encours{font-weight:600}

/* ------------------------------------------------------------------
   LA MARQUE DESSINÉE, dans la barre.
   Le M est écrit dans la page : il prend donc la couleur du texte de
   la barre, et il n'y a rien à recharger quand le thème change.
   ------------------------------------------------------------------ */
.marque{display:inline-flex;align-items:center;gap:7px}
.marque-m{width:21px;height:22px;flex:none;display:block}

/* ------------------------------------------------------------------
   PASSER D'UNE APPLICATION À L'AUTRE, DEPUIS LE TABLEAU DE BORD.

   La pastille de la barre ouvrait déjà ce menu, mais il fallait
   savoir qu'elle s'ouvrait : rien ne le disait. Le bloc ci-dessous
   met les quatre portes à plat sur le tableau de bord, celle où l'on
   se trouve comprise — sinon on clique dessus pour vérifier.
   ------------------------------------------------------------------ */
.applis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  margin:14px 0 6px}
.appli{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--trait);box-shadow:var(--ombre);
  padding:13px 15px}
.appli:hover{border-color:var(--accent)}
.appli .marque-m{width:29px;height:30px;color:var(--encre)}
.appli b{display:block;font-size:14.5px;letter-spacing:-.01em}
.appli b em{font-style:normal;font-weight:600}
.appli span{display:block;font-size:12px;color:var(--gris);margin-top:1px}
.appli.on-y-est{border-color:var(--accent);cursor:default}
.appli.on-y-est:hover{border-color:var(--accent)}
.marque-seule{display:inline-flex;align-items:center;gap:10px}
.marque-seule .marque-m{width:29px;height:30px}

/* Une case à cocher posée DANS une rangée de formulaire en ligne : elle
   ne prend pas la ligne pour elle, et son libellé reste lisible. */
label.case-enligne{display:inline-flex;align-items:center;gap:5px;font-weight:400;
  font-size:12px;color:var(--gris);margin:0}
label.case-enligne input{width:15px;height:15px;margin:0}

/* La porte qui passe outre une garde : fermée par défaut, et repliée
   sous le reste. Elle existe, mais elle ne se propose pas — c'est
   exactement la place qu'elle doit tenir. */
.passer-outre{margin-top:26px;border-top:1px solid var(--trait);padding-top:14px}
.passer-outre summary{cursor:pointer;font-size:13.5px;color:var(--gris);
  list-style:none;display:inline-flex;align-items:center;gap:6px}
.passer-outre summary::-webkit-details-marker{display:none}
.passer-outre summary::before{content:"▸";font-size:11px}
.passer-outre[open] summary::before{content:"▾"}
.passer-outre summary:hover{color:var(--encre)}
.tiroir-outre{margin-top:10px;padding:14px 16px;border:1px solid var(--alerte);
  background:var(--surface)}

/* La dernière colonne de l'écran des accès : deux boutons qui tiennent
   sur une ligne plutôt que de faire monter la rangée. */
td .enligne + .enligne{margin-left:4px}

/* L'APERÇU D'UN COURRIEL. Il porte ses propres styles en ligne — c'est
   un message, pas une page — et ce cadre ne fait que lui donner un fond
   et une bordure pour qu'on voie où il commence et où il finit. Le fond
   reste clair dans les deux thèmes : un courriel s'affiche tel quel
   chez qui le reçoit, et le montrer en sombre serait montrer autre
   chose que ce qui part. */
.apercu-courriel{background:#eceef1;border:1px solid var(--trait);border-radius:10px;
  padding:10px;margin:10px 0 4px;overflow-x:auto;color:#161c22}
.apercu-courriel a{pointer-events:none}
/* La ligne qu'on est en train de régler, dans une liste de réglages. */
tr.ici>td{background:var(--surface-2,rgba(238,123,69,.07))}


/* ------------------------------------------------------------------
   LE PASSAGE D'UNE APPLICATION À L'AUTRE, AU PIED DE LA PAGE

   En haut c'est un tiroir qu'il faut savoir ouvrir ; ici c'est écrit.
   On arrive au pied d'une page parce qu'on a fini d'y lire — c'est le
   moment où l'on va ailleurs, et c'est là qu'il faut le chemin.
   ------------------------------------------------------------------ */
.pied .qui-sommes-nous{margin:0 0 10px}
.pied-applis{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.pied-applis a{color:var(--gris);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px}
.pied-applis a:hover,.pied-applis a:focus-visible{color:var(--encre);
  border-bottom-color:var(--accent)}
@media (max-width:560px){.pied-applis{gap:4px 14px}}

/* ------------------------------------------------------------------
   LE MODÈLE SIMPLE — la séance étape par étape

   Chaque étape est un bloc autonome : on le remplit pendant qu'elle se
   déroule, souvent sur une tablette posée sur les genoux, et ce qui
   compte est de retrouver du premier coup d'œil OÙ l'on en est. D'où
   le cadre, le titre en tête et la rangée de niveaux au pied, toujours
   au même endroit.

   Les deux colonnes se replient l'une sous l'autre en dessous de
   720 px : côte à côte sur un téléphone, deux zones de texte de
   quarante caractères ne servent personne.
   ------------------------------------------------------------------ */
.etape-trame{border:1px solid var(--trait);background:var(--surface);
  padding:14px 16px 12px;margin:0 0 14px}
.etape-trame h3{margin:0 0 10px;font-size:16px;letter-spacing:-.01em}
.etape-trame h3 .petit{font-weight:400;margin-left:8px}
.saisie.deux-colonnes{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:0}
.saisie.deux-colonnes .champ{margin:0}
.etape-trame .niveaux-ligne{display:flex;flex-wrap:wrap;gap:10px 18px;
  align-items:center;margin:12px 0 0;padding-top:10px;
  border-top:1px solid var(--trait)}
@media (max-width:720px){
  .saisie.deux-colonnes{grid-template-columns:1fr}
}

/* ------------------------------------------------------------------
   L'ÉCRAN D'ÉVALUATION — confort de travail, demandé le 19/09/2026.

   1. LA BARRE DU CHRONO COLLE AU HAUT DE L'ÉCRAN. On descend dans la
      grille pendant la séance ; l'étape en cours, son temps, ce qui
      vient ensuite et le bouton « Étape suivante » restent sous la
      main. Compacte à dessein : elle mange le haut de l'écran pendant
      une heure, elle n'a pas le droit d'en prendre un quart.

   2. CHAQUE SECTION A SON FOND. Six teintes pâles qui tournent. Elles
      ne portent aucun sens — ni vert pour bien, ni rouge pour mal :
      une couleur qui voudrait dire quelque chose ferait croire à un
      jugement. Elles servent à une seule chose, savoir d'un coup d'œil
      dans quelle section on est en train d'écrire. Elles restent à
      l'écran : le document imprimé n'en porte pas.

   3. LA CASE D'OBSERVATION EN QUATRE : élève test et enseignant côte
      à côte, et dans chacun le positif à côté de l'à-améliorer. Sur
      une tablette en paysage, les quatre tiennent de front ; plus
      étroit, les deux colonnes se superposent, puis les quatre cases.
   ------------------------------------------------------------------ */
:root{
  --teinte-1:#EAF2FB; --teinte-1-trait:#C9DCF1;
  --teinte-2:#EAF6EE; --teinte-2-trait:#C6E3CF;
  --teinte-3:#FCF1E6; --teinte-3-trait:#EFD6BB;
  --teinte-4:#F2EEFA; --teinte-4-trait:#D9CFEE;
  --teinte-5:#E8F5F5; --teinte-5-trait:#C2E1E1;
  --teinte-6:#FAEEF1; --teinte-6-trait:#EDCFD6;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --teinte-1:#142231; --teinte-1-trait:#243B55;
    --teinte-2:#13251B; --teinte-2-trait:#244330;
    --teinte-3:#2A1F14; --teinte-3-trait:#4A3622;
    --teinte-4:#211B2E; --teinte-4-trait:#3A3052;
    --teinte-5:#122627; --teinte-5-trait:#224445;
    --teinte-6:#2A1920; --teinte-6-trait:#4A2C37;
  }
}
:root[data-theme="dark"]{
  --teinte-1:#142231; --teinte-1-trait:#243B55;
  --teinte-2:#13251B; --teinte-2-trait:#244330;
  --teinte-3:#2A1F14; --teinte-3-trait:#4A3622;
  --teinte-4:#211B2E; --teinte-4-trait:#3A3052;
  --teinte-5:#122627; --teinte-5-trait:#224445;
  --teinte-6:#2A1920; --teinte-6-trait:#4A2C37;
}
.teinte-1{background:var(--teinte-1);border-color:var(--teinte-1-trait)}
.teinte-2{background:var(--teinte-2);border-color:var(--teinte-2-trait)}
.teinte-3{background:var(--teinte-3);border-color:var(--teinte-3-trait)}
.teinte-4{background:var(--teinte-4);border-color:var(--teinte-4-trait)}
.teinte-5{background:var(--teinte-5);border-color:var(--teinte-5-trait)}
.teinte-6{background:var(--teinte-6);border-color:var(--teinte-6-trait)}
/* La spécificité doit battre « .etape-trame{background:surface} ». */
.etape-trame.teinte-1{background:var(--teinte-1)} .etape-trame.teinte-2{background:var(--teinte-2)}
.etape-trame.teinte-3{background:var(--teinte-3)} .etape-trame.teinte-4{background:var(--teinte-4)}
.etape-trame.teinte-5{background:var(--teinte-5)} .etape-trame.teinte-6{background:var(--teinte-6)}

.bloc-eval{border:1px solid var(--trait);padding:6px 16px 14px;margin:0 0 18px}
.bloc-eval > h2{margin-top:10px}
/* Dans un bloc teinté, les cartes de critère restent claires : c'est
   là qu'on clique, elles doivent ressortir du fond. */
.bloc-eval .etape-trame{background:var(--surface)}
.bloc-eval .grille-eval{background:var(--surface)}

/* La barre collante du chrono. */
.chrono-collant{position:sticky;top:0;z-index:30;background:var(--surface);
  border:1px solid var(--trait);box-shadow:0 3px 10px rgba(16,24,32,.12);
  padding:8px 14px;margin:0 0 16px}
.chrono-collant .chrono-tete{gap:4px 22px}
.chrono-collant .chrono-gros{font-size:21px;order:9;margin-left:auto}
.chrono-collant .chrono-boutons{align-items:center}
.chrono-collant .chrono-ici .etiquette{margin:0}
.chrono-collant .chrono-ici b{font-size:15px}
.chrono-collant .chrono-boutons{margin:6px 0 0}
.chrono-collant .chrono-boutons .btn{margin:0;padding-top:6px;padding-bottom:6px}
.chrono-ensuite{font-size:13px;color:var(--gris)}
.chrono-ensuite b{color:var(--encre);font-weight:600}
@media (max-width:720px){
  .chrono-collant .chrono-gros{margin-left:0;font-size:18px}
}

/* La case d'observation en quatre. */
.obs4-titre{margin:14px 0 6px;font-size:14.5px;letter-spacing:.01em}
.obs4{margin:10px 0 0}
.obs4-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.obs4-col{border:1px solid var(--trait);background:var(--surface);padding:8px 10px 4px}
.obs4-qui{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);margin:0 0 4px}
.obs4-sens{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.obs4-sens .champ{margin:0 0 6px}
.obs4-sens label{font-size:13px}
.obs4-sens textarea{min-height:5.2em}
.obs4-plus label::before{content:"+ ";font-weight:700}
.obs4-moins label::before{content:"→ ";font-weight:700}
.obs4-ante{margin:8px 0 0;padding:8px 10px;border:1px dashed var(--trait);background:var(--surface)}
.obs4-ante p{margin:4px 0 0}
@media (max-width:900px){ .obs4-grille{grid-template-columns:1fr} }
@media (max-width:560px){ .obs4-sens{grid-template-columns:1fr} }

/* Le dossier professionnel et les ECF. */
.gestes{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:12px 0}
.gestes .btn{margin:0}
.en-ligne{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 6px 4px 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.encart{border:1px solid var(--trait);background:var(--surface);padding:10px 14px;margin:12px 0}
.encart h3{margin:0 0 6px;font-size:15px}
.encart ul{margin:0;padding-left:20px}
.dp-exemple{border:1px solid var(--trait);background:var(--surface);padding:6px 12px 2px;margin:10px 0}
.dp-exemple > summary{cursor:pointer;padding:6px 0;list-style-position:outside}
.dp-exemple[open] > summary{margin-bottom:8px;border-bottom:1px solid var(--trait)}
.dp-titres input{width:100%;padding:7px 8px;font:inherit;font-size:14px;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre)}
.ecf-grille{display:grid;gap:6px;margin:6px 0 4px}
.ecf-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  border:1px solid var(--trait);background:var(--surface);padding:8px 10px}
.ecf-ligne label{margin:0;font-weight:400}
.ecf-res{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}
.ecf-ligne:has(.ecf-cp-choix input:not(:checked)) .ecf-res{opacity:.4}
.ecf-cp{list-style:none;padding:0;margin:4px 0 12px;font-size:14px}
.ecf-cp li{padding:3px 0}
.ecf-cp .marque{display:inline-block;width:1.4em;font-weight:700}
.ecf-cp .acquise .marque{color:#1F7A4D}
.ecf-cp .reste{color:var(--gris)}
.ecf-cases{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0}
.ecf-cases label{font-weight:400;margin:0}
.ecf-lu{border-top:1px solid var(--trait);padding:8px 0 2px}
.info-ecran{border-collapse:collapse;margin:8px 0 14px;font-size:14px;width:100%;max-width:720px}
.info-ecran th,.info-ecran td{border-bottom:1px solid var(--trait);padding:6px 8px;text-align:left;vertical-align:top}
.info-ecran th{width:32%;color:var(--gris);font-weight:600}
.info-ecran .vide{color:var(--alerte)}
@media (max-width:640px){ .ecf-ligne{grid-template-columns:1fr} }

/* L'espace du stagiaire : chaque section sur sa teinte. Les couleurs
   sont celles de l'écran d'évaluation (--teinte-1 à 6), redéfinies en
   thème sombre ; les cartes gardent leur fond propre et se détachent. */
.section-espace{border-width:1px;border-style:solid;padding:4px 16px 12px;margin:0 0 18px}
.section-espace > h2{margin-top:12px}
.section-espace .carte,.bloc-eval[class*="teinte-"] .dp-exemple,
.bloc-eval[class*="teinte-"] .ecf-ligne{background:var(--surface)}
@media (max-width:560px){ .section-espace{padding:2px 12px 10px} }

/* Les gestes de la fiche stagiaire, teintés par famille. Le sélecteur
   est plus précis que « .btn.discret » exprès : sans cela, le fond
   transparent du bouton discret l'emporterait sur la teinte. */
.onglets-fiche .btn.discret[class*="teinte-"]{color:var(--encre);font-weight:600}
.onglets-fiche .btn.teinte-1{background:var(--teinte-1);border-color:var(--teinte-1-trait)}
.onglets-fiche .btn.teinte-2{background:var(--teinte-2);border-color:var(--teinte-2-trait)}
.onglets-fiche .btn.teinte-3{background:var(--teinte-3);border-color:var(--teinte-3-trait)}
.onglets-fiche .btn.teinte-4{background:var(--teinte-4);border-color:var(--teinte-4-trait)}
.onglets-fiche .btn.teinte-5{background:var(--teinte-5);border-color:var(--teinte-5-trait)}
.onglets-fiche .btn[class*="teinte-"]:hover{filter:brightness(.96)}
/* L'onglet choisi, sur sa teinte claire, s'écrit en encre et pas en blanc (audit du 11/11/2026 : « Trame Pédago VL »
   illisible). Les onglets du bandeau ont leur propre fond : ils ne sont pas concernés. */
.onglets-fiche:not(.bdp-onglets) .btn.btn[class*="teinte-"]{color:var(--encre)}

/* La fiche stagiaire : chaque section sur sa teinte, comme l'espace du
   stagiaire. Les tableaux, cartes et champs gardent leur fond propre
   pour rester lisibles sur la teinte. */
.section-fiche{border-width:1px;border-style:solid;padding:4px 16px 14px;margin:0 0 18px}
.section-fiche > h2{margin-top:12px}
.section-fiche .carte,.section-fiche table,.section-fiche .tuile{background:var(--surface)}
@media (max-width:560px){ .section-fiche{padding:2px 12px 10px} }

/* Le bilan POEI, à la saisie. */
.poei-saisie .periode label{flex:1 1 220px}
.poei-saisie input.court{max-width:7em}
.poei-modules input{width:100%;padding:6px 8px;font:inherit;font-size:14px;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre)}
.poei-deux{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.poei-deux h3{font-size:15px;margin:10px 0 8px}
.poei-deux p{margin:0 0 8px}
.poei-case{display:inline-flex;gap:6px;align-items:center;font-weight:400;margin:0 8px 0 0}
@media (max-width:760px){ .poei-deux{grid-template-columns:1fr} }
.poei-saisie input[type=text]{padding:7px 9px;font:inherit;font-size:15px;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre);min-width:0;flex:1 1 auto}
.poei-saisie section > label,.poei-deux label:not(.poei-case){display:flex;gap:8px;align-items:center;margin:8px 0;font-weight:400}
.poei-saisie p input[type=text].court{width:4em;flex:0 0 auto}

/* Les familles de formation : CCP1 en bleu, CCP2 en vert, titre complet
   en violet — sur le tableau des sessions et dans la liste des
   stagiaires. Un peu plus soutenues que les teintes de section, pour se
   distinguer même sur une carte ; le mot est toujours écrit à côté. */
:root{
  --fam-ccp1:#D6E6FA; --fam-ccp1-trait:#7FA9DD;
  --fam-ccp2:#D5EFDD; --fam-ccp2-trait:#6DB585;
  --fam-titre:#E5DCF5; --fam-titre-trait:#9C86CF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fam-ccp1:#18304D; --fam-ccp1-trait:#3D6A9E;
    --fam-ccp2:#173424; --fam-ccp2-trait:#3C7A53;
    --fam-titre:#2B2342; --fam-titre-trait:#6B58A0;
  }
}
:root[data-theme="dark"]{
  --fam-ccp1:#18304D; --fam-ccp1-trait:#3D6A9E;
  --fam-ccp2:#173424; --fam-ccp2-trait:#3C7A53;
  --fam-titre:#2B2342; --fam-titre-trait:#6B58A0;
}
.carte.famille-ccp1{background:var(--fam-ccp1);border-color:var(--fam-ccp1-trait)}
.carte.famille-ccp2{background:var(--fam-ccp2);border-color:var(--fam-ccp2-trait)}
.carte.famille-titre{background:var(--fam-titre);border-color:var(--fam-titre-trait)}
.table-familles tr.famille-ccp1 > td{background:var(--fam-ccp1)}
.table-familles tr.famille-ccp2 > td{background:var(--fam-ccp2)}
.table-familles tr.famille-titre > td{background:var(--fam-titre)}
.pastille-famille{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:1px 7px;margin:0 6px 4px 0;border:1px solid var(--trait);
  background:var(--surface);color:var(--encre)}
.legende-familles{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px;font-size:13px}
.legende-familles span{padding:3px 10px;border:1px solid var(--trait);font-weight:600}
.legende-familles .famille-ccp1{background:var(--fam-ccp1);border-color:var(--fam-ccp1-trait)}
.legende-familles .famille-ccp2{background:var(--fam-ccp2);border-color:var(--fam-ccp2-trait)}
.legende-familles .famille-titre{background:var(--fam-titre);border-color:var(--fam-titre-trait)}
.carte .pastille-famille{align-self:flex-start}

/* Le programme détaillé. */
.prog-tete{border:1px solid var(--trait);background:var(--surface);padding:12px 16px;margin:10px 0 18px}
.prog-chiffre{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.prog-chiffre strong{font-size:30px;font-variant-numeric:tabular-nums}
.barre-prog{height:12px;background:var(--papier);border:1px solid var(--trait);margin:8px 0;overflow:hidden}
.barre-prog > span{display:block;height:100%;background:#2E8B57}
.barre-prog.petite{height:8px;margin:4px 0;min-width:120px}
.prog-parties th{width:auto;font-weight:600;color:var(--encre)}
.prog-parties td:nth-child(2){width:40%}
.prog-collant{position:sticky;top:0;z-index:5;background:var(--papier);padding:8px 0;border-bottom:1px solid var(--trait)}
.prog-partie{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:16px;margin:12px 0 4px}
.prog-theme{font-weight:600;font-size:14px;margin:12px 0 4px;color:var(--gris)}
.prog-ligne{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:center;
  background:var(--surface);border:1px solid var(--trait);padding:8px 10px;margin:0 0 6px}
.prog-etats{display:flex;gap:4px;flex-wrap:wrap}
.prog-etat{display:inline-flex;gap:5px;align-items:center;border:1px solid var(--trait);padding:4px 9px;
  font-size:13px;font-weight:400;margin:0;cursor:pointer;background:var(--surface)}
.prog-etat:has(input:checked){font-weight:700}
.prog-aborde:has(input:checked){background:#FFF1D6;border-color:#E0A33A;color:#5A3A00}
.prog-traite:has(input:checked){background:#DDF3E4;border-color:#2E8B57;color:#14502E}
.prog-rien:has(input:checked){background:var(--saisie,#fff)}
.prog-vus{list-style:none;padding:0;margin:0 0 6px}
.prog-vus li{padding:5px 0;border-bottom:1px dashed var(--trait);font-size:14.5px}
.prog-marque{display:inline-block;width:1.3em;font-weight:700}
.prog-vu-traite .prog-marque{color:#2E8B57}
.prog-vu-aborde .prog-marque{color:#C98A1B}
.prog-vu-rien{color:var(--gris)}
.prog-travail{background:var(--surface);border:1px solid var(--trait);padding:8px 12px;margin:0 0 10px}
.prog-fichiers{padding-left:18px}
@media (max-width:640px){ .prog-ligne{grid-template-columns:1fr} }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prog-aborde:has(input:checked){background:#3A2A0C;color:#F5D08A}
  :root:not([data-theme="light"]) .prog-traite:has(input:checked){background:#123222;color:#9FE0B5}
}
:root[data-theme="dark"] .prog-aborde:has(input:checked){background:#3A2A0C;color:#F5D08A}
:root[data-theme="dark"] .prog-traite:has(input:checked){background:#123222;color:#9FE0B5}
.prog-blocs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:8px 0 10px}
.prog-bloc{border:1px solid var(--trait);background:var(--papier);padding:8px 10px}
.prog-bloc .etiquette{display:block;font-size:12px;font-weight:700;letter-spacing:.04em}
.prog-bloc strong{font-size:22px;font-variant-numeric:tabular-nums}
.saisie.prog-saisie,.poei-saisie{max-width:none}
.prog-parties th{text-transform:none;letter-spacing:0;font-size:14px;color:var(--encre);background:transparent}
.info-ecran th{text-transform:none;letter-spacing:0;font-size:14px;background:transparent}

/* ------------------------------------------------------------------
   THÈMES SALLES — les 57 dossiers, le traitement de texte, la lecture
   seule. Voir lib/themes_salle.php.
   ------------------------------------------------------------------ */
.themes-liste{list-style:none;margin:16px 0;padding:0;display:grid;gap:6px}
.theme-dossier{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;
  padding:10px 14px;border:1px solid var(--trait);border-left-width:4px;background:var(--surface);
  color:var(--encre);text-decoration:none;border-radius:6px}
.themes-liste li:nth-child(6n+1) .theme-dossier{border-left-color:#7BA0E8}
.themes-liste li:nth-child(6n+2) .theme-dossier{border-left-color:#5FB8A6}
.themes-liste li:nth-child(6n+3) .theme-dossier{border-left-color:#E7C25C}
.themes-liste li:nth-child(6n+4) .theme-dossier{border-left-color:#C77DBB}
.themes-liste li:nth-child(6n+5) .theme-dossier{border-left-color:#EC8D5D}
.themes-liste li:nth-child(6n+6) .theme-dossier{border-left-color:#8FA3B3}
.theme-dossier:hover,.theme-dossier:focus-visible{background:var(--papier);border-color:var(--accent)}
.theme-num{font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;text-align:center;
  background:var(--papier);border:1px solid var(--trait);border-radius:5px;padding:3px 0}
.theme-titre{line-height:1.35}
.theme-etats{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
@media (max-width:640px){
  .theme-dossier{grid-template-columns:36px 1fr}
  .theme-etats{grid-column:2;justify-content:flex-start}
}

/* L'ÉDITEUR « COMME WORD » (Riadh, 29/10/2026) : barre en groupes, palettes,
   pages A4 posées sur un bureau gris avec une bande grise ENTRE les pages,
   notes de bas de page, barre d'état (page, caractères, zoom), encart
   d'observations à côté de chaque page. Rien de l'écran n'est enregistré. */
.redacteur{margin:0}
/* Les textes d'état écrits dans un attribut (voir afficher() dans actifs/redacteur.js). */
.texte-attr::before{content:attr(data-texte)}
.redacteur-barre{position:sticky;top:0;z-index:6;display:flex;flex-wrap:wrap;gap:4px 6px;padding:6px;
  background:var(--surface);border:1px solid var(--trait);border-radius:6px 6px 0 0}
.redacteur-groupe{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:center;padding-right:6px;border-right:1px solid var(--trait)}
.redacteur-groupe:last-of-type{border-right:0}
.redacteur-barre button,.redacteur-barre select{min-width:32px;height:32px;padding:0 7px;
  font:inherit;font-size:14px;color:var(--encre);background:var(--surface);border:1px solid transparent;
  border-radius:4px;cursor:pointer}
.redacteur-barre button:hover{background:var(--papier);border-color:var(--trait)}
.redacteur-barre button.actif,.redacteur-barre button[aria-pressed="true"]{background:#fde3d5;border-color:var(--accent)}
.redacteur-barre button:focus-visible,.redacteur-barre select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.redacteur-barre select{border-color:var(--trait);max-width:150px}
.redacteur-barre select[data-taille]{width:68px}
.redacteur-split{position:relative;display:inline-flex;align-items:stretch}
.redacteur-barre .redacteur-split>button:first-child{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0 6px;border-radius:4px 0 0 4px}
.redacteur-barre .redacteur-split>.redacteur-fleche{min-width:18px;padding:0 3px;border-radius:0 4px 4px 0;font-size:11px}
.redacteur-lettre{font-weight:700;line-height:1;font-size:15px}
.redacteur-surligneur{font-size:13px}
.redacteur-trait{display:block;width:18px;height:4px;border:1px solid rgba(0,0,0,.2);border-radius:1px}
.redacteur-palette{position:absolute;top:100%;left:0;z-index:20;margin-top:4px;padding:8px;width:244px;
  background:var(--surface);border:1px solid var(--trait);border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.redacteur-palette-grille{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;margin:6px 0}
.redacteur-barre .redacteur-palette-grille button{min-width:0;width:20px;height:20px;padding:0;border:1px solid rgba(0,0,0,.25);border-radius:2px}
.redacteur-barre .redacteur-palette-grille button:hover{outline:2px solid var(--accent);outline-offset:0}
.redacteur-barre .redacteur-palette-aucun{width:100%;text-align:left;border-color:var(--trait)}
.redacteur-palette-autre{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;cursor:pointer}
.redacteur-palette-autre input{width:44px;height:30px;padding:0;border:1px solid var(--trait)}
.redacteur-tableau-choix{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px;
  background:var(--papier);border:1px solid var(--trait);border-top:0}
.redacteur-tableau-choix input{width:64px}
.redacteur-page{min-height:420px;padding:28px 32px;background:#fff;color:#1b1b1b;
  border:1px solid var(--trait);border-top:0;line-height:1.55;overflow-wrap:anywhere;overflow-x:auto}
.redacteur-page:focus{outline:2px solid var(--accent);outline-offset:-2px}
.redacteur-page.redacteur-lu{border-top:1px solid var(--trait);min-height:0}
.redacteur-page h2{font-size:22px;color:#1F3864;margin:18px 0 8px}
.redacteur-page h3{font-size:18px;color:#2E5597;margin:16px 0 6px}
.redacteur-page h4{font-size:16px;color:#2E5597;margin:14px 0 6px}
.redacteur-page blockquote{margin:10px 0;padding:8px 14px;border-left:4px solid #bbb;background:#f5f5f5}
.redacteur-page table{min-width:0;width:auto;max-width:100%;border-collapse:collapse;margin:10px 0;font-size:15px}
.redacteur-page th,.redacteur-page td{border:1px solid #999;padding:6px 8px;min-width:40px;
  text-transform:none;letter-spacing:0;color:inherit}
.redacteur-page th{background:#eee;font-size:15px}
.redacteur-page img{max-width:100%;height:auto}
.redacteur-page hr{border:0;border-top:1px solid #999;margin:14px 0}
.redacteur-page.pinceau{cursor:copy}
hr.saut-page{border:0;height:0;margin:0;padding:0;break-after:page;page-break-after:always}
/* Les notes de bas de page : l'appel en exposant ; le bloc des notes (en fin de texte quand le script n'est pas là). */
sup.note-appel{font-size:.7em;line-height:0;color:#1F3864;font-weight:600;cursor:pointer;padding:0 1px}
.notes-bas-de-page{margin-top:18px;padding-top:8px;border-top:1px solid #999;font-size:.85em;counter-reset:note}
.notes-bas-de-page p.note{margin:2px 0}
.notes-bas-de-page p.note::before{content:attr(data-note) ". ";font-weight:600}
/* Le bureau et la feuille. */
.redacteur-bureau{position:relative}
.redacteur-cadre{position:relative}
.redacteur-feuille{position:relative}
.redacteur-page hr.saut-page{border:0;border-top:2px dashed #EC624B;height:0;margin:12px 0}
.redacteur-reperes,.redacteur-notes-pages{display:none}
.redacteur-intervalle{display:block;height:0;pointer-events:none;-webkit-user-select:none;user-select:none}
.redacteur:not(.mode-page) .redacteur-intervalle{display:none}
.redacteur-notes-fin{background:#fff;color:#1b1b1b;border:1px solid var(--trait);border-top:0;padding:8px 32px 14px}
.redacteur-notes-titre{margin:0 0 4px;padding-top:6px;border-top:1px solid #999;width:33%;font-size:12px;color:#5b6570}
.redacteur-note{display:flex;gap:6px;align-items:baseline;font-size:8.5pt;line-height:1.35;margin:0 0 2px;color:#1b1b1b}
.redacteur-note-num{font-size:.8em;vertical-align:super;font-weight:600;min-width:12px;color:#1F3864}
.redacteur-note-texte{flex:1;min-height:1.3em;outline:0;border-radius:2px}
.redacteur-note-texte[contenteditable]:focus{background:#fff8e6;box-shadow:0 0 0 1px #f2c38f}
.redacteur-note-texte[contenteditable]:empty::before{content:attr(data-vide);color:#9aa3ad;font-style:italic}
/* LE MODE PAGES : des feuilles A4 blanches, ombrées, séparées par l'intervalle gris du bureau. */
.redacteur.mode-page .redacteur-bureau{background:#d9dce1;border:1px solid var(--trait);border-top:0;padding:18px 12px;overflow-x:auto;overflow-y:hidden}
.redacteur.mode-page .redacteur-cadre{display:flex;gap:16px;justify-content:center;align-items:flex-start}
.redacteur.mode-page .redacteur-feuille{flex:none;width:210mm;background:transparent}
.redacteur.mode-page .redacteur-page{position:relative;z-index:1;background:transparent;border:0;padding:22mm 20mm 20mm;
  font-family:Arial,Helvetica,sans-serif;font-size:10.5pt;line-height:1.5;min-height:297mm;box-sizing:border-box;overflow:visible}
.redacteur.mode-page .redacteur-page:focus{outline:0}
.redacteur.mode-page .redacteur-page h2{font-size:1.43em}
.redacteur.mode-page .redacteur-page h3{font-size:1.15em}
.redacteur.mode-page .redacteur-page h4{font-size:1.05em}
.redacteur.mode-page .redacteur-page table,.redacteur.mode-page .redacteur-page th{font-size:.95em}
.redacteur.mode-page .redacteur-page hr.saut-page{border-top-color:transparent;margin:0}
.redacteur.mode-page .redacteur-reperes{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
.redacteur-fond-page{position:absolute;left:0;right:0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.08)}
.redacteur-num-page{position:absolute;right:20mm;bottom:9mm;font:11px/1 system-ui,sans-serif;color:#9aa3ad}
.redacteur.mode-page .redacteur-notes-pages{display:block;position:absolute;inset:0;z-index:2;pointer-events:none}
.redacteur-notes-page{position:absolute;left:20mm;right:20mm;pointer-events:auto;padding-top:7px}
.redacteur-notes-page::before{content:"";position:absolute;top:2px;left:0;width:33%;border-top:1px solid #8a8f96}
.redacteur-notes-page.redacteur-mesure{visibility:hidden;top:0}
.redacteur.mode-page .redacteur-notes-fin{display:none}
/* La barre d'état, comme celle de Word : page, caractères, affichage et zoom. */
.redacteur-etatbar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;justify-content:space-between;
  padding:4px 8px;background:var(--surface);border:1px solid var(--trait);border-top:0;border-radius:0 0 6px 6px;font-size:13px;color:var(--gris)}
.redacteur-etat-texte{display:inline-flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums}
.redacteur-etat-texte [data-etat-car].hors-objectif{color:var(--alerte);font-weight:600}
.redacteur-vue{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}
.redacteur-zoom{display:inline-flex;flex-wrap:wrap;gap:2px;align-items:center}
.redacteur-etatbar button{min-width:30px;height:30px;padding:0 8px;font:inherit;font-size:13px;color:var(--encre);
  background:var(--surface);border:1px solid var(--trait);border-radius:4px;cursor:pointer}
.redacteur-etatbar button:hover{background:var(--papier)}
.redacteur-etatbar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.redacteur-etatbar button:disabled{opacity:.45;cursor:default}
.redacteur-etatbar output{min-width:48px;text-align:center;font-variant-numeric:tabular-nums;color:var(--encre)}
.redacteur-lecture .redacteur-etatbar{border-top:1px solid var(--trait);border-radius:0 0 6px 6px}
.redacteur-lecture:not(.mode-page) .redacteur-page.redacteur-lu{border-top:1px solid var(--trait)}
/* L'ENCART D'OBSERVATIONS, à droite de chaque page (sous la page sur petit écran). */
.redacteur-marge{position:relative;flex:none;width:270px}
.redacteur.obs-dessous .redacteur-cadre{display:block}
.redacteur.obs-dessous .redacteur-feuille{margin:0 auto}
.redacteur.obs-dessous .redacteur-marge{position:absolute;inset:0;width:auto;pointer-events:none}
.redacteur.obs-dessous .redacteur-obs{pointer-events:auto}
.redacteur:not(.mode-page) .redacteur-marge{display:none}
.redacteur-obs{position:absolute;left:0;right:0;box-sizing:border-box;overflow:auto;padding:8px 10px;background:var(--surface);color:var(--encre);
  border:1px solid var(--trait);border-left:5px solid #b9c2cb;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.15);font-size:13px}
.redacteur-obs.etat-valide{border-left-color:#1e8e4e}
.redacteur-obs.etat-non-valide{border-left-color:#c62828}
.redacteur-obs.fixe{position:static;margin:8px 0}
.obs-tete{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-bottom:6px}
.obs-etat{display:inline-block;padding:2px 9px;border-radius:999px;font-weight:700;font-size:13px}
.obs-etat.valide{background:#e3f4ea;color:#14753d;border:1px solid #1e8e4e}
.obs-etat.non-valide{background:#fdecec;color:#b71c1c;border:1px solid #c62828}
.obs-etat.aucun{background:var(--papier);color:var(--gris);border:1px solid var(--trait);font-weight:600}
.obs-par{font-size:11px;color:var(--gris);width:100%}
.obs-fil{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.obs-msg{padding:5px 7px;border-radius:5px;background:var(--papier)}
.obs-msg.formateur{background:#eef3fb}
.obs-msg.stagiaire{background:#fff6ec}
.obs-qui{margin:0;font-size:12px}
.obs-qui span{color:var(--gris)}
.obs-mini.valide{color:#14753d}
.obs-mini.non-valide{color:#b71c1c}
.obs-texte{margin:3px 0 0;white-space:normal;overflow-wrap:anywhere}
.obs-extrait{margin:3px 0 0;font-size:11px;color:var(--gris);font-style:italic}
.obs-vide{margin:0 0 6px;color:var(--gris);font-size:12px}
.obs-saisie textarea{width:100%;box-sizing:border-box;min-height:52px;font:inherit;font-size:13px;resize:vertical}
.obs-gestes{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.obs-gestes .btn{min-height:32px;padding:3px 9px;font-size:13px}
.obs-message{margin:3px 0 0;min-height:1em}
.redacteur-obs-liste{margin:12px 0}
.redacteur-obs-liste h3{margin:0 0 4px}
.redacteur-pied{margin-top:10px}
@media (max-width:700px){
  .redacteur-barre button,.redacteur-barre select,.redacteur-etatbar button{min-height:44px;min-width:44px}
  .redacteur-barre{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .redacteur-groupe{flex-wrap:nowrap}
  .redacteur-palette{position:fixed;left:8px;right:8px;top:auto;bottom:70px;width:auto}
  .redacteur-barre .redacteur-palette-grille button{width:100%;height:28px}
  .obs-gestes .btn{min-height:44px}
  /* Au téléphone, la barre d'état ne colle pas en bas : elle mangerait l'écran. */
  .redacteur-etatbar{position:static;gap:4px 8px}
  .redacteur-zoom button[data-zoom="page"]{font-size:0}
  .redacteur-zoom button[data-zoom="page"]::before{content:"▯ Page";font-size:13px}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .redacteur.mode-page .redacteur-bureau{background:#2a333c}
  :root:not([data-theme="light"]) .redacteur-barre button.actif{background:#4a2a1a}
  :root:not([data-theme="light"]) .obs-msg.formateur{background:#1b2a3a}
  :root:not([data-theme="light"]) .obs-msg.stagiaire{background:#33261a}
}
:root[data-theme="dark"] .redacteur.mode-page .redacteur-bureau{background:#2a333c}
:root[data-theme="dark"] .obs-msg.formateur{background:#1b2a3a}
:root[data-theme="dark"] .obs-msg.stagiaire{background:#33261a}
.alerte-texte{color:var(--alerte)}
.commentaire{border-top:1px solid var(--trait);padding-top:8px;margin-top:8px}

.consultation{position:relative;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.consultation img{pointer-events:none;-webkit-user-drag:none}
.consultation-bandeau{display:inline-block;font-size:13px;padding:3px 10px;border-radius:999px;
  background:var(--alerte-fond);color:var(--alerte);margin-top:18px}
.consultation-feuille{position:relative;overflow:hidden}
.consultation-filigrane{position:absolute;inset:-20%;z-index:2;pointer-events:none;display:flex;flex-wrap:wrap;
  gap:70px 90px;transform:rotate(-24deg);opacity:.09;color:#000;font-size:15px;font-weight:700;
  align-content:flex-start;padding:30px}
.consultation-filigrane span{white-space:nowrap}
.consultation.voile .consultation-feuille{filter:blur(12px)}
.consultation-imprime{display:none}

@media print{
  .barre,.menu,.ecran-seul,.redacteur-barre,.redacteur-tableau-choix,.redacteur-pied,.onglets-fiche,.fil,
  .accuse,.alerte,footer{display:none !important}
  .redaction-zone{border:0 !important;background:none !important;padding:0 !important}
  .redacteur-page{border:0;padding:0;min-height:0}
  .redacteur-bureau{background:none !important;border:0 !important;padding:0 !important}
  .redacteur-feuille{width:auto !important;box-shadow:none !important;zoom:1 !important}
  .redacteur-reperes,.redacteur-page hr.saut-page{border:0 !important}
  .redacteur-reperes{display:none !important}
  /* Rien de l'écran ne s'imprime : ni l'encart d'observations (29/10/2026), ni la barre d'état,
     ni les intercalaires des pages. L'impression fidèle (notes en bas de page) est le PDF. */
  .redacteur-marge,.redacteur-obs,.redacteur-obs-liste,.redacteur-etatbar,.redacteur-palette,.redacteur-intervalle,.redacteur-fond-page{display:none !important}
  .redacteur.mode-page .redacteur-notes-pages{display:none !important}

  /* Un document en lecture seule ne s'imprime pas : la page imprimée
     ne porte que la phrase qui le dit. */
  body:has(.consultation) main > *{display:none !important}
  body:has(.consultation) .consultation-imprime{display:block !important;font-size:18px;margin-top:40px}
}
.visionneuse{display:flex;flex-direction:column;align-items:center;gap:14px;padding:16px;background:#e9ecef;
  border:1px solid var(--trait)}
.visionneuse-page{max-width:100%;height:auto;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.qcm-questions{border:1px solid var(--trait);border-radius:6px;padding:12px 16px;margin:14px 0;background:var(--surface)}
.qcm-question{border-top:1px dashed var(--trait);padding-top:10px;margin-top:10px}
.qcm-question:first-of-type{border-top:0;margin-top:0}
.qcm-choix{display:grid;gap:6px;padding-left:22px}
.qcm-choix li{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qcm-choix input[type="text"]{flex:1 1 260px}
.qcm-bonne{font-size:13px;color:var(--gris);white-space:nowrap}
.qcm-corrige{display:grid;gap:12px;padding-left:22px;position:relative;z-index:3}
.qcm-corrige fieldset{border:0;padding:0;margin:0}
.qcm-corrige legend{padding:0;margin-bottom:6px}
.qcm-option{display:flex;gap:8px;align-items:flex-start;padding:4px 0;cursor:pointer}
.qcm-bon{font-weight:600}
.qcm-repondre{position:relative;z-index:3;padding:10px 32px 20px;background:#fff;color:#1b1b1b}
.consultation-feuille > .qcm-corrige,.consultation-feuille > p{padding:0 32px;background:#fff;color:#1b1b1b}

/* La progression du programme, sur les cartes des sessions et l'accueil. */
.barre-session{display:block;margin-top:8px;text-decoration:none;color:var(--encre)}
.barre-session-texte{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:13px}
.barre-session-texte strong{font-variant-numeric:tabular-nums}
.barre-session .barre-prog.petite{display:block;min-width:0;margin:3px 0 0;height:9px}
.barre-session:hover .barre-prog{border-color:var(--accent)}
.progression-sessions{display:grid;gap:10px;align-items:start;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-bottom:22px}
.progression-session{border:1px solid var(--trait);background:var(--surface);padding:10px 12px;border-radius:6px}
.progression-session p{margin:0}
.progression-session.famille-ccp1{background:var(--fam-ccp1);border-color:var(--fam-ccp1-trait)}
.progression-session.famille-ccp2{background:var(--fam-ccp2);border-color:var(--fam-ccp2-trait)}
.progression-session.famille-titre{background:var(--fam-titre);border-color:var(--fam-titre-trait)}

/* Le calendrier : régler une journée d'un geste (en centre / en entreprise). */
.lecteur-seul{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mois{overflow:visible}
.case-jour{position:relative}
.rapide{position:absolute;top:5px;right:5px;z-index:4}
.rapide > summary{list-style:none;cursor:pointer;font-size:11px;padding:1px 6px;border:1px solid var(--trait);
  border-radius:4px;background:var(--surface);color:var(--gris);opacity:0;transition:opacity .12s}
.rapide > summary::-webkit-details-marker{display:none}
.case-jour:hover .rapide > summary,.rapide[open] > summary,.rapide > summary:focus-visible{opacity:1}
.rapide > summary:focus-visible{outline:2px solid var(--accent)}
@media (hover:none){.rapide > summary{opacity:1}}
.rapide-panneau{position:absolute;top:24px;left:0;width:250px;z-index:20;background:var(--surface);
  border:1px solid var(--trait);border-radius:8px;box-shadow:0 8px 24px rgba(16,24,32,.18);padding:10px 12px;
  display:grid;gap:8px;font-size:14px}
.semaine .case-jour:nth-child(n+4) .rapide-panneau{left:auto;right:0}
.rapide-date{margin:0;font-weight:700;font-size:13px}
.rapide-ou{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rapide-choix{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--trait);border-radius:6px;cursor:pointer;font-size:13px}
.rapide-choix:has(input:checked){border-color:var(--accent);background:var(--saisie,#fff);font-weight:600}
.rapide-formateurs{border:0;margin:0;padding:0;display:grid;gap:3px;max-height:220px;overflow:auto}
.rapide-formateurs legend{font-size:12px;color:var(--gris);padding:0;margin-bottom:2px}
.rapide-formateurs label{display:flex;gap:6px;align-items:center;font-size:13px;cursor:pointer}
.rapide-tuteur{margin:0}
.rapide-gestes{display:flex;gap:12px;align-items:center;margin:0}
.tuteur-jour{font-size:12px;color:var(--gris);font-style:italic}
@media (max-width:700px){
  .rapide-panneau,.semaine .case-jour:nth-child(n+4) .rapide-panneau{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;
    max-height:80vh;overflow:auto}
}
.tuteur-jour{font-style:normal;overflow-wrap:anywhere;min-width:0;display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;margin:2px 0 0}
.tuteur-nom{font-size:12px;color:var(--encre)}
.tuteur-manque{font-size:12px;font-weight:600;color:var(--alerte)}
.rapide-tuteur p{margin:0 0 4px}
.totaux-heures{margin-top:18px}
.table-totaux{min-width:560px}
.table-totaux td.chiffres{font-variant-numeric:tabular-nums;white-space:nowrap}
.table-totaux th[scope="row"]{text-transform:none;letter-spacing:0;font-size:14px;color:var(--encre);background:var(--surface);font-weight:600}

/* L'examen d'un candidat (21/09/2026). */
.saisie.deux-colonnes .pleine-largeur,.saisie.deux-colonnes .actions-saisie{grid-column:1/-1}
.deux-blocs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px}
.deux-blocs .etape-trame{margin:0}
@media (max-width:720px){.deux-blocs{grid-template-columns:1fr}}
.liste-simple{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.liste-simple li{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.envoi-convocation{margin:8px 0}
.scan-entree{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.scan-option{display:block;margin-top:8px;font-size:13px}
.scan-pages{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.scan-pages figure{margin:0;position:relative;border:1px solid var(--trait);background:var(--surface);padding:3px}
.scan-pages img{display:block;width:84px;height:112px;object-fit:cover}
.scan-pages figcaption{font-size:11px;text-align:center}
.scan-pages button{position:absolute;top:2px;right:2px;font:inherit;font-size:11px;padding:1px 5px;cursor:pointer}
.recap-taux td.chiffres,.recap-taux th.chiffres{text-align:right;font-variant-numeric:tabular-nums}
.recap-taux td.chiffres strong{display:block}
.jauge{display:block;height:4px;background:var(--trait);margin:3px 0 2px auto;width:72px}
.jauge span{display:block;height:100%;background:currentColor;opacity:.55}

/* MES FORMATIONS, dans l'espace du stagiaire (24/09/2026) : une personne, un
   espace, un onglet par formation suivie. */
.onglets.mes-formations{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--trait);margin:4px 0 18px}
.onglets.mes-formations .onglet{padding:8px 16px;margin-bottom:-2px;border-bottom:2px solid transparent;color:var(--gris);font-weight:600;text-decoration:none}
.onglets.mes-formations .onglet .petit{font-weight:400;margin-left:4px}
.onglets.mes-formations .onglet:hover{color:var(--encre)}
.onglets.mes-formations .onglet.choisi{color:var(--encre);border-bottom-color:var(--accent)}

/* ------------------------------------------------------------------
   EN COLONNES, DANS LA HAUTEUR DE L'ÉCRAN (Riadh, 24/09/2026).

   « Une présentation en colonnes pour m'éviter de défiler » : le menu
   passe à gauche, fixe ; les fiches se lisent en trois colonnes de
   panneaux à bandeau sombre, comme l'administration TOLV qu'il a sous
   les yeux tous les jours. Sur un écran étroit, les colonnes
   s'empilent : rien ne se perd, tout se lit.
   ------------------------------------------------------------------ */
.charpente{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:start}
.lateral{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);
  border-right:1px solid var(--trait);padding:12px 10px 24px}
.lateral a,.lateral summary{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
  text-decoration:none;font-weight:600;color:var(--gris);font-size:14px;cursor:pointer}
.lateral a:hover,.lateral summary:hover{background:var(--papier);color:var(--encre)}
.lateral a.ici{background:var(--encre);color:#fff}
.lateral summary.ici{color:var(--encre)}
.lateral .groupe{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);padding:14px 12px 4px}
.lateral .compteur{margin-left:auto;background:var(--accent);color:var(--accent-texte);font-size:11px;font-weight:700;
  padding:1px 7px;border-radius:999px}
.lateral details{margin:0}
.lateral summary{list-style:none}
.lateral summary::-webkit-details-marker{display:none}
.lateral summary::after{content:"▾";margin-left:auto;font-size:11px;opacity:.6}
.lateral details[open] summary::after{content:"▴"}
.lateral details .tiroir{position:static;box-shadow:none;border:0;background:none;padding:0 0 0 10px;min-width:0}
.lateral .sortie{margin-top:14px;padding-top:10px;border-top:1px solid var(--trait)}
.contenu{padding:0 24px 40px;min-width:0;max-width:1480px}
.contenu>h1:first-child,.contenu>.fil{margin-top:18px}
@media (max-width:900px){
  .charpente{grid-template-columns:1fr}
  .lateral{position:static;height:auto;display:flex;flex-wrap:wrap;gap:2px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--trait)}
  .lateral .groupe{display:none}
  .lateral details{display:contents}
  .lateral summary{display:none}
  .lateral details .tiroir{display:contents}
  .lateral .sortie{margin:0;padding:0;border:0}
}

/* La tête d'une fiche : le titre à gauche, les gestes à droite. */
.tete-fiche{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 10px}
.tete-fiche h1{margin:14px 0 4px}
.tete-fiche .sous-titre{margin:0 0 6px}
.tete-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:18px}

/* Les trois colonnes. */
.trois{display:grid;grid-template-columns:290px minmax(0,1fr) 300px;gap:14px;align-items:start;margin-top:10px}
.trois-gauche,.trois-droite{display:flex;flex-direction:column;gap:14px;min-width:0}
.trois-centre{min-width:0}
.trois-centre.pile{display:flex;flex-direction:column;gap:14px}
.prog-detail summary{cursor:pointer;color:var(--gris);font-weight:600;margin:6px 0}
.panneau .cartes{margin:6px 0}
.panneau .jours{margin:4px 0 6px}
@media (max-width:1180px){.trois{grid-template-columns:1fr 1fr}.trois-centre{grid-column:1/-1;grid-row:1}}
@media (max-width:760px){.trois{grid-template-columns:1fr}}

/* Un panneau : bandeau sombre, contenu dessous. */
.panneau{background:var(--surface);border:1px solid var(--trait);border-radius:10px;box-shadow:var(--ombre);overflow:hidden;margin:0}
.panneau>h2{margin:0;padding:8px 14px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--plein);
  color:#fff;display:flex;align-items:center;gap:8px;line-height:1.4}
.panneau>h2 .n{margin-left:auto;font-weight:500;letter-spacing:0;text-transform:none;color:#C3D0DB;font-size:12.5px}
.panneau .dedans{padding:12px 14px}
.panneau .dedans>p:first-child{margin-top:0}
.panneau .dedans>p:last-child{margin-bottom:0}
.panneau .sous-panneau{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin:14px 0 6px}
.panneau .saisie .champ{margin:6px 0}
.panneau .actions-saisie{margin:8px 0 0}
.panneau .chiffre{display:flex;align-items:baseline;gap:8px;margin:0 0 4px}
.panneau .chiffre b{font-size:30px;letter-spacing:-.02em;line-height:1}
.panneau .chiffre span{color:var(--gris);font-size:13.5px}
.panneau .jauge.large{width:100%;height:7px;border-radius:999px;margin:4px 0 12px;overflow:hidden}
.fiche-dl{margin:0;display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:5px 12px;font-size:13.5px}
.fiche-dl dt{color:var(--gris)}
.fiche-dl dd{margin:0;font-weight:600;min-width:0;overflow-wrap:anywhere}
.panneau .jour-stage{margin:10px 0 0;padding-top:8px;border-top:1px solid var(--trait);font-size:13.5px}
.panneau .jour-stage b{color:#1F7A4D}
.duo{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.rond{width:34px;height:34px;border-radius:50%;background:var(--papier);display:grid;place-items:center;font-weight:700;color:var(--gris);flex:none;font-size:13px}
.duo small{display:block;color:var(--gris)}
.liste-actions{display:flex;flex-direction:column;gap:8px}
.liste-actions>.btn{text-align:left;display:flex;align-items:center;gap:8px;white-space:normal}
.liste-actions>.btn small{margin-left:auto;font-weight:500;font-size:11.5px;white-space:nowrap;opacity:.8}
.btn.accent{background:var(--accent);color:var(--accent-texte);border-color:var(--accent)}
.ligne-doc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13.5px}
.ligne-doc strong{width:100%;font-size:13px}
.ligne-doc .btn{padding:4px 9px;font-size:12.5px}
.ligne-doc form.en-ligne{display:inline}
.liste-actions details.menu-admin{margin:2px 0 0}
.liste-actions details.menu-admin summary{padding:6px 0;font-weight:600;color:var(--gris)}
.liste-actions details.menu-admin summary::after{content:" ▾";font-size:10px}
.liste-actions details.menu-admin .docs-individuels{margin:6px 0 0}
.liste-actions details.menu-admin .saisie{margin-top:6px}

/* Les stagiaires, deux par ligne. */
.stagiaires-deux{display:grid;grid-template-columns:1fr 1fr}
.stg{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:2px 8px;padding:8px 12px;border-bottom:1px solid var(--trait);align-items:center;font-size:13.5px}
.stagiaires-deux .stg:nth-child(odd){border-right:1px solid var(--trait)}
.stg.annule{opacity:.55}
.stg .num{color:var(--gris);font-size:12px;font-variant-numeric:tabular-nums}
.stg .nom{font-weight:700;text-decoration:none;min-width:0;overflow-wrap:anywhere}
.stg .nom:hover{text-decoration:underline}
.stg .nom small{font-weight:500;color:var(--gris);font-size:12.5px}
.stg .icones{display:flex;gap:5px;grid-column:2;color:var(--gris);font-size:11.5px;align-items:center;flex-wrap:wrap}
.stg .icones i,.legende i{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:5px;background:var(--papier);font-style:normal;font-size:11px;font-weight:600}
.stg .icones i.ok,.legende i.ok{background:#E5F3EB;color:#1F7A4D}
.stg .icones i.ko,.legende i.ko{background:var(--alerte-fond);color:var(--alerte)}
.stg .icones i.att,.legende i.att{background:#FFF2D9;color:#8F5400}
.stg .paie{grid-row:1/3;grid-column:3;text-align:right;font-size:12px;color:var(--gris);white-space:nowrap}
.stg .paie b{display:block;font-size:13px;color:var(--encre)}
.stg .paie.du{color:var(--alerte)}
.stg .paie.du b{color:var(--alerte)}
.legende{padding:8px 12px;margin:0;font-size:12px;color:var(--gris);display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--trait)}
.legende i{min-width:16px;height:16px;font-size:10px;margin-right:2px}
@media (max-width:640px){.stagiaires-deux{grid-template-columns:1fr}.stagiaires-deux .stg:nth-child(odd){border-right:0}}
/* Dans un panneau, tout est plus serré : boutons, champs, marges. */
.panneau .btn{margin-top:0;padding:6px 11px;font-size:13px}
.panneau .btn.discret{background:var(--surface)}
.panneau .ligne-doc .btn{padding:4px 9px;font-size:12.5px}
.panneau .ligne-doc{margin:2px 0}
.panneau .ligne-doc strong{margin-bottom:0}
.panneau .ligne-doc form.en-ligne button{width:auto}
.panneau input[type=text],.panneau input[type=date],.panneau select,.panneau textarea{padding:6px 8px;font-size:13.5px}
.panneau .champ{margin:0 0 8px}
.panneau .champ label,.panneau label.champ{font-size:13px;font-weight:600;display:block}
.panneau label.champ select{width:100%;margin-top:3px;font-weight:400}
.panneau .periode{gap:8px}
.panneau .periode label{font-size:13px}
.panneau .periode input[type=text]{width:72px}
.panneau .aide{font-size:12px;margin:6px 0 0}
.panneau .tete-actions .btn{margin-top:0}
.tete-actions .btn{margin-top:0}
.trois-gauche .liste-actions>.btn.accent{justify-content:center;font-size:14px;padding:9px 12px}

/* ---- ARRONDIS : les onglets et blocs des fiches, à l'image de la colonne de gauche ---- */
.btn,.liste-actions>.btn,.tete-actions .btn,.ligne-doc .btn,.panneau .btn{border-radius:8px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=time],input[type=tel],input[type=url],select,textarea{border-radius:8px}
label.coche{border-radius:8px}
.alerte,.note,.tuile,.carte,.cartes .carte,.bloc-teinte,.tuiles-argent>div,.encart,.sous-panneau,.ligne-doc,.jours>*,.onglets-fiche .btn{border-radius:8px}
.pastille,.jeton,.etiquette-etat{border-radius:6px}
.onglets .onglet{border-radius:8px 8px 0 0}
.onglets .onglet:hover{background:var(--surface)}
.panneau .actions-saisie{flex-wrap:wrap}
.panneau .actions-saisie .btn{white-space:normal;text-align:left;flex:1 1 auto}

/* Écrire à l'employeur : les documents à joindre (25/09/2026). */
.docs-employeur{border:0;padding:0;margin:10px 0 4px;display:flex;flex-direction:column;gap:5px}
.docs-employeur legend{font-size:13.5px;font-weight:600;padding:0;margin-bottom:4px}
.docs-employeur label{display:flex;gap:7px;align-items:baseline;font-weight:500;font-size:14px;margin:0}
.docs-employeur input{margin:0;flex:none}

/* L'EXAMEN D'UNE SESSION (27/09/2026). */
.examen-cadre label{display:flex;flex-direction:column;gap:4px;font-weight:600;margin:10px 0 0}
.examen-cadre input,.examen-cadre textarea{font:inherit;font-weight:400;padding:7px 9px;border:1px solid var(--trait);border-radius:6px;background:var(--surface);color:var(--encre)}
.examen-cadre .aide{display:block;font-size:13px;color:var(--gris);margin-top:4px}
.deux-champs,.trois-champs{display:grid;gap:10px}
.deux-champs{grid-template-columns:repeat(2,minmax(0,1fr))}
.trois-champs{grid-template-columns:repeat(3,minmax(0,1fr))}
.examen-cadre fieldset.qcu{border:1px solid var(--trait);border-radius:8px;padding:6px 12px 12px;margin:14px 0 4px}
.examen-cadre fieldset.qcu legend{font-weight:700;padding:0 6px}
table.passages td.passage{white-space:nowrap}
table.passages td.passage input{font:inherit;font-size:13px;padding:4px 6px;border:1px solid var(--trait);border-radius:5px;background:var(--surface);color:var(--encre)}
table.passages td.passage input[type=time]{width:8em;margin-left:4px}
.planning-examen{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.planning-examen h3{margin:0 0 6px}
.mot-faux{color:var(--alerte);font-weight:600}
@media (max-width:700px){.trois-champs{grid-template-columns:minmax(0,1fr)}}
.accuse-ligne{color:#1F7A4D;font-weight:600}

/* Le dossier d'examen (27/09/2026). */
.onglets-dossier{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 6px}
.onglets-dossier .btn{white-space:nowrap}
.onglets-dossier .btn:not(.discret) .compteur{background:rgba(255,255,255,.25);color:inherit}
table.dossier-examen td.actions-dossier{white-space:normal;min-width:220px}
.actions-dossier details{display:inline-block;margin:0 4px 4px 0;vertical-align:top}
.actions-dossier details[open]{display:block;border:1px solid var(--trait);border-radius:8px;padding:6px 10px 10px;margin:4px 0 8px;background:var(--papier)}
.actions-dossier details summary{list-style:none;cursor:pointer}
.actions-dossier details summary::-webkit-details-marker{display:none}
.actions-dossier form.saisie label{display:flex;flex-direction:column;gap:3px;margin:6px 0;font-weight:600}
.actions-dossier form.enligne{display:inline-block}
.anciennes-versions{margin:22px 0}
.anciennes-versions summary{cursor:pointer;font-weight:600}
.dossier-session{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin:10px 0 24px}
.dossier-rubrique{border:1px solid var(--trait);border-radius:8px;padding:8px 12px;background:var(--surface)}
.dossier-rubrique h3{font-size:15px;margin:2px 0 6px}
.dossier-rubrique ul{margin:0;padding-left:18px}
.dossier-rubrique li{margin:3px 0}
.examen-cadre label .dim,.actions-dossier label .dim{font-weight:400}
.actions-dossier > details:first-child summary{margin-top:0}
@media (max-width:700px){
  table.dossier-examen{min-width:0}
  table.dossier-examen thead{display:none}
  table.dossier-examen tr,table.dossier-examen td{display:block}
  table.dossier-examen td{border-bottom:none;padding:6px 12px}
  table.dossier-examen tr{border-bottom:1px solid var(--trait);padding:6px 0}
  .onglets-dossier .btn{padding:8px 12px}
}
.examen-cadre label.case-version{flex-direction:row;font-weight:600}
.examen-cadre label.case-version input{margin-right:8px}

/* --- Le hors ligne (27/09/2026) ------------------------------------ */
.bandeau-hors-ligne{position:sticky;top:0;z-index:60;background:#E8EEF5;color:#1B2733;padding:.5rem 1rem;font-size:.9rem;
  display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;border-bottom:1px solid #C9D6E3}
.bandeau-hors-ligne[hidden]{display:none}
.bandeau-hors-ligne.hors{background:#FCEFD9;border-color:#F0D2A0}
.bandeau-hors-ligne .refuse{flex:1 0 100%;color:#9B1C2B}
.toast-hors-ligne{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#1B2733;color:#fff;padding:.7rem 1rem;
  border-radius:8px;z-index:70;box-shadow:0 4px 14px rgba(0,0,0,.25);max-width:90vw;font-size:.92rem}
.hors-ligne-page{max-width:720px;padding:2rem 1rem}
.qui .emporter{margin-right:.8rem;color:inherit;font-size:.85rem}
.barre .qui .emporter{background:none;border:0;color:#fff;opacity:.85;cursor:pointer;font:inherit;font-size:.85rem;padding:0;text-decoration:none}
.barre .qui .emporter:hover{opacity:1;text-decoration:underline}

/* ==== Repris de mabase.pro AE (27/09/2026) : l'outil de dessin et la signature au doigt ==== */
/* --- 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}
/* 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)}

.dessin-modale .btn.discret{color:#fff;border-color:#8A929B;background:transparent}
/* --- La pédagogie véhicule (27/09/2026) ---------------------------- */
.semaine-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:.6rem 0 1rem}
.semaine-peda{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:8px;margin-bottom:1.2rem;overflow-x:auto}
@media (max-width:900px){.semaine-peda{grid-template-columns:1fr}}
.jour-peda{background:#fff;border:1px solid #D8DEE4;border-radius:8px;padding:8px;min-height:110px}
.jour-peda.aujourdhui{border-color:#EE7B45;box-shadow:0 0 0 1px #EE7B45}
.jour-peda h2{font-size:.9rem;margin:0 0 .4rem}
.carte-seance{display:flex;flex-direction:column;gap:2px;padding:.45rem .55rem;border:1px solid #D8DEE4;border-left:4px solid #3D86D6;border-radius:6px;
  margin-bottom:6px;text-decoration:none;color:inherit;font-size:.85rem;background:#F8FAFC}
.carte-seance.signee{border-left-color:#2E9E57}
.grille-placer{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 14px;align-items:end}
.grille-placer .actions-saisie{grid-column:1/-1}
.seance-grille{display:grid;grid-template-columns:minmax(320px,1.5fr) minmax(280px,1fr);gap:16px;align-items:start}
@media (max-width:900px){.seance-grille{grid-template-columns:1fr}}
.seance-grille textarea,.seance-grille select{width:100%;box-sizing:border-box}
.niveaux-peda{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:.5rem 0}
.niveaux-peda legend{font-weight:700;margin-bottom:.3rem;padding:0}
.niveaux-peda label{position:relative;margin:0}
.niveaux-peda input{position:absolute;opacity:0}
.niveaux-peda span{display:inline-block;padding:.5rem .8rem;border:2px solid #D8DEE4;border-radius:8px;font-weight:600;cursor:pointer}
.niveaux-peda input:checked+span{border-color:#1B2733;background:#F2F4F7}
.niveaux-peda .n1 input:checked+span{border-color:#E9A23B;background:#FCEFD9}
.niveaux-peda .n2 input:checked+span{border-color:#3D86D6;background:#E1EDFA}
.niveaux-peda .n3 input:checked+span{border-color:#2E9E57;background:#DDF3E5}
.niveau{display:inline-block;padding:.05rem .5rem;border-radius:999px;font-size:.78rem;font-weight:700}
.niveau.n1{background:#FCEFD9;color:#8A5A0B}.niveau.n2{background:#E1EDFA;color:#1D5696}.niveau.n3{background:#DDF3E5;color:#1D6B3A}
.observation-peda{border-top:1px solid #E3E7EB;padding:.6rem 0}
.observation-peda header{font-size:.88rem}
.observation-peda time{color:#5D6C79;margin-right:.3rem}
.outils-medias{display:flex;flex-wrap:wrap;gap:6px;margin:.6rem 0}
.medias-attente{display:flex;flex-wrap:wrap;gap:8px}
.medias-attente figure.attente{margin:0;width:150px;border:1px solid #D8DEE4;border-radius:6px;padding:4px;background:#F8FAFC}
.medias-attente img{width:100%;height:95px;object-fit:cover;border-radius:4px;display:block}
.medias-attente .doc{height:95px;display:flex;align-items:center;justify-content:center;font-size:2.4rem}
.medias-attente figcaption{font-size:.75rem}
.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 #D8DEE4;display:block;background:#fff}
.media video{width:320px;max-width:100%;border-radius:6px;background:#000;display:block}
.media figcaption{font-size:.75rem;color:#5D6C79}
.signatures-seance{display:flex;flex-wrap:wrap;gap:10px;margin:.6rem 0}
.signatures-seance figure{margin:0;border:1px solid #D8DEE4;border-radius:8px;padding:6px 8px;background:#fff}
.signatures-seance img{height:64px;width:auto;display:block}
.signatures-seance figcaption{font-size:.75rem;color:#5D6C79}
.bilan-mot{background:#F2F4F7;border-radius:6px;padding:.5rem .7rem}
form.en-ligne{display:inline;margin:0}

/* Le menu « Certificat mensuel » de la fiche stagiaire (28/09/2026).
   Pas de liste flottante : la carte de la fiche coupe ce qui dépasse, et
   les mois du bas étaient inaccessibles (capture de Riadh, 17h56). La
   liste s'ouvre DANS la ligne, en pastilles qui passent à la ligne. */
.menu-mensuel{display:inline-block}
.menu-mensuel[open]{width:100%}
.menu-mensuel summary{list-style:none;cursor:pointer;display:inline-block}
.menu-mensuel summary::-webkit-details-marker{display:none}
.menu-mensuel-liste{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0 4px;padding:8px 10px;background:#FFF4EC;border:1px solid #f3d9c6;border-radius:8px}
.menu-mensuel-liste a{padding:4px 10px;border:1px solid #cfd6dc;border-radius:999px;background:#fff;text-decoration:none;color:inherit;font-size:12.5px}
.menu-mensuel-liste a:hover{border-color:#EE7B45}
.menu-mensuel-liste a.dim{border:0;background:transparent;margin-left:auto;font-size:12px;text-decoration:underline}

/* SAISIE BLANCHE (30/09/2026) */
/* Riadh : « dans les encarts où il y a de la saisie, un fond bien blanc, comme sur le site ». */
:root{--saisie:#fff}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--saisie:var(--surface)}}
:root[data-theme="dark"]{--saisie:var(--surface)}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],input[type=date],input[type=time],input[type=tel],input[type=url],input[type=datetime-local],input[type=month],input:not([type]),select,textarea{background-color:var(--saisie,#fff);color:var(--encre)}

/* LE TEXTE DES CASES SUIT LE THÈME (Riadh, 11/11/2026, capture iPhone : « des cases où l'écriture est noire »).
   Le fond des cases passait au sombre, mais leur texte gardait le noir du navigateur : heures, dates, nombres,
   listes et zones de texte devenaient illisibles. La couleur vient maintenant de --encre, et color-scheme dit au
   téléphone de dessiner ses propres morceaux (roue des heures, flèche des listes) en sombre aussi.
   --fond-doux et --fond-carte n'existaient pas en sombre : les règles retombaient sur du blanc, sous un texte clair. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme:dark;--fond-doux:var(--plein);--fond-carte:var(--surface)}}
:root[data-theme="dark"]{color-scheme:dark;--fond-doux:var(--plein);--fond-carte:var(--surface)}
/* « 30 à compléter » garde son rouge franc en sombre : le rouge pâle du thème sombre sous du blanc ne se lisait plus. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .reste-a-completer{--alerte:#A32C1A}}
:root[data-theme="dark"] .reste-a-completer{--alerte:#A32C1A}

/* La question à l'assistance, dans la barre du haut (30/09/2026). */
.question-notice{flex:1 1 170px;min-width:150px;max-width:420px;margin:0 16px}
.question-notice input[type=search]{width:100%;margin:0;height:34px;padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);color:#fff;font-size:14px}
.question-notice input[type=search]::placeholder{color:#C3D0DB}
.question-notice input[type=search]:focus{background:#fff;color:var(--encre);outline:2px solid var(--accent)}
@media (max-width:760px){.question-notice{order:3;flex-basis:100%;max-width:none;margin:6px 0 0}}
@media (max-width:760px){.barre-dedans{flex-wrap:wrap}}

/* L'ACTION DE SENSIBILISATION (01/10/2026) — vues/action.php, vues/action_questionnaire.php. */
.act-ok{background:var(--surface);color:#1F7A4D;border-left:3px solid #1F7A4D;padding:10px 14px;margin:14px 0 0;font-size:14.5px}
.act-etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;margin:16px 0}
.act-etapes a{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--trait);border-radius:10px;background:var(--surface);text-decoration:none;color:var(--encre);font-weight:600;font-size:14px}
.act-etapes a b{display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--plein);color:#fff;align-items:center;justify-content:center;font-size:12.5px}
.act-bloc{margin:16px 0}
.act-form label{display:block;font-size:13.5px;color:var(--gris);margin:0 0 10px}
.act-form input[type=text],.act-form input[type=email],.act-form input[type=date],.act-form select,.act-form textarea{display:block;width:100%;margin-top:4px;color:var(--encre)}
.act-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:760px){.act-2{grid-template-columns:1fr}}
.act-signataires th{white-space:nowrap;text-align:left}
.act-signataires td{vertical-align:middle}
.act-lien{display:inline-block;font-size:12px;padding:4px 8px;background:var(--saisie,#fff);border:1px solid var(--trait);border-radius:6px;word-break:break-all;max-width:100%}
.act-actions{white-space:nowrap}
.act-modeles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.act-modele{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px dashed var(--trait);border-radius:10px;margin:0}
.act-modele .btn{align-self:flex-start;margin-top:auto}
.act-onglets{display:flex;gap:4px;border-bottom:1px solid var(--trait);margin:16px 0 14px;flex-wrap:wrap}
.act-onglets a{padding:8px 14px;text-decoration:none;color:var(--gris);border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;font-weight:600;font-size:14px}
.act-onglets a[aria-current]{color:var(--encre);background:var(--surface);border-color:var(--trait);margin-bottom:-1px}
.act-note{background:var(--teinte-1,#EAF2FB);border:1px solid var(--teinte-1-trait,#C9DCF1);padding:10px 14px;border-radius:8px;font-size:14px}
.act-editeur{max-width:860px}
.act-question{border:1px solid var(--trait);border-radius:10px;padding:10px 14px 6px;margin:0 0 12px;background:var(--surface)}
.act-question legend{font-weight:700;font-size:13px;padding:0 6px;color:var(--gris)}
.act-q-haut{display:grid;grid-template-columns:1fr 190px;gap:12px}
@media (max-width:760px){.act-q-haut{grid-template-columns:1fr}}
.act-q-bas{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.act-q-boutons{display:flex;gap:6px;align-items:center}
.act-case{display:inline-flex !important;align-items:center;gap:6px;margin:0 !important;color:var(--encre) !important}
.act-case input{width:auto;margin:0}
.act-suppr{color:var(--alerte) !important}
.act-ajout{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:6px 0 4px}
.act-ajout label{margin:0}
.act-collant{position:sticky;bottom:0;background:var(--papier);padding:10px 0;margin:8px 0 0;z-index:2}
.act-zone-danger{margin:18px 0;color:var(--gris)}
.act-zone-danger form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
.act-partage{display:grid;grid-template-columns:300px 1fr;gap:24px;align-items:start}
@media (max-width:760px){.act-partage{grid-template-columns:1fr}}
.act-qr{width:100%;max-width:280px;aspect-ratio:1;background:#fff;border:1px solid var(--trait);border-radius:10px;padding:8px}
.act-qr svg{width:100%;height:100%;display:block}
.act-lien-ligne{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.act-chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 18px}
.act-chiffres div{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column}
.act-chiffres b{font-size:26px;letter-spacing:-.02em}
.act-chiffres span{color:var(--gris);font-size:13px}
.act-resultat{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:12px 16px;margin:0 0 12px;break-inside:avoid}
.act-resultat h3{margin:0 0 2px;font-size:15.5px}
.act-juste{color:#1F7A4D}
.barres{max-width:680px;display:block;margin:6px 0 2px}
.barres .b-lib{fill:var(--encre);font-size:13px}
.barres .b-val{fill:var(--gris);font-size:12.5px}
.barres .b-fond{fill:var(--trait);opacity:.55}
.act-textes{margin:6px 0 0;padding-left:18px;max-height:320px;overflow:auto}
.act-textes li{margin:4px 0;font-size:14px}
@media print{.act-onglets,.act-zone-danger,[data-rafraichir]{display:none !important}}
.act-form textarea,.act-form select{font:inherit;font-size:14.5px;line-height:1.45;padding:8px 10px;border:1px solid var(--trait);border-radius:8px;background:var(--saisie,#fff);color:var(--encre)}
.act-form select{height:44px;padding:6px 10px}
.act-form input[type=text],.act-form input[type=email],.act-form input[type=date],.act-form textarea,.act-form select{font-weight:400}

/* Les annexes : fichier, photo ou vidéo prise sur le moment (01/10/2026). */
.annexe-sources{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:6px 0}
.annexe-source{border:1px dashed var(--trait);border-radius:10px;padding:10px 12px;margin:0 !important;display:flex;flex-direction:column;gap:6px}
.annexe-source label{font-weight:700}
.annexe-source input[type=file]{font-size:13px;max-width:100%}
.annexe-video video{display:block;max-width:360px;width:100%;margin-top:6px;border-radius:8px;background:#000}
/* Le planning du stagiaire, sur sa fiche (02/10/2026). */
.mois-planning{margin:8px 0}
.mois-planning>summary{cursor:pointer;padding:6px 0}
table.planning-stagiaire td{vertical-align:middle}
table.planning-stagiaire img.sig-mini{height:26px;max-width:90px;object-fit:contain;vertical-align:middle;background:#fff;border:1px solid var(--trait);border-radius:4px}
table.planning-stagiaire tr.arrete td{opacity:.5}
table.planning-stagiaire tr.aujourdhui td{background:var(--alerte-fond,rgba(240,130,60,.08))}
.planning-pleine{margin:14px 0}
table.planning-stagiaire{width:100%}
table.planning-stagiaire th,table.planning-stagiaire td{padding:5px 8px}

/* Le lien « corriger » et sa bulle, sur les écrans (03/10/2026) — même rendu que sur les documents. */
.corriger{display:inline-block;position:relative;font:600 .78rem/1.2 inherit;font-family:inherit;color:#fff;background:#a33;
  border-radius:10px;padding:2px 9px;margin-left:.4em;text-decoration:none;white-space:nowrap;vertical-align:baseline}
.corriger:hover,.corriger:focus{background:#7a1f1f;color:#fff}
.corriger[data-bulle]:hover::after,.corriger[data-bulle]:focus::after{content:attr(data-bulle);position:absolute;left:0;top:135%;
  z-index:30;width:290px;white-space:normal;background:#222;color:#fff;font-weight:400;font-size:.82rem;line-height:1.35;
  padding:8px 10px;border-radius:6px;box-shadow:0 3px 10px rgba(0,0,0,.3);text-align:left}
.manques-liste{margin:.4em 0 .6em 1.2em;padding:0}
.manques-liste li{margin:.35em 0}

/* --- Pédagogie véhicule et examen Permis B (04/10/2026) --- */
.peda-schemas{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:10px 0}
.peda-schema{margin:0;border:1px solid var(--trait);border-radius:8px;padding:6px;background:#fff}
.peda-schema img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;background:#fff}
.peda-schema figcaption{margin-top:6px;display:flex;flex-direction:column;gap:6px;font-size:13px}
.peda-schema-titre{width:100%;box-sizing:border-box}
.liste-simple{list-style:none;padding-left:0;margin:6px 0}
.liste-simple li{padding:5px 0;border-bottom:1px solid var(--trait)}
.liste-sans{list-style:none;padding-left:0}
.cepc-grille{width:100%;border-collapse:collapse}
.cepc-grille th,.cepc-grille td{border:1px solid var(--trait);padding:6px 8px;vertical-align:middle;text-align:left}
.cepc-grille td.c{text-align:center;font-size:18px}
.cepc-grille input[type=radio]{width:20px;height:20px}
.cepc-grille input[type=text]{width:100%;box-sizing:border-box;min-width:160px}
.cepc-papier{background:#fff;border:1px solid var(--trait);border-radius:8px;padding:18px 22px;max-width:900px}
.cepc-papier h2{font-size:15px;margin:16px 0 6px}
.cepc-entete{width:100%;border-collapse:collapse;margin:8px 0}
.cepc-entete th,.cepc-entete td{border:1px solid var(--trait);padding:5px 8px;text-align:left}
.cepc-examen-blanc{font-size:12.5px;border:1px dashed var(--accent);padding:6px 10px;border-radius:6px}
.cepc-resultat{font-size:16px}
.cepc-bilan b{font-size:18px}
.nowrap{white-space:nowrap}
@media print{.cepc-papier{border:0;padding:0;max-width:none}.cepc-grille td.c{font-size:16px}}

/* La grille d'observation en salle : les critères du REAC (04/10/2026) */
.criteres-peda{margin:0 0 .9rem;border:1px solid #D8DEE4;border-radius:8px;background:#F7F9FB;padding:.4rem .7rem}
.criteres-peda summary{cursor:pointer;font-weight:600}
.criteres-peda h3{font-size:.9rem;margin:.7rem 0 .1rem}
.criteres-peda ul{margin:.2rem 0 .4rem 1.1rem;padding:0;font-size:.88rem}

/* ------------------------------------------------------------------
   LE MENU DE GAUCHE AUX COULEURS DU BANDEAU (Riadh, 07/10/2026) :
   même fond que la barre du haut, onglets en blanc ; l'onglet ouvert
   en blanc, écrit en noir.
   ------------------------------------------------------------------ */
.lateral{background:var(--plein);border-right-color:var(--plein)}
.lateral a,.lateral summary,.lateral details .tiroir a{color:#fff;border-radius:6px}
.lateral a:hover,.lateral summary:hover,.lateral details .tiroir a:hover{background:rgba(255,255,255,.14);color:#fff}
.lateral a.ici,.lateral details .tiroir a.ici,.lateral a.ici:hover{background:#fff;color:#101820}
.lateral summary.ici{color:#fff;background:rgba(255,255,255,.08)}
.lateral .groupe{color:rgba(255,255,255,.62)}
.lateral .sortie{border-top-color:rgba(255,255,255,.18)}
@media (max-width:900px){.lateral{border-bottom-color:var(--plein)}}

/* LES ENCARTS EN BLANC (Riadh, 07/10/2026) : la carte d'un stage, d'une
   session, d'un partenaire se détache du fond gris, pour se lire d'un coup d'œil. */
.carte{background:var(--surface);box-shadow:0 1px 3px rgba(16,24,32,.07)}
a.carte:hover{box-shadow:0 3px 10px rgba(16,24,32,.12)}

/* ==================================================================
   LES FICHIERS D'UN COURS ET LE SCAN DU QR CODE DE L'ÉCRAN (07/10/2026)
   ================================================================== */
.grille-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px 24px;align-items:start;margin-top:12px}
.scan-qr{margin:8px 0}
.scan-qr video{display:block;width:100%;max-width:420px;aspect-ratio:4/3;object-fit:cover;background:#101820;border-radius:10px}

/* ==================================================================
   LES CONVENTIONS SIGNÉES HORS APPLICATION ET LES LIENS DU TABLEAU DE BORD (11/10/2026)
   ================================================================== */
.coche-papier{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 16px 2px 0;font-size:.92em}
.coche-papier label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;margin:0;font-weight:normal}
.coche-papier input[type=checkbox]{width:1.1em;height:1.1em;accent-color:#3c9a5f}
.coche-papier input[type=date]{width:auto;padding:2px 6px;font-size:.95em}
.coches-papier{width:100%;margin:6px 0 2px}
/* L'endroit où mène un lien du tableau de bord se voit en arrivant. */
.panneau:target,h2:target{scroll-margin-top:16px}
.panneau:target,.panneau:has(h2:target){box-shadow:0 0 0 3px rgba(236,141,93,.55);transition:box-shadow .4s}

/* CHERCHER DANS LES THÈMES SALLES (20/10/2026). */
.masque{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.recherche-themes{display:flex;gap:8px;margin:14px 0 18px;max-width:640px}
.recherche-themes input[type=search]{flex:1;min-width:0;font:inherit;padding:10px 12px;border:1px solid var(--trait);border-radius:8px;background:var(--surface);color:var(--encre)}
.recherche-themes input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px}
.recherche-resultats{list-style:none;padding:0;margin:0}
.recherche-theme{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:14px 16px;margin:0 0 12px;box-shadow:var(--ombre)}
.recherche-titre{font-size:17px;margin:0 0 6px}
.recherche-titre a{color:var(--encre);text-decoration:none}
.recherche-titre .theme-num{display:inline-block;min-width:2em}
.recherche-source{border-top:1px dashed var(--trait);padding-top:6px;margin-top:6px}
.recherche-extrait{margin:4px 0 6px;font-size:14.5px;line-height:1.5}
.recherche-extrait a{color:var(--encre);text-decoration:none}
.recherche-extrait a:hover{text-decoration:underline}
.recherche-resultats mark,.recherche-titre mark{background:var(--accent);color:var(--accent-texte);border-radius:3px;padding:0 2px}
@media (max-width:560px){.recherche-themes{flex-direction:column}}

/* LA DÉROGATION (20/10/2026) : les jours où seuls des stagiaires en dérogation sont présents. */
.case-jour.derog-seuls{background:repeating-linear-gradient(135deg,rgba(124,58,237,.07) 0 8px,transparent 8px 16px);box-shadow:inset 0 0 0 2px rgba(124,58,237,.45)}
.effectif-jour{display:block;margin:2px 0 4px;color:#5b21b6;font-weight:600}

/* Déplacer une séance de pédagogie en la faisant glisser (21/10/2026). */
.seance-place{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
.seance-place.deplacable{cursor:grab}
.seance-place.deplacable .carte-seance{cursor:grab}
.seance-place.glisse{opacity:.45}
.seance-place.en-route{opacity:.6}
.jour-peda.cible{border-color:#3D86D6;box-shadow:0 0 0 2px #3D86D6 inset;background:#F2F7FD}
.pastille-binome{align-self:flex-start;background:#EEF4FB;color:#245E9E;border-radius:10px;padding:0 .45rem}
.supprimer-seance{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;justify-content:flex-end;margin-top:.8rem;padding-top:.8rem;border-top:1px solid #E5E9EE}
/* Les binômes côte à côte (21/10/2026). */
.semaine-peda{grid-template-columns:repeat(7,minmax(160px,1fr))}
@media (max-width:900px){.semaine-peda{grid-template-columns:1fr}}
.binome-paire{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px;padding:3px;border:1px dashed #9DBBE0;border-radius:8px;background:#F6F9FD}
.binome-paire .seance-place{margin-bottom:0;min-width:0}
.binome-tete{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;padding:0 .2rem;color:#245E9E;font-size:.9em}
.binome-paire .carte-seance{padding:.3rem .35rem;font-size:.8em;border-left-width:3px;overflow-wrap:anywhere}
.binome-paire .carte-seance > b:first-child{display:none}
.binome-paire .pastille-binome{display:none}
/* Le filet du traitement de texte (21/10/2026). */
.redacteur-filet{border:2px solid #EE7B45;background:#FFF6F0;border-radius:8px;padding:.6rem .8rem;margin:0 0 .8rem}
.redacteur-filet p{margin:.2rem 0}
/* Le groupe dans la même case (21/10/2026). */
.carte-groupe{border-left-color:#7B5CD6}
.carte-groupe .membre-groupe{display:block;color:inherit;text-decoration:none;padding:1px 0;border-bottom:1px dotted #CBD2DA}
.carte-groupe .membre-groupe:hover{text-decoration:underline}
.groupe-seance{background:#F4F0FD;border-left:4px solid #7B5CD6;padding:.4rem .7rem;border-radius:6px}
.groupe-case{display:block;margin:.4rem 0;font-weight:600}
.bilans-avant{margin-top:.8rem}
.carte-groupe .ligne-membre{display:flex;justify-content:space-between;align-items:baseline;gap:4px;border-bottom:1px dotted #CBD2DA}
.carte-groupe .ligne-membre .membre-groupe{border-bottom:0;flex:1}
.carte-groupe .modif-membre{text-decoration:none;color:#5B6B7A;font-size:.85em}
/* Le parcours de la séance (repris d'AE, 21/10/2026). */
.bloc-trajet{border:1px solid #D8DEE4;border-radius:10px;padding:10px 12px;margin:0 0 14px;background:#fff}
.form-situation{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr) auto;gap:6px;margin-top:8px}
@media (max-width:700px){.form-situation{grid-template-columns:1fr}}
.form-situation select,.form-situation input{width:100%;font-size:15px;padding:7px}
.carte-et-vue{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:16px;align-items:start;margin:12px 0}
@media (max-width:900px){.carte-et-vue{grid-template-columns:1fr}}
.carte-zone{height:480px;border:1px solid #D8DEE4;border-radius:12px;overflow:hidden;background:#e8ecef}
.vue-sv{border:1px solid #D8DEE4;border-radius:12px;background:#fff;padding:12px 14px;margin-bottom:12px}
.vue-sv h2{margin:0 0 4px;font-size:18px}
.vue-sv iframe{width:100%;height:320px;border:0;border-radius:8px;display:block}
.liste-situations ol{margin:0;padding-left:22px}
.liste-situations li{padding:7px 6px;border-bottom:1px solid #E3E6EA;cursor:pointer;border-radius:6px}
.liste-situations li:hover,.liste-situations li.choisi{background:#fff3ec}
.onglets-trajets{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.onglets-trajets .onglet{border:1px solid #D8DEE4;border-radius:999px;padding:5px 12px;text-decoration:none;color:inherit;background:#fff}
.onglets-trajets .onglet.choisi{background:#2F2F2D;color:#fff;border-color:#2F2F2D}
.epingle span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font:700 12px/1 sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45)}

/* ==== RELECTURE DE L'ERGONOMIE, LOT 1 (22/10/2026) ==================== */
/* Le menu sur téléphone, replié derrière « ☰ Menu » (vues/gabarit.php), sans script.
   Au-dessus de 900 px, le bouton n'existe pas : le menu reste à gauche, fixe. */
.menu-tel-case{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.menu-tel-bouton{display:none;align-items:center;gap:8px;padding:8px 12px;margin:0;border-radius:8px;font-weight:700;
  font-size:14px;color:#fff;cursor:pointer;background:rgba(255,255,255,.1)}
.menu-tel-case:focus-visible + .menu-tel-bouton{outline:2px solid var(--accent)}
@media (max-width:900px){
  .lateral{display:block;padding:6px 16px}
  .lateral nav{display:none;flex-wrap:wrap;gap:2px;padding-top:6px}
  .menu-tel-case:checked ~ nav{display:flex}
  .menu-tel-bouton{display:inline-flex}
}
/* La barre du haut sur téléphone : une marge de 16 px de chaque côté (elle était à 0 et
   « Se déconnecter » touchait le bord), les liens du compte qui passent à la ligne au lieu
   de sortir de l'écran, et le bouton hors ligne réduit à son icône. */
@media (max-width:760px){
  .barre-dedans{padding:8px 16px}
  .qui{flex-wrap:wrap;gap:4px 14px}
  .qui .emporter{margin-right:0}
  .emporter-mot{display:none}
}
/* Le détail du programme par module (vues/programme_resume.php) : sur téléphone, le nom
   du module au-dessus, la barre et le pourcentage dessous. Il faisait 694 px de large
   dans « Mon dossier » pour un écran de 390.
   La cause : la règle générale « table{min-width:640px} » (prévue pour les tableaux posés dans un
   .tableau-large qui défile), alors que ce petit tableau n'est dans aucun. */
.prog-parties{min-width:0}
@media (max-width:640px){
  .prog-parties,.prog-parties tbody{display:block;width:100%}
  .prog-parties tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--trait)}
  .prog-parties th{grid-column:1/-1;border-bottom:0;white-space:normal;padding-bottom:0}
  .prog-parties td{border-bottom:0}
  .prog-parties td:nth-child(2){width:auto}
  .prog-parties .barre-prog.petite{min-width:0}
}
/* Les formulaires longs (vues/fiche_edit.php, plus de 12 champs) : deux colonnes au-dessus
   de 1100 px, une seule en dessous. Chaque champ reste d'un bloc ; les boutons sur toute la largeur. */
@media (min-width:1100px){
  .saisie.fiche-longue{max-width:1180px;column-count:2;column-gap:36px}
  .saisie.fiche-longue .champ{break-inside:avoid}
  .saisie.fiche-longue .actions-saisie,.saisie.fiche-longue .pleine-largeur{column-span:all}
}
/* L'accueil : les gestes du quotidien, puis « À faire aujourd'hui » en compteurs
   qui s'ouvrent sur place (vues/tableau.php, vues/_taches.php). */
.gestes-accueil{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin:6px 0 22px}
.geste-accueil{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:12px 14px;margin:0}
.geste-accueil h2{font-size:15px;margin:0 0 8px}
.geste-accueil form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.geste-accueil select,.geste-accueil input[type=search]{flex:1 1 180px;min-width:0;width:auto;margin:0}
.geste-accueil .btn{margin:0}
.a-faire{margin:0 0 24px}
.a-faire > h2{margin:10px 0 8px}
.compteurs-taches{display:flex;flex-direction:column;gap:6px}
.compteur-tache{border:1px solid var(--trait);border-left:4px solid #EC8D5D;border-radius:6px;background:var(--surface)}
.compteur-tache.ton-attente{border-left-color:#b9a27a}
.compteur-tache.ton-alerte{border-left-color:#c0392b}
.compteur-tache > summary{display:flex;align-items:center;gap:12px;padding:9px 12px;cursor:pointer;list-style:none;font-weight:600}
.compteur-tache > summary::-webkit-details-marker{display:none}
.compteur-tache > summary::after{content:"Voir ▾";margin-left:auto;font-size:13px;font-weight:600;color:var(--accent);white-space:nowrap}
.compteur-tache[open] > summary::after{content:"Replier ▴"}
.compteur-tache > summary .nombre{min-width:2.2em;padding:1px 8px;border-radius:999px;background:#EC8D5D;color:#fff;text-align:center;font-variant-numeric:tabular-nums}
.compteur-tache.ton-attente > summary .nombre{background:#8a7550}
.compteur-tache.ton-alerte > summary .nombre{background:#c0392b}
.compteur-tache > .dedans{padding:4px 12px 12px}
.compteur-tache > .dedans > .alerte{margin:0}
.a-faire-rien{margin:4px 0 0}
.compteur-tache > .dedans.taches-jour{margin:0}
.geste-accueil select,.geste-accueil input[type=search]{height:40px;padding:6px 10px;font-size:15px;border:1px solid var(--trait);border-radius:8px}

/* ==== RELECTURE DE L'ERGONOMIE, LOT 2 (22/10/2026) ==================== */
/* Le menu en sous-menus (vues/gabarit.php) : à gauche sur ordinateur, chaque sujet se déplie
   sur place ; sur téléphone (menu « ☰ » ouvert), les sujets s'empilent et se déplient de même. */
.lateral details.groupe-menu .tiroir a{font-weight:500}
@media (max-width:900px){
  .lateral nav{flex-direction:column;align-items:stretch}
  .lateral details.groupe-menu{display:block}
  .lateral details.groupe-menu > summary{display:flex}
  .lateral details.groupe-menu .tiroir{display:block}
}
.qui .lien-messages{white-space:nowrap}
.qui .lien-messages .compteur{border-bottom:0}
/* « En savoir plus » : les longues explications, repliées sous la phrase d'introduction. */
details.en-savoir-plus{margin:-4px 0 14px}
details.en-savoir-plus > summary{cursor:pointer;color:var(--gris);font-size:14px;width:max-content}
details.en-savoir-plus > summary:hover{color:var(--encre)}
details.en-savoir-plus > :not(summary){margin:6px 0 0}
p.intro-page{margin:0 0 10px;font-size:15.5px;color:var(--gris)}
/* La fiche stagiaire : « Où en est le dossier », en tête (vues/_etat_dossier.php). */
.etat-dossier{background:var(--surface);border:1px solid var(--trait);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.etat-dossier h2{font-size:15px;margin:0 0 8px}
.etat-dossier .pastilles-dossier{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.etat-dossier .pastilles-dossier a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;
  border:1px solid var(--trait);text-decoration:none;color:var(--encre);font-size:14px;min-height:34px;background:var(--papier)}
.etat-dossier .pastilles-dossier a:hover{border-color:var(--accent)}
.etat-dossier .ok-d{border-color:#2e7d4f !important}
.etat-dossier .ok-d::before{content:"✔";color:#2e7d4f;font-weight:700}
.etat-dossier .manque-d{border-color:#c0392b !important}
.etat-dossier .manque-d::before{content:"✖";color:#c0392b;font-weight:700}
.etat-dossier .cours-d::before{content:"…";font-weight:700}
.etat-dossier .pourquoi{color:var(--gris);font-size:13px}
.etat-dossier .aller-a{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.etat-dossier .aller-a a{font-weight:600}
/* L'inscription en étapes (vues/fiche_edit.php) : chaque étape se replie ; les deux colonnes
   (lot 1) s'appliquent à l'intérieur de chaque étape. */
.saisie .etape-saisie{border:1px solid var(--trait);border-radius:10px;padding:0 14px;margin:0 0 14px;background:var(--surface)}
.saisie .etape-saisie > summary{cursor:pointer;font-weight:700;font-size:16px;padding:12px 0;list-style:none}
.saisie .etape-saisie > summary::-webkit-details-marker{display:none}
.saisie .etape-saisie > summary::after{content:" ▾";font-size:12px;color:var(--gris)}
.saisie .etape-saisie[open] > summary::after{content:" ▴"}
.saisie .etape-saisie > summary .dim{font-weight:400;font-size:14px}
.saisie .etape-dedans{padding:0 0 10px}
@media (min-width:1100px){
  .saisie.fiche-etapes{max-width:1180px}
  .saisie.fiche-etapes .etape-dedans{column-count:2;column-gap:36px}
  .saisie.fiche-etapes .champ{break-inside:avoid}
}
.saisie .champ .obligatoire{color:#c0392b;font-weight:700}

/* LES ICÔNES (23/10/2026, lot 4 — Riadh, « à l'image d'AGX ») : un dessin devant le mot, de la
   couleur du texte, à la taille de la ligne. Voir lib/icones.php pour le dictionnaire. */
.ic{width:18px;height:18px;flex:none;display:inline-block;vertical-align:-3px;stroke:currentColor}
.lateral .ic{opacity:.92}
.lateral details .tiroir .ic{width:16px;height:16px;opacity:.8}
.lateral a.ici .ic{opacity:1}
.menu a,.qui a{display:inline-flex;align-items:center;gap:6px}
.qui .ic{width:16px;height:16px}
.menu-tel-bouton .ic{width:20px;height:20px}
.question-notice{position:relative}
.question-notice .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#C3D0DB;pointer-events:none}
.question-notice input[type=search]{padding-left:34px}
.titre-ic{display:inline-flex;align-items:center;gap:8px}
.titre-ic .ic{width:1em;height:1em;vertical-align:0}

/* ===================================================================================
   LE CODE DES COULEURS « HD PASTEL » (23/10/2026, lot 4 — décidé par Riadh) :
     bleu nuit = je me déplace (menu, Retour)     vert   = je valide
     orange du logo = j'agis (texte bleu nuit)    rouge  = je détruis ou j'annule pour de vrai
     gris brillant = je consulte, je change de vue
   Bandeaux : rouge = à régler, ambre = à surveiller, bleu = pour information, vert = c'est fait ;
   chacun porte son icône, la couleur ne dit jamais rien seule (daltonisme).
   Contrastes vérifiés ≥ 4,5:1 (relecture du 23/10/2026). Le soulignement orange de l'onglet
   actif reste (Riadh). Mode sombre traité plus bas.
   =================================================================================== */
:root{
  --b-or-1:#F38D5C;--b-or-2:#EE7B45;--b-or-trait:#E06A33;--b-or-texte:#1B2733;
  --b-ve-1:#D3F2DE;--b-ve-2:#BFE9CE;--b-ve-trait:#4FA373;--b-ve-texte:#11552F;
  --b-ro-1:#FBD9D9;--b-ro-2:#F6C3C3;--b-ro-trait:#D98484;--b-ro-texte:#8A1C1C;
  --b-gr-1:#FFFFFF;--b-gr-2:#F1F4F7;--b-gr-3:#E4E9EE;--b-gr-trait:#C5CED6;--b-gr-texte:#1B2733;
  --b-nu-1:#24323F;--b-nu-2:#1B2733;--b-nu-trait:#1B2733;--b-nu-texte:#FFFFFF;
  --bd-ro-fond:#FDECEC;--bd-ro-trait:#F4C4C4;--bd-ro-filet:#E07A7A;--bd-ro-texte:#8A1C1C;
  --bd-am-fond:#FFF4DC;--bd-am-trait:#F3D9A0;--bd-am-filet:#E0A800;--bd-am-texte:#6E4700;
  --bd-bl-fond:#E8F1FC;--bd-bl-trait:#C9DDF3;--bd-bl-filet:#6FA3DC;--bd-bl-texte:#1C4A7A;
  --bd-ve-fond:#E6F6EC;--bd-ve-trait:#BFE6CC;--bd-ve-filet:#5DB884;--bd-ve-texte:#11552F;
  --relief:0 1px 0 rgba(255,255,255,.55) inset,0 1px 2px rgba(16,24,32,.07),0 3px 8px rgba(16,24,32,.05);
}
/* LES BOUTONS. Par défaut : l'orange du logo (j'agis). */
.btn.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;font-weight:650;
  background:linear-gradient(180deg,var(--b-or-1),var(--b-or-2));color:var(--b-or-texte);border:1px solid var(--b-or-trait);
  box-shadow:var(--relief);transition:background .15s,box-shadow .15s,filter .15s}
.btn.btn:hover{filter:brightness(1.04) saturate(1.05)}
.btn.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(16,24,32,.1) inset}
.btn.btn:focus-visible{outline:3px solid #1B2733;outline-offset:2px}
.btn .ic{width:17px;height:17px}
.btn.btn.vert{background:linear-gradient(180deg,var(--b-ve-1),var(--b-ve-2));color:var(--b-ve-texte);border-color:var(--b-ve-trait)}
.btn.btn.rouge{background:linear-gradient(180deg,var(--b-ro-1),var(--b-ro-2));color:var(--b-ro-texte);border-color:var(--b-ro-trait)}
.btn.btn.discret{background:linear-gradient(180deg,var(--b-gr-1) 0%,var(--b-gr-2) 48%,var(--b-gr-3) 100%);color:var(--b-gr-texte);border-color:var(--b-gr-trait);
  box-shadow:0 1px 0 #fff inset,0 -1px 0 rgba(27,39,51,.06) inset,0 1px 2px rgba(16,24,32,.08),0 3px 8px rgba(16,24,32,.06)}
.btn.btn.discret:hover{filter:none;background:linear-gradient(180deg,#FFFFFF,#E9EEF2 60%,#DCE3E9);border-color:#AEB9C3}
.btn.btn.nav,.btn.btn[data-retour]{background:linear-gradient(180deg,var(--b-nu-1),var(--b-nu-2));color:var(--b-nu-texte);border-color:var(--b-nu-trait);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 6px rgba(16,24,32,.14)}
.btn.btn.nav:hover,.btn.btn[data-retour]:hover{filter:brightness(1.25)}
.btn.btn:disabled,.btn.btn[aria-disabled="true"]{filter:grayscale(1);opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}

/* LES BANDEAUX : quatre tons, une icône chacun. */
.alerte,.rappel-ants.depasse,.rappel-ants,.avis-courriel,.note,.accuse{position:relative;border-radius:12px;border:1px solid;border-left-width:5px;
  padding:11px 16px 11px 44px;box-shadow:0 1px 2px rgba(16,24,32,.04),0 4px 14px rgba(16,24,32,.04)}
.alerte::before,.rappel-ants::before,.avis-courriel::before,.note::before,.accuse::before{content:"";position:absolute;left:15px;top:12px;width:18px;height:18px;
  background:currentColor;-webkit-mask:var(--bd-ic) center/contain no-repeat;mask:var(--bd-ic) center/contain no-repeat}
.alerte a,.rappel-ants a,.avis-courriel a,.note a,.accuse a,.alerte strong,.avis-courriel strong,.note strong,.accuse strong{color:inherit}
.alerte,.rappel-ants.depasse{background:var(--bd-ro-fond);border-color:var(--bd-ro-trait);border-left-color:var(--bd-ro-filet);color:var(--bd-ro-texte);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.rappel-ants:not(.depasse),.avis-courriel{background:var(--bd-am-fond);border-color:var(--bd-am-trait);border-left-color:var(--bd-am-filet);color:var(--bd-am-texte);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9 2.5h6'/%3E%3C/svg%3E")}
.note{background:var(--bd-bl-fond);border-color:var(--bd-bl-trait);border-left-color:var(--bd-bl-filet);color:var(--bd-bl-texte);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5h.01'/%3E%3C/svg%3E")}
.accuse{background:var(--bd-ve-fond);border-color:var(--bd-ve-trait);border-left-color:var(--bd-ve-filet);color:var(--bd-ve-texte);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.5 9.5'/%3E%3C/svg%3E")}
.rappel-ants.compact{padding:8px 14px 8px 40px}.rappel-ants.compact::before{top:9px;left:13px;width:16px;height:16px}
/* Imprimé : pas d'ombre ni de dégradé. */
@media print{.btn.btn,.alerte,.rappel-ants,.avis-courriel,.note,.accuse{box-shadow:none!important;background:none!important}.alerte::before,.rappel-ants::before,.avis-courriel::before,.note::before,.accuse::before{display:none}}

/* LE MODE SOMBRE (ordinateur réglé en sombre) : fonds foncés teintés, textes clairs. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --b-ve-1:#21503A;--b-ve-2:#1A4230;--b-ve-trait:#3C8A5F;--b-ve-texte:#C8F2DA;
  --b-ro-1:#512424;--b-ro-2:#431C1C;--b-ro-trait:#9C4A4A;--b-ro-texte:#F8C9C9;
  --b-gr-1:#33424F;--b-gr-2:#2A3743;--b-gr-3:#22303B;--b-gr-trait:#43535F;--b-gr-texte:#E8EEF2;
  --b-nu-1:#2C3D4D;--b-nu-2:#24323F;--b-nu-trait:#4A5C6B;
  --bd-ro-fond:#331914;--bd-ro-trait:#5A2A22;--bd-ro-texte:#F5B3A6;
  --bd-am-fond:#2E2410;--bd-am-trait:#57441C;--bd-am-texte:#F3C66E;
  --bd-bl-fond:#13263A;--bd-bl-trait:#24415F;--bd-bl-texte:#A9CCF2;
  --bd-ve-fond:#12291F;--bd-ve-trait:#24503A;--bd-ve-texte:#8FD9AE;
  --relief:0 1px 0 rgba(255,255,255,.06) inset,0 2px 6px rgba(0,0,0,.35);
}
:root:not([data-theme="light"]) .btn.btn.discret{box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 2px 6px rgba(0,0,0,.35)}
:root:not([data-theme="light"]) .btn.btn.discret:hover{background:linear-gradient(180deg,#3A4A57,#2E3C48);border-color:#5A6B78}}
:is(.alerte,.avis-courriel,.note,.accuse,.rappel-ants) + :is(.alerte,.avis-courriel,.note,.accuse,.rappel-ants){margin-top:12px}
/* Le contrôle de conformité du stage : ambre (à justifier), rouge s'il empêche. */
.controle{position:relative;border-radius:12px;border:1px solid var(--bd-am-trait);border-left:5px solid var(--bd-am-filet);background:var(--bd-am-fond);color:var(--bd-am-texte);
  padding:10px 16px 10px 44px;box-shadow:0 1px 2px rgba(16,24,32,.04),0 4px 14px rgba(16,24,32,.04);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2.5M9 2.5h6'/%3E%3C/svg%3E")}
.controle.bloque{border-color:var(--bd-ro-trait);border-left-color:var(--bd-ro-filet);background:var(--bd-ro-fond);color:var(--bd-ro-texte);
  --bd-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.controle::before{content:"";position:absolute;left:15px;top:13px;width:18px;height:18px;background:currentColor;-webkit-mask:var(--bd-ic) center/contain no-repeat;mask:var(--bd-ic) center/contain no-repeat}
/* Un bouton « discret » qui détruit reste rouge ; un Retour discret reste bleu nuit. */
.btn.btn.discret.rouge{background:linear-gradient(180deg,var(--b-ro-1),var(--b-ro-2));color:var(--b-ro-texte);border-color:var(--b-ro-trait);box-shadow:var(--relief)}
.btn.btn.discret.nav{background:linear-gradient(180deg,var(--b-nu-1),var(--b-nu-2));color:var(--b-nu-texte);border-color:var(--b-nu-trait);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 2px 6px rgba(16,24,32,.14)}
.btn.btn.discret.rouge:hover{filter:brightness(1.03);background:var(--b-ro-2)}
.btn.btn.discret.nav:hover{filter:brightness(1.25)}
/* (23/10/2026, lot 4 — FORMA) : la pastille « ✎ corriger » garde son texte blanc dans un bandeau
   (« .alerte a{color:inherit} » la rendait rouge sur rouge, illisible). */
:is(.alerte,.rappel-ants,.avis-courriel,.note,.accuse,.controle) a.corriger{color:#fff}

/* ------------------------------------------------------------------
   LE MENU LATÉRAL, OPTION « A » (Riadh, 23/10/2026 ; écrit le 23/10/2026, lot 11).
   Les sous-menus restent en texte BLANC sur le bleu nuit (plus de fond
   blanc), rattachés à leur rubrique par un petit filet clair à gauche du
   tiroir ; la rubrique OUVERTE reste soulignée d'orange ; la page en
   cours (lien .ici, dans un tiroir ou seul) est ENCADRÉE d'orange : texte
   blanc gras sur un orange très léger, coins arrondis. Le même rendu en
   mode sombre et dans le menu ☰ du téléphone (le bleu nuit ne change pas).
   Contraste du texte blanc : plus de 10:1 sur chaque fond. Sans
   !important : ces sélecteurs sont au moins aussi précis que ceux du
   07/10/2026 et du lot 4, et viennent après eux.
   ------------------------------------------------------------------ */
.lateral details[open]>summary{color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 -2px 0 #EE7B45}
.lateral details[open]>summary:hover{background:rgba(255,255,255,.12)}
.lateral details .tiroir{margin:4px 0 8px 10px;padding-left:8px;border-left:1px solid rgba(255,255,255,.18);width:auto}
.lateral details .tiroir a{color:#fff;background:transparent}
.lateral details .tiroir a:hover{color:#fff;background:rgba(255,255,255,.10)}
.lateral a.ici,.lateral a.ici:hover,.lateral details .tiroir a.ici,.lateral details .tiroir a.ici:hover{
  color:#fff;font-weight:700;background:rgba(238,123,69,.14);box-shadow:inset 0 0 0 1.5px #EE7B45;border-radius:6px}
.lateral a.ici:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ------------------------------------------------------------------
   LE CHIFFRE D'AFFAIRES MOIS PAR MOIS (24/10/2026, lot 15) : dans Devis et
   factures, le bouton orange « Télécharger le CA (Excel / CSV) » est le
   <summary> d'un <details> ; ouvert, il montre le petit panneau (exercice ou
   période libre, détails). Même rendu en mode sombre (variables existantes).
   ------------------------------------------------------------------ */
details.panneau-ca{margin:16px 0 6px}
details.panneau-ca>summary{list-style:none;display:inline-flex;align-items:center;cursor:pointer;margin-top:0}
details.panneau-ca>summary::-webkit-details-marker{display:none}
details.panneau-ca>summary::marker{content:""}
details.panneau-ca[open]>summary{margin-bottom:0}
.panneau-ca-form{margin:0;padding:12px 16px 16px;border:1px solid var(--trait);border-radius:0 8px 8px 8px;margin-top:6px;background:var(--surface);box-shadow:var(--ombre);max-width:720px}
.panneau-ca-form .periode{margin:6px 0}
.panneau-ca-form .periode label{flex-wrap:wrap;max-width:100%;min-width:0}
.panneau-ca-form select{padding:7px 9px;font:inherit;font-size:15px;flex:1 1 220px;min-width:0;max-width:100%}
.panneau-ca-form input[type=radio]{width:17px;height:17px;margin:0}
.panneau-ca-form .btn{margin-top:12px}

/* (24/10/2026, lot 20) le catalogue EDOF : les listes et les textes des fiches, habillés comme les champs. */
.edof-fiche select,.edof-fiche textarea,.edof-fiche input[type=text],.edof-fiche input[type=email]{width:100%;padding:9px 11px;font:inherit;font-size:15.5px;
  background:var(--saisie,#fff);color:var(--encre);border:1px solid var(--trait);margin:0 0 8px}
.edof-fiche textarea{resize:vertical;min-height:4.5em}
/* --- L'e-learning, le socle (24/10/2026, lot E1) ------------------- */
.module-el{margin:26px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--trait);border-radius:12px}
.module-el h2{margin-top:0}
.el-etapes{margin:10px 0 2px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.el-etapes li.el-finie .el-titre{color:var(--gris)}
.el-etapes li.el-verrouillee{opacity:.62}
.el-titre{font-weight:600;text-decoration:none}
a.el-titre:hover{color:var(--accent)}
.el-titre svg{vertical-align:-3px;margin-right:6px}
.el-etapes li .dim.petit{display:block;margin-top:1px}
.el-video{display:block;width:100%;max-width:720px;background:#000;border-radius:10px;margin:14px 0}
.el-contenu{max-width:74ch}
.el-contenu h3{margin:18px 0 6px}
.el-nav{margin-top:18px}
.el-nav .el-verrouillee{opacity:.62;cursor:not-allowed}
/* Le tableau de suivi : la ligne d'un stagiaire inactif depuis 7 jours se voit sans qu'on la cherche. */
tr.el-retard>td{background:var(--bd-am-fond, #FFF4E0)}
.el-alerte{color:var(--bd-am-texte, #8A5A00)}
.el-fait{color:#1F7A4D}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .el-fait{color:#7FD1A6}}
:root[data-theme="dark"] .el-fait{color:#7FD1A6}
/* Le bandeau ambre « à surveiller » de l'e-learning, dans le code couleur des bandeaux du lot 4. */
.el-rappel{position:relative;border-radius:12px;border:1px solid var(--bd-am-trait, #E8C98A);border-left-width:5px;
  border-left-color:var(--bd-am-filet, #C98A1B);background:var(--bd-am-fond, #FFF4E0);color:var(--bd-am-texte, #8A5A00);
  padding:10px 14px;max-width:70ch}
.el-rappel svg{vertical-align:-3px;margin-right:8px}
/* Les trois gestes d'une étape tiennent sur une ligne (24/10/2026, lot E1). */
td.el-gestes{white-space:nowrap}
td.el-gestes form.enligne{display:inline-block;vertical-align:middle;margin:2px 3px 2px 0}
/* Les barres d'avancement de l'e-learning sont des blocs, pas des filets verticaux (24/10/2026, lot E1). */
.module-el .barre-prog.petite{display:block;max-width:420px;min-width:0}
.tableau-large .barre-prog.petite,.carte .barre-prog.petite{display:block;min-width:90px;max-width:150px}

/* ==================================================================
   SOCLE TÉLÉPHONE (24/10/2026, lot mobile 1)
   Bloc COMMUN aux 10 applis + STAGES, recopié À L'IDENTIQUE à la fin
   de chaque actifs/mabase.css — une seule source
   (banc/lot-mobile1/socle-tel.css), à maintenir ensemble, comme
   lib/icones.php. Il va avec le bloc « SOCLE TÉLÉPHONE » à la fin de
   actifs/mabase.js.
   Tout vit sous @media (max-width:480px) : RIEN ne change sur
   ordinateur. Seule règle hors media : cacher .tel-indice, un élément
   que seul le JavaScript téléphone crée — ceinture et bretelles pour
   qu'il n'apparaisse jamais sur grand écran.
   ================================================================== */
.tel-indice{display:none}

@media (max-width:480px){

/* ---- 1. LES TABLEAUX : défilement doux + indice visuel. ----------
   Stratégie unique du lot (documentée dans le rapport) : PAS
   d'empilement en cartes — il faudrait poser des data-label écran par
   écran, c'est le temps 2. Ici : le min-width:640px du socle tombe au
   téléphone (un tableau étroit tient enfin dans l'écran) ; un tableau
   large défile dans sa boîte, avec une ombre de bord du côté où il
   reste du contenu et un petit picto « glisser » qui disparaît au
   premier défilement. mabase.js enveloppe les tableaux orphelins
   (.tel-defile) et pose la boîte (.tel-boite) et l'indice. */
table{min-width:0}
/* une image ou une vidéo ne doit jamais être plus large que l'écran */
img,video{max-width:100%;height:auto}
.tel-defile{overflow-x:auto}
.tel-roule{scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.tel-boite{position:relative}
.tel-boite::before,.tel-boite::after{content:"";position:absolute;top:0;bottom:0;width:16px;
  pointer-events:none;opacity:0;transition:opacity .2s;z-index:4}
.tel-boite::before{left:0;background:linear-gradient(90deg,rgba(16,24,32,.30),rgba(16,24,32,0))}
.tel-boite::after{right:0;background:linear-gradient(270deg,rgba(16,24,32,.30),rgba(16,24,32,0))}
.tel-boite.tel-gauche::before{opacity:1}
.tel-boite.tel-droite::after{opacity:1}
.tel-indice{display:block;position:absolute;right:8px;top:8px;z-index:5;margin:0;
  padding:5px 12px;border-radius:15px;background:var(--plein,#1B2733);color:#fff;
  font-size:12px;letter-spacing:.03em;pointer-events:none;opacity:.88;transition:opacity .25s,visibility .25s}
.tel-boite.tel-glisse .tel-indice{opacity:0;visibility:hidden}

/* ---- 2. CIBLES TACTILES : au moins 44 px de zone cliquable. ------
   Le dessin bouge le moins possible : pour les liens posés dans les
   cellules et le fil d'Ariane, la zone grandit par un rembourrage
   compensé par une marge négative égale (le flux ne bouge pas d'un
   pixel, seule la surface qui répond au doigt grandit) ; leur
   border-bottom décoratif redeviendrait une barre détachée du texte,
   on le remplace par un vrai soulignement. */
/* le menu latéral (au téléphone : la rangée de liens sous la barre) */
.lateral a,.lateral details .tiroir a{min-height:44px;align-items:center}
/* la barre du haut : compte (.qui), menu, sélecteur d'applis et menus déroulants hors menu latéral */
.qui a,.qui button,.menu a{min-height:44px;align-items:center}
.qui a{border-bottom:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.qui button{min-width:44px;justify-content:center;display:inline-flex}
.menu-admin>summary:not(.lateral *){min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.menu-admin .tiroir a:not(.lateral *){min-height:44px;display:flex;align-items:center}
/* les liens d'action dans les cellules : zone 44 px, dessin inchangé.
   La classe .tel-cible est posée par mabase.js sur les petits liens de
   cellules SANS fond ni cadre (les jours du mini-calendrier, pastilles
   et boutons colorés gardent leur dessin) : le rembourrage est rendu
   par la marge négative, le flux ne bouge pas. */
a.tel-cible{position:relative;z-index:1;padding:15px 17px;margin:-15px -17px;
  border-bottom:none;text-decoration:underline;text-underline-offset:2px}
/* le fil d'Ariane, le pied, le bouton retour */
.fil a{position:relative;z-index:1;padding:14px 6px;margin:-14px -6px;
  border-bottom:none;text-decoration:underline;text-underline-offset:2px}
.pied-applis a{min-height:44px;display:inline-flex;align-items:center}
.retour-page a{min-height:44px;display:inline-flex;align-items:center}
/* la marque, la recherche d'assistance, les dépliants, les filtres,
   les barres d'outils et de pagination */
.marque{min-height:44px;align-items:center}
summary{min-height:44px}
.filtres a{display:inline-flex;align-items:center;min-height:44px}
nav a{min-height:44px;display:inline-flex;align-items:center}
.barre-outils a{min-height:44px;display:inline-flex;align-items:center}
/* les boutons et les champs de formulaire */
button,.btn,input[type=submit],input[type=button]{min-height:44px}
button{min-width:44px}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not(.menu-tel-case),
select,textarea{min-height:44px}
/* cases à cocher et boutons radio : la zone passe à 44×44, le dessin
   reste une case de 22 px, redessinée (appearance:none) pour que la
   zone et la case restent solidaires. Les !important l'emportent sur
   les tailles posées ailleurs (label.coche input 18 px, etc.). La case
   du menu téléphone (.menu-tel-case) reste hors jeu. */
input[type=checkbox]:not(.menu-tel-case),input[type=radio]{
  -webkit-appearance:none!important;appearance:none!important;
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  padding:0;flex:0 0 auto;display:inline-grid;place-content:center;
  vertical-align:middle;background:transparent;border:0;border-radius:0;cursor:pointer}
/* la marge négative rend à la ligne la place que la zone a prise : le
   dessin des lignes ne bouge presque pas */
label input[type=checkbox]:not(.menu-tel-case),label input[type=radio],
td input[type=checkbox]:not(.menu-tel-case),td input[type=radio],
input[type=checkbox]:not(.menu-tel-case),input[type=radio]{margin:-8px 0}
input[type=checkbox]:not(.menu-tel-case)::before,input[type=radio]::before{
  content:"";width:22px;height:22px;box-sizing:border-box;display:grid;place-content:center;
  border:2px solid var(--gris,#5D6C79);border-radius:5px;background:var(--surface,#fff);
  font-size:15px;line-height:1;color:var(--surface,#fff)}
input[type=radio]::before{border-radius:50%}
input[type=checkbox]:not(.menu-tel-case):checked::before{content:"✔";background:var(--encre,#101820);border-color:var(--encre,#101820)}
input[type=checkbox]:not(.menu-tel-case):indeterminate::before{content:"–";background:var(--encre,#101820);border-color:var(--encre,#101820);font-size:17px}
input[type=radio]:checked::before{border-color:var(--encre,#101820);
  box-shadow:inset 0 0 0 4px var(--surface,#fff),inset 0 0 0 12px var(--encre,#101820)}
input[type=checkbox]:not(.menu-tel-case):focus-visible::before,input[type=radio]:focus-visible::before{
  outline:2px solid var(--accent,#EE7B45);outline-offset:2px}
input[type=checkbox]:disabled,input[type=radio]:disabled{opacity:.45;cursor:default}

/* ---- 3. TEXTE : plus rien d'utile sous 13 px au téléphone. -------
   Les 11-11,5 px du socle passent à 13 ; mabase.js pose en plus un
   plancher général à 12 px pour ce qui vient des feuilles propres à
   chaque appli (plannings, calendriers), en attendant le temps 2. */
.etiquette,.pastille,label.coche span,table.parcours th,
.lateral .groupe,.lateral .compteur,.menu .compteur,.jeton,
.case-jour p,.case-jour .lettre,.case-jour .nat,.entete-mois span,
.cal-tete span,.cal-rdv,.cal-tache,.cal-ferie,.cal-plus,.legende i,
.pastille-famille,.pastille-nouveau,.resume-fiche dt,.stg .icones,
.controle .gravite,.champ-48n .obligatoire,.creneau,.absents-groupe .case-absent,
.liste-actions>.btn small,.ligne-doc-importee .petit,.panneau .sous-panneau,
.scan-pages button,.scan-pages figcaption,.rapide>summary,.tuiles-argent .etiquette{font-size:13px}

} /* fin @media (max-width:480px) — SOCLE TÉLÉPHONE (24/10/2026, lot mobile 1) */

/* LE MENU DE GAUCHE QUI SE CACHE (25/10/2026) — voir actifs/menu-auto.js. Tout écran large, souris ou tactile (27/10/2026). */
.menu-punaise{display:flex;align-items:center;gap:6px;width:100%;margin:0 0 8px;padding:6px 10px;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;background:transparent;color:#fff;opacity:.75;font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.menu-punaise:hover,.menu-punaise:focus-visible{opacity:1;background:rgba(255,255,255,.08)}
.menu-bord{display:none}
/* (27/10/2026) La languette « ☰ » du menu caché, pour les écrans tactiles (iPad) : on la touche, le menu sort. */
.menu-languette{display:none}
@media (min-width:901px){
  html.menu-cache .menu-languette{display:flex;align-items:center;justify-content:center;position:fixed;left:0;top:50%;transform:translateY(-50%);
    z-index:61;width:30px;height:64px;padding:0;border:0;border-radius:0 12px 12px 0;background:var(--plein,#1B2733);color:#fff;
    font-size:18px;line-height:1;cursor:pointer;opacity:.88;box-shadow:2px 0 10px rgba(0,0,0,.25)}
  html.menu-cache .menu-languette:hover,html.menu-cache .menu-languette:focus-visible{opacity:1}
  html.menu-cache.menu-sorti .menu-languette{left:216px}
  html.menu-cache .contenu{padding-left:40px}
}
@media (min-width:901px){
  html.menu-cache .charpente{grid-template-columns:minmax(0,1fr)}
  html.menu-cache .lateral{position:fixed;left:0;top:0;bottom:0;width:216px;height:100vh;z-index:60;transform:translateX(-100%);
    transition:transform .18s ease;box-shadow:none}
  html.menu-cache .lateral.sorti{transform:none;box-shadow:6px 0 24px rgba(0,0,0,.28)}
  html.menu-cache .menu-bord{display:block;position:fixed;left:0;top:0;bottom:0;width:6px;z-index:59;
    background:linear-gradient(90deg,rgba(0,0,0,.18),transparent)}
  html.menu-cache .contenu{max-width:none}
}
@media (prefers-reduced-motion:reduce){html.menu-cache .lateral{transition:none}}
@media print{.menu-punaise,.menu-bord,.menu-languette{display:none!important}}

/* Le bouton Retour survolé restait blanc sur blanc (25/10/2026) */
.btn.btn.discret[data-retour]:hover{background:linear-gradient(180deg,var(--b-nu-1),var(--b-nu-2));border-color:var(--b-nu-trait);color:var(--b-nu-texte)}

/* LES CHAMPS À COMPLÉTER EN ROUGE (25/10/2026) — voir actifs/champs-a-completer.js */
input.a-completer,select.a-completer,textarea.a-completer{border-color:var(--alerte,#A32C1A)!important;
  background-color:var(--alerte-fond,#FBEDE9);box-shadow:0 0 0 2px rgba(163,44,26,.14)}
input.a-completer:focus,select.a-completer:focus,textarea.a-completer:focus{box-shadow:0 0 0 3px rgba(163,44,26,.28)}
.champ-a-completer > label{color:var(--alerte,#A32C1A)}
.reste-a-completer{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;font-size:12px;font-weight:600;
  color:#fff;background:var(--alerte,#A32C1A);vertical-align:middle}
.mot-a-completer{grid-column:1/-1;margin:0 0 10px;padding:6px 10px;border-left:3px solid var(--alerte,#A32C1A);
  background:var(--alerte-fond,#FBEDE9);color:var(--alerte,#A32C1A);font-size:13.5px;font-weight:600;border-radius:4px}
@media print{input.a-completer,select.a-completer,textarea.a-completer{background:none;box-shadow:none}
  .reste-a-completer,.mot-a-completer{display:none}}

/* LES FICHES EN COMPARTIMENTS (Riadh, 25/10/2026) — même bloc dans les 10 applis, seule la couleur change.
   Chaque compartiment d'une fiche (les étapes de la fiche stagiaire FORMA, les blocs du contrat RH, les
   parties d'une grande fiche découpée par actifs/compartiments.js) a un bandeau à la couleur du nom de
   l'appli sur le logo (TEINTES_APPLIS) ; le compartiment est gris clair, bordé de gris ; les cases où l'on
   tape sont d'un blanc franc, bordées de gris, et ressortent sur le gris. */
:root{--etape-bandeau:#E06C75;--etape-bandeau-texte:#10202A;--etape-fond:#EDF0F3;--etape-trait:#C5CED6;--etape-case:#FFFFFF;--etape-case-trait:#B4BFC9}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--etape-fond:#111A21;--etape-trait:#2C3B48;--etape-case:#1B2630;--etape-case-trait:#3A4B59}}
:root[data-theme="dark"]{--etape-fond:#111A21;--etape-trait:#2C3B48;--etape-case:#1B2630;--etape-case-trait:#3A4B59}
.saisie.fiche-etapes .etape-saisie,fieldset.bloc-saisie,form .compartiment{background:var(--etape-fond);border:1px solid var(--etape-trait);
  border-radius:10px;padding:0;margin:0 0 16px;overflow:hidden;box-shadow:0 1px 3px rgba(16,24,32,.06);min-width:0}
.saisie.fiche-etapes .etape-saisie > summary,fieldset.bloc-saisie > legend,form .compartiment > .compartiment-bandeau{
  display:block;background:var(--etape-bandeau);color:var(--etape-bandeau-texte);padding:11px 16px;margin:0;
  font-size:16px;font-weight:700;line-height:1.35;width:100%;box-sizing:border-box;border:0;border-radius:0}
fieldset.bloc-saisie > legend{float:left;margin-bottom:12px}
fieldset.bloc-saisie > legend + *{clear:both}
fieldset.bloc-saisie > :not(legend){margin-left:16px;margin-right:16px}
fieldset.bloc-saisie > legend + *{margin-top:14px}
fieldset.bloc-saisie{padding-bottom:6px}
.saisie.fiche-etapes .etape-saisie > summary .dim,fieldset.bloc-saisie > legend .dim,form .compartiment > .compartiment-bandeau .dim,
.saisie.fiche-etapes .etape-saisie > summary::after{color:inherit;opacity:1}
/* (audit du 25/10/2026) Texte du bandeau : foncé sur les couleurs claires, blanc seulement là où le contraste
   atteint 4,5 (AGRÉMENT) — le gris pâle des sous-titres ne passait pas. */
.saisie.fiche-etapes .etape-saisie > summary:focus-visible{outline:3px solid var(--encre);outline-offset:-3px}
.saisie.fiche-etapes .etape-dedans{padding:14px 16px 10px}
form .compartiment > .compartiment-dedans{padding:14px 16px 8px}
form .compartiment > .compartiment-dedans > :last-child{margin-bottom:0}
form .compartiment-vide > .compartiment-dedans{display:none}
:is(.saisie.fiche-etapes .etape-saisie,fieldset.bloc-saisie,form .compartiment) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]),select,textarea){
  background-color:var(--etape-case);border-color:var(--etape-case-trait)}
:is(.saisie.fiche-etapes .etape-saisie,fieldset.bloc-saisie,form .compartiment) :is(input,select,textarea).a-completer{
  background-color:var(--alerte-fond,#FBEDE9);border-color:var(--alerte,#A32C1A)}
:is(.saisie.fiche-etapes .etape-saisie > summary,fieldset.bloc-saisie > legend,form .compartiment > .compartiment-bandeau) .reste-a-completer{
  background:#fff;color:var(--alerte,#A32C1A);text-shadow:none}
@media print{.saisie.fiche-etapes .etape-saisie > summary,fieldset.bloc-saisie > legend,form .compartiment > .compartiment-bandeau{
  background:none;color:inherit;border-bottom:1px solid #999}}

/* (audit du 25/10/2026) Le formulaire qui vient de partir : on le voit, et un second clic ne repart pas (actifs/gestes.js). */
form.envoi-en-cours button[type=submit],form.envoi-en-cours button:not([type]){cursor:progress;opacity:.7}

/* LES DOIGTS SUR TABLETTE (nuit du 25-26/10/2026, audit ergonomie, constat 9) : le socle téléphone s'arrête à 480 px.
   Sur un écran tactile plus large (tablette en salle ou en voiture, téléphone tenu couché), les boutons gardent
   au moins 44 px de haut pour se toucher sans viser. Rien ne change à la souris ni au téléphone. */
@media (pointer:coarse) and (min-width:481px){
  .btn,.petit-btn,input[type=submit],input[type=button]{min-height:44px}
}

/* LES BANDEAUX DES ENCADRÉS À LA COULEUR DE L'APPLI (Riadh, 26/10/2026 : « le bandeau bleu nuit, comme on a fait
   pour la fiche », dans toutes les applis et sur toutes les pages). Le bandeau en tête de chaque encadré (« ÉTAT
   CIVIL », « LE DOSSIER »…) prend la teinte du nom de l'appli sur le logo, la même que les compartiments des
   fiches (--etape-bandeau) ; le texte reste foncé sur les teintes claires, blanc seulement là où le contraste le
   permet (--etape-bandeau-texte). Les onglets, les boutons, le menu et la barre du haut ne changent pas. */
.panneau>h2{background:var(--etape-bandeau);color:var(--etape-bandeau-texte)}
.panneau>h2 .n,.panneau>h2 .dim,.panneau>h2 a:not(.btn){color:inherit;opacity:.85}
@media print{.panneau>h2{background:none;color:inherit;border-bottom:1px solid #999}}

/* LA BANDE DES SYMBOLES (Riadh, 26/10/2026) — voir actifs/bande-symboles.js. Sous le bandeau noir,
   les rubriques du menu en grands symboles ; un cadre à la couleur de l'application (celle du
   suffixe AE, FORMA…) autour de celle où l'on se trouve, qui garde son nom affiché. Au survol,
   l'onglet s'élargit et le nom se lit à côté du symbole. Le même bloc dans les onze applications. */
.bande-symboles{background:var(--surface);border-bottom:1px solid var(--trait);box-shadow:0 2px 6px rgba(0,0,0,.06)} /* (26/10/2026) sans z-index : le tiroir des applications (AE ▾) passe par-dessus */
.bande-symboles .bande-dedans{display:flex;justify-content:center;gap:10px;padding:8px 12px}
.bande-symboles .symbole{position:relative;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  min-width:58px;height:48px;padding:0 14px;box-sizing:border-box;border:2px solid transparent;border-radius:12px;
  color:var(--encre);text-decoration:none;transition:background .15s,border-color .15s,color .15s}
.bande-symboles .symbole .ic{width:28px;height:28px;stroke-width:1.8;vertical-align:middle}
.bande-symboles .symbole-nom{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-weight:600;font-size:15px;transition:max-width .2s ease,opacity .15s ease,margin .2s ease}
.bande-symboles .symbole:hover .symbole-nom,.bande-symboles .symbole:focus-visible .symbole-nom,.bande-symboles .symbole.ici .symbole-nom{max-width:200px;opacity:1;margin-left:8px}
.bande-symboles .symbole:hover{background:color-mix(in srgb,var(--teinte-ici,#F28B30) 10%,transparent);color:var(--teinte-ici,#F28B30)}
.bande-symboles .symbole:focus-visible{outline:2px solid var(--teinte-ici,#F28B30);outline-offset:2px}
.bande-symboles .symbole.ici{border-color:var(--teinte-ici,#F28B30);background:color-mix(in srgb,var(--teinte-ici,#F28B30) 14%,transparent);color:var(--teinte-ici,#F28B30)}
.bande-symboles .symbole-n{position:absolute;top:2px;left:calc(14px + 18px);min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;
  border-radius:9px;background:var(--alerte,#C0392B);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;
  box-shadow:0 0 0 2px var(--surface)}
@media (prefers-reduced-motion:reduce){.bande-symboles .symbole-nom{transition:none}}
@media (max-width:640px){.bande-symboles .bande-dedans{justify-content:flex-start;gap:6px;overflow-x:auto;scrollbar-width:none}
  .bande-symboles .symbole{min-width:50px;height:44px;padding:0 10px}.bande-symboles .symbole-n{left:calc(10px + 16px)}}
@media print{.bande-symboles{display:none}}

/* « REPRENDRE MA SAISIE » (27/10/2026) — sous chaque observation de séance, voir vues/seance_vehicule.php. */
.reprendre-obs{margin:6px 0 2px}
.reprendre-obs>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.reprendre-obs>summary::-webkit-details-marker{display:none}
.reprendre-obs[open]>summary{margin-bottom:8px}
.reprendre-obs textarea{width:100%;box-sizing:border-box}
.obs-completee{margin:2px 0}
.obs-origine{margin:2px 0 6px}
.obs-origine p{margin:4px 0 0;padding:6px 10px;border-left:3px solid var(--trait);background:var(--papier)}

/* LE SCHÉMA EN PAYSAGE SUR TABLETTE (Riadh, 27/10/2026). En paysage, l'écran est bas : les barres d'outils
   et la palette tiennent chacune sur une ligne (qui défile au doigt), pour laisser la hauteur à la feuille. */
@media (orientation:landscape) and (max-height:900px){
  .dessin-modale{padding:6px;gap:4px}
  .dessin-barre{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px 10px}
  .dessin-barre::-webkit-scrollbar,.dessin-palette::-webkit-scrollbar{display:none}
  .dessin-groupe{flex:0 0 auto}
  .dessin-groupe.outils button,.dessin-groupe.actions button:not(.btn){min-width:2.3rem;height:2.3rem}
  .dessin-palette{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .dessin-palette .teinte,.dessin-palette .teinte-libre{flex:0 0 auto}
}

/* L'OBJECTIF DU JOUR (27/10/2026) — le livret de l'élève dans la séance de pédagogie véhicule. */
.objectif-jour{margin-bottom:14px}
.objectif-choisi{padding:8px 0;border-bottom:1px solid var(--trait)}
.objectif-choisi:last-of-type{border-bottom:0}
.objectif-choisi h3{margin:0 0 4px;font-size:1.02rem}
.objectif-jour .trame>summary{cursor:pointer;font-weight:600;margin:4px 0}
.objectif-jour .trame h4{margin:8px 0 4px;font-size:.9rem}
.objectif-jour .trame ul{margin:0 0 6px;padding-left:20px}
.objectif-jour .remc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 14px}
.objectif-jour .remc p{margin:0;font-size:.92rem}
.choisir-objectif{margin-top:8px}
.choisir-objectif>summary{list-style:none;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.choisir-objectif>summary::-webkit-details-marker{display:none}
.choisir-objectif[open]>summary{margin-bottom:8px}
.livret-competence{border:1px solid var(--trait);border-radius:8px;padding:6px 10px;margin:0 0 6px}
.livret-competence>summary{cursor:pointer;padding:4px 0}
.livret-objectif{display:flex;align-items:flex-start;gap:8px;padding:6px 0;min-height:44px}
.livret-objectif input{margin-top:3px;flex:none;width:20px;height:20px}
/* 29/10/2026 — carnet des formateurs : « Ajouter un formateur » et « Modifier » dépliables. */
.carnet-ajout,.carnet-modif{margin:10px 0}
.carnet-ajout>summary,.carnet-modif>summary{list-style:none;display:inline-flex;cursor:pointer}
.carnet-ajout>summary::-webkit-details-marker,.carnet-modif>summary::-webkit-details-marker{display:none}
.carnet-ajout[open]>form,.carnet-modif[open]>form{margin-top:12px;padding:14px;border:1px solid var(--trait,#dde3ea);border-radius:10px;background:var(--fond-carte,#fff)}
.carnet-modif{display:inline-block;vertical-align:top}
.carnet-modif[open]{display:block}
/* 29/10/2026 — historique des séances par stagiaire, sous le calendrier pédagogie véhicule / salle. */
.histo-stagiaire{border-top:1px solid var(--trait,#dde3ea);padding:10px 0}
.histo-stagiaire>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.histo-stagiaire[open]>summary{margin-bottom:8px}

/* LES CONVOCATIONS D'EXAMEN, EN DEUX ONGLETS (29/10/2026) : Individuelle, Collective. */
.onglets.onglets-convocation{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--trait);margin:6px 0 14px}
.onglets.onglets-convocation .onglet{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;margin-bottom:-2px;border-bottom:2px solid transparent;color:var(--gris);font-weight:600;text-decoration:none}
.onglets.onglets-convocation .onglet svg{width:17px;height:17px}
.onglets.onglets-convocation .onglet.choisi{color:var(--encre);border-bottom-color:var(--accent,#1E5BFF)}
.convocations-examen td{vertical-align:top}
.note-manque{color:#9a5b00;font-size:13px}

/* ÉVALUATION CP (29/10/2026). */
.deux-colonnes-cp{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:10px}
.deux-colonnes-cp .panneau h3{margin:0 0 8px;display:flex;align-items:center;gap:6px;font-size:16px}
.questions-cp .question-cp{border:1px solid var(--trait);border-radius:10px;padding:10px 12px;margin:10px 0}
.questions-cp .question-cp.vide{opacity:.8;border-style:dashed}
.questions-cp textarea{width:100%}
.choix-cp{display:flex;align-items:center;gap:8px;margin:5px 0}
.choix-cp input[type=text]{flex:1}
.questionnaire-cp .question-cp{border:1px solid var(--trait);border-radius:10px;padding:12px 14px;margin:12px 0}
.questionnaire-cp legend{font-weight:600;padding:0 4px}
.choix-reponse{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-radius:8px;cursor:pointer;font-size:17px}
.choix-reponse:hover{background:var(--fond-doux,rgba(0,0,0,.04))}
.choix-reponse input{width:22px;height:22px;margin-top:2px;flex:none}
.notes-cp input[type=text]{width:100%}
.notes-cp td input[inputmode=decimal]{width:70px}


/* LES CASES À COCHER SUR IPHONE (30/10/2026). Riadh : « les stagiaires n'arrivent pas à cocher » sur
   iPhone. Safari ne dessine pas ::before sur un champ : la case, redessinée par un pseudo-élément,
   y était INVISIBLE (zone de 44 px transparente, sans bord). Le dessin passe donc sur le champ
   lui-même, en image de fond : la même case de 22 px, partout, Safari compris. */
input[type=checkbox]:not(.menu-tel-case),input[type=radio]{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='%23ffffff' stroke='%235D6C79' stroke-width='2'/%3E%3C/svg%3E") center/22px 22px no-repeat!important}
input[type=checkbox]:not(.menu-tel-case):checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='%23101820' stroke='%23101820' stroke-width='2'/%3E%3Cpath d='M6 11.5l3.4 3.4L16.2 8' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important}
input[type=checkbox]:not(.menu-tel-case):indeterminate{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='1' y='1' width='20' height='20' rx='4' fill='%23101820' stroke='%23101820' stroke-width='2'/%3E%3Cpath d='M6.5 11h9' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")!important}
input[type=radio]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23ffffff' stroke='%235D6C79' stroke-width='2'/%3E%3C/svg%3E")!important}
input[type=radio]:checked{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23ffffff' stroke='%23101820' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='5.5' fill='%23101820'/%3E%3C/svg%3E")!important}
input[type=checkbox]:not(.menu-tel-case)::before,input[type=radio]::before{content:none!important;display:none!important}
input[type=checkbox]:not(.menu-tel-case):focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--accent,#EE7B45);outline-offset:-8px}


/* LES PAGES SANS COMPTE, SUR TÉLÉPHONE (30/10/2026). « .enveloppe.seul » centrait la seule carte de
   connexion en rangée (flex) : une page qui a plusieurs blocs — le règlement par le lien, la signature
   par le lien — les mettait CÔTE À CÔTE. Sur iPhone, le titre, le texte du règlement et la case se
   retrouvaient en colonnes étroites qui débordaient de l'écran : impossible de dérouler ou de cocher.
   Désormais les blocs s'empilent ; la carte de connexion, seule, reste centrée. */
.enveloppe.seul{flex-direction:column;align-items:stretch}
.enveloppe.seul > .carte-connexion{align-self:center}
.enveloppe.seul > *:not(.carte-connexion){min-width:0;max-width:100%}

/* L'onglet « Échanges » (30/10/2026) */
.echanges-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.echanges-actions details[open]{flex-basis:100%}
.echanges-filtres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.echanges-filtres .pilule{padding:5px 12px;border:1px solid var(--trait,#d6d6cf);border-radius:999px;background:var(--surface,#fff);font:inherit;font-size:14px;cursor:pointer;color:inherit}
.echanges-filtres .pilule.ici{background:var(--encre,#1f2a44);color:#fff;border-color:var(--encre,#1f2a44)}
.echanges-filtres .n{font-weight:700;margin-left:4px}
.echanges-frise{list-style:none;margin:0;padding:0}
.echanges-frise > li{border:1px solid var(--trait,#d6d6cf);border-left-width:4px;border-radius:10px;padding:8px 12px;margin:0 0 6px;background:var(--surface,#fff)}
.echanges-frise > li.recu{border-left-color:#2f855a}
.echanges-frise > li.envoye{border-left-color:#4a6fa5}
.echanges-frise summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.echange-texte{white-space:pre-wrap;font-family:inherit;font-size:14px;margin:8px 0 0;padding:8px 10px;border-radius:8px;background:var(--papier,#f4f4ed)}
.compte-sms{display:block;margin-top:4px}
.echange-apercu{flex-basis:100%;font-size:14px}


/* LES BOUTONS DES FORMULAIRES SUR TÉLÉPHONE (31/10/2026, Agent Tests). « .actions-saisie » mettait
   bouton et texte d'aide sur une seule ligne, bouton sans retour à la ligne : sur iPhone (375 px),
   « Noter les absents et envoyer le lien aux autres » (émargement) et l'aide de l'onglet « Remise »
   (fiche stagiaire) sortaient de l'écran. Sous 640 px, la rangée passe à la ligne et le bouton aussi. */
@media (max-width:640px){
  .actions-saisie{flex-wrap:wrap}
  .actions-saisie > *{min-width:0;max-width:100%}
  .actions-saisie .btn{white-space:normal}
}

/* L'aide de l'IA pour écrire à un élève ou un stagiaire (31/10/2026) — actifs/ia-redaction.js */
.ia-barre{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin:10px 0 4px;padding:8px 10px;border:1px dashed var(--trait,#DCE2E7);border-radius:10px;background:var(--papier,#F6F7F8)}
.ia-barre input[data-ia-consigne]{flex:1 1 240px;min-width:0;font:inherit;font-size:14px;padding:7px 9px;border:1px solid var(--trait,#DCE2E7);border-radius:6px;background:var(--surface,#fff);color:inherit}
.ia-barre .ia-etat{flex:1 1 100%}
.ia-barre .ia-etat:empty{display:none}
.ia-barre .lien-discret{background:none;border:0;padding:0;color:var(--gris,#5D6C79);text-decoration:underline;cursor:pointer;font:inherit;font-size:13px}
.ia-barre .ia-marque{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;background:linear-gradient(90deg,#6C5CE7,#2F6FD6);color:#fff;font-size:.8rem;font-weight:700;white-space:nowrap}

/* (03/11/2026) Les cartes Leaflet gardent leurs calques (z-index 400 à 1000) chez elles : elles ne passent plus
   par-dessus le menu latéral ni les fenêtres quand la page défile. */
.leaflet-container,.carte-zone{position:relative;z-index:0;isolation:isolate}

/* LES ZONES DE TEXTE À LA TAILLE DE LEUR TEXTE (Riadh, 04/11/2026 : « il faut les agrandir pour que je puisse voir
   le texte, ils doivent faire la largeur de la colonne et prendre la taille du texte »). Toute la largeur de la
   colonne, la hauteur suit le texte (Chrome : field-sizing ; ailleurs : mabase.js), police normale. */
textarea{width:100%;max-width:100%;box-sizing:border-box;font-family:inherit;font-size:inherit;line-height:1.45}
textarea:not([rows]),textarea[rows="1"],textarea[rows="2"],textarea[rows="3"],textarea[rows="4"]{min-height:4.5em;field-sizing:content}

/* (Riadh, 04/11/2026) L'écran bleu sur les schémas : la fenêtre de dessin ne se sélectionne plus (voile bleu d'iOS),
   pas de menu de l'image ni de reflet bleu du toucher (Android). */
.dessin-modale,.dessin-modale *,.signature-modale canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.dessin-modale input[type=text]{-webkit-user-select:text;user-select:text}
.dessin-toile,.dessin-toile canvas{touch-action:none}
.dessin-modale ::selection{background:transparent}

/* (Riadh, 04/11/2026) « L'élève sur son espace via un iPhone ne voit pas l'écriture » : en mode sombre (réglage de
   l'iPhone), le texte devient clair mais ces cadres gardaient un fond clair écrit en dur (le bilan de séance en gris
   #F2F4F7, les jours, les trajets…) : écriture claire sur fond clair. En sombre, ils prennent le fond sombre. */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .bilan-mot,:root:not([data-theme="light"]) .niveaux-peda input:checked+span,:root:not([data-theme="light"]) .criteres-peda,:root:not([data-theme="light"]) .medias-attente figure.attente,:root:not([data-theme="light"]) .jour-peda a,:root:not([data-theme="light"]) .groupe-seance,:root:not([data-theme="light"]) .binome-paire,:root:not([data-theme="light"]) .redacteur-filet,:root:not([data-theme="light"]) .menu-mensuel-liste,:root:not([data-theme="light"]) .case-jour.n-entreprise,:root:not([data-theme="light"]) .bandeau-hors-ligne.hors{background:#1E2A35;color:var(--encre);border-color:var(--trait)}
:root:not([data-theme="light"]) .jour-peda,:root:not([data-theme="light"]) .bloc-trajet,:root:not([data-theme="light"]) .vue-sv,:root:not([data-theme="light"]) .onglets-trajets .onglet,:root:not([data-theme="light"]) .menu-mensuel-liste a{background:var(--surface);color:var(--encre);border-color:var(--trait)}
:root:not([data-theme="light"]) .jour-peda.cible{background:#16283B}
:root:not([data-theme="light"]) .observation-peda{border-top-color:var(--trait)}:root:not([data-theme="light"]) .observation-peda time{color:var(--gris)}
:root:not([data-theme="light"]) .cepc-papier,:root:not([data-theme="light"]) .signatures figure,:root:not([data-theme="light"]) .signatures-seance figure,:root:not([data-theme="light"]) .peda-schema,:root:not([data-theme="light"]) .signature-boite{color:#101820}
}
:root[data-theme="dark"] .bilan-mot,:root[data-theme="dark"] .niveaux-peda input:checked+span,:root[data-theme="dark"] .criteres-peda,:root[data-theme="dark"] .medias-attente figure.attente,:root[data-theme="dark"] .jour-peda a,:root[data-theme="dark"] .groupe-seance,:root[data-theme="dark"] .binome-paire,:root[data-theme="dark"] .redacteur-filet,:root[data-theme="dark"] .menu-mensuel-liste,:root[data-theme="dark"] .case-jour.n-entreprise,:root[data-theme="dark"] .bandeau-hors-ligne.hors{background:#1E2A35;color:var(--encre);border-color:var(--trait)}
:root[data-theme="dark"] .jour-peda,:root[data-theme="dark"] .bloc-trajet,:root[data-theme="dark"] .vue-sv,:root[data-theme="dark"] .onglets-trajets .onglet,:root[data-theme="dark"] .menu-mensuel-liste a{background:var(--surface);color:var(--encre);border-color:var(--trait)}
:root[data-theme="dark"] .jour-peda.cible{background:#16283B}
:root[data-theme="dark"] .observation-peda{border-top-color:var(--trait)}:root[data-theme="dark"] .observation-peda time{color:var(--gris)}
:root[data-theme="dark"] .cepc-papier,:root[data-theme="dark"] .signatures figure,:root[data-theme="dark"] .signatures-seance figure,:root[data-theme="dark"] .peda-schema,:root[data-theme="dark"] .signature-boite{color:#101820}

/* LES BOUTONS D'UNE CELLULE CÔTE À CÔTE (Riadh, 05/11/2026 : « quand il y a des onglets, il vaut mieux les rapprocher ») :
   dans un tableau, les boutons, petits formulaires et menus d'une même case se rangent sur une ligne au lieu de s'empiler. */
td > form { display: inline-block; vertical-align: middle; margin: 0 .3rem .3rem 0; }
td > .btn, td > a.btn, td > button { vertical-align: middle; margin: 0 .3rem .3rem 0; }
td > details { display: inline-block; vertical-align: middle; }

/* ------------------------------------------------------------------
   PLUS SERRÉ, PARTOUT (Riadh, 06/11/2026 : « on peut rapprocher les lignes, il y a trop d'espace entre les
   lignes » — visuel de la fiche élève validé — puis « il faut appliquer cette règle de partout »).
   Même contenu, moins de blanc : titres, paragraphes, boutons, champs et cartes se rapprochent. Sur un écran
   tactile, les zones à toucher gardent leurs 44 px ; à la souris, elles descendent à 36 px.
   Ce bloc est le même à la fin du mabase.css de chaque application.
   ------------------------------------------------------------------ */
h1{margin:14px 0 8px}
h2{margin:20px 0 8px}
h3{margin-top:14px;margin-bottom:6px}
p{margin:0 0 10px}
label{margin:10px 0 4px}
.champ{margin-bottom:10px}
.btn{margin-top:12px;padding:8px 16px}
.alerte{margin:10px 0 0;padding:8px 12px 8px 40px}.alerte::before{left:13px;top:9px}
/* (08/11/2026) L'icône du bandeau garde sa place : le texte ne passe plus dessous. */
.tuiles{gap:10px;margin:14px 0 6px}
.saisie{margin-top:6px}
.retour-page{margin-bottom:6px}
@media (pointer:fine){
  .lateral a,.lateral details .tiroir a,.qui a,.qui button,.menu a,.retour-page a{min-height:36px}
  .menu-admin>summary:not(.lateral *){min-height:36px;min-width:36px}
}

/* LE BANDEAU DE PAGE (Riadh, 06/11/2026 : « le même graphisme que la page planning, à adapter à toutes les pages
   et à toutes les applications mabase » — visuel validé). Composé par actifs/retour.js : Retour, titre et état,
   résumé court, actions (data-bandeau) à droite, onglets dessous. Couleur : celle de l'appli (--accent). */
.bandeau-page{background:var(--accent,#EE7B45);color:#fff;border-radius:0 0 10px 10px;padding:8px 12px;margin:0 0 .7rem;display:flex;flex-direction:column;gap:6px}
.bandeau-page .bdp-ligne{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.bandeau-page .bp-retour{display:inline-flex;align-items:center;gap:6px;background:#1B2733;color:#fff !important;border-radius:8px;padding:6px 12px;font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap;margin:0}
.bandeau-page .bp-retour:hover{background:#26384A}
.bandeau-page .bp-retour svg{width:1em;height:1em}
.bandeau-page h1.bdp-titre{margin:0;font-size:1.3rem;line-height:1.25;color:inherit;letter-spacing:-.01em;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.bandeau-page h1.bdp-titre .dim,.bandeau-page h1.bdp-titre span.dim{color:inherit;opacity:.85}
.bandeau-page h1.bdp-titre a{color:inherit}
.bandeau-page .bdp-resume{margin:0;color:inherit;opacity:.92;font-size:.88rem}
.bandeau-page .bdp-resume a,.bandeau-page .bdp-resume b{color:inherit}
.bandeau-page .bdp-actions{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.bandeau-page .bdp-actions .btn,.bandeau-page .bdp-actions a,.bandeau-page .bdp-actions button{background:#fff;color:#C2410C;border:0;border-radius:8px;padding:6px 12px;font-weight:700;font-size:.88rem;margin:0;text-decoration:none;min-height:0;box-shadow:none}
.bandeau-page .bdp-onglets{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:6px 0 0;border-top:1px solid rgba(255,255,255,.35)}
.bandeau-page .bdp-onglets a,.bandeau-page .bdp-onglets button,.bandeau-page .bdp-onglets span.onglet{background:rgba(255,255,255,.18);color:inherit;border:0;border-radius:999px;padding:5px 12px;font-size:.88rem;text-decoration:none;line-height:1.3}
.bandeau-page .bdp-onglets a:hover{background:rgba(255,255,255,.3)}
.bandeau-page .bdp-onglets a.ici,.bandeau-page .bdp-onglets a[aria-current],.bandeau-page .bdp-onglets .actif{background:#fff;color:#C2410C;font-weight:700}
.bandeau-page .bdp-onglets form{display:inline-flex;gap:5px;align-items:center;margin:0}
p.bdp-flash{transition:opacity .5s ease,max-height .5s ease;max-height:12em;overflow:hidden}
p.bdp-flash-part{opacity:0;max-height:0;margin:0;padding:0}
.eleve-bandeau.avec-retour .bp-retour{display:inline-flex;align-items:center;gap:6px;background:#1B2733;color:#fff !important;border-radius:8px;padding:6px 12px;font-weight:700;text-decoration:none;font-size:.9rem;white-space:nowrap;margin:0 6px 0 0;align-self:center}
@media print{.bandeau-page{background:none;color:#000;padding:0}.bandeau-page .bp-retour,.bandeau-page .bdp-actions,.bandeau-page .bdp-onglets{display:none}}

/* LES SESSIONS PAR FORMATION (tableau de bord, 07/11/2026 — visuel validé par Riadh).
   Un onglet par formation avec son dessin ; l'onglet ouvert montre cinq colonnes. */
.fam-onglets{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:8px;margin:0 0 12px}
.fam-onglet{display:flex;align-items:center;gap:10px;border:1px solid var(--trait);background:var(--surface);color:var(--encre);border-radius:12px;padding:10px 12px;text-decoration:none;min-width:0}
.fam-onglet:hover{border-color:var(--accent)}
.fam-onglet:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.fam-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fam-txt b{font-size:14px;line-height:1.25}
.fam-txt small{color:var(--gris);font-size:12px;font-variant-numeric:tabular-nums}
.fam-onglet.vide small{opacity:.75}
.fam-onglet.ici{background:var(--accent);border-color:var(--accent);color:var(--accent-texte)}
.fam-onglet.ici small{color:var(--accent-texte)}
.fam-ic{flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--fond-ic);color:var(--teinte);transition:transform .25s}
.fam-ic svg{width:40px;height:40px;overflow:visible}
.fam-onglet:hover .fam-ic{transform:translateY(-2px) rotate(-3deg)}
.fam-onglet.ici .fam-ic{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.fam-onglet:hover .anim-tourne,.fam-onglet.ici .anim-tourne{animation:fam-tourne 2.4s linear infinite;transform-box:fill-box;transform-origin:center}
.fam-onglet:hover .anim-roule,.fam-onglet.ici .anim-roule{animation:fam-roule .7s ease-in-out infinite alternate}
.fam-onglet:hover .anim-toque,.fam-onglet.ici .anim-toque{animation:fam-toque 1.2s ease-in-out infinite alternate}
.fam-onglet:hover .anim-pulse,.fam-onglet.ici .anim-pulse{animation:fam-pulse 1.1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.fam-onglet:hover .anim-feuille,.fam-onglet.ici .anim-feuille{animation:fam-feuille 1.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
.anim-coche{stroke-dasharray:14;stroke-dashoffset:0}
.fam-onglet:hover .anim-coche,.fam-onglet.ici .anim-coche{animation:fam-coche 1.4s ease-out infinite}
@keyframes fam-tourne{to{transform:rotate(360deg)}}
@keyframes fam-roule{from{transform:translateX(-2px)}to{transform:translateX(2px)}}
@keyframes fam-toque{from{transform:translateY(0) rotate(0)}to{transform:translateY(-3px) rotate(-6deg)}}
@keyframes fam-pulse{50%{transform:scale(1.12)}}
@keyframes fam-feuille{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes fam-coche{0%{stroke-dashoffset:14}60%,100%{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.fam-ic,.fam-ic *{animation:none!important;transition:none!important}}
.fam-aide{margin:0 0 16px;color:var(--gris);text-align:center;padding:14px;border:1px dashed var(--trait);border-radius:12px}
.fam-colonnes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start;margin-bottom:18px}
.fam-col{background:var(--surface);border:1px solid var(--trait);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fam-col h3{margin:0;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris);display:flex;justify-content:space-between;gap:6px}
.fam-col h3 span{background:var(--papier);border-radius:999px;padding:0 8px;color:var(--encre);font-variant-numeric:tabular-nums}
.fam-col-projet{border-top:4px solid #9AA7B2}
.fam-col-prevue{border-top:4px solid #2F6FD6}
.fam-col-encours{border-top:4px solid #1F8A4C}
.fam-col-terminee{border-top:4px solid var(--accent)}
.fam-col-archive{border-top:4px solid #6B6A64;opacity:.85}
.fam-vide{margin:0;color:var(--gris);text-align:center}
.fam-sess{background:var(--papier);border:1px solid var(--trait);border-radius:10px;padding:9px 10px;display:flex;flex-direction:column;gap:4px;min-width:0}
.fam-sess > a{color:var(--encre);font-size:13px;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:900px){.fam-colonnes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fam-colonnes{grid-template-columns:1fr}.fam-onglets{grid-template-columns:1fr 1fr}.fam-txt b{font-size:13px}}

/* LA SÉANCE VÉHICULE COMME UNE LEÇON D'ÉCOLE (07/11/2026, maquette validée) — vues/_seance_ecole.php. */
.visuellement-cache{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sv-bandeau{background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:12px;margin:0 0 16px}
.sv-tete{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.sv-rond{width:44px;height:44px;border:1px solid var(--trait);border-radius:999px;display:grid;place-items:center;text-decoration:none;font-size:20px;color:var(--encre);flex:none}
.sv-rond.inactif{opacity:.35}
.sv-initiales{width:48px;height:48px;border-radius:999px;background:var(--papier);display:grid;place-items:center;font-weight:700;color:var(--gris);flex:none}
.sv-qui{flex:1 1 300px;min-width:0}
.sv-qui h1{margin:0;font-size:22px}
.sv-qui p{margin:2px 0 0;color:var(--gris)}
.sv-qui p b{color:var(--encre)}
.sv-pastille{font-size:12px;background:#2F4A7A;color:#fff;border-radius:6px;padding:2px 7px;vertical-align:3px;font-weight:700}
.sv-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px!important}
.sv-puce{font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px}
.sv-puce.vert{background:#E3F3E9;color:#11552F}.sv-puce.bleu{background:#E8F1FC;color:#1C4A7A}
.sv-lecons{border-top:1px solid var(--trait);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.sv-lecons h2{margin:0;font-size:17px}
.sv-tout{font-weight:600}
.sv-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.sv-carte{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--encre);border:1px solid var(--trait);border-radius:10px;padding:8px 10px;font-size:13px;background:var(--papier)}
.sv-carte.ici{border:2px solid var(--accent);background:#FCE3D3}
.sv-carte-etat{font-weight:700}.sv-carte-etat.ok{color:#1F8A4C}.sv-carte-etat.attente{color:#A86A10}.sv-carte-etat.avenir{color:var(--gris);font-weight:500}
.sv-outils{border-top:1px solid var(--trait);padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sv-outils>span{font-weight:700;margin-right:4px}
.sv-outil{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--trait);background:var(--surface);text-decoration:none;font-weight:600;color:var(--encre)}
.sv-outil.ici{background:var(--plein);color:#fff;border-color:var(--plein)}
.sv-colonnes{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;margin-bottom:18px}
.sv-col{flex:1 1 300px;min-width:0;background:var(--surface);border:1px solid var(--trait);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.sv-col:nth-child(2){flex:1.4 1 380px}
.sv-col h2{margin:0;font-size:20px}
.sv-etape{margin:0;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.sv-reac{background:var(--papier);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sv-reac-l{display:flex;align-items:center;gap:8px}.sv-reac-l b{min-width:52px}
.sv-niv{display:inline-block;font-size:12px;font-weight:700;border-radius:999px;padding:1px 9px;background:#ECEFF2;color:#3F4D59}
.sv-niv.n1,.sv-niv.e1{background:#FDF0E3;color:#7A4A12}.sv-niv.n2,.sv-niv.e2{background:#E8F1FC;color:#1C4A7A}.sv-niv.n3,.sv-niv.e3{background:#E3F3E9;color:#11552F}
.sv-progres{margin:0}.sv-progres b{font-size:22px;color:#1F8A4C}
.sv-barre{height:10px;background:#DCE2E7;border-radius:6px;overflow:hidden;display:flex}
.sv-barre .e3{background:#1F8A4C}.sv-barre .e2{background:#2F6FD6}.sv-barre .e1{background:#E08A2E}
.sv-livret{display:flex;flex-direction:column;gap:6px}
.sv-comp summary{cursor:pointer;padding:6px 0;font-size:14px}
.sv-comp ul{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:4px}
.sv-obj{display:flex;gap:6px;align-items:baseline;text-decoration:none;color:var(--encre);padding:6px 8px;border-radius:8px;font-size:14px}
.sv-obj:hover{background:var(--papier)}
.sv-obj.choisi{background:#FCE3D3;outline:2px solid var(--accent)}
.sv-point{width:9px;height:9px;border-radius:999px;background:#A9B4BD;flex:none;transform:translateY(-1px)}
.sv-obj.e1 .sv-point{background:#E08A2E}.sv-obj.e2 .sv-point{background:#2F6FD6}.sv-obj.e3 .sv-point{background:#1F8A4C}
.sv-fiche{background:var(--papier);border-radius:10px;padding:10px 12px;margin:6px 0 4px;font-size:13px;line-height:1.45}
.sv-fiche p{margin:0 0 6px}
.sv-obs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.sv-obs li{background:var(--papier);border-radius:10px;padding:8px 10px}
.sv-cherche{display:flex;flex-wrap:wrap;gap:8px}.sv-cherche input{flex:1 1 240px;min-height:44px}
.sv-resultats{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sv-liste-livret{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.sv-regard{margin:22px 0 10px}
/* Les trois colonnes côte à côte dès que l'écran le permet ; l'espace du stagiaire s'élargit pour cette page. */
.enveloppe:has(.sv-bandeau){max-width:1440px}
@media (min-width:1000px){
  .sv-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
}

/* LES FLÈCHES PRÉCÉDENT / SUIVANT À LA COULEUR DE L'APPLICATION (Riadh, 08/11/2026 : « les flèches doivent être de la même
   couleur que le suffixe ÉCOLE, cette règle est applicable partout dans mabase »). --teinte-appli est posée sur <body>. */
svg.ic-precedent,svg.ic-suivant{color:var(--teinte-appli,currentColor)}

/* LE MENU DES ACTIONS RESTE VISIBLE (Riadh, 08/11/2026) — actifs/collant.js : collé en haut de l'écran quand on descend. */
.colle{position:fixed!important;top:8px!important;bottom:auto!important;z-index:60;margin:0!important;box-sizing:border-box;box-shadow:0 10px 28px rgba(16,24,32,.22)}
@media (max-width:640px){.colle{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch}.colle>*{flex:0 0 auto}}

/* LE PROGRAMME REMC À GAUCHE DU REGARD DU FORMATEUR (Riadh, 09/11/2026 — visuel validé, « plus de brillance »). */
.seance-grille.avec-remc{grid-template-columns:minmax(260px,330px) minmax(320px,1.25fr) minmax(280px,1fr)}
@media (max-width:1100px){.seance-grille.avec-remc{grid-template-columns:1fr 1fr}.seance-grille.avec-remc .remc-col{grid-column:1/-1}}
@media (max-width:900px){.seance-grille.avec-remc{grid-template-columns:1fr}}
.seance-grille.avec-remc>.panneau{border:0;box-shadow:0 6px 22px rgba(20,30,50,.12);overflow:hidden}
.seance-grille.avec-remc>.panneau>h2{background:linear-gradient(135deg,#FF5A4E,#E0245E);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.remc-qui{margin:0 0 8px}
.remc-onglets{display:flex;gap:4px;margin:0 0 8px}
.remc-onglets a{flex:1;text-align:center;border:2px solid #E3E7EC;background:#fff;border-radius:8px;padding:6px 4px;font-weight:700;font-size:13px;color:#1E2A33;text-decoration:none}
.remc-onglets a.ici{background:linear-gradient(135deg,#FF7A1A,#FF3D6E);border-color:transparent;color:#fff;box-shadow:0 3px 10px rgba(255,80,60,.35)}
.remc-comp{font-size:13px;margin:4px 0 6px}
.remc-sous{border:2px solid #E9ECF0;border-radius:9px;margin:5px 0;background:#fff}
.remc-sous>a{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;color:inherit;text-decoration:none;font-weight:650;font-size:13.5px}
.remc-sous>a small{display:block;color:#6B7781;font-weight:400;font-size:12px}
.remc-sous>a i,.remc-sous li::before,.remc-legende span::before{flex:none;width:10px;height:10px;border-radius:50%;margin-top:5px;background:#C9D0D8;box-shadow:0 0 0 2px #fff,0 0 5px rgba(0,0,0,.25)}
.remc-sous.e1>a i,.remc-sous li.e1::before,.remc-legende .e1::before{background:#FF2D2D}
.remc-sous.e2>a i,.remc-sous li.e2::before,.remc-legende .e2::before{background:#FFB000}
.remc-sous.e3>a i,.remc-sous li.e3::before,.remc-legende .e3::before{background:#14C26B}
.remc-sous.ici{border-color:#FF7A1A;background:linear-gradient(180deg,#FFF1E3,#FFE3CF);box-shadow:0 4px 14px rgba(255,122,26,.25)}
.remc-sous ul{list-style:none;margin:0;padding:0 10px 8px 26px}
.remc-sous li{display:flex;gap:6px;font-size:12.8px;padding:3px 0}
.remc-sous li::before{content:"";width:7px;height:7px;margin-top:6px}
.remc-sous li a{color:inherit;text-decoration:none}
.remc-sous li.ici a{font-weight:700;color:#FF5A00}
.remc-legende{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#6B7781;margin:8px 0 0}
.remc-legende span{display:inline-flex;gap:4px;align-items:center}
.remc-legende span::before{content:"";width:9px;height:9px;margin:0}
.remc-fiche{background:linear-gradient(135deg,#FFF6E8,#FFE9F1);box-shadow:inset 0 0 0 2px #FFC59A;border-radius:10px;padding:12px 14px;margin:0 0 14px}
.remc-fiche h3{margin:0;font-size:17px;color:#D4145A}
.remc-fiche-qui{margin:2px 0 8px;font-size:12.5px;color:#6B7781}
.remc-micro{background:#fff;border:2px solid #FF9F43;border-radius:8px;padding:6px 9px;font-size:13.5px;margin:0 0 8px}
.remc-fiche dl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
@media (max-width:700px){.remc-fiche dl{grid-template-columns:1fr}}
.remc-fiche dl>div{border-radius:8px;padding:8px 10px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.remc-fiche dt{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.remc-fiche dd{margin:3px 0 0;font-size:13.5px}
.remc-fiche .k-pourquoi{background:linear-gradient(135deg,#2F80FF,#1E5BE0)}
.remc-fiche .k-comment{background:linear-gradient(135deg,#19C37D,#0E9F5E)}
.remc-fiche .k-risques{background:linear-gradient(135deg,#FF4B4B,#D61F3C)}
.remc-fiche .k-influences{background:linear-gradient(135deg,#9B5CFF,#6C2BD9)}
.remc-points{font-size:12.5px;color:#6B7781;margin:8px 0 0}
.remc-invite{margin:0 0 10px}
.remc-puce{display:inline-block;background:linear-gradient(135deg,#FF7A1A,#FF3D6E);color:#fff;border-radius:10px;padding:1px 9px;font-size:12px;font-weight:700}

/* ④ L'HISTORIQUE DES LEÇONS ET L'EXAMEN PERMIS B (Riadh, 09/11/2026 — visuel validé). */
.hist-seance{margin-top:18px;border:0;box-shadow:0 6px 22px rgba(20,30,50,.12);overflow:hidden}
.hist-seance>h2{background:linear-gradient(135deg,#FF5A4E,#E0245E);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.18)}
.hist-onglets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.hist-onglets button{display:flex;gap:10px;align-items:center;border:2px solid #E3E7EC;background:#fff;border-radius:12px;padding:8px 14px;font:inherit;cursor:pointer;text-align:left;color:#1E2A33}
.hist-onglets button b{display:block;font-size:14.5px}.hist-onglets button small{color:#6B7781;font-size:12px}
.hist-onglets button.ici{border-color:transparent;background:linear-gradient(135deg,#FF7A1A,#FF3D6E);color:#fff;box-shadow:0 3px 12px rgba(255,80,60,.35)}
.hist-onglets button.ici small{color:#fff}
.hist-av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.hist-av.a0{background:linear-gradient(135deg,#2F80FF,#1E5BE0)}.hist-av.a1{background:linear-gradient(135deg,#19C37D,#0E9F5E)}.hist-av.a2{background:linear-gradient(135deg,#9B5CFF,#6C2BD9)}
.hist-exam{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,#EDE6FF,#FFE9F1);border-radius:12px;padding:12px 14px;margin:0 0 14px;box-shadow:inset 0 0 0 2px #C9B3FF}
.hist-exam>div{flex:1;min-width:220px}.hist-exam form{margin:0}.hist-drapeau{font-size:26px}
.hist-exam .btn.hist-btn-exam{border:0;color:#fff;background:linear-gradient(135deg,#9B5CFF,#6C2BD9);box-shadow:0 3px 10px rgba(124,58,237,.35)}
.hist-exam .fav,.hist-score.fav{color:#0E9F5E}.hist-exam .def,.hist-score.def{color:#D61F3C}
.hist-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 14px}
@media (max-width:800px){.hist-chiffres{grid-template-columns:1fr 1fr}}
.hist-chiffres div{border-radius:10px;padding:10px 12px;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.hist-chiffres b{display:block;font-size:22px;line-height:1.1}.hist-chiffres span{font-size:12.5px}
.hist-chiffres .c1{background:linear-gradient(135deg,#2F80FF,#1E5BE0)}.hist-chiffres .c2{background:linear-gradient(135deg,#19C37D,#0E9F5E)}
.hist-chiffres .c3{background:linear-gradient(135deg,#FFB000,#FF7A1A)}.hist-chiffres .c4{background:linear-gradient(135deg,#9B5CFF,#6C2BD9)}
.hist-filtres{display:flex;gap:6px;margin:0 0 6px}
.hist-filtres button{border-radius:14px;padding:3px 11px;font:inherit;font-size:12.5px;font-weight:700;border:2px solid #E3E7EC;background:#fff;cursor:pointer;color:#1E2A33}
.hist-filtres button.ici{background:#1E2A33;color:#fff;border-color:#1E2A33}
.hist-table{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14px}
.hist-table th{text-align:left;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#6B7781;padding:0 10px;border:0}
.hist-table td{background:#fff;padding:10px;border-top:2px solid #EEF0F3;border-bottom:2px solid #EEF0F3;vertical-align:top}
.hist-table td:first-child{border-left:2px solid #EEF0F3;border-radius:10px 0 0 10px}.hist-table td:last-child{border-right:2px solid #EEF0F3;border-radius:0 10px 10px 0}
.hist-table tr.cette td{border-color:#FF9F43;background:#FFF6EC}
.hist-table tr.exam td{background:#F8F4FF;border-color:#D9C8FF}
.hist-puce{display:inline-block;border-radius:10px;padding:1px 9px;font-size:12px;font-weight:700;color:#fff;margin:1px 0}
.hist-puce.p-remc{background:linear-gradient(135deg,#FF7A1A,#FF3D6E)}.hist-puce.p-exam{background:linear-gradient(135deg,#9B5CFF,#6C2BD9)}
.hist-puce.n1{background:#FF2D2D}.hist-puce.n2{background:#FFB000}.hist-puce.n3{background:#14C26B}.hist-puce.nx,.hist-puce.n0{background:#9AA5B1}
.hist-sig{font-size:12.5px;font-weight:700}.hist-sig.ok{color:#0E9F5E}.hist-sig.ko{color:#D61F3C}
.hist-score{font-size:18px;font-weight:800}
.hist-table .btn.hist-ouvrir{background:#1E2A33;color:#fff;border-color:#1E2A33;box-shadow:none}

/* ------------------------------------------------------------------
   DOUBLONS ET FUSION DE STAGIAIRES (09/11/2026 — vues/fusion.php, doublons.php,
   _doublons.php, fiche_edit.php ; actifs/doublons.js). Rouge = seulement ce qui
   détruit ; vert = valider ; tout passe sur téléphone et iPad.
   ------------------------------------------------------------------ */
.fz-etapes{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.fz-etapes span{padding:4px 11px;border-radius:20px;background:#EEF1F4;font-size:12.5px;font-weight:700;color:var(--gris,#6B7781)}
.fz-etapes span.ici{background:#1E2A33;color:#fff}
.fz-sugg{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--trait,#E3E7EC);border-radius:10px;padding:10px 12px;margin-top:8px;background:#fff}
.fz-badge{display:inline-block;background:#FFE7C2;color:#8A4B00;border-radius:6px;padding:2px 8px;font-size:12px;font-weight:700;margin-top:3px}
.fz-cherche{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.fz-cherche label{flex-basis:100%}
.fz-cherche input[type=search]{flex:1;min-width:200px}
.fz-tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fz-tableau table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.fz-tableau th,.fz-tableau td{padding:8px;border-bottom:1px solid var(--trait,#EEF0F3);text-align:left;vertical-align:top}
.fz-tableau thead th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--gris,#6B7781)}
.fz-tableau tr.fz-diff td{background:#FFF6E5}
.fz-choix{display:flex;gap:6px;align-items:flex-start;cursor:pointer;min-height:32px}
.fz-chiffres{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.fz-chiffres div{border:1px solid var(--trait,#E3E7EC);border-radius:10px;padding:8px 10px;font-size:13.5px;color:var(--gris,#6B7781)}
.fz-chiffres div.plein{color:var(--encre,#1E2A33);border-color:#9BD8B7;background:#F2FBF6}
.fz-chiffres b{font-size:19px;display:block;color:var(--encre,#1E2A33)}
.fz-detail{margin-top:10px}
.fz-conflit{background:#FFF6E5;border:1px solid #F1C67A;border-radius:10px;padding:8px 12px;margin:10px 0 0}
.fz-nom{max-width:340px;font-size:17px}
.fz-paires .fz-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fz-paires .fz-actions form{margin:0}
.fz-fusionnee{background:#F1F3F5;border:1px dashed #AEB7C0;border-radius:10px;padding:10px 14px;margin:10px 0 14px}
.fz-fusionnee p{margin:0 0 4px}
.fz-faite p{margin:0 0 6px}
.fz-annuler{margin:6px 0 0}
.fz-alerte{background:#FFF4E0;border:2px solid #FFB000;border-radius:12px;padding:10px 14px;margin:10px 0 14px}
.fz-alerte p{margin:0 0 6px}
.fz-boutons{display:flex;gap:8px;flex-wrap:wrap}
.fz-frappe .fz-bandeau,.alerte.fz-bandeau{background:#FFF4E0;border:2px solid #FFB000;border-radius:12px;padding:10px 14px;margin:6px 0 12px;color:var(--encre,#1E2A33)}
.fz-bandeau p{margin:0 0 8px}
.fz-trouve .btn{margin-top:6px}
.fz-forcer{margin-top:8px}
.fz-forcer input[type=text]{width:100%;max-width:520px}
@media (max-width:640px){.fz-sugg .btn,.fz-boutons .btn{width:100%;justify-content:center}}
/* L'envoi d'un lien de candidature par SMS, au bureau (12/11/2026). */
.lien-insc{max-width:640px;display:grid;gap:12px}
.lien-insc .champ{display:grid;gap:6px}
.lien-insc .champ input{font:inherit;padding:10px 12px;border:1px solid var(--trait);border-radius:8px;background-color:var(--saisie,#fff);color:var(--encre)}
.lien-insc .case{display:flex;gap:8px;align-items:center}
.lien-insc-deux{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
table.liste-liens{width:100%;border-collapse:collapse}
table.liste-liens th,table.liste-liens td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--trait);vertical-align:top}
.defile-x{overflow-x:auto}