/* Polices hébergées sur le site (21/10/2026) : vitesse + aucune requête vers Google (RGPD). Jakarta = police variable, un seul fichier. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(assets/fonts/plusjakartasans.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:'PT Serif';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/ptserif-400.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}
/* W.M. Couvreur — site Val-d'Oise (21/10/2026), moteur repris de la landing H360 (elle-même Holderbaum v8)
   Une famille (Plus Jakarta Sans), une couleur vive (la terre cuite du logo), la photo en grand,
   et un seul geste mémorable : le même toit, de la dépose à la dernière tuile. */
:root{
  --bg:#f4f2ee; --bg-2:#e8e5df; --white:#fff; --ink:#1c2226; --ink-2:#283036; --text:#40424a; --muted:#6b6e78; --line:#e3e2de;
  --or:#c8462a; --or-2:#a83a21; --or-soft:#f9e9e3; --ok:#2e9e5b;
  --font:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --r:20px; --r-s:12px; --pill:999px; --gutter:18px; --max:1120px;
  --shadow:0 24px 48px -28px rgba(28,34,38,.4),0 2px 6px rgba(28,34,38,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.5;padding-bottom:92px;-webkit-font-smoothing:antialiased}
img,video,svg{max-width:100%;display:block}
picture{display:block}
a{color:inherit}
h1,h2,h3{color:var(--ink);margin:0;letter-spacing:-.03em;line-height:1.05;text-wrap:balance;font-weight:700}
h1{font-size:clamp(34px,7.4vw,62px)}
h2{font-size:clamp(28px,5.4vw,42px)}
h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}
p{margin:0 0 14px;max-width:60ch}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.muted{color:var(--muted)}
.small{font-size:14.5px}
section{padding-block:56px}
.sec-head{margin-bottom:22px}
.sec-head p{margin:12px 0 0;color:var(--muted);font-size:17.5px;max-width:52ch}
@media (min-width:820px){section{padding-block:76px}.sec-head{margin-bottom:30px}}

/* ---------- boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:16.5px;letter-spacing:-.01em;padding:0 24px;height:54px;border-radius:var(--pill);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s ease,background .15s ease;font-family:inherit}
.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn-orange{background:var(--or);color:#fff;box-shadow:0 12px 26px -12px rgba(200,70,42,.7)}
.btn-orange:hover{background:var(--or-2)}
.btn-white{background:#fff;color:var(--ink);box-shadow:0 1px 0 rgba(28,34,38,.08),0 8px 20px -14px rgba(28,34,38,.4)}
.btn-white:hover{background:#f1f0ec}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-2)}

/* ---------- en-tête flottant */
.top{position:fixed;inset:0 0 auto 0;z-index:50;transition:background .25s ease,box-shadow .25s ease}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.top.solid{background:rgba(244,242,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(28,34,38,.07)}
.brand img{height:44px;width:auto}
.brand .lg-light{display:none}
.top.solid .lg-dark{display:none}
.top.solid .lg-light{display:block}
.top-cta{display:flex;gap:8px;align-items:center}
.top .btn{height:42px;padding:0 16px;font-size:15px}
.top .btn-white{box-shadow:none}
.top .btn-rappel{display:none}
@media (min-width:700px){.top .btn-rappel{display:inline-flex}.brand img{height:50px}}

/* ---------- ouverture : le compagnon sur les tuiles, plein écran */
.hero{position:relative;background:var(--ink);color:#fff;min-height:min(94svh,800px);display:flex;align-items:flex-end;overflow:hidden;border-radius:0 0 var(--r) var(--r)}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,38,.38) 0%,rgba(28,34,38,.12) 26%,rgba(28,34,38,.62) 52%,rgba(28,34,38,.95) 100%)}
.hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:34px}
.hero h1{color:#fff;max-width:16ch;margin-bottom:14px}
.hero .lede{font-size:17.5px;line-height:1.45;color:rgba(255,255,255,.88);max-width:50ch;margin-bottom:22px}
.cta{display:flex;flex-direction:column;gap:10px}
.cta .btn{width:100%}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.9)}
.hero-proof li{display:inline-flex;align-items:center;gap:7px}
.hero-proof svg{width:15px;height:15px;color:var(--or)}
@media (min-width:700px){
  .hero{min-height:min(90vh,780px);border-radius:0 0 30px 30px}
  .hero-bg img{object-position:0% 40%}
  .hero .wrap{padding-bottom:40px}
  .hero-bg::after{background:linear-gradient(90deg,rgba(28,34,38,.9) 0%,rgba(28,34,38,.66) 46%,rgba(28,34,38,.12) 100%),linear-gradient(180deg,rgba(28,34,38,.4),rgba(28,34,38,0) 30%,rgba(28,34,38,.5) 100%)}
  .cta{flex-direction:row}
  .cta .btn{width:auto}
  .hero h1{font-size:clamp(38px,3.7vw,48px);max-width:480px;margin-bottom:12px}
  .hero .lede{max-width:40ch;font-size:17px}
}
/* une seule entrée orchestrée : la photo respire, le texte se pose */
@keyframes kb{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-bg img{animation:kb 8s ease-out both}
.hero .wrap > *{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
.hero .wrap > :nth-child(2){animation-delay:.12s}.hero .wrap > :nth-child(3){animation-delay:.24s}.hero .wrap > :nth-child(4){animation-delay:.3s}.hero .wrap > :nth-child(5){animation-delay:.38s}
.trust .card{animation:up .8s cubic-bezier(.2,.7,.2,1) .5s both}

/* ---------- carte de confiance */
.trust{position:relative;z-index:2;margin-top:-28px}
.trust .card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px 14px}
.trust .who{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--line);color:var(--ink)}
.trust .who img{width:64px;height:auto;flex:none}
.trust .who b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.15}
.trust .who small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px;line-height:1.3}
.trust .item{display:flex;gap:11px;align-items:flex-start}
.trust .ico{width:38px;height:38px;border-radius:12px;background:var(--or-soft);color:var(--or);display:flex;align-items:center;justify-content:center;flex:none}
.trust .ico svg{width:19px;height:19px}
.trust .item b{display:block;color:var(--ink);font-weight:700;font-size:15.5px;letter-spacing:-.02em;line-height:1.15}
.trust .item small{display:block;color:var(--muted);font-size:13px;margin-top:3px;line-height:1.3}
@media (min-width:820px){.trust{margin-top:-38px}.trust .card{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;padding:22px 24px;align-items:center;gap:16px 18px}.trust .who{grid-column:auto;padding-bottom:0;border-bottom:0;border-right:1px solid var(--line);padding-right:16px}}

