/* ============================================================
   NICOLAS COUVERTURE
   Direction: zinc. Signature: le joint debout.
   Shared by index / toiture / facade / isolation.
   ============================================================ */

/* Fonts served from our own domain: no request to Google before the page can
   draw, and no visitor address sent to a third party. Latin subset only. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700 800;font-display:swap;
  src:url("fonts/bricolage-700-800.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 600;font-display:swap;
  src:url("fonts/public-sans-400-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("fonts/plex-mono-500.woff2") format("woff2")}

:root{
  --canvas:#E7EAEE;
  --panel:#D9DFE5;
  --panel-2:#CFD7DE;
  --accent:#A9502A;
  --accent-hover:#8E4020;
  --accent-muted:#C08258;
  --text-secondary:#4C5762;
  --text-primary:#12171C;
  --hero-ink:#F4F2EE;
  --scrim:#0A0D11;
  --line:#B9C3CC;
  --tshadow:0 1px 2px rgba(5,8,12,.95),0 3px 12px rgba(5,8,12,.78),0 10px 44px rgba(5,8,12,.8);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --nav-h:68px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Bricolage Grotesque","Public Sans",system-ui,sans-serif;font-weight:800;line-height:1.02;letter-spacing:-.022em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:12px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--text-primary);color:var(--canvas);padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus:not(:focus-visible){outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the fixed environment layer ---------- */
.env{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 90% at 12% -10%, rgba(255,238,214,.55) 0%, rgba(255,238,214,0) 55%),
    radial-gradient(120% 80% at 92% 8%, rgba(176,196,214,.42) 0%, rgba(176,196,214,0) 60%);
  animation:drift 110s var(--ease-soft) -30s infinite alternate}
