/* ============================================================
   Mini-site club — les trois gabarits (Chrono, Bitume, Atelier)
   Surcouche de assets/club-site.css, chargée APRÈS elle.

   Transcription du CSS vérifié de docs/maquettes/gabarits-mini-site-club.html :
   - `[data-g="…"]` de la maquette devient `[data-t="…"]`, posé sur <html>
     par clubsite_html() ;
   - ses classes deviennent celles du projet (.hc -> .cs-hero, .bez -> .card,
     .rows/.row -> .info/.info__row, .date* -> .tile*…) ;
   - ses couleurs en dur (posées par son moteur JS) deviennent les jetons de
     clubsite_palette() : aucune couleur de THÈME n'est écrite ici. Seule
     exception, voulue : le pied garde le blanc figé de la feuille maître
     (#fff, et ses filets en blanc translucide), parce que son fond --c-deep
     est sombre dans tous les thèmes (voir « Pied »).

   ⚠ Ce qui N'EST PAS transcrit, et pourquoi :
   - l'ordre des blocs (`order`) : c'est le serveur qui l'écrit, dans
     clubsite_templates()['ordre'] ;
   - les bascules `body[data-g] … {display:none}`, le sélecteur de maquette
     (.pick, .hint) et tout son JavaScript : la production n'en a aucun ;
   - ce qui demanderait un champ ou du JavaScript que le moteur n'a pas :
     l'encadré « OUVERT AUJOURD'HUI » et le bouton « Adhérer en ligne » de la
     fiche d'Atelier, le titre du bandeau d'appel, le jour et le mois séparés
     des dates de l'agenda.
   ============================================================ */

/* ── Jetons propres aux gabarits ──────────────────────────────
   Dérivés de la palette, jamais une couleur de plus. */
[data-t]{
  /* 🔴 Anton et Archivo Black n'existent qu'en 400. Sans cette ligne, un titre
     à 700 ou 800 (la feuille maître en demande) serait épaissi par le
     navigateur : un faux gras baveux, sur le plus gros texte de la page.
     ⚠ `style` et non `none` : aucune face italique n'est chargée, et les pages
     libres et actualités autorisent <em>/<i>. Avec `none`, tout italique
     disparaissait ; l'italique synthétisé reste permis, le faux gras non. */
  font-synthesis:style;
  --cs-ease:cubic-bezier(.32,.72,0,1);
  /* --phg de la maquette : le fond d'une image absente. */
  --cs-phg:linear-gradient(135deg,var(--c-bg-soft),var(--c-primary-soft));
  /* --shell de la maquette : à mi-chemin entre le fond et le fond doux. */
  --cs-shell:color-mix(in srgb,var(--c-bg) 50%,var(--c-bg-soft));
  --cs-inset:inset 0 1px 0 color-mix(in srgb,var(--c-ink) 5%,transparent);
  --cs-label:var(--font);
  --cs-fwh:400; --cs-lsh:0; --cs-tth:none;
  --cs-sy:clamp(56px,8vw,80px);
}
[data-tone="clair"]{
  --cs-inset:0 1px 2px rgba(0,0,0,.05),0 16px 40px -26px rgba(0,0,0,.2);
}
[data-t="chrono"]{
  --cs-fwh:400; --cs-lsh:.005em; --cs-tth:uppercase;
  --cs-sy:clamp(64px,9vw,96px);
}
[data-t="bitume"]{
  --cs-label:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --cs-fwh:400; --cs-lsh:-.025em; --cs-tth:uppercase;
  --cs-sy:clamp(60px,8.5vw,88px);
}
[data-t="atelier"]{
  --cs-label:"Space Mono",ui-monospace,monospace;
  --cs-fwh:700; --cs-lsh:-.035em; --cs-tth:none;
  --cs-sy:clamp(56px,8vw,80px);
}
/* Tout ce qui est en police de titre prend la graisse du gabarit : 400 pour
   les deux familles qui n'ont qu'elle, 700 pour Space Grotesk. */
[data-t] :is(h1,h2,h3,h4){font-weight:var(--cs-fwh)}

/* ── Ossature ─────────────────────────────────────────────── */
/* La maquette fige du blanc sur la couleur d'action : son encre se calcule. */
[data-t] .skip{color:var(--c-on-accent)}

/* Fond de plan technique d'Atelier : la grille, seule signature qui couvre
   toute la page. Les sections au fond doux la masquent, c'est voulu. */
/* 🔴 Le texte discret est posé SUR la grille : là où deux grands filets se
   croisent, chacun doublé d'un petit (tous les 230 px), quatre couches
   d'action s'empilent. Aux 9 % / 4 % de la maquette, le discret y tombait à
   4,18:1 sur le thème clair (mesuré au pixel, puis recalculé). Sur fond
   clair on descend à 5 % / 2,5 % (pire croisement calculé : 4,86 clair,
   4,99 blanc ; 6 % / 3 % ne laissait que 4,54 mesuré, l'anticrénelage du
   filet coûtant 0,1) ; sur fond sombre la maquette tient (pire : 5,19). */
[data-t="atelier"]{--cs-grille:9%;--cs-grille-fine:4%}
[data-t="atelier"][data-tone="clair"]{--cs-grille:5%;--cs-grille-fine:2.5%}
[data-t="atelier"] body{
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--c-primary) var(--cs-grille),transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--c-primary) var(--cs-grille),transparent) 1px,transparent 1px),
    linear-gradient(to right,color-mix(in srgb,var(--c-primary) var(--cs-grille-fine),transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--c-primary) var(--cs-grille-fine),transparent) 1px,transparent 1px);
  background-size:230px 230px,230px 230px,46px 46px,46px 46px}
/* La grille reste immobile au défilement, comme un plan sous la page.
   ⚠ Pas au téléphone : un fond fixe y force un nouveau rendu à chaque
   défilement (et iOS l'ignore de toute façon). */
@media(min-width:721px){[data-t="atelier"] body{background-attachment:fixed}}

[data-t] .section{padding:var(--cs-sy) 0}
[data-t] .section__title{font-size:var(--fs-h2);font-weight:var(--cs-fwh);line-height:.98;
  letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth);color:var(--c-ink);
  max-width:24ch;margin-bottom:28px;text-wrap:balance;overflow-wrap:break-word}
[data-t] .section__lead{color:var(--c-muted);font-size:1.04rem;max-width:56ch;margin-bottom:28px}
[data-t] .section__title+.section__lead{margin-top:-12px}

