/* ==========================================================================
   LC GESTION — Extranet (espace stagiaire / intervenant)
   Identité DISTINCTE du back-office : coquille responsive mobile-first,
   colonne unique centrée (pas de sidebar desktop, pas de cadre téléphone).
   Univers chromatique LC conservé (orange / ardoise / pétrole).
   Feuille AUTONOME : ne dépend pas de lc-gestion.css.
   ========================================================================== */

:root {
  --lc-orange:        #E67E22;
  --lc-orange-dark:   #B85C12;  /* Corrige (lot contrastes raisonnable) : la mention "AA large sur blanc/creme" etait fausse — sur --lc-surface (blanc pur) : 4.587:1, passe DE JUSTESSE (+0.09 seulement) ; sur --lc-fond OU --lc-orange-50 : 4.30:1, ECHOUE l'AA texte 4.5:1. Decision de marque non traitee pour l'instant (jean-mi). Pour du texte sur --lc-orange-50 specifiquement, --lc-orange-darker passe deja (7.94:1) : voir .x-tab. */
  --lc-orange-darker: #7A3C0A;
  --lc-orange-50:     #FFF6EE;
  --lc-orange-100:    #FDE6CF;
  --lc-ardoise:       #22324A;
  --lc-petrole:       #137E73;
  --lc-petrole-50:    #E0F0EC;

  --lc-fond:      #FBF7F1;
  --lc-surface:   #FFFFFF;
  --lc-text:      #22324A;
  --lc-text-muted:#5E6675;
  --lc-border:    #928D85;  /* assombri (lot contrastes raisonnable), meme valeur que lc-gestion.css : 3.09-3.30:1, ancien #ECE3D6 ne faisait que 1.19-1.27:1 */
  --lc-border-2:  #948D83;  /* meme assombrissement, ancien #E0D6C6 ne faisait que 1.35-1.44:1 */

  --lc-ok:   #2E9E6B; --lc-ok-bg:   #E3F1EA; --lc-ok-tx:   #1F6F4B;
  --lc-no:   #D0453B; --lc-no-bg:   #F8E3E1; --lc-no-tx:   #9C2E26;
  --lc-warn: #C9821B; --lc-warn-bg: #FBEFD6; --lc-warn-tx: #8A5510;
  --lc-info: #2F6FB0; --lc-info-bg: #E4EEF7; --lc-info-tx: #1C4E80;

  --lc-radius:    12px;
  --lc-radius-sm: 8px;
  --lc-radius-xs: 6px;  /* badges, mini-boutons, petites pastilles */
  --lc-shadow:    0 1px 2px rgba(34,50,74,.05), 0 1px 3px rgba(34,50,74,.06);
  --lc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--lc-fond);
  color: var(--lc-text);
  font-family: var(--lc-font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 21px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h1, h2, h3, h4 { color: var(--lc-ardoise); font-weight: 600; margin: 0 0 .5em; line-height: 1.25; }
a { color: var(--lc-orange-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--lc-orange); }  /* bleu natif du navigateur sinon, hors charte */
:focus-visible { outline: 2px solid var(--lc-orange); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ===== Coquille responsive (remplace .phone-wrap / .phone / .screen) ===== */
.x-shell {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--lc-surface);
  box-shadow: 0 0 0 1px var(--lc-border), 0 10px 40px rgba(34,50,74,.06);
}
.x-top {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  /* Zones de securite (lot safe-area, 27/08/2026, cf. RAPPORT_PHASE0_
     BARRE_NAV.md §6) : PWA installee (`display:standalone`, viewport-fit=
     cover pose dans base.html) -> plus de chrome navigateur, le contenu va
     jusqu'aux bords physiques (encoche, coins arrondis, barre d'etat).
     `max(valeur actuelle, env(...))` -- JAMAIS `env()` seul : sur un
     navigateur classique/ordinateur, `env(safe-area-inset-*)` vaut 0, et
     l'ecraser remplacerait purement et simplement le padding existant par
     zero. `max()` garantit l'un OU l'autre, jamais moins que l'existant. */
  padding-top: max(14px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  background: var(--lc-ardoise); color: #fff;
  position: sticky; top: 0; z-index: 10;
}
.x-back {
  background: rgba(255,255,255,.12); border: none; color: #fff;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.x-brand { display: flex; align-items: center; gap: 11px; color: #fff; }
.x-brand:hover { text-decoration: none; }
.x-mark {
  width: 36px; height: 36px; border-radius: var(--lc-radius-xs); background: var(--lc-orange);
  display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; flex: none;
}
/* Logo de l'organisme en tete (lot logo-extranet) : meme encombrement que la
   pastille .x-mark qu'il remplace, aucun aplat derriere. Sur la vitrine,
   public.css (charge APRES) garde sa propre taille. */
.x-logo { width: 36px; height: 36px; object-fit: contain; flex: none; }
.x-brand-txt { font-weight: 600; font-size: 16px; }
/* Nom de la personne connectée (en-tête) : à droite, discret sur l'ardoise. */
.x-user { margin-left: auto; font-size: 14px; color: #aeb7c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-title { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.x-title strong { font-size: 17px; font-weight: 600; }
.x-title span { font-size: 13px; color: #aeb7c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Enveloppe panneau + contenu (lot nav-laterale, 27/08/2026) : colonne par
   defaut (le panneau est position:fixed, hors flux, sur petit ecran --
   seul .x-main y participe reellement) ; passe en ligne des 900px, quand
   le panneau redevient un veritable enfant du flux (voir media query plus
   bas). */
.x-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.x-main {
  flex: 1; min-width: 0;
  padding: 18px;
  /* Cotes (encoche/coins ronds en paysage, cf. .x-top ci-dessus) : meme
     patron max(), memes raisons. */
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 14px;
}

/* ===== Navigation laterale (lot nav-laterale, 27/08/2026) =====
   Remplace le bandeau du bas (.x-tabs/.x-tab ci-dessous) par un panneau
   lateral -- permanent des 900px (meme seuil que le reste de la coquille,
   cf. Phase 0 Q6/Q7), replie derriere un bouton hamburger sous 900px.
   Point de depart : rapports/RAPPORT_PHASE0_NAV_LATERALE.md.

   Mecanisme (Q1) : case a cocher masquee (`.sr-only`, DEJA existante,
   ligne 57) + <label> hamburger + <label> plein ecran pour la fermeture
   au clic exterieur -- ZERO JavaScript, meme mecanique que `.tabset`
   (lc-gestion.css:522-538, deja utilisee dans ce depot pour des onglets
   sans JS). `visibility` (jamais seule `transform`) : un panneau hors
   ecran garde ses liens dans l'ordre de tabulation si on ne masque QUE
   par transform -- un clavier les traverserait avant le contenu de la
   page, invisibles. Le `transition-delay` sur `visibility` laisse
   l'animation de glissement se jouer dans les deux sens (ouverture :
   visible immediatement ; fermeture : invisible seulement apres le
   glissement). `:focus-visible` sur la case (masquee) redirige l'anneau
   de focus sur le bouton VISIBLE (`.x-burger`), sibling direct. */
.x-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
  /* Largeur (lot nav-finitions, 27/08/2026) : mesuree, pas devinee -- « Mes
     pieces Qualiopi » (7e entree, casquette INTERVENANT, la plus longue)
     fait ~122px de texte a 14px/500 (Segoe UI, proche d'Inter) + 24px de
     padding (12px de chaque cote, ligne 169) = ~146px necessaires. 200px
     laisse ~54px d'air (+37%) sans jamais friser le bord du panneau, tout
     en laissant largement voir le contenu derriere sur un telephone --
     l'ancien 260px (82vw) couvrait ~75% de l'ecran, biffait la sensation
     de surcouche. max-width abaisse en cascade (82vw -> 78vw), simple
     filet sur un ecran inhabituellement etroit (<256px) : n'intervient
     jamais sur un telephone reel. */
  width: 200px; max-width: 78vw;
  background: var(--lc-surface);
  border-right: 1px solid var(--lc-border);
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 12px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(12px, env(safe-area-inset-left));
  overflow-y: auto;
  visibility: hidden;
  transform: translateX(-100%);
  transition: transform .18s ease, visibility 0s linear .18s;
}
.nav-toggle-cb:checked ~ .x-body .x-side {
  visibility: visible; transform: translateX(0);
  transition: transform .18s ease, visibility 0s linear 0s;
}
.x-backdrop { display: none; }
.nav-toggle-cb:checked ~ .x-body .x-backdrop {
  display: block; position: fixed; inset: 0; z-index: 20;
  background: rgba(34,50,74,.4);
}
.x-burger {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,255,255,.12); color: #fff; border: none;
  display: grid; place-items: center; cursor: pointer; flex: none;
}
.nav-toggle-cb:focus-visible ~ .x-top .x-burger { outline: 2px solid var(--lc-orange); outline-offset: 2px; }
/* Fermer (lot MENU-FERMER) : en tete du panneau ouvert, qui couvre le burger. */
.x-fermer {
  align-self: flex-end; padding: 6px 10px; margin-bottom: 8px;
  border-radius: 11px; border: 1px solid var(--lc-border);
  font-size: 13px; cursor: pointer;
}
/* Icones (lot icones-nav, 27/08/2026) : display:flex + gap, EXACT patron
   .nav-i du back-office (lc-gestion.css:574-575) -- icone decorative avant
   le libelle, jamais l'inverse. border-left TRANSPARENT par defaut (pas
   "none") : la largeur de la ligne ne bouge PAS entre etat actif/inactif,
   seule sa couleur change (evite un texte qui saute de 3px au clic).

   justify-content/line-height EXPLICITES (lot alignement-deconnexion,
   27/08/2026) : Deconnexion est un <button> (dans un <form>, POST --
   protection contre un prechargement de lien qui declencherait la
   deconnexion, mecanisme INTENTIONNEL, non touche), les 6 autres sont des
   <a>. La regle generique ``.btn, button`` (ligne ~227) pose
   ``justify-content: center`` et ``line-height: 1`` (dans son raccourci
   ``font``) : ``.x-side-i`` ne les redeclarait pas, donc SEUL le bouton
   (le seul <button>, jamais les <a>) les recevait -- icone+libelle
   centres au lieu d'alignes a gauche, d'ou le decalage vu a l'ecran.
   Poses ici EXPLICITEMENT pour gagner sur la specificite de la regle
   generique -- ni marge negative, ni positionnement ad hoc : on neutralise
   la fuite, on ne deplace rien. */
.x-side-i {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  padding: 10px 12px; border-radius: 8px;
  border: none; border-left: 3px solid transparent;
  color: var(--lc-text-muted); font-size: 14px; font-weight: 500; line-height: 1.55;
  text-decoration: none; background: none;
  text-align: left; cursor: pointer;
}
.x-side-i .ic { flex: none; width: 18px; height: 18px; }
.x-side-i:hover { text-decoration: none; background: var(--lc-orange-50); color: var(--lc-orange-darker); }
/* Marqueur actif (lot icones-nav) : fond crème EXISTANT + trait orange au
   bord gauche, decision de Jean-Michel -- pas de pastille saillante, pas
   d'icone qui deborde du panneau (coupee sur telephone, ecarte explicitement). */
.x-side-i.is-active {
  color: var(--lc-orange-darker); background: var(--lc-orange-50); font-weight: 600;
  border-left-color: var(--lc-orange);
}
.x-side form { display: contents; }

/* ===== Navigation (bas) — ORPHELINE (lot nav-laterale, 27/08/2026) =====
   .x-tabs (le CONTENEUR) n'a plus aucun consommateur depuis ce lot :
   supprimee. .x-tab (l'ITEM), lui, reste utilise SANS RAPPORT AVEC LA NAV
   par pieces_qualiopi.html (bouton « Supprimer ») -- Phase 0, piege
   signale explicitement : conserve tel quel, apparence inchangee pour ce
   bouton, jamais reveille comme navigation. */
.x-tab {
  flex: 1 0 auto; min-width: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px; border-radius: 8px;
  color: var(--lc-text-muted); font-size: 12px; font-weight: 500;
  background: none; border: none; cursor: pointer; text-align: center;
}
/* --lc-orange-dark sur --lc-orange-50 n'atteint que 4.30:1 (echoue l'AA texte
   4.5:1, verifie par calcul) — --lc-orange-dark est partagee avec le lien
   global, les boutons, les autres survols : corrige ICI seulement, avec
   --lc-orange-darker (deja dans la charte, memes usages que badge-brand),
   7.94:1, meme famille de teinte. Etat actif/inactif verifie DISTINCT apres
   correction (voir rapport du lot) : le texte fonce + le fond teinte
   restent l'un ET l'autre reserves a l'etat actif. */
.x-tab:hover { text-decoration: none; background: var(--lc-orange-50); color: var(--lc-orange-darker); }
.x-tab.is-active { color: var(--lc-orange-darker); background: var(--lc-orange-50); }
.x-tab.is-disabled { color: #b9bcc4; cursor: default; pointer-events: none; }

/* ===== Boutons ===== */
.btn, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 15px/1 var(--lc-font);
  padding: 12px 18px; border-radius: var(--lc-radius-sm);
  border: 1px solid transparent; background: var(--lc-orange); color: #fff;
  cursor: pointer; transition: .12s ease;
}
.btn:hover, button:hover { background: var(--lc-orange-dark); }
.btn:focus-visible, button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230,126,34,.40); }
.btn-secondary { background: var(--lc-surface); color: var(--lc-ardoise); border-color: var(--lc-border-2); }
.btn-secondary:hover { background: var(--lc-orange-50); border-color: var(--lc-orange); color: var(--lc-orange-dark); }
.btn-ghost { background: transparent; color: var(--lc-text-muted); }
.btn-ghost:hover { background: rgba(34,50,74,.06); color: var(--lc-ardoise); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 22px; font-size: 16px; min-height: 52px; }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Champs ===== */
label { font-size: 13px; font-weight: 500; color: var(--lc-ardoise); display: block; margin-bottom: 6px; }
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=tel], input[type=number], input[type=date], input[type=file],
input:not([type]), select, textarea, .input {
  font: 400 16px/1.4 var(--lc-font);
  padding: 12px 14px; width: 100%;
  border: 1px solid var(--lc-border-2); border-radius: var(--lc-radius-sm);
  background: var(--lc-surface); color: var(--lc-text);
}
input:focus, select:focus, textarea:focus, .input:focus {
  outline: none; border-color: var(--lc-orange); box-shadow: 0 0 0 3px rgba(230,126,34,.18);
}

