/* TECHXV-RUGBY 0.1.0-candidate — feuille des composants.
   Toutes les valeurs viennent des variables de tokens.css (chargé avant ce fichier).
   Classes préfixées tx- ; envelopper chaque page dans .tx-root. */

/* ---------- Base ---------- */
.tx-root {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--texte);
  background: var(--surface);
  -webkit-text-size-adjust: 100%;
  font-variant-numeric: lining-nums;
}
.tx-root *, .tx-root *::before, .tx-root *::after,
[class^="tx-"], [class*=" tx-"] { box-sizing: border-box; }
.tx-root :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
.tx-root :where(ul, ol) { padding: 0; }
.tx-root :where(img, svg) { max-width: 100%; }
.tx-root :where(a:not([class])) { color: var(--lien); text-underline-offset: 3px; }
.tx-root :where(a:not([class])):hover { color: var(--lien-survol); text-decoration-thickness: 2px; }
.tx-root :focus-visible,
.tx-root .is-focus { outline: var(--epaisseur-focus) solid var(--focus); outline-offset: var(--decalage-focus); }
.tx-surface-terrain :focus-visible,
.tx-surface-terrain .is-focus { outline-color: var(--focus-sur-terrain); }
.tx-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tx-surtitre { text-transform: uppercase; }
.tx-chiffre, .tx-donnee, .tx-root td, .tx-root th { font-variant-numeric: tabular-nums; }
.tx-code { overflow-wrap: anywhere; }
.tx-discret { color: var(--texte-discret); }
.tx-pile { display: grid; gap: var(--espace-4); }
.tx-icone { flex: none; display: inline-block; vertical-align: middle; }
.tx-tourne { animation: tx-tourne 1.4s linear infinite; }
@keyframes tx-tourne { to { transform: rotate(360deg); } }

/* Mouvement réduit : préférence système ou choix dans l'interface (.tx-mouvement-reduit). */
@media (prefers-reduced-motion: reduce) {
  .tx-root *, .tx-root *::before, .tx-root *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
.tx-mouvement-reduit, .tx-mouvement-reduit *, .tx-mouvement-reduit *::before, .tx-mouvement-reduit *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* ---------- Surface terrain (bandeau vert + lignes de craie décoratives) ---------- */
.tx-surface-terrain { position: relative; background: var(--surface-terrain); color: var(--texte-sur-terrain); }
.tx-surface-terrain--elevee { background: var(--surface-terrain-elevee); }
.tx-surface-terrain--texture { isolation: isolate; overflow: hidden; }
.tx-surface-terrain--texture::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--trait-craie);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M118 0v400M300 0v400M586 0v400'/%3E%3Cpath d='M30 0v400M209 0v400' stroke-dasharray='20 14'/%3E%3Cpath d='M300 44h286M300 356h286' stroke-dasharray='10 18'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 400' preserveAspectRatio='xMaxYMid slice'%3E%3Cg fill='none' stroke='%23000' stroke-width='3'%3E%3Cpath d='M118 0v400M300 0v400M586 0v400'/%3E%3Cpath d='M30 0v400M209 0v400' stroke-dasharray='20 14'/%3E%3Cpath d='M300 44h286M300 356h286' stroke-dasharray='10 18'/%3E%3C/g%3E%3C/svg%3E") right center / auto 100% no-repeat;
}
.tx-surface-terrain .tx-discret { color: var(--texte-sur-terrain-discret); }

/* ---------- Pastille d'état (icône + mot, jamais la couleur seule) ---------- */
.tx-pastille {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%;
  padding: 2px 10px 2px 8px; border: var(--epaisseur-filet) solid currentColor; border-radius: var(--rayon-pilule);
  font-size: 0.875rem; line-height: 1.25; font-weight: 650; vertical-align: middle; text-align: left;
}
.tx-pastille__icone { display: inline-flex; flex: none; }
.tx-pastille--neutre { color: var(--texte-discret); background: var(--surface-elevee); border-color: var(--bordure-forte); }
.tx-pastille--info { color: var(--info); background: var(--info-teinte); }
.tx-pastille--succes { color: var(--succes); background: var(--succes-teinte); }
.tx-pastille--alerte { color: var(--alerte); background: var(--alerte-teinte); }
.tx-pastille--alerte .tx-pastille__icone { color: var(--texte); background: var(--alerte-vif); border-radius: var(--rayon-pilule); padding: 1px; }
.tx-pastille--erreur { color: var(--erreur); background: var(--erreur-teinte); }
.tx-pastille--indisponible { color: var(--indisponible); background: var(--indisponible-teinte); border-style: dashed; }
.tx-pastille--attente { color: var(--info); background: var(--surface-elevee); border-style: dashed; }
.tx-pastille--demo { color: var(--texte); background: var(--surface-creuse); border-style: dashed; }
.tx-pastille--action { color: var(--texte); background: var(--action-teinte); }
.tx-pastille--sur-terrain { color: var(--texte-sur-terrain); background: var(--surface-terrain-elevee); border-color: var(--texte-sur-terrain-discret); }

/* ---------- Touche clavier ---------- */
.tx-kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 1.8em; padding: 0 0.45em;
  border: 1px solid currentColor; border-bottom-width: 2px; border-radius: var(--rayon-s);
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 750; line-height: 1; white-space: nowrap;
}

