/*
 * Buvette du club — feuille de style du site vitrine.
 *
 * THESIS. La page qu'un trésorier bénévole lit une fois, debout, avant de décider. Elle alterne des
 * bandes pleine largeur qui portent chacune une idée : bleu quand elle parle, papier quand elle
 * montre. Le cuivre n'apparaît que là où il faut agir ou regarder, et il n'a qu'une valeur.
 * FORM. Monde épinglé par la charte fournie : composition, typographie, iconographie, rythme des
 * bandes, ruban du palier, pied de page coloré. Aucun tirage de direction — le brief l'emporte.
 * OWN-WORLD. Les deux couleurs sont CELLES DE L'APPLICATION, reprises telles quelles :
 *   — le bleu oklch(0.30 0.055 265) = #202D49, son `--threshold-ground` ;
 *   — le cuivre oklch(0.6 0.13 55) = #BA6826, son `--accent`.
 * Ce sont les couleurs que le produit porte depuis le début, et le propriétaire a tranché le
 * 14 août 2026 qu'elles valaient pour les deux systèmes. Les couleurs du logo (257 / 65,6) ont été
 * essayées puis écartées : le blanc n'y tenait que 2,84:1 contre 4,12:1 sur ce cuivre. L'échange
 * n'est pas gratuit — le chaud posé SUR le bleu y perd, 3,33:1 ici contre 4,64:1 là-bas — et c'est
 * un arbitrage assumé : le propriétaire veut une seule couleur chaude, celle du bouton.
 * STORY. Il comprend en dix secondes que ça remplace son fichier Excel, voit des écrans réels,
 * lit un prix qu'il pourra faire voter, et écrit.
 * FIRST VIEWPORT. Bande bleue : barre en haut, titre en deux temps à gauche dont la seconde
 * phrase en cuivre — la couleur du bouton juste dessous — et la capture du tableau de bord à droite.
 *
 * Aucune couleur littérale hors de :root — une valeur en dur ailleurs signifie une teinte inventée.
 */

:root {
  /* ---- Le bleu : celui de L'APPLICATION, #202D49 ----
     C'est `--threshold-ground` de `frontend/src/index.css`, le panneau sombre de l'écran de
     connexion, teinte 265. Le site ne le dérive pas : il le copie. Les cinq barreaux qui suivent
     sont les mêmes que `--threshold-*` là-bas, plus deux que le site seul utilise (`lift` pour une
     carte posée dessus, `deep` pour la barre de pied).

     Le bleu du logo (oklch 0.310 0.066 257) a été posé ici une matinée puis retiré : plus fidèle
     au dessin, mais il emmenait avec lui un jaune sur lequel le blanc ne tenait pas. */
  --navy:          oklch(0.300 0.055 265);
  --navy-lift:     oklch(0.360 0.050 265);  /* une carte posée sur le marine */
  --navy-deep:     oklch(0.240 0.050 265);  /* la barre de pied, sous le jaune */
  --on-navy:       oklch(0.960 0.006 265);  /* 11,75:1 */
  --on-navy-soft:  oklch(0.820 0.018 265);  /*  7,56:1 */
  --navy-line:     oklch(0.460 0.040 265);

  /* ---- Le chaud : celui de L'APPLICATION, #BA6826 ----
     C'est `--accent` de `frontend/src/index.css`, teinte 55, et ses cinq rôles sont copiés avec
     lui : `hover`, `ink` (le chaud qui se lit sur le papier), `tint`, `line`.

     DEUX CHOIX DU PROPRIÉTAIRE TIENNENT CE BLOC, et aucun n'est une distraction :

     1. L'encre posée dessus est BLANCHE, 4,12:1 — au-dessus du seuil du grand texte (3,0), sous
        celui du texte courant (4,5). C'est pour ça que le survol ASSOMBRIT au lieu d'éclaircir.
     2. Ce cuivre est le SEUL chaud de la page, y compris posé sur le bleu, où il rend 3,33:1 :
        surtitres, liens, coches, guillemets et la seconde ligne du titre. Un barreau plus clair
        (0.78, 6,65:1) a existé une heure pour ces emplois-là et a été retiré — le propriétaire le
        trouvait pâlot et veut une seule couleur chaude. Ne pas le réintroduire sans le redemander. */
  --yellow:        oklch(0.600 0.130 55);
  --yellow-hover:  oklch(0.420 0.090 55);  /* le survol ASSOMBRIT : l'encre y est blanche */
  --yellow-ink:    oklch(0.450 0.100 55);  /*  7,11:1 : le jaune quand il doit se lire sur clair */
  --yellow-tint:   oklch(0.970 0.020 55);
  --yellow-line:   oklch(0.870 0.060 55);

  /* ---- Les neutres : rôles de la charte, teintés du bleu de l'application ---- */
  --steel:         oklch(0.780 0.024 265);  /* BLEU GRIS : les grands numéraux, jamais du texte */
  --mist:          oklch(0.945 0.012 265);  /* GRIS CLAIR : la bande « comment ça fonctionne » */
  --cream:         oklch(0.975 0.006 90);   /* CRÈME : le papier de la page */
  --surface:       #ffffff;

  --ink:           oklch(0.265 0.050 265);  /* 14,26:1 */
  --body:          oklch(0.440 0.028 265);  /*  7,22:1 */
  --muted:         oklch(0.530 0.020 265);  /*  4,91:1 — le plancher, pas en dessous */

  --line-strong:   oklch(0.860 0.012 265);
  --line:          oklch(0.900 0.010 265);
  --line-soft:     oklch(0.950 0.007 265);

  --green:         oklch(0.55 0.13 145);
  --green-soft:    oklch(0.955 0.03 145);
  --green-line:    oklch(0.87 0.05 145);

  /* Une seule ombre pleine, un seul rôle : « posé au-dessus ». Les cartes tiennent par un filet. */
  --shadow-shot:   0 24px 60px oklch(0.20 0.050 265 / 0.34);
  --shadow-card:   0 2px 10px oklch(0.30 0.055 265 / 0.06);
  /* Ce qui se pose SUR une capture, dans le pas à pas : le point numéroté (un halo blanc qui le
     détache de n'importe quelle image, puis une ombre courte) et la bulle qui répète son libellé. */
  --shadow-pin:    0 0 0 2px oklch(1 0 0 / 0.9), 0 2px 7px oklch(0.20 0.050 265 / 0.35);
  --shadow-bubble: 0 6px 18px oklch(0.20 0.050 265 / 0.32);

  --display: 'Poppins', system-ui, -apple-system, sans-serif;
  --sans:    'Inter', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  color: var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; }

a { color: var(--yellow-ink); }
a:hover { color: var(--ink); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--yellow-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Sur le marine, l'or d'encre disparaît : l'anneau y prend le jaune plein. */
.navy :where(a, button, input, textarea, select):focus-visible,
.nav :where(a, button):focus-visible,
.cta :where(a, button):focus-visible {
  outline-color: var(--yellow);
}

/* `padding-inline` et non `padding` : la gouttière est HORIZONTALE. Écrite en raccourci, elle
   remet à zéro le padding vertical de tout élément qui porte aussi `.section` ou `.hero` — et
   comme la variante mobile de `.wrap` vit en fin de feuille, elle gagnait sur eux et faisait
   disparaître tout le rythme vertical sous 620px. */
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 32px; }
/* Et `padding-block` de l'autre côté, pour la même raison en miroir : ces classes se portent
   AVEC `.wrap`, à spécificité égale et plus bas dans la feuille. Écrit en raccourci, leur `0`
   horizontal écrasait la gouttière — invisible au-dessus de 1244px, où la marge vient du
   centrage du `max-width`, et le texte collait aux deux bords sur toute la tablette. */
