/* =====================================================================
   MINIMES · club.css — "Le club" subpage (histoire, accès, réseau)
   + /contact/ (coordonnées, FAQ canonique).
   ⚠ `.media` vit dans base.css — UNE définition pour les 8 pages. Ici on
   n'override QUE le filtre par contexte. (Avant, ce fichier redéclarait
   `.media` avec un autre fond, une autre bordure et un autre grade : les
   photos de /le-club/ et /contact/ ne ressemblaient pas à celles des 6
   autres pages. Un composant = une définition.)
   ===================================================================== */

.sec-head { margin-bottom: clamp(2rem,5vw,3.4rem); }
/* ⚠ .band a DÉMÉNAGÉ dans base.css. Elle était déclarée ici alors que
   /coachs/ et /tarifs/ l'utilisent SANS charger club.css : leurs sections
   « band » n'ont jamais eu ni fond ni filets, et la bande de contraste
   qui rythme /le-club/ et /contact/ sautait sur les deux autres pages.
   Une classe partagée par quatre pages appartient au socle. */
.feature-card { border: 1px solid var(--line); display: grid; }

/* filtres photo par contexte (le grade de base est dans base.css) */
.club-head__media .media img { filter: grayscale(1) contrast(1.18) brightness(.5); transform: scale(1.03); }
.ambiance__media .media img { filter: grayscale(1) contrast(1.2) brightness(.42); }
.gong__bg .media img { filter: grayscale(1) brightness(.32); }

/* black scrim — NO navy (base.css: "No navy"). */
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 35%, rgba(0,0,0,.88) 100%); }
.hero__foot { position: absolute; left: 0; right: 0; bottom: clamp(1rem,3vh,2rem); width: var(--wrap); margin-inline: auto; display: flex; justify-content: space-between; }

/* ----------------------------- PAGE HEAD --------------------------
   /le-club/ garde son hero bespoke : c'est la page « la salle » de cette
   salle (il n'y a pas de /la-salle/ — c'est correct, pas un bug). Les 5
   autres sous-pages partagent .page-head (base.css) + un élément propre. */
