@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════════════════
   CLUBORA — SYSTÈME VISUEL
   Écrit le 13/10/2026. Site statique, sans aucun JavaScript.

   ⚠️ POURQUOI AUCUN JAVASCRIPT, ET POURQUOI AUCUN STYLE EN LIGNE.
      Le vhost impose :
        default-src 'none'; style-src 'self'; img-src 'self' data:;
        font-src 'self'; base-uri 'none'; form-action 'none'
      `script-src` est ABSENT, donc il retombe sur `default-src 'none'` : tout
      script est bloqué par le navigateur. Et `style-src 'self'` SANS
      'unsafe-inline' interdit `<style>` et `style=`. Tout tient donc ici.
      Ce n'est pas une contrainte subie : les interactions sont en CSS
      (`:target`, `details`, `:has()`), la page s'affiche sans attendre un
      script, et les Core Web Vitals sont bons par construction.

   ⚠️ LA RÈGLE D'HONNÊTETÉ DU SITE. Une fonctionnalité n'est annoncée comme
      disponible que si l'audit de PulseAndVibes l'a trouvée dans le code ET
      couverte par un test qui passe. Les autres portent la mention
      « en développement ». Les classes `.etat--dispo` et `.etat--chantier`
      existent pour que cette distinction soit visible, pas optionnelle.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1 · POLICES, hébergées localement ──────────────────────────────────────
   ⚠️ `font-src 'self'` interdit Google Fonts. C'est de toute façon le bon
      choix : aucune requête vers un tiers (RGPD), et pas de dépendance réseau.
   ⚠️ `font-display: swap` : le texte s'affiche immédiatement dans la police de
      repli. Sans lui, un titre reste invisible le temps du téléchargement —
      c'est du LCP perdu pour rien. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── 2 · JETONS ─────────────────────────────────────────────────────────────
   ⚠️ TOUS les jetons sont définis ici, sur `:root` nu. Un seul redéfini
      uniquement dans un bloc `@media` et la page serait illisible dans l'autre
      thème. Le bloc sombre ne fait que REDÉFINIR, jamais introduire.

   ⚠️ LA PALETTE VIENT DU SUJET, PAS D'UNE MODE. Vert de terrain profond
      (`--pelouse`) : les clubs vivent sur des terrains et dans des salles.
      Ocre (`--signal`) réservé À CE QUI DEMANDE UNE ACTION — jamais décoratif,
      parce que le cœur du produit est un tableau de bord qui PRIORISE.
      Les gris portent un biais vert : un gris neutre pur se lit comme un gris
      non choisi. */

:root {
  /* encres */
  --encre: #14201d;
  --encre-douce: #475a53;
  --encre-tenue: #566862;

  /* fonds et surfaces */
  --papier: #f2f5f3;
  --surface: #ffffff;
  --surface-creuse: #e9efeb;
  --trait: #d7e0db;
  --trait-fort: #b9c7c0;

  /* accent : le terrain */
  --pelouse: #0f6b4f;
  --pelouse-sombre: #0a5340;
  --pelouse-voile: #e4efe9;

  /* signal : ce qui demande une action */
  --signal: #b35a10;
  --signal-voile: #fbeee0;

  /* états */
  --calme: #2f7d62;
  --calme-voile: #e6f1ec;

  /* typographie */
  --police-titre: "Bricolage Grotesque", "Liberation Sans", system-ui, sans-serif;
  --police-texte: "Public Sans", "Liberation Sans", system-ui, -apple-system, sans-serif;

  --t-micro: 0.75rem;
  --t-petit: 0.875rem;
  --t-base: 1.0625rem;
  --t-lead: 1.25rem;
  --t-h3: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  --t-h2: clamp(1.65rem, 1.2rem + 2vw, 2.5rem);
  --t-h1: clamp(2.3rem, 1.4rem + 4vw, 4.25rem);

  /* rythme */
  --mesure: 36rem;
  --large: 76rem;
  --r-petit: 6px;
  --r-moyen: 12px;
  --r-grand: 20px;

  /* profondeur — discrète, et seulement sur ce qui est « posé » */
  --ombre-posee: 0 1px 2px rgb(20 32 29 / 0.05), 0 8px 24px -12px rgb(20 32 29 / 0.12);
  --ombre-levee: 0 2px 4px rgb(20 32 29 / 0.06), 0 18px 48px -20px rgb(20 32 29 / 0.22);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --encre: #e4ebe7;
    --encre-douce: #a4b3ac;
    --encre-tenue: #7e8f87;

    --papier: #0b1411;
    --surface: #111d19;
    --surface-creuse: #16241f;
    --trait: #243530;
    --trait-fort: #32463f;

    --pelouse: #4cb38b;
    --pelouse-sombre: #6ac3a0;
    --pelouse-voile: #122a22;

    --signal: #e3933f;
    --signal-voile: #2a1d0f;

    --calme: #5cbd97;
    --calme-voile: #122a22;

    --ombre-posee: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --ombre-levee: 0 2px 4px rgb(0 0 0 / 0.5), 0 18px 48px -20px rgb(0 0 0 / 0.75);
  }
}

