/* ============================================================================
   Landings d'acquisition — LANDING_METIER_2026_08_22
   ----------------------------------------------------------------------------
   Feuille PARTAGEE par les pages /logiciel-*, /facturation-electronique-*,
   /entreprises et /collectivites.

   Deux regles tenues ici, apprises de devenir-prestataire.css :
     1. TOUT est scope sous .lp-landing. Aucune redefinition de :root — l'ancien
        CSS de page redefinissait un :root complet qui fuyait sur tout le site.
     2. Les polices et la palette viennent de tokens.css / fonts.css. On ne
        redeclare aucune @font-face et on ne cite aucun hex qui ne soit pas
        deja la charte (navy #081b3a, creme #f3ead9, or #c9a24b / #d4ac55).
   ========================================================================== */

.lp-landing {
  --lp-serif: "Fraunces", Georgia, serif;
  --lp-sans: "Inter", system-ui, sans-serif;
  --lp-mono: "JetBrains Mono", ui-monospace, monospace;
  --lp-nav-h: 96px;
  --lp-navy: #081b3a;
  --lp-navy-deep: #071630;
  --lp-cream: #f3ead9;
  --lp-gold: #c9a24b;
  /* Dore lisible sur creme : 5,03:1. Le dore clair y tombe a 2,01:1. */
  --lp-gold-fonce: #7a5f26;
  --lp-gold-lite: #d4ac55;
  --lp-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  position: relative;
  background: var(--lp-navy);
  color: var(--lp-cream);
  font-family: var(--lp-sans);
  overflow-x: hidden;
}

.lp-landing ::selection { background: var(--lp-gold); color: var(--lp-navy); }
.lp-landing h1, .lp-landing h2, .lp-landing h3 { font-family: var(--lp-serif); font-weight: 400; margin: 0; }
.lp-landing p { margin: 0; }
.lp-landing em { font-style: italic; color: var(--lp-gold-lite); }

/* --- sur-titre monospace, signature de la charte ------------------------- */
.lp-eyebrow {
  font-family: var(--lp-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lp-gold);
  margin: 0 0 18px;
}
.lp-eyebrow--mute { color: rgba(243, 234, 217, .62); }

/* --- bandeau de reassurance, sous la nav -------------------------------- */
.lp-strip {
  padding: 14px 0;
  border-bottom: 1px solid rgba(243, 234, 217, .08);
  background: rgba(201, 162, 75, .1);
  text-align: center;
  font-family: var(--lp-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 234, 217, .72);
}
.lp-strip b { color: var(--lp-gold-lite); font-weight: 500; }

/* --- hero ---------------------------------------------------------------- */
.lp-hero {
  position: relative;
  padding: calc(var(--lp-nav-h) + 34px) 40px 84px;
  overflow: hidden;
}
.lp-hero-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(20px);
  pointer-events: none;
  animation: lpGlow 9s ease-in-out infinite alternate;
}
.lp-hero-inner { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.lp-hero h1 {
  font-size: clamp(40px, 5.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0 0 26px;
  max-width: 17ch;
}
.lp-hero-sub {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.62;
  color: rgba(243, 234, 217, .72);
  max-width: 62ch;
  margin: 0 0 38px;
}

/* --- boutons ------------------------------------------------------------- */
.lp-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 17px 34px;
  font-family: var(--lp-sans);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--lp-ease), box-shadow .2s var(--lp-ease), background .2s;
}
.lp-btn--gold { background: var(--lp-gold); color: var(--lp-navy); box-shadow: 0 18px 44px rgba(201, 162, 75, .28); }
.lp-btn--gold:hover { transform: translateY(-2px); box-shadow: 0 24px 56px rgba(201, 162, 75, .4); }
.lp-btn--ghost { background: transparent; color: var(--lp-cream); border: 1px solid rgba(243, 234, 217, .28); }
.lp-btn--ghost:hover { border-color: var(--lp-gold); color: var(--lp-gold-lite); }
.lp-btn--dark { background: var(--lp-navy); color: var(--lp-cream); }
.lp-btn--dark:hover { transform: translateY(-2px); }
.lp-trust { margin-top: 20px; font-size: 13px; color: rgba(243, 234, 217, .68); }

/* --- sections ------------------------------------------------------------ */
.lp-section { padding: 96px 40px; position: relative; }
.lp-section--alt { background: var(--lp-navy-deep); }
.lp-section--cream { background: var(--lp-cream); color: var(--lp-navy); text-align: center; overflow: hidden; }
.lp-section--cream h2 { color: var(--lp-navy); }
.lp-section--cream em { color: var(--lp-gold-fonce); }
.lp-inner { max-width: 1240px; margin: 0 auto; }
.lp-inner--narrow { max-width: 860px; }
.lp-section h2 {
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.1;
  letter-spacing: -1.4px;
  margin: 0 0 20px;
}
.lp-lead { font-size: 17px; line-height: 1.7; color: rgba(243, 234, 217, .72); max-width: 68ch; }
.lp-section--cream .lp-lead { color: rgba(8, 27, 58, .68); margin-inline: auto; }
.lp-prose p { font-size: 16.5px; line-height: 1.75; color: rgba(243, 234, 217, .72); margin: 0 0 18px; }
.lp-prose h3 { font-size: clamp(20px, 2.4vw, 27px); margin: 34px 0 12px; }
.lp-prose strong { color: var(--lp-cream); font-weight: 600; }

/* --- grilles et cartes --------------------------------------------------- */
.lp-grid { display: grid; gap: 20px; }
.lp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.lp-card {
  padding: 30px 26px;
  border-radius: 20px;
  background: rgba(243, 234, 217, .035);
  border: 1px solid rgba(243, 234, 217, .1);
  transition: transform .25s var(--lp-ease), border-color .25s, box-shadow .25s;
}
.lp-card:hover { transform: translateY(-4px); border-color: rgba(201, 162, 75, .34); box-shadow: 0 24px 54px rgba(0, 0, 0, .3); }
.lp-card h3 { font-size: 21px; margin: 0 0 10px; }
.lp-card p { font-size: 14.5px; line-height: 1.62; color: rgba(243, 234, 217, .62); }
.lp-card-num { font-family: var(--lp-serif); font-size: 38px; color: var(--lp-gold-lite); line-height: 1; margin-bottom: 12px; }
.lp-tag { display: inline-block; margin-top: 14px; font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-gold); border: 1px solid rgba(201, 162, 75, .34); border-radius: 999px; padding: 5px 11px; }

/* --- encadre chaud (offre) ---------------------------------------------- */
.lp-offer {
  border-radius: 26px;
  padding: 52px 48px;
  background: linear-gradient(150deg, rgba(201, 162, 75, .17), rgba(201, 162, 75, .05));
  border: 1px solid rgba(201, 162, 75, .42);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .34);
}
/* --- encadre froid (conformite, mentions) : volontairement calme --------- */
.lp-note {
  border-radius: 22px;
  padding: 34px 36px;
  background: rgba(243, 234, 217, .035);
  border: 1px solid rgba(243, 234, 217, .13);
}
.lp-note p { font-size: 15px; line-height: 1.7; color: rgba(243, 234, 217, .66); }

/* --- listes a coches ----------------------------------------------------- */
.lp-checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.lp-checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.58; color: rgba(243, 234, 217, .78); }
.lp-checks li::before { content: "✓"; color: var(--lp-gold); flex: 0 0 auto; font-weight: 700; }

/* --- FAQ accordeon (meme comportement que .dp-faq) ---------------------- */
.lp-faq { border-bottom: 1px solid rgba(243, 234, 217, .1); }
.lp-faq-btn {
  width: 100%;
  background: none;
  border: 0;
  color: var(--lp-cream);
  font-family: var(--lp-serif);
  font-size: clamp(17px, 2vw, 21px);
  text-align: left;
  padding: 26px 44px 26px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.35;
}
.lp-faq-ico { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--lp-gold); transition: transform .25s var(--lp-ease); font-size: 20px; }
.lp-faq.open .lp-faq-ico { transform: translateY(-50%) rotate(45deg); }
.lp-faq-ans { max-height: 0; overflow: hidden; transition: max-height .34s var(--lp-ease); }
.lp-faq.open .lp-faq-ans { max-height: 720px; }
.lp-faq-ans > div { padding: 0 30px 26px 0; font-size: 15.5px; line-height: 1.68; color: rgba(243, 234, 217, .68); }

/* --- reveal au scroll ---------------------------------------------------- */
.lp-landing [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--lp-ease), transform .7s var(--lp-ease);
}

@keyframes lpGlow { from { opacity: .5; transform: scale(1); } to { opacity: .85; transform: scale(1.08); } }

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .lp-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .lp-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .lp-hero { padding: calc(var(--lp-nav-h) + 20px) 22px 60px; }
  .lp-section { padding: 66px 22px; }
  .lp-offer { padding: 34px 24px; }
  .lp-note { padding: 26px 22px; }
  .lp-grid--2, .lp-grid--3, .lp-grid--4 { grid-template-columns: 1fr; }
  .lp-hero h1 { letter-spacing: -1px; }
}

/* --- accessibilite : on respecte le reglage systeme ---------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-landing [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lp-hero-halo { animation: none !important; }
  .lp-btn:hover, .lp-card:hover { transform: none !important; }
  .lp-faq-ans { transition: none !important; }
}

/* ===== VISUELS LANDINGS — ajoute le 2026-08-24 =====
   Photo de hero fondue dans le navy (le hero etait un aplat avec une moitie
   droite vide) + bande pleine largeur pour casser le rythme entre sections. */
