/* =========================================================
   INVICTUS — feuille de style commune à toutes les pages
   ========================================================= */
:root{
  /* Direction artistique "Noir, Blanc & Rouge" — reprend les couleurs du vrai
     logo Invictus (badge noir/blanc/rouge). Le rouge reste un ACCENT ciblé
     (CTA, liens, bordures) sur un fond clair et épuré — jamais la couleur
     dominante, pour un rendu propre et pro, pas "criard". */
  --bg:#faf9f7;
  --bg-2:#f0eeeb;
  --ink:#171512;
  --ink-soft:#5c5852;
  --line: rgba(20,18,15,.12);
  --accent:#b3261e;
  --accent-hover:#8f1e18;
  --accent-soft: rgba(179,38,30,.09);
  --accent-on-dark:#e8483c;
  --dark-bg:#161514;
  --dark-ink:#f7f5f2;
  --dark-ink-soft:#b1aca6;
  --dark-line: rgba(247,245,242,.14);
  --radius:20px;
  --radius-lg:28px;
  --radius-pill:999px;
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-head:'Playfair Display', Georgia, 'Times New Roman', serif; /* police de titre : élégante, "maison de prestige" */
  --font-serif:var(--font-head); /* une seule police de marque partout (voir .accent-word) */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

/* ---------- ACCESSIBILITÉ : lien d'évitement + focus clavier visible ---------- */
.skip-link{
  position:absolute; left:12px; top:12px; z-index:1000;
  background:var(--accent); color:var(--ink); font-weight:700; font-size:.9rem;
  padding:12px 20px; border-radius:10px;
  transform:translateY(-90px); transition:transform .2s ease;
}
.skip-link:focus{ transform:translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:4px;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
h1,h2,h3{
  font-family:var(--font-head); text-wrap:balance;
  letter-spacing:-.01em; font-weight:700; text-transform:none;
}
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--font);
  font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.eyebrow.on-dark{ color:var(--accent-on-dark); }
.eyebrow.center{ justify-content:center; display:flex; }

.accent-word{
  font-family:var(--font-serif);
  font-style:italic;
  font-weight:600;
  text-transform:none;
  color:var(--accent);
}
.bg-dark .accent-word{ color:var(--accent-on-dark); }

/* ---------- LOGO / MARQUE ---------- */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-logo{ height:36px; width:36px; border-radius:50%; flex:none; }
.footer-grid .brand{ margin-bottom:12px; }

/* ---------- HERO BADGES (repères type "fiche") ---------- */
.hero-badges{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.76rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:26px;
}
.hero-badges .dot{
  color:var(--accent); margin-right:8px; display:inline-block;
  animation:liveDotPulse 2.2s ease-in-out infinite;
}
@keyframes liveDotPulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.4; transform:scale(.8); }
}
@media (prefers-reduced-motion: reduce){ .hero-badges .dot{ animation:none; } }

/* ---------- CLUSTER FLOTTANT (CTA + WhatsApp, groupés en bas à droite) ---------- */
.floating-stack{
  position:fixed; right:20px; z-index:90;
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.floating-cta{
  transform:translateY(140%); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.floating-cta.show{ transform:translateY(0); opacity:1; }
/* Masqué quand la zone de réservation (page Contact) est à l'écran : le CTA
   du hero et le bouton du formulaire jouent déjà ce rôle, pas besoin d'un
   troisième bouton qui vienne gêner la saisie. */
.floating-cta.is-suppressed{ transform:translateY(140%); opacity:0; pointer-events:none; }
.floating-cta .btn{ box-shadow:0 10px 26px rgba(12,15,13,.22); min-height:54px; padding-inline:26px; }
/* Le bouton "Cours d'essai" est déjà bien visible dans la barre de navigation
   desktop : ce doublon flottant n'a de sens que sur mobile. (!important
   nécessaire : .btn définit display:inline-flex plus loin dans la feuille,
   avec la même spécificité.) */
@media(min-width:880px){ .floating-cta{ display:none !important; } }

/* ---------- BOUTON WHATSAPP FLOTTANT ---------- */
.whatsapp-float{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:#25D366; box-shadow:0 10px 26px rgba(12,15,13,.28);
  transform:translateY(140%); opacity:0;
  transition:transform .35s ease, opacity .35s ease, box-shadow .18s ease, background .18s ease;
}
.whatsapp-float.show{ transform:translateY(0); opacity:1; }
.whatsapp-float:hover{ background:#1ebe5a; box-shadow:0 12px 30px rgba(12,15,13,.34); }
.whatsapp-float svg{ width:26px; height:26px; position:relative; z-index:1; }
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55;
  animation:whatsappPulse 2.6s ease-out infinite;
}
.whatsapp-float.show::before{ animation-play-state:running; }
@keyframes whatsappPulse{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.9); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .whatsapp-float::before{ animation:none; } }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:13px 26px;
  min-height:48px; /* zone tactile confortable au doigt */
  border-radius:var(--radius-pill);
  font-weight:600; font-size:.98rem;
  cursor:pointer;
  border:1px solid transparent;
  /* Style sobre façon Apple : un simple changement de couleur net et rapide
     au survol, jamais de halo lumineux ni d'ombre colorée. */
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:active{ transform:scale(.97); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-accent:hover{ background:var(--accent-hover); }
.btn-dark{ background:transparent; border:1.5px solid var(--accent); color:var(--accent); }
.btn-dark:hover{ background:var(--accent); color:#fff; }
.btn-ghost{ color:var(--accent); font-weight:600; }
.btn-ghost:hover{ text-decoration:underline; }
.btn-ghost.on-dark{ color:var(--accent-on-dark); }
/* Bouton "contour" façon Apple : bordure + texte dans la couleur du club,
   fond transparent — et au survol, il se remplit entièrement de cette
   couleur avec un texte qui passe en blanc (jamais l'inverse : pas de
   texte sombre sur fond coloré, moins lisible). */
.btn-line{ border-color:var(--accent); color:var(--accent); background:transparent; }
.btn-line:hover{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-line.on-dark{ border-color:var(--accent-on-dark); color:var(--accent-on-dark); }
.btn-line.on-dark:hover{ background:var(--accent-on-dark); border-color:var(--accent-on-dark); color:var(--dark-bg); }

/* ---------- HEADER ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* Pousse le contenu du header sous l'encoche / Dynamic Island en mode paysage
     ou sur les téléphones qui appliquent une inset en haut. */
  padding-top:env(safe-area-inset-top);
  /* Effet "verre dépoli" façon Apple : assez transparent en haut de page
     pour laisser deviner le contenu derrière, puis se referme légèrement
     au scroll pour rester lisible. Le flou reste actif sur mobile aussi
     (valeur un peu plus légère pour limiter le coût de recalcul). */
  background:rgba(250,246,238,.6);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  box-shadow:0 0 0 rgba(26,28,26,0);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
@media(max-width:880px){
  header{
    backdrop-filter:saturate(160%) blur(10px);
    -webkit-backdrop-filter:saturate(160%) blur(10px);
  }
}
header.scrolled{
  background:rgba(250,246,238,.86);
  border-color:var(--line);
  box-shadow:0 6px 20px rgba(26,28,26,.05);
}
header::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
header.scrolled::after{ transform:scaleX(1); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; }
.wordmark{ font-family:var(--font-head); font-weight:700; font-size:1.25rem; text-transform:none; letter-spacing:.01em; }
.nav-links{ display:none; align-items:center; gap:30px; }
.nav-links a{ font-size:.86rem; font-weight:500; color:var(--ink-soft); position:relative; padding:4px 0; }
.nav-links a:hover{ color:var(--ink); }
.nav-links a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--accent); transition:right .2s ease;
}
.nav-links a:hover::after{ right:0; }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{ right:0; }
.nav-cta{ display:none; }
.burger{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-end; gap:6px;
  width:44px; height:44px; background:none; border:none; cursor:pointer; padding:0;
}
.burger span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease, width .2s ease, background .2s ease;
}
.burger span:nth-child(1){ width:26px; }
.burger span:nth-child(2){ width:19px; }
.burger span:nth-child(3){ width:26px; }
.burger:hover span, .burger:active span{ background:var(--accent); width:26px; }

@media(min-width:880px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; padding:9px 20px; font-size:.88rem; }
  .burger{ display:none; }
}

