/* ══════════════════════════════════════════════════════════════
   1 ▸ JETONS DE DESIGN — modifiez ici pour changer toute la page
   ══════════════════════════════════════════════════════════════ */
:root{
  /* ─── PALETTE UNIFIÉE : 2 couleurs seulement, bleu marine + or ───
     Changez ces 4 lignes et toute la page suit.                     */
  --blue:       #1E3A8A;   /* BLEU MARINE — couleur principale */
  --blue-d:     #16295F;   /* survol des boutons bleus */
  --red:       #C8102E;   /* rouge britannique : trait du titre + bloc derrière la photo */
  --amber:      #F5A524;   /* OR — accent : étoiles, badges, CTA */
  --amber-d:    #DC8F0C;   /* survol des boutons or */

  --ink:        #0F1D3A;   /* texte principal, pied de page, cartes sombres */
  --ink-2:      #172C55;
  --blue-soft:  #E9EEF9;   /* fonds teintés bleus */
  --blue-line:  #D3DEF2;   /* bordure teintée bleue */
  --amber-soft: #FDF3E2;
  --amber-ink:  #92600A;   /* texte lisible sur fond or clair */

  /* Alias de compatibilité : l'ancien vert/violet renvoie désormais
     vers le bleu marine, pour ne garder que 2 couleurs sur le site. */
  --teal:       var(--blue);
  --teal-soft:  var(--blue-soft);

  --bg:         #F7F9FD;   /* fond de page (reste clair / blanc) */
  --white:      #FFFFFF;
  --slate:      #5A6785;   /* texte secondaire */
  --line:       #E4EAF4;   /* bordures */

  /* Épaisseur et couleur communes à TOUTES les icônes SVG */
  --ico-w:      1.7;

  --display: "Outfit", system-ui, sans-serif;
  --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:40px;
  --maxw:1220px;
  --pad:clamp(1.15rem,4.5vw,3.25rem);
  --ease:cubic-bezier(.22,.68,.32,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sh-sm:0 2px 10px rgba(15,29,58,.045);
  --sh:   0 18px 45px -26px rgba(15,29,58,.28);
  --sh-lg:0 40px 80px -40px rgba(15,29,58,.35);
}

/* ══════════════════════════════════════════════════════════════
   2 ▸ BASE
   ══════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:110px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
figure{margin:0}   /* ⚠ sinon la marge par défaut casse la galerie */
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:600; line-height:1.15; letter-spacing:-.02em}
p{margin:0 0 1em}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid rgba(30,58,138,.45); outline-offset:3px; border-radius:8px}
::selection{background:var(--blue); color:#fff}

/* ⚠ CORRECTIF CLÉ : empêche les grilles de déborder à cause d'un
   élément large (c'était l'origine du décalage de la carte 1 à 1). */
.grid,[class*="grid-"],.courses,.bento,.creds,.gallery,.contact-grid,.counters-grid,.steps,.fields,.footer-grid{min-width:0}
.grid>*,.courses>*,.bento>*,.creds>*,.gallery>*,.contact-grid>*,.counters-grid>*,.steps>*,.fields>*,.footer-grid>*{min-width:0}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.section{padding-block:clamp(4rem,8vw,7.5rem); position:relative}
.soft{background:var(--white)}
.tint{background:linear-gradient(180deg,var(--blue-soft) 0%, var(--bg) 100%)}

h1{font-size:clamp(1.95rem,5.1vw,4rem); font-weight:700; line-height:1.08}
h2{font-size:clamp(1.8rem,3.7vw,2.9rem); font-weight:600}
h3{font-size:clamp(1.1rem,1.8vw,1.32rem)}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.76rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--blue);
  background:var(--blue-soft); padding:.5rem 1rem; border-radius:99px; margin-bottom:1rem;
}
.eyebrow.amber{color:var(--amber-ink); background:var(--amber-soft)}
.lede{font-size:clamp(1rem,1.35vw,1.1rem); color:var(--slate); max-width:58ch}
.sec-head{max-width:680px; margin-bottom:clamp(2.25rem,4.5vw,3.5rem)}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center .lede{margin-inline:auto}
.sec-head p{margin-top:.9rem; margin-bottom:0}

/* ══════════════════════════════════════════════════════════════
   3 ▸ BOUTONS
   ══════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-size:.94rem; font-weight:700;
  padding:1rem 1.65rem; border-radius:99px; border:2px solid transparent; cursor:pointer;
  white-space:nowrap; transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s, color .3s, border-color .3s;
}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 12px 26px -12px rgba(30,58,138,.75)}
.btn-primary:hover{background:var(--blue-d); box-shadow:0 20px 36px -14px rgba(30,58,138,.8)}
.btn-amber{background:var(--amber); color:#3A2503; box-shadow:0 12px 26px -12px rgba(245,165,36,.7)}
.btn-amber:hover{background:var(--amber-d)}
.btn-ghost{background:var(--white); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue)}
.btn-wa{background:#1FA855; color:#fff; box-shadow:0 12px 26px -14px rgba(31,168,85,.8)}
.btn-wa:hover{background:#189449}
.btn .ar{transition:transform .35s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}

/* ══════════════════════════════════════════════════════════════
   4 ▸ BARRE HAUTE + NAVIGATION
   ══════════════════════════════════════════════════════════════ */
.progress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),var(--amber)); z-index:200; transition:width .1s linear}

