/* ============================================================
   KRAKENCORE.RNG — PAGE FORMATIONS
   Charte : descente océanique (bleu en surface → abysse en bas)
   Mobile-first. Points de rupture : 641px+ / 1001px+
   ============================================================ */

:root{
  /* Couleurs de charte */
  --abysse:#0c1a1a;
  --bleu:#38b6e8;
  --bleu-60:#1776ad;
  --bleu-120:#0f5f8c;
  --bleu-200:#0b4a6e;
  --bleu-400:#093a57;
  --bleu-500:#08324b;
  --aqua:#3de8c0;
  --sarcelle:#2bb6b0;
  --sarcelle-fonce:#0c8074;
  --blanc:#ffffff;
  --blanc-casse:#eaf1f0;
  --gris-filet:#cfe4ec;

  /* Filets et voiles */
  --filet-clair:rgba(12,128,116,.25);
  --filet-sombre:rgba(255,255,255,.2);
  --voile-blanc:rgba(255,255,255,.06);

  /* Typographie — Boska (titres) + Satoshi (corps), chargées depuis Fontshare. */
  --font-display:"Boska",Georgia,"Times New Roman",serif;
  --font-body:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* Rayons */
  --r-chip:8px;
  --r-tile:10px;
  --r-btn:12px;
  --r-step:14px;
  --r-card:16px;
  --r-shell:24px;

  /* Rythme */
  --shell:1440px;
  --gutter:clamp(16px,4vw,24px);
  --nav-h:68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--abysse);color:var(--abysse);
  font-family:var(--font-body);font-size:16px;line-height:1.6;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3{font-family:var(--font-display);margin:0}
p{margin:0}
a{color:inherit}
a:hover{color:inherit}
em{font-style:italic;font-weight:700}
s{opacity:.6}
::selection{background:var(--aqua);color:var(--abysse)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px}

/* Le voile de texture corail a ete retire : la variable --corail pointait
   vers /images/corail-texture.png, fichier jamais fourni (404 a chaque
   chargement, aucun rendu). position:relative est conserve : des enfants
   positionnes en absolu s'y referent. */
.offer,.module,.trainer__card,.testi--white{position:relative}

/* --- Apparition au défilement ------------------------------- */
[data-reveal]{opacity:0;transform:translateY(12px)}
[data-reveal].is-in{opacity:1;transform:none;transition:opacity 450ms ease-out,transform 450ms ease-out}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* --- Ambiance de fond : plancton + creatures derivantes -----
   Les noeuds sont generes par formations.js au chargement.
   [data-atmo] reste en z-index 0, le script pousse le contenu de
   section en z-index 1 : l'ambiance est toujours derriere. */