/* Le sur-titre (kicker de la maquette). */
[data-t] .section__kicker{display:flex;align-items:center;gap:12px;max-width:none;margin:0;
  font:700 .72rem/1.4 var(--cs-label);letter-spacing:.24em;text-transform:uppercase;
  /* ⚠ --c-primary-dark et non --c-primary : un petit texte veut 4,5:1, et
     la palette ne garantit que 3:1 à la couleur d'action sur le fond. */
  color:var(--c-primary-dark)}
[data-t] .section__kicker::before{content:"";width:34px;height:2px;flex:0 0 34px;
  background:var(--c-primary)}

/* Liens du corps (texte riche d'une page, lien de revendication…). Même
   raison que le sur-titre : --c-primary-dark, lisible en petit. Les liens qui
   portent une classe (boutons, cartes, tuiles) ont leur propre couleur. */
[data-t] main a:not([class]){color:var(--c-primary-dark)}

/* ── Bandeau de la plateforme (fusion d'URL, /club/{slug}) ── */
/* La marque RC Loisir, le retour à l'annuaire et les actions du visiteur
   (contacter, « Je suis adhérent »…), au-dessus de l'en-tête du club.
   ⚠ Même exception que le pied : fond --c-deep, sombre dans TOUS les thèmes,
   et blanc figé dessus. C'est le chrome de la plateforme, pas celui du club :
   il doit rester lisible quel que soit le thème choisi, clair ou sombre.
   Absent de /club/{slug}/site : la classe --pf n'y est pas posée et la
   feuille maître garde son filet de 4 px. */
[data-t] .cs-top--pf{height:auto;background:var(--c-deep);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14)}
[data-t] .cs-pf__in{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;
  padding-top:7px;padding-bottom:7px;font:600 .8rem/1.3 var(--font)}
[data-t] .cs-pf a{color:#fff}
[data-t] .cs-pf__marque{font-weight:800;letter-spacing:.02em}
[data-t] .cs-pf__retour{opacity:.85}
[data-t] .cs-pf__actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  margin-left:auto;min-width:0}
[data-t] .cs-pf__actions form{margin:0;display:inline-flex}
[data-t] .cs-pf svg{width:14px;height:14px;flex:none}
/* Les boutons : un contour blanc translucide, plein (couleur d'action) pour
   le premier geste. 32 px de haut au moins : une cible qu'on touche au doigt. */
[data-t] .cs-pf-btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;max-width:100%;
  padding:5px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.38);
  background:transparent;color:#fff;font:inherit;cursor:pointer;overflow-wrap:anywhere;text-align:left}
[data-t] .cs-pf-btn:hover{background:rgba(255,255,255,.12);text-decoration:none}
[data-t] .cs-pf .cs-pf-btn--plein{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-on-accent)}
[data-t] .cs-pf .cs-pf-btn--plein:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);
  color:var(--c-on-primary-dark)}
/* Un état (adhérent, demande en attente) n'est pas un bouton : pas de contour. */
[data-t] .cs-pf-etat{display:inline-flex;align-items:center;gap:6px;opacity:.92;overflow-wrap:anywhere}
[data-t] .cs-pf-flash{flex-basis:100%;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.1)}
/* Erreur et succès ne se ressemblent pas : un refus lu comme une confirmation
   laisse croire que la demande est partie. Un filet de couleur à gauche et un
   fond teinté, le texte reste blanc sur le fond sombre du bandeau. */