/* ===== Messages (erreur / alerte) ===== */
.erreur, .alerte {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--lc-radius-sm);
  font-size: 14px; border: 1px solid;
}
.erreur { background: var(--lc-no-bg); border-color: #EEB3AD; color: var(--lc-no-tx); }
.alerte { background: var(--lc-warn-bg); border-color: #EECF93; color: var(--lc-warn-tx); }

/* ===== Bandeau du tunnel d'inscription (accueil stagiaire) =====
   Radius/padding/marge COMMUNS aux 3 etats du depot (lot bandeau-depot,
   24/08/2026) : etat confortable garde son accent inline (border-left
   colore, patron des autres etapes du tunnel) ; .erreur/.alerte, elles,
   pilotent fond/bordure/couleur -- mais leur display:flex (pense pour un
   message court, icone+texte) empilerait titre/texte/boutons en ligne ;
   ce bandeau porte plusieurs blocs, il reste en colonne. */
.x-tunnel-banniere { border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.x-tunnel-banniere.erreur, .x-tunnel-banniere.alerte { display: block; }

/* ===== Fil d'Ariane ===== */
.breadcrumb { font-size: 13px; color: var(--lc-text-muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.breadcrumb a { color: var(--lc-text-muted); }
.breadcrumb a:hover { color: var(--lc-orange-dark); }

/* ===== Cartes / sections ===== */
.x-card { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); box-shadow: var(--lc-shadow); }
.x-h { font-size: 13px; color: var(--lc-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin: 4px 2px -2px; }
.x-sec { padding: 16px; }
.x-sec h3 { margin-bottom: 8px; }

/* ===== Compteurs ===== */
.counters { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.counter { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); padding: 12px 8px; text-align: center; }
.counter .n { font-size: 24px; font-weight: 600; color: var(--lc-orange); }
.counter .t { font-size: 11px; color: var(--lc-text-muted); margin-top: 2px; line-height: 1.3; }

/* ===== Carte session ===== */
.sess-card { display: flex; align-items: center; gap: 12px; background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); padding: 14px; text-decoration: none; }
.sess-card:hover { text-decoration: none; border-color: var(--lc-orange); }
.sess-card .body { flex: 1; min-width: 0; }
.sess-card .ttl { font-weight: 600; color: var(--lc-ardoise); font-size: 15px; }
.sess-card .meta { font-size: 13px; color: var(--lc-text-muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sess-card .chev { color: var(--lc-text-muted); flex: none; }
/* Icone de destination (lot icones-cartes, 27/08/2026) : meme role que le
   chevron -- flex:none (jamais etiree), couleur muette (decorative, le
   titre porte le sens). Le gap:12px de .sess-card espace icone/texte/chevron
   sans regle dediee. */
.sess-card .ic { color: var(--lc-text-muted); flex: none; }

/* ===== Listes ===== */
.x-list { list-style: none; margin: 0; padding: 0; }
/* Lot padding-participants (27/08/2026) : le bloc Participants de la fiche
   session intervenant (session_apercu_intervenant.html) est le SEUL
   endroit ou `.x-list` est enfant DIRECT de `.x-card`, sans le `.x-sec`
   (padding:16px) qui donne sa marge interieure a tous les autres blocs de
   la page (ex. Lieu, juste au-dessus) -- les noms de la colonne de gauche
   touchaient donc le bord du cadre. Cible la STRUCTURE (enfant direct),
   pas le gabarit -- verifie sur les 15 gabarits qui utilisent `.x-list`
   (grep exhaustif) : les autres sont soit hors de tout `.x-card` (page
   nue, deja margee par `.x-main`), soit imbriques sous `.x-sec`
   (session_programme.html) -- aucun ne correspond a `.x-card > .x-list`,
   donc aucun autre ecran n'est touche. Meme valeur que `.x-sec` (16px),
   jamais une valeur inventee. */
.x-card > .x-list { padding: 16px; }
/* `flex-wrap: wrap` (lot ligne-session, 30/09/2026) : sans lui, une ligne de
   liste est une rangee flex INSECABLE -- les elements qui ne peuvent pas
   retrecir (les `.pill`, `white-space: nowrap`) debordent a DROITE du cadre et
   font defiler la PAGE ENTIERE horizontalement (constat telephone 417px,
   accueil stagiaire, liste « Terminées » : titre + dates + 4 pastilles).
   Corollaire sur ordinateur : le flex sans wrap RETRECIT les elements jusqu'a
   leur min-content -- les dates se cassaient mot a mot (« du / 21/09/2026 /
   au / 23/09/2026 ») pour tenir sur une rangee unique ; en wrap, un element
   qui ne tient pas passe a la ligne au lieu d'etre comprime.
   Regle posee sur `.x-li` (la classe PARTAGEE, 13 gabarits) et non sur la
   seule ligne de session : le debordement vient de la rangee, pas du
   contenu -- un correctif local a l'accueil laisserait toutes les autres
   listes deborder de la meme facon. */
.x-li { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--lc-border); }
.x-li:last-child { border-bottom: none; }
/* Dates d'une ligne de session (« du JJ/MM/AAAA au JJ/MM/AAAA », macro
   `liste_sessions_groupee`, une SEULE chaine venue de `resume_session`) : une
   plage de dates ne se lit pas coupee. Classe DEDIEE, jamais `.x-li > .meta` :
   d'autres gabarits y mettent des phrases entieres (documents_intervenant,
   elearning) qu'il faut au contraire laisser se replier. */
.x-dates { white-space: nowrap; }
.x-li .num { width: 24px; height: 24px; border-radius: 50%; background: var(--lc-orange-50); color: var(--lc-orange-dark); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; }
/* Exception (lot alignement-arbitrage) : une ligne qui contient une
   sous-liste n'est pas une ligne mais un bloc ; son titre doit rester
   aligne sur le PREMIER item, pas au milieu d'une grille qui peut faire
   plusieurs rangees (cf. session_programme.html, bloc « Jour N »,
   RAPPORT_LIENS_EXTRANET.md section Alignement vertical). Cible la
   STRUCTURE (`:has(> .x-list)`), pas le gabarit -- tout futur `.x-li` du
   meme motif est couvert d'office. Enfant DIRECT uniquement, meme
   discipline que `.x-li > a`/`.doc-row > .dl` : la sous-liste EST un
   enfant direct dans ce motif, un `.x-list` plus profond ne doit pas
   declencher l'exception. `:has()` deja utilise ailleurs dans ce fichier
   (`.opt:has(input:checked)`, `.stars label:has(...)`) : support etabli,
   pas une premiere. */
.x-li:has(> .x-list) { align-items: flex-start; }
/* Lien d'action d'une ligne de liste (lot liens-extranet, 23/08/2026) :
   sans cette regle le texte n'etait qu'ORANGE PAR DEFAUT (regle `a`
   globale plus haut), rien ne le distinguait d'un intitule -- constat
   Phase 0 sur 3 ecrans, en realite partage par 8 gabarits (voir rapport).
   ENFANT DIRECT UNIQUEMENT (`>`, jamais `.x-li a` en descendant) : verifie
   sur les 13 gabarits qui consomment `.x-li` (RAPPORT_PHASE0_LIENS_
   EXTRANET_13.md) que l'action principale d'une ligne y est TOUJOURS un
   enfant direct -- le seul `<a>` niche plus bas (le `tel:` du participant
   de session_apercu_intervenant.html, dans `.meta`) n'est PAS l'action de
   la ligne et ne doit pas recevoir ce traitement ; `.x-li a` l'attraperait
   a tort, `.x-li > a` l'exclut structurellement.
   CORRECTIF DE RENDU : un texte orange souligne restait indistinct (deja
   orange par defaut) -- le manque etait un CADRE, pas une couleur. Petit
   bouton borde plutot qu'un lien souligne : `--lc-orange` en texte ET en
   bordure (deja la teinte de la charte), `padding`/`border-radius` REPRIS
   TELS QUELS de `.btn`/`.btn-secondary` (ligne 130, `.btn-secondary` ne
   redeclare ni l'un ni l'autre -- toujours pairee a `.btn` dans le HTML),
   `inline-block` pour que le cadre entoure le texte seul. Survol :
   `--lc-orange-100`, deja consomme par `.doc-row > .dl:hover` (etape 3) --
   aucun token nouveau. Anneau de focus INCHANGE. */
.x-li > a {
  display: inline-block;
  padding: 12px 18px;
  border: 1px solid var(--lc-orange);
  border-radius: var(--lc-radius-sm);
  color: var(--lc-orange);
  text-decoration: none;
}
.x-li > a:hover { background: var(--lc-orange-100); }
.x-li > a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230,126,34,.40); }

/* ===== Pastille de statut (fait / a faire) ===== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent; white-space: nowrap;
}
.pill.is-done { background: var(--lc-ok-bg);   color: var(--lc-ok-tx);   border-color: #BFE3D0; }
.pill.is-todo { background: var(--lc-warn-bg); color: var(--lc-warn-tx); border-color: #EECF93; }

/* ===== Etats generiques + reset bouton-pill (FIX-2b, PARTAGES stagiaire/
   intervenant : grilles d'acquis, compteurs de cartes, pastilles d'etat).
   Le style global `button` (orange plein) fuyait sur <button class="pill">
   -> reset explicite ; 4 etats alignes sur les badges BO. ===== */
button.pill { background: transparent; color: inherit; font: 600 12px/1.5 var(--lc-font); cursor: pointer; }
.pill.is-ok   { background: #E1F5EE; color: #0F6E56; border-color: #BFE3D0; }
.pill.is-warn { background: #FAEEDA; color: #854F0B; border-color: #EECF93; }
.pill.is-ko   { background: #FCEBEB; color: #A32D2D; border-color: #EEB3AD; }
.pill.is-off  { background: #EEEAE2; color: #54606E; border-color: #E2DCD0; }

/* ===== Grille compacte (acquis) : alignee sur la grille BO ===== */
.grille-compacte th, .grille-compacte td { padding: 6px 8px; }
.grille-compacte .col-fixe { position: sticky; left: 0; background: #fff; z-index: 1; }
.grille-compacte thead th { position: sticky; top: 0; background: #fff; z-index: 2; }
.grille-compacte thead th.col-fixe { z-index: 3; }

/* ===== Bandeau session (macro bandeau_session) : ardoise + cover en fond ===== */
.bandeau-session { border-radius: 12px; padding: 24px 20px; color: #fff; background: #22324A center/cover no-repeat; margin-bottom: 16px; }
.bandeau-session h1 { color: #fff; margin: 0 0 4px; }
.bandeau-session .ref { opacity: .85; font-size: 13px; margin: 0; }

/* ===== Ligne document ===== */
.doc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.doc-row .ic-doc { color: var(--lc-petrole); flex: none; }
.doc-row .d-body { flex: 1; min-width: 0; }
.doc-row .d-ttl { font-weight: 500; color: var(--lc-ardoise); font-size: 14px; }
.doc-row .d-sub { font-size: 12px; color: var(--lc-text-muted); }
.dl { width: 40px; height: 40px; border-radius: var(--lc-radius-sm); background: var(--lc-orange-50); color: var(--lc-orange-dark); display: grid; place-items: center; border: none; cursor: pointer; flex: none; }
/* Etape 3 (lot liens-extranet) : `.dl` porte deja une couleur/fond visibles
   au repos mais AUCUNE bascule au survol/focus -- meme defaut que les
   liens de `.x-li` ci-dessus, ici cote pendant FORMATEUR
   (documents_intervenant.html) de session_documents.html cote stagiaire.
   Enfant DIRECT de `.doc-row` (verifie sur ses 4 usages : documents.html
   x3, documents_intervenant.html, pieces_qualiopi.html -- `.dl` n'existe
   nulle part ailleurs). `--lc-orange-100` : token DEJA DEFINI plus haut
   mais jusqu'ici jamais consomme, pas une couleur nouvelle -- la seule
   valeur du jeu `--lc-orange-*` restee inutilisee, distincte de `-50`
   (repos) pour que la bascule se voie. Meme anneau de focus que ci-dessus. */
.doc-row > .dl:hover { background: var(--lc-orange-100); }
.doc-row > .dl:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(230,126,34,.40); }

/* ===== Questionnaire ===== */
.q { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); padding: 16px; }
.q .qx { font-weight: 600; color: var(--lc-ardoise); font-size: 15px; margin-bottom: 12px; }
.q .qx span { color: var(--lc-orange); }
.scale { display: flex; gap: 8px; }
.scale label { flex: 1; margin: 0; }
.scale input { position: absolute; opacity: 0; }
.scale .b { display: grid; place-items: center; height: 48px; border: 1px solid var(--lc-border-2); border-radius: var(--lc-radius-sm); font-weight: 600; color: var(--lc-ardoise); cursor: pointer; }
.scale input:checked + .b { background: var(--lc-orange); color: #fff; border-color: var(--lc-orange); }
.scale-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--lc-text-muted); margin-top: 6px; }
.opt { display: flex; align-items: center; gap: 11px; padding: 13px 12px; border: 1px solid var(--lc-border-2); border-radius: var(--lc-radius-sm); cursor: pointer; margin-bottom: 8px; font-size: 14px; }
.opt input { position: absolute; opacity: 0; }
.opt .mark { width: 22px; height: 22px; border: 2px solid var(--lc-border-2); flex: none; display: grid; place-items: center; }
/* Le glyphe (coche SVG, ex. reglement.html) est TOUJOURS dans le DOM, meme
   case decochee -- rien ne masquait sa visibilite avant l'etat coche : il se
   lisait comme deja valide (rapports/RAPPORT_LOT_CASE_REGLEMENT.md). Case
   NON cochee = boite vide, seul le fond/bordure de .mark change avec
   :checked (regle plus bas) — le glyphe suit la meme logique. */
.opt .mark svg { opacity: 0; }
.opt.radio .mark { border-radius: 50%; }
.opt.check .mark { border-radius: 6px; }
.opt input:checked ~ .mark { border-color: var(--lc-orange); background: var(--lc-orange); color: #fff; }
.opt input:checked ~ .mark svg { opacity: 1; }
.opt input:checked ~ span:last-child { color: var(--lc-ardoise); font-weight: 500; }
.opt:has(input:checked) { border-color: var(--lc-orange); background: var(--lc-orange-50); }

/* ===== Grille de choix (chantier A) ===== */
.grille-choix { border-collapse: collapse; width: 100%; font-size: 14px; }
.grille-choix th, .grille-choix td { border: 1px solid var(--lc-border); padding: 10px 12px; }
.grille-choix thead th {
  background: var(--lc-orange-50); color: var(--lc-ardoise);
  font-size: 12.5px; font-weight: 600; text-align: center; white-space: nowrap;
}
.grille-choix tbody td { text-align: center; }
.grille-choix tbody td:first-child {
  text-align: left; min-width: 180px; color: var(--lc-ardoise); font-weight: 500;
}
.grille-choix tbody tr:nth-child(even) { background: var(--lc-fond); }
.grille-choix input[type=radio] {
  width: 22px; height: 22px; accent-color: var(--lc-orange); cursor: pointer;
}
@media (max-width: 560px) {
  .grille-choix th, .grille-choix td { padding: 8px 8px; }
  .grille-choix tbody td:first-child { min-width: 140px; }
}

/* ===== Score étoiles (type score, 5 fixes) ===== */
.stars { display: flex; gap: 4px; }
.stars label { margin: 0; cursor: pointer; position: relative; }
.stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars .star {
  display: block; padding: 2px; font-size: 34px; line-height: 1;
  color: var(--lc-border-2); transition: color .12s ease, transform .12s ease;
}
/* état sélectionné : l'étoile cochée ET toutes celles avant elle */
.stars label:has(input:checked) .star,
.stars label:has(~ label input:checked) .star { color: var(--lc-orange); }
/* survol : surbrillance jusqu'à l'étoile survolée */
.stars label:hover .star,
.stars label:has(~ label:hover) .star { color: var(--lc-orange-dark); }
.stars label:hover .star { transform: scale(1.12); }
.stars label:focus-within .star {
  outline: 2px solid var(--lc-orange); outline-offset: 2px; border-radius: 6px;
}

/* ===== Émargement / signature ===== */
.x-slot { background: var(--lc-surface); border: 1px solid var(--lc-border); border-radius: var(--lc-radius); padding: 14px; }
.x-slot.is-active { border-color: var(--lc-orange); box-shadow: 0 0 0 3px rgba(230,126,34,.12); }
.x-slot-h { display: flex; align-items: center; justify-content: space-between; }
.x-slot-h strong { font-size: 16px; display: block; }
.x-slot-h span { font-size: 13px; color: var(--lc-text-muted); }
.x-done { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 14px; color: var(--lc-ok-tx); font-weight: 500; }
.x-instr { font-size: 14px; color: var(--lc-text-muted); margin: 14px 0 8px; }
.canvas-box { position: relative; min-height: 190px; background: var(--lc-orange-50); border: 2px dashed var(--lc-border-2); border-radius: var(--lc-radius); overflow: hidden; touch-action: none; }
.canvas-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #c8b89f; font-size: 17px; pointer-events: none; }
.x-actions { display: flex; gap: 10px; margin-top: 12px; }
.sign-ok { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 8px 8px; color: var(--lc-ok-tx); }
.sign-ok .ic { color: var(--lc-ok); }
.x-foot { font-size: 12px; color: var(--lc-text-muted); text-align: center; line-height: 1.5; margin: 4px; }

/* ===== PDF / règlement ===== */
.pdfbox { background: #fff; border: 1px solid var(--lc-border); border-radius: var(--lc-radius); min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--lc-text-muted); }
.pdfbox .ic { color: var(--lc-no); }

/* ===== Connexion ===== */
/* La carte est posee en HAUT de .x-main, centree HORIZONTALEMENT : sa
   largeur fixe la laissait sinon collee a gauche depuis qu'aucun gabarit ne
   pose plus le conteneur de centrage plein ecran qui l'enveloppait -- regle
   orpheline retiree le 29/09/2026, verrouillee par test_carte_centree.
   Jamais de centrage vertical : l'en-tete de l'extranet reste le haut de
   page. */
.login { width: 360px; max-width: 100%; margin: 0 auto; }
.login h1 { text-align: center; }
.login .lead { text-align: center; color: var(--lc-text-muted); font-size: 14px; margin: 0 0 20px; }
.lead { color: var(--lc-text-muted); }
.sent-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--lc-ok-bg); color: var(--lc-ok); display: grid; place-items: center; margin: 0 auto 14px; }

/* ===== Responsive ===== */
@media (max-width: 560px) {
  .x-shell { box-shadow: none; max-width: 100%; }
  .x-main { padding: 14px; }
  .counters { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  /* En-tete sur deux lignes (lot nav-finitions, 27/08/2026) : hamburger +
     pastille LC + « Espace formation » + nom connecte se disputaient la
     largeur -- le nom ne doit JAMAIS disparaitre (savoir sous quelle
     identite on est connecte compte, poste partage formateur/stagiaire),
     le titre, lui, est deja porte par la pastille "LC" (lien vers
     l'accueil, inchangee) : titre MASQUE sous ce seuil, pas raccourci --
     rien a dupliquer, aucune deuxieme chaine a maintenir. */
  .x-brand-txt { display: none; }
}

/* Grand ecran (ordinateur) : plus d'air. SOUS ce seuil, rien ne change —
   l'affichage telephone reste exactement celui d'aujourd'hui (lot largeur,
   cf. rapports/RAPPORT_LOT_EXTRANET_LARGEUR.md pour le choix du seuil et
   de la largeur). .x-list est une classe partagee (15 gabarits, toujours
   comme conteneur de .x-li uniquement, verifie avant ce lot) : une regle
   sur le conteneur suffit, aucun gabarit touche.
   minmax(0, 1fr), pas 1fr seul (regression corrigee, lot grille colonnes) :
   sans le minmax, la largeur minimale par defaut d'une cellule de grille
   est son contenu (min-content), pas 1fr — un .x-li plus long que son
   voisin pousse SA colonne au-dela de sa part egale. Plusieurs .x-list
   INDEPENDANTES empilees (ex. un .x-list par « Jour » du programme,
   session_programme.html) calculent alors chacune sa propre largeur de
   colonne 1 selon SON contenu -> la colonne 2 demarre a une abscisse
   differente d'un bloc a l'autre, au lieu de s'aligner. minmax(0, 1fr)
   ignore le contenu pour la largeur minimale : deux colonnes strictement
   egales, alignees entre TOUTES les .x-list, quel que soit leur contenu. */
@media (min-width: 900px) {
  .x-shell { max-width: 1100px; }
  .x-list  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }

  /* Defaut residuel (rapports/RAPPORT_LOT_GRILLE_SUITE.md) : dans
     session_programme.html, .x-list (items du jour) est imbriquee dans
     .x-li (le bloc « Jour N »), qui est display:flex (regle non
     conditionnelle, ligne 193). Sans regle explicite, un enfant flex se
     dimensionne sur SON contenu (largeur fit-content), pas sur l'espace
     disponible sur la ligne : chaque .x-list, selon la longueur de ses
     items, obtient une largeur differente -> colonne 2 desalignee d'un
     jour a l'autre. flex:1 fait occuper a .x-list tout l'espace restant
     de la ligne flex, quel que soit son contenu ; min-width:0 autorise le
     retrecissement sous le min-content par defaut d'un enfant flex (sinon
     un mot long bloquerait le partage de colonnes de minmax(0, 1fr)).
     Aucun effet ailleurs : .x-list y est un bloc normal (.x-sec n'est pas
     flex), ces proprietes flex sont alors ignorees. */
  .x-li > .x-list { flex: 1; min-width: 0; }

  /* border-bottom de .x-li (ligne 193) : lisible comme separateur de ligne
     en une seule colonne, mais .x-list devient une grille a 2 colonnes ici
     -> le trait ne court plus que sur SA cellule et se lit comme un
     soulignement arbitraire (ex. jour 3, 1ere colonne). Un trait qui
     couvrirait la RANGEE entiere (les 2 cellules) demanderait soit un
     element porteur par rangee (absent du gabarit, hors perimetre CSS
     seul), soit un decalage en pixels fixes incompatible avec des colonnes
     fluides (minmax(0, 1fr)) : fragile au premier changement de largeur.
     Choix retenu : aucun trait entre les items des qu'on est en colonnes ;
     le padding vertical de .x-li (11px) et le row-gap (4px) restent pour
     separer visuellement. */
  .x-list > .x-li { border-bottom: none; }

  /* Nav laterale PERMANENTE (lot nav-laterale, 27/08/2026, remplace la
     "nav remontee" du lot precedent -- meme seuil 900px, plus de raison de
     bouger .x-tabs : elle n'est plus la nav). Bouton hamburger et fond de
     fermeture n'ont plus d'utilite des que le panneau est toujours visible
     -- masques, et la case perd son interet (mais reste inoffensive,
     aucun effet visuel a ce point de rupture). */
  .nav-toggle-cb { display: none; }
  .x-burger, .x-backdrop, .x-fermer { display: none !important; }
  .x-body { flex-direction: row; }
  .x-side {
    position: static; visibility: visible; transform: none; transition: none;
    width: auto; max-width: none; flex: 0 0 240px;
    /* Barre laterale FIXE au defilement (lot entete-collante, 13/09/2026) :
       .x-top est sticky dans .x-shell, pas dans la fenetre. Des que la page
       depasse la hauteur d'ecran, .x-body defile et la laterale partait avec
       lui, laissant le bandeau sombre a decouvert sur sa colonne. Elle se
       cale desormais sous le bandeau et garde sa propre barre de defilement
       si le menu est plus haut que l'ecran. */
    position: sticky;
    /* Sous le bandeau, pas derriere : .x-top mesure 64px (14 + 36 + 14).
       Avec top:0 la premiere entree du menu passait sous le bandeau au
       defilement. */
    top: 64px;
    align-self: flex-start;
    max-height: calc(100vh - 64px);
    /* Sous le bandeau, jamais par-dessus : .x-top porte z-index:10, un
       element positionne sans z-index se dessinerait au-dessus de lui. */
    z-index: 1;
    overflow-y: auto;
  }
}

/* ===== Survol tactile (lot survol-tactile, 27/08/2026) =====
   Point de depart : rapports/RAPPORT_PHASE0_SURVOL_TACTILE.md -- aucun
   geste tactile (iOS Safari, Android Chrome actuels) ne revele un `title=`.
   `@media (hover: none)` cible la CAPACITE de survol, jamais la largeur
   d'ecran (560px/900px ci-dessus mesurent autre chose : un portable a
   ecran etroit garde sa souris, une tablette large n'en a pas -- le
   rapport est explicite la-dessus). CSS pur, zero JS (CLAUDE.md ne
   compte que deux exceptions ; ceci n'en est pas une troisieme) :
   `content: attr(title)` revele le `title=` DEJA present dans le HTML,
   aucun gabarit touche.

   Decision (Jean-Mi) : le jalon (UN element/page) et la mention
   d'attestation (une ligne d'un planning deja replie par defaut) passent
   en clair ; la grille d'acquis (dizaines de cellules) et la notation par
   etoiles (valeur redondante avec la position, repetee par question)
   restent muettes -- chaque nom ajoute y pousserait le contenu utile hors
   ecran, pour une information de controle dont un stagiaire n'a pas
   besoin sur son telephone.

   `:not([title=""])` : filet contre un `title` PRESENT mais VIDE (jamais
   le cas aujourd'hui -- Jinja OMET l'attribut en entier quand l'auteur/la
   mention est absent, `{% if %}` ne pose jamais `title=""`) qui
   generait sinon un pseudo-element VIDE (une boite pour rien, piege du
   lot) ou, pire, engloutirait le texte abrege de l'abbr ci-dessous sans
   rien remettre a la place. */
@media (hover: none) {
  /* Jalon (acquis_grille.html:9) : AJOUTE l'auteur apres la mention deja
     visible, jamais un remplacement. `span.pill[title]` cible
     UNIQUEMENT ce badge : les boutons d'etat de la grille d'acquis
     (acquis_grille.html:66-76) portent LE MEME `.pill` mais sont des
     <button>, jamais touches ici -- aucun auteur n'y apparait, decision
     assumee (grille dense, dizaines de cellules). */
  span.pill[title]:not([title=""]) {
    flex-wrap: wrap;
  }
  span.pill[title]:not([title=""])::after {
    content: attr(title);
    flex-basis: 100%;
    font-weight: 400;
    white-space: normal;
  }

  /* Mention d'attestation (session_apercu_intervenant.html:65) : REMPLACE
     l'abrege par le texte complet -- seul <abbr> de tout l'extranet,
     aucun autre usage a proteger. Le noeud de texte de l'abrege ne peut
     pas etre cible directement en CSS : `font-size:0` le rend invisible
     (l'element garde ses dimensions de boite, rien ne s'effondre), le
     pseudo-element restaure une taille normale EN REM (jamais em : il
     heriterait 0 du parent) pour porter le texte revele.
     `white-space:normal` : le tableau porteur (`table-wrap`/`table`) n'a
     aucune regle dans cette feuille (chantier planning deja identifie,
     hors perimetre ici) -- SANS ce filet, un texte long forcerait une
     ligne non coupee et deborderait la cellule ; le laisser envelopper
     est le minimum sur, sans toucher au tableau lui-meme. */
  abbr[title]:not([title=""]) {
    font-size: 0;
  }
  abbr[title]:not([title=""])::after {
    content: attr(title);
    font-size: 1rem;
    white-space: normal;
  }
}

/* ===== Impression (lot RELIRE) =====
   Relecture des reponses a un questionnaire (evaluation_deja.html), via
   Ctrl+P -- aucun bouton JS. On retire la chrome (bandeau, menu, voile,
   boutons) ; le contenu s'etale sur la page, sans ombre ni fond. */
@media print {
  .x-top, .x-side, .x-backdrop, .nav-toggle-cb, .btn, button { display: none !important; }
  .x-shell { max-width: none; min-height: 0; box-shadow: none; }
  .x-main { padding: 0; }
  .x-slot { break-inside: avoid; }
}