/** Shopify CDN: Minification failed

Line 558:8 Expected identifier but found whitespace
Line 558:13 Unexpected ";"
Line 604:22 Expected identifier but found whitespace
Line 604:29 Unexpected ";"
Line 618:11 Expected identifier but found whitespace
Line 618:20 Unexpected ";"
Line 647:10 Expected identifier but found whitespace
Line 647:11 Unexpected "0"
Line 678:9 Expected identifier but found whitespace
Line 678:10 Unexpected "0"
... and 14 more hidden warnings

**/
/*
 * lp-marque.css — COLONNE DOUCHE, VERSION 3 « SOURCE ».
 *
 * Troisième direction, à l'opposé des deux premières :
 *
 *            V1 « pierre froide »   V2 « atelier »        V3 « source »
 *   fond     blanc / pierre         graphite              bleu glacé + cartes blanches
 *   formes   angles droits          angles droits         arrondis francs, boutons pilule
 *   ombres   aucune                 aucune                douces et portantes
 *   titres   serif italique         CAPITALES serrées      Outfit, casse normale
 *   texte    Geist                  Space Grotesk          Plus Jakarta Sans
 *   couleur  doré décoratif         laiton sur noir        doré, une seule teinte
 *
 * Une seule teinte, le doré de la finition or brossé, déclinée en valeurs :
 * doré lumineux pour les remplissages, doré assombri pour l'écriture, ivoire
 * pour le fond. Les filets des versions précédentes laissent place à des
 * cartes blanches posées sur l'ivoire — le contraire exact du parti pris
 * typographique austère des deux premières.
 *
 * Les couleurs viennent des réglages du thème (--lp-*). Ne les écris jamais
 * en dur : le client doit pouvoir les changer depuis l'éditeur Shopify.
 *
 *   --lp-fond      #FAF7F2  ivoire chaud
 *   --lp-surface   #FFFFFF  cartes
 *   --lp-ligne     #E9E1D5
 *   --lp-texte     #231E17  encre chaude
 *   --lp-doux      #6B6155
 *   --lp-accent    #C9922F  doré — REMPLISSAGES uniquement
 *   --lp-sur-accent #231E17 encre posée SUR le doré
 *   --lp-sombre    #231E17  bandes sombres
 *
 * ⚠️ --lp-accent ne doit JAMAIS servir de couleur de texte sur fond clair :
 *    mesuré à 2,8:1. Utilise --lp-accent-texte, qui en est la version
 *    assombrie (mesurée entre 6,5 et 6,8:1 selon les fonds).
 *
 * Outfit et Plus Jakarta Sans sont sous licence OFL : hébergées dans le thème.
 */

