/* ============================================================
   FCB — Page du club (affichage.php), direction editorial sombre
   Dépend de fcb-ui.css. Classes préfixées « fcb- ».
   ============================================================ */

h1,h2,h3{font-family:var(--fcb-disp);font-weight:400;margin:0;line-height:.92;letter-spacing:.01em;text-wrap:balance}

.fcb-club{background:linear-gradient(180deg,var(--ink) 0%,#0d0d10 100%)}
[id^="club-"]{scroll-margin-top:110px}

/* ---------- bandeau de sections (collant, scrollspy) ---------- */
.fcb-subnav{position:sticky;top:54px;z-index:20;background:rgba(11,11,13,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.fcb-subnav .fcb-wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:12px;padding-bottom:12px}
.fcb-subnav a{text-align:center;font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.82rem;color:var(--bone-dim);text-decoration:none;padding:9px 10px;border:1px solid var(--line);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.fcb-subnav a:hover{color:var(--bone);border-color:var(--line-strong)}
.fcb-subnav a.on{color:#fff;background:var(--blood);border-color:var(--blood)}
@media(max-width:560px){.fcb-subnav .fcb-wrap{grid-template-columns:1fr 1fr}.fcb-subnav a{font-size:.76rem;letter-spacing:.06em}}

/* ---------- hero club ---------- */
.fcb-clubhero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.fcb-clubhero .bg{position:absolute;inset:0}
.fcb-clubhero .bg img{width:100%;height:100%;object-fit:cover;object-position:center 37%;filter:grayscale(.5) brightness(.4)}
.fcb-clubhero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,13,.5),var(--ink) 96%)}
.fcb-clubhero .inner{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(18px,4vw,42px);padding:clamp(70px,12vw,150px) 0;flex-wrap:wrap}
.fcb-clubhero .badge{width:clamp(96px,16vw,150px);height:clamp(96px,16vw,150px);flex:none;border-radius:50%;border:2px solid var(--blood);display:grid;place-items:center;background:rgba(222,36,52,.06);box-shadow:0 0 40px rgba(222,36,52,.18)}
.fcb-clubhero .badge img{width:78%}
.fcb-clubhero h1{font-size:clamp(2.6rem,8vw,5.5rem);color:var(--bone)}
.fcb-clubhero h1 .em{color:var(--blood)}
.fcb-clubhero .est{font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.2em;color:var(--bone-dim);font-size:.82rem;margin-top:6px}
.fcb-clubhero .est b{color:var(--blood)}

/* ---------- zone infos ---------- */
.fcb-infozone{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,54px);padding:clamp(44px,7vw,84px) 0}
@media(max-width:820px){.fcb-infozone{grid-template-columns:1fr;gap:36px}}
.fcb-prose h3{font-family:var(--fcb-disp);font-size:2.2rem;color:var(--bone);margin:26px 0 10px}
.fcb-prose h3:first-child{margin-top:0}
.fcb-prose p{color:#cfcbc4;max-width:62ch}
.fcb-prose .lead{font-size:1.15rem;color:var(--bone)}
.fcb-contact{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-direction:column;gap:12px}
.fcb-contact li{display:flex;gap:12px;align-items:flex-start;font-family:var(--fcb-cond);letter-spacing:.02em}
.fcb-contact a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.fcb-contact a:hover{color:var(--ember);border-color:var(--ember)}
.fcb-contact .k{color:var(--blood);width:22px;flex:none;text-align:center}

.fcb-hours-block{display:flex;flex-direction:column;gap:14px}
.fcb-hours-block > h3{font-family:var(--fcb-disp);font-size:2.2rem;color:var(--bone);line-height:.95}
.fcb-hours{border:1px solid var(--line);background:var(--ink-2);padding:26px}
.hrow{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line);font-family:var(--fcb-cond)}
.hrow:first-of-type{border-top:0}
.hrow .d{color:var(--bone);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.92rem}
.hrow .h{color:var(--blood);font-variant-numeric:tabular-nums;font-size:.92rem}
.hrow .who{display:block;color:var(--bone-dim);font-size:.8rem;letter-spacing:.02em;text-transform:none;font-weight:400}
/* Les réductions sous les cotisations (21/09/2026). Elles sont ÉNONCÉES et
   jamais chiffrées en montant final : le Pass'Sport dépend du barème en
   vigueur. Petit corps, même gris que le sous-libellé des horaires. */
.fcb-reductions{list-style:none;padding:0;margin:14px 0 0;font-family:var(--fcb-cond);font-size:.8rem;color:var(--bone-dim);line-height:1.5}
.fcb-reductions li{margin-bottom:5px}

/* Calculette de cotisation (#39 suite, demande de Ken du 21/09/2026).
   Tous les nombres viennent du PHP par des attributs data-, jamais de cette
   feuille ni du script.
   ⚠️ La règle [hidden] est EXPLICITE et ne doit pas disparaitre : le bloc part
   masqué et c'est le script qui le révèle. Bootstrap est chargé sur cette page,
   et n'importe quelle regle posant un `display` sur .fcb-calc battrait le
   comportement par defaut de l'attribut — la calculette s'afficherait alors
   sans JavaScript, inerte, sous les doigts du visiteur.
   ⚠️ Les contrastes sont MESURÉS sur --ink-2 : --bone-dim y vaut 6,24:1, mais
   une opacity de .8 par-dessus le ferait tomber à 4,42:1, sous le seuil AA du
   petit texte. D'où l'absence d'opacity sur .fcb-calc-note. */
.fcb-calc{border:1px solid var(--line);background:var(--ink-2);padding:22px 26px;margin-top:14px;font-family:var(--fcb-cond)}
.fcb-calc[hidden]{display:none}
.fcb-calc h4{font-family:var(--fcb-disp);font-size:1.5rem;color:var(--bone);margin:0 0 6px;letter-spacing:.02em}
.fcb-calc-ligne{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line)}
.fcb-calc-ligne label{color:var(--bone);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.86rem;margin:0}
/* display:block — la tranche d'âge et le prix passent SOUS le libellé. En
   ligne, « Enfant Jusqu'a 14 ans en debut de saison · 100 € / an » poussait le
   champ de saisie hors de la ligne sur un telephone. L'espace qui precede la
   balise tombe alors en fin de ligne et n'est pas rendue (CSS 2.1 §16.6.1) :
   le TEXTE garde son separateur sans qu'un pixel bouge. */
