/* HR Construction — Fenêtres & Portes · hr-construction.ch · RWSolutions, octobre 2026
   Concept : la menuiserie comme cadre. Fond clair et froid, photos cadrées comme des ouvertures,
   les deux carrés décalés du logo (H vert, R bleu) comme seul motif. Anthracite = la teinte phare des portes posées. */
:root{
  --anthracite:#1F2A33; --anthracite-2:#2C3943; --anthracite-3:#3D4B56;
  --bleu:#3A76AD; --bleu-d:#2B5F8F; --bleu-pale:#E7EFF7;
  --vert:#5E9332; --vert-d:#4A7826; --vert-pale:#EBF3E2;
  --fond:#F4F6F7; --carte:#FFFFFF; --trait:#DCE2E6;
  --texte:#1F2A33; --doux:#56636E; --sur-sombre:#EEF2F4; --sur-sombre-doux:#A9B5BE;
  --r:6px; --r-lg:10px; --wrap:1200px;
  --f-titre:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-texte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --fs:17px;
  --btn:#3A76AD; --btn-h:#2B5F8F; --head-bg:rgba(255,255,255,.94); --ph-bg:#E9ECEE; --foot:#172028; --vitrine:#FFFFFF; --chip-h:#D6E5F2;
  color-scheme:light;
}
/* mode nuit : automatique (réglage de l'appareil) ou forcé par le bouton (data-theme) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --anthracite:#1A252E; --anthracite-2:#24313B; --anthracite-3:#34434E;
  --bleu:#6AA3D8; --bleu-d:#8DBBE4; --bleu-pale:#1C2E3F;
  --vert:#7AB548; --vert-d:#5E9332; --vert-pale:#1F3019;
  --fond:#0F161C; --carte:#172129; --trait:#2A3742;
  --texte:#E5EBEF; --doux:#9AA8B3; --sur-sombre:#E5EBEF; --sur-sombre-doux:#9AA8B3;
  --btn:#3A76AD; --btn-h:#4A88C0; --head-bg:rgba(15,22,28,.92); --ph-bg:#222D36; --foot:#0A1015; --vitrine:#EEF1F3; --chip-h:#26405A;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --anthracite:#1A252E; --anthracite-2:#24313B; --anthracite-3:#34434E;
  --bleu:#6AA3D8; --bleu-d:#8DBBE4; --bleu-pale:#1C2E3F;
  --vert:#7AB548; --vert-d:#5E9332; --vert-pale:#1F3019;
  --fond:#0F161C; --carte:#172129; --trait:#2A3742;
  --texte:#E5EBEF; --doux:#9AA8B3; --sur-sombre:#E5EBEF; --sur-sombre-doux:#9AA8B3;
  --btn:#3A76AD; --btn-h:#4A88C0; --head-bg:rgba(15,22,28,.92); --ph-bg:#222D36; --foot:#0A1015; --vitrine:#EEF1F3; --chip-h:#26405A;
  color-scheme:dark}
/* logo : version blanche la nuit */
.logo-nuit{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-jour{display:none}:root:not([data-theme="light"]) .logo-nuit{display:block}}
:root[data-theme="dark"] .logo-jour{display:none}
:root[data-theme="dark"] .logo-nuit{display:block}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-texte);color:var(--texte);background:var(--fond);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--bleu);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-titre);font-weight:700;line-height:1.06;letter-spacing:-.015em;font-stretch:112%;text-wrap:balance}
h1{font-size:clamp(2.4rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:1.3rem;letter-spacing:-.005em}
p{text-wrap:pretty}
.muted{color:var(--doux)}
.dark .muted{color:var(--sur-sombre-doux)}

/* étiquette : les deux carrés du logo + police mono, comme le "Fenêtres & Portes" du logo */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--bleu-d)}
.eyebrow::before{content:"";width:16px;height:16px;flex:none;background:
  linear-gradient(var(--vert),var(--vert)) 0 0/9px 1.5px no-repeat,linear-gradient(var(--vert),var(--vert)) 0 0/1.5px 9px no-repeat,
  linear-gradient(var(--vert),var(--vert)) 0 7.5px/9px 1.5px no-repeat,linear-gradient(var(--vert),var(--vert)) 7.5px 0/1.5px 9px no-repeat,
  linear-gradient(var(--bleu),var(--bleu)) 7px 7px/9px 1.5px no-repeat,linear-gradient(var(--bleu),var(--bleu)) 7px 7px/1.5px 9px no-repeat,
  linear-gradient(var(--bleu),var(--bleu)) 7px 14.5px/9px 1.5px no-repeat,linear-gradient(var(--bleu),var(--bleu)) 14.5px 7px/1.5px 9px no-repeat}
