/*
 * La feuille de l'application — charte visuelle v1.0.
 *
 * Aucune valeur littérale ici : tout vient de tokens.css. Les quatre règles de
 * couleur s'y lisent en creux — le teal porte toute action, l'ambre marque la
 * progression et la marque, le geste au pinceau n'apparaît pas dans ce fichier
 * (il est réservé à trois écrans), et le blocage réflexif emprunte le teal, non
 * le rouge.
 */

@import url("tokens-HenZrhu.css");
@import url("fontes-pvAOvq0.css");

/* ─────────────────────────── socle ─────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.62;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 500; margin: 0 0 var(--sp-3); }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { font-size: 1.5rem; line-height: 1.2; }
h3 { font-size: 1.15rem; line-height: 1.3; }

p { margin: 0 0 var(--sp-3); }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--teal-strong); }

code, .identifiant, .code {
  font-family: var(--f-mono);
  font-size: .88em;
  font-variant-numeric: tabular-nums;
}

/* Le focus ne se supprime jamais : il se dessine mieux. */
:focus-visible {
  outline: var(--focus-epaisseur) solid var(--teal);
  outline-offset: var(--focus-decalage);
  border-radius: var(--r-s);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────── ossature ───────────────────────── */

header, main, footer { max-width: 76rem; margin: 0 auto; padding: var(--sp-4); }

header {
  display: flex; gap: var(--sp-6); align-items: center;
  border-bottom: 1px solid var(--line);
}
header .marque { font-family: var(--f-display); font-size: 1.15rem; color: var(--ink); text-decoration: none; }
header nav { display: flex; gap: var(--sp-4); margin-left: auto; align-items: center; flex-wrap: wrap; }

footer { border-top: 1px solid var(--line); color: var(--ink-2); font-size: .85rem; }

.colonnes { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--sp-6); }
@media (max-width: 62rem) { .colonnes { grid-template-columns: 1fr; } }

/* ──────────────────────── formulaires ──────────────────────── */

/*
 * Un libellé n'est jamais remplacé par un placeholder : il disparaîtrait à la
 * saisie, au moment précis où l'on en a besoin.
 */
label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.4;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-1);
}

/* Les cases et les boutons radio sont exclus : la règle qui suit est écrite
   pour un champ de saisie. Une case qui en hérite prend toute la largeur et
   44 px de haut — c'est d'elle que venaient les cases géantes de l'écran des
   comptes. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%;
  max-width: var(--mesure);
  min-height: var(--cible-tactile);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
}

/* La case elle-même : petite, et teal quand elle est cochée.

   `accent-color` n'est pas cosmétique. Sans lui, la case cochée s'affiche dans
   le bleu du navigateur — un accent hors palette, qui appelle l'œil, sur
   l'écran même où se décident les droits. C'est la règle 1 qui est en cause. */
input[type="checkbox"], input[type="radio"] {
  width: var(--taille-case);
  height: var(--taille-case);
  min-height: 0;
  max-width: none;
  flex: none;
  margin: 0;
  padding: 0;
  accent-color: var(--teal);
}

/* Une étiquette qui porte une case n'est pas un intitulé de champ : elle se lit
   en ligne, à la graisse du texte courant. */
label.case, label.case-role {
  display: inline-flex;
  font-weight: 400;
  margin-top: 0;
}

input:hover, select:hover, textarea:hover { border-color: var(--teal); }
textarea { min-height: calc(var(--cible-tactile) * 2); resize: vertical; }

.help-text, small, .aide-champ {
  display: block;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--mesure);
}

fieldset { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-4); margin: var(--sp-5) 0; }
legend { font-weight: 700; font-size: .95rem; padding: 0 var(--sp-2); }

/* Le teal agit : toute action est teal, un bouton ambre n'existe pas. */
button, .bouton {
  min-height: var(--cible-tactile);
  padding: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  font-family: inherit;
  font-size: 1rem;
  color: var(--on-teal);
  background: var(--teal);
  border: 1px solid var(--teal);
  border-radius: var(--r-s);
  cursor: pointer;
}
button:hover, .bouton:hover { background: var(--teal-strong); border-color: var(--teal-strong); }
button.discret {
  color: var(--teal);
  background: transparent;
}
button.discret:hover { background: var(--teal-pale); }

/* ─────────────────── 1 · le champ guidé ────────────────────── */

/*
 * La définition est dans l'écran, pas dans une bulle : un texte pédagogique
 * caché derrière une icône n'est jamais lu. Filet ambre à gauche — l'ambre
 * marque, il n'avertit pas.
 */
.definition {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.55;
  max-width: var(--mesure);
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--ambre);
  color: var(--ink);
}