.lp-hero { position: relative; overflow: hidden; }

.lp-hero-media {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.lp-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* degrade qui fond la photo dans le fond navy, sans jamais gener la lecture */
/* masque plutot qu'aplat de couleur : le hero a un fond TRANSPARENT, donc
   peindre un rectangle navy par-dessus laissait une arete au bord gauche.
   Le masque rend l'image progressivement transparente et laisse remonter le
   vrai fond, quelle que soit sa couleur. */
.lp-hero-media {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 8%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.72) 66%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 0%, transparent 8%, rgba(0,0,0,.30) 34%, rgba(0,0,0,.72) 66%, #000 100%);
}
.lp-hero-media::after { content: none; }
.lp-hero-inner { position: relative; z-index: 1; }

@media (max-width: 980px) {
  /* en mobile la photo passe derriere le texte, tres attenuee : lisibilite d'abord */
  .lp-hero-media { width: 100%; }
  .lp-hero-media {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 60%, transparent 100%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 60%, transparent 100%);
  }
}

/* bande photo pleine largeur */
.lp-band { position: relative; overflow: hidden; line-height: 0; background: var(--lp-navy-deep); }
.lp-band img {
  width: 100%;
  height: clamp(200px, 30vw, 400px);
  object-fit: cover;
  object-position: center;
  display: block;
}
.lp-band-legend {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px clamp(20px, 5vw, 64px) 18px;
  background: linear-gradient(180deg, rgba(8, 27, 58, 0) 0%, rgba(8, 27, 58, .78) 100%);
  color: var(--lp-cream);
  font-family: var(--lp-sans);
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.5;
}

/* ===== BLOCS DE CONVERSION — ajoutes le 2026-08-24 =====
   Trois composants manquaient au vocabulaire lp-* : la preuve sociale,
   la presse et la bascule avant/apres. Ils reprennent les tokens existants,
   aucun nouveau reglage de couleur. */

/* --- temoignages ------------------------------------------------------- */
.lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lp-quote {
  background: rgba(243, 234, 217, .045);
  border: 1px solid rgba(243, 234, 217, .12);
  border-radius: 18px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp-quote-stars { color: var(--lp-gold); font-size: 13px; letter-spacing: .18em; }
.lp-quote-txt {
  font-family: var(--lp-serif);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--lp-cream);
  margin: 0;
  flex: 1;
}
.lp-quote-who { display: flex; align-items: center; gap: 13px; }
.lp-quote-ini {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, rgba(201, 162, 75, .34), rgba(201, 162, 75, .12));
  border: 1px solid rgba(201, 162, 75, .45);
  color: var(--lp-gold);
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.lp-quote-nom { font-size: 14.5px; font-weight: 600; color: var(--lp-cream); line-height: 1.3; }
.lp-quote-meta { font-size: 12.5px; color: rgba(243, 234, 217, .55); letter-spacing: .03em; }
.lp-quote--fort { border-color: rgba(201, 162, 75, .42); background: rgba(201, 162, 75, .07); }

/* --- presse ------------------------------------------------------------ */
.lp-press { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lp-press-card {
  border: 1px solid rgba(243, 234, 217, .13);
  border-radius: 18px;
  padding: 26px 26px 22px;
  background: rgba(243, 234, 217, .035);
}
.lp-press-src {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lp-gold); margin-bottom: 12px;
}
.lp-press-txt {
  font-family: var(--lp-serif); font-size: 17px; line-height: 1.5;
  color: var(--lp-cream); margin: 0 0 14px;
}
.lp-press-lien { font-size: 13.5px; color: var(--lp-gold-lite); text-decoration: none; border-bottom: 1px solid rgba(201, 162, 75, .4); padding-bottom: 1px; }
.lp-press-lien:hover { border-bottom-color: var(--lp-gold-lite); }

/* --- avant / apres ------------------------------------------------------ */
.lp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.lp-ba-col { border-radius: 18px; padding: 28px 26px; }
.lp-ba-col--sans { background: rgba(0, 0, 0, .17); border: 1px solid rgba(243, 234, 217, .09); }
.lp-ba-col--avec { background: rgba(201, 162, 75, .08); border: 1px solid rgba(201, 162, 75, .34); }
.lp-ba-titre {
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
  margin: 0 0 18px; font-weight: 600;
}
.lp-ba-col--sans .lp-ba-titre { color: rgba(243, 234, 217, .45); }
.lp-ba-col--avec .lp-ba-titre { color: var(--lp-gold); }
.lp-ba-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lp-ba-liste li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
.lp-ba-col--sans li { color: rgba(243, 234, 217, .62); }
.lp-ba-col--avec li { color: var(--lp-cream); }
.lp-ba-col--sans li::before { content: "✕"; color: rgba(243, 234, 217, .34); flex: 0 0 auto; }
.lp-ba-col--avec li::before { content: "✓"; color: var(--lp-gold); flex: 0 0 auto; font-weight: 700; }

@media (max-width: 900px) {
  .lp-quotes, .lp-press, .lp-ba { grid-template-columns: 1fr; }
}

/* ===== PAGE DE VENTE — blocs direct-response (24/08/2026) =====
   Cinq composants pour les leviers qui manquaient : cout de l'inaction,
   pile de valeur, garantie, objections, post-scriptum. Memes tokens, aucune
   nouvelle couleur. */

/* (28/08) 7 Ko de composants sans aucune page qui les émette ont été retirés ici :
   lp-cout, lp-stack, lp-garantie, lp-obj, lp-ps, lp-demo-*, lp-split*,
   lp-ba-liste--plain, lp-band--tall — vérifié sur les 65 HTML, dist/ et src/.
   Ils sont dans git si un futur gabarit les veut. */

/* Rythme resserre — PAGES PORTANT data-lp UNIQUEMENT.
   La reduction du padding a ete validee a l ecran sur cette page seule.
   Elle sera etendue aux 7 autres landings quand chacune aura ete recettee. */
.lp-landing[data-lp] .lp-section { padding: 62px 40px; }
@media (max-width: 760px) {
  .lp-landing[data-lp] .lp-section { padding: 48px 22px; }
}

/* =====================================================================
   FUNNEL TRAITEUR — refonte du 24/08/2026
   Page de vente : video d'abord, icones, blocs aeres, peu de texte.
   Toutes les regles sont prefixees .lp-landing[data-lp] pour
   ne rien changer aux 7 autres landings tant qu'elles ne sont pas recettees.
   ===================================================================== */
.lp-landing[data-lp] {
  --tr-gap: clamp(28px, 4vw, 54px);
}

/* --- titres courts, plus d'air --------------------------------------- */
.lp-landing[data-lp] .lp-h2-court {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.12;
  max-width: 20ch;
  margin: 0 0 clamp(30px, 4vw, 52px);
}
.lp-landing[data-lp] .lp-section { padding: clamp(56px, 7vw, 92px) 40px; }

/* --- rangee d'icones -------------------------------------------------- */
.lp-landing[data-lp] .lp-icones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tr-gap);
}
.lp-landing[data-lp] .lp-icones--4 { grid-template-columns: repeat(4, 1fr); }

.lp-landing[data-lp] .lp-icone h3 {
  font-family: var(--lp-serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.25;
  color: var(--lp-cream);
  margin: 0 0 10px;
  font-weight: 400;
}
.lp-landing[data-lp] .lp-icone p {
  font-size: 15px;
  line-height: 1.62;
  color: rgba(243, 234, 217, .70);
  margin: 0;
  max-width: 32ch;
}
.lp-landing[data-lp] .lp-icone--compact p { font-size: 14.5px; }

.lp-landing[data-lp] .lp-icone-rond {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  color: var(--lp-gold);
  background: rgba(201, 162, 75, .10);
  border: 1px solid rgba(201, 162, 75, .28);
}
.lp-landing[data-lp] .lp-icone-rond svg { width: 24px; height: 24px; }

/* Sur fond creme, l'icone et le texte s'inversent */
.lp-landing[data-lp] .lp-section--cream .lp-icone h3 { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--cream .lp-icone p { color: rgba(8, 27, 58, .68); }

/* --- blocs video ------------------------------------------------------ */
.lp-landing[data-lp] .lp-video {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(243, 234, 217, .14);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .46);
  background: #0d1b33;
  line-height: 0;
}
.lp-landing[data-lp] .lp-video video {
  width: 100%;
  height: auto;
  display: block;
}
.lp-landing[data-lp] .lp-video-cap {
  font-size: 12.5px;
  letter-spacing: .03em;
  color: rgba(243, 234, 217, .68);
  margin: 14px 0 0;
}

/* --- puces a coche ---------------------------------------------------- */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: rgba(243, 234, 217, .82);
}
.lp-landing[data-lp] .lp-puce svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  color: var(--lp-gold);
}

