/* ============================================================================
   ALKAE — Landing page publique.

   Feuille AUTONOME : cette page est rendue par renderLogin() et ne charge donc
   PAS app.css. Elle ne peut consommer aucun token du design system applicatif
   et définit les siens ci-dessous (cf. CLAUDE.md § feuilles autonomes).

   Tous les contrastes texte/fond sont calculés et consignes dans le rapport
   d'audit ; aucune paire sous 4.5:1 (texte) ou 3:1 (composant).
   ========================================================================= */

:root {
  /* ── Marque ──────────────────────────────────────────────────────────── */
  /* Deux rouges, deux rôles — et un seul porte du texte.
     --lp-coral      : accent DÉCORATIF (entaille, halos, fond sombre). Le
                       corail exact de la charte ALKAE. Ne porte jamais de texte
                       sur fond clair : le blanc n'y donne que 2.81:1.
     --lp-coral-ink  : tout ce qui doit être LU ou cliqué (bouton, lien,
                       surtitre, anneau de focus). Conforme sur les TROIS fonds
                       de la page, et pas seulement sur le blanc : 5.03:1 sur
                       blanc, 4.73:1 sur --lp-mist, 4.57:1 sur --lp-coral-wash.
                       C'est ce dernier qui fixe la valeur — un surtitre corail
                       posé sur un fond corail pâle est le cas le plus serré. */
  --lp-coral:        #FF6B52;
  --lp-coral-hover:  #E8513A;  /* survol du bouton — corail sombre de la charte  */
  --lp-coral-ink:    #DA1F00;
  --lp-coral-wash:   #FFF1EE;  /* fond doux                                      */
  --lp-navy:         #0B1220;  /* fond sombre + texte des boutons corail       */
  --lp-navy-2:       #1B2D4A;  /* second point des degrades navy               */
  --lp-teal:         #00BDA5;  /* accent de validation — SUR NAVY UNIQUEMENT   */
  --lp-teal-lt:      #5EEAD4;

  /* Bleu de LinkedIn — marque TIERCE, pas une couleur de la charte. Elle vit
     ici parce qu'elle est factuelle (c'est ce bleu-là qui dit « vous êtes sur
     LinkedIn » dans la démo du 2e bénéfice) et qu'aucun token du produit ne
     peut la remplacer. Ne s'utilise NULLE PART ailleurs. */
  --lp-li:           #0A66C2;
  --lp-li-dk:        #004182;

  /* ── Surfaces & texte ────────────────────────────────────────────────── */
  --lp-paper:        #FFFFFF;
  --lp-mist:         #F7F8FA;
  --lp-ink:          #111827;  /* 17.74:1 sur blanc */
  --lp-ink-2:        #374151;  /* 10.31:1 */
  --lp-ink-3:        #6B7280;  /*  4.83:1 */
  --lp-line:         #E5E7EB;  /* separateur decoratif */
  --lp-line-strong:  #8A93A3;  /* bordure de COMPOSANT — 3.10:1, exige par WCAG 2.2 */
  --lp-on-dark:      #FFFFFF;
  --lp-on-dark-2:    #CBD5E1;  /* 12.61:1 sur navy */

  /* ── Retours d'état ──────────────────────────────────────────────────── */
  /* Trois canaux DISTINCTS, exiges par l'ecran de connexion : un refus de SSO
     n'est ni un succes ni une erreur, c'est une reorientation vers le mot de
     passe. Les peindre pareil ferait mentir la couleur. Le corail de la marque
     ne peut pas servir a l'erreur : il est deja l'accent de TOUS les boutons,
     donc un message rouge y serait indistinguable d'une action a faire.
     Contrastes mesures, texte sur son propre fond : 7.11 / 6.75 / 5.90. */
  --lp-err-ink:  #A11B0C;
  --lp-err-bg:   #FEF1EE;
  --lp-ok-ink:   #04624F;
  --lp-ok-bg:    #E9F9F5;
  --lp-warn-ink: #8A5300;
  --lp-warn-bg:  #FFF6E6;

  /* ── Typographie ─────────────────────────────────────────────────────── */
  --lp-font-display: 'Manrope', 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --lp-font-body:    'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;

  --lp-fs-display: 34px;
  --lp-fs-h2:      26px;
  --lp-fs-h3:      20px;
  --lp-fs-h4:      17px;   /* titre court : question de FAQ, entete de carte  */
  --lp-fs-lead:    17px;
  --lp-fs-body:    16px;   /* plancher mobile : jamais en dessous */
  /* Texte long et dense (reponses de FAQ). Reste a 16px sur telephone — le
     plancher de lisibilite —, se resserre a 15.5px sur grand ecran, ou une
     colonne de 600px lue a 17px parait massive. */
  --lp-fs-dense:   16px;
  --lp-fs-sm:      15px;
  --lp-fs-label:   12px;
  --lp-fs-price:   40px;

  --lp-lh-display: 1.0;
  --lp-lh-h2:      1.15;
  --lp-lh-h3:      1.25;
  --lp-lh-lead:    1.55;
  --lp-lh-body:    1.65;

  /* ── Espacement (base 8) ─────────────────────────────────────────────── */
  --lp-sp-1:   8px;
  --lp-sp-2:  16px;
  --lp-sp-3:  24px;
  --lp-sp-4:  32px;
  --lp-sp-5:  40px;
  --lp-sp-6:  48px;
  --lp-sp-8:  64px;
  --lp-sp-10: 80px;
  --lp-sp-12: 96px;
  --lp-sp-16: 128px;

  --lp-gutter:    20px;  /* marge laterale de page */
  --lp-section-y: 64px;  /* rythme vertical d'une section */
  --lp-maxw:    1320px;

  /* ── Rayons (echelle maison) ─────────────────────────────────────────── */
  --lp-r-sm:   6px;
  --lp-r-md:  10px;
  --lp-r-xl:  16px;
  --lp-r-2xl: 18px;
  --lp-r-pill: 999px;

  /* ── Ombres : teintees navy, jamais noir pur ─────────────────────────── */
  --lp-sh-card: 0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --lp-sh-lift: 0 12px 32px rgba(11,18,32,.10);
  --lp-sh-hero: 0 24px 60px rgba(11,18,32,.16);
  /* Elevation d'une capture posee sur un fond de meme teinte : c'est elle qui
     fait la separation, il n'y a pas de contraste de surface pour l'aider. */
  --lp-sh-shot: 0 2px 4px rgba(11,18,32,.04), 0 18px 44px rgba(11,18,32,.13);
  /* Capture claire sur fond clair : l'ombre seule ne suffit pas a dessiner
     l'arete, il faut un filet. En `inset` et non en bordure — il suit le rayon
     sans ajouter d'epaisseur au cadre, donc sans redonner l'air « encadre ». */
  --lp-sh-window: 0 2px 8px rgba(11,18,32,.05), 0 18px 50px rgba(11,18,32,.13),
                  inset 0 0 0 1px rgba(11,18,32,.07);
  --lp-sh-cta:  0 2px 10px rgba(11,18,32,.10);

  /* ── Mouvement ───────────────────────────────────────────────────────── */
  --lp-dur-fast: .12s;
  --lp-dur-base: .20s;
  --lp-ease: cubic-bezier(.4, 0, .2, 1);

  /* ── Profondeur ──────────────────────────────────────────────────────── */
  --lp-z-base:   1;
  --lp-z-sticky: 20;
  --lp-z-nav:    30;
  --lp-z-drawer: 40;
  --lp-z-skip:   50;

  /* ── Element signature : l'entaille (angle du logo ALKAE) ────────────── */
  --lp-cleave-angle: 14deg;
  --lp-cleave-w:     16px;
  --lp-cleave-h:      5px;
}

@media (min-width: 768px) {
  :root {
    --lp-fs-display: 44px;
    --lp-fs-h2:      32px;
    --lp-fs-h3:      22px;
    --lp-fs-lead:    19px;
    --lp-fs-body:  16.5px;
    --lp-fs-price:   44px;
    --lp-gutter:     32px;
    --lp-section-y:  88px;
  }
}

@media (min-width: 1024px) {
  :root {
    --lp-fs-display: 56px;
    --lp-fs-h2:      40px;
    --lp-fs-h3:      24px;
    --lp-fs-h4:      18px;
    --lp-fs-lead:    20px;
    --lp-fs-body:    17px;
    --lp-fs-dense: 15.5px;
    --lp-fs-price:   48px;
    --lp-gutter:     48px;
    --lp-section-y: 112px;
  }
}

/* ============================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La nav collante ne doit pas recouvrir la cible d'une ancre. */
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: var(--lp-font-body);
  font-size: var(--lp-fs-body);
  line-height: var(--lp-lh-body);
  -webkit-font-smoothing: antialiased;
  /* `clip` et non `hidden` : `overflow-x: hidden` cree un conteneur de
     defilement qui neutralise le `position: sticky` de la nav. */
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--lp-font-display);
  color: var(--lp-ink);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--lp-fs-display); line-height: var(--lp-lh-display); font-weight: 800; letter-spacing: -.035em; }
h2 { font-size: var(--lp-fs-h2);      line-height: var(--lp-lh-h2);      font-weight: 800; letter-spacing: -.015em; }
h3 { font-size: var(--lp-fs-h3);      line-height: var(--lp-lh-h3);      font-weight: 700; letter-spacing: -.01em; }

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

a {
  color: var(--lp-coral-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Lien d'authentification soustrait au crawl (src/ObfuscatedLink.php) : sans
   href, une ancre perd son curseur — le geste doit rester celui d'un lien.
   Le focus visible, lui, est déjà couvert par la règle [tabindex] ci-dessous. */
[data-oln] { cursor: pointer; }

/* ── Accessibilite : focus visible partout, sans exception ─────────────── */
:where(a, button, summary, input, [tabindex]):focus-visible {
  outline: 3px solid var(--lp-coral-ink);
  outline-offset: 2px;
  border-radius: var(--lp-r-sm);
}

.lp-dark :where(a, button, summary, input, [tabindex]):focus-visible {
  outline-color: var(--lp-on-dark);
}

.lp-skip {
  position: absolute;
  left: var(--lp-sp-2);
  top: calc(var(--lp-sp-2) * -6);
  z-index: var(--lp-z-skip);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--lp-sp-1) var(--lp-sp-2);
  background: var(--lp-navy);
  color: var(--lp-on-dark);
  border-radius: var(--lp-r-md);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  transition: top var(--lp-dur-base) var(--lp-ease);
}
.lp-skip:focus { top: var(--lp-sp-2); }

.lp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================================
   LAYOUT
   ========================================================================= */

.lp-wrap {
  width: 100%;
  max-width: var(--lp-maxw);
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-section { padding-block: var(--lp-section-y); }

.lp-section--mist  { background: var(--lp-mist); }
.lp-section--paper { background: var(--lp-paper); }

.lp-dark {
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(255,107,82,.18) 0%, rgba(255,107,82,0) 55%),
    radial-gradient(70% 110% at 100% 10%, rgba(94,234,212,.10) 0%, rgba(94,234,212,0) 60%),
    linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-2) 100%);
  color: var(--lp-on-dark-2);
}
.lp-dark h1, .lp-dark h2, .lp-dark h3 { color: var(--lp-on-dark); }

