/* ==========================================================================
   SMILE — Bibliothèque de composants
   --------------------------------------------------------------------------
   Ordre de chargement : tokens.css → base.css → components.css → (app|admin).css

   Conventions
   -----------
   · Nommage BEM léger : .bloc, .bloc__element, .bloc--variante.
   · Mobile d'abord : les règles de base visent 375 px, les media queries
     `min-width` ajoutent le confort au-dessus.
   · Toute valeur vient de tokens.css. Exceptions assumées : traits de règle
     (1–2 px) et points de rupture (40em / 48em / 64em / 80em).
   · Aucun dégradé, aucun emoji, aucune animation décorative. Seules boucles
     admises : l'anneau de chargement des boutons et le battement des
     squelettes — toutes deux coupées sous prefers-reduced-motion.
   · Crochets de démonstration : chaque état de survol/focus dispose d'un
     jumeau en classe (.is-hover, .is-active, .is-focus) pour que la galerie
     et les captures d'écran puissent montrer un état impossible à figer.
     Ces classes ne sont pas destinées à l'application en production.

   Sommaire
   --------
    1. Boutons
    2. Cartes
    3. Badges ronds
    4. Pastilles de statut
    5. Progression (barre + anneau de score)
    6. Formulaires
    7. Options de réponse (runner de quiz)
    8. Tableaux
    9. Cellule de score
   10. États vides / chargement / erreur + squelettes
   11. Notifications éphémères
   12. Boîte de dialogue
   13. Gabarit (conteneurs, piles, en-tête, pied)
   14. Onglets
   15. Impression
   ========================================================================== */


/* ==========================================================================
   1. BOUTONS
   --------------------------------------------------------------------------
   Hauteur minimale de 44 px sur TOUTES les tailles, y compris --sm : la
   variante courte ne réduit que la typographie et le rembourrage latéral.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--h-touch);
  padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}

.btn > svg {
  flex: none;
  width: var(--sp-4);
  height: var(--sp-4);
  fill: currentColor;
}

.btn:focus-visible,
.btn.is-focus {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

/* --- Primaire : aplat orange contrastant, texte blanc (AA) --------------- */
.btn--primary {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
  box-shadow: var(--sh-xs);
}

.btn--primary:hover,
.btn--primary.is-hover {
  background-color: var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

.btn--primary:active,
.btn--primary.is-active {
  background-color: var(--c-primary-active);
  border-color: var(--c-primary-active);
  box-shadow: none;
  transform: translateY(1px);
}

/* --- Secondaire : blanc bordé ------------------------------------------- */
.btn--secondary {
  background-color: var(--c-surface);
  border-color: var(--c-border-strong);
  color: var(--c-ink);
  box-shadow: var(--sh-xs);
}

.btn--secondary:hover,
.btn--secondary.is-hover {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-ink-subtle);
}

.btn--secondary:active,
.btn--secondary.is-active {
  background-color: var(--c-border);
  box-shadow: none;
  transform: translateY(1px);
}

/* --- Fantôme : sans fond ni bordure au repos ---------------------------- */
.btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--c-primary);
}

.btn--ghost:hover,
.btn--ghost.is-hover {
  background-color: var(--c-info-soft);
  color: var(--c-primary-hover);
}

.btn--ghost:active,
.btn--ghost.is-active {
  background-color: var(--c-warning-soft);
  color: var(--c-primary-active);
  transform: translateY(1px);
}

/* --- Destructif --------------------------------------------------------- */
.btn--danger {
  background-color: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-white);
  box-shadow: var(--sh-xs);
}

.btn--danger:hover,
.btn--danger.is-hover {
  background-color: var(--c-danger-strong);
  border-color: var(--c-danger-strong);
}

.btn--danger:active,
.btn--danger.is-active {
  background-color: var(--c-danger-strong);
  box-shadow: none;
  transform: translateY(1px);
}

