/* Écrans de corpus en Material 3.
 *
 * Cette feuille complète le socle sans reprendre ses surfaces de liste. Les écrans gardent
 * leur vocabulaire métier, mais les états sont toujours écrits, les formulaires annoncent
 * leur champ avant la saisie et les grilles peuvent rétrécir sans couper leur contenu.
 * Toutes les teintes, polices et distances viennent des tokens Material.
 */

/* — Cadre commun : une colonne qui ne peut pas imposer de largeur à ses enfants — */

body.theme-md .ecran {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.theme-md .ecran a:not(.bouton-lien):not(.kc-btn):not(.kc-chip) {
  color: var(--md-sys-color-primary);
  text-underline-offset: var(--pas-1);
}

body.theme-md .ecran a:not(.bouton-lien):not(.kc-btn):not(.kc-chip):hover {
  color: var(--md-sys-color-on-surface);
}

/* Le composant `kc-btn` porte déjà sa propre couleur de texte (`kc-admin.css`) : sans cette
   exclusion, cette règle (plus spécifique que `.kc-btn--primary` seule) repeignait le texte
   des boutons-liens `kc-btn` dans la même teinte que leur fond, le rendant invisible — trouvé
   sur les écrans Registres, Plan d'action et Équipe (ticket #47). */

body.theme-md .ecran a.bouton-lien,
body.theme-md .ecran a.bouton-lien:hover {
  color: var(--md-sys-color-on-primary);
}

body.theme-md .ecran .meta,
body.theme-md .ecran .cote-colonne,
body.theme-md .ecran .tampon,
body.theme-md .ecran .etiquette {
  font-family: var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}
body.theme-md .ecran .cote-colonne {
  min-width: 0;
  color: var(--md-sys-color-on-surface-variant);
}

body.theme-md .ecran .a-deposer,
body.theme-md .ecran .constat,
body.theme-md .ecran .citation {
  border-left-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface-variant);
}

body.theme-md .ecran .message {
  background: var(--md-sys-color-surface-container-low);
  border-left-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
  overflow-wrap: anywhere;
}

body.theme-md .ecran .erreur {
  padding: var(--pas-3);
  border-left: var(--pas-1) solid var(--md-sys-color-error);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

body.theme-md .ecran .vide {
  padding: var(--pas-6);
  border: 1px dashed var(--md-sys-color-outline);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface-variant);
}

/* Les compteurs sont une rangée d'information, pas quatre cartes concurrentes. */
body.theme-md .ecran .compteurs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--pas-2);
  margin: 0 0 var(--pas-6);
}

body.theme-md .ecran .compteur {
  min-width: 0;
  padding: var(--pas-3) var(--pas-4);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface);
}

body.theme-md .ecran .compteur b {
  display: block;
  font-family: var(--md-ref-typeface-plain);
  font-variant-numeric: tabular-nums;
}

body.theme-md .ecran .compteur span {
  display: block;
  margin-top: var(--pas-1);
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-ref-typeface-plain);
}

/* — Contrôles : libellé au-dessus, largeur de saisie proportionnée à la valeur — */

body.theme-md .ecran form {
  min-width: 0;
  max-width: 100%;
}

body.theme-md .ecran form > label,
body.theme-md .ecran form label:not(.invisible) {
  display: block;
  margin: var(--pas-3) 0 var(--pas-1);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.8125rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

body.theme-md .ecran form > label:first-of-type {
  margin-top: 0;
}

/* Tous les types de champ textuel de l'HTML (hors `file`, stylé à part juste en dessous) :
 * `text`, `email`, `number`, `date`, `url`, `search`, `tel`, `datetime-local` et `password`
 * partagent le même rendu. `checkbox`, `radio`, `range`, `color`, `hidden` et les types de
 * bouton en restent exclus : le même sélecteur les avait étirés en pleine largeur (ticket 120). */
body.theme-md .ecran input[type="text"],
body.theme-md .ecran input[type="email"],
body.theme-md .ecran input[type="number"],
body.theme-md .ecran input[type="date"],
body.theme-md .ecran input[type="url"],
body.theme-md .ecran input[type="search"],
body.theme-md .ecran input[type="tel"],
body.theme-md .ecran input[type="datetime-local"],
body.theme-md .ecran input[type="file"],
body.theme-md .ecran input[type="password"],
body.theme-md .ecran textarea,
body.theme-md .ecran select {
  display: block;
  box-sizing: border-box;
  inline-size: min(100%, 36rem);
  max-inline-size: 100%;
  min-height: calc(var(--pas-6) + var(--pas-4) + var(--pas-1));
  padding: var(--pas-2) var(--pas-3);
  /* `--md-sys-color-outline` (contraste 2,44:1 contre blanc) sert aussi à des bordures
     décoratives (citations, compteurs, encadrés) où WCAG 1.4.11 ne s'applique pas — mais un
     CHAMP DE SAISIE en a besoin pour que sa limite reste perceptible (Refs 168). Même token
     que `.kc-panel__formulaire input` (kc-admin.css), 3,56:1. */
  border: 1px solid var(--kc-color-border-interactif);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  font: 400 0.9375rem/1.5 var(--md-ref-typeface-plain);
}

body.theme-md .ecran textarea {
  min-height: calc(var(--pas-6) * 4);
  resize: vertical;
}

body.theme-md .ecran input[type="file"] {
  padding-block: var(--pas-2);
}

body.theme-md .ecran input[type="text"]:focus-visible,
body.theme-md .ecran input[type="email"]:focus-visible,
body.theme-md .ecran input[type="number"]:focus-visible,
body.theme-md .ecran input[type="date"]:focus-visible,
body.theme-md .ecran input[type="url"]:focus-visible,
body.theme-md .ecran input[type="search"]:focus-visible,
body.theme-md .ecran input[type="tel"]:focus-visible,
body.theme-md .ecran input[type="datetime-local"]:focus-visible,
body.theme-md .ecran input[type="file"]:focus-visible,
body.theme-md .ecran input[type="password"]:focus-visible,
body.theme-md .ecran textarea:focus-visible,
body.theme-md .ecran select:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: var(--pas-1);
}

