/* Écrans de pilotage en Material 3.
 *
 * Direction : un dossier clinique calme, avec une seule signature visible : la gouttière
 * d'état. Les surfaces restent froides et planes ; le vert, l'ambre et le rouge ne servent
 * qu'à guider une décision déjà écrite en toutes lettres.
 *
 * Les sélecteurs restent portés par les wrappers de chaque écran pour ne pas toucher aux
 * écrans de corpus. Chaque couleur et chaque espace proviennent des tokens Material.
 */

/* — Socle local : le contenu courant reste en Roboto ; seuls les codes norme marqués
       `code-norme` héritent de la chasse fixe du socle commun. — */
body.theme-md .pilotage,
body.theme-md .pilotage button,
body.theme-md .pilotage input,
body.theme-md .pilotage select,
body.theme-md .pilotage textarea {
  font-family: var(--md-ref-typeface-plain);
}

body.theme-md .pilotage,
body.theme-md .pilotage * {
  min-width: 0;
}

body.theme-md .pilotage .cote:not(.code-norme),
body.theme-md .pilotage .cote-colonne,
body.theme-md .pilotage .guide-meta,
body.theme-md .pilotage .reponse-entete,
body.theme-md .pilotage .repere-appui {
  font-family: var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

/* Le composant `kc-btn` porte déjà sa propre couleur de texte (`kc-admin.css`) : sans cette
   exclusion, cette règle repeignait le texte des boutons-liens `kc-btn` dans une teinte sombre
   pensée pour un fond clair (`on-primary-container`), les rendant quasi illisibles sur le fond
   saturé de `.kc-btn--primary` — trouvé sur l'écran Risques (ticket #47). */
/* `.case-liste a` reste exclu : un scénario dans la matrice doit garder le texte de sa
   propre bande (`inherit`, posé plus bas) — sinon le vert de ce lien générique s'affiche
   sur le fond sombre de la bande « critique », contraste 1,62 (`controle-coherence.py`,
   règle n, lot B). */
body.theme-md .pilotage a:not(.bouton-lien):not(.kc-btn):not(.case-liste a) {
  color: var(--kc-color-primary);
}

body.theme-md .pilotage a:not(.bouton-lien):not(.kc-btn):not(.case-liste a):hover {
  color: var(--kc-color-text);
}

/* — Surfaces qui portent une décision ou une prochaine action — */
body.theme-md .pilotage .compteur,
body.theme-md .pilotage .carte-proposition,
body.theme-md .pilotage .carte-prochaine,
body.theme-md .pilotage .carte-formulaire {
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--kc-color-border-soft);
}

/* Risques : les trois sections pleine largeur (consigne de méthode, matrice, registre) ne
 * portent plus leur propre tuple de surface (système de surfaces, règle 6a — `surfaces hors
 * référence` relevé par `controle-coherence.py`). La consigne devient une `.kc-card`
 * ordinaire (classe posée dans le gabarit, fond/bordure/rayon/ombre venant de `kc-admin.css`,
 * jamais redéfinis ici) ; seul son padding interne manque, faute de `.kc-card__body`
 * enveloppant son unique paragraphe — ciblé par une classe propre à cet écran, jamais par
 * `.kc-card` lui-même, pour ne pas retomber sous le verrou qu'on vient de satisfaire. Les deux
 * autres sections (matrice, registre) restent des `.kc-section` de mise en page : leur
 * contenu de surface (matrice + légende) est désormais enveloppé dans sa propre `.kc-card`,
 * posée dans le gabarit. */
.pilotage--risques .risques-intro {
  padding: var(--kc-card-pad);
}

@media (max-width: 640px) {
  .pilotage--risques .risques-intro {
    padding: var(--kc-space-4);
  }
}

/* Jalon PDCA (`<li class="kc-pdca-jalon">`, stylé dans `ecrans-echeances.css`, hors
 * périmètre de ce lot) : `<li>` est systématiquement exclu de la détection de surface par
 * `controle-coherence.py` (rôle purement structurel, comme les cellules de tableau) — un
 * `<ol>` qui n'en contiendrait QUE serait donc vu « à nu » (règle g) quel que soit le fond ou
 * la bordure posés sur le `<li>` lui-même. La vraie carte vit maintenant sur un `<div>`
 * interne (`.kc-pdca-jalon__carte`, posé dans le gabarit, `.kc-card` du système de surfaces) ;
 * le `<li>` redevient un simple conteneur de pile, sans fond ni bordure propres — sélecteur à
 * deux classes, spécificité supérieure à `.kc-pdca-jalon`/`.kc-pdca-jalon--*` (une seule
 * classe) pour l'emporter sur le fond et la bordure d'accent par statut déjà posés là-bas,
 * jamais touchés dans `ecrans-echeances.css` (système de surfaces, règles 2 et 6a). */
.ecran-pdca .kc-pdca-jalon {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ecran-pdca .kc-pdca-jalon__carte {
  padding: var(--kc-card-pad);
}

@media (max-width: 640px) {
  .ecran-pdca .kc-pdca-jalon__carte {
    padding: var(--kc-space-4);
  }
}

/* `controle-coherence.py` (règle f, écart à toute profondeur) ne fait confiance au `rowGap`
 * du parent commun que si les DEUX blocs comparés le partagent littéralement — ici, le titre
 * de section (`.kc-section`) et la première carte de jalon (`.kc-pdca-jalon__carte`, posée
 * deux niveaux plus bas, dans `<li>`) n'ont pas le même parent direct : le contrôleur retombe
 * alors sur le plancher `--kc-grid-gap`, plus large que `--kc-section-gap` à 1440px. Les deux
 * écarts (titre → frise, carte → carte) sont donc alignés sur `--kc-grid-gap` : le même jeton
 * que le plancher, jamais un écart inférieur. */
.ecran-pdca .kc-section {
  gap: var(--kc-grid-gap);
}

.ecran-pdca .kc-pdca-frise {
  gap: var(--kc-grid-gap);
}

body.theme-md .pilotage .carte-prochaine {
  padding: var(--kc-space-5);
}

body.theme-md .pilotage .zone-titre {
  margin-bottom: var(--kc-space-3);
  padding-bottom: var(--kc-space-2);
  border-bottom: 1px solid var(--kc-color-border-soft);
}

/* — Statistiques de mission : une lecture en quatre cartes, jamais un chiffre seul — */
body.theme-md .pilotage .compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--kc-space-3);
  margin: 0 0 var(--kc-space-5);
}

body.theme-md .pilotage .compteur {
  display: grid;
  align-content: start;
  gap: var(--kc-space-1);
  padding: var(--kc-space-4);
}

