/* ============================================================================
   /lp-maison/ — feuille de style de la landing page publicitaire « maison ».

   Refonte du 3 septembre 2026, sur la maquette Claude Design « Greenkub - LP
   Maison » (design-source/lp-maison/). La LP garde son habillage propre — c'est
   une page de trafic payant, noindex/nofollow, hors navigation et hors sitemap,
   sans aucune sortie hors de ses deux CTA et du téléphone du footer — mais elle
   ne réimplémente plus les valeurs de la marque : elle CONSOMME les tokens du
   site (`src/styles/tokens.css`, chargés par le gabarit Minimal).

   Ce que la refonte change par rapport à la LP portée du sous-domaine :
     · typo Sora + Mulish (tokens du site) au lieu de Raleway + Avenir. Les 7
       fontes vendorées de `public/lp-maison/fonts/` ont donc été supprimées :
       plus aucun octet de police propre à la LP (les deux familles du site sont
       déjà auto-hébergées et préchargées ailleurs) ;
     · plus une seule couleur de marque, ombre, rayon ou famille en dur : tout
       passe par les --gk-*. Seules exceptions, documentées au §A : les voiles
       noirs et blancs posés sur photo ou en verre, qui ne portent aucune
       identité et doivent tenir sans color-mix() ;
     · trois paliers responsive explicites (>1100 / ≤1100 / ≤720) au lieu des
       seuls clamp() de la maquette, qui débordaient sous 420 px (header, barre
       collante, bande de chiffres).

   Le fichier reste un asset statique de public/ (il ne traverse pas le build
   Astro) et TOUS ses sélecteurs sont préfixés `.lpm` : rien ne peut fuir vers
   le reste du site, et rien du site ne vient styler la LP par accident.

   Composition :
     A. tokens de la LP (assis sur ceux du site)
     B. base d'éléments
     C. boutons
     D. header flottant
     E. hero
     F. bande de chiffres
     G. manifeste
     H. respiration encadrée
     I. « Construire, simplement. » (quatre cartes)
     J. modèles (cartes + carrousel)
     K. « Les tarifs incluent »
     L. respirations pleine largeur
     M. témoignages (cartes d'avis)
     M bis. témoignage vidéo (mise en scène maquette + lecteur auto-hébergé)
     N. « La construction simplifiée » (bande jaune)
     O. parcours
     P. comparatif
     Q. barre CTA collante
     S. blocs de dossier (contenu QS)
     R. responsive (≤1100 puis ≤720)
   ========================================================================== */

/* ---------- A. Tokens de la LP ----------
   Aucune valeur nouvelle : chaque jeton pointe sur un token du site. Les seuls
   écarts assumés à la maquette sont notés ligne à ligne (rayons, gris de petit
   texte, jaune de texte), tous dans le sens du design system du repo. */
.lpm {
  /* couleurs — accents et encre */
  --lp-vert: var(--gk-vert);                 /* #41B883 · accent + CTA de la LP */
  --lp-jaune: var(--gk-jaune);               /* #FEDD63 · accent de l'univers maison */
  --lp-encre: var(--gk-noir);                /* #161616 */
  --lp-blanc: var(--gk-blanc);
  --lp-fond: var(--gk-off-white);            /* #FAFAFA · maquette #FBFBFB */
  --lp-filet: var(--gk-light-grey);          /* #E0E0E0 */
  --lp-filet-doux: var(--gk-bordure);        /* #E6E6E6 · maquette #F0F0F0 */
  --lp-texte: var(--gk-gris);                /* #4A4A4A · maquette #444444 */
  --lp-texte-doux: var(--gk-grey-4);         /* #6B6B6B · maquette #666666 */
  /* Petit texte gris (mentions, département, « à partir de ») : la maquette pose
     #B0B0B0, soit 2,4:1 sur blanc — sous le seuil AA. On garde le rôle « atténué »
     avec le gris du site qui passe AA (5,7:1). */
  --lp-mention: var(--gk-grey-4);
  /* Texte JAUNE sur fond clair (suréchet « Nos modèles ») : le jaune vif est fait
     pour les aplats, pas pour le texte (1,4:1). Variante accessible de la charte
     de marque (§3) — la pastille du suréchet, elle, reste en jaune vif. */
  --lp-jaune-texte: #7A5C00;
  /* Voiles et transparences, en rgba() et non en color-mix(). Trois raisons :
     ce sont des voiles NOIRS et BLANCS posés sur photo ou en verre, que la charte
     autorise explicitement (§2 : « un noir derrière une photo pleine surface, oui,
     c'est un fond de sécurité invisible, pas un aplat ») ; leurs valeurs viennent
     de la maquette ; et surtout ils doivent tenir PARTOUT — sur un navigateur qui
     ignore color-mix(), un voile de hero invalide rendrait le H1 blanc illisible
     sur la photo, et le header de verre perdrait son fond. C'est une page de
     trafic payant : aucun de ces deux risques n'est acceptable. */
  --lp-voile-88: rgba(0, 0, 0, .88);
  --lp-voile-82: rgba(0, 0, 0, .82);
  --lp-voile-80: rgba(0, 0, 0, .80);
  --lp-voile-72: rgba(0, 0, 0, .72);
  --lp-voile-55: rgba(0, 0, 0, .55);
  --lp-voile-42: rgba(0, 0, 0, .42);
  --lp-voile-35: rgba(0, 0, 0, .35);
  --lp-voile-30: rgba(0, 0, 0, .30);
  --lp-voile-28: rgba(0, 0, 0, .28);
  --lp-voile-25: rgba(0, 0, 0, .25);
  --lp-voile-15: rgba(0, 0, 0, .15);
  --lp-voile-10: rgba(0, 0, 0, .10);
  --lp-verre: rgba(255, 255, 255, .92);
  --lp-verre-fort: rgba(255, 255, 255, .96);
  --lp-blanc-85: rgba(255, 255, 255, .85);
  --lp-blanc-80: rgba(255, 255, 255, .80);
  --lp-blanc-55: rgba(255, 255, 255, .55);
  --lp-blanc-14: rgba(255, 255, 255, .14);
  /* Les deux SEULES transparences restées en color-mix() : elles dérivent du vert
     de marque, et si le navigateur l'ignore on ne perd qu'un filet de liaison et
     le fond d'une pastille d'initiales — rien de lisible. */
  --lp-vert-10: color-mix(in srgb, var(--lp-vert) 10%, transparent);
  --lp-vert-50: color-mix(in srgb, var(--lp-vert) 50%, transparent);

  /* polices — les deux familles du site, rien de propre à la LP */
  --lp-titre: var(--gk-font-display);        /* Sora */
  --lp-corps: var(--gk-font-corps);          /* Mulish */

  /* ombres */
  --lp-ombre-carte: var(--gk-shadow-card);
  --lp-ombre-flottante: var(--shadow-button);

  /* rayons — tokens du repo : 14 au lieu du 16 de la maquette (écart déjà
     tranché en faveur du repo dans tokens.css), 20 au lieu du 24. */
  --lp-r-petit: var(--gk-radius-sm);         /* 8px  · vignettes */
  --lp-r-carte: var(--gk-radius-card);       /* 14px · cartes, header, médias */
  --lp-r-panneau: var(--gk-radius-lg);       /* 20px · grands panneaux */
  --lp-r-pastille: var(--gk-radius-pill);

  /* géométrie — rail du site en variante large (1440 ; maquette 1480) */
  --lp-rail: var(--gk-container-wide);
  --lp-gut: clamp(16px, 5.6vw, 80px);
  --lp-comparatif: 1040px;                   /* largeur du panneau comparatif (maquette) */
}

