/* =========================================================================
WM Couverture · Nonancourt (27)
Feuille de style unique. Palette « chaux et laiton », grille 12 colonnes.
========================================================================= */
:root{
--paper:#F4F1EA;
--paper-2:#E7DFCF;
--card:#FFFFFF;
--ink:#14181B;
--ink-2:#3D474D;
--muted:#555E64;
--slate:#182229;
--slate-2:#22303A;
--brass:#B07C2E;
--brass-ink:#7E561B; /* laiton assombri : 5,76:1 sur le papier, 4,90:1 sur papier-2, AA */
--brass-lt:#D7B172;
--rule:rgba(20,24,27,.17);
--rule-lt:rgba(255,255,255,.16);
--f-dis:'Archivo',system-ui,sans-serif;
--f-txt:'Inter Tight',system-ui,sans-serif;
--f-ser:'Instrument Serif',Georgia,serif;
--wrap:1240px;
--gut:clamp(20px,5vw,64px);
--r:18px;
--r-img:8px;
--r-sm:4px;
--ease:cubic-bezier(.2,.7,.25,1);
--sh-btn:0 1px 2px rgba(20,24,27,.12), 0 4px 6px rgba(20,24,27,.09),
0 10px 14px rgba(20,24,27,.06), 0 20px 28px rgba(20,24,27,.05),
inset 0 1px 0 rgba(255,255,255,.16);
--sh-img:0 2px 4px rgba(20,24,27,.05), 0 12px 26px rgba(20,24,27,.09),
0 34px 60px rgba(20,24,27,.09);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;color-scheme:only light}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;background:var(--paper);color:var(--ink);
font-family:var(--f-txt);font-size:17px;line-height:1.62;
font-weight:400;letter-spacing:-.005em;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-family:var(--f-dis);font-weight:700;letter-spacing:-.035em;line-height:1.03;margin:0}
h1 em,h2 em,h3 em{font-family:var(--f-ser);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--brass-ink)}
/* l'italique Instrument Serif a des approches negatives : on rend l'air */
/* l'italique Instrument Serif a des approches negatives : on rend l'air,
partout ou l'esperluette sert de liaison (accueil et titres de pages) */
.chap__body h3 em,.chap__head h3 em,.phero h1 em{margin:0 .1em 0 .05em}
p{margin:0}
::selection{background:var(--brass);color:#fff}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:-999px;top:10px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}
/* --------------------------------------------------- primitives ------- */
.eyebrow{
font-family:var(--f-txt);font-size:12.5px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--muted);margin-bottom:22px;
}
.eyebrow .sep{color:var(--brass-ink);margin-inline:4px}
.eyebrow--light{color:rgba(255,255,255,.62)}
.stars{color:var(--brass-ink);letter-spacing:.09em;font-size:.86em}
.stars--big{font-size:1.05em;margin-right:8px}
.btn{
--bg:var(--ink);--fg:#fff;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
background:var(--bg);color:var(--fg);
font-family:var(--f-txt);font-weight:600;font-size:16px;letter-spacing:-.01em;
padding:15px 26px;border-radius:100px;position:relative;
transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s;
box-shadow:var(--sh-btn);will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:17px;height:17px;fill:currentColor}
.btn--sm{padding:11px 20px;font-size:14.5px}
.btn--lg{padding:18px 34px;font-size:17.5px}
.btn--full{width:100%}
.btn--ghost{
--bg:transparent;--fg:var(--ink);
box-shadow:inset 0 0 0 1.4px rgba(20,24,27,.18), 0 2px 20px rgba(20,24,27,.05);
}
.btn--ghost:hover{box-shadow:inset 0 0 0 1.4px rgba(20,24,27,.4), 0 6px 26px rgba(20,24,27,.09)}
.btn--brass{--bg:var(--brass);--fg:var(--ink)}
.btn--brass:hover{--bg:#C08A35}
.btn__spin{display:none}
.btn.is-loading .btn__lbl{opacity:.35}
.btn.is-loading .btn__spin{
display:block;position:absolute;width:17px;height:17px;border-radius:50%;
border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.link-arrow{
display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:16px;
padding-bottom:4px;border-bottom:1.5px solid var(--rule);width:fit-content;
transition:border-color .3s,color .3s;
}
.link-arrow svg{width:24px;height:12px;fill:none;stroke:var(--brass);stroke-width:1.6;
transition:transform .4s var(--ease)}
.link-arrow:hover{border-color:var(--brass-ink);color:var(--brass-ink)}
.link-arrow:hover svg{transform:translateX(6px)}
.link-arrow--light{border-color:var(--rule-lt);color:rgba(255,255,255,.9)}
.link-arrow--light:hover{color:var(--brass-lt);border-color:var(--brass-lt)}
.rnd{
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
box-shadow:inset 0 0 0 1.3px var(--rule);transition:background .3s,box-shadow .3s,transform .3s var(--ease);
}
.rnd svg{width:22px;height:11px;fill:none;stroke:currentColor;stroke-width:1.6}
.rnd:hover{background:var(--ink);color:#fff;box-shadow:none;transform:translateY(-2px)}
/* reveal -------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);
transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.reveal{opacity:1!important;transform:none!important;transition:none!important}
/* on coupe toute animation en boucle : pastille, marquee, zoom, ouverture du menu */
.pulse,.marquee__track,.shot--main img,.drawer,.btn.is-loading .btn__spin{animation:none!important}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* scroll progress ------------------------------------------------------ */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:120;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--brass);
transition:width .12s linear}
/* --------------------------------------------------- nav -------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:18px var(--gut);
transition:padding .4s var(--ease)}
.nav__in{
max-width:var(--wrap);margin-inline:auto;display:flex;align-items:center;
justify-content:space-between;gap:24px;
padding:9px 9px 9px 20px;border-radius:100px;
background:rgba(244,241,234,0);
transition:background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s;
}
.nav.scrolled{padding-top:12px}
.nav.scrolled .nav__in,.nav--solid .nav__in{
background:rgba(250,248,244,.72);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 0 0 1px rgba(20,24,27,.06),
0 10px 30px rgba(20,24,27,.08);
}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:38px;height:24px;fill:none;stroke:var(--ink);stroke-width:2.1;
stroke-linecap:round;stroke-linejoin:round}
.brand__mark .b-accent{stroke:var(--brass);stroke-width:2.1}
.brand__txt{font-family:var(--f-dis);font-size:16.5px;letter-spacing:-.03em;font-weight:500}
.brand__txt strong{font-weight:800}
.brand--light .brand__mark{stroke:#fff}
.brand--light .brand__mark .b-accent{stroke:var(--brass-lt)}
.nav__links{display:flex;gap:6px}
.nav__links a{
font-size:15px;font-weight:500;padding:8px 14px;border-radius:100px;color:var(--ink-2);
transition:color .25s,background .25s;
}
.nav__links a:hover{color:var(--ink);background:rgba(20,24,27,.05)}
.nav__cta{display:flex;align-items:center;gap:14px}
.tel-link{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15.5px;
font-variant-numeric:tabular-nums}
.tel-link .dot{width:7px;height:7px;border-radius:50%;background:#3E9A5F;
box-shadow:0 0 0 4px rgba(62,154,95,.16)}
.burger{display:none;width:42px;height:42px;border-radius:50%;
box-shadow:inset 0 0 0 1.2px var(--rule);position:relative}
.burger span{position:absolute;left:12px;width:18px;height:1.6px;background:var(--ink);
transition:transform .35s var(--ease),opacity .2s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
.drawer[hidden]{display:none}
.drawer{
position:fixed;inset:78px 12px auto 12px;z-index:99;border-radius:22px;
/* 34 pages au menu : sans hauteur maximale ni défilement, les derniers
liens sortent de l'écran et deviennent inatteignables au doigt. */
max-height:calc(100dvh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
background:rgba(250,248,244,.94);
-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
box-shadow:0 0 0 1px rgba(20,24,27,.07),0 24px 60px rgba(20,24,27,.16);
padding:12px;display:grid;gap:2px;
animation:drop .35s var(--ease);
}
@keyframes drop{from{opacity:0;transform:translateY(-10px)}}
.drawer a{padding:14px 16px;border-radius:14px;font-size:18px;font-weight:500;
font-family:var(--f-dis);letter-spacing:-.02em}
.drawer a:active{background:rgba(20,24,27,.06)}
.drawer__tel{
position:sticky;bottom:0;margin-top:8px;background:var(--ink);color:#fff;
text-align:center;font-weight:700;box-shadow:0 -10px 16px rgba(250,248,244,.9);
}
/* --------------------------------------------------- hero ------------- */
.hero{padding:clamp(112px,16vw,168px) 0 clamp(40px,6vw,70px);position:relative}
.hero::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(120% 80% at 88% 8%, rgba(176,124,46,.10), transparent 58%),
radial-gradient(90% 70% at 4% 96%, rgba(24,34,41,.07), transparent 60%);
}
.hero__grid{
position:relative;z-index:1;
max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.86fr);
gap:clamp(32px,5vw,72px);align-items:end;
}
.hero__h1{
font-size:clamp(46px,7.1vw,94px);line-height:.94;letter-spacing:-.045em;
margin:0 0 26px;font-weight:800;
}
.hero__h1 .line{display:block;overflow:hidden}
.hero__h1 .w{display:inline-block;transform:translateY(105%);opacity:0}
.hero__h1.go .w{transform:none;opacity:1;
transition:transform .95s var(--ease),opacity .7s ease}
.hero__h1 .it{
font-family:var(--f-ser);font-style:italic;font-weight:400;color:var(--brass-ink);
letter-spacing:-.015em;padding-right:.06em;
}
@media (prefers-reduced-motion:reduce){.hero__h1 .w{transform:none;opacity:1}}
.hero__lead{font-size:clamp(17px,1.35vw,19.5px);color:var(--ink-2);max-width:34em;margin-bottom:32px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:38px}
.hero__trust{
list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--rule);
display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);
font-size:14.6px;color:var(--muted);
}
.hero__trust li{display:flex;align-items:baseline;gap:8px}
.hero__trust b{font-family:var(--f-dis);font-size:26px;font-weight:700;color:var(--ink);
letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.hero__trust .stars{margin-left:-4px}
.hero__media{position:relative;padding-bottom:34px}
.shot{margin:0;border-radius:var(--r);overflow:hidden;position:relative;box-shadow:var(--sh-img)}
.shot--main{aspect-ratio:4/5}
.shot--main img{width:100%;height:100%;object-fit:cover;
animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.shot--main img{animation:none}}
.shot--detail{
position:absolute;right:-14px;bottom:-16px;width:44%;aspect-ratio:4/3;
border:6px solid var(--paper);border-radius:16px;
box-shadow:0 18px 40px rgba(20,24,27,.18);
}
.shot--detail img{width:100%;height:100%;object-fit:cover}
.shot__note{
position:absolute;left:-10px;bottom:34px;z-index:3;
background:var(--card);border-radius:14px;padding:12px 16px;
box-shadow:0 12px 30px rgba(20,24,27,.13);max-width:210px;
}
.shot__note span{display:block;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);font-weight:600}
.shot__note strong{font-family:var(--f-dis);font-size:14.5px;letter-spacing:-.025em;line-height:1.25;display:block;margin-top:3px}
.glass{
position:absolute;top:16px;left:16px;
display:inline-flex;align-items:center;gap:9px;
padding:9px 15px;border-radius:100px;font-size:13.6px;color:#fff;font-weight:500;
background:rgba(18,22,26,.42);
-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 .8px rgba(255,255,255,.14);
}
.glass b{font-weight:700}
.pulse{width:7px;height:7px;border-radius:50%;background:#69D48D;
box-shadow:0 0 0 0 rgba(105,212,141,.7);animation:pl 2.2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 9px rgba(105,212,141,0)}100%{box-shadow:0 0 0 0 rgba(105,212,141,0)}}
/* --------------------------------------------------- marquee ---------- */
.marquee{
border-block:1px solid var(--rule);overflow:hidden;padding:16px 0;
margin-top:clamp(30px,5vw,54px);
}
.marquee__track{
display:flex;align-items:center;gap:26px;width:max-content;
animation:mq 44s linear infinite;
}
.marquee__track span{font-family:var(--f-dis);font-size:clamp(19px,2.1vw,26px);
font-weight:600;letter-spacing:-.035em;white-space:nowrap;color:var(--ink)}
.marquee__track i{color:var(--brass-ink);font-style:normal;font-size:20px}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}
/* --------------------------------------------------- facts ------------ */
.facts{padding:clamp(52px,7vw,88px) 0 clamp(28px,4vw,46px)}
.facts__lead{
font-family:var(--f-dis);font-size:clamp(22px,2.7vw,34px);font-weight:600;
letter-spacing:-.038em;line-height:1.18;max-width:23ch;margin-bottom:clamp(30px,4vw,50px);
}
.facts__row{
list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border-top:1px solid var(--rule);
}
.facts__row li{padding:20px 26px 4px 0;position:relative}
.facts__row li+li{padding-left:26px}
.facts__row li+li::before{
content:"";position:absolute;left:0;top:22px;bottom:8px;width:1px;background:var(--rule);
}
.facts__row b{display:block;font-family:var(--f-dis);font-size:16.6px;letter-spacing:-.032em;
font-weight:700;margin-bottom:4px}
.facts__row span{font-size:14.8px;color:var(--muted);line-height:1.5}
/* --------------------------------------------------- sec-head --------- */
.sec-head{max-width:660px;margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{font-size:clamp(33px,4.4vw,58px);margin-bottom:16px}
.sec-head p{color:var(--muted);font-size:17.4px;max-width:52ch}
.sec-head--row{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);
gap:clamp(20px,4vw,60px);align-items:end}
/* --------------------------------------------------- chapitres -------- */
.services{padding:clamp(20px,3vw,36px) 0 clamp(56px,8vw,100px)}
.chap{padding-block:clamp(40px,5.5vw,72px);border-top:1px solid var(--rule)}
.chap__num{
font-family:var(--f-ser);font-size:clamp(44px,5vw,68px);line-height:.78;
color:var(--brass-ink);opacity:.8;margin-bottom:12px;
}
.chap h3{font-size:clamp(28px,3.4vw,44px);margin-bottom:18px}
.chap__intro{color:var(--ink-2);font-size:17.2px;margin-bottom:26px;max-width:48ch}
.frame{margin:0;overflow:hidden;border-radius:var(--r-img);box-shadow:var(--sh-img)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease)}
.chap:hover .frame img{transform:scale(1.04)}
/* 01 : texte a gauche, diptyque decale a droite */
.chap--01{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
gap:clamp(30px,5vw,74px);align-items:center}
.chap__duo{display:grid;grid-template-columns:1.35fr .85fr;gap:16px;align-items:end}
.frame--tall{aspect-ratio:4/5}
.frame--small{aspect-ratio:4/5;margin-bottom:clamp(24px,5vw,58px)}
/* 02 : bandeau large puis texte en deux colonnes */
.frame--wide{aspect-ratio:7/3;margin-bottom:clamp(26px,3.5vw,44px)}
.chap__split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:clamp(24px,4vw,64px);align-items:start}
/* 03 : image plein cadre a gauche, texte serre a droite */
.chap--03{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(30px,5vw,74px);align-items:center}
.frame--fill{aspect-ratio:5/4}
/* liste de specifications, sans puce ni carte */
.specs{margin:0 0 28px}
.specs>div{
display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;
padding:14px 0;border-top:1px solid var(--rule);align-items:baseline;
}
.specs>div:last-child{border-bottom:1px solid var(--rule)}
.specs dt{font-family:var(--f-txt);font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;
font-weight:600;color:var(--brass-ink)}
.specs dd{margin:0;font-size:15.9px;color:var(--ink-2);line-height:1.52}
.specs--2>div{grid-template-columns:118px minmax(0,1fr)}
.specs--wide>div{grid-template-columns:158px minmax(0,1fr)}
/* --------------------------------------------------- citation --------- */
.quote{position:relative;overflow:hidden;isolation:isolate;background:var(--slate);
padding:clamp(64px,9vw,120px) 0}
.quote__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
object-position:50% 40%}
.quote::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(180deg,rgba(16,21,25,.87),rgba(16,21,25,.74))}
.quote__in{color:#fff}
.quote blockquote{max-width:24ch}
.quote blockquote{
margin:0;font-family:var(--f-dis);font-weight:600;
font-size:clamp(24px,3.3vw,44px);line-height:1.2;letter-spacing:-.035em;
}
.quote blockquote em{font-family:var(--f-ser);font-style:italic;font-weight:400;
color:var(--brass-lt);letter-spacing:-.01em}
.quote__mark{font-family:var(--f-ser);font-size:1.5em;line-height:0;color:var(--brass-lt);
opacity:.55;margin-right:.06em}
.quote__by{margin-top:28px;font-size:15.2px;color:#fff;font-weight:600;
text-shadow:0 1px 12px rgba(0,0,0,.55)}
.quote__by span{color:rgba(255,255,255,.62);font-weight:400;margin-left:8px;
font-size:12.6px;letter-spacing:.1em;text-transform:uppercase}
/* --------------------------------------------------- avant / après ---- */
.ba{padding:clamp(56px,8vw,96px) 0;background:var(--slate);color:#fff}
.ba__head{margin-bottom:clamp(28px,4vw,46px)}
.ba__head h2{max-width:19ch}
.ba__head p{max-width:62ch}
.ba__head h2{font-size:clamp(31px,4.2vw,54px);margin-bottom:14px}
.ba__head h2 em{color:var(--brass-lt)}
.ba__head p{color:rgba(255,255,255,.62);font-size:17px}
.ba__frame{
position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
max-height:74vh;cursor:ew-resize;user-select:none;-webkit-user-select:none;
box-shadow:0 30px 70px rgba(0,0,0,.4);touch-action:pan-y;
}
.ba__img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 50%)}
.ba__tag{
position:absolute;bottom:16px;z-index:3;font-size:12.5px;letter-spacing:.14em;
text-transform:uppercase;font-weight:600;color:#fff;padding:7px 14px;border-radius:100px;
background:rgba(18,22,26,.5);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.ba__tag--l{left:16px}
.ba__tag--r{right:16px}
.ba__handle{
position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(255,255,255,.9);
transform:translateX(-1px);z-index:4;
}
.ba__grip{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:rgba(255,255,255,.94);box-shadow:0 6px 22px rgba(0,0,0,.35);
transition:transform .3s var(--ease);
}
.ba__frame:hover .ba__grip{transform:translate(-50%,-50%) scale(1.07)}
.ba__grip svg{width:24px;height:16px;fill:none;stroke:var(--ink);stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
/* --------------------------------------------------- about ----------- */
.about{padding:clamp(64px,9vw,116px) 0}
.about__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(32px,6vw,86px);align-items:center}
.about__media{position:relative;border-radius:var(--r-img);overflow:hidden;box-shadow:var(--sh-img)}
.about__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.about__stat{
position:absolute;left:18px;bottom:18px;display:flex;align-items:center;gap:12px;
background:var(--card);border-radius:12px;padding:14px 18px;
box-shadow:0 14px 34px rgba(20,24,27,.2);
}
.about__stat b{font-family:var(--f-dis);font-size:44px;font-weight:800;letter-spacing:-.05em;
line-height:.9;color:var(--brass-ink);font-variant-numeric:tabular-nums}
.about__stat span{font-size:13.4px;line-height:1.24;color:var(--ink-2);font-weight:500}
.about__body h2{font-size:clamp(31px,4.2vw,54px);margin-bottom:22px}
.about__body>p{color:var(--ink-2);margin-bottom:18px;max-width:50ch}
.about__plus{margin-top:34px;margin-bottom:0}
/* --------------------------------------------------- urgence ---------- */
.urgence{position:relative;overflow:hidden;background:var(--slate);isolation:isolate;
padding:clamp(58px,8vw,104px) 0}
.urgence__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
object-position:50% 62%;
}
.urgence::after{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(100deg, rgba(15,20,24,.92) 0%, rgba(15,20,24,.78) 46%,
rgba(15,20,24,.28) 78%, rgba(15,20,24,.12) 100%);
}
.urgence__in{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;
color:#fff}
.urgence__txt{max-width:640px}
.urgence__txt h2{font-size:clamp(28px,3.8vw,48px);margin-bottom:16px}
.urgence__txt h2 em{color:var(--brass-lt)}
.urgence__txt p:last-child{color:rgba(255,255,255,.72);font-size:17px}
/* reassurance et preuve sur les pages interieures ------------------------ */
/* .facts sans le paragraphe d'intro de l'accueil : on garde la rangee seule. */
.facts--slim{padding-block:clamp(22px,3vw,34px)}
.phero__trust{margin-top:clamp(22px,3vw,32px)}
@media (max-width:760px){
.phero__trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.phero__trust li:nth-child(2){grid-column:1/-1;order:-1}
}
/* --------------------------------------------------- hub guides ------- */
/* Un guide en vedette puis neuf lignes illustrees : les images existaient
deja, la page ne les montrait pas. Volontairement en lignes et non en
grille de cartes symetriques. */
.hubfeat{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
gap:clamp(20px,3vw,44px);align-items:center;
margin:clamp(24px,3.4vw,40px) 0 clamp(30px,4vw,52px);
padding-bottom:clamp(28px,3.6vw,44px);border-bottom:1px solid var(--rule);
color:inherit;
}
.hubfeat__img{margin:0;border-radius:var(--r-img);overflow:hidden;aspect-ratio:16/9;
box-shadow:var(--sh-img)}
.hubfeat__img picture{display:block;width:100%;height:100%}
.hubfeat__img img{width:100%;height:100%;object-fit:cover;
transition:transform .7s var(--ease)}
.hubfeat:hover .hubfeat__img img{transform:scale(1.04)}
.hubfeat__k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
color:var(--brass-ink);font-weight:700;margin-bottom:10px}
.hubfeat__txt h2{font-size:clamp(25px,3.2vw,40px);margin-bottom:12px;text-wrap:balance}
.hubfeat__d{color:var(--muted);font-size:16.6px;line-height:1.6;margin-bottom:16px;
max-width:46ch}
.hubfeat:hover .link-arrow{color:var(--ink)}
.hub__list.hub__list--img a{display:grid;grid-template-columns:112px minmax(0,1fr) 28px;
gap:clamp(14px,2vw,26px);align-items:center}
/* images.py emballe les ![]()
dans un : c'est lui l'element de
grille, il doit donc porter la taille et le recadrage. */
.hub__list--img picture{display:block;width:112px;aspect-ratio:16/10;
border-radius:var(--r-sm);overflow:hidden}
.hubrow__img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .5s var(--ease)}
.hub__list--img a:hover .hubrow__img{transform:scale(1.05)}
.hub__list--img .hubrow__t b{font-family:var(--f-dis);font-size:clamp(18px,1.9vw,23px);
font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.hub__list--img .hubrow__t>span{font-size:15.2px;color:var(--muted);line-height:1.55}
.hubrow__t{display:grid;gap:3px;min-width:0}
@media (max-width:760px){
.hubfeat{grid-template-columns:1fr;gap:16px}
.hub__list.hub__list--img a{grid-template-columns:78px minmax(0,1fr) 22px;gap:14px}
.hub__list--img picture{width:78px}
/* .svc__list span{display:none} en mobile masquait aussi l'enveloppe du
titre : on la reaffiche, on ne cache que la description. */
.hub__list.hub__list--img .hubrow__t{display:grid}
.hub__list.hub__list--img .hubrow__t>span{display:none}
}
/* --------------------------------------------------- bandeau ---------- */
/* Les pages interieures n'avaient qu'une seule image, en haut, puis des
milliers de pixels de texte. Ce bandeau coupe le mur a mi-parcours et
remet un point d'appel sous les yeux. Degrade par le bas facon bande
basse : jamais de voile global qui assombrit toute la photo. */
.band{
position:relative;overflow:hidden;isolation:isolate;
min-height:clamp(300px,36vw,440px);display:flex;align-items:flex-end;
padding:clamp(26px,4vw,44px) 0;
}
.band__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
object-position:50% 46%}
/* mesure sur les pixels reels : le cartouche laiton tombait a 2,1:1 sur les
parties claires de la photo. On renforce la bande basse, sans jamais poser
de voile global sur l'image. */
.band::after{content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(to top, rgba(13,17,20,.95) 0%, rgba(13,17,20,.88) 30%,
rgba(13,17,20,.64) 54%, rgba(13,17,20,.16) 80%, rgba(13,17,20,0) 100%)}
.band__in{color:#fff;display:grid;gap:14px;justify-items:start}
.band__p{max-width:22ch}
.band__k{max-width:52ch}
/* Le cartouche etait en laiton clair : mesure sur les pixels reels, il
tombait a 2,6:1 sur les eclats de la photo. En blanc il passe l'AA quelle
que soit l'image, et l'ombre porte le reste. Meme recette que .gal__cap. */
.band__k{font-size:12.4px;letter-spacing:.14em;text-transform:uppercase;
color:#fff;font-weight:700;
text-shadow:0 1px 3px rgba(10,13,15,.9), 0 0 16px rgba(10,13,15,.75)}
.band__p{font-family:var(--f-dis);font-weight:700;letter-spacing:-.03em;
font-size:clamp(23px,3.2vw,36px);line-height:1.12;color:#fff;text-wrap:balance;
text-shadow:0 1px 4px rgba(10,13,15,.62)}
.band .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.42);
background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.band .btn--ghost:hover{box-shadow:inset 0 0 0 1.4px rgba(255,255,255,.8);
background:rgba(255,255,255,.13)}
@media (max-width:760px){
.band{min-height:340px}
.band .btn{width:100%;justify-content:center}
}
/* --------------------------------------------------- sommaire ---------- */
/* Un guide fait 6 000 px : sans sommaire, le lecteur qui arrive de Google ne
sait pas ce que la page couvre ni ou aller. */
.toc{margin-top:clamp(20px,3vw,30px);padding-top:20px;border-top:1px solid var(--rule)}
.toc__t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
font-weight:700;margin-bottom:12px}
.toc__l{list-style:none;margin:0;padding:0;counter-reset:toc;
columns:2;column-gap:clamp(24px,4vw,56px)}
.toc__l li{counter-increment:toc;break-inside:avoid;margin-bottom:2px}
.toc__l a{display:flex;gap:12px;align-items:baseline;padding:9px 0;
font-size:16px;color:var(--ink-2);border-bottom:1px solid var(--rule);
transition:color .22s}
.toc__l a::before{content:counter(toc,decimal-leading-zero);
font-family:var(--f-ser);font-size:14px;color:var(--brass-ink);flex:none}
.toc__l a:hover{color:var(--ink)}
@media (max-width:760px){.toc__l{columns:1}.toc__l a{padding:12px 0}}
/* --------------------------------------------------- exergue ----------- */
/* Casse une fois le rythme titre-a-gauche / texte-a-droite qui tenait toute
la page, avec de la typographie plutot qu'une image de plus. */
.pullq{
padding:clamp(38px,5.4vw,74px) 0;
border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
/* nettement au-dessus de l'echelle des h2 (38 px), sinon elle se lit comme
un titre de plus au lieu de casser le rythme */
.pullq p{
font-family:var(--f-ser);font-style:italic;font-weight:400;
font-size:clamp(29px,4.6vw,56px);line-height:1.16;letter-spacing:-.018em;
color:var(--ink);max-width:26ch;text-wrap:balance;position:relative;
}
.pullq p::before{content:"\201C";position:absolute;left:-.52em;top:-.06em;
color:var(--brass);font-size:1.05em;line-height:1}
@media (max-width:760px){.pullq p{max-width:none}.pullq p::before{position:static;margin-right:.06em}}
/* --------------------------------------------------- galerie ---------- */
.gal{padding:clamp(64px,9vw,110px) 0}
.gal__grid{columns:4;column-gap:14px}
@media (max-width:1080px){.gal__grid{columns:3}}
@media (max-width:760px){.gal__grid{columns:2;column-gap:10px}}
.gal__i{
display:block;width:100%;margin:0 0 14px;break-inside:avoid;
position:relative;overflow:hidden;border-radius:var(--r-sm);
box-shadow:0 2px 6px rgba(20,24,27,.07),0 12px 26px rgba(20,24,27,.07);
transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
@media (max-width:760px){.gal__i{margin-bottom:10px}}
.gal__i img{width:100%;height:auto;display:block;transition:transform 1s var(--ease)}
.gal__i::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to top,rgba(14,18,21,.66),rgba(14,18,21,0) 45%);
opacity:0;transition:opacity .4s;
}
.gal__cap{
position:absolute;left:14px;right:14px;bottom:12px;z-index:2;text-align:left;
font-size:13.4px;font-weight:600;color:#fff;letter-spacing:-.01em;
text-shadow:0 1px 3px rgba(10,13,15,.9), 0 0 14px rgba(10,13,15,.7);
opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease);
}
.gal__i:hover{transform:translateY(-4px);box-shadow:0 6px 12px rgba(20,24,27,.09),0 22px 46px rgba(20,24,27,.14)}
.gal__i:hover img{transform:scale(1.06)}
.gal__i:hover::after,.gal__i:focus-visible::after{opacity:1}
.gal__i:hover .gal__cap,.gal__i:focus-visible .gal__cap{opacity:1;transform:none}
/* --------------------------------------------------- avis ------------- */
.avis{padding:clamp(60px,8vw,104px) 0;background:var(--paper-2);
border-top:1px solid var(--rule)}
.avis__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.66fr);
gap:clamp(18px,4vw,56px);align-items:end;margin-bottom:clamp(30px,4vw,50px)}
.avis__head h2{font-size:clamp(31px,4.2vw,54px)}
.avis__head p{color:var(--muted);font-size:16.6px}
.avis__grid{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:clamp(28px,5vw,72px);
}
.avis__q{
margin:0;padding:24px 0 26px;border-top:1px solid var(--rule);
display:flex;flex-direction:column;gap:14px;
}
.avis__q:first-child{grid-row:span 2}
.avis__q:first-child blockquote{font-size:clamp(20px,2.2vw,27px);line-height:1.34;
font-family:var(--f-dis);font-weight:500;letter-spacing:-.028em;color:var(--ink)}
.avis__q blockquote{margin:0;font-size:16.4px;line-height:1.6;color:var(--ink-2);flex:1}
.avis__q figcaption{font-family:var(--f-dis);font-weight:700;font-size:15.2px;letter-spacing:-.025em}
.avis__q figcaption span{font-family:var(--f-txt);font-weight:500;font-size:12.2px;
letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-left:9px}
.avis__q figcaption::before{
content:"\2605\2605\2605\2605\2605";display:block;color:var(--brass-ink);font-size:12px;
letter-spacing:.12em;margin-bottom:7px;font-family:var(--f-txt);
}
/* --------------------------------------------------- zone ------------- */
.zone{padding:clamp(64px,9vw,110px) 0}
.zone__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
gap:clamp(30px,5vw,72px);align-items:center}
.zone__l h2{font-size:clamp(30px,3.9vw,50px);margin-bottom:20px}
.zone__l>p{color:var(--ink-2);margin-bottom:26px;max-width:44ch}
.zone__index{
list-style:none;margin:0 0 30px;padding:14px 0 0;columns:2;column-gap:34px;
counter-reset:z;border-top:1px solid var(--rule);
}
.zone__index li{
counter-increment:z;font-size:15.2px;color:var(--ink-2);padding:5px 0;
break-inside:avoid;display:flex;gap:10px;align-items:baseline;
}
.zone__index li::before{
content:counter(z,decimal-leading-zero);font-family:var(--f-ser);font-size:12.4px;
color:var(--brass-ink);min-width:20px;
}
.zone__index li:first-child{color:var(--ink);font-weight:600}
.zone__index a{border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.zone__index a:hover{color:var(--brass-ink);border-color:var(--brass-ink)}
.zone__map{margin:0}
.zone__map svg{width:100%;height:auto;overflow:visible}
.m-ring{fill:rgba(176,124,46,.05);stroke:var(--brass);stroke-opacity:.3;
stroke-width:1.1;stroke-dasharray:5 6}
.m-ring2{fill:rgba(176,124,46,.06);stroke:var(--brass);stroke-opacity:.22;stroke-width:1}
.m-dot{fill:var(--ink);opacity:.38}
.m-cross{stroke:var(--brass);stroke-opacity:.16;stroke-width:1;stroke-dasharray:3 7}
.m-halo{fill:var(--brass);opacity:.16}
.m-home{fill:var(--brass);stroke:var(--paper);stroke-width:3}
.m-lab{font-family:'Inter Tight',sans-serif;font-size:13.4px;fill:var(--ink-2);font-weight:500}
.m-lab--home{font-family:'Archivo',sans-serif;font-size:18px;fill:var(--ink);font-weight:700;
letter-spacing:-.03em}
.zone__map figcaption{
margin-top:16px;font-size:13px;color:var(--muted);display:flex;gap:22px;align-items:center;
}
.m-key{display:inline-block;width:15px;height:15px;border-radius:50%;margin-right:7px;
vertical-align:-3px}
.m-key--1{background:rgba(176,124,46,.13);box-shadow:inset 0 0 0 1px rgba(176,124,46,.35)}
.m-key--2{background:rgba(176,124,46,.05);box-shadow:inset 0 0 0 1px rgba(176,124,46,.45)}
/* --------------------------------------------------- faq -------------- */
/* Le bloc de questions n'avait AUCUN padding haut : sur les 31 pages
internes, le titre et la premiere question se collaient au bord de la
section. Sur l'accueil ca ne se voyait pas, le raccord arrondi lui en
donnait. Corrige a la racine ; l'accueil garde sa valeur de raccord,
posee plus bas dans la feuille. */
.faq{padding:clamp(56px,7.5vw,96px) 0 clamp(64px,9vw,110px)}
.faq__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
gap:clamp(28px,5vw,72px);align-items:start}
.faq h2{font-size:clamp(30px,3.9vw,50px)}
.faq__list details{border-top:1px solid var(--rule)}
.faq__list details:last-child{border-bottom:1px solid var(--rule)}
.faq__list summary{
list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
font-family:var(--f-dis);font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.03em;
transition:color .25s;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary:hover{color:var(--brass-ink)}
.faq__list summary::after,.faq__list summary::before{
content:"";position:absolute;right:8px;top:50%;background:var(--brass);
transition:transform .35s var(--ease),opacity .3s;
}
.faq__list summary::before{width:15px;height:1.7px;transform:translateY(-50%)}
.faq__list summary::after{width:1.7px;height:15px;right:14.6px;transform:translateY(-50%)}
.faq__list details[open] summary::after{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__list details p{padding:0 60px 24px 0;color:var(--muted);font-size:16.4px;max-width:62ch}
/* --------------------------------------------------- devis ------------ */
.devis{padding:clamp(64px,9vw,110px) 0;background:var(--paper-2);
border-top:1px solid var(--rule)}
.devis__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(34px,5vw,80px);align-items:start}
.devis__l h2{font-size:clamp(31px,4.1vw,52px);margin-bottom:18px}
.devis__l>p{color:var(--ink-2);margin-bottom:34px;max-width:38ch}
.devis__coord{list-style:none;margin:0;padding:0}
.devis__coord li{padding:16px 0;border-top:1px solid var(--rule);
display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline}
.devis__coord span{font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;
color:var(--muted);font-weight:600}
.devis__coord a,.devis__coord b{font-family:var(--f-dis);font-size:17.4px;font-weight:600;
letter-spacing:-.03em;line-height:1.36}
.devis__coord a{border-bottom:1.4px solid transparent;transition:border-color .3s,color .3s;width:fit-content}
.devis__coord a:hover{color:var(--brass-ink);border-color:var(--brass-ink)}
/* formulaire ---------------------------------------------------------- */
.form{
background:var(--card);border-radius:22px;padding:clamp(22px,3vw,34px);
box-shadow:0 1px 2px rgba(20,24,27,.05),0 18px 44px rgba(20,24,27,.09);
display:grid;gap:14px;
}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
.f-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f{position:relative}
.f input,.f textarea{
width:100%;font:inherit;font-size:16px;color:var(--ink);
background:var(--paper);border:1.4px solid transparent;border-radius:13px;
padding:24px 16px 10px;transition:border-color .25s,background .25s,box-shadow .25s;
-webkit-appearance:none;appearance:none;
}
.f textarea{padding-top:26px;resize:vertical;min-height:96px;line-height:1.5}
.f label{
position:absolute;left:16px;top:16px;font-size:15px;color:var(--muted);
pointer-events:none;transform-origin:left top;
transition:transform .22s var(--ease),color .22s;
}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--brass-ink);background:#fff;
box-shadow:0 0 0 4px rgba(176,124,46,.12)}
.f input:focus+label,.f input:not(:placeholder-shown)+label,
.f textarea:focus+label,.f textarea:not(:placeholder-shown)+label{
transform:translateY(-9px) scale(.78);color:var(--brass-ink);
}
.f input.err,.f textarea.err{border-color:#C4462F;box-shadow:0 0 0 4px rgba(196,70,47,.1)}
.f-chips{border:0;margin:4px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.f-chips legend{font-size:12.4px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
font-weight:600;margin-bottom:10px;padding:0}
.f-chips label{cursor:pointer}
.f-chips input{position:absolute;opacity:0;width:0;height:0}
.f-chips span{
display:inline-block;padding:9px 16px;border-radius:100px;font-size:14.6px;
background:var(--paper);color:var(--ink-2);
box-shadow:inset 0 0 0 1.3px transparent;transition:all .25s var(--ease);
}
.f-chips label:hover span{color:var(--ink)}
.f-chips input:checked+span{background:var(--ink);color:#fff;font-weight:500}
.f-chips input:focus-visible+span{outline:2px solid var(--brass);outline-offset:2px}
.form__note{font-size:13.4px;color:var(--muted);text-align:center;line-height:1.45}
.form__msg{font-size:15px;font-weight:500;text-align:center;display:none}
.form__msg.ok{display:block;color:#2E7A4C}
.form__msg.ko{display:block;color:#C4462F}
/* --------------------------------------------------- footer ----------- */
.foot{background:var(--slate);color:rgba(255,255,255,.72);padding:clamp(52px,7vw,82px) 0 26px}
.foot__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr;gap:clamp(22px,3vw,42px)}
.foot__brand p{margin-top:18px;font-size:15.2px;line-height:1.6;max-width:32ch}
.foot__col h3{font-family:var(--f-txt);font-size:12.4px;letter-spacing:.13em;text-transform:uppercase;
color:rgba(255,255,255,.45);font-weight:600;margin-bottom:16px}
.foot__col a,.foot__col span{display:block;font-size:15.4px;margin-bottom:11px;line-height:1.5}
.foot__col a{transition:color .25s}
.foot__col a:hover{color:#fff}
.foot__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:24px}
.foot__bar{
margin-top:clamp(38px,5vw,58px);padding-top:22px;border-top:1px solid var(--rule-lt);
display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
font-size:13.6px;color:rgba(255,255,255,.5);
}
.foot__bar a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.foot__bar a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
/* --------------------------------------------------- callbar ---------- */
.callbar{
position:fixed;left:12px;right:12px;bottom:12px;z-index:95;display:none;gap:9px;
transform:translateY(140%);transition:transform .45s var(--ease);
padding-bottom:env(safe-area-inset-bottom);
}
.callbar.show{transform:none}
.callbar a{
flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:15px 10px;border-radius:100px;font-weight:600;font-size:16px;
box-shadow:0 8px 26px rgba(20,24,27,.28);
}
.callbar svg{width:17px;height:17px;fill:currentColor}
.callbar__tel{background:var(--ink);color:#fff}
.callbar__devis{background:var(--card);color:var(--ink);box-shadow:0 8px 26px rgba(20,24,27,.18),inset 0 0 0 1.2px var(--rule)}
/* --------------------------------------------------- lightbox --------- */
.lb{
position:fixed;inset:0;z-index:200;background:rgba(12,15,18,.94);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
display:grid;place-items:center;padding:clamp(16px,5vw,60px);
animation:fade .3s ease;
}
@keyframes fade{from{opacity:0}}
.lb__fig{margin:0;max-width:min(1100px,92vw);max-height:86vh;display:flex;
flex-direction:column;gap:14px;align-items:center}
.lb__fig img{max-height:78vh;width:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb__fig figcaption{color:rgba(255,255,255,.72);font-size:14.6px;text-align:center}
.lb__close{position:absolute;top:18px;right:22px;font-size:34px;line-height:1;color:#fff;
width:48px;height:48px;border-radius:50%;transition:background .25s}
.lb__close:hover{background:rgba(255,255,255,.12)}
.lb__nav{
position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.1);transition:background .25s;
}
.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__nav svg{width:22px;height:11px;fill:none;stroke:currentColor;stroke-width:1.7}
.lb__nav--p{left:16px}
.lb__nav--n{right:16px}
body.lock{overflow:hidden}
/* =========================================================================
Responsive
========================================================================= */
@media (max-width:1080px){
.nav__links{display:none}
.burger{display:block}
.hero__grid{grid-template-columns:1fr;gap:44px;align-items:start}
.hero__media{max-width:560px;margin-top:6px}
.about__grid,.zone__grid,.faq__grid,.devis__grid,.sec-head--row,.avis__head{grid-template-columns:1fr}
.about__grid{gap:38px}
.about__media{max-width:460px}
.chap--01,.chap--03,.chap__split{grid-template-columns:1fr;gap:30px}
.chap--03 .frame--fill{order:-1}
.frame--small{margin-bottom:0}
.avis__grid{grid-template-columns:1fr}
.avis__q:first-child{grid-row:auto}
.foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
body{font-size:16.4px}
.tel-link{display:none}
.nav__cta .btn--sm{display:none}
.nav{padding:12px var(--gut)}
.nav__in{padding:8px 8px 8px 14px;background:rgba(250,248,244,.78);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
box-shadow:0 0 0 1px rgba(20,24,27,.06),0 8px 24px rgba(20,24,27,.07)}
.hero{padding-top:104px}
.hero__h1{font-size:clamp(40px,11vw,58px)}
.hero__cta .btn{flex:1 1 100%}
/* trois reperes qui se cassaient en 2 + 1 : etoiles en tete, chiffres dessous */
.hero__trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.hero__trust li:nth-child(2){grid-column:1/-1;order:-1}
.shot--detail{width:47%;right:-6px;bottom:-10px}
.facts__row{grid-template-columns:1fr}
.facts__row li{padding:16px 0 6px}
.facts__row li+li{padding-left:0;border-top:1px solid var(--rule)}
.facts__row li+li::before{display:none}
.chap__duo{grid-template-columns:1fr;gap:12px}
.frame--small{display:none}
.frame--wide{aspect-ratio:16/10}
.specs>div,.specs--2>div,.specs--wide>div{grid-template-columns:1fr;gap:2px;padding:12px 0}
.specs dt{font-size:11.8px}
.zone__index{columns:1}
.f-row{grid-template-columns:1fr}
.foot__grid{grid-template-columns:1fr;gap:32px}
.callbar{display:flex}
.ba__frame{aspect-ratio:3/2}
.faq__list details p{padding-right:0}
.devis__coord li{grid-template-columns:1fr;gap:4px}
.gal__cap{opacity:1;transform:none;font-size:12.2px}
.gal__i::after{opacity:1}
.lb__nav--p{left:8px}
.lb__nav--n{right:8px}
main{padding-bottom:0}
.foot{padding-bottom:86px}
}
/* =========================================================================
Pages internes (services et communes)
========================================================================= */
/* menu déroulant ------------------------------------------------------- */
.drop{position:relative}
.drop__btn{
display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:500;
padding:8px 14px;border-radius:100px;color:var(--ink-2);
transition:color .25s,background .25s;
}
.drop__btn svg{width:11px;height:7px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.drop__btn:hover,.drop.open .drop__btn{color:var(--ink);background:rgba(20,24,27,.05)}
.drop.open .drop__btn svg{transform:rotate(180deg)}
.drop__menu{
position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);
min-width:250px;padding:8px;border-radius:16px;display:grid;gap:1px;
background:rgba(250,248,244,.92);
-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
box-shadow:0 0 0 1px rgba(20,24,27,.07),0 18px 44px rgba(20,24,27,.16);
opacity:0;visibility:hidden;transition:opacity .22s,transform .3s var(--ease),visibility .22s;
}
.drop.open .drop__menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop__menu a{
padding:10px 14px;border-radius:11px;font-size:15px;font-weight:500;color:var(--ink-2);
white-space:nowrap;transition:background .2s,color .2s;
}
.drop__menu a:hover{background:rgba(20,24,27,.06);color:var(--ink)}
.drop__menu a[aria-current]{color:var(--brass-ink);font-weight:600}
.drawer__t{
padding:14px 16px 6px;font-size:11.8px;letter-spacing:.13em;text-transform:uppercase;
color:var(--muted);font-weight:600;
}
/* fil d'Ariane --------------------------------------------------------- */
.crumb{
padding-top:clamp(96px,11vw,128px);display:flex;gap:10px;align-items:center;
font-size:13.4px;color:var(--muted);
}
.crumb a{border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.crumb a:hover{color:var(--ink);border-color:var(--rule)}
.crumb span[aria-hidden]{color:var(--brass-ink);opacity:.6}
/* hero de page interne -------------------------------------------------- */
.phero{padding:clamp(22px,3vw,34px) 0 clamp(46px,6vw,74px)}
.phero__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
gap:clamp(30px,5vw,72px);align-items:center;
}
.phero h1{font-size:clamp(36px,5vw,66px);line-height:1;letter-spacing:-.045em;margin-bottom:22px}
.phero__lead{font-size:clamp(16.6px,1.3vw,18.6px);color:var(--ink-2);max-width:44ch;margin-bottom:30px}
.phero__cta{display:flex;flex-wrap:wrap;gap:12px}
.phero__img{aspect-ratio:4/3}
/* Avec la preuve et la reassurance ajoutees, la colonne texte a grandi et la
photo laissait un grand vide dessous. Sur large, elle prend la hauteur. */
@media (min-width:1081px){
.phero__grid{align-items:stretch}
.phero__img{aspect-ratio:auto;min-height:clamp(400px,40vw,600px);height:100%}
.phero__img img{width:100%;height:100%;object-fit:cover}
}
/* corps éditorial ------------------------------------------------------- */
.detail{padding:clamp(46px,6vw,80px) 0;border-top:1px solid var(--rule)}
.detail__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:clamp(30px,5vw,80px);align-items:start}
.detail h2{font-size:clamp(26px,3.1vw,40px);margin-bottom:22px}
.detail__p{color:var(--ink-2);margin-bottom:16px;font-size:17px;max-width:52ch}
.detail__alert{padding-top:4px}
.ticks{list-style:none;margin:0 0 26px;padding:0}
.ticks li{
position:relative;padding:11px 0 11px 30px;border-top:1px solid var(--rule);
font-size:15.8px;color:var(--ink-2);
}
.ticks li:last-child{border-bottom:1px solid var(--rule)}
.ticks li::before{
content:"";position:absolute;left:3px;top:19px;width:8px;height:8px;
border-right:1.6px solid var(--brass);border-top:1.6px solid var(--brass);
transform:rotate(45deg);
}
.detail__budget{font-size:15.8px;color:var(--muted);line-height:1.6;margin-bottom:24px;max-width:52ch}
.detail__budget b{color:var(--ink);font-family:var(--f-dis);letter-spacing:-.025em}
/* déroulé du chantier --------------------------------------------------- */
.steps{padding:clamp(50px,7vw,90px) 0;background:var(--paper-2);border-block:1px solid var(--rule)}
.steps h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:clamp(28px,4vw,46px)}
.steps__list{
list-style:none;margin:0;padding:0;display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
}
.steps__list li{padding:22px 24px 4px 0;position:relative}
.steps__list li+li{padding-left:24px}
.steps__list li::after{
content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);
}
.steps__list li+li::before{
content:"";position:absolute;left:0;top:24px;bottom:6px;width:1px;background:var(--rule);
}
.steps__n{
display:block;font-family:var(--f-ser);font-size:30px;line-height:1;color:var(--brass-ink);
margin-bottom:12px;
}
.steps__list b{display:block;font-family:var(--f-dis);font-size:16.4px;letter-spacing:-.03em;
margin-bottom:6px}
.steps__d{font-size:14.8px;color:var(--muted);line-height:1.52}
/* prestations sur une page commune -------------------------------------- */
.svc{padding:clamp(50px,7vw,90px) 0}
.svc h2{font-size:clamp(28px,3.6vw,46px);margin-bottom:clamp(24px,3.5vw,40px)}
.svc__list{list-style:none;margin:0;padding:0}
.svc__list li{border-top:1px solid var(--rule)}
.svc__list li:last-child{border-bottom:1px solid var(--rule)}
.svc__list a{
display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr) 28px;
gap:clamp(16px,3vw,44px);align-items:baseline;padding:22px 4px;
transition:padding-left .35s var(--ease),color .3s;
}
.svc__list a:hover{padding-left:14px;color:var(--brass-ink)}
.svc__list b{font-family:var(--f-dis);font-size:clamp(19px,2.1vw,26px);font-weight:600;
letter-spacing:-.035em}
.svc__list span{font-size:15.4px;color:var(--muted);line-height:1.55}
.svc__list svg{width:26px;height:12px;fill:none;stroke:var(--brass);stroke-width:1.6;
transition:transform .4s var(--ease);align-self:center}
.svc__list a:hover svg{transform:translateX(6px)}
/* maillage interne ------------------------------------------------------ */
.mesh{padding:clamp(50px,7vw,88px) 0;border-top:1px solid var(--rule)}
.mesh__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(30px,5vw,80px)}
.mesh__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,54px)}
@media (max-width:900px){.mesh__grid--3{grid-template-columns:1fr}}
.mesh h2{font-size:clamp(22px,2.5vw,31px);margin-bottom:20px}
.mesh__list{list-style:none;margin:0;padding:0}
.mesh__list li{border-top:1px solid var(--rule)}
.mesh__list li:last-child{border-bottom:1px solid var(--rule)}
.mesh__list a{
display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 2px;
font-size:16.4px;color:var(--ink-2);transition:padding-left .35s var(--ease),color .3s;
}
.mesh__list a:hover{padding-left:12px;color:var(--brass-ink)}
.mesh__list svg{width:24px;height:12px;fill:none;stroke:var(--brass);stroke-width:1.6;
transition:transform .4s var(--ease)}
.mesh__list a:hover svg{transform:translateX(6px)}
.avis__grid--pair .avis__q:first-child{grid-row:auto}
.avis__grid--pair .avis__q:first-child blockquote{
font-size:16.4px;font-family:var(--f-txt);font-weight:400;letter-spacing:0;color:var(--ink-2);
}
@media (max-width:1080px){
.phero__grid,.detail__grid,.mesh__grid{grid-template-columns:1fr;gap:32px}
.steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}
.steps__list li:nth-child(odd)::before{display:none}
.svc__list a{grid-template-columns:minmax(0,1fr) 24px}
.svc__list span{display:none}
}
@media (max-width:760px){
.nav__links{display:none}
.steps__list{grid-template-columns:1fr}
.steps__list li,.steps__list li+li{padding:16px 0 10px}
.steps__list li+li::before{display:none}
.crumb{padding-top:92px}
.avis__grid--pair{grid-template-columns:1fr}
}
/* --------------------------------------------------- deep / prix ------- */
.deep{padding:clamp(50px,7vw,88px) 0;border-top:1px solid var(--rule)}
.deep--alt{background:var(--paper-2);border-block:1px solid var(--rule)}
.deep__grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
gap:clamp(26px,5vw,76px);align-items:start}
.deep h2{font-size:clamp(26px,3.2vw,42px)}
.mat{margin:0}
.mat>div{padding:20px 0;border-top:1px solid var(--rule)}
.mat>div:last-child{border-bottom:1px solid var(--rule)}
.mat dt{font-family:var(--f-dis);font-size:clamp(17px,1.8vw,21px);font-weight:700;
letter-spacing:-.032em;margin-bottom:7px}
.mat dd{margin:0;font-size:16px;color:var(--ink-2);line-height:1.58;max-width:62ch}
.prix{padding:clamp(50px,7vw,88px) 0;border-top:1px solid var(--rule)}
.prix__grid{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:clamp(26px,5vw,76px);align-items:start}
.prix h2{font-size:clamp(26px,3.2vw,42px);margin-bottom:18px}
.prix__note{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:26px;max-width:40ch}
.prix__list{list-style:none;margin:0;padding:0;counter-reset:pr}
.prix__list li{
counter-increment:pr;position:relative;padding:16px 0 16px 46px;
border-top:1px solid var(--rule);font-size:16.2px;color:var(--ink-2);line-height:1.58;
}
.prix__list li:last-child{border-bottom:1px solid var(--rule)}
.prix__list li::before{
content:counter(pr,decimal-leading-zero);position:absolute;left:0;top:17px;
font-family:var(--f-ser);font-size:15px;color:var(--brass-ink);
}
.prix__list b{color:var(--ink);font-weight:600}
@media (max-width:1080px){
.deep__grid,.prix__grid{grid-template-columns:1fr;gap:26px}
}
/* --------------------------------------------------- guides ------------ */
.ghero{padding:clamp(20px,3vw,32px) 0 clamp(34px,4vw,52px)}
.ghero h1{font-size:clamp(34px,4.8vw,62px);line-height:1;letter-spacing:-.045em;
margin-bottom:26px;max-width:20ch}
.gimg{margin-bottom:clamp(24px,3.5vw,44px)}
.ghero__lead{font-size:clamp(17px,1.4vw,19.5px);color:var(--ink-2);max-width:46ch}
.answer{
padding:24px 28px 26px;border-radius:var(--r-img);
background:var(--card);box-shadow:0 1px 2px rgba(20,24,27,.05),0 10px 26px rgba(20,24,27,.07);
border-top:3px solid var(--brass);
display:grid;grid-template-columns:minmax(0,124px) minmax(0,60ch);
gap:6px clamp(18px,3vw,44px);align-items:start;
}
.answer__t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-ink);
font-weight:700;margin:2px 0 0}
.answer p:last-child{font-size:17.4px;line-height:1.6;color:var(--ink-2)}
.answer b{color:var(--ink);font-weight:600}
.prose{max-width:none;padding:clamp(20px,3vw,34px) var(--gut) clamp(30px,4vw,48px)}
.prose__s{padding:clamp(26px,3.4vw,44px) 0;border-top:1px solid var(--rule);
display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
gap:clamp(20px,4vw,60px);align-items:start}
.prose__s h2{font-size:clamp(24px,2.9vw,38px);position:sticky;top:104px}
.prose__b p{margin-bottom:16px;font-size:16.8px;line-height:1.68;color:var(--ink-2);max-width:68ch}
.prose__b p:last-child{margin-bottom:0}
.prose__s b{color:var(--ink);font-weight:600}
.gcta{background:var(--slate);color:#fff;padding:clamp(44px,6vw,76px) 0}
.gcta__in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.gcta h2{font-size:clamp(24px,3vw,38px);margin-bottom:12px;max-width:18ch}
.gcta p{color:rgba(255,255,255,.7);font-size:16.6px;max-width:46ch}
.gcta__btn{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hub{padding:clamp(20px,3vw,34px) 0 clamp(40px,5vw,64px)}
.hub__list a{grid-template-columns:minmax(0,.46fr) minmax(0,1fr) 28px}
.hub__list b{font-size:clamp(18px,1.9vw,23px)}
.hub__intro{max-width:62ch;margin-bottom:clamp(30px,4vw,50px)}
.hub__intro p{font-size:17.4px;line-height:1.68;color:var(--ink-2);margin-bottom:14px}
.byline{
max-width:66ch;margin:0 0 clamp(30px,4vw,50px);padding:16px 0 0;
border-top:1px solid var(--rule);font-size:14.8px;color:var(--muted);line-height:1.6;
}
/* calculateur ----------------------------------------------------------- */
.calc{background:var(--paper-2);border-block:1px solid var(--rule);
padding:clamp(44px,6vw,80px) 0}
.calc__grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:clamp(28px,5vw,72px);align-items:center}
.calc h2{font-size:clamp(26px,3.2vw,42px);margin-bottom:16px}
.calc__intro p{color:var(--ink-2);font-size:16.8px;max-width:40ch}
.calc__form{
background:var(--card);border-radius:22px;padding:clamp(22px,3vw,32px);
box-shadow:0 1px 2px rgba(20,24,27,.05),0 18px 44px rgba(20,24,27,.09);
display:grid;gap:16px;
}
.calc__form .f-chips{margin:0}
.calc__out{display:none;padding:18px 20px;border-radius:var(--r-img);background:var(--paper);
border-left:3px solid var(--brass)}
.calc__out.on{display:block}
.calc__out b{display:block;font-family:var(--f-dis);font-size:30px;font-weight:800;
letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.calc__out span{display:block;font-size:14.6px;color:var(--muted);margin-top:6px;line-height:1.5}
@media (max-width:1080px){
.prose__s{grid-template-columns:1fr;gap:14px}
.prose__s h2{position:static}
.calc__grid{grid-template-columns:1fr;gap:26px}
.answer{grid-template-columns:1fr;gap:8px;padding:20px 22px 22px}
}
/* --------------------------------------------------- tactile ---------- */
/* Sur mobile, toute cible tactile fait au moins 44 px de haut.
Le rendu desktop n'est pas touché : ces règles sont sous media query. */
@media (max-width:760px){
.foot__col a,.foot__col span{padding-block:11px;margin-bottom:0;display:block}
.foot__col h3{margin-bottom:8px}
.foot__bar a{display:inline-block;padding-block:11px}
.brand{padding-block:9px}
.link-arrow{padding-block:10px 8px}
.crumb{padding-block:92px 0;gap:8px}
.crumb a{display:inline-block;padding-block:11px}
.zone__index li{padding:0}
.zone__index a{display:block;padding-block:11px}
.drop__menu a{padding-block:13px}
.avis__q figcaption{padding-block:4px}
.devis__coord a{display:inline-block;padding-block:9px}
.devis__coord li{padding-block:8px}
}
@media (hover:none){
.mesh__list a{padding-block:16px}
.svc__list a{padding-block:18px}
.faq__list summary{padding-block:20px}
}
/* --------------------------------------------------- bloc local -------- */
.local{background:var(--paper-2);border-block:1px solid var(--rule);
padding:clamp(40px,5vw,68px) 0;margin-top:clamp(20px,3vw,32px)}
.local__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
gap:clamp(24px,4vw,60px);align-items:center}
.local h2{font-size:clamp(23px,2.7vw,34px);margin-bottom:12px}
.local p:last-child{color:var(--ink-2);font-size:16.4px;max-width:44ch}
.local__villes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.local__villes a{
display:block;padding:9px 16px;border-radius:100px;font-size:14.8px;color:var(--ink-2);
background:var(--card);box-shadow:0 1px 2px rgba(20,24,27,.05),0 3px 10px rgba(20,24,27,.04);
transition:transform .3s var(--ease),color .3s;
}
.local__villes a:hover{transform:translateY(-2px);color:var(--brass-ink)}
/* --------------------------------------------------- plan du site ------ */
.plan{padding:clamp(20px,3vw,34px) 0 clamp(50px,7vw,88px)}
.plan__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,3vw,48px)}
.plan h2{font-size:clamp(19px,2vw,24px);margin-bottom:14px}
.plan__list{list-style:none;margin:0;padding:0}
.plan__list li{border-top:1px solid var(--rule)}
.plan__list a{display:block;padding:11px 0;font-size:15.6px;color:var(--ink-2);
transition:color .25s,padding-left .3s var(--ease)}
.plan__list a:hover{color:var(--brass-ink);padding-left:8px}
@media (max-width:1080px){
.local__in{grid-template-columns:1fr;gap:22px}
.plan__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){.plan__grid{grid-template-columns:1fr}}
/* =========================================================================
COUCHE VITCLEAN
Reference : vitclean.netfoxfood.workers.dev, dont le CSS s'annonce
« light Apple-luxe ». Hero photo plein cadre, texte en bas a gauche dans
le vide du ciel, bande basse degradee (jamais de voile global).
========================================================================= */
.hero{
position:relative;isolation:isolate;overflow:hidden;
min-height:min(94svh,880px);display:flex;align-items:flex-end;
/* La barre est fixe et le contenu est ancre en bas : sans ce degagement,
une fenetre basse (1000x620, 1280x800) faisait passer le titre DERRIERE
la barre. min-height laisse le hero grandir si le texte a besoin de place. */
padding:clamp(104px,13vh,150px) 0 clamp(38px,6vw,74px);margin-bottom:0;
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
object-position:62% 42%}
.hero::after{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(to top, rgba(8,11,14,.86) 0%, rgba(8,11,14,.55) 26%,
rgba(8,11,14,.12) 54%, rgba(8,11,14,0) 74%),
linear-gradient(to right, rgba(8,11,14,.55) 0%, rgba(8,11,14,.18) 38%,
rgba(8,11,14,0) 62%);
}
.hero__in{color:#fff;display:grid;gap:0;max-width:min(760px,100%);margin-right:auto}
.hero__k{
display:inline-flex;align-items:center;gap:9px;
font-size:12.6px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:rgba(255,255,255,.82);margin-bottom:18px;
}
.hero__k .dot{width:6px;height:6px;border-radius:50%;background:var(--brass-lt);flex:none}
.hero__k .sep{opacity:.5}
.hero .hero__h1{
font-size:clamp(40px,6.4vw,84px);line-height:1.02;letter-spacing:-.04em;
font-weight:700;color:#fff;margin:0 0 20px;
text-shadow:0 2px 18px rgba(8,11,14,.35);
}
.hero .hero__h1 .it{color:var(--brass-lt)}
.hero__lead{
font-size:clamp(16.4px,1.35vw,18.6px);line-height:1.6;max-width:52ch;
color:rgba(255,255,255,.86);margin:0 0 30px;
}
.hero .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:clamp(28px,4vw,42px)}
.btn--light{--bg:#fff;--fg:var(--ink);box-shadow:0 8px 26px -8px rgba(0,0,0,.4)}
.btn--light:hover{--bg:#f2f2f4}
.btn--glass{
--bg:rgba(255,255,255,.13);--fg:#fff;
-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
.btn--glass:hover{--bg:rgba(255,255,255,.22)}
.hero .hero__trust{
border-top:1px solid rgba(255,255,255,.22);padding-top:20px;
color:rgba(255,255,255,.72);
}
.hero .hero__trust b{color:#fff}
@media (prefers-reduced-transparency:reduce){
.btn--glass{--bg:rgba(30,34,38,.92);backdrop-filter:none}
}
@media (max-width:760px){
.hero{min-height:min(92svh,720px)}
.hero .hero__cta .btn{flex:1 1 100%;justify-content:center}
}
/* le hero photo passe sous la nav : elle doit etre lisible dessus des le
scroll 0, comme la pilule sombre de VitClean */
body:has(.hero__bg) .nav:not(.scrolled) .nav__in{
background:rgba(14,17,20,.42);
-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
/* Le menu deroulant a son PROPRE fond clair : il ne doit pas heriter du
blanc de la barre, sinon on obtient du blanc sur blanc (vu en ligne). */
body:has(.hero__bg) .nav:not(.scrolled) .nav__in,
body:has(.hero__bg) .nav:not(.scrolled) .nav__in a:not(.btn):not(.drop__menu a),
body:has(.hero__bg) .nav:not(.scrolled) .nav__in button,
body:has(.hero__bg) .nav:not(.scrolled) .nav__in .brand__txt,
body:has(.hero__bg) .nav:not(.scrolled) .nav__in .brand__txt strong,
body:has(.hero__bg) .nav:not(.scrolled) .nav__in > svg,
body:has(.hero__bg) .nav:not(.scrolled) .nav__in .drop > button svg{color:#fff;fill:currentColor}
/* on redonne explicitement leur encre aux liens du menu deroulant */
body:has(.hero__bg) .nav .drop__menu a{color:var(--ink-2)}
body:has(.hero__bg) .nav .drop__menu a:hover{color:var(--ink)}
body:has(.hero__bg) .nav:not(.scrolled) .nav__in .brand svg{fill:none;stroke:#fff}
/* le bouton garde son propre contraste : blanc plein, texte encre */
body:has(.hero__bg) .nav:not(.scrolled) .nav__in .btn--dark{background:#fff;color:var(--ink)}
@media (prefers-reduced-transparency:reduce){
body:has(.hero__bg) .nav:not(.scrolled) .nav__in{background:rgba(14,17,20,.9);backdrop-filter:none}
}
/* le texte tombait sur le visage du second charpentier : on decale l'image
pour lui rendre le vide du ciel (voir regle « texte dans le vide ») */
.hero__bg{object-position:52% 62%}
.hero__in{margin-left:0;margin-right:auto}
@media (max-width:760px){
.hero{padding-top:calc(100px + env(safe-area-inset-top,0px))}
.hero__bg{object-position:58% 66%}
.hero .hero__h1{font-size:clamp(34px,8.6vw,46px);line-height:1.06}
}
/* --- en-tete de section centre, cartouche a pastille (VitClean) --------- */
.kicker{
display:inline-flex;align-items:center;gap:8px;
font-size:12.2px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
color:var(--brass-ink);margin-bottom:16px;
}
.kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}
.sec-head--center{
max-width:min(720px,100%);margin-inline:auto;text-align:center;
}
.sec-head--center p:not(.kicker){margin-inline:auto}
.sec-head--center h2{margin-bottom:14px}
/* --- panneau sombre a degrade (equivalent du CreditBand de VitClean) ---- */
.panel-wrap{padding:clamp(30px,5vw,64px) 0}
.panel{
display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
border-radius:clamp(20px,2.4vw,30px);overflow:hidden;color:#fff;
background:
radial-gradient(120% 140% at 8% 0%, rgba(168,72,27,.34) 0%, rgba(168,72,27,0) 58%),
linear-gradient(118deg, #17130F 0%, #241A12 46%, #120F0D 100%);
box-shadow:0 20px 60px -22px rgba(20,14,9,.55);
}
.panel__l{padding:clamp(28px,3.6vw,52px)}
.panel__r{
padding:clamp(28px,3.6vw,52px);
border-left:1px solid rgba(255,255,255,.12);
background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0));
}
.panel__k{
font-size:11.8px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
color:rgba(255,255,255,.58);margin-bottom:16px;
}
.panel h2{font-size:clamp(27px,3.5vw,46px);line-height:1.06;margin-bottom:16px;color:#fff}
.panel h2 em{color:var(--brass-lt)}
.panel__p{color:rgba(255,255,255,.76);font-size:16.6px;line-height:1.62;max-width:44ch;
margin-bottom:22px}
.panel .link-arrow{color:#fff}
.panel .link-arrow svg{stroke:var(--brass-lt)}
.panel .link-arrow:hover{color:var(--brass-lt)}
.panel__fig{
font-family:var(--f-dis);letter-spacing:-.05em;line-height:1;margin-bottom:18px;
display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
}
.panel__fig s{font-size:clamp(24px,2.6vw,34px);color:rgba(255,255,255,.4);
text-decoration-thickness:2px}
.panel__fig b{font-size:clamp(46px,6vw,84px);font-weight:700;color:var(--brass-lt)}
.panel__note{color:rgba(255,255,255,.76);font-size:16px;line-height:1.6;margin-bottom:16px}
.panel__note b{color:#fff;font-weight:600}
.panel__fine{color:rgba(255,255,255,.5);font-size:13.6px;line-height:1.55}
@media (max-width:860px){
.panel{grid-template-columns:1fr}
.panel__r{border-left:0;border-top:1px solid rgba(255,255,255,.12)}
}
/* --- section zone en sombre (VitClean pose sa carte des zones sur du noir) */
.zone{
background:
radial-gradient(90% 120% at 78% 18%, rgba(168,72,27,.20) 0%, rgba(168,72,27,0) 60%),
linear-gradient(180deg, #0D0B0A 0%, #141110 52%, #0D0B0A 100%);
color:#fff;border-top:0;
}
.zone .eyebrow{color:rgba(255,255,255,.5)}
.zone__l h2{color:#fff}
.zone__l h2 em{color:var(--brass-lt)}
.zone__l>p{color:rgba(255,255,255,.72)}
.zone__index{border-top-color:rgba(255,255,255,.16)}
.zone__index li{color:rgba(255,255,255,.66)}
.zone__index li:first-child{color:#fff}
.zone__index li::before{color:var(--brass-lt);opacity:.75}
.zone__index a:hover{color:var(--brass-lt);border-color:var(--brass-lt)}
.zone .btn--dark{--bg:#fff;--fg:var(--ink)}
.zone .btn--ghost{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
/* la carte dessinee doit s'inverser, sinon elle disparait sur le noir */
.zone .m-ring{fill:rgba(232,168,124,.05);stroke:var(--brass-lt);stroke-opacity:.34}
.zone .m-ring2{fill:rgba(232,168,124,.05);stroke:var(--brass-lt);stroke-opacity:.24}
.zone .m-dot{fill:#fff;opacity:.42}
.zone .m-cross{stroke:var(--brass-lt);stroke-opacity:.18}
.zone .m-halo{fill:var(--brass-lt);opacity:.2}
.zone .m-home{fill:var(--brass-lt);stroke:#0D0B0A}
.zone .m-lab{fill:rgba(255,255,255,.72)}
.zone__map figcaption{color:rgba(255,255,255,.5)}
/* --- CTA final en panneau photo sombre (« Pret a retrouver la lumiere ? ») */
.devis{background:var(--paper-2);position:relative}
.devis__grid{position:relative}
/* Le bloc de devis est le moment le plus important de la page : il finissait
en beige clair. Il devient le dernier grand moment sombre, la photo derriere
et le formulaire en carte blanche posee dessus. */
.devis{
background:#0D0B0A;color:#fff;isolation:isolate;overflow:hidden;
border-top:0;padding-block:clamp(64px,9vw,116px);
}
.devis__bg{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
object-position:50% 58%;
}
.devis::after{
content:"";position:absolute;inset:0;z-index:-1;
background:
radial-gradient(80% 100% at 12% 50%, rgba(13,11,10,.94) 0%, rgba(13,11,10,.72) 46%,
rgba(13,11,10,.5) 100%),
linear-gradient(180deg, rgba(13,11,10,.72), rgba(13,11,10,.86));
}
.devis .eyebrow{color:rgba(255,255,255,.5)}
.devis__l h2{color:#fff}
.devis__l h2 em{color:var(--brass-lt)}
.devis__l>p{color:rgba(255,255,255,.76)}
.devis__coord li{border-top-color:rgba(255,255,255,.18)}
.devis__coord span{color:rgba(255,255,255,.5)}
.devis__coord a,.devis__coord li>*{color:#fff}
.devis__coord a:hover{color:var(--brass-lt)}
.devis .form{
background:rgba(255,255,255,.97);color:var(--ink);
box-shadow:0 24px 70px -20px rgba(0,0,0,.6);
}
.devis .form__note{color:var(--muted)}
@media (prefers-reduced-transparency:reduce){.devis .form{background:#fff}}
/* --- chapitres metiers : la photo devient la carte, le titre s'y incruste - */
.chap__card{position:relative;isolation:isolate}
.chap__card::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to top, rgba(10,8,7,.82) 0%, rgba(10,8,7,.42) 26%,
rgba(10,8,7,.08) 52%, rgba(10,8,7,0) 70%);
}
.chap__cap{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:clamp(18px,2.4vw,30px);color:#fff;
}
.chap__cap .chap__num{
font-family:var(--f-dis);font-size:12.4px;letter-spacing:.16em;font-weight:600;
color:rgba(255,255,255,.62);opacity:1;margin:0 0 6px;line-height:1;
}
.chap__cap h3{
color:#fff;font-size:clamp(24px,2.9vw,38px);line-height:1.06;margin:0;
text-shadow:0 2px 14px rgba(10,8,7,.4);
}
.chap__cap h3 em{color:var(--brass-lt)}
/* la colonne de texte commence maintenant par l'intro : elle se recale en haut */
.chap--01 .chap__body,.chap--03 .chap__body{align-self:start}
.chap--02 .chap__split>div:first-child{display:none}
.chap--02 .chap__split{grid-template-columns:1fr}
@media (max-width:760px){.chap__cap{padding:16px}}
/* le chapitre 01 : la photo doit peser autant que le texte pour porter son
titre, et la vignette d'appoint se contente d'un rappel.
Sous media query : ces regles arrivent apres l'effondrement mobile en une
colonne et le rouvraient, le texte se retrouvait dans 150 px. */
@media (min-width:761px){
.chap--01{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.chap__duo{grid-template-columns:1.7fr .7fr;align-items:end}
.frame--tall{aspect-ratio:5/6}
.chap--03{align-items:stretch}
.chap--03 .frame--fill{aspect-ratio:5/4}
}
/* le numero se perdait sur le ciel quand le titre passe sur deux lignes */
.chap__cap .chap__num{color:rgba(255,255,255,.9);
text-shadow:0 1px 6px rgba(10,8,7,.85), 0 0 14px rgba(10,8,7,.6)}
.chap__card::after{
background:linear-gradient(to top, rgba(10,8,7,.86) 0%, rgba(10,8,7,.6) 22%,
rgba(10,8,7,.24) 44%, rgba(10,8,7,0) 66%);
}
/* Mesure sur pixels reels : le cartouche du hero tombait a 3,85:1 sur les
eclats clairs du ciel. Il est haut dans le cadre, donc hors du degrade bas :
c'est la bande laterale qui doit le porter. Renforcee a gauche seulement,
jamais de voile sur le sujet. */
/* Bande basse pour l'ensemble, plus une bande laterale legere. Le ciel de la
photo reste lisible : le contraste du texte est assure par le voile local
pose derriere le bloc, pas en assombrissant toute l'image. */
/* Deux degrades continus, sans bord visible. Le voile radial pose derriere le
bloc de texte se lisait comme une tache sombre sur le ciel. */
.hero::after{
background:
linear-gradient(to top, rgba(8,11,14,.8) 0%, rgba(8,11,14,.5) 30%,
rgba(8,11,14,.14) 58%, rgba(8,11,14,0) 80%),
linear-gradient(102deg, rgba(8,11,14,.8) 0%, rgba(8,11,14,.64) 24%,
rgba(8,11,14,.36) 46%, rgba(8,11,14,.1) 64%,
rgba(8,11,14,0) 80%);
}
.hero__in{position:relative}
.hero__k{text-shadow:0 1px 5px rgba(8,11,14,.7)}
/* =========================================================================
COUCHE INTERACTION
Mesure : 70 elements cliquables sur 76 n'avaient aucun etat presse, et
toute la page bougeait sur une seule courbe. VitClean en a treize et
quatre courbes. Le premier principe d'Apple est de repondre au doigt qui
appuie, pas au relachement.
========================================================================= */
:root{
--ease-out:cubic-bezier(.22,.9,.28,1); /* ce qui entre */
--ease-in:cubic-bezier(.55,.06,.68,.19); /* ce qui sort */
--ease-move:cubic-bezier(.32,.72,0,1); /* ce qui se deplace */
--ease-press:cubic-bezier(.3,.8,.4,1); /* la pression, tres court */
}
/* --- retour a la pression : instantane, jamais au relachement ----------- */
.btn,.gal__i,.f-chips span,.callbar__tel,.callbar__devis,.drawer__tel{
transition:transform .1s var(--ease-press),background-color .25s var(--ease-out),
box-shadow .25s var(--ease-out),color .25s var(--ease-out);
}
.btn:active{transform:scale(.972)}
.gal__i:active{transform:scale(.986)}
.f-chips label:active span{transform:scale(.96)}
.callbar__tel:active,.callbar__devis:active,.drawer__tel:active{transform:scale(.97)}
/* les liens a chevron : la fleche part, le texte s'enfonce d'un cheveu */
.link-arrow{transition:color .25s var(--ease-out),transform .1s var(--ease-press)}
.link-arrow:active{transform:translateY(1px)}
.link-arrow:active svg{transform:translateX(4px)}
/* les listes de liens : le decalage au survol existait, la pression non */
.svc__list a:active,.mesh__list a:active,.hub__list a:active,
.toc__l a:active,.zone__index a:active,.foot__col a:active,.crumb a:active{
transform:translateY(1px);
}
.faq__list summary{transition:color .25s var(--ease-out),transform .1s var(--ease-press)}
.faq__list summary:active{transform:translateY(1px)}
/* --- ce qui n'avait aucun retour au survol ------------------------------ */
.brand{transition:opacity .25s var(--ease-out),transform .1s var(--ease-press)}
.brand:hover{opacity:.72}
.brand:active{transform:scale(.985)}
.burger{transition:background-color .25s var(--ease-out),transform .1s var(--ease-press)}
.burger:hover{background:rgba(20,24,27,.06)}
.burger:active{transform:scale(.94)}
.f input,.f textarea{transition:border-color .25s var(--ease-out),background .25s var(--ease-out),
box-shadow .25s var(--ease-out)}
.f input:hover:not(:focus),.f textarea:hover:not(:focus){background:#fff}
/* --- la pression n'a pas de sens au doigt sur ce qui defile ------------- */
@media (prefers-reduced-motion:reduce){
.btn:active,.gal__i:active,.link-arrow:active,.faq__list summary:active,
.brand:active,.burger:active,.callbar__tel:active,.callbar__devis:active{transform:none}
}
/* les quatre derniers liens sans retour : coordonnees du devis et barre de pied */
.devis__coord a,.foot__bar a{transition:color .25s var(--ease-out),transform .1s var(--ease-press)}
.devis__coord a:active,.foot__bar a:active{transform:translateY(1px)}
/* --- raccord arrondi entre sombre et clair ------------------------------ */
/* Signature VitClean : la section claire remonte sur la sombre avec de gros
coins arrondis, au lieu d'une cassure nette. */
.ba + section,.urgence + section,.quote + section,.zone + section{
position:relative;z-index:1;
border-radius:clamp(24px,3vw,42px) clamp(24px,3vw,42px) 0 0;
margin-top:calc(-1 * clamp(24px,3vw,42px));
background:var(--paper);
}
/* la section qui precede doit laisser la place au chevauchement */
.ba,.urgence,.quote,.zone{padding-bottom:calc(clamp(24px,3vw,42px) + clamp(30px,4vw,52px))}
/* .avis a son propre fond : il doit le garder en remontant */
.quote + .avis{background:var(--paper-2)}
/* --- avis : note en tete, colonnes, attribution en petites capitales ----- */
.avis__head--center{
display:block;text-align:center;max-width:min(760px,100%);margin-inline:auto;
margin-bottom:clamp(34px,4.5vw,58px);
}
.avis__note{
display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;
font-size:12.4px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
color:var(--muted);
}
.avis__note .stars{color:var(--brass);letter-spacing:.1em;font-size:13px}
.avis__head--center h2{font-size:clamp(30px,4vw,52px)}
/* --- CTA final en panneau encadre, pas en pleine largeur ---------------- */
/* VitClean pose son « Pret a retrouver la lumiere ? » comme un objet arrondi
sur le fond clair, pas comme une bande qui touche les bords. */
.devis{
background:transparent;padding-block:clamp(40px,6vw,80px);
border-radius:0;overflow:visible;
}
.devis::after{display:none}
.devis__bg{display:none}
.devis__grid{
position:relative;isolation:isolate;overflow:hidden;
border-radius:clamp(20px,2.4vw,32px);
padding:clamp(30px,4.5vw,66px);
background:
radial-gradient(90% 130% at 10% 40%, rgba(168,72,27,.22) 0%, rgba(168,72,27,0) 62%),
linear-gradient(122deg, #14100D 0%, #1E1712 48%, #100D0C 100%);
box-shadow:0 24px 70px -24px rgba(20,14,9,.55);
}
/* La marge negative du raccord arrondi mangeait le padding haut de la section
suivante. La FAQ, qui n'avait deja aucun padding en haut, se retrouvait
collee au bord arrondi. On rend l'espace, valeur unique pour les quatre. */
.ba + section,.urgence + section,.quote + section,.zone + section{
padding-top:calc(clamp(24px,3vw,42px) + clamp(44px,6.5vw,88px));
}
/* --- les neuf prestations en acces direct ------------------------------- */
/* Facon VitClean : la photo EST la carte, le texte s'y incruste, tout est
cliquable. Pas de pictogramme dans un rond, pas de carte decorative. */
.scards{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(12px,1.6vw,22px);
}
.scard{
position:relative;isolation:isolate;overflow:hidden;color:#fff;
border-radius:var(--r-img);aspect-ratio:4/3;display:block;
box-shadow:var(--sh-card);
transition:transform .1s var(--ease-press),box-shadow .4s var(--ease-out);
}
.scard__img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
transition:transform .7s var(--ease-out);
}
.scard::after{
content:"";position:absolute;inset:0;z-index:-1;
/* mesure : la 2e ligne de texte tombait a 4,49:1 vers 30 % du degrade.
On epaissit la zone basse, la photo reste lisible au-dessus. */
/* Le texte occupe les 42 % du bas. Calcul : il faut au moins 0,64 d'opacite
pour tenir 4,5:1 en blanc a 82 % sur une photo entierement blanche. */
background:linear-gradient(to top, rgba(10,8,7,.92) 0%, rgba(10,8,7,.84) 20%,
rgba(10,8,7,.68) 42%, rgba(10,8,7,.28) 62%, rgba(10,8,7,0) 82%);
transition:opacity .4s var(--ease-out);
}
.scard__in{
position:absolute;left:0;right:0;bottom:0;
display:grid;gap:6px;padding:clamp(16px,1.9vw,24px);
}
.scard__t{
font-family:var(--f-dis);font-weight:600;letter-spacing:-.03em;
font-size:clamp(18px,1.7vw,23px);line-height:1.1;
text-shadow:0 1px 8px rgba(10,8,7,.5);
}
.scard__p{
font-size:14.4px;line-height:1.45;color:rgba(255,255,255,.82);
text-shadow:0 1px 6px rgba(10,8,7,.6);
}
.scard__go{display:block;margin-top:2px}
.scard__go svg{width:24px;height:11px;fill:none;stroke:var(--brass-lt);stroke-width:1.6;
transition:transform .4s var(--ease-out)}
.scard:hover{box-shadow:0 10px 20px -8px rgba(20,14,9,.2),0 30px 60px -18px rgba(20,14,9,.35)}
.scard:hover .scard__img{transform:scale(1.05)}
.scard:hover .scard__go svg{transform:translateX(6px)}
.scard:active{transform:scale(.988)}
@media (max-width:1080px){.scards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
.scards{grid-template-columns:1fr;gap:12px}
.scard{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
.scard:active{transform:none}
.scard:hover .scard__img{transform:none}
}