/* ═══════════════════════════════════════════════════════════════
   LANDING · sections page d'accueil Hyvirtus
   Charger après tokens.css + base.css + topbar.css + footer.css
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   HERO · Tisserand canvas + eyebrow + h1 + sub + CTAs
   ═══════════════════════════════════════════════════════════════ */
.lp-hero {
  position: relative;
  width: 100%;
  padding: 120px 28px 80px;
  text-align: center;
  overflow: hidden;
}
.lp-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--landing-max);
  margin: 0 auto;
}

/* Tisserand : canvas qui anime des filaments or en boucle infinie */
.lp-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 9000ms ease-out;
  will-change: opacity;
}
.lp-hero-canvas.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp-hero-canvas {
    transition: none;
  }
}

.lp-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 20px;
}
.lp-hero h1 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  margin-bottom: 18px;
}
.lp-hero h1 .lp-hero-line1 {
  display: block;
}
.lp-hero h1 em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  filter: drop-shadow(0 0 12px var(--champagne-glow));
}
[data-theme="light"] .lp-hero h1 em {
  color: var(--champagne);
  filter: none;
}
.lp-hero-sub {
  max-width: 760px;
  margin: 0 auto 36px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-mid);
}
.lp-hero-sub .lp-hero-sub-line {
  display: block;
}
.lp-hero-sub em {
  display: block;
  margin-top: 10px;
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  filter: drop-shadow(0 0 8px var(--champagne-glow));
}
[data-theme="light"] .lp-hero-sub em {
  color: var(--text-strong);
  filter: none;
}
.lp-hero-ctas {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.lp-hero-note {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-mid);
  /* proche des CTAs : la note lève la friction au moment du clic */
  margin-top: 16px;
}

/* .lp-section-eyebrow : défini dans how-it-works.css (CSS partagé, déplacé 2026-06-11) */

/* ═══════════════════════════════════════════════════════════════
   STYLES GÉNÉRIQUES · Titre/sub de section (réutilisables)
   ═══════════════════════════════════════════════════════════════ */
.lp-section-h2 {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  margin-bottom: 14px;
}
.lp-section-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  filter: drop-shadow(0 0 8px var(--champagne-glow));
}
[data-theme="light"] .lp-section-h2 em {
  color: var(--text-strong);
  filter: none;
}

.lp-section-sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 2 · Les trois temps (carrousel à onglets)
   Onglets : Le Rituel / Le Dojo Live / La Timeline
   Maquette fidèle du produit qui swap selon l'onglet actif
   ═══════════════════════════════════════════════════════════════ */
.lp-temps {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

.lp-temps-h2 {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  margin-bottom: 14px;
}
.lp-temps-h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  filter: drop-shadow(0 0 8px var(--champagne-glow));
}
[data-theme="light"] .lp-temps-h2 em {
  color: var(--text-strong);
  filter: none;
}

.lp-temps-sub {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 48px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-mid);
}

/* ─── Navigation à onglets : layout horizontal centré avec arrows */
.lp-temps-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0 auto 32px;
  max-width: 880px;
}

/* Arrow boutons (prev / next) · discrets, fitt-friendly (44x44) */
.lp-temps-arrow {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  color: var(--text-mid);
  cursor: pointer;
  transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out), transform 160ms var(--ease-out), background 200ms var(--ease-out);
  flex: 0 0 auto;
}
.lp-temps-arrow:hover {
  border-color: var(--champagne-soft);
  color: var(--champagne);
  transform: translateY(-1px);
}
.lp-temps-arrow:focus-visible {
  outline: 0;
  border-color: var(--champagne-soft);
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18);
}
.lp-temps-arrow svg {
  width: 18px;
  height: 18px;
}
[data-theme="light"] .lp-temps-arrow {
  background: var(--bg-panel);
  border-color: var(--border);
}
[data-theme="light"] .lp-temps-arrow:hover {
  border-color: rgba(201, 163, 106, 0.42);
  color: var(--champagne);
}

/* ─── Conteneur des 3 tabs : positionné pour l'indicator champagne */
.lp-temps-tabs {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  min-width: 0;
}
[data-theme="light"] .lp-temps-tabs {
  border-color: var(--border);
  background: var(--bg-panel);
}

/* ─── Un tab : icône + label (meta + titre) en deux lignes */
.lp-temps-tab {
  position: relative;
  z-index: 1;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text-mid);
  font-family: var(--font-body);
  text-align: left;
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out);
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}
.lp-temps-tab:hover {
  color: var(--text-strong);
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="light"] .lp-temps-tab:hover {
  background: rgba(15, 20, 36, 0.03);
}
.lp-temps-tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18);
}

/* Icône SVG du tab · champagne par défaut sur l'actif, muted sinon */
.lp-temps-tab-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--text-dim);
  transition: color 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.lp-temps-tab:hover .lp-temps-tab-icon {
  color: var(--champagne-soft);
}

/* Label deux lignes : meta sur la première, titre sur la seconde */
.lp-temps-tab-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.lp-temps-tab-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  line-height: 1.2;
}
.lp-temps-tab-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.002em;
  line-height: 1.2;
  color: inherit;
}

/* Tab actif : icône + titre en champagne, fond très subtil */
.lp-temps-tab.is-active {
  color: var(--text-strong);
}
.lp-temps-tab.is-active .lp-temps-tab-icon {
  color: var(--champagne);
}
.lp-temps-tab.is-active .lp-temps-tab-title {
  color: var(--text-strong);
}

/* Indicateur fin champagne sous le tab actif (animé) */
.lp-temps-tab-indicator {
  position: absolute;
  left: 6px;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--champagne);
  box-shadow: 0 0 8px var(--champagne-glow);
  transition: left 280ms var(--ease-out), width 280ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
[data-theme="light"] .lp-temps-tab-indicator {
  box-shadow: none;
}

/* ─── Stage : zone qui contient les panels (un seul visible à la fois)
   min-height calculée dynamiquement en JS (max des 3 panels) pour
   éviter le saut de hauteur quand on change d'onglet (CLS) */
.lp-temps-stage {
  position: relative;
  /* Fallback avant que le JS mesure (équivalent ~Rituel qui est le panel le plus haut) */
  min-height: 720px;
  /* touch-action: pan-y permet le scroll vertical natif tout en
     laissant le JS détecter le swipe horizontal */
  touch-action: pan-y;
  overflow: hidden;
}
/* La hauteur du stage suit l'onglet actif (JS fitStageToActive). On garde
   le fondu d'entree .reveal (opacity/transform) et on ajoute height ;
   selecteur plus specifique que .reveal pour gagner la cascade. */
