/* ==========================================================================
   Kite Odyssey — version « motion design » (05/10/2026). Socle : la feuille du site Big Air Coaching (mêmes composants,
   mêmes mouvements) ; ce qui est propre à l'école est rangé À LA FIN (bloc « KITE ODYSSEY »).
   Le mouvement vient de L'EAU (toile fixe, eau.js), des vraies photos (photo du héros qui reste en place, fondus, masques),
   de la typographie et d'une section épinglée (la progression, séance après séance).
   AUCUN objet de kite n'est dessiné : le kite n'apparaît qu'en photo.
   ========================================================================== */
/* ---------- polices, hébergées ici (assets/fonts) : Oswald 600 (les titres ; c'est la police du site d'origine) et Inter variable.
   Fichiers déjà présents sur les autres sites de l'agence (Google Fonts, licence OFL). ---------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/oswald-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #051a2b; --bg-2: #072338; --carte: #0a2c46; --carte-2: #103a5a;
  --txt: #eef4fa; --doux: #a9c3d6; --ligne: rgba(255, 255, 255, .12); --ligne-2: rgba(255, 255, 255, .2);
  --accent: #f6b93b; --accent-2: #ffd978; --accent-a: 246, 185, 59; --eau: #2ea3f2; --eau-2: #8fd6ff; --eau-a: 46, 163, 242;
  --grad: linear-gradient(120deg, #ffe58a 0%, #f7c13f 50%, #ee9a17 100%);   /* l'or du logo : l'action */
  --grad-eau: linear-gradient(120deg, #b6e9ff 0%, #5cc0f7 50%, #2ea3f2 100%);   /* le bleu du lagon : l'identité */
  --r: 20px; --r-s: 12px; --hdr: 72px;
  --f-t: Oswald, "Arial Narrow", Impact, sans-serif; --f-c: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --doux-e: cubic-bezier(.2, .8, .2, 1); --ressort: cubic-bezier(.34, 1.56, .64, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--hdr); }