/* ---------- Bouton ---------- */
.tx-bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espace-2);
  min-height: var(--cible-min); min-width: var(--cible-min); max-width: 100%;
  padding: 8px 18px; border: var(--epaisseur-controle) solid var(--action-contour); border-radius: var(--rayon-s);
  font: inherit; font-size: 1rem; line-height: 1.25; font-weight: 700; text-align: center; text-decoration: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duree-rapide) var(--courbe-standard), color var(--duree-rapide) var(--courbe-standard),
              border-color var(--duree-rapide) var(--courbe-standard), transform var(--duree-rapide) var(--courbe-standard);
}
.tx-bouton__icone { display: inline-flex; flex: none; }
.tx-bouton--principal { background: var(--action); color: var(--texte-sur-action); }
.tx-bouton--principal:hover, .tx-bouton--principal.is-survol { background: var(--action-survol); }
.tx-bouton--principal:active, .tx-bouton--principal.is-actif { background: var(--action-presse); transform: translateY(1px); }
.tx-bouton--secondaire { background: var(--surface-elevee); color: var(--texte); }
.tx-bouton--secondaire:hover, .tx-bouton--secondaire.is-survol { background: var(--surface-survol); }
.tx-bouton--secondaire:active, .tx-bouton--secondaire.is-actif { background: var(--surface-creuse); transform: translateY(1px); }
.tx-bouton--discret { background: transparent; border-color: transparent; color: var(--lien); text-decoration: underline; text-underline-offset: 3px; }
.tx-bouton--discret:hover, .tx-bouton--discret.is-survol { background: var(--surface-survol); color: var(--lien-survol); text-decoration-thickness: 2px; }
.tx-bouton--discret:active, .tx-bouton--discret.is-actif { background: var(--surface-creuse); }
.tx-bouton--danger { background: var(--surface-elevee); color: var(--erreur); border-color: var(--erreur); }
.tx-bouton--danger:hover, .tx-bouton--danger.is-survol { background: var(--erreur-teinte); }
.tx-bouton--compact { min-height: 40px; padding: 6px 12px; font-size: 0.9375rem; }
.tx-bouton--large { min-height: var(--cible-confort); padding: 10px 22px; font-size: 1.0625rem; }
.tx-bouton--pleine-largeur { width: 100%; }
.tx-bouton--sur-terrain.tx-bouton--principal { border-color: var(--action); }
.tx-bouton--sur-terrain.tx-bouton--secondaire { background: transparent; color: var(--texte-sur-terrain); border-color: var(--texte-sur-terrain); }
.tx-bouton--sur-terrain.tx-bouton--secondaire:hover, .tx-bouton--sur-terrain.tx-bouton--secondaire.is-survol { background: var(--surface-terrain-elevee); }
.tx-bouton--sur-terrain.tx-bouton--discret { color: var(--lien-sur-terrain); }
.tx-bouton--sur-terrain.tx-bouton--discret:hover, .tx-bouton--sur-terrain.tx-bouton--discret.is-survol { background: var(--surface-terrain-elevee); color: var(--lien-sur-terrain); }
.tx-bouton[aria-disabled="true"], .tx-bouton.is-desactive {
  background: var(--indisponible-teinte); color: var(--indisponible); border-color: var(--indisponible);
  border-style: dashed; cursor: not-allowed; transform: none; text-decoration: none;
}
.tx-bouton.is-chargement { cursor: progress; }
.tx-bouton.is-chargement .tx-bouton__icone svg { animation: tx-tourne 1.4s linear infinite; }
.tx-bouton .tx-kbd { margin-left: 2px; }
.tx-bouton-pile { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; vertical-align: top; }
.tx-bouton-pile--pleine-largeur { display: flex; width: 100%; }
.tx-bouton__raison { display: inline-flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; line-height: 1.4; font-weight: 500; color: var(--texte-discret); }
.tx-bouton__raison .tx-icone { margin-top: 1px; }
.tx-surface-terrain .tx-bouton__raison { color: var(--texte-sur-terrain-discret); }

/* ---------- Lien ---------- */
.tx-lien { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tx-lien:hover, .tx-lien.is-survol { color: var(--lien-survol); text-decoration-thickness: 2px; }
.tx-lien__icone { display: inline-block; vertical-align: -3px; margin: 0 4px; }
.tx-lien--sur-terrain, .tx-lien--sur-terrain:hover { color: var(--lien-sur-terrain); }

/* ---------- Navigation ---------- */
.tx-nav { container: tx-nav / inline-size; position: relative; border-bottom: 1px solid var(--bordure-sur-terrain); }
.tx-evitement {
  position: absolute; left: var(--espace-4); top: var(--espace-2); z-index: 5;
  padding: 10px 16px; background: var(--action); color: var(--texte-sur-action);
  border: 2px solid var(--action-contour); border-radius: var(--rayon-s); font-weight: 700; text-decoration: none;
  transform: translateY(-300%);
}
.tx-evitement:focus, .tx-evitement:focus-visible, .tx-evitement.is-focus { transform: none; }
.tx-nav__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-6);
  min-height: var(--hauteur-nav); max-width: var(--largeur-contenu); margin: 0 auto;
  padding: 8px clamp(16px, 4cqi, 48px);
}
.tx-nav__marque { display: inline-flex; align-items: baseline; gap: 12px; min-height: var(--cible-min); padding-top: 10px; color: var(--texte-sur-terrain); text-decoration: none; }
.tx-nav__mot { font-weight: 850; font-size: 1.25rem; letter-spacing: 0.05em; }
.tx-nav__sous { font-size: 0.9375rem; font-weight: 500; color: var(--texte-sur-terrain-discret); }
.tx-nav__liens { margin-left: auto; }
.tx-nav__liens ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--espace-1); margin: 0; padding: 0; }
.tx-nav__lien {
  position: relative; display: inline-flex; align-items: center; min-height: var(--cible-min);
  padding: 8px 14px; border-radius: var(--rayon-s); color: var(--texte-sur-terrain); font-weight: 650; text-decoration: none;
}
.tx-nav__lien:hover, .tx-nav__lien.is-survol { background: var(--surface-terrain-elevee); text-decoration: underline; text-underline-offset: 5px; }
.tx-nav__lien[aria-current="page"] { color: var(--lien-sur-terrain); }
.tx-nav__lien[aria-current="page"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--lien-sur-terrain); }
.tx-nav__statut { display: flex; align-items: center; }
.tx-nav__menu { display: none; }
@container tx-nav (max-width: 680px) {
  .tx-nav__sous { display: none; }
  .tx-nav__menu {
    display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: var(--cible-min);
    padding: 8px 14px; background: transparent; color: var(--texte-sur-terrain);
    border: 2px solid var(--texte-sur-terrain); border-radius: var(--rayon-s); font: inherit; font-weight: 700; cursor: pointer;
  }
  .tx-nav__liens { display: none; width: 100%; margin-left: 0; }
  .tx-nav.is-ouvert .tx-nav__liens { display: block; }
  .tx-nav__liens ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .tx-nav__lien { width: 100%; border-radius: 0; border-top: 1px solid var(--bordure-sur-terrain); padding-left: 16px; }
  .tx-nav__lien[aria-current="page"]::after { left: 0; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
  .tx-nav__statut { width: 100%; }
}

/* ---------- Carte de cas ---------- */
.tx-cartecas {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-4);
  padding: var(--espace-5); background: var(--surface-elevee); border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-m); box-shadow: var(--ombre-1);
  transition: border-color var(--duree-rapide) var(--courbe-standard), box-shadow var(--duree-rapide) var(--courbe-standard);
}
.tx-cartecas:hover, .tx-cartecas.is-survol { border-color: var(--texte); box-shadow: var(--ombre-2); }
.tx-cartecas.is-actuel { border: 2px solid var(--texte); padding: calc(var(--espace-5) - 1px); }
.tx-cartecas:has(.tx-cartecas__lien:focus-visible), .tx-cartecas.is-focus { outline: var(--epaisseur-focus) solid var(--focus); outline-offset: var(--decalage-focus); }
.tx-cartecas:has(.tx-cartecas__lien:focus-visible) .tx-cartecas__lien:focus-visible { outline: none; }
.tx-cartecas__dossard {
  display: grid; place-items: center; width: 56px; height: 64px; border-radius: var(--rayon-s);
  background: var(--surface-terrain); color: var(--texte-sur-terrain); box-shadow: inset 0 0 0 2px var(--trait-craie);
  font-size: 1.75rem; font-weight: 850; font-variant-numeric: tabular-nums;
}
.tx-cartecas__picto { position: absolute; top: var(--espace-4); right: var(--espace-4); width: 48px; }
.tx-cartecas__picto .tx-reserve { border-radius: var(--rayon-s); }
.tx-cartecas--picto .tx-cartecas__corps { padding-right: 56px; }
.tx-cartecas__corps { display: flex; flex-direction: column; gap: var(--espace-2); min-width: 0; }
.tx-cartecas__surtitre { color: var(--texte-discret); }
.tx-cartecas__titre { margin: 0; }
.tx-cartecas__lien { color: var(--texte); text-decoration: none; }
.tx-cartecas__lien::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tx-cartecas__lien:hover { text-decoration: underline; text-underline-offset: 4px; }
.tx-cartecas__accroche { color: var(--texte-discret); font-style: italic; }
.tx-cartecas__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-2) var(--espace-3); margin-top: auto; padding-top: var(--espace-2); }
.tx-cartecas__reprendre { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--lien); }
.tx-cartecas__ouvrir { display: inline-flex; color: var(--lien); }