[data-atmo]{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
[data-mote]{position:absolute;border-radius:50%;opacity:var(--o)}
[data-creature]{position:absolute;max-width:none;pointer-events:none;mix-blend-mode:screen}
@supports not (mix-blend-mode:screen){[data-creature]{mix-blend-mode:lighten}}
@keyframes mote{50%{transform:translate(var(--mx,0px),var(--my,-10px))}}
@keyframes tw{0%,100%{opacity:var(--o)}50%{opacity:calc(var(--o) * .4)}}
@keyframes ray{0%,100%{transform:translateX(-16px)}50%{transform:translateX(16px)}}
/* sections hors ecran : animations en pause (perf) */
[data-caustics][data-vis="0"] [data-atmo] *{animation-play-state:paused}
/* mouvement reduit : le champ reste visible mais fige */
@media (prefers-reduced-motion: reduce){[data-atmo] *{animation:none!important}}

/* --- Conteneur --------------------------------------------- */
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

/* --- Puce de profondeur ------------------------------------ */
.chip{
  display:inline-flex;align-items:center;height:28px;padding:0 10px;
  border-radius:var(--r-chip);background:var(--abysse);color:var(--aqua);
  font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
}
.chip--aqua{background:var(--aqua);color:var(--abysse)}
.chip--white{background:var(--blanc);color:var(--abysse)}
.chip--outline{background:var(--abysse);border:1px solid rgba(61,232,192,.35)}
.chip--ghost{background:var(--abysse);border:1px solid var(--aqua)}
.eyebrow{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}

/* --- Boutons ----------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 24px;border-radius:var(--r-btn);
  font-weight:600;text-decoration:none;transition:transform .2s,background .2s,color .2s;
}
.btn--dark{background:var(--abysse);color:var(--aqua)}
.btn--dark:hover{transform:translateY(-2px);color:var(--aqua)}
.btn--aqua{background:var(--aqua);color:var(--abysse)}
.btn--aqua:hover{background:var(--blanc);color:var(--abysse)}
.btn--outline-dark{border:2px solid var(--abysse);color:var(--abysse);padding:0 22px}
.btn--outline-dark:hover{background:var(--abysse);color:var(--aqua)}
.btn--sm{min-height:44px;padding:0 20px;font-size:.92rem}
.link-arrow{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--sarcelle-fonce);font-weight:600;text-decoration:none;
}
.link-arrow:hover{color:var(--abysse)}

/* --- Marche de section (HUD) ------------------------------- */
.step-tab{position:absolute;top:-30px;height:31px;width:60%}
.step-tab--left{left:0;border-top-right-radius:18px}
.step-tab--right{right:0;border-top-left-radius:18px}

/* --- Jauge de difficulté ----------------------------------- */
.gauge{display:inline-flex;align-items:flex-end;gap:3px;height:16px}
.gauge i{width:5px;border-radius:1px;background:var(--sarcelle-fonce);display:block}
.gauge i:nth-child(1){height:8px}
.gauge i:nth-child(2){height:12px}
.gauge i:nth-child(3){height:16px}
.gauge--1 i:nth-child(2),.gauge--1 i:nth-child(3),
.gauge--2 i:nth-child(3){background:rgba(12,128,116,.2)}
.gauge--dark i{background:var(--abysse)}
.gauge--dark.gauge--1 i:nth-child(2),.gauge--dark.gauge--1 i:nth-child(3){background:rgba(12,26,26,.2)}
.gauge--light i{background:var(--aqua)}
.gauge--light.gauge--1 i:nth-child(2),.gauge--light.gauge--1 i:nth-child(3),
.gauge--light.gauge--2 i:nth-child(3){background:rgba(255,255,255,.25)}
.level-tag{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:600;color:var(--sarcelle-fonce)}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:sticky;top:0;z-index:60;background:var(--abysse);height:var(--nav-h)}
.nav__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:2px;text-decoration:none;flex-shrink:0}
.logo img{height:42px;width:auto;display:block}
.logo__text{display:flex;flex-direction:column;justify-content:center}
.logo__name{font-family:var(--font-display);font-weight:800;font-size:1.22rem;line-height:1.05;letter-spacing:.02em;color:var(--blanc)}
.logo__name span{color:var(--sarcelle)}
.logo__by{font-weight:600;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--aqua);margin-top:3px}
.nav__links,.nav__cta{display:none}
.nav__link{color:rgba(234,241,240,.8);text-decoration:none;font-weight:500;font-size:.95rem;padding:12px 0}
.nav__link:hover{color:var(--blanc)}
.nav__link--active{color:var(--bleu);border-bottom:3px solid var(--bleu)}
.burger{
  width:48px;height:48px;border-radius:var(--r-btn);border:2px solid rgba(234,241,240,.25);
  background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
}
.burger i{width:20px;height:2px;border-radius:2px;background:var(--blanc-casse);display:block}
.menu{
  position:absolute;top:var(--nav-h);left:0;right:0;background:var(--abysse);
  border-top:1px solid rgba(234,241,240,.12);padding:12px var(--gutter) 24px;
  display:flex;flex-direction:column;gap:2px;
}
.menu[hidden]{display:none}
.menu a{display:flex;align-items:center;min-height:48px;color:var(--blanc-casse);text-decoration:none;font-weight:500}
.menu a.is-current{color:var(--bleu);font-weight:600;gap:10px}
.menu a.is-current::before{content:"";width:3px;height:20px;background:var(--bleu);border-radius:2px}
.menu .btn{margin-top:12px}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;background:var(--bleu);padding:clamp(40px,7vw,88px) 0 0}
.hero__ghost{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero__ghost span{
  position:absolute;top:-.12em;left:-.06em;font-family:var(--font-display);font-weight:800;
  font-size:clamp(6rem,19vw,17rem);line-height:1;color:var(--abysse);opacity:.07;white-space:nowrap;letter-spacing:-.02em;
}
.hero__grid{position:relative;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.hero__copy{flex:1.25 1 500px;min-width:0}
.hero__flags{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:24px}
.hero h1{
  margin-bottom:24px;font-weight:800;font-size:clamp(2.6rem,6vw,4.8rem);
  line-height:1.04;letter-spacing:-.015em;text-wrap:balance;
}
.hero h1 em{
  display:inline-block;color:var(--sarcelle-fonce);background:var(--blanc);
  border-radius:var(--r-step);padding:0 .22em .04em;line-height:1.15;
}
.hero__lede{margin-bottom:32px;font-size:1.08rem;line-height:1.65;max-width:34em;text-wrap:pretty}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__media{flex:1 1 400px;min-width:0;display:flex;justify-content:center}
.hero__stack{position:relative;width:100%;max-width:440px;margin:14px 0 0 14px}
.hero__outline{position:absolute;left:-14px;top:14px;right:14px;bottom:-14px;border:2px solid var(--abysse);border-radius:var(--r-card)}
.hero__frame{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/5;background:var(--bleu-400)}
.hero__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block;transform:scale(1.03)}
.hero__badge{
  position:absolute;left:-18px;bottom:36px;background:var(--aqua);border-radius:var(--r-step);
  padding:14px 18px;box-shadow:0 14px 34px rgba(9,58,87,.35);
}
.hero__badge b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.9rem;line-height:1}
.hero__badge span{display:block;font-size:.82rem;font-weight:500;margin-top:4px}