@font-face {
  font-family: "Outfit LP";
  src: url("lp-outfit.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jakarta LP";
  src: url("lp-jakarta.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --lp-police-titre: "Outfit LP", "Avenir Next", system-ui, sans-serif;
  --lp-police-texte: "Jakarta LP", system-ui, -apple-system, sans-serif;
  --lp-graisse-titre: 600;
  --lp-style-titre: normal;
  --lp-graisse-texte: 400;
  --lp-graisse-texte-forte: 600;

  --lp-ambre: var(--lp-succes);
  /* Le doré de REMPLISSAGE (--lp-accent) est lumineux : sur blanc il plafonne
     à 2,8:1, il ne peut donc pas servir de couleur de texte. On en dérive une
     version assombrie, réservée à l'écriture et aux icônes sur fond clair. */
  --lp-accent-texte: color-mix(in srgb, var(--lp-accent) 58%, #000);
  --lp-accent-clair: color-mix(in srgb, var(--lp-accent) 72%, #fff);
  --lp-filet: 1px solid var(--lp-ligne);

  /* Les ombres sont LE marqueur de cette version : douces, basses, jamais
     dures. Trois niveaux seulement, pour que la page reste calme. */
  --lp-ombre-1: 0 1px 2px rgba(35, 30, 23, 0.04), 0 4px 12px rgba(35, 30, 23, 0.05);
  --lp-ombre-2: 0 2px 4px rgba(35, 30, 23, 0.05), 0 12px 28px rgba(35, 30, 23, 0.08);
  --lp-ombre-3: 0 4px 8px rgba(35, 30, 23, 0.06), 0 24px 56px rgba(35, 30, 23, 0.12);

  --lp-r-carte: 22px;
  --lp-r-petit: 14px;
  --lp-pas: clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

/* ── Base ─────────────────────────────────────────────────────────────── */
body.lp-body {
  background: var(--lp-fond);
  color: var(--lp-texte);
  font-size: 1rem;
  line-height: 1.68;
  letter-spacing: -0.003em;
}
::selection { background: var(--lp-accent); color: var(--lp-sur-accent); }

.lp-section {
  /* Les trois facteurs viennent des curseurs de l'éditeur, posés en style
     direct sur la section. Absents (ou à 100 %), ils valent 1 : l'espacement
     est alors exactement celui d'origine. On garde `--lp-pas`, qui est un
     `clamp()` dépendant de la largeur — une valeur en pixels figée aurait
     donné la même respiration sur téléphone et sur grand écran. */
  padding-top: calc(var(--lp-pas) * var(--lp-haut, 1));
  padding-bottom: calc(var(--lp-pas) * var(--lp-bas, 1));
  padding-left: 0; padding-right: 0;
  background: var(--lp-fond); color: var(--lp-texte);
}
.lp-section--compact {
  padding-top: calc(var(--lp-pas) * 0.5 * var(--lp-haut, 1));
  padding-bottom: calc(var(--lp-pas) * 0.5 * var(--lp-bas, 1));
}
.lp-section--surface { background: #ffffff; }
.lp-section--sombre { background: var(--lp-sombre); color: var(--lp-sur-sombre); }
.lp-section--sombre .lp-intro,
.lp-section--sombre .lp-atout__texte,
.lp-section--sombre .lp-spec__texte { color: #C4B9A8; opacity: 1; }

/* ── Typographie ──────────────────────────────────────────────────────── */
.lp-surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lp-ambre) 14%, transparent);
  /* L'ambre pur sur sa pastille pâle plafonne à 3,5:1 — sous le seuil de
     4,5:1 exigé à ce corps (12 px). Il faut descendre jusqu'au bronze pour
     que l'étiquette reste lisible ; la teinte vient toujours du réglage. */
  color: color-mix(in srgb, var(--lp-ambre) 55%, #000);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.2;
}
.lp-surtitre::before {
  content: "";
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: var(--lp-ambre); flex: 0 0 auto;
}
.lp-section--sombre .lp-surtitre {
  background: color-mix(in srgb, var(--lp-ambre) 22%, transparent);
  color: var(--lp-accent-clair); opacity: 1;
}
.lp-section--sombre .lp-surtitre::before { background: var(--lp-accent-clair); }

.lp-titre, .lp-heros__titre {
  font-family: var(--lp-police-titre);
  font-weight: 600;
  font-size: clamp(2rem, 1.1rem + 3vw, calc(var(--lp-taille-titre) * 1));
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-transform: none;
  margin-top: calc(1.3rem * var(--lp-interieur, 1));
  text-wrap: balance;
}
/* L'emphase se fait en turquoise, avec un trait souple dessous. */
.lp-titre em, .lp-heros__titre em {
  font-style: normal;
  color: var(--lp-accent-texte);
  background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--lp-accent) 18%, transparent) 62%);
}
.lp-section--sombre .lp-titre em { color: var(--lp-accent-clair); opacity: 1; background-image: none; }

.lp-intro { margin-top: calc(1.25rem * var(--lp-interieur, 1)); font-size: 1.03rem; line-height: 1.72; color: var(--lp-doux); max-width: 40rem; }
.lp-tete { max-width: 44rem; }
.lp-note-bas { font-size: 0.8rem; color: var(--lp-doux); }

h3, .lp-benefice__titre, .lp-etape__titre, .lp-atout__titre, .lp-confiance__titre,
.lp-jalon__titre, .lp-faq__question, .lp-offre__nom, .lp-compat__intitule,
.lp-savoir__titre, .lp-compat__verdict-titre {
  font-family: var(--lp-police-titre);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ── Boutons en pilule ────────────────────────────────────────────────── */
.lp-bouton {
  min-height: 3.5rem;
  padding: 0 2.1rem;
  border-radius: 999px;
  font-family: var(--lp-police-titre);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: var(--lp-ombre-1);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.lp-bouton--plein { background: var(--lp-accent); color: var(--lp-sur-accent); border-color: transparent; }
.lp-bouton--plein:hover { background: color-mix(in srgb, var(--lp-accent) 88%, #fff); transform: translateY(-1px); box-shadow: var(--lp-ombre-2); }
.lp-bouton--clair { background: #fff; color: var(--lp-texte); border-color: transparent; }
.lp-bouton--clair:hover { transform: translateY(-1px); box-shadow: var(--lp-ombre-2); }
.lp-bouton--contour { background: #fff; border-color: var(--lp-ligne); color: var(--lp-texte); box-shadow: none; }
.lp-bouton--contour:hover { border-color: var(--lp-accent-texte); color: var(--lp-accent-texte); background: #fff; }

.lp-lien { font-weight: 600; color: var(--lp-accent-texte); text-decoration-color: color-mix(in srgb, var(--lp-accent) 40%, transparent); text-underline-offset: 5px; }
.lp-lien:hover { text-decoration-color: currentColor; }

/* ── Bandeau et en-tête ───────────────────────────────────────────────── */
.lp-annonce { background: var(--lp-sombre); color: var(--lp-sur-sombre); }
.lp-annonce__item { font-size: 0.8rem; }
.lp-annonce__item::before { color: var(--lp-ambre); }

.lp-entete__barre {
  border-bottom: 0;
  background: color-mix(in srgb, var(--lp-fond) 88%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lp-entete__marque { font-family: var(--lp-police-titre); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.03em; }
.lp-entete__nav { font-size: 0.9rem; }
.lp-entete__nav a { color: var(--lp-doux); text-decoration: none; }
.lp-entete__nav a:hover { color: var(--lp-accent-texte); }
.lp-entete__cta { min-height: 2.75rem; padding: 0 1.4rem; font-size: 0.88rem; }

/* ── Héros ────────────────────────────────────────────────────────────── */
.lp-heros--panneau {
  padding-top: calc(1.5rem * var(--lp-haut, 1));
  padding-bottom: calc(var(--lp-pas) * var(--lp-bas, 1));
  padding-left: 0; padding-right: 0;
}
.lp-heros--panneau .lp-conteneur { max-width: var(--lp-largeur); padding: 0 1.25rem; }
@media (min-width: 750px) { .lp-heros--panneau .lp-conteneur { padding: 0 2rem; } }

/* Le héros devient une grande carte blanche posée sur le fond glacé : c'est
   la rupture la plus nette avec les deux versions à pleins bords. */
.lp-heros--panneau .lp-heros__grille {
  gap: 0;
  align-items: stretch;
  background: #fff;
  border-radius: var(--lp-r-carte);
  overflow: hidden;
  box-shadow: var(--lp-ombre-3);
}
@media (min-width: 990px) {
  .lp-heros--panneau.lp-heros--image-droite .lp-heros__grille {
    grid-template-columns: minmax(0, 5.6fr) minmax(0, 5.4fr);
    min-height: min(74vh, 640px);
  }
}
.lp-heros--panneau .lp-heros__contenu {
  background: #fff;
  padding: 2.25rem 1.5rem 2.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
@media (min-width: 750px) { .lp-heros--panneau .lp-heros__contenu { padding: 2.75rem 2.25rem; } }
@media (min-width: 990px) {
  .lp-heros--panneau .lp-heros__contenu { padding: 3rem clamp(2.25rem, 3vw, 3.5rem); }
  /* Titre plafonné pour que le bouton reste au-dessus du pli. */
  .lp-heros--panneau .lp-heros__titre { font-size: clamp(1.85rem, 0.8rem + 2.2vw, 2.45rem); }
}
.lp-heros__sous-titre { margin-top: calc(1.1rem * var(--lp-interieur, 1)); font-size: 1rem; line-height: 1.68; color: var(--lp-doux); max-width: 32rem; }

/* Le média remplit sa colonne sans la dimensionner : en `height: 100%` dans
   un parent de hauteur auto, une image verticale reprend son ratio et
   étire toute la ligne de la grille. */
@media (min-width: 990px) {
  .lp-heros--panneau .lp-heros__media-bureau { position: relative; overflow: hidden; }
  .lp-heros--panneau .lp-heros__media-bureau .lp-galerie { height: 100%; }
  .lp-heros--panneau .lp-heros__media-bureau .lp-galerie__vue { height: 100%; }
  .lp-heros--panneau .lp-heros__media-bureau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 989px) {
  .lp-heros--panneau .lp-heros__media-mobile { margin: 1.5rem -1.5rem 0; }
  .lp-heros--panneau .lp-heros__media-bureau { display: none; }
}
@media (min-width: 750px) and (max-width: 989px) {
  .lp-heros--panneau .lp-heros__media-mobile { margin: 1.5rem -2.25rem 0; }
}

.lp-prix { margin-top: calc(1.5rem * var(--lp-interieur, 1)); }
.lp-prix__actuel {
  font-family: var(--lp-police-titre);
  font-weight: 600;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.8rem);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--lp-texte);
}
.lp-prix__barre { color: var(--lp-doux); font-size: 0.95rem; }
.lp-prix__mention { margin-top: calc(0.55rem * var(--lp-interieur, 1)); font-size: 0.86rem; color: var(--lp-doux); }
.lp-prix__remise { background: var(--lp-ambre); color: var(--lp-sur-accent); border-radius: 999px; font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.7rem; }

.lp-heros__actions { margin-top: calc(1.4rem * var(--lp-interieur, 1)); }

/* Les micro-preuves deviennent des puces arrondies. */
.lp-preuves { margin-top: calc(1.5rem * var(--lp-interieur, 1)); font-size: 0.84rem; color: var(--lp-doux); }
.lp-preuves .lp-icone { width: 1.05rem; height: 1.05rem; color: var(--lp-accent-texte); }
@media (min-width: 750px) { .lp-preuves { display: flex; flex-wrap: wrap; gap: calc(0.5rem * var(--lp-interieur, 1)) 0.6rem; } }
.lp-preuves li {
  display: inline-flex; align-items: center; gap: calc(0.45rem * var(--lp-interieur, 1));
  background: var(--lp-fond); border-radius: 999px; padding: 0.4rem 0.85rem;
}

/* Les images s'arrondissent elles aussi. */
.lp-galerie__vue { border-radius: 0; overflow: hidden; }
.lp-benefice__media img, .lp-duo__media img, .lp-offre__media img,
.lp-fiche__media img, .lp-compat__media img {
  border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-2);
}

/* ── Vidéo ────────────────────────────────────────────────────────────── */
.lp-demo__tete { margin-bottom: calc(2.5rem * var(--lp-interieur, 1)); }
.lp-demo__cadre {
  position: relative; width: 100%; max-width: 400px; margin: 0 auto;
  aspect-ratio: 640 / 1138; background: #fff;
  overflow: hidden; border: 0; border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-3);
}
.lp-demo__cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-demo__legende { margin-top: calc(1rem * var(--lp-interieur, 1)); text-align: center; font-size: 0.84rem; color: var(--lp-doux); }

/* ── Réassurance : six cartes, plus une grille à filets ──────────────── */
.lp-confiance { background: var(--lp-fond); border: 0; }
.lp-confiance__liste { gap: calc(0.75rem * var(--lp-interieur, 1)); }
@media (min-width: 990px) { .lp-confiance__liste { grid-template-columns: repeat(6, 1fr); gap: calc(1rem * var(--lp-interieur, 1)); } }
.lp-confiance__item {
  padding: calc(1.4rem * var(--lp-interieur, 1)) 1.2rem;
  background: #fff;
  border: 0;
  border-radius: var(--lp-r-petit);
  box-shadow: var(--lp-ombre-1);
}
.lp-confiance__item .lp-icone { color: var(--lp-accent-texte); width: 1.4rem; height: 1.4rem; }
.lp-confiance__titre { margin-top: calc(0.8rem * var(--lp-interieur, 1)); font-size: 0.92rem; font-weight: 600; }
.lp-confiance__texte { margin-top: calc(0.3rem * var(--lp-interieur, 1)); font-size: 0.82rem; color: var(--lp-doux); line-height: 1.55; }

/* ── Bénéfices ────────────────────────────────────────────────────────── */
.lp-benefices--alterne { gap: calc(4.5rem * var(--lp-interieur, 1)); }
@media (min-width: 990px) { .lp-benefices--alterne { gap: calc(6rem * var(--lp-interieur, 1)); } }
.lp-benefice__icone { color: var(--lp-accent-texte); }
.lp-benefice__titre { font-size: clamp(1.5rem, 1rem + 1.3vw, 2rem); font-weight: 600; line-height: 1.14; letter-spacing: -0.028em; }
.lp-benefice__texte { margin-top: calc(0.9rem * var(--lp-interieur, 1)); color: var(--lp-doux); max-width: 30rem; }

/* ── Chiffres : trois cartes blanches sur la bande pétrole ───────────── */
.lp-specs__tete { max-width: 44rem; }
.lp-specs { display: grid; gap: calc(1rem * var(--lp-interieur, 1)); margin-top: calc(3rem * var(--lp-interieur, 1)); }
@media (min-width: 750px) { .lp-specs { grid-template-columns: repeat(3, 1fr); } }
.lp-spec {
  padding: 2rem 1.75rem;
  border: 0;
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--lp-r-carte);
}
.lp-section--clair .lp-spec, .lp-section--surface .lp-spec { background: #fff; box-shadow: var(--lp-ombre-1); }
.lp-spec__valeur {
  font-family: var(--lp-police-titre);
  font-weight: 600;
  font-size: clamp(2.8rem, 1.8rem + 3.6vw, 4.2rem);
  line-height: 0.95; letter-spacing: -0.045em;
}
.lp-spec__unite { font-size: 0.36em; letter-spacing: 0; margin-left: 0.22em; }
.lp-spec__titre { margin-top: calc(0.85rem * var(--lp-interieur, 1)); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-accent-clair); }
.lp-section--clair .lp-spec__titre, .lp-section--surface .lp-spec__titre { color: color-mix(in srgb, var(--lp-ambre) 85%, #000); }
.lp-spec__texte { margin-top: calc(0.7rem * var(--lp-interieur, 1)); font-size: 0.88rem; line-height: 1.65; }

/* ── Matériaux ────────────────────────────────────────────────────────── */
.lp-atouts { gap: calc(0.6rem * var(--lp-interieur, 1)); }
.lp-atout {
  padding: 1.15rem 1.25rem;
  border: 0; border-radius: var(--lp-r-petit);
  background: #fff; box-shadow: var(--lp-ombre-1);
}
.lp-section--sombre .lp-atout { background: rgba(255, 255, 255, 0.07); box-shadow: none; }
.lp-atout__icone { color: var(--lp-accent-texte); }
.lp-section--sombre .lp-atout__icone { color: var(--lp-accent-clair); }
.lp-atout__titre { font-size: 0.95rem; font-weight: 600; }
.lp-atout__texte { font-size: 0.86rem; margin-top: calc(0.3rem * var(--lp-interieur, 1)); }
.lp-aparte {
  margin-top: calc(2rem * var(--lp-interieur, 1)); padding: 1.2rem 1.4rem;
  border: 0; border-radius: var(--lp-r-petit);
  background: color-mix(in srgb, var(--lp-ambre) 14%, transparent);
  color: inherit; font-size: 0.98rem; font-weight: 500;
}

/* ── Fiche technique ──────────────────────────────────────────────────── */
.lp-fiche { display: grid; gap: calc(3rem * var(--lp-interieur, 1)); }
@media (min-width: 990px) { .lp-fiche { grid-template-columns: 0.8fr 1.2fr; gap: calc(4rem * var(--lp-interieur, 1)); align-items: start; } }
.lp-fiche__media { margin-top: calc(2rem * var(--lp-interieur, 1)); }
.lp-fiche__table {
  margin: 0; border-top: 0;
  background: #fff; border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-1); padding: 0.5rem 1.5rem;
}
.lp-fiche__ligne { display: grid; grid-template-columns: 1fr; gap: 0.2rem; padding: calc(0.85rem * var(--lp-interieur, 1)) 0; border-bottom: var(--lp-filet); }
.lp-fiche__ligne:last-child { border-bottom: 0; }
@media (min-width: 560px) { .lp-fiche__ligne { grid-template-columns: 0.85fr 1.15fr; gap: calc(1.5rem * var(--lp-interieur, 1)); align-items: baseline; } }
.lp-fiche__ligne dt { font-size: 0.86rem; color: var(--lp-doux); }
.lp-fiche__ligne dd { margin: 0; font-size: 0.92rem; font-weight: 600; }

.lp-savoir {
  margin-top: calc(2rem * var(--lp-interieur, 1)); padding: 1.75rem;
  border-top: 0; border-radius: var(--lp-r-carte);
  background: color-mix(in srgb, var(--lp-ambre) 10%, transparent);
}
.lp-savoir__titre { font-size: 1.1rem; font-weight: 600; }
.lp-savoir__liste { margin-top: calc(1.1rem * var(--lp-interieur, 1)); }
.lp-savoir__liste li { padding: 0.9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--lp-texte) 10%, transparent); }
.lp-savoir__liste li:last-child { border-bottom: 0; }
.lp-savoir__point { display: block; font-size: 0.93rem; font-weight: 600; }
.lp-savoir__texte { display: block; margin-top: calc(0.3rem * var(--lp-interieur, 1)); font-size: 0.87rem; line-height: 1.65; color: var(--lp-doux); }

/* ── Comparatif ───────────────────────────────────────────────────────── */
.lp-comparatif { border: 0; border-radius: var(--lp-r-carte); overflow: hidden; background: #fff; box-shadow: var(--lp-ombre-1); }
.lp-comparatif th, .lp-comparatif td { border-color: var(--lp-ligne); font-size: 0.88rem; }
.lp-comparatif thead th { font-size: 0.8rem; font-weight: 600; color: var(--lp-doux); text-transform: none; letter-spacing: 0; }
.lp-comparatif th[scope="row"] { font-weight: 500; color: var(--lp-texte); }
.lp-comparatif td:nth-child(2), .lp-comparatif thead th:nth-child(2) { background: color-mix(in srgb, var(--lp-accent) 7%, transparent); }
.lp-comparatif thead th:nth-child(2) { color: var(--lp-accent-texte); font-weight: 700; }
.lp-oui { color: var(--lp-accent-texte); }
/* Les croix du comparatif PORTENT du sens : elles ne peuvent pas rester
   dans un gris décoratif (mesuré à 2,2:1). */
.lp-non { color: var(--lp-doux); }

/* ── Livraison ────────────────────────────────────────────────────────── */
.lp-jalon {
  border-top: 0; padding: 1.3rem 1.4rem; margin-bottom: calc(0.6rem * var(--lp-interieur, 1));
  background: #fff; border-radius: var(--lp-r-petit); box-shadow: var(--lp-ombre-1);
}
.lp-jalon:last-child { border-bottom: 0; }
.lp-jalon__quand { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-accent-texte); }
.lp-jalon__titre { margin-top: calc(0.4rem * var(--lp-interieur, 1)); font-size: 1rem; font-weight: 600; }
.lp-jalon__texte { margin-top: calc(0.3rem * var(--lp-interieur, 1)); font-size: 0.88rem; color: var(--lp-doux); }

/* ── Étapes ───────────────────────────────────────────────────────────── */
.lp-etape__num {
  color: var(--lp-sur-accent); background: var(--lp-accent);
  width: 2rem; height: 2rem; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 700;
}
.lp-etapes--liste .lp-etape__titre { font-size: 1.15rem; font-weight: 600; font-style: normal; }
.lp-etape__texte { color: var(--lp-doux); font-size: 0.92rem; }
.lp-encart { border: 0; border-radius: var(--lp-r-carte); background: #fff; box-shadow: var(--lp-ombre-2); padding: 1.6rem; }
.lp-encart__chiffre { font-family: var(--lp-police-titre); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--lp-accent-texte); }
.lp-encart__texte { margin-top: calc(0.5rem * var(--lp-interieur, 1)); font-size: 0.85rem; color: var(--lp-doux); }
.lp-coches li { font-size: 0.9rem; }
.lp-coches .lp-icone { color: var(--lp-accent-texte); }

/* ── Garantie ─────────────────────────────────────────────────────────── */
.lp-garantie .lp-sceau__anneau { color: var(--lp-accent-clair); }
.lp-garantie .lp-sceau__chiffre { font-family: var(--lp-police-titre); font-weight: 600; letter-spacing: -0.04em; }
.lp-garantie .lp-sceau__filet { stroke: rgba(255, 255, 255, 0.22); }
.lp-garantie__point {
  border: 0; padding: 0.85rem 1.1rem; margin-bottom: calc(0.5rem * var(--lp-interieur, 1));
  background: rgba(255, 255, 255, 0.07); border-radius: var(--lp-r-petit); font-size: 0.9rem;
}
.lp-garantie__point .lp-icone { color: var(--lp-accent-clair); }

/* ── Compatibilité ────────────────────────────────────────────────────── */
.lp-compat { display: grid; gap: calc(3rem * var(--lp-interieur, 1)); }
@media (min-width: 990px) { .lp-compat { grid-template-columns: 0.85fr 1.15fr; gap: calc(4rem * var(--lp-interieur, 1)); align-items: start; } }
.lp-compat__media { margin-top: calc(2rem * var(--lp-interieur, 1)); }
.lp-compat__corps {
  background: #fff; border: 0; border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-2); padding: 1.75rem;
}
@media (min-width: 750px) { .lp-compat__corps { padding: 2.5rem; } }
.lp-compat__q + .lp-compat__q { margin-top: calc(2rem * var(--lp-interieur, 1)); padding-top: calc(2rem * var(--lp-interieur, 1)); border-top: var(--lp-filet); }
.lp-compat__corps[data-interactif] .lp-compat__q + .lp-compat__q { margin-top: 0; padding-top: 0; border-top: 0; }
.lp-compat__num { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; color: var(--lp-accent-texte); }
.lp-compat__intitule { margin-top: calc(0.7rem * var(--lp-interieur, 1)); font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.45rem); font-weight: 600; line-height: 1.25; }
.lp-compat__choix { margin-top: calc(1.3rem * var(--lp-interieur, 1)); display: grid; gap: calc(0.6rem * var(--lp-interieur, 1)); }
.lp-compat__option {
  width: 100%; text-align: left; padding: 1rem 1.2rem;
  background: var(--lp-fond); border: 1px solid transparent; border-radius: var(--lp-r-petit);
  font-size: 0.92rem; font-weight: 500;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.lp-compat__option:hover { border-color: var(--lp-accent-texte); background: #fff; transform: translateX(2px); }
.lp-compat__aide { margin-top: calc(1rem * var(--lp-interieur, 1)); font-size: 0.82rem; line-height: 1.6; color: var(--lp-doux); }
.lp-compat__verdict-titre { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem); font-weight: 600; letter-spacing: -0.03em; }
.lp-compat__verdict-texte { margin-top: calc(0.75rem * var(--lp-interieur, 1)); font-size: 0.93rem; line-height: 1.7; color: var(--lp-doux); }
.lp-compat__verdict .lp-commande, .lp-compat__verdict .lp-bouton { margin-top: 1.4rem; }
.lp-compat__recommencer { margin-top: calc(1.4rem * var(--lp-interieur, 1)); font-size: 0.86rem; color: var(--lp-doux); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; }

/* ── FAQ : chaque question est une carte ──────────────────────────────── */
.lp-faq__liste { border-top: 0; display: grid; gap: calc(0.6rem * var(--lp-interieur, 1)); }
.lp-faq__item {
  border-bottom: 0; border-radius: var(--lp-r-petit);
  background: #fff; box-shadow: var(--lp-ombre-1); padding: 0 1.4rem;
}
.lp-faq__question { padding: calc(1.25rem * var(--lp-interieur, 1)) 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -0.015em; }
.lp-faq__reponse { padding-bottom: 1.35rem; color: var(--lp-doux); font-size: 0.93rem; max-width: 46rem; }
.lp-faq__reponse p + p { margin-top: calc(0.75rem * var(--lp-interieur, 1)); }

/* ── Bloc d'offre ─────────────────────────────────────────────────────── */
.lp-offre { background: var(--lp-fond); }
.lp-offre__carte {
  background: #fff; border: 0; border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-3); padding: 2rem;
}
@media (min-width: 990px) { .lp-offre__carte { padding: 2.75rem; } }
.lp-offre__nom { font-size: 1.35rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; }
.lp-inclus li { border-top: var(--lp-filet); padding: 0.85rem 0; font-size: 0.91rem; }
.lp-inclus li:first-child { border-top: 0; }
.lp-inclus .lp-icone { color: var(--lp-accent-texte); }
.lp-variantes__liste label { border-radius: 999px; border: 1px solid var(--lp-ligne); font-size: 0.9rem; font-weight: 500; padding: 0.6rem 1.2rem; }
.lp-variantes__liste input:checked + label,
.lp-variantes__liste label:has(input:checked) { border-color: var(--lp-accent); background: var(--lp-accent); color: var(--lp-sur-accent); }
.lp-paiements__texte { font-size: 0.82rem; color: var(--lp-doux); }

/* ── Barre d'achat mobile ─────────────────────────────────────────────── */
.lp-barre {
  border-top: 0;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 -4px 24px rgba(35, 30, 23, 0.1);
}
.lp-barre__prix { font-family: var(--lp-police-titre); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
.lp-barre__sous { font-size: 0.76rem; color: var(--lp-doux); }

.lp-whatsapp { border-radius: 999px; box-shadow: var(--lp-ombre-2); }
.lp-whatsapp__texte--long { font-size: 0.84rem; }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.lp-pied { background: var(--lp-sombre); color: var(--lp-sur-sombre); }
.lp-pied__marque { font-family: var(--lp-police-titre); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; }
.lp-pied__texte { color: #C4B9A8; font-size: 0.88rem; max-width: 24rem; }
.lp-pied__titre { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-accent-clair); }
.lp-pied__liens a { color: #D9CFBF; text-decoration: none; font-size: 0.89rem; }
.lp-pied__liens a:hover { color: #fff; }
.lp-pied__bas { border-top: 1px solid rgba(255, 255, 255, 0.12); color: #A0968A; font-size: 0.8rem; }

/* ── Pages légales ────────────────────────────────────────────────────── */
.shopify-policy__container { max-width: 44rem; padding: 4.5rem 1.25rem; }
.shopify-policy__title h1 { font-family: var(--lp-police-titre); font-weight: 600; letter-spacing: -0.03em; }
.shopify-policy__body { color: var(--lp-doux); line-height: 1.75; }
.shopify-policy__body h2 { font-family: var(--lp-police-titre); font-weight: 600; color: var(--lp-texte); margin-top: 2.2rem; }

/* ── Accessibilité et mouvement ───────────────────────────────────────── */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--lp-accent) 55%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .js-lp-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
  .js-lp-reveal.est-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══ Narration produit, portée depuis la V4 ═════════════════════════════
   Même mécanique — le produit reste fixé pendant que les étapes défilent,
   la zone concernée s'éclaire — mais habillée aux couleurs de CETTE
   version : ivoire, cartes blanches, doré. Le bleu écran de la V4 n'existe
   pas ici : c'est le doré qui porte la progression et la mise en lumière. */


  width: auto; max-width: 100%; max-height: 68vh;
  transform-origin: var(--zx, 50%) var(--zy, 50%);
  transform: scale(var(--zoom, 1));
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: drop-shadow(0 30px 60px rgba(35, 30, 23, 0.18));
}
/* Sur fond ivoire, on n'assombrit pas : on ÉCLAIRCIT le reste de la colonne
   pour la faire reculer. L'inverse de la V4, pour le même effet. */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--zx, 50%) var(--zy, 50%),
    transparent 0, transparent 14%, color-mix(in srgb, var(--lp-fond) 72%, transparent) 34%);
  transition: background 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
  position: absolute; width: 26%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--lp-accent) 28%, transparent), transparent 68%);
  pointer-events: none; transition: left 900ms ease, top 900ms ease;
}

  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--lp-texte) 35%, transparent);
  border-left: 2px solid var(--lp-ligne); padding-left: 0.55rem;
  transition: color 0.4s ease, border-color 0.4s ease;
}

  position: absolute; inset: 0;
  opacity: 0; transform: translateY(24px); pointer-events: none;
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

  margin-top: calc(0.9rem * var(--lp-interieur, 1));
  font-family: var(--lp-police-titre);
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 3rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.03em;
}
  margin-top: calc(2rem * var(--lp-interieur, 1)); padding-top: 1rem; border-top: var(--lp-filet);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-accent-texte);
}