.section { padding-block: 92px; }
.section--tight { padding-block: 68px; }

/* ---------- les bandes ---------- */

/* La façade. Toute bande sombre du site passe par là, et rien d'autre ne prend cette couleur. */
/* `clip` et non `hidden` : l'arc du héros sort volontairement de sa colonne, et entre 1081px —
   où il cesse d'être masqué — et 1330px — où la marge du centrage l'absorbe — il poussait une
   barre de défilement horizontale sur toute la page. Rogné au bord, il garde son dessin ;
   `hidden` ferait de la bande un conteneur de défilement, ce qu'aucune décoration ne mérite. */
.navy { background: var(--navy); color: var(--on-navy-soft); overflow-x: clip; }
.navy h1, .navy h2, .navy h3, .navy h4 { color: var(--on-navy); }
/* `:not(.btn)` n'est pas une précaution : `.navy a` pèse 0-1-1 et `.btn` 0-1-0, donc sans lui un
   bouton jaune posé sur la façade reçoit du texte jaune sur fond jaune — invisible. */
.navy a:not(.btn) { color: var(--yellow); }
.navy a:not(.btn):hover { color: var(--on-navy); }

.mistband { background: var(--mist); }

/* ---------- titres de section ---------- */

/* Le titre centré et son trait tracé à la main dessous : c'est le motif de la charte, et il ne
   sert qu'aux ouvertures de bande. */
.head { text-align: center; max-width: 30em; margin: 0 auto 52px; }
/* `balance` répartit les lignes d'un titre centré au lieu de laisser un mot seul en dessous. */
.head h2 { font-size: 36px; line-height: 1.18; margin-bottom: 16px; text-wrap: balance; }
.head p { font-size: 18px; line-height: 1.6; color: var(--body); }
/* `--body` est un barreau du papier : sur le marine il tombe à 1,6:1. Le titre, lui, est déjà
   rattrapé par `.navy h2` ; sans cette ligne le paragraphe serait le seul à ne pas suivre. */
.navy .head p { color: var(--on-navy-soft); }
.head--left { text-align: left; margin-left: 0; }

/*
 * L'ouverture d'une page intérieure. Même bande marine que le héros de l'accueil, mais sans
 * capture à côté : le titre y tient seul le rôle que le héros tient là-bas, donc il en prend la
 * taille. Une page qui s'ouvrirait en 36px se lirait comme la section d'une autre page.
 */
/* Le titre prend la largeur utile : à 52px il tient sur une ligne, et `balance` le coupe en deux
   lignes égales quand la fenêtre se resserre. C'est la phrase dessous qui se cadre, pas lui. */
.pagehead { text-align: center; }
.pagehead h1 { font-size: 52px; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
.pagehead p { font-size: 19px; line-height: 1.6; color: var(--on-navy-soft); max-width: 34em; margin: 18px auto 0; }

.mark { position: relative; white-space: nowrap; }

/* Le trait passe SOUS les jambages, jamais dedans : sans cette réserve il barre les p et les g. */
.mark::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -11px;
  height: 9px;
  background: var(--yellow);
  /* Un coup de marqueur, pas une règle : les deux bouts s'affinent et le trait remonte à droite. */
  clip-path: polygon(0 42%, 100% 0, 100% 58%, 0 100%);
  border-radius: 4px;
}

.kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow-ink);
  margin-bottom: 14px;
}

.navy .kicker { color: var(--yellow); }

.intro { max-width: 40em; margin-bottom: 44px; }
.intro h2 { font-size: 36px; line-height: 1.15; margin-bottom: 14px; }
.intro p { font-size: 18px; line-height: 1.6; color: var(--body); }

.lede { font-size: 19px; line-height: 1.6; }
.note { font-size: 14px; line-height: 1.55; color: var(--muted); }
.ar { text-align: right; }

/* ---------- boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 26px;
  cursor: pointer;
}

/* Le bouton principal : fond jaune, encre marine (4,82:1). Le blanc sur ce jaune donne 2,84:1 —
   c'est le premier réflexe et la première erreur. */
.btn, .btn--primary { background: var(--yellow); color: var(--surface); }
.btn:hover, .btn--primary:hover { background: var(--yellow-hover); color: var(--surface); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

/* Le bouton discret d'une bande sombre, là où un second jaune serait de trop. */
.btn--on-navy { background: transparent; color: var(--on-navy); border-color: var(--navy-line); }
.btn--on-navy:hover { background: var(--navy-lift); color: var(--on-navy); border-color: var(--on-navy-soft); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--sm { font-size: 15px; padding: 11px 20px; }

/* ---------- la barre ---------- */

/* Une seule barre, deux contextes : sur l'accueil elle se fond dans le héros, sur une page
   intérieure elle garde le même marine et devient le haut de la page. */
.nav { background: var(--navy); }
.nav__inner { height: 80px; display: flex; align-items: center; gap: 30px; }
.nav__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
/*
 * La marque est une PASTILLE : `assets/logo-badge.svg`, le logo renversé (trait blanc, verre
 * jaune) posé sur un disque marine, dans le même fichier. Le fond fait partie du logo et ne
 * dépend plus de la bande qui le porte — sur la barre marine il se fond, sur le pied jaune il se
 * détache (4,64:1), et c'est la même image dans les deux cas. Rien à reconstruire en CSS.
 *
 * `assets/logo-mark.svg`, l'original à trait bleu, ne sert plus qu'aux fonds clairs, et
 * `logo-mark-white.svg` reste la version détourée pour qui aurait besoin du dessin sans disque.
 */
.nav__brand img { height: 44px; width: 44px; display: block; }

.nav__name {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--on-navy);
}

.nav__links { margin-left: auto; display: flex; align-items: center; gap: 26px; }

.nav__links a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--on-navy-soft);
}

.nav__links a:hover { color: var(--on-navy); }
.nav__links a.is-current { font-weight: 600; color: var(--on-navy); }

.nav__links a.pill {
  font-weight: 600;
  color: var(--surface);
  background: var(--yellow);
  border-radius: 10px;
  padding: 10px 20px;
}

.nav__links a.pill:hover, .nav__links a.pill.is-current { background: var(--yellow-hover); color: var(--surface); }

.nav__lang { display: flex; align-items: center; gap: 10px; padding-left: 2px; }

.nav__lang::before {
  content: "";
  width: 1px;
  height: 16px;
  background: var(--navy-line);
  margin-right: 6px;
}

.nav__lang a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--on-navy-soft);
}

.nav__lang a.is-current { color: var(--yellow); }

/* ---------- le héros ---------- */

.hero {
  display: grid;
  grid-template-columns: 46fr 54fr;
  gap: 56px;
  align-items: center;
  padding-block: 72px 88px;
}

.hero h1 {
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
  text-wrap: balance;
}

/* La seconde phrase prend le jaune plein — la même valeur que le bouton, pas un barreau clair
   dérivé pour l'occasion. 4,82:1 sur le marine. */
/* Le cuivre d'action, la même valeur que le bouton : c'est ce qui fait que le titre et l'appel à
   l'action sont exactement de la même couleur. Sur le bleu il rend 3,33:1 — au-dessus du seuil du
   grand texte (3,0), sous celui du texte courant (4,5). Choix du propriétaire, étendu le 14 août
   2026 à tout le chaud posé sur le bleu, surtitres et coches compris. */
.hero h1 em { font-style: normal; color: var(--yellow); display: block; }

.hero .lede { color: var(--on-navy-soft); margin-bottom: 30px; max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero__note { display: flex; flex-wrap: wrap; gap: 12px 30px; }

.hero__note span {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--on-navy-soft);
}