.lp-temps .lp-temps-stage {
  transition: opacity 520ms ease-out, transform 520ms ease-out, height 360ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .lp-temps .lp-temps-stage { transition: none; }
}
@media (max-width: 720px) {
  .lp-temps-stage {
    min-height: 820px;
  }
}

/* ─── Panel : crossfade léger entre les onglets */
.lp-temps-panel {
  animation: lp-temps-panel-fade 360ms var(--ease-out);
}
.lp-temps-panel[hidden] {
  display: none;
}
@keyframes lp-temps-panel-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro descriptive du panel (au-dessus de la maquette) */
.lp-temps-panel-intro {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

/* Numéro de step + scope (01 · Avant la session) · restaure la
   lecture chronologique que l'interface à onglets risquait de casser */
.lp-temps-panel-num {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
}
[data-theme="light"] .lp-temps-panel-num {
  color: var(--champagne);
}

.lp-temps-panel-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ─── Pont vers how-it-works.html sous le carrousel
   Lien sobre en chip mono uppercase + flèche qui glisse au hover */
.lp-temps-detail {
  text-align: center;
  margin-top: 36px;
}
.lp-temps-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft);
  background: var(--bg-panel);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 220ms var(--ease-out), border-color 220ms var(--ease-out), gap 220ms var(--ease-out), transform 160ms var(--ease-out);
}
.lp-temps-detail-link svg {
  width: 14px;
  height: 14px;
  transition: transform 220ms var(--ease-out);
}
.lp-temps-detail-link:hover {
  color: var(--champagne);
  border-color: var(--champagne-soft);
  gap: 12px;
}
.lp-temps-detail-link:hover svg {
  transform: translateX(2px);
}
.lp-temps-detail-link:focus-visible {
  outline: 0;
  border-color: var(--champagne-soft);
  box-shadow: 0 0 0 3px rgba(201, 163, 106, 0.18);
}
[data-theme="light"] .lp-temps-detail-link {
  border-color: var(--border);
}
[data-theme="light"] .lp-temps-detail-link:hover {
  border-color: rgba(201, 163, 106, 0.42);
}

/* ─── Scoped overrides : Dojo Live mock dans le carrousel landing
   (sans toucher how-it-works.html qui garde le mock pleine taille).
   Stratégie : on retire le scroll + max-height du feed (sinon le
   texte de la trace est tronqué/invisible) et on limite à 3 items
   représentatifs (Oracle + Décision + État) pour rester compact.
   Les tuiles sont tightenées pour équilibrer les deux colonnes. */
.lp-temps-stage .dlive-mock-grid {
  /* Pas de min-height bloquante : la hauteur suit le contenu naturel */
  min-height: 0;
}
.lp-temps-stage .dlive-left,
.lp-temps-stage .dlive-right {
  padding: 22px 22px;
  gap: 16px;
}
/* Feed visible entièrement, pas de scroll caché */
.lp-temps-stage .dlive-feed {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}
/* On garde 3 items lisibles (les 2 derniers : doublon état + ancien oracle
   sont masqués sur la landing, gardés sur how-it-works.html) */
.lp-temps-stage .dlive-feed > article:nth-child(n+4) {
  display: none;
}
.lp-temps-stage .dlive-tile {
  padding: 10px 10px;
  font-size: 12.5px;
  line-height: 1.25;
}
.lp-temps-stage .dlive-tile-grid {
  gap: 6px;
}
@media (max-width: 900px) {
  .lp-temps-stage .dlive-tile {
    padding: 9px 8px;
    font-size: 11.5px;
  }
}

/* ─── Payoff cumulatif (livre la promesse des 3 temps) */
.lp-temps-payoff {
  text-align: center;
  margin: 56px auto 0;
  max-width: 560px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-mid);
}
.lp-temps-payoff em {
  display: inline-block;
  margin-top: 6px;
  font-style: italic;
  color: var(--champagne);
  filter: drop-shadow(0 0 6px var(--champagne-glow));
}
[data-theme="light"] .lp-temps-payoff em {
  color: var(--text-strong);
  filter: none;
}

/* ─── Responsive : tablette */
@media (max-width: 960px) {
  .lp-temps { padding: 60px 24px 80px; }
  .lp-temps-payoff { margin-top: 44px; font-size: 17px; }
  .lp-temps-tab-meta { display: none; }
  .lp-temps-tab { padding: 10px 14px; gap: 10px; }
  .lp-temps-panel-intro { margin-bottom: 22px; }
}

/* ─── Responsive : mobile (les tabs deviennent icônes + petits titres) */
@media (max-width: 720px) {
  .lp-temps-nav {
    gap: 10px;
    margin-bottom: 24px;
  }
  .lp-temps-tabs {
    padding: 4px;
    gap: 2px;
  }
  .lp-temps-tab {
    padding: 8px 8px;
    gap: 6px;
    flex-direction: column;
    text-align: center;
  }
  .lp-temps-tab-icon {
    width: 20px;
    height: 20px;
  }
  .lp-temps-tab-title {
    font-size: 12px;
  }
  .lp-temps-tab-indicator {
    bottom: 2px;
  }
  .lp-temps-arrow {
    width: 44px;
    height: 44px;
  }
  .lp-temps-arrow svg {
    width: 16px;
    height: 16px;
  }
  .lp-temps-panel-desc {
    font-size: 15px;
  }
}

/* ─── Responsive : très petit (les arrows disparaissent, swipe natif) */
@media (max-width: 480px) {
  .lp-temps-arrow {
    display: none;
  }
  .lp-temps-nav {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 1.5 · Miroir (symptômes que le trader reconnaît)
   ═══════════════════════════════════════════════════════════════ */
.lp-miroir {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

.lp-miroir-list {
  list-style: none;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
}
.lp-miroir-list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  text-align: left;
}
.lp-miroir-list li:last-child { border-bottom: 0; }
.lp-miroir-list li::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--text-mute);
  flex: 0 0 18px;
  margin-top: 13px;
}

/* Phrase de pont : "Tu vis ces moments. Hyvirtus lit ce qui les déclenche." */
.lp-miroir-pont {
  text-align: center;
  margin: 44px auto 0;
  max-width: 560px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-mid);
}
.lp-miroir-pont em {
  font-style: italic;
  color: var(--champagne);
  filter: drop-shadow(0 0 6px var(--champagne-glow));
}
[data-theme="light"] .lp-miroir-pont em {
  color: var(--text-strong);
  filter: none;
}

