/* ====================================================================
   LANGAGE MARKETING (préfixe .lp-*) — SSOT des pages vitrine.
   Utilisé par home.html (/) ET comment_ca_marche.html (/comment-ca-marche),
   qui partagent le même format (hero sombre arrondi, sections, étapes, CTA).
   100% SSOT : toutes les couleurs via var(--nc-*), espacements via
   var(--nc-space-*). Aucune couleur hardcodée. Les tailles de titres
   "display" (hero/sections/étapes) utilisent les tokens --nc-display-sm/md/lg
   (définis dans _tokens.html) — échelle dédiée aux titres marketing, > échelle app.
   Composants atomiques (.nc-card, .nc-btn, .nc-input, .nc-note) réutilisés
   tels quels ; ce fichier ne fait que la mise en page vitrine.
   ==================================================================== */

/* La landing vit dans <main class="main"> (max-width 1440, padding 40px).
   Relief réinjecté 2026-06-07 (cf 09_brief/2026-06-07_BRIEF_unification_landing_v1v2) :
   hero gradient + bandes de section pleine largeur via l'utilitaire .lp-band
   (négatif/positif auto-compensé, pas de 100vw nu). Le scroll horizontal parasite
   (50vw incluant la scrollbar) est neutralisé par overflow-x:clip ciblé sur la page. */

/* ─── Pleine largeur (full-bleed) maîtrisée ───────────────────────────
   Casse le max-width + padding de .main : marges négatives jusqu'aux bords
   du viewport, padding compensateur qui ramène le contenu dans la colonne.
   overflow-x:clip (≠ hidden → ne casse pas position:sticky) tue la scrollbar. */
body:has(.lp-band){ overflow-x:clip; }
.lp-band{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:calc(50vw - 50%);
  padding-right:calc(50vw - 50%);
}
.lp-band--surface{
  background:var(--nc-surface-section);
  padding-top:var(--nc-space-2xl);
  padding-bottom:var(--nc-space-2xl);
}
/* Dans une bande, la section porte déjà sa colonne : on neutralise son padding vertical
   (un seul mécanisme d'espacement = celui de la bande). */
.lp-band--surface > .lp-section{ padding-top:0; padding-bottom:0; }

/* ─── Sections génériques ─────────────────────────────────────────── */
.lp-section{
  max-width:980px;
  margin:0 auto;
  padding:var(--nc-space-lg) 0;
  text-align:center;
}
/* 2026-06-05 — Hiérarchie typo unifiée (analyse d'harmonie) : 3 niveaux, 1 token chacun.
   TITRE = text-xl (28) · SOUS-TITRE = display-sm (22) · TEXTE = text-md (14). */
.lp-h2{
  font-size:var(--nc-text-xl); font-weight:var(--nc-weight-semibold); letter-spacing:-0.02em;
  line-height:var(--nc-leading-snug); color:var(--nc-text);
  margin-bottom:var(--nc-space-sm);
}
.lp-sub{
  font-size:var(--nc-text-md); color:var(--nc-text-muted);
  line-height:var(--nc-leading-relaxed); max-width:640px; margin:0 auto var(--nc-space-lg);
}

/* ─── Hero (gradient pleine largeur — relief v3 réinjecté, direction marine native) ───
   Classe combinée dans le HTML : <section class="lp-hero lp-band">.
   .lp-band gère le full-bleed horizontal ; .lp-hero gère fond + padding vertical. */
.lp-hero{
  background:var(--nc-gradient-hero);
  color:var(--nc-text-on-dark);
  text-align:center;
  margin-top:calc(-1 * var(--nc-space-lg));   /* affleure le header (annule le padding-top de .main) */
  margin-bottom:var(--nc-space-2xl);
  padding-top:var(--nc-space-2xl);
  padding-bottom:var(--nc-space-2xl);
}
.lp-hero__inner{
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:var(--nc-space-md);
}
.lp-h1{
  font-size:var(--nc-display-md); font-weight:var(--nc-weight-semibold); letter-spacing:-0.02em;
  line-height:var(--nc-leading-snug); color:var(--nc-text-on-dark);
  max-width:760px; margin:0;
}
.lp-lead{
  font-size:var(--nc-text-lg); color:var(--nc-text-on-dark-muted);
  max-width:560px; margin:0; line-height:var(--nc-leading-relaxed);
}
.lp-cta{ margin-top:var(--nc-space-sm); display:flex; flex-wrap:wrap; gap:var(--nc-space-sm); justify-content:center; }

