/**
 * W.O.L.F. — CONSOLE de démonstration « tester les équipes » (page chat).
 *
 * Sœur de la console Punchbox : réglages visibles en permanence, disposition
 * dense, zones pleines, AUCUN ascenseur interne, coins francs 2 px (A019).
 * S'appuie EXCLUSIVEMENT sur les jetons du design system → contraste AA garanti
 * dans les deux thèmes ; identité de bouton portée depuis wolf-components.css.
 * Propriétés logiques (inline/block) → compatible RTL. Aucune ressource tierce.
 */

/* ===================================================================== *
 * 1. GRILLE DE CONSOLE — « L'ÉTABLI » de Punchbox, transposé tel quel.
 *
 * SOURCE reprise : `[data-disposition="etabli"] .tableau-de-bord { display:flex;
 * flex-direction:column; gap:18px }` (punchbox/web/css/style.css). UNE pile de
 * BANDES pleine largeur, sizées à leur contenu, ordre de lecture = ordre du DOM.
 * On NE fige AUCUNE colonne : plus de grille « work | output » à deux colonnes
 * où la tranche RÉPONSE, vide au chargement, laissait la MOITIÉ DROITE NOIRE (D1).
 * Chaque bande occupe toute la largeur et porte du contenu ; aucun désert latéral.
 *
 * Correspondance (Punchbox → Wolf) :
 *   RÉGIE  (réglages toujours visibles) → SÉLECTION : mode + pastilles d'équipe ;
 *   TEXTE  (éditeur pleine largeur)      → TRAVAIL   : la question + « Interroger » ;
 *   SORTIES(actions + état)              → SORTIE    : progression, réponses,
 *                                                      copier/télécharger, reste.
 * La régie (le <form>) s'efface (display:contents) pour que SÉLECTION et TRAVAIL
 * deviennent des bandes DIRECTES de la pile — sans toucher au POST sans JS.
 * ===================================================================== */
.wolf-demo {
  margin-block: var(--wolf-space-4);
  display: flex;
  flex-direction: column;
  /* Palier d'espacement de l'établi Punchbox : 18px. Pas de jeton Wolf à cette
     valeur exacte ; space-5 (20px) est le plus proche du système — retenu. */
  gap: var(--wolf-space-5);
}
/* La régie (form) s'efface : SÉLECTION et TRAVAIL rejoignent la pile. Le squelette
   DOM ne change pas → le POST classique (sans JS) reste intact. */
.wolf-demo__regie { display: contents; }

.wolf-demo__panel {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  border: var(--wolf-border-hairline) solid var(--wolf-color-border-strong);  /* façade régie (Punchbox .carte-console : bordure-forte) */
  /* Filet AMBRE en tête de bande — écho du filet laiton des voies de régie
     Punchbox (.carte-console / .tranche). C'est ce filet qui fait « console ».
     Teinte = accent-text (ambre lisible) : ≥ 3:1 sur la surface dans les DEUX
     thèmes (sombre 9,97:1 ; clair 5,86:1) — au-dessus du seuil non-textuel même
     si un filet purement décoratif en est dispensé. */
  border-block-start: var(--wolf-border-thick) solid var(--wolf-color-accent-text);
  border-radius: var(--wolf-radius-md);  /* 2 px — A019 */
  background: var(--wolf-color-surface);
  padding: var(--wolf-space-4);          /* densité A3 : 20 → 16px */
}

.wolf-demo__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolf-space-3);
  margin-block-end: var(--wolf-space-3);   /* densité A3 : 16 → 12px */
  padding-block-end: var(--wolf-space-2);  /* densité A3 : 12 → 8px */
  border-block-end: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
/* Titre de bande dans le REGISTRE RÉGIE de Punchbox (.titre-regie / .titre-section) :
   petit, capitales, interlettré, ambre lisible — au lieu du gros titre display qui
   « faisait trop gros » (D3). Passe de 18px (text-md) à 12px (text-xs). */
.wolf-demo__panel-title {
  margin: 0;
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  font-weight: var(--wolf-weight-bold);
  letter-spacing: var(--wolf-tracking-wider);
  text-transform: uppercase;
  color: var(--wolf-color-accent-text);   /* ambre en TEXTE — AAA dans les deux thèmes */
}
/* Un <label> peut porter ce registre de titre de bande (cas de la bande TRAVAIL :
   le titre EST le libellé du champ question — un seul « Votre question », D2). */