:root[data-theme="dark"] {
  --encre: #e4ebe7;
  --encre-douce: #a4b3ac;
  --encre-tenue: #7e8f87;
  --papier: #0b1411;
  --surface: #111d19;
  --surface-creuse: #16241f;
  --trait: #243530;
  --trait-fort: #32463f;
  --pelouse: #4cb38b;
  --pelouse-sombre: #6ac3a0;
  --pelouse-voile: #122a22;
  --signal: #e3933f;
  --signal-voile: #2a1d0f;
  --calme: #5cbd97;
  --calme-voile: #122a22;
  --ombre-posee: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --ombre-levee: 0 2px 4px rgb(0 0 0 / 0.5), 0 18px 48px -20px rgb(0 0 0 / 0.75);
}

/* ─── 3 · SOCLE ──────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* ⚠️ Les ancres ne doivent pas passer sous l'en-tête collant. */
  scroll-padding-top: 5.5rem;
}

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

body {
  margin: 0;
  /* ⚠️ Fond EXPLICITE : sans lui, la page emprunte le fond de l'hôte. */
  background: var(--papier);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-h1); font-weight: 800; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; }

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

a { color: var(--pelouse); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pelouse-sombre); }

/* ⚠️ Un focus visible est une obligation d'accessibilité, pas une option.
      `:focus-visible` ne l'affiche qu'au clavier — la souris n'en voit rien. */
:focus-visible {
  outline: 2px solid var(--pelouse);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--pelouse); color: #fff; }

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

/* Lien d'évitement — premier élément focusable de chaque page. */
.evitement {
  position: absolute;
  left: 0.5rem; top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--encre);
  color: var(--papier);
  border-radius: var(--r-petit);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}
.evitement:focus { top: 0.5rem; color: var(--papier); }

/* ─── 4 · GABARIT ────────────────────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--large);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--creuse { background: var(--surface-creuse); }
.section--encre { background: var(--encre); color: var(--papier); }
.section--encre h2, .section--encre h3 { color: var(--papier); }
/* ⚠️ **MESURÉ À 2,28 SUR 4,5 REQUIS, ET CORRIGÉ LE 13/10.** `.titre-section p` prend
   `--encre-douce`, qui est une encre SOMBRE : sur un fond sombre, le texte devenait
   presque invisible. Une section qui inverse son fond doit réassigner TOUTES ses encres,
   pas seulement celles des titres — c'est exactement le piège que le thème sombre pose,
   à ceci près qu'il se produit ici en plein thème clair. */
.section--encre .titre-section p,
.section--encre p,
.section--encre li { color: #b9c7c0; }
.section--encre .avertissement,
.section--encre .avertissement * { color: var(--encre); }

/* ⚠️ LE MOTIF STRUCTURANT : LA SEMAINE.
   Un club vit sur un rythme hebdomadaire — le cours du mardi soir, le match du
   samedi, la bousculade des inscriptions de septembre. Ce filet de sept
   colonnes revient comme séparateur de section : c'est la structure du produit
   rendue visible, pas un ornement. */
.semaine {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  height: 3px;
  background: var(--trait);
  margin-block: 0;
}
.semaine span { background: var(--trait); }
.semaine span:nth-child(2),
.semaine span:nth-child(4) { background: var(--pelouse); }
.semaine span:nth-child(6) { background: var(--signal); }

.titre-section {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.titre-section p {
  margin-top: 0.9rem;
  font-size: var(--t-lead);
  color: var(--encre-douce);
  max-width: var(--mesure);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--police-texte);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pelouse);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem; height: 2px;
  background: currentColor;
}
.section--encre .eyebrow { color: var(--signal); }

