/* =====================================================================
   GPSS · Design Landing  —  single-landing.css
   ---------------------------------------------------------------------
   Reproduit le langage visuel du projet Claude Design "Agri-PV Landingpage"
   par-dessus le markup existant des blocs flexibles. Aucun HTML/classe
   n'est modifié : rien ne casse côté ACF/JS (slider avant/après et
   simulateur seulement habillés).

   Actif UNIQUEMENT sur les single "landing" via body.landing-v2
   (ajoutée depuis single-landing.php).

   >>> POUR ADAPTER : tout se règle dans le bloc "body.landing-v2" ci-dessous
       (PALETTE / RAYONS / OMBRES / TYPO). Pas de SCSS, pas de compilation.
   ===================================================================== */

body.landing-v2 {

  /* ---- PALETTE (extraite du projet Claude Design) ---------------- */
  --lp-teal:      #047E7E;   /* teal — titres, accents                */
  --lp-green:     #8BC92E;   /* vert — boutons principaux, "+"        */
  --lp-blue:      #85D4EB;   /* bleu — liseré carte "Agri-PV"         */
  --lp-deep:      #00736e;   /* teal profond — panneau signature      */
  --lp-mint:      #7FE0C4;   /* menthe — kicker sur fond foncé        */

  --lp-ink:       #212529;   /* titres charbon / titres de carte      */
  --lp-body:      #333333;   /* texte courant                         */
  --lp-body-soft: #555555;   /* texte secondaire dans les cartes      */
  --lp-muted:     #6A6A6A;   /* légendes / footer                     */

  --lp-bg:        #ffffff;   /* fond de base                          */
  --lp-bg-alt:    #f7faf9;   /* fond de section alterné               */
  --lp-line:      #e5e5e5;   /* bordure carte plate                   */
  --lp-line-soft: #e2e2e2;   /* filet FAQ                             */
  --lp-tint-teal: #e6f5f5;   /* pastille icône teal                   */
  --lp-tint-green:#e9f7ee;   /* pastille icône verte                  */

  /* ---- RAYONS (plus serrés que le corporate) --------------------- */
  --lp-r-badge:  4px;
  --lp-r-btn:    35px;
  --lp-r-card:   10px;
  --lp-r-media:  14px;
  --lp-r-panel:  16px;
  --lp-pill:     999px;

  /* ---- OMBRES ---------------------------------------------------- */
  --lp-shadow-card:  0 10px 28px rgba(0,0,0,.10);
  --lp-shadow-panel: 0 14px 40px rgba(14,59,59,.18);
  --lp-shadow-green: 0 8px 22px rgba(38,165,80,.35);

  /* ---- RYTHME (surcharge de flex-init.php, sans y toucher) ------- */
  --section-spacing: 72px;
  --section-spacing-compact: 44px;

  --lp-font: 'Quicksand', sans-serif;

  background-color: var(--lp-bg);
  color: var(--lp-body);
}
body.landing-v2 #flex { background-color: var(--lp-bg); }

/* Alternance de fond #fff / #f7faf9 (le hero reste à part).
   Optionnel : supprimez ce bloc pour un fond blanc uniforme. */
body.landing-v2 #flex section:nth-of-type(even):not(.heading):not([class*="bg-"]):not(.cta-wide-section) {
  background-color: var(--lp-bg-alt);
}


/* =====================================================================
   TYPOGRAPHIE
   ===================================================================== */
body.landing-v2 #flex h2,
body.landing-v2 #flex .h2 {
  color: var(--lp-teal);
  font-family: var(--lp-font);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-size: clamp(1.5rem, 1.1rem + 1.3vw, 1.75rem);   /* ~26–28px */
}
body.landing-v2 #flex h3,
body.landing-v2 #flex .h3 {
  color: var(--lp-teal);
  font-weight: 700;
}
body.landing-v2 .wysiwyg,
body.landing-v2 .wysiwyg p { color: var(--lp-body); }
body.landing-v2 .wysiwyg p { font-size: .95rem; line-height: 1.7; }

/* Kicker / eyebrow : le <span> dans les h2 (text-columns, simulator).
   11px, majuscules, tracking, vert — device structurant du design. */
body.landing-v2 #flex h2 span,
body.landing-v2 #flex .h2 span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lp-green);
  opacity: 1;
  margin-bottom: 12px;
}

/* Lien-flèche (.link) → vert, cohérent avec les boutons */
body.landing-v2 .link,
body.landing-v2 .link::after { color: var(--lp-green); }


/* =====================================================================
   BOUTONS  (dans le contenu #flex uniquement — la nav garde ses pills)
   Vert #26A550, radius 8px, poids 700, ombre verte.
   ===================================================================== */
body.landing-v2 #flex .btn {
  border-radius: var(--lp-r-btn);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  padding: 10px 28px;
  transition: transform .25s cubic-bezier(.25,1,.5,1),
              box-shadow .25s cubic-bezier(.25,1,.5,1),
              background-color .25s ease;
}
/* Le CTA principal du hero (.btn-primary est teal sur le site) passe au
   vert du design. */