@media (prefers-reduced-motion: no-preference){
  .hero__frame img{animation:derive 4s ease-in-out infinite alternate}
}
@keyframes derive{
  from{transform:scale(1.03) translateY(-6px)}
  to{transform:scale(1.03) translateY(6px)}
}

/* --- Bandeau chiffres -------------------------------------- */
.stats-rail{position:relative;transform:translateY(50%)}
.stats{
  display:flex;flex-wrap:wrap;gap:1px;background:var(--gris-filet);
  border-radius:var(--r-card);overflow:hidden;box-shadow:0 20px 50px rgba(15,95,140,.28);
}
.stats__pair{flex:1 1 280px;display:flex;gap:1px}
.stat{
  flex:1;background:var(--blanc);padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.stat b{font-family:var(--font-display);font-weight:800;font-size:2.3rem;line-height:1}
.stat span{margin-top:6px;font-size:.88rem;font-weight:600;color:var(--sarcelle-fonce);line-height:1.35}

/* ============================================================
   FORMATS — cartes offre
   ============================================================ */
.formats{background:var(--bleu);padding:clamp(76px,9vw,104px) 0 clamp(88px,10vw,128px)}
.formats__head{display:flex;flex-wrap:wrap-reverse;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.formats__head-left{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.formats__head h2{
  font-weight:800;font-size:clamp(2.2rem,5.4vw,4.2rem);line-height:1;
  text-transform:uppercase;text-align:right;letter-spacing:-.01em;margin-left:auto;
}
.under{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;color:var(--abysse);font-weight:600;display:inline-flex;align-items:center;min-height:44px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px}
.offer{
  background:var(--blanc);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 10px 30px rgba(9,58,87,.18);transition:transform .3s ease-out,box-shadow .3s;
}
.offer:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(9,58,87,.28)}
.offer__media{aspect-ratio:4/3;overflow:hidden}
.offer__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease-out}
.offer:hover .offer__media img{transform:scale(1.03)}
.offer__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.offer__meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.offer h3{margin-top:4px;font-weight:700;font-size:1.5rem;line-height:1.15}
.offer p{font-size:.97rem;text-wrap:pretty;flex:1}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--r-chip);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.tag--aqua{background:var(--aqua);color:var(--abysse)}
.tag--teal{background:var(--sarcelle);color:var(--abysse)}
.tag--dark{background:var(--abysse);color:var(--aqua)}
.price-hint{font-weight:700;color:var(--sarcelle-fonce);font-size:.95rem}

/* ============================================================
   PARCOURS IA VIDÉO
   ============================================================ */