/* La coche en pastille de la charte. Le V est tracé par deux bords d'un carré vide qu'on tourne
   de 45° — le même geste que `.checks`, en jaune plein parce qu'on est sur le marine. */
.hero__note span::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1.5px solid var(--yellow);
}

.hero__note span::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 3.5px;
  margin: 7px 0 0 5.5px;
  border-left: 1.6px solid var(--yellow);
  border-bottom: 1.6px solid var(--yellow);
  transform: rotate(-45deg);
}

.hero__shot { position: relative; }

/* La capture est le seul objet de la page qui a une ombre pleine, parce que c'est le seul qui est
   posé sur autre chose. */
.shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--navy-line);
  box-shadow: var(--shadow-shot);
  position: relative;
  z-index: 1;
}

/* Les arcs jaunes de la charte : deux cercles dont on ne garde que le bord droit, posés derrière
   la capture. Décoration pure, sans contenu, et retirés dès que la colonne se replie. */
.hero__arc, .hero__arc::before {
  position: absolute;
  border: 3px solid transparent;
  border-right-color: var(--yellow);
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
}

.hero__arc {
  right: -58px;
  top: 12%;
  width: 300px;
  height: 76%;
}

.hero__arc::before {
  content: "";
  right: -22px;
  top: 12%;
  width: 250px;
  height: 76%;
  border-width: 2px;
  opacity: 0.65;
}

/* ---------- les six fonctionnalités ---------- */

.features { display: grid; grid-template-columns: repeat(6, 1fr); gap: 34px 24px; }
.feature { text-align: center; }

.feature svg {
  width: 34px;
  height: 34px;
  color: var(--yellow-ink);
  display: block;
  margin: 0 auto 16px;
}

.feature h3 { font-size: 16px; line-height: 1.3; margin-bottom: 8px; }
.feature p { font-size: 14px; line-height: 1.6; color: var(--body); }

/* ---------- comment ça fonctionne ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step { position: relative; }
.step__top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }

/* Le grand numéral est en bleu gris, pas en jaune : il compte, il ne réclame pas. */
.step__n {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--steel);
}

.step__icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--yellow-ink);
  flex-shrink: 0;
}

.step__icon svg { width: 24px; height: 24px; }

/* La flèche entre deux étapes : elle relie, donc elle ne s'affiche qu'en rangée. */
.step + .step::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 24px;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--yellow);
  border-right: 2px solid var(--yellow);
  transform: rotate(45deg);
  border-radius: 2px;
}

.step h3 { font-size: 19px; line-height: 1.25; margin-bottom: 8px; }
.step p { font-size: 15px; line-height: 1.62; color: var(--body); }

/* ---------- le split capture / texte ---------- */

.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split2--flip .split2__text { order: -1; }
.split2__text h2 { font-size: 32px; line-height: 1.18; margin-bottom: 16px; }
.split2__text p { font-size: 17px; line-height: 1.62; }

.shot--framed { border-color: var(--line); box-shadow: var(--shadow-card); }

/* La liste à coches jaunes : le même motif que le héros, en version claire. */
.checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }

.checks li {
  position: relative;
  padding-left: 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 1.5px solid var(--yellow-ink);
}

.checks li::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.8px solid var(--yellow-ink);
  border-bottom: 1.8px solid var(--yellow-ink);
  transform: rotate(-45deg);
}

/* ---------- les modules (les sept écrans) ---------- */

.modules { display: flex; flex-direction: column; gap: 84px; }
/* `min-width: 0` sur la colonne image : sans lui, une capture large force la piste de grille et
   fait déborder toute la section. */
.module__media { min-width: 0; }
.module { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.module--flip .module__text { order: 2; }

.module__num {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--yellow-ink);
  margin-bottom: 10px;
}

.module__text h3 { font-size: 28px; line-height: 1.2; margin-bottom: 14px; }
.module__text p { font-size: 17px; line-height: 1.62; color: var(--body); }
.shot--module { border-color: var(--line); box-shadow: var(--shadow-card); }

/* ---------- les trois constats, sur la façade ---------- */

/* La charte pose ici trois cartes de témoignage. Le site n'a aucun témoignage réel et PRODUCT.md
   interdit d'en fabriquer : la composition est gardée, remplie de ce que le produit peut dire. */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.trio__card {
  background: var(--navy-lift);
  border: 1px solid var(--navy-line);
  border-radius: 16px;
  padding: 30px 28px;
}

.trio__mark {
  font-family: var(--display);
  font-size: 40px;
  line-height: 0.9;
  color: var(--yellow);
  margin-bottom: 12px;
}

.trio__card b {
  display: block;
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--on-navy);
  margin-bottom: 10px;
}

.trio__card span { font-size: 15px; line-height: 1.62; color: var(--on-navy-soft); }

/* ---------- les cartes de tarif ---------- */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }

.plan {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}

.plan__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan__name { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); }

/* Le ruban de la charte : posé à cheval sur le bord haut de la carte mise en avant. Sur la page
   des tarifs, le calculateur peut le déplacer (`.is-picked`). */
.plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--yellow);
  color: var(--surface);
  border-radius: 8px;
  padding: 6px 16px;
  display: none;
}

.plan--feature .plan__badge, .plan.is-picked .plan__badge { display: inline-block; }

/* Le palier désigné ne grossit pas et ne change pas de fond : la comparaison qu'on est venu
   faire doit rester possible. Il prend un filet jaune, et c'est tout. */
.plan--feature, .plan.is-picked { border: 2px solid var(--yellow); }

/* Le palier « sur demande » n'a pas de prix à comparer : il se pose sur le gris clair pour qu'on
   voie tout de suite qu'il ne joue pas dans la même colonne. */
.plan--ask { background: var(--mist); border-color: transparent; }

.plan__price { display: flex; align-items: baseline; gap: 7px; margin-top: 20px; min-height: 54px; }