body.landing-v2 #flex .btn-primary {
  background-color: var(--lp-green);
  box-shadow: var(--lp-shadow-green);
}
body.landing-v2 #flex .btn-primary:hover {
  color: var(--lp-deep); background-color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(38,165,80,.45);
}
body.landing-v2 #flex .btn:hover { transform: translateY(-2px); }


/* =====================================================================
   HERO  (block-hero.php)  →  section.heading.heading-fp
   ===================================================================== */
/* Voile teal profond du design (au lieu du radial gris) */
body.landing-v2 .heading-fp .heading-fp-bg::after {
  background: linear-gradient(180deg, rgba(6,40,40,.55), rgba(6,40,40,.75));
}
/* Design "flat" : on masque la vague blanche décorative */
body.landing-v2 .heading-fp-bg svg { display: none; }

body.landing-v2 .heading-fp h1 {
  color: #fff;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
/* Baseline = kicker menthe, à l'image des sur-lignes du design */
body.landing-v2 .heading-fp-baseline {
  color: var(--lp-mint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
body.landing-v2 .heading-fp-intro {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.88);
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
body.landing-v2 .scroll-down svg { fill: rgba(255,255,255,.85); }

/* Cartes du hero : elles chevauchent le BAS de l'image.
   L'image couvre toute la section SAUF une bande basse (--hero-img-inset) ;
   les cartes, en flux normal, se retrouvent à cheval sur ce bord.
   Ajuste --hero-img-inset pour aligner le bord de l'image sur les titres. */
body.landing-v2 .heading-fp { --hero-img-inset: 130px; padding-bottom: 0 !important; }
body.landing-v2 .heading-fp .heading-fp-bg { height: calc(100% - var(--hero-img-inset)) !important; }
body.landing-v2 .heading-fp .row.g-1,
body.landing-v2 .heading-fp .row.g-lg-2 { margin-top: 40px; padding-bottom: 64px; }
body.landing-v2 .heading-fp .card {
  border-radius: var(--lp-r-card);
  box-shadow: var(--lp-shadow-card);
  border-top: 4px solid var(--lp-teal);
  text-align: left;
  transition: transform .3s cubic-bezier(.25,1,.5,1),
              box-shadow .3s cubic-bezier(.25,1,.5,1);
}
body.landing-v2 .heading-fp .card--green { border-top-color: var(--lp-blue); }
body.landing-v2 .heading-fp .card--agri  { border-top-color: var(--lp-green); }
body.landing-v2 .heading-fp .card--serv  { border-top-color: var(--lp-teal); }
body.landing-v2 .heading-fp .card-linkWrapper:hover .card {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
}
body.landing-v2 .heading-fp .card-body {
	text-align: center;
}
body.landing-v2 #flex .softgreen .card-linkWrapper .card{border-top-color: var(--lp-green); !important;}
body.landing-v2 #flex .deep .card-linkWrapper .card{border-top-color: var(--lp-deep); !important;}
body.landing-v2 #flex .hardgreen .card-linkWrapper .card{background: var(--lp-green); color: #fff;}
body.landing-v2 #flex .softblue .card-linkWrapper .card{border-top-color: var(--lp-blue); !important;}
body.landing-v2 #flex .hardblue .card-linkWrapper .card{background: var(--lp-blue); color: #fff;}
body.landing-v2 #flex .deep .card-linkWrapper .card{background: var(--lp-deep); color: #fff;}
body.landing-v2 #flex .deep .card-linkWrapper .card h2, 
body.landing-v2 #flex .deep .card-linkWrapper .card .wysiwyg, 
body.landing-v2 #flex .deep .card-linkWrapper .card .btn,
body.landing-v2 #flex .hardgreen .card-linkWrapper .card h2, 
body.landing-v2 #flex .hardgreen .card-linkWrapper .card .wysiwyg, 
body.landing-v2 #flex .hardgreen .card-linkWrapper .card .btn,
body.landing-v2 #flex .hardblue .card-linkWrapper .card h2, 
body.landing-v2 #flex .hardblue .card-linkWrapper .card .wysiwyg, 
body.landing-v2 #flex .hardblue .card-linkWrapper .card .btn
{
	color: #fff !important;
}
body.landing-v2 #flex .softgreen .card-linkWrapper .card h2, 
{
	color: var(--lp-green) !important;
	
}
body.landing-v2 #flex .softblue .card-linkWrapper .card h2, 
{
	color: var(--lp-blue) !important;
}
body.landing-v2 #flex .softblue .card-linkWrapper .card .btn{
	background: var(--lp-blue) !important; color: #fff !important;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
body.landing-v2 #flex .softgreen .card-linkWrapper .card .btn{
	background: var(--lp-green) !important; color: #fff !important; 
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
/* Titre de carte → format "kicker" coloré du design */
body.landing-v2 .heading-fp .card-body h2 {
  font-size: 19px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.landing-v2 .heading-fp .card-body .wysiwyg { font-size: 15px; color: var(--lp-body-soft); }
body.landing-v2 .heading-fp .card img { margin-bottom: 1rem; width: 3rem; height: 3rem; }
/* Le "Learn more" du bas → lien texte teal plutôt que barre pleine */
body.landing-v2 .heading-fp .card-button {
  background: transparent !important;
  color: var(--lp-teal) !important;
  text-align: center;
  padding: 0 1.5rem 1.5rem;
  font-size: 15px;
  text-transform: none;
}


/* =====================================================================
   AVANTAGES  (block-advantages.php)  →  ul.advList / .advList-item
   Cartes PLATES bordées (pas d'ombre), icône en pastille teintée.
   ===================================================================== */
body.landing-v2 #flex .advList { row-gap: 1.5rem; }
body.landing-v2 .advList-item {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  box-shadow: none;
  padding: 26px 22px;
  transition: transform .3s cubic-bezier(.25,1,.5,1),
              box-shadow .3s cubic-bezier(.25,1,.5,1);
}
body.landing-v2 .advList-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--lp-shadow-card);
}
body.landing-v2 .advList-item .icon {
  width: 90px;
  height: 90px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--lp-pill);
  /*background: var(--lp-tint-teal);*/
}
body.landing-v2 .advList-item .icon img {
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0;
}
body.landing-v2 .advList-item p {
  font-size: 15px;
  color: var(--lp-body);
  line-height: 1.55;
  margin-bottom: 0;
}


/* =====================================================================
   TEXTE 2 COLONNES  (block-text-columns.php)
   ===================================================================== */
body.landing-v2 .ctn-t { margin-bottom: 1.75rem; }
body.landing-v2 section:has(.ctn-t) .wysiwyg p { line-height: 1.7; color: var(--lp-body); }


/* =====================================================================
   AVANT / APRÈS  (block-before-after.php)  — JS/markup intacts
   ===================================================================== */
body.landing-v2 .before-after {
  border-radius: var(--lp-r-media);
  overflow: hidden;
}
body.landing-v2 .before-after-slider-button {
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
body.landing-v2 .before-after-slider-button i { color: var(--lp-teal); }


/* =====================================================================
   SIMULATEUR / RECHNER  (block-simulator.php)  →  .ctn + .apvSlider
   Design 2a : colonne texte à gauche, "carte calculatrice" à droite
   (fond #f7faf9, radius 14, grand chiffre teal, bouton vert).
   ===================================================================== */
body.landing-v2 section:has(.apvSlider) .ctn { max-width: 34rem; }
body.landing-v2 section:has(.apvSlider) .wysiwyg p { line-height: 1.7; }

/* La carte calculatrice */
body.landing-v2 .apvSlider.card {
  background: var(--lp-bg-alt);
  border: 1px solid rgba(0,0,0,.05);   /* reste visible même sur section #f7faf9 */
  border-radius: var(--lp-r-media);
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
}
body.landing-v2 .apvSlider-title { font-size: 14px; font-weight: 700; color: var(--lp-body); }
body.landing-v2 .apvSlider-ctn   { color: var(--lp-muted); }
/* Le grand résultat en teal, comme le "140 Haushalte" du design */
body.landing-v2 .apvSlider-result,
body.landing-v2 .apvSlider-result-val { color: var(--lp-teal); }
body.landing-v2 .apvSlider-result { font-size: 3rem; }
/* Bouton vert plein, radius 8 */
body.landing-v2 .apvSlider-btn {
  background: var(--lp-green) !important;
  border-radius: var(--lp-r-btn);
  color: #fff;
}


/* =====================================================================
   CTA  (block-call2action.php)  →  .cta
   Panneau radius 16, voile teal, bouton VERT (comme le CTA du design).
   ===================================================================== */
body.landing-v2 .cta {
  border-radius: var(--lp-r-panel);
  box-shadow: var(--lp-shadow-panel);
  padding: 3rem 2.5rem;
}
body.landing-v2 .cta .cta-bg::after {
  background: linear-gradient(120deg, rgba(6,58,58,.72), rgba(6,44,44,.55));
}
/* Repli élégant sans image : dégradé marque */
body.landing-v2 .cta:not(:has(.cta-bg img)) {
  background: var(--lp-deep));
}
body.landing-v2 .cta p { line-height: 1.25; font-weight: 700; }
/* Le bouton du CTA (.btn-white) devient vert plein, radius 8 */
body.landing-v2 .cta .btn,
body.landing-v2 .cta .btn-white {
  background: var(--lp-green);
  color: #fff;
  border-radius: var(--lp-r-btn);
  box-shadow: var(--lp-shadow-green);
}
body.landing-v2 .cta .btn:hover,
body.landing-v2 .cta .btn-white:hover {
  background: #1f8f45;
  transform: translateY(-2px) scale(1);
}


/* =====================================================================
   FAQ  (block-faq.php)  →  .faqList / .faqList-item
   À plat : plus de carte, lignes séparées par un filet, chevron vert.
   ===================================================================== */
body.landing-v2 .faqList {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  padding: 0 !important;
}
body.landing-v2 .faqList-item {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--lp-line-soft);
}
body.landing-v2 .faqList-item > * { padding-left: 0; padding-right: 0; }
body.landing-v2 .faqList-item-head { padding: 16px 0; }
body.landing-v2 .faqList-item-head h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-body);
  opacity: 1;
}
body.landing-v2 .faqList-item.active .faqList-item-head h3 { color: var(--lp-teal); }
body.landing-v2 .faqList-item-head i { color: var(--lp-green); }
body.landing-v2 .faqList-item-body {
  border-top: none;
  padding-top: 0;
  font-size: 15px;
  color: var(--lp-body);
  line-height: 1.7;
}


