/* =====================================================================
   OVASUN · LP preprod · SYSTEME VISUEL
   ---------------------------------------------------------------------
   Ecrit pour le CHAPITRE VISUEL de STANDARDS_LP_PV.md (section 7), sur
   la meme ossature que la feuille Sunnytech lp-natif, qui est la barre
   de reference interne. Les huit regles y sont tenues explicitement :

   1. HIERARCHIE  titre = 2 a 3 fois le corps, CTA = element le plus
                  contraste, 24px de vide minimum autour.
   2. PHOTO       vraies photos de chantiers Ovasun uniquement, voile
                  bleu 38 a 44 pour cent sous le texte du hero. Aucune
                  photo de banque d'images.
   3. AIR         echelle 8px STRICTE : 8/16/24/32/48/64/96/128.
   4. TYPO        une seule famille, graisses 400 et 700 UNIQUEMENT.
   5. COULEUR     base quasi neutre (blanc + brume bleutee + bleu de
                  charte), UNE couleur d'action : l'or de la charte,
                  reserve aux boutons et aux etats actifs.
   6. MOUVEMENT   opacity + translateY(14px), 520ms, ease-out, une seule
                  fois par element. prefers-reduced-motion neutralise.
   7. PROFONDEUR  ombres douces multicouches, UN SEUL rayon de base.
   8. COHERENCE   memes marges, meme rayon, memes ombres sur les deux
                  offres et sur les pages annexes.

   PALETTE : relevee AU PIXEL sur le logo reel du client
   (assets_site/images/logo-web-transparent.png, echantillonnage du
   06/08/2026) et non choisie a vue :
     #144281  bleu Ovasun   (17 829 pixels opaques)
     #f5cd7a  or Ovasun     ( 1 643 pixels)
     #9fa1a1  gris baseline ( 2 669 pixels)
   #fbbc05 est reserve aux etoiles d'avis Google et n'apparait NULLE
   PART ailleurs dans ce fichier.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONS
   --------------------------------------------------------------------- */
:root{
  /* Couleurs de charte, relevees sur le logo */
  --bleu:#144281;
  --bleu-clair:#1b5399;
  --bleu-profond:#0b2b55;
  --or:#f5cd7a;
  --or-fonce:#d9a63f;
  --or-pale:#fdf4e3;
  --encre:#1d2939;
  --texte:#333f4f;
  --texte-sec:#5b6779;
  --texte-tertiaire:#8590a0;
  --blanc:#ffffff;
  --brume:#f5f8fc;
  --brume-2:#eaeef5;
  --trait:rgba(20,66,129,.12);
  --trait-fin:rgba(20,66,129,.07);
  --alerte:#b3271b;
  --etoile:#fbbc05;          /* etoiles d'avis Google, et rien d'autre */

  /* Echelle d'espacement, 8px stricte */
  --e1:8px; --e2:16px; --e3:24px; --e4:32px;
  --e5:48px; --e6:64px; --e7:96px; --e8:128px;

  /* Rayon unique */
  --r:18px;
  --r-petit:10px;
  --r-pilule:999px;

  /* Ombres douces multicouches, jamais de bordure grise dure */
  --ombre-1:0 1px 2px rgba(20,66,129,.04), 0 2px 8px -4px rgba(20,66,129,.10);
  --ombre-2:0 1px 2px rgba(20,66,129,.04), 0 8px 24px -10px rgba(20,66,129,.16);
  --ombre-3:0 2px 4px rgba(20,66,129,.05), 0 18px 48px -18px rgba(20,66,129,.24);
  --ombre-4:0 4px 10px rgba(20,66,129,.07), 0 32px 80px -28px rgba(20,66,129,.36);
  --ombre-or:0 2px 4px rgba(150,105,20,.18), 0 14px 30px -12px rgba(150,105,20,.46);

  /* Mouvement */
  --duree:520ms;
  --sortie:cubic-bezier(.22,.72,.24,1);

  /* Grille */
  --lg:1160px;
  --lg-etroit:720px;
}

/* ---------------------------------------------------------------------
   2. REINITIALISATION
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.55;
  color:var(--texte);
  background:var(--blanc);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,figure,dl{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;margin:0}
strong,b{font-weight:700}

/* Focus visible : le bleu de charte sur fond clair, l'or sur fond fonce */
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:4px}
.hero :focus-visible,.ecran :focus-visible,.footer :focus-visible,
.nav :focus-visible,.sect--bleu :focus-visible{outline-color:var(--or)}

.saut-contenu{
  position:absolute;left:var(--e2);top:calc(-1 * var(--e6));z-index:200;
  background:var(--or);color:var(--bleu);font-weight:700;
  padding:var(--e2) var(--e3);border-radius:var(--r-petit);
  transition:top 180ms var(--sortie);
}
.saut-contenu:focus{top:var(--e2)}

/* ---------------------------------------------------------------------
   3. ECHELLE TYPOGRAPHIQUE (fermee : rien d'autre n'est autorise)
   --------------------------------------------------------------------- */
.h1{font-family:"Poppins","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:clamp(38px,8.8vw,66px);line-height:1.06;letter-spacing:-.028em;font-weight:700;margin:0;text-wrap:balance}
.h2{font-family:"Poppins","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:clamp(30px,5.2vw,48px);text-align:center;margin-inline:auto;line-height:1.12;letter-spacing:-.022em;font-weight:700;color:var(--bleu);text-wrap:balance}
.h3{font-size:clamp(18px,2.2vw,21px);line-height:1.25;letter-spacing:-.012em;font-weight:700;color:var(--bleu)}
.lede{font-size:clamp(17px,2.3vw,20px);line-height:1.5;font-weight:400;max-width:38ch}
.sous{font-size:clamp(16px,2vw,18px);line-height:1.55;color:var(--texte-sec);max-width:62ch}
.petit{font-size:14px;line-height:1.5;color:var(--texte-sec)}
.mini{font-size:13px;line-height:1.45;color:var(--texte-tertiaire)}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--e1);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--or-fonce);
}
/* AUTOCRITIQUE VISUELLE, ITERATION 1 (defaut 8) : en 390 px, le
   sur-titre « GIRONDE · LANDES · CHARENTE-MARITIME » cassait sur deux
   lignes en laissant « MARITIME » seul, et le filet dore restait
   accroche a la premiere ligne. On resserre l'interlettrage et on
   descend d'un point sous 480 px : le sur-titre tient alors sur une
   ligne. */
@media (max-width:479px){
  .eyebrow{font-size:11px;letter-spacing:.1em}
}
.sect--bleu .eyebrow,.hero .eyebrow,.ecran .eyebrow{color:var(--or)}

.geant{
  font-size:clamp(70px,14vw,132px);line-height:.88;letter-spacing:-.05em;
  font-weight:700;color:var(--bleu);font-variant-numeric:tabular-nums;display:block;
}
.sect--bleu .geant,.ecran .geant{color:var(--or)}

/* ---------------------------------------------------------------------
   4. MOUVEMENT
   --------------------------------------------------------------------- */