.plan__price b {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.plan__price span { font-size: 15px; color: var(--muted); }
.plan__price--ask b { font-size: 24px; }

.plan__incl { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 12px; }
.plan__beyond { font-size: 15px; color: var(--muted); margin-top: 4px; }
.plan__spacer { flex: 1; min-height: 22px; }

.plan__anchor {
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.plan__anchor--link a { font-weight: 600; text-decoration: none; }
.plan__anchor--link a:hover { text-decoration: underline; }

/* ---------- le tableau de comparaison ---------- */

.table { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }

.table__head, .table__row {
  display: grid;
  grid-template-columns: 1.1fr 2.2fr 0.9fr;
  gap: 20px;
  padding: 16px 24px;
  align-items: baseline;
}

.table__head {
  background: var(--mist);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.table__row + .table__row { border-top: 1px solid var(--line-soft); }
.table__row .club { font-family: var(--display); font-weight: 700; color: var(--ink); }
.table__row .detail { font-size: 15px; color: var(--body); }
.table__row .total { font-family: var(--display); font-weight: 700; color: var(--ink); text-align: right; }

/* ---------- le calculateur ---------- */

.calc { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 40px 38px; }
.calc__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.calc h2 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
.calc .lede { font-size: 17px; color: var(--body); margin-bottom: 26px; }

.calc__field { display: flex; align-items: center; gap: 12px; }

.calc__field button {
  width: 46px;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}

.calc__field button:hover { border-color: var(--ink); }

.calc__field input {
  width: 118px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--surface);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}

.calc__field input::-webkit-outer-spin-button,
.calc__field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.calc__field label { font-size: 15px; line-height: 1.35; color: var(--muted); }

.verdict { background: var(--mist); border-radius: 16px; padding: 28px 26px; }

.verdict__title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}

.verdict__detail { font-size: 15px; color: var(--body); }
.verdict__list { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }

.verdict__row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 15px; color: var(--muted); }
.verdict__row .dots { flex: 1; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.verdict__row .amt { font-weight: 600; color: var(--body); white-space: nowrap; }
.verdict__row.is-picked { color: var(--ink); font-weight: 600; }
.verdict__row.is-picked .amt { color: var(--ink); font-weight: 700; }
.verdict__note { font-size: 14px; line-height: 1.55; color: var(--muted); margin-top: 14px; }

/* ---------- questions fréquentes ---------- */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 46px; margin: 0; }
.faq dt { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.faq dd { margin: 0; font-size: 15px; line-height: 1.62; color: var(--body); }

/* ---------- cartes, garanties, encarts ---------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 24px; }
.card--tint { background: var(--mist); border-color: transparent; }
.card h3 { font-size: 18px; margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--body); }
.card__rows { display: flex; flex-direction: column; gap: 14px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }

/* ---------- les deux portes : gérer le club, organiser un tournoi ---------- */

/* Deux produits, deux cartes de même poids : aucune n'est la « vraie » et l'autre un module. Le prix
   en une ligne au bas de chacune, parce que c'est la question qu'on se pose en lisant la carte. */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.door { display: flex; flex-direction: column; padding: 32px 28px; }
.door h3 {
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 12px;
}
.door p { font-size: 16px; line-height: 1.62; }
.door .checks { margin: 18px 0 20px; }
.door__price { margin-top: auto; margin-bottom: 18px; font-weight: 600; color: var(--ink); }
.door .btn { align-self: flex-start; }

/* Les portes d'entrée de l'aide. En grille et non en liste : quatre titres empilés laissent la
   moitié droite d'un écran large vide, alors que ce sont justement les quatre pages qu'on vient
   chercher. La grille tombe à une colonne sous 760 px, où l'empilement est le bon geste. */
.tutos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
/* La grille prend toute la largeur, quand le reste du guide reste à la largeur d'une colonne
   de texte ; et les cartes n'ajoutent pas leur marge par-dessus l'écart de la grille. */
.guide > .tutos { max-width: none; }
.guide > .tutos .card { margin: 0; }
.tuto { display: block; text-decoration: none; color: inherit;
        transition: border-color 0.15s ease, transform 0.15s ease; }
.tuto:hover, .tuto:focus-visible { border-color: var(--yellow); transform: translateY(-2px); }
.tuto__who { display: block; font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase;
             color: var(--muted); }
.tuto__title { font-family: var(--display); font-size: 21px; font-weight: 700; line-height: 1.25;
               letter-spacing: -0.01em; color: var(--ink); margin: 10px 0; }
.tuto:hover .tuto__title { color: var(--yellow-ink); }
.tuto p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--body); }
@media (prefers-reduced-motion: reduce) { .tuto { transition: none; } .tuto:hover { transform: none; } }
@media (max-width: 760px) { .tutos { grid-template-columns: 1fr; gap: 16px; } }

/* Le menu de l'aide, au bas de chaque fiche. Il porte le groupe ENTIER dans son ordre de
   lecture, la page courante marquée et non cliquable : les listes partielles d'avant, différentes
   d'une fiche à l'autre, laissaient des pages qu'on n'atteignait que depuis l'index — et
   plusieurs fiches n'avaient même pas de retour vers lui. */
.menu-aide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
             gap: 26px 44px; margin: 22px 0 0; }
.guide > .menu-aide { max-width: none; }
.menu-aide h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
                color: var(--yellow-ink); margin: 0 0 12px; }
.guide > .menu-aide h3 { font-size: 12px; margin: 0 0 12px; }
.menu-aide ol { margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.menu-aide li { counter-increment: etape; display: flex; gap: 10px; font-size: 16px; line-height: 1.5;
                padding: 7px 0; border-top: 1px solid var(--line); }
.menu-aide li::before { content: counter(etape); flex: 0 0 1.4em; color: var(--muted);
                        font-variant-numeric: tabular-nums; }
.menu-aide li[aria-current] { color: var(--ink); font-weight: 600; }
.menu-aide a { color: var(--body); text-decoration: none; border-bottom: 1px solid transparent; }
.menu-aide a:hover, .menu-aide a:focus-visible { color: var(--ink); border-bottom-color: var(--yellow); }
.menu-aide + .note { margin-top: 20px; }
@media (max-width: 760px) { .menu-aide { grid-template-columns: 1fr; gap: 22px; } }

.guarantees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.guarantees b {
  display: block;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
}

.guarantees span { font-size: 15px; line-height: 1.6; color: var(--body); }

.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.steps3 > div { background: var(--surface); padding: 26px 24px; }
.steps3 .n { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: 0.08em; color: var(--yellow-ink); margin-bottom: 10px; }
.steps3 b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 7px; }
.steps3 span { font-size: 15px; line-height: 1.6; color: var(--body); }

/* ---------- l'échange : ce que le membre fait, ce que le comité ne fait plus ----------
   L'argument EST l'appariement. Une ligne de gauche seule n'est qu'une fonctionnalité de plus ;
   c'est la colonne de droite qui la traduit en travail sorti du comité, et c'est ça que le
   trésorier achète. La flèche cuivre tient les deux ensemble et bascule vers le bas quand la paire
   s'empile — sans elle, empilée, la conséquence se lirait comme une sixième ligne de gauche. */
.swap { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }

.swap__head, .swap__row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 22px 26px; }

.swap__head {
  background: var(--mist);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.swap__row + .swap__row { border-top: 1px solid var(--line-soft); }

.swap__row b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
}

.swap__row p { font-size: 15px; line-height: 1.62; color: var(--body); }

/* Pas de gras dans la colonne de droite : la gauche est le geste, la droite n'en est que la
   conséquence, et deux gras côte à côte les mettraient à égalité. */
.swap__then { position: relative; }

.swap__then::before {
  content: "\2192";
  position: absolute;
  left: -26px;
  top: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--yellow-ink);
}

/* La colonne de droite de la page contact : une pile de cartes, pas un panneau. */
.aside { display: flex; flex-direction: column; gap: 18px; }
.card b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); margin-bottom: 6px; }

/* L'objection tarifaire : la question que le trésorier se pose vraiment, posée en grand. */
.quote { background: var(--mist); border-radius: 20px; padding: 34px 32px; }

.quote b {
  display: block;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 14px;
}

.quote p { font-size: 17px; line-height: 1.6; color: var(--body); }

/* ---------- l'appel final ---------- */

/*
 * La dernière bande parle, donc elle est marine, comme le héros et les constats. Elle a d'abord
 * été un panneau arrondi posé sur le papier, collé au pied de page par un `padding-bottom:0` :
 * ses deux coins bas découpaient alors deux encoches jaunes dans le marine. Une bande pleine
 * largeur n'a pas de coins, et la page se referme marine → jaune → marine.
 */
.cta { text-align: center; }
/* Le bouton appartient à la phrase qui l'appelle : il reste plus près d'elle que les 52px
   qu'une ouverture de bande met avant son contenu. */