label.wolf-demo__panel-title { cursor: pointer; }

.wolf-demo__theme { flex: 0 0 auto; }

/* ===================================================================== *
 * 2. GROUPES DE RÉGLAGE — pleins, denses, sans tiroir.
 * ===================================================================== */
.wolf-demo__group { margin-block-end: var(--wolf-space-3); border: 0; padding: 0; min-inline-size: 0; }
.wolf-demo__group legend { padding: 0; }

.wolf-demo__hint {
  margin-block: var(--wolf-space-2) 0;
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
  line-height: var(--wolf-leading-normal);
}
/* La mention de confidentialité est poussée en bas de la régie → colonne pleine. */
.wolf-demo__regie .wolf-demo__privacy { margin-block-start: auto; padding-block-start: var(--wolf-space-3); }

.wolf-demo__modes,
.wolf-demo__teams {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolf-space-2);
  margin-block-start: var(--wolf-space-2);
}

/* ---- Puces (chips) : sélection VISIBLE des équipes / du mode ---------- */
.wolf-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  min-block-size: 44px;            /* cible tactile 44 px */
  border: var(--wolf-border-hairline) solid var(--wolf-color-field-border);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-field-bg);
  color: var(--wolf-color-text);
  font-size: var(--wolf-text-sm);
  cursor: pointer;
  transition: border-color var(--wolf-duration-fast) var(--wolf-ease),
              background-color var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-chip input {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin: 0;
  accent-color: var(--wolf-color-accent);
  cursor: pointer;
}
.wolf-chip__label { line-height: var(--wolf-leading-snug); }

/* État coché : filet ambre PROFOND (accent-press) + fond doux. L'ambre profond
   porte la limite UI ≥ 3:1 dans les DEUX thèmes (clair : #b25e00/blanc = 4.67:1 ;
   sombre : #e8830f/surface = 6.51:1) là où l'ambre vif échouait en clair (2.73:1).
   L'état est de toute façon aussi porté par la case native (accent-color). */
.wolf-chip:has(input:checked) {
  border-color: var(--wolf-color-accent-press);
  background: var(--wolf-color-accent-soft);
}
.wolf-chip:hover { border-color: var(--wolf-color-border-strong); }
/* Anneau de focus visible (l'anneau est porté par la puce quand la case a le focus). */
.wolf-chip:has(input:focus-visible) {
  outline: var(--wolf-border-heavy) solid var(--wolf-color-focus);
  outline-offset: 2px;
}
/* Repli sans :has() — la case native porte alors seule l'état/focus. */

/* Équipes désactivées quand l'aiguillage automatique est actif. */
.wolf-demo__teams[data-disabled="1"] { opacity: .55; }
.wolf-demo__teams[data-disabled="1"] .wolf-chip { cursor: not-allowed; }

/* ---- Champ question -------------------------------------------------- */
.wolf-demo__textarea {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--wolf-space-2);
  resize: vertical;
  min-block-size: 6rem;
}
.wolf-demo__meta { display: flex; justify-content: flex-end; margin-block-start: var(--wolf-space-2); }
.wolf-demo__counter {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-muted);
}
.wolf-demo__actions { margin-block-start: var(--wolf-space-3); }
.wolf-demo__actions .wolf-btn { inline-size: 100%; }

/* ===================================================================== *
 * 3. BARRE DE PROGRESSION — NOMMÉE, écrite à la main.
 * ===================================================================== */