/* Mobile : bande de cartes qui défile au doigt. */
@media (max-width: 989px) {
    display: grid; grid-auto-flow: column; grid-auto-columns: 84%;
    gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -1.25rem; padding: 0 1.25rem 1.5rem;
    -webkit-overflow-scrolling: touch;
  }
    scroll-snap-align: center;
    background: #fff; border-radius: var(--lp-r-carte);
    box-shadow: var(--lp-ombre-1); padding: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
}

/* ── Narration : le visuel propre à chaque étape ───────────────────────
   Les visuels sont empilés au même endroit que la colonne détourée et se
   fondent l'un dans l'autre. Sans visuel pour l'étape en cours, le produit
   reprend sa place : la section fonctionne aussi bien avec aucune image
   qu'avec les cinq. */
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 700ms ease;
}
  max-width: 100%; max-height: 68vh; width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-3);
}
/* Le produit s'efface quand un visuel d'étape prend la main. */
/* Le halo et le voile n'ont plus de sens devant une photo : on les retire. */

/* Sur mobile, chaque carte porte son image au-dessus du texte. */
  width: 100%; height: auto; display: block;
  border-radius: var(--lp-r-petit);
}

/* Sur mobile, ce sont les cartes qui portent les images : les visuels
   superposés de la version bureau n'y servent à rien et seraient quand même
   téléchargés (ils sont dans la zone visible, seulement transparents). */