[data-t] .cs-pf-flash--error{background:rgba(220,38,38,.3);box-shadow:inset 3px 0 0 #f87171}
[data-t] .cs-pf-flash--success{background:rgba(22,163,74,.26);box-shadow:inset 3px 0 0 #4ade80}
/* « On a besoin de vous » : une sortie par ligne, sous les boutons. */
[data-t] .cs-pf-prep{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 14px;font-weight:500}
[data-t] .cs-pf-prep b{font-weight:800}
@media(max-width:560px){
  [data-t] .cs-pf__in{gap:6px 12px;font-size:.78rem}
  /* Les actions passent sous la marque, alignées à gauche : à 375 px, un
     margin-left:auto les collait au bord droit sur deux lignes inégales. */
  [data-t] .cs-pf__actions{margin-left:0;width:100%}
}

/* ── En-tête ──────────────────────────────────────────────── */
/* 🔴 La feuille maître pose un en-tête BLANC figé : sur un thème sombre, le
   nom du club (encre blanche) y devenait invisible. */
[data-t] .cs-head{background:var(--c-bg);
  background:color-mix(in srgb,var(--c-bg) 94%,transparent);border-bottom:1px solid var(--c-line)}
[data-t="bitume"] .cs-head{background:var(--c-bg);border-bottom:2px solid var(--c-primary)}
[data-t] .cs-head__in{gap:18px}
/* 🔴 LA MARQUE CÈDE EN PREMIER. Le bouton de contact ne rétrécit jamais
   (voir plus bas) ; quand la place manque, c'est le NOM du club qui se coupe
   en points de suspension, le logo gardant sa taille. Mesuré avant : avec un
   nom de 49 caractères, « Contact » tombait à 40 px, réduit à « … ». */
[data-t] .cs-brand{flex:0 1 auto;gap:13px;min-width:0;color:var(--c-ink);font-weight:var(--cs-fwh);
  font-size:1.02rem;line-height:1.1;letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth)}
[data-t] .cs-brand:hover{text-decoration:none}
/* ⚠ Interligne et retrait vertical : overflow:hidden (pour les points de
   suspension d'un nom trop long) rognait l'accent d'un « É » capital. */
[data-t] .cs-brand__name{min-width:0;overflow:hidden;text-overflow:ellipsis;
  line-height:1.3;padding-block:.1em}
/* Un plancher au nom quand le menu complet est affiché : avec cinq pages, le
   partage proportionnel le réduisait à « ASSOCIATION … » (90 px). Il reste la
   place : logo 170 + nom 10 em (~165) + un lien au plus 34 em (~465) < 961 px. */
@media(min-width:1001px){[data-t] .cs-brand__name{min-width:10em}}
/* Les initiales, quand le club n'a pas de logo. */
[data-t] .cs-logo{width:44px;height:44px;border-radius:var(--radius);
  background:var(--c-primary);color:var(--c-on-accent);
  font:var(--cs-fwh) .92rem/1 var(--font-head);letter-spacing:.04em}
[data-t] .cs-logo-img{flex:none;height:44px;max-width:170px}
/* Plaque derrière le logo, uniquement sur un thème clair.
   🔴 Un logo de club est souvent clair et transparent. Sur un fond clair il
   disparaît, et aucun calcul ne peut recolorier l'image d'un club : on lui
   donne donc un fond. Sur un thème sombre la plaque serait inutile et se
   verrait, d'où le sélecteur sur data-tone. */
[data-tone="clair"] .cs-logo-img{
  background:var(--c-deep);padding:5px 9px;border-radius:var(--radius)}

/* Le menu sur son propre jeton, pas sur le texte discret. Mesuré : --c-muted
   donnait un menu délavé, c'est le défaut que Yann a relevé sur la maquette.
   Posé ici pour ne pas modifier la feuille maître une seconde fois. */
[data-t] .cs-nav a{color:var(--c-nav)}
[data-t] .cs-nav a:hover{color:var(--c-ink)}
/* 🔴 LE MENU NE DÉBORDE JAMAIS, quel que soit le nombre de pages libres : il
   prend la place que la marque lui laisse et passe à la ligne. Mesuré avant :
   5 pages à 1280 px en Bitume, la page faisait 1399 px.
   ⚠ Sa largeur minimale est celle de son plus long élément (min-width:auto,
   PAS 0) : c'est ce qui l'empêche d'écraser le bouton de contact, et ce qui
   fait céder la marque à sa place. Pour que ce minimum reste borné, un titre
   de page s'arrête à 34 em (points de suspension), une longueur fixe et non
   un pourcentage, qu'un calcul de taille intrinsèque ignorerait.
   ⚠ Base `auto` (sa largeur sur une ligne) et non 0 : quand tout ne tient pas,
   marque et menu rétrécissent en proportion de leur largeur, donc le nom se
   coupe AVANT que le menu ne s'empile. Avec une base 0, la marque gardait
   tout son nom et le menu tombait à un lien par ligne (en-tête de 290 px). */
/* 🔴 EN-TÊTE SUR DEUX LIGNES (Yann, 09/10) : ligne 1 = la marque (logo, et
   nom s'il est affiché), ligne 2 = le menu, centré, qui passe à la ligne au
   lieu de déborder. Le menu prend toute la largeur (flex-basis 100 %), ce qui
   le renvoie sous la marque. Aucun défilement horizontal. */
[data-t] .cs-head__in{flex-wrap:wrap;justify-content:center;row-gap:8px}
[data-t] .cs-nav{flex:1 1 100%;gap:4px 2px;align-items:center;
  flex-wrap:wrap;justify-content:center}
/* Le bouton menu n'existe qu'au téléphone et avec le script de l'en-tête. */
[data-t] .cs-burger{display:none}
[data-t] .cs-nav a{max-width:34em;overflow:hidden;text-overflow:ellipsis;
  padding:10px 15px;border-radius:var(--radius);
  font:700 .8rem/1 var(--cs-label);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  transition:color .4s var(--cs-ease),background-color .4s var(--cs-ease)}
[data-t] .cs-nav a:hover{background:var(--c-bg-soft);text-decoration:none}
/* ⚠ À spécificité égale, la règle ci-dessus effacerait la page active de la
   feuille maître : on la repose, sur le couple contrôlé par la palette. */
[data-t] .cs-nav a.is-active{color:var(--c-primary-dark);background:var(--c-primary-soft)}
/* Le lien « Contact » du menu devient le bouton de l'en-tête (le « Nous
   contacter » de la maquette), sans une ligne de HTML de plus. */
/* 🔴 Jamais tronqué ni rétréci, à aucune largeur : c'est le seul moyen de
   joindre le club depuis l'en-tête au téléphone. */
[data-t] .cs-nav a[href$="#contact"]{flex:none;max-width:none;overflow:visible;
  margin-left:10px;padding:13px 20px;
  background:var(--c-primary);color:var(--c-on-accent);font-weight:800}
[data-t] .cs-nav a[href$="#contact"]:hover{background:var(--c-primary-dark);color:var(--c-on-primary-dark)}
/* 🔴 La feuille maître masque tout le menu sous 720 px : le visiteur sur
   téléphone n'avait plus aucun moyen de joindre le club depuis l'en-tête. On
   garde le seul bouton de contact.
   ⚠ Dès 1000 px, comme la maquette, et non 720 : entre les deux, un club à
   cinq pages libres avait un menu sur trois lignes, soit un en-tête collant
   qui mangeait un quart d'écran de tablette. Les pages restent atteignables
   par le bloc « Nos pages » de l'accueil. */
/* 🔴 Sous 1000 px, avec le script de l'en-tête (classe is-js), le menu se
   replie derrière un bouton « Menu » (aria-expanded) ; le bouton de contact
   reste toujours visible, c'est le seul moyen de joindre le club depuis
   l'en-tête. Sans script, le menu reste entier sous la marque : jamais de
   liens masqués sans moyen de les rouvrir. (La feuille maître masquait tout le
   menu sous 720 px : c'est pourquoi la navigation avait disparu.) */
@media(max-width:1000px){
  [data-t] .cs-head__in{justify-content:space-between}
  [data-t] .cs-brand{flex:1 1 0}
  [data-t] .cs-nav{display:flex}
  [data-t] .cs-head.is-js .cs-burger{display:inline-flex;flex:none;align-items:center;gap:10px;
    min-height:44px;padding:0 16px;border:1px solid var(--c-line-strong,var(--c-line));
    border-radius:var(--radius);background:transparent;color:var(--c-ink);cursor:pointer;
    font:700 .8rem/1 var(--cs-label);letter-spacing:.06em;text-transform:uppercase}
  [data-t] .cs-head.is-js .cs-burger:hover{background:var(--c-bg-soft)}
  [data-t] .cs-burger__ico,[data-t] .cs-burger__ico::before,[data-t] .cs-burger__ico::after{
    display:block;width:18px;height:2px;background:currentColor;border-radius:1px;
    transition:transform .25s var(--cs-ease),opacity .25s}
  [data-t] .cs-burger__ico{position:relative}
  [data-t] .cs-burger__ico::before,[data-t] .cs-burger__ico::after{content:"";position:absolute;left:0}
  [data-t] .cs-burger__ico::before{top:-6px}
  [data-t] .cs-burger__ico::after{top:6px}
  [data-t] .cs-head.is-open .cs-burger__ico{background:transparent}
  [data-t] .cs-head.is-open .cs-burger__ico::before{top:0;transform:rotate(45deg)}
  [data-t] .cs-head.is-open .cs-burger__ico::after{top:0;transform:rotate(-45deg)}
  [data-t] .cs-head.is-js:not(.is-open) .cs-nav a:not([href$="#contact"]){display:none}
  [data-t] .cs-head.is-js .cs-nav{flex-direction:column;align-items:stretch}
  [data-t] .cs-head.is-js .cs-nav a{max-width:none;text-align:center;white-space:normal}
  [data-t] .cs-nav a[href$="#contact"]{margin-left:0}
}
}

