/* ══════════════════════════════════════════════════════════════════════════
   BFCL — feuille de style unique.

   Direction : « la table ». Le vocabulaire visuel vient du matériel — le vert
   du tapis, le chrome des barres, le rouge et le bleu des figurines, le didon
   du logotype. Deux panneaux d'encre ouvrent et ferment la page, avec un halo
   vert diffus pour seule lumière. Les photos studio sont calées sur le fond
   porcelaine : leur blanc vaut exactement --c-porcelaine, sinon un rectangle
   apparaît.

   Le geste signature est la barre chromée qui sépare les mouvements de la page,
   une figurine posée au centre.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-variable.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/instrument-sans-variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;

  --c-porcelaine: #f0f1ee;
  --c-porcelaine-creuse: #e4e6e0;
  --c-porcelaine-douce: #c7cec9;
  --c-encre: #101815;
  --c-encre-douce: #4a544e;
  --c-vert: #15462f;
  /* Les deux verts de la lueur du logotype. Ils remplacent l'encre dans les
     lettres au passage : le plus clair plafonne à #2c8055, au-delà le sigle
     tombe sous 4:1 sur la porcelaine. */
  --c-vert-lueur: #1f6b45;
  --c-vert-lueur-vive: #2c8055;
  --c-brique: #9e2f26;
  --c-bleu: #1d4e8f;

  /* Le halo plafonne à #1a5638 : au-delà, le texte secondaire posé dessus
     tombe sous 4,5:1. */
  --c-halo-core: rgb(26 86 56 / 0.96);
  --c-halo-mid: rgb(26 86 56 / 0.55);
  --c-halo-edge: rgb(26 86 56 / 0);

  --c-filet: #d5d8d1;
  --c-filet-clair: rgb(240 241 238 / 0.18);

  /* Le verre : une plaque translucide posée sur l'encre. L'alpha reste bas pour
     que le texte porcelaine garde son contraste sur le fond du panneau. */
  --c-verre: rgb(240 241 238 / 0.07);
  --c-verre-bord: rgb(240 241 238 / 0.26);

  --c-chrome-0: #4e585d;
  --c-chrome-1: #8b959a;
  --c-chrome-2: #c3cbce;
  --c-chrome-3: #eff2f3;
  --c-chrome-4: #fdfefe;

  /* Le chrome ne se dégrade pas en douceur : il a une raie spéculaire nette
     juste au-dessus de son axe. D'où les arrêts serrés autour de 47 %. */
  --g-chrome: linear-gradient(
    to bottom,
    var(--c-chrome-0) 0%,
    var(--c-chrome-1) 16%,
    var(--c-chrome-3) 40%,
    var(--c-chrome-4) 47%,
    var(--c-chrome-2) 56%,
    var(--c-chrome-1) 78%,
    var(--c-chrome-0) 100%
  );

  --ff-display: "Bodoni Moda", ui-serif, Georgia, serif;
  --ff-text: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --fs-mark: clamp(4rem, 17vw, 10.5rem);
  --fs-price: clamp(2.75rem, 9vw, 5rem);
  --fs-essai: clamp(1.625rem, 4vw, 2.25rem);
  --fs-h1: clamp(1.0625rem, 2.6vw, 1.375rem);
  --fs-h2: clamp(1.75rem, 4.4vw, 2.625rem);
  --fs-ville: clamp(1.75rem, 4.4vw, 2.5rem);
  --fs-heure: clamp(1.125rem, 3vw, 1.5rem);
  --fs-h3: 1.1875rem;
  --fs-lead: clamp(1.125rem, 2.1vw, 1.375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mini: 0.8125rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter: var(--sp-5);
  --measure: 60ch;
  --wrap: 1160px;
  --rod-h: 8px;
  --header-h: 100px;
  --radius: 2px;
  --radius-boite: 5px;
  --radius-pilule: 999px;
  --line: 1px;
  --motion: 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--sp-7);
  }
}