@media (max-width: 989px) {
}

/* ═══ Narration : entrée animée de chaque étape, et bande mobile centrée ══ */

/* ── Bureau : le visuel ne se contente plus d'apparaître, il entre ────────
   Fondu + léger rapprochement + montée. Même durée que le texte (700 ms),
   avec un décalage pour que l'image arrive juste avant les mots. */
  opacity: 0;
  transform: scale(1.05) translateY(18px);
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Le texte garde son fondu, mais démarre après l'image. */
  opacity: 0; transform: translateY(16px);
  transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
  opacity: 1; transform: none;
}

/* ── Mobile : la bande déborde plus, et chaque carte entre en scène ──────
   Les largeurs passent en unités de FENÊTRE : un pourcentage se calculait
   sur un conteneur élargi par ses marges négatives, et la carte sortait de
   l'écran — titre et image coupés à droite. */
@media (max-width: 989px) {
    display: flex;
    grid-auto-flow: unset;
    grid-auto-columns: unset;
    gap: 3vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 7vw;
    margin-inline: 0;
    padding: 0.5rem 7vw 1.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

    flex: 0 0 auto;
    width: 86vw;
    max-width: 30rem;
    scroll-snap-align: center;
    box-sizing: border-box;
    /* Entrée : la carte monte et se révèle quand elle arrive dans la bande. */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* La colonne produit, elle, reste bien au centre. */
}

/* Mouvement réduit : tout est visible immédiatement, sans entrée. */
@media (prefers-reduced-motion: reduce) {
    opacity: 1 !important; transform: none !important;
  }
}

/* ── Correction : la bande doit défiler EN ELLE-MÊME ──────────────────────
   Sans `min-width: 0`, un enfant de grille (ou de flex) refuse de rétrécir
   sous la largeur de son contenu : `overflow-x: auto` n'a alors rien à
   contenir et ce sont les 5 cartes qui élargissent toute la page — mesuré
   à 1730 px pour une fenêtre de 375. */
@media (max-width: 989px) {

    min-width: 0;
    max-width: 100%;
    /* Les marges négatives annulent la gouttière du conteneur, pour que le
       7vw de padding parte bien du bord de l'écran et que la première carte
       tombe au centre. */
    margin-inline: -1.25rem;
    padding-inline: 7vw;
  }
}
@media (min-width: 750px) and (max-width: 989px) {
}

/* ── La bande en pleine largeur, sans jamais élargir la page ─────────────
   `margin-inline: -1.25rem` + `max-width: 100%` donnait une boîte plus large
   que la fenêtre (mesuré : page à 422 px pour un écran de 375). La formule
   `50% - 50vw` recentre une boîte de 100vw quel que soit le padding du
   parent, et ne peut pas dépasser. */
@media (max-width: 989px) {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 7vw;
  }
}
@media (min-width: 750px) and (max-width: 989px) {
}

/* ── Éléments fixés : ils doivent tenir dans la fenêtre ───────────────────
   Mesuré sur mobile : la bulle WhatsApp sortait à 390 px et le bouton de la
   barre d'achat à 406 px, pour un écran de 375 — tous deux coupés au bord.
   Étant en position fixe ils n'élargissaient pas la page, donc le contrôle
   de débordement horizontal ne les voyait pas. */
@media (max-width: 989px) {
  /* WhatsApp redevient une pastille ronde : le libellé ne tient pas. */
  .lp-whatsapp {
    right: 1rem;
    max-width: calc(100vw - 2rem);
    width: 3rem; height: 3rem;
    padding: 0;
    justify-content: center;
  }
  .lp-whatsapp__texte--court,
  .lp-whatsapp__texte--long { display: none; }

  /* La barre d'achat : le bouton s'adapte au reste au lieu de déborder. */
  .lp-barre { padding-inline: 1rem; }
  .lp-barre__infos { min-width: 0; }
  .lp-barre .lp-commande,
  .lp-barre .lp-bouton {
    min-width: 0;
    max-width: 100%;
    padding-inline: 1.25rem;
  }
  .lp-barre .lp-bouton span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* ═══ NARRATION « AFFICHES » — bloc faisant autorité ══════════════════════
   Les règles de narration écrites plus haut dans ce fichier (bande mobile,
   colonne détourée, halo, voile) ne correspondent plus au balisage : les
   éléments qu'elles visaient n'existent plus et `data-mode` ne vaut plus
   jamais « bande ». Elles sont donc inertes ; ce bloc est le seul actif.

   Principe : une seule affiche visible à la fois, au MÊME ENDROIT. En
   descendant, l'affiche sort par le haut et la suivante entre par le bas.
   Identique sur téléphone et sur ordinateur, aucun défilement latéral. */


  position: sticky; top: 0;
  height: 100vh; min-height: 36rem;
  display: flex; align-items: center;
  overflow: hidden;
}

  display: grid; gap: calc(1.75rem * var(--lp-interieur, 1));
  width: 100%; max-width: var(--lp-largeur); margin-inline: auto;
  align-items: center;
}
@media (min-width: 990px) {
}

/* ── La zone d'affiche : hauteur réservée, les visuels s'y superposent ──
   Une hauteur fixe évite que la page saute quand on passe d'une affiche
   verticale à une horizontale. */
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 15rem;
}

  position: absolute; inset: 0; margin: 0; display: flex;
  align-items: center; justify-content: center;
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
/* Remontée du scroll : l'affiche entre par le haut. */
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-2);
}
/* La règle écrite au tour précédent masquait les affiches sur mobile :
   elles y sont désormais le cœur de la section. */

/* ── Le texte, aligné sur l'affiche ──────────────────────────────────── */

  position: absolute; inset: 0;
  opacity: 0; transform: translateY(28px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 90ms;
  pointer-events: none;
}

/* ── La numérotation : une rangée de crans qui avance ─────────────────── */
  flex: 1;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--lp-texte) 32%, transparent);
  border-left: 0;
  border-top: 2px solid var(--lp-ligne);
  padding: 0.45rem 0 0;
  transition: color 0.4s ease, border-color 0.4s ease;
}

  margin-top: calc(0.8rem * var(--lp-interieur, 1));
  font-family: var(--lp-police-titre);
  font-size: clamp(1.6rem, 1rem + 2.1vw, 2.9rem);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.03em;
}
  margin-top: calc(1.4rem * var(--lp-interieur, 1)); padding-top: 0.9rem; border-top: var(--lp-filet);
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lp-accent-texte);
}

/* ── Sans script, ou en mouvement réduit : tout empilé et lisible ─────── */

/* ── Le logo, en en-tête et en pied de page ───────────────────────────── */
.lp-entete__marque img { display: block; width: auto; height: var(--lp-logo-hauteur, 28px); }
.lp-pied__marque--logo { line-height: 0; }
.lp-pied__logo {
  width: auto;
  /* Le pied reçoit le logo ENTIER (dessin + texte) : il a la place. */
  height: clamp(5rem, 8vw, 7rem);
  /* Le logo est en encre sombre : sur le pied de page clair il passe tel
     quel ; si le pied repasse en sombre un jour, inverser ici. */
}

/* ── Les blocs de réassurance démarraient collés à la section du dessus ── */
.lp-confiance { padding-top: calc(2.5rem * var(--lp-haut, 1)); }
@media (min-width: 990px) { .lp-confiance { padding-top: calc(3.5rem * var(--lp-haut, 1)); } }

/* ── Narration : les images horizontales laissaient un grand vide ───────
   La zone d'affiche avait une hauteur en « vh » calculée pour des visuels
   verticaux. Avec des images larges, le haut et le bas restaient vides.
   On la cale maintenant sur un rapport, donc elle épouse l'image. */
  height: auto;
  min-height: 0;
  /* Calée sur le 16/9 des images horizontales du client : il ne reste
     aucun vide autour. Un visuel d'un autre format sera simplement
     cadré dedans (contain), jamais rogné. */
  aspect-ratio: 16 / 9;
  max-height: 56vh;
}
@media (min-width: 990px) {
}

/* ── Carrousels : les images entrent dans le cadre, elles ne sont plus rognées ──
   Le squelette cadre les vues en 4/5 (vertical) et recadre en « cover » : avec
   des visuels horizontaux porteurs de texte, les légendes sortaient du cadre.
   On passe au format des images et à « contain » — rien n'est coupé. */
.lp-galerie__vue { aspect-ratio: 16 / 9; background: transparent; }
.lp-galerie__vue img { object-fit: contain; }

/* ── Narration : combler les trous au-dessus et en dessous de l'affiche ──
   La scène faisait toute la hauteur de l'écran et son contenu était centré :
   sur mobile, une affiche 16/9 de 188 px dans 812 px de haut laissait environ
   160 px de vide en haut ET en bas. On réduit la scène à la hauteur utile et
   on resserre les intervalles ; le reste se règle maintenant depuis l'éditeur
   (« Espacement » sur chaque section). */
  height: auto;
  min-height: 0;
  padding: 1.5rem 0 2rem;
  top: 4.5rem;
}
@media (min-width: 990px) {
}

/* ── Carrousels : cadre carré, parce que les photos le sont ──────────────
   Mesuré : les 11 médias du produit sont tous en 1:1. Dans un cadre 16/9
   ils étaient réduits à 188 px de haut sur un écran de 375, avec du vide
   à gauche et à droite. En 1:1 ils remplissent le cadre : 335 px, soit
   près du double. « contain » reste en place, donc un visuel d'un autre
   format sera cadré dedans et jamais rogné. */
.lp-galerie__vue { aspect-ratio: 1 / 1; }

