/* 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)}

.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}

.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 */
.menu{display:flex;gap:14px;margin-right:auto;margin-left:10px;font-size:14px;
  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}

/* 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}

/* L'ardoise de signature, quand elle est dans un écran de
   l'application et non dans la page publique — qui a son propre
   habillage. Même geste, même cadre : ce serait étrange que signer
   depuis son bureau ne ressemble pas à signer sur la tablette. */
.ardoise{border:2px dashed var(--trait);background:var(--surface);
  touch-action:none;width:100%;max-width:70ch;height:190px;display:block;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}

/* 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}
.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}
.actions-saisie .btn{margin-top:0;flex:0 0 auto;white-space:nowrap}

/* 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}}

/* ------------------------------------------------------------------
   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}
.case-jour .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 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}

/* ------------------------------------------------------------------
   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}

/* ==================================================================
   MABASE AGENDA — ce qui lui est propre.
   ================================================================== */

/* 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. */
.btn.danger{background:transparent;color:var(--alerte);border-color:var(--alerte);font-weight:600}
.btn.danger:hover{background:var(--alerte);color:#fff;filter:none}

/* Ce qui appelle une correction sans être une erreur. 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. */
.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)}

.liste-nue{list-style:none;padding:0;margin:8px 0;display:flex;flex-direction:column;gap:5px}
.liste-nue li{font-size:13.5px}

.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:hover{border-color:var(--accent)}
.filtres a.ici{border-color:var(--accent);background:var(--accent);color:var(--accent-texte)}

/* Un formulaire dans une rangée de boutons : il ne doit pas faire
   bloc, sinon le bouton part à la ligne tout seul. */
/* Trois boutons côte à côte tenaient sur un écran de bureau et
   sortaient de l'écran d'un téléphone — la page se mettait alors à
   glisser de côté, barre comprise. Ils passent à la ligne. */
.actions-saisie{flex-wrap:wrap}
.actions-saisie form{display:contents}

label.case{display:flex;align-items:flex-start;gap:9px;font-weight:400;margin-top:14px}
label.case input{width:auto;margin:2px 0 0}

/* ------------------------------------------------------------------
   LA LISTE D'UNE JOURNÉE.
   L'heure à gauche, en colonne fixe : c'est ce qu'on balaie du regard
   quand on cherche « à quelle heure », et une heure qui se déplace
   avec la longueur du nom ne se balaie pas.
   ------------------------------------------------------------------ */
.liste-rdv{list-style:none;padding:0;margin:10px 0 18px;display:flex;flex-direction:column;gap:1px}
.ligne-rdv{display:flex;align-items:flex-start;gap:14px;padding:11px 14px;
  background:var(--surface);border:1px solid var(--trait)}
.ligne-rdv + .ligne-rdv{border-top:none}
.rdv-h{flex:none;width:58px;font-variant-numeric:tabular-nums;font-weight:600;font-size:14.5px}
.rdv-h em{display:block;font-style:normal;font-weight:400;font-size:12px;color:var(--gris)}
.rdv-corps{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rdv-corps .petit{font-size:12.5px}
.rdv-tel,.rdv-coord{flex:none;font-size:12.5px;text-align:right}
.ligne-rdv.annule .rdv-corps a{text-decoration:line-through}
.jour-titre{margin:16px 0 0;font-weight:600;font-size:14px}

/* ------------------------------------------------------------------
   LA LISTE DES TÂCHES.
   Le bouton « Faite » est un vrai bouton de formulaire, pas un lien :
   un lien qui modifie se déclenche tout seul le jour où un aspirateur
   de pages passe dessus.
   ------------------------------------------------------------------ */
.liste-taches{list-style:none;padding:0;margin:10px 0 18px;display:flex;flex-direction:column;gap:1px}
.ligne-tache{display:flex;align-items:center;gap:12px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--trait)}
.ligne-tache + .ligne-tache{border-top:none}
/* L'ordre compte : une tâche peut être urgente ET en retard, et c'est
   alors le retard qu'il faut voir. La règle du retard vient donc
   après celle de l'urgence, pour l'emporter. */
