/* ==========================================================================
   Coach GiGeo — feuille de style (site-gigeo, 30/09/2026)
   Mêmes techniques que fon10.studio : jetons en tête, apparitions pilotées par main.js, cartes 3D,
   sections différées (content-visibility), animations suspendues hors écran, mouvement réduit.
   Charte du site d'origine : SOMBRE, accent rouge #ff3030, casque de spartiate.
   ========================================================================== */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; 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: 400 600; 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; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/sora-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: 'Sora'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/sora-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: #0a0a0b;
  --bg-2: #101012;
  --card-bg: linear-gradient(180deg, rgba(26, 26, 30, .97), rgba(15, 15, 18, .985));
  --line: rgba(255, 255, 255, .09);
  /* « verre » des éléments translucides (FAQ, réseaux, atouts, badge, encadré 30 %) : un fond sombre semi-opaque SOUS
     le voile clair — 30/09, « augmente légèrement l'opacité » : sur la fumée, le seul voile blanc à 3 % laissait tout passer */
  --verre: rgba(16, 16, 19, .5);
  --txt: #f3f3f5;
  --muted: #b3b5bf;
  --red: #ff3030;
  --red-2: #ff6a3d;
  --red-a: 255, 48, 48;
  --grad: linear-gradient(120deg, #ff3030 0%, #ff6a3d 100%);
  --glow: 0 0 0 1px rgba(255, 48, 48, .35), 0 24px 60px -20px rgba(255, 48, 48, .5);
  --r: 20px;
  --r-sm: 12px;
  --hdr: 72px;
  --font-h: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-b: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.22, 1.35, .32, 1);
  --container: 1180px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--hdr); -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }   /* clip : pas de boîte défilante (hidden en repli, vieux Safari) */
html.native-scroll { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 400 16px/1.65 var(--font-b); -webkit-font-smoothing: antialiased; }   /* 30/09 : SANS overflow — sur body (html n'étant pas visible), il en faisait une boîte défilante qui ne défile jamais, et aucun sticky ne collait (le tunnel passait avec la page) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 45% at 90% 0%, rgba(255, 48, 48, .13), transparent 60%), radial-gradient(45% 40% at 5% 100%, rgba(255, 106, 61, .07), transparent 60%);
}
/* grain de pellicule, très léger */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-h); line-height: 1.08; margin: 0 0 .5em; }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
h3 { font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; }
p { margin: 0 0 1em; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.container { width: min(var(--container), 100% - 48px); margin-inline: auto; }
.container--narrow { --container: 860px; }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 8px; background: var(--red); color: #fff; }
.skip:focus { top: 12px; }
.label { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 .78rem/1 var(--font-h); letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.label::before { content: ""; width: 26px; height: 2px; background: var(--grad); }
.lead { font-size: 1.12rem; color: var(--txt); }
p { color: var(--muted); }
p b, p strong { color: var(--txt); }

/* ---------- Barre de progression, réseau de fond ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.fx-canvas { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; opacity: 0; --hors: 1; -webkit-mask-image: radial-gradient(var(--nuage-rx, 34%) var(--nuage-ry, 44%) at 50% var(--nuage-y, 38%), #000 30%, rgba(0, 0, 0, var(--hors)) 100%); mask-image: radial-gradient(var(--nuage-rx, 34%) var(--nuage-ry, 44%) at 50% var(--nuage-y, 38%), #000 30%, rgba(0, 0, 0, var(--hors)) 100%); }   /* la fumée (fumee.js) : opacité posée par le script ; --hors = 0 → seul le nuage autour du casque du logo reste */
@media (max-width: 899px) and (orientation: portrait) { .fx-canvas { --nuage-rx: 74%; --nuage-ry: 30%; --nuage-y: 36%; } }
/* sans 3D accélérée ou en mouvement réduit : l'image fixe de la même fumée */
html.fumee-fixe body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url("../img/fumee-fixe.webp?v=2") center / cover no-repeat; opacity: .6; pointer-events: none; }

/* ---------- En-tête ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--hdr); transition: height .35s var(--ease), transform .45s var(--ease); }
/* le verre vit sur ::before : un backdrop-filter sur la barre ferait d'elle le bloc conteneur du menu fixe (fon10, 27/09) */
.header::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 11, 0); border-bottom: 1px solid transparent; transition: background .35s, border-color .35s, backdrop-filter .35s; }
.header.is-scrolled::before { background: rgba(10, 10, 11, .78); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.header.is-hidden { transform: translateY(-100%); }
/* menu ouvert (téléphone) : la barre prend le même verre que le panneau, pour qu'ils ne fassent qu'un */
.nav-open .header::before { background: rgba(12, 12, 14, .72); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.header__inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__casque { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(255, 48, 48, .35)); }
.brand__nom { font: 800 1.08rem/1 var(--font-h); text-transform: uppercase; letter-spacing: .06em; }
.brand__nom b { color: var(--red); font-weight: 800; }
.nav { display: flex; align-items: center; gap: 22px; }
.nav__list { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__link { position: relative; z-index: 1; display: block; padding: 8px 12px; border-radius: 999px; font: 600 .86rem/1 var(--font-b); color: var(--muted); letter-spacing: .02em; transition: color .25s; }
.nav__link:hover, .nav__link.is-active { color: var(--txt); }
.nav__pill { position: absolute; left: 0; top: 50%; height: 32px; margin-top: -16px; border-radius: 999px; background: rgba(var(--red-a), .16); box-shadow: inset 0 0 0 1px rgba(var(--red-a), .35); pointer-events: none; opacity: 0; }
.nav__list.is-ready .nav__pill { opacity: 1; transition: transform .45s var(--spring), width .45s var(--spring), opacity .3s; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: var(--txt); transition: transform .35s var(--ease), opacity .2s; }
.burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 21px; } .burger span:nth-child(3) { top: 27px; }
.nav-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .burger span:nth-child(2) { opacity: 0; }
.nav-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Boutons ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font: 700 .9rem/1 var(--font-h); letter-spacing: .04em; text-transform: uppercase; transition: transform .25s var(--ease), box-shadow .3s, background .3s, color .3s; white-space: nowrap; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 12px 34px -12px rgba(var(--red-a), .8); }
.btn--primary:hover { box-shadow: 0 16px 44px -10px rgba(var(--red-a), .95); }
.btn--ghost { color: var(--txt); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--red); color: #fff; }
.btn--lg { padding: 17px 28px; font-size: .95rem; }
.btn--block { width: 100%; }
.btn__prix { padding: 5px 10px; border-radius: 999px; background: rgba(0, 0, 0, .25); font: 600 .8rem/1 var(--font-b); letter-spacing: 0; text-transform: none; }