html:not(.lenis) { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 400 1rem/1.65 var(--f-c); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #1a0d00; font-weight: 700; }
.skip:focus { top: 12px; }
.container { width: min(1180px, 100% - 40px); margin-inline: auto; }
.container--etroit { width: min(820px, 100% - 40px); }
/* l'empilement, du fond vers l'avant (décisions du fondateur, 03/10) :
     la photo du héros (z -2) et son voile (-1) · LE VENT (2) · les textes du héros et TOUTES les autres sections (3) · l'en-tête (80).
   Donc : le vent passe sur la photo du héros (« le 1 peut rester comme ça ») et DERRIÈRE tout le reste — niveaux, cadres,
   maquette, textes. main ne doit PAS porter de z-index : il enfermerait tout sous la toile du vent. */
main { position: relative; }
main > section:not(.hero), main > div, .pied, .hero__in, .hero__bande { position: relative; z-index: 3; }
main { overflow-x: clip; }   /* clip, pas hidden : les sections épinglées (sticky) continuent de fonctionner */

/* ---------- le vent (toile fixe) et la progression ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 90; height: 3px; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad); }

/* ---------- textes ---------- */
.sur { margin-bottom: 14px; font: 700 .78rem/1 var(--f-c); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
.sur::before { content: ""; display: inline-block; width: 28px; height: 2px; margin: 0 12px 3px 0; background: var(--grad); vertical-align: middle; }
.titre { font: 600 clamp(2.5rem, 6.2vw, 5rem)/.95 var(--f-t); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
.titre--s { font-size: clamp(2rem, 4vw, 3.1rem); }
.titre em, .hero__titre em, .prix__n span, .tarif__prix span { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .2em .06em .02em; margin: 0 -.2em -.06em -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }   /* la réserve à droite : l'italique déborde de sa boîte */
.tete { margin-bottom: clamp(34px, 5vw, 62px); }
.section { padding: clamp(80px, 11vw, 150px) 0; }
.section--nuit { background: linear-gradient(180deg, rgba(7, 35, 56, 0), rgba(7, 35, 56, .82) 14%, rgba(7, 35, 56, .82) 86%, rgba(7, 35, 56, 0)); }
.section p { color: var(--doux); }

/* ---------- boutons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 999px; font: 700 .86rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .35s var(--ressort), box-shadow .3s, background .3s; will-change: transform; }
.btn--accent { background: var(--grad); color: #1c0e00; box-shadow: 0 16px 34px -16px rgba(var(--accent-a), .9), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(var(--accent-a), 1), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn--ligne { color: var(--txt); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .32); background: rgba(8, 36, 58, .94); }
.btn--ligne:hover { box-shadow: inset 0 0 0 1.5px var(--accent-2); color: var(--accent-2); }
.btn--lg { padding: 18px 32px; font-size: .92rem; }
.btn--sm { padding: 10px 16px; font-size: .74rem; }
.btn--bloc { width: 100%; }
.btn--ico { padding: 11px 18px 11px 14px; gap: 9px; }
.btn--ico svg { width: 20px; height: 20px; flex: none; }

/* ---------- en-tête ---------- */
.header { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: var(--hdr); transition: background .35s, box-shadow .35s; }
/* le verre de l'en-tête est sur .header::before (plus bas) : un filtre posé ICI éteindrait celui du menu déroulant */
.header__in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav__list { display: flex; gap: 24px; }
.nav__link { position: relative; padding: 8px 0; font: 600 .86rem/1 var(--f-c); text-decoration: none; color: var(--txt); opacity: .82; transition: opacity .25s, color .25s; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--doux-e); }
.nav__link:hover, .nav__link.is-actif { opacity: 1; }
.nav__link.is-actif::after, .nav__link:hover::after { transform: scaleX(1); }
.langue { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--ligne); }
.langue__lien { padding: 6px 9px; border-radius: 999px; font: 700 .72rem/1 var(--f-c); letter-spacing: .08em; text-decoration: none; color: var(--txt); opacity: .68; transition: opacity .25s, background .25s, color .25s; }
.langue__lien:hover { opacity: 1; }
.langue__lien.is-on { opacity: 1; background: var(--accent); color: #1a0d00; }
.burger { display: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .07); cursor: pointer; }
.burger span { display: block; width: 20px; height: 2px; margin: 4px auto; border-radius: 2px; background: var(--txt); transition: transform .3s var(--doux-e), opacity .2s; }
.menu-ouvert .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { opacity: 0; }
.menu-ouvert .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- héros ---------- */
.hero { position: relative; display: flex; min-height: 100svh; padding: calc(var(--hdr) + clamp(20px, 5vh, 54px)) 0 clamp(110px, 15vh, 170px); overflow: clip; }
.hero__in { display: flex; flex-direction: column; }
.hero__bas { margin-top: auto; align-self: flex-end; width: min(100%, 470px); padding-top: 30px; }
.hero__photo { position: absolute; inset: -8% 0 -8% 0; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; transform-origin: 76% 52%; animation: zoom-lent 18s ease-out both; }
@keyframes zoom-lent { from { transform: scale(1.07); } to { transform: scale(1); } }
.hero__voile { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5, 26, 43, .55) 0%, rgba(5, 26, 43, 0) 26%, rgba(5, 26, 43, .25) 55%, var(--bg) 100%), linear-gradient(90deg, rgba(5, 26, 43, .55), rgba(5, 26, 43, 0) 60%); }
.hero__sur { margin-bottom: 18px; font: 700 .82rem/1 var(--f-c); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-2); }
.hero__titre { max-width: 17ch; font: 600 clamp(3rem, 8.3vw, 7.2rem)/.9 var(--f-t); text-transform: uppercase; letter-spacing: -.005em; }
.hero__titre .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .22em .08em .04em; margin: 0 -.22em 0 -.04em; }
.hero__titre .mot > span { display: inline-block; }
.js .hero__titre .mot > span { transform: translateY(112%) skewY(6deg); transition: transform 1s var(--doux-e) calc(var(--i) * 70ms + 200ms); }
.js .pret .hero__titre .mot > span, .calme .hero__titre .mot > span { transform: none; }
.hero__texte { max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.18rem); color: rgba(238, 244, 250, .9); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.js [data-entree] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--doux-e) calc(var(--d, 0) * 110ms + 300ms), transform .8s var(--doux-e) calc(var(--d, 0) * 110ms + 300ms); }
.js .pret [data-entree], .calme [data-entree] { opacity: 1; transform: none; }
.hero__bande { position: absolute; left: 0; right: 0; bottom: 22px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.defile { display: flex; align-items: center; gap: 34px; width: max-content; animation: defile 36s linear infinite; font: 600 clamp(2.2rem, 5.4vw, 4.4rem)/1 var(--f-t); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1.3px rgba(255, 255, 255, .34); white-space: nowrap; }
.defile i { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
@keyframes defile { to { transform: translateX(-50%); } }
.calme .defile { animation: none; }

/* ---------- niveaux : la montée (section épinglée) ---------- */
.niveaux { position: relative; height: 340vh; }
.niveaux__colle { position: sticky; top: 0; height: 100svh; overflow: clip; }
.niveaux__photos, .niveaux__voile { position: absolute; inset: 0; }
.niveaux__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity 1.1s var(--doux-e), transform 2.4s var(--doux-e); }
.niveaux__photos img.is-on { opacity: 1; transform: scale(1); }
.niveaux__photos img { object-position: 50% 45%; }
.niveaux__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .93) 0%, rgba(5, 26, 43, .72) 38%, rgba(5, 26, 43, .12) 72%, rgba(5, 26, 43, .45) 100%), linear-gradient(180deg, var(--bg) 0%, var(--bg) 7%, rgba(5, 26, 43, .55) 15%, rgba(5, 26, 43, 0) 28%, rgba(5, 26, 43, 0) 80%, var(--bg) 100%); }
.niveaux__arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.niveaux__arc path { fill: none; vector-effect: non-scaling-stroke; }
.niveaux__sol { stroke: rgba(255, 255, 255, .16); stroke-width: 1; stroke-dasharray: 3 9; }
#arc-fond { stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; stroke-dasharray: 2 10; }
#arc { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(var(--accent-a), .8)); }
.niveaux__in { position: relative; display: grid; grid-template-columns: minmax(0, 560px) 1fr auto; align-items: center; gap: 30px; height: 100%; padding-top: var(--hdr); }
.niveaux__tete { grid-column: 1; align-self: end; }
.niveaux__mini { display: inline-block; margin-top: 16px; padding: 8px 14px; border-radius: 999px; background: #0b3550; box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .4); font: 600 .78rem/1.3 var(--f-c); letter-spacing: .04em; color: var(--accent-2); }
.niveaux__textes { grid-column: 1; grid-row: 2; position: relative; align-self: start; min-height: 320px; }
.niveau { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(34px); transition: opacity .6s var(--doux-e), transform .8s var(--doux-e); pointer-events: none; }
.niveau.is-on { opacity: 1; transform: none; pointer-events: auto; }
.niveau__n { font: 700 .8rem/1 var(--f-c); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
.niveau h3 { margin: 8px 0 14px; padding-right: .12em; font: 600 clamp(3.4rem, 9vw, 7.4rem)/.86 var(--f-t); text-transform: uppercase; }
.niveau p:last-child { max-width: 50ch; color: rgba(238, 244, 250, .88); }
.jauge { grid-column: 3; grid-row: 1 / 3; position: relative; display: grid; gap: clamp(46px, 11vh, 110px); padding-left: 30px; }
.jauge li:not(.jauge__fil) { position: relative; display: flex; align-items: center; gap: 12px; opacity: .38; transition: opacity .5s, transform .6s var(--ressort); }
.jauge li.is-on { opacity: 1; transform: translateX(-6px); }
.jauge b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(5, 26, 43, .92); box-shadow: inset 0 0 0 1.5px var(--ligne-2); font: 600 1.5rem/1 var(--f-t); transition: background .5s, color .5s, box-shadow .5s; }
.jauge li.is-on b { background: var(--grad); color: #1c0e00; box-shadow: 0 0 0 6px rgba(var(--accent-a), .2); }
.jauge span { font: 700 .74rem/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; }
.jauge__fil { position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.jauge__fil i { position: absolute; inset: 0; background: var(--grad); transform: scaleY(0); transform-origin: 50% 100%; }

/* ---------- apparitions ---------- */
/* chaque cadre arrive EN MOUVEMENT : il monte en basculant vers l'avant, le flou se lève, il se pose avec un léger rebond.
   Les variantes entrent de côté en pivotant, ou en grandissant. --d décale les voisins (effet de cascade). */
.js [data-vue] { opacity: 0; transform: perspective(1100px) translate3d(0, 76px, 0) rotateX(18deg) scale(.93); transform-origin: 50% 100%; filter: blur(9px);
  transition: opacity .7s var(--doux-e) calc(var(--d, 0) * 110ms), transform 1.1s cubic-bezier(.2, 1.22, .36, 1) calc(var(--d, 0) * 110ms), filter .7s var(--doux-e) calc(var(--d, 0) * 110ms), clip-path 1.2s var(--doux-e); }
.js [data-vue="gauche"] { transform: perspective(1100px) translate3d(-120px, 0, 0) rotateY(-20deg) scale(.94); transform-origin: 0 50%; }
.js [data-vue="droite"] { transform: perspective(1100px) translate3d(120px, 0, 0) rotateY(20deg) scale(.94); transform-origin: 100% 50%; }
.js [data-vue="zoom"] { transform: scale(.7) rotate(-4deg); transform-origin: 50% 50%; filter: blur(12px); }
.js [data-vue="masque"] { opacity: 1; transform: none; filter: none; clip-path: inset(0 100% 0 0 round var(--r)); }
.js [data-vue].is-vu { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0 round var(--r)); }
.js [data-vue]:not([data-vue="masque"]).is-vu { clip-path: none; }
.calme [data-vue] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }

/* ---------- méthode : épinglée le temps de la rafale ---------- */
.methode-piste { height: 300vh; }
.methode-colle { position: sticky; top: var(--hdr); display: flex; flex-direction: column; justify-content: center; height: calc(100svh - var(--hdr)); }
.methode-colle .tete { margin-bottom: clamp(18px, 3.4vh, 44px); }
.methode-colle .viseur__images { aspect-ratio: auto; height: min(56vh, 480px); }
.carte { transition: box-shadow .5s, background .5s, opacity .5s; }
.methode__cartes .carte:not(.is-etape) { opacity: .5; }
.methode__cartes .carte.is-etape { box-shadow: inset 0 0 0 1.5px var(--accent); }
.calme .methode-piste { height: auto; } .calme .methode-colle { position: static; height: auto; } .calme .methode__cartes .carte { opacity: 1; }
.methode { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.viseur { position: relative; border-radius: var(--r); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); }
.viseur__images { position: relative; aspect-ratio: 4 / 3; }
.viseur__images img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.viseur__images img.is-on { opacity: 1; }
.viseur__legende { position: absolute; z-index: 2; left: 64px; right: 64px; bottom: 46px; font: 600 .74rem/1.4 var(--f-c); letter-spacing: .04em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.viseur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 26, 43, .2), rgba(5, 26, 43, 0) 30%, rgba(5, 26, 43, .55)); }
.viseur__coin { position: absolute; z-index: 2; width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .85); }
.viseur__coin:nth-of-type(1) { left: 18px; top: 18px; border-right: 0; border-bottom: 0; }
.viseur__coin:nth-of-type(2) { right: 18px; top: 18px; border-left: 0; border-bottom: 0; }
.viseur__coin:nth-of-type(3) { left: 18px; bottom: 44px; border-right: 0; border-top: 0; }
.viseur__coin:nth-of-type(4) { right: 18px; bottom: 44px; border-left: 0; border-top: 0; }
.viseur__rec { position: absolute; z-index: 2; left: 62px; top: 20px; padding: 3px 13px 3px 31px; border-radius: 999px; background: rgba(5, 26, 43, .88); font: 700 .76rem/1.6 var(--f-c); letter-spacing: .18em; text-transform: uppercase; }
.viseur__rec b { font-weight: 700; color: var(--accent-2); }
.viseur__rec::before { content: ""; position: absolute; left: 12px; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-radius: 50%; background: #ff3b30; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.viseur__mire { position: absolute; z-index: 2; left: 50%; top: 40%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border: 1.5px solid rgba(255, 255, 255, .7); border-radius: 50%; }
.viseur__mire::before, .viseur__mire::after { content: ""; position: absolute; left: 50%; top: 50%; background: rgba(255, 255, 255, .8); }
.viseur__mire::before { width: 20px; height: 1.5px; margin: -1px 0 0 -10px; }
.viseur__mire::after { width: 1.5px; height: 20px; margin: -10px 0 0 -1px; }
.viseur__piste { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); }
.viseur__piste i { position: absolute; inset: 0; border-radius: 4px; background: var(--grad); box-shadow: 0 0 12px rgba(var(--accent-a), .8); transform: scaleX(.02); transform-origin: 0 50%; }
@keyframes lecture { from { left: 0; } to { left: calc(100% - 4px); } }
@keyframes lecture-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.calme .viseur__rec::before { animation: none; }
.methode__cartes { display: grid; gap: 16px; }
.carte { position: relative; padding: 24px 26px 26px 78px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform-style: preserve-3d; }
.carte--fort { background: linear-gradient(135deg, #4a2b08, #161e28); }
.carte__n { position: absolute; left: 24px; top: 22px; font: 600 2rem/1 var(--f-t); color: var(--accent-2); }
.carte h3 { margin-bottom: 6px; font: 600 1.6rem/1.05 var(--f-t); text-transform: uppercase; letter-spacing: .01em; color: var(--txt); }
.carte p { font-size: .95rem; }
.onsight { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(20px, 4vw, 50px); margin-top: clamp(50px, 7vw, 90px); padding: clamp(26px, 4vw, 48px); border-radius: calc(var(--r) + 8px); background: radial-gradient(60% 80% at 78% 50%, rgba(124, 92, 255, .26), transparent 70%), linear-gradient(135deg, #0e2c3e, #0c1826 55%); box-shadow: inset 0 0 0 1px var(--ligne); overflow: hidden; }
.onsight__txt p:not(.sur) { margin: 14px 0 22px; }
.onsight__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.mockup { position: relative; padding: 0 9% 7% 3%; perspective: 1600px; }
.mk-pc { transform: rotateY(-9deg) rotateX(3deg); transform-origin: 60% 50%; transition: transform 1.4s var(--doux-e), opacity 1s; }
.mk-pc__ecran { padding: 2.2% 2.2% 2.6%; border-radius: 16px 16px 4px 4px; background: linear-gradient(180deg, #1c222c, #0b0e13); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14), 0 40px 70px -30px rgba(0, 0, 0, .9); }
.mk-pc__ecran img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 0 0; border-radius: 5px; }
.mk-pc__base { position: relative; width: 114%; height: 15px; margin: 0 -7%; border-radius: 3px 3px 16px 16px; background: linear-gradient(180deg, #5a6472, #262c36 45%, #12161c); box-shadow: 0 24px 34px -14px rgba(0, 0, 0, .9); }
.mk-pc__base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 6px; margin-left: -8%; border-radius: 0 0 8px 8px; background: #0e1217; }
.mk-tel { position: absolute; right: 0; bottom: 0; width: 23%; padding: 1.2%; border-radius: 13% / 6.2%; background: linear-gradient(160deg, #2a313c, #0a0d12); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), -24px 30px 50px -18px rgba(0, 0, 0, .95); transform: rotateY(-16deg) rotateX(2deg) translateZ(40px); transition: transform 1.5s var(--doux-e) .25s, opacity 1s .25s; animation: flotte 7s ease-in-out infinite; }
.mk-tel img { width: 100%; border-radius: 10% / 4.8%; }
.mk-tel__ilot { position: absolute; left: 50%; top: 2.6%; width: 30%; height: 2.4%; margin-left: -15%; border-radius: 99px; background: #05070a; }
@keyframes flotte { 50% { translate: 0 -10px; } }
.js .onsight:not(.is-vu) .mk-pc { opacity: 0; transform: rotateY(-22deg) rotateX(8deg) translateY(40px); }
.js .onsight:not(.is-vu) .mk-tel { opacity: 0; transform: rotateY(-30deg) translateX(70px) translateZ(40px); }
.calme .mk-tel { animation: none; }

/* ---------- stages : défilement de côté (section épinglée) ---------- */
.stages { position: relative; }
.stages__colle { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 34px); height: 100svh; padding-top: var(--hdr); overflow: clip; }
.stages__lead { max-width: 60ch; margin-top: 14px; color: var(--doux); }
.stages__piste { display: flex; gap: 22px; padding-inline: max(20px, (100vw - 1180px) / 2); width: max-content; will-change: transform; }
.stage { position: relative; flex: none; width: min(78vw, 520px); height: min(56vh, 520px); border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne), 0 30px 60px -34px rgba(0, 0, 0, .9); }
.stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--doux-e); }
.stage:hover > img { transform: scale(1.06); }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 26, 43, .15) 0%, rgba(5, 26, 43, .5) 38%, rgba(5, 26, 43, .96) 100%); }
.stage__in { position: absolute; z-index: 1; inset: auto 0 0 0; padding: 24px 26px; }
.stage__etat { position: absolute; z-index: 2; right: 16px; top: 16px; padding: 7px 12px; border-radius: 999px; background: rgba(5, 26, 43, .92); box-shadow: inset 0 0 0 1px var(--ligne-2); font: 700 .68rem/1 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.stage__etat--attente { background: var(--grad); color: #1c0e00; box-shadow: none; }
.stage__date { font: 700 .74rem/1 var(--f-c); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-2); }
.stage h3 { margin: 6px 0 2px; font: 600 clamp(2.6rem, 6vw, 4.2rem)/.9 var(--f-t); text-transform: uppercase; }
.stage__spot { font-weight: 600; color: var(--txt); }
.stage ul { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; margin: 12px 0 14px; font-size: .82rem; line-height: 1.4; color: rgba(238, 244, 250, .82); }
.stage li { position: relative; padding-left: 14px; }
.stage li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.stage__prix { font: 600 2rem/1 var(--f-t); }
.stage__prix--attente { font-size: 1.3rem; color: var(--doux); }
.stage--galerie { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; background: none; box-shadow: none; }
.stage--galerie::after { display: none; }
.stage--galerie img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-s); }
.stages__pied { display: flex; align-items: center; gap: 16px; }
.stages__fil { position: relative; flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.stages__fil i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; }
.stages__aide { font: 700 .7rem/1 var(--f-c); letter-spacing: .18em; text-transform: uppercase; color: var(--doux); }
/* sans épinglage (téléphone, mouvement réduit, pas de JS) : la piste défile au doigt */
.stages--libre .stages__colle { position: relative; height: auto; padding: clamp(80px, 11vw, 150px) 0; }
.stages--libre .stages__piste { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; -webkit-overflow-scrolling: touch; }
.stages--libre .stage { scroll-snap-align: center; height: 520px; }
.stages--libre .stages__fil { display: none; }

/* ---------- galerie (Dakhla 2026) et visionneuse ---------- */
.galerie { padding-top: clamp(60px, 8vw, 110px); }
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 12px; }
.tuile { position: relative; padding: 0; border: 0; border-radius: var(--r-s); overflow: hidden; background: var(--bg-2); cursor: zoom-in; aspect-ratio: 4 / 5; }
.tuile--g { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tuile--l { grid-column: span 2; }
.tuile--h { grid-row: span 2; }
.tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--doux-e), filter .5s; }
.tuile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--ligne); background: linear-gradient(180deg, transparent 55%, rgba(5, 26, 43, .55)); opacity: 0; transition: opacity .4s; }
.tuile:hover img, .tuile:focus-visible img { transform: scale(1.08); }
.tuile:hover::after, .tuile:focus-visible::after { opacity: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.tuiles:hover .tuile:not(:hover) img { filter: saturate(.55) brightness(.75); }
.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(3, 8, 14, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--txt); }
.visionneuse[open] { display: grid; place-items: center; animation: voir .35s var(--doux-e); }
.visionneuse::backdrop { background: transparent; }
@keyframes voir { from { opacity: 0; } }
.visionneuse img { max-width: min(92vw, 1620px); max-height: 84dvh; width: auto; height: auto; border-radius: var(--r-s); box-shadow: 0 40px 90px -30px #000; }
.visionneuse img.is-change { animation: image-change .4s var(--doux-e); }
@keyframes image-change { from { opacity: 0; transform: scale(.97); } }
.visionneuse button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0 0 4px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--ligne-2); font: 400 2rem/1 var(--f-c); cursor: pointer; transition: background .25s, transform .3s var(--ressort); }
.visionneuse button:hover { background: var(--accent); color: #1c0e00; transform: scale(1.08); }
.visionneuse__fermer { right: 18px; top: 18px; }
.visionneuse__fleche--g { left: 18px; top: 50%; margin-top: -26px; }
.visionneuse__fleche--d { right: 18px; top: 50%; margin-top: -26px; }
.visionneuse__compte { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font: 700 .76rem/1 var(--f-c); letter-spacing: .18em; color: var(--doux); }

/* ---------- matériel ---------- */
.materiel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 5vw, 70px); align-items: start; }
.materiel__lead { margin: 16px 0 6px; }
.materiel__col--fourni { padding: clamp(24px, 3.4vw, 40px); border-radius: calc(var(--r) + 6px); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.liste { display: grid; gap: 4px; margin: 20px 0 26px; counter-reset: l; }
.liste li { position: relative; display: grid; gap: 4px; padding: 16px 0 16px 62px; border-top: 1px solid var(--ligne); counter-increment: l; }
.liste li::before { content: "0" counter(l); position: absolute; left: 0; top: 14px; font: 600 1.9rem/1 var(--f-t); color: var(--accent-2); }
.liste b { font: 600 1.45rem/1.1 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.liste span { font-size: .95rem; color: var(--doux); }
.debut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 30px; margin-top: clamp(40px, 6vw, 70px); padding: 24px 28px; border-radius: var(--r); background: linear-gradient(135deg, #0e2e40, #0c1826); box-shadow: inset 0 0 0 1px var(--ligne); }
.debut p { flex: 1 1 420px; font-size: .96rem; }
.debut b { color: var(--txt); }

/* ---------- coaching en ligne ---------- */
.ligne { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.ligne__txt { position: sticky; top: calc(var(--hdr) + 30px); }
.ligne__txt > p:not(.sur) { margin-top: 18px; }
.prix { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 18px; margin-top: 28px; padding: 22px 24px; border-radius: var(--r); background: var(--carte-2); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .4); }
.prix__n { font: 600 clamp(3.4rem, 7vw, 5rem)/.9 var(--f-t); color: var(--txt) !important; }
.prix__d { font: 600 .82rem/1.5 var(--f-c); letter-spacing: .08em; text-transform: uppercase; }
.prix .btn { grid-column: 1 / -1; margin-top: 10px; }
.etapes { display: grid; gap: 14px; counter-reset: e; }
.etapes li { position: relative; padding: 22px 24px 22px 84px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); counter-increment: e; }
.etapes li::before { content: counter(e); position: absolute; left: 22px; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: rgba(var(--accent-a), .16); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .5); font: 600 1.4rem/1 var(--f-t); color: var(--accent-2); }
.etapes h3 { font: 600 1.4rem/1.1 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.etapes p { margin-top: 4px; font-size: .94rem; }

/* ---------- renforcement : le radar ---------- */
.renfo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.renfo__txt > p:not(.sur) { margin-top: 18px; }
.renfo__note { font-size: .9rem; font-style: italic; }
.renfo__detail { margin-top: 26px; padding: 20px 22px; border-radius: var(--r); background: var(--carte-2); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .4); min-height: 132px; }
.renfo__detail h3 { font: 600 1.6rem/1.05 var(--f-t); text-transform: uppercase; color: var(--accent-2); }
.renfo__detail p { margin-top: 6px; font-size: .96rem; }
.renfo__detail.is-change { animation: change .5s var(--doux-e); }
@keyframes change { from { opacity: 0; transform: translateY(10px); } }
.radar { position: relative; width: min(100%, 540px); aspect-ratio: 1; margin-inline: auto; }
.radar svg { position: absolute; inset: 13%; width: 74%; height: 74%; overflow: visible; }
.radar svg line, .radar svg .anneau { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
#radar-forme { fill: rgba(var(--accent-a), .2); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 14px rgba(var(--accent-a), .7)); }
.radar__axe { --ang: calc(var(--a) * 60deg - 90deg); /* fond plein */ position: absolute; left: calc(50% + cos(var(--ang)) * var(--ray, 43%)); top: calc(50% + sin(var(--ang)) * 43%); transform: translate(-50%, -50%); width: min-content; padding: 9px 14px; border: 0; border-radius: 999px; background: #0a1622; box-shadow: inset 0 0 0 1.5px var(--ligne-2); font: 700 .72rem/1.2 var(--f-c); letter-spacing: .06em; text-transform: uppercase; text-align: center; cursor: pointer; transition: background .3s, color .3s, box-shadow .3s, transform .4s var(--ressort); }
.radar__axe:hover { box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.radar__axe.is-on { background: var(--grad); color: #1c0e00; box-shadow: 0 10px 24px -10px rgba(var(--accent-a), .9); transform: translate(-50%, -50%) scale(1.08); }

/* ---------- tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tarif { display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: calc(var(--r) + 4px); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); transform-style: preserve-3d; }
.tarif--fort { background: linear-gradient(160deg, #502e08, #101e2c 62%); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .6), 0 40px 70px -44px rgba(var(--accent-a), .7); }
.tarif h3 { font: 600 2rem/1 var(--f-t); text-transform: uppercase; }
.tarif__sous { margin-top: 6px; font-size: .84rem; }
.tarif__prix { margin: 20px 0 18px; font: 600 clamp(3.6rem, 6vw, 5rem)/.9 var(--f-t); color: var(--txt) !important; }
.tarif__prix small { margin-left: 8px; font: 600 .8rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.tarif ul { display: grid; gap: 9px; margin-bottom: 26px; font-size: .94rem; color: rgba(238, 244, 250, .86); flex: 1; }
.tarif li { position: relative; padding-left: 26px; }
.tarif li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 7px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.tarifs__note { max-width: 70ch; margin: 34px auto 0; text-align: center; font-size: .96rem; }

/* ---------- avis ---------- */
.avis { padding-bottom: clamp(60px, 8vw, 110px); overflow: clip; }
.avis__rang { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.avis__rang + .avis__rang { margin-top: 18px; }
.avis__piste { display: flex; gap: 18px; width: max-content; animation: defile 70s linear infinite; }
.avis__rang--inverse .avis__piste { animation-direction: reverse; animation-duration: 84s; }
.avis__rang:hover .avis__piste { animation-play-state: paused; }
.calme .avis__piste { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.avis blockquote { flex: none; width: min(82vw, 400px); padding: 24px 26px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.avis blockquote::before { content: "★★★★★"; display: block; margin-bottom: 10px; letter-spacing: .2em; color: var(--accent-2); }
.avis blockquote p { font-size: .96rem; color: rgba(238, 244, 250, .88); }
.avis cite { display: block; margin-top: 14px; font: 700 .8rem/1 var(--f-c); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.avis__pied { display: flex; justify-content: center; margin-top: 36px; }

/* ---------- le coach ---------- */
.coach { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.coach__photo { border-radius: var(--r); overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); }
.coach__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.coach__txt p:not(.sur) { margin-top: 16px; }
.coach__liens { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); transition: box-shadow .3s; }
.faq details[open] { box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .5); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; font: 600 1.4rem/1.15 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg); transition: transform .35s var(--doux-e); }
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { padding: 0 26px 24px; }
.faq__plus { display: flex; justify-content: center; margin-top: 30px; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.contact__txt > p:not(.sur) { margin-top: 18px; }
.contact__liens { display: grid; gap: 8px; margin-top: 22px; }
.contact__liens a { font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--f-t); text-decoration: none; background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size .4s var(--doux-e), color .3s; }
.contact__liens a:hover { background-size: 100% 2px; color: var(--accent-2); }
.contact__suivre { margin-top: 28px !important; font: 700 .76rem/1 var(--f-c); letter-spacing: .2em; text-transform: uppercase; color: var(--txt) !important; }
.contact__reseaux { display: flex; gap: 10px; margin-top: 12px; }
.form { display: grid; gap: 14px; padding: clamp(22px, 3.4vw, 38px); border-radius: calc(var(--r) + 6px); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.champ { display: grid; gap: 7px; }
.champ span { font: 700 .72rem/1 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.champ input, .champ textarea { width: 100%; padding: 14px 16px; border: 0; border-radius: var(--r-s); background: rgba(3, 9, 15, .82); box-shadow: inset 0 0 0 1px var(--ligne-2); outline: none; transition: box-shadow .25s; resize: vertical; }
.champ input:focus, .champ textarea:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.champ.is-faux input, .champ.is-faux textarea { box-shadow: inset 0 0 0 1.5px #ff5a4f; }
.form__demo { padding: 11px 14px; border-radius: var(--r-s); background: rgba(var(--accent-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .32); font-size: .86rem; line-height: 1.5; }
.form__demo a { color: var(--accent-2); }
.form__demo.is-flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 6px rgba(var(--accent-a), .35); } 100% { box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .32), 0 0 0 0 rgba(var(--accent-a), 0); } }
.form__erreur { padding: 11px 14px; border-radius: var(--r-s); background: rgba(255, 90, 79, .12); color: #ffc2bc !important; font-size: .9rem; }

/* ---------- pied, pastille de démo, toast ---------- */
.pied { padding: 44px 0 70px; border-top: 1px solid var(--ligne); background: var(--bg); }
.pied__demo { max-width: 60ch; font-size: .8rem; }
.pied a { color: var(--accent-2); }
.demo-badge { position: fixed; left: 14px; bottom: 14px; z-index: 85; padding: 8px 12px; border-radius: 999px; background: rgba(5, 26, 43, .96); box-shadow: inset 0 0 0 1px var(--ligne-2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--doux); font: 600 .72rem/1 var(--f-c); letter-spacing: .04em; text-decoration: none; }
.demo-badge b { color: var(--accent-2); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 95; max-width: min(92vw, 560px); padding: 13px 18px; border-radius: 14px; background: rgba(7, 35, 56, .95); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .5), 0 20px 50px -20px #000; font-size: .9rem; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: opacity .35s, transform .45s var(--ressort); }
.toast.is-vu { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   SUITE DU 03/10/2026 — réservation guidée, pages de contenu, incitation à réserver, plus de mouvement
   ========================================================================== */

/* ---------- niveaux : le vent est DERRIÈRE la photo ; un masque la rend un peu transparente sur ses bords seulement (le rider reste plein) ---------- */
.niveaux__photos { -webkit-mask-image: radial-gradient(80% 80% at 62% 50%, #000 36%, rgba(0, 0, 0, .7) 84%); mask-image: radial-gradient(80% 80% at 62% 50%, #000 36%, rgba(0, 0, 0, .7) 84%); }

/* ---------- l'en-tête : le verre est porté par un pseudo-élément (un filtre sur l'en-tête lui-même éteindrait celui du menu) ---------- */
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; background: rgba(5, 26, 43, .8); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--ligne); transition: opacity .35s; }
.header.is-colle::before, .menu-ouvert .header::before, .page ~ .header::before { opacity: 1; }
body:not(.p-accueil) .header::before { opacity: 1; }

/* ---------- héros : tout à gauche, le rider et l'aile à droite ---------- */
.hero { align-items: center; padding: calc(var(--hdr) + 24px) 0 clamp(120px, 17vh, 180px); }
.hero__in { display: block; }
.hero__h1 { margin: 0; font: inherit; }
.hero__sur, .hero__titre { display: block; }
.hero__titre { max-width: 7.6em; font-size: clamp(2.9rem, 5.9vw, 5.5rem); }
.hero__bas { margin-top: clamp(18px, 3vh, 30px); width: min(100%, 540px); padding-top: 0; align-self: auto; }
/* la photo RESTE EN PLACE (rider et aile immobiles) pendant que le reste de la page monte : le rail fait un écran de plus que le héros */
.hero { overflow: visible; }
.hero__rail { position: absolute; inset: 0 0 -100lvh 0; z-index: -2; pointer-events: none; }
.hero__photo { position: sticky; inset: auto; top: 0; z-index: auto; height: 100lvh; overflow: hidden; will-change: opacity; }
.hero__photo picture { display: block; width: 100%; height: 100%; }
.hero__photo img { object-position: 100% 50%; }
.hero__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .78) 0%, rgba(5, 26, 43, .46) 32%, rgba(5, 26, 43, 0) 56%), linear-gradient(180deg, rgba(5, 26, 43, .5) 0%, rgba(5, 26, 43, 0) 22%); }
/* le rideau : un fondu de 42 % d'écran qui PRÉCÈDE les niveaux et monte avec eux sur la photo restée en place */
.niveaux::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 42vh; background: linear-gradient(180deg, rgba(5, 26, 43, 0) 0%, rgba(5, 26, 43, .5) 46%, rgba(5, 26, 43, .9) 80%, var(--bg) 100%); pointer-events: none; }
.hero__in, .hero__bande { z-index: 4; }
.hero__preuves { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--ligne-2); }
.hero__preuves li { display: grid; gap: 3px; }
.hero__preuves b { font: 600 1.28rem/1 var(--f-t); text-transform: uppercase; letter-spacing: .02em; color: var(--txt); }
.hero__preuves span { font: 600 .66rem/1.2 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }

/* ---------- le bouton qui brille (un seul appel principal par écran) ---------- */
.btn--eclat { overflow: hidden; }
.btn--eclat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .6) 50%, transparent 64%); transform: translateX(-130%); animation: eclat 4.4s ease-in-out infinite; pointer-events: none; }
@keyframes eclat { 0%, 60% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.calme .btn--eclat::after { display: none; }

/* ---------- les cadres : le reflet qui les traverse à l'apparition ---------- */
[data-lueur] { position: relative; isolation: isolate; }
/* (pas de lueur au survol : le fondateur l'a fait retirer du cadre Onsightlab puis des cartes de tarif — ne pas la remettre) */
[data-lueur]::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .14) 50%, transparent 58%) 130% 0 / 260% 100% no-repeat; }
.js [data-lueur].is-vu::before { animation: reflet 1.4s var(--doux-e) .3s both; }
@keyframes reflet { from { background-position: 130% 0; } to { background-position: -40% 0; } }
/* les lignes d'une liste entrent une à une quand leur cadre est là */
.js .tarif li, .js .liste li, .js .recap__plus li, .js .cote__liste li { opacity: 0; transform: translateX(-16px); transition: opacity .5s var(--doux-e), transform .65s var(--doux-e); }
.js .tarif.is-vu li, .js .is-vu .liste li, .js .is-vu .recap__plus li, .js .is-vu .cote__liste li, .calme .tarif li, .calme .liste li, .calme .recap__plus li, .calme .cote__liste li { opacity: 1; transform: none; }
.tarif li:nth-child(1), .liste li:nth-child(1), .recap__plus li:nth-child(1), .cote__liste li:nth-child(1) { transition-delay: .3s; }
.tarif li:nth-child(2), .liste li:nth-child(2), .recap__plus li:nth-child(2), .cote__liste li:nth-child(2) { transition-delay: .38s; }
.tarif li:nth-child(3), .liste li:nth-child(3), .recap__plus li:nth-child(3), .cote__liste li:nth-child(3) { transition-delay: .46s; }
.tarif li:nth-child(4), .recap__plus li:nth-child(4) { transition-delay: .54s; }
.tarif li:nth-child(5) { transition-delay: .62s; }
.tarif li:nth-child(6) { transition-delay: .7s; }
/* le trait des sur-titres se trace */
.js [data-vue] .sur::before, .js [data-vue].sur::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--doux-e) .25s; }
.js [data-vue].is-vu .sur::before, .js .is-vu[data-vue].sur::before, .calme .sur::before { transform: scaleX(1); }