.cta .head { max-width: 34em; margin-bottom: 32px; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

/* ---------- pied de page ---------- */

/*
 * La seule bande jaune du site, et la seule fois où cette couleur porte du texte long. L'encre y
 * est BLANCHE — un choix assumé du propriétaire du site, pris en voyant les deux versions rendues
 * côte à côte : le blanc sur ce jaune donne 2,84:1, sous le seuil AA. Ne pas « corriger » ce
 * fichier vers le marine sans le lui redemander. Une deuxième section jaune ferait de l'exception
 * une habitude et éteindrait la règle.
 */
.foot { background: var(--yellow); color: var(--surface); padding: 56px 0 0; }
.foot__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
/* `h3` et non `h4` : les titres de colonne suivent un `h2` — celui de la dernière bande — et un
   saut de niveau casse le plan du document, dont un lecteur d'écran se sert pour naviguer. Le pas
   typographique, lui, ne bouge pas : c'est le rang qui était faux, pas la taille. */
.foot h3 { font-family: var(--display); font-size: 15px; color: var(--surface); margin-bottom: 16px; }
.foot__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot__brand img { height: 52px; width: 52px; }
.foot__brand span { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--surface); }
.foot p { font-size: 15px; color: var(--surface); max-width: 26em; }
.foot__links { display: flex; flex-direction: column; gap: 10px; }
.foot__links a { font-size: 15px; color: var(--surface); text-decoration: none; }
.foot__links a:hover { text-decoration: underline; color: var(--surface); }
/* Un lien posé DANS un paragraphe du pied — l'adresse en clair sous le bouton — n'est pas dans
   `.foot__links` et retombait donc sur l'or d'encre : du cuivre foncé sur du cuivre, illisible.
   Il prend le blanc du reste de la bande, et le soulignement le garde reconnaissable comme lien
   sans dépendre de la couleur. */
.foot p a:not(.btn) { color: var(--surface); text-decoration: underline; }
/* `:not(.btn)` pour la même raison que sur la façade : le bouton « Nous contacter » est un
   `<a>` posé dans un `<p>`, et il repartait souligné. */
/* Le bouton du pied s'inverse avec le reste : marine plein sur le jaune, encre claire. */
.foot .btn--secondary { background: var(--navy); color: var(--on-navy); border-color: transparent; }
.foot .btn--secondary:hover { background: var(--navy-deep); color: var(--on-navy); border-color: transparent; }

/* La barre du bas repasse au marine : la page se referme sur la couleur avec laquelle elle
   s'est ouverte. */
.foot__bar { background: var(--navy-deep); color: var(--on-navy-soft); font-size: 14px; }

.foot__bar > div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------- formulaire de contact ---------- */

.form { display: flex; flex-direction: column; gap: 26px; }
.form__group { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form__send { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field > span, .field > legend {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 0;
  margin-bottom: 7px;
}

.field input, .field textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 13px 15px;
}

.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--ink); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--sizes .chip span { min-width: 92px; text-align: center; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }

.chip span {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
}

.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.chip input:focus-visible + span { outline: 2px solid var(--yellow-ink); outline-offset: 3px; }

.notice { display: none; border-radius: 12px; padding: 16px 18px; font-size: 15px; line-height: 1.55; margin-bottom: 24px; }
.notice b { font-weight: 700; }
.notice--ok { background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green); }
.notice--ko { background: var(--yellow-tint); border: 1px solid var(--yellow-line); color: var(--yellow-ink); }
.notice:target, .notice.is-on { display: block; }

.contact { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; padding-top: 72px; padding-bottom: 92px; }
.contact > div > .lede { margin-bottom: 34px; }
.hp { position: absolute; left: -9999px; }

/* ---------- divers ---------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow-ink);
  margin-bottom: 20px;
}

.navy .badge { color: var(--yellow); }

/*
 * Le bloc « d'où vient le nom ». La colonne de gauche ne portait qu'un titre court, dans une
 * hauteur dictée par le texte de droite : elle laissait un trou de plusieurs centaines de pixels
 * juste avant l'appel final. Trois corrections, et aucune n'est du remplissage :
 *   — la marque y prend place, parce que la section demande d'où vient le nom et que le verre du
 *     logo est la réponse ;
 *   — les deux colonnes se centrent l'une sur l'autre au lieu de s'aligner en haut ;
 *   — la colonne de gauche est plus étroite que celle du texte, ce qu'un titre demande.
 * La bande passe au gris clair : trois sections sur papier se suivaient, l'alternance était perdue.
 */
.split { display: grid; grid-template-columns: 0.78fr 1fr; gap: 60px; align-items: center; }
.split p { font-size: 17px; line-height: 1.65; }
.split p + p { margin-top: 16px; }
.split__mark img { width: 76px; height: 76px; display: block; margin-bottom: 22px; }
.split__mark h2 { font-size: 32px; line-height: 1.15; }

/* Un titre pour le plan du document, pas pour l'œil : la page de contact n'a que son `h1`, et
 * ses deux colonnes n'annoncent rien. Un lecteur d'écran n'y a donc aucun point de saut, et le
 * pied — dont les titres sont des `h3` — se retrouvait à sauter un niveau. `clip-path` plutôt que
 * `display:none`, qui retirerait aussi le titre de l'arbre d'accessibilité, ce qui est l'inverse
 * du but. */