.club-head { color: #fff; position: relative; min-height: 78svh; display: flex; align-items: flex-end; padding-bottom: clamp(3rem,8vh,6rem); overflow: hidden; }
.club-head__media { position: absolute; inset: 0; z-index: 0; }
.club-head__media .media { position: absolute; inset: 0; }
.club-head__inner { position: relative; z-index: 3; }
.club-head__title { font-family: var(--f-display); text-transform: uppercase; line-height: .86; font-size: clamp(3.4rem, 11vw, 9rem); margin-top: .8rem; }

/* ------------------------------ TIMELINE -------------------------- */
/* La colonne de gauche n a jamais contenu que des millesimes a 4 chiffres
   dans l esprit du gabarit ; les donnees y mettent aussi des mots.
   « Aujourd hui » demandait 204 px dans une cellule de 99 et se peignait
   par-dessus le titre voisin. Le rail devient une variable : la ligne, le
   point et la colonne la partagent, donc l elargir ne desaligne rien. */
.timeline { --tl-rail: clamp(84px, 14vw, 170px); position: relative; margin-top: 1rem; padding-left: 0; }
.timeline::before { content: ""; position: absolute; left: var(--tl-rail); top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl { display: grid; grid-template-columns: var(--tl-rail) 1fr; gap: clamp(1.2rem,3vw,2.6rem); padding-block: clamp(1.6rem,3.5vw,2.6rem); position: relative; }
.tl::before { content: ""; position: absolute; left: var(--tl-rail); top: clamp(2rem,4vw,3rem); width: 11px; height: 11px; background: var(--mark); border-radius: 50%; transform: translateX(-5px); box-shadow: 0 0 0 4px var(--bg); }
/* le millésime est du display (≥18px) → l'argent y est légal et il porte
   l'identité. Sous 1.15rem au plus petit clamp on reste au-dessus du seuil
   3:1 grand-texte gras. */
.tl__y { font-family: var(--f-display); font-size: clamp(1.15rem,2.2vw,1.6rem); color: var(--bone); line-height: 1.05; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tl__t { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.4rem,3.4vw,2.4rem); line-height: 1; margin-bottom: .6rem; }
.tl__d { color: var(--muted); max-width: 56ch; }

/* ------------------------------ AMBIANCE -------------------------- */
.ambiance { color: #fff; position: relative; min-height: 86svh; display: grid; place-items: center; overflow: hidden; }
.ambiance__media { position: absolute; inset: -12% 0; z-index: 0; }
.ambiance__media .media { position: absolute; inset: 0; }
.ambiance::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(120deg, rgba(38,64,115,.4), rgba(0,0,0,.4)); }
.ambiance__quote { position: relative; z-index: 2; text-align: center; }
/* .98 sur des CAPITALES ACCENTUÉES : le É de « MÊMES » et de
   « RÉELS » mordait la ligne du dessus — les mots s’emboîtaient. */
.ambiance__quote .serif { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.9rem,5.2vw,4.2rem); line-height: 1.1; max-width: 18ch; margin-inline: auto; color: var(--bone); }
.ambiance__quote .serif .tint { color: var(--mark); }

/* ------------------------------ SPECS ----------------------------- */
.feature-card { padding: 0; }
.spec { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: clamp(1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.8rem); border-bottom: 1px solid var(--line); }
.spec:last-child { border-bottom: 0; }
.spec__l { color: var(--muted); font-size: var(--step--1); }
.spec__v { font-family: var(--f-display); font-size: clamp(1.3rem,2.4vw,1.9rem); color: var(--bone); }

/* --------------------------- CONTACT / MAP ------------------------ */
.contact-grid { display: grid; gap: clamp(2rem,4vw,3rem); grid-template-columns: 1fr; }
@media (min-width: 900px){ .contact-grid { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.contact-line { padding-block: 1.1rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: clamp(80px,12vw,140px) 1fr; gap: 1rem; align-items: start; }
.contact-line:first-child { border-top: 0; }
/* a lone CTA row (no label) spans the full grid instead of squeezing into
   the narrow label column */
.contact-line > .btn { grid-column: 1 / -1; justify-self: start; }
/* étiquette de ligne : os + filet argent (loi du navy) */
.contact-line > span { display: inline-flex; align-items: baseline; gap: .7ch; font: 500 var(--step--1)/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.contact-line > span::before { content: ""; align-self: center; width: 14px; height: 2px; background: var(--mark); flex: 0 0 14px; }
.contact-line a:not(.btn) { color: var(--bone); transition: color .3s; display: inline-flex; align-items: center; min-height: 44px; }
/* 16.2px : le navy échoue en :hover (1.30:1) — le hover éclaircit */
.contact-line a:not(.btn):hover, .contact-line a:not(.btn):active { color: var(--white); }
.contact-line ul li { color: var(--read); padding-block: .15em; }
.map-frame { aspect-ratio: 4/3; border: 1px solid var(--line); overflow: hidden; filter: grayscale(1) contrast(1.05) brightness(.9); }
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ------------------------------- FAQ ------------------------------
   L'accordéon a DÉMÉNAGÉ dans base.css : /tarifs/ en a besoin (les
   questions d'argent) et cette page-là charge home.css, pas club.css.
   Dupliquer le composant, c'était programmer deux accordéons qui
   divergeraient à la première retouche. Il vit maintenant une seule fois,
   dans le système. /le-club/ garde ses questions de LIEU en prose. */

/* -------------------- LES QUESTIONS DU LIEU (/le-club/) -----------
   Pas un accordéon, pas un FAQPage : de la prose. Une page « visite »
   répond en marchant, elle ne fait pas déplier. */
.asks { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 900px){ .asks { grid-template-columns: repeat(3,1fr); } }
/* v4 : carte de FAQ. Aplat sombre en v3 -> carte claire, sinon le texte
   navy se posait sur du navy (1.02:1). Meme correctif que .coach, .pl-day,
   .pas__step et .ga-bridge__card : tous heritaient du meme reflexe v3. */
.ask { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.6rem,3vw,2.2rem); display: flex; flex-direction: column; gap: .8rem; border-top: 2px solid transparent; transition: box-shadow .35s, border-color .35s; }
.ask:hover, .ask:active { box-shadow: var(--shadow-md); border-top-color: var(--mark); }
.ask__q { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.15rem,2.4vw,1.6rem); line-height: 1.05; color: var(--bone); }
.ask__a { color: var(--muted); font-size: var(--step--1); line-height: 1.55; }

/* ------------------------------ NETWORK --------------------------- */
.network { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 680px){ .network { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1040px){ .network { grid-template-columns: repeat(3,1fr); } }
.net { background: var(--paper); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.6rem,3vw,2.2rem); min-height: 13rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; position: relative; overflow: hidden; transition: box-shadow .4s; }
.net:hover, .net:active { background: var(--ink-2); }
/* tag : os + filet argent (loi du navy) */
.net__tag { display: inline-flex; align-items: center; gap: .7ch; font: 500 var(--step--1)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); }
.net__tag::before { content: ""; width: 14px; height: 2px; background: var(--mark); flex: 0 0 14px; }
.net__name { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(1.6rem,3vw,2.4rem); line-height: 1; margin-block: .5rem .4rem; }
.net__name .flag { font-size: .5em; color: var(--bone-dim); vertical-align: middle; margin-left: .6ch; }
.net__feat { color: var(--muted); font-size: var(--step--1); }
.net__go { display: inline-flex; align-items: center; gap: .6ch; font: 500 var(--step--1)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); transition: gap .3s, color .3s; }
.net:hover .net__go, .net:active .net__go { gap: 1.2ch; color: var(--bone); }