/* ── Boutons ──────────────────────────────────────────────── */
[data-t] .cs-cta{gap:10px;margin-top:0;padding:15px 24px;border-radius:var(--radius);
  background:var(--c-primary);
  /* La feuille maître fige du blanc : illisible sur un orange vif. */
  color:var(--c-on-accent);
  font:800 .86rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;
  transition:transform .55s var(--cs-ease),box-shadow .55s var(--cs-ease),background-color .3s}
/* 🔴 --c-primary-dark sert ici de FOND : son encre est --c-on-primary-dark,
   jamais le blanc de la feuille maître (2,27:1 en chrono). */
[data-t] .cs-cta:hover{background:var(--c-primary-dark);color:var(--c-on-primary-dark);
  text-decoration:none;box-shadow:0 16px 38px -12px color-mix(in srgb,var(--c-primary) 65%,transparent)}
[data-t] .cs-cta:active{transform:scale(.975)}
[data-t] .cs-cta--ghost{background:transparent;color:var(--c-ink);
  border:1px solid var(--c-line-strong);padding:14px 23px}
[data-t] .cs-cta--ghost:hover{background:var(--c-bg-soft);color:var(--c-ink);box-shadow:none}
[data-t] .cs-cta--lg{font-size:.95rem;padding:18px 30px}

/* ── Hero : le texte commun ───────────────────────────────── */
[data-t] .cs-hero{color:var(--c-ink);background:var(--c-bg)}
/* Le voile de la feuille maître (dégradé de --c-primary-dark sous du blanc)
   est retiré : chaque gabarit pose le sien, calculé sur --c-bg. */
[data-t] .cs-hero::after{content:none}
[data-t] .cs-hero p{opacity:1}
[data-t] .cs-hero__txt .section__kicker{margin-top:0}

/* 🔴 DEUX TITRES. Le <h1> porte toujours le NOM du club (référencement) ;
   quand l'accroche existe, c'est elle, en <h2>, qui prend la taille du hero
   et le <h1> devient un sur-titre. Sans accroche, le <h1> est le grand titre. */
[data-t] .cs-hero__titre,
[data-t] .cs-hero__txt:not(.cs-hero__txt--titre) .cs-hero__nom{
  font-size:var(--fs-hero);font-weight:var(--cs-fwh);line-height:.94;
  letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth);color:var(--c-ink);
  max-width:16ch;margin-top:22px;text-wrap:balance;overflow-wrap:break-word}
[data-t] .cs-hero__titre em{font-style:normal;color:var(--c-primary)}
[data-t] .cs-hero__txt--titre .cs-hero__nom{
  font-size:clamp(1.05rem,.9rem + .7vw,1.4rem);font-weight:var(--cs-fwh);line-height:1.1;
  letter-spacing:.02em;text-transform:var(--cs-tth);color:var(--c-ink);
  max-width:none;margin-top:18px;overflow-wrap:break-word}
/* Même raison que la marge du grand titre de Chrono (plus bas) : des
   capitales accentuées dans l'accroche dépassent au-dessus de leur ligne. */
[data-t] .cs-hero__txt--titre .cs-hero__titre{margin-top:max(10px,.2em)}
[data-t] .cs-hero__lead{color:var(--c-muted);font-size:1.04rem;max-width:56ch;margin-top:22px}
[data-t] .cs-hero__acts{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
[data-t] .cs-badges{gap:10px;margin-top:32px}
[data-t] .cs-badge{background:transparent;border:1px solid var(--c-line-strong);
  border-radius:var(--radius);padding:10px 14px;
  font:700 .7rem/1 var(--cs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink)}

/* ── Hero CHRONO : photo plein cadre, titre géant, filigrane rogné ─ */
/* ⚠ Un retrait en haut que la maquette n'avait pas : son hero ne portait
   qu'un titre ; le nôtre a le nom ET l'accroche, et à 1280 px le bloc
   remplissait toute la hauteur, sur-titre collé sous l'en-tête. */
[data-t="chrono"] .cs-hero:not(.cs-hero--page){padding:clamp(96px,14vh,140px) 0 0;
  min-height:min(96vh,880px);display:flex;align-items:flex-end}
/* Sans photo : le décor de la maquette. Avec photo (attribut style posé par
   le moteur), la photo remplace le décor, atténuée de moitié pour le texte. */
[data-t="chrono"] .cs-hero__bg{opacity:1;background-color:var(--c-bg-soft);
  background-image:radial-gradient(120% 90% at 78% 12%,
      color-mix(in srgb,var(--c-primary) 36%,transparent),transparent 58%),var(--cs-phg);
  background-size:cover;background-position:center}
[data-t="chrono"] .cs-hero__bg[style]{opacity:.5}
/* Le fondu vers le fond, sur la section et non sur la photo : l'opacité de la
   photo ne doit pas l'atténuer lui aussi. C'est lui qui garde le texte lisible. */
[data-t="chrono"] .cs-hero:not(.cs-hero--page)::after{content:"";position:absolute;inset:0;opacity:1;
  background:
    repeating-linear-gradient(115deg,color-mix(in srgb,var(--c-ink) 3%,transparent) 0 1px,
      transparent 1px 7px),
    linear-gradient(to top,var(--c-bg) 4%,color-mix(in srgb,var(--c-bg) 72%,transparent) 44%,
      color-mix(in srgb,var(--c-bg) 18%,transparent))}
/* Filigrane : texture, pas un second titre. Rogné par le bas du hero, et par
   son overflow:hidden sur les côtés : aucun débordement de page. */
[data-t="chrono"] .cs-hero__ghost{position:absolute;left:0;right:0;bottom:-7%;z-index:1;
  font-family:var(--font-head);font-weight:400;font-size:clamp(6rem,23vw,21rem);line-height:.72;
  letter-spacing:-.02em;text-align:center;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--c-ink) 6%,transparent);
  white-space:nowrap;pointer-events:none;user-select:none}