@media (max-width: 720px) {
  .lp-miroir { padding: 60px 24px 80px; }
  .lp-miroir-list li { font-size: 15px; }
  .lp-miroir-pont { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   DÉFINITION · Bloc "Qu'est-ce que Hyvirtus" (citable · GEO/AEO 2026-06-19)
   Réponse auto-portante pour les moteurs de recherche IA. Réutilise
   les primitives de section (.lp-section-eyebrow / .lp-section-h2).
   ═══════════════════════════════════════════════════════════════ */
.lp-definition {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 76px 28px 0;
  text-align: center;
}
.lp-definition-text {
  max-width: 640px;
  margin: 18px auto 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mid);
}
.lp-definition-text:first-of-type { margin-top: 24px; }
@media (max-width: 720px) {
  .lp-definition { padding: 56px 22px 0; }
  .lp-definition-text { font-size: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 · Ce qu'il n'est pas / Ce qu'il est (2 colonnes miroir)
   Layout : eyebrow shared → 2 colonnes parallèles (h2 + sub + liste)
   → closing shared. Hairline champagne verticale entre les colonnes.
   ═══════════════════════════════════════════════════════════════ */
.lp-pas {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

/* ─── Grille 2 colonnes parallèles, hairline champagne au milieu */
.lp-pas-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  max-width: 960px;
  margin: 36px auto 0;
}
/* Hairline champagne verticale entre les 2 colonnes (signature design) */
.lp-pas-grid::before {
  content: "";
  position: absolute;
  top: 24px;
  bottom: 24px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--champagne-soft), transparent);
  opacity: 0.55;
  pointer-events: none;
}

/* ─── Colonne : tout centré (H2, sub, liste).
   La liste utilise max-width + margin auto pour être centrée en bloc
   (les items restent left-aligned dans le bloc grâce au flex layout). */
.lp-pas-col {
  text-align: center;
}

/* H2 de colonne : plus petit qu'un lp-section-h2 pour cohabiter en duo */
.lp-pas-col-title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.003em;
  color: var(--text-strong);
}
.lp-pas-col-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--champagne);
  filter: drop-shadow(0 0 8px var(--champagne-glow));
}
[data-theme="light"] .lp-pas-col-title em {
  color: var(--text-strong);
  filter: none;
}

/* Sub de colonne : italique sobre, contenue + centrée en bloc */
.lp-pas-col-sub {
  margin: 0 auto 22px;
  max-width: 320px;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-mid);
}

/* ─── Liste : centrée en bloc dans sa colonne (max-width + margin auto)
   Les items eux-mêmes restent left-anchored grâce au flex layout
   (bullet à gauche, texte juste après) · c'est le bloc qui est centré */
.lp-pas-list {
  list-style: none;
  max-width: 360px;
  margin: 0 auto;
  padding: 0;
}
.lp-pas-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-divider);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 14px;
}
.lp-pas-list li:last-child { border-bottom: 0; }
.lp-pas-list li::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--text-mute);
  flex: 0 0 18px;
}

/* Variante positive : bullet champagne au lieu de mute (différenciation
   visuelle entre ce qui est et ce qui n'est pas) */
.lp-pas-list--positive li::before {
  background: var(--champagne);
}

/* ─── Phrase de clôture en italique (traverse les 2 colonnes) */
.lp-pas-clos {
  text-align: center;
  margin: 56px auto 0;
  max-width: 520px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-mid);
}
.lp-pas-clos em {
  font-style: italic;
  color: var(--champagne);
  filter: drop-shadow(0 0 6px var(--champagne-glow));
}
[data-theme="light"] .lp-pas-clos em {
  color: var(--text-strong);
  filter: none;
}

/* ─── Responsive : stack vertical, la hairline verticale disparaît */
@media (max-width: 720px) {
  .lp-pas { padding: 60px 24px 80px; }
  .lp-pas-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 28px;
  }
  .lp-pas-grid::before {
    display: none;
  }
  .lp-pas-col-title { font-size: 22px; }
  .lp-pas-col-sub { font-size: 14.5px; }
  .lp-pas-clos { font-size: 16px; margin-top: 40px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 4 · Le cadre de lecture (les 6 piliers)
   ═══════════════════════════════════════════════════════════════ */
.lp-piliers {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

.lp-piliers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px 56px;
  max-width: 880px;
  margin: 0 auto;
}

.lp-pilier {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-pilier-name {
  font-family: var(--font-heading);
  font-weight: 850;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--champagne);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lp-pilier-name::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a36a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23c9a36a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="light"] .lp-pilier-name::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a36a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23c9a36a'/%3E%3C/svg%3E");
}

.lp-pilier-desc {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 15.5px;
  color: var(--text-mid);
  line-height: 1.55;
  padding-left: 22px;
}

@media (max-width: 720px) {
  .lp-piliers-grid { grid-template-columns: 1fr; gap: 26px; }
  .lp-piliers { padding: 60px 24px 80px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 5.5 · Ils l'ont pratiqué (retours accès anticipé)
   Trois cartes citation, déclinaison des .tp-testi-* de la page tarif.
   Mode clair forcé sur la landing : pas d'override dark.
   ═══════════════════════════════════════════════════════════════ */
.lp-testi {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
  text-align: center;
}

.lp-testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 34px auto 0;
}

.lp-testi-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  border: 1px solid rgba(26, 34, 56, 0.10);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 4px 14px rgba(15, 20, 36, 0.06);
  text-align: left;
  margin: 0;
}

.lp-testi-card blockquote {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.62;
  color: var(--text-main);
}

.lp-testi-card figcaption {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--champagne);
}

.lp-testi-note {
  margin-top: 22px;
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .lp-testi { padding: 60px 24px 80px; }
  .lp-testi-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 3 (nouvelle place) · Ce que ça apporte (4 dimensions de lecture)
   Grid 2×2 de cards visuelles : patterns / piliers / bascules / trajectoire
   Répond à : "Qu'est-ce que tout ça va réellement m'apporter ?"
   ═══════════════════════════════════════════════════════════════ */
.lp-apporte {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

/* ─── Sous le sub on resserre l'espacement pour rapprocher la meta période */
.lp-apporte .lp-section-sub {
  margin-bottom: 14px;
}

/* ─── Meta période : situe les chiffres "12×, 8×, 7×" sur leur fenêtre
   temporelle (sans cette ligne, le visiteur ne sait pas si c'est par
   semaine, par mois, ou par trimestre) */
.lp-apporte-meta {
  text-align: center;
  margin: 0 auto 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ─── Grille 2×2 (1 colonne sur mobile) */
.lp-apporte-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

/* ─── Card : panneau navy + hairline champagne en haut au hover */
.lp-apporte-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 28px;
  border-radius: var(--radius-lg);
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
/* Fine ligne champagne en haut (signature design system) */
.lp-apporte-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--champagne-soft), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.lp-apporte-card:hover {
  border-color: var(--champagne-soft);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .lp-apporte-card:hover {
  box-shadow: var(--shadow-card);
}

/* ─── Head card : num mono + titre */
.lp-apporte-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.lp-apporte-card-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--champagne);
  flex: 0 0 auto;
}
.lp-apporte-card-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.002em;
  color: var(--text-strong);
}