.reveal{opacity:1;transform:none}
.reveal.vu{opacity:1;transform:none}
.d1{transition-delay:80ms}
.d2{transition-delay:160ms}
.d3{transition-delay:240ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------------------------------------------------------------------
   5. CONTENEURS ET SECTIONS
   --------------------------------------------------------------------- */
.conteneur{width:100%;max-width:var(--lg);margin-inline:auto;padding-inline:var(--e3)}
@media (min-width:768px){.conteneur{padding-inline:var(--e5)}}

/* AUTOCRITIQUE VISUELLE, ITERATION 1 (defaut 9) : la barre de navigation
   est collante. Sans marge de defilement, un lien d'ancre du pied de
   page amenait le titre de la section SOUS la barre. */
.sect,.ecran,.preuve,section[id],header[id]{scroll-margin-top:80px}

.sect{padding-block:var(--e5);background:var(--blanc)}
@media (min-width:768px){.sect{padding-block:var(--e7)}}
@media (min-width:1100px){.sect{padding-block:var(--e8)}}
.sect--brume{background:var(--brume)}
.sect--bleu{background:var(--bleu);color:rgba(255,255,255,.84)}
.sect--bleu .h2,.sect--bleu .h3{color:#fff}
.sect--bleu .sous{color:rgba(255,255,255,.76)}
.sect--serre{padding-block:var(--e5)}
@media (min-width:768px){.sect--serre{padding-block:var(--e6)}}

.sect__tete{display:flex;flex-direction:column;gap:var(--e2);margin-bottom:var(--e4);align-items:center;text-align:center}
.sect__tete .sous{margin-inline:auto}
@media (min-width:768px){.sect__tete{margin-bottom:var(--e6)}}
.sect__tete--centre{align-items:center;text-align:center}
.sect__tete--centre .sous{margin-inline:auto}

/* ---------------------------------------------------------------------
   6. BOUTONS · le CTA est l'element le plus contraste de la page
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--e1);
  font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.01em;
  padding:var(--e2) var(--e4);min-height:56px;
  border:0;border-radius:var(--r-pilule);cursor:pointer;text-align:center;
}
.btn--action{background:var(--or);color:var(--bleu);box-shadow:var(--ombre-or)}
.btn--action:hover{background:var(--or-fonce);color:var(--bleu-profond)}
.btn--large{width:100%;font-size:18px;min-height:60px}
@media (min-width:640px){.btn--large{width:auto;min-width:340px}}

/* Le vide impose autour du CTA : 24px minimum, regle visuelle n.1 */
.cta-bloc{display:flex;flex-direction:column;gap:var(--e2);margin-block:var(--e4) var(--e3)}
@media (min-width:640px){.cta-bloc{align-items:flex-start}}
.cta-bloc--centre{align-items:center;text-align:center}
.cta-micro{font-size:14px;line-height:1.45;color:var(--texte-sec)}
.sect--bleu .cta-micro,.hero .cta-micro,.ecran .cta-micro{color:rgba(255,255,255,.88)}

/* ---------------------------------------------------------------------
   7. NAVIGATION · barre blanche, le logo Ovasun est un logo bleu
   --------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e2);
  padding:var(--e1) var(--e3);box-shadow:0 1px 0 var(--trait);
}
@media (min-width:768px){.nav{padding:var(--e1) var(--e5)}}
@media (max-width:767px){.nav{display:none}}
.nav__logo img{height:34px;width:auto}
@media (min-width:768px){.nav__logo img{height:42px}}
.nav__tel{
  display:inline-flex;align-items:center;gap:var(--e1);
  color:var(--bleu);font-weight:700;font-size:15px;letter-spacing:-.01em;
  padding:var(--e1) var(--e2);border-radius:var(--r-pilule);
  box-shadow:inset 0 0 0 1.5px var(--trait);white-space:nowrap;
}
.nav__tel:hover{box-shadow:inset 0 0 0 1.5px var(--or);background:var(--or-pale)}
.nav__tel svg{width:16px;height:16px;fill:none;stroke:var(--or-fonce);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:400px){.nav__tel{font-size:14px;padding:var(--e1)}}

/* ---------------------------------------------------------------------
   8. HERO · deux colonnes en desktop, vraie photo de chantier Ovasun
   --------------------------------------------------------------------- */
.hero{position:relative;isolation:isolate;background:var(--bleu-profond);color:#fff;overflow:hidden;
  min-height:clamp(580px,92svh,780px);display:flex;align-items:center;
  padding-block:var(--e4) var(--e5)}
@media (min-width:1024px){.hero{min-height:min(88svh,820px);padding-block:var(--e4) var(--e6)}}
@media (max-width:767px){.hero{padding-block:var(--e3) var(--e4)}}
.hero__media{position:absolute;inset:0;z-index:-2;background:#0d0d0f}
/* Squelette de chargement tant que la video n'est pas prete */
.hero__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,#14161a 0%,#23262c 45%,#14161a 70%);
  background-size:220% 100%;animation:heroSkel 1.4s linear infinite;
  opacity:1;transition:opacity .45s ease;
}
.hero--pret .hero__media::after,.hero--image .hero__media::after{opacity:0}
@keyframes heroSkel{0%{background-position:120% 0}100%{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.hero__media::after{animation:none}}
.hero__video,.hero__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
@media (max-width:767px){.hero__video,.hero__fallback{object-position:58% 45%}}
.hero__video{z-index:1;opacity:0;transition:opacity .5s ease}
.hero--pret .hero__video{opacity:1}
.hero__fallback{z-index:0;opacity:0;transition:opacity .4s ease}
.hero--image .hero__fallback,.hero--pret .hero__fallback{opacity:1}
.hero__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.40) 42%,rgba(0,0,0,.66) 100%),
    linear-gradient(96deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.38) 55%,rgba(0,0,0,.18) 100%);
}
.hero__inner{position:relative;width:100%;max-width:var(--lg);margin-inline:auto;padding-inline:10px}
@media (min-width:768px){.hero__inner{padding-inline:var(--e3)}}
@media (min-width:1024px){.hero__inner{padding-inline:var(--e4)}}
.hero__bloc{display:flex;flex-direction:column;align-items:center;gap:var(--e2);max-width:100%;text-align:center}
@media (min-width:768px){.hero__bloc{gap:var(--e3);max-width:720px;margin-inline:auto}}

.hero__logo{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  background:var(--blanc);box-shadow:0 4px 24px rgba(11,43,85,.35);
  margin-bottom:14px;
}
@media (min-width:768px){
  .hero__logo{width:77px;height:77px;margin-bottom:20px}
}
@media (min-width:1200px){
  .hero__logo{width:86px;height:86px;margin-bottom:22px}
}

.hero .h1{max-width:26ch;text-align:center;font-size:clamp(29px,7.4vw,56px)}
.hero .h1{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .lede{color:rgba(255,255,255,.9)}
.hero .lede strong{color:#fff}

.hero__intro{font-size:clamp(17px,2.6vw,22px);line-height:1.4;font-weight:600;color:#fff;max-width:46ch;text-align:center}

.hero__points{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;width:min(100%,420px);margin-inline:auto}
@media (min-width:768px){.hero__points{align-items:flex-start;gap:14px;width:min(100%,520px)}}
.hero__points li{display:flex;align-items:center;gap:10px;font-size:clamp(16px,2.1vw,19px);line-height:1.25;font-weight:700;color:#fff}
.hero__points svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--or);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

.hero__avis{height:92px;width:auto;border-radius:10px;display:block}
@media (min-width:768px){.hero__avis{height:112px}}

.hero__action{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.hero__cta{width:100%;text-align:center;font-size:17px;font-weight:800}
@media (min-width:520px){.hero__cta{width:auto;padding-inline:var(--e5)}}
.hero__action .cta-micro{font-size:15px;font-weight:600;color:#fff}

.hero__verif{display:flex;flex-wrap:wrap;gap:var(--e1) var(--e3);font-size:14px;line-height:1.4;color:rgba(255,255,255,.76)}
.hero__verif span{display:inline-flex;align-items:center;gap:var(--e1)}
.hero__verif span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--or);flex:none}

/* Section formulaire, juste sous le hero */
.sect--form{scroll-margin-top:72px}
.conteneur--form{width:100%;max-width:660px;margin-inline:auto;padding-inline:var(--e3)}

/* ---------------------------------------------------------------------
   9. CARTE DE FORMULAIRE
   --------------------------------------------------------------------- */
.form-carte{background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre-4);overflow:hidden;color:var(--texte)}
.hero__form .form-carte{box-shadow:var(--ombre-4),0 0 48px 10px rgba(11,43,85,.36)}
.form-carte__tete{
  background:var(--bleu);color:#fff;padding:var(--e2) var(--e3);
  display:flex;align-items:center;gap:var(--e1);font-size:14px;font-weight:700;
}
.form-carte__tete svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--or);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.form-carte__corps{padding:var(--e3)}
@media (min-width:480px){.form-carte__corps{padding:var(--e4)}}
.form-carte__accroche{margin-bottom:var(--e2);font-size:15px;line-height:1.45;color:var(--texte-sec)}

/* ---------------------------------------------------------------------
   10. FORMULAIRE MULTI-ETAPES
        Le balisage est le contrat de js/formulaire.js : ne pas renommer
        les classes .lf-* ni les identifiants lf-*.
   --------------------------------------------------------------------- */
.lf{position:relative}
.lf-progress{display:flex;flex-direction:column;gap:var(--e1);margin-bottom:var(--e2)}
.lf-progress__track{height:6px;border-radius:var(--r-pilule);background:var(--brume-2);overflow:hidden}
.lf-progress__bar{
  height:100%;width:16.6%;border-radius:var(--r-pilule);
  background:linear-gradient(90deg,var(--or-fonce),var(--or));
  transition:width 420ms var(--sortie);
}
.lf-progress__bar.is-bump{animation:lf-bump 420ms var(--sortie)}
@keyframes lf-bump{0%{filter:brightness(1)}40%{filter:brightness(1.18)}100%{filter:brightness(1)}}
.lf-progress__bar.is-complete{background:var(--bleu)}
.lf-progress__label{font-size:13px;font-weight:700;color:var(--texte-sec)}
.lf-progress__label.is-complete{color:var(--bleu)}

.lf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.lf-step{display:none;flex-direction:column;gap:var(--e2)}
.lf-step.is-active{display:flex;animation:lf-entre 380ms var(--sortie)}
.lf-step.is-active.is-back{animation:lf-entre-arriere 380ms var(--sortie)}
@keyframes lf-entre{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes lf-entre-arriere{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lf-step.is-active{animation:none}}

.lf-q{font-size:clamp(26px,7vw,34px);line-height:1.15;letter-spacing:-.022em;font-weight:800;color:var(--bleu);margin:0;text-wrap:balance;text-align:center}
.lf-sub{font-size:15px;line-height:1.45;color:var(--texte-sec);margin:0;text-align:center}

.lf-cards{display:grid;gap:var(--e2)}
.lf-cards--2{grid-template-columns:1fr 1fr}
.lf-cards--4{grid-template-columns:1fr 1fr}

.lf-card{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--e1);
  text-align:center;padding:var(--e2) var(--e1);min-height:116px;
  background:var(--blanc);border:0;border-radius:var(--r);
  box-shadow:inset 0 0 0 1.5px var(--trait),var(--ombre-1);
  font-size:14px;font-weight:700;line-height:1.25;color:var(--bleu);cursor:pointer;
  transition:box-shadow 180ms var(--sortie),transform 180ms var(--sortie),background-color 180ms var(--sortie);
  overflow-wrap:break-word;hyphens:none;
}
.lf-card:hover{box-shadow:inset 0 0 0 1.5px var(--or),var(--ombre-2);transform:translateY(-2px)}
.lf-card.is-selected{background:var(--or-pale);box-shadow:inset 0 0 0 2px var(--or-fonce),var(--ombre-2)}
/* ---------------------------------------------------------------------
   10 bis. EMOJIS 3D ANIMES DES CARTES DE REPONSE
        Standard LUDIQUE des formulaires Wattlift, pose sur le modele de
        la LP Kauff (kauff-offre1/index.html) : une image emoji 3D Fluent
        de 256 px servie en 72 px de source, avec repli sur l'emoji natif
        du systeme si l'image ne charge pas (attribut onerror, qui pose
        la classe .no3d sur le parent).

        Les images sont dans assets/emoji3d/. Neuf viennent des assets
        Kauff, la dixieme (battery.png, pour « Stocker mon surplus ») a
        ete prise a la meme source, le depot Fluent Emoji de Microsoft.

        Les animations sont celles construites le 10/08 pour les icones
        au trait, portees ici sur des balises image :
          - entree en cascade, decalee carte par carte. Le trace au
            stroke-dasharray n'a plus de sens sur une image : il est
            remplace par un fondu + montee + leger grossissement ;
          - survol : la carte monte (regle existante) ET l'emoji monte,
            grossit et s'incline ;
          - selection : un battement unique, joue une seule fois.
        Aucune couleur n'est introduite par ce bloc : les emojis sont des
        images, la charte reste tenue par la carte, l'anneau et la coche.
   --------------------------------------------------------------------- */
.lf-card__emoji{
  display:flex;align-items:center;justify-content:center;
  min-height:52px;line-height:1;
  transition:transform 180ms var(--sortie);
}
.lf-card__emoji img{
  width:52px;height:52px;display:block;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(20,66,129,.20));
}
/* Repli : si le PNG ne charge pas, l'emoji natif du systeme prend la
   place. La carte n'est jamais vide. */