@keyframes drift{from{transform:translate3d(-2.5%,-1.5%,0) scale(1.04)}to{transform:translate3d(2.5%,1.5%,0) scale(1.09)}}
.grain{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
main,nav,footer{position:relative;z-index:2}

/* ============================================================
   NAV
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px clamp(16px,4vw,44px);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease);
  border-bottom:1px solid transparent}
.nav.solid{background:rgba(231,234,238,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:17px;letter-spacing:-.02em;color:var(--hero-ink);text-shadow:var(--tshadow);white-space:nowrap;transition:color .5s var(--ease),text-shadow .5s var(--ease)}
.nav.solid .brand{color:var(--text-primary);text-shadow:none}
.brand .mono{font-weight:400;letter-spacing:.14em;opacity:.72;font-size:11px;white-space:nowrap}
.nav-right{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px)}
.nav-links{display:flex;align-items:center;gap:clamp(10px,1.8vw,26px);list-style:none;margin:0;padding:0}
.nav-links a{text-decoration:none;font-size:15px;font-weight:600;color:var(--hero-ink);text-shadow:var(--tshadow);
  padding:6px 0;position:relative;transition:color .4s var(--ease),text-shadow .5s var(--ease)}
.nav.solid .nav-links a{color:var(--text-secondary);text-shadow:none}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent-muted);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav.solid .nav-links a:hover,.nav.solid .nav-links a[aria-current="page"]{color:var(--text-primary)}
.nav-links a[aria-current="page"]::after{background:var(--accent)}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:0;
  align-items:center;justify-content:center;color:var(--hero-ink)}
.nav.solid .burger{color:var(--text-primary)}
.burger span{display:block;width:22px;height:2px;background:currentColor;position:relative;
  transition:background .3s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;
  transition:transform .4s var(--ease)}
.burger span::before{top:-7px}
.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
/* scrolls on its own when it is taller than the screen (a phone held sideways),
   and always starts below the bar */
.menu{position:fixed;top:0;right:0;bottom:0;left:0;z-index:55;background:rgba(18,23,28,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:calc(var(--nav-h) + 22px) clamp(24px,8vw,60px) 24px;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.menu.open{opacity:1;visibility:visible}
.menu a{text-decoration:none;color:#EDEBE6;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-size:clamp(1.9rem,8vw,2.6rem);letter-spacing:-.024em;padding:10px 0;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(1){transition-delay:.06s}
.menu.open a:nth-child(2){transition-delay:.12s}
.menu.open a:nth-child(3){transition-delay:.18s}
.menu.open a:nth-child(4){transition-delay:.24s}
.menu.open a:nth-child(5){transition-delay:.30s}
.menu.open a:nth-child(6){transition-delay:.36s}
.menu.open a:nth-child(7){transition-delay:.42s}
.menu.open a:nth-child(8){transition-delay:.48s}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent-muted)}
.menu .tel{font-family:"IBM Plex Mono",monospace;font-weight:400;font-size:1rem;letter-spacing:.06em;
  color:#9DA9B4;margin-top:18px}
.menu .tel+.tel{margin-top:0;padding-top:4px}
/* centred when it fits, top-aligned and scrollable when it does not */
.menu>a:first-child{margin-top:auto}
.menu>a:last-child{margin-bottom:auto}
@media (max-height:600px){.menu a{font-size:clamp(1.5rem,6.5vh,1.9rem);padding:6px 0}}

/* the call button: phones only, where the nav links are folded away.
   Outlined, so it never competes with the solid "Devis gratuit" beside it. */
.nav .btn-call{display:none;background:transparent;color:var(--hero-ink);
  border:1px solid rgba(244,242,238,.55);box-shadow:none;text-shadow:none;gap:7px}
.nav .btn-call:hover{background:rgba(244,242,238,.13);box-shadow:none}
.nav.solid .btn-call{color:var(--text-primary);border-color:var(--text-secondary)}
.nav.solid .btn-call:hover{background:var(--panel)}
@media (max-width:960px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .nav .btn-call{display:inline-flex}
}
@media (max-width:620px){
  .nav{padding:11px 16px}
  .brand{font-size:15px}
  .brand .mono{display:none}
  .nav .btn{padding:11px 14px;font-size:14px}
}
/* the department tag goes before the call button can push the burger off screen */
@media (max-width:700px){
  .brand .mono{display:none}
}
/* too narrow for both buttons: the call wins, the quote stays one tap away in the menu */
@media (max-width:540px){
  .nav .btn-devis{display:none}
}
@media (max-width:360px){
  .nav{gap:10px}
  .nav .btn-call{padding-left:11px;padding-right:11px}
}
/* very small screens: the phone icon alone, its accessible name stays "Appeler le ..." */
@media (max-width:330px){
  .nav .btn-call{font-size:0;gap:0}
}
body.menu-open{overflow:hidden}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;border:0;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;
  padding:13px 24px;border-radius:3px;background:var(--accent);color:#fff;text-shadow:none;
  transition:background .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 22px rgba(169,80,42,.28),0 1px 0 rgba(255,255,255,.22) inset}
.btn:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--text-primary);border:1px solid var(--line);box-shadow:none}
.btn-ghost:hover{background:var(--panel);border-color:var(--text-secondary);box-shadow:none}
.btn-on-film{background:transparent;color:var(--hero-ink);border:1px solid rgba(244,242,238,.55);box-shadow:none}
.btn-on-film:hover{background:rgba(244,242,238,.13);border-color:var(--hero-ink);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   HERO (a still photograph, no motion)
   ============================================================ */
.hero{position:relative;display:flex;align-items:flex-end;isolation:isolate;
  min-height:min(94svh,860px);
  padding:calc(var(--nav-h) + clamp(28px,6vw,60px)) 0 clamp(38px,7vw,74px)}
/* a real <img>, so the browser finds and fetches it before any script runs */
.hero-img{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;background:#0A0D11}
.hero::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,13,17,.9) 0%,rgba(10,13,17,.5) 34%,rgba(10,13,17,.12) 62%,rgba(10,13,17,.42) 100%),
    radial-gradient(ellipse 90% 70% at 22% 78%,rgba(5,8,12,.62) 0%,rgba(5,8,12,0) 72%)}
.hero .wrap{width:100%}
/* The container is sized in px on purpose: a ch cap on a container resolves against
   the inherited body font, not the display face inside it, and breaks the headline. */
.hero-copy{max-width:min(660px,94vw);color:var(--hero-ink);text-shadow:var(--tshadow)}
.hero h1{font-size:clamp(2.05rem,4.6vw,3.9rem);letter-spacing:-.03em;max-width:15ch}
.hero .lede{margin-top:20px;font-size:clamp(1rem,1.5vw,1.18rem);color:#E4E1DB;max-width:40ch;text-shadow:var(--tshadow)}
.hero .cta-row{margin-top:clamp(26px,4vw,36px);display:flex;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(8,11,16,.55);border:1px solid rgba(150,162,176,.32);
  border-radius:999px;padding:7px 14px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,8,12,.85);
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#DDE4EA;
  margin-bottom:20px}

