/* =============================================================================
   landing-base.css — la peau de l'univers PUBLIC (page d'accueil, page
   « Fonctionnalités »).

   Ces règles vivaient dans un <style> au milieu de templates/auth/pricing.html.
   Extraites telles quelles le 2026-09-01, sans en changer une seule, pour que
   la page « Fonctionnalités » hérite du même en-tête, des mêmes boutons, de la
   même grille et du même pied de page — au lieu de les redéfinir et de diverger
   au premier ajustement.

   ⚠️ L'ORDRE DE CHARGEMENT EST CELUI DE L'ANCIEN <style> : cette feuille vient
   APRÈS toutes les autres (jetons, thèmes, typo-mono). La déplacer plus haut
   rendrait la main aux feuilles génériques et déferait la landing.

   ⚠️ Une seule valeur a changé de forme : l'image de fond du thème Glass, dont
   le chemin était interpolé par Jinja et s'écrit maintenant en clair.
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   LANDING archiflow — storytelling, token-driven (Rexora/Glass × jour/nuit).
   Aucune couleur en dur : tout passe par les tokens du dépôt (--bg, --card,
   --t1..t3, --acc, --brd, --r-*, ombres Rexora). Material Symbols, zéro emoji.
   Lot 1 = structure + contenu + Rexora ; Glass + sélecteur = Lot 2 ;
   captures/vidéos + reveals = Lot 3 (emplacements .lp-shot prévus).
   ═══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── ÉTAGE GRAND ÉCRAN (2026-09-07) ────────────────────────────────────
     Il n'existait AUCUNE media query au-dessus de 1000px dans toute la
     landing : la page s'arrêtait de grandir vers 1400px et le reste de
     l'écran était du vide. Mesuré avant correction, entre 1440 et 2560px de
     viewport (+78 % de largeur) : la grille des chapitres ne bougeait pas
     (1180 → 1180), le titre du hero non plus (80px → 80px), les flancs du
     produit non plus (518 → 518). Le remplissage tombait de 82 % à 46 %,
     puis à 34 % en 3440 — 690px de marge morte de chaque côté en 2560.

     `62vw` reste sous 1180px tant que le viewport n'atteint pas ~1900px, et
     `74vw` jusqu'à ~1595px : en dessous, CES DEUX LARGEURS ne changent pas.
     (Les plafonds de TYPOGRAPHIE, eux, ont été relevés dans
     landing-chapitres.css et reprennent leur croissance plus tôt, vers
     1310px — mesuré à 1440px, seul « Pilotage » bouge, de 42 à 46px.)

     DEUX largeurs et non une, à dessein : une SCÈNE de chapitre (texte +
     maquettes) supporte de s'étaler, une section à CARTES non — les quatre
     offres de `.lp-plans` sont un `repeat(4, 1fr)`, à 1900px chaque carte de
     tarif ferait 460px de large, soit plus qu'un écran de portable. */
  --lp-max:clamp(1180px, 62vw, 1500px);
  --lp-max-scene:clamp(1180px, 74vw, 1900px);
  --lp-shadow: var(--shadow-raised, 0 1px 2px rgba(0,0,0,.06), 0 10px 30px -12px rgba(0,0,0,.12));
  --lp-shadow-soft: var(--shadow-surface, 0 1px 2px rgba(0,0,0,.05));
  --lp-radius: var(--r-xl, 18px);
}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--t1);
  font-family: var(--f, 'Space Mono', ui-monospace, monospace);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  /* ⚠️ `clip` ET NON `hidden`. `overflow-x: hidden` fait du <body> un
     CONTENEUR DE DÉFILEMENT, et un `position: sticky` cherche son plus proche
     ancêtre défilant : il trouvait le body, qui ne défile pas, et ne
     s'accrochait jamais. Toute la mise en scène des chapitres tombait à
     plat — mesuré le 2026-08-18. `clip` rogne le débordement sans créer ce
     conteneur, ce qui est exactement ce qu'on veut ici. */
  overflow-x: clip;
}
h1,h2,h3,h4,.lp-display{font-family: var(--fd, 'Space Grotesk', system-ui, sans-serif); line-height:1.12; letter-spacing:-.01em; color:var(--t1)}
a{color:inherit;text-decoration:none}
.lp-wrap{max-width:var(--lp-max);margin:0 auto;padding:0 24px}
.lp-ico{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;display:inline-block;-webkit-font-smoothing:antialiased;font-variation-settings:'opsz' 24}

/* ── Boutons ── */
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--f);font-size:14px;font-weight:700;
  --lp-frame:var(--bg); /* couleur de la surface sous le bouton → anneau « creux » invisible */
  padding:12px 22px;border-radius:12px;border:1px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .25s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
.lp-btn .lp-ico{font-size:18px;transition:transform .18s ease}
.lp-btn:hover .lp-ico{transform:translateX(3px)}
/* Boutons posés sur une carte / modale : l'anneau prend la couleur de la carte */
.lp-plan .lp-btn,.lp-modal__panel .lp-btn{--lp-frame:var(--card)}
/* Primary — dégradé (clair en haut = relief) + cadre double « creusé » (anneaux concentriques façon emelia) */
.lp-btn--primary{background:linear-gradient(to top,var(--acc),color-mix(in srgb,var(--acc) 78%,#fff));
  color:var(--text-on-accent,#fff);border:1px solid color-mix(in srgb,var(--acc) 86%,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
    0 0 0 2px var(--lp-frame),
    0 0 0 4px color-mix(in srgb,var(--t1) 12%,var(--lp-frame)),
    0 8px 20px -8px rgba(var(--acc-rgb),.55)}
.lp-btn--primary:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
    0 0 0 2px var(--lp-frame),
    0 0 0 4px color-mix(in srgb,var(--t1) 16%,var(--lp-frame)),
    0 14px 30px -10px rgba(var(--acc-rgb),.72)}
.lp-btn--primary:active{transform:translateY(0);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.24),
    0 0 0 2px var(--lp-frame),
    0 0 0 4px color-mix(in srgb,var(--t1) 14%,var(--lp-frame)),
    0 5px 14px -8px rgba(var(--acc-rgb),.5)}
/* Ghost / secondaire — surface + même cadre double */
.lp-btn--ghost{background:var(--card);color:var(--t1);border-color:var(--brd);
  box-shadow:0 0 0 2px var(--lp-frame),
    0 0 0 4px color-mix(in srgb,var(--t1) 9%,var(--lp-frame)),
    var(--lp-shadow-soft)}
.lp-btn--ghost:hover{background:var(--surface-2,var(--card2,var(--card)));border-color:color-mix(in srgb,var(--acc) 38%,var(--brd));transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--lp-frame),
    0 0 0 4px color-mix(in srgb,var(--acc) 24%,var(--lp-frame)),
    var(--lp-shadow-soft)}
.lp-btn--ghost:active{transform:translateY(0)}
.lp-btn--lg{padding:15px 28px;font-size:15px;border-radius:13px}
/* design-rexora.css force <button> & a[class*="btn-"] en pill (var(--r-pill)=999px)
   via html[data-design="rexora"] … (spécificité ~0,9,2 + !important). La landing veut
   un arrondi modéré : on rebat cette règle avec une spécificité de tier ID (:not(#_),
   sans ID réel) → (1,2,1) qui gagne, pour Rexora ET Glass. Reste contenu à .lp-btn (landing). */