body.theme-md .pilotage .compteur b {
  display: block;
  color: var(--kc-color-text);
  font: 500 1.75rem/1.15 var(--md-ref-typeface-plain);
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage .compteur span {
  color: var(--kc-color-text-soft);
  font: 500 0.8125rem/1.4 var(--md-ref-typeface-plain);
}

body.theme-md .pilotage .alerte {
  min-height: 44px;
  padding: var(--kc-space-3) var(--kc-space-4);
  margin-bottom: var(--kc-space-5);
  background: var(--kc-color-warn-soft);
  border: 1px solid var(--kc-color-warn);
  border-top-width: 4px;
  border-radius: 12px;
  color: var(--kc-color-warn);
  box-shadow: 0 1px 2px var(--kc-color-border-soft);
}

body.theme-md .pilotage .alerte b {
  color: var(--kc-color-warn);
  font-family: var(--md-ref-typeface-plain);
}

/* — Pastilles : la teinte renforce le mot, elle ne le remplace pas — */
body.theme-md .pilotage .etiquette,
body.theme-md .pilotage .tampon {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: var(--kc-space-1) var(--kc-space-2);
  border: 1px solid var(--kc-color-border);
  border-radius: 8px;
  background: var(--kc-color-surface-3);
  color: var(--kc-color-text-soft);
  font: 500 0.75rem/1.4 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
  transform: none;
}

body.theme-md .pilotage .etiquette--visa,
body.theme-md .pilotage .tampon--visa {
  background: var(--kc-color-primary-soft);
  border-color: var(--kc-color-primary);
  color: var(--kc-color-primary);
}

body.theme-md .pilotage .etiquette--marge,
body.theme-md .pilotage .tampon--marge {
  background: var(--kc-color-warn-soft);
  border-color: var(--kc-color-warn);
  color: var(--kc-color-warn);
}

body.theme-md .pilotage .etiquette--ecart,
body.theme-md .pilotage .tampon--ecart {
  background: var(--kc-color-danger-soft);
  border-color: var(--kc-color-danger);
  color: var(--kc-color-danger);
}

body.theme-md .pilotage .tampon--attente {
  background: var(--kc-color-surface-3);
  border-color: var(--kc-color-border);
  color: var(--kc-color-text-soft);
}

/* — Cartes de proposition et formulaires — */
body.theme-md .pilotage .carte-proposition,
body.theme-md .pilotage .carte-formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-3);
  padding: var(--kc-space-4);
  margin-bottom: var(--kc-space-4);
}

body.theme-md .pilotage .carte-proposition h3 {
  margin: 0;
}

body.theme-md .pilotage .carte-proposition p,
body.theme-md .pilotage .carte-formulaire p {
  margin-top: 0;
  margin-bottom: 0;
}

body.theme-md .pilotage .carte-proposition .actions,
body.theme-md .pilotage .carte-formulaire .actions {
  justify-content: flex-start;
}

body.theme-md .pilotage .etat-intitule {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

body.theme-md .pilotage .ligne-manque {
  font-size: 0.8rem;
  line-height: 1.4;
}


body.theme-md .pilotage--mission .depot {
  padding: var(--kc-space-5);
  margin-bottom: var(--kc-space-5);
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border-soft);
  border-top: 4px solid var(--kc-color-primary);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--kc-color-border-soft);
}

body.theme-md .pilotage--mission .depot form {
  display: grid;
  gap: var(--kc-space-3);
}

body.theme-md .pilotage--mission .bandeau-action {
  gap: var(--kc-space-3);
  padding: var(--kc-space-4);
  margin-bottom: var(--kc-space-5);
  background: var(--kc-color-primary-soft);
  border-color: var(--kc-color-primary);
  color: var(--kc-color-primary);
}

body.theme-md .pilotage--mission .bandeau-action .meta {
  color: var(--kc-color-primary);
}

body.theme-md .pilotage input[type="file"] {
  max-width: 100%;
}

body.theme-md .pilotage button,
body.theme-md .pilotage a.bouton-lien {
  min-height: 44px;
}

body.theme-md .pilotage button:focus-visible,
body.theme-md .pilotage a:focus-visible,
body.theme-md .pilotage summary:focus-visible {
  outline: 2px solid var(--kc-color-primary);
  outline-offset: 2px;
}

/* — Cartes d'étape : la phase, le contenu, puis la conduite — */
body.theme-md .pilotage .parcours {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.theme-md .pilotage .carte-etape {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--kc-space-4);
  align-items: start;
  padding: var(--kc-space-4);
  margin-bottom: var(--kc-space-3);
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border-soft);
  border-top: 4px solid var(--kc-color-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--kc-color-border-soft);
}

body.theme-md .pilotage .carte-etape--prochaine,
body.theme-md .pilotage .carte-etape--visa {
  border-top-color: var(--kc-color-primary);
}

body.theme-md .pilotage .carte-etape--marge {
  border-top-color: var(--kc-color-warn);
}

body.theme-md .pilotage .carte-etape .cote-colonne {
  padding-right: var(--kc-space-3);
  border-right: 1px solid var(--kc-color-border-soft);
  color: var(--kc-color-text-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage .carte-etape > :nth-child(2) {
  overflow-wrap: anywhere;
}

body.theme-md .pilotage .carte-etape .actions {
  align-items: flex-start;
}

body.theme-md .pilotage .etapes-phase {
  margin: var(--kc-space-3) 0 0;
  padding: 0;
  list-style: none;
}

body.theme-md .pilotage .etapes-phase li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  padding: var(--kc-space-2) 0;
  border-top: 1px solid var(--kc-color-border-soft);
}

body.theme-md .pilotage .etapes-phase li a {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* — Référentiel : les lignes sont des entrées, la gouttière donne l'état et le mot le
       confirme. — */
body.theme-md .pilotage--mission .ligne {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--kc-space-2);
  padding: var(--kc-space-3) 0;
  border-bottom: 1px solid var(--kc-color-border-soft);
  color: var(--kc-color-text);
}

body.theme-md .pilotage--mission .ligne > span:nth-child(3) {
  overflow-wrap: anywhere;
}

body.theme-md .pilotage--mission .ligne .etiquette {
  justify-self: start;
}

/* — Registre des risques : une surface, des lignes séparées par un filet fin — */
body.theme-md .pilotage--risques .groupe {
  margin: 0 0 var(--kc-space-5);
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 12px;
  box-shadow: 0 1px 2px var(--kc-color-border-soft);
  overflow: hidden;
}

body.theme-md .pilotage--risques .ligne-risque {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--kc-space-4);
  align-items: start;
  min-width: 0;
  padding: var(--kc-space-4);
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--kc-color-border-soft);
  border-left-width: 0;
  border-radius: 0;
  box-shadow: none;
}

body.theme-md .pilotage--risques .ligne-risque:first-child {
  border-top: 0;
}

body.theme-md .pilotage--risques .ligne-risque.registre--visa {
  border-left-width: 0;
}

/* `.constat-revue > summary` (material.css) réinitialise le repli en rangée tactile nue
   (padding 0, fond transparent), pensé pour porter une pastille `.conv-puce` interne ; ce
   repli-ci n'en a pas, il PORTE directement l'apparence `kc-btn` (ticket #47). Spécificité
   relevée pour l'emporter sur la règle partagée sans toucher aux autres replis de revue. */
body.theme-md .pilotage--risques .constat-revue > summary.kc-btn {
  min-height: 40px;
  padding: var(--kc-space-2) var(--kc-space-4);
  background: var(--kc-color-surface);
  border: 1px solid var(--kc-color-border);
  color: var(--kc-color-text);
}

