/* Valorise Toiture — feuille de style unique
   Concept : bandeau ardoise sombre + rouge de la marque, bord "tuiles canal" (festons) comme signature,
   titres condensés majuscules comme le logo, corps de texte lisible. Une seule apparence claire, assumée. */
:root{
  --ink:#1c1b1d;        /* noir de la marque */
  --ink-2:#2a282b;      /* surfaces sombres secondaires */
  --red:#d6140f;        /* rouge du logo */
  --red-dk:#a90f0b;     /* rouge survol */
  --paper:#ffffff;
  --mist:#f4f2f1;       /* fond de section, gris chaud léger */
  --line:#e3dedb;
  --text:#2b2829;
  --muted:#625c5a;
  --on-dark:#f3efed;
  --on-dark-muted:#bdb5b2;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --radius:6px;
  --wrap:1180px;
  --tile:14px;           /* rayon des festons "tuile canal" */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:400 1.0625rem/1.65 var(--f-body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--red-dk)}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);line-height:1.05;text-wrap:balance;margin:0}
h1{font-weight:800;font-size:clamp(2.3rem,4.2vw + 1rem,4rem);text-transform:uppercase;letter-spacing:.005em}
h2{font-weight:800;font-size:clamp(1.85rem,2.4vw + 1rem,2.75rem);text-transform:uppercase}
h3{font-weight:700;font-size:1.45rem}
p{margin:0}
.wrap{max-width:calc(var(--wrap) + 2*16px);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.stack{display:grid;gap:1rem}
.prose{display:grid;gap:1rem;max-width:68ch}
.prose h2{margin-top:1rem}
.prose h3{margin-top:.5rem}
.prose ul{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}
.lead{font-size:1.18rem;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:100}
.skip:focus{left:8px;top:8px}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:700 1.05rem/1 var(--f-body);padding:1rem 1.35rem;border-radius:var(--radius);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dk);color:#fff}
.btn-ghost{border-color:currentColor;color:var(--on-dark)}
.btn-ghost:hover{background:var(--on-dark);color:var(--ink)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* Bandeau supérieur + en-tête */
.topbar{background:var(--ink);color:var(--on-dark-muted);font-size:.9rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding-block:.45rem;flex-wrap:wrap}
.topbar a{color:var(--on-dark);text-decoration:none;font-weight:600}
.header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--paper);border-bottom:1px solid var(--line)}
.header .wrap{display:flex;align-items:center;gap:1.25rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:58px;height:58px}
.brand b{font:800 1.5rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.brand b span{color:var(--red)}
.brand small{display:block;font:600 .8rem/1.2 var(--f-body);color:var(--muted);letter-spacing:.01em}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a,.nav summary{font-weight:600;color:var(--ink);text-decoration:none;padding:.6rem .7rem;border-radius:var(--radius);cursor:pointer;list-style:none}
.nav summary::-webkit-details-marker{display:none}
.nav summary::after{content:"";display:inline-block;width:.45em;height:.45em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-2px,-2px);margin-left:.45rem}
.nav a:hover,.nav summary:hover,.nav a[aria-current="page"]{color:var(--red)}
.nav details{position:relative}
.nav .menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 14px 30px -12px rgba(28,27,29,.35);padding:.4rem;display:grid;min-width:250px}
.nav .menu a{padding:.55rem .75rem;font-weight:500}
.header .btn{padding:.8rem 1.1rem}
.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--ink)}
.burger svg{width:30px;height:30px}