.wolf-progress { margin-block-end: var(--wolf-space-4); }
.wolf-progress__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wolf-space-3);
  margin-block-end: var(--wolf-space-2);
  min-block-size: 1.2em;
}
.wolf-progress__step {
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  color: var(--wolf-color-text);
}
.wolf-progress__pct {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-accent-text);
  font-variant-numeric: tabular-nums;
}
.wolf-progress__bar {
  block-size: 12px;
  background: var(--wolf-color-surface-inset);
  /* Contour = field-border : ≥ 3:1 sur le panneau (surface) dans les deux thèmes
     (sombre 3.68:1, clair 3.81:1) — délimite le composant (WCAG 1.4.11). */
  border: var(--wolf-border-hairline) solid var(--wolf-color-field-border);
  border-radius: var(--wolf-radius-md);
  overflow: hidden;
  position: relative;
}
.wolf-progress__gauge {
  block-size: 100%;
  inline-size: 0%;
  background: var(--wolf-color-success);           /* vert = progression réelle */
  transition: inline-size var(--wolf-duration-slow) var(--wolf-ease);
}
/* Étape indéterminée (aiguillage) : jauge ambre PROFONDE qui glisse.
   accent-press porte la limite jauge/piste ≥ 3:1 en clair (#b25e00/inset = 3.84:1)
   là où l'ambre vif échouait (2.25:1) ; en sombre le contraste est bien plus haut. */
.wolf-progress__bar[data-mode="pulse"] .wolf-progress__gauge {
  inline-size: 35%;
  background: var(--wolf-color-accent-press);
  animation: wolf-progress-slide 1.3s ease-in-out infinite;
}
@keyframes wolf-progress-slide {
  0%   { margin-inline-start: -35%; }
  100% { margin-inline-start: 100%; }
}
/* prefers-reduced-motion : pas de glissement — état « en cours » lisible et statique. */
@media (prefers-reduced-motion: reduce) {
  .wolf-progress__gauge { transition: none; }
  .wolf-progress__bar[data-mode="pulse"] .wolf-progress__gauge {
    animation: none;
    inline-size: 100%;
    opacity: .45;
  }
}

/* ===================================================================== *
 * 4. FIL DES RÉPONSES — chaque équipe sous son intitulé. Pas d'ascenseur.
 * ===================================================================== */
/* La sortie occupe toute la hauteur de sa tranche → pas de zone vide sous une
   colonne plus courte que sa voisine (doctrine « le vide est un défaut »). */
.wolf-demo__sortie .wolf-demo__stream { flex: 1 1 auto; align-content: start; }
.wolf-demo__stream { display: grid; gap: var(--wolf-space-4); }
.wolf-demo__empty {
  margin: 0;
  block-size: 100%;
  min-block-size: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--wolf-space-5);
  border: var(--wolf-border-hairline) dashed var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
  text-align: center;
}

.wolf-demo__turn {
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-surface-2);
  padding: var(--wolf-space-4);
  display: grid;
  gap: var(--wolf-space-3);
}
.wolf-demo__who {
  display: inline-block;
  font-family: var(--wolf-font-display);
  font-weight: 700;
  color: var(--wolf-color-accent);
  margin-inline-end: var(--wolf-space-2);
}
.wolf-demo__q { margin: 0; color: var(--wolf-color-text); line-height: var(--wolf-leading-relaxed); }
.wolf-demo__a {
  border-inline-start: var(--wolf-border-heavy) solid var(--wolf-color-accent);
  padding-inline-start: var(--wolf-space-4);
}
/* La bande SORTIE est pleine largeur (surface remplie, aucun vide noir) ; la PROSE
   de la réponse garde une mesure de lecture confortable (écho de --mesure 68ch de
   Punchbox). Le fond de bande remplit la largeur : ce n'est pas un désert latéral,
   c'est une colonne de lecture posée sur une surface pleine. */
.wolf-demo__answer { color: var(--wolf-color-text); line-height: var(--wolf-leading-relaxed); max-inline-size: 76ch; }
.wolf-demo__answer p { margin: 0 0 var(--wolf-space-3); }
.wolf-demo__answer p:last-child { margin-block-end: 0; }