body.theme-md .pilotage--risques .constat-revue > summary.kc-btn:hover {
  background: var(--kc-color-neutral-soft);
}

body.theme-md .pilotage--risques .ligne-risque.registre--marge {
  border-left-width: 0;
}

body.theme-md .pilotage--risques .ligne-risque.registre--ecart {
  border-left-width: 0;
}

body.theme-md .pilotage--risques .ligne-risque > .cote-colonne {
  padding-right: var(--kc-space-3);
  border-right: 1px solid var(--kc-color-border-soft);
  color: var(--kc-color-text-soft);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage--risques .ligne-risque > :nth-child(2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.theme-md .pilotage--risques .atelier-resultat {
  padding: var(--kc-space-3) var(--kc-space-4);
  background: var(--kc-color-warn-soft);
  border-top: 4px solid var(--kc-color-warn);
  border-radius: 8px;
  color: var(--kc-color-warn);
}

body.theme-md .pilotage--risques .risque-niveau,
body.theme-md .pilotage--risques .risque-residuel,
body.theme-md .pilotage--risques .bande-plage {
  font-family: var(--md-ref-typeface-plain);
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage--risques .repere-appui {
  display: inline-block;
  overflow-wrap: anywhere;
}

/* — Matrice : le vert de visa descend vers le rouge d'écart, avec une légende qui explique
       toujours la conduite. — */
body.theme-md .pilotage--risques .matrice {
  width: 100%;
  max-width: 100%;
  margin: var(--kc-space-4) 0 var(--kc-space-3);
  border-spacing: var(--kc-space-1);
  table-layout: fixed;
}

body.theme-md .pilotage--risques .matrice th {
  padding: var(--kc-space-2) var(--kc-space-1);
  color: var(--kc-color-text-soft);
  font: 500 0.75rem/1.3 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

body.theme-md .pilotage--risques .matrice th[scope="row"] {
  color: var(--kc-color-text-soft);
}

body.theme-md .pilotage--risques .axe-chiffre,
body.theme-md .pilotage--risques .axe-mot,
body.theme-md .pilotage--risques .case-niveau,
body.theme-md .pilotage--risques .case-liste a {
  color: inherit;
  font-family: var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

body.theme-md .pilotage--risques .case {
  border-radius: 8px;
  color: var(--kc-color-text);
}

/* Bruno (lot B) : le libellé de risque chevauchait le niveau (haut-gauche) et la pastille
   de compte (haut-droite), tous deux positionnés en absolu par `kuma.css` sans réserver de
   place au texte qui s'écoule en-dessous (`position: absolute`, hors flux). Repositionnés
   en flux normal, en colonne : niveau, puis pastille de compte SOUS la ligne du niveau,
   puis la liste des scénarios — plus aucun chevauchement possible. `display: flex` doit
   porter sur un conteneur interne (`.case-contenu`, ajouté dans `risques.html`), jamais sur
   `.case` (le `<td>` lui-même) : y mettre `display: flex` le sort du modèle de table et
   casse toute la grille (mesuré — les 5 colonnes s'effondrent en une seule). Hauteur FIXE
   (et non `min-height`, qui laissait les lignes sans risque tomber à ~20px pendant que les
   lignes occupées montaient à ~60px, une matrice 5×5 doit avoir des cases identiques) —
   `kuma.css` pose 5.2rem par défaut, trop haut pour que la matrice et sa légende tiennent à
   1440 px sans défilement excessif (mesuré) ; `overflow: hidden` écrête proprement une
   liste de scénarios trop longue plutôt que d'agrandir une seule case. */
body.theme-md .pilotage--risques .case {
  height: 4.75rem;
  padding: var(--kc-space-2);
  overflow: hidden;
}

body.theme-md .pilotage--risques .case-contenu {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-1);
  height: 100%;
  overflow: hidden;
}

body.theme-md .pilotage--risques .case-niveau {
  position: static;
  color: inherit;
  opacity: 1;
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage--risques .case-compte {
  position: static;
  align-self: flex-start;
  background: var(--kc-color-text);
  color: var(--kc-color-surface);
  font-variant-numeric: tabular-nums;
}

body.theme-md .pilotage--risques .case-liste {
  margin-top: var(--kc-space-1);
}

body.theme-md .pilotage--risques .case--faible {
  background: var(--kc-color-primary-soft);
  color: var(--kc-color-primary);
}

body.theme-md .pilotage--risques .case--modere {
  background: var(--kc-color-warn-soft);
  color: var(--kc-color-warn);
}

body.theme-md .pilotage--risques .case--eleve {
  background: var(--kc-color-danger-soft);
  color: var(--kc-color-danger);
}

/* « Critique » n'est plus pleine (Bruno, lot B) : même traitement clair que les trois autres
   bandes, teinte plus soutenue pour rester distincte — `color-mix` plutôt qu'une nouvelle
   couleur à coder en dur, à partir des jetons déjà déclarés. Le texte du lien de scénario
   (`.case-liste a`, `color: inherit` ci-dessus) en hérite directement : contraste mesuré
   5,07:1 sur le fond obtenu (seuil 4,5:1). */
body.theme-md .pilotage--risques .case--critique {
  background: color-mix(in srgb, var(--kc-color-danger) 28%, var(--kc-color-danger-soft));
  color: var(--kc-color-danger);
}

body.theme-md .pilotage--risques .case--critique .case-compte {
  background: var(--kc-color-danger);
  color: var(--kc-color-on-primary);
}

body.theme-md .pilotage--risques .bandes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--kc-space-2);
  margin: var(--kc-space-3) 0 0;
  padding: 0;
  list-style: none;
}

/* Légende des 4 bandes de conduite : 4 cartes identiques dans leur traitement (fond clair
   teinté, bordure fine, sans accent de bord) — seule la teinte distingue les bandes entre
   elles, « critique » compris (plus de fond plein). */
body.theme-md .pilotage--risques .bande {
  display: grid;
  gap: var(--kc-space-1);
  min-width: 0;
  padding: var(--kc-space-3);
  background: var(--kc-color-surface-2);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 12px;
  color: var(--kc-color-text);
}

body.theme-md .pilotage--risques .bande strong {
  color: inherit;
  font: 500 0.875rem/1.4 var(--md-ref-typeface-plain);
}

body.theme-md .pilotage--risques .bande .meta {
  margin: 0;
  color: inherit;
}

body.theme-md .pilotage--risques .bande--faible {
  background: var(--kc-color-primary-soft);
  color: var(--kc-color-primary);
}

body.theme-md .pilotage--risques .bande--modere {
  background: var(--kc-color-warn-soft);
  color: var(--kc-color-warn);
}

body.theme-md .pilotage--risques .bande--eleve {
  background: var(--kc-color-danger-soft);
  color: var(--kc-color-danger);
}

body.theme-md .pilotage--risques .bande--critique {
  background: color-mix(in srgb, var(--kc-color-danger) 28%, var(--kc-color-danger-soft));
  color: var(--kc-color-danger);
}

/* La pastille de plage (`.bande-plage`) reprend la même règle sur les quatre cartes
   maintenant qu'aucune n'a de fond plein : accent de la bande, texte blanc. */
body.theme-md .pilotage--risques .bande--faible .bande-plage {
  background: var(--kc-color-primary);
  color: #ffffff;
}

body.theme-md .pilotage--risques .bande--modere .bande-plage {
  background: var(--kc-color-warn);
  color: #ffffff;
}

body.theme-md .pilotage--risques .bande--eleve .bande-plage,
body.theme-md .pilotage--risques .bande--critique .bande-plage {
  background: var(--kc-color-danger);
  color: #ffffff;
}

/* — Petit écran : la gouttière devient une ligne, jamais une colonne écrasée — */
@media (max-width: 640px) {
  body.theme-md .pilotage .compteurs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.theme-md .pilotage .carte-prochaine,
  body.theme-md .pilotage .carte-formulaire,
  body.theme-md .pilotage--risques > .section-imprimable,
  body.theme-md .pilotage--mission .depot {
    padding: var(--kc-space-4);
  }

  body.theme-md .pilotage .carte-etape {
    grid-template-columns: 1fr;
    gap: var(--kc-space-2);
  }

  body.theme-md .pilotage .carte-etape .cote-colonne {
    padding: 0 0 var(--kc-space-2);
    border-right: 0;
    border-bottom: 1px solid var(--kc-color-border-soft);
    text-align: left;
  }

  body.theme-md .pilotage .carte-etape .actions {
    justify-content: flex-start;
  }

  body.theme-md .pilotage--mission .ligne {
    grid-template-columns: max-content max-content minmax(0, 1fr);
  }

  body.theme-md .pilotage--mission .ligne .etiquette {
    grid-column: 2 / -1;
  }

  body.theme-md .pilotage--risques .ligne-risque {
    grid-template-columns: 1fr;
    gap: var(--kc-space-2);
  }

  body.theme-md .pilotage--risques .ligne-risque > .cote-colonne {
    padding: 0 0 var(--kc-space-2);
    border-right: 0;
    border-bottom: 1px solid var(--kc-color-border-soft);
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-md .pilotage * {
    transition: none;
  }
}

@media print {
  body.theme-md .pilotage .compteur,
  body.theme-md .pilotage .carte-proposition,
  body.theme-md .pilotage .carte-prochaine,
  body.theme-md .pilotage .carte-formulaire,
  body.theme-md .pilotage--risques > .section-imprimable,
  body.theme-md .pilotage--risques .groupe {
    box-shadow: none;
  }
}

/* Atelier guidé : une question au premier plan, le dossier reste accessible à part.
 *
 * Le stepper de phases, la ligne de progression (phase/étape/question) et le repli vers les
 * documents vivent dans la colonne de navigation (`.atelier-guide__stepper` et
 * `.atelier-guide__aside`) ; aucun n'invente un état, le stepper est lu du parcours.
 * `.atelier-guide` (enfant unique de `.kc-main`) porte la classe générique `kc-stack`
 * (gabarit, `kc-admin.css`) : c'est elle qui espace l'en-tête de page et la grille 2
 * colonnes par `--kc-page-gap`, pas une marge posée ici. */
.atelier-guide {
  max-width: none;
}

/* Pleine largeur (exigence de Bruno) : la colonne principale (`.atelier-guide__principal`)
 * EST elle-même UNE carte (`kc-card`, posée dans le gabarit) — surtitre, titre, repères,
 * alerte, conseil et boutons de l'étape vivent tous dans cette seule surface, jamais à nu
 * sur le fond de page. Son contenu (en-tête d'étape, carte de question, lien de relecture)
 * est une pile interne à `--kc-grid-gap`, la même rangée de blocs qu'ailleurs dans l'écran —
 * `.kc-layout-aside` (gabarit, `kc-admin.css`) pose la grille 2 colonnes et l'écart ; la
 * colonne latérale (`.atelier-guide__aside`) est un simple conteneur de pile (le `gap`
 * entre ses cartes vient de `kc-layout-aside > :last-child`), jamais une carte elle-même —
 * le stepper (`.atelier-guide__stepper`) EST une carte, comme « À propos » et « Documents,
 * historique… », trois cartes de même niveau, jamais une carte imbriquée dans une carte.
 * En dessous de 1200 px, une seule colonne pleine largeur ; le stepper (réduit, horizontal)
 * garde sa place au sommet de la colonne latérale, qui suit la carte principale dans
 * l'ordre du document. */
@media (max-width: 1199.98px) {
  .atelier-guide__corps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Surface fournie par `.kc-card` (posé dans le gabarit, `kc-admin.css`) — cette règle ne
   garde que la pile interne et le padding, propres à cette carte pleine largeur. */
.atelier-guide__principal {
  display: flex;
  flex-direction: column;
  gap: var(--kc-grid-gap);
  min-width: 0;
  padding: var(--kc-card-pad);
}

/* Surface fournie par `.kc-card` (posé dans le gabarit, `kc-admin.css`) — cette règle ne
   garde que le padding, propre au stepper. */
.atelier-guide__stepper {
  padding: var(--kc-card-pad);
}

.guide-tete {
  display: grid;
  gap: var(--kc-space-3);
}

/* Le stepper réduit (en dessous de 1200 px) : dix segments, un par phase. Le titre n'est lu
   qu'à la phase courante, les autres gardent leur numéro — dix titres de phase sur une ligne
   ne tiennent pas à 360 px. À partir de 1200 px, il devient la liste verticale compacte
   définie ci-dessus. Chaque segment mène à la feuille de route. */
.guide-phases {
  display: flex;
  gap: var(--kc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-phases li {
  flex: 1 1 0;
  min-width: 0;
}

.guide-phases li.guide-phase--courante {
  flex: 3 1 0;
}

.guide-phases a {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-1);
  min-height: 44px;
  padding: var(--kc-space-1) 0 0;
  border-top: 4px solid var(--kc-color-border-soft);
  color: var(--kc-color-text-soft);
  font-size: 0.75rem;
  line-height: 1.2;
  text-decoration: none;
}

.guide-phase--passee a {
  border-top-color: var(--kc-color-primary);
}

.guide-phase--courante a {
  border-top-color: var(--kc-color-primary);
  color: var(--kc-color-text);
}

.guide-phases a:hover,
.guide-phases a:focus-visible {
  border-top-color: var(--kc-color-primary);
  color: var(--kc-color-primary);
}

.guide-phase-numero {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.guide-phase-titre {
  display: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.guide-phase--courante .guide-phase-titre {
  display: block;
}

@media (min-width: 1200px) {
  /* Le stepper compact : une pastille ronde numérotée et le nom de la phase sur la même
     ligne, ~36 px par phase — tout le chemin lisible d'un regard, sans défiler. La phase
     courante se distingue par un fond primaire doux et une pastille pleine ; les phases
     passées gardent une pastille creuse cochée. */
  .guide-phases {
    flex-direction: column;
    gap: var(--kc-space-1);
  }

  .guide-phases li,
  .guide-phases li.guide-phase--courante {
    flex: none;
  }

  .guide-phases a {
    flex-direction: row;
    align-items: center;
    gap: var(--kc-space-2);
    min-height: 36px;
    padding: 0 var(--kc-space-2);
    border-top: none;
    border-radius: 8px;
  }

  .guide-phase--courante {
    background: var(--kc-color-primary-soft);
    border-radius: 8px;
  }

  .guide-phase-numero {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--kc-color-border);
    border-radius: 50%;
    font-size: 0.6875rem;
  }

  .guide-phase--passee .guide-phase-numero {
    border-color: var(--kc-color-primary);
    color: var(--kc-color-primary);
  }

  .guide-phase--courante .guide-phase-numero {
    border-color: var(--kc-color-primary);
    background: var(--kc-color-primary);
    color: var(--kc-color-on-primary);
  }

  .guide-phase-titre {
    display: block;
  }
}

.guide-progression {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2);
  margin: 0;
  color: var(--kc-color-text-soft);
  font-size: 0.875rem;
}

.guide-progression-ligne {
  margin: 0;
}

.guide-progression a {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: 44px;
}

.guide-etape-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--kc-space-2) var(--kc-space-4);
}

.guide-etape-titre {
  font-weight: 500;
}

.guide-etape-compte {
  color: var(--kc-color-text-soft);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

/* `.guide-carte` n'est plus elle-même une carte (la surface vit sur
   `.atelier-guide__principal`, qui l'enveloppe) : une pile interne à `--kc-grid-gap`, le
   même rythme qu'ailleurs dans l'écran — aucun des blocs qu'elle contient (surtitre, titre,
   repères, alerte, conseil, boutons) ne pose plus sa propre marge verticale. */
.guide-carte {
  display: flex;
  flex-direction: column;
  gap: var(--kc-grid-gap);
}

/* L'entrée d'étape (titre + repères + alerte + conseil + boutons + note), seule enfant de
   `.guide-carte` à l'ouverture d'une étape : le même regroupement en pile que `.guide-carte`
   elle-même, puisque ses enfants sont les mêmes blocs de premier niveau de la carte. */
.guide-entree {
  display: flex;
  flex-direction: column;
  gap: var(--kc-grid-gap);
}

.guide-exemple > :last-child {
  margin-bottom: 0;
}

body.theme-md .guide-carte h2 {
  margin: 0;
  font: 500 1.65rem/1.3 var(--md-ref-typeface-plain);
  letter-spacing: 0;
}

.guide-surtitre {
  margin: 0;
  color: var(--kc-color-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-aide,
.guide-objectif {
  margin: 0;
  color: var(--kc-color-text-soft);
}

.guide-objectif {
  max-width: 75ch;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--kc-color-text);
}

/* L'entrée d'étape : les faits du parcours en quatre cases, lisibles d'un regard.
 * `repeat(auto-fit, minmax(150px, 1fr))` plaçait 3 cases par ligne à la largeur réelle de
 * la colonne principale (~638 px à 1440 px de viewport, quatre cases de 150 px avec jauges
 * ne tenant pas), laissant la quatrième seule sur sa ligne — un palier explicite remplace
 * le calcul auto-fit, qui dépendait trop finement de la largeur du conteneur. */
/* Surface fournie par `.kc-card--plat` (posé dans le gabarit, `kc-admin.css`) — cette
   règle ne garde que la grille, propre à cette liste de faits. */
.guide-faits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--kc-space-3);
}

@media (min-width: 1200px) {
  .guide-faits {
    grid-template-columns: repeat(4, 1fr);
  }
}

.guide-faits > div {
  min-width: 0;
}

.guide-faits dt {
  margin: 0;
  color: var(--kc-color-text-soft);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.guide-faits dd {
  margin: var(--kc-space-1) 0 0;
  overflow-wrap: anywhere;
}

.guide-sous-titre {
  margin: 0;
  font-weight: 500;
}

/* Les formes acceptées : des jetons, pas une phrase à virgules. */
.guide-formes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-formes li {
  padding: var(--kc-space-1) var(--kc-space-3);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 999px;
  background: var(--kc-color-surface);
  font-size: 0.875rem;
}

.guide-conseil {
  margin: 0;
}

/* « Vous aurez fini quand » est désormais une `.kc-alert--info` (gabarit) : plus de bloc
   `.guide-porte` propre, ni d'accent de bordure gauche (règle 3 du système de surfaces). */

/* L'étape que le dossier a déjà refermée : le point de reprise la saute, mais elle reste
   ouvrable. Le bandeau se distingue de « Vous aurez fini quand » — celui-ci annonce ce qui
   reste à faire, celui-là dit que plus rien n'est attendu. Deux teintes, parce que « passée
   pour l'instant » n'est pas « terminée ». Hérite de `.kc-alert` (gabarit, fond/bordure/rayon
   déjà posés par la classe `kc-alert kc-alert--warn`) : plus d'accent de bordure gauche. */
.guide-cloture {
  margin: 0;
}

.guide-cloture--franchie {
  border-color: var(--kc-color-border);
  background: var(--kc-color-surface-3);
  color: var(--kc-color-text);
}

.guide-exemple {
  margin: var(--kc-space-4) 0;
  padding: var(--kc-space-3) var(--kc-space-4);
  border: 1px solid var(--kc-color-border-soft);
  background: var(--kc-color-surface-2);
  border-radius: var(--kc-radius-md);
  font-size: 0.9375rem;
}

/* Un repli se reconnaît à son chevron : « Voir un exemple » ressemblait à un titre de bloc,
   et rien ne disait qu'il s'ouvre. Le marqueur natif est remplacé pour être dessiné pareil
   dans chaque navigateur, et tourné quand le repli est ouvert. */
/* `summary` (kuma.css) pose `flex-wrap: wrap` en règle générique : cette déclaration de
   propriété n'est jamais réécrite par les règles ci-dessous (qui ne déclarent pas
   `flex-wrap`), et la cascade la laisse passer malgré leur spécificité plus élevée — le
   chevron se retrouvait seul sur sa ligne, au-dessus du libellé. `nowrap` explicite corrige
   la fuite. */
.guide-exemple summary,
.guide-complements summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--kc-space-2);
  min-height: 32px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}

.guide-exemple summary::-webkit-details-marker,
.guide-complements summary::-webkit-details-marker {
  display: none;
}

.guide-exemple summary::before,
.guide-complements summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.guide-exemple[open] summary::before,
.guide-complements[open] summary::before {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .guide-exemple summary::before,
  .guide-complements summary::before {
    transition: none;
  }
}

.guide-exemple p {
  margin-top: var(--kc-space-2);
  white-space: pre-line;
}

.guide-formulaire {
  display: grid;
  gap: var(--kc-space-3);
  margin: 0;
}

body.theme-md .guide-formulaire label {
  margin: 0;
  color: var(--kc-color-text);
  font: 500 1rem/1.4 var(--md-ref-typeface-plain);
}

.guide-formulaire textarea {
  min-height: 112px;
  resize: vertical;
}

.guide-formulaire input,
.guide-formulaire select,
.guide-formulaire textarea {
  min-width: 0;
  max-width: 100%;
}

.guide-formulaire > .kc-btn {
  justify-self: start;
}

.guide-etat-metier {
  margin: 0;
  padding: var(--kc-space-3) var(--kc-space-4);
  border-radius: 8px;
  background: var(--kc-color-primary-soft);
  color: var(--kc-color-primary);
}

/* La zone de dépôt : l'`input` natif reste le chemin sans script ; le script n'ajoute que le
   glisser-déposer (`data-survol`) et la liste des fichiers choisis avant l'envoi. */
.guide-depot {
  display: grid;
  gap: var(--kc-space-2);
  padding: var(--kc-space-4);
  border: 2px dashed var(--kc-color-border);
  border-radius: 12px;
  background: var(--kc-color-surface-2);
  transition: border-color 120ms ease, background-color 120ms ease;
}

.guide-depot[data-survol="1"] {
  border-color: var(--kc-color-primary);
  background: var(--kc-color-primary-soft);
}

.guide-depot input[type="file"] {
  width: 100%;
  min-height: 44px;
  white-space: normal;
}

.guide-depot-aide {
  margin: 0;
  font-size: 0.875rem;
  color: var(--kc-color-text-soft);
}

.guide-depot-choisis,
.guide-joints {
  display: grid;
  gap: var(--kc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-depot-choisis li,
.guide-joints li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  min-height: 32px;
  overflow-wrap: anywhere;
}

.guide-joint-nom {
  font-weight: 500;
}

/* Dépôt en échec remplacé par un dépôt réussi plus récent du même fichier (#205) : jamais
   effacé de l'historique, seulement distingué d'une pièce distincte. */
.guide-joint-remplace {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--kc-color-text-soft);
}

/* La pastille d'état : une phrase courte, en casse de phrase, jamais un cachet de biais. Le
   registre a ses tampons ; l'atelier, qui parle à un novice, dit « en cours » en clair. */
.pastille {
  display: inline-flex;
  align-items: center;
  padding: var(--kc-space-1) var(--kc-space-2);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 999px;
  background: var(--kc-color-surface);
  color: var(--kc-color-text-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: nowrap;
}

.pastille--faite,
.pastille--propre,
.pastille--promu {
  border-color: transparent;
  background: var(--kc-color-primary-soft);
  color: var(--kc-color-primary);
}

.pastille--en_cours,
.pastille--recu,
.pastille--analyse,
.pastille--enregistree {
  border-color: transparent;
  background: var(--kc-color-warn-soft);
  color: var(--kc-color-warn);
}

.pastille--erreur,
.pastille--infecte {
  border-color: transparent;
  background: var(--kc-color-danger-soft, #f8e6e3);
  color: var(--kc-color-danger);
}

.pastille--courante,
.pastille--format {
  border-color: transparent;
  background: var(--kc-color-primary);
  color: var(--kc-color-on-primary);
}

.pastille--produit {
  border-color: transparent;
  background: var(--kc-color-primary-soft);
  color: var(--kc-color-primary);
}

.pastille--a_completer,
.pastille--partiel {
  border-color: transparent;
  background: var(--kc-color-warn-soft);
  color: var(--kc-color-warn);
}

.pastille--absent,
.pastille--exclu {
  border-color: transparent;
  background: var(--kc-color-danger-soft);
  color: var(--kc-color-danger);
}

/* Le format de la question : la ligne « Réponse attendue » puis, quand le parcours vise un
   registre, un document, la matrice ou l'analyse d'écart, l'état réel de cette donnée et la
   porte vers son écran. Un champ texte nu n'est plus la réponse par défaut. */
.guide-format {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  margin: 0;
  color: var(--kc-color-text-soft);
}

/* Surface fournie par `.kc-card--plat` (posé dans le gabarit, `kc-admin.css`) — cette
   règle ne garde que la grille, propre à ce bloc d'aperçu de format. */
.guide-registre,
.guide-document,
.guide-ecarts {
  display: grid;
  gap: var(--kc-space-2);
  margin: 0;
}

.guide-registre-tete {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--kc-space-2) var(--kc-space-3);
  margin: 0;
}

.guide-registre-lignes {
  display: grid;
  gap: var(--kc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-registre-lignes li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
  min-height: 28px;
  overflow-wrap: anywhere;
}

.guide-registre-vide,
.guide-document-depot {
  margin: 0;
}

.guide-registre > .kc-btn,
.guide-ecarts > .kc-btn {
  justify-self: start;
}

.guide-commandes--document {
  margin-top: 0;
}

.guide-inline {
  margin: 0;
}

.guide-commandes {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-3);
  margin: 0;
}

body.theme-md .guide-commandes > * {
  min-height: 44px;
}

.guide-sauvegarde,
.guide-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--kc-color-text-soft);
}

/* La mention brouillon de la carte d'entrée suit les boutons, séparée par le `gap` de la
   pile (`.guide-entree`) : plus de marge de tête propre au bloc. */
.guide-note--entree {
  margin: 0;
}

.guide-sauvegarde[data-erreur="1"] {
  color: var(--kc-color-danger);
}

.guide-liens {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kc-space-3);
  margin: 0;
}

.guide-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* `.guide-reponses` est un enfant direct de `.atelier-guide__principal`, séparé de
   `.guide-carte` par le `gap` de cette pile (plus haut dans ce fichier) : plus de marge de
   tête propre au bloc. */
.guide-reponses {
  margin: 0;
}

/* Surface fournie par `.kc-card` (posé dans le gabarit, `kc-admin.css`) — cette règle ne
   garde que le padding, propre à ce bloc de repères. */
.guide-apropos {
  gap: var(--kc-section-gap);
  padding: var(--kc-card-pad);
}


/* Surface fournie par `.kc-card` (posé dans le gabarit, `kc-admin.css`). */
.guide-complements {
  padding: var(--kc-card-pad);
}

.guide-complements[open] {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2);
}