/* ---------- Progression locale ---------- */
.tx-progression { display: grid; gap: var(--espace-4); padding: var(--espace-5); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-progression__entete { display: flex; align-items: center; gap: var(--espace-3); }
.tx-progression__entete .tx-icone { color: var(--lien); }
.tx-progression__texte { color: var(--texte-discret); max-width: var(--largeur-lecture); }
.tx-progression__vide { font-weight: 600; }
.tx-progression__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--espace-3); margin: 0; }
.tx-progression__chiffre { padding: var(--espace-3) var(--espace-4); background: var(--surface-creuse); border-radius: var(--rayon-s); }
.tx-progression__chiffre dt { font-size: 0.875rem; color: var(--texte-discret); }
.tx-progression__chiffre dd { margin: 0; font-size: 1.375rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-progression__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: flex-start; }

/* ---------- Étapes (fil du parcours) ---------- */
.tx-etapes { display: grid; gap: var(--espace-3); }
.tx-etapes__resume { font-weight: 600; }
.tx-etapes__bascule { display: none; }
.tx-etapes__liste { list-style: none; display: grid; gap: 2px; margin: 0; padding: 0; }
.tx-etapes__lien {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--espace-3);
  min-height: 48px; padding: 6px 10px; border-radius: var(--rayon-s); color: var(--texte); text-decoration: none;
}
.tx-etapes__lien:hover, .tx-etapes__lien.is-survol { background: var(--surface-survol); }
.tx-etapes__item:not(:last-child) .tx-etapes__lien::before {
  content: ""; position: absolute; left: 25px; top: 40px; bottom: -8px; border-left: 2px dashed var(--bordure-forte);
}
.tx-etapes__num {
  position: relative; z-index: 1; display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 2px solid var(--bordure-forte); border-radius: var(--rayon-pilule); background: var(--surface-elevee);
  font-size: 0.9375rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.tx-etapes__titre { font-weight: 600; }
.tx-etapes__etat { font-size: 0.8125rem; font-weight: 650; color: var(--texte-discret); }
.tx-etapes__item.is-faite .tx-etapes__num { background: var(--surface-terrain); border-color: var(--surface-terrain); color: var(--texte-sur-terrain); }
.tx-etapes__item.is-en-cours .tx-etapes__lien { background: var(--action-teinte); }
.tx-etapes__item.is-en-cours .tx-etapes__titre { font-weight: 800; }
.tx-etapes__item.is-en-cours .tx-etapes__num { background: var(--action); border-color: var(--action-contour); color: var(--texte-sur-action); }
@media (max-width: 47.99em) {
  .tx-etapes__bascule {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: var(--cible-min);
    padding: 8px 14px; background: var(--surface-elevee); color: var(--texte); border: 2px solid var(--action-contour);
    border-radius: var(--rayon-s); font: inherit; font-weight: 700; cursor: pointer;
  }
  .tx-etapes__liste { display: none; }
  .tx-etapes.is-ouvert .tx-etapes__liste { display: grid; }
}

/* ---------- Étape (section du parcours guidé) ---------- */
.tx-etape { display: grid; gap: var(--espace-5); padding: var(--espace-6) var(--espace-5); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-etape--en-cours { border: 2px solid var(--texte); }
.tx-etape--a-venir { background: var(--surface); border-style: dashed; }
.tx-etape__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3) var(--espace-4); }
.tx-etape__num {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: var(--rayon-s);
  background: var(--surface-terrain); color: var(--texte-sur-terrain); font-size: 1.375rem; font-weight: 850;
}
.tx-etape--en-cours .tx-etape__num { background: var(--action); color: var(--texte-sur-action); box-shadow: inset 0 0 0 2px var(--action-contour); }
.tx-etape__titres { flex: 1 1 200px; min-width: 0; }
.tx-etape__surtitre { color: var(--texte-discret); }
.tx-etape__titre { margin: 0; }
.tx-etape__corps { display: grid; gap: var(--espace-4); min-width: 0; }
.tx-etape__corps > p { max-width: var(--largeur-lecture); }
@media (max-width: 30em) { .tx-etape { padding: var(--espace-5) var(--espace-4); } }