/* Rendu markdown (A084) : markdown du modèle converti en HTML échappé côté serveur. */
.wolf-md > :first-child { margin-block-start: 0; }
.wolf-md > :last-child { margin-block-end: 0; }
.wolf-md h3, .wolf-md h4, .wolf-md h5, .wolf-md h6 {
  margin: var(--wolf-space-4) 0 var(--wolf-space-2);
  font-family: var(--wolf-font-display);
  line-height: var(--wolf-leading-normal);
  color: var(--wolf-color-text);
}
.wolf-md h3 { font-size: var(--wolf-text-lg); }
.wolf-md h4, .wolf-md h5, .wolf-md h6 { font-size: var(--wolf-text-base); }
.wolf-md ul, .wolf-md ol { margin: 0 0 var(--wolf-space-3); padding-inline-start: var(--wolf-space-6); }
.wolf-md li { margin-block-end: var(--wolf-space-2); line-height: var(--wolf-leading-relaxed); }
.wolf-md strong { font-weight: 700; }
.wolf-md em { font-style: italic; }
.wolf-md code {
  font-family: var(--wolf-font-mono);
  font-size: .92em;
  padding: .1em .35em;
  border-radius: var(--wolf-radius-sm);
  background: var(--wolf-color-surface-inset);
}
.wolf-md pre {
  margin: 0 0 var(--wolf-space-3);
  padding: var(--wolf-space-3) var(--wolf-space-4);
  overflow-x: auto;                 /* seul défilement toléré : un bloc de code trop large */
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-surface-inset);
}
.wolf-md pre code { padding: 0; background: none; }
.wolf-md a { color: var(--wolf-color-accent-text); text-decoration: underline; }
.wolf-md hr { border: 0; border-block-start: var(--wolf-border-hairline) solid var(--wolf-color-border); margin: var(--wolf-space-4) 0; }

.wolf-demo__web {
  margin: var(--wolf-space-3) 0 0;
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-text-muted);
  font-style: italic;
}
.wolf-demo__left {
  margin: 0;
  color: var(--wolf-color-text-muted);
  font-size: var(--wolf-text-sm);
}
.wolf-demo__msg {
  margin: 0;
  padding: var(--wolf-space-3) var(--wolf-space-4);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-inline-start: var(--wolf-border-heavy) solid var(--wolf-color-warning);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-surface);
  color: var(--wolf-color-text);
  font-size: var(--wolf-text-sm);
}

/* ===================================================================== *
 * 5. ZONE DE SORTIE — COPIER + TÉLÉCHARGER, même poids, poussés en bas.
 * ===================================================================== */
.wolf-demo__out {
  margin-block-start: var(--wolf-space-5);
  padding-block-start: var(--wolf-space-4);
  border-block-start: var(--wolf-border-hairline) solid var(--wolf-color-border);
}
.wolf-demo__out-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wolf-space-3);
  margin-block-start: var(--wolf-space-3);
}
.wolf-demo__out-actions .wolf-btn { flex: 1 1 12rem; justify-content: center; }
.wolf-demo__out-note {
  margin: var(--wolf-space-3) 0 0;
  min-block-size: 1.2em;
  font-size: var(--wolf-text-sm);
  color: var(--wolf-color-text-muted);
}

/* Pot de miel : hors écran, invisible et non focusable pour l'humain. */
.wolf-demo__hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Encadré d'avertissement. */
.wolf-demo__notice { margin-block: var(--wolf-space-4); }
.wolf-demo__notice-title { margin: 0 0 var(--wolf-space-2); }

/* ===================================================================== *
 * 6. IDENTITÉ DE BOUTON — l'enfoncement de touche (2 px + perte d'épaisseur)
 *    est DÉJÀ porté par .wolf-btn--primary/secondary:active dans wolf-components
 *    (top:2px + relief-plat), fidèle à Punchbox. On n'ajoute AUCUN décalage ici :
 *    un transform supplémentaire cumulerait le mouvement (4 px) et trahirait la
 *    course de 2 px de la référence. La régie hérite donc du relief maison tel quel.
 * ===================================================================== */

/* État « en cours d'envoi ». */
.wolf-demo[data-busy="1"] .wolf-chip,
.wolf-demo[data-busy="1"] .wolf-demo__textarea,
.wolf-demo[data-busy="1"] [data-demo-submit] { opacity: .7; }
.wolf-demo[data-busy="1"] [data-demo-submit] { cursor: progress; }

/* ===================================================================== *
 * 7. ENTÊTE DE PAGE RESSERRÉ (A1 + A3) — la console au PREMIER écran.
 *    Portée STRICTE à la page chat : classes --console/__title inexistantes
 *    ailleurs. Échelle typographique réduite, vide vertical divisé.
 * ===================================================================== */