/* =====================================================================
   PANNEAU SIGNATURE "teal profond" (optionnel)
   Pour reproduire le panneau #0e3b3b du design sur une section précise,
   ajoutez la classe ".lp-deep" au conteneur concerné (si votre éditeur
   permet une classe CSS custom sur le bloc).
   ===================================================================== */
body.landing-v2 .lp-deep {
  background: var(--lp-deep);
  border-radius: var(--lp-r-panel);
  box-shadow: var(--lp-shadow-panel);
  padding: 3.5rem 3rem;
  color: #fff;
}
body.landing-v2 .lp-deep h2,
body.landing-v2 .lp-deep .h2 { color: #fff; }
body.landing-v2 .lp-deep h2 span { color: var(--lp-mint); }
body.landing-v2 .lp-deep .wysiwyg,
body.landing-v2 .lp-deep p { color: rgba(255,255,255,.82); }


/* =====================================================================
   ACCESSIBILITÉ
   ===================================================================== */
body.landing-v2 a:focus-visible,
body.landing-v2 .btn:focus-visible,
body.landing-v2 button:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  body.landing-v2 *,
  body.landing-v2 *::before,
  body.landing-v2 *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* =====================================================================
   ██  AJOUTS GPSS — nouveaux composants & réglages mutualisés
   ---------------------------------------------------------------------
   Tout ce qui suit est ajouté par-dessus les règles ci-dessus.
   Scopé sur body.landing-v2 : n'affecte QUE les single "landing".
   ===================================================================== */

/* ---------------------------------------------------------------------
   1) FOND DE SECTION (helper gpss_flex_section_atts) — Blanc ou #f7faf9
   --------------------------------------------------------------------- */
body.landing-v2 #flex section.bg-white { background-color: #fff; }
body.landing-v2 #flex section.bg-alt   { background-color: var(--lp-bg-alt); }


/* ---------------------------------------------------------------------
   2) HERO — image de fond fiable + 2ᵉ bouton + alignement gauche
   --------------------------------------------------------------------- */
/* L'image du hero remplit vraiment le conteneur (fix "image non visible") */
body.landing-v2 #flex section.heading{ padding: 200px 0 0 !important}
body.landing-v2 .heading-fp-bg { z-index: 0; }
body.landing-v2 .heading-fp-bg picture,
body.landing-v2 .heading-fp-bg > img {
  display: block;
  width: 100%;
  height: 100%;
}
body.landing-v2 .heading-fp-bg picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Groupe de boutons du hero */
body.landing-v2 .heading-fp-actions {
  display: flex;
  flex-direction: column;      /* boutons empilés (l'un sous l'autre) */
  align-items: center;
  gap: .6rem;
}
body.landing-v2 .heading-fp-actions .btn { width: auto; }
/* 2ᵉ bouton : contour blanc translucide */
body.landing-v2 #flex .btn-outline-white {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.75);
  border-radius: var(--lp-r-btn);
  font-weight: 700;
  padding: 10px 28px;
  backdrop-filter: blur(2px);
}
body.landing-v2 #flex .btn-outline-white:hover {
  background: #fff;
  color: var(--lp-deep);
  transform: translateY(-2px);
}