.sur-titre {
  font-weight: 700;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ──────────────── 2 · le blocage réflexif ──────────────────── */

/*
 * Teal, jamais rouge. Un utilisateur qui énonce une défaillance là où le
 * référentiel attend une norme ne commet pas une faute : il réfléchit encore.
 * Le rouge est réservé à ce qui est réellement fautif.
 */
.confrontation {
  border: 2px solid var(--teal);
  border-radius: var(--r-m);
  background: var(--teal-pale);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  max-width: var(--mesure);
}
.confrontation h2 { color: var(--teal-strong); font-size: 1.15rem; }
.confrontation blockquote {
  font-family: var(--f-display);
  font-style: italic;
  border-left: 3px solid var(--teal);
  padding-left: var(--sp-4);
  margin: var(--sp-3) 0;
}
.confrontation .enonce-soumis { font-family: var(--f-display); font-style: italic; }
.confrontation button { margin-right: var(--sp-3); }
.confrontation .note { font-size: .85rem; color: var(--ink-2); }

.attestations { margin-top: var(--sp-6); font-size: .9rem; color: var(--ink-2); }

/* ─────────────────── 3 · la complétude ─────────────────────── */

/* Ambre pour ce qui est fait, teal pour l'étape en cours. */
.completude {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
  align-self: start;
}
.completude ol { list-style: none; margin: 0; padding: 0; }
.completude li {
  position: relative;
  min-height: var(--cible-tactile);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.completude li::before {
  position: absolute; left: 0; top: var(--sp-2);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--sp-5); height: var(--sp-5);
  border-radius: var(--r-l);
  font-size: .8rem; font-weight: 700;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.completude li.complete::before { content: '✓'; background: var(--ambre); border-color: var(--ambre); color: var(--on-ambre); }
.completude li.incomplete::before { content: '·'; }
.completude li.facultative::before { content: '○'; }
.completude li.courante::before { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.completude li ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); font-size: .85rem; color: var(--ink-2); }

/* ──────────── 4 · état de visibilité — puce ET mot ─────────── */

.visibilite {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: .85rem; white-space: nowrap;
}
.visibilite::before {
  content: ''; width: var(--sp-2); height: var(--sp-2);
  border-radius: var(--r-l); background: var(--ink-2);
}
.visibilite.prive::before { background: var(--ink-2); }
.visibilite.partage_facilitateurs::before { background: var(--teal); }
.visibilite.publie_cohorte::before { background: var(--ambre); }

/* ────────────────── 5 · l'identifiant ──────────────────────── */

/* Immuable, donc affiché comme tel : son traitement dit qu'il ne se négocie pas. */
.identifiant {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-s);
  background: var(--ink);
  color: var(--ground);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ─────────── 7 · tableaux — ils défilent dans leur cadre ───── */

/*
 * Sur écran étroit, le tableau défile horizontalement dans son propre cadre.
 * La page, elle, ne bouge pas.
 */
.cadre-tableau {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface);
}
table { border-collapse: collapse; width: 100%; }
th, td {
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
th { font-weight: 700; font-size: .95rem; background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }

/* ────────────── 8 · commentaire de facilitateur ────────────── */

.commentaires article {
  border-left: 3px solid var(--line);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
}
.commentaires article.ouvert { border-left-color: var(--teal); }
.commentaires blockquote {
  background: var(--surface-2);
  border-radius: var(--r-s);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0 0;
}

/* ───────────────────── messages ────────────────────────────── */

.succes, .signalement, .bloquante {
  max-width: var(--mesure);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-s);
  border-left: 3px solid;
}
.succes { border-color: var(--succes); background: var(--surface); color: var(--ink); }
.signalement { border-color: var(--attention); background: var(--surface); }
/* Le rouge, et lui seul, pour ce qui est réellement fautif. */
.bloquante { border-color: var(--erreur); background: var(--surface); }

.alertes p { margin-bottom: var(--sp-3); }
.note { font-size: .85rem; color: var(--ink-2); }
.vide { color: var(--ink-2); font-style: italic; }

/* ───────────────────── blocs répétables ────────────────────── */

.bloc { margin: var(--sp-5) 0; }
.bloc-ligne {
  border-bottom: 1px dashed var(--line);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.appariements, .transition {
  border-top: 1px solid var(--line);
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
}
.obstacles li { margin-bottom: var(--sp-2); }

/* ─────────────── le geste — trois apparitions ──────────────── */

/*
 * Le coup de pinceau apparaît exactement trois fois : écran de connexion,
 * en-tête de la fiche PDF, page d'accueil. Sa force tient à sa rareté.
 */
.geste { display: block; max-width: 22rem; width: 100%; height: auto; }
.geste-accueil { max-width: 14rem; }

/* ──────── téléphone : on consulte, on lit, on répond ───────── */

/*
 * Aucune fonction n'est retirée sur petit écran — c'est le confort qui varie,
 * jamais le droit d'accès.
 */
@media (max-width: 40rem) {
  header { flex-wrap: wrap; gap: var(--sp-3); }
  header nav { margin-left: 0; width: 100%; }

  /* Les tableaux de saisie se déplient en liste : chaque cellule reprend son
     intitulé de colonne, qu'un tableau étroit rendrait illisible. */
  .liste-etroite thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .liste-etroite tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2);
  }
  .liste-etroite td { display: block; border: none; padding: var(--sp-1) var(--sp-2); }
  .liste-etroite td::before {
    content: attr(data-colonne);
    display: block;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
}

/* ─────────────── lien d'évitement et bascule ───────────────── */

.saut {
  position: absolute;
  left: var(--sp-2); top: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--teal);
  border-radius: var(--r-s);
  transform: translateY(-200%);
}
.saut:focus { transform: translateY(0); }

.bascule-theme { margin-top: 0; min-height: auto; padding: var(--sp-1) var(--sp-3); font-size: .85rem; }

/* ─────────────────────────────────────────────────────────────────────────
   Le livre blanc du leader

   Aucune valeur littérale : tout vient de `tokens.css`, et
   `tests/Unit/CharteVisuelleTest.php` échoue si l'une s'y glisse.

   Le teal agit, l'ambre marque. L'avancement est ambre parce qu'il signale un
   chemin parcouru, jamais un manquement : un livre blanc bref est honorable.
   ───────────────────────────────────────────────────────────────────────── */