/* --- temoignage : video verticale + citations ------------------------- */
.lp-landing[data-lp] .lp-temoin {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}
.lp-landing[data-lp] .lp-temoin-video {
  border-radius: 22px;
  overflow: hidden;
  background: #0d1b33;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
  line-height: 0;
}
.lp-landing[data-lp] .lp-temoin-video video {
  width: 100%;
  height: auto;
  display: block;
}
.lp-landing[data-lp] .lp-temoin-txt blockquote {
  font-family: var(--lp-serif);
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.4;
  color: var(--lp-cream);
  margin: 14px 0 16px;
}
.lp-landing[data-lp] .lp-temoin-qui {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(243, 234, 217, .58);
  margin: 0;
}
.lp-landing[data-lp] .lp-temoin-qui strong { color: var(--lp-cream); font-weight: 600; }
.lp-landing[data-lp] .lp-quote-2 {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid rgba(201, 162, 75, .26);
}
.lp-landing[data-lp] .lp-quote-2 blockquote { font-size: clamp(16px, 1.4vw, 19px); }

/* --- presse, format compact ------------------------------------------ */
.lp-landing[data-lp] .lp-presse2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lp-landing[data-lp] .lp-presse2-item {
  display: block;
  padding: 24px 26px;
  border-radius: 16px;
  border: 1px solid rgba(243, 234, 217, .12);
  background: rgba(243, 234, 217, .03);
  text-decoration: none;
  transition: border-color .25s ease, transform .25s ease;
}
.lp-landing[data-lp] .lp-presse2-item:hover { border-color: rgba(201, 162, 75, .5); transform: translateY(-2px); }
.lp-landing[data-lp] .lp-presse2-src {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lp-gold);
  margin-bottom: 10px;
}
.lp-landing[data-lp] .lp-presse2-txt {
  display: block;
  font-family: var(--lp-serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--lp-cream);
}

/* --- tableau de prix -------------------------------------------------- */
.lp-landing[data-lp] .lp-prix { margin: 4px 0 28px; }
.lp-landing[data-lp] .lp-prix-ligne,
.lp-landing[data-lp] .lp-prix-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(243, 234, 217, .10);
  font-size: 15.5px;
  color: rgba(243, 234, 217, .78);
}
.lp-landing[data-lp] .lp-prix-ligne b { color: var(--lp-cream); font-weight: 600; white-space: nowrap; }
.lp-landing[data-lp] .lp-prix-total {
  border-bottom: 0;
  border-top: 2px solid rgba(201, 162, 75, .45);
  margin-top: 6px;
  padding-top: 18px;
  font-size: 17px;
  color: var(--lp-cream);
}
.lp-landing[data-lp] .lp-prix-total b {
  font-family: var(--lp-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--lp-gold);
  white-space: nowrap;
}

/* --- responsive ------------------------------------------------------- */
@media (max-width: 980px) {
  .lp-landing[data-lp] .lp-icones,
  .lp-landing[data-lp] .lp-icones--4 { grid-template-columns: 1fr 1fr; }
  .lp-landing[data-lp] .lp-temoin { grid-template-columns: 1fr; justify-items: center; }
  .lp-landing[data-lp] .lp-temoin-video { max-width: 320px; }
  .lp-landing[data-lp] .lp-presse2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-section { padding: 46px 22px; }
  .lp-landing[data-lp] .lp-icones,
  .lp-landing[data-lp] .lp-icones--4 { grid-template-columns: 1fr; gap: 32px; }
  .lp-landing[data-lp] .lp-icone p { max-width: none; }
  .lp-landing[data-lp] .lp-h2-court { max-width: none; }
  .lp-landing[data-lp] .lp-prix-ligne,
  .lp-landing[data-lp] .lp-prix-total { font-size: 14.5px; }
}

/* Les captures fixes ont disparu au profit de la video : la regle mobile
   qui les sortait de la gouttiere n'a plus d'objet et est neutralisee. */
@media (max-width: 860px) {
  .lp-landing[data-lp] .lp-demo-shot { margin-left: 0; margin-right: 0; overflow-x: visible; }
}

/* Sur telephone, la video sort de la gouttiere : une capture d application
   rendue a 335 px est deja peu lisible, on prend toute la largeur possible. */
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-video {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .lp-landing[data-lp] .lp-video-cap { padding: 0 4px; }
}

/* =====================================================================
   TUNNEL DE VENTE — traiteur (25/08/2026)
   Rupture, methode numerotee, aimant a prospects.
   Scope [data-lp] : ne s'applique qu'aux pages qui portent l'attribut.
   ===================================================================== */

/* --- la rupture de pattern ------------------------------------------- */
.lp-landing[data-lp] .lp-choc {
  font-family: var(--lp-serif);
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.18;
  color: var(--lp-cream);
  font-weight: 400;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
}
.lp-landing[data-lp] .lp-choc em { color: var(--lp-gold); font-style: italic; }

.lp-landing[data-lp] .lp-recit {
  border-left: 2px solid rgba(201, 162, 75, .45);
  padding-left: clamp(20px, 2.4vw, 30px);
}
.lp-landing[data-lp] .lp-recit p {
  font-size: clamp(15.5px, 1.3vw, 17px);
  line-height: 1.66;
  color: rgba(243, 234, 217, .74);
  margin: 0 0 14px;
}
.lp-landing[data-lp] .lp-recit p.lp-recit-chute {
  margin-top: 22px;
  color: var(--lp-cream);
  font-size: clamp(17px, 1.5vw, 20px);
}
/* 0-4-1 bat le 0-3-1 de `.lp-landing[data-lp] .lp-recit p` : plus besoin de !important */
.lp-landing[data-lp] .lp-recit-chute strong { color: var(--lp-gold); }

/* --- la methode, numerotee ------------------------------------------- */
.lp-landing[data-lp] .lp-etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(243, 234, 217, .12);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(243, 234, 217, .12);
}
.lp-landing[data-lp] .lp-etape {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 40px);
  background: var(--lp-navy-deep);
}
.lp-landing[data-lp] .lp-etape-num {
  font-family: var(--lp-serif);
  font-size: clamp(38px, 4vw, 56px);
  line-height: .85;
  color: rgba(201, 162, 75, .78);
}
.lp-landing[data-lp] .lp-etape h3 {
  font-family: var(--lp-serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 400;
  color: var(--lp-cream);
  margin: 0 0 10px;
}
.lp-landing[data-lp] .lp-etape p {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(243, 234, 217, .74);
  margin: 0;
  max-width: 62ch;
}
.lp-landing[data-lp] .lp-etape strong { color: var(--lp-cream); }

/* --- le bloc scan de facture ----------------------------------------- */
.lp-landing[data-lp] .lp-scan {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  margin-top: 32px;
  padding: 24px 28px;
  border-radius: 16px;
  border: 1px solid rgba(201, 162, 75, .3);
  background: rgba(201, 162, 75, .06);
}
.lp-landing[data-lp] .lp-scan .lp-icone-rond { margin-bottom: 0; }
.lp-landing[data-lp] .lp-scan p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(243, 234, 217, .82);
}
.lp-landing[data-lp] .lp-scan strong { color: var(--lp-gold); }

/* --- l'aimant a prospects : le bloc le plus visible de la page -------- */
.lp-landing[data-lp] .lp-aimant {
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(201, 162, 75, .16) 0%, rgba(201, 162, 75, 0) 62%),
    var(--lp-navy-deep);
}
.lp-landing[data-lp] .lp-aimant-carte {
  border: 1px solid rgba(201, 162, 75, .55);
  border-radius: 24px;
  padding: clamp(34px, 4.4vw, 60px) clamp(26px, 4vw, 56px);
  background: rgba(11, 26, 51, .72);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  text-align: center;
}
.lp-landing[data-lp] .lp-aimant-carte h2 {
  font-family: var(--lp-serif);
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.06;
  color: var(--lp-cream);
  font-weight: 400;
  margin: 8px 0 22px;
}
.lp-landing[data-lp] .lp-aimant-promesse {
  font-size: clamp(16.5px, 1.5vw, 19.5px);
  line-height: 1.6;
  color: rgba(243, 234, 217, .84);
  max-width: 54ch;
  margin: 0 auto 28px;
}
.lp-landing[data-lp] .lp-aimant-promesse strong { color: var(--lp-gold); }
.lp-landing[data-lp] .lp-aimant-carte .lp-checks {
  max-width: 46ch;
  margin-inline: auto;
  text-align: left;
}
.lp-landing[data-lp] .lp-aimant-note {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(243, 234, 217, .5);
}
.lp-landing[data-lp] .lp-btn--gros {
  font-size: 17px;
  padding: 18px 34px;
}

@media (max-width: 760px) {
  .lp-landing[data-lp] .lp-etape { grid-template-columns: 1fr; gap: 10px; }
  .lp-landing[data-lp] .lp-etape-num { font-size: 34px; }
  .lp-landing[data-lp] .lp-scan { grid-template-columns: 1fr; gap: 14px; }
  .lp-landing[data-lp] .lp-aimant-carte .lp-checks { max-width: none; }
}

/* =====================================================================
   AFFINAGE DU TUNNEL — 25/08/2026
   Vidéos -30 %, phrases coup de poing, bloc "ce que ça déclenche",
   et un peu plus de vie au survol.
   ===================================================================== */

/* --- VIDEOS : 30 % PLUS PETITES ------------------------------------- */
.lp-landing[data-lp] .lp-video {
  max-width: 70%;
  margin-inline: auto;
}
.lp-landing[data-lp] .lp-video-cap {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
}
@media (max-width: 980px) {
  .lp-landing[data-lp] .lp-video,
  .lp-landing[data-lp] .lp-video-cap { max-width: 88%; }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-video,
  .lp-landing[data-lp] .lp-video-cap { max-width: 100%; }
}