.guide-complements summary {
  min-height: 44px;
}

.guide-complements-liens {
  display: grid;
  gap: var(--kc-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide-complements-liens a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.guide-recap {
  margin: var(--kc-space-4) 0;
}

.guide-recap > div {
  padding: var(--kc-space-3) 0;
  border-bottom: 1px solid var(--kc-color-border-soft);
}

.guide-recap dt {
  font-weight: 500;
}

.guide-recap dd {
  margin: var(--kc-space-2) 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.guide-conseils {
  display: grid;
  gap: var(--kc-space-3);
  max-height: 360px;
  overflow-y: auto;
  margin: var(--kc-space-4) 0;
  padding: 0;
  list-style: none;
  overflow-wrap: anywhere;
}

.guide-conseils li {
  padding: var(--kc-space-3) var(--kc-space-4);
  border-radius: 12px;
  background: var(--kc-color-surface-2);
}

.guide-conseils p {
  white-space: pre-wrap;
}

.guide-conseils p:last-child {
  margin-bottom: 0;
}

/* — La feuille de route : tout le chemin, une phase dépliée — */

.route {
  max-width: none;
}

/* Bande de progression : trois chiffres clés en cartes alignées, plus la barre globale — à
 * la place d'une ligne de texte perdue dans la largeur pleine page. */
.route-progression-globale {
  margin: 0 0 var(--kc-space-4);
}

/* `.route-bilan` est désormais une grille de cartes KPI standard (`kc-grid kc-grid--kpi`,
   gabarit) — plus de règle de surface ou de disposition propre à cet écran.

   `.route-prochaine` est désormais une `.kc-card` normale (gabarit) avec surtitre
   (`.kc-page-header-eyebrow`) et bouton en pied (`.kc-card__footer`) — plus d'accent de
   bordure gauche (système de surfaces, règle 3). */
.route-prochaine-nom {
  margin: 0 0 var(--kc-space-1);
  font-size: 1.25rem;
  font-weight: 500;
}

.route-phases {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--kc-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Surface fournie par `.kc-card` (posé sur le `<details>` dans le gabarit) — chaque phase
   est une carte identique, ouverte ou fermée : plus de bordure verte spéciale pour la phase
   ouverte (système de surfaces, règle 4), l'état se lit par le chevron et le contenu. */

.route-phase summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2) var(--kc-space-3);
  min-height: 56px;
  padding: var(--kc-space-2) var(--kc-space-4);
  cursor: pointer;
  list-style: none;
}

.route-phase summary::-webkit-details-marker {
  display: none;
}

.route-phase summary::after {
  content: "";
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: var(--kc-space-2);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 120ms ease;
}

.route-phase details[open] summary::after {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .route-phase summary::after,
  .guide-depot {
    transition: none;
  }
}

.route-phase-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--kc-color-surface-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.route-phase--ouverte .route-phase-numero {
  background: var(--kc-color-primary);
  color: var(--kc-color-on-primary);
}

.route-phase-titre {
  font-size: 1.0625rem;
  font-weight: 500;
}

.route-phase-compte {
  margin-left: auto;
  color: var(--kc-color-text-soft);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.route-phase-but {
  margin: 0 0 var(--kc-space-3);
  color: var(--kc-color-text-soft);
}

/* Les étapes d'une phase ouverte passent en grille 2 colonnes à l'intérieur de la carte, à
   partir de 768 px (système de surfaces, règle 4). */
.route-etapes {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .route-etapes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--kc-space-4);
  }

  .route-etape + .route-etape {
    border-top: 0;
  }
}

/* Plus d'accent de bordure gauche par statut (système de surfaces, règle 3) : le ton se lit
   déjà par les pastilles de `.route-etape-etat`. */
.route-etape {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--kc-space-1) var(--kc-space-3);
  padding: var(--kc-space-2) var(--kc-space-3);
  border-radius: var(--kc-radius-md);
}