body.nav-open .burger span{ opacity:0; }
/* Empêche la page de défiler derrière le menu mobile ouvert (le panneau a
   son propre scroll interne si son contenu dépasse la hauteur d'écran). */
html.nav-open, body.nav-open{ overflow:hidden; height:100%; }
.mobile-panel{
  position:fixed; inset:0; z-index:150;
  background:rgba(250,246,238,1);
  backdrop-filter:blur(10px);
  display:flex; flex-direction:column;
  padding:104px 32px 36px;
  /* Marge de sécurité en bas pour les téléphones avec barre de gestes (iPhone) */
  padding-bottom:max(36px, env(safe-area-inset-bottom));
  transform:translateY(-100%);
  transition:transform .35s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.mobile-panel.open{ transform:translateY(0); }

/* Petit repère "Menu" en haut du panneau, dans le style des eyebrows du site */
.panel-eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.mobile-panel.open .panel-eyebrow{ opacity:1; transform:translateY(0); transition-delay:.05s; }

/* Liste des liens : numérotée (comme une "carte" de club), avec séparateurs
   fins et un chevron doré qui apparaît au clic — plus soigné que du texte brut.
   Chaque lien entre en fondu/glissement, l'un après l'autre, pour un effet plus soigné. */
.panel-links{ display:flex; flex-direction:column; counter-reset:panelLink; }
.panel-links a{
  position:relative; display:flex; align-items:baseline; gap:14px;
  font-size:1.28rem; font-weight:700; color:var(--ink);
  padding:17px 26px 17px 2px; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(10px);
  transition:color .2s ease, padding-left .2s ease, opacity .45s ease, transform .45s ease;
}
.panel-links a:first-child{ border-top:1px solid var(--line); }
.mobile-panel.open .panel-links a{ opacity:1; transform:translateY(0); }
.mobile-panel.open .panel-links a:nth-child(1){ transition-delay:.08s; }
.mobile-panel.open .panel-links a:nth-child(2){ transition-delay:.13s; }
.mobile-panel.open .panel-links a:nth-child(3){ transition-delay:.18s; }
.mobile-panel.open .panel-links a:nth-child(4){ transition-delay:.23s; }
.mobile-panel.open .panel-links a:nth-child(5){ transition-delay:.28s; }
.mobile-panel.open .panel-links a:nth-child(6){ transition-delay:.33s; }
.panel-links a::before{
  counter-increment:panelLink; content:counter(panelLink,decimal-leading-zero);
  font-family:var(--font); font-size:.76rem; font-weight:700; color:var(--accent);
  letter-spacing:.02em;
}
.panel-links a::after{
  content:'\203A'; position:absolute; right:4px; top:50%; transform:translateY(-50%) translateX(-6px);
  color:var(--accent); font-size:1.3rem; opacity:0; transition:opacity .2s ease, transform .2s ease;
}
.panel-links a:active{ color:var(--accent); padding-left:10px; }
.panel-links a:active::after{ opacity:1; transform:translateY(-50%) translateX(0); }

/* Citation discrète qui comble l'espace entre la liste et le bouton,
   au lieu de laisser un grand vide — reprend la phrase d'accroche du site. */
.panel-mark{
  display:flex; align-items:center; gap:14px;
  margin:auto 0 28px; padding-top:8px;
  font-family:var(--font-serif,var(--font)); font-style:italic; font-size:1rem;
  color:var(--ink-soft);
  opacity:0; transition:opacity .5s ease;
}
.panel-mark::before{ content:''; width:26px; height:1px; background:var(--accent); flex-shrink:0; }
.mobile-panel.open .panel-mark{ opacity:1; transition-delay:.4s; }

.panel-cta{ align-self:stretch; justify-content:center; }

/* Petit rappel contact en bas, pour rassurer sans surcharger */
.panel-footer{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.82rem; font-weight:600; color:var(--ink-soft);
}
.panel-footer a{ color:var(--ink); }
.panel-close{
  position:absolute; top:22px; right:24px;
  width:34px; height:34px; background:none; border:none; cursor:pointer;
}
.panel-close span{ position:absolute; top:50%; left:50%; width:22px; height:2px; border-radius:2px; background:var(--ink); transition:background .2s ease; }
.panel-close:hover span{ background:var(--accent); }
.panel-close span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.panel-close span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }

/* ---------- HOME HERO ---------- */
.hero{
  background:var(--bg);
  color:var(--ink);
  padding:150px 0 90px;
  border-bottom:1px solid var(--line);
}
.hero-split{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media(min-width:900px){ .hero-split{ grid-template-columns:1.05fr .95fr; gap:64px; } }
.hero h1{
  font-size:clamp(2.4rem, 4.4vw + 1rem, 4rem);
  line-height:1.06;
  margin:0 0 20px;
}
.hero p.lede{
  font-size:1.2rem; font-weight:500; color:var(--ink-soft);
  max-width:460px; margin:0 0 34px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:22px; align-items:center; }
.hero-ctas .btn-dark, .hero-ctas .btn-accent{ padding:14px 30px; font-size:1.02rem; }
.hero-ctas .btn-ghost{ font-size:1.02rem; }
.hero-media{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease;
  animation:heroFloat 5s ease-in-out infinite;
}
.hero-media:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(28,24,16,.14); animation-play-state:paused; }
.hero-media img, .hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
/* La vidéo du hero réutilise .video-bg__el pour la pause automatique (prefers-reduced-motion),
   mais ici elle n'est pas dans un conteneur .video-bg plein cadre : on annule son
   positionnement absolu pour qu'elle reste bien contenue dans la carte .hero-media. */
