/* En-tête commun aux 6 pages : menu burger à gauche, logo au centre, Réserver à droite.
   Tarifs, Planning et Première séance restent visibles hors du menu (2e ligne sur mobile).
   Sur ordinateur le menu s'ouvre au survol ; sur écran tactile, au toucher (voir entete.js). */

.site-header .wrap.entete{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"gauche logo droite";align-items:stretch;gap:24px;height:87px;max-width:1440px}
.entete .head-gauche{grid-area:gauche;display:flex;align-items:stretch;gap:28px;min-width:0}
.entete .logo{grid-area:logo;align-self:center;justify-self:center}
.entete .head-droite{grid-area:droite;display:flex;align-items:center;justify-content:flex-end;gap:16px}

/* Changement de langue (FR / EN) */
.langue{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;color:var(--paper);opacity:.85}
.langue:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.langue:focus-visible{outline:2px solid var(--tan-2);outline-offset:2px;border-radius:6px}

/* Espace client bsport (voir entete.js) : à côté de « Réserver », une icône bonhomme.
   .fab-place contient d'abord un lien bonhomme (.compte, secours sans JavaScript), remplacé par le bouton
   flottant de bsport dès qu'il est chargé (.fab-place.fab-ok). */
.fab-place{position:relative;display:inline-flex;width:44px;height:44px;flex:none}
.compte{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;
  color:var(--paper);opacity:.9;text-decoration:none;transition:background-color .15s,opacity .15s}
.compte svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.compte:hover{opacity:1;background:rgba(253,252,249,.12)}
.compte:focus-visible{outline:2px solid var(--tan-2);outline-offset:2px}
.fab-place.fab-ok .compte{display:none}
/* Filet : un bloc bsport pas encore habillé ne s'affiche jamais en bas à gauche. */
body > div:has(> button[title="Mon panier"], > button[title="My basket"]):not(.fab-bsport){visibility:hidden!important}

/* Bloc du bouton flottant bsport, superposé à .fab-place (il reste dans <body>, voir entete.js). bsport le fixe en
   bas à gauche (colonne : 5 entrées du menu puis le rond). On le place sur l'emplacement de l'en-tête, rond en premier
   (order:-1) et entrées en dessous : le menu se déplie vers le bas, par-dessus la page.
   Pas de classes fixes chez bsport (jss…, Mui…) : on cible par la structure. Le rond principal est TOUJOURS le dernier
   bouton ; ne pas s'appuyer sur les attributs title : l'infobulle de bsport les retire au survol (l'entrée survolée
   prenait alors le style du rond, d'où un menu blanc et des clics perdus). */
.fab-bsport{position:fixed!important;left:var(--fab-x,-10000px)!important;top:var(--fab-y,0px)!important;right:auto!important;bottom:auto!important;
  width:var(--fab-l,44px)!important;height:44px!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;
  align-items:center!important;gap:8px!important;overflow:visible!important;
  /* garder le z-index de bsport (9999) : quand le menu est ouvert, bsport pose dessous un fond plein écran (z-index 999)
     qui referme le menu au clic ; un z-index plus bas met ce fond PAR-DESSUS les entrées et les rend incliquables */
  z-index:9999!important}
/* en-tête pas encore collé en haut : bloc ancré dans la page (voir entete.js) */
.fab-bsport.fab-page{position:absolute!important}
.fab-bsport > button:last-child{order:-1!important;flex:none!important;width:100%!important;height:44px!important;min-width:0!important;
  margin:0!important;padding:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--paper)!important;
  opacity:.9;transition:background-color .15s,opacity .15s!important}