.lf-card__fallback{display:none;font-size:42px;line-height:1}
.lf-card__emoji.no3d img{display:none}
.lf-card__emoji.no3d .lf-card__fallback{display:block}

/* 1. ENTREE EN CASCADE, a chaque activation d'etape.
      Remplace le trace des icones filaires : fondu + montee + echelle. */
.lf-step.is-active .lf-card .lf-card__emoji img,
.lf-step.is-active .lf-card .lf-card__emoji .lf-card__fallback{
  animation:lf-em-entre 520ms var(--sortie) both;
}
@keyframes lf-em-entre{
  from{opacity:0;transform:translateY(9px) scale(.86)}
  to{opacity:1;transform:none}
}
.lf-cards>.lf-card:nth-child(2) .lf-card__emoji img,
.lf-cards>.lf-card:nth-child(2) .lf-card__emoji .lf-card__fallback{animation-delay:70ms}
.lf-cards>.lf-card:nth-child(3) .lf-card__emoji img,
.lf-cards>.lf-card:nth-child(3) .lf-card__emoji .lf-card__fallback{animation-delay:140ms}
.lf-cards>.lf-card:nth-child(4) .lf-card__emoji img,
.lf-cards>.lf-card:nth-child(4) .lf-card__emoji .lf-card__fallback{animation-delay:210ms}

/* 2. SURVOL ET FOCUS CLAVIER : l'emoji monte, grossit et s'incline.
      Le transform d'entree vit sur l'IMG, celui du survol sur le SPAN :
      les deux ne se marchent jamais dessus. */
.lf-card:hover .lf-card__emoji,
.lf-card:focus-visible .lf-card__emoji{transform:translateY(-3px) scale(1.09) rotate(-4deg)}

/* 3. SELECTION : un battement, une seule fois. */
.lf-card.is-selected .lf-card__emoji{animation:lf-em-bat 620ms var(--sortie) 1}
@keyframes lf-em-bat{
  0%{transform:scale(1) rotate(0)}
  38%{transform:scale(1.17) rotate(4deg)}
  100%{transform:scale(1) rotate(0)}
}

/* Au dessus de 1024 px les cartes respirent : l'emoji passe a 56 px.
   En dessous il reste a 44 px, ce qui conserve exactement la hauteur de
   carte qui fait tenir les QUATRE cartes de l'etape 1 au dessus de la
   ligne de flottaison en 390x844. */
@media (min-width:1024px){
  .lf-card__emoji{min-height:64px}
  .lf-card__emoji img{width:64px;height:64px}
  .lf-card__fallback{font-size:52px}
}

/* 4. MOUVEMENT REDUIT : plus aucune animation, plus aucune deformation.
      Les emojis restent affiches, nets et immobiles. */
@media (prefers-reduced-motion:reduce){
  .lf-step.is-active .lf-card .lf-card__emoji img,
  .lf-step.is-active .lf-card .lf-card__emoji .lf-card__fallback,
  .lf-card.is-selected .lf-card__emoji{animation:none}
  .lf-card__emoji img,
  .lf-card__emoji .lf-card__fallback{opacity:1;transform:none}
  .lf-card__emoji,
  .lf-card:hover .lf-card__emoji,
  .lf-card:focus-visible .lf-card__emoji{transform:none;transition:none}
}
.lf-card__check{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:var(--or-fonce);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.6);
  transition:opacity 180ms var(--sortie),transform 180ms var(--sortie);
}
.lf-card__check svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.lf-card.is-selected .lf-card__check{opacity:1;transform:scale(1)}

/* Sous 1024px les cartes sont resserrees d'un cran : c'est ce qui fait
   tenir les QUATRE cartes de l'etape 1 au dessus de la ligne de
   flottaison en 390x844, bord bas de la carte compris. */
@media (max-width:1023px){
  .lf-cards{gap:var(--e1)}
  .lf-card{padding:var(--e1);min-height:104px}
}

.lf-field{display:flex;flex-direction:column;gap:var(--e1)}
.lf-field label{font-size:14px;font-weight:700;color:var(--bleu)}
.lf-input{
  width:100%;min-height:56px;padding:var(--e2);
  font-family:inherit;font-size:16px;font-weight:400;color:var(--texte);
  background:var(--blanc);border:0;border-radius:var(--r-petit);
  box-shadow:inset 0 0 0 1.5px var(--trait);transition:box-shadow 180ms var(--sortie);
}
.lf-input::placeholder{color:var(--texte-tertiaire)}
.lf-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--or-fonce)}
.lf-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--alerte)}
.lf-err{font-size:13px;line-height:1.4;color:var(--alerte);margin:0;font-weight:700}
.lf-err:empty{display:none}
.lf-hint{font-size:13px;line-height:1.45;color:var(--texte-sec);margin:0}
.lf-hint strong{color:var(--bleu)}
.lf-note{font-size:13px;line-height:1.45;margin:0;padding:var(--e2);border-radius:var(--r-petit);background:var(--or-pale);color:var(--bleu)}

.lf-slider-wrap{display:flex;flex-direction:column;gap:var(--e2);align-items:stretch}
.lf-slider-val{text-align:center;font-size:clamp(38px,9vw,50px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--bleu);font-variant-numeric:tabular-nums}
.lf-slider-val small{font-size:16px;font-weight:400;letter-spacing:0;color:var(--texte-sec)}
.lf-range{
  -webkit-appearance:none;appearance:none;width:100%;height:8px;
  border-radius:var(--r-pilule);background:var(--brume-2);cursor:pointer;
  background-image:linear-gradient(90deg,var(--or-fonce),var(--or));
  background-size:var(--pct,36%) 100%;background-repeat:no-repeat;
}
.lf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:var(--blanc);box-shadow:0 0 0 3px var(--or-fonce),var(--ombre-2);cursor:grab}
.lf-range::-moz-range-thumb{width:30px;height:30px;border:0;border-radius:50%;background:var(--blanc);box-shadow:0 0 0 3px var(--or-fonce),var(--ombre-2);cursor:grab}
.lf-slider-ticks{display:flex;justify-content:space-between;font-size:13px;color:var(--texte-tertiaire)}

.lf-cta{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;
  padding:var(--e2) var(--e3);font-family:inherit;font-size:17px;font-weight:700;letter-spacing:-.01em;
  color:var(--bleu);background:var(--or);border:0;border-radius:var(--r-pilule);cursor:pointer;
  box-shadow:var(--ombre-or);margin-top:var(--e1);
}
.lf-cta:hover:not(:disabled){background:var(--or-fonce)}
.lf-cta:disabled{opacity:.62;cursor:default;transform:none}

.lf-back{
  align-self:flex-start;display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:var(--e1) 0;
  font-size:14px;font-weight:700;color:var(--texte-sec);cursor:pointer;
  transition:color 180ms var(--sortie);
}
.lf-back:hover{color:var(--bleu)}
.lf-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

.lf-rassure{font-size:13px;line-height:1.45;color:var(--texte-sec);text-align:center;margin:0}
.lf-foot{font-size:12px;line-height:1.45;color:var(--texte-tertiaire);margin:0;padding-top:var(--e2);box-shadow:inset 0 1px 0 var(--trait-fin)}
.lf-foot a{text-decoration:underline;color:var(--texte-sec)}