.hero-media .video-bg__el{ position:static; inset:auto; }
@keyframes heroFloat{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
@media (prefers-reduced-motion: reduce){ .hero-media{ animation:none; } }
@media(max-width:600px){ .hero-media{ aspect-ratio:4/3; } }

/* ---------- PAGE HERO (sous-pages) ---------- */
.page-hero{
  background:var(--bg); color:var(--ink);
  padding:150px 0 70px; text-align:center;
  border-bottom:1px solid var(--line);
}
.page-hero h1{
  font-size:clamp(2.2rem, 4vw + 1rem, 3.6rem);
  line-height:1.06; max-width:760px; margin:0 auto 16px;
}
.page-hero p{ color:var(--ink-soft); font-size:1.08rem; font-weight:500; max-width:520px; margin:0 auto; }

/* ---------- Hero orienté conversion (page Contact) ---------- */
.contact-hero h1{ font-size:clamp(2.4rem, 3.6vw + 1rem, 3.4rem); }
.contact-hero-sub{ font-size:1.14rem; font-weight:600; color:var(--ink); max-width:480px; margin:0 auto 10px; }
.contact-hero-meta{ font-size:.94rem; font-weight:600; color:var(--accent); margin:0 auto 28px; }
.contact-hero-cta{ padding:16px 34px; font-size:1.05rem; }
.contact-hero-note{ font-size:.84rem; color:var(--ink-soft); margin:14px auto 0; }

/* ---------- SECTION SCAFFOLDING ---------- */
.section{ padding:104px 0; }
.bg-alt{ background:var(--bg-2); }
.bg-dark{
  background:linear-gradient(120deg, #161514, #1d1b1a, #121110, #1a1817);
  background-size:300% 300%;
  animation:bgShift 20s ease infinite;
  color:var(--dark-ink);
  /* Isole cette section côté rendu : son dégradé animé ne force plus de
     repaint sur le reste de la page pendant le scroll (moins de saccades
     sur les pages qui empilent plusieurs sections bg-dark). */
  contain:paint;
}
@media (prefers-reduced-motion: reduce){ .bg-dark{ animation:none; background:var(--dark-bg); } }
/* Sur mobile, ce fond animé en continu ajoute un travail de rendu permanent
   qui se sent surtout pendant le défilement : on fige le dégradé (toujours
   joli, juste immobile) pour un scroll plus net sur petit écran. */
@media(max-width:640px){
  .bg-dark{ animation:none; background-position:30% 50%; }
}
.center{ text-align:center; }

.statement{ max-width:780px; margin:0 auto; }
.statement h2{ font-size:clamp(2.1rem, 3vw + 1rem, 3.3rem); line-height:1.12; }
.statement p{
  color:var(--ink-soft); font-size:1.1rem; font-weight:500; margin-top:22px;
  max-width:600px; margin-left:auto; margin-right:auto;
}
.bg-dark .statement p{ color:var(--dark-ink-soft); }

/* ---------- BELT PROGRESSION ---------- */
.belt-wrap{ max-width:840px; margin:60px auto 0; }
.belt-bar{ display:flex; gap:4px; width:100%; height:10px; }
.belt-bar span{ flex:1; border-radius:6px; transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.22,.9,.3,1); }
.belt-wrap.in-view .belt-bar span{ transform:scaleX(1); }
.belt-bar span:nth-child(1){ transition-delay:0s; }
.belt-bar span:nth-child(2){ transition-delay:.08s; }
.belt-bar span:nth-child(3){ transition-delay:.16s; }
.belt-bar span:nth-child(4){ transition-delay:.24s; }
.belt-bar span:nth-child(5){ transition-delay:.32s; }
.belt-bar .b-white{ background:#e8e8ea; }
.belt-bar .b-blue{ background:#2f5aa8; }
.belt-bar .b-purple{ background:#5c5ce0; }
.belt-bar .b-brown{ background:#8a5a30; }
.belt-bar .b-black{ background:#1d1d1f; }
.belt-labels{ display:grid; grid-template-columns:repeat(5,1fr); margin-top:14px; }
.belt-labels span{ font-size:.78rem; font-weight:600; color:var(--ink-soft); }
.belt-labels span:last-child{ text-align:right; }
.belt-labels span:not(:first-child):not(:last-child){ text-align:center; }

/* ---------- FEATURE SPLIT ---------- */
.split{ display:grid; gap:44px; align-items:center; }
@media(min-width:860px){ .split{ grid-template-columns:1fr 1fr; gap:80px; } }
.split-media{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(160deg, #232326, #000000);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:30px;
  transition:transform .35s ease, box-shadow .35s ease;
}
.split-media:hover{ transform:translateY(-6px); box-shadow:0 22px 44px rgba(12,15,13,.18); }
.split-media .placeholder-label{ font-size:.85rem; font-weight:500; color:var(--dark-ink-soft); position:relative; z-index:2; }
.coach-photo-wrap{ padding:0; }
.coach-photo{ width:100%; height:100%; object-fit:cover; object-position:38% 18%; }
.split-text h3{ font-size:clamp(1.7rem, 2vw + 1rem, 2.4rem); line-height:1.12; margin-bottom:18px; }
.split-text p{ color:var(--ink-soft); font-weight:500; margin-bottom:26px; max-width:440px; }

/* ---------- VIDEO BACKGROUND (structure prête, vidéo à brancher plus tard) ----------
   Comment ça marche : dès qu'une vraie vidéo est disponible, il suffit d'ajouter
   une balise <source src="....mp4" type="video/mp4"> à l'intérieur de la balise
   <video class="video-bg__el"> déjà présente dans le HTML. Rien d'autre à changer :
   le dégradé animé (.video-fallback) disparaît automatiquement derrière la vidéo
   dès qu'elle a une source et commence à jouer. */
.video-bg{ position:relative; overflow:hidden; }
.video-bg__el{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.video-fallback{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(120deg, #1a1a1c, #000000, #232326, #0c0b0a);
  background-size:300% 300%;
  animation:bgShift 14s ease infinite;
}
@keyframes bgShift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.video-overlay{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.38); }
/* Photo utilisée à la place d'une vidéo (en attendant les vraies vidéos) :
   un lent zoom continu ("Ken Burns") donne une impression de mouvement
   même sur une image fixe. */
.kenburns-bg{ animation:kenburns 16s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns{
  0%{ transform:scale(1); }
  100%{ transform:scale(1.12); }
}
@media (prefers-reduced-motion: reduce){ .kenburns-bg{ animation:none; } }

/* Coupe les animations continues (dégradé, Ken Burns, flottement du hero)
   dès qu'elles sortent de l'écran — moins de travail de rendu pendant le
   scroll sur les longues pages, sans rien changer visuellement une fois
   la section de nouveau visible. Voir initOffscreenAnimPause() dans main.js. */
.anim-off{ animation-play-state:paused !important; }
.video-bg > *:not(.video-bg__el):not(.video-fallback):not(.video-overlay){ position:relative; z-index:2; }
.video-bg .placeholder-label{ color:#f4f0ea; font-size:.85rem; font-weight:500; text-align:center; padding:0 20px; }
.video-bg .placeholder-label .tag{
  display:inline-block; margin-bottom:10px; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-on-dark); border:1px solid rgba(255,107,92,.4);
  border-radius:var(--radius-pill); padding:5px 12px;
}
section.bg-dark.video-bg .video-overlay{ background:rgba(0,0,0,.55); }

/* Bandeau vidéo pleine largeur (entre deux blocs de texte, pour aérer une page) */
.video-banner{
  aspect-ratio:21/9; border-radius:var(--radius-lg); overflow:hidden;
  margin-top:56px; display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease, box-shadow .35s ease;
}
.video-banner:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(12,15,13,.18); }
@media(max-width:700px){ .video-banner{ aspect-ratio:4/5; } }

/* ---------- STAT ROW ---------- */
.stat-row{ display:grid; grid-template-columns:1fr; gap:44px; margin-top:56px; text-align:center; }
/* 2 colonnes dès qu'un téléphone a un peu de largeur (les 4 chiffres empilés
   en 1 colonne prenaient 4 écrans de scroll) ; 1 seule colonne réservée aux
   très petits écrans (voir plus bas) ; 4 colonnes à partir des tablettes. */
@media(min-width:360px){ .stat-row{ grid-template-columns:repeat(2,1fr); gap:32px 20px; } }
@media(min-width:700px){ .stat-row{ grid-template-columns:repeat(4,1fr); gap:44px; } }
.stat-cell{ transition:transform .3s ease; border-top:2px solid var(--accent); padding-top:18px; }
.stat-cell:hover{ transform:translateY(-6px); }
.stat-cell .num{ font-size:clamp(1.7rem, 2.6vw + 1rem, 2.6rem); font-weight:800; letter-spacing:-.01em; transition:color .25s ease; }
.stat-cell:hover .num{ color:var(--accent-on-dark); }
.stat-cell .label{ font-size:.92rem; font-weight:500; color:var(--dark-ink-soft); margin-top:8px; }
/* Le prix (1er chiffre : "10€") doit sauter aux yeux avant les autres —
   c'est l'info n°1 pour la conversion. */
.stat-cell.stat-hero{ border-top-width:3px; }
.stat-cell.stat-hero .num{ font-size:clamp(2.3rem, 5vw + 1rem, 3.4rem); color:var(--accent-on-dark); }
@media(max-width:359px){ .stat-cell.stat-hero{ grid-column:1 / -1; } }

/* ---------- SEGMENTS (bloc interactif) ---------- */
.segments{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); padding:48px 0; }
.segment-chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:32px; }
.segment-chip{
  font-family:inherit; font-weight:700; font-size:.92rem; letter-spacing:.01em;
  background:transparent; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:10px 22px; cursor:pointer;
  transition:all .25s ease;
}
.segment-chip:hover{ border-color:var(--accent); color:var(--ink); }
.segment-chip.active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.segment-panel{
  max-width:640px; margin:0 auto; text-align:center;
  border-top:2px solid var(--accent); padding-top:28px;
  animation:segmentFade .35s ease;
}
.segment-panel p{ font-size:1.08rem; color:var(--ink-soft); margin-bottom:22px; }
.segment-panel .btn{ display:inline-block; }
@keyframes segmentFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .segment-panel{ animation:none; } }

/* ---------- QUOTE ---------- */
.quote-block{ max-width:760px; margin:0 auto; text-align:center; }
.quote-block p{ font-size:clamp(1.4rem, 1.8vw + 1rem, 2rem); font-weight:600; line-height:1.4; }
.quote-block .attrib{ margin-top:18px; font-size:.95rem; color:var(--ink-soft); font-weight:500; }
.bg-dark .quote-block .attrib{ color:var(--dark-ink-soft); }
.quote-block .placeholder-note{ margin-top:6px; font-size:.78rem; color:#a1a1a6; font-weight:500; }

/* ---------- INFO BOX ---------- */
.info-box{
  border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:var(--radius); padding:44px;
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between;
  max-width:900px; margin:0 auto;
}
.info-box h3{ font-size:1.35rem; margin-bottom:8px; }
.info-box p{ color:var(--ink-soft); font-weight:500; max-width:420px; }

/* ---------- FINAL CTA ---------- */
.cta-final h2{ font-size:clamp(2.2rem, 3.6vw + 1rem, 3.6rem); line-height:1.08; max-width:680px; margin:0 auto 34px; }

/* ---------- FOOTER ---------- */
footer{ background:var(--dark-bg); color:var(--dark-ink-soft); padding:50px 0 26px; border-top:2px solid var(--accent); }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; padding-bottom:30px; }
@media(min-width:700px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr; } }
.footer-grid .wordmark{ color:var(--dark-ink); margin-bottom:12px; display:inline-block; }
.footer-grid p{ font-size:.9rem; max-width:320px; }
.footer-grid h4{ font-size:.82rem; font-weight:700; color:var(--dark-ink); margin-bottom:14px; }
.footer-grid ul li{ margin-bottom:9px; font-size:.88rem; }
.footer-grid ul li a:hover{ color:var(--dark-ink); }
.footer-bottom{ border-top:1px solid var(--dark-line); padding-top:20px; font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom .legal-links{ display:flex; gap:16px; flex-wrap:wrap; }
.footer-bottom .legal-links a:hover{ color:var(--dark-ink); }

/* ---------- RÉSEAUX SOCIAUX (footer) ---------- */
.social-links{ display:flex; gap:12px; margin-top:20px; }
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--dark-line); color:var(--dark-ink-soft);
  transition:transform .25s ease, border-color .25s ease, color .25s ease, background .25s ease;
}
.social-links a svg{ width:18px; height:18px; fill:currentColor; }
/* Respiration douce et discrète sur les icônes réseaux sociaux, décalée
   pour chacune afin que ça ne pulse pas toutes en même temps. */
.social-links a{ animation:iconBreathe 2.2s ease-in-out infinite; }
.social-links a:nth-child(2){ animation-delay:.3s; }
.social-links a:nth-child(3){ animation-delay:.6s; }
.social-links a:nth-child(4){ animation-delay:.9s; }
@keyframes iconBreathe{
  0%, 100%{ box-shadow:0 0 0 0 rgba(0,0,0,0); transform:scale(1); border-color:var(--dark-line); }
  50%{ box-shadow:0 0 0 7px color-mix(in srgb, var(--accent-on-dark) 30%, transparent); transform:scale(1.14); border-color:var(--accent-on-dark); }
}
@media (prefers-reduced-motion: reduce){ .social-links a{ animation:none; } }
.social-links a:hover{
  transform:translateY(-4px);
  border-color:var(--accent-on-dark); color:var(--dark-bg);
  background:var(--accent-on-dark);
}

/* ---------- CONTACT RAPIDE (structure prête : à activer dès que tél/WhatsApp connus) ----------
   Comment ça marche : dès qu'on a le vrai numéro, il suffit de remplacer les liens
   href="#" par tel:+32... et https://wa.me/32... dans le HTML. Rien d'autre à changer. */
.quick-contact{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }
.qc-card{
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  border:1px solid var(--line); border-radius:var(--radius-pill);
  font-weight:600; font-size:.92rem; color:var(--ink-soft);
  background:var(--bg); cursor:default; opacity:.7;
}
.qc-card .qc-icon{ font-size:1.1rem; }
.qc-card .qc-soon{ font-size:.72rem; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-left:2px; }
.qc-card.on-dark{ background:transparent; border-color:var(--dark-line); color:var(--dark-ink-soft); }

/* ---------- CONSENTEMENT RGPD (formulaire) ---------- */
.consent-row{ display:flex; align-items:flex-start; gap:10px; }
.consent-row input[type="checkbox"]{ margin-top:4px; flex:none; width:16px; height:16px; accent-color:var(--accent); }
.consent-row label{ font-size:.84rem; color:var(--ink-soft); font-weight:500; }
.consent-row label a{ color:var(--ink); text-decoration:underline; }

/* ---------- PLANNING : état "à venir" unifié ---------- */
.schedule-soon{
  border:1px solid var(--line); border-radius:var(--radius); padding:44px 30px;
  text-align:center;
}
.schedule-soon h3{ font-size:1.2rem; margin-bottom:10px; }
.schedule-soon p{ color:var(--ink-soft); max-width:480px; margin:0 auto 22px; }

/* ---------- ANCRE "RÉSERVATION" (jump depuis un CTA "Cours d'essai") ---------- */
#reservation{ scroll-margin-top:110px; }

.reservation-banner{
  max-width:640px; margin:0 auto 26px; background:var(--accent-soft);
  border:1px solid rgba(179,38,30,.3); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 20px;
}
.reservation-banner p{ font-size:.94rem; font-weight:600; color:var(--ink); margin:0; }

@keyframes formHighlight{
  0%{ box-shadow:0 0 0 0 rgba(179,38,30,.45); }
  70%{ box-shadow:0 0 0 14px rgba(179,38,30,0); }
  100%{ box-shadow:0 0 0 0 rgba(179,38,30,0); }
}
.highlight-pulse{ animation:formHighlight 1.1s ease-out 2; border-radius:var(--radius); }
@media (prefers-reduced-motion: reduce){ .highlight-pulse{ animation:none; } }

/* ---------- BANDEAU "EXEMPLE FICTIF" (contenu à remplacer avant mise en ligne) ---------- */
.todo-note{
  background:var(--accent-soft); border:1px solid rgba(179,38,30,.3); border-radius:12px;
  padding:14px 18px; font-size:.85rem; color:var(--ink); margin:10px 0 22px;
}
.todo-note b{ color:var(--accent); }
.bg-dark .todo-note{ background:rgba(232,72,60,.12); border-color:rgba(232,72,60,.3); color:var(--dark-ink); }
.bg-dark .todo-note b{ color:var(--accent-on-dark); }

/* =========================================================
   SCROLL-REVEAL (dégradation propre : visible sans JS)
   ========================================================= */
.reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.3,1); }
.reveal.pre{ opacity:0; transform:translateY(28px); }
.reveal.pre.in-view{ opacity:1; transform:none; }

/* =========================================================
   TABS (page Cours & Horaires)
   ========================================================= */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:44px; }
