/* =====================================================================
   P'tit Nous — page d'accueil « De la nuit à l'aube ».
   Dépend de core.css (tokens, polices, boutons, en-tête, pied de page).

   Modes (posés en tête de page par un script inline) :
   - html.no-js      : page statique complète, fonds par section.
   - html.js.motion  : ciel fixe piloté par le scroll, sections épinglées
                       (position: sticky), scène fixe, révélations.
   - html.js.reduced : prefers-reduced-motion → pas d'épinglage ni de scrub,
                       fonds par section, fondus simples.
   Les états « cachés avant animation » ne s'appliquent que sous html.js.
   ===================================================================== */

:root {
  --night-ink: #fff6f3;
  --night-soft: rgba(255, 246, 243, 0.74);
  --success: #2f8f66;            /* vert « Photo parfaite », AA sur blanc */
  --success-ring: #52b68a;
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(255, 255, 255, 0.85);
  --sec-pad: clamp(96px, 7vw + 56px, 200px);
  --vh: 100vh;
  --svh: 100vh;
  /* centre visuel de la scène (astres) */
  --stage-x: 50%;
  --stage-y: 28%;
  --stage-pad-x: 0%;   /* |stage-x − 50 %| : marge du canvas pour pouvoir le recentrer */
  --stage-pad-y: 22%;
}
@supports (height: 100svh) { :root { --svh: 100svh; } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  :root { --stage-x: 66%; --stage-y: 45%; --stage-pad-x: 16%; --stage-pad-y: 5%; }
}

html.motion { background: var(--night); }
html.motion body { background: transparent; }
body.home { background: var(--cream); }
html.motion body.home { background: transparent; }

.nowrap { white-space: nowrap; }