.lf-confetti{position:fixed;inset:0;pointer-events:none;z-index:150;overflow:hidden}
.lf-confetti span{position:absolute;top:38%;width:9px;height:14px;opacity:0}
.lf-confetti.is-on span{animation:lf-conf 1s var(--sortie) forwards}
@keyframes lf-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){.lf-confetti{display:none}}

/* ---------------------------------------------------------------------
   11. BANDEAU DE PREUVE, immediatement apres le hero
   --------------------------------------------------------------------- */
.preuve{background:var(--brume);padding-block:var(--e3)}
@media (min-width:768px){.preuve{padding-block:var(--e4)}}
.preuve__int{max-width:var(--lg);margin-inline:auto;padding-inline:var(--e3);display:flex;flex-direction:column;gap:var(--e3);align-items:center}
@media (min-width:768px){.preuve__int{padding-inline:var(--e5)}}
@media (min-width:960px){
  .preuve__int{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--e5)}
  .preuve__txt{text-align:left;max-width:44ch}
}
.preuve__bande{flex:none;max-width:560px;width:100%}
.preuve__bande img{width:100%;height:auto}
.preuve__txt{font-size:14px;line-height:1.55;color:var(--texte-sec);text-align:center;max-width:66ch}
.preuve__txt strong{color:var(--bleu)}

/* ---------------------------------------------------------------------
   12. GRILLES DE CONTENU
   --------------------------------------------------------------------- */
.duo{display:grid;gap:var(--e4);align-items:center}
@media (min-width:768px){.duo{gap:var(--e5)}}
@media (min-width:900px){.duo{grid-template-columns:1fr 1fr;gap:var(--e6)}}
.duo--haut{align-items:start}
.pile{display:flex;flex-direction:column;gap:var(--e3)}

.carte{background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2)}
@media (min-width:768px){.carte{padding:var(--e4)}}

.schema{background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-3)}
@media (min-width:768px){.schema{padding:var(--e4)}}
.schema svg{width:100%;height:auto}
.schema-seul{max-width:520px;margin-inline:auto;margin-bottom:var(--e4)}
@media (min-width:900px){.schema-seul{max-width:560px}}

/* ---------------------------------------------------------------------
   13. PACKS (offre 1) ET SOLUTIONS (offre 2)
   --------------------------------------------------------------------- */
.packs{display:grid;gap:var(--e3)}
@media (min-width:768px){.packs{grid-template-columns:repeat(3,1fr);gap:var(--e3);align-items:stretch}}
@media (min-width:1024px){.packs{gap:var(--e4)}}
.pack{
  position:relative;display:flex;flex-direction:column;gap:var(--e2);
  background:var(--blanc);border-radius:var(--r);padding:var(--e3);
  box-shadow:var(--ombre-2);
}
@media (min-width:768px){.pack{padding:var(--e4) var(--e3)}}
@media (min-width:1024px){.pack{padding:var(--e4)}}
.pack--marque{box-shadow:var(--ombre-3),inset 0 0 0 2px var(--or)}
.pack__etiq{
  position:absolute;top:calc(-1 * var(--e2));left:var(--e3);
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px var(--e2);border-radius:var(--r-pilule);
  background:var(--or);color:var(--bleu);box-shadow:var(--ombre-1);
}
.pack__titre{font-size:22px;line-height:1.2;font-weight:700;color:var(--bleu);letter-spacing:-.02em}
.pack__prix{display:flex;flex-direction:column;gap:2px}
.pack__prix b{font-size:clamp(30px,4.6vw,38px);line-height:1;font-weight:700;letter-spacing:-.035em;color:var(--bleu);font-variant-numeric:tabular-nums}
.pack__prix span{font-size:13px;color:var(--texte-tertiaire)}
.pack__liste{display:flex;flex-direction:column;gap:var(--e1);margin-top:var(--e1)}
.pack__liste li{display:flex;align-items:flex-start;gap:var(--e1);font-size:15px;line-height:1.45;color:var(--texte-sec)}
.pack__liste svg{width:17px;height:17px;flex:none;margin-top:3px;fill:none;stroke:var(--or-fonce);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.pack__liste b{color:var(--bleu);font-weight:700}
.pack__option{
  margin-top:auto;padding-top:var(--e2);box-shadow:inset 0 1px 0 var(--trait-fin);
  font-size:14px;line-height:1.5;color:var(--texte-sec);
}
.pack__option b{color:var(--bleu)}
.packs__note{margin-top:var(--e4);font-size:14px;line-height:1.6;color:var(--texte-sec);max-width:76ch}
.packs__note strong{color:var(--bleu)}

/* Bloc « inclus dans tous les packs » */
.inclus{display:grid;gap:var(--e2);margin-top:var(--e4)}
@media (min-width:640px){.inclus{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.inclus{grid-template-columns:repeat(4,1fr);gap:var(--e3)}}
.inclus li{
  display:flex;align-items:flex-start;gap:var(--e2);
  background:var(--blanc);border-radius:var(--r);padding:var(--e2) var(--e3);
  box-shadow:var(--ombre-1);
}
.sect--brume .inclus li{background:var(--blanc)}
.inclus svg{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--or-fonce);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.inclus b{display:block;font-size:15px;color:var(--bleu);line-height:1.3}
.inclus span{font-size:14px;line-height:1.45;color:var(--texte-sec)}

/* ---------------------------------------------------------------------
   14. POURQUOI / BENEFICES
   --------------------------------------------------------------------- */
.pourquoi{display:grid;gap:var(--e3)}
@media (min-width:768px){.pourquoi{grid-template-columns:repeat(3,1fr);gap:var(--e4)}}
.pourquoi li{
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--e2);
  background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2);
  transition:transform 220ms var(--sortie),box-shadow 220ms var(--sortie);
}
@media (min-width:768px){.pourquoi li{padding:var(--e4)}}
.pourquoi li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--or),rgba(245,205,122,.2));
  transform:scaleX(0);transform-origin:left center;transition:transform 280ms var(--sortie);
}
.pourquoi li:hover{transform:translateY(-3px);box-shadow:var(--ombre-3)}
.pourquoi li:hover::before{transform:none}
.pourquoi .ic{
  width:52px;height:52px;border-radius:var(--r-petit);flex:none;
  display:flex;align-items:center;justify-content:center;background:var(--or-pale);
  box-shadow:inset 0 0 0 1.5px rgba(245,205,122,.55);
  transition:background-color 220ms var(--sortie);
}
.pourquoi li:hover .ic{background:var(--or)}
.pourquoi .ic svg{width:26px;height:26px;fill:none;stroke:var(--bleu);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:768px){.pourquoi .ic{width:60px;height:60px}.pourquoi .ic svg{width:30px;height:30px}}
.pourquoi h3{font-size:19px;line-height:1.25;color:var(--bleu)}
.pourquoi h3::after{content:"";display:block;width:34px;height:2px;margin-top:var(--e1);border-radius:var(--r-pilule);background:var(--or)}
.pourquoi p{font-size:16px;line-height:1.5;color:var(--texte-sec)}
@media (max-width:767px){
  .pourquoi{gap:var(--e2)}
  .pourquoi li{flex-direction:row;align-items:flex-start;gap:var(--e2);padding:var(--e2)}
  .pourquoi .ic{width:44px;height:44px}
  .pourquoi .ic svg{width:22px;height:22px}
  .pourquoi__txt{display:flex;flex-direction:column;gap:4px}
}
@media (prefers-reduced-motion:reduce){
  .pourquoi li,.pourquoi li::before{transition:box-shadow 220ms ease-out}
  .pourquoi li:hover{transform:none}
  .pourquoi li::before{transform:none}
}

/* ---------------------------------------------------------------------
   15. PARCOURS EN 4 ETAPES
   --------------------------------------------------------------------- */
.offre-strip{display:grid;gap:var(--e2)}
@media (min-width:640px){.offre-strip{grid-template-columns:1fr 1fr;gap:var(--e3)}}
@media (min-width:1024px){.offre-strip{grid-template-columns:repeat(4,1fr)}}
.offre-strip li{background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2);display:flex;flex-direction:column;gap:var(--e1)}
.offre-strip .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none;background:var(--bleu);color:#fff;font-size:14px;font-weight:700}
.offre-strip h3{font-size:18px;line-height:1.25;color:var(--bleu)}
.offre-strip p{font-size:15px;line-height:1.5;color:var(--texte-sec)}
.offre-strip li.marque{box-shadow:inset 0 0 0 2px var(--or),var(--ombre-2)}
.offre-strip li.marque .num{background:var(--or);color:var(--bleu)}

/* ---------------------------------------------------------------------
   16. REALISATIONS (vraies photos de chantiers Ovasun)
   --------------------------------------------------------------------- */
/* AUTOCRITIQUE VISUELLE, ITERATION 1 (defaut 1) : en quatre colonnes sur
   1440 px, chaque photo tombait a 248 x 155 px. A cette taille une photo
   de chantier n'est plus une preuve, c'est une vignette : on ne
   distingue ni la toiture, ni les panneaux. Deux colonnes, donc, et des
   photos a ~560 px de large. La regle visuelle n.2 demande de la
   photographie GRAND FORMAT. */
.chantiers{display:grid;gap:var(--e3)}
@media (min-width:640px){.chantiers{grid-template-columns:1fr 1fr;gap:var(--e4)}}
.chantier{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-3);background:var(--brume-2)}
.chantier img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}
/* Defaut 3 : sur les photos a ciel clair (Beychac), le blanc de la
   legende passait tout juste. Le degrade demarre plus haut et monte
   plus fort. */
