@font-face{font-family:'Figtree';font-style:italic;font-weight:600;font-display:swap;src:url(//julior-multi-services.fr/wp-content/jms-refonte/polices/figtree-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:italic;font-weight:600;font-display:swap;src:url(//julior-multi-services.fr/wp-content/jms-refonte/polices/figtree-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(//julior-multi-services.fr/wp-content/jms-refonte/polices/figtree-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(//julior-multi-services.fr/wp-content/jms-refonte/polices/figtree-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* =======================================================================
   JULIOR — REFONTE DE L'EXISTANT (v4)
   On garde : noir + orange + beige, le logo, le formulaire de rappel en tête.
   On reprend des leaders du secteur (MesDépanneurs, Depanneo, HBHS) :
   photo réelle plein cadre, numéro = bouton, réassurance immédiate,
   cartes de prestation avec prix, preuve humaine, avis Google, barre d'appel mobile.
   ======================================================================= */
:root{
  --noir:#121212; --noir-2:#1C1A18; --noir-3:#2A2622;
  --texte:#2B2622; --gris:#6B6157;  /* 5,0:1 sur beige */
  --beige:#F2E9DC;                  /* beige de la marque actuelle */
  --beige-clair:#F8F3EC; --blanc:#FFFFFF; --trait:#E7DDCF;
  --orange:#E25B06;                 /* bouton : texte blanc gras ≥ 18,7 px = 3,7:1 */
  --orange-fonce:#C94D00; --orange-texte:#B84600; --orange-pale:#FFF0E3;
  --vert:#1E9E55; --vert-pale:#E6F6EC;
  --f:"Figtree",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --r-s:10px; --r-m:16px; --r-l:22px; --r-p:999px;
  --ombre:0 14px 34px -20px rgba(40,25,10,.35);
  --ombre-forte:0 28px 60px -28px rgba(20,12,4,.55);
  --ease:cubic-bezier(.2,.8,.2,1);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:100px}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.6;color:var(--texte);background:var(--blanc);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0} ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--noir);font-weight:800;letter-spacing:-.02em;line-height:1.1}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.conteneur{max-width:var(--max);margin:0 auto;padding-inline:20px}
@media (min-width:768px){.conteneur{padding-inline:32px}}