.tab-btn{
  font-family:var(--font); font-size:.88rem; font-weight:600;
  padding:11px 20px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:all .18s ease;
}
.tab-btn:hover{ border-color:var(--accent); color:var(--ink); }
.tab-btn.active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeIn .35s ease; }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

.class-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  padding:20px 6px; border-bottom:1px solid var(--line);
}
.class-row:first-child{ border-top:1px solid var(--line); }
.class-time{ font-weight:700; min-width:120px; }
.class-name{ color:var(--ink); font-weight:600; flex:1; min-width:180px; }
.class-level{ font-size:.82rem; color:var(--ink-soft); }
.class-empty{ padding:34px 6px; text-align:center; color:var(--ink-soft); font-size:.95rem; }

/* =========================================================
   TOGGLE (page Tarifs)
   ========================================================= */
.toggle-wrap{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:50px; }
.toggle-label{ font-weight:600; font-size:.92rem; color:var(--ink-soft); cursor:pointer; padding:8px 2px; }
.toggle-label.active{ color:var(--ink); }
.toggle{
  position:relative; width:52px; height:30px; border-radius:var(--radius-pill);
  background:var(--bg-2); border:1px solid var(--line); cursor:pointer; flex:none;
}
.toggle::after{
  content:''; position:absolute; top:2px; left:2px; width:24px; height:24px;
  border-radius:50%; background:var(--accent); transition:transform .25s ease;
}
.toggle.on::after{ transform:translateX(22px); }