/* --- Tailles ------------------------------------------------------------ */
.btn--sm {
  padding-inline: var(--sp-3);
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.btn--sm > svg {
  width: var(--sp-3);
  height: var(--sp-3);
}

.btn--lg {
  min-height: calc(var(--h-touch) + var(--sp-2));
  padding-inline: var(--sp-8);
  font-size: var(--fs-lg);
  border-radius: var(--r-lg);
}

.btn--lg > svg {
  width: var(--sp-5);
  height: var(--sp-5);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --- Désactivé ---------------------------------------------------------- */
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-border);
  color: var(--c-ink-subtle);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

/* --- Chargement ---------------------------------------------------------
   Utilisation : ajouter .is-loading, `aria-busy="true"` et `disabled`.
   Le libellé reste lisible à côté de l'anneau (« Enregistrement… »).       */
.btn.is-loading {
  cursor: progress;
  pointer-events: none;
}

.btn__spinner {
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--r-full);
  opacity: 0.85;
  animation: smile-spin var(--t-spin) linear infinite;
}

@keyframes smile-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Anneau figé mais toujours présent : l'indice de chargement subsiste. */
@media (prefers-reduced-motion: reduce) {
  .btn__spinner {
    animation: none;
    border-top-color: currentColor;
    border-right-color: transparent;
  }
}


/* ==========================================================================
   2. CARTES
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  overflow: hidden;
}

.card__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
}

.card__header > :last-child {
  margin-inline-start: auto;
}

.card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.card__body {
  flex: 1;
  padding: var(--sp-5);
}

.card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background-color: var(--c-surface-sunk);
}

/* Carte sans séparateur interne — pour un contenu unique. */
.card--flush .card__body {
  padding: 0;
}

/* --- Carte cliquable ---------------------------------------------------- */
.card--interactive {
  cursor: pointer;
  text-align: start;
  text-decoration: none;
  color: inherit;
  transition:
    box-shadow var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease);
}

.card--interactive:hover,
.card--interactive.is-hover {
  box-shadow: var(--sh-lg);
  border-color: var(--c-border-strong);
  transform: translateY(-1px);
}

.card--interactive:active,
.card--interactive.is-active {
  box-shadow: var(--sh-sm);
  transform: translateY(0);
}

.card--interactive:focus-visible,
.card--interactive:focus-within,
.card--interactive.is-focus {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

.card--interactive[aria-disabled="true"],
.card--interactive.is-disabled {
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  background-color: var(--c-surface-sunk);
  color: var(--c-ink-subtle);
}


/* ==========================================================================
   3. BADGES RONDS
   --------------------------------------------------------------------------
   Contenu : toujours un <svg> en ligne (fill="currentColor"), jamais d'emoji.
   L'orange plein ne porte que des pictogrammes (seuil graphique 3:1) ; pour
   un chiffre ou une lettre, utiliser --muted ou la teinte douce --number.
   ========================================================================== */

.badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--sp-10);
  height: var(--sp-10);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  background-color: var(--c-orange);
  color: var(--c-white);
}

.badge-icon > svg {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: currentColor;
}

.badge-icon--sm {
  width: var(--sp-8);
  height: var(--sp-8);
}

.badge-icon--sm > svg {
  width: var(--sp-4);
  height: var(--sp-4);
}

.badge-icon--lg {
  width: var(--sp-12);
  height: var(--sp-12);
}

.badge-icon--lg > svg {
  width: var(--sp-6);
  height: var(--sp-6);
}

.badge-icon--muted {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-border);
  color: var(--c-ink-muted);
}

.badge-icon--success {
  background-color: var(--c-success-soft);
  color: var(--c-success);
}

.badge-icon--danger {
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
}

/* Teinte orange pâle : la seule qui accepte un chiffre (contraste AA). */
.badge-icon--number {
  background-color: var(--c-info-soft);
  color: var(--c-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   4. PASTILLES DE STATUT
   --------------------------------------------------------------------------
   Jamais de couleur seule : chaque variante porte un pictogramme distinct
   ET un libellé explicite (À faire · Réussi · Non réussi · En cours).
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  white-space: nowrap;
  vertical-align: middle;
}

.pill > svg {
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  fill: currentColor;
  margin-inline-start: calc(var(--sp-1) * -1);
}

.pill--todo {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-border-strong);
  color: var(--c-ink-muted);
}

.pill--passed {
  background-color: var(--c-success-soft);
  border-color: var(--c-success-soft);
  color: var(--c-success);
}

.pill--failed {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger-soft);
  color: var(--c-danger);
}

.pill--progress {
  background-color: var(--c-info-soft);
  border-color: var(--c-info-soft);
  color: var(--c-primary);
}