.chantier figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:var(--e6) var(--e3) var(--e3);
  background:linear-gradient(180deg,rgba(11,43,85,0) 0%,rgba(11,43,85,.55) 42%,rgba(11,43,85,.9) 100%);
  color:#fff;font-size:16px;line-height:1.35;font-weight:700;
}
.chantier figcaption span{display:block;font-weight:400;font-size:13px;color:rgba(255,255,255,.82);margin-top:2px}

/* ---------------------------------------------------------------------
   17. AVIS GOOGLE ET CARROUSEL
   --------------------------------------------------------------------- */
.avis-note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e2);margin-bottom:var(--e3)}
.avis-note__chiffre{font-size:34px;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--bleu)}
.avis-note__txt{font-size:15px;line-height:1.45;color:var(--texte-sec)}
.avis-note__txt strong{color:var(--bleu)}
.avis-note .etoiles svg{width:20px;height:19px}

.etoiles{display:inline-flex;gap:3px}
.etoiles svg{width:17px;height:16px;fill:var(--etoile)}

.avis{background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2);display:flex;flex-direction:column;gap:var(--e2)}
.avis__texte{font-size:16px;line-height:1.55;color:var(--texte)}
.avis__auteur{font-size:14px;font-weight:700;color:var(--bleu)}
.avis__source{display:block;font-size:13px;font-weight:400;color:var(--texte-tertiaire)}
a.avis{text-decoration:none;color:inherit;transition:transform 200ms ease-out,box-shadow 200ms ease-out}
a.avis:hover{transform:translateY(-2px);box-shadow:var(--ombre-3)}
a.avis:active{transform:scale(.99)}
.avis__pied{display:flex;align-items:center;gap:var(--e1);margin-top:auto;font-size:13px;font-weight:700;color:var(--texte-tertiaire)}
.avis__pied svg{width:15px;height:15px;flex:none}
@media (prefers-reduced-motion:reduce){
  a.avis{transition:box-shadow 200ms ease-out}
  a.avis:hover,a.avis:active{transform:none}
}