body.theme-md .ecran button,
body.theme-md .ecran a.bouton-lien {
  min-height: calc(var(--pas-6) + var(--pas-4) + var(--pas-1));
}

body.theme-md .ecran button:disabled,
body.theme-md .ecran a.bouton-lien[aria-disabled="true"] {
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
  cursor: not-allowed;
}

body.theme-md .ecran .actions {
  gap: var(--pas-2);
}

/* Le mot reste le signal d'état principal, même quand une bande colorée l'accompagne. */
body.theme-md .ecran .tampon {
  min-height: var(--pas-6);
  padding: var(--pas-1) var(--pas-2);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--pas-2);
  white-space: normal;
}

body.theme-md .ecran .tampon--visa {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

body.theme-md .ecran .tampon--marge {
  border-color: var(--md-sys-color-on-tertiary-container);
  background: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}

body.theme-md .ecran .tampon--ecart {
  border-color: var(--md-sys-color-error);
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

body.theme-md .ecran .tampon--attente {
  border-color: var(--md-sys-color-outline);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface-variant);
}

/* — File de propositions : la section porte la feuille, chaque proposition un filet — */













body.theme-md .revue-groupe .citation,
body.theme-md .revue-groupe .meta {
  overflow-wrap: anywhere;
}

/* `button[value="refusee"]` (kuma.css) colorait « Écarter » en rouge via un sélecteur
   d'attribut, plus spécifique qu'une simple classe `.kc-btn--secondary`. Écarter une
   proposition n'est pas une action destructrice (ticket #47) : spécificité relevée pour
   laisser le bouton secondaire l'emporter, sans toucher à `value="refusee"` dont la vue
   `revoir` dépend. */
body.theme-md .revue-groupe button.kc-btn--secondary[value="refusee"] {
  background: var(--kc-color-surface);
  border-color: var(--kc-color-border);
  color: var(--kc-color-text);
}

body.theme-md .revue-groupe button.kc-btn--secondary[value="refusee"]:hover {
  background: var(--kc-color-neutral-soft);
}

/* — Déclaration d'applicabilité : deux colonnes stables, décision sous son titre — */

body.theme-md .ecran-soa details > .soa-ligne {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--pas-4);
  min-width: 0;
  padding: var(--pas-3) var(--pas-4);
  margin: 0;
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  border-left: var(--pas-1) solid var(--md-sys-color-outline);
  border-radius: 0;
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-soa details > .soa-ligne:first-of-type {
  border-top: 0;
}

body.theme-md .ecran-soa .soa-ligne--visa {
  border-left-color: var(--md-sys-color-primary);
}

body.theme-md .ecran-soa .soa-ligne--ecart {
  border-left-color: var(--md-sys-color-error);
}

body.theme-md .ecran-soa .soa-ligne > .cote-colonne {
  padding: 0 var(--pas-3) 0 0;
  border-right: 1px solid var(--md-sys-color-outline-variant);
  text-align: right;
}

body.theme-md .ecran-soa .soa-corps {
  min-width: 0;
}

body.theme-md .ecran-soa .soa-tete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--pas-2);
  min-width: 0;
}

body.theme-md .ecran-soa .soa-tete strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

body.theme-md .ecran-soa .soa-actions {
  display: grid;
  gap: var(--pas-3);
  min-width: 0;
  margin-top: var(--pas-3);
}

body.theme-md .ecran-soa form.decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: var(--pas-2);
  min-width: 0;
}

body.theme-md .ecran-soa form.decision label {
  grid-column: 1 / -1;
  margin: 0;
}

body.theme-md .ecran-soa form.decision select {
  inline-size: min(100%, 24rem);
  min-width: 0;
}

body.theme-md .ecran-soa details.exclusion {
  min-width: 0;
}

body.theme-md .ecran-soa details.exclusion > summary {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--pas-6) + var(--pas-4) + var(--pas-1));
  padding: var(--pas-2) var(--pas-3);
  border: 1px solid var(--md-sys-color-error);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-error);
  cursor: pointer;
  font: 500 0.875rem/1.43 var(--md-ref-typeface-plain);
}

body.theme-md .ecran-soa details.exclusion > summary:hover,
body.theme-md .ecran-soa details.exclusion > summary:focus-visible {
  background: var(--md-sys-color-error-container);
}

body.theme-md .ecran-soa details.exclusion[open] {
  padding: var(--pas-3);
  border: 1px solid var(--md-sys-color-error);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-error-container);
}

body.theme-md .ecran-soa details.exclusion[open] > summary {
  padding: 0;
  border: 0;
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
}

body.theme-md .ecran-soa details.exclusion form {
  display: grid;
  gap: var(--pas-2);
  min-width: 0;
}

/* — Demandes : la liste est un fil de décisions, pas une mosaïque de cartes — */