/* ==========================================================================
   5. PROGRESSION
   --------------------------------------------------------------------------
   ARIA — barre linéaire :
     <div class="progress" role="progressbar" aria-valuenow="3"
          aria-valuemin="0" aria-valuemax="6"
          aria-label="Question 3 sur 6">
       <div class="progress__fill" style="width:50%"></div>
     </div>
   Le remplissage est purement décoratif : aria-hidden inutile car il ne
   porte pas de texte, mais la valeur DOIT vivre sur l'élément parent.

   ARIA — anneau de score (valeur figée, non évolutive) :
     <div class="progress-ring" role="img" aria-label="Score : 83 %"
          style="--value:83">…</div>
   `role="meter"` est acceptable mais moins bien supporté ; `role="img"` avec
   un libellé complet ne laisse aucun trou de lecture.
   ========================================================================== */

.progress {
  position: relative;
  width: 100%;
  height: var(--h-progress);
  border-radius: var(--r-full);
  background-color: var(--c-border);
  overflow: hidden;
}

.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background-color: var(--c-orange);
  transition: width var(--t-slow) var(--ease), background-color var(--t-base) var(--ease);
}

.progress--success .progress__fill {
  background-color: var(--c-success);
}

.progress--danger .progress__fill {
  background-color: var(--c-danger);
}

/* Piste sur fond coloré (carte teintée) — variante d'assise. */
.progress--onsoft {
  background-color: var(--c-white);
}

/* --- Anneau de score ---------------------------------------------------- */

.progress-ring {
  --value: 0;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sp-20);
  height: var(--sp-20);
}

.progress-ring__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

/* pathLength="100" sur les deux cercles : la valeur se pilote en pourcentage,
   sans jamais recalculer 2πr. */
.progress-ring__track {
  fill: none;
  stroke: var(--c-border);
  stroke-width: var(--h-progress);
}

.progress-ring__value {
  fill: none;
  stroke: var(--c-orange);
  stroke-width: var(--h-progress);
  stroke-linecap: round;
  stroke-dasharray: var(--value) 100;
  transition: stroke-dasharray var(--t-slow) var(--ease), stroke var(--t-base) var(--ease);
}

/* Zéro tentative : sans ce modificateur, l'extrémité arrondie du tracé
   laisserait un point orange à midi alors qu'il n'y a aucune valeur. */
.progress-ring--empty .progress-ring__value {
  display: none;
}

.progress-ring--success .progress-ring__value {
  stroke: var(--c-success);
}

.progress-ring--danger .progress-ring__value {
  stroke: var(--c-danger);
}

.progress-ring__label {
  position: relative;
  display: grid;
  place-items: center;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.progress-ring__unit {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}

.progress-ring--lg {
  width: calc(var(--sp-20) + var(--sp-10));
  height: calc(var(--sp-20) + var(--sp-10));
}

.progress-ring--lg .progress-ring__label {
  font-size: var(--fs-3xl);
}


/* ==========================================================================
   6. FORMULAIRES
   --------------------------------------------------------------------------
   Taille des champs verrouillée à 16 px (--fs-md) : en dessous, iOS Safari
   zoome à la mise au point et casse la mise en page mobile.
   ========================================================================== */

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

.label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  letter-spacing: var(--ls-normal);
}

.label__optional {
  font-weight: var(--fw-regular);
  color: var(--c-ink-subtle);
}

.input,
.textarea,
.select {
  display: block;
  width: 100%;
  min-height: var(--h-control);
  padding: var(--sp-2) var(--sp-4);
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  box-shadow: var(--sh-xs);
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}

.textarea {
  min-height: calc(var(--h-control) * 2.5);
  padding-block: var(--sp-3);
  line-height: var(--lh-base);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--c-ink-subtle);
}

.input:hover,
.textarea:hover,
.select:hover,
.input.is-hover {
  border-color: var(--c-ink-subtle);
}

.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
.input.is-focus,
.textarea.is-focus,
.select.is-focus {
  outline: 2px solid var(--c-orange);
  outline-offset: 0;
  border-color: var(--c-orange);
  box-shadow: var(--focus-ring);
}

.input:disabled,
.textarea:disabled,
.select:disabled,
.input.is-disabled {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-border);
  color: var(--c-ink-subtle);
  box-shadow: none;
  cursor: not-allowed;
}

.input:read-only:not(:disabled) {
  background-color: var(--c-surface-sunk);
}