html[data-design] .lp-btn:not(#_){border-radius:12px !important}
html[data-design] .lp-btn--lg:not(#_){border-radius:13px !important}

/* ── Fond BLANC en Rexora clair (landing) ── */
html[data-design="rexora"][data-theme="light"]{--bg:#ffffff;--bg2:#ffffff}

/* ── Accent ROUGE IMORIA pour toute la landing en Rexora (échantillonné
   sur imoria.net). Override des TOKENS uniquement et scopé à la landing :
   ce <style> n'est chargé que sur /pricing, donc l'app et le thème Glass
   gardent leurs accents. ── */
html[data-design="rexora"]{
  --acc:#E5391C; --acc-rgb:229,57,28;
  --accl:#EA5740; --accd:#C42E12;
  --accbg:rgba(229,57,28,.09); --accbg2:rgba(229,57,28,.15);
}

/* ── Liseret lumineux qui tourne autour des boutons simples (façon
   emelia.io) : anneau conique animé sur le bord, masqué au centre. ── */
@property --lpang { syntax:'<angle>'; initial-value:0deg; inherits:false; }
html[data-design="rexora"] .lp-btn--ghost{ position:relative; }
html[data-design="rexora"] .lp-btn--ghost::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--lpang),
    transparent 0%, transparent 68%,
    rgba(var(--acc-rgb), .85) 82%, var(--accl,#EA5740) 88%,
    rgba(var(--acc-rgb), .85) 94%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:lpRing 3.2s linear infinite;
}
@keyframes lpRing{ to{ --lpang:360deg } }
@media (prefers-reduced-motion: reduce){
  html[data-design="rexora"] .lp-btn--ghost::after{ display:none }
}

/* ── Liquid Glass : accent BLEU PASTEL (au lieu de l'orange) + angles plus
   arrondis. Override de TOKENS uniquement (zéro #hex en dur dans les règles),
   scopé glass. Le thème est sombre (lié au style). ── */
html[data-design="glass"]{
  --acc:#7FB4EE; --acc-rgb:127,180,238;
  --accl:#A6CCF5; --accd:#5A93D8;
  --accbg:rgba(127,180,238,.12); --accbg2:rgba(127,180,238,.18);
  --text-on-accent:#0a1422;
  --r-md:14px; --r-lg:18px; --r-xl:22px; --lp-radius:24px;
}

/* ── Fond Glass : wallpaper « refracted glass » (réf. Figma fournie par
   l'utilisateur — stries de verre sur lueur bleu/violet) vu À TRAVERS un
   voile FROST (backdrop-filter sur un calque par-dessus l'image).
   z-index:-1 = au-dessus du fond du body, sous tout le contenu. ── */
html[data-design="glass"] body{ background:#060609; }
/* Liquid Glass n existe qu en NUIT : toggle jour/nuit grisé. */
html[data-design="glass"] #lpModeToggle{opacity:.35;pointer-events:none;cursor:default}

.lp-glasswall{ display:none; }
html[data-design="glass"] .lp-glasswall{
  display:block;
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("/static/img/themes/glass-bg.webp") center/cover no-repeat #060609;
}
/* Voile frost : givre l'image (blur + saturation) + légère teinte sombre
   pour préserver le contraste du texte posé dessus. */
html[data-design="glass"] .lp-glasswall::after{
  content:""; position:absolute; inset:0;
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  background:rgba(8,9,14,.17);
}
@media (prefers-reduced-transparency: reduce){
  html[data-design="glass"] .lp-glasswall::after{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(8,9,14,.55);
  }
}
/* La landing pose son fond glass via .lp-glasswall (image + voile frost
   atténué). On neutralise le body::before hérité de theme.css (pensé pour
   l'app) : sinon il recouvrirait le verre frosté par une version nette. */
html[data-design="glass"] body:not(.has-bg-image)::before{ display:none !important; }

/* ═══════════ REXORA : bandes façon imoria.net ═══════════
   Alternance de blocs arrondis pleine largeur (marges 18px) :
   héro/CTA = bloc COULEUR accent, sections = fond POINTILLÉ ou BLANC,
   grille de points discrète sur le fond de page. Scopé Rexora —
   le mode Glass est intouché. */
.lp-rexdots{ display:none; }
html[data-design="rexora"] .lp-rexdots{
  display:block; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(var(--dot, rgba(41,37,36,.07)) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
/* Bande générique : pleine largeur moins marges, contenu recentré */
html[data-design="rexora"] .lp-band{
  max-width:none; margin-left:18px; margin-right:18px;
  border-radius:var(--r-block,28px);
  padding-top:60px; padding-bottom:68px;
}
html[data-design="rexora"] .lp-band > *{
  max-width:1132px; margin-left:auto; margin-right:auto;
}
html[data-design="rexora"] .lp-band--white{
  background:#FFFFFF;
  border:1px solid var(--border,#E8E6E5);
  box-shadow:var(--shadow-surface, 0 1px 2px rgba(0,0,0,.04));
}
html[data-design="rexora"] .lp-band--grid{
  background:
    radial-gradient(var(--dot, rgba(41,37,36,.09)) 1.2px, transparent 1.2px) 0 0/20px 20px,
    var(--surface,#FBF8F3);
  border:1px solid var(--border,#E8E6E5);
}
/* HÉRO : bloc rouge arrondi (rouge imoria échantillonné #E53517→#EA5740,
   légère nuance en dégradé) + grille de points blancs DANS la couleur,
   largeur réduite et centrée. */
html[data-design="rexora"] .lp-hero{
  --lp-hero-red:#E5391C;
  /* tirage : 1/3 de la hauteur de l'image hero (980px max, 16/10) qui
     déborde SOUS le bloc rouge (la zone rouge finit aux 2/3 de l'image,
     façon superchat) */
  --lp-hero-pull:min(207px, 21vw);
  max-width:none;
  margin:6px 18px calc(30px + var(--lp-hero-pull));
  border-radius:var(--r-block,28px);
  /* moins haut (demande utilisateur) — la largeur reste pleine */
  padding:48px 24px 0;
  background-color:var(--lp-hero-red);
  background-image:
    radial-gradient(rgba(255,255,255,.13) 1.2px, transparent 1.2px),
    linear-gradient(172deg, #E53517 0%, #E53F23 48%, #EA5740 100%);
  background-size:20px 20px, auto;
  box-shadow:var(--shadow-raised, 0 8px 30px -14px rgba(0,0,0,.3));
  /* flow-root : empêche la marge négative de l'image de « traverser »
     le bloc (margin collapse) — l'overflow reste visible. */
  display:flow-root;
  overflow:visible;
}
/* L'image hero déborde du bloc rouge (zone rouge = 2/3 de l'image) */
html[data-design="rexora"] .lp-hero .lp-shot--hero{
  margin-bottom:calc(-1 * var(--lp-hero-pull));
}
html[data-design="rexora"] .lp-hero > *{
  max-width:1132px; margin-left:auto; margin-right:auto;
}
html[data-design="rexora"] .lp-hero__title{ color:var(--text-on-accent,#fff); margin-top:24px; margin-bottom:20px; }
html[data-design="rexora"] .lp-hero__title .lp-accent{ color:rgba(255,255,255,.82); }
html[data-design="rexora"] .lp-hero__sub{ color:var(--text-on-accent-muted,rgba(255,255,255,.82)); }
html[data-design="rexora"] .lp-hero .lp-eyebrow{
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
}
html[data-design="rexora"] .lp-hero .lp-tag{
  color:rgba(255,255,255,.92); background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  position:relative;
}
/* Pastilles Devis/Factures/Chantier/Trésorerie : icônes TOUT blanches
   + liseret lumineux blanc qui tourne autour (même mécanique que les
   boutons simples). */
html[data-design="rexora"] .lp-hero .lp-tag .lp-ico{ color:#fff; }
html[data-design="rexora"] .lp-hero .lp-tag::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit;
  padding:1.5px; pointer-events:none;
  background:conic-gradient(from var(--lpang),
    transparent 0%, transparent 68%,
    rgba(255,255,255,.75) 82%, #ffffff 88%,
    rgba(255,255,255,.75) 94%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:lpRing 3.2s linear infinite;
}
html[data-design="rexora"] .lp-hero .lp-tag:nth-child(2)::after{ animation-delay:-.8s }
html[data-design="rexora"] .lp-hero .lp-tag:nth-child(3)::after{ animation-delay:-1.6s }
html[data-design="rexora"] .lp-hero .lp-tag:nth-child(4)::after{ animation-delay:-2.4s }
html[data-design="rexora"] .lp-hero .lp-tag:nth-child(5)::after{ animation-delay:-3.2s }
@media (prefers-reduced-motion: reduce){
  html[data-design="rexora"] .lp-hero .lp-tag::after{ display:none }
}
/* Pas de liseret sur le CTA « Découvrir les fonctionnalités » du héro */
html[data-design="rexora"] .lp-hero .lp-btn--ghost::after{ display:none; }
/* Boutons posés sur le bloc rouge : primaire = BLANC texte rouge (imoria) */
html[data-design="rexora"] .lp-hero .lp-btn--primary{
  background:#fff !important; color:var(--lp-hero-red,#E5391C) !important;
  box-shadow:0 2px 12px rgba(0,0,0,.2) !important;
}
html[data-design="rexora"] .lp-hero .lp-btn--ghost{
  background:transparent !important; color:#fff !important;
  border-color:rgba(255,255,255,.45) !important;
}
html[data-design="rexora"] .lp-hero .lp-btn--ghost:hover{
  background:rgba(255,255,255,.12) !important;
}

/* Angles plus ronds en Glass : boutons / icon-buttons / capsule nav (rebat la
   règle pill globale via tier ID :not(#_) ; placée après → gagne au même score). */
html[data-design="glass"] .lp-btn:not(#_){border-radius:16px !important}
html[data-design="glass"] .lp-btn--lg:not(#_){border-radius:18px !important}
html[data-design="glass"] .lp-iconbtn:not(#_){border-radius:14px !important}
html[data-design="glass"] .lp-nav{border-radius:20px}

/* ── Header : capsule flottante givrée, compacte, qui respire ── */
/* ⚠️ VALEURS RELEVÉES SUR letters.app (fenêtre 1440) : la barre occupe TOUTE
   la largeur du panneau — même retrait de 12 px que lui — fait 64 px de haut,
   12 px de marge intérieure, et son rayon est une pilule (120 px). Elle est
   TRANSPARENTE au repos : elle flotte sur le panneau coloré, elle ne s'en
   détache pas. Elle ne se densifie qu'une fois le haut de page quitté
   (.lp-scrolled), là où elle passe sur du clair. */
/* ⚠️ `fixed`, PAS `sticky`. En sticky la barre occupe une place dans le flux
   et REPOUSSE le panneau vers le bas : elle se retrouvait au-dessus de lui,
   texte blanc sur fond de page clair, illisible. Chez letters.app elle est
   DANS le panneau, au même retrait de 12 px. En fixed, l'ouverture commence
   au bord haut de la fenêtre et la barre flotte dessus. */
.lp-header{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;border:0;padding:12px;pointer-events:none}
/* ⚠️ 32 px À GAUCHE, 24 À DROITE — le rayon du panneau fait 28 px en haut.
   À 20/12, le logo et les boutons venaient se poser DANS la courbe du coin :
   ils touchaient le bord au lieu d'être posés dans le cadre. Relevé par
   Jérôme le 2026-08-18. */
.lp-nav{display:flex;align-items:center;gap:12px;height:64px;padding:0 24px 0 32px;pointer-events:auto;
  max-width:none;width:100%;
  background:transparent;border:1px solid transparent;border-radius:120px;box-shadow:none}
/* Au repos, la barre est POSÉE SUR LE VIOLET PROFOND : tout y passe en blanc.
   Mesuré : blanc sur --af-v-800 (#38258E) = 11,4:1 ; le gris de repos des
   liens à 72 % d'opacité tient encore 6,4:1. */
.lp-header:not(.lp-scrolled) .lp-logo{color:#fff;--af-marque-2:rgba(255,255,255,.66)}
.lp-header:not(.lp-scrolled) .lp-nav__links a{color:rgba(255,255,255,.72)}
.lp-header:not(.lp-scrolled) .lp-nav__links a:hover{color:#fff}
.lp-header:not(.lp-scrolled) .lp-iconbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}
.lp-header:not(.lp-scrolled) .lp-iconbtn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.34)}
/* Le bouton d'action reprend le contraste de letters.app : une pilule
   quasi-noire sur le panneau coloré. Le violet de l'accent y disparaîtrait. */
.lp-header:not(.lp-scrolled) .lp-nav .lp-btn--primary{
  background:var(--af-n-900,#0B1030);border-color:transparent;color:#fff;box-shadow:none}
.lp-header:not(.lp-scrolled) .lp-nav .lp-btn{border-radius:100px}
/* Le nom s'ecrit comme partout ailleurs : Satoshi, une graisse, un
   interlettrage (archiflow-marque.css). Il etait en Space Grotesk, coupe en
   « Archi » + « Flow », la seconde moitie a la couleur d'accent. */
.lp-logo{font-size:20px;color:var(--t1);--af-marque-2:var(--t3)}
/* `nowrap` : sans lui, « App mobile » se coupait en deux lignes dès que la
   place manquait, et la barre grandissait au lieu de laisser filer les liens.
   C'est ce retour à la ligne qui donnait l'impression que le contenu sortait
   du cadre (relevé par Jérôme le 2026-08-19). */
.lp-nav__links{display:flex;align-items:center;gap:24px;margin-left:18px;white-space:nowrap}
/* Le menu se CENTRE dans la barre (demandé le 2026-08-18). En absolu, pour un
   vrai centre : en flex il serait décalé par la différence logo/boutons.
   Seulement à partir de 1000px — en dessous, le centre absolu entrerait en
   collision avec le logo (le menu fait ~430px). */
@media(min-width:1000px){
  .lp-nav{position:relative}
  .lp-nav__links{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}
}
.lp-nav__links a{font-size:13.5px;color:var(--t2);transition:color .15s}
.lp-nav__links a:hover{color:var(--t1)}
.lp-nav__right{margin-left:auto;display:flex;align-items:center;gap:8px}
.lp-iconbtn{width:32px;height:32px;min-height:32px;border-radius:12px;border:1px solid var(--brd);background:var(--card);color:var(--t2);
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.lp-iconbtn:hover{color:var(--t1);border-color:var(--brd2,var(--brd))}
.lp-iconbtn .lp-ico{font-size:18px}
/* mêmes angles que les boutons (rebat la règle pill globale de design-rexora.css) */
html[data-design] .lp-iconbtn:not(#_){border-radius:12px !important}
/* contrôles du header harmonisés à la même hauteur que les icônes (32px) */
.lp-nav .lp-btn{height:32px;min-height:32px;padding:0 14px;font-size:13px}
/* Essayer DANS la barre : on retire le cadre « creusé » double-anneau qui
   déborde de ~4px et le fait paraître plus haut que les boutons-icônes.
   Son extérieur s'aligne ainsi sur les autres (les gros CTA de la page,
   .lp-btn--lg, gardent leur cadre). */
.lp-nav .lp-btn--primary,
.lp-nav .lp-btn--primary:hover,
.lp-nav .lp-btn--primary:active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 4px 12px -7px rgba(var(--acc-rgb),.5)}

/* ══════════ Mode Glass : LIQUID GLASS (façon Apple iOS 26) ══════════
   Matière translucide qui réfracte (blur + saturate + brightness), arête
   spéculaire (rim 1px en dégradé clair haut-gauche → sombre, via masque),
   brillance interne (gloss en haut) + insets/élévation = flottement.
   Réutilise les tokens orbit-liquid-glass.css (--glass-rim/inset/saturate/
   brightness, déclinés dark/light). STRICTEMENT scopé glass → Rexora intact. */
html[data-design="glass"] .lp-card,
html[data-design="glass"] .lp-plan,
html[data-design="glass"] .lp-faq__item,
html[data-design="glass"] .lp-btn--ghost,
html[data-design="glass"] .lp-tag,
html[data-design="glass"] .lp-billing,
html[data-design="glass"] .lp-final,
html[data-design="glass"] .lp-mobile__form,
html[data-design="glass"] .lp-modal__panel{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 42%),
             color-mix(in srgb,var(--card) 44%,transparent);
  -webkit-backdrop-filter:blur(20px) saturate(var(--glass-saturate,180%)) brightness(var(--glass-brightness,1.06));
          backdrop-filter:blur(20px) saturate(var(--glass-saturate,180%)) brightness(var(--glass-brightness,1.06));
  border:1px solid transparent;
  box-shadow:var(--glass-inset-hi,inset 0 1px 0 0 rgba(255,255,255,.16)),
             var(--glass-inset-lo,inset 0 -1px 1px 0 rgba(0,0,0,.22)),
             var(--glass-elev,0 10px 30px -8px rgba(0,0,0,.38))}
/* Arête spéculaire (le contour visible) : 1px dégradé via masque content-box */
html[data-design="glass"] .lp-card::before,
html[data-design="glass"] .lp-plan::before,
html[data-design="glass"] .lp-faq__item::before,
html[data-design="glass"] .lp-btn--ghost::before,
html[data-design="glass"] .lp-tag::before,
html[data-design="glass"] .lp-billing::before,
html[data-design="glass"] .lp-final::before,
html[data-design="glass"] .lp-mobile__form::before,
html[data-design="glass"] .lp-modal__panel::before,
html[data-design="glass"] .lp-nav::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:1;
  background:linear-gradient(135deg,var(--glass-rim-hi,rgba(255,255,255,.55)) 0%,var(--glass-rim-lo,rgba(255,255,255,.04)) 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
/* Contenu au-dessus du rim sur les grandes surfaces */
html[data-design="glass"] .lp-card > *,
html[data-design="glass"] .lp-plan > *,
html[data-design="glass"] .lp-final > *,
html[data-design="glass"] .lp-modal__panel > *{position:relative;z-index:2}
/* CTA final : on garde un halo d'accent sous le verre */
html[data-design="glass"] .lp-final{
  background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 42%),
             radial-gradient(120% 120% at 50% 0%,rgba(var(--acc-rgb),.14),transparent 60%),
             color-mix(in srgb,var(--card) 40%,transparent)}
/* Bouton ghost : le survol conserve la matière verre + glow d'accent */
html[data-design="glass"] .lp-btn--ghost:hover{
  box-shadow:var(--glass-inset-hi,inset 0 1px 0 0 rgba(255,255,255,.16)),
             var(--glass-accent-glow,0 0 0 1px rgba(var(--acc-rgb),.35),0 8px 26px -10px rgba(var(--acc-rgb),.45))}
/* Icon-buttons : même matière */
html[data-design="glass"] .lp-iconbtn{
  background:color-mix(in srgb,var(--card) 44%,transparent);
  -webkit-backdrop-filter:blur(16px) saturate(160%) brightness(var(--glass-brightness,1.06));
          backdrop-filter:blur(16px) saturate(160%) brightness(var(--glass-brightness,1.06));
  box-shadow:var(--glass-inset-hi,inset 0 1px 0 0 rgba(255,255,255,.16))}
/* Capsule nav : verre liquide plus prononcé (surface flottante signature) */
html[data-design="glass"] .lp-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent 55%),
             color-mix(in srgb,var(--card) 46%,transparent);
  -webkit-backdrop-filter:blur(26px) saturate(185%) brightness(var(--glass-brightness,1.06));
          backdrop-filter:blur(26px) saturate(185%) brightness(var(--glass-brightness,1.06));
  box-shadow:var(--glass-inset-hi,inset 0 1px 0 0 rgba(255,255,255,.16)),
             var(--glass-inset-lo,inset 0 -1px 1px 0 rgba(0,0,0,.22)),
             0 14px 38px -16px rgba(0,0,0,.4)}
html[data-design="glass"] .lp-header.lp-scrolled .lp-nav{
  background:linear-gradient(180deg,rgba(255,255,255,.18),transparent 55%),
             color-mix(in srgb,var(--card) 60%,transparent);
  box-shadow:var(--glass-inset-hi,inset 0 1px 0 0 rgba(255,255,255,.16)),
             var(--glass-inset-lo,inset 0 -1px 1px 0 rgba(0,0,0,.22)),
             0 18px 46px -16px rgba(0,0,0,.5)}

/* Accessibilité : transparence réduite → surfaces opaques lisibles (glass seul) */
@media (prefers-reduced-transparency: reduce){
  html[data-design="glass"] .lp-card,
  html[data-design="glass"] .lp-plan,
  html[data-design="glass"] .lp-faq__item,
  html[data-design="glass"] .lp-btn--ghost,
  html[data-design="glass"] .lp-tag,
  html[data-design="glass"] .lp-billing,
  html[data-design="glass"] .lp-final,
  html[data-design="glass"] .lp-modal__panel,
  html[data-design="glass"] .lp-iconbtn,
  html[data-design="glass"] .lp-nav{
    background:var(--card)!important;
    -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    border:1px solid var(--brd)!important}
  html[data-design="glass"] .lp-card::before,
  html[data-design="glass"] .lp-plan::before,
  html[data-design="glass"] .lp-faq__item::before,
  html[data-design="glass"] .lp-btn--ghost::before,
  html[data-design="glass"] .lp-tag::before,
  html[data-design="glass"] .lp-billing::before,
  html[data-design="glass"] .lp-final::before,
  html[data-design="glass"] .lp-modal__panel::before,
  html[data-design="glass"] .lp-nav::before{display:none!important}
}

/* ── Sections ── */
.lp-section{padding-top:106px;padding-bottom:106px;position:relative;scroll-margin-top:96px}
.lp-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--acc);background:var(--accbg,rgba(var(--acc-rgb),.1));border:1px solid color-mix(in srgb,var(--acc) 28%,transparent);
  padding:6px 12px;border-radius:999px}
.lp-eyebrow .lp-ico{font-size:16px}
.lp-h2{font-size:clamp(26px,3.4vw,40px);font-weight:700;margin:18px 0 14px}
.lp-lead{font-size:clamp(15px,1.5vw,18px);color:var(--t2);max-width:60ch}
.lp-section-head{text-align:center;max-width:720px;margin:0 auto 52px}
.lp-section-head .lp-lead{margin:0 auto}

/* ── Hero ── */
.lp-hero{padding-top:76px;padding-bottom:84px;text-align:center}
.lp-hero__title{font-size:clamp(38px,6.1vw,72px);font-weight:700;letter-spacing:-.03em;margin:24px auto 20px;max-width:22ch}
.lp-hero__title .lp-accent{color:var(--acc)}
.lp-hero__sub{font-size:clamp(16px,1.7vw,20px);color:var(--t2);max-width:62ch;margin:0 auto 26px}
.lp-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 30px}
.lp-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--t2);background:var(--card);border:1px solid var(--brd);padding:7px 13px;border-radius:999px}
.lp-tag .lp-ico{font-size:16px;color:var(--acc)}
.lp-cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:46px}

/* ── Emplacement visuel (capture/vidéo — rempli au Lot 3) ── */
.lp-shot{position:relative;border-radius:var(--lp-radius);border:1px solid var(--brd);background:var(--card);
  box-shadow:var(--lp-shadow);overflow:hidden;aspect-ratio:16/10}
/* Capture du héro façon superchat.com :
   - cadre « bezel » translucide effet frost (fond blanc semi-transparent
     + blur + bord lumineux) autour de l'image
   - l'ensemble se dissout en FONDU TRANSPARENT vers le bas (mask-image) */
.lp-shot--hero{aspect-ratio:auto;max-width:980px;margin:0 auto;
  padding:10px;
  background:rgba(255,255,255,.30);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
          backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--lp-radius);
  box-shadow:0 24px 70px -34px rgba(0,0,0,.4);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 99%);
          mask-image:linear-gradient(180deg,#000 0%,#000 86%,transparent 99%);}
/* L'image du héro est en FLUX NORMAL dans le cadre (pas d'absolu, pas de
   ratio forcé) : le cadre épouse exactement l'image → lunette de 10px
   IDENTIQUE sur les 4 côtés, et angles de l'image arrondis comme le cadre
   (radius concentrique : cadre − lunette). */
.lp-shot--hero .lp-shot__img{position:relative;inset:auto;z-index:1;
  width:100%;height:auto;object-fit:unset;
  /* angles de l'image IMPORTÉE nettement arrondis, assortis au cadre,
     sur les 4 coins */
  border-radius:calc(var(--lp-radius) - 4px)}
.lp-shot--hero .lp-shot__ph{display:none}
/* Mode NUIT : lunette FINE (le bezel blanc 10px faisait un gros contour
   clair) + glow de bordure qui SUIT LA SOURIS (même effet que les cartes
   de l app) via --mx/--my posés par lpShotEdge(). */
[data-theme="dark"] .lp-shot--hero{
  padding:4px; background:rgba(255,255,255,.05);
  border:1px solid color-mix(in srgb,var(--t1) 16%, transparent)}
[data-theme="dark"] .lp-shot--hero::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:radial-gradient(circle 160px at var(--mx,50%) var(--my,0%),
    rgba(var(--acc-rgb),.85), rgba(var(--acc-rgb),.15) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; opacity:0; transition:opacity .25s ease; pointer-events:none; z-index:3}
[data-theme="dark"] .lp-shot--hero:hover::after{opacity:1}

.lp-shot__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:none;z-index:1}
html[data-design="rexora"][data-theme="light"] .lp-shot__img--rl,
html[data-design="rexora"][data-theme="dark"] .lp-shot__img--rd,
html[data-design="glass"][data-theme="light"] .lp-shot__img--gl,
html[data-design="glass"][data-theme="dark"] .lp-shot__img--gd,
html[data-design="termos"][data-theme="light"] .lp-shot__img--tl,
html[data-design="termos"][data-theme="dark"] .lp-shot__img--td{display:block}
.lp-shot__ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--t3);background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--acc) 10%,transparent), transparent 60%),
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb,var(--t3) 6%,transparent) 14px 15px)}
.lp-shot__ph .lp-ico{font-size:40px;color:var(--acc);opacity:.85}
.lp-shot__ph span{font-size:12.5px;font-weight:700;letter-spacing:.04em}