/* ---------- B. Base ---------- */
.lpm, .lpm * { box-sizing: border-box }
.lpm {
  margin: 0;
  background: var(--lp-blanc);
  color: var(--lp-encre);
  font-family: var(--lp-corps);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.lpm-page { padding-bottom: 92px }          /* place de la barre CTA collante */
.lpm h1, .lpm h2, .lpm h3, .lpm h4 { font-family: var(--lp-titre); font-weight: 800; margin: 0; color: var(--lp-encre) }
.lpm p { margin: 0 }
.lpm ul { list-style: none; margin: 0; padding: 0 }
.lpm img { display: block; max-width: 100%; height: auto }
.lpm b, .lpm strong { font-weight: 700 }

/* rail de contenu unique */
.lpm .wrap { width: 100%; max-width: var(--lp-rail); margin-inline: auto }

/* échelle de titres */
.lpm .t-xl { font-size: clamp(38px, 5.6vw, 80px); line-height: .98; letter-spacing: -.015em; text-wrap: balance }
.lpm .t-lg { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -.01em; text-wrap: pretty }
.lpm .lead { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6; color: var(--lp-texte) }

/* surligneur : filet jaune sous le mot, jamais un aplat qui écrase l'encre */
.lpm .hl {
  background: linear-gradient(to top, var(--lp-jaune) 0, var(--lp-jaune) 40%, transparent 40%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* suréchet à pastille (signature de marque) */
.lpm .eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 24px;
  font-family: var(--lp-titre); font-weight: 700;
  font-size: 13px; line-height: 1; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lp-vert);
}
.lpm .eyebrow::before { content: ''; width: 10px; height: 10px; border-radius: var(--lp-r-pastille); background: currentColor; flex: none }
.lpm .eyebrow.y { color: var(--lp-jaune-texte) }
.lpm .eyebrow.y::before { background: var(--lp-jaune) }

/* pastille jaune (badge de modèle, « Interview client », « Révolution constructive ») */
.lpm .pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--lp-r-pastille);
  background: var(--lp-jaune); color: var(--lp-encre);
  font-family: var(--lp-titre); font-weight: 800; font-size: 14px; line-height: 1;
}

/* section standard */
.lpm .sec { padding: clamp(56px, 8vw, 120px) var(--lp-gut) }
.lpm .sec--grey { background: var(--lp-fond) }
/* bande dont le contenu porte lui-même son rythme vertical (chiffres) */
.lpm .sec--plat { padding-block: 0 }

/* ---------- C. Boutons ----------
   Deux destinations seulement (configurateur, recherche de terrain) et quatre
   habillages selon le fond. Écart de contraste du vert sur blanc = écart assumé
   de la charte (§9), compensé ici comme elle l'exige : graisse 800, 16 px,
   cible ≥ 44 px, focus visible. */