.input--invalid,
.textarea--invalid,
.select--invalid,
[aria-invalid="true"].input,
[aria-invalid="true"].textarea,
[aria-invalid="true"].select {
  border-color: var(--c-danger);
  background-color: var(--c-danger-soft);
}

.input--invalid:focus-visible,
[aria-invalid="true"].input:focus-visible {
  outline-color: var(--c-danger);
  border-color: var(--c-danger);
  box-shadow: none;
}

/* --- Liste déroulante : chevron dessiné par masque -----------------------
   Un masque (et non une image de fond) permet de teinter la flèche avec un
   jeton — aucune couleur n'est encodée dans l'URI de données.             */
.select-wrap {
  position: relative;
  display: block;
}

.select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--sp-10);
  cursor: pointer;
}

.select-wrap::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--sp-4);
  inset-block-start: 50%;
  width: var(--sp-3);
  height: var(--sp-2);
  transform: translateY(-50%);
  background-color: var(--c-ink-muted);
  pointer-events: none;
  transition: background-color var(--t-fast) var(--ease);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M6 7.6 0.6 2.2 2 0.8 6 4.8 10 0.8 11.4 2.2 Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M6 7.6 0.6 2.2 2 0.8 6 4.8 10 0.8 11.4 2.2 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.select-wrap:hover::after {
  background-color: var(--c-ink);
}

.select-wrap:has(.select:disabled)::after {
  background-color: var(--c-ink-subtle);
}

/* --- Textes d'aide et d'erreur ------------------------------------------ */
.hint {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
}

.error-text {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--c-danger);
}

.error-text > svg {
  flex: none;
  width: var(--sp-4);
  height: var(--sp-4);
  margin-block-start: 1px;
  fill: currentColor;
}


/* ==========================================================================
   7. OPTIONS DE RÉPONSE (runner de quiz)
   --------------------------------------------------------------------------
   Structure attendue :
     <label class="choice">
       <input class="choice__input" type="radio" name="q1" value="…">
       <span class="choice__marker" aria-hidden="true">A</span>
       <span class="choice__label">Libellé de la réponse</span>
     </label>
   Le <input> natif reste dans le DOM, focusable et annoncé ; seul son rendu
   est masqué. Après correction, ajouter --correct / --incorrect / --missed
   ET un .choice__note contenant un pictogramme + un texte : la couleur seule
   ne porte jamais l'information.
   ========================================================================== */

.choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  min-height: calc(var(--h-touch) + var(--sp-4));
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xs);
  cursor: pointer;
  text-align: start;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
}

.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

.choice__marker {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-full);
  background-color: var(--c-surface-sunk);
  color: var(--c-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}

.choice__marker > svg {
  width: var(--sp-4);
  height: var(--sp-4);
  fill: currentColor;
}

.choice__label {
  flex: 1;
  min-width: 0;
  align-self: center;
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--c-ink);
}

/* Bandeau de correction sous le libellé : pictogramme + texte. */
.choice__note {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.choice__note > svg {
  flex: none;
  width: var(--sp-4);
  height: var(--sp-4);
  fill: currentColor;
}

/* --- Survol ------------------------------------------------------------- */
.choice:hover,
.choice.is-hover {
  background-color: var(--c-surface-sunk);
  border-color: var(--c-ink-subtle);
}

.choice:active,
.choice.is-active {
  background-color: var(--c-border);
}

/* --- Focus clavier (l'anneau vit sur le label, pas sur l'input caché) --- */
.choice:has(.choice__input:focus-visible),
.choice.is-focus {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-ring);
}

/* --- Sélectionné --------------------------------------------------------
   L'épaisseur de bordure ne change pas : le liseré supplémentaire passe par
   une ombre interne, ce qui évite tout décalage de mise en page.          */
.choice:has(.choice__input:checked),
.choice--selected {
  background-color: var(--c-info-soft);
  border-color: var(--c-orange);
  box-shadow: inset 0 0 0 1px var(--c-orange);
}

.choice:has(.choice__input:checked) .choice__marker,
.choice--selected .choice__marker {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-white);
}

/* --- Désactivé (pendant l'envoi, ou après correction) ------------------- */
.choice:has(.choice__input:disabled),
.choice--disabled {
  cursor: default;
  box-shadow: none;
}

/* --- Après correction --------------------------------------------------- */
.choice--correct {
  background-color: var(--c-success-soft);
  border-color: var(--c-success);
  box-shadow: inset 0 0 0 1px var(--c-success);
}