.dark .eyebrow{color:#9CC3E6}

/* barre haute */
.top{background:var(--anthracite);color:var(--sur-sombre-doux);font-size:.84rem}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px}
.top a{color:var(--sur-sombre);text-decoration:none}
.top .tools{display:flex;gap:1rem;align-items:center}
.top button{background:transparent;border:1px solid var(--anthracite-3);color:var(--sur-sombre);border-radius:6px;padding:.15rem .5rem;font:inherit;cursor:pointer}

/* en-tête */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--head-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}
.head .wrap{display:flex;align-items:center;justify-content:space-between;min-height:78px;gap:1rem}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:1.7rem}
.nav a{text-decoration:none;font-weight:500;font-size:.95rem;color:var(--texte);padding:.3rem 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--vert)}
.nav a.btn{border-bottom:0;padding:0 1.1rem}
.menu-btn{display:none}
.drawer{position:fixed;inset:0;z-index:25;background:var(--carte);overflow-y:auto;padding:140px max(24px,env(safe-area-inset-right,0px)) 24px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:.2rem}
.drawer[hidden]{display:none}
.drawer a{font-family:var(--f-titre);font-stretch:112%;font-weight:700;font-size:1.7rem;text-decoration:none;padding:.6rem 0;border-bottom:1px solid var(--trait)}
.drawer .drawer-contact{margin-top:1.5rem;font-family:var(--f-texte);font-size:1rem;font-weight:500;border:0;color:var(--doux)}

/* boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.4rem;border-radius:var(--r);background:var(--btn);color:#fff;font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;font-family:var(--f-texte);transition:background .15s,transform .15s}
.btn:hover{background:var(--btn-h)}
.btn:active{transform:translateY(1px)}
.btn.vert{background:#5E9332}
.btn.vert:hover{background:#4A7826}
.btn.line{background:transparent;color:var(--texte);box-shadow:inset 0 0 0 1.5px var(--texte)}
.btn.line:hover{background:var(--texte);color:var(--fond)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.sm{min-height:44px;padding:0 1rem;font-size:.92rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.arrow::after{content:"→";font-weight:500}

/* hero : texte à gauche, photo encadrée à droite avec les deux carrés */
.hero{padding:4.5rem 0 4rem;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr 1.08fr;gap:4rem;align-items:center}
.hero h1{margin:1.1rem 0 1.2rem}
.hero h1 em{font-style:normal;color:var(--bleu)}
.hero .lead{font-size:1.15rem;color:var(--doux);max-width:33rem;margin-bottom:2rem}
.hero .contact-line{margin-top:1.6rem;font-size:.95rem;color:var(--doux)}
.hero .contact-line b{color:var(--texte)}
.frame{position:relative;margin:22px 22px 0 0}
.frame::before,.frame::after{content:"";position:absolute;width:46%;aspect-ratio:1;pointer-events:none}
.frame::before{left:-22px;top:-22px;border:2px solid var(--vert)}
.frame::after{right:-22px;bottom:-22px;border:2px solid var(--bleu)}
.slides{position:relative;aspect-ratio:4/3.3;border-radius:2px;overflow:hidden;background:var(--anthracite);z-index:1;max-width:100%}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.slides .cap{position:absolute;z-index:2;left:12px;bottom:12px;font-family:var(--f-mono);font-size:.72rem;color:#fff;background:rgba(31,42,51,.72);padding:.3rem .6rem;border-radius:4px;letter-spacing:.02em}

/* chiffres */
.facts{border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);background:var(--carte)}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .wrap>div{padding:1.5rem 1.2rem;border-left:1px solid var(--trait)}
.facts .wrap>div:first-child{border-left:0;padding-left:0}
.facts b{display:block;font-family:var(--f-titre);font-stretch:112%;font-size:1.9rem;line-height:1.05;letter-spacing:-.02em}
.facts span{font-size:.88rem;color:var(--doux)}