.lpm .cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 24px; border: 2px solid transparent; border-radius: var(--lp-r-carte);
  font-family: var(--lp-titre); font-weight: 800; font-size: 16px; line-height: 1;
  text-align: center; text-decoration: none;
  transition: filter .16s ease, background-color .16s ease, color .16s ease;
}
.lpm .cta--p { background: var(--lp-vert); border-color: var(--lp-vert); color: var(--lp-blanc) }
.lpm .cta--p:hover { filter: brightness(.93); color: var(--lp-blanc) }
.lpm .cta--s { background: transparent; border-color: var(--lp-vert); color: var(--lp-vert) }
.lpm .cta--s:hover { background: var(--lp-vert); color: var(--lp-blanc) }
.lpm .cta--w { background: transparent; border-color: var(--lp-blanc); color: var(--lp-blanc) }
.lpm .cta--w:hover { background: var(--lp-blanc-14); color: var(--lp-blanc) }
/* sur aplat jaune ou vert : le blanc devient le plein, le vert n'y est pas lisible */
.lpm .cta--plein-blanc { background: var(--lp-blanc); border-color: var(--lp-blanc); color: var(--lp-encre) }
.lpm .cta--plein-blanc:hover { filter: brightness(.95) }
.lpm .cta--bord-blanc { background: transparent; border-color: var(--lp-blanc); color: var(--lp-encre) }
.lpm .cta--bord-blanc:hover { background: var(--lp-blanc) }
.lpm .cta--sm { padding: 16px 22px; font-size: 15px }
.lpm .cta--bloc { width: 100%; padding: 20px 24px }
.lpm .cta:focus-visible { outline: 3px solid var(--lp-encre); outline-offset: 3px }
.lpm .cta--w:focus-visible, .lpm .cta--p:focus-visible { outline-color: var(--lp-blanc) }

/* bande de deux CTA en fin de section */
.lpm .cta-band { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; max-width: 560px; margin: 72px auto 0 }
.lpm .cta-band--serre { margin-top: 56px }

/* ---------- D. Header flottant ---------- */
.lpm .hd {
  position: absolute; top: 24px; left: 24px; right: 24px; z-index: 20;
  /* Le header ne s'étire pas indéfiniment : au-delà du rail il se cale dessus.
     `margin-inline: auto` centre la barre entre `left` et `right` dès que
     `max-width` mord. Rail + 2 x 8 px de padding : le logo et le CTA tombent
     alors exactement sur l'axe du contenu de la page. En dessous de ~1456 px,
     ce sont les 24 px de marge qui commandent, comme dans la maquette. */
  max-width: calc(var(--lp-rail) + 16px); margin-inline: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: var(--lp-r-carte);
  background: var(--lp-verre);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--lp-ombre-flottante);
}
.lpm .hd-in { width: 100%; max-width: var(--lp-rail); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.lpm .hd-logo { display: flex; align-items: center; padding-left: 4px }
.lpm .hd-logo img { width: 170px }
.lpm .hd .cta { flex: none }

/* ---------- E. Hero ---------- */
.lpm .hero {
  position: relative; overflow: hidden;
  min-height: min(100vh, 900px);
  display: flex; align-items: flex-end;
  padding: 0 var(--lp-gut) clamp(72px, 9vw, 120px);
}
.lpm .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center }
/* voile : lisible à gauche (où vit le texte), la maison reste visible à droite.
   Photo du 21/09/2026 (plein jour, terrasse bois claire et pelouse sous le texte) :
   le dégradé bas monte plus haut et plus dense que sur l'ancien crépuscule, sinon
   l'accroche et le CTA bordé blanc tombent sur du bois clair. */
.lpm .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--lp-voile-72) 0%, var(--lp-voile-10) 100%),
    linear-gradient(to top, var(--lp-voile-72) 0%, var(--lp-voile-42) 32%, transparent 60%);
}
.lpm .hero-in { position: relative; width: 100%; max-width: var(--lp-rail); margin: 0 auto }
/* ombre portée derrière le titre et l'accroche : les détache du bardage et de la
   terrasse quels que soient le cadrage et le palier (couleurs = tokens de voile). */
.lpm .hero-in h1, .lpm .hero-in .lead { text-shadow: 0 2px 6px var(--lp-voile-55), 0 12px 40px var(--lp-voile-72) }
.lpm .hero-in h1 { color: var(--lp-blanc); max-width: 16ch }
.lpm .hero-in .lead { margin-top: 24px; max-width: 620px; line-height: 1.5; color: var(--lp-blanc) }
/* le CTA bordé blanc du hero prend un fond voilé : sur la terrasse claire, un
   simple contour ne se détache pas assez. Le survol garde la même logique, en plus dense. */
.lpm .hero .cta--w { background: var(--lp-voile-30); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px) }
.lpm .hero .cta--w:hover { background: var(--lp-voile-55) }
.lpm .hero-in .lead b { color: var(--lp-vert) }
.lpm .cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; max-width: 560px }

/* ---------- F. Bande de chiffres ---------- */
.lpm .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-block: clamp(56px, 7vw, 88px) }
.lpm .stat .num {
  font-family: var(--lp-titre); font-weight: 800;
  font-size: clamp(40px, 3.9vw, 56px); line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.lpm .stat .num em { font-style: normal; font-weight: 800; font-size: .5em; letter-spacing: -.01em }
.lpm .stat .cap { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--lp-texte) }

/* ---------- G. Manifeste ---------- */
.lpm .mani { padding: clamp(56px, 8vw, 120px) var(--lp-gut); text-align: center }
/* .mani-ph : ouverture du manifeste. C'est une ILLUSTRATION de marque (trait vert
   sur fond blanc), pas une photo : hauteur libre et aucun recadrage, sinon on
   coupe les personnages. Pas de rayon non plus, le fond blanc se fond dans la
   section. */
.lpm .mani-ph { max-width: 440px; margin: 0 auto 40px }
.lpm .mani-ph img { width: 100%; height: auto }
.lpm .mani p { max-width: 760px; margin: 0 auto; font-family: var(--lp-titre); font-weight: 800; text-wrap: balance }