/* ─── Hero PHOTO (variante immersive — image plein-bleed + voile + contenu bas-gauche) ───
   Variante BEM de .lp-hero : conserve le full-bleed (.lp-band) et le débord sous le header,
   mais remplace le gradient plat par une PHOTO (var --lp-hero-img, swappable en 1 ligne) avec
   un voile (scrim) pour la lisibilité du texte blanc. Le gradient marine de .lp-hero reste en
   SECOURS si la photo n'est pas (encore) déposée dans /static/images/landing/hero.jpg.
   Émotion (photo) + confiance (texte par-dessus) — direction validée Nadim 2026-06-21. */
.lp-hero--photo{
  position:relative; overflow:hidden;
  text-align:left;
  display:flex; align-items:flex-end;
  margin-top:0;                       /* le header passe en overlay transparent (cf .page-home) */
  min-height:100svh;                  /* plein écran total : à l'arrivée on ne voit QUE le hero */
  --lp-hero-img:url('/static/images/landing/hero.jpg');
}
/* Photo + voile (scrim) empilés dans UN seul calque ::before → pas de z-index littéral (D10).
   Le contenu (.lp-hero__inner, positionné) peint après ::before, donc au-dessus, sans z-index.
   Si la photo manque, les zones transparentes du voile laissent voir le gradient marine de .lp-hero. */
.lp-hero--photo::before{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(181deg, transparent 0%, transparent 44%, var(--nc-scrim-navy) 100%),
    linear-gradient(181deg, transparent 58%, var(--nc-overlay-scrim) 100%),
    var(--lp-hero-img) calc(50% + var(--lp-px, 0px)) calc(42% + var(--lp-py, 0px)) / cover no-repeat;
  transform-origin:55% 50%;
  animation:lp-kenburns 28s ease-in-out infinite alternate;   /* dérive cinématique lente (Ken Burns) */
}
/* ─── Diaporama (multi-photos, piloté par dev/hero → manifeste) ───────────────
   Quand .lp-hero--slides est présent : on désactive l'image unique du ::before
   (l'image vient des slides) ; le voile est porté par .lp-hero__scrim, placé APRÈS
   les slides en DOM → au-dessus d'elles, sous le contenu. Chaque slide : image en
   cover + cadrage vertical inline ; la slide active monte en opacité (cross-fade)
   et reçoit le Ken Burns. Aucune photo publiée → pas de .lp-hero--slides → l'image
   unique du ::before / le gradient marine reprennent la main (secours). */
.lp-hero--slides::before{ content:none; }
.lp-hero__slides{ position:absolute; inset:0; overflow:hidden; }
.lp-hero__slide{
  position:absolute; inset:0; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity 1.4s ease;   /* nc-inv-ok — cross-fade hero cinématique, hors échelle transition UI (80/120/200ms) */
}
.lp-hero__slide.is-active{ opacity:1; animation:lp-kenburns 28s ease-in-out infinite alternate; }
.lp-hero__scrim{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(181deg, transparent 0%, transparent 44%, var(--nc-scrim-navy) 100%),
    linear-gradient(181deg, transparent 58%, var(--nc-overlay-scrim) 100%);
}
@media (prefers-reduced-motion:reduce){ .lp-hero__slide.is-active{ animation:none; } }

.lp-hero--photo .lp-hero__inner{
  position:relative;
  margin:0; align-items:flex-start; text-align:left;
  max-width:600px;
}
.lp-hero--photo .lp-h1{ text-align:left; }
.lp-hero--photo .lp-lead{ color:var(--nc-text-on-dark-soft); }
/* CTA hero : alignés à gauche + plus présents (échelle marketing) que le .nc-btn dense de l'app. */
.lp-cta--hero{ justify-content:flex-start; }
.lp-cta--hero .nc-btn{ height:auto; padding:var(--nc-space-sm) var(--nc-space-lg); font-size:var(--nc-text-lg); }
/* Un seul CTA + lien discret « Découvrir ↓ » qui scrolle vers le contenu d'accueil sous le hero. */
.lp-hero__actions{ display:flex; flex-direction:column; gap:var(--nc-space-sm); align-items:flex-start; }
.lp-hero__more{ color:var(--nc-text-on-dark-soft); font-size:var(--nc-text-md); }
.lp-hero__more:hover{ color:var(--nc-text-on-dark); }
html{ scroll-behavior:smooth; }
#decouvrir{ scroll-margin-top:var(--nc-header-h); }