.a11y {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- pages d'aide ----------
 * Les guides sont le premier texte long du site : tout le reste tient en cartes, en listes et en
 * bandes. Un seul bloc suffit, et il ne fait qu'une chose — borner la mesure. À 34em, l'œil
 * retrouve le début de la ligne suivante ; sur les 1180px du `wrap`, il le perd une ligne sur trois.
 * Les intertitres sont plus petits que ceux des bandes (28 contre 36) : ici ils rythment une
 * lecture suivie, ils n'annoncent pas une section qu'on survole.
 */
.guide { max-width: 34em; margin: 0 auto; }
.guide > h2 { font-size: 28px; line-height: 1.22; margin-bottom: 14px; }
.guide > h2 ~ h2 { margin-top: 56px; }
.guide p { font-size: 17px; line-height: 1.68; color: var(--body); }
.guide p + p { margin-top: 16px; }
.guide .checks { margin-bottom: 10px; }
.guide .card, .guide .quote { margin: 28px 0; }
/* La référence donnée en exemple se lit comme un objet, pas comme une phrase : posée sur le gris
   clair, centrée, au pas de Quote title. Sans ça, `.guide p` la ramenait au corps du texte et elle
   passait inaperçue au milieu du paragraphe qui l'annonce. */
.guide .ref {
  font-family: var(--display); font-size: 24px; color: var(--ink);
  background: var(--mist); border-radius: 12px; padding: 18px 22px; margin: 22px 0; text-align: center;
}

/* ---------- pages légales ---------- */

/* Sur la barre du bas, à la suite du copyright. Les liens y sont discrets à dessein : ils doivent
   être trouvables depuis n'importe quelle page, pas concurrencer ce qui s'y vend. */
.foot__legal a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.foot__legal a:hover { opacity: 1; }


/* ── Les pages légales : le sommaire dans la marge ────────────────────────────────────────────
   Ces trois textes faisaient dix écrans d'un ruban de 34em au milieu d'une page vide, et
   paraissaient étroits parce qu'ils l'étaient — mais la mesure n'est pas le problème : 34em est
   ce qui rend un texte long lisible, et l'élargir aurait raccourci la page en la rendant plus
   pénible à lire. Ce qui manquait n'était pas de la largeur, c'était de savoir où l'on se
   trouve. Le sommaire occupe donc la place vide, et la longueur cesse de compter. */
.legal {
  display: grid;
  grid-template-columns: minmax(0, 16em) minmax(0, 34em);
  gap: 64px;
  justify-content: center;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 2px;
  padding-right: 16px;
  border-right: 1px solid var(--line);
}

.legal-toc a {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 0;
}

.legal-toc a:hover { color: var(--ink); }

/* Le titre visé garde de l'air sous la barre de navigation quand on lui saute dessus. */
.legal .guide > h2 { scroll-margin-top: 88px; }

/* `.guide > h2 ~ h2` n'aère que les titres suivants : le premier collait au paragraphe d'entrée,
   ce qui se voyait peu sur une page de guide et beaucoup sur dix articles numérotés. */
.legal .guide > p + h2 { margin-top: 48px; }

/* Sous 1080px la marge n'existe plus : le sommaire repasse au-dessus du texte, sur deux colonnes,
   et cesse d'être collant — un bloc collant sur un petit écran mange la moitié de ce qu'on lit. */
@media (max-width: 1080px) {
  .legal { grid-template-columns: minmax(0, 34em); gap: 0; }
  .legal-toc {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    padding: 0 0 20px;
    margin-bottom: 36px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 620px) {
  .legal-toc { grid-template-columns: minmax(0, 1fr); }
}

/* Les trois textes réutilisent `.guide` : même colonne de 34em, mêmes titres, même corps. Ne
   s'ajoute ici que ce qu'un guide n'a pas — une liste de faits et des sous-titres d'annexe. */

.guide > h3 { font-size: 20px; line-height: 1.3; margin: 32px 0 10px; }

.guide ul:not(.checks) { margin: 16px 0 0; padding-left: 22px; }
.guide ul:not(.checks) li { font-size: 17px; line-height: 1.68; color: var(--body); }
.guide ul:not(.checks) li + li { margin-top: 10px; }
/* `.guide p + p` porte la respiration entre paragraphes ; une liste intercalée la perdait, et la
   phrase qui conclut une énumération se collait au dernier point. */
.guide ul + p, .guide dl + p, .guide ol + p { margin-top: 16px; }

/* Une ligne par fait, l'étiquette au-dessus de la valeur : à 34em, deux colonnes rendraient
   « Numéro d'entreprise » illisible sur un téléphone. */
.facts { margin: 22px 0 0; }
.facts > div { padding: 12px 0; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.facts dd { font-size: 17px; line-height: 1.5; color: var(--ink); margin-top: 4px; }

/* ---------- adaptation ---------- */

@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .foot__inner { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding-block: 56px 68px; }
  .hero h1 { font-size: 44px; }
  .hero__arc { display: none; }
  .calc__grid { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 900px) {
  .section { padding-block: 64px; }
  .plans, .trio, .guarantees, .faq, .split, .split2, .module, .contact, .doors { grid-template-columns: 1fr; }
  /* Empilée, la gouttière de 60px devient un trou vertical entre le titre et son texte. */
  .split { gap: 28px; }
  .module--flip .module__text, .split2--flip .split2__text { order: 0; }
  .modules { gap: 60px; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  /* Empilées, les étapes ne sont plus reliées de gauche à droite : la flèche perdrait son sens. */
  .step + .step::before { display: none; }
  .steps3 { grid-template-columns: 1fr; }
  .head h2, .intro h2 { font-size: 30px; }
  .guide > h2 { font-size: 26px; }
  .guide > h2 ~ h2 { margin-top: 44px; }
  .table__head, .table__row { grid-template-columns: 1fr; gap: 4px; }
  .swap__head { display: none; }
  .swap__row { grid-template-columns: 1fr; gap: 16px; }
  .swap__then::before { content: "\2193"; position: static; display: block; margin-bottom: 6px; }
  .table__row .total, .ar { text-align: left; }
}

/* La barre casse bien avant le reste : sur une seule ligne, « À propos » et le bouton passaient
   déjà sur deux lignes vers 800px, longtemps avant que la mise en page mobile ne prenne le relais. */
@media (max-width: 860px) {
  .nav__inner { height: auto; padding-block: 16px; flex-wrap: wrap; gap: 14px 20px; }
  .nav__links { margin-left: 0; gap: 16px; flex-wrap: wrap; }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 20px; }
  .features { grid-template-columns: 1fr 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .form__row, .duo { grid-template-columns: 1fr; }
  .calc { padding: 28px 22px; }
  .foot__bar > div { padding: 18px 20px; }
}

/* L'empreinte d'un texte légal : elle se compare, elle ne se lit pas. En pleine longueur — une
   empreinte tronquée ne se compare à rien — et coupée où il faut pour ne pas déborder d'un
   téléphone. */
.legal-fingerprint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* Une capture d'écran dans une colonne de lecture. La colonne fait 34em pour que le texte se lise ;
   une capture y rentrerait à 600 px et ses chiffres deviendraient illisibles. Elle déborde donc des
   deux côtés, autant que la fenêtre le permet, et redevient sage dès que la place manque. */
.guide figure {
  margin: 30px 0;
  width: min(880px, calc(100vw - 48px));
  margin-left: calc(min(0px, (34em - min(880px, 100vw - 48px)) / 2));
}
.guide figure .shot {
  border-color: var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 12px;
  /* Les captures de l'espace membre sont au format téléphone : à la largeur du texte, elles
     faisaient deux fois sa hauteur et avalaient la page. On borne donc la HAUTEUR, la largeur
     suivant le rapport d'origine — une capture de téléphone reste lisible à 300 px de large. */
  max-height: 600px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
}
.guide figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
@media (max-width: 900px) {
  .guide figure { width: 100%; margin-left: 0; }
}

/* Sur grand écran, la largeur sert à la MISE EN PAGE, pas à la longueur des lignes. Une colonne
   de 34em centrée dans le vide, ponctuée de captures de 880px plus larges qu'elle, était le
   reproche qui revenait à chaque page livrée. Le texte garde donc sa mesure lisible à gauche,
   les captures passent à droite, et la page occupe l'écran. En dessous de 1200px on retombe sur
   la colonne unique, où empiler reste la seule disposition tenable. */
@media (min-width: 1200px) {
  .guide {
    max-width: none;
    width: min(1440px, calc(100vw - 96px));
    margin-left: calc((100% - min(1440px, 100vw - 96px)) / 2);
  }
  /* 56em et non 34 : à 34, le texte restait une bande étroite collée à gauche et la moitié
     droite de l'écran restait vide sous la capture. À 56, il remplit la place laissée par
     la capture flottante, et reste lisible quand il n'y en a pas. */
  .guide > * { max-width: 56em; }
  /* Un flottant se pose là où il APPARAÎT dans le flux : écrit après les paragraphes, il descend
     sous eux et l'écran montre du texte en haut à gauche, une image plus bas à droite, et un vide
     entre les deux. La capture doit donc être écrite juste sous le titre de sa section — c'est une
     contrainte du balisage, que la feuille de style ne peut pas rattraper. */
  .guide > figure {
    float: right;
    clear: right;
    width: auto;
    max-width: 46%;
    margin: 4px 0 28px 56px;
  }
  /* Sans cela, un titre de section viendrait se loger contre une capture encore flottante. */
  .guide > h2 { clear: both; }
  /* Les pages légales réutilisent `.guide`, mais leur largeur vient de la grille de `.legal` : le
     sommaire dans la marge, le texte dans sa colonne de 34em. Élargi comme une fiche d'aide, le
     texte sortait de sa colonne et passait sous le sommaire collant. */
  .legal .guide {
    width: auto;
    margin-left: 0;
  }
  .legal .guide > * { max-width: none; }
}


/* ---------- le pas à pas guidé ---------- */

/* Une étape à la fois, mais TOUTES écrites dans la page. Sans JavaScript, elles s'affichent à la
   suite et la fiche reste lisible et imprimable ; avec, le script n'en montre qu'une et pose les
   commandes. C'est l'ordre qui compte : la page marche d'abord, le script l'améliore ensuite. */
.wt { max-width: none; }

.wt-bar { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.wt-track { flex: 1; height: 6px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.wt-fill { height: 100%; background: var(--navy); border-radius: 3px; transition: width 220ms ease; }
.wt-count { font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
            text-transform: uppercase; color: var(--muted); white-space: nowrap; }

.wt-steps { list-style: none; margin: 0; padding: 0; }
.wt-step { display: grid; gap: 28px 48px; align-items: start; scroll-margin-top: 90px; }
@media (min-width: 1000px) { .wt-step { grid-template-columns: minmax(0, 34%) minmax(0, 1fr); } }

/* Sans script, un filet sépare les étapes. Avec, une seule est visible et le filet n'a plus lieu. */
.wt-step + .wt-step { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
.wt[data-on] .wt-step + .wt-step { margin-top: 0; padding-top: 0; border-top: 0; }
.wt[data-on] .wt-step[hidden] { display: none; }

.wt-where { font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
            text-transform: uppercase; color: var(--yellow-ink); margin: 0 0 10px; }
.wt-step h2 { font-size: 26px; line-height: 1.22; margin: 0 0 14px; }
.wt-step p { font-size: 16.5px; line-height: 1.66; color: var(--body); margin: 0 0 12px; }
.wt-step .checks { margin: 16px 0; }
/* `.notice` est caché par défaut : c'est la réponse du formulaire de contact, qui ne s'affiche qu'à
   son ancre. Dans une étape, c'est un encadré qui doit se lire d'emblée ; sans cette règle, les
   quarante-quatre encadrés des pas à pas n'avaient jamais été visibles. Le neutre prend le gris de
   la bande « comment ça fonctionne », le vert garde son fond ; le texte reste celui du corps, le vert
   sur vert clair ne tenait que 4,07:1. */
.wt-step .notice { display: block; margin: 16px 0; background: var(--mist); border: 1px solid var(--line); color: var(--body); }
.wt-step .notice--ok { background: var(--green-soft); border-color: var(--green-line); }

.wt-shot { margin: 0; }

/* Le cadre de l'image, et rien d'autre. Les points se posent en pourcentage de LEUR CONTENEUR :
   tant que c'était la figure entière, la légende et le texte sous l'image entraient dans le
   calcul, et tous les points glissaient vers le bas dès qu'on allongeait la légende. */
.wt-frame { position: relative; display: block; }
.wt-shot img { display: block; width: 100%; height: auto; border-radius: 12px;
               border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.wt-shot figcaption { margin-top: 11px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Le repère, et ce qu'il a coûté d'apprendre : une pastille portant son libellé RECOUVRE le bouton
   qu'elle désigne. On ne montre plus rien, on cache. Le repère est donc réduit à un point numéroté,
   et le libellé descend dans une légende sous l'image. Rien n'est masqué, et la légende se lit
   aussi sur un téléphone, où une étiquette flottante serait de toute façon illisible. */
.wt-pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
          display: inline-flex; align-items: center; justify-content: center;
          width: 20px; height: 20px; border-radius: 50%;
          background: var(--yellow); color: var(--surface); cursor: help;
          font-family: var(--display); font-size: 11.5px; line-height: 1;
          box-shadow: var(--shadow-pin); }
@media (max-width: 720px) { .wt-pin { width: 17px; height: 17px; font-size: 10px; } }

/* Les fiches membres servent deux captures : un téléphone sous 900 px, un écran d'ordinateur
   au-dessus — exactement la bascule du <source media> de leur <picture>. Un point n'y a donc pas
   une position mais deux, et --xp/--yp portent celle de la capture large. Les figures qui ne
   servent qu'une seule image n'en déclarent pas : var() retombe alors sur la première. */
@media (min-width: 900px) {
  .wt-pin { left: var(--xp, var(--x)); top: var(--yp, var(--y)); }
}

/* La bulle ne paraît qu'au survol, et le point reste visible en permanence. Une étiquette
   toujours affichée recouvrait le bouton qu'elle désignait : on ne montrait plus, on cachait.
   Elle répond aussi au clavier, et la légende sous la figure la double pour le tactile, où il
   n'y a pas de survol du tout. */
.wt-pin-say { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
              padding: 7px 13px; border-radius: 999px; background: var(--navy); color: var(--on-navy);
              font-family: var(--sans); font-size: 13.5px; font-weight: 600; white-space: nowrap;
              box-shadow: var(--shadow-bubble);
              opacity: 0; visibility: hidden; transition: opacity 140ms ease;
              pointer-events: none; z-index: 2; }
.wt-pin:hover .wt-pin-say,
.wt-pin:focus-visible .wt-pin-say { opacity: 1; visibility: visible; }
.wt-pin:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
@media (hover: none) { .wt-pin-say { display: none; } }
@media (prefers-reduced-motion: reduce) { .wt-pin-say { transition: none; } }

/* La légende : le numéro, puis ce qu'il désigne. Elle remplace les étiquettes posées sur l'image. */
.wt-legend { margin: 12px 0 0; padding: 0; list-style: none; display: flex;
             flex-direction: column; gap: 6px; }
.wt-legend li { display: flex; align-items: baseline; gap: 10px;
                font-size: 14.5px; line-height: 1.5; color: var(--body); }
.wt-legend b { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
               width: 20px; height: 20px; border-radius: 50%; background: var(--yellow);
               color: var(--surface); font-family: var(--display); font-size: 12px; font-weight: 400; }

.wt-nav { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.wt-dots { display: flex; gap: 7px; margin-left: auto; }
.wt-dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
          background: var(--line-strong); cursor: pointer; }
.wt-dot[aria-current="true"] { background: var(--navy); }

/* Le sommaire : sans script il sert de plan, avec script il sert de table des matières cliquable. */
.wt-plan { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--line); }
.wt-plan ol { margin: 0; padding-left: 20px; }
.wt-plan li { font-size: 16px; line-height: 1.7; color: var(--body); }
.wt-plan li[aria-current="step"] { color: var(--ink); font-weight: 600; }

/* ---------- pages produit, depuis septembre 2026 ----------
 * Trois ajouts qui servent la largeur plutôt qu'une colonne : un bandeau d'en-tête plus large pour
 * les sections qui présentent un temps fort, le rail des cinq temps du tournoi, et le calculateur
 * d'un tournoi, qui reprend la carte et le verdict du calculateur de palier. */

.head--wide { max-width: 44em; }
.head .kicker { margin-bottom: 12px; }

/* Le rail de la console, en texte : il annonce les cinq blocs qui suivent. Une flèche entre deux
   temps et pas de numéro — les blocs portent déjà 01 à 05. */
.phases {
  list-style: none; margin: 0 0 72px; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
}
.phases li {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px;
}
.phases li + li::before {
  content: "\2192"; position: absolute; left: -12px; top: 50%; transform: translate(-50%, -50%);
  color: var(--yellow-ink); font-weight: 700;
}
.phases b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.phases span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); margin-top: 4px; }

/* Le calculateur d'un tournoi : deux champs et un choix à trois, le verdict à droite. Le choix est
   un groupe de boutons radio vêtus en segments — un clavier et un lecteur d'écran y retrouvent un
   vrai groupe, pas trois liens. */
.tcalc__title { font-size: 24px; line-height: 1.2; margin-bottom: 22px; }
.tcalc__modes { border: 0; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tcalc__modes legend { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0; }
.tcalc__modes label { position: relative; cursor: pointer; }
.tcalc__modes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tcalc__modes span {
  display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-strong);
  font-size: 15px; font-weight: 600; color: var(--body); background: var(--surface);
}
.tcalc__modes input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.tcalc__modes input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.tcalc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tcalc__field > label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.tcalc__money { display: flex; align-items: center; gap: 10px; }
.tcalc__money input { width: 110px; }
.tcalc__money span { font-size: 15px; color: var(--muted); }
.tcalc__money input, .tcalc .calc__field input {
  height: 52px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface);
  font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--ink); text-align: center;
  -moz-appearance: textfield;
}
.tcalc .calc__field input { width: 96px; }
.tcalc__money input::-webkit-outer-spin-button, .tcalc__money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.verdict__sub { font-size: 13px; line-height: 1.45; color: var(--muted); margin: -2px 0 6px; }
.tcalc .verdict__title { text-wrap: balance; }
.tcalc__foot { text-align: center; margin-top: 18px; }
/* `display: flex` sur le groupe l'emporterait sur l'attribut : sans cette ligne, « Les joueurs
   paient » resterait affiché sur un tournoi gratuit. */
.tcalc [hidden] { display: none; }
.tcalc__ladder { display: grid; gap: 10px; margin: -8px 0 24px; }
.tcalc__tier { display: grid; grid-template-columns: minmax(0, 13em) 96px 16px 32px; justify-content: start; align-items: center; gap: 10px; }
.tcalc__tier label { font-size: 15px; color: var(--body); }
.tcalc__tier input {
  height: 44px; width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); text-align: center; -moz-appearance: textfield;
}
.tcalc__tier input::-webkit-outer-spin-button, .tcalc__tier input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tcalc__tier span { font-size: 15px; color: var(--muted); }
.tcalc__remove {
  width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--muted); font-size: 17px; cursor: pointer;
}
.tcalc__remove:hover { color: var(--ink); border-color: var(--ink); }
.tcalc__add {
  justify-self: start; border: 1px dashed var(--yellow-line); background: var(--yellow-tint); color: var(--yellow-ink);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.tcalc__add:hover { border-style: solid; }
.tcalc__hint { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.tcalc__places input { width: 110px; }
/* L'explication se lit sous le calculateur, sur toute sa largeur : c'est la règle entière, que le
   verdict n'applique qu'à un cas. */
.tcalc__how { margin-top: 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.tcalc__how h4 { font-family: var(--display); font-size: 18px; color: var(--ink); margin-bottom: 8px; }
.tcalc__formula { font-size: 17px; line-height: 1.55; color: var(--ink); }
.tcalc__how .checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 36px; margin-top: 18px; }
.tcalc__how .checks li { font-size: 15px; line-height: 1.55; }

/* La page de règles de classement : la capture d'exemple monte dans l'en-tête, à côté du titre,
   et les quatre critères se lisent côte à côte au lieu de défiler dans une colonne de 34em. */
.hero--guide { padding-block: 64px 76px; }
.hero__caption { font-size: 14px; color: var(--on-navy-soft); margin-top: 14px; text-align: center; }
.rulesteps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
}
.rulesteps li { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px; }
.rulesteps li.rulesteps__fixed { background: var(--navy); border-color: var(--navy); }
.rulesteps .rulesteps__fixed h3 { color: var(--on-navy); }
.rulesteps .rulesteps__fixed p { color: var(--on-navy-soft); }
.rulesteps__n {
  font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--yellow-ink); margin-bottom: 10px;
}
.rulesteps__fixed .rulesteps__n { color: var(--yellow); }
.rulesteps h3 { font-size: 19px; line-height: 1.25; margin-bottom: 10px; }
.rulesteps p { font-size: 15px; line-height: 1.6; color: var(--body); }
.rulesteps__note { max-width: 52em; margin: 26px auto 0; text-align: center; }
.rules__bracket { margin-top: 72px; }
/* Ces deux captures sont des bandeaux (3:1 et 6:1) : à parts égales, elles tombaient à 40 px de haut. */
.rules__split { grid-template-columns: 4fr 7fr; gap: 56px; }

/* La page tarifs porte deux produits : un sommaire à deux portes en tête, puis un bandeau de titre
   au début de chacun, pour qu'on sache toujours lequel on lit. */
.doors2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 860px; margin: 40px auto 0; }
.doors2 a {
  display: block; text-decoration: none; background: var(--navy-lift); border-radius: 16px; padding: 22px 24px;
  border: 1px solid var(--navy-line);
}
.doors2 a:hover { border-color: var(--yellow); }
.navy .doors2 a b { display: block; font-family: var(--display); font-size: 19px; color: var(--on-navy); }
.navy .doors2 a span { display: block; font-size: 15px; color: var(--on-navy-soft); margin-top: 6px; }
.navy .doors2 a em { display: block; font-style: normal; font-weight: 700; color: var(--yellow); margin-top: 12px; }
.product-head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 18px; margin-bottom: 44px; border-bottom: 2px solid var(--ink); }
.product-head h2 { font-size: 40px; line-height: 1.1; }
.product-head p { font-size: 17px; color: var(--muted); }
.product-head__n { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--yellow-ink); }
.subhead { font-size: 26px; line-height: 1.2; margin: 0 0 22px; }