[data-t="chrono"] .cs-hero__in{z-index:3;width:100%;padding:0 20px 72px}
/* ⚠ Marge en em : à interligne 0,9 les capitales accentuées (le « É » d'un
   nom de club) dépassent de ~0,3 em au-dessus de la ligne. Les 26 px de la
   maquette laissaient 6 px entre l'accent et le sur-titre à 134 px. */
[data-t="chrono"] .cs-hero__titre,
[data-t="chrono"] .cs-hero__txt:not(.cs-hero__txt--titre) .cs-hero__nom{
  line-height:.9;letter-spacing:-.015em;max-width:15ch;margin-top:max(26px,.3em)}
[data-t="chrono"] .cs-hero__txt--titre .cs-hero__titre{margin-top:max(12px,.26em)}
[data-t="chrono"] .cs-hero__titre em{color:transparent;-webkit-text-stroke:2px var(--c-primary)}
/* 🔴 Le sur-titre du hero à l'encre, son filet garde la couleur d'action. En
   couleur d'action il tombait à 2,16:1 sur une photo à ciel clair (le fondu
   ne couvre pas le haut du bloc de texte), et à 4,12:1 sur la lueur du décor
   sans photo du thème blanc. */
[data-t="chrono"] .cs-hero .section__kicker{color:var(--c-ink)}
[data-t="chrono"] .cs-hero__lead{color:var(--c-text);font-size:1.18rem;max-width:44ch;margin-top:26px}
[data-t="chrono"] .cs-badge{color:var(--c-text);
  border-color:color-mix(in srgb,var(--c-ink) 26%,transparent)}

/* ── Hero BITUME : coupe diagonale entre le texte et la photo ─ */
[data-t="bitume"] .cs-hero:not(.cs-hero--page){padding:0;min-height:min(92vh,840px);
  display:flex;align-items:center}
[data-t="bitume"] .cs-hero__panneau{position:absolute;top:0;right:0;bottom:0;width:53%;
  background-color:var(--c-bg-soft);background-image:var(--cs-phg);
  background-size:cover;background-position:center;
  clip-path:polygon(17% 0,100% 0,100% 100%,0 100%)}
[data-t="bitume"] .cs-hero__panneau::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(120deg,rgba(0,0,0,.24) 0 2px,transparent 2px 9px),
    linear-gradient(to right,color-mix(in srgb,var(--c-bg) 84%,transparent),transparent 26%)}
[data-t="bitume"] .cs-hero__arete{position:absolute;top:0;right:0;bottom:0;width:53%;z-index:2;
  background:var(--c-primary);clip-path:polygon(17% 0,calc(17% + 3px) 0,3px 100%,0 100%)}
[data-t="bitume"] .cs-hero__couture{position:absolute;right:47.4%;top:50%;z-index:3;
  transform:translateY(-50%) rotate(-90deg);
  font:700 .72rem/1 var(--cs-label);letter-spacing:.34em;text-transform:uppercase;
  color:var(--c-primary-dark);white-space:nowrap}
[data-t="bitume"] .cs-hero__in{width:100%;padding:72px 20px}
[data-t="bitume"] .cs-hero__txt{max-width:52%}
[data-t="bitume"] .cs-hero__titre,
[data-t="bitume"] .cs-hero__txt:not(.cs-hero__txt--titre) .cs-hero__nom{letter-spacing:-.035em}
[data-t="bitume"] .cs-hero__lead{color:var(--c-text);max-width:38ch;margin-top:26px}
[data-t="bitume"] .cs-badge{background:var(--c-bg-soft);border-left:3px solid var(--c-primary)}
/* Au téléphone, la diagonale devient un filet horizontal SOUS la photo : en
   biais sur 375 px, elle barrait le texte. */
@media(max-width:940px){
  [data-t="bitume"] .cs-hero:not(.cs-hero--page){min-height:auto;display:block}
  [data-t="bitume"] .cs-hero__panneau{position:relative;inset:auto;width:100%;height:230px;clip-path:none}
  [data-t="bitume"] .cs-hero__arete{position:relative;inset:auto;width:100%;height:3px;clip-path:none}
  [data-t="bitume"] .cs-hero__couture{display:none}
  [data-t="bitume"] .cs-hero__in{padding:38px 20px 56px}
  [data-t="bitume"] .cs-hero__txt{max-width:100%}
}

/* ── Hero ATELIER : deux colonnes, fiche technique à droite ─ */
/* Le moteur pose la figure et la fiche AVANT le texte, en frères : la grille
   les replace par zones, sans toucher au HTML. */
[data-t="atelier"] .cs-hero:not(.cs-hero--page){display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);
  grid-template-areas:"txt spec" "fig spec";column-gap:54px;align-items:start;
  padding:64px max(20px,calc((100% - var(--wrap)) / 2 + 20px));background:transparent}
[data-t="atelier"] .cs-hero__in{grid-area:txt;max-width:none;margin:0;padding:0}
[data-t="atelier"] .cs-hero__titre,
[data-t="atelier"] .cs-hero__txt:not(.cs-hero__txt--titre) .cs-hero__nom{
  line-height:1.02;letter-spacing:-.04em;max-width:19ch}
/* ⚠ --c-text et non le texte discret de la maquette : le hero d'Atelier est
   posé sur la grille, et ses filets font tomber le discret à 4,2:1 sur les
   thèmes clairs (mesuré au pixel). */
[data-t="atelier"] .cs-hero__lead{font-size:1.08rem;color:var(--c-text)}
[data-t="atelier"] .cs-badge{color:var(--c-muted)}
[data-t="atelier"] .cs-hero__fig{grid-area:fig;position:relative;margin-top:38px;aspect-ratio:21/9;
  background-color:var(--c-bg-soft);background-image:var(--cs-phg);
  background-size:cover;background-position:center;border:1px solid var(--c-line)}
/* La légende « FIG. 01 — nom de la première piste » : dérivée par le moteur.
   ⚠ Posée sur une photo dont on ne connaît pas les couleurs : un fond voilé
   derrière elle, sinon elle disparaît sur un ciel clair. */