/* ---------- H. Respiration encadrée ---------- */
.lpm .framed { background: var(--lp-jaune) }
.lpm .framed > div { border: clamp(8px, .9vw, 12px) solid var(--lp-jaune); height: clamp(260px, 55vw, 800px) }
.lpm .framed img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--lp-r-carte) }

/* ---------- I. « Construire, simplement. » (quatre cartes) ----------
   La mosaïque de tuiles photo est remplacée par quatre cartes de même nature :
   pastille verte numérotée, titre et texte CENTRÉS, illustration de marque en
   pied. Les illustrations sont alignées sur une ligne de base commune par
   `margin-top: auto` — sans quoi elles flottent à la suite de textes de
   longueurs différentes. Carte PLEINE sur fond gris très clair, sans bordure ni
   ombre : la charte interdit de cumuler les deux. */
.lpm .smp-hd { text-align: center }
.lpm .smp-hd h2 { max-width: 720px; margin-inline: auto; text-wrap: balance }
.lpm .smp-hd .lead { max-width: 760px; margin: 20px auto 0 }

.lpm .smp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 64px }
.lpm .smp-c {
  display: flex; flex-direction: column; text-align: center;
  background: var(--lp-fond); border-radius: var(--lp-r-panneau);
  padding: 32px 24px 28px;
}
.lpm .smp-c .n {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin: 0 auto 28px;
  border-radius: 10px; background: var(--lp-vert); color: var(--lp-blanc);
  font-family: var(--lp-titre); font-weight: 800; font-size: 16px; line-height: 1;
}
.lpm .smp-c h3 {
  max-width: 15ch; margin-inline: auto;
  font-size: clamp(22px, 1.9vw, 26px); line-height: 1.18; letter-spacing: -.01em;
  text-wrap: balance;
}
.lpm .smp-c p { margin: 20px auto 0; max-width: 26ch; font-size: 16px; line-height: 1.55; color: var(--lp-texte) }
.lpm .smp-c img { width: 100%; max-width: 230px; height: auto; margin: auto auto 0; padding-top: 36px }

/* ---------- J. Modèles ---------- */
.lpm .mdl-hd { display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: flex-end; justify-content: space-between }
.lpm .mdl-hd h2 { max-width: 640px }
.lpm .mdl-hd p { max-width: 420px; font-size: 16px; line-height: 1.6; color: var(--lp-texte) }
.lpm .mdl-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 64px }
.lpm .mdl-c {
  display: flex; flex-direction: column;
  background: var(--lp-blanc); border: 1px solid var(--lp-filet);
  border-radius: var(--lp-r-carte); overflow: hidden;
}
.lpm .mdl-b { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px }
.lpm .mdl-c .s { font-family: var(--lp-titre); font-weight: 800; font-size: clamp(34px, 3.1vw, 44px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums }
.lpm .mdl-c ul { margin-top: 20px }
.lpm .mdl-c li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--lp-filet); padding: 14px 0; font-size: 15px; line-height: 1.3; color: var(--lp-texte) }
.lpm .mdl-c li svg { flex: none; width: 22px; height: 22px; color: var(--lp-vert) }
.lpm .mdl-c .ap { margin-top: 20px; font-size: 14px; line-height: 1.2; color: var(--lp-mention) }
.lpm .mdl-c .p { margin-top: 6px; font-family: var(--lp-titre); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -.02em }
.lpm .mdl-c .go { margin-top: auto; padding-top: 24px }

/* carrousel de la carte — le défilement est NATIF (scroll-snap) : swipe, trackpad
   et flèches clavier marchent sans JS, et la première photo s'affiche toujours.
   Flèches et puces ne sont révélées que si le script a posé `.js`. */
.lpm .mdl-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--lp-fond) }
.lpm .mdl-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none }
.lpm .mdl-track::-webkit-scrollbar { display: none }
.lpm .mdl-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start }
.lpm .mdl-track:focus-visible { outline: 3px solid var(--lp-vert); outline-offset: -3px }
.lpm .mdl-badge { position: absolute; bottom: 16px; left: 16px; z-index: 2 }
.lpm .mdl-nav, .lpm .mdl-dots { display: none }
.lpm-page.js .mdl-nav {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--lp-r-pastille);
  background: var(--lp-verre); color: var(--lp-encre);
  cursor: pointer; opacity: 0; transition: opacity .16s ease;
}
.lpm .mdl-nav svg { width: 20px; height: 20px }
.lpm .mdl-nav--prev { left: 12px }
.lpm .mdl-nav--next { right: 12px }
.lpm .mdl-ph:hover .mdl-nav, .lpm .mdl-nav:focus-visible { opacity: 1 }
.lpm .mdl-nav:focus-visible { outline: 2px solid var(--lp-encre); outline-offset: 2px }
.lpm .mdl-nav[disabled] { opacity: 0 !important; pointer-events: none }
.lpm-page.js .mdl-dots { display: flex; gap: 6px; filter: drop-shadow(0 1px 2px var(--lp-voile-35)); position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2 }
.lpm .mdl-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--lp-r-pastille);
  background: var(--lp-blanc-55); cursor: pointer;
  transition: width .16s ease, background-color .16s ease;
}
.lpm .mdl-dots button[aria-current='true'] { width: 18px; background: var(--lp-blanc) }
.lpm .mdl-dots button:focus-visible { outline: 2px solid var(--lp-blanc); outline-offset: 2px }
.lpm .mdl-ph--solo .mdl-nav, .lpm .mdl-ph--solo .mdl-dots { display: none !important }

