/* =============================================================
   Legion Tournament
   Feuille unique, ordonnée comme le document.

   Valeurs relevées sur la piste A · Tableau d'affichage, choisie par
   le client le 2026-10-15 (etat.md, sections 2 et 3). Aucune autre
   source esthétique : pas d'image client, la piste fait référence.
   ============================================================= */

:root { --nuit: #0B1630;
  --nuit-2: #13244B;
  --nuit-3: #071022;
  --blanc: #F4F7FB;
  --encre: #0B1630;
  --encre-douce: #4B5976;
  --clair: #EEF2F8;
  --clair-doux: #9DAECD;
  --signal: #FFD400;
  --filet-nuit: rgba(238, 242, 248, .1);
  --filet-nuit-fort: rgba(238, 242, 248, .3);
  --filet: #D3DAE6;

  /* Refonte A+ (2026-10-16, etat.md section 5) : « le tableau sous verre,
     avec du punch ». Même palette, trois matières :
     la nuit (le fond, sans boîte),
     la plaque (opaque : nuit 2 pour le dense, blanc froid pour le travail),
     la vitre (fumée, floutée, seulement devant quelque chose de réel). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --plaque: linear-gradient(180deg, rgba(238, 242, 248, .045), rgba(238, 242, 248, 0) 40%), var(--nuit-2);
  --plaque-claire: var(--blanc);
  --vitre: linear-gradient(180deg, rgba(238, 242, 248, .07), rgba(238, 242, 248, 0) 32%), var(--grain), rgba(8, 17, 38, .6);
  --teinte: rgba(244, 247, 251, .05);
  --creux-nuit: rgba(7, 16, 34, .55);
  --ombre: 0 2px 0 rgba(0, 0, 0, .3), 0 40px 80px -40px rgba(0, 0, 0, .85);
  --flou: blur(16px) saturate(115%);
  --halo-signal: 0 0 0 1px var(--signal), 0 0 30px -6px rgba(255, 212, 0, .55);

  --fond: var(--nuit-3);
  --bord: var(--filet-nuit);
  --trait: rgba(238, 242, 248, .22);
  --choix: var(--clair);
  --sur-choix: var(--nuit);
  --police-titre: 'Barlow', 'Barlow Repli', -apple-system, 'Segoe UI', sans-serif;
  --police-texte: 'Barlow', 'Barlow Repli', -apple-system, 'Segoe UI', sans-serif;
  --rayon: 12px;          /* plaques et vitres */
  --rayon-moyen: 10px;    /* cartes, photos */
  --rayon-petit: 6px;     /* champs, matchs, cases */
  --rayon-bouton: 8px;    /* boutons, onglets, pastilles */
  --rythme: clamp(4rem, 8vw, 7rem);
  --corps:         1.0625rem;
  /* Échelle A+ : titres très gras, serrés, en minuscules (etat.md, 3 bis). */
  --titre-1:       clamp(2.5rem, 1.3rem + 3.6vw, 4.2rem);
  --titre-2:       clamp(2.1rem, 1.3rem + 2.3vw, 3.15rem);
  --titre-vedette: clamp(2.4rem, 1.4rem + 3vw, 3.8rem);   /* UN par page au plus */
  --gouttiere:     clamp(1.25rem, 5vw, 4rem);
  --largeur:       1240px; }

/* ---------- remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: linear-gradient(180deg, var(--nuit-3), var(--nuit) 18rem, var(--nuit-3) 60rem) var(--nuit-3); color: var(--clair); font: var(--corps)/1.6 var(--police-texte); }
h1, h2, h3, h4 { font-family: var(--police-titre); line-height: 1.1; margin: 0; }
h1 { font-size: var(--titre-1); }
h2 { font-size: var(--titre-2); }
p, ul, ol { margin: 0; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
img { width: 100%; }
figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
.hero, .beta { overflow-x: clip; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

/* Les titres longs ne se coupent pas au milieu d'un mot : c'est un point
   de contrôle de la phase 2, pas une préférence. */
h1, h2 { hyphens: none; text-wrap: balance; }
/* Pas de mot seul sur la dernière ligne (point 10 de l'audit) : petits titres
   équilibrés, paragraphes et listes sans orphelin. Les mots à trait d'union
   (e‑mail, auront‑elles) prennent le trait d'union insécable dans le texte. */
h3, .fonction__nom { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* ---------- accessibilité ---------- */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.saut-contenu { position: absolute; left: -9999px; top: 0; z-index: 100; padding: .75rem 1rem; border-radius: var(--rayon-petit); background: var(--clair); color: var(--nuit); }
.saut-contenu:focus { left: 0; }

/* Toute zone cliquable atteint 44 px en tactile. */
a, button, [role="button"], label, summary { min-height: 44px; }
.pied a, .navigation a { display: inline-flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- enveloppe : la ligne d'alignement ---------- */
/* TOUTES les sections posent leur contenu dans .enveloppe, ou dans un bloc
   encarté de la même largeur. Le poids d'une section varie par son fond, son
   échelle et sa composition — JAMAIS par le bord de son contenu.
   Relevé sur un site réel : à 1600 px, les blocs encartés prenaient toute la
   largeur pendant que les sections centrées s'arrêtaient à 1240 — contenu à
   62 px du bord contre 217, 155 px d'écart entre deux sections voisines.
   À 1280 l'écart tombait à 5 px : c'est pourquoi rien ne se voyait. Les
   relevés se font donc AUSSI à 1600 (phases.md, porte 4).
   Une seule exception admise : les hero pleine largeur, qui forment une
   seconde famille déclarée dans etat.md. Deux familles, jamais trois. */
.enveloppe,
.bloc-encarte {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
}
.enveloppe { padding-inline: var(--gouttiere); }

/* =============================================================
   SECTION contact
   ============================================================= */
.contact__form { display: grid; gap: 1rem; max-width: 36rem; }
.contact__champ { display: grid; gap: .35rem; }
.contact__form input,
.contact__form textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--creux-nuit); }
.contact__form button[disabled] { opacity: .55; cursor: not-allowed; }
.contact__avis { font-size: .9rem; color: var(--clair-doux); }

/* =============================================================
   SECTION en-tête et pied de page
   ============================================================= */
.navigation__liste { display: flex; gap: 1.5rem; list-style: none; padding: 0; }

@media (max-width: 1080px) {
  .navigation { display: none; }
  .navigation[data-ouvert] { display: block; }
}
@media (min-width: 1081px) {
  .entete__bascule { display: none; }
}

/* ---------- polices auto-hébergées (OFL) ---------- */
@font-face { font-family: 'Barlow Condensed'; src: url(../fonts/barlow-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url(../fonts/barlow-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
/* Avant l'arrivée de Barlow (quelques dixièmes de seconde, au premier passage) : Arial ramenée
   aux mesures de Barlow, graisse par graisse. Le texte occupe la même place avant et après :
   la page ne saute plus quand la police arrive (CLS, mesuré par Lighthouse). Rapports de
   largeur mesurés sur un texte français ; Barlow : 1,0 em au-dessus de la ligne, 0,2 em dessous. */
@font-face { font-family: 'Barlow Repli'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); font-weight: 400; size-adjust: 96.41%; ascent-override: 103.72%; descent-override: 20.74%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Repli'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); font-weight: 500; size-adjust: 97.33%; ascent-override: 102.74%; descent-override: 20.55%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 600; size-adjust: 90.74%; ascent-override: 110.20%; descent-override: 22.04%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 700; size-adjust: 91.60%; ascent-override: 109.17%; descent-override: 21.83%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 800; size-adjust: 92.43%; ascent-override: 108.19%; descent-override: 21.64%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 900; size-adjust: 93.09%; ascent-override: 107.42%; descent-override: 21.48%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Repli'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Helvetica Bold'); font-weight: 700; size-adjust: 75.68%; ascent-override: 132.14%; descent-override: 26.43%; line-gap-override: 0%; }


/* =============================================================
   STRUCTURE COMMUNE : en-tête
   ============================================================= */
.entete { position: relative; z-index: 40; }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 76px; }
.logo { display: inline-flex; align-items: baseline; gap: .45em; text-decoration: none; }
.navigation__liste { margin: 0; }
.navigation__liste a { text-decoration: none; }
.entete__bascule { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.entete__burger, .entete__burger::before, .entete__burger::after {
  position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; content: '';
}
.entete__burger { top: 21px; }
.entete__burger::before { top: -7px; left: 0; right: 0; }
.entete__burger::after { top: 7px; left: 0; right: 0; }

@media (min-width: 1081px) {
  .navigation { display: flex; align-items: center; gap: 2rem; }
  .navigation__liste { gap: 1.6rem; }
}
/* « Connexion » (pour revenir sans chercher l'ancien e-mail) à côté de « Rejoindre la bêta ». */
.navigation__boutons { display: flex; align-items: center; gap: .6rem; }
@media (max-width: 1080px) {
  .navigation__boutons { flex-direction: column; align-items: stretch; }
}
@media (max-width: 1080px) {
  .navigation[data-ouvert] {
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
    position: absolute; left: 0; right: 0; top: 100%; padding: .5rem var(--gouttiere) 1.5rem;
  }
  .navigation__liste { flex-direction: column; gap: 0; }
  .navigation__liste a { display: flex; min-height: 48px; }
}

/* ---------- boutons et liens ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 1.6rem; border: 1px solid transparent; border-radius: var(--rayon-bouton); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.lien-fleche { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; }
.lien-fleche::after { content: '→'; transition: transform .2s; }
.lien-fleche:hover::after { transform: translateX(4px); }
.lien-fleche:hover { border-bottom-color: currentColor; }

/* =============================================================
   ARBRE DE TOURNOI (structure et traits de liaison)
   Chaque colonne a la même hauteur : les centres des matchs
   tombent à 1/8, 3/8… puis 1/4, 3/4, puis 1/2.
   ============================================================= */
.arbre__defile { overflow-x: auto; }
.arbre__tours {
  --ecart: 2.25rem;
  display: grid; grid-template-columns: repeat(3, minmax(10.5rem, 1fr));
  column-gap: var(--ecart); min-width: 35rem;
}
.arbre__tour { display: flex; flex-direction: column; }
.arbre__colonne { flex: 1; display: flex; flex-direction: column; }
.arbre__paire { flex: 1; display: flex; flex-direction: column; position: relative; }
.arbre__case { flex: 1; display: flex; align-items: center; position: relative; padding-block: .35rem; }
.match { position: relative; width: 100%; }
.match__ligne { display: flex; justify-content: space-between; gap: .75rem; }
.match__score { font-variant-numeric: tabular-nums; }

.arbre__tour:not(:last-child) .arbre__case::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  width: calc(var(--ecart) / 2); border-top: 1px solid var(--trait);
}
.arbre__tour:not(:last-child) .arbre__paire::after {
  content: ''; position: absolute; left: calc(100% + var(--ecart) / 2); top: 25%; bottom: 25%;
  border-left: 1px solid var(--trait);
}
.arbre__tour:not(:first-child) .arbre__case::before {
  content: ''; position: absolute; right: 100%; top: 50%;
  width: calc(var(--ecart) / 2); border-top: 1px solid var(--trait);
}

/* ---------- formulaire ---------- */
.contact__form select { width: 100%; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--creux-nuit); }

h1, h2, h3 { font-weight: 800; line-height: 1; letter-spacing: -.035em; }
h3 { font-weight: 700; line-height: 1.12; letter-spacing: -.015em; }
.sur-nuit { color: var(--clair); }

/* ---------- motifs partagés ---------- */
.bouton { font: 700 1.05rem/1 var(--police-titre); }
.bouton--principal { background: var(--signal); color: var(--nuit); }
.bouton--principal:hover { background: #fff; }
.bouton--secondaire { border-color: var(--filet-nuit-fort); background-color: transparent; color: var(--clair); }
.bouton--secondaire:hover { border-color: var(--clair); background-color: var(--teinte); }
.lien-fleche { font: 700 1.02rem/1.2 var(--police-titre); padding-bottom: .3rem; border-bottom: 2px solid var(--signal); min-height: 0; transition: border-color .2s; }
.surtitre-a { display: inline-flex; align-items: center; gap: .6rem; font: 600 .95rem/1.2 var(--police-texte); color: var(--doux); }
.surtitre-a::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); }

/* =============================================================
   SECTION en-tête
   ============================================================= */
.entete { color: var(--clair); background: rgba(7, 16, 34, .82); border-bottom: 1px solid var(--filet-nuit); }
/* À l'accueil, l'en-tête se pose sur la photo de la salle. */
body:has(.hero__photo) .entete { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.logo__mot { font: 800 1.6rem/1 var(--police-titre); letter-spacing: -.03em; }
.logo__sous { font: 500 1.05rem/1 var(--police-titre); color: var(--clair-doux); }
.navigation__liste a { font: 500 1rem/1 var(--police-texte); color: var(--clair-doux); transition: color .2s; }
.navigation__liste a:hover { color: var(--clair); }
@media (max-width: 1080px) {
  /* Menu ouvert : un seul panneau opaque, barre du logo comprise (point 3 de l'audit :
     à 97 %, le titre de l'accueil se lisait à travers les liens). */
  .navigation[data-ouvert] { background: var(--nuit-3); border-bottom: 1px solid var(--filet-nuit); }
  .entete:has(.navigation[data-ouvert]), body:has(.hero__photo) .entete:has(.navigation[data-ouvert]),
  body:has(.page-tete--visuel) .entete:has(.navigation[data-ouvert]) { background: var(--nuit-3); }
  /* Le ☰ devient une croix quand le menu est ouvert. */
  .entete__burger, .entete__burger::before, .entete__burger::after { transition: transform .2s, background-color .2s; }
  .entete__bascule[aria-expanded="true"] .entete__burger { background: transparent; }
  .entete__bascule[aria-expanded="true"] .entete__burger::before { transform: translateY(7px) rotate(45deg); }
  .entete__bascule[aria-expanded="true"] .entete__burger::after { transform: translateY(-7px) rotate(-45deg); }
  .navigation__liste a { border-bottom: 1px solid var(--filet-nuit); font-size: 1.15rem; }
}

/* =============================================================
   LA VITRE : seulement devant quelque chose de réel
   Une photo, le tableau, du contenu qui défile dessous. Fumée,
   tranche claire en haut, ombre nette. Ailleurs, des plaques.
   ============================================================= */
.vitre, .page-tete__visuel--panneau .panneau, .beta__form:not(.vitre) {
  position: relative; isolation: isolate;
  background: none;
  border: 1px solid rgba(238, 242, 248, .09);
  border-top-color: rgba(238, 242, 248, .28);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
}
/* Le flou est porté par une couche derrière le contenu, jamais par un
   parent des chiffres à diodes : dans Chrome, un backdrop-filter efface
   le texte tramé (background-clip) ou masqué de ses descendants. */
.vitre::before, .page-tete__visuel--panneau .panneau::before, .beta__form:not(.vitre)::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--vitre);
  -webkit-backdrop-filter: var(--flou);
  backdrop-filter: var(--flou);
}
/* Jamais de flou derrière des chiffres à diodes, même sur une couche à
   part : selon la taille, Chrome efface encore le texte tramé. Le tableau
   et l'écran géant sont en verre fumé : teinté, sans être dépoli. */
.tableau::before, .ecran.vitre::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(180deg, rgba(238, 242, 248, .07), rgba(238, 242, 248, 0) 32%), var(--grain), rgba(8, 17, 38, .76); }

/* =============================================================
   LED : le tableau d'affichage
   Nos chiffres (Barlow Condensed), vus à travers une trame de
   points. Le « 8 » éteint derrière chaque chiffre, ce sont les
   diodes au repos. Jaune pour le direct, blanc pour le reste.
   La trame est découpée sur le texte (background-clip), jamais un
   masque : un masque sur du texte s'efface parfois sous une vitre.
   ============================================================= */
.led { position: relative; display: flex; align-items: center; gap: .03em; font: 700 clamp(5rem, 2.6rem + 7vw, 10.5rem)/.82 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; --diode: var(--signal); --eteinte: rgba(157, 174, 205, .16); }
/* La lueur des diodes : un halo derrière les chiffres, jamais un filter. */
.led::after { content: ''; position: absolute; z-index: -1; inset: -25% -12%; background: radial-gradient(closest-side, rgba(255, 212, 0, .3), rgba(255, 212, 0, .08) 60%, transparent); pointer-events: none; }
.led__chiffre, .led__sep, .led__chiffre::before {
  color: transparent;
  background-image: radial-gradient(circle, var(--diode) 46%, transparent 52%);
  background-size: max(.062em, 4.5px) max(.062em, 4.5px);
  -webkit-background-clip: text; background-clip: text;
}
.led__chiffre, .led__sep { position: relative; display: inline-block; }
.led__chiffre::before { content: attr(data-fantome); position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, var(--eteinte) 42%, transparent 47%); }
.led__sep { margin-inline: .04em; opacity: .75; }
.led--blanc { font-size: clamp(4.2rem, 2.8rem + 3.6vw, 6.6rem); --diode: var(--clair); --eteinte: rgba(157, 174, 205, .12); }
.led--blanc::after { background: radial-gradient(closest-side, rgba(238, 242, 248, .16), transparent); }
.led--horloge { justify-content: center; width: fit-content; margin: .6rem auto .9rem; font-size: clamp(3.8rem, 2.4rem + 4.4vw, 7rem); }
/* Le score qui change : les diodes clignotent (app.js bascule cette
   classe). Jamais une animation CSS d'opacité : elle met les chiffres sur
   une couche à part, et Chrome ne repeint plus le texte tramé ensuite. */
.led--eteinte { --diode: rgba(157, 174, 205, .2); }
@keyframes pouls-a { 50% { opacity: .25; } }

/* =============================================================
   ARBRE : habillage (accueil, page publique, démonstrateurs)
   ============================================================= */