/* ═══ Hero immersif — animations (révélation + Ken Burns + parallaxe douce), dosées.
   Tout en transforms/opacité (aucune couleur/espacement brut). prefers-reduced-motion respecté. ═══ */
/* Révélation au chargement : le titre monte depuis un masque, le reste apparaît en fondu décalé. */
.lp-hero__mask{ overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.lp-hero--photo .lp-h1.lp-reveal{ animation:lp-rise .95s cubic-bezier(.16,1,.3,1) both; }
.lp-reveal--2{ animation:lp-fade .8s ease both; animation-delay:.35s; }
.lp-reveal--3{ animation:lp-fade .8s ease both; animation-delay:.55s; }
@keyframes lp-rise{ from{ transform:translateY(115%); } to{ transform:translateY(0); } }
@keyframes lp-fade{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes lp-kenburns{ from{ transform:scale(1.06); } to{ transform:scale(1.15); } }
/* Indice de scroll : le chevron « respire » pour inviter à descendre. */
.lp-hero__chev{ display:inline-block; animation:lp-bob 1.6s ease-in-out infinite; }
@keyframes lp-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

/* ─── Header en OVERLAY transparent sur le hero (accueil uniquement) ; devient solide au scroll
   (.is-scrolled posé par le JS du hero). Scopé .page-home → les autres pages gardent le header
   sticky blanc standard. ─── */
.page-home .main{ padding-top:0; }
.page-home .site-header{
  position:fixed; top:0; left:0; right:0;
  background:transparent; border-bottom-color:transparent;
  transition:background var(--nc-transition-base), border-color var(--nc-transition-base);
}
.page-home .site-header.is-scrolled{ background:var(--nc-bg); border-bottom-color:var(--nc-border); }
.page-home .site-header:not(.is-scrolled) .logo-text,
.page-home .site-header:not(.is-scrolled) .nav a,
.page-home .site-header:not(.is-scrolled) .nav-dev-trigger{ color:var(--nc-text-on-dark); }
.page-home .site-header:not(.is-scrolled) .logo-mark{ background:var(--nc-text-on-dark); }

@media (prefers-reduced-motion: reduce){
  .lp-hero--photo::before, .lp-hero__chev{ animation:none; }
  .lp-hero--photo .lp-h1.lp-reveal, .lp-reveal--2, .lp-reveal--3{ animation:none; opacity:1; transform:none; }
}

/* ─── Problèmes : 3 cards icône + titre + texte ───────────────────── */
.lp-cards-3{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--nc-col-min), 1fr));
  gap:var(--nc-space-md);
  text-align:left;
}
.lp-problem-card{ display:flex; flex-direction:column; gap:var(--nc-space-sm); }
/* Cartes problème — même échelle que les features (SOUS-TITRE 22 + TEXTE 14), plus l'échelle UI dense */
.lp-problem-card h3{ font-size:var(--nc-display-sm); font-weight:var(--nc-weight-semibold); letter-spacing:-0.01em; color:var(--nc-text); line-height:var(--nc-leading-snug); }
.lp-problem-card p{ font-size:var(--nc-text-md); color:var(--nc-text-muted); line-height:var(--nc-leading-relaxed); }
/* Icônes monochromes au trait (2026-06-05) — couleur via currentColor (héritée du parent) */
.lp-icon{ color:var(--nc-text-muted); }
.lp-svgico{ display:inline-block; vertical-align:middle; }
.lp-note-ico{ color:var(--nc-text-muted); margin-right:var(--nc-space-xs); display:inline-flex; vertical-align:middle; }
.lp-inline-ico{ color:var(--nc-text-muted); margin-right:var(--nc-space-xs); display:inline-flex; vertical-align:middle; }

/* ─── Solution : 4 lignes image + texte (alternées) ───────────────── */
.lp-features{ max-width:1040px; }
.lp-feature-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(var(--nc-col-min-lg), 1fr));
  gap:var(--nc-space-lg);
  align-items:center;
  text-align:left;
  padding:var(--nc-space-lg) 0;
  border-bottom:0.5px solid var(--nc-border);
}
.lp-feature-row:last-child{ border-bottom:0; }
/* Alternance image gauche/droite : on inverse la 2e colonne 1 ligne sur 2. */
.lp-feature-row:nth-child(even){ direction:rtl; }
.lp-feature-row:nth-child(even) > *{ direction:ltr; }
/* Capture feature : <picture> sert la version desktop, et en mobile (≤720px) une capture
   prise en vue mobile (lisible) via <source media> — le navigateur fait la bascule, pas de CSS. */