/* En-tete de section : eyebrow + titre + chapo. */
.lp-head { max-width: 46rem; }
.lp-head--center { margin-inline: auto; text-align: center; }
.lp-head > * + * { margin-top: var(--lp-sp-2); }

.lp-lead {
  font-size: var(--lp-fs-lead);
  line-height: var(--lp-lh-lead);
  color: var(--lp-ink-2);
  /* Sans cela, la derniere ligne se retrouve reguliement avec deux mots
     orphelins, et le bloc parait mal compose alors que le texte est bon. */
  text-wrap: balance;
}
.lp-dark .lp-lead { color: var(--lp-on-dark-2); }

/* ============================================================================
   ELEMENT SIGNATURE — « l'entaille »

   La barre d'accent du logo ALKAE (rectangle incline a +14 deg), reprise comme
   SEUL geste graphique de la page : eyebrow, puce de liste, separateur
   d'etape, soulignement du mot pivot du H1. Aucune image, aucun SVG repete.
   ========================================================================= */

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-1);
  font-family: var(--lp-font-body);
  font-size: var(--lp-fs-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-coral-ink);
}
.lp-eyebrow::before {
  content: "";
  width: var(--lp-cleave-w);
  height: var(--lp-cleave-h);
  background: var(--lp-coral);
  border-radius: 1px;
  transform: rotate(calc(var(--lp-cleave-angle) * -1));
}
.lp-dark .lp-eyebrow { color: var(--lp-teal-lt); }
.lp-dark .lp-eyebrow::before { background: var(--lp-teal-lt); }

/* Soulignement biseaute du mot pivot du H1. */
.lp-cleave-word {
  position: relative;
  white-space: nowrap;
}
.lp-cleave-word::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -.06em;
  height: .06em;
  min-height: 3px;
  background: var(--lp-coral);
  border-radius: 2px;
  transform: skewX(calc(var(--lp-cleave-angle) * -1));
}

/* Puce de liste. */
.lp-ticks > li {
  position: relative;
  padding-left: var(--lp-sp-3);
  margin-top: var(--lp-sp-1);
}
.lp-ticks > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: var(--lp-cleave-w);
  height: var(--lp-cleave-h);
  background: var(--lp-coral);
  border-radius: 1px;
  transform: rotate(calc(var(--lp-cleave-angle) * -1));
}

/* ============================================================================
   BOUTONS

   Le primaire porte du texte blanc, donc sa surface ne peut pas etre le corail
   de marque : le blanc n'y donne que 2.81:1, sous le seuil AA de 4.5:1. Il
   utilise --lp-coral-ink (4.62:1), pendant que --lp-coral garde tous les
   usages decoratifs.
   ========================================================================= */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lp-sp-1);
  /* 44px de haut : cible tactile minimale. */
  min-height: 44px;
  padding: 0 var(--lp-sp-3);
  border: 1px solid transparent;
  border-radius: var(--lp-r-md);
  font-family: var(--lp-font-body);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lp-dur-fast) var(--lp-ease),
              border-color var(--lp-dur-fast) var(--lp-ease),
              color var(--lp-dur-fast) var(--lp-ease),
              transform var(--lp-dur-fast) var(--lp-ease),
              box-shadow var(--lp-dur-fast) var(--lp-ease);
}

/* ⚠️ Corail de charte + libellé blanc : 2.81:1, SOUS le seuil WCAG AA de
   4.5:1. Écart assumé par le propriétaire du produit pour rester identique
   aux boutons de l'application (cf. la capture du hero). Contreparties
   posées ici : graisse 700 et taille relevée sur les CTA principaux, qui
   n'améliorent pas le ratio mais aident la perception. */
.lp-btn--primary {
  background: var(--lp-coral);
  color: var(--lp-paper);
  box-shadow: var(--lp-sh-cta);
  font-weight: 700;
}
.lp-btn--primary:hover {
  background: var(--lp-coral-hover);
  color: var(--lp-paper);
  transform: translateY(-1px);
}

.lp-btn--secondary {
  background: var(--lp-paper);
  color: var(--lp-ink);
  border-color: var(--lp-line-strong);
}
.lp-btn--secondary:hover {
  background: var(--lp-mist);
  border-color: var(--lp-ink-3);
}

/* Sur fond sombre, un bouton clair : .lp-btn--secondary y serait illisible. */
.lp-btn--on-dark {
  background: transparent;
  color: var(--lp-on-dark);
  border-color: rgba(255,255,255,.45);
}
.lp-btn--on-dark:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--lp-on-dark);
}

.lp-btn--lg { min-height: 52px; padding: 0 var(--lp-sp-4); font-size: var(--lp-fs-body); }
.lp-btn--block { width: 100%; }

/* ============================================================================
   CARTES
   ========================================================================= */

.lp-card {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-2xl);
  padding: var(--lp-sp-3);
  box-shadow: var(--lp-sh-card);
}

@media (min-width: 768px) {
  .lp-card { padding: var(--lp-sp-4); }
}

.lp-card--dark {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
  box-shadow: none;
}

.lp-card__title { margin-bottom: var(--lp-sp-1); }
.lp-card__body  { color: var(--lp-ink-2); }
.lp-dark .lp-card__body { color: var(--lp-on-dark-2); }

/* Grilles reutilisables. */
.lp-grid { display: grid; gap: var(--lp-sp-3); }

@media (min-width: 768px) {
  .lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   NAV COLLANTE
   ========================================================================= */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: var(--lp-z-nav);
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--lp-line);
}

/* Sur telephone, les liens sont masques (`display:none`) : il ne reste que le
   logo et les actions, que `space-between` place correctement. La grille a
   trois colonnes n'arrive qu'au palier ou les trois blocs existent — posee ici,
   elle ferait glisser les actions dans la colonne du MILIEU. */
.lp-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-sp-2);
  min-height: 64px;
}

.lp-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-1);
  min-height: 44px;   /* cible tactile */
  color: var(--lp-ink);
  text-decoration: none;
  font-family: var(--lp-font-display);
  flex-shrink: 0;
}

/* La tuile est dans le SVG lui-meme (degrade + coins arrondis) : rien a
   habiller autour. */
.lp-logo { display: block; flex-shrink: 0; }

.lp-nav__word {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-3);
}
.lp-nav__links a {
  color: var(--lp-ink-2);
  text-decoration: none;
  font-size: var(--lp-fs-sm);
  /* 600 et non 500 : une graisse de moins a telecharger (~48 Ko). */
  font-weight: 600;
  /* Cible tactile : la zone cliquable fait 44px dans les DEUX sens, même
     quand le libellé est court (« Tarifs » ne mesure que 42px de large). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.lp-nav__links a:hover {
  color: var(--lp-coral-ink);
  text-decoration: underline;
}

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-1);
  flex-shrink: 0;
}
.lp-nav__actions .lp-btn {
  padding: 0 var(--lp-sp-2);
  /* Pas de halo dans la barre : l'ombre corail est réservée aux CTA de section,
     où elle attire l'oeil sans saturer le haut de page. */
  box-shadow: none;
}

/* Sous 480px, la barre doit loger marque + CTA + burger. Le wordmark passe en
   lecture d'écran seule (la tuile porte déjà l'identité, le lien garde son
   aria-label) et le CTA se resserre — son LIBELLÉ, lui, ne change jamais. */
@media (max-width: 479px) {
  .lp-nav__word {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .lp-nav__actions .lp-btn {
    font-size: var(--lp-fs-label);
    padding: 0 var(--lp-sp-1);
  }
  .lp-nav__inner { gap: var(--lp-sp-1); }
}

.lp-burger {
  display: grid;
  place-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--lp-line-strong);
  border-radius: var(--lp-r-md);
  cursor: pointer;
}
.lp-burger__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--lp-ink);
  border-radius: 2px;
}

/* ── Mobile : le menu devient un panneau déroulant ─────────────────────── */
@media (max-width: 899px) {
  .lp-nav__links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--lp-sp-1) var(--lp-gutter) var(--lp-sp-2);
    background: var(--lp-paper);
    border-bottom: 1px solid var(--lp-line);
    box-shadow: var(--lp-sh-card);
  }
  .lp-nav__links a {
    padding-block: var(--lp-sp-1);
    border-bottom: 1px solid var(--lp-line);
    font-size: var(--lp-fs-body);
  }
  .lp-nav__links a:last-child { border-bottom: 0; }

  /* `[hidden]` ne pose qu'un display:none à spécificité NULLE : sans cette
     règle, le display:flex ci-dessus le bat et le menu resterait ouvert
     (piège documenté dans CLAUDE.md § Pièges connus). */
  .lp-nav__links[hidden] { display: none; }
}

@media (min-width: 900px) {
  /* Colonnes laterales EGALES (`1fr`), donc le bloc du milieu tombe sur le
     centre de la PAGE quelles que soient les largeurs du logo et du bouton. En
     `space-between`, le milieu se centrait entre ses voisins : le bouton faisant
     252 px contre 110 pour le logo, les liens partaient 71 px trop a gauche —
     mesure, et visible a l'oeil. Un libelle de bouton plus long aggraverait
     l'ecart sans que rien ne le signale.
     Les actions se collent a droite de LEUR colonne, sinon elles flottent au
     milieu de l'espace restant et le desequilibre revient par l'autre bout. */
  .lp-nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .lp-nav__actions { justify-self: end; }
  .lp-nav__inner { min-height: 72px; }
  .lp-burger { display: none; }
  /* Sur grand écran le menu est toujours visible, même si le JS l'avait fermé. */
  .lp-nav__links[hidden] { display: flex; }
}