/* ---------- comparateur avant / après : LE geste de la page */
.cmp{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2);user-select:none;-webkit-user-select:none;touch-action:pan-y;--x:50%;aspect-ratio:4/3}
.cmp picture,.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x);width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.cmp .grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.55)}
.cmp .grip svg{width:24px;height:24px}
.cmp .lab{position:absolute;top:14px;padding:6px 12px;border-radius:var(--pill);font-size:13.5px;font-weight:700;color:#fff;background:rgba(28,34,38,.62);backdrop-filter:blur(4px);pointer-events:none}
.cmp .lab-a{left:14px}.cmp .lab-b{right:14px}
.cmp input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent}
.cmp input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:52px;height:100%}
.cmp input[type=range]::-moz-range-thumb{width:52px;height:1000px;border:0;background:transparent}
.cmp:focus-within{outline:3px solid var(--or);outline-offset:3px}
.cmp.big{box-shadow:var(--shadow)}
.cmp-main{display:grid;gap:18px}
.cmp-txt h3{font-size:clamp(21px,4.8vw,27px);margin-bottom:8px}
.cmp-txt p{font-size:16.5px;color:var(--muted);margin:0}
.cmp-grid{display:grid;gap:22px;margin-top:34px}
.cmp-grid figure{margin:0}
.cmp-grid figcaption{padding:12px 4px 0}
.cmp-grid figcaption b{display:block;color:var(--ink);font-size:17px;letter-spacing:-.02em;line-height:1.2;margin-bottom:4px}
.cmp-grid figcaption span{font-size:15px;color:var(--muted);line-height:1.4}
@media (min-width:640px){.cmp-grid{grid-template-columns:1fr 1fr;gap:20px}}
@media (min-width:820px){.cmp-main{grid-template-columns:1.45fr 1fr;align-items:center;gap:44px}.cmp-grid{gap:24px;margin-top:44px}}