/* Variante alignée à gauche (h_align = left) */
body.landing-v2 .heading-fp--left .heading-fp-txt {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
body.landing-v2 .heading-fp--left .heading-fp-intro { margin-left: 0; margin-right: 0; }
body.landing-v2 .heading-fp--left .heading-fp-actions { align-items: flex-start; }
body.landing-v2 .heading-fp--left .heading-fp-baseline { margin-left: 0; }

/* Mobile : image de hauteur fixe, cartes simplement dessous (pas de chevauchement) */
@media (max-width: 991px) {
  body.landing-v2 .heading-fp { --hero-img-inset: 0px; }
  body.landing-v2 .heading-fp .heading-fp-bg { height: 58vh !important; }
  body.landing-v2 .heading-fp .row.g-1,
  body.landing-v2 .heading-fp .row.g-lg-2 { margin-top: 24px; padding-bottom: 0; }
}


/* ---------------------------------------------------------------------
   3) TEXTE SIMPLE centré (block-text.php — look "DOPPELTE ERNTE")
   --------------------------------------------------------------------- */
body.landing-v2 .block-text .ctn-t { margin-bottom: 1rem; }
body.landing-v2 .block-text .ctn-t h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2rem); }
body.landing-v2 .block-text .block-text-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--lp-body);
}
body.landing-v2 .block-text.bg-green .block-text-body p,
body.landing-v2 .block-text.bg-deep  .block-text-body p { color: rgba(255,255,255,.85); }


/* ---------------------------------------------------------------------
   4) TEXTE 2 COLONNES — chiffre dans un rond (.col-num)
   --------------------------------------------------------------------- */