/* ---------- niveaux : le bouton sous le texte ---------- */
.niveaux__textes { min-height: 372px; }
.niveaux__cta { position: absolute; left: 0; bottom: 0; }

/* ---------- stages : le pied de carte ---------- */
.stage__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* ---------- tarifs : l'économie du forfait, le mode de règlement ---------- */
.tarif { position: relative; }
.tarif__badge { position: absolute; right: 18px; top: -13px; padding: 7px 12px; border-radius: 999px; background: var(--grad); color: #1c0e00 !important; font: 700 .68rem/1 var(--f-c); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 22px -10px rgba(var(--accent-a), .9); }
.tarifs__paiement { margin-top: 12px; text-align: center; font-size: .86rem; color: var(--accent-2) !important; }
.avis__pied { gap: 12px; flex-wrap: wrap; }
.avis__piste { gap: 0; } .avis blockquote { margin-right: 18px; }   /* la marge DANS l'élément : la moitié de la bande tombe juste, la boucle n'a pas de saut */

/* ---------- les marques partenaires : une bande qui défile ---------- */
.marques { margin-top: clamp(60px, 8vw, 100px); padding: 34px 0; border-block: 1px solid var(--ligne); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marques__piste { display: flex; align-items: center; width: max-content; animation: defile 34s linear infinite; }
.marques:hover .marques__piste { animation-play-state: paused; }
.marques li { flex: none; padding-right: clamp(50px, 7vw, 100px); }
.marques img { height: 40px; width: auto; opacity: .82; transition: opacity .3s, transform .45s var(--ressort); }
.marques img.marques__ko { height: 62px; }
.marques li:hover img { opacity: 1; transform: scale(1.1); }
.calme .marques__piste { animation: none; flex-wrap: wrap; justify-content: center; width: auto; row-gap: 22px; }

/* ---------- les articles « à lire » ---------- */
.lires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lire { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); text-decoration: none; }
.lire:hover, .js .lire[data-vue].is-vu:hover { transform: translateY(-7px); box-shadow: inset 0 0 0 1.5px var(--accent), 0 30px 50px -34px rgba(var(--accent-a), .7); transition: transform .5s var(--ressort), box-shadow .3s; }
.lire__sur { font: 700 .66rem/1 var(--f-c); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-2); }
.lire h3 { font: 600 1.5rem/1.08 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.lire p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; font-size: .9rem; }
.lire__plus { margin-top: auto; padding-top: 6px; font: 700 .72rem/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.lire__plus::after { content: " →"; display: inline-block; transition: transform .35s var(--ressort); }
.lire:hover .lire__plus::after { transform: translateX(6px); }

/* ---------- l'appel à réserver ---------- */
.appel { padding: clamp(60px, 8vw, 110px) 0; }
.appel__in { position: relative; display: grid; justify-items: center; gap: 18px; padding: clamp(38px, 6vw, 76px) clamp(22px, 5vw, 60px); border-radius: calc(var(--r) + 10px); text-align: center; background: radial-gradient(80% 150% at 50% 0%, rgba(var(--accent-a), .36), transparent 62%), linear-gradient(160deg, #0e4a70, #0a2c46 62%); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .45), 0 50px 90px -56px rgba(var(--accent-a), .7); overflow: hidden; }
.appel__in p { max-width: 58ch; color: rgba(238, 244, 250, .86); }

/* ---------- la barre de réservation : partout (ordinateur, tablette, téléphone), dès le premier écran quitté — et elle reste ---------- */
.barre { position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 9px max(20px, calc((100vw - 1180px) / 2)); background: rgba(5, 26, 43, .93); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 -1px 0 var(--ligne-2), 0 -24px 50px -30px #000; transform: translateY(110%); transition: transform .5s var(--doux-e); }
.barre.is-vue { transform: none; }
.barre__txt { display: flex; flex: 1; align-items: baseline; gap: 14px; min-width: 0; }
.barre__txt b { font: 600 1.3rem/1 var(--f-t); text-transform: uppercase; color: var(--txt); }
.barre__txt span { font: 600 .8rem/1.2 var(--f-c); letter-spacing: .04em; color: var(--doux); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre__wa { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.barre__wa svg { width: 22px; height: 22px; }
.barre__cta { flex: none; padding: 14px 22px; }
.p-reservation .barre, .menu-ouvert .barre { display: none; }

/* ---------- le préchargeur (n'existe que si le script de <head> a posé la classe « intro ») ---------- */
.chargeur { display: none; }
html.intro .chargeur { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--bg); clip-path: inset(0 0 0 0); transition: clip-path .85s var(--doux-e), visibility 0s .85s; animation: chargeur-filet .01s 6s forwards; }   /* filet : si le script ne tourne pas, le rideau disparaît quand même */
html.intro .chargeur.is-fini { clip-path: inset(0 0 100% 0); visibility: hidden; }
@keyframes chargeur-filet { to { visibility: hidden; } }
.chargeur__in { display: grid; justify-items: center; gap: 22px; }
.chargeur__logo { width: min(300px, 70vw); height: auto; animation: chargeur-logo .9s var(--doux-e) both; }
@keyframes chargeur-logo { from { opacity: 0; transform: translateX(-46px) skewX(-10deg); filter: blur(8px); } }
.chargeur__barre { position: relative; width: min(300px, 70vw); height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.chargeur__barre i { position: absolute; inset: 0; background: var(--grad); box-shadow: 0 0 14px rgba(var(--accent-a), .9); transform: scaleX(0); transform-origin: 0 50%; }
.chargeur__n { font: 600 1.5rem/1 var(--f-t); letter-spacing: .14em; color: var(--doux); font-variant-numeric: tabular-nums; }
.chargeur.is-fini .chargeur__in { opacity: 0; transform: translateY(-30px); transition: opacity .4s, transform .6s var(--doux-e); }

/* ---------- retour en haut ---------- */
.haut { position: fixed; z-index: 65; right: 22px; bottom: 22px; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(5, 26, 43, .92); box-shadow: inset 0 0 0 1px var(--ligne-2), 0 18px 40px -16px #000; color: var(--txt); cursor: pointer; opacity: 0; transform: translateY(24px) scale(.7); pointer-events: none; transition: opacity .35s, transform .55s var(--ressort), background .25s, color .25s; }
.haut.is-vu { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { background: var(--accent); color: #1c0e00; transform: translateY(-4px); }
.haut svg { width: 22px; height: 22px; }
.menu-ouvert .haut { display: none; }
.barre.is-vue ~ .haut { bottom: 84px; }                 /* au-dessus de la barre de réservation */
.p-reservation .barre.is-vue ~ .haut { bottom: 22px; }   /* pas de barre sur la page de réservation */

/* ---------- copie de démonstration : ce qui ne se voit QUE là ---------- */
.demo-badge, .form__demo, .pied__demo, .fin__demo { display: none; }
.demo .demo-badge, .demo .form__demo, .demo .pied__demo, .demo .fin__demo, .demo .prose__demo { display: block; }
.prose__demo { display: none; padding: 10px 14px; border-radius: var(--r-s); background: rgba(var(--accent-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .32); font-size: .88rem; }
.demo-badge { z-index: 60; }
.form__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__ok { padding: 12px 14px; border-radius: var(--r-s); background: rgba(72, 199, 142, .12); box-shadow: inset 0 0 0 1px rgba(72, 199, 142, .4); color: #bdf0d6 !important; font-size: .92rem; }

/* ---------- le pied ---------- */
.pied { padding: clamp(50px, 7vw, 80px) 0 110px; }
.pied__grille { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px 28px; }
.pied__marque { display: grid; justify-items: start; gap: 14px; font-size: .9rem; color: var(--doux); }
.pied__marque img { height: 30px; width: auto; }
.pied__actions { display: flex; gap: 10px; }
.pied__actions a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-2); color: var(--txt); transition: background .25s, color .25s, transform .45s var(--ressort), box-shadow .25s; }
.pied__actions a:hover { background: var(--accent); color: #1c0e00; box-shadow: 0 14px 26px -14px rgba(var(--accent-a), .9); transform: translateY(-4px); }
.pied__actions svg { width: 22px; height: 22px; }
.pied__titre { margin-bottom: 14px; font: 700 .72rem/1 var(--f-c); letter-spacing: .2em; text-transform: uppercase; color: var(--txt); }
.pied__col ul { display: grid; gap: 9px; font-size: .9rem; }
.pied__col a, .pied__lien { color: var(--doux); text-decoration: none; transition: color .25s; }
.pied a.btn--accent { color: #1c0e00; }
.pied__col a:hover, .pied__lien:hover { color: var(--accent-2); }
.pied__lien { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ligne); font-size: .8rem; color: var(--doux); }

/* ---------- les cookies ---------- */
.cookies { position: fixed; z-index: 96; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; max-width: 900px; margin-inline: auto; padding: 18px 20px; border-radius: var(--r); background: #0a2c46; box-shadow: inset 0 0 0 1px var(--ligne-2), 0 30px 70px -20px #000; animation: monte .55s var(--doux-e) both; }
.cookies[hidden] { display: none; }
@keyframes monte { from { opacity: 0; transform: translateY(30px); } }
.cookies__txt { flex: 1 1 380px; font-size: .88rem; line-height: 1.55; color: var(--doux); }
.cookies__titre { margin-bottom: 4px; font: 600 1.3rem/1.1 var(--f-t); text-transform: uppercase; color: var(--txt); }
.cookies__txt a { color: var(--accent-2); }
.cookies__choix { display: flex; flex: 0 1 300px; gap: 10px; }
.cookies__choix .btn { flex: 1; }

/* ---------- les pages de contenu (FAQ, règlement, stages, articles) ---------- */
.page { padding-top: var(--hdr); }
.page__tete { padding: clamp(40px, 7vw, 90px) 0 clamp(26px, 4vw, 50px); }
.page__tete--court { padding: clamp(26px, 4vw, 48px) 0 clamp(18px, 2.4vw, 30px); }
.page__tete--court .fil { margin-bottom: 16px; }
.page__tete--court .page__titre { max-width: none; font-size: clamp(1.9rem, 3.8vw, 3.1rem); }
.page__tete--court .page__chapo { margin-top: 10px; font-size: 1rem; }
.fil { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; font: 600 .76rem/1.3 var(--f-c); color: var(--doux); }
.fil a { color: var(--accent-2); text-decoration: none; }
.page__titre { max-width: 21ch; font-size: clamp(2.3rem, 5.4vw, 4.4rem); }
.page__titre .mot { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .22em .08em .04em; margin: 0 -.22em 0 -.04em; }
.page__titre .mot > span { display: inline-block; }
.js .page__titre .mot > span { transform: translateY(112%) skewY(6deg); transition: transform 1s var(--doux-e) calc(var(--i) * 60ms + 150ms); }
.js .pret .page__titre .mot > span, .calme .page__titre .mot > span { transform: none; }
.page__chapo { max-width: 62ch; margin-top: 16px; font-size: 1.06rem; color: var(--doux); }
.page__grille { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(28px, 4vw, 60px); align-items: start; padding-bottom: clamp(50px, 7vw, 90px); }
.page__cote, .resa__cote { position: sticky; top: calc(var(--hdr) + 24px); }
.cote, .recap { display: grid; gap: 16px; padding: 26px; border-radius: calc(var(--r) + 4px); background: linear-gradient(160deg, #0e4a70, #0a2c46 62%); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .45), 0 40px 70px -50px rgba(var(--accent-a), .6); }
.cote__sur, .recap__sur { font: 700 .7rem/1 var(--f-c); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
.cote__titre { font: 600 1.9rem/1 var(--f-t); text-transform: uppercase; }
.cote__prix { font: 600 .8rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.cote__prix b { display: block; margin: 6px 0; font: 600 3.2rem/.9 var(--f-t); letter-spacing: 0; color: var(--txt); }
.cote__prix small { font-size: .72rem; }
.cote__liste, .recap__plus { display: grid; gap: 8px; font-size: .9rem; color: rgba(238, 244, 250, .86); }
.cote__liste li, .recap__plus li { position: relative; padding-left: 24px; }
.cote__liste li::before, .recap__plus li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.prose { min-width: 0; overflow-wrap: anywhere; padding: clamp(24px, 4vw, 48px); border-radius: calc(var(--r) + 6px); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 1.5em 0 .5em; font: 600 clamp(1.7rem, 3vw, 2.3rem)/1.04 var(--f-t); text-transform: uppercase; color: var(--txt); text-wrap: balance; }
.prose h3 { margin: 1.4em 0 .4em; font: 600 1.4rem/1.1 var(--f-t); text-transform: uppercase; letter-spacing: .01em; color: var(--accent-2); }
.prose h4 { margin: 1.2em 0 .3em; font: 700 .9rem/1.3 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--txt); }
.prose p { margin: .85em 0; color: #c4d1de; }
.prose ul, .prose ol { display: grid; gap: 8px; margin: 1em 0; color: #c4d1de; }
.prose ul li { position: relative; padding-left: 22px; }
.prose ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.prose ol { list-style: decimal; padding-left: 22px; }
.prose a { color: var(--accent-2); }
.prose a.btn--accent { color: #1c0e00; } .prose a.btn--ligne { color: var(--txt); }
.prose strong { color: var(--txt); font-weight: 600; }
.prose .encadre { margin: 14px 0; padding: 18px 20px; border-radius: var(--r-s); background: var(--carte-2); box-shadow: inset 0 0 0 1px var(--ligne); }
.prose .encadre h3 { margin-top: 0; }
.prose .page__cta { margin: 20px 0; }
.page__image { margin-bottom: 28px; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 8; }
.page__image img { width: 100%; height: 100%; object-fit: cover; }
.page--faq .prose { display: grid; gap: 12px; padding: 0; background: none; box-shadow: none; }
.plie { border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); transition: box-shadow .3s; }
.plie[open] { box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .5); }
.plie summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; cursor: pointer; list-style: none; font: 600 1.4rem/1.15 var(--f-t); text-transform: uppercase; letter-spacing: .01em; color: var(--txt); }
.plie summary::-webkit-details-marker { display: none; }
.plie summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg); transition: transform .35s var(--doux-e); }
.plie[open] summary::after { transform: rotate(-135deg); }
.plie__in { padding: 0 26px 22px; }
.plie__in > :first-child { margin-top: 0; }
.plie[open] .plie__in { animation: change .45s var(--doux-e); }
.lire-aussi { padding-top: clamp(50px, 7vw, 90px); }

/* ---------- les pages de stage : le contenu rangé en blocs (outils/stage.php) ---------- */
.prose li > p { margin: 0; }
.prose li > ul { margin: 8px 0 2px; }
.page--texte .prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.page--stage .prose { display: grid; gap: 14px; padding: 0; background: none; box-shadow: none; }
.page--stage .page__image { margin-bottom: 0; }
.stage-p { display: grid; gap: 14px; }
.prose .stage-p__accroche { margin: 6px 0 0; font: 600 clamp(1.7rem, 3.4vw, 2.5rem)/1.02 var(--f-t); text-transform: uppercase; color: var(--txt); text-wrap: balance; }
.prose .stage-p__faits { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.prose .stage-p__faits li { padding: 10px 14px; border-radius: 999px; background: #0b3550; box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .4); font: 700 .76rem/1.3 var(--f-c); letter-spacing: .05em; text-transform: uppercase; color: var(--accent-2); }
.prose .stage-p__faits li::before { display: none; }
.prose .stage-p__cta { display: none; margin: 0; }
.stage-p__bloc { padding: clamp(20px, 3vw, 34px); border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.prose .stage-p__bloc > h2 { margin-top: 0; }
.stage-p__bloc > :last-child { margin-bottom: 0; }
.stage-p__atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 18px; }
.prose .stage-p__atouts .encadre { margin: 0; }
.prose ul.coches li { padding-left: 28px; }
.prose ul.coches li::before { left: 2px; top: .44em; width: 12px; height: 7px; border-radius: 0; background: none; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.coches small { display: block; margin-top: 2px; font-size: .84rem; color: var(--doux); }
.prose ul.moins li::before { top: .74em; width: 10px; height: 2px; border-radius: 2px; background: var(--doux); }
.stage-p__materiel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.materiel-c { padding: 18px 16px; border-radius: var(--r-s); background: var(--carte-2); box-shadow: inset 0 0 0 1px var(--ligne); transition: transform .45s var(--ressort), box-shadow .3s; }
.materiel-c:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .5); }
.materiel-c svg { display: block; width: 34px; height: 34px; margin-bottom: 12px; fill: none; stroke: var(--accent-2); stroke-width: 1.700; stroke-linecap: round; stroke-linejoin: round; }
.prose .materiel-c h3 { margin: 0 0 4px; font-size: 1.16rem; color: var(--txt); }
.prose .materiel-c p { margin: 0; font-size: .86rem; line-height: 1.45; }
.stage-p__volets { display: grid; gap: 10px; }
.stage-p__fin { margin: 4px 0; }
.prose .stage-p__fin .page__cta { margin: 0; }

/* ---------- la réservation guidée ---------- */
.resa { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 54px); align-items: start; padding-bottom: clamp(60px, 8vw, 110px); }
.resa__form { position: relative; padding: clamp(22px, 3.6vw, 44px); border-radius: calc(var(--r) + 8px); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne), 0 50px 90px -60px #000; overflow: hidden; }
.pas { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 32px; }
.pas__etape { position: relative; z-index: 1; display: grid; justify-items: center; gap: 9px; text-align: center; color: #6f8296; transition: color .4s; }
.pas__etape b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #122538; box-shadow: inset 0 0 0 1.5px #33465a, 0 0 0 6px var(--carte); font: 600 1.3rem/1 var(--f-t); transition: background .4s, color .4s, transform .5s var(--ressort), box-shadow .4s; }
.pas__etape span { font: 700 .68rem/1.2 var(--f-c); letter-spacing: .12em; text-transform: uppercase; }
.pas__etape.is-on, .pas__etape.is-fait { color: var(--txt); }
.pas__etape.is-on b { background: var(--grad); color: #1c0e00; transform: scale(1.12); box-shadow: 0 0 0 6px #0e4a70; }
.pas__etape.is-fait b { background: #0b3550; color: var(--accent-2); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--carte); }
.pas__fil { position: absolute; left: 16.66%; right: 16.66%; top: 21px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.pas__fil i { position: absolute; inset: 0; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s var(--doux-e); }
.volet { min-width: 0; margin: 0; padding: 0; border: 0; }
.volet[hidden] { display: none; }
.volet.is-on { animation: volet-entre .6s var(--doux-e) both; }
.volet.is-retour { animation-name: volet-retour; }
@keyframes volet-entre { from { opacity: 0; transform: translateX(46px); } }
@keyframes volet-retour { from { opacity: 0; transform: translateX(-46px); } }
.volet__titre { padding: 0; font: 600 clamp(1.8rem, 3.4vw, 2.6rem)/1 var(--f-t); text-transform: uppercase; }
.volet__aide { margin: 8px 0 22px; color: var(--doux); }
.grille { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.champ--large { grid-column: 1 / -1; }
.champ select { width: 100%; padding: 14px 16px; border: 0; border-radius: var(--r-s); background: rgba(3, 9, 15, .82); box-shadow: inset 0 0 0 1px var(--ligne-2); color: inherit; font: inherit; outline: none; }
.champ select:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.champ input[type="date"], .champ select { color-scheme: dark; min-height: 51px; }
.champ.is-faux select, .champ.is-faux .puce span { box-shadow: inset 0 0 0 1.5px #ff5a4f; }
.champ[hidden] { display: none; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { position: relative; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span { display: grid; place-items: center; min-width: 56px; padding: 14px 16px; border-radius: var(--r-s); background: rgba(3, 9, 15, .82); box-shadow: inset 0 0 0 1px var(--ligne-2); font: 700 .86rem/1 var(--f-c); letter-spacing: .06em; color: var(--txt); cursor: pointer; transition: background .25s, color .25s, transform .4s var(--ressort), box-shadow .25s; }
.puce span:hover { box-shadow: inset 0 0 0 1.5px var(--accent-2); }
.puces--larges { display: grid; grid-template-columns: repeat(3, 1fr); }
.puces--larges .puce span { display: grid; place-items: start; gap: 3px; min-width: 0; height: 100%; padding: 14px 16px; text-align: left; letter-spacing: 0; }
.puces--larges b { font: 600 1.3rem/1.05 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.puces--larges small { font: 500 .78rem/1.3 var(--f-c); color: var(--doux); text-transform: none; letter-spacing: 0; }
.puces--larges .puce input:checked + span small { color: #4a2b08; }
.puce input:checked + span { background: var(--grad); color: #1c0e00; box-shadow: none; transform: scale(1.06); }
.puce input:focus-visible + span, .formule input:focus-visible + .formule__in { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.formules { display: grid; gap: 10px; margin-bottom: 22px; }
.formule { position: relative; }
.formule input { position: absolute; opacity: 0; pointer-events: none; }
.formule__in { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 16px; padding: 16px 18px 16px 54px; border-radius: var(--r); background: rgba(3, 9, 15, .6); box-shadow: inset 0 0 0 1px var(--ligne-2); cursor: pointer; transition: background .3s, box-shadow .3s, transform .45s var(--ressort); }
.formule__in:hover { box-shadow: inset 0 0 0 1.5px var(--accent-2); transform: translateX(4px); }
.formule__in::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ligne-2); transition: box-shadow .25s, background .25s; }
.formule__in b { font: 600 1.35rem/1.1 var(--f-t); text-transform: uppercase; letter-spacing: .01em; color: var(--txt); }
.formule__in small { grid-column: 1; font-size: .84rem; line-height: 1.4; color: var(--doux); }
.formule__in em { grid-column: 2; grid-row: 1 / 3; text-align: right; font: 600 1.7rem/1 var(--f-t); color: var(--accent-2); white-space: nowrap; }
.formule__in em i { display: block; margin-top: 4px; font: 600 .6rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.formule input:checked + .formule__in { background: linear-gradient(135deg, #4a2b08, #161e28); box-shadow: inset 0 0 0 1.5px var(--accent); }
.formule input:checked + .formule__in::before { background: var(--accent); box-shadow: inset 0 0 0 5px #0b3550, 0 0 0 2px var(--accent); }
.formules.is-faux .formule__in { box-shadow: inset 0 0 0 1.5px #ff5a4f; }
.certifs { display: grid; gap: 10px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--ligne); }
.certifs__titre { font: 700 .72rem/1 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.coche { display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 12px; padding: 13px 14px; border-radius: var(--r-s); background: rgba(3, 9, 15, .5); box-shadow: inset 0 0 0 1px var(--ligne); cursor: pointer; font-size: .9rem; line-height: 1.5; color: #c4d1de; transition: box-shadow .25s, background .25s; }
.coche:hover { box-shadow: inset 0 0 0 1px var(--accent-2); }
.coche input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border-radius: 7px; background: #03090f; box-shadow: inset 0 0 0 1.5px var(--ligne-2); cursor: pointer; transition: background .25s, box-shadow .25s; }
.coche input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border-left: 2.5px solid #1c0e00; border-bottom: 2.5px solid #1c0e00; transform: rotate(-45deg) scale(0); transition: transform .3s var(--ressort); }
.coche input:checked { background: var(--grad); box-shadow: none; }
.coche input:checked::after { transform: rotate(-45deg) scale(1); }
.coche.is-faux { box-shadow: inset 0 0 0 1.5px #ff5a4f; }
.coche a { color: var(--accent-2); }
.volet__note { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-s); background: rgba(var(--accent-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .32); font-size: .88rem; color: var(--txt); }
.volet__note[hidden] { display: none; }
.resa__form .form__erreur { margin-top: 18px; }
.resa__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; }
.resa__nav [hidden] { display: none; }
#resa-suite, #resa-envoi { margin-left: auto; }
.resa__secret { margin-top: 14px; text-align: right; font-size: .78rem; color: var(--doux); }
.volet--fin { display: grid; justify-items: center; gap: 12px; padding: 14px 0 6px; text-align: center; outline: none; }
.volet--fin[hidden] { display: none; }
.volet--fin p { max-width: 54ch; color: #c4d1de; }
.fin__coche svg { width: 86px; height: 86px; }
.fin__coche circle { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace .7s ease-out .15s forwards; }
.fin__coche path { fill: none; stroke: var(--accent-2); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; animation: trace .45s ease-out .7s forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.fin__demo { padding: 10px 14px; border-radius: var(--r-s); background: rgba(var(--accent-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .32); font-size: .86rem; color: var(--txt) !important; }
.fin__liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.est-envoye .pas, .est-envoye .resa__nav, .est-envoye .resa__secret { display: none; }
.recap__liste { margin: 0; }
.recap__liste div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.recap__liste dt { font: 700 .66rem/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: var(--doux); }
.recap__liste dd { margin: 0; text-align: right; font-weight: 600; color: var(--txt); }
.recap__liste dd.is-change { animation: change .45s var(--doux-e); }
#recap-prix { font: 600 1.5rem/1 var(--f-t); color: var(--accent-2); }
/* la licence FFVL : le premier bloc de la réservation, mis en avant */
.licence { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 18px clamp(22px, 4vw, 48px); margin-bottom: clamp(18px, 2.6vw, 30px); padding: clamp(18px, 2.6vw, 28px) clamp(18px, 3vw, 34px); border-radius: calc(var(--r) + 4px); background: linear-gradient(120deg, #0e4a70, #0a2c46 58%); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .55), 0 30px 60px -44px rgba(var(--accent-a), .7); }
.licence .sur { margin-bottom: 8px; }
.licence__titre { font: 600 clamp(1.5rem, 2.6vw, 2rem)/1.02 var(--f-t); text-transform: uppercase; text-wrap: balance; }
.licence__titre em { font-style: italic; color: var(--accent-2); }
.licence__txt > p:last-child { margin-top: 8px; font-size: .93rem; line-height: 1.55; color: #c4d1de; }
.licence__actions { display: grid; gap: 10px; }
.licence__liens { display: grid; gap: 4px; font-size: .82rem; text-align: center; }
.licence__liens a { color: var(--accent-2); }
.resa__infos { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 70px); align-items: start; }
.resa__infos .suite { grid-template-columns: repeat(3, 1fr); }
.info > p:not(.sur) { margin-top: 14px; }
.info__liens { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.info__aide { margin-top: 18px; font-size: .9rem; }
.info__aide a { color: var(--accent-2); }
.suite { display: grid; gap: 12px; margin-top: 22px; counter-reset: s; }
.suite li { position: relative; display: grid; gap: 4px; padding: 16px 18px 16px 72px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); counter-increment: s; }
.suite li::before { content: counter(s); position: absolute; left: 18px; top: 50%; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -20px; border-radius: 50%; background: rgba(var(--accent-a), .16); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .5); font: 600 1.3rem/1 var(--f-t); color: var(--accent-2); }
.suite b { font: 600 1.3rem/1.1 var(--f-t); text-transform: uppercase; }
.suite span { font-size: .92rem; color: var(--doux); }


/* ---------- le calendrier de la réservation (ordinateur) ---------- */
.champ, .date { position: relative; }
.date__natif { position: absolute; left: 0; bottom: 0; width: 1px !important; height: 1px; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.date__btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 51px; padding: 14px 16px; border: 0; border-radius: var(--r-s); background: rgba(3, 9, 15, .82); box-shadow: inset 0 0 0 1px var(--ligne-2); color: var(--txt); font: inherit; text-align: left; cursor: pointer; transition: box-shadow .25s; }
.date__btn:hover { box-shadow: inset 0 0 0 1px var(--accent-2); }
.date__btn:focus-visible, .date.is-ouvert .date__btn { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent); }
.date__btn svg { flex: none; width: 20px; height: 20px; color: var(--accent-2); }
.date__txt { font-style: normal; }
.date__txt.is-vide { color: #6f8296; }
.champ.is-faux .date__btn { box-shadow: inset 0 0 0 1.5px #ff5a4f; }
.date__pop { position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: 316px; max-width: calc(100vw - 40px); padding: 14px; border-radius: var(--r); background: #0a2c46; box-shadow: inset 0 0 0 1px var(--ligne-2), 0 30px 60px -18px #000; animation: date-ouvre .28s var(--doux-e); }
.date__pop[hidden] { display: none; }
@keyframes date-ouvre { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.date__tete { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.date .date__tete select { flex: 1; width: auto; min-width: 0; min-height: 0; padding: 9px 8px; border: 0; border-radius: 10px; background: #050c13; box-shadow: inset 0 0 0 1px var(--ligne-2); color: var(--txt); font: 600 .86rem/1.2 var(--f-c); color-scheme: dark; text-transform: capitalize; cursor: pointer; outline: none; }
.date .date__tete select:focus-visible { box-shadow: inset 0 0 0 1.5px var(--accent); }
.date__nav { flex: none; display: grid; place-items: center; width: 36px; height: 36px; padding: 0 0 3px; border: 0; border-radius: 50%; background: #050c13; box-shadow: inset 0 0 0 1px var(--ligne-2); color: var(--txt); font: 400 1.3rem/1 var(--f-c); cursor: pointer; transition: background .2s, color .2s; }
.date__nav:hover:not(:disabled) { background: var(--accent); color: #1c0e00; }
.date__nav:disabled { opacity: .3; cursor: default; }
.date__jours, .date__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date__jours b { padding: 6px 0; text-align: center; font: 700 .64rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--doux); }
.date__grille button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--txt); font: 600 .86rem/1 var(--f-c); cursor: pointer; transition: background .15s, color .15s, transform .3s var(--ressort); }
.date__grille button:hover:not(:disabled) { background: rgba(var(--accent-a), .24); }
.date__grille button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.date__grille button:disabled { color: #3a4a5b; cursor: default; }
.date__grille button.is-auj { box-shadow: inset 0 0 0 1.5px var(--ligne-2); }
.date__grille button.is-choisi { background: var(--grad); color: #1c0e00; transform: scale(1.06); box-shadow: none; }

/* ---------- remplissage automatique du navigateur : le champ GARDE ses couleurs (Chrome le peignait en blanc bleuté).
   Le fond d'un champ rempli par le navigateur ne se change pas : on le recouvre d'une ombre intérieure pleine. ---------- */
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--txt); caret-color: var(--txt); box-shadow: inset 0 0 0 1px var(--ligne-2), inset 0 0 0 1000px #050c13 !important; transition: background-color 600000s 0s, color 600000s 0s; }
input:-webkit-autofill:focus, textarea:-webkit-autofill:focus { box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 1000px #050c13 !important; }
.champ.is-faux input:-webkit-autofill { box-shadow: inset 0 0 0 1.5px #ff5a4f, inset 0 0 0 1000px #050c13 !important; }
input:autofill, textarea:autofill { filter: none; }   /* Firefox pose un filtre jaune */

/* ---------- écrans moyens et petits ---------- */
@media (max-width: 980px) {
  .burger { display: block; }
  .nav { position: fixed; left: 0; right: 0; top: var(--hdr); flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 24px; background: rgba(5, 26, 43, .97); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 var(--ligne); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .35s var(--doux-e), opacity .3s, visibility 0s .35s; }
  .menu-ouvert .nav { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--doux-e), opacity .3s; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__link { display: block; padding: 15px 4px; border-bottom: 1px solid var(--ligne); font-size: 1rem; }
  .nav__link::after { display: none; }
  .langue { align-self: flex-start; margin-top: 18px; }
  .langue__lien { padding: 10px 16px; font-size: .86rem; }
  .nav__cta { margin-top: 16px; min-height: 48px; font-size: .9rem; }
  .methode, .onsight, .materiel, .ligne, .renfo, .coach, .contact { grid-template-columns: 1fr; }
  /* téléphone : même principe qu'à l'ordinateur — l'écran S'ARRÊTE, le viseur et UNE carte restent en place, la rafale avance.
     Les trois cartes occupent la même case (la hauteur de la plus haute) : rien ne saute quand on passe de l'une à l'autre. */
  .methode-piste { height: 280vh; }
  .methode-colle { height: calc(100svh - var(--hdr) - 78px - env(safe-area-inset-bottom)); justify-content: flex-start; padding-top: 10px; }   /* 78 px : la barre de réservation */
  .methode-colle .tete { margin-bottom: 14px; }
  .methode-colle .viseur__images { max-height: 34svh; }
  .methode { align-items: start; gap: 14px; }
  .methode-colle .viseur__images { height: auto; aspect-ratio: 4 / 3; max-height: 38svh; }
  .methode__cartes { display: grid; gap: 0; }
  .methode__cartes .carte { grid-area: 1 / 1; transition: opacity .45s, transform .45s var(--doux-e), box-shadow .5s; }
  .methode__cartes .carte p { font-size: .94rem; line-height: 1.5; }
  .methode__cartes .carte:not(.is-etape) { opacity: 0 !important; transform: translateY(16px) !important; pointer-events: none; }
  .methode__cartes .carte.is-etape { opacity: 1 !important; transform: none !important; }
  .calme .methode__cartes { gap: 14px; } .calme .methode__cartes .carte { grid-area: auto; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .ligne__txt { position: static; }
  .tarifs { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .tuiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .visionneuse__fleche--g, .visionneuse__fleche--d { top: auto; bottom: 56px; margin-top: 0; }
  .nav__list { gap: 18px; }
  .coach__photo { max-width: 460px; }
  .niveaux__in { grid-template-columns: 1fr auto; align-content: end; padding-bottom: 46px; }
  .niveaux__tete { grid-column: 1 / -1; align-self: start; padding-top: 22px; }
  .niveaux__textes { grid-row: auto; align-self: end; min-height: 300px; }
  .jauge { grid-column: 2; grid-row: auto; align-self: end; gap: 46px; padding-left: 18px; }
  .jauge span { display: none; }
  .jauge b { width: 40px; height: 40px; font-size: 1.25rem; }
  .niveaux__photos { inset: var(--hdr) 0 38% 0; }
  .niveaux__tete .titre { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .niveaux__tete { padding-top: 0; align-self: end; }
}
@media (max-width: 980px) and (max-height: 700px) { .methode-colle .viseur__images { aspect-ratio: 2 / 1; } .methode-colle .tete .sur, .methode-colle .viseur__legende { display: none; } .methode-colle .tete { margin-bottom: 8px; } .methode-colle .tete .titre { font-size: 1.65rem; } .methode .methode__cartes .carte { padding: 12px 14px 14px 52px; } .methode .methode__cartes .carte__n { left: 14px; top: 13px; font-size: 1.5rem; } .methode .methode__cartes .carte h3 { font-size: 1.25rem; } .methode .methode__cartes .carte p { font-size: .86rem; line-height: 1.42; } }   /* petit téléphone : tout doit tenir dans l'écran épinglé */
@media (max-width: 620px) {
  .stage ul { grid-template-columns: 1fr; }
  .stage { height: 560px !important; width: 84vw; }
  .carte { padding: 22px 22px 24px 66px; }
  .carte__n { left: 20px; }
  .radar { --ray: 37%; }
  .radar__axe { font-size: .58rem; padding: 7px 10px; letter-spacing: .03em; }
  .etapes li { padding: 20px 20px 20px 74px; }
  .etapes li::before { left: 16px; }
}
/* ---------- suite du 03/10/2026 : écrans moyens et petits ---------- */
@media (max-width: 1180px) {
  .pied__grille { grid-template-columns: repeat(3, 1fr); }
  .pied__marque { grid-column: 1 / -1; }
  .nav { gap: 18px; } .nav__list { gap: 16px; } .nav__link { font-size: .8rem; }
}
@media (max-width: 980px) {
  /* le menu déroulant : un vrai verre dépoli (son filtre marche maintenant que l'en-tête n'en porte plus) */
  .nav { background: rgba(5, 26, 43, .8); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); max-height: calc(100dvh - var(--hdr)); overflow-y: auto; }
  .nav__link { font-size: 1rem; }
  .lires { grid-template-columns: 1fr 1fr; }
  .licence { grid-template-columns: 1fr; }
  .licence__liens { grid-template-columns: auto auto; justify-content: start; gap: 4px 18px; text-align: left; }
  .page__grille, .resa { grid-template-columns: minmax(0, 1fr); }
  .page__cote, .resa__cote { position: static; }
  .page--stage .page__cote { display: none; }           /* téléphone : le bouton de pré-inscription est dans la page, sous les faits */
  .prose .stage-p__cta { display: block; }
  .niveaux__cta { display: none; }
  .niveaux__textes { min-height: 272px; }
  .niveaux__in { padding-bottom: 92px; }
  .demo .niveaux__in { padding-bottom: 124px; }
  .niveau p:last-child { font-size: .95rem; line-height: 1.55; }
  .niveau h3 { margin: 4px 0 8px; }
  .niveaux__mini { margin-top: 10px; padding: 6px 12px; font-size: .72rem; }
  /* niveaux : la photo se fond dans le haut (plus de bord net sous le héros), et la courbe du saut passe en haut à droite, loin du rider et du texte */
  .niveaux__voile { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 8%, rgba(5, 26, 43, 0) 24%, rgba(5, 26, 43, .1) 36%, rgba(5, 26, 43, .6) 52%, var(--bg) 63%, var(--bg) 100%); }
  .niveaux__arc { inset: 0; height: 100%; }
  .niveaux__photos { -webkit-mask-image: radial-gradient(120% 70% at 50% 45%, #000 40%, rgba(0, 0, 0, .72) 92%); mask-image: radial-gradient(120% 70% at 50% 45%, #000 40%, rgba(0, 0, 0, .72) 92%); }
  .niveaux__photos img:nth-child(1) { object-position: 70% 50%; }
  .niveaux__photos img:nth-child(2) { object-position: 62% 55%; }
  .niveaux__photos img:nth-child(3) { object-position: 72% 40%; }
  /* la barre de réservation devient une vraie barre du bas */
  .barre { gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .barre__txt { display: grid; gap: 2px; }
  .barre__txt span { font-size: .64rem; letter-spacing: .06em; }
  .barre.is-vue ~ .demo-badge { bottom: 78px; }
  .haut { right: 14px; bottom: calc(80px + env(safe-area-inset-bottom)); width: 46px; height: 46px; }
  .p-reservation .haut { bottom: 16px; }
  .barre.is-vue ~ .toast { bottom: 90px; }
  .pied { padding-bottom: 120px; }
  .cookies { bottom: 10px; left: 10px; right: 10px; }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* héros : le titre en haut, le rider AU CENTRE, le texte et le bouton en bas (téléphone, et tablette tenue en hauteur) */
  .hero { align-items: stretch; padding-bottom: 104px; }
  .hero__in { display: flex; flex-direction: column; }
  .hero__titre { max-width: none; font-size: clamp(2.4rem, 12.2vw, 3.7rem); }
  .hero__bas { margin-top: auto; width: 100%; }
  .hero__photo img { object-position: 50% 50%; }
  .hero__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .72) 0%, rgba(5, 26, 43, .3) 26%, rgba(5, 26, 43, 0) 40%, rgba(5, 26, 43, 0) 52%, rgba(5, 26, 43, .7) 66%, rgba(5, 26, 43, .7) 100%); }
  .niveaux::before { height: 30vh; }
  .hero__texte { font-size: .98rem; }
  .hero__cta { margin-top: 16px; }
  .hero__cta .btn { width: 100%; }
  .hero__cta .btn--ligne { display: none; }
  .hero__preuves { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-top: 18px; padding-top: 14px; }
  .hero__preuves b { font-size: 1.12rem; }
}
@media (min-width: 761px) and (max-aspect-ratio: 4/5) { .hero__titre { font-size: clamp(3.7rem, 10.5vw, 5.6rem); } .hero__bas { width: min(100%, 580px); } .hero__texte { font-size: 1.12rem; } .hero__preuves { grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 30px; } }
@media (max-width: 760px) {
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .lires { grid-template-columns: 1fr; }
  .resa__infos .suite { grid-template-columns: 1fr; }
  .licence__liens { grid-template-columns: 1fr; }
  .stage__pied { flex-wrap: wrap; }
  /* la galerie devient une bande qu'on fait défiler du doigt (14 photos en hauteur feraient une page interminable) */
  .tuiles { display: flex; gap: 10px; margin-inline: -20px; padding: 4px 20px 14px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tuiles::-webkit-scrollbar { display: none; }
  .tuile, .tuile--g { flex: none; width: 66vw; aspect-ratio: 4 / 5; scroll-snap-align: center; }
  .marques img { height: 32px; } .marques img.marques__ko { height: 50px; }
  .appel__in { justify-items: stretch; } .appel__in .btn { width: 100%; }
  .tarif__badge { right: 14px; }
}
@media (max-width: 760px) and (max-height: 720px) { .hero__texte { display: none; } .hero__titre { font-size: clamp(2.2rem, 11vw, 3rem); } .niveaux__mini, .niveaux__tete .sur { display: none; } .niveaux__textes { min-height: 250px; } .niveau p:last-child { font-size: .9rem; } }
@media (max-width: 620px) {
  .grille { grid-template-columns: 1fr; }
  .puces--larges { grid-template-columns: 1fr; }
  .stage-p__atouts { grid-template-columns: 1fr; gap: 8px; }
  .prose .stage-p__atouts .encadre { padding: 14px 14px; }
  .prose .stage-p__atouts .encadre h3 { font-size: 1.2rem; }
  .prose .stage-p__atouts .encadre p { margin: 4px 0 0; font-size: .92rem; line-height: 1.5; }
  .stage-p__materiel { grid-template-columns: 1fr 1fr; gap: 8px; }
  .materiel-c { padding: 14px 12px; }
  .stage-p__bloc { padding: 20px 16px; }
  .resa__form { padding: 20px 16px; border-radius: var(--r); }
  .pas__etape span { font-size: .58rem; letter-spacing: .06em; }
  .pas__etape b { width: 40px; height: 40px; } .pas__fil { top: 19px; }
  .formule__in { grid-template-columns: 1fr; padding: 14px 14px 14px 48px; } .formule__in::before { left: 14px; }
  .formule__in em { grid-column: 1; grid-row: auto; margin-top: 6px; text-align: left; font-size: 1.45rem; } .formule__in em i { display: inline; margin-left: 6px; }
  .resa__nav { flex-wrap: wrap; } .resa__nav .btn { flex: 1 1 100%; } #resa-retour { order: 2; }
  .resa__secret { text-align: left; }
  .plie summary { padding: 18px 18px; font-size: 1.2rem; } .plie__in { padding: 0 18px 18px; }
  .prose { padding: 22px 18px; }
  .page--faq .prose { padding: 0; }
  .puce span { min-width: 50px; padding: 14px 12px; }
  .cookies__choix { flex: 1 1 100%; }
  .barre__cta { padding: 15px 16px; font-size: .8rem; }
  .pied__bas { flex-direction: column; }
}
@media (max-width: 400px) { .pied__grille { grid-template-columns: 1fr; } .barre__wa { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* ==========================================================================
   KITE ODYSSEY (05/10/2026) — ce qui est propre à l'école, par-dessus le socle repris de Big Air Coaching.
   Deux couleurs : le BLEU du lagon (#2ea3f2, celui du site d'origine) pour l'identité — sur-titres, mots soulignés,
   filets, jauges — et l'OR du logo pour l'ACTION : boutons, prix, choix cochés. Un bouton doré ne se confond avec rien.
   La police des titres est Oswald (celle du site d'origine), droite : plus d'italique.
   ========================================================================== */
.titre, .hero__titre, .niveau h3 { line-height: 1.04; letter-spacing: .005em; }
.titre { font-size: clamp(2.1rem, 4.8vw, 3.9rem); }
.titre--s { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.titre em, .hero__titre em { font-style: normal; background: var(--grad-eau); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em .06em 0; margin: 0 -.06em -.06em 0; }
.prix__n span, .tarif__prix span { font-style: normal; padding: 0; margin: 0; }
.sur, .hero__sur, .fil a, .cote__sur, .recap__sur { color: var(--eau-2); }
.progress span, .sur::before, .nav__link::after, .chargeur__barre i, .pas__fil i { background: var(--grad-eau); }
.chargeur__barre i { box-shadow: 0 0 14px rgba(var(--eau-a), .9); }
.liste li::before, .prose h3 { color: var(--eau-2); }
.prose a:not(.btn) { color: var(--eau-2); }
.licence__titre em { font-style: normal; }
.section--nuit { background: linear-gradient(180deg, rgba(7, 35, 56, 0), rgba(7, 35, 56, .86) 14%, rgba(7, 35, 56, .86) 86%, rgba(7, 35, 56, 0)); }

/* ---------- l'eau (toile fixe, eau.js) : derrière tout, sauf la photo du héros ---------- */
.eau { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }
.calme .eau { display: none; }

/* ---------- le logo (emblème haut : il lui faut de la hauteur) ---------- */
.brand img { height: 54px; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); transition: height .3s var(--doux-e); }
.header.is-colle .brand img { height: 46px; }
.chargeur__logo { width: min(210px, 52vw); }
.pied__marque img { height: 78px; }
.marques img[src*="p-ancv"], .marques img[src*="p-viking"], .marques img[src*="p-ffvl"] { height: 48px; }

/* ---------- héros ---------- */
.hero__titre { max-width: 9.4em; font-size: clamp(2.7rem, 5.4vw, 5rem); }
.hero__sur { letter-spacing: .2em; }
.hero__photo img { object-position: 78% 50%; transform-origin: 74% 60%; }
.hero__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .86) 0%, rgba(5, 26, 43, .6) 34%, rgba(5, 26, 43, 0) 60%), linear-gradient(180deg, rgba(5, 26, 43, .55) 0%, rgba(5, 26, 43, 0) 24%, rgba(5, 26, 43, 0) 70%, rgba(5, 26, 43, .5) 100%); }
.hero__preuves b { font-size: 1.16rem; }
.defile { font-weight: 600; }
/* le rideau qui monte sur la photo du héros (elle reste en place) : il précède la première section */
.section--offres { padding-top: clamp(50px, 7vw, 100px); }
.section--offres::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 42vh; background: linear-gradient(180deg, rgba(5, 26, 43, 0) 0%, rgba(5, 26, 43, .5) 46%, rgba(5, 26, 43, .9) 80%, var(--bg) 100%); pointer-events: none; }
.section--offres { background: var(--bg); }

/* ---------- les cours : quatre cartes ---------- */
.offres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.offres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offre { position: relative; display: flex; flex-direction: column; border-radius: calc(var(--r) + 4px); overflow: hidden; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); transition: transform .5s var(--ressort), box-shadow .35s; }
.offre:hover { transform: translateY(-8px); box-shadow: inset 0 0 0 1.5px rgba(var(--eau-a), .7), 0 40px 60px -40px rgba(var(--eau-a), .55); }
.offre--fort { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .6); }
.offre__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.offre__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--doux-e); }
.offre:hover .offre__img img { transform: scale(1.08); }
.offre__in { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 20px 18px; }
.offre__faits { display: flex; flex-wrap: wrap; gap: 6px; }
.offre__faits span { padding: 6px 10px; border-radius: 999px; background: #0b3550; box-shadow: inset 0 0 0 1px rgba(var(--eau-a), .4); font: 700 .66rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--eau-2) !important; }
.offre h3 { font: 600 1.55rem/1.08 var(--f-t); text-transform: uppercase; letter-spacing: .01em; }
.offre__in > p:not([class]) { flex: 1; font-size: .93rem; line-height: 1.55; }
.offre__pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--ligne); }
.offre__prix { font: 600 2.3rem/1 var(--f-t); color: var(--txt); }
.offre__plus { font: 600 .8rem/1.35 var(--f-c); color: var(--eau-2); text-decoration: none; }
.offre__plus::after { content: "\00a0→"; position: relative; left: 0; transition: left .3s var(--doux-e); }   /* la flèche tient au dernier mot (espace insécable) : elle ne passe jamais seule à la ligne */
.offre__plus:hover::after { left: 5px; }   /* elle glisse SANS changer la mise en page (décalage relatif, pas de marge) : le texte ne se recoupe pas au survol */
.offre__plus::before { content: ""; position: absolute; inset: 0; z-index: 0; }   /* toute la carte mène à la page du cours… */
.offre__pied .btn { position: relative; z-index: 1; }                             /* …sauf le bouton, qui réserve */
.section--autres { padding: clamp(60px, 8vw, 100px) 0; }

/* ---------- 2 élèves maximum ---------- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.duo__photo { border-radius: calc(var(--r) + 6px); overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); }
.duo__photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 50% 30%; }
.duo__txt p:not(.sur) { margin-top: 14px; }
.duo__chiffres { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 14px clamp(20px, 3vw, 44px); margin: 26px 0; padding: 20px 0; border-block: 1px solid var(--ligne); }
.duo__chiffres li { display: grid; gap: 6px; }
.duo__chiffres b { font: 600 clamp(2.2rem, 3.6vw, 3.2rem)/1 var(--f-t); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.duo__chiffres li > span { max-width: 15ch; font: 600 .7rem/1.3 var(--f-c); letter-spacing: .1em; text-transform: uppercase; color: var(--doux); }
.duo__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- la progression : quatre étapes épinglées ---------- */
.parcours { position: relative; height: 420vh; }
.parcours__colle { position: sticky; top: 0; height: 100svh; overflow: clip; }
.parcours__photos, .parcours__voile { position: absolute; inset: 0; }
.parcours__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transform: scale(1.12); transition: opacity 1.1s var(--doux-e), transform 2.4s var(--doux-e); }
.parcours__photos img.is-on { opacity: 1; transform: scale(1); }
.parcours__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .95) 0%, rgba(5, 26, 43, .82) 40%, rgba(5, 26, 43, .2) 74%, rgba(5, 26, 43, .5) 100%), linear-gradient(180deg, var(--bg) 0%, rgba(5, 26, 43, .5) 14%, rgba(5, 26, 43, 0) 30%, rgba(5, 26, 43, 0) 80%, var(--bg) 100%); }
.parcours__in { position: relative; display: grid; grid-template-columns: minmax(0, 620px) 1fr; grid-template-rows: auto 1fr auto; align-content: center; gap: 22px 30px; height: 100%; padding: calc(var(--hdr) + 26px) 0 96px; }
.parcours__tete { grid-column: 1; }
.parcours__etapes { grid-column: 1; grid-row: 2; position: relative; display: grid; grid-template-rows: 1fr auto auto; align-content: start; gap: 14px; }
.etape { grid-row: 1; grid-column: 1; opacity: 0; transform: translateY(30px); transition: opacity .5s var(--doux-e), transform .8s var(--doux-e); pointer-events: none; }
.etape.is-on { opacity: 1; transform: none; pointer-events: auto; }
.etape__n { margin-bottom: 14px; font: 600 clamp(2.4rem, 5.6vw, 4.6rem)/1 var(--f-t); text-transform: uppercase; color: var(--txt); }
.etape__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.etape__liste li { position: relative; padding-left: 28px; font-size: .95rem; line-height: 1.4; color: rgba(238, 244, 250, .92); opacity: 0; transform: translateX(-14px); transition: opacity .45s var(--doux-e), transform .6s var(--doux-e); }
.etape__liste li::before { content: ""; position: absolute; left: 0; top: .12em; width: 18px; height: 18px; border-radius: 50%; background: #0b3550; box-shadow: inset 0 0 0 1.5px rgba(var(--eau-a), .7); }
.etape__liste li::after { content: ""; position: absolute; left: 5px; top: .46em; width: 8px; height: 4.5px; border-left: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2); transform: rotate(-45deg) scale(0); transition: transform .4s var(--ressort); }
.etape.is-on .etape__liste li { opacity: 1; transform: none; transition-delay: calc(var(--k, 0) * 55ms + 120ms); }
.etape.is-on .etape__liste li::after { transform: rotate(-45deg) scale(1); transition-delay: calc(var(--k, 0) * 55ms + 360ms); }
.etape__liste--longue li { font-size: .88rem; }
.parcours__note { grid-row: 2; max-width: 56ch; font-size: .8rem; font-style: italic; color: var(--doux); }
.parcours__cta { grid-row: 3; justify-self: start; }
.rail { grid-column: 1 / -1; grid-row: 3; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding-top: 26px; }
.rail li:not(.rail__fil) { position: relative; display: grid; justify-items: start; gap: 8px; opacity: .45; transition: opacity .5s; }
.rail li.is-on { opacity: 1; }
.rail b { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-top: -46px; border-radius: 50%; background: rgba(5, 26, 43, .95); box-shadow: inset 0 0 0 1.5px var(--ligne-2); font: 600 1.15rem/1 var(--f-t); transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--ressort); }
.rail li.is-on b { background: var(--grad); color: #1c0e00; box-shadow: 0 0 0 6px rgba(var(--accent-a), .2); transform: scale(1.1); }
.rail span { font: 700 .72rem/1 var(--f-c); letter-spacing: .14em; text-transform: uppercase; }
.rail__fil { position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.rail__fil i { position: absolute; inset: 0; background: var(--grad-eau); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- le matériel ---------- */
.liste--courte li { padding-block: 14px; }
.liste--courte b { font-size: 1.25rem; }
.liste b { font-style: normal; font-weight: 600; }

/* ---------- le spot ---------- */
.spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.spot__txt p:not(.sur) { margin-top: 16px; }
.spot__atouts { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.spot__atouts li { padding: 9px 14px; border-radius: 999px; background: #0b3550; box-shadow: inset 0 0 0 1px rgba(var(--eau-a), .4); font: 700 .72rem/1.2 var(--f-c); letter-spacing: .07em; text-transform: uppercase; color: var(--eau-2); }
.spot__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.spot__photo { border-radius: calc(var(--r) + 6px); overflow: hidden; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); }
.spot__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- tarifs : six cartes ---------- */
.tarifs--six { gap: 26px 20px; }
.tarif h3 { font-size: 1.7rem; line-height: 1.06; }
.tarif__prix { font-size: clamp(3rem, 5vw, 4.2rem); line-height: 1; }
.tarif--fort { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .7), 0 40px 70px -50px rgba(var(--accent-a), .6); background: linear-gradient(160deg, #0e4a70, var(--carte) 62%); }

/* ---------- le coaching (Big Air Coaching) ---------- */
.section--coaching { padding: 0 0 clamp(70px, 9vw, 120px); }
.suite-bac { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px clamp(22px, 4vw, 50px); padding: clamp(24px, 3.4vw, 40px); border-radius: calc(var(--r) + 6px); background: linear-gradient(120deg, #0b1522, #0c2233 60%); box-shadow: inset 0 0 0 1px rgba(255, 137, 2, .4); }
.suite-bac__logo { width: clamp(170px, 18vw, 230px); height: auto; }
.suite-bac__txt p { margin-top: 10px; font-size: .96rem; }
.suite-bac .titre em { background: linear-gradient(120deg, #ffb24a, #ff8902 55%, #f25c05); -webkit-background-clip: text; background-clip: text; }
.suite-bac__mieux { font-weight: 700; color: #ffb24a !important; }
.suite-bac .btn--ligne:hover { box-shadow: inset 0 0 0 1.5px #ffb24a; color: #ffb24a; }

/* ---------- les pages des cours ---------- */
.page__tete--offre { padding-bottom: clamp(22px, 3vw, 40px); }
.faits { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.faits li { padding: 11px 16px; border-radius: 999px; background: #0b3550; box-shadow: inset 0 0 0 1px rgba(var(--eau-a), .45); font: 700 .84rem/1 var(--f-c); letter-spacing: .08em; text-transform: uppercase; color: var(--eau-2); }
.faits li:last-child { background: var(--grad); box-shadow: none; color: #1c0e00; }
.page__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.prose--offre { display: grid; gap: clamp(26px, 4vw, 44px); }
.prose--offre .page__image { margin: 0; aspect-ratio: 16 / 9; }
.prose .bloc > h2 { margin-top: 0; }
.prose .bloc__note { margin-top: 0; font-size: .9rem; }
.seances { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.seances--une { grid-template-columns: 1fr; }
.seance { padding: 20px 20px 18px; border-radius: var(--r); background: var(--carte-2); box-shadow: inset 0 0 0 1px var(--ligne); }
.prose .seance h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 600 1.5rem/1.1 var(--f-t); color: var(--txt); }
.prose .seance h3 span { font: 600 1rem/1 var(--f-t); color: var(--accent-2); }
.prose .seance ul.coches { margin: 0; gap: 7px; font-size: .93rem; }
.seances--une .seance ul.coches { grid-template-columns: 1fr 1fr; gap: 9px 24px; }
.packs, .fournis { display: grid; gap: 14px; margin-top: 16px; }
.packs { grid-template-columns: 1fr 1fr; }
.fournis { grid-template-columns: repeat(3, 1fr); }
.pack, .fourni { padding: 20px; border-radius: var(--r); background: var(--carte-2); box-shadow: inset 0 0 0 1px var(--ligne); }
.pack { display: grid; justify-items: start; gap: 6px; }
.pack--fort { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-a), .6); }
.prose .pack h3, .prose .fourni h3 { margin: 0; font: 600 1.3rem/1.1 var(--f-t); color: var(--txt); }
.prose .pack p { margin: 0; }
.prose .pack__an { font: 700 .68rem/1 var(--f-c); letter-spacing: .12em; text-transform: uppercase; color: var(--eau-2); }
.prose .pack__prix { margin: 4px 0 10px; font: 600 2.6rem/1 var(--f-t); color: var(--txt); }
.prose .fourni p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
.prose .bloc--prevoir p { margin-bottom: 0; }

/* ---------- la météo ---------- */
.vent-carte { padding-bottom: clamp(40px, 6vw, 80px); }
.vent-carte__cadre { position: relative; display: grid; place-content: center; justify-items: center; gap: 16px; min-height: min(72vh, 620px); padding: 30px 20px; border-radius: calc(var(--r) + 6px); overflow: hidden; text-align: center; background: radial-gradient(90% 120% at 50% 0%, rgba(var(--eau-a), .28), transparent 65%), var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.vent-carte__titre { font: 600 clamp(1.6rem, 3vw, 2.3rem)/1.1 var(--f-t); text-transform: uppercase; }
.vent-carte__note { max-width: 46ch; font-size: .84rem; color: var(--doux); }
.vent-carte__cadre.is-charge { display: block; padding: 0; }
.vent-carte__cadre iframe { display: block; width: 100%; height: min(72vh, 620px); border: 0; }
.prose--meteo { margin-top: 14px; padding: 14px 20px; }
.prose--meteo p { margin: 0; font-size: .86rem; }

/* ---------- le spot (page) : la carte de la zone de navigation ---------- */
.prose .zone { margin: 18px 0; border-radius: var(--r); overflow: hidden; box-shadow: inset 0 0 0 1px var(--ligne); }
.prose .zone img { width: 100%; height: auto; }

/* ---------- la réservation ---------- */
.licence__qr { justify-self: center; width: 104px; height: 104px; padding: 7px; border-radius: 12px; background: #fff; image-rendering: pixelated; }
.formule__in em { font-style: normal; }

@media (max-width: 1180px) {
  .offres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offres--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tarifs--six { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .brand img, .header.is-colle .brand img { height: 46px; }
  .duo, .spot { grid-template-columns: 1fr; }
  .spot__photo { order: -1; }
  .suite-bac { grid-template-columns: 1fr; justify-items: start; }
  .offres--trois { grid-template-columns: 1fr; }
  .fournis { grid-template-columns: 1fr; }
  .page--offre .page__cote { display: none; }           /* téléphone : le bouton « Réserver ce cours » est en tête de page et dans la barre du bas */
  /* la progression : la photo en haut, le texte dessous */
  .parcours__in { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-content: end; gap: 12px; padding: calc(var(--hdr) + 14px) 0 96px; }
  .parcours__tete .titre { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .parcours__voile { background: linear-gradient(180deg, var(--bg) 0%, rgba(5, 26, 43, .25) 16%, rgba(5, 26, 43, .1) 30%, rgba(5, 26, 43, .86) 46%, var(--bg) 58%, var(--bg) 100%); }
  .parcours__photos img { height: 52%; object-position: 62% 50%; }
  .parcours__etapes { align-self: end; min-height: 46svh; }
  .parcours__tete { align-self: start; }
  .etape__n { margin-bottom: 10px; font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .etape__liste { gap: 6px 14px; }
  .etape__liste li { padding-left: 24px; font-size: .82rem; line-height: 1.3; }
  .etape__liste--longue li { font-size: .76rem; }
  .parcours__note, .parcours__cta { display: none; }
  .rail span { font-size: .6rem; letter-spacing: .08em; }
  .rail b { width: 34px; height: 34px; margin-top: -40px; font-size: 1rem; }
}
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  /* héros : le titre en haut (sur le fond uni de la toile), le sourire au centre, le texte et le bouton en bas */
  .hero__titre { max-width: none; font-size: clamp(2.2rem, 10.6vw, 3.3rem); }
  .hero__photo img { object-position: 50% 100%; transform-origin: 50% 55%; }
  .hero__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .3) 0%, rgba(5, 26, 43, 0) 30%, rgba(5, 26, 43, 0) 50%, rgba(5, 26, 43, .82) 66%, rgba(5, 26, 43, .9) 100%); }
  .section--offres::before { height: 30vh; }
}
@media (max-width: 760px) {
  .offres { display: flex; gap: 12px; margin-inline: -20px; padding: 4px 20px 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .offres::-webkit-scrollbar { display: none; }
  .offres .offre { flex: none; width: 78vw; scroll-snap-align: center; }
  .offres--trois { display: grid; margin-inline: 0; padding: 0; overflow: visible; }
  .offres--trois .offre { width: auto; }
  .tarifs--six { grid-template-columns: 1fr; }
  .duo__chiffres { grid-template-columns: 1fr 1fr; }
  .seances, .packs, .seances--une .seance ul.coches { grid-template-columns: 1fr; }
  .page__actions .btn { width: 100%; }
  .licence__qr { display: none; }                        /* on ne scanne pas son propre écran */
  .marques img[src*="p-ancv"], .marques img[src*="p-viking"], .marques img[src*="p-ffvl"] { height: 38px; }
}
@media (max-width: 760px) and (max-height: 720px) { .parcours__tete .sur { display: none; } .etape__liste li { font-size: .76rem; } .etape__liste--longue li { font-size: .7rem; } }

/* ---------- réglages après regard (05/10) ---------- */
.hero__photo img { object-position: 46% 50%; }
.hero__titre { font-size: clamp(2.6rem, 5vw, 4.6rem); }
.brand img { height: 60px; }
.header.is-colle .brand img { height: 50px; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) { .hero__photo img { object-position: 50% 100%; } .hero__titre { font-size: clamp(2.2rem, 10.6vw, 3.3rem); } }
@media (max-width: 980px) { .brand img, .header.is-colle .brand img { height: 48px; } }

/* ---------- LES RAILS D'ÉTAPES (progression, réservation) : le trait ne touche jamais un rond, et le libellé respire (retours du 05/10) ---------- */
.rail { grid-column: 1 / -1; grid-row: 3; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; padding-top: 0; }
.rail li { position: relative; display: grid; justify-items: start; gap: 16px; opacity: 1; }
.rail b { margin-top: 0; width: 44px; height: 44px; opacity: .85; transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--ressort), opacity .5s; }
.rail span { opacity: .62; transition: opacity .5s; }
.rail li.is-on b, .rail li.is-on span { opacity: 1; }
.rail li.is-on b { box-shadow: none; transform: scale(1.1); }
/* un tronçon par étape, du rond au rond suivant, avec 16 px d'air de chaque côté ; --p (0 → 1) le remplit */
.rail li:not(:last-child)::before { content: ""; position: absolute; left: 64px; right: 16px; top: 21px; height: 2px; border-radius: 2px;
  background: linear-gradient(var(--eau), var(--eau)) no-repeat 0 0 / calc(var(--p, 0) * 100%) 100%, rgba(255, 255, 255, .2); }
.pas { margin-bottom: 36px; }
.pas__etape { gap: 18px; }
.pas__etape b { box-shadow: inset 0 0 0 1.5px #33465a, 0 0 0 12px var(--carte); }
.pas__etape.is-fait b { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 12px var(--carte); }
.pas__etape.is-on b { transform: scale(1.1); box-shadow: 0 0 0 11px var(--carte); }      /* un halo de la couleur du cadre : le trait s'arrête avant le rond */
.pas__fil { height: 2px; top: 21px; }
@media (max-width: 980px) {
  .rail b { width: 36px; height: 36px; margin-top: 0; }
  .rail li:not(:last-child)::before { left: 50px; right: 12px; top: 17px; }
  .rail li { gap: 12px; }
}
@media (max-width: 620px) { .pas__etape { gap: 15px; } .pas__fil { top: 19px; } .pas__etape b { box-shadow: inset 0 0 0 1.5px #33465a, 0 0 0 9px var(--carte); } .pas__etape.is-fait b { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 9px var(--carte); } .pas__etape.is-on b { box-shadow: 0 0 0 9px var(--carte); } }

/* ---------- LES CARTES ARRIVENT EN MOUVEMENT (retour du 05/10 : « plus de motion sur l'apparition des cartes ») ----------
   La carte monte de loin en basculant, chacune légèrement tournée (un jeu qu'on distribue) ; sa photo s'ouvre comme un
   rideau et dézoome ; puis son contenu se pose ligne après ligne, le prix compte, le bouton rebondit ; un reflet la traverse. */
.js .offre[data-vue], .js .tarif[data-vue], .js .seance[data-vue] { transform: perspective(1200px) translate3d(calc((var(--d, 0) - 1.5) * -26px), 150px, -120px) rotateX(34deg) rotateZ(calc((var(--d, 0) - 1.5) * 4deg)) scale(.8); transform-origin: 50% 100%; filter: blur(10px);
  transition: opacity .6s var(--doux-e) calc(var(--d, 0) * 140ms), transform 1.25s cubic-bezier(.16, 1.32, .3, 1) calc(var(--d, 0) * 140ms), filter .7s var(--doux-e) calc(var(--d, 0) * 140ms), box-shadow .35s; }
.js .offre[data-vue].is-vu, .js .tarif[data-vue].is-vu, .js .seance[data-vue].is-vu { transform: none; filter: none; }
.js .offre[data-vue].is-vu:hover { transform: translateY(-8px); transition: transform .5s var(--ressort), box-shadow .35s; }
.js .offre[data-vue] .offre__img { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--doux-e) calc(var(--d, 0) * 140ms + 250ms); }
.js .offre[data-vue] .offre__img img { transform: scale(1.5); transition: transform 1.8s var(--doux-e) calc(var(--d, 0) * 140ms + 250ms); }
.js .offre[data-vue].is-vu .offre__img { clip-path: inset(0); }
.js .offre[data-vue].is-vu .offre__img img { transform: none; }
.js .offre[data-vue].is-vu:hover .offre__img img { transform: scale(1.08); transition: transform 1.1s var(--doux-e); }
.js .offre[data-vue] .offre__in > * { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--doux-e), transform .75s var(--doux-e); }
.js .offre[data-vue].is-vu .offre__in > * { opacity: 1; transform: none; }
.js .offre[data-vue].is-vu .offre__in > :nth-child(1) { transition-delay: calc(var(--d, 0) * 140ms + 480ms); }
.js .offre[data-vue].is-vu .offre__in > :nth-child(2) { transition-delay: calc(var(--d, 0) * 140ms + 560ms); }
.js .offre[data-vue].is-vu .offre__in > :nth-child(3) { transition-delay: calc(var(--d, 0) * 140ms + 640ms); }
.js .offre[data-vue].is-vu .offre__in > :nth-child(4) { transition-delay: calc(var(--d, 0) * 140ms + 720ms); }
.js .offre[data-vue].is-vu .offre__in > :nth-child(5) { transition-delay: calc(var(--d, 0) * 140ms + 800ms); }
.js .offre[data-vue] .offre__pied .btn, .js .tarif[data-vue] > .btn { transform: scale(.5); opacity: 0; transition: transform .7s var(--ressort) calc(var(--d, 0) * 140ms + 900ms), opacity .4s calc(var(--d, 0) * 140ms + 900ms), box-shadow .3s; }
.js .offre[data-vue].is-vu .offre__pied .btn, .js .tarif[data-vue].is-vu > .btn { transform: none; opacity: 1; }
.js .tarif[data-vue] .tarif__prix { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--doux-e) calc(var(--d, 0) * 140ms + 350ms); }
.js .tarif[data-vue].is-vu .tarif__prix { clip-path: inset(0 -10% 0 0); }
.js .tarif[data-vue] .tarif__badge { transform: translateY(14px) scale(.4) rotate(-8deg); opacity: 0; transition: transform .7s var(--ressort) calc(var(--d, 0) * 140ms + 1000ms), opacity .3s calc(var(--d, 0) * 140ms + 1000ms); }
.js .tarif[data-vue].is-vu .tarif__badge { transform: none; opacity: 1; }
/* le reflet qui traverse la carte, une fois, à son arrivée */
.offre::after, .tarif::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(190, 232, 255, .2) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 130% 0; opacity: 0; }
.js .offre.is-vu::after, .js .tarif.is-vu::after { animation: reflet-carte 1.3s var(--doux-e) calc(var(--d, 0) * 140ms + 500ms) 1 both; }
@keyframes reflet-carte { 0% { background-position: 130% 0; opacity: 1; } 99% { opacity: 1; } 100% { background-position: -40% 0; opacity: 0; } }
.calme .offre[data-vue] .offre__img, .calme .tarif[data-vue] .tarif__prix { clip-path: none !important; }
.calme .offre[data-vue] .offre__img img, .calme .offre[data-vue] .offre__in > *, .calme .offre__pied .btn, .calme .tarif > .btn, .calme .tarif__badge { opacity: 1 !important; transform: none !important; }
.calme .offre::after, .calme .tarif::after { display: none; }
/* les encadrés des pages (fourni, packs) : en cascade ; les gestes des séances se cochent un à un */
.js .fourni, .js .pack { opacity: 0; transform: translate3d(0, 40px, 0) scale(.9); transition: opacity .6s var(--doux-e), transform .9s var(--ressort); }
.js .is-vu .fourni, .js .is-vu .pack, .calme .fourni, .calme .pack { opacity: 1; transform: none; }
.js .is-vu .fourni:nth-child(2), .js .is-vu .pack:nth-child(2) { transition-delay: .14s; }
.js .is-vu .fourni:nth-child(3) { transition-delay: .28s; }
.js .seance .coches li { opacity: 0; transform: translateX(-16px); transition: opacity .45s var(--doux-e), transform .6s var(--doux-e); }
.js .seance.is-vu .coches li, .calme .seance .coches li { opacity: 1; transform: none; }
.js .seance.is-vu .coches li { transition-delay: calc(var(--d, 0) * 140ms + 920ms); }
.js .seance.is-vu .coches li:nth-child(1) { transition-delay: calc(var(--d, 0) * 140ms + 500ms); }
.js .seance.is-vu .coches li:nth-child(2) { transition-delay: calc(var(--d, 0) * 140ms + 560ms); }
.js .seance.is-vu .coches li:nth-child(3) { transition-delay: calc(var(--d, 0) * 140ms + 620ms); }
.js .seance.is-vu .coches li:nth-child(4) { transition-delay: calc(var(--d, 0) * 140ms + 680ms); }
.js .seance.is-vu .coches li:nth-child(5) { transition-delay: calc(var(--d, 0) * 140ms + 740ms); }
.js .seance.is-vu .coches li:nth-child(6) { transition-delay: calc(var(--d, 0) * 140ms + 800ms); }
.js .seance.is-vu .coches li:nth-child(7) { transition-delay: calc(var(--d, 0) * 140ms + 860ms); }

/* ---------- divers, après regard ---------- */
.offre__plus { min-height: 2.7em; }
.suite-bac__logo { box-sizing: content-box; padding: 16px 20px; border-radius: 16px; background: #f3f6f9; }   /* le logo de Big Air Coaching porte du noir : il lui faut un fond clair */
/* la section des cours : pleine en haut (elle monte sur la photo du héros restée en place), puis transparente — les reflets de l'eau reviennent entre les cartes */
.section--offres { background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 34%, rgba(5, 26, 43, 0) 72%); }
.vent-carte__cadre { display: block; min-height: 0; padding: 0; }

/* ---------- le menu : un sous-menu sous « Cours » (accès direct aux quatre pages), « Coaching » vers Big Air Coaching ---------- */
.nav__list { gap: 22px; }
.nav__groupe { position: relative; }
.nav__link--plus { padding-right: 15px; }
.nav__link--plus::before { content: ""; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--doux-e), margin .3s; }
.nav__groupe:hover .nav__link--plus::before, .nav__groupe:focus-within .nav__link--plus::before { transform: rotate(-135deg); margin-top: -1px; }
.nav__link--plus::after { right: 15px; }
.sous { position: absolute; left: -22px; top: 100%; z-index: 5; display: grid; gap: 2px; width: 268px; padding: 10px; border-radius: 18px; background: rgba(5, 26, 43, .86); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--ligne-2), 0 30px 60px -30px rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.97); transform-origin: 20% 0; transition: opacity .25s, transform .35s var(--doux-e), visibility 0s .3s; }
.sous::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }   /* le pont : la souris passe du mot au panneau sans le perdre */
.nav__groupe:hover .sous, .nav__groupe:focus-within .sous { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .4s var(--ressort), visibility 0s; }
.sous__lien { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 11px; text-decoration: none; transition: background .25s, transform .35s var(--ressort); }
.sous__lien:hover, .sous__lien:focus-visible { background: rgba(var(--eau-a), .18); }
.sous__lien b { font: 600 .9rem/1.2 var(--f-c); color: var(--txt); }
.sous__lien span { font: 600 .74rem/1 var(--f-c); font-variant-numeric: tabular-nums; color: var(--accent-2); white-space: nowrap; text-align: right; }
@media (max-width: 1180px) and (min-width: 981px) { .nav { gap: 16px; } .nav__list { gap: 15px; } .nav__link { font-size: .8rem; } }
@media (max-width: 980px) {
  /* menu déroulant : les quatre cours sont listés sous « Cours », toujours ouverts */
  .nav__link--plus::before { display: none; }
  .sous { position: static; width: auto; padding: 0 0 8px 14px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; border-left: 2px solid rgba(var(--eau-a), .5); border-radius: 0; margin: 0 0 6px 2px; }
  .sous::before { display: none; }
  .sous__lien { padding: 9px 10px; }
}

/* ---------- retours du 05/10 (suite) : logo plus grand ; fondus plus doux sous l'en-tête ---------- */
:root { --hdr: 86px; }
.brand img { height: 74px; }
.header.is-colle .brand img { height: 62px; }
.pied__marque img { height: 92px; }
/* la progression épinglée : la photo ne commence plus net sous l'en-tête — fond plein jusque sous lui, puis un long fondu */
.parcours__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .95) 0%, rgba(5, 26, 43, .82) 40%, rgba(5, 26, 43, .2) 74%, rgba(5, 26, 43, .5) 100%),
  linear-gradient(180deg, var(--bg) 0, var(--bg) calc(var(--hdr) + 6px), rgba(5, 26, 43, .86) calc(var(--hdr) + 7%), rgba(5, 26, 43, .58) calc(var(--hdr) + 16%), rgba(5, 26, 43, .26) calc(var(--hdr) + 27%), rgba(5, 26, 43, 0) calc(var(--hdr) + 40%), rgba(5, 26, 43, 0) 72%, rgba(5, 26, 43, .5) 88%, var(--bg) 100%); }
@media (max-width: 980px) {
  :root { --hdr: 76px; }
  .brand img, .header.is-colle .brand img { height: 60px; }
  .parcours__voile { background: linear-gradient(180deg, var(--bg) 0, var(--bg) calc(var(--hdr) + 4px), rgba(5, 26, 43, .7) calc(var(--hdr) + 5%), rgba(5, 26, 43, .32) calc(var(--hdr) + 12%), rgba(5, 26, 43, .08) 30%, rgba(5, 26, 43, .5) 40%, rgba(5, 26, 43, .9) 47%, var(--bg) 56%, var(--bg) 100%); }
}

/* la progression sur téléphone : il y a la place d'écrire plus gros */
@media (max-width: 980px) { .etape__liste li { font-size: .88rem; line-height: 1.32; } .etape__liste--longue li { font-size: .78rem; } }
@media (max-width: 760px) and (max-height: 720px) { .etape__liste li { font-size: .78rem; } .etape__liste--longue li { font-size: .7rem; } }

/* ---------- LA DURÉE ET LE NOMBRE D'ÉLÈVES, BIEN EN VUE (retour du 05/10 : « c'est une question que les clients demandent souvent ») ----------
   Sur chaque carte de cours : deux cases pleine largeur, avec un pictogramme (horloge, personnes), texte blanc en gras.
   Sur la page d'un cours : les mêmes, en grand, sous le titre. Dans les tarifs : la ligne passe en bleu, en gras. */
:root {
  --ico-duree: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.2 2'/%3E%3C/svg%3E");
  --ico-eleves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.3'/%3E%3Cpath d='M2.8 20c0-3.4 2.8-6.1 6.2-6.1s6.2 2.7 6.2 6.1'/%3E%3Ccircle cx='17.2' cy='9' r='2.6'/%3E%3Cpath d='M17 14.1c2.4.4 4.2 2.6 4.2 5.2'/%3E%3C/svg%3E");
}
.offre__faits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.offre__faits span { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 8px; border-radius: 13px; background: rgba(var(--eau-a), .22); box-shadow: inset 0 0 0 1.5px rgba(var(--eau-a), .8); font: 700 .9rem/1.1 var(--f-c); letter-spacing: 0; text-transform: none; white-space: nowrap; color: #fff !important; }
.offre__faits span::before, .faits li:not(:last-child)::before { content: ""; flex: none; width: 19px; height: 19px; background: var(--accent-2); -webkit-mask: var(--ico-duree) center / contain no-repeat; mask: var(--ico-duree) center / contain no-repeat; }
.offre__faits span:nth-child(2)::before, .faits li:nth-child(2)::before { -webkit-mask-image: var(--ico-eleves); mask-image: var(--ico-eleves); }
.faits { gap: 10px; }
.faits li { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 15px; background: rgba(var(--eau-a), .22); box-shadow: inset 0 0 0 1.5px rgba(var(--eau-a), .8); font: 700 1.08rem/1 var(--f-c); letter-spacing: 0; text-transform: none; color: #fff; }
.faits li:not(:last-child)::before { width: 22px; height: 22px; }
.faits li:last-child { font: 600 1.35rem/1 var(--f-t); padding: 13px 20px; }
.tarif__sous { margin-top: 10px; font-size: .95rem; font-weight: 700; color: var(--eau-2) !important; }
.cote__liste li:first-child { font-weight: 700; color: #fff; }
@media (max-width: 760px) { .faits li { padding: 12px 15px; font-size: .98rem; } .offre__faits span { font-size: .86rem; } }

/* ---------- DES RACCORDS DOUX ENTRE LES SECTIONS (retour du fondateur : « transition pas assez douce ») ----------
   Les reflets de l'eau (toile fixe) éclaircissent légèrement tout ce qui est transparent : un bloc au fond PLEIN posé
   contre une section transparente faisait donc une ligne nette. Aucun bloc pleine largeur ne commence ni ne finit plein :
   · la progression épinglée : la photo et son voile S'EFFACENT en haut et en bas (masque) — l'eau continue dessous ;
   · le pied de page : son fond monte en fondu. */
.parcours__photos, .parcours__voile { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 9%, #000 24%, #000 76%, rgba(0, 0, 0, .35) 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .35) 9%, #000 24%, #000 76%, rgba(0, 0, 0, .35) 91%, transparent 100%); }
.parcours__voile { background: linear-gradient(90deg, rgba(5, 26, 43, .95) 0%, rgba(5, 26, 43, .82) 40%, rgba(5, 26, 43, .2) 74%, rgba(5, 26, 43, .5) 100%), linear-gradient(180deg, rgba(5, 26, 43, .9) 0, rgba(5, 26, 43, .45) 22%, rgba(5, 26, 43, 0) 42%, rgba(5, 26, 43, 0) 70%, rgba(5, 26, 43, .5) 100%); }
.pied { background: linear-gradient(180deg, rgba(5, 26, 43, 0) 0, rgba(5, 26, 43, .7) 90px, var(--bg) 200px); border-top: 0; }
.pied::before { content: ""; position: absolute; left: 50%; top: 0; width: min(1180px, 100% - 40px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--ligne-2) 20%, var(--ligne-2) 80%, transparent); }
@media (max-width: 980px) {
  /* téléphone : la photo en haut, le texte dessous sur un fond qui reste lisible, et les deux bords fondus */
  .parcours__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .85) 0, rgba(5, 26, 43, .3) 16%, rgba(5, 26, 43, .08) 30%, rgba(5, 26, 43, .5) 40%, rgba(5, 26, 43, .92) 47%, var(--bg) 56%, var(--bg) 100%); }
  .parcours__photos { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 100%); }
  .parcours__voile { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 82%, transparent 100%); }
}

/* ---------- LE RAIL DE LA PROGRESSION : ronds et libellés CENTRÉS (retour du fondateur) ----------
   Chaque étape occupe un quart de la largeur ; son rond est au milieu, son libellé centré dessous ;
   le tronçon va d'un rond au suivant en laissant 16 px d'air de chaque côté. */
.rail li { justify-items: center; text-align: center; }
.rail li:not(:last-child)::before { left: calc(50% + 38px); right: auto; width: calc(100% - 76px); }
@media (max-width: 980px) {
  .rail li:not(:last-child)::before { left: calc(50% + 29px); right: auto; width: calc(100% - 58px); top: 17px; }
  /* ---------- la progression sur téléphone : PLUS D'AIR (retour du fondateur) ---------- */
  .parcours__in { gap: 16px; padding: calc(var(--hdr) + 22px) 0 104px; }
  .parcours__tete .sur { margin-bottom: 12px; line-height: 1.5; }
  .parcours__photos img { height: 48%; }
  .parcours__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .85) 0, rgba(5, 26, 43, .3) 15%, rgba(5, 26, 43, .08) 27%, rgba(5, 26, 43, .5) 36%, rgba(5, 26, 43, .92) 43%, var(--bg) 51%, var(--bg) 100%); }
  .parcours__etapes { min-height: 50svh; gap: 18px; }
  .etape__n { margin-bottom: 18px; }
  .etape__liste { gap: 12px 18px; }
  .etape__liste li { padding-left: 26px; font-size: .86rem; line-height: 1.38; }
  .etape__liste--longue { gap: 9px 16px; }
  .etape__liste--longue li { font-size: .78rem; line-height: 1.34; }
  .rail { margin-top: 26px; }
  .rail li { gap: 12px; }
}
@media (max-width: 760px) and (max-height: 720px) { .parcours__etapes { gap: 10px; } .etape__n { margin-bottom: 10px; } .etape__liste { gap: 7px 14px; } .etape__liste li { font-size: .76rem; line-height: 1.3; } .etape__liste--longue { gap: 5px 12px; } .etape__liste--longue li { font-size: .7rem; } .rail { margin-top: 12px; } }

/* ---------- la progression sur téléphone, après regard : le titre en haut, LA PHOTO dans une bande dégagée, puis l'étape et ses
   gestes SOUS la photo (ils chevauchaient la photo et laissaient un vide au-dessus du rail) ---------- */
@media (max-width: 980px) {
  .parcours__etapes { min-height: 0; align-self: end; gap: 0; }
  .parcours__tete .titre { text-shadow: 0 2px 20px rgba(5, 26, 43, .95), 0 0 6px rgba(5, 26, 43, .6); }
  .parcours__tete .sur { text-shadow: 0 1px 10px rgba(5, 26, 43, .95); }
  .parcours__photos img { height: 46%; object-position: 62% 40%; }
  .parcours__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .92) 0, rgba(5, 26, 43, .72) 11%, rgba(5, 26, 43, .42) 19%, rgba(5, 26, 43, .06) 26%, rgba(5, 26, 43, .06) 33%, rgba(5, 26, 43, .55) 38%, rgba(5, 26, 43, .94) 42%, var(--bg) 46%, var(--bg) 100%); }
  .etape__n { font-size: clamp(1.6rem, 7.4vw, 2.2rem); }
}

/* la progression sur téléphone : le titre se lit sur un fond net — la photo est une bande SOUS lui, aux bords fondus */
@media (max-width: 980px) {
  .parcours__photos, .parcours__voile { -webkit-mask-image: none; mask-image: none; }
  .parcours__photos img { top: 21%; height: 25%; object-position: 62% 42%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 26%, #000 58%, transparent 100%); }
  .parcours__voile { background: none; }
  .parcours__tete .titre, .parcours__tete .sur { text-shadow: none; }
}

/* le centrage du rail : même force que la règle d'origine (« .rail li:not(.rail__fil) »), sinon elle l'emportait et les ronds restaient à gauche */
.rail li:not(.rail__fil) { justify-items: center; text-align: center; }

/* les étapes à venir du rail : visibles sans concurrencer l étape en cours */
.rail b { opacity: 1; color: var(--doux); }
.rail li.is-on b { color: #1c0e00; }
.rail span { opacity: .72; }

/* ---------- téléphone : le sous-menu des cours est un VOLET, fermé au départ (demande du fondateur) ---------- */
@media (max-width: 980px) {
  .nav__groupe { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows .45s var(--doux-e); }
  .nav__groupe.is-ouvert { grid-template-rows: auto 1fr; }
  .nav__link--plus { padding-right: 44px; }
  .nav__link--plus::before { display: block; right: 12px; top: 50%; width: 9px; height: 9px; margin-top: -8px; border-width: 2px; opacity: .8; transform: rotate(45deg); transition: transform .4s var(--doux-e), margin .4s; }
  .nav__groupe:hover .nav__link--plus::before, .nav__groupe:focus-within .nav__link--plus::before { transform: rotate(45deg); margin-top: -8px; }
  .nav__groupe.is-ouvert .nav__link--plus::before, .nav__groupe.is-ouvert:hover .nav__link--plus::before { transform: rotate(-135deg); margin-top: -3px; }
  .nav__groupe .sous, .nav__groupe:hover .sous, .nav__groupe:focus-within .sous { min-height: 0; overflow: hidden; padding: 0 0 0 14px; margin: 0 0 0 2px; opacity: 0; visibility: hidden; transition: opacity .3s, padding .45s var(--doux-e), margin .45s var(--doux-e), visibility 0s .45s; }
  .nav__groupe.is-ouvert .sous, .nav__groupe.is-ouvert:hover .sous { padding: 4px 0 10px 14px; margin: 0 0 6px 2px; opacity: 1; visibility: visible; transition: opacity .35s .1s, padding .45s var(--doux-e), margin .45s var(--doux-e), visibility 0s; }
}

/* ---------- LA PAGE 404 : le nombre flotte sur le lagon, son reflet ondule dessous ; puis des raccourcis ---------- */
.erreur { display: grid; align-content: center; gap: clamp(36px, 6vw, 64px); min-height: 100svh; padding: calc(var(--hdr) + clamp(30px, 6vh, 70px)) 0 clamp(100px, 14vw, 150px); }
.erreur__in { display: grid; justify-items: center; text-align: center; }
.erreur__code { position: relative; display: flex; justify-content: center; margin: 4px 0 clamp(34px, 6vw, 64px); font: 600 clamp(7.5rem, 27vw, 18rem)/.86 var(--f-t); user-select: none; }
.erreur__code span { display: inline-block; padding: 0 .02em; background: var(--grad-eau); -webkit-background-clip: text; background-clip: text; color: transparent; animation: e-flotte 5.4s ease-in-out infinite; will-change: transform; }
.erreur__code span:nth-child(2) { background-image: var(--grad); animation-delay: -1.8s; }
.erreur__code span:nth-child(3) { animation-delay: -3.6s; }
@keyframes e-flotte { 0%, 100% { transform: translateY(.025em) rotate(-2deg); } 50% { transform: translateY(-.06em) rotate(2deg); } }
.erreur__code::before { content: ""; position: absolute; left: -12%; right: -12%; top: 97%; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--eau-a), .85) 30%, rgba(255, 255, 255, .7) 50%, rgba(var(--eau-a), .85) 70%, transparent); }   /* la ligne d'eau */
.erreur__code::after { content: attr(data-code); position: absolute; left: 0; right: 0; top: 98%; text-align: center; letter-spacing: .04em; transform: scaleY(-.6); transform-origin: 50% 0; background: var(--grad-eau); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .3; filter: blur(2.5px); -webkit-mask-image: linear-gradient(180deg, transparent 22%, #000 100%); mask-image: linear-gradient(180deg, transparent 22%, #000 100%); animation: e-ondule 4.6s ease-in-out infinite; pointer-events: none; }
@keyframes e-ondule { 0%, 100% { transform: scaleY(-.6) skewX(-5deg); } 50% { transform: scaleY(-.6) skewX(5deg); } }
.erreur__titre { font-size: clamp(2rem, 5.2vw, 3.8rem); }
.erreur__texte { max-width: 52ch; margin-top: 14px; font-size: 1.08rem; color: var(--doux); }
.erreur__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.erreur__liens { display: grid; }
.erreur__liens .sur { justify-self: center; }
.raccourcis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.raccourci { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 46px 18px 18px; border-radius: var(--r); background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); text-decoration: none; }
.raccourci::after { content: "→"; position: absolute; right: 17px; top: 50%; transform: translateY(-50%); font-size: 1.15rem; color: var(--accent-2); transition: transform .4s var(--ressort); }
.raccourci:hover, .js .raccourci[data-vue].is-vu:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1.5px rgba(var(--eau-a), .75), 0 30px 50px -36px rgba(var(--eau-a), .7); transition: transform .45s var(--ressort), box-shadow .3s; }
.raccourci:hover::after { transform: translate(5px, -50%); }
.raccourci b { font: 600 1.14rem/1.15 var(--f-t); text-transform: uppercase; color: var(--txt); }
.raccourci span { font: 600 .78rem/1.35 var(--f-c); color: var(--doux); }
.calme .erreur__code span, .calme .erreur__code::after { animation: none; }
@media (max-width: 980px) { .raccourcis { grid-template-columns: 1fr 1fr; } .erreur__cta .btn { flex: 1 1 240px; } }
@media (max-width: 480px) { .raccourcis { grid-template-columns: 1fr; } }

/* ---------- le sous-menu des cours s'aligne SOUS la barre de menu (retour du fondateur) : l'entrée « Cours » prend toute la
   hauteur de la barre, le panneau part donc exactement de son bord bas ---------- */
@media (min-width: 981px) {
  .nav, .nav__list { align-self: stretch; }
  .nav__list { align-items: center; }
  .nav__groupe { align-self: stretch; display: flex; align-items: center; }
  .sous { top: calc(100% + 1px); border-radius: 0 0 18px 18px; }
  .sous::before { display: none; }
}

/* le reflet du 404 : retourné autour de la LIGNE D EAU (son bord bas), il descend sous elle au lieu de remonter sur les chiffres */
.erreur__code { margin-bottom: clamp(70px, 13vw, 150px); }
.erreur__code::after { top: auto; bottom: 2%; transform-origin: 50% 100%; }

/* ---------- retours du 02/10 ----------
   · le sous-menu des cours garde ses coins arrondis EN HAUT aussi, et redevient un vrai verre dépoli (fond plus léger, flou) ;
   · « Comment se déroule l'apprentissage ? » : sur ordinateur aussi, la liste des gestes est aérée au maximum. */
@media (min-width: 981px) {
  .sous { top: calc(100% + 7px); border-radius: 18px; background: rgba(5, 26, 43, .58); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); box-shadow: inset 0 0 0 1px var(--ligne-2), 0 34px 70px -30px rgba(0, 0, 0, .85); }
  .sous::before { display: block; height: 12px; }   /* le pont : la souris descend de « Cours » au panneau sans le perdre */
  .sous__lien:hover, .sous__lien:focus-visible { background: rgba(var(--eau-a), .26); }

  .parcours__in { grid-template-columns: minmax(0, 780px) 1fr; }
  .parcours__etapes { gap: 24px; }
  .etape__n { margin-bottom: 30px; }
  .etape__liste { gap: 20px 48px; }
  .etape__liste li { padding-left: 40px; font-size: 1.1rem; line-height: 1.4; }
  .etape__liste li::before { top: .02em; width: 25px; height: 25px; }
  .etape__liste li::after { left: 7px; top: .5em; width: 11px; height: 6px; border-width: 2.5px; }
  .etape__liste--longue { gap: 15px 48px; }
  .etape__liste--longue li { font-size: 1.02rem; }
}
/* écrans d'ordinateur peu hauts (portables) : la même liste, un cran plus serrée, pour tenir dans l'écran épinglé */
@media (min-width: 981px) and (max-height: 860px) {
  .parcours__etapes { gap: 14px; }
  .etape__n { margin-bottom: 16px; font-size: clamp(2.2rem, 4.4vw, 3.4rem); }
  .etape__liste { gap: 12px 44px; }
  .etape__liste li { font-size: 1rem; }
  .etape__liste--longue { gap: 8px 44px; }
  .etape__liste--longue li { font-size: .94rem; }
  .parcours__note { display: none; }
}
@media (min-width: 981px) and (max-height: 700px) { .parcours__tete .sur { display: none; } .etape__liste { gap: 8px 40px; } .etape__liste li { font-size: .92rem; } .etape__liste--longue { gap: 5px 40px; } .etape__liste--longue li { font-size: .86rem; } .parcours__cta { display: none; } }

/* ---------- héros sur téléphone (02/10) : le sourire plus haut, jamais caché ----------
   La photo est ancrée EN HAUT et dimensionnée par la LARGEUR (hauteur automatique) : le visage se place à une distance
   fixe du haut — juste sous le titre, lui aussi calé sur la largeur — au lieu de descendre avec la hauteur de l'écran. */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .hero__photo img { width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 30%; }
  .hero__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .3) 0%, rgba(5, 26, 43, 0) 26%, rgba(5, 26, 43, 0) 56%, rgba(5, 26, 43, .8) 68%, rgba(5, 26, 43, .92) 100%); }
}
/* téléphones peu hauts : le texte d'accroche s'efface, puis les preuves passent sur une ligne — le sourire d'abord */
@media (max-width: 760px) and (max-height: 800px) { .hero__texte { display: none; } }
@media (max-width: 760px) and (max-height: 700px) { .hero__preuves { grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 12px; padding-top: 10px; } .hero__preuves li:nth-child(n+3) { display: none; } .hero { padding-bottom: 92px; } }

/* ---------- la progression sur ordinateur : la liste respire selon la HAUTEUR de l'écran ---------- */
@media (min-width: 981px) {
  .etape__n { margin-bottom: clamp(12px, 3.2vh, 38px); }
  .etape__liste { gap: clamp(8px, 2.5vh, 30px) 48px; }
  .etape__liste li { font-size: clamp(.95rem, 1.95vh, 1.3rem); }
  .etape__liste--longue { gap: clamp(5px, 1.75vh, 22px) 48px; }
  .etape__liste--longue li { font-size: clamp(.88rem, 1.8vh, 1.2rem); }
  .parcours__etapes { gap: clamp(10px, 2.6vh, 30px); }
}
@media (min-width: 981px) and (max-height: 860px) { .etape__liste { gap: clamp(8px, 2.5vh, 30px) 44px; } .etape__liste li { font-size: clamp(.95rem, 1.95vh, 1.3rem); } .etape__liste--longue { gap: clamp(5px, 1.75vh, 22px) 44px; } .etape__liste--longue li { font-size: clamp(.88rem, 1.8vh, 1.2rem); } .etape__n { margin-bottom: clamp(12px, 3.2vh, 38px); } .parcours__etapes { gap: clamp(10px, 2.6vh, 30px); } }
@media (min-width: 981px) and (max-height: 700px) { .parcours__in { gap: 8px 30px; padding: calc(var(--hdr) + 10px) 0 78px; } .parcours__tete .titre { font-size: 2.1rem; } .etape__n { font-size: 2rem; } .rail { margin-top: 4px; } .etape__liste li { font-size: .92rem; } .etape__liste--longue li { font-size: .86rem; } }

/* réglage fin (02/10) : la photo « sourire » est réservée aux téléphones ; une tablette en hauteur garde la photo d'ordinateur, cadrée sur l'élève */
@media (min-width: 761px) and (max-aspect-ratio: 4/5) {
  .hero__photo img { width: 100%; height: 100%; min-height: 0; object-position: 66% 50%; transform-origin: 66% 55%; }
  .hero__voile { background: linear-gradient(180deg, rgba(5, 26, 43, .78) 0%, rgba(5, 26, 43, .35) 24%, rgba(5, 26, 43, 0) 38%, rgba(5, 26, 43, 0) 56%, rgba(5, 26, 43, .8) 70%, rgba(5, 26, 43, .9) 100%); }
}
@media (max-width: 340px) { .hero__titre { font-size: 9.4vw; } .hero__sur { font-size: .7rem; letter-spacing: .14em; } }

/* ---------- LES PUCES BIEN EN FACE DE LEUR LIGNE (retour du fondateur : « aligne bien les items en face des puces ») ----------
   Une puce posée à une hauteur fixe (top: .42em, 18 px…) se décale dès que le corps ou l'interligne du texte change —
   or ils changent avec l'écran. Ici la puce occupe exactement la hauteur de la PREMIÈRE LIGNE du texte (unité « lh »,
   avec un repli calculé pour les navigateurs anciens) et son dessin est centré dedans : elle reste en face du texte,
   quels que soient le corps, l'interligne et la taille de l'écran. */
:root { --ico-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 8.6l3.4 3.4 7-7.4'/%3E%3C/svg%3E"); }
/* les coches (tarifs, cadre de côté, récapitulatif, séances des pages de cours) */
.tarif li, .cote__liste li, .recap__plus li, .prose ul.coches li { padding-left: 28px; }
.tarif li::before, .cote__liste li::before, .recap__plus li::before, .prose ul.coches li::before {
  left: 0; top: 0; width: 17px; height: 1.6em; height: 1lh; border: 0; border-radius: 0; transform: none; background: var(--accent);
  -webkit-mask: var(--ico-coche) center / 15px 15px no-repeat; mask: var(--ico-coche) center / 15px 15px no-repeat; }
/* les points (textes des pages) */
.prose ul li::before { top: .62em; top: calc(.5lh - 3.5px); }
.prose ul.coches li::before { top: 0; }
/* les gestes de la progression : le rond et sa coche suivent le corps du texte (em), centrés sur la première ligne */
.etape__liste li { --lh: 1.4; --p: 1.34em; line-height: var(--lh); padding-left: calc(var(--p) + .66em); }
.etape__liste li::before { left: 0; top: calc((var(--lh) * 1em - var(--p)) / 2); width: var(--p); height: var(--p); }
.etape__liste li::after { left: calc(var(--p) * .29); top: calc((var(--lh) * 1em - var(--p)) / 2 + var(--p) * .34); width: calc(var(--p) * .42); height: calc(var(--p) * .23); border-width: max(2px, .11em); }
@media (max-width: 980px) { .etape__liste li { --lh: 1.36; } }

/* ---------- AUDIT TABLETTE (02/10) ----------
   · tarifs : la grille à deux colonnes restait enfermée dans la largeur prévue pour UNE colonne (520 px) → cartes écrasées ;
   · « qui suis-je » : la photo, limitée à 460 px, laissait un grand vide à sa droite → photo et texte côte à côte. */
@media (min-width: 621px) and (max-width: 980px) {
  .tarifs--six { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coach { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }
  .coach__photo { max-width: none; }
}

/* audit tablette (02/10) : le bouton WhatsApp des cadres de côté tient sur UNE ligne, même quand la colonne est étroite */
.cote .btn--ico, .recap .btn--ico { padding-inline: 12px; gap: 8px; font-size: .74rem; letter-spacing: .05em; white-space: nowrap; }
.cote .btn--ico svg, .recap .btn--ico svg { width: 18px; height: 18px; }

/* ---------- LA FORMULE DÉJÀ CHOISIE (02/10) ----------
   Venu d'un bouton « Réserver » lié à une offre, le visiteur arrive avec sa formule cochée — mais elle n'est visible qu'à
   l'étape 3, et le récapitulatif passe SOUS le formulaire dès que la page est sur une colonne. Cette ligne le lui dit tout
   de suite, sous le rail, aux étapes 1 et 2. Sur grand écran le récapitulatif est à côté : la ligne ferait doublon. */
.choix { display: none; }
@media (max-width: 980px) {
  .choix { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: -8px 0 26px; padding: 12px 14px 12px 46px; border-radius: 14px; background: rgba(var(--accent-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--accent-a), .4); }
  .choix::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--accent-2); -webkit-mask: var(--ico-coche) center / contain no-repeat; mask: var(--ico-coche) center / contain no-repeat; }
  .choix__sur { flex: 0 0 100%; font: 700 .62rem/1.3 var(--f-c); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
  .choix b { font: 700 1rem/1.3 var(--f-c); color: var(--txt); }
  .choix em { font: 700 1rem/1.3 var(--f-c); font-style: normal; color: var(--accent-2); }
  .choix em:empty { display: none; }
  .choix small { flex: 0 0 100%; font-size: .74rem; line-height: 1.35; color: var(--doux); }
}

/* ---------- ADRESSE D'ESSAI (02/10) ----------
   sur une adresse d'essai les formulaires envoient pour de bon : les mentions « formulaire désactivé » n'ont plus lieu d'être */
.essai .form__demo, .essai .fin__demo { display: none; }

/* ---------- CONTRASTE DU RAIL (02/10) ----------
   audit d'accessibilité : les libellés des étapes à venir cumulaient deux opacités (45 % × 72 % = 32 %), soit un contraste
   de 2,7 pour un texte de 11 px. Le retrait des étapes à venir passe par la COULEUR du libellé (contraste 7) et par
   l'opacité du seul rond ; plus aucune opacité sur le texte. */
.rail li:not(.rail__fil) { opacity: 1; }
.rail li:not(.rail__fil):not(.is-on) span { opacity: 1; color: #9db3c8; }
.rail li:not(.rail__fil):not(.is-on) b { opacity: .6; }