/* ─── 5 · BOUTONS ────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* ⚠️ 44 px de haut au minimum : c'est la cible tactile accessible.
        Mesurée et testée dans PulseAndVibes, reprise ici. */
  min-height: 46px;
  padding: 0.75rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-petit);
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: 650;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}
.bouton--premier {
  background: var(--pelouse);
  color: #fff;
  box-shadow: var(--ombre-posee);
}
.bouton--premier:hover {
  background: var(--pelouse-sombre);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--ombre-levee);
}
.bouton--second {
  background: transparent;
  border-color: var(--trait-fort);
  color: var(--encre);
}
.bouton--second:hover { border-color: var(--encre); color: var(--encre); background: var(--surface); }
.section--encre .bouton--second { border-color: #44544d; color: var(--papier); }
.section--encre .bouton--second:hover { border-color: var(--papier); background: #1b2a26; color: var(--papier); }

.groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ─── 6 · EN-TÊTE ET NAVIGATION ──────────────────────────────────────────── */

.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--trait);
}
.entete__corps {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.marque {
  display: inline-flex;
  align-items: baseline;
  min-height: 44px;
  padding-block: 0.35rem;
  gap: 0.1rem;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--encre);
  text-decoration: none;
  margin-right: auto;
}
/* ⚠️ Le point est la marque : un seul signe, réutilisable en favicon, lisible
      à 16 px. Il reprend l'ocre des signaux — la promesse du produit tient
      dans ce point : « voici ce qui demande votre attention ». */
.marque__point {
  width: 0.42em; height: 0.42em;
  border-radius: 50%;
  background: var(--signal);
  display: inline-block;
}

.nav { display: none; }
@media (min-width: 62rem) {
  .nav { display: flex; align-items: center; gap: 0.35rem; }
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.7rem;
  border-radius: var(--r-petit);
  font-size: var(--t-petit);
  font-weight: 550;
  color: var(--encre-douce);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav a:hover { color: var(--encre); background: var(--surface-creuse); }
.nav a[aria-current="page"] { color: var(--encre); font-weight: 700; }

.entete__actions { display: none; }
@media (min-width: 62rem) { .entete__actions { display: flex; gap: 0.6rem; } }

/* Menu mobile — en `details`, donc sans une ligne de JavaScript.
   ⚠️ `details` est natif, accessible au clavier et annoncé par les lecteurs
      d'écran. Le reproduire en JS serait plus de code pour moins de fiabilité. */
.menu-mobile { margin-left: auto; }
@media (min-width: 62rem) { .menu-mobile { display: none; } }
.menu-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--trait-fort);
  border-radius: var(--r-petit);
  cursor: pointer;
  list-style: none;
}
.menu-mobile > summary::-webkit-details-marker { display: none; }
.menu-mobile__barres {
  position: relative;
  width: 18px; height: 2px;
  background: var(--encre);
  border-radius: 2px;
}
.menu-mobile__barres::before,
.menu-mobile__barres::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  background: var(--encre);
  border-radius: 2px;
}
.menu-mobile__barres::before { top: -6px; }
.menu-mobile__barres::after { top: 6px; }

.menu-mobile__panneau {
  position: absolute;
  left: 0; right: 0;
  margin-top: 0.75rem;
  padding: 1rem clamp(1.15rem, 4vw, 2.5rem) 1.5rem;
  background: var(--surface);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre-levee);
}
.menu-mobile__panneau a {
  display: block;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
  font-weight: 600;
}
.menu-mobile__panneau a:last-of-type { border-bottom: 0; }
.menu-mobile__panneau .groupe-boutons { margin-top: 1.25rem; }

/* ─── 7 · HÉROS ──────────────────────────────────────────────────────────── */

