/* ============================================================
   FCB — Système visuel partagé (editorial sombre)
   Chargé sur toutes les pages du club. Classes préfixées « fcb- »
   pour ne pas entrer en collision avec Bootstrap (chargé par le squelette).
   ============================================================ */

:root{
  --ink:#0B0B0D;
  --ink-2:#141418;
  --ink-3:#1C1C22;
  --line:rgba(237,233,227,.12);
  --line-strong:rgba(237,233,227,.22);
  --bone:#EDE9E3;
  --bone-dim:#9A968F;
  --blood:#DE2434;
  --ember:#FF4655;
  --fcb-maxw:1240px;
  --fcb-disp:"Bebas Neue","Barlow Semi Condensed",Impact,sans-serif;
  --fcb-body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --fcb-cond:"Barlow Semi Condensed","Barlow",sans-serif;
}

/* Le club vit en sombre : on peint le fond explicitement */
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:var(--fcb-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip et non hidden : ne casse pas position:sticky */
}
main{display:block}
img{max-width:100%;display:block}
::selection{background:var(--blood);color:#fff}

.fcb-wrap{max-width:var(--fcb-maxw);margin:0 auto;padding:0 clamp(18px,5vw,56px)}

.fcb-kicker{
  font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.22em;
  font-weight:600;font-size:.78rem;color:var(--bone-dim);
  display:inline-flex;align-items:center;gap:.7em;
}
.fcb-kicker::before{content:"";width:26px;height:2px;background:var(--blood);display:inline-block}
.fcb-kicker .num{color:var(--blood);font-variant-numeric:tabular-nums}

.fcb-btn{
  font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-size:1rem;
  display:inline-flex;align-items:center;gap:.6em;
  padding:15px 30px;border:1.5px solid var(--line-strong);
  background:transparent;color:var(--bone);cursor:pointer;text-decoration:none;
  transition:transform .25s cubic-bezier(.2,.9,.3,1),background .25s,border-color .25s,color .25s;
}
.fcb-btn .ar{transition:transform .25s}
.fcb-btn:hover{transform:translateY(-2px);color:var(--bone)}
.fcb-btn:hover .ar{transform:translate(3px,-3px)}
.fcb-btn--blood{background:var(--blood);border-color:var(--blood);color:#fff}
.fcb-btn--blood:hover{background:var(--ember);border-color:var(--ember);color:#fff}
.fcb-btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- Barre du haut (desktop) ---------- */
.fcb-topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(11,11,13,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.fcb-topbar .fcb-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:54px}
/* Le logo EST le lien vers la page du club depuis que l'onglet « Le club » a
   disparu (08/09/2026) : il doit donc se lire comme un bouton, et pas
   seulement au survol — sur un écran tactile il n'y a pas de survol, et
   personne ne devine qu'un logotype est cliquable. D'où le cadre PERMANENT,
   emprunté aux onglets voisins pour que la barre reste d'une seule pièce. */
/* Bebas Neue n'a que des capitales ; `text-transform` garantit le même rendu
   si la police de secours, elle, en a deux casses. */
.fcb-brand{
  font-family:var(--fcb-disp);font-size:1.45rem;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bone);text-decoration:none;flex:none;
  display:inline-flex;align-items:center;
  padding:5px 14px;border:1px solid var(--line);background:var(--ink-2);
  transition:background .2s,border-color .2s,transform .2s;
}
/* Le point rouge, hérité du sigle « FCB. », garde le lien visuel avec
   l'identité du club maintenant que le bouton dit sa destination. */
/* ⚠️ `font-weight` n'est pas décoratif ici. Bebas Neue n'existe QU'EN 400 :
   tout poids demandé au-delà est SYNTHÉTISÉ par le navigateur, qui épaissit
   mécaniquement les contours au lieu de charger un vrai gras. Mesuré au pixel
   dans Chromium le 09/09/2026, le seuil est 600 — un 500 rend exactement
   comme un 400, un 600 non. Or `<b>` vaut 700 par défaut : sans cette ligne,
   le point du logotype est en faux gras sur chacune des pages du club.
   C'est le même défaut que Ken a refusé sur Titillium le 09/09 ; la
   différence est qu'ici il n'existe aucune graisse à charger — la seule
   réponse est de ne pas demander de gras. */
.fcb-brand b{color:var(--blood);font-weight:400}
.fcb-brand:hover{background:var(--ink-3);border-color:var(--line-strong);transform:translateY(-1px)}
.fcb-brand:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
/* Page du club : ce bouton porte l'état courant, puisque plus aucun onglet ne
   le fait. Sans cela, cette page serait la seule sans repère de position. */
.fcb-brand.on{background:var(--blood);border-color:var(--blood);color:#fff}
.fcb-brand.on b{color:#fff}
.fcb-topnav{display:flex;gap:6px}
.fcb-topnav a{
  font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.1em;font-weight:600;font-size:.82rem;
  color:var(--bone);text-decoration:none;display:inline-flex;align-items:center;gap:.5em;
  padding:8px 16px;border:1px solid var(--line);background:var(--ink-2);
  transition:background .2s,border-color .2s,transform .2s;
}
.fcb-topnav a .ic{font-size:1rem}
.fcb-topnav a:hover{background:var(--ink-3);border-color:var(--line-strong);transform:translateY(-1px)}
.fcb-topnav a.on{background:var(--blood);border-color:var(--blood);color:#fff}
@media(max-width:820px){.fcb-topnav{display:none}}

/* ---------- Barre d'onglets (mobile, fixe en bas) ---------- */
.fcb-tabbar{display:none}
@media(max-width:820px){
  .fcb-tabbar{
    display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:rgba(11,11,13,.94);backdrop-filter:blur(12px);
    border-top:1px solid var(--line-strong);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .fcb-tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;color:var(--bone-dim);text-decoration:none;position:relative}
  .fcb-tabbar a .ic{font-size:1.3rem;line-height:1}
  .fcb-tabbar a .tl{font-family:var(--fcb-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.58rem}
  .fcb-tabbar a.on{color:var(--bone)}
  .fcb-tabbar a.on::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px;background:var(--blood)}
  body{padding-bottom:64px}
}

/* Le pied de page hérité du squelette, adapté au sombre */
footer{background:var(--ink)!important;border-top:1px solid var(--line)}
footer .nav-item,footer a{color:var(--bone-dim)!important}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}