body.landing-v2 .col-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 1rem;
  border-radius: var(--lp-pill);
  background: var(--lp-tint-green);
  color: var(--lp-green);
  font-family: var(--lp-font);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}
body.landing-v2 .bg-green .col-num,
body.landing-v2 .bg-deep  .col-num {
  background: rgba(255,255,255,.15);
  color: #fff;
}


/* ---------------------------------------------------------------------
   5) AVANT / APRÈS — pastilles de coin (VORHER / MIT AGRI-PV)
   --------------------------------------------------------------------- */
body.landing-v2 .before-after .ba-label {
  top: 1.1rem;
  padding: 7px 14px;
  border-radius: var(--lp-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}
body.landing-v2 .before-after .ba-label--before {
  left: 1.1rem;
  background: rgba(33,37,41,.82);
  color: #fff;
}
body.landing-v2 .before-after .ba-label--after {
  right: 1.1rem;
  background: var(--lp-teal);
  color: #fff;
}


/* ---------------------------------------------------------------------
   6) CTA — variantes BOXED & WIDE + fonds au choix
   --------------------------------------------------------------------- */
/* Ossature commune — TOUJOURS centré */
body.landing-v2 .cta { position: relative; text-align: center; }
body.landing-v2 .cta .cta-inner { position: relative; z-index: 2; max-width: 50rem; margin: 0 auto; }
body.landing-v2 .cta .cta-kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lp-green); margin-bottom: .75rem;
}
body.landing-v2 .cta .cta-title { line-height: 1.2; color: var(--lp-teal); }
body.landing-v2 .cta .cta-text,
body.landing-v2 .cta .cta-text p { color: var(--lp-body); line-height: 1.65; margin-bottom: 0; }
/* boutons côte à côte, centrés */
body.landing-v2 .cta .cta-buttons {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.5rem; margin-top: 1.75rem; flex-direction: row;
}
body.landing-v2 .cta .cta-btn {
  background: var(--lp-green); color: #fff; border-radius: var(--lp-r-btn); width: auto;
  font-weight: 700; padding: 15px 30px; box-shadow: var(--lp-shadow-green);
}
body.landing-v2 .cta .cta-btn:hover { background: #fff; color: var(--lp-deep); transform: translateY(-2px); }
body.landing-v2 .cta .cta-link {
  color: var(--lp-teal); font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
body.landing-v2 .cta .cta-link:hover { color: var(--lp-green); }

/* --- Sur fond FONCÉ (deep / image) : texte en blanc --- */
body.landing-v2 .cta--on-dark .cta-kicker { color: #fff; margin: 0 auto 10px;  }
body.landing-v2 .cta--on-dark .cta-title  { color: #fff !important; }
body.landing-v2 .cta--on-dark .cta-text,
body.landing-v2 .cta--on-dark .cta-text p { color: rgba(255,255,255,.85); }
body.landing-v2 .cta--on-dark .cta-link   { color: #fff; }
body.landing-v2 .cta--on-dark .cta-link:hover { color: var(--lp-mint); }

/* --- Fonds --- */
body.landing-v2 .cta-bg--deep  { background: var(--lp-deep);  }
body.landing-v2 .cta-bg--white { background: #fff; }

/* Voile + mix-blend sympa quand fond IMAGE */
body.landing-v2 .cta-bg--image .cta-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
body.landing-v2 .cta-bg--image .cta-bg img,
body.landing-v2 .cta-bg--image .cta-bg picture { width: 100%; height: 100%; object-fit: cover; }
body.landing-v2 .cta-bg--image .cta.cta--wide { background: transparent; text-align: center; box-shadow: 0 0 0 transparent;}
body.landing-v2 .cta-bg--image .cta.cta--wide .cta-title{margin: 0 auto;}
body.landing-v2 .cta-bg--image .cta-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, var(--lp-deep), var(--lp-teal));
  mix-blend-mode: multiply; opacity: .2;
}
body.landing-v2 .cta-bg--image .cta-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,40,40,.25), rgba(6,40,40,.55));
}

/* --- BOXED : panneau centré arrondi --- */
body.landing-v2 .cta--boxed {
  overflow: hidden; border-radius: var(--lp-r-panel);
  padding: 3.25rem 2.5rem;
}
body.landing-v2 .cta--boxed.cta-bg--white { box-shadow: var(--lp-shadow-panel); border: 1px solid var(--lp-line); }
body.landing-v2 .cta--boxed.cta-bg--deep,
body.landing-v2 .cta--boxed.cta-bg--image { box-shadow: var(--lp-shadow-panel); }

/* --- WIDE : le fond est porté par la SECTION (pas de double fond) --- */
body.landing-v2 .cta-wide-section { position: relative; overflow: hidden; }
body.landing-v2 .cta-wide-section .cta--wide { position: relative; z-index: 2; }
body.landing-v2 .cta--wide .cta-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.1rem); }


/* ---------------------------------------------------------------------
   7) ÉTAPES (block-steps.php) — chiffres dans des ronds + fil conducteur
   --------------------------------------------------------------------- */