.fab-bsport > button:last-child:hover{opacity:1;background:rgba(253,252,249,.12)!important}
.fab-bsport > button:last-child:focus-visible{outline:2px solid var(--tan-2)!important;outline-offset:2px!important}
.fab-bsport > button:last-child > div{width:100%!important;height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;box-shadow:none!important}
/* compteurs (réservations à venir, articles du panier) : pastille olive au lieu du rouge de bsport */
.fab-bsport [class*="MuiBadge-badge"]{background:var(--olive)!important;color:var(--paper)!important;box-shadow:0 0 0 2px var(--paper)!important}
/* icône de bsport (maison / personne) remplacée par notre bonhomme */
.fab-bsport > button:last-child > div > svg{display:none!important}
.fab-bsport > button:last-child > div::before{content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat}
/* entrées du menu (Réservations, Panier, Profil, Souscriptions, Déconnexion) : pastilles crème sous le bonhomme */
.fab-bsport > button:not(:last-child){flex:none!important;width:40px!important;height:40px!important;border-radius:999px!important;
  background:var(--paper)!important;color:var(--olive-d)!important;box-shadow:0 6px 18px rgba(0,0,0,.18)!important}
.fab-bsport > button:not(:last-child):hover{background:var(--tan-2)!important}
/* bsport dessine en plus son propre rond blanc à ombre DANS chaque entrée : on l'efface (sinon deux ronds décalés) */
.fab-bsport > button:not(:last-child){display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important}
.fab-bsport > button:not(:last-child) > div,
.fab-bsport > button:not(:last-child) > span[class*="MuiBadge-root"],
.fab-bsport > button:not(:last-child) > span[class*="MuiBadge-root"] > div{
  position:static!important;display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;height:100%!important;margin:0!important;background:transparent!important;box-shadow:none!important}
.fab-bsport > button:not(:last-child) > span[class*="MuiBadge-root"]{position:relative!important}
.fab-bsport > button:not(:last-child) svg{width:18px!important;height:18px!important}

/* Les widgets bsport de service sont montés hors de l'écran : seules leurs fenêtres s'affichent */
.compte-widget{position:fixed!important;left:-10000px;top:0;width:240px;height:80px;overflow:hidden}