.parcours{position:relative;scroll-margin-top:var(--nav-h);background:var(--bleu-60);color:var(--blanc);padding:clamp(56px,8vw,96px) 0 clamp(64px,8vw,96px)}
.parcours .step-tab{background:var(--bleu-60)}
.hud{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--filet-sombre);margin-bottom:28px;color:var(--aqua);
}
.hud__dashes{display:inline-flex;gap:4px;flex-shrink:0}
.hud__dashes i{height:6px;border-radius:2px;background:var(--aqua);display:block}
.hud__dashes i:nth-child(1){width:22px}
.hud__dashes i:nth-child(2){width:8px}
.hud__dashes i:nth-child(3){width:8px;opacity:.5}
.filmstrip{position:relative;margin-bottom:56px}
.filmstrip__frame{border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9;max-height:520px;width:100%}
.filmstrip__frame img{width:100%;height:100%;object-fit:cover;display:block}
.bracket{position:absolute;width:48px;height:48px}
.bracket--tl{top:-8px;left:-8px;border-top:3px solid var(--aqua);border-left:3px solid var(--aqua);border-top-left-radius:12px}
.bracket--br{bottom:-8px;right:-8px;border-bottom:3px solid var(--aqua);border-right:3px solid var(--aqua);border-bottom-right-radius:12px}
.parcours__intro{display:flex;flex-wrap:wrap;gap:48px;margin-bottom:56px}
.parcours__text{flex:1 1 420px;min-width:0}
.parcours__text h2{margin:18px 0 20px;font-weight:800;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.05}
.parcours__text h2 em{color:var(--aqua)}
.parcours__text p{color:var(--blanc-casse);font-size:1.02rem;line-height:1.7;max-width:36em;text-wrap:pretty}
.parcours__prices{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}

/* carte niveau */
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.level{border-radius:var(--r-card);padding:22px}
.level--aqua{background:var(--aqua);color:var(--abysse)}
.level--white{background:var(--blanc);color:var(--abysse)}
.level--white .eyebrow{color:var(--sarcelle-fonce)}
.level__price{font-family:var(--font-display);font-weight:800;font-size:2rem;line-height:1.1;margin:10px 0 14px}
.level__list{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.level__list div{display:flex;gap:10px;align-items:baseline}
.level__list i{width:10px;height:3px;border-radius:2px;background:currentColor;flex-shrink:0;transform:translateY(-3px);display:block}
.level--white .level__list i{background:var(--sarcelle-fonce)}

/* barre pack */
.pack{
  background:var(--abysse);border-radius:var(--r-card);padding:18px 22px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;
}
.pack .eyebrow{color:var(--blanc-casse)}
.pack__price{display:flex;align-items:baseline;gap:12px}
.pack__price b{font-family:var(--font-display);font-weight:800;font-size:1.8rem;color:var(--aqua);line-height:1}
.pack__price s{color:var(--blanc-casse);font-size:1rem}

/* légende difficulté */
.difficulty{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:48px}
.difficulty .eyebrow{color:var(--aqua)}
.difficulty span.key{display:flex;align-items:center;gap:10px;color:var(--blanc-casse);font-size:.92rem}

/* en-tête de niveau */
.level-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.level-head b{font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--blanc)}
.level-head i{flex:1;height:1px;background:rgba(255,255,255,.3);display:block}

/* carte module */
.module-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px;align-items:start}
.module{
  background:var(--blanc);color:var(--abysse);border-radius:var(--r-card);padding:24px;
  display:flex;flex-direction:column;overflow:hidden;transition:transform .3s ease-out;
}
.module:hover{transform:translateY(-4px)}
.module__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.module__n{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--sarcelle-fonce)}
.module h3{margin-bottom:6px;font-weight:700;font-size:1.35rem;line-height:1.2}
.module__sub{font-weight:600;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sarcelle-fonce);margin-bottom:12px}
.module p{margin-bottom:18px;font-size:.95rem;line-height:1.6;text-wrap:pretty}
.module__out{border-top:1px solid var(--filet-clair);padding-top:12px}
.module__out b{display:block;font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sarcelle-fonce);margin-bottom:4px}
.module__out span{font-size:.92rem;font-weight:500;line-height:1.5}
.result{background:var(--aqua);color:var(--abysse);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column}
.result__top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.result__top b{font-family:var(--font-display);font-weight:800;font-size:2.6rem;line-height:1}
.result h3{margin-bottom:12px;font-weight:700;font-size:1.35rem;line-height:1.2}
.result p{margin-bottom:18px;font-size:.95rem;line-height:1.6;text-wrap:pretty}
.result__foot{border-top:1px solid rgba(12,26,26,.25);padding-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.result__foot b{font-family:var(--font-display);font-weight:800;font-size:1.5rem}

/* options */
.option-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.option{border:2px solid rgba(255,255,255,.35);border-radius:var(--r-card);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.option h3{font-weight:700;font-size:1.25rem;color:var(--blanc)}
.option p{color:var(--blanc-casse);font-size:.95rem}
.option b{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--aqua)}

/* ============================================================
   FORMATEUR
   ============================================================ */
.trainer{background:var(--bleu-60);padding:0 0 clamp(88px,10vw,128px)}
.trainer__card{
  background:var(--blanc);border-radius:var(--r-shell);overflow:hidden;padding:clamp(20px,4vw,48px);
  display:flex;flex-wrap:wrap-reverse;gap:clamp(28px,4vw,56px);align-items:stretch;box-shadow:0 24px 60px rgba(9,58,87,.35);
}
.trainer__media{flex:1 1 440px;min-width:0;display:flex}
.trainer__media img{
  width:100%;height:100%;min-height:clamp(260px,32vw,420px);
  object-fit:cover;object-position:50% 35%;border-radius:var(--r-card);display:block;
}
.trainer__body{flex:1 1 440px;min-width:0}
.trainer__body h2{margin:18px 0;font-weight:800;font-size:clamp(2rem,3.8vw,3rem);line-height:1.08;text-wrap:balance}
.trainer__body h2 em{color:var(--sarcelle-fonce)}
.trainer__body p{margin-bottom:16px;font-size:1rem;line-height:1.7;text-wrap:pretty}
.trainer__lead{font-weight:500;margin-bottom:12px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pill{padding:7px 12px;border-radius:var(--r-chip);background:var(--abysse);color:var(--blanc-casse);font-size:.88rem;font-weight:500}
/* 2 colonnes FIXES : les 4 tuiles forment un carre parfait, toutes au meme
   traitement. Colonnes fixes et non auto-fit, qui creerait une piste de plus
   et laisserait une cellule vide. */
.mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:28px}
.mini{background:var(--bleu);color:var(--abysse);border-radius:12px;padding:16px 18px}
.mini b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.18rem;line-height:1.18;margin-bottom:7px}
.mini span{font-size:.98rem;line-height:1.48}
@media (max-width:620px){.mini-grid{grid-template-columns:1fr}}