.fcb-calc-prix{display:block;color:var(--bone-dim);text-transform:none;letter-spacing:.02em;font-weight:400;font-size:.8rem;line-height:1.4;font-variant-numeric:tabular-nums}
/* color-scheme:dark — sans lui les fleches du champ nombre sont dessinees par
   le theme du systeme, donc sombres sur sombre : invisibles. Meme piege que le
   ::file-selector-button du back-office BCMC. */
.fcb-calc input[type=number]{width:5.5em;padding:8px 10px;color:var(--bone);background:var(--ink);border:1px solid var(--line);font:inherit;font-size:.9rem;font-variant-numeric:tabular-nums;text-align:right;color-scheme:dark}
.fcb-calc input[type=number]:focus{outline:2px solid var(--blood);outline-offset:1px}
.fcb-calc input[type=number]:disabled{color:var(--bone-dim);border-style:dashed}
.fcb-calc-pass label{cursor:pointer}
/* « nombre x montant » : deux champs et deux signes, alignés comme une
   multiplication. Les signes sont aria-hidden, chaque champ portant son propre
   nom accessible — un « x » lu entre deux nombres n'apprend rien. */
.fcb-calc-duo{display:inline-flex;align-items:center;gap:7px}
.fcb-calc-duo input[type=number]{width:4.2em}
.fcb-calc-x,.fcb-calc-eur{color:var(--bone-dim);font-size:.86rem}
.fcb-calc-total{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.fcb-calc-lib{color:var(--bone);text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:.92rem}
.fcb-calc-val{font-family:var(--fcb-disp);font-size:2rem;color:var(--blood);font-variant-numeric:tabular-nums;line-height:1}
/* min-height : le detail passe d'une ligne a deux selon les cases cochees, et
   sans reserve le total sauterait a chaque frappe. */
.fcb-calc-detail{margin:6px 0 0;color:var(--bone-dim);font-size:.8rem;line-height:1.5;min-height:2.4em}
.fcb-calc-note{margin:10px 0 0;color:var(--bone-dim);font-size:.75rem;line-height:1.5}
@media (max-width:480px){
  .fcb-calc{padding:18px}
  .fcb-calc-val{font-size:1.7rem}
}

/* affiliation fédérale */
.fcb-affil{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.fcb-affil img{height:64px;width:auto;background:#fff;padding:6px;border-radius:4px}
.fcb-affil span{font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--bone-dim)}

/* vidéo YouTube */
.fcb-video{position:relative;aspect-ratio:16/9;margin-top:14px;border:1px solid var(--line);overflow:hidden;background:#000}
.fcb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* valeurs */
.fcb-values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px}
.fcb-value{background:var(--ink);padding:34px 24px;text-align:center}
.fcb-value .vic{color:var(--blood);font-size:1.6rem}
.fcb-value .vt{font-family:var(--fcb-disp);font-size:2.4rem;color:var(--bone);margin-top:8px}
@media(max-width:560px){.fcb-values{grid-template-columns:1fr}}

/* ---------- documents ---------- */
.fcb-docs{padding:clamp(44px,7vw,80px) 0 clamp(56px,8vw,100px);border-top:1px solid var(--line)}
.fcb-docs .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.fcb-docs .sec-head h3{font-family:var(--fcb-disp);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--bone);line-height:.95}
.fcb-docs .sec-head .fcb-kicker{margin-bottom:8px}
/* Raccourci vers l'admin Documents. Même motif que « Gérer le calendrier »
   (.cal-admin-link) : le thème FCB n'a pas de classe partagée pour ce bouton,
   et chaque page porte son style — on reste sur cette convention plutôt que
   d'aller toucher au calendrier pour un lien. Le groupe __aside garde le
   kicker et le lien ENSEMBLE à droite : ajoutés côte à côte dans le
   space-between, ils auraient poussé le kicker au milieu du titre. */
.fcb-docs .sec-head__aside{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.fcb-admin-link{display:inline-block;margin-bottom:6px;font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--bone-dim);text-decoration:none;border:1px solid var(--line-strong);padding:8px 16px;transition:color .2s,background .2s,border-color .2s}
.fcb-admin-link:hover{color:#fff;background:var(--blood);border-color:var(--blood)}
.fcb-docstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
.fcb-doc{border:1px solid var(--line);background:var(--ink-2);padding:18px;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:border-color .3s,transform .3s}
.fcb-doc:hover{border-color:var(--blood);transform:translateY(-3px)}
.fcb-doc .thumb{aspect-ratio:1/1.414;background:linear-gradient(160deg,#26262e,#17171b);border:1px solid var(--line);display:grid;place-items:center;color:var(--bone-dim);position:relative;overflow:hidden}
.fcb-doc .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fcb-doc .thumb .pg{font-family:var(--fcb-disp);font-size:3rem;color:rgba(237,233,227,.18)}
.fcb-doc .thumb .pdf{position:absolute;bottom:10px;left:10px;font-family:var(--fcb-cond);font-weight:700;letter-spacing:.12em;font-size:.7rem;color:#fff;background:var(--blood);padding:3px 8px;z-index:2}
.fcb-doc .name{font-family:var(--fcb-cond);font-weight:600;letter-spacing:.03em;font-size:.92rem;color:var(--bone)}
.fcb-docs .empty{color:var(--bone-dim);font-family:var(--fcb-cond);letter-spacing:.04em;margin-top:20px}
@media(max-width:860px){.fcb-docstrip{grid-template-columns:1fr 1fr}}

/* --- Pages légales (#53) -----------------------------------------------
   Mentions légales et confidentialité. Deux pages de texte, sur les tokens
   du thème — aucune couleur ni police en dur.

   ⚠️ Classes préfixées `fcb-`, comme tout le reste du club : Bootstrap est
   chargé par le squelette et `.legal`, `.note` ou `.liste` entreraient en
   collision sans qu'on le voie (CLAUDE.md, « Attention aux collisions »).

   ⚠️ `.fcb-legal p` est borné à 68ch : une ligne de texte juridique qui
   traverse un écran large ne se lit pas. C'est la même raison qui donne 62ch
   à `.fcb-prose p`. */
.fcb-legal{max-width:900px;margin:0 auto;padding:48px 20px 72px}
.fcb-legal-tete{margin-bottom:38px}
.fcb-legal-kick{font-family:var(--fcb-cond);letter-spacing:.18em;text-transform:uppercase;
                font-size:.82rem;color:var(--blood);margin:0 0 6px}
.fcb-legal h1{font-family:var(--fcb-disp);font-size:clamp(2.6rem,7vw,4rem);line-height:.95;
              color:var(--bone);margin:0 0 14px}
.fcb-legal-chapo{color:var(--bone-dim);max-width:68ch;margin:0}
.fcb-legal h2{font-family:var(--fcb-disp);font-size:1.9rem;color:var(--bone);
              margin:34px 0 10px;line-height:1}
.fcb-legal section:first-of-type h2{margin-top:0}
.fcb-legal p{color:#cfcbc4;max-width:68ch;margin:0 0 12px}
.fcb-legal a{color:inherit;border-bottom:1px solid var(--line);text-decoration:none;
             transition:color .2s,border-color .2s}
.fcb-legal a:hover{color:var(--ember);border-color:var(--ember)}

/* Liste « libellé / valeur ». En flex plutôt qu'en grille : les valeurs sont
   des adresses et des numéros de longueurs très inégales, et une piste de
   grille figerait la colonne sur la plus longue. */
.fcb-legal-liste{list-style:none;padding:0;margin:14px 0 0;
                 display:flex;flex-direction:column;gap:10px}
.fcb-legal-liste li{display:flex;flex-wrap:wrap;gap:6px 14px;
                    padding:12px 0;border-top:1px solid var(--line);
                    font-family:var(--fcb-cond);letter-spacing:.02em}
.fcb-legal-liste li b{color:var(--blood);min-width:9ch;flex:none}
.fcb-legal-liste li span{color:#cfcbc4;flex:1 1 20ch}

/* ⚠️ `--bone-dim` et PAS d'`opacity` par-dessus : mesuré sur BCMC, une
   opacité de .8 fait tomber ce couple sous le seuil AA du petit texte. */
.fcb-legal-note{font-size:.92rem;color:var(--bone-dim);
                border-left:2px solid var(--line);padding-left:14px;margin-top:14px}

/* Liens légaux du pied, émis par le squelette quand la page les demande. */
/* ⚠️ FLEX et non inline-block : le HTML porte une ESPACE entre les deux liens
   (sans elle le texte dit « Mentions légalesConfidentialité »), et entre deux
   éléments flexibles un nœud fait de blancs seuls ne produit pas d'élément —
   l'espace est donc gratuite au pixel. Entre deux inline-block, elle aurait
   ajouté un blanc visible en plus de l'écart. */
.nav-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:10px}
.nav-legal .nav-item{font-size:.86rem;letter-spacing:.04em}
.nav-legal a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.nav-legal a:hover{border-bottom-color:currentColor}

@media (max-width:640px){
  .fcb-legal{padding:32px 16px 56px}
  .fcb-legal-liste li b{min-width:100%}
}

/* Pied légal du calendrier (#53). Cette page n'a pas le pied commun : elle
   écrit son propre <head> et son propre corps. Le bandeau reprend donc les
   marges du reste du site plutôt que celles du footer Créiva. */
.fcb-cal-legal{max-width:1180px;margin:0 auto;padding:28px 20px 40px;text-align:center}
.fcb-cal-legal .nav-list{list-style:none;padding:0;margin:0}
/* --- Façade vidéo (#68) -------------------------------------------------
   Le bouton occupe toute la boîte .fcb-video et disparaît au clic, remplacé
   par l'iframe. Avant ce clic, rien n'est chargé chez Google. */
.fcb-video-facade{position:absolute;inset:0;width:100%;height:100%;padding:0;
                  border:0;background:#000;cursor:pointer;display:block;
                  color:var(--bone);font:inherit;text-align:left}
.fcb-video-facade img{width:100%;height:100%;object-fit:cover;display:block;
                      opacity:.62;transition:opacity .25s,transform .35s}
.fcb-video-facade:hover img,
.fcb-video-facade:focus-visible img{opacity:.78;transform:scale(1.02)}
/* ⚠️ `focus-visible` et pas `focus` : le contour ne doit apparaître qu'au
   clavier, sinon il reste affiché après un clic à la souris. */
.fcb-video-facade:focus-visible{outline:2px solid var(--ember);outline-offset:-4px}

.fcb-video-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                width:76px;height:76px;border-radius:50%;display:grid;
                place-items:center;font-size:1.7rem;padding-left:6px;
                background:var(--blood);color:#fff;
                box-shadow:0 6px 24px rgba(0,0,0,.45);transition:transform .25s}
.fcb-video-facade:hover .fcb-video-play{transform:translate(-50%,-50%) scale(1.08)}

.fcb-video-titre{position:absolute;left:18px;right:18px;bottom:40px;
                 font-family:var(--fcb-disp);font-size:1.6rem;line-height:1;
                 text-shadow:0 2px 12px rgba(0,0,0,.7)}
/* ⚠️ Cette ligne DIT au visiteur ce que le clic déclenchera. Elle n'est pas
   décorative : c'est elle qui fait de la lecture un choix informé. */
.fcb-video-note{position:absolute;left:18px;right:18px;bottom:16px;
                font-family:var(--fcb-cond);font-size:.82rem;letter-spacing:.04em;
                color:var(--bone-dim);text-shadow:0 2px 10px rgba(0,0,0,.8)}

@media (max-width:560px){
  .fcb-video-play{width:60px;height:60px;font-size:1.3rem}
  .fcb-video-titre{font-size:1.2rem;bottom:36px}
  .fcb-video-note{font-size:.74rem}
}
/* Le mouvement d'échelle est du confort : il disparaît si on n'en veut pas. */
@media (prefers-reduced-motion:reduce){
  .fcb-video-facade img,.fcb-video-play{transition:none}
  .fcb-video-facade:hover img{transform:none}
  .fcb-video-facade:hover .fcb-video-play{transform:translate(-50%,-50%)}
}