/* ---------- Champ ---------- */
.tx-champ { display: grid; gap: 6px; min-width: 0; }
.tx-champ__label { font-size: 1rem; line-height: 1.35; font-weight: 650; }
.tx-champ__requis { font-weight: 500; color: var(--texte-discret); }
.tx-champ__aide { font-size: 0.9375rem; color: var(--texte-discret); }
.tx-champ__saisie { display: flex; align-items: stretch; max-width: 100%; }
.tx-champ--court .tx-champ__saisie { max-width: 16rem; }
.tx-champ__controle {
  width: 100%; min-width: 0; min-height: var(--cible-min); padding: 9px 12px; margin: 0;
  font: inherit; font-size: 1.0625rem; color: var(--texte); background: var(--surface-elevee);
  border: var(--epaisseur-controle) solid var(--bordure-forte); border-radius: var(--rayon-s);
}
.tx-champ__controle:hover, .tx-champ__controle.is-survol { border-color: var(--texte-discret); }
.tx-champ__controle:focus-visible, .tx-champ__controle.is-focus { border-color: var(--texte); }
textarea.tx-champ__controle { resize: vertical; line-height: 1.5; }
.tx-champ__saisie--suffixe .tx-champ__controle { border-radius: var(--rayon-s) 0 0 var(--rayon-s); }
.tx-champ__suffixe {
  display: inline-flex; align-items: center; padding: 0 12px; white-space: nowrap; color: var(--texte-discret); font-weight: 600;
  background: var(--surface-creuse); border: var(--epaisseur-controle) solid var(--bordure-forte); border-left: 0; border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
}
.tx-champ.is-erreur .tx-champ__controle { border-color: var(--erreur); }
.tx-champ.is-succes .tx-champ__controle { border-color: var(--succes); }
.tx-champ__message { display: flex; align-items: flex-start; gap: 6px; font-size: 0.9375rem; font-weight: 650; }
.tx-champ__message .tx-icone { margin-top: 2px; }
.tx-champ__message--erreur { color: var(--erreur); }
.tx-champ__message--succes { color: var(--succes); }
.tx-champ__compteur { justify-self: end; font-size: 0.875rem; color: var(--texte-discret); font-variant-numeric: tabular-nums; }
.tx-champ.is-desactive .tx-champ__controle { background: var(--indisponible-teinte); color: var(--indisponible); border-color: var(--indisponible); border-style: dashed; cursor: not-allowed; }
.tx-champ__raison { display: flex; align-items: flex-start; gap: 6px; font-size: 0.875rem; color: var(--indisponible); font-weight: 600; }
.tx-champ--case .tx-champ__ligne { display: flex; align-items: flex-start; gap: var(--espace-3); }
.tx-champ__case { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--surface-terrain); cursor: pointer; }
.tx-champ--case .tx-champ__label { cursor: pointer; }
.tx-champ--case .tx-champ__aide { padding-left: 36px; }

/* ---------- Tableau avec légende ---------- */
.tx-tableau { container: tx-tableau / inline-size; display: grid; gap: var(--espace-2); min-width: 0; }
.tx-tableau__entete { display: grid; gap: 2px; }
.tx-tableau__titre { font-size: 1.125rem; font-weight: 750; }
.tx-tableau__desc { font-size: 0.9375rem; color: var(--texte-discret); }
.tx-tableau__defile { overflow-x: auto; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); background: var(--surface-elevee); }
.tx-tableau__table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.4; }
.tx-tableau__table th, .tx-tableau__table td { padding: 10px var(--espace-4); text-align: left; vertical-align: top; border-top: 1px solid var(--bordure); }
.tx-tableau__table thead th {
  background: var(--surface-creuse); font-size: 0.875rem; font-weight: 750; white-space: nowrap;
  border-top: 0; border-bottom: 2px solid var(--bordure-forte);
}
.tx-tableau__table tbody tr:first-child > * { border-top: 0; }
.tx-tableau__table tbody th { font-weight: 650; }
.tx-tableau__table .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tx-tableau__table tr.is-marquee > * { background: var(--action-teinte); }
.tx-tableau__table tr.is-marquee > :first-child { box-shadow: inset 4px 0 0 var(--texte); }
.tx-tableau__note { font-size: 0.9375rem; color: var(--texte-discret); }
.tx-tableau__etat { padding: var(--espace-5) var(--espace-4); }
.tx-tableau__squelette { display: block; height: 0.9em; border-radius: 4px; background: var(--surface-creuse); }
.tx-tableau__indice-defilement { display: flex; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--texte-discret); }
@container tx-tableau (max-width: 560px) {
  .tx-tableau__table th, .tx-tableau__table td { padding: 8px 12px; }
  .tx-tableau__table tbody th:first-child, .tx-tableau__table thead th:first-child { position: sticky; left: 0; z-index: 1; }
  .tx-tableau__table tbody th:first-child { background: var(--surface-elevee); box-shadow: 1px 0 0 var(--bordure-forte); }
}