.choice--correct .choice__marker {
  background-color: var(--c-success);
  border-color: var(--c-success);
  color: var(--c-white);
}

.choice--correct .choice__note {
  color: var(--c-success);
}

.choice--incorrect {
  background-color: var(--c-danger-soft);
  border-color: var(--c-danger);
  box-shadow: inset 0 0 0 1px var(--c-danger);
}

.choice--incorrect .choice__marker {
  background-color: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--c-white);
}

.choice--incorrect .choice__note {
  color: var(--c-danger);
}

/* Bonne réponse non cochée : trait discontinu — la forme distingue l'état
   même en niveaux de gris ou pour un daltonien. */
.choice--missed {
  background-color: var(--c-surface);
  border-style: dashed;
  border-color: var(--c-success);
  box-shadow: none;
}

.choice--missed .choice__marker {
  background-color: var(--c-success-soft);
  border-color: var(--c-success);
  color: var(--c-success);
}

.choice--missed .choice__note {
  color: var(--c-success);
}

/* Option ignorée après correction : atténuée, mais toujours lisible. */
.choice--muted {
  background-color: var(--c-surface);
  border-color: var(--c-border);
  box-shadow: none;
}

.choice--muted .choice__label {
  color: var(--c-ink-muted);
}

/* Empilement des options. */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-list > li + li {
  margin-top: 0;
}


/* ==========================================================================
   8. TABLEAUX (console formateur)
   --------------------------------------------------------------------------
   .table-scroll crée son propre contexte de défilement : c'est LUI qui
   défile horizontalement, jamais <body> (base.css pose overflow-x: hidden).
   Conséquence à connaître : `position: sticky` sur <th> se cale sur ce
   conteneur, pas sur la fenêtre. Pour un en-tête réellement collant, donner
   une hauteur au conteneur via .table-scroll--fixed.
   ========================================================================== */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.table-scroll--fixed {
  max-height: calc(var(--sp-20) * 5);
  overflow-y: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.table caption {
  padding: var(--sp-4) var(--sp-5);
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  border-bottom: 1px solid var(--c-border);
}

.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}

.table thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border-strong);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-subtle);
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}

.table tbody tr:hover > td,
.table tbody tr:hover > th,
.table tbody tr.is-hover > td,
.table tbody tr.is-hover > th {
  background-color: var(--c-surface-sunk);
}

.table tbody tr[aria-selected="true"] > td,
.table tbody tr[aria-selected="true"] > th,
.table tbody tr.is-selected > td,
.table tbody tr.is-selected > th {
  background-color: var(--c-info-soft);
}

/* Colonne de nom figée à gauche pendant le défilement horizontal.
   Sélecteurs qualifiés (th./td.) : sans cela, la règle `white-space: nowrap`
   posée plus haut sur `.table th` l'emporterait en spécificité et un nom de
   40 caractères déborderait par-dessus la première colonne de scores. */
.table th.table__cell--sticky,
.table td.table__cell--sticky {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background-color: var(--c-surface);
  border-inline-end: 1px solid var(--c-border);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
  white-space: normal;
  min-width: calc(var(--sp-20) * 2);
  /* Plafond indispensable : un nom de 40 caractères mangerait sinon la
     totalité d'un écran de 375 px et masquerait les colonnes de score. */
  max-width: calc(var(--sp-20) * 2.4);
}

.table thead th.table__cell--sticky {
  z-index: 3;
}

.table__cell--numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.table__cell--center {
  text-align: center;
}

.table th.table__cell--wrap,
.table td.table__cell--wrap {
  white-space: normal;
  min-width: calc(var(--sp-20) * 3);
}

/* En-tête triable. */
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--h-touch);
  padding-inline: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.table__sort:hover {
  color: var(--c-ink);
}

.table__sort > svg {
  width: var(--sp-3);
  height: var(--sp-3);
  fill: currentColor;
  opacity: 0.5;
}

.table__sort[aria-sort="ascending"] > svg,
.table__sort[aria-sort="descending"] > svg {
  opacity: 1;
  color: var(--c-primary);
}


/* ==========================================================================
   9. CELLULE DE SCORE
   --------------------------------------------------------------------------
   Codage couleur + valeur chiffrée systématiquement imprimée. Une case vide
   affiche un tiret cadratin, jamais un blanc ambigu.
   ========================================================================== */