/* ─── Description italique sobre */
.lp-apporte-card-desc {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-mid);
}

/* ─── Zone visuelle (chips/pillars/portes/heatmap selon la card)
   flex:1 + justify-content:center → quand le grid stretch une card
   plus haute (ex : card 4 heatmap > card 3 portes), le contenu se
   centre verticalement au lieu de coller en haut avec un trou en bas */
.lp-apporte-card-visual {
  margin-top: 8px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  /* space-evenly : quand la carte est étirée par sa voisine de rangée
     (ex. carte 03 face à la heatmap), les rangées se répartissent au
     lieu de se tasser au centre avec un grand vide au-dessus */
  justify-content: space-evenly;
  gap: 8px;
}

/* ─── Row générique : label gauche + count/state droite, hairline en bas */
.lp-apporte-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-divider);
}
.lp-apporte-row:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}
.lp-apporte-row:first-child {
  padding-top: 2px;
}

/* ─── Pattern chip champagne (card 1) */
.lp-apporte-chip-pattern {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--champagne-soft);
  color: var(--champagne);
  background: rgba(201, 163, 106, 0.08);
  font-weight: 700;
  white-space: nowrap;
}
[data-theme="light"] .lp-apporte-chip-pattern {
  color: var(--champagne);
  border-color: rgba(201, 163, 106, 0.42);
  background: rgba(201, 163, 106, 0.08);
}

/* ─── Pillar name (card 2) */
.lp-apporte-pillar {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-main);
}

/* ─── Porte name (card 3) */
.lp-apporte-porte {
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--text-main);
}

/* ─── State badge (card 2) : held / tension · couleurs canoniques produit */
.lp-apporte-state {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1px solid;
  font-weight: 700;
  flex: 0 0 auto;
}
.lp-apporte-state.is-held {
  color: rgba(34, 197, 94, 0.95);
  border-color: rgba(34, 197, 94, 0.42);
  background: rgba(34, 197, 94, 0.10);
}
.lp-apporte-state.is-tension {
  color: rgba(245, 158, 11, 0.95);
  border-color: rgba(245, 158, 11, 0.42);
  background: rgba(245, 158, 11, 0.10);
}
[data-theme="light"] .lp-apporte-state.is-held {
  color: #1f8a4b;
  border-color: rgba(31, 138, 75, 0.42);
  background: rgba(31, 138, 75, 0.10);
}
[data-theme="light"] .lp-apporte-state.is-tension {
  color: #b07b1a;
  border-color: rgba(176, 123, 26, 0.42);
  background: rgba(176, 123, 26, 0.10);
}

/* ─── Count champagne (card 1 + 3) : chiffre fort + unité ×  discrète */
.lp-apporte-count {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--champagne);
  letter-spacing: 0.04em;
  flex: 0 0 auto;
  line-height: 1;
}
.lp-apporte-count .unit {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-mute);
  margin-left: 2px;
}

/* ─── Payoff de transition : conclut sur les 4 dimensions et pivote
   vers "Ce que ce n'est pas" via "Lues, jamais notées" (rappel : pas
   de note, pas de jugement, doctrine Hyvirtus) */
.lp-apporte-payoff {
  text-align: center;
  margin: 56px auto 0;
  max-width: 560px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-mid);
}
.lp-apporte-payoff em {
  display: inline-block;
  margin-top: 6px;
  font-style: italic;
  color: var(--champagne);
  filter: drop-shadow(0 0 6px var(--champagne-glow));
}
[data-theme="light"] .lp-apporte-payoff em {
  color: var(--text-strong);
  filter: none;
}
@media (max-width: 720px) {
  .lp-apporte-payoff { margin-top: 44px; font-size: 17px; }
}

/* ─── Card 4 heatmap : ajustements pour entrer proprement dans la card */
.lp-apporte-card--heatmap .lp-apporte-card-visual {
  gap: 6px;
}
.lp-apporte-card--heatmap .lp-heatmap {
  margin: 4px 0 0;
  gap: 3px;
}
.lp-apporte-card--heatmap .lp-heatmap-label {
  font-size: 9px;
  padding-right: 6px;
}
.lp-apporte-card--heatmap .lp-heatmap-legend {
  margin-top: 8px;
  margin-bottom: 0;
}

/* ─── Responsive : tablette + mobile (1 colonne) */
@media (max-width: 960px) {
  .lp-apporte-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 100%;
  }
  .lp-apporte-card {
    padding: 24px 24px;
  }
  /* Quand la card 4 passe en pleine largeur, on cap la heatmap pour
     éviter que les cellules ne deviennent énormes (~70px) et perdent
     leur densité · une heatmap doit rester compacte */
  .lp-apporte-card--heatmap .lp-heatmap,
  .lp-apporte-card--heatmap .lp-heatmap-legend {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 720px) {
  .lp-apporte {
    padding: 60px 24px 80px;
  }
  .lp-apporte-card-title {
    font-size: 17px;
  }
  .lp-apporte-card-desc {
    font-size: 14px;
  }
  .lp-apporte-chip-pattern {
    font-size: 10.5px;
    padding: 3px 9px;
  }
  .lp-apporte-count {
    font-size: 14px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HEATMAP (réutilisée dans la card 4 de lp-apporte)
   ═══════════════════════════════════════════════════════════════ */
.lp-heatmap {
  display: grid;
  grid-template-columns: auto repeat(12, 1fr);
  gap: 4px;
  align-items: center;
  margin: 20px 0 14px;
  width: 100%;
}
.lp-heatmap-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding-right: 8px;
  line-height: 1;
}
.lp-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--border-soft);
}
.lp-heatmap-cell.l1 { background: rgba(201, 163, 106, 0.22); }
.lp-heatmap-cell.l2 { background: rgba(201, 163, 106, 0.45); }
.lp-heatmap-cell.l3 { background: rgba(201, 163, 106, 0.70); }
.lp-heatmap-cell.l4 { background: var(--champagne); }