@media (min-width: 62rem) {
  :root {
    --header-h: 78px;
  }
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* L'en-tête est collant : sans cette marge, une ancre place son titre
     derrière la barre de navigation. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--c-porcelaine);
  color: var(--c-encre);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.62;
  /* `anywhere` et pas `break-word` : seul `anywhere` réduit la largeur
     min-content, donc les longues chaînes (adresse e-mail) ne font plus
     déborder les grilles au zoom texte 200 %. */
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

svg {
  display: block;
  flex: none;
}

a {
  color: inherit;
  /* Le soulignement est le seul marqueur de lien : il doit se voir sans hover,
     sinon un lien dans un paragraphe est indiscernable du texte autour. */
  text-decoration-color: var(--c-encre-douce);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--motion), color var(--motion);
}

a:hover {
  text-decoration-color: currentcolor;
}

:focus-visible {
  outline: 2px solid var(--c-brique);
  outline-offset: 3px;
}

/* ─── Utilitaires ────────────────────────────────────────────────────────── */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* Les icônes servies deux fois vivent dans un <symbol>, référencé par <use>.
   Le porte-icônes n'est jamais peint : seules ses références le sont. */
.sprite {
  display: none;
}

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

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: var(--sp-3);
  z-index: 30;
  transform: translateY(calc(-100% - var(--sp-6)));
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-encre);
  color: var(--c-porcelaine);
  font-weight: 500;
  text-decoration: none;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.ico {
  width: 1.15em;
  height: 1.15em;
}

/* ─── Barres : chrome nu, ou garnies d'une figurine ──────────────────────────
   La figurine est `assets/joueur.svg`. Ses couleurs y sont écrites en dur — un
   fichier SVG chargé en image ne lit pas les variables CSS de la page. Le
   maillot et le short valent --c-brique : les changer là-bas aussi.
   ──────────────────────────────────────────────────────────────────────────── */

.rod {
  height: var(--rod-h);
  margin: 0;
  border: 0;
  background: var(--g-chrome);
}

/* Un seul joueur, au centre, la barre lui passant sous les épaules.
   La barre est le fond de l'élément, la figurine son ::after : elle masque donc la
   barre à hauteur du buste, exactement comme la vraie sur le plateau.
   `overflow` est remis à visible parce que Chrome pose `overflow: hidden` sur `hr`. */
.rod--joueur {
  position: relative;
  height: 64px;
  margin-block: var(--sp-6) var(--sp-4);
  overflow: visible;
  background-repeat: no-repeat;
  background-size: 100% var(--rod-h);
  background-position: center 21px;
}

.rod--joueur::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 18px;
  height: 64px;
  margin-left: -9px;
  background: url("joueur.svg") center bottom / contain no-repeat;
}

@media (min-width: 48rem) {
  .rod--joueur {
    height: 84px;
    background-position: center 28px;
  }

  .rod--joueur::after {
    width: 24px;
    height: 84px;
    margin-left: -12px;
  }
}

/* ─── En-tête collant ────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--c-porcelaine);
}

.site-header::after {
  content: "";
  display: block;
  height: var(--rod-h);
  background: var(--g-chrome);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
}

@media (min-width: 62rem) {
  .site-header__inner {
    padding-block: var(--sp-4) var(--sp-3);
  }
}

.brand {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  min-width: 0;
  text-decoration: none;
}

.brand__logo {
  flex: none;
  width: 32px;
  height: 32px;
}

@media (min-width: 62rem) {
  .brand__logo {
    width: 40px;
    height: 40px;
  }
}

.brand__mark {
  display: inline-block;
  position: relative;
  color: var(--c-encre);
  font-family: var(--ff-display);
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
  /* Relief subtil : ombre portée décalée d'un demi-pixel vers le bas et la droite
     pour créer une micro-profondeur, puis une ombre plus large et très douce pour
     ancrer les lettres. */
  text-shadow:
    0.5px 0.5px 0 rgb(0 0 0 / 0.15),
    0 1px 3px rgb(0 0 0 / 0.08);
  transition: color var(--motion);
}