.route-etape + .route-etape {
  border-top: 1px solid var(--kc-color-surface-3);
}

.route-etape[aria-current="step"] {
  background: var(--kc-color-surface-2);
}

.route-etape-nom {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 500;
}

.route-etape-etat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kc-space-1);
  align-items: center;
}

.route-etape-duree {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  body.theme-md .guide-carte h2 {
    font-size: 1.4rem;
  }

  .guide-commandes > button:first-child,
  .guide-commandes > .kc-btn:first-child {
    width: 100%;
  }

  .guide-exemple {
    padding: var(--kc-space-2) var(--kc-space-3);
  }

  .guide-phases a {
    font-size: 0.6875rem;
  }

  .route-phase-compte {
    margin-left: 0;
    flex-basis: 100%;
  }

  .route-etape {
    grid-template-columns: 1fr;
  }
}


/* Preuves versionnées : la pastille dit l'état en mot, en icône et en couleur. */
.preuves {
  max-width: 62rem;
  margin-inline: auto;
}

.preuves-ligne,
.preuves-ajout {
  margin: 0 0 var(--kc-space-4);
  padding: var(--kc-space-3) var(--kc-space-4);
  border: 1px solid var(--kc-color-border-soft);
  border-radius: 12px;
  background: var(--kc-color-surface);
}

