/* =======================================================================
   cmf-ui.css — Coach Math Fitness — LOT 4 (navigation + accessibilité)
   Chargé sur toutes les pages publiques. Thème : noir #121212 / or #d4af37.
   Couvre : menu hamburger mobile (#56), lien d'évitement (#72),
   focus visible & contraste (#74-78), fil d'Ariane (#61),
   bouton « retour en haut » (#62), footer riche (#33).
   ======================================================================= */
:root{
  --cmf-gold:#d4af37;
  --cmf-bg:#121212;
}

/* ---- Lien d'évitement « Aller au contenu » (#72) ---- */
.cmf-skip{
  position:absolute; left:-9999px; top:0; z-index:3000;
  background:var(--cmf-gold); color:#121212; font-weight:700;
  padding:10px 18px; text-decoration:none; border-radius:0 0 8px 0;
}
.cmf-skip:focus{ left:0; }

/* ---- Focus clavier visible partout (#74) ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--cmf-gold);
  outline-offset:2px;
  border-radius:4px;
}
#cmf-content:focus{ outline:none; }

/* ---- Bouton hamburger (#56) : caché sur ordinateur ---- */
.cmf-burger{ display:none; }
.cmf-burger .cmf-burger-x{ display:none; }

/* ---- Fil d'Ariane (#61) ---- */
.cmf-crumb{
  max-width:1100px; margin:12px auto 0; padding:0 16px;
  font-size:.85rem; color:#bdbdbd;
}
.cmf-crumb a{ color:var(--cmf-gold); text-decoration:none; }
.cmf-crumb a:hover{ text-decoration:underline; }
.cmf-crumb span[aria-current]{ color:#ececec; }

/* ---- Bouton « retour en haut » (#62) ---- */
.cmf-top{
  position:fixed; right:18px; bottom:18px; z-index:1800;
  width:46px; height:46px; border:none; border-radius:50%;
  background:var(--cmf-gold); color:#121212;
  font-size:1.35rem; line-height:46px; text-align:center; cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.cmf-top.cmf-show{ opacity:1; visibility:visible; }
.cmf-top:hover{ filter:brightness(1.08); }

/* ---- Footer riche (#33) ---- */
.cmf-footer{
  background:#0d0d0d; border-top:2px solid var(--cmf-gold);
  color:#cfcfcf; margin-top:48px; padding:34px 16px 20px;
}
.cmf-footer-grid{
  max-width:1100px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between;
}
.cmf-footer-col{ min-width:170px; }
.cmf-footer-brand{ max-width:300px; font-size:.9rem; line-height:1.55; }
.cmf-footer h4{
  color:var(--cmf-gold); font-size:1rem; margin:0 0 10px; letter-spacing:.5px;
}
.cmf-footer a{
  color:#cfcfcf; text-decoration:none; display:block;
  padding:3px 0; font-size:.92rem;
}
.cmf-footer a:hover{ color:var(--cmf-gold); }
.cmf-footer-social a{ display:inline-block; margin:0 14px 4px 0; }
.cmf-footer-bottom{
  max-width:1100px; margin:22px auto 0; padding-top:16px;
  border-top:1px solid #262626; text-align:center;
  font-size:.82rem; color:#9a9a9a;
}
.cmf-footer-bottom a{ color:var(--cmf-gold); }

/* ======================= MOBILE (≤ 760px) ======================= */
@media (max-width:760px){
  .cmf-burger{
    display:flex; align-items:center; justify-content:center; gap:8px;
    max-width:420px; margin:10px auto; padding:12px 16px;
    background:#1b1b1b; color:var(--cmf-gold);
    border:1px solid var(--cmf-gold); border-radius:8px;
    font-size:1rem; font-weight:700; cursor:pointer;
  }
  .cmf-burger[aria-expanded="true"] .cmf-burger-m{ display:none; }
  .cmf-burger[aria-expanded="true"] .cmf-burger-x{ display:inline; }

  /* le menu est replié par défaut, déplié quand .cmf-open est posé */
  .nav-buttons-container .nav-buttons{ display:none; }
  .nav-buttons-container.cmf-open .nav-buttons{
    display:flex; flex-direction:column;
  }

  .cmf-footer-grid{ flex-direction:column; gap:20px; }
}