/* ---------- Héros ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--hdr) + clamp(20px, 3.5vh, 64px)) 0 clamp(110px, 13vh, 132px); overflow: hidden; }   /* bas : l'icône de défilement (26 + 42 px) garde ≥ 40 px d'air sous les chiffres */
.hero__scene { position: absolute; inset: 0; z-index: 0; }
#coach-canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }   /* fondu en bas du héros */
.hero__fallback { display: none; position: absolute; right: 2%; top: 50%; width: min(64vw, 900px); transform: translateY(-46%); }
.hero__fallback img { width: 100%; height: auto; image-rendering: auto; filter: grayscale(1) contrast(1.4) brightness(.9) sepia(1) hue-rotate(-50deg) saturate(6); opacity: .55; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent); mask-image: radial-gradient(closest-side, #000 60%, transparent); }
.no-webgl .hero__fallback { display: block; }
.no-webgl #coach-canvas { display: none; }
/* voile de lisibilité derrière le texte : une nappe RADIALE, fondue à zéro en bas du héros (30/09 : l'ancien voile finissait
   par un aplat opaque de la couleur du fond — sur la fumée, une ligne nette au défilement) */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 60% 72% at 24% 50%, rgba(10, 10, 11, .84) 0%, rgba(10, 10, 11, .5) 48%, rgba(10, 10, 11, 0) 78%); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
.hero__content { position: relative; z-index: 2; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .06)), var(--verre); box-shadow: inset 0 0 0 1px var(--line); font: 600 .8rem/1.3 var(--font-b); letter-spacing: .06em; text-transform: uppercase; color: var(--txt); }
.eyebrow__plus { margin-left: -5px; }   /* l'écart flex (10 px) + « · » : ramené à la largeur d'une espace */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(var(--red-a), .7); animation: pouls 2.2s infinite; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(var(--red-a), .7); } 70% { box-shadow: 0 0 0 10px rgba(var(--red-a), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--red-a), 0); } }
.hero__title { max-width: 12ch; font-size: min(clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem), 11vh);   /* plafonné par la HAUTEUR : sur un portable (≈ 700 px utiles) il poussait les boutons hors de l'écran */ font-weight: 800; line-height: .98; text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 26px; }
.hero__title .w { display: inline-block; animation: mot-net 1s var(--ease) both; animation-delay: calc(.15s + var(--i, 0) * 70ms); }
@keyframes mot-net { from { opacity: .001; filter: blur(14px); transform: translateY(.18em); } to { opacity: 1; filter: none; transform: none; } }
.hero__lead { max-width: 44ch; font-size: 1.14rem; color: var(--txt); opacity: .9; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 30px 0 42px; }
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 12px 34px; }
.hero__stats li { display: flex; align-items: center; gap: 10px; }
.hero__stats b { font: 800 2rem/1 var(--font-h); color: var(--txt); white-space: nowrap; }
.hero__stats li > span { font-size: .78rem; line-height: 1.3; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hero__scroll { position: absolute; left: 50%; bottom: 26px; z-index: 2; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
/* écran bas et large (portables, et jusqu'à 940 px de haut) : tout le héros tient dans la hauteur, boutons, chiffres ET icône de défilement compris */
@media (min-width: 900px) and (max-height: 940px) {
  .hero { padding-top: calc(var(--hdr) + 14px); }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero__title { margin-bottom: 18px; }
  .hero__lead { max-width: 54ch; font-size: 1.04rem; line-height: 1.55; }
  .hero__cta { margin: 22px 0 26px; }
  .hero__stats b { font-size: 1.7rem; }
}
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: molette 1.8s infinite; }
@keyframes molette { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(84px, 11vw, 150px) 0; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .018) 18%, rgba(255, 255, 255, .018) 82%, transparent); }
.section__head { position: relative; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 70px); text-align: center; }
.section__head .label { justify-content: center; }
.section__head .label::after { content: ""; width: 26px; height: 2px; background: var(--grad); }
.section__head .lead { color: var(--muted); }
.titre .w, .titre .grad { display: inline-block; }

/* ---------- Cartes 3D ---------- */
.card {
  position: relative; height: 100%; padding: 26px; border-radius: var(--r); background: var(--card-bg);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .8);
  transform: perspective(1000px) translateY(var(--lift, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sz, 1));
  transform-style: preserve-3d; transition: transform .12s linear, box-shadow .35s;
}
.card.is-reset { transition: transform .6s var(--spring), box-shadow .35s; }
.card:hover { box-shadow: inset 0 0 0 1px rgba(var(--red-a), .45), 0 34px 70px -28px rgba(var(--red-a), .45); }
.card.is-focus { --rx: 0deg !important; --ry: 0deg !important; transform: perspective(1000px) scale(1.02); transition: transform .45s var(--spring); }
.glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .09), transparent 42%); opacity: 0; transition: opacity .3s; }
.card:hover .glare { opacity: 1; }
.card h3 { transform: translateZ(28px); }
.card__link { margin-top: auto; }

