/* Lizyair, le site. DA « Clairière » : ivoire, vert forêt, sauge ; accents chauds « Aube » pour les chiffres et les mots forts.
   Le violet (--support) est réservé au bouton « J'ai envie de fumer » et à la séance d'envie. */

@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 400 600; font-display: swap;
  src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+A720-A7FF; }

:root {
  color-scheme: light;
  --ivoire: #F5F4EC;
  --ivoire-2: #EFEADF;
  --surface: #FFFFFF;
  --texte: #213D36;
  --texte-2: #52675F;
  --primaire: #285E4A;
  --sauge: #9BD4AD;
  --foret: #213D36;
  --nuit: #14201C;
  --nuit-2: #1B2C25;
  --sur-foret: #F5F4EC;
  --sur-foret-2: #C3D2C6;
  --support: #5A428A;          /* réservé à l'envie */
  --support-clair: #D4BFFF;
  --support-teinte: #ECE6F5;
  --accent: #D4622F;
  --accent-clair: #FF9A66;
  --or: #B27A0C;
  --or-clair: #F2C14E;
  --aube-1: #F6B85C;
  --aube-2: #F0874C;
  --bordure: #62796E;
  --separateur: #DDE5DB;
  --rayon: 28px;
  --rayon-s: 18px;
  --gouttiere: clamp(16px, 5vw, 48px);
  --max: 1180px;
  --police: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-mot: "Fraunces", Georgia, "Times New Roman", serif;
  --ressort: cubic-bezier(.2, .9, .25, 1);
  --doux: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ivoire); color: var(--texte);
  font-family: var(--police); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--primaire); text-underline-offset: .18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--texte); }
:focus-visible { outline: 3px solid var(--aube-2); outline-offset: 3px; border-radius: 6px; }
button { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; font-weight: 850; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 800; letter-spacing: -.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
em.mot, .mot { font-family: var(--police-mot); font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--accent); }
.sombre em.mot, .sombre .mot { color: var(--accent-clair); }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--foret); color: var(--ivoire); padding: 10px 16px; border-radius: 12px; font-weight: 800; }
.evitement:focus { top: 12px; }

.conteneur { width: min(var(--max), 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.section { padding-block: clamp(80px, 12vw, 160px); position: relative; }
.sombre { background: var(--foret); color: var(--sur-foret); }
.sombre a { color: var(--sauge); }
.sombre .sous { color: var(--sur-foret-2); }
.surtitre {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-size: .82rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--primaire);
}
.surtitre::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.sombre .surtitre { color: var(--sauge); }
.sous { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--texte-2); max-width: 38em; }
.chiffre { font-variant-numeric: tabular-nums; }

/* ---------- Boutons ---------- */
.bouton {
  --fond: var(--primaire); --encre: var(--ivoire);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 26px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--fond); color: var(--encre); font-weight: 850; font-size: 1.02rem; text-decoration: none;
  transition: transform .35s var(--ressort), box-shadow .35s var(--doux), background .25s;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -12px rgba(33,61,54,.55);
}
.bouton:hover { color: var(--encre); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 16px 30px -12px rgba(33,61,54,.6); }
.bouton:active { transform: translateY(0) scale(.98); }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton-clair { --fond: var(--ivoire); --encre: var(--foret); }
.bouton-fantome { --fond: transparent; --encre: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.bouton-fantome:hover { box-shadow: inset 0 0 0 1.5px currentColor; color: inherit; }
.bouton-envie { --fond: var(--support); --encre: #fff; box-shadow: 0 18px 40px -14px rgba(90,66,138,.7); }

.stores-boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 18px;
  border-radius: 16px; background: #0F1A16; color: #fff; text-decoration: none; line-height: 1.15;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 26px -14px rgba(0,0,0,.6);
  transition: transform .35s var(--ressort), background .25s;
}
.store-btn:hover { color: #fff; transform: translateY(-2px); background: #000; }
.store-btn svg { width: 26px; height: 26px; flex: none; }
.store-btn small { display: block; font-size: .72rem; font-weight: 700; opacity: .85; letter-spacing: .02em; }
.store-btn b { display: block; font-size: 1.08rem; font-weight: 850; }
.store-btn.clair { background: var(--ivoire); color: var(--foret); }
.store-btn.clair:hover { background: #fff; color: var(--foret); }
.mention-stores { font-size: .9rem; color: var(--texte-2); margin-top: 14px; }
.sombre .mention-stores { color: var(--sur-foret-2); }

/* ---------- En-tête ---------- */
.entete-site {
  position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px var(--gouttiere) 0;
  transition: transform .5s var(--ressort);
}
.entete-site.cache { transform: translateY(-110%); }
.nav {
  display: flex; align-items: center; gap: 16px; max-width: 1280px; margin: 0 auto; height: 60px; padding: 0 10px 0 18px;
  border-radius: 999px; color: var(--ivoire);
  transition: background .4s var(--doux), box-shadow .4s, color .3s, height .4s var(--ressort);
}
.entete-site.compact .nav, .entete-site.ouvert .nav {
  background: rgba(20, 32, 28, .72); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: 0 0 0 1px rgba(245,244,236,.08) inset, 0 12px 30px -18px rgba(0,0,0,.6); height: 56px;
}
.entete-site.clair.compact .nav { background: rgba(245, 244, 236, .82); color: var(--foret); box-shadow: 0 0 0 1px rgba(33,61,54,.08) inset, 0 12px 30px -18px rgba(33,61,54,.35); }
.page-texte .entete-site .nav { color: var(--foret); }
.page-texte .entete-site.compact .nav { background: rgba(245, 244, 236, .86); }
.marque { display: inline-flex; align-items: center; color: inherit; text-decoration: none; flex: none; }
.marque { padding: 0 6px 0 8px; }
.marque svg { height: 30px; width: auto; transform: translateY(3px); }
.liens { position: relative; display: none; gap: 2px; margin-left: auto; }
.liens a {
  position: relative; z-index: 1; padding: 8px 14px; border-radius: 999px; color: inherit; text-decoration: none;
  font-weight: 750; font-size: .95rem; opacity: .86; transition: opacity .2s;
}
.liens a:hover, .liens a.actif { opacity: 1; color: inherit; }
.curseur {
  position: absolute; top: 0; left: 0; height: 100%; border-radius: 999px; background: currentColor; opacity: 0;
  transition: transform .45s var(--ressort), width .45s var(--ressort), opacity .3s; pointer-events: none;
}
.liens .curseur { background: rgba(155, 212, 173, .2); }
.entete-site.clair .liens .curseur, .page-texte .liens .curseur { background: rgba(40, 94, 74, .12); }
.nav-droite { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.liens + .nav-droite { margin-left: 8px; }
.stores { position: relative; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--ivoire); color: var(--foret); font-weight: 850; font-size: .95rem;
  transition: transform .3s var(--ressort), background .2s;
}
.entete-site.clair .nav-cta, .page-texte .nav-cta { background: var(--primaire); color: var(--ivoire); }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta .chevron { width: 12px; height: 12px; transition: transform .3s var(--ressort); }
.stores.ouvert .chevron { transform: rotate(180deg); }
.stores-choix {
  position: absolute; right: 0; top: calc(100% + 10px); width: 250px; padding: 8px; border-radius: 22px;
  background: var(--surface); color: var(--texte); box-shadow: 0 24px 60px -20px rgba(20,32,28,.45), 0 0 0 1px rgba(33,61,54,.08);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity .25s, transform .35s var(--ressort);
}
.stores.ouvert .stores-choix { opacity: 1; transform: none; pointer-events: auto; }
.stores-choix a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; line-height: 1.2; }
.stores-choix a:hover { background: var(--ivoire-2); color: inherit; }
.stores-choix svg { width: 24px; height: 24px; flex: none; }
.stores-choix b { display: block; font-weight: 850; }
.stores-choix small { color: var(--texte-2); font-weight: 700; }
.menu-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: inherit;
}
.menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ressort); grid-area: 1 / 1; }
.menu-btn span:first-child { transform: translateY(-4px); }
.menu-btn span:last-child { transform: translateY(4px); }
.entete-site.ouvert .menu-btn span:first-child { transform: rotate(45deg); }
.entete-site.ouvert .menu-btn span:last-child { transform: rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: -1; padding: 110px var(--gouttiere) 40px; background: var(--nuit);
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  opacity: 0; transition: opacity .35s var(--doux);
}
.entete-site.ouvert .menu { opacity: 1; }
.menu a:not(.store-btn) {
  color: var(--ivoire); text-decoration: none; font-size: 1.9rem; font-weight: 850; letter-spacing: -.02em; padding: 6px 0;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--doux), transform .6s var(--ressort);
  transition-delay: calc(var(--i) * 45ms + 80ms);
}
.menu .stores-boutons { margin-top: 24px; opacity: 0; transition: opacity .5s .4s; }
.entete-site.ouvert .menu a, .entete-site.ouvert .menu .stores-boutons { opacity: 1; transform: none; }
.entete-site.ouvert .nav { color: var(--ivoire); }
@media (min-width: 980px) {
  .liens { display: flex; }
  .menu-btn, .menu { display: none !important; }
}