/* ============================================================================
   HERO
   ========================================================================= */

.lp-hero {
  padding-top: var(--lp-sp-6);
  padding-bottom: var(--lp-sp-8);
  background: linear-gradient(180deg, var(--lp-paper) 0%, var(--lp-mist) 100%);
  text-align: center;
}

.lp-hero__text {
  max-width: 46rem;
  margin-inline: auto;
}
.lp-hero__text > * + * { margin-top: var(--lp-sp-2); }

.lp-hero h1 { margin-top: var(--lp-sp-2); max-width: 22ch; margin-inline: auto; }

.lp-hero .lp-lead { margin-inline: auto; max-width: 46rem; }

/* Une phrase par ligne. Par defaut la phrase reste dans le fil du texte : sous
   1024px la premiere phrase du titre demande 713px pour 704 disponibles, la
   forcer en bloc la renverrait a trois lignes. Le chapo, lui, tient partout
   (566px pour 704) et garde ses blocs a toutes les largeurs — sur telephone
   chaque phrase occupe deux lignes au lieu d'une, mais aucune ne commence au
   milieu d'une autre. `text-wrap: balance` reste actif et equilibre alors les
   lignes DANS chaque phrase, ce qui est exactement son role. */
.lp-sentence { display: inline; }
.lp-hero .lp-lead .lp-sentence { display: block; }

/* A partir de 1024px les deux phrases du titre tiennent chacune sur sa ligne
   (908px et 673px). Le bloc de texte s'elargit pour les accueillir — cale a
   46rem il forcait trois lignes coupees en plein milieu, alors qu'il restait
   1320px disponibles. Le chapo garde sa propre largeur de lecture. */
@media (min-width: 1024px) {
  .lp-hero__text { max-width: 58rem; }
  .lp-hero h1 { max-width: 100%; }
  .lp-hero h1 .lp-sentence { display: block; }

  /* Le titre de clôture suit le même traitement, et la MÊME largeur : les deux
     titres pleine page se répondent d'un bout à l'autre du parcours. Sans
     l'élargissement, sa première phrase demanderait 732 px pour 736 — elle
     passerait, mais à quatre pixels près. */
  .lp-final .lp-head { max-width: 58rem; }
  .lp-final h2 .lp-sentence { display: block; }
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-4);
}

.lp-hero__reassure {
  font-size: var(--lp-fs-sm);
  color: var(--lp-ink-3);
}

.lp-hero__visual {
  margin-top: var(--lp-sp-6);
  border-radius: var(--lp-r-2xl);
  overflow: hidden;
  border: 1px solid var(--lp-line);
  box-shadow: var(--lp-sh-hero);
  background: var(--lp-paper);
}
.lp-hero__visual img { width: 100%; display: block; }

/* Une FENÊTRE sur l'application, pas une image de l'application.
   Servie en entier, la capture occupait 723 px — 80 % de la hauteur d'écran —
   dont la moitié sous la ligne de flottaison, et se refermait sur une arête
   nette au milieu du vide : un rectangle bordé posé sur la page. Cadrée puis
   fondue dans le fond, elle n'a plus de bord inférieur, donc plus rien ne dit
   qu'on a collé quelque chose ici — et l'œil comprend qu'il y a une suite.
   Le rapport est fixé plutôt qu'une hauteur : il tient à toutes les largeurs.
   Bordure et ombre tombent avec le bord : une fenêtre ne se pose pas sur ce
   qu'elle ouvre. Le téléphone garde la capture entière — elle y est déjà
   recadrée pour être lisible, la rogner une seconde fois n'y montrerait rien. */
@media (min-width: 768px) {
  .lp-hero__visual {
    aspect-ratio: 1224 / 440;
    border: none;
    box-shadow: var(--lp-sh-window);
    background: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* Pas de fondu, et c'est le point : un dégradé alpha ne se voit pas sur du
       contenu clair, mais la barre latérale est un aplat sombre — en s'effaçant
       sur un fond clair elle traversait 141 px de gris et laissait une traînée.
       Aucune courbe n'y change rien, c'est le contraste qui est en cause. La
       capture s'arrête donc au bord de la section, tranchée par le bandeau
       sombre qui suit : une arête franche se lit comme une décision, un dégradé
       sale se lit comme un défaut.
       Le flottement perpétuel a disparu avec : quatre pixels de va-et-vient
       décolleraient la capture de ce bord et laisseraient voir le fond par en
       dessous. Il n'entrait de toute façon pas dans le mouvement admis par le
       cahier des charges — révélations à l'apparition et micro-interactions au
       survol, rien de perpétuel. */
  }
}

@media (min-width: 768px) {
  .lp-hero {
    padding-top: var(--lp-sp-8);
    /* Zéro : la capture va jusqu'au bord et c'est le bandeau suivant qui la
       tranche. Le moindre reste de padding laisserait une bande de fond entre
       les deux, et l'arête cesserait de se lire comme voulue. */
    padding-bottom: 0;
  }
  .lp-hero__visual { margin-top: var(--lp-sp-8); }
}

/* ============================================================================
   BANDEAU DE PREUVE
   ========================================================================= */

.lp-proof {
  background: var(--lp-navy);
  color: var(--lp-on-dark-2);
  padding-block: var(--lp-sp-3);
}

.lp-proof__list {
  display: grid;
  gap: var(--lp-sp-2);
}

.lp-proof__item {
  display: flex;
  align-items: flex-start;
  gap: var(--lp-sp-2);
}

.lp-proof__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--lp-r-md);
  background: rgba(94,234,212,.12);
  color: var(--lp-teal-lt);
}

.lp-proof__txt { display: flex; flex-direction: column; }
.lp-proof__txt b {
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: var(--lp-fs-sm);
  color: var(--lp-on-dark);
}
.lp-proof__txt span { font-size: var(--lp-fs-sm); }

@media (min-width: 768px) {
  .lp-proof { padding-block: var(--lp-sp-4); }
  .lp-proof__list { grid-template-columns: repeat(3, 1fr); gap: var(--lp-sp-4); }
}

/* ============================================================================
   CARTES — pastille d'icone
   ========================================================================= */

.lp-card__ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--lp-sp-2);
  border-radius: var(--lp-r-md);
  background: var(--lp-coral-wash);
  color: var(--lp-coral-ink);
}
.lp-card--dark .lp-card__ico {
  background: rgba(255,255,255,.08);
  color: var(--lp-teal-lt);
}

.lp-mt-6 { margin-top: var(--lp-sp-6); }

/* ============================================================================
   ETAPES
   ========================================================================= */

/* ── Constat : traitement editorial, deux colonnes ─────────────────────── */

.lp-problem { display: grid; gap: var(--lp-sp-5); }

/* Le titre porte un constat puis son renversement : la seconde phrase commence
   sur sa ligne a TOUTES les largeurs, sinon elle demarre au milieu de la
   premiere et la chute passe inapercue. Meme traitement que le hero et le
   titre de cloture, a ceci pres que la colonne (21rem) ne laisse jamais une
   phrase tenir sur une ligne — `text-wrap: balance` equilibre alors les lignes
   DANS chaque phrase, ce qui est exactement son role. */
.lp-problem__head h2 .lp-sentence { display: block; }

.lp-cases > .lp-case + .lp-case {
  margin-top: var(--lp-sp-4);
  padding-top: var(--lp-sp-4);
  border-top: 1px solid var(--lp-line);
}

/* L'entaille sert ici de puce : meme geste que les surtitres. */
.lp-case__t {
  position: relative;
  padding-left: var(--lp-sp-3);
  font-size: var(--lp-fs-h4);
  line-height: 1.35;
  margin-bottom: var(--lp-sp-1);
}
.lp-case__t::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: var(--lp-cleave-w);
  height: var(--lp-cleave-h);
  background: var(--lp-coral);
  border-radius: 1px;
  transform: rotate(calc(var(--lp-cleave-angle) * -1));
}

.lp-case__b { color: var(--lp-ink-2); padding-left: var(--lp-sp-3); }

@media (min-width: 900px) {
  .lp-problem {
    /* 23rem et non 21 : a 21rem la chute du titre demande 342px pour 336
       disponibles et se brise en TROIS fragments de deux mots — six pixels qui
       transforment une phrase en pile. La colonne de droite ne perd que 32px,
       qu'aucun des trois corps ne remarque. */
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: var(--lp-sp-10);
    align-items: start;
  }
  /* Le titre accompagne la lecture des trois situations. */
  .lp-problem__head { position: sticky; top: calc(72px + var(--lp-sp-4)); }
}

/* ── Etapes : frise reliee ─────────────────────────────────────────────── */

.lp-steps {
  display: grid;
  gap: var(--lp-sp-4);
  margin-top: var(--lp-sp-6);
  counter-reset: none;
}

.lp-step { display: flex; gap: var(--lp-sp-2); align-items: flex-start; position: relative; }

/* Fil de progression d'une etape a la suivante : il materialise le parcours,
   la ou un marqueur pose sous chaque numero flottait sans rien relier. */
.lp-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50px;
  width: 2px;
  height: calc(100% - 50px + var(--lp-sp-4));
  background: linear-gradient(180deg, var(--lp-coral), transparent);
}

/* Le numero est TYPOGRAPHIQUE, pas une pastille : un carre noir de 44px pese
   autant qu'un titre et durcit toute la section pour ne porter qu'un chiffre.
   Degrade du corail encre vers le corail vif — la partie haute, la plus lue,
   est la plus contrastee. */
.lp-step__n {
  display: block;
  flex: 0 0 auto;
  width: 44px;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.03em;
  background: linear-gradient(160deg, var(--lp-coral-ink), var(--lp-coral));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  position: relative;
}

.lp-step__title { margin-bottom: var(--lp-sp-1); }
.lp-step__body { color: var(--lp-ink-2); }

/* Terminus du parcours — PAS une quatrieme etape.
   La pastille est la seule forme PLEINE de la section : les rangs sont des
   chiffres typographiques, elle est un disque. C'est ce contraste de NATURE qui
   dit qu'elle n'est pas un rang de plus — un « 4 », ou meme un « +1 », se
   lirait comme la suite de la numerotation. */
