/* =====================================================================
   FAMILLE MON OBJECTIF VÉLO — socle commun aux 3 sites
   Mon Objectif Vélo (bleu) · KadenzLab (jaune) · MonÉvalSport (vert citron)
   Ce fichier est IDENTIQUE sur les 3 sites : une correction ici
   se recopie telle quelle sur les deux autres.
   Une classe .fam-mov / .fam-kl / .fam-mes donne sa couleur à un élément.
   ===================================================================== */
:root{
  --fam-mov:#3EC8FF;
  --fam-kl:#F5C518;
  --fam-mes:#C6F432;
  --fam-black:#090909;
  --fam-line:rgba(255,255,255,.08);
  --fam-muted:#B4BAC2;
  --fam-dim:#8E959F;
  --fam-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --fam-body:'Inter','Segoe UI',Arial,sans-serif;
}
.fam-mov{--fam-c:var(--fam-mov)}
.fam-kl{--fam-c:var(--fam-kl)}
.fam-mes{--fam-c:var(--fam-mes)}

/* ── Barre commune tout en haut ──────────────────────────────────────── */
.fam-bar{background:#000;border-bottom:1px solid var(--fam-line);font-family:var(--fam-body)}
.fam-bar-inner{display:flex;align-items:stretch;gap:34px;height:38px;padding:0 clamp(16px,5vw,80px);box-sizing:border-box}
.fam-bar a{display:flex;align-items:center;gap:8px;padding:0 2px;color:var(--fam-muted);text-decoration:none;border-bottom:2px solid transparent;transition:color .18s}
.fam-bar a:hover,.fam-bar a:focus-visible{color:#fff}
.fam-bar a[aria-current="page"]{color:#fff;border-bottom-color:var(--fam-c)}
.fam-bar a::after{display:none!important}
.fam-dot{width:8px;height:8px;border-radius:50%;background:var(--fam-c);flex-shrink:0}
.fam-name{font-family:var(--fam-display);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fam-role{font-size:12px;color:var(--fam-dim);white-space:nowrap}
.fam-short{display:none}
@media(max-width:900px){
  .fam-bar-inner{height:34px;gap:12px;justify-content:space-between;padding:0 14px}
  .fam-long,.fam-role{display:none}
  .fam-short{display:inline}
}

/* ── Logo : vélo + nom en deux parties ───────────────────────────────── */
.fam-logo{display:inline-flex;align-items:center;gap:.25em;font-family:var(--fam-display);font-weight:900;font-size:30px;line-height:.9;letter-spacing:-.01em;text-transform:uppercase;color:#fff;text-decoration:none;white-space:nowrap}
.fam-logo:hover{color:#fff}
.fam-logo b{color:var(--fam-c);font-weight:900}
.fam-velo{display:block;height:1.12em;width:auto;color:var(--fam-c);flex-shrink:0}
.fam-endorse{display:flex;align-items:center;gap:6px;margin-top:6px;font-family:var(--fam-body);font-size:11px;font-weight:500;color:#A3A9B2;white-space:nowrap}
.fam-endorse .fam-velo{height:12px;color:var(--fam-mov)}

/* ── Lien vers un autre site de la famille (point de couleur) ────────── */
.fam-link{display:inline-flex!important;align-items:center;gap:7px}
.fam-link::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--fam-c);flex-shrink:0}

/* ── Bouton dans la couleur d'un site ────────────────────────────────── */
.btn-fam{background:var(--fam-c)!important;border-color:var(--fam-c)!important;color:var(--fam-black)!important}
.btn-fam:hover{filter:brightness(.88);color:var(--fam-black)!important}

/* ── Pied de page : Mesure → Entraîne-toi → Roule ────────────────────── */
.fam-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fam-step{display:flex;flex-direction:column;gap:10px;padding:22px 22px 20px;background:#111;border:1px solid var(--fam-line);border-top:3px solid var(--fam-c);border-radius:12px;color:#fff;text-decoration:none;transition:transform .2s,border-color .2s}
.fam-step:hover{transform:translateY(-3px);color:#fff}
.fam-step-k{font-family:var(--fam-display);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fam-c)}
.fam-step-t{font-family:var(--fam-display);font-size:30px;font-weight:900;line-height:1;text-transform:uppercase}
.fam-step-s{font-size:14px;color:var(--fam-muted)}
.fam-slogan{margin:36px 0 48px;max-width:980px;font-family:var(--fam-display);font-size:clamp(22px,3vw,30px);font-style:italic;font-weight:800;line-height:1.15;color:#fff}
@media(max-width:760px){
  .fam-steps{grid-template-columns:1fr;gap:12px}
  .fam-step-t{font-size:24px}
}