/* ---------- Défs SVG ---------- */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Ciel fixe (mode motion) ---------- */
.sky { display: none; }
html.motion .sky {
  display: block;
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 70% 0%, #2a1530 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 100%, #1f1029 0%, transparent 60%),
    var(--night);
  pointer-events: none;
}
.sky__dawn {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(70% 55% at 85% 8%, rgba(230, 221, 251, 0.95) 0%, transparent 70%),
    radial-gradient(70% 60% at 5% 95%, rgba(255, 216, 194, 0.7) 0%, transparent 70%),
    linear-gradient(160deg, #fff3f0 0%, #fde8f0 55%, #f1eafe 100%);
  will-change: opacity;
}
.sky__dusk {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(110% 70% at 50% 108%, #ffc6a8 0%, #f59ab3 30%, rgba(184, 98, 176, 0.85) 60%, transparent 88%),
    radial-gradient(80% 60% at 85% 0%, rgba(150, 110, 230, 0.55) 0%, transparent 70%),
    linear-gradient(180deg, #2d1448 0%, #6e3a92 42%, #c56aa3 78%, #f3a3b5 100%);
  will-change: opacity;
}
.sky__starfield { position: absolute; inset: 0; will-change: opacity; }
.sky__stars { position: absolute; inset: -10% 0; background-size: 800px 800px; }
.sky__stars--a { background-image: url("../img/home-stars-a.svg"); opacity: 0.8; }
.sky__stars--b { background-image: url("../img/home-stars-b.svg"); background-size: 1100px 1100px; animation: twinkle 5.5s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 0.25; } to { opacity: 0.9; } }

.grain {
  position: fixed; inset: 0; z-index: 98; pointer-events: none;
  background: url("../img/home-grain.svg") repeat;
  opacity: 0.05; mix-blend-mode: soft-light;
}

/* ---------- Sections : fonds statiques (sans JS / mouvement réduit) ---------- */
main { position: relative; z-index: 1; display: block; outline: none; }
main > section { position: relative; z-index: 1; }
.hero, .manifesto { background: var(--night); color: var(--night-ink); }
.manifesto { background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 30%, #6d4a6e 52%, #f3d5df 74%, var(--cream) 100%); }
.how, .traits-sec, .versions, .trust, .pricing, .faq { background: transparent; }
main > .how { background: linear-gradient(180deg, var(--cream) 0%, #fdeef2 100%); }
main > .traits-sec { background: linear-gradient(180deg, #fdeef2 0%, #f6efff 100%); }
main > .versions { background: linear-gradient(180deg, #f6efff 0%, var(--cream) 100%); }
main > .trust { background: linear-gradient(180deg, var(--cream) 0%, #fdeaf0 100%); }
main > .pricing { background: linear-gradient(180deg, #fdeaf0 0%, #f4eefe 100%); }
main > .faq { background: linear-gradient(180deg, #f4eefe 0%, var(--cream) 100%); }
.finale { background: linear-gradient(180deg, var(--cream) 0%, #e9c9d7 18%, #5c3b5f 42%, var(--night) 64%); color: var(--night-ink); }
html.motion main > section { background: transparent; }

/* ---------- Éléments communs ---------- */
.section-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--rose-ink); margin-bottom: 22px; }
.mini-mark { position: relative; width: 26px; height: 16px; flex: none; }
.mini-mark::before, .mini-mark::after {
  content: ""; position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%;
}
.mini-mark::before { left: 0; background: var(--rose); }
.mini-mark::after { right: 0; background: var(--lilac); mix-blend-mode: multiply; }
.sec-head { max-width: 760px; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head h2 { font-size: var(--fs-h2); }
.sec-head .lead { margin-top: 24px; max-width: 60ch; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
h2 em, h3 em { color: var(--rose-ink); }
.fineprint { margin-top: 40px; font-size: var(--fs-small); color: var(--ink-soft); max-width: 72ch; }
.fineprint a { color: var(--rose-ink); font-weight: 700; }
.fineprint--center { margin-inline: auto; text-align: center; }

.btn__icon { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn--glass .btn__icon { fill: none; }
.btn--glass {
  color: var(--night-ink);
  background: rgba(255, 246, 243, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 243, 0.28);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.btn--glass:hover { background: rgba(255, 246, 243, 0.16); }
/* Contraste AA du texte blanc : dégradé CTA assombri (cf. compte rendu, à reporter dans core.css) */
.btn--primary { background: linear-gradient(135deg, #c64873 0%, #b23a5e 55%, #9c2f53 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 36px -12px rgba(178, 58, 94, 0.55); }
.btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 18px 50px -12px rgba(178, 58, 94, 0.7); }
.btn--soon { cursor: default; }
.btn--soon:hover { transform: none; }
.btn--lg { --btn-h: 64px; padding: 0 34px; font-size: 1.1rem; }
.btn > * { pointer-events: none; }
[data-magnetic] { will-change: auto; }
/* Révélation au scroll en cours (GSAP) : aucune transition CSS ne doit la suivre. */
[data-reveal].is-revealing { transition: none; }
/* Boutons pilotés par GSAP (entrée + aimant) : pas de transition CSS sur transform.
   Elle faisait lire à GSAP une valeur en cours de transition comme position d'arrivée :
   les boutons du hero restaient décalés de 26 px sous la mention. */
.btn[data-magnetic] { transition-property: box-shadow, background-color; }

.link-arrow {
  display: inline-block; margin-top: 28px;
  font-weight: 800; color: var(--rose-ink); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 4px; transition: background-size var(--dur-3) var(--ease-out);
}
.link-arrow svg { display: inline-block; vertical-align: -3px; margin-left: 8px; width: 18px; height: 18px; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- Introduction ---------- */
.intro { display: none; }
html.motion .intro {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--night); pointer-events: none;
  animation: intro-failsafe 0.6s 3s forwards;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }
.intro__mark { position: relative; width: 120px; height: 78px; }
.intro__orb { position: absolute; top: 0; width: 78px; height: 78px; border-radius: 50%; box-shadow: 0 0 0 5px var(--night); }
.intro__orb--a { left: 0; background: linear-gradient(135deg, #ffc2d2, #f2849e); }
.intro__orb--b { right: 0; background: linear-gradient(135deg, #e2d8ff, #b9a6f2); opacity: 0.94; }
.intro__heart { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -13px 0 0 -15px; fill: var(--white); filter: drop-shadow(0 0 10px rgba(255, 201, 214, 0.9)); }
.intro__word {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--night-soft); font-variation-settings: "opsz" 24, "SOFT" 100;
}

/* ---------- Curseur ---------- */
.cursor { display: none; }
html.has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; }
html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
.cursor__dot, .cursor__ring { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cursor-c, var(--petal)); }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1.5px solid var(--cursor-c, var(--petal)); opacity: 0.55;
  transition: width var(--dur-3) var(--ease-out), height var(--dur-3) var(--ease-out), margin var(--dur-3) var(--ease-out), opacity var(--dur-2), background-color var(--dur-2), border-color var(--dur-2);
}
html.has-cursor[data-cursor="day"] .cursor { --cursor-c: var(--rose-deep); }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: 0.9; background: color-mix(in srgb, var(--cursor-c, var(--petal)) 12%, transparent); }
.cursor.is-down .cursor__ring { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.cursor.is-hidden { opacity: 0; }

/* ---------- En-tête : petits compléments ---------- */
.nav__brand img { transition: transform var(--dur-3) var(--ease-spring); }
.nav__brand:hover img { transform: rotate(-8deg) scale(1.06); }

/* =====================================================================
   1. HERO
   ===================================================================== */
.hero { position: relative; isolation: auto; min-height: var(--svh); overflow: clip; }
html.motion .hero { height: 240vh; overflow: visible; }
.hero__pin { position: relative; z-index: 2; min-height: var(--svh); display: flex; flex-direction: column; justify-content: flex-end; }
html.motion .hero__pin { position: sticky; top: 0; height: var(--svh); min-height: 0; }

.stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.motion .stage { position: fixed; inset: 0; height: 100lvh; height: 100vh; }
@supports (height: 100lvh) { html.motion .stage { height: 100lvh; } }
.stage__move { position: absolute; inset: 0; transform: translate(calc(var(--stage-x) - 50%), calc(var(--stage-y) - 50%)); }
html.motion .stage__move { transform: none; }
.stage__canvas {
  position: absolute; left: calc(-1 * var(--stage-pad-x)); top: calc(-1 * var(--stage-pad-y));
  width: calc(100% + 2 * var(--stage-pad-x)); height: calc(100% + 2 * var(--stage-pad-y)); max-width: none; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.stage.is-webgl .stage__canvas { opacity: 1; }
.stage.is-webgl .stage__fallback { opacity: 0; transition: opacity 1.2s var(--ease-out); }
.stage__vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 10, 21, 0.55) 0%, transparent 22%, transparent 48%, rgba(18, 10, 21, 0.72) 100%);
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .stage__vignette { background: linear-gradient(90deg, rgba(18, 10, 21, 0.8) 0%, rgba(18, 10, 21, 0.35) 42%, transparent 62%), linear-gradient(180deg, rgba(18, 10, 21, 0.4) 0%, transparent 25%); }
}

/* Repli CSS : deux astres en orbite (dégradés radiaux), cœur lumineux à la fusion */
.stage__fallback { position: absolute; inset: 0; }
.orbit {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  animation: orbit 26s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.orb-pos { position: absolute; left: 0; top: 0; }
.orb-pos--a { transform: translateX(calc(var(--orb-d, 1) * -1 * var(--orb-gap))); }
.orb-pos--b { transform: translateX(calc(var(--orb-d, 1) * var(--orb-gap))); }
.stage__fallback { --orb-size: clamp(260px, 52vmin, 640px); --orb-gap: clamp(70px, 15vmin, 190px); }
.orb {
  position: absolute; left: 0; top: 0;
  width: var(--orb-size); height: var(--orb-size); margin: calc(var(--orb-size) / -2) 0 0 calc(var(--orb-size) / -2);
  border-radius: 50%;
  animation: orb-breathe 7s ease-in-out infinite alternate, orbit 26s linear infinite reverse;
}
.orb--a { background: radial-gradient(circle at 50% 50%, rgba(255, 214, 224, 0.95) 0%, rgba(242, 132, 158, 0.75) 14%, rgba(217, 87, 122, 0.32) 34%, rgba(217, 87, 122, 0.08) 54%, transparent 70%); }
.orb--b { background: radial-gradient(circle at 50% 50%, rgba(236, 230, 255, 0.95) 0%, rgba(185, 166, 242, 0.75) 14%, rgba(139, 115, 224, 0.32) 34%, rgba(139, 115, 224, 0.08) 54%, transparent 70%); animation-delay: -3.5s, 0s; }
@keyframes orb-breathe { from { scale: 0.92; } to { scale: 1.06; } }
.fused { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.fused__halo {
  position: absolute; left: 0; top: 0; width: clamp(280px, 60vmin, 720px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 233, 199, 0.8) 0%, rgba(255, 201, 214, 0.55) 16%, rgba(242, 132, 158, 0.25) 36%, rgba(185, 166, 242, 0.12) 52%, transparent 70%);
}
.fused__heart { position: absolute; left: 0; top: 0; width: clamp(56px, 9vmin, 104px); height: auto; translate: -50% -46%; fill: #fff; filter: drop-shadow(0 0 18px rgba(255, 233, 199, 0.95)) drop-shadow(0 0 48px rgba(242, 132, 158, 0.8)); animation: heartbeat 0.857s ease-in-out infinite; }
@keyframes heartbeat {
  0%, 100% { scale: 1; }
  14% { scale: 1.12; }
  28% { scale: 0.98; }
  42% { scale: 1.08; }
  70% { scale: 1; }
}

.hero__content { padding-top: 120px; padding-bottom: clamp(88px, 13vh, 140px); }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: var(--r-pill);
  background: rgba(255, 246, 243, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 246, 243, 0.18);
  font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--night-ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.pulse-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
.pulse-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--rose); animation: pulse 2.2s var(--ease-out) infinite; }
@keyframes pulse { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.hero__title {
  margin-top: 26px;
  font-size: clamp(2.9rem, 1.1rem + 7.4vw, 9rem);
  line-height: 0.96; letter-spacing: -0.035em; font-weight: 420;
  max-width: 12.5ch;
  color: var(--night-ink);
  text-shadow: 0 2px 40px rgba(18, 10, 21, 0.45);
}
.hero__title em { color: transparent; background: linear-gradient(100deg, #ffc9d6 0%, #f7a3b8 40%, #d6c8ff 100%); -webkit-background-clip: text; background-clip: text; padding-right: 0.06em; text-shadow: none; }
.hero__title .char { font-weight: var(--w, 420); font-variation-settings: "opsz" 144, "SOFT" var(--soft, 100), "WONK" var(--wonk, 0); }
.hero__title em .char { --wonk: 1; }
.hero__title.is-split em { background: none; color: #f9b4c6; -webkit-background-clip: border-box; background-clip: border-box; }
.hero__lead { margin-top: 26px; max-width: 34ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--night-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero__note { margin-top: 22px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 246, 243, 0.66); }
.hero__union {
  position: absolute; left: 0; right: 0; top: calc(var(--stage-y) + clamp(80px, 16vmin, 180px));
  text-align: center; padding-inline: var(--gutter);
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; color: var(--night-ink);
  font-variation-settings: "opsz" 72, "SOFT" 100;
  opacity: 0; pointer-events: none;
}
.hero__union em { font-style: italic; color: var(--petal); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
html:not(.motion) .hero__union { display: none; }
html.motion .hero__union { top: calc(50% + clamp(84px, 14vmin, 170px)); }

.scroll-cue { position: absolute; right: var(--gutter); bottom: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--night-soft); }
.scroll-cue__line { position: relative; width: 1.5px; height: 64px; background: rgba(255, 246, 243, 0.18); overflow: hidden; border-radius: 2px; }
.scroll-cue__line::after { content: ""; position: absolute; inset: 0; background: var(--petal); transform: translateY(-100%); animation: cue 2.2s var(--ease-in-out) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
.scroll-cue__label { writing-mode: vertical-rl; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }
html:not(.motion) .scroll-cue { display: none; }

@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero__content { padding-bottom: clamp(72px, 11vh, 130px); }
}
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  .hero__pin { justify-content: flex-end; }
  .hero__title { max-width: 11ch; }
}
@media (max-width: 520px) {
  .hero__content { padding-bottom: 64px; }
  .hero__eyebrow { font-size: 0.7rem; letter-spacing: 0.1em; white-space: nowrap; }
  .hero__title { font-size: clamp(2.6rem, 0.9rem + 9.6vw, 3.6rem); margin-top: 20px; }
  .hero__lead { margin-top: 18px; font-size: 1.06rem; }
  .hero__actions { margin-top: 26px; }
  .hero__actions .btn { width: 100%; }
  .scroll-cue { display: none; }
}
@media (max-height: 560px) and (orientation: landscape) {
  .hero__content { padding-top: 92px; padding-bottom: 32px; }
  .hero__title { font-size: clamp(2.2rem, 1rem + 4vw, 3.6rem); }
}

/* =====================================================================
   2. MANIFESTE
   ===================================================================== */
.manifesto { padding: var(--sec-pad) 0; }
.manifesto__inner { display: grid; gap: clamp(48px, 8vh, 96px); }
.manifesto__night, .manifesto__dawn {
  font-size: clamp(1.9rem, 0.9rem + 3.6vw, 4.6rem);
  line-height: 1.12; font-weight: 380; letter-spacing: -0.025em;
  max-width: 22ch; margin-inline: auto; text-align: center;
}
.manifesto__night em, .manifesto__dawn em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.manifesto__night { color: var(--night-ink); }
.manifesto__night em { color: var(--petal); }
.manifesto__dawn { color: var(--ink); }
.manifesto__dawn em { color: var(--rose-ink); }

html.motion .manifesto { height: 320vh; padding: 0; }
html.motion .manifesto__pin { position: sticky; top: 0; height: var(--svh); display: grid; place-items: center; overflow: hidden; }
html.motion .manifesto__inner { grid-template-areas: "m"; gap: 0; }
html.motion .manifesto__night, html.motion .manifesto__dawn { grid-area: m; }
html.motion .manifesto .word { will-change: opacity; }

/* =====================================================================
   3. COMMENT ÇA MARCHE
   ===================================================================== */
.how { padding-top: var(--sec-pad); }
.how__head { margin-bottom: clamp(24px, 4vw, 56px); }
.how__head h2 { font-size: var(--fs-h2); max-width: 14ch; }
.how__grid { display: grid; gap: 48px; align-items: center; padding-bottom: var(--sec-pad); }
@media (min-width: 900px) { .how__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(48px, 7vw, 120px); } }

html.motion .how__track { height: 420vh; }
html.motion .how__pin { position: sticky; top: 0; height: var(--svh); display: flex; align-items: center; }
html.motion .how__grid { padding-bottom: 0; width: 100%; }

/* Téléphone (entièrement HTML/CSS) */
.phone { margin: 0 auto; justify-self: center; position: relative; }
.phone__frame {
  position: relative;
  height: min(74svh, 720px); aspect-ratio: 9 / 19.2;
  padding: 2.6%;
  border-radius: 13% / 6.2%;
  background: linear-gradient(145deg, #3a2840 0%, #1d1121 50%, #2a1830 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.14),
    inset 0 0 0 5px #120a15,
    0 50px 100px -30px rgba(59, 43, 63, 0.55),
    0 30px 60px -30px rgba(217, 87, 122, 0.4);
}
html:not(.motion) .phone__frame { height: min(78svh, 680px, calc((100vw - 64px) * 19.2 / 9)); }
/* les halos décoratifs ne doivent jamais créer de défilement horizontal */
main > section { overflow-x: clip; }
.phone::before { /* halo derrière le téléphone */
  content: ""; position: absolute; inset: 8% -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 201, 214, 0.75), rgba(230, 221, 251, 0.5) 55%, transparent);
  filter: blur(10px);
}
.phone__island { position: absolute; z-index: 5; left: 50%; top: 3.6%; width: 30%; height: 3.6%; translate: -50% 0; border-radius: 99px; background: #0b060d; }
.screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 11% / 5.2%;
  background: linear-gradient(160deg, #fff3f0 0%, #fde8f0 55%, #f1eafe 100%);
  container-type: inline-size;
  color: var(--ink); font-size: 4.2cqw; line-height: 1.35;
}
.screen__status { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 13cqw; padding: 0 9cqw; display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 3.6cqw; }
.screen__icons { display: flex; gap: 1.2cqw; }
.screen__icons i { width: 3.6cqw; height: 2.4cqw; border-radius: 0.6cqw; background: var(--ink); opacity: 0.85; }
.screen__icons i:last-child { width: 5.6cqw; }

.scr { position: absolute; inset: 0; padding: 21cqw 7cqw 8cqw; display: flex; flex-direction: column; align-items: center; text-align: center; }
.scr__step { font-size: 3.1cqw; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rose-ink); margin-bottom: 1.5cqw; }
.scr__title { font-family: var(--font-display); font-size: 6.4cqw; line-height: 1.2; font-weight: 560; font-variation-settings: "opsz" 48, "SOFT" 100; letter-spacing: -0.01em; margin-bottom: 5cqw; white-space: nowrap; }
.scr--upload .scr__title { margin-bottom: 1.5cqw; }
.scr__sub { font-size: 3.4cqw; color: var(--ink-soft); }
.scr__hint { margin-top: auto; font-size: 3.2cqw; color: var(--ink-soft); }
.scr__cta {
  margin-top: auto; width: 100%; padding: 3.8cqw 0; border-radius: 99px;
  background: var(--grad-cta); color: #fff; font-weight: 800; font-size: 3.8cqw;
  box-shadow: 0 3cqw 6cqw -3cqw rgba(217, 87, 122, 0.7);
}
.scr__actions { margin-top: auto; width: 100%; display: grid; gap: 2.4cqw; }
.scr__actions .scr__cta { margin-top: 0; }
.scr__ghost { padding: 3.4cqw 0; border-radius: 99px; background: rgba(255, 255, 255, 0.7); font-weight: 800; font-size: 3.6cqw; box-shadow: inset 0 0 0 1px var(--line); }

/* écran 1 : selfies + anneau de qualité */
.pair { display: flex; gap: 5cqw; margin-top: 7cqw; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 2cqw; }
.slot__bubble { position: relative; width: 36cqw; aspect-ratio: 1; }
.slot__bubble::before { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: #fff; box-shadow: 0 3cqw 6cqw -3cqw rgba(59, 43, 63, 0.35); }
.slot--a .slot__bubble::before { background: linear-gradient(160deg, #fff, #ffe3ea); }
.slot--b .slot__bubble::before { background: linear-gradient(160deg, #fff, #ece6ff); }
.slot__face { position: absolute; inset: 6%; width: 88%; height: 88%; border-radius: 50%; clip-path: circle(50%); }
.slot__ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.ring-track { fill: none; stroke: rgba(59, 43, 63, 0.1); stroke-width: 3.5; }
.ring-fill { fill: none; stroke: var(--success-ring); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.slot__name { font-weight: 800; font-size: 3.8cqw; }
.chip { display: inline-flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 2.6cqw 1.2cqw 1.8cqw; border-radius: 99px; font-size: 2.9cqw; font-weight: 800; white-space: nowrap; }
.chip svg { width: 3.4cqw; height: 3.4cqw; }
.chip--ok { background: #e2f5ec; color: #23744f; }
.chip--girl { background: var(--blush); color: var(--rose-ink); padding: 1.6cqw 3.4cqw; font-size: 3.2cqw; margin-top: 3cqw; }
.tips { margin-top: 6cqw; width: 100%; padding: 3.6cqw 4cqw; border-radius: 4cqw; background: rgba(255, 255, 255, 0.6); text-align: left; display: grid; gap: 1.6cqw; }
.tips p { position: relative; padding-left: 4.4cqw; font-size: 3cqw; color: var(--ink-soft); font-weight: 600; line-height: 1.3; }
.tips p::before { content: ""; position: absolute; left: 0; top: 0.9cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--grad-pair); }
.tips .tips__title { padding: 0; font-weight: 800; color: var(--ink); font-size: 3.3cqw; }
.tips .tips__title::before { display: none; }
.scr__consent { display: flex; align-items: center; gap: 2cqw; margin-top: 5cqw; font-size: 3.1cqw; font-weight: 700; color: var(--ink-soft); }
.tick { width: 5cqw; height: 5cqw; border-radius: 1.4cqw; background: var(--rose-deep); color: #fff; display: grid; place-items: center; }
.tick svg { width: 3.6cqw; height: 3.6cqw; }

/* écran 2 : tourbillon */
.genders { display: flex; gap: 1.6cqw; margin-top: -1cqw; }
.genders span { padding: 1.4cqw 3.2cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.7); font-size: 3cqw; font-weight: 800; color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--line); }
.genders .is-on { background: var(--ink); color: #fff; box-shadow: none; }
.fuse { position: relative; width: 74cqw; aspect-ratio: 1; margin-top: 2cqw; }
.fuse__swirl {
  position: absolute; inset: 4%; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(242, 132, 158, 0) 0deg, rgba(242, 132, 158, 0.55) 90deg, rgba(185, 166, 242, 0) 180deg, rgba(185, 166, 242, 0.55) 270deg, rgba(242, 132, 158, 0) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, #000 64%, transparent 70%);
  mask: radial-gradient(circle, transparent 28%, #000 30%, #000 64%, transparent 70%);
  opacity: 0.8;
}
.fuse__face { position: absolute; top: 50%; left: 50%; width: 34cqw; aspect-ratio: 1; margin: -17cqw 0 0 -17cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1.2cqw #fff, 0 3cqw 6cqw -2cqw rgba(59, 43, 63, 0.35); }
.fuse__face svg { width: 100%; height: 100%; }
.fuse__face--a { background: linear-gradient(160deg, #fff, #ffe3ea); transform: translateX(-19cqw); }
.fuse__face--b { background: linear-gradient(160deg, #fff, #ece6ff); transform: translateX(19cqw); }
.fuse__core { position: absolute; left: 50%; top: 50%; width: 40cqw; aspect-ratio: 1; margin: -20cqw 0 0 -20cqw; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 233, 199, 0.95) 22%, rgba(255, 201, 214, 0.6) 45%, transparent 70%); opacity: 0; }
.labor { position: relative; width: 100%; height: 6cqw; margin-top: 4cqw; }
.labor p { position: absolute; inset: 0; font-size: 3.5cqw; font-weight: 700; color: var(--ink); opacity: 0; }
.labor p:first-child { opacity: 1; }
.bar { width: 76%; height: 1.8cqw; margin-top: 4cqw; border-radius: 99px; background: rgba(59, 43, 63, 0.08); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-pair); transform-origin: 0 50%; transform: scaleX(0.47); }

/* écran 3–4 : bébé (persistant entre le teaser et la révélation) */
.baby-space { height: 50cqw; flex: none; }
.baby { position: absolute; left: 50%; top: 33.7cqw; width: 50cqw; aspect-ratio: 1; margin-left: -25cqw; opacity: 0; }
.baby__blur, .baby__sharp { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 40%, #fff 0%, #ffe3ea 60%, #e9dfff 100%); }
.baby__blur svg { width: 100%; height: 100%; filter: blur(2.6cqw) saturate(1.1); transform: scale(1.1); }
.baby__sharp { opacity: 0; box-shadow: 0 0 0 1.4cqw #fff, 0 4cqw 10cqw -3cqw rgba(217, 87, 122, 0.55); }
.baby__sharp svg { width: 100%; height: 100%; }
.baby__dash { position: absolute; inset: -3.2cqw; border-radius: 50%; border: 0.7cqw dashed rgba(217, 87, 122, 0.55); animation: orbit 18s linear infinite; }
.baby__lock { position: absolute; left: 50%; top: 50%; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.85); color: var(--rose-ink); box-shadow: 0 2cqw 5cqw -2cqw rgba(178, 58, 94, 0.55); animation: lock-pulse 1.8s ease-in-out infinite; }
.baby__lock svg { width: 7cqw; height: 7cqw; }
@keyframes lock-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst svg { position: absolute; left: 50%; top: 50%; width: 7cqw; height: 7cqw; margin: -3.5cqw 0 0 -3.5cqw; fill: var(--rose); opacity: 0; }
.burst svg:nth-child(3n) { fill: var(--lilac); }
.burst svg:nth-child(4n) { fill: var(--rose-deep); width: 5cqw; height: 5cqw; }
.burst svg:nth-child(5n) { fill: var(--petal); width: 9cqw; height: 9cqw; }
.baby__flash { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 233, 199, 0.6) 30%, transparent 65%); opacity: 0; pointer-events: none; }
.traits { list-style: none; padding: 0; margin: 4cqw 0 0; width: 100%; display: grid; gap: 1.8cqw; text-align: left; }
.traits li { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw 3.4cqw; border-radius: 3cqw; background: rgba(255, 255, 255, 0.72); font-size: 3.3cqw; font-weight: 600; }
.traits li b { font-weight: 800; }
.traits li.is-locked { color: var(--ink-soft); background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 1px rgba(59, 43, 63, 0.08); }
.traits li svg { width: 4cqw; height: 4cqw; color: var(--rose-ink); }
.scr--reveal .scr__sub { margin-top: 4cqw; font-size: 3cqw; max-width: 80%; }

/* états sans JS : écran 3 (teaser) affiché de façon statique */
.scr--upload, .scr--fusion, .scr--reveal { opacity: 0; visibility: hidden; }
.scr--teaser { opacity: 1; }
.baby { opacity: 1; }

/* Étapes */
.steps { position: relative; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.step__num { font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--rose-ink); font-variation-settings: "opsz" 24; letter-spacing: 0.04em; margin-bottom: 10px; }
.step__title { font-size: var(--fs-h3); font-weight: 500; margin-bottom: 12px; }
.step__text { color: var(--ink-soft); max-width: 46ch; }
.step__aside { margin-top: 14px; display: inline-block; padding: 8px 14px; border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); font-size: var(--fs-small); font-weight: 700; color: var(--ink); }
.steps__rail { display: none; }

html.motion .steps { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
html.motion .steps__rail { display: block; position: relative; width: 2px; height: min(46vh, 360px); border-radius: 2px; background: rgba(59, 43, 63, 0.1); overflow: hidden; }
html.motion .steps__rail-fill { position: absolute; inset: 0; background: var(--grad-pair); transform-origin: 50% 0; transform: scaleY(0); }
html.motion .steps__list { display: grid; grid-template-areas: "s"; gap: 0; }
html.motion .step { grid-area: s; opacity: 0; }
html.motion .step:first-child { opacity: 1; }
html.motion .step__title { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; margin-bottom: 18px; }
html.motion .step__num { font-size: 1.1rem; }
html.motion .step__num::after { content: " / 04"; color: var(--ink-soft); opacity: 0.7; }
html.motion .step__text { font-size: var(--fs-lead); line-height: 1.5; }

@media (max-width: 899px) {
  html.motion .how__track { height: 380vh; }
  html.motion .how__pin { align-items: stretch; padding-top: 84px; padding-bottom: 20px; }
  html.motion .how__grid { grid-template-rows: auto 1fr; gap: 18px; align-items: start; height: 100%; }
  html.motion .phone__frame { height: min(50svh, 470px); }
  html.motion .steps { grid-template-columns: 1fr; text-align: center; align-items: start; }
  html.motion .steps__rail { display: none; }
  html.motion .step__title { font-size: clamp(1.6rem, 1rem + 3vw, 2.4rem); margin-bottom: 8px; }
  html.motion .step__text { font-size: 1rem; margin-inline: auto; }
  html.motion .step__num { margin-bottom: 4px; }
  html.motion .step__aside { display: none; }
  .how__grid { justify-items: center; }
  .steps { width: 100%; }
}
@media (max-width: 899px) and (max-height: 700px) {
  html.motion .phone__frame { height: 44svh; }
  html.motion .step__text { font-size: 0.95rem; line-height: 1.5; }
}

/* =====================================================================
   4. RESSEMBLANCES
   ===================================================================== */
.traits-sec { padding: var(--sec-pad) 0; }
.bento { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .bento { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: minmax(0, auto); }
  .tcard--eyes { grid-column: 1 / span 5; }
  .tcard--smile { grid-column: 6 / span 4; }
  .tcard--color { grid-column: 10 / span 3; }
  .tcard--locked { grid-column: 1 / -1; }
}
.tcard {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--r-lg);
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 24px 60px -36px rgba(59, 43, 63, 0.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.tcard:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #fff, 0 34px 70px -34px rgba(217, 87, 122, 0.45); }
.tcard__art { height: 72px; margin-bottom: 18px; }
.tcard__art svg { height: 100%; width: auto; overflow: visible; }
.draw path, .draw circle, .draw rect { fill: none; stroke: var(--rose-deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tcard--eyes .draw path, .tcard--eyes .draw circle { stroke: var(--lilac-deep); }
.draw .fill { fill: var(--lilac-deep); stroke: none; }
.tcard__label { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; }
.tcard__value { margin-top: 6px; font-family: var(--font-display); font-size: clamp(4rem, 2.4rem + 4.6vw, 7.5rem); line-height: 0.95; font-weight: 400; letter-spacing: -0.04em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.tcard__unit { font-size: 0.42em; letter-spacing: 0; color: var(--ink-soft); }
.tcard__value--word { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem); font-style: italic; color: #8a5a2b; margin-bottom: 16px; }
.tcard__who { margin-top: 6px; font-size: 1.1rem; color: var(--ink-soft); }
.who { font-weight: 800; }
.who--a { color: var(--rose-ink); }
.who--b { color: #6a52c4; }
.gauge { margin-top: 22px; height: 10px; border-radius: 99px; background: rgba(59, 43, 63, 0.08); overflow: hidden; }
.gauge span { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.gauge--a span { background: linear-gradient(90deg, #f7a3b8, #d9577a); }
.gauge--b span { background: linear-gradient(90deg, #d6c8ff, #8b73e0); }

.tcard--color { display: grid; gap: 22px; align-content: start; }
.iris { position: relative; width: 112px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #3b2414 0 22%, #6b4421 24%, #a5753f 46%, #c99a5b 64%, #7a5530 80%, #4a301b 100%); box-shadow: 0 0 0 8px #fff, 0 18px 40px -14px rgba(122, 85, 48, 0.6); }
.iris__ring { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 233, 199, 0.18) 0 4deg, transparent 4deg 11deg); -webkit-mask: radial-gradient(circle, transparent 26%, #000 30%, #000 74%, transparent 78%); mask: radial-gradient(circle, transparent 26%, #000 30%, #000 74%, transparent 78%); animation: orbit 40s linear infinite; }
.iris__pupil { position: absolute; inset: 34%; border-radius: 50%; background: #1d1121; }
.iris__shine { position: absolute; left: 56%; top: 26%; width: 16%; height: 16%; border-radius: 50%; background: #fff; opacity: 0.9; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.swatches li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.6); font-size: var(--fs-micro); font-weight: 700; color: var(--ink-soft); }
.swatches li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
.swatches li.is-on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px #a5753f; }

.tcard--locked { display: flex; flex-direction: column; gap: 18px; background: rgba(255, 255, 255, 0.36); }
@media (min-width: 700px) { .tcard--locked { grid-column: 1 / -1; } }
@media (min-width: 1080px) { .tcard--locked { flex-direction: row; align-items: center; justify-content: space-between; } }
.tcard--locked .tcard__label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.tcard__lock { width: 20px; height: 20px; color: var(--rose-ink); }
.blurred { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.blurred li { display: inline-flex; gap: 10px; padding: 10px 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.7); font-weight: 700; font-size: var(--fs-small); color: var(--ink); }
.blurred li span:last-child { filter: blur(5px); color: var(--rose-ink); user-select: none; }

/* =====================================================================
   5. AUTRES VERSIONS
   ===================================================================== */
.versions { padding: var(--sec-pad) 0; overflow: clip; }
.versions__head { display: grid; gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.versions__head h2 { font-size: var(--fs-h2); }
.versions__head .lead { max-width: 52ch; }
@media (min-width: 900px) { .versions__head { grid-template-columns: 1fr 1fr; gap: 64px; } }
.versions__viewport { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.versions__viewport::-webkit-scrollbar { display: none; }
.versions__track {
  display: flex; gap: clamp(14px, 1.6vw, 24px); list-style: none; margin: 0;
  padding: 8px max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) 24px;
  width: max-content;
}
.vcard {
  scroll-snap-align: center;
  position: relative; flex: none;
  width: clamp(250px, 26vw, 380px); aspect-ratio: 3 / 4;
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 30px 60px -36px rgba(59, 43, 63, 0.45);
  /* Pas de transition sur transform : GSAP déplace ces cartes au scroll (et à l'entrée). */
  transition: box-shadow var(--dur-3) var(--ease-out);
}
.vcard:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 40px 80px -30px rgba(217, 87, 122, 0.45); }
.vcard--gender { background: linear-gradient(160deg, #ffe3ea 0%, #ece6ff 100%); }
.vcard--5 { background: linear-gradient(160deg, #ffe7d8 0%, #ffd0dc 100%); }
.vcard--10 { background: linear-gradient(160deg, #f0e9ff 0%, #ffd9e4 100%); }
.vcard--teen { background: linear-gradient(160deg, #e6ddfb 0%, #c9b8f5 100%); }
.vcard--family { background: linear-gradient(160deg, #fff1e8 0%, #ffd9e4 55%, #e6ddfb 100%); }
.vcard--pack { background: var(--night); color: var(--night-ink); }
.vcard__art { position: relative; flex: 1; display: grid; place-items: center; }
.vcard__art::before { content: ""; position: absolute; left: 14%; right: 14%; top: 12%; bottom: 4%; border-radius: 999px 999px 28px 28px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.vcard__face { position: relative; width: 66%; height: auto; }
.vcard--5 .vcard__face { width: 58%; }
.vcard--10 .vcard__face { width: 64%; }
.vcard--teen .vcard__face { width: 68%; }
.vcard--gender .vcard__face { position: absolute; width: 46%; top: 30%; }
.vcard__face--l { left: 12%; }
.vcard__face--r { right: 12%; filter: hue-rotate(-24deg) saturate(0.9); }
.vcard--family .vcard__face { position: absolute; }
.vcard__face--p1 { width: 44%; left: 10%; top: 22%; }
.vcard__face--p2 { width: 44%; right: 10%; top: 22%; }
.vcard__face--k { width: 40%; left: 30%; top: 46%; }
.vcard__body { position: relative; padding: 0 24px 24px; }
.vcard__tag { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #7a2846; }
.vcard__title { margin-top: 6px; font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem); font-weight: 500; color: var(--ink); }
.pack { padding: 32px 28px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background: radial-gradient(90% 60% at 80% 10%, rgba(242, 132, 158, 0.4), transparent 70%), radial-gradient(80% 60% at 10% 30%, rgba(185, 166, 242, 0.35), transparent 70%); }
.pack .eyebrow { color: var(--petal); }
.pack__price { margin-top: 12px; font-family: var(--font-display); font-size: clamp(3.4rem, 2.6rem + 2vw, 4.6rem); line-height: 1; letter-spacing: -0.03em; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; color: #fff; }
.pack__text { margin-top: 14px; font-weight: 800; color: var(--night-ink); }
.pack__small { margin-top: 10px; font-size: var(--fs-small); color: var(--night-soft); }
.versions__progress { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.versions__bar { position: relative; flex: 1; max-width: 240px; height: 2px; border-radius: 2px; background: rgba(59, 43, 63, 0.12); overflow: hidden; }
.versions__bar span { position: absolute; inset: 0; background: var(--grad-pair); transform-origin: 0 50%; transform: scaleX(0.15); }
.versions__hint { font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }

@media (min-width: 900px) {
  html.motion .versions { padding: 0; }
  html.motion .versions__pin { height: var(--svh); display: flex; flex-direction: column; justify-content: center; padding-top: 80px; }
  html.motion .versions__viewport { overflow: visible; scroll-snap-type: none; }
  html.motion .versions__track { will-change: transform; }
  html.motion .vcard { width: clamp(250px, min(24vw, 40vh), 380px); }
}
@media (max-width: 899px) { .versions__hint { display: none; } }

/* =====================================================================
   6. CONFIANCE
   ===================================================================== */
.trust { padding: var(--sec-pad) 0; }
.trust__grid { display: grid; gap: 56px; }
@media (min-width: 980px) {
  .trust__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(56px, 7vw, 120px); align-items: start; }
  .trust__intro { position: sticky; top: 18vh; }
}
.trust__intro h2 { font-size: var(--fs-h2); }
.trust__intro .lead { margin-top: 22px; max-width: 44ch; }
.breath { position: relative; width: 132px; height: 92px; margin-bottom: 36px; }
.breath span { position: absolute; border-radius: 50%; }
.breath__a, .breath__b { top: 6px; width: 80px; height: 80px; box-shadow: 0 0 0 4px var(--cream); }
.breath__a { left: 4px; background: linear-gradient(135deg, #ffc2d2, #f2849e); animation: breathe-a 4.6s var(--ease-in-out) infinite; }
.breath__b { right: 4px; background: linear-gradient(135deg, #e2d8ff, #b9a6f2); opacity: 0.94; animation: breathe-b 4.6s var(--ease-in-out) infinite; }
.breath__core { left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; background: #fff; display: grid; place-items: center; box-shadow: 0 6px 20px -6px rgba(217, 87, 122, 0.5); }
.breath__core svg { width: 24px; height: 24px; fill: var(--rose-deep); }
@keyframes breathe-a { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes breathe-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.promises { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) and (max-width: 979px) { .promises { grid-template-columns: 1fr 1fr; } }
.promise {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  padding: 24px 26px; border-radius: var(--r-md);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line);
  transition: background-color var(--dur-3), transform var(--dur-3) var(--ease-out);
}
.promise:hover { background: var(--glass-strong); transform: translateX(4px); }
.promise__icon { width: 46px; height: 46px; }
.promise__icon path, .promise__icon circle, .promise__icon rect { stroke-width: 2; }
.promise h3 { font-family: var(--font-body); font-size: 1.12rem; font-weight: 800; letter-spacing: 0; line-height: 1.3; margin-bottom: 6px; }
.promise p { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

/* =====================================================================
   7. PRIX
   ===================================================================== */
.pricing { padding: var(--sec-pad) 0; }
.plans { display: grid; gap: 18px; max-width: 1120px; margin-inline: auto; }
@media (min-width: 900px) { .plans { grid-template-columns: 1.15fr 1fr 1fr; align-items: stretch; } }
.plan {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line), 0 24px 60px -40px rgba(59, 43, 63, 0.4);
  display: flex; flex-direction: column;
}
.plan--best { background: transparent; box-shadow: 0 40px 80px -40px rgba(217, 87, 122, 0.6); }
.plan--best::before { /* bordure lumineuse tournante (transform uniquement) */
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, #f7a3b8, #b9a6f2, #ffe9c7, #f2849e, #f7a3b8);
  animation: orbit 7s linear infinite;
}
.plan--best::after { content: ""; position: absolute; z-index: -1; inset: 2px; border-radius: calc(var(--r-lg) - 2px); background: linear-gradient(170deg, #fffaf8 0%, #fff0f4 100%); }
.plan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.plan__name { font-family: var(--font-body); font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.plan__badge { padding: 6px 12px; border-radius: 99px; background: var(--grad-cta); color: #fff; font-size: var(--fs-micro); font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; }
.plan__badge { background: var(--rose-ink); }
.plan__badge--soft { background: var(--lavender); color: #4f3a99; }
.plan__price { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan__amount { font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 2.2vw, 4rem); line-height: 1; letter-spacing: -0.03em; font-weight: 450; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 0; font-variant-numeric: tabular-nums; }
.plan__per { font-weight: 700; color: var(--ink-soft); }
.plan__eq { margin-top: 8px; font-weight: 800; color: var(--rose-ink); }
.plan:not(.plan--best) .plan__eq { color: var(--ink-soft); font-weight: 700; }
.plan__list { list-style: none; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan__list li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-weight: 600; }
.plan__list svg { width: 20px; height: 20px; margin-top: 3px; color: var(--rose-deep); }
.plan__list li.is-note { display: block; font-weight: 500; font-size: var(--fs-small); color: var(--ink-soft); }

/* =====================================================================
   8. FAQ
   ===================================================================== */
.faq { padding: var(--sec-pad) 0; }
.faq__grid { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .faq__grid { grid-template-columns: 0.8fr 1.2fr; gap: clamp(56px, 7vw, 120px); align-items: start; }
  .faq__head { position: sticky; top: 18vh; }
}
.faq__head h2 { font-size: var(--fs-h2); }
.faq__contact { margin-top: 24px; color: var(--ink-soft); }
.faq__contact a { color: var(--rose-ink); font-weight: 800; }
.accordion { display: grid; gap: 12px; }
.acc { border-radius: var(--r-md); background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-line); transition: background-color var(--dur-3), box-shadow var(--dur-3); }
.acc.is-open { background: var(--glass-strong); box-shadow: inset 0 0 0 1px #fff, 0 20px 50px -34px rgba(217, 87, 122, 0.5); }
.acc__h { font-family: var(--font-body); font-size: inherit; line-height: inherit; letter-spacing: 0; font-weight: inherit; }
.acc__btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; text-align: left;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 800; color: var(--ink);
  border-radius: var(--r-md);
}
.acc__btn:focus-visible { outline-offset: -3px; }
.acc__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--blush); transition: background-color var(--dur-3), transform var(--dur-3) var(--ease-out); }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--rose-ink); transition: transform var(--dur-3) var(--ease-out), background-color var(--dur-3); }
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__icon { background: var(--rose-ink); transform: rotate(180deg); }
.acc__btn[aria-expanded="true"] .acc__icon::before, .acc__btn[aria-expanded="true"] .acc__icon::after { background: #fff; }
.acc__btn[aria-expanded="true"] .acc__icon::after { transform: rotate(0deg); }
.acc__btn:hover .acc__icon { transform: scale(1.08); }
.acc__btn[aria-expanded="true"]:hover .acc__icon { transform: rotate(180deg) scale(1.08); }
.acc__panel { display: grid; grid-template-rows: 1fr; }
html.js .acc__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3); }
html.js .acc.is-open .acc__panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s; }
.acc__inner { overflow: hidden; min-height: 0; }
.acc__inner p { padding: 0 24px 24px; color: var(--ink-soft); max-width: 64ch; }
html.js .acc__inner p { opacity: 0; transform: translateY(-6px); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-out); }
html.js .acc.is-open .acc__inner p { opacity: 1; transform: none; transition-delay: 80ms; }
.acc__inner a { color: var(--rose-ink); font-weight: 700; }

/* =====================================================================
   9. FINAL
   ===================================================================== */
.finale { padding: 0 0 var(--sec-pad); text-align: center; }
.finale__dusk { height: 46vh; }
html.motion .finale__dusk { height: 75vh; }
.finale__inner { display: flex; flex-direction: column; align-items: center; }
.beat { position: relative; width: clamp(170px, 18vw, 240px); aspect-ratio: 1.55; margin-bottom: 36px; }
.beat__orb { position: absolute; top: 0; height: 100%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.92), 0 20px 60px -10px rgba(242, 132, 158, 0.55); }
.beat__orb--a { left: 0; background: linear-gradient(135deg, #ffc2d2, #f2849e); }
.beat__orb--b { right: 0; background: linear-gradient(135deg, #e2d8ff, #b9a6f2); opacity: 0.94; }
.beat__ring { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid rgba(255, 201, 214, 0.5); animation: ring 1.714s var(--ease-out) infinite; }
@keyframes ring { from { scale: 0.5; opacity: 0.9; } to { scale: 1.5; opacity: 0; } }
.beat__heart { position: absolute; left: 50%; top: 50%; width: 34%; height: auto; translate: -50% -46%; fill: #fff; filter: drop-shadow(0 0 16px rgba(255, 233, 199, 0.8)); animation: heartbeat 0.857s ease-in-out infinite; }
.finale__title { font-size: var(--fs-mega); font-weight: 380; line-height: 0.9; letter-spacing: -0.045em; color: var(--night-ink); }
.finale__title em { color: var(--rose); }
.finale__lead { margin: 26px auto 40px; max-width: 34ch; font-size: var(--fs-lead); color: var(--night-soft); }

/* Pied de page : compléments */
.footer { z-index: 1; }
.footer__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--cream) !important; font-variation-settings: "opsz" 48, "SOFT" 100, "WONK" 1; }
.footer__brand img { width: 46px; height: auto; }
.footer__tagline { margin-top: 16px; max-width: 34ch; }
.footer__legal p { margin: 0; }
.footer__wordmark { padding-bottom: 0.08em; }

/* =====================================================================
   Révélations (états initiaux, uniquement sous html.js.motion)
   ===================================================================== */
html.motion:not(.is-ready) .hero__content > *,
html.motion:not(.is-ready) .scroll-cue { opacity: 0; }
html.motion:not(.is-ready) [data-reveal-title] { visibility: hidden; }
html.motion .is-split .line-mask, html.motion .is-split .word-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; padding-right: 0.08em; margin-right: -0.08em; }

/* Mouvement réduit : tout est visible, pas d'épinglage */
html.reduced .scr--teaser { opacity: 1; }

/* Impression */
@media print {
  .sky, .grain, .intro, .cursor, .stage, .nav { display: none !important; }
  html.motion .hero, html.motion .manifesto, html.motion .how__track { height: auto !important; }
}

/* =====================================================================
   Appareils tactiles : même rendu, sans les effets coûteux au scroll
   (grain en mode de fusion plein écran, flous d'arrière-plan, grosse
   ombre de texte repeinte à chaque image).
   ===================================================================== */
@media (hover: none), (pointer: coarse) {
  .grain { display: none; }
  .btn--glass, .hero__eyebrow { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(29, 17, 33, 0.72); }
  .tcard { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.86); }
  .hero__title { text-shadow: 0 2px 16px rgba(18, 10, 21, 0.4); }
  /* Calques dédiés : le scroll ne déplace que des textures déjà rendues */
  html.motion .hero__content, html.motion .manifesto__night, html.motion .manifesto__dawn { will-change: transform, opacity; }
}