section{padding:5.5rem 0}
section.blanc{background:var(--carte)}
section.dark{background:var(--anthracite);color:var(--sur-sombre)}
section.pale{background:var(--bleu-pale)}
.sec-head{max-width:44rem;margin-bottom:2.8rem}
.sec-head h2{margin:.8rem 0 .8rem}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.sec-head.row>div{max-width:44rem}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{display:flex;flex-direction:column;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--bleu);transform:translateY(-2px)}
.svc .ph{aspect-ratio:4/3;overflow:hidden;background:var(--anthracite)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc:hover .ph img{transform:scale(1.04)}
.svc .t{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.svc p{font-size:.95rem;color:var(--doux)}
.svc .more{margin-top:auto;padding-top:.6rem;font-weight:600;color:var(--bleu-d);font-size:.93rem}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{font-family:var(--f-mono);font-size:.72rem;background:var(--fond);border:1px solid var(--trait);border-radius:4px;padding:.15rem .45rem;color:var(--doux)}

/* bande de portes (catalogue) */
.doors{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.door{text-decoration:none;display:flex;flex-direction:column;gap:.55rem}
.door .ph{aspect-ratio:4/5;overflow:hidden;border-radius:var(--r);background:var(--ph-bg)}
.door .ph img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .5s}
.door:hover .ph img{transform:scale(1.04)}
.door small{font-family:var(--f-mono);font-size:.72rem;color:var(--doux);letter-spacing:.04em;text-transform:uppercase}
.door b{font-weight:600;font-size:.98rem;line-height:1.2;display:block}
.dark .door small{color:var(--sur-sombre-doux)}

/* étapes : vraie séquence du devis à la pose */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s;border-top:1px solid var(--anthracite-3)}
.step{padding:1.6rem 1.4rem 0 0;position:relative}
.step::before{counter-increment:s;content:"0" counter(s);font-family:var(--f-mono);font-size:.85rem;color:#9CC3E6;display:block;margin-bottom:1.1rem}
.step::after{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;background:var(--vert)}
.step h3{margin-bottom:.45rem}
.step p{font-size:.93rem;color:var(--sur-sombre-doux);max-width:24ch}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split>div{min-width:0}
.split .ph{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;max-width:100%}
.split .ph img{width:100%;height:100%;object-fit:cover}
.ticks{list-style:none;display:grid;gap:.75rem;margin-top:1.3rem}
.ticks li{padding-left:1.9rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.42rem;width:12px;height:12px;border:2px solid var(--vert)}
.ticks li:nth-child(even)::before{border-color:var(--bleu)}

/* réalisations (accueil) */
.works{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-auto-rows:250px;gap:14px}
.work{position:relative;overflow:hidden;background:var(--anthracite);text-decoration:none;color:#fff;border-radius:2px}
.work:first-child{grid-row:span 2}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.work:hover img{transform:scale(1.04)}
.work .lbl{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1rem .9rem;background:linear-gradient(180deg,rgba(31,42,51,0),rgba(31,42,51,.85))}
.work .lbl b{display:block;font-weight:600;line-height:1.2}
.work .lbl span{font-family:var(--f-mono);font-size:.72rem;color:#C9D3DA;text-transform:uppercase;letter-spacing:.04em}

/* boîte de demande */
.ask{background:var(--carte);border-radius:var(--r-lg);padding:2rem;border:1px solid var(--trait);color:var(--texte);box-shadow:0 18px 50px rgba(31,42,51,.08)}
.ask label{font-weight:600;display:block;margin-bottom:.5rem}
.ask textarea{width:100%;min-height:140px;border:1.5px solid var(--trait);border-radius:var(--r);padding:1rem;font:inherit;resize:vertical;background:var(--fond);color:var(--texte)}
.ask textarea:focus,.ask input:focus{outline:none;border-color:var(--bleu);background:var(--carte)}
.ask .ex{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.ask .ex button{background:var(--bleu-pale);color:var(--bleu-d);border:0;border-radius:999px;padding:.4rem .85rem;font:inherit;font-size:.84rem;cursor:pointer}
.ask .ex button:hover{background:var(--chip-h)}
.ask .fields{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1rem}
.ask input{border:1.5px solid var(--trait);border-radius:var(--r);padding:.8rem 1rem;font:inherit;background:var(--fond);min-height:52px;width:100%;color:var(--texte)}
.ask .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;margin-top:1rem}
.triage{margin-top:1.2rem;border-radius:var(--r);background:var(--vert-pale);padding:1.1rem 1.2rem;display:none}
.triage.on{display:block;animation:pop .35s ease}
.triage dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem;margin-top:.5rem;font-size:.95rem}
.triage dt{color:var(--doux)}
.triage dd{font-weight:600}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.info-list{display:grid;gap:1rem;margin-top:1.6rem}
.info-list div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--anthracite-3)}
.info-list dt{font-family:var(--f-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sur-sombre-doux);padding-top:.2rem}
.info-list dd a{text-decoration:none}
.info-list dd a:hover{text-decoration:underline}

/* pied */
.foot{background:var(--foot);color:var(--sur-sombre-doux);padding:4rem 0 2rem;font-size:.92rem}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:2rem}
.foot .logo{height:52px;width:auto;margin-bottom:1.2rem}
.foot h4{font-family:var(--f-mono);font-weight:500;text-transform:uppercase;color:var(--sur-sombre);font-size:.78rem;letter-spacing:.08em;margin-bottom:.8rem}
.foot a{text-decoration:none;display:block;padding:.15rem 0}
.foot a:hover{color:#fff}
.foot .legal{border-top:1px solid var(--anthracite-3);margin-top:2.5rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem}
.foot .legal a{display:inline}

/* pages intérieures */
.page-hero{padding:4rem 0 3rem;background:var(--carte);border-bottom:1px solid var(--trait)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.5rem);margin:.9rem 0 .9rem}
.page-hero p{max-width:42rem;color:var(--doux);font-size:1.1rem}
.crumbs{font-family:var(--f-mono);font-size:.75rem;color:var(--doux);margin-bottom:1rem}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;padding:3.5rem 0;border-bottom:1px solid var(--trait);scroll-margin-top:100px}
.svc-row:last-child{border-bottom:0}
.svc-row>div{min-width:0}
.svc-row:nth-child(even) .ph{order:2}
.svc-row .ph{aspect-ratio:4/3;overflow:hidden;border-radius:2px;max-width:100%}
.svc-row .ph img{width:100%;height:100%;object-fit:cover}
.svc-row h2{margin:.7rem 0 .9rem}
.svc-row p+p{margin-top:.8rem}
.mat{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.5rem;margin-top:1.3rem}
.mat span{background:var(--fond);border:1px solid var(--trait);border-radius:var(--r);padding:.55rem .75rem;font-size:.9rem;font-weight:500}