.ligne-tache.urgente{border-left:3px solid var(--accent)}
.ligne-tache.retard{border-left:3px solid var(--alerte)}
.ligne-tache.close .tache-corps a{color:var(--gris);text-decoration:line-through}
.tache-corps{display:flex;flex-direction:column;gap:1px;min-width:0}
.coche{flex:none;background:transparent;border:1px solid var(--trait);color:var(--gris);
  font:inherit;font-size:12px;padding:5px 11px;cursor:pointer}
.coche:hover{border-color:var(--accent);color:var(--encre)}

/* ------------------------------------------------------------------
   LE MOIS.
   Sept colonnes égales, des cases qui gardent la même hauteur qu'elles
   soient pleines ou vides — une grille dont les lignes montent et
   descendent ne se lit plus comme un calendrier.
   ------------------------------------------------------------------ */
.calendrier{min-width:720px;border:1px solid var(--trait);background:var(--trait);
  display:flex;flex-direction:column;gap:1px}
.cal-tete{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--trait)}
.cal-tete span{background:var(--surface);padding:7px 9px;font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
/* minmax(0,1fr) et non 1fr : une piste « 1fr » ne descend pas sous la
   largeur minimale de son contenu, et un nom un peu long faisait donc
   gonfler sa colonne — les sept cessaient d'être égales et la
   dernière sortait du cadre. C'est le défaut le plus courant des
   grilles CSS, et le plus difficile à voir sans regarder. */
.cal-semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;
  background:var(--trait)}
.cal-jour{background:var(--surface);min-height:96px;min-width:0;padding:7px 8px;
  display:flex;flex-direction:column;gap:3px;text-decoration:none;color:inherit}
.cal-jour:hover{background:var(--papier)}
.cal-jour.dehors{background:var(--papier)}
.cal-jour.dehors .cal-num{color:var(--gris)}
.cal-jour.ce-jour{box-shadow:inset 0 0 0 2px var(--accent)}
.cal-num{font-variant-numeric:tabular-nums;font-weight:600;font-size:13px}
.cal-ferie{font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.04em}
.cal-rdv{font-size:11.5px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-rdv b{font-variant-numeric:tabular-nums;font-weight:600}
.cal-rdv.barre-texte{text-decoration:line-through;color:var(--gris)}
.cal-tache{font-size:11px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-tache.close{text-decoration:line-through}
.cal-plus{font-size:11px;color:var(--accent-fonce,#B4541F)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cal-plus{color:var(--accent)}
}
:root[data-theme="dark"] .cal-plus{color:var(--accent)}

/* Un rendez-vous passé se lit, mais ne se réclame plus. */
tr.passe td{color:var(--gris)}
tr.passe td .lien-fort{color:var(--gris)}

/* ------------------------------------------------------------------
   LES CHAMPS D'UN FORMULAIRE, CÔTE À CÔTE.

   « .colonnes » existait déjà, mais ce sont des colonnes de CARTES —
   avec bordure, ombre et fond. Les employer pour ranger deux champs
   sur une ligne entourait chaque champ d'un cadre, et la page se
   mettait à ressembler à un tableau de bord au lieu d'un formulaire.
   D'où cette rangée-ci : elle range, elle ne dessine rien.
   ------------------------------------------------------------------ */
.rangee{display:grid;gap:0 16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}

/* La règle d'origine ne listait que quelques types d'entrée ; une
   adresse, un téléphone ou un nombre y échappaient et gardaient
   l'habillage par défaut du navigateur — deux champs voisins n'avaient
   alors pas la même tête. */
.champ input,.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}
.champ input[type=checkbox]{width:auto;padding:0}
.saisie.ample{max-width:760px}


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

   En haut c'est un tiroir qu'il faut savoir ouvrir ; ici c'est ecrit.
   On arrive au pied d'une page parce qu'on a fini d'y lire — c'est le
   moment ou l'on va ailleurs, et c'est la 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}}

/* ------------------------------------------------------------------
   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}
.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}

/* 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)}

/* La question à l'assistance, dans la barre du haut (30/09/2026). */
.question-notice{flex:1 1 260px;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}}