/* ── Menu dépliant sous le héros ──────────────────────────────────────── */
.lp-accordeon__tete { margin-bottom: calc(1.5rem * var(--lp-interieur, 1)); }
.lp-accordeon { display: grid; gap: calc(0.6rem * var(--lp-interieur, 1)); }
.lp-accordeon__item { background: #fff; border-radius: var(--lp-r-petit); box-shadow: var(--lp-ombre-1); }
.lp-accordeon__details { padding: 0 1.3rem; }
.lp-accordeon__titre {
  display: flex; align-items: center; justify-content: space-between; gap: calc(1rem * var(--lp-interieur, 1));
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-family: var(--lp-police-titre); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.015em;
}
.lp-accordeon__titre::-webkit-details-marker { display: none; }
/* Le signe + pivote en × à l'ouverture : deux traits, aucune icône à charger. */
.lp-accordeon__signe { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.lp-accordeon__signe::before,
.lp-accordeon__signe::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--lp-accent-texte); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-accordeon__signe::after { transform: rotate(90deg); }
.lp-accordeon__details[open] .lp-accordeon__signe::before { transform: rotate(135deg); }
.lp-accordeon__details[open] .lp-accordeon__signe::after { transform: rotate(45deg); }
.lp-accordeon__contenu {
  padding-bottom: 1.25rem; font-size: 0.93rem; line-height: 1.7; color: var(--lp-doux);
  border-top: var(--lp-filet); padding-top: 1rem;
}
.lp-accordeon__contenu p + p { margin-top: calc(0.7rem * var(--lp-interieur, 1)); }
.lp-accordeon__contenu ul { margin: 0.5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.lp-accordeon__contenu li { margin-top: calc(0.3rem * var(--lp-interieur, 1)); }
.lp-accordeon__titre:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* ── Raccourcis cliquables du menu ────────────────────────────────────────
   Chaque raccourci est une vraie ancre `<a href="#…">` : il fonctionne sans
   JavaScript, il est atteignable au clavier, et le navigateur fait lui-même
   le défilement. Deux détails qui comptent :
     · `scroll-behavior` est posé sur <html> pour que le saut soit glissé et
       non instantané — mais JAMAIS en mouvement réduit (voir plus bas) ;
     · `scroll-margin-top` évite que l'en-tête collé recouvre le titre de la
       section d'arrivée : sans ça, on atterrit deux lignes trop bas. */
html { scroll-behavior: smooth; }
.lp-section[id] { scroll-margin-top: 92px; }

.lp-accordeon__sauts {
  display: grid; gap: calc(0.5rem * var(--lp-interieur, 1)); margin-bottom: calc(0.9rem * var(--lp-interieur, 1));
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .lp-accordeon__sauts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lp-accordeon__sauts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lp-accordeon__saut {
  /* 48px de haut au minimum : on reste au-dessus de la cible tactile de 44px. */
  display: flex; align-items: center; justify-content: space-between; gap: calc(0.6rem * var(--lp-interieur, 1));
  min-height: 48px; padding: 0.7rem 0.95rem;
  background: #fff; border: var(--lp-filet); border-radius: var(--lp-r-petit);
  box-shadow: var(--lp-ombre-1);
  font-family: var(--lp-police-titre); font-size: 0.86rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.01em;
  color: var(--lp-encre); text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.lp-accordeon__saut:hover { border-color: var(--lp-accent); transform: translateY(-1px); box-shadow: var(--lp-ombre-2); }
.lp-accordeon__saut:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }

/* La flèche est dessinée en CSS : aucune icône à charger, et elle suit
   la couleur d'accent lisible (jamais l'or vif, illisible sur blanc). */
.lp-accordeon__fleche { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.lp-accordeon__fleche::before,
.lp-accordeon__fleche::after { content: ""; position: absolute; transition: transform 0.2s; }
/* La hampe. */
.lp-accordeon__fleche::before {
  left: 0; right: 2px; top: 6px; height: 2px;
  background: var(--lp-accent-texte); border-radius: 2px;
}
/* La pointe : un carré dont on ne garde que deux côtés, pivoté de 45°.
   Dessiner la pointe avec un seul trait donnait une brindille tordue. */
.lp-accordeon__fleche::after {
  width: 7px; height: 7px; right: 1px; top: 3.5px; background: none;
  border-top: 2px solid var(--lp-accent-texte);
  border-right: 2px solid var(--lp-accent-texte);
  transform: rotate(45deg);
}
.lp-accordeon__saut:hover .lp-accordeon__fleche { transform: translateX(2px); }

/* Sur fond secondaire ou sombre, les cartes blanches resteraient criardes. */
.lp-section--sombre .lp-accordeon__saut,
.lp-section--sombre .lp-accordeon__item {
  background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16);
  color: #fff; box-shadow: none;
}
.lp-section--sombre .lp-accordeon__fleche::after {
  border-top-color: var(--lp-accent); border-right-color: var(--lp-accent);
}
.lp-section--sombre .lp-accordeon__fleche::before,
.lp-section--sombre .lp-accordeon__signe::before,
.lp-section--sombre .lp-accordeon__signe::after { background: var(--lp-accent); }

/* Mouvement réduit : le saut reste instantané, l'information arrive quand
   même. Un défilement glissé long est ce qui gêne le plus dans ce cas. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp-accordeon__saut { transition: none; }
}

/* ── Points forts du héros, juste avant le prix ─────────────────────────────────
   Ce qui remplace le paragraphe de description : cinq promesses lisibles
   d'un coup d'œil, au-dessus du prix. La coche est en or lisible, jamais
   en or vif — sur fond clair il tombe à 2,8:1. */
.lp-points-forts { margin: 1.4rem 0 1.6rem; }
.lp-points-forts__titre {
  margin: 0 0 0.85rem;
  font-family: var(--lp-police-titre); font-weight: 600;
  font-size: 1.08rem; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--lp-encre);
}
.lp-points-forts__liste { display: grid; gap: calc(0.55rem * var(--lp-interieur, 1)); margin: 0; padding: 0; list-style: none; }
.lp-points-forts__liste li {
  display: flex; align-items: flex-start; gap: calc(0.6rem * var(--lp-interieur, 1));
  font-size: 0.95rem; line-height: 1.5; color: var(--lp-doux);
}
.lp-points-forts__liste svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.15rem;
  color: var(--lp-accent-texte);
}
/* `min-width: 0` : sans ça une puce longue élargit la colonne du héros au
   lieu de passer à la ligne, et la page entière déborde sur téléphone. */
.lp-points-forts__liste span { min-width: 0; }
.lp-section--sombre .lp-points-forts__titre { color: #fff; }
.lp-section--sombre .lp-points-forts__liste li { color: rgba(255, 255, 255, 0.8); }
.lp-section--sombre .lp-points-forts__liste svg { color: var(--lp-accent); }

/* ── Le bouton « Commander » ──────────────────────────────────────────────
   Fond brun-noir de la marque (celui du sceau de garantie) et texte blanc,
   au lieu de l'or. Le blanc sur #231E17 donne un contraste de 15,9:1 : très
   au-dessus des 4,5:1 exigés, et le bouton se détache mieux de l'or utilisé
   partout ailleurs sur la page. */
.lp-bouton--plein {
  background: var(--lp-sombre);
  color: #fff;
  border-color: transparent;
}
.lp-bouton--plein:hover {
  /* On éclaircit à peine : un fond noir qui blanchit au survol fait sale.
     On gagne en relief par l'ombre et le léger soulèvement. */
  background: color-mix(in srgb, var(--lp-sombre) 88%, #fff);
  transform: translateY(-1px);
  box-shadow: var(--lp-ombre-2);
}
.lp-bouton--plein svg { color: #fff; }

/* ⚠️ Sur une section sombre, un bouton sombre disparaîtrait. Aucun n'est
   dans ce cas aujourd'hui, mais le réglage « style du bouton » est ouvert
   dans l'éditeur : on garde l'or de secours plutôt qu'un bouton invisible. */
.lp-section--sombre .lp-bouton--plein {
  background: var(--lp-accent);
  color: var(--lp-sur-accent);
}
.lp-section--sombre .lp-bouton--plein:hover { background: color-mix(in srgb, var(--lp-accent) 88%, #fff); }
.lp-section--sombre .lp-bouton--plein svg { color: var(--lp-sur-accent); }

/* ── Les points forts collent au prix ─────────────────────────────────────
   Il y avait 110 px entre la dernière puce et « 449 € » : la marge basse de
   la liste (25,6), la marge haute du bloc d'achat (32), son rembourrage
   (28) et la marge du prix (24). Les deux marges ne se rabattent pas l'une
   sur l'autre — la colonne du héros est une grille, et dans une grille les
   marges ne fusionnent jamais. On les réduit toutes les quatre.
   Le filet reste : il sépare l'argument du moment où l'on parle d'argent.
   Tout passe par `--lp-interieur`, donc le curseur de la section continue
   de piloter l'ensemble. */
.lp-points-forts {
  margin-top: calc(1.4rem * var(--lp-interieur, 1));
  margin-bottom: calc(0.4rem * var(--lp-interieur, 1));
}
.lp-heros .lp-achat {
  margin-top: calc(0.5rem * var(--lp-interieur, 1));
  padding-top: calc(0.75rem * var(--lp-interieur, 1));
}
.lp-heros .lp-prix { margin-top: calc(0.25rem * var(--lp-interieur, 1)); }

/* ── Démonstration vidéo : deux colonnes sur ordinateur ───────────────────
   Sur téléphone, rien ne change : le texte, puis la vidéo, l'un sous
   l'autre. À partir de 990 px, la vidéo passe sur le côté et le texte se
   met en face, centré verticalement. L'ordre du HTML reste texte-puis-vidéo
   (c'est le bon ordre à la lecture et pour un lecteur d'écran) ; c'est
   `order` qui déplace la vidéo, pas le gabarit. */
@media (min-width: 990px) {
  .lp-demo__grille {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: calc(3.5rem * var(--lp-interieur, 1));
    align-items: center;
  }
  /* ⚠️ `min-width: 0` sur les deux colonnes : sans ça une ligne de texte
     longue refuse de se couper et élargit toute la page. */
  .lp-demo__grille > * { min-width: 0; }
  .lp-demo__grille[data-cote="gauche"] .lp-demo { order: -1; }
  .lp-demo__grille[data-cote="droite"] .lp-demo { order: 1; }

  .lp-demo__grille .lp-demo__tete { margin-bottom: 0; max-width: none; }
  /* La vidéo est en portrait (640 × 1138) : à 400 px de large elle ferait
     710 px de haut et écraserait le texte. On la borne plus court. */
  .lp-demo__grille .lp-demo__cadre { max-width: 340px; margin: 0 auto; }
  .lp-demo__grille .lp-demo__legende { text-align: center; }
}

/* ── Carte de livraison : nettement plus compacte ─────────────────────────
   Elle faisait 90 px de haut entre les pastilles de finition et le bouton,
   au seul endroit où l'on veut que l'œil aille vite au prix puis au bouton.
   On réduit la pastille, les deux tailles de texte et le rembourrage. */
.lp-avantage { gap: calc(0.6rem * var(--lp-interieur, 1)); padding: calc(0.5rem * var(--lp-interieur, 1)) 0.75rem; }
.lp-avantage__pastille { width: 2rem; height: 1.6rem; border-radius: 6px; }
.lp-avantage__pastille .lp-icone { width: 0.95rem; height: 0.95rem; }
.lp-avantage__titre { font-size: 0.82rem; line-height: 1.25; }
.lp-avantage__titre strong { font-size: 0.95rem; }
.lp-avantage__detail { font-size: 0.72rem; line-height: 1.35; }

/* ── Les pastilles de réassurance : deux lignes au maximum sur téléphone ──
   Elles s'empilaient une par ligne, soit quatre lignes sous le bouton.
   En dessous de 750 px on les met deux par rangée. Le texte est réduit
   juste ce qu'il faut pour que « Retour offert sous 14 jours », la plus
   longue, tienne sur une seule ligne dans sa pastille. */
@media (max-width: 749px) {
  .lp-preuves {
    display: flex; flex-wrap: wrap;
    gap: calc(0.4rem * var(--lp-interieur, 1)) 0.4rem;
    font-size: 0.72rem;
  }
  .lp-preuves li {
    /* `calc(50% - 0.2rem)` = deux par rangée en tenant compte de l'écart.
       `min-width: 0` autorise la pastille à se réduire : sans lui, le
       contenu impose sa largeur et on retombe à une par ligne. */
    flex: 1 1 calc(50% - 0.2rem);
    min-width: 0;
    padding: 0.3rem 0.55rem;
    gap: 0.35rem;
  }
  .lp-preuves .lp-icone { width: 0.9rem; height: 0.9rem; flex: 0 0 auto; }
}

/* ── Réassurance : des cartes deux fois moins hautes sur téléphone ────────
   Le bandeau faisait 549 px. La cause n'était pas la taille du texte mais
   sa LARGEUR : dans une carte de 161 px, le rembourrage (2 × 19) plus le
   picto (22) plus l'écart (12) ne laissaient que 88 px au texte, qui
   partait sur cinq lignes. On rend de la largeur au texte avant de toucher
   aux tailles. */
@media (max-width: 749px) {
  .lp-confiance__liste { gap: calc(0.5rem * var(--lp-interieur, 1)); }
  .lp-confiance__item {
    gap: 0.5rem;
    padding: calc(0.7rem * var(--lp-interieur, 1)) 0.7rem;
  }
  .lp-confiance__item .lp-icone { width: 1rem; height: 1rem; flex: 0 0 auto; }
  /* `min-width: 0` : sans lui, le bloc de texte garde sa largeur naturelle
     et déborde de la carte au lieu de se couper. */
  .lp-confiance__item > span { min-width: 0; }
  .lp-confiance__titre { font-size: 0.8rem; line-height: 1.25; }
  .lp-confiance__texte { font-size: 0.72rem; line-height: 1.35; }
}

/* ── Carte de livraison : le titre tient enfin sur une ligne ──────────────
   « Livraison offerte depuis la France » se coupait en deux, ce qui
   ajoutait une ligne entière à une carte déjà présente seulement pour
   rassurer avant le bouton. */
.lp-avantage { padding: calc(0.45rem * var(--lp-interieur, 1)) 0.7rem; gap: calc(0.55rem * var(--lp-interieur, 1)); }
.lp-avantage__titre { font-size: 0.78rem; }
.lp-avantage__titre strong { font-size: 0.9rem; }
.lp-avantage__detail { font-size: 0.71rem; line-height: 1.3; }

/* ── Le choix de finition prend la couleur du bouton ──────────────────────
   La pastille sélectionnée était dorée, la même couleur que les accents
   décoratifs de la page : on ne voyait pas tout de suite laquelle était
   active. Elle reprend maintenant le brun-noir du bouton « Commander », ce
   qui relie visuellement le choix et l'achat. Blanc sur #231E17 : 16,5:1.
   Les finitions NON choisies ne bougent pas : contour fin sur fond blanc. */
.lp-variantes__liste input:checked + label,
.lp-variantes__liste label:has(input:checked) {
  background: var(--lp-sombre);
  border-color: var(--lp-sombre);
  color: #fff;
  box-shadow: none;
}

/* ── Le bouton « remonter au choix » ──────────────────────────────────────
   C'est un lien, pas un bouton de formulaire : il faut lui redonner à la
   main ce que le <button> avait. */
.lp-bouton--vers-haut { text-decoration: none; justify-content: center; }

/* ── Livraison : la section réduite de moitié ─────────────────────────────
   Elle faisait 924 px sur téléphone, dont 233 pour le titre et 585 pour la
   frise de quatre jalons. Les réglages d'espacement ne pouvaient pas suffire
   seuls : l'essentiel était du texte en grand. On resserre les jalons et on
   ramène le titre à une taille de sous-titre — c'est une section de détail
   pratique, pas un argument de vente. */
#livraison .lp-frise { margin-top: calc(1.2rem * var(--lp-interieur, 1)); gap: calc(0.5rem * var(--lp-interieur, 1)); }
#livraison .lp-jalon { padding: calc(0.7rem * var(--lp-interieur, 1)) 0.9rem; }
#livraison .lp-jalon__quand { font-size: 0.66rem; letter-spacing: 0.08em; }
#livraison .lp-jalon__titre { margin-top: calc(0.2rem * var(--lp-interieur, 1)); font-size: 0.92rem; }
#livraison .lp-jalon__texte { margin-top: calc(0.15rem * var(--lp-interieur, 1)); font-size: 0.78rem; line-height: 1.4; }
@media (max-width: 749px) {
  #livraison .lp-titre { font-size: 1.5rem; line-height: 1.2; }
  #livraison .lp-intro { font-size: 0.85rem; line-height: 1.45; }
}

/* ── Bandeau d'annonce : les messages se relaient sur téléphone ───────────
   Sous 990 px, la règle d'origine masquait purement et simplement les
   messages 2 à 4 : on n'en voyait qu'un, pour toujours. On les superpose
   au même endroit et le script les fait tourner.
   `[data-rotation="on"]` n'est posé QUE par le script : sans JavaScript on
   retombe sur l'ancien comportement, le premier message reste lisible. */
@media (max-width: 989px) {
  .lp-annonce[data-rotation="on"] .lp-annonce__liste {
    position: relative; display: block;
    padding-top: 0.75rem; padding-bottom: 0.75rem;
    /* ⚠️ `min-height: 1.4em` seul écrasait le bandeau à 19 px de haut : avec
       `box-sizing: border-box`, la hauteur minimale INCLUT le rembourrage,
       qui se retrouvait donc à zéro. On additionne explicitement la ligne
       de texte et les deux rembourrages. */
    min-height: calc(1.4em + 1.5rem);
  }
  .lp-annonce[data-rotation="on"] .lp-annonce__item {
    /* Le message couvre toute la boîte et s'y centre : sans ça il se collait
       en haut, dans la zone de rembourrage. */
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(6px);
    transition: opacity 450ms ease, transform 450ms ease;
    pointer-events: none;
  }
  .lp-annonce[data-rotation="on"] .lp-annonce__item.est-active {
    opacity: 1; transform: none; pointer-events: auto;
  }
}

/* ── Tableau comparatif : il se fait glisser du doigt ─────────────────────
   ⚠️ `overflow: hidden`, posé plus haut pour arrondir les coins, écrasait
   le `overflow-x: auto` du squelette : les colonnes de droite étaient
   coupées et INATTEIGNABLES. On rétablit le défilement horizontal en
   gardant la coupe verticale, donc les coins arrondis. */
.lp-comparatif {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.lp-comparatif thead th { scroll-snap-align: start; }
/* Un dégradé sur le bord droit dit qu'il reste quelque chose à voir. */
.lp-comparatif-section .lp-comparatif { position: relative; }
.lp-comparatif__glisser {
  margin-top: 0.6rem; font-size: 0.78rem; color: var(--lp-doux);
  display: flex; align-items: center; gap: 0.35rem;
}
@media (min-width: 990px) { .lp-comparatif__glisser { display: none; } }

/* ── Héros : un prix plus discret, une mention en tout petit ──────────────
   Le prix occupait jusqu'à 2,8 rem de haut et la mention légale une ligne
   de 0,86 rem, pour un total qui repoussait le choix de finition hors de
   l'écran sur téléphone. Le prix reste l'élément le plus gros du bloc
   d'achat, simplement moins démesuré. */
.lp-heros .lp-prix__actuel { font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2rem); }
.lp-heros .lp-prix__mention {
  margin-top: calc(0.3rem * var(--lp-interieur, 1));
  font-size: 0.68rem; line-height: 1.3; opacity: 0.85;
}
/* La carte de livraison est passée SOUS le bouton : elle ne doit plus
   coller au bouton comme elle collait au choix de finition. */
.lp-heros .lp-heros__actions + .lp-avantages { margin-top: calc(0.9rem * var(--lp-interieur, 1)); }

/* ── Narration : une étape à la fois, jamais deux superposées ─────────────
   Les étapes sont empilées au même endroit. L'ancienne version les faisait
   se croiser en fondu sur 560 ms : pendant une demi-seconde on lisait
   « 42 jets dans le dos » PAR-DESSUS « 38 °C. Vous le savez avant
   d'entrer ». Un fondu croisé ne marche que sur des images, jamais sur du
   texte.

   On passe donc en relais : l'étape sortante disparaît d'abord (170 ms),
   la suivante n'entre qu'ensuite (délai de 190 ms). `visibility` est
   basculée après le fondu pour que le texte sortant ne soit plus ni
   cliquable ni lu par un lecteur d'écran. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 170ms ease 0s, transform 170ms ease 0s, visibility 0s linear 170ms;
}
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease 190ms, transform 300ms cubic-bezier(0.22, 1, 0.36, 1) 190ms, visibility 0s linear 190ms;
}
/* Les lignes internes n'ont plus de fondu propre : elles s'ajoutaient au
   relais et rallongeaient encore le moment où deux textes coexistent. */
  opacity: 1;
  transform: none;
  transition: none;
}

/* L'attribut `hidden` ne suffit pas sur un élément dont le display est
   imposé par la grille du carrousel : on le force. */
.lp-galerie__vue[hidden], .lp-galerie__point[hidden] { display: none !important; }

/* ── WhatsApp : un simple rond de 48 px ───────────────────────────────────
   La pastille verte avec son texte recouvrait une partie du contenu sur
   presque chaque écran. On garde le picto, l'adresse du contact et la
   cible tactile recommandée ; le texte part dans `aria-label`. */
.lp-whatsapp {
  width: 48px; height: 48px; padding: 0; gap: 0;
  justify-content: center; border-radius: 999px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.16);
}
.lp-whatsapp svg { width: 24px; height: 24px; }
.lp-whatsapp__texte--court, .lp-whatsapp__texte--long { display: none !important; }
@media (min-width: 990px) { .lp-whatsapp { width: 48px; height: 48px; } }

/* ── « Une marque, pas un vendeur de passage » ────────────────────────────
   Six cartes courtes, deux par rangée. Même gabarit compact que le bandeau
   d'engagements : picto, titre, une ligne. Rien ne doit déborder sur un
   deuxième écran — c'est de la réassurance, on la lit en passant. */
.lp-marque { max-width: 52rem; }
.lp-marque__texte { margin-top: calc(1rem * var(--lp-interieur, 1)); font-size: 0.95rem; line-height: 1.6; color: var(--lp-doux); }
.lp-marque__texte p + p { margin-top: calc(0.6rem * var(--lp-interieur, 1)); }

.lp-marque__cartes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.5rem * var(--lp-interieur, 1));
  margin: calc(1.3rem * var(--lp-interieur, 1)) 0 0; padding: 0; list-style: none;
}
@media (min-width: 760px) { .lp-marque__cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.lp-marque__carte {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  padding: calc(0.7rem * var(--lp-interieur, 1)) 0.75rem;
  background: #fff; border: var(--lp-filet); border-radius: var(--lp-r-petit);
  box-shadow: var(--lp-ombre-1);
}
/* `min-width: 0` : sans lui le bloc de texte garde sa largeur naturelle et
   déborde de la carte au lieu de se couper. */
.lp-marque__carte > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.lp-marque__carte .lp-icone { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--lp-accent-texte); }
.lp-marque__carte-titre { font-family: var(--lp-police-titre); font-weight: 600; font-size: 0.84rem; line-height: 1.25; color: var(--lp-texte); }
.lp-marque__carte-texte { font-size: 0.73rem; line-height: 1.35; color: var(--lp-doux); }

.lp-section--sombre .lp-marque__carte { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); box-shadow: none; }
.lp-section--sombre .lp-marque__carte-titre { color: #fff; }
.lp-section--sombre .lp-marque__carte .lp-icone { color: var(--lp-accent); }

/* La ligne de réassurance sous le bouton du héros. */
.lp-heros__assurance {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-top: calc(0.6rem * var(--lp-interieur, 1));
  font-size: 0.78rem; line-height: 1.35; color: var(--lp-doux);
}
.lp-heros__assurance .lp-icone { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; margin-top: 0.1rem; color: var(--lp-accent-texte); }
.lp-heros__assurance span { min-width: 0; }

/* ── « Ce qui la distingue » : le bénéfice d'abord, le chiffre ensuite ────
   La carte affichait la cote en très gros et le bénéfice en petites
   capitales : le visiteur lisait « 60,8 » avant de savoir ce que ça lui
   apporte. On inverse par `order`, sans toucher au gabarit — l'ordre du
   HTML reste chiffre puis libellé, ce qui convient à un lecteur d'écran
   comme à une page sans CSS. */
.lp-specs-section .lp-spec { display: flex; flex-direction: column; }
.lp-specs-section .lp-spec__titre {
  order: 0; margin-top: 0;
  font-family: var(--lp-police-titre); font-size: 1.12rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em;
  text-transform: none; color: inherit;
}
.lp-specs-section .lp-spec__valeur {
  order: 1; margin-top: calc(0.45rem * var(--lp-interieur, 1));
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--lp-accent-clair);
}
.lp-section--clair .lp-spec__valeur,
.lp-section--surface .lp-spec__valeur { color: var(--lp-accent-texte); }
.lp-specs-section .lp-spec__texte { order: 2; }

/* ── « Pourquoi nous choisir » : des cartes, pas un tableau ───────────────
   Le tableau obligeait à suivre une ligne sur trois colonnes, et à le faire
   glisser du doigt sur téléphone. Chaque solution devient une carte, et
   chaque carte une liste courte qu'on balaie des yeux. */
.lp-choisir { display: grid; gap: calc(0.8rem * var(--lp-interieur, 1)); margin-top: calc(1.6rem * var(--lp-interieur, 1)); }
@media (min-width: 900px) { .lp-choisir { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }

.lp-choisir__carte {
  min-width: 0;
  padding: calc(1.1rem * var(--lp-interieur, 1)) 1.1rem;
  background: #fff; border: var(--lp-filet); border-radius: var(--lp-r-carte);
  box-shadow: var(--lp-ombre-1);
}
/* Notre carte se distingue par l'accent, jamais en rabaissant les autres :
   une comparaison qui caricature l'alternative se retourne contre vous. */
.lp-choisir__carte--nous {
  border-color: var(--lp-accent);
  box-shadow: 0 0 0 1px var(--lp-accent), var(--lp-ombre-2);
  background: color-mix(in srgb, var(--lp-accent) 5%, #fff);
}
.lp-choisir__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.6rem; }
.lp-choisir__nom {
  margin: 0; min-width: 0;
  font-family: var(--lp-police-titre); font-size: 1.05rem; font-weight: 600;
  line-height: 1.25; letter-spacing: -0.015em;
}
.lp-choisir__prix { margin: 0; font-size: 0.82rem; font-weight: 700; color: var(--lp-accent-texte); white-space: nowrap; }
.lp-choisir__sous-titre {
  margin: calc(0.35rem * var(--lp-interieur, 1)) 0 0;
  font-size: 0.78rem; line-height: 1.35; color: var(--lp-doux);
}

.lp-choisir__points {
  display: grid; gap: calc(0.5rem * var(--lp-interieur, 1));
  margin: calc(0.9rem * var(--lp-interieur, 1)) 0 0; padding: 0; list-style: none;
}
.lp-choisir__point {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.87rem; line-height: 1.4;
}
.lp-choisir__point span { min-width: 0; }
.lp-choisir__point .lp-icone { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.16rem; }
.lp-choisir__point--oui { color: var(--lp-texte); }
.lp-choisir__point--oui .lp-icone { color: var(--lp-accent-texte); }
/* ⚠️ Un rouge vif tomberait à 2,2:1 sur ce fond clair, et transformerait la
   comparaison en procès. Ce gris profond est mesuré au-dessus de 7:1, très
   loin des 3:1 exigés pour un élément graphique. */
.lp-choisir__point--non { color: var(--lp-doux); }
.lp-choisir__point--non .lp-icone { color: #574F47; }

.lp-choisir__nuance {
  margin: calc(0.9rem * var(--lp-interieur, 1)) 0 0;
  padding-top: calc(0.7rem * var(--lp-interieur, 1));
  border-top: var(--lp-filet);
  font-size: 0.8rem; line-height: 1.45; color: var(--lp-doux);
}
.lp-choisir__carte--nous .lp-choisir__nuance { font-weight: 600; color: var(--lp-texte); }
.lp-section--sombre .lp-choisir__carte { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); box-shadow: none; }

/* ── Installation : la même information en deux fois moins de hauteur ─────
   Elle faisait 1384 px sur téléphone. L'essentiel venait de trois endroits
   et pas des marges : une photo au format portrait 4/5 (419 px à elle
   seule), l'encart « 1 h » dimensionné comme un titre de section, et trois
   étapes très aérées. On traite les trois, et on resserre les écarts.
   Rien n'est retiré : c'est la même photo, le même encart, les mêmes
   textes. */
#installation .lp-duo { gap: calc(1.5rem * var(--lp-interieur, 1)); }
@media (max-width: 989px) {
  /* Le portrait convient à un produit, pas à une photo d'ambiance qu'on
     survole : le paysage dit la même chose sur 40 % de hauteur en moins. */
  #installation .lp-duo__media { aspect-ratio: 3 / 2; }
  #installation .lp-encart__chiffre { font-size: 1.9rem; }
  #installation .lp-encart { padding: calc(0.8rem * var(--lp-interieur, 1)) 0.9rem; }
  #installation .lp-encart__texte { font-size: 0.78rem; line-height: 1.35; }
}
#installation .lp-etapes { margin-top: calc(1.1rem * var(--lp-interieur, 1)); }
#installation .lp-etape { padding: calc(0.6rem * var(--lp-interieur, 1)) 0; gap: 0.85rem; }
#installation .lp-etape__titre { font-size: 1rem; line-height: 1.3; }
#installation .lp-etape__texte { font-size: 0.85rem; line-height: 1.45; }
#installation .lp-etapes-fin { margin-top: calc(1rem * var(--lp-interieur, 1)); }

/* Le bandeau d'annonce, un peu plus épais et un peu plus lisible. */
.lp-annonce__liste { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.lp-annonce__item { font-size: 0.84rem; }

/* ── Les photos du carrousel retrouvent leurs angles arrondis ─────────────
   ⚠️ Le piège : `.lp-galerie__piste` porte bien un `border-radius`, mais
   c'est un conteneur à défilement horizontal. Un enfant qui défile n'est
   PAS rogné par les coins arrondis de son parent quand il arrive au bord —
   la vue vient se coller contre l'angle et le remplit carré. Il faut donc
   arrondir la vue elle-même, pas seulement la piste.

   `overflow: hidden` est déjà posé sur la vue : l'image se découpe avec
   elle, y compris en `object-fit: contain`. */
.lp-galerie__vue { border-radius: var(--lp-r-carte); }
.lp-galerie__vue img { border-radius: inherit; }

/* ── Matériaux : la photo garde sa largeur et perd de la hauteur ──────────
   Première tentative : réduire la largeur et centrer. Mauvaise idée — on
   gagnait de la hauteur en créant des marges latérales, et la photo
   paraissait perdue au milieu du vide.
   On garde donc toute la largeur et on recadre en carré : 419 px → 335 px,
   sans rien rogner sur les côtés. `object-fit: cover` coupe un peu le haut
   et le bas de l'ambiance, pas la colonne, qui reste centrée. */
@media (max-width: 989px) {
  #materiaux .lp-duo__media { aspect-ratio: 1 / 1; }
  #materiaux .lp-duo { gap: calc(1.6rem * var(--lp-interieur, 1)); }
}

/* ── Les points du carrousel reviennent sur ordinateur ────────────────────
   Le squelette les masque au-dessus de 990 px parce qu'il prévoit des
   VIGNETTES à la place. Nos galeries n'en ont pas : résultat, sur
   ordinateur le carrousel n'avait plus aucune commande visible. On ne peut
   pas deviner qu'une image se fait glisser quand rien ne le dit.

   On ne les rétablit que là où il n'y a pas de vignettes, pour ne pas
   afficher deux systèmes de navigation à la fois. */
@media (min-width: 990px) {
  .lp-galerie:not(:has(.lp-galerie__vignettes)) .lp-galerie__points { display: flex; }

}
/* La cible tactile d'un point de 8 px est trop petite : on l'élargit sans
   agrandir le point lui-même. */
.lp-galerie__point { position: relative; cursor: pointer; }
.lp-galerie__point::after { content: ""; position: absolute; inset: -12px -6px; }

/* ── Matériaux sur ordinateur : l'encart comble le trou ───────────────────
   Sept cartes dans une grille à deux colonnes : la septième reste seule sur
   sa ligne et laisse une case vide, puis l'encart « Deux finitions au même
   prix » s'étalait tout seul en dessous. Beaucoup de vide pour rien.

   On fusionne les deux : la colonne de droite devient UNE grille, la liste
   passe en `display: contents` pour que ses cartes y entrent directement,
   et l'encart vient naturellement occuper la case restée libre.
   ⚠️ `display: contents` fait disparaître la boîte du <ul> : la sémantique
   de liste est rétablie par `role="list"` dans le gabarit. */
@media (min-width: 990px) {
  #materiaux .lp-duo > div:last-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(0.45rem * var(--lp-interieur, 1));
    align-content: start;
  }
  #materiaux .lp-tete { grid-column: 1 / -1; }
  #materiaux .lp-atouts { display: contents; }
  #materiaux .lp-aparte { margin-top: 0; align-self: start; }
}

/* ── Héros sur ordinateur : chaque photo dans SA vue ──────────────────────
   ⚠️ LE BUG : dans le héros en panneau, les images sont en
   `position: absolute; inset: 0`. Leur référence est le premier ancêtre
   positionné — et `.lp-galerie__vue` ne l'était pas. Les dix photos se
   calaient donc toutes sur le cadre `.lp-heros__media-bureau`, empilées au
   même endroit, et c'est la dernière du document qui restait visible.
   Le carrousel défilait pour de vrai (on le mesure : scrollLeft passait
   bien de 0 à 928), mais l'image ne changeait jamais.

   Une seule ligne manquait : donner un contexte de positionnement à la vue. */
@media (min-width: 990px) {
  .lp-heros--panneau .lp-heros__media-bureau .lp-galerie__vue { position: relative; }
}

/* ── Angles arrondis : on découpe la forme, on ne se contente plus d'un rayon
   Symptôme observé : dans le bloc « Commander », la photo avait ses deux
   angles de DROITE arrondis et ses deux angles de GAUCHE carrés.

   Cause : la piste du carrousel est un conteneur à défilement horizontal.
   Un `border-radius` sur un conteneur de ce type n'est pas toujours
   appliqué au contenu du côté de l'origine du défilement — le premier
   élément vient se coller contre l'angle gauche et le remplit carré.
   Le rayon posé sur les ancêtres ne rattrape rien : ils sont traversés par
   la couche composée du défilement.

   `clip-path` découpe réellement la forme, quelle que soit la façon dont
   le navigateur compose les couches. On le garde EN PLUS du `border-radius`,
   qui reste utile aux navigateurs anciens. */
.lp-offre__media,
.lp-heros__media,
.lp-heros__photo,
.lp-galerie__piste {
  clip-path: inset(0 round var(--lp-r-carte));
}

/* ── La galerie du héros : une grande photo, des vignettes dessous ────────
   Le point de navigation ne dit pas ce qu'il cache. La vignette, si — et
   c'est ce qu'attend quelqu'un qui a déjà regardé trois fiches produit
   avant la vôtre. */
.lp-galerie__vignettes {
  display: flex; gap: calc(0.45rem * var(--lp-interieur, 1));
  margin-top: calc(0.6rem * var(--lp-interieur, 1));
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;      /* laisse respirer le liseré de la vignette active */
}
.lp-galerie__vignettes::-webkit-scrollbar { display: none; }
.lp-galerie__vignette {
  flex: 0 0 auto;
  width: 64px; height: 64px; padding: 0;
  border: 1px solid var(--lp-ligne); border-radius: calc(var(--lp-r-carte) * 0.45);
  background: #fff; overflow: hidden; cursor: pointer;
  opacity: 0.62; transition: opacity 0.2s, border-color 0.2s;
}
.lp-galerie__vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-galerie__vignette:hover { opacity: 1; }
.lp-galerie__vignette[aria-current="true"] { opacity: 1; border-color: var(--lp-accent); box-shadow: 0 0 0 1px var(--lp-accent); }
.lp-galerie__vignette:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
@media (min-width: 990px) {
  .lp-galerie__vignettes { display: flex; grid-template-columns: none; }
  .lp-galerie__vignette { width: 72px; height: 72px; aspect-ratio: auto; }
}

/* Le héros n'a plus qu'une image : la piste ne défile pas, elle cadre. */
.lp-heros__photo { position: relative; }
.lp-heros__photo .lp-galerie__piste { overflow: hidden; }
}
.lp-galerie__vignette[hidden] { display: none !important; }

/* ── Bloc d'offre : fond blanc ────────────────────────────────────────────
   Le panneau crème se voyait comme un grand aplat derrière le titre et la
   photo, alors que la carte d'achat est blanche : la section paraissait
   coupée en deux. En blanc, l'ensemble se lit d'un bloc — sur téléphone
   comme sur ordinateur.
   La carte d'achat ne disparaît pas pour autant — elle porte une ombre
   portée qui la détache du fond sans avoir besoin d'une couleur. */
#commander .lp-offre { background: #ffffff; }

/* ── Pied de page : les quatre colonnes sur une seule ligne ───────────────
   La grille n'en prévoyait que trois — marque, puis deux listes de liens.
   Depuis qu'on a scindé les liens en deux groupes, « Contact » devenait le
   quatrième enfant et retombait sous la marque, loin du reste.
   On passe à quatre colonnes, la marque gardant le double de largeur. */
@media (min-width: 750px) {
  .lp-pied__grille {
    grid-template-columns: minmax(0, 1.9fr) repeat(3, minmax(0, 1fr));
    gap: 2rem 1.75rem;
    align-items: start;
  }
}

/* ── Bloc d'offre : le cadre cesse de couper les vignettes ────────────────
   ⚠️ `.lp-offre__media` impose `aspect-ratio: 1/1` + `overflow: hidden`
   (+ le `clip-path` arrondi). La galerie fait désormais 557 px — l'image
   PUIS la bande de vignettes — alors que le cadre s'arrête à 476 px : les
   vignettes existaient, se calculaient, et étaient simplement rognées.
   On rend le cadre libre et on déplace l'arrondi sur la piste, qui est la
   seule chose à devoir être découpée. */
#commander .lp-offre__media {
  /* Le cadre ne force plus un carré et grandit avec son contenu : c'est ce
     qui laisse la place aux vignettes. Mais il RESTE fermé — sinon rien ne
     retient une image large et la page part en défilement horizontal. */
  aspect-ratio: auto;
  height: auto;
  overflow: hidden;
  clip-path: none;
  background: transparent;
}
/* La photo garde son cadre carré, quoi qu'il arrive. */
#commander .lp-galerie__piste { aspect-ratio: 1 / 1; }
#commander .lp-galerie__vue { width: 100%; max-width: 100%; }
#commander .lp-galerie__vue img { width: 100%; height: 100%; object-fit: contain; }
#commander .lp-galerie__piste { clip-path: inset(0 round var(--lp-r-carte)); }