.brand:hover .brand__mark,
.brand:focus-visible .brand__mark {
  color: var(--c-vert);
}

/* La lueur vit dans les lettres, pas derrière : une bande de vert clair taillée
   dans les glyphes par background-clip, posée sur le sigle d'encre. Elle le
   traverse de temps en temps, et à chaque survol. Le vert le plus clair reste
   au-dessus de 4:1 sur la porcelaine, la lecture ne dépend pas du passage. */
.brand__lueur {
  position: absolute;
  inset: 0;
  color: transparent;
  background-image: linear-gradient(
    100deg,
    rgb(31 107 69 / 0) 36%,
    var(--c-vert-lueur) 45%,
    var(--c-vert-lueur-vive) 50%,
    var(--c-vert-lueur) 55%,
    rgb(31 107 69 / 0) 64%
  );
  background-repeat: no-repeat;
  background-size: 240% 100%;
  background-position: -80% 0;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
}

/* L'en-tête est collant : tant qu'il ne tient pas sur une ligne, le nom complet
   du club sort de la barre pour lui garder une hauteur tenable. Il reste dans le
   titre du héros et dans le pied de page. */
.brand__name {
  display: none;
  margin-top: 0.2em;
  color: var(--c-encre-douce);
  font-size: var(--fs-mini);
  line-height: 1.3;
}

@media (min-width: 62rem) {
  .brand__name {
    display: block;
  }
}

/* Tant que la barre ne tient pas sur une ligne, la navigation prend la sienne,
   et défile latéralement plutôt que de s'empiler sur trois rangs. */
.nav {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 62rem) {
  .nav {
    flex: 0 1 auto;
  }
}

.nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sp-2) var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-padding-inline: var(--sp-5);
}

.nav ul::-webkit-scrollbar {
  display: none;
}

@media (min-width: 62rem) {
  .nav ul {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

.nav a {
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-1) var(--sp-2);
  padding-inline: var(--sp-2);
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion);
}

/* Un coup de surligneur : la bande verte se trace d'un bord à l'autre du
   libellé, légèrement penchée comme un feutre passé à la main. */
.nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0.3em;
  height: 0.72em;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-vert) 30%, transparent),
    color-mix(in srgb, var(--c-vert) 14%, transparent)
  );
  border-radius: var(--radius);
  transform: skewX(-9deg) scaleX(0);
  transform-origin: 0 100%;
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav a:hover::before,
.nav a:focus-visible::before {
  transform: skewX(-9deg) scaleX(1);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--c-encre);
}

@media (prefers-reduced-motion: reduce) {
  .nav a::before {
    transition: none;
  }
}

/* ─── Panneaux d'encre et de vert ────────────────────────────────────────── */

.panel {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--c-encre);
  color: var(--c-porcelaine);
}

.panel a {
  text-decoration-color: var(--c-porcelaine-douce);
}

.panel__halo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    58% 72% at 76% 18%,
    var(--c-halo-core) 0%,
    var(--c-halo-edge) 72%
  );
}

.panel--basse .panel__halo {
  background: radial-gradient(
    52% 76% at 18% 88%,
    var(--c-halo-core) 0%,
    var(--c-halo-edge) 72%
  );
}

/* Le panneau de clôture : deux nappes qui se croisent, une chaude en haut à
   gauche, une profonde en bas à droite. Le fond du panneau reste une couleur
   opaque, sinon le contrôle de contraste ne sait plus sur quoi il mesure. */
.panel--club .panel__halo {
  background:
    radial-gradient(70% 90% at 8% 4%, var(--c-halo-core) 0%, var(--c-halo-edge) 70%),
    radial-gradient(90% 70% at 92% 96%, var(--c-halo-mid) 0%, var(--c-halo-edge) 72%);
}

