/* =========================================================
   Verlaine 86 — landing « Diagnostic énergie »
   Direction artistique : alignée sur groupeverlaine.com.
   Tokens relevés au getComputedStyle sur le site du réseau :
     fond blanc + slate-50, texte slate-900, cartes navy,
     CTA rouge #e40134 en pilule, jaune #fbbc04 en accent,
     Inter (H1 800 / -1.5px, texte) + Montserrat (H2/H3),
     radius 12/16/20/9999, ombres Tailwind.
   Seul écart assumé : UNE bande crème très pâle (--cream) sur
   la séquence problème/symptômes, pour l'ancrage local.
   ========================================================= */
:root{
  /* --- échelle slate du réseau (identique à groupeverlaine.com) --- */
  --ink:#0f172a;            /* slate-900 */
  --slate8:#1e293b;
  --slate7:#334155;
  --slate6:#475569;
  --slate5:#64748b;
  --slate4:#94a3b8;
  --slate3:#cbd5e1;
  --slate2:#e2e8f0;
  --slate1:#f1f5f9;
  --slate05:#f8fafc;        /* slate-50 : fond de section alterné */

  /* --- marque --- */
  --red:#e40134;            /* CTA primaire Verlaine */
  --red-dark:#b02129;       /* --gv-brand-dark du réseau */
  --yellow:#fbbc04;         /* accent réseau (étoiles, soulignés) */
  --blue:#00a6d5;           /* bleu réseau (liens de rubrique) */

  /* --- unique touche locale : crème très pâle --- */
  --cream:#fdfbf7;

  --line:var(--slate2);
  --radius:20px;

  /* ombres Tailwind, comme le réseau */
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-card:0 30px 60px -25px rgba(15,23,42,.25);
  --soft:var(--shadow-sm);
  --shadow:var(--shadow-lg);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
.skip-link{position:fixed;left:12px;top:8px;z-index:10000;transform:translateY(-160%);background:#fff;color:var(--ink);padding:9px 12px;border:2px solid var(--ink);border-radius:8px}
.skip-link:focus{transform:translateY(0)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* Respect de prefers-reduced-motion (WCAG 2.3.3) : coupe le smooth-scroll des ancres
   et neutralise transitions/animations, y compris l'apparition slidée de .mobile-cta. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
body{
  margin:0;
  font-family:var(--font-public-inter),ui-sans-serif,system-ui,sans-serif;
  color:var(--ink);
  background:#fff;
  overflow-x:hidden;
}
a{color:inherit}
main{position:relative;z-index:1}
.section{padding:clamp(56px,8vw,104px) clamp(18px,5vw,72px);max-width:1200px;margin:0 auto}
.section--intro{padding-top:clamp(30px,4vw,52px)}
.section--flush-top{padding-top:0}
.head.head--flush-bottom{margin-bottom:0}
.options.locataire-options{margin-top:22px}
.opt.opt--static{cursor:default}
.locataire-back{margin-top:10px}

/* ---------- bandes de section pleine largeur ----------
   Rythme de fonds pour séparer les sections à l'oeil. Toutes les valeurs sortent
   de la palette du réseau (--color-slate-50/-100 sont ses propres tokens) : on
   creuse l'écart entre bandes SANS introduire de couleur étrangère à la DA.
   Échelle claire, du plus clair au plus soutenu :
     #fff  ->  #f8fafc (slate-50)  ->  #f1f5f9 (slate-100)  + #fdfbf7 (crème locale)
   Le filet haut rend la césure nette même entre deux nuances proches. */
.band{position:relative;overflow:hidden}
.band>.section{position:relative;z-index:2}
.band-white{background:#fff}
.band-slate{background:var(--slate05);border-top:1px solid var(--slate2)}
.band-slate-2{background:var(--slate1);border-top:1px solid var(--slate2)}
.band-cream{background:var(--cream);border-top:1px solid #efe7da}   /* écart local assumé */
.band-white + .band-slate,.band-white + .band-slate-2{border-top-color:var(--slate2)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:22px;
  padding:12px clamp(18px,4vw,44px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* Logo officiel du réseau (PNG 400x87, ratio 4.6) + « 86 » accolé.
   Couleurs relevées au pixel dans le PNG : navy « VERLAINE » #213d82,
   rouge « GROUPE » #e32938 (à ne pas confondre avec le rouge CTA #e40134).
   Le « 86 » reprend le navy exact du logo pour se lire comme une extension
   de la marque, pas comme un ajout rapporté. */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo-img{height:34px;width:auto;display:block}
.logo-dep{
  font-family:var(--font-public-montserrat),sans-serif;font-weight:800;font-size:19px;line-height:1;
  color:#213d82;padding-left:10px;border-left:2px solid var(--slate2);
}
.nav nav{display:flex;gap:22px;margin-left:auto}
.nav nav a{text-decoration:none;font-weight:700;font-size:14px;color:var(--slate7)}
.nav nav a:hover{color:var(--red)}
.nav-tel{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap;color:var(--ink)}
.nav-btn{
  display:inline-flex;align-items:center;min-height:44px;   /* cible tactile */
  font-weight:700;font-size:14px;background:var(--red);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:9999px;white-space:nowrap;
  box-shadow:var(--shadow-md);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.nav-btn:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.nav-btn .lbl-short{display:none}
/* Le numéro reste visible sur mobile : sur un téléphone, voir un numéro prouve qu'il
   y a quelqu'un au bout, même sans appeler. On sacrifie les liens de rubrique, pas lui. */
@media(max-width:920px){
  .nav nav{display:none}
  .nav-tel{margin-left:auto}
}
/* Le label long du CTA nav (« Estimer mes économies », ~208px) fait déborder la nav
   dès ~600px (mesuré : right=606 à 600px). On bascule sur « Estimer » plus tôt. */
@media(max-width:660px){
  .nav-btn .lbl-long{display:none}
  .nav-btn .lbl-short{display:inline}
}
@media(max-width:560px){
  .nav{gap:8px;padding-left:12px;padding-right:12px}
  .logo{gap:7px}
  .logo-img{height:26px}
  .logo-dep{font-size:15px;padding-left:7px}
  .nav-tel{font-size:13px;gap:4px}
  .nav-tel .nav-tel-ico{font-size:12px}
  .nav-btn{padding:11px 16px;font-size:13.5px}
}
/* Sous ~400px, logo + tel + bouton ne tiennent plus sur une ligne (mesuré : largeur
   header incompressible ~381px). Le numéro passe sur sa propre ligne centrée : il
   reste visible (preuve qu'il y a quelqu'un au bout), aucune info sacrifiée. */
@media(max-width:400px){
  .nav{flex-wrap:wrap;row-gap:4px}
  /* min-height:44px OK ici : le tel est seul sur sa ligne pleine largeur, il ne
     contraint plus la hauteur de la barre logo/bouton. (Cible tactile conservée.) */
  .nav-tel{order:3;flex:1 0 100%;justify-content:center;min-height:44px;padding-top:2px}
}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:9999px;padding:16px 30px;cursor:pointer;
  font-family:var(--font-public-inter),sans-serif;font-weight:700;font-size:16.5px;
  text-decoration:none;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.btn.red{background:var(--red);color:#fff;box-shadow:var(--shadow-lg)}
.btn.red:hover{background:var(--red-dark);transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.btn.ghost-light{background:rgba(255,255,255,.10);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn.ghost-light:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--slate4);transform:translateY(-2px)}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn:focus-visible,.nav a:focus-visible,.service-card:focus-visible,.final-card:focus-visible,
.faq-list summary:focus-visible,.trust-row a:focus-visible,.verify-row:focus-visible,
.hero-rating a:focus-visible,.foot a:focus-visible,.source-link:focus-visible,
.founder-copy a:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;border-radius:6px;
}

/* =========================================================
   HERO — photo sombre + H1 Inter 800, comme le réseau
   ========================================================= */
.hero{
  position:relative;color:#fff;text-align:center;
  padding:clamp(56px,7vw,92px) clamp(18px,5vw,72px) clamp(54px,7vw,84px);
  /* Voile double allégé (~22% de moins, demande client : laisser voir l'image).
     Un text-shadow sur le texte compense la lisibilité perdue plutôt qu'un voile épais. */
  background:
    linear-gradient(180deg, rgba(15,23,42,.56) 0%, rgba(15,23,42,.42) 45%, rgba(15,23,42,.56) 100%),
    linear-gradient(90deg, rgba(15,23,42,.60), rgba(15,23,42,.46)),
    url("/hero.webp");
  background-size:cover;background-position:center;
}
/* Ombre portée : garde le texte lisible sur l'image désormais plus visible. */
.hero h1,.hero .lede,.hero .pill{text-shadow:0 2px 14px rgba(8,12,22,.55)}
.hero .pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border:1px solid rgba(255,255,255,.28);border-radius:9999px;
  background:rgba(255,255,255,.10);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:#fff;
}
.hero h1{
  font-family:var(--font-public-inter),sans-serif;font-weight:800;
  font-size:clamp(34px,4.7vw,60px);line-height:1.02;letter-spacing:-.025em;
  margin:22px auto 0;max-width:17em;
}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero .lede{color:var(--slate3);font-size:17px;line-height:1.6;margin:18px auto 0;max-width:46em}
.hero .lede b{color:#fff}
.hero-rating{
  display:inline-flex;align-items:center;gap:9px;margin-top:20px;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.88);
}
.hero-rating .stars{color:var(--yellow);letter-spacing:2px;font-size:15px}
.hero-rating a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.hero-rating .rating-note{opacity:.9}

/* Deux actions : conversion en ligne ou contact local direct. */
.hero-actions{
  display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;justify-content:center;margin:30px auto 0;
  max-width:850px;
}
.hero-actions .btn{min-height:66px;padding:12px 24px;border-radius:16px;text-align:left}
.hero-actions .hero-primary{min-width:min(100%,410px)}
/* Bouton fantôme, pas plein : sur le hero sombre, un aplat blanc contraste 4,8x plus
   que le CTA rouge et capte l'oeil au détriment du quiz. Le téléphone reste offert,
   mais en poids secondaire — hiérarchie, pas suppression. */
.hero-actions .phone-light{
  min-width:min(100%,330px);background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.38);
}
.hero-actions .phone-light:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);transform:translateY(-2px)}
.hero-actions .btn-copy{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.hero-actions .btn-copy strong{font-size:16px}
.hero-actions .btn-copy small{font-size:12px;font-weight:600;opacity:.78}
/* Blanc plein sur #e40134 = 4,82 : seulement 0,32 au-dessus du seuil AA (4,5).
   Le rouge du réseau ne tolère AUCUNE baisse d'opacité (dès .95 -> 4,42 = échec).
   Sur les fonds rouges, on force donc l'opacité pleine. Le bouton fantôme garde
   .78 : il est sur le hero sombre, où la marge est de 15:1. */
.hero-actions .hero-primary .btn-copy small{opacity:1}
.hero-actions .btn-icon{font-size:21px;flex:none}
.hero-actions .arr{font-size:20px;font-weight:800;flex:none}
.hero-reassurance{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;
  margin:16px auto 0;color:var(--slate4);font-size:12.5px;font-weight:600;
}
/* rangée segmentée de services : reprise directe du hero réseau */
.hero-local-services{
  display:flex;justify-content:center;align-items:stretch;max-width:820px;margin:34px auto 0;
  border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.07);
  backdrop-filter:blur(8px);overflow:hidden;
}
.hero-local-services>span{display:flex;flex:1;flex-direction:column;gap:4px;padding:14px 18px}
.hero-local-services>span+span{border-left:1px solid rgba(255,255,255,.16)}
.hero-local-services b{font-size:13.5px}
.hero-local-services small{font-size:11.5px;color:var(--slate4)}
@media(max-width:720px){
  .hero{padding-top:44px;padding-bottom:48px}
  .hero .pill{font-size:11px;padding:7px 12px;letter-spacing:.05em}
  .hero h1{font-size:clamp(31px,9.2vw,38px);margin-top:18px}
  .hero .lede{font-size:15.5px;line-height:1.5;margin-top:15px}
  .hero-rating{display:flex;flex-direction:column;gap:5px;line-height:1.35;margin-top:18px}
  .hero-local-services{align-items:stretch;flex-direction:column;text-align:left}
  .hero-local-services>span{padding:12px 16px}
  .hero-local-services>span+span{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
}

/* Les 2 boutons hero côte à côte ont besoin de ~754px (min-width 410 + 330 + gap).
   Le conteneur ne les atteint que vers 838px : entre 721 et 838, ils se collaient aux
   bords. On empile donc jusqu'à 860px (au-dessus, 774px de contenu > 754 → ça tient). */
@media(max-width:860px){
  .hero-actions{flex-direction:column}
  .hero-actions .btn{width:100%;min-width:0}
}

/* ---------- trust band ---------- */
.trust-band{background:var(--slate05);border-bottom:1px solid var(--line);position:relative}
.trust-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:1200px;margin:0 auto;position:relative;z-index:2;
  padding:clamp(40px,5vw,56px) clamp(18px,5vw,72px);
}
@media(max-width:860px){.trust-row{padding-top:44px;grid-template-columns:1fr 1fr}}
.trust-row>a{
  text-align:center;padding:18px 12px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.trust-row>a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--slate3)}
.trust-row b{display:block;font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:24px;letter-spacing:-.02em}
.trust-row b .stars{color:var(--yellow);font-size:18px;letter-spacing:2px;display:block;margin-bottom:2px}
.trust-row span{font-size:12.5px;color:var(--slate5);font-weight:500}
.trust-row small{display:block;color:var(--red);font-size:10.5px;font-weight:700;margin-top:8px}

/* ---------- têtes de section ----------
   Le réseau annonce ses sections par un simple label rouge en
   capitales (« FAQ », « LE BLOG EXPERT »), sans pastille colorée. */
.head{margin-bottom:clamp(26px,4vw,44px);max-width:720px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.num{
  display:inline-block;font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:14px;
}
.head.center .num{margin-left:auto;margin-right:auto}
.head h2,.section h2{
  font-family:var(--font-public-montserrat),sans-serif;font-weight:600;
  font-size:clamp(26px,3.4vw,48px);line-height:1.04;letter-spacing:-.025em;margin:0;
}
.section h2 em{font-style:normal;color:var(--red)}
.head p.sub{color:var(--slate6);font-size:15.5px;line-height:1.6;margin:14px 0 0}

/* ---------- manifesto (pas votre faute / ennemi) ---------- */
.manifesto-card{
  position:relative;display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(310px,.84fr);
  gap:clamp(26px,4vw,58px);align-items:center;
  border-radius:var(--radius);
  background:var(--ink);
  color:#fff;
  padding:clamp(34px,5vw,64px);box-shadow:var(--shadow-card);
  overflow:hidden;
}
.manifesto-card .num{
  grid-column:1;align-self:end;justify-self:start;
  color:var(--yellow);margin-bottom:0;
}
.manifesto-card h2{
  font-family:var(--font-public-montserrat),sans-serif;font-weight:700;grid-column:1;
  font-size:clamp(28px,4vw,44px);line-height:1.06;letter-spacing:-.025em;margin:0;max-width:15.5em;
}
.manifesto-card h2 em{font-style:normal;color:#ff2b39}
.enemy-chips{
  display:flex;flex-direction:column;gap:0;
  grid-column:2;grid-row:1 / span 2;
  padding:6px 0;border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.enemy-chips span{
  position:relative;padding:18px 0 18px 34px;font-size:14.5px;line-height:1.5;color:var(--slate3);
}
.enemy-chips span+span{border-top:1px solid rgba(255,255,255,.1)}
/* puce ronde rouge, sans double cercle décoratif */
.enemy-chips span::before{
  content:"";position:absolute;left:0;top:22px;width:18px;height:18px;border-radius:50%;
  background:rgba(228,1,52,.9);
}
.enemy-chips b{color:#fff}
@media(max-width:860px){
  .manifesto-card{grid-template-columns:1fr;padding:30px 24px}
  .manifesto-card .num,.manifesto-card h2,.enemy-chips{grid-column:1}
  .enemy-chips{grid-row:auto;margin-top:4px}
}

/* ---------- symptômes ---------- */
.symptom-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.symptom-board article{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:26px 22px 24px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.symptom-board article:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.symptom-board article.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.symptom-board article.dark p{color:var(--slate4)}
.symptom-board .emoji{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;font-size:26px;
  background:var(--slate05);border:1px solid var(--line);
}
.symptom-board article.dark .emoji{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)}
.symptom-board h3{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:16.5px;margin:14px 0 8px;line-height:1.25}
.symptom-board p{margin:0;font-size:14px;line-height:1.55;color:var(--slate5)}
@media(max-width:960px){.symptom-board{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.symptom-board{grid-template-columns:1fr}}

/* ---------- mécanisme « clé en main » ----------
   Le réseau numérote ses étapes 1..4 en rouge, sans icône. */
.system-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,70px);align-items:start}
@media(max-width:860px){.system-wrap{grid-template-columns:1fr}}
.system-intro p{color:var(--slate6);font-size:15.5px;line-height:1.65;margin:16px 0 0;max-width:26em}
.system-intro .accent{font-family:var(--font-public-montserrat),sans-serif;font-weight:800;font-size:19px;color:var(--ink);margin-top:26px}
.system-intro .accent em{font-style:normal;color:var(--red)}
.steps{display:flex;flex-direction:column;gap:0;counter-reset:step}
.step{
  display:flex;gap:18px;align-items:flex-start;padding:22px 0;
  border-bottom:1px solid var(--line);
}
.step:last-child{border-bottom:0}
.step .sn{
  flex:none;width:40px;height:40px;border-radius:9999px;display:grid;place-items:center;
  background:var(--red);color:#fff;
  font-family:var(--font-public-montserrat),sans-serif;font-weight:800;
}
.step .sn::after{
  counter-increment:step;content:counter(step);
  font-size:16px;line-height:1;
}
.step h3{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:17px;margin:9px 0 7px}
.step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--slate5)}
.step p b{color:var(--ink)}

/* ---------- solutions (cartes photo sombres) ---------- */
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.service-card{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;
  display:flex;flex-direction:column;justify-content:flex-end;padding:24px;
  color:#fff;text-decoration:none;border:1px solid var(--line);
  background:var(--ink);
  transition:transform .2s ease,box-shadow .2s ease;
}
.service-card::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,23,42,.15) 20%,rgba(15,23,42,.92));
}
.service-card > :not(.service-image){position:relative;z-index:2}
.service-image{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-xl)}
/* tag rouge uniforme : le réseau n'attribue pas une couleur par métier */
.service-card .tag{
  position:absolute;top:18px;left:18px;background:var(--red);color:#fff;
  border-radius:9999px;padding:6px 13px;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-md);
}
.service-card h3{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:21px;margin:0 0 8px}
.service-card p{margin:0;font-size:14px;line-height:1.55;color:var(--slate3)}
.service-card p b{color:var(--yellow)}
.service-card .go{
  margin-top:16px;display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-weight:700;font-size:13.5px;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  padding:9px 16px;border-radius:9999px;
}
.service-card:hover .go{background:var(--red);border-color:var(--red)}
@media(max-width:860px){.service-grid{grid-template-columns:1fr}}