/* carte d'appel de la grille de modèles : le catalogue compte CINQ surfaces, la
   grille en pose trois par rangée — cette carte occupe la sixième case au lieu
   de laisser un trou, et donne à la rangée la sortie qu'elle n'avait pas.
   Même gabarit que `.mdl-c` (rayon de carte), aplat vert + illustration de
   marque. L'encre blanche sur le vert est la paire déclarée par les tokens du
   site (--univers-accent / -ink), également employée par la pastille numérotée
   du §I ; comme pour les CTA verts du §C, elle est compensée par la graisse 800
   et une taille de corps de 16 px.
   ⚠ Les deux dernières règles (libellé du bouton en vert) sont demandées par la
   maquette « blocs QS » turn 2a et CONTREDISENT l'arbitrage écrit trois lignes
   au-dessus de `.cta--plein-blanc` au §C (« sur aplat jaune ou vert : le blanc
   devient le plein, le vert n'y est pas lisible »). Mesuré : le libellé passe de
   18,1:1 en encre à 2,5:1 en vert, sur le bouton de conversion de la carte.
   Les supprimer rend au bouton l'encre du §C, sans rien changer d'autre. */
.lpm .mdl-cta {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  min-height: 520px; padding: 32px;
  border-radius: var(--lp-r-carte);
  background: var(--lp-vert);
}
.lpm .mdl-cta > img {
  position: absolute; right: -12px; bottom: -8px; z-index: 0;
  width: 300px; height: auto; pointer-events: none;
}
.lpm .mdl-cta > div { position: relative; z-index: 1 }
.lpm .mdl-cta h3 {
  max-width: 15ch;
  font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.015em;
  color: var(--lp-blanc);
}
.lpm .mdl-cta p {
  margin-top: 16px; max-width: 26ch;
  font-size: 16px; font-weight: 600; line-height: 1.6;
  color: var(--lp-blanc);
}
.lpm .mdl-cta .cta { color: var(--lp-vert) }
.lpm .mdl-cta .cta:hover { color: var(--lp-vert) }

/* ---------- K. « Les tarifs incluent » ---------- */
.lpm .tar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 2.4vw, 32px); align-items: stretch }
.lpm .tar-ph { min-height: 320px; border-radius: var(--lp-r-carte); overflow: hidden }
.lpm .tar-ph img { width: 100%; height: 100%; object-fit: cover }
.lpm .tar-c {
  display: flex; flex-direction: column;
  background: var(--lp-blanc); border-radius: var(--lp-r-carte);
  padding: clamp(24px, 2.4vw, 36px); box-shadow: var(--lp-ombre-carte);
}
.lpm .tar-c h2 { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.05; padding-bottom: 20px; border-bottom: 2px solid var(--lp-filet) }
.lpm .tar-c ul { margin-top: 24px }
.lpm .tar-c li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px dashed var(--lp-filet) }
.lpm .tar-c li:first-child { padding-top: 0; border-top: 0 }
.lpm .tar-c li i { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--lp-r-petit); background: var(--lp-vert); color: var(--lp-blanc) }
.lpm .tar-c li i svg { width: 14px; height: 14px }
.lpm .tar-c li span { flex: 1 1 auto; font-size: 17px; line-height: 1.35 }

/* ---------- L. Respirations pleine largeur ---------- */
.lpm .bleed img { width: 100%; height: 100%; object-fit: cover }
.lpm .bleed--factory { height: clamp(60vh, 80vw, 80vh) }
.lpm .bleed--interieur { height: clamp(52vh, 64vw, 72vh) }
/* Respiration « séjour », sous « Les tarifs incluent » : demandée en pleine largeur
   et pleine hauteur, d'où un plafond à 100svh au lieu des 72 à 80vh des deux autres.
   `svh` et non `vh` : sur mobile, la barre d'adresse qui se replie ferait sauter la
   hauteur en cours de défilement. Le terme central en `vw` est conservé — c'est lui
   qui empêche un écran étroit de ne montrer qu'une tranche verticale de la pièce. */
.lpm .bleed--sejour { height: clamp(60vh, 80vw, 100svh) }

/* ---------- M. Témoignages ---------- */
.lpm .tst-hd { margin: 0 auto 40px; max-width: 720px; text-align: center; text-wrap: balance }
.lpm .tst-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
.lpm .tst { display: flex; flex-direction: column; background: var(--lp-blanc); border-radius: var(--lp-r-carte); padding: 32px; box-shadow: var(--lp-ombre-carte) }
.lpm .tst .q { margin-bottom: 12px; font-family: var(--lp-titre); font-weight: 800; font-size: 40px; line-height: .6; color: var(--lp-jaune) }
.lpm .tst h3 { font-size: 20px; line-height: 1.25; text-wrap: pretty }
.lpm .tst .txt { margin: 16px 0 32px; font-size: 15px; line-height: 1.6; color: var(--lp-texte) }
.lpm .tst .who { margin-top: auto; display: flex; align-items: center; gap: 12px }
.lpm .tst .av { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--lp-r-pastille); background: var(--lp-vert-10); color: var(--lp-vert); font-family: var(--lp-titre); font-weight: 800; font-size: 15px; line-height: 1 }
.lpm .tst .who b { display: block; font-size: 15px; line-height: 1.3 }
.lpm .tst .who i { display: block; font-style: normal; font-size: 13px; line-height: 1.3; color: var(--lp-mention) }
.lpm .tst .who img { margin-left: auto; height: 18px; width: auto }
.lpm .src { margin: 32px auto 0; max-width: 900px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--lp-mention) }
.lpm .src b { color: var(--lp-texte) }