/* ── Sections feature alternées ── */
.lp-feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lp-feature + .lp-feature{margin-top:112px}
.lp-feature--rev .lp-feature__media{order:2}
.lp-feature__media{min-width:0}
.lp-feature h3{font-size:clamp(22px,2.6vw,32px);font-weight:700;margin:16px 0 12px}
.lp-feature p{color:var(--t2);font-size:16px;margin-bottom:18px}
.lp-checks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.lp-checks li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--t1)}
.lp-checks .lp-ico{font-size:20px;color:var(--acc);flex-shrink:0;margin-top:1px}

/* ── Bento « Et bien plus » : 4 cartes texte + zoom détail, cadre double « creusé » ── */
.lp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lp-card{--lp-frame:var(--bg);position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--brd);border-radius:var(--r-xl,18px);padding:26px 26px 0;overflow:hidden;
  box-shadow:0 0 0 2px var(--lp-frame),0 0 0 4px color-mix(in srgb,var(--t1) 8%,var(--lp-frame)),var(--lp-shadow-soft);
  transition:transform .18s ease,box-shadow .25s ease}
.lp-card:hover{transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--lp-frame),0 0 0 4px color-mix(in srgb,var(--acc) 24%,var(--lp-frame)),var(--lp-shadow)}
.lp-card__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--acc);margin-bottom:12px}
.lp-card__eyebrow .lp-ico{font-size:18px}
.lp-card h4{font-family:var(--fd);font-size:19px;font-weight:700;margin-bottom:8px;color:var(--t1)}
.lp-card p{font-size:14px;color:var(--t2);line-height:1.55;margin-bottom:20px}
.lp-card__detail{margin-top:auto;position:relative;height:172px;border-radius:12px 12px 0 0;
  border:1px solid var(--brd);border-bottom:0;overflow:hidden;background:var(--bg);box-shadow:inset 0 2px 8px -4px rgba(0,0,0,.18)}