/* ── Le bloc d'offre cesse d'élargir la page ──────────────────────────────
   ⚠️ LE PIÈGE, encore lui. `.lp-offre` est une grille ; un enfant de grille
   a `min-width: auto`, c'est-à-dire la largeur de son CONTENU. Or le cadre
   média contient une piste de dix photos de 100 % chacune : sa largeur
   « minimale » devient énorme, la colonne s'élargit, le titre se fait
   couper et la page entière part en défilement horizontal.
   `min-width: 0` autorise la colonne à se réduire à la place disponible.
   C'est à poser sur TOUT enfant de grille qui contient un carrousel. */
.lp-offre > * { min-width: 0; }
.lp-offre__media { min-width: 0; max-width: 100%; }
/* ⚠️ PAS de `max-width` ici : `.lp-heros__media-mobile` porte des marges
   latérales NÉGATIVES pour s'étendre d'un bord à l'autre de l'écran. La
   brider à 100 % la laissait à sa largeur de colonne tout en conservant le
   décalage négatif — la photo partait sur la gauche. */
.lp-heros__photo, .lp-heros__media { min-width: 0; }
.lp-galerie, .lp-galerie__piste { min-width: 0; max-width: 100%; }

/* ── Les étapes produit, en accordéon ────────────────────────────────────
   Remplace la narration animée : plus de scène collée, plus de script qui
   lit la position à chaque image, plus d'étapes superposées. Cinq volets
   natifs, c'est tout. */