.arbre__entete { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 1rem; padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--filet-nuit); }
.arbre__nom { font: 800 1.5rem/1.1 var(--police-titre); letter-spacing: -.025em; }
.arbre__infos { grid-row: 2; margin-top: .35rem; font-size: .9rem; color: var(--clair-doux); }
.arbre__etiquette { grid-row: 1 / 3; grid-column: 2; align-self: center; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.arbre__defile { padding: 1.25rem 1.4rem 1.5rem; }
.arbre__intitule { margin-bottom: .55rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.match { background: var(--creux-nuit); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-petit); }
.match__ligne { padding: .45rem .7rem; color: var(--clair-doux); font-weight: 500; font-size: .95rem; }
.match__ligne + .match__ligne { border-top: 1px solid var(--filet-nuit); }
.match__ligne--gagne { color: var(--clair); font-weight: 700; }
.match__score { font: 700 1.1rem/1 var(--police-titre); }
.match__ligne--gagne .match__score { color: var(--clair); }
.match--direct { border-color: var(--signal); box-shadow: 0 0 24px -6px rgba(255, 212, 0, .6); }
.match__statut { display: flex; align-items: center; gap: .4rem; padding: .5rem .7rem .1rem; color: var(--signal); font: 600 .8rem/1 var(--police-texte); }
.match__statut::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; animation: pouls-a 1.6s ease-in-out infinite; }
.match--direct .match__ligne { color: var(--clair); }
.match--attente { border-style: dashed; background: transparent; }

/* =============================================================
   ÉCRAN : le score en grand (accueil, page publique, match)
   Les points du score sont des diodes, comme sur un tableau.
   ============================================================= */
.ecran { background: var(--plaque); color: var(--clair); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.ecran__entete, .ecran__pied, .ecran__haut { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.ecran__entete { border-bottom: 1px solid var(--filet-nuit); }
.ecran__pied { border-top: 1px solid var(--filet-nuit); }
.ecran__direct { display: inline-flex; align-items: center; gap: .45rem; color: var(--signal); }
.ecran__direct::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); animation: pouls-a 1.6s ease-in-out infinite; }
.ecran__score { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1.5rem 1.25rem; }
.ecran__equipe { font: 800 1.6rem/1.05 var(--police-titre); letter-spacing: -.02em; }
.ecran__equipe:last-child { text-align: right; }
.ecran__points { display: flex; align-items: center; gap: .3em; font: 700 clamp(4rem, 2.5rem + 4vw, 6.5rem)/.85 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; --diode: var(--signal); }
.ecran__points > span { display: inline-block; color: transparent; background-image: radial-gradient(circle, var(--diode) 46%, transparent 52%); background-size: max(.062em, 4.5px) max(.062em, 4.5px); -webkit-background-clip: text; background-clip: text; }
.ecran__sep { font-size: .6em; --diode: var(--clair-doux); }
/* Le mode grand écran de l'accueil : une horloge à diodes. */
.ecran__quoi { margin-top: .4rem; font-weight: 700; text-align: center; }
.ecran__bas { display: flex; justify-content: center; gap: .9rem; padding: 0 1.25rem 1.3rem; font-weight: 700; }
.ecran__bas span:nth-child(2) { font-weight: 400; color: var(--clair-doux); }

/* =============================================================
   ACCUEIL (refonte A+, 2026-10-16)
   Le tableau sous verre, avec du punch : titre en affiche, tableau
   qui déborde et score qui change, compteurs à diodes, le champ
   jaune du direct, une plaque claire, de vraies photos.
   ============================================================= */
.titre-section { font-size: var(--titre-2); }
.etiquette, .public__etiquette { font: 600 .9rem/1.2 var(--police-texte); color: var(--clair-doux); }

/* ---------- hero : une vraie salle derrière la vitre ---------- */
.hero { position: relative; padding: calc(76px + clamp(2rem, 5vw, 4rem)) 0 0; color: var(--clair); }
.hero__photo { position: absolute; inset: 0; }
.hero__photo img { height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.12) brightness(.92); }
.hero__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 16, 34, .92) 0%, rgba(7, 16, 34, .7) 38%, rgba(7, 16, 34, .2) 72%, rgba(7, 16, 34, .45) 100%),
              linear-gradient(180deg, rgba(7, 16, 34, .55) 0%, transparent 35%, transparent 60%, var(--nuit-3) 100%);
}
.hero__grille { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 3.5rem; align-items: start; }
.hero__titre { grid-column: 1 / -1; max-width: 15ch; font-size: clamp(2.7rem, 1.2rem + 5.2vw, 5.6rem); font-weight: 900; line-height: .93; letter-spacing: -.045em; }
.hero__texte { padding-top: .5rem; }
.hero__chapo { margin: 0 0 2rem; max-width: 32rem; font-size: 1.2rem; color: var(--clair); opacity: .85; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.75rem; }
.hero__note { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--filet-nuit); font-size: .95rem; color: var(--clair-doux); }

/* ---------- le tableau : la vitre devant le panneau à diodes ---------- */
.tableau { position: relative; z-index: 2; overflow: hidden; margin-bottom: -9rem; }
.tableau__direct { position: relative; padding: 1.1rem 1.4rem 1.3rem; border-bottom: 1px solid var(--filet-nuit); }
/* La lumière du direct éclaire la vitre autour des chiffres. */
.tableau__direct::before { content: ''; position: absolute; inset: 0; background: radial-gradient(22rem 9rem at 50% 62%, rgba(255, 212, 0, .16), transparent 70%); pointer-events: none; }
.tableau__quoi { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; font-size: .9rem; color: var(--clair-doux); }
.tableau__quoi .direct-point { font-weight: 700; }
.tableau__score { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem; margin-top: .6rem; }
.tableau__equipe { font: 800 clamp(1.25rem, .9rem + 1.1vw, 2rem)/1.05 var(--police-titre); letter-spacing: -.02em; }
.tableau__equipe--b { text-align: right; }
.tableau__arbre .arbre__defile { padding: 1.1rem 1.4rem 1.2rem; }
.tableau__arbre .arbre__defile + .defilement { margin: 0 1.4rem 1rem; }
.tableau .match { background: rgba(7, 16, 34, .72); border-color: rgba(238, 242, 248, .08); }
.tableau .match__ligne { padding: .4rem .65rem; font-size: .92rem; }

/* Les résultats qui défilent, en pied de tableau. */
.defilant { display: flex; height: 2.6rem; border-top: 1px solid var(--filet-nuit); background: rgba(7, 16, 34, .6); font-size: .95rem; font-weight: 600; }
.defilant__titre { flex: none; display: grid; place-items: center; padding: 0 1rem; background: var(--clair); color: var(--nuit); font-weight: 700; }
.defilant__fenetre { flex: 1; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.defilant__piste { display: flex; width: max-content; white-space: nowrap; animation: defile 40s linear infinite; }
.defilant__boucle { padding-right: 3rem; }
.defilant__boucle b { margin: 0 .5rem 0 1rem; color: var(--clair-doux); }
.defilant__boucle em { font-style: normal; color: var(--signal); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- compteurs : le tableau d'affichage, en chiffres ---------- */
.compteurs { padding: calc(9rem + 3.5rem) 0 1rem; }
.compteurs__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.compteurs__liste li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.1rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); }
.compteurs__liste p:not(.led) { font-size: 1.05rem; line-height: 1.35; color: var(--clair-doux); }
.compteurs__liste strong { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--clair); }

/* ---------- publics : deux photos, pas de boîte ---------- */
.publics { padding: var(--rythme) 0; }
.publics__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; margin-top: 3rem; align-items: start; }
.public { display: grid; gap: .8rem; justify-items: start; }
.public:nth-child(2) { margin-top: 7rem; }
.public__photo { margin-bottom: .6rem; }
.public__photo img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon-moyen); filter: contrast(1.05); }
.public:nth-child(2) .public__photo img { aspect-ratio: 4 / 3; }
.public__titre { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); font-weight: 800; letter-spacing: -.025em; }
.public p:not([class]) { max-width: 34rem; color: var(--clair-doux); }

/* ---------- le fil des tours : le trait de l'arbre, d'étape en étape ---------- */
.etapes { padding-bottom: var(--rythme); }
.etapes__grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; }
.fil-tours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: .9rem; border-top: 1px solid var(--trait); }
.fil-tours--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 3rem 0 2.5rem; }
.fil-tours__point { position: relative; display: grid; align-content: start; gap: .5rem; padding: 1.75rem 1.5rem 0 0; color: var(--clair-doux); }
.fil-tours__point::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--nuit-3); border: 2px solid var(--clair-doux); }
.fil-tours__rang { font: 700 1rem/1 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; }
.fil-tours__nom { color: var(--clair); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; }
.fil-tours__point--actuel::before { background: var(--clair); border-color: var(--clair); }
.fil-tours__point--actuel::after { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 3px; background: var(--clair); }
.fil-tours__point--direct::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 14px var(--signal); }
.fil-tours__point--direct .fil-tours__rang { color: var(--signal); }

/* ---------- formats : une plaque claire au milieu de la nuit ---------- */
.formats { padding: var(--rythme) 0; }
.formats__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 3rem; align-items: end; margin-bottom: 2.5rem; }
.formats__intro { color: var(--clair-doux); }
.plaque { background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); overflow: hidden; }
.plaque--claire { background: var(--plaque-claire); color: var(--nuit); border-color: transparent; box-shadow: var(--ombre); }
.formats__entete, .formats__liste li { display: grid; grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: baseline; padding: 0 1.5rem; }
.formats__entete { padding-block: .8rem; border-bottom: 1px solid rgba(11, 22, 48, .12); font-size: .85rem; font-weight: 600; color: var(--encre-douce); }
.formats__liste { counter-reset: format; }
.formats__liste li { counter-increment: format; padding-block: 1rem; border-bottom: 1px solid rgba(11, 22, 48, .08); transition: background .15s; }
.formats__liste li:last-child { border-bottom: 0; }
.formats__liste li::before { content: counter(format, decimal-leading-zero); display: inline-grid; place-items: center; justify-self: start; min-width: 2.5rem; height: 2rem; padding: 0 .45rem; border-radius: var(--rayon-petit); background: var(--signal); color: var(--nuit); font: 700 1.3rem/1 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; }
.formats__liste li:hover { background: rgba(11, 22, 48, .04); }
.formats__liste h3 { font-size: 1.35rem; letter-spacing: -.02em; }
.formats__liste p { color: var(--encre-douce); }

/* ---------- direct : le champ jaune, la salle imprimée dedans ---------- */
.direct { position: relative; padding: var(--rythme) 0; }
.direct__photo { position: absolute; inset: 0; }
.direct__photo img { height: 100%; object-fit: cover; }
.direct__grille { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem 4rem; align-items: center; }
.ecran.vitre { padding: 0 0 .2rem; text-align: center; }
.direct__liste { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin-top: 3rem; }
.direct__liste li { display: grid; align-content: start; gap: .45rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.direct__quand { font-size: .85rem; font-weight: 600; color: var(--clair-doux); }
.direct__liste h3 { font-size: 1.15rem; }
.direct__liste p:last-child { font-size: .95rem; color: var(--clair-doux); }
.direct--signal { background: var(--signal); color: var(--nuit); }
.direct--signal .direct__photo { -webkit-mask-image: linear-gradient(#000 0%, #000 30%, transparent 62%); mask-image: linear-gradient(#000 0%, #000 30%, transparent 62%); }
.direct--signal .direct__photo img { opacity: .3; filter: grayscale(1) contrast(1.35) brightness(1.05); mix-blend-mode: multiply; }
.direct--signal .ecran { background: linear-gradient(180deg, rgba(238, 242, 248, .08), rgba(238, 242, 248, 0) 32%), var(--grain), rgba(8, 17, 38, .86); color: var(--clair); box-shadow: 0 2px 0 rgba(0, 0, 0, .25), 0 50px 90px -40px rgba(11, 22, 48, .9); }
.direct--signal .direct__liste li { border-top: 2px solid var(--nuit); }
.direct--signal .direct__quand { color: rgba(11, 22, 48, .7); }
.direct--signal .direct__liste h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.direct--signal .direct__liste p:last-child { color: rgba(11, 22, 48, .82); }

/* ---------- manifeste : une photo, et le texte sur sa vitre ---------- */
.manifeste { padding: var(--rythme) 0 calc(var(--rythme) + 2rem); }
.manifeste__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; }
.manifeste__photo { grid-column: 1 / span 8; grid-row: 1; }
.manifeste__photo img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon); filter: contrast(1.08); }
.manifeste__texte { grid-column: 7 / -1; grid-row: 1; align-self: end; display: grid; gap: 1rem; justify-items: start; margin-bottom: -3rem; padding: 2rem; }
.manifeste__texte p:not([class]) { color: var(--clair-doux); }

/* ---------- feuille de route (aperçu de l'accueil ; « .feuille » est le bloc de l'application) ---------- */
.route-apercu { padding: var(--rythme) 0; color: var(--clair); }

/* ---------- bêta : une photo du soir derrière la vitre ---------- */
.beta { position: relative; padding: var(--rythme) 0; color: var(--clair); }
.beta__photo, .beta__fond { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent); }
.beta__photo img, .beta__fond img { height: 100%; object-fit: cover; opacity: .3; filter: saturate(.35) brightness(.7) contrast(1.1); }
.beta__grille { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: center; }
.beta__texte p { margin-top: 1.25rem; max-width: 30rem; font-size: 1.15rem; color: var(--clair-doux); }
.beta__form { padding: 2rem; }
.beta__form label { font: 600 .92rem/1.2 var(--police-texte); color: var(--clair-doux); }
.beta__form input, .beta__form select { border-color: rgba(238, 242, 248, .16); color: var(--clair); background: rgba(7, 16, 34, .6); }
.beta__form select option { color: var(--encre); }
.beta__form .bouton { justify-self: start; }
.beta .contact__avis { color: var(--clair-doux); }

/* =============================================================
   SECTION pied de page
   ============================================================= */
.pied { padding: 4rem 0 5rem; background: var(--nuit-3); color: var(--clair-doux); border-top: 1px solid var(--filet-nuit); }
.pied__grille { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.pied .logo { color: var(--clair); }
.pied__marque p { margin-top: 1rem; max-width: 18rem; }
.pied__colonne { display: grid; align-content: start; gap: .1rem; }
.pied__colonne a { text-decoration: none; }
.pied__colonne a:hover { color: var(--clair); }
.pied__intitule { margin-bottom: .6rem; font: 700 .95rem/1 var(--police-texte); color: var(--clair); }
.pied__mention { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-nuit); font-size: .9rem; }
.pied__mention a { text-decoration: none; }
.pied__mention a:hover, .pied__mention a[aria-current="page"] { color: var(--clair); }

/* =============================================================
   TABLETTE (768 à 1080 px) : une transition, pas une composition
   ============================================================= */
@media (max-width: 1080px) {
  .hero__grille, .etapes__grille, .formats__tete, .direct__grille, .beta__grille { grid-template-columns: minmax(0, 1fr); }
  .tableau { margin-bottom: -6rem; }
  .compteurs { padding-top: calc(6rem + 3rem); }
  .direct__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fil-tours--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; border-top: 0; }
  .fil-tours--4 .fil-tours__point { border-top: 1px solid var(--trait); }
  .manifeste__photo { grid-column: 1 / span 10; }
  .manifeste__texte { grid-column: 4 / -1; }
  .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pied__marque { grid-column: 1 / -1; }
}

/* =============================================================
   MOBILE (390 px) : six décisions
   Ordre : titre, texte, tableau, compteurs. Tableau qui défile
   dans son propre cadre (barre visible). Grilles empilées.
   ============================================================= */
@media (max-width: 760px) {
  .hero { padding-top: calc(76px + 2rem); }
  .hero__grille { gap: 2.5rem; }
  .tableau { margin-bottom: -4rem; }
  .tableau__direct, .tableau__arbre .arbre__defile { padding-inline: 1.1rem; }
  .tableau__score { gap: .5rem; }
  .defilant { font-size: .88rem; }
  .compteurs { padding-top: calc(4rem + 2.5rem); }
  .compteurs__liste { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .publics__grille { grid-template-columns: minmax(0, 1fr); }
  .public:nth-child(2) { margin-top: 0; }
  .fil-tours, .fil-tours--4 { grid-template-columns: minmax(0, 1fr); gap: 2rem; border-top: 0; border-left: 1px solid var(--trait); margin-left: 5px; }
  .fil-tours--4 .fil-tours__point { border-top: 0; }
  .fil-tours__point { padding: 0 0 0 1.5rem; }
  .fil-tours__point::before { top: 2px; left: -6px; }
  .fil-tours__point--actuel::after { top: 0; bottom: 0; left: -2px; right: auto; width: 3px; height: auto; }
  .formats__entete { display: none; }
  .formats__liste li { grid-template-columns: 2.5rem minmax(0, 1fr); padding-inline: 1.1rem; }
  .formats__liste li p { grid-column: 2; }
  .direct__liste { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ecran__equipe { font-size: 1.15rem; }
  .ecran__score { padding: 1.1rem 1rem; gap: .6rem; }
  .manifeste__grille { display: block; }
  .manifeste__texte { position: relative; margin: -3rem 1rem 0; padding: 1.5rem; }
  .beta__form { padding: 1.5rem; }
  /* Deux colonnes égales ; « Contact » (l'adresse, longue) sur toute la largeur : elle n'écrase plus « Aide ». */
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
  .pied__marque, .pied__colonne:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .defilant__piste { animation: none; }
}

/* =============================================================
   PAGES INTÉRIEURES (phase 3)
   Aucun registre nouveau : chaque composant reprend un motif de
   l'accueil validé (filets 1 px, repères carrés, capitales espacées,
   bandes nuit / blanc froid / jaune, un élément qui déborde).
   ============================================================= */

/* Deux variables de contexte : filets et texte secondaire suivent le
   fond de la bande, pour qu'un même composant serve partout. */
:root { --ligne: var(--filet-nuit); --doux: var(--clair-doux); }
.page-tete, .section--nuit, .section--profond, .appel, .panneau, .offre--vedette, .app-sombre { --ligne: var(--filet-nuit); --doux: var(--clair-doux); }
.section--signal, .appel--signal { --ligne: rgba(11, 22, 48, .22); --doux: rgba(11, 22, 48, .78); --choix: var(--nuit); --sur-choix: var(--clair); }

/* ---------- page active et liens dans le texte ---------- */
.navigation__liste a[aria-current="page"] { color: var(--clair); box-shadow: inset 0 -2px 0 var(--clair); }
.pied__colonne a[aria-current="page"] { color: var(--clair); }
main p a:not([class]), main li a:not([class]) { text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--filet-nuit-fort); }
.section--signal p a:not([class]), .appel--signal p a:not([class]) { text-decoration-color: currentColor; }
main p a:not([class]):hover { text-decoration-color: currentColor; }

/* ---------- boutons complémentaires ---------- */
.bouton--contour { border-color: var(--filet-nuit-fort); color: var(--clair); }
.bouton--contour:hover { border-color: var(--clair); background: var(--teinte); color: var(--clair); }
.bouton--nuit { background: var(--choix); color: var(--sur-choix); }
.bouton--nuit:hover { opacity: .88; }
.section--signal .surtitre-a::before, .appel--signal .surtitre-a::before { background: currentColor; }

/* =============================================================
   SECTION page-tete : le hero des pages intérieures
   Règle 3 bis : le h1 occupe 9/12 de la largeur (au moins 8/12),
   le plus long titre tient en trois lignes à 1280 px.
   ============================================================= */
.page-tete { color: var(--clair); padding: clamp(1.5rem, 3vw, 2.5rem) 0 var(--rythme); overflow-x: clip; }
.page-tete__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 2.5vw, 2rem); }
.page-tete__grille > * { grid-column: 1 / -1; }
.ariane { margin-bottom: 1.5rem; }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .7rem; font: 600 .9rem/1 var(--police-texte); color: var(--clair-doux); }
.ariane li { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; }
.ariane li + li::before { content: ''; width: .3rem; height: .3rem; border-radius: 50%; background: var(--clair-doux); }
.ariane a { display: inline-flex; align-items: center; text-decoration: none; }
.ariane a:hover { color: var(--clair); }
.ariane [aria-current] { color: var(--clair); }
.page-tete__grille > .page-tete__titre { grid-column: 1 / span 9; font-size: var(--titre-1); }
.page-tete__grille > .page-tete__chapo { grid-column: 1 / span 6; margin-top: 1.5rem; font-size: 1.15rem; color: var(--clair-doux); }
.page-tete__grille > .page-tete__actions { grid-column: 1 / span 6; display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-tete__grille > .page-tete__fiche { grid-column: 9 / -1; grid-row: 3 / span 2; align-self: start; margin-top: 1.5rem; border-top: 1px solid var(--filet-nuit); }
.page-tete__fiche li { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--filet-nuit); font: 600 1.05rem/1.3 var(--police-texte); }
.page-tete__fiche li::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); }