.bandeau-probleme {
    border-left: var(--focus-epaisseur) solid var(--ambre);
    background: var(--surface-2);
    border-radius: var(--r-s);
    margin-block: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
}

.bandeau-probleme > summary {
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: baseline;
    font-family: var(--f-display);
}

.bandeau-corps {
    margin-top: var(--sp-3);
    max-width: var(--mesure);
}

.bandeau-corps .formulation {
    font-family: var(--f-display);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.actions-bandeau {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-4);
    margin-top: var(--sp-3);
}

.avancement {
    display: inline-block;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-left: var(--focus-epaisseur) solid var(--ambre);
    border-radius: var(--r-s);
    padding: var(--sp-2) var(--sp-3);
    margin-block: var(--sp-3);
}

.avertissement {
    background: var(--surface-2);
    border-left: var(--focus-epaisseur) solid var(--attention);
    border-radius: var(--r-s);
    padding: var(--sp-3);
    margin-block: var(--sp-4);
    max-width: var(--mesure);
}

/* Le sommaire du canevas : huit lignes, la liminaire en retrait. */
.sommaire-canevas {
    list-style: none;
    padding: 0;
    margin: var(--sp-5) 0;
    max-width: var(--mesure);
}

.sommaire-canevas > li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-2) var(--sp-3);
    align-items: baseline;
    border-bottom: 1px solid var(--line);
    padding: var(--sp-3) 0;
}

.sommaire-canevas > li > p {
    grid-column: 1 / -1;
    margin: 0;
}

.sommaire-canevas .numero {
    font-family: var(--f-mono);
    color: var(--ink-2);
    margin-right: var(--sp-2);
}

.sommaire-canevas .compte {
    font-family: var(--f-mono);
    color: var(--ink-2);
    white-space: nowrap;
}

.sommaire-canevas > li.liminaire {
    background: var(--surface-2);
    border-radius: var(--r-s);
    padding-inline: var(--sp-3);
}

.liste-cartes {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--sp-3);
    max-width: var(--mesure);
}

.liste-cartes > li {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
}

.liste-cartes > li > p {
    margin: var(--sp-1) 0 0;
}

.fil {
    display: flex;
    gap: var(--sp-2);
    align-items: baseline;
    color: var(--ink-2);
    margin-bottom: var(--sp-3);
}

/* Les cinq temps du module. */
.temps {
    margin-block: var(--sp-7);
    max-width: var(--mesure);
}

.temps > h2 {
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-2);
}

.temps .sous-titre {
    color: var(--ink-2);
    font-family: var(--f-display);
    margin-top: calc(var(--sp-2) * -1);
}

/* Le rappel du canevas : lu, jamais saisi — d'où l'aplat et l'absence de bordure
   de champ. Le texte est repris mot pour mot et ne se reformule pas. */
.temps-rappel {
    background: var(--surface-2);
    border-radius: var(--r-m);
    padding: var(--sp-4) var(--sp-5);
}

.temps-rappel > h2 {
    border-bottom-color: var(--ambre);
}

ul.rappel {
    padding-left: var(--sp-5);
}

ul.rappel > li {
    margin-block: var(--sp-2);
    line-height: 1.6;
}

.attendus > summary {
    cursor: pointer;
    margin-top: var(--sp-3);
}

.question {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    margin-block: var(--sp-4);
}

.question > legend {
    font-family: var(--f-display);
    font-weight: 600;
    padding-inline: var(--sp-2);
}

.question .facultatif {
    font-family: var(--f-body);
    font-weight: 400;
    color: var(--ink-2);
    font-size: 0.875rem;
    margin-left: var(--sp-2);
}

.question .aide {
    color: var(--ink-2);
    max-width: var(--mesure);
    margin-top: 0;
}

/* Invariant 5 : la mention se lit avant d'écrire, pas après. */
.mention-personnelle {
    background: var(--teal-pale);
    border-radius: var(--r-s);
    padding: var(--sp-2) var(--sp-3);
    color: var(--ink);
    max-width: var(--mesure);
}

.temps-synthese textarea {
    width: 100%;
    max-width: var(--mesure);
    font-family: var(--f-body);
    line-height: 1.6;
}

.assemblage-origine {
    margin-block: var(--sp-3);
}

.assemblage-origine > summary {
    cursor: pointer;
    color: var(--ink-2);
}

.assemblage-origine pre {
    white-space: pre-wrap;
    background: var(--surface-2);
    border-radius: var(--r-s);
    padding: var(--sp-3);
    overflow-x: auto;
    font-family: var(--f-body);
    color: var(--ink-2);
}

button.secondaire {
    background: transparent;
    color: var(--teal-strong);
    border: 1px solid var(--teal);
}

button.secondaire:disabled {
    color: var(--ink-2);
    border-color: var(--line);
    cursor: not-allowed;
}

.navigation-modules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block: var(--sp-6);
}