/* --- LA PHRASE COUP DE POING ---------------------------------------- */
.lp-landing[data-lp] .lp-punch {
  font-family: var(--lp-serif);
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.24;
  color: var(--lp-gold);
  margin: clamp(30px, 3.6vw, 46px) 0 0;
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid rgba(201, 162, 75, .3);
}
.lp-landing[data-lp] .lp-punch--petit {
  font-size: clamp(16px, 1.5vw, 19px);
  color: rgba(243, 234, 217, .8);
  border-top: 0;
  padding-top: 0;
  margin: 0 0 26px;
}
.lp-landing[data-lp] .lp-punch--petit strong { color: var(--lp-gold); }

/* --- CE QUE LE DEVIS DECLENCHE -------------------------------------- */
.lp-landing[data-lp] .lp-declenche {
  margin-top: clamp(34px, 4vw, 50px);
  padding: clamp(26px, 3vw, 38px) clamp(24px, 3vw, 36px);
  border: 1px solid rgba(201, 162, 75, .32);
  border-radius: 20px;
  background: rgba(201, 162, 75, .05);
}
.lp-landing[data-lp] .lp-declenche-titre {
  font-family: var(--lp-serif);
  font-size: clamp(19px, 1.7vw, 24px);
  color: var(--lp-cream);
  margin: 0 0 26px;
}
.lp-landing[data-lp] .lp-declenche-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 30px);
}
.lp-landing[data-lp] .lp-declenche-item .lp-icone-rond {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
}
.lp-landing[data-lp] .lp-declenche-item .lp-icone-rond svg { width: 21px; height: 21px; }
.lp-landing[data-lp] .lp-declenche-item b {
  display: block;
  font-family: var(--lp-serif);
  font-size: 17px;
  font-weight: 400;
  color: var(--lp-cream);
  margin-bottom: 6px;
}
.lp-landing[data-lp] .lp-declenche-item span {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243, 234, 217, .68);
}

/* --- UN PEU DE VIE : survols et apparitions -------------------------- */
.lp-landing[data-lp] .lp-etape { transition: background .3s ease; }
.lp-landing[data-lp] .lp-etape:hover { background: rgba(201, 162, 75, .05); }
.lp-landing[data-lp] .lp-etape:hover .lp-etape-num { color: rgba(201, 162, 75, .8); }
.lp-landing[data-lp] .lp-etape-num { transition: color .3s ease; }

.lp-landing[data-lp] .lp-icone-rond { transition: transform .3s ease, background .3s ease; }
.lp-landing[data-lp] .lp-icone:hover .lp-icone-rond,
.lp-landing[data-lp] .lp-declenche-item:hover .lp-icone-rond {
  transform: translateY(-3px);
  background: rgba(201, 162, 75, .17);
}

.lp-landing[data-lp] .lp-video {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}
.lp-landing[data-lp] .lp-video:hover {
  transform: translateY(-4px);
  box-shadow: 0 44px 96px rgba(0, 0, 0, .55);
}

/* Le bouton principal respire, pour attirer l'oeil sans clignoter */
@media (prefers-reduced-motion: no-preference) {
  .lp-landing[data-lp] .lp-btn--gros {
    animation: lp-respire 3.4s ease-in-out infinite;
  }
  @keyframes lp-respire {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.028); }
  }
}

/* Variante fantome lisible sur fond creme */
.lp-landing[data-lp] .lp-btn--sombre {
  color: var(--lp-navy);
  border-color: rgba(8, 27, 58, .3);
}
.lp-landing[data-lp] .lp-btn--sombre:hover { border-color: rgba(8, 27, 58, .6); }

@media (max-width: 980px) {
  .lp-landing[data-lp] .lp-declenche-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-declenche-grille { grid-template-columns: 1fr; }
}

/* =====================================================================
   LE SCAN IA — sa propre section, la plus visible du haut de page.
   ===================================================================== */
.lp-landing[data-lp] .lp-scania {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 75, .13) 0%, rgba(201, 162, 75, 0) 60%),
    var(--lp-navy);
  border-top: 1px solid rgba(201, 162, 75, .22);
  border-bottom: 1px solid rgba(201, 162, 75, .22);
}
.lp-landing[data-lp] .lp-scania-titre {
  font-family: var(--lp-serif);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--lp-cream);
  margin: 0 0 18px;
  max-width: 22ch;
}
.lp-landing[data-lp] .lp-scania-titre em { color: var(--lp-gold); font-style: italic; }
.lp-landing[data-lp] .lp-scania-sous {
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(243, 234, 217, .72);
  max-width: 56ch;
  margin: 0 0 clamp(34px, 4vw, 52px);
}

/* --- le flux en trois temps ----------------------------------------- */
.lp-landing[data-lp] .lp-flux {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
.lp-landing[data-lp] .lp-flux-etape {
  border: 1px solid rgba(243, 234, 217, .14);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(11, 26, 51, .55);
  transition: border-color .3s ease, transform .3s ease;
}
.lp-landing[data-lp] .lp-flux-etape:hover {
  border-color: rgba(201, 162, 75, .5);
  transform: translateY(-3px);
}
.lp-landing[data-lp] .lp-flux-etape--ia {
  border-color: rgba(201, 162, 75, .45);
  background: rgba(201, 162, 75, .07);
}
.lp-landing[data-lp] .lp-flux-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  margin-bottom: 16px;
  color: var(--lp-gold);
  background: rgba(201, 162, 75, .12);
  border: 1px solid rgba(201, 162, 75, .3);
}
.lp-landing[data-lp] .lp-flux-ico svg { width: 23px; height: 23px; }
.lp-landing[data-lp] .lp-flux-etape b {
  display: block;
  font-family: var(--lp-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  color: var(--lp-cream);
  margin-bottom: 8px;
}
.lp-landing[data-lp] .lp-flux-etape span {
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(243, 234, 217, .7);
}
.lp-landing[data-lp] .lp-flux-fleche {
  display: grid;
  place-items: center;
  color: rgba(201, 162, 75, .55);
}
.lp-landing[data-lp] .lp-flux-fleche svg { width: 26px; height: 26px; }

/* L'etape IA pulse doucement : c'est elle qui fait le travail. */
@media (prefers-reduced-motion: no-preference) {
  .lp-landing[data-lp] .lp-flux-etape--ia .lp-flux-ico {
    animation: lp-scintille 2.8s ease-in-out infinite;
  }
  @keyframes lp-scintille {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .34); }
    50% { box-shadow: 0 0 0 11px rgba(201, 162, 75, 0); }
  }
  .lp-landing[data-lp] .lp-flux-fleche svg {
    animation: lp-glisse 2.4s ease-in-out infinite;
  }
  @keyframes lp-glisse {
    0%, 100% { transform: translateX(-3px); opacity: .55; }
    50% { transform: translateX(3px); opacity: 1; }
  }
}

/* --- sans / avec ----------------------------------------------------- */
.lp-landing[data-lp] .lp-avant-apres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(30px, 3.4vw, 44px);
}
.lp-landing[data-lp] .lp-ap-col {
  border-radius: 16px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid rgba(243, 234, 217, .12);
}
.lp-landing[data-lp] .lp-ap-col--avant { background: rgba(243, 234, 217, .03); }
.lp-landing[data-lp] .lp-ap-col--apres {
  background: rgba(201, 162, 75, .08);
  border-color: rgba(201, 162, 75, .38);
}
.lp-landing[data-lp] .lp-ap-titre {
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: rgba(243, 234, 217, .70);
}
.lp-landing[data-lp] .lp-ap-col--apres .lp-ap-titre { color: var(--lp-gold-lite); }
.lp-landing[data-lp] .lp-ap-col p:last-child {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(243, 234, 217, .78);
}

@media (max-width: 980px) {
  .lp-landing[data-lp] .lp-flux { grid-template-columns: 1fr; }
  .lp-landing[data-lp] .lp-flux-fleche { transform: rotate(90deg); padding: 4px 0; }
  .lp-landing[data-lp] .lp-avant-apres { grid-template-columns: 1fr; }
  .lp-landing[data-lp] .lp-scania-titre { max-width: none; }
}

/* =====================================================================
   L'OFFRE VIP — le plus gros panier, donc le bloc le plus riche.
   ===================================================================== */
.lp-landing[data-lp] .lp-vip {
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(201, 162, 75, .18) 0%, rgba(201, 162, 75, 0) 62%),
    var(--lp-navy-deep);
  border-top: 1px solid rgba(201, 162, 75, .3);
}
.lp-landing[data-lp] .lp-vip-titre {
  font-family: var(--lp-serif);
  font-size: clamp(28px, 3.5vw, 46px);
  line-height: 1.1;
  font-weight: 400;
  color: var(--lp-cream);
  margin: 0 0 16px;
  max-width: 24ch;
}
.lp-landing[data-lp] .lp-vip-titre em { color: var(--lp-gold); font-style: italic; }
.lp-landing[data-lp] .lp-vip-sous {
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(243, 234, 217, .74);
  max-width: 52ch;
  margin: 0 0 clamp(32px, 3.6vw, 46px);
}

