/*
 * La charte du site public — ce que la page d'accueil et les pages « club » ont en commun.
 *
 * Elle sortait d'`index.html`, où elle était en ligne, le jour où une deuxième page a eu
 * besoin de la même barre, des mêmes boutons et du même formulaire. Deux copies auraient
 * divergé à la première retouche : le bouton mal contrasté de la barre était déjà un bug de
 * spécificité, il n'avait pas besoin d'un jumeau.
 *
 * Ce qui reste en ligne dans `index.html`, c'est ce qui n'existe que là : le hero, la carte
 * de classement, le bandeau des sports, les échelles, la section sombre de l'API.
 */

/* ---------------------------------------------------------------- fonts */
/* Même police que l'app : Inter. La charte NOR ne prévoit pas de deuxième famille. */
@font-face {
  font-family: 'Inter';
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url('/inter.woff2') format('woff2');
}

/* ---------------------------------------------------------------- tokens */
/*
 * Repris tel quel de app/src/index.css — la charte NOR, pas une réinterprétation. Le clair
 * est le défaut assumé du produit, y compris sur un système en sombre ; le sombre ne
 * s'applique ici que si le visiteur du site (pas de l'OS) le demande explicitement.
 */
:root {
  --brand-cyan: #22cef5;
  --brand-blue: #3b6bf5;
  --brand-violet: #8b3fe8;
  --brand-magenta: #e344d6;
  --brand-night: #0a0c16;

  --bg: #f5f5fb;
  --surface: #ffffff;
  --surface-2: #eeedf7;
  --line: #e4e2f0;
  --text: #14121f;
  --muted: #64607a;

  --accent: #7b3fe0;
  --accent-soft: #f0e9ff;
  --accent-ink: #ffffff;

  --gain: #0ca30c;
  --loss: #d03b3b;

  --shadow-card: 0 1px 2px rgb(28 20 60 / 0.05), 0 4px 16px rgb(28 20 60 / 0.06);
  --shadow-raised: 0 4px 12px rgb(28 20 60 / 0.14), 0 12px 32px rgb(28 20 60 / 0.16);
  --shadow-brand: 0 6px 20px rgb(123 63 224 / 0.35);

  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

:root[data-theme='dark'] {
  --bg: #0a0c16;
  --surface: #141728;
  --surface-2: #1d2138;
  --line: #2a2f4a;
  --text: #ecebf7;
  --muted: #979cba;

  --accent: #9b7bff;
  --accent-soft: #211c40;
  --accent-ink: #0a0c16;

  --shadow-card: 0 1px 2px rgb(0 0 0 / 0.4), 0 4px 16px rgb(0 0 0 / 0.3);
  --shadow-raised: 0 4px 12px rgb(0 0 0 / 0.5), 0 12px 32px rgb(0 0 0 / 0.4);
  --shadow-brand: 0 6px 20px rgb(155 123 255 / 0.3);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { text-wrap: balance; margin: 0; font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 48px); }
.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.tabular { font-variant-numeric: tabular-nums; }
section { overflow-x: clip; }

/* Le dégradé de marque et son usage texte — repris à l'identique de .brand-gradient /
   .brand-text. Réservé aux moments rares : le logo, le geste principal, jamais un aplat
   répété. */
.brand-gradient {
  background-image: linear-gradient(135deg, var(--brand-cyan) 0%, var(--brand-blue) 38%, var(--brand-violet) 70%, var(--brand-magenta) 100%);
}
.brand-text {
  background-image: linear-gradient(100deg, var(--brand-blue) 0%, var(--brand-violet) 55%, var(--brand-magenta) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-theme='dark'] .brand-text {
  background-image: linear-gradient(100deg, var(--brand-cyan) 0%, var(--brand-violet) 55%, var(--brand-magenta) 100%);
}

/* ------------------------------------------------------------------ nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-mark { font-weight: 800; font-size: 1.05rem; }
.brand-sub { font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 26px; }
/*
 * `:not(.btn)` n'est pas une coquetterie : sans lui, `.nav-links a` (0-1-1) l'emporte sur
 * `.btn-accent` (0-1-0) et repeint le bouton en `--muted` sur son aplat violet — 1,6:1, le
 * texte devient illisible. Les boutons de la barre gardent donc leur propre encre.
 */
.nav-links a { text-decoration: none; }
.nav-links a:not(.btn) { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 760px) {
  .nav-links a:not(.btn) { display: none; }
  .nav .wrap { gap: 12px; }
  .nav-links { gap: 10px; }
  .nav-links .btn { padding: 9px 15px; font-size: 0.82rem; }
}
/*
 * En dessous, la barre ne tient plus : deux boutons plus le nom du produit débordaient, et la
 * page entière défilait de côté — sur un site dont la moitié des visiteurs arrivent par un lien
 * reçu sur leur téléphone. Le logo porte déjà le nom, et **une barre collante porte un geste,
 * pas deux** : le second est toujours dans la page, là où on le cherche.
 */
@media (max-width: 560px) {
  .brand-copy { display: none; }
  .nav-links .btn-ghost { display: none; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.88rem;
  padding: 11px 22px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.96); }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { opacity: 0.9; }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Une pastille : un sport dans le bandeau, un repère dans une liste. */
.chip {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: 0.8rem; font-weight: 600;
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); background: var(--surface);
}
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* --------------------------------------------------------------- section shell */
.section { padding-block: clamp(52px, 8vw, 96px); border-top: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 52px); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-top: 10px; font-weight: 800; }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 1.02rem; max-width: 58ch; }