/* ─── Héros ──────────────────────────────────────────────────────────────── */

.hero {
  padding-block: var(--sp-9) var(--sp-8);
}

.hero__inner {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 62rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
    gap: var(--sp-9);
    align-items: end;
  }
}

/* Le sigle prend la lumière comme les barres : les lettres sont remplies d'un
   métal poli — porcelaine et chrome clair — au lieu d'un aplat, et une raie
   spéculaire les traverse une fois au chargement. Le ton le plus sombre du
   remplissage reste au-dessus de 10:1 sur l'encre. */
.hero__mark {
  display: block;
  position: relative;
  width: fit-content;
  /* La couleur déclarée reste la porcelaine — c'est la teinte du remplissage et
     le repli si background-clip: text n'est pas suivi ; seul le fill est cédé
     au dégradé. */
  color: var(--c-porcelaine);
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(
      100deg,
      rgb(253 254 254 / 0) 42%,
      rgb(253 254 254 / 0.85) 50%,
      rgb(253 254 254 / 0) 58%
    ),
    linear-gradient(
      172deg,
      var(--c-chrome-2) 0%,
      var(--c-porcelaine) 28%,
      var(--c-chrome-4) 47%,
      var(--c-chrome-2) 61%,
      var(--c-porcelaine) 100%
    );
  background-repeat: no-repeat;
  background-size: 260% 100%, 100% 100%;
  background-position: 220% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  font-family: var(--ff-display);
  font-size: var(--fs-mark);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.005em;
  line-height: 0.84;
  /* La lueur du tapis, posée derrière la silhouette des lettres. */
  text-shadow: 0 0 clamp(24px, 6vw, 64px) rgb(26 86 56 / 0.9);
}

@supports (text-box: trim-both cap alphabetic) {
  .hero__mark {
    text-box: trim-both cap alphabetic;
  }
}

.hero__name {
  display: block;
  max-width: 31ch;
  margin-top: var(--sp-5);
  font-family: var(--ff-text);
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.3;
}

.hero__lead {
  max-width: 46ch;
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--line) solid var(--c-filet-clair);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

/* Le verre du héros : une boîte semi-transparente posée sur l'encre, qui laisse
   passer la couleur du fond tout en isolant son propre texte. */

.verre {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-boite);
  border: var(--line) solid var(--c-verre-bord);
  background: var(--c-verre);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.22);
}

.essai {
  font-family: var(--ff-display);
  font-size: var(--fs-essai);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0.005em;
  line-height: 1.1;
}

.essai__detail {
  margin-top: var(--sp-3);
  font-size: var(--fs-small);
}

.verre .facts {
  margin-top: var(--sp-6);
}

.facts {
  display: grid;
  gap: var(--sp-4);
}

.facts > div {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: var(--line) solid var(--c-filet-clair);
}