body.theme-md .ecran-demandes .demande-ligne,
body.theme-md .ecran-demande .demande-ligne {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--pas-4);
  min-width: 0;
  padding: var(--pas-4) 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-demandes .demande-ligne:first-of-type {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

body.theme-md .ecran-demandes .demande-corps,
body.theme-md .ecran-demande .demande-corps {
  min-width: 0;
}

body.theme-md .ecran-demandes .demande-actions {
  min-width: 0;
  align-items: flex-start;
}

body.theme-md .ecran-demande .sous-demandes {
  padding: 0;
  margin: 0 0 var(--pas-6);
  list-style: none;
}

/* La surface vit sur le `div.kc-card` imbriqué, jamais sur le `li` lui-même (un `li`
   n'est jamais compté comme surface par le contrôle de cohérence) — la liste n'a donc
   plus besoin de puce et porte elle-même le gap entre lignes. */
body.theme-md .ecran-demande .kc-sous-demandes-panel {
  display: flex;
  flex-direction: column;
  gap: var(--kc-grid-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

body.theme-md .ecran-demande .depot {
  padding: var(--pas-4);
  margin: var(--pas-6) 0 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-left: var(--pas-1) solid var(--md-sys-color-primary);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-demande .depot .libelle-section {
  margin: 0 0 var(--pas-2);
  color: var(--md-sys-color-on-surface);
  font: 500 0.9375rem/1.5 var(--md-ref-typeface-plain);
}

body.theme-md .ecran-demande .depot .actions {
  justify-content: flex-start;
  margin-top: var(--pas-3);
}

/* — Organisme et missions — */

body.theme-md .ecran-organisme .organisme-form {
  display: grid;
  gap: var(--pas-2);
  max-width: 42rem;
  padding: var(--pas-6);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-organisme .organisme-form label {
  margin: var(--pas-2) 0 0;
}

body.theme-md .ecran-organisme .organisme-form input {
  inline-size: min(100%, 36rem);
}

body.theme-md .ecran-organisme .organisme-form .actions {
  justify-content: flex-start;
  margin-top: var(--pas-2);
}

body.theme-md .ecran-organisme .organisme-ligne {
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  gap: var(--pas-4);
  min-width: 0;
  padding: var(--pas-3) 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 0;
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-organisme .organisme-ligne:first-of-type {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

body.theme-md .ecran-organisme .organisme-corps {
  min-width: 0;
}

body.theme-md .ecran-organisme .organisme-actions {
  min-width: 0;
  align-items: flex-start;
}

/* La liste des missions : une carte par dossier, aérée, avec sa barre d'avancement.
   L'ancienne ligne tenait sur deux colonnes serrées — nom à gauche, état à droite — et ne
   disait ni le référentiel ni où le dossier en était. Elle porte maintenant quatre niveaux
   d'information, du plus identifiant au plus détaillé, et l'espace vient de là : chaque niveau
   a son rang, aucun ne se dispute la même ligne. */

body.theme-md .ecran-dossiers .missions {
  margin: var(--pas-6) 0 calc(var(--pas-6) * 2);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--pas-4);
}

body.theme-md .ecran-dossiers .mission-ligne {
  display: grid;
  gap: var(--pas-3);
  padding: var(--pas-6);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pas-3);
  background: var(--md-sys-color-surface);
  transition: border-color 120ms linear;
}

body.theme-md .ecran-dossiers .mission-ligne:hover,
body.theme-md .ecran-dossiers .mission-ligne:focus-within {
  border-color: var(--md-sys-color-primary);
}

body.theme-md .ecran-dossiers .mission-nom {
  font: 600 1.125rem/1.3 var(--md-ref-typeface-brand);
  letter-spacing: -0.01em;
}

body.theme-md .ecran-dossiers .mission-cadre {
  margin: 0;
}

/* La barre : la piste porte la couleur de fond, le remplissage celle du palier. La couleur
   encode l'avancement — elle n'est pas décorative, chaque palier a son seuil déclaré dans
   `missions/vues_missions.py`. */

body.theme-md .ecran-dossiers .avancement {
  display: grid;
  gap: var(--pas-2);
}

/* La largeur venait d'un `style="width: N%"` que la CSP écarte : la barre s'affichait pleine pour
   toute valeur, mesurée à 902 px pour 2 %. `<progress value max>` porte maintenant la valeur dans
   un attribut, hors d'atteinte de la politique.

   La forme reste ici, avec la couleur du palier, exactement là où vivait l'ancienne règle :
   `base.html` charge cette feuille sans condition et porte `theme-md` en dur, et
   `.avancement-piste` n'a qu'un seul consommateur. Répartir la géométrie dans `kuma.css` et la
   couleur ici séparerait deux moitiés d'une même règle sans qu'aucun appelant le demande.

   Le prix de `<progress>` : deux pseudo-éléments non standardisés, l'un pour Chromium et WebKit,
   l'autre pour Firefox. Ils ne peuvent pas être groupés - un sélecteur inconnu invalide toute la
   règle qui le contient - donc chaque moteur a la sienne. */
body.theme-md .ecran-dossiers .avancement-piste {
  appearance: none;
  display: block;
  inline-size: 100%;
  block-size: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--md-sys-color-surface-container-high);
  overflow: hidden;
}

body.theme-md .ecran-dossiers .avancement-piste::-webkit-progress-bar {
  background: var(--md-sys-color-surface-container-high);
  border-radius: 999px;
}

body.theme-md .ecran-dossiers .avancement-piste::-webkit-progress-value {
  border-radius: 999px;
  transition: inline-size 200ms linear;
}

body.theme-md .ecran-dossiers .avancement-piste::-moz-progress-bar {
  border-radius: 999px;
}

/* Cinq paliers, et la couleur doit **progresser** pour dire quelque chose. Deux jetons
   employés d'abord n'existaient pas — `--md-sys-color-tertiary` n'est pas déclaré, seul son
   conteneur l'est — et la barre s'est affichée transparente : 20 % d'avancement invisible.
   Un troisième, `secondary`, est un gris ardoise : il ne se lit pas comme une progression.

   La progression retenue va du neutre au vert plein de la marque, en passant par l'ambre du
   conteneur tertiaire. Le départ reste neutre : colorer le vide en rouge accuserait un dossier
   qui vient d'être ouvert, alors qu'il n'a encore rien à se reprocher. */
body.theme-md .ecran-dossiers .avancement-piste--depart::-webkit-progress-value {
  background: var(--md-sys-color-outline-variant);
}

body.theme-md .ecran-dossiers .avancement-piste--depart::-moz-progress-bar {
  background: var(--md-sys-color-outline-variant);
}

body.theme-md .ecran-dossiers .avancement-piste--amorce::-webkit-progress-value {
  background: var(--md-sys-color-avancement-amorce);
}

body.theme-md .ecran-dossiers .avancement-piste--amorce::-moz-progress-bar {
  background: var(--md-sys-color-avancement-amorce);
}

body.theme-md .ecran-dossiers .avancement-piste--engage::-webkit-progress-value {
  background: var(--md-sys-color-avancement-engage);
}

body.theme-md .ecran-dossiers .avancement-piste--engage::-moz-progress-bar {
  background: var(--md-sys-color-avancement-engage);
}

body.theme-md .ecran-dossiers .avancement-piste--avance::-webkit-progress-value {
  background: var(--md-sys-color-primary);
}

body.theme-md .ecran-dossiers .avancement-piste--avance::-moz-progress-bar {
  background: var(--md-sys-color-primary);
}

/* Complet : le même vert, souligné par un liseré plus sombre. La teinte ne change pas — c'est
   l'aboutissement de la même échelle, pas une catégorie à part. */
body.theme-md .ecran-dossiers .avancement-piste--complet::-webkit-progress-value {
  background: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-avancement-acheve);
}

body.theme-md .ecran-dossiers .avancement-piste--complet::-moz-progress-bar {
  background: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 1px var(--md-sys-color-avancement-acheve);
}

body.theme-md .ecran-dossiers .avancement-legende {
  margin: 0;
}

/* Le geste suivant : une phrase, avant les faits datés. C'est la première chose qu'un
   novice cherche en ouvrant l'écran, et elle mène à la feuille de route. */

body.theme-md .ecran-dossiers .mission-reprise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pas-1) var(--pas-2);
  margin: 0 0 var(--pas-3);
  padding: var(--pas-2) var(--pas-3);
  border: 1px solid var(--md-sys-color-primary);
  border-radius: 8px;
  background: var(--md-sys-color-surface-container-low);
}

body.theme-md .ecran-dossiers .mission-reprise strong {
  font-weight: 500;
}

body.theme-md .ecran-dossiers .mission-route {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: calc(-1 * var(--kc-space-2)) 0 calc(-1 * var(--kc-space-2)) auto;
  font-size: 0.875rem;
}

/* Les faits datés : deux paires, en ligne sur large, empilées sur petit écran. */

body.theme-md .ecran-dossiers .mission-faits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--pas-6);
  margin: 0;
  padding: var(--pas-3) 0 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  font: 400 0.8125rem/1.5 var(--md-ref-typeface-plain);
  color: var(--md-sys-color-on-surface-variant);
}