/* La photo passe derrière le titre, comme la salle de l'accueil : on la
   voit au premier coup d'œil (retour d'Enzo, 2026-10-16). Le panneau
   d'exemple se pose dessus, en vitre, et déborde sur la section suivante. */
body:has(.page-tete--visuel) .entete { position: absolute; top: 0; left: 0; right: 0; background: transparent; }
.page-tete--visuel { position: relative; isolation: isolate; padding: calc(76px + clamp(1.5rem, 3vw, 2.5rem)) 0 clamp(3.5rem, 7vw, 6rem); }
.page-tete--visuel .page-tete__visuel { display: contents; }
.page-tete--visuel .page-tete__photo { position: absolute; inset: 0; z-index: -1; }
.page-tete--visuel .page-tete__photo img { height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.1) brightness(.92); }
.page-tete--visuel .page-tete__photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7, 16, 34, .92) 0%, rgba(7, 16, 34, .72) 42%, rgba(7, 16, 34, .25) 78%, rgba(7, 16, 34, .45) 100%),
              linear-gradient(180deg, rgba(7, 16, 34, .55) 0%, transparent 30%, transparent 62%, var(--nuit-3) 100%);
}
.page-tete--visuel .page-tete__grille > .page-tete__chapo { color: var(--clair); opacity: .88; }
.page-tete--visuel .page-tete__grille > .page-tete__fiche { grid-column: 1 / span 6; grid-row: auto; margin-top: 2.25rem; }
.page-tete--visuel .panneau { grid-column: 8 / -1; grid-row: 3 / span 3; align-self: end; margin-bottom: -6rem; }
.page-tete--visuel:has(.panneau) + section { padding-top: calc(var(--rythme) + 4rem); }

/* =============================================================
   BANDES : le fond porte le poids de la section, jamais le bord
   ============================================================= */
.section { padding: var(--rythme) 0; }
.section--nuit { position: relative; color: var(--clair); }
.section--profond { position: relative; color: var(--clair); }
.section--signal { position: relative; background: var(--signal); color: var(--nuit); }
.section--nuit::before, .section--profond::before {
  content: ''; position: absolute; z-index: -1; inset: clamp(.5rem, 1.5vw, 1.25rem) auto; left: 50%; width: min(100% - 2.5rem, var(--largeur)); transform: translateX(-50%);
  background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre);
}
.section--profond::before { background: var(--nuit-3); }
.section--signal::before, .appel--signal::before { content: none; }
/* Sur le champ jaune : encre nuit, filets nuit, cartes et boutons nuit. */
.section--signal .carte, .appel--signal .carte { background: rgba(11, 22, 48, .06); border-color: rgba(11, 22, 48, .18); border-top-color: var(--nuit); }
.section--signal .lien-fleche, .appel--signal .lien-fleche { border-bottom-color: currentColor; }
.section--signal .bouton--secondaire, .appel--signal .bouton--secondaire { border-color: var(--nuit); color: var(--nuit); }
.section--signal .bouton--secondaire:hover, .appel--signal .bouton--secondaire:hover { background: var(--nuit); color: var(--clair); }
.section--suite { padding-top: 0; }
.section--suite .section__tete { padding-top: 3rem; border-top: 1px solid var(--ligne); }
.section__tete { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem 3rem; align-items: end; margin-bottom: 3rem; }
.section__tete > .surtitre-a { grid-column: 1 / -1; }
.section__titre { font-size: var(--titre-2); }
.section__intro { color: var(--doux); }
.section__pied { margin-top: 2.5rem; }

/* ---------- rangs numérotés (le motif des formats) ---------- */
/* Les listes à consulter passent sur plaque claire, comme les formats de
   l'accueil : elles se détachent de la nuit (retour d'Enzo, 2026-10-16). */
.rangs, .questions { --ligne: rgba(11, 22, 48, .1); --doux: var(--encre-douce); padding: .4rem 1.5rem; background: var(--plaque-claire); color: var(--nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.rangs { counter-reset: rang; }
.rangs__item:last-child, .question:last-child { border-bottom: 0; }
.questions a:not([class]) { text-decoration-color: var(--nuit); }
.rangs__item {
  counter-increment: rang; display: grid; grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 7fr);
  align-items: baseline; gap: 1rem; padding: 1.05rem .75rem; border-bottom: 1px solid var(--ligne);
}
.rangs__item::before { content: counter(rang, decimal-leading-zero); display: inline-grid; place-items: center; justify-self: start; min-width: 2.5rem; height: 2rem; padding: 0 .45rem; border-radius: var(--rayon-petit); background: var(--signal); color: var(--nuit); font: 700 1.3rem/1 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; }
.rangs__nom { font-size: 1.45rem; letter-spacing: -.025em; }
.rangs__item p { color: var(--doux); }

/* ---------- cartes à filet épais (le motif du direct) ---------- */
.cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.cartes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte { display: grid; align-content: start; justify-items: start; gap: .6rem; padding: 1.4rem 1.4rem 1.5rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-top: 3px solid var(--clair); border-radius: var(--rayon-moyen); }
.carte__etiquette { font: 700 .88rem/1 var(--police-texte); color: var(--signal); }
.section--signal .carte__etiquette, .appel--signal .carte__etiquette { color: var(--nuit); }
.carte__nom { margin-top: .2rem; font-size: 1.4rem; }
/* Les cartes d'une même rangée partagent leurs lignes : un titre sur deux
   lignes ne décale plus le texte des cartes voisines (point 9 de l'audit). */
@supports (grid-template-rows: subgrid) {
  .cartes > .carte { grid-row: span 3; grid-template-rows: subgrid; row-gap: .6rem; }
  .cartes > .carte:has(> :nth-child(4)) { grid-row: span 4; }
  .direct__liste li { grid-row: span 3; grid-template-rows: subgrid; row-gap: .45rem; }
}
.carte p:not([class]) { color: var(--doux); }
.carte .lien-fleche { margin-top: .6rem; }

/* ---------- repère de version ---------- */
.version { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font: 600 .85rem/1 var(--police-texte); }
.version::before { content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; border: 2px solid currentColor; }
.version--lancement::before { background: var(--signal); border-color: var(--signal); }
.section--signal .version--lancement::before { background: var(--nuit); border-color: var(--nuit); }

/* ---------- puces carrées ---------- */
.puces { display: grid; gap: .55rem; }
.puces li { display: flex; align-items: baseline; gap: .75rem; }
.puces li::before { content: ''; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--signal); transform: translateY(-.15em); }
.section--signal .puces li::before, .appel--signal .puces li::before { background: var(--nuit); }

/* ---------- jalons (le motif de la feuille de route) ---------- */
.jalons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--ligne); counter-reset: jalon; }
.jalons--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jalons__item { counter-increment: jalon; position: relative; padding: 1.75rem 1.5rem 0 0; }
.jalons__item::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--clair); }
.jalons__nom { margin-bottom: .6rem; font-size: 1.3rem; }
.jalons__nom::before { content: counter(jalon, decimal-leading-zero); display: block; margin-bottom: .6rem; font: 700 1.25rem/1 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; color: var(--signal); }
.section--signal .jalons__nom::before { color: var(--nuit); }
.jalons__item p { color: var(--doux); }

/* ---------- duo texte + photo, grille asymétrique ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 4rem; align-items: center; }
.duo--inverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duo__texte { display: grid; gap: 1.25rem; justify-items: start; }
.duo__texte p:not([class]) { font-size: 1.1rem; color: var(--doux); }
.duo__photo img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.duo__photos { position: relative; padding-bottom: 5rem; }
.duo__photos .duo__photo:first-child img { aspect-ratio: 16 / 10; }
.duo__photos .duo__photo + .duo__photo { position: absolute; right: -2rem; bottom: 0; width: 44%; padding: .5rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.duo__photos .duo__photo + .duo__photo img { aspect-ratio: 1; }
.duo__photos .duo__photo + .duo__photo img, .duo__photos .duo__photo + .duo__photo img { border-radius: var(--rayon-moyen); }

/* ---------- panneau (fond nuit 2, filet 1 px, comme l'arbre) ---------- */
.panneau { color: var(--clair); background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.panneau__entete { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--filet-nuit); font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.panneau__statut { display: flex; align-items: center; gap: .45rem; padding: .75rem 1.25rem 1.1rem; color: var(--signal); font: 600 .85rem/1.2 var(--police-texte); }
.direct-point { display: inline-flex; align-items: center; gap: .45rem; color: var(--signal); }
.direct-point::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: pouls-a 1.6s ease-in-out infinite; }

/* ---------- fonctions par domaine, filtrables par version ---------- */
/* Remplace le tableau dense (retour client du 2026-10-15 : « ça fait un
   peu trop gros document PDF »). Sept domaines en colonnes au lieu de
   27 lignes à la suite. Le filtre suit le défilement et éteint les autres
   versions sans rien retirer : la grille ne saute pas. */
.filtre-versions { position: sticky; top: .75rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: 3rem; padding: .4rem; background: rgba(11, 22, 48, .6); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-bouton); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
.filtre-versions[hidden] { display: none; }
.filtre-versions__intitule { margin: 0 .5rem 0 .75rem; font: 600 .9rem/1 var(--police-texte); color: var(--doux); }
.filtre-versions button { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid transparent; border-radius: var(--rayon-bouton); background: transparent; cursor: pointer; font: 600 1rem/1 var(--police-titre); color: var(--clair); transition: background .2s; }
.filtre-versions button:hover { background: var(--teinte); }
.filtre-versions button[aria-pressed="true"] { background: var(--clair); border-color: var(--clair); color: var(--nuit); }
.filtre-versions__nombre { font-variant-numeric: tabular-nums; color: var(--doux); }
.filtre-versions [aria-pressed="true"] .filtre-versions__nombre { color: var(--encre-douce); }

/* Une plaque par domaine, pleine largeur, de 01 à 07 dans l'ordre de lecture ;
   les fonctions du domaine en grille dessous (point 7 de l'audit : en trois
   colonnes réparties à la main, la première rangée lisait 01, 03, 06, et
   certains titres passaient sur deux lignes). */
.domaines { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.domaines__colonne { display: contents; }
@media (min-width: 761px) {
  .domaine { margin-bottom: 0; padding: 1.75rem 2rem .75rem; }
  .domaine__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.5rem; }
  .domaine__liste .fonction { align-content: start; }
  /* Pas de trait sous la dernière rangée, quelle que soit sa longueur. */
  .domaine__liste .fonction:nth-child(3n+1):nth-last-child(-n+3),
  .domaine__liste .fonction:nth-child(3n+1):nth-last-child(-n+3) ~ .fonction { border-bottom: 0; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .domaine__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .domaine__liste .fonction:nth-child(3n+1):nth-last-child(-n+3),
  .domaine__liste .fonction:nth-child(3n+1):nth-last-child(-n+3) ~ .fonction { border-bottom: 1px solid var(--ligne); }
  .domaine__liste .fonction:nth-child(2n+1):nth-last-child(-n+2),
  .domaine__liste .fonction:nth-child(2n+1):nth-last-child(-n+2) ~ .fonction { border-bottom: 0; }
}
/* Une plaque par domaine : les catégories se détachent (retour d'Enzo, 2026-10-16). */
.domaine { break-inside: avoid; margin-bottom: 1.5rem; padding: 1.5rem 1.5rem .5rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
/* Chaque domaine est un <details> ouvert : au-delà de 760 px il reste
   ouvert et son titre ne replie rien (app.js) ; en dessous, il se déplie
   au toucher, comme la FAQ. */
.domaine__titre { display: flex; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--clair); list-style: none; cursor: default; transition: opacity .3s; }
.domaine__titre::-webkit-details-marker { display: none; }
.domaine__titre h3 { display: flex; align-items: flex-end; gap: .9rem; font-size: 1.8rem; font-weight: 800; letter-spacing: -.03em; }
.domaine__compte { display: none; }
.domaine__numero { flex: none; min-width: 1.1em; font: 700 3.4rem/.8 'Barlow Condensed', 'Barlow Condensed Repli', 'Arial Narrow', sans-serif; font-variant-numeric: tabular-nums; color: var(--signal); }
.fonction {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .4rem 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--ligne); transition: opacity .3s;
}
.fonction__nom { font: 700 1.15rem/1.2 var(--police-titre); }
.fonction__texte { grid-column: 1 / -1; line-height: 1.45; color: var(--doux); }
.fonction:last-child { border-bottom: 0; }
.fonction[data-eteint], .domaine[data-eteint] .domaine__titre { opacity: .25; }

/* ---------- barre de défilement visible ---------- */
/* Les téléphones masquent la barre native des zones qui défilent en
   largeur (demande client du 2026-10-15 : que l'on comprenne qu'on peut
   faire défiler). Elle est dans le HTML, juste après sa zone ; app.js ne
   l'affiche que si le contenu déborde, et règle son curseur. Filet épais
   de 3 px, comme les cartes et l'onglet actif ; jaune sur fond sombre. */
.defilement { --curseur: currentColor; position: relative; height: 4px; margin-top: .75rem; border-radius: 999px; overflow: hidden; }
.defilement[hidden] { display: none; }
.defilement::before { content: ''; position: absolute; inset: 0; background: currentColor; opacity: .18; }
.defilement__curseur { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--curseur); }
.arbre .defilement, .panneau .defilement, .section--nuit .defilement, .app-sombre .defilement, .app-tete .defilement { --curseur: var(--clair); }
.arbre__defile + .defilement { margin: 0 1.4rem 1.25rem; }

/* ---------- questions (FAQ) ---------- */
.question { border-bottom: 1px solid var(--ligne); }
.question summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 64px; padding: 1rem 0; cursor: pointer; list-style: none; font: 600 1.25rem/1.25 var(--police-titre); }
.question summary::-webkit-details-marker { display: none; }
.question summary::after {
  content: ''; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: linear-gradient(var(--nuit), var(--nuit)) center / .8rem 2px no-repeat,
              linear-gradient(var(--nuit), var(--nuit)) center / 2px .8rem no-repeat, var(--signal);
}
.question[open] summary::after { background: linear-gradient(var(--nuit), var(--nuit)) center / .8rem 2px no-repeat, var(--signal); }
.question summary:hover { color: var(--doux); }
.question__reponse { display: grid; gap: .8rem; max-width: 46rem; padding: 0 0 1.5rem; color: var(--doux); }
/* La colonne des questions est étroite (5/12) : son titre descend d'un cran. */
.questions-grille .section__titre { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.5rem); }
.questions-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem 3rem; align-items: start; }

/* ---------- sommaire collant + texte long ---------- */
.sommaire-grille { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: start; }
.sommaire { position: sticky; top: 1.5rem; padding: 1rem 1.25rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-moyen); box-shadow: var(--ombre); }
.sommaire__intitule { margin-bottom: .4rem; font: 600 .9rem/1 var(--police-texte); color: var(--doux); }
.sommaire a { display: flex; align-items: center; border-bottom: 1px solid var(--ligne); text-decoration: none; font: 600 1.05rem/1.2 var(--police-titre); }
.sommaire a:hover { color: var(--doux); }
.groupe + .groupe { margin-top: 4rem; }
.groupe__titre { margin-bottom: 1.5rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); scroll-margin-top: 1.5rem; }
.prose { display: grid; gap: 1rem; max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); scroll-margin-top: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--clair-doux); }
.prose strong { color: var(--clair); font-weight: 600; }
.a-completer { color: var(--clair); font-weight: 600; text-decoration: underline 2px dashed var(--signal); text-underline-offset: .2em; }

/* =============================================================
   SECTION appel : la dernière bande de chaque page
   ============================================================= */