.topbar{
  background:var(--ink); color:rgba(255,255,255,.72); font-size:.82rem;
  max-height:70px; overflow:hidden; transition:max-height .45s var(--ease), opacity .35s;
}
.topbar-in{display:flex; justify-content:space-between; align-items:center; gap:1rem; padding-block:.55rem; flex-wrap:wrap}
.topbar a{transition:color .25s}
.topbar a:hover{color:#fff}
.topbar .l{display:flex; gap:1.4rem; flex-wrap:wrap}
.topbar .r{display:flex; gap:1.1rem; align-items:center}
.header.scrolled .topbar{max-height:0; opacity:0}

.header{position:fixed; inset:0 0 auto; z-index:150}
.navbar{background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:box-shadow .4s, border-color .4s, padding .4s var(--ease)}
.header.scrolled .navbar{box-shadow:0 10px 30px -22px rgba(15,29,58,.4); border-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:1.25rem; padding-block:.85rem; transition:padding .4s var(--ease)}
.header.scrolled .nav-in{padding-block:.6rem}

.brand{display:flex; align-items:center; gap:.65rem}
.brand-logo{
  width:46px; height:46px; border-radius:14px; flex:none; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(135deg,var(--blue),#2E52B0); color:#fff;
  font-family:var(--display); font-weight:700; font-size:1.15rem; box-shadow:0 10px 20px -10px rgba(30,58,138,.9);
}
/* ⚠ La lettre « B » reste dessous : si images/logo.png est absent ou mal
   nommé, onerror retire l'image et le « B » réapparaît, au lieu d'un
   carré vide qui ne dit rien. */
.brand-logo{position:relative}
.brand-logo img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain}
.brand-txt b{display:block; font-family:var(--display); font-size:1.2rem; font-weight:700; line-height:1}
.brand-txt small{font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; color:var(--slate); font-weight:600}

.nav{display:flex; align-items:center; gap:.1rem}
.nav a.navlink{font-size:.9rem; font-weight:600; color:var(--slate); padding:.6rem .8rem; border-radius:99px; transition:color .3s, background .3s}
.nav a.navlink:hover{color:var(--blue); background:var(--blue-soft)}
.nav a.navlink.active{color:var(--blue); background:var(--blue-soft)}
.lang{display:flex; gap:.15rem; margin-inline:.5rem}
.lang a{font-size:.74rem; font-weight:700; padding:.35rem .5rem; border-radius:8px; color:#95A2BC}
.lang a.on{background:var(--blue); color:#fff}

.burger{display:none; background:var(--blue-soft); border:0; border-radius:14px; width:46px; height:46px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{display:block; width:19px; height:2px; border-radius:2px; background:var(--blue); transition:.35s var(--ease)}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{
  display:none; position:fixed; inset:0; z-index:140; background:var(--white);
  padding:7rem var(--pad) 2.5rem; flex-direction:column; overflow-y:auto;
  clip-path:circle(0% at calc(100% - 46px) 64px); visibility:hidden;
  transition:clip-path .65s var(--ease-out), visibility .65s;
}
.mnav.open{clip-path:circle(160% at calc(100% - 46px) 64px); visibility:visible}
.mnav a{
  font-family:var(--display); font-size:1.5rem; font-weight:600; padding-block:.7rem;
  border-bottom:1px solid var(--line); opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mnav.open a{opacity:1; transform:none}
.mnav .btn{margin-top:1.6rem; width:100%; border-bottom:0}

/* ══════════════════════════════════════════════════════════════
   5 ▸ HÉROS
   ══════════════════════════════════════════════════════════════ */
.hero{position:relative; overflow:hidden; padding-top:clamp(9rem,15vh,12rem); padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero::before{
  content:""; position:absolute; inset:0 0 auto; height:78%;
  background:linear-gradient(170deg,#EAEFFA 0%, rgba(247,249,253,0) 100%);
  border-bottom-left-radius:50% 12%; border-bottom-right-radius:50% 12%;
}
.blob{position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none}
.blob-1{width:440px; height:440px; background:rgba(30,58,138,.22); top:-90px; right:6%; animation:drift1 20s var(--ease) infinite alternate}
.blob-2{width:340px; height:340px; background:rgba(245,165,36,.2); bottom:6%; left:-90px; animation:drift2 24s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate(-70px,60px) scale(1.15)}}
@keyframes drift2{to{transform:translate(80px,-50px) scale(1.12)}}
.hero .wrap{position:relative; z-index:3}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,4.5vw,4rem); align-items:center}

.hero-badge{
  display:inline-flex; align-items:center; gap:.6rem; background:var(--white); border:1px solid var(--line);
  padding:.45rem .95rem .45rem .5rem; border-radius:99px; font-size:.82rem; font-weight:600;
  box-shadow:var(--sh-sm); margin-bottom:1.4rem;
}
.hero-badge .dot{width:24px; height:24px; border-radius:50%; background:var(--teal-soft); color:var(--teal); display:grid; place-items:center; font-size:.7rem}

/* Titre : révélation mot par mot */
.hero h1 .w{display:inline-block; opacity:0; transform:translateY(26px); filter:blur(6px); animation:wordIn .8s var(--ease-out) forwards}
@keyframes wordIn{to{opacity:1; transform:none; filter:blur(0)}}
/* ⚠ CORRECTIF : le trait or passait PAR-DESSUS le mot et coupait les
   jambages (le « q » de britannique). « z-index:0 » sur .hl crée un
   contexte d'empilement, « z-index:-1 » sur le SVG le renvoie DERRIÈRE
   le texte. Le mot reste donc toujours lisible. */
.hero h1 .hl{position:relative; display:inline-block; z-index:0; color:var(--blue); white-space:nowrap}
.hero h1 .hl svg{
  position:absolute; left:-.03em; bottom:-.18em; width:calc(100% + .06em);
  height:.3em; overflow:visible; z-index:-1; pointer-events:none;
}
.hero h1 .hl path{stroke:var(--red); stroke-width:8; fill:none; stroke-linecap:round; stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.1s 1s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.fade-up{opacity:0; animation:wordIn .9s var(--ease-out) forwards}
/* Variante SANS transform : indispensable pour le visuel du héros,
   sinon l'animation écrase la parallaxe appliquée en JS. */
.fade-in{opacity:0; animation:fadeOnly .9s var(--ease-out) forwards}
@keyframes fadeOnly{to{opacity:1}}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}

/* Preuve sociale sous le héros */
.social-proof{display:flex; align-items:center; gap:1.15rem; margin-top:2.2rem; flex-wrap:wrap}
.avatars{display:flex}
.avatars span{
  width:44px; height:44px; border-radius:50%; border:3px solid var(--white); margin-left:-14px;
  display:grid; place-items:center; font-weight:700; font-size:.85rem; color:#fff;
  background:linear-gradient(135deg,var(--blue),#33589E); box-shadow:var(--sh-sm);
}
.avatars span:first-child{margin-left:0}
.avatars span.more{background:var(--amber); color:#3A2503; font-size:.75rem}

/* ┌─ PHOTOS DES AVATARS ────────────────────────────────────────
   La lettre reste EN DESSOUS de la photo : si un fichier manque,
   l'attribut onerror retire l'image et la lettre reprend sa place.
   La photo est recadrée en cercle automatiquement (object-fit).
   Format : carré 120 × 120 px, visage centré, < 20 Ko.
   ─────────────────────────────────────────────────────────── */
.avatars span{position:relative; overflow:hidden}
.avatars span img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:50%;
}
.proof-txt .stars{color:var(--amber); letter-spacing:.12em; font-size:.85rem}
.proof-txt b{font-size:.94rem}
.proof-txt small{display:block; color:var(--slate); font-size:.84rem}

/* Visuel du héros */
.hero-visual{position:relative}
.hero-frame{
  position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:5/6;
  box-shadow:var(--sh-lg); background:var(--white);
}
.hero-frame img{width:100%; height:100%; object-fit:cover}
.hero-visual::before{
  content:""; position:absolute; inset:auto -18px -18px auto; width:62%; height:62%;
  border-radius:var(--r-xl); background:linear-gradient(135deg,var(--red),#E8556A); z-index:-1;
}
.hero-visual::after{
  content:""; position:absolute; inset:-16px auto auto -16px; width:120px; height:120px;
  border-radius:24px; border:3px solid var(--blue); opacity:.25; z-index:-1;
}

/* Cartes flottantes de preuve */
.float-card{
  position:absolute; background:var(--white); border-radius:var(--r); padding:.85rem 1.1rem;
  box-shadow:var(--sh); display:flex; align-items:center; gap:.75rem; z-index:4;
  animation:bob 5s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.float-card .ic{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none; font-size:1.05rem}
.float-card b{display:block; font-size:.95rem; font-family:var(--display); font-weight:700; line-height:1.2}
.float-card small{color:var(--slate); font-size:.75rem}
.fc-1{top:9%; left:-6%; animation-delay:.4s}
.fc-1 .ic{background:var(--blue-soft); color:var(--blue)}
.fc-2{bottom:16%; right:-7%; animation-delay:1.5s}
.fc-2 .ic{background:var(--amber-soft); color:var(--amber-ink)}
.fc-3{bottom:-3%; left:4%; animation-delay:2.4s}
.fc-3 .ic{background:var(--teal-soft); color:var(--teal)}

/* ══════════════════════════════════════════════════════════════
   6 ▸ BANDEAU LOGOS
   ══════════════════════════════════════════════════════════════ */
.logos{background:var(--white); border-block:1px solid var(--line); padding-block:2.2rem; overflow:hidden}
.logos p{text-align:center; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:#95A2BC; font-weight:700; margin-bottom:1.5rem}
.marquee{position:relative; overflow:hidden}
.marquee::before,.marquee::after{content:""; position:absolute; top:0; bottom:0; width:13%; z-index:3; pointer-events:none}
.logos .marquee::before{left:0; background:linear-gradient(to right,var(--white),transparent)}
.logos .marquee::after{right:0; background:linear-gradient(to left,var(--white),transparent)}
/* ⚠ PAS de « gap » ici : avec un gap, translateX(-50%) tombe à un
   demi-espace près du point de bouclage et on voit un micro-saut.
   L'écart est porté par margin-right sur chaque logo -> boucle exacte. */
.mtrack{display:flex; align-items:center; width:max-content; animation:slide var(--mq-dur,40s) linear infinite}

/* Chaque logo dans une boîte de dimensions IDENTIQUES : quelles que
   soient les proportions du fichier, tous occupent le même espace. */
.logos .logo{
  flex:none; display:grid; place-items:center;
  width:clamp(130px,13vw,180px); height:77px;
  margin-right:clamp(2.5rem,5vw,5rem);   /* <- L'ESPACE ENTRE LOGOS */
}
.logos .logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:.5; filter:grayscale(1); transition:opacity .4s var(--ease-out), filter .4s var(--ease-out);
}
.logos .logo:hover img{opacity:1; filter:grayscale(0)}
.marquee:hover .mtrack,.marquee:hover .rtrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════════════════════════
   7 ▸ COMPTEURS
   ══════════════════════════════════════════════════════════════ */
.counters-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem}
.counter{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.75rem 1.35rem; text-align:center; transition:transform .45s var(--ease-out), box-shadow .45s}
.counter:hover{transform:translateY(-6px); box-shadow:var(--sh)}
.counter .ic{width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin:0 auto .9rem; background:var(--blue-soft); font-size:1.3rem}
.counter:nth-child(2) .ic{background:var(--amber-soft)}
.counter:nth-child(3) .ic{background:var(--teal-soft)}
.counter:nth-child(4) .ic{background:var(--amber-soft)}
.counter .n{font-family:var(--display); font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:700; line-height:1; color:var(--ink)}
.counter .l{display:block; font-size:.86rem; color:var(--slate); margin-top:.5rem}

/* ══════════════════════════════════════════════════════════════
   8 ▸ CARTES
   ══════════════════════════════════════════════════════════════ */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.2vw,1.9rem); position:relative;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.card:hover{transform:translateY(-7px); box-shadow:var(--sh); border-color:var(--blue-line)}
.card-ico{
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center; margin-bottom:1.1rem;
  background:var(--blue-soft); font-size:1.4rem; transition:transform .5s var(--ease-out);
}
.card:hover .card-ico{transform:scale(1.08) rotate(-7deg)}
.card p{color:var(--slate); font-size:.95rem; margin-bottom:0}
.card h3{margin-bottom:.5rem}

.bento{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem}
.bento .span2{grid-column:span 2}

/* ══════════════════════════════════════════════════════════════
   9 ▸ EMPLACEMENTS PHOTO (cadres à remplacer par vos images)
   ══════════════════════════════════════════════════════════════ */
.ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:2px dashed var(--blue-line);
  background:linear-gradient(135deg,rgba(30,58,138,.05),rgba(245,165,36,.06)),
             repeating-linear-gradient(45deg,rgba(30,58,138,.03) 0 12px,transparent 12px 24px);
  display:grid; place-items:center; text-align:center; padding:1.25rem; min-height:170px;
  transition:border-color .4s;
}
.ph:hover{border-color:var(--blue)}
.ph::before{content:attr(data-label); font-family:var(--display); font-weight:600; font-size:.95rem; color:#4A5F8F}
.ph::after{
  content:attr(data-size); position:absolute; bottom:.85rem; left:50%; transform:translateX(-50%);
  font-size:.7rem; font-weight:700; letter-spacing:.06em; color:#8492AF;
  background:rgba(255,255,255,.8); padding:.25rem .7rem; border-radius:99px; white-space:nowrap;
}
.ph img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* ⚠ CORRECTIF : « min-height:170px » ne sert qu'au cadre pointillé vide.
   Avec une photo, elle dépasse la hauteur de ligne de la grille
   (grid-auto-rows) : la tuile débordait de 11 px dans l'espacement, et
   les photos paraissaient collées verticalement. */
.ph:has(img){border:0; padding:0; min-height:0}
.ph:has(img)::before,.ph:has(img)::after{display:none}

/* ══════════════════════════════════════════════════════════════
   10 ▸ PROGRAMMES + FILTRES
   ══════════════════════════════════════════════════════════════ */
.filters{display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:2rem}
.filter{
  background:var(--white); border:1.5px solid var(--line); color:var(--slate);
  font-family:var(--body); font-size:.88rem; font-weight:700; padding:.65rem 1.25rem;
  border-radius:99px; cursor:pointer; transition:.35s var(--ease-out);
}
.filter:hover{border-color:var(--blue); color:var(--blue)}
.filter.on{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 10px 22px -12px rgba(30,58,138,.8)}

/* ⚠ « align-items:start » laissait les cartes d'une même rangée à des
   hauteurs différentes : effet en escalier. En « stretch », la liste
   (ul{flex:1}) remplit la carte et la ligne « meta » s'aligne en bas
   sur toute la rangée. */
/* ┌─ POURQUOI FLEX ET PLUS UNE GRILLE À 3 COLONNES ─────────────
   Avec 5 cartes normales, une grille à 3 colonnes donne 3 + 2 et
   laisse forcément un emplacement VIDE en bas à droite — le trou
   déjà signalé une fois. Idem pour chaque filtre : « Anglais
   général » n'a que 2 cartes, « Sur mesure » une seule.
   En flex-wrap, une rangée incomplète est simplement partagée
   entre les cartes qui restent (flex-grow) : plus jamais de trou,
   quel que soit le nombre de cartes affichées.
   Le nombre de cartes par rangée découle de la base de 280 px, ce
   qui reproduit les anciens seuils : 3 sur ordinateur, 2 sur
   tablette, 1 sur téléphone.
   ─────────────────────────────────────────────────────────── */
.courses{display:flex; flex-wrap:wrap; gap:1.15rem; align-items:stretch}
.courses>.course{flex:1 1 280px; min-width:0}
/* ⚠ En flex, « grid-column:1/-1 » ne veut plus rien dire : c'est
   flex-basis:100% qui met une carte sur toute la largeur. */
.courses>.course.wide,.courses>.course.private{flex:1 1 100%}

/* ┌─ UNE CARTE LARGE PASSE SES PUCES EN 2 COLONNES ─────────────
   Quand une rangée ne contient qu'une carte (filtre « Sur mesure »,
   par exemple), flex-grow l'étire sur toute la largeur et ses
   puces feraient des lignes de ~130 caractères, illisibles.
   La requête de conteneur mesure la carte ELLE-MÊME, pas l'écran :
   la règle ne s'applique donc que si la carte est réellement large,
   sans qu'on ait à savoir combien de cartes sont affichées.
   ─────────────────────────────────────────────────────────── */
.courses>.course:not(.private){container-type:inline-size}
@container (min-width:620px){
  .course ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.45rem 2.5rem}
}

/* .wide = carte pleine largeur avec 2 colonnes internes.
   La largeur est posée plus haut (flex:1 1 100%). */
.course.wide .wide-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.6rem 2.5rem; align-items:start;
}
.course.wide ul{border-top:0; padding-top:0}
.course.wide .meta{grid-column:1/-1; margin-top:0}
@media (max-width:860px){
  /* ┌─ SECTIONS MASQUÉES SUR MOBILE ──────────────────────────
     Sur téléphone, la frise « Méthode » en 5 étapes s'empile en
     une longue colonne peu lisible, et le tableau des tarifs fait
     doublon avec le prix désormais affiché sur chaque carte.
     Pour les réafficher : supprimez les deux lignes ci-dessous.
     ─────────────────────────────────────────────────────── */
  #methode,#tarifs{display:none}

  /* ⚠ Les liens du PIED DE PAGE qui mènent à ces deux sections
     doivent disparaître avec elles : un lien d'ancre vers un
     élément en display:none ne fait rien du tout — le visiteur
     tape et rien ne bouge, ce qui se lit comme un bug. */
  .footer li:has(> a[href="#methode"]),
  .footer li:has(> a[href="#tarifs"]){display:none}

  .course.wide .wide-in{grid-template-columns:minmax(0,1fr); gap:1.1rem}
  .course.wide ul{border-top:1px solid var(--line); padding-top:1rem}
}
.course{display:flex; flex-direction:column; overflow:hidden}
.course.hide{display:none}
.course.anim{animation:pop .5s var(--ease-out) both}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(12px)}}
/* ┌─ EN-TÊTE DE CARTE : tag à gauche, prix à droite ────────────
   Le tarif est désormais lisible sur la carte elle-même, ce qui
   permet de masquer le tableau des tarifs sur mobile sans perdre
   l'information.
   ─────────────────────────────────────────────────────────── */
.course-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-bottom:.9rem;
}
.course-head .tag{margin-bottom:0}
.course-price{
  font-family:var(--display); font-weight:700; font-size:1rem;
  color:var(--blue); white-space:nowrap; flex:none;
  font-variant-numeric:tabular-nums;
}