body.landing-v2 .block-steps .ctn-t { margin-bottom: 2.25rem; }
body.landing-v2 .stepsList { list-style: none; padding: 0; margin: 0; row-gap: 2rem; counter-reset: none; }
body.landing-v2 .stepsList-item { text-align: center; padding: 0 1.25rem; position: relative; }
body.landing-v2 .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 1rem;
  border-radius: var(--lp-pill);
  background: var(--lp-green); color: #fff;
  font-family: var(--lp-font); font-weight: 700; font-size: 1.4rem;
  box-shadow: var(--lp-shadow-green);
  position: relative; z-index: 2;
}
body.landing-v2 .step-title { font-size: 1.05rem; margin-bottom: .5rem; color: var(--lp-teal); }
body.landing-v2 .step-body p { font-size: .92rem; line-height: 1.6; color: var(--lp-body); margin-bottom: 0; }
/* Fil pointillé entre les ronds (desktop, ≥3 colonnes) */
@media (min-width: 992px) {
  body.landing-v2 .stepsList-item:not(:last-child)::before {
    content: ""; position: absolute; top: 28px; left: 50%; width: 100%;
    border-top: 2px dashed var(--lp-line); z-index: 1;
  }
}
body.landing-v2 .bg-green .step-num,
body.landing-v2 .bg-deep  .step-num { background: #fff; color: var(--lp-deep); box-shadow: none; }
body.landing-v2 .bg-green .step-title,
body.landing-v2 .bg-deep  .step-title { color: #fff; }
body.landing-v2 .bg-green .step-body p,
body.landing-v2 .bg-deep  .step-body p { color: rgba(255,255,255,.82); }


/* ---------------------------------------------------------------------
   8) STATISTIQUES / KPI (block-stats.php)
   --------------------------------------------------------------------- */
body.landing-v2 .statsGrid { row-gap: 2rem; }
body.landing-v2 .stat-value { font-family: var(--lp-font); font-weight: 700; line-height: 1; color: var(--lp-teal); }
body.landing-v2 .stat-n { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.4rem); }
body.landing-v2 .stat-u { font-size: 1.4rem; font-weight: 300; margin-left: .15rem; }
body.landing-v2 .stat-label { margin-top: .5rem; font-size: .9rem; color: var(--lp-muted); }
body.landing-v2 .bg-green .stat-value, body.landing-v2 .bg-green .stat-label,
body.landing-v2 .bg-deep  .stat-value, body.landing-v2 .bg-deep  .stat-label { color: #fff; }


/* ---------------------------------------------------------------------
   9) TEXTE + MÉDIA (block-text-media.php landing)
   --------------------------------------------------------------------- */
body.landing-v2 .block-text-media .text-media-img img,
body.landing-v2 .block-text-media .text-media-img picture {
  width: 100%; height: auto; display: block;
  border-radius: var(--lp-r-media);
  box-shadow: var(--lp-shadow-card);
}
body.landing-v2 .block-text-media .ctn-t { margin-bottom: 1rem; }


/* ---------------------------------------------------------------------
   10) TÉMOIGNAGE (block-testimonial.php)
   --------------------------------------------------------------------- */
body.landing-v2 .testimonial { margin: 0; text-align: center; }
body.landing-v2 .testimonial-quote {
  position: relative;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.5rem);
  line-height: 1.5;
  font-weight: 500;
  color: var(--lp-teal);
  margin: 0 0 1.75rem;
}
body.landing-v2 .testimonial-quote p { margin: 0; }
body.landing-v2 .testimonial-quote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, serif;
  font-size: 3.5rem;
  line-height: .5;
  color: var(--lp-green);
  margin-bottom: 1rem;
}
body.landing-v2 .testimonial-author {
  display: inline-flex; align-items: center; justify-content: center; gap: .85rem;
}
body.landing-v2 .testimonial-photo img,
body.landing-v2 .testimonial-photo picture {
  width: 52px; height: 52px; border-radius: var(--lp-pill); object-fit: cover; display: block;
}
body.landing-v2 .testimonial-meta { text-align: left; display: flex; flex-direction: column; }
body.landing-v2 .testimonial-name { font-weight: 700; color: var(--lp-deep); }
body.landing-v2 .testimonial-role { font-size: .875rem; color: var(--lp-muted); }
body.landing-v2 .bg-green .testimonial-quote,
body.landing-v2 .bg-deep  .testimonial-quote { color: #fff; }
body.landing-v2 .bg-green .testimonial-name,
body.landing-v2 .bg-deep  .testimonial-name { color: #fff; }
body.landing-v2 .bg-green .testimonial-role,
body.landing-v2 .bg-deep  .testimonial-role { color: rgba(255,255,255,.75); }


/* ---------------------------------------------------------------------
   11) LOGOS (block-logos.php)
   --------------------------------------------------------------------- */
body.landing-v2 .logos-title {
  text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--lp-muted); margin-bottom: 1.75rem;
}
body.landing-v2 .logosStrip {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 2rem 3rem;
}
body.landing-v2 .logosStrip-item img,
body.landing-v2 .logosStrip-item picture {
  display: block; max-height: 46px; width: auto;
  filter: grayscale(1); opacity: .65;
  transition: filter .2s ease, opacity .2s ease;
}
body.landing-v2 .logosStrip-item a:hover img,
body.landing-v2 .logosStrip-item:hover img { filter: grayscale(0); opacity: 1; }
body.landing-v2 .bg-green .logosStrip-item img,
body.landing-v2 .bg-deep  .logosStrip-item img { filter: grayscale(1) brightness(0) invert(1); opacity: .8; }


/* =====================================================================
   ██  LOT 2 — a11y, largeur, reveal, vidéo, comparatif, frise, cartes, form
   ===================================================================== */

/* ---------------------------------------------------------------------
   A) Accessibilité — focus visible sur boutons/liens custom
   --------------------------------------------------------------------- */
body.landing-v2 #flex .btn:focus-visible,
body.landing-v2 #flex .cta-btn:focus-visible,
body.landing-v2 #flex .btn-outline-white:focus-visible,
body.landing-v2 #flex .cta-link:focus-visible,
body.landing-v2 #flex .cardsGrid-item.is-link:focus-visible,
body.landing-v2 #flex .video-embed:focus-visible,
body.landing-v2 #flex a:focus-visible {
  outline: 3px solid var(--lp-mint);
  outline-offset: 3px;
  border-radius: var(--lp-r-btn);
}
/* Kicker plus clair sur fond vert (contraste AA) */
body.landing-v2 #flex section.bg-green .cta-kicker,
body.landing-v2 #flex section.bg-green h2 span,
body.landing-v2 #flex .cta-bg--green .cta-kicker { color: #eafff3; }