[data-t="atelier"] .cs-hero__fig::after{content:attr(data-legende);position:absolute;left:14px;bottom:12px;
  max-width:calc(100% - 28px);padding:4px 6px;
  background:color-mix(in srgb,var(--c-bg) 72%,transparent);
  font:400 .66rem/1.2 var(--cs-label);letter-spacing:.14em;text-transform:uppercase;
  color:color-mix(in srgb,var(--c-ink) 86%,transparent)}
/* La fiche technique, dans le premier écran. */
[data-t] .cs-spec{grid-area:spec;border:1px solid var(--c-line);background:var(--c-bg-soft)}
[data-t] .cs-spec__h{padding:16px 20px;border-bottom:1px solid var(--c-line);
  font:400 .68rem/1 var(--cs-label);letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
[data-t] .cs-spec .info{max-width:none;padding:6px 20px 20px;border-top:0}
[data-t] .cs-spec .info__row:last-child{border-bottom:0}
/* Au téléphone, la fiche passe sous le texte et la figure. */
@media(max-width:980px){
  [data-t="atelier"] .cs-hero:not(.cs-hero--page){grid-template-columns:minmax(0,1fr);
    grid-template-areas:"txt" "fig" "spec";row-gap:34px;padding-top:48px;padding-bottom:48px}
  [data-t="atelier"] .cs-hero__fig{margin-top:0}
}

/* ── Hero d'une page libre ────────────────────────────────── */
[data-t] .cs-hero--page{padding:clamp(56px,8vw,88px) 0 clamp(40px,6vw,56px);
  background:var(--c-bg-soft);border-bottom:1px solid var(--c-line)}
[data-t] .cs-hero--page h1{font-size:var(--fs-h2);font-weight:var(--cs-fwh);line-height:1;
  letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth);color:var(--c-ink);
  max-width:22ch;text-wrap:balance;overflow-wrap:break-word}
[data-t] .cs-rich{color:var(--c-text)}

/* ── Signatures de section ────────────────────────────────── */
/* Bitume : une bande colorée au départ de chaque section, et les intertitres
   numérotés en CSS, sans rien changer au HTML. */
[data-t="bitume"] main>section:not(.cs-hero):not(.cs-cta-band){
  background-image:linear-gradient(to right,var(--c-primary) 0 78px,var(--c-line) 78px 100%);
  background-size:100% 3px;background-repeat:no-repeat;background-position:0 0}
/* ⚠ Le compteur avance sur l'INTERTITRE, pas sur la section : hero, bandeau
   défilant, chiffres et bandeau d'appel n'en ont pas, et comptés quand même
   ils faisaient sauter les numéros (02, 04, 06…). */
[data-t="bitume"] main{counter-reset:cs-sec}
[data-t="bitume"] main .section__title{counter-increment:cs-sec}
[data-t="bitume"] .section__title::before{
  content:counter(cs-sec,decimal-leading-zero);
  /* Le numéro est un décor : la syntaxe « / "" » le tait au lecteur d'écran. */
  content:counter(cs-sec,decimal-leading-zero) / "";
  display:block;margin-bottom:12px;font:400 1.6rem/1 var(--font-head);letter-spacing:0;
  color:transparent;-webkit-text-stroke:1px var(--c-primary)}

/* ── Chiffres clés ────────────────────────────────────────── */
[data-t] .cs-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;margin-top:0}
[data-t] .cs-stat{min-width:0;padding:30px 26px;background:transparent;border-radius:0;
  border-left:1px solid var(--c-line);text-align:left}
[data-t] .cs-stat:first-child{border-left:0;padding-left:0}
[data-t] .cs-stat__n{font-weight:var(--cs-fwh);font-size:clamp(2.6rem,5vw,4rem);line-height:.85;
  letter-spacing:-.04em;color:var(--c-ink)}
[data-t] .cs-stat__l{margin-top:14px;font:700 .72rem/1.3 var(--cs-label);letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-muted)}
@media(max-width:860px){
  [data-t] .cs-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}
  [data-t] .cs-stat:nth-child(odd){border-left:0;padding-left:0}
}
/* Chrono : la bande de chiffres en biais, la signature du gabarit. */
[data-t="chrono"] .section:has(>.wrap>.cs-stats){background:var(--c-primary);border:0;
  transform:skewY(-2.2deg);padding:56px 0;margin:18px 0}
[data-t="chrono"] .section:has(>.wrap>.cs-stats)>.wrap{transform:skewY(2.2deg)}
[data-t="chrono"] .cs-stat{border-left-color:color-mix(in srgb,var(--c-on-accent) 24%,transparent)}
[data-t="chrono"] .cs-stat__n{color:var(--c-on-accent)}
/* ⚠ L'encre pleine et non les 72 % de la maquette : mesuré 4,44:1 sur
   l'orange du gabarit, et 3,48:1 à 80 % sur le rouge du thème blanc (le
   blanc n'y fait que 4,6:1 à plein). Un petit libellé n'a aucune marge. */
[data-t="chrono"] .cs-stat__l{color:var(--c-on-accent)}
/* Bitume : des plaques, pas un bandeau. */
[data-t="bitume"] .cs-stats{gap:12px}
[data-t="bitume"] .cs-stat,
[data-t="bitume"] .cs-stat:first-child,
[data-t="bitume"] .cs-stat:nth-child(odd){background:var(--c-bg-soft);
  border:1px solid var(--c-line-strong);border-left:4px solid var(--c-primary);padding:26px 22px}

/* ── Bandeau défilant ─────────────────────────────────────── */
[data-t] .cs-marquee{overflow:hidden;padding:16px 0;background:var(--cs-shell);
  border-block:1px solid var(--c-line)}
[data-t] .cs-marquee__t{display:flex;width:max-content;animation:cs-defile 34s linear infinite;
  font-family:var(--font-head);font-weight:var(--cs-fwh);font-size:1.1rem;line-height:1.6;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
/* ⚠ L'écart est une marge de chaque élément, pas un `gap` du conteneur : le
   moteur répète la liste quatre fois et l'animation glisse de la moitié. Avec
   un `gap`, la moitié tombait au milieu d'un écart et la boucle sautait. */
[data-t] .cs-marquee__t span{display:flex;align-items:center;gap:44px;padding-right:44px;white-space:nowrap}
[data-t] .cs-marquee__t span::after{content:"";width:7px;height:7px;border-radius:999px;
  background:var(--c-primary)}
@keyframes cs-defile{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){[data-t] .cs-marquee__t{animation:none}}

/* ── Agenda et lieux : la tuile devient une ligne ─────────── */
[data-t] .grid:has(>.tile){grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--c-line)}
[data-t] .tile{align-items:center;gap:22px;padding:22px 0;background:transparent;border:0;
  border-bottom:1px solid var(--c-line);border-radius:0;color:var(--c-text);
  transition:background-color .5s var(--cs-ease),padding-left .5s var(--cs-ease)}