.navigation-modules > a {
    min-width: var(--cible-tactile);
    min-height: var(--cible-tactile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    font-family: var(--f-mono);
    text-decoration: none;
}

.navigation-modules > a[aria-current="page"] {
    background: var(--teal);
    color: var(--on-teal);
    border-color: var(--teal);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    margin-block: var(--sp-4);
}

/* Téléphone : les questions perdent leur cadre, qui ne sert plus qu'à rogner
   la largeur utile. Aucune fonction n'est retirée. */
@media (max-width: 40rem) {
    .question {
        border: 0;
        border-top: 1px solid var(--line);
        border-radius: 0;
        padding-inline: 0;
    }

    .temps-rappel {
        padding-inline: var(--sp-3);
    }

    .sommaire-canevas > li {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Les cinq objets structurés — lot C
   ───────────────────────────────────────────────────────────────────────── */

.panneau-objet,
.panneau-restitution {
    background: var(--surface-2);
}

.panneau-objet > h3,
.panneau-restitution > h3 {
    font-family: var(--f-display);
    margin-top: 0;
}

.resume-objet {
    margin-block: var(--sp-2);
}

a.bouton {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding-inline: var(--sp-4);
    border-radius: var(--r-s);
    background: var(--teal);
    color: var(--on-teal);
    text-decoration: none;
}

a.bouton:hover {
    background: var(--teal-strong);
}

/* Le garde-fou du module 5 : teal, jamais rouge. Quelqu'un qui n'a pas encore
   vu les acteurs communautaires ne commet pas une faute — il réfléchit encore.
   C'est la même règle que le blocage réflexif du § 3.1. */
.signalement {
    background: var(--teal-pale);
    border-left: var(--focus-epaisseur) solid var(--teal);
    border-radius: var(--r-s);
    padding: var(--sp-3) var(--sp-4);
    margin-block: var(--sp-4);
    max-width: var(--mesure);
}

/* L'iceberg : quatre couches, du plus visible au plus profond. Le décalage
   croissant et l'assombrissement disent la profondeur sans qu'aucun texte n'ait
   à l'expliquer. */
.iceberg-schema {
    margin: var(--sp-5) 0;
    max-width: var(--mesure);
}

.iceberg-schema > figcaption {
    font-family: var(--f-display);
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

.iceberg-couche {
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: var(--sp-3) var(--sp-4);
    margin-block: var(--sp-2);
    background: var(--surface);
}

.iceberg-couche[data-niveau="tendances"] { margin-left: var(--sp-3); background: var(--surface-2); }
.iceberg-couche[data-niveau="structures"] { margin-left: var(--sp-5); background: var(--surface-2); }
.iceberg-couche[data-niveau="modeles_mentaux"] {
    margin-left: var(--sp-7);
    background: var(--surface-2);
    border-left: var(--focus-epaisseur) solid var(--ambre);
}

.iceberg-couche > h3 {
    margin: 0 0 var(--sp-2);
    font-family: var(--f-display);
    font-size: 1rem;
}

.ligne-de-flottaison {
    text-align: center;
    color: var(--ink-2);
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    margin-block: var(--sp-3);
    border-top: 1px dashed var(--line);
    padding-top: var(--sp-2);
}

.rapprochement {
    display: block;
    color: var(--ink-2);
    font-size: 0.875rem;
}

/* La matrice pouvoir × intérêt : quatre quadrants nommés. Elle n'est pas
   décorative — elle montre d'un coup d'œil les acteurs puissants et
   désintéressés, qui sont le point de bascule habituel. */
.matrice {
    margin-block: var(--sp-5);
    max-width: var(--mesure);
}

.matrice-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
}

.quadrant {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-3);
    background: var(--surface);
}

.quadrant:first-child {
    border-color: var(--ambre);
}

.quadrant > h3 {
    margin: 0 0 var(--sp-2);
    font-family: var(--f-display);
    font-size: 0.9375rem;
}

.quadrant ul {
    margin: 0;
    padding-left: var(--sp-4);
}

.informel,
.fonction-signal,
.etiquette,
.type-ressource {
    display: inline-block;
    font-size: 0.8125rem;
    font-family: var(--f-mono);
    padding: 0 var(--sp-2);
    border-radius: var(--r-s);
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--line);
}

.fonction-signal,
.etiquette {
    background: var(--ambre);
    color: var(--on-ambre);
    border-color: var(--ambre);
}

tr.hypothese > td {
    background: var(--surface-2);
    color: var(--ink-2);
}

ul.ressources {
    list-style: none;
    padding: 0;
    max-width: var(--mesure);
}

ul.ressources > li {
    border-bottom: 1px solid var(--line);
    padding-block: var(--sp-3);
}

ul.ressources > li > p {
    margin: var(--sp-1) 0 0;
}

@media (max-width: 40rem) {
    .matrice-grille {
        grid-template-columns: minmax(0, 1fr);
    }

    .iceberg-couche[data-niveau="tendances"],
    .iceberg-couche[data-niveau="structures"],
    .iceberg-couche[data-niveau="modeles_mentaux"] {
        margin-left: var(--sp-2);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   La boucle et la cohérence — lot D
   ───────────────────────────────────────────────────────────────────────── */

/* L'ouverture : la disposition du canevas d'atelier, celle que les
   participants ont manipulée. Situations en vis-à-vis, écart au centre,
   normes en bandeau, contexte en cadre englobant. */
.canevas-heuristique {
    max-width: var(--mesure);
    margin-block: var(--sp-5);
}

.canevas-heuristique .formulation {
    font-family: var(--f-display);
    font-size: 1.125rem;
    line-height: 1.6;
    border-left: var(--focus-epaisseur) solid var(--ambre);
    padding-left: var(--sp-4);
}

.vis-a-vis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-4);
}

.vis-a-vis > article {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
}

.vis-a-vis h3,
.ecart h3 {
    margin-top: 0;
    font-family: var(--f-display);
    font-size: 1rem;
}

/* L'écart est au centre : c'est le pivot de l'heuristique. */
.ecart {
    border: 1px solid var(--teal);
    border-radius: var(--r-m);
    padding: var(--sp-3) var(--sp-4);
    background: var(--teal-pale);
    margin-block: var(--sp-4);
}

ul.mesures {
    list-style: none;
    padding: 0;
    margin: var(--sp-2) 0 0;
    font-family: var(--f-mono);
    font-size: 0.875rem;
}

ul.mesures > li {
    padding-block: var(--sp-1);
}

.bandeau-normes {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding-block: var(--sp-3);
    margin-block: var(--sp-4);
}

.cadre-contexte {
    border: 1px dashed var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-3) var(--sp-4);
    margin-block: var(--sp-4);
}

