/* =============================================================================
   Expert Audit Énergétique — Landing pages services (Audit / DTG-PPPT / MAR)
   -----------------------------------------------------------------------------
   Layout FLUIDE : remplit n'importe quel écran sans letterbox ni scroll
   (paysage), bascule en pile défilable avec CTA sur mobile/portrait.
   - Largeurs : 2 colonnes en pourcentage  -> remplissent la largeur
   - Hauteurs : la photo et le textarea sont en flex:1 -> remplissent la hauteur
   - Typographie : clamp() -> le texte grandit/rétrécit sans casser la mise en page
   Aucun élément n'est étiré : images en object-fit/cover, boîtes souples.
   ========================================================================== */

/* ----------------------------------------------------------------- Tokens -- */
.svc-lp{
  --navy:  #173955;
  --cream: #FCFAEC;
  --green: #129E53;
  --gold:  #FBBC05;                       /* étoiles d'avis (branding Google) */
  --cream-60: rgba(252, 250, 236, .6);    /* placeholders des champs */
  --gray:  #5E686A;                       /* dates d'avis */
}

/* ------------------------------------------------------------- Typographie -- */
@font-face{font-family:'Thunder';font-weight:200;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-ExtraLightLC.woff2') format('woff2'),url('fonts/Thunder-LightLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:200;font-style:italic;font-display:swap;
  src:url('fonts/Thunder-ExtraLightLCItalic.woff2') format('woff2'),url('fonts/Thunder-LightLCItalic.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:300;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-LightLC.woff2') format('woff2'),url('fonts/Thunder-LightLC.woff') format('woff');}
@font-face{font-family:'Thunder';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-LC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:500;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-MediumLC.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:500;font-style:italic;font-display:swap;
  src:url('fonts/Thunder-MediumLCItalic.woff2') format('woff2');}
@font-face{font-family:'Thunder';font-weight:600;font-style:normal;font-display:swap;
  src:url('fonts/Thunder-SemiBoldLC.woff2') format('woff2');}

/* --------------------------------------------------------------- Base/reset -- */
.svc-lp *, .svc-lp *::before, .svc-lp *::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
.svc-lp{font-family:'Thunder',sans-serif;background:var(--navy);color:var(--cream);}
.svc-lp img, .svc-lp svg{display:block;max-width:100%;}
.svc-lp button{font:inherit;color:inherit;cursor:pointer;}

/* ============================================================================
   SCÈNE — plein écran, sans scroll (paysage)
   ========================================================================== */
.svc-lp .stage{
  /* tailles de police fluides, surchargées par page pour le titre/sous-titre */
  --title: clamp(24px, 3.4vw, 52px);
  --sub:   clamp(12px, 1.55vw, 25px);

  display:flex; flex-direction:column;
  width:100vw; height:100dvh; overflow:hidden;
  background:var(--navy);
}
.svc-lp .stage[data-page="mar"]{ --title: clamp(16px, 2.4vw, 36px); --sub: clamp(10px, 1.35vw, 21px); }

/* ------------------------------------------------------------------ Header -- */
.svc-lp .header{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height:clamp(52px, 7.5vh, 88px);
  background:var(--cream);
}
.svc-lp .header__logo{ height:clamp(34px, 5vh, 50px); width:auto; }

/* -------------------------------------------------------- Corps : 2 colonnes -- */
.svc-lp .main{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-columns:1fr 1fr;
  /* respiration navy haut/bas (gauche reste à fond pour la photo collée au bord) */
  padding:clamp(20px,4vh,54px) 0 clamp(22px,4vh,58px) 0;
}

/* === Colonne gauche : photo PLEIN CADRE derrière 2 blocs navy arrondis =====
   La photo n'a aucun arrondi : sa forme vient des blocs navy (haut + bas) qui
   la recouvrent. Pas de padding sur .left -> la photo va bord à bord.        */
.svc-lp .left{
  display:flex; flex-direction:column; min-height:0; min-width:0;
  /* aucun padding : photo + blocs navy à fond perdu (bord gauche / formulaire) */
}

/* Bloc navy HAUT (titre + sous-titre + bulles) : coins BAS arrondis -> dessinent
   la courbe par-dessus la photo. Va à fond perdu (texte protégé par le padding). */
.svc-lp .hero{
  flex:0 0 auto; position:relative; z-index:2; text-align:center;
  background:var(--navy);
  border-radius:0 0 clamp(28px,3.4vw,54px) clamp(28px,3.4vw,54px);
  padding:clamp(18px,2vw,32px) clamp(20px,2.4vw,46px) clamp(24px,2.8vw,46px);
  margin-bottom:calc(-1 * clamp(24px,3vw,52px));       /* chevauche la photo */
}
.svc-lp .hero__title{
  color:var(--cream);
  font-weight:500;                                  /* Thunder Medium LC */
  font-size:var(--title); line-height:1; padding-top:.1em;
  /* sécurité : le titre ne dépasse jamais 2 lignes (room en haut pour les accents) */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.svc-lp .hero__sub{
  color:var(--cream);
  font-weight:200; font-style:italic;               /* Thunder ExtraLight LC Italic */
  font-size:var(--sub); line-height:1;
  margin-top:clamp(1px, .3vh, 5px);                 /* écart titre/sous-titre réduit */
}
.svc-lp .tags{
  list-style:none; display:flex; flex-wrap:wrap;
  justify-content:flex-start; gap:clamp(10px, 1vw, 18px);   /* écart réduit entre les bulles du haut */
  margin-top:clamp(18px, 3vh, 40px);                 /* plus d'air sous le titre/sous-titre */
}
.svc-lp .tags .tag{ flex:1 1 auto; }   /* les 3 bulles remplissent la largeur, écart minime, padding interne conservé */
.svc-lp .tag{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--navy);
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;   /* typo classique */
  font-weight:700; font-size:clamp(12px, 1.05vw, 18px); line-height:1; white-space:nowrap;
  padding:clamp(7px,.75vw,13px) clamp(18px,1.9vw,36px);
  border-radius:999px;
}
/* bulle du bas : nettement moins large que la rangée du haut -> effet entonnoir */
.svc-lp .tag--wide{ display:flex; width:78%; margin:clamp(9px,.9vw,16px) auto 0; }

/* --- Photo : PLEIN CADRE, aucun arrondi (forme donnée par les blocs navy) -- */
.svc-lp .photo{
  flex:1 1 auto; min-height:clamp(120px, 14vh, 280px);
  position:relative; z-index:1;
  background-position:center 30%; background-size:cover; background-repeat:no-repeat;
}
/* Page audit : cadrage remonté sur l'échelle DPE colorée A→G -> toujours visible, quel que soit l'écran */
.svc-lp .stage[data-page="audit"] .photo{ background-position:66% 58%; }

/* Bloc navy BAS : coins HAUT arrondis -> courbe sur le bas de la photo.
   Contient le CTA (mobile) + les avis + la note Google.                      */
.svc-lp .footer{
  flex:0 0 auto; position:relative; z-index:2;
  background:var(--navy);
  border-radius:clamp(28px,3.4vw,54px) clamp(28px,3.4vw,54px) 0 0;
  margin-top:calc(-1 * clamp(24px,3vw,52px));          /* chevauche la photo */
  padding:clamp(18px,2vw,32px) clamp(20px,2.4vw,46px) clamp(24px,2.8vw,46px);  /* = inset identique au .hero */
}

/* CTA (mobile uniquement) : bouton bordé sur fond navy, pleine largeur ------ */
.svc-lp .cta{
  display:none; align-items:center; justify-content:center; width:100%;
  margin-bottom:clamp(14px,1.8vh,20px);
  background:transparent; color:var(--cream);
  border:2.5px solid var(--cream); border-radius:16px;
  font-weight:500; font-style:italic; font-size:22px; height:56px; text-decoration:none;
  transition:background-color .25s, color .25s, border-color .25s;
}
.svc-lp .cta:hover, .svc-lp .cta:active{ background:var(--green); border-color:var(--green); color:var(--cream); }