.preuves-entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-space-2);
}

.preuves-entete h2 {
  margin: 0;
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.preuves-pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-1);
  padding: var(--kc-space-1) var(--kc-space-3);
  border: 1px solid currentcolor;
  border-radius: 999px;
  color: var(--kc-color-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.preuves-icone {
  font-weight: 700;
}

.preuves-pastille--a_jour {
  background: var(--kc-color-primary-soft);
}

.preuves-pastille--a_jour .preuves-icone {
  color: var(--kc-color-primary);
}

.preuves-pastille--bientot {
  background: var(--kc-color-warn-soft);
}

.preuves-pastille--bientot .preuves-icone {
  color: #7a4a05;
}

.preuves-pastille--expiree {
  background: var(--kc-color-danger-soft);
}

.preuves-pastille--expiree .preuves-icone {
  color: var(--kc-color-danger);
}

.preuves-pastille--sans_echeance {
  background: var(--kc-color-surface-3);
}

.preuves-pastille--sans_echeance .preuves-icone {
  color: var(--kc-color-text-soft);
}

/* `.preuves-frise` est désormais entièrement stylée par `kc-admin.css` (surface carte,
   repère de version courante) — plus de redéfinition propre à cet écran ici. */
.preuves-frise-courante strong {
  color: var(--kc-color-primary);
}

.preuves-formulaire {
  display: grid;
  gap: var(--kc-space-2);
  max-width: 32rem;
}

.preuves-formulaire input,
.preuves-formulaire select {
  min-height: 44px;
  max-width: 100%;
}

.preuves a:focus-visible,
.preuves button:focus-visible,
.preuves input:focus-visible,
.preuves select:focus-visible {
  outline: 2px solid var(--kc-color-primary);
  outline-offset: 2px;
}

.correspondances-filtre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-space-2);
  margin: var(--kc-space-3) 0;
}