.lp-landing[data-lp] .lp-vip-grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.2vw, 26px);
}
.lp-landing[data-lp] .lp-vip-item {
  border: 1px solid rgba(243, 234, 217, .14);
  border-radius: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(11, 26, 51, .5);
  transition: border-color .3s ease, transform .3s ease;
}
.lp-landing[data-lp] .lp-vip-item:hover {
  border-color: rgba(201, 162, 75, .55);
  transform: translateY(-3px);
}
.lp-landing[data-lp] .lp-vip-item--fort {
  border-color: rgba(201, 162, 75, .5);
  background: rgba(201, 162, 75, .08);
}
.lp-landing[data-lp] .lp-vip-item b {
  display: block;
  font-family: var(--lp-serif);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 400;
  color: var(--lp-cream);
  margin-bottom: 8px;
}
.lp-landing[data-lp] .lp-vip-item span {
  font-size: 14.5px;
  line-height: 1.58;
  color: rgba(243, 234, 217, .7);
}

.lp-landing[data-lp] .lp-vip-pied {
  margin-top: clamp(26px, 3vw, 36px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 30px);
  border-left: 3px solid rgba(201, 162, 75, .6);
  border-radius: 0 14px 14px 0;
  background: rgba(243, 234, 217, .04);
}
.lp-landing[data-lp] .lp-vip-pied p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(243, 234, 217, .8);
}
.lp-landing[data-lp] .lp-vip-pied strong { color: var(--lp-gold); }

.lp-landing[data-lp] .lp-vip-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  color: rgba(243, 234, 217, .5);
}

@media (max-width: 1080px) {
  .lp-landing[data-lp] .lp-vip-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-vip-grille { grid-template-columns: 1fr; }
  .lp-landing[data-lp] .lp-vip-titre { max-width: none; }
}

/* --- Le prérequis : créer son compte AVANT le rendez-vous ------------- */
.lp-landing[data-lp] .lp-prerequis {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(243, 234, 217, .6);
}
.lp-landing[data-lp] .lp-actions--center + .lp-prerequis,
.lp-landing[data-lp] .lp-aimant-carte .lp-prerequis {
  justify-content: center;
  text-align: left;
}
.lp-landing[data-lp] .lp-prerequis svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 2px;
  color: var(--lp-gold);
}
.lp-landing[data-lp] .lp-prerequis a {
  color: var(--lp-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lp-landing[data-lp] .lp-prerequis a:hover { color: var(--lp-cream); }
.lp-landing[data-lp] .lp-section--cream .lp-prerequis { color: rgba(8, 27, 58, .62); }

/* =====================================================================
   MUR DES MÉTIERS + MUR DES TÉMOIGNAGES (page devenir-prestataire)
   ===================================================================== */
.lp-landing[data-lp] .lp-metiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.lp-landing[data-lp] .lp-metier {
  display: block;
  padding: clamp(22px, 2.6vw, 30px);
  border: 1px solid rgba(243, 234, 217, .14);
  border-radius: 18px;
  background: rgba(11, 26, 51, .5);
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.lp-landing[data-lp] .lp-metier:hover {
  border-color: rgba(201, 162, 75, .6);
  background: rgba(201, 162, 75, .07);
  transform: translateY(-3px);
}
.lp-landing[data-lp] .lp-metier-nom {
  display: block;
  font-family: var(--lp-serif);
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--lp-cream);
  margin-bottom: 8px;
}
.lp-landing[data-lp] .lp-metier-quoi {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(243, 234, 217, .68);
  margin-bottom: 14px;
}
.lp-landing[data-lp] .lp-metier-prix {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--lp-gold);
  border: 1px solid rgba(201, 162, 75, .4);
  border-radius: 999px;
  padding: 5px 12px;
}

/* --- le mur des témoignages ------------------------------------------ */
.lp-landing[data-lp] .lp-mur {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.8vw, 22px);
  align-items: start;
}
.lp-landing[data-lp] .lp-mur-item { margin: 0; }
.lp-landing[data-lp] .lp-mur-item video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  background: #0d1b33;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .45);
}
.lp-landing[data-lp] .lp-mur-item figcaption {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.45;
}
.lp-landing[data-lp] .lp-mur-item b { display: block; color: var(--lp-cream); font-weight: 600; }
.lp-landing[data-lp] .lp-mur-item span { color: rgba(243, 234, 217, .58); }

