/* =====================================================================
   Feuio — vitrine (accueil, pages d'aide, pages légales, comparatifs)
   S'appuie sur base.css (jetons, boutons, champs) : aucune couleur de marque ici.
   Mobile d'abord (390 px), puis 2 colonnes à partir de 1000 px.
   ===================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { overflow-x: hidden; }
main { position: relative; z-index: 1; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r); background: var(--ink); color: var(--bg); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Décor : halos flous et palmes très discrètes (jamais derrière un formulaire) ---------- */
.decor { position: absolute; inset: 0 0 auto 0; height: 1100px; overflow: hidden; pointer-events: none; z-index: 0; }
.decor i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.decor .h1 { width: 520px; height: 520px; right: -140px; top: 40px; background: radial-gradient(circle, color-mix(in srgb, #4FB7AC 55%, transparent), transparent 70%); }
.decor .h2 { width: 460px; height: 460px; right: 18%; top: 460px; background: radial-gradient(circle, color-mix(in srgb, #F09A57 45%, transparent), transparent 70%); opacity: .4; }
.decor svg { position: absolute; right: -70px; top: 120px; width: 300px; height: auto; opacity: .12; filter: blur(5px); color: #2F6B4F; }
@media (max-width: 999px) { .decor .h2 { display: none; } .decor svg { top: auto; bottom: 0; right: -120px; opacity: .08; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .decor i { opacity: .22; } :root:not([data-theme="light"]) .decor svg { opacity: .07; } }
:root[data-theme="dark"] .decor i { opacity: .22; }

/* ---------- En-tête ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.head-in { display: flex; align-items: center; gap: var(--s4); height: 64px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; }        /* logo d'origine de FX (symbole haut) : 40 px pour lire le mot */
.head-nav { flex: 1; display: none; justify-content: center; align-items: center; gap: 14px; font-weight: 550; }
.head-nav a { color: var(--ink); text-decoration: none; padding: 6px 4px; border-radius: 6px; }
.head-nav a:hover { color: var(--brand); }
.head-nav span { color: var(--muted); }
.head-cta { margin-left: auto; min-height: 40px; }
@media (min-width: 760px) { .head-nav { display: flex; } .head-cta { margin-left: 0; } }
/* Bascule de langue FR ⇄ EN (vitrine anglaise sous /en/) : avant le bouton du compte, poussée à droite sur téléphone */
.lang-switch { margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--ink); font-size: 13px; font-weight: 650; letter-spacing: .06em; text-decoration: none; }
.lang-switch:hover { color: var(--brand); border-color: currentColor; }
.lang-switch + .head-cta { margin-left: 0; }
@media (min-width: 760px) { .lang-switch { margin-left: 0; } }

/* ---------- Sections ---------- */
.section { position: relative; padding: var(--s8) 0; }
.section.tight { padding: var(--s7) 0; }
.section.alt { background: var(--bg-2); }
.section-head { max-width: 720px; margin-bottom: var(--s6); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: 10px 0 12px; }
.section-head h2 em, h1 em { font-style: normal; color: var(--brand); }
.section-head p { color: var(--ink-2); font-size: var(--fs-lg); margin: 0; }
@media (max-width: 640px) { .section { padding: var(--s7) 0; } }

/* ---------- Héros (maquette de FX, 29/10 : vague3/notes/vitrine-maquette.md) ----------
   Téléphone : titre, confiance, carte « Choisir un PDF », puis l'exemple sur un téléphone, la terrasse en fond.
   Dès 1180 px : 2 colonnes ; à droite, le vrai lecteur dans un écran d'ordinateur, devant la terrasse face au lagon. */
.hero { position: relative; isolation: isolate; padding: 30px 0 var(--s7); overflow-x: clip; }
.hero-photo { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 430px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 38%); mask-image: linear-gradient(to bottom, transparent, #000 38%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.hero-grid { display: grid; gap: 30px; align-items: center; }
.hero h1 { font-size: clamp(40px, 5.3vw, 76px); font-weight: 620; line-height: 1.02; letter-spacing: -.03em; }
.hero .sub { font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-2); margin: 16px 0 18px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0 0 18px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 560; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust svg { color: var(--brand); flex: none; }
@media (min-width: 1180px) {
  .hero { padding: 40px 0 var(--s8); min-height: calc(100vh - 64px); display: flex; align-items: center; }
  .hero > .wrap { width: min(1440px, 100% - 48px); }
  /* Le lecteur garde ses 700 px (en dessous, il passe en mode téléphone), plus le cadre de l'écran (2 × 12 px) */
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(724px, 1.12fr); gap: 36px; }
  .hero h1 { font-size: clamp(42px, 4vw, 74px); }
  .hero-photo { left: auto; top: 0; height: auto; width: 64vw;
    -webkit-mask-image: radial-gradient(120% 115% at 100% 28%, #000 52%, transparent 76%); mask-image: radial-gradient(120% 115% at 100% 28%, #000 52%, transparent 76%); }
  .hero-photo img { object-position: 58% 60%; }
}
@media (min-width: 1320px) {
  .hero { padding: 48px 0 var(--s8); }
  .hero > .wrap { width: min(1440px, 100% - 64px); }
  .hero-grid { gap: 48px; }
  .hero h1 { font-size: clamp(48px, 4.4vw, 74px); }
}
@media (min-width: 740px) and (max-width: 1179px) { .hero-text { max-width: 760px; } .hero-photo { height: 560px; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-photo img { filter: brightness(.62) saturate(.9); } }
:root[data-theme="dark"] .hero-photo img { filter: brightness(.62) saturate(.9); }

/* ---------- Carte « Choisir un PDF » (zone de dépôt) : toute la carte ouvre le choix du fichier ---------- */
.drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; text-align: left; cursor: pointer;
  border: 2px dashed color-mix(in srgb, var(--accent) 58%, transparent); border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--accent) 70%, transparent), var(--sh-1);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s, background .3s; }
.drop.is-over { border-style: solid; border-color: var(--accent); background: var(--accent-soft); transform: scale(1.015); }
.drop .ico { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 82%, var(--ink));
  transition: transform .6s var(--ease-out); }
.drop .ico svg { width: 34px; height: 34px; }
.drop-txt { display: grid; gap: 3px; min-width: 0; }
.drop-txt strong { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.01em; }
.drop-txt .desk { font-size: var(--fs-sm); color: var(--ink-2); }
/* Petits textes sur fond teinté : --ink-2 (le gris --muted y descend sous 4,5:1) */
.drop .hint { display: block; margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.drop-go { width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--accent); color: #1A0F06;
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--accent) 90%, transparent); transition: transform .45s var(--ease-out), box-shadow .3s, translate .35s var(--ease-out); }
.drop-go svg { transition: transform .45s var(--ease-out); }
.drop-go:focus-visible { outline: none; box-shadow: var(--focus), 0 12px 24px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-foot { margin: 10px 4px 0; font-size: var(--fs-xs); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .drop:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 30px 56px -26px color-mix(in srgb, var(--accent) 80%, transparent), var(--sh-2); }
  .drop:hover .ico { transform: translateY(-3px) rotate(-4deg); }
  .drop:hover .drop-go svg { transform: translateX(3px); }
}
.drop:active .drop-go { transform: scale(.95); }
@media (max-width: 640px) { .drop .desk { display: none; } }
@media (max-width: 420px) { .drop { gap: 12px; padding: 14px; } .drop .ico { width: 48px; height: 48px; border-radius: 15px; } .drop .ico svg { width: 28px; height: 28px; } .drop-go { width: 52px; height: 52px; } }

/* Carte d'essai (progression, aperçu prêt, erreurs) : prend la place de la zone de dépôt */
.essai-card { border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); padding: 22px; }
.steps { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li + li::before { content: ""; width: 26px; height: 1.5px; background: var(--line-2); }
.steps b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-2); font-size: 12px; }
.steps .on { color: var(--ink); } .steps .on b { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.steps .ok b { border-color: var(--brand); background: var(--brand); color: var(--brand-ink); }
.steps .ok b svg { width: 14px; height: 14px; }
.essai-body { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; }
.cover-build { position: relative; aspect-ratio: 210 / 297; border-radius: 6px; overflow: hidden; background: var(--bg-2); box-shadow: var(--sh-2); }
.cover-build img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out); }
.cover-build img.on { clip-path: inset(0 0 0 0); }
.cover-build .skel { position: absolute; inset: 0; border-radius: 0; }
.prog-label { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-md); font-weight: 600; margin-bottom: 10px; }
.prog-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { height: 10px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #4FB7AC)); transition: width .35s var(--ease); }
.lockline { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.lockline svg { flex: none; color: var(--brand); margin-top: 1px; }
.essai-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ready-title { margin-top: 16px; }
.essai-err { margin-top: 4px; }
.essai-err h3 { font-size: var(--fs-xl); margin-bottom: 6px; }
@media (max-width: 420px) { .essai-body { grid-template-columns: 84px 1fr; gap: 14px; } .essai-card { padding: 18px; } }

/* ---------- Démo du héros : le vrai lecteur dans un écran d'ordinateur ----------
   La lueur (couleurs de la page affichée, posées par home.js en --g1 / --g2) sert de fond d'écran. */
@property --g1 { syntax: "<color>"; inherits: true; initial-value: #4FB7AC; }
@property --g2 { syntax: "<color>"; inherits: true; initial-value: #F2A66B; }
.hero-demo { position: relative; }
.laptop { position: relative; z-index: 1; }
.laptop-screen { position: relative; padding: 12px; border-radius: 24px; background: linear-gradient(160deg, #2a2e33, #131518 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 46px 90px -34px rgba(8, 40, 42, .6), 0 18px 36px -20px rgba(0,0,0,.45); }
.laptop-screen::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3b4046; }
.laptop-screen .glow { position: absolute; inset: 12px; z-index: 0; border-radius: 13px; background-color: #14171a;
  background-image: radial-gradient(55% 70% at 24% 42%, color-mix(in srgb, var(--g1, #4FB7AC) 78%, transparent), transparent 72%),
    radial-gradient(55% 70% at 78% 58%, color-mix(in srgb, var(--g2, #F2A66B) 70%, transparent), transparent 72%);
  transition: --g1 1.4s ease, --g2 1.4s ease; }
.demo-host { position: relative; z-index: 1; width: 100%; aspect-ratio: 1.5; min-height: 420px; border-radius: 13px; overflow: hidden; }
/* Le lecteur pose la classe .fr sur l'hôte lui-même : fond transparent, la lueur de l'écran est dessous */
.demo-host.fr { background: transparent; }
.demo-host.fr .fr-bg { display: none; }
.laptop-base { position: relative; height: 15px; margin: 0 -6.5%; border-radius: 0 0 16px 16px / 0 0 13px 13px;
  background: linear-gradient(#e3e6ea, #b7bcc2 55%, #8f959c); box-shadow: 0 22px 34px -16px rgba(0,0,0,.45); }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 6px; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #a4aab1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .laptop-base { background: linear-gradient(#5b6168, #3b4046 60%, #2a2e33); } :root:not([data-theme="light"]) .laptop-base::before { background: #464b51; } }
:root[data-theme="dark"] .laptop-base { background: linear-gradient(#5b6168, #3b4046 60%, #2a2e33); }
:root[data-theme="dark"] .laptop-base::before { background: #464b51; }
.demo-note { position: relative; z-index: 1; display: flex; justify-content: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-sm); color: var(--ink-2); text-align: center; }
/* Téléphone : capture réelle du lecteur sur téléphone, posée devant l'ordinateur sur grand écran */
.phone { display: block; position: relative; padding: 5px; border-radius: 26px; background: linear-gradient(160deg, #2a2e33, #0f1113); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 40px -18px rgba(0,0,0,.55); }
.phone::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 9px; width: 30%; height: 9px; transform: translateX(-50%); border-radius: 99px; background: #0b0c0e; }
.phone img { display: block; width: 100%; height: auto; border-radius: 21px; }
.hero-demo > .phone { display: none; }
.hand-note { display: none; }
/* Carte « Voir un exemple » (téléphone) : le téléphone et son bouton, posés sur la terrasse */
.demo-card { position: relative; z-index: 1; display: none; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 16px 18px 16px 16px; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--sh-2); }
.demo-card .phone { width: 112px; }
.demo-card h3 { font-size: var(--fs-xl); margin-bottom: 6px; }
.demo-card p { font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 12px; }
@media (max-width: 739px) { .laptop, .demo-note { display: none; } .demo-card { display: grid; } }
/* Entre 740 et 899 px, le cadre de l'écran mangerait la place du lecteur (700 px pour la double page) : sans cadre */
@media (min-width: 740px) and (max-width: 899px) {
  .laptop-screen { padding: 0; background: none; box-shadow: none; }
  .laptop-screen::before, .laptop-base { display: none; }
  .laptop-screen .glow { inset: 0; border-radius: 22px; filter: blur(40px); opacity: .6; }
}
@media (min-width: 1180px) {
  .hero-demo { padding-bottom: 54px; }
  .hero-demo > .phone { display: block; position: absolute; z-index: 3; right: -2%; bottom: -24px; width: clamp(96px, 8.6vw, 124px); animation: fr-float 7s ease-in-out infinite; }
  /* La légende passe sur la photo : pastille de verre pour rester lisible */
  .demo-note { width: max-content; max-width: 100%; margin: 18px 0 0 2%; padding: 7px 14px; border-radius: 99px; color: var(--ink);
    background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--sh-1); }
  .hand-note { display: flex; position: absolute; z-index: 3; left: -4px; top: -58px; align-items: flex-end; gap: 4px; margin: 0; color: var(--brand); font: italic 500 17px/1.15 var(--font-display); }
  .hand-note svg { width: 92px; height: 54px; margin-bottom: -26px; }
  .hand-note .draw { stroke-dasharray: 150; animation: fr-draw 1.3s .9s var(--ease-out) backwards; }
  .hand-note .tip { stroke-dasharray: 40; animation-name: fr-draw-tip; animation-delay: 2s; animation-duration: .5s; }
}
@keyframes fr-float { 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes fr-draw { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
@keyframes fr-draw-tip { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* ---------- Lecteur plein écran (aperçu de l'essai, démo sur téléphone) ---------- */
/* Le plein écran est toujours sombre : anneau de focus clair, visible sur ce fond (le --focus du kit y est trop pâle) */
.stage { --focus: 0 0 0 3px #4FB7AC, 0 0 0 5px rgba(255,255,255,.55);
  position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr; background: #121417; color: #fff; animation: fade var(--t) var(--ease); }
.stage-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #17191C; border-bottom: 1px solid rgba(255,255,255,.08); }
.stage-bar .btn-ghost { --b-ink: #fff; }
.stage-bar .btn-ghost:hover { --b-bg: rgba(255,255,255,.08); }
.stage-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.stage-title span { font-size: var(--fs-xs); color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .1em; font-weight: 650; white-space: nowrap; }
.stage-title input { flex: 1; min-width: 0; max-width: 420px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; }
.stage-title input:focus { outline: none; border-color: #4FB7AC; box-shadow: 0 0 0 3px rgba(79,183,172,.3); }
.stage-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-host { position: relative; min-height: 0; }
.stage .btn-primary { --b-bg: #4FB7AC; --b-ink: #0B1413; --b-line: #4FB7AC; }
.stage-bar .btn-primary { gap: 4px; }              /* « Publier » + « gratuitement » (replié sur téléphone) */
/* Bandeau crème fixe, même en mode sombre : son texte reste foncé (pas var(--ink), clair en sombre) */
.stage-ribbon { position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px;
  border-radius: 99px; background: rgba(250,248,244,.96); color: #17191C; box-shadow: 0 14px 40px rgba(0,0,0,.35); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.stage-ribbon .btn { min-height: 38px; }
.stage-ribbon .btn-ghost { --b-ink: #17191C; }
.stage-ribbon .btn-ghost:hover { --b-bg: rgba(23,25,28,.08); }
.stage-ribbon .btn:focus-visible { box-shadow: 0 0 0 3px #0F5C57, 0 0 0 5px rgba(255,255,255,.9); }
/* Téléphone : le titre reste modifiable (il fabrique le lien), « Retour » et « gratuitement » se replient */
@media (max-width: 699px) {
  .stage-bar { gap: 8px; padding: 8px 10px; }
  .stage-title span, .stage-bar .btn-ghost > span, .stage-bar .wide-only { display: none; }
  .stage-title input { height: 36px; padding: 0 10px; font-size: 15px; }
  .stage-ribbon { bottom: 92px; left: 12px; right: 12px; transform: none; justify-content: space-between; white-space: normal; }
}

/* ---------- Fenêtres de l'essai (inscription, publication, partage) ---------- */
.modal.essai-modal { width: min(480px, 100%); padding: 28px; }
.modal.essai-modal h3 { font-size: var(--fs-2xl); }
.form-grid { display: grid; gap: 14px; margin-top: 16px; }
.form-grid .two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .form-grid .two { grid-template-columns: 1fr; } }
.form-err { color: var(--err); font-size: var(--fs-sm); margin: 0; }
.form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-sm); }
.linkish { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fine { font-size: var(--fs-xs); color: var(--muted); margin: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Écran « C'est en ligne » */
.done-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.done-head .okdot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex: none; }
.share-link { display: flex; gap: 8px; margin: 16px 0 14px; }
.share-link input { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.share-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.qr-box { display: grid; justify-items: center; gap: 8px; padding: 10px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.qr-box .linkish { color: #0F5C57; }               /* fond blanc fixe : vert foncé, même en mode sombre */
.qr-box canvas { width: 148px; height: 148px; }
.nets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.net { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: var(--r); text-decoration: none; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 600; border: 1px solid var(--line); background: var(--surface); }
.net:hover { border-color: var(--line-2); background: var(--surface-2); }
.net i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-style: normal; font-weight: 800; font-size: 15px; }
.net.wa i { background: #25D366; } .net.fb i { background: #1877F2; } .net.li i { background: #0A66C2; } .net.mail i { background: var(--muted); }
.code-box { margin-top: 14px; }
.code-box summary { cursor: pointer; font-weight: 600; font-size: var(--fs-sm); padding: 8px 0; list-style: none; display: flex; align-items: center; gap: 8px; }
.code-box summary::-webkit-details-marker { display: none; }
.code-box textarea { font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; min-height: 74px; }
@media (max-width: 480px) { .share-grid { grid-template-columns: 1fr; } .qr-box { justify-self: center; } }

/* ---------- Gratuit ---------- */
.feat { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feat > div { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.feat .fi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.feat .fi.or { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 75%, var(--ink)); }
.feat h3 { font-family: var(--font-text); font-size: var(--fs-md); font-weight: 700; letter-spacing: -.005em; margin: 2px 0 4px; }
.feat p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; }

/* ---------- Blocs en pleine largeur (maquette de FX : blocs 2 à 5) ---------- */
.wrap-wide { --g0: 16px; width: min(1440px, 100% - 2 * var(--g0)); margin-inline: auto; }
@media (min-width: 760px) { .wrap-wide { --g0: 32px; } }

/* ---------- Exemples : visuel de FX en bandeau, puis cartes de magazines qui défilent ---------- */
.ex { position: relative; padding: 0 0 var(--s8); }
.ex-band { position: relative; height: clamp(220px, 34vw, 480px); overflow: hidden; background: #0F4F4A; }
.ex-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.08); }
.ex-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 45%, var(--bg)); }
/* Le bandeau glisse doucement au défilement, là où le navigateur sait le faire tout seul (sans script) */
@supports (animation-timeline: view()) {
  .ex-band img { animation: fr-band linear both; animation-timeline: view(); }
  @keyframes fr-band { from { transform: translateY(-7%) scale(1.14); } to { transform: translateY(7%) scale(1.14); } }
}
.ex-head { position: relative; z-index: 1; max-width: 640px; margin-top: clamp(-150px, -10vw, -56px); padding: 24px 24px 22px; border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); box-shadow: var(--sh-2); }
.ex-head h2 { margin: 8px 0 10px; }
.ex-head h2 em { font-style: italic; color: var(--brand); }
.ex-head > p:not(.eyebrow) { color: var(--ink-2); margin: 0; }
@media (min-width: 760px) { .ex-head { padding: 30px 32px 28px; } }
.ex-rail-wrap { position: relative; margin-top: 18px; }
/* La rangée déborde jusqu'au bord de l'écran ; la 1re carte reste alignée sur le texte */
.ex-rail { --g0: 16px; --gut: max(var(--g0), calc((100% - 1440px) / 2 + var(--g0)));
  display: flex; gap: 18px; margin: 0; padding: 16px var(--gut) 26px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ex-rail::-webkit-scrollbar { display: none; }
.ex-rail.is-grab { cursor: grabbing; scroll-snap-type: none; }
.ex-rail.is-grab .ex-card { pointer-events: none; }
@media (min-width: 760px) { .ex-rail { --g0: 32px; gap: 22px; } }
.ex-rail > li { flex: none; width: clamp(214px, 22vw, 284px); scroll-snap-align: start; }
.ex-card { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--sh-1);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .65s var(--ease-out), box-shadow .65s var(--ease-out), border-color .3s; }
.ex-cover { position: relative; display: block; aspect-ratio: 210 / 297; overflow: hidden; background: var(--bg-2); }
.ex-cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
/* Reflet qui suit la souris (--mx, --my posés par motion.js) */
.ex-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.32), transparent 46%); opacity: 0; transition: opacity .45s; pointer-events: none; }
.ex-tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); font-size: 12px; font-weight: 650; box-shadow: var(--sh-1); }
.ex-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 3px; align-items: center; padding: 14px 14px 16px 16px; }
.ex-body strong { grid-column: 1; font: 600 19px/1.15 var(--font-display); letter-spacing: -.01em; }
.ex-body > span:not(.ex-go) { grid-column: 1; font-size: var(--fs-sm); color: var(--ink-2); }
.ex-go { grid-column: 2; grid-row: 1 / 3; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 78%, var(--ink)); transition: transform .5s var(--ease-out), background .3s, color .3s; }
.ex-card:focus-visible { outline: none; box-shadow: var(--focus), var(--sh-2); }
.ex-card:active { --lift: -2px; transition-duration: .15s; }
@media (hover: hover) and (pointer: fine) {
  .ex-card:hover { --lift: -8px; box-shadow: var(--sh-3); border-color: transparent; }
  .ex-card:hover .ex-cover img { transform: scale(1.07); }
  .ex-card:hover .ex-cover::after { opacity: 1; }
  .ex-card:hover .ex-go { background: var(--accent); color: #1A0F06; transform: translateX(4px); }
}
/* Carte « Le vôtre ici » : renvoie à l'essai */
.ex-yours { border: 2px dashed color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.ex-yours .ex-cover { display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; color: var(--brand);
  background: linear-gradient(165deg, var(--brand-soft), color-mix(in srgb, var(--accent-soft) 80%, var(--surface))); }
.ex-plus { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed currentColor; transition: transform .6s var(--ease-out); }
.ex-yours-t { font: 600 28px/1.05 var(--font-display); letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) { .ex-yours:hover .ex-plus { transform: rotate(90deg) scale(1.06); } }
.ex-navs { display: flex; justify-content: flex-end; gap: 10px; width: min(1440px, 100% - 64px); margin: 0 auto; }
.ex-nav { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: transform .35s var(--ease-out), background .3s, color .3s, opacity .3s, border-color .3s; }
.ex-nav:disabled { opacity: .35; cursor: default; }
.ex-nav:focus-visible { outline: none; box-shadow: var(--focus); }
@media (hover: hover) and (pointer: fine) { .ex-nav:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--bg); transform: scale(1.07); } }
@media (max-width: 759px) { .ex-navs { display: none; } }
.ex .source { margin-top: 6px; }

/* ---------- Comment ça marche : 3 cartes illustrées, flèches entre elles ---------- */
.how { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; } }
.how-card { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 24px 22px; text-align: center;
  border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); }
.how-n { position: absolute; left: 18px; top: 18px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); font: 700 14px/1 var(--font-text); }
.how-ico { width: 66px; height: 66px; display: grid; place-items: center; border-radius: 22px; margin-bottom: 6px; background: var(--brand-soft); color: var(--brand);
  transition: transform .7s var(--ease-out); }
.how-card h3 { font-size: var(--fs-xl); margin: 0; }
.how-card p { margin: 0; color: var(--ink-2); max-width: 34ch; }
.how-vis { width: 100%; margin-top: auto; padding-top: 16px; }
@media (min-width: 900px) {
  /* Flèche entre 2 cartes : elle avance doucement vers l'étape suivante */
  .how-card:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -38px; top: 50%; width: 28px; height: 16px; margin-top: -8px; background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1 8h24m-7-6 7 6-7 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cpath d='M1 8h24m-7-6 7 6-7 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: fr-nudge 2.2s ease-in-out infinite; }
}
@keyframes fr-nudge { 50% { transform: translateX(6px); } }
@media (hover: hover) and (pointer: fine) {
  .how-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
  .how-card:hover .how-ico { transform: rotate(-7deg) scale(1.08); }
}
/* 1. le fichier, avec sa barre qui se remplit quand la carte arrive */
.how-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); text-align: left; }
.how-file .pdf { width: 36px; height: 44px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(160deg, #F09A57, #C9661F); color: #fff; font: 800 11px/1 var(--font-text); letter-spacing: .04em; }
.how-file-t { display: grid; min-width: 0; }
.how-file-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.how-file-t small { font-size: 12.5px; color: var(--ink-2); }
.how-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.how-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #4FB7AC); transform-origin: left; }
.how-card.rv .how-bar i { transform: scaleX(.04); }
.how-card.rv-in .how-bar i { transform: none; transition: transform 1.8s .5s var(--ease-out); }
/* 2. trois vraies vignettes du magazine d'exemple, qui s'ouvrent en éventail au survol */
.how-look { position: relative; display: flex; justify-content: center; }
.how-thumbs { display: flex; gap: 8px; }
.how-thumbs img { width: 58px; height: auto; border-radius: 4px; box-shadow: var(--sh-2); transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .how-card:hover .how-thumbs img:nth-child(1) { transform: rotate(-7deg) translate(-4px, -4px); }
  .how-card:hover .how-thumbs img:nth-child(3) { transform: rotate(7deg) translate(4px, -4px); }
}
.how-chip { position: absolute; right: 4%; top: -10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 99px; background: var(--surface);
  border: 1px solid var(--line); color: var(--brand); font-size: 12px; font-weight: 650; box-shadow: var(--sh-2); animation: fr-bob 4.5s ease-in-out infinite; }
@keyframes fr-bob { 50% { transform: translateY(-5px); } }
/* 3. un vrai QR code (il ouvre l'accueil) et le lien */
.how-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.how-qr { width: 78px; height: 78px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1); border: 1px solid var(--line); }
.how-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.how-link svg { color: var(--brand); flex: none; }

/* ---------- Le lecteur : tablette posée sur le lagon (eau dessinée en CSS, ambiance animée dans la tablette) ---------- */
.lec { position: relative; isolation: isolate; overflow: hidden; padding: var(--s8) 0; color: #F2FAF9;
  background: linear-gradient(172deg, #0B4C55 0%, #0E6A6D 40%, #15847F 72%, #0A4650 100%); }
.lec-water { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lec-water i { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; mix-blend-mode: screen; animation: fr-drift 19s ease-in-out infinite alternate; }
.lec-water i:nth-child(1) { width: 52vw; height: 52vw; left: -14vw; top: -18vw; background: radial-gradient(circle, #63D7C9, transparent 66%); }
.lec-water i:nth-child(2) { width: 40vw; height: 40vw; right: -10vw; top: 18%; background: radial-gradient(circle, #3FB8C9, transparent 66%); animation-duration: 23s; animation-delay: -6s; }
.lec-water i:nth-child(3) { width: 46vw; height: 46vw; left: 24%; bottom: -26vw; background: radial-gradient(circle, #7FE3D2, transparent 66%); animation-duration: 27s; animation-delay: -12s; }
.lec-water i:nth-child(4) { width: 18vw; height: 18vw; left: 58%; top: 6%; background: radial-gradient(circle, #E9FFF9, transparent 66%); opacity: .3; animation-duration: 15s; }
@keyframes fr-drift { to { transform: translate3d(7vw, 4vw, 0) scale(1.18); } }
/* Reflets de lumière sur l'eau, qui ondulent */
.lec::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.07) 0 2px, transparent 3px 46px);
  animation: fr-ripple 30s linear infinite; }
@keyframes fr-ripple { to { transform: rotate(8deg) scale(1.08); } }
.lec .eyebrow { color: #A6EBDF; }
.lec .section-head h2 { color: #fff; }
.lec .section-head h2 em { color: #A6EBDF; }
.lec .section-head p { color: rgba(242,250,249,.84); }
.tablet { position: relative; max-width: 1180px; margin: 0 auto; padding: 16px; border-radius: 40px; background: linear-gradient(160deg, #23272b, #0e1012 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 10px rgba(255,255,255,.05), 0 60px 110px -40px rgba(0,18,22,.85); }
.tablet::before { content: ""; position: absolute; left: 50%; top: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #30353a; }
.amb-stage { position: relative; aspect-ratio: 16 / 9.4; min-height: 420px; border-radius: 26px; overflow: hidden; background: #121417; }
.amb-stage .ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); font-size: var(--fs-sm); }
.lec-ctrl { display: grid; justify-items: center; gap: 14px; margin-top: 28px; }
.mags, .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chips { gap: 8px; }
.mag, .chip { display: inline-flex; align-items: center; gap: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-weight: 650; font-size: var(--fs-sm); cursor: pointer;
  transition: transform .4s var(--ease-out), background .3s, color .3s, border-color .3s; }
.mag { min-height: 58px; padding: 5px 16px 5px 5px; }
.mag img { width: 34px; height: 48px; object-fit: cover; border-radius: 4px; box-shadow: var(--sh-1); }
.chip { min-height: 40px; padding: 0 14px 0 6px; border-radius: 99px; font-weight: 600; }
.chip .sw { width: 28px; height: 28px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.chip small { font-weight: 600; color: rgba(255,255,255,.66); font-size: 11px; }
.mag[aria-pressed="true"], .chip[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0B4C55; }
.chip[aria-pressed="true"] small { color: #4c6b6c; }
.mag:focus-visible, .chip:focus-visible { outline: none; box-shadow: 0 0 0 3px #A6EBDF; }
@media (hover: hover) and (pointer: fine) { .mag:not([aria-pressed="true"]):hover, .chip:not([aria-pressed="true"]):hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: translateY(-2px); } }
.lec .source { color: rgba(242,250,249,.74); text-align: center; margin-top: 22px; }
.amb-mobile { display: none; padding: 20px; border-radius: 22px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.amb-mobile p { margin: 0 0 14px; color: rgba(242,250,249,.9); }
.amb-mobile .btn:not(.btn-primary) { --b-bg: rgba(255,255,255,.12); --b-ink: #fff; --b-line: rgba(255,255,255,.3); }
.amb-mobile .btn-primary { --b-bg: #fff; --b-ink: #0B4C55; --b-line: #fff; }
.vitrine-cta { display: flex; flex-wrap: wrap; gap: 10px; }
/* Téléphone : pas de tablette, donc pas de pastilles (elles ne feraient rien) ; le bouton ouvre l'exemple en plein écran */
@media (max-width: 739px) { .tablet, .lec-ctrl, .amb-stage, .chips, .mags { display: none; } .amb-mobile { display: block; } }

/* ---------- Offres (maquette de FX : icônes, ruban, bascule qui glisse, cartes qui s'éclairent) ---------- */
.offres { overflow: hidden; isolation: isolate; }
.offres .palm { position: absolute; z-index: -1; right: -70px; top: -60px; width: 270px; height: auto; color: #2F6B4F; opacity: .13; pointer-events: none;
  transform-origin: 85% 0; animation: fr-sway 9s ease-in-out infinite alternate; }
@keyframes fr-sway { from { transform: rotate(16deg); } to { transform: rotate(23deg); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .offres .palm { opacity: .07; } }
:root[data-theme="dark"] .offres .palm { opacity: .07; }
.billing { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.billing button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 18px; border-radius: 99px; font-weight: 650; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; transition: color .35s; }
.billing button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); }
.billing .save { color: var(--brand); font-weight: 700; transition: color .35s; }
.billing button[aria-pressed="true"] .save { color: inherit; }
/* Avec le script : une pastille glisse sous le bouton choisi (home.js pose --bx et --bw) */
.billing.is-slide::before { content: ""; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: var(--bw, 0); border-radius: 99px; background: var(--brand);
  transform: translateX(var(--bx, 0)); transition: transform .5s var(--ease-out), width .5s var(--ease-out); }
.billing.is-slide button[aria-pressed="true"] { background: none; }
.plans { display: grid; gap: 22px; margin-top: 30px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }
.plan { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 28px 26px 26px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--sh-1); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s; }
.plan.star { border: 2px solid var(--accent); box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--accent) 60%, transparent); }
.plan .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); height: 28px; padding: 0 16px; background: var(--accent); color: #1A0F06; font-weight: 750; white-space: nowrap;
  box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--accent) 90%, transparent); }
.plan h3 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-2xl); }
.plan-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 13px; background: var(--brand-soft); color: var(--brand); transition: transform .6s var(--ease-out); }
.plan.star .plan-ico { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.plan .pitch { color: var(--ink-2); margin: 8px 0 16px; min-height: 2.9em; }
.price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.price b { display: inline-block; font: 600 48px/1 var(--font-display); letter-spacing: -.03em; }
.price span { color: var(--muted); font-weight: 600; }
.price-note { font-size: var(--fs-sm); color: var(--muted); min-height: 1.5em; margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 9px; font-size: var(--fs-md); }
.plan li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.plan li svg { color: var(--brand); margin-top: 2px; }
.plan.star li svg { color: color-mix(in srgb, var(--accent) 85%, var(--ink)); }
.plan li.plus { font-weight: 650; }
@media (hover: hover) and (pointer: fine) {
  .plan:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
  .plan.star:hover { box-shadow: 0 44px 80px -34px color-mix(in srgb, var(--accent) 70%, transparent); }
  .plan:hover .plan-ico { transform: rotate(-8deg) scale(1.08); }
}

/* Fonction annoncée mais pas encore dans le lecteur (formulaire de contact, domaine perso) */
.soon { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: var(--bg-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.plan .btn { margin-top: auto; width: 100%; }
.founders { margin-top: 26px; display: grid; gap: 18px; align-items: center; padding: 24px; border-radius: var(--r-xl);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 85%, transparent), color-mix(in srgb, var(--brand-soft) 85%, transparent)); border: 1px solid var(--line); }
.founders h3 { font-size: var(--fs-2xl); display: flex; align-items: center; gap: 10px; }
.founders h3 svg { color: var(--accent); }
.founders p { margin: 6px 0 0; color: var(--ink-2); }
.f-count { min-width: 220px; }
.f-count .num-big { font: 600 34px/1 var(--font-display); }
.f-count .bar { margin: 10px 0 6px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
@media (min-width: 800px) { .founders { grid-template-columns: 1fr auto; } }

/* ---------- Comparatif ---------- */
.cmp-scroll { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 760px; border-collapse: collapse; font-size: var(--fs-sm); }
.cmp th, .cmp td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp thead th { font-size: var(--fs-sm); color: var(--ink); background: var(--surface-2); position: sticky; top: 0; }
.cmp tbody th { font-weight: 600; color: var(--ink-2); width: 22%; }
.cmp td.us, .cmp th.us { background: color-mix(in srgb, var(--brand-soft) 60%, transparent); font-weight: 650; color: var(--ink); }
.cmp tr:last-child td, .cmp tr:last-child th { border-bottom: 0; }
.yes { color: var(--ok); font-weight: 700; } .no { color: var(--err); font-weight: 700; }
.source { font-size: var(--fs-xs); color: var(--ink-2); margin-top: 10px; }

/* ---------- Garanties ---------- */
.promise { display: grid; gap: 22px; padding: 34px 28px; border-radius: var(--r-xl); background: var(--brand); color: var(--brand-ink); }
.promise h2 { color: inherit; font-size: clamp(30px, 4vw, 48px); }
.promise ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.promise li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.promise li svg { margin-top: 2px; }
@media (min-width: 900px) { .promise { grid-template-columns: 1fr 1.1fr; padding: 48px; align-items: center; } }

/* ---------- Chiffres vrais ---------- */
.facts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.facts div { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.facts b { display: block; font: 600 34px/1.05 var(--font-display); letter-spacing: -.02em; color: var(--brand); }
.facts span { display: block; margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.facts small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; font-weight: 650; font-size: var(--fs-lg); display: flex; justify-content: space-between; gap: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-text); color: var(--brand); transition: transform var(--t); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 18px; color: var(--ink-2); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Appel final ---------- */
.final { text-align: center; padding: 56px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.final h2 { margin-bottom: 12px; }
.final h2 em { font-style: normal; color: var(--brand); }
.final p { color: var(--ink-2); margin-bottom: 22px; }

/* ---------- Pied de page ---------- */
.site-foot { position: relative; z-index: 1; margin-top: var(--s8); padding: var(--s7) 0 var(--s5); border-top: 1px solid var(--line); background: var(--bg-2); font-size: var(--fs-sm); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.foot-brand img { height: 40px; width: auto; margin-bottom: 12px; }
.foot-brand p { color: var(--ink-2); max-width: 34ch; }
.site-foot h2 { font: 700 var(--fs-xs)/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 14px; }
.site-foot nav a { display: block; padding: 5px 0; color: var(--ink); text-decoration: none; }
.site-foot nav a:hover { color: var(--brand); text-decoration: underline; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.foot-bottom p { margin: 0; }
.foot-lang a { color: var(--ink); }
.foot-lang [aria-current] { font-weight: 650; }

/* ---------- Pages de texte (aide, légal, comparatifs, nouveautés, feuille de route) ---------- */
.page-hero { position: relative; padding: 56px 0 28px; }
.page-hero h1 { font-size: clamp(34px, 4.6vw, 58px); max-width: 20ch; }
.page-hero .lead { margin-top: 14px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 14px; }
.crumbs a { color: var(--ink-2); }
.prose { max-width: 760px; font-size: var(--fs-lg); line-height: 1.65; color: var(--ink-2); }
.prose h2 { font-size: var(--fs-2xl); color: var(--ink); margin: 40px 0 12px; }
.prose h3 { font-size: var(--fs-xl); color: var(--ink); margin: 28px 0 8px; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 18px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); }
.prose code, .prose pre { font: 14px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--bg-2); border-radius: 6px; }
.prose code { padding: 2px 6px; }
.prose pre { padding: 14px 16px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; border: 1px solid var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); margin: 10px 0 22px; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
.prose th { color: var(--ink); }
.prose .table-scroll { overflow-x: auto; }
.callout { padding: 16px 18px; border-radius: var(--r-lg); background: var(--brand-soft); color: var(--ink); margin: 20px 0; font-size: var(--fs-md); }
.callout.or { background: var(--accent-soft); }
.todo { background: var(--warn-soft); color: var(--ink); border: 1px dashed var(--warn); border-radius: 6px; padding: 1px 6px; font-weight: 650; font-size: .92em; }
.cta-band { margin: 44px 0 0; padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cta-band p { margin: 0; font-weight: 650; color: var(--ink); font-size: var(--fs-lg); }
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards a { display: block; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform var(--t) var(--ease-out), box-shadow var(--t); }
.cards a:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.cards h2, .cards h3 { font-size: var(--fs-xl); margin-bottom: 6px; }
.cards p { color: var(--ink-2); margin: 0; font-size: var(--fs-sm); }

/* Nouveautés et feuille de route */
.log { display: grid; gap: 14px; max-width: 820px; }
.log article { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.log time { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.log h2 { font-size: var(--fs-xl); margin: 0 0 6px; }
.log p { margin: 0; color: var(--ink-2); white-space: pre-line; }
@media (max-width: 560px) { .log article { grid-template-columns: 1fr; gap: 6px; } }
.rm-cols { display: grid; gap: 18px; }
@media (min-width: 900px) { .rm-cols { grid-template-columns: repeat(3, 1fr); } }
.rm-col h2 { font-size: var(--fs-xl); display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.rm-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); margin-bottom: 10px; }
.rm-item h3 { font-family: var(--font-text); font-size: var(--fs-md); font-weight: 700; letter-spacing: 0; margin-bottom: 4px; }
.rm-item p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; white-space: pre-line; }
.vote { display: grid; justify-items: center; gap: 2px; min-width: 56px; padding: 8px 6px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-weight: 700; color: var(--ink); }
.vote svg { color: var(--brand); }
.vote[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.vote[disabled] { cursor: default; opacity: .7; }
.rm-no .rm-item { background: var(--surface-2); }
.loading-line { color: var(--ink-2); font-size: var(--fs-sm); }

/* ---------- Mouvement (maquette de FX, 29/10) : posé par motion.js, jamais sans lui ----------
   - apparition au défilement : seuls les blocs encore sous l'écran au chargement reçoivent .rv (la page reste
     complète sans script) ; .rv-in les fait glisser et s'éclaircir, l'un après l'autre dans un groupe ;
   - lumière sous la souris ([data-spot]) : halo doux qui suit le pointeur (--mx, --my) ;
   - boutons aimantés ([data-magnet]) : propriété translate, qui se combine avec leurs transform. */
.rv { opacity: 0; transform: translateY(30px); }
.rv.rv-in { opacity: 1; transform: none; transition: opacity .85s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--rv-i, 0) * 95ms); }
[data-spot]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--brand) 11%, transparent), transparent 44%); }
.plan.star[data-spot]::before { background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 44%); }
@media (hover: hover) and (pointer: fine) { [data-spot]:hover::before { opacity: 1; } }
[data-magnet] { transition-property: transform, box-shadow, translate, background, color; }
[data-parallax] { transition: translate 1s var(--ease-out); }
@media (min-width: 1180px) { .hero-photo img { transform: scale(1.04); } }     /* la photo bouge sans laisser de bord vide */
/* Liens du menu : un trait qui se dessine sous le mot */
.head-nav a { background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1.5px no-repeat; transition: background-size .45s var(--ease-out), color .3s; }
.head-nav a:hover { background-size: calc(100% - 8px) 1.5px; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .lec-water i, .lec::before, .offres .palm, .how-chip, .how-card::after, .hero-demo > .phone, .hand-note .draw, .ex-band img { animation: none !important; }
}

/* ---------- Lecteur et mouvement réduit ----------
   base.css ramène toutes les transitions à 0,01 ms quand le visiteur réduit les animations. Dans le lecteur,
   StPageFlip mesure alors mal ses pages (page de 113 px au lieu de 269 px, constaté le 29/10/2026) :
   on coupe franchement (0 s), le lecteur gère lui-même le mouvement réduit. */
@media (prefers-reduced-motion: reduce) {
  .fr *, .fr *::before, .fr *::after { transition-duration: revert !important; animation-duration: revert !important; animation-iteration-count: revert !important; }
}