/* Légende intensité (faible → fort) */
.lp-heatmap-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.lp-heatmap-legend-cells {
  display: flex;
  gap: 3px;
}
.lp-heatmap-legend-cells .cell {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: var(--border-soft);
}
.lp-heatmap-legend-cells .cell.l1 { background: rgba(201, 163, 106, 0.22); }
.lp-heatmap-legend-cells .cell.l2 { background: rgba(201, 163, 106, 0.45); }
.lp-heatmap-legend-cells .cell.l3 { background: rgba(201, 163, 106, 0.70); }
.lp-heatmap-legend-cells .cell.l4 { background: var(--champagne); }

/* Responsive heatmap (réutilisée dans la card 4 de lp-apporte) */
@media (max-width: 720px) {
  .lp-heatmap { gap: 3px; }
  .lp-heatmap-label { font-size: 9px; padding-right: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 7 · Tarif
   ═══════════════════════════════════════════════════════════════ */
.lp-tarif {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
  text-align: center;
}

/* Toggle Mensuel / Annuel · pill qui glisse */
.lp-tarif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--bg-inner);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 4px;
  margin: 0 auto 36px;
}
/* Pill sélecteur qui glisse en transform */
.lp-tarif-toggle::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(180deg, rgba(201, 163, 106, 0.22), rgba(201, 163, 106, 0.10));
  border: 1px solid rgba(201, 163, 106, 0.48);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 12px rgba(201, 163, 106, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 380ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}
.lp-tarif-toggle.is-yearly::before {
  transform: translateX(100%);
}
[data-theme="light"] .lp-tarif-toggle::before {
  background: rgba(201, 163, 106, 0.10);
  border-color: rgba(201, 163, 106, 0.40);
  box-shadow: 0 2px 8px rgba(201, 163, 106, 0.16);
}

.lp-tarif-toggle button {
  flex: 1;
  min-width: 150px;
  padding: 10px 22px;
  background: transparent;
  border: 0;
  color: var(--text-mid);
  font-family: var(--font-heading);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  border-radius: var(--radius-pill);
  transition: color 280ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.lp-tarif-toggle button:hover:not(.is-active) {
  color: var(--text-strong);
}
.lp-tarif-toggle button.is-active {
  color: var(--champagne);
  font-weight: 600;
}
[data-theme="light"] .lp-tarif-toggle button.is-active {
  color: #8d6f3a;
}

.lp-tarif-toggle .save-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--champagne);
  background: rgba(201, 163, 106, 0.12);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(201, 163, 106, 0.32);
  font-weight: 600;
  transition: background 280ms ease, border-color 280ms ease, color 280ms ease;
}
.lp-tarif-toggle button.is-active .save-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(201, 163, 106, 0.55);
  color: var(--champagne);
}
[data-theme="light"] .lp-tarif-toggle .save-chip {
  color: #8d6f3a;
  background: rgba(201, 163, 106, 0.10);
  border-color: rgba(201, 163, 106, 0.32);
}
[data-theme="light"] .lp-tarif-toggle button.is-active .save-chip {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(201, 163, 106, 0.55);
  color: #8d6f3a;
}

/* Card tarif (centrée, large) */
.lp-tarif-card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 40px 36px 32px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.lp-tarif-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  z-index: 3;
}
[data-theme="dark"] .lp-tarif-card::after {
  content: "";
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 240px;
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.lp-tarif-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 22px;
  color: var(--text-strong);
  letter-spacing: 0.004em;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}

.lp-tarif-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
.lp-tarif-price .number {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  transition: opacity 200ms ease;
}
.lp-tarif-price .currency {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 28px;
  color: var(--text-strong);
  letter-spacing: -0.01em;
}

.lp-tarif-period {
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--text-mid);
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
}

.lp-tarif-cadence {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--champagne);
  margin-bottom: 6px;
  position: relative;
  z-index: 2;
}
[data-theme="light"] .lp-tarif-cadence {
  color: #8d6f3a;
}

.lp-tarif-billing {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
  min-height: 14px;
  transition: opacity 200ms ease;
}

.lp-tarif-divider {
  border: 0;
  height: 1px;
  background: var(--border-divider);
  margin: 0 auto 22px;
  width: 60%;
}

.lp-tarif-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  position: relative;
  z-index: 2;
}
.lp-tarif-features li {
  padding: 9px 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 12px;
}
.lp-tarif-features li::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a36a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23c9a36a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
[data-theme="light"] .lp-tarif-features li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a36a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='1' fill='%23c9a36a'/%3E%3C/svg%3E");
}

.lp-tarif-cta {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 280px;
  position: relative;
  z-index: 2;
}

.lp-tarif-note {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13px;
  color: var(--text-mid);
  margin-top: 18px;
  position: relative;
  z-index: 2;
}

@media (max-width: 720px) {
  .lp-tarif { padding: 60px 24px 80px; }
  .lp-tarif-card { padding: 30px 24px 26px; }
  .lp-tarif-price .number { font-size: 48px; }
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 8 · FAQ (accordion)
   ═══════════════════════════════════════════════════════════════ */
.lp-faq {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 80px 28px 100px;
}

.lp-faq-list {
  max-width: 720px;
  margin: 0 auto;
}

.lp-faq-item {
  border-top: 1px solid var(--border-divider);
}
.lp-faq-item:last-child {
  border-bottom: 1px solid var(--border-divider);
}

.lp-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text-strong);
  transition: color 220ms ease;
}
.lp-faq-question:hover {
  color: var(--champagne);
}
[data-theme="light"] .lp-faq-question:hover {
  color: #8d6f3a;
}

.lp-faq-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--text-mute);
  transition: transform 360ms cubic-bezier(0.4, 0, 0.2, 1), color 220ms ease;
}
.lp-faq-item.is-open .lp-faq-icon {
  transform: rotate(45deg);
  color: var(--champagne);
}
[data-theme="light"] .lp-faq-item.is-open .lp-faq-icon {
  color: #8d6f3a;
}