.lp-end { display: flex; gap: var(--lp-sp-2); align-items: flex-start; }
.lp-end__dot {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px; height: 40px;
  /* En pile (telephone), l'AXE compte : le fil vertical et le centre optique
     des chiffres tombent a 11px du bord de l'etape, alors qu'un disque de 40px
     pose au meme bord a son centre a 20px. Sans ce retrait, la pastille se
     decale de 11px a droite de la colonne des numeros — un desalignement de
     colonne, bien plus visible qu'un ecart horizontal. Mesure, pas estime.
     Le retrait laisse encore 11px de marge au bord du telephone. */
  margin-left: -9px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-coral);
  color: var(--lp-paper);
}
.lp-end__t {
  margin: 0 0 2px;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: var(--lp-fs-h4);
  letter-spacing: -.015em;
}
.lp-end__s { margin: 0; font-size: var(--lp-fs-sm); color: var(--lp-ink-3); line-height: 1.45; }

@media (min-width: 768px) {
  /* Une 4e colonne ETROITE : le terminus n'a que deux mots a porter, et lui
     donner un quart de la largeur le ferait passer pour une etape. */
  .lp-steps { grid-template-columns: repeat(3, 1fr) 132px; gap: var(--lp-sp-6); }
  /* En colonnes, la pastille reprend le bord de sa colonne : il n'y a plus de
     fil vertical ni d'axe partage a respecter. */
  .lp-end { flex-direction: column; gap: var(--lp-sp-1); }
  .lp-end__dot { margin-left: 0; }
  .lp-step { flex-direction: column; gap: var(--lp-sp-1); }
  /* En colonnes, le fil devient horizontal et rejoint le numero suivant. */
  .lp-step:not(:last-child)::before {
    left: calc(34px + var(--lp-sp-2));
    top: 20px;
    width: calc(100% - 34px - var(--lp-sp-2) + var(--lp-sp-6));
    height: 2px;
    background: linear-gradient(90deg, var(--lp-coral), transparent);
  }
}

/* ============================================================================
   BENEFICES — blocs alternes
   ========================================================================= */

/* Nom de la fonctionnalite — il ouvre le bloc.
   GRIS et non corail, deliberement : le surtitre de SECTION est corail et porte
   l'entaille signature. Trois libelles corail de plus dans la meme section lui
   feraient concurrence et diluraient le seul repere de niveau superieur.
   Gris pour le bloc, corail pour la section : la hierarchie reste lisible. */
.lp-benefit__name {
  margin: 0 0 var(--lp-sp-2);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}

.lp-benefit {
  display: grid;
  gap: var(--lp-sp-4);
  align-items: center;
  margin-top: var(--lp-sp-10);
}

/* La situation vecue, avant l'annonce de ce qui change. Traitee comme une
   voix off : filet corail, texte en retrait, jamais la taille d'un chapo —
   elle prepare le titre, elle ne lui dispute pas la place. */
.lp-benefit__pain {
  margin-bottom: var(--lp-sp-3);
  padding-left: var(--lp-sp-3);
  border-left: 2px solid var(--lp-coral);
  color: var(--lp-ink-3);
  font-size: var(--lp-fs-sm);
  line-height: 1.6;
}

.lp-benefit__tag {
  display: block;
  margin-bottom: 2px;
  color: var(--lp-coral-ink);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-benefit__txt h3 { margin-bottom: var(--lp-sp-2); }


.lp-benefit__txt .lp-ticks {
  margin-top: var(--lp-sp-3);
  color: var(--lp-ink-2);
}
.lp-benefit__txt .lp-ticks > li { font-size: var(--lp-fs-dense); line-height: 1.55; }

.lp-benefit__img {
  position: relative;
  transform: translateX(24px);
  opacity: 0;
  transition: transform .55s var(--lp-ease) .1s, opacity .55s var(--lp-ease) .1s;
  border-radius: var(--lp-r-2xl);
  /* Sans `overflow`, ce rayon ne decoupe RIEN : l'image est dans un <picture>,
     et le `border-radius: inherit` qu'elle portait se resolvait contre lui —
     donc a zero — et non contre ce cadre. L'arrondi visible venait en realite
     du rayon cuit dans la maquette, ce qui explique qu'il ait disparu le jour
     ou on l'en a retire. Meme motif que `.lp-hero__visual`, qui lui clippait
     depuis toujours. */
  overflow: hidden;
  /* Pas de filet : le visuel est une capture, pas un encadre. Le 1px le
     plaquait sur le fond au lieu de le poser dessus, et l'ombre de carte ne
     pouvait rien y faire — le fond de la section et celui du visuel sont
     exactement le meme gris, donc l'ombre est seule a separer les deux
     surfaces.
     D'ou une elevation franche, en deux temps : un contact court au ras du
     bord, une diffusion large en dessous. */
  box-shadow: var(--lp-sh-shot);
  background: var(--lp-paper);
}
/* `display: block` et pas seulement `width` : une image en ligne repose sur la
   ligne de base, ce qui laisse quelques pixels du fond blanc du cadre sous
   elle — un liseré clair au bas d'un visuel qui, lui, finit en gris. */
.lp-benefit__img img { width: 100%; display: block; }

/* Ligne d'action de milieu de page. Volontairement PAS une carte ni une bande
   colorée : elle referme l'argumentaire des bénéfices, elle ne s'en détache
   pas. Sur téléphone la phrase passe au-dessus du bouton plutôt qu'à côté —
   côte à côte, il ne resterait que deux mots par ligne. */
.lp-midcta {
  margin-top: var(--lp-sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lp-sp-2) var(--lp-sp-3);
  text-align: center;
}
.lp-midcta > span {
  font-size: var(--lp-fs-lead);
  color: var(--lp-ink-2);
}
@media (max-width: 599px) {
  .lp-midcta { flex-direction: column; gap: var(--lp-sp-3); }
}


.lp-benefit.is-in .lp-benefit__img { transform: none; opacity: 1; }
/* Un bloc sur deux a son visuel a gauche : il doit glisser dans l'autre sens. */
.lp-benefit:nth-of-type(even) .lp-benefit__img { transform: translateX(-24px); }

/* Sans le module ES, `is-in` n'arrive jamais : les trois visuels resteraient
   invisibles. Une animation d'entree ne doit jamais conditionner l'affichage
   d'un contenu — meme regle que pour les reveals. */
.no-js .lp-benefit__img { opacity: 1; transform: none; }

/* Sur telephone le visuel occupe toute la largeur : le faire glisser
   lateralement le fait deborder du cadre PENDANT la transition. Le
   debordement est coupe par `overflow-x: clip`, donc invisible et sans barre
   de defilement — mais l'image entre en etant rognee. Sous 768px, seule
   l'opacite joue. */
@media (max-width: 767px) {
  .lp-benefit__img,
  .lp-benefit:nth-of-type(even) .lp-benefit__img { transform: none; }
}

@media (min-width: 900px) {
  .lp-benefit {
    grid-template-columns: 1fr 1fr;
    gap: var(--lp-sp-8);
    margin-top: var(--lp-sp-10);
  }
  /* Alternance : un bloc sur deux place le visuel a gauche. L'ordre du DOM ne
     change pas — le texte reste lu avant son illustration. */
  .lp-benefit:nth-of-type(even) .lp-benefit__txt { order: 2; }
}

/* Les trois temps du parcours, avant le dernier bouton. Le separateur est la
   barre d'accent du logo, deja utilisee en puce et en surtitre. */
.lp-final__steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-3);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lp-on-dark);
}
.lp-final__steps > span {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-2);
}
.lp-final__steps > span + span::before {
  content: "";
  width: var(--lp-cleave-w);
  height: var(--lp-cleave-h);
  background: var(--lp-coral);
  border-radius: 1px;
  transform: rotate(calc(var(--lp-cleave-angle) * -1));
  flex: 0 0 auto;
}

.lp-final .lp-lead { max-width: 30rem; margin-inline: auto; }

/* Sur telephone la ligne se replie : les separateurs restaient accroches au
   DEBUT des etapes 2 et 3, qui se retrouvaient decalees par rapport a la
   premiere. Empilees, chaque etape porte donc sa propre barre, et le bloc
   entier est centre tout en gardant ses libelles alignes a gauche. */
@media (max-width: 639px) {
  .lp-final__steps {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lp-sp-1);
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .lp-final__steps > span::before {
    content: "";
    width: var(--lp-cleave-w);
    height: var(--lp-cleave-h);
    background: var(--lp-coral);
    border-radius: 1px;
    transform: rotate(calc(var(--lp-cleave-angle) * -1));
    flex: 0 0 auto;
  }
}

/* ============================================================================
   TEMOIGNAGES
   ========================================================================= */

.lp-quotes {
  display: grid;
  gap: 18px;
  margin-top: var(--lp-sp-6);
}

.lp-quote {
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
  box-shadow: 0 1px 2px rgba(11,18,32,.05);
}
/* Marges resserrées : la carte portait 32 px de marge interne et une pastille
   de 44 px pour une phrase et demie de citation — plus de mobilier que de
   parole. La proportion suit maintenant le contenu. */
.lp-quote__fig { margin: 0; padding: 20px; }

.lp-quote__rating {
  display: flex;
  gap: 2px;
  color: var(--lp-coral-ink);
  margin-bottom: 12px;
}
.lp-quote__rating svg { width: 14px; height: 14px; }
/* Étoiles PLEINES. `Icons::svg()` dessine tout en trait sans remplissage, ce
   qui convient à une icône d'interface mais pas à une note : une étoile en
   contour se lit comme une étoile NON obtenue, donc cinq d'entre elles
   annoncent zéro sur cinq — l'inverse exact de ce que l'avis dit. */
.lp-quote__rating svg { fill: currentColor; }

.lp-quote__text {
  margin: 0 0 var(--lp-sp-2);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--lp-ink);
}
.lp-quote__text::before { content: "« "; }
.lp-quote__text::after  { content: " »"; }

.lp-quote__who {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-2);
  padding-top: var(--lp-sp-2);
  border-top: 1px solid var(--lp-line);
}
.lp-quote__who b { display: block; font-family: var(--lp-font-display); font-weight: 700; font-size: var(--lp-fs-sm); }

.lp-quote__photo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--lp-coral-wash);
}
.lp-quote__photo--txt {
  display: grid;
  place-items: center;
  color: var(--lp-coral-ink);
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 12px;
}

.lp-quote__role { font-size: var(--lp-fs-sm); color: var(--lp-ink-3); }

@media (min-width: 900px) {
  .lp-quotes { grid-template-columns: repeat(3, 1fr); }
  .lp-quote__fig { padding: 22px; }
}