/* ============================================================
   PARCOURS SPÉCIALISÉS
   ============================================================ */
.specialises{position:relative;scroll-margin-top:var(--nav-h);background:var(--bleu-120);color:var(--blanc);padding:clamp(64px,8vw,104px) 0}
.specialises .step-tab{background:var(--bleu-120)}
.section-intro{max-width:760px;margin-bottom:44px}
.section-intro h2{margin:18px 0;font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02}
.section-intro h2 em{color:var(--aqua)}
.section-intro h2 .caps{text-transform:uppercase}
.section-intro p{color:var(--blanc-casse);font-size:1.05rem;line-height:1.7;text-wrap:pretty}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px;margin-bottom:24px;align-items:start}
.spec{border-radius:var(--r-card);padding:26px;display:flex;flex-direction:column;gap:16px;transition:transform .3s ease-out}
.spec:hover{transform:translateY(-4px)}
.spec--aqua{background:var(--aqua);color:var(--abysse)}
.spec--white{background:var(--blanc);color:var(--abysse)}
.spec__code{
  width:70px;height:70px;border-radius:var(--r-btn);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.8rem;
}
.spec--aqua .spec__code{background:var(--abysse);color:var(--aqua)}
.spec--white .spec__code{background:var(--bleu-60);color:var(--blanc)}
.spec__meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:26px}
.spec h3{font-weight:700;font-size:1.5rem;line-height:1.15}
.spec p{font-size:.95rem;line-height:1.6;text-wrap:pretty}
.spec__foot{padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.spec__foot b{font-family:var(--font-display);font-weight:800;font-size:1.6rem}
.spec__foot span{font-size:.88rem;font-weight:600}
.spec--aqua .spec__foot{border-top:1px solid rgba(12,26,26,.25)}
.spec--white .spec__foot{border-top:1px solid var(--filet-clair)}
.spec--white .spec__foot span{color:var(--sarcelle-fonce)}
.note-bar{background:var(--abysse);border-radius:var(--r-card);padding:18px 22px;color:var(--blanc-casse);font-size:.98rem;line-height:1.6}
.note-bar strong{color:var(--aqua)}

/* ============================================================
   ÉCOLES & GROUPES
   ============================================================ */
.ecoles{scroll-margin-top:var(--nav-h);background:var(--bleu-200);color:var(--blanc);padding:clamp(64px,8vw,104px) 0}
.ecoles__inner{display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px);align-items:center}
.ecoles__copy{flex:1 1 400px;min-width:0}
.ecoles__copy h2{margin:18px 0 20px;font-weight:800;font-size:clamp(2rem,4.2vw,3.3rem);line-height:1.06;text-wrap:balance}
.ecoles__copy h2 em{color:var(--aqua)}
.ecoles__copy p{margin-bottom:14px;color:var(--blanc-casse);font-size:1rem;line-height:1.7;text-wrap:pretty}
.ecoles__copy p:last-of-type{margin-bottom:28px}
.programme{flex:1.2 1 460px;min-width:0;display:flex;flex-direction:column;gap:10px}
.prog__label{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aqua);margin-bottom:-6px}
.prog__label+.prog__label,.prog__row+.prog__label{margin-top:14px}
.prog__row{padding:14px 18px;border-radius:var(--r-btn);color:var(--abysse)}
.prog__row b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.25}
.prog__row span{display:block;font-size:.85rem;line-height:1.45;margin-top:3px}
.prog__row--aqua{background:var(--aqua)}
.prog__row--aqua span{color:var(--abysse)}
.prog__row--white{background:var(--blanc)}
.prog__row--white span{color:var(--sarcelle-fonce)}
.prog__row--blue{background:var(--bleu)}
.prog__row--blue span{color:var(--abysse)}

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.testi-section{position:relative;background:var(--bleu-400);color:var(--blanc);padding:clamp(64px,8vw,104px) 0}
.testi-section .step-tab{background:var(--bleu-400)}
.testi-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px}
.testi-col{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:20px}
.testi{
  position:relative;flex:1 1 auto;min-width:0;border-radius:var(--r-card);
  padding:clamp(22px,2vw,28px);display:flex;flex-direction:column;gap:16px;overflow:hidden;
}
.testi--white{background:var(--blanc);color:var(--abysse)}
.testi--aqua{background:var(--aqua);color:var(--abysse)}
.testi--dark{background:var(--abysse);color:var(--blanc-casse)}
.testi__mark{font-family:var(--font-display);font-weight:800;font-size:3.4rem;line-height:.6;height:28px;color:var(--aqua)}
.testi--aqua .testi__mark{color:rgba(12,26,26,.38)}
.testi__quote{margin:0 0 auto;font-size:1rem;line-height:1.68;text-wrap:pretty}
.stars{display:flex;gap:4px}
.star{
  width:14px;height:14px;background:var(--aqua);display:block;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.testi--aqua .star{background:var(--abysse)}
.testi__foot{display:flex;align-items:center;gap:14px;padding-top:16px;border-top:1px solid var(--filet-clair)}
.testi--aqua .testi__foot{border-top-color:rgba(12,26,26,.22)}
.testi--dark .testi__foot{border-top-color:rgba(234,241,240,.18)}
.avatar{
  width:52px;height:52px;flex-shrink:0;border-radius:50%;background:var(--aqua);color:var(--abysse);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;
}
.avatar--logo{background:var(--blanc);box-shadow:0 0 0 1px rgba(12,128,116,.22)}
.avatar--logo img{object-fit:contain;display:block;width:auto;height:auto}
.avatar--logo img.fit-wide{width:44px;max-height:30px}
.avatar--logo img.fit-square{width:100%;max-height:100%}
.testi__who b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.25}
.testi__who span{display:block;font-size:.88rem;line-height:1.4;margin-top:2px;color:var(--sarcelle-fonce)}
.testi--dark .testi__who b{color:var(--blanc)}
.testi--dark .testi__who span{color:var(--aqua)}
.testi__who{min-width:0}
.testi-dots{display:none}

