/* Manrope, hébergée avec le site (aucun appel à un tiers : voir la page confidentialité). */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-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: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(fonts/manrope-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; }
/* Yomi — le site, troisième version.

   Une pièce lumineuse, une vraie main qui tient un téléphone, des cartes arrondies et colorées.
   Références : Flighty (la main, les cartes de résultat qui flottent), Headspace (la question,
   les onglets, les grandes cartes pastel), l'app elle-même (le vert, la douceur, Manrope).

   Ordre : base · en-tête · premier écran · la main · piliers · besoins · fonctions · prix et questions ·
   fin · pied. */

:root {
  --bg: #fbf9f4;
  --soft: #f3efe6;
  --ink: #17201c;
  --muted: #5d6860;
  --line: #e6e3da;
  --green: #1f3a2e;      /* le vert du bouton « Arroser » de l'app */
  --leaf: #3e7a52;
  --sage: #dfe9dc;
  --cream: #f4ead7;
  --sky: #dbe8f0;
  --blush: #f4e0d8;
  --wrap: 1180px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
html, body { overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b { font-weight: 600; }
button { font: inherit; color: inherit; cursor: pointer; }

html[data-lang="fr"] t-en, html[data-lang="en"] t-fr { display: none; }
t-fr, t-en { display: contents; }
html[data-lang="fr"] .en, html[data-lang="en"] .fr { display: none; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; z-index: 50; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; border-radius: 6px; }

h1, h2 { font-weight: 300; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
h1 b, h2 b, h3 b { font-weight: 600; }
h2 { font-size: clamp(34px, 4.6vw, 60px); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); text-wrap: pretty; }
.center { text-align: center; }
.wrap.narrow { width: min(900px, 100% - 48px); }

/* ── Boutons ───────────────────────────────────────────────────────────── */

.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; border-radius: 99px; background: var(--green); color: #fff; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; }
.btn-lg { padding: 17px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn.soon { cursor: default; user-select: none; }   /* tant que l'app n'est pas sur l'App Store */
.btn-light { background: #fff; color: var(--green); }
.textlink { font-weight: 500; text-decoration: none; color: var(--ink); border-bottom: 1px solid rgba(23,32,28,.25); padding-bottom: 2px; }
.textlink:hover { border-color: var(--ink); }

/* ── En-tête : transparent sur la photo, blanc dès qu'on a défilé ──────── */

.top { position: sticky; top: 0; z-index: 30; height: 0; }
.top::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 120px; background: linear-gradient(to bottom, rgba(251,249,244,.85), rgba(251,249,244,0)); pointer-events: none; transition: opacity .3s; }
.top.sunk::before { opacity: 0; }
.top::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 68px; background: rgba(251,249,244,.97); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .3s; pointer-events: none; }
.top.sunk::after { opacity: 1; }
.bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.mark img { border-radius: 9px; }
.links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 34px; font-size: 15px; font-weight: 500; }
.links a { text-decoration: none; color: #3d4741; transition: color .2s; }
.links a:hover { color: var(--ink); }
.bar-end { display: flex; align-items: center; gap: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 99px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(23,32,28,.06); }
.seg button { border: 0; background: none; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ── Le premier écran ──────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: clamp(92px, 11vh, 120px); text-align: center; background: #efe9dc url(img/hero-bg.webp) center 42% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 46% at 50% 26%, rgba(251,249,244,.92) 0%, rgba(251,249,244,.62) 52%, rgba(251,249,244,0) 82%); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, rgba(251,249,244,0), var(--bg)); pointer-events: none; }
.hero > * { position: relative; }
.hero-copy { width: min(860px, 100% - 40px); }
.pill { display: inline-block; padding: 7px 16px; border-radius: 99px; background: rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(23,32,28,.07); font-size: 14px; font-weight: 600; color: var(--leaf); }
.hero h1 { margin-top: 18px; font-size: clamp(50px, 6.6vw, 96px); line-height: .98; letter-spacing: -.045em; }
@media (min-width: 900px) { .hero h1 br { display: none; } }
.hero .lead { margin: 16px auto 0; max-width: 31em; color: #3d4741; }
.hero .cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 24px; }
.fine { margin-top: 12px; font-size: 14px; color: var(--muted); }

/* La scène : la main sort du bas, le téléphone est coupé par le pli, comme chez Flighty. */
.hero-stage { --W: clamp(640px, 68vw, 960px); position: relative; width: 100%; height: calc(var(--W) * .64); margin-top: clamp(18px, 3vh, 32px); }
.hero-stage .handset { position: absolute; top: 0; left: calc(50% - var(--W) * .3704); width: var(--W); filter: drop-shadow(0 40px 50px rgba(23,32,28,.22)); }

/* ── La main : le téléphone est un trou dans l'image, la vidéo passe derrière ── */

.handset { --W: 800px; position: relative; width: var(--W); aspect-ratio: 1133 / 1300; }
.hs-hand { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.hs-screen { position: absolute; left: 20.25%; top: 2.45%; width: 33.57%; height: 63.27%; overflow: hidden; background: #0d0f0e; }
.hs-screen video, .hs-screen img { width: 100%; height: 100%; object-fit: cover; }

/* Les cartes de résultat, façon verre de l'app. Elles apparaissent quand la vidéo y arrive. */
.fc { position: absolute; width: 280px; padding: 16px 18px 17px; text-align: left; border-radius: 22px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 24px 50px -22px rgba(23,32,28,.4); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fc.on { opacity: 1; transform: none; }
.fc.left { right: calc(50% + var(--W) * .168 - 22px); }
.fc.right { left: calc(50% + var(--W) * .168 - 22px); }
.fc-1 { top: 4%; width: 220px; } .fc-2 { top: 27%; } .fc-3 { top: 6%; } .fc-4 { top: 50%; width: auto; padding: 12px 18px; border-radius: 99px; }
.fc-label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; color: var(--muted); }
.fc-label svg { width: 15px; height: 15px; color: var(--leaf); }
.fc-label.up { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 600; }
.fc-big { margin-top: 4px; font-size: 34px; font-weight: 300; letter-spacing: -.03em; line-height: 1.1; }
.fc-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
.fc-text { margin-top: 3px; font-size: 14px; line-height: 1.45; color: #4a564e; }
.fc-label.up + .fc-title { margin-top: 4px; }
.fc-action { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.fc-action svg { width: 20px; height: 20px; color: var(--green); }

.hero .hero-steps { display: none; }

/* Les étapes, en liste (cartes de fonction, et sous la main sur téléphone) */
.steps { display: grid; gap: 4px; margin-top: 26px; }
.steps li { position: relative; padding: 8px 0 18px 48px; }
.steps li::before { content: attr(data-step); position: absolute; left: 0; top: 11px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(23,32,28,.14); background: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; color: var(--muted); transition: background .4s, color .4s, border-color .4s; }
.steps li b { display: block; font-size: 17px; letter-spacing: -.01em; }
.steps li span { display: block; margin-top: 2px; font-size: 15px; color: #4a564e; line-height: 1.5; }


/* ── Piliers : trois cartes pastel avec une plante qui dépasse ─────────── */

.pillars { padding: clamp(72px, 10vw, 140px) 0 clamp(24px, 4vw, 48px); }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(36px, 5vw, 64px); }
.card-sage { background: var(--sage); } .card-cream { background: var(--cream); } .card-sky { background: var(--sky); } .card-blush { background: var(--blush); }

/* ── Les fonctions : des onglets, une grande carte colorée chacun ──────── */

.features { padding: clamp(64px, 9vw, 120px) 0 clamp(72px, 10vw, 140px); }

.card { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(24px, 4vw, 64px); align-items: center; height: 720px; padding: clamp(32px, 5vw, 72px) clamp(28px, 5vw, 80px); border-radius: 40px; overflow: hidden; }
.card[hidden] { display: none; }
.card::before { content: ""; position: absolute; right: -6%; bottom: -30%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 68%); pointer-events: none; }
.card-copy { position: relative; z-index: 2; }
.card h3 { font-size: clamp(34px, 4vw, 56px); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.card .lead { margin-top: 20px; color: #3f4a43; }
.card-media { position: relative; align-self: stretch; }
.card .handset { --W: min(800px, 62vw); position: absolute; top: 22px; left: calc(50% - var(--W) * .3704); filter: drop-shadow(0 30px 40px rgba(23,32,28,.2)); }
.card .strip { margin-top: 26px; max-width: 460px; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px rgba(23,32,28,.08), 0 18px 40px -22px rgba(23,32,28,.3); line-height: 0; background: #fff; }
.card .strip img { width: 100%; }

/* ── Prix et questions ─────────────────────────────────────────────────── */

/* ── Chapitres génériques (prix, questions, fin) ───────────────────────── */

.wrap.narrow { width: min(860px, 100% - 48px); }
.center { text-align: center; }
.chapter { padding: clamp(72px, 10vw, 140px) 0; }
.chapter.alt { background: var(--soft); }
.chapter-head { max-width: 760px; }
.chapter-head.center { margin-inline: auto; text-align: center; }
.chapter-head .lead { margin-top: 22px; }
.chapter-head.center .lead { margin-inline: auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf); }
.center .eyebrow { justify-content: center; }
.aside { margin-top: 44px; font-size: 16px; color: var(--muted); max-width: 40em; text-wrap: pretty; }
.aside.center { margin-inline: auto; }
h2 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 300; letter-spacing: -.025em; line-height: 1.06; text-wrap: balance; }

/* ── Prix ──────────────────────────────────────────────────────────────── */

.ticks { margin-top: 24px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 28px; font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 6px; border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg); }

/* ── Questions ─────────────────────────────────────────────────────────── */

.faq { margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; font-size: 18px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg); }
.faq details p { padding: 0 40px 26px 0; color: var(--muted); max-width: 42em; text-wrap: pretty; }
.faq a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 3px; }


/* ── Fin et pied ───────────────────────────────────────────────────────── */




/* ── Fin : une carte verte, des plantes qui se redressent sur l'étagère ── */

.closing { padding: clamp(48px, 7vw, 100px) 0 clamp(72px, 10vw, 140px); }
.closing-card { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 110px) 24px 0; border-radius: 44px; text-align: center; background: radial-gradient(ellipse 80% 60% at 50% 0%, #2f5a45, var(--green) 70%); color: #fff; min-height: 560px; }
.closing-card h2 { font-size: clamp(36px, 5.4vw, 72px); max-width: 14em; margin-inline: auto; }
.closing-card .cta { display: flex; justify-content: center; margin-top: 34px; }
.shelf-row { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 44px); margin-top: clamp(40px, 6vw, 80px); height: clamp(150px, 20vw, 260px); }
.shelf-row::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: 14px; border-radius: 8px 8px 0 0; background: rgba(255,255,255,.14); }
.shelf-row img { height: 100%; width: auto; transform-origin: 50% 100%; filter: drop-shadow(0 14px 14px rgba(0,0,0,.28)); animation: sway 7s ease-in-out infinite; }
.shelf-row img:nth-child(2) { animation-delay: -1.4s; } .shelf-row img:nth-child(3) { animation-delay: -2.8s; } .shelf-row img:nth-child(4) { animation-delay: -4.2s; } .shelf-row img:nth-child(5) { animation-delay: -5.6s; }
@keyframes sway { 50% { transform: rotate(1.6deg); } }

/* ── Pied ──────────────────────────────────────────────────────────────── */

.foot { padding: 40px 0 52px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 24px 64px; align-items: start; }
.foot .mark { color: var(--ink); }
.sig { margin-top: 10px; }
.foot nav { display: grid; gap: 8px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.legal { text-align: right; line-height: 1.7; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fc { opacity: 1; transform: none; transition: none; animation: none !important; }
  .steps li { opacity: 1; transition: none; }
  .shelf-row img { animation: none; }
}

/* ── Écrans moyens et petits ───────────────────────────────────────────── */

@media (max-width: 1100px) {
  .links { display: none; }
  .pillar-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .card { grid-template-columns: 1fr; height: auto; padding-bottom: 0; }
  .card-media { height: min(520px, 112vw); overflow: hidden; margin: 0 calc(-1 * clamp(28px, 5vw, 80px)); }
  .card .handset { --W: min(700px, 140vw); top: 10px; }
  .need-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .hero { overflow: hidden; }
  .hero-stage { --W: min(560px, 150vw); height: calc(var(--W) * .60); max-width: 100%; overflow: hidden; }
  .hero-stage .handset { left: calc(50% - var(--W) * .3704); }
  .fc { display: none; }
  .hero .hero-steps { display: grid; width: min(480px, 100% - 40px); margin: 24px auto 56px; text-align: left; }
  .hero::after { display: none; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap, .wrap.narrow { width: calc(100% - 40px); }
  .bar { height: 60px; }
  .bar-end .btn { padding: 9px 14px; font-size: 13.5px; }
  .bar-end .btn svg { width: 15px; height: 15px; }
  .bar-end { gap: 8px; }
  .hero h1 { font-size: clamp(42px, 12.4vw, 60px); }
  .hero h1 br { display: inline; }
  .hero-stage { --W: 150vw; height: 92vw; }
  .hero .hero-steps li span { font-size: 14px; }
  .tab { padding: 10px 16px; font-size: 15px; }
  .card { border-radius: 30px; padding: 28px 22px 0; }
  .closing-card { border-radius: 32px; }
  .foot-grid { grid-template-columns: 1fr; }
  .legal { text-align: left; }
}


/* ═════════ Passe UI (06/10/2026) : profondeur, rythme, hiérarchie ═════════ */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

.sec-head { max-width: 760px; margin: 0 auto; }
.sec-head h2 { margin-top: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.center .eyebrow, .chapter-head.center .eyebrow { justify-content: center; }

/* Piliers */
.pillars { padding: clamp(72px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.pillar-grid { gap: 20px; }
.pillar { position: relative; overflow: hidden; min-height: 520px; padding: 32px 30px 0; border-radius: 34px; display: flex; flex-direction: column; isolation: isolate; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pillar::before { content: ""; position: absolute; z-index: -1; right: -22%; bottom: -26%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 66%); }
.ptag { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px 6px 10px; margin-bottom: 18px; border-radius: 99px; background: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; color: #34413a; }
.ptag svg { width: 18px; height: 18px; }
.pillar h3 { font-size: clamp(26px, 2.5vw, 32px); font-weight: 500; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.pillar p:not(.ptag) { margin-top: 12px; color: #3f4a43; font-size: 16px; max-width: 22em; text-wrap: pretty; }

/* Les quatre besoins = les quatre onglets */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: clamp(32px, 4vw, 52px) 0 18px; }
.tab { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px 18px; border: 1px solid var(--line); border-radius: 22px; background: #fff; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s, background .3s; }
.tab:hover { box-shadow: 0 14px 28px -22px rgba(23,32,28,.4); }
.tab .ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; font-style: normal; transition: background .3s, color .3s; }
.tab .ic svg { width: 24px; height: 24px; }
.tab.t-sage .ic { background: var(--sage); color: #2d5a3d; } .tab.t-cream .ic { background: var(--cream); color: #8a6a1f; } .tab.t-sky .ic { background: var(--sky); color: #2f6a8f; } .tab.t-blush .ic { background: var(--blush); color: #b4553a; }
.tab[aria-selected="true"] { border-color: transparent; box-shadow: 0 14px 26px -18px rgba(23,32,28,.4); }
.tab.t-sage[aria-selected="true"] { background: var(--sage); } .tab.t-cream[aria-selected="true"] { background: var(--cream); } .tab.t-sky[aria-selected="true"] { background: var(--sky); } .tab.t-blush[aria-selected="true"] { background: var(--blush); }
.tab[aria-selected="true"] .ic { background: #fff; }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; transform: translateX(-50%) rotate(45deg); border-radius: 4px; background: inherit; z-index: 0; }
.tab > * { position: relative; z-index: 1; }

/* La grande carte : plus de profondeur */
.card { height: 740px; border-radius: 42px; box-shadow: 0 50px 80px -60px rgba(23,32,28,.5); animation: swap .6s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.card::before { right: -4%; bottom: -34%; width: 70%; background: radial-gradient(circle, rgba(255,255,255,.75), rgba(255,255,255,0) 66%); }
.card::after { content: ""; position: absolute; left: -10%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.4), rgba(255,255,255,0) 68%); pointer-events: none; }
.card h3 { font-size: clamp(36px, 4.4vw, 62px); }
.card .lead { font-size: clamp(17px, 1.5vw, 20px); }
.card .handset { top: 30px; filter: drop-shadow(0 40px 46px rgba(23,32,28,.26)); }

.prix { background: linear-gradient(180deg, var(--bg) 0%, var(--soft) 22%, var(--soft) 100%); }

/* Questions : titre à gauche, accordéons à droite */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 7vw, 110px); align-items: start; }
.faq-grid .chapter-head { position: sticky; top: 100px; max-width: none; }
.faq-grid .chapter-head h2 { margin-top: 0; }
.faq-help { margin-top: 22px; max-width: 22em; }
.faq-mail { margin-top: 24px; }
.faq-grid .faq { margin-top: 0; border-top: 0; display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: 22px; background: #fff; padding: 0 24px; transition: box-shadow .3s, border-color .3s; }
.faq details:hover { border-color: #d3d0c6; }
.faq details[open] { box-shadow: 0 24px 44px -34px rgba(23,32,28,.45); border-color: #d3d0c6; }
.faq summary { padding: 20px 0; }
.faq details p { padding: 0 8px 24px 0; }

/* Fin */
.closing-card { box-shadow: 0 50px 80px -50px rgba(23,58,46,.7); }
.closing-card h2 { text-shadow: 0 2px 30px rgba(0,0,0,.18); }

@media (max-width: 1100px) {
  .tabs { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; }
  .faq-grid .chapter-head { position: static; }
  .pillar { min-height: 440px; }
}
@media (max-width: 960px) { .card { height: auto; } }
@media (max-width: 560px) {
  .tabs { grid-template-columns: 1fr; gap: 10px; }
  .tab { padding: 12px 14px; }
  .tab[aria-selected="true"]::after { display: none; }
  .faq details { padding: 0 18px; }
}



/* ═════════ Prix : un seul montant affiché, un sélecteur à glissière ═════════ */

.plans { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 20px; margin-top: clamp(40px, 5vw, 64px); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: clamp(30px, 3.4vw, 46px); border-radius: 34px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -48px rgba(23,32,28,.5); }
.plan-kicker { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--leaf); }
.plan h3 { margin-top: 10px; font-size: 26px; font-weight: 600; letter-spacing: -.02em; }
.plan-sub { margin-top: 6px; color: var(--muted); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 22px; }
.plan-price .amt { font-size: clamp(54px, 5.4vw, 76px); font-weight: 300; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.plan-price .per { font-size: 17px; color: var(--muted); }
.plan-note { margin-top: 10px; max-width: 26em; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.ticks { margin-top: 28px; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 30px; font-size: 16px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.6L13 6.6' fill='none' stroke='%232d5a3d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; border: 0; transform: none; }
.plan.free .ticks { margin-top: auto; padding-top: 28px; border-top: 1px solid var(--line); margin-top: 30px; }

/* Plus : la carte sombre */
.plan.plus { color: #fff; background: radial-gradient(ellipse 80% 60% at 90% -10%, #3f7157 0%, transparent 60%), linear-gradient(160deg, #24493a, #1a3126); box-shadow: 0 60px 90px -50px rgba(18,42,31,.8); }
.plan.plus .plan-kicker { color: #a9d8b8; }
.plan.plus .plan-sub { color: rgba(255,255,255,.75); }
.plan.plus .plan-price .per, .plan.plus .plan-note { color: rgba(255,255,255,.72); }
.plan.plus .ticks li::before { background-color: rgba(255,255,255,.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='m5 9.4 2.6 2.6L13 6.6' fill='none' stroke='%23c9ecd5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.best { font-style: normal; align-self: center; padding: 4px 11px; border-radius: 99px; background: #cdeed8; color: #1f4a32; font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* Le sélecteur : une pastille glisse sous le choix */
.seg3 { --i: 1; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 26px; padding: 5px; border-radius: 99px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.seg3 .thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 99px; background: #fff; box-shadow: 0 8px 18px -8px rgba(0,0,0,.5); transform: translateX(calc(var(--i) * 100%)); transition: transform .5s var(--ease); }
.seg3 button { position: relative; z-index: 1; border: 0; background: none; padding: 11px 6px; border-radius: 99px; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.8); transition: color .35s; white-space: nowrap; }
.seg3 button[aria-checked="true"] { color: var(--green); }
.seg3 button:focus-visible { outline-color: #fff; }

/* Un seul montant visible : l'ancien monte et s'efface, le nouveau arrive d'en bas */
.pv-stack { position: relative; min-height: 164px; margin-top: 6px; }
.pv { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity .45s var(--ease), transform .55s var(--ease), filter .45s; pointer-events: none; }
.pv.on { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.pv.out { transform: translateY(-18px); }
.plan-cta { margin-top: auto; align-self: flex-start; transition: transform .3s var(--ease), box-shadow .3s; }
.plan.plus .ticks { margin-bottom: 34px; }

@media (max-width: 1100px) { .plans { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .plan { padding: 26px 22px 28px; border-radius: 28px; }
  .pv-stack { min-height: 190px; }
  .seg3 button { font-size: 14px; padding: 10px 2px; }
}

/* ═════════ Mouvement : doux, court, jamais gratuit ═════════ */

:root { interpolate-size: allow-keywords; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes grow { from { opacity: 0; transform: translateX(-50%) translateY(46px) scale(.9); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes growx { from { opacity: 0; transform: translateY(40px) scale(.88); } to { opacity: 1; transform: none; } }

/* Premier écran : le décor se pose, puis le texte monte ligne après ligne, puis la main */
@media (prefers-reduced-motion: no-preference) {
  .hero { background-position: center calc(42% + var(--py, 0px)); }
  .hero::before { animation: fadein 1.4s var(--ease) both; }
  .hero .pill, .hero h1, .hero .lead, .hero .cta, .hero .fine { animation: rise .8s var(--ease) both; }
  .hero .pill { animation-delay: 0s; } .hero h1 { animation-delay: .05s; } .hero .lead { animation-delay: .12s; } .hero .cta, .hero .fine { animation-delay: .2s; }
  .hero-stage { animation: rise .9s var(--ease) .25s both; }
  .top .bar { animation: fadein .9s var(--ease) .1s both; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }


/* Les onglets : au changement, le texte monte par étages, la main glisse */
.card-copy > * { animation: rise .45s var(--ease) both; }
.card-copy > :nth-child(2) { animation-delay: .04s; } .card-copy > :nth-child(3) { animation-delay: .08s; } .card-copy > :nth-child(4) { animation-delay: .12s; }
.card .handset { animation: handin .5s var(--ease) both; }
@keyframes handin { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.card[hidden] .handset { animation: none; }
.tab .ic { transition: transform .4s var(--ease), background .3s; }
.tab:hover .ic, .tab[aria-selected="true"] .ic { transform: rotate(-6deg) scale(1.06); }

/* Boutons et liens */
.btn { transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .2s; }
.btn:not(.soon):hover, .btn.soon:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(23,32,28,.55); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: scale(1.12) rotate(-6deg); }
.textlink { position: relative; border-bottom: 0; }
.textlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform-origin: right; transition: transform .45s var(--ease); }
.textlink:hover::after { transform: scaleX(0); transform-origin: left; }
.textlink span { display: inline-block; transition: transform .35s var(--ease); }
.textlink:hover span { transform: translateY(3px); }
.links a { position: relative; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--leaf); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.links a:hover::after { transform: scaleX(1); }
.seg button { transition: background .3s, color .3s; }
.mark img { transition: transform .5s var(--ease); }
.mark:hover img { transform: rotate(-8deg) scale(1.06); }

/* Questions : l'ouverture glisse au lieu de sauter (là où le navigateur sait animer ses <details>) */
.faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq summary { transition: color .2s; }
.faq summary::after { transition: transform .5s var(--ease); }

/* La fin : les plantes poussent l'une après l'autre, puis se balancent */
.closing-card .shelf-row img { opacity: 0; }
.closing-card.in .shelf-row img { animation: growx .95s var(--ease) both, sway 7s ease-in-out 1.4s infinite; }
.closing-card.in .shelf-row img:nth-child(1) { animation-delay: .15s, 1.4s; } .closing-card.in .shelf-row img:nth-child(2) { animation-delay: .27s, 2s; } .closing-card.in .shelf-row img:nth-child(3) { animation-delay: .39s, 2.6s; } .closing-card.in .shelf-row img:nth-child(4) { animation-delay: .51s, 3.2s; } .closing-card.in .shelf-row img:nth-child(5) { animation-delay: .63s, 3.8s; }
html:not(.js) .closing-card .shelf-row img { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .closing-card .shelf-row img { opacity: 1; animation: none !important; }
  .pv { transition: none; } .seg3 .thumb { transition: none; }
}

.plan-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 28px; font-size: 14px; color: var(--muted); }
.plan-foot svg { flex: none; width: 20px; height: 20px; color: var(--leaf); }
.plan.free .ticks { margin-bottom: 0; }

@media (max-width: 560px) { .seg3 button { font-size: 13px; padding: 10px 0; letter-spacing: -.01em; } }


/* ═════════ Raffinement 1 : l'en-tête se réduit, se cache vers le bas, revient vers le haut ═════════ */

.top { transition: transform .6s var(--ease); }
.top.hide { transform: translateY(-96px); }
.bar { transition: height .45s var(--ease); }
.top::after { transition: opacity .3s, height .45s var(--ease); }
.top.sunk .bar { height: 58px; }
.top.sunk::after { height: 58px; }
.top.sunk .mark img { width: 28px; height: 28px; }
.mark img { transition: width .45s var(--ease), height .45s var(--ease), transform .5s var(--ease); }
.top .prog { position: absolute; z-index: 2; left: 0; top: 57px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--leaf), #8fcf9f); transform-origin: left; transform: scaleX(var(--sp, 0)); opacity: 0; transition: opacity .3s; pointer-events: none; }
.top.sunk .prog { opacity: .9; }

/* ═════════ Raffinement 2 : un détail vivant par carte de fonction ═════════ */

.card-media { --W: min(800px, 62vw); }
.card .fc { z-index: 3; width: 250px; padding: 14px 16px 15px; }
.card .fc-c1 { top: 12%; } .card .fc-c2 { top: 56%; width: auto; padding: 12px 18px; border-radius: 99px; }
.card .fc.left { right: calc(50% + var(--W) * .168 - 14px); } .card .fc.right { left: calc(50% + var(--W) * .168 - 14px); }
.fc.auto { animation: chipin .5s var(--ease) .35s both; opacity: 0; }
.fc.auto.fc-c2 { animation-delay: .5s; }
@keyframes chipin { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.fc.auto::after { content: none; }
.card .fc.on, .fc.auto { animation: chipin .5s var(--ease) .35s both; }
.card .fc.auto.fc-c2 { animation-delay: .5s; }
.fc-action svg { flex: none; }
.dropdot { width: 8px; height: 11px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #4a90d9; }

/* « Quand l'arroser » : l'anneau se remplit, puis une coche confirme, en boucle */
.fc-ring { display: flex; align-items: center; gap: 12px; width: 290px; }
.fc-ring .ring { flex: none; width: 46px; height: 46px; transform: rotate(-90deg); }
.fc-ring .trk { fill: none; stroke: rgba(74,144,217,.2); stroke-width: 3; }
.fc-ring .arc { fill: none; stroke: #4a90d9; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: fill 1.6s var(--ease) .7s both; }
.fc-ring .drp { color: #4a90d9; fill: #4a90d9; transform: rotate(90deg); transform-origin: 22px 22px; }
@keyframes fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.fc-done { animation: chipin .5s var(--ease) .5s both !important; }
.fc-done .fc-action svg { color: var(--leaf); }
html[data-lang] .fc-done { }

/* ═════════ Raffinement 3 : la typographie ═════════ */

body { font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; hanging-punctuation: first; }
h1, h2, .card h3, .pillar h3 { font-weight: 250; font-variation-settings: "wght" 250; }
h1 b, h2 b, .card h3 b, .pillar h3 b { font-weight: 720; font-variation-settings: "wght" 720; letter-spacing: -.045em; }
.hero h1 { letter-spacing: -.05em; font-size: clamp(50px, 6.8vw, 100px); }
h2 { letter-spacing: -.04em; }
.lead, .plan-note, .pillar p:not(.ptag), .fc-text { font-weight: 420; }
.lead { line-height: 1.55; }
.eyebrow, .plan-kicker, .fc-label.up { letter-spacing: .1em; font-weight: 700; }
.pillar h3 { font-weight: 360; font-variation-settings: "wght" 360; letter-spacing: -.035em; }
.pillar h3 b { font-weight: 700; }
.tab { font-weight: 560; }
.steps li b { font-weight: 640; letter-spacing: -.012em; }
.plan h3 { font-weight: 640; }
/* Chiffres : tabulaires, fins, avec le symbole en retrait */
.amt, .fc-big, .gauge b { font-variant-numeric: tabular-nums lining-nums; }
.plan-price .amt { font-weight: 200; font-variation-settings: "wght" 200; letter-spacing: -.055em; }
.amt small { font-size: .38em; font-weight: 500; letter-spacing: 0; margin-left: .14em; vertical-align: .95em; opacity: .8; }
.amt small.pre { margin: 0 .14em 0 0; }
.plan.plus .amt { font-weight: 250; }
.fc-big { font-weight: 250; font-variation-settings: "wght" 250; letter-spacing: -.04em; }
.faq summary { font-weight: 540; letter-spacing: -.012em; }
.foot, .fine { font-weight: 450; }
::selection { background: #cfe8d6; color: var(--ink); }

/* Les puces de droite restent dans la carte */
.card .fc.right { left: auto; right: 10px; max-width: calc(50% - 6px); white-space: normal; }
.card .fc-action { white-space: normal; text-align: left; line-height: 1.3; }
.card .fc-c2 { top: 58%; }
@media (max-width: 960px) { .card .fc { display: none; } }


/* ═════════ Version téléphone : pensée pour le pouce ═════════ */

/* Au doigt, pas de survol « collant » : on garde un retour au toucher à la place */
@media (hover: none) {
  .btn:hover, .tab:hover, .faq details:hover { transform: none; box-shadow: none; }
  .tab:hover .ic { transform: none; }
  .textlink:hover::after { transform: none; }
  .btn:active { transform: scale(.97); }
  .tab:active { transform: scale(.97); }
  .pillar:active { transform: scale(.985); }
  .faq summary:active { color: var(--leaf); }
  .hero { background-position: center 42%; }
  * { -webkit-tap-highlight-color: transparent; }
}

/* Les bords de l'écran (encoche, barre d'accueil) */
.bar { padding-top: env(safe-area-inset-top); }
.foot { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }

@media (max-width: 820px) {
  /* Les trois étapes : un panneau de verre sous la main, lisible sur la photo */
  .hero .hero-steps { margin: 0 auto 36px; padding: 18px 20px 14px; width: min(520px, 100% - 32px); border-radius: 26px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 30px 50px -34px rgba(23,32,28,.5); }
  .hero-stage { margin-bottom: 18px; }
  .hero::after { display: none; }
  .seg button { padding: 8px 14px; font-size: 14px; }
  .bar .btn-sm { padding: 10px 16px; }

  /* Piliers : un carrousel qu'on fait glisser, la carte suivante dépasse */
  .pillar-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 32px -20px 0; padding: 4px 20px 26px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pillar-grid::-webkit-scrollbar { display: none; }
  .pillar { flex: 0 0 80%; scroll-snap-align: center; min-height: 430px; padding: 26px 24px 0; }
  .pillar:first-child { margin-left: 0; }
  .pillar p:not(.ptag) { font-size: 15px; }

  /* Les quatre besoins : une rangée qu'on fait défiler, la tuile choisie se centre */
  .tabs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; margin: 24px -20px -4px; padding: 8px 20px 44px; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 28px), transparent); }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; scroll-snap-align: center; padding: 10px 18px 10px 10px; gap: 10px; font-size: 15px; white-space: nowrap; min-height: 56px; }
  .tab .ic { width: 38px; height: 38px; border-radius: 12px; } .tab .ic svg { width: 20px; height: 20px; }
  .tab[aria-selected="true"]::after { display: none; }

  /* Les cartes de fonction : sur téléphone, la main et l'écran, sans cartes flottantes (la frise d'étapes dit déjà la même chose) */
  .card { padding: 30px 22px 0; }
  .card-media { --W: 118vw; height: min(560px, 142vw); margin: 0 -22px; }
  .card .handset { --W: 118vw; top: 24px; left: calc(50% - var(--W) * .3704); }
  .card .fc { display: none; }

  .faq-grid .chapter-head { text-align: center; }
  .faq-grid .chapter-head .eyebrow, .faq-grid .faq-mail { margin-inline: auto; }
  .faq-help { margin-inline: auto; }
  .faq summary { min-height: 56px; padding: 14px 0; }
}

@media (max-width: 560px) {
  h2 { font-size: clamp(32px, 9.4vw, 44px); }
  .hero { padding-top: calc(86px + env(safe-area-inset-top)); }
  .hero .cta .btn-lg { padding: 16px 24px; }
  .hero .cta .textlink { padding: 8px 4px; }
  .pillars { padding-top: 64px; } .features { padding-top: 56px; }
  .plan.plus .tiers, .pv-stack { min-height: 176px; }
  .seg3 button { min-height: 44px; }
  .closing-card { padding-top: 52px; min-height: 0; }
  .closing-card h2 { font-size: clamp(32px, 9.6vw, 44px); }
  .shelf-row { height: 138px; gap: 10px; margin-top: 34px; }
  .shelf-row img:nth-child(1), .shelf-row img:nth-child(5) { display: none; }
  .foot-grid { gap: 22px; }
  .foot nav a { padding: 6px 0; }
}


/* Le titre, plus long : deux lignes équilibrées */
.hero-copy { width: min(1000px, 100% - 40px); }
.hero h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; }
@media (max-width: 560px) { .hero h1 { font-size: clamp(36px, 10.6vw, 50px); } .hero h1 br { display: none; } }

/* La capture de la fiche : un écran qui sort de la carte par le bas, plutôt qu'une plante détourée. */


/* ═════════ Les trois cartes « ce que ça change » : chacune a son visuel animé ═════════ */

.pillar { min-height: 600px; }
.pvis { position: relative; flex: 1; min-height: 300px; margin: 20px -30px 0; overflow: hidden; }

/* 1 · la fiche : une vraie capture, qui dépasse de la carte par le bas */
.pv-fiche img { position: absolute; top: 4px; left: 50%; width: 62%; max-width: 310px; height: auto; transform: translateX(-50%); border-radius: 30px 30px 0 0; box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 30px 44px -20px rgba(31,58,46,.45); }
html[data-lang="fr"] .pv-fiche img.en, html[data-lang="en"] .pv-fiche img.fr { display: none; }

/* 2 · le scan : une ligne parcourt la plante, puis la réponse s'affiche (7 s, tant que la carte est à l'écran) */
.scan { position: absolute; inset: 4px 13% -40px; border-radius: 28px 28px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.75), 0 30px 44px -20px rgba(31,58,46,.45); background: #2a2f2b; }
.scan > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cn { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(255,255,255,.95); }
.cn.tl { left: 16px; top: 16px; border-left-width: 2px; border-top-width: 2px; border-top-left-radius: 8px; }
.cn.tr { right: 16px; top: 16px; border-right-width: 2px; border-top-width: 2px; border-top-right-radius: 8px; }
.cn.bl { left: 16px; bottom: 56px; border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: 8px; }
.cn.br { right: 16px; bottom: 56px; border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 8px; }
.beam { position: absolute; left: 0; right: 0; top: 0; height: 70px; opacity: 0; background: linear-gradient(to bottom, rgba(190,255,205,0), rgba(190,255,205,.5)); border-bottom: 2px solid rgba(225,255,232,.95); }
.scan-pop { position: absolute; left: 10px; right: 10px; bottom: 46px; padding: 10px 13px 11px; border-radius: 20px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 30px -16px rgba(0,0,0,.5); opacity: 0; transform: translateY(14px); }
.scan-pop .fc-title { font-size: 20px; margin-top: 3px; }
.scan-pop .fc-text { font-size: 13.5px; margin-top: 3px; line-height: 1.35; }
@media (prefers-reduced-motion: no-preference) {
  .pillar.in .beam { animation: beam 7s var(--ease) infinite; }
  .pillar.in .scan-pop { animation: pop 7s var(--ease) infinite; }
  .pillar.in .cn { animation: cn 7s ease-in-out infinite; }
}
@keyframes beam { 0% { top: -70px; opacity: 0; } 4% { opacity: 1; } 34% { top: 100%; opacity: 1; } 38%, 100% { top: 100%; opacity: 0; } }
@keyframes pop { 0%, 36% { opacity: 0; transform: translateY(14px); } 44%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes cn { 0%, 6%, 38%, 100% { transform: none; } 20% { transform: scale(.88); } }
@media (prefers-reduced-motion: reduce) { .scan-pop { opacity: 1; transform: none; } }
html:not(.js) .scan-pop { opacity: 1; transform: none; }

/* 3 · son histoire : la même plante, mars, mai, juillet (9 s) */
.pv-grow img { position: absolute; left: 50%; bottom: 46px; height: calc(100% - 52px); width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; opacity: 0; filter: drop-shadow(0 22px 20px rgba(31,58,46,.25)); }
.pv-grow .g3 { opacity: 1; }
.gdate { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: grid; padding: 6px 16px; border-radius: 99px; background: rgba(255,255,255,.75); font-size: 13px; font-weight: 600; color: #34413a; }
.gdate span { grid-area: 1 / 1; text-align: center; opacity: 0; }
.gdate .d3 { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pillar.in .pv-grow .g1 { animation: g1 9s var(--ease) infinite; } .pillar.in .pv-grow .g2 { animation: g2 9s var(--ease) infinite; } .pillar.in .pv-grow .g3 { animation: g3 9s var(--ease) infinite; }
  .pillar.in .gdate .d1 { animation: d1 9s infinite; } .pillar.in .gdate .d2 { animation: d2 9s infinite; } .pillar.in .gdate .d3 { animation: d3 9s infinite; }
}
@keyframes g1 { 0% { opacity: 0; transform: translateX(-50%) scale(.92); } 6%, 26% { opacity: 1; transform: translateX(-50%) scale(1); } 32%, 100% { opacity: 0; transform: translateX(-50%) scale(1.02); } }
@keyframes g2 { 0%, 26% { opacity: 0; transform: translateX(-50%) scale(.94); } 34%, 56% { opacity: 1; transform: translateX(-50%) scale(1); } 62%, 100% { opacity: 0; transform: translateX(-50%) scale(1.02); } }
@keyframes g3 { 0%, 56% { opacity: 0; transform: translateX(-50%) scale(.94); } 64%, 92% { opacity: 1; transform: translateX(-50%) scale(1); } 98%, 100% { opacity: 0; } }
@keyframes d1 { 0% { opacity: 0; } 6%, 26% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes d2 { 0%, 28% { opacity: 0; } 34%, 56% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes d3 { 0%, 58% { opacity: 0; } 64%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }

/* Sur téléphone : les piliers défilent à l'horizontale, ils sont là d'emblée (pas d'apparition hors écran) */
@media (max-width: 820px) {
  .pillar.reveal { opacity: 1; transform: none; transition: none; }
  .pillar { min-height: 560px; }
  .pvis { margin: 16px -24px 0; min-height: 280px; }
  .pv-fiche img { width: 58%; }
}


/* ═════════ Pages de texte (assistance, confidentialité) ═════════ */

.doc-main { max-width: 760px; padding: clamp(120px, 14vw, 170px) 0 clamp(64px, 9vw, 120px); }
.doc-main h1 { font-size: clamp(40px, 6vw, 64px); line-height: 1.04; margin-bottom: 18px; }
.doc-main .lede { font-size: clamp(18px, 2vw, 21px); color: #3f4a43; line-height: 1.55; margin-bottom: 40px; }
.doc-main h2 { font-size: clamp(26px, 3vw, 34px); margin: 56px 0 14px; }
.doc-main h3 { font-size: 19px; font-weight: 640; letter-spacing: -.01em; margin: 30px 0 6px; }
.doc-main p, .doc-main li { font-size: 17px; line-height: 1.65; color: #3a453e; }
.doc-main p + p { margin-top: 12px; }
.doc-main ul, .doc-main ol { padding-left: 22px; margin: 10px 0; }
.doc-main a { color: var(--leaf); text-underline-offset: 3px; }
.doc-main table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.doc-main th, .doc-main td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.doc .top .links { display: none; }
@media (min-width: 900px) { .doc .top .links { display: flex; } }


/* ═════════ Les étapes : une frise. Les numéros se remplissent, le filet descend pendant que la vidéo joue ═════════
   Le texte ne s'efface jamais ; seul le numéro dit où l'on en est. */
.steps { gap: 0; }
.steps li::before { left: 0; top: 7px; width: 30px; height: 30px; font-size: 14px; z-index: 1; border: 1.5px solid rgba(23,32,28,.2); background: #fff; color: #4a564e; transition: background .4s var(--ease), border-color .4s, color .4s, box-shadow .4s; }
.steps li b { color: var(--ink); }
.steps li span { color: #55615a; }
.steps li.on::before { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.steps li.cur::before { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 5px rgba(31,58,46,.14); }
.steps li::after { content: ""; position: absolute; left: 14px; top: 40px; bottom: 2px; width: 2px; border-radius: 2px; background: linear-gradient(var(--leaf), var(--leaf)) top / 100% calc(var(--p, 0) * 100%) no-repeat, rgba(23,32,28,.12); }
.steps li:last-child::after { display: none; }
@media (prefers-reduced-motion: reduce) { .steps li::after { background: var(--leaf); } .steps li.cur::before { box-shadow: none; } }