/* Héros */
.hero{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(152deg,transparent 0 58%,rgba(255,255,255,.035) 58% 70%,transparent 70%),
  linear-gradient(208deg,transparent 0 62%,rgba(214,20,15,.10) 62% 74%,transparent 74%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:start;padding-block:3.5rem 4.5rem}
.hero h1{color:#fff}
.hero .lead{color:var(--on-dark-muted);max-width:56ch}
.hero-points{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.hero-points li{display:flex;gap:.6rem;align-items:flex-start}
.hero-points svg{width:22px;height:22px;flex:none;color:var(--red);margin-top:.15rem}
.kicker{font-weight:600;color:var(--on-dark-muted);font-size:1rem}
.kicker strong{color:#fff}
.hero-small .wrap{grid-template-columns:minmax(0,1fr);padding-block:2.75rem 3.5rem}
.hero-small h1{font-size:clamp(2.1rem,3.4vw + 1rem,3.4rem)}

/* Signature : rangée de tuiles canal (festons) */
.tiles{height:var(--tile);background:radial-gradient(circle at 50% 0,transparent calc(var(--tile) - 1px),var(--red) var(--tile)) 0 0/calc(var(--tile)*2) var(--tile) repeat-x;margin-top:calc(var(--tile)*-1);position:relative;z-index:1}
.tiles-ink{background:radial-gradient(circle at 50% 100%,var(--ink) calc(var(--tile) - 1px),transparent var(--tile)) 0 0/calc(var(--tile)*2) var(--tile) repeat-x;margin:0}

/* Fil d'Ariane */
.crumbs{font-size:.92rem;color:var(--on-dark-muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.6}
.crumbs a{color:var(--on-dark-muted)}

/* Formulaire de devis */
.quote{background:var(--paper);color:var(--text);border-radius:var(--radius);padding:1.6rem;box-shadow:0 24px 50px -24px rgba(0,0,0,.6);border-top:5px solid var(--red)}
.quote h2{font-size:1.8rem}
.quote p.small{color:var(--muted);font-size:.95rem}
.form{display:grid;gap:.85rem;margin-top:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.field{display:grid;gap:.3rem;min-width:0}
.field label{font-weight:600;font-size:.95rem;color:var(--ink)}
.field input,.field select,.field textarea{font:inherit;font-size:1rem;padding:.75rem .8rem;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--text);width:100%}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(214,20,15,.18)}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.consent input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--red)}
.hp{position:absolute!important;left:-9999px!important}
.form .btn{width:100%;font-size:1.1rem}
.form-msg{border-radius:var(--radius);padding:.85rem 1rem;font-weight:600}
.form-msg.ok{background:#e8f5ec;color:#185c2e}
.form-msg.err{background:#fdecea;color:#8c1410}

/* Bande de réassurance */
.trust{background:var(--mist);border-bottom:1px solid var(--line)}
.trust ul{list-style:none;margin:0;padding:1.4rem 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.trust li{display:flex;gap:.75rem;align-items:center;font-weight:600;color:var(--ink);line-height:1.3}
.trust svg{width:34px;height:34px;flex:none;color:var(--red)}

/* Sections */
.section{padding-block:clamp(3.5rem,6vw,5.5rem)}
.section-mist{background:var(--mist)}
.section-ink{background:var(--ink);color:var(--on-dark)}
.section-ink h2,.section-ink h3{color:#fff}
.section-ink .lead{color:var(--on-dark-muted)}
.head{display:grid;gap:.75rem;max-width:62ch;margin-bottom:2.25rem}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-items:start}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.service{background:var(--paper);padding:1.75rem 1.5rem;display:grid;gap:.7rem;align-content:start;text-decoration:none;color:var(--text);transition:background .15s}
.service:hover{background:#fbf9f8}
.service:hover h3{color:var(--red)}
.service svg{width:44px;height:44px;color:var(--red)}
.service p{color:var(--muted)}
.service .more{font-weight:700;color:var(--ink);margin-top:.25rem}
.service.cta-card{background:var(--ink);color:var(--on-dark)}
.service.cta-card h3{color:#fff}
.service.cta-card p{color:var(--on-dark-muted)}
.service.cta-card .more{color:#fff}

/* Étapes (vraie séquence) */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem;counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:.5rem;align-content:start;border-top:3px solid var(--red);padding-top:1rem}
.steps li::before{content:counter(s);font:800 2.6rem/1 var(--f-display);color:var(--red)}
.steps h3{font-size:1.3rem}
.section-ink .steps p{color:var(--on-dark-muted)}

/* Photos de chantiers (emplacements) */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.gallery figure{margin:0;display:grid;gap:.5rem}
.photo{aspect-ratio:4/3;max-width:100%;border-radius:var(--radius);overflow:hidden;background:
  radial-gradient(circle at 50% 0,transparent 15px,#e6e1de 16px) 0 0/32px 16px,var(--mist);display:grid;place-items:center;color:var(--muted);font-weight:600;font-size:.95rem}
.photo img{width:100%;height:100%;object-fit:cover}
.gallery figcaption{font-size:.95rem;color:var(--muted)}

/* Zones */
.zones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.zone{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:grid;gap:.6rem;align-content:start;background:var(--paper)}
.zone.main{border:2px solid var(--red)}
.zone h3 a{color:var(--ink);text-decoration:none}
.zone h3 a:hover{color:var(--red)}
.zone .dist{font-weight:600;color:var(--red-dk);font-size:.95rem}
.zone p{color:var(--muted)}
.communes{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:1.5rem 0 0;padding:0}
.communes li{background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.92rem;font-weight:500}

/* À propos */
.about-card{background:var(--ink);color:var(--on-dark);border-radius:var(--radius);padding:2rem;display:grid;gap:1rem}
.about-card img{width:120px;height:120px}
.about-card p{color:var(--on-dark-muted)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start}
.checks svg{width:22px;height:22px;flex:none;color:var(--red);margin-top:.15rem}

/* FAQ */
.faq{display:grid;gap:.6rem;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.25rem;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 1.6rem/1 var(--f-display);color:var(--red);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 1.25rem 1.2rem;color:var(--muted);display:grid;gap:.6rem}

/* Bandeau d'appel final */
.cta-band{background:var(--red);color:#fff}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;padding-block:2.5rem}
.cta-band h2{color:#fff;font-size:clamp(1.7rem,2vw + 1rem,2.4rem)}
.cta-band p{color:#ffe3e1}
.cta-band .btn-dark{background:var(--ink)}
.cta-band .btn-light{background:#fff;color:var(--ink)}
.cta-band .btn-light:hover{background:var(--ink);color:#fff}

/* Pied de page */
.footer{background:var(--ink);color:var(--on-dark-muted);font-size:.97rem}
.footer .wrap{padding-block:3.5rem 2rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:2rem}
.footer h3{color:#fff;font-size:1.2rem;margin-bottom:.75rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.footer a{color:var(--on-dark);text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer .logo{width:96px;height:96px;margin-bottom:.75rem}
.footer .legal{border-top:1px solid #3a373a;margin-top:2.5rem;padding-top:1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;font-size:.88rem}

/* Barre d'action mobile */
.mbar{display:none}

/* Pages simples */
.page{padding-block:3rem 4rem}
.legal-text{display:grid;gap:.8rem;max-width:75ch}
.legal-text h2{font-size:1.6rem;margin-top:1.2rem}

@media (max-width:1020px){
  .nav,.header .btn{display:none}
  .burger{display:block}
  .header.open .nav{display:grid;position:absolute;top:100%;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:.75rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px));gap:.1rem;max-height:calc(100vh - 76px);overflow:auto}
  .header.open .nav details .menu{position:static;box-shadow:none;border:0;padding:0 0 0 .75rem}
  .hero .wrap{grid-template-columns:minmax(0,1fr);gap:2rem}
  .services,.zones,.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr);gap:2rem}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  body{font-size:1rem;padding-bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  .topbar .hide-sm{display:none}
  .brand img{width:48px;height:48px}
  .brand b{font-size:1.3rem}
  .brand small{display:none}
  .header .wrap{min-height:64px}
  .hero .wrap{padding-block:2.25rem 3rem}
  .services,.zones,.gallery,.steps,.footer-grid{grid-template-columns:minmax(0,1fr)}
  .trust ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.9rem}
  .trust li{font-size:.92rem}
  .trust svg{width:28px;height:28px}
  .form .row{grid-template-columns:minmax(0,1fr)}
  .quote{padding:1.25rem}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -8px 24px -12px rgba(0,0,0,.35);
    padding:.55rem max(.6rem,env(safe-area-inset-right,0px)) calc(.55rem + env(safe-area-inset-bottom,0px)) max(.6rem,env(safe-area-inset-left,0px));gap:.55rem}
  .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;padding:.55rem;border-radius:var(--radius);font-weight:700;font-size:.98rem;text-decoration:none;line-height:1.1}
  .mbar a small{font-weight:500;font-size:.78rem;opacity:.85}
  .mbar .call{background:var(--ink);color:#fff}
  .mbar .devis{background:var(--red);color:#fff}
  .cta-band .wrap{padding-block:2rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===================== V2 : couleurs plus vives + effets ===================== */
:root{--red:#e3120b;--red-dk:#b30d08;--red-hot:#ff3d2e;--glow:rgba(227,18,11,.55)}

/* Héros photo plein cadre */
.hero{isolation:isolate;min-height:min(88vh,820px);display:flex;align-items:center}
.hero-small{min-height:0}
.hero > .wrap{width:100%}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(60% 80% at 85% 20%,rgba(227,18,11,.45),transparent 60%),
  radial-gradient(50% 60% at 10% 90%,rgba(227,18,11,.25),transparent 60%),var(--ink)}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 18s ease-out both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(100deg,rgba(20,19,21,.94) 0%,rgba(20,19,21,.82) 42%,rgba(20,19,21,.45) 75%,rgba(20,19,21,.35) 100%)}
.hero-small::after{background:linear-gradient(100deg,rgba(20,19,21,.92) 0%,rgba(20,19,21,.78) 60%,rgba(20,19,21,.55) 100%)}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}

/* Séquence d'arrivée */
.hero .intro > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
.hero .intro > *:nth-child(2){animation-delay:.08s}
.hero .intro > *:nth-child(3){animation-delay:.18s}
.hero .intro > *:nth-child(4){animation-delay:.28s}
.hero .intro > *:nth-child(5){animation-delay:.38s}
.hero .intro > *:nth-child(6){animation-delay:.48s}
.hero .quote{animation:rise 1s .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.hero h1{text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero h1 .red{color:var(--red-hot)}
.badge-live{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:.45rem .9rem;border-radius:999px;font-weight:600;color:#fff;width:max-content;max-width:100%}
.badge-live i{width:9px;height:9px;border-radius:50%;background:#2fd36b;box-shadow:0 0 0 0 rgba(47,211,107,.7);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(47,211,107,.7)}80%,100%{box-shadow:0 0 0 10px rgba(47,211,107,0)}}

/* Bouton d'appel qui pulse */
.btn-red{background:linear-gradient(135deg,var(--red-hot),var(--red) 55%,var(--red-dk));box-shadow:0 10px 26px -10px var(--glow)}
.btn-red:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px var(--glow)}
.btn{transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.pulse{position:relative}
.pulse::before{content:"";position:absolute;inset:-4px;border-radius:calc(var(--radius) + 4px);border:2px solid var(--red-hot);opacity:0;animation:ring 2.4s infinite}
@keyframes ring{0%{opacity:.8;transform:scale(.96)}70%,100%{opacity:0;transform:scale(1.12)}}

/* Bandeau défilant */
.ticker{background:var(--red);color:#fff;overflow:hidden;border-block:1px solid var(--red-dk)}
.ticker-track{display:flex;width:max-content;animation:scroll 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker ul{display:flex;list-style:none;margin:0;padding:.85rem 0;gap:0}
.ticker li{display:flex;align-items:center;gap:1.1rem;padding-right:1.1rem;font:800 1.35rem/1 var(--f-display);text-transform:uppercase;white-space:nowrap}
.ticker li svg{width:22px;height:22px;opacity:.75}
@keyframes scroll{to{transform:translateX(-50%)}}

/* Réassurance sombre */
.trust{background:var(--ink);border:0}
.trust li{color:#fff}
.trust svg{color:var(--red-hot);filter:drop-shadow(0 0 10px rgba(255,61,46,.5))}

/* Cartes services avec photo */
.services{gap:1.25rem;background:none;border:0;overflow:visible}
.service{border-radius:10px;padding:0;overflow:hidden;background:var(--paper);box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(28,27,29,.45);border:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.service:hover{transform:translateY(-6px);box-shadow:0 30px 50px -26px rgba(227,18,11,.45);background:var(--paper)}
.service .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(circle at 50% 0,transparent 15px,#2c2a2d 16px) 0 0/32px 16px,var(--ink-2)}
.service .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.service:hover .media img{transform:scale(1.08)}
.service .media::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(20,19,21,.55))}
.service .ico{position:absolute;left:1.25rem;bottom:-1px;z-index:1;width:58px;height:58px;display:grid;place-items:center;background:var(--red);color:#fff;border-radius:10px 10px 0 0}
.service .ico svg{width:30px;height:30px;color:#fff}
.service .txt{padding:1.3rem 1.4rem 1.5rem;display:grid;gap:.6rem}
.service .more{display:inline-flex;align-items:center;gap:.4rem;color:var(--red)}
.service .more::after{content:"";width:18px;height:2px;background:currentColor;transition:width .25s}
.service:hover .more::after{width:34px}
.service.cta-card{background:linear-gradient(150deg,var(--red-hot),var(--red) 45%,var(--red-dk));border:0;color:#fff;padding:1.6rem 1.5rem;align-content:center}
.service.cta-card svg{color:#fff;width:48px;height:48px}
.service.cta-card p{color:#ffe1de}
.service.cta-card .more{color:#fff}

/* Sections sombres avec halo rouge */
.section-ink{position:relative;overflow:hidden;background:radial-gradient(70% 90% at 100% 0,rgba(227,18,11,.28),transparent 60%),radial-gradient(50% 70% at 0 100%,rgba(227,18,11,.16),transparent 60%),var(--ink)}
.steps li{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--red-hot);border-radius:0 0 10px 10px;padding:1.3rem 1.2rem 1.4rem;transition:transform .3s,background .3s}
.steps li:hover{transform:translateY(-4px);background:rgba(255,255,255,.07)}
.steps li::before{color:var(--red-hot);text-shadow:0 0 22px rgba(255,61,46,.55)}

/* Galerie + visionneuse */
.gallery{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:220px;gap:.9rem}
.gallery figure{position:relative;border-radius:10px;overflow:hidden;cursor:zoom-in;background:var(--ink-2)}
.gallery figure.big{grid-column:span 2;grid-row:span 2}
.gallery figure.wide{grid-column:span 2}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s}
.gallery figure:hover img{transform:scale(1.07);filter:saturate(1.15)}
.gallery figcaption{position:absolute;inset:auto 0 0;padding:2.2rem 1rem .85rem;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(20,19,21,.85));transform:translateY(8px);opacity:.92;transition:transform .3s,opacity .3s}
.gallery figure:hover figcaption{transform:none;opacity:1}
.lightbox[hidden]{display:none!important}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(12,11,12,.94);display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lightbox img{max-height:86vh;width:auto;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:zoomIn .35s cubic-bezier(.2,.7,.2,1)}
.lightbox p{color:#fff;margin-top:.8rem;text-align:center;font-weight:600}
.lightbox button{position:absolute;background:rgba(255,255,255,.1);color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.6rem;cursor:pointer}
.lightbox .lb-close{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lightbox .lb-prev{left:max(12px,env(safe-area-inset-left,0px));top:50%}
.lightbox .lb-next{right:max(12px,env(safe-area-inset-right,0px));top:50%}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* Avant / après */
.ba{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:12px;overflow:hidden;user-select:none;touch-action:pan-y;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);background:var(--ink-2)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba .after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:4px;margin-left:-2px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.4)}
.ba .handle::after{content:"⟷";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:1.4rem;box-shadow:0 0 0 6px rgba(255,255,255,.35)}
.ba .tag{position:absolute;top:1rem;padding:.35rem .75rem;border-radius:999px;font-weight:700;font-size:.85rem;background:rgba(20,19,21,.75);color:#fff}
.ba .tag.l{left:1rem}.ba .tag.r{right:1rem;background:var(--red)}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* Apparition au défilement (le contenu reste visible sans JS) */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}.js .reveal[data-d="2"]{transition-delay:.16s}.js .reveal[data-d="3"]{transition-delay:.24s}.js .reveal[data-d="4"]{transition-delay:.32s}.js .reveal[data-d="5"]{transition-delay:.4s}

/* Bandeau final rouge */
.cta-band{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--red-hot),var(--red) 45%,var(--red-dk))}
.cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,transparent 0 55%,rgba(0,0,0,.12) 55% 72%,transparent 72%),linear-gradient(210deg,transparent 0 62%,rgba(255,255,255,.08) 62% 78%,transparent 78%)}
.cta-band .wrap{position:relative}

/* Bloc à propos photo */
.about-photo{position:relative;border-radius:12px;overflow:hidden;min-height:340px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-photo .about-card{position:absolute;left:1rem;right:1rem;bottom:1rem;background:rgba(20,19,21,.86);backdrop-filter:blur(8px)}

@media (max-width:1020px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px}
  .hero{min-height:0}
}
@media (max-width:640px){
  .gallery{grid-auto-rows:150px}
  .gallery figure.big{grid-column:span 2;grid-row:span 2}
  .ticker li{font-size:1.1rem}
  .about-photo{min-height:520px}
}
@media (prefers-reduced-motion:reduce){
  .hero-bg img,.ticker-track,.pulse::before,.badge-live i,.hero .intro > *,.hero .quote{animation:none!important}
  .js .reveal{opacity:1;transform:none}
}
.gallery.g4{grid-auto-rows:260px}
.gallery.g4 figcaption{transform:none}
@media (max-width:640px){.gallery.g4{grid-template-columns:1fr 1fr;grid-auto-rows:170px}}
.service{gap:0}
.service.cta-card{gap:.7rem}
.about-photo{min-height:520px}

/* ===================== V3 : Montserrat, héros avec formulaire, maison 3D ===================== */
:root{--f-display:"Montserrat","Segoe UI",system-ui,sans-serif;--f-body:"Montserrat","Segoe UI",system-ui,sans-serif}
body{font-size:1rem;line-height:1.7}
h1{font-weight:800;font-size:clamp(1.9rem,2.6vw + 1rem,3.2rem);letter-spacing:-.015em;line-height:1.1}
h2{font-weight:800;font-size:clamp(1.5rem,1.6vw + 1rem,2.25rem);letter-spacing:-.01em;line-height:1.15}
h3{font-weight:700;font-size:1.2rem;letter-spacing:-.005em}
.hero-small h1{font-size:clamp(1.8rem,2.2vw + 1rem,2.8rem)}
.brand b{font-size:1.2rem;letter-spacing:0}
.quote h2{font-size:1.45rem}
.ticker li{font-size:1.05rem;letter-spacing:.02em}
.steps li::before{font-size:2.2rem}
.lead{font-size:1.08rem}
.btn{font-size:.98rem}

/* Héros de page : texte à gauche, formulaire à droite */
.hero-page .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:center;padding-block:3rem 4rem}
.hero-page .quote{max-width:520px;justify-self:end;width:100%}
.hero .wrap{align-items:center}
@media (max-width:1020px){.hero .wrap,.hero-page .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2rem}}
@media (max-width:860px){.hero .wrap,.hero-page .wrap{grid-template-columns:minmax(0,1fr)}.hero-page .quote{justify-self:stretch;max-width:none}}

/* Carte rouge des services : texte centré */
.service.cta-card{justify-items:center;text-align:center;align-content:center;padding:2rem 1.5rem}
.service.cta-card .more{justify-content:center}

/* FAQ centrée */
.faq-section .head{margin-inline:auto;text-align:center;justify-items:center}
.faq{margin-inline:auto;width:100%}

/* Bloc texte + maison 3D */
.local-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:3rem;align-items:center}
@media (max-width:1020px){.local-split{grid-template-columns:minmax(0,1fr)}}

.roof3d{display:grid;gap:1.25rem;justify-items:center}
.scene{width:100%;max-width:440px;height:400px;perspective:1100px;display:grid;place-items:center;position:relative;
  background:radial-gradient(60% 55% at 50% 60%,rgba(227,18,11,.10),transparent 70%)}
.house{--W:220px;--D:180px;--Hw:110px;--rise:63px;--slope:132px;--RW:250px;
  position:relative;width:0;height:0;transform-style:preserve-3d;transform:translateY(40px) rotateX(-20deg) rotateY(-35deg);animation:turn 24s linear infinite}
.house > div{position:absolute;transform-style:preserve-3d;backface-visibility:visible}
@keyframes turn{from{transform:translateY(40px) rotateX(-20deg) rotateY(-35deg)}to{transform:translateY(40px) rotateX(-20deg) rotateY(325deg)}}

.ground{width:360px;height:320px;left:-180px;top:-160px;transform:translateY(calc(var(--Hw)/2)) rotateX(90deg);
  background:radial-gradient(closest-side,rgba(28,27,29,.28),transparent)}
.wall{background:linear-gradient(#f4ece2,#e6d9c8);border:1px solid #d3c3ad;transform-origin:50% 100%;animation:wall 12s infinite}
.wall.f,.wall.b{width:var(--W);height:var(--Hw);left:calc(var(--W)/-2);top:calc(var(--Hw)/-2)}
.wall.l,.wall.r{width:var(--D);height:var(--Hw);left:calc(var(--D)/-2);top:calc(var(--Hw)/-2)}
.wall.f{transform:translateZ(calc(var(--D)/2))}
.wall.b{transform:rotateY(180deg) translateZ(calc(var(--D)/2))}
.wall.l{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.wall.r{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.wall.f{background:
  linear-gradient(#5c4a3a,#5c4a3a) 50% 100%/34px 62px no-repeat,
  linear-gradient(#9fc3d8,#7aa6c0) 18% 40%/34px 34px no-repeat,
  linear-gradient(#9fc3d8,#7aa6c0) 82% 40%/34px 34px no-repeat,
  linear-gradient(#f4ece2,#e6d9c8)}
.wall.l,.wall.r{background:linear-gradient(#9fc3d8,#7aa6c0) 50% 40%/30px 30px no-repeat,linear-gradient(#ece2d4,#dccdb9)}
.gable{width:var(--D);height:var(--rise);left:calc(var(--D)/-2);top:calc(var(--Hw)/-2 - var(--rise));
  background:linear-gradient(#efe5d8,#e2d4c1);clip-path:polygon(50% 0,100% 100%,0 100%);transform-origin:50% 100%;animation:gable 12s infinite}
.gable.l{transform:rotateY(-90deg) translateZ(calc(var(--W)/2))}
.gable.r{transform:rotateY(90deg) translateZ(calc(var(--W)/2))}
.slope{width:var(--RW);height:var(--slope);left:calc(var(--RW)/-2);top:calc(var(--Hw)/-2 - var(--rise));transform-origin:50% 0}
.slope.f{transform:rotateX(55deg)}
.slope.b{transform:rotateX(-55deg)}
.slope > i{position:absolute;inset:0;display:block}
.slope .rafters{background:repeating-linear-gradient(90deg,#b98a55 0 7px,transparent 7px 40px);animation:rafters 12s infinite}
.slope .membrane{background:linear-gradient(#5d6b78,#4b5763);opacity:.92;animation:membrane 12s infinite}
.slope .battens{background:repeating-linear-gradient(0deg,#d9a85f 0 4px,transparent 4px 18px);animation:battens 12s infinite}
.slope .tiles3d{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 2px,transparent 2px 18px),
  repeating-linear-gradient(90deg,#b8391f 0 4px,#e2653f 4px 11px,#c94a2c 11px 16px,#a3311a 16px 20px);
  clip-path:inset(100% 0 0 0);animation:tiles 12s infinite}
.ridge{width:var(--RW);height:16px;left:calc(var(--RW)/-2);top:calc(var(--Hw)/-2 - var(--rise) - 8px);
  background:repeating-linear-gradient(90deg,#9e2f17 0 22px,#c4482a 22px 26px);border-radius:8px;animation:ridge 12s infinite}

@keyframes wall{0%{transform-origin:50% 100%;opacity:0}3%{opacity:1}96%{opacity:1}100%{opacity:0}}
.wall{animation-name:wallrise}
@keyframes wallrise{0%{opacity:0;filter:brightness(1.3)}4%,94%{opacity:1;filter:none}100%{opacity:0}}
@keyframes gable{0%,10%{opacity:0}16%,94%{opacity:1}100%{opacity:0}}
@keyframes rafters{0%,16%{opacity:0}22%,94%{opacity:1}100%{opacity:0}}
@keyframes membrane{0%,24%{opacity:0}32%,94%{opacity:.92}100%{opacity:0}}
@keyframes battens{0%,34%{opacity:0}42%,94%{opacity:1}100%{opacity:0}}
@keyframes tiles{0%,44%{clip-path:inset(100% 0 0 0)}78%,94%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 0);opacity:0}}
@keyframes ridge{0%,78%{opacity:0;transform:translateY(-60px) rotateX(90deg)}86%,94%{opacity:1;transform:translateY(0) rotateX(90deg)}100%{opacity:0;transform:rotateX(90deg)}}

.build-steps{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.build-steps li{font-size:.82rem;font-weight:600;padding:.35rem .7rem;border-radius:999px;background:var(--mist);color:var(--muted);border:1px solid var(--line);animation:12s infinite}
.build-steps li:nth-child(1){animation-name:st1}.build-steps li:nth-child(2){animation-name:st2}.build-steps li:nth-child(3){animation-name:st3}.build-steps li:nth-child(4){animation-name:st4}.build-steps li:nth-child(5){animation-name:st5}
@keyframes st1{0%,22%{background:var(--red);color:#fff;border-color:var(--red)}24%,100%{background:var(--mist);color:var(--muted)}}
@keyframes st2{0%,23%{background:var(--mist);color:var(--muted)}25%,33%{background:var(--red);color:#fff;border-color:var(--red)}35%,100%{background:var(--mist);color:var(--muted)}}
@keyframes st3{0%,33%{background:var(--mist);color:var(--muted)}35%,43%{background:var(--red);color:#fff;border-color:var(--red)}45%,100%{background:var(--mist);color:var(--muted)}}
@keyframes st4{0%,43%{background:var(--mist);color:var(--muted)}45%,77%{background:var(--red);color:#fff;border-color:var(--red)}79%,100%{background:var(--mist);color:var(--muted)}}
@keyframes st5{0%,78%{background:var(--mist);color:var(--muted)}80%,96%{background:var(--red);color:#fff;border-color:var(--red)}98%,100%{background:var(--mist);color:var(--muted)}}
@media (max-width:640px){.scene{height:330px}.house{scale:.8}}
@media (prefers-reduced-motion:reduce){
  .house,.wall,.gable,.slope i,.ridge,.build-steps li{animation:none!important}
  .slope .tiles3d{clip-path:none}.ridge{transform:rotateX(90deg)}
}
@keyframes wallrise{0%{clip-path:inset(100% 0 0 0);opacity:1}10%,94%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
@media (prefers-reduced-motion:reduce){.wall{clip-path:none}}

/* ===================== V4 ===================== */
.about-card h2,.about-card h3{color:#fff}

/* Bandeau final centré */
.cta-band .wrap{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:1.25rem}
.cta-band .stack{justify-items:center}
.cta-band .btn-row{justify-content:center}

/* Textes centrés sur tablette et mobile */
@media (max-width:860px){
  .hero .intro{text-align:center;justify-items:center}
  .hero .btn-row,.crumbs ol{justify-content:center}
  .hero-points{justify-items:center}
  .hero .lead{margin-inline:auto}
  .quote h2,.quote p.small{text-align:center}
  .head{text-align:center;justify-items:center;margin-inline:auto}
  .prose h2,.prose h3{text-align:center}
  .service .txt{text-align:center;justify-items:center}
  .service .ico{left:50%;transform:translateX(-50%)}
  .service .more{justify-content:center}
  .zone{text-align:center;justify-items:center}
  .steps li{text-align:center;justify-items:center}
  .about-card{text-align:center;justify-items:center}
  .about-card .btn-row{justify-content:center}
  .checks{justify-items:center}
  .checks li{text-align:left}
  .trust li{flex-direction:column;text-align:center;justify-content:center}
  .communes{justify-content:center}
  .footer-grid{text-align:center}
  .footer .logo{margin-inline:auto}
  .footer .legal{justify-content:center;text-align:center}
  .faq summary{text-align:left}
}

/* Mobile : on masque le détail des toitures locales pour alléger la page */
@media (max-width:640px){.hide-mobile{display:none}}
.hero-bg picture{display:block;width:100%;height:100%}

/* ===================== V5 : réalisations, conseils ===================== */
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.tags li{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:.3rem .8rem;font-size:.85rem;font-weight:600}
.byline{color:var(--on-dark-muted);font-size:.9rem}
.center-cta{display:flex;justify-content:center;margin-top:2rem}
.communes a{color:var(--ink);text-decoration:none;font-weight:600}
.communes a:hover{color:var(--red)}
.article{margin-inline:auto;max-width:72ch}
.article h2{margin-top:1.5rem}
.table-wrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:8px}
.table-wrap table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
.table-wrap th,.table-wrap td{text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{background:var(--ink);color:#fff;font-weight:700}
.table-wrap tr:nth-child(even) td{background:var(--mist)}
.table-wrap td:first-child{font-weight:600;color:var(--ink)}
.about-card a{color:#fff}
.nav{gap:0}
.nav a,.nav summary{padding:.6rem .55rem;font-size:.95rem}
@media (max-width:1180px){.header .btn{padding:.7rem .85rem;font-size:.9rem}}
@media (max-width:860px){.tags{justify-content:center}.byline{text-align:center}}

/* ===================== V6 : performance mobile ===================== */
/* Texte du héros visible dès le premier rendu (LCP) : animation sans opacité */
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}
.hero .quote{animation-name:rise}
/* Point vert : animation composée par le GPU (plus de box-shadow animé) */
.badge-live i{position:relative;animation:none;box-shadow:none}
.badge-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2fd36b;animation:ping2 2s infinite}
@keyframes ping2{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
/* Maison 3D : uniquement transform/opacité, en pause hors écran */
.wall{animation-name:wallfade;clip-path:none}
@keyframes wallfade{0%{opacity:0}10%,94%{opacity:1}100%{opacity:0}}
.slope{overflow:hidden}
.slope .tiles3d{clip-path:none;transform:translateY(100%);animation-name:tiles2}
@keyframes tiles2{0%,44%{transform:translateY(100%)}78%,94%{transform:translateY(0);opacity:1}100%{transform:translateY(0);opacity:0}}
.house,.house *,.build-steps li{animation-play-state:paused}
.roof3d.playing .house,.roof3d.playing .house *,.roof3d.playing .build-steps li{animation-play-state:running}
/* Rendu différé des sections hors écran */
main > .section,main > .faq-section{content-visibility:auto;contain-intrinsic-size:auto 900px}
.form .consent span{min-width:0}
@media (max-width:860px){
  .badge-live,.about-photo .about-card{backdrop-filter:none}
  .about-photo .about-card{background:rgba(20,19,21,.92)}
  .table-wrap table{min-width:0;font-size:.88rem}
  .table-wrap th,.table-wrap td{padding:.6rem .55rem}
}
@media (prefers-reduced-motion:reduce){.slope .tiles3d{transform:none}.badge-live i::after{animation:none}}
/* Police de secours calée sur Montserrat : pas de saut de mise en page au chargement */
@font-face{font-family:"Montserrat Fallback";src:local("Arial");size-adjust:112.8%;ascent-override:85.8%;descent-override:22.3%;line-gap-override:0%}
:root{--f-display:"Montserrat","Montserrat Fallback",Arial,sans-serif;--f-body:"Montserrat","Montserrat Fallback",Arial,sans-serif}
.mbar a small{opacity:1}