.lp-faq-answer {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 380ms;
}
.lp-faq-item.is-open .lp-faq-answer {
  max-height: 1200px;
  visibility: visible;
  transition: max-height 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

.lp-faq-answer-inner {
  padding: 0 36px 24px 4px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
}
.lp-faq-answer-inner p + p {
  margin-top: 0.7rem;
}

@media (max-width: 720px) {
  .lp-faq { padding: 60px 24px 80px; }
  .lp-faq-question { font-size: 15.5px; padding: 18px 2px; }
  .lp-faq-answer-inner { padding: 0 4px 20px 2px; font-size: 14.5px; }
}

/* ─── CTA "voir toutes les questions" en bas de section ───────── */
.lp-faq-more {
  max-width: 720px;
  margin: 36px auto 0;
  text-align: center;
}
.lp-faq-more-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 220ms ease, border-color 220ms ease, gap 220ms ease;
}
.lp-faq-more-link svg {
  width: 16px;
  height: 16px;
  transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
.lp-faq-more-link:hover {
  color: var(--champagne);
  border-bottom-color: var(--champagne);
  gap: 14px;
}
.lp-faq-more-link:hover svg {
  transform: translateX(3px);
}
[data-theme="light"] .lp-faq-more-link:hover {
  color: #8d6f3a;
  border-bottom-color: #8d6f3a;
}
.lp-faq-more-link:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   SECTION 9 · Manifeste teaser + CTA final
   ═══════════════════════════════════════════════════════════════ */
.lp-final {
  max-width: var(--landing-max);
  margin: 0 auto;
  padding: 100px 28px 80px;
  text-align: center;
  position: relative;
}
/* Halo gold diffus derrière (dark only) */
[data-theme="dark"] .lp-final::before {
  content: "";
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 320px;
  background: radial-gradient(closest-side, var(--champagne-glow), transparent 70%);
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}
.lp-final > * { position: relative; z-index: 1; }

.lp-manifest-quote {
  font-family: "EB Garamond", Georgia, serif;
  font-style: italic;
  font-size: 28px;
  line-height: 1.55;
  color: var(--text-strong);
  max-width: 640px;
  margin: 32px auto 28px;
  letter-spacing: 0.004em;
}
.lp-manifest-quote em {
  color: var(--champagne);
  font-style: italic;
  filter: drop-shadow(0 0 6px var(--champagne-glow));
}
[data-theme="light"] .lp-manifest-quote em {
  color: var(--text-strong);
  filter: none;
}

.lp-manifest-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--champagne);
  margin-bottom: 60px;
  transition: gap 200ms var(--ease-out), color 200ms ease;
}
.lp-manifest-link:hover {
  gap: 12px;
}
[data-theme="light"] .lp-manifest-link { color: #8d6f3a; }

.lp-final-cta {
  padding: 14px 36px;
  font-size: 14.5px;
}
.lp-final-note {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 13px;
  color: var(--text-mid);
  margin-top: 18px;
}

@media (max-width: 720px) {
  .lp-final { padding: 80px 24px 60px; }
  .lp-manifest-quote { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════
   POLISH MOBILE GLOBAL · corrections sur l'ensemble du landing.
   Ne touche pas au layout desktop, n'écrase pas les blocs ci-dessus
   sauf pour aligner ce qui causait du jank sur petit écran.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* Scroll anchor : éviter que les sections cibles passent sous la
     topbar sticky quand on arrive via un lien de menu (#tarif, #faq…) */
  .lp-hero,
  .lp-miroir,
  .lp-temps,
  .lp-apporte,
  .lp-pas,
  .lp-piliers,
  .lp-tarif,
  .lp-faq,
  .lp-final {
    scroll-margin-top: calc(var(--topbar-h) + 12px);
  }

  /* Hero : on respire moins pour ne pas pousser le H1 trop bas. */
  .lp-hero { padding: 56px 22px 56px; }
  .lp-hero-eyebrow { margin-bottom: 14px; font-size: 10.5px; }
  .lp-hero h1 { font-size: clamp(28px, 8.4vw, 36px); line-height: 1.15; }
  .lp-hero-sub { font-size: 15.5px; line-height: 1.7; margin-bottom: 28px; }
  .lp-hero-sub .lp-hero-sub-line { margin-bottom: 2px; }
  .lp-hero-sub em { margin-top: 14px; }
  .lp-hero-ctas { flex-direction: column; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto; }
  .lp-hero-ctas .lp-cta,
  .lp-hero-ctas .lp-cta-secondary { width: 100%; justify-content: center; }

  /* Sections : padding plus serré et homogène */
  .lp-miroir { padding: 56px 22px 64px; }
  .lp-temps { padding: 56px 18px 64px; }
  .lp-apporte { padding: 56px 22px 64px; }
  .lp-pas { padding: 56px 22px 64px; }
  .lp-piliers { padding: 56px 22px 64px; }
  .lp-tarif { padding: 56px 22px 64px; }
  .lp-faq { padding: 56px 22px 64px; }
  .lp-final { padding: 56px 22px 56px; }

  /* H2 sections plus compact */
  .lp-section-h2 { font-size: clamp(24px, 6vw, 30px); margin-bottom: 12px; }
  .lp-section-eyebrow { font-size: 12px; margin-bottom: 14px; }

  /* Mockup Rituel : input intention coupe avec "..." si trop long */
  .rituel-mock-input {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Heatmap : reduce label width pour laisser plus de place aux cellules */
  .lp-apporte-card--heatmap .lp-heatmap {
    grid-template-columns: 22px repeat(12, 1fr);
  }
  .lp-apporte-card--heatmap .lp-heatmap-label {
    font-size: 8px;
    padding-right: 4px;
  }
  .lp-apporte-card--heatmap .lp-heatmap-cell {
    border-radius: 1.5px;
  }
}

/* Petits écrans très étroits (≤ 380px) : on serre encore un cran */
@media (max-width: 380px) {
  .lp-hero { padding: 48px 18px 48px; }
  .lp-hero h1 { font-size: clamp(26px, 8vw, 32px); }
  .lp-hero-sub { font-size: 15px; }

  .lp-miroir,
  .lp-apporte,
  .lp-pas,
  .lp-piliers,
  .lp-tarif,
  .lp-faq,
  .lp-final { padding-left: 18px; padding-right: 18px; }

  .lp-temps { padding-left: 14px; padding-right: 14px; }
}


/* Dots de navigation (carrousels mobile) · cachés desktop par défaut */
.lp-apporte-dots,
.lp-pas-dots,
.dlive-dots {
  display: none;
}

@media (max-width: 720px) {
  /* ═══════════════════════════════════════════════════════════════
     CARROUSELS MOBILES · propres et épurés, sans cadre téléphone
     ───────────────────────────────────────────────────────────────
     Sections concernées :
       1) "Ce que ça apporte"        → 4 cards
       2) "Pour être clair"          → 2 colonnes (n'est pas / est)
       3) "Dojo Live" (trois temps)  → 2 panneaux (Mind Trace / Trace)
       4) "Tarif"                    → 1 card centrée (pas un carrousel)
     Desktop : strictement inchangé (cf. règles desktop plus haut).
     ═══════════════════════════════════════════════════════════════ */

  /* ─── Dots partagés : style commun pour les 3 carrousels ─── */
  .lp-apporte-dots,
  .lp-pas-dots,
  .dlive-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 0 0;
  }
  .lp-apporte-dots button,
  .lp-pas-dots button,
  .dlive-dots button {
    appearance: none;
    border: 0;
    padding: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 20, 36, 0.18);
    cursor: pointer;
    transition: background 240ms ease, width 240ms ease, border-radius 240ms ease;
    flex: 0 0 auto;
  }
  .lp-apporte-dots button.is-active,
  .lp-pas-dots button.is-active,
  .dlive-dots button.is-active {
    background: #c9a36a;
    width: 24px;
    border-radius: 4px;
  }
  .lp-apporte-dots button:hover,
  .lp-pas-dots button:hover,
  .dlive-dots button:hover {
    background: rgba(201, 163, 106, 0.5);
  }
  .lp-apporte-dots button.is-active:hover,
  .lp-pas-dots button.is-active:hover,
  .dlive-dots button.is-active:hover {
    background: #c9a36a;
  }

  /* ─── Carrousel "Ce que ça apporte" ─── */
  .lp-apporte-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 18px;
    scroll-padding-left: 20px;
    max-width: 100%;
  }
  .lp-apporte-grid::-webkit-scrollbar { display: none; }
  .lp-apporte-card {
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    padding: 22px 22px;
    border-radius: 16px;
  }

  /* ─── Carrousel "Pour être clair" ─── */
  .lp-pas-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    padding: 4px 20px 18px;
    scroll-padding-left: 20px;
    margin: 28px -24px 0;
    max-width: none;
  }
  .lp-pas-grid::-webkit-scrollbar { display: none; }
  /* Cacher la hairline verticale (séparateur 2 colonnes desktop) */
  .lp-pas-grid::before {
    display: none;
  }
  .lp-pas-col {
    flex: 0 0 calc(100% - 40px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
    padding: 26px 22px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(15, 20, 36, 0.10);
    box-shadow: 0 4px 14px rgba(15, 20, 36, 0.06);
  }

  /* ─── Carrousel Dojo Live mock (Mind Trace / Trace en direct) ─── */
  .lp-temps-stage .dlive-mock-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    min-height: 0;
  }
  .lp-temps-stage .dlive-mock-grid::-webkit-scrollbar { display: none; }
  .lp-temps-stage .dlive-left,
  .lp-temps-stage .dlive-right {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-width: 0;
  }
  /* Pas de séparateur visible entre les 2 cards quand elles sont en
     carrousel (chaque slide doit se lire comme une carte autonome) */
  .lp-temps-stage .dlive-right {
    border-left: 0;
    border-top: 0;
  }
  /* Dots placés sous le mock, encadrés par .dlive-mock (carte parente) */
  .dlive-mock .dlive-dots {
    padding: 12px 0 14px;
  }
  /* En carrousel mobile, le panneau Mind Trace a toute la largeur :
     on affiche les 6 états intérieurs et les 8 actions au complet.
     (override de la règle de compaction définie dans how-it-works.css) */
  .lp-temps-stage .dlive-mock-grid .dlive-tile-grid > .dlive-tile:nth-of-type(n+5) {
    display: block;
  }
  /* En carrousel mobile, la Trace en direct a toute la largeur :
     on affiche 4 items (Oracle + Décision + 2 états intérieurs) au lieu
     de 2 (override de la règle de compaction de how-it-works.css). */
  .lp-temps-stage .dlive-mock-grid .dlive-feed > article:nth-of-type(3),
  .lp-temps-stage .dlive-mock-grid .dlive-feed > article:nth-of-type(4) {
    display: block;
  }

  /* ─── Carte "Tarif" sur mobile : propre, centrée, épurée ─── */
  .lp-tarif-card {
    max-width: 360px;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HARMONISATION MOBILE · typographie + spacing + reveal scroll
   ───────────────────────────────────────────────────────────────
   Objectifs (cible : 390×844, iPhone 14/15 Pro) :
   1) Titres et sous-titres aérés, wrap équilibré (text-wrap: balance)
      → on neutralise les <br> forcés dans les subs, on laisse le
      navigateur équilibrer les lignes pour éviter les orphelins.
   2) Padding uniforme entre toutes les grosses sections.
   3) Fade-in au scroll (opacity + translateY 16px → 0), 500ms ease-out.
      Mobile only. Respect strict de prefers-reduced-motion.
   Desktop : strictement inchangé (rules dans @media max-width: 720px).
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* ─── 1) TYPO · breaks UNIQUEMENT après un point (pas de wrap mid-phrase)
     Stratégie :
     - Em qui contient la 2ème phrase entière → display: block (saut à la ligne)
     - Br existants dans les sous-titres → restaurés (rendus visibles)
     - Br.mb-only ajoutés dans index.html après les points sur sous-titres
       multi-phrases qui n'avaient pas de break → visibles uniquement en mobile */
  .lp-section-h2,
  .lp-temps-h2,
  .lp-hero h1,
  .lp-pas-col-title {
    letter-spacing: -0.005em;
  }
  .lp-section-sub,
  .lp-hero-sub,
  .lp-temps-sub,
  .lp-pas-col-sub {
    text-wrap: pretty;
  }
  /* Em comme 2ème phrase complète → bloc (saut à la ligne au point qui précède) */
  .lp-hero h1 em,
  .lp-miroir .lp-section-h2 em,
  .lp-temps-h2 em,
  .lp-apporte .lp-section-h2 em,
  .lp-piliers .lp-section-h2 em,
  .lp-tarif .lp-section-h2 em,
  .lp-faq .lp-section-h2 em {
    display: block;
  }
  /* Exclusions : em est un suffixe, pas une phrase complète. Reste inline. */
  .lp-pas-col-title em,
  .lp-final .lp-section-h2 em {
    display: inline;
  }
  /* Br mobile-only (injecté dans index.html sur les subs multi-phrases sans break) */
  br.mb-only {
    display: block;
  }

  /* ─── 2) ESPACEMENT · padding latéral + vertical uniformes ─── */
  /* Override des règles existantes pour aligner trois-temps (18px)
     sur le standard 24px latéral. Top 72px, bottom 64px (hero 80/56). */
  .lp-hero        { padding: 80px 24px 56px; }
  .lp-miroir      { padding: 72px 24px 64px; }
  .lp-temps       { padding: 72px 24px 64px; }
  .lp-apporte     { padding: 72px 24px 64px; }
  .lp-pas         { padding: 72px 24px 64px; }
  .lp-piliers     { padding: 72px 24px 64px; }
  .lp-tarif       { padding: 72px 24px 64px; }
  .lp-faq         { padding: 72px 24px 64px; }
  .lp-final       { padding: 72px 24px 64px; }

  /* H2 : taille calibrée pour que les phrases tiennent sur 1 ligne en 390px.
     Phrase la plus longue ciblée : "Ce qui devient lisible chez toi." (32 chars).
     Sur 342px content (24px padding) à 19px Montserrat semi-bold → ~33 chars/ligne. */
  .lp-section-h2,
  .lp-temps-h2 {
    font-size: clamp(19px, 5vw, 24px);
    line-height: 1.22;
    margin-bottom: 14px;
  }
  /* Eyebrow : poids et taille stabilisés (kerning meilleur en mono) */
  .lp-section-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.16em;
    margin-bottom: 16px;
  }
  /* Sub : line-height confortable, marge bottom calibrée */
  .lp-section-sub {
    line-height: 1.55;
    margin-bottom: 28px;
  }

  /* Hero H1 : taille calibrée pour "Tu sais ce que tu devrais faire." (32 chars)
     sur 342px content. ~21px max pour tenir sur 1 ligne. */
  .lp-hero h1 {
    font-size: clamp(21px, 5.8vw, 28px);
    line-height: 1.22;
    letter-spacing: -0.01em;
  }

  /* H2 colonne "Pour être clair" : aligné sur le scale général */
  .lp-pas-col-title {
    font-size: 22px;
    line-height: 1.18;
  }
}