/* ⚠️ PAS DE `100vh`. Un héros calibré sur la hauteur de l'écran pousse la page
      elle-même hors du premier regard. Il fait la taille de ce qu'il contient. */
.heros { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(3rem, 7vw, 5.5rem); }
.heros__grille {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .heros__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; }
}

.heros h1 { margin-bottom: 1.25rem; }
.heros__chapeau {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  color: var(--encre-douce);
  max-width: 34rem;
}
.heros__preuves {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.heros__preuves li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--t-petit);
  color: var(--encre-douce);
}
.heros__preuves li::before {
  content: "";
  flex: none;
  width: 0.9rem; height: 0.9rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  border: 2px solid var(--pelouse);
}

/* ─── 8 · LE PANNEAU D'ATTENTION (démonstration, données fictives) ────────
   ⚠️ CE N'EST PAS UNE CAPTURE D'ÉCRAN, ET LE SITE LE DIT. C'est une
      reconstitution en HTML du mécanisme réellement implémenté et testé dans
      PulseAndVibes (`Modules/Attention`, 14 tests) : des signaux PRIORISÉS qui
      S'ÉTEIGNENT une fois traités. Les noms et chiffres sont fictifs.
      Présenter une maquette comme une capture réelle serait une tromperie. */

.panneau {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-grand);
  box-shadow: var(--ombre-levee);
  overflow: hidden;
}
.panneau__barre {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  background: var(--surface-creuse);
  border-bottom: 1px solid var(--trait);
  font-size: var(--t-micro);
  color: var(--encre-tenue);
}
.panneau__pastilles { display: flex; gap: 0.3rem; }
.panneau__pastilles i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--trait-fort);
}
.panneau__titre {
  font-family: var(--police-titre);
  font-weight: 700;
  color: var(--encre);
  letter-spacing: -0.01em;
}
.panneau__corps { padding: 1.1rem 1rem 1.25rem; }

.panneau__intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.panneau__intro p { font-size: var(--t-petit); color: var(--encre-douce); }
.panneau__compte {
  font-family: var(--police-titre);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}

.signaux { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.signal {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  background: var(--surface);
}
/* ⚠️ L'URGENCE PASSE DEVANT LE NOMBRE — c'est une règle du produit, testée
      (`test_l_urgence_passe_devant_le_nombre`). Le liséré la rend visible. */
.signal--urgent { border-left: 3px solid var(--signal); background: var(--signal-voile); }
.signal--calme { border-left: 3px solid var(--calme); }
.signal--eteint { opacity: 0.55; }

.signal__marque {
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--trait-fort);
}
.signal--urgent .signal__marque { background: var(--signal); }
.signal--calme .signal__marque { background: var(--calme); }
.signal--eteint .signal__marque { background: var(--trait-fort); }

.signal__texte { min-width: 0; }
.signal__texte strong {
  display: block;
  font-size: var(--t-petit);
  font-weight: 650;
  color: var(--encre);
}
.signal__texte span {
  display: block;
  font-size: var(--t-micro);
  color: var(--encre-tenue);
}
.signal__action {
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--pelouse);
  white-space: nowrap;
}
.signal--eteint .signal__action { color: var(--encre-tenue); }

.panneau__pied {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--trait);
  font-size: var(--t-micro);
  color: var(--encre-tenue);
}

/* ─── 9 · CARTES ET GRILLES ──────────────────────────────────────────────── */

.grille { display: grid; gap: 1.25rem; }
.grille--2 { grid-template-columns: 1fr; }
.grille--3 { grid-template-columns: 1fr; }
@media (min-width: 46rem) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ⚠️ TOUT N'EST PAS UNE CARTE. La bordure, le fond, le rayon et l'ombre disent
      chacun « objet distinct » : les dépenser partout aplatit la hiérarchie.
      `.bloc` n'a qu'un filet à gauche ; `.carte` est un objet posé. */
.bloc {
  padding-left: 1.15rem;
  border-left: 2px solid var(--trait);
}
.bloc h3 { margin-bottom: 0.5rem; }
.bloc p { color: var(--encre-douce); font-size: var(--t-petit); }