.score-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--sp-12) + var(--sp-1));
  min-height: var(--sp-8);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background-color: var(--c-score-none-bg);
  color: var(--c-ink-subtle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-tight);
}

.score-cell--high {
  background-color: var(--c-score-high-bg);
  color: var(--c-score-high);
}

.score-cell--mid {
  background-color: var(--c-score-mid-bg);
  color: var(--c-score-mid);
}

.score-cell--low {
  background-color: var(--c-score-low-bg);
  color: var(--c-score-low);
}

.score-cell--none {
  background-color: var(--c-score-none-bg);
  border-color: var(--c-border);
  color: var(--c-ink-subtle);
  font-weight: var(--fw-regular);
}


/* ==========================================================================
   10. ÉTATS — vide · chargement · erreur · hors ligne
   ========================================================================== */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
}

.state__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-12);
  height: var(--sp-12);
  margin-block-end: var(--sp-1);
  border-radius: var(--r-full);
  background-color: var(--c-info-soft);
  color: var(--c-primary);
}

.state__icon > svg {
  width: var(--sp-6);
  height: var(--sp-6);
  fill: currentColor;
}

.state__title {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.state__body {
  max-width: 42ch;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-ink-muted);
}

.state__action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-2);
}

.state--error .state__icon {
  background-color: var(--c-danger-soft);
  color: var(--c-danger);
}

.state--offline .state__icon,
.state--warning .state__icon {
  background-color: var(--c-warning-soft);
  color: var(--c-warning);
}

.state--success .state__icon {
  background-color: var(--c-success-soft);
  color: var(--c-success);
}

.state--loading .state__icon {
  background-color: var(--c-surface-sunk);
  color: var(--c-ink-muted);
}

.state--compact {
  padding: var(--sp-6) var(--sp-4);
}

/* --- Squelettes ---------------------------------------------------------
   Battement de couleur (et non balayage en dégradé : les dégradés sont
   proscrits par la charte). Coupé sous prefers-reduced-motion.            */
.skeleton {
  display: block;
  border-radius: var(--r-sm);
  background-color: var(--c-surface-sunk);
  animation: smile-pulse var(--t-shimmer) var(--ease) infinite alternate;
}

@keyframes smile-pulse {
  from {
    background-color: var(--c-surface-sunk);
  }
  to {
    background-color: var(--c-border);
  }
}

.skeleton--text {
  height: var(--sp-4);
}

.skeleton--title {
  height: var(--sp-6);
  border-radius: var(--r-md);
}

.skeleton--block {
  height: var(--sp-16);
  border-radius: var(--r-md);
}

.skeleton--circle {
  width: var(--sp-10);
  height: var(--sp-10);
  border-radius: var(--r-full);
}

.skeleton--w-half {
  width: 50%;
}

.skeleton--w-third {
  width: 33%;
}

.skeleton--w-3q {
  width: 75%;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background-color: var(--c-surface-sunk);
  }
}


/* ==========================================================================
   11. NOTIFICATIONS ÉPHÉMÈRES
   --------------------------------------------------------------------------
   Conteneur unique par page, avec role="status" aria-live="polite"
   (ou role="alert" pour une erreur bloquante).
   Mobile : en bas, au-dessus du pouce. Bureau : en haut à droite.
   ========================================================================== */

.toast-stack {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline: var(--sp-4);
  inset-block-end: var(--sp-4);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
}

@media (min-width: 48em) {
  .toast-stack {
    inset-inline: auto var(--sp-6);
    inset-block: var(--sp-6) auto;
    width: min(24rem, calc(100vw - var(--sp-12)));
    flex-direction: column;
  }
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  border-inline-start: var(--sp-1) solid var(--c-ink-subtle);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  color: var(--c-ink);
  pointer-events: auto;
}

.toast__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-5);
  height: var(--sp-5);
  margin-block-start: 1px;
  color: var(--c-ink-muted);
}

.toast__icon > svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.toast__content {
  flex: 1;
  min-width: 0;
}

.toast__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.toast__body {
  margin-block-start: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--c-ink-muted);
  overflow-wrap: anywhere;
}

.toast__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--h-touch);
  height: var(--h-touch);
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
  border-radius: var(--r-sm);
  color: var(--c-ink-subtle);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.toast__close > svg {
  width: var(--sp-4);
  height: var(--sp-4);
  fill: currentColor;
}