.correspondances-liens {
  margin: var(--kc-space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--kc-space-3);
}

.correspondances-liens li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-space-2);
  overflow-wrap: anywhere;
}

.correspondances-liens .meta {
  flex-basis: 100%;
}

.correspondances-pastille--equivalente {
  background: var(--kc-color-primary-soft);
}

.correspondances-pastille--partielle {
  background: var(--kc-color-warn-soft);
}

.correspondances-pastille--voisine {
  background: var(--kc-color-surface-3, var(--kc-color-surface));
}

/* ====================== Colonnes de table — Plan de traitement ====================== */

/* `table-layout: fixed` est nécessaire pour que les largeurs de `<col>` soient respectées :
 * `.kc-table` ne le pose pas par défaut (kc-admin.css), et sans lui le navigateur redistribue
 * les colonnes selon leur contenu, ignorant le colgroup — une colonne avec peu de contenu
 * (ex. « Surcharge » presque toujours vide) pouvait alors s'élargir au détriment d'une
 * colonne essentielle, et une action se faisait rogner. */
.kc-table--plan,
.kc-table--priorites,
.kc-table--echeances {
  table-layout: fixed;
}

/* Colonnes dimensionnées en pourcentages précis totalisant 99,87 % de la largeur de la table
 * — au plus près de 100 % sans le dépasser (ticket troncatures 1280 px, suite à relecture
 * Main) — deux exigences mesurées :
 *
 * 1) Aucun mot sans espace ne coupe en son milieu (`Range.getClientRects()` par mot ; une
 *    coupure en plein mot, ex. « reten »/« u », est pire que ce qu'elle remplace) :
 *    - État (10→13,37 %) : « Abandonnée », le libellé le plus long — depuis que la pastille
 *      de statut ne tronque plus en ellipse (`.kc-table td .kc-badge`, kc-admin.css), elle a
 *      besoin de sa pleine largeur.
 *    - Responsable (12→14,03 %) : l'en-tête seul et une valeur longue (« Responsable IT »,
 *      `.kc-table__nowrap`) débordaient.
 *    - Échéance (10→10,27 %) : marge pour une date `jj.mm.aaaa`.
 *    - Lien (15→13,81 %) : « Sensibilisation » (un seul mot, 15 caractères).
 *    - Preuve (14→10,16 %) : le repli « Aucune preuve associée » (texte brut, aucun
 *      composant de clamp, donc aucun filet d'ellipse) coupait « associée » en plein mot.
 *    - Action (26→24,97 %) : seuil mesuré par recherche dichotomique où les 5 titres de
 *      démonstration les plus longs (ex. « Définir les critères d'acceptation du risque
 *      résiduel ») tiennent encore sur deux lignes (`scrollHeight <= clientHeight` de
 *      `.kc-table__clamp`) — jamais réduite en dessous de ce seuil, même pour loger une
 *      autre colonne (régression constatée par Main en relecture sur une itération
 *      intermédiaire descendue à 17 %).
 *
 * 2) Le bouton de la dernière colonne (« Avancer ») garde une gouttière jusqu'au bord
 *    intérieur de la carte au moins égale au padding gauche de la première cellule (16 px,
 *    mesurée via `getBoundingClientRect()`) : Actions (10 % → 13,26 %, ≈ 120 px) — à 10 % de
 *    pourcentage de table (et, dans une itération intermédiaire, à `rem` fixe mélangé à des
 *    colonnes en `%` dont la somme ne totalisait pas exactement 100 %), le bouton ne gardait
 *    que 0,6 à 3,9 px de gouttière, quasiment accolé au bord de la carte.
 *
 * Mélanger `rem` et `%` dans un `<colgroup>` dont la somme ne correspond pas exactement à la
 * largeur de la table fait réétaler les colonnes de façon disproportionnée sous
 * `table-layout: fixed` (mesuré : une colonne à `rem` fixe pouvait s'étirer de 13 % au-delà
 * de sa valeur déclarée) — d'où des pourcentages exacts uniquement, sommés au plus près de
 * 100 % sans le dépasser plutôt qu'approximés. `.kc-table-defilement` n'a alors plus aucun
 * débordement horizontal
 * (`scrollWidth === clientWidth` à l'égalité stricte, plus seulement `<=`), vérifié à
 * 1280/1440/1536 px. `controle-coherence.py` (règles (p) coupure intra-mot et (q)
 * chevauchement entre cellules incluses) : 0 écart sur les 7 écrans × 4 largeurs avec ce
 * réglage. */