/* ============================================================================
   TARIFS
   ========================================================================= */

.lp-price-switch {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: var(--lp-sp-6) auto 0;
  padding: 4px;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-pill);
}
.lp-price-switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--lp-sp-1);
  min-height: 44px;
  padding: 0 var(--lp-sp-3);
  border: 0;
  border-radius: var(--lp-r-pill);
  background: transparent;
  color: var(--lp-ink-2);
  font-family: var(--lp-font-body);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.lp-price-switch button.is-on {
  background: var(--lp-navy);
  color: var(--lp-on-dark);
}
.lp-price-switch__save {
  font-size: var(--lp-fs-label);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-coral-wash);
  color: var(--lp-coral-ink);
  white-space: nowrap;
}

/* A 320px — la largeur de reference du critere « zoom 200 % » — le groupe
   depassait de 8px et faisait defiler toute la page en travers. */
@media (max-width: 400px) {
  .lp-price-switch { max-width: 100%; }
  .lp-price-switch button { padding: 0 var(--lp-sp-2); gap: 6px; }
  .lp-price-switch__save { padding: 2px 6px; }
}
.lp-price-switch button.is-on .lp-price-switch__save {
  background: rgba(255,255,255,.16);
  color: var(--lp-on-dark);
}

.lp-plans {
  display: grid;
  gap: var(--lp-sp-3);
  margin-top: var(--lp-sp-5);
  align-items: start;
}

/* Le couple mensuel/annuel : une seule des deux ecritures est montree. */
.lp-plans[data-period="monthly"] .lp-per-a,
.lp-plans[data-period="annual"]  .lp-per-m { display: none; }

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--lp-sp-3);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-2xl);
  box-shadow: var(--lp-sh-card);
}

.lp-plan--featured {
  border-color: var(--lp-coral-ink);
  box-shadow: var(--lp-sh-lift);
}

.lp-plan__flag {
  position: absolute;
  top: 0;
  left: var(--lp-sp-3);
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: var(--lp-r-pill);
  /* Même couple que le bouton primaire. */
  background: var(--lp-coral);
  color: var(--lp-paper);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  letter-spacing: .04em;
}

.lp-plan__name  { font-size: var(--lp-fs-h3); }
.lp-plan__pitch { margin-top: 2px; color: var(--lp-ink-3); font-size: var(--lp-fs-sm); }

.lp-plan__price {
  margin-top: var(--lp-sp-2);
  font-family: var(--lp-font-display);
  font-variant-numeric: tabular-nums;
}
.lp-plan__price b { font-size: var(--lp-fs-price); font-weight: 800; letter-spacing: -.02em; }
.lp-plan__unit { font-family: var(--lp-font-body); font-size: var(--lp-fs-sm); color: var(--lp-ink-3); font-weight: 400; }

.lp-plan__billed { font-size: var(--lp-fs-sm); color: var(--lp-ink-3); }

.lp-plan__seats {
  margin-top: var(--lp-sp-2);
  padding: var(--lp-sp-1) var(--lp-sp-2);
  border-radius: var(--lp-r-md);
  background: var(--lp-mist);
  font-size: var(--lp-fs-sm);
  font-weight: 600;
}

.lp-plan__lines { margin-top: var(--lp-sp-2); font-size: var(--lp-fs-sm); color: var(--lp-ink-2); }

/* Colle le bouton en bas : les cartes n'ont pas le meme nombre de lignes. */
.lp-plan__cta { margin-top: auto; padding-top: var(--lp-sp-3); }

.lp-price-free {
  margin-top: var(--lp-sp-4);
  text-align: center;
  color: var(--lp-ink-2);
  font-size: var(--lp-fs-sm);
}

@media (min-width: 900px) {
  .lp-plans { grid-template-columns: repeat(3, 1fr); gap: var(--lp-sp-4); }
  .lp-plan { padding: var(--lp-sp-4); }
}

/* ============================================================================
   FAQ
   ========================================================================= */

/* Deux colonnes, sans carte englobante : les questions se balaient du regard
   au lieu de se derouler sur toute la hauteur de l'ecran. */
.lp-faq {
  display: grid;
  gap: 0;
  max-width: 62rem;
  margin: var(--lp-sp-6) auto 0;
}

.lp-faq__item { border-bottom: 1px solid var(--lp-line); }

@media (min-width: 900px) {
  .lp-faq {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--lp-sp-8);
    align-items: start;
  }
}

.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lp-sp-2);
  min-height: 44px;
  padding: var(--lp-sp-2) 0;
  cursor: pointer;
  font-family: var(--lp-font-display);
  font-weight: 700;
  /* La hierarchie question/reponse tient au COUPLE police + graisse (Manrope
     700 contre Inter 400), pas a l'ecart de taille : une FAQ dont les
     questions font 24px se lit comme une suite de titres. */
  font-size: var(--lp-fs-h4);
  line-height: 1.4;
  letter-spacing: -.005em;
  list-style: none;
}
/* Safari affiche encore le triangle natif sans cette regle. */
.lp-faq__q::-webkit-details-marker { display: none; }

.lp-faq__q:hover { color: var(--lp-coral-ink); }

.lp-faq__chevron {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lp-mist);
  color: var(--lp-coral-ink);
  transition: transform var(--lp-dur-base) var(--lp-ease);
}
.lp-faq__item[open] .lp-faq__chevron { transform: rotate(180deg); }

.lp-faq__a {
  padding: 0 var(--lp-sp-4) var(--lp-sp-3) 0;
  color: var(--lp-ink-2);
  font-size: var(--lp-fs-dense);
  line-height: 1.6;
}

.lp-faq__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-4);
  text-align: center;
  color: var(--lp-ink-3);
  font-size: var(--lp-fs-sm);
}

/* ============================================================================
   CTA FINAL
   ========================================================================= */

.lp-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-4);
}
.lp-final__note {
  margin-top: var(--lp-sp-3);
  font-size: var(--lp-fs-sm);
  color: var(--lp-on-dark-2);
}

/* ============================================================================
   PIED DE PAGE
   ========================================================================= */

.lp-footer {
  background: var(--lp-navy);
  color: var(--lp-on-dark-2);
  padding-block: var(--lp-sp-8) var(--lp-sp-4);
}

.lp-footer__grid { display: grid; gap: var(--lp-sp-5); }

.lp-footer__brand .lp-nav__brand { color: var(--lp-on-dark); pointer-events: none; }
.lp-footer__brand p { margin-top: var(--lp-sp-2); font-size: var(--lp-fs-sm); max-width: 34ch; }
.lp-footer__made { color: var(--lp-teal-lt); font-weight: 600; }

.lp-footer__title {
  font-family: var(--lp-font-display);
  font-size: var(--lp-fs-sm);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-on-dark);
  margin-bottom: var(--lp-sp-1);
}

.lp-footer__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--lp-on-dark-2);
  text-decoration: none;
  font-size: var(--lp-fs-sm);
}
.lp-footer__col a:hover { color: var(--lp-on-dark); text-decoration: underline; }

.lp-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lp-sp-2);
  margin-top: var(--lp-sp-6);
  padding-top: var(--lp-sp-3);
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: var(--lp-fs-sm);
}

.lp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--lp-sp-3);
  margin-left: auto;
}
.lp-footer__legal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--lp-on-dark-2);
  text-decoration: none;
}
.lp-footer__legal a:hover { color: var(--lp-on-dark); text-decoration: underline; }

@media (min-width: 768px) {
  .lp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--lp-sp-4); }
}

/* ============================================================================
   CTA COLLANT — telephone uniquement, apres le hero
   ========================================================================= */

.lp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--lp-z-sticky);
  padding: var(--lp-sp-1) var(--lp-gutter) calc(var(--lp-sp-1) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--lp-line);
  transform: translateY(110%);
  transition: transform var(--lp-dur-base) var(--lp-ease);
}
.lp-sticky.is-on { transform: none; }

/* Au-dela du telephone, la nav collante porte deja le CTA : deux barres
   feraient doublon. Retire du flux ET du parcours clavier. */
@media (min-width: 768px) {
  .lp-sticky { display: none; }
}

/* ============================================================================
   MOUVEMENT VIVANT

   Trois effets, pas un de plus, et tous en `transform`/`opacity` : ces deux
   proprietes sont composees par le GPU, donc elles ne declenchent ni calcul
   de mise en page ni repeinture. Une ombre ou une hauteur animee, elle,
   repeint a chaque image et fait chauffer les telephones.

   Regle absolue : un element CLIQUABLE ne se deplace jamais tout seul — viser
   une cible mouvante au doigt est penible. C'est le halo qui bouge, pas le
   bouton.
   ========================================================================= */

/* 1. CTA principal : une lueur suit le curseur au survol. Rien ne tourne
      autour du bouton, rien ne bouge au repos.

      Le `position: relative` est indispensable : sans lui, la lueur en
      position absolue se calerait sur le premier ancetre positionne — la
      section entiere — et s'etalerait hors du bouton. */
.lp-btn--glow { position: relative; }

/* Lueur sous le curseur. Les coordonnees sont posees par le module ES ; sans
   lui, --lp-mx/--lp-my valent 50% et la lueur reste centree. */
.lp-btn--glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px circle at var(--lp-mx, 50%) var(--lp-my, 50%),
              rgba(255,255,255,.28), transparent 65%);
  opacity: 0;
  transition: opacity var(--lp-dur-base) var(--lp-ease);
  pointer-events: none;
}
.lp-btn--glow:hover::after { opacity: 1; }


/* 3. Le fil des etapes se trace a l'arrivee de la section, dans l'ordre :
      il raconte la progression au lieu d'etre la au premier regard. */
.lp-step:not(:last-child)::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s var(--lp-ease);
}
.lp-steps.is-in .lp-step:not(:last-child)::before { transform: scaleX(1); }
.lp-steps.is-in .lp-step:nth-child(2)::before { transition-delay: .25s; }

@media (max-width: 767px) {
  /* En colonne, le fil est vertical : il se trace du haut vers le bas. */
  .lp-step:not(:last-child)::before {
    transform: scaleY(0);
    transform-origin: center top;
  }
  .lp-steps.is-in .lp-step:not(:last-child)::before { transform: scaleY(1); }
}