.appel { position: relative; padding: var(--rythme) 0; color: var(--clair); overflow-x: clip; }
.appel__fond { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(transparent, #000 25%, #000 75%, transparent); }
.appel__fond img { height: 100%; object-fit: cover; opacity: .22; }
.appel__grille { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 4rem; align-items: end; }
.appel__titre { font-size: var(--titre-2); }
.appel__texte { display: grid; gap: 1.5rem; justify-items: start; }
.appel__texte p { max-width: 32rem; font-size: 1.15rem; color: var(--doux); }
.appel__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.appel--signal { background: var(--signal); color: var(--nuit); }

/* =============================================================
   PAGES : composants propres à une page
   ============================================================= */

/* ---------- esport : la déclaration de score ---------- */
.declaration__lignes { display: grid; gap: .6rem; padding: 1.1rem 1.25rem; }
.declaration__ligne { display: flex; justify-content: space-between; align-items: center; font: 700 1.6rem/1 var(--police-titre); color: var(--clair-doux); }
.declaration__ligne--gagne { color: var(--clair); }
.declaration__case { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--filet-nuit); border-radius: var(--rayon-petit); background: var(--creux-nuit); font-variant-numeric: tabular-nums; }
.declaration__ligne--gagne .declaration__case { border-color: var(--clair); color: var(--clair); }
.declaration__preuve { display: flex; align-items: center; gap: .6rem; margin: 0 1.25rem; padding: .8rem 0; border-top: 1px solid var(--filet-nuit); font-size: .95rem; color: var(--clair-doux); }
.declaration__preuve::before { content: ''; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: var(--signal); }

/* ---------- sport : le planning des terrains ---------- */
.planning { overflow-x: auto; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.planning__table { width: 100%; min-width: 50rem; border-collapse: collapse; table-layout: fixed; }
.planning__table th, .planning__table td { padding: .6rem; border-bottom: 1px solid var(--filet-nuit); text-align: left; vertical-align: top; }
.planning__table td + td, .planning__table th + th, .planning__table th + td { border-left: 1px solid var(--filet-nuit); }
.planning__table thead th { padding-block: .9rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.planning__table tbody th { width: 6rem; font: 700 1.25rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.planning__table thead th:first-child { width: 6rem; }
.planning .match__poule { padding: .35rem .7rem 0; font: 700 .72rem/1 var(--police-titre); color: var(--clair-doux); }
.planning__legende { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin-top: 1.25rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.planning__legende span { display: inline-flex; align-items: center; gap: .5rem; }
.planning__legende span::before { content: ''; width: .9rem; height: .6rem; border: 1px solid var(--filet-nuit-fort); border-radius: 3px; background: var(--creux-nuit); }
.planning__legende .legende--direct::before { border: 2px solid var(--signal); }
.planning__legende .legende--attente::before { border-style: dashed; background: transparent; }

/* ---------- sport : la saisie au bord du terrain ---------- */
.saisie__score { display: grid; gap: .6rem; padding: 1.1rem 1.25rem; }
.saisie__temps { margin: 0 1.25rem; padding: .8rem 0; border-top: 1px solid var(--filet-nuit); font-size: .95rem; color: var(--clair-doux); }
.disciplines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .1rem 2rem; border-top: 1px solid var(--ligne); }
.disciplines li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--ligne); font: 600 1.1rem/1.2 var(--police-titre); }
.disciplines li::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--signal); }

/* ---------- tarifs : trois niveaux, celui du milieu sort du cadre ---------- */
.offres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 1rem; }
.offre { display: grid; align-content: start; gap: 1rem; padding: 2.25rem 1.75rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.offre + .offre { margin: 0; }
.offre--vedette { --ligne: rgba(11, 22, 48, .12); --doux: var(--encre-douce); --choix: var(--nuit); --sur-choix: var(--clair); margin-block: -1.5rem; padding-block: 3.75rem; background: var(--plaque-claire); border-color: transparent; color: var(--nuit); box-shadow: inset 0 5px 0 var(--signal), var(--ombre); }
.offre--vedette .puces li::before { background: var(--nuit); }
.offre__nom { font-size: 1.6rem; }
.offre__prix { font: 700 3rem/.95 var(--police-titre); }
.offre__prix small { display: block; margin-top: .5rem; font: 500 1rem/1.2 var(--police-texte); color: var(--doux); }
.offre__pour { color: var(--doux); }
.offre .puces { padding-top: 1rem; border-top: 1px solid var(--ligne); }
.offres__note { max-width: 46rem; margin-top: 3rem; color: var(--doux); }

/* ---------- feuille de route : les quatre versions ---------- */
.versions { margin-left: 5px; border-left: 1px solid var(--filet-nuit-fort); }
.version-bloc { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem 3rem; padding: 0 0 4.5rem 2.5rem; }
.version-bloc:last-child { padding-bottom: 0; }
.version-bloc::before { content: ''; position: absolute; left: -6px; top: .2rem; width: 11px; height: 11px; border-radius: 50%; background: var(--nuit-3); border: 2px solid var(--clair-doux); }
.version-bloc--actuel::before { background: var(--clair); border-color: var(--clair); box-shadow: 0 0 14px rgba(238, 242, 248, .6); }
.version-bloc--actuel::after { content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: var(--clair); }
.version-bloc__numero { display: block; font: 800 clamp(3.5rem, 2.5rem + 3vw, 5.5rem)/.9 var(--police-titre); color: transparent; -webkit-text-stroke: 1.5px rgba(238, 242, 248, .45); }
.version-bloc--actuel .version-bloc__numero { color: var(--signal); -webkit-text-stroke: 0; }
.version-bloc__nom { margin-top: 1.1rem; font-size: 1.8rem; }
.version-bloc__tete .version { margin-top: .9rem; }
.version-bloc__corps { display: grid; gap: 1.25rem; justify-items: start; padding-top: .3rem; }
.version-bloc__corps > p { font-size: 1.15rem; color: var(--clair-doux); }

/* ---------- bêta : formulaire complet ---------- */
.contact__form input[type="radio"], .contact__form input[type="checkbox"] { flex: none; width: 1.2rem; height: 1.2rem; margin: 0; padding: 0; accent-color: var(--clair); }
.contact__groupe { display: grid; gap: .35rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.contact__groupe legend { padding: 0; margin-bottom: .35rem; }
.contact__choix { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.contact__choix p, .contact__accord { display: flex; align-items: center; gap: .6rem; }
.contact__form textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--creux-nuit); resize: vertical; }
.beta__form legend { font: 600 .9rem/1 var(--police-texte); color: var(--clair-doux); }
.beta__form textarea { border-color: var(--filet-nuit); color: var(--clair); background: var(--creux-nuit); }
.beta__form .contact__choix label, .beta__form .contact__accord label {
  display: inline-flex; align-items: center; font: 500 1rem/1.35 var(--police-texte); text-transform: none; letter-spacing: 0; color: var(--clair);
}
.beta__form .contact__accord { align-items: flex-start; }
.beta__form .contact__accord input { margin-top: .75rem; }
.inscription__grille { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem 4rem; align-items: start; }
.inscription__aside { display: grid; gap: 1.5rem; padding: 1.75rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.inscription__aside h2 { font-size: 1.8rem; }
.inscription__aside .puces li { font-size: 1.1rem; }

/* =============================================================
   PAGES INTÉRIEURES · TABLETTE (≤ 1080 px)
   ============================================================= */
@media (max-width: 1080px) {
  .page-tete__grille > .page-tete__titre { grid-column: 1 / -1; }
  .page-tete__grille > .page-tete__chapo, .page-tete__grille > .page-tete__actions { grid-column: 1 / span 10; }
  .page-tete__grille > .page-tete__fiche { grid-column: 1 / span 10; grid-row: auto; margin-top: 2.5rem; }
  .page-tete--visuel .panneau { grid-column: 1 / span 8; grid-row: auto; margin: 2.5rem 0 -4rem; }
  .section__tete, .duo, .duo--inverse, .appel__grille, .sommaire-grille, .questions-grille, .inscription__grille, .version-bloc { grid-template-columns: minmax(0, 1fr); }
  .cartes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jalons { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.5rem; }
  .offres { grid-template-columns: minmax(0, 1fr); }
  .offre + .offre { margin: 0; }
  .offre--vedette { margin-block: 0; }
  .sommaire { position: static; }
  .duo__photos .duo__photo + .duo__photo { right: 0; }
}

/* =============================================================
   PAGES INTÉRIEURES · MOBILE (390 px)
   Mêmes décisions que l'accueil : texte puis visuel, grilles
   empilées, débordement conservé, tableaux qui défilent dans
   leur propre conteneur.
   ============================================================= */
@media (max-width: 760px) {
  /* La plaque d'une section foncée devient une bande : ni trait ni coin
     arrondi contre le bord de l'écran (effet « coupé », point 2 de l'audit). */
  .section--nuit::before, .section--profond::before { width: 100%; border-inline: 0; border-radius: 0; }
  .page-tete__grille { grid-template-columns: minmax(0, 1fr); }
  .page-tete__grille > *, .page-tete__grille > .page-tete__titre, .page-tete__grille > .page-tete__chapo,
  .page-tete__grille > .page-tete__actions, .page-tete__grille > .page-tete__fiche { grid-column: 1 / -1; }
  .page-tete--visuel { padding-top: calc(76px + 1.5rem); }
  .page-tete--visuel .page-tete__grille > .page-tete__fiche { grid-column: 1 / -1; }
  .page-tete--visuel .panneau { grid-column: 1 / -1; margin: 2.5rem 0 -3rem; }
  .page-tete--visuel:has(.panneau) + section { padding-top: calc(var(--rythme) + 3rem); }
  .cartes, .cartes--2, .cartes--4 { grid-template-columns: minmax(0, 1fr); }
  .rangs, .questions { padding-inline: 1.1rem; }
  .rangs__item { grid-template-columns: 3.1rem minmax(0, 1fr); padding-inline: 0; }
  .rangs__item > :last-child { grid-column: 2; }
  .jalons, .jalons--3 { grid-template-columns: minmax(0, 1fr); gap: 2rem; border-top: 0; border-left: 1px solid var(--ligne); }
  .jalons__item { padding: 0 0 0 1.5rem; }
  .jalons__item::before { top: 2px; left: -6px; }
  /* Domaines empilés et dépliables : aucun défilement horizontal
     (retour client du 2026-10-15). Filtre sur une seule ligne. */
  .domaines { gap: .75rem; }
  .domaine { margin-bottom: 0; padding: .25rem 1.1rem; }
  .domaine__titre { align-items: center; gap: .75rem; min-height: 72px; padding: .9rem 0; border-bottom: 0; cursor: pointer; }
  .domaine[open] .domaine__titre { border-bottom: 2px solid var(--clair); }
  .domaine__titre h3 { flex: 1; min-width: 0; align-items: center; font-size: 1.45rem; }
  .domaine__numero { font-size: 2.5rem; }
  /* Largeur fixe, calée à droite : les « N fonctions » s'alignent d'un domaine à l'autre (point 6 de l'audit). */
  .domaine__compte { display: block; flex: none; width: 4.4rem; text-align: right; font: 700 .8rem/1 var(--police-titre); color: var(--doux); white-space: nowrap; }
  .domaine__titre::after {
    content: ''; flex: none; width: 1rem; height: 1rem;
    background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
                linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  }
  .domaine[open] .domaine__titre::after { background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
  .domaine[open] .domaine__liste { padding-bottom: 2rem; }
  .filtre-versions { display: grid; grid-template-columns: repeat(5, auto); gap: .3rem; margin-bottom: .5rem; padding: .35rem; border-radius: var(--rayon-moyen); }
  .filtre-versions__intitule { display: none; }
  .filtre-versions button { display: grid; justify-items: center; align-content: center; gap: .3rem; min-height: 56px; padding: .4rem .5rem; border-radius: var(--rayon-petit); }
  .question summary { font-size: 1.25rem; }
  .disciplines { grid-template-columns: minmax(0, 1fr); }
  .offre { padding: 1.75rem 1.25rem; }
  .version-bloc { padding: 0 0 3.5rem 1.5rem; }
  .duo__photos .duo__photo + .duo__photo { width: 52%; }
  .beta__form .contact__accord input { margin-top: .1rem; }
}

/* ---------- bêta : bande du formulaire ---------- */
.inscription { position: relative; overflow-x: clip; }
.inscription .contact__avis { color: var(--clair-doux); }

/* =============================================================
   MAQUETTES D'APPLICATION (app/*.html)
   Mêmes invariants que la vitrine. Fond bleu nuit sur les quatre
   écrans (décision du client, 2026-10-15) : le jaune y reste la seule
   couleur, réservée au direct, à l'action et à l'équipe suivie. Le
   bandeau jaune dit, sur chaque écran, qu'il s'agit d'une maquette.
   ============================================================= */
.app, .demo, .ecran { --surface: var(--teinte); --creux: var(--creux-nuit); --texte: var(--clair); --texte-doux: var(--clair-doux); --trait: var(--filet-nuit); --trait-fort: var(--filet-nuit-fort); --choix: var(--clair); --sur-choix: var(--nuit); --ligne: var(--trait); --doux: var(--texte-doux); }
.app { color: var(--clair); }
/* Les zones de travail (formulaires, règlement, listes à gérer) passent sur
   une feuille blanc froid : mêmes composants, couleurs inversées par les
   variables. Décision du client, 2026-10-15 (fonds, option a). */
.surface-claire { --surface: rgba(11, 22, 48, .04); --creux: rgba(255, 255, 255, .72); --texte: var(--encre); --texte-doux: var(--encre-douce); --trait: rgba(11, 22, 48, .12); --trait-fort: rgba(11, 22, 48, .34); --choix: var(--nuit); --sur-choix: var(--clair); --ligne: var(--trait); --doux: var(--encre-douce); background: var(--plaque-claire); color: var(--encre); }
.feuille { padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid rgba(255, 255, 255, .5); border-radius: var(--rayon); box-shadow: var(--ombre); }
.feuille > .bloc__tete { padding: 0 0 1rem; }
.feuille > .bloc__corps { padding: 1.25rem 0 0; }
.surface-claire .puces li::before { background: var(--encre-douce); }
.surface-claire input, .surface-claire textarea { color-scheme: light; }
/* Les informations n'ont pas de boîte : un titre, des filets, rien d'autre. */
.info .bloc__tete { padding: 0 0 .8rem; border-bottom: 1px solid var(--trait); }
.info .bloc__corps { padding: 1rem 0 0; }
.app .bouton--secondaire { border-color: var(--trait-fort); color: var(--texte); }
.app .bouton--secondaire:hover { border-color: var(--texte); }
.app .lien-fleche { color: var(--texte); border-bottom-color: var(--trait-fort); }
.app .lien-fleche:hover { border-bottom-color: var(--texte); }
button.lien-fleche { padding: 0 0 .3rem; border: 0; border-bottom: 1px solid var(--trait-fort); background: none; cursor: pointer; }
.app [hidden] { display: none !important; }
.maquette-bandeau { background: var(--nuit-3); color: var(--clair-doux); border-bottom: 1px solid var(--filet-nuit); }
.maquette-bandeau__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.75rem; font: 500 .9rem/1 var(--police-texte); }
.maquette-bandeau__mention { display: inline-flex; align-items: center; gap: .55rem; margin-right: auto; min-height: 44px; }
.maquette-bandeau__mention::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.maquette-bandeau__ecrans { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.maquette-bandeau a { display: inline-flex; align-items: center; text-decoration: none; }
.maquette-bandeau a[aria-current="page"] { color: var(--clair); box-shadow: inset 0 -2px 0 var(--clair); }
.maquette-bandeau a:hover { color: var(--clair); }

.app-entete { background: rgba(7, 16, 34, .82); color: var(--clair); border-bottom: 1px solid var(--filet-nuit); }
.app-entete__barre { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2.5rem; min-height: 68px; }
.app-entete__nav { display: flex; gap: 1.6rem; margin-right: auto; }
.app-entete__nav a { display: inline-flex; align-items: center; text-decoration: none; font: 500 1rem/1 var(--police-texte); color: var(--clair-doux); }
.app-entete__nav a:hover { color: var(--clair); }
.app-entete__nav a[aria-current="page"] { color: var(--clair); box-shadow: inset 0 -2px 0 var(--clair); }
.app-compte { display: flex; align-items: center; gap: .65rem; font: 600 .95rem/1 var(--police-texte); }
.app-avatar { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--clair); color: var(--nuit); font: 700 .9rem/1 var(--police-titre); }
.app-pied { padding: 1rem 0; background: rgba(7, 16, 34, .55); color: var(--clair-doux); font-size: .9rem; border-top: 1px solid var(--filet-nuit); }
.app-pied__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 2rem; }
.app-pied a { display: inline-flex; align-items: center; text-decoration: none; }
.app-pied a:hover { color: var(--clair); }

/* ---------- tête d'écran : le h1 d'un écran est un titre de section ---------- */
.app-tete { color: var(--clair); padding-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.app-tete__haut { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; align-items: end; padding-bottom: 2rem; }
.app-tete__chemin { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .7rem; margin-bottom: .75rem; font: 600 .9rem/1 var(--police-texte); color: var(--clair-doux); }
.app-tete__chemin a { display: inline-flex; align-items: center; text-decoration: none; }
.app-tete__chemin a:hover { color: var(--clair); }
.app-tete__chemin > * + *::before { content: ''; display: inline-block; width: .3rem; height: .3rem; margin-right: .7rem; border-radius: 50%; background: var(--clair-doux); vertical-align: middle; }
.app-tete__titre { font-size: var(--titre-2); }
.app-tete__infos { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin-top: 1rem; color: var(--clair-doux); }
.app-tete__infos li { display: flex; align-items: center; gap: .6rem; }
.app-tete__infos li::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: var(--clair-doux); }
.app-tete__resume { margin-top: 1rem; font-size: 1.15rem; color: var(--clair-doux); }
.app-tete__resume strong { color: var(--clair); font-weight: 600; }
.app-tete__cote { display: grid; justify-items: end; gap: 1rem; }
.app-tete__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* La page publique s'ouvre comme une affiche : photo, titre en grand. */
.app-tete--affiche { position: relative; overflow: hidden; padding-top: clamp(3rem, 7vw, 5.5rem); }
.app-tete__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; -webkit-mask-image: linear-gradient(#000 35%, transparent); mask-image: linear-gradient(#000 35%, transparent); }
.app-tete--affiche > .enveloppe { position: relative; }
.app-tete--affiche .app-tete__titre { font-size: var(--titre-1); }

/* ---------- états : jamais la couleur seule, toujours un libellé ---------- */
.etat { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font: 600 .85rem/1 var(--police-texte); }
.etat::before { content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.etat--direct { color: var(--signal); }
.etat--direct::before { border-radius: 50%; background: var(--signal); animation: pouls-a 1.6s ease-in-out infinite; }
.etat--ouvert::before { background: currentColor; }
.etat--brouillon::before { background: transparent; border: 2px solid currentColor; }
.etat--fini { color: var(--doux); }
.etat--litige::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(var(--nuit), var(--nuit)) center 3px / 2px 8px no-repeat, linear-gradient(var(--nuit), var(--nuit)) center 13px / 2px 2px no-repeat, var(--signal); }

/* ---------- onglets et étapes ---------- */
.onglets__liste { display: flex; gap: 0 1.75rem; overflow-x: auto; border-bottom: 1px solid var(--filet-nuit); }
.onglets__liste [role="tab"] { flex: none; display: inline-flex; align-items: center; gap: .7rem; min-height: 52px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--clair-doux); font: 700 1.05rem/1 var(--police-titre); box-shadow: inset 0 -3px 0 transparent; transition: color .2s, box-shadow .2s; }
.onglets__liste [role="tab"]:hover { color: var(--clair); }
.onglets__liste [aria-selected="true"] { color: var(--clair); box-shadow: inset 0 -3px 0 var(--clair); }
.onglets__liste--etapes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1rem; }
.etape__num { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border: 1px solid var(--filet-nuit-fort); border-radius: 50%; font: 700 .95rem/1 var(--police-titre); }
.est-fait .etape__num { border-color: var(--clair-doux); color: var(--clair); }
[aria-selected="true"] .etape__num { background: var(--clair); border-color: var(--clair); color: var(--nuit); }