/* Bouton Menu */
.menu-zone{position:relative;display:flex;align-items:center}
.menu-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;color:var(--paper);font:500 15px var(--font);cursor:pointer}
.menu-btn:focus-visible{outline:2px solid var(--tan-2);outline-offset:3px;border-radius:6px}
.menu-ico,.menu-ico::before,.menu-ico::after{display:block;width:20px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
.menu-ico{position:relative}
.menu-ico::before,.menu-ico::after{content:"";position:absolute;left:0}
.menu-ico::before{top:-6px}
.menu-ico::after{top:6px}
.site-header.open .menu-ico{background:transparent}
.site-header.open .menu-ico::before{transform:translateY(6px) rotate(45deg)}
.site-header.open .menu-ico::after{transform:translateY(-6px) rotate(-45deg)}

/* Panneau du menu (ordinateur : sous le bouton) */
.menu-panel{display:none;position:absolute;top:100%;left:-24px;min-width:260px;flex-direction:column;background:var(--cream);color:var(--olive-d);padding:10px 24px 22px;border-radius:0 0 16px 16px;box-shadow:0 18px 30px rgba(0,0,0,.18)}
.menu-panel a{display:flex;align-items:center;min-height:44px;font-size:16px;font-weight:500;text-decoration:none;color:var(--olive-d);border-bottom:1px solid var(--sand)}
.menu-panel a:last-child{border-bottom:0}
.menu-panel a:hover,.menu-panel a[aria-current="page"]{color:var(--olive);text-decoration:underline;text-underline-offset:6px}
.menu-panel a:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.site-header.open .menu-panel{display:flex}
/* Le menu s'ouvre au CLIC seulement (plus au survol, demandé le 14/11) : voir commun/entete.js */

/* Liens visibles hors menu */
.nav-rapide{display:flex;align-items:center;gap:28px;font-size:15px;min-width:0}
.nav-rapide a{text-decoration:none;opacity:.92;white-space:nowrap}
.nav-rapide a:hover,.nav-rapide a[aria-current="page"]{opacity:1;text-decoration:underline;text-underline-offset:6px}

/* Tablette : on garde la même disposition, un peu plus serrée */
@media (max-width:1100px){
  .site-header .wrap.entete{gap:16px}
  .entete .head-gauche{gap:20px}
  .nav-rapide{gap:18px;font-size:14px}
}

/* Mobile : liens rapides sur une 2e ligne, menu en plein largeur */
@media (max-width:860px){
  .site-header .wrap.entete{grid-template-areas:"gauche logo droite" "rapide rapide rapide";grid-template-rows:64px auto;height:auto;row-gap:0}
  .entete .head-gauche{display:contents}
  .menu-zone{grid-area:gauche;position:static}
  .nav-rapide{grid-area:rapide;justify-content:center;gap:0;border-top:1px solid rgba(253,252,249,.16);margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px)))}
  .nav-rapide a{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;font-size:14px;padding:0 6px}
  .nav-rapide a + a{border-left:1px solid rgba(253,252,249,.16)}
  .menu-panel{left:0;right:0;min-width:0;border-radius:0;padding:8px max(16px,env(safe-area-inset-left,0px)) 20px;max-height:calc(100vh - 110px);overflow:auto}
  .menu-panel a{font-size:17px;min-height:52px}
  .entete .logo img{height:48px}
  .entete .head-droite .btn{height:44px;padding:0 16px;font-size:14px}
  .entete .head-droite{gap:4px}
}
@media (max-width:400px){
  .menu-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .entete .head-droite .btn{padding:0 13px}
  .menu-btn{min-width:44px;justify-content:flex-start}
}
/* Petit mobile : à droite, EN + compte + Réserver prennent ~180 px, plus que le tiers de l'écran.
   Avec trois colonnes égales, ce bloc débordait sur le logo. On donne à chaque côté la place qu'il lui faut
   et le logo se centre dans l'espace qui reste. */
@media (max-width:540px){
  .site-header .wrap.entete{grid-template-columns:auto minmax(0,1fr) auto;column-gap:8px}
  .entete .logo{justify-self:center}
}
/* Petits écrans : EN + compte + panier + Réserver serrés (sans espace entre eux), sinon ils passent sur le logo */
@media (max-width:420px){
  .entete .head-droite{gap:0}
  .langue{min-width:32px;padding:0 2px}
  .fab-place,.compte{width:40px}
  .entete .head-droite .btn{padding:0 12px}
}
/* Très petits écrans (320–360 px) : logo réduit (la taille de l'image est fixée en px sur mobile, d'où transform) */
@media (max-width:360px){
  .entete .logo{transform:scale(.8)}
  .fab-place,.compte{width:38px}
  .entete .head-droite .btn{padding:0 10px;font-size:13.5px}
}
@media (max-width:340px){
  .entete .logo{transform:scale(.6)}
  .langue{min-width:30px}
  .fab-place,.compte{width:36px}
}
/* En-tête mobile sur 2 lignes (109 px) : les ancres (#les-cours, #etape-1, #creneaux…) ne passent plus dessous */
@media (max-width:860px){
  section[id],.step,.week{scroll-margin-top:120px}
}

/* Icônes Instagram / Facebook dans l'en-tête (à gauche de EN), masquées sur mobile faute de place */
.reseaux-entete{display:inline-flex;align-items:center;gap:2px}
.reseaux-entete a{display:inline-grid;place-items:center;width:40px;height:44px;color:var(--paper);opacity:.9}
.reseaux-entete a:hover{opacity:1}
.reseaux-entete a:focus-visible{outline:2px solid var(--tan-2);outline-offset:2px;border-radius:6px}
.reseaux-entete svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.reseaux-entete svg .plein{fill:currentColor;stroke:none}
@media (max-width:860px){.reseaux-entete{display:none}}