/* ---------- Téléchargement ---------- */
.tx-telechargement { container: tx-telech / inline-size; background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-telechargement__grille { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--espace-3) var(--espace-4); align-items: start; padding: var(--espace-4); }
.tx-telechargement__type {
  display: grid; place-items: center; width: 52px; height: 60px; border: 2px solid var(--texte); border-radius: var(--rayon-s);
  background: var(--surface); font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em;
}
.tx-telechargement__info { display: grid; gap: 2px; min-width: 0; }
.tx-telechargement__nom { margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 700; overflow-wrap: anywhere; }
.tx-telechargement__chemin { font-size: 0.8125rem; color: var(--texte-discret); }
.tx-telechargement__note { display: flex; align-items: flex-start; gap: 6px; margin-top: 4px; font-size: 0.875rem; font-weight: 650; color: var(--info); }
.tx-telechargement__note .tx-icone { margin-top: 2px; }
.tx-telechargement__etat { display: grid; justify-items: end; align-content: start; gap: 6px; min-width: 210px; text-align: right; }
.tx-telechargement__etat .tx-bouton-pile { align-items: flex-end; }
.tx-telechargement__statut { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 650; }
.tx-telechargement__detail { font-size: 0.875rem; color: var(--texte-discret); }
.tx-telechargement__barre { width: 100%; height: 10px; appearance: none; -webkit-appearance: none; border: 1px solid var(--texte); border-radius: 999px; background: var(--jauge-piste); overflow: hidden; }
.tx-telechargement__barre::-webkit-progress-bar { background: var(--jauge-piste); }
.tx-telechargement__barre::-webkit-progress-value { background: var(--jauge-remplie); }
.tx-telechargement__barre::-moz-progress-bar { background: var(--jauge-remplie); }
.tx-telechargement.is-echec { border: 2px solid var(--erreur); }
.tx-telechargement.is-hors-ligne, .tx-telechargement.is-indisponible { border-style: dashed; border-color: var(--indisponible); }
@container tx-telech (max-width: 600px) {
  .tx-telechargement__grille { grid-template-columns: auto minmax(0, 1fr); }
  .tx-telechargement__etat { grid-column: 1 / -1; justify-items: start; min-width: 0; text-align: left; }
  .tx-telechargement__etat .tx-bouton-pile { align-items: flex-start; }
}

/* ---------- Accordéon d'indice ---------- */
.tx-indice { background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-indice.is-ouvert { border: 2px solid var(--texte); }
.tx-indice__titre { margin: 0; font-size: inherit; line-height: inherit; }
.tx-indice__bouton {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone libelle chevron" "icone origine chevron";
  align-items: center; column-gap: var(--espace-3); width: 100%; min-height: 60px; padding: 10px var(--espace-4);
  background: transparent; border: 0; border-radius: var(--rayon-m); color: var(--texte); font: inherit; text-align: left; cursor: pointer;
}
.tx-indice__bouton:hover, .tx-indice__bouton.is-survol { background: var(--surface-survol); }
.tx-indice__icone { grid-area: icone; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--texte); border-radius: var(--rayon-pilule); background: var(--action-teinte); }
.tx-indice__libelle { grid-area: libelle; font-size: 1.0625rem; font-weight: 750; }
.tx-indice__origine { grid-area: origine; font-size: 0.875rem; color: var(--texte-discret); }
.tx-indice__chevron { grid-area: chevron; display: inline-flex; transition: transform var(--duree-moyenne) var(--courbe-standard); }
.tx-indice.is-ouvert .tx-indice__chevron { transform: rotate(180deg); }
.tx-indice__panneau { display: grid; gap: var(--espace-3); padding: 0 var(--espace-4) var(--espace-4) calc(var(--espace-4) + 36px + var(--espace-3)); }
.tx-indice__panneau[hidden] { display: none; }
.tx-indice__raison { display: flex; gap: 6px; padding: 0 var(--espace-4) var(--espace-3) calc(var(--espace-4) + 36px + var(--espace-3)); font-size: 0.875rem; font-weight: 600; color: var(--indisponible); }
.tx-indice.is-verrouille { background: var(--indisponible-teinte); border: 1px dashed var(--indisponible); }
.tx-indice.is-verrouille .tx-indice__bouton { color: var(--indisponible); cursor: not-allowed; }
.tx-indice.is-verrouille .tx-indice__bouton:hover { background: transparent; }
.tx-indice.is-verrouille .tx-indice__icone { background: transparent; border-color: var(--indisponible); }
.tx-indice.is-verrouille .tx-indice__origine { color: var(--indisponible); }
@media (max-width: 30em) {
  .tx-indice__panneau, .tx-indice__raison { padding-left: var(--espace-4); }
}

/* ---------- Retour formatif ---------- */
.tx-retour { display: grid; gap: var(--espace-3); padding: var(--espace-5); border: 2px solid currentColor; border-radius: var(--rayon-m); }
.tx-retour--juste { color: var(--succes); background: var(--succes-teinte); }
.tx-retour--partiel { color: var(--alerte); background: var(--alerte-teinte); }
.tx-retour--a-revoir { color: var(--erreur); background: var(--erreur-teinte); }
.tx-retour--info { color: var(--info); background: var(--info-teinte); }
.tx-retour__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tx-retour__icone { display: inline-flex; }
.tx-retour--partiel .tx-retour__icone { color: var(--texte); background: var(--alerte-vif); border-radius: var(--rayon-pilule); padding: 2px; }
.tx-retour__verdict { font-size: 1rem; font-weight: 800; }
.tx-retour__type { margin-left: auto; font-size: 0.8125rem; font-weight: 650; color: var(--texte-discret); }
.tx-retour__titre { margin: 0; color: var(--texte); }
.tx-retour__corps { display: grid; gap: var(--espace-2); color: var(--texte); }
.tx-retour__corps > p { max-width: var(--largeur-lecture); }