/* ---------- corps d'écran ---------- */
.app-corps { padding: 2.5rem 0 var(--rythme); }
.app-sombre { color: var(--clair); }
.app-grille { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 2rem; align-items: start; }
.app-grille--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.app-pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-content: start; }
.bloc { border: 1px solid var(--ligne); }
.bloc__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ligne); }
.bloc__titre { font-size: 1.35rem; }
.bloc__corps { padding: 1.25rem; }
.bloc__corps > * + * { margin-top: 1rem; }
.bloc__note { font-size: .95rem; color: var(--doux); }
.bouton--petit { min-height: 44px; padding: 0 1rem; font-size: .95rem; }
.lien-discret { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--clair-doux); font: 500 .95rem/1.2 var(--police-texte); text-decoration: underline; text-underline-offset: .25em; }
.lien-discret:hover { color: var(--clair); }
.app .ecran { box-shadow: none; }
.app .ecran__equipe { font-size: 1.5rem; }
.app .ecran__entete { flex-wrap: wrap; }
.ecran__droite { text-align: right; }
.ecran__joueurs { margin-top: .4rem; font: 500 .9rem/1.3 var(--police-texte); text-transform: none; color: var(--clair-doux); }

/* ---------- frise des tours (écrans A et D) : où en est le tournoi ---------- */
.frise-tours { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--filet-nuit-fort); }
.frise-tours__tour { position: relative; display: grid; gap: .5rem; padding: 1.3rem 1rem 0 0; }
.frise-tours__tour::before { content: ''; position: absolute; z-index: 1; top: -7px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--nuit-3); border: 2px solid var(--clair-doux); }
.frise-tours__tour.est-fini::after, .frise-tours__tour.est-en-cours::after { content: ''; position: absolute; top: -2px; left: 0; height: 3px; }
.frise-tours__tour.est-fini::after { right: 0; background: var(--clair); }
.frise-tours__tour.est-en-cours::after { right: 50%; background: var(--signal); }
.frise-tours__tour.est-fini::before { background: var(--clair); border-color: var(--clair); }
.frise-tours__tour.est-en-cours::before { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 14px rgba(255, 212, 0, .6); }
/* Une étape ouverte mais pas en direct (inscriptions) : blanc, pas jaune. */
.frise-tours__tour.est-ouvert::after { content: ''; position: absolute; top: -2px; left: 0; right: 50%; height: 3px; background: var(--clair); }
.frise-tours__tour.est-ouvert::before { background: var(--clair); border-color: var(--clair); }
.frise-tours__nom { font: 700 1.3rem/1.1 var(--police-titre); }
.frise-tours__etat { font: 600 .85rem/1.2 var(--police-texte); color: var(--clair-doux); }
.est-fini .frise-tours__nom { color: var(--clair-doux); }
.est-en-cours .frise-tours__etat { color: var(--signal); }

/* ---------- écran A : partage, maintenant, arbre, matchs, équipes ---------- */
.partage { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: center; margin-bottom: 2rem; padding: 1.5rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.partage__texte { display: grid; gap: .9rem; justify-items: start; }
.partage__titre { font: 700 1.35rem/1.1 var(--police-titre); }
.partage__lien { padding: .75rem .9rem; border: 1px dashed var(--filet-nuit-fort); border-radius: var(--rayon-petit); background: var(--creux-nuit); font: 600 1rem/1.2 var(--police-titre); word-break: break-all; }
.partage__qr { display: block; width: 9.5rem; height: 9.5rem; border-radius: var(--rayon-petit); }

.maintenant { padding: 2.25rem 0 2.75rem; border-top: 1px solid var(--filet-nuit); }
.maintenant__grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 2rem; margin-bottom: 2.75rem; }
.ecran--lien { display: block; color: var(--clair); text-decoration: none; transition: border-color .2s; }
.ecran--lien:hover { border-color: var(--clair); }
.ecran--lien .ecran__equipe:last-child { text-align: right; }
.ecran__voir { color: var(--clair); }
.ecran__voir::after { content: ' →'; }
.prochain { display: grid; align-content: center; gap: .7rem; padding: .5rem 0 .5rem 2rem; border-left: 1px solid var(--filet-nuit); }
.prochain__etiquette { font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.prochain__nom { font: 700 2.1rem/1.05 var(--police-titre); }
.prochain__quand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.prochain__heure { font: 700 3rem/.95 var(--police-titre); }
.prochain__decompte { font: 600 1.05rem/1.2 var(--police-texte); color: var(--clair-doux); }
.prochain__equipes { color: var(--clair-doux); }
.prochain__equipes .est-qualifiee { color: var(--clair); font-weight: 600; }

.tournoi-corps { padding-top: 0; }
.tournoi-corps .onglets__liste { margin-bottom: 2rem; }
.tournoi-corps .onglets__liste + .defilement { margin: -1.5rem 0 1.5rem; }
a.match { display: block; color: inherit; text-decoration: none; transition: border-color .2s; }
a.match:hover { border-color: var(--clair); }
a.match.match--direct:hover { border-color: var(--signal); }
.arbre--grand .arbre__defile { padding: 1.75rem 1.75rem 2rem; }
.arbre--grand .arbre__tours { --ecart: 3.5rem; grid-template-columns: repeat(3, minmax(13rem, 1fr)); min-width: 46rem; }
.arbre--grand .arbre__intitule { margin-bottom: .9rem; font-size: .9rem; }
.arbre--grand .arbre__case { padding-block: .6rem; }
.arbre--grand .match__ligne { padding: .75rem .95rem; font-size: 1.08rem; }
.arbre--grand .match__score { font-size: 1.4rem; }

.ligne-match { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 5rem minmax(0, 1fr) 8.5rem; align-items: center; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 1px solid var(--ligne); color: inherit; text-decoration: none; }
a.ligne-match:hover { background: var(--creux); }
.ligne-match__heure { font: 600 .95rem/1 var(--police-titre); color: var(--doux); }
.ligne-match__equipe { font: 600 1.1rem/1.15 var(--police-titre); }
.ligne-match__equipe--a { text-align: right; }
.ligne-match__equipe.est-perdant { color: var(--doux); }
.ligne-match__score { text-align: center; font: 700 1.4rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.ligne-match.est-en-cours .ligne-match__score { color: var(--signal); }
.ligne-match__etat { justify-self: end; }
.tour-titre { padding: 1.5rem 1.25rem .6rem; font-size: 1.05rem; color: var(--doux); }
.equipes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1.25rem; }
.equipe { display: grid; gap: .45rem; align-content: start; justify-items: start; padding: 1rem 1.1rem; border: 1px solid var(--ligne); border-radius: var(--rayon-moyen); background: var(--creux); }
.equipe__graine { font: 600 .8rem/1 var(--police-texte); color: var(--doux); }
.equipe__nom { font-size: 1.25rem; }
.equipe__joueurs { font-size: .95rem; color: var(--doux); }
.equipe .etat { margin-top: .35rem; }
.equipe.est-eliminee .equipe__nom { color: var(--doux); }

/* ---------- écran C : rôle, action, piste de manches, déclaration ---------- */
.role { display: grid; gap: .45rem; padding: .9rem 1.25rem; border: 1px solid var(--filet-nuit-fort); border-radius: var(--rayon-moyen); background: var(--plaque); }
.role__etiquette { font: 600 .82rem/1 var(--police-texte); color: var(--clair-doux); }
.role__nom { font: 700 1.5rem/1.1 var(--police-titre); }
.bande-action { padding-top: 1.25rem; }
.bande-action__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 2rem; width: calc(100% - 2 * var(--gouttiere)); max-width: calc(var(--largeur) - 2 * var(--gouttiere)); padding: 1rem 1.25rem; background: var(--signal); color: var(--nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.bande-action p { font-size: 1.1rem; }
.bande-action strong { margin-right: .3rem; font: 800 1.2rem/1 var(--police-titre); letter-spacing: -.02em; }
.bande-action .bouton--nuit { background: var(--nuit); color: var(--clair); }
.bande-action .bouton--nuit:hover { background: var(--nuit-2); opacity: 1; }
.piste-manches { display: flex; gap: .35rem; margin-top: .8rem; }
.ecran__droite .piste-manches { justify-content: flex-end; }
.piste-manches span { width: 1.15rem; height: .45rem; border: 1px solid var(--clair-doux); border-radius: 999px; }
.piste-manches .est-gagnee { background: var(--signal); border-color: var(--signal); }
.declarer { scroll-margin-top: 1rem; }
.declarer__form { display: grid; gap: 1.5rem; }
.declarer__form > * + * { margin-top: 0; }
.declarer__scores { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 1rem; }
.declarer__equipe { display: grid; justify-items: center; gap: .6rem; }
.declarer__equipe label { display: flex; align-items: center; font: 700 1.25rem/1.1 var(--police-titre); }
.declarer__sep { padding-bottom: .9rem; font: 700 2.6rem/1 var(--police-titre); color: var(--texte-doux); }
.depot { display: grid; gap: .75rem; }
.depot__zone { display: grid; place-items: center; gap: .35rem; padding: 1.4rem 1rem; border: 1px dashed var(--texte-doux); border-radius: var(--rayon-moyen); text-align: center; cursor: pointer; transition: border-color .2s; }
.depot__zone:hover, .depot:focus-within .depot__zone { border-color: var(--texte); }
.depot__titre { font: 600 1.05rem/1.2 var(--police-titre); }
.depot__aide { font-size: .9rem; color: var(--texte-doux); }
.depot__fichier { display: flex; align-items: center; gap: 1rem; padding: .75rem; background: var(--creux); border: 1px solid var(--trait); border-radius: var(--rayon-petit); }
.depot__fichier p { display: grid; gap: .25rem; }
.depot__fichier strong { font: 700 1rem/1.2 var(--police-titre); }
.depot__fichier span { font-size: .85rem; color: var(--texte-doux); }
.depot__miniature { flex: none; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-content: center; gap: .4rem; width: 7.5rem; height: 4.2rem; border-radius: 8px; background: var(--nuit); font: 600 .6rem/1 var(--police-texte); color: var(--clair-doux); }
.depot__miniature b { font-size: 1.05rem; color: var(--clair); }
.declarer__attente { display: grid; gap: 1rem; justify-items: start; }
.declarer__attente > * + * { margin-top: 0; }
.declarer__resume { font: 600 1.15rem/1.35 var(--police-texte); }
/* Un état peut être une phrase : il revient à la ligne au lieu de déborder. */
.declarer__attente > .etat { white-space: normal; align-items: baseline; line-height: 1.3; }
.manches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; padding: 1rem 0 0; }
.manche { display: grid; align-content: start; gap: .45rem; padding: .9rem .8rem; border: 1px solid var(--trait); border-radius: var(--rayon-moyen); background: var(--surface); }
.manche__num { font: 600 .8rem/1 var(--police-texte); color: var(--texte-doux); }
.manche__score { font: 700 1.75rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.manche__vainqueur { font: 600 .95rem/1.2 var(--police-texte); }
.manche__etat { font-size: .8rem; line-height: 1.3; color: var(--texte-doux); }
.manche.est-confirmee .manche__etat::before { content: ''; display: inline-block; width: 4px; height: 8px; margin: 0 7px 2px 2px; border: solid var(--texte); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.manche.est-en-cours { border-color: var(--signal); box-shadow: var(--halo-signal); }
.manche.est-en-cours .manche__score { font-size: 1.3rem; color: var(--signal); }
.manche.est-eventuelle { background: transparent; border-style: dashed; }
.manche.est-eventuelle .manche__score, .manche.est-eventuelle .manche__vainqueur { color: var(--texte-doux); }
.verifs li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: .2rem .8rem; padding: .85rem 0; border-bottom: 1px solid var(--ligne); }
.bloc__corps.verifs > * + * { margin-top: 0; }
.verifs li:first-child { padding-top: 0; }
.verifs li:last-child { padding-bottom: 0; border-bottom: 0; }
.verifs li::before { content: ''; grid-row: 1 / 3; grid-column: 1; align-self: start; width: 24px; height: 24px; border-radius: 50%; background: var(--texte); }
.verifs li::after { content: ''; grid-row: 1 / 3; grid-column: 1; align-self: start; justify-self: start; width: 6px; height: 12px; margin: 5px 0 0 9px; border: solid var(--creux); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.verifs strong { font: 600 1rem/1.3 var(--police-texte); }
.verifs span { font-size: .92rem; color: var(--texte-doux); }
.fil li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--ligne); font-size: .95rem; color: var(--doux); }
.bloc__corps.fil > * + * { margin-top: 0; }
.fil li:first-child { padding-top: 0; }
.fil time { font: 600 .95rem/1.5 var(--police-titre); color: var(--texte); }

/* ---------- écran C : vérifier, contester, trancher, outils, cartes ---------- */
.actions-ligne { display: flex; flex-wrap: wrap; gap: .75rem; }
.champ-groupe { display: grid; gap: .8rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ-groupe legend { margin-bottom: .8rem; padding: 0; font: 600 .9rem/1.2 var(--police-texte); color: var(--texte-doux); }
.champ textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--creux); color: var(--texte); font: 500 1rem/1.45 var(--police-texte); resize: vertical; }
.champ textarea:focus-visible { outline: 2px solid var(--choix); outline-offset: 0; }
.app .bouton--secondaire[aria-pressed="true"] { background: var(--choix); border-color: var(--choix); color: var(--sur-choix); }
.manche__carte { font: 600 .82rem/1.2 var(--police-texte); color: var(--texte-doux); }
.comparaison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.comparaison__version { display: grid; align-content: start; justify-items: start; gap: .6rem; padding: 1rem; background: var(--creux); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); }
.comparaison__qui { font: 600 .82rem/1.3 var(--police-texte); color: var(--texte-doux); }
.comparaison__score { font: 700 2.6rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.comparaison__raison { font-size: .92rem; color: var(--texte-doux); }
.verifier__declaration { display: grid; justify-items: start; gap: 1rem; }
.verifier__score { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.verifier__equipe { font: 700 1.25rem/1.1 var(--police-titre); }
button.depot__fichier { width: 100%; max-width: 30rem; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s; }
button.depot__fichier:hover { border-color: var(--texte-doux); }
.depot__fichier .depot__miniature { font-size: .6rem; color: var(--clair-doux); }
.depot__miniature span { font-size: inherit; color: inherit; }
.depot__miniature b { white-space: nowrap; }
.verifier__fichier { display: grid; gap: .25rem; }
.depot__miniature--grande { width: 100%; max-width: 30rem; height: auto; aspect-ratio: 16 / 9; gap: 1rem; font-size: 1rem; }
.depot__miniature--grande b { font-size: 3rem; }
.verifier__delai strong { font: 700 1.15rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.outils { display: grid; gap: .8rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); }
.outils__titre { font: 600 .9rem/1 var(--police-texte); color: var(--texte-doux); }
.outils__liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.outils__bouton { min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-bouton); background: none; color: var(--texte); cursor: pointer; font: 600 .95rem/1 var(--police-titre); }
.outils__bouton:hover { border-color: var(--texte); }
.outils__bouton[aria-expanded="true"] { background: var(--choix); border-color: var(--choix); color: var(--sur-choix); }
.outil { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1rem; padding: 1.1rem; background: var(--creux); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); }
.outil > * { max-width: 100%; }
.outil > .champ-groupe { width: 100%; }
.outil__titre { font: 700 1.2rem/1.1 var(--police-titre); }
.outil__consequence { font-weight: 600; }
.outil--seul { margin-top: 1rem; padding: 1.25rem; }
.match-liens { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding-top: 1rem; }
.veto__ouvrir, .veto { margin-top: 1.25rem; }
.veto__tours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; }
.veto__tour { display: grid; align-content: start; gap: .35rem; padding-top: .6rem; border-top: 3px solid var(--filet-nuit); font: 600 .85rem/1.2 var(--police-texte); color: var(--clair-doux); transition: color .3s, border-color .3s; }
.veto__tour b { font-size: 1.4rem; color: var(--clair); }
.veto__tour[data-courant] { border-top-color: var(--clair); color: var(--clair); }
.veto__cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .6rem; }
.veto__carte { display: grid; align-content: space-between; gap: .8rem; min-height: 5.5rem; padding: .8rem .9rem; border: 1px solid var(--filet-nuit); border-radius: var(--rayon-moyen); background: var(--teinte); transition: opacity .35s, border-color .3s, box-shadow .3s; }
.veto__nom { font: 700 1.15rem/1.1 var(--police-titre); }
.veto__qui { font: 600 .82rem/1.2 var(--police-texte); color: var(--clair-doux); }
.veto__carte[data-eteint] .veto__nom { text-decoration: line-through; text-decoration-thickness: 2px; }
.veto__carte[data-gagnant] { border-color: var(--clair); }
.veto__carte[data-gagnant] .veto__qui { color: var(--clair); }
.veto__carte[data-courant] { box-shadow: 0 0 0 2px var(--clair); }