/* === Avis Google : carrousel horizontal, SANS barre de défilement visible == */
.svc-lp .reviews{
  display:flex; gap:clamp(10px, 1.1vw, 18px);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;                                /* Firefox : pas de barre */
}
.svc-lp .reviews::-webkit-scrollbar{ display:none; }           /* WebKit : pas de barre */
.svc-lp .review{
  flex:0 0 clamp(168px, 36%, 250px); scroll-snap-align:start;   /* avis plus compacts */
  background:var(--cream); color:var(--navy);
  border-radius:clamp(11px, 1.1vw, 18px);
  padding:clamp(8px, .8vw, 13px);
}
.svc-lp .review__top{ display:flex; align-items:center; gap:clamp(5px,.45vw,8px); }
.svc-lp .review__avatar{
  width:clamp(24px,1.9vw,32px); height:clamp(24px,1.9vw,32px);
  border-radius:50%; object-fit:cover; flex:0 0 auto;
}
.svc-lp .review__who{ display:flex; flex-direction:column; min-width:0; }
.svc-lp .review__name{ font-weight:600; font-size:clamp(11px,.85vw,14px); line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.svc-lp .review__date{ color:var(--gray); font-size:clamp(9px,.66vw,11px); line-height:1.1; }
.svc-lp .review__g{ width:clamp(13px,1.05vw,17px); height:auto; margin-left:auto; flex:0 0 auto; }
.svc-lp .review__stars{ color:var(--gold); font-size:clamp(11px,.9vw,14px); letter-spacing:1px;
  margin:clamp(4px,.45vh,7px) 0; }
.svc-lp .review__text{
  font-weight:400; font-size:clamp(10px,.8vw,13px); line-height:1.25; color:#3a4a57;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
/* Note Google globale */
.svc-lp .rating{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:clamp(16px, 2.4vh, 30px); color:var(--cream);   /* note Google descendue, moins collée aux avis */
  font-weight:500; font-size:clamp(13px, 1.1vw, 18px);
}
.svc-lp .rating img{ width:clamp(16px,1.3vw,22px); height:auto; }
.svc-lp .rating .stars{ color:var(--gold); letter-spacing:1px; }
.svc-lp .rating b{ font-weight:400; }   /* « 116 avis » une graisse plus légère */

/* === Colonne droite : carte formulaire ==================================== */
.svc-lp .right{
  display:flex; align-items:stretch; min-height:0; min-width:0;
  /* le formulaire remplit la hauteur de la colonne ; décalé du bord droit, collé à la photo à gauche */
  padding:0 clamp(20px,2.8vw,56px) 0 0;
}
.svc-lp .form-card{
  flex:1 1 auto; width:100%;
  display:flex; flex-direction:column;
  background:var(--cream); color:var(--navy);
  border-radius:clamp(24px, 3vw, 56px);
  padding:clamp(22px, 2.4vw, 46px);                  /* + de cream autour du formulaire */
}
.svc-lp .form-card__title{
  flex:0 0 auto; text-align:center;
  font-weight:500; font-style:italic;               /* Thunder Medium LC Italic */
  font-size:clamp(22px, 3.1vw, 46px); line-height:1;
  margin-bottom:clamp(10px, 1.5vh, 24px);
}
.svc-lp .form-frame{                                         /* cadre navy : bordure plus fine */
  flex:1 1 auto; min-height:0;
  background:var(--navy);
  border-radius:clamp(18px, 2.2vw, 44px);
  padding:clamp(5px, .6vw, 10px);                    /* bordure navy réduite */
}
.svc-lp .form-inner{                                         /* inset cream (r40 maquette) */
  height:100%;
  background:var(--cream);
  border-radius:clamp(12px, 1.6vw, 34px);
  padding:clamp(14px, 1.4vw, 24px);
}
.svc-lp .form{ height:100%; display:flex; flex-direction:column; gap:clamp(10px, 1.4vh, 18px); }
.svc-lp .form__row{ display:flex; gap:clamp(10px, 1vw, 16px); }
.svc-lp .form__row .field{ flex:1 1 0; min-width:0; }

.svc-lp .field{
  font-family:'Thunder',sans-serif; font-weight:400;
  font-size:clamp(14px, 1.1vw, 19px); line-height:1;
  color:var(--cream); background:var(--navy);
  border:0; border-radius:clamp(10px, 1.3vw, 26px);
  padding:0 clamp(16px, 1.4vw, 30px);
  width:100%; height:clamp(38px, 5.2vh, 56px);
}
.svc-lp .field::placeholder{ color:var(--cream-60); }
.svc-lp .field:focus{ outline:none; }                        /* contour vert retiré (demande client) */
.svc-lp .field--area{
  flex:1 1 auto; height:auto; min-height:clamp(80px, 12vh, 160px);
  padding-top:clamp(12px, 1.2vh, 20px);
  resize:none; overflow:hidden;                        /* aucune interaction sauf la saisie */
}
.svc-lp .send{
  flex:0 0 auto;
  font-family:'Thunder',sans-serif; font-weight:500; font-style:italic;
  font-size:clamp(15px, 1.3vw, 24px); line-height:1;
  color:var(--navy); background:var(--cream);
  border:clamp(2px,.3vw,5px) solid var(--navy);
  border-radius:clamp(12px, 1.3vw, 26px);
  height:clamp(40px, 5.4vh, 58px);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.svc-lp .send:hover, .svc-lp .send:focus-visible{                     /* se remplit en vert, texte cream */
  background:var(--green); border-color:var(--green); color:var(--cream); outline:none;
}

/* ============================================================================
   MOBILE & PORTRAIT — pile défilable, CTA visible sans scroll
   ========================================================================== */
@media (max-width:820px), (orientation:portrait){
  .svc-lp .stage{ height:auto; min-height:100dvh; overflow:visible; }
  .svc-lp .header{ position:sticky; top:0; z-index:10; }
  .svc-lp .main{ display:block; padding:0; }       /* mobile : photo plein cadre, sans respiration latérale */

  /* .left reste plein cadre (aucun padding) -> photo bord à bord gauche/droite */
  .svc-lp .hero{ padding:clamp(18px,5vw,26px) clamp(18px,5vw,28px) clamp(22px,6vw,30px); }
  .svc-lp .hero__title{ font-size:clamp(32px,8.5vw,52px); }
  .svc-lp .hero__sub{ font-size:clamp(20px,5.2vw,30px); }
  .svc-lp .tags{ justify-content:center; margin-top:clamp(16px,3.5vh,28px); }
  .svc-lp .tags .tag{ flex:0 1 auto; }                       /* mobile : bulles en largeur de contenu, retour à la ligne */
  .svc-lp .tag{ font-size:clamp(13px,3.6vw,17px); padding:9px 18px; }
  .svc-lp .tag--wide{ width:100%; }

  .svc-lp .photo{ flex:none; height:clamp(180px,30vh,280px); }   /* bande photo plein cadre */

  .svc-lp .footer{ padding:clamp(16px,4.5vw,24px) clamp(16px,4.5vw,24px) clamp(14px,4vw,20px); }
  .svc-lp .cta{ display:flex; }                              /* CTA bordé, après la photo */
  .svc-lp .review{ flex-basis:clamp(230px,78vw,320px); }
  .svc-lp .rating{ font-size:15px; }

  .svc-lp .right{ padding:clamp(18px,5vw,28px); }
  .svc-lp .form-card{ padding:clamp(20px,6vw,30px); }
  .svc-lp .form-card__title{ font-size:clamp(40px,11vw,60px); }
  .svc-lp .form-frame{ padding:12px; border-radius:26px; }
  .svc-lp .form-inner{ padding:14px; border-radius:18px; }
  .svc-lp .field{ height:54px; font-size:18px; border-radius:14px; }
  .svc-lp .field--area{ height:auto; min-height:120px; }
  .svc-lp .send{ height:58px; font-size:22px; border-radius:16px; }
}

/* ============================================================================
   SUITE SCROLLABLE — sections sous le hero (le hero plein écran reste intact)
   Bloc 1 « Pourquoi » (cream) · Bandeau logos officiels (cream) ·
   Bloc « étapes » (navy) · Bande CTA finale (navy)
   ========================================================================== */
.svc-lp .section{ width:100%; padding:clamp(48px,6vw,104px) clamp(20px,5vw,96px); }
.svc-lp .section__inner{ max-width:1280px; margin:0 auto; }

/* Bouton d'appel à l'action partagé (vert uniquement au survol/focus) */
.svc-lp .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:'Thunder',sans-serif; font-weight:500; font-style:italic;
  font-size:clamp(18px,1.6vw,28px); line-height:1; text-decoration:none;
  padding:clamp(13px,1vw,20px) clamp(28px,2.6vw,52px);
  border-radius:clamp(12px,1.3vw,22px);
  border:clamp(2px,.25vw,4px) solid transparent;
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.svc-lp .btn--navy{ background:var(--navy); color:var(--cream); border-color:var(--navy); }
.svc-lp .btn--cream{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.svc-lp .btn:hover, .svc-lp .btn:focus-visible{
  background:var(--green); border-color:var(--green); color:var(--cream); outline:none;
}

/* --- Bloc « Pourquoi … ? » : fond cream ---------------------------------- */
.svc-lp .why{ background:var(--cream); color:var(--navy); }
.svc-lp .why__title{
  text-align:center; font-weight:500;                 /* Thunder Medium LC */
  font-size:clamp(34px,4.6vw,72px); line-height:1; padding-top:.08em;
}
.svc-lp .why__lead{
  max-width:60ch; margin:clamp(14px,1.6vw,26px) auto 0; text-align:center;
  font-weight:400; font-size:clamp(16px,1.35vw,24px); line-height:1.4; color:#3a4a57;
}
.svc-lp .why__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.6vw,28px);
  margin-top:clamp(34px,3.6vw,60px);
}
.svc-lp .card{
  display:flex; flex-direction:column;
  background:#fff; border:1.5px solid rgba(23,57,85,.12);
  border-radius:clamp(16px,1.6vw,26px);
  padding:clamp(20px,1.8vw,34px);
}
.svc-lp .card__icon{
  width:clamp(40px,3.4vw,56px); height:clamp(40px,3.4vw,56px);
  display:flex; align-items:center; justify-content:center;
  background:var(--navy); border-radius:50%; margin-bottom:clamp(12px,1.2vw,20px);
}
.svc-lp .card__icon svg{ width:55%; height:55%; stroke:var(--cream); fill:none; }
.svc-lp .card__title{
  font-weight:600; font-size:clamp(19px,1.5vw,26px); line-height:1.05;
  margin-bottom:clamp(7px,.7vw,12px);
}
.svc-lp .card__text{
  font-weight:400; font-size:clamp(14px,1.05vw,18px); line-height:1.4; color:#3a4a57;
}
.svc-lp .why__cta{ display:flex; justify-content:center; margin-top:clamp(34px,3.6vw,58px); }

/* --- Bandeau logos officiels : fond cream -------------------------------- */
.svc-lp .badges{ background:var(--cream); color:var(--navy); padding-top:0; }
.svc-lp .badges__title{
  text-align:center; font-weight:500; font-size:clamp(22px,2.2vw,36px); line-height:1.1;
  margin-bottom:clamp(28px,2.8vw,46px);
}
.svc-lp .badges__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(28px,4vw,72px);
}
.svc-lp .badges__row img{
  height:clamp(46px,4.4vw,76px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.7; transition:filter .25s ease, opacity .25s ease;
}
.svc-lp .badges__row img:hover{ filter:none; opacity:1; }

/* --- Bloc « étapes » : fond navy ----------------------------------------- */
.svc-lp .steps{ background:var(--navy); color:var(--cream); }
.svc-lp .steps__title{
  text-align:center; font-weight:500; font-size:clamp(34px,4.6vw,72px);
  line-height:1; padding-top:.08em;
}
.svc-lp .steps__lead{
  max-width:60ch; margin:clamp(14px,1.6vw,26px) auto 0; text-align:center;
  font-weight:200; font-style:italic; font-size:clamp(17px,1.5vw,28px); line-height:1.35;
}
.svc-lp .steps__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,30px);
  margin-top:clamp(36px,3.8vw,64px);
}
.svc-lp .step{ position:relative; padding-top:clamp(8px,.8vw,14px); }
.svc-lp .step__num{
  display:flex; align-items:center; justify-content:center;
  width:clamp(44px,3.6vw,64px); height:clamp(44px,3.6vw,64px);
  border:clamp(2px,.22vw,3px) solid var(--cream); border-radius:50%;
  font-weight:600; font-size:clamp(20px,1.8vw,30px); line-height:1;
  margin-bottom:clamp(14px,1.4vw,24px);
}
.svc-lp .step__title{
  font-weight:600; font-size:clamp(19px,1.5vw,26px); line-height:1.1;
  margin-bottom:clamp(6px,.6vw,11px);
}
.svc-lp .step__text{
  font-weight:400; font-size:clamp(14px,1.05vw,18px); line-height:1.4;
  color:rgba(252,250,236,.82);
}

/* --- Bande CTA finale : fond navy ---------------------------------------- */
.svc-lp .cta-band{
  background:var(--navy); color:var(--cream); text-align:center;
  min-height:clamp(210px,22vw,360px);            /* bloc centré, écart haut = bas */
  display:grid; place-items:center;
  padding:clamp(24px,3vw,50px) clamp(20px,5vw,96px);
}
.svc-lp .cta-band__inner{ display:flex; flex-direction:column; align-items:center; }
.svc-lp .cta-band__title{
  font-weight:500; font-size:clamp(28px,3.4vw,52px); line-height:1.05;
  margin-bottom:clamp(20px,2vw,34px);
}

/* ---- Suite : adaptations mobile / portrait ------------------------------ */
@media (max-width:820px), (orientation:portrait){
  .svc-lp .section{ padding:clamp(40px,9vw,64px) clamp(18px,6vw,36px); }
  .svc-lp .why__title, .svc-lp .steps__title{ font-size:clamp(30px,8vw,46px); }
  .svc-lp .why__lead{ font-size:clamp(15px,4vw,19px); }
  .svc-lp .why__grid, .svc-lp .steps__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .svc-lp .steps__lead{ font-size:clamp(16px,4.4vw,21px); }
  .svc-lp .badges__row{ gap:clamp(22px,7vw,40px); }
  .svc-lp .badges__row img{ height:clamp(40px,9vw,58px); }
  .svc-lp .cta-band__title{ font-size:clamp(24px,7vw,38px); }
}
@media (max-width:520px){
  .svc-lp .why__grid, .svc-lp .steps__grid{ grid-template-columns:1fr; }
}

/* ============================================================================
   SCROLL « POURQUOI ? » — reproduction fidèle de la maquette Figma (audit)
   Section navy -> grand panneau cream arrondi -> titre + lead navy ->
   4 cartes navy (picto + titre + texte cream) -> CTA cream bordé navy.
   Bloc dédié (.pourquoi) pour ne pas impacter .why des autres pages.
   ========================================================================== */