.carte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.carte:hover { border-color: var(--trait-fort); transform: translateY(-2px); box-shadow: var(--ombre-posee); }
.carte h3 { font-size: 1.1rem; }
.carte p { color: var(--encre-douce); font-size: var(--t-petit); }
.carte__pied { margin-top: auto; padding-top: 0.5rem; }

/* ─── 10 · ÉTAT DES FONCTIONNALITÉS — la règle d'honnêteté, rendue visible ── */

.etat {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.etat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etat--dispo { background: var(--calme-voile); color: var(--calme); }
.etat--chantier { background: var(--signal-voile); color: var(--signal); }

.legende-etats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem 0.9rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  font-size: var(--t-petit);
  color: var(--encre-douce);
}

/* ─── 11 · CHIFFRES ──────────────────────────────────────────────────────── */

.chiffres {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  overflow: hidden;
}
@media (min-width: 52rem) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffre { background: var(--surface); padding: 1.25rem 1.1rem; }
.chiffre dt {
  font-size: var(--t-micro);
  color: var(--encre-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 650;
}
.chiffre dd {
  margin: 0.35rem 0 0;
  font-family: var(--police-titre);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* ─── 12 · DISCIPLINES ───────────────────────────────────────────────────── */

.disciplines { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.discipline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* ⚠️ 44 px : ce sont des pastilles qu'on touche au doigt, pas des liens de texte. */
  min-height: 44px;
  padding: 0.55rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 999px;
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}
.discipline:hover {
  border-color: var(--pelouse);
  background: var(--pelouse-voile);
  color: var(--encre);
  transform: translateY(-1px);
}

/* ─── 13 · QUESTIONS (details natif) ─────────────────────────────────────── */

.questions { display: grid; gap: 0.75rem; max-width: 52rem; }
.question {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--r-moyen);
  overflow: hidden;
}
.question > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  min-height: 46px;
  cursor: pointer;
  font-family: var(--police-titre);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.012em;
  list-style: none;
}
.question > summary::-webkit-details-marker { display: none; }
.question > summary::after {
  content: "";
  flex: none;
  width: 0.65rem; height: 0.65rem;
  border-right: 2px solid var(--pelouse);
  border-bottom: 2px solid var(--pelouse);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.question[open] > summary::after { transform: rotate(-135deg); }
.question__reponse { padding: 0 1.15rem 1.2rem; color: var(--encre-douce); }
.question__reponse p + p { margin-top: 0.7rem; }

/* ─── 14 · PIED DE PAGE ──────────────────────────────────────────────────── */

.pied {
  background: var(--encre);
  color: #b4c3bc;
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
}
.pied a { color: #d7e2dd; text-decoration: none; }
.pied a:hover { color: #fff; text-decoration: underline; }
.pied__grille {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 46rem) { .pied__grille { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.pied h2 {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a9a93;
  margin-bottom: 0.9rem;
  font-family: var(--police-texte);
  font-weight: 700;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; font-size: var(--t-petit); }
/* ⚠️ Les liens de pied de page se touchent au doigt sur mobile : on vise 44 px de haut
   par l'espacement interne, et non par une marge entre les éléments — une marge laisse
   un trou mort entre deux cibles. */
.pied ul a { display: inline-flex; align-items: center; min-height: 44px; }
.pied .marque { color: #fff; }
.pied__mention {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #283933;
  font-size: var(--t-micro);
  color: #8a9a93;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* ─── 15 · AVERTISSEMENT (maquette, données fictives) ────────────────────── */

.avertissement {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--signal-voile);
  border: 1px solid color-mix(in srgb, var(--signal) 35%, transparent);
  border-radius: var(--r-moyen);
  font-size: var(--t-petit);
  color: var(--encre);
}
.avertissement strong { font-weight: 700; }
.avertissement::before {
  content: "";
  flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: 0.15rem;
  border-radius: 50%;
  background: var(--signal);
}

/* ─── 16 · TABLEAU ───────────────────────────────────────────────────────── */

.defilant { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-petit);
}
th, td {
  padding: 0.75rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
th {
  font-family: var(--police-texte);
  font-weight: 700;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-tenue);
}
td { font-variant-numeric: tabular-nums; }