/* catalogue en ligne */
.toc{display:flex;flex-wrap:wrap;gap:.45rem}
.toc a{font-size:.88rem;text-decoration:none;border:1px solid var(--trait);background:var(--carte);border-radius:999px;padding:.35rem .85rem}
.toc a:hover{border-color:var(--bleu);color:var(--bleu-d)}
.coll{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:start;padding:3.5rem 0;border-bottom:1px solid var(--trait);scroll-margin-top:100px}
.coll>div{min-width:0}
.coll .main{position:relative;background:var(--ph-bg);border-radius:2px;overflow:hidden;max-width:100%}
.coll .main img{width:100%;height:auto}
.coll .num{font-family:var(--f-mono);font-size:.8rem;color:var(--doux)}
.coll h2{margin:.4rem 0 .8rem;font-size:clamp(1.7rem,3vw,2.3rem)}
.coll .phare{font-family:var(--f-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--bleu-d);margin-top:1.2rem}
.variants{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.4rem}
.variants figure{background:var(--vitrine);color:#1F2A33;border:1px solid var(--trait);border-radius:var(--r);padding:.8rem .6rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.variants img{height:150px;width:auto;object-fit:contain}
.variants figcaption{font-size:.85rem;font-weight:600;text-align:center}
.variants figcaption small{display:block;font-family:var(--f-mono);font-weight:400;font-size:.68rem;color:#56636E;text-transform:uppercase;letter-spacing:.05em}
.coll .btn-row{margin-top:1.6rem}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.gal figure{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.gal img{width:100%;height:auto}
.gal figcaption{padding:.8rem 1rem;font-size:.9rem}
.gal figcaption b{display:block;font-family:var(--f-mono);font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--doux);margin-bottom:.15rem}
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.opt{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);padding:1.4rem 1.5rem}
.opt h3{margin-bottom:.4rem}
.opt p{color:var(--doux);font-size:.95rem}
.swatches{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.sw{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--doux)}
.sw i{width:22px;height:22px;border-radius:4px;border:1px solid rgba(0,0,0,.15);display:block}
.pdf-band{display:grid;grid-template-columns:auto 1fr auto;gap:1.6rem;align-items:center;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);padding:1.3rem 1.5rem}
.pdf-band img{width:84px;height:auto;border-radius:3px;box-shadow:0 6px 18px rgba(31,42,51,.18)}
.pdf-band p{color:var(--doux);font-size:.93rem}