/* ============================================================
   TARIFS
   ============================================================ */
.tarifs{position:relative;scroll-margin-top:var(--nav-h);background:var(--bleu-500);color:var(--blanc);padding:clamp(64px,8vw,104px) 0 clamp(48px,6vw,72px)}
.tarifs .step-tab{background:var(--bleu-500)}
.tarifs__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:36px}
.tarifs__head h2{font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:1;text-transform:uppercase}
.tarifs__layout{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.price-table{flex:1.9 1 520px;min-width:0;background:var(--blanc);color:var(--abysse);border-radius:var(--r-card);overflow:hidden}
.pt__head{
  display:flex;gap:16px;padding:14px 20px;background:var(--abysse);color:var(--aqua);
  font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
}
.pt__group{padding:10px 20px;background:var(--bleu);color:var(--abysse);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.pt__row{display:flex;gap:16px;align-items:center;padding:14px 20px;background:var(--blanc);border-bottom:1px solid rgba(12,26,26,.08)}
.pt__row--hl{background:var(--aqua)}
.pt__name{flex:1 1 0;min-width:0;font-weight:600;font-size:.95rem}
.pt__content{flex:1.3 1 0;min-width:0;font-size:.9rem;color:var(--sarcelle-fonce)}
.pt__row--hl .pt__content{color:var(--abysse)}
.pt__price{width:160px;flex:0 0 auto;white-space:nowrap;text-align:right;font-family:var(--font-display);font-weight:700;font-size:1.1rem}
.aside-cecile{
  flex:1 1 300px;min-width:0;position:sticky;top:88px;background:var(--abysse);
  border:2px solid var(--sarcelle);border-radius:var(--r-card);padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.aside-cecile .chip{align-self:flex-start}
.aside-cecile h3{font-weight:800;font-size:1.9rem;line-height:1.1;color:var(--blanc)}
.aside-cecile h3 em{color:var(--aqua)}
.aside-cecile p{color:var(--blanc-casse);font-size:.97rem;line-height:1.65}
.aside-cecile__price{display:flex;align-items:baseline;gap:8px}
.aside-cecile__price b{font-family:var(--font-display);font-weight:800;font-size:2.4rem;color:var(--aqua);line-height:1}
.aside-cecile__price span{font-size:.9rem;color:var(--blanc-casse)}

/* ============================================================
   COMMENT ÇA SE PASSE + FAQ
   ============================================================ */
.process{scroll-margin-top:var(--nav-h);background:var(--bleu-500);color:var(--blanc);padding:clamp(48px,6vw,72px) 0 clamp(72px,8vw,104px)}
.process__head{margin-bottom:32px}
.process__head h2{margin-top:18px;font-weight:800;font-size:clamp(2.2rem,5vw,4rem);line-height:1;text-transform:uppercase}
.process__layout{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;margin-bottom:28px}
.steps{flex:2 1 560px;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.step{display:flex;gap:18px;align-items:flex-start;padding:20px;border-radius:var(--r-step);background:var(--voile-blanc);border:1px solid rgba(255,255,255,.14)}
.step__n{
  width:56px;height:56px;flex-shrink:0;border-radius:var(--r-tile);background:var(--bleu);color:var(--abysse);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:1.4rem;
}
.step--last .step__n{background:var(--aqua)}
.step h3{margin:2px 0 6px;font-weight:700;font-size:1.25rem;color:var(--blanc)}
.step p{color:var(--blanc-casse);font-size:.95rem;line-height:1.6}
.vignette{flex:1 1 300px;min-width:0;position:relative;align-self:stretch;display:flex}
.vignette__frame{border-radius:var(--r-card);overflow:hidden;flex:1 1 auto;min-height:340px;width:100%;border:6px solid var(--blanc)}
.vignette__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.cta-bar{
  background:var(--aqua);color:var(--abysse);border-radius:var(--r-card);padding:clamp(22px,3vw,34px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:56px;
}
.cta-bar__title{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1;max-width:18ch}
.cta-bar__actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-bar .btn--dark:hover{color:var(--blanc)}
.cta-bar .btn--outline-dark{word-break:break-all}
.faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:14px;align-items:start}
.faq{background:var(--blanc);color:var(--abysse);border-radius:var(--r-step);overflow:hidden}
.faq__btn{
  width:100%;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:700;font-size:1.08rem;color:var(--abysse);
}
.faq__sign{font-family:var(--font-body);font-size:1.5rem;line-height:1;color:var(--sarcelle-fonce);width:20px;text-align:center;flex-shrink:0}
.faq__panel{margin:0;padding:0 20px 18px;font-size:.96rem;line-height:1.65}
.faq__panel[hidden]{display:none}

/* ============================================================
   DESCENTE + FOOTER
   ============================================================ */
.descent{
  height:160px;background:linear-gradient(180deg,var(--bleu-500) 0%,var(--abysse) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:0 16px;
}
.descent .eyebrow{color:var(--aqua)}
.descent a{
  font-family:var(--font-display);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--blanc);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;
}
.descent a:hover{color:var(--aqua)}
.site-footer{background:var(--abysse);color:var(--blanc-casse);padding:56px 0 28px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:36px;margin-bottom:40px}
.foot-brand{display:flex;align-items:center;gap:2px;margin-bottom:12px}
.foot-brand img{height:52px;width:auto;display:block}
.foot-brand .logo__name{font-size:1.42rem}
.foot-brand .logo__by{font-size:.6rem;margin-top:4px}
.social-label{font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--aqua);margin-bottom:8px}
.social-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.social-row a{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px;
  text-decoration:none;transition:transform .2s,opacity .2s;
}
.social-row a:hover{transform:translateY(-2px);opacity:.85}
.social-row img{width:24px;height:24px;display:block}
.social-row img.wide{width:28px;height:auto}
.foot-note{font-size:.95rem;line-height:1.6}
.foot-col{display:flex;flex-direction:column;gap:2px}
.foot-col .eyebrow{color:var(--aqua);margin-bottom:6px}
.foot-col a{min-height:44px;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--blanc-casse)}
.foot-col a:hover{color:var(--aqua)}
.wa-btn{
  align-self:flex-start;display:inline-flex;align-items:center;gap:10px;min-height:48px;
  padding:0 20px 0 10px;border-radius:24px;background:var(--aqua);color:var(--abysse);
  font-weight:600;text-decoration:none;margin:4px 0 8px;
}
.wa-btn:hover{background:var(--blanc);color:var(--abysse)}
.wa-btn img{width:28px;height:28px;border-radius:var(--r-chip);display:block}
.mail-link{word-break:break-all}
.mail-link svg{width:18px;height:18px;flex-shrink:0}
.foot-bottom{
  border-top:1px solid rgba(234,241,240,.15);padding-top:20px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:10px;font-size:.85rem;opacity:.6;
}

/* ============================================================
   ≤640px — pile mobile, tableau en lignes, carrousel témoignages
   ============================================================ */
@media (max-width:640px){
  /* en space-between, la ligne tag + prix passait a la ligne ou non selon la
     longueur du tag : les trois cartes ne se ressemblaient plus. On empile. */
  .offer__meta{flex-direction:column;align-items:flex-start;gap:8px}
  /* le bandeau chiffres chevauche la section suivante de 50% de SA hauteur.
     Sur telephone les 4 cases passent sur 2 rangees : la hauteur double, le
     chevauchement aussi, et le titre « Trois facons de plonger » passait
     dessous. Chevauchement fixe = independant du nombre de rangees. */
  .stats-rail{transform:translateY(48px)}
  .step-tab{width:60%}
  .formats__head h2{text-align:left;margin-left:0}
  .pt__head .pt__content{display:none}
  .pt__head .pt__name{flex:1 1 auto}
  .pt__head .pt__price{width:auto}
  .pt__row{display:block;padding:12px 16px}
  .pt__row .pt__name{display:inline}
  .pt__row .pt__price{display:block;float:right;width:auto;white-space:nowrap}
  .pt__row .pt__content{display:block;clear:both;margin-top:2px}
  .aside-cecile{position:static}

  /* carrousel témoignages : les colonnes s'effacent, les 3 cartes défilent */
  .testi-layout{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;
  }
  .testi-layout::-webkit-scrollbar{display:none}
  .testi-col{display:contents}
  .testi{flex:0 0 86%;max-width:340px;scroll-snap-align:center}
  .testi-dots{display:flex;justify-content:center;gap:4px;margin-top:8px}
  .testi-dots button{
    width:44px;height:44px;border:0;background:transparent;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
  }
  .testi-dots button i{width:10px;height:10px;border-radius:50%;background:var(--aqua);opacity:.35;display:block;transition:opacity .2s}
  .testi-dots button[aria-current="true"] i{opacity:1}
}

/* ============================================================
   ≥1001px — nav complète, burger masqué
   ============================================================ */
/* Le conteneur elargi a 1440px laisse la place a une piste de plus : auto-fit
   cassait le rythme voulu. On fixe le nombre de colonnes sur grand ecran.
   module-grid : 6 elements -> 3+3 (et non 4+2, qui laissait un vide a droite).
   faq-grid    : 4 elements -> 2+2 (et non 3+1).
   Les grilles a 3 elements (card, spec, option) s'etirent correctement
   toutes seules : auto-fit effondre les pistes vides. */
@media (min-width:1001px){
  .module-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* steps : 4 elements -> 2+2 (et non 3+1, qui laissait « 04 » seul avec
     un grand vide a sa droite). Le bloc 2x2 cale aussi mieux sur la
     hauteur de la vignette voisine. */
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width:1001px){
  .nav__links{display:flex;align-items:center;gap:28px}
  .nav__cta{display:inline-flex}
  .burger{display:none}
  .menu{display:none !important}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* --- Nav partagée : deux rangées sous 740px ------------------
   Les sections à ancre se décalent de --nav-h. La barre partagée
   passe à ~95px en mobile, donc la variable doit suivre, sinon le
   haut de section se cache derrière elle. */
@media (max-width:739px){
  :root{--nav-h:96px}
}