/* ---------- écran A : moments, inscription, alertes, suivre, podium ---------- */
.tournoi-tete__cloture { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem; font: 600 1rem/1.2 var(--police-texte); }
.tournoi-tete__cloture::before { content: ''; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clair); }
.panneau-tete { margin-bottom: 2rem; }
.formulaire-app { display: grid; gap: 1.5rem; }
.bloc__corps.formulaire-app > * + * { margin-top: 0; }
.formulaire-app__compte { color: var(--texte-doux); }
.formulaire-app__compte strong { color: var(--texte); }
.champs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.formulaire-app .champ input, .formulaire-app .champ select { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--creux); color: var(--texte); font: 500 1.05rem/1.3 var(--police-texte); }
.formulaire-app .champ input:focus-visible, .formulaire-app .champ select:focus-visible { outline: 2px solid var(--choix); outline-offset: 0; }
.case { position: relative; margin: 0; }
.case input { position: absolute; top: .2rem; left: .2rem; opacity: 0; }
.case label { position: relative; display: inline-block; min-height: 1.5rem; padding-left: 2.1rem; cursor: pointer; font-weight: 600; }
.case label::before { content: ''; position: absolute; top: 1px; left: 0; width: 22px; height: 22px; border: 2px solid var(--texte-doux); border-radius: 6px; background: var(--creux); }
.case input:checked + label::before { background: var(--choix); border-color: var(--choix); }
.case input:checked + label::after { content: ''; position: absolute; top: 6px; left: 8px; width: 6px; height: 11px; border: solid var(--sur-choix); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.case input:focus-visible + label::before { outline: 2px solid var(--choix); outline-offset: 2px; }
.lien-equipe { padding: .75rem .9rem; border: 1px dashed var(--trait-fort); border-radius: var(--rayon-petit); background: var(--creux); font: 600 1.05rem/1.2 var(--police-titre); overflow-wrap: anywhere; }
.etats-contenu { display: contents; }
.etats-contenu > [data-etat="vide"] { display: none; }
.equipe--vous { border-color: var(--clair); box-shadow: 0 0 0 1px var(--clair); }
.equipe .bouton { margin-top: .5rem; }
.tournoi__resume { padding: 0 1.25rem 1rem; color: var(--clair-doux); }
.tournoi__resume strong { color: var(--clair); }
.jauge-places { display: grid; align-content: center; justify-items: start; gap: .8rem; }
.jauge-places__compte { font: 600 1.1rem/1.2 var(--police-texte); color: var(--clair-doux); }
.jauge-places__compte strong { margin-right: .4rem; font: 700 4rem/.9 var(--police-titre); color: var(--clair); }
.jauge-places__cases { display: flex; flex-wrap: wrap; gap: .45rem; }
.jauge-places__cases span { width: 2.4rem; height: 2.4rem; border: 1px dashed var(--clair-doux); border-radius: 8px; }
.jauge-places__cases .est-plein { background: var(--clair); border: 1px solid var(--clair); }
.tirage { display: grid; justify-items: start; gap: .7rem; margin-bottom: 2.75rem; padding-top: 1.75rem; border-top: 1px solid var(--filet-nuit); }
.tirage__quand { font: 600 1.15rem/1.4 var(--police-texte); }
.tirage__format { font: 600 1rem/1.3 var(--police-texte); color: var(--clair-doux); }
.tirage__fiche { width: 100%; max-width: 52rem; margin-top: .5rem; }
.suivre-barre { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1.25rem; }
.suivre-barre__etiquette { display: inline-flex; align-items: center; gap: .9rem; min-height: 44px; padding-left: 1.1rem; border: 1px solid var(--clair); border-radius: var(--rayon-bouton); overflow: hidden; font: 600 1rem/1 var(--police-titre); }
.suivre-barre__arreter { display: grid; place-items: center; width: 44px; height: 42px; padding: 0; border: 0; border-left: 1px solid var(--filet-nuit); background: none; color: var(--clair); cursor: pointer; font: 700 1.4rem/1 var(--police-texte); }
.suivre-barre__arreter:hover { background: var(--clair); color: var(--nuit); }
.suivre-barre__aide { font-size: .95rem; color: var(--clair-doux); }
.choix-equipe { display: flex; flex-wrap: wrap; gap: .4rem; width: 100%; }
.choix-equipe button { min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--filet-nuit-fort); border-radius: var(--rayon-bouton); background: var(--teinte); color: var(--clair); cursor: pointer; font: 600 .95rem/1 var(--police-titre); }
.choix-equipe button:hover { border-color: var(--clair); }
/* Équipe suivie (décision du 2026-10-15) : son parcours cadré de blanc,
   le reste estompé ; le jaune reste au direct. */
.arbre .match { transition: opacity .25s; }
[data-suivie] .arbre .match:not([data-parcours]) { opacity: .35; }
.arbre .match[data-parcours] { outline: 2px solid var(--clair); outline-offset: 3px; }
[data-suivie] .ligne-match:not([data-parcours]) { display: none; }
.match__forfait { font: 600 .8rem/1.15rem var(--police-texte); }
.ligne-match__forfait { font-size: .95rem; color: var(--doux); }
.bientot--onglet { margin: 0 1.25rem; }
.ecran--fini .ecran__points { --diode: var(--clair); }
.podium__liste { display: grid; align-content: center; padding-left: 2rem; border-left: 1px solid var(--filet-nuit); }
.podium__rang { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--filet-nuit); }
.podium__rang:last-child { border-bottom: 0; }
.podium__num { font: 700 3rem/.85 var(--police-titre); color: rgba(238, 242, 248, .28); }
.podium__rang:first-child .podium__num { color: var(--clair); }
.podium__texte { display: grid; gap: .3rem; color: var(--clair-doux); }
.podium__nom { font: 700 1.5rem/1.1 var(--police-titre); color: var(--clair); }
.image-partage { display: grid; align-content: space-between; gap: .4rem; width: 13rem; aspect-ratio: 1; padding: 1.1rem; background: var(--vitre); color: var(--clair); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-moyen); }
.image-partage__marque { display: inline-flex; align-items: center; gap: .45rem; font: 700 .95rem/1 var(--police-titre); }
.image-partage__marque::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--signal); }
.image-partage__tournoi { font: 600 .75rem/1.2 var(--police-texte); color: var(--clair-doux); }
.image-partage__vainqueur { font: 700 1.8rem/1 var(--police-titre); }
.image-partage__finale { font: 600 .8rem/1.3 var(--police-texte); }
.image-partage__rangs { font: 600 .72rem/1.3 var(--police-texte); color: var(--clair-doux); }

/* ---------- écran D : avec vous, diffuser, inscrits, écrire, exports ---------- */
.app-avatar--petit { width: 1.6rem; height: 1.6rem; font-size: .75rem; }
.avec-vous { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .95rem; color: var(--clair-doux); }
.avec-vous > span { display: inline-flex; align-items: center; gap: .5rem; }
.avec-vous__titre { font: 600 .85rem/1 var(--police-texte); }
.diffuser { display: grid; }
.diffuser__titre { padding-bottom: .5rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.diffuser__dispo { color: var(--texte); border-top: 1px solid var(--trait); }
.diffuser__etat { font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.bientot + .bientot { border-top: 0; }
.a-traiter__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.a-traiter li[data-etats] > *, .a-traiter__outil { grid-column: 1 / -1; }
.a-traiter li > .a-traiter__actions { grid-column: 1 / -1; justify-content: flex-start; }
.a-traiter li[data-etats] .a-traiter__actions { justify-content: flex-start; }
.a-traiter li.est-urgent .bouton--secondaire { border-color: var(--trait-fort); color: var(--texte); }
.inscrits { margin-top: 2rem; }
.inscrits > .bloc__tete .etat { white-space: normal; line-height: 1.3; }
.inscrits__corps { display: grid; gap: 1.25rem; }
.bloc__corps.inscrits__corps > * + * { margin-top: 0; }
.inscrits__barre { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.outils__bouton[aria-pressed="true"] { background: var(--choix); border-color: var(--choix); color: var(--sur-choix); }
.selection { --texte: var(--clair); --trait-fort: var(--clair-doux); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; border-radius: var(--rayon-moyen); background: var(--nuit); color: var(--clair); }
.selection p { margin-right: auto; }
.selection strong { font: 700 1.3rem/1 var(--police-titre); }
.selection .bouton--nuit { background: var(--clair); color: var(--nuit); }
.inscrits__liste { display: grid; border-top: 1px solid var(--trait); counter-reset: attente; }
.inscrit { display: grid; grid-template-columns: 2rem minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; gap: .75rem 1.25rem; padding: 1rem 0; border-bottom: 1px solid var(--trait); }
.inscrit__case label { padding-left: 1.35rem; }
.inscrit__equipe { display: grid; gap: .25rem; }
.inscrit__equipe strong { font: 700 1.15rem/1.1 var(--police-titre); }
.inscrit__equipe span { font-size: .9rem; color: var(--texte-doux); }
.inscrit__infos { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .92rem; color: var(--texte-doux); }
.inscrit__alerte { font-weight: 600; color: var(--texte); }
.inscrit__alerte::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: .4rem; vertical-align: -3px; border-radius: 50%; background: linear-gradient(var(--clair), var(--clair)) center 3px / 2px 8px no-repeat, linear-gradient(var(--clair), var(--clair)) center 13px / 2px 2px no-repeat, var(--nuit); }
.inscrit__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem; }
.inscrit__plus { min-width: 44px; padding: 0 .6rem; font-size: 1.3rem; }
.inscrit__menu { position: absolute; z-index: 4; top: calc(100% + .4rem); right: 0; width: 15rem; margin-top: 0; }
.inscrit__fait { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .5rem 1rem; }
.inscrit__fait .etat { white-space: normal; }
.inscrit__refus { grid-column: 2 / -1; display: grid; gap: .75rem; }
.inscrit--attente .inscrit__equipe strong::before { counter-increment: attente; content: counter(attente) '. '; }
.inscrits__reste { padding: 1rem 0 1rem 3.25rem; border-bottom: 1px solid var(--trait); font-size: .95rem; color: var(--texte-doux); }
.menu-export { display: grid; margin-top: .75rem; overflow: hidden; background: var(--creux); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); }
.menu-export > * { display: grid; gap: .2rem; padding: .75rem .9rem; border: 0; border-bottom: 1px solid var(--trait); background: none; color: var(--texte); text-align: left; text-decoration: none; cursor: pointer; }
.menu-export > *:last-child { border-bottom: 0; }
.menu-export > *:hover { background: var(--surface); }
.menu-export strong { font: 600 1rem/1.2 var(--police-titre); }
.menu-export span { font-size: .85rem; color: var(--texte-doux); }
.tournoi-carte__liens { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: .35rem; }
.tournoi-carte .tournoi-carte__liens .lien-fleche { margin-top: 0; }
.lien-texte { padding: 0; border: 0; background: none; color: var(--texte-doux); cursor: pointer; font: 600 .95rem/1.2 var(--police-texte); text-decoration: underline; text-underline-offset: .25em; }
.lien-texte:hover { color: var(--texte); }
.ecrire { padding-top: 1.5rem; border-top: 1px solid var(--trait); }
.pastilles { display: flex; flex-wrap: wrap; gap: .4rem; }
.pastille { position: relative; margin: 0; }
.pastille input { position: absolute; opacity: 0; }
.pastille label { display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-bouton); cursor: pointer; font: 600 .95rem/1.1 var(--police-titre); color: var(--texte); }
.pastille input:checked + label { background: var(--choix); border-color: var(--choix); color: var(--sur-choix); }
.pastille input:focus-visible + label { outline: 2px solid var(--choix); outline-offset: 2px; }
.cases { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; }
.champ__etiquette { font: 600 .9rem/1 var(--police-texte); color: var(--texte-doux); }

/* ---------- écran B : départ, réglages, phases, cartes, questions, planning ---------- */
.tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.depart__liste { display: grid; margin-top: .5rem; border-top: 1px solid var(--trait); }
.depart__liste li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; gap: .5rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--trait); }
.depart__nom { font: 700 1.15rem/1.1 var(--police-titre); }
.depart__infos { font-size: .95rem; color: var(--texte-doux); }
.modeles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .5rem; }
.modele { display: grid; align-content: start; justify-items: start; gap: .5rem; padding: 1.1rem 1.2rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); }
.modele__nom { font: 700 1.25rem/1.1 var(--police-titre); }
.modele__infos { font-size: .95rem; color: var(--texte-doux); }
.modele .bouton { margin-top: .4rem; }
.phase-repere { display: inline-flex; align-items: center; gap: .55rem; font: 600 .9rem/1 var(--police-texte); color: var(--texte-doux); }
.phase-repere::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--choix); }
.assistant__etape > .feuille > .phase-repere + * { padding-top: 0; border-top: 0; }
.reglages { display: grid; gap: 1.5rem; }
.reglage { display: grid; gap: 1rem; }
.reglage__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; align-items: start; }
.avance > summary { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 0; cursor: pointer; list-style: none; font: 600 .95rem/1 var(--police-texte); color: var(--texte-doux); }
.avance > summary::-webkit-details-marker { display: none; }
.avance > summary::before { content: ''; flex: none; width: 22px; height: 22px; border: 1px solid var(--trait-fort); border-radius: 50%; background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat; }
.avance[open] > summary::before { background: linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat; }
.avance > summary:hover { color: var(--texte); }
.avance__corps { display: grid; gap: 1rem; padding: 1rem 0 0 1.1rem; border-left: 2px solid var(--trait); }
.avance__titre { font: 600 .9rem/1 var(--police-texte); color: var(--texte-doux); }
.tour-bo { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.tour-bo > span { font: 600 1rem/1 var(--police-titre); }
.segments--4 { max-width: 28rem; }
.tour-bo .segment label { min-height: 44px; }
.points { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.points-classement { display: grid; gap: .8rem; }
.departage { display: grid; gap: .4rem; padding-left: 1.4rem; list-style: decimal; color: var(--texte); }
.consequence { padding: .9rem 1.1rem; border-left: 3px solid var(--choix); border-radius: var(--rayon-petit); background: var(--creux); font: 600 1.05rem/1.45 var(--police-texte); }
.phases-bloc { display: grid; gap: 1rem; }
.phase { display: grid; gap: 1.25rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); }
.phase--auto { gap: .9rem; }
.phase__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.phases__vide { display: grid; justify-items: start; gap: .6rem; }
.cartes-bloc, .cartes-reglages { display: grid; gap: 1.25rem; }
.cartes-bloc__tete { display: grid; gap: .6rem; }
.jeux { gap: .75rem; }
.jeu-ligne { display: flex; align-items: center; gap: 1rem; margin: 0; }
.jeu-ligne input { flex: 1; min-width: 0; }
.jeux__ajout { display: grid; justify-items: start; gap: .4rem; margin-top: .25rem; }
.cartes-jeu { display: grid; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.cartes-liste { padding-left: 1.1rem; border-left: 2px solid var(--trait); }
.cartes-liste textarea { min-height: 8rem; line-height: 1.5; }
.cartes-reglages { padding-left: 1.1rem; border-left: 2px solid var(--trait); }
.questions-fixes { display: flex; flex-wrap: wrap; gap: .4rem; }
.questions-fixes li { padding: .45rem .8rem; background: var(--surface); border: 1px dashed var(--trait-fort); border-radius: 8px; font-size: .95rem; color: var(--texte-doux); }
.questions-liste { display: grid; border-top: 1px solid var(--trait); }
.question-ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--trait); }
.question-ligne .case label span { margin-left: .4rem; font-weight: 400; color: var(--texte-doux); }
.question-lien { grid-column: 1 / -1; margin-left: 2.1rem; }
.question-lien select { max-width: 14rem; }
.interrupteur--mini label { padding-left: 3.6rem; }
.interrupteur--mini label::before { top: .1rem; width: 2.6rem; height: 1.4rem; }
.interrupteur--mini label::after { top: .35rem; width: .9rem; height: .9rem; }
.interrupteur--mini input:checked + label::after { transform: translateX(1.1rem); }
.interrupteur--mini .interrupteur__nom { font-size: .9rem; color: var(--texte-doux); }
.interrupteur input:disabled + label { cursor: default; opacity: .55; }
.assistant .champ select, .assistant .champ input[type="email"] { width: 100%; min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--creux); color: var(--texte); font: 500 1.05rem/1.3 var(--police-texte); }
.champs-dates--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.planning--apercu { margin-top: .25rem; color: var(--clair); }
.planning--apercu .planning__table { min-width: 0; }
.planning--apercu tbody th { width: 7.5rem; }
.planning--apercu tbody th span { display: block; margin-top: .35rem; font: 700 .72rem/1.2 var(--police-titre); color: var(--clair-doux); }
.planning--apercu .match__ligne { color: var(--clair-doux); font-size: .85rem; }
.planning--apercu td[colspan] { color: var(--clair-doux); }
.alerte-fin { padding: .9rem 1.1rem; border-radius: var(--rayon-moyen); background: var(--nuit); color: var(--clair); font-weight: 600; }
.alerte-fin::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: .6rem; vertical-align: -3px; border-radius: 50%; background: linear-gradient(var(--nuit), var(--nuit)) center 3px / 2px 8px no-repeat, linear-gradient(var(--nuit), var(--nuit)) center 13px / 2px 2px no-repeat, var(--clair); }
.duplication__corps { display: grid; gap: 1rem; padding: 1.25rem; border: 2px solid var(--choix); border-radius: var(--rayon-moyen); }
.duplication__titre { font: 700 1.45rem/1.1 var(--police-titre); }
.assistant__etape > .feuille > .duplication:has(> [data-etat="copie"][hidden]) { display: none; }
.assistant__etape > .feuille > .duplication:has(> [data-etat="copie"][hidden]) + * { padding-top: 0; border-top: 0; }
.assistant .champ-geant--moyen { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.champ--a-completer label { color: var(--texte); }
.champ--a-completer label::before { content: ''; display: inline-block; width: 18px; height: 18px; margin-right: .45rem; vertical-align: -4px; border-radius: 50%; background: linear-gradient(var(--sur-choix), var(--sur-choix)) center 3px / 2px 8px no-repeat, linear-gradient(var(--sur-choix), var(--sur-choix)) center 13px / 2px 2px no-repeat, var(--choix); }
.assistant .champ--a-completer input { outline: 2px solid var(--choix); outline-offset: 2px; }
.recap dd.est-a-completer, .carte-tournoi li.est-a-completer { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; }
.facultatif { margin-left: .5rem; font: 600 .8rem/1 var(--police-texte); color: var(--texte-doux); vertical-align: middle; }
.aides { display: grid; border-top: 1px solid var(--trait); }
.aides li { display: grid; grid-template-columns: auto 7rem minmax(0, 1fr) auto; align-items: center; gap: .5rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--trait); font-size: .95rem; color: var(--texte-doux); }
.aides .app-avatar { background: var(--nuit); color: var(--clair); }
.aides__nom { font: 700 1.05rem/1.1 var(--police-titre); color: var(--texte); }
.inviter { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 1rem 1.5rem; }
.lien-equipe--ligne { display: inline-block; padding: .2rem .5rem; }
#qui-aide { scroll-margin-top: 1rem; }