/* ---------------------------------------------------------------------
   B) Largeur de contenu (sec_width : narrow | wide)
   --------------------------------------------------------------------- */
body.landing-v2 #flex section.sec-narrow .container { max-width: 780px; }
body.landing-v2 #flex section.sec-wide .container { max-width: min(1600px, 96vw); }

/* ---------------------------------------------------------------------
   C) Reveal-on-scroll (activé seulement si JS pose .gpss-anim)
   --------------------------------------------------------------------- */
.gpss-anim .gpss-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gpss-anim .gpss-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gpss-anim .gpss-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------------
   D) VIDÉO (block-video.php)
   --------------------------------------------------------------------- */
body.landing-v2 .video-native,
body.landing-v2 .video-embed {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--lp-r-media); overflow: hidden; background: #06110f;
  box-shadow: var(--lp-shadow-card);
}
body.landing-v2 .video-embed { position: relative; cursor: pointer; }
body.landing-v2 .video-embed .video-poster,
body.landing-v2 .video-embed .video-poster img,
body.landing-v2 .video-embed .video-poster picture { position: absolute; inset: 0; width: 100%; height: 100%; }
body.landing-v2 .video-embed .video-poster img { object-fit: cover; }
body.landing-v2 .video-embed::after {
  content: ""; position: absolute; inset: 0; background: rgba(6,44,44,.28); transition: background .2s ease;
}
body.landing-v2 .video-embed:hover::after { background: rgba(6,44,44,.12); }
body.landing-v2 .video-embed .video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 76px; height: 76px; border-radius: var(--lp-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--lp-green); color: #fff; z-index: 2;
  box-shadow: var(--lp-shadow-green); transition: transform .2s ease;
}
body.landing-v2 .video-embed:hover .video-play { transform: translate(-50%,-50%) scale(1.06); }
body.landing-v2 .video-embed.is-playing::after,
body.landing-v2 .video-embed.is-playing .video-play { display: none; }
body.landing-v2 .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------------
   E) TABLEAU COMPARATIF (block-comparison.php)
   --------------------------------------------------------------------- */