/* ------------------------------------------------------------- how it works */
.rungs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
@media (max-width: 820px) { .rungs { grid-template-columns: 1fr; } }
.rung { background: var(--surface); padding: 28px 26px; }
.rung-num { font-size: 0.8rem; color: var(--accent); font-weight: 800; }
.rung h3 { font-size: 1.24rem; margin-top: 10px; font-weight: 700; }
.rung p { margin-top: 10px; color: var(--muted); font-size: 0.94rem; }

/* -------------------------------------------------------------------- offres */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--line); border-radius: 20px; padding: 28px 26px;
  display: flex; flex-direction: column; gap: 18px; background: var(--surface);
  box-shadow: var(--shadow-card);
}
.plan.pro { border-color: var(--accent); background: var(--accent-soft); }
.plan-name { font-size: 1.6rem; font-weight: 800; }
.plan-tag { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 0.94rem; }
.plan li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
  /* Une carte qui énonce des limites ne les coche pas : la coche les ferait passer pour
     des promesses. Un tiret dit « voilà où ça s'arrête », ce qui est exactement le propos. */
  .plan-limits li::before { content: "—"; color: var(--muted); font-weight: 600; }
/* --------------------------------------------------------------- tarif club */
/* Deux montants côte à côte, l'annuel mis en avant — le même ordre que sur la page
   d'inscription, où il arrive en premier et se trouve coché d'avance. */
.club-price {
  margin: 28px 0 36px; padding: 22px 24px; border: 1px solid var(--line);
  border-radius: 18px; background: var(--accent-soft);
  display: grid; gap: 16px;
}
.club-price-figures { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.club-price-one { display: grid; gap: 2px; }
.club-price-amount { font-size: 1.5rem; font-weight: 800; color: var(--muted); }
.club-price-one.is-main .club-price-amount { font-size: 2.2rem; color: var(--text); }
.club-price-cadence { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.club-price-gain { font-size: 0.86rem; font-weight: 700; color: var(--accent); }
.club-price-note { font-size: 0.9rem; color: var(--muted); line-height: 1.6; margin: 0; }
.club-price-note strong { color: var(--text); }

/* Où l'abonnement se prend, sous la liste et avant le bouton. Un ton de note, pas de promesse :
   c'est une précision d'achat, pas un argument de vente. */
.plan-where { font-size: 0.86rem; color: var(--muted); line-height: 1.5; }
.plan-where strong { color: var(--text); }
.plan .btn { margin-top: auto; align-self: flex-start; }

/* ------------------------------------------------------- inscription d'un club */
/* Le seul formulaire de la page, et le seul endroit où NOR vend quoi que ce soit : le club
   se crée en payant, sur le web (architecture.md §4). Il n'écrit rien — il ouvre la page de
   paiement Stripe, et c'est elle qui fait naître le club. */
.signup {
  margin-top: 20px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--surface); box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 34px);
}
.signup h3 { font-size: 1.35rem; }
.signup-lede { margin: 10px 0 0; color: var(--muted); font-size: 0.94rem; max-width: 62ch; }
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
@media (max-width: 760px) { .signup-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.field input, .field select {
  font: inherit; width: 100%; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
}
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.field-hint { font-size: 0.8rem; color: var(--muted); }
/* Un bouton qui a l'air d'un lien — « renvoyez-en un », « modifier l'adresse ». Un vrai lien
   serait un mensonge : ces deux-là ne mènent nulle part, ils agissent sur le formulaire. Et un
   bouton déguisé reste un bouton pour le clavier et le lecteur d'écran, ce qu'un <a> sans href
   ne serait pas. */
.linklike {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0;
  text-decoration: underline; cursor: pointer;
}
.linklike:disabled { opacity: 0.55; cursor: default; }
/* Le choix du rythme de facturation. Deux cartes cliquables plutôt que deux boutons radio nus :
   c'est la seule décision d'argent de la page, et elle mérite une cible qu'on ne rate pas. Le
   radio reste dans le DOM — c'est lui qui porte le clavier, le groupe et la valeur envoyée. */
.cadences { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.cadences > legend {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 0; margin-bottom: 10px;
}
.cadence {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--bg);
}
.cadence:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.cadence:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
/* `width: auto` explicite : ces cartes vivent dans `.signup-grid`, à côté de champs dont les
   inputs font 100 %. Sans ça, le radio s'étirerait sur toute la largeur de la carte. */
.cadence input { width: auto; margin: 3px 0 0; accent-color: var(--accent); flex: none; }
.cadence-body { display: block; min-width: 0; font-size: 0.95rem; color: var(--text); }
.cadence-body strong { display: block; font-size: 1.05rem; letter-spacing: 0; text-transform: none; }
.cadence-per { font-weight: 400; color: var(--muted); }
.cadence-note {
  display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--muted);
}
@media (min-width: 720px) { .cadences { grid-template-columns: 1fr 1fr; } .cadences > legend { grid-column: 1 / -1; } }