.lp-feature-pic{ display:block; min-width:0; }
.lp-feature-img{
  width:100%; height:auto; display:block;
  border-radius:var(--nc-radius-lg);
  box-shadow:var(--nc-shadow-mockup);   /* relief des captures (v3) — remplace la bordure sèche */
}
.lp-feature-body h3{
  font-size:var(--nc-display-sm); font-weight:var(--nc-weight-semibold); letter-spacing:-0.01em;
  color:var(--nc-text); margin-bottom:var(--nc-space-sm); line-height:var(--nc-leading-snug);
}
.lp-feature-body p{
  font-size:var(--nc-text-md); color:var(--nc-text-muted);
  line-height:var(--nc-leading-relaxed); margin-bottom:var(--nc-space-md);
}
/* .lp-tip supprimé — remplacé par .nc-note (layout.html SSOT) dans home.html */

/* Sondage : déplacé en popup → CSS dans _survey_modal.html (2026-06-21). */
#survey-success{ max-width:620px; margin:0 auto; text-align:center; }

/* ─── Mission ─────────────────────────────────────────────────────── */
.lp-bullets{
  list-style:none; padding:0; margin:0 auto var(--nc-space-lg);
  max-width:520px;
  display:flex; flex-direction:column; gap:var(--nc-space-sm);
  text-align:left;
}
.lp-bullets li{
  position:relative; padding-left:var(--nc-space-lg);
  font-size:var(--nc-text-md); color:var(--nc-text); line-height:var(--nc-leading-normal);
}
.lp-bullets li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--nc-accent-text); font-weight:var(--nc-weight-bold);
}
.lp-mission-line{
  font-size:var(--nc-text-md); color:var(--nc-text-muted);
  max-width:620px; margin:0 auto; line-height:var(--nc-leading-relaxed); font-style:italic;
}

/* Footer landing (.lp-footer/.lp-footer-sub) + .lp-q : retirés 2026-06-05 — 0 référence (audit état des lieux visuel). */

/* ─── "Comment ça marche" : étapes numérotées ─────────────────────── */
/* Réutilise .lp-hero / .lp-h1 / .lp-lead / .lp-section / .lp-h2 (SSOT ci-dessus) ;
   n'ajoute QUE les layouts propres à la page (étapes, stats, grille questions, CTA).
   Remplace l'ancien bloc inline .hcm-* — tailles alignées sur l'échelle landing. */
/* 2026-06-19 — étapes alignées sur le langage cartes de l'accueil (.lp-cards-3 /
   .nc-card--raised) : chaque étape = carte en relief, badge au-dessus puis contenu
   (même rythme que les cartes "Problèmes"). Pile centrée, gap conteneur (D15). */
.lp-steps{ max-width:880px; margin:0 auto; text-align:left;
  display:flex; flex-direction:column; gap:var(--nc-space-md); }
.lp-step{
  display:flex; flex-direction:column; gap:var(--nc-space-sm);
  align-items:flex-start;
}
.lp-step-num{
  width:48px; height:48px; background:var(--nc-bg-dark); color:var(--nc-accent);
  border-radius:var(--nc-radius-pill); display:flex; align-items:center; justify-content:center;
  font-size:var(--nc-text-lg); font-weight:var(--nc-weight-semibold); font-variant-numeric:tabular-nums; flex-shrink:0;
}
.lp-step-body h2{
  font-size:var(--nc-display-sm); font-weight:var(--nc-weight-semibold); letter-spacing:-0.01em;
  color:var(--nc-text); margin:var(--nc-space-xs) 0 var(--nc-space-sm); line-height:var(--nc-leading-snug);
}
.lp-step-body p{
  font-size:var(--nc-text-md); color:var(--nc-text-muted);
  line-height:var(--nc-leading-relaxed); margin-bottom:var(--nc-space-md);
}
.lp-step-body p:last-child{ margin-bottom:0; }
.lp-disclaimer{
  font-size:var(--nc-text-md); font-style:italic; color:var(--nc-text-light);
  line-height:var(--nc-leading-relaxed);
}
/* Pastilles plateformes (étape 01) */
.lp-chips{ margin-top:var(--nc-space-sm); }
.lp-chip{
  display:inline-block; background:var(--nc-bg-soft); color:var(--nc-text-muted);
  border:0.5px solid var(--nc-border-soft);
  font-size:var(--nc-text-xs); font-weight:var(--nc-weight-medium);
  padding:var(--nc-space-xs) var(--nc-space-md); border-radius:var(--nc-radius-pill);
  margin:0 var(--nc-space-xs) var(--nc-space-xs) 0;
}
/* Cards stats (étape 02) */
.lp-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--nc-col-min-sm),1fr)); gap:var(--nc-space-sm); margin-top:var(--nc-space-sm); }
.lp-stat{ background:var(--nc-bg); border-radius:var(--nc-radius); padding:var(--nc-space-md) var(--nc-space-md); box-shadow:var(--nc-shadow-card); }
.lp-stat-val{ font-size:var(--nc-display-sm); font-weight:var(--nc-weight-semibold); letter-spacing:-0.01em; color:var(--nc-text); font-variant-numeric:tabular-nums; margin-bottom:var(--nc-space-xs); }
.lp-stat-label{ font-size:var(--nc-text-xs); color:var(--nc-text-light); text-transform:uppercase; letter-spacing:0.04em; font-weight:var(--nc-weight-medium); }
/* Grille 4 questions (étape 03) — 2×2 fixe : 4 items pleins, jamais de case vide
   (auto-fit donnait 3 colonnes → 1 ligne de 3 + 1 seul, 2 cases grises orphelines). */