/* ---------- bande de vues (écrans A et C) : un outil de la maquette ----------
   Même habit que le bandeau « maquette », dont elle prolonge le jaune :
   ce n'est pas une fonction du produit. Dans l'application, la vue
   dépend du compte connecté. */
.maquette-vues { background: rgba(7, 16, 34, .55); color: var(--clair); border-bottom: 1px solid var(--filet-nuit); }
.maquette-vues__barre { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; padding-block: .5rem; font: 500 .9rem/1 var(--police-texte); color: var(--clair-doux); }
.maquette-vues__liste { display: flex; flex-wrap: wrap; gap: .4rem; }
.maquette-vues__liste a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--filet-nuit-fort); border-radius: var(--rayon-bouton); color: var(--clair); text-decoration: none; }
.maquette-vues__liste a:hover { background: var(--teinte); }
.maquette-vues__liste a[aria-current="true"] { background: var(--clair); border-color: var(--clair); color: var(--nuit); }
.maquette-vues__aide { margin-left: auto; font: 500 .88rem/1.3 var(--police-texte); text-transform: none; letter-spacing: 0; }

/* ---------- fonctions à venir : étiquette V2 en contour ----------
   Le repère de la page Fonctionnalités. Un clic explique et renvoie à
   la feuille de route, jamais un faux bouton. Seulement la V2. */
.bientot { border-block: 1px solid var(--trait); }
.bientot__bouton { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--texte-doux); font: 600 1rem/1.2 var(--police-titre); }
.bientot__bouton:hover, .bientot__bouton[aria-expanded="true"] { color: var(--texte); }
.bientot__bouton .version { color: var(--texte); }
.bientot__texte { display: grid; justify-items: start; gap: .8rem; padding-bottom: 1.1rem; color: var(--texte-doux); }

/* ---------- compteurs − + : un nombre se règle, il ne se tape pas ---------- */
.compteur { display: inline-grid; grid-template-columns: 3.25rem 5.5rem 3.25rem; overflow: hidden; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); }
.compteur__bouton { display: grid; place-items: center; padding: 0; border: 0; background: var(--surface); color: var(--texte); cursor: pointer; font: 700 1.7rem/1 var(--police-titre); transition: background .2s, color .2s; }
.compteur__bouton:hover { background-color: var(--choix); color: var(--sur-choix); }
/* − et + dessinés : les signes de la police tombent sous le milieu du bouton. */
.compteur__bouton { font-size: 0; background-image: linear-gradient(currentColor, currentColor); background-size: 14px 3px; background-position: center; background-repeat: no-repeat; }
.compteur__bouton[data-compteur-plus] { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 14px 3px, 3px 14px; }
.compteur__valeur { width: 100%; min-width: 0; padding: .45rem 0; border: 0; border-inline: 1px solid var(--trait-fort); background: var(--creux); color: var(--texte); text-align: center; font: 700 2.4rem/1 var(--police-titre); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.compteur__valeur::-webkit-inner-spin-button, .compteur__valeur::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.compteur__valeur:focus-visible { outline: 2px solid var(--choix); outline-offset: -2px; }
.compteur--petit { grid-template-columns: 2.75rem 4rem 2.75rem; }
.compteur--petit .compteur__valeur { font-size: 1.9rem; }

/* ---------- écran B : progression, carte du tournoi, questions ---------- */
.progression { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1.25rem; padding-bottom: 1.25rem; }
.progression__texte { font: 600 .95rem/1 var(--police-texte); color: var(--clair-doux); }
.progression__texte span { color: var(--clair); }
.progression__piste { height: 6px; overflow: hidden; border: 1px solid var(--filet-nuit); border-radius: 999px; background: var(--creux-nuit); }
.progression__plein { display: block; width: var(--part, 0%); height: 100%; border-radius: 999px; background: var(--clair); transition: width .4s ease; }
.carte-tournoi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem 1.75rem; margin-bottom: 3rem; padding: 1.1rem 1.4rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-tournoi__etiquette { grid-column: 1 / -1; font: 600 .82rem/1 var(--police-texte); color: var(--clair-doux); }
.carte-tournoi__nom { font: 700 1.5rem/1.1 var(--police-titre); }
.carte-tournoi__infos { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; font-size: .98rem; color: var(--clair-doux); }
.carte-tournoi__infos li::before { content: ''; display: inline-block; width: .35rem; height: .35rem; margin-right: .5rem; border-radius: 50%; background: var(--clair-doux); vertical-align: .15em; }

.assistant__form { display: block; }
.assistant__etape { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.assistant__etape > .feuille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
.assistant__etape > .feuille > * + * { padding-top: 2.5rem; border-top: 1px solid var(--trait); }
.assistant__titre { display: flex; align-items: center; gap: .6rem; font: 600 .95rem/1 var(--police-texte); color: var(--clair-doux); }
.assistant__titre::before { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: var(--clair-doux); }
.bloc-question { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.bloc-question__titre { display: block; min-height: 0; padding: 0; font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1.15 var(--police-titre); color: var(--texte); }
legend.bloc-question__titre { margin-bottom: 1.25rem; }
.bloc-question__titre--petit { font-size: 1.25rem; }
legend.bloc-question__titre--petit { margin-bottom: 1rem; }
.bloc-question__aide { margin-top: -.4rem; color: var(--texte-doux); }
.questions-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; align-items: start; }
.assistant input[type="text"], .assistant input[type="date"], .assistant input[type="time"], .assistant textarea { width: 100%; padding: .8rem .9rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-petit); background: var(--creux); color: var(--texte); font: 500 1.1rem/1.3 var(--police-texte); }
.assistant input:focus-visible, .assistant textarea:focus-visible { outline: 2px solid var(--choix); outline-offset: 0; border-color: var(--choix); }
.assistant .champ-geant { padding: .4rem 0 .6rem; border-width: 0 0 2px; border-color: var(--choix); border-radius: 0; background: transparent; font: 700 clamp(1.8rem, 1.4rem + 1.3vw, 2.6rem)/1.15 var(--police-titre); }
.assistant .champ-geant:focus-visible { outline: 0; border-color: var(--texte-doux); }
.assistant .reglement { min-height: 12rem; padding: 1rem 1.1rem; background: var(--surface); line-height: 1.65; resize: vertical; }
.champs-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.champ { display: grid; gap: .5rem; }
.champ label { display: block; min-height: 0; font: 600 .9rem/1.2 var(--police-texte); color: var(--texte-doux); }
.assistant__nav { position: sticky; bottom: .75rem; z-index: 3; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding: .6rem; background: rgba(7, 16, 34, .6); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-bouton); -webkit-backdrop-filter: var(--flou); backdrop-filter: var(--flou); }
.assistant .contact__avis { font-size: .9rem; color: var(--clair-doux); }

/* ---------- tuiles, segments, interrupteurs : des choix qu'on voit ---------- */
.tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.tuile { position: relative; margin: 0; }
.tuile input { position: absolute; top: 1rem; left: 1rem; opacity: 0; }
.tuile label { position: relative; display: grid; align-content: start; gap: .35rem; height: 100%; padding: 1.1rem 1.2rem 1.1rem 3.1rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon-moyen); cursor: pointer; transition: border-color .2s, background .2s; }
.tuile label::before { content: ''; position: absolute; top: 1.2rem; left: 1.2rem; width: 1rem; height: 1rem; border: 2px solid var(--texte-doux); border-radius: 50%; }
.tuile label:hover { border-color: var(--texte-doux); }
.tuile input:checked + label { background: var(--choix); border-color: var(--choix); color: var(--sur-choix); }
.tuile input:checked + label .tuile__desc { color: var(--sur-choix); opacity: .8; }
.tuile input:checked + label::before { background: var(--sur-choix); border-color: var(--sur-choix); }
.tuile input:focus-visible + label { outline: 2px solid var(--choix); outline-offset: 2px; }
.tuile__nom { font: 700 1.2rem/1.1 var(--police-titre); }
.tuile__desc { font-size: .95rem; color: var(--texte-doux); }
.tuile--photo label { gap: 0; padding: 0; overflow: hidden; }
.tuile--photo label::before { z-index: 1; top: 1rem; left: 1rem; background: var(--creux); }
.tuile--photo img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; opacity: .55; transition: opacity .2s; }
.tuile--photo input:checked + label img, .tuile--photo label:hover img { opacity: 1; }
.tuile--photo .tuile__nom { padding: 1.1rem 1.25rem .35rem; font-size: 1.5rem; }
.tuile--photo .tuile__desc { padding: 0 1.25rem 1.2rem; }
.picto { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.picto .plein { fill: currentColor; }
.tuile input:checked + label .picto { color: var(--sur-choix); }
.tuile--picto .picto { width: 3.5rem; height: auto; margin-bottom: .6rem; }
.picto--joueurs { stroke-width: 1.5; }

.segments { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .25rem; width: 100%; max-width: 30rem; padding: .25rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon-moyen); }
.segments--3 { max-width: 36rem; }
.segment { position: relative; margin: 0; }
.segment input { position: absolute; opacity: 0; }
.segment label { display: grid; place-items: center; align-content: center; gap: .3rem; height: 100%; min-height: 52px; padding: .6rem .75rem; border-radius: var(--rayon-petit); text-align: center; cursor: pointer; font: 600 1rem/1.1 var(--police-titre); color: var(--texte-doux); transition: background .2s, color .2s; }
.segment + .segment label { border-left: 0; }
.segment label:hover { color: var(--texte); }
.segment input:checked + label { background: var(--choix); color: var(--sur-choix); }
.segment input:focus-visible + label { outline: 2px solid var(--texte-doux); outline-offset: -4px; }
.segment__fort { font-size: 1.5rem; font-weight: 700; }
.segment__sous { font: 500 .8rem/1.2 var(--police-texte); text-transform: none; letter-spacing: 0; }

.interrupteur { position: relative; margin: 0; }
.interrupteur + .interrupteur { margin-top: 1rem; }
.interrupteur input { position: absolute; top: .5rem; left: .5rem; opacity: 0; }
.interrupteur label { position: relative; display: grid; gap: .3rem; padding: .3rem 0 .3rem 4.1rem; cursor: pointer; }
.interrupteur label::before { content: ''; position: absolute; top: .35rem; left: 0; width: 3rem; height: 1.6rem; border: 1px solid var(--trait-fort); border-radius: 999px; background: var(--creux); transition: background .2s, border-color .2s; }
.interrupteur label::after { content: ''; position: absolute; top: .65rem; left: .3rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--texte-doux); transition: transform .2s, background .2s; }
.interrupteur input:checked + label::before { background: var(--choix); border-color: var(--choix); }
.interrupteur input:checked + label::after { transform: translateX(1.4rem); background: var(--sur-choix); }
.interrupteur input:focus-visible + label::before { outline: 2px solid var(--choix); outline-offset: 2px; }
.interrupteur__nom { font: 600 1.05rem/1.3 var(--police-texte); }
.interrupteur__aide { font-size: .92rem; color: var(--texte-doux); }

.places { display: flex; flex-wrap: wrap; gap: .4rem; max-width: 34rem; }
.places span { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--texte); }
.silhouettes { display: flex; gap: .45rem; }
.silhouettes svg { width: 1.6rem; height: 2.4rem; fill: var(--texte); }
.silhouettes--remplacants svg { fill: none; stroke: var(--texte-doux); stroke-width: 1.5; }

.recap { display: grid; border-top: 1px solid var(--trait); }
.recap div { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--trait); }
.recap dt { font: 600 .85rem/1.5 var(--police-texte); color: var(--texte-doux); }
.recap dd { margin: 0; font: 600 1.1rem/1.35 var(--police-texte); }
.recap__modifier { padding: 0; border: 0; background: none; color: var(--texte); cursor: pointer; font: 600 .95rem/1 var(--police-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.recap__modifier:hover { color: var(--texte-doux); }

/* ---------- écran B : les formats et leurs démonstrateurs ---------- */
/* Les états viennent d'app.js, qui lit les attributs posés par
   scripts/generer-formats.py (voir ce fichier). */
.choix-format { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 2rem; align-items: start; }
.choix-format__liste { display: grid; gap: .5rem; }
.choix-format__liste .bloc-question__aide { margin: -.75rem 0 .5rem; }
.tuile--format label { grid-template-columns: 3rem minmax(0, 1fr); column-gap: 1rem; row-gap: .25rem; align-items: center; padding: .8rem 1rem; }
.tuile--format label::before { display: none; }
.tuile--format .picto { grid-row: 1 / 3; width: 3rem; height: auto; color: var(--texte-doux); }
.tuile--format .tuile__nom { font-size: 1.15rem; }
.tuile--format .tuile__desc { font-size: .88rem; }
.choix-format__demos { min-width: 0; }
.fiche { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1.1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); }
.fiche__picto { position: absolute; top: 1.5rem; right: 1.5rem; width: 5rem; height: auto; color: var(--texte-doux); }
.fiche__titre { padding-right: 6rem; font: 700 2rem/1.1 var(--police-titre); }
.fiche__regle { max-width: 38rem; font-size: 1.15rem; line-height: 1.5; }
.fiche__pour { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
.fiche__pour div { display: grid; align-content: start; gap: .4rem; padding-top: .8rem; border-top: 3px solid var(--texte); }
.fiche__pour div + div { border-top-color: var(--trait-fort); }
.fiche__pour dt, .fiche__avec, .fiche__reperes dt { font: 600 .82rem/1.2 var(--police-texte); color: var(--texte-doux); }
.fiche__pour dd { margin: 0; }
.fiche__avec { margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--trait); }
.fiche__reperes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.fiche__reperes div { display: grid; align-content: start; gap: .4rem; }
.fiche__reperes dd { margin: 0; font: 700 1.5rem/1 var(--police-titre); }
.fiche__voir { justify-self: start; margin-top: .4rem; }
.demo__retour { padding: 0; border: 0; background: none; color: var(--clair); cursor: pointer; font: 600 .95rem/1 var(--police-texte); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem; color: var(--clair); background: var(--vitre); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.demo__tete { display: grid; gap: .55rem; }
.demo__exemple { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.demo__suivie { color: var(--signal); }
.demo__suivie::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--signal); vertical-align: .05em; }
.demo__titre { font: 700 2rem/1.1 var(--police-titre); }
.demo__definition { max-width: 42rem; color: var(--clair-doux); }
.demo__scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.demo__lecture { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--filet-nuit); }
.demo__legendes { min-height: 4.8em; }
.demo__legende { font-size: 1.05rem; line-height: 1.5; }
.demo__legende + .demo__legende { margin-top: .6rem; }
.demo__legende strong { margin-right: .25rem; font: 700 1.1rem/1 var(--police-titre); }
.demo__commandes { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.demo__pas { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--filet-nuit-fort); border-radius: 50%; background: transparent; color: var(--clair); cursor: pointer; font: 700 1.4rem/1 var(--police-titre); }
.demo__pas:hover:not(:disabled) { border-color: var(--clair); background: var(--teinte); }
.demo__pas:disabled { opacity: .3; cursor: default; }
.demo__compteur { min-width: 8.5rem; text-align: center; font: 600 1rem/1 var(--police-titre); }
.demo__compteur span { font-size: 1.35em; }
.demo__jouer { min-height: 48px; margin-left: auto; padding: 0 1.4rem; border: 1px solid var(--clair); border-radius: var(--rayon-bouton); background: transparent; color: var(--clair); cursor: pointer; font: 600 1rem/1 var(--police-titre); }
.demo__jouer[aria-pressed="true"] { background: var(--clair); color: var(--nuit); }