/* ─── FADE-IN AU SCROLL · état initial des éléments .reveal ───────
   Tous viewports (desktop + mobile) sur la landing principale.
   reveal-scroll.js n'ajoute .reveal qu'aux éléments sous le pli, puis
   .is-visible quand ils entrent dans le viewport. Réservé à index.html
   (seul à charger landing.css ET reveal-scroll.js). */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Révélation en cascade · listes et grilles ──────────────────
   Quand le conteneur porte .reveal, ce sont ses enfants qui fondent
   l'un après l'autre (70 ms d'écart) au lieu du bloc entier d'un coup.
   Sous prefers-reduced-motion, reveal-scroll.js n'ajoute jamais .reveal,
   ces règles ne s'appliquent donc pas. */
.lp-miroir-list.reveal,
.lp-apporte-grid.reveal,
.lp-piliers-grid.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.lp-miroir-list.reveal > li,
.lp-apporte-grid.reveal > .lp-apporte-card,
.lp-piliers-grid.reveal > .lp-pilier {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
  will-change: opacity, transform;
}
.lp-miroir-list.reveal.is-visible > li,
.lp-apporte-grid.reveal.is-visible > .lp-apporte-card,
.lp-piliers-grid.reveal.is-visible > .lp-pilier {
  opacity: 1;
  transform: translateY(0);
}
.lp-miroir-list.reveal > :nth-child(2),
.lp-apporte-grid.reveal > :nth-child(2),
.lp-piliers-grid.reveal > :nth-child(2) { transition-delay: 70ms; }
.lp-miroir-list.reveal > :nth-child(3),
.lp-apporte-grid.reveal > :nth-child(3),
.lp-piliers-grid.reveal > :nth-child(3) { transition-delay: 140ms; }
.lp-miroir-list.reveal > :nth-child(4),
.lp-apporte-grid.reveal > :nth-child(4),
.lp-piliers-grid.reveal > :nth-child(4) { transition-delay: 210ms; }
.lp-miroir-list.reveal > :nth-child(5),
.lp-piliers-grid.reveal > :nth-child(5) { transition-delay: 280ms; }
.lp-miroir-list.reveal > :nth-child(6),
.lp-piliers-grid.reveal > :nth-child(6) { transition-delay: 350ms; }

/* Petits écrans très étroits (≤ 380px) : on tient encore avec
   le scale ; le padding latéral baisse à 18px pour gagner du contenu */
@media (max-width: 380px) {
  .lp-hero        { padding: 64px 18px 48px; }
  .lp-miroir,
  .lp-temps,
  .lp-apporte,
  .lp-pas,
  .lp-piliers,
  .lp-tarif,
  .lp-faq,
  .lp-final       { padding-left: 18px; padding-right: 18px; }
}

/* Accessibility : reduced-motion = pas d'animation, pas d'offset.
   Couvre tous les viewports (desktop + mobile). */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Br.mb-only : visible uniquement en mobile (activé dans le bloc 720px ci-dessus).
   Cachés sur desktop pour préserver la mise en forme native sur écran large. */
@media (min-width: 721px) {
  br.mb-only {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   AUDIT UI/UX PRO MAX · correctifs MOBILE UNIQUEMENT
   ───────────────────────────────────────────────────────────────
   Fixes globaux (burger, drawer, footer, brand) déplacés vers
   topbar.css et footer.css pour s'appliquer aussi sur les pages
   produits (qui ne chargent pas landing.css).
   Ne reste ici que ce qui est spécifique à la landing principale.
   Desktop strictement préservé : tout est scoped @media max-width: 720px.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  /* C4 ─ Tarif toggle Mensuel/Annuel : min-height 44 (landing-only) */
  .lp-tarif-toggle button {
    min-height: 44px;
  }

  /* H5 ─ Hero eyebrow harmonisé sur le scale des autres eyebrows */
  .lp-hero-eyebrow {
    font-size: 11.5px;
    letter-spacing: 0.16em;
  }
}

/* C1 ─ Débordement horizontal à 320px :
   - .lp-pas-grid margin -24 alors que .lp-pas a padding 18 en ≤380 (déborde de 12px)
   - .lp-tarif-toggle button min-width 150 → 2×150+padding = 308 > 284 dispo (déborde de 26px) */
@media (max-width: 380px) {
  .lp-pas-grid {
    margin-left: -18px;
    margin-right: -18px;
  }
  .lp-tarif-toggle button {
    min-width: 0;
    padding-left: 14px;
    padding-right: 14px;
  }
  .lp-tarif-toggle {
    width: 100%;
    max-width: 280px;
  }
}


/* ─── A11y : zone tactile élargie des dots de carrousel (visuel 8px inchangé, hit ~28px) ─── */
.lp-apporte-dots button,
.lp-pas-dots button,
.dlive-dots button {
  position: relative;
}
.lp-apporte-dots button::after,
.lp-pas-dots button::after,
.dlive-dots button::after {
  content: "";
  position: absolute;
  inset: -10px;
}

/* ─── Tap targets : zone tactile élargie des dots de carrousel (mobile).
   Le dot visuel reste 8px ; la zone cliquable passe à 32x44 (overlap
   latéral limité pour ne pas voler le tap du dot voisin). ─── */
@media (max-width: 720px) {
  .lp-apporte-dots button,
  .lp-pas-dots button,
  .dlive-dots button {
    position: relative;
  }
  .lp-apporte-dots button::after,
  .lp-pas-dots button::after,
  .dlive-dots button::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 32px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}