.facts dt {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.facts dd {
  font-size: var(--fs-small);
}

.hero__affil {
  max-width: 40ch;
  margin-top: var(--sp-6);
  color: var(--c-porcelaine-douce);
  font-size: var(--fs-small);
}

.hero__affil a {
  color: var(--c-porcelaine);
}

/* ─── Boutons ────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}

.btn {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border: var(--line) solid transparent;
  border-radius: var(--radius-pilule);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color var(--motion), border-color var(--motion),
    box-shadow var(--motion), translate var(--motion);
}

.btn__ico {
  width: 1.15em;
  height: 1.15em;
}

.btn:hover {
  translate: 0 -2px;
}

.btn:active {
  translate: 0 0;
}

.btn--primary {
  background: var(--c-brique);
  color: var(--c-porcelaine);
}

.btn--primary:hover {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brique) 30%, transparent);
}

.btn--ghost {
  border-color: var(--c-filet-clair);
  color: var(--c-porcelaine);
}

.btn--ghost:hover {
  border-color: var(--c-porcelaine);
  background: color-mix(in srgb, var(--c-porcelaine) 10%, transparent);
}

.btn__nowrap {
  white-space: nowrap;
}

/* ─── Sections ───────────────────────────────────────────────────────────── */

.section {
  padding-block: var(--sp-9);
}

.section--creuse {
  background: var(--c-porcelaine-creuse);
}

/* La section qui suit le rod chromé du héros démarre tout de suite : les plaques
   des séances doivent entrer dans le premier écran. */
.section--serree {
  padding-top: var(--sp-7);
}

/* Le joueur amène déjà sa propre respiration. Les sections qu'il sépare rentrent
   leurs marges, sinon on empile 160 px de vide de chaque côté de la figurine. */
.rod--joueur + .section {
  padding-top: var(--sp-7);
}

.section:has(+ .rod--joueur) {
  padding-bottom: var(--sp-7);
}

.section__title {
  padding-bottom: var(--sp-4);
  border-bottom: var(--line) solid var(--c-filet);
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  /* Le corps optique reste calé bas exprès. À 42 px, `auto` choisirait le dessin
     de grand titre, dont les déliés font moins d'un pixel à l'écran : les titres
     se cassent en morceaux. Le dessin de labeur tient la ligne. */
  font-variation-settings: "opsz" 18;
  letter-spacing: 0.005em;
}

.panel .section__title {
  border-bottom-color: var(--c-filet-clair);
}

.section__intro {
  max-width: var(--measure);
  margin-top: var(--sp-6);
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.prose {
  display: grid;
  gap: var(--sp-4);
  max-width: var(--measure);
  margin-top: var(--sp-6);
}

/* ─── Séances : deux plaques de tapis vert ───────────────────────────────────
   Chaque salle est une plaque, tranche haute à la couleur d'une équipe. Le fond
   reste une couleur opaque et la vignette ne fait que l'assombrir : l'audit de
   contraste mesure donc une valeur plancher, jamais optimiste.
   ──────────────────────────────────────────────────────────────────────────── */

.plaques {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

@media (min-width: 48rem) {
  .plaques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

.plaque {
  display: grid;
  position: relative;
  isolation: isolate;
  align-content: start;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  border-top: 6px solid var(--c-brique);
  border-radius: var(--radius-boite);
  background: var(--c-vert);
  color: var(--c-porcelaine);
}

.plaque::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    /* Vignette par-dessus */
    radial-gradient(
      130% 95% at 50% 0%,
      rgb(0 0 0 / 0) 40%,
      rgb(0 0 0 / 0.34) 100%
    ),
    /* Texture granulée du tapis (bruit 2D sans requête réseau : data-url SVG) */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
}

.plaque--bleu {
  border-top-color: var(--c-bleu);
}

.plaque a {
  text-decoration-color: var(--c-porcelaine-douce);
}

.plaque__ville {
  font-family: var(--ff-display);
  font-size: var(--fs-ville);
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: 0.01em;
}

.plaque__salle {
  display: flex;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-small);
}

.plaque__salle .ico {
  margin-top: 0.15em;
  color: var(--c-porcelaine-douce);
}

.plaque__adresse {
  display: block;
  color: var(--c-porcelaine-douce);
}

.creneaux {
  display: grid;
}

.creneau {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  align-items: baseline;
  justify-content: space-between;
  padding-block: var(--sp-3);
  border-top: var(--line) solid var(--c-filet-clair);
}

.creneau:last-child {
  border-bottom: var(--line) solid var(--c-filet-clair);
}

.creneau dt {
  font-weight: 500;
}

.creneau dd {
  font-family: var(--ff-display);
  font-size: var(--fs-heure);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* Le tiret du didone est un cheveu : au corps des horaires il disparaît à
   l'écran. On le prend dans la police de texte, les chiffres restent en Bodoni. */
.tiret {
  font-family: var(--ff-text);
  font-weight: 400;
}

.plaque__lien {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  justify-self: start;
  font-size: var(--fs-small);
  font-weight: 500;
}

/* ─── La table et la balle ───────────────────────────────────────────────────
   Le bandeau du plateau sort de la grille : c'est la seule image pleine largeur
   du site. Les deux photos studio, elles, n'ont ni cadre ni ombre — leur fond
   vaut --c-porcelaine, elles flottent dans la page.
   ──────────────────────────────────────────────────────────────────────────── */

.plateau {
  margin-top: var(--sp-8);
}

.plateau img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 48rem) {
  .plateau img {
    aspect-ratio: 2.64;
  }
}

.object {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-9);
  align-items: center;
}

@media (min-width: 56rem) {
  .object {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-9);
  }

  .object--balle .object__photo {
    order: -1;
  }
}