@media (max-width: 1080px) {
  .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phases li + li::before { display: none; }
  .rulesteps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .phases { grid-template-columns: 1fr 1fr; margin-bottom: 48px; }
  .rulesteps, .tcalc__fields, .doors2, .tcalc__how .checks { grid-template-columns: 1fr; }
  .product-head { flex-direction: column; gap: 6px; }
  .product-head h2 { font-size: 32px; }
  .rules__bracket { margin-top: 48px; }
  .rules__split { grid-template-columns: 1fr; }
}
.tournois__lede { font-size: 18px; color: var(--body); max-width: 44em; margin-bottom: 28px; }
.tournois__lede + .tcalc { margin-bottom: 56px; }
/* L'écran de la buvette est une image 16:9 : il prend la plus grande part de la largeur. */
.tv__split { grid-template-columns: 5fr 7fr; }
@media (max-width: 900px) { .tv__split { grid-template-columns: 1fr; } }
.split2 > figure { margin: 0; }
.phases b { hyphens: auto; overflow-wrap: anywhere; }

/* La page des formules : six formules par paires en grille, les formats à partenaire tournant en
   deux cartes côte à côte, et un tableau de choix qui se lit en ligne, sans défiler sur la largeur. */
.rulesteps.formats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formats-families { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 72px; }
.formats-list { margin: 8px 0 0; display: grid; gap: 16px; }
.formats-list dt { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--ink); }
.formats-list dd { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.formats__programme { grid-template-columns: 5fr 7fr; }
.formats-choose { overflow-x: auto; }
.formats-choose table { width: 100%; border-collapse: collapse; font-size: 16px; }
.formats-choose th { text-align: left; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px; border-bottom: 2px solid var(--ink); }
.formats-choose td { padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.5; color: var(--body); }
.formats-choose td:nth-child(2) { font-weight: 700; color: var(--ink); white-space: nowrap; }
.formats__limits { max-width: 860px; margin: 0 auto; }
@media (max-width: 1080px) {
  .rulesteps.formats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .rulesteps.formats, .formats-families, .formats__programme { grid-template-columns: 1fr; }
  .formats-choose thead { display: none; }
  .formats-choose tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .formats-choose td { display: block; padding: 2px 0; border: 0; }
  .formats-choose td:nth-child(2) { white-space: normal; }
}

/* La porte de l'application sous les tarifs du tournoi : le bouton, et ce qu'il ouvre, sur une ligne
   qui se replie sur téléphone. */
.tournois__open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
}

.tournois__open span {
  font-size: 15px;
  color: var(--body);
}

/* La déclaration de bonne foi du signalement (/signaler) : une case et sa phrase, hors d'un .field
   dont les règles donneraient à la case la largeur d'un champ texte. */
.consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; font-size: 16px; line-height: 1.5; cursor: pointer; }
.guide .form { margin: 32px 0 56px; }
.consent input { margin-top: 4px; flex-shrink: 0; accent-color: var(--ink); }