body.theme-md .ecran-dossiers .mission-faits dt {
  display: inline;
  margin: 0;
}

body.theme-md .ecran-dossiers .mission-faits dt::after {
  content: " : ";
}

body.theme-md .ecran-dossiers .mission-faits dd {
  display: inline;
  margin: 0 var(--pas-4) 0 0;
  color: var(--md-sys-color-on-surface);
}

/* Le choix du référentiel : une ligne par cadre, sa note en dessous.
   Titre et note étaient deux `span` en ligne — « management de la qualité corpus
   d'exigences disponible » se lisait comme une seule phrase. */

body.theme-md .choix-referentiel {
  margin: var(--pas-4) 0 0;
  padding: var(--pas-3) 0 0;
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

body.theme-md .choix-referentiel > legend {
  padding: 0 var(--pas-2) 0 0;
  font: 500 0.875rem/1.4 var(--md-ref-typeface-plain);
  color: var(--md-sys-color-on-surface-variant);
}

body.theme-md .ecran form label.choix-referentiel-ligne {
  display: flex;
  gap: var(--pas-3);
  align-items: flex-start;
  padding: var(--pas-3) 0;
  cursor: pointer;
}

body.theme-md .ecran form label.choix-referentiel-ligne + label.choix-referentiel-ligne {
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

/* `.kc-panel__formulaire input:not([type="hidden"]):not([type="checkbox"])` (kc-admin.css)
   étire tout input texte à 100 % de large pour les aligner avec leurs labels empilés — mais
   une case radio n'est pas un champ de saisie : étirée, elle poussait son libellé en escalier
   au lieu de rester collée à gauche du bouton. `width: auto` redonne au bouton sa taille
   intrinsèque, sans toucher la règle partagée qui reste correcte pour tout le reste du
   formulaire. */
body.theme-md .ecran form label.choix-referentiel-ligne > input {
  width: auto;
  margin: var(--kc-space-1) 0 0;
  accent-color: var(--md-sys-color-primary);
}

body.theme-md .choix-referentiel-corps {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-1);
}

body.theme-md .choix-referentiel-note {
  display: block;
}

/* — Connexion : une seule feuille centrée — */

body.theme-md .ecran-connexion {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body.theme-md .ecran-connexion > h1,
body.theme-md .ecran-connexion > .chapeau {
  inline-size: min(100%, 26rem);
}

body.theme-md .ecran-connexion .connexion-feuille {
  inline-size: min(100%, 26rem);
  padding: var(--pas-6);
  margin: var(--pas-4) 0 0;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--pas-2);
  background: var(--md-sys-color-surface);
}

body.theme-md .ecran-connexion form {
  display: grid;
  gap: var(--pas-2);
}

body.theme-md .ecran-connexion form label {
  margin: 0;
}

body.theme-md .ecran-connexion form input {
  inline-size: 100%;
  max-inline-size: none;
}

body.theme-md .ecran-connexion form .actions {
  justify-content: flex-start;
  margin-top: var(--pas-2);
}

/* — Aperçu : même hiérarchie que la sortie imprimable, sans chasse pour les états — */

/* `.document-imprimable` vit dans la colonne principale de `.document-disposition`
   (`.kc-layout-aside`) : la carte occupe toute sa colonne, seule la mesure de lecture du
   texte (pas la largeur de la carte) reste limitée, dans `.kc-card__body`. */
body.theme-md .ecran-apercu .document-disposition {
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
}

/* La carte remplit sa colonne : le plafond `44rem` de `kuma.css` (pensé pour la page
   imprimée) laissait un grand vide entre le texte et la colonne latérale. */
body.theme-md .ecran-apercu .document-imprimable {
  max-width: none;
}

@media (max-width: 1023.98px) {
  body.theme-md .ecran-apercu .document-disposition {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La carte de métadonnées vit dans la colonne latérale étroite de `.document-disposition`
   (~18rem) : la grille de `.guide-faits` (2 puis 4 colonnes, pensée pour la pleine largeur
   d'une carte d'atelier) y écrase chaque case et coupe les mots lettre à lettre. Une seule
   colonne, libellé au-dessus de la valeur, et le retour à la ligne normal du navigateur
   (jamais de coupure au milieu d'un mot) plutôt que `overflow-wrap: anywhere` hérité. */
body.theme-md .ecran-apercu .document-metadonnees {
  grid-template-columns: 1fr;
}

body.theme-md .ecran-apercu .document-metadonnees dd {
  overflow-wrap: normal;
}

/* Pile interne de la carte : les blocs qui se suivent (en-tête, bandeaux, sections) sont
   espacés par un gap, jamais par une marge posée par le bloc lui-même (règle 1). La mesure
   de lecture (largeur maximale du texte) est propre à cet écran. */
body.theme-md .ecran-apercu .document-imprimable .kc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--kc-section-gap);
  max-width: 42rem;
}

body.theme-md .ecran-apercu .document-tete {
  padding-bottom: var(--pas-4);
  border-bottom: 2px solid var(--md-sys-color-on-surface);
}

body.theme-md .ecran-apercu .document-reference {
  margin: 0;
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.75rem/1.5 var(--md-ref-typeface-plain);
  letter-spacing: 0;
  text-transform: none;
}

body.theme-md .ecran-apercu .document-tete h1 {
  overflow-wrap: anywhere;
}

body.theme-md .ecran-apercu .section-titre {
  margin: 0 0 var(--pas-2);
  border-bottom: 0;
  font-size: var(--kc-font-size-lg);
  color: var(--md-sys-color-on-surface);
}

body.theme-md .ecran-apercu .libelle-section {
  margin: var(--pas-3) 0 var(--pas-1);
  color: var(--md-sys-color-on-surface-variant);
  font: 500 0.75rem/1.5 var(--md-ref-typeface-plain);
}

/* `.marque-a-completer` et `.bandeau-lacunes` migrent vers `.kc-alert` (gabarit) : le nom
   historique reste sur l'élément comme crochet, il ne porte plus de style de surface. */
body.theme-md .ecran-apercu .marque-a-completer p:last-child {
  color: var(--md-sys-color-on-surface);
}

@media (max-width: 640px) {
  body.theme-md .proposition-ligne {
      padding: var(--pas-3);
    }

  /* La carte de mission resserre son air sur petit écran : la grille verticale tient déjà
     sans repli, mais 40 px de marge intérieure sur 390 px de large mangeraient la moitié de
     la ligne. Les faits datés s'empilent — deux paires côte à côte y deviendraient illisibles. */
  body.theme-md .ecran-dossiers .mission-ligne {
    padding: var(--pas-4);
  }

  body.theme-md .ecran-dossiers .mission-faits {
    display: grid;
    gap: 0;
  }

  body.theme-md .ecran-dossiers .mission-faits dd {
    margin-right: 0;
  }

  body.theme-md .ecran-soa details > .soa-ligne {
    grid-template-columns: 1fr;
    gap: var(--pas-2);
    padding: var(--pas-3) 0;
  }

  body.theme-md .ecran-soa .soa-ligne > .cote-colonne {
    padding: 0 0 var(--pas-1);
    border-right: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
  }

  body.theme-md .ecran-soa .soa-tete {
    grid-template-columns: 1fr;
  }

  body.theme-md .ecran-soa form.decision {
    grid-template-columns: 1fr;
  }

  body.theme-md .ecran-soa form.decision label {
    grid-column: auto;
  }

  body.theme-md .ecran-soa form.decision select {
    inline-size: 100%;
  }

  body.theme-md .ecran-demandes .demande-ligne,
  body.theme-md .ecran-demande .demande-ligne,
  body.theme-md .ecran-organisme .organisme-ligne {
    grid-template-columns: 1fr;
    gap: var(--pas-2);
    padding: var(--pas-3) 0;
  }

  body.theme-md .ecran-demandes .demande-ligne > .cote-colonne,
  body.theme-md .ecran-demande .demande-ligne > .cote-colonne,
  body.theme-md .ecran-organisme .organisme-ligne > .cote-colonne {
    padding: 0 0 var(--pas-1);
    border-right: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
  }

  body.theme-md .ecran-demandes .demande-actions,
  body.theme-md .ecran-organisme .organisme-actions {
    justify-content: flex-start;
  }

  body.theme-md .ecran-organisme .organisme-form,
  body.theme-md .ecran-connexion .connexion-feuille {
    padding: var(--pas-4);
  }
}

/* La table Documents porte 46 lignes à pleine échelle (25 par page) : la carte compacte
   générique (`.kc-row-compact`, `kc-admin.css`) gardait sa densité par défaut, pensée pour
   la SoA dont les intitulés tiennent sur une ligne. Les titres de documents, plus longs,
   gonflaient la hauteur sous 640 px au-delà de l'objectif « divisée par 3 au moins » mesuré
   contre l'avant-overhaul (11 422 px → viser ≤ 3 807 px pour 25 lignes). Resserrer le
   padding vertical et la gouttière entre cartes, propre à cet écran, suffit à repasser sous
   le seuil sans toucher au composant partagé ni réduire son contenu. */
@media (max-width: 639.98px) {
  body.theme-md .ecran-arbre-documents .kc-rows-compact {
    gap: var(--kc-space-2);
  }

  body.theme-md .ecran-arbre-documents .kc-row-compact {
    padding-block: var(--kc-space-1);
  }
}

/* Répartition des colonnes de la table de lecture de l'analyse d'écart (`ecarts.html`,
   vue par défaut) : même technique que `.kc-table--soa` (`kc-admin.css`) — `table-layout:
   fixed` plus un `<colgroup>` en pourcentages — pour que « Pièce attendue » garde une
   largeur stable au lieu de se faire écraser par les codes d'exigence ou les pastilles
   d'état. Propre à cet écran : le patron reste celui de la SoA, pas une duplication du
   composant partagé. */
body.theme-md .ecran-ecarts .kc-table--ecarts {
  table-layout: fixed;
}

body.theme-md .ecran-ecarts .kc-col-ecarts-exigences { width: 9%; }
body.theme-md .ecran-ecarts .kc-col-ecarts-piece { width: 36%; }
body.theme-md .ecran-ecarts .kc-col-ecarts-constate { width: 11%; }
body.theme-md .ecran-ecarts .kc-col-ecarts-declaration { width: 21%; }
body.theme-md .ecran-ecarts .kc-col-ecarts-bloquant { width: 11%; }
body.theme-md .ecran-ecarts .kc-col-ecarts-actions { width: 7.5rem; }

/* La colonne Actions accueille maintenant aussi les liens « + action » du plan (un par
   exigence, Refs 210) à côté de « Détail » — `.kc-table__action` (kc-admin.css) impose
   `white-space: nowrap` pensé pour un bouton unique : plusieurs liens y débordaient sur
   une seule ligne. Repasse en retour à la ligne normal, propre à cette colonne : chaque
   lien garde sa propre ligne plutôt qu'un défilement horizontal par rangée. */
body.theme-md .ecran-ecarts td[data-label="Actions"].kc-table__action {
  white-space: normal;
  text-align: left;
}

/* Densité de la table de lecture de l'analyse d'écart : chaque intitulé de pièce est une
   phrase complète — `.kc-table__clamp` (kc-admin.css) clampe à 2 lignes par défaut, resserré
   à 1 ligne ici (texte complet déjà disponible dans `#kc-aside` via « Détail », conforme à la
   fourchette « 1–2 lignes » demandée) : à 2 lignes, 25 rangées dépassaient largement
   l'objectif de Main (overhaul-lot-b, 2e revue : ≤ 2 300 px pour 25 lignes à 1440 px). Le
   padding par défaut (pensé pour un contenu d'une ligne sans métadonnée) est resserré pour
   la même raison. Même geste que la table Documents ci-dessus, propre à cet écran. */
body.theme-md .ecran-ecarts .kc-table--ecarts th,
body.theme-md .ecran-ecarts .kc-table--ecarts td {
  padding-block: var(--kc-space-2);
}

body.theme-md .ecran-ecarts .kc-table--ecarts .kc-table__clamp {
  -webkit-line-clamp: 1;
}

body.theme-md .ecran-ecarts .kc-table--ecarts .kc-kpi__hint {
  margin-top: var(--kc-space-1);
}

/* En-tête et tuiles : la pile de page (`kc-admin.css`, `.kc-main`) donne déjà un écart
   uniforme par jetons — plus de resserrement propre à cet écran. */

/* Les quatre libellés de cet écran (« Déclarées », « Manques bloquants »…) tiennent tous
   sur une ligne : la réserve de deux lignes du composant partagé (pensée pour des libellés
   plus longs ailleurs) n'a pas lieu d'être ici. */
body.theme-md .ecran-ecarts .kc-kpi__label {
  min-height: 0;
}


/* La carte « Les manques qui bloquent le plus » reprend le même geste : son padding par
   défaut (`.kc-card__header`/`.kc-card__body`, `kc-admin.css`) est pensé pour une carte
   isolée dans une grille, pas pour une bande au-dessus d'une table de 25 lignes. */
body.theme-md .ecran-ecarts .kc-card__header {
  padding-block-start: var(--kc-space-2);
}

body.theme-md .ecran-ecarts .kc-card__body {
  padding: var(--kc-space-2) var(--kc-space-5);
}

body.theme-md .ecran-ecarts .kc-card__body .kc-list > li {
  padding-block: var(--kc-space-1);
}

/* Répartition des colonnes de la table Documents (`arbre_documents.html`) : même technique
   que `.kc-table--soa` — `table-layout: fixed` plus un `<colgroup>` en pourcentages — pour
   que « Document » (titre) garde une largeur stable au lieu de se faire écraser par les
   autres colonnes sous l'algorithme `auto` (mots coupés mesurés avant cette correction). */
body.theme-md .ecran-arbre-documents .kc-table--documents {
  table-layout: fixed;
}

/* À 1280 px la table n'a que ≈ 880 px : « demo-consultant » (propriétaire, sans retour à la
   ligne) empiète sur la date, « à compléter » et « Mise à jour » sont rognés (contrôle de
   cohérence (k) et (q)). Largeur plancher égale à celle dont la table dispose à 1440 px
   (où ces lignes tiennent) : sous cette largeur le conteneur `.kc-table-defilement` défile
   plutôt que d'écraser une colonne. Pas de plancher en mobile (liste compacte). */
@media (min-width: 1024px) {
  body.theme-md .ecran-arbre-documents .kc-table--documents {
    min-width: 1040px;
  }
}

/* Bibliothèque documentaire (`bibliotheque.html`) : `.ecran` pose `overflow-wrap: anywhere`,
   qui ramène la largeur minimale d'une colonne à un seul caractère — à 1280 px le moteur de
   table écrase alors « Revue » et « Titre » et coupe « planifiée »/« Gouvernance » en plein
   mot (contrôle de cohérence, règle de coupure). Retour à la coupe normale, entre les mots :
   la table prend sa largeur minimale réelle et le conteneur défile au besoin. */
body.theme-md .ecran-bibliotheque .kc-table th,
body.theme-md .ecran-bibliotheque .kc-table td {
  overflow-wrap: normal;
}

/* Niveau (15 → 17 %) / Titre (26 → 24 %) : « Enregistrement », le plus long intitulé de
   niveau sans espace, coupait en plein milieu à 1280 px dans la colonne à 15 % — le
   `white-space: normal` posé plus bas (nécessaire pour les intitulés à plusieurs mots type
   « Déclaration d'applicabilité ») hérite `overflow-wrap: anywhere` de `.ecran`
   (ecrans-corpus.css ci-dessus) et le fait valoir dès qu'un mot seul dépasse sa colonne —
   mesuré, 11 pastilles par dossier (Refs #87). Titre garde une colonne large (24 %, toujours
   la plus large de la table) : aucun titre de document mesuré n'en dépend pour tenir sur une
   ou deux lignes.

   `min-width` en px sur Niveau et Classement (intégration lot 12, 19.10.2026) : les pourcentages
   seuls (14 %/13 %) retombaient sous la largeur d'un seul mot sans espace (« Enregistrement »
   101 px, « Conditionnel » 87 px, plus 32 px de padding de cellule) dès que le reste de la
   table (Référence/Titre/Statut/Propriétaire/Mise à jour) occupait déjà sa largeur de contenu
   sans aucune marge propre — mesuré 1280 px, contrôle de cohérence règle p (« Conditionne »/
   « l » sur deux lignes). Aucune colonne voisine n'a de marge à céder sans tronquer un contenu
   qui tient aujourd'hui pile (Référence, Propriétaire, Date : `scrollWidth == clientWidth`).
   `.kc-table-defilement` (kc-admin.css) enveloppe déjà la table d'un défilement horizontal :
   un `min-width` en px sur ces deux colonnes seules laisse la table dépasser son conteneur et
   défiler plutôt que de sacrifier une colonne déjà tendue — jamais un pourcentage volé ailleurs. */
body.theme-md .ecran-arbre-documents .kc-col-documents-reference { width: 11%; }
body.theme-md .ecran-arbre-documents .kc-col-documents-titre { width: 17%; }
body.theme-md .ecran-arbre-documents .kc-col-documents-niveau { width: 14%; min-width: 150px; }
/* Classement (Refs 156) : la colonne n'avait aucune largeur propre — le navigateur lui
   laissait le reste (≈8 %) après les six autres colonnes, trop étroit pour « Obligatoire
   (norme) » ou « à décider » sans coupure (mesuré 1280/1440 px, contrôle de cohérence règle k). */
body.theme-md .ecran-arbre-documents .kc-col-documents-classement { width: 13%; min-width: 130px; }
body.theme-md .ecran-arbre-documents .kc-col-documents-statut { width: 13%; }
body.theme-md .ecran-arbre-documents .kc-col-documents-proprietaire { width: 12%; }
body.theme-md .ecran-arbre-documents .kc-col-documents-date { width: 10%; }
/* Actions (recette, 1440 px) : la colonne n'avait aucune largeur propre et ne recevait que le
   reliquat (≈ 7 %), qui rognait le bouton « Rédiger » à côté d'« Aperçu ». Largeur minimale en
   px garantie ; les boutons passent à la ligne plutôt que d'être coupés. */
body.theme-md .ecran-arbre-documents .kc-col-documents-actions { width: 11%; min-width: 160px; }
body.theme-md .ecran-arbre-documents .kc-table--documents td[data-label="Actions"].kc-table__action {
  white-space: normal;
}
body.theme-md .ecran-arbre-documents .kc-table--documents td[data-label="Actions"] > * {
  display: inline-block;
  margin: 0 0 var(--kc-space-1) var(--kc-space-1);
}

/* Un niveau de document peut être un intitulé complet (« Déclaration d'applicabilité »),
   bien plus long que la pastille de sa colonne fixe : plutôt que de le couper (perceptible
   au contrôle de cohérence, règle k), la pastille passe sur deux lignes dans sa colonne
   fixe — intitulé complet repris en `title` en secours. Même correction pour la colonne
   Classement (Refs 156) : « Obligatoire (norme) » et « à décider » coupaient à 1280/1440 px
   faute d'une largeur de colonne propre — voir `kc-col-documents-classement` ci-dessus. */
body.theme-md .ecran-arbre-documents .kc-table--documents td[data-label="Niveau"] .kc-badge,
body.theme-md .ecran-arbre-documents .kc-table--documents td[data-label="Classement"] .kc-badge {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Chaque document tient maintenant sur une ligne (le titre est son seul contenu, la famille
   passe en infobulle `title`) : la cellule n'a plus besoin du padding vertical pensé pour un
   texte sur deux lignes. Réduit mesuré 25 lignes 1440px : 1804px → viser ≤ 2000px pour toute
   la page (en-tête + KPI + table), objectif de Main (overhaul-lot-b, 2e revue). */
body.theme-md .ecran-arbre-documents .kc-table--documents th,
body.theme-md .ecran-arbre-documents .kc-table--documents td {
  padding-block: var(--kc-space-1);
}

/* Liste des racines (une seule colonne pleine largeur, blocs de hauteur variable, règle 4
   du système de surfaces) : l'écart entre deux familles dépliables vient d'un gap, jamais
   d'une marge posée par le repli lui-même (surface migrée vers `.kc-card`, dans
   `material.css`, qui porte déjà son fond/bordure/rayon pour ce repli — hors de cette
   feuille pour ne pas y réintroduire une règle de liste du socle). */
body.theme-md .ecran-arbre-documents .kc-arbre-racines {
  display: flex;
  flex-direction: column;
  gap: var(--kc-grid-gap);
}

/* Un `<details>` natif masque déjà son contenu replié (feuille UA :
   `details:not([open]) > *:not(summary) { display: none }`) — mais `.kc-stack`/
   `.kc-card__body` posent leur propre `display` (flex) sur ce même enfant direct, qui
   l'emporte sur la feuille UA (origine auteur > origine agent utilisateur, quelle que
   soit la spécificité). Le contenu replié reste alors positionné et mesurable (quoique
   non peint), ce qui créait un écart fantôme entre le titre de la section et la carte
   suivante (le contenu invisible garde la position qu'il occuperait déplié). Cette règle
   réaffirme le masquage, à une spécificité qui l'emporte sur `.kc-stack`/`.kc-card__body`.
   Aucun changement visuel : le contenu était déjà invisible, seule sa mesure fantôme
   disparaît. */
body.theme-md .ecran-arbre-documents details:not([open]) > :not(summary) {
  display: none;
}

/* Le repli hérité (`kuma.css`, partagé avec `arbre_clauses.html`, non migré) est plus
   spécifique que `.kc-card` et gagne malgré l'ordre des feuilles de styles — `.arbre-repli`
   (gabarit, crochet dédié aux deux replis de cet écran, jamais un nom de classe de surface
   partagée) rétablit EXACTEMENT le même tuple de surface que `.kc-card` (kc-admin.css) et
   remplace le padding ad hoc du repli hérité par la pile de carte standard. */
body.theme-md .ecran-arbre-documents .arbre-repli {
  background: linear-gradient(180deg, var(--kc-color-surface) 0%, var(--kc-color-surface-2) 100%);
  border: var(--kc-border-thin) solid var(--kc-color-border-soft);
  border-radius: var(--kc-radius-lg);
  box-shadow: var(--kc-shadow-1);
}

body.theme-md .ecran-arbre-documents .arbre-repli > *:not(summary) {
  padding: 0;
}

body.theme-md .ecran-arbre-documents .arbre-famille-corps {
  display: flex;
  flex-direction: column;
  gap: var(--kc-section-gap);
  padding: var(--kc-card-pad);
}

body.theme-md .ecran-arbre-documents .arbre-referentiel-corps {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2);
  padding: var(--kc-card-pad);
}

body.theme-md .ecran-arbre-documents .sous-arbre {
  margin: 0;
}

/* Chaque branche est une pile interne (titre puis feuilles), l'écart entre feuilles vient
   du gap, jamais de la marge posée par le repli de feuille hérité (neutralisée ci-dessous) —
   les feuilles elles-mêmes (`.document-feuille`) deviennent des cartes plates
   (`.kc-card--plat`, posée dans le gabarit) imbriquées dans la carte du repli, règle 2 du
   système de surfaces. */
body.theme-md .ecran-arbre-documents .branche {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-2);
}

body.theme-md .ecran-arbre-documents .document-feuille {
  margin-bottom: 0;
}

@media print {
  body.theme-md .ecran-apercu .hors-impression {
    display: none;
  }

  body.theme-md .ecran-apercu .document-disposition {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Le choix du rôle à l'ajout, pour les écrans qui le partagent encore sous cette forme
   (l'invitation à une mission) : même forme que le choix du référentiel à la création d'une
   mission, parce que c'est la même question — un vocabulaire fermé, sans défaut. L'écran
   Accès (`equipe.html`) a son propre sélecteur compact, dans `ecrans-equipe.css`. */

body.theme-md .choix-role {
  margin: var(--pas-4) 0 0;
  padding: var(--pas-3) 0 0;
  border: 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

body.theme-md .choix-role > legend {
  padding: 0 var(--pas-2) 0 0;
  font: 500 0.875rem/1.4 var(--md-ref-typeface-plain);
  color: var(--md-sys-color-on-surface-variant);
}

body.theme-md .choix-role-corps {
  display: flex;
  flex-direction: column;
  gap: var(--kc-space-1);
}

body.theme-md .choix-role-note {
  display: block;
}

/* Résumé de famille de l'arbre des clauses (arbre_clauses.html) : titre et chevron restent
   sur la première ligne quelle que soit la largeur du titre (un titre de famille long —
   « Contrôles organisationnels » — rejetait le chevron à la ligne quand les deux partageaient
   la même rangée flexible). Le chevron hérité de `details.kc-card > summary.kc-card__header`
   (ecrans-gouvernance.css) est donc positionné plutôt que porté par l'ordre flex, et le
   décompte/la barre/le badge forment une seconde ligne, libre de passer à la ligne suivante
   sans jamais déplacer le chevron. */
details.kc-clause-famille > summary.kc-card__header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--kc-space-2);
  padding-inline-end: calc(var(--kc-card-pad) + 1.25rem);
}

details.kc-clause-famille > summary.kc-card__header::after {
  position: absolute;
  top: var(--kc-card-pad);
  right: var(--kc-card-pad);
  margin-inline-start: 0;
}

.kc-famille-clause__titre {
  padding-inline-end: var(--kc-space-4);
}

.kc-famille-clause__progres {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kc-space-2);
}

.kc-famille-clause__compte {
  font-size: var(--kc-font-size-xs);
  color: var(--kc-color-text-soft);
  white-space: nowrap;
}

.kc-famille-clause__barre {
  width: 6rem;
  flex: 0 0 auto;
}

/* Correspondances (épopée #68) : le libellé voisin (`<strong>{{ lien.cadre }}</strong>`)
   peut être long — une citation légale complète (ex. « ISO/IEC 27001:2022 — sécurité de
   l'information », « Règlement (UE) 2022/2554 (DORA) — résilience opérationnelle numérique
   du secteur financier ») — et débordait le viewport sous 640 px : `.kc-list > li > span:
   first-child` (ecrans-tableaux-de-bord.css) le force à une seule ligne tronquée par
   ellipse, mais le badge imbriqué en `inline-flex` échappait à cette troncature. Scopé à
   l'écran : autoriser le retour à la ligne plutôt que de tronquer un libellé déjà court
   (badge + cadre + code), plus lisible qu'une ellipse sur ce contenu composite.
   Spécificité (0,3,1) : l'emporte sur la règle ambiante (0,2,1) sans la modifier ailleurs. */
.correspondances .kc-list > li > span.correspondances-lien:first-child {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Refs 149 : un cadre au libellé long (« NIST Cybersecurity Framework 2.0 ») et `.kc-list-meta`
   (sa source, longue elle aussi) se disputaient la même ligne flex `nowrap` de `.kc-list > li`
   (kc-admin.css, flex-wrap seulement sous 640 px) — le libellé voisin, écrasé à sa largeur
   minimale, se fragmentait mot par mot sous `overflow-wrap: anywhere` ci-dessus, dès 640 px et
   au-delà. Scopé à cet écran : laisser les deux enfants du `<li>` passer à la ligne dès qu'ils
   ne tiennent plus côte à côte, à toute largeur — pas une règle globale sur `.kc-list > li`. */
.correspondances .kc-list > li {
  flex-wrap: wrap;
}

/* Refs 149 : la ligne compacte d'une paire déjà tranchée (`decisions_concordance_nistcsf.html`,
   filtre « Retenues »/« Écartées ») débordait de 390 px (badge + libellé + méta sur un
   `<span>` premier enfant de `.kc-list > li`) — un item flex garde par défaut `min-width:
   auto`, donc refuse de passer sous la largeur de son contenu non replié, même une fois le
   `<li>` autorisé à wrapper ci-dessus (règle juste au-dessus). Scopé à cet écran, même
   patron que `.correspondances .kc-list > li > span.correspondances-lien:first-child`. */
.correspondances-nistcsf .kc-list > li > span:first-child {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}

.correspondances-lien {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--kc-space-2, 8px);
  row-gap: var(--kc-space-1, 4px);
}

/* Écran Exigences (`arbre_clauses.html`) d'un cadre sans catalogue documentaire (texte_legal,
   exigences_produit, épopée #68) : deux cartes seulement (traitées, couverture) au lieu de
   quatre — `.kc-grid--kpi` (kc-admin.css) laissait alors un vide en dernière rangée dès
   1024 px. Même approche que `.kc-tdb-kpi-3` (ecrans-tableaux-de-bord.css) : empilées comme
   `.kc-grid--kpi` sous 1024 px, une seule rangée de 2 cartes égales au-delà. */
.kc-arbre-kpi-2 {
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 1024px) {
  .kc-arbre-kpi-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}