.toast__close:hover {
  background-color: var(--c-surface-sunk);
  color: var(--c-ink);
}

.toast--success {
  border-inline-start-color: var(--c-success);
}

.toast--success .toast__icon {
  color: var(--c-success);
}

.toast--error {
  border-inline-start-color: var(--c-danger);
}

.toast--error .toast__icon {
  color: var(--c-danger);
}

.toast--info {
  border-inline-start-color: var(--c-orange);
}

.toast--info .toast__icon {
  color: var(--c-primary);
}


/* ==========================================================================
   12. BOÎTE DE DIALOGUE
   --------------------------------------------------------------------------
   Balisage attendu :
     <div class="modal" role="dialog" aria-modal="true"
          aria-labelledby="t" hidden>
       <div class="modal__backdrop" data-close></div>
       <div class="modal__panel">…</div>
     </div>
   Le JS doit : mémoriser l'élément actif, déplacer le focus sur le panneau,
   piéger la tabulation entre le premier et le dernier élément focusable,
   fermer sur Échap, rendre le focus à l'ouverture précédente.
   Le panneau porte tabindex="-1" pour recevoir le focus initial.
   Mobile : feuille ancrée en bas. Bureau : panneau centré.
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--c-overlay);
  border: 0;
  cursor: pointer;
}

.modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92dvh;
  background-color: var(--c-surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--sh-xl);
  overflow: hidden;
  padding-block-end: env(safe-area-inset-bottom, 0px);
}

.modal__panel:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: calc(var(--focus-offset) * -1);
  box-shadow: var(--sh-xl);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
}

.modal__title {
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.modal__close {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--h-touch);
  height: var(--h-touch);
  margin: calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0 0;
  border-radius: var(--r-sm);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.modal__close > svg {
  width: var(--sp-5);
  height: var(--sp-5);
  fill: currentColor;
}

.modal__close:hover {
  background-color: var(--c-surface-sunk);
  color: var(--c-ink);
}

.modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5);
  color: var(--c-ink-muted);
  line-height: var(--lh-base);
}

.modal__footer {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background-color: var(--c-surface-sunk);
}

@media (min-width: 40em) {
  .modal {
    align-items: center;
    padding: var(--sp-6);
  }

  .modal__panel {
    max-width: var(--w-modal);
    max-height: 85dvh;
    border-radius: var(--r-xl);
  }

  .modal__footer {
    flex-direction: row;
    justify-content: flex-end;
  }
}


/* ==========================================================================
   13. GABARIT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.container--wide {
  max-width: var(--w-wide);
}

.container--flush {
  padding-inline: 0;
}

@media (min-width: 48em) {
  .container {
    padding-inline: var(--sp-6);
  }
}

/* Rythme vertical : la marge vit sur les frères, jamais sur l'élément seul. */
.stack > * + * {
  margin-block-start: var(--sp-4);
}

.stack--xs > * + * {
  margin-block-start: var(--sp-2);
}

.stack--sm > * + * {
  margin-block-start: var(--sp-3);
}

.stack--lg > * + * {
  margin-block-start: var(--sp-6);
}

.stack--xl > * + * {
  margin-block-start: var(--sp-10);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

.cluster--sm {
  gap: var(--sp-2);
}

.cluster--tight {
  gap: var(--sp-1);
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.grid-auto {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 48em) {
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

/* --- En-tête ------------------------------------------------------------ */
.app-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.app-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: calc(var(--h-touch) + var(--sp-4));
  padding-block: var(--sp-2);
}

.app-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink);
  text-decoration: none;
  border-radius: var(--r-sm);
}

.app-header__logo img,
.app-header__logo svg {
  height: var(--sp-8);
  width: auto;
}

.app-header__context {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
}

/* Bandeau de progression collé sous l'en-tête (runner de quiz). */
.app-header__progress {
  height: var(--h-progress);
  background-color: var(--c-border);
}

/* --- Pied de page ------------------------------------------------------- */
.app-footer {
  margin-block-start: var(--sp-12);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-ink-subtle);
}

.app-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.app-footer img,
.app-footer svg {
  height: var(--sp-6);
  width: auto;
  opacity: 0.7;
}

/* Zone de contenu principale. */
.app-main {
  padding-block: var(--sp-6) var(--sp-10);
}