.cadre-contexte dt {
    font-family: var(--f-display);
    font-weight: 600;
    margin-top: var(--sp-2);
}

.cadre-contexte dd {
    margin: 0 0 var(--sp-2);
}

.trace-apprentissage {
    max-width: var(--mesure);
    margin-block: var(--sp-6);
    border-left: var(--focus-epaisseur) solid var(--ambre);
    padding-left: var(--sp-4);
}

/* Les décisions. L'orpheline se distingue par un liseré, jamais par du rouge :
   ne pas s'être encore rattaché n'est pas une faute. */
ol.liste-decisions,
ul.liste-decisions {
    list-style: none;
    padding: 0;
    max-width: var(--mesure);
}

.liste-decisions > li {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    margin-block: var(--sp-3);
    background: var(--surface);
}

.liste-decisions > li.orpheline {
    border-left: var(--focus-epaisseur) solid var(--teal);
}

.texte-decision {
    font-family: var(--f-display);
    font-size: 1.0625rem;
    margin: 0 0 var(--sp-2);
}

.manques {
    color: var(--ink-2);
    margin-block: var(--sp-2);
}

.rattachements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-3);
}

.amendement,
.renvoi-coherence {
    max-width: var(--mesure);
    margin-block: var(--sp-6);
    border: 1px solid var(--teal);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    background: var(--teal-pale);
}

.amendement > h2,
.renvoi-coherence > h2 {
    margin-top: 0;
    border: 0;
    font-size: 1.0625rem;
}

.promotion {
    max-width: var(--mesure);
    margin-block: var(--sp-5);
}

.tableau-actions textarea,
.tableau-actions input,
.tableau-actions select {
    width: 100%;
    min-width: 8rem;
}

@media (max-width: 40rem) {
    .vis-a-vis,
    .rattachements {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Le rappel d'une composante à côté d'une question de relecture.
   Ambre : il marque ce qui vient du problème, il n'appelle aucun clic. */
.rappel-composante {
    border-left: var(--focus-epaisseur) solid var(--ambre);
    background: var(--surface-2);
    border-radius: var(--r-s);
    padding: var(--sp-2) var(--sp-3);
    margin-block: var(--sp-3);
}

.rappel-composante .titre-rappel {
    font-family: var(--f-display);
    font-weight: 600;
    margin: 0 0 var(--sp-1);
}

.rappel-composante ul {
    margin: 0;
    padding-left: var(--sp-4);
}

/* Le dépôt — lot E. */
.depot-fait,
.depot-a-faire,
.exemplaires {
    max-width: var(--mesure);
    margin-block: var(--sp-6);
}

.depot-fait {
    border-left: var(--focus-epaisseur) solid var(--ambre);
    background: var(--surface-2);
    border-radius: var(--r-s);
    padding: var(--sp-4);
}

.deux-exemplaires {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-4);
}

.deux-exemplaires > article {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    background: var(--surface);
}

.deux-exemplaires h3 {
    margin-top: 0;
    font-family: var(--f-display);
    font-size: 1rem;
}

@media (max-width: 40rem) {
    .deux-exemplaires { grid-template-columns: minmax(0, 1fr); }
}

/* Le catalogue — lot 7. */
ul.liste-themes {
    list-style: none;
    padding: 0;
    max-width: var(--mesure);
}

ul.liste-themes > li {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    margin-block: var(--sp-3);
    background: var(--surface);
}

.entete-theme {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: baseline;
    margin: 0 0 var(--sp-1);
}

.arbitrages {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

.arbitrages form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

@media (max-width: 40rem) {
    .arbitrages { grid-template-columns: minmax(0, 1fr); }
}

/* L'état de l'enregistrement automatique.

   Discret quand tout va bien, `--attention` quand une sauvegarde a échoué —
   jamais rouge : rien n'est perdu, le bouton reste là. Le rouge est réservé à
   ce qui est réellement fautif. */
.etat-enregistrement {
    color: var(--ink-2);
    font-size: 0.875rem;
    margin-block: var(--sp-2);
    min-height: 1.25rem;
}

.etat-enregistrement.echec {
    color: var(--attention);
    font-weight: 600;
}

/* La vue d'ensemble — le second versant du parcours hybride. */
.ancres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block: var(--sp-4);
}

.ancres > a {
    min-width: var(--cible-tactile);
    min-height: var(--cible-tactile);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    font-family: var(--f-mono);
    text-decoration: none;
}

.section-ensemble {
    max-width: var(--mesure);
    margin-block: var(--sp-6);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
    scroll-margin-top: var(--sp-4);
}

.section-ensemble > h2 {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: baseline;
}

.lien-module {
    font-family: var(--f-body);
    font-size: 0.875rem;
    font-weight: 400;
}

.section-ensemble textarea {
    width: 100%;
    font-family: var(--f-body);
    line-height: 1.6;
}

/* Le bandeau de citations, en pied de chaque page.

   Ambre : il marque, il n'appelle aucun clic. Une phrase du syllabus, tirée du
   chemin de la page — elle change en naviguant, jamais en rafraîchissant. */
.bandeau-citation {
    margin: 0 0 var(--sp-3);
    padding-left: var(--sp-4);
    border-left: var(--focus-epaisseur) solid var(--ambre);
    max-width: var(--mesure);
}

.bandeau-citation p {
    font-family: var(--f-display);
    font-style: italic;
    line-height: 1.6;
    margin: 0;
}

footer .programme {
    color: var(--ink-2);
    font-size: 0.8125rem;
    margin: 0;
}

/* L'administration des comptes. */
.identifiants-neufs {
    border: 1px solid var(--ambre);
    border-left: var(--focus-epaisseur) solid var(--ambre);
    border-radius: var(--r-m);
    background: var(--surface-2);
    padding: var(--sp-4);
    margin-block: var(--sp-4);
    max-width: var(--mesure);
}

.identifiants-neufs > h2 { margin-top: 0; font-size: 1.0625rem; }
.identifiants-neufs dt { font-weight: 600; margin-top: var(--sp-2); }
.identifiants-neufs dd { margin: 0; }

code.mot-de-passe {
    font-family: var(--f-mono);
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: var(--sp-1) var(--sp-2);
    display: inline-block;
}

.formulaire-compte,
.recherche {
    max-width: var(--mesure);
}

.recherche {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: end;
    margin-block: var(--sp-4);
}

label.case {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-right: var(--sp-4);
    min-height: var(--cible-tactile);
}

ul.liste-comptes {
    list-style: none;
    padding: 0;
}

ul.liste-comptes > li {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--sp-4);
    margin-block: var(--sp-3);
    background: var(--surface);
}