/* a shorter hero for the service pages */
.hero.hero-page{min-height:min(64svh,560px)}
.hero.hero-page h1{font-size:clamp(2.2rem,5.2vw,3.9rem);max-width:14ch;text-wrap:balance}
.hero.hero-page .hero-copy{max-width:min(620px,94vw)}
.crumb{display:flex;gap:9px;align-items:center;margin-bottom:16px;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#C6CEd6;text-shadow:var(--tshadow)}
.crumb a{text-decoration:none;color:#C6CED6;transition:color .3s var(--ease)}
.crumb a:hover{color:var(--accent-muted)}
.crumb span{opacity:.5}

/* the trust bar sitting under the hero */
.trust{background:var(--text-primary);color:#B9C4CE;border-bottom:1px solid #232B33}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1180px;margin:0 auto}
.trust li{display:flex;align-items:center;gap:12px;padding:20px clamp(16px,3vw,28px);font-size:.94rem;line-height:1.4}
.trust li+li{border-left:1px solid #232B33}
.trust svg{flex:none;color:var(--accent-muted)}
@media (max-width:760px){
  .trust ul{grid-template-columns:1fr}
  .trust li+li{border-left:0;border-top:1px solid #232B33}
}

/* ============================================================
   THE SIGNATURE: le joint debout
   ============================================================ */
.seam{position:absolute;left:clamp(14px,3.4vw,46px);top:0;bottom:0;width:26px;pointer-events:none;z-index:3}
.seam svg{height:100%;width:100%;overflow:visible}
.seam .rail{stroke:var(--line);stroke-width:1;fill:none}
.seam .drawn{stroke:var(--accent-muted);stroke-width:2;fill:none;stroke-linecap:square;
  stroke-dasharray:1000;stroke-dashoffset:1000;transition:stroke-dashoffset .1s linear}
.seam .agrafe{fill:none;stroke:var(--accent-muted);stroke-width:1.6;opacity:0;transition:opacity .55s var(--ease)}
.seam .agrafe.lit{opacity:.95}
@media (max-width:900px){.seam{display:none}}

/* ============================================================
   SECTIONS
   ============================================================ */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,44px)}
section{position:relative}
section[id],main[id]{scroll-margin-top:92px}
.kicker{color:var(--accent);margin-bottom:16px;display:flex;align-items:center;gap:11px}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent);flex:none}
.rule{height:1px;background:var(--line);border:0;margin:0;box-shadow:0 1px 0 rgba(255,255,255,.85)}
.lede{color:var(--text-secondary)}

/* entrance choreography. Stagger delays are set inline by JS at entrance time and
   cleared the moment it finishes, so hovers on later siblings never lag. Done in JS
   on purpose: nth-child delay rules and their cleanup rules fight over specificity,
   and the cleanup silently loses. */
/* Hidden entrance states only apply once the head script has added .js: without
   JavaScript, or when site.js fails to arrive, everything is simply visible. */
.rise{transition:opacity .85s var(--ease),transform .85s var(--ease)}
.js .rise{opacity:0;transform:translateY(26px)}
.js .in .rise,.js .rise.in{opacity:1;transform:none}

/* the same safety net for the other script-driven pieces */
html:not(.js) .find{opacity:1;transform:none}
html:not(.js) .finds-cap{opacity:1}
html:not(.js) .roof-view .veil{opacity:0}
html:not(.js) .roof-view .climb{transform:none;background-image:url("toit-inspection-1100.jpg")}
html:not(.js) .hold-wrap,html:not(.js) .burger,html:not(.js) .seam{display:none}

/* photos inside a framed figure: the frame keeps its ratio and placeholder tone,
   the image fills it (the <img> sits inside a <picture>) */
.fig img,.zones-fig img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}