.lp-grid__more{margin-top:22px;text-align:center;font-size:13.5px;color:var(--t3)}
.lp-grid__more b{color:var(--t2);font-weight:600}

/* ── Tarifs ── */
.lp-billing{display:inline-flex;align-items:center;gap:12px;justify-content:center;margin:0 auto 38px;
  background:var(--card);border:1px solid var(--brd);border-radius:999px;padding:6px}
.lp-billing button{border:none;background:transparent;font-family:var(--f);font-size:13px;font-weight:700;color:var(--t3);
  padding:8px 18px;border-radius:999px;cursor:pointer;transition:all .15s}
.lp-billing button.active{background:var(--acc);color:var(--text-on-accent,#fff);box-shadow:0 3px 10px -4px rgba(var(--acc-rgb),.55)}
.lp-billing__save{font-size:11px;font-weight:700;color:var(--acc);background:var(--accbg,rgba(var(--acc-rgb),.12));padding:3px 9px;border-radius:999px}
.lp-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.lp-plan{background:var(--card);border:1px solid var(--brd);border-radius:var(--lp-radius);
  box-shadow:var(--lp-shadow-soft);position:relative;overflow:visible;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s ease,border-color .5s ease}
/* Wrapper qui ROGNE l'eau au cadre (badge reste hors du clip). */
.lp-plan__clip{position:relative;height:100%;border-radius:inherit;overflow:hidden}
.lp-plan__inner{display:flex;flex-direction:column;height:100%;padding:26px 22px;box-sizing:border-box;
  position:relative;z-index:1}
/* ── EFFET LIQUIDE ──
   UN SEUL élément : son SOMMET est ONDULÉ par un mask (couche vague en haut +
   couche pleine en dessous, en union) → AUCUNE couture possible. Il monte par
   `height` (ancré en bas). Il contient une copie du contenu (texte accent),
   révélée À TRAVERS la surface ondulée. Hauteur du cadre fournie par le JS
   (--lp-card-h) pour aligner la copie. Pilotage : .lp-plan--active (JS). */
.lp-plan__liquid{position:absolute;left:0;right:0;bottom:0;height:0;z-index:2;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 78%,#fff), var(--acc) 58%);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='22'%3E%3Cpath d='M0 10 C21 1 44 1 65 10 C86 19 109 19 130 10 L130 22 L0 22 Z' fill='black'/%3E%3C/svg%3E") top left/130px 22px repeat-x,
    linear-gradient(#000 0 0) bottom left/100% calc(100% - 21px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='22'%3E%3Cpath d='M0 10 C21 1 44 1 65 10 C86 19 109 19 130 10 L130 22 L0 22 Z' fill='black'/%3E%3C/svg%3E") top left/130px 22px repeat-x,
    linear-gradient(#000 0 0) bottom left/100% calc(100% - 21px) no-repeat;
  transition:height 1.2s cubic-bezier(.45,.05,.25,1)}
.lp-plan--active .lp-plan__liquid{height:100%}
/* La vague continue de bouger tant que la carte est active (souris dessus),
   même une fois pleine — pas seulement pendant le remplissage. */
.lp-plan--active .lp-plan__liquid{animation:lpWaveScroll 1.3s linear infinite}
@keyframes lpWaveScroll{
  from{-webkit-mask-position:0 top, left bottom; mask-position:0 top, left bottom}
  to{-webkit-mask-position:130px top, left bottom; mask-position:130px top, left bottom}}
/* Copie immergée : hauteur = cadre (px via JS), ancrée en bas → alignée au réel. */
.lp-plan__liquid > .lp-plan__inner{position:absolute;left:0;right:0;bottom:0;top:auto;
  height:var(--lp-card-h,480px);z-index:1;color:var(--text-on-accent,#fff)}
.lp-plan__liquid .lp-plan__name,
.lp-plan__liquid .lp-plan__price{color:var(--text-on-accent,#fff)}
.lp-plan__liquid .lp-plan__price small,
.lp-plan__liquid .lp-plan__note,
.lp-plan__liquid .lp-plan__feats li{color:color-mix(in srgb,var(--text-on-accent,#fff) 84%,transparent)}
.lp-plan__liquid .lp-plan__feats .lp-ico{color:var(--text-on-accent,#fff)}
.lp-plan__liquid .lp-plan__inherit,
.lp-plan__liquid .lp-plan__scan{color:var(--text-on-accent,#fff)!important;
  border-color:color-mix(in srgb,var(--text-on-accent,#fff) 32%,transparent)}
.lp-plan__liquid .lp-plan__inherit strong,.lp-plan__liquid .lp-plan__scan strong,
.lp-plan__liquid .lp-plan__inherit .lp-ico,.lp-plan__liquid .lp-plan__scan .lp-ico{color:var(--text-on-accent,#fff)!important}
.lp-plan__liquid .lp-btn{background:var(--text-on-accent,#fff)!important;color:var(--acc)!important;
  border:1px solid var(--text-on-accent,#fff)!important;box-shadow:0 10px 22px -10px rgba(0,0,0,.45)!important}
/* ── Éclaboussures : suivent la SURFACE (même height-anim), gouttes au sommet ── */
.lp-plan__splash{position:absolute;left:0;right:0;bottom:0;height:0;z-index:3;pointer-events:none;
  transition:height 1.2s cubic-bezier(.45,.05,.25,1)}
.lp-plan--active .lp-plan__splash{height:100%}
.lp-plan__drop{position:absolute;top:-4px;border-radius:50%;opacity:0;
  background:color-mix(in srgb,var(--acc) 35%,#fff)}
.lp-plan__drop--l{left:9%;width:6px;height:6px}
.lp-plan__drop--r{right:11%;width:5px;height:5px}
.lp-plan__drop--c{left:48%;width:4px;height:4px}
.lp-plan--filling .lp-plan__splash .lp-plan__drop--l{animation:lpSplash 1.3s ease-in-out .15s infinite}
.lp-plan--filling .lp-plan__splash .lp-plan__drop--r{animation:lpSplash 1.6s ease-in-out .5s infinite}
.lp-plan--filling .lp-plan__splash .lp-plan__drop--c{animation:lpSplash 1.85s ease-in-out .85s infinite}
@keyframes lpSplash{0%,100%{opacity:0;transform:translateY(3px) scale(.4)}
  22%{opacity:.95}55%{opacity:.5;transform:translateY(-18px) scale(1)}}
/* Badge au-dessus du liquide. */
.lp-plan__badge{z-index:4}
html[data-design="glass"] .lp-plan > .lp-plan__badge{z-index:4}

/* État actif : relief + bord accent + lift (le fond vient du liquide). */
.lp-plan--active{z-index:3}
@media(min-width:901px){ .lp-plan--active{transform:translateY(-10px)} }
html[data-design] .lp-plan--active{
  border:1px solid color-mix(in srgb,var(--acc) 72%,#000);
  box-shadow:0 28px 64px -18px rgba(var(--acc-rgb),.62), inset 0 1px 0 rgba(255,255,255,.10);
}
/* Badge au-dessus du liquide ; inversé quand la carte est active. */
.lp-plan__badge{z-index:4}
.lp-plan--active .lp-plan__badge{background:var(--text-on-accent,#fff);color:var(--acc)}
.lp-plan__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:700;letter-spacing:.04em;
  background:var(--acc);color:var(--text-on-accent,#fff);padding:5px 13px;border-radius:999px;white-space:nowrap}
.lp-plan__badge--soon{background:var(--card2,var(--surface-2,var(--card)));color:var(--t2);border:1px solid var(--brd)}
.lp-plan__name{font-family:var(--fd);font-weight:700;font-size:18px;margin-bottom:6px}
.lp-plan__price{font-family:var(--fd);font-weight:700;font-size:38px;line-height:1;margin-bottom:2px}
.lp-plan__price small{font-family:var(--f);font-size:14px;font-weight:400;color:var(--t3)}
.lp-plan__note{font-size:12px;color:var(--t3);min-height:18px;margin-bottom:18px}
.lp-plan__feats{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}
.lp-plan__feats li{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--t2)}
.lp-plan__feats .lp-ico{font-size:18px;color:var(--acc);flex-shrink:0}
.lp-plan__inherit{color:var(--t1)!important;font-weight:700;font-size:13px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px dashed var(--brd)}
.lp-plan__inherit .lp-ico{color:var(--t3)!important}
.lp-plan__inherit strong{color:var(--acc)}
/* Ligne Scan IA : légère mise en avant (séparateur + puce + quota accent) */
.lp-plan__scan{margin-top:4px;padding-top:9px;border-top:1px dashed var(--brd);color:var(--t1)!important;font-weight:700}
.lp-plan__scan .lp-ico{color:var(--acc)!important}
.lp-plan__scan strong{color:var(--acc)}
.lp-plan .lp-btn{width:100%;justify-content:center}
.lp-btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── FAQ ── */
.lp-faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.lp-faq__item{background:var(--card);border:1px solid var(--brd);border-radius:var(--r-lg,14px);overflow:hidden}
.lp-faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:transparent;border:none;
  font-family:var(--fd);font-weight:600;font-size:15.5px;color:var(--t1);text-align:left;padding:18px 20px;cursor:pointer}
.lp-faq__q .lp-ico{transition:transform .2s;color:var(--t3)}
.lp-faq__item.open .lp-faq__q .lp-ico{transform:rotate(180deg)}
.lp-faq__a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--t2);font-size:14px}
.lp-faq__a div{padding:0 20px 18px}

/* ── CTA final ── */
.lp-final{text-align:center;background:
   radial-gradient(120% 120% at 50% 0%, color-mix(in srgb,var(--acc) 14%,transparent), transparent 60%);
  border:1px solid var(--brd);border-radius:var(--lp-radius);padding:64px 24px;box-shadow:var(--lp-shadow-soft)}
.lp-final h2{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.lp-final p{color:var(--t2);max-width:54ch;margin:0 auto 28px;font-size:16px}

/* ── Footer ── */
.lp-footer{border-top:1px solid var(--brd);padding:54px 0 36px;margin-top:40px;color:var(--t3)}
.lp-footer__cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:34px}
.lp-footer h5{font-family:var(--fd);font-size:13px;font-weight:700;color:var(--t2);margin-bottom:14px;letter-spacing:.03em}
.lp-footer ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.lp-footer a{font-size:13px;color:var(--t3)}
.lp-footer a:hover{color:var(--t1)}
.lp-footer__bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--brd);padding-top:20px;font-size:12.5px;flex-wrap:wrap;gap:10px}

/* ── Modale (login / signup / contact) ── */
.lp-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:60px 16px;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow-y:auto}
.lp-modal.open{display:flex}
.lp-modal__panel{background:var(--card);border:1px solid var(--brd);border-radius:var(--lp-radius);box-shadow:var(--shadow-overlay,0 20px 60px -20px rgba(0,0,0,.4));
  width:100%;max-width:430px;padding:30px}
.lp-modal__panel--wide{max-width:520px}
.lp-modal__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.lp-modal__head h3{font-size:20px}
.lp-modal__head p{font-size:13px;color:var(--t3);margin-top:4px}
.lp-field{margin-bottom:14px}
.lp-field label{display:block;font-size:12.5px;font-weight:600;color:var(--t2);margin-bottom:6px}
.lp-field input,.lp-field select,.lp-field textarea{width:100%;font-family:var(--f);font-size:14px;color:var(--t1);background:var(--inp,var(--surface-2,var(--card)));
  border:1px solid var(--brd);border-radius:var(--r-md,10px);padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.lp-field input:focus,.lp-field select:focus,.lp-field textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lp-msg{display:none;padding:11px 14px;border-radius:var(--r-md,10px);font-size:13px;margin-bottom:14px}
.lp-msg.show{display:block}
.lp-msg--err{background:rgba(239,68,68,.12);color:var(--err,#ef4444);border:1px solid rgba(239,68,68,.25)}
.lp-msg--ok{background:rgba(16,185,129,.12);color:var(--ok,#10b981);border:1px solid rgba(16,185,129,.25)}
.lp-modal__alt{text-align:center;font-size:12.5px;color:var(--t3);margin-top:16px}
.lp-modal__alt a{color:var(--acc);font-weight:700;cursor:pointer}
.lp-link{background:none;border:none;color:var(--acc);font-family:var(--f);font-size:12.5px;font-weight:700;cursor:pointer;padding:0}

/* ── Toast flash ── */
.lp-flash{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px}
.lp-flash__item{padding:12px 18px;border-radius:var(--r-md,10px);font-size:13px;font-weight:600;box-shadow:var(--lp-shadow);background:var(--card);border:1px solid var(--brd);color:var(--t1)}

/* ── Bloc app mobile (à venir) ── */
.lp-mobile{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.lp-mobile__text .lp-h2{text-align:left}
.lp-applebadge{display:inline-flex;margin-top:22px}
/* Badge officiel : hauteur fixe, ratio préservé, clear space via margin. Aucun
   filtre/recolor (guidelines Apple). */
.lp-applebadge img{height:50px;width:auto;display:block}
.lp-applebadge__fallback{display:inline-flex;align-items:center;height:50px;padding:0 22px;border-radius:12px;
  background:#111;color:#fff;font-family:var(--fd);font-weight:600;font-size:14px}
.lp-mobile__form{background:var(--card);border:1px solid var(--brd);border-radius:var(--lp-radius);
  padding:26px;box-shadow:var(--lp-shadow-soft)}
.lp-wait-label{display:block;font-family:var(--fd);font-weight:700;font-size:15px;margin-bottom:12px;color:var(--t1)}
.lp-wait-row{display:flex;gap:10px}
.lp-wait-row input{flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1px solid var(--brd);
  background:var(--bg2,var(--card));color:var(--t1);font-family:var(--f);font-size:14px}
.lp-wait-row input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15)}
.lp-wait-row .lp-btn{flex:0 0 auto;white-space:nowrap}
.lp-wait-consent{margin-top:10px;font-size:11.5px;color:var(--t3);line-height:1.5}
.lp-wait-msg{margin-top:10px;font-size:13px;font-weight:600;min-height:18px}
.lp-wait-msg.ok{color:#16a34a}
.lp-wait-msg.err{color:var(--err,#dc2626)}

/* ══════════ ONGLETS 3 STYLES (vitrine interactive) ══════════ */
html{transition:background .35s ease}
body{transition:background .35s ease,color .35s ease}
/* ⚠️ LES ONGLETS VIVENT DANS L'OUVERTURE, SUR LE PANNEAU COLORÉ. Ils étaient
   posés dans le flux sous la barre, sur le fond de page. Depuis la refonte de
   l'ouverture (2026-08-18) ils sont dans le bloc de texte centré.
   Fond SOMBRE et pas translucide blanc : ils tombent à mi-hauteur du panneau,
   là où le dégradé est déjà clair, et du blanc n'y rendait que 3,5:1. Un voile
   sombre rend le contraste indépendant de l'endroit où ils se posent (6,6:1). */
/* ⚠️ L'ÉCART SUIT LA HAUTEUR D'ÉCRAN. À 44 px fixes, sur un portable de
   768 px de haut il ne restait que 7 px entre les onglets et le haut de
   l'écran de démonstration — mesuré. En vh, l'écart se resserre là où la
   place manque au lieu de coller les deux blocs. */
.lp-themetabs{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:clamp(20px,4.5vh,44px);
  position:relative;z-index:4;pointer-events:auto}
.lp-themetab{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;
  border:1px solid rgba(255,255,255,.20);background:rgba(11,16,48,.38);color:#fff;cursor:pointer;
  font-family:var(--f);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:border-color .2s,color .2s,background .2s}
.lp-themetab:hover{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(11,16,48,.52)}
.lp-themetab.active{color:var(--af-v-800,#38258E);border-color:transparent;background:#fff}
html[data-design="termos"] .lp-themetab.active{color:#08110B}
.lp-themetab__logo{width:14px;height:14px;flex:0 0 14px;display:inline-block}
/* mini-logos par thème (CSS pur, pas d'emoji) */
.lp-themetab__logo--renew{border-radius:50%;background:linear-gradient(135deg,#8B6BF2,#4A32A8)}
.lp-themetab__logo--termos{border-radius:2px;border:1.5px solid currentColor;position:relative}
.lp-themetab__logo--termos::after{content:'';position:absolute;left:2px;top:2px;width:5px;height:2px;background:currentColor}
html[data-design="termos"] .lp-themetab{border-radius:0}

/* ══════════ STYLE TERMOS — landing (tokens themes.css) ══════════ */
/* Accent VERT terminal, 2 nuances : vert vif (--acc) + vert clair (--accl)
   pour les glows/hovers. Statuts/données non concernés (landing only). */
html[data-design="termos"]{
  /* ⚠️ VERT CITRON, pas vert émeraude. Demandé par Jérôme le 2026-08-18 :
     le #22c55e tirait vers le sapin. La rampe lime tient le registre
     « terminal » tout en étant franchement citronnée, et elle contraste
     mieux sur le gris sombre de TermOS (11,5:1 contre 6,9:1). */
  --acc:#A3E635; --acc-rgb:163,230,53; --accl:#BEF264; --accd:#84CC16;
}
/* Pendant la FRAPPE terminal (classe lp-typing posée par lpTypewriteHero) :
   sous-titre / tags / CTA masqués, révélés en fondu à la fin. */
.lp-hero__sub,.lp-tags,.lp-cta-row{transition:opacity .5s ease}
.lp-hero.lp-typing :is(.lp-hero__sub,.lp-tags,.lp-cta-row){
  opacity:0 !important;                 /* bat les animations d'entrée (fill both) */
  animation:none !important}
/* Effet futuriste 1 : curseur terminal clignotant en fin de titre hero. */
html[data-design="termos"] .lp-hero__title::after{
  content:''; display:inline-block; width:3px; height:.82em;
  background:var(--accl); margin-left:8px; vertical-align:-0.06em;
  animation:lpTermBlink 1.1s steps(1) infinite}
/* Pendant la FRAPPE : curseur PLEIN collé au dernier caractère (un terminal
   ne clignote qu'au repos) — le clignotement le faisait disparaître la
   moitié du temps et cassait le suivi visuel. */
html[data-design="termos"] .lp-hero.lp-typing .lp-hero__title::after{
  animation:none; opacity:1}
@keyframes lpTermBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
/* Effet futuriste 3 : les 2 nuances de vert sur les CTA (dégradé + glow). */
html[data-design="termos"] .lp-btn--primary:not(#_){
  background:linear-gradient(135deg,rgba(74,222,128,.22),rgba(34,197,94,.12));
  color:var(--accl); border:1px solid rgba(74,222,128,.55);
  box-shadow:0 0 16px rgba(34,197,94,.28)}
html[data-design="termos"] .lp-btn--primary:not(#_):hover{
  box-shadow:0 0 26px rgba(74,222,128,.45)}
html[data-design="termos"] .lp-themetab.active{
  color:var(--accl); border-color:var(--acc);
  background:rgba(34,197,94,.10); box-shadow:0 0 12px rgba(34,197,94,.35)}
html[data-design="termos"] .lp-soonchip{color:var(--accl)}
/* ⚠️ LES BOUTONS DE L'OUVERTURE SE POSENT SUR LE PANNEAU COLORÉ, et doivent
   rester lisibles DANS LES DEUX STYLES. Le primaire de Renew est violet sur
   un panneau violet ; celui de TermOS est un vert translucide sur un panneau
   vert : dans les deux cas l'action principale de la page devenait la moins
   visible. On repasse en pilule sombre pleine (blanc sur #0B1030 = 17,4:1),
   comme letters.app le fait sur son panneau bleu.
   ⚠️ Spécificité : les règles TermOS ci-dessus valent (1,2,1) grâce à
   `:not(#_)`. Il faut donc au moins (1,3,1) pour les battre — d'où le
   `html[data-design]` en tête. Une règle simple dans la feuille externe
   perdait, et le bouton restait invisible. */
html[data-design] .lp-ouverture .lp-btn--primary:not(#_),
html[data-design] .lp-ouverture .lp-btn--primary:not(#_):hover,
html[data-design] .lp-ouverture .lp-btn--primary:not(#_)[disabled]{
  background:var(--af-n-900,#0B1030);border-color:transparent;color:#fff;box-shadow:none;opacity:1}
/* Le secondaire en blanc plein : un contour seul s'effacerait sur la couleur. */
html[data-design] .lp-ouverture .lp-btn--ghost:not(#_){
  background:#fff;border-color:transparent;color:var(--af-v-800,#38258E)}
html[data-design="termos"] .lp-ouverture .lp-btn--ghost:not(#_){color:#08110B}

html[data-design="termos"] body{
  background:var(--bg) !important;
  background-image:radial-gradient(circle, color-mix(in srgb, var(--t3) 22%, transparent) 1px, transparent 1.4px) !important;
  background-size:26px 26px !important;
  font-family:'IBM Plex Mono','Space Mono',monospace;
}
/* Neutralise les décors des autres styles (wallpaper paper-cut de theme.css via
   body::before/::after, glasswall, rexdots) — TermOS = trame pointillée seule. */
html[data-design="termos"] body::before,
html[data-design="termos"] body::after,
html[data-design="termos"] .lp-glasswall,
html[data-design="termos"] .lp-rexdots{ display:none !important; }
html[data-design="termos"] .lp-btn:not(#_){border-radius:0 !important;
  font-family:'IBM Plex Mono',monospace !important;text-transform:uppercase;letter-spacing:.09em;font-size:12.5px}
html[data-design="termos"] .lp-btn--primary:not(#_){background:rgba(var(--acc-rgb),.16);color:var(--acc);
  border:1px solid rgba(var(--acc-rgb),.5);box-shadow:0 0 14px rgba(var(--acc-rgb),.22)}
html[data-design="termos"] .lp-btn--primary:not(#_):hover{background:rgba(var(--acc-rgb),.26)}
html[data-design="termos"] :is(.lp-mobile__form,.lp-plan,.lp-grid__card,.lp-faq details,.lp-modal__panel){
  border-radius:0 !important;background:var(--card) !important;border:1px solid var(--brd) !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
/* ⚠️ LA BARRE DU HAUT EST SORTIE DE CETTE LISTE — 2026-08-19. Elle y était
   quand la barre était une CAPSULE posée sur la page ; depuis l'ouverture
   pleine largeur, elle flotte au repos SUR le panneau sombre, et ses libellés
   y sont écrits en blanc. Le `background: var(--card)` la peignait quand même
   — blanc cassé en mode JOUR : des liens blancs sur un fond blanc. Relevé par
   Jérôme. La barre ne se densifie donc qu'une fois la page défilée, comme
   sous Renew, et c'est là seulement qu'elle prend la couleur de carte. */
html[data-design="termos"] .lp-nav{
  border-radius:0 !important;background:transparent !important;
  border:1px solid transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
html[data-design="termos"] .lp-header.lp-scrolled .lp-nav{
  background:var(--card) !important;border-color:var(--brd) !important}
html[data-design="termos"] :is(.lp-h2,.lp-hero__title){font-family:'IBM Plex Mono',monospace !important;letter-spacing:-.02em}
html[data-design="termos"] .lp-eyebrow{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
html[data-design="termos"] .lp-band{background:transparent !important;border-radius:0 !important}
html[data-design="termos"] img.lp-shot{border-radius:0 !important}

/* ══════════ BLOC APP MOBILE — VOYANT (les 3 thèmes) ══════════ */
.lp-mobile-hype{position:relative;margin-top:34px;padding:34px 36px;border-radius:22px;
  border:1.5px solid rgba(var(--acc-rgb),.55);background:var(--card);
  box-shadow:0 0 0 4px rgba(var(--acc-rgb),.07),0 18px 60px rgba(var(--acc-rgb),.14);overflow:hidden}
.lp-mobile-hype::before{content:'';position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(circle at 12% 0%,rgba(var(--acc-rgb),.16),transparent 45%)}
.lp-mobile-hype .lp-mobile{margin:0}
.lp-soonchip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:100px;
  background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.45);color:var(--acc);
  font-family:var(--f);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.lp-soonchip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc);
  animation:lpSoonPulse 1.8s ease-in-out infinite}
@keyframes lpSoonPulse{0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.55)}70%{box-shadow:0 0 0 8px rgba(var(--acc-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0)}}
html[data-design="glass"] .lp-mobile-hype{background:rgba(255,255,255,.05);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)}
html[data-design="termos"] .lp-mobile-hype{border-radius:0;border:1px solid rgba(var(--acc-rgb),.6);
  background:var(--card);box-shadow:0 0 22px rgba(var(--acc-rgb),.18)}
html[data-design="termos"] .lp-soonchip{border-radius:0}
html[data-design="termos"] .lp-applebadge__fallback{border-radius:0 !important}

/* ── Responsive ── */
@media(max-width:900px){
  .lp-feature{grid-template-columns:1fr;gap:28px}
  .lp-feature--rev .lp-feature__media{order:0}
  .lp-grid{grid-template-columns:repeat(2,1fr)}
  .lp-plans{grid-template-columns:repeat(2,1fr)}
  .lp-mobile{grid-template-columns:1fr;gap:28px}
  .lp-footer__cols{grid-template-columns:1fr 1fr}
}
/* Les liens du menu s'effacent AVANT de manquer de place. Mesuré au navigateur
   le 2026-08-19, largeur par largeur : à 760 px il reste 32 px entre le
   dernier lien et les boutons de droite ; à 740 px il n'en reste que 12, les
   liens passent sur deux lignes et viennent buter dans le bouton de thème.
   Le seuil était à 640 px : entre 640 et 740, la barre débordait.
   Pas de menu déroulant : il n'y en avait pas non plus sous 640 px, et la
   page se parcourt au défilement. */
@media(max-width:759px){
  .lp-nav__links{display:none}
}
@media(max-width:640px){
  .lp-section{padding-top:64px;padding-bottom:64px}
  .lp-grid{grid-template-columns:1fr}
  .lp-plans{grid-template-columns:1fr}
  .lp-footer__cols{grid-template-columns:1fr 1fr}
  .lp-hero{padding-top:40px;padding-bottom:52px}
  .lp-cta-row{flex-direction:column}
  .lp-cta-row .lp-btn{width:100%;justify-content:center}
  .lp-wait-row{flex-direction:column}
  .lp-wait-row .lp-btn{width:100%;justify-content:center}
  /* Topbar mobile aérée : capsule plus courte, boutons plus petits, plus de marge */
  .lp-header{padding:12px 18px 8px}
  .lp-hide-sm{display:none}
  .lp-nav{gap:6px;height:42px;padding:0 7px 0 14px;border-radius:13px}
  .lp-logo{font-size:18px}
  .lp-nav__right{gap:5px}
  .lp-iconbtn{width:30px;height:30px;min-height:30px;border-radius:9px}
  .lp-iconbtn .lp-ico{font-size:17px}
  .lp-nav .lp-btn{height:30px;min-height:30px;padding:0 11px;font-size:12px}
}

/* ════════ POLISH — détails visuels (focus accessible, reflet bouton, survols).
   Préfixe html[data-design] sur les survols à bord accent pour battre la
   spécificité des overrides Glass (sinon le bord accent ne s'affiche qu'en Rexora). ════════ */
/* Focus clavier visible : outline (n'écrase pas les ombres-anneaux des boutons) */
.lp-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.lp-iconbtn:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.lp-faq__q:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}

/* Reflet qui balaie le bouton primaire au survol (gated .lp-revele → off si reduced-motion) */
.lp-revele .lp-btn--primary{position:relative;overflow:hidden}
.lp-revele .lp-btn--primary::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%;pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.2,.7,.3,1)}
.lp-revele .lp-btn--primary:hover::after{left:135%}

/* Puces du hero : micro-survol (léger lift + bord accent) */
.lp-tag{transition:transform .16s ease,border-color .16s ease,background .16s ease}
html[data-design] .lp-tag:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--acc) 42%,var(--brd))}

/* FAQ : survol + état ouvert mis en valeur (bord accent discret + ombre douce) */
.lp-faq__item{transition:border-color .2s ease,box-shadow .2s ease}
html[data-design] .lp-faq__item:hover{border-color:color-mix(in srgb,var(--acc) 30%,var(--brd))}
html[data-design] .lp-faq__item.open{border-color:color-mix(in srgb,var(--acc) 42%,var(--brd));box-shadow:0 10px 30px -18px rgba(var(--acc-rgb),.4)}

/* Forfait populaire : bord accent garanti aussi en Glass */
html[data-design] .lp-plan--pop{border-color:color-mix(in srgb,var(--acc) 60%,var(--brd))}

/* ── Reveals au scroll (gate .lp-revele posée dans le <head> sauf si reduced-motion).
   Feel inspiré de maylee.app : fade + montée + léger flou qui se dissipe + micro-échelle,
   easing « expo » souple + cascade sur les groupes. 100% tokens Orbit, zéro couleur en dur. ── */
.lp-revele .lp-section-head,.lp-revele .lp-feature,.lp-revele .lp-shot--hero,.lp-revele .lp-card,
.lp-revele .lp-plan,.lp-revele .lp-faq__item,.lp-revele .lp-cta{
  opacity:0;transform:translateY(34px) scale(.985);filter:blur(6px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.16,1,.3,1),filter .7s ease}
.lp-revele .lp-section-head.in,.lp-revele .lp-feature.in,.lp-revele .lp-shot--hero.in,.lp-revele .lp-card.in,
.lp-revele .lp-plan.in,.lp-revele .lp-faq__item.in,.lp-revele .lp-cta.in{
  opacity:1;transform:none;filter:none}

/* Cascade : cartes « Et bien plus » + forfaits se révèlent en séquence (le .in arrive
   quasi simultanément sur une rangée ; le délai échelonne la révélation). */
.lp-revele .lp-grid .lp-card:nth-child(2),.lp-revele .lp-plans .lp-plan:nth-child(2){transition-delay:.09s}
.lp-revele .lp-grid .lp-card:nth-child(3),.lp-revele .lp-plans .lp-plan:nth-child(3){transition-delay:.18s}
.lp-revele .lp-grid .lp-card:nth-child(4),.lp-revele .lp-plans .lp-plan:nth-child(4){transition-delay:.27s}
.lp-revele .lp-grid .lp-card:nth-child(5){transition-delay:.36s}
.lp-revele .lp-grid .lp-card:nth-child(6){transition-delay:.45s}

/* Puces des features : cascade secondaire, déclenchée par le reveal du bloc parent
   (.lp-feature.in) — pas d'observer supplémentaire. */
.lp-revele .lp-feature .lp-checks li{opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.16,1,.3,1)}
.lp-revele .lp-feature.in .lp-checks li{opacity:1;transform:none}
.lp-revele .lp-feature.in .lp-checks li:nth-child(2){transition-delay:.12s}
.lp-revele .lp-feature.in .lp-checks li:nth-child(3){transition-delay:.24s}

/* Flottement doux du visuel hero, démarré APRÈS son reveal (delay > durée du reveal)
   pour un raccord sans à-coup. Coupé d'office hors .lp-revele (donc en reduced-motion). */
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.lp-revele .lp-shot--hero.in{animation:lpFloat 7s ease-in-out 1s infinite}

/* Header : la capsule se densifie légèrement quand on quitte le haut de page. */
.lp-header .lp-nav{transition:box-shadow .3s ease,border-color .3s ease,background .3s ease}
.lp-header.lp-scrolled .lp-nav{
  background:color-mix(in srgb,var(--card) 80%,transparent);
  border-color:var(--brd);
  box-shadow:0 14px 38px -16px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08)}

/* Entrée du hero AU CHARGEMENT (au-dessus de la ligne de flottaison, donc pas de
   scroll-reveal mais une entrée échelonnée façon maylee). 100% CSS via keyframes :
   l'entrée joue même si l'IntersectionObserver/JS externe ne tourne pas, car la
   classe .lp-revele est posée par le script inline du <head>. Les puces cascadent. */
@keyframes lpHeroIn{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
.lp-revele .lp-hero .lp-eyebrow,
.lp-revele .lp-hero__title,
.lp-revele .lp-hero__sub,
.lp-revele .lp-hero .lp-tag,
.lp-revele .lp-hero .lp-cta-row{
  opacity:0;animation:lpHeroIn .7s cubic-bezier(.16,1,.3,1) both}
.lp-revele .lp-hero .lp-eyebrow{animation-delay:.05s}
.lp-revele .lp-hero__title{animation-delay:.12s}
.lp-revele .lp-hero__sub{animation-delay:.22s}
.lp-revele .lp-hero .lp-tag:nth-child(1){animation-delay:.30s}
.lp-revele .lp-hero .lp-tag:nth-child(2){animation-delay:.36s}
.lp-revele .lp-hero .lp-tag:nth-child(3){animation-delay:.42s}
.lp-revele .lp-hero .lp-tag:nth-child(4){animation-delay:.48s}
.lp-revele .lp-hero .lp-cta-row{animation-delay:.54s}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  .lp-section-head,.lp-feature,.lp-shot--hero,.lp-card,.lp-plan,.lp-faq__item,.lp-cta,.lp-feature .lp-checks li,
  .lp-hero .lp-eyebrow,.lp-hero__title,.lp-hero__sub,.lp-hero .lp-tag,.lp-hero .lp-cta-row{
    opacity:1!important;transform:none!important;filter:none!important;animation:none!important}}