/* ---------- M bis. Témoignage vidéo ----------
   Mise en scène de la MAQUETTE (carte sur le rail, pastille, bouton de lecture,
   citation) et lecteur AUTO-HÉBERGÉ de `main` : pas d'embed tiers, donc aucune
   sortie vers une plateforme et aucun traceur avant consentement.

   Le format reste en 16/9 au lieu de la hauteur fixe de la maquette : le film
   porte un bandeau nom en haut à GAUCHE et le logo Greenkub en haut à DROITE,
   qu'un recadrage couperait — arbitrage de `main`, vérifié sur images extraites
   du master. La maquette posait ici une hauteur libre parce qu'elle n'avait
   qu'une photo d'emplacement.

   La façade n'existe que si le script a posé `.js` : sans JavaScript, l'élément
   <video> garde son attribut `controls` et donne le lecteur natif, jouable. */
.lpm .itv {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin-bottom: 56px; border-radius: var(--lp-r-carte); overflow: hidden;
  background: var(--lp-encre);
}
.lpm .itv video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: var(--lp-encre) }
.lpm .itv-facade { display: none }
.lpm-page.js .itv-facade { display: block; position: absolute; inset: 0; z-index: 2 }
/* Voile UNIFORME et léger : il n'y a pas de texte en surimpression à rendre
   lisible (le film est sous-titré en dur), il ne sert qu'à détacher le bouton de
   lecture et à signaler que la carte est cliquable. */
.lpm .itv-facade::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--lp-voile-25);
}
.lpm .itv-facade .pill { position: absolute; top: 24px; left: 24px; font-size: 13px }
.lpm .itv-play {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; padding: 0; border: 0; border-radius: var(--lp-r-pastille);
  background: var(--lp-vert); cursor: pointer;
  box-shadow: var(--lp-ombre-flottante); transition: filter .16s ease;
}
.lpm .itv-play:hover { filter: brightness(.93) }
.lpm .itv-play:focus-visible { outline: 3px solid var(--lp-blanc); outline-offset: 4px }
.lpm .itv-play span { width: 0; height: 0; margin-left: 6px; border-top: 16px solid transparent; border-bottom: 16px solid transparent; border-left: 26px solid var(--lp-blanc) }
/* une fois la lecture lancée, la façade s'effface et le lecteur natif prend la main */
.lpm .itv.playing .itv-facade { display: none }

/* ---------- N. « La construction simplifiée » (aplat d'univers maison) ---------- */
.lpm .simpl { background: var(--lp-jaune); padding: clamp(72px, 9vw, 100px) var(--lp-gut) }
.lpm .simpl h2 { max-width: 660px; margin: 0 auto; text-align: center; text-wrap: balance }
.lpm .simpl-panel { margin-top: 56px; background: var(--lp-blanc); border-radius: var(--lp-r-panneau); padding: clamp(20px, 2.2vw, 32px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px }
.lpm .simpl-i .ph { aspect-ratio: 4 / 3; border-radius: var(--lp-r-petit); overflow: hidden }
.lpm .simpl-i .ph img { width: 100%; height: 100%; object-fit: cover }
.lpm .simpl-i .hd3 { display: flex; align-items: center; gap: 14px; margin-top: 28px }
.lpm .simpl-i .n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--lp-jaune); font-family: var(--lp-titre); font-weight: 800; font-size: 15px; line-height: 1; color: var(--lp-encre) }
.lpm .simpl-i h3 { font-size: 20px; line-height: 1; letter-spacing: .03em; text-transform: uppercase }
.lpm .simpl-i p { margin-top: 20px; font-size: 15px; line-height: 1.7; color: var(--lp-texte) }

/* ---------- O. Parcours ----------
   Le filet vert qui relie deux cartes d'une même rangée est un ::after posé dans
   la gouttière ; `overflow: hidden` sur la grille le coupe en fin de rangée, ce
   qui le fait disparaître tout seul à chaque palier responsive. */
.lpm .jrn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow: hidden }
.lpm .jrn-t { padding: 8px 0 }
.lpm .jrn-t h2 { max-width: 14ch }
.lpm .jrn-c { position: relative; background: var(--lp-fond); border-radius: var(--lp-r-carte); padding: 32px; display: flex; flex-direction: column; min-height: 400px }
.lpm .jrn-c:not(:last-child)::after { content: ''; position: absolute; top: 53px; right: -24px; width: 24px; height: 1px; background: var(--lp-vert-50) }
.lpm .jrn-c .top { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0 20px; min-height: 180px }
.lpm .jrn-c .n { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--lp-vert); color: var(--lp-blanc); display: flex; align-items: center; justify-content: center; font-family: var(--lp-titre); font-weight: 800; font-size: 16px; line-height: 1 }
.lpm .jrn-c .top img { height: 240px; width: auto; object-fit: contain; margin: 0 auto }
.lpm .jrn-c h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.005em; text-wrap: pretty }
.lpm .jrn-c p { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--lp-texte) }