/* --- la methode: three steps --- */
.methode{padding:clamp(76px,12vw,140px) 0 clamp(66px,10vw,116px)}
.methode h2{font-size:clamp(1.95rem,4.6vw,3.5rem);max-width:19ch}
.steps{margin-top:clamp(46px,7vw,74px);display:grid;gap:clamp(20px,3vw,30px);grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:4px;overflow:hidden;position:relative;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.step:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(18,23,28,.11);border-color:var(--accent-muted)}
.step .fig{aspect-ratio:4/3;background:var(--panel-2) center/cover no-repeat;position:relative;border-bottom:1px solid var(--line)}
.step .fig::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(18,23,28,.2),transparent 55%)}
.step .num{position:absolute;left:14px;top:14px;z-index:2;width:30px;height:30px;border-radius:999px;
  background:rgba(10,13,17,.62);backdrop-filter:blur(8px);color:#EFEDE8;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;border:1px solid rgba(150,162,176,.35)}
.step .body{padding:24px 24px 28px}
.step h3{font-size:1.32rem;margin-bottom:9px}
.step p{color:var(--text-secondary);font-size:.975rem}

/* --- the three service cards --- */
.familles{padding:clamp(66px,10vw,116px) 0;background:linear-gradient(to bottom,transparent,rgba(207,215,222,.55),transparent)}
.familles .head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,60px);align-items:end}
@media (max-width:860px){.familles .head{grid-template-columns:1fr}}
.familles h2{font-size:clamp(1.9rem,4.3vw,3.2rem);max-width:15ch}
.familles .head p{color:var(--text-secondary);max-width:40ch}
.cards{margin-top:clamp(40px,6vw,62px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,28px)}
@media (max-width:900px){.cards{grid-template-columns:1fr}}
.card{position:relative;display:flex;flex-direction:column;text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--panel);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 50px rgba(18,23,28,.14);border-color:var(--accent-muted)}
.card .fig{aspect-ratio:16/11;background:var(--panel-2) center/cover no-repeat;position:relative;border-bottom:1px solid var(--line);
  overflow:hidden}
.card .fig::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,rgba(18,23,28,.34),transparent 58%)}
.card .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:1.42rem;margin-bottom:10px}
.card p{color:var(--text-secondary);font-size:.97rem;flex:1}
.card ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.card ul li{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);border:1px solid var(--line);border-radius:2px;padding:5px 8px;background:var(--canvas)}
.card .more{margin-top:20px;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:.95rem}
.card .more svg{transition:transform .4s var(--ease)}
.card:hover .more svg{transform:translateX(4px)}

