/* =====================================================================
   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:     #26A550;   /* vert — boutons principaux, "+"        */
  --lp-blue:      #2BCBF8;   /* bleu — liseré carte "Agri-PV"         */
  --lp-deep:      #0e3b3b;   /* 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:    8px;
  --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) {
  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: 15px 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 {
  background-color: #1f8f45;
  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 : élevées, liseré haut coloré, chevauchent l'image */
body.landing-v2 .heading-fp .row.g-1 { margin-top: -46px; }
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);
}
/* Titre de carte → format "kicker" coloré du design */
body.landing-v2 .heading-fp .card-body h2 {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
body.landing-v2 .heading-fp .card-body .wysiwyg { font-size: 13px; 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: left;
  padding: 0 1.5rem 1.5rem;
  font-size: 13px;
  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: 64px;
  height: 64px;
  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: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0;
}
body.landing-v2 .advList-item p {
  font-size: 13px;
  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: linear-gradient(120deg, var(--lp-teal), var(--lp-green));
}
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: 13px;
  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;
  }
}