body.landing-v2 .cmpTable { width: 100%; border-collapse: separate; border-spacing: 0; }
body.landing-v2 .cmpTable th, body.landing-v2 .cmpTable td {
  padding: 1rem 1.15rem; text-align: center; border-bottom: 1px solid var(--lp-line);
}
body.landing-v2 .cmpTable thead th { font-size: .95rem; color: var(--lp-teal); font-weight: 700; }
body.landing-v2 .cmpTable tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--lp-deep); }
body.landing-v2 .cmpTable .cmp-yes { color: var(--lp-green); font-weight: 700; }
body.landing-v2 .cmpTable .cmp-no  { color: #c0403a; font-weight: 700; }
/* colonne B mise en avant */
body.landing-v2 .cmpTable--hl-b .cmp-colb {
  background: var(--lp-tint-green);
}
body.landing-v2 .cmpTable--hl-b thead .cmp-colb { border-top-left-radius: var(--lp-r-media); border-top-right-radius: var(--lp-r-media); color: var(--lp-green); }
body.landing-v2 .cmpTable--hl-b tbody tr:last-child .cmp-colb { border-bottom-left-radius: var(--lp-r-media); border-bottom-right-radius: var(--lp-r-media); }
/* responsive : cartes empilées */
@media (max-width: 640px) {
  body.landing-v2 .cmpTable, body.landing-v2 .cmpTable tbody, body.landing-v2 .cmpTable tr { display: block; }
  body.landing-v2 .cmpTable thead { display: none; }
  body.landing-v2 .cmpTable tr { border: 1px solid var(--lp-line); border-radius: var(--lp-r-media); margin-bottom: 1rem; padding: .5rem 0; }
  body.landing-v2 .cmpTable td { display: flex; justify-content: space-between; text-align: right; border: 0; }
  body.landing-v2 .cmpTable td::before { content: attr(data-label); font-weight: 600; color: var(--lp-muted); text-align: left; }
  body.landing-v2 .cmpTable tbody th[scope="row"] { border-bottom: 1px solid var(--lp-line); }
}

/* ---------------------------------------------------------------------
   F) FRISE / TIMELINE (block-timeline.php)
   --------------------------------------------------------------------- */
body.landing-v2 .timeline { list-style: none; margin: 0; padding: 0; position: relative; }
body.landing-v2 .timeline::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--lp-line);
}
body.landing-v2 .timeline-item { position: relative; padding: 0 0 1.75rem 2.5rem; }
body.landing-v2 .timeline-item:last-child { padding-bottom: 0; }
body.landing-v2 .timeline-dot {
  position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: var(--lp-pill);
  background: #fff; border: 3px solid var(--lp-green); z-index: 1;
}
body.landing-v2 .timeline-date { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lp-green); }
body.landing-v2 .timeline-title { font-size: 1.1rem; margin: .15rem 0 .35rem; color: var(--lp-teal); }
body.landing-v2 .timeline-body p { margin: 0; color: var(--lp-body); line-height: 1.6; }
body.landing-v2 .bg-green .timeline::before, body.landing-v2 .bg-deep .timeline::before { background: rgba(255,255,255,.25); }
body.landing-v2 .bg-green .timeline-dot, body.landing-v2 .bg-deep .timeline-dot { background: var(--lp-deep); border-color: #fff; }
body.landing-v2 .bg-green .timeline-date, body.landing-v2 .bg-deep .timeline-date { color: var(--lp-mint); }
body.landing-v2 .bg-green .timeline-title, body.landing-v2 .bg-deep .timeline-title { color: #fff; }
body.landing-v2 .bg-green .timeline-body p, body.landing-v2 .bg-deep .timeline-body p { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------------
   G) CARTES (block-cards.php)
   --------------------------------------------------------------------- */
body.landing-v2 .cardsGrid-item {
  height: 100%; display: flex; flex-direction: column; align-items: flex-start;
  border-radius: var(--lp-r-media); box-shadow: var(--lp-shadow-card);
  text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease;
}
body.landing-v2 .cardsGrid-item.is-link:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-panel); }
body.landing-v2 .cardsGrid-ico img, body.landing-v2 .cardsGrid-ico picture { width: 44px; height: 44px; object-fit: contain; margin-bottom: 1rem; }
body.landing-v2 .cardsGrid-title { font-size: 1.1rem; margin-bottom: .5rem; color: var(--lp-teal); }
body.landing-v2 .cardsGrid-body p { color: var(--lp-body); line-height: 1.6; margin: 0; }
body.landing-v2 .cardsGrid-link { margin-top: auto; padding-top: 1rem; color: var(--lp-green); font-weight: 700; }
body.landing-v2 .cardsGrid-link i { margin-left: .35rem; transition: transform .2s ease; }
body.landing-v2 .cardsGrid-item.is-link:hover .cardsGrid-link i { transform: translateX(4px); }

/* ---------------------------------------------------------------------
   H) FORMULAIRE (block-form.php)
   --------------------------------------------------------------------- */
body.landing-v2 .form-visual img, body.landing-v2 .form-visual picture {
  width: 100%; height: auto; display: block; border-radius: var(--lp-r-media); box-shadow: var(--lp-shadow-card);
}
body.landing-v2 .form-embed input[type="text"],
body.landing-v2 .form-embed input[type="email"],
body.landing-v2 .form-embed input[type="tel"],
body.landing-v2 .form-embed textarea,
body.landing-v2 .form-embed select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-btn); background: #fff; margin-bottom: .85rem; font: inherit;
}
body.landing-v2 .form-embed input:focus-visible,
body.landing-v2 .form-embed textarea:focus-visible {
  outline: none; border-color: var(--lp-green); box-shadow: 0 0 0 3px var(--lp-tint-green);
}
body.landing-v2 .form-embed input[type="submit"],
body.landing-v2 .form-embed button[type="submit"] {
  background: var(--lp-green); color: #fff; border: 0; border-radius: var(--lp-r-btn);
  padding: 13px 28px; font-weight: 700; cursor: pointer; box-shadow: var(--lp-shadow-green);
}


/* =====================================================================
   ██  LOT 3 — simplification (text-media centré, nettoyage)
   ===================================================================== */
/* Text-media SANS image : tout le texte est centré (titre, paragraphe, lien) */
body.landing-v2 .block-text-media .tm-centered { text-align: center; }
body.landing-v2 .block-text-media .tm-centered .ctn-t h2,
body.landing-v2 .block-text-media .tm-centered .ctn,
body.landing-v2 .block-text-media .tm-centered .wysiwyg,
body.landing-v2 .block-text-media .tm-centered .wysiwyg p { text-align: center; }
body.landing-v2 .block-text-media .tm-centered .link { display: inline-flex; }