/* --- generic prestation list, used on the service pages --- */
.presta{padding:clamp(66px,10vw,120px) 0}
.presta .head{max-width:60ch}
.presta h2{font-size:clamp(1.9rem,4.3vw,3.2rem);max-width:16ch}
.presta .head p{margin-top:18px;color:var(--text-secondary)}
.grid-presta{margin-top:clamp(40px,6vw,62px);display:grid;grid-template-columns:repeat(12,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.presta-item{grid-column:span 4;background:var(--canvas);padding:clamp(22px,3vw,34px);position:relative;
  transition:background .45s var(--ease)}
.presta-item:hover{background:var(--panel)}
.presta-item h3{font-size:1.18rem;margin-bottom:8px;display:flex;align-items:baseline;gap:10px}
.presta-item h3 span{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:400;color:var(--accent);letter-spacing:.1em}
.presta-item p{color:var(--text-secondary);font-size:.96rem;max-width:46ch}
.grid-presta.two .presta-item{grid-column:span 6}
@media (max-width:860px){.presta-item,.grid-presta.two .presta-item{grid-column:span 12}}

/* --- alternating photo + text block --- */
.duo{padding:clamp(56px,9vw,104px) 0}
.duo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:center}
.duo.flip .wrap>.fig{order:2}
@media (max-width:900px){
  .duo .wrap{grid-template-columns:1fr;gap:30px}
  .duo.flip .wrap>.fig{order:0}
}
.duo .fig{aspect-ratio:4/3;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;
  position:relative;overflow:hidden}
.duo h2{font-size:clamp(1.7rem,3.8vw,2.7rem);max-width:14ch}
.duo .lede{margin-top:18px;max-width:46ch}
/* scoped away from .mats: the materials table is a different animal and must not
   inherit this list's grid, gap or bullets */
.duo ul:not(.mats){list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.duo ul:not(.mats) li{display:flex;align-items:flex-start;gap:11px;color:var(--text-secondary);font-size:.97rem}
.duo ul:not(.mats) li::before{content:"";flex:none;width:7px;height:7px;border-radius:999px;background:var(--accent-muted);
  margin-top:.55em;box-shadow:0 0 0 4px rgba(192,130,88,.16)}
/* a full width row inside a duo section, for the materials table */
.duo .wrap-full{display:block}

/* --- materials table (zinguerie) --- */
.mats{list-style:none;margin:clamp(32px,5vw,50px) 0 0;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:4px;overflow:hidden}
.mats li{background:var(--canvas);padding:20px clamp(18px,2.6vw,28px);display:grid;
  grid-template-columns:170px 1fr;gap:clamp(14px,3vw,32px);align-items:baseline;transition:background .45s var(--ease)}
.mats li:hover{background:var(--panel)}
.mats strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.015em;
  display:flex;align-items:baseline;gap:10px}
.mats strong i{font-style:normal;width:12px;height:12px;border-radius:2px;flex:none;align-self:center}
.mats span{color:var(--text-secondary);font-size:.97rem}
@media (max-width:640px){.mats li{grid-template-columns:1fr;gap:6px}}

/* --- urgence --- */
.urgence{background:#12171C;color:#EDEBE6;padding:clamp(60px,9vw,104px) 0;position:relative;overflow:hidden}
.urgence::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:radial-gradient(ellipse 70% 120% at 88% 50%,rgba(169,80,42,.3),transparent 62%)}
.urgence .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.urgence .wrap{grid-template-columns:1fr}}
.urgence h2{font-size:clamp(1.85rem,4.4vw,3.2rem);max-width:14ch}
.urgence p{margin-top:18px;color:#AEB8C2;max-width:46ch}
.urgence .kicker{color:#E0916B}
.urgence .kicker::before{background:#E0916B}
.tels{display:grid;gap:12px}
.tel-card{display:flex;align-items:center;justify-content:space-between;gap:16px;text-decoration:none;
  border:1px solid #2C343D;border-radius:4px;padding:17px 20px;background:#171D24;
  transition:border-color .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.tel-card:hover{border-color:var(--accent);background:#1B222A;transform:translateY(-2px)}
.tel-card .lab{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#7E8B98;line-height:1.4}
.tel-card .num{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.16rem;
  letter-spacing:-.01em;margin-top:4px;line-height:1.2}
.tel-card svg{flex:none;color:var(--accent-muted)}

/* --- the one interactive moment --- */
.monter{padding:clamp(76px,11vw,132px) 0;position:relative;overflow:hidden}
.monter .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(30px,5vw,66px);align-items:center}
@media (max-width:900px){.monter .wrap{grid-template-columns:1fr}}
.monter h2{font-size:clamp(1.85rem,4.3vw,3.1rem);max-width:13ch}
.monter .lede{margin-top:18px;max-width:42ch}
.hold-wrap{margin-top:32px}
.hold{position:relative;display:inline-flex;align-items:center;gap:13px;border:1px solid var(--line);
  background:var(--panel);border-radius:999px;padding:13px 24px 13px 17px;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-weight:600;font-size:15px;color:var(--text-primary);
  user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease)}
.hold:hover{border-color:var(--accent-muted)}
.hold::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--accent);opacity:.14;
  transform-origin:left center;transform:scaleX(var(--h,0));transition:transform .06s linear}
.hold>*{position:relative}
.hold .dial{width:26px;height:26px;flex:none;color:var(--accent);transform:rotate(-90deg)}
.hold .dial circle{transition:stroke-dashoffset .06s linear}
.hold.done{border-color:var(--accent);background:var(--canvas)}
.roof-view{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--panel-2) center/cover no-repeat}
.roof-view .climb{position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;
  transform:scale(calc(1.16 - .16*var(--h,0)));transition:transform .09s linear;transform-origin:50% 78%}
.roof-view .veil{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(196,206,216,.94),rgba(214,222,229,.9));
  opacity:calc(1 - var(--h,0));transition:opacity .09s linear}
