/* ==========================================================================
   Big Air Coaching — version « motion design » (démonstration fon10.studio), 02/10/2026
   Une page. Le mouvement vient du VENT (toile fixe, vent.js), des vraies photos (parallaxe, fondus, masques),
   de la typographie et de deux sections épinglées (les niveaux qui montent, les stages qui défilent de côté).
   AUCUN objet de kite n'est dessiné : le kite n'apparaît qu'en photo.
   ========================================================================== */
/* ---------- polices, hébergées ici (assets/fonts) : Barlow Condensed italique 700 et 800 (les seules graisses utilisées),
   Inter variable. Téléchargées de Google Fonts le 03/10/2026 (licence OFL) ; Inter vient du site fon10. ---------- */
@font-face { font-family: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700i-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: "Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url('../fonts/barlow-condensed-700i-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: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800i-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: "Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url('../fonts/barlow-condensed-800i-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: #050d16; --bg-2: #081724; --carte: #0d1c2b; --carte-2: #122538;
  --txt: #eef4fa; --doux: #a9b9c9; --ligne: rgba(255, 255, 255, .12); --ligne-2: rgba(255, 255, 255, .2);
  --accent: #ff8902; --accent-2: #ffb24a; --accent-a: 255, 137, 2; --eau: #2cc5e8;
  --grad: linear-gradient(120deg, #ffb24a 0%, #ff8902 55%, #f25c05 100%);
  --r: 20px; --r-s: 12px; --hdr: 72px;
  --f-t: "Barlow Condensed", "Arial Narrow", 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 ---------- */
.vent { position: fixed; inset: 0; z-index: 2; width: 100vw; height: 100vh; pointer-events: none; mix-blend-mode: screen; }   /* devant la photo du héros, DERRIÈRE tout le reste */
.calme .vent { display: none; }
.vent__lettre { position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; font: italic 800 120px/1 var(--f-t); opacity: 0; mix-blend-mode: screen; will-change: transform; }
.vent__lettre--l { color: #82cdff; }
.vent__lettre--h { color: #ffaf5a; }
.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: italic 800 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(8, 23, 36, 0), rgba(8, 23, 36, .82) 14%, rgba(8, 23, 36, .82) 86%, rgba(8, 23, 36, 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(10, 22, 34, .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, 13, 22, .55) 0%, rgba(5, 13, 22, 0) 26%, rgba(5, 13, 22, .25) 55%, var(--bg) 100%), linear-gradient(90deg, rgba(5, 13, 22, .55), rgba(5, 13, 22, 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: italic 800 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: italic 800 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, 13, 22, .93) 0%, rgba(5, 13, 22, .72) 38%, rgba(5, 13, 22, .12) 72%, rgba(5, 13, 22, .45) 100%), linear-gradient(180deg, var(--bg) 0%, var(--bg) 7%, rgba(5, 13, 22, .55) 15%, rgba(5, 13, 22, 0) 28%, rgba(5, 13, 22, 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: #2a1c0a; 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: italic 800 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, 13, 22, .92); box-shadow: inset 0 0 0 1.5px var(--ligne-2); font: italic 800 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, 13, 22, .2), rgba(5, 13, 22, 0) 30%, rgba(5, 13, 22, .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, 13, 22, .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: italic 800 2rem/1 var(--f-t); color: var(--accent-2); }
.carte h3 { margin-bottom: 6px; font: italic 700 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, 13, 22, .15) 0%, rgba(5, 13, 22, .5) 38%, rgba(5, 13, 22, .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, 13, 22, .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: italic 800 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: italic 800 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, 13, 22, .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: italic 800 1.9rem/1 var(--f-t); color: var(--accent-2); }
.liste b { font: italic 700 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: italic 800 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: italic 800 1.4rem/1 var(--f-t); color: var(--accent-2); }
.etapes h3 { font: italic 700 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: italic 700 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: italic 800 2rem/1 var(--f-t); text-transform: uppercase; }
.tarif__sous { margin-top: 6px; font-size: .84rem; }
.tarif__prix { margin: 20px 0 18px; font: italic 800 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: italic 700 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: italic 700 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, 13, 22, .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(8, 23, 36, .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, 13, 22, .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, 13, 22, .78) 0%, rgba(5, 13, 22, .46) 32%, rgba(5, 13, 22, 0) 56%), linear-gradient(180deg, rgba(5, 13, 22, .5) 0%, rgba(5, 13, 22, 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, 13, 22, 0) 0%, rgba(5, 13, 22, .5) 46%, rgba(5, 13, 22, .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: italic 700 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: italic 700 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, #3a2208, #0d1c2b 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, 13, 22, .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: italic 800 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: italic 800 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, 13, 22, .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: #0d1c2b; 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: italic 700 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, #3a2208, #0d1c2b 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: italic 800 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: italic 800 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: italic 800 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: italic 700 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: italic 700 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: italic 800 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: #2a1c0a; 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: italic 800 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 #3a2810; }
.pas__etape.is-fait b { background: #2a1c0a; 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: italic 800 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: italic 700 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: italic 700 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: italic 800 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 #2a1c0a, 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: italic 800 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, #3a2208, #0d1c2b 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: italic 800 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: italic 800 1.3rem/1 var(--f-t); color: var(--accent-2); }
.suite b { font: italic 700 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: #0d1c2b; 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, 13, 22, .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, 13, 22, .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, 13, 22, 0) 24%, rgba(5, 13, 22, .1) 36%, rgba(5, 13, 22, .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, 13, 22, .72) 0%, rgba(5, 13, 22, .3) 26%, rgba(5, 13, 22, 0) 40%, rgba(5, 13, 22, 0) 52%, rgba(5, 13, 22, .7) 66%, rgba(5, 13, 22, .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; } }

/* ---------- LA PAGE 404 : le nombre est emporté par le vent (il penche, des filets d'air le traversent) ; 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(18px, 3vw, 30px); padding: 0 .3em; font: italic 800 clamp(8rem, 30vw, 20rem)/.84 var(--f-t); user-select: none; overflow: hidden; }
.erreur__code span { display: inline-block; padding: 0 .06em 0 .01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; animation: e-vent 3.6s ease-in-out infinite; transform-origin: 50% 100%; will-change: transform; }
.erreur__code span:nth-child(2) { animation-delay: -.5s; }
.erreur__code span:nth-child(3) { animation-delay: -1s; }
@keyframes e-vent { 0%, 100% { transform: translateX(0) skewX(-4deg) rotate(-1deg); } 45% { transform: translateX(.07em) skewX(-15deg) rotate(2.5deg); } 60% { transform: translateX(.05em) skewX(-11deg) rotate(1.5deg); } }
/* les filets d'air : des traits fins qui filent de gauche à droite, devant et derrière le nombre */
.erreur__code::before, .erreur__code::after { content: ""; position: absolute; left: -60%; width: 60%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); animation: e-filet 2.6s cubic-bezier(.5, 0, .3, 1) infinite; pointer-events: none; }
.erreur__code::before { top: 30%; }
.erreur__code::after { top: 68%; width: 40%; height: 1.5px; animation-duration: 3.4s; animation-delay: -1.3s; background: linear-gradient(90deg, transparent, rgba(var(--accent-a), .9), transparent); }
@keyframes e-filet { from { transform: translateX(0); } to { transform: translateX(440%); } }
.erreur__titre { font-size: clamp(2.3rem, 6vw, 4.6rem); }
.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 var(--accent), 0 30px 50px -36px rgba(var(--accent-a), .7); transition: transform .45s var(--ressort), box-shadow .3s; }
.raccourci:hover::after { transform: translate(5px, -50%); }
.raccourci b { font: italic 700 1.3rem/1.1 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::before, .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; } }

/* ---------- LES PUCES BIEN EN FACE DE LEUR LIGNE (02/10/2026, même réglage que sur le site Kite Odyssey) ----------
   Une puce posée à une hauteur fixe (top: .42em…) se décale dès que le corps ou l'interligne du texte change : mesuré,
   les coches étaient 1,7 à 2,5 px trop haut. Ici la puce occupe exactement la hauteur de la PREMIÈRE LIGNE du texte
   (unité « lh », avec un repli pour les navigateurs anciens) et son dessin est centré dedans. */
: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, « ce qui est inclus » des pages de stage) */
.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), les tirets (« à votre charge »), les points des cartes de stage */
.prose ul li::before { top: .62em; top: calc(.5lh - 3.5px); }
.prose ul.coches li::before { top: 0; }
.prose ul.moins li::before { top: .74em; top: calc(.5lh - 1px); }
.stage li::before { top: .55em; top: calc(.5lh - 3px); }

/* ---------- AUDIT TABLETTE (02/10) ----------
   · la méthode (tablette en hauteur) : la photo de la rafale était plus étroite que son viseur — une hauteur plafonnée avec un
     rapport 4/3 réduit aussi la LARGEUR ; ici la photo prend toute la largeur, à hauteur fixe ;
   · « qui suis-je » : photo et texte côte à côte (la photo seule laissait un grand vide à sa droite) ;
   · les stages (écran épinglé) : le bas des cartes — prix et bouton — passait sous la barre de réservation dès que l'écran
     est peu haut (tablette couchée, portable) : la place de la barre est réservée, et la carte s'ajuste à la hauteur. */
@media (min-width: 621px) and (max-width: 980px) {
  .methode-colle .viseur__images { aspect-ratio: auto; height: 38svh; max-height: none; }
  .coach { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }
  .coach__photo { max-width: none; }
}
@media (min-width: 981px) {
  .stages:not(.stages--libre) .stages__colle { padding-bottom: 74px; }
}
@media (min-width: 981px) and (max-height: 960px) {
  .stages:not(.stages--libre) .stages__lead { display: none; }
  .stages:not(.stages--libre) .stages__colle { gap: clamp(12px, 2vh, 22px); }
  .stages:not(.stages--libre) .stage { height: min(50vh, 520px); }
  .stages:not(.stages--libre) .stages__tete .titre { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
}
@media (min-width: 981px) and (max-height: 720px) { .stages:not(.stages--libre) .stage ul { display: none; } .stages:not(.stages--libre) .stage { height: min(46vh, 520px); } }

/* 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; }

/* ---------- RAIL DE LA RÉSERVATION (02/10) ----------
   même réglage que sur Kite Odyssey : de l'air entre le rond et son libellé, un trait fin, et un halo de la couleur du
   cadre autour de chaque rond — le trait s'arrête avant le rond au lieu de le toucher. */
.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); }
.pas__fil { height: 2px; top: 21px; }
@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); } }

/* ---------- 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; }

/* ---------- GALERIE EN VOLET (02/10) ----------
   un aperçu de la galerie (les premières rangées entières), le reste dans un volet qui se déplie : la page est moins longue.
   La hauteur de l'aperçu est posée par le script (main.js) ; sans lui, toute la galerie est montrée. */
.tuiles { position: relative; }
.tuiles.est-volet { overflow: hidden; transition: max-height .9s var(--doux-e); }
.calme .tuiles.est-volet { transition: none; }
.galerie__plus { display: flex; justify-content: center; margin-top: 26px; }
.galerie__bouton { gap: 10px; }
.galerie__bouton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ressort); }
.galerie__bouton b { padding: 4px 8px; border-radius: 999px; background: rgba(var(--accent-a), .18); color: var(--accent-2); font: 700 .72rem/1 var(--f-c); letter-spacing: .04em; }
.galerie__fermer, .galerie__bouton[aria-expanded="true"] .galerie__ouvrir, .galerie__bouton[aria-expanded="true"] b { display: none; }
.galerie__bouton[aria-expanded="true"] .galerie__fermer { display: inline; }
.galerie__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
/* ---------- LISIBILITÉ SUR LA PHOTO (02/10) ----------
   téléphone et tablette : le haut de la section « niveaux » (étiquette orange et titre) est posé sur la photo ; sur le sable
   clair du niveau 3, l'orange ne se lisait plus. UNE LUEUR SOMBRE qui épouse les lettres, rien d'autre (le fondateur a
   refusé la bande sombre derrière le bloc : « pas harmonieux »). drop-shadow et non text-shadow : elle agit aussi sur le
   texte en dégradé. Trois couches : un liseré net, un halo proche, un halo large. */
@media (max-width: 980px) {
  .niveaux__tete .titre { filter: drop-shadow(0 0 1px rgba(5, 13, 22, .95)) drop-shadow(0 1px 6px rgba(5, 13, 22, .9)) drop-shadow(0 2px 22px rgba(5, 13, 22, .85)); }
  .niveaux__tete .sur { filter: drop-shadow(0 0 1px rgba(5, 13, 22, 1)) drop-shadow(0 0 4px rgba(5, 13, 22, .95)) drop-shadow(0 1px 14px rgba(5, 13, 22, .9)); }
}