/* ---------- P. Comparatif ---------- */
.lpm .cmp-hd { margin: 0 auto 40px; max-width: 720px; text-align: center; text-wrap: balance }
.lpm .cmp {
  position: relative; max-width: var(--lp-comparatif); margin: 0 auto;
  background: var(--lp-fond); border-radius: var(--lp-r-panneau);
  padding: clamp(24px, 2.8vw, 40px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.lpm .cmp-col { padding: clamp(20px, 2vw, 28px) }
.lpm .cmp-col--gk { position: relative; background: var(--lp-blanc); border-radius: var(--lp-r-carte); box-shadow: var(--lp-ombre-carte) }
.lpm .cmp-h { margin: 0; min-height: 52px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.lpm .cmp-h.tradi { font-family: var(--lp-titre); font-weight: 700; font-size: 15px; line-height: 1.35; text-transform: uppercase; color: var(--lp-texte-doux) }
.lpm .cmp-h img { height: 52px; width: auto }
.lpm .cmp-col ul { margin-top: 24px }
.lpm .cmp-col li { display: flex; align-items: flex-start; gap: 14px; padding: 22px 0; border-top: 1px solid var(--lp-filet-doux); min-height: 124px }
.lpm .cmp-col li svg { flex: none; width: 22px; height: 22px; margin-top: 2px }
.lpm .cmp-col--tradi li svg { color: var(--lp-encre); opacity: .35 }
.lpm .cmp-col--gk li svg { color: var(--lp-vert) }
.lpm .cmp-col li b { display: block; font-family: var(--lp-titre); font-weight: 700; font-size: 18px; line-height: 1.3 }
.lpm .cmp-col--tradi li b { color: var(--lp-texte) }
.lpm .cmp-col li span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--lp-texte-doux) }
.lpm .cmp-col--gk .pill { position: absolute; top: -14px; right: 24px; padding: 7px 12px; font-size: 11px; letter-spacing: .03em; text-transform: uppercase }

/* ---------- Q. Barre CTA collante ---------- */
.lpm .sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 12px var(--lp-gut);
  background: var(--lp-verre-fort);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--lp-filet);
  transform: translateY(100%); transition: transform .3s ease;
}
.lpm .sticky.show { transform: translateY(0) }
.lpm .sticky-in { width: 100%; max-width: var(--lp-rail); margin: 0 auto; display: flex; align-items: center; gap: 16px }
.lpm .sticky p { margin-right: auto; font-family: var(--lp-titre); font-weight: 800; font-size: 18px; line-height: 1.2 }
.lpm .sticky .cta { flex: none }

@media (prefers-reduced-motion: reduce) {
  .lpm .sticky, .lpm .cta, .lpm .mdl-nav, .lpm .mdl-dots button { transition: none }
  .lpm .mdl-track { scroll-behavior: auto }
}

/* ---------- S. Blocs de dossier (contenu QS) ----------
   Les quatre blocs de contenu ajoutés pour l'expérience de page Google Ads se lisent
   comme UNE SÉRIE, pas comme quatre sections de vente : filet de registre, suréchet à
   pastille (composant `.eyebrow` du §B, réutilisé tel quel), en-tête à gauche, notions
   en table à droite. Le compteur 01→04 de la maquette a été retiré le 8 septembre 2026. Titre à 36 px au lieu des 48 de `t-lg` et
   bande à 72 px au lieu de 120 : c'est ce qui rend leur poids visuel inférieur à celui du
   hero, des cartes modèle et du comparatif. Aucune valeur en dur, aucun composant dupliqué.
   Rendu par src/components/lp/DossierBloc.astro, qui ne porte aucun <style>. */
.lpm .dos { padding: clamp(48px, 6vw, 72px) var(--lp-gut) }
.lpm .dos--gris { background: var(--lp-fond) }

/* filet de registre : suréchet souligné d'encre */
.lpm .dos-hd {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 1px solid var(--lp-encre);
}
.lpm .dos-hd .eyebrow { margin: 0; font-size: 12px }
/* corps : en-tête à gauche, notions à droite */
.lpm .dos-g {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 72px); padding-top: 40px; align-items: start;
}
.lpm .dos-g > div > h2 { font-size: clamp(26px, 2.4vw, 36px); line-height: 1.12; letter-spacing: -.015em; text-wrap: pretty }
.lpm .dos-intro { margin-top: 20px; max-width: 46ch; font-size: 16px; line-height: 1.75; color: var(--lp-texte) }

/* une notion = un filet, un intitulé, un texte */
.lpm .dos-l {
  display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 32px;
  padding: 26px 0; border-top: 1px solid var(--lp-filet-doux);
}
.lpm .dos-l h3 {
  font-size: 14px; line-height: 1.25; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700;
}
.lpm .dos-l h3::before { content: ''; display: block; width: 22px; height: 3px; margin-bottom: 12px; background: var(--lp-jaune) }
.lpm .dos-l p { font-size: 15px; line-height: 1.75; color: var(--lp-texte) }

/* ============================ R. RESPONSIVE ============================== */

/* ---------- ≤ 1100 px : les grilles de trois passent à deux ---------- */
@media (max-width: 1100px) {
  .lpm .stats { grid-template-columns: repeat(2, 1fr); gap: 32px 24px }
  .lpm .stat .cap { white-space: normal }
  .lpm .mdl-g { grid-template-columns: repeat(2, 1fr); margin-top: 48px }
  .lpm .tar { grid-template-columns: 1fr }
  .lpm .tar-ph { min-height: 0; height: 420px }
  .lpm .simpl-panel { grid-template-columns: repeat(2, 1fr) }
  .lpm .tst-g { grid-template-columns: repeat(2, 1fr) }
  .lpm .jrn { grid-template-columns: repeat(2, 1fr) }
  .lpm .jrn-c { min-height: 0 }
  .lpm .jrn-c .top { min-height: 0 }
  .lpm .jrn-c .top img { height: 200px }
  .lpm .smp { grid-template-columns: repeat(2, 1fr); margin-top: 48px }

  /* blocs de dossier : l'en-tête passe au-dessus de la table (§S) */
  .lpm .dos-g { grid-template-columns: 1fr; gap: 32px; padding-top: 32px }
  .lpm .dos-l { grid-template-columns: 140px minmax(0, 1fr); gap: 24px }
}