.finds{position:absolute;top:0;right:0;bottom:0;left:0;padding:clamp(14px,2.4vw,24px);display:flex;flex-direction:column;justify-content:flex-end;gap:9px}
.find{display:flex;align-items:center;gap:11px;background:rgba(10,13,17,.66);backdrop-filter:blur(10px);
  border:1px solid rgba(150,162,176,.3);border-radius:4px;padding:11px 14px;color:#EDEBE6;font-size:.9rem;
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.find.on{opacity:1;transform:none}
.find i{width:7px;height:7px;border-radius:999px;background:var(--accent-muted);flex:none;box-shadow:0 0 0 4px rgba(192,130,88,.2)}
.finds-cap{margin-top:16px;font-size:.88rem;color:var(--text-secondary);opacity:0;transition:opacity .6s var(--ease) .35s}
.finds-cap.on{opacity:1}
.motes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}
.mote{position:absolute;width:3px;height:3px;border-radius:999px;background:rgba(192,130,88,.55)}
.playing .mote{animation:float 13s var(--ease-soft) infinite}
.mote:nth-child(2){animation-delay:-4.2s!important}
.mote:nth-child(3){animation-delay:-8.1s!important}
.mote:nth-child(4){animation-delay:-2.3s!important}
.mote:nth-child(5){animation-delay:-10.6s!important}
@keyframes float{0%{transform:translate3d(0,14px,0);opacity:0}18%{opacity:.85}82%{opacity:.7}100%{transform:translate3d(16px,-64px,0);opacity:0}}

/* --- zones --- */
.zones{padding:clamp(66px,10vw,116px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(217,223,229,.5)}
.zones .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px)}
@media (max-width:860px){.zones .wrap{grid-template-columns:1fr}}
.zones h2{font-size:clamp(1.8rem,4.1vw,3rem);max-width:12ch}
.zones .lede{margin-top:18px;max-width:40ch}
.deps{display:flex;gap:10px;margin-top:26px}
.dep{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.5rem,3.6vw,2.5rem);
  color:var(--accent);letter-spacing:-.02em}
.dep+.dep{padding-left:10px;border-left:1px solid var(--line)}
.zones-fig{aspect-ratio:16/10;background:var(--panel-2);border:1px solid var(--line);
  border-radius:4px;margin-bottom:22px;position:relative;overflow:hidden}
.towns{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.town{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.03em;color:var(--text-secondary);
  border:1px solid var(--line);border-radius:2px;padding:8px 12px;background:var(--canvas);
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.town:hover{color:var(--accent);border-color:var(--accent-muted);background:var(--panel)}

/* --- faq --- */
.faq{padding:clamp(66px,10vw,116px) 0;background:linear-gradient(to bottom,transparent,rgba(207,215,222,.5))}
.faq .wrap{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.faq .wrap{grid-template-columns:1fr}}
.faq h2{font-size:clamp(1.8rem,4.1vw,3rem);max-width:11ch;position:sticky;top:96px}
@media (max-width:860px){.faq h2{position:static}}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.09rem;letter-spacing:-.012em;
  transition:color .35s var(--ease)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease)}
.qa details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa .ans{padding:0 0 24px;color:var(--text-secondary);max-width:60ch}
.qa .ans a{color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
.qa .ans a:hover{text-decoration:underline}
.qa details[open] .ans{animation:fadein .5s var(--ease) both}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* --- devis --- */
.devis{padding:clamp(76px,11vw,132px) 0 clamp(66px,9vw,104px);position:relative}
.devis .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,5vw,70px);align-items:start}
@media (max-width:900px){.devis .wrap{grid-template-columns:1fr}}
.devis h2{font-size:clamp(1.95rem,4.6vw,3.4rem);max-width:13ch}
.devis .lede{margin-top:18px;max-width:38ch}
.assur{margin-top:30px;display:grid;gap:12px}
.assur div{display:flex;align-items:flex-start;gap:11px;font-size:.95rem;color:var(--text-secondary)}
.assur svg{flex:none;color:var(--accent);margin-top:3px}
form{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:clamp(24px,3.4vw,38px);
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.f-row{grid-template-columns:1fr}}
.field{display:block;margin-bottom:16px}
.field span{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;font-family:"Public Sans",sans-serif;font-size:16px;
  color:var(--text-primary);background:var(--canvas);border:1px solid var(--line);border-radius:3px;padding:12px 14px;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease)}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(169,80,42,.13)}