/* ---------- avis clients réels (Google) ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.review{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:22px 22px 20px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.review:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--slate3)}
.review .rv-stars{color:var(--yellow);letter-spacing:2px;font-size:15px}
.review p{margin:0;font-size:15px;line-height:1.55;color:var(--ink);flex:1}
.review .rv-who{font-size:12.5px;color:var(--slate5);font-weight:500}
.review .rv-who b{color:var(--slate7);font-weight:700}
.review .rv-verif{font-size:11.5px;font-weight:700;color:var(--eco,#1f9d5a)}
@media(max-width:860px){.reviews{grid-template-columns:1fr}}
.verify-lead{color:var(--slate6);font-size:15px;line-height:1.6;margin:0 0 18px;max-width:44em}
.verify-lead b{color:var(--ink)}

/* ---------- bandeau preuve sociale réseau Groupe Verlaine ---------- */
.network-proof{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--ink);color:#fff;
  padding:20px 26px;text-decoration:none;box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.network-proof:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.network-proof .np-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.network-proof .np-text b{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:16.5px}
.network-proof .np-text span{font-size:13.5px;color:var(--slate4)}
.network-proof .np-stats{display:flex;gap:26px;flex:none}
.network-proof .np-stats>span{display:flex;flex-direction:column;line-height:1.1}
.network-proof .np-stats b{font-family:var(--font-public-montserrat),sans-serif;font-weight:800;font-size:22px;color:var(--yellow)}
.network-proof .np-stats small{font-size:11.5px;color:var(--slate4);margin-top:3px}
.network-proof .np-src{flex:none;font-weight:700;font-size:12.5px;color:#fff;opacity:.85}
@media(max-width:640px){
  .network-proof{flex-direction:column;align-items:flex-start;gap:16px}
  .network-proof .np-stats{gap:32px}
}

/* ---------- Vérifiez-nous (liens de preuve tiers) ----------
   Remplace l'ancien .demo-wall (photos réseau étiquetées locales). Liste de liens
   sortants vers des tiers vérifiables ; aucune image, aucune preuve circulaire. */
.verify-list{display:grid;gap:12px;max-width:820px}
.verify-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:18px 20px;box-shadow:var(--shadow-sm);text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.verify-row:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:var(--slate3)}
.verify-row .vr-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.verify-row .vr-main b{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:16px}
.verify-row .vr-main span{font-size:13.5px;line-height:1.5;color:var(--slate6)}
.verify-row .vr-src{
  flex:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  font-weight:700;font-size:12.5px;color:var(--red);
}
.verify-foot{color:var(--slate6);font-size:14.5px;line-height:1.6;margin:22px 2px 0;max-width:46em}
.verify-foot b{color:var(--ink)}
@media(max-width:560px){
  .verify-row{flex-direction:column;align-items:flex-start;gap:10px}
  .verify-row .vr-src{align-self:flex-start}
}