/* ---------- la preuve Google */
.stars{color:#f5a623;letter-spacing:.5px}
.avis-sec{background:#fff;border-radius:30px}
.avis-head{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.avis-head .note{font-size:54px;font-weight:700;letter-spacing:-.04em;color:var(--ink);line-height:1}
.avis-head .note small{font-size:20px;color:var(--muted);font-weight:500;margin-left:2px;letter-spacing:0}
.avis-head .sub{font-size:15px;color:var(--text);line-height:1.35}
.avis-head .sub .stars{font-size:16px;display:block;margin-bottom:2px}
.avis-head .sub em{display:block;font-style:normal;color:var(--muted);font-size:13px}
.g{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);font-weight:700;font-size:13px;color:#4285f4;vertical-align:middle;margin-right:4px}
.avis{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 12px;margin:0 -4px;scrollbar-width:none}
.avis::-webkit-scrollbar{display:none}
.avis article{flex:0 0 84%;max-width:360px;scroll-snap-align:start;background:var(--bg);border-radius:var(--r);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px}
.avis .stars{font-size:14px}
.avis p{margin:0;font-size:15.5px;color:var(--ink);line-height:1.5;flex:1;max-width:none}
.avis .who{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.avis .who b{color:var(--ink);font-weight:700}
.avis .av{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none}
.avis article:nth-child(2n) .av{background:var(--or)}.avis article:nth-child(3n) .av{background:#2c5bd6}
.avis-foot{margin-top:6px;font-size:15px}
.avis-foot a{font-weight:600;color:var(--ink)}
.gmb{display:grid;gap:14px;margin-top:22px}
.gmb .card{background:var(--bg);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:110px 1fr;text-decoration:none;color:var(--ink)}
.gmb .card picture,.gmb .card img{width:110px;height:100%;object-fit:cover}
.gmb .card > div{padding:14px 16px;display:grid;gap:4px;align-content:center}
.gmb .card b{font-size:16px;letter-spacing:-.02em;line-height:1.2}
.gmb .card .r{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--text)}
.gmb .card .r strong{color:var(--ink)}
.gmb .card small{font-size:13px;color:var(--muted)}
.gmb iframe{width:100%;height:260px;border:0;border-radius:var(--r);background:var(--bg-2);display:block}
@media (min-width:820px){.avis{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}.avis article{max-width:none;flex:auto}.gmb{grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}.gmb iframe{height:100%;min-height:220px}}

/* ---------- ce qu'on fait : quatre photos, pas quatre cartes */
.svc{background:#fff;border-radius:30px}
.svc-grid{display:grid;gap:14px}
.svc-grid a{position:relative;display:block;border-radius:var(--r);overflow:hidden;text-decoration:none;color:#fff;background:var(--ink);aspect-ratio:4/3}
.svc-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc-grid a:hover img{transform:scale(1.03)}
.svc-grid a::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,34,38,0) 35%,rgba(28,34,38,.88) 100%)}
.svc-grid a > div{position:absolute;left:18px;right:18px;bottom:16px;z-index:1}
.svc-grid b{display:block;font-size:21px;letter-spacing:-.02em;line-height:1.15;margin-bottom:6px}
.svc-grid span{display:block;font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.85)}
@media (min-width:640px){.svc-grid{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1000px){.svc-grid a{aspect-ratio:5/4}.svc-grid b{font-size:23px}}

/* ---------- comment ça se passe (sur encre) */
.steps-sec{background:var(--ink);color:#fff;border-radius:30px;margin-inline:8px}
.steps-sec h2{color:#fff}
.steps-sec .sec-head p{color:rgba(255,255,255,.7)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{background:var(--ink-2);border-radius:var(--r);padding:20px 20px 18px;display:grid;gap:8px}
.steps .n{width:36px;height:36px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.steps b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.2}
.steps p{margin:0;font-size:15.5px;color:rgba(255,255,255,.78);max-width:none}
@media (min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:16px}.steps-sec{margin-inline:auto;max-width:var(--max)}}

/* ---------- chantiers : mosaïque */
.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mosaic figure{margin:0;position:relative;border-radius:var(--r-s);overflow:hidden;background:var(--bg-2)}
.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.mosaic figure:first-child{grid-column:1/-1}
.mosaic figure:first-child img{aspect-ratio:16/10}
.mosaic figcaption{position:absolute;left:10px;bottom:10px;background:rgba(28,34,38,.72);color:#fff;font-size:12.5px;font-weight:600;padding:5px 9px;border-radius:8px;backdrop-filter:blur(4px)}
@media (min-width:820px){.mosaic{grid-template-columns:repeat(4,1fr);gap:12px}.mosaic figure:first-child{grid-column:1/3;grid-row:1/3}.mosaic figure:first-child img{aspect-ratio:auto;height:100%}.mosaic figure{border-radius:16px}}

/* ---------- zone */
.zone{background:#fff;border-radius:30px}
.zone-grid{display:grid;gap:22px}
.zone-grid ul{display:grid;gap:8px;font-size:16.5px;margin-top:16px}
.zone-grid li{display:flex;gap:10px;align-items:flex-start}
.zone-grid li svg{width:18px;height:18px;color:var(--or);flex:none;margin-top:4px}
.zone-grid .muted{margin-top:14px;font-size:15.5px}
.map{position:relative;border-radius:var(--r);background:radial-gradient(120% 90% at 50% 0%,#f6f5f2 0%,#e9e8e3 100%);overflow:hidden}
.map svg{width:100%;height:auto}
.map .ring{fill:var(--or);fill-opacity:.08;stroke:var(--or);stroke-opacity:.5;stroke-width:1.5}
.map .pulse{fill:none;stroke:var(--or);stroke-width:1.5;transform-origin:center;transform-box:fill-box;animation:pulse 3.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.15);opacity:0}}
.map .city{fill:var(--ink);font-family:var(--font);font-size:15px;font-weight:500}
.map .city.big{font-size:20px;font-weight:700}
.map .dot{fill:var(--ink)}
.map .dot.big{fill:var(--or)}
@media (max-width:699px){.map .minor{display:none}.map .city{font-size:20px}.map .city.big{font-size:25px}}
@media (min-width:820px){.zone-grid{grid-template-columns:1fr 1.3fr;gap:44px;align-items:center}}

/* ---------- rappel (formulaire) */
.rappel-grid{display:grid;gap:26px}
.rappel-grid .muted{margin-top:12px}
form.lead{background:#fff;border-radius:var(--r);padding:22px 20px 20px;box-shadow:var(--shadow);display:grid;gap:16px}
.f .lab,.f label{display:block;font-weight:700;font-size:15.5px;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em}
.f input[type=text],.f input[type=tel],.f input[type=email]{width:100%;font:inherit;font-size:17px;padding:14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink)}
.f input:focus{border-color:var(--ink);background:#fff;outline:none;box-shadow:0 0 0 4px rgba(28,34,38,.08)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opts.one{grid-template-columns:1fr}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opt span{display:block;border:1.5px solid var(--line);background:var(--bg);border-radius:var(--r-s);padding:12px 14px;font-size:15.5px;line-height:1.3;color:var(--ink);min-height:48px;transition:background .15s,border-color .15s}
.opt input:checked + span{border-color:var(--ink);background:var(--ink);color:#fff}
.opt input:focus-visible + span{outline:3px solid var(--or);outline-offset:2px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.f-note{font-size:13.5px;color:var(--muted);margin:0}
.f-err{display:none;background:var(--or-soft);color:#9a3a00;border-radius:var(--r-s);padding:12px 14px;font-size:15px}
.f-ok{display:none;background:#fff;border-radius:var(--r);padding:24px 22px;font-size:17px;color:var(--ink);box-shadow:var(--shadow)}
.ou{margin-top:22px;display:grid;gap:10px;justify-items:start}
.ou .btn{min-width:250px}
.ou .small{margin:0}
@media (min-width:820px){.rappel-grid{grid-template-columns:1fr 1.05fr;gap:60px;align-items:start}.rappel-grid > div:first-child{position:sticky;top:90px}}

/* ---------- révélation du numéro (ordinateur) */
.tel .tel-num{display:none}
.tel.revealed .tel-txt{display:none}
.tel.revealed .tel-num{display:inline;font-variant-numeric:tabular-nums}
.tel-hint{display:none;font-size:13.5px;color:var(--muted);margin:8px 0 0}
.no-touch .tel-hint{display:block}
.hero .tel-hint{color:rgba(255,255,255,.72)}
.tel-inline{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tel-inline svg{width:14px;height:14px;flex:none}

/* ---------- dernier appel */
.final{background:var(--or);color:#fff;border-radius:30px;margin-inline:8px;padding-block:44px}
.final h2{color:#fff;max-width:18ch}
.final p{color:rgba(255,255,255,.9)}
.final .btn-white{color:var(--or-2)}
.final .cta{margin-top:18px}
@media (min-width:820px){.final{margin-inline:auto;max-width:var(--max)}.final .wrap{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px}.final .cta{margin:0}}

/* ---------- pied */
footer{padding-block:36px 40px;font-size:14.5px;color:var(--muted)}
footer .wrap{display:grid;gap:18px}
footer b{display:block;color:var(--ink);font-weight:700;margin-bottom:4px}
footer a{color:var(--text)}
footer p{margin:0 0 4px;max-width:none}
footer .tel-inline{color:var(--text)}
@media (min-width:640px){footer .wrap{grid-template-columns:1fr 1fr}}

/* ---------- barre fixe mobile */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(244,242,238,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 rgba(28,34,38,.07)}
.sticky .btn{flex:1;height:50px;font-size:15.5px;padding-inline:14px}
@media (min-width:700px){.sticky{display:none}body{padding-bottom:0}}

/* ---------- mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-bg img,.hero .wrap > *,.trust .card,.map .pulse{animation:none}
  .map .pulse{opacity:0}
  .svc-grid img{transition:none}
}

/* ================= ajouts W.M. Couvreur ================= */
.brand{display:inline-flex;color:#fff;text-decoration:none}
.top.solid .brand{color:var(--ink)}
.brand svg.logo{height:42px;width:auto}
@media (min-width:700px){.brand svg.logo{height:46px}}
.trust .who .mark{width:54px;height:54px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.trust .who .mark svg{width:34px;height:34px}

/* le même toit, en quatre temps : grande photo + onglets */
.seq{display:grid;gap:16px}
.seq-stage{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg-2);aspect-ratio:4/3;box-shadow:var(--shadow)}
.seq-stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease}
.seq-stage figure.on{opacity:1}
.seq-stage img{width:100%;height:100%;object-fit:cover}
.seq-stage .lab{position:absolute;top:14px;left:14px;padding:6px 12px;border-radius:var(--pill);font-size:13.5px;font-weight:700;color:#fff;background:rgba(28,34,38,.66);backdrop-filter:blur(4px)}
.seq-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.seq-tabs button{font:inherit;border:0;background:#fff;border-radius:var(--r-s);padding:10px 6px 9px;text-align:left;cursor:pointer;color:var(--ink);position:relative;overflow:hidden;min-height:56px}
.seq-tabs button b{display:block;font-size:13.5px;letter-spacing:-.01em;line-height:1.15}
.seq-tabs button span{display:none}
.seq-tabs button::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--or)}
.seq-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.seq-tabs button[aria-selected=true]::after{width:100%}
.seq-txt h3{font-size:clamp(21px,4.8vw,27px);margin-bottom:8px}
.seq-txt p{font-size:16.5px;color:var(--muted);margin:0}
@media (min-width:640px){.seq-tabs button{padding:12px 12px 11px}.seq-tabs button b{font-size:15px}.seq-tabs button span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.3}.seq-tabs button[aria-selected=true] span{color:rgba(255,255,255,.75)}}
@media (min-width:820px){.seq{grid-template-columns:1.45fr 1fr;gap:20px 44px;align-items:center}.seq-tabs{grid-column:1/-1;order:3}}

/* sous les tuiles (sur encre) */
.dessous{background:var(--ink);color:#fff;border-radius:30px;margin-inline:8px}
.dessous h2{color:#fff}
.dessous p{color:rgba(255,255,255,.8)}
.dessous-grid{display:grid;gap:26px}
.facts{display:grid;gap:10px;margin:18px 0}
.facts li{background:var(--ink-2);border-radius:var(--r-s);padding:14px 16px;font-size:15.5px;color:rgba(255,255,255,.82)}
.facts b{display:block;color:#fff;font-size:16.5px;letter-spacing:-.01em;margin-bottom:2px}
.bois{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bois figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--ink-2)}
.bois img{width:100%;height:100%;object-fit:cover}
@media (min-width:820px){.dessous{margin-inline:auto;max-width:var(--max)}.dessous-grid{grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}}

/* blocs détail (pages travaux / villes) */
.detail{display:grid;gap:22px;align-items:center}
.detail + .detail{margin-top:44px}
.detail .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--bg-2)}
.detail .ph img{width:100%;height:100%;object-fit:cover}
.detail h2{font-size:clamp(25px,4.6vw,34px);margin-bottom:12px}
.detail p{font-size:17px}
.ticks{display:grid;gap:8px;margin-top:6px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--ink)}
.ticks svg{width:18px;height:18px;color:var(--or);flex:none;margin-top:3px}
@media (min-width:820px){.detail{grid-template-columns:1fr 1fr;gap:48px}.detail.rev .ph{order:2}}
.white{background:#fff;border-radius:30px}

/* questions */
.faq{display:grid;gap:10px;max-width:780px}
.faq details{background:var(--bg);border-radius:var(--r-s);padding:0 18px}
.white .faq details{background:var(--bg)}
.faq summary{cursor:pointer;list-style:none;padding:16px 28px 16px 0;font-weight:700;color:var(--ink);font-size:16.5px;letter-spacing:-.01em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;font-size:24px;font-weight:500;color:var(--or)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 16px;font-size:16px;max-width:none}

/* communes */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a,.chips span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--pill);background:var(--bg);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none}
.chips a{background:#fff;box-shadow:0 0 0 1.5px var(--line)}
.chips a:hover{box-shadow:0 0 0 1.5px var(--ink)}
.white .chips span{background:var(--bg)}
.villes{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.villes a{background:#fff;border-radius:var(--r-s);padding:16px;text-decoration:none;color:var(--ink);display:grid;gap:2px}
.villes a b{font-size:16.5px;letter-spacing:-.01em}
.villes a span{font-size:13.5px;color:var(--muted)}
@media (min-width:820px){.villes{grid-template-columns:repeat(5,1fr)}}

/* en-tête de page intérieure plus court */
.hero.short{min-height:min(70svh,600px)}
@media (min-width:700px){.hero.short{min-height:min(64vh,560px)}}
.crumbs{font-size:14px;color:rgba(255,255,255,.75);margin-bottom:12px}
.crumbs a{color:#fff}

.prose{max-width:760px}
.prose h1{font-size:clamp(30px,5vw,42px);margin-bottom:20px}
.prose h2{font-size:21px;margin:26px 0 8px}
.page-plain{padding-top:110px}
.top.always{background:rgba(244,242,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(28,34,38,.07)}
.top.always .brand{color:var(--ink)}
.f textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-s);background:var(--bg);color:var(--ink);min-height:84px;resize:vertical}
.merci-box{text-align:center;max-width:620px;margin:0 auto}
.merci-box .btn{margin:8px 4px}
/* passe 2 : les <picture> remplissent leur cadre, blocs sombres séparés */
.svc-grid picture,.detail .ph picture,.bois picture,.mosaic picture,.seq-stage picture{height:100%}
.dessous + .steps-sec,.steps-sec + .dessous{margin-top:14px}
.dessous h2{margin-bottom:14px}
/* passe 3 (user 21/10) : moins de vide entre le logo et le titre ; logo d'origine */
.hero{min-height:min(82svh,700px)}
.hero .wrap{padding-top:96px}
@media (min-width:700px){.hero{min-height:min(74vh,620px)}.hero.short{min-height:min(58vh,500px)}}
.brand svg.logo{height:46px;width:auto}
@media (min-width:700px){.brand svg.logo{height:52px}}
.trust .who .mark svg{width:38px;height:auto}
/* passe 4 — conseil des 5 agents (21/10) */
.hero-bg picture{display:block;height:100%}
.hero-bg::after{background:linear-gradient(180deg,rgba(28,34,38,.55) 0%,rgba(28,34,38,.25) 24%,rgba(28,34,38,.66) 50%,rgba(28,34,38,.95) 100%)}
@media (min-width:700px){.hero-bg::after{background:linear-gradient(90deg,rgba(28,34,38,.9) 0%,rgba(28,34,38,.66) 46%,rgba(28,34,38,.12) 100%),linear-gradient(180deg,rgba(28,34,38,.5),rgba(28,34,38,0) 30%,rgba(28,34,38,.5) 100%)}}
fieldset.f{border:0;padding:0;margin:0;min-width:0}
legend.lab{padding:0;float:left;width:100%}
legend.lab + .opts{clear:both}
.sticky{transition:transform .25s ease}
.sticky.hide{transform:translateY(110%)}
.seq-tabs button b{white-space:nowrap}
@media (max-width:819px){.seq-stage{order:1}.seq-tabs{order:2}.seq-txt{order:3}}
@media (max-width:519px){.trust .card{grid-template-columns:1fr;gap:12px}.trust .item small{font-size:14px}}
.f .muted{font-weight:400}