.carrousel{position:relative}
.carrousel__piste{
  display:flex;gap:var(--e3);padding:var(--e1);margin-inline:calc(var(--e1) * -1);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-padding-inline-start:var(--e1);
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
}
.carrousel__piste::-webkit-scrollbar{display:none}
.carrousel__piste:focus-visible{outline:3px solid var(--bleu);outline-offset:2px;border-radius:var(--r)}
.carrousel__piste > .avis{scroll-snap-align:start;flex:0 0 100%;min-width:0}
.carrousel__piste .avis__pied{margin-top:0}
@media (min-width:768px){.carrousel__piste > .avis{flex-basis:calc((100% - var(--e3)) / 2)}}
@media (min-width:1024px){.carrousel__piste > .avis{flex-basis:calc((100% - var(--e3) * 2) / 3)}}
.carrousel__nav{display:none;align-items:center;justify-content:center;gap:var(--e2);margin-top:var(--e3)}
.carrousel.pret .carrousel__nav{display:flex}
.carrousel__fleche{
  flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:var(--blanc);box-shadow:var(--ombre-2);
  transition:transform 200ms var(--sortie),box-shadow 200ms var(--sortie),background-color 200ms var(--sortie);
}
.carrousel__fleche svg{width:20px;height:20px;fill:none;stroke:var(--bleu);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.carrousel__fleche:hover{transform:translateY(-2px);box-shadow:var(--ombre-3);background:var(--or-pale)}
.carrousel__fleche:disabled{opacity:.38;cursor:default;transform:none;box-shadow:var(--ombre-1);background:var(--blanc)}
.carrousel__points{display:flex;align-items:center;gap:var(--e1)}
.carrousel__point{width:9px;height:9px;padding:0;border:0;border-radius:var(--r-pilule);cursor:pointer;background:rgba(20,66,129,.18);transition:width 220ms var(--sortie),background-color 220ms var(--sortie)}
.carrousel__point:hover{background:rgba(20,66,129,.34)}
.carrousel__point[aria-current="true"]{width:26px;background:var(--or-fonce)}
@media (prefers-reduced-motion:reduce){
  .carrousel__piste{scroll-behavior:auto}
  .carrousel__fleche{transition:box-shadow 200ms ease-out,background-color 200ms ease-out}
  .carrousel__fleche:hover{transform:none}
}

/* ---------------------------------------------------------------------
   18. VERIFIABILITE ET CARTE DE ZONE
   --------------------------------------------------------------------- */
/* AUTOCRITIQUE VISUELLE, ITERATION 1 (defaut 4) : ces cartes vivent dans
   la MOITIE gauche d'un .duo. En deux colonnes a l'interieur de cette
   moitie, chaque carte tombait a ~250 px et le texte se hachait en
   colonnes de trois mots (« Immatriculee / au RCS de / Bordeaux sous »).
   Deux colonnes seulement quand le .duo est encore empile et que la
   liste occupe toute la largeur, une seule colonne des que le .duo se
   scinde a 900 px. */
.verif{display:grid;gap:var(--e3)}
@media (min-width:640px) and (max-width:899px){.verif{grid-template-columns:1fr 1fr}}
.verif li{display:flex;gap:var(--e2);align-items:flex-start;background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2)}
.verif .ic{width:44px;height:44px;border-radius:var(--r-petit);flex:none;display:flex;align-items:center;justify-content:center;background:var(--or-pale)}
.verif .ic svg{width:22px;height:22px;fill:none;stroke:var(--bleu);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.verif b{display:block;font-size:16px;color:var(--bleu);line-height:1.3;margin-bottom:2px}
.verif p{font-size:15px;line-height:1.5;color:var(--texte-sec)}
.verif a{color:var(--bleu);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.carte-zone{background:var(--blanc);border-radius:var(--r);padding:var(--e2);box-shadow:var(--ombre-2)}
@media (min-width:768px){.carte-zone{padding:var(--e3)}}
.carte-zone svg{width:100%;height:auto;display:block;max-height:520px}
.carte-mer{fill:#eaf1f9}
.carte-dep{fill:var(--bleu);stroke:#fff;stroke-width:2.4;stroke-linejoin:round}
.carte-dep--2{fill:var(--bleu-clair)}
.carte-num{fill:#fff;font-size:26px;font-weight:700;letter-spacing:.02em}
.carte-nom{fill:rgba(255,255,255,.92);font-size:15px;font-weight:700}
.carte-halo{fill:rgba(245,205,122,.3)}
.carte-siege{fill:var(--or);stroke:#fff;stroke-width:2.6}
.carte-ville{fill:#fff;font-size:15px;font-weight:700}
.carte__legende{font-size:14px;line-height:1.55;color:var(--texte-sec);margin-top:var(--e2)}
.c-anim{opacity:0;transform:translateY(10px);transition:opacity var(--duree) var(--sortie),transform var(--duree) var(--sortie)}
.vu .c-anim{opacity:1;transform:none}
.r1{transition-delay:0ms}.r2{transition-delay:110ms}.r3{transition-delay:200ms}.r4{transition-delay:290ms}
@media (prefers-reduced-motion:reduce){.c-anim{opacity:1;transform:none;transition:none}}

/* ---------------------------------------------------------------------
   19. FAQ
   --------------------------------------------------------------------- */
.faq{display:flex;flex-direction:column;gap:var(--e2);max-width:820px;margin-inline:auto}
.faq details{background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre-1);overflow:hidden;transition:box-shadow 180ms var(--sortie)}
.faq details[open]{box-shadow:var(--ombre-2)}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e2);
  padding:var(--e2) var(--e3);font-size:17px;font-weight:700;line-height:1.35;color:var(--bleu);letter-spacing:-.012em;
}
@media (min-width:768px){.faq summary{padding:var(--e3)}}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:26px;height:26px;margin-top:2px;
  background:var(--or) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23144281' stroke-width='3.4' stroke-linecap='round' d='M12 6.5v11M6.5 12h11'/%3E%3C/svg%3E") center/16px no-repeat;
  border-radius:50%;transition:transform 220ms var(--sortie);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{padding:0 var(--e3) var(--e3);font-size:16px;line-height:1.6;color:var(--texte-sec);max-width:65ch}
.faq details p + p{padding-top:var(--e2)}

/* ---------------------------------------------------------------------
   20. ECRAN PLEIN MEDIA (CTA final)
   --------------------------------------------------------------------- */
.ecran{position:relative;isolation:isolate;overflow:hidden;background:var(--bleu-profond);color:rgba(255,255,255,.84);padding-block:var(--e5)}
@media (min-width:768px){.ecran{padding-block:var(--e7)}}
@media (min-width:1024px){.ecran{padding-block:var(--e8)}}
.ecran__media{position:absolute;inset:0;z-index:-2}
.ecran__media img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.ecran__voile{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,43,85,.74) 0%,rgba(11,43,85,.54) 45%,rgba(11,43,85,.84) 100%),
    linear-gradient(96deg,rgba(11,43,85,.84) 0%,rgba(11,43,85,.76) 38%,rgba(11,43,85,.34) 72%,rgba(11,43,85,.1) 100%);
}
.ecran__inner{position:relative;max-width:var(--lg);margin-inline:auto;padding-inline:var(--e3)}
@media (min-width:768px){.ecran__inner{padding-inline:var(--e5)}}
.ecran .h2{color:#fff}
.ecran .sous{color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------------------
   21. PIED DE PAGE
   --------------------------------------------------------------------- */
.footer{background:var(--bleu);color:rgba(255,255,255,.74);padding-block:var(--e5) var(--e4)}
@media (min-width:768px){.footer{padding-block:var(--e6) var(--e5)}}
.footer__grille{max-width:var(--lg);margin-inline:auto;padding-inline:var(--e3);display:grid;gap:var(--e4)}
@media (min-width:768px){.footer__grille{padding-inline:var(--e5);grid-template-columns:1.5fr 1fr 1fr;gap:var(--e6)}}
.footer__logo img{height:38px;width:auto;margin-bottom:var(--e2)}
.footer p{font-size:15px;line-height:1.7}
.footer h4{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:var(--e2)}
.footer nav a{display:block;font-size:15px;line-height:1.9;color:rgba(255,255,255,.74);transition:color 180ms var(--sortie)}
.footer p a{color:rgba(255,255,255,.92);text-decoration:underline}
.footer nav a:hover,.footer p a:hover{color:#fff}
.footer__legal{
  max-width:var(--lg);margin:var(--e4) auto 0;padding:var(--e3) var(--e3) 0;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
@media (min-width:768px){.footer__legal{padding-inline:var(--e5)}}
.footer__siret{color:rgba(255,255,255,.8);font-weight:700}

/* ---------------------------------------------------------------------
   22. BARRE CTA COLLANTE (mobile)
   --------------------------------------------------------------------- */
.barre{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;gap:var(--e1);align-items:center;
  padding:var(--e1) var(--e2) calc(var(--e1) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 var(--trait),0 -8px 28px -12px rgba(20,66,129,.3);
  transform:translateY(120%);transition:transform 320ms var(--sortie);
}
.barre.on{transform:none}
.barre__plein{
  flex:1;display:flex;align-items:center;justify-content:center;min-height:52px;padding:var(--e1) var(--e2);
  background:var(--or);color:var(--bleu);font-size:16px;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  border-radius:var(--r-pilule);box-shadow:var(--ombre-or);text-align:center;
}
.barre__tel{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bleu)}
.barre__tel svg{width:20px;height:20px;fill:none;stroke:var(--or);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1024px){.barre{display:none}}

/* LE WIDGET DE CHAT NE DOIT JAMAIS BLOQUER CETTE BARRE (11/08/2026).
   Releve au controle Playwright, en 390 px, sur la preview reellement
   deployee. Le widget GoHighLevel ne pose pas seulement sa bulle en bas
   a droite : son conteneur div.lc_text-widget est un rectangle de
   301 par 150 px, position:fixed, pointer-events:auto, z-index
   99999999, transparent, qui va de x=69 a x=370 et de y=674 a y=824. Il
   recouvrait donc la barre entiere. Les deux clics ont ete tentes pour
   de vrai : « Je calcule mes economies » ET le bouton d'appel etaient
   BLOQUES. Ni la geometrie de l'hote <chat-widget>, qui mesure 0 par 0,
   ni un test de chevauchement de boites ne le montrent : il a fallu
   interroger le shadow DOM avec shadowRoot.elementFromPoint.

   Deux mesures, la seconde etant le filet de securite de la premiere :
     1. js/widget-chat.js remonte le widget au dessus de la barre, en
        injectant une regle dans son shadow DOM. Plus aucun recouvrement,
        les deux elements sont visibles et cliquables ;
     2. si un jour GoHighLevel renomme sa classe interne, l'injection ne
        trouvera plus rien et redeviendra sans effet. La barre passe donc
        AU DESSUS du widget. Le CTA principal ne peut plus etre bloque
        par une evolution du widget, quoi qu'il arrive. */
.barre{z-index:100000000}

/* ---------------------------------------------------------------------
   23. PAGES ANNEXES (merci, mentions, confidentialite)
   --------------------------------------------------------------------- */
.texte-legal{max-width:var(--lg-etroit);margin-inline:auto;padding-inline:var(--e3)}
.texte-legal h1{font-size:clamp(28px,5vw,40px);line-height:1.12;letter-spacing:-.024em;font-weight:700;color:var(--bleu);margin-bottom:var(--e4)}
.texte-legal h2{font-size:20px;line-height:1.3;font-weight:700;color:var(--bleu);margin-top:var(--e5);margin-bottom:var(--e2)}
.texte-legal p,.texte-legal li{font-size:16px;line-height:1.65;color:var(--texte-sec);margin-bottom:var(--e2)}
.texte-legal ul{list-style:disc;padding-left:var(--e3)}
.texte-legal a{color:var(--bleu);font-weight:700;text-decoration:underline}

.merci{background:var(--brume);padding-block:var(--e5)}
@media (min-width:768px){.merci{padding-block:var(--e6)}}
.merci__carte{
  max-width:760px;margin-inline:auto;background:var(--blanc);border-radius:var(--r);padding:var(--e4);
  box-shadow:var(--ombre-3);display:flex;flex-direction:column;gap:var(--e3);align-items:center;text-align:center;
}
@media (min-width:768px){.merci__carte{padding:var(--e6)}}
.merci__pastille{width:72px;height:72px;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center;box-shadow:var(--ombre-or)}
.merci__pastille svg{width:36px;height:36px;fill:none;stroke:var(--bleu);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.merci__suite{text-align:left;width:100%}
.merci__etapes{display:flex;flex-direction:column;gap:var(--e2);width:100%;text-align:left;margin-top:var(--e1)}
.merci__etapes li{display:flex;gap:var(--e2);align-items:flex-start}
.merci__etapes .num{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bleu);color:#fff;font-weight:700;font-size:14px}
.merci__etapes b{display:block;color:var(--bleu);font-size:16px}
.merci__etapes p{font-size:15px;line-height:1.5;color:var(--texte-sec)}

/* Calendrier GoHighLevel */
.rdv{max-width:900px;margin-inline:auto;margin-top:var(--e5)}
.rdv__tete{text-align:center;margin-bottom:var(--e3)}
.rdv__cadre{background:var(--blanc);border-radius:var(--r);box-shadow:var(--ombre-3);overflow:hidden;padding:var(--e1)}
.rdv iframe{display:block;width:100%;min-height:980px;border:0;border-radius:var(--r-petit)} /* 12/08 : 760->980 + form_embed.js auto-resize */

/* ---------------------------------------------------------------------
   24. UTILITAIRES
   --------------------------------------------------------------------- */
.centre{text-align:center}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none!important}

/* ---------------------------------------------------------------------
   25. MICRO-ANIMATION « LIFT » SUR TOUS LES CTA
        Ces regles sont volontairement en fin de feuille : a specificite
        egale, la derniere gagne.
   --------------------------------------------------------------------- */
.btn,.lf-cta,.barre__plein,.barre__tel,.nav__tel{
  transition:transform 200ms ease-out,box-shadow 200ms ease-out,
             background-color 200ms ease-out,color 200ms ease-out;
  will-change:transform;
}
.btn:hover,.lf-cta:hover:not(:disabled),.barre__plein:hover,.barre__tel:hover,.nav__tel:hover{transform:translateY(-2px)}
.btn:focus-visible,.lf-cta:focus-visible,.barre__plein:focus-visible,.barre__tel:focus-visible{transform:translateY(-2px)}
.btn--action:hover,.lf-cta:hover:not(:disabled),.barre__plein:hover{
  box-shadow:0 6px 14px rgba(150,105,20,.2),0 18px 38px -14px rgba(150,105,20,.48);
}
.barre__tel:hover{box-shadow:0 6px 14px rgba(20,66,129,.18),0 18px 38px -14px rgba(20,66,129,.48)}
.btn:active,.btn--action:active,.lf-cta:active:not(:disabled),.barre__plein:active,.barre__tel:active,.nav__tel:active{transform:scale(.97)}
.lf-card:active{transform:scale(.97)}
.lf-cta:disabled{transform:none}

@media (prefers-reduced-motion:reduce){
  .btn,.lf-cta,.barre__plein,.barre__tel,.nav__tel,.lf-card{
    transition:background-color 200ms ease-out,color 200ms ease-out,box-shadow 200ms ease-out;
  }
  .btn:hover,.lf-cta:hover:not(:disabled),.barre__plein:hover,.barre__tel:hover,
  .nav__tel:hover,.lf-card:hover,.btn:active,.btn--action:active,
  .lf-cta:active:not(:disabled),.barre__plein:active,.barre__tel:active,
  .nav__tel:active,.lf-card:active{transform:none}
}

/* ---------------------------------------------------------------------
   26. REFONTE DU 10/08/2026 · nouveaux blocs
        --------------------------------------------------------------
        Ajouts de la mission MISSION_LP_OVASUN_REFONTE_10-08 :
          .h1 .mot-cle  le SEUL mot colore de la page, dans le titre du
                        hero et nulle part ailleurs. La couleur est l'or
                        de la charte, #f5cd7a, relevee au pixel sur le
                        logo (1 643 pixels). Ce n'est PAS #fbbc05, qui
                        reste reserve aux etoiles Google.
          .cadeau       le bloc de l'offre (offre 1) et le bloc de
                        methode du devis (offre 2), meme ossature.
          .figure-duo   photo grand format + texte, sert au bloc equipe
                        et au bloc partenaire. Regle visuelle n.2 : de
                        la vraie photographie, jamais de banque d'images.
        Aucune valeur nouvelle : rayons, ombres, espacements et couleurs
        sont pris dans les jetons existants (regle visuelle n.8).
   --------------------------------------------------------------------- */

/* Le mot d'attention du titre du hero. Le poids est deja 700 sur .h1 :
   seule la couleur change, la graisse reste dans les deux autorisees. */
.h1 .mot-cle{color:var(--or-fonce)} /* 12/08 : --or-fonce #d9a63f, charte logo, demande Yacine */

/* --- Bloc « ce que vous recevez » ------------------------------------
   AUTOCRITIQUE VISUELLE, ITERATION 1 (10/08) : les trois items vivaient
   dans une seule grande carte blanche, et celui du milieu portait seul
   un fond dore avec du padding. Resultat, son titre tombait plus bas que
   les deux autres : un ecart de coherence, regle visuelle n.8. Les trois
   items sont donc devenus trois cartes de meme gabarit, comme .pourquoi
   et .inclus le font deja sur la page. Seul l'anneau dore distingue
   celui du milieu.
   -------------------------------------------------------------------- */
.cadeau{display:grid;gap:var(--e3)}
@media (min-width:900px){.cadeau{grid-template-columns:repeat(3,1fr);gap:var(--e3);align-items:stretch}}
@media (min-width:1024px){.cadeau{gap:var(--e4)}}

.cadeau__item{
  display:flex;flex-direction:column;gap:var(--e1);
  background:var(--blanc);border-radius:var(--r);
  padding:var(--e3);box-shadow:var(--ombre-2);
}
@media (min-width:768px){.cadeau__item{padding:var(--e4)}}
.cadeau__item h3{font-size:18px;line-height:1.25;font-weight:700;color:var(--bleu)}
.cadeau__item h3::after{content:"";display:block;width:34px;height:2px;margin-top:var(--e1);border-radius:var(--r-pilule);background:var(--or)}
.cadeau__item p{font-size:16px;line-height:1.5;color:var(--texte-sec)}
.cadeau__item strong{color:var(--bleu)}
.cadeau__item--fort{background:var(--or-pale);box-shadow:var(--ombre-3),inset 0 0 0 2px var(--or)}

.cadeau__note{
  margin-top:var(--e3);font-size:14px;line-height:1.6;color:var(--texte-sec);max-width:76ch;
}
.cadeau__note strong{color:var(--bleu)}

/* --- Photo grand format + texte ------------------------------------ */
/* AUTOCRITIQUE VISUELLE, ITERATION 1 (10/08) : en deux colonnes egales,
   la photo carree de Jefferson Poirot ecrasait sa colonne de texte et
   laissait un grand vide sous le paragraphe. La colonne image est donc
   plafonnee a 440px : les deux blocs retrouvent des hauteurs proches. */
.figure-duo{display:grid;gap:var(--e3);align-items:center}
@media (min-width:768px){.figure-duo{gap:var(--e5)}}
@media (min-width:900px){.figure-duo{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--e6)}}
@media (min-width:900px){.figure-duo--inverse{grid-template-columns:minmax(0,1fr) minmax(0,440px)}}
@media (min-width:900px){.figure-duo--inverse .figure-duo__media{order:2}}

.figure-duo__media{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--ombre-3);background:var(--brume-2)}
.figure-duo__media img{display:block;width:100%;height:auto}
.figure-duo__media figcaption{
  padding:var(--e2) var(--e3);font-size:13px;line-height:1.45;
  color:var(--texte-sec);background:var(--blanc);
}
.sect--brume .figure-duo__media figcaption{background:var(--blanc)}

.figure-duo__txt{display:flex;flex-direction:column;gap:var(--e2)}
.figure-duo__txt p{font-size:16px;line-height:1.55;color:var(--texte-sec);max-width:62ch}
.figure-duo__txt p strong{color:var(--bleu)}

/* La citation est reprise MOT POUR MOT du visuel de la pub active.
   Aucune reecriture, aucun ajout : voir le rapport de mission. */
.citation{
  margin:0;padding:var(--e3);border-radius:var(--r-petit);
  background:var(--blanc);box-shadow:var(--ombre-2),inset 3px 0 0 var(--or);
}
.sect--brume .citation{background:var(--blanc)}
.citation p{font-size:clamp(19px,2.6vw,23px);line-height:1.35;font-weight:700;color:var(--bleu);letter-spacing:-.015em}
.citation footer{margin-top:var(--e1);font-size:14px;line-height:1.45;color:var(--texte-sec)}

.etiq{
  display:inline-flex;align-items:center;gap:var(--e1);align-self:flex-start;
  padding:6px var(--e2);border-radius:var(--r-pilule);
  background:var(--or-pale);color:var(--bleu);
  font-size:13px;font-weight:700;line-height:1.3;
}
.etiq svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--or-fonce);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* --- Liste « ce que vous ne verrez pas chez nous » ------------------ */
.jamais{display:grid;gap:var(--e2);margin-top:var(--e4)}
@media (min-width:768px){.jamais{grid-template-columns:repeat(3,1fr);gap:var(--e3)}}
.jamais li{
  display:flex;align-items:flex-start;gap:var(--e2);
  background:var(--blanc);border-radius:var(--r);padding:var(--e3);box-shadow:var(--ombre-2);
}
.jamais svg{width:22px;height:22px;flex:none;margin-top:2px;fill:none;stroke:var(--bleu);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jamais b{display:block;font-size:15px;line-height:1.3;color:var(--bleu)}
.jamais span{font-size:14px;line-height:1.5;color:var(--texte-sec)}

/* AUTOCRITIQUE VISUELLE, ITERATION 1 (10/08) : sur l'offre 2, la liste
   « ce que vous ne verrez jamais chez nous » suivait immediatement les
   trois cartes de la methode. Les six cartes se lisaient comme une seule
   grille et le message se perdait. Un titre de niveau 3 les separe. */
.jamais__tete{margin-top:var(--e5);margin-bottom:calc(var(--e2) * -1)}

/* ---------------------------------------------------------------------
   27. BANDEAU DE CONSENTEMENT (11/08/2026)
   ---------------------------------------------------------------------
   Regle 5 du chapitre visuel : UNE seule couleur d'action, l'or de la
   charte, ici sur le seul bouton d'acceptation. Le refus est un bouton
   secondaire sur la brume bleutee, lisible et de meme taille de cible,
   jamais un lien minuscule. Regle 3 : echelle 8px stricte. Regle 7 : le
   rayon et les ombres sont ceux du reste de la page, aucune valeur
   nouvelle. Le jaune des etoiles d'avis Google n'apparait pas ici : il
   reste reserve a son seul usage, via le jeton --etoile.

   Le bandeau ne recouvre jamais la barre CTA collante du mobile :
   js/consentement.js remonte celle ci de la hauteur exacte du bandeau
   tant qu'il est affiche.

   COLLISION AVEC LE WIDGET DE CHAT GOHIGHLEVEL, RELEVEE AU CONTROLE
   PLAYWRIGHT DU 11/08 ET CORRIGEE ICI. En 390 px, le widget deploie sa
   bulle d'accroche et son bouton rond en bas a droite, exactement sur le
   bouton « J'accepte ». Playwright n'a pas pu cliquer : « chat-widget
   intercepts pointer events ». Un visiteur reel n'aurait pas pu non plus.
   Deux mesures, pas une :
     1. le bandeau passe au dessus de tout, y compris du widget, qui
        s'octroie un z-index de l'ordre de 2 milliards ;
     2. tant que le bandeau attend une reponse, le widget est retire du
        rendu. display:none sur l'hote <chat-widget> emporte tout son
        shadow DOM, ce qu'un simple z-index ne ferait pas. Il revient
        des que le visiteur a choisi, c'est a dire au clic suivant.
   --------------------------------------------------------------------- */
.consentement{
  position:fixed;left:0;right:0;bottom:0;z-index:2147483000;
  display:flex;flex-direction:column;gap:var(--e2);
  padding:var(--e2) var(--e2) calc(var(--e2) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 -1px 0 var(--trait),0 -8px 28px -12px rgba(20,66,129,.3);
  transform:translateY(120%);transition:transform 320ms var(--sortie);
}
.consentement[hidden]{display:none}
.consentement.on{transform:none}

/* Widget de chat retire du rendu tant que le bandeau attend une reponse.
   La classe est posee sur <body> par js/consentement.js. */
body.consentement-ouvert chat-widget{display:none !important}
.consentement__txt{font-size:13px;line-height:1.5;color:var(--texte-sec);margin:0}
.consentement__txt a{color:var(--bleu);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.consentement__actions{display:flex;gap:var(--e1);align-items:center}
.consentement__btn{
  flex:1;min-height:44px;padding:var(--e1) var(--e2);
  font-family:inherit;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:-.01em;
  border:0;border-radius:var(--r-pilule);cursor:pointer;text-align:center;
  transition:background-color 200ms var(--sortie),color 200ms var(--sortie),box-shadow 200ms var(--sortie);
}
.consentement__btn--ok{background:var(--or);color:var(--bleu);box-shadow:var(--ombre-or)}
.consentement__btn--refus{background:var(--brume-2);color:var(--texte-sec)}
.consentement__btn:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

@media (hover:hover){
  .consentement__btn--ok:hover{background:var(--or-fonce)}
  .consentement__btn--refus:hover{background:var(--brume);color:var(--bleu)}
}

/* A partir de 768px le bandeau devient une carte discrete en bas a
   gauche, largeur bornee, plutot qu'une bande pleine largeur qui
   mangerait le bas de l'ecran. */
@media (min-width:768px){
  .consentement{
    left:var(--e3);right:auto;bottom:var(--e3);
    width:min(420px,calc(100vw - var(--e5)));
    padding:var(--e3);
    border-radius:var(--r);
    box-shadow:var(--ombre-4);
    transform:translateY(calc(100% + var(--e5)));
  }
  .consentement.on{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .consentement{transition:none}
  .consentement__btn{transition:background-color 200ms ease-out,color 200ms ease-out}
}

/* =====================================================================
   CLIMAT ET RESILIENCE · complements
   Marque typographique (aucun logo image), liste de zone (aucune carte
   dessinee), question ouverte et ecran de sortie du formulaire.
   ===================================================================== */
.nav__logo--texte,.footer__logo--texte{display:flex;flex-direction:column;line-height:1.15;text-decoration:none}
.marque{font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--bleu)}
.marque__sous{font-size:.72rem;font-weight:400;opacity:.75;color:var(--bleu)}
@media (min-width:768px){.marque{font-size:1.25rem}.marque__sous{font-size:.78rem}}
.footer__logo--texte{margin-bottom:var(--e2)}
.footer__logo--texte .marque,.footer__logo--texte .marque__sous{color:#fff}

.zone-liste h3{margin:0 0 .6rem;font-size:1.15rem;color:var(--bleu)}
.zone-liste__dep{font-size:1.05rem;line-height:1.8;margin:0 0 var(--e2)}
.zone-liste .carte__legende{margin-top:.9rem}

.lf-textarea{min-height:120px;resize:vertical;font:inherit;line-height:1.5}
.lf-exit .lf-q{color:var(--bleu)}
.lf-exit{text-align:left}

/* =====================================================================
   CLIMAT ET RESILIENCE · refonte editoriale
   ===================================================================== */
.nav__zones{display:none;font-size:.82rem;color:var(--texte-sec);margin-inline:auto}
@media (min-width:1024px){.nav__zones{display:block}}

.hero__intro{font-size:clamp(16px,2vw,18px);line-height:1.55;color:rgba(255,255,255,.9);max-width:46ch}

/* Bande de confiance */
.strip-conf{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--e2)}
.strip-conf li{
  display:inline-flex;align-items:center;gap:var(--e1);
  background:var(--brume);border-radius:999px;padding:10px 18px;
  font-size:15px;font-weight:700;color:var(--bleu);
  box-shadow:inset 0 0 0 1px var(--trait-fin);
}
.strip-conf__ic{font-size:18px;line-height:1}

/* Blocs de texte editoriaux */
.bloc-texte{display:flex;flex-direction:column;gap:var(--e2);font-size:clamp(16px,2vw,18px);line-height:1.6;color:var(--texte)}
.bloc-texte strong{color:var(--bleu)}
.bloc-texte em{color:var(--texte-sec)}
.bloc-texte--large{max-width:70ch}

.carte-decouvre{
  background:var(--blanc);border-radius:var(--rayon,18px);padding:var(--e3);
  box-shadow:var(--ombre-3);
}
.sect .carte-decouvre{background:var(--blanc)}
.carte-decouvre h3{font-size:1.05rem;color:var(--bleu);margin:0 0 var(--e2)}
.fleches{display:flex;flex-direction:column;gap:var(--e2)}
.fleches li{position:relative;padding-left:26px;font-size:15px;line-height:1.5;color:var(--texte)}
.fleches li::before{content:"→";position:absolute;left:0;top:0;color:var(--or-fonce);font-weight:700}

/* Etapes numerotees 01 -> 05 */
.etapes-num{display:grid;gap:var(--e2);counter-reset:etape}
@media (min-width:700px){.etapes-num{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.etapes-num{grid-template-columns:repeat(5,1fr)}.etapes-num--4{grid-template-columns:repeat(4,1fr)}}
.etapes-num li{
  background:var(--blanc);border-radius:16px;padding:var(--e3);
  box-shadow:var(--ombre-2,0 2px 10px rgba(20,66,129,.08));
  border-top:3px solid var(--or);
}
.sect--brume .etapes-num li{background:var(--blanc)}
.etapes-num__n{display:block;font-size:26px;font-weight:700;color:var(--or-fonce);line-height:1;margin-bottom:var(--e1)}
.etapes-num h3{font-size:1rem;color:var(--bleu);margin:0 0 6px}
.etapes-num p{font-size:14px;line-height:1.5;color:var(--texte-sec)}

/* Photos de chantier */
.chantiers{display:grid;gap:var(--e2);margin-top:var(--e4)}
@media (min-width:600px){.chantiers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.chantiers{grid-template-columns:repeat(4,1fr)}}
.chantier{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:var(--ombre-3)}
.chantier img{display:block;width:100%;height:220px;object-fit:cover}
.chantier figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(to top,rgba(11,43,85,.86),rgba(11,43,85,0));
  color:#fff;font-weight:700;font-size:15px;
}
.chantier figcaption span{font-weight:400;opacity:.82}

/* Maquette de rapport */
.rapport{
  max-width:620px;margin-inline:auto;background:var(--blanc);
  border-radius:20px;overflow:hidden;box-shadow:var(--ombre-4,0 18px 50px rgba(11,43,85,.18));
}
.rapport__tete{background:var(--bleu);color:#fff;padding:var(--e3);display:flex;flex-direction:column;gap:4px}
.rapport__marque{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--or)}
.rapport__titre{font-size:1.3rem;font-weight:700}
.rapport__lignes{padding:var(--e2) var(--e3)}
.rapport__lignes li{display:flex;justify-content:space-between;gap:var(--e2);padding:14px 0;border-bottom:1px solid var(--trait-fin);font-size:15px;color:var(--texte-sec)}
.rapport__lignes li:last-child{border-bottom:0}
.rapport__lignes b{color:var(--bleu);font-size:16px;white-space:nowrap}
.rapport__note{padding:0 var(--e3) var(--e3);font-size:13px;line-height:1.5;color:var(--texte-tertiaire)}

@media (min-width:700px){.inclus--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.inclus--4{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   Refonte visuelle : photos, duos texte+image, rapport chiffre
   ============================================================ */
.chantiers--3{grid-template-columns:1fr}
@media (min-width:640px){.chantiers--3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.chantiers--3{grid-template-columns:repeat(3,1fr)}}
.chantiers--3 .chantier img{height:260px}

/* Duo texte + photo */
.duo-photo{display:grid;gap:var(--e4);align-items:center}
@media (min-width:900px){
  .duo-photo{grid-template-columns:1fr 1fr;gap:var(--e5,48px)}
  .duo-photo--inverse .photo-cadre{order:-1}
}
.photo-cadre{margin:0;border-radius:20px;overflow:hidden;box-shadow:var(--ombre-3);background:var(--blanc)}
.photo-cadre img{display:block;width:100%;height:100%;max-height:420px;object-fit:cover}
.photo-cadre figcaption{padding:12px 16px;font-size:14px;color:var(--texte-sec)}
.photo-cadre--carte img{object-fit:contain;background:var(--blanc);max-height:380px}

/* Liste a coches */
.liste-check{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--e3)}
.liste-check li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--texte)}
.liste-check li::before{
  content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;border-radius:50%;
  background:var(--or);box-shadow:inset 0 0 0 4px var(--blanc);
}

/* Etapes illustrees */
.etapes-photo{display:grid;gap:var(--e3)}
@media (min-width:900px){.etapes-photo{grid-template-columns:repeat(3,1fr)}}
.etapes-photo li{background:var(--blanc);border-radius:18px;overflow:hidden;box-shadow:var(--ombre-3);display:flex;flex-direction:column}
.etapes-photo img{display:block;width:100%;height:210px;object-fit:cover}
.etapes-photo li>div{padding:var(--e3)}
.etapes-photo h3{font-size:1.02rem;color:var(--bleu);margin:4px 0 6px;line-height:1.3}
.etapes-photo p{font-size:14.5px;line-height:1.55;color:var(--texte-sec)}

/* Graphe du rapport */
.rapport__graphe{padding:var(--e3) var(--e3) 0}
.rapport__barres{display:flex;align-items:flex-end;gap:6px;height:110px}
.rapport__barres span{
  flex:1;height:var(--h);border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,var(--or),var(--or-fonce));opacity:.9;
}
.rapport__legende{margin-top:10px;font-size:12.5px;color:var(--texte-tertiaire)}

/* Villes du secteur */
.villes{display:flex;flex-direction:column;gap:8px;margin-top:var(--e3)}
.villes li{font-size:15px;color:var(--texte-sec);padding-left:20px;position:relative}
.villes li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--or)}

/* Alignement centre des titres de section + legende masquee en mobile */
.duo-photo .sect__tete{align-items:center;text-align:center}
@media (max-width:767px){
  .photo-cadre--sans-legende-mobile figcaption{display:none}
  .photo-cadre--masque-mobile{display:none}
}