/* Un compte désactivé se distingue par un aplat et une étiquette — jamais par
   la seule couleur. */
ul.liste-comptes > li.inactif {
    background: var(--surface-2);
    border-style: dashed;
}

.entete-compte {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: baseline;
    margin: 0 0 var(--sp-3);
}

.roles-compte fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 var(--sp-2);
}

.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Les liens d'accès et l'import de cohorte. */
ul.liste-liens {
    list-style: none;
    padding: 0;
}

ul.liste-liens > li {
    border-top: 1px solid var(--line);
    padding-block: var(--sp-3);
}

ul.liste-liens > li > p {
    margin: 0 0 var(--sp-2);
}

textarea.lien-acces {
    width: 100%;
    font-family: var(--f-mono);
    font-size: 0.8125rem;
    resize: vertical;
    background: var(--surface);
}

.colonne-etroite {
    max-width: 32rem;
    margin-inline: auto;
}

.formulaire-acces input[type="password"] {
    width: 100%;
}

.oubli {
    max-width: var(--mesure);
    margin-block: var(--sp-4);
}

.oubli > summary {
    cursor: pointer;
    color: var(--teal-strong);
}

/* ─────────────────────────────────────────────────────────────────────────
   L'en-tête — refonte du 25/08/2026

   Quatre natures plutôt qu'une file : mon travail, celui des autres,
   l'administration, ma session.
   ───────────────────────────────────────────────────────────────────────── */

header .marque {
    font-family: var(--f-display);
    text-decoration: none;
    white-space: nowrap;
}

/* Le mot-symbole : « Lbeme » porte la marque en ambre, « solutions » reste
   encre. L'ambre marque — il n'appelle aucun clic (règle 2). */
.marque-lbeme { color: var(--ambre-text); font-weight: 700; }
.marque-solutions { color: var(--ink); font-weight: 400; }

.navigation-large {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.lien-rubrique {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding-inline: var(--sp-3);
    border-radius: var(--r-pilule);
    text-decoration: none;
}

/* L'état actif se porte trois fois : l'attribut, la pastille, la graisse.
   Jamais la couleur seule. */
.lien-rubrique.actif,
.lien-rubrique[aria-current="page"] {
    background: var(--teal-pale);
    font-weight: 700;
}

header details.repli,
header details.repli-mobile {
    position: relative;
}

header details > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--cible-tactile);
    padding-inline: var(--sp-3);
    border-radius: var(--r-pilule);
    cursor: pointer;
    color: var(--teal-strong);
    white-space: nowrap;
}

header details[open] > summary {
    background: var(--teal-pale);
}

header .panneau {
    position: absolute;
    right: 0;
    top: calc(100% + var(--sp-1));
    z-index: 10;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    box-shadow: var(--shadow);
    padding: var(--sp-2);
}

header .panneau > a {
    display: flex;
    align-items: center;
    min-height: var(--cible-tactile);
    padding-inline: var(--sp-3);
    border-radius: var(--r-s);
    text-decoration: none;
}

header .panneau > a:hover {
    background: var(--surface-2);
}

.titre-groupe {
    font-family: var(--f-display);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-2);
    margin: var(--sp-3) 0 var(--sp-1);
}

/* Le repli unique du petit écran n'existe qu'en dessous de 48 rem, et la
   navigation en ligne n'existe qu'au-dessus. */
.repli-mobile { display: none; }