[data-t] a.tile:hover{background:color-mix(in srgb,var(--c-ink) 5%,transparent);text-decoration:none}
[data-t] .tile__ic{width:52px;height:52px;border-radius:var(--radius);background:transparent;
  border:1px solid var(--c-line-strong);color:var(--c-primary-dark)}
[data-t] .tile h3{font-size:1.22rem;font-weight:var(--cs-fwh);line-height:1.15;
  letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth);color:var(--c-ink)}
[data-t] .tile p{color:var(--c-muted);font-size:.9rem;margin-top:6px}
[data-t] .tile .cs-price{margin:10px 0 0;font:800 .82rem/1.2 var(--cs-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--c-primary-dark)}
/* Chrono : l'agenda en feuille de chronos, chaque date numérotée en CSS. */
[data-t="chrono"] a.tile:hover{padding-left:12px}
[data-t="chrono"] #agenda .grid{counter-reset:cs-rang}
[data-t="chrono"] #agenda .tile{counter-increment:cs-rang}
[data-t="chrono"] #agenda .tile h3{font-size:1.5rem}
[data-t="chrono"] #agenda .tile__ic{width:54px;border:0}
[data-t="chrono"] #agenda .tile__ic svg{display:none}
[data-t="chrono"] #agenda .tile__ic::before{content:counter(cs-rang,decimal-leading-zero);
  content:counter(cs-rang,decimal-leading-zero) / "";
  font:400 1.9rem/1 var(--font-head);color:transparent;-webkit-text-stroke:1px var(--c-line-strong)}
/* Bitume : la date en pavé coloré, comme une affiche de combat. */
[data-t="bitume"] #agenda .tile__ic{width:56px;height:56px;border:0;
  background:var(--c-primary);color:var(--c-on-accent)}
/* Atelier : les dates en monospace, comme un relevé. */
[data-t="atelier"] #agenda .tile p:not(.cs-price),
[data-t="atelier"] article.card .card__meta{font-family:var(--cs-label);font-size:.82rem;letter-spacing:.04em}

/* ── Cartes (actualités, pages) : la carte à double bordure ─ */
[data-t] .card{padding:6px;background:var(--cs-shell);border:1px solid var(--c-line);
  border-radius:var(--radius);box-shadow:none;color:var(--c-text);
  transition:transform .6s var(--cs-ease),border-color .6s var(--cs-ease)}
[data-t] a.card:hover{transform:translateY(-4px);border-color:var(--c-primary);text-decoration:none}
/* ⚠ Rayon intérieur à 0 : la maquette écrit calc(rayon - 6px), négatif pour
   les trois gabarits (4, 0 et 2 px), que le navigateur ramène à 0. Et un
   calc() sur le jeton « 0 » sans unité de Bitume serait invalide. */
[data-t] .card__body{padding:28px;background:var(--c-bg-soft);border-radius:0;box-shadow:var(--cs-inset)}
[data-t] .card__body:only-child{height:100%}
[data-t] .card__img{border-radius:0}
[data-t] .card h3{font-size:1.16rem;font-weight:var(--cs-fwh);line-height:1.15;margin-bottom:18px;
  letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth);color:var(--c-ink)}
[data-t] .card__meta{color:var(--c-muted);font-size:.95rem}

/* ── Galerie ──────────────────────────────────────────────── */
[data-t] .cs-gallery{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-auto-rows:170px;gap:12px}
[data-t] .cs-gallery__it{aspect-ratio:auto;border-radius:var(--radius);background:var(--cs-phg);
  transition:transform .7s var(--cs-ease)}
[data-t] .cs-gallery__it:hover{transform:scale(1.025)}
[data-t] .cs-gallery__it:hover img{transform:none}
/* La grande vignette de la maquette, seulement à partir de cinq photos : en
   dessous, elle laissait des cases vides. */
[data-t] .cs-gallery__it:first-child:nth-last-child(n+5){grid-column:span 2;grid-row:span 2}
@media(max-width:860px){
  [data-t] .cs-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:130px}
  [data-t] .cs-gallery__it:first-child:nth-last-child(n+5){grid-row:span 1}
}

/* ── Vidéo ────────────────────────────────────────────────── */
[data-t] .cs-video{max-width:none;border:1px solid var(--c-line);border-radius:var(--radius);
  background:var(--cs-phg);box-shadow:none}

