/* Vixya · page du studio, univers « Studio perle ». Une section par écran : un geste de défilement
   fait passer à la suivante. Chaque section a son plateau de studio (fond, sol, lumière) qui arrive en
   fondu pendant le défilement, et quatre objets en chrome qui changent de place et prennent la lumière
   du plateau. Performance : transformations et opacités seulement pendant le défilement. */
@font-face { font-family: "Syncopate"; src: url("polices/syncopate.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Onest"; src: url("polices/onest.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --perle: #EEEFF2; --encre: #141418; --gris: #4A4D57; --gris-doux: #5A5D68;
  --nuit: #0B0B0E; --blanc: #EDEDF0; --argent: #A6A9B1; --iris: #4FD1C5;
  --chrome-clair: linear-gradient(100deg, #B9BCC6 0%, #FFFFFF 22%, #9EA2AD 40%, #FFFFFF 58%, #C9CCD3 75%, #FFFFFF 90%, #AEB2BC 100%);
  --chrome-sombre: linear-gradient(100deg, #2B2E36 0%, #7E828F 22%, #141418 42%, #5E636F 60%, #1E2027 78%, #6B6F7B 100%);
  --f-nom: "Syncopate", "Segoe UI", system-ui, sans-serif;
  --f: "Onest", "Segoe UI", system-ui, sans-serif;
  --courbe: cubic-bezier(.2, .8, .2, 1);
  --glisse: cubic-bezier(.65, 0, .25, 1);
  --gouttiere: clamp(20px, 5vw, 64px);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-snap-type: y mandatory; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Pendant la saisie, l'accroche est suspendue : le clavier du téléphone ne fait pas sauter la page. */
html.saisie { scroll-snap-type: none; }
body { margin: 0; background: var(--perle); color: var(--encre); font: 17px/1.55 var(--f); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; border-radius: 8px; }

.corps { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gouttiere); }
.sur { font: 600 12px/1.3 var(--f); letter-spacing: .22em; text-transform: uppercase; }
.titre { font: 600 clamp(28px, min(4.2vw, 7svh), 54px)/1.06 var(--f); letter-spacing: -.03em; margin-top: 12px; max-width: 20ch; }
.chapo { font-size: clamp(15.5px, 1.4vw, 18px); max-width: 52ch; margin-top: 16px; }
.chrome-texte { background: var(--chrome-clair); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.perle { color: var(--encre); }
.perle .sur { color: var(--gris-doux); }
.perle .chapo { color: var(--gris); }
.nuit { color: var(--blanc); }
.nuit .sur, .nuit .chapo { color: var(--argent); }

.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 600 16px/1 var(--f); text-decoration: none; background: var(--encre); color: #FFFFFF; transition: transform .3s var(--courbe); }
@media (hover: hover) { .bouton:hover { transform: translateY(-2px); } }
/* La pression : le bouton s'enfonce vite et remonte en douceur. */
.bouton, .bouton-ligne, .entete-demande, .creneau, .jour, .fleche, .retour, .reperes a { -webkit-tap-highlight-color: transparent; }
.bouton:active { transform: translateY(1px) scale(.97); transition-duration: .08s; }
.entete-demande:active, .fleche:active { transform: scale(.95); transition-duration: .08s; }
.bouton-ligne { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }

/* ───────── Le studio : six plateaux et les objets ───────── */
.studio { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; --b: min(46vw, 26svh); background: var(--nuit); }

/* Un plateau par section. Seuls le plateau en place et celui qui arrive sont dessinés : le JS règle
   l'opacité du plateau qui arrive au fil du défilement, et retire de la page ceux qui sont loin. */
.plateaux { position: absolute; inset: 0; z-index: 0; }
.plateau { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: opacity; }
.plateau.loin { display: none; }
.toile { position: absolute; inset: 0; }
.toile > i { position: absolute; display: block; }
.mur { inset: 0; }
.sol { left: 0; right: 0; top: var(--h); bottom: 0; -webkit-mask: linear-gradient(transparent, #000 var(--fondu, 12svh)); mask: linear-gradient(transparent, #000 var(--fondu, 12svh)); }
/* Ce qui dépend de la place des objets (reflet au sol, couronne) attend qu'ils soient arrivés. */
.suit { opacity: 0; transition: opacity .35s ease; }

/* 1 · Cyclo perle. Un fond blanc sans angle : le mur descend en douceur vers un sol brillant où les
   objets se reflètent, la lumière tombe d'en haut à gauche, et la grande bille pose un reflet irisé au sol. */
.p1 { --h: calc(40svh - var(--b) * .34); }
.p1 .mur { background:
  radial-gradient(75% 60% at 18% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
  radial-gradient(60% 40% at 90% 30%, rgba(214, 218, 228, .55), rgba(214, 218, 228, 0) 70%),
  linear-gradient(180deg, #F1F2F5 0%, #E3E5EA var(--h)); }
.p1 .sol { background:
  radial-gradient(60% 26% at 55% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0) 100%),
  linear-gradient(180deg, #D6D9E0 0%, #E8EAEE 32%, #F5F6F8 100%); }
.p1 .brillance { left: 0; right: 0; top: var(--h); height: 2px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, .9) 74%, rgba(255, 255, 255, 0)); opacity: .6; }
.p1 .caustique { left: calc(53vw + var(--b) * .2); top: calc(40svh + var(--b) * .12); width: calc(var(--b) * 1.25); height: calc(var(--b) * .2); translate: -50% -50%; border-radius: 50%; background: conic-gradient(from 90deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); -webkit-mask: radial-gradient(closest-side, #000 15%, transparent 100%); mask: radial-gradient(closest-side, #000 15%, transparent 100%); }
body[data-scene="1"] .p1 .caustique { opacity: .28; transition: opacity 1.2s ease .8s; }

/* 2 · Contre-jour. La nuit, et le bord d'un astre immense qui se lève derrière la méthode : une
   lumière turquoise rasante, comme une photo prise contre le soleil. */
.p2 { --h: 91svh; }
.p2 .mur { background:
  radial-gradient(90% 46% at 50% var(--h), rgba(79, 209, 197, .30) 0%, rgba(138, 180, 255, .10) 42%, rgba(11, 11, 14, 0) 72%),
  radial-gradient(70% 40% at 50% 0%, #15161D 0%, rgba(11, 11, 14, 0) 70%),
  linear-gradient(180deg, #08090C 0%, #0B0D11 100%); }
.p2 .astre { left: 50%; top: var(--h); width: 340vmax; height: 340vmax; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, #050607 96%, #0B1416 99%, #12302E 100%);
  box-shadow: 0 0 0 1px rgba(196, 246, 240, .55), 0 -2px 28px 2px rgba(79, 209, 197, .45), 0 -20px 90px 10px rgba(79, 209, 197, .16), inset 0 26px 60px -20px rgba(79, 209, 197, .28); }
.p2 .voile { inset: 0; background: radial-gradient(120% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45) 100%); }

/* 3 · Aube. Le jour se lève : le ciel perle se réchauffe vers l'horizon, le soleil sort à moitié, et le sol
   brillant reflète le ciel et la traînée du soleil sous les téléphones. --sx place le soleil. */
.p3 { --h: 34svh; --sx: 84vw; }
.p3 .mur { background:
  radial-gradient(40% 32% at var(--sx) var(--h), rgba(255, 210, 166, .8) 0%, rgba(255, 210, 166, 0) 70%),
  linear-gradient(180deg, #E2E3EE 0%, #EAE4EA calc(var(--h) * .55), #F6DCCD var(--h)); }
.p3 .soleil { left: var(--sx); top: var(--h); width: calc(var(--b) * .46); height: calc(var(--b) * .46); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFDF9 0%, #FFF3E2 64%, rgba(255, 236, 214, 0) 100%);
  box-shadow: 0 0 70px 26px rgba(255, 220, 182, .6);
  -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); }
.p3 .sol { --fondu: 2svh; background:
  radial-gradient(4.5% 75% at var(--sx) 0%, rgba(255, 240, 222, .95), rgba(255, 240, 222, 0) 100%),
  radial-gradient(42% 45% at var(--sx) 0%, rgba(255, 212, 168, .55), rgba(255, 212, 168, 0) 75%),
  linear-gradient(180deg, #EED6C8 0%, #E7E0E5 38%, #EAE9EF 100%); }

/* 4 · Éclipse. Le noir complet, et la grande bille qui se lève devant une couronne irisée. */
.p4 .mur { background:
  radial-gradient(60% 35% at 50% 100%, rgba(138, 180, 255, .10), rgba(0, 0, 0, 0) 70%),
  linear-gradient(180deg, #050507 0%, #07070A 100%); }
.p4 .halo, .p4 .couronne, .p4 .limbe { left: 50%; top: calc(100svh + var(--b) * .1); translate: -50% -50%; border-radius: 50%; }
/* La bille fait 1,3 b de large ici : la couronne en fait 1,35 fois plus, son bord intérieur tombe sur celui de la bille. */
.p4 .couronne { width: calc(var(--b) * 1.3 * 1.35); height: calc(var(--b) * 1.3 * 1.35);
  background: conic-gradient(from 210deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 75%, rgba(0, 0, 0, .35) 84%, transparent 100%); mask: radial-gradient(closest-side, transparent 72%, #000 75%, rgba(0, 0, 0, .35) 84%, transparent 100%); }
.p4 .limbe { width: calc(var(--b) * 1.3 * 1.04); height: calc(var(--b) * 1.3 * 1.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 0 24px 4px rgba(255, 255, 255, .28); }
.p4 .halo { width: calc(var(--b) * 1.3 * 3.4); height: calc(var(--b) * 1.3 * 3.4); background: radial-gradient(closest-side, rgba(170, 190, 255, .16), rgba(242, 155, 196, .06) 55%, rgba(0, 0, 0, 0) 100%); }
body[data-scene="4"] .p4 .couronne { opacity: .8; transition: opacity 1.4s ease .7s; }
body[data-scene="4"] .p4 .limbe { opacity: 1; transition: opacity 1.4s ease .9s; }
body[data-scene="4"] .p4 .halo { opacity: 1; transition: opacity 1.6s ease .5s; }

/* 5 · Gélatines. Le plateau dans la demi-teinte, et deux projecteurs à gélatine : un rose en haut à
   gauche, un bleu en haut à droite. Leurs faisceaux se voient dans l'air, se croisent, et font deux taches
   de couleur au sol. Les angles visent ces taches (--rose, --bleu, mesurés depuis le haut, sens horaire). */
.p5 { --h: 86svh; --rose: 169deg; --bleu: 189deg; --ouv: 6.5deg; }
.p5 .mur { background:
  radial-gradient(80% 60% at 50% 0%, #EAE9F0 0%, rgba(234, 233, 240, 0) 70%),
  linear-gradient(180deg, #DAD9E3 0%, #C9C8D6 var(--h)); }
.p5 .sol { background:
  radial-gradient(34% 55% at 30% 45%, rgba(242, 155, 196, .8), rgba(242, 155, 196, 0) 70%),
  radial-gradient(34% 55% at 75% 64%, rgba(138, 180, 255, .8), rgba(138, 180, 255, 0) 70%),
  linear-gradient(180deg, #C6C5D3 0%, #DCDBE5 100%); }
.p5 .faisceau { inset: 0; }
.p5 .f-rose { background:
  radial-gradient(18% 14% at 0% 0%, rgba(255, 236, 246, .9), rgba(255, 236, 246, 0)),
  conic-gradient(from calc(var(--rose) - var(--ouv) * 1.6) at 0% 0%, rgba(242, 155, 196, 0), rgba(242, 155, 196, .42) calc(var(--ouv) * .9), rgba(255, 190, 220, .58) calc(var(--ouv) * 1.6), rgba(242, 155, 196, .42) calc(var(--ouv) * 2.3), rgba(242, 155, 196, 0) calc(var(--ouv) * 3.2));
  -webkit-mask: radial-gradient(150% 130% at 0% 0%, #000 25%, rgba(0, 0, 0, .45) 100%); mask: radial-gradient(150% 130% at 0% 0%, #000 25%, rgba(0, 0, 0, .45) 100%); }
.p5 .f-bleu { background:
  radial-gradient(18% 14% at 100% 0%, rgba(232, 240, 255, .9), rgba(232, 240, 255, 0)),
  conic-gradient(from calc(var(--bleu) - var(--ouv) * 1.6) at 100% 0%, rgba(138, 180, 255, 0), rgba(138, 180, 255, .42) calc(var(--ouv) * .9), rgba(186, 210, 255, .58) calc(var(--ouv) * 1.6), rgba(138, 180, 255, .42) calc(var(--ouv) * 2.3), rgba(138, 180, 255, 0) calc(var(--ouv) * 3.2));
  -webkit-mask: radial-gradient(150% 130% at 100% 0%, #000 25%, rgba(0, 0, 0, .45) 100%); mask: radial-gradient(150% 130% at 100% 0%, #000 25%, rgba(0, 0, 0, .45) 100%); }

/* 6 · Aurore. Une nuit claire, et une aurore au-dessus de l'horizon : deux voiles en arc, turquoise à la
   base, bleus puis rosés vers le haut, striés de rayons verticaux. */
.p6 { --h: 90svh; }
.p6 .mur { background:
  radial-gradient(80% 40% at 50% var(--h), rgba(79, 209, 197, .12), rgba(0, 0, 0, 0) 70%),
  linear-gradient(180deg, #05060A 0%, #090B12 var(--h)); }
.p6 .sol { --fondu: 1px; background: radial-gradient(60% 50% at 50% 0%, rgba(79, 209, 197, .08), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0A0C11 0%, #050507 100%); }
.p6 .voile { left: -25vw; right: -25vw; height: 72svh;
  -webkit-mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .76) 0 2px, #000 2px 11px); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent 4%, #000 26%, #000 74%, transparent 96%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .76) 0 2px, #000 2px 11px); mask-composite: intersect; }
.p6 .v1 { top: 4svh; rotate: -7deg; background: radial-gradient(farthest-side at 50% 100%, rgba(79, 209, 197, 0) 60%, rgba(79, 209, 197, .42) 74%, rgba(138, 180, 255, .24) 85%, rgba(242, 155, 196, .18) 93%, rgba(242, 155, 196, 0) 100%); }
.p6 .v2 { top: 20svh; left: 5vw; right: -45vw; rotate: 9deg; opacity: .7; background: radial-gradient(farthest-side at 50% 100%, rgba(79, 209, 197, 0) 66%, rgba(79, 209, 197, .3) 78%, rgba(160, 150, 255, .2) 88%, rgba(242, 155, 196, .14) 95%, rgba(242, 155, 196, 0) 100%); }

/* 7 · Halo. Un ciel pâle de haute altitude, le soleil haut, et son halo : un anneau de lumière au bord
   intérieur irisé, le ciel un peu plus sombre dedans, et deux faux soleils de part et d'autre. Les objets
   sont posés au sol, devant. --hx et --hy placent le soleil, --hr est le rayon du halo. */
.p7 { --h: 88svh; --hx: 80vw; --hy: 15svh; --hr: 23vw; }
.p7 .mur { background:
  radial-gradient(34% 30% at var(--hx) var(--hy), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%),
  linear-gradient(180deg, #D9E1ED 0%, #E5E9F1 48%, #EDEEF3 var(--h)); }
.p7 .halo { left: var(--hx); top: var(--hy); width: calc(var(--hr) * 2); height: calc(var(--hr) * 2); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 136, 165, .08) 0%, rgba(120, 136, 165, .08) 84%, rgba(242, 155, 196, .5) 87.5%, rgba(255, 214, 140, .45) 89.5%, rgba(255, 255, 255, .85) 91.5%, rgba(214, 226, 255, .5) 95%, rgba(214, 226, 255, 0) 100%); }
.p7 .soleil { left: var(--hx); top: var(--hy); width: calc(var(--hr) * .32); height: calc(var(--hr) * .32); translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF 45%, rgba(255, 255, 255, 0)); box-shadow: 0 0 46px 18px rgba(255, 255, 255, .75); }
/* Les faux soleils : le côté rose regarde le soleil. */
.p7 .parhelie { top: var(--hy); width: calc(var(--hr) * .2); height: calc(var(--hr) * .34); translate: -50% -50%; border-radius: 50%; opacity: .75;
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 100%); mask: radial-gradient(closest-side, #000 30%, transparent 100%); }
.p7 .ph1 { left: calc(var(--hx) - var(--hr) * .95); background: linear-gradient(90deg, rgba(214, 226, 255, .6), #FFFFFF 45%, rgba(255, 214, 140, .8) 70%, rgba(242, 155, 196, .9)); }
.p7 .ph2 { left: calc(var(--hx) + var(--hr) * .95); background: linear-gradient(270deg, rgba(214, 226, 255, .6), #FFFFFF 45%, rgba(255, 214, 140, .8) 70%, rgba(242, 155, 196, .9)); }
.p7 .sol { background:
  radial-gradient(40% 60% at 76% 25%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
  linear-gradient(180deg, #D3D9E3 0%, #ECEEF3 100%); }

/* 8 · Crépuscule. La nuit qui tombe : une lueur rose et or au ras de l'horizon, et une lumière
   douce posée sur le formulaire. */
.p8 { --h: 90svh; }
.p8 .mur { background:
  radial-gradient(85% 42% at 22% var(--h), rgba(242, 155, 196, .42) 0%, rgba(255, 196, 140, .16) 38%, rgba(0, 0, 0, 0) 72%),
  radial-gradient(60% 50% at 85% 0%, rgba(138, 180, 255, .12), rgba(0, 0, 0, 0) 70%),
  linear-gradient(180deg, #08090F 0%, #0E0F18 var(--h)); }
.p8 .sol { --fondu: 1px; background: radial-gradient(55% 60% at 22% 0%, rgba(242, 155, 196, .16), rgba(0, 0, 0, 0) 70%), linear-gradient(180deg, #0C0C12 0%, #050508 100%); }
.p8 .horizon { left: 0; right: 0; top: var(--h); height: 1px; background: linear-gradient(90deg, rgba(255, 210, 122, 0) 0%, rgba(255, 214, 190, .8) 22%, rgba(242, 155, 196, .5) 55%, rgba(242, 155, 196, 0) 90%); box-shadow: 0 0 16px 1px rgba(242, 155, 196, .3); }
.p8 .projecteur { left: 50%; top: 66svh; width: 130vw; height: 70svh; translate: -50% -50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); }

@media (min-width: 900px) {
  body[data-scene="1"] .p1 .caustique { opacity: .4; }
  .p2 { --h: 84svh; }
  .p1 { --h: calc(70svh - var(--b) * .3); }
  .p1 .caustique { left: calc(74vw + var(--b) * .22); top: calc(70svh + var(--b) * .1); }
  .p3 { --h: 25svh; --sx: 63vw; }
  .p4 .halo, .p4 .couronne, .p4 .limbe { top: calc(100svh + var(--b) * .25); }
  .p4 .couronne { width: calc(var(--b) * 1.7 * 1.35); height: calc(var(--b) * 1.7 * 1.35); }
  .p4 .limbe { width: calc(var(--b) * 1.7 * 1.03); height: calc(var(--b) * 1.7 * 1.03); }
  .p4 .halo { width: calc(var(--b) * 1.7 * 3); height: calc(var(--b) * 1.7 * 3); }
  .p5 { --h: 76svh; --rose: 158deg; --bleu: 209deg; --ouv: 8deg; }
  .p5 .sol { background:
    radial-gradient(26% 60% at 21% 52%, rgba(242, 155, 196, .8), rgba(242, 155, 196, 0) 70%),
    radial-gradient(26% 60% at 70% 42%, rgba(138, 180, 255, .8), rgba(138, 180, 255, 0) 70%),
    linear-gradient(180deg, #C6C5D3 0%, #DCDBE5 100%); }

  .p6 { --h: 84svh; }
  .p6 .v1 { top: 2svh; }
  .p6 .v2 { top: 16svh; }
  .p7 { --h: 80svh; --hx: 77vw; --hy: 36svh; --hr: 25svh; }
  .p8 { --h: 80svh; }
  .p8 .projecteur { left: 72vw; top: 48svh; width: 64vw; height: 90svh; }
}

/* La couleur de la lumière du plateau se pose sur les objets, par le bas (le rebond du sol ou l'horizon). */
@property --lueur { syntax: "<color>"; inherits: true; initial-value: rgba(255, 255, 255, 0); }
body { --lueur: rgba(255, 255, 255, 0); }
body[data-scene="2"] { --lueur: rgba(79, 209, 197, .55); }
body[data-scene="3"] { --lueur: rgba(255, 200, 110, .30); }
body[data-scene="4"] { --lueur: rgba(170, 190, 255, .35); }
body[data-scene="5"] { --lueur: rgba(242, 155, 196, .30); }
body[data-scene="6"] { --lueur: rgba(110, 220, 210, .45); }
body[data-scene="7"] { --lueur: rgba(214, 226, 255, .3); }
body[data-scene="8"] { --lueur: rgba(242, 155, 196, .45); }
.forme .lueur { background: radial-gradient(110% 70% at 50% 108%, var(--lueur) 0%, rgba(255, 255, 255, 0) 62%); transition: --lueur 1s ease; }

/* Le reflet des objets posés sur un sol clair : une copie retournée, qui s'efface en s'éloignant. */
.miroir { position: absolute; inset: 0; transform: translateY(98%) scaleY(-1); opacity: 0; -webkit-mask: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 55%); mask: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 55%); }
body[data-scene="1"] .miroir, body[data-scene="3"] .miroir, body[data-scene="5"] .miroir, body[data-scene="7"] .miroir { opacity: .32; }

/* La ceinture. Quand la bille devient une planète (la méthode, l'appel), un anneau se dessine autour
   d'elle : il part du bord droit, passe devant la bille, fait le tour par derrière et revient à son point
   de départ. Deux copies : l'arrière sous la bille, l'avant par-dessus, chacune limitée à sa moitié. */
@property --trace { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
.ceinture { position: absolute; inset: -24%; --trace: 0deg; transform: perspective(800px) rotate(-10deg) rotateX(74deg); transition: --trace .5s cubic-bezier(.5, 0, .75, 0); }
.ceinture.arriere { -webkit-mask: linear-gradient(#000 50%, transparent 50%); mask: linear-gradient(#000 50%, transparent 50%); }
.ceinture.avant { -webkit-mask: linear-gradient(transparent 50%, #000 50%); mask: linear-gradient(transparent 50%, #000 50%); }
.ceinture i { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(160deg, #9AA0AE, #1A1B21 28%, #E6E8EE 44%, #2A2C33 60%, #6B6F7B 80%, #23252C);
  -webkit-mask: radial-gradient(farthest-side, transparent 73%, #000 74%), conic-gradient(from 90deg, #000 var(--trace), transparent 0); -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent 73%, #000 74%), conic-gradient(from 90deg, #000 var(--trace), transparent 0); mask-composite: intersect; }
/* La pointe : un éclat qui mène le trait pendant qu'il se dessine. */
.ceinture b { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, #FFFFFF, rgba(255, 255, 255, .55) 35%, rgba(255, 255, 255, 0)); transform: translate(-50%, -50%) rotate(calc(90deg + var(--trace))) translateY(-480%); }
body[data-scene="2"] .ceinture, body[data-scene="8"] .ceinture { --trace: 360deg; transition: --trace 1.6s cubic-bezier(.45, .05, .25, 1) .7s; }
body[data-scene="2"] .ceinture b, body[data-scene="8"] .ceinture b { animation: pointe 1.6s linear .7s both; }
@keyframes pointe { 0% { opacity: 0; } 8%, 82% { opacity: 1; } 100% { opacity: 0; } }

.objet { position: absolute; left: 0; top: 0; will-change: transform; transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0) scale(var(--s, 1)); }
.o-bille { width: var(--b); height: var(--b); z-index: 2; }
.o-perle { width: calc(var(--b) * .24); height: calc(var(--b) * .24); z-index: 2; }
.o-gelule { width: calc(var(--b) * .6); height: calc(var(--b) * .23); z-index: 3; }
.o-anneau { width: calc(var(--b) * .66); height: calc(var(--b) * .66); z-index: 1; }
.forme { position: absolute; inset: 0; border-radius: 50%; }
.forme i { position: absolute; inset: 0; border-radius: inherit; }
.peau-nuit { opacity: 0; }
body[data-ton="nuit"] .peau-nuit { opacity: 1; }
.ombre { position: absolute; left: 6%; right: 6%; top: 86%; height: 26%; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 22, 28, .36), rgba(20, 22, 28, 0)); }
.o-gelule .ombre { top: 62%; height: 80%; }
body[data-ton="nuit"] .ombre { opacity: 0; }
body.pret .objet, body.pret .forme, body.pret .iris { transition: transform 1.15s var(--glisse); }
body.pret .peau-nuit, body.pret .ombre, body.pret .miroir { transition: opacity .7s ease; }

.bille .peau-perle { background:
  radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, 0) 16%),
  radial-gradient(circle at 50% 50%, transparent 56%, rgba(20, 22, 28, .45) 74%, rgba(255, 255, 255, .55) 90%, rgba(30, 32, 40, .85) 100%),
  linear-gradient(180deg, #F6F8FB 0%, #CDD1DA 36%, #2B2E36 47%, #60656F 52%, #BCC1CA 70%, #F0F2F5 100%);
  box-shadow: inset -12px -16px 30px rgba(0, 0, 0, .22); }
.bille .peau-nuit { background:
  radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .95) 0 2.2%, rgba(255, 255, 255, .3) 3.6%, rgba(255, 255, 255, 0) 7.5%),
  radial-gradient(circle at 50% 50%, transparent 60%, rgba(138, 180, 255, .2) 82%, rgba(242, 155, 196, .28) 93%, rgba(255, 255, 255, .5) 100%),
  linear-gradient(180deg, #4A4E5A 0%, #1A1B21 38%, #8A8E9C 47%, #23252C 53%, #121318 78%, #2E3038 100%); }
.bille .iris { inset: 7%; opacity: .07; transform: rotate(var(--r, 0deg)); background: conic-gradient(from 200deg, #4FD1C5, #8AB4FF, #F29BC4, #FFD27A, #4FD1C5); }
.gelule { border-radius: 999px; transform: rotate(var(--r, 0deg)); }
.gelule .peau-perle { background:
  radial-gradient(70% 120% at 30% 20%, rgba(255, 255, 255, .9) 0 4%, rgba(255, 255, 255, 0) 22%),
  linear-gradient(180deg, #F6F8FB 0%, #C9CDD6 34%, #2B2E36 48%, #5E636F 54%, #B8BDC7 72%, #EEF0F4 100%);
  box-shadow: inset -10px -10px 24px rgba(0, 0, 0, .2); }
.gelule .peau-nuit { background:
  radial-gradient(70% 120% at 30% 18%, rgba(255, 255, 255, .8) 0 3%, rgba(255, 255, 255, 0) 18%),
  linear-gradient(180deg, #4A4E5A 0%, #1A1B21 36%, #8A8E9C 48%, #23252C 56%, #121318 80%, #3A3D47 100%); }
.anneau { transform: perspective(800px) rotate(var(--r, 0deg)) rotateX(var(--rx, 0deg)); -webkit-mask: radial-gradient(farthest-side, transparent 73%, #000 74%); mask: radial-gradient(farthest-side, transparent 73%, #000 74%); }
.anneau .peau-perle { background: linear-gradient(160deg, #FFFFFF, #8A8E9C 28%, #2B2E36 44%, #E6E8EE 60%, #5E636F 80%, #FFFFFF); }
.anneau .peau-nuit { background: linear-gradient(160deg, #9AA0AE, #1A1B21 28%, #E6E8EE 44%, #2A2C33 60%, #6B6F7B 80%, #23252C); }

/* La place des objets, section par section. --x et --y donnent le centre ; les objets posés ont leur
   centre calculé depuis la ligne du sol pour toucher le sol à toutes les tailles d'écran. */
/* Téléphone */
body[data-scene="1"] .o-bille   { --x: 53vw; --y: calc(40svh - var(--b) * .45); --s: .9; }
body[data-scene="1"] .o-gelule  { --x: calc(53vw - var(--b) * .6); --y: calc(40svh - var(--b) * .13); --s: .8; --r: -14deg; }
body[data-scene="1"] .o-perle   { --x: calc(53vw + var(--b) * .56); --y: calc(40svh - var(--b) * .108); --s: .9; }
body[data-scene="1"] .o-anneau  { --x: calc(53vw - var(--b) * .6); --y: calc(40svh - var(--b) * .86); --s: .7; --r: 24deg; --rx: 58deg; }

body[data-scene="2"] .o-bille   { --x: 82vw; --y: 17svh; --s: .36; --r: 140deg; }
body[data-scene="2"] .o-anneau  { --x: 130vw; --y: -20svh; --s: .8; --r: 40deg; --rx: 60deg; }
body[data-scene="2"] .o-perle   { --x: 114vw; --y: 40svh; --r: 200deg; }
body[data-scene="2"] .o-gelule  { --x: -16vw; --y: 62svh; --r: 60deg; }

body[data-scene="3"] .o-bille   { --x: 98vw; --y: 101svh; --s: .7; --r: 260deg; }
body[data-scene="3"] .o-anneau  { --x: 112vw; --y: -12svh; --s: .7; --r: 40deg; --rx: 40deg; }
body[data-scene="3"] .o-perle   { --x: 76vw; --y: 102svh; --r: 320deg; }
body[data-scene="3"] .o-gelule  { --x: -18vw; --y: 90svh; --r: 0deg; }

body[data-scene="4"] .o-bille   { --x: 50vw; --y: calc(100svh + var(--b) * .1); --s: 1.3; --r: 380deg; }
body[data-scene="4"] .o-perle   { --x: 14vw; --y: 15svh; --s: .8; --r: 400deg; }
body[data-scene="4"] .o-anneau  { --x: 112vw; --y: 30svh; --s: .7; --r: 60deg; --rx: 50deg; }
body[data-scene="4"] .o-gelule  { --x: -18vw; --y: 70svh; --r: 90deg; }

body[data-scene="5"] .o-bille   { --x: 78vw; --y: calc(100svh - var(--b) * .18); --s: .36; --r: 500deg; }
body[data-scene="5"] .o-gelule  { --x: calc(78vw - var(--b) * .44); --y: calc(100svh - var(--b) * .05); --s: .44; --r: 0deg; }
body[data-scene="5"] .o-perle   { --x: calc(78vw + var(--b) * .3); --y: calc(100svh - var(--b) * .072); --s: .6; --r: 520deg; }
body[data-scene="5"] .o-anneau  { --x: 112vw; --y: 20svh; --s: .7; --r: 80deg; --rx: 60deg; }

body[data-scene="6"] .o-bille   { --x: 80vw; --y: 15svh; --s: .34; --r: 560deg; }
body[data-scene="6"] .o-perle   { --x: 114vw; --y: 34svh; --s: .5; --r: 580deg; }
body[data-scene="6"] .o-gelule  { --x: -18vw; --y: 60svh; --r: 70deg; }
body[data-scene="6"] .o-anneau  { --x: 120vw; --y: 50svh; --s: .7; --r: 30deg; --rx: 60deg; }

body[data-scene="7"] .o-bille   { --x: 88vw; --y: calc(102svh - var(--b) * .3); --s: .6; --r: 600deg; }
body[data-scene="7"] .o-perle   { --x: calc(88vw - var(--b) * .42); --y: calc(102svh - var(--b) * .12); --r: 620deg; }
body[data-scene="7"] .o-gelule  { --x: -18vw; --y: 96svh; --r: 0deg; }
body[data-scene="7"] .o-anneau  { --x: 116vw; --y: 30svh; --s: .7; --r: 40deg; --rx: 60deg; }

body[data-scene="8"] .o-bille   { --x: 84vw; --y: 16svh; --s: .26; --r: 620deg; }
body[data-scene="8"] .o-anneau  { --x: 126vw; --y: -16svh; --s: .6; --r: 50deg; --rx: 60deg; }
body[data-scene="8"] .o-perle   { --x: 114vw; --y: 60svh; --r: 640deg; }
body[data-scene="8"] .o-gelule  { --x: -18vw; --y: 100svh; --r: 30deg; }

/* Ordinateur */
@media (min-width: 900px) {
  .studio { --b: clamp(180px, 38svh, 340px); }
  body[data-scene="1"] .o-bille   { --x: 74vw; --y: calc(70svh - var(--b) * .5); --s: 1; }
  body[data-scene="1"] .o-gelule  { --x: calc(74vw - var(--b) * .58); --y: calc(70svh - var(--b) * .16); --s: 1; --r: -14deg; }
  body[data-scene="1"] .o-perle   { --x: calc(74vw + var(--b) * .58); --y: calc(70svh - var(--b) * .12); --s: 1; }
  body[data-scene="1"] .o-anneau  { --x: calc(74vw + var(--b) * .48); --y: calc(70svh - var(--b) * 1.25); --s: 1; --r: 24deg; --rx: 58deg; }

  body[data-scene="2"] .o-bille   { --x: 80vw; --y: 25svh; --s: .62; }
  body[data-scene="2"] .o-anneau  { --x: 116vw; --y: -26svh; --s: 1; --r: 40deg; --rx: 55deg; }
  body[data-scene="2"] .o-perle   { --x: 63vw; --y: 14svh; --s: 1; }
  body[data-scene="2"] .o-gelule  { --x: 110vw; --y: 42svh; --s: .8; --r: 52deg; }

  body[data-scene="3"] .o-bille   { --x: 86vw; --y: calc(29svh - var(--b) * .25); --s: .5; }
  body[data-scene="3"] .o-gelule  { --x: calc(86vw - var(--b) * .52); --y: calc(29svh - var(--b) * .08); --s: .7; --r: 0deg; }
  body[data-scene="3"] .o-perle   { --x: calc(86vw + var(--b) * .38); --y: calc(29svh - var(--b) * .12); --s: 1; }
  body[data-scene="3"] .o-anneau  { --x: 110vw; --y: -14svh; --s: .8; --r: 40deg; --rx: 40deg; }

  body[data-scene="4"] .o-bille   { --x: 50vw; --y: calc(100svh + var(--b) * .25); --s: 1.7; }
  body[data-scene="4"] .o-perle   { --x: 16vw; --y: 20svh; --s: 1; }
  body[data-scene="4"] .o-anneau  { --x: 110vw; --y: 32svh; --s: .8; --r: 60deg; --rx: 50deg; }
  body[data-scene="4"] .o-gelule  { --x: -10vw; --y: 72svh; --s: 1; --r: 90deg; }

  body[data-scene="5"] .o-bille   { --x: 20vw; --y: calc(90svh - var(--b) * .275); --s: .55; }
  body[data-scene="5"] .o-gelule  { --x: calc(20vw + var(--b) * .52); --y: calc(90svh - var(--b) * .086); --s: .75; --r: 0deg; }
  body[data-scene="5"] .o-perle   { --x: calc(20vw - var(--b) * .38); --y: calc(90svh - var(--b) * .12); --s: 1; }
  body[data-scene="5"] .o-anneau  { --x: -12vw; --y: 40svh; --s: .8; --r: 18deg; --rx: 62deg; }

  body[data-scene="6"] .o-bille   { --x: 76vw; --y: 38svh; --s: .62; }
  body[data-scene="6"] .o-perle   { --x: 68vw; --y: 62svh; --s: .9; }
  body[data-scene="6"] .o-gelule  { --x: 86vw; --y: 60svh; --s: .7; --r: 35deg; }
  body[data-scene="6"] .o-anneau  { --x: 116vw; --y: 72svh; --s: 1; --r: 30deg; --rx: 55deg; }

  body[data-scene="7"] .o-bille   { --x: 79vw; --y: calc(88svh - var(--b) * .3); --s: .6; }
  body[data-scene="7"] .o-perle   { --x: calc(79vw + var(--b) * .44); --y: calc(88svh - var(--b) * .12); --s: 1; }
  body[data-scene="7"] .o-gelule  { --x: calc(79vw - var(--b) * .5); --y: calc(88svh - var(--b) * .086); --s: .75; --r: 0deg; }
  body[data-scene="7"] .o-anneau  { --x: 64vw; --y: 89svh; --s: 1; --r: -4deg; --rx: 78deg; }

  body[data-scene="8"] .o-bille   { --x: 14vw; --y: 80svh; --s: .3; }
  body[data-scene="8"] .o-anneau  { --x: -16vw; --y: 66svh; --s: .8; --r: 20deg; --rx: 62deg; }
  body[data-scene="8"] .o-perle   { --x: 110vw; --y: 60svh; --s: 1; }
  body[data-scene="8"] .o-gelule  { --x: -10vw; --y: 100svh; --s: 1; --r: 30deg; }
}

/* ───────── En-tête et repères ───────── */
.entete { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: max(14px, env(safe-area-inset-top)) var(--gouttiere) 14px; pointer-events: none; }
.entete > * { pointer-events: auto; }
.marque { position: relative; display: block; width: 110px; height: 21px; transition: opacity .5s; }
.marque img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .5s; }
.marque .m-nuit, body[data-ton="nuit"] .marque .m-perle { opacity: 0; }
body[data-ton="nuit"] .marque .m-nuit { opacity: 1; }
/* Le haut de page a son grand logo et son bouton ; la demande se fait dans la section, qui défile sous l'en-tête. */
body[data-scene="1"] .marque, body[data-scene="1"] .entete-demande, body[data-scene="8"] .marque, body[data-scene="8"] .entete-demande { opacity: 0; pointer-events: none; }
.entete-demande { transition: opacity .5s, color .5s, background .5s, box-shadow .5s, transform .3s var(--courbe); padding: 10px 18px; border-radius: 999px; font: 600 14.5px/1 var(--f); text-decoration: none; color: var(--encre); background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1.5px rgba(20, 20, 24, .8); }
body[data-ton="nuit"] .entete-demande { color: var(--blanc); background: rgba(11, 11, 14, .35); box-shadow: inset 0 0 0 1.5px rgba(237, 237, 240, .35); }

.reperes { position: fixed; z-index: 20; right: clamp(2px, 1.4vw, 18px); top: 50%; translate: 0 -50%; display: grid; gap: 2px; }
.reperes a { position: relative; width: 18px; height: 18px; display: grid; place-items: center; }
.reperes a::before { content: attr(aria-label); position: absolute; right: 24px; top: 50%; translate: 8px -50%; padding: 6px 11px; border-radius: 999px; white-space: nowrap; font: 600 12.5px/1 var(--f); color: var(--encre); background: rgba(255, 255, 255, .88); box-shadow: 0 6px 18px -10px rgba(20, 22, 28, .5), inset 0 0 0 1px rgba(20, 20, 24, .1); opacity: 0; pointer-events: none; transition: opacity .25s ease, translate .4s var(--courbe); }
body[data-ton="nuit"] .reperes a::before { color: var(--blanc); background: rgba(20, 21, 27, .85); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .14); }
@media (hover: hover) { .reperes a:hover::before { opacity: 1; translate: 0 -50%; } }
.reperes a.montre::before, .reperes a:focus-visible::before { opacity: 1; translate: 0 -50%; }
.reperes a::after { content: ""; width: 6px; height: 6px; border-radius: 9px; background: rgba(20, 20, 24, .25); transition: height .4s var(--courbe), background .5s; }
.reperes a[aria-current]::after { height: 18px; background: var(--encre); }
body[data-ton="nuit"] .reperes a::after { background: rgba(237, 237, 240, .28); }
body[data-ton="nuit"] .reperes a[aria-current]::after { background: var(--blanc); }

/* ───────── Les écrans ───────── */
main { position: relative; z-index: 1; }
.ecran { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-content: center; padding-block: calc(78px + env(safe-area-inset-top)) 48px; grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; scroll-snap-stop: always; }

/* Apparitions : le contenu d'une section entre quand elle devient la section active. */
.js [data-entre] { opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .3s ease; }
.js .actif [data-entre] { opacity: 1; transform: none; transition: opacity .75s var(--courbe) calc(100ms + var(--k, 0) * 70ms), transform .75s var(--courbe) calc(100ms + var(--k, 0) * 70ms); }

/* 1 · Haut de page */
.heros { align-content: start; padding-top: 44svh; }
.heros-texte { display: grid; gap: 14px; justify-items: start; }
.heros-logo { height: 30px; width: auto; }
.heros-titre { font: 700 31px/1.04 var(--f); letter-spacing: -.035em; max-width: 15ch; }
.heros .chapo { margin-top: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 899px) {
  .heros .sur { display: none; }
  .actions .bouton { min-height: 48px; padding: 0 20px; font-size: 15px; }
}
@media (min-width: 900px) {
  .heros { align-content: center; padding-top: 90px; }
  .heros-texte { gap: 20px; }
  .heros-texte > * { max-width: min(560px, 44vw); }
  .heros-logo { height: clamp(34px, 3.6vw, 52px); margin-bottom: 6px; }
  .heros-titre { font-size: clamp(36px, min(4.8vw, 8.5svh), 68px); }
}

/* 2 · La méthode */
.etapes { list-style: none; padding: 0; display: grid; margin-top: 26px; }
/* Chaque étape est un morceau de ciel, de la nuit à l'aube : --c1 est la couleur de fond, --c2 la lueur
   qui monte du coin bas droit. La couleur avance avec les étapes. */
.etapes { gap: 7px; }
.etape { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 11px 14px; border-radius: 16px;
  background: radial-gradient(120% 110% at 100% 100%, rgb(var(--c2) / .5), rgb(var(--c2) / 0) 72%), linear-gradient(160deg, rgb(var(--c1) / .8), rgb(var(--c1) / .42));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 18px 36px -26px rgb(var(--c2) / .8); }
.etape:nth-child(1) { --c1: 20 26 64; --c2: 56 84 170; }
.etape:nth-child(2) { --c1: 22 36 82; --c2: 44 140 158; }
.etape:nth-child(3) { --c1: 38 28 82; --c2: 132 88 176; }
.etape:nth-child(4) { --c1: 54 32 78; --c2: 218 128 142; }
.etape .num { grid-row: 1 / 3; font: 700 17px/1.4 var(--f-nom); }
.etape h3 { font: 600 17px/1.3 var(--f); }
.etape p { color: rgba(237, 237, 240, .76); font-size: 14.5px; line-height: 1.45; }
.methode .titre { max-width: 13ch; }
@media (min-width: 900px) {
  .methode .titre { max-width: 20ch; }
  .etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
  .etape { grid-template-columns: 1fr; align-content: start; gap: 8px; padding: 24px 22px 26px; border-radius: 22px; }
  .etape .num { grid-row: auto; font-size: 24px; margin-bottom: 10px; }
  .etape h3 { font-size: 19px; }
  .etape p { font-size: 15px; }
}

/* 3 · Les aperçus */
.apercus-tete { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.apercus .titre { max-width: 16ch; }
.apercus { padding-bottom: 24px; }
.apercus-bande { position: relative; min-width: 0; }
.fleches { display: none; }
.fleche { position: absolute; z-index: 2; top: calc(50% - 40px); width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; font: 400 28px/1 var(--f); color: var(--encre); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -10px rgba(20, 22, 28, .45), inset 0 0 0 1px rgba(20, 20, 24, .12); transition: opacity .3s, transform .3s var(--courbe); }
.fleche[data-fleche="-1"] { left: max(14px, calc((100vw - 1240px) / 2)); }
.fleche[data-fleche="1"] { right: max(44px, calc((100vw - 1240px) / 2)); }
.fleche[hidden] { display: block; opacity: 0; pointer-events: none; }
.fleche:hover { background: #FFFFFF; }
@media (min-width: 900px) and (hover: hover) { .fleches { display: block; } }
.defile { margin-top: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 22px 0 14px; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: max(var(--gouttiere), calc((100vw - 1240px) / 2 + var(--gouttiere))); }
.defile::-webkit-scrollbar { display: none; }
.defile-piste { display: flex; gap: 16px; width: max-content; padding-inline: max(var(--gouttiere), calc((100vw - 1240px) / 2 + var(--gouttiere))); }
.tel { margin: 0; flex: 0 0 auto; width: min(44vw, calc(47svh * .462)); scroll-snap-align: start; display: grid; gap: 22px; }
.tel-cadre { display: block; padding: 5px; border-radius: 24px; background: linear-gradient(160deg, #FFFFFF, #8A8E9C 30%, #2B2E36 48%, #E6E8EE 62%, #5E636F 82%, #FFFFFF); box-shadow: 0 26px 32px -24px rgba(20, 22, 28, .55); transform: perspective(900px) rotateY(var(--incl, 0deg)); transform-origin: 50% 100%; transition: transform .5s var(--courbe), box-shadow .5s var(--courbe); cursor: pointer; }
.tel.leve .tel-cadre { transform: perspective(900px) rotateY(0deg) scale(1.05); box-shadow: 0 40px 44px -26px rgba(20, 22, 28, .62); }
/* Le reflet des téléphones au sol coûte cher à un téléphone : il est réservé aux écrans pilotés à la souris. */
@media (hover: hover) and (pointer: fine) { .tel-cadre { -webkit-box-reflect: below 3px linear-gradient(transparent 86%, rgba(255, 255, 255, .2)); } }
@media (hover: hover) { .tel:hover .tel-cadre { transform: perspective(900px) rotateY(0deg) scale(1.05); box-shadow: 0 40px 44px -26px rgba(20, 22, 28, .62); } }
.tel-cadre img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; border-radius: 19px; background: #FFFFFF; }
.tel-leg { font-size: 12.5px; line-height: 1.4; color: var(--gris); text-align: center; text-wrap: balance; }
.tel-leg b { display: block; margin-bottom: 2px; font-weight: 600; color: var(--encre); }
@media (min-width: 900px) {
  .defile { margin-top: 10px; }
  .apercus .titre { max-width: 24ch; }
  .defile-piste { gap: 22px; }
  .tel { width: calc(min(48svh, 460px) * .462); }
  .tel-cadre { padding: 7px; border-radius: 34px; }
  .tel-cadre img { border-radius: 27px; }
  .tel-leg { font-size: 14px; }
}

/* 4 · La promesse */
.promesse { margin-top: 20px; font: 600 clamp(26px, 3.8vw, 50px)/1.2 var(--f); letter-spacing: -.025em; max-width: 22ch; }
.promesse .mot { transition: opacity .45s ease calc(250ms + var(--i, 0) * 40ms); }
.js .promesse .mot { opacity: .16; }
.js .actif .promesse .mot { opacity: 1; }

/* 5 · Ce qu'on fait */
.fait .titre { max-width: 16ch; }
.fait-grille { display: grid; gap: 22px; align-items: start; }
.offres { list-style: none; padding: 0; display: grid; gap: 10px; }
.offre { display: grid; grid-template-columns: 38px 1fr; gap: 2px 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 20px 34px -26px rgba(20, 22, 28, .35); }
.offre .num { grid-row: 1 / 3; font: 700 16px/1.5 var(--f-nom); background: var(--chrome-sombre); -webkit-background-clip: text; background-clip: text; color: transparent; }
.offre h3 { font: 600 16.5px/1.3 var(--f); }
.offre p { color: var(--gris-doux); font-size: 14px; line-height: 1.45; }
@media (min-width: 900px) {
  .fait-grille { grid-template-columns: .95fr 1.05fr; gap: 64px; }
  .offres { gap: 14px; }
  .offre { grid-template-columns: 56px 1fr; gap: 4px 18px; padding: 24px 26px; border-radius: 22px; }
  .offre .num { font-size: 22px; }
  .offre h3 { font-size: 19px; }
  .offre p { font-size: 15px; }
}

/* 6 · Ce que vous recevez */
.recevez-grille { display: grid; gap: 22px; align-items: start; }
.recevez .titre { max-width: 17ch; }
.remise { list-style: none; padding: 0; margin-top: 20px; display: grid; }
.remise li { padding: 10px 0; font-size: 14.5px; line-height: 1.45; color: var(--argent); border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(255, 255, 255, .45), rgba(226, 232, 255, .22) 40%, rgba(255, 255, 255, .04)) 1; }
.remise b { font-weight: 600; color: var(--blanc); }
.apres { display: grid; gap: 10px; justify-items: start; padding: 16px 18px 18px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.apres h3 { font: 600 16.5px/1.3 var(--f); }
.apres p { font-size: 14px; line-height: 1.5; color: var(--argent); }
.bouton-clair { background: var(--blanc); color: var(--encre); min-height: 46px; padding: 0 20px; font-size: 15px; margin-top: 4px; }
@media (min-width: 900px) {
  .recevez-grille { grid-template-columns: minmax(0, 620px); gap: 26px; }
  .recevez .titre { max-width: 16ch; }
  .remise { grid-template-columns: 1fr 1fr; gap: 0 28px; margin-top: 30px; }
  .remise li { padding: 16px 0; font-size: 15.5px; }
  .apres { padding: 22px 24px 24px; }
  .apres h3 { font-size: 18px; }
  .apres p { font-size: 15px; }
}

/* 7 · Vos questions : une liste qui s'ouvre au toucher, une question ouverte à la fois. */
.questions-grille { display: grid; gap: 18px; }
.questions .titre { max-width: 14ch; }
.faq { display: grid; gap: 6px; max-width: 640px; }
.faq details { border-radius: 14px; background: rgba(255, 255, 255, .72); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 12px 26px -22px rgba(20, 22, 28, .4); transition: background .3s; }
.faq details[open] { background: #FFFFFF; }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 12px 44px 12px 16px; font: 600 15px/1.35 var(--f); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-right: 1.6px solid var(--encre); border-bottom: 1.6px solid var(--encre); rotate: 45deg; transition: rotate .35s var(--courbe), margin .35s var(--courbe); }
.faq details[open] summary::after { rotate: 225deg; margin-top: -1px; }
.faq summary:focus-visible { outline: 3px solid var(--iris); outline-offset: 2px; border-radius: 14px; }
.faq details p { padding: 0 16px 14px; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.faq details[open] p { animation: reponse .4s var(--courbe); }
@keyframes reponse { from { opacity: 0; transform: translateY(-4px); } }
@media (min-width: 900px) {
  .questions-grille { gap: 26px; }
  .questions .titre { max-width: 20ch; }
  .faq { gap: 8px; }
  .faq summary { padding: 15px 48px 15px 20px; font-size: 16px; }
  .faq details p { padding: 0 20px 16px; font-size: 15px; }
}

/* 8 · La demande et le pied de page */
.demande { grid-template-rows: 1fr auto; align-content: stretch; padding-bottom: 20px; }
.demande-grille { display: grid; gap: 22px; align-items: center; align-self: center; }
.demande .titre { max-width: 13ch; }
.formulaire { position: relative; width: 100%; max-width: 520px; padding: 20px 18px 18px; border-radius: 24px; background: #F7F7F9; color: var(--encre); box-shadow: inset 0 1px 0 #FFFFFF, 0 30px 60px -30px rgba(0, 0, 0, .8); }
.etapes-form { list-style: none; padding: 0; margin: 0 0 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.etapes-form li { display: grid; gap: 7px; font: 600 10.5px/1.2 var(--f); letter-spacing: .08em; text-transform: uppercase; color: #8A8E9C; }
.etapes-form li::before { content: ""; height: 3px; border-radius: 3px; background: #D9DBE1; transition: background .4s; }
.etapes-form li.fait { color: var(--encre); }
.etapes-form li.fait::before { background: var(--encre); }
.pas { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 13px; }
.pas + .pas { margin-top: 22px; }
.pas legend { padding: 0; margin-bottom: 14px; font: 600 20px/1.25 var(--f); letter-spacing: -.02em; }
.champ { position: relative; display: grid; gap: 6px; }
.champ::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--iris); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--courbe); pointer-events: none; }
.champ:focus-within::after { transform: scaleX(1); }
.champ > span { font: 600 13.5px/1.3 var(--f); color: #2B2E36; }
.champ i { font-style: normal; font-weight: 500; color: #8A8E9C; }
.champ input, .champ textarea, .champ select { width: 100%; font: 16px/1.4 var(--f); color: var(--encre); padding: 12px 14px; border-radius: 12px; border: 1px solid #D2D5DC; background: #FFFFFF; transition: border-color .2s, box-shadow .2s; }
.champ textarea { resize: vertical; min-height: 88px; }
.agenda { display: grid; gap: 14px; }
.agenda-attente { font-size: 14.5px; color: var(--gris-doux); }
.jours { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; margin: -2px; touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
.jours::-webkit-scrollbar { display: none; }
.jour { flex: 0 0 auto; width: 60px; padding: 9px 0 10px; display: grid; justify-items: center; gap: 2px; border-radius: 14px; border: 1px solid #D2D5DC; background: #FFFFFF; color: var(--encre); font: inherit; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .3s var(--courbe); }
.jour:active { transform: scale(.95); transition-duration: .08s; }
.jour small { font: 600 11px/1.2 var(--f); letter-spacing: .06em; text-transform: uppercase; color: #8A8E9C; }
.jour b { font: 600 20px/1.1 var(--f); font-variant-numeric: tabular-nums; }
.jour span { font-size: 11.5px; color: #8A8E9C; }
.jour[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #FFFFFF; }
.jour[aria-pressed="true"] small, .jour[aria-pressed="true"] span { color: #C9CCD3; }
.moment { margin: 2px 0 8px; font: 600 12px/1.2 var(--f); letter-spacing: .12em; text-transform: uppercase; color: #8A8E9C; }
.grille-creneaux { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.grille-creneaux + .moment { margin-top: 14px; }
.creneau { position: relative; padding: 12px 0; border-radius: 12px; border: 1px solid #D2D5DC; background: #FFFFFF; color: var(--encre); font: 600 15px/1 var(--f); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background .2s, transform .3s var(--courbe); }
.creneau:active { transform: scale(.95); transition-duration: .08s; }
.creneau::after { content: ""; position: absolute; inset: -5px; border-radius: 16px; border: 1.5px solid var(--encre); --trace: 0deg; -webkit-mask: conic-gradient(from 270deg, #000 var(--trace), transparent 0); mask: conic-gradient(from 270deg, #000 var(--trace), transparent 0); pointer-events: none; }
.creneau[aria-pressed="true"]::after { animation: entoure .5s cubic-bezier(.45, .05, .25, 1) both; }
@keyframes entoure { from { --trace: 0deg; } to { --trace: 360deg; } }
.creneau:hover { border-color: var(--encre); }
.creneau[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #FFFFFF; }
.fuseau { font-size: 12.5px; color: #6B6F7B; }
.recap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px 10px 14px; border-radius: 14px; background: #ECEDF1; }
.recap[hidden] { display: none; }
.recap p { font: 600 15px/1.35 var(--f); }
.recap p::first-letter { text-transform: uppercase; }
.merci-liens { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.merci-liens a { font: 600 15px/1.3 var(--f); color: var(--encre); text-underline-offset: 3px; }
@media (min-width: 900px) { .grille-creneaux { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; } .creneau { font-size: 14.5px; } }
.champ select { appearance: none; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23141418' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 38px; }
.champ input::placeholder, .champ textarea::placeholder { color: #9A9EA9; }
.champ input:focus, .champ textarea:focus, .champ select:focus { outline: none; border-color: var(--encre); }
.pas-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.pas-actions .bouton:only-child { margin-left: auto; }
.pas-actions .bouton { min-height: 50px; border: 0; cursor: pointer; }
.retour { border: 0; background: none; cursor: pointer; padding: 12px 4px; font: 600 15px/1 var(--f); color: var(--gris-doux); }
.retour:hover { color: var(--encre); }
.bouton:disabled { opacity: .6; cursor: progress; }
.pas-actions [type="submit"]:disabled:not(.envoi) { opacity: .4; cursor: not-allowed; }
.pas-note { margin-top: -4px; font-size: 14.5px; line-height: 1.5; color: var(--gris); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: #6B6F7B; }
.form-erreur { margin-top: 14px; font-size: 14px; color: #B42318; }
.form-merci { display: grid; gap: 8px; padding: 6px 0 2px; }
.merci-signe { position: relative; width: 52px; height: 52px; margin-bottom: 6px; }
.merci-signe::before { content: ""; position: absolute; inset: 0; border-radius: 50%; --trace: 0deg; background: linear-gradient(160deg, #8A8E9C, #141418 30%, #C9CCD3 52%, #2B2E36 70%, #6B6F7B 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)), conic-gradient(from 270deg, #000 var(--trace), transparent 0); -webkit-mask-composite: source-in;
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)), conic-gradient(from 270deg, #000 var(--trace), transparent 0); mask-composite: intersect;
  animation: entoure .9s cubic-bezier(.45, .05, .25, 1) .15s both; }
.merci-signe svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--encre); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: coche .4s cubic-bezier(.5, 0, .2, 1) 1s both; }
@keyframes coche { to { stroke-dashoffset: 0; } }
.form-merci[hidden] { display: none; }
.merci-titre { font: 600 24px/1.2 var(--f); letter-spacing: -.02em; }
.form-merci p:not(.merci-titre):not(.merci-liens):not(.apercu-titre):not(.apercu-fait) { color: var(--gris); }
.form-merci .merci-prep { font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: #ECEDF1; }
.js .pas:not(.actuel) { display: none; }
.js .pas + .pas { margin-top: 0; }
.js .pas.actuel { animation: pas-entre .45s var(--courbe); }
@keyframes pas-entre { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
html:not(.js) [data-suivant], html:not(.js) [data-precedent], html:not(.js) .etapes-form { display: none; }
.formulaire.envoye .etapes-form, .formulaire.envoye .pas, .formulaire.envoye .form-note { display: none; }
.pied { padding-top: 28px; }
.pied p { font-size: 12px; line-height: 1.55; color: #6B6F7B; max-width: 120ch; }
@media (min-width: 900px) {
  .demande-grille { grid-template-columns: .9fr 1.1fr; gap: 60px; }
  .demande .titre { max-width: 12ch; }
  .formulaire { justify-self: end; padding: 28px 30px 24px; border-radius: 28px; }
}

/* Sans JavaScript, chaque section garde son propre fond. */
html:not(.js) .ecran.nuit { background: var(--nuit); }
html:not(.js) .ecran.perle { background: var(--perle); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-entre] { opacity: 1 !important; transform: none !important; }
  .js .promesse .mot { opacity: 1; }
}
@media (min-width: 900px) { .tel { gap: 34px; } }

/* Téléphone : « Ce qu'on fait » et « Ce que vous recevez » tiennent dans un écran. */
@media (max-width: 899px) {
  .fait .chapo { font-size: 15px; }
  .offre { padding: 11px 14px; }
  .offre p { font-size: 13.5px; }
  .offres { gap: 8px; }
  .recevez-grille { gap: 14px; }
  .remise { margin-top: 14px; }
  .remise li { padding: 8px 0; font-size: 14px; }
  .apres { padding: 13px 15px 15px; gap: 8px; }
  .apres p { font-size: 13.5px; }
  .bouton-clair { min-height: 42px; }
}

/* Préparez votre aperçu : après la réservation, dans le même cadre, tout facultatif. */
.apercu { display: grid; gap: 13px; margin-top: 14px; padding-top: 18px; border-top: 1px solid #DDDFE4; }
.apercu[hidden], .apercu-fait[hidden] { display: none; }
.form-merci .apercu-titre { font: 600 19px/1.25 var(--f); letter-spacing: -.02em; color: var(--encre); }
.form-merci .apercu-chapo, .form-merci .photos-note { font-size: 14px; line-height: 1.5; }
.objectifs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.objectifs legend { width: 100%; padding: 0; margin-bottom: 8px; font: 600 13.5px/1.3 var(--f); color: #2B2E36; }
.puce { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #D2D5DC; background: #FFFFFF; font: 500 14.5px/1.2 var(--f); color: var(--encre); transition: background .2s, border-color .2s, color .2s; }
.puce input:checked + span { background: var(--encre); border-color: var(--encre); color: #FFFFFF; }
.puce input:focus-visible + span { outline: 2px solid var(--iris); outline-offset: 2px; }
.photos { display: grid; gap: 8px; }
.photos-titre { font: 600 13.5px/1.3 var(--f); color: #2B2E36; }
.photos-choisir { position: relative; justify-self: start; min-height: 46px; cursor: pointer; }
.photos-choisir input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photos-choisir:focus-within { outline: 2px solid var(--iris); outline-offset: 2px; }
.photos-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.photos-liste:empty { display: none; }
.photos-liste li { display: grid; gap: 4px; font: 500 12px/1.3 var(--f); color: #6B6F7B; }
.photos-liste img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #ECEDF1; opacity: .55; transition: opacity .3s; }
.photos-liste li.ok img { opacity: 1; }
.photos-liste li.ok span { color: #1F7A4D; }
.photos-liste li.rate span { color: #B42318; }
.form-merci .apercu-fait { margin-top: 10px; padding: 12px 14px; border-radius: 12px; background: #E7F4EE; color: #1F5C3E; font: 600 15px/1.4 var(--f); }