/* ============================================================================
   DEMO ANIMEE — 1er benefice : on tape un nom, la fiche arrive.
   Markup : views/landing/_demo_company.php (decor, aria-hidden).

   La sequence se DECLENCHE sur `.is-in`, posee par landing.js a l'entree dans
   le viewport, et ne joue qu'UNE fois. Toutes les etapes sont en
   `animation-fill-mode: both` : avant leur delai elles tiennent leur etat
   initial, apres elles tiennent l'etat final — c'est ce qui permet a la scene
   de rester figee sur son dernier etat au lieu de revenir a zero.

   ⚠️ La ligne de temps vit ICI et nulle part ailleurs (aucun setTimeout) : un
   deuxieme calendrier en JS divergerait du premier au premier ajustement.
   ========================================================================= */

.lp-demo {
  background: var(--lp-mist);
  border-radius: var(--lp-r-2xl);
  overflow: hidden;
  font-size: 14px;
}
.lp-demo__bar {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-1);
  padding: 0 var(--lp-sp-3);
  height: 40px;
  background: var(--lp-paper);
  border-bottom: 1px solid var(--lp-line);
}
.lp-demo__mark { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.lp-demo__bar b { font-family: var(--lp-font-display); font-weight: 700; }
.lp-demo__bar span { color: var(--lp-ink-3); }
.lp-demo__dots { margin-left: auto; display: flex; gap: 7px; }
.lp-demo__dots i { width: 9px; height: 9px; border-radius: var(--lp-r-pill); background: var(--lp-line); }

.lp-demo__in { padding: var(--lp-sp-3); }

/* ── Le champ de recherche : la seule chose que l'utilisateur tape ─────── */
.lp-demo__q {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-2);
  height: 46px;
  padding: 0 var(--lp-sp-1) 0 var(--lp-sp-3);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
}
.lp-demo__q > svg { width: 19px; height: 19px; flex: 0 0 19px; color: var(--lp-ink-3); }

/* La frappe : la largeur du conteneur s'ouvre par paliers, un par lettre, et
   le curseur EST son bord droit — il suit donc la frappe sans qu'aucune
   position n'ait a etre calculee. La largeur finale est en `em` (mesuree sur
   le rendu, pas devinee) : elle suit la taille de police au lieu de se
   desaligner des que le composant change d'echelle. */
.lp-demo__typed {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--lp-ink);
}
.lp-demo__typed > span {
  display: inline-block;
  width: 3.55em;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  border-right: 2px solid transparent;
}
.lp-benefit.is-in .lp-demo__typed > span {
  animation: lp-demo-type .85s steps(6, end) .2s both,
             lp-demo-caret .6s step-end .2s 6 both;
}
@keyframes lp-demo-type { to { max-width: 3.55em; } }
@keyframes lp-demo-caret {
  0%, 100% { border-right-color: var(--lp-ink-3); }
  50%      { border-right-color: transparent; }
}

.lp-demo__go {
  height: 32px;
  padding: 0 var(--lp-sp-2);
  border-radius: var(--lp-r-sm);
  background: var(--lp-navy);
  color: var(--lp-on-dark);
  font-weight: 600;
  display: grid;
  place-items: center;
}
/* L'appui : c'est ce qui fait comprendre que la recherche a ete LANCEE, sans
   quoi la fiche paraitrait arriver toute seule. */
.lp-benefit.is-in .lp-demo__go { animation: lp-demo-press .26s var(--lp-ease) 1.1s both; }
@keyframes lp-demo-press { 50% { transform: scale(.94); } }

/* ── L'attente : montree, parce qu'elle dit qu'on est alle CHERCHER ────── */
/* Le libelle d'attente : il vit DANS le squelette, donc il herite de son
   opacite et ne porte AUCUNE animation de mise en page. La version precedente
   animait `height` et `margin-top` pour se retirer du flux — or `height: auto`
   ne s'interpole pas : la ligne se retractait d'un coup, poussant la fiche de
   30 px a l'instant meme ou elle apparaissait. Seuls les trois points bougent,
   et ils ne bougent que d'eux-memes. */
.lp-demo__wait {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-1);
  margin: 0 0 var(--lp-sp-2);
  color: var(--lp-ink-3);
  font-size: var(--lp-fs-dense);
}
.lp-demo__wait i {
  width: 7px; height: 7px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-ink-3);
}
/* Trois pulsations decalees : c'est ce qui distingue une attente EN COURS d'un
   ecran fige. Elles s'arretent avec le squelette, donc rien ne continue de
   battre sous une fiche deja arrivee. */
.lp-benefit.is-in .lp-demo__wait i { animation: lp-demo-pulse .75s var(--lp-ease) 1.25s 2 both; }
.lp-benefit.is-in .lp-demo__wait i:nth-child(2) { animation-delay: 1.37s; }
.lp-benefit.is-in .lp-demo__wait i:nth-child(3) { animation-delay: 1.49s; }
@keyframes lp-demo-pulse { 50% { opacity: .25; transform: translateY(-3px); } }

/* ── Le chargement : un squelette, comme en attend une vraie interface ─── */
.lp-demo__stack { display: grid; }
.lp-demo__stack > * { grid-area: 1 / 1; }

.lp-demo__skel {
  margin-top: var(--lp-sp-2);
  padding: var(--lp-sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
  background: var(--lp-paper);
  opacity: 0;
}
.lp-demo__skel-hd { display: flex; align-items: center; gap: var(--lp-sp-2); margin-bottom: var(--lp-sp-2); }
.lp-demo__skel-hd i { width: 40px; height: 40px; border-radius: var(--lp-r-md); background: var(--lp-line); flex: 0 0 40px; }
.lp-demo__skel-hd em { display: block; flex: 1; }
.lp-demo__skel-hd b,
.lp-demo__skel-hd s { display: block; height: 11px; border-radius: var(--lp-r-pill); background: var(--lp-line); }
.lp-demo__skel-hd b { width: 45%; }
.lp-demo__skel-hd s { width: 66%; margin-top: 7px; height: 9px; }
.lp-demo__skel-l {
  display: block;
  height: 11px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-line);
  margin-top: 13px;
}
.lp-demo__skel-l:nth-of-type(2) { width: 82%; }
.lp-demo__skel-l:nth-of-type(3) { width: 68%; }
.lp-demo__skel-l:nth-of-type(4) { width: 76%; }
.lp-demo__skel-l:nth-of-type(5) { width: 54%; }
/* Il apparaît AVEC la recherche et s'efface quand la fiche arrive : présent
   avant, il annoncerait un chargement que personne n'a déclenché. */
.lp-benefit.is-in .lp-demo__skel { animation: lp-demo-skel 1.25s var(--lp-ease) 1.1s both; }
@keyframes lp-demo-skel {
  0%        { opacity: 0; }
  15%, 70%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* ── La fiche : ce qui arrive sans qu'on l'ait tape ────────────────────── */
.lp-demo__card {
  margin-top: var(--lp-sp-2);
  padding: var(--lp-sp-3);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
}
/* Le 1er bloc SEUL fait apparaître sa carte : elle arrive après la recherche. */
.lp-demo--company .lp-demo__card { opacity: 0; }
.lp-benefit.is-in .lp-demo--company .lp-demo__card { animation: lp-demo-in .4s var(--lp-ease) 2.25s both; }
@keyframes lp-demo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.lp-demo__hd { display: flex; align-items: center; gap: var(--lp-sp-2); }
.lp-demo__logo { width: 40px; height: 40px; flex: 0 0 40px; display: block; }
.lp-demo__id { flex: 1; min-width: 0; }
.lp-demo__id b {
  display: block;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -.015em;
}
.lp-demo__id em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  color: var(--lp-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-demo__auto {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-coral-wash);
  color: var(--lp-coral-ink);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}
.lp-benefit.is-in .lp-demo__auto { animation: lp-demo-pop .34s var(--lp-ease) 3.4s both; }
@keyframes lp-demo-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* Les lignes tombent une par une : c'est CE moment qui dit « ça se remplit
   tout seul ». Les sortir ensemble ferait de la fiche un bloc deja ecrit. */
.lp-demo__rows {
  margin: var(--lp-sp-2) 0 0;
  padding-top: var(--lp-sp-2);
  border-top: 1px solid var(--lp-line);
}
.lp-demo__rows > div { display: flex; align-items: center; gap: var(--lp-sp-2); opacity: 0; }
.lp-demo__rows > div + div { margin-top: var(--lp-sp-1); }
.lp-demo__rows dt { flex: 0 0 132px; color: var(--lp-ink-3); }
.lp-demo__rows dd { margin: 0; color: var(--lp-ink); }
.lp-demo__rows dd i { font-style: normal; color: var(--lp-ink-3); }
.lp-demo__ok {
  display: inline-block;
  padding: 2px var(--lp-sp-1);
  border-radius: var(--lp-r-pill);
  background: var(--lp-ok-bg);
  color: var(--lp-ok-ink);
  font-weight: 600;
}
.lp-benefit.is-in .lp-demo__rows > div { animation: lp-demo-line .34s var(--lp-ease) both; }
.lp-benefit.is-in .lp-demo__rows > div:nth-child(1) { animation-delay: 2.6s; }
.lp-benefit.is-in .lp-demo__rows > div:nth-child(2) { animation-delay: 2.78s; }
.lp-benefit.is-in .lp-demo__rows > div:nth-child(3) { animation-delay: 2.96s; }
.lp-benefit.is-in .lp-demo__rows > div:nth-child(4) { animation-delay: 3.14s; }
@keyframes lp-demo-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.lp-demo__act { margin: var(--lp-sp-2) 0 0; opacity: 0; }
.lp-benefit.is-in .lp-demo__act { animation: lp-demo-in .36s var(--lp-ease) 3.65s both; }
.lp-demo__add {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--lp-sp-3);
  border-radius: var(--lp-r-sm);
  background: var(--lp-coral);
  color: var(--lp-on-dark);
  font-weight: 700;
  /* Un libellé d'action ne se coupe jamais en deux : à colonne resserrée,
     « Ajouter à la fiche » passait sur deux lignes et le bouton doublait de
     hauteur. */
  white-space: nowrap;
}

/* Sans JS, `is-in` n'arrive jamais : la scene doit etre entierement lisible,
   dans son etat FINAL. Meme regle que `.no-js .lp-reveal` — une animation ne
   conditionne jamais l'affichage d'un contenu. */
.no-js .lp-demo__typed > span { max-width: 3.55em; }
.no-js .lp-demo--company .lp-demo__card,
.no-js .lp-demo__auto,
.no-js .lp-demo__act,
.no-js .lp-demo__rows > div { opacity: 1; }
.no-js .lp-demo__skel { display: none; }

