/* Pilotaj — 1. hero figé inspiré d'Orvane (buste en particules), couleurs Kronos (noir, gris, orange-rouge)
   2. prise de RDV façon agenda en ligne  3. agents (NTX, dessins en fil de fer)  4. parcours « Méthode »
   épinglé (idée NOLITH, public/story.js)  5. questions  6. appel final. */
:root {
  --bezel: #0A0A0A;
  --black: #050505;
  --panel: #D9D9D9;
  --card: #F3F3F2;
  --ink: #141110;
  --ink-2: #3B3431;
  --muted: #5B5350;
  --line: rgba(20, 17, 16, .13);
  --line-2: rgba(20, 17, 16, .22);
  --dline: rgba(237, 238, 237, .12);
  --dline-2: rgba(237, 238, 237, .22);
  --accent: #F0421C;
  --accent-2: #FF5A33;
  --orange: #F26B2E;
  --sky: #419DD2;
  --on-dark: #EDEEED;
  --on-dark-muted: #9A9290;
  --g: #22A55B; --o: #F28A1E; --r: #E0301E;
  --hero: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --sans: "Outfit", -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --maxw: 1240px;
  --gut: clamp(18px, 4vw, 56px);
  --hp: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; background: var(--bezel); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.mono { font-family: var(--mono); letter-spacing: .02em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.hidden { display: none !important; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border-radius: 999px; padding: 15px 26px; font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s, background .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn:active { transform: scale(.98); }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-2); }
.btn-line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-line:hover { background: var(--ink); color: var(--panel); }
.btn-sm { padding: 10px 18px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-ghost-sm { align-self: flex-start; background: none; border: 1.5px solid var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 8px 14px; font: 500 13px var(--sans); cursor: pointer; }
.btn-ghost-sm:hover { border-color: var(--accent); color: var(--accent); }
.arrows { display: inline-flex; gap: 2px; }
.arrows i { width: 0; height: 0; border-left: 6px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: .35; animation: arrow 1.2s infinite; }
.arrows i:nth-child(2) { animation-delay: .15s; } .arrows i:nth-child(3) { animation-delay: .3s; }
@keyframes arrow { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }
.link { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; padding: 0; }
.link:hover { color: var(--accent); }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.g { background: var(--g); } .dot.o { background: var(--accent); } .dot.r { background: var(--r); }
.lamps { display: inline-flex; gap: 4px; }
.lamps i { width: 7px; height: 7px; border-radius: 50%; }
.lamps .g { background: var(--g); } .lamps .o { background: var(--o); } .lamps .r { background: var(--r); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 500 19px/1 var(--hero); letter-spacing: -.02em; color: var(--on-dark); }

/* ---------- Cadre Kronos ---------- */
.frame { position: relative; margin: 14px; border-radius: 30px; background: var(--panel); }
.tab { position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.tab-top { top: -1px; padding: 12px 52px 16px; clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 26px 100%); }
.tab .logo { color: var(--ink); }

/* ---------- 1. HERO (figé pendant que la suite monte par-dessus) ---------- */
.hero { position: sticky; top: 14px; z-index: 0; height: calc(100svh - 28px); min-height: 620px; overflow: hidden; color: var(--on-dark); background: radial-gradient(55% 70% at 60% 42%, #221E1B 0%, #121110 55%, #0B0B0A 100%); }
.bust { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.no-webgl .bust { background: url(/assets/bust.png) 58% 60% / auto 108% no-repeat; }
.grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: calc(1 - var(--hp)); }
.grid-lines .v { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(237,238,237,.07); }
.grid-lines .h { position: absolute; left: 0; right: 0; height: 1px; background: rgba(237,238,237,.07); }
.grid-lines .v1 { left: 18%; } .grid-lines .v2 { left: 34%; } .grid-lines .v3 { left: 66%; } .grid-lines .v4 { left: 82%; }
.grid-lines .h1 { top: 24%; } .grid-lines .h2 { top: 78%; }
.grid-lines b { position: absolute; width: 11px; height: 11px; transform: translate(-50%, -50%); }
.grid-lines b::before, .grid-lines b::after { content: ""; position: absolute; background: var(--on-dark); opacity: .35; }
.grid-lines b::before { left: 5px; top: 0; width: 1px; height: 11px; }
.grid-lines b::after { top: 5px; left: 0; height: 1px; width: 11px; }
.lang-switch { position: absolute; top: 22px; left: 26px; z-index: 6; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--on-dark); border: 1px solid rgba(237,238,237,.4); border-radius: 999px; padding: 9px 14px; }
.lang-switch:hover { background: var(--on-dark); color: var(--ink); }
.btn-cta-top { position: absolute; top: 18px; right: 22px; z-index: 6; padding: 12px 20px; font-size: 12px; }

.hero-in { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: calc(1 - var(--hp) * 1.5); transform: translateY(calc(var(--hp) * -60px)); }
.hero-in a, .hero-in .hero-a, .hero-in .lights-hero { pointer-events: auto; }
.hero-a { position: absolute; left: clamp(22px, 3.2vw, 56px); top: 13%; max-width: min(560px, 40vw); }
h1 { font: 400 clamp(42px, 5.6vw, 94px)/.96 var(--hero); letter-spacing: -.045em; }
.hero .sub { margin-top: 22px; font-size: clamp(15px, 1.15vw, 17px); color: #BDB6B3; max-width: 30em; }
.hook { display: inline-flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 15px; border-radius: 12px; background: var(--panel); color: var(--ink); font-size: 15px; }
.hook b { color: var(--accent); font-weight: 600; }
.hero-cta { margin-top: 20px; }

.lights-hero { position: absolute; right: clamp(22px, 3.2vw, 56px); top: 22%; width: min(300px, 24vw); padding: 16px 18px; border-left: 1px solid rgba(237,238,237,.25); background: linear-gradient(90deg, rgba(11,11,10,.55), rgba(11,11,10,0)); }
.lh-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .16em; color: var(--on-dark-muted); margin-bottom: 12px; }
.lh { display: grid; grid-template-columns: 12px auto; column-gap: 10px; row-gap: 2px; align-items: center; margin: 10px 0; }
.lh i { width: 10px; height: 10px; border-radius: 50%; grid-row: 1; }
.lh.g i { background: var(--g); box-shadow: 0 0 12px var(--g); } .lh.o i { background: var(--o); box-shadow: 0 0 12px var(--o); } .lh.r i { background: var(--r); box-shadow: 0 0 12px var(--r); }
.lh b { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
.lh span { grid-column: 2; font-size: 14.5px; color: #D6D0CD; }

.h1b { position: absolute; right: clamp(22px, 3.2vw, 56px); bottom: 15%; text-align: right; font: 400 clamp(34px, 4.4vw, 74px)/.98 var(--hero); letter-spacing: -.04em; }
.benefits { position: absolute; left: clamp(22px, 3.2vw, 56px); bottom: 58px; list-style: none; margin: 0; padding: 0; text-shadow: 0 1px 10px #000, 0 0 4px #000; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); display: flex; flex-direction: column; gap: 5px; }
.benefits li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.rotator { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--on-dark-muted); white-space: nowrap; }
.rot-prefix::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.rot { color: var(--on-dark); font-weight: 500; }
.rot span { display: inline-block; white-space: pre; transition: filter .45s, opacity .45s, transform .45s; }
.rot.out span { filter: blur(6px); opacity: 0; transform: translateY(-3px); }
.rot.pre span { filter: blur(6px); opacity: 0; transform: translateY(3px); transition: none; }
.credit { position: absolute; left: clamp(22px, 3.2vw, 56px); bottom: 20px; font-size: 10px; color: #6F6866; }
.credit a { color: #8C8480; }
.scroll-cue { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.scroll-cue i { width: 1px; height: 22px; background: linear-gradient(var(--on-dark), transparent); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- La suite monte par-dessus le hero ---------- */
.over { position: relative; z-index: 2; }

/* Barre qui apparaît quand le hero est couvert */
.bar { position: fixed; top: 12px; left: 50%; transform: translate(-50%, -150%); z-index: 50; display: flex; align-items: center; gap: 22px; padding: 8px 8px 8px 20px; border-radius: 999px; background: rgba(10,10,10,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .35s cubic-bezier(.2,.8,.2,1); border: 1px solid var(--dline); }
.bar.show { transform: translate(-50%, 0); }

/* Indicateur de défilement (NTX) */
.progress { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 12px; mix-blend-mode: difference; opacity: 0; pointer-events: none; transition: opacity .4s; }
.progress.show { opacity: 1; pointer-events: auto; }
.progress a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.progress a::before { content: ""; width: 22px; height: 2px; background: rgba(255,255,255,.45); transition: width .3s, background .3s; }
.progress a.on::before { width: 46px; background: #fff; }
.progress span { font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(-6px); transition: .25s; }
.progress a:hover span { opacity: .9; transform: none; }

/* ---------- 2. RENDEZ-VOUS ---------- */
.rdv-page { min-height: calc(100svh - 28px); padding: clamp(40px, 6vw, 80px) max(var(--gut), calc((100% - var(--maxw)) / 2)); box-shadow: 0 -30px 80px rgba(0,0,0,.55); }
.rdv-head { text-align: center; margin-bottom: 34px; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--accent); margin-bottom: 18px; }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
.rdv-title { font: 500 clamp(36px, 5.4vw, 80px)/1 var(--hero); letter-spacing: -.045em; text-transform: none; }
.rdv-checks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; font-size: clamp(15px, 1.5vw, 20px); color: var(--ink-2); }
.rdv-checks li { display: inline-flex; align-items: center; gap: 10px; }
.rdv-checks li::before { content: "✓"; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--card); color: var(--accent); font-size: 14px; font-weight: 700; }

.booking { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(20,17,16,.6); max-width: 1120px; margin: 0 auto; }
.bk-side { padding: 22px; border-right: 1px solid var(--line); }
.bk-cover { position: relative; height: 150px; border-radius: 16px; overflow: hidden; background: radial-gradient(70% 90% at 70% 40%, #2A2522, #0B0B0A); }
.bk-cover img { position: absolute; right: -10px; bottom: -30px; height: 175%; opacity: .95; }
.bk-cover .logo { position: absolute; left: 16px; top: 16px; font-size: 16px; }
.bk-host { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.bk-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--ink); color: var(--panel); display: grid; place-items: center; font: 500 15px var(--hero); letter-spacing: .02em; }
.bk-host b { display: block; color: var(--ink); font-weight: 600; }
.bk-host small { color: var(--muted); font-size: 13px; }
.bk-title { font: 500 28px/1.1 var(--hero); letter-spacing: -.03em; margin: 16px 0 14px; }
.bk-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.bk-facts li { display: flex; align-items: flex-start; gap: 10px; }
.bk-facts li[hidden] { display: none; }
.bk-facts li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; background: var(--ink-2); -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.i-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.i-video { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M15 10l6-3v10l-6-3'/%3E%3C/svg%3E"); }
.i-cal { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); color: var(--accent); font-weight: 600; }
.i-globe { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E"); }
.i-globe b { font-weight: 500; }
.bk-intro { margin-top: 18px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.bk-main { padding: 24px clamp(18px, 3vw, 34px) 28px; }
.bk-side, .bk-main { min-width: 0; } /* sinon la rangée des jours élargit la carte au-delà de l'écran */
.bk-h { font: 500 22px/1.2 var(--hero); letter-spacing: -.02em; margin-bottom: 16px; }
.book-pane { display: flex; flex-direction: column; gap: 14px; }
.back { align-self: flex-start; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.book-pane label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--ink); font-weight: 500; position: relative; }
.book-pane em { color: var(--muted); font-style: normal; font-weight: 400; }
.req { color: var(--accent); font-style: normal; }
.book-pane input:not([type=checkbox]), .book-pane textarea { background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; padding: 13px 14px; color: var(--ink); font: 15px var(--sans); width: 100%; transition: border-color .2s; }
.book-pane textarea { resize: vertical; min-height: 96px; }
.book-pane input:focus, .book-pane textarea:focus { outline: none; border-color: var(--accent); }
.book-pane .invalid, .roles.invalid { border-color: var(--r) !important; }
.guests { display: flex; flex-direction: column; gap: 8px; }
.guests:empty { display: none; }
.guest-row { display: flex; gap: 8px; }
.guest-row button { border: 0; background: none; color: var(--muted); font-size: 20px; cursor: pointer; }
.roles { border: 1.5px solid transparent; border-radius: 12px; padding: 4px 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.roles legend { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 8px; padding: 0; }
.check { flex-direction: row !important; align-items: center; gap: 12px !important; cursor: pointer; font-weight: 400 !important; }
.check input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; flex: none; margin: 0; }
.check.other input:not([type=checkbox]) { flex: 1; }
.consent { align-items: flex-start; font-size: 13.5px !important; color: var(--ink-2) !important; }
.consent input { margin-top: 2px !important; }
.phone-in { display: flex; align-items: stretch; }
.phone-in b { display: grid; place-items: center; padding: 0 12px; border: 1.5px solid var(--line-2); border-right: 0; border-radius: 12px 0 0 12px; background: var(--panel); font-size: 14px; }
.phone-in b + input { border-radius: 0 12px 12px 0 !important; }
.company .hint { color: var(--muted); font-weight: 400; font-size: 12px; }
.suggest { position: absolute; top: calc(100% - 22px); left: 0; right: 0; z-index: 10; list-style: none; margin: 0; padding: 6px; background: #fff; border: 1.5px solid var(--line-2); border-radius: 12px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.35); max-height: 280px; overflow: auto; }
.suggest li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-weight: 400; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.suggest li small { color: var(--muted); font: 12px var(--mono); white-space: nowrap; }
.suggest li:hover, .suggest li[aria-selected="true"] { background: var(--panel); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-err { color: var(--r); font-size: 14px; }
.form-err:empty { display: none; }
.legal { font-size: 12px; color: var(--muted); text-align: center; }
.legal a { color: var(--ink-2); }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.day { flex: none; min-width: 74px; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 10px 8px; text-align: center; cursor: pointer; background: #fff; color: var(--ink); font: inherit; transition: .15s; }
.day small { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.day b { display: block; font: 500 22px var(--hero); margin: 3px 0; }
.day span { font-size: 11px; color: var(--muted); }
.day:hover { border-color: var(--ink-2); }
.day[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.day[aria-selected="true"] small, .day[aria-selected="true"] span { color: var(--on-dark-muted); }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; min-height: 160px; align-content: start; }
.time { border: 1.5px solid var(--line-2); border-radius: 10px; padding: 12px 6px; background: #fff; color: var(--ink); font: 500 14px var(--mono); cursor: pointer; transition: .15s; }
.time:hover { border-color: var(--accent); color: var(--accent); }
.times .note { grid-column: 1 / -1; color: var(--muted); font-size: 14px; padding: 16px 0; }
.skeleton { height: 44px; border-radius: 10px; background: linear-gradient(90deg, #e2e2e1 0%, #eeeeed 50%, #e2e2e1 100%); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }
#stepC { align-items: flex-start; padding-top: 8px; }
#stepC p { color: var(--ink-2); }
.done-lamp { width: 18px; height: 18px; border-radius: 50%; background: var(--g); box-shadow: 0 0 24px var(--g); }

/* ---------- 3+. Sections noires (NTX) ---------- */
.dark { position: relative; background: var(--black); color: var(--on-dark); overflow: hidden; }
.section { padding: clamp(90px, 12vw, 150px) max(var(--gut), calc((100% - var(--maxw)) / 2)); border-top: 1px solid var(--dline); }
.section-head { max-width: 820px; margin-bottom: 56px; position: relative; z-index: 1; }
h2 { font: 400 clamp(40px, 5.6vw, 88px)/.98 var(--hero); letter-spacing: -.045em; }
.dark .sub { color: var(--on-dark-muted); font-size: 18px; margin-top: 22px; max-width: 40em; }
.art { fill: none; stroke: currentColor; stroke-width: .7; }
.art .fill { fill: currentColor; stroke: none; }
.spin { animation: spin 40s linear infinite; }
.spin-slow { animation: spin 90s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bg-art { position: absolute; right: -120px; top: 60px; width: min(620px, 60vw); opacity: .16; }

.agents { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; position: relative; z-index: 1; }
.agent { display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; }
.agent-art { width: 96px; height: 96px; color: var(--on-dark); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.agent:hover .agent-art { transform: rotate(35deg) scale(1.05); color: var(--accent-2); }
.agent-n { font-size: 11px; letter-spacing: .16em; color: var(--accent); margin-bottom: 8px; }
.agent h3 { font: 400 25px/1.1 var(--hero); letter-spacing: -.03em; margin-bottom: 10px; }
.agent p { color: var(--on-dark-muted); font-size: 15.5px; }

/* ---------- 4. PARCOURS : une facture, de la boîte mail au feu vert (public/story.js) ----------
   Par défaut (sans JS, mouvement réduit, économie de données, impression) : 5 panneaux fixes.
   html.story-live : scène épinglée pilotée par le défilement. html.story-stills : même scène, images fixes. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.story { --vh: 450vh; position: relative; background: var(--black); color: var(--on-dark); border-top: 1px solid var(--dline); }
.skip { position: absolute; left: 28px; top: 28px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--on-dark); color: var(--ink); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; opacity: 0; pointer-events: none; }
.skip:focus { opacity: 1; pointer-events: auto; }
.story-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.story .kicker { margin-bottom: 16px; }
.story-ch h3 { font: 400 clamp(40px, 5vw, 88px)/.96 var(--hero); letter-spacing: -.045em; max-width: 11em; color: var(--on-dark); text-wrap: balance; }
.story-p { margin-top: 24px; font-size: 17px; line-height: 1.55; color: #BDB6B3; max-width: 30em; }
.story-end { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.story-end .hook { margin-top: 0; }

/* Panneaux fixes (mode par défaut) */
.story-stage { padding: 14px; }
.story-canvas, .story-imgs, .story-veil, .story-rule, .story-status, .story-nav, .story-pins, .story-cue { display: none; }
.story-meta { display: flex; gap: 14px; flex-wrap: wrap; padding: 26px 18px 18px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.story-meta small { font-size: 10px; }
.story-copy { display: grid; gap: 14px; }
.story-ch { position: relative; min-height: 86svh; border-radius: 30px; overflow: hidden; display: flex; align-items: flex-end; background: radial-gradient(60% 75% at 62% 45%, #1A1816 0%, #0E0D0C 55%, #080807 100%); }
.story-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-txt { position: relative; width: 100%; padding: 30vh clamp(24px, 5vw, 96px) clamp(32px, 6vw, 80px); background: linear-gradient(to top, rgba(5,5,5,.9) 0%, rgba(5,5,5,.6) 45%, transparent); }

/* Scène épinglée (animée ou images fixes) */
.story-live .story { height: calc(var(--vh) + 100svh); }
.story-live .story-anchor { top: calc(var(--p) * var(--vh) + 1px); }
.story-live .story-stage { position: sticky; top: 0; height: 100svh; }
.story-live .story-box { position: relative; height: 100%; border-radius: 30px; overflow: hidden; isolation: isolate; background: radial-gradient(60% 75% at 62% 45%, #1A1816 0%, #0E0D0C 55%, #080807 100%); }
.story-live .story-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.story-live .story-veil { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top right, rgba(5,5,5,.82) 0%, rgba(5,5,5,.5) 28%, rgba(5,5,5,0) 55%); }
.story-live .story-pic { display: none; }
.story-live .story-copy { display: block; position: absolute; z-index: 4; left: clamp(24px, 5vw, 96px); bottom: 10svh; width: min(700px, 54%); }
.story-live .story-ch { position: absolute; left: 0; bottom: 0; width: 100%; min-height: 0; display: block; border-radius: 0; overflow: visible; background: none; opacity: 0; transform: translateY(22px); filter: blur(6px); pointer-events: none; transition: opacity .35s, transform .35s, filter .35s; }
.story-live .story-ch.visible { opacity: 1; transform: none; filter: none; pointer-events: auto; transition: opacity .6s cubic-bezier(.2,.8,.2,1) .1s, transform .6s cubic-bezier(.2,.8,.2,1) .1s, filter .6s .1s; }
.story-live .story-txt { padding: 0; background: none; }
.story-live .story-end { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; pointer-events: none; }
.story-live .story.cta-on .story-end { opacity: 1; transform: none; pointer-events: auto; }

/* Filet de progression + libellés du haut */
.story-live .story-rule { display: block; position: absolute; z-index: 3; left: 32px; right: 32px; top: 84px; height: 1px; background: var(--dline); }
.story-rule i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.story-live .story-meta { position: absolute; z-index: 3; left: 32px; top: 98px; padding: 0; flex-direction: column; gap: 6px; }
.story-live .story-status { display: flex; position: absolute; z-index: 3; right: 32px; top: 98px; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.story-status i { width: 7px; height: 7px; border-radius: 50%; background: #8A8480; transition: background .4s, box-shadow .4s; }
.story-status[data-s="1"] i { background: var(--sky); box-shadow: 0 0 10px var(--sky); }
.story-status[data-s="2"] i { background: var(--on-dark); box-shadow: 0 0 10px rgba(237,238,237,.6); }
.story-status[data-s="3"] i { background: var(--o); box-shadow: 0 0 12px var(--o); }
.story-status[data-s="4"] i { background: var(--g); box-shadow: 0 0 12px var(--g); }
.story-counter { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--dline-2); color: var(--on-dark-muted); }

/* Étapes (à droite) */
.story-live .story-nav { display: block; position: absolute; z-index: 5; right: 32px; top: 50%; transform: translateY(-50%); width: 180px; }
.story-nav ol { list-style: none; margin: 0; padding: 0; }
.story-nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; text-decoration: none; color: var(--on-dark); opacity: .6; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; transition: opacity .3s, padding .3s; }
.story-nav a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--dline-2); }
.story-nav a i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.story-nav a b { font-weight: 400; }
.story-nav a:hover { opacity: .75; }
.story-nav a.on { opacity: 1; padding-left: 10px; }
.story-nav a.on i { transform: scaleX(1); }
.story-nav a.on span { color: var(--accent); }
.story-nav a:focus-visible, .story-cta:focus-visible, .skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Étiquettes accrochées à l'image (positionnées par story.js) */
.story-live .story-pins { display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(5,5,5,.6); border: 1px solid var(--dline-2); font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); white-space: nowrap; opacity: 0; transition: opacity .35s; will-change: transform; }
.pin.on { opacity: 1; }
.pin.field { translate: calc(-100% - 14px) -50%; }
.pin.gate { translate: 14px -50%; }
.pin.gate.center { translate: -50% -50%; }
.pin i { font-style: normal; font-weight: 700; color: var(--g); }
.pin.warn { border-color: rgba(242,138,30,.55); }
.pin.warn i { color: var(--o); }

/* « Défilez » */
.story-live .story-cue { display: flex; position: absolute; z-index: 3; right: 32px; bottom: 28px; align-items: center; gap: 12px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-muted); transition: opacity .4s; }
.story-cue span { position: relative; width: 40px; height: 1px; background: var(--dline-2); overflow: hidden; }
.story-cue i { position: absolute; inset: 0; background: var(--on-dark); transform-origin: left; transform: scaleX(0); }
.story.cta-on .story-cue { opacity: 0; }

/* Images fixes épinglées (sans WebGL, appareil trop lent) : fondu enchaîné par chapitre */
.story-stills .story-canvas { display: none; }
.story-stills .story-imgs { display: block; position: absolute; inset: 0; }
.story-still { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; }
.story-still img { width: 100%; height: 100%; object-fit: cover; }
.story[data-ch="0"] .story-still:nth-child(1), .story[data-ch="1"] .story-still:nth-child(2), .story[data-ch="2"] .story-still:nth-child(3),
.story[data-ch="3"] .story-still:nth-child(4), .story[data-ch="4"] .story-still:nth-child(5) { opacity: 1; }
.story-stills .story-pins { display: none; }

/* Pendant le parcours, le menu de gauche se retire */
.story-on .progress { opacity: 0 !important; pointer-events: none !important; }

.faq { border-top: 1px solid var(--dline-2); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--dline); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font: 400 22px/1.3 var(--hero); letter-spacing: -.02em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-size: 26px; color: var(--accent); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--on-dark-muted); padding: 0 0 24px; max-width: 46em; }

.final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 34px; padding-top: clamp(110px, 14vw, 180px); padding-bottom: clamp(110px, 14vw, 180px); }
.final h2 { font-size: clamp(44px, 7.4vw, 120px); position: relative; z-index: 1; }
.final .btn, .final .hook, .facts, .final-small { position: relative; z-index: 1; }
.final .hook { margin-top: -10px; }
.facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.facts li { padding: 4px 18px; }
.facts li + li { border-left: 1px solid var(--dline-2); }
.final-small { max-width: 560px; font-size: 13px; color: #8C8480; }
.final-art { position: absolute; left: 50%; top: 50%; width: min(760px, 110vw); margin: calc(min(760px, 110vw) / -2) 0 0 calc(min(760px, 110vw) / -2); opacity: .12; color: var(--on-dark); }

/* Pied de page + partenaire */
.footer { position: relative; background: var(--black); color: var(--on-dark); padding: 60px max(var(--gut), calc((100% - var(--maxw)) / 2)) 28px; border-top: 1px solid var(--dline); }
.partner { margin-bottom: 48px; }
.partner-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 26px; border: 1px solid var(--dline-2); border-radius: 20px; background: linear-gradient(135deg, rgba(237,238,237,.05), transparent); }
.partner-co { display: block; font: 400 28px/1.1 var(--hero); letter-spacing: -.03em; margin-bottom: 4px; }
.partner-card span { color: var(--on-dark-muted); }
.partner-links { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-links a { text-decoration: none; border: 1px solid var(--dline-2); border-radius: 999px; padding: 10px 16px; font-size: 13px; }
.partner-links a:hover { border-color: var(--accent); color: var(--accent-2); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.footer .muted { color: var(--on-dark-muted); }
.footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.footer nav a { color: var(--on-dark-muted); text-decoration: none; font-size: 14px; }
.footer nav a:hover { color: var(--on-dark); }
.copy { margin-top: 24px; color: #6F6866; font-size: 12px; }

/* ---------- Apparition au défilement ---------- */
.reveal { opacity: 0; transform: translateY(46px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .dark h2 { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  @keyframes rise { from { opacity: 0; transform: translateY(70px); letter-spacing: .02em; } to { opacity: 1; transform: none; letter-spacing: -.045em; } }
  .bg-art, .final-art { animation: turn linear both; animation-timeline: view(); }
  @keyframes turn { from { transform: rotate(-40deg) scale(.85); } to { transform: rotate(40deg) scale(1.1); } }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .agents { grid-template-columns: 1fr 1fr; }
  .lights-hero { top: auto; bottom: 26%; }
  .rotator { display: none; }
}
@media (max-width: 900px) {
  .booking { grid-template-columns: 1fr; }
  .bk-side { border-right: 0; border-bottom: 1px solid var(--line); }
  .bk-intro { display: none; }
  .progress { display: none; }
}

/* ---------- Téléphone : le texte défile devant le buste figé, puis la page 2 monte par-dessus (comme sur ordinateur) ---------- */
@media (max-width: 760px), (max-height: 600px) {
  .frame { margin: 8px; border-radius: 22px; }
  .hero { position: relative; top: 0; height: auto; min-height: calc(100svh - 16px); }
  /* Figé quand on arrive en bas du hero (hauteur mesurée par app.js) : la page 2 glisse par-dessus, rien de noir */
  .hero.stick { position: sticky; top: min(8px, calc(100svh - var(--hero-h, 100svh) - 8px)); overflow: hidden; overflow: clip; }
  .hero-in { position: relative; inset: auto; opacity: 1; transform: none; padding: 84px 20px 40px; display: flex; flex-direction: column; }
  /* Buste plein écran, collé en haut pendant qu'on lit le hero (cadrage calculé par hero.js entre le titre et le texte) */
  .bust { position: sticky; inset: auto; top: 0; height: 100svh; margin-bottom: -100svh; opacity: calc(1 - .62 * min(1, var(--hs, 0) * 1.6)); }
  .grid-lines .v1, .grid-lines .v4, .grid-lines b { display: none; }
  .tab-top { padding: 11px 34px 14px; }
  .logo { font-size: 15px; }
  .lang-switch { top: 62px; left: 20px; padding: 7px 11px; font-size: 11px; }
  .btn-cta-top { display: none; }
  .hero-a { position: relative; left: auto; top: auto; max-width: none; margin-top: 30px; text-align: center; }
  h1 { font-size: clamp(40px, 12vw, 58px); }
  .hero .sub { margin-top: 50svh; background: rgba(14,13,12,.72); border-radius: 12px; padding: 10px 12px; margin-left: -12px; margin-right: -12px; }
  .hero .hook { text-align: left; }
  .hero-cta { width: 100%; }
  .lights-hero { position: relative; right: auto; top: auto; bottom: auto; width: auto; max-width: 360px; margin: 26px auto 0; border-left: 0; border-top: 1px solid rgba(237,238,237,.2); background: none; padding: 16px 0 0; }
  .lh-title { text-align: center; }
  .h1b { position: relative; right: auto; bottom: auto; text-align: center; margin-top: 26px; font-size: clamp(32px, 10vw, 46px); }
  .benefits { position: relative; left: auto; bottom: auto; margin-top: 22px; align-items: center; }
  .credit { position: relative; left: auto; bottom: auto; margin-top: 18px; text-align: center; }
  .scroll-cue { display: none; }
  .rdv-page { min-height: 0; }
  .bk-side { padding: 16px; }
  .bk-cover { height: 110px; }
  .bk-main { padding: 20px 16px 22px; }
  .days { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 5px; overflow: visible; padding-bottom: 0; }
  .day { min-width: 0; padding: 7px 0 6px; border-radius: 10px; }
  .day small, .day span { font-size: 9.5px; letter-spacing: .02em; }
  .day b { font-size: 17px; margin: 2px 0 1px; }
  .times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; min-height: 0; }
  .time { padding: 11px 4px; font-size: 13.5px; }
  .field-row { grid-template-columns: 1fr; }
  .agents { grid-template-columns: 1fr; }
  .bar { gap: 12px; }
}

/* ---------- Parcours sur téléphone / écran en portrait ---------- */
@media (max-width: 760px), (max-aspect-ratio: 20/21) {
  .story { --vh: 380vh; }
  .story-stage { padding: 8px; }
  .story-ch, .story-live .story-box { border-radius: 22px; }
  .story-ch { min-height: 88svh; }
  .story-txt { padding: 40vh 20px calc(28px + env(safe-area-inset-bottom)); }
  .story-live .story-rule, .story-counter, .story-live .story-cue { display: none; }
  .story-live .story-nav { left: 20px; right: 20px; top: 66px; width: auto; transform: none; }
  .story-nav ol { display: flex; gap: 4px; }
  .story-nav li { flex: 1; }
  .story-nav a { height: 22px; padding: 0 !important; opacity: .3; }
  .story-nav a span, .story-nav a b { display: none; }
  .story-nav a::before, .story-nav a i { height: 2px; background-color: rgba(237,238,237,.35); }
  .story-nav a i { background: var(--accent); }
  .story-nav a.done { opacity: .6; }
  .story-nav a.done i { transform: scaleX(1); background: var(--on-dark); }
  .story-live .story-meta { left: 20px; top: 96px; font-size: 10px; gap: 4px; }
  .story-meta small { font-size: 9.5px; }
  .story-live .story-status { right: 20px; top: 96px; font-size: 10px; }
  .story-live .story-veil { background: linear-gradient(to top, rgba(5,5,5,.94) 0%, rgba(5,5,5,.8) 30%, rgba(5,5,5,0) 50%); }
  .story-live .story-copy { left: 20px; right: 20px; width: auto; bottom: calc(26px + env(safe-area-inset-bottom)); }
  .story-ch h3 { font-size: clamp(32px, 9.4vw, 44px); }
  .story-p { margin-top: 14px; font-size: 15.5px; }
  .story-end { margin-top: 18px; }
  .story-end .hook { font-size: 14px; }
  .story-end .btn { width: 100%; }
  .story-still img, .story-pic img { object-position: 50% 0; }
  .facts { flex-direction: column; gap: 8px; }
  .facts li + li { border-left: 0; }
}
@media (max-width: 380px) {
  .story-live .story-meta, .story-live .story-status, .story-meta small { letter-spacing: .06em; }
}
@media (max-width: 340px) {
  .story-live .story-meta { max-width: 170px; }
}
@media (max-width: 760px) and (max-height: 620px) {
  .story-live .story-ch[data-i="5"] .story-p { display: none; } /* iPhone SE : le titre suffit, le bouton reste au-dessus du pli */
}
@media (max-height: 600px) and (orientation: landscape) {
  .story-live .story-nav, .story-counter, .story-live .story-cue { display: none; }
  .story-live .story-ch[data-i="5"] .story-p { display: none; }
  .story-live .story-end { margin-top: 14px; }
  .story-live .story-end .btn { width: auto; }
  .story-ch h3 { font-size: 30px; }
  .story-p { margin-top: 12px; font-size: 15px; }
  .story-live .story-copy { bottom: 22px; }
}
@media print {
  .story, .story-live .story { height: auto; }
  .story-live .story-stage { position: static; height: auto; }
  .story-canvas, .story-imgs, .story-nav, .story-pins, .story-cue, .story-rule, .story-veil, .skip { display: none !important; }
  .story-live .story-copy { position: static; width: auto; }
  .story-live .story-meta { position: static; padding: 0 0 16px; }
  .story-live .story-status { display: none !important; }
  .story-live .story-ch, .story-live .story-end { position: static; opacity: 1; transform: none; filter: none; margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}