/* ── Lignes d'information (contact, fiche technique) et horaires ─ */
[data-t] .info{display:block;max-width:720px;border-top:1px solid var(--c-line)}
[data-t] .info__row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--c-line)}
[data-t] .info__k{display:inline-flex;align-items:center;gap:8px;flex:0 0 42%;min-width:0;
  font:700 .76rem/1.4 var(--cs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
[data-t] .info__k svg{flex:none}
[data-t] .info__row>:last-child{min-width:0;color:var(--c-ink);font-weight:600;font-size:.98rem;
  text-align:right;overflow-wrap:anywhere}
[data-t] .socials{margin-top:22px}
[data-t] .socials a{border-radius:var(--radius)}
[data-t] .cs-hours{max-width:620px;margin:0;background:transparent;border:0;border-radius:0;
  border-top:1px solid var(--c-line);overflow:visible}
[data-t] .cs-hours__row,
[data-t] .cs-hours__row:last-child{align-items:baseline;gap:18px;padding:15px 0;
  border-bottom:1px solid var(--c-line)}
[data-t] .cs-hours__d{font:700 .76rem/1.4 var(--cs-label);letter-spacing:.14em;
  text-transform:uppercase;color:var(--c-muted)}
[data-t] .cs-hours__h{color:var(--c-ink);font-weight:600;text-align:right}

/* ── Partenaires ──────────────────────────────────────────── */
/* ⚠ Une rangée souple et non la grille à cinq colonnes de la maquette : le
   club a deux partenaires ou douze, et une grille fixe montrait des cases
   vides de la couleur du filet. */
[data-t] .cs-sponsors{display:flex;flex-wrap:wrap;gap:1px;justify-content:stretch;
  background:var(--c-line);border:1px solid var(--c-line)}
[data-t] .cs-sponsor{flex:1 1 180px;display:grid;place-items:center;padding:32px 18px;
  border:0;border-radius:0;background:var(--c-bg-soft);color:var(--c-muted);text-align:center;
  font:800 .82rem/1.3 var(--cs-label);letter-spacing:.08em;text-transform:uppercase;
  transition:color .5s var(--cs-ease),background-color .5s var(--cs-ease)}
[data-t] a.cs-sponsor:hover{color:var(--c-on-accent);background:var(--c-primary);text-decoration:none}

/* ── Bandeau d'appel à l'action ───────────────────────────── */
/* 🔴 Son fond est --c-primary-dark (feuille maître) : texte et bouton
   prennent --c-on-primary-dark, et le bouton s'inverse pour se détacher. */
[data-t] .cs-cta-band{padding:clamp(48px,7vw,72px) 0;color:var(--c-on-primary-dark)}
[data-t] .cs-cta-band .cs-cta{background:var(--c-on-primary-dark);color:var(--c-primary-dark)}
[data-t] .cs-cta-band .cs-cta:hover{background:transparent;color:var(--c-on-primary-dark);
  box-shadow:inset 0 0 0 2px var(--c-on-primary-dark)}
/* ATTENTION : les trois états :hover du bouton posent leur propre box-shadow (lueur, `none`, filet intérieur) à la même spécificité que ces règles :
   un bouton focalisé AU CLAVIER et survolé perdrait le halo sombre de l'anneau double (feuille maître, audit du 10/10/2026, §2.4). Ces règles viennent APRES les :hover, une par
   niveau de spécificité (0,3,0 pour le bouton et le bouton secondaire, 0,4,0 dans le bandeau) : à garder après eux. */
[data-t] .cs-cta:focus-visible,[data-t] .cs-cta--ghost:focus-visible{box-shadow:0 0 0 6px #0c0e12}
[data-t] .cs-cta-band .cs-cta:focus-visible{box-shadow:0 0 0 6px #0c0e12}

/* ── Libellés des gabarits ────────────────────────────────── */
/* Bitume en Barlow Condensed, Atelier en Space Mono (voir --cs-label) :
   seul l'espacement change en plus, comme dans la maquette. */
[data-t="bitume"] :is(.section__kicker,.cs-nav a,.cs-stat__l,.info__k,.cs-hours__d,
  .cs-sponsor,.cs-foot h4,.tile .cs-price){letter-spacing:.18em}
[data-t="atelier"] :is(.section__kicker,.cs-nav a,.cs-stat__l,.info__k,.cs-hours__d,
  .cs-sponsor,.cs-foot h4){letter-spacing:.1em}

/* ── Pied ─────────────────────────────────────────────────── */
/* --c-deep est sombre dans tous les thèmes (assombri de moitié sur fond
   sombre, à 8 % du fond sur fond clair) : les encres claires de la feuille
   maître y restent lisibles. D'où le #fff FIGÉ des intertitres et le filet
   en blanc translucide ci-dessous : ce ne sont pas des jetons, et c'est voulu. */
[data-t] .cs-foot{background:var(--c-deep);padding:74px 0 30px;margin-top:0}
[data-t] .cs-foot__grid{grid-template-columns:1.6fr 1fr 1fr;gap:38px}
[data-t] .cs-foot h4{margin-bottom:18px;font:800 .72rem/1.2 var(--cs-label);letter-spacing:.2em;
  text-transform:uppercase;color:#fff;opacity:.6}
[data-t] .cs-foot__grid>div:first-child h4{opacity:1;margin-bottom:12px;
  font:var(--cs-fwh) 1.5rem/1.1 var(--font-head);letter-spacing:var(--cs-lsh);text-transform:var(--cs-tth)}
[data-t] .cs-foot__legal{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.18);
  font:600 .78rem/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;opacity:.8}
@media(max-width:720px){[data-t] .cs-foot__grid{grid-template-columns:1fr}}

/* ── Téléphone ────────────────────────────────────────────── */
@media(max-width:560px){
  [data-t] .cs-head__in{padding:11px 16px}
  /* La feuille maître masquait le nom à côté d'un logo sous 560 px. Le club
     décide désormais (case « Afficher le nom du club à côté du logo ») : le
     nom présent dans le HTML est affiché, tronqué par des points de suspension
     quand la place manque. */
  [data-t] .cs-brand:has(.cs-logo-img) span.cs-brand__name{display:block}
  [data-t] .cs-logo{width:38px;height:38px}
  [data-t] .cs-logo-img{height:38px}
  [data-t] .cs-cta{padding:13px 18px;font-size:.78rem}
  [data-t] .cs-cta--ghost{padding:12px 17px}
  [data-t] .cs-nav a[href$="#contact"]{padding:12px 16px}
  /* Libellé au-dessus de la valeur : sur deux colonnes à 375 px, une adresse
     e-mail se coupait au milieu (« contact@example.t / est »). */
  [data-t] .info__row{flex-direction:column;align-items:flex-start;gap:4px}
  [data-t] .info__k{flex:none}
  [data-t] .info__row>:last-child{text-align:left}
  [data-t="chrono"] .cs-hero:not(.cs-hero--page){min-height:auto;padding:130px 0 0}
  [data-t="chrono"] .cs-hero__in{padding-bottom:56px}
  [data-t="chrono"] .cs-hero__titre,
  [data-t="chrono"] .cs-hero__txt:not(.cs-hero__txt--titre) .cs-hero__nom{line-height:.96}
}

/* Aperçu privé (gérants) : bandeau collant, discret, au-dessus de l'en-tête.
   Fond et texte figés (sombre/blanc) : lisible dans tous les thèmes. Hauteur fixe
   (30 px) pour que l'en-tête collant se cale juste dessous. */
.cs-apercu{position:sticky;top:0;z-index:60;box-sizing:border-box;height:30px;background:#14161a;color:#fff;
  text-align:center;font:600 .74rem/26px system-ui,sans-serif;padding:0 10px;border-bottom:2px solid #f97316;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-apercu ~ .cs-head{top:30px}
@media (max-width:420px){.cs-apercu{font-size:.66rem}}