/* galerie réalisations */
.filter{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filter button{min-height:44px;padding:0 1.05rem;border-radius:999px;border:1px solid var(--trait);background:var(--carte);font:inherit;font-size:.93rem;cursor:pointer;color:var(--texte)}
.filter button[aria-pressed=true]{background:var(--texte);color:var(--fond);border-color:var(--texte)}
.gallery{columns:3 280px;column-gap:14px}
.gallery figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;background:var(--anthracite);position:relative;border-radius:2px}
.gallery figure[hidden]{display:none}
.gallery img{width:100%;height:auto}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .9rem .7rem;background:linear-gradient(180deg,rgba(31,42,51,0),rgba(31,42,51,.82));color:#fff;font-size:.86rem}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:3.5rem;align-items:start}
.contact-grid>div{min-width:0}
.cards{display:grid;gap:.75rem}
.ccard{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-lg);padding:1.05rem 1.2rem;display:flex;gap:1rem;align-items:center;text-decoration:none}
a.ccard:hover{border-color:var(--bleu)}
.ccard .ic{width:44px;height:44px;border-radius:var(--r);background:var(--bleu-pale);display:grid;place-items:center;flex:none;color:var(--bleu-d)}
.ccard .ic svg{width:22px;height:22px}
.ccard small{display:block;color:var(--doux);font-size:.82rem}
.ccard b{font-size:1.02rem;font-weight:600}
.faq details{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:.6rem}
.faq summary{font-weight:600;cursor:pointer}
.faq p{margin-top:.6rem;color:var(--doux)}