/* 4.7:1 on the field: readable, still lighter than what the visitor types */
.field input::placeholder,.field textarea::placeholder{color:#5C6672;opacity:1}
form .btn{width:100%;margin-top:6px}
form .btn:disabled{opacity:.72;cursor:progress;transform:none}
/* robot trap: off-screen for people, still in the form for bots */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-err{margin:4px 0 12px;padding:12px 14px;border-radius:3px;border:1px solid #C9744A;
  background:#F6E6DD;color:#6E2E12;font-size:.93rem;line-height:1.5}
.form-err[hidden]{display:none}
.form-alt{margin-top:16px;font-size:.9rem;color:var(--text-secondary);text-align:center}
.form-note{margin-top:10px;font-size:.82rem;line-height:1.5;color:var(--text-secondary);text-align:center}
.form-alt a{color:var(--accent);text-decoration:none;font-weight:600}
.form-alt a:hover{text-decoration:underline}
.ok{display:none;text-align:center;padding:clamp(30px,5vw,52px) 10px}
.ok.on{display:block;animation:fadein .6s var(--ease) both}
.ok .tick{width:52px;height:52px;margin:0 auto 20px;border-radius:999px;border:1.5px solid var(--accent);
  display:grid;place-items:center;color:var(--accent)}
.ok h3{font-size:1.3rem;margin-bottom:10px}
.ok p{color:var(--text-secondary);font-size:.96rem}
form.sent .f-body{display:none}

/* --- footer --- */
footer{border-top:1px solid var(--line);background:#12171C;color:#9DA9B4;padding:clamp(52px,7vw,80px) 0 34px}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:clamp(24px,3.4vw,48px)}
@media (max-width:900px){footer .wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .wrap{grid-template-columns:1fr}}
footer h4{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:#EDEBE6;font-size:1.16rem;margin:0 0 14px;letter-spacing:-.018em}
footer .mono{color:#7E8B98;margin-bottom:12px}
footer p,footer li{font-size:.925rem;line-height:1.72}
footer ul{list-style:none;margin:0;padding:0}
footer a{color:#C3CDD6;text-decoration:none;transition:color .35s var(--ease)}
footer a:hover{color:var(--accent-muted)}
.foot-end{margin-top:clamp(38px,5vw,58px);padding-top:22px;border-top:1px solid #232B33;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;color:#7E8B98}

/* ---------- reduced motion, honoured completely ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  .rise,.js .rise{opacity:1;transform:none}
  .seam .drawn{stroke-dashoffset:0!important}
  .seam .agrafe{opacity:.95}
  .find{opacity:1;transform:none}
  .finds-cap{opacity:1}
  .roof-view .veil{opacity:0}
  .roof-view .climb{transform:scale(1)}
  .hold::before{transform:scaleX(1)}
  .env{transform:none}
  .menu a{opacity:1;transform:none}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* Safari before 15 has no aspect-ratio: the framed figures keep their shape with padding */
@supports not (aspect-ratio: 1 / 1){
  .step .fig,.duo .fig,.roof-view{height:0;padding-top:75%}
  .card .fig{height:0;padding-top:68.75%}
  .zones-fig{height:0;padding-top:62.5%}
}

/* --- mentions légales --- */
.urgence.legal-head{padding:calc(var(--nav-h) + clamp(48px,7vw,80px)) 0 clamp(44px,6vw,64px)}
.legal-head h1{font-size:clamp(2.1rem,5vw,3.4rem);max-width:16ch;text-wrap:balance}
.legal{padding:clamp(48px,7vw,80px) 0 clamp(60px,9vw,104px)}
.legal .wrap{max-width:860px}
.legal h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-secondary);max-width:68ch}
.legal p+p{margin-top:12px}
.legal a{color:var(--accent);text-underline-offset:2px}
.legal dl{display:grid;grid-template-columns:minmax(170px,max-content) 1fr;gap:10px 24px;margin:0;
  padding:20px 22px;background:var(--panel);border:1px solid var(--line);border-radius:4px}
.legal dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);padding-top:4px}
.legal dd{margin:0;color:var(--text-primary);font-variant-numeric:tabular-nums}
.legal .legal-note{margin-top:12px;font-size:.93rem}
@media (max-width:560px){
  .legal dl{grid-template-columns:1fr;gap:2px}
  .legal dd{margin-bottom:12px}
}