.kc-col-plan-action { width: 23.44%; }
.kc-col-plan-responsable { width: 14.03%; }
.kc-col-plan-echeance { width: 11.80%; }
.kc-col-plan-etat { width: 13.37%; }
.kc-col-plan-lien { width: 13.81%; }
.kc-col-plan-preuve { width: 10.16%; }
.kc-col-plan-actions { width: 13.26%; }

/* ====================== Colonnes de table — Priorités ======================
 * Nature fusionnée sous l'intitulé (comme le thème de la SoA) plutôt qu'en colonne à part :
 * sur une seule ligne, « Décision en attente » à elle seule occupait trois lignes dans une
 * colonne étroite. Surcharge fusionnée dans Statut (presque toujours vide, inutile en
 * colonne dédiée). Intitulé reste la seule colonne flexible — les autres sont nowrap. */
.kc-col-priorites-rang { width: 3rem; }
.kc-col-priorites-score { width: 5.5rem; }
.kc-col-priorites-echeance { width: 9rem; }
.kc-col-priorites-statut { width: 11rem; }
.kc-col-priorites-actions { width: 7rem; }

/* `.kc-toolbar__recherche` (kc-admin.css) place le champ de recherche et son bouton sur une
 * seule ligne, `input{flex:1;min-width:0}` : sous ~400 px, le bouton « Rechercher » ne peut
 * plus rétrécir et dépasse de quelques pixels — débordement mesuré sur cet écran (davantage
 * de puces de filtre que la moyenne). Corrigé ici (scope à cet écran, kc-admin.css hors
 * périmètre) en repliant le bouton sous le champ à l'étroit plutôt qu'en le laissant
 * déborder. */
@media (max-width: 420px) {
  .priorites .kc-toolbar__recherche {
    flex-wrap: wrap;
  }

  .priorites .kc-toolbar__recherche input[type="search"] {
    flex: 1 1 100%;
  }
}

/* ====================== Boutons natifs — Atelier guidé ======================
 * `.bouton-lien` est retiré de cet écran et de `parcours_etape.html` au profit de `kc-btn`
 * (ticket M1) : plus besoin de les retinter ici. Les `<button>` natifs des formulaires
 * inline (sans classe web, ex. « Continuer », « Faire rédiger par Kuma ») restent des
 * composants Material (`material.css`), hors périmètre de ce lot — ils portent encore la
 * teinte verte historique (`--md-sys-color-primary: #1f6f4a`), distincte du vert de marque
 * de la direction (`--kc-color-primary: #0b6e4f`). Ce correctif scopé ne retinte plus
 * qu'eux. */

.atelier-guide button {
  background: var(--kc-color-primary);
  border-color: var(--kc-color-primary);
  color: var(--kc-color-on-primary);
  transition: background var(--kc-dur-rapide) var(--kc-ease-standard);
}

.atelier-guide button:hover {
  background: var(--kc-color-primary-hover);
}

.atelier-guide button.discret,
.atelier-guide button.discrete {
  background: transparent;
  border-color: var(--kc-color-border);
  color: var(--kc-color-primary);
}

/* Tiroir du dossier (dossier_complet.html) : tuiles de navigation à nombre variable par
   groupe et par dossier. Une `.kc-grid` laisserait une rangée finale incomplète dès que ce
   compte n'est pas un multiple du nombre de colonnes rendu (règle de contrôle (h)) ; un flux
   flexible qui enveloppe ne laisse jamais de piste vide, la dernière tuile s'arrête
   simplement là où le compte s'arrête.

   Les tuiles sont des enfants directs de `.kc-section` (pas d'enveloppe intermédiaire) :
   le titre de section (`.kc-section-titre`) passe en ligne pleine largeur, suivi des
   cartes qui s'enveloppent — tous au même `gap` que `.kc-section` porte déjà, vérifié
   explicitement par le contrôle de cohérence quand les deux éléments comparés partagent le
   même parent. */
.kc-section.kc-tuiles {
  flex-direction: row;
  flex-wrap: wrap;
}

.kc-section.kc-tuiles > .kc-section-titre {
  flex-basis: 100%;
}

.kc-section.kc-tuiles > .kc-card {
  flex: 1 1 14rem;
  min-width: 14rem;
}