/* pages légales */
.legal-page{max-width:46rem}
.legal-page h2{font-size:1.5rem;margin:2.2rem 0 .7rem}
.legal-page h2:first-child{margin-top:0}
.legal-page p,.legal-page li{margin-bottom:.7rem}
.legal-page ul{padding-left:1.2rem}
.legal-page a{color:var(--bleu-d);text-underline-offset:3px}
.legal-page dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.5rem;margin:1rem 0;padding:1.1rem 1.3rem;background:var(--carte);border:1px solid var(--trait);border-radius:var(--r)}
.legal-page dt{color:var(--doux)}
.legal-page dd{font-weight:500}
.small{font-size:.88rem;margin-top:2rem}

/* barre mobile */
.mbar{display:none}

@media (max-width:980px){
  .nav{display:none}
  .menu-btn{display:inline-flex;align-items:center;background:var(--anthracite);color:#fff;border:0;border-radius:var(--r);min-height:44px;padding:0 1.1rem;font:inherit;font-weight:600;position:relative;z-index:60;cursor:pointer}
  .hero .wrap,.split,.contact-grid,.svc-row,.coll{grid-template-columns:1fr;gap:2.4rem}
  .hero .wrap{gap:3rem}
  .svc-row:nth-child(even) .ph{order:0}
  .services{grid-template-columns:1fr 1fr}
  .doors{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr;row-gap:1.5rem;border-top:0}
  .step{border-top:1px solid var(--anthracite-3)}
  .works{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .work:first-child{grid-column:span 2;grid-row:span 1}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .facts .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .facts .wrap>div:nth-child(n+3){border-top:1px solid var(--trait)}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  html{font-size:calc(var(--fs) - 1px)}
  section{padding:3.6rem 0}
  .top .addr{display:none}
  .top .wrap{justify-content:flex-end}
  .head .wrap{min-height:66px}
  .brand img{height:38px}
  .hero{padding:2.6rem 0 3rem}
  .frame{margin:16px 16px 0 0}
  .frame::before{left:-16px;top:-16px}.frame::after{right:-16px;bottom:-16px}
  .facts .wrap>div{padding:1.1rem .8rem 1.1rem 0}
  .facts .wrap>div:nth-child(even){padding-left:.9rem}
  .facts b{font-size:1.5rem}
  .services{grid-template-columns:1fr}
  .doors{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .works{grid-template-columns:1fr;grid-auto-rows:230px}
  .work:first-child{grid-column:auto}
  .ask{padding:1.3rem}
  .ask .fields{grid-template-columns:1fr}
  .btn-row .btn{flex:1 1 100%}
  .variants img{height:120px}
  .gal,.options{grid-template-columns:1fr}
  .pdf-band{grid-template-columns:auto 1fr}
  .pdf-band .btn{grid-column:1/-1}
  .info-list div{grid-template-columns:1fr;gap:.2rem}
  .foot .cols{grid-template-columns:1fr}
  .legal-page dl{grid-template-columns:1fr;gap:.1rem}
  .legal-page dd{margin-bottom:.6rem}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--head-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px;border-radius:12px;border:1px solid var(--trait);box-shadow:0 10px 30px rgba(31,42,51,.18)}
  .mbar .btn{min-height:50px}
  body{padding-bottom:86px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* bouton mode nuit */
.top #theme{display:inline-flex;align-items:center;gap:.35rem}
.top #theme svg{width:14px;height:14px}
/* choix Porte / Fenêtre du formulaire */
.ask .choice{display:flex;gap:.6rem;margin:.2rem 0 1rem}
.ask .choice button{flex:1;min-height:56px;border:1.5px solid var(--trait);background:var(--fond);color:var(--texte);border-radius:var(--r);font:inherit;font-weight:600;font-size:1.02rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.55rem}
.ask .choice button svg{width:22px;height:22px;flex:none}
.ask .choice button:hover{border-color:var(--bleu)}
.ask .choice button[aria-pressed=true]{border-color:var(--bleu);background:var(--bleu-pale);color:var(--bleu-d);box-shadow:inset 0 0 0 1px var(--bleu)}
.ask .q-label{font-weight:600;display:block;margin-bottom:.5rem}