@media (max-width: 1080px) {
  .lp-landing[data-lp] .lp-metiers { grid-template-columns: 1fr 1fr; }
  .lp-landing[data-lp] .lp-mur { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-metiers { grid-template-columns: 1fr; }
  .lp-landing[data-lp] .lp-mur { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   ALTERNANCE SOMBRE / CLAIR
   Les blocs se suivaient en deux nuances de bleu nuit : la separation ne
   se voyait pas. On introduit une vraie section claire, et on alterne.
   Tout ce qui vit dans une section claire doit etre relu ici : les
   composants sont ecrits pour du creme sur bleu nuit.
   ===================================================================== */
.lp-landing[data-lp] .lp-section--clair {
  background: var(--lp-cream);
  color: var(--lp-navy);
}

/* --- titres et textes ------------------------------------------------ */
.lp-landing[data-lp] .lp-section--clair h2,
.lp-landing[data-lp] .lp-section--clair h3,
.lp-landing[data-lp] .lp-section--clair .lp-h2-court,
.lp-landing[data-lp] .lp-section--clair .lp-choc,
.lp-landing[data-lp] .lp-section--clair .lp-vip-titre,
.lp-landing[data-lp] .lp-section--clair .lp-scania-titre { color: var(--lp-navy); }

.lp-landing[data-lp] .lp-section--clair p,
.lp-landing[data-lp] .lp-section--clair li,
.lp-landing[data-lp] .lp-section--clair .lp-lead,
.lp-landing[data-lp] .lp-section--clair .lp-scania-sous,
.lp-landing[data-lp] .lp-section--clair .lp-vip-sous { color: rgba(8, 27, 58, .74); }

.lp-landing[data-lp] .lp-section--clair .lp-eyebrow { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-eyebrow--mute { color: rgba(8, 27, 58, .66); }
.lp-landing[data-lp] .lp-section--clair em { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair strong { color: var(--lp-navy); }

/* --- icones ---------------------------------------------------------- */
.lp-landing[data-lp] .lp-section--clair .lp-icone-rond,
.lp-landing[data-lp] .lp-section--clair .lp-flux-ico {
  color: var(--lp-gold-fonce);
  background: rgba(201, 162, 75, .16);
  border-color: rgba(138, 109, 47, .34);
}
.lp-landing[data-lp] .lp-section--clair .lp-icone h3,
.lp-landing[data-lp] .lp-section--clair .lp-icone p,
.lp-landing[data-lp] .lp-section--clair .lp-flux-etape b { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-icone p,
.lp-landing[data-lp] .lp-section--clair .lp-flux-etape span { color: rgba(8, 27, 58, .68); }

/* --- cartes, encadres, listes ---------------------------------------- */
.lp-landing[data-lp] .lp-section--clair .lp-etapes,
.lp-landing[data-lp] .lp-section--clair .lp-flux-etape,
.lp-landing[data-lp] .lp-section--clair .lp-metier,
.lp-landing[data-lp] .lp-section--clair .lp-vip-item,
.lp-landing[data-lp] .lp-section--clair .lp-presse2-item,
.lp-landing[data-lp] .lp-section--clair .lp-ap-col {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(8, 27, 58, .13);
}
.lp-landing[data-lp] .lp-section--clair .lp-etapes { background: rgba(8, 27, 58, .1); }
.lp-landing[data-lp] .lp-section--clair .lp-etape { background: var(--lp-cream); }
.lp-landing[data-lp] .lp-section--clair .lp-etape:hover { background: rgba(201, 162, 75, .1); }
.lp-landing[data-lp] .lp-section--clair .lp-etape-num { color: rgba(122, 95, 38, .82); }
.lp-landing[data-lp] .lp-section--clair .lp-etape h3 { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-etape p { color: rgba(8, 27, 58, .7); }

.lp-landing[data-lp] .lp-section--clair .lp-flux-etape--ia,
.lp-landing[data-lp] .lp-section--clair .lp-vip-item--fort,
.lp-landing[data-lp] .lp-section--clair .lp-ap-col--apres {
  background: rgba(201, 162, 75, .15);
  border-color: rgba(138, 109, 47, .42);
}
.lp-landing[data-lp] .lp-section--clair .lp-flux-fleche { color: rgba(138, 109, 47, .6); }

.lp-landing[data-lp] .lp-section--clair .lp-metier-nom,
.lp-landing[data-lp] .lp-section--clair .lp-vip-item b,
.lp-landing[data-lp] .lp-section--clair .lp-presse2-txt { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-metier-quoi,
.lp-landing[data-lp] .lp-section--clair .lp-vip-item span { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-metier-prix,
.lp-landing[data-lp] .lp-section--clair .lp-presse2-src { color: var(--lp-gold-fonce); border-color: rgba(138, 109, 47, .42); }
.lp-landing[data-lp] .lp-section--clair .lp-metier:hover { background: rgba(201, 162, 75, .14); }

/* --- recit, puces, prix ---------------------------------------------- */
.lp-landing[data-lp] .lp-section--clair .lp-recit { border-left-color: rgba(138, 109, 47, .5); }
.lp-landing[data-lp] .lp-section--clair .lp-recit p { color: rgba(8, 27, 58, .72); }
.lp-landing[data-lp] .lp-section--clair .lp-recit p.lp-recit-chute { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-recit-chute strong,
.lp-landing[data-lp] .lp-section--clair .lp-punch { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-punch { border-top-color: rgba(138, 109, 47, .34); }

.lp-landing[data-lp] .lp-section--clair .lp-checks li { color: rgba(8, 27, 58, .8); }
.lp-landing[data-lp] .lp-section--clair .lp-checks li::before { color: var(--lp-gold-fonce); }

.lp-landing[data-lp] .lp-section--clair .lp-prix-ligne,
.lp-landing[data-lp] .lp-section--clair .lp-prix-total {
  color: rgba(8, 27, 58, .78);
  border-bottom-color: rgba(8, 27, 58, .12);
}
.lp-landing[data-lp] .lp-section--clair .lp-prix-ligne b,
.lp-landing[data-lp] .lp-section--clair .lp-prix-total { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-prix-total { border-top-color: rgba(138, 109, 47, .55); }
.lp-landing[data-lp] .lp-section--clair .lp-prix-total b { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-offer { background: transparent; }

/* --- FAQ, video, temoin ---------------------------------------------- */
.lp-landing[data-lp] .lp-section--clair .lp-faq { border-bottom-color: rgba(8, 27, 58, .14); }
.lp-landing[data-lp] .lp-section--clair .lp-faq-btn { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-faq-ico { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-faq-ans p { color: rgba(8, 27, 58, .72); }

.lp-landing[data-lp] .lp-section--clair .lp-video,
.lp-landing[data-lp] .lp-section--clair .lp-temoin-video,
.lp-landing[data-lp] .lp-section--clair .lp-mur-item video {
  border-color: rgba(8, 27, 58, .16);
  box-shadow: 0 26px 60px rgba(8, 27, 58, .22);
}
.lp-landing[data-lp] .lp-section--clair .lp-video-cap,
.lp-landing[data-lp] .lp-section--clair .lp-mur-item span { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-temoin-txt blockquote,
.lp-landing[data-lp] .lp-section--clair .lp-mur-item b { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-temoin-qui { color: rgba(8, 27, 58, .72); }
.lp-landing[data-lp] .lp-section--clair .lp-temoin-qui strong { color: var(--lp-navy); }
.lp-landing[data-lp] .lp-section--clair .lp-quote-2 { border-top-color: rgba(138, 109, 47, .34); }

/* --- boutons et prerequis sur fond clair ----------------------------- */
.lp-landing[data-lp] .lp-section--clair .lp-btn--ghost {
  color: var(--lp-navy);
  border-color: rgba(8, 27, 58, .32);
}
.lp-landing[data-lp] .lp-section--clair .lp-btn--ghost:hover { border-color: rgba(8, 27, 58, .62); }
.lp-landing[data-lp] .lp-section--clair .lp-prerequis { color: rgba(8, 27, 58, .62); }
.lp-landing[data-lp] .lp-section--clair .lp-prerequis svg,
.lp-landing[data-lp] .lp-section--clair .lp-prerequis a { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-trust,
.lp-landing[data-lp] .lp-section--clair .lp-vip-note,
.lp-landing[data-lp] .lp-section--clair .lp-aimant-note { color: rgba(8, 27, 58, .70); }

/* Le scan garde son halo, mais sur fond clair */
.lp-landing[data-lp] .lp-scania.lp-section--clair {
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(201, 162, 75, .22) 0%, rgba(201, 162, 75, 0) 60%),
    var(--lp-cream);
  border-color: rgba(138, 109, 47, .3);
}

/* --- Surcharges de specificite sur fond clair -------------------------
   Ces trois selecteurs etaient plus specifiques que les regles generiques
   de la section claire : leur texte restait creme sur creme. */
.lp-landing[data-lp] .lp-section--clair .lp-ap-col p:last-child { color: rgba(8, 27, 58, .74); }
.lp-landing[data-lp] .lp-section--clair .lp-ap-titre { color: rgba(8, 27, 58, .70); }
.lp-landing[data-lp] .lp-section--clair .lp-ap-col--apres .lp-ap-titre { color: var(--lp-gold-fonce); }
.lp-landing[data-lp] .lp-section--clair .lp-scania-sous { color: rgba(8, 27, 58, .72); }
.lp-landing[data-lp] .lp-section--clair .lp-video-cap { color: rgba(8, 27, 58, .70); }
.lp-landing[data-lp] .lp-section--clair .lp-flux-etape span { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-etape p { color: rgba(8, 27, 58, .7); }
.lp-landing[data-lp] .lp-section--clair .lp-icone p { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-metier-quoi { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-vip-item span { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-mur-item span { color: rgba(8, 27, 58, .68); }
.lp-landing[data-lp] .lp-section--clair .lp-recit p { color: rgba(8, 27, 58, .72); }
.lp-landing[data-lp] .lp-section--clair .lp-temoin-qui { color: rgba(8, 27, 58, .72); }


/* =====================================================================
   CORRECTIFS D'AFFICHAGE — 25/08/2026
   Ajoutes en fin de fichier : gagnent par ordre de source, a specificite
   egale, sans surenchere de selecteurs.
   ===================================================================== */

/* --- A. Bandeau haut : aucun padding horizontal -----------------------
   `.lp-strip { padding: 14px 0 }` collait le texte aux deux bords : a
   390 px le premier et le dernier caractere etaient rognes. */
.lp-landing .lp-strip { padding-left: 20px; padding-right: 20px; }
@media (max-width: 520px) {
  .lp-landing .lp-strip {
    padding-left: 14px; padding-right: 14px;
    font-size: 10.5px; letter-spacing: .11em; line-height: 1.5;
  }
}

/* --- B. Ligne de prerequis : eclatement en colonnes -------------------
   En `display:flex`, chaque suite de texte separee par le <a> devient un
   item flex distinct : sous 720 px la phrase se casse en 3 colonnes
   etroites. On repasse en flux de texte normal, l'icone redevient inline.
   Aucune modification du HTML, donc aucun impact sur les cles i18n. */
/* 900 px et non 720 : entre 720 et 900, les fragments de texte sont
   comprimes par flex et le dernier passe sur deux lignes dans une colonne
   etroite (mesure a 758 px : 41 px de haut au lieu de 20). */
@media (max-width: 900px) {
  .lp-landing[data-lp] .lp-prerequis { display: block; }
  .lp-landing[data-lp] .lp-prerequis svg {
    display: inline; flex: none;
    width: 14px; height: 14px;
    margin: 0 6px 0 0; vertical-align: -2px;
  }
}

/* --- C. Deux sections sombres qui se suivent --------------------------
   92 px de bas + 92 px de haut, sans changement de fond perceptible :
   184 px de vide. On annule le padding haut de la seconde ; le rythme
   retombe a 92 px, comme entre deux sections de couleurs differentes. */
.lp-landing[data-lp] .lp-section:not(.lp-section--clair):not(.lp-section--cream)
  + .lp-section:not(.lp-section--clair):not(.lp-section--cream) { padding-top: 0; }

/* --- D. Etiquette de vignette ----------------------------------------
   Les quatre premieres vidoes portent leur etiquette incrustee a l'image.
   Celle qui n'en a pas la recoit en superposition, dans le meme esprit :
   pave blanc + pastille rouge. `pointer-events:none` pour ne jamais gener
   les controles video ; masquee pendant la lecture pour ne rien cacher. */
.lp-landing[data-lp] .lp-mur-media { position: relative; display: block; }
.lp-landing[data-lp] .lp-mur-tag {
  /* Ancrage par le HAUT : cale l'etiquette sur celles des quatre autres
     vignettes (mesurees entre 42 % et 44 % du cadre video). Ancrer par le
     bas ferait glisser le bord superieur, la hauteur variant avec les
     clamp() de police. 42 % evite aussi le texte incruste de la video. */
  position: absolute; left: 3%; top: 42%; bottom: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  pointer-events: none; opacity: 1; transition: opacity .18s ease;
}
.lp-landing[data-lp] .lp-mur-item .lp-mur-tag b {
  display: inline-block; margin: 0;
  background: #fff; color: #10131a;
  font-weight: 800; font-size: clamp(11px, 1.12vw, 16px); line-height: 1.06;
  letter-spacing: -.01em; padding: .34em .52em; border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}
.lp-landing[data-lp] .lp-mur-item .lp-mur-tag i {
  display: inline-block;
  background: #d8232a; color: #fff; font-style: normal;
  font-weight: 700; font-size: clamp(8.5px, .8vw, 11.5px); line-height: 1.06;
  padding: .34em .56em; border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}
.lp-landing[data-lp] .lp-mur-item.is-playing .lp-mur-tag { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .lp-landing[data-lp] .lp-mur-tag { transition: none; }
}

/* --- E. Cinquieme vignette orpheline sur deux colonnes ---------------- */
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-mur > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - (clamp(14px, 1.8vw, 22px) / 2));
    justify-self: center;
  }
}

/* --- CORRECTIF C — VOLET MOBILE --------------------------------------
   Sous 640 px, /devenir-prestataire impose en inline
   `.dp-landing > section { padding-top: 64px !important }`. Un !important
   prime sur la specificite : la regle C ci-dessus, pourtant bien plus
   specifique, y perdait. On surcharge donc au seul endroit utile, sans
   toucher a la regle inline qui reste volontaire et propre a cette page. */
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-section:not(.lp-section--clair):not(.lp-section--cream)
    + .lp-section:not(.lp-section--clair):not(.lp-section--cream) { padding-top: 0 !important; }
}

/* --- BANDEAU SOUS LA BARRE DE NAVIGATION -----------------------------
   `.nav-wrap` est en position:fixed, top 0, fond transparent avant
   defilement, et mesure 105 px au desktop / 85 px sous 760 px. Le bandeau,
   lui, vivait dans le flux en y 0->47 : il etait donc integralement
   recouvert, son texte se superposant au logo et au menu.

   On le descend sous la barre. Le hero perd en contrepartie le padding
   `var(--lp-nav-h) + 34px` qui servait a degager cette meme barre : c'est
   desormais le bandeau qui l'occupe, sans quoi la hauteur serait comptee
   deux fois.

   Valeurs en dur et non `var(--lp-nav-h)` : la variable vaut 96 px a toutes
   les largeurs, soit 9 px de trop peu au desktop (le bandeau resterait sous
   la nav) et 11 px de trop sur mobile. */
.lp-landing[data-lp] .lp-strip { margin-top: 110px; }
.lp-landing[data-lp] .lp-strip + .lp-hero { padding-top: 34px; }
@media (max-width: 760px) {
  .lp-landing[data-lp] .lp-strip { margin-top: 92px; }
  .lp-landing[data-lp] .lp-strip + .lp-hero { padding-top: 20px; }
}

/* ---------------------------------------------------------------------
   Le fil d'Ariane des landings heritait d'un gris de theme clair
   (--ink-mute #5a6378) pose sur un hero bleu nuit : 2,84:1, sous le seuil
   de 4,5. Defaut du gabarit, present sur les huit pages.
   Creme a 62 % sur le navy donne 6,15:1.
   --------------------------------------------------------------------- */
.lp-landing[data-lp] .crumb,
.lp-landing[data-lp] .crumb .sep { color: rgba(255, 253, 244, .62); }
.lp-landing[data-lp] .crumb a { color: rgba(255, 253, 244, .78); text-decoration: none; }
.lp-landing[data-lp] .crumb a:hover { color: #fffdf4; text-decoration: underline; }


/* =====================================================================
   LANDINGS — LES MARGES VOULUES REPRENNENT EFFET        28/08/2026
   =====================================================================
   Robin, en regardant /logiciel-traiteur-evenementiel : « l'espace entre
   les textes et les boutons n'est pas assez espacé ». Mesuré à 1920 :

       titre  →  sous-titre .................. 26 px
       sous-titre  →  BOUTONS ................  0 px   ⚠
       BOUTONS  →  ligne de réassurance ......  0 px   ⚠
       réassurance  →  prérequis ............. 14 px

   Les boutons touchent le texte au-dessus ET la ligne en dessous.

   ── La cause n'est pas une valeur oubliée ──────────────────────────
   Les trois marges SONT écrites, et correctes :
       .lp-eyebrow   { margin: 0 0 18px }   (L39)
       .lp-hero-sub  { margin: 0 0 38px }   (L86)
       .lp-trust     { margin-top: 20px }   (L115)

   Mais `.lp-landing p { margin: 0 }` — un reset — pèse **0-1-1** (une
   classe + un élément) contre **0-1-0** pour ces trois-là. Le reset est
   donc PLUS SPÉCIFIQUE que les règles qu'il était censé seulement
   précéder, et il les annule toutes les trois. Le `h1`, lui, s'en sort :
   `.lp-hero h1` pèse aussi 0-1-1 et vient après — d'où les 26 px qui
   subsistent, seul vestige du rythme voulu.

   ── La correction ──────────────────────────────────────────────────
   On préfixe par `.lp-landing` : 0-2-0 bat 0-1-1 (les classes comptent
   avant les éléments). Aucune valeur n'est inventée — on rend simplement
   effectif ce que la feuille demandait déjà. Pas de !important : la
   spécificité suffit, et un !important ici masquerait le vrai problème
   pour le prochain qui passe.

   Portée : les 9 pages qui chargent landing-metier.css
   (devenir-prestataire, les 5 logiciel-*, facturation, entreprises,
   collectivites) — le défaut y est identique.
   ===================================================================== */
.lp-landing .lp-eyebrow  { margin-bottom: 18px; }
.lp-landing .lp-hero-sub { margin-bottom: 38px; }
.lp-landing .lp-trust    { margin-top: 20px; }

/* Les boutons sont des objets de 59 px de haut : 20 px sous eux suffisent
   à les détacher de la ligne de réassurance, mais pas à les faire
   respirer par le bas quand le prérequis suit. On donne au groupe sa
   propre marge basse plutôt que d'empiler des marges sur ses voisins. */
.lp-landing .lp-actions { margin-bottom: 4px; }

/* Sur téléphone, la même règle avec des valeurs resserrées : 38 px sous
   un sous-titre y coûtent un tiers d'écran. */
@media (max-width: 700px) {
  .lp-landing .lp-eyebrow  { margin-bottom: 14px; }
  .lp-landing .lp-hero-sub { margin-bottom: 28px; }
  .lp-landing .lp-trust    { margin-top: 16px; }
}


/* ─────────────────────────────────────────────────────────────────────
   FIL D'ARIANE — la dernière cible sous le seuil
   ─────────────────────────────────────────────────────────────────────
   Mesuré à 390 px : « Accueil » fait 14 px de haut. C'est un lien de
   navigation vers la page mère, pas un mot dans une phrase.

   L'élément est en `display: inline`. Sur un inline, un padding vertical
   est PEINT et reçoit les clics, mais n'entre pas dans le calcul de la
   hauteur de ligne : la zone passe à 44 px sans déplacer un seul pixel
   de la mise en page. C'est exactement ce qu'on veut ici — le fil est
   collé sous le bandeau, tout décalage se verrait.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
  .lp-landing .crumb a { padding-block: 15px; }
}


/* ─────────────────────────────────────────────────────────────────────
   CONTRASTE — les deux notes secondaires rejoignent .lp-trust
   ─────────────────────────────────────────────────────────────────────
   Mesuré sur fond navy, transparence composée :
       .lp-vip-note     rgba(243,234,217,.50) ....... 4,04:1  (min 4,5)
       .lp-aimant-note  rgba(243,234,217,.50) ....... 4,43:1  (min 4,5)
       .lp-trust        rgba(243,234,217,.68) ....... conforme

   Les trois ont la MÊME fonction — une note de réassurance sous un appel
   à l'action — et devraient donc avoir la même couleur. Deux d'entre
   elles étaient à .50, la troisième à .68 : on aligne sur celle qui
   passe. Le correctif de contraste et l'unification sont ici le même
   geste. Ratio obtenu : ~6,5:1.
   ───────────────────────────────────────────────────────────────────── */
.lp-landing[data-lp] .lp-vip-note,
.lp-landing[data-lp] .lp-aimant-note { color: rgba(243, 234, 217, .68); }


/* ─────────────────────────────────────────────────────────────────────
   LE BOUTON SOUS LA « CHUTE » DU RÉCIT
   ─────────────────────────────────────────────────────────────────────
   Robin, sur /logiciel-traiteur-evenementiel : « il y a encore des
   éléments trop proches ». Mesuré à 1440 : le bouton « Voir comment on
   règle ça » est à **0 px** du titre doré qui le précède, quand tous les
   autres boutons de la page ont 34 ou 38 px d'air au-dessus. Et il est
   centré (x = 577) dans un bloc `.lp-recit` où tout — la citation à
   filet gauche, le séparateur, le titre — est calé à gauche (x = 285).

   (.lp-punch est le FRERE qui suit .lp-recit, pas son enfant — le
   selecteur ne remonte donc pas dans le recit.)
   Le motif `.lp-punch` suivi de `.lp-actions` existe UNE fois sur chacune
   des 9 landings : c'est la section « problème », toujours construite
   pareil. Une seule règle corrige les neuf.

   Aucune règle de la feuille ne donne de marge haute à `.lp-actions` ;
   les 38 px des autres viennent d'ailleurs. On aligne sur cette valeur
   plutôt que d'en inventer une : même respiration partout.
   ───────────────────────────────────────────────────────────────────── */
.lp-landing .lp-punch + .lp-actions {
  margin-top: 38px;
  /* le récit est calé à gauche : son bouton aussi. La classe --center
     reste sur l'élément pour les autres contextes ; ici elle est battue
     par la spécificité (0-3-0 contre 0-1-0). */
  justify-content: flex-start;
}
@media (max-width: 700px) {
  .lp-landing .lp-punch + .lp-actions { margin-top: 28px; }
}


/* =====================================================================
   DEUX CARTES QUI COLLAIENT AU BORD — exception à la règle du 25/08
   =====================================================================
   La règle « deux sections sombres consécutives ne cumulent pas leur
   padding » (0-8-0) attrapait aussi la carte « Le rendez-vous de
   configuration » (.lp-aimant) et la carte tarifaire qui suit l'offre
   VIP. Mesuré sur devenir-prestataire à 1440 : padding-top 0 sur les
   deux, la carte tarifaire à 9 px de la bordure or du VIP, quand toutes
   les autres sections ont 92 px. Ces deux-là portent une CARTE sur un
   fond différent — la couture n'a pas lieu d'être.
   Même structure de sélecteur + une classe : 0-9-0 bat 0-8-0, sans
   !important au desktop. En mobile la règle d'origine est en !important,
   on suit.
   ===================================================================== */
.lp-landing[data-lp] .lp-section:not(.lp-section--clair):not(.lp-section--cream)
  + .lp-section.lp-aimant:not(.lp-section--clair):not(.lp-section--cream),
.lp-landing[data-lp] .lp-section.lp-vip:not(.lp-section--clair):not(.lp-section--cream)
  + .lp-section:not(.lp-section--clair):not(.lp-section--cream) {
  padding-top: clamp(56px, 7vw, 92px);
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-section:not(.lp-section--clair):not(.lp-section--cream)
    + .lp-section.lp-aimant:not(.lp-section--clair):not(.lp-section--cream),
  .lp-landing[data-lp] .lp-section.lp-vip:not(.lp-section--clair):not(.lp-section--cream)
    + .lp-section:not(.lp-section--clair):not(.lp-section--cream) {
    padding-top: 46px !important;
  }
}


/* La première coche de la carte tarifaire se cassait en deux colonnes :
   le li est un flex (pour la coche ::before), et un <strong> en tête de li
   devient un item flex à part (mesuré : 265 px de large, le reste du
   texte à droite). display:contents le refond dans le flux inline sans
   toucher au flex ni à la coche. */
.lp-landing[data-lp] .lp-checks li > strong { display: contents; }


/* ═══ TITRE + ACCROCHE : le blanc sous l'accroche, pas sous le titre ═══
   Mesuré sur loueur/dj : ~50 px entre h2 et .lp-lead, ~0-18 px entre
   .lp-lead et la vidéo. L'accroche se lisait comme la légende de l'écran.
   0-3-0 bat le reset `.lp-landing p {margin:0}` (0-1-1) sans !important.
   Sans :has() seule la seconde règle joue — déjà mieux qu'aujourd'hui. */
.lp-landing[data-lp] .lp-h2-court:has(+ .lp-lead) { margin-bottom: 18px; }
.lp-landing[data-lp] .lp-h2-court + .lp-lead { margin-bottom: clamp(30px, 4vw, 52px); }


/* Mesuré sur entreprises-1440 : la photo commence ~10 px sous la dernière
   ligne du .lp-lead — aucune marge, seulement l'interlignage, parce que
   `.lp-landing p {margin:0}` a tout remis à zéro et .lp-video n'a pas de
   margin-top. Une respiration entre lire et regarder. */
.lp-landing[data-lp] .lp-lead + .lp-video { margin-top: clamp(28px, 3.5vw, 44px); }


/* ═══ SECTIONS-PREUVE : deux colonnes, sens alterné avec le fond ═══
   Vu sur traiteur-1440 : quatre fois la même silhouette — titre à gauche,
   vidéo centrée à 70 %, bouton centré — seul le fond change. L'œil ne
   distingue plus une section de la suivante. Sur fond navy la vidéo passe
   à droite du texte ; sur fond crème, à gauche. Limité aux 5 landings
   logiciel : entreprises/collectivites ont un <img> sans règle de largeur
   et une seule preuve, hors champ. Rangées 1fr/auto/auto/auto/1fr : le
   texte est centré verticalement face à la vidéo, sans wrapper HTML.
   Sans :has() (Firefox < 121) rien ne change — dégradation propre.
   Injecté et mesuré par le relecteur sur v4 avant pose : vidéo 691 px,
   [data-reveal] intact, rien ne bouge sous 980 px. */
@media (min-width: 981px) {
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto auto 1fr auto;
    column-gap: 56px;
    align-items: start;
  }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > .lp-eyebrow  { grid-column: 1; grid-row: 2; }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > .lp-h2-court { grid-column: 1; grid-row: 3; }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner:not(:has(> .lp-lead)) > .lp-h2-court { margin-bottom: 0; }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > .lp-lead     { grid-column: 1; grid-row: 4; }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > .lp-video {
    grid-column: 2; grid-row: 1 / 6;
    max-width: none; margin-inline: 0;
  }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > .lp-video-cap {
    grid-column: 2; grid-row: 6; max-width: none; margin-inline: 0; text-align: left;
  }
  /* fond crème : vidéo à gauche, texte à droite */
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section--clair:has(> .lp-inner > .lp-video) > .lp-inner { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section--clair:has(> .lp-inner > .lp-video) > .lp-inner > :is(.lp-eyebrow, .lp-h2-court, .lp-lead) { grid-column: 2; }
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section--clair:has(> .lp-inner > .lp-video) > .lp-inner > :is(.lp-video, .lp-video-cap) { grid-column: 1; }
  /* ce qui suit (bloc « déclenche », bouton) reprend toute la largeur */
  .lp-landing:is([data-lp="traiteur"],[data-lp="loueur"],[data-lp="dj"],[data-lp="photographe"],[data-lp="videaste"])
    .lp-section:has(> .lp-inner > .lp-video) > .lp-inner > :is(.lp-declenche, .lp-actions) { grid-column: 1 / -1; }
}


/* ═══ BANDEAU « MODE DÉMO » : rogné par le haut ═══
   Les enregistrements 1280×800 ouvrent sur un bandeau jaune épinglé de
   42 px (mesuré sur les 17 posters et sur des frames extraites des mp4).
   C'est l'élément le plus contrasté de la section, répété 3-4 fois, sous
   un titre « Enregistrement réel ». La légende dit déjà « compte de
   démonstration ». On cadre à 1280×756 (44 px : 42 + 2 de marge contre
   l'arrondi sous-pixel à 70 % de largeur), ancré en bas : le bandeau sort
   du cadre, le reste ne bouge pas. Portée : les <video> seulement —
   collectivites/entreprises portent un <img>, non touché. */
.lp-landing[data-lp] .lp-video video {
  aspect-ratio: 1280 / 756;
  object-fit: cover;
  object-position: 50% 100%;
}


/* La sortie de gouttière des vidéos sur téléphone était à moitié
   appliquée : `margin-left/right: calc(50% − 50vw)` (L720) est battue
   par `margin-inline: auto` (L888, même spécificité, plus bas). Seuls
   border-radius:0 et les bordures retirées survivaient. Mesuré à 390 :
   vidéo 346 px à x=22 au lieu de 390 pleine largeur. */
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-video { margin-inline: calc(50% - 50vw); }
}


/* Le récit d'ouverture remplissait les 830 px du conteneur : 100-105
   caractères par ligne mesurés sur entreprises et collectivites. 60ch en
   Inter 17 px ≈ 610 px ≈ 80 caractères — une colonne de lecture, et le
   filet or à gauche redevient un liseré de citation, pas une barre de
   tableau. La chute reste un titre : 2 lignes de 55 caractères. */
.lp-landing[data-lp] .lp-recit p { max-width: 60ch; }
.lp-landing[data-lp] .lp-recit-chute { max-width: 60ch; }


/* ═══ PREUVES 01/02/03 (entreprises, collectivites) : titre | texte ═══
   Mesuré : un paragraphe de 615 à 741 caractères en 6-7 lignes de ~95
   caractères, calé à gauche sous un titre de 3 lignes, ~600 px vides à
   droite — trois fois de suite. Deux colonnes : le titre à gauche, le
   texte plafonné à 56ch (~75 caractères) et le visuel à droite. Le bouton
   suit la colonne de texte au lieu de rester centré sous du contenu calé
   à gauche. Sous 900 px on retombe sur une colonne. */
.lp-landing[data-lp] .lp-preuve { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
.lp-landing[data-lp] .lp-preuve .lp-eyebrow { grid-column: 1 / -1; }
.lp-landing[data-lp] .lp-preuve .lp-h2-court { grid-column: 1; margin-bottom: 0; }
.lp-landing[data-lp] .lp-preuve .lp-lead { grid-column: 2; max-width: 56ch; }
.lp-landing[data-lp] .lp-preuve .lp-video,
.lp-landing[data-lp] .lp-preuve .lp-video-cap { grid-column: 2; max-width: 100%; margin-inline: 0; text-align: left; }
.lp-landing[data-lp] .lp-preuve .lp-actions { grid-column: 2; justify-content: flex-start; }
@media (max-width: 900px) {
  .lp-landing[data-lp] .lp-preuve { grid-template-columns: 1fr; }
  .lp-landing[data-lp] .lp-preuve > * { grid-column: 1; }
  .lp-landing[data-lp] .lp-preuve .lp-h2-court { margin-bottom: clamp(30px, 4vw, 52px); }
  .lp-landing[data-lp] .lp-preuve .lp-actions { justify-content: center; }
  .lp-landing[data-lp] .lp-preuve .lp-video,
  .lp-landing[data-lp] .lp-preuve .lp-video-cap { max-width: 88%; margin-inline: auto; text-align: center; }
}
@media (max-width: 640px) {
  .lp-landing[data-lp] .lp-preuve .lp-video { max-width: 100%; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
  .lp-landing[data-lp] .lp-preuve .lp-video-cap { max-width: 100%; }
}


/* Les deux dates du hero de /facturation — l'argument central de la
   page — étaient fondues dans un sous-titre de 4 lignes à .72. Seules
   les dates passent en relief, pas les phrases entières. */
.lp-landing .lp-hero-sub strong { color: var(--lp-cream); font-weight: 600; }
.lp-landing .lp-hero-sub sup { font-size: .6em; vertical-align: .5em; line-height: 0; }