.object__photo {
  justify-self: center;
  width: 100%;
  max-width: 22rem;
}

.object--table .object__photo {
  max-width: 26rem;
}

.object__text .prose {
  margin-top: var(--sp-4);
}

.object h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  font-variation-settings: "opsz" 18;
}

/* ─── Règles : ce qui compte, ce qui n'existe pas ────────────────────────── */

.regles {
  display: grid;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}

@media (min-width: 48rem) {
  .regles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }
}

.regle {
  border-radius: var(--radius-boite);
  background: var(--c-porcelaine);
  overflow: clip;
}

.regle__titre {
  font-size: var(--fs-h3);
  font-weight: 600;
}

.regle > .regle__titre {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-vert);
  color: var(--c-porcelaine);
}

.regle--non > .regle__titre {
  background: var(--c-brique);
}

.regle__ico {
  width: 1.15em;
  height: 1.15em;
}

.regle ul {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-5);
}

.regle li {
  padding-left: var(--sp-5);
  border-left: 2px solid var(--c-vert);
}

.regle--non li {
  border-left-color: var(--c-brique);
}

.regle b {
  display: block;
  font-weight: 500;
}

.regle li p {
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

.match {
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-boite);
  background: var(--c-porcelaine);
}

.match > .regle__titre {
  text-align: center;
}

.match p {
  margin-top: var(--sp-5);
}

.timings {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

@media (min-width: 34rem) {
  .timings {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.timings > div {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--c-filet);
}

.timings dt {
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

.timings dd {
  font-family: var(--ff-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
}

/* ─── Liens sortants ─────────────────────────────────────────────────────── */

.liens {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

@media (min-width: 40rem) {
  .liens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62rem) {
  .liens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.lien {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  padding: var(--sp-5);
  border: var(--line) solid var(--c-filet);
  border-radius: var(--radius-boite);
  background: var(--c-porcelaine);
  color: var(--c-encre);
  text-decoration: none;
  transition: border-color var(--motion), background-color var(--motion),
    translate var(--motion);
}

.lien__ico {
  width: 26px;
  height: 26px;
  margin-bottom: var(--sp-4);
  color: var(--c-vert);
  transition: color var(--motion);
}

.lien__nom {
  font-weight: 500;
}

.lien__cible {
  color: color-mix(in srgb, var(--c-encre-douce) 60%, var(--c-encre));
  font-size: var(--fs-small);
}

.lien:hover {
  border-color: var(--c-vert);
  background: var(--c-porcelaine-creuse);
  translate: 0 -2px;
}

.lien:hover .lien__ico {
  color: var(--c-brique);
}

/* ─── Adhésion ───────────────────────────────────────────────────────────── */

.rejoindre__inner {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-8);
}

@media (min-width: 62rem) {
  .rejoindre__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--sp-9);
    align-items: start;
  }
}

.price__amount {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-price);
  font-weight: 700;
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Les deux barres de l'euro de Bodoni Moda font 0,9 % de cadratin, soit 0,7 px
   à ce corps : le signe se lit « C » à l'écran. Il passe donc dans le sans, en
   petit corps sur la même ligne de pied — le chiffre reste le geste didon. */
.price__currency {
  margin-left: 0.16em;
  font-family: var(--ff-text);
  font-size: 0.34em;
  font-weight: 600;
}

.price__detail {
  display: block;
  max-width: 26ch;
  margin-top: var(--sp-4);
  color: var(--c-porcelaine-douce);
  font-size: var(--fs-small);
}

.rejoindre__voies {
  max-width: var(--measure);
}

.contact {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: var(--line) solid var(--c-filet-clair);
}

.contact__name {
  font-weight: 500;
}

.contact .actions {
  margin-top: var(--sp-5);
}

/* ─── Pied de page ───────────────────────────────────────────────────────── */

.site-footer__inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--sp-6);
    align-items: center;
  }
}