/* ---------- ≤ 720 px : une colonne, CTA pleine largeur ---------- */
@media (max-width: 720px) {
  .lpm-page { padding-bottom: 76px }

  /* header : plus près des bords. Le CTA y est RETIRÉ et le logo centré : le tunnel
     reste couvert par les deux CTA du hero, visibles d'entrée, puis par la barre
     collante dès 60 % du premier écran franchis. `display:none` et non une opacité :
     le CTA sort aussi de l'ordre de tabulation et de l'arbre d'accessibilité.
     `justify-content: center` remplace le `space-between` de `.hd-in`, et le
     `padding-left` du logo repasse à 0, sinon le centrage serait décalé de 2 px. */
  .lpm .hd { top: 8px; left: 8px; right: 8px; padding: 6px }
  .lpm .hd-in { justify-content: center }
  .lpm .hd-logo { padding-left: 0 }
  .lpm .hd-logo img { width: 128px }
  .lpm .hd .cta { display: none }

  /* hero : voile VERTICAL (le texte occupe toute la largeur) et photo cadrée à 60 % */
  .lpm .hero { min-height: 92svh; padding-bottom: 72px }
  .lpm .hero > img { object-position: 60% center }
  .lpm .hero-scrim { background: linear-gradient(to bottom, var(--lp-voile-30) 0%, var(--lp-voile-42) 42%, var(--lp-voile-88) 100%) }
  .lpm .hero-in h1 { max-width: none }

  /* tous les CTA en pleine largeur, empilés */
  .lpm .cta-row, .lpm .cta-band { flex-direction: column; max-width: none }
  .lpm .cta-row .cta, .lpm .cta-band .cta { width: 100% }
  .lpm .cta { padding: 20px 24px }
  .lpm .cta-band { margin-top: 48px }
  .lpm .cta-band--serre { margin-top: 40px }

  .lpm .stats { gap: 28px 20px }
  .lpm .mani-ph { max-width: 260px; margin-bottom: 32px }
  .lpm .smp { grid-template-columns: 1fr; gap: 16px }
  .lpm .smp-c { padding: 28px 20px 24px }
  .lpm .smp-c h3 { max-width: 18ch }
  .lpm .smp-c p { max-width: 34ch; font-size: 15px; line-height: 1.6 }
  .lpm .smp-c img { max-width: 190px; padding-top: 24px }

  .lpm .mdl-g { grid-template-columns: 1fr; gap: 24px }
  .lpm .mdl-cta { min-height: 0; padding: 28px }
  .lpm .mdl-cta > img { width: 190px; right: -10px; bottom: -6px }
  .lpm .mdl-hd h2, .lpm .mdl-hd p { max-width: none }
  /* pas de survol au doigt : les flèches restent visibles */
  .lpm-page.js .mdl-nav { opacity: 1 }

  .lpm .tar-ph { height: 280px }
  .lpm .tar-c li span { font-size: 16px }

  /* Témoignage vidéo : bouton de lecture et citation à l'échelle de la carte, qui
     ne fait plus que 219 px de haut en 390 px de large. */
  .lpm .itv { margin-bottom: 40px }
  .lpm .itv-play { width: 60px; height: 60px }
  .lpm .itv-play span { margin-left: 4px; border-top-width: 10px; border-bottom-width: 10px; border-left-width: 16px }
  .lpm .itv-facade .pill { top: 14px; left: 14px }
    
  .lpm .simpl-panel, .lpm .tst-g, .lpm .jrn { grid-template-columns: 1fr }
  .lpm .simpl-panel { gap: 40px }
  .lpm .jrn-c { padding: 24px }
  .lpm .jrn-c .top img { height: 160px }
  /* le filet de liaison n'a plus de rangée à relier */
  .lpm .jrn-c:not(:last-child)::after { display: none }

  .lpm .cmp { grid-template-columns: 1fr; gap: 24px; padding: 20px }
  .lpm .cmp-col { padding: 20px }
  .lpm .cmp-col li { min-height: 0; padding: 18px 0 }
  .lpm .cmp-col--gk .pill { right: 16px }

  /* barre collante : la phrase disparaît, les deux CTA se partagent la largeur */
  .lpm .sticky { padding: 10px 12px }
  /* blocs de dossier : la table passe en une colonne, l'intitulé au-dessus de son texte */
  .lpm .dos { padding-block: 48px }
  .lpm .dos-l { grid-template-columns: 1fr; gap: 10px; padding: 22px 0 }
  .lpm .dos-l h3 { font-size: 13px }

  .lpm .sticky p { display: none }
  .lpm .sticky-in { gap: 10px }
  /* les deux libellés doivent tenir sur une ligne : sinon la barre grandit et
     les deux boutons n'ont plus la même hauteur */
  .lpm .sticky .cta { flex: 1 1 0; min-width: 0; padding: 14px 6px; font-size: 13px; white-space: nowrap }
}

/* ---------- ≤ 380 px : marge de sécurité sur les très petits écrans ---------- */
@media (max-width: 380px) {
  .lpm .hd-logo img { width: 112px }
  /* (la règle qui compactait le CTA du header a été retirée : il n'est plus rendu
     sous 720 px, elle n'avait plus de cible.) */
  .lpm .sticky .cta { font-size: 12px }
}