.price-grid{ display:grid; gap:26px; grid-template-columns:1fr; max-width:1000px; margin:0 auto; }
@media(min-width:760px){ .price-grid{ grid-template-columns:repeat(3,1fr); } }
.price-card{
  border:1px solid var(--line); border-radius:var(--radius); padding:36px 30px;
  display:flex; flex-direction:column; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(26,28,26,.08); }
.price-card.featured{ border-color:var(--accent); position:relative; background:var(--accent-soft); }
.price-card .badge{
  position:absolute; top:-13px; left:30px; background:var(--accent); color:var(--ink);
  font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:var(--radius-pill);
}
.price-card h3{ font-size:1.2rem; margin-bottom:6px; }
.price-card .price{ font-size:2.2rem; font-weight:800; margin:14px 0 4px; }
.price-card .price .per{ font-size:.9rem; font-weight:500; color:var(--ink-soft); }
.price-card .price-annual{ display:none; }
.price-card.show-annual .price-monthly{ display:none; }
.price-card.show-annual .price-annual{ display:block; }
.price-card ul{ margin:22px 0 28px; display:flex; flex-direction:column; gap:11px; flex:1; }
.price-card ul li{ font-size:.92rem; color:var(--ink-soft); padding-left:22px; position:relative; }
.price-card ul li::before{ content:'✓'; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* =========================================================
   FILTRES (page Galerie)
   ========================================================= */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px; }
.filter-chip{
  font-family:var(--font); font-size:.86rem; font-weight:600;
  padding:10px 18px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:transparent; color:var(--ink-soft); cursor:pointer;
  transition:all .18s ease;
}
.filter-chip:hover{ border-color:var(--accent); color:var(--ink); }
.filter-chip.active{ background:var(--accent); border-color:var(--accent); color:var(--ink); }

/* Mosaïque asymétrique en colonnes CSS : chaque photo garde ses propres
   proportions (portrait, carré, paysage…) au lieu d'être recadrée en case
   identique — effet "book photo", plus soigné qu'une grille uniforme.
   `column-count` répartit les tuiles colonne par colonne, comme Pinterest,
   sans JavaScript. */
.gallery-grid{ column-count:2; column-gap:18px; }
@media(min-width:640px){ .gallery-grid{ column-count:3; column-gap:22px; } }
@media(min-width:1050px){ .gallery-grid{ column-gap:26px; } }
.gallery-tile{
  break-inside:avoid; margin-bottom:18px; border-radius:14px; overflow:hidden;
  display:block; position:relative; cursor:pointer; line-height:0;
  transition:transform .3s ease, box-shadow .3s ease;
}
@media(min-width:640px){ .gallery-tile{ margin-bottom:22px; } }
.gallery-tile:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(12,15,13,.28); }
.gallery-tile:focus-visible{ outline:2px solid var(--accent-on-dark); outline-offset:3px; }
.gallery-tile img{ width:100%; height:auto; display:block; transition:transform .6s ease; }
.gallery-tile:hover img{ transform:scale(1.05); }
.gallery-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(10,8,5,.78) 100%);
  opacity:0; transition:opacity .3s ease;
}
.gallery-tile:hover::after{ opacity:1; }
.gallery-tile .tile-zoom{
  position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:50%;
  background:rgba(10,8,5,.55); border:1px solid rgba(247,241,228,.3); color:var(--dark-ink);
  display:flex; align-items:center; justify-content:center; font-size:.95rem;
  opacity:0; transform:translateY(-4px); transition:opacity .25s ease, transform .25s ease;
  backdrop-filter:blur(3px); z-index:1;
}
.gallery-tile:hover .tile-zoom{ opacity:1; transform:translateY(0); }
.gallery-tile .tile-caption{
  position:absolute; left:14px; right:14px; bottom:12px; z-index:1;
  color:#fdfaf3; font-size:.78rem; font-weight:600; line-height:1.35;
  opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease;
}
.gallery-tile:hover .tile-caption{ opacity:1; transform:translateY(0); }

/* ---------- SOMMAIRE DE CATÉGORIES (page Galerie, ancre vers chaque bloc) ---------- */
.gallery-toc{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:36px 0 0;
}
.gallery-toc a{
  font-size:.86rem; font-weight:600; padding:10px 18px;
  border-radius:var(--radius-pill); border:1px solid var(--dark-line);
  color:var(--dark-ink-soft); transition:all .18s ease;
}
.gallery-toc a:hover{ border-color:var(--accent-on-dark); color:var(--dark-ink); }