.course .tag{
  align-self:flex-start; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  padding:.4rem .8rem; border-radius:99px; background:var(--blue-soft); color:var(--blue); margin-bottom:.9rem;
}
.course .tag.amber{background:var(--amber-soft); color:var(--amber-ink)}
.course .tag.teal{background:var(--blue-soft); color:var(--blue)}
.course .sub{color:var(--slate); font-size:.93rem; margin:.45rem 0 1.1rem}
/* ⚠ « flex:1 » + « display:grid » : les rangées de la grille s'étiraient
   pour remplir la carte, ce qui espaçait les puces de façon irrégulière
   d'une carte à l'autre. « align-content:start » les garde serrées et
   renvoie l'espace excédentaire en bas. */
.course ul{border-top:1px solid var(--line); padding-top:1rem; flex:1; display:grid; gap:.45rem; align-content:start}
.course li{font-size:.88rem; color:var(--slate); padding-left:1.6rem; position:relative}
.course li::before{
  content:""; position:absolute; left:0; top:.18em; width:18px; height:18px; border-radius:50%;
  background:var(--blue-soft);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E3A8A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m5 12.5 4.5 4.5L19 6.5'/%3e%3c/svg%3e");
  background-repeat:no-repeat; background-position:center; background-size:11px 11px;
}
.course .meta{margin-top:1.15rem; padding-top:.9rem; border-top:1px solid var(--line); font-size:.78rem; color:#8492AF; font-weight:700}

/* Carte cours particuliers — mise en page corrigée (flex + wrap)
   ⚠ CORRECTIF ESPACEMENT : la carte était collée aux cartes de
   programmes au-dessus (seul le gap de 1,15 rem les séparait) et son
   titre était collé à son badge. On ajoute un vrai respirateur. */
.private{
  background:linear-gradient(125deg,var(--ink) 0%, #172C55 52%, var(--blue) 100%);
  border:0; color:#fff;
  /* ⚠ CORRECTIF : grille nommée (annule le flex-column hérité de .course).
     Desktop  →  [ texte ][ prix ]      Mobile → texte / prix / bouton
                 [ bouton][ prix ]                                        */
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"txt price" "cta price";
  align-items:center; justify-items:start;
  gap:1.5rem 2.5rem; padding:clamp(1.75rem,3vw,2.75rem);
  margin-top:clamp(1.75rem,3.5vw,3rem);  /* <- LE SPACER (desktop) */
}
.private:hover{transform:none; box-shadow:var(--sh)}
.private .txt{grid-area:txt; min-width:0}
/* ⚠ La carte « 1 à 1 » est sur fond marine : les puces héritaient de
   .course li (var(--slate)), soit un contraste de 1,83:1 — illisible.
   Minimum exigé : 4,5:1. Les teintes ci-dessous montent à 8:1. */
.private ul{border-top-color:rgba(255,255,255,.18)}
.private li{color:#DDE4F5}
.private li::before{background:rgba(255,255,255,.16); color:#fff}
.private .p-cta{grid-area:cta; justify-self:start}
.private .price{grid-area:price; align-self:center; justify-self:end}
/* espace réel entre le badge « Cours particuliers » et le titre :
   ⚠ le <span> était INLINE, donc son margin-bottom était ignoré. */
.private .tag{display:inline-block; background:rgba(255,255,255,.14); color:#fff; margin-bottom:1.15rem}
.private h3{color:#fff; font-size:clamp(1.4rem,2.5vw,2rem); margin-bottom:.95rem; line-height:1.2}
.private p{color:rgba(255,255,255,.78); margin-bottom:0; max-width:62ch}
.price{
  text-align:center; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r); padding:1.35rem 2rem;
}
.price .amt{font-family:var(--display); font-size:clamp(2rem,3.6vw,2.9rem); font-weight:700; line-height:1; display:block; color:#fff}
.price .per{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:700; display:block; margin-top:.45rem}

/* ══════════════════════════════════════════════════════════════
   11 ▸ MÉTHODE
   ══════════════════════════════════════════════════════════════ */
.steps{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; position:relative}
.steps::before{content:""; position:absolute; left:10%; right:10%; top:30px; height:3px; background:var(--line); border-radius:2px}
.steps::after{content:""; position:absolute; left:10%; top:30px; height:3px; width:0; border-radius:2px; background:linear-gradient(90deg,var(--blue),var(--amber)); transition:width 1.9s var(--ease-out)}
.steps.run::after{width:80%}
.step{text-align:center; position:relative; z-index:2}
.step .num{
  width:62px; height:62px; border-radius:20px; margin:0 auto 1rem; display:grid; place-items:center;
  background:var(--white); border:2px solid var(--line); font-family:var(--display); font-weight:700;
  font-size:1.1rem; color:var(--slate); transition:.55s var(--ease-out);
}
.step.lit .num,.step:hover .num{background:var(--blue); border-color:var(--blue); color:#fff; transform:translateY(-4px) rotate(-6deg); box-shadow:0 14px 26px -12px rgba(30,58,138,.9)}
.step h3{font-size:1.05rem; margin-bottom:.35rem}
.step p{font-size:.86rem; color:var(--slate); margin:0}

/* ══════════════════════════════════════════════════════════════
   12 ▸ TARIFS
   ══════════════════════════════════════════════════════════════ */
.table-wrap{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm)}
table{width:100%; border-collapse:collapse; font-size:.94rem}
thead th{background:var(--blue-soft); color:var(--ink); text-align:left; padding:1.1rem 1.5rem; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; font-weight:800}
thead th:not(:first-child){text-align:center}
tbody td{padding:1.1rem 1.5rem; border-top:1px solid var(--line); color:var(--slate)}
tbody td:first-child{color:var(--ink); font-weight:700}
tbody td:not(:first-child){text-align:center; font-weight:600; color:var(--ink)}
tbody tr{transition:background .3s}
tbody tr:hover{background:#F5F8FD}
.na{color:#AFBBD1 !important; font-weight:400 !important}
.note{margin-top:1.15rem; font-size:.88rem; color:var(--slate)}

/* ══════════════════════════════════════════════════════════════
   13 ▸ ÉQUIPE
   ══════════════════════════════════════════════════════════════ */
.creds{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem}
.cred{
  display:flex; gap:.95rem; align-items:center; padding:1.1rem 1.3rem; background:var(--white);
  border:1px solid var(--line); border-radius:var(--r); transition:transform .45s var(--ease-out), box-shadow .45s, border-color .4s;
}
.cred:hover{transform:translateX(7px); box-shadow:var(--sh); border-color:var(--blue-line)}
.cred .c{width:34px; height:34px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); font-size:.78rem; font-weight:800}
.cred p{margin:0; font-size:.94rem}

/* ══════════════════════════════════════════════════════════════
   14 ▸ GALERIE LOCAUX
   ══════════════════════════════════════════════════════════════ */
.gallery{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:190px; gap:clamp(.9rem,1.6vw,1.15rem)}
.gallery .ph:nth-child(1){grid-column:span 2; grid-row:span 2}
.gallery .ph:nth-child(4){grid-column:span 2}
.gallery .ph{transition:transform .5s var(--ease-out), box-shadow .5s, border-color .4s}
.gallery .ph:hover{transform:translateY(-6px); box-shadow:var(--sh)}

/* ══════════════════════════════════════════════════════════════
   15 ▸ TÉMOIGNAGES
   ══════════════════════════════════════════════════════════════ */
.reviews{background:linear-gradient(180deg,var(--white) 0%, var(--blue-soft) 100%); overflow:hidden}
.reviews .marquee::before,.reviews .marquee::after{display:none}
.reviews .marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.rtrack{display:flex; gap:1.15rem; width:max-content; animation:slide 62s linear infinite}
.rtrack.rev{animation-direction:reverse; animation-duration:72s}
.review{
  width:350px; flex:none; background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.6rem; display:flex; flex-direction:column; transition:transform .45s var(--ease-out), box-shadow .45s;
}
.review:hover{transform:translateY(-6px); box-shadow:var(--sh)}
.review .stars{color:var(--amber); font-size:.85rem; letter-spacing:.13em; margin-bottom:.8rem}
.review p{font-size:.94rem; flex:1; margin-bottom:1.1rem; color:var(--ink)}
.review .who{display:flex; align-items:center; gap:.8rem; border-top:1px solid var(--line); padding-top:.95rem}
.review .av{width:40px; height:40px; border-radius:13px; background:linear-gradient(135deg,var(--blue),#33589E); color:#fff; display:grid; place-items:center; font-weight:800; font-size:.9rem; flex:none}
.review .who b{display:block; font-size:.9rem}
.review .who small{font-size:.76rem; color:var(--slate)}

/* ══════════════════════════════════════════════════════════════
   16 ▸ FAQ
   ══════════════════════════════════════════════════════════════ */
.faq{max-width:860px; margin-inline:auto; display:grid; gap:.75rem}
.acc{background:var(--white); border:1.5px solid var(--line); border-radius:var(--r); overflow:hidden; transition:border-color .35s, box-shadow .35s}
.acc.open{border-color:var(--blue); box-shadow:var(--sh)}
.acc-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--display);
  font-size:clamp(1rem,1.5vw,1.12rem); font-weight:600; color:var(--ink);
  padding:1.3rem 3.6rem 1.3rem 1.5rem; position:relative; transition:color .3s;
}
.acc-q:hover{color:var(--blue)}
.acc-q i{position:absolute; right:1.3rem; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:10px; background:var(--blue-soft); display:grid; place-items:center; transition:.45s var(--ease-out)}
.acc-q i::before,.acc-q i::after{content:""; position:absolute; background:var(--blue); border-radius:2px; transition:.45s var(--ease-out)}
.acc-q i::before{width:12px; height:2px}
.acc-q i::after{width:2px; height:12px}
.acc.open .acc-q i{background:var(--blue); transform:translateY(-50%) rotate(135deg)}
.acc.open .acc-q i::before,.acc.open .acc-q i::after{background:#fff}
.acc.open .acc-q i::after{opacity:0}
.acc-a{
  display:grid; grid-template-rows:0fr; visibility:hidden;
  transition:grid-template-rows .5s var(--ease-out), visibility .5s;
}
.acc.open .acc-a{grid-template-rows:1fr; visibility:visible}
.acc-a>div{overflow:hidden}
.acc-a p{padding:0 1.5rem 1.4rem; color:var(--slate); font-size:.95rem; margin:0}

/* ══════════════════════════════════════════════════════════════
   17 ▸ FORMULAIRE
   ══════════════════════════════════════════════════════════════ */
.enroll{background:linear-gradient(180deg,var(--bg) 0%, var(--blue-soft) 100%)}
.enroll-grid{display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(2rem,4.5vw,4rem); align-items:start}
.steps-list{margin-top:1.8rem; display:grid; gap:.7rem}
.steps-list li{display:flex; gap:.9rem; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:.85rem 1.1rem; font-size:.94rem}
.steps-list .c{width:30px; height:30px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); font-size:.75rem; font-weight:800}

.form-card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(1.4rem,3vw,2.4rem); box-shadow:var(--sh-lg)}
.fields{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem}
.field{display:flex; flex-direction:column; gap:.4rem}
.field.full{grid-column:1/-1}
label{font-size:.78rem; font-weight:700; color:var(--slate)}
label .req{color:#E0344B}
input,select,textarea{
  font-family:var(--body); font-size:.96rem; color:var(--ink); background:#F5F8FD;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:.9rem 1rem; width:100%;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
textarea{resize:vertical; min-height:110px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(30,58,138,.13)}
select{appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3e%3cpath d='M1 1l5 5 5-5' stroke='%235B6B87' stroke-width='1.9' fill='none' stroke-linecap='round'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.6rem}
.form-card .btn{width:100%; margin-top:1.3rem; padding-block:1.05rem}
.legal{font-size:.78rem; color:var(--slate); text-align:center; margin:.85rem 0 0}
.hp{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.msg{display:none; margin-top:1rem; padding:1rem 1.1rem; border-radius:var(--r-sm); font-size:.92rem; text-align:center}
/* Les états de formulaire restent sémantiques (vert = OK, rouge = erreur) */
.msg.ok{display:block; background:#E8F6EF; color:#0A7A54; border:1px solid rgba(18,185,129,.3)}
.msg.err{display:block; background:#FDECEE; color:#C42438; border:1px solid #F7C9CF}

/* ══════════════════════════════════════════════════════════════
   18 ▸ CTA + CONTACT
   ══════════════════════════════════════════════════════════════ */
.cta-band{
  background:linear-gradient(125deg,var(--ink) 0%, var(--blue) 55%, #2E52B0 100%);
  border-radius:var(--r-xl); padding:clamp(2.2rem,4.5vw,3.6rem); text-align:center; color:#fff;
  position:relative; overflow:hidden;
}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(620px circle at 50% -25%, rgba(255,255,255,.3), transparent 62%)}
.cta-band>*{position:relative; z-index:2}
.cta-band h2{color:#fff; margin-bottom:.85rem}
.cta-band p{color:rgba(255,255,255,.88); max-width:52ch; margin-inline:auto}
.cta-btns{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem}
.cta-band .btn-ghost{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.26); color:#fff; border-color:#fff}

.contact-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; margin-top:2.25rem}
.ct{display:flex; gap:1rem; align-items:center}
.ct .i{width:50px; height:50px; border-radius:16px; flex:none; display:grid; place-items:center; background:var(--blue-soft); font-size:1.15rem; transition:.45s var(--ease-out)}
.ct:hover .i{background:var(--blue); transform:rotate(-8deg) scale(1.08)}
.ct span.k{display:block; font-size:.74rem; color:var(--slate); font-weight:700; letter-spacing:.05em; text-transform:uppercase}
.ct b{font-size:.97rem; word-break:break-word}

/* ══════════════════════════════════════════════════════════════
   18b ▸ CARTE GOOGLE MAPS
   ══════════════════════════════════════════════════════════════ */
.map-card{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
}
.map-embed{position:relative; min-height:400px; background:var(--blue-soft)}
.map-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.map-side{
  padding:clamp(1.5rem,2.8vw,2.25rem); border-left:1px solid var(--line);
  display:flex; flex-direction:column; gap:.55rem;
}
.map-side h3{margin-bottom:.35rem}
.map-list{display:grid; gap:.9rem; margin:.6rem 0 1.3rem}
.map-list li{display:flex; gap:.85rem; align-items:flex-start}
.map-list .i{
  width:40px; height:40px; border-radius:13px; flex:none; display:grid; place-items:center;
  background:var(--blue-soft); font-size:1.05rem;
}
.map-list .k{display:block; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--slate)}
.map-list b{font-size:.95rem; font-weight:600; color:var(--ink)}
.map-side .btn{width:100%}
.map-side .btn+.btn{margin-top:.6rem}

/* ══════════════════════════════════════════════════════════════
   19 ▸ PIED DE PAGE
   ══════════════════════════════════════════════════════════════ */
.footer{background:var(--ink); color:rgba(255,255,255,.66); padding-top:clamp(3.2rem,6vw,5rem)}
.footer-grid{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr); gap:2.5rem}
.footer h4{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; font-family:var(--body); font-weight:800}
.footer li{padding-block:.32rem; font-size:.92rem}
.footer a{transition:color .3s, padding-left .3s}
.footer a:hover{color:#fff; padding-left:4px}
.footer .brand-logo{background:#fff; box-shadow:none}
.footer .brand-txt small{color:rgba(255,255,255,.5)}
/* ⚠ le bouton bleu marine disparaissait sur le pied de page bleu marine */
.nl .btn-primary{background:var(--amber); color:#3A2503; box-shadow:none}
.nl .btn-primary:hover{background:var(--amber-d)}
.footer .brand-txt b{color:#fff}
.footer-about p{font-size:.92rem; max-width:36ch; margin-top:1.1rem}
/* ⚠ CORRECTIF : icônes sociales trop petites (17 px dans une boîte de
   42 px) et survol en bleu marine — donc invisible sur un pied de page
   déjà bleu marine. Icônes agrandies + survol en or. */
.socials{display:flex; gap:.6rem; margin-top:1.4rem}
.socials a{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12);
  transition:background .35s, border-color .35s, transform .35s var(--ease-out);
}
.socials a{color:rgba(255,255,255,.92)}
.socials a:hover{background:var(--amber); border-color:var(--amber); color:#3A2503; transform:translateY(-4px); padding-left:0}
.socials .ico{width:20px; height:20px; transition:color .35s}
.nl{display:flex; gap:.5rem; margin-top:.9rem}
.nl input{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.14)}
.nl input::placeholder{color:rgba(255,255,255,.4)}
.nl .btn{padding-inline:1.2rem}
.foot-bot{margin-top:3rem; border-top:1px solid rgba(255,255,255,.1); padding-block:1.4rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.8rem; color:rgba(255,255,255,.42)}

.fab{position:fixed; right:1.15rem; bottom:1.15rem; z-index:120; width:58px; height:58px; border-radius:50%; background:#1FA855; display:grid; place-items:center; box-shadow:0 14px 30px -10px rgba(31,168,85,.75); transition:transform .45s var(--ease-out)}
.fab::before{content:""; position:absolute; inset:0; border-radius:50%; background:#1FA855; animation:ring 2.6s infinite; z-index:-1}
@keyframes ring{0%{transform:scale(1); opacity:.5}100%{transform:scale(1.75); opacity:0}}
.fab:hover{transform:scale(1.1)}
.fab{color:#fff}
.fab .ico{width:27px; height:27px}

.totop{
  position:fixed; right:1.15rem; bottom:5.4rem; z-index:119; width:44px; height:44px; border-radius:50%;
  background:var(--white); border:1px solid var(--line); display:grid; place-items:center; color:var(--blue);
  box-shadow:var(--sh); opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity .4s, transform .4s var(--ease-out);
}
.totop.show{opacity:1; pointer-events:auto; transform:none}

/* ══════════════════════════════════════════════════════════════
   20 ▸ ANIMATIONS AU DÉFILEMENT
   ══════════════════════════════════════════════════════════════ */
.rv{opacity:0; transform:translateY(26px); filter:blur(5px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s}
.rv.in{opacity:1; transform:none; filter:blur(0)}
.rv-l{opacity:0; transform:translateX(-28px); transition:opacity .85s var(--ease-out), transform .85s var(--ease-out)}
.rv-l.in{opacity:1; transform:none}
.rv-s{opacity:0; transform:scale(.95); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
.rv-s.in{opacity:1; transform:none}

/* ══════════════════════════════════════════════════════════════
   20b ▸ SYSTÈME D'ICÔNES SVG — une seule couleur, un seul trait
   Toutes les icônes viennent du sprite <svg id="ico-sprite"> placé
   juste après <body>. Elles héritent de la couleur du parent
   (currentColor) et de sa taille (1em) : aucune icône colorée,
   aucun emoji. Pour changer l'épaisseur du trait partout :
   modifiez --ico-w dans les jetons de design (section 1).
   ══════════════════════════════════════════════════════════════ */
.ico{
  width:1em; height:1em; display:block; flex:none;
  fill:none; stroke:currentColor; stroke-width:var(--ico-w);
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
}
.ico--fill{fill:currentColor; stroke:none}
/* ⚠ Les logos de marque (Instagram / Facebook / WhatsApp) sont des
   glyphes PLEINS : sans cette classe, « .ico » leur applique
   fill:none + stroke et l'icône devient une tache illisible. */
.ico--brand{fill:currentColor; stroke:none}
/* icône inline dans une ligne de texte (barre haute, liens) */
.ico--inline{display:inline-block; vertical-align:-.16em; width:1.05em; height:1.05em; margin-right:.15em}

/* pastilles d'icônes : couleur de trait unifiée */
.card-ico{color:var(--blue)}
.card-ico.gold{background:var(--amber-soft); color:var(--amber-ink)}
.counter .ic{color:var(--blue)}
.counter .ic.gold{background:var(--amber-soft); color:var(--amber-ink)}
.ct .i{color:var(--blue)}
.ct:hover .i{color:#fff}
.map-list .i{color:var(--blue)}
.hero-badge .dot{color:var(--blue)}
.hero-badge .dot .ico{width:.62em; height:.62em; stroke-width:3}
.topbar .ico{color:currentColor; opacity:.85}

/* flèche des boutons : SVG au lieu du caractère « → » */
.btn .ar{display:inline-flex; align-items:center}
.btn .ar .ico{width:1.05em; height:1.05em}
.totop .ico{width:1.15rem; height:1.15rem}

/* ══════════════════════════════════════════════════════════════
   21 ▸ RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .hero-grid,.enroll-grid{grid-template-columns:minmax(0,1fr)}
  /* ⚠ CORRECTIF : « margin-inline:auto » seul annule l'étirement d'un
     élément de grille — la photo du héros ne faisait plus que ~185px
     de large sur mobile. On impose donc width:100%. */
  .hero-visual{width:100%; max-width:520px; margin-inline:auto}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .counters-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem 1rem}
  .steps::before,.steps::after{display:none}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* ⚠ 2 colonnes : on abandonne grid-auto-rows au profit d'un ratio par
     tuile. Les lignes ne sont plus figées à 150/190 px, donc plus de
     débordement dans l'espacement et les photos gardent leurs proportions. */
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:auto; gap:1rem}
  .gallery .ph:nth-child(1),.gallery .ph:nth-child(4){grid-column:span 2; grid-row:auto}
  .gallery .ph{aspect-ratio:8/7}
  .gallery .ph:nth-child(1){aspect-ratio:16/10}
  .gallery .ph:nth-child(4){aspect-ratio:2/1}
  .map-card{grid-template-columns:minmax(0,1fr)}
  .map-side{border-left:0; border-top:1px solid var(--line)}
  .map-embed{min-height:360px}
}

/* ⚠ CORRECTIF MOBILE : les cartes flottantes du héros se
   chevauchaient par-dessus la photo. On les recale dans les coins
   et on réduit leur taille. */
@media (max-width:900px){
  .fc-1{top:3%; left:0}
  .fc-2{bottom:5%; right:0}
  .fc-3{display:none}
}

@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .mnav{display:flex}
  .topbar .l{display:none}
  .topbar-in{justify-content:center}
  .bento{grid-template-columns:minmax(0,1fr)}
  .bento .span2{grid-column:span 1}
  .bento .card.span2{display:block !important}   /* la carte 2-colonnes repasse en bloc */
  .bento .card.span2 .ph{margin-top:1.2rem}
  .creds{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .price{width:100%}

  /* ⚠ SPACER MOBILE : en 1 colonne la carte sombre touchait presque la
     carte blanche du dessus. On force un écart net + on aère l'intérieur,
     et on remonte le prix AVANT le bouton (ordre de lecture logique). */
  .private{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"txt" "price" "cta";
    justify-items:stretch; gap:1.5rem;
    margin-top:2.5rem;
  }
  .private .price{justify-self:stretch; width:100%}
  .private .p-cta{justify-self:stretch}
  .private .tag{margin-bottom:.95rem}
  .private h3{margin-bottom:.75rem}
  .private .btn{width:100%; margin-top:0 !important}
}

/* ⚠ CORRECTIF MOBILE : le tableau des tarifs débordait de l'écran.
   En dessous de 760px il devient une pile de cartes lisibles. */
@media (max-width:760px){
  .table-wrap{overflow:visible; border:0; background:none; box-shadow:none; border-radius:0}
  .price-table thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block; width:100%}
  .price-table tr{
    background:var(--white); border:1px solid var(--line); border-radius:var(--r);
    padding:.4rem .3rem .6rem; margin-bottom:.85rem; box-shadow:var(--sh-sm);
  }
  .price-table tr:hover{background:var(--white)}
  .price-table td{border-top:0; padding:.55rem 1.1rem}
  .price-table td:first-child{
    font-size:1.02rem; padding-bottom:.7rem; margin-bottom:.3rem;
    border-bottom:1px solid var(--line); text-align:left;
  }
  .price-table td:not(:first-child){
    display:flex; align-items:baseline; justify-content:space-between; gap:1rem; text-align:right;
  }
  .price-table td:not(:first-child)::before{
    content:attr(data-th); font-size:.74rem; font-weight:800; letter-spacing:.07em;
    text-transform:uppercase; color:var(--slate); text-align:left; flex:none;
  }


}

@media (max-width:560px){
  .fields{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .footer-grid{grid-template-columns:minmax(0,1fr)}
  /* un peu plus d'air entre les photos sur téléphone */
  .gallery{gap:.9rem}
  .gallery .ph:nth-child(1){aspect-ratio:3/2}
  .gallery .ph:nth-child(4){aspect-ratio:16/9}
  .review{width:calc(100vw - 4rem); max-width:300px}
  .topbar{font-size:.76rem}
  .map-embed{min-height:300px}
  .map-side .btn{padding-inline:1rem}

  /* cartes flottantes compactes pour ne plus masquer la photo */
  .float-card{padding:.5rem .7rem; gap:.55rem; border-radius:16px}
  .float-card .ic{width:30px; height:30px; font-size:.85rem; border-radius:10px}
  .float-card b{font-size:.78rem}
  .float-card small{font-size:.66rem}
  .fc-1{top:2%; left:0}
  .fc-2{bottom:3%; right:0}

  /* boutons flottants plus discrets + respect de la barre iOS */
  .fab{width:52px; height:52px; right:.9rem; bottom:calc(.9rem + env(safe-area-inset-bottom,0px))}
  .fab .ico{width:24px; height:24px}
  .totop{width:40px; height:40px; right:.9rem; bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}

  /* le dernier bloc ne passe plus sous le bouton WhatsApp */
  .foot-bot{padding-bottom:4.5rem}
}

@media (max-width:400px){
  .brand-txt small{display:none}
  .brand-logo{width:42px; height:42px}
  .hero-cta .btn,.cta-btns .btn{width:100%}
  .price-table td{padding-inline:.9rem}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .rv,.rv-l,.rv-s,.hero h1 .w,.fade-up,.fade-in{opacity:1 !important; transform:none !important; filter:none !important}
  .mtrack,.rtrack{animation:none}
  .marquee{overflow-x:auto}
}