.svc-lp .pourquoi{
  min-height:100dvh;                                 /* section visible en entier sur un écran */
  display:flex; align-items:stretch; justify-content:center;
  background:var(--navy);
  /* bande navy franche en haut ET en bas (plus de fine barre désagréable à la jointure) */
  padding:clamp(48px,7vh,104px) clamp(16px,2.4vw,42px) clamp(56px,8vh,120px);
}
.svc-lp .pourquoi__panel{
  width:100%; max-width:1645px; margin:0 auto;
  display:flex; flex-direction:column; justify-content:center;   /* groupe titre·cartes·bouton centré */
  gap:clamp(18px,2.6vh,34px);
  background:var(--cream); color:var(--navy);
  border-radius:clamp(30px,4.6vw,80px);
  padding:clamp(24px,3.5vh,50px) clamp(22px,4.6vw,79px);
  text-align:center;
}
.svc-lp .pourquoi__head{ flex:0 0 auto; }
.svc-lp .pourquoi__title{
  font-weight:500;                                   /* Thunder Medium LC */
  font-size:clamp(28px,4vw,64px); line-height:1; padding-top:.06em;
}
.svc-lp .pourquoi__lead{
  max-width:min(100%,1400px); margin:clamp(6px,1vh,16px) auto 0;
  font-weight:400; font-size:clamp(14px,1.4vw,23px); line-height:1.35;
}
.svc-lp .pourquoi__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2.2vw,40px);
}
.svc-lp .pourquoi__card{
  display:flex; flex-direction:column; align-items:flex-start; text-align:left;
  background:var(--navy); color:var(--cream);
  border-radius:clamp(16px,2.3vw,40px);
  /* + d'air interne, davantage en bas (texte décollé du bord) */
  padding:clamp(18px,2.2vh,30px) clamp(18px,1.9vw,32px) clamp(30px,4.2vh,54px);
}
.svc-lp .pourquoi__icon{
  width:clamp(26px,2.2vw,40px); height:clamp(26px,2.2vw,40px);
  object-fit:contain; margin-bottom:clamp(8px,1.2vh,16px);
}
.svc-lp .pourquoi__card-title{
  font-weight:500; font-size:clamp(16px,1.55vw,26px); line-height:1.05;
  margin-bottom:clamp(5px,.8vh,11px);
}
.svc-lp .pourquoi__card-text{
  width:100%; text-align:left;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;   /* typo classique, lisible */
  font-weight:400; font-size:clamp(14px,1.05vw,19px); line-height:1.45;
}
.svc-lp .pourquoi__cta{
  display:inline-flex; flex:0 0 auto; align-self:center; align-items:center; justify-content:center;
  margin-top:clamp(16px,3vh,44px);   /* CTA descendu, moins collé aux cartes (panneau inchangé) */
  font-weight:500; font-style:italic;                /* Thunder Medium LC Italic */
  font-size:clamp(17px,2vw,32px); line-height:1; text-decoration:none;
  color:var(--navy); background:var(--cream);
  border:clamp(2px,.3vw,5px) solid var(--navy);
  border-radius:clamp(14px,1.7vw,30px);
  padding:clamp(11px,1vw,18px) clamp(28px,2.6vw,52px);
  transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.svc-lp .pourquoi__cta:hover, .svc-lp .pourquoi__cta:focus-visible{   /* vert au survol, texte cream */
  background:var(--green); border-color:var(--green); color:var(--cream); outline:none;
}

/* Apparition douce des cartes au scroll (une seule fois, non parasite, pas d'effet CTA).
   Activée par JS (.pourquoi--anim) -> sans JS les cartes restent visibles. */
.svc-lp .pourquoi--anim .pourquoi__card{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.svc-lp .pourquoi--anim.is-visible .pourquoi__card{ opacity:1; transform:none; }
.svc-lp .pourquoi--anim.is-visible .pourquoi__card:nth-child(2){ transition-delay:.09s; }
.svc-lp .pourquoi--anim.is-visible .pourquoi__card:nth-child(3){ transition-delay:.18s; }
.svc-lp .pourquoi--anim.is-visible .pourquoi__card:nth-child(4){ transition-delay:.27s; }
@media (prefers-reduced-motion: reduce){
  .svc-lp .pourquoi--anim .pourquoi__card{ opacity:1; transform:none; transition:none; }
}

@media (max-width:820px), (orientation:portrait){
  .svc-lp .pourquoi{ min-height:auto; padding:clamp(28px,7vw,48px) clamp(16px,5vw,28px) clamp(40px,11vw,72px); }
  .svc-lp .pourquoi__panel{ padding:clamp(28px,7vw,44px) clamp(20px,5vw,36px); border-radius:clamp(26px,7vw,48px); }
  .svc-lp .pourquoi__title{ font-size:clamp(30px,8vw,46px); }
  .svc-lp .pourquoi__lead{ max-width:none; font-size:clamp(15px,4vw,20px); }   /* mobile : peut dépasser 2 lignes */
  .svc-lp .pourquoi__grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .svc-lp .pourquoi__card{ padding:clamp(16px,4.5vw,22px) clamp(16px,4.5vw,22px) clamp(24px,6vw,34px); }
  .svc-lp .pourquoi__card-title{ font-size:clamp(18px,4.6vw,24px); }
  .svc-lp .pourquoi__card-text{ font-size:clamp(14px,3.6vw,17px); }
  .svc-lp .pourquoi__cta{ font-size:clamp(18px,5vw,26px); }
}
@media (max-width:520px){
  .svc-lp .pourquoi__grid{ grid-template-columns:1fr; }
}

/* ============================================================================
   BANDEAU LOGOS — défilement infini gauche -> droite, en boucle (audit)
   Logos en couleur, sans effet de survol ; 2 copies pour une boucle fluide.
   ========================================================================== */
.svc-lp .badges-marquee{
  background:var(--cream);
  padding:clamp(26px,3.6vw,52px) 0;
  overflow:hidden;
}
.svc-lp .badges-marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:badges-scroll 40s linear infinite;        /* vitesse moyenne, lisible */
}
.svc-lp .badges-marquee__track img{
  flex:0 0 auto; height:clamp(56px,5.6vw,96px); width:auto; object-fit:contain;
  margin-right:clamp(48px,6vw,110px);                 /* écart large entre logos */
}
@keyframes badges-scroll{                              /* -50% = exactement une copie -> boucle sans couture */
  from{ transform:translateX(-50%); }
  to{   transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){
  .svc-lp .badges-marquee__track{ animation:none; }
}

/* ============================================================================
   ÉTAPES — empilage au scroll (pinned + entrée par la droite, GSAP ScrollTrigger)
   1 bloc cream sur fond navy. Numéro géant navy basse-opacité collé à gauche,
   titre + texte, photo à droite épousant les coins arrondis. Les cartes
   arrivent de la droite et s'empilent avec un léger décalage à gauche.
   ========================================================================== */
.svc-lp .howto{
  position:relative; background:var(--navy); color:var(--cream);
  min-height:100vh; display:flex; flex-direction:column;
}
.svc-lp .howto__head{ flex:0 0 auto; text-align:center; padding:clamp(36px,5vw,72px) clamp(20px,5vw,80px) clamp(14px,2.4vw,30px); }
.svc-lp .howto__title{ font-weight:500; font-size:clamp(32px,4.6vw,80px); line-height:1; }
.svc-lp .howto__sub{ font-weight:200; font-style:italic; font-size:clamp(16px,1.55vw,28px); line-height:1.3;
  margin-top:clamp(0px,.3vw,6px); color:rgba(252,250,236,.85); }

/* zone « pin » : occupe le reste de l'écran ; cartes superposées (même cellule) */
.svc-lp .stack{ flex:1 1 auto; position:relative; display:grid; place-items:center; overflow:hidden; }
.svc-lp .stack__card{
  grid-area:1/1;
  width:min(92vw,1500px); height:min(56vh,560px);
  display:grid; grid-template-columns:1fr clamp(260px,38%,560px);
  background:var(--cream); color:var(--navy);
  border-radius:clamp(20px,2.4vw,42px); overflow:hidden;
  /* ombre dirigée vers la gauche : tombe sur la carte (plus large) derrière, pas sur le fond navy */
  box-shadow:-16px 0 30px -16px rgba(0,0,0,.42);
  will-change:transform;
}
.svc-lp .stack__card:first-child{ box-shadow:none; }   /* carte du fond : aucune ombre sur le background */
/* réduction de largeur par carte (vraie largeur -> contenu jamais déformé) */
.svc-lp .stack__card:nth-child(2){ width:calc(min(92vw,1500px) * .95); }
.svc-lp .stack__card:nth-child(3){ width:calc(min(92vw,1500px) * .90); }
.svc-lp .stack__card:nth-child(4){ width:calc(min(92vw,1500px) * .85); }
.svc-lp .stack__num{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(46px,3.6vw,64px); height:clamp(46px,3.6vw,64px);
  background:var(--navy); color:var(--cream); border-radius:50%;
  font-weight:600; font-size:clamp(24px,2vw,34px); line-height:1; padding-bottom:.06em;  /* chiffre + grand, centré */
  margin-bottom:clamp(14px,1.5vw,24px);
}
.svc-lp .stack__body{ position:relative; z-index:1; align-self:center; padding:clamp(28px,4vw,72px); }
.svc-lp .stack__title{ font-weight:500; font-size:clamp(26px,3vw,52px); line-height:1.04; margin-bottom:clamp(12px,1.4vw,24px); }
.svc-lp .stack__text{
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:400;
  font-size:clamp(15px,1.25vw,22px); line-height:1.5; max-width:42ch; color:#2c3e4d;
}
.svc-lp .stack__photo{ background-size:cover; background-position:center; background-repeat:no-repeat; }

@media (max-width:820px), (orientation:portrait){
  .svc-lp .howto{ min-height:auto; display:block; }
  .svc-lp .howto__head{ padding:clamp(40px,9vw,64px) clamp(18px,6vw,32px) clamp(14px,4vw,24px); }
  .svc-lp .howto__title{ font-size:clamp(30px,8vw,46px); }
  .svc-lp .stack{ height:auto; display:block; overflow:visible;
    padding:clamp(8px,3vw,18px) clamp(16px,5vw,28px) clamp(40px,10vw,72px); }
  .svc-lp .stack__card{
    width:auto; height:auto; margin:0 auto clamp(18px,4vw,28px); max-width:560px;
    grid-template-columns:1fr; transform:none !important;   /* pas d'empilage sur mobile */
    box-shadow:0 18px 40px -20px rgba(0,0,0,.5);
  }
  /* annule les largeurs d'empilement desktop -> toutes les cartes alignées (même largeur) */
  .svc-lp .stack__card:nth-child(2), .svc-lp .stack__card:nth-child(3), .svc-lp .stack__card:nth-child(4){ width:auto; }
  .svc-lp .stack__photo{ min-height:clamp(170px,42vw,240px); order:-1; }
  .svc-lp .stack__num{ width:clamp(44px,12vw,54px); height:clamp(44px,12vw,54px); font-size:clamp(22px,6vw,28px); }
  .svc-lp .stack__body{ padding:clamp(22px,5vw,30px); }
  /* CTA final : bouton pleine largeur sur mobile (limite raisonnable) */
  .svc-lp .cta-band__inner{ width:100%; }
  .svc-lp .cta-band .btn{ display:flex; width:100%; max-width:440px; }
}

/* ============================================================================
   FOOTER — fond cream, texte navy (mentions légales, CGV, confidentialité)
   ========================================================================== */
.svc-lp .site-footer{ background:var(--cream); color:var(--navy); padding:clamp(22px,2.6vw,40px) clamp(20px,5vw,80px); }
.svc-lp .site-footer__inner{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(12px,2vw,28px);
}
.svc-lp .site-footer__logo{ justify-self:start; height:clamp(34px,3vw,46px); width:auto; }
.svc-lp .site-footer__nav{ justify-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(14px,1.8vw,32px); }
.svc-lp .site-footer__brand{ justify-self:end; font-weight:500; font-size:clamp(14px,1.1vw,18px); white-space:nowrap; }
.svc-lp .site-footer__nav a{
  color:var(--navy); text-decoration:none;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:clamp(13px,1vw,16px);
  transition:color .2s ease;
}
.svc-lp .site-footer__nav a:hover, .svc-lp .site-footer__nav a:focus-visible{ color:var(--green); outline:none; }

@media (max-width:520px){
  .svc-lp .site-footer__inner{ grid-template-columns:1fr; justify-items:center; gap:16px; }
  .svc-lp .site-footer__logo, .svc-lp .site-footer__nav, .svc-lp .site-footer__brand{ justify-self:center; }
}

/* ============================================================================
   ████  SECTIONS « PAGE SERVICE » PREMIUM — préfixe .svc-*  (AJOUT ADDITIF)  ████
   ----------------------------------------------------------------------------
   Transforme les landing pages en véritables pages services riches, sans rien
   modifier de l'existant : tout est en nouvelles classes .svc-*.
   • Réutilise les tokens du site (--navy / --cream / --green / --gold), la typo
     Thunder et les boutons .btn déjà définis plus haut.
   • Reprend la QUALITÉ de la page « À propos » : révélations au scroll, hovers
     « lift + vert », compteurs animés, carrousels — mais conserve les titres en
     casse normale (Thunder Medium) pour se fondre dans les pages services.
   • Rythme visuel : alternance .svc-navy / .svc-cream comme « À propos ».
   ========================================================================== */
.svc-lp{
  --svc-r:    clamp(16px, 1.9vw, 32px);    /* rayon généreux, cohérent avec le site */
  --svc-r-sm: clamp(12px, 1.3vw, 20px);
  --svc-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --navy-12:  rgba(23,57,85,.12);
  --navy-55:  rgba(23,57,85,.55);
  --cream-72: rgba(252,250,236,.72);
  --ink:      #2c3e4d;                       /* texte courant sur cream */
}

/* ---- Conteneur & sections ------------------------------------------------ */
.svc-lp .svc-section{ position:relative; padding:clamp(56px,8vw,128px) clamp(20px,5vw,96px); }
.svc-lp .svc-section--tight{ padding-top:clamp(36px,4.5vw,72px); padding-bottom:clamp(36px,4.5vw,72px); }
.svc-lp .svc-navy{ background:var(--navy); color:var(--cream); }
.svc-lp .svc-cream{ background:var(--cream); color:var(--navy); }
.svc-lp .svc-wrap{ max-width:1240px; margin:0 auto; width:100%; }
.svc-lp .svc-wrap--wide{ max-width:1440px; }

/* halo discret en haut des sections navy (profondeur, comme la CTA « À propos ») */
.svc-lp .svc-navy.svc-glow::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 50% 0%, rgba(60,108,150,.30), transparent 60%);
}
.svc-lp .svc-navy.svc-glow > .svc-wrap{ position:relative; z-index:1; }