.lp-qgrid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--nc-border-soft); border:1px solid var(--nc-border-soft); border-radius:var(--nc-radius); overflow:hidden; margin-top:var(--nc-space-sm); }  /* nc-inv-ok — 2×2 voulu (4 items pleins, jamais de case vide) + repli 1 col ≤720px ; auto-fit impossible ici (token 280px → 3 cols sur ~848px de carte) */
.lp-qcard{ background:var(--nc-bg); padding:var(--nc-space-md); display:flex; align-items:flex-start; gap:var(--nc-space-sm); }
.lp-qcard-num{ width:18px; height:18px; flex-shrink:0; background:var(--nc-bg-dark); color:var(--nc-accent); border-radius:var(--nc-radius-pill); display:flex; align-items:center; justify-content:center; font-size:var(--nc-text-xs); font-weight:var(--nc-weight-semibold); font-variant-numeric:tabular-nums; margin-top:var(--nc-space-xs); }
.lp-qcard-label{ font-size:var(--nc-text-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--nc-accent-text); font-weight:var(--nc-weight-semibold); margin-bottom:var(--nc-space-xs); }
.lp-qcard-text{ font-size:var(--nc-text-md); color:var(--nc-text); line-height:var(--nc-leading-normal); }
/* .lp-cta-band retiré 2026-06-07 — la clôture des deux pages utilise désormais
   la bande grise pleine largeur .lp-band.lp-band--surface (langage partagé p.1/p.2). */

/* ─── Responsive ──────────────────────────────────────────────────────
   A2.1 (2026-06-19) : la plupart des replis sont désormais INTRINSÈQUES (auto-fit
   + clamp tokens), donc plus de media query dédiée. Seuls les titres restent ajustés
   au breakpoint SSOT 720. Les grilles (lp-cards-3 / lp-feature-row / lp-stats / lp-qgrid)
   se replient seules ; lp-step garde sa colonne 48px (tient à 360px). */
@media (max-width: 720px){
  /* lp-h1 → géré par clamp(--nc-display-md). lp-h2 (text-xl=28) réduit ici au breakpoint. */
  .lp-h2{ font-size:var(--nc-display-sm); }
  /* NB : pas de padding shorthand ici — il écraserait la compensation .lp-band (bleed). */
  .lp-hero{ padding-top:var(--nc-space-xl); padding-bottom:var(--nc-space-xl); }
  /* Hero photo mobile : plein écran aussi ; CTA pleine largeur (tap facile). */
  .lp-hero--photo{ min-height:100svh; }
  .lp-cta--hero{ flex-direction:column; align-items:stretch; }
  .lp-cta--hero .nc-btn{ justify-content:center; }
  /* « Comment ça marche » mobile : les cartes-étapes (pile pleine largeur) sont déjà
     intrinsèques. On réduit juste le badge. Scopé à .lp-steps → n'affecte pas l'accueil. */
  .lp-steps .lp-step-num{ width:36px; height:36px; font-size:var(--nc-text-md); }
  /* La grille 4 questions repasse en 1 colonne (2×2 trop serré sur mobile). */
  .lp-qgrid{ grid-template-columns:1fr; }
  /* Captures features en mobile = mockups téléphone (cadre + ombre déjà cuits dans le PNG
     transparent). On neutralise l'ombre/coins CSS desktop pour éviter le double-cadre. */
  .lp-feature-img{ box-shadow:none; border-radius:0; }
}