/* Sur telephone la colonne descend a ~330 px : la fiche doit RESTER LISIBLE,
   ce que l'image qu'elle remplace ne pouvait pas faire (elle etait reduite en
   bloc). On resserre les paddings et on empile les lignes plutot que de
   reduire le texte — c'est la seule raison d'etre de ce breakpoint. */
@media (max-width: 767px) {
  .lp-demo { font-size: 13px; }
  .lp-demo__in { padding: var(--lp-sp-2); }
  .lp-demo__typed { font-size: 14px; }
  .lp-demo__id b { font-size: 19px; }
  .lp-demo__logo { width: 34px; height: 34px; flex: 0 0 34px; }
  /* Le badge passe sous l'identite : garde a droite, il ecraserait la raison
     sociale a 330 px de large. */
  .lp-demo__hd { flex-wrap: wrap; }
  .lp-demo__auto { order: 3; width: 100%; text-align: center; }
  .lp-demo__rows > div { flex-direction: column; align-items: flex-start; gap: 0; }
  .lp-demo__rows dt { flex: none; font-size: var(--lp-fs-label); }
}

/* ── 2e benefice : un profil sous les yeux, une fiche dans la base ──────
   Markup : views/landing/_demo_capture.php.

   La page LinkedIn est un decor FIXE, a pleine saturation : elle dit ou l'on
   est. Seul le tiroir s'anime — il arrive, lit la page, puis se remplit. */
.lp-demo--capture { position: relative; background: var(--lp-paper); }
.lp-cap__page { position: absolute; inset: 0; display: flex; flex-direction: column; }
.lp-cap__top {
  display: flex; align-items: center; gap: var(--lp-sp-2);
  height: 40px; flex: 0 0 40px; padding: 0 var(--lp-sp-2);
  border-bottom: 1px solid var(--lp-line);
}
.lp-cap__in {
  width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: var(--lp-r-sm);
  background: var(--lp-li); color: var(--lp-on-dark);
  font-family: var(--lp-font-display); font-weight: 800; font-size: 14px;
  letter-spacing: -.04em;
  display: grid; place-items: center;
}
.lp-cap__search { width: 150px; height: 22px; border-radius: 5px; background: var(--lp-mist); }
.lp-cap__nav { margin-left: auto; display: flex; gap: 12px; }
.lp-cap__nav i { width: 18px; height: 18px; border-radius: 5px; background: var(--lp-line); }
.lp-cap__nav i.is-on { background: var(--lp-li); opacity: .85; }
.lp-cap__cover { height: 74px; flex: 0 0 74px; background: linear-gradient(115deg, var(--lp-li) 0%, var(--lp-li) 45%, var(--lp-li-dk) 100%); }
.lp-cap__body { flex: 1; padding: 0 var(--lp-sp-3); min-width: 0; }
.lp-cap__pp {
  display: block;
  width: 84px; height: 84px;
  margin-top: -42px;
  border-radius: var(--lp-r-pill);
  border: 4px solid var(--lp-paper);
  background: var(--lp-line) url('../img/landing/li-profile.jpg') center / cover no-repeat;
}
.lp-cap__nm { margin: 10px 0 0; font-family: var(--lp-font-display); font-weight: 800; font-size: 21px; letter-spacing: -.01em; }
.lp-cap__jb { margin: 3px 0 0; color: var(--lp-ink-2); }
.lp-cap__meta { margin: 5px 0 0; color: var(--lp-ink-3); font-size: var(--lp-fs-dense); }
.lp-cap__cta { margin: var(--lp-sp-2) 0 0; }
.lp-cap__cta span {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 18px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-li); color: var(--lp-on-dark); font-weight: 600;
}
.lp-cap__line { display: block; height: 9px; width: 46%; margin-top: var(--lp-sp-2); border-radius: var(--lp-r-pill); background: var(--lp-mist); }

/* Le tiroir. Il GLISSE depuis la droite : c'est ce mouvement, et lui seul, qui
   dit qu'il n'appartient pas a la page qu'on visite. */
.lp-cap__dock {
  position: relative;
  width: 58%;
  margin: var(--lp-sp-2) var(--lp-sp-2) var(--lp-sp-2) auto;
  padding: var(--lp-sp-2);
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-xl);
  box-shadow: 0 18px 44px rgba(11, 18, 32, .20), 0 3px 10px rgba(11, 18, 32, .08);
  font-size: 13px;
  opacity: 0;
}
.lp-benefit.is-in .lp-cap__dock { animation: lp-cap-slide .45s var(--lp-ease) .25s both; }
@keyframes lp-cap-slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.lp-cap__dock-h {
  display: flex; align-items: center; gap: 7px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--lp-line);
}
.lp-cap__mark { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.lp-cap__dock-h b { font-family: var(--lp-font-display); font-weight: 800; letter-spacing: .04em; }
.lp-cap__dock-h span { color: var(--lp-ink-3); font-size: var(--lp-fs-label); white-space: nowrap; }

/* « Lecture de la page… » occupe la place du nom pendant qu'il arrive : les
   deux partagent la meme cellule, donc le tiroir ne change pas de hauteur. */
.lp-cap__slot { display: grid; }
.lp-cap__slot > * { grid-area: 1 / 1; display: block; min-height: 24px; }
.lp-cap__read { color: var(--lp-ink-3); font-size: var(--lp-fs-dense); }
.lp-cap__nm2 { font-family: var(--lp-font-display); font-weight: 800; font-size: 17px; opacity: 0; }
.lp-benefit.is-in .lp-cap__read { animation: lp-cap-read 1.15s var(--lp-ease) .7s both; }
@keyframes lp-cap-read { 0%, 72% { opacity: 1; } 100% { opacity: 0; } }
.lp-benefit.is-in .lp-cap__nm2 { animation: lp-demo-in .3s var(--lp-ease) 1.7s both; }

.lp-cap__jb2 { margin: 3px 0 0; color: var(--lp-ink-2); opacity: 0; }
.lp-benefit.is-in .lp-cap__jb2 { animation: lp-demo-in .3s var(--lp-ease) 1.9s both; }
.lp-cap__known {
  display: inline-block;
  margin: 10px 0 0;
  padding: 3px 10px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-ok-bg);
  color: var(--lp-ok-ink);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  opacity: 0;
}
.lp-benefit.is-in .lp-cap__known { animation: lp-demo-pop .34s var(--lp-ease) 2.25s both; }
.lp-cap__ul {
  list-style: none;
  margin: 10px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--lp-line);
  color: var(--lp-ink-3);
  font-size: var(--lp-fs-dense);
}
.lp-cap__ul li { opacity: 0; }
.lp-cap__ul li + li { margin-top: 6px; }
.lp-cap__ul b { color: var(--lp-ink-2); font-weight: 600; }
.lp-benefit.is-in .lp-cap__ul li { animation: lp-demo-line .3s var(--lp-ease) 2.5s both; }
.lp-benefit.is-in .lp-cap__ul li:nth-child(2) { animation-delay: 2.68s; }
.lp-cap__act { margin: var(--lp-sp-2) 0 0; opacity: 0; }
.lp-cap__act .lp-demo__add { width: 100%; justify-content: center; }
.lp-benefit.is-in .lp-cap__act { animation: lp-demo-in .34s var(--lp-ease) 2.95s both; }
.lp-cap__hint { margin: 8px 0 0; text-align: center; color: var(--lp-ink-3); font-size: var(--lp-fs-label); opacity: 0; }
.lp-benefit.is-in .lp-cap__hint { animation: lp-demo-in .3s var(--lp-ease) 3.15s both; }

.no-js .lp-cap__read { display: none; }
.no-js .lp-cap__dock,
.no-js .lp-cap__nm2,
.no-js .lp-cap__jb2,
.no-js .lp-cap__known,
.no-js .lp-cap__ul li,
.no-js .lp-cap__act,
.no-js .lp-cap__hint { opacity: 1; }

@media (max-width: 767px) {
  /* Le tiroir prend toute la largeur : a 52 % il ne resterait plus assez de
     place pour son propre texte, et la page dessous ne se lirait plus. */
  .lp-cap__dock { width: auto; margin-left: var(--lp-sp-2); }
  .lp-cap__pp { width: 62px; height: 62px; margin-top: -31px; }
  .lp-cap__nm { font-size: 17px; }
}

/* ── 3e benefice : l'adresse est cherchee, puis prouvee ─────────────────
   Markup : views/landing/_demo_email.php.

   L'en-tete porte DEUX etats dans la meme cellule de grille (« Recherche en
   cours » puis le resultat) : c'est ce qui permet de raconter une recherche
   sans que la carte change de hauteur — les faire se succeder dans le flux
   ferait sauter tout ce qui suit sur la page. */
.lp-em__ctx { color: var(--lp-ink-3); }
.lp-em__ctx b { color: var(--lp-ink-2); font-weight: 600; }
.lp-em__card { margin-top: var(--lp-sp-2); }

.lp-em__head { display: grid; align-items: center; min-height: 46px; }
.lp-em__head > * { grid-area: 1 / 1; display: flex; align-items: center; gap: var(--lp-sp-2); }

/* Etat 1 — en cours. Le disque tourne un nombre BORNE de fois : une rotation
   infinie continuerait sous une adresse deja trouvee, et couterait du CPU sur
   une page ou plus rien ne bouge. */
.lp-em__spin {
  width: 20px; height: 20px; flex: 0 0 20px;
  border-radius: var(--lp-r-pill);
  border: 2px solid var(--lp-line-strong);
  border-top-color: var(--lp-ink-3);
}
.lp-benefit.is-in .lp-em__spin { animation: lp-em-spin .7s linear 0s 5 both; }
@keyframes lp-em-spin { to { transform: rotate(1turn); } }
.lp-em__seek b { display: block; font-weight: 600; }
.lp-em__seek em { display: block; font-style: normal; color: var(--lp-ink-3); font-size: var(--lp-fs-dense); }
.lp-benefit.is-in .lp-em__seek { animation: lp-em-seek 2.75s var(--lp-ease) .15s both; }
@keyframes lp-em-seek { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }

/* Etat 2 — trouvee. */
.lp-em__found { opacity: 0; }
.lp-em__tick {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: var(--lp-r-md);
  background: var(--lp-ok-bg);
  color: var(--lp-ok-ink);
  display: grid; place-items: center;
}
.lp-em__tick svg { width: 20px; height: 20px; }
.lp-em__found > span { flex: 1; min-width: 0; }
.lp-em__found em {
  display: flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-size: var(--lp-fs-label);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-em__found > span > b {
  display: block;
  margin-top: 2px;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-em__ok {
  flex: 0 0 auto;
  letter-spacing: 0;
  text-transform: none;
  padding: 3px 10px;
  border-radius: var(--lp-r-pill);
  background: var(--lp-ok-bg);
  color: var(--lp-ok-ink);
  font-size: var(--lp-fs-label);
  font-weight: 700;
  white-space: nowrap;
}
.lp-benefit.is-in .lp-em__found { animation: lp-demo-in .4s var(--lp-ease) 2.8s both; }

/* Les deux colonnes : le travail fait, puis ce qu'il prouve. */
.lp-em__cols {
  display: flex;
  margin-top: var(--lp-sp-2);
  padding-top: var(--lp-sp-2);
  border-top: 1px solid var(--lp-line);
}
.lp-em__cols > div:first-child { flex: 0 0 44%; }
.lp-em__cols > div:last-child {
  flex: 1;
  min-width: 0;
  border-left: 1px solid var(--lp-line);
  margin-left: var(--lp-sp-2);
  padding-left: var(--lp-sp-2);
}
.lp-em__lbl {
  margin: 0 0 10px;
  font-size: var(--lp-fs-label);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-ink-3);
}
.lp-em__li,
.lp-em__why { display: flex; gap: 8px; margin: 0; line-height: 1.35; }
.lp-em__why { opacity: 0; }
.lp-em__li + .lp-em__li,
.lp-em__why + .lp-em__why { margin-top: 8px; }
.lp-em__why svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 3px; }

/* Une etape a DEUX etats au meme endroit : la pastille d'attente et la coche.
   Elles partagent une cellule de grille, donc la ligne ne bouge pas d'un pixel
   au moment ou l'une remplace l'autre. */
.lp-em__mark { display: grid; width: 14px; height: 14px; flex: 0 0 14px; margin-top: 3px; }
.lp-em__mark > * { grid-area: 1 / 1; }
.lp-em__dot {
  width: 12px; height: 12px;
  margin: 1px;
  border: 2px solid var(--lp-line-strong);
  border-radius: var(--lp-r-pill);
}
.lp-em__chk { width: 14px; height: 14px; color: var(--lp-ink-3); opacity: 0; }
/* En attente, l'etape est PALE : c'est le contraste avec les lignes deja
   cochees qui montre ou en est la recherche. */
.lp-em__li { color: var(--lp-ink-3); opacity: .45; }
.lp-em__why { color: var(--lp-ink-2); }
.lp-em__why svg { color: var(--lp-ok-ink); }
.lp-em__why b { color: var(--lp-ink); font-weight: 600; }

/* Les etapes se cochent une par une : c'est LA mecanique du module, et la
   seule chose qui distingue une recherche d'une reponse toute faite. Les
   preuves ne viennent qu'APRES le verdict — les montrer avant reviendrait a
   justifier une adresse qu'on n'a pas encore annoncee. */
/* Chaque etape s'accomplit a son tour : la ligne s'eclaircit, la pastille
   d'attente s'efface et la coche prend sa place — trois animations qui
   partagent le MEME delai, sans quoi les trois etats se decaleraient.
   Les etapes a venir ne clignotent pas : le disque qui tourne dans l'en-tete
   porte deja le signal « ca travaille », et deux mouvements concurrents dans
   une meme carte se neutralisent. */
.lp-benefit.is-in .lp-em__li { animation: lp-em-done .3s var(--lp-ease) both; }
.lp-benefit.is-in .lp-em__chk { animation: lp-em-appear .3s var(--lp-ease) both; }
.lp-benefit.is-in .lp-em__dot { animation: lp-em-vanish .3s var(--lp-ease) both; }
@keyframes lp-em-done   { from { opacity: .45; } to { opacity: 1; } }
@keyframes lp-em-appear { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lp-em-vanish { from { opacity: 1; } to { opacity: 0; } }

.lp-benefit.is-in .lp-em__li:nth-of-type(2),
.lp-benefit.is-in .lp-em__li:nth-of-type(2) .lp-em__chk,
.lp-benefit.is-in .lp-em__li:nth-of-type(2) .lp-em__dot { animation-delay: .75s; }
.lp-benefit.is-in .lp-em__li:nth-of-type(3),
.lp-benefit.is-in .lp-em__li:nth-of-type(3) .lp-em__chk,
.lp-benefit.is-in .lp-em__li:nth-of-type(3) .lp-em__dot { animation-delay: 1.25s; }
.lp-benefit.is-in .lp-em__li:nth-of-type(4),
.lp-benefit.is-in .lp-em__li:nth-of-type(4) .lp-em__chk,
.lp-benefit.is-in .lp-em__li:nth-of-type(4) .lp-em__dot { animation-delay: 1.75s; }
.lp-benefit.is-in .lp-em__li:nth-of-type(5),
.lp-benefit.is-in .lp-em__li:nth-of-type(5) .lp-em__chk,
.lp-benefit.is-in .lp-em__li:nth-of-type(5) .lp-em__dot { animation-delay: 2.25s; }

.lp-benefit.is-in .lp-em__why { animation: lp-demo-line .3s var(--lp-ease) both; }
.lp-benefit.is-in .lp-em__why:nth-of-type(2) { animation-delay: 3.15s; }
.lp-benefit.is-in .lp-em__why:nth-of-type(3) { animation-delay: 3.4s; }

.lp-em__act {
  display: flex;
  align-items: center;
  gap: var(--lp-sp-2);
  margin: var(--lp-sp-2) 0 0;
  padding-top: var(--lp-sp-2);
  border-top: 1px solid var(--lp-line);
  opacity: 0;
}
.lp-em__safe { color: var(--lp-ink-3); font-size: var(--lp-fs-dense); }
.lp-benefit.is-in .lp-em__act { animation: lp-demo-in .36s var(--lp-ease) 3.7s both; }

.no-js .lp-em__seek,
.no-js .lp-em__dot { display: none; }
.no-js .lp-em__found,
.no-js .lp-em__li,
.no-js .lp-em__chk,
.no-js .lp-em__why,
.no-js .lp-em__act { opacity: 1; }

@media (max-width: 767px) {
  .lp-em__found > span > b { font-size: 17px; }
  .lp-em__tick { width: 32px; height: 32px; flex: 0 0 32px; }
  /* Deux colonnes de 160 px ne tiennent pas : elles s'empilent, le filet
     vertical devient un filet horizontal. */
  .lp-em__cols { flex-direction: column; }
  .lp-em__cols > div:first-child { flex: none; }
  .lp-em__cols > div:last-child {
    border-left: 0;
    border-top: 1px solid var(--lp-line);
    margin: var(--lp-sp-2) 0 0;
    padding: var(--lp-sp-2) 0 0;
  }
  .lp-em__act { flex-direction: column; align-items: flex-start; }
}

/* ============================================================================
   MOUVEMENT — entree du hero, puis reveals au scroll, joues une seule fois.
   ========================================================================= */

/* Entree du hero, jouee UNE fois au chargement. Pas de `.lp-reveal` ici : le
   hero est au-dessus de la ligne de flottaison, il n'a rien a attendre d'un
   IntersectionObserver — et une animation CSS pure ne depend pas du module ES,
   donc elle ne peut pas laisser le premier ecran invisible si le script tombe.
   Le VISUEL n'est pas anime, volontairement : c'est l'element LCP, et son bord
   bas est colle au bandeau suivant (cf. § HERO) — tout mouvement y laisserait
   voir le fond par en dessous, ce qui avait deja fait ecarter un flottement. */
@keyframes lp-hero-rise {
  from { opacity: 0; transform: translateY(var(--lp-hero-y, 10px)); }
  to   { opacity: 1; transform: none; }
}

.lp-hero__text > * { animation: lp-hero-rise .42s var(--lp-ease) both; }
/* Le premier bloc part sans delai : le decalage sert a echelonner l'arrivee,
   et retarder le premier texte peint ne rendrait service a personne. */
.lp-hero__text > *:nth-child(2) { animation-delay: .06s; }
.lp-hero__text > *:nth-child(3) { animation-delay: .12s; }
.lp-hero__text > *:nth-child(4) { animation-delay: .18s; }
.lp-hero__text > *:nth-child(5) { animation-delay: .24s; }

/* Le surtitre monte de plus bas, et plus longtemps que le reste. Il ouvre la
   sequence mais part sans delai, donc au deplacement commun il arrivait pendant
   que la page se peint encore : son mouvement passait inapercu.
   La distance vit dans une variable plutot que dans une seconde regle de
   keyframes — deux definitions du meme geste divergeraient. */
.lp-hero__text > .lp-eyebrow {
  --lp-hero-y: 16px;
  animation-duration: .58s;
}

/* Le soulignement du mot pivot se TRACE, au lieu d'etre la d'emblee : la page
   souligne sa promesse au moment ou on la lit. Le `skewX` est repris dans les
   deux images-cles — une animation de `transform` remplace la declaration
   entiere, l'omettre redresserait l'entaille le temps du trace. L'origine passe
   a gauche pour que le trait pousse depuis le debut du mot (le decalage induit
   sur le biseau vaut 0,4 px). */
@keyframes lp-hero-cleave {
  from { transform: skewX(calc(var(--lp-cleave-angle) * -1)) scaleX(0); }
  to   { transform: skewX(calc(var(--lp-cleave-angle) * -1)) scaleX(1); }
}
.lp-hero .lp-cleave-word::after {
  transform-origin: left center;
  animation: lp-hero-cleave .5s var(--lp-ease) .38s both;
}

.lp-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .2s ease-out, transform .2s ease-out;
}
.lp-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Sans JS, rien ne doit rester invisible. */
.no-js .lp-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* 🚨 Le DELAI n'etait pas neutralise, et une duree a .01ms ne suffit pas a
       supprimer une animation : elle se contente de la rendre instantanee, a
       l'heure prevue. Une sequence echelonnee — la demo du 1er benefice
       s'etale sur 4 s — continuait donc a se construire par SAUTS chez
       quelqu'un qui a precisement demande qu'on lui epargne ca, ce qui est
       plus desagreable que l'animation elle-meme. Tout arrive maintenant a
       l'instant zero, c'est-a-dire deja fait. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
}