@media (max-width: 48rem) {
    .repli-mobile { display: block; }
    .navigation-large { display: none; }

    .repli-mobile .panneau {
        position: absolute;
        right: 0;
        min-width: 14rem;
    }

    .repli-mobile .panneau > a,
    .repli-mobile .panneau .lien-rubrique {
        min-height: var(--cible-tactile);
        width: 100%;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   L'accueil — « où en étais-je ? »
   ───────────────────────────────────────────────────────────────────────── */

/* Surface neutre, et non `--teal-pale` : en thème sombre, cet aplat devient un
   teal profond où le geste — teal lui aussi — s'efface, ne laissant flotter que
   le mot ambre. Un aplat fixe ne peut pas servir deux thèmes ; une surface
   neutre, si. */
.bandeau-accueil {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-l);
    padding: var(--sp-6) var(--sp-5);
    margin-block: var(--sp-4) var(--sp-6);
    overflow: hidden;
}

/* Le coup de pinceau, troisième et dernière apparition. */
.bandeau-accueil .geste {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-5);
    width: 8rem;
    max-width: 30%;
    opacity: 0.9;
    pointer-events: none;
}

.bandeau-accueil .sur-titre {
    font-family: var(--f-display);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-2);
    margin: 0;
}

.bandeau-accueil h1 {
    margin: var(--sp-2) 0 var(--sp-2);
}

.bandeau-accueil .propos {
    max-width: var(--mesure);
    color: var(--ink-2);
}

.mes-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-block: var(--sp-4);
}

/* Puces neutres : elles disent ce que la personne est, elles n'appellent
   aucun geste. Ni teal, ni ambre. */
.puce-role {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pilule);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.8125rem;
}

.cartes-accueil {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-5);
}

.carte {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--surface);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
}

.carte > h2 {
    margin: 0 0 var(--sp-3);
    font-size: 1.0625rem;
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-2);
}

.carte .titre-carte {
    font-family: var(--f-display);
    margin: var(--sp-1) 0 var(--sp-3);
}

.carte .actions {
    margin-top: auto;
    padding-top: var(--sp-3);
}

/* La jauge marque un avancement : ambre, jamais teal — elle n'appelle pas de
   clic. Et elle affiche un compte, jamais un pourcentage seul. */
.jauge {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    background: var(--surface-2);
    border-left: var(--focus-epaisseur) solid var(--ambre);
    border-radius: var(--r-s);
    padding: var(--sp-2) var(--sp-3);
    margin-block: var(--sp-2);
    color: var(--ink-2);
}

.jauge .compte,
.a-relire .compte {
    font-family: var(--f-mono);
    font-size: 1.0625rem;
    color: var(--ink);
    font-weight: 700;
}

ul.a-relire {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.a-relire > li {
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--line);
}

@media (max-width: 40rem) {
    .bandeau-accueil { padding: var(--sp-5) var(--sp-4); }
    .bandeau-accueil .geste {
        position: static;
        display: block;
        width: 6rem;
        max-width: 40%;
        margin-bottom: var(--sp-3);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   L'écran des comptes — « qui peut quoi »
   ───────────────────────────────────────────────────────────────────────── */

/* Une pastille cliquable de 44 px. À l'état coché, l'information est portée
   trois fois : la case elle-même, le fond et la bordure. Jamais la couleur
   seule — l'écran doit se relire en vision monochrome. */
label.case-role {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--cible-tactile);
    padding-inline: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pilule);
    background: var(--surface);
    cursor: pointer;
    font-weight: 400;
    margin: 0;
}

label.case-role:has(input:checked) {
    background: var(--teal-pale);
    border-color: var(--teal);
    font-weight: 700;
}

label.case-role:focus-within {
    outline: var(--focus-epaisseur) solid var(--teal);
    outline-offset: var(--focus-decalage);
}

/* En grille : plus aucun libellé coupé en deux. */
.roles-compte fieldset,
.formulaire-compte fieldset {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--sp-2);
    border: 0;
    padding: 0;
    margin: var(--sp-3) 0;
}

.formulaire-compte fieldset > legend {
    grid-column: 1 / -1;
}

/* Identité et rôles à gauche, opérations empilées à droite. */
.fiche-compte {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-4);
    align-items: start;
}

.fiche-compte .operations {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin: 0;
    min-width: 16rem;
}

.fiche-compte .operations > button {
    width: 100%;
}

@media (max-width: 40rem) {
    .fiche-compte { grid-template-columns: minmax(0, 1fr); }
    .fiche-compte .operations { min-width: 0; }
}

/* --- Le dossier de référence, replié sous la consigne ---------------------
   Le teal agit : déplier l'exemple est une action, et le résumé se comporte
   comme un bouton. L'ambre est réservé au marquage — un exemple ne marque
   rien, il montre.

   Replié par défaut et discret : un participant qui sait quoi écrire ne doit
   pas avoir à le contourner du regard à chaque question. */
.exemple {
  margin: var(--sp-3) 0 var(--sp-4);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--teal-pale);
}

.exemple > summary {
  cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  color: var(--teal-strong);
  font-weight: 600;
  font-size: .95rem;
  list-style-position: inside;
}

.exemple > summary:hover { text-decoration: underline; }

.exemple > summary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--r-s);
}

.exemple-corps {
  padding: 0 var(--sp-3) var(--sp-3) var(--sp-4);
  font-size: .95rem;
}

.exemple-source {
  margin: 0 0 var(--sp-2);
  color: var(--ink-2);
  font-family: var(--f-display);
  font-style: italic;
}