@media (min-width: 48em) {
  .app-main {
    padding-block: var(--sp-10) var(--sp-16);
  }
}

/* Séparateur d'une section d'admin. */
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}


/* ==========================================================================
   14. ONGLETS
   --------------------------------------------------------------------------
   Balisage : <div class="tabs" role="tablist"> avec des
   <button class="tab" role="tab" aria-selected id="…" aria-controls="…">.
   Clavier attendu du JS : ← → pour changer d'onglet, Origine/Fin pour aller
   au premier/dernier, tabindex mobile (0 sur l'onglet actif, -1 sur les
   autres) pour ne consommer qu'une seule tabulation.
   ========================================================================== */

.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tab {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--h-touch);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background-color: transparent;
  color: var(--c-ink-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.tab > svg {
  width: var(--sp-4);
  height: var(--sp-4);
  fill: currentColor;
}

.tab__count {
  display: inline-grid;
  place-items: center;
  min-width: var(--sp-5);
  padding-inline: var(--sp-1);
  border-radius: var(--r-full);
  background-color: var(--c-surface-sunk);
  color: var(--c-ink-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.tab:hover,
.tab.is-hover {
  color: var(--c-ink);
  background-color: var(--c-surface-sunk);
}

.tab:focus-visible,
.tab.is-focus {
  outline: 2px solid var(--c-orange);
  outline-offset: calc(var(--focus-offset) * -1);
  box-shadow: var(--focus-ring);
}

.tab[aria-selected="true"],
.tab.is-selected {
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}

.tab[aria-selected="true"] .tab__count,
.tab.is-selected .tab__count {
  background-color: var(--c-info-soft);
  color: var(--c-primary);
}

/* Trait actif : 2 px, dans la tolérance « traits de règle ». */
.tab[aria-selected="true"]::after,
.tab.is-selected::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-3);
  inset-block-end: -1px;
  height: 2px;
  border-radius: var(--r-full);
  background-color: var(--c-orange);
}

.tab:disabled,
.tab[aria-disabled="true"] {
  color: var(--c-ink-subtle);
  cursor: not-allowed;
  background-color: transparent;
}

.tab-panel:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: var(--focus-offset);
}


/* ==========================================================================
   15. IMPRESSION — grilles de la console formateur
   --------------------------------------------------------------------------
   Le formateur imprime la grille de suivi. On déroule le conteneur de
   défilement, on décolle les en-têtes, on force le rendu des aplats de
   score et on masque tout ce qui n'a pas de sens sur papier.
   ========================================================================== */

@media print {
  .app-header,
  .app-footer,
  .toast-stack,
  .modal,
  .tabs,
  .btn,
  .table__sort > svg,
  .skeleton {
    display: none !important;
  }

  .container,
  .container--wide {
    max-width: none;
    padding-inline: 0;
  }

  .card {
    border: 1px solid var(--c-border-strong);
    box-shadow: none;
    break-inside: avoid;
  }

  .table-scroll,
  .table-scroll--fixed {
    overflow: visible;
    max-height: none;
    border: 0;
    box-shadow: none;
  }

  .table {
    font-size: var(--fs-2xs);
    width: 100%;
  }

  .table thead th,
  .table th.table__cell--sticky,
  .table td.table__cell--sticky {
    position: static;
    max-width: none;
    background-color: transparent;
  }

  .table thead {
    display: table-header-group;
  }

  .table tr {
    break-inside: avoid;
  }

  .table th,
  .table td {
    padding: var(--sp-1) var(--sp-2);
    border-bottom: 1px solid var(--c-border-strong);
  }

  /* Le codage couleur du score doit survivre à l'impression. */
  .score-cell,
  .pill,
  .badge-icon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .progress,
  .progress__fill,
  .progress-ring__value,
  .progress-ring__track {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===========================================================================
   16. Icônes — correctif transversal
   ---------------------------------------------------------------------------
   `SmileUI.icon()` produit des icônes en TRAIT (stroke), pas en aplat. Or les
   composants ci-dessus posent `fill: currentColor` sur leurs `> svg`, ce qui
   transformait un triangle d'alerte ou une flèche en tache pleine.
   Spécificité identique (une classe + un élément) : c'est l'ordre qui tranche,
   donc cette règle doit rester EN FIN DE FICHIER.
   =========================================================================== */
svg.icon {
  fill: none;
  stroke: currentColor;
  flex: none;
}