/* ---------- Le club ---------- */
.club { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.club__logo { width: min(320px, 80%); height: auto; }
/* grand écran : la kettlebell en particules se pose À CÔTÉ du logo (repère vide, objets3d.js s'y cale) */
.club__titre { position: relative; }
.club__kettle, .club__kettle-m { display: none; }
/* téléphone et tablette : la kettlebell en haut de la section, centrée sur sa ligne, au-dessus du label « Le club » */
@media (max-width: 1023px) { .objets-part .club__kettle-m { display: block; width: 150px; height: 190px; margin: 0 auto 22px; } }
@media (min-width: 1024px) { .objets-part .club__kettle { display: block; position: absolute; left: min(340px, 84%); top: 50%; width: 118px; height: 150px; margin-top: -86px; } }
.atouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
.atout { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), var(--verre); box-shadow: inset 0 0 0 1px var(--line); font: 600 .95rem/1.3 var(--font-b); color: var(--txt); }
.atout.is-in { animation: anneau 1s .25s ease-out; }
@keyframes anneau { 0% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 0 rgba(var(--red-a), .6); } 100% { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 10px rgba(var(--red-a), 0); } }
.ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: rgba(var(--red-a), .14); position: relative; }
.ico::before { content: ""; position: absolute; inset: 7px; background: var(--red); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico--salle { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 7v10M18 7v10M3 9v6M21 9v6M6 12h12'/%3E%3C/svg%3E"); }
.ico--live { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M7.8 7.8a6 6 0 0 0 0 8.4M16.2 7.8a6 6 0 0 1 0 8.4M4.9 4.9a10 10 0 0 0 0 14.2M19.1 4.9a10 10 0 0 1 0 14.2'/%3E%3C/svg%3E"); }
.ico--web { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3.5 3 14.5 0 18M12 3c-3 3.5-3 14.5 0 18'/%3E%3C/svg%3E"); }
.ico--replay { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M10 9l5 3-5 3z'/%3E%3C/svg%3E"); }
.ico--horloge { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ico--conseil { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.card--offre { display: flex; flex-direction: column; gap: 16px; padding: 18px 18px 22px; overflow: visible; }
.offre__photo { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; transform: translateZ(18px); }
.offre__photo img { width: 100%; height: 100%; object-fit: cover; }
.offre__nom { margin: 4px 0 0; font: 700 .8rem/1 var(--font-h); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.offre__prix { display: flex; align-items: center; gap: 14px; margin: 0; }
.offre__prix b { font: 800 3.2rem/1 var(--font-h); color: #fff; }
.offre__prix span { font-size: .82rem; line-height: 1.35; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.offre__obj { position: absolute; right: -58px; top: -70px; width: 170px; height: auto; transform: translateZ(60px) rotate(8deg); pointer-events: none; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32)); animation: flotte 6s ease-in-out infinite; }   /* 30/09 : ombre adoucie (était .6 sur 30 px) */
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* ---------- Du jeune pue la pisse… au spartiate + (logo3d.js) : la poussière devient le casque du logo ----------
   L'écran reste collé sur 420 vh : chaque phrase tient environ un écran de défilement (le tunnel de 240 vh
   les faisait défiler trop vite pour être lues). Le casque se forme dans le haut, la légende vit dans la bande du bas. */
/* ---------- Objets en particules (objets3d.js) : une toile fixe par-dessus la page ; les images d'origine restent,
   invisibles, comme REPÈRES (elles flottent, l'objet flotte avec elles) ---------- */
.objets-canvas { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; }   /* taille en px posée par le script = la zone visible */
.objets-part .offre__obj, .objets-part .section__obj--chrono { opacity: 0; }
/* le chrono en particules : à l'écart du titre (l'image le chevauchait), plus grand, droit */
.objets-part .section__obj--chrono { right: -210px; top: 0; width: 180px; transform: none; }
@media (max-width: 1239px) { .objets-part .section__obj--chrono { right: 0; top: -150px; width: 120px; } }
.voyage { position: relative; height: 420vh; }
.voyage__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: radial-gradient(42% 46% at 50% 38%, rgba(var(--red-a), .10), transparent 72%); }
.voyage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: radial-gradient(var(--amas-rx, 62%) var(--amas-ry, 60%) at 50% var(--amas-y, 40%), #000 42%, transparent 100%); mask-image: radial-gradient(var(--amas-rx, 62%) var(--amas-ry, 60%) at 50% var(--amas-y, 40%), #000 42%, transparent 100%); }   /* fondu RADIAL autour du casque : la poussière s'éteint vers les bords en nuage, jamais en bande nette */
@media (max-width: 899px) and (orientation: portrait) { .voyage__canvas { --amas-rx: 86%; --amas-ry: 52%; --amas-y: 38%; } }
.voyage__logo { display: none; }
.voyage__legende { position: absolute; left: 0; right: 0; bottom: 8vh; bottom: 8svh; height: 20vh; height: 20svh; display: grid; place-items: center; text-align: center; pointer-events: none; }
.voyage__l { grid-area: 1 / 1; margin: 0; padding: 0 24px; font: 800 clamp(1.8rem, 1rem + 3vw, 3.4rem)/1.05 var(--font-h); text-transform: uppercase; color: #fff; opacity: 0; transform: translateY(22px); filter: blur(8px); transition: opacity .6s, transform .9s var(--ease), filter .6s; text-shadow: 0 0 40px rgba(0, 0, 0, .9); }
.voyage__l b { font-weight: 800; }
.voyage__l.is-on { opacity: 1; transform: none; filter: none; }
/* le fil : trois traits qui se remplissent, on sait qu'il reste des phrases */
.voyage__fil { position: absolute; left: 50%; bottom: 4vh; bottom: calc(4svh + env(safe-area-inset-bottom, 0px)); display: flex; gap: 8px; transform: translateX(-50%); }
.voyage__fil span { position: relative; width: 38px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); overflow: hidden; }
.voyage__fil span::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
/* sans 3D (ou mouvement réduit, plus bas) : le logo fixe et les trois phrases posées */
.no-webgl .voyage { height: auto; padding: 70px 0; }
.no-webgl .voyage__sticky { position: relative; height: auto; background: none; }
.no-webgl .voyage__canvas, .no-webgl .voyage__fil { display: none; }
.no-webgl .voyage__logo { display: block; width: 150px; height: auto; margin: 0 auto 26px; filter: drop-shadow(0 0 28px rgba(var(--red-a), .45)); }
.no-webgl .voyage__legende { position: relative; bottom: auto; height: auto; display: flex; flex-direction: column; gap: 14px; }
.no-webgl .voyage__l { opacity: 1; transform: none; filter: none; }

/* ---------- Programmes ---------- */
.section__obj { position: absolute; width: 150px; height: auto; pointer-events: none; animation: flotte 7s ease-in-out infinite; }
.section__obj--chrono { right: -40px; top: -30px; transform: rotate(12deg); }
.progs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card--prog { display: flex; flex-direction: column; align-items: flex-start; padding-top: 22px; }
.prog__boite { margin: 0 auto 20px; height: 230px; display: flex; align-items: flex-end; transform: translateZ(50px); }
.prog__boite img { height: 100%; width: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(var(--red-a), .18)); transition: transform .5s var(--spring); }
.card--prog:hover .prog__boite img { transform: translateY(-8px) rotate(-3deg); }
.prog__niveau { margin: 0 0 8px; font: 700 .72rem/1 var(--font-h); letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.card--prog p:not(.prog__niveau):not(.prog__prix) { flex: 1; }
.prog__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 16px; }   /* 12/10 : prix du programme, comme .produit__prix ; à côté, le paiement en plusieurs fois */
.prog__prix b { font: 800 1.9rem/1 var(--font-h); color: #fff; }
.prog__prix span { font-size: .85rem; line-height: 1.3; color: var(--muted); }

/* ---------- Alimentation ---------- */
.alim { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.alim__intro { position: relative; }
.alim__part { display: flex; gap: 18px; align-items: flex-start; margin: 26px 0 18px; padding: 20px; border-radius: var(--r); background: linear-gradient(rgba(var(--red-a), .09), rgba(var(--red-a), .09)), var(--verre); box-shadow: inset 0 0 0 1px rgba(var(--red-a), .22); }
.alim__part b { font: 800 3rem/1 var(--font-h); color: var(--red); white-space: nowrap; }
.alim__part b span { font: inherit; color: inherit; }
.alim__part > span { font-size: .96rem; color: var(--muted); }
.alim__medecin { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--muted); }
.alim__medecin svg { flex: none; width: 18px; height: 18px; color: var(--red); }
/* nature morte (30/09 : « mets des fruits à côté du bol, ça va combler le vide ») : tout est placé en % d'une scène
   au rapport fixe, le bol au centre (l'image du bol a beaucoup de vide en haut et en bas : elle déborde la scène) ;
   derrière lui la pomme et les fraises, devant les framboises et une fraise ; chacun flotte à son rythme */
.alim__table { position: relative; width: min(470px, 100%); aspect-ratio: 100 / 64; margin: 18px 0 0 -12px; }
.alim__table img { position: absolute; height: auto; }
.alim__obj { left: 12%; top: -3%; width: 76%; z-index: 2; animation: flotte 8s ease-in-out infinite; }
.fruit { z-index: 1; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .35)); animation: flotte 7s ease-in-out infinite; }
.fruit--pomme { left: 0; top: 16%; width: 25%; rotate: -8deg; animation-duration: 9s; animation-delay: -2s; }
.fruit--fraises { right: -2%; top: 22%; width: 33%; rotate: 6deg; animation-duration: 7.5s; animation-delay: -4s; }
.fruit--framboises { right: 6%; bottom: 7%; width: 24%; z-index: 3; animation-duration: 6.5s; animation-delay: -1s; }
.fruit--fraise { left: 17%; bottom: 4%; width: 11%; z-index: 3; rotate: -18deg; animation-duration: 8.5s; animation-delay: -5s; }
.alim__produits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card--produit { display: flex; flex-direction: column; }
.produit__img { margin: -8px -8px 18px; border-radius: 14px; overflow: hidden; aspect-ratio: 1; transform: translateZ(22px); }
.produit__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card--produit:hover .produit__img img { transform: scale(1.06); }
.card--produit p:not(.produit__prix) { flex: 1; font-size: .95rem; }
.produit__prix { margin: 0 0 16px; font: 800 1.9rem/1 var(--font-h); color: #fff; }

/* ---------- Philosophie ---------- */
.philo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.philo__photos { position: relative; aspect-ratio: 1 / 1.02; }
.philo__p { position: absolute; margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px var(--line); }
.philo__p img { width: 100%; height: 100%; object-fit: cover; }
.philo__p--1 { left: 0; top: 0; width: 82%; aspect-ratio: 3 / 2; }
.philo__p--2 { right: 0; top: 52%; width: 58%; aspect-ratio: 524 / 286; transform: rotate(3deg); }
.philo__p--3 { left: 6%; bottom: 0; width: 46%; aspect-ratio: 524 / 286; transform: rotate(-4deg); outline: 3px solid var(--red); outline-offset: -3px; }
.citation { position: relative; margin: clamp(60px, 8vw, 110px) 0 0; padding: clamp(34px, 5vw, 60px); padding-right: clamp(34px, 18vw, 260px); border-radius: var(--r); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line); overflow: visible; }
.citation > p { margin: 0 0 26px; font: 700 clamp(1.3rem, .9rem + 1.5vw, 2rem)/1.3 var(--font-h); color: #fff; }
.citation footer { margin-top: 24px; color: var(--muted); font-style: italic; }
.citation__obj { position: absolute; right: -30px; top: 50%; width: clamp(180px, 22vw, 320px); height: auto; transform: translateY(-50%); pointer-events: none; animation: flotte 7s ease-in-out infinite; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .32)); }   /* 30/09 : ombre adoucie (était .7 sur 40 px, avec le halo du détourage : trop intense) */
.valeurs { display: flex; flex-wrap: wrap; gap: 10px; }
.valeurs li { padding: 9px 14px; border-radius: 999px; background: rgba(var(--red-a), .1); box-shadow: inset 0 0 0 1px rgba(var(--red-a), .3); font: 600 .86rem/1.3 var(--font-b); color: var(--txt); }

/* ---------- Avis : bandeau défilant ---------- */
.marquee { 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); }
.marquee__track { display: flex; gap: 22px; width: max-content; animation: defile 60s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.avis { flex: 0 0 360px; padding: 26px; border-radius: var(--r); background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--line); }
.avis::before { content: "★★★★★"; display: block; margin-bottom: 12px; color: var(--red); letter-spacing: 3px; }
.avis p { font-size: .98rem; color: var(--txt); opacity: .92; }
.avis b { font: 700 .82rem/1 var(--font-h); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq__item { border-radius: var(--r-sm); background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), var(--verre); box-shadow: inset 0 0 0 1px var(--line); }
.faq__item[open] { box-shadow: inset 0 0 0 1px rgba(var(--red-a), .45); background: linear-gradient(rgba(var(--red-a), .08), rgba(var(--red-a), .08)), var(--verre); }
.faq__item summary { position: relative; padding: 20px 56px 20px 22px; font: 700 1.02rem/1.35 var(--font-h); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq__item[open] summary::after { transform: translateY(5px) rotate(225deg); }
.faq__rep { padding: 0 22px 20px; }
.faq__rep a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 5vw, 80px); align-items: start; }
.contact__reseaux-titre { margin: 30px 0 14px; font: 700 .82rem/1.45 var(--font-h); letter-spacing: .16em; text-transform: uppercase; color: var(--txt); }
.reseaux { display: grid; gap: 12px; }
.reseaux a { display: grid; grid-template-columns: 44px 1fr auto; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-sm); background: linear-gradient(rgba(255, 255, 255, .05), rgba(255, 255, 255, .05)), var(--verre); box-shadow: inset 0 0 0 1px var(--line); font: 700 1rem/1.2 var(--font-h); transition: box-shadow .3s; }
.reseaux a:hover { box-shadow: inset 0 0 0 1px var(--red); }
.reseaux svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgba(var(--red-a), .14); fill: var(--red); }
.reseaux a::after { content: "\2197"; color: var(--muted); font-size: 1.05rem; transition: color .3s, transform .3s var(--ease); }   /* ↗ : lien vers un autre site */
.reseaux a:hover::after { color: var(--red); transform: translate(2px, -2px); }
.form { position: relative; display: grid; gap: 14px; padding: clamp(22px, 3vw, 34px); border-radius: var(--r); background: rgba(22, 22, 26, .72); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { position: relative; display: block; }
.field input, .field select, .field textarea { width: 100%; padding: 24px 16px 10px; border-radius: var(--r-sm); border: 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line); color: var(--txt); font: 500 1rem/1.4 var(--font-b); outline: none; transition: box-shadow .25s; resize: vertical; }
.field select { appearance: none; color-scheme: dark; cursor: pointer; }
.field--select::after { content: ""; position: absolute; right: 18px; top: 26px; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); pointer-events: none; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: inset 0 0 0 1.5px var(--red); }
.field > span { position: absolute; left: 16px; top: 17px; font-size: 1rem; color: var(--muted); pointer-events: none; transition: transform .2s var(--ease), font-size .2s, color .2s; transform-origin: 0 0; }
.field input:focus + span, .field input:not(:placeholder-shown) + span, .field textarea:focus + span, .field textarea:not(:placeholder-shown) + span, .field select + span { transform: translateY(-10px); font-size: .74rem; color: var(--red); letter-spacing: .04em; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { box-shadow: inset 0 0 0 1.5px #ff6b6b; }
/* menu déroulant dessiné (main.js, 30/09) : le <select> reste pour l'envoi et la validation, retiré de l'écran */
.field select option { background: #141417; color: var(--txt); }   /* sans JavaScript : la liste native au moins sombre */
.field--select.is-enhanced select { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.choix__btn { display: block; width: 100%; padding: 24px 44px 10px 16px; border: 0; border-radius: var(--r-sm); background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px var(--line); color: var(--txt); font: 500 1rem/1.4 var(--font-b); text-align: left; cursor: pointer; transition: box-shadow .25s; }
.choix__btn.is-vide .choix__val { color: var(--muted); }
.choix__btn:focus-visible, .field--select.is-open .choix__btn { outline: none; box-shadow: inset 0 0 0 1.5px var(--red); }
.field.is-invalid .choix__btn { box-shadow: inset 0 0 0 1.5px #ff6b6b; }
.field--select::after { transition: transform .25s var(--ease), border-color .25s; }
.field--select.is-open::after { transform: translateY(5px) rotate(225deg); border-color: var(--red); }
.field--select.is-open { z-index: 6; }
.choix__liste { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; max-height: 290px; margin: 0; padding: 6px; overflow: auto; list-style: none; border-radius: var(--r-sm); background: #141417; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 1px rgba(var(--red-a), .16), 0 26px 50px -14px rgba(0, 0, 0, .9); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.985); transform-origin: 50% 0; transition: opacity .18s, transform .24s var(--ease), visibility 0s .24s; }
.field--select.is-open .choix__liste { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .24s var(--ease), visibility 0s; }
.choix__opt { position: relative; padding: 12px 42px 12px 14px; border-radius: 10px; color: var(--txt); font: 500 .98rem/1.35 var(--font-b); cursor: pointer; transition: background .15s, color .15s; }
.choix__opt.is-actif { background: rgba(var(--red-a), .14); color: #fff; }
.choix__opt.is-choisi { font-weight: 600; color: #fff; }
.choix__opt.is-choisi::after { content: ""; position: absolute; right: 17px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); }
@media (pointer: coarse) { .choix__opt { padding-top: 15px; padding-bottom: 15px; } }
.field__msg { display: block; margin-top: 6px; font-size: .82rem; color: #ff8d8d; }
.field__count { position: absolute; right: 12px; bottom: 10px; font-size: .72rem; color: var(--muted); }
.form__error { margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 80, 80, .12); color: #ffb0b0; font-size: .92rem; }
.form__demo { margin: 0; padding: 11px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.form__demo a { color: #fff; text-decoration: underline; }
.form__demo.is-flash { animation: demo-flash .9s ease-out; }
@keyframes demo-flash { 0% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 6px rgba(255, 48, 48, .35); } 100% { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 0 rgba(255, 48, 48, 0); } }
.demo-badge { position: fixed; left: 14px; bottom: 14px; z-index: 60; padding: 8px 12px; border-radius: 999px; background: rgba(16, 16, 18, .82); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255, 255, 255, .72); font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .04em; text-decoration: none; }
.demo-badge b { color: #fff; font-weight: 700; }
.demo-badge:hover { box-shadow: inset 0 0 0 1px var(--red); }
.form__ok { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 30px; border-radius: inherit; background: rgba(16, 16, 18, .96); text-align: center; }
.form__ok[hidden] { display: none; }
.form__ok svg { width: 64px; height: 64px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.form__ok circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: trace .7s .1s ease-out forwards; }
.form__ok path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: trace .45s .7s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.form__ok p { max-width: 30ch; color: var(--txt); font-size: 1.05rem; }
.btn.is-busy { pointer-events: none; opacity: .85; }
.spin { width: 18px; height: 18px; animation: tourne .8s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }

/* ---------- Pied de page, remonter, toast ---------- */
.footer { padding: 46px 0 36px; border-top: 1px solid var(--line); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 32px; }
.footer__liens { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer__liens a { font-size: .9rem; color: var(--muted); transition: color .25s; }
.footer__liens a:hover { color: var(--txt); }
.footer__bas { flex-basis: 100%; margin: 0; font-size: .84rem; color: var(--muted); }
.lien-calme { font-size: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.lien-calme:hover { color: var(--txt); }
.totop { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(20, 20, 22, .85); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s, transform .3s; }
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { width: 20px; height: 20px; fill: none; stroke: var(--txt); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 130; padding: 12px 18px; border-radius: 999px; background: #fff; color: #111; font-weight: 600; font-size: .92rem; transform: translate(-50%, 40px); opacity: 0; pointer-events: none; transition: transform .35s var(--ease), opacity .35s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Préchargeur ---------- */
.loader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--bg); transition: transform .9s cubic-bezier(.76, 0, .24, 1), opacity .4s .6s; }
.loader.is-done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.loader__casque { position: relative; width: 120px; height: 120px; }
.loader__casque img { position: relative; z-index: 1; width: 100%; height: 100%; }
.loader__fill { position: absolute; left: 10%; right: 10%; bottom: 6%; height: var(--f, 0%); background: var(--grad); border-radius: 30% 30% 20% 20%; filter: blur(6px); opacity: .85; transition: height .15s linear; }
.loader__txt { margin: 0; font: 800 1rem/1 var(--font-h); letter-spacing: .2em; text-transform: uppercase; color: var(--txt); }
.loader__txt b { color: var(--red); }
.loader__pct { font: 600 .82rem/1 var(--font-b); color: var(--muted); font-variant-numeric: tabular-nums; }
html.is-loading, html.is-loading body { overflow: hidden; }

/* ---------- Apparitions / disparitions au défilement (mêmes états que fon10) ---------- */
[data-reveal] { opacity: 0; transform: translate3d(0, 48px, 0); transition: opacity .5s ease, transform .9s var(--ease), filter .5s ease, box-shadow .3s; transition-delay: calc(var(--d, 0) * 90ms); }
[data-reveal="left"] { transform: translate3d(-72px, 0, 0); }
[data-reveal="right"] { transform: translate3d(72px, 0, 0); }
[data-reveal="zoom-in"] { transform: scale(.6) translate3d(0, 30px, 0); transition-timing-function: ease, var(--spring), ease; }
[data-reveal="blur"] { transform: translate3d(0, 24px, 0) scale(.96); filter: blur(14px); }
[data-reveal="card"] { transform: perspective(1200px) translate3d(0, 120px, -180px) rotateX(-26deg) scale(.86); transform-origin: 50% 100%; transition-duration: .45s, .95s, .45s, .3s; transition-timing-function: ease, var(--spring), ease, ease; }
[data-reveal="card"][data-from="left"] { transform: perspective(1200px) translate3d(-160px, 30px, -180px) rotateY(32deg) scale(.86); transform-origin: 0 50%; }
[data-reveal="card"][data-from="right"] { transform: perspective(1200px) translate3d(160px, 30px, -180px) rotateY(-32deg) scale(.86); transform-origin: 100% 50%; }
[data-reveal="wipe"] { opacity: 1; clip-path: inset(0 100% 0 0 round var(--r-sm)); transform: translate3d(-28px, 0, 0); transition: clip-path 1s var(--ease), transform 1s var(--ease), opacity .4s ease, box-shadow .3s; }
[data-reveal="flip-x"] { transform: perspective(1000px) rotateX(-82deg) translate3d(0, -14px, 0); transform-origin: 50% 0; transition-duration: .4s, .95s, .4s, .3s; transition-timing-function: ease, var(--spring), ease, ease; }
[data-reveal="screen"] { transform: scale(1.3); filter: blur(12px) brightness(2); transition-duration: .5s, .95s, .7s, .3s; }
[data-reveal].is-in { opacity: 1; filter: none; transform: none; }
[data-reveal="wipe"].is-in { clip-path: inset(-40px -400px -40px 0 round var(--r-sm)); }
[data-reveal].is-settled { transition-duration: .5s, 0s, .5s, .3s; transition-delay: 0s; }
[data-reveal].is-above { opacity: 0; transform: translate3d(0, -64px, 0) scale(.94); transition-duration: .5s; transition-timing-function: ease; }
[data-reveal="card"].is-above { transform: perspective(1200px) translate3d(0, -110px, -220px) rotateX(24deg) scale(.88); transform-origin: 50% 0; }
[data-reveal="wipe"].is-above { opacity: 1; clip-path: inset(0 0 0 100% round var(--r-sm)); transform: translate3d(28px, -16px, 0); }
[data-reveal="flip-x"].is-above { transform: perspective(1000px) rotateX(72deg) translate3d(0, -30px, 0); transform-origin: 50% 100%; }
[data-reveal="screen"].is-above { transform: scale(.8); filter: blur(8px) brightness(.4); }
/* contenu des cartes : cascade après la carte */
.card > * { opacity: var(--co, 0); transform: translate3d(0, var(--cy, 18px), var(--z, 0px)); transition: opacity .4s ease, transform .6s var(--spring); transition-delay: calc(.06s + var(--n, 0) * 55ms); }
.card > :nth-child(2) { --n: 1; } .card > :nth-child(3) { --n: 2; } .card > :nth-child(4) { --n: 3; } .card > :nth-child(5) { --n: 4; } .card > :nth-child(6) { --n: 5; } .card > :nth-child(7) { --n: 6; }
.card > .glare, .card > .offre__obj { --co: 1; --cy: 0px; }
.is-in .card > * { --co: 1; --cy: 0px; }
.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 36%, rgba(255, 255, 255, .22) 50%, rgba(var(--red-a), .16) 56%, transparent 68%); background-size: 100% 300%; background-position: 0 100%; }
.is-in .card::after { animation: balayage 1.1s .3s ease-out; }
@keyframes balayage { 0% { opacity: 0; background-position: 0 100%; } 20% { opacity: 1; } 100% { opacity: 0; background-position: 0 0%; } }

/* ---------- Écrans ---------- */
@media (max-width: 1023px) {
  :root { --hdr: 64px; }
  .burger { display: block; }
  .nav { position: fixed; left: 0; right: 0; top: var(--hdr); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 22px; background: rgba(12, 12, 14, .72); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--line); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .3s, visibility 0s .35s; }
  .nav::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad); }
  .nav-open .nav { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--ease), opacity .3s, visibility 0s; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__link { padding: 16px 4px; border-radius: 0; font: 700 .95rem/1 var(--font-h); text-transform: uppercase; letter-spacing: .08em; }
  .nav__pill { display: none; }
  .nav__cta { margin-top: 18px; }
  .hero__stats { grid-template-columns: repeat(2, auto); }
  .club, .alim, .philo, .contact { grid-template-columns: 1fr; }
  .club__offre { width: 100%; max-width: 520px; justify-self: center; }   /* centrée (elle restait calée à gauche) */
  .alim__table { margin: 18px auto 0; }   /* la nature morte centrée sous le texte */
  .progs { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .philo__photos { max-width: 620px; }
  .hero::after { background: radial-gradient(ellipse 90% 60% at 30% 58%, rgba(10, 10, 11, .8) 0%, rgba(10, 10, 11, .45) 55%, rgba(10, 10, 11, 0) 85%); }
}
@media (max-width: 859px) { .progs { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } .card--prog { align-items: center; text-align: center; } .prog__prix { justify-content: center; } }   /* une colonne : contenu des cartes centré */
@media (max-width: 671px) {
  .container { width: min(var(--container), 100% - 32px); }
  .hero { align-items: flex-end; }
  .hero__title { font-size: clamp(2.3rem, 1rem + 8vw, 3.4rem); }
  .hero__cta .btn { width: 100%; }
  .hero__stats { gap: 16px 22px; }
  .hero__stats b { font-size: 1.6rem; }
  .hero__stats li { flex-direction: column; align-items: flex-start; gap: 6px; }
  .alim__part { flex-direction: column; gap: 10px; }
  .eyebrow__plus, .hero__scroll { display: none; }
  .atouts { grid-template-columns: 1fr; }
  .alim__produits { grid-template-columns: 1fr; }
  .offre__obj { right: -14px; top: -54px; width: 120px; }
  .section__obj { display: none; }
  /* téléphone : le chrono DANS l'en-tête, centré au-dessus du label (placé au-dessus, il chevauchait les traits de
     progression de la section du logo) */
  .objets-part #programmes .section__head { display: flex; flex-direction: column; align-items: center; }
  .objets-part .section__obj--chrono { display: block; position: relative; order: -1; right: auto; top: auto; width: 140px; margin: 0 0 30px; }
  /* téléphone : la kettlebell sur SA ligne, centrée au-dessus de la carte (comme le chrono au-dessus de son titre) */
  .objets-part .offre__obj { left: 50%; right: auto; top: -172px; width: 150px; margin-left: -75px; transform: none; }
  .citation { padding-right: clamp(24px, 5vw, 60px); padding-top: 150px; }
  .citation__obj { right: 50%; top: -40px; width: 190px; transform: translateX(50%); }
  .avis { flex-basis: 290px; }
  .voyage { height: 360vh; }
  .voyage__legende { bottom: 9vh; bottom: 9svh; height: 24vh; height: 24svh; }
}

/* ---------- Sections différées ---------- */
.section { content-visibility: auto; contain-intrinsic-height: auto 1000px; }
#club { contain-intrinsic-height: auto 760px; }
#programmes { contain-intrinsic-height: auto 900px; }
#alimentation { contain-intrinsic-height: auto 820px; }
#philosophie { contain-intrinsic-height: auto 1400px; }
#avis { contain-intrinsic-height: auto 560px; }
#faq { contain-intrinsic-height: auto 620px; }
#contact { contain-intrinsic-height: auto 720px; }
@media (max-width: 1023px) { #club { contain-intrinsic-height: auto 1500px; } #alimentation { contain-intrinsic-height: auto 1500px; } #philosophie { contain-intrinsic-height: auto 2100px; } #contact { contain-intrinsic-height: auto 1150px; } }
@media (max-width: 671px) { #programmes { contain-intrinsic-height: auto 2200px; } #alimentation { contain-intrinsic-height: auto 2300px; } }
html.cv-tout .section { content-visibility: visible; }

/* ---------- Hors de l'écran, les animations en boucle s'arrêtent (main.js pose .is-offscreen) ---------- */
.is-offscreen, .is-offscreen::before, .is-offscreen::after, .is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* ---------- Mouvement réduit (préférence du système ou bouton « Moins d'animations ») ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (prefers-reduced-motion: reduce) { [data-reveal], .card > * { opacity: 1; transform: none; filter: none; clip-path: none; } .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }
.reduce-motion [data-reveal], .reduce-motion .card > * { opacity: 1; transform: none; filter: none; clip-path: none; }
.reduce-motion .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
.reduce-motion .voyage { height: auto; padding: 70px 0; }
.reduce-motion .voyage__sticky { position: relative; height: auto; background: none; }
.reduce-motion .voyage__canvas, .reduce-motion .voyage__fil { display: none; }
.reduce-motion .voyage__logo { display: block; width: 150px; height: auto; margin: 0 auto 26px; filter: drop-shadow(0 0 28px rgba(var(--red-a), .45)); }
.reduce-motion .voyage__legende { position: relative; bottom: auto; height: auto; display: flex; flex-direction: column; gap: 14px; }
.reduce-motion .voyage__l { opacity: 1; transform: none; filter: none; }
.reduce-motion .hero__title .w { animation: none; }
.reduce-motion [data-tilt] { transform: none !important; }
/* ---------- 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 (03/10/2026). ---------- */
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(--line), inset 0 0 0 1000px #0e0e10 !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(--red), inset 0 0 0 1000px #0e0e10 !important; }
input:autofill, textarea:autofill { filter: none; }   /* Firefox pose un filtre jaune */
/* ---------- bandeau de cookies (créé par mesure.js ; en sommeil sur la copie de démonstration) ---------- */
.cookies { position: fixed; z-index: 200; left: 16px; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; max-width: 880px; margin-inline: auto; padding: 18px 20px; border-radius: var(--r); background: #141417; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 30px 70px -20px #000; }
.cookies[hidden] { display: none; }
.cookies__txt { flex: 1 1 360px; font-size: .9rem; line-height: 1.55; color: var(--muted); }
.cookies__txt p { margin: 0; }
.cookies__titre { margin-bottom: 4px !important; font: 700 1.05rem/1.2 var(--font-h); color: var(--txt); }
.cookies__choix { display: flex; flex: 0 1 300px; gap: 10px; }
.cookies__btn { flex: 1; padding: 13px 18px; border: 0; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22); color: var(--txt); font: 700 .86rem/1 var(--font-h); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.cookies__btn--oui { background: var(--grad); box-shadow: none; color: #fff; }
.cookies__gerer { margin-left: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 620px) { .cookies__choix { flex: 1 1 100%; } }

/* ---------- AUDIT TABLETTE (02/10) ----------
   tablette couchée (1024 à 1239 px) : « Le club » passait sur deux lignes dans la barre de menu — les entrées ne se
   coupent plus, et le menu se resserre un peu pour tenir. */
.nav__link { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1239px) {
  .header__inner { gap: 14px; }
  .nav { gap: 12px; }
  .nav__list { gap: 0; }
  .nav__link { padding: 8px 9px; font-size: .82rem; }
  .nav__cta { padding-inline: 16px; font-size: .8rem; }
}

/* ==========================================================================================================
   FLUIDITÉ DU DÉFILEMENT (04/10/2026). Le formulaire est posé sur la fumée animée : son flou d'arrière-plan se recalculait à
   chaque image de la fumée. Il est remplacé par un fond presque opaque (même teinte). Sur écran tactile et petit écran, les
   entrées gardent leur mouvement mais plus le flou animé.
   ========================================================================================================== */
.form { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(22, 22, 26, .93); }
@media (hover: none), (max-width: 980px) { [data-reveal="blur"], [data-reveal="screen"], [data-reveal="screen"].is-above { filter: none; } }