.demo [data-des], .demo [data-gagne], .demo [data-elimine] { transition: opacity .35s ease, color .35s ease; }
.demo [data-avenir] { opacity: 0; visibility: hidden; }
.demo [data-masque] { display: none !important; }
.demo [data-eteint] { opacity: .3; }
.demo .match[data-vide] { background: transparent; border-style: dashed; }
.demo .match[data-courant] { border-color: var(--clair); box-shadow: 0 0 0 1px var(--clair); }
.demo .match__ligne { color: var(--clair-doux); }
.demo .match__ligne[data-gagnant] { color: var(--clair); font-weight: 600; }
.demo .match__score { color: inherit; }
.demo .match__equipe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .match__ligne.est-suivie { box-shadow: inset 3px 0 0 var(--signal); }
.demo .est-suivie .match__equipe { color: var(--signal); }
.match__note { margin: 0 .5rem 0 auto; font: 700 .9rem/1 var(--police-titre); color: var(--clair-doux); }
.arbre--demo .arbre__defile { padding: 0 0 .25rem; }
.arbre--demo .arbre__tours { min-width: 32rem; }
.arbre--demo .defilement { margin: .5rem 0 0; }
.demo__vainqueur { display: flex; flex-wrap: wrap; align-items: baseline; justify-self: start; gap: .4rem 1rem; padding: .9rem 1.1rem; border: 1px solid var(--clair); border-radius: var(--rayon-moyen); }
.demo__vainqueur-titre { font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.demo__vainqueur-nom { font: 700 1.5rem/1 var(--police-titre); }
.demo__vainqueur-nom.est-suivie { color: var(--signal); }
.demo__second { font: 600 .95rem/1 var(--police-titre); color: var(--clair-doux); }
.demo__second.est-suivie, .demo__vainqueur .est-suivie { color: var(--signal); }

.demo-voies { display: grid; gap: 1.5rem; }
.demo-voie { display: grid; gap: .8rem; align-content: start; }
.demo-voie--perdants { padding-top: 1.25rem; border-top: 1px dashed var(--filet-nuit-fort); }
.demo-voie--finale { padding-top: 1.25rem; border-top: 1px solid var(--filet-nuit); }
.demo-voie__titre { font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.demo-tours { display: grid; grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); gap: 1rem; }
.demo-tours--1 { --colonnes: 1; max-width: 16rem; }
.demo-tours--2 { --colonnes: 2; }
.demo-tours--3 { --colonnes: 3; }
.demo-tours--4 { --colonnes: 4; }
.demo-tour { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.demo-tour__nom { font: 600 .82rem/1 var(--police-texte); color: var(--clair-doux); }
.demo-tour__nom:empty { display: none; }
.demo-tour__matchs { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: .6rem; }
.demo-poules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.demo-poule { display: grid; gap: .8rem; align-content: start; }
.demo-journee { display: grid; gap: .5rem; }
.demo-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.demo-duo--ligue { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.demo-classement { display: grid; gap: .7rem; min-width: 0; }

.demo-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.demo-table th, .demo-table td { padding: .45rem .45rem; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--filet-nuit); }
.demo-table thead th { font: 600 .78rem/1 var(--police-texte); color: var(--clair-doux); }
.demo-table td { color: var(--clair-doux); font-variant-numeric: tabular-nums; }
.demo-table__rang { width: 1.6rem; }
.demo-table__equipe { width: 100%; font: 600 1rem/1.1 var(--police-titre); color: var(--clair); }
.demo-table .demo-table__pts { color: var(--clair); font: 700 1.05rem/1 var(--police-titre); text-align: right; }
.demo-table tr.est-suivie { box-shadow: inset 3px 0 0 var(--signal); }
.demo-table tr.est-suivie .demo-table__equipe { color: var(--signal); }
.demo-table tr.est-qualifiee { background: var(--teinte); }
.demo-table tr.est-qualifiee .demo-table__rang { color: var(--clair); font-weight: 700; }
.demo-table__evol--monte { color: var(--clair) !important; }
.forme { display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem; margin-right: 2px; border-radius: 50%; font: 700 .65rem/1 var(--police-titre); }
.forme--v { background: var(--clair); color: var(--nuit); }
.forme--d { border: 1px solid var(--clair-doux); color: var(--clair-doux); }

.demo-grille-cadre { min-width: 0; }
.demo-grille { width: 100%; border-collapse: collapse; table-layout: fixed; font: 600 .78rem/1 var(--police-titre); }
.demo-grille th, .demo-grille td { padding: .45rem 0; text-align: center; border: 1px solid var(--filet-nuit); }
.demo-grille abbr { text-decoration: none; }
.demo-grille th { color: var(--clair-doux); }
.demo-grille th.est-suivie, .demo-grille tr.est-suivie th { color: var(--signal); }
.demo-grille tr.est-suivie td { background: rgba(255, 212, 0, .07); }
.demo-grille__v { color: var(--clair); }
.demo-grille__d { color: var(--clair-doux); }
.demo-grille__vide { background: var(--filet-nuit); }
.demo-grille td[data-courant] { background: var(--teinte); outline: 1px solid var(--clair); outline-offset: -1px; }

.demo-bilan { display: grid; gap: .5rem; padding: .6rem; border: 1px solid var(--filet-nuit); border-radius: var(--rayon-petit); }
.demo-bilan__nom { font: 700 1.05rem/1 var(--police-titre); color: var(--clair-doux); }
.demo-rangs { display: grid; gap: .35rem; }
.demo-rang { display: flex; align-items: center; gap: .5rem; font: 600 .95rem/1.1 var(--police-titre); }
.demo-rang__num { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border: 1px solid var(--filet-nuit-fort); border-radius: 50%; font-size: .8rem; }
.demo-rang.est-suivie { color: var(--signal); }
.demo-rang.est-suivie .demo-rang__num { background: var(--signal); border-color: var(--signal); color: var(--nuit); }

.demo-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.demo-cal__jour { position: relative; display: grid; gap: .25rem; padding: .55rem .5rem; border: 1px solid var(--filet-nuit); border-radius: var(--rayon-petit); }
.demo-cal__num { font: 700 1.1rem/1 var(--police-titre); }
.demo-cal__date { font: 600 .72rem/1.2 var(--police-texte); color: var(--clair-doux); }
.demo-cal__fait { position: absolute; top: .5rem; right: .5rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--clair-doux); }
.demo-cal__jour[data-courant] { background: var(--teinte); border-color: var(--clair); box-shadow: 0 0 0 1px var(--clair); }
.demo-cal__jour[data-courant] .demo-cal__fait { background: var(--clair); }
.demo-resultats { display: grid; gap: .5rem; min-width: 0; }

.demo-barres { display: grid; gap: .45rem; }
.demo-barre { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .6rem; font: 600 .9rem/1.1 var(--police-titre); }
.demo-barre__nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-barre__piste { height: .9rem; overflow: hidden; border: 1px solid var(--filet-nuit); border-radius: 999px; background: var(--creux-nuit); }
.demo-barre__plein { display: block; width: var(--part); height: 100%; border-radius: 999px; background: var(--clair-doux); }
.demo-barre.est-suivie { color: var(--signal); }
.demo-barre.est-suivie .demo-barre__plein { background: var(--signal); }
.demo-barre__pts { text-align: right; font-variant-numeric: tabular-nums; }
.demo__bareme { font-size: .88rem; color: var(--clair-doux); }

/* ---------- écran D : direct, à traiter, mes tournois, chiffres ---------- */
.direct-carte { display: grid; gap: 1.5rem; padding: 1.5rem; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.direct-carte__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1rem 2rem; }
.direct-carte__nom { margin-top: .7rem; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem); }
.direct-carte__infos { margin-top: .55rem; color: var(--clair-doux); }
.direct-carte__public { text-align: right; font: 600 .85rem/1 var(--police-texte); color: var(--clair-doux); }
.direct-carte__public strong { display: block; margin-bottom: .35rem; font-size: 2.8rem; line-height: .9; letter-spacing: 0; color: var(--clair); }
.direct-carte__match { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.5rem; padding: 1rem 1.25rem; background: var(--creux-nuit); border: 1px solid var(--filet-nuit); border-radius: var(--rayon-moyen); color: inherit; text-decoration: none; transition: border-color .2s; }
.direct-carte__match:hover { border-color: var(--clair); }
.direct-carte__libelle { font: 600 .85rem/1 var(--police-texte); color: var(--signal); }
.direct-carte__score { display: flex; align-items: center; gap: 1rem; font: 700 1.4rem/1 var(--police-titre); }
.direct-carte__score b { font-size: 2.3rem; color: var(--signal); font-variant-numeric: tabular-nums; }
.avancement { display: grid; gap: .6rem; }
.avancement__libelle { display: flex; justify-content: space-between; gap: 1rem; font: 600 .9rem/1 var(--police-texte); color: var(--clair-doux); }
.avancement__cases { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.avancement__cases span { height: .8rem; border: 1px solid var(--clair-doux); border-radius: 999px; }
.avancement__cases .est-plein { background: var(--clair); border-color: var(--clair); }
.a-traiter li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6rem 1.5rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--ligne); }
.a-traiter li:last-child { border-bottom: 0; }
.a-traiter li.est-urgent { box-shadow: inset 4px 0 0 var(--signal); border-bottom: 1px solid var(--ligne); }
.a-traiter li.est-urgent p, .a-traiter li.est-urgent strong { color: var(--texte); }
.a-traiter__texte { display: grid; gap: .45rem; justify-items: start; }
.a-traiter__texte p { color: var(--texte-doux); }
.a-traiter__texte strong { color: var(--texte); font-weight: 600; }
.a-traiter li > .lien-fleche { justify-self: end; }
.est-urgent .etat--litige::before { border-radius: 50%; }
.a-traiter-bloc { padding: 0; }
.a-traiter-bloc > .bloc__tete { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--trait); }

.mes-tournois { margin-top: 3.5rem; }
.mes-tournois__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.mes-tournois__titre { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); }
.app .filtre-versions { position: static; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.app .filtre-versions button { display: inline-flex; gap: .55rem; padding: 0 1rem; border-color: var(--filet-nuit-fort); color: var(--clair); }
.app .filtre-versions button:hover { border-color: var(--clair); }
.app .filtre-versions button[aria-pressed="true"] { background: var(--clair); border-color: var(--clair); color: var(--nuit); }
.app .filtre-versions [aria-pressed="true"] .filtre-versions__nombre { color: var(--nuit); }
.tournois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.tournoi-carte { display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--plaque); border: 1px solid var(--filet-nuit); border-radius: var(--rayon); box-shadow: var(--ombre); }
.tournoi-carte img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.tournoi-carte__corps { display: grid; align-content: start; justify-items: start; gap: .65rem; padding: 1.1rem 1.25rem 1.35rem; }
.tournoi-carte__nom { font-size: 1.4rem; }
.tournoi-carte__infos { font-size: .95rem; color: var(--clair-doux); }
.tournoi-carte__places { display: grid; gap: .5rem; font-size: .9rem; color: var(--clair-doux); }
.cases-places { display: flex; flex-wrap: wrap; gap: 3px; }
.cases-places span { width: .7rem; height: .7rem; border: 1px solid var(--clair-doux); border-radius: 50%; }
.cases-places .est-plein { background: var(--clair); border-color: var(--clair); }
.tournoi-carte .lien-fleche { margin-top: .35rem; }

.chiffres { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem 3rem; margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-nuit); }
.chiffres__titre { font: 600 .9rem/1.2 var(--police-texte); color: var(--clair-doux); }
.chiffres__liste { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.chiffres__liste div { display: grid; gap: .35rem; }
.chiffres__liste dt { font: 600 .82rem/1.2 var(--police-texte); color: var(--clair-doux); }
.chiffres__liste dd { margin: 0; font: 700 1.8rem/1 var(--police-titre); font-variant-numeric: tabular-nums; }
.chiffres__liste small { font: 600 .78rem/1 var(--police-texte); color: var(--clair-doux); }

.bouton--contour { background-color: transparent; }
/* Un conteneur qui défile doit aussi contenir ses descendants en position
   absolue (textes .sr-only des tableaux), sinon ils élargissent la page. */
.planning { position: relative; }

/* ---------- maquettes · tablette ---------- */
@media (max-width: 1080px) {
  .app-grille, .app-grille--7-5, .app-tete__haut, .maintenant__grille, .choix-format { grid-template-columns: minmax(0, 1fr); }
  .app-tete__cote { justify-items: start; }
  .equipes, .tournois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onglets__liste--etapes { display: flex; gap: 0 1.75rem; }
  .demo-duo--ligue { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- maquettes · mobile ---------- */
@media (max-width: 760px) {
  .maquette-bandeau__barre { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .maquette-bandeau__mention { grid-column: 1 / -1; width: 100%; margin: 0; min-height: 36px; }
  .maquette-bandeau__ecrans { flex-wrap: nowrap; overflow-x: auto; }
  .maquette-bandeau__ecrans a { flex: none; }
  .maquette-bandeau__barre > .defilement { grid-column: 1; grid-row: 3; margin: 0 0 .5rem; }
  .app-entete__nav { order: 3; width: 100%; gap: 1.25rem; border-top: 1px solid var(--filet-nuit); }
  .app-compte { margin-left: auto; }
  .app-compte__nom { display: none; }
  .app .ecran__equipe { font-size: 1.15rem; }
  .app .ecran__score { gap: .6rem; padding: 1.1rem 1rem; }
  .app-grille .bloc__tete, .app-grille .bloc__corps { padding-inline: 1rem; }

  .partage { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; }
  .partage__qr { width: 8rem; height: 8rem; }
  .prochain__nom { font-size: 2rem; }
  .prochain__heure { font-size: 2.6rem; }
  .frise-tours__tour { padding-right: .5rem; }
  .frise-tours__nom { font-size: 1.1rem; }
  .frise-tours__etat { font-size: .68rem; white-space: normal; }
  .ligne-match { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); grid-template-areas: "heure heure etat" "a score b"; row-gap: .6rem; padding-inline: 0; }
  .ligne-match__heure { grid-area: heure; }
  .ligne-match__equipe--a { grid-area: a; }
  .ligne-match__score { grid-area: score; }
  .ligne-match__equipe--b { grid-area: b; }
  .ligne-match__etat { grid-area: etat; }
  .tour-titre { padding-inline: 0; }
  .tournoi__panneau .panneau { padding-inline: 1rem; }
  .equipes, .tournois { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }

  .bande-action p { font-size: 1rem; }
  .app-grille .feuille > .bloc__tete, .app-grille .feuille > .bloc__corps { padding-inline: 0; }
  /* Les blocs d'information n'ont pas de boîte : pas de retrait non plus (audit, point 70). */
  .app-grille .info > .bloc__tete, .app-grille .info > .bloc__corps { padding-inline: 0; }
  .app-grille .info > .manches { padding: 1rem 0 0; }
  .declarer .compteur { grid-template-columns: 2.2rem 3rem 2.2rem; }
  .declarer .compteur__valeur { font-size: 2rem; }
  .declarer__sep { font-size: 2rem; padding-bottom: .8rem; }
  .manches { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 1rem; }
  .verifier .compteur, .trancher .compteur { grid-template-columns: 2.2rem 3rem 2.2rem; }
  .verifier .compteur__valeur, .trancher .compteur__valeur { font-size: 2rem; }
  .comparaison__version { padding: .8rem; }
  .comparaison__score { font-size: 2rem; }
  .veto__tours { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: .8rem; }
  .maquette-vues__aide { margin-left: 0; }
  .segments--long { grid-auto-flow: row; grid-auto-rows: minmax(0, auto); }
  .segments--long .segment + .segment label { border-top: 0; }
  .segments--long .segment label { min-height: 48px; }
  .depot__miniature { width: 6rem; }

  .progression { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .carte-tournoi { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .tuiles, .questions-duo, .champs-dates { grid-template-columns: minmax(0, 1fr); }
  .questions-duo { gap: 2.5rem; }
  .recap div { grid-template-columns: minmax(0, 1fr) auto; }
  .recap dt { grid-column: 1 / -1; }
  .places span { width: 1.25rem; height: 1.25rem; }

  .demo { padding: 1rem; }
  .demo__titre { font-size: 1.8rem; }
  .demo__jouer { margin-left: 0; }
  .fiche__reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fiche__pour { grid-template-columns: minmax(0, 1fr); }
  .fiche__voir { justify-self: stretch; white-space: normal; text-align: center; padding-block: .7rem; }
  .fiche__picto { width: 3.5rem; }
  .fiche__titre { font-size: 1.8rem; padding-right: 4rem; }
  .prochain { padding: 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--filet-nuit); }
  .podium__liste { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--filet-nuit); }
  .champs-duo { grid-template-columns: minmax(0, 1fr); }
  .jauge-places__compte strong { font-size: 3.4rem; }
  .jauge-places__cases span { width: 1.9rem; height: 1.9rem; }
  .bientot--onglet, .tournoi__resume { margin-inline: 0; padding-inline: 1rem; }
  .inscrit { grid-template-columns: 2rem minmax(0, 1fr); }
  .inscrit__case { align-self: start; margin-top: 1px; }
  .inscrit__infos, .inscrit__actions, .inscrit__fait, .inscrit__refus { grid-column: 2; justify-content: flex-start; }
  .inscrit__menu { right: auto; left: 0; }
  .inscrits__reste { padding-left: 3rem; }
  .tuiles--3, .modeles, .reglage__duo, .champs-dates--4 { grid-template-columns: minmax(0, 1fr); }
  .depart__liste li { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .tour-bo { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .question-ligne { grid-template-columns: minmax(0, 1fr); }
  .question-lien { margin-left: 0; }
  .aides li { grid-template-columns: auto minmax(0, 1fr); }
  .aides li > :nth-child(3), .aides li > :nth-child(4) { grid-column: 2; }
  .inviter { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .role__nom { font-size: 1.35rem; }
  .demo-tours { grid-template-columns: minmax(0, 1fr); }
  .demo-tours--1 { max-width: none; }
  .demo-tour__matchs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo .match__ligne { padding: .45rem .55rem; font-size: .88rem; }
  .match__note { margin-right: .35rem; }
  .demo-poules, .demo-duo { grid-template-columns: minmax(0, 1fr); }
  .demo-cal { gap: .2rem; }
  .demo-cal__jour { padding: .45rem .3rem; }
  .demo-cal__num { font-size: .95rem; }
  .demo-cal__date { font-size: .6rem; }
  .demo-cal__fait { top: .35rem; right: .3rem; width: .4rem; height: .4rem; }
  .demo-table th, .demo-table td { padding-inline: .3rem; }

  .direct-carte { padding: 1.1rem; }
  .direct-carte__public { text-align: left; }
  .direct-carte__score { font-size: 1.2rem; }
  .a-traiter li { grid-template-columns: minmax(0, 1fr); padding-inline: 1rem; }
  .chiffres__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}