.wolf-hero--console {
  /* Hero standard : 48/40px. Ici 20/12px → l'entête ne repousse plus le travail. */
  padding-block: var(--wolf-space-5) var(--wolf-space-3);
}
.wolf-hero--console .wolf-hero__title {
  /* Titre d'entête : encore resserré (charte C4 « textes trop gros »).
     Avant cette mission : clamp(1.5rem, 3.2vw, 2rem) = 24 → 32 px.
     Après : clamp(1.375rem, 2.6vw, 1.75rem) = 22 → 28 px (−12,5 % au plafond). */
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  max-width: 28ch;
  margin-top: var(--wolf-space-2);
}
.wolf-hero--console .wolf-hero__subtitle {
  font-size: var(--wolf-text-sm);       /* 18 → 14px */
  margin-top: var(--wolf-space-1);
}
.wolf-section--console {
  /* Section standard : 40px. Ici 12/24px → la console remonte sous l'entête. */
  padding-block: var(--wolf-space-3) var(--wolf-space-6);
}
/* REMPLIR LA LARGEUR (charte densité §« pas de désert latéral ») : au-delà de
   1200 px, la console sort du gabarit 1200 pour occuper l'écran, gouttière gardée.
   Valeur retenue par la charte Punchbox : max-width: min(1600px, 95vw). */
@media (min-width: 75rem) {
  .wolf-section--console .wolf-container { max-width: min(1600px, 95vw); }
}
.wolf-demo__heading {
  margin: 0 0 var(--wolf-space-3);
  font-family: var(--wolf-font-display);
  font-size: var(--wolf-text-lg);       /* h2 : 30 → 20px (A3) */
  line-height: var(--wolf-leading-snug);
  color: var(--wolf-color-text);
}

/* Bandeau d'avertissement COMPACT : en évidence, sans repousser la console. */
.wolf-demo__notice {
  margin-block: 0 var(--wolf-space-3);
  padding: var(--wolf-space-2) var(--wolf-space-3);
  font-size: var(--wolf-text-sm);
}
.wolf-demo__notice p { margin: 0; line-height: var(--wolf-leading-normal); }

/* ===================================================================== *
 * 8. PASTILLES D'ÉQUIPE (charte C1 + C5) — sélection par petits boutons
 *    VISIBLES, groupés par famille. Plus AUCUN déroulé : tout est à l'écran,
 *    d'un clic, comme sur une console. Chaque pastille est une case à cocher
 *    réelle (name="team[]") habillée → POST sans JS conservé.
 * ===================================================================== */

/* Barre : compteur d'équipes disponibles + « n choisies » + « tout décocher ». */
.wolf-demo__teams-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wolf-space-2) var(--wolf-space-3);
  margin-block-start: var(--wolf-space-2);
}
.wolf-demo__teams-bar .wolf-demo__hint { margin: 0; }
.wolf-demo__teams-tools { display: inline-flex; align-items: center; gap: var(--wolf-space-3); }
.wolf-demo__count {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-xs);
  color: var(--wolf-color-accent-text);   /* ambre en texte — AA dans les deux thèmes */
  font-variant-numeric: tabular-nums;
}
.wolf-demo__clear { flex: 0 0 auto; }

/* Familles : autant de colonnes que la largeur en offre → la bande se remplit
   (auto-fill), jamais une colonne unique collée à gauche. */
.wolf-demo__families {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--wolf-space-3);
  margin-block-start: var(--wolf-space-3);
}
.wolf-demo__family {
  display: flex;
  flex-direction: column;
  gap: var(--wolf-space-2);
  min-inline-size: 0;
  padding: var(--wolf-space-3);
  border: var(--wolf-border-hairline) solid var(--wolf-color-border);
  border-radius: var(--wolf-radius-md);
  background: var(--wolf-color-surface-2);
}
.wolf-demo__family-title {
  font-family: var(--wolf-font-mono);
  font-size: var(--wolf-text-2xs);
  font-weight: var(--wolf-weight-bold);
  letter-spacing: var(--wolf-tracking-wider);
  text-transform: uppercase;
  color: var(--wolf-color-text-muted);   /* ~8:1 — surtitre lisible */
}
.wolf-demo__pastilles { display: flex; flex-wrap: wrap; gap: var(--wolf-space-2); }