/* ---- Titres & intros ----------------------------------------------------- */
.svc-lp .svc-head{ text-align:center; max-width:62ch; margin:0 auto; }
.svc-lp .svc-head--left{ text-align:left; margin:0; }
.svc-lp .svc-kicker{
  font-family:var(--svc-sans); font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  font-size:clamp(11px,1vw,13px); color:var(--cream-72); margin-bottom:1em;
  display:inline-flex; align-items:center; gap:.6em;
}
.svc-lp .svc-cream .svc-kicker{ color:var(--navy-55); }
.svc-lp .svc-kicker::before{ content:""; width:clamp(18px,2vw,30px); height:2px; background:currentColor; opacity:.5; }
.svc-lp .svc-head .svc-kicker::before{ display:none; }            /* pas de tiret quand centré */
.svc-lp .svc-h2{
  font-family:'Thunder',var(--svc-sans); font-weight:500; line-height:1.02;
  font-size:clamp(32px,4.4vw,68px); padding-top:.06em;
}
.svc-lp .svc-h2 em{ font-style:italic; font-weight:inherit; }
.svc-lp .svc-lead{
  margin:clamp(14px,1.6vw,24px) auto 0; max-width:64ch;
  font-family:var(--svc-sans); font-weight:400; font-size:clamp(16px,1.3vw,21px); line-height:1.55;
  color:var(--cream-72);
}
.svc-lp .svc-cream .svc-lead{ color:#3a4a57; }
.svc-lp .svc-head--left .svc-lead{ margin-left:0; margin-right:0; }
.svc-lp .svc-p{ font-family:var(--svc-sans); font-weight:400; font-size:clamp(15px,1.15vw,18px); line-height:1.65; color:var(--cream-72); }
.svc-lp .svc-cream .svc-p{ color:#3a4a57; }
.svc-lp .svc-p strong, .svc-lp .svc-lead strong{ font-weight:700; color:inherit; }
.svc-lp .svc-actions{ display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,18px); margin-top:clamp(26px,3vw,44px); }
.svc-lp .svc-head .svc-actions{ justify-content:center; }

/* lien fléché discret (réseau interne / ressources) */
.svc-lp .svc-link{
  display:inline-flex; align-items:center; gap:.45em; font-family:var(--svc-sans); font-weight:600;
  font-size:clamp(15px,1.1vw,18px); color:var(--green); border-bottom:2px solid transparent;
  transition:border-color .2s ease, gap .2s ease;
}
.svc-lp .svc-link:hover, .svc-lp .svc-link:focus-visible{ border-color:var(--green); gap:.75em; outline:none; }

/* ---- Révélations au scroll (natif, comme « À propos ») ------------------- */
.svc-lp .svc-reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
.svc-lp .svc-reveal.is-in{ opacity:1; transform:none; }
.svc-lp .svc-stagger > .is-in:nth-child(2){ transition-delay:.07s; }
.svc-lp .svc-stagger > .is-in:nth-child(3){ transition-delay:.14s; }
.svc-lp .svc-stagger > .is-in:nth-child(4){ transition-delay:.21s; }
.svc-lp .svc-stagger > .is-in:nth-child(5){ transition-delay:.28s; }
.svc-lp .svc-stagger > .is-in:nth-child(6){ transition-delay:.35s; }
@media (prefers-reduced-motion:reduce){
  .svc-lp .svc-reveal{ opacity:1; transform:none; transition:none; }
}

/* ====================== BARRE DE RÉASSURANCE (post-héros) ================= */
.svc-lp .svc-trust__grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,30px);
  align-items:stretch;
}
.svc-lp .svc-trust__item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3em;
  padding:clamp(6px,1vw,14px) clamp(8px,1vw,16px);
  border-left:1px solid var(--navy-12);
}
.svc-lp .svc-trust__item:first-child{ border-left:0; }
.svc-lp .svc-trust__ico{ width:clamp(28px,2.6vw,38px); height:clamp(28px,2.6vw,38px); color:var(--green); margin-bottom:.2em; }
.svc-lp .svc-trust__ico svg{ width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.8; }
.svc-lp .svc-trust__n{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(26px,2.8vw,44px); line-height:1; }
.svc-lp .svc-trust__n .star{ color:var(--gold); }
.svc-lp .svc-trust__l{ font-family:var(--svc-sans); font-weight:500; font-size:clamp(12px,1vw,15px); color:var(--navy-55); line-height:1.25; }