.lp-etapes-acc__tete { margin-bottom: calc(1.4rem * var(--lp-interieur, 1)); }
.lp-etapes-acc { display: grid; gap: calc(0.55rem * var(--lp-interieur, 1)); margin: 0; padding: 0; list-style: none; }
.lp-etapes-acc__item { background: #fff; border: var(--lp-filet); border-radius: var(--lp-r-petit); box-shadow: var(--lp-ombre-1); }
.lp-etapes-acc__details { padding: 0 1.1rem; }
.lp-etapes-acc__titre {
  /* 56 px de haut : au-dessus de la cible tactile recommandée de 44 px. */
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 56px; padding: 0.85rem 0; cursor: pointer; list-style: none;
}
.lp-etapes-acc__titre::-webkit-details-marker { display: none; }
.lp-etapes-acc__titre:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.lp-etapes-acc__num {
  flex: 0 0 auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--lp-accent-texte);
}
.lp-etapes-acc__intitule {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--lp-police-titre); font-weight: 600; font-size: 0.97rem;
  line-height: 1.3; letter-spacing: -0.015em;
}
/* Le « + » pivote en « × » à l'ouverture : deux traits, aucune icône à charger. */
.lp-etapes-acc__signe { position: relative; width: 14px; height: 14px; flex: 0 0 auto; }
.lp-etapes-acc__signe::before,
.lp-etapes-acc__signe::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--lp-accent-texte); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp-etapes-acc__signe::after { transform: rotate(90deg); }
.lp-etapes-acc__details[open] .lp-etapes-acc__signe::before { transform: rotate(135deg); }
.lp-etapes-acc__details[open] .lp-etapes-acc__signe::after { transform: rotate(45deg); }