.signup-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.signup-foot .btn[disabled] { opacity: 0.55; pointer-events: none; }
.signup-terms { font-size: 0.82rem; color: var(--muted); max-width: 44ch; }
/* Un refus se lit à côté du bouton qui vient d'être pressé, jamais en haut de page : c'est
   là que le regard est. */
.signup-error { margin-top: 16px; font-size: 0.92rem; font-weight: 600; color: var(--loss); }
/* Retour de Stripe. Le club existe déjà quand cette bannière s'affiche — le webhook l'a créé
   avant que le navigateur revienne — mais on ne promet pas l'instantané : un paiement par
   prélèvement se confirme plus tard, et la phrase doit rester vraie dans les deux cas. */
.signup-back {
  margin-bottom: 24px; border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 16px; padding: 20px 22px;
}
.signup-back h3 { font-size: 1.1rem; }
.signup-back p { margin: 8px 0 0; font-size: 0.94rem; color: var(--muted); }
.signup-back.quiet { border-color: var(--line); background: var(--surface-2); }
.signup-back .btn { margin-top: 16px; }
/* Discret par choix : la page vend l'inscription, pas la connexion. Il faut le trouver quand
   on le cherche, et ne pas le voir quand on ne le cherche pas. */
.signup-already { display: block; margin-top: 12px; font-size: 0.84rem; color: var(--muted); }
.signup-already:hover { color: var(--text); }

/* -------------------------------------------------------------------- footer */
footer { border-top: 1px solid var(--line); padding-block: 36px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
/* Les liens juridiques : trouvables, jamais en concurrence avec la navigation du site. */
.foot-legal { flex-basis: 100%; order: 3; font-size: 0.82rem; opacity: 0.75; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 26px; height: 26px; border-radius: 6px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-size: 0.86rem; color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--text); }
.foot-meta { font-size: 0.78rem; color: var(--muted); }

/* ------------------------------------------------- pages intérieures « club » */
/*
 * Le parcours club a ses propres pièces parce qu'il a un propre travail : la page d'accueil
 * vend, ces pages-ci expliquent. Un dirigeant qui arrive ici n'a pas encore décidé — il essaie
 * de comprendre ce qu'il y a dans un club NOR, comment il se crée, et pourquoi on lui demande
 * un compte. Chaque composant ci-dessous répond à une de ces trois questions.
 */
.page-head { padding-block: clamp(34px, 6vw, 60px) clamp(20px, 3vw, 32px); }
.page-head h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.08; font-weight: 900; margin-top: 10px; }
.page-head .lede { margin-top: 18px; max-width: 58ch; font-size: 1.08rem; color: var(--muted); }
.crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 0.84rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.crumb::before { content: "←"; }
.crumb:hover { color: var(--text); }

/*
 * Les portes. C'est la pièce centrale de ces pages : le reproche fait au parcours d'avant, c'est
 * qu'il envoyait tout le monde par la même — celle de l'application — sans dire où elle menait.
 * Une porte porte donc son public dans son titre, et ce qui se passe derrière dans son texte.
 */
.doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 20px; }
.door {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card);
}
.door.primary { border-color: var(--accent); background: var(--accent-soft); }
.door h3 { font-size: 1.28rem; }
.door p { margin: 0; color: var(--muted); font-size: 0.94rem; }
.door .btn { margin-top: auto; align-self: flex-start; }