/* ---------- BLOCS THÉMATIQUES (page Galerie : Équipe / Enfants / Entraînement…) ---------- */
.gallery-block{ margin-top:70px; scroll-margin-top:110px; }
.gallery-block:first-child{ margin-top:56px; }
.gallery-block-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:26px; }
.gallery-block-head .num{
  font-family:var(--font-head); font-size:.95rem; font-weight:700;
  color:var(--accent-on-dark); flex:none;
}
.gallery-block-head h3{
  font-size:1.3rem; font-weight:700; color:var(--dark-ink); margin:0;
}
.gallery-block-head .rule{ flex:1; height:1px; background:var(--dark-line); }

/* ---------- VIDÉOS "REELS" (page Galerie) ----------
   Les vidéos reçues sont filmées en vertical (comme des Reels) : on les
   affiche donc chacune dans son format natif — une carte verticale bien
   nette — plutôt que de forcer un format large qui les couperait ou les
   déformerait. La rangée défile horizontalement (glissement au doigt sur
   mobile), avec un "snap" pour que chaque carte s'aligne proprement. */
.reel-intro{ color:var(--dark-ink-soft); max-width:560px; margin:0 auto 28px; text-align:center; }
.reel-row{
  display:flex; gap:18px; overflow-x:auto; padding:10px 4px 20px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.reel-card{
  position:relative; flex:0 0 auto; width:200px; aspect-ratio:9/16; border-radius:var(--radius);
  overflow:hidden; scroll-snap-align:start; border:1px solid var(--dark-line);
  background:#0a0a0a; cursor:pointer; isolation:isolate;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.reel-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,.4); border-color:var(--accent-on-dark); }
.reel-video{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }
/* Voile dégradé en bas de carte : lisibilité de la légende + look "édité", pas un lecteur brut */
.reel-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.15) 65%, rgba(0,0,0,.8) 100%);
  transition:opacity .3s ease;
}
/* Bouton lecture central façon appli mobile — remplace le lecteur natif du navigateur */
.reel-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; z-index:2;
  background:rgba(15,13,11,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  border:1.5px solid rgba(255,255,255,.85); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.reel-play svg{ margin-left:3px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.reel-card:hover .reel-play{ background:var(--accent); border-color:var(--accent); transform:translate(-50%,-50%) scale(1.08); }
/* Pastille "REEL" en haut, petit repère visuel type réseau social */
.reel-tag{
  position:absolute; top:10px; left:10px; z-index:2; pointer-events:none;
  font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:#fff; background:rgba(15,13,11,.5); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.3); border-radius:100px; padding:3px 9px;
  transition:opacity .25s ease;
}
.reel-caption{
  position:absolute; left:12px; right:12px; bottom:11px; z-index:2; pointer-events:none;
  color:#fff; font-size:.78rem; font-weight:600; line-height:1.25;
  text-shadow:0 1px 4px rgba(0,0,0,.6); transition:opacity .25s ease, transform .25s ease;
}
/* Etat "en lecture" : on efface l'habillage pour laisser la vidéo respirer, comme un vrai reel */
.reel-card.is-playing .reel-shade{ opacity:0; }
.reel-card.is-playing .reel-play{ opacity:0; transform:translate(-50%,-50%) scale(.8); pointer-events:none; }
.reel-card.is-playing .reel-tag,
.reel-card.is-playing .reel-caption{ opacity:0; transform:translateY(6px); }
@media(min-width:640px){ .reel-card{ width:230px; } }
@media (prefers-reduced-motion: reduce){ .reel-card{ transition:none; } .reel-card:hover{ transform:none; } }

/* Variante "large" des cartes reel, pour les extraits filmés à l'horizontale
   (au lieu du format vertical 9/16 ci-dessus) — même habillage (voile,
   bouton, légende), juste un format de carte différent. */
.reel-card.wide{ width:260px; aspect-ratio:16/9; }
@media(min-width:640px){ .reel-card.wide{ width:320px; } }

/* ---------- SPOTLIGHT ÉQUIPE (page Galerie) ---------- */
.spotlight-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:700px){ .spotlight-grid{ grid-template-columns:repeat(3,1fr); gap:22px; } }
.spotlight-tile{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--dark-line); cursor:pointer;
}
.spotlight-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.spotlight-tile:hover img{ transform:scale(1.06); }
.spotlight-tile::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(10,8,5,.82) 100%);
}
.spotlight-tile .tile-caption{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:1;
  color:#fdfaf3; font-family:var(--font-head); font-size:1.05rem; font-weight:700;
}

/* ---------- LIGHTBOX (agrandissement des photos, sans jamais dépasser leur définition d'origine) ---------- */
.lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,8,5,.95);
  display:flex; align-items:center; justify-content:center;
  padding:70px 20px;
  opacity:0; visibility:hidden;
  transition:opacity .25s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width:900px; width:100%; text-align:center; }