.exemple-corps ul { margin: 0 0 var(--sp-2); padding-left: var(--sp-4); }
.exemple-corps li { margin-bottom: var(--sp-1); }
.exemple-corps .discret { margin: 0; color: var(--ink-2); font-size: .875rem; }

/* Imprimé, l'exemple ne doit pas manger la page du participant. */
@media print { .exemple { display: none; } }

/* --- Rattacher plusieurs comptes d'un coup -------------------------------
   La liste peut atteindre plusieurs dizaines de lignes : elle défile dans son
   propre cadre plutôt que d'allonger la page et de repousser le bouton hors
   de vue. */
.liste-comptes { border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--sp-3); margin: 0 0 var(--sp-4); }
.liste-comptes > legend { padding: 0 var(--sp-2); font-size: .9rem; color: var(--ink-2); }

.cases { max-height: 20rem; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-1); }

.case {
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2); border-radius: var(--r-s); cursor: pointer;
  font-size: .95rem; line-height: 1.4;
}
.case:hover { background: var(--surface-2); }
.case:focus-within { outline: 2px solid var(--teal); outline-offset: -2px; }
.case .discret { display: block; font-size: .8rem; color: var(--ink-2); font-family: var(--f-mono); }
.case .etiquette { margin-left: var(--sp-2); }

/* --- Le palier avant le dépôt -------------------------------------------
   Deux gestes côte à côte, et non l'un sous l'autre : le retour en arrière
   doit être aussi visible que la confirmation, sinon le palier ne protège
   personne. */
.deux-gestes { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-5); }
.deux-gestes form { margin: 0; }

button.secondaire {
  background: transparent;
  color: var(--teal-strong);
  border: 1px solid var(--line);
}
button.secondaire:hover { background: var(--surface-2); }

.depot-palier { border-left: 3px solid var(--ambre); padding-left: var(--sp-4); }

/* La réouverture se déplie : elle ne doit pas s'offrir au premier regard. */
.reouverture { margin-top: var(--sp-4); border-left: 3px solid var(--teal); background: var(--teal-pale); border-radius: 0 var(--r-s) var(--r-s) 0; }
.reouverture > summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); color: var(--teal-strong); font-weight: 600; font-size: .95rem; }
.reouverture textarea { margin-bottom: var(--sp-3); }

.historique-reouvertures li { margin-bottom: var(--sp-3); }

/* --- Les livres blancs déposés, vus du facilitateur ---------------------- */
.liste-depots { list-style: none; padding: 0; }
.liste-depots > li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.liste-depots > li > p { margin: 0 0 var(--sp-2); }

/* ── Foire aux questions ──────────────────────────────────────────────────
   Les questions sont des <details> natifs : l'ouverture au clavier et l'état
   annoncé sont acquis, et les refaire en JavaScript reviendrait à refaire leur
   accessibilité, moins bien. C'est le choix déjà fait pour la navigation. */

.faq-categorie {
    margin-block: var(--sp-6);
}

.faq-question {
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    background: var(--surface);
    margin-bottom: var(--sp-3);
}

.faq-question > summary {
    cursor: pointer;
    padding: var(--sp-3) var(--sp-4);
    font-weight: 600;
    color: var(--teal-strong);
}

.faq-question[open] > summary {
    border-bottom: 1px solid var(--line);
}

/* La cible cliquable doit se voir : une question survolée qui ne bouge pas
   laisse croire qu'elle n'est pas dépliable. */
.faq-question > summary:hover {
    background: var(--teal-pale);
    border-radius: var(--r-m) var(--r-m) 0 0;
}

.faq-reponse {
    padding: var(--sp-4);
    max-width: var(--mesure);
}

.faq-reponse > :first-child { margin-top: 0; }
.faq-reponse > :last-child { margin-bottom: 0; }

.faq-reponse ol,
.faq-reponse ul {
    padding-left: var(--sp-5);
    margin-bottom: var(--sp-4);
}

.faq-reponse li {
    margin-bottom: var(--sp-2);
}

/* ── L'échelle d'auto-positionnement (QE) ────────────────────────────────

   « Trois échelles de 1 à 5, avec ancrage verbal. Reprises telles quelles au
   terme du cours pour mesurer le déplacement. »

   Empilés verticalement, les degrés ne se lisaient plus comme une échelle : on
   ne voyait plus le 3 par rapport au 1 et au 5, qui est tout ce qu'un
   auto-positionnement demande — et le participant doit relire son choix six
   mois plus tard pour mesurer un déplacement.

   Les cases et leurs étiquettes sont des frères plats dans le HTML de Symfony,
   sans paire à quoi s'accrocher. D'où le rythme à deux temps : un petit
   intervalle entre une case et son étiquette, un plus large après l'étiquette.
   C'est lui qui dit quelle étiquette va avec quelle case. */
.echelle-degres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1);
}

.echelle-degres label {
    display: inline-flex;
    align-items: center;
    font-weight: 400;
    /* L'étiquette porte la cible tactile, jamais la case elle-même. */
    min-height: var(--cible-tactile);
    margin: 0 var(--sp-5) 0 0;
}

.echelle-degres label:last-child { margin-right: 0; }

/* L'intitulé de l'échelle — « Moi-même » — reste au-dessus de sa ligne de
   degrés, à la graisse d'un intitulé de champ. */
.echelle > label {
    margin-bottom: var(--sp-1);
}