.footer__infos {
  display: grid;
  gap: var(--sp-1);
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

/* ─── Mentions légales ───────────────────────────────────────────────────── */

.legal__list {
  display: grid;
  max-width: var(--measure);
  margin-top: var(--sp-8);
}

.legal__list > div {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: var(--line) solid var(--c-filet);
}

.legal__list dt {
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

.legal__aside {
  color: var(--c-encre-douce);
  font-size: var(--fs-small);
}

.back-home {
  display: inline-block;
  margin-top: var(--sp-8);
  font-weight: 500;
}

/* ─── Mouvement ──────────────────────────────────────────────────────────────
   Deux respirations très lentes, jamais synchronisées : le halo du héros et
   l'aura du logotype dans l'en-tête. Plus le lever du sigle au chargement.
   Rien d'autre ne bouge tout seul, ni à l'entrée des sections ni au survol des
   blocs de contenu.
   ──────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .panel--hero .panel__halo {
    animation: halo-open 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
      halo-souffle 13s 1.4s ease-in-out infinite;
  }

  .brand__lueur {
    animation: lueur-ronde 14s 3s ease-in-out infinite;
  }

  .brand:hover .brand__lueur,
  .brand:focus-visible .brand__lueur {
    animation: lueur-passe 900ms cubic-bezier(0.3, 0.7, 0.3, 1);
  }

  .hero__mark {
    animation: mark-rise 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 120ms both,
      mark-lustre 1600ms 760ms cubic-bezier(0.35, 0.6, 0.3, 1) both;
  }

  @keyframes halo-open {
    from {
      opacity: 0;
      scale: 0.82;
    }
  }

  @keyframes halo-souffle {
    50% {
      opacity: 0.72;
      scale: 1.05;
    }
  }

  @keyframes mark-rise {
    from {
      opacity: 0;
      translate: 0 var(--sp-4);
    }
  }

  @keyframes lueur-ronde {
    0%, 20% {
      background-position: -80% 0;
    }
    42%, 100% {
      background-position: 180% 0;
    }
  }

  @keyframes lueur-passe {
    from {
      background-position: -80% 0;
    }
    to {
      background-position: 180% 0;
    }
  }

  @keyframes mark-lustre {
    from {
      background-position: -160% 0, 0 0;
    }
    to {
      background-position: 220% 0, 0 0;
    }
  }
}

@media (prefers-contrast: more) {
  :root {
    --c-encre-douce: var(--c-encre);
    --c-porcelaine-douce: var(--c-porcelaine);
    --c-filet: var(--c-encre);
    --c-filet-clair: var(--c-porcelaine);
    --c-halo-core: rgb(26 86 56 / 0);
    --c-halo-mid: rgb(26 86 56 / 0);
  }

  .brand__lueur,
  .plaque::before {
    display: none;
  }

  .hero__mark {
    background-image: none;
    color: var(--c-porcelaine);
    -webkit-text-fill-color: currentcolor;
    text-shadow: none;
  }
}