/* ====================== CARTES « BÉNÉFICES » ============================== */
.svc-lp .svc-cards{ display:grid; gap:clamp(16px,1.8vw,28px); margin-top:clamp(34px,4vw,58px); }
.svc-lp .svc-cards--3{ grid-template-columns:repeat(3,1fr); }
.svc-lp .svc-cards--4{ grid-template-columns:repeat(4,1fr); }
.svc-lp .svc-card{
  display:flex; flex-direction:column;
  background:#fff; border:1.5px solid var(--navy-12); border-radius:var(--svc-r);
  padding:clamp(22px,2vw,34px);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.svc-lp .svc-navy .svc-card{ background:rgba(252,250,236,.05); border-color:rgba(252,250,236,.14); color:var(--cream); }
.svc-lp .svc-card__ico{
  width:clamp(46px,3.6vw,60px); height:clamp(46px,3.6vw,60px); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  background:var(--navy); color:var(--cream); margin-bottom:clamp(16px,1.4vw,22px);
  transition:background .3s ease, color .3s ease;
}
.svc-lp .svc-navy .svc-card__ico{ background:transparent; border:2px solid var(--cream); }
.svc-lp .svc-card__ico svg{ width:52%; height:52%; stroke:currentColor; fill:none; stroke-width:1.7; }
.svc-lp .svc-card__t{ font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(20px,1.6vw,27px); line-height:1.08; margin-bottom:.45em; }
.svc-lp .svc-card__d{ font-family:var(--svc-sans); font-weight:400; font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:#3a4a57; flex:1; }
.svc-lp .svc-navy .svc-card__d{ color:var(--cream-72); }
.svc-lp .svc-card--link .svc-card__more{ margin-top:clamp(14px,1.4vw,20px); font-family:var(--svc-sans); font-weight:700; font-size:14px; color:var(--navy-55); transition:color .3s ease; }
.svc-lp .svc-card--hover:hover{ transform:translateY(-6px); background:var(--green); border-color:var(--green); color:#fff; box-shadow:0 26px 50px -24px rgba(18,158,83,.55); }
.svc-lp .svc-card--hover:hover .svc-card__d, .svc-lp .svc-card--hover:hover .svc-card__more{ color:rgba(255,255,255,.92); }
.svc-lp .svc-card--hover:hover .svc-card__t{ color:#fff; }
.svc-lp .svc-card--hover:hover .svc-card__ico{ background:rgba(255,255,255,.18); border-color:transparent; color:#fff; }

/* ====================== DÉPERDITIONS (barres animées) ==================== */
.svc-lp .svc-loss{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,72px); align-items:center; margin-top:clamp(30px,3.4vw,52px); }
.svc-lp .svc-loss__list{ display:flex; flex-direction:column; gap:clamp(14px,1.6vw,22px); }
.svc-lp .svc-loss__row{ }
.svc-lp .svc-loss__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.5em; gap:12px; }
.svc-lp .svc-loss__name{ font-family:var(--svc-sans); font-weight:600; font-size:clamp(14px,1.15vw,18px); }
.svc-lp .svc-loss__val{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(17px,1.5vw,24px); color:var(--cream); }
.svc-lp .svc-cream .svc-loss__val{ color:var(--navy); }
.svc-lp .svc-loss__bar{ height:clamp(8px,.9vw,12px); border-radius:999px; background:rgba(252,250,236,.14); overflow:hidden; }
.svc-lp .svc-cream .svc-loss__bar{ background:var(--navy-12); }
.svc-lp .svc-loss__fill{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--green),#16b863); transition:width 1.1s cubic-bezier(.22,.61,.36,1); }
.svc-lp .svc-loss.is-in .svc-loss__fill{ width:var(--w,0%); }
.svc-lp .svc-loss__aside{ border-radius:var(--svc-r); overflow:hidden; aspect-ratio:4/5; background:#0f293d; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.svc-lp .svc-loss__aside img{ width:100%; height:100%; object-fit:cover; }
.svc-lp .svc-loss__note{ margin-top:clamp(18px,2vw,28px); font-style:italic; }

/* ====================== EXPERTISE / FONDATEUR ============================ */
.svc-lp .svc-expertise{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,5vw,80px); align-items:center; }
.svc-lp .svc-expertise--rev{ grid-template-columns:1.08fr .92fr; }
.svc-lp .svc-expertise--rev .svc-expertise__media{ order:2; }
.svc-lp .svc-expertise__media{ position:relative; border-radius:var(--svc-r); overflow:hidden; aspect-ratio:4/5; background:#0f293d; box-shadow:0 30px 60px -30px rgba(0,0,0,.6); }
.svc-lp .svc-expertise__media img{ width:100%; height:100%; object-fit:cover; }
.svc-lp .svc-expertise__badge{
  position:absolute; left:clamp(14px,1.4vw,22px); bottom:clamp(14px,1.4vw,22px);
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px;
  background:rgba(252,250,236,.94); color:var(--navy); font-family:var(--svc-sans); font-weight:700; font-size:clamp(12px,1vw,15px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5);
}
.svc-lp .svc-expertise__badge .star{ color:var(--gold); }
.svc-lp .svc-role{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic; font-size:clamp(17px,1.6vw,25px); color:var(--cream-72); margin-bottom:.7em; }
.svc-lp .svc-cream .svc-role{ color:#3a4a57; }
.svc-lp .svc-quote{
  margin:clamp(18px,2.2vw,30px) 0 0; padding-left:clamp(16px,1.6vw,24px);
  border-left:3px solid rgba(252,250,236,.32);
  font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic;
  font-size:clamp(19px,2vw,30px); line-height:1.22; color:var(--cream);
}
.svc-lp .svc-cream .svc-quote{ border-left-color:rgba(23,57,85,.25); color:var(--navy); }
.svc-lp .svc-values{ display:flex; flex-wrap:wrap; gap:clamp(10px,1vw,16px); margin-top:clamp(20px,2.4vw,32px); }
.svc-lp .svc-pill{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.1em; border-radius:999px;
  border:1.5px solid rgba(252,250,236,.28); font-family:var(--svc-sans); font-weight:600; font-size:clamp(13px,1.05vw,16px);
}
.svc-lp .svc-cream .svc-pill{ border-color:var(--navy-12); background:#fff; }
.svc-lp .svc-pill svg{ width:1.1em; height:1.1em; stroke:var(--green); fill:none; stroke-width:2.2; }

/* ====================== CHIFFRES CLÉS (compteurs) ======================== */
.svc-lp .svc-stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,44px); text-align:center; }
.svc-lp .svc-stat{ display:flex; flex-direction:column; gap:.25em; }
.svc-lp .svc-stat__n{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(44px,6.4vw,96px); line-height:.9; }
.svc-lp .svc-stat__n .star{ color:var(--gold); font-size:.62em; }
.svc-lp .svc-stat__l{ font-family:var(--svc-sans); font-weight:500; font-size:clamp(13px,1.05vw,16px); color:var(--cream-72); }
.svc-lp .svc-cream .svc-stat__l{ color:var(--navy-55); }

/* ====================== CHECKLIST (portée d'une prestation) ============== */
.svc-lp .svc-checklist{ list-style:none; display:flex; flex-direction:column; gap:clamp(11px,1.3vw,17px); margin-top:clamp(18px,2vw,28px); }
.svc-lp .svc-checklist li{ display:flex; gap:.7em; align-items:flex-start; font-family:var(--svc-sans); font-size:clamp(15px,1.12vw,18px); line-height:1.5; color:var(--cream-72); }
.svc-lp .svc-cream .svc-checklist li{ color:var(--ink); }
.svc-lp .svc-checklist li svg{ flex:0 0 auto; width:1.35em; height:1.35em; margin-top:.06em; stroke:var(--green); fill:none; stroke-width:2.4; }
.svc-lp .svc-checklist strong{ font-weight:700; color:inherit; }

/* ====================== AIDES & FINANCEMENT (PDF valorisé) =============== */
.svc-lp .svc-aides__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,64px); align-items:start; margin-top:clamp(30px,3.4vw,52px); }
.svc-lp .aide-table{ width:100%; border-collapse:collapse; margin:.2em 0 1em; font-family:var(--svc-sans); font-size:clamp(13px,1.05vw,16px); }
.svc-lp .aide-table th, .svc-lp .aide-table td{ border:1px solid var(--navy-12); padding:9px 12px; text-align:left; }
.svc-lp .svc-navy .aide-table th, .svc-lp .svc-navy .aide-table td{ border-color:rgba(252,250,236,.16); }
.svc-lp .aide-table th{ background:var(--navy); color:var(--cream); font-weight:600; }
.svc-lp .aide-table caption{ caption-side:top; text-align:left; font-family:var(--svc-sans); font-weight:700; font-size:clamp(13px,1vw,15px); color:var(--navy-55); margin-bottom:.5em; }
.svc-lp .svc-navy .aide-table caption{ color:var(--cream-72); }
.svc-lp .aide-table tr:nth-child(even) td{ background:rgba(23,57,85,.03); }

/* Carte « guide PDF » premium */
.svc-lp .svc-pdf{
  position:relative; display:flex; flex-direction:column; gap:clamp(14px,1.6vw,22px);
  background:var(--navy); color:var(--cream); border-radius:var(--svc-r);
  padding:clamp(24px,2.6vw,40px); overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(0,0,0,.5);
}
.svc-lp .svc-cream .svc-pdf{ border:0; }
.svc-lp .svc-pdf::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:radial-gradient(circle, rgba(18,158,83,.30), transparent 70%); }
.svc-lp .svc-pdf__tag{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--svc-sans); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:clamp(10px,.9vw,12px); color:var(--cream-72); }
.svc-lp .svc-pdf__t{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(22px,2.1vw,34px); line-height:1.05; position:relative; z-index:1; }
.svc-lp .svc-pdf__d{ font-family:var(--svc-sans); font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--cream-72); position:relative; z-index:1; }
.svc-lp .svc-pdf__list{ list-style:none; display:flex; flex-direction:column; gap:.5em; position:relative; z-index:1; }
.svc-lp .svc-pdf__list li{ display:flex; gap:.6em; align-items:flex-start; font-family:var(--svc-sans); font-size:clamp(13px,1vw,16px); color:var(--cream-72); }
.svc-lp .svc-pdf__list svg{ width:1.15em; height:1.15em; flex:0 0 auto; stroke:var(--green); fill:none; stroke-width:2.4; margin-top:.15em; }
.svc-lp .svc-pdf .svc-pdf__btn{
  position:relative; z-index:1; align-self:flex-start; display:inline-flex; align-items:center; gap:.6em;
  font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic; font-size:clamp(16px,1.3vw,22px);
  background:var(--cream); color:var(--navy); border:3px solid var(--cream); border-radius:clamp(12px,1.3vw,20px);
  padding:clamp(11px,1vw,16px) clamp(22px,2vw,38px); transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease;
}
.svc-lp .svc-pdf__btn:hover, .svc-lp .svc-pdf__btn:focus-visible{ background:var(--green); border-color:var(--green); color:#fff; transform:translateY(-3px); outline:none; }
.svc-lp .svc-pdf__btn svg{ width:1.1em; height:1.1em; stroke:currentColor; fill:none; stroke-width:2; }

/* mini-lien PDF en ligne (réutilisé en FAQ / ressources) */
.svc-lp .pdf-btn{
  display:inline-flex; align-items:center; gap:.5em; font-family:var(--svc-sans); font-weight:600;
  font-size:clamp(14px,1.05vw,16px); color:var(--navy); background:#fff; border:2px solid var(--navy);
  border-radius:999px; padding:.5em 1.1em; transition:background .25s,color .25s,border-color .25s;
}
.svc-lp .svc-navy .pdf-btn{ color:var(--cream); border-color:var(--cream); background:transparent; }
.svc-lp .pdf-btn:hover, .svc-lp .pdf-btn:focus-visible{ background:var(--green); border-color:var(--green); color:#fff; outline:none; }
.svc-lp .pdf-btn svg{ width:1.1em; height:1.1em; stroke:currentColor; fill:none; stroke-width:2; }

/* ====================== GARANTIES / ENGAGEMENTS ========================= */
.svc-lp .svc-guarantees{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,28px); margin-top:clamp(34px,4vw,56px); }
.svc-lp .svc-guarantee{ display:flex; gap:clamp(14px,1.4vw,20px); align-items:flex-start; padding:clamp(20px,1.8vw,30px); border-radius:var(--svc-r); background:rgba(252,250,236,.05); border:1.5px solid rgba(252,250,236,.14); transition:transform .3s ease, border-color .3s ease, background .3s ease; }
.svc-lp .svc-cream .svc-guarantee{ background:#fff; border-color:var(--navy-12); }
.svc-lp .svc-guarantee:hover{ transform:translateY(-4px); border-color:var(--green); }
.svc-lp .svc-guarantee__ico{ flex:0 0 auto; width:clamp(40px,3vw,52px); height:clamp(40px,3vw,52px); border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--green); color:var(--green); }
.svc-lp .svc-guarantee__ico svg{ width:50%; height:50%; stroke:currentColor; fill:none; stroke-width:2; }
.svc-lp .svc-guarantee__t{ font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(17px,1.4vw,23px); line-height:1.1; margin-bottom:.3em; }
.svc-lp .svc-guarantee__d{ font-family:var(--svc-sans); font-size:clamp(13px,1vw,16px); line-height:1.5; color:var(--cream-72); }
.svc-lp .svc-cream .svc-guarantee__d{ color:#3a4a57; }

/* ====================== TIMELINE (parcours détaillé) ==================== */
.svc-lp .svc-timeline{ margin-top:clamp(34px,4vw,58px); display:flex; flex-direction:column; gap:0; position:relative; }
.svc-lp .svc-tl{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2vw,30px); padding-bottom:clamp(22px,2.6vw,38px); }
.svc-lp .svc-tl:last-child{ padding-bottom:0; }
.svc-lp .svc-tl__rail{ display:flex; flex-direction:column; align-items:center; }
.svc-lp .svc-tl__num{ flex:0 0 auto; width:clamp(40px,3.2vw,54px); height:clamp(40px,3.2vw,54px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(18px,1.6vw,26px); background:var(--green); color:#fff; }
.svc-lp .svc-tl__line{ flex:1 1 auto; width:2px; background:rgba(252,250,236,.18); margin-top:6px; min-height:18px; }
.svc-lp .svc-cream .svc-tl__line{ background:var(--navy-12); }
.svc-lp .svc-tl:last-child .svc-tl__line{ display:none; }
.svc-lp .svc-tl__body{ padding-top:clamp(4px,.6vw,10px); }
.svc-lp .svc-tl__t{ font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(18px,1.5vw,25px); line-height:1.1; margin-bottom:.3em; }
.svc-lp .svc-tl__d{ font-family:var(--svc-sans); font-size:clamp(14px,1.05vw,17px); line-height:1.55; color:var(--cream-72); max-width:60ch; }
.svc-lp .svc-cream .svc-tl__d{ color:#3a4a57; }

/* ====================== GALERIE RÉALISATIONS (carrousel) ================ */
.svc-lp .svc-gallery__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svc-lp .svc-gallery__nav{ display:flex; gap:12px; flex:0 0 auto; }
.svc-lp .svc-arrow{ width:clamp(44px,3.4vw,56px); height:clamp(44px,3.4vw,56px); border-radius:50%; border:2px solid var(--navy-12); color:var(--navy); display:flex; align-items:center; justify-content:center; background:transparent; transition:background .25s,color .25s,border-color .25s; }
.svc-lp .svc-navy .svc-arrow{ border-color:rgba(252,250,236,.28); color:var(--cream); }
.svc-lp .svc-arrow:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.svc-lp .svc-track{ display:flex; gap:clamp(16px,1.6vw,26px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-top:clamp(26px,3vw,44px); cursor:grab; scroll-behavior:smooth; padding-bottom:6px; }
.svc-lp .svc-track::-webkit-scrollbar{ display:none; }
.svc-lp .svc-track.is-drag{ cursor:grabbing; scroll-behavior:auto; }
.svc-lp .svc-slide{ flex:0 0 clamp(250px,30vw,420px); scroll-snap-align:start; }
.svc-lp .svc-slide__img{ aspect-ratio:4/3; border-radius:var(--svc-r); background:#dfe6e9 center/cover no-repeat; box-shadow:0 18px 40px -26px rgba(23,57,85,.5); }
.svc-lp .svc-slide figcaption{ margin-top:.7em; font-family:var(--svc-sans); font-weight:600; font-size:clamp(13px,1.05vw,16px); display:flex; align-items:center; gap:8px; }
.svc-lp .svc-navy .svc-slide figcaption{ color:var(--cream); }

/* ====================== AVIS CLIENTS (carrousel riche) ================== */
.svc-lp .svc-reviews__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.svc-lp .svc-rating{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.svc-lp .svc-rating img{ width:clamp(22px,2vw,30px); height:auto; }
.svc-lp .svc-rating__n{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(28px,3vw,46px); line-height:1; }
.svc-lp .svc-rating__stars{ color:var(--gold); letter-spacing:2px; font-size:clamp(15px,1.4vw,22px); }
.svc-lp .svc-rtrack{ display:flex; gap:clamp(14px,1.4vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; margin-top:clamp(24px,2.8vw,40px); padding-bottom:6px; }
.svc-lp .svc-rtrack::-webkit-scrollbar{ display:none; }
.svc-lp .svc-rev{ flex:0 0 clamp(258px,30vw,360px); scroll-snap-align:start; display:flex; flex-direction:column; background:#fff; color:var(--navy); border:1.5px solid var(--navy-12); border-radius:clamp(14px,1.4vw,22px); padding:clamp(18px,1.6vw,26px); box-shadow:0 14px 30px -22px rgba(23,57,85,.4); }
.svc-lp .svc-rev__top{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.svc-lp .svc-av{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--svc-sans); font-weight:700; flex:0 0 auto; }
.svc-lp .svc-rev__name{ font-family:var(--svc-sans); font-weight:700; font-size:15px; line-height:1.1; }
.svc-lp .svc-rev__date{ font-family:var(--svc-sans); font-size:12px; color:var(--gray); }
.svc-lp .svc-rev__g{ margin-left:auto; width:16px; height:16px; }
.svc-lp .svc-rev__stars{ color:var(--gold); letter-spacing:1px; font-size:15px; margin-bottom:8px; }
.svc-lp .svc-rev__txt{ font-family:var(--svc-sans); font-size:clamp(13px,1vw,15px); line-height:1.55; color:#33454f; }

/* ====================== FAQ (accordéon) ================================= */
.svc-lp .svc-faq__list{ max-width:920px; margin:clamp(30px,3.4vw,52px) auto 0; display:flex; flex-direction:column; gap:clamp(10px,1.1vw,16px); }
.svc-lp .svc-faq__item{ background:rgba(252,250,236,.05); border:1.5px solid rgba(252,250,236,.14); border-radius:var(--svc-r-sm); overflow:hidden; transition:border-color .3s ease; }
.svc-lp .svc-cream .svc-faq__item{ background:#fff; border-color:var(--navy-12); }
.svc-lp .svc-faq__item.is-open{ border-color:var(--green); }
.svc-lp .svc-faq__q{ width:100%; display:flex; align-items:center; gap:16px; text-align:left; background:none; border:0; padding:clamp(16px,1.6vw,24px) clamp(18px,1.8vw,30px); font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(17px,1.5vw,24px); line-height:1.2; color:inherit; cursor:pointer; }
.svc-lp .svc-faq__q-text{ flex:1 1 auto; }
.svc-lp .svc-faq__icon{ position:relative; flex:0 0 auto; width:clamp(20px,1.8vw,26px); height:clamp(20px,1.8vw,26px); transition:transform .35s ease; }
.svc-lp .svc-faq__icon::before, .svc-lp .svc-faq__icon::after{ content:""; position:absolute; left:50%; top:50%; background:var(--green); border-radius:2px; }
.svc-lp .svc-faq__icon::before{ width:100%; height:2.5px; transform:translate(-50%,-50%); }
.svc-lp .svc-faq__icon::after{ width:2.5px; height:100%; transform:translate(-50%,-50%); }
.svc-lp .svc-faq__item.is-open .svc-faq__icon{ transform:rotate(135deg); }
.svc-lp .svc-faq__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1); }
.svc-lp .svc-faq__item.is-open .svc-faq__panel{ grid-template-rows:1fr; }
.svc-lp .svc-faq__panel-inner{ overflow:hidden; opacity:0; transition:opacity .4s ease; }
.svc-lp .svc-faq__item.is-open .svc-faq__panel-inner{ opacity:1; }
.svc-lp .svc-faq__a{ padding:0 clamp(18px,1.8vw,30px) clamp(18px,1.8vw,28px); font-family:var(--svc-sans); font-size:clamp(14px,1.1vw,17px); line-height:1.6; color:var(--cream-72); }
.svc-lp .svc-cream .svc-faq__a{ color:#3a4a57; }
.svc-lp .svc-faq__a p{ margin:0 0 .7em; }
.svc-lp .svc-faq__a p:last-child{ margin-bottom:0; }
.svc-lp .svc-faq__a ul{ margin:.2em 0 .8em; padding-left:1.1em; }
.svc-lp .svc-faq__a li{ margin:.3em 0; }
.svc-lp .svc-faq__a strong{ font-weight:700; color:inherit; }
.svc-lp .svc-faq__a a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ====================== RESSOURCES / LIENS INTERNES ===================== */
.svc-lp .svc-res__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,26px); margin-top:clamp(30px,3.4vw,52px); }
.svc-lp .svc-res{ display:flex; flex-direction:column; gap:.5em; padding:clamp(20px,1.9vw,32px); border-radius:var(--svc-r); background:#fff; border:1.5px solid var(--navy-12); color:var(--navy); transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.svc-lp .svc-res:hover{ transform:translateY(-5px); border-color:var(--green); box-shadow:0 22px 46px -28px rgba(18,158,83,.5); }
.svc-lp .svc-res__t{ font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(18px,1.5vw,24px); line-height:1.1; }
.svc-lp .svc-res__d{ font-family:var(--svc-sans); font-size:clamp(13px,1.02vw,16px); line-height:1.5; color:#3a4a57; flex:1; }
.svc-lp .svc-res__more{ font-family:var(--svc-sans); font-weight:700; font-size:14px; color:var(--green); }

/* Glossaire (definitions) */
.svc-lp .svc-gloss{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,26px); margin-top:clamp(28px,3vw,48px); }
.svc-lp .svc-gloss__item{ padding:clamp(16px,1.5vw,24px) clamp(18px,1.6vw,28px); border-radius:var(--svc-r-sm); background:rgba(252,250,236,.05); border:1.5px solid rgba(252,250,236,.14); }
.svc-lp .svc-cream .svc-gloss__item{ background:#fff; border-color:var(--navy-12); }
.svc-lp .svc-gloss__dt{ font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(16px,1.3vw,21px); margin-bottom:.25em; }
.svc-lp .svc-gloss__dd{ font-family:var(--svc-sans); font-size:clamp(13px,1.02vw,16px); line-height:1.55; color:var(--cream-72); }
.svc-lp .svc-cream .svc-gloss__dd{ color:#3a4a57; }

/* ====================== RESPONSIVE (svc-*) ============================== */
@media (max-width:980px){
  .svc-lp .svc-cards--4{ grid-template-columns:repeat(2,1fr); }
  .svc-lp .svc-cards--3{ grid-template-columns:repeat(2,1fr); }
  .svc-lp .svc-guarantees{ grid-template-columns:repeat(2,1fr); }
  .svc-lp .svc-res__grid{ grid-template-columns:1fr; }
  .svc-lp .svc-loss, .svc-lp .svc-expertise, .svc-lp .svc-expertise--rev, .svc-lp .svc-aides__grid{ grid-template-columns:1fr; }
  .svc-lp .svc-expertise--rev .svc-expertise__media{ order:0; }
  .svc-lp .svc-expertise__media, .svc-lp .svc-loss__aside{ aspect-ratio:16/10; max-width:560px; }
  .svc-lp .svc-stats__grid{ grid-template-columns:repeat(2,1fr); gap:clamp(28px,5vw,48px); }
  .svc-lp .svc-trust__grid{ grid-template-columns:repeat(2,1fr); gap:24px 12px; }
  .svc-lp .svc-trust__item:nth-child(3){ border-left:0; }
}
@media (max-width:620px){
  .svc-lp .svc-cards--4, .svc-lp .svc-cards--3, .svc-lp .svc-guarantees, .svc-lp .svc-gloss{ grid-template-columns:1fr; }
  .svc-lp .svc-reviews__head, .svc-lp .svc-gallery__head{ flex-direction:column; align-items:flex-start; }
  .svc-lp .svc-trust__grid{ grid-template-columns:1fr 1fr; }
  /* tableaux d'aides : défilement horizontal interne -> jamais de débordement de page */
  .svc-lp .aide-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .svc-lp .aide-table caption{ white-space:normal; }
}

/* ============================================================================
   ████  REFONTE V2 « PAGE SERVICE » — héros éditorial + structures narratives ████
   ----------------------------------------------------------------------------
   Objectif : ne plus ressembler à une landing. Chaque page a un héros service
   (photo réelle + titre + mots-clés + CTA) et une logique de sections propre.
   Micro-FAQ tissée entre les sections (pas de gros bloc FAQ final).
   Tout en .svh-/.cmp-/.scn-/.brk-/.err-/.gain-/.mfaq-/.htl-/.kase-/.cform-.
   Réutilise les tokens + .svc-* (cards, checklist, stats, gloss, reveal).
   ========================================================================== */

/* Bouton fantôme (sur fond sombre) — complète .btn/.btn--cream existants */
.svc-lp .btn--ghost{ background:transparent; color:var(--cream); border-color:var(--cream); }

/* ---- CTA flottant (apparaît après le héros) ----------------------------- */
.svc-lp .sticky-cta{
  position:fixed; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); z-index:50;
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic; font-size:clamp(15px,1.2vw,19px);
  color:var(--navy); background:var(--cream); border:2px solid var(--navy);
  padding:.7em 1.3em; border-radius:999px; text-decoration:none;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5);
  opacity:0; transform:translateY(20px) scale(.96); pointer-events:none;
  transition:opacity .35s ease, transform .35s ease, background .25s, color .25s, border-color .25s;
}
.svc-lp .sticky-cta.is-show{ opacity:1; transform:none; pointer-events:auto; }
.svc-lp .sticky-cta:hover{ background:var(--green); border-color:var(--green); color:#fff; }
.svc-lp .sticky-cta svg{ width:1.1em; height:1.1em; stroke:currentColor; fill:none; stroke-width:2.2; }
@media (max-width:520px){ .svc-lp .sticky-cta{ left:14px; right:14px; bottom:14px; justify-content:center; } }

/* ============================ HÉROS SERVICE (.svh) ======================== */
.svc-lp .svh{ position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:clamp(540px,82vh,800px); color:var(--cream);
  padding:clamp(48px,8vh,120px) clamp(20px,5vw,72px); }
.svc-lp .svh__media{ position:absolute; inset:0; z-index:0; }
.svc-lp .svh__media img{ width:100%; height:100%; object-fit:cover; }
.svc-lp .svh__scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(102deg, rgba(15,34,51,.95) 0%, rgba(15,34,51,.82) 42%, rgba(18,44,67,.55) 78%, rgba(18,44,67,.35) 100%); }
.svc-lp .svh__scrim::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 120% at 88% 12%, rgba(18,158,83,.20), transparent 55%); }
.svc-lp .svh__inner{ position:relative; z-index:2; max-width:1240px; margin:0 auto; width:100%; }
.svc-lp .svh__eyebrow{ display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--svc-sans); font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(11px,1vw,13px); color:rgba(252,250,236,.72); margin-bottom:clamp(16px,2vh,26px); }
.svc-lp .svh__eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green); }
.svc-lp .svh__title{ font-family:'Thunder',var(--svc-sans); font-weight:500; line-height:.98;
  font-size:clamp(40px,7vw,108px); letter-spacing:.5px; max-width:15ch; padding-top:.04em; }
.svc-lp .svh__title em{ font-style:italic; font-weight:inherit; color:var(--cream); }
.svc-lp .svh__lead{ margin-top:clamp(18px,2.4vh,30px); max-width:58ch;
  font-family:var(--svc-sans); font-weight:400; font-size:clamp(17px,1.55vw,24px); line-height:1.5; color:rgba(252,250,236,.82); }
.svc-lp .svh__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:clamp(8px,1vw,14px); margin-top:clamp(22px,3vh,36px); }
.svc-lp .svh__chips li{ display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.05em; border-radius:999px;
  border:1.5px solid rgba(252,250,236,.34); font-family:var(--svc-sans); font-weight:600; font-size:clamp(12px,1.05vw,15px); color:var(--cream); }
.svc-lp .svh__chips svg{ width:1.05em; height:1.05em; stroke:var(--green); fill:none; stroke-width:2.4; }
.svc-lp .svh__cta{ display:flex; flex-wrap:wrap; gap:clamp(12px,1.4vw,18px); margin-top:clamp(26px,3.4vh,44px); }
.svc-lp .svh__note{ margin-top:clamp(16px,2vh,24px); font-family:var(--svc-sans); font-size:clamp(13px,1vw,15px); color:rgba(252,250,236,.62); display:flex; align-items:center; gap:.5em; }
.svc-lp .svh__note svg{ width:1.1em; height:1.1em; stroke:var(--gold); fill:none; stroke-width:2; }
/* mini-carte « définition express » optionnelle dans le héros */
.svc-lp .svh__pin{ margin-top:clamp(28px,3.6vh,46px); display:inline-flex; align-items:stretch; gap:0;
  background:rgba(252,250,236,.08); border:1.5px solid rgba(252,250,236,.2); border-radius:var(--svc-r-sm); overflow:hidden; backdrop-filter:blur(4px); }
.svc-lp .svh__pin div{ padding:clamp(12px,1.4vw,18px) clamp(16px,1.6vw,24px); }
.svc-lp .svh__pin div+div{ border-left:1.5px solid rgba(252,250,236,.18); }
.svc-lp .svh__pin b{ display:block; font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(18px,1.7vw,26px); }
.svc-lp .svh__pin span{ font-family:var(--svc-sans); font-size:clamp(12px,1vw,14px); color:rgba(252,250,236,.7); }

@media (max-width:760px){
  .svc-lp .svh{ min-height:auto; padding:clamp(48px,12vw,80px) clamp(18px,6vw,32px); }
  .svc-lp .svh__scrim{ background:linear-gradient(180deg, rgba(15,34,51,.86), rgba(15,34,51,.92)); }
  .svc-lp .svh__title{ font-size:clamp(38px,11vw,62px); max-width:none; }
  .svc-lp .svh__cta .btn{ flex:1 1 auto; }
}

/* ============================ COMPARAISON « VS » (.cmp) =================== */
.svc-lp .cmp{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(12px,1.6vw,26px); align-items:stretch; margin-top:clamp(34px,4vw,58px); }
.svc-lp .cmp__col{ border-radius:var(--svc-r); padding:clamp(24px,2.4vw,40px); border:1.5px solid var(--navy-12); background:#fff; display:flex; flex-direction:column; }
.svc-lp .svc-navy .cmp__col{ background:rgba(252,250,236,.05); border-color:rgba(252,250,236,.14); }
.svc-lp .cmp__col--b{ background:var(--navy); color:var(--cream); border-color:var(--navy); position:relative; box-shadow:0 30px 60px -34px rgba(0,0,0,.5); }
.svc-lp .svc-navy .cmp__col--b{ background:var(--green); border-color:var(--green); }
.svc-lp .cmp__tag{ display:inline-flex; align-items:center; gap:.5em; align-self:flex-start; font-family:var(--svc-sans); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:clamp(10px,.9vw,12px); padding:.4em .9em; border-radius:999px; margin-bottom:clamp(12px,1.4vw,18px); }
.svc-lp .cmp__col--a .cmp__tag{ background:rgba(23,57,85,.08); color:var(--navy-55); }
.svc-lp .cmp__col--b .cmp__tag{ background:rgba(255,255,255,.18); color:#fff; }
.svc-lp .cmp__h{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(24px,2.4vw,38px); line-height:1.02; margin-bottom:.2em; }
.svc-lp .cmp__sub{ font-family:var(--svc-sans); font-weight:400; font-size:clamp(14px,1.1vw,17px); color:#3a4a57; margin-bottom:clamp(14px,1.6vw,22px); }
.svc-lp .cmp__col--b .cmp__sub{ color:rgba(255,255,255,.85); }
.svc-lp .cmp__list{ list-style:none; display:flex; flex-direction:column; gap:.7em; margin-top:auto; }
.svc-lp .cmp__list li{ display:flex; gap:.6em; align-items:flex-start; font-family:var(--svc-sans); font-size:clamp(13.5px,1.05vw,16px); line-height:1.45; }
.svc-lp .cmp__list svg{ flex:0 0 auto; width:1.2em; height:1.2em; margin-top:.08em; fill:none; stroke-width:2.4; }
.svc-lp .cmp__col--a .cmp__list svg{ stroke:var(--navy-55); }
.svc-lp .cmp__col--b .cmp__list svg{ stroke:#fff; }
.svc-lp .cmp__vs{ align-self:center; display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:clamp(48px,4vw,68px); height:clamp(48px,4vw,68px); border-radius:50%;
  background:var(--cream); color:var(--navy); border:2px solid var(--navy);
  font-family:'Thunder',var(--svc-sans); font-weight:600; font-style:italic; font-size:clamp(15px,1.3vw,20px); }
.svc-lp .svc-navy .cmp__vs{ background:var(--navy); color:var(--cream); border-color:var(--cream); }
@media (max-width:760px){ .svc-lp .cmp{ grid-template-columns:1fr; } .svc-lp .cmp__vs{ transform:rotate(90deg); margin:-6px auto; } }

/* ============================ SCÉNARIOS (.scn) =========================== */
.svc-lp .scn{ display:grid; gap:clamp(14px,1.6vw,22px); margin-top:clamp(34px,4vw,56px); }
.svc-lp .scn--3{ grid-template-columns:repeat(3,1fr); }
.svc-lp .scn__card{ display:flex; flex-direction:column; background:#fff; border:1.5px solid var(--navy-12); border-radius:var(--svc-r); overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.svc-lp .scn__card:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -30px rgba(23,57,85,.45); }
.svc-lp .scn__img{ aspect-ratio:16/10; background:#dfe6e9 center/cover no-repeat; }
.svc-lp .scn__body{ padding:clamp(20px,1.9vw,30px); display:flex; flex-direction:column; flex:1; }
.svc-lp .scn__when{ font-family:var(--svc-sans); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:clamp(10px,.9vw,12px); color:var(--green); margin-bottom:.6em; }
.svc-lp .scn__t{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(19px,1.6vw,26px); line-height:1.08; margin-bottom:.4em; }
.svc-lp .scn__d{ font-family:var(--svc-sans); font-size:clamp(14px,1.05vw,16px); line-height:1.5; color:#3a4a57; flex:1; }
.svc-lp .scn__need{ margin-top:clamp(12px,1.4vw,18px); padding-top:clamp(12px,1.4vw,16px); border-top:1px solid var(--navy-12); font-family:var(--svc-sans); font-weight:600; font-size:clamp(13px,1.02vw,15px); color:var(--navy); display:flex; gap:.5em; align-items:center; }
.svc-lp .scn__need svg{ width:1.1em; height:1.1em; stroke:var(--green); fill:none; stroke-width:2.4; flex:0 0 auto; }
@media (max-width:880px){ .svc-lp .scn--3{ grid-template-columns:1fr; } }

/* ============================ DÉCOUPAGE / CONTENU (.brk) ================= */
.svc-lp .brk{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2px,.3vw,4px); margin-top:clamp(34px,4vw,56px); border-radius:var(--svc-r); overflow:hidden; border:1.5px solid rgba(252,250,236,.14); }
.svc-lp .svc-cream .brk{ border-color:var(--navy-12); }
.svc-lp .brk__item{ display:flex; gap:clamp(14px,1.4vw,20px); padding:clamp(20px,2.2vw,34px); background:rgba(252,250,236,.04); }
.svc-lp .svc-cream .brk__item{ background:#fff; }
.svc-lp .brk__n{ flex:0 0 auto; font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(28px,2.6vw,44px); line-height:1; color:var(--green); width:1.5em; }
.svc-lp .brk__t{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(17px,1.45vw,23px); line-height:1.1; margin-bottom:.3em; }
.svc-lp .brk__d{ font-family:var(--svc-sans); font-size:clamp(13.5px,1.02vw,16px); line-height:1.5; color:var(--cream-72); }
.svc-lp .svc-cream .brk__d{ color:#3a4a57; }
@media (max-width:680px){ .svc-lp .brk{ grid-template-columns:1fr; } }

/* ============================ ERREURS FRÉQUENTES (.err) ================== */
.svc-lp .err{ display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); margin-top:clamp(34px,4vw,56px); }
.svc-lp .err__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.4vw,20px); align-items:stretch; }
.svc-lp .err__side{ border-radius:var(--svc-r-sm); padding:clamp(18px,1.8vw,26px); display:flex; gap:.8em; align-items:flex-start; }
.svc-lp .err__bad{ background:rgba(219,68,55,.07); border:1.5px solid rgba(219,68,55,.28); }
.svc-lp .svc-navy .err__bad{ background:rgba(219,68,55,.12); }
.svc-lp .err__good{ background:rgba(18,158,83,.08); border:1.5px solid rgba(18,158,83,.32); }
.svc-lp .svc-navy .err__good{ background:rgba(18,158,83,.14); }
.svc-lp .err__ico{ flex:0 0 auto; width:1.5em; height:1.5em; margin-top:.05em; }
.svc-lp .err__bad .err__ico{ stroke:#DB4437; } .svc-lp .err__good .err__ico{ stroke:var(--green); }
.svc-lp .err__ico svg{ width:100%; height:100%; fill:none; stroke:inherit; stroke-width:2.4; }
.svc-lp .err__label{ display:block; font-family:var(--svc-sans); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(10px,.85vw,11px); margin-bottom:.35em; }
.svc-lp .err__bad .err__label{ color:#DB4437; } .svc-lp .err__good .err__label{ color:var(--green); }
.svc-lp .err__txt{ font-family:var(--svc-sans); font-size:clamp(14px,1.08vw,17px); line-height:1.45; }
.svc-lp .svc-navy .err__txt{ color:var(--cream); }
@media (max-width:680px){ .svc-lp .err__row{ grid-template-columns:1fr; gap:8px; } }

/* ============================ GAINS / AVANT-APRÈS (.gain) =============== */
.svc-lp .gain{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,30px); margin-top:clamp(34px,4vw,56px); align-items:stretch; }
.svc-lp .gain__card{ border-radius:var(--svc-r); padding:clamp(24px,2.4vw,38px); }
.svc-lp .gain__before{ background:rgba(252,250,236,.05); border:1.5px solid rgba(252,250,236,.16); }
.svc-lp .svc-cream .gain__before{ background:#f3efe0; border-color:var(--navy-12); }
.svc-lp .gain__after{ background:var(--green); color:#fff; box-shadow:0 30px 60px -34px rgba(18,158,83,.55); }
.svc-lp .gain__label{ font-family:var(--svc-sans); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:clamp(10px,.9vw,12px); opacity:.8; margin-bottom:.6em; }
.svc-lp .gain__big{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(34px,4vw,64px); line-height:.95; }
.svc-lp .gain__small{ font-family:var(--svc-sans); font-size:clamp(13px,1.05vw,16px); line-height:1.5; margin-top:.5em; }
.svc-lp .gain__before .gain__small{ color:var(--cream-72); } .svc-lp .svc-cream .gain__before .gain__small{ color:#3a4a57; }
@media (max-width:680px){ .svc-lp .gain{ grid-template-columns:1fr; } }

/* ============================ MICRO-FAQ INLINE (.mfaq) ================== */
.svc-lp .mfaq{ max-width:880px; margin:clamp(30px,4vw,58px) auto 0; display:flex; gap:clamp(14px,1.6vw,22px);
  padding:clamp(20px,2vw,30px) clamp(22px,2.2vw,34px); border-radius:var(--svc-r);
  background:rgba(18,158,83,.06); border:1.5px solid rgba(18,158,83,.22); }
.svc-lp .svc-navy .mfaq{ background:rgba(18,158,83,.12); border-color:rgba(18,158,83,.3); }
.svc-lp .mfaq__badge{ flex:0 0 auto; width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px); border-radius:50%;
  background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(16px,1.4vw,22px); }
.svc-lp .mfaq__q{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(17px,1.5vw,24px); line-height:1.15; margin-bottom:.35em; }
.svc-lp .mfaq__a{ font-family:var(--svc-sans); font-size:clamp(14px,1.1vw,17px); line-height:1.6; color:var(--ink); }
.svc-lp .svc-navy .mfaq__a{ color:var(--cream-72); }
.svc-lp .mfaq__a a{ color:var(--green); font-weight:600; text-decoration:underline; text-underline-offset:2px; }

/* ============================ TIMELINE HORIZONTALE (.htl) =============== */
.svc-lp .htl{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:clamp(16px,1.8vw,28px);
  margin-top:clamp(40px,4.5vw,64px); overflow-x:auto; scrollbar-width:none; padding-bottom:8px; scroll-snap-type:x mandatory; }
.svc-lp .htl::-webkit-scrollbar{ display:none; }
.svc-lp .htl__step{ position:relative; scroll-snap-align:start; padding-top:clamp(40px,4vw,58px); }
.svc-lp .htl__step::before{ content:""; position:absolute; top:clamp(18px,1.8vw,26px); left:0; right:0; height:2px; background:rgba(252,250,236,.2); }
.svc-lp .svc-cream .htl__step::before{ background:var(--navy-12); }
.svc-lp .htl__step:first-child::before{ left:50%; }
.svc-lp .htl__step:last-child::before{ right:50%; }
.svc-lp .htl__dot{ position:absolute; top:clamp(8px,1vw,16px); left:0; width:clamp(22px,2.2vw,30px); height:clamp(22px,2.2vw,30px);
  border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(12px,1.1vw,16px); z-index:1; }
.svc-lp .htl__t{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(17px,1.45vw,23px); line-height:1.1; margin-bottom:.35em; }
.svc-lp .htl__d{ font-family:var(--svc-sans); font-size:clamp(13px,1.02vw,16px); line-height:1.5; color:var(--cream-72); }
.svc-lp .svc-cream .htl__d{ color:#3a4a57; }

/* ============================ CAS RÉEL (.kase) ========================== */
.svc-lp .kase{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(28px,4vw,64px); align-items:center; margin-top:clamp(34px,4vw,56px); }
.svc-lp .kase__media{ border-radius:var(--svc-r); overflow:hidden; aspect-ratio:4/3; background:#0f293d; box-shadow:0 30px 60px -34px rgba(0,0,0,.5); }
.svc-lp .kase__media img{ width:100%; height:100%; object-fit:cover; }
.svc-lp .kase__steps{ list-style:none; display:flex; flex-direction:column; gap:clamp(14px,1.6vw,22px); counter-reset:k; }
.svc-lp .kase__steps li{ display:flex; gap:clamp(12px,1.4vw,18px); align-items:flex-start; }
.svc-lp .kase__steps li::before{ counter-increment:k; content:counter(k); flex:0 0 auto; width:clamp(30px,2.6vw,40px); height:clamp(30px,2.6vw,40px);
  border-radius:50%; border:2px solid var(--green); color:var(--green); display:flex; align-items:center; justify-content:center;
  font-family:'Thunder',var(--svc-sans); font-weight:600; font-size:clamp(15px,1.2vw,20px); }
.svc-lp .svc-navy .kase__steps li{ color:var(--cream); }
.svc-lp .kase__steps b{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(16px,1.35vw,21px); display:block; margin-bottom:.15em; }
.svc-lp .kase__steps span{ font-family:var(--svc-sans); font-size:clamp(13.5px,1.05vw,16px); line-height:1.5; color:var(--cream-72); }
.svc-lp .svc-cream .kase__steps span{ color:#3a4a57; }
.svc-lp .kase__result{ margin-top:clamp(8px,1vw,14px); padding:clamp(16px,1.6vw,22px); border-radius:var(--svc-r-sm);
  background:var(--green); color:#fff; font-family:var(--svc-sans); font-weight:600; font-size:clamp(14px,1.1vw,17px); display:flex; gap:.6em; align-items:center; }
.svc-lp .kase__result svg{ width:1.3em; height:1.3em; stroke:#fff; fill:none; stroke-width:2.4; flex:0 0 auto; }
@media (max-width:880px){ .svc-lp .kase{ grid-template-columns:1fr; } .svc-lp .kase__media{ aspect-ratio:16/10; } }

/* ============================ SECTION FORMULAIRE (.cform) =============== */
.svc-lp .cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:center; }
.svc-lp .cform__aside .svc-h2{ margin-bottom:.25em; }
.svc-lp .cform__contact{ list-style:none; display:flex; flex-direction:column; gap:clamp(12px,1.4vw,18px); margin-top:clamp(22px,2.4vw,32px); }
.svc-lp .cform__contact li{ display:flex; gap:.8em; align-items:center; font-family:var(--svc-sans); font-size:clamp(15px,1.15vw,18px); color:var(--cream-72); }
.svc-lp .svc-cream .cform__contact li{ color:var(--ink); }
.svc-lp .cform__contact a{ color:inherit; font-weight:600; border-bottom:2px solid transparent; transition:border-color .2s,color .2s; }
.svc-lp .cform__contact a:hover{ color:var(--green); border-color:var(--green); }
.svc-lp .cform__contact .ico{ flex:0 0 auto; width:clamp(36px,3vw,46px); height:clamp(36px,3vw,46px); border-radius:50%;
  border:2px solid var(--green); color:var(--green); display:flex; align-items:center; justify-content:center; }
.svc-lp .cform__contact .ico svg{ width:46%; height:46%; stroke:currentColor; fill:none; stroke-width:2; }
.svc-lp .cform__card{ background:var(--cream); color:var(--navy); border-radius:var(--svc-r); padding:clamp(22px,2.4vw,40px); box-shadow:0 40px 80px -40px rgba(0,0,0,.55); }
.svc-lp .svc-cream .cform__card{ background:#fff; border:1.5px solid var(--navy-12); }
.svc-lp .cform__card .form{ height:auto; gap:clamp(12px,1.4vh,18px); }
.svc-lp .cform__card .field--area{ min-height:clamp(90px,12vh,150px); }
.svc-lp .cform__card .send{ height:clamp(48px,5vh,60px); margin-top:4px; }
.svc-lp .cform__head{ text-align:center; margin-bottom:clamp(16px,1.8vw,24px); }
.svc-lp .cform__head h3{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic; font-size:clamp(24px,2.4vw,38px); line-height:1; }
.svc-lp .cform__head p{ font-family:var(--svc-sans); font-size:clamp(13px,1.05vw,16px); color:#3a4a57; margin-top:.4em; }
@media (max-width:880px){ .svc-lp .cform__grid{ grid-template-columns:1fr; } }

/* ---- petit séparateur de section (transition douce) -------------------- */
.svc-lp .svc-eyebrow-row{ display:flex; align-items:center; gap:1em; }

/* compléments v2 : grille 2 colonnes + checklist « problème » (croix rouges) */
.svc-lp .svc-cards--2{ grid-template-columns:repeat(2,1fr); }
.svc-lp .svc-checklist--x li svg{ stroke:#DB4437; }
@media (max-width:760px){ .svc-lp .svc-cards--2{ grid-template-columns:1fr; } }

/* ============================================================================
   ████  AFFINAGES V2.1 — conversion, en-tête sticky, héros, process scroll  ████
   ========================================================================== */

/* ---- En-tête sticky avec CTA « Devis gratuit » toujours visible --------- */
.svc-lp .site-head{ position:sticky; top:0; z-index:60; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--cream); padding:clamp(9px,1.2vw,15px) clamp(16px,4vw,52px); border-bottom:1px solid rgba(23,57,85,.08); }
.svc-lp .site-head__logo{ height:clamp(30px,3.4vw,46px); width:auto; }
.svc-lp .site-head__actions{ display:flex; align-items:center; gap:clamp(10px,1.6vw,22px); }
.svc-lp .site-head__tel{ display:inline-flex; align-items:center; gap:.45em; font-family:var(--svc-sans); font-weight:700;
  font-size:clamp(14px,1.1vw,17px); color:var(--navy); text-decoration:none; white-space:nowrap; }
.svc-lp .site-head__tel svg{ width:1.1em; height:1.1em; stroke:var(--green); fill:none; stroke-width:2; }
.svc-lp .site-head__cta{ display:inline-flex; align-items:center; gap:.45em; font-family:'Thunder',var(--svc-sans); font-weight:500; font-style:italic;
  font-size:clamp(14px,1.2vw,19px); color:#fff; background:var(--green); border:2px solid var(--green); border-radius:999px;
  padding:.55em 1.25em; text-decoration:none; transition:filter .2s ease, transform .2s ease; white-space:nowrap; }
.svc-lp .site-head__cta svg{ width:1.05em; height:1.05em; stroke:currentColor; fill:none; stroke-width:2.4; }
.svc-lp .site-head__cta:hover{ filter:brightness(1.07); transform:translateY(-1px); }
@media (max-width:560px){ .svc-lp .site-head__tel{ display:none; } .svc-lp .site-head{ padding:9px 16px; } }

/* ---- Héros : image plus discrète + titres plus larges (moins de lignes) -- */
.svc-lp .svh{ min-height:clamp(500px,76vh,740px); }
.svc-lp .svh__scrim{ background:linear-gradient(100deg, rgba(12,28,44,.97) 0%, rgba(12,28,44,.9) 38%, rgba(13,32,50,.72) 74%, rgba(13,32,50,.58) 100%) !important; }
.svc-lp .svh__media img{ filter:saturate(.85) contrast(1.02); }
.svc-lp .svh__title{ max-width:18ch; }
@media (min-width:1100px){ .svc-lp .svh__title{ font-size:clamp(60px,5.6vw,104px); max-width:24ch; } }

/* têtes de section plus larges -> titres sur 1–2 lignes sur grand écran */
.svc-lp .svc-head{ max-width:min(94%,1040px); }

/* ---- Correctif couleur : carte « moins forte » du comparatif sur navy ---- */
.svc-lp .svc-navy .cmp__col--a .cmp__tag{ background:rgba(252,250,236,.16); color:var(--cream); }
.svc-lp .svc-navy .cmp__col--a .cmp__sub{ color:var(--cream-72); }
.svc-lp .svc-navy .cmp__col--a .cmp__list li{ color:var(--cream); }
.svc-lp .svc-navy .cmp__col--a .cmp__list svg{ stroke:var(--cream-72); }

/* ---- Bouton « money » : Simuler mes aides ------------------------------- */
.svc-lp .btn--green{ background:var(--green); color:#fff; border-color:var(--green); }
.svc-lp .btn--green:hover, .svc-lp .btn--green:focus-visible{ background:#0e8044; border-color:#0e8044; color:#fff; }

/* ---- Mise en avant des aides (spotlight chiffre) ------------------------ */
.svc-lp .aides-spot{ display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(24px,3.2vw,56px); align-items:center;
  margin-top:clamp(32px,3.6vw,52px); border-radius:var(--svc-r); padding:clamp(26px,3vw,48px);
  background:linear-gradient(135deg, rgba(18,158,83,.20), rgba(18,158,83,.05)); border:1.5px solid rgba(18,158,83,.34); }
.svc-lp .aides-spot__big{ font-family:'Thunder',var(--svc-sans); font-weight:500; line-height:.9; }
.svc-lp .aides-spot__amount{ display:block; font-size:clamp(56px,8.5vw,132px); color:var(--green); }
.svc-lp .aides-spot__label{ display:block; font-size:clamp(19px,2.1vw,32px); margin-top:.06em; }
.svc-lp .aides-spot__sub{ font-family:var(--svc-sans); font-size:clamp(14px,1.12vw,18px); line-height:1.55; margin-top:clamp(12px,1.4vw,20px); color:var(--cream-72); max-width:44ch; }
.svc-lp .svc-cream .aides-spot__sub{ color:#3a4a57; }
.svc-lp .aides-spot__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:clamp(18px,2vw,26px); }
@media (max-width:820px){ .svc-lp .aides-spot{ grid-template-columns:1fr; } }

/* ============================ PROCESS (scroll-driven) ==================== */
.svc-lp .proc{ position:relative; }
.svc-lp .proc__sticky{ padding:clamp(48px,7vw,110px) clamp(20px,5vw,72px); }
.svc-lp .proc__grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(30px,5vw,80px); margin-top:clamp(34px,4vw,58px); align-items:start; }
.svc-lp .proc__rail{ list-style:none; display:flex; flex-direction:column; gap:clamp(6px,.9vw,12px); }
.svc-lp .proc__rail li{ display:flex; align-items:center; gap:.7em; padding:clamp(10px,1.1vw,16px) clamp(13px,1.2vw,20px); border-radius:var(--svc-r-sm);
  font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(18px,1.6vw,27px); line-height:1.05; color:var(--cream-72);
  border:1.5px solid transparent; transition:color .3s ease, background .3s ease, border-color .3s ease; }
.svc-lp .svc-cream .proc__rail li{ color:var(--navy-55); }
.svc-lp .proc__rn{ font-family:var(--svc-sans); font-weight:700; font-size:.62em; opacity:.55; width:2.2em; flex:0 0 auto; }
.svc-lp .proc__rail li.is-active{ color:var(--cream); background:rgba(252,250,236,.07); border-color:rgba(252,250,236,.18); }
.svc-lp .svc-cream .proc__rail li.is-active{ color:var(--navy); background:#fff; border-color:var(--navy-12); box-shadow:0 14px 30px -22px rgba(23,57,85,.4); }
.svc-lp .proc__rail li.is-active .proc__rn{ color:var(--green); opacity:1; }
.svc-lp .proc__viewport{ position:relative; min-height:clamp(300px,40vh,400px); }
.svc-lp .proc__panel{ position:absolute; inset:0; opacity:0; transform:translateY(16px); pointer-events:none;
  transition:opacity .5s ease, transform .55s cubic-bezier(.22,.61,.36,1); }
.svc-lp .proc__panel.is-active{ opacity:1; transform:none; pointer-events:auto; }
.svc-lp .proc__pnum{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(40px,5vw,82px); line-height:1; color:var(--green); }
.svc-lp .proc__pt{ font-family:'Thunder',var(--svc-sans); font-weight:500; font-size:clamp(26px,2.7vw,46px); line-height:1.03; margin:.18em 0 .42em; }
.svc-lp .proc__pd{ font-family:var(--svc-sans); font-size:clamp(15px,1.2vw,19px); line-height:1.6; color:var(--cream-72); max-width:48ch; }
.svc-lp .svc-cream .proc__pd{ color:#3a4a57; }
@media (min-width:821px){
  .svc-lp .proc{ height:calc(var(--steps,4) * 74vh); }
  .svc-lp .proc__sticky{ position:sticky; top:0; min-height:100vh; display:flex; flex-direction:column; justify-content:center; }
}
@media (max-width:820px){
  .svc-lp .proc{ height:auto !important; }
  .svc-lp .proc__sticky{ position:static; }
  .svc-lp .proc__grid{ grid-template-columns:1fr; gap:0; margin-top:clamp(26px,6vw,38px); }
  .svc-lp .proc__rail{ display:none; }
  .svc-lp .proc__viewport{ position:static; min-height:0; display:flex; flex-direction:column; gap:clamp(26px,7vw,40px); }
  .svc-lp .proc__panel{ position:relative; opacity:1; transform:none; pointer-events:auto; padding-left:clamp(50px,15vw,68px); }
  .svc-lp .proc__panel .proc__pnum{ position:absolute; left:0; top:-.05em; font-size:clamp(32px,10vw,44px); }
}

/* héros : voile vert d'accent plus discret */
.svc-lp .svh__scrim::after{ background:radial-gradient(68% 95% at 94% 6%, rgba(18,158,83,.12), transparent 50%) !important; }


/* --------------------------------------------------------- Messages formulaire (WP) -- */
.svc-lp .form-msg{ border-radius:12px; padding:12px 16px; margin:0 0 12px; font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:15px; line-height:1.4; }
.svc-lp .form-msg--ok{ background:var(--green); color:#fff; }
.svc-lp .form-msg--error{ background:#c0392b; color:#fff; }

/* ============================================================================
   INTÉGRATION THÈME WP
   Le thème fournit un header FIXE (~80px) et définit ses propres .hero / .reviews
   qui « fuitent » dans la page : .svc-lp .hero hérite de min-height:100vh +
   display:flex;justify-content:center (héros plein écran centré → photo/avis
   poussés hors écran), et .reviews devient une grille 3 colonnes.
   On décale le contenu sous le header et on neutralise ces fuites.
   ========================================================================== */
.svc-lp{ padding-top:80px; }
@media (max-width:480px){ .svc-lp{ padding-top:64px; } }

/* la 1ère scène plein écran tient dans le viewport restant sous le header fixe
   (desktop paysage uniquement ; en mobile/portrait la règle .stage:auto reste) */
@media (min-width:821px) and (orientation:landscape){
  .svc-lp .stage{ height:calc(100dvh - 80px); }
}

/* héros de la PAGE != héros plein écran du THÈME */
.svc-lp .hero{ min-height:0; display:block; justify-content:flex-start; align-items:stretch; overflow:visible; }

/* carrousel d'avis != grille 3 colonnes du THÈME */
.svc-lp .reviews{ display:flex; grid-template-columns:none; max-width:none; margin:0; }

/* ancres : ne pas atterrir sous le header fixe (~80px) quand on scrolle vers une section */
.svc-lp [id]{ scroll-margin-top:96px; }

/* ============================================================================
   INTRO PAGES SERVICES — reprise de la DA accueil (blocs crème + accents verts)
   Remplace l'ancien héros navy + formulaire inline. CTA -> formulaire du bas.
   ========================================================================== */
.svc-lp .svc-hero{ position:relative; isolation:isolate; background:var(--navy); color:var(--cream);
  background-size:cover; background-position:center; text-align:center;
  padding:clamp(34px,5vw,72px) clamp(20px,5vw,48px) clamp(44px,6vw,84px); }
.svc-lp .svc-hero--photo::before{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(23,57,85,.78) 0%, rgba(23,57,85,.90) 62%, rgba(23,57,85,.96) 100%); }
.svc-lp .svc-hero__inner{ position:relative; z-index:1; max-width:1080px; margin:0 auto; }
.svc-lp .svc-hero__kicker{ font-family:'Helvetica Neue',Arial,sans-serif; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; font-size:clamp(11px,1.1vw,14px);
  color:rgba(252,250,236,.72); margin:0 0 .9em; }
.svc-lp .svc-hero__title{ font-family:'Thunder',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(2.6rem,6.4vw,6rem); line-height:.98; color:var(--cream); margin:0; }
.svc-lp .svc-hero__title em{ display:block; font-style:italic; font-weight:500; text-transform:none;
  color:var(--cream); font-size:.62em; line-height:1; margin-bottom:.05em; opacity:.92; }
.svc-lp .svc-hero__sub{ font-family:'Thunder',sans-serif; font-weight:400; color:var(--cream);
  font-size:clamp(1.2rem,2.4vw,1.8rem); margin:.55em 0 0; }
.svc-lp .svc-hero__cards{ display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px,1.6vw,24px); margin:clamp(26px,3.4vw,46px) 0 0; }
.svc-lp .svc-hero__card{ flex:1 1 180px; max-width:300px; min-width:158px; background:#FFFCED;
  border:none; border-radius:20px; padding:clamp(18px,2vw,28px) clamp(12px,1.4vw,18px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 12px 34px rgba(0,0,0,.22); }
.svc-lp .svc-hero__card svg{ width:30px; height:30px; fill:none; stroke:var(--green); stroke-width:2.2; }
.svc-lp .svc-hero__card b{ font-family:'Thunder',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.55rem); color:var(--navy); line-height:1.05; }
.svc-lp .svc-hero__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  margin:clamp(28px,3.6vw,46px) 0 0; }
.svc-lp .svc-hero__btn{ font-family:'Thunder',sans-serif; font-weight:500; cursor:pointer;
  text-decoration:none; background:var(--cream); color:var(--navy); border:3px solid var(--cream);
  border-radius:44px; padding:clamp(13px,1.4vw,17px) clamp(28px,3.2vw,54px);
  font-size:clamp(1.1rem,1.7vw,1.55rem); transition:background .2s, transform .15s, color .2s; }
.svc-lp .svc-hero__btn:hover{ background:var(--green); border-color:var(--green); color:var(--cream); transform:translateY(-2px); }
.svc-lp .svc-hero__btn--outline{ background:transparent; color:var(--cream); }
.svc-lp .svc-hero__btn--outline:hover{ background:var(--cream); color:var(--navy); border-color:var(--cream); }
.svc-lp .svc-hero__reviews{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:10px; margin:clamp(22px,2.6vw,34px) 0 0; font-family:'Helvetica Neue',Arial,sans-serif; }
.svc-lp .svc-hero__reviews img{ width:30px; height:30px; }
.svc-lp .svc-hero__reviews .s{ color:var(--gold); letter-spacing:2px; font-size:19px; }
.svc-lp .svc-hero__reviews b{ font-weight:700; color:var(--cream); }
.svc-lp .svc-hero__reviews span{ color:rgba(252,250,236,.72); }

/* animation d'arrivée (légère, une fois) */
@keyframes svcHeroIn{ from{opacity:0; transform:translateY(30px) scale(.985);} to{opacity:1; transform:none;} }
.svc-lp .svc-hero--anim .svc-hero__kicker,
.svc-lp .svc-hero--anim .svc-hero__title,
.svc-lp .svc-hero--anim .svc-hero__sub,
.svc-lp .svc-hero--anim .svc-hero__card,
.svc-lp .svc-hero--anim .svc-hero__cta,
.svc-lp .svc-hero--anim .svc-hero__reviews{ opacity:0; animation:svcHeroIn .85s cubic-bezier(.2,.7,.3,1) both; }
.svc-lp .svc-hero--anim .svc-hero__title{ animation-delay:.06s; }
.svc-lp .svc-hero--anim .svc-hero__sub{ animation-delay:.14s; }
.svc-lp .svc-hero--anim .svc-hero__card{ animation-delay:.22s; }
.svc-lp .svc-hero--anim .svc-hero__card:nth-child(2){ animation-delay:.3s; }
.svc-lp .svc-hero--anim .svc-hero__card:nth-child(3){ animation-delay:.38s; }
.svc-lp .svc-hero--anim .svc-hero__card:nth-child(4){ animation-delay:.46s; }
.svc-lp .svc-hero--anim .svc-hero__cta{ animation-delay:.5s; }
.svc-lp .svc-hero--anim .svc-hero__reviews{ animation-delay:.58s; }
@media (prefers-reduced-motion:reduce){
  .svc-lp .svc-hero--anim .svc-hero__kicker, .svc-lp .svc-hero--anim .svc-hero__title,
  .svc-lp .svc-hero--anim .svc-hero__sub, .svc-lp .svc-hero--anim .svc-hero__card,
  .svc-lp .svc-hero--anim .svc-hero__cta, .svc-lp .svc-hero--anim .svc-hero__reviews{ opacity:1; animation:none; }
}