/* ---------- La traversée (accueil) ---------- */
.traversee { position: relative; height: 560vh; background: var(--nuit); }
.colle { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.colle::after { content: ""; position: absolute; inset: auto 0 0; height: 40vh; background: linear-gradient(rgba(245,244,236,0), var(--ivoire)); opacity: var(--fin, 0); pointer-events: none; }
/* La scène HD en plans : ciel, montagnes, sol (le « maître », dont on ne garde que la terre), brumes, rideaux de sapins.
   Au défilement, la caméra suit un marcheur sur le sentier : chaque plan avance à sa vitesse, d'où la perspective. */
.scene { position: absolute; inset: 0; overflow: hidden; }
.toile { position: absolute; left: 50%; top: 50%; width: max(100vw, 150svh); aspect-ratio: 3 / 2; translate: -50% -50%; }
@media (max-aspect-ratio: 1/1) { .toile { width: max(100vw, 66.667svh); aspect-ratio: 2 / 3; } }
.plan { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.plan > picture, .plan > picture img, .ciel > picture, .ciel > picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ciel .ciel-jour { opacity: var(--jour, 0); }
.ciel .lune { position: absolute; left: 22%; top: 12%; width: 8%; inset: auto; opacity: calc(1 - var(--jour, 0) * 1.4); translate: 0 calc(var(--jour, 0) * 170%); will-change: transform, opacity; }
.ciel .lune img { width: 100%; height: auto; position: static; }
@media (max-aspect-ratio: 1/1) { .ciel .lune { left: 18%; top: 10%; width: 14%; } }
.astre { position: absolute; will-change: transform, opacity; left: 69.2%; top: 24%; width: 5%; aspect-ratio: 1; translate: -50% calc(-50% + (1 - var(--jour, 0)) * 380%); border-radius: 50%;
  background: #FFF3D6; box-shadow: 0 0 0 1.2vmax rgba(255,243,214,.25), 0 0 6vmax 2vmax rgba(246,184,92,.55), 0 0 18vmax 8vmax rgba(240,135,76,.22);
  opacity: calc(var(--jour, 0) * 1.3); }
@media (max-aspect-ratio: 1/1) { .astre { left: 69.1%; top: 18.1%; width: 7%; } }
/* La nuit : un seul voile, au-dessus du paysage et sous les rideaux ; transparent sur le ciel (qui a sa propre version de nuit). */
.nuit { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(10,20,34,0) 18%, rgba(10,20,34,.62) 42%, rgba(9,22,20,.7)); opacity: calc(1 - var(--jour, 0)); }
/* Du maître, on ne garde que la terre : la ligne d'horizon passe sous les montagnes. */
.brume { pointer-events: none; }
.plan.brume > picture { inset: 0 -25%; width: 150%; }
.plan.brume > picture img { inset: 0; width: 100%; }
.brume.b1 { animation: derive 38s ease-in-out infinite alternate; }
.brume.b2 { animation: derive 46s ease-in-out -12s infinite alternate-reverse; }
.brume.b3 { animation: derive 54s ease-in-out -20s infinite alternate; }
@keyframes derive { from { translate: -3% 0; } to { translate: 3% 0; } }
.sentier-or { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sentier-or .guide { fill: none; stroke: none; }
.sentier-or .trace { fill: none; stroke: url(#or-sentier); stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sentier-or .borne { fill: rgba(245,244,236,.55); stroke: rgba(33,61,54,.5); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill .4s; }
.sentier-or .borne.passee { fill: #F6B85C; stroke: #FFF3D6; }
/* Le marcheur : un point de lumière qui avance sur le sentier. */
.marcheur { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: #FFF6E3; border: 3px solid #F0874C; box-shadow: 0 0 0 8px rgba(246,184,92,.28), 0 0 24px 6px rgba(246,184,92,.55); opacity: var(--rail, 0); will-change: transform; }
.marcheur i { position: absolute; inset: -14px; border-radius: 50%; border: 2px solid rgba(246,184,92,.6); animation: pouls 2.2s ease-out infinite; }
@keyframes pouls { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.borne-etiquette { position: absolute; left: 0; top: 0; margin: 0; padding: 8px 14px; border-radius: 14px; pointer-events: none; white-space: nowrap;
  background: rgba(20,38,31,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #F5F4EC; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  display: grid; gap: 1px; opacity: var(--rail, 0); will-change: transform; transition: opacity .3s; }
.borne-etiquette b { font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #F6B85C; }
.borne-etiquette span { font-size: .95rem; font-weight: 800; }
.calque { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.calque img { width: 100%; height: 100%; object-fit: cover; display: block; }
.calque.foret { will-change: transform; }
/* Ouverture : la forêt dense s'efface pendant que les deux rideaux à branches s'écartent en grandissant (on passe entre les arbres).
   Ensuite ils restent au premier plan, au bord de l'image, et glissent plus vite que le paysage pendant la marche. */
.foret.fermee { opacity: var(--fermee, 1); }
.foret.g, .foret.d { will-change: transform; }
.foret.g { transform: translate3d(calc(var(--ouverture, 0) * -70% - var(--marche, 0) * 30%), 0, 0) scale(calc(1.5 + var(--ouverture, 0) * .2 + var(--marche, 0) * .35)); transform-origin: 0 80%; }
.foret.d { transform: translate3d(calc(var(--ouverture, 0) * 70% + var(--marche, 0) * 30%), 0, 0) scale(calc(1.5 + var(--ouverture, 0) * .2 + var(--marche, 0) * .35)); transform-origin: 100% 80%; }
.lucioles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scrim { position: absolute; inset: 0; pointer-events: none; background:
  radial-gradient(120% 70% at 50% 42%, rgba(10,20,18,.62), rgba(10,20,18,.15) 70%),
  linear-gradient(rgba(10,20,18,.55), transparent 22%);
  opacity: calc(1 - var(--ecart, 0)); }

.panneaux { position: absolute; inset: 0; pointer-events: none; }
.panneau {
  position: absolute; left: 0; right: 0; margin-inline: auto; width: min(560px, 100% - 2 * var(--gouttiere));
  bottom: max(96px, 12svh); padding: 26px 26px 24px; border-radius: var(--rayon);
  background: rgba(245, 244, 236, .94); color: var(--texte);
  box-shadow: 0 30px 60px -30px rgba(10, 20, 18, .55);
  opacity: var(--o, 0); transform: translate3d(0, calc((1 - var(--o, 0)) * 28px), 0) scale(calc(.97 + var(--o, 0) * .03));
  visibility: hidden; will-change: opacity, transform;
}
.panneau.visible { visibility: visible; pointer-events: auto; }
.panneau .etiquette { display: inline-flex; gap: 8px; align-items: center; font-weight: 900; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--primaire); margin-bottom: 10px; }
.panneau .etiquette i { width: 8px; height: 8px; border-radius: 50%; background: var(--aube-2); box-shadow: 0 0 0 4px rgba(240,135,76,.2); }
.panneau h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: .35em; }
.panneau p { margin: 0; color: var(--texte-2); font-size: 1.05rem; }

.heros {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 90px var(--gouttiere) 120px; color: var(--ivoire);
  opacity: var(--o, 1); transform: translate3d(0, calc((1 - var(--o, 1)) * -40px), 0); will-change: opacity, transform;
}
.heros.inactif { visibility: hidden; }
.heros .surtitre { color: var(--sauge); }
.heros h1 { font-size: clamp(3.2rem, 11vw, 8.4rem); font-weight: 900; letter-spacing: -.035em; line-height: .98; margin: 0 0 .25em; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
.heros h1 .mot { color: var(--aube-1); font-weight: 500; }
.heros .sous { color: #E3ECE4; margin: 0 auto 28px; max-width: 34em; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.heros .stores-boutons { justify-content: center; }
.heros .rassure { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .92rem; font-weight: 750; color: #DDE7DF; }
.heros .rassure span { display: inline-flex; align-items: center; gap: 6px; }
.heros .rassure svg { width: 16px; height: 16px; color: var(--sauge); }
.defiler { position: absolute; bottom: 26px; left: 50%; translate: -50% 0; display: grid; justify-items: center; gap: 6px; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #DDE7DF; text-decoration: none; }
.defiler:hover { color: #fff; }
.defiler i { width: 2px; height: 34px; border-radius: 2px; background: linear-gradient(var(--aube-1), transparent); animation: goutte 2.2s var(--doux) infinite; transform-origin: top; }
@keyframes goutte { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.compteur-jour {
  position: absolute; top: 88px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 10px; border-radius: 999px; background: rgba(20, 32, 28, .72); color: var(--ivoire);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-weight: 850; font-size: .95rem;
  opacity: var(--rail, 0); transition: opacity .3s; white-space: nowrap;
}
.compteur-jour .y { width: 26px; height: 26px; border-radius: 50%; background: var(--ivoire); display: grid; place-items: center; }
.compteur-jour .y svg { width: 16px; height: 16px; }
.compteur-jour small { font-weight: 750; color: var(--sur-foret-2); }
.rail { display: none; }
@media (min-width: 980px) {
  .panneau { left: max(var(--gouttiere), calc(50vw - 600px)); right: auto; margin: 0; bottom: auto; top: 50%; translate: 0 -50%; width: 440px; }
  .panneau.droite { left: auto; right: calc(max(var(--gouttiere), 50vw - 600px) + 120px); }
  .compteur-jour { top: auto; bottom: 28px; }
  .rail {
    display: flex; flex-direction: column; gap: 4px; position: absolute; right: max(18px, calc(50vw - 690px)); top: 50%; translate: 0 -50%;
    opacity: var(--rail, 0); transition: opacity .3s; list-style: none; margin: 0; padding: 0;
  }
  .rail li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: .78rem; font-weight: 850; color: rgba(245,244,236,.7); text-shadow: 0 1px 8px rgba(0,0,0,.5); transition: color .3s; }
  .rail li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; transition: background .3s, transform .4s var(--ressort); }
  .rail li.passe { color: #fff; }
  .rail li.passe::after { background: var(--aube-1); border-color: var(--aube-1); }
  .rail li.ici::after { transform: scale(1.5); box-shadow: 0 0 0 5px rgba(246,184,92,.25); }
}

/* ---------- Apparitions ---------- */
.anime .apparait { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--doux), transform 1.1s var(--ressort); transition-delay: calc(var(--d, 0) * 90ms); }
.anime .apparait.vu { opacity: 1; transform: none; }

/* ---------- Promesse ---------- */
.promesse { background: linear-gradient(var(--ivoire), var(--ivoire) 70%, var(--ivoire-2)); }
.mots { font-size: clamp(1.7rem, 4.2vw, 3.3rem); line-height: 1.22; font-weight: 850; letter-spacing: -.02em; max-width: 22em; margin: 0 0 clamp(48px, 7vw, 90px); }
.anime .mots span { color: rgba(33, 61, 54, .18); transition: color .5s var(--doux); }
.anime .mots span.allume { color: var(--texte); }
.anime .mots span.allume.fort { color: var(--accent); }
.piliers { display: grid; gap: 16px; }
@media (min-width: 820px) { .piliers { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.pilier { background: var(--surface); border-radius: var(--rayon); padding: 28px; box-shadow: 0 1px 0 rgba(33,61,54,.05), 0 20px 40px -32px rgba(33,61,54,.4); }
.pilier .icone { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--ivoire-2); color: var(--primaire); margin-bottom: 18px; }
.pilier .icone svg { width: 24px; height: 24px; }
.pilier p { color: var(--texte-2); margin: 0; }
.note-sante { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 18px 20px; border-radius: var(--rayon-s); background: var(--ivoire-2); color: var(--texte-2); font-size: .95rem; }
.note-sante svg { width: 22px; height: 22px; flex: none; color: var(--primaire); margin-top: 2px; }
.note-sante p { margin: 0; }

/* ---------- L'envie ---------- */
.envie { background: radial-gradient(90% 60% at 80% 10%, #233F38, var(--foret) 60%); overflow: hidden; }
.deux-col { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (min-width: 980px) { .deux-col { grid-template-columns: 1fr 1fr; } .deux-col.inverse > :first-child { order: 2; } }
.etapes-envie { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 14px; counter-reset: e; }
.etapes-envie li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.etapes-envie li::before { counter-increment: e; content: counter(e); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: rgba(155,212,173,.14); color: var(--sauge); }
.etapes-envie b { display: block; color: var(--ivoire); }
.etapes-envie span { color: var(--sur-foret-2); }
.seance-demo {
  position: relative; border-radius: 36px; padding: clamp(24px, 4vw, 40px); text-align: center;
  background: linear-gradient(170deg, #2A2343, #1B1830 60%, #15142A); color: #F1ECFF;
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(212,191,255,.1) inset; overflow: hidden;
}
.seance-demo .entete-demo { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: .9rem; color: #CFC4EE; }
.seance-demo .temps { font-size: clamp(2.4rem, 6vw, 3.2rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; }
.orbe-zone { position: relative; width: min(280px, 72vw); aspect-ratio: 1; margin: 18px auto 10px; display: grid; place-items: center; }
.orbe { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #F3EDFF, #B9A2F0 45%, #7C61BE 80%); box-shadow: 0 0 60px rgba(185,162,240,.55); transform: scale(var(--souffle, .62)); transition: transform 4s cubic-bezier(.45,0,.55,1); }
.orbe-anneau { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(212,191,255,.35); }
.orbe-texte { position: relative; font-weight: 850; font-size: 1.1rem; color: #fff; max-width: 8.5em; line-height: 1.25; text-shadow: 0 1px 14px rgba(42,35,67,.75); }
.vague { width: 100%; height: 90px; margin: 8px 0 4px; }
.vague path.fond { fill: none; stroke: rgba(212,191,255,.18); stroke-width: 3; }
.vague path.trait { fill: none; stroke: #D4BFFF; stroke-width: 3; stroke-linecap: round; }
.vague circle { fill: #fff; }
.vague-legende { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; color: #B8ACDA; }
.seance-demo .bouton-envie { margin-top: 22px; width: 100%; }
.seance-demo .bouton-envie[aria-pressed="true"] { --fond: #3C2E63; }
.seance-demo .petit { margin: 12px 0 0; font-size: .85rem; color: #B8ACDA; }

/* Écran verrouillé, Dynamic Island, widgets */
.telephones { display: flex; justify-content: center; gap: clamp(14px, 3vw, 28px); align-items: flex-end; flex-wrap: wrap; }
.tel {
  position: relative; width: min(300px, 78vw); aspect-ratio: 390 / 844; border-radius: 48px; padding: 10px;
  background: linear-gradient(145deg, #2c3a35, #0d1512); box-shadow: 0 50px 90px -40px rgba(10,20,18,.75), 0 0 0 1.5px rgba(255,255,255,.08) inset;
}
.tel-ecran { position: relative; height: 100%; border-radius: 39px; overflow: hidden; color: var(--ivoire); font-weight: 800; container-type: inline-size;
  background: linear-gradient(#0E1A24, #1D2E3A 55%, #14261F); }
.tel-ecran .paysage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(.8) brightness(.6); }
.ile { position: absolute; top: 3.2%; left: 50%; translate: -50% 0; height: 7.5cqw; min-width: 30cqw; border-radius: 99px; background: #000; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; padding: 0 2.6cqw; font-size: 3.6cqw; transition: min-width .7s var(--ressort), height .7s var(--ressort); }
.ile .pastille { width: 5cqw; height: 5cqw; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F3EDFF, #9F86DD); animation: respire 8s ease-in-out infinite; }
.ile b { color: #D4BFFF; font-variant-numeric: tabular-nums; }
.ile span { opacity: 0; transition: opacity .4s .3s; }
.ile.active { min-width: 64cqw; height: 9cqw; }
.ile.active span { opacity: 1; }
@keyframes respire { 0%, 100% { transform: scale(.7); } 50% { transform: scale(1.05); } }
.verrou-haut { position: absolute; top: 15%; left: 0; right: 0; text-align: center; }
.verrou-haut small { display: inline-flex; gap: 1.5cqw; align-items: center; font-size: 4cqw; opacity: .9; }
.verrou-haut .heure { font-size: 23cqw; line-height: 1; letter-spacing: -.03em; font-weight: 700; }
.widgets-verrou { position: absolute; top: 42%; left: 50%; translate: -50% 0; display: flex; gap: 3cqw; }
.w-rond { width: 17cqw; height: 17cqw; border-radius: 50%; background: rgba(245,244,236,.14); display: grid; place-items: center; font-size: 4.2cqw; position: relative; }
.w-rond svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.w-rect { width: 40cqw; height: 17cqw; border-radius: 4.5cqw; background: rgba(245,244,236,.14); padding: 2cqw 3cqw; display: flex; flex-direction: column; justify-content: center; font-size: 3cqw; line-height: 1.25; }
.w-rect b { font-size: 3.9cqw; }
.bouton-verrou { position: absolute; left: 8.5%; bottom: 6.5%; width: 13cqw; height: 13cqw; border-radius: 50%; background: rgba(245,244,236,.2); display: grid; place-items: center; box-shadow: 0 0 0 .6cqw rgba(212,191,255,.9); animation: appel 3s ease-in-out infinite; }
.bouton-verrou svg { width: 6cqw; height: 6cqw; }
.bulle-verrou { position: absolute; left: 6%; bottom: 20%; padding: 2cqw 3cqw; border-radius: 3.6cqw; background: rgba(245,244,236,.95); color: var(--foret); font-size: 3.2cqw; font-weight: 850; }
.bouton-photo { position: absolute; right: 8.5%; bottom: 6.5%; width: 13cqw; height: 13cqw; border-radius: 50%; background: rgba(245,244,236,.2); display: grid; place-items: center; }
.bouton-photo svg { width: 5.4cqw; height: 5.4cqw; }
.barre { position: absolute; bottom: 1.8%; left: 50%; width: 35%; height: 1.3cqw; translate: -50% 0; border-radius: 9px; background: rgba(245,244,236,.8); }
@keyframes appel { 0%, 100% { box-shadow: 0 0 0 .6cqw rgba(212,191,255,.9); } 50% { box-shadow: 0 0 0 .6cqw rgba(212,191,255,.9), 0 0 0 3cqw rgba(212,191,255,.12); } }

.widgets-grille { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 720px) { .widgets-grille { grid-template-columns: repeat(3, 1fr); } }
.carte-fonction { border-radius: var(--rayon); padding: 24px; background: rgba(245,244,236,.06); box-shadow: 0 0 0 1px rgba(245,244,236,.09) inset; }
.carte-fonction h3 { color: var(--ivoire); margin-bottom: .4em; }
.carte-fonction p { margin: 0; color: var(--sur-foret-2); font-size: .98rem; }
.carte-fonction .icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(155,212,173,.14); color: var(--sauge); margin-bottom: 16px; }
.carte-fonction .icone svg { width: 22px; height: 22px; }

/* ---------- Séances ---------- */
.seances { background: var(--ivoire); overflow: hidden; }
.lecteur {
  border-radius: 36px; padding: 26px; background: linear-gradient(170deg, #20372F, #14201C); color: var(--ivoire);
  box-shadow: 0 40px 80px -40px rgba(20,32,28,.7); position: relative; overflow: hidden; max-width: 460px; margin-inline: auto; width: 100%;
}
.lecteur .pochette { position: relative; aspect-ratio: 1.15; border-radius: 24px; overflow: hidden; margin-bottom: 22px; }
.lecteur .pochette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.lecteur .pochette .anneaux { position: absolute; inset: 0; display: grid; place-items: center; }
.lecteur .pochette .anneaux i { position: absolute; width: 30%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.55); animation: onde 6s var(--doux) infinite; opacity: 0; }
.lecteur .pochette .anneaux i:nth-child(2) { animation-delay: 2s; }
.lecteur .pochette .anneaux i:nth-child(3) { animation-delay: 4s; }
@keyframes onde { 0% { transform: scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.lecteur .titre-seance { font-size: 1.45rem; font-weight: 850; margin: 0; }
.lecteur .infos-seance { color: var(--sur-foret-2); font-weight: 700; font-size: .92rem; margin: 2px 0 18px; }
.ondes-audio { display: flex; align-items: center; gap: 3px; height: 44px; }
.ondes-audio i { flex: 1; border-radius: 3px; background: rgba(245,244,236,.25); height: calc(var(--h) * 1%); }
.ondes-audio i.lu { background: var(--aube-1); }
.lecteur .temps-audio { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 800; color: var(--sur-foret-2); margin: 8px 0 18px; font-variant-numeric: tabular-nums; }
.lecteur .commandes { display: flex; justify-content: center; align-items: center; gap: 28px; }
.lecteur .commandes button { border: 0; background: transparent; cursor: pointer; color: var(--ivoire); display: grid; place-items: center; width: 44px; height: 44px; }
.lecteur .commandes .lire { width: 68px; height: 68px; border-radius: 50%; background: var(--ivoire); color: var(--foret); }
.lecteur .commandes svg { width: 26px; height: 26px; }
.lecteur .ia { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: .8rem; font-weight: 800; color: var(--sur-foret-2); }
.liste-seances { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 2px; counter-reset: s; }
.liste-seances li { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--separateur); }
.liste-seances li::before { counter-increment: s; content: counter(s, decimal-leading-zero); font-weight: 900; font-size: .85rem; color: var(--or); font-variant-numeric: tabular-nums; }
.liste-seances b { font-weight: 800; }
.liste-seances small { display: block; color: var(--texte-2); font-weight: 650; font-size: .9rem; }
.liste-seances .duree { font-weight: 800; font-size: .9rem; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.precision { font-size: .92rem; color: var(--texte-2); border-left: 3px solid var(--sauge); padding: 4px 0 4px 16px; margin-top: 22px; }

/* ---------- Moments qui piègent ---------- */
.moments { background: var(--ivoire-2); }
.cadran-zone { position: relative; width: min(520px, 100%); aspect-ratio: 1; margin-inline: auto; }
.cadran-zone > picture { position: absolute; inset: 0; }
.cadran-zone > picture img { width: 100%; height: 100%; }
.petale { position: absolute; left: 50%; top: 50%; width: 8%; aspect-ratio: 256 / 640; translate: -50% -100%; transform-origin: 50% 100%; transform: rotate(var(--a)) translateY(-104%); }
.petale img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .8s var(--doux), transform 1s var(--ressort); }
.petale .ouvert { opacity: 0; transform: scale(.85); transform-origin: 50% 100%; }
.petale.libre .ferme { opacity: 0; }
.petale.libre .ouvert { opacity: 1; transform: scale(1.08); }
.petale-legende { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: 0deg; font-size: clamp(.72rem, 1.8vw, .85rem); font-weight: 850; color: var(--texte); background: rgba(255,255,255,.88); padding: 4px 10px; border-radius: 99px; white-space: nowrap; transition: background .5s, color .5s; box-shadow: 0 6px 16px -10px rgba(33,61,54,.4); }
.petale-legende.libre { background: var(--accent); color: #fff; }
.cadran-centre { position: absolute; inset: 31%; border-radius: 50%; display: grid; place-items: center; text-align: center; }
.cadran-centre img { width: 46%; margin: 0 auto -4px; animation: tourne 60s linear infinite; }
@keyframes tourne { to { rotate: 360deg; } }
.cadran-centre b { display: block; font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; line-height: 1; color: var(--texte); font-variant-numeric: tabular-nums; }
.cadran-centre small { font-weight: 800; color: var(--texte-2); font-size: .82rem; }
.liste-coches { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.liste-coches li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.liste-coches li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--primaire) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F4EC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 15px no-repeat; margin-top: 1px; }
.sombre .liste-coches li::before { background-color: var(--sauge); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23213D36' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E"); }

/* ---------- Paliers ---------- */
.paliers { background: var(--nuit); overflow: clip; }
.paliers-piste { position: relative; height: 300vh; }
.paliers-colle { position: sticky; top: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 90px 40px; }
.jauge-zone { display: grid; gap: 28px; align-items: center; margin-top: 24px; }
@media (min-width: 900px) { .jauge-zone { grid-template-columns: 340px 1fr; gap: 60px; } }
.jauge { position: relative; width: min(300px, 70vw); aspect-ratio: 1; margin-inline: auto; }
.jauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jauge .piste { fill: none; stroke: rgba(245,244,236,.1); stroke-width: 14; }
.jauge .valeur { fill: none; stroke: url(#or-jauge); stroke-width: 14; stroke-linecap: round; }
.jauge-texte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.jauge-texte b { font-size: clamp(3rem, 9vw, 4.4rem); font-weight: 900; line-height: 1; color: var(--or-clair); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.jauge-texte span { font-weight: 800; font-size: .92rem; color: var(--sur-foret-2); max-width: 12em; margin: 6px auto 0; }
.palier-carte { position: relative; min-height: 210px; }
.palier-carte article { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(18px); transition: opacity .5s var(--doux), transform .7s var(--ressort); }
.palier-carte article.actif { opacity: 1; transform: none; }
.palier-carte .quand { font-weight: 900; color: var(--accent-clair); letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; }
.palier-carte h3 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); color: var(--ivoire); margin: 6px 0 10px; }
.palier-carte p { color: var(--sur-foret-2); max-width: 32em; margin: 0 0 .5em; }
.palier-carte .corps { display: flex; gap: 10px; align-items: flex-start; color: var(--ivoire); font-weight: 700; }
.palier-carte .corps svg { width: 20px; height: 20px; flex: none; color: var(--sauge); margin-top: 3px; }
.frise { display: flex; justify-content: space-between; margin-top: 34px; position: relative; padding-top: 18px; }
.frise::before { content: ""; position: absolute; top: 4px; left: 0; right: 0; height: 2px; background: rgba(245,244,236,.12); }
.frise::after { content: ""; position: absolute; top: 4px; left: 0; height: 2px; width: calc(var(--avance, 0) * 100%); background: linear-gradient(90deg, var(--aube-1), var(--aube-2)); }
.frise span { position: relative; font-size: .72rem; font-weight: 850; color: rgba(245,244,236,.5); transition: color .3s; }
.frise span::before { content: ""; position: absolute; top: -18px; left: 50%; translate: -50% 0; width: 10px; height: 10px; border-radius: 50%; background: var(--nuit); border: 2px solid rgba(245,244,236,.3); z-index: 1; transition: background .3s, border-color .3s; }
.frise span.passe { color: var(--ivoire); }
.frise span.passe::before { background: var(--aube-1); border-color: var(--aube-1); }
@media (max-width: 620px) { .frise span:nth-child(even) { font-size: 0; } }
.source { font-size: .82rem; color: var(--sur-foret-2); margin-top: 24px; max-width: 60em; }

/* ---------- Compte plaisir ---------- */
.plaisir { background: linear-gradient(var(--ivoire), #FBF0D2 140%); overflow: hidden; }
.balance { position: relative; width: min(460px, 100%); margin-inline: auto; }
.balance img { width: 100%; }
.calcul { background: var(--surface); border-radius: var(--rayon); padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 60px -40px rgba(33,61,54,.5); margin-top: 28px; }
.calcul .champs { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.calcul label { display: block; font-weight: 800; font-size: .9rem; color: var(--texte-2); margin-bottom: 6px; }
.calcul input[type="range"] { width: 100%; accent-color: var(--primaire); height: 44px; }
.calcul input[type="number"] { width: 100%; height: 48px; border-radius: 14px; border: 1.5px solid var(--bordure); padding: 0 14px; font: inherit; font-weight: 800; color: var(--texte); background: var(--ivoire); }
.calcul output { font-weight: 900; color: var(--texte); }
.resultats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 22px; }
.resultats div { background: var(--ivoire); border-radius: 18px; padding: 14px 12px; text-align: center; }
.resultats b { display: block; font-size: clamp(1.25rem, 3.4vw, 1.75rem); font-weight: 900; color: var(--or); font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.15; }
.resultats small { font-weight: 800; color: var(--texte-2); font-size: .8rem; }
.projet { display: flex; gap: 14px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: #FBF0D2; font-weight: 750; }
.projet .barre-projet { flex: 1; height: 10px; border-radius: 10px; background: rgba(178,122,12,.18); overflow: hidden; }
.projet .barre-projet i { display: block; height: 100%; width: calc(var(--rempli, 0) * 100%); background: linear-gradient(90deg, var(--aube-1), var(--aube-2)); border-radius: 10px; transition: width .8s var(--ressort); }
.calcul .petit { font-size: .82rem; color: var(--texte-2); margin: 14px 0 0; }

/* ---------- Tarifs ---------- */
.tarifs { background: var(--ivoire); }
.comparatif { display: grid; gap: 18px; margin-top: 40px; }
@media (min-width: 900px) { .comparatif { grid-template-columns: 1fr 1.25fr; } }
.formule { border-radius: var(--rayon); padding: clamp(24px, 3vw, 36px); background: var(--surface); box-shadow: 0 20px 50px -40px rgba(33,61,54,.5); }
.formule h3 { font-size: 1.6rem; }
.formule .prix-libre { font-size: 2.4rem; font-weight: 900; letter-spacing: -.03em; margin: 0 0 4px; }
.formule.traversee-offre { background: var(--foret); color: var(--ivoire); position: relative; overflow: hidden; }
.formule.traversee-offre::before { content: ""; position: absolute; inset: auto -20% -60% 30%; height: 90%; background: radial-gradient(closest-side, rgba(246,184,92,.35), transparent); pointer-events: none; }
.formule .sous { font-size: 1rem; }
.offres { display: grid; gap: 12px; margin-top: 24px; grid-template-columns: 1fr 1fr; position: relative; }
.offre {
  position: relative; border-radius: 22px; padding: 18px 16px 16px; background: rgba(245,244,236,.06); box-shadow: 0 0 0 1px rgba(245,244,236,.12) inset;
  transition: transform .4s var(--ressort), box-shadow .3s; overflow: hidden;
}
.offre::after { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, -100px) var(--my, -100px), rgba(246,184,92,.16), transparent 60%); pointer-events: none; }
.offre:hover { transform: translateY(-3px); }
.offre .duree { font-weight: 850; font-size: .95rem; color: var(--sur-foret-2); }
.offre .montant { font-size: 1.75rem; font-weight: 900; letter-spacing: -.02em; color: var(--ivoire); line-height: 1.2; font-variant-numeric: tabular-nums; }
.offre .detail { font-size: .82rem; font-weight: 700; color: var(--sur-foret-2); }
.offre .essai { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 99px; font-size: .74rem; font-weight: 900; background: rgba(155,212,173,.16); color: var(--sauge); }
.offre.vedette { grid-column: 1 / -1; background: linear-gradient(135deg, #F6B85C, #F0874C); color: #2A1A0C; box-shadow: 0 24px 50px -24px rgba(240,135,76,.7); }
.offre.vedette .duree, .offre.vedette .detail { color: #4A2C12; }
.offre.vedette .montant { color: #2A1A0C; font-size: 2.2rem; }
.offre.vedette .essai { background: #2A1A0C; color: #FBE3C8; font-size: .82rem; padding: 5px 12px; }
.offre.vedette .ruban { position: absolute; top: 16px; right: 16px; font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #4A2C12; }
.offre.vedette::after { background: radial-gradient(240px circle at var(--mx, -100px) var(--my, -100px), rgba(255,255,255,.3), transparent 60%); }
.mentions-abonnement { font-size: .84rem; color: var(--texte-2); margin-top: 22px; max-width: 70em; }

/* ---------- Confidentialité ---------- */
.vie-privee { background: var(--foret); overflow: hidden; }
.coffre { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (min-width: 720px) { .coffre { grid-template-columns: repeat(4, 1fr); } }
.coffre div { border-radius: 22px; padding: 22px 18px; background: rgba(245,244,236,.06); box-shadow: 0 0 0 1px rgba(245,244,236,.09) inset; }
.coffre b { display: block; font-size: 2.2rem; font-weight: 900; color: var(--sauge); line-height: 1; margin-bottom: 8px; }
.coffre span { color: var(--sur-foret-2); font-weight: 700; font-size: .95rem; }

/* ---------- FAQ ---------- */
.faq { background: var(--ivoire); }
.questions { margin-top: 36px; border-top: 1px solid var(--separateur); }
.questions details { border-bottom: 1px solid var(--separateur); }
.questions summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; align-items: center;
  padding: 22px 4px; font-weight: 850; font-size: 1.12rem; min-height: 44px;
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--ivoire-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23285E4A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .4s var(--ressort); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions .reponse { padding: 0 4px 22px; color: var(--texte-2); max-width: 46em; }
.questions .reponse p:last-child { margin: 0; }
.anime .questions details[open] .reponse { animation: deplie .5s var(--ressort); }
@keyframes deplie { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Final : le soleil se lève ---------- */
.final { position: relative; overflow: hidden; text-align: center; color: var(--foret);
  background: linear-gradient(180deg, #F5F4EC 0%, #FCE8DB calc(40% + (1 - var(--s, 1)) * 40%), #F6B85C 120%); }
.final .soleil { position: absolute; left: 50%; bottom: 0; width: min(560px, 120vw); aspect-ratio: 1; translate: -50% calc(55% + (1 - var(--s, 1)) * 30%); border-radius: 50%;
  background: radial-gradient(circle, #FFF3D6 0 34%, rgba(246,184,92,.85) 35%, rgba(240,135,76,.25) 55%, transparent 70%); pointer-events: none; }
.final .conteneur { position: relative; }
.final h2 { font-size: clamp(2.6rem, 8vw, 5.6rem); }
.final .stores-boutons { justify-content: center; margin-top: 30px; }
.final .symbole { width: 64px; height: 64px; margin: 0 auto 24px; }

/* ---------- Autres applications ---------- */
.autres { background: var(--ivoire); padding-block: 56px; border-top: 1px solid var(--separateur); }
.autres h2 { font-size: 1.15rem; font-weight: 850; letter-spacing: 0; margin-bottom: 4px; }
.autres .sous { font-size: .95rem; margin-bottom: 18px; }
.autres-liste { display: grid; gap: 12px; }
@media (min-width: 720px) { .autres-liste { grid-template-columns: 1fr 1fr; max-width: 760px; } }
.autre-app { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 18px; background: var(--surface); color: var(--texte); text-decoration: none; box-shadow: 0 0 0 1px var(--separateur) inset; transition: box-shadow .3s, transform .4s var(--ressort); }
.autre-app:hover { color: var(--texte); transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--bordure) inset; }
.autre-app b { display: block; font-weight: 850; }
.autre-app small { color: var(--texte-2); font-weight: 650; font-size: .9rem; }
.autre-app svg { width: 18px; height: 18px; flex: none; color: var(--texte-2); }

/* ---------- Pied de page ---------- */
.pied { background: var(--nuit); color: var(--sur-foret-2); padding: 56px 0 40px; font-size: .92rem; }
.pied a { color: var(--ivoire); text-decoration: none; }
.pied a:hover { text-decoration: underline; color: var(--ivoire); }
.pied-haut { display: grid; gap: 30px; }
@media (min-width: 820px) { .pied-haut { grid-template-columns: 1.3fr 1fr 1fr; } }
.pied .marque svg { height: 32px; color: var(--ivoire); }
.pied h2 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sur-foret-2); margin: 0 0 12px; font-weight: 900; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pied ul a { display: inline-block; padding: 2px 0; }
.pied-bas { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(245,244,236,.1); display: grid; gap: 10px; font-size: .84rem; }
.urgence { color: var(--ivoire); }

/* ---------- Pages de texte (aide, légal) ---------- */
.page-texte { background: var(--ivoire); }
.page-texte main { padding: 130px 0 90px; }
.article { width: min(760px, 100% - 2 * var(--gouttiere)); margin-inline: auto; }
.article h1 { font-size: clamp(2.3rem, 6vw, 3.6rem); margin-bottom: .3em; }
.article .chapo { font-size: 1.2rem; color: var(--texte-2); margin-bottom: 2em; }
.article h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 2.2em 0 .6em; scroll-margin-top: 100px; }
.article h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.article ul, .article ol { padding-left: 1.3em; margin: 0 0 1em; }
.article li { margin-bottom: .45em; }
.article table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; display: block; overflow-x: auto; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--separateur); vertical-align: top; }
.article th { font-weight: 850; background: var(--ivoire-2); }
.article .maj { font-size: .92rem; color: var(--texte-2); }
.a-completer { background: #FBF0D2; color: #6B4A08; border-radius: 6px; padding: 0 5px; font-weight: 750; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sommaire { background: var(--surface); border-radius: var(--rayon-s); padding: 18px 22px; margin: 0 0 2em; font-size: .95rem; box-shadow: 0 0 0 1px var(--separateur) inset; }
.sommaire ol { margin: 8px 0 0; columns: 2 240px; }
.encadre { background: var(--surface); border-radius: var(--rayon-s); padding: 20px 22px; margin: 1.4em 0; box-shadow: 0 0 0 1px var(--separateur) inset; }
.encadre.sante { background: #FCE8DB; box-shadow: none; }
.etapes-aide { counter-reset: a; list-style: none; padding: 0 !important; display: grid; gap: 12px; }
.etapes-aide li { counter-increment: a; display: grid; grid-template-columns: 40px 1fr; gap: 14px; background: var(--surface); border-radius: 18px; padding: 16px; margin: 0 !important; }
.etapes-aide li::before { content: counter(a); width: 40px; height: 40px; border-radius: 50%; background: var(--primaire); color: var(--ivoire); display: grid; place-items: center; font-weight: 900; }
.contact-carte { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--foret); color: var(--ivoire); border-radius: var(--rayon); padding: 26px; margin-top: 2.4em; }
.contact-carte p { margin: 0; color: var(--sur-foret-2); }
.contact-carte b { color: var(--ivoire); font-size: 1.2rem; display: block; }

/* ---------- Mouvement réduit, sans JavaScript ---------- */
html:not(.anime) .traversee { height: auto; }
html:not(.anime) .colle { position: relative; height: auto; min-height: 100svh; display: flex; flex-direction: column; }
html:not(.anime) .scene { --pan: 0; position: absolute; top: auto; bottom: 0; transform: translateX(-50%); --jour: 1; --ecart: 1; --p: 1; }
html:not(.anime) .scene .brume, html:not(.anime) .brume-voile, html:not(.anime) .scrim, html:not(.anime) .lucioles { display: none; }
html:not(.anime) .heros { position: relative; inset: auto; min-height: 92svh; background: linear-gradient(rgba(10,20,18,.7), rgba(10,20,18,.35)); }
html:not(.anime) .panneaux { position: relative; display: grid; gap: 16px; padding: 40px var(--gouttiere) 80px; }
html:not(.anime) .panneau { position: relative; inset: auto; translate: none; margin: 0 auto; width: min(640px, 100%); opacity: 1; transform: none; visibility: visible; }
html:not(.anime) .colle::after, html:not(.anime) .compteur-jour, html:not(.anime) .rail, html:not(.anime) .defiler i { display: none; }
html:not(.anime) .paliers-piste { height: auto; }
html:not(.anime) .paliers-colle { position: relative; }
html:not(.anime) .palier-carte { min-height: 0; }
html:not(.anime) .palier-carte { display: grid; gap: 28px; }
html:not(.anime) .palier-carte article { position: relative; opacity: 1; transform: none; }
html:not(.anime) .jauge, html:not(.anime) .frise { display: none; }
html:not(.anime) .jauge-zone { grid-template-columns: 1fr; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Ajustements après relecture visuelle */
.offre p { margin: 0; }
.offre .montant { margin: 2px 0 4px; }
.comparatif { align-items: start; }
.autre-app small { display: block; }
.pied-bas p { margin: 0; }
.heros .surtitre::before { display: none; }
@media (max-width: 899px) {
  .paliers-colle { padding-block: 84px 24px; }
  .paliers h2 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .jauge { width: min(200px, 52vw); }
  .jauge-texte b { font-size: 2.6rem; }
  .jauge-texte span { font-size: .8rem; }
  .jauge-zone { gap: 18px; margin-top: 8px; }
  .palier-carte { min-height: 170px; }
  .palier-carte h3 { font-size: 1.5rem; }
  .frise { margin-top: 18px; }
  .source { font-size: .74rem; margin-top: 16px; }
}

/* ============ Les trois appuis ============ */
.outils { background: linear-gradient(var(--ivoire), #EFEDE2); }
.outils-tete { max-width: 760px; margin: 0 auto 24px; text-align: center; }
.outils-tete .sous { margin-inline: auto; }
.outil { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding-block: clamp(48px, 8vw, 110px); }
.outil + .outil { border-top: 1px solid rgba(33,61,54,.08); }
.outil.inverse .outil-texte { order: 2; }
.outil-num { font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--aube-3, #D4622F); margin: 0 0 14px; }
.outil h3 { font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; margin: 0 0 18px; }
.outil-texte > p:not(.outil-num) { font-size: 1.12rem; line-height: 1.6; color: var(--texte-2, #4B5E57); max-width: 34em; margin: 0 0 22px; }
.outil-points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.outil-points li { display: flex; gap: 12px; align-items: flex-start; font-weight: 650; }
.outil-points svg { width: 22px; height: 22px; flex: none; padding: 3px; border-radius: 50%; background: rgba(33,61,54,.1); color: var(--foret); margin-top: 1px; }
.outil-ecrans { position: relative; display: flex; justify-content: center; align-items: center; min-height: 560px; }
/* Le téléphone : capture insérée dans le châssis officiel iPhone 18 Pro (skill apercus-appareils), PNG transparent. */
.telephone { position: relative; width: min(310px, 62vw); aspect-ratio: 760 / 1554; filter: drop-shadow(0 40px 50px rgba(20,38,31,.28)) drop-shadow(0 10px 16px rgba(20,38,31,.18)); }
.telephone picture, .telephone img { display: block; width: 100%; height: auto; }
.outil-ecrans .telephone.arriere { position: absolute; left: 50%; translate: -88% -4%; rotate: -6deg; width: min(270px, 52vw); opacity: .96; }
.outil-ecrans .telephone.avant { position: relative; translate: 34% 4%; rotate: 3deg; z-index: 1; }
.outils-appel { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(24px, 4vw, 48px); padding: 26px 30px; border-radius: 28px;
  background: var(--foret); color: var(--ivoire); box-shadow: 0 30px 60px -30px rgba(20,38,31,.6); }
.outils-appel b { display: block; font-size: 1.35rem; margin-bottom: 4px; }
.outils-appel span { color: var(--sur-foret-2); font-weight: 600; }
.outils-appel .bouton { --fond: var(--ivoire); --encre: var(--foret); flex: none; }
@media (max-width: 860px) {
  .outil { grid-template-columns: 1fr; text-align: left; }
  .outil.inverse .outil-texte { order: 0; }
  .outil-ecrans { min-height: 0; padding: 10px 0 30px; }
  .outil-ecrans .telephone.arriere { translate: -82% 2%; width: min(230px, 50vw); }
  .outil-ecrans .telephone.avant { translate: 22% 0; width: min(250px, 56vw); }
  .outils-appel { flex-direction: column; align-items: flex-start; }
}

/* ============ Tarifs : la Traversée, pensée pour donner envie d'essayer ============ */
.tarifs-tete { text-align: center; max-width: 780px; margin: 0 auto 40px; }
.tarifs-tete .sous { margin-inline: auto; }
.grille-prix { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
.carte-prix { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 26px 22px 22px; border-radius: 26px; background: var(--surface, #fff);
  box-shadow: 0 1px 0 rgba(33,61,54,.06), 0 24px 50px -36px rgba(33,61,54,.55); transition: transform .4s var(--ressort), box-shadow .4s; overflow: hidden; }
.carte-prix::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, -200px) var(--my, -200px), rgba(246,184,92,.14), transparent 60%); pointer-events: none; }
.carte-prix:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(33,61,54,.06), 0 34px 60px -34px rgba(33,61,54,.6); }
.carte-prix .pastille { align-self: flex-start; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: rgba(33,61,54,.08); color: var(--foret); margin-bottom: 6px; }
.carte-prix .duree { font-weight: 850; font-size: 1.05rem; margin: 0; }
.carte-prix .par-mois { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.carte-prix .par-mois .chiffre { font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.carte-prix .par-mois small { font-size: 1rem; font-weight: 800; color: var(--texte-2); }
.carte-prix .total { margin: 0; font-size: .9rem; font-weight: 700; color: var(--texte-2); min-height: 2.6em; }
.carte-prix .total a { color: inherit; }
.carte-prix .essai { align-self: flex-start; padding: 5px 12px; border-radius: 99px; font-size: .8rem; font-weight: 900; background: rgba(155,212,173,.25); color: #1F5A41; }
.carte-prix .essai.vide { visibility: hidden; }
.carte-prix .essai { margin-bottom: 14px; }
.carte-prix .bouton { margin-top: auto; justify-content: center; width: 100%; white-space: nowrap; padding-inline: 14px; font-size: .98rem; }
.carte-prix.vedette { background: linear-gradient(160deg, #234339, #14261F); color: var(--ivoire); box-shadow: 0 30px 70px -30px rgba(20,38,31,.75); }
.carte-prix.vedette .pastille { background: linear-gradient(135deg, #F6B85C, #F0874C); color: #2A1A0C; }
.carte-prix.vedette .par-mois small, .carte-prix.vedette .total { color: var(--sur-foret-2); }
.carte-prix.vedette .essai { background: rgba(246,184,92,.18); color: #F6D27A; }
.carte-prix.vedette .bouton { --fond: linear-gradient(135deg, #F6B85C, #F0874C); --encre: #2A1A0C; background: linear-gradient(135deg, #F6B85C, #F0874C); color: #2A1A0C; }
.calcul-prix { text-align: center; font-size: 1.12rem; margin: 30px auto 0; max-width: 46em; color: var(--texte-2); }
.calcul-prix b { color: var(--foret); }
.garanties { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-weight: 700; font-size: .95rem; }
.garanties li { display: flex; align-items: center; gap: 8px; }
.garanties svg { width: 18px; height: 18px; color: #2F7A57; }
.gratuit-bande { margin: 36px auto 0; padding: 20px 24px; border-radius: 22px; border: 1.5px dashed rgba(33,61,54,.2); display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: center; }
.gratuit-bande b { width: 100%; text-align: center; font-size: 1rem; margin-bottom: 4px; }
.gratuit-bande span { padding: 6px 12px; border-radius: 99px; background: rgba(33,61,54,.06); font-size: .88rem; font-weight: 700; }
@media (max-width: 1080px) { .grille-prix { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grille-prix { grid-template-columns: 1fr; } .carte-prix .total { min-height: 0; } }

/* ============ Les quatre messages de la traversée ============ */
.panneau.manifeste { inset: auto; left: 50%; top: max(96px, 11svh); bottom: auto; translate: -50% 0; width: min(960px, 100% - 2 * var(--gouttiere));
  padding: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; color: var(--ivoire);
  transform: translate3d(0, calc((1 - var(--o, 0)) * 36px), 0); }
.panneau.manifeste .etiquette { color: #F6D27A; justify-content: center; font-size: .82rem; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.panneau.manifeste h2 { font-size: clamp(2.1rem, 5.2vw, 4.4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 .4em; color: #FFFBF2; text-shadow: 0 4px 30px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3); }
.panneau.manifeste h2 .mot { color: #F6B85C; }
.panneau.manifeste p:not(.etiquette) { max-width: 40em; margin: 0 auto; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 650; color: #F3EFE4; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.voile-texte { position: absolute; inset: 0 0 auto; height: 62svh; pointer-events: none; background: linear-gradient(rgba(8,16,14,.62), rgba(8,16,14,.28) 55%, transparent); opacity: var(--texte, 0); }
@media (min-width: 980px) { .panneau.manifeste, .panneau.manifeste.droite { left: 50%; right: auto; top: max(110px, 12svh); translate: -50% 0; width: min(960px, 100% - 2 * var(--gouttiere)); } }

/* ============ Les idées : une carte lisible, toujours au même endroit, reliée à son étape du chemin ============ */
.idees { position: absolute; inset: 0; pointer-events: none; }
.idee { position: absolute; left: 0; top: 0; width: min(440px, 100vw - 32px); padding: 26px 28px; border-radius: 26px; color: #FFFBF2;
  background: rgba(14, 28, 23, .82);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.09);
  opacity: var(--o, 0); visibility: hidden; will-change: transform, opacity; }
.idee.visible { visibility: visible; }
.idee > div { transform: translate3d(0, calc((1 - var(--o, 0)) * 12px), 0); }
.idee-num { display: block; width: auto; height: auto; margin-bottom: 10px; background: none; box-shadow: none; font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #F6C77A; }
.idee-num::before { content: "Étape "; }
.idee { display: block; }
.idee-titre { margin: 0 0 10px; font-size: clamp(1.7rem, 2.6vw, 2.35rem); font-weight: 900; line-height: 1.06; letter-spacing: -.02em; }
.idee-titre .mot { color: #F6C77A; }
.idee p:not(.idee-titre) { margin: 0; font-size: 1.04rem; line-height: 1.55; color: #E4EBE5; }
.lien-idee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.lien-idee path { fill: none; stroke: rgba(255,243,214,.75); stroke-width: 1.5; stroke-dasharray: 3 5; }
.lien-idee circle { display: none; }
html:not(.anime) .idees { position: relative; display: grid; gap: 16px; padding: 30px var(--gouttiere); }
html:not(.anime) .idee { position: relative; visibility: visible; opacity: 1; transform: none; }
html:not(.anime) .lien-idee { display: none; }
/* Allègement : plus de rail ni de grosses bornes ; le marcheur et le fil doré suffisent. */
.rail { display: none !important; }
.sentier-or .borne { display: none; }

/* ============ La scène dessinée (canevas unique) ============ */
.scene { position: absolute; inset: 0; overflow: hidden; background: #0B1626; }
.scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene-fixe, .scene-fixe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
html.anime .scene-fixe { display: none; }
html:not(.anime) .scene canvas { display: none; }

/* ============ Sections sobres : envie, compte plaisir, tarifs ============ */
/* Une vraie capture, seule, dans le châssis iPhone 18 Pro. */
.ecran-unique { display: flex; justify-content: center; align-items: center; }
.ecran-unique .telephone { width: min(330px, 70vw); }

/* Étapes en liste éditoriale : filets fins, sans pastilles. */
.etapes-sobres { list-style: none; padding: 0; margin: 34px 0 0; counter-reset: etape; }
.etapes-sobres li { counter-increment: etape; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding: 18px 0; border-top: 1px solid rgba(245,244,236,.14); }
.etapes-sobres li::before { content: "0" counter(etape); font-weight: 800; font-size: .9rem; letter-spacing: .06em; color: var(--aube-1); padding-top: 3px; }
.etapes-sobres li > div { display: grid; gap: 4px; }
.etapes-sobres b { font-size: 1.12rem; }
.etapes-sobres span { color: var(--sur-foret-2); line-height: 1.55; }

/* Le calculateur : de grands chiffres et des filets, rien d'autre. */
#calcul.calcul { background: none; box-shadow: none; padding: 0; border-radius: 0; margin-top: 34px; }
#calcul .champs { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 22px; border-bottom: 1px solid rgba(33,61,54,.14); }
#calcul label { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 12px; }
#calcul output { color: var(--foret); }
#calcul input[type="number"] { width: 100%; border: 0; border-bottom: 1.5px solid rgba(33,61,54,.35); border-radius: 0; background: none; padding: 4px 0 8px; font: inherit; font-size: 1.5rem; font-weight: 800; color: var(--foret); box-shadow: none; }
#calcul input[type="number"]:focus { outline: none; border-bottom-color: var(--foret); }
#calcul .resultats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; gap: 0; }
#calcul .resultats > div { background: none; border-radius: 0; padding: 22px 0 22px 0; border-right: 1px solid rgba(33,61,54,.14); text-align: left; }
#calcul .resultats > div + div { padding-left: 22px; }
#calcul .resultats > div:last-child { border-right: 0; }
#calcul .resultats b { display: block; font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.02em; color: var(--foret); }
#calcul .resultats small { font-size: .9rem; font-weight: 700; color: var(--texte-2); }
#calcul .projet { margin: 0; padding: 18px 0; border-top: 1px solid rgba(33,61,54,.14); background: none; border-radius: 0; font-size: 1.05rem; color: var(--texte-2); display: block; }
#calcul .projet b { color: var(--foret); }
#calcul .petit { margin-top: 6px; }

/* Tarifs : des cartes blanches à filet fin ; la formule conseillée a un contour, un seul bouton plein. */
.grille-prix { gap: 14px; }
.carte-prix { background: #fff; border: 1px solid rgba(33,61,54,.12); box-shadow: none; border-radius: 22px; padding: 28px 24px 24px; gap: 4px; }
.carte-prix::after { display: none; }
.carte-prix:hover { transform: none; box-shadow: 0 18px 40px -30px rgba(33,61,54,.45); }
.carte-prix .pastille { background: none; padding: 0; border-radius: 0; font-size: .74rem; letter-spacing: .12em; color: var(--texte-2); margin-bottom: 8px; }
.carte-prix .duree { font-size: 1.15rem; }
.carte-prix .par-mois { margin-top: 10px; }
.carte-prix .par-mois .chiffre { color: var(--foret); }
.carte-prix .essai { background: none; padding: 0; border-radius: 0; color: #2F7A57; font-size: .92rem; font-weight: 800; margin-bottom: 18px; }
.carte-prix .essai::before { content: "✓ "; }
.carte-prix .bouton { font-size: .96rem; min-height: 48px; }
.carte-prix .bouton-fantome { box-shadow: inset 0 0 0 1px rgba(33,61,54,.35); color: var(--foret); }
.carte-prix.vedette { background: #fff; color: var(--foret); border: 2px solid var(--foret); box-shadow: 0 24px 50px -34px rgba(33,61,54,.6); }
.carte-prix.vedette .pastille { background: none; color: var(--foret); }
.carte-prix.vedette .par-mois small, .carte-prix.vedette .total { color: var(--texte-2); }
.carte-prix.vedette .essai { background: none; color: #2F7A57; }
.carte-prix.vedette .bouton { background: var(--foret); color: var(--ivoire); --fond: var(--foret); --encre: var(--ivoire); }
.calcul-prix { font-size: 1.05rem; }
.garanties { font-weight: 650; color: var(--texte-2); }
.gratuit-bande { border: 0; border-top: 1px solid rgba(33,61,54,.14); border-radius: 0; padding: 28px 0 0; justify-content: flex-start; gap: 10px 28px; }
.gratuit-bande b { width: 100%; text-align: left; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.gratuit-bande span { background: none; padding: 0; border-radius: 0; font-weight: 650; color: var(--foret); }
.gratuit-bande span::before { content: "✓ "; color: #2F7A57; }
@media (max-width: 620px) { #calcul .champs { grid-template-columns: 1fr; } #calcul .resultats b { font-size: 1.6rem; } }