/* ---------- l'agence ---------- */
.founder-card{
  position:relative;display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(20px,4vw,44px);
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:clamp(26px,4vw,44px);align-items:center;box-shadow:var(--shadow-sm);overflow:hidden;
}
.founder-photo{display:block;width:100%;aspect-ratio:4/3;border-radius:16px;border:1px solid var(--line);object-fit:cover;object-position:center}
.founder-copy h2{margin:12px 0 0}
.founder-copy p{color:var(--slate6);font-size:15.5px;line-height:1.65;margin:14px 0 0;max-width:36em}
.founder-copy p b{color:var(--ink)}
.founder-copy a{color:var(--ink);text-underline-offset:3px}
.founder-copy .source-link{display:inline-flex;margin-top:18px;color:var(--red);font-size:13px;font-weight:700}
@media(max-width:760px){.founder-card{grid-template-columns:1fr}}

/* ---------- CTA de milieu de page (après la preuve) ---------- */
.mid-cta{display:flex;justify-content:center;margin:clamp(30px,4vw,44px) 0 0}
.mid-cta .btn{min-height:66px;padding:12px 28px;border-radius:16px;text-align:left}
.mid-cta .btn-copy{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.mid-cta .btn-copy strong{font-size:16px}
.mid-cta .btn-copy small{font-size:12px;font-weight:600;opacity:1}   /* fond rouge : cf. marge 4,82 */
.mid-cta .arr{font-size:20px;font-weight:800;flex:none}
@media(max-width:560px){.mid-cta .btn{width:100%}}

/* ---------- aides 2026 ---------- */
.aides-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.aides-grid article{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  padding:24px;box-shadow:var(--shadow-sm);
}
.aides-grid article.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.aides-grid article.dark p{color:var(--slate4)}
.aides-grid article.dark b{color:var(--yellow)}
.aides-grid h3{font-family:var(--font-public-montserrat),sans-serif;font-weight:700;font-size:16.5px;margin:0 0 10px;line-height:1.3}
.aides-grid p{margin:0;font-size:14.5px;line-height:1.6;color:var(--slate6)}
.aides-grid p b{color:var(--ink)}
.aides-note{color:var(--slate5);font-size:13px;margin:18px 2px 0}
@media(max-width:860px){.aides-grid{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq-wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:860px){.faq-wrap{grid-template-columns:1fr}}
.faq-list{display:grid;gap:12px}
.faq-list details{
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
  box-shadow:var(--shadow-sm);overflow:hidden;
}
.faq-list details[open]{border-color:var(--slate3)}
.faq-list summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:var(--font-public-inter),sans-serif;font-weight:700;font-size:15px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.faq-list details[open] summary{color:var(--red)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"+";flex:none;width:28px;height:28px;border-radius:50%;
  background:var(--slate1);color:var(--slate6);display:grid;place-items:center;
  font-size:17px;font-weight:700;
}
.faq-list details[open] summary::after{content:"−";background:var(--red);color:#fff}
.faq-list p{margin:0;padding:0 24px 22px;color:var(--slate6);font-size:14.5px;line-height:1.65}

/* ---------- close final (repositionné bénéfice) ---------- */
.final{background:var(--slate1);border-top:1px solid var(--slate2);position:relative}
.final .head h2{max-width:18em;margin-left:auto;margin-right:auto}
.final .head .sub{max-width:40em;margin-left:auto;margin-right:auto}
/* Deux CTA centrés (même grammaire visuelle que le hero, sur fond clair). */
.final-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:clamp(26px,4vw,38px) auto 0;max-width:760px}
.final-cta .btn{min-height:66px;padding:12px 26px;border-radius:16px;text-align:left;min-width:min(100%,340px)}
.final-cta .btn-copy{display:flex;flex-direction:column;gap:3px;line-height:1.2}
.final-cta .btn-copy strong{font-size:16px}
.final-cta .btn-copy small{font-size:12px;font-weight:600}
.final-cta .btn.red .btn-copy small{opacity:1}          /* blanc sur #e40134 : opacité pleine */
.final-cta .arr{font-size:20px;font-weight:800;flex:none}
.final-cta .btn-icon{font-size:21px;flex:none}
/* Bouton téléphone pour fond CLAIR (≠ .phone-light qui est pour le hero sombre). */
.btn.phone-dark{background:#fff;color:var(--ink);border:1.5px solid var(--slate2);box-shadow:var(--shadow-sm)}
.btn.phone-dark:hover{border-color:var(--slate4);transform:translateY(-2px)}
.btn.phone-dark .btn-copy small{color:var(--slate5)}
@media(max-width:560px){.final-cta .btn{width:100%;min-width:0}}
.final-push{color:var(--slate6);font-size:14px;line-height:1.6;text-align:center;margin:28px auto 0;max-width:40em}
.final-push b{color:var(--red)}

/* ---------- zone SEO ---------- */
.zone{background:var(--ink);color:#fff;position:relative}
.zone .section{position:relative;z-index:2;text-align:center;max-width:960px}
.zone .num{color:var(--yellow)}
.zone h2{font-family:var(--font-public-montserrat),sans-serif;font-size:clamp(22px,2.8vw,30px);color:#fff;font-weight:700}
.zone .zone-sub{color:var(--slate4);font-size:15px;line-height:1.6;margin:14px auto 24px;max-width:44em}
.zone .zone-sub b{color:var(--yellow)}
.communes{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.communes span{
  border:1px solid rgba(255,255,255,.16);border-radius:9999px;background:rgba(255,255,255,.06);
  padding:8px 14px;font-size:13px;font-weight:600;color:#fff;
}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--slate4);position:relative;z-index:1}
.foot-inner{
  max-width:1200px;margin:0 auto;padding:48px clamp(18px,5vw,72px) 10px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
/* Footer sombre : le réseau passe ce même PNG en blanc par filtre CSS
   (brightness-0 invert sur groupeverlaine.com). On reprend le procédé. */
.foot .logo-img{filter:brightness(0) invert(1);opacity:.92}
.foot .logo-dep{color:#fff;border-left-color:rgba(255,255,255,.3)}
.foot-tag{color:var(--slate4);font-size:14px;margin:0;flex:1;min-width:220px}
.foot-cta{font-size:14px;padding:13px 26px;min-height:44px}   /* cible tactile */
.foot-nap{
  max-width:1200px;margin:0 auto;padding:8px clamp(18px,5vw,72px);
  display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--slate4);
}
.foot-nap a{color:#fff;font-weight:600;text-decoration:none}
.foot-mini{
  max-width:1200px;margin:0 auto;padding:14px clamp(18px,5vw,72px) 34px;
  font-size:12px;color:var(--slate5);
}
.foot-mini a{color:inherit}

/* ---------- action mobile persistante ---------- */
.mobile-cta{display:none}
@media(max-width:720px){
  body:has(.mobile-cta){padding-bottom:84px}
  .mobile-cta{
    position:fixed;display:flex;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:80;gap:8px;padding:8px;border:1px solid var(--line);border-radius:18px;
    background:rgba(255,255,255,.96);box-shadow:var(--shadow-xl);backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .mobile-cta.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .mobile-cta-main{display:flex;flex:1;flex-direction:column;justify-content:center;background:var(--red);color:#fff;text-decoration:none;border-radius:12px;padding:10px 15px;line-height:1.15}
  .mobile-cta-main b{font-size:14px}.mobile-cta-main small{font-size:10px;margin-top:3px;opacity:1}   /* fond rouge : cf. marge 4,82 */
  .mobile-cta-phone{display:grid;place-items:center;width:50px;border-radius:12px;background:var(--ink);color:#fff;text-decoration:none;font-size:20px}
}