/* ============================================================
   REFONTE clim69.fr — système visuel "Plumbing" (Designbuds)
   (v3, 2026-07-12 — remplace le système néo-brutaliste du 05/07)
   Bleu roi + jaune, pilules, cartes douces arrondies, footer bleu nuit.
   Police : Plus Jakarta Sans (Google Fonts, liée depuis le head de chaque page)
   ============================================================ */

:root{
  --ink:#141824;
  --bleu:#2264ab;          /* bleu ciel (primaire, côté froid) */
  --bleu-deep:#163f7a;     /* bas du dégradé hero / sections profondes */
  --bleu-nuit:#0f1e44;     /* footer & blocs sombres */
  --bleu-pale:#eef4fb;     /* sections claires alternées */
  --ambre:#e8944d;         /* CHAUD — accent unique : CTA, PAC, urgence, voyant logo */
  --ambre-d:#d97e38;       /* ambre foncé — hover / urgence */
  --blanc:#ffffff;
  --gris:#586074;          /* texte atténué */
  --line:#e5e9f2;          /* filets / bordures douces */
  --err:#e5484d;           /* erreurs formulaire */
  --shadow-s:0 8px 24px rgba(20,40,90,.07);
  --shadow-m:0 12px 34px rgba(20,40,90,.10);
  --shadow-l:0 22px 50px rgba(20,45,110,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Fallback métrique-ajusté (évite le décalage CLS au chargement de Plus Jakarta Sans) */
@font-face{font-family:"Jakarta Fallback";src:local("Arial");ascent-override:96.88%;descent-override:25.12%;line-gap-override:0%;size-adjust:100.24%}
body{font-family:'Plus Jakarta Sans','Jakarta Fallback',system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bleu-pale);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
[id]{scroll-margin-top:92px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--ambre);color:var(--ink);font-weight:800;padding:12px 20px;border-radius:0 0 12px 0;z-index:200}
.skip-link:focus{left:0}

/* ============ HEADER (100% transparent — seule la pill de nav est opaque) ============ */
header{background:transparent;position:fixed;top:0;left:0;right:0;z-index:50}
.nav-home{display:inline-flex;align-items:center;justify-content:center}
.nav-home svg{width:21px;height:21px;display:block}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{font-weight:800;font-size:24px;letter-spacing:-.5px;text-decoration:none;color:#fff;display:flex;align-items:center;gap:8px}
.logo-mark{height:62px;width:auto;display:block}
nav.mainnav{display:flex;gap:2px;background:var(--bleu);border-radius:999px;padding:5px;box-shadow:0 8px 24px rgba(15,30,68,.22)}
nav.mainnav a{font-weight:600;font-size:15px;color:#fff;text-decoration:none;padding:9px 17px;border-radius:999px;transition:background .15s ease,color .15s ease}
nav.mainnav a:hover{background:rgba(255,255,255,.16)}
nav.mainnav a[aria-current="page"]{background:#fff;color:var(--bleu)}
.tel{background:var(--ambre);color:var(--ink);font-weight:700;font-size:15.5px;padding:12px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:transform .15s ease,background .15s ease;display:inline-flex;align-items:center;gap:8px}
.tel:hover{background:var(--ambre-d);transform:translateY(-1px)}
/* Rond parfait, calé sur .wa-header (46x46) : le numéro est déjà masqué
   (.tm-txt), donc une largeur fixe évite l'ovale 51x46 d'avant. */
.tel-mini{display:none;background:var(--ambre);color:var(--ink);border-radius:999px;width:46px;height:46px;padding:0;align-items:center;justify-content:center;gap:0;flex:none;text-decoration:none;font-weight:700;font-size:14.5px}
.tel-mini svg{width:21px;height:21px;display:block}
.tel-mini .tm-txt{display:none}
.burger{display:none;background:#fff;border:0;border-radius:12px;width:46px;height:46px;flex:none;align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;box-shadow:0 6px 18px rgba(15,30,68,.20);transition:background .2s ease}
.burger span{display:block;width:20px;height:2.5px;background:var(--bleu-nuit);border-radius:2px;transition:background .2s ease}
/* Burger adaptatif : boîte bleu nuit + traits blancs sur fond clair (au scroll) */
header.scrolled .burger{background:var(--bleu-nuit)}
header.scrolled .burger span{background:#fff}
/* Menu ouvert (header bleu nuit) : boîte blanche + traits foncés (prioritaire) */
header:has(.navpanel.open) .burger{background:#fff}
header:has(.navpanel.open) .burger span{background:var(--bleu-nuit)}
.navpanel{display:none;background:#fff;flex-direction:column;padding:6px 0 10px;box-shadow:0 18px 34px rgba(15,30,68,.22)}
.navpanel.open{display:flex}
.navpanel a{padding:15px 22px;font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.navpanel a:last-child{border-bottom:0}
.navpanel a[aria-current="page"]{color:var(--bleu);background:var(--bleu-pale)}
.navpanel .nav-home{display:flex;justify-content:flex-start;align-items:center;gap:12px}
.navpanel .nav-home::after{content:"Accueil";font-weight:700}
/* Header solide (bleu nuit) quand le menu mobile est ouvert */
header:has(.navpanel.open){background:var(--bleu-nuit)}
@media(max-width:900px){
  nav.mainnav{display:none}
  .tel{display:none}
  .tel-mini{display:inline-flex}
  .burger{display:flex}
  .logo-mark{height:46px}
  .header-in{padding:11px 0;gap:10px}
}

/* ============ HERO (bleu roi pleine largeur + grille discrète) ============ */
/* Photo de fond retiree le 19/07 (demande operateur) : elle etait noyee sous
   un voile a 78-92% d'opacite, donc invisible, et coutait 24 Ko + un preload
   en priorite haute sur 5 pages. Degrade plein, memes teintes qu'avant. */
.hero{max-width:none;padding:132px 24px 96px;text-align:center;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#143a73 0%,#0f1e44 100%)}
/* voile chaud (ambre, haut-gauche) + froid (bleu, bas-droite) = clim réversible */
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(780px 480px at 10% -12%,rgba(232,148,77,.42),transparent 56%),
            radial-gradient(760px 520px at 94% 118%,rgba(46,144,180,.32),transparent 60%)}
.hero>*{position:relative;z-index:1}
.meteo{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 18px;font-weight:600;font-size:14.5px;color:#fff;backdrop-filter:blur(4px)}
.hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.05;letter-spacing:-1.6px;font-weight:800;margin:24px auto 16px;max-width:19ch;color:#fff}
.hero h1 mark{background:transparent;color:var(--ambre)}
.hero .lead{font-size:18.5px;color:rgba(255,255,255,.80);max-width:56ch;margin:0 auto;font-weight:400}
.cta-row{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero-points{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap;list-style:none}
.hero-points li{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;color:#fff}

/* ============ BOUTONS (pilules) ============ */
.btn{font-weight:700;font-size:16px;padding:15px 27px;border:0;border-radius:999px;text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;color:var(--ink);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:none;box-shadow:0 8px 20px rgba(20,40,90,.12)}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,40,90,.18)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:3px solid var(--ambre);outline-offset:3px}
.btn-b{background:var(--bleu);color:#fff}
.btn-b:hover{background:#163f7a}
.btn-j{background:var(--ambre);color:var(--ink)}
.btn-j:hover{background:var(--ambre-d)}
.btn-w{background:#fff;color:var(--ink)}
.btn-urgence{background:var(--ambre-d);color:var(--ink)}
.btn-block{width:100%;justify-content:center}
/* CTA hero : primaire jaune, secondaire blanc, sur fond bleu */
.hero .btn-b{background:var(--ambre);color:var(--ink)}
.hero .btn-b:hover{background:var(--ambre-d)}
.hero .btn-w{background:#fff;color:var(--ink)}
/* Bouton d'appel structuré (label + numéro) */
.btn-call{flex-direction:column;gap:1px;line-height:1.15;padding-top:12px;padding-bottom:12px}
.btn-call .bc-top{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.9}
.btn-call .bc-num{font-size:20px;font-weight:800;letter-spacing:.3px}
@media(max-width:640px){.btn-call .bc-num{font-size:19px}}

/* ============ SECTIONS ============ */
section{padding:66px 0}
@media(max-width:640px){section{padding:42px 0}}
.sec-blanc{background:var(--bleu-pale)}
.sec-jaune{background:#eef4fb}
h2{font-size:clamp(26px,3.7vw,38px);letter-spacing:-1.1px;line-height:1.12;font-weight:800;color:var(--ink)}
.sub{color:var(--gris);font-size:17px;margin:12px 0 34px;max-width:60ch}
.eyebrow{display:inline-block;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--bleu);margin-bottom:8px}

/* ============ CARTES SERVICE / ROUTAGE ============ */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.service{background:#fff;border:0;border-radius:20px;padding:26px;box-shadow:var(--shadow-s);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.service.fond-bleu{background:linear-gradient(160deg,#2264ab,var(--bleu-deep));color:#fff}
.service.fond-bleu .s-desc{color:rgba(255,255,255,.82)}
.service.fond-jaune{background:linear-gradient(160deg,#e8944d,var(--ambre-d));color:#fff}
.service.fond-jaune .s-desc{color:rgba(255,255,255,.85)}
.service.fond-jaune .s-cta{color:#fff}
.service.fond-jaune .badge{background:rgba(255,255,255,.18);color:#fff}
a.service:hover{transform:translateY(-5px);box-shadow:var(--shadow-m)}
.service h3{font-size:20px;font-weight:800;letter-spacing:-.3px}
.s-desc{font-size:15px;color:var(--gris);margin-top:8px;flex:1}
.badge{align-self:flex-start;background:var(--ambre);color:#fff;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;border-radius:999px;padding:5px 13px;margin-bottom:14px}
.service.fond-bleu .badge{background:rgba(255,255,255,.16);color:#fff}
.s-cta{margin-top:18px;font-weight:800;font-size:14.5px;color:var(--bleu)}
.service.fond-bleu .s-cta{color:var(--ambre)}

/* ============ ÉTAPES ============ */
.etapes{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;counter-reset:e;margin-bottom:34px}
.etape{background:#fff;border:0;border-radius:20px;padding:26px;counter-increment:e;box-shadow:var(--shadow-s)}
.etape::before{content:counter(e);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-size:19px;margin-bottom:16px}
.etape h3{font-size:18px;font-weight:800}
.etape p{font-size:14.5px;color:var(--gris);margin-top:6px}

/* ============ ARGUMENTS ============ */
.args{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.arg{background:#fff;border:0;border-radius:20px;padding:26px;box-shadow:var(--shadow-s)}
.arg-ic{width:52px;height:52px;border-radius:50%;background:var(--bleu);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.arg-ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.arg-ic--logo{width:auto;height:auto;min-height:52px;border-radius:16px;padding:10px 14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.arg-ic--logo img{height:32px;width:auto;display:block}
.arg h3{font-size:17.5px;font-weight:800;margin-bottom:5px}
.arg p{font-size:14.5px;color:var(--gris)}

/* ============ MARQUES (bandeau défilant sur plaque blanche) ============ */
.brands-box{background:#fff;border-radius:16px;box-shadow:var(--shadow-s);max-width:1080px;margin-left:auto;margin-right:auto;padding:0;overflow-x:auto;overflow-y:hidden;cursor:grab;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.brands-box::-webkit-scrollbar{display:none}
.brands-box.is-grabbing{cursor:grabbing}
.brands-box .brand-logo{-webkit-user-select:none;user-select:none}
.brands-box img{pointer-events:none;-webkit-user-drag:none}
.brands-track{display:flex;width:max-content}
.brands-set{display:flex;align-items:center;gap:36px;padding:16px 26px;flex:none}
.brand-logo{height:30px;width:86px;padding:0;display:flex;align-items:center;justify-content:center;flex:none}
.brand-logo img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;transition:transform .2s ease}
.brand-logo:hover img{transform:scale(1.08)}
.brands-more{font-size:14px;color:var(--gris);font-weight:600}
@media(max-width:680px){.brand-logo{height:24px;width:66px}}

/* ============ AVIS ============ */
.note-globale{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:16px}
.note-globale .gros{font-size:44px;font-weight:800;letter-spacing:-2px;color:var(--ink)}
.note-globale .etoiles{color:#e8944d;font-size:22px;letter-spacing:3px}
.note-globale .qui{font-size:14.5px;color:var(--gris);font-weight:600}
.avis-google-cta{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:var(--bleu);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px;margin-bottom:26px}
.avis-google-cta:hover{border-color:var(--bleu)}
.avis-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.avis{background:#fff;border:0;border-radius:18px;padding:24px;box-shadow:var(--shadow-s);display:block;text-decoration:none;color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
.avis:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.avis p{font-size:15.5px;font-weight:500;line-height:1.55}
.avis .qui{font-size:13.5px;color:var(--gris);margin-top:12px;font-weight:700}
@media(min-width:880px){.avis-grille--2col{grid-template-columns:repeat(2,1fr)}}

/* ============ ZONE D'INTERVENTION ============ */
.zones{font-size:16.5px;line-height:2.1}
.zones b{background:var(--bleu-pale);color:var(--bleu);padding:1px 8px;border-radius:6px;font-weight:800}
.zones-intro{text-align:center;max-width:56ch;margin:12px auto 0;color:var(--gris);font-size:16.5px}
.zones-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
.zone-chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600;font-size:14px;box-shadow:0 3px 10px rgba(20,40,90,.04)}
.zone-chip--plus{background:var(--ambre);border-color:transparent;font-weight:800}

/* ============ BANDEAU FIN (CTA bleu) ============ */
.fin{background:radial-gradient(700px 300px at 80% -30%,rgba(120,175,255,.28),transparent 60%),linear-gradient(160deg,#2264ab,var(--bleu-deep));border:0;border-radius:26px;box-shadow:var(--shadow-l);padding:46px 40px;text-align:center;color:#fff;margin:60px 0}
.fin h2{color:#fff;max-width:24ch;margin:0 auto}
.fin p{color:rgba(255,255,255,.82);margin:12px 0 26px;font-size:16.5px}
.fin .btn-j{font-size:18px;padding:16px 34px}

/* ============ FOOTER (bleu nuit) ============ */
footer.site-footer{background:var(--bleu-nuit);color:#fff;padding:52px 0 0;margin-top:64px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:36px}
.ft-brand{font-size:20px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ft-grid p{font-size:14.5px;color:rgba(255,255,255,.66);line-height:1.65}
.ft-col h3{font-size:12.5px;text-transform:uppercase;letter-spacing:1.4px;color:var(--ambre);margin-bottom:16px;font-weight:800}
.ft-col a{display:block;font-size:15px;color:rgba(255,255,255,.86);text-decoration:none;margin-bottom:11px;font-weight:500}
.ft-col a:hover{color:var(--ambre)}
.ft-tel{display:inline-flex;align-items:center;gap:8px;background:var(--ambre);color:var(--ink) !important;font-weight:800;font-size:16px;padding:11px 20px;border-radius:999px;margin-bottom:14px;transition:background .15s ease}
.ft-tel:hover{background:var(--ambre-d);color:var(--ink) !important}
.ft-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13.5px;color:rgba(255,255,255,.55);font-weight:500}
.ft-bottom a{color:rgba(255,255,255,.7);text-decoration:underline}
.ft-credit a{color:rgba(255,255,255,.66)}
.ft-credit a:hover{color:var(--ambre)}
@media(max-width:760px){
  footer.site-footer{padding-top:40px}
  .ft-grid{grid-template-columns:1fr 1fr;gap:30px 22px}
  .ft-grid>div:first-child{grid-column:1 / -1}
  .ft-bottom{flex-direction:column;align-items:flex-start;gap:8px}
}
@media(max-width:440px){.ft-grid{grid-template-columns:1fr}}

/* ============ BARRE STICKY MOBILE (appel) ============ */
.barre{position:fixed;left:12px;right:12px;bottom:12px;display:none;background:var(--ambre);color:var(--ink);border:0;border-radius:999px;font-weight:800;font-size:16.5px;text-align:center;padding:15px 16px;text-decoration:none;z-index:80;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px rgba(20,40,90,.22)}
.barre:active{transform:translateY(2px)}
@media(max-width:640px){.barre{display:flex}}
@media(max-width:640px){body.has-barre{padding-bottom:86px}}

/* ====== LA BANNIÈRE D'APPEL SE REPLIE EN PASTILLE AU SCROLL (mobile) ====== */
/* Départ : grosse bannière « appel direct » pleine largeur, numéro visible.
   Après ~140 px de scroll : pastille ronde flottante, icône seule, sans le
   numéro. Le pouce garde l'appel à portée sans que la barre mange l'écran. */
.barre{bottom:calc(12px + env(safe-area-inset-bottom,0px));overflow:hidden;white-space:nowrap;
  transition:left .28s cubic-bezier(.4,0,.2,1),right .28s cubic-bezier(.4,0,.2,1),
             width .28s cubic-bezier(.4,0,.2,1),height .28s cubic-bezier(.4,0,.2,1),
             padding .28s cubic-bezier(.4,0,.2,1)}
.barre svg{width:21px;height:21px;flex:none;display:block}
.barre .b-txt{max-width:280px;opacity:1;overflow:hidden;
  transition:opacity .16s ease,max-width .28s cubic-bezier(.4,0,.2,1)}
body.barre-mini .barre{left:auto;right:14px;width:58px;height:58px;padding:0;gap:0}
body.barre-mini .barre .b-txt{max-width:0;opacity:0}
body.barre-mini .barre svg{width:25px;height:25px}
@media(max-width:640px){body.has-barre.barre-mini{padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.barre,.barre .b-txt,body.has-barre{transition:none}}

/* ============ ANCRES : atterrir juste sous le header ============ */
/* Le header fixe mesure 74 px (padding 14+14 + contenu 46). L'ancien réglage
   à 92 px laissait un trou, et surtout #formulaire est posé sur la <section> :
   on atterrissait sur le titre, pas sur les champs. On resserre la section et
   le formulaire en mobile pour que l'ensemble tienne dans un écran. */
[id]{scroll-margin-top:80px}
@media(max-width:640px){
  #formulaire{padding-top:26px}
  #formulaire h2{font-size:25px;line-height:1.15;margin-bottom:4px}
  #formulaire .sub{font-size:15px;margin-bottom:14px}
  .form-card{padding:20px 18px;border-radius:18px}
  .field{margin-bottom:12px;gap:4px}
  .field input,.field select{height:48px}
  .field textarea{min-height:76px}
}

/* ====== CHAMPS OPTIONNELS REPLIÉS EN MOBILE ====== */
/* Nom + téléphone suffisent à rappeler. Le reste est masqué derrière un lien
   pour que le bouton d'envoi soit visible sans scroller. Groupé par ui.js,
   donc aucun balisage à maintenir page par page. */
.form-more-toggle{display:none}
@media(max-width:640px){
  .form-more:not(.open){display:none}
  .form-more-toggle{display:inline-flex;align-items:center;gap:7px;margin:0 0 14px;padding:0;
    background:none;border:0;font:inherit;font-size:14.5px;font-weight:700;
    color:var(--bleu);cursor:pointer;text-decoration:underline}
  .form-more-toggle::before{content:"+";font-size:18px;line-height:1;font-weight:800}
  .form-more-toggle.open::before{content:"−"}
}

/* ============ RESPIRATION : sections moins espacées en mobile ============ */
@media(max-width:640px){
  section{padding:34px 0}
  .hero{padding:104px 20px 60px}
  .hero h1{margin:18px auto 12px}
  .hero .lead{font-size:17px}
  .cta-row{margin-top:22px}
  .hero-points{margin-top:18px}
}

/* ============ BARRE DE CONFIANCE (hero) ============ */
/* Preuve sociale compacte, juste sous le CTA, pour être vue sans scroller. */
.trust-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;list-style:none;margin:20px 0 0;padding:0;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.86)}
.trust-bar li{display:inline-flex;align-items:center;gap:7px}
.trust-bar .tb-note{font-size:17.5px;font-weight:800;color:#fff}
.trust-bar .tb-stars{color:#ffc65c;letter-spacing:1.5px}
@media(max-width:640px){.trust-bar{gap:5px 12px;font-size:13px;margin-top:16px}.trust-bar .tb-note{font-size:16px}}

/* ============ ACTIONS HEADER (WhatsApp + téléphone groupés à droite) ============ */
.header-actions{display:flex;align-items:center;gap:10px}
.wa-header{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:999px;background:#25D366;text-decoration:none;transition:transform .15s ease,background .15s ease}
.wa-header:hover{background:#20b558;transform:translateY(-1px)}
.wa-header:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wa-header svg{width:25px;height:25px;display:block}

/* ============ FORMULAIRE ============ */
.form-card{background:#fff;border:0;border-radius:22px;padding:30px;box-shadow:var(--shadow-m)}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:14px;font-weight:700;color:var(--ink)}
.field label small{font-weight:500;color:var(--gris);font-size:13px}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:16px;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;background:#fff;padding:0 15px;height:52px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586074' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:18px;padding-right:42px}
.field textarea{height:auto;min-height:100px;padding:13px 15px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--bleu);box-shadow:0 0 0 4px rgba(29,84,214,.12)}
.field.is-error input{border-color:var(--err)}
.field-msg{display:none;font-size:13.5px;font-weight:600;color:var(--err)}
.field.is-error .field-msg{display:block}
.form-sub{font-size:13px;color:var(--gris);text-align:center;margin-top:8px}
.form-success{display:none;text-align:center;padding:20px 0}
.form-success.show{display:block}
.form-success svg{width:54px;height:54px;margin:0 auto 12px;display:block}
.form-success .ck-circle{fill:none;stroke:#1b9e5a;stroke-width:3}
.form-success .ck{fill:none;stroke:#1b9e5a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.form-success p{font-weight:700}

/* ============ PAGE MERCI (confirmation formulaire) ============ */
.merci{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:150px 24px 70px}
.merci-card{background:#fff;border-radius:24px;box-shadow:var(--shadow-m);max-width:600px;width:100%;text-align:center;padding:48px 40px}
.merci-check{width:78px;height:78px;margin:0 auto 20px;display:block}
.merci-check circle{fill:none;stroke:#1b9e5a;stroke-width:3}
.merci-check path{fill:none;stroke:#1b9e5a;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.merci-card h1{font-size:clamp(26px,4vw,34px);letter-spacing:-1px;line-height:1.15;color:var(--ink);font-weight:800}
.merci-lead{color:var(--gris);font-size:17px;margin:14px auto 26px;max-width:46ch;line-height:1.6}
.merci .cta-row{margin-top:0}
.merci-steps{list-style:none;counter-reset:m;text-align:left;max-width:430px;margin:30px auto 0;display:flex;flex-direction:column;gap:14px}
.merci-steps li{counter-increment:m;display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:500;color:var(--ink)}
.merci-steps li::before{content:counter(m);flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-size:14px}
@media(max-width:640px){.merci{padding:112px 18px 60px}.merci-card{padding:34px 22px}}

/* ============ FAQ ============ */
.faq-list{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.faq-item[open]{box-shadow:var(--shadow-s)}
.faq-item summary{padding:19px 22px;font-weight:700;font-size:16.5px;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:23px;font-weight:700;flex:none;color:var(--bleu);transition:transform .18s ease}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 22px 20px;font-size:15px;color:var(--gris);line-height:1.65}
.faq-item p a{color:var(--bleu);font-weight:700}

/* ============ BANDEAU STATS (bleu) ============ */
.stats-band{background:radial-gradient(600px 260px at 85% -40%,rgba(120,175,255,.26),transparent 60%),linear-gradient(160deg,#2264ab,var(--bleu-deep));border:0;border-radius:24px;box-shadow:var(--shadow-l);padding:34px 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;color:#fff;text-align:center;margin-top:40px}
.stat .num{display:block;font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1.1}
.stat .lbl{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:rgba(255,255,255,.78);margin-top:6px}

/* ============ FORMULAIRE 2 COLONNES ============ */
.form-duo{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
@media(max-width:880px){.form-duo{grid-template-columns:1fr}}
.form-aside{display:flex;flex-direction:column;gap:20px}
.aside-card{background:#fff;border:0;border-radius:18px;padding:24px;box-shadow:var(--shadow-s)}
.aside-card h3{font-size:17.5px;font-weight:800;margin-bottom:8px}
.aside-card p{font-size:14.5px;color:var(--gris);margin-bottom:14px}
.aside-card .btn{width:100%;justify-content:center}
.aside-card--call{background:radial-gradient(500px 220px at 80% -40%,rgba(120,175,255,.26),transparent 60%),linear-gradient(160deg,#2264ab,var(--bleu-deep));color:#fff}
.aside-card--call h3{color:#fff}
.aside-card--call p{color:rgba(255,255,255,.82)}
.mini-steps{list-style:none;counter-reset:ms;display:flex;flex-direction:column;gap:12px}
.mini-steps li{counter-increment:ms;display:flex;align-items:flex-start;gap:12px;font-size:14.5px;font-weight:500}
.mini-steps li::before{content:counter(ms);flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-size:14px}
.aside-badges{display:flex;flex-wrap:wrap;gap:8px}
.aside-badges span{background:var(--bleu-pale);color:var(--ink);border:0;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px}

/* ============ REVEAL AU SCROLL ============ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ============ CARROUSEL AVIS (marquee défilant) ============ */
.avis-carousel{position:relative}
.avis-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:8px 4px 16px;scrollbar-width:none}
.avis-track::-webkit-scrollbar{display:none}
.avis-track .avis{flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column}
@media(max-width:680px){.avis-track .avis{flex:0 0 82%}}
.avis-track .avis:nth-child(odd),.avis-track .avis:nth-child(even){transform:none}
.avis-track .avis:hover{transform:translateY(-4px)}
.avis--dark{background:linear-gradient(160deg,#2264ab,var(--bleu-deep));color:#fff}
.avis--dark p,.avis--dark .qui{color:#fff}
.avis--dark .avis-tag{color:rgba(255,255,255,.75)}
.avis--pale{background:var(--bleu-pale)}
.stars{color:#e8944d;letter-spacing:3px;font-size:15px;margin-bottom:10px}
.avis--dark .stars{color:var(--ambre)}
.avis-meta{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:16px}
.avis-meta .qui{margin-top:0}
.avis-tag{font-size:12px;color:var(--gris);font-weight:600;margin-top:2px}
.voir-avis{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--bleu-pale);color:var(--bleu);border:0;border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800}
.avis--dark .voir-avis{background:var(--ambre);color:var(--ink)}
.car-nav{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:18px}
.car-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:0;box-shadow:var(--shadow-m);font-size:17px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;color:var(--bleu)}
.car-btn:hover{background:var(--bleu);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-l)}
.car-dots{display:flex;gap:7px}
.car-dots span{width:9px;height:9px;border-radius:99px;background:rgba(34,100,171,.30);transition:width .2s ease,background .2s ease}
.car-dots span.on{background:var(--bleu);width:24px}

/* ============ AVIS EN BOUCLE — marquee (35 avis Google) ============ */
.avis-marquee{position:relative;margin-top:12px}
.avis-mtrack{display:flex;gap:20px;overflow-x:auto;cursor:grab;user-select:none;-webkit-user-select:none;padding:10px 4px 22px;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.avis-mtrack::-webkit-scrollbar{display:none}
.avis-mtrack.is-grabbing{cursor:grabbing}
.avis-mtrack a{-webkit-user-drag:none}
.avis-marquee .avis{flex:0 0 320px;width:320px;scroll-snap-align:start;display:flex;flex-direction:column;min-height:238px;position:relative}
.avis-marquee .avis::after{content:"";position:absolute;top:20px;right:22px;width:20px;height:20px;background:url('/images/google-g.svg') center/contain no-repeat;opacity:.95;pointer-events:none}
.avis-marquee .avis p{padding-right:16px}
.avis-marquee .avis p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.avis-marquee .car-nav{margin-top:16px}
@media(max-width:640px){.avis-marquee .avis{flex-basis:80vw;width:80vw;max-width:330px}}

/* ============ ZONE D'INTERVENTION : ruban animé de communes ============ */
.zones-marquee{margin-top:26px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.zm-row{display:flex;width:max-content}
.zm-set{display:flex;gap:10px;padding-right:10px;flex:none}
.zm-set .zone-chip{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;padding:8px 16px;box-shadow:none}
.zm-set .zone-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bleu);flex:none}
.zones-plus{text-align:center;margin-top:18px}
.zones-plus .zone-chip{font-size:14px;padding:9px 18px}

/* ============ CARTE ARTISAN ============ */
.artisan-card{background:#fff;border:0;border-radius:20px;box-shadow:var(--shadow-m);padding:28px 30px;max-width:820px;margin-top:8px}
.artisan-badge{display:inline-flex;align-items:center;gap:8px;background:var(--bleu-pale);color:var(--bleu);border:0;border-radius:999px;padding:7px 15px;font-weight:800;font-size:13.5px;margin-bottom:16px}
.artisan-lead{font-size:19px;font-weight:600;color:var(--ink);line-height:1.45;letter-spacing:-.2px}
.artisan-body{font-size:15.5px;color:var(--gris);line-height:1.7;margin-top:14px}
.artisan-body b{color:var(--ink);background:linear-gradient(transparent 60%,var(--ambre) 0);padding:0 2px}
@media(max-width:640px){.artisan-card{padding:24px 22px}.artisan-lead{font-size:17.5px}}

/* ============ GRILLE SYMPTÔMES (dépannage) ============ */
.sympt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:6px 0 22px}
.sympt{background:#fff;border:0;border-radius:16px;box-shadow:var(--shadow-s);padding:18px;display:flex;flex-direction:column;gap:2px;transition:transform .18s ease,box-shadow .18s ease}
.sympt:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.sympt .sy-ic{font-size:24px;line-height:1;margin-bottom:8px}
.sympt b{font-size:15px;font-weight:800;letter-spacing:-.2px}
.sympt span{font-size:13px;color:var(--gris);font-weight:500}
@media(max-width:640px){.sympt-grid{grid-template-columns:1fr 1fr;gap:11px}.sympt{padding:15px 14px}.sympt .sy-ic{font-size:21px}}

/* ============ BLOC ÉDITORIAL ============ */
.prose-rich{background:#fff;border:0;border-radius:18px;box-shadow:var(--shadow-s);padding:30px 34px;margin-top:6px;columns:2;column-gap:46px}
.prose-rich p{font-size:15.5px;color:var(--gris);line-height:1.7;break-inside:avoid;margin:0 0 16px}
.prose-rich p:last-child{margin-bottom:0}
.prose-rich b{color:var(--ink);background:linear-gradient(transparent 60%,var(--ambre) 0);padding:0 2px;font-weight:800}
@media(max-width:760px){.prose-rich{columns:1;padding:24px 22px}}

/* ============ PHOTOS RÉELLES — cartes & galeries ============ */
.gcard{display:flex;flex-direction:column;background:#fff;border:0;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-m);transition:transform .18s ease,box-shadow .18s ease}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.gcard img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.gcard figcaption{font-size:12.5px;font-weight:700;color:#fff;padding:12px 16px;background:var(--bleu-nuit);letter-spacing:-.1px}
@media(max-width:560px){.gcard figcaption{font-size:11.5px;padding:10px 12px}}

.realisations-grid{display:grid;grid-template-columns:1fr minmax(300px,384px);gap:48px;align-items:center}
.realisations-txt .sub{margin-bottom:22px;max-width:46ch}
.realisations-txt .btn{margin-top:4px}
.realisations-grid .ig-story{margin:0}
@media(max-width:860px){
  .realisations-grid{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
  .realisations-txt{max-width:580px}
  .realisations-txt .sub{margin-left:auto;margin-right:auto}
}

/* ============ STORIES INSTAGRAM (réalisations) ============ */
.ig-story{position:relative;width:100%;max-width:384px;margin:30px auto 0;aspect-ratio:9/16;max-height:76vh;
  border:0;border-radius:26px;overflow:hidden;background:#000;
  box-shadow:var(--shadow-l);user-select:none;-webkit-user-select:none;touch-action:manipulation;cursor:pointer;outline:none}
.ig-story:focus-visible{box-shadow:0 0 0 3px var(--ambre),var(--shadow-l)}
.ig-slides{position:absolute;inset:0}
.ig-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.ig-slide.is-active{opacity:1}
.ig-slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ig-slide figcaption{position:absolute;left:0;right:0;bottom:70px;padding:44px 18px 16px;color:#fff;font-weight:800;font-size:16.5px;letter-spacing:-.2px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));text-shadow:0 1px 8px rgba(0,0,0,.45)}
.ig-bars{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:5px;z-index:4}
.ig-bar{flex:1;height:3px;border-radius:99px;background:rgba(255,255,255,.34);overflow:hidden}
.ig-bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px}
.ig-head{position:absolute;top:24px;left:14px;right:14px;display:flex;align-items:center;gap:10px;z-index:4;color:#fff}
.ig-ava{flex:none;width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ambre);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ig-ava img{width:100%;height:100%;object-fit:contain;padding:4px}
.ig-id{display:flex;flex-direction:column;line-height:1.15}
.ig-id b{font-size:14px;font-weight:800}
.ig-id small{font-size:11.5px;opacity:.88;font-weight:600}
.ig-status{margin-left:auto;font-size:12.5px;font-weight:800;opacity:.9;letter-spacing:1px}
.ig-cta{position:absolute;left:12px;right:12px;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ambre);color:var(--ink);border:0;border-radius:14px;padding:12px 16px;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.ig-cta span{font-size:13px;font-weight:600}
.ig-cta b{font-size:14px;font-weight:800;white-space:nowrap}
.ig-cta:active{transform:translateY(2px)}
.ig-story.paused .ig-bars{opacity:.45}
@media(max-width:640px){.ig-slide figcaption{font-size:14.5px;bottom:66px;padding-bottom:14px}.ig-cta span{font-size:11.5px}.ig-cta b{font-size:13px}}

/* Bande de photos & duos */
.photo-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px;margin-bottom:38px}
.photo-strip .gcard img{aspect-ratio:1/1}
@media(max-width:640px){.photo-strip{grid-template-columns:repeat(2,1fr);gap:11px;margin-bottom:20px}.photo-strip--pro{grid-template-columns:1fr;gap:12px}.photo-strip--pro .gcard img{aspect-ratio:16/10}}
.duo-mini{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;margin-bottom:6px}
.duo-mini .gcard img{aspect-ratio:4/3}
.feature-duo{display:grid;grid-template-columns:.82fr 1.18fr;gap:34px;align-items:center;margin-top:8px}
.feature-duo .gcard{align-self:center;max-width:360px}
.feature-duo .gcard img{aspect-ratio:4/3;max-height:320px}
.feature-duo .feature-txt p{color:var(--gris);font-size:16px;line-height:1.65}
.feature-duo .feature-txt p+p{margin-top:12px}
@media(max-width:820px){.feature-duo{grid-template-columns:1fr;gap:20px}}
/* Photo retiree : le texte prend toute la largeur au lieu de rester coince
   dans la colonne etroite. :has() est deja utilise plus haut (header). */
.feature-duo:not(:has(.gcard)){grid-template-columns:1fr}
/* Bande photo de la page Pro : 2 visuels au lieu de 3, on repasse en 2
   colonnes bornees pour eviter des vignettes geantes et des cases vides. */
.photo-strip--pro{grid-template-columns:repeat(2,1fr);max-width:640px}
.artisan-duo{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start;max-width:960px;margin-top:8px}
.artisan-duo .artisan-card{margin-top:0;max-width:none}
.artisan-duo .gcard img{aspect-ratio:4/5}
@media(max-width:820px){.artisan-duo{grid-template-columns:1fr;gap:18px}.artisan-duo .gcard img{aspect-ratio:16/10}}

/* ============ PASS MOBILE — étapes en timeline ============ */
@media(max-width:640px){
  .etapes{grid-template-columns:1fr;gap:0;margin-bottom:26px;padding-left:2px}
  .etape{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 26px 56px;position:relative}
  .etape:last-child{padding-bottom:0}
  .etape::before{position:absolute;left:0;top:2px;width:38px;height:38px;font-size:17px;margin:0}
  .etape:not(:last-child)::after{content:"";position:absolute;left:18px;top:44px;bottom:8px;width:2px;background:var(--bleu);opacity:.2;border-radius:2px}
  .etape h3{font-size:16.5px;margin-bottom:2px}
  .etape p{font-size:14px}
}

/* ---- Pills hero plus compactes sur mobile ---- */
@media(max-width:640px){
  .hero{padding:100px 20px 68px}
  .hero-points{gap:7px;margin-top:20px}
  .hero-points li{font-size:12.5px;padding:6px 13px}
}

/* ---- Engagements (aside) compacts sur mobile ---- */
@media(max-width:880px){
  .aside-card{padding:20px}
  .aside-badges{gap:7px}
  .aside-badges span{font-size:12px;padding:6px 12px}
}

/* ============ FUNNEL MOBILE : formulaire condensé ============ */
@media(max-width:880px){
  .form-duo{display:flex;flex-direction:column;gap:18px}
  .form-aside{display:contents}
  .aside-card--call{order:-1}
  .aside-card--steps,.aside-card--badges{display:none}
  .form-card{padding:22px}
}

/* ============ MICRO-INTERACTIONS ============ */
@media (prefers-reduced-motion: no-preference){
  .arg:hover .arg-ic{transform:translateY(-3px);transition:transform .18s ease}
  .etape:hover::before{transform:translateY(-3px);transition:transform .18s ease}
  .zm-row--a{animation:zm-left 34s linear infinite}
  .zm-row--b{animation:zm-right 34s linear infinite}
  .zones-marquee:hover .zm-row{animation-play-state:paused}
  @keyframes zm-left{to{transform:translateX(-50%)}}
  @keyframes zm-right{from{transform:translateX(-50%)}to{transform:none}}
}
@media (prefers-reduced-motion: reduce){
  .zones-marquee{overflow-x:auto;-webkit-mask:none;mask:none}
}

/* ===== Logo header adaptatif : blanc sur le hero sombre, couleur au scroll ===== */
.logo-color{display:none}
.logo-white{display:block}
header.scrolled .logo-color{display:block}
header.scrolled .logo-white{display:none}

/* ============================================================
   RESSERRAGE MOBILE DES 3 BLOCS SIGNALES (19/07)
   L'operateur trouvait les sections plus propres sauf sur ces
   trois-la. Mesures a 390 px de large avant correction :
   bande de chiffres ~446 px, cartes services ~554 px.
   ============================================================ */
@media(max-width:640px){

  /* -- Bande de preuve chiffree --------------------------------
     minmax(170px,1fr) ne tenait pas dans les ~290 px utiles :
     la grille retombait sur UNE colonne, soit 4 gros chiffres
     empiles. On force 2x2 et on reduit la typo. ~446 -> ~176 px. */
  .stats-band{grid-template-columns:repeat(2,1fr);gap:16px 12px;
    padding:22px 16px;border-radius:18px;margin-top:26px}
  .stat .num{font-size:26px;letter-spacing:-1px}
  .stat .lbl{font-size:10.5px;letter-spacing:.6px;margin-top:3px}

  /* -- Cartes services (« Dites-nous ce dont vous avez besoin »)
     Meme cause : minmax(240px,1fr) => 1 colonne. On garde
     l'empilement (le texte a besoin de largeur) mais on compacte
     paddings et typo. ~554 -> ~397 px. */
  .services{gap:11px}
  .service{padding:15px 16px;border-radius:16px}
  .service h3{font-size:17px;letter-spacing:-.2px}
  .s-desc{font-size:13.5px;margin-top:5px;line-height:1.45}
  .s-cta{margin-top:8px;font-size:13px}

  /* -- « Pourquoi nous choisir » -------------------------------
     La photo a ete retiree, le texte occupe toute la largeur :
     on resserre l'interligne et les marges. */
  .feature-duo{gap:14px;margin-top:4px}
  .feature-duo .feature-txt p{font-size:15.5px;line-height:1.6}
  .feature-duo .feature-txt p+p{margin-top:10px}
}

/* ============================================================
   FICHE D'INTERVENTION (/fiche/) — page interne, noindex
   ============================================================ */
.wrap-etroit{max-width:760px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}
.fiche-h1{font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-1px;
  font-weight:800;color:var(--ink);margin:6px 0 8px}

/* Groupes de champs : une respiration entre les 4 blocs du formulaire */
.fs{border:0;padding:0;margin:0 0 26px}
.fs legend{padding:0;margin-bottom:12px;font-size:13px;font-weight:800;
  text-transform:uppercase;letter-spacing:1.1px;color:var(--bleu)}
.fs+.fs{border-top:1px solid var(--line);padding-top:22px}

/* Deux champs par ligne sur large, un seul en mobile */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;gap:0}}

/* Piege a robots : hors ecran plutot que display:none, que certains
   robots savent detecter. Retire du flux, de la tabulation et des
   lecteurs d'ecran (aria-hidden pose sur le conteneur). */
.hp-wrap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}


/* ============ AVIS : le bouton porte le lien (2026-07-21) ============ */
/* Le bouton "Voir l'avis" est un vrai lien. Son ::after s'etire sur toute
   la carte (stretched avis) pour que le clic n'importe ou dans la carte
   fonctionne exactement comme avant, sans imbriquer deux <a>. */
.voir-avis{text-decoration:none;cursor:pointer}
.voir-avis::after{content:"";position:absolute;inset:0;z-index:1;border-radius:18px}
.avis p,.avis .qui,.avis .stars{position:relative;z-index:2}

/* ============ TRAME UNIQUE PAGES VILLE (24/07) — additif, ne modifie aucune regle existante ============ */
.reassure{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:24px}
.reassure-card{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:var(--shadow-m)}
.reassure-ic{font-size:24px;line-height:1;display:block;margin-bottom:12px}
.reassure-card b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:6px}
.reassure-card p{color:var(--gris);font-size:15px;line-height:1.55;margin:0}
.form-card--hl{border-top:4px solid var(--ambre)}

/* ============ MAILLAGE EN CARTES (promu du style scope Saint-Fons, 26/07) ============ */
.maillage-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px;margin-top:22px}
.maillage-liste a{display:block;background:#fff;border-radius:14px;padding:15px 18px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;line-height:1.35;box-shadow:var(--shadow-m);transition:transform .15s ease,box-shadow .15s ease}
.maillage-liste a:hover{transform:translateY(-2px);box-shadow:var(--shadow-l)}

/* ============ SPÉCIFICITÉ : fold partiel natif (26/07, audit mobile villes P1) ============ */
/* 1er paragraphe visible, le reste replié dans un <details> natif : rien ne sort
   du DOM ni du crawl (test d'interchangeabilité et QA lisent toujours le texte
   entier), seul l'affichage se replie. Classe distincte de .faq-item pour ne
   pas fausser le controle d'accord FAQ/FAQPage de qa_staging.py. */
.spec-more{margin-top:10px}
.spec-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--bleu)}
.spec-more summary::-webkit-details-marker{display:none}
.spec-more summary::before{content:'+';font-size:19px;font-weight:800;line-height:1;flex:none;transition:transform .18s ease}
.spec-more[open] summary::before{transform:rotate(45deg)}
.spec-more[open] summary{margin-bottom:12px}
.spec-more p{color:var(--gris);font-size:16px;line-height:1.65}
.spec-more p+p{margin-top:12px}
@media(max-width:640px){.spec-more p{font-size:15.5px;line-height:1.6}}

/* ============ RELAIS FORMULAIRE EN COURS DE PAGE (26/07, audit mobile villes P0) ============ */
/* Second point d'entree vers #formulaire pendant le scroll (fin de la section
   spécificité), sans toucher .barre — la barre d'appel sticky est partagée
   par tout le site, cf. ETAT.md, on ne la modifie pas ici. */
.relais-devis{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-weight:700;font-size:15px;color:var(--bleu);text-decoration:none}
.relais-devis:hover{text-decoration:underline}

/* ================================================================================
   PASSE MOBILE GLOBALE (26/07) — corrige 4 defauts constates sur captures operateur
   --------------------------------------------------------------------------------
   Contexte : l'operateur a envoye 5 captures iPhone (viewport ~390 px CSS) de la
   home et des piliers. Mesures relevees a 390 px AVANT correction :
     header background = rgba(0,0,0,0) en position:fixed  -> chevauchement
     h1 = 32px · h2 = 25px · body = 17px · .arg padding = 26px · section = 34px

   Ces 4 corrections touchent des regles EXISTANTES (impossible de relever un
   plancher de clamp() en ajoutant une classe). Tout est donc confine dans des
   media queries max-width:640px, sauf le fond du header qui est un vrai bug a
   toutes les largeurs. Le rendu desktop reste inchange.
   ================================================================================ */

/* ---- 1. FOND DU HEADER AU SCROLL (toutes largeurs) ----------------------------
   header{background:transparent} et AUCUNE regle ne lui donnait jamais de fond,
   meme pas .scrolled qui ne changeait que la couleur du logo. Resultat : le
   header fixe flottait au-dessus du texte, qui defilait dessous et restait
   lisible a travers (cf. « Pourquoi nous appeler » derriere le logo sur 3 des
   5 captures). .scrolled est deja pose par ui.js quand on a depasse le hero :
   c'est exactement le moment ou il faut un fond. Sur le hero, le header reste
   transparent comme voulu, sinon on aurait une bande sombre sur le degrade.
   Fond CLAIR volontairement : .scrolled bascule deja le logo en version couleur
   et le burger en bleu nuit, donc le design attendait un fond clair. */
header.scrolled{background:#fff;box-shadow:0 2px 16px rgba(20,40,90,.10)}
@supports (backdrop-filter:blur(10px)){
  /* Le fond doit rester assez opaque pour MASQUER le texte qui defile dessous :
     teste a .82, le titre restait lisible a travers le header, ce qui ne
     corrigeait rien. .96 + blur donne l'effet depoli sans laisser passer. */
  header.scrolled{background:rgba(255,255,255,.96);backdrop-filter:blur(10px)}
}

@media(max-width:640px){

  /* ---- 2. ECHELLE TYPOGRAPHIQUE MOBILE --------------------------------------
     Les clamp() n'avaient pas de vraie borne basse utilisable : a 390 px,
     5.4vw = 21 px mais le plancher etait a 32 px, donc la partie fluide ne
     s'activait jamais et on servait du desktop sur un telephone.
     ⚠️ .field input/textarea/select restent a 16px (regle plus haut) : en
     dessous, iOS Safari zoome automatiquement au focus. Ne pas y toucher. */
  body{font-size:16px;line-height:1.55}
  .hero h1{font-size:27px;letter-spacing:-.9px;line-height:1.12;max-width:none}
  .hero .lead{font-size:15.5px;line-height:1.55}
  h2{font-size:21.5px;letter-spacing:-.6px;line-height:1.2}
  /* #formulaire h2 est pose avec un ID plus haut (25px) : selecteur d'ID, il
     gagne sur `h2` seul. On le realigne explicitement, sinon le titre du
     formulaire restait 3,5 px plus gros que tous les autres H2 de la page. */
  #formulaire h2{font-size:21.5px;letter-spacing:-.6px}
  h3{font-size:17px}
  .sub{font-size:15px;margin:8px 0 20px}
  .meteo{font-size:13px;padding:6px 14px;gap:7px}

  /* ---- 3. DENSITE DES CARTES ------------------------------------------------
     Meme logique que le resserrage du 19/07 sur .stats-band et .service, etendu
     aux cartes restantes : 26 px de padding + icone 52 px + 22 px de gouttiere,
     c'est ce qui donnait l'impression « wide et pas compact », chaque carte
     occupant presque un ecran pour 2 lignes de texte. */
  .args,.reassure{gap:11px}
  .arg,.reassure-card{padding:17px 16px;border-radius:16px}
  .arg-ic{width:40px;height:40px;margin-bottom:11px}
  .arg-ic svg{width:18px;height:18px}
  .arg h3,.reassure-card b{font-size:16px;margin-bottom:3px}
  .arg p,.reassure-card p{font-size:14px;line-height:1.5}
  .reassure-ic{font-size:20px;margin-bottom:8px}
  .aside-card{padding:16px;border-radius:16px}
  .aside-card h3{font-size:16px;margin-bottom:5px}
  .aside-card p{font-size:14px;margin-bottom:10px}
  .maillage-liste{gap:8px;margin-top:16px}
  .maillage-liste a{padding:12px 15px;font-size:14.5px;border-radius:12px}
  .faq-item summary{padding:14px 16px;font-size:15.5px}
  .faq-item p{padding:0 16px 15px;font-size:14.5px}

  /* ---- 4. RESPIRATION VERTICALE ---------------------------------------------
     « Il y a des espacements en trop » (operateur, 24/07 puis 26/07). Les
     sections respiraient en 34 px et le .wrap en 24 px lateraux, ce qui mange
     de la largeur utile sur un ecran de 390 px. */
  section{padding:26px 0}
  .wrap{padding:0 16px}
  .hero{padding:92px 16px 44px}
  .hero h1{margin:14px auto 10px}
  .cta-row{margin-top:18px;gap:10px}
  .fin{padding:30px 20px;margin:34px 0;border-radius:20px}
  .fin p{font-size:15px;margin:10px 0 20px}
  .fin .btn-j{font-size:16.5px;padding:14px 26px}
  .gcard figcaption{padding:10px 13px}

  /* ---- 5. LA PASTILLE D'APPEL NE DOIT PLUS RECOUVRIR LE TEXTE ---------------
     body.has-barre.barre-mini ne reservait que 22 px en bas alors que la
     pastille fait 58 px : le dernier bloc de chaque page passait dessous
     (visible sur 2 des 5 captures). On reserve la hauteur reelle.
     NB : le badge Axeptio en bas a gauche est positionne par leur SDK, pas par
     cette feuille : si son chevauchement persiste, c'est un reglage a faire
     dans la console Axeptio, cote operateur. */
  body.has-barre.barre-mini{padding-bottom:78px}

  /* ---- 6. UN SEUL POINT D'APPEL PERSISTANT (brief operateur 26/07) ----------
     Sous 640 px, .barre (barre d'appel collante, repliee en pastille au scroll)
     est TOUJOURS affichee. Le bouton telephone du header faisait donc doublon :
     deux CTA d'appel permanents a l'ecran en meme temps, plus les 2 CTA du
     hero. On masque celui du header, qui est le moins accessible au pouce.
     ⚠️ .wa-header (WhatsApp) est CONSERVE : canal different, et son clic est
     un event GA4 distinct (cf. ETAT.md tracking) — ne pas y toucher.
     Entre 641 et 900 px il n'y a pas de .barre : .tel-mini y reste affiche. */
  .tel-mini{display:none}
}

/* ============ « NOS PAGES PAR MARQUE » EN CHIPS (brief operateur 26/07) ======
   La liste etait un pave de liens separes par des points mediane, illisible
   sur telephone (les liens se cassent en fin de ligne au milieu d'un mot).
   Chaque marque devient une puce cliquable, avec une cible tactile correcte. */
.marques-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.marques-chips b{font-size:15px;margin-right:2px}
.marques-chips a{display:inline-flex;align-items:center;background:#fff;color:var(--bleu);
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:700;
  font-size:14px;text-decoration:none;line-height:1;transition:background .15s ease,border-color .15s ease}
.marques-chips a:hover{background:var(--bleu-pale);border-color:var(--bleu)}
@media(max-width:640px){
  .marques-chips{gap:7px}
  .marques-chips a{padding:7px 12px;font-size:13.5px}
  .marques-chips b{display:block;width:100%;margin-bottom:2px}
}

/* ================================================================================
   PHASE 1 DU BRIEF OPERATEUR (26/07 soir) — arbitrages rendus
   ================================================================================ */

/* ---- A. LA PASTILLE D'APPEL EST SUPPRIMEE -------------------------------------
   Arbitrage operateur : on GARDE la barre collante avec le numero, on SUPPRIME
   la pastille ronde. Les deux etaient le meme element dans deux etats : `ui.js`
   pose `body.barre-mini` apres ~140 px de scroll, ce qui repliait la barre en
   pastille de 58 px qui recouvrait le contenu (legendes de photos, titres).
   On neutralise l'etat replie plutot que de toucher a `ui.js`, qui est partage
   par tout le site : la classe continue d'etre posee, elle n'a simplement plus
   d'effet visuel. Un seul point d'appel persistant, toujours sous la meme forme. */
body.barre-mini .barre{left:12px;right:12px;width:auto;height:auto;padding:15px 16px;gap:8px}
body.barre-mini .barre .b-txt{max-width:280px;opacity:1}
body.barre-mini .barre svg{width:21px;height:21px}
@media(max-width:640px){
  /* la barre gardant sa hauteur pleine, la reserve en bas ne varie plus :
     c'est ce qui empeche les legendes de photos de passer dessous. */
  body.has-barre,body.has-barre.barre-mini{padding-bottom:86px}
}

/* ---- B. RATIO PHOTO UNIFORME 4:3 ----------------------------------------------
   Arbitrage operateur : aucune photo retiree ni recadree en dur, on uniformise
   seulement le ratio D'AFFICHAGE. Les variantes coexistaient : .gcard etait en
   3/4 (portrait), .photo-strip en 1/1, .artisan-duo en 4/5, d'ou la grille
   « incoherente ». `object-fit:cover` est deja pose plus haut : le cadrage se
   fait sans deformer l'image. */
.gcard img,
.photo-strip .gcard img,
.duo-mini .gcard img,
.feature-duo .gcard img,
.artisan-duo .gcard img{aspect-ratio:4/3}
@media(max-width:640px){
  .photo-strip--pro .gcard img{aspect-ratio:4/3}
}

/* ---- C. PAGES SANS HERO : reserver la hauteur du header ------------------------
   Le header est `position:fixed` : ce sont les 92-104 px de padding-top du hero
   qui poussent le contenu dessous. Une page sans hero n'a rien pour le faire, et
   son premier titre passait sous le header. Constate sur /mentions-legales/
   (H1 « Mentions légales ») par l'audit automatique des 26 pages du 26/07.
   Cible volontairement etroite : une <section> SANS CLASSE en tete de <main>,
   c'est-a-dire celle qui ne recoit aucun padding du design system. Mesure des
   3 pages sans hero : /merci/ a 112 px (classe .merci), /fiche/ a 104 px
   (.sec-blanc), /mentions-legales/ n'avait que 26 px — d'ou le seul defaut.
   Ne pas elargir a `main > :first-child`, cela doublerait le retrait des deux
   premieres. */
body:not(:has(.hero)) main > section:not([class]):first-child{padding-top:100px}
@media(max-width:640px){
  body:not(:has(.hero)) main > section:not([class]):first-child{padding-top:88px}
}

/* ================================================================================
   REVUE MOBILE OPERATEUR DU 26/07 (soir) — lots 1 a 3
   ================================================================================ */

/* ---- LOT 1. LIGNE DE CONFIANCE UNIQUE -----------------------------------------
   Remplace 3 pilules empilees qui rallongeaient le heros. Deux implementations
   concurrentes coexistaient pour la meme idee : `.hero-points` (home) et
   `.trust-bar` (installation). Les deux sont remplacees par cette seule ligne.
   Police plus petite que les pilules, separateurs point median, 2 lignes max
   a 390 px. Le badge d'accroche au-dessus du H1 (`.meteo`) n'est pas touche. */
.ligne-confiance{margin:18px auto 0;max-width:44ch;text-align:center;
  font-size:13.5px;font-weight:600;line-height:1.6;color:rgba(255,255,255,.82)}
@media(max-width:640px){
  .ligne-confiance{font-size:12.5px;margin-top:14px;max-width:34ch;line-height:1.55}
}

/* ---- LOT 2. LOGOS MARQUE A HAUTEUR UNIFORME ------------------------------------
   Cause des tailles inegales : la vignette faisait 86 px de large pour 30 px de
   haut, et l'image etait bornee par `max-width:100%`. Un logo large (Fujitsu)
   etait donc limite par la LARGEUR et paraissait enorme en surface, un logo
   etroit (Hitachi) par la hauteur et paraissait minuscule. On impose desormais
   la HAUTEUR, la largeur suit. La vignette s'adapte au contenu.
   ⛔ Ni le defilement ni le tracking ne sont touches. */
.brand-logo{height:auto;width:auto;min-width:64px}
.brand-logo img{height:30px;width:auto;max-height:none;max-width:none;object-fit:contain}
@media(max-width:680px){
  .brand-logo{min-width:56px}
  .brand-logo img{height:28px}   /* borne basse de la fourchette demandee (28-32) */
}

/* ---- LOT 3. FORMULAIRE COMPACTE ------------------------------------------------
   Objectif : titre du bloc + Nom + Telephone + lien precisions + bouton doivent
   tenir dans un ecran de 390 px. Uniquement du CSS : ni les champs, ni la
   logique d'envoi, ni le tracking ne sont modifies. */
@media(max-width:640px){
  #formulaire{padding-top:20px}
  #formulaire h2{margin-bottom:2px}
  #formulaire .sub{font-size:14px;margin-bottom:10px}
  .form-card{padding:16px 14px;border-radius:16px}
  .field{margin-bottom:9px;gap:3px}
  .field label{font-size:13px}
  .field input,.field select{height:44px}        /* 48 -> 44 */
  .field textarea{min-height:64px}
  /* ⛔ la taille de police des champs RESTE a 16px (regle plus haut) : en
     dessous, iOS Safari zoome automatiquement au focus. Ne pas la reduire
     pour gagner de la hauteur. */
  .form-more-toggle{margin-bottom:10px;font-size:14px}
  .form-card .btn-block{padding:13px 20px;font-size:15.5px}
  .form-sub{font-size:12px;margin-top:6px}
}