/* ---- La pastille : IDENTITÉ MAISON (jetons du bouton secondaire) ---------- *
 * Corps ACIER anthracite BOMBÉ (clair en haut, s'assombrissant vers le bas, sans
 * bande centrale — dégradé mono-directionnel), FILET ambre porté par l'ombre,
 * angles 2 px (A019), relief de touche. Cochée = corps AMBRE « allumé » (comme
 * un bouton de voie enfoncé). Aucune ressource tierce. Réutilise, n'invente pas. */
.wolf-pastille { position: relative; display: inline-flex; min-inline-size: 0; }
.wolf-pastille__input {          /* case RÉELLE : focusable, habillée (hors-vue mais présente) */
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.wolf-pastille__face {
  display: inline-flex;
  align-items: center;
  gap: var(--wolf-space-2);
  inline-size: 100%;
  min-block-size: 44px;          /* cible tactile 44 px (C5, WCAG 2.5.5) */
  padding: var(--wolf-space-2) var(--wolf-space-3);
  border: var(--wolf-border-thick) solid transparent;   /* filet porté par l'ombre → pas de double filet */
  border-radius: var(--wolf-radius-md);                 /* 2 px — A019 */
  background: var(--wolf-btn-secondary-bg);
  color: var(--wolf-btn-secondary-text);
  box-shadow: var(--wolf-btn-secondary-relief);         /* bombé + filet ambre + touche */
  font-family: var(--wolf-font-body);
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-semibold);
  line-height: var(--wolf-leading-snug);
  cursor: pointer;
  transition: box-shadow var(--wolf-duration-fast) var(--wolf-ease),
              filter var(--wolf-duration-fast) var(--wolf-ease),
              transform var(--wolf-duration-fast) var(--wolf-ease);
}
.wolf-pastille:hover .wolf-pastille__face { filter: brightness(1.06); }

/* COCHÉE (allumée) : corps AMBRE bombé, texte anthracite (pire stop ≥ 7:1). */
.wolf-pastille__input:checked ~ .wolf-pastille__face {
  background: var(--wolf-btn-primary-bg);
  color: var(--wolf-btn-primary-text);
  box-shadow: var(--wolf-btn-primary-relief);
}

/* La coche : indice de FORME (pas seulement la couleur — WCAG 1.4.1). Masquée au
   repos, « ✓ » anthracite quand la pastille est prise. Dessinée en glyphe, zéro image. */
.wolf-pastille__check {
  display: none;
  align-items: center;
  justify-content: center;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: 0 0 auto;
  font-size: var(--wolf-text-sm);
  font-weight: var(--wolf-weight-bold);
  line-height: 1;
}
.wolf-pastille__check::before { content: "\2713"; }   /* ✓ */
.wolf-pastille__input:checked ~ .wolf-pastille__face .wolf-pastille__check { display: inline-flex; }

/* Anneau de focus visible, porté par la pastille quand la case a le focus clavier. */
.wolf-pastille__input:focus-visible ~ .wolf-pastille__face {
  outline: var(--wolf-border-heavy) solid var(--wolf-color-focus);
  outline-offset: 2px;
}

/* Enfoncement de 2 px RÉSERVÉ à la console (C5) ; respecté hors reduced-motion.
   L'appui perd l'épaisseur de touche (variante -plat), comme les boutons maison. */
@media (prefers-reduced-motion: no-preference) {
  .wolf-pastille__input:active ~ .wolf-pastille__face {
    transform: translateY(2px);
    box-shadow: var(--wolf-btn-secondary-relief-plat);
  }
  .wolf-pastille__input:checked:active ~ .wolf-pastille__face {
    box-shadow: var(--wolf-btn-primary-relief-plat);
  }
}

/* Aiguillage automatique actif : le groupe « équipes » s'estompe et se désactive. */
.wolf-demo__teams-group[data-disabled="1"] { opacity: .55; }
.wolf-demo__teams-group[data-disabled="1"] .wolf-pastille,
.wolf-demo__teams-group[data-disabled="1"] .wolf-pastille__input,
.wolf-demo__teams-group[data-disabled="1"] .wolf-pastille__face { cursor: not-allowed; }