.lightbox-inner img{
  max-width:100%; max-height:74vh; width:auto; height:auto;
  margin:0 auto; border-radius:10px; display:block;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
}
.lightbox-caption{ color:var(--dark-ink); font-size:.94rem; font-weight:600; margin-top:20px; }
.lightbox-counter{
  color:var(--accent-on-dark); font-size:.72rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; margin-top:8px;
}
.lightbox-close, .lightbox-arrow{
  position:fixed; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--dark-line); color:var(--dark-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-close:hover, .lightbox-arrow:hover{ background:rgba(255,255,255,.16); border-color:var(--accent-on-dark); }
.lightbox-close{ top:22px; right:22px; width:44px; height:44px; font-size:1.2rem; }
.lightbox-arrow{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.1rem; }
.lightbox-arrow.prev{ left:22px; }
.lightbox-arrow.next{ right:22px; }
@media(max-width:640px){
  .lightbox{ padding:90px 14px 24px; }
  .lightbox-arrow{ width:42px; height:42px; }
  .lightbox-arrow.prev{ left:6px; }
  .lightbox-arrow.next{ right:6px; }
  .lightbox-close{ top:14px; right:14px; }
}

/* ---------- Lightbox vidéo (page Galerie) : agrandissement fluide des
   reels au clic, même habillage sombre que la lightbox photo, avec une
   entrée en fondu + léger zoom pour un rendu "app premium" plutôt qu'un
   simple lecteur natif qui s'ouvre d'un coup. ---------- */
.video-lightbox{
  position:fixed; inset:0; z-index:300;
  background:rgba(10,8,5,.96);
  display:flex; align-items:center; justify-content:center;
  padding:70px 20px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease;
}
.video-lightbox.open{ opacity:1; visibility:visible; }
.video-lightbox-inner{
  max-width:420px; width:100%; text-align:center;
  transform:scale(.9) translateY(10px);
  opacity:0;
  transition:transform .45s cubic-bezier(.19,1,.22,1), opacity .35s ease;
}
.video-lightbox.open .video-lightbox-inner{ transform:scale(1) translateY(0); opacity:1; }
/* Format large pour les extraits filmés à l'horizontale (cf. .reel-card.wide) */
.video-lightbox-inner.is-wide{ max-width:900px; }
.video-lightbox-player{
  width:100%; max-height:82vh; border-radius:16px; display:block;
  box-shadow:0 30px 80px rgba(0,0,0,.6); background:#000;
}
.video-lightbox-caption{ color:var(--dark-ink); font-size:.94rem; font-weight:600; margin-top:20px; }
.video-lightbox-close{
  position:fixed; top:22px; right:22px; border-radius:50%; cursor:pointer;
  width:44px; height:44px; font-size:1.2rem;
  background:rgba(255,255,255,.06); border:1px solid var(--dark-line); color:var(--dark-ink);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.video-lightbox-close:hover{ background:rgba(255,255,255,.16); border-color:var(--accent-on-dark); }
@media(max-width:640px){
  .video-lightbox{ padding:50px 14px; }
  .video-lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
}
@media (prefers-reduced-motion: reduce){
  .video-lightbox, .video-lightbox-inner{ transition:opacity .01s linear; transform:none; }
}

/* =========================================================
   CAROUSEL PHOTOS (page d'accueil + page Galerie)
   Un défilement automatique de vraies photos du club, pour donner
   une impression de vie/mouvement sans dépendre de vidéo.
   ========================================================= */
.photo-carousel{
  /* 16/9 plutôt que 21/9 : format bien plus tolérant pour des photos
     carrées/portrait — évite de couper les têtes en rognant trop de hauteur. */
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:16/9; border:1px solid var(--dark-line);
}
.photo-carousel-track{
  display:flex; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1);
  touch-action:pan-y;
}
.photo-carousel-slide{ flex:0 0 100%; height:100%; }
.photo-carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  background:rgba(26,23,18,.45); color:var(--accent-on-dark);
  border:1.5px solid var(--accent-on-dark); font-size:.85rem;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px); transition:background .2s ease, color .2s ease;
}
.photo-carousel-arrow:hover{ background:var(--accent-on-dark); color:var(--ink); }
.photo-carousel-arrow.prev{ left:16px; }
.photo-carousel-arrow.next{ right:16px; }
.photo-carousel-dots{
  position:absolute; left:0; right:0; bottom:16px; z-index:2;
  display:flex; justify-content:center; gap:7px;
}
.photo-carousel-dots button{
  width:7px; height:7px; border-radius:50%; padding:0; cursor:pointer;
  background:transparent; border:1.5px solid var(--accent-on-dark);
  opacity:.65; transition:background .2s ease, width .2s ease, opacity .2s ease;
}
.photo-carousel-dots button.active{
  background:var(--accent-on-dark); width:20px; border-radius:4px; opacity:1;
}
@media(max-width:600px){
  .photo-carousel{ aspect-ratio:4/5; border-radius:var(--radius); }
  .photo-carousel-arrow{ width:36px; height:36px; }
}
@media (prefers-reduced-motion: reduce){
  .photo-carousel-track{ transition:none; }
}

/* =========================================================
   ACCORDÉON (page Contact — FAQ)
   ========================================================= */