/*
 * Une suite d'étapes, reliées par un trait : l'ordre *est* l'information. Le numéro vient d'un
 * compteur CSS et non du HTML — renuméroter une étape insérée à la main est exactement le genre
 * d'oubli qui rend une explication fausse.
 */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; padding: 0 0 30px 58px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem;
  background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
}
.step::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 4px; width: 2px; background: var(--line); }
.step:last-child::after { display: none; }
.step h3 { font-size: 1.14rem; padding-top: 6px; }
.step p { margin-top: 8px; color: var(--muted); font-size: 0.95rem; max-width: 64ch; }
.step p strong { color: var(--text); font-weight: 700; }

/*
 * Des tuiles, pas une suite : `.rungs` numérote et impose trois colonnes, celles-ci se rangent
 * toutes seules et n'ont pas d'ordre à défendre.
 *
 * Des cartes séparées plutôt que la grille sans couture de `.rungs` : à sept tuiles sur trois
 * colonnes, les deux cases vides de la dernière ligne laissaient un aplat gris qui avait l'air
 * d'un contenu manquant. Un nombre de tuiles ne doit pas dépendre de la largeur de l'écran.
 */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 16px; }
.tile {
  background: var(--surface); padding: 26px 24px;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card);
}
.tile-tag { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tile h3 { font-size: 1.1rem; margin-top: 8px; }
.tile p { margin-top: 9px; color: var(--muted); font-size: 0.93rem; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .duo { grid-template-columns: 1fr; } }
.duo p { color: var(--muted); max-width: 62ch; }
.duo p + p { margin-top: 14px; }
.duo strong { color: var(--text); font-weight: 700; }

/* Une remarque qu'on ne peut pas mettre dans le fil sans l'alourdir, et qu'on ne peut pas
   supprimer sans mentir par omission. */
.note { border-left: 3px solid var(--accent); padding: 2px 0 2px 18px; margin-top: 24px; color: var(--muted); font-size: 0.94rem; max-width: 64ch; }
.note strong { color: var(--text); font-weight: 700; }

.table-scroll { overflow-x: auto; }
.roles { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.roles th, .roles td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.roles th { font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.roles td:first-child { font-weight: 700; white-space: nowrap; }
.roles td:last-child { color: var(--muted); }

/* Les questions qu'on se pose avant de payer. Repliées : les lire toutes d'affilée donnerait à
   la page l'air d'un contrat, alors qu'aucune n'est obligatoire pour décider. */
.faq { border-top: 1px solid var(--line); max-width: 78ch; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 18px 0; font-weight: 700; font-size: 1.02rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 800; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.faq p { margin: 0 0 20px; color: var(--muted); font-size: 0.95rem; }
.faq p + p { margin-top: -8px; }

/* ------------------------------------------------------- l'annuaire des clubs */
/*
 * « Les clubs près de chez moi » (`site/club_directory.html.twig`).
 *
 * Les filtres réutilisent `.field`, qui vient du formulaire d'inscription : ce sont les mêmes
 * libellés en capitales au-dessus des mêmes selects, et leur donner une seconde apparence aurait
 * fait deux formulaires là où le visiteur en voit un.
 *
 * Les cartes, elles, ne sont pas des `.tile` : une tuile est un bloc de texte qu'on lit, une
 * carte de club est un objet qu'on compare — d'où une grille plus serrée, un bouton posé au
 * fond, et des hauteurs égales pour que trois boutons s'alignent au lieu de flotter chacun à la
 * hauteur de son nom de club.
 */
.directory-filters {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; margin-bottom: 28px; box-shadow: var(--shadow-card);
}
.directory-filters .field { flex: 1 1 200px; }
.directory-filters .btn { flex: none; }

.club-cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px;
}
.club-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); padding: 22px;
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-card);
}
.club-card h3 { font-size: 1.05rem; }
.club-card-meta { color: var(--muted); font-size: 0.9rem; }
/* Le bouton descend au fond quelle que soit la longueur du nom : sans cette marge automatique,
   une carte « ES Bruges Badminton Loisir et Compétition » décalerait son voisin d'une ligne. */
.club-card .btn { margin-top: auto; align-self: start; }

/*
 * La case à cocher du formulaire de création — le référencement dans l'annuaire.
 *
 * Pas les règles de `.field` sur son libellé : elles visent un champ à remplir, donc un libellé
 * court en capitales au-dessus. Ici le libellé *est* la question, il tient deux lignes, et la
 * case doit rester alignée sur sa première ligne plutôt que centrée sur tout le bloc.
 */
.signup-option label {
  display: flex; gap: 12px; align-items: start; cursor: pointer;
  text-transform: none; letter-spacing: normal; font-size: 0.95rem; color: var(--text);
}
.signup-option input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.signup-option strong { display: block; font-weight: 700; }
.signup-option .field-hint { margin-top: 4px; }