/* ---------- titres de section : trait orange + deux tons (HBHS + MesDépanneurs) ---------- */
.titre-section{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.12}
.titre-section .trait{display:inline-block;width:26px;height:5px;border-radius:3px;background:var(--orange);margin-right:12px;vertical-align:.32em}
.titre-section span.leger{display:block;font-weight:400;color:var(--gris);letter-spacing:-.01em}
.chapo{font-size:18px;color:var(--gris);max-width:62ch;margin-top:14px}
.tete{margin-bottom:40px}
.tete-ligne{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;margin-bottom:40px}
.surligne{position:relative;white-space:nowrap}
.surligne svg{position:absolute;left:-2%;bottom:-.28em;width:104%;height:.42em;color:var(--orange);overflow:visible}
.section{padding-block:88px}
.section-serree{padding-block:64px}
.fond-beige{background:var(--beige-clair)}
.fond-noir{background:var(--noir);color:#D8D0C4}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--r-p);
  font-weight:700;font-size:16px;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.btn:active{transform:scale(.98)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 10px 22px -10px rgba(226,91,6,.7)}
.btn-orange:hover{background:var(--orange-fonce)}
.btn-blanc{background:#fff;color:var(--noir)}
.btn-contour{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-contour:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-contour-sombre{border:1.5px solid var(--trait);color:var(--noir);background:#fff}
.btn-contour-sombre:hover{border-color:var(--noir)}
.btn-noir{background:var(--noir);color:#fff}.btn-noir:hover{background:#000}
.btn-petit{min-height:42px;padding:0 16px;font-size:15px}
/* le numéro EST le bouton (Depanneo) : pastille téléphone + point vert « joignable » */
.appel{display:inline-flex;align-items:center;gap:14px;min-height:62px;padding:6px 26px 6px 6px;border-radius:var(--r-p);
  background:var(--orange);color:#fff;box-shadow:0 14px 30px -12px rgba(226,91,6,.75);transition:background-color .2s,transform .2s var(--ease)}
.appel:hover{background:var(--orange-fonce)}
.appel:active{transform:scale(.98)}
.appel .pastille{position:relative;width:50px;height:50px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center;flex:none}
.appel .pastille::after{content:"";position:absolute;right:1px;bottom:3px;width:12px;height:12px;border-radius:50%;background:#22C55E;border:2.5px solid var(--orange);animation:pouls 2.4s infinite}
@keyframes pouls{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}60%{box-shadow:0 0 0 6px rgba(34,197,94,0)}}
.appel b{display:block;font-size:22px;font-weight:800;letter-spacing:.01em;line-height:1.1}
.appel small{display:block;font-size:13px;font-weight:600;opacity:.92}
.micro{margin-top:12px;font-size:14px;color:rgba(255,255,255,.75)}
.lien{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--orange-texte);border-bottom:2px solid currentColor;padding-bottom:1px}
.lien-blanc{color:#fff}

/* ---------- en-tête : pilule flottante translucide (HBHS) ---------- */
.entete{position:fixed;left:0;right:0;top:14px;z-index:60;pointer-events:none}
.entete .conteneur{pointer-events:auto}
.pilule{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px;padding:0 12px 0 18px;border-radius:var(--r-p);
  background:rgba(18,18,18,.55);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.12);transition:background-color .3s,box-shadow .3s}
.entete.plein .pilule{background:rgba(18,18,18,.94);box-shadow:var(--ombre-forte)}
.marque{display:flex;align-items:center;gap:11px;flex:none;color:#fff}
.marque img{width:46px;height:46px}
.marque b{display:block;font-size:19px;font-weight:800;line-height:1;color:#fff}
.marque small{display:block;font-size:12.5px;color:#C9BFB2;margin-top:3px}
.nav{display:none}
.nav ul{display:flex;gap:2px}
.nav a,.nav button{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;border-radius:var(--r-p);font-size:15px;font-weight:600;color:#EDE6DC;transition:background-color .2s}
.nav a:hover,.nav button:hover,.nav button[aria-expanded="true"]{background:rgba(255,255,255,.1);color:#fff}
.droite{display:flex;align-items:center;gap:8px}
.tel-entete{display:none;align-items:center;gap:10px;min-height:50px;padding:5px 18px 5px 5px;border-radius:var(--r-p);background:var(--orange);color:#fff}
.tel-entete .pastille{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--orange);display:grid;place-items:center;position:relative}
.tel-entete .pastille::after{content:"";position:absolute;right:0;bottom:1px;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid var(--orange)}
.tel-entete b{display:block;font-size:16.5px;font-weight:800;line-height:1.05}
.tel-entete small{display:block;font-size:11.5px;font-weight:600;opacity:.92}
.appel-rond{width:48px;height:48px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center}
.burger{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1)}
.mega{position:absolute;left:20px;right:20px;top:calc(100% + 10px);max-width:calc(var(--max) - 64px);margin:0 auto;background:#fff;border-radius:var(--r-l);
  box-shadow:var(--ombre-forte);padding:28px;display:none;grid-template-columns:repeat(5,1fr);gap:24px;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease)}
.mega.ouvert{opacity:1;transform:none}
.mega .mega-titre{color:var(--noir);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:0;font-size:15.5px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mega .mega-titre .ico{width:34px;height:34px}
.mega li a{display:block;padding:5px 0;font-size:14.5px;color:var(--gris)}
.mega li a:hover{color:var(--orange-texte)}
.mega .tout{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;color:var(--orange-texte)}

/* menu mobile */
.menu-m{position:fixed;inset:0;z-index:70;background:var(--noir);color:#fff;display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility .4s}
.menu-m.ouvert{transform:none;visibility:visible}
.menu-m-tete{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1)}
.menu-m-corps{flex:1;overflow-y:auto;padding:8px 20px}
.menu-m-corps a,.menu-m-corps summary{display:flex;justify-content:space-between;align-items:center;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:20px;font-weight:700;cursor:pointer;list-style:none}
.menu-m-corps summary::-webkit-details-marker{display:none}
.menu-m-corps details a{font-size:16px;font-weight:500;color:#D8D0C4;padding:11px 0 11px 14px;border:0}
.menu-m-pied{padding:16px 20px calc(16px + env(safe-area-inset-bottom));display:grid;gap:10px;border-top:1px solid rgba(255,255,255,.1)}
.menu-m-pied .appel{justify-content:center}

/* ---------- héros : photo réelle plein cadre + voile + formulaire (existant conservé) ---------- */
.heros{position:relative;background:var(--noir);color:#fff;overflow:hidden;padding:128px 0 0}
.heros-photo{position:absolute;inset:0}
.heros-photo img{width:100%;height:100%;object-fit:cover}
.heros-photo::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(18,18,18,.94) 0%,rgba(18,18,18,.82) 42%,rgba(18,18,18,.45) 72%,rgba(18,18,18,.3) 100%),
  linear-gradient(0deg,rgba(18,18,18,.9) 0%,rgba(18,18,18,0) 32%)}
.heros-grille{position:relative;display:grid;gap:36px;padding-bottom:40px}
.etiquette{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:var(--r-p);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#F2E9DC}
.etiquette i{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.25)}
.heros h1{color:#fff;font-size:clamp(2.35rem,5vw,4rem);line-height:1.04;margin-top:20px;letter-spacing:-.025em}
.heros h1 .accent{display:block;color:#FF8A3D;margin-top:6px}
.heros .points{display:grid;gap:10px;margin-top:24px}
.heros .points li{display:flex;align-items:center;gap:12px;font-size:17.5px;font-weight:500;color:#F0EAE1}
.heros .points svg{flex:none;color:#FF8A3D}
.heros-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
.google{display:inline-flex;align-items:center;gap:12px;margin-top:26px;padding:10px 16px 10px 12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.google .g{width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center}
.google b{font-size:20px;font-weight:800;color:#fff;line-height:1}
.google .etoiles{color:#FBBC05;letter-spacing:1.5px;font-size:15px}
.google small{display:block;font-size:13px;color:#D8D0C4}
/* formulaire de rappel : conservé de l'existant, remis en forme */
.rappel{background:#fff;color:var(--texte);border-radius:var(--r-l);padding:26px 24px;box-shadow:var(--ombre-forte);align-self:start}
.rappel h2{font-size:22px;display:flex;align-items:center;gap:10px}
.rappel .sous{font-size:14.5px;color:var(--gris);margin-top:6px}
.rappel .delai{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:700;color:#137A40;background:var(--vert-pale);padding:5px 11px;border-radius:var(--r-p)}
.champs{display:grid;gap:12px;margin-top:18px}
.champ label{display:block;font-size:13.5px;font-weight:700;color:var(--noir);margin-bottom:6px}
.champ input,.champ select,.champ textarea{width:100%;min-height:50px;border-radius:12px;border:1.5px solid var(--trait);background:var(--beige-clair);padding:12px 14px;font:inherit;font-size:16px;color:var(--noir);transition:border-color .2s,background .2s}
.champ textarea{min-height:84px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--orange);background:#fff}
.champ .err{display:none;font-size:13px;font-weight:600;color:#B42318;margin-top:5px}
.champ.ko input{border-color:#B42318}.champ.ko .err{display:block}
.rgpd{font-size:12.5px;color:var(--gris);line-height:1.45}
.rappel .btn{width:100%;margin-top:4px}
.ok-msg{display:none;padding:18px;border-radius:14px;background:var(--vert-pale);color:#14532D;font-size:15px}
.ok-msg b{display:block;font-size:17px}
form.envoye .champs,form.envoye .btn,form.envoye .rgpd{display:none}
form.envoye .ok-msg{display:block}

/* bande de réassurance en verre au bas du héros (HBHS) */
.reassurance{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 0 28px}
.reassurance div{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r-m);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(10px)}
.reassurance .ico{flex:none;width:42px;height:42px;border-radius:50%;background:rgba(255,138,61,.16);color:#FF8A3D;display:grid;place-items:center}
.reassurance b{display:block;font-size:15px;color:#fff;line-height:1.2}
.reassurance span{display:block;font-size:13px;color:#CFC6BA;margin-top:2px}

@media (min-width:1080px){
  .nav{display:block}
  .tel-entete{display:inline-flex}
  .appel-rond,.burger{display:none}
  .mega{display:grid}
  .heros{padding-top:140px}
  .heros-grille{grid-template-columns:1.25fr .75fr;align-items:center;gap:56px;padding-bottom:56px}
  .reassurance{grid-template-columns:repeat(4,1fr);gap:14px;padding-bottom:36px}
}
.mega{visibility:hidden;pointer-events:none}
.mega.ouvert{visibility:visible;pointer-events:auto}

/* ---------- icônes : pictos maison dans une pastille (codes du secteur) ---------- */
.ico{width:46px;height:46px;border-radius:50%;background:var(--orange-pale);color:var(--orange-texte);display:grid;place-items:center;flex:none}
.ico-carre{width:56px;height:56px;border-radius:16px;background:var(--orange-pale);color:var(--orange-texte);display:grid;place-items:center;flex:none}

/* ---------- logos assureurs (existant conservé, en gris, formulation honnête) ---------- */
.assureurs{border-bottom:1px solid var(--trait)}
.assureurs .conteneur{display:grid;gap:18px;padding-block:28px;align-items:center}
.assureurs p{font-size:14.5px;color:var(--gris);font-weight:600}
.assureurs p b{color:var(--noir)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.logos img{height:30px;width:auto;filter:grayscale(1);opacity:.62;transition:filter .2s,opacity .2s}
.logos img:hover{filter:none;opacity:1}
@media (min-width:1000px){.assureurs .conteneur{grid-template-columns:260px 1fr}}

/* ---------- cartes de prestation (Depanneo + MesDépanneurs) ---------- */
.cartes{display:grid;gap:20px}
@media (min-width:700px){.cartes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cartes{grid-template-columns:repeat(3,1fr)}}
.carte{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);overflow:hidden;transition:box-shadow .25s,transform .25s var(--ease),border-color .25s}
.carte:hover{box-shadow:var(--ombre);transform:translateY(-3px);border-color:#DCCFBD}
.carte-img{position:relative;aspect-ratio:16/10;background:var(--beige)}
.carte-img img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--r-p);font-size:12.5px;font-weight:700;background:#fff;color:#137A40;box-shadow:0 4px 12px -4px rgba(0,0,0,.25)}
.badge i{width:7px;height:7px;border-radius:50%;background:#22C55E}
.carte-corps{display:flex;flex-direction:column;gap:8px;padding:20px 20px 0;flex:1}
.carte-corps h3{font-size:20px;letter-spacing:-.015em}
.prix{font-size:15px;color:var(--gris)}
.prix b{font-size:22px;font-weight:800;color:var(--orange-texte);letter-spacing:-.01em}
.carte-corps p{font-size:15px;color:var(--gris)}
.carte-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 20px;margin-top:6px}
.carte-pied .tel-mini{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px 0 6px;border-radius:var(--r-p);border:1.5px solid var(--trait);font-weight:700;font-size:14.5px;color:var(--noir);transition:border-color .2s,background .2s}
.carte-pied .tel-mini span{width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center}
.carte-pied .tel-mini:hover{border-color:var(--orange);background:var(--orange-pale)}
.carte-pied .lien{font-size:14.5px}

/* ---------- bande d'urgence (les trois références) ---------- */
.bande{position:relative;overflow:hidden;border-radius:28px;background:var(--noir);color:#fff;display:grid}
.bande::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 100% 50%,rgba(226,91,6,.55) 0%,rgba(226,91,6,.12) 38%,rgba(18,18,18,0) 62%)}
.bande-texte{position:relative;padding:40px 26px;display:grid;gap:16px;align-content:center}
.bande h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.bande p{color:#D8D0C4;max-width:44ch}
.bande-visuel{position:relative;min-height:220px}
@media (min-width:900px){.bande{grid-template-columns:1.2fr .8fr}.bande-texte{padding:56px}}

/* ---------- comment ça marche ---------- */
.etapes{display:grid;gap:18px;counter-reset:e}
@media (min-width:900px){.etapes{grid-template-columns:repeat(4,1fr);gap:22px}}
.etape{position:relative;padding:26px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.etape .num{position:absolute;right:18px;top:16px;font-size:44px;font-weight:800;color:var(--beige);line-height:1}
.etape h3{font-size:19px;margin-top:16px}
.etape p{font-size:15px;color:var(--gris);margin-top:8px}
.etape .fait{display:inline-flex;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--orange-texte);background:var(--orange-pale);padding:4px 10px;border-radius:var(--r-p)}

/* ---------- tableau des prix (Depanneo) ---------- */
.bascule{display:inline-flex;padding:5px;border-radius:var(--r-p);background:#fff;border:1px solid var(--trait);margin-bottom:22px}
.bascule button{padding:10px 20px;border-radius:var(--r-p);font-weight:700;font-size:15px;color:var(--gris)}
.bascule button[aria-selected="true"]{background:var(--noir);color:#fff}
.table-prix{background:#fff;border-radius:var(--r-l);border:1px solid var(--trait);overflow:hidden}
.table-prix .en-tete{display:none;grid-template-columns:1fr 200px 160px;gap:16px;padding:14px 24px;background:var(--beige);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.ligne-prix{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:18px 20px;border-top:1px solid var(--trait)}
.ligne-prix:first-of-type{border-top:0}
.ligne-prix .k{color:var(--orange);grid-row:1/span 2}
.ligne-prix b{font-size:16.5px;color:var(--noir);line-height:1.3}
.ligne-prix small{display:block;font-size:13.5px;color:var(--gris);font-weight:500}
.ligne-prix .montant{grid-column:2;font-size:19px;font-weight:800;color:var(--orange-texte)}
.ligne-prix .montant small{display:inline;font-size:12px;color:var(--gris);font-weight:600;margin-left:4px}
.ligne-prix .action{display:none}
.panneau[hidden]{display:none}
@media (min-width:900px){
  .table-prix .en-tete{display:grid;grid-template-columns:44px 1fr 200px 170px}
  .ligne-prix{grid-template-columns:44px 1fr 200px 170px;gap:16px;padding:18px 24px}
  .ligne-prix .k{grid-row:auto}
  .ligne-prix .montant{grid-column:auto}
  .ligne-prix .action{display:inline-flex;justify-self:end}
}
.garantie{display:flex;gap:16px;align-items:flex-start;margin-top:20px;padding:22px 24px;border-radius:var(--r-l);background:var(--vert-pale);border:1px solid #C6E9D3}
.garantie .ico{background:#fff;color:#137A40}
.garantie b{display:block;font-size:18px;color:#14532D}
.garantie p{font-size:15px;color:#1F5F38;margin-top:4px}
.note{font-size:13.5px;color:var(--gris);margin-top:14px;max-width:80ch}

/* ---------- le fondateur (HBHS : preuve humaine) ---------- */
.fondateur{display:grid;gap:32px;align-items:center;background:var(--beige-clair);border-radius:28px;padding:32px 24px;overflow:hidden;position:relative}
.fondateur h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.fondateur .texte p{margin-top:14px;color:var(--texte)}
.faits{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.faits li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;color:var(--noir)}
.faits svg{color:var(--vert);flex:none}
.portrait{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:var(--beige)}
.portrait .badge-exp{position:absolute;right:14px;top:14px;background:var(--orange);color:#fff;border-radius:14px;padding:10px 12px;font-size:12px;font-weight:700;line-height:1.25;text-align:center;box-shadow:var(--ombre)}
.portrait .badge-exp b{display:block;font-size:20px;font-weight:800}
.citation-f{margin-top:20px;padding-top:14px;border-top:2px solid var(--noir);font-size:18px;font-weight:600;color:var(--noir);font-style:italic}
@media (min-width:960px){.fondateur{grid-template-columns:1.3fr .7fr;padding:56px;gap:56px}}

/* ---------- emplacements de visuels à produire ---------- */
.visuel{position:relative}
.visuel .tag-visuel{position:absolute;right:10px;bottom:10px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(18,18,18,.78);color:#F2E9DC;padding:5px 9px;border-radius:var(--r-p);backdrop-filter:blur(4px)}
.a-produire{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:
  repeating-linear-gradient(45deg,rgba(184,70,0,.05) 0 12px,transparent 12px 24px),var(--beige);border:2px dashed #D9C3A6;border-radius:inherit;color:var(--gris)}
.a-produire b{display:block;color:var(--noir);font-size:16px;margin-top:10px}
.a-produire span{display:block;font-size:13.5px;margin-top:4px;max-width:30ch}

/* ---------- avis Google (HBHS) ---------- */
.avis-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait);margin-bottom:18px}
.avis-tete .g-grand{display:flex;align-items:center;gap:14px}
.avis-tete b{font-size:20px;font-weight:800}
.avis-tete .etoiles{color:#FBBC05;letter-spacing:2px;font-size:18px}
.avis-grille{display:grid;gap:14px}
@media (min-width:760px){.avis-grille{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.avis-grille{grid-template-columns:repeat(4,1fr)}}
.avis{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.avis-qui{display:flex;align-items:center;gap:11px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none}
.avis-qui b{display:block;font-size:15px;color:var(--noir)}
.avis-qui small{display:block;font-size:12.5px;color:var(--gris)}
.avis-qui .gm{margin-left:auto}
.avis .etoiles{color:#FBBC05;letter-spacing:1.5px}
.avis p{font-size:15px;color:var(--texte)}

/* ---------- réalisations ---------- */
.reals{display:grid;gap:18px}
@media (min-width:700px){.reals{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.reals{grid-template-columns:repeat(4,1fr)}}
.real{border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid var(--trait)}
.real-img{position:relative;aspect-ratio:4/5;background:var(--beige)}
.real-img img{width:100%;height:100%;object-fit:cover}
.real-img .badge{color:var(--noir)}
.real-corps{padding:16px 18px 18px}
.real-corps small{font-size:12.5px;font-weight:700;color:var(--orange-texte);text-transform:uppercase;letter-spacing:.05em}
.real-corps h3{font-size:17px;margin-top:6px;line-height:1.3}
.real-corps p{font-size:14px;color:var(--gris);margin-top:6px}

/* ---------- zone : carte réelle + puces de communes (HBHS / Depanneo) ---------- */
.zone{display:grid;gap:28px;align-items:start}
@media (min-width:1000px){.zone{grid-template-columns:1.1fr .9fr}}
.carte-zone{background:#fff;border:1px solid var(--trait);border-radius:var(--r-l);padding:10px;box-shadow:var(--ombre)}
.carte-svg{width:100%;height:auto}
.carte-svg .pt circle{fill:var(--noir);stroke:#fff;stroke-width:2}
.carte-svg .pt.actif circle,.carte-svg .pt.ici circle{fill:var(--orange)}
.carte-svg .anneau{font-size:10px;font-weight:700;letter-spacing:.08em;fill:#9C9184}
.carte-svg .nom-commune{font-size:12px;fill:var(--gris);font-weight:600}
.carte-svg .nom-centre,.carte-svg .nom-ici{font-size:15px;font-weight:800;fill:var(--noir)}
.carte-svg .onde{fill:none;stroke:var(--orange);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:onde 2.8s infinite var(--ease)}
@keyframes onde{from{transform:scale(1);opacity:.8}to{transform:scale(4.2);opacity:0}}
.puces{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.puces a{padding:8px 14px;border-radius:var(--r-p);background:#fff;border:1px solid var(--trait);font-size:14.5px;font-weight:600;color:var(--noir);transition:border-color .2s,background .2s}
.puces a:hover{border-color:var(--orange);background:var(--orange-pale)}
.puces a small{color:var(--gris);font-weight:500;margin-left:4px}

/* ---------- FAQ (MesDépanneurs) ---------- */
.faq-grille{display:grid;gap:28px}
@media (min-width:960px){.faq-grille{grid-template-columns:.7fr 1.3fr;gap:64px}}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-size:18px;font-weight:700;color:var(--noir)}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange-pale);color:var(--orange-texte);display:grid;place-items:center;transition:transform .3s var(--ease)}
.faq details[open] summary span{transform:rotate(45deg);background:var(--orange);color:#fff}
.faq .rep{padding:0 40px 22px 0;color:var(--gris);font-size:16px}

/* ---------- appel final ---------- */
.final{position:relative;overflow:hidden;border-radius:28px;background:var(--noir);color:#D8D0C4;display:grid;gap:28px;padding:40px 24px}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 0% 0%,rgba(226,91,6,.4),rgba(18,18,18,0) 55%)}
.final>*{position:relative}
.final h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem)}
.final .rappel{box-shadow:none}
@media (min-width:960px){.final{grid-template-columns:1.1fr .9fr;padding:64px;gap:56px;align-items:center}}

/* ---------- pied de page (existant : noir) ---------- */
.pied{background:var(--noir);color:#B8AEA1;padding:72px 0 120px;margin-top:88px;font-size:14.5px}
.pied-grille{display:grid;gap:36px}
.pied .pied-titre{font-weight:800;letter-spacing:-.02em;line-height:1.1;margin-top:0;color:#fff;font-size:15px;margin-bottom:12px}
.pied li a{display:block;padding:4px 0;color:#CFC6BA}
.pied li a:hover{color:#fff}
.pied-contact{display:grid;gap:10px;margin-top:18px}
.pied-contact a{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:700}
.pied-engagements{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pied-engagements span{padding:7px 12px;border-radius:var(--r-p);border:1px solid rgba(255,255,255,.14);font-size:13px;font-weight:600;color:#E8E1D6}
.pied-bas{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:13px;color:#8E8478}
@media (min-width:1000px){.pied-grille{grid-template-columns:1.4fr 1fr 1fr 1fr}.pied{padding-bottom:72px}}

/* ---------- barre d'appel mobile, toujours visible (les trois références) ---------- */
.collant{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--trait);box-shadow:0 -10px 30px -18px rgba(0,0,0,.35)}
.collant .appel{flex:1;min-height:56px;padding:4px 16px 4px 4px;gap:10px;box-shadow:none}
.collant .appel .pastille{width:46px;height:46px}
.collant .appel b{font-size:18px}
.collant .appel small{font-size:12px}
.collant .btn{min-height:56px;padding:0 16px}
@media (min-width:1080px){.collant{display:none}}

/* ---------- fil d'Ariane, en-têtes de pages intérieures ---------- */
.fil{font-size:13.5px;color:#CFC6BA;margin-bottom:18px}
.fil a:hover{color:#fff}
.fil span{margin:0 8px;opacity:.6}
.heros-court{padding-bottom:0}
.heros-court .heros-grille{padding-bottom:48px}

/* ---------- apparitions ---------- */
.apparait{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.apparait.vu,.sans-js .apparait{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.apparait{opacity:1;transform:none}}

/* bandeau maquette */
.maquette{position:fixed;right:14px;bottom:14px;z-index:58;display:none;padding:7px 12px;border-radius:var(--r-p);background:var(--noir);color:#F2E9DC;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
@media (min-width:1080px){.maquette{display:inline-block}}

/* correctifs de revue */
.carte-img .visuel,.heros-photo .visuel,.bande-visuel .visuel,.portrait .visuel,.real-img .visuel{position:absolute!important;inset:0}
.final .rappel h2{color:var(--noir)}
.logos img{height:34px;opacity:.8}
.heros h1{font-size:clamp(2.3rem,4.2vw,3.45rem)}
.heros h1 .accent{font-size:.86em}
.tag-visuel.reelle{background:rgba(30,158,85,.92);color:#fff}
.tag-visuel.produire{background:var(--orange);color:#fff}

/* ---------- carte interactive des communes (inspirée de « Les antennes » de hbhs.fr) ---------- */
.antennes{position:relative;display:grid;gap:28px;align-items:center;background:linear-gradient(110deg,var(--beige-clair) 0%,var(--beige-clair) 55%,rgba(248,243,236,0) 100%);border-radius:28px;padding:32px 22px;overflow:hidden}
@media (min-width:1000px){.antennes{grid-template-columns:.95fr 1.05fr;padding:48px 0 48px 48px;gap:24px}}
.antennes .texte p{margin-top:14px;color:var(--texte);max-width:52ch}
.recherche{position:relative;margin-top:22px;max-width:420px}
.recherche input{width:100%;height:52px;border-radius:var(--r-p);border:1.5px solid var(--trait);background:#fff;padding:0 18px 0 46px;font:inherit;font-size:16px;color:var(--noir)}
.recherche input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-pale)}
.recherche svg{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--gris)}
.defile-puces{position:relative;margin-top:18px}
.defile-puces::after{content:"";position:absolute;right:0;top:0;bottom:6px;width:70px;background:linear-gradient(90deg,rgba(248,243,236,0),var(--beige-clair));pointer-events:none}
.puces-ligne{display:flex;gap:8px;overflow-x:auto;padding:4px 70px 10px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
.puces-ligne::-webkit-scrollbar{display:none}
.puce{flex:none;scroll-snap-align:start;display:inline-flex;align-items:baseline;gap:6px;padding:10px 16px;border-radius:var(--r-p);background:#fff;
  box-shadow:0 2px 8px -3px rgba(60,40,15,.22);font-size:15px;font-weight:700;color:var(--noir);transition:background .2s,color .2s,transform .2s var(--ease)}
.puce small{font-size:12.5px;font-weight:600;color:var(--gris)}
.puce:hover,.puce.actif{background:linear-gradient(100deg,var(--noir),#3a2a1c);color:#fff}
.puce:hover small,.puce.actif small{color:#F2C9A6}
.puce[hidden]{display:none}
.aucune{margin-top:10px;font-size:14.5px;color:var(--gris)}
.carte93-boite{position:relative}
.carte93{width:100%;height:auto;display:block;-webkit-mask-image:radial-gradient(75% 72% at 52% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(75% 72% at 52% 50%,#000 58%,transparent 100%)}
.carte93 .voisin{fill:#F3EFE9;stroke:#fff;stroke-width:1}
.carte93 .paris{fill:#ECE6DD}
.carte93 .lib-fond{font:800 12px var(--f);letter-spacing:.14em;fill:#A69B8E}
.carte93 .commune{fill:#E4CCAA;stroke:#fff;stroke-width:1.3;cursor:pointer;transition:fill .2s}
.carte93 .commune:hover,.carte93 .commune.actif,.carte93 .commune:focus{fill:#F6B98C;outline:none}
.carte93 .commune.siege{fill:var(--orange)}
.carte93 .commune.trouve{fill:#F3C9A6}
.carte93 .pin{fill:var(--orange);stroke:#fff;stroke-width:3}
.carte93 .onde{fill:none;stroke:var(--orange);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:onde 2.6s infinite var(--ease)}
.carte93 .lib-siege{font:800 15px var(--f);fill:var(--noir);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.infobulle{position:absolute;z-index:3;min-width:230px;padding:14px 16px;border-radius:16px;background:#fff;box-shadow:var(--ombre-forte);pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-100% - 14px)) scale(.97);transition:opacity .15s,transform .2s var(--ease)}
.infobulle.vu{opacity:1;transform:translate(-50%,calc(-100% - 14px))}
.infobulle::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fff;transform:translateX(-50%) rotate(45deg)}
.infobulle b{display:block;font-size:17px;font-weight:800;color:var(--noir)}
.infobulle ul{display:grid;gap:4px;margin-top:8px;font-size:13.5px;color:var(--texte)}
.infobulle li{display:flex;justify-content:space-between;gap:16px}
.infobulle li span:last-child{font-weight:700;color:var(--noir)}
.infobulle em{display:block;margin-top:8px;font-style:normal;font-size:13px;font-weight:700;color:var(--orange-texte)}
.legende-carte{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:6px;font-size:12.5px;color:var(--gris);padding-right:24px}
.legende-carte i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:6px}
/* une rangée de puces sans retour à la ligne élargissait sa colonne et écrasait la carte */
.antennes>*,.heros-grille>*,.zone>*,.fondateur>*,.final>*,.faq-grille>*{min-width:0}

/* =======================================================================
   APPORTS DE METAL2000 (dernière référence) + version mobile resserrée
   ======================================================================= */
/* titres : étiquette de rubrique + ponctuation finale en orange */
.tag{display:inline-flex;align-items:center;gap:7px;margin-bottom:12px;padding:5px 12px;border-radius:var(--r-p);background:var(--orange-pale);color:var(--orange-texte);font-size:13px;font-weight:700;letter-spacing:.02em}
.tag-sombre{background:rgba(255,138,61,.14);color:#FFB27F}
.titre-section .ponct{color:var(--orange)}
.titre-section .trait{display:none}

/* barre du haut (metal2000) intégrée à l'en-tête, repliée au défilement */
.entete{top:0}
.barre-haut{max-height:42px;overflow:hidden;background:#0B0A09;border-bottom:1px solid rgba(255,255,255,.08);pointer-events:auto;transition:max-height .35s var(--ease),opacity .25s}
.barre-haut .conteneur{display:flex;align-items:center;justify-content:center;gap:22px;height:42px;font-size:13.5px;color:#E8E0D4}
.barre-haut a{font-weight:600;color:#E8E0D4}.barre-haut a:hover{color:#fff}
.barre-haut .g-note{display:inline-flex;align-items:center;gap:6px}
.barre-haut .g-note b{color:#fff}
.barre-haut .etoiles{color:#FBBC05;letter-spacing:1px}
.barre-haut .masque-m{display:none}
.entete .pilule-boite{padding-top:10px}
.entete.plein .barre-haut{max-height:0;opacity:0}
.entete.plein .pilule-boite{padding-top:12px}
.cercle-main{position:relative;display:inline-block;padding:0 6px;font-weight:800;color:#fff}
.cercle-main svg{position:absolute;left:-7px;top:-6px;width:calc(100% + 14px);height:calc(100% + 12px);color:#FF8A3D;overflow:visible;pointer-events:none}
@media (min-width:1080px){.barre-haut .conteneur{justify-content:space-between}.barre-haut .masque-m{display:inline-flex}}
.heros{padding-top:150px}
@media (min-width:1080px){.heros{padding-top:170px}}

/* trait tracé à la main sous le titre du héros */
.souligne{position:relative;display:inline-block;white-space:nowrap}
.souligne svg{position:absolute;left:-1%;bottom:-.2em;width:102%;height:.34em;color:var(--orange);overflow:visible}

/* cartes de réassurance à cheval sur le bas du héros (metal2000) */
.heros{padding-bottom:88px}
.reassu{position:relative;z-index:3;margin-top:-62px}
.reassu .liste{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 20px 14px;margin-inline:-20px;scrollbar-width:none}
.reassu .liste::-webkit-scrollbar{display:none}
.reassu .item{scroll-snap-align:start;display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--r-l);background:#fff;box-shadow:0 18px 40px -22px rgba(40,25,10,.4);border:1px solid #EFE6DA}
.reassu .sceau{flex:none;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:var(--orange-texte);background:radial-gradient(circle,#fff 52%,transparent 53%),conic-gradient(var(--orange) 0 100%);padding:3px}
.reassu .sceau span{width:100%;height:100%;border-radius:50%;background:var(--orange-pale);display:grid;place-items:center;border:2px dashed #F2B48A}
.reassu b{display:block;font-size:16px;color:var(--noir);line-height:1.25}
.reassu p{font-size:14px;color:var(--gris);margin-top:4px;line-height:1.45}
@media (min-width:900px){.reassu .liste{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;padding:0;margin:0}}

/* bande des types de clients qui défile (metal2000) */
.clients{padding-block:28px;border-block:1px solid var(--trait);overflow:hidden;background:#fff}
.clients .piste{display:flex;width:max-content;animation:defile 40s linear infinite}
.clients:hover .piste{animation-play-state:paused}
.clients .el{display:inline-flex;align-items:center;gap:12px;padding:0 30px;font-size:16px;font-weight:700;color:var(--noir);white-space:nowrap}
.clients .el .ico{width:42px;height:42px}
@keyframes defile{to{transform:translateX(-50%)}}

/* portrait avec pastilles qui débordent (metal2000) */
.portrait-boite{position:relative;padding-bottom:34px}
.portrait{border-radius:26px 26px 26px 80px}
.pastilles{position:absolute;left:-10px;bottom:0;display:flex;gap:8px;padding:10px;border-radius:22px;background:#fff;box-shadow:var(--ombre)}
.pastilles span{display:grid;justify-items:center;gap:4px;min-width:84px;padding:8px 6px;border-radius:14px;background:var(--beige-clair);font-size:12px;font-weight:700;color:var(--noir);text-align:center;line-height:1.2}
.pastilles svg{color:var(--orange-texte)}

/* conseils (journal de metal2000) */
.journal{display:grid;gap:18px}
@media (min-width:900px){.journal{grid-template-columns:repeat(3,1fr)}}
.billet{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait);transition:box-shadow .25s,transform .25s var(--ease)}
.billet:hover{box-shadow:var(--ombre);transform:translateY(-3px)}
.billet .meta{display:flex;justify-content:space-between;gap:10px}
.billet .cat{font-size:12.5px;font-weight:700;color:#137A40;background:var(--vert-pale);padding:4px 10px;border-radius:var(--r-p)}
.billet .date{font-size:12.5px;font-weight:700;color:#fff;background:var(--noir);padding:4px 10px;border-radius:var(--r-p)}
.billet h3{font-size:19px;line-height:1.3}
.billet p{font-size:15px;color:var(--gris)}
.billet .lien{margin-top:auto;align-self:flex-start;font-size:14.5px}

/* pied de page : boutons de contact + notes (metal2000) */
.pied-boutons{display:grid;gap:10px;margin-top:20px;max-width:300px}
.pied-boutons a{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border-radius:var(--r-p);border:1.5px solid rgba(255,255,255,.22);color:#fff;font-weight:700}
.pied-boutons a:first-child{background:var(--orange);border-color:var(--orange)}
.pied-boutons a:hover{border-color:#fff}
.pied-notes{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.pied-notes>span,.pied-notes>a{display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);font-size:13px;color:#E8E0D4}
.pied-notes b{color:#fff}
.pied-notes .etoiles{color:#FBBC05}

/* mobile : carrousels plutôt que piles (Depanneo, metal2000) */
@media (max-width:699px){
  .cartes,.reals,.avis-grille,.etapes,.journal{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 16px;scrollbar-width:none}
  .cartes::-webkit-scrollbar,.reals::-webkit-scrollbar,.avis-grille::-webkit-scrollbar,.etapes::-webkit-scrollbar,.journal::-webkit-scrollbar{display:none}
  .cartes>*,.reals>*,.avis-grille>*,.etapes>*,.journal>*{scroll-snap-align:start}
  .section{padding-block:64px}
  .glisser{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:600;color:var(--gris)}
  .heros .points li{font-size:16px}
}
.glisser{display:none}
@media (prefers-reduced-motion:reduce){.clients .piste{animation:none}}

/* héros : titre blanc, la promesse soulignée à la main en orange (metal2000) */
.heros h1 .accent{color:#fff;font-weight:800}
.heros h1 .ponct{color:#FF8A3D}
.heros h1 .souligne svg{color:var(--orange)}
.barre-haut .conteneur>span{display:inline-flex;align-items:center;gap:6px}
.barre-haut svg{flex:none}
@media (max-width:1079px){.barre-haut .conteneur{height:36px;font-size:13px}.barre-haut{max-height:36px}}
.clients .ligne{margin:0;padding:0}
.clients .el .ico{background:var(--beige-clair);color:var(--orange-texte)}

/* revue du 06/10 */
.cercle-main svg,.souligne svg{max-width:none}          /* img,svg{max-width:100%} rognait les tracés à la main */
.cercle-main{margin-inline:6px}
.fond-beige .tag,.fondateur .tag,.antennes .tag{background:#fff}
.portrait .tag-visuel{left:12px;top:12px;right:auto;bottom:auto}
.insec{white-space:nowrap}
.final .rappel h2{font-size:22px;color:var(--noir)}

/* barre du haut : sur mobile, seule la promesse « 24h/24 » reste */
.barre-haut .conteneur>.masque-m{display:none}
@media (min-width:1080px){.barre-haut .conteneur>.masque-m{display:inline-flex}}
/* tarifs sur mobile : une ligne compacte, prix à droite (Depanneo) */
@media (max-width:899px){
  .ligne-prix{grid-template-columns:1fr auto;gap:2px 14px;padding:15px 18px}
  .ligne-prix .k{display:none}
  .ligne-prix .montant{grid-column:2;grid-row:1;align-self:center;text-align:right;white-space:nowrap;font-size:17.5px}
  .ligne-prix b{font-size:15.5px}
  .ligne-prix small{font-size:13px}
}
/* logos assureurs sur mobile : une grille serrée plutôt que trois lignes inégales */
@media (max-width:699px){.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px}.logos img{height:26px;justify-self:center}}

/* ---------- rappel : dans le héros sur grand écran, en panneau sur mobile (HBHS, metal2000) ---------- */
.fermer-panneau{display:none}
@media (max-width:1079px){
  .rappel-panneau{position:fixed;left:0;right:0;bottom:0;z-index:80;max-height:92vh;overflow-y:auto;border-radius:24px 24px 0 0;
    padding:26px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(105%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .rappel-panneau.ouvert{transform:none;visibility:visible}
  .rappel-panneau h2{padding-right:44px}
  .rappel-panneau .fermer-panneau{display:grid;place-items:center;position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;background:var(--beige-clair);color:var(--noir)}
  .voile-rappel{position:fixed;inset:0;z-index:79;background:rgba(18,18,18,.55)}
}
@media (min-width:1080px){.voile-rappel{display:none!important}}

/* ---------- blocs des pages intérieures ---------- */
.fil{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.fil span{margin:0}
.fil b{color:#fff;font-weight:600}
.deplacement{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 18px;border-radius:var(--r-m);background:var(--beige-clair);font-size:14.5px;color:var(--texte)}
.deplacement svg{flex:none;color:var(--orange-texte);margin-top:1px}
.canaux{display:grid;gap:10px;margin-top:22px}
@media (min-width:700px){.canaux{grid-template-columns:repeat(3,1fr)}}
.canal{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-m);background:#fff;border:1px solid var(--trait);transition:border-color .2s,box-shadow .2s}
.canal:hover{border-color:#D8C7B2;box-shadow:var(--ombre)}
.canal b{display:block;font-size:15.5px;color:var(--noir);line-height:1.2}
.canal small{display:block;font-size:13px;color:var(--gris);margin-top:2px}
.canal-urgence{background:var(--noir);border-color:var(--noir)}
.canal-urgence b{color:#fff}.canal-urgence small{color:#E8E0D4;font-weight:700;font-size:14px}
.canal-urgence .ico{background:var(--orange);color:#fff}
.ico-wa{background:#E7F8EE!important;color:#1A9E4B!important}
.pied-boutons a svg{flex:none}

/* ---------- carte zoomée d'une commune ---------- */
.carte93.zoom .commune{stroke-width:.5}
.carte93.zoom .voisin{stroke-width:.4}
.carte93.zoom .commune.ici{fill:var(--orange)}
.carte93.zoom .commune.ici:hover,.carte93.zoom .commune.ici.actif{fill:var(--orange-fonce)}
.carte93.zoom .commune.siege{fill:#3A302A}
.carte93.zoom .lib-siege{font-size:6px;stroke-width:1.5px}
.carte93.zoom .lib-commune{font:600 4.6px var(--f);fill:#6B6157;text-anchor:middle;paint-order:stroke;stroke:#FBF8F3;stroke-width:1.1px;stroke-linejoin:round;pointer-events:none}
.carte93.zoom .lib-ici{font:800 7.2px var(--f);fill:var(--noir);text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:1.8px;stroke-linejoin:round;pointer-events:none}
.carte93.zoom .lib-km{font:800 5px var(--f);fill:var(--orange-texte);text-anchor:middle;paint-order:stroke;stroke:#fff;stroke-width:1.5px;stroke-linejoin:round;pointer-events:none}
.carte93.zoom .trajet line{stroke:var(--noir);stroke-width:.9;stroke-dasharray:2.4 2;stroke-linecap:round}
.carte93.zoom .trajet circle{fill:#fff;stroke:var(--noir);stroke-width:.8}
@media (max-width:699px){
  .carte93.zoom .lib-commune{font-size:6.4px;stroke-width:1.6px}
  .carte93.zoom .lib-ici{font-size:9.5px;stroke-width:2.4px}
  .carte93.zoom .lib-km{font-size:7.5px;stroke-width:2px}
  .carte93.zoom .lib-siege{font-size:8.5px;stroke-width:2px}
}

/* ---------- pages intérieures ---------- */
.heros-page .heros-grille{padding-bottom:28px}
.heros-page h1{font-size:clamp(2.1rem,3.8vw,3.1rem)}
/* situations traitées : intro + liste à cocher */
.situations{display:grid;gap:32px;align-items:start}
@media (min-width:960px){.situations{grid-template-columns:.9fr 1.1fr;gap:64px}}
.liste-check{display:grid;gap:10px}
@media (min-width:640px){.liste-check{grid-template-columns:1fr 1fr}}
.liste-check li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);background:var(--beige-clair);font-weight:600;color:var(--noir);font-size:15.5px;line-height:1.4}
.liste-check svg{flex:none;color:var(--vert)}
/* parti pris : visuel + options */
.parti-pris{display:grid;gap:32px;align-items:center}
@media (min-width:960px){.parti-pris{grid-template-columns:.85fr 1.15fr;gap:64px}}
.parti-visuel{position:relative;aspect-ratio:4/5;border-radius:26px 26px 26px 80px;overflow:hidden;background:var(--beige)}
.parti-visuel .visuel{position:absolute!important;inset:0}
.options{display:grid;gap:10px;margin-top:22px;counter-reset:o}
.options li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--trait);background:#fff}
.options li>span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--noir);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.options b{display:block;color:var(--noir);font-size:16.5px}
.options small{display:block;color:var(--gris);font-size:14.5px;margin-top:2px}
.decide{display:flex;gap:10px;align-items:center;margin-top:16px;font-weight:700;color:#137A40}
/* cas réel : carte sombre + avant / après */
.cas-reel{position:relative;overflow:hidden;display:grid;gap:28px;border-radius:28px;background:var(--noir);color:#D8D0C4;padding:32px 22px}
.cas-reel::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 0% 100%,rgba(226,91,6,.35),rgba(18,18,18,0) 60%)}
.cas-reel>*{position:relative;min-width:0}
.cas-reel .titre-section{color:#fff}
.cas-reel .titre-section span.leger{color:#CFC6BA}
.cas-texte p{margin-top:16px;max-width:52ch}
.cas-texte .btn{margin-top:24px}
.avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avant-apres figure{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:#2A2622}
.avant-apres img{width:100%;height:100%;object-fit:cover}
.avant-apres figcaption{position:absolute;left:10px;bottom:10px;padding:5px 11px;border-radius:var(--r-p);background:#fff;color:var(--noir);font-size:13px;font-weight:800}
@media (min-width:960px){.cas-reel{grid-template-columns:1fr 1fr;padding:56px;gap:48px;align-items:center}}
/* liens vers les autres prestations */
.liens-presta{display:grid;gap:10px}
@media (min-width:760px){.liens-presta{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.liens-presta{grid-template-columns:repeat(3,1fr)}}
.liens-presta a{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-m);border:1px solid var(--trait);background:#fff;transition:border-color .2s,box-shadow .2s}
.liens-presta a:hover{border-color:#D8C7B2;box-shadow:var(--ombre)}
.liens-presta a>span:nth-child(2){flex:1;min-width:0}
.liens-presta b{display:block;color:var(--noir);font-size:15.5px;line-height:1.3}
.liens-presta small{display:block;color:var(--gris);font-size:13.5px;margin-top:3px;line-height:1.4}
.liens-presta a>svg{flex:none;color:var(--orange-texte)}
/* commune : carte zoomée */
.antennes-commune .texte p{margin-top:14px}
.petit-titre{margin-top:22px!important;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.sur-devis{margin-top:22px;padding:20px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.sur-devis b{display:flex;gap:10px;align-items:center;color:var(--noir);font-size:16.5px}
.sur-devis b svg{color:var(--orange-texte)}
.sur-devis ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sur-devis li{padding:7px 13px;border-radius:var(--r-p);background:var(--beige-clair);font-size:14px;font-weight:600;color:var(--noir)}
/* porte claquée / fermée à clé */
.duo-portes{display:grid;gap:16px}
@media (min-width:900px){.duo-portes{grid-template-columns:1fr 1fr;gap:22px}}
.porte-cas{padding:24px 22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.cas-prix{display:inline-flex;padding:6px 12px;border-radius:var(--r-p);background:var(--beige);color:var(--noir);font-size:14px;font-weight:800}
.cas-prix.ok{background:var(--vert-pale);color:#137A40}
.porte-cas ul{display:grid;gap:14px;margin-top:18px}
.porte-cas li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--gris);line-height:1.45}
.porte-cas li b{display:block;color:var(--noir);font-size:16px}
.porte-cas li svg{flex:none;margin-top:2px}
.porte-cas li.ok svg{color:var(--vert)}
.porte-cas li.ko svg{color:var(--orange-texte)}
/* situations courantes */
.situ-cartes{display:grid;gap:14px}
@media (min-width:700px){.situ-cartes{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.situ-cartes{grid-template-columns:repeat(5,1fr)}}
.situ{padding:22px 20px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.situ b{display:block;margin-top:14px;color:var(--noir);font-size:17px}
.situ p{margin-top:6px;font-size:14.5px;color:var(--gris)}
/* méthodes d'ouverture */
.methodes{display:grid;gap:16px}
@media (min-width:900px){.methodes{grid-template-columns:1fr 1fr;gap:22px}}
.methode{padding:26px 24px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.methode header{display:flex;gap:14px;align-items:center}
.methode h3{font-size:21px}
.methode header small{display:block;color:var(--gris);font-size:14px;margin-top:2px}
.methode p{margin-top:16px;font-size:15.5px;color:var(--texte)}
.methode dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 0}
.methode dl div{padding:12px;border-radius:12px;background:var(--beige-clair)}
.methode dt{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.methode dd{margin:2px 0 0;font-size:16px;font-weight:800;color:var(--noir)}
.fondateur-court{grid-template-columns:1fr!important}
/* tarifs : travaux sur devis, paiement */
.devis-grille{display:grid;gap:12px}
@media (min-width:640px){.devis-grille{grid-template-columns:1fr 1fr}}
@media (min-width:1080px){.devis-grille{grid-template-columns:repeat(4,1fr)}}
.devis-el{display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait);transition:border-color .2s,box-shadow .2s}
.devis-el:hover{border-color:#D8C7B2;box-shadow:var(--ombre)}
.devis-el b{color:var(--noir);font-size:16.5px;line-height:1.3;margin-top:6px}
.devis-el small{color:var(--gris);font-size:13.5px}
.paiement{display:grid;gap:24px;align-items:start}
@media (min-width:960px){.paiement{grid-template-columns:.8fr 1.2fr;gap:56px}}
.pastilles-paiement{display:flex;flex-wrap:wrap;gap:10px}
.pastilles-paiement li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-p);background:#fff;border:1px solid var(--trait);font-weight:700;color:var(--noir);font-size:15px}
.pastilles-paiement svg{color:var(--vert)}
@media (max-width:699px){
  .situ-cartes,.liens-presta{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-20px;padding:4px 20px 16px;scrollbar-width:none}
  .situ-cartes::-webkit-scrollbar,.liens-presta::-webkit-scrollbar{display:none}
  .situ-cartes>*,.liens-presta>*{scroll-snap-align:start}
  .methode dl{grid-template-columns:1fr 1fr 1fr}
  .parti-visuel{aspect-ratio:4/3;border-radius:22px 22px 22px 56px}
  .portrait{aspect-ratio:1/1}
}

/* trois étapes : trois colonnes, pas une case vide */
@media (min-width:900px){.etapes:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}
.devis-el{flex-direction:row;align-items:center;gap:14px}
.devis-el b{margin-top:0}
@media (max-width:699px){.methode dd{font-size:14.5px}}

/* la barre d'appel mobile glisse hors de l'écran tant que l'appel du héros est visible */
.collant{transition:transform .3s var(--ease)}
.collant.cache{transform:translateY(110%)}
.sans-js .collant.cache{transform:none}

/* =======================================================================
   DOSSIER DE CONCEPTION
   ======================================================================= */
.doc{background:#fff}
.doc-barre{position:sticky;top:0;z-index:20;background:var(--noir);border-bottom:1px solid rgba(255,255,255,.08)}
.doc-barre .conteneur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.doc-barre .marque img{width:40px;height:40px}
.doc-barre nav{display:flex;gap:4px;flex-wrap:wrap}
.doc-barre nav a{padding:8px 12px;border-radius:var(--r-p);color:#E8E0D4;font-size:14.5px;font-weight:600}
.doc-barre nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.doc-heros{background:var(--noir);color:#D8D0C4;padding:64px 0 56px;position:relative;overflow:hidden}
.doc-heros::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0%,rgba(226,91,6,.35),rgba(18,18,18,0) 60%)}
.doc-heros .conteneur{position:relative}
.doc-heros h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch;margin-top:6px}
.doc-heros h1 .ponct{color:#FF8A3D}
.doc-chapo{font-size:clamp(1.05rem,1.6vw,1.2rem);max-width:62ch;margin-top:18px;color:#E2D9CC}
.doc-chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px;max-width:900px}
@media (min-width:860px){.doc-chiffres{grid-template-columns:repeat(4,1fr)}}
.doc-chiffres div{padding:16px;border-radius:var(--r-m);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.doc-chiffres b{display:block;color:#fff;font-size:24px;font-weight:800;line-height:1.1}
.doc-chiffres span{display:block;font-size:13.5px;margin-top:4px}
.doc-sommaire{border-bottom:1px solid var(--trait);background:var(--beige-clair)}
.doc-sommaire ol{display:flex;gap:6px;overflow-x:auto;padding:12px 0;scrollbar-width:none;counter-reset:s}
.doc-sommaire ol::-webkit-scrollbar{display:none}
.doc-sommaire li{flex:none;counter-increment:s}
.doc-sommaire a{display:inline-flex;gap:6px;padding:8px 13px;border-radius:var(--r-p);background:#fff;border:1px solid var(--trait);font-size:14px;font-weight:700;color:var(--noir)}
.doc-sommaire a::before{content:counter(s);color:var(--orange-texte)}
.doc-section{padding:72px 0}
@media (max-width:699px){.doc-section{padding:52px 0}}
.doc .titre-section{margin-bottom:6px}
.doc-grille-3{display:grid;gap:14px;margin-top:26px}
@media (min-width:760px){.doc-grille-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.doc-grille-3{grid-template-columns:repeat(3,1fr)}}
.doc-grille-2{display:grid;gap:14px}
@media (min-width:960px){.doc-grille-2{grid-template-columns:1fr 1fr}}
.doc-carte{position:relative;padding:22px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.fond-beige .doc-carte{border-color:#EADFCF}
.doc-carte h3{font-size:18.5px}
.doc-carte p{margin-top:8px;font-size:15.5px;color:var(--texte)}
.doc-carte h4,.doc-slot h4{margin-top:18px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.doc-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);color:#fff;font-weight:800;font-size:14px;margin-bottom:10px}
.doc-carte-non h3::before{content:"✕";color:var(--orange-texte);margin-right:8px}
/* avant / après */
.doc-aa{margin-top:26px;padding:22px;border-radius:var(--r-l);background:#fff;border:1px solid #EADFCF}
.doc-aa header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px}
.doc-aa h3{font-size:21px}
.doc-mesure{font-size:15px;color:var(--gris)}
.doc-mesure b{color:var(--noir)}
.doc-mesure em{font-style:normal;font-weight:800;color:#137A40;background:var(--vert-pale);padding:2px 9px;border-radius:var(--r-p);margin-left:6px}
.doc-aa-grille{display:grid;gap:16px;margin-top:16px}
@media (min-width:960px){.doc-aa-grille{grid-template-columns:1fr 1fr}}
.doc-aa figure{margin:0}
.doc-aa figcaption{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.doc-aa figcaption.v4{color:var(--orange-texte)}
.doc-duo{display:grid;grid-template-columns:1fr 26%;gap:8px;align-items:start}
.doc-duo img{width:100%;border-radius:10px;border:1px solid var(--trait)}
.doc-notes{display:grid;gap:6px;margin-top:14px;font-size:15px;color:var(--texte)}
.doc-notes li{padding-left:18px;position:relative}
.doc-notes li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
/* ce qu'on garde */
.doc-liste-2{display:grid;gap:10px;margin-top:26px}
@media (min-width:860px){.doc-liste-2{grid-template-columns:1fr 1fr}}
.doc-item{display:flex;gap:12px;padding:16px 18px;border-radius:var(--r-m);background:var(--beige-clair)}
.doc-item svg{flex:none;color:var(--vert);margin-top:2px}
.doc-item b{color:var(--noir)}
.doc-item p{font-size:15px;color:var(--texte);margin-top:2px}
/* références */
.doc-ref{display:grid;gap:22px;margin-top:22px;padding:22px;border-radius:var(--r-l);background:#fff;border:1px solid #EADFCF}
@media (min-width:1000px){.doc-ref{grid-template-columns:1.15fr .85fr;align-items:start}}
.doc-ref-img{position:relative;padding-right:18%}
.doc-ref-img img{width:100%;border-radius:12px;border:1px solid var(--trait)}
.doc-ref-img .mob{position:absolute;right:0;bottom:-10px;width:24%;border-radius:12px;box-shadow:var(--ombre-forte)}
.doc-ref h3{font-size:22px}
.doc-meta{font-size:14px;color:var(--gris);margin-top:4px}
.doc-meta a{color:var(--orange-texte);font-weight:700}
.doc-ref ul{display:grid;gap:6px;margin-top:8px;font-size:15px}
.doc-ref ul li{padding-left:22px;position:relative}
.doc-ref ul.oui li::before{content:"+";position:absolute;left:2px;font-weight:800;color:#137A40}
.doc-ref ul.non li::before{content:"−";position:absolute;left:2px;font-weight:800;color:var(--orange-texte)}
.doc-fig{margin:22px 0 0}
.doc-fig img{width:100%;border-radius:var(--r-l);border:1px solid var(--trait)}
.doc-fig figcaption{font-size:14px;color:var(--gris);margin-top:8px}
/* aspects */
.doc-aspects{display:grid;gap:14px;margin-top:26px}
.doc-aspect{padding:22px;border-radius:var(--r-l);border:1px solid var(--trait);background:#fff}
.doc-aspect h3{display:flex;gap:12px;align-items:center;font-size:19px}
.doc-aspect h3 span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--noir);color:#fff;font-size:13.5px}
.doc-aspect dl{display:grid;gap:10px;margin:14px 0 0}
@media (min-width:860px){.doc-aspect dl{grid-template-columns:repeat(4,1fr)}}
.doc-aspect dl div{padding:12px 14px;border-radius:12px;background:var(--beige-clair)}
.doc-aspect dt{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.doc-aspect dd{margin:4px 0 0;font-size:14.5px;color:var(--texte);line-height:1.5}
.doc-julior{margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--orange-pale);font-size:15.5px;color:var(--noir)}
.doc-julior b{display:block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-texte);margin-bottom:3px}
/* charte */
.doc-couleurs{display:grid;gap:12px;margin-top:26px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.doc-couleur{padding:12px;border-radius:var(--r-m);border:1px solid var(--trait);display:grid;gap:3px}
.doc-couleur span{height:62px;border-radius:10px;border:1px solid rgba(0,0,0,.06);margin-bottom:6px}
.doc-couleur b{color:var(--noir)}
.doc-couleur code{font-size:13px;color:var(--gris)}
.doc-couleur small{font-size:13px;color:var(--texte);line-height:1.4}
.doc-couleur small.c{color:#137A40;font-weight:600}
/* brief des visuels */
.doc-ol{display:grid;gap:8px;margin-top:10px;padding-left:20px;list-style:decimal;font-size:15px;color:var(--texte)}
.doc-ul{display:grid;gap:6px;margin-top:8px;padding-left:20px;list-style:disc;font-size:15px;color:var(--texte)}
.doc-prompt{position:relative;margin-top:10px;padding:16px 16px 54px;border-radius:14px;background:var(--noir);color:#F2E9DC;font-size:14.5px;line-height:1.6}
.doc-prompt p+p{margin-top:10px}
.doc-prompt .style{color:#A89F93}
.doc-copier{position:absolute;right:12px;bottom:12px;padding:8px 16px;border-radius:var(--r-p);background:var(--orange);color:#fff;font-weight:700;font-size:14px}
.doc-copier:hover{background:var(--orange-fonce)}
.doc-pastilles{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.doc-pastilles li{padding:6px 12px;border-radius:var(--r-p);background:#FDECEA;color:#9B2C1F;font-size:13.5px;font-weight:600}
.doc-pastilles li.aussi{background:var(--beige);color:var(--gris)}
.doc-slot{margin-top:18px;padding:22px;border-radius:var(--r-l);background:#fff;border:1px solid #EADFCF;scroll-margin-top:80px}
.doc-slot header{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.doc-slot header h3{font-size:20px;flex:1;min-width:200px}
.doc-code{padding:6px 12px;border-radius:10px;background:var(--noir);color:#fff;font-weight:800;font-size:15px}
.doc-badge{padding:5px 12px;border-radius:var(--r-p);font-size:13px;font-weight:800}
.doc-badge.ia{background:var(--orange-pale);color:var(--orange-texte)}
.doc-badge.reel{background:var(--vert-pale);color:#137A40}
.doc-slot-grille{display:grid;gap:18px;margin-top:16px}
@media (min-width:960px){.doc-slot-grille{grid-template-columns:.95fr 1.05fr;align-items:start}}
.doc-slot figure{margin:0}
.doc-slot figure img{width:100%;border-radius:12px;border:1px solid var(--trait)}
.doc-slot figure figcaption{font-size:13px;color:var(--gris);margin-top:6px}
.doc-fiche{display:grid;gap:10px;margin:0}
.doc-fiche div{padding:12px 14px;border-radius:12px;background:var(--beige-clair)}
.doc-fiche dt{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gris)}
.doc-fiche dd{margin:3px 0 0;font-size:15px;color:var(--texte)}
/* suite */
.doc-etapes{display:grid;gap:12px;margin-top:12px}
.doc-etapes li{display:flex;gap:12px}
.doc-etapes span{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--noir);color:#fff;font-weight:800;font-size:14px}
.doc-etapes b{color:var(--noir)}
.doc-etapes p{margin-top:2px !important;font-size:14.5px !important}
.doc-points{display:grid;gap:10px;margin-top:12px}
.doc-points li{padding:12px 14px;border-radius:12px;background:var(--beige-clair)}
.doc-points b{display:block;color:var(--noir)}
.doc-points span{display:block;font-size:14.5px;color:var(--texte);margin-top:2px}
.doc-pied{background:var(--noir);color:#B8AEA1;padding:28px 0;font-size:14px}
.doc-pied .conteneur{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.doc-pied a{color:#fff;font-weight:700}
@media (max-width:699px){.d-bureau{display:none}}
.doc-ref h4{margin-top:16px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.doc-grille-2{align-items:start}
@media (max-width:699px){
  .doc-barre{position:static}
  .doc-barre nav{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
  .doc-barre nav::-webkit-scrollbar{display:none}
  .doc-barre nav a{flex:none;background:rgba(255,255,255,.08)}
}

/* version de consultation (lien privé) : la maquette se présente comme telle */
.bandeau-maquette{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;min-height:30px;padding:5px 16px;background:var(--orange-pale);color:var(--orange-texte);font-size:12.5px;font-weight:700;pointer-events:auto;text-align:center;line-height:1.3}
.bandeau-maquette a{color:var(--noir);text-decoration:underline;text-underline-offset:2px}
.publication .heros{padding-top:182px}
@media (min-width:1080px){.publication .heros{padding-top:202px}}
.publication .maquette{display:none!important}
html:has(body.publication){scroll-padding-top:132px}

/* =======================================================================
   v5 — retours du 07/10 : héros compact, moins d'effets « générés »
   ======================================================================= */
/* ---- héros compact : service, zone, rapidité, appel ---- */
.heros{padding:140px 0 84px}
@media (min-width:1080px){.heros{padding:152px 0 96px}}
.publication .heros{padding-top:172px}
@media (min-width:1080px){.publication .heros{padding-top:184px}}
.heros-photo img{object-position:var(--pos,center)}
.heros-photo::after{background:
  linear-gradient(90deg,rgba(18,18,18,.93) 0%,rgba(18,18,18,.82) 42%,rgba(18,18,18,.5) 72%,rgba(18,18,18,.35) 100%),
  linear-gradient(0deg,rgba(18,18,18,.9) 0%,rgba(18,18,18,0) 38%)}
@media (max-width:1079px){.heros-photo::after{background:linear-gradient(180deg,rgba(18,18,18,.72) 0%,rgba(18,18,18,.86) 55%,rgba(18,18,18,.95) 100%)}}
.heros-grille{padding-bottom:0;gap:28px}
@media (min-width:1080px){.heros-grille{grid-template-columns:1.25fr .75fr;gap:52px;align-items:center;padding-bottom:0}}
.heros-texte{min-width:0}
.heros .fil{margin-bottom:14px}
.heros-tag{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#F2C9A6}
.heros-tag svg{color:#FF8A3D;flex:none}
.heros h1{font-size:clamp(1.85rem,3.3vw,2.8rem);line-height:1.08;margin-top:12px;max-width:21ch;text-wrap:balance}
.promesse{margin-top:12px;font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#FF8A3D}
.promesse .souligne svg{color:#fff;opacity:.9}
.heros-sous{margin-top:10px;font-size:17px;color:#E2D9CC;max-width:54ch}
.heros-actions{margin-top:22px;gap:12px 14px}
.btn-rappel{display:inline-flex;align-items:center;min-height:56px;padding:0 22px;border-radius:var(--r-p);border:1.5px solid rgba(255,255,255,.45);color:#fff;font-weight:700;font-size:16px;transition:border-color .2s,background .2s}
.btn-rappel:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.heros-preuves{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:18px;font-size:14.5px;color:#D8D0C4}
.heros-preuves>span,.heros-preuves>a{display:inline-flex;align-items:center;gap:7px}
.heros-preuves b{color:#fff}
.heros-preuves .etoiles{color:#FBBC05;letter-spacing:1px}
.heros-preuves .fait svg{color:#FF8A3D;flex:none}
.heros .rappel{padding:22px}
.heros .rappel h2{font-size:19px;line-height:1.25}
.heros .rappel .sous{font-size:14px}
.heros .champs{gap:10px;margin-top:14px}
.heros .champ input,.heros .champ select{min-height:46px;padding:10px 14px}
@media (max-width:699px){
  .heros{padding-bottom:76px}
  .heros-sous{font-size:16px}
  .heros-preuves .fait{display:none}
  .heros-actions{margin-top:18px}
  .btn-rappel{min-height:auto;padding:4px 0;border:0;border-bottom:2px solid rgba(255,255,255,.6);border-radius:0;font-size:15px}
}

/* ---- surtitres : typographiques, plus de pastille de couleur ---- */
.surtitre{margin:0 0 10px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-texte)}
.surtitre-sombre{color:#FFB27F}

/* ---- pictos : sans pastille (le jeu définitif viendra des prompts du dossier) ---- */
.ico,.ico-carre{width:auto;height:auto;background:none!important;border-radius:0;color:var(--orange-texte)}
.canal-urgence .ico{color:#FF8A3D}
.ico-wa{background:none!important;color:#1A9E4B!important}
.clients .el .ico{width:auto;height:auto}

/* ---- réassurance : cartes simples, pictogramme nu ---- */
.reassu .item{gap:14px;padding:18px;border-radius:16px;box-shadow:0 16px 36px -24px rgba(40,25,10,.45)}
.item-ico{flex:none;color:var(--orange-texte);margin-top:1px}
.reassu b{font-size:16px}

/* ---- tarifs : les frais de déplacement dans le tableau, la note « Important » sobre ---- */
.groupe-prix{padding:12px 20px;background:var(--beige-clair);border-top:1px solid var(--trait);font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gris)}
@media (min-width:900px){.groupe-prix{padding:12px 24px}}
.ligne-prix.depl .montant{color:var(--noir)}
.ligne-prix .k{color:var(--orange-texte)}
/* « Important » = pied du tableau de prix : même carte, bouclier orange, étiquette comme celles des sections */
.table-prix:has(~ .important){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.important{display:flex;gap:16px;align-items:flex-start;margin-top:0;padding:20px 22px 22px;background:var(--beige-clair);border:1px solid var(--trait);border-radius:0 0 var(--r-l) var(--r-l)}
.fond-beige .important{background:#FCFAF6}
.important-ico{flex:none;color:var(--orange-texte);line-height:0;margin-top:2px}
.important-ico .ic{width:30px;height:30px}
.important .important-titre{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--orange-texte);margin-bottom:4px}
.important p{font-size:15.5px;line-height:1.55;color:var(--texte);max-width:86ch}
.important b{color:var(--noir)}
@media (min-width:900px){.important{padding:22px 24px 24px 26px;gap:20px}}
.important+.note{margin-top:14px;padding-inline:4px}

/* ---- étapes : une frise numérotée ---- */
.frise{display:grid;position:relative}
.pas{display:grid;grid-template-columns:40px 1fr;gap:16px;position:relative;padding-bottom:26px}
.pas>div{min-width:0}
.pas::before{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--trait)}
.pas:last-child{padding-bottom:0}
.pas:last-child::before{display:none}
.pas-num{width:40px;height:40px;border-radius:50%;background:var(--noir);color:#fff;font-weight:800;font-size:16px;display:grid;place-items:center;position:relative;z-index:1}
.pas h3{font-size:18.5px;margin-top:8px}
.pas p{font-size:15px;color:var(--gris);margin-top:6px}
.pas .pas-fait{display:flex;align-items:center;gap:7px;margin-top:10px;font-weight:700;color:var(--orange-texte);font-size:14px}
.pas-fait svg{flex:none}
@media (min-width:900px){
  .frise{grid-template-columns:repeat(4,1fr);gap:28px}
  .frise:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
  .pas{grid-template-columns:1fr;gap:14px;padding-bottom:0}
  .pas::before{left:52px;right:-16px;top:19px;bottom:auto;width:auto;height:2px}
  .pas h3{margin-top:0}
}

/* ---- bande d'urgence : la photo fondue dans le bloc, sans coupure ---- */
.bande{display:block;min-height:380px;isolation:isolate}
@media (min-width:900px){.bande{display:block}}
.bande::before{z-index:1;background:radial-gradient(70% 120% at 0% 100%,rgba(226,91,6,.32),rgba(18,18,18,0) 60%)}
.bande-texte{position:relative;z-index:2;max-width:600px}
.bande-visuel{position:absolute;top:0;right:0;bottom:0;width:64%;min-height:0;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 52%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 52%)}
.bande-visuel img{object-position:62% 50%}
.bande-visuel::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,0) 55%),linear-gradient(0deg,rgba(18,18,18,.4) 0%,rgba(18,18,18,0) 40%)}
.bande-visuel .tag-visuel{z-index:2}
@media (max-width:899px){
  .bande-visuel{left:0;width:100%;bottom:auto;height:250px;
    -webkit-mask-image:linear-gradient(180deg,#000 35%,transparent 100%);mask-image:linear-gradient(180deg,#000 35%,transparent 100%)}
  .bande-visuel::after{background:linear-gradient(180deg,rgba(18,18,18,.15) 0%,rgba(18,18,18,.6) 100%)}
  .bande-texte{padding-top:190px}
}

/* ---- conseils, portrait : moins d'ornements ---- */
.billet .cat{background:none;padding:0;color:var(--orange-texte);text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.billet .date{background:none;padding:0;color:var(--gris);font-weight:600}
.portrait-boite{padding-bottom:0}
/* zones : la couverture régionale et ses prix */
.zones-prix{display:grid;gap:0;margin-top:18px;max-width:460px;border-top:1px solid var(--trait)}
.zones-prix li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--trait);font-size:15px}
.zones-prix b{white-space:nowrap;color:var(--noir)}
.zones-note{margin-top:8px!important;font-size:13.5px;color:var(--gris)}
@media (min-width:1080px){.heros-photo::after{background:
  linear-gradient(90deg,rgba(18,18,18,.92) 0%,rgba(18,18,18,.8) 38%,rgba(18,18,18,.38) 64%,rgba(18,18,18,.3) 100%),
  linear-gradient(0deg,rgba(18,18,18,.88) 0%,rgba(18,18,18,0) 36%)}}
@media (max-width:899px){.bande-visuel .tag-visuel{top:12px;bottom:auto}}

/* ---- icônes définitives (planche 1) : trait à la couleur du texte, un détail orange ---- */
.ic{flex:none}
.ic-accent{fill:var(--ic-accent,#E25B06)}
.ico,.ico-carre,.item-ico,.ligne-prix .k,.clients .el .ico,.mega .mega-titre .ico{color:var(--noir)}
.heros,.bande,.final,.pied,.barre-haut,.canal-urgence,.menu-m,.cas-reel,.doc-heros{--ic-accent:#FF8A3D}
.appel .pastille,.tel-entete .pastille,.appel-rond,.tel-mini span,.collant,.btn,.pied-boutons a:first-child{--ic-accent:currentColor}
.ligne-prix.depl .k{color:var(--gris)}
.item-ico .ic{width:32px;height:32px}
.ligne-prix .k .ic{width:28px;height:28px}
/* icônes des planches 2 et 3 : un peu plus grandes dans les cartes pour garder le trait lisible */
.ico .ic{width:28px;height:28px}
.situ .ico .ic,.methode .ico-carre .ic,.devis-el .ico .ic{width:34px;height:34px}
.clients .el .ico .ic{width:30px;height:30px}
.mega .mega-titre .ico .ic{width:26px;height:26px}

/* ---- formulaires branchés sur le serveur ---- */
.pot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.champ-rgpd label.rgpd{display:flex;gap:10px;align-items:flex-start;margin:2px 0 0;font-size:12.5px;font-weight:500;color:var(--gris);line-height:1.45;cursor:pointer}
.champ-rgpd input{flex:none;width:18px;height:18px;min-height:0;margin-top:1px;accent-color:var(--orange)}
.champ-rgpd.ko label.rgpd{color:#B42318}
.ko-msg{display:none;padding:14px 16px;border-radius:12px;background:#FDECEA;color:#7A1F14;font-size:14.5px;margin-top:12px}
.ko-msg b{display:block}
form.erreur .ko-msg{display:block}
.rappel button[disabled]{opacity:.7;cursor:wait}

/* note Google cliquable : renvoie vers les avis */
.lien-avis{color:inherit;text-decoration:none;cursor:pointer}
.lien-avis:hover .lien-avis-txt,.lien-avis:focus-visible .lien-avis-txt{text-decoration:underline;text-underline-offset:3px}
.lien-avis:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:8px}

/* =======================================================================
   PAGES CONVERTIES (rubriques, prestations, réalisations, entretien, articles)
   Le texte vient de la page d'origine ; ces composants le mettent en forme.
   ======================================================================= */
.corps-g{display:grid;gap:28px}
.corps-g>*{min-width:0}
.prose{max-width:74ch;display:grid;gap:14px;color:var(--texte)}
.prose h3{font-size:clamp(1.3rem,2vw,1.55rem);line-height:1.2;margin-top:14px;scroll-margin-top:110px}
.prose h3:first-child,.prose h4:first-child{margin-top:0}
.prose h4{font-size:18px;line-height:1.3;margin-top:10px}
.prose a{color:var(--orange-texte);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{color:var(--noir)}
.prose ul,.prose ol{display:grid;gap:8px;padding-left:0}
.prose ul>li{position:relative;padding-left:26px}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(45deg)}
.prose ol{counter-reset:n}
.prose ol>li{position:relative;padding-left:34px;counter-increment:n}
.prose ol>li::before{content:counter(n);position:absolute;left:0;top:.15em;width:24px;height:24px;border-radius:50%;background:var(--noir);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center}
.prose .note{font-size:14px;color:var(--gris)}
.bouton-g{margin-top:4px}
.bouton-g .lien{text-decoration:none}

/* grilles de cartes : pas de pastilles colorées, un picto au trait et un filet */
.cartes-g{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.cartes-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.cartes-g.cartes-3,.cartes-g.cartes-4{grid-template-columns:repeat(3,minmax(0,1fr))}.cartes-g.cartes-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.cartes-g.cartes-4:has(>:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}}
.carte-g{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait);min-width:0}
.fond-beige .carte-g{border-color:#EADFD0}
.carte-g-ico{color:var(--orange-texte);line-height:0}
.carte-g-ico .ic{width:34px;height:34px}
.carte-g-corps{display:grid;gap:6px}
.carte-g-titre{font-size:17px;line-height:1.3;color:var(--noir);font-weight:800;letter-spacing:-.01em}
.carte-g p{font-size:15px;color:var(--gris)}
.carte-g .liste-check-g li,.carte-g .chips-g li{font-size:14px}
a.carte-g{transition:border-color .2s,box-shadow .2s,transform .2s}
a.carte-g:hover{border-color:#D8C7B2;box-shadow:var(--ombre);transform:translateY(-2px)}
a.carte-g .carte-g-titre{color:var(--noir)}
.carte-g.avec-img{padding:0;overflow:hidden}
.carte-g.avec-img .carte-g-corps{padding:4px 18px 20px}
.carte-g-img{position:relative;display:block;aspect-ratio:4/3;background:var(--beige)}
.carte-g-img img{width:100%;height:100%;object-fit:cover}
.tag-g{display:inline-block;justify-self:start;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange-texte)}

/* liens vers d'autres pages : la grille de liens v4, sur deux colonnes à partir de la tablette */
@media (min-width:760px){.liens-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.liens-g{grid-template-columns:repeat(3,minmax(0,1fr))}}
.liens-g .ico{color:var(--orange-texte);flex:none;line-height:0}
.liens-g .ico .ic{width:30px;height:30px}
.liens-g .tag-g{display:block;margin-bottom:2px}

.liste-check-g{grid-template-columns:1fr}
@media (min-width:760px){.liste-check-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fond-beige .liste-check-g li{background:#fff}
.carte-g .liste-check-g,.encadre-g .liste-check-g{grid-template-columns:1fr}
.carte-g .liste-check-g li{padding:0;background:none;font-weight:600}

.chips-g{display:flex;flex-wrap:wrap;gap:8px}
.chips-g li{padding:8px 14px;border-radius:var(--r-p);background:var(--beige-clair);border:1px solid var(--trait);font-size:14.5px;font-weight:600;color:var(--noir)}
.fond-beige .chips-g li{background:#fff}

.fiche-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;margin:0;background:var(--trait);border:1px solid var(--trait);border-radius:var(--r-m);overflow:hidden}
.fiche-g div{padding:14px 16px;background:#fff}
.fiche-g dt{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gris)}
.fiche-g dd{margin:4px 0 0;font-weight:700;color:var(--noir);font-size:16px;line-height:1.35}

.chiffre-g{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px;padding:18px 0;border-top:2px solid var(--noir);border-bottom:1px solid var(--trait)}
.chiffre-g b{font-size:clamp(2rem,4vw,2.8rem);font-weight:800;line-height:1;color:var(--orange-texte);letter-spacing:-.03em}
.chiffre-g span{font-weight:600;color:var(--noir)}

/* encadrés : la carte « Sur devis gratuit » de la maquette — carte claire, filet fin, titre avec picto au trait orange */
.encadre-g{display:grid;gap:12px;padding:22px 24px 24px;border-radius:var(--r-l);background:#fff;border:1px solid var(--trait)}
.section:not(.fond-beige) .corps-g>.encadre-g,.prose-article>.encadre-g{background:var(--beige-clair)}
.encadre-titre{display:flex;gap:12px;align-items:flex-start;font-size:17px;font-weight:800;color:var(--noir);line-height:1.35}
.encadre-titre svg{flex:none;color:var(--orange-texte);margin-top:-1px}
.encadre-corps{display:grid;gap:10px;min-width:0}
.encadre-g.avec-titre .encadre-corps{padding-left:34px}
.encadre-corps p{font-size:15.5px;color:var(--texte);max-width:84ch}
@media (max-width:639px){.encadre-g{padding:18px 18px 20px}.encadre-g.avec-titre .encadre-corps{padding-left:0}}
.carte-g .encadre-g,.encadre-g .encadre-g{padding:0;border:0;background:none;border-radius:0}
.carte-g .encadre-g.avec-titre .encadre-corps,.encadre-g .encadre-g.avec-titre .encadre-corps{padding-left:0}
.appel-g{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:20px 22px;border-radius:var(--r-l);background:var(--noir);color:#D8D0C4}
.appel-g b{display:block;color:#fff;font-size:18px;line-height:1.3}
.appel-g span{font-size:15px}
.appel-seul{display:flex}

.photos-g{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.photos-g.photos-2,.photos-g.photos-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.photos-g.photos-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.photos-g.photos-1{max-width:640px}
.photos-g figure{position:relative;margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--beige);border:1px solid var(--trait)}
.photos-g img{width:100%;aspect-ratio:4/3;object-fit:cover}
.photos-g.photos-1 img{aspect-ratio:auto;max-height:620px}
.photos-g figcaption{padding:12px 16px;font-size:14.5px;font-weight:600;color:var(--noir);background:#fff}
.photo-label{position:absolute;left:12px;top:12px;padding:5px 11px;border-radius:var(--r-p);background:var(--noir);color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em}

.table-g{overflow-x:auto;border:1px solid var(--trait);border-radius:var(--r-m);background:#fff}
.table-g table{width:100%;border-collapse:collapse;font-size:15px}
.table-g th,.table-g td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--trait)}
.table-g tr:first-child th,.table-g tr:first-child td{border-top:0}
.table-g th{background:var(--beige-clair);font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.table-g td:first-child{font-weight:700;color:var(--noir)}

.sommaire-g{padding:18px 20px;border-radius:var(--r-l);background:var(--beige-clair);border:1px solid var(--trait)}
.fond-beige .sommaire-g{background:#fff}
.sommaire-titre{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.sommaire-g ol{display:grid;gap:4px;counter-reset:s}
.sommaire-g li{counter-increment:s;padding-left:0}
.sommaire-g li::before{content:none}
.sommaire-g a{display:flex;gap:10px;font-weight:600;color:var(--noir);text-decoration:none}
.sommaire-g a::before{content:counter(s,decimal-leading-zero);color:var(--orange-texte);font-weight:800;font-size:14px;min-width:22px}
.sommaire-g a:hover{color:var(--orange-texte)}

.faq-g{max-width:860px}
.faq-g .rep{display:grid;gap:10px}

.marques-g{display:grid;gap:22px}
@media (min-width:960px){.marques-g{grid-template-columns:.8fr 1.2fr;align-items:center;gap:56px}}

/* en-tête simple (articles, pages légales) */
.bandeau-g{padding-bottom:56px}
@media (min-width:1080px){.bandeau-g{padding-bottom:72px}}
.bandeau-g h1{max-width:26ch}
.bandeau-meta{margin-top:14px;font-size:14.5px;color:#CFC6BA}

/* article : colonne de lecture + encart d'appel qui suit la lecture */
.article-g{display:grid;gap:40px}
@media (min-width:1080px){.article-g{grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}}
.prose-article{font-size:17.5px;max-width:72ch}
.prose-article h3{margin-top:22px}
.prose-article .encadre-g,.prose-article .table-g,.prose-article .cartes-g,.prose-article .photos-g{margin-block:8px}
.article-aside{position:relative}
@media (min-width:1080px){.article-aside{position:sticky;top:120px}}
.aside-carte{display:grid;gap:14px;padding:24px 22px;border-radius:var(--r-l);background:var(--noir);color:#D8D0C4}
.aside-titre{color:#fff;font-size:20px;font-weight:800;line-height:1.25}
.aside-carte .btn{justify-self:start}
.aside-carte ul{display:grid;gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.aside-carte li{display:flex;gap:10px;align-items:center;font-size:14.5px;font-weight:600;color:#E8E0D4}
.aside-carte li svg{color:#FF8A3D;flex:none}
.table-prix-g+.corps-g{margin-top:22px}
.sur-devis-g+.corps-g,.sur-devis-g+.sur-devis-g{margin-top:22px}
.sur-devis-cta{margin-top:14px;font-weight:700;color:var(--orange-texte)}
.groupe-note{padding:14px 20px 16px;border-top:1px solid var(--trait);background:#fff;display:grid;gap:8px}
.groupe-note p{font-size:14px;color:var(--gris);max-width:90ch}
@media (min-width:900px){.groupe-note{padding:14px 24px 18px 82px}}
.prose .sommaire-g ol>li{padding-left:0}
.prose .sommaire-g ol>li::before{content:none}
.carte-g .cartes-g{grid-template-columns:1fr!important;gap:8px}
.carte-g .carte-g{padding:12px 14px;border-radius:var(--r-m);background:var(--beige-clair);border:0}
.carte-g .carte-g .carte-g-titre{font-size:14.5px}
.carte-g .carte-g p{font-size:14px}
.prose .sommaire-g ol>li{counter-increment:s}
.article-g>*{min-width:0}
.prose{overflow-wrap:break-word}
.prose a{overflow-wrap:anywhere}
.encadre-g,.encadre-titre,.encadre-corps{min-width:0;overflow-wrap:anywhere}
.prose>*,.corps-g>*,.encadre-g>*,.encadre-corps>*{min-width:0}

/* marques : bandeau défilant (logos officiels en gris, couleur au survol ; pause au survol ; immobile si l'utilisateur réduit les animations) */
.marques-g>*{min-width:0}
.defile-marques{position:relative;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%)}
.defile-piste{display:flex;align-items:center;gap:52px;padding-right:52px;flex:none;min-width:100%;animation:defile-marques var(--duree,36s) linear infinite}
.defile-marques:hover .defile-piste{animation-play-state:paused}
@keyframes defile-marques{to{transform:translateX(-100%)}}
.defile-piste li{flex:none;display:flex;align-items:center;height:72px;padding-left:0}
.defile-piste li::before{content:none}
.defile-piste img{height:34px;width:auto;max-width:none;filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.defile-piste img.carre{height:44px}
.defile-piste li:hover img{filter:none;opacity:1}
.marque-mot{font-size:21px;font-weight:800;letter-spacing:-.01em;color:#9A9087;white-space:nowrap}
@media (max-width:759px){.defile-piste{gap:40px;padding-right:40px}.defile-piste img{height:26px}.defile-piste img.carre{height:34px}.marque-mot{font-size:18px}}
@media (prefers-reduced-motion:reduce){.defile-piste{animation:none;flex-wrap:wrap;row-gap:12px}.defile-piste[aria-hidden]{display:none}.defile-marques{-webkit-mask-image:none;mask-image:none}}

/* carrousel des prestations « sur devis » : cartes qu'on fait glisser (doigt, trackpad, flèches) */
.carrousel{overflow:hidden}
.carrousel-tete{display:flex;justify-content:space-between;align-items:center;gap:16px}
.carrousel-fleches{display:flex;gap:8px;flex:none}
.carrousel-fleches button{width:42px;height:42px;border-radius:50%;border:1px solid var(--trait);background:#fff;display:grid;place-items:center;color:var(--noir);transition:border-color .2s,background .2s,opacity .2s}
.carrousel-fleches button:hover:not(:disabled){border-color:var(--noir)}
.carrousel-fleches button:disabled{opacity:.35;cursor:default}
.carrousel-fleches [data-prec] svg{transform:rotate(180deg)}
.carrousel.sans-defilement .carrousel-fleches{display:none}
.sur-devis .carrousel-piste{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,250px);gap:12px;flex-wrap:nowrap;margin-top:16px;padding:2px 2px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none}
.sur-devis .carrousel-piste::-webkit-scrollbar{display:none}
.sur-devis .carrousel-carte{scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;min-height:150px;padding:18px 18px 20px;border-radius:var(--r-l);background:var(--beige-clair);border:1px solid var(--trait);font-size:15px;font-weight:600;line-height:1.4;color:var(--noir)}
.sur-devis .carrousel-carte .ico{color:var(--orange-texte);line-height:0}
.sur-devis .carrousel-carte .ico .ic{width:32px;height:32px}
@media (max-width:639px){.sur-devis .carrousel-piste{grid-auto-columns:72%}.carrousel-fleches{display:none}}
@media (prefers-reduced-motion:reduce){.sur-devis .carrousel-piste{scroll-behavior:auto}}
.prose .chapo-g{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.5;font-weight:500;color:var(--noir);max-width:60ch}

/* étapes lues sur les pages : la frise de la maquette ; au-delà de 4 étapes ou avec de longs textes, frise verticale sur 2 colonnes */
.frise-g .pas p{font-size:15px;line-height:1.55}
.frise-g .pas .liste-check-g,.frise-g .pas .chips-g{margin-top:10px}
@media (min-width:960px){
  .frise-g.frise-4:has(> li:nth-child(5)){grid-template-columns:repeat(2,1fr);row-gap:30px}
  .frise-g.frise-4:has(> li:nth-child(5)) .pas{grid-template-columns:40px 1fr;gap:16px}
  .frise-g.frise-4:has(> li:nth-child(5)) .pas::before{display:none}
  .frise-g.frise-4:has(> li:nth-child(5)) .pas h3{margin-top:8px}
}

/* carrousel « sur devis » : cartes horizontales (picto à gauche, libellé à droite), largeur ajustée au libellé */
.sur-devis .carrousel-piste{display:flex;gap:10px;grid-auto-flow:unset;grid-auto-columns:unset}
.sur-devis .carrousel-carte{flex:0 0 auto;max-width:320px;min-height:0;flex-direction:row;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:var(--r-m);font-size:15px;line-height:1.35}
.sur-devis .carrousel-carte .ico{flex:none}
.sur-devis .carrousel-carte .ico .ic{width:26px;height:26px}
@media (max-width:639px){.sur-devis .carrousel-carte{max-width:78vw}}

/* ouverture d'une page-guide (entretien, Vigie…) : texte à gauche, sommaire à droite — la grammaire de la section « situations » */
.ouverture-g{display:grid;gap:28px;align-items:start}
@media (min-width:960px){.ouverture-g{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:64px}}
.ouverture-texte{display:grid;gap:22px;min-width:0}
.ouverture-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ouverture-actions .appel-seul,.ouverture-actions .bouton-g{margin:0}
.ouverture-cote{min-width:0}
.ouverture-cote .sommaire-g{padding:22px 24px}
.ouverture-cote .liste-check-g{grid-template-columns:1fr}
.fiche-g+.note,.fiche-g+p{margin-top:-8px}

/* carrousels mobiles : la première carte s'aligne sur la marge du texte (sans scroll-padding, l'aimantation la collait au bord) */
.reassu .liste,.situ-cartes,.liens-presta,.avis-grille,.reals,.cartes{scroll-padding-inline:20px}
.sur-devis .carrousel-piste{scroll-padding-inline:2px}

/* introductions longues : 3 lignes, puis « Lire la suite » */
.chapo-repli{margin-top:14px;max-width:72ch}
.chapo-repli .chapo{margin-top:0;font-size:17px;line-height:1.6;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.chapo-repli.ouvert .chapo{display:block;-webkit-line-clamp:unset}
.repli-btn{margin-top:8px;font-weight:700;font-size:15px;color:var(--orange-texte);border-bottom:2px solid currentColor;padding-bottom:1px}
@media (max-width:639px){.chapo-repli .chapo{font-size:16px}}

/* mobile : le bandeau d'engagements ne mord que légèrement sur le héros (le grand aplat noir pesait trop) */
@media (max-width:899px){.heros{padding-bottom:46px}.reassu{margin-top:-24px}}

/* mobile : l'ombre des cartes d'engagements était tranchée net par le conteneur qui défile (bande grise à bord dur) : ombre légère et place pour s'estomper */
@media (max-width:899px){.reassu .liste{padding-bottom:26px;margin-bottom:-12px}.reassu .item{box-shadow:0 8px 20px -14px rgba(40,25,10,.28)}}

/* bloc final : photo de fond (porte entrouverte, lumière chaude — visuel ChatGPT validé le 14/10) sous un dégradé :
   sombre derrière le texte, la ligne de lumière apparaît entre le texte et le formulaire */
.final{background:
  linear-gradient(180deg,rgba(18,18,18,0) 62%,rgba(18,18,18,.85) 100%),
  linear-gradient(90deg,rgba(18,18,18,.95) 0%,rgba(18,18,18,.92) 40%,rgba(18,18,18,.42) 50%,rgba(18,18,18,.18) 58%,rgba(18,18,18,.55) 100%),
  url(//julior-multi-services.fr/wp-content/jms-refonte/fond-final.webp) 100% 50%/115% auto no-repeat,
  var(--noir)}
.final::before{background:radial-gradient(70% 100% at 0% 0%,rgba(226,91,6,.3),rgba(18,18,18,0) 55%)}
@media (max-width:959px){.final{background:
  linear-gradient(180deg,rgba(18,18,18,.72) 0%,rgba(18,18,18,.84) 26%,rgba(18,18,18,.97) 46%),
  url(//julior-multi-services.fr/wp-content/jms-refonte/fond-final.webp) 60% 0/auto 58% no-repeat,
  var(--noir)}}

/* cartes à picto : icône à gauche, titre et texte à droite (retour du 14/10 : l'icône seule au-dessus, centrée, faisait vide) */
.situ{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;padding:20px}
.situ .ico{grid-row:1 / span 2;display:block;line-height:0;margin:2px 0 0;color:var(--orange-texte);justify-self:start}
.situ b{margin-top:0;line-height:1.3}
.situ p{margin-top:0}
.carte-g:not(.avec-img){flex-direction:row;align-items:flex-start;gap:16px}
.carte-g:not(.avec-img) .carte-g-ico{flex:none;margin-top:2px}
.carte-g:not(.avec-img) .carte-g-corps{flex:1;min-width:0}
.situ{grid-template-rows:auto 1fr}
@media (min-width:700px){.situ-cartes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.situ-cartes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.defile-piste img.pale{filter:grayscale(1) brightness(.5) contrast(1.4);opacity:.75}
.defile-piste li:hover img.pale{filter:none;opacity:1}

/* « Votre artisan » sur mobile : l'essentiel seulement (retour du 14/10 « trop de texte ») */
.repli-mobile{margin-top:14px;max-width:none}
@media (max-width:699px){
  .fondateur .titre-section .leger,.fondateur .citation-f{display:none}
  .repli-mobile>p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .repli-mobile.ouvert>p{display:block;-webkit-line-clamp:unset}
}
.journal,.etapes{scroll-padding-inline:20px}

/* menu mobile : le rond d'appel contre le bord gauche (comme la barre d'appel), le numéro centré dans l'espace restant */
.menu-m-pied .appel{justify-content:flex-start;padding-right:18px}
.menu-m-pied .appel>span:last-child{flex:1;text-align:center}

/* encart d'appel des articles, sur mobile : les engagements en carrousel de pastilles */
@media (max-width:1079px){
  .aside-carte{overflow:hidden}
  .aside-carte ul{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;margin-inline:-22px;padding:14px 22px 2px;scrollbar-width:none}
  .aside-carte ul::-webkit-scrollbar{display:none}
  .aside-carte li{flex:none;scroll-snap-align:start;white-space:nowrap;padding:9px 14px 9px 11px;border-radius:var(--r-p);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
}

/* tableaux larges (4 colonnes et plus) : sur mobile, une fiche par ligne, chaque valeur sous son intitulé — rien ne sort de l'écran */
@media (max-width:699px){
.table-fiches{overflow:visible}
.table-fiches table,.table-fiches tbody,.table-fiches tr,.table-fiches td{display:block;width:100%}
.table-fiches tr.table-tete{display:none}
.table-fiches tr{padding:16px 18px 14px;border-top:1px solid var(--trait)}
.table-fiches tr.table-tete+tr{border-top:0}
.table-fiches td{padding:0;border:0;font-size:15px;line-height:1.5}
.table-fiches td:first-child{font-size:16.5px;margin-bottom:2px}
.table-fiches td[data-label]{margin-top:10px}
.table-fiches td[data-label]::before{content:attr(data-label);display:block;margin-bottom:1px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
}
/* articles : hiérarchie h2/h3, signature, « En bref », encadré auteur (16/10) */
.prose-article h2{font-size:clamp(1.45rem,2.4vw,1.8rem);line-height:1.18;margin-top:30px;scroll-margin-top:110px}
.prose-article h2:first-child{margin-top:0}
.prose-article h3{font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.25;margin-top:18px;scroll-margin-top:110px}
.bandeau-meta.signature{display:flex;flex-wrap:wrap;gap:6px 0;font-size:14.5px}
.bandeau-meta.signature>span+span::before{content:"";display:inline-block;vertical-align:middle;width:4px;height:4px;margin:0 12px 2px;border-radius:50%;background:#7A7066}
.bandeau-meta.signature b{color:#fff;font-weight:700}
.encadre-g.encadre-bref{background:#fff;border:1.5px solid var(--noir);box-shadow:0 18px 40px -30px rgba(20,12,4,.5)}
.encadre-bref .encadre-titre svg{color:var(--orange-texte)}
.encadre-bref ul{margin:0}
.auteur-g{display:grid;grid-template-columns:auto 1fr;gap:16px 18px;align-items:start;margin-top:36px;padding:22px 24px;border-radius:var(--r-l);background:var(--beige-clair);border:1px solid var(--trait)}
.auteur-mono{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--noir);color:#fff;font-weight:800;font-size:18px;letter-spacing:.02em}
.auteur-g p{margin:0}
.auteur-nom{font-weight:800;font-size:17.5px;color:var(--noir)}
.auteur-role{font-size:14.5px;font-weight:600;color:var(--orange-texte);margin-top:2px!important}
.auteur-bio{font-size:15.5px;line-height:1.6;color:var(--gris);margin-top:10px!important}
@media (max-width:699px){.auteur-g{grid-template-columns:1fr;padding:20px}.bandeau-meta.signature{font-size:13.5px}}
.prose-article .faq-g{margin-top:4px;border-top:1px solid var(--trait)}
.prose-article .faq summary{font-size:17px;line-height:1.35;padding:18px 0}
.prose-article .faq .rep{padding:0 40px 18px 0;font-size:16px}
.prose-article .photos-g.photos-1 img{aspect-ratio:4/3;max-height:none;object-fit:cover}
.cartes-articles .carte-g-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--beige)}
.cartes-articles .carte-g-img img{width:100%;height:100%;object-fit:cover}
.carte-g-img-vide{display:grid!important;place-items:center;color:var(--orange-texte);background:linear-gradient(135deg,var(--beige-clair),var(--beige))!important}
.carte-g-img-vide .ic{width:54px;height:54px;opacity:.85}
@media (max-width:699px){.bandeau-meta.signature .sig-auteur{flex-basis:100%}.bandeau-meta.signature .sig-auteur+span::before{display:none}}
/* pages communes : ce qui est propre à la commune (19/10) */
.local-g{display:grid;gap:26px;margin-top:44px}
@media (min-width:1000px){.local-g{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:64px;align-items:start;margin-top:60px}}
.local-titre{font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.2}
.local-texte p{margin-top:14px;max-width:68ch;color:var(--texte)}
.local-texte a{color:var(--orange-texte);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.local-texte .local-source{font-size:13px;color:var(--gris);margin-top:18px}
.local-chiffres .chiffre-g{border-top:0;padding:16px 0}
.local-chiffres .chiffre-g:first-child{border-top:2px solid var(--noir)}
.local-chiffres .chiffre-g b{font-size:clamp(1.9rem,3.4vw,2.5rem)}
.local-chiffres .chiffre-g{flex-direction:column;align-items:flex-start;gap:6px}
.lien-suite{margin-top:18px;max-width:68ch;color:var(--texte)}
.lien-suite a{color:var(--orange-texte);font-weight:700;text-decoration:underline;text-underline-offset:2px}