.accordion{ max-width:760px; margin:0 auto; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  font-family:var(--font); font-size:1rem; font-weight:600; color:var(--ink);
  padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.acc-q .plus{ font-size:1.3rem; font-weight:400; color:var(--accent); transition:transform .25s ease; flex:none; }
.acc-item.open .acc-q .plus{ transform:rotate(45deg); }
/* Ouverture/fermeture en pur CSS (grille 0fr → 1fr) plutôt qu'en animant
   max-height en JS : on évite les lectures de scrollHeight (forced reflow)
   et la propriété animée reste gérée plus efficacement par le navigateur. */
.acc-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.acc-item.open .acc-a{ grid-template-rows:1fr; }
.acc-a-inner{ overflow:hidden; min-height:0; }
.acc-a-inner p{ padding:0 4px 22px; color:var(--ink-soft); max-width:600px; }

/* ---------- TABLEAU DES TAILLES (FAQ kimono) ---------- */
.size-table-wrap{ overflow-x:auto; padding:0 4px; }
.size-table{ border-collapse:collapse; width:100%; max-width:520px; font-size:.92rem; }
.size-table th, .size-table td{ padding:10px 14px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
.size-table th{ font-weight:700; color:var(--ink); font-size:.82rem; text-transform:uppercase; letter-spacing:.03em; }
.size-table td:first-child{ font-weight:700; color:var(--accent); }
.size-table tbody tr:last-child td{ border-bottom:none; }

/* =========================================================
   FORMULAIRE (page Contact)
   ========================================================= */
.form-grid{ display:grid; gap:20px; max-width:640px; margin:0 auto; }
.form-row{ display:grid; gap:20px; }
@media(min-width:600px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:.86rem; font-weight:600; margin-bottom:8px; }
.field input, .field textarea, .field select{
  width:100%; font-family:var(--font); font-size:1rem; /* ≥16px : évite le zoom auto sur iPhone au focus */
  min-height:50px;
  padding:13px 16px; border-radius:12px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-optional{ font-weight:500; color:var(--ink-soft); text-transform:none; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:4px; }
/* Champ piège anti-robot (Web3Forms) : invisible pour un humain, toujours
   présent dans le DOM et jamais display:none (certains bots ignorent les
   champs display:none, pas le hors-écran). */
.hidden-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ---------- Carte formulaire + résultats succès/erreur (page Contact) ---------- */
.form-card{ max-width:640px; margin:0 auto; }
.form-result{
  max-width:520px; margin:0 auto; text-align:center;
  padding:48px 28px; border:1px solid var(--line); border-radius:var(--radius-lg);
}
.form-result-icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; font-weight:800;
  background:var(--accent-soft); color:var(--accent);
}
.form-result-error .form-result-icon{ background:rgba(179,38,30,.1); color:#b3261e; }
.form-result h3{ font-size:1.3rem; margin:0 0 10px; }
.form-result p{ color:var(--ink-soft); margin:0 0 26px; }
.form-result-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.form-result-error{ margin-top:24px; border-color:rgba(179,38,30,.3); }

/* ---------- Bloc "contact direct" simplifié (page Contact) ---------- */
.contact-simple{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:2px; }
.contact-simple-row{
  display:flex; align-items:center; gap:16px;
  padding:16px 18px; border-radius:14px;
  color:var(--ink); transition:background .18s ease;
}
.contact-simple-row:hover{ background:var(--bg); }
.contact-simple-row .cs-icon{ font-size:1.3rem; flex:none; width:36px; text-align:center; display:inline-block; animation:iconBreatheScale 1.8s ease-in-out infinite; }
.contact-simple-row:nth-child(2) .cs-icon{ animation-delay:.25s; }
.contact-simple-row:nth-child(3) .cs-icon{ animation-delay:.5s; }
@keyframes iconBreatheScale{
  0%, 100%{ transform:scale(1) rotate(0deg); }
  50%{ transform:scale(1.35) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .contact-simple-row .cs-icon{ animation:none; } }
.contact-simple-row .cs-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.contact-simple-row .cs-label{ font-size:.78rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; }
.contact-simple-row .cs-value{ font-weight:600; overflow-wrap:anywhere; word-break:break-word; }

.contact-reassurance{ font-size:.94rem; color:var(--ink-soft); margin-top:14px; }

/* ---------- Badge "note Google" (réassurance sociale réelle et vérifiable) ---------- */
.google-rating{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; font-weight:700; color:var(--ink);
  padding:8px 16px; border:1px solid var(--line); border-radius:var(--radius-pill);
  margin:14px 0 22px; background:var(--bg);
  transition:border-color .18s ease, transform .18s ease;
}
.google-rating:hover{ border-color:var(--ink); transform:translateY(-1px); }
.google-rating-star{ color:#e8a13a; font-size:1rem; }
.google-rating-sep{ color:var(--ink-soft); font-weight:400; }
/* Sur le hero de la page Contact (texte centré), le badge doit aussi être centré */
.contact-hero .google-rating{ margin-left:auto; margin-right:auto; }

/* ---------- "Ton premier cours" — 5 étapes (page Contact) ---------- */
.steps-five{
  display:grid; grid-template-columns:1fr; gap:36px;
  max-width:920px; margin:0 auto; padding:0; list-style:none;
}
@media(min-width:860px){ .steps-five{ grid-template-columns:repeat(5,1fr); gap:24px; } }
.step-item{ text-align:left; }
@media(min-width:860px){ .step-item{ text-align:center; } }
.step-item .step-num{
  display:block; font-family:var(--font-head); font-style:italic; font-weight:700;
  font-size:1.9rem; color:var(--accent); margin-bottom:10px; line-height:1;
}
.step-item h3{ font-size:1.05rem; margin:0 0 6px; }
.step-item p{ color:var(--ink-soft); font-size:.92rem; margin:0; }

/* ---------- Réassurance sobre autour du formulaire (page Contact) ---------- */
.reassurance-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
  list-style:none; padding:0; margin:0 auto 40px; max-width:640px;
}
.reassurance-strip li{
  font-size:.86rem; font-weight:600; color:var(--ink-soft);
  padding:9px 16px; border:1px solid var(--line); border-radius:var(--radius-pill);
  background:var(--bg);
}
.reassurance-strip li strong{ color:var(--accent); font-weight:800; }
.form-status{ font-size:.92rem; font-weight:600; margin-top:6px; display:none; }
.form-status.show{ display:block; }
.form-status.is-error{ color:#b3261e; }
.form-grid button[type="submit"]:disabled{ opacity:.7; cursor:default; }

.contact-info{
  display:grid; gap:26px; grid-template-columns:1fr; max-width:900px; margin:0 auto 70px;
  text-align:center;
}
@media(min-width:700px){ .contact-info{ grid-template-columns:repeat(3,1fr); } }
.contact-info .item .label{ font-size:.78rem; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.contact-info .item .value{ font-weight:600; font-size:1.05rem; }
.contact-info .item .sub{ color:var(--ink-soft); font-size:.9rem; margin-top:4px; }

.map-placeholder{
  max-width:1000px; margin:60px auto 0; aspect-ratio:16/6; border-radius:var(--radius);
  background:linear-gradient(155deg,#222423,#0c0f0d);
  display:flex; align-items:center; justify-content:center; color:var(--dark-ink-soft);
  font-size:.9rem; font-weight:500; text-align:center; padding:20px;
}

@media(max-width:600px){
  .section{ padding:64px 0; }
  .info-box{ padding:30px; }

  /* Header : le logo et le bouton menu respirent un peu plus, ne sont plus
     collés au bord de l'écran. */
  .nav-row{ padding:20px 4px; position:relative; justify-content:flex-end; }

  /* Sur téléphone, le logo + "Invictus" passent au centre du header (au lieu
     d'être collés à gauche) : on le sort du flux flex et on le recentre, le
     bouton menu reste à droite, seul dans le flux normal. */
  .nav-row .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }

  /* Hero d'accueil : sur petit écran le titre en Playfair (gras, serif)
     prenait tout l'écran à lui seul et repoussait la photo très bas.
     On réduit sa taille et les marges pour que le visiteur voie du texte
     ET une photo dès le premier écran, sans scroller dans le vide. */
  .hero{ padding:118px 0 44px; }
  .hero-split{ gap:28px; }
  .hero-badges{ font-size:.68rem; gap:8px 14px; margin-bottom:18px; flex-wrap:wrap; }
  .hero h1{ font-size:2rem; line-height:1.16; margin-bottom:14px; }
  .hero p.lede{ font-size:1rem; margin-bottom:22px; }
  .hero-ctas{ gap:14px; row-gap:12px; }
  .hero-ctas .btn-dark, .hero-ctas .btn-accent{ padding:13px 24px; font-size:.96rem; }

  /* Page-hero (sous-pages) : même logique, un peu moins de vide en haut/bas */
  .page-hero{ padding:118px 0 46px; }
  .page-hero h1{ font-size:1.8rem; }
  .page-hero p{ font-size:1rem; }

  /* Hero conversion de la page Contact : garde un H1 volontairement plus
     grand (38-46px) que les autres pages secondaires — c'est la seule
     chose que l'écran doit montrer avant même le bouton. */
  .contact-hero{ padding:112px 0 40px; }
  .contact-hero h1{ font-size:clamp(2.375rem, 5vw + 1rem, 2.875rem); line-height:1.08; }
  .contact-hero-sub{ font-size:1.02rem; }

  /* Bloc stats (Réassurance) : les 4 chiffres empilés respiraient trop,
     on resserre pour que ça ne ressemble pas à 4 écrans séparés */
  .stat-row{ gap:26px; margin-top:40px; }

  /* Boutons pleine largeur sur mobile : plus faciles à toucher, look plus net */
  .hero-ctas .btn{ width:100%; justify-content:center; }
  .hero-ctas{ flex-direction:column; align-items:stretch; }
  .hero-ctas .btn-ghost{ text-align:center; padding:6px 0; }

  /* Chips de segments (Enfants/Ados/Adultes/Compétition) : en flex-wrap centré,
     4 boutons de largeurs différentes retombaient en 2+1+1 très inégal, façon
     "entassé". En grille 2×2 pleine largeur, les 4 boutons s'alignent proprement,
     sont plus faciles à toucher, et le résultat est plus lisible. */
  .segment-chips{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
  .segment-chip{ padding:12px 10px; }

  /* Contact rapide (Appeler / WhatsApp / Email) : même souci de flex-wrap
     inégal. On passe en une seule colonne pleine largeur : chaque option est
     bien visible, bien séparée, et plus facile à toucher qu'une pastille
     compacte au milieu d'une ligne. */
  .quick-contact{ display:grid; grid-template-columns:1fr; gap:12px; }
  .qc-card{ justify-content:center; padding:16px 20px; }

  /* Coordonnées (adresse / téléphone / email) : du texte simplement empilé
     donnait une impression de liste tassée. Chaque bloc devient une petite
     carte avec sa propre bordure et son espace — plus structuré, plus clair. */
  .contact-info{ gap:16px; }
  .contact-info .item{
    border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px;
  }

  /* Équipe de coachs : les photos + noms flottaient sans limite visuelle claire
     entre deux cartes voisines. Un cadre discret transforme chaque coach en
     vraie "carte", avec sa propre respiration — plus net, moins entassé. */
  .team-card{
    background:rgba(247,241,228,.03); border:1px solid var(--dark-line);
    border-radius:var(--radius); padding:16px 12px 20px;
  }
  .team-card-photo{ margin-bottom:14px; }
  .team-grid{ gap:14px; }

  /* Rythme entre sections : un peu plus d'air pour que chaque bloc se lise
     comme une étape à part, pas comme la suite du précédent. */
  .section{ padding:72px 0; }
  .section .eyebrow{ margin-bottom:18px; }

  /* Bouton d'envoi du formulaire : pleine largeur, plus facile à toucher */
  .form-grid button[type="submit"]{ width:100%; justify-content:center; }
}