.lp-etapes-acc__contenu { padding-bottom: calc(1.1rem * var(--lp-interieur, 1)); border-top: var(--lp-filet); padding-top: calc(0.9rem * var(--lp-interieur, 1)); }
.lp-etapes-acc__visuel { margin: 0 0 calc(0.8rem * var(--lp-interieur, 1)); border-radius: var(--lp-r-petit); overflow: hidden; }
.lp-etapes-acc__visuel img { display: block; width: 100%; height: auto; }
.lp-etapes-acc__texte { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--lp-doux); }
.lp-etapes-acc__donnee {
  margin: calc(0.7rem * var(--lp-interieur, 1)) 0 0;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lp-accent-texte);
}
@media (min-width: 760px) {
  /* Image à gauche, texte à droite : le volet ouvert reste court. */
  .lp-etapes-acc__contenu { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: calc(1.4rem * var(--lp-interieur, 1)); align-items: start; }
  .lp-etapes-acc__visuel { margin-bottom: 0; }
  .lp-etapes-acc__donnee { grid-column: 2; }
}
.lp-section--sombre .lp-etapes-acc__item { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); box-shadow: none; }
.lp-section--sombre .lp-etapes-acc__signe::before,
.lp-section--sombre .lp-etapes-acc__signe::after { background: var(--lp-accent); }

/* ── Paiement en plusieurs fois : une ligne sous le prix ──────────────────
   Il était présenté en carte, à côté de « Livraison offerte » : deux blocs
   de même poids alors que l'un est une offre et l'autre une simple
   modalité. Il redevient ce qu'il est — une précision sur le prix. */
.lp-fractionne--ligne {
  margin-top: calc(0.3rem * var(--lp-interieur, 1));
  font-size: 0.76rem; line-height: 1.4; color: var(--lp-doux);
}
.lp-fractionne--ligne strong {
  font-family: var(--lp-police-titre); font-weight: 600;
  font-size: 0.82rem; color: var(--lp-texte); white-space: nowrap;
}
/* `.lp-prix` est un flex en ligne : sans cette base, la mention de paiement
   viendrait se coller à droite du prix au lieu de passer dessous. */
.lp-prix .lp-fractionne--ligne { flex-basis: 100%; margin-top: calc(0.2rem * var(--lp-interieur, 1)); }

/* Le logo du prestataire, devant la mention de paiement en plusieurs fois. */
.lp-fractionne--ligne { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.lp-fractionne__logo { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.lp-fractionne__logo svg,
.lp-fractionne__logo img { height: 18px; width: auto; display: block; border-radius: 3px; }
.lp-fractionne--carte .lp-fractionne__logo svg,
.lp-fractionne--carte .lp-fractionne__logo img { height: 26px; }

/* ── Paiement en plusieurs fois : le résumé, puis les conditions ──────────
   Le résumé reste une ligne discrète sous le prix. Les conditions passent
   dans un petit encart : elles doivent être lisibles sans prendre la place
   d'un argument de vente. */
.lp-fractionne--ligne { display: block; }
.lp-fractionne__resume {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: 0; font-size: 0.76rem; line-height: 1.4; color: var(--lp-doux);
}
.lp-fractionne__resume strong {
  font-family: var(--lp-police-titre); font-weight: 600;
  font-size: 0.82rem; color: var(--lp-texte); white-space: nowrap;
}
.lp-fractionne__encart {
  margin: calc(0.35rem * var(--lp-interieur, 1)) 0 0;
  padding: calc(0.4rem * var(--lp-interieur, 1)) 0.6rem;
  background: color-mix(in srgb, var(--lp-accent) 6%, transparent);
  border-radius: var(--lp-r-petit);
  font-size: 0.7rem; line-height: 1.35; color: var(--lp-doux);
}
.lp-section--sombre .lp-fractionne__encart { background: rgba(255,255,255,0.07); }
.lp-pied__horaires { font-size: 0.78rem; opacity: 0.75; }

/* ── Cibles tactiles : des liens qu'on vise sans se tromper ───────────────
   Mesuré sur téléphone : les liens du pied de page faisaient 18 px de haut
   pour un pas de 31 px, et les liens soulignés près des boutons 27 px. La
   recommandation est 44 px, avec 8 px entre deux cibles. Douze liens légaux
   empilés à 18 px, c'est la rangée où l'on clique sur « Mentions légales »
   en voulant « Livraison ».

   On agrandit la ZONE sans grossir le texte : le rembourrage étend la
   surface cliquable, la liste resserre son écart pour que le pied de page
   ne s'allonge pas d'autant. */
.lp-pied__liens { gap: 0.1rem; }
.lp-pied__liens a {
  display: inline-block;
  padding: 0.5rem 0;
  line-height: 1.25;
}
/* Les liens soulignés près des appels à l'action. */
.lp-lien { display: inline-block; padding: 0.45rem 0; }