/* ---------- Bandeau ---------- */
.tx-bandeau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espace-3); align-items: start; padding: var(--espace-3) var(--espace-4); border: 1px solid currentColor; border-radius: var(--rayon-m); }
.tx-bandeau--info { color: var(--info); background: var(--info-teinte); }
.tx-bandeau--succes { color: var(--succes); background: var(--succes-teinte); }
.tx-bandeau--alerte { color: var(--alerte); background: var(--alerte-teinte); }
.tx-bandeau--erreur { color: var(--erreur); background: var(--erreur-teinte); }
.tx-bandeau--indisponible { color: var(--indisponible); background: var(--indisponible-teinte); border-style: dashed; }
.tx-bandeau--demo { color: var(--texte); background: var(--surface-creuse); border-style: dashed; }
.tx-bandeau__icone { display: inline-flex; padding-top: 2px; }
.tx-bandeau--alerte .tx-bandeau__icone .tx-icone { color: var(--texte); background: var(--alerte-vif); border-radius: var(--rayon-pilule); padding: 2px; width: 24px; height: 24px; }
.tx-bandeau__contenu { display: grid; gap: 4px; min-width: 0; color: var(--texte); }
.tx-bandeau__titre { font-weight: 750; }
.tx-bandeau__texte { display: grid; gap: var(--espace-2); justify-items: start; }

/* ---------- Panneau coach ---------- */
.tx-coach { container: tx-coach / inline-size; background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-coach--integre { background: transparent; border: 0; }
.tx-coach__grille { display: grid; gap: var(--espace-4); padding: var(--espace-5); }
.tx-coach--integre .tx-coach__grille { padding: 0; }
.tx-coach__entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--espace-2) var(--espace-3); }
.tx-coach__titre { display: inline-flex; align-items: center; gap: var(--espace-2); margin: 0; }
.tx-coach__sous { margin-top: 2px; font-size: 0.9375rem; color: var(--texte-discret); }
.tx-coach__contexte { display: grid; gap: var(--espace-2); justify-items: start; padding: var(--espace-3) var(--espace-4); background: var(--surface-creuse); border-radius: var(--rayon-s); }
.tx-coach__question { font-weight: 750; }
.tx-coach__dl { display: flex; flex-wrap: wrap; gap: 2px var(--espace-5); margin: 0; }
.tx-coach__dl > div { display: flex; gap: 6px; }
.tx-coach__dl dt { color: var(--texte-discret); }
.tx-coach__dl dt::after { content: "\00a0:"; }
.tx-coach__dl dd { margin: 0; font-weight: 650; }
.tx-coach__fil { list-style: none; display: grid; gap: var(--espace-3); margin: 0; padding: 0; }
.tx-msg { display: grid; gap: 6px; padding: var(--espace-3) var(--espace-4); background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-msg--apprenant { margin-left: var(--espace-6); background: var(--surface-creuse); }
.tx-msg--coach { margin-right: var(--espace-6); border-color: var(--texte); }
.tx-msg--indice { border: 1px dashed var(--texte); background: var(--action-teinte); }
.tx-msg--systeme { border-style: dashed; }
.tx-msg__auteur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 750; }
.tx-msg__corps { display: grid; gap: var(--espace-2); }
.tx-msg__sources { font-size: 0.875rem; color: var(--texte-discret); }
.tx-msg__sources-lib { font-weight: 700; }
.tx-coach__attente { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4); color: var(--info); font-weight: 650; border: 1px dashed var(--info); border-radius: var(--rayon-s); background: var(--surface); }
.tx-coach__relance { display: grid; gap: var(--espace-2); padding: var(--espace-3) var(--espace-4); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s); background: var(--surface); }
.tx-coach__relance-actions { display: flex; flex-wrap: wrap; gap: var(--espace-2); }
.tx-coach__saisie { display: grid; gap: var(--espace-3); justify-items: start; }
.tx-coach__saisie .tx-champ { width: 100%; }
@container tx-coach (max-width: 400px) {
  .tx-msg--apprenant { margin-left: var(--espace-4); }
  .tx-msg--coach { margin-right: 0; }
  .tx-coach__grille { padding: var(--espace-4); }
}

/* ---------- Statut réseau ---------- */
.tx-reseau { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 0.9375rem; font-weight: 650; }
.tx-reseau--en-ligne { color: var(--succes); }
.tx-reseau--hors-ligne { color: var(--indisponible); }
.tx-reseau--attente { color: var(--info); }
.tx-reseau--erreur { color: var(--erreur); }
.tx-reseau__detail { font-weight: 400; color: var(--texte-discret); }
.tx-reseau--sur-terrain { color: var(--texte-sur-terrain); }
.tx-reseau--sur-terrain .tx-reseau__detail { color: var(--texte-sur-terrain-discret); }

/* ---------- Règles du jeu ---------- */
.tx-regles { display: grid; gap: var(--espace-5); padding: clamp(16px, 4vw, 32px); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-l); }
.tx-regles__entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-3); }
.tx-regles__intro { max-width: var(--largeur-lecture); }
.tx-regles__liste { list-style: none; display: grid; gap: var(--espace-3); margin: 0; padding: 0; counter-reset: tx-regle; }
.tx-regles__liste > li { counter-increment: tx-regle; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--espace-3); align-items: start; }
.tx-regles__liste > li::before {
  content: counter(tx-regle); display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--rayon-s);
  background: var(--surface-terrain); color: var(--texte-sur-terrain); font-weight: 800;
}
.tx-regles__bloc { display: grid; gap: var(--espace-3); }
.tx-regles__bloc > ul { display: grid; gap: var(--espace-2); padding-left: 1.25em; }
.tx-regles__note { font-size: 0.9375rem; font-weight: 650; color: var(--alerte); }
.tx-regles__options { display: grid; gap: var(--espace-3); padding: var(--espace-4); background: var(--surface-creuse); border-radius: var(--rayon-m); }
.tx-regles__son { display: flex; align-items: center; gap: var(--espace-2); color: var(--texte-discret); }
.tx-regles__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }

/* ---------- Commandes du jeu ---------- */
.tx-commandes { display: grid; gap: var(--espace-3); padding: var(--espace-4); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-l); }
.tx-commandes__rangee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.tx-commandes__rangee--pleine { grid-template-columns: minmax(0, 1fr); }
.tx-commandes__rangee .tx-bouton, .tx-commandes__rangee .tx-bouton-pile { width: 100%; }
.tx-commandes .tx-bouton { flex-wrap: wrap; row-gap: 2px; }
.tx-commandes__bloc {
  display: grid; justify-items: center; align-content: center; gap: 0; margin: 0; padding: 6px 12px; text-align: center;
  background: var(--action-teinte); border: 2px dashed var(--texte); border-radius: var(--rayon-s);
}
.tx-commandes__raison { display: flex; align-items: center; gap: 6px; font-size: 0.9375rem; font-weight: 650; color: var(--indisponible); }

/* ---------- Plateau du jeu (jauges) ---------- */
.tx-jauges { display: grid; gap: var(--espace-4); padding: clamp(16px, 3vw, 24px); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-l); }
.tx-jauges__entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3); }
.tx-jauges__titre { margin: 0; }
.tx-jauges__hud { display: flex; flex-wrap: wrap; gap: var(--espace-2) var(--espace-5); margin: 0; }
.tx-jauges__hud > div { display: grid; }
.tx-jauges__hud dt { font-size: 0.8125rem; font-weight: 650; color: var(--texte-discret); }
.tx-jauges__hud dd { margin: 0; font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-jauges__zone-texte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-jauges__blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--espace-3); }
.tx-jauges__bloc { padding: var(--espace-3); background: var(--surface); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m); }
.tx-jauges__bloc.is-actif { background: var(--action-teinte); border: 2px dashed var(--texte); }
.tx-jauges__bloc-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--espace-2); font-weight: 750; }
.tx-jauges__liste { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.tx-jauge { display: grid; grid-template-columns: 28px minmax(0, 1fr) 2.2em; grid-template-areas: "num piste valeur" ". etat etat"; align-items: center; gap: 2px 10px; }
.tx-jauge__num { grid-area: num; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--rayon-s); background: var(--surface-terrain); color: var(--texte-sur-terrain); font-size: 0.875rem; font-weight: 800; }
.tx-jauge__piste { grid-area: piste; position: relative; height: 16px; background: var(--jauge-piste); border-radius: 3px; }
.tx-jauge__zone-fond { position: absolute; top: -4px; bottom: -4px; background: var(--jauge-zone); border-radius: 3px; }
.tx-jauge__remplie { position: absolute; left: 0; top: 0; bottom: 0; background: var(--jauge-remplie); border-radius: 3px; transition: width var(--duree-lente) var(--courbe-standard); }
.tx-jauge__zone-contour { position: absolute; top: -4px; bottom: -4px; border: 2px dashed var(--texte); border-radius: 3px; }
.tx-jauge__valeur { grid-area: valeur; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-jauge__etat { grid-area: etat; display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 650; }
.tx-jauge.is-zone .tx-jauge__etat { color: var(--succes); }
.tx-jauge.is-haut .tx-jauge__etat, .tx-jauge.is-bas .tx-jauge__etat { color: var(--alerte); }
.tx-jauges.is-pause .tx-jauges__bloc { border-style: dashed; }

/* ---------- Score / résultat ---------- */
.tx-score { display: grid; gap: var(--espace-3); justify-items: start; padding: var(--espace-5); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-l); }
.tx-score--local, .tx-score--provisoire { border-style: dashed; }
.tx-score--confirme { border: 2px solid var(--succes); }
.tx-score--rejete { border: 2px solid var(--erreur); }
.tx-score__titre { margin: 0; color: var(--texte-discret); }
.tx-score__valeur { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.tx-score__max { font-size: 1.125rem; font-weight: 650; color: var(--texte-discret); }
.tx-score__detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--espace-2); width: 100%; margin: 0; }
.tx-score__detail > div { padding: 8px 12px; background: var(--surface-creuse); border-radius: var(--rayon-s); }
.tx-score__detail dt { font-size: 0.8125rem; color: var(--texte-discret); font-weight: 650; }
.tx-score__detail dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.tx-score__note, .tx-score__motif { font-size: 0.9375rem; color: var(--texte-discret); max-width: var(--largeur-lecture); }
.tx-score__rang { font-size: 1.125rem; }

/* ---------- Classement ---------- */
.tx-classement { display: grid; gap: var(--espace-4); min-width: 0; }
.tx-classement__entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--espace-3); }
.tx-classement__sous { margin-top: 4px; color: var(--texte-discret); }
.tx-classement__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-2) var(--espace-4); }
.tx-classement__vide, .tx-classement__etat {
  display: grid; justify-items: start; gap: 6px; padding: var(--espace-5);
  background: var(--surface-elevee); border: 1px dashed var(--bordure-forte); border-radius: var(--rayon-m);
}
.tx-classement__etat { grid-template-columns: auto 1fr; align-items: center; color: var(--info); font-weight: 650; }
.tx-ligneclassement > * { vertical-align: middle; }
.tx-ligneclassement__rang { font-size: 1.125rem; font-weight: 800; }
.tx-ligneclassement__pseudo-contenu { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tx-ligneclassement.is-vous > * { background: var(--action-teinte); }
.tx-ligneclassement.is-en-attente > *, .tx-ligneclassement.is-rejete > * { color: var(--texte-discret); }

/* ---------- Envoi du score ---------- */
.tx-envoi { display: grid; gap: var(--espace-4); padding: var(--espace-5); background: var(--surface-elevee); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-l); }
.tx-envoi__titre { margin: 0; }
.tx-envoi__resume { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--espace-4); margin: 0; }
.tx-envoi__resume dt { color: var(--texte-discret); }
.tx-envoi__resume dd { margin: 0; font-weight: 750; }
.tx-envoi__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: flex-start; }
.tx-envoi__attente { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--espace-2) var(--espace-3); color: var(--info); font-weight: 650; }
.tx-envoi__attente .tx-pastille { grid-column: 2; justify-self: start; }

/* ---------- Réserve d'image ---------- */
.tx-reserve {
  position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; border-radius: var(--rayon-l);
  background-color: var(--surface-creuse); border: 1px dashed var(--bordure-forte);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--bordure) 14px 15px);
}
.tx-reserve--sur-terrain { background-color: var(--surface-terrain-elevee); border-color: var(--bordure-sur-terrain); background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--trait-craie) 14px 15px); }
.tx-reserve__libelle {
  display: grid; justify-items: center; gap: 2px; max-width: calc(100% - 24px); margin: 12px; padding: 8px 12px; text-align: center;
  background: var(--surface-elevee); color: var(--texte); border: 1px solid var(--bordure-forte); border-radius: var(--rayon-s);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
}
.tx-reserve__slot { font-weight: 700; }
.tx-reserve__img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--rayon-l); }

/* ---------- Schéma de jointure (explication en DOM) ---------- */
.tx-schema {
  container: tx-schema / inline-size; display: grid; gap: var(--espace-3); padding: var(--espace-5);
  background-color: var(--surface-elevee); background-image: radial-gradient(circle, var(--bordure) 1px, transparent 1.6px); background-size: 16px 16px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-m);
}
.tx-schema__titres, .tx-schema__rangee { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(9rem, 1.3fr) minmax(8rem, 1fr); gap: 4px var(--espace-3); }
.tx-schema__titres { font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-discret); }
.tx-schema__liste { list-style: none; display: grid; gap: var(--espace-3); margin: 0; padding: 0; }
.tx-schema__rangee { grid-template-areas: "g l d" "n n n"; align-items: center; }
.tx-schema__boite { display: grid; gap: 0; padding: 8px 12px; background: var(--surface-elevee); border: 2px solid var(--texte); border-radius: var(--rayon-s); font-weight: 650; }
.tx-schema__etiquette { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-discret); }
.tx-schema__gauche { grid-area: g; }
.tx-schema__droite { grid-area: d; }
.tx-schema__lien { grid-area: l; position: relative; display: grid; place-items: center; min-height: 44px; }
.tx-schema__trait { position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid var(--texte); }
.tx-schema__relation {
  position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; text-align: center;
  background: var(--surface-elevee); border: 1px solid var(--texte); border-radius: var(--rayon-pilule); font-size: 0.8125rem; font-weight: 700;
}
.tx-schema__rangee--groupe .tx-schema__droite { box-shadow: 5px 5px 0 -1px var(--surface-elevee), 5px 5px 0 1px var(--texte); }
.tx-schema__rangee--orphelin .tx-schema__trait { border-top-style: dashed; border-color: var(--indisponible); }
.tx-schema__rangee--orphelin .tx-schema__gauche { color: var(--indisponible); background: var(--indisponible-teinte); border-style: dashed; border-color: var(--indisponible); }
.tx-schema__rangee--orphelin .tx-schema__relation { color: var(--indisponible); border-color: var(--indisponible); border-style: dashed; }
.tx-schema__rangee--different .tx-schema__trait { border-top-style: dotted; border-color: var(--erreur); }
.tx-schema__rangee--different .tx-schema__relation { color: var(--erreur); border-color: var(--erreur); }
.tx-schema__note { grid-area: n; font-size: 0.875rem; color: var(--texte-discret); }
.tx-schema__legende { font-size: 0.9375rem; color: var(--texte-discret); }
@container tx-schema (max-width: 520px) {
  .tx-schema__titres { display: none; }
  .tx-schema__rangee { grid-template-columns: minmax(0, 1fr); grid-template-areas: "g" "l" "d" "n"; }
  .tx-schema__lien { min-height: 52px; }
  .tx-schema__rangee--groupe .tx-schema__droite { margin: 0 6px 6px 0; }
  .tx-schema__trait { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px solid var(--texte); }
  .tx-schema__rangee--orphelin .tx-schema__trait { border-left-style: dashed; border-left-color: var(--indisponible); }
  .tx-schema__rangee--different .tx-schema__trait { border-left-style: dotted; border-left-color: var(--erreur); }
}

/* ---------- Pied de page ---------- */
.tx-pied { background: var(--surface-creuse); border-top: 1px solid var(--bordure-forte); }
.tx-pied__interieur { display: grid; gap: var(--espace-3); max-width: var(--largeur-contenu); margin: 0 auto; padding: var(--espace-6) clamp(16px, 4vw, 48px); }
.tx-pied__marque { font-size: 1rem; }
.tx-pied__mentions { max-width: var(--largeur-lecture); font-size: 0.9375rem; color: var(--texte-discret); }
.tx-pied__liens { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--espace-5); margin: 0; padding: 0; }
.tx-pied__liens .tx-lien { display: inline-flex; align-items: center; min-height: var(--cible-min); }

/* ---------- Gabarits de mise en page (patterns) ---------- */
.tx-page { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.tx-section { display: grid; gap: var(--espace-5); padding-block: var(--espace-7); }
.tx-section__entete { display: grid; gap: var(--espace-2); max-width: var(--largeur-lecture); }
.tx-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--espace-5); align-items: stretch; }
.tx-grille--large { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.tx-grille--deux { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(300px, calc((100% - var(--espace-5)) / 2))), 1fr)); }
.tx-heros__titre { margin: 0; font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3rem); line-height: 1.04; font-weight: 800; letter-spacing: -0.015em; max-width: 16ch; }
.tx-exercice { display: grid; gap: var(--espace-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.tx-exercice__etapes, .tx-exercice__tache, .tx-exercice__coach { min-width: 0; }
.tx-exercice__tache { display: grid; gap: var(--espace-5); }
@media (min-width: 48em) {
  .tx-exercice { grid-template-columns: 230px minmax(0, 1fr); }
  .tx-exercice__coach { grid-column: 2; }
}
@media (min-width: 75em) {
  .tx-exercice { grid-template-columns: 230px minmax(0, 1fr) var(--colonne-coach); }
  .tx-exercice__coach { grid-column: 3; grid-row: 1 / span 2; }
  .tx-exercice__aller-coach { display: none; }
}
@media (max-width: 37.49em) { .tx-masque-etroit { display: none !important; } }

/* ---------- Mode contrastes forcés ---------- */
@media (forced-colors: active) {
  .tx-bouton, .tx-pastille, .tx-bandeau, .tx-retour, .tx-cartecas, .tx-indice, .tx-champ__controle { border-color: CanvasText; }
  .tx-bouton[aria-disabled="true"], .tx-bouton.is-desactive { color: GrayText; border-color: GrayText; }
  .tx-jauge__remplie { background: CanvasText; }
  .tx-etapes__item.is-en-cours .tx-etapes__num { border-color: Highlight; }
}