@font-face{
  font-family:"Archivo";
  src:url(/assets/fonts/archivo.woff2) format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --ground:#EFEDE6; --ground-2:#E4E1D7; --surface:#FBFAF7;
  --ink:#101619; --ink-2:#3B474E; --ink-3:#6B777E;
  --line:#D7D3C8; --line-strong:#B7B2A4;
  --accent:#2C5C79; --accent-deep:#1B3F55; --accent-ink:#FFF; --accent-soft:#DDE8EE;
  --gold:#A87C1E;
  --night:#0C1114; --night-2:#141C21; --night-ink:#EDEAE2; --night-ink-2:#9AA5AB;
  --alu:linear-gradient(180deg,#EEF1F2 0%,#C6CCD0 38%,#9AA1A7 56%,#DDE1E3 100%);
  --alu-v:linear-gradient(90deg,#EEF1F2 0%,#C6CCD0 38%,#9AA1A7 56%,#DDE1E3 100%);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --serif:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wide:'wdth' 116;
  --seuil-h:clamp(22px,2.8vw,42px);
  --wrap:1240px;
  --fs-display:clamp(2.6rem,1.1rem + 5.1vw,5.3rem);
  --fs-h2:clamp(1.85rem,1.1rem + 2.4vw,3.1rem);
  --fs-h3:clamp(1.1rem,1rem + .42vw,1.34rem);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#11171A; --ground-2:#0B1013; --surface:#192125;
  --ink:#EDEAE2; --ink-2:#B4BCC1; --ink-3:#879198;
  --line:#263035; --line-strong:#3A474D;
  --accent:#83B7D3; --accent-deep:#A9CFE4; --accent-ink:#0B1013; --accent-soft:#1C2B35;
  --gold:#D7A83E; --night:#070B0D; --night-2:#101619;
}}
:root[data-theme="dark"]{
  --ground:#11171A; --ground-2:#0B1013; --surface:#192125;
  --ink:#EDEAE2; --ink-2:#B4BCC1; --ink-3:#879198;
  --line:#263035; --line-strong:#3A474D;
  --accent:#83B7D3; --accent-deep:#A9CFE4; --accent-ink:#0B1013; --accent-soft:#1C2B35;
  --gold:#D7A83E; --night:#070B0D; --night-2:#101619;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;line-height:1.04;margin:0;
  text-wrap:balance;letter-spacing:-.034em;font-variation-settings:var(--wide)}
h1 em,h2 em{font-style:normal;font-weight:300}
h3{letter-spacing:-.022em;font-variation-settings:'wdth' 104}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.24}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.6rem)}
.eyebrow{font-family:var(--sans);font-size:.71rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.75rem}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.lede{font-size:clamp(1.04rem,1rem + .36vw,1.22rem);color:var(--ink-2);max-width:60ch}
.pad{padding-block:clamp(3.4rem,6.5vw,6rem)}
.rule{border-top:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.94rem;
  padding:.88rem 1.55rem;border:1px solid transparent;text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* apparition */
.rev{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),
  transform .7s cubic-bezier(.22,.61,.36,1)}
.rev.in{opacity:1;transform:none}
/* les enfants d'une grille entrent l'un après l'autre */
.stag>*{opacity:0;transform:translateY(20px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 58ms)}
.stag.in>*{opacity:1;transform:none}
/* le filet des sur-titres se trace à l'entrée */
.eyebrow::after{transform-origin:left}
.rev .eyebrow::after,.stag .eyebrow::after{transform:scaleX(0);
  transition:transform .85s cubic-bezier(.22,.61,.36,1) .12s}
.rev.in .eyebrow::after,.stag.in .eyebrow::after{transform:scaleX(1)}
@keyframes paneIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* barre + header */
.topbar{background:var(--night);color:#DCD9D1;font-size:.79rem;position:relative;z-index:60}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;align-items:center;
  justify-content:space-between;padding-block:.55rem}
.topbar a{text-decoration:none}.topbar .tel{font-weight:700}
header{position:sticky;top:0;z-index:55;transition:background .3s ease,border-color .3s ease;
  background:transparent;border-bottom:1px solid transparent}
header.solid{background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom-color:var(--line)}
header .wrap{display:flex;align-items:center;gap:1.4rem;justify-content:space-between;padding-block:.95rem}
header .wrap>.btn-primary{white-space:nowrap}
.mark{text-decoration:none;line-height:1;color:#F2F0EA;transition:color .3s ease}
header.solid .mark{color:var(--ink)}
.mark b{font-family:var(--sans);font-weight:700;font-size:1.24rem;letter-spacing:-.012em;
  display:block;font-variation-settings:'wdth' 112}
.mark span{font-size:.59rem;letter-spacing:.13em;text-transform:uppercase;opacity:.65;
  display:block;margin-top:.32rem;white-space:nowrap}
nav{display:none;gap:1.25rem}
@media(min-width:1180px){nav{display:flex}}
nav a{font-size:.87rem;font-weight:500;text-decoration:none;color:#DCD9D1;padding-bottom:2px;
  white-space:nowrap;border-bottom:1px solid transparent;transition:color .3s ease}
header.solid nav a{color:var(--ink-2)}
nav a:hover{border-color:var(--accent)}
.burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;
  padding:0 9px;background:transparent;border:1px solid rgba(242,240,234,.42);cursor:pointer}
header.solid .burger{border-color:var(--line-strong)}
.burger span{display:block;height:1.5px;background:#F2F0EA;transition:transform .28s ease,opacity .2s ease}
header.solid .burger span{background:var(--ink)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.mnav{position:fixed;left:0;right:0;top:var(--hh,74px);z-index:54;background:var(--ground);
  border-bottom:1px solid var(--line);padding:1rem clamp(1.1rem,4vw,2.6rem) 1.6rem;
  display:grid;gap:.15rem;transform:translateY(-115%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 24px 40px -28px rgba(10,20,26,.5)}
.mnav.open{transform:none}
.mnav a{text-decoration:none;color:var(--ink);font-size:1.06rem;font-weight:600;
  letter-spacing:-.022em;padding:.7rem 0;border-bottom:1px solid var(--line)}
.mnav .btn{margin-top:1rem;justify-content:center;font-family:var(--sans);font-size:.94rem;border-bottom:0}
@media(min-width:1180px){.burger,.mnav{display:none}}
header .btn-primary{background:transparent;border-color:rgba(242,240,234,.45);color:#F2F0EA}
header .btn-primary:hover{background:#F2F0EA;color:var(--night);border-color:#F2F0EA}
header.solid .btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
header.solid .btn-primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}

/* ============ HERO 3D : « l'ouverture » ============ */
.hero-wrap{position:relative;height:250vh;background:var(--night);
  margin-top:calc(-1 * var(--pull,112px))}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night);
  perspective:1250px;perspective-origin:50% 48%}
.scene{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateY(var(--rx,0deg)) rotateX(var(--ry,0deg))}
.bg{position:absolute;inset:-5%;transform:translateZ(-330px) scale(1.32);
  transform-origin:50% 50%}
.bg img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,12,14,.58) 0%,rgba(8,12,14,.12) 34%,
    rgba(8,12,14,.22) 68%,rgba(8,12,14,.72) 100%)}
.frame{position:absolute;inset:0;transform-style:preserve-3d;
  transform:translateZ(calc(var(--fz,0) * 1px));will-change:transform}
.glaz{position:absolute;inset:0;transform-style:preserve-3d}
/* verre commun aux fixes et aux ouvrants */
.vtr{position:absolute;top:0;bottom:var(--seuil-h);transform-style:preserve-3d;
  background:linear-gradient(116deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.015) 22%,
    rgba(255,255,255,.10) 43%,rgba(255,255,255,0) 56%,rgba(255,255,255,.05) 100%);
  backdrop-filter:blur(.6px) brightness(1.03) saturate(1.05);
  -webkit-backdrop-filter:blur(.6px) brightness(1.03) saturate(1.05);
  will-change:transform}
/* montants : chaque vantail a son cadre, c'est ce qui rend le glissement lisible */
.vtr::before,.vtr::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(7px,.78vw,12px);background:var(--alu-v)}
.vtr::before{left:0}
.vtr::after{right:0;background:linear-gradient(270deg,#EEF1F2 0%,#C6CCD0 38%,#9AA1A7 56%,#DDE1E3 100%)}
/* les deux fixes, aux extrémités, ne bougent jamais */
.fixe{transform:translateZ(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.fixe-l{left:0;width:25%}
.fixe-r{right:0;width:25%}
/* les deux ouvrants, devant, coulissent chacun sur son rail et recouvrent le fixe */
.ouvrant{width:25%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
  -14px 0 34px rgba(0,0,0,.34),14px 0 34px rgba(0,0,0,.34)}
.ouv-l{left:25%;transform:translateX(calc(var(--open,0) * -100%)) translateZ(46px)}
.ouv-r{left:50%;transform:translateX(calc(var(--open,0) * 100%)) translateZ(46px)}
/* poignée bâton, sur le montant de rencontre */
.poignee{position:absolute;top:47%;width:clamp(8px,.85vw,13px);height:clamp(74px,11vh,124px);
  transform:translateY(-50%) translateZ(7px);border-radius:99px;background:var(--alu-v);
  box-shadow:0 3px 12px rgba(0,0,0,.5)}
.ouv-l .poignee{right:clamp(11px,1.25vw,20px)}
.ouv-r .poignee{left:clamp(11px,1.25vw,20px)}
/* seuil à deux rails : la signature du coulissant */
.seuil{position:absolute;left:0;right:0;bottom:0;height:var(--seuil-h);z-index:6;
  opacity:var(--seuilop,1);
  background:linear-gradient(180deg,#E9EDEE 0%,#C4CACE 20%,#8D949A 44%,#B7BEC2 60%,#DFE3E5 100%);
  box-shadow:0 -2px 18px rgba(0,0,0,.45)}
.seuil i{position:absolute;left:0;right:0;height:3px;
  background:linear-gradient(180deg,#565E63,#8E959B);box-shadow:0 1px 0 rgba(255,255,255,.55)}
.seuil i:first-child{top:26%}
.seuil i:last-child{top:60%}
/* dormant fixe */
.dormant i{position:absolute;background:var(--alu);box-shadow:0 0 30px rgba(0,0,0,.5)}
.dormant .t{top:0;left:0;right:0;height:clamp(14px,1.7vw,26px)}
.dormant .l{top:0;bottom:0;left:0;width:clamp(14px,1.7vw,26px);background:var(--alu-v)}
.dormant .r{top:0;bottom:0;right:0;width:clamp(14px,1.7vw,26px);background:var(--alu-v)}
.dormant{position:absolute;inset:0;transform:translateZ(52px);pointer-events:none}
.sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform:translateZ(48px)}
.sweep::before{content:"";position:absolute;top:-32%;bottom:-32%;width:24%;
  left:calc(var(--sweep,0) * 128% - 24%);transform:skewX(-15deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28) 46%,transparent)}
/* étiquette produit + cote d'ouverture chiffrée */
.ref{position:absolute;z-index:7;left:clamp(1.1rem,4vw,2.6rem);top:calc(var(--pull,112px) + 1.1rem);
  font-size:.65rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(245,243,237,.82);display:flex;align-items:center;gap:.6rem}
.ref::before{content:"";width:26px;height:1px;background:rgba(245,243,237,.55)}
.cote{position:absolute;z-index:7;left:50%;top:31%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  opacity:var(--coteop,0);transition:opacity .25s ease;pointer-events:none}
.cote-bar{position:relative;height:1px;width:calc(var(--open,0) * 50vw);
  background:rgba(245,243,237,.85)}
.cote-bar::before,.cote-bar::after{content:"";position:absolute;top:-5px;width:1px;height:11px;
  background:rgba(245,243,237,.85)}
.cote-bar::before{left:0}.cote-bar::after{right:0}
.cote b{font-size:.72rem;font-weight:700;letter-spacing:.13em;color:#FFF;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 12px rgba(6,10,12,.7)}
.cote span{font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(245,243,237,.72)}
@media(max-width:820px){.ref{display:none}.cote{top:26%}}
.scrim{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:linear-gradient(to top,rgba(6,10,12,.88) 0%,rgba(6,10,12,.52) 27%,rgba(6,10,12,0) 60%),
             linear-gradient(to right,rgba(6,10,12,.52) 0%,rgba(6,10,12,0) 54%)}
.hero-copy{position:absolute;z-index:6;left:0;right:0;bottom:clamp(4rem,11vh,8rem);
  color:#F5F3ED;opacity:var(--copy,1);transform:translateY(calc((1 - var(--copy,1)) * -22px));
  pointer-events:none}
.hero-copy .wrap{max-width:var(--wrap)}
.hero-copy .eyebrow{color:#CFE0EA}
.hero-copy .eyebrow::after{background:rgba(245,243,237,.32)}
.hero-copy h1{font-size:var(--fs-display);font-weight:400;text-shadow:0 2px 30px rgba(6,10,12,.45);letter-spacing:-.03em;
  margin:1.1rem 0 1.3rem;max-width:17ch;color:#FFF;line-height:1.0}
.hero-copy h1 em{font-weight:300;color:#A9CCE0}
.hero-copy p{color:#D8D5CD;max-width:38rem;font-size:1.06rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem;pointer-events:auto}
.hero-cta .btn-primary{background:#F5F3ED;color:var(--night);border-color:#F5F3ED}
.hero-cta .btn-primary:hover{background:#FFF;border-color:#FFF}
.hero-cta .btn-ghost{color:#F5F3ED;border-color:rgba(245,243,237,.5)}
.hero-cta .btn-ghost:hover{background:rgba(245,243,237,.14);border-color:#F5F3ED}
.hint{position:absolute;z-index:6;left:50%;bottom:1.6rem;transform:translateX(-50%);
  color:rgba(245,243,237,.7);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
  opacity:var(--hint,1);display:flex;flex-direction:column;align-items:center;gap:.5rem}
.hint b{display:block;width:1px;height:34px;background:linear-gradient(180deg,
  rgba(245,243,237,.7),rgba(245,243,237,0));font-size:0}
@media(max-width:820px){
  .hero-copy h1{font-size:clamp(2.4rem,9.4vw,3.4rem)}
  .hero-copy{bottom:clamp(2.4rem,7vh,5rem)}
  .hero-copy p{font-size:.98rem}
  .scrim{background:linear-gradient(to top,rgba(6,10,12,.93) 0%,rgba(6,10,12,.72) 32%,
    rgba(6,10,12,.24) 58%,rgba(6,10,12,0) 80%)}
  .mark b{font-size:1.06rem}
  .mark span{font-size:.58rem;letter-spacing:.14em}
  header .wrap>.btn-primary{display:none}
  .topbar .wrap>span:first-child{display:none}
  .topbar .wrap{justify-content:flex-end}
  .hint{display:none}
}

/* ============ bandeau preuves ============ */
.proof{background:var(--night-2);color:#E6E3DB;position:relative;z-index:2}
.proof ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.proof li{padding:1.35rem clamp(1.1rem,3vw,2rem);border-left:1px solid rgba(230,227,219,.14)}
.proof li:first-child{border-left:0}
.proof b{display:block;font-size:1.3rem;font-weight:600;letter-spacing:-.028em;
  font-variation-settings:'wdth' 110}
.proof span{font-size:.82rem;color:#98A2A8;display:block;margin-top:.18rem}

/* ============ manifeste ============ */
.mani{display:grid;gap:2.6rem;align-items:center}
@media(min-width:940px){.mani{grid-template-columns:1.05fr .95fr;gap:4.5rem}}
.mani h2{font-weight:500;font-size:clamp(2rem,1.1rem + 2.9vw,3.6rem);letter-spacing:-.034em;
  line-height:1.03;margin:1.1rem 0 1.3rem}
.mani h2 em{color:var(--accent);font-weight:300}
.mani-txt p+p{margin-top:1rem}
.mani-fig{position:relative;border:1px solid var(--line-strong);
  box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--line)}
.mani-fig img{aspect-ratio:3/4;object-fit:cover;width:100%}
.mani-fig figcaption{position:absolute;left:0;bottom:0;right:0;padding:1rem 1.1rem;
  background:linear-gradient(0deg,rgba(10,14,16,.86),rgba(10,14,16,0));color:#F0EEE8;font-size:.84rem}

/* ============ prestations ============ */
.grid-serv{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  perspective:1100px}
@media(min-width:640px){.grid-serv{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid-serv{grid-template-columns:repeat(3,1fr)}}
.serv{background:var(--surface);text-decoration:none;display:flex;flex-direction:column;
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.22,.61,.36,1),
  background .25s ease,box-shadow .35s ease;position:relative}
.serv:hover{background:var(--ground);z-index:3;box-shadow:0 26px 48px -26px rgba(10,20,26,.45)}
.serv .ph{aspect-ratio:4/3;overflow:hidden;background:var(--ground-2);position:relative}
.serv .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.serv:hover .ph img{transform:scale(1.06)}
.serv .ph::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:linear-gradient(120deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%)}
.serv:hover .ph::after{opacity:1}
.serv .txt{padding:1.3rem 1.4rem 1.55rem;display:flex;flex-direction:column;gap:.5rem;flex:1;
  transform:translateZ(24px)}
.serv h3{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.serv h3 em{font-family:var(--sans);font-style:normal;font-size:.68rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);flex:none}
.serv p{font-size:.91rem;color:var(--ink-2)}
.serv .go{margin-top:auto;padding-top:.75rem;font-size:.8rem;font-weight:600;color:var(--accent);
  letter-spacing:.03em}

/* ============ PERGOLA 3D ============ */
.perg{background:var(--night);color:var(--night-ink);position:relative;overflow:hidden}
.perg .eyebrow{color:#8FC0D8}.perg .eyebrow::after{background:rgba(237,234,226,.24)}
.perg h2{color:#FFF;font-weight:500;letter-spacing:-.034em;margin:1rem 0 1.1rem}
.perg .lede{color:var(--night-ink-2)}
.perg-grid{display:grid;gap:2.4rem;align-items:center}
@media(min-width:960px){.perg-grid{grid-template-columns:.88fr 1.12fr;gap:3.8rem}}
.louvre{position:relative;aspect-ratio:16/12;overflow:hidden;
  border:1px solid rgba(237,234,226,.3);perspective:1150px;perspective-origin:50% 52%;
  background:
    radial-gradient(46% 36% at 78% 9%,rgba(255,242,208,.95),rgba(255,242,208,0) 64%),
    linear-gradient(180deg,#2B7EBC 0%,#5FA8D3 24%,#A5D0E9 48%,#DCE4DC 66%,#AFBCA4 67%,
      #86937A 76%,#5F6B52 100%)}
.pgw{position:absolute;left:50%;top:44%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(var(--camx,-15deg)) rotateY(var(--camy,-27deg));
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pgw.free{transition:none}
.pgw>*{position:absolute;left:0;top:0;transform-style:preserve-3d}
/* la terrasse, et l'ombre des lames qui s'y projette */
.pg-ground{background:linear-gradient(180deg,#8B7862 0%,#6B5947 60%,#5B4C3D 100%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.55)}
.pg-shadow{position:absolute;background-repeat:repeat;filter:blur(2px)}
/* les lames */
.pg-lame{background:linear-gradient(180deg,var(--c1,#6A757C) 0%,var(--c2,#3D474E) 32%,
    var(--c3,#232B31) 64%,var(--c4,#4A555C) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 14px rgba(0,0,0,.45);
  will-change:transform}
/* poutres et montants */
.pg-beam,.pg-post{background:linear-gradient(180deg,var(--b1,#7B868D) 0%,var(--b2,#454F56) 34%,
    var(--b3,#262E34) 72%,var(--b4,#525C63) 100%);
  box-shadow:0 0 22px rgba(0,0,0,.5)}
.pg-post{background:linear-gradient(90deg,var(--b1,#7B868D) 0%,var(--b2,#454F56) 40%,
    var(--b3,#262E34) 78%,var(--b4,#525C63) 100%)}
.pg-post.dark{filter:brightness(.72)}
.pg-beam.dark{filter:brightness(.78)}
/* store zip latéral */
.pg-zip{background:repeating-linear-gradient(0deg,rgba(20,26,30,.68) 0 2px,
    rgba(20,26,30,.38) 2px 4px);opacity:0;transition:opacity .5s ease;
  box-shadow:0 0 26px rgba(0,0,0,.45)}
.louvre.zip .pg-zip{opacity:1}
/* bandeau LED sous la poutre avant */
.pg-led{background:#FFE2B0;opacity:0;transition:opacity .45s ease;
  box-shadow:0 0 22px 6px rgba(255,198,118,.85),0 0 60px 18px rgba(255,190,100,.45)}
.louvre.led .pg-led{opacity:1}
.louvre-ral{position:absolute;top:.75rem;left:.9rem;z-index:5;font-size:.63rem;font-weight:700;
  letter-spacing:.15em;color:#EDEAE2;background:rgba(6,10,12,.58);padding:.32rem .58rem;
  font-variant-numeric:tabular-nums}
.louvre-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.85rem 1.1rem;
  background:linear-gradient(0deg,rgba(6,10,12,.9),rgba(6,10,12,0));
  font-size:.82rem;color:#DDE3E6;display:flex;justify-content:space-between;gap:1rem}
.louvre-cap b{font-variant-numeric:tabular-nums;color:#FFF}
.slider{margin-top:1.5rem}
.slider label{font-size:.71rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--night-ink-2);display:flex;justify-content:space-between}
.slider input{width:100%;margin-top:.9rem;background:transparent;-webkit-appearance:none;
  appearance:none;height:28px;cursor:pointer}
.slider input::-webkit-slider-runnable-track{height:3px;background:rgba(237,234,226,.26)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border:0;
  border-radius:50%;background:#8FC0D8;margin-top:-11.5px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.slider input::-moz-range-track{height:3px;background:rgba(237,234,226,.26)}
.slider input::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#8FC0D8}
.slider input:focus-visible::-webkit-slider-thumb{outline:2px solid #FFF;outline-offset:2px}
.perg-list{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid rgba(237,234,226,.16)}
.perg-list li{padding:.95rem 0;border-bottom:1px solid rgba(237,234,226,.16);
  display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline;font-size:.94rem}
.perg-list dfn{font-style:normal;color:#8FC0D8;font-weight:700;font-size:.9rem;
  letter-spacing:-.008em}
.perg-list p{color:var(--night-ink-2)}

/* ============ en-tête de section ============ */
.shead{display:grid;gap:1rem;margin-bottom:2.6rem}
@media(min-width:920px){.shead{grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  align-items:end;gap:2.8rem}}
.shead h2{margin-top:.75rem;font-weight:600;letter-spacing:-.034em}
.shead h2 em{color:var(--accent);font-weight:300}

/* ============ aides ============ */
.aides{background:var(--surface)}
.aides-grid{display:grid;gap:2.4rem}
@media(min-width:940px){.aides-grid{grid-template-columns:1.12fr .88fr;gap:3.6rem}}
.aide-list{list-style:none;margin:1.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.aide-list li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.05rem 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.aide-list dfn{font-style:normal;font-weight:700;font-size:.93rem;color:var(--accent);
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.012em}
.aide-list p{font-size:.93rem;color:var(--ink-2)}.aide-list b{color:var(--ink);font-weight:600}
.card-rge{border:1px solid var(--line-strong);background:var(--ground);
  box-shadow:0 0 0 6px var(--surface),0 0 0 7px var(--line);padding:2rem}
.card-rge ul{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.6rem;font-size:.93rem}
.badges{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.4rem}
.badge{font-size:.69rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:.35rem .62rem;color:var(--ink-2)}

/* ============ méthode ============ */
.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:780px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--ground);padding:1.8rem 1.45rem 2rem;display:flex;flex-direction:column;gap:.6rem}
.step i{font-style:normal;font-size:2.5rem;font-weight:300;color:var(--accent);line-height:1;
  font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 118;letter-spacing:-.04em}
.step p{font-size:.91rem;color:var(--ink-2)}

/* ============ réalisations ============ */
.gal{display:grid;gap:1.15rem;perspective:1200px}
@media(min-width:660px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.gal{grid-template-columns:repeat(3,1fr)}}
.shot{border:1px solid var(--line);background:var(--surface);overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease;transform-style:preserve-3d}
.shot:hover{transform:translateY(-6px) translateZ(28px);
  box-shadow:0 30px 54px -30px rgba(10,20,26,.5);z-index:3}
.shot .ph{aspect-ratio:4/3;overflow:hidden;background:var(--ground-2)}
.shot .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.11);
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.shot:hover .ph img{transform:scale(1.16)!important}
.shot figcaption{padding:.9rem 1.05rem 1.05rem;display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;font-size:.87rem}
.shot figcaption b{font-weight:600}
.shot figcaption span{color:var(--ink-3);font-size:.79rem;text-align:right}
.disclaimer{font-size:.8rem;color:var(--ink-3);border-left:2px solid var(--accent);
  padding-left:.85rem;margin-top:1.4rem}

/* ============ avis ============ */
.avis{background:var(--ground-2)}
.quotes{display:grid;gap:1.15rem}
@media(min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{background:var(--surface);border:1px solid var(--line);padding:1.6rem 1.6rem 1.4rem;
  display:flex;flex-direction:column;gap:.85rem}
.stars{color:var(--gold);font-size:.9rem;letter-spacing:.14em}
.quote blockquote{margin:0;font-size:1.02rem;line-height:1.5;letter-spacing:-.012em;
  color:var(--ink)}
.quote cite{font-style:normal;font-size:.82rem;color:var(--ink-3);margin-top:auto}
.tag-demo{align-self:flex-start;font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);border:1px dashed var(--line-strong);padding:.2rem .45rem}

/* ============ zone ============ */
.villes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.7rem}
.villes a{text-decoration:none;font-size:.86rem;padding:.44rem .8rem;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-2);transition:border-color .2s ease,color .2s ease}
.villes a:hover{border-color:var(--accent);color:var(--accent)}

/* ============ faq ============ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.6rem 1.2rem 0;position:relative;
  font-size:1.08rem;font-weight:600;letter-spacing:-.024em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-weight:400;font-size:1.45rem;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.35rem;color:var(--ink-2);max-width:68ch;font-size:.96rem}

/* ============ devis ============ */
.devis{background:var(--night);color:#E6E3DB}
.devis h2,.devis h3{color:#FFF}
.devis h2{font-weight:500;letter-spacing:-.034em;margin-top:.8rem}
.devis .eyebrow{color:#8FC0D8}.devis .eyebrow::after{background:rgba(230,227,219,.24)}
.devis-grid{display:grid;gap:2.8rem}
@media(min-width:980px){.devis-grid{grid-template-columns:1fr 1fr;gap:4.2rem}}
.form{display:grid;gap:.9rem;margin-top:1.8rem}
.row2{display:grid;gap:.9rem}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.35rem}
.field label{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#939DA3}
.field input,.field select,.field textarea{font:inherit;font-size:.95rem;color:#FFF;
  background:rgba(255,255,255,.05);border:1px solid rgba(230,227,219,.22);padding:.74rem .85rem}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#8FC0D8;outline:none;
  background:rgba(255,255,255,.09)}
.field select option{background:#101619;color:#FFF}
.form .btn-primary{background:#8FC0D8;color:#0B1013;border-color:#8FC0D8;justify-content:center}
.form .btn-primary:hover{background:#B6D8E9;border-color:#B6D8E9}
.note{font-size:.79rem;color:#8C969C}
.coord{margin-top:1.7rem;border-top:1px solid rgba(230,227,219,.18)}
.coord div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.95rem 0;
  border-bottom:1px solid rgba(230,227,219,.18);align-items:baseline}
.coord dt{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#939DA3}
.coord dd{margin:0;font-size:.96rem}.coord dd a{text-decoration:none;color:#FFF}
.coord .big{font-size:1.52rem;font-weight:700;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 110}

/* ============ footer ============ */
footer{background:var(--ground-2);font-size:.89rem}
.fgrid{display:grid;gap:2rem;padding-block:3.2rem}
@media(min-width:780px){.fgrid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.fgrid h4{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem}
.fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fgrid a{text-decoration:none;color:var(--ink-2)}.fgrid a:hover{color:var(--accent)}
.fgrid .mark{color:var(--ink)}
.fbot{border-top:1px solid var(--line);padding-block:1.25rem;display:flex;flex-wrap:wrap;
  gap:.6rem 1.5rem;justify-content:space-between;color:var(--ink-3);font-size:.81rem}
section[id]{scroll-margin-top:90px}

/* ============ CONCESSIONNAIRE TRYBA ============ */
.tryba{background:var(--surface)}
.tryba-grid{display:grid;gap:2.6rem;align-items:center}
@media(min-width:940px){.tryba-grid{grid-template-columns:.82fr 1.18fr;gap:3.8rem}}
.tryba-plate{border:1px solid var(--line-strong);background:#FFF;padding:2.2rem 2rem;
  box-shadow:0 0 0 6px var(--ground),0 0 0 7px var(--line);text-align:center}
.tryba-logo{display:block;width:100%;max-width:230px;height:auto;margin:0 auto;color:#0072BA}
.tryba-sm{max-width:132px}
.tryba-plate p{margin-top:1.3rem;font-size:.68rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:#1B3F55;border-top:1px solid #E2E0D8;padding-top:1.1rem}
.shops{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
.shops li{background:var(--surface);padding:1.1rem 1.25rem}
.shops b{display:block;font-size:.94rem;font-weight:700;letter-spacing:-.018em;margin-bottom:.25rem}
.shops span{font-size:.86rem;color:var(--ink-2);line-height:1.5}
.tryba-pts{list-style:none;margin:1.9rem 0 0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(min-width:660px){.tryba-pts{grid-template-columns:repeat(2,1fr)}}
.tryba-pts li{background:var(--surface);padding:1.15rem 1.25rem}
.tryba-pts b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.tryba-pts span{font-size:.92rem;color:var(--ink-2)}

/* ============ COMPARATEUR DE VITRAGE ============ */
.vitr-grid{display:grid;gap:2.4rem}
@media(min-width:960px){.vitr-grid{grid-template-columns:1.05fr .95fr;gap:3.6rem}}
.vtabs{display:flex;gap:0;border:1px solid var(--line-strong);margin-bottom:1.8rem}
.vtabs button{flex:1;font:inherit;font-size:.87rem;font-weight:600;letter-spacing:-.01em;
  padding:.82rem .6rem;background:transparent;color:var(--ink-2);border:0;cursor:pointer;
  border-left:1px solid var(--line-strong);transition:background .2s ease,color .2s ease}
.vtabs button:first-child{border-left:0}
.vtabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.vpanel{border:1px solid var(--line);background:var(--surface);padding:1.8rem}
.vcoupe{display:block;width:100%;height:auto;margin-bottom:1.5rem;color:var(--ink-3)}
.vstat{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline;
  padding:.95rem 0;border-top:1px solid var(--line)}
.vstat dt{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.vstat dd{margin:0;font-size:.95rem;color:var(--ink-2)}
.vstat dd b{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 110}
.vbar{height:9px;background:var(--ground-2);border:1px solid var(--line);margin-top:.55rem;
  position:relative;overflow:hidden}
.vbar i{position:absolute;inset:0 auto 0 0;width:var(--w,10%);
  background:linear-gradient(90deg,#2C5C79,#C0673B);
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.vnote{font-size:.79rem;color:var(--ink-3);margin-top:1.2rem}

/* ============ VOLET ROULANT ============ */
.vr{background:var(--night-2);color:var(--night-ink)}
.vr .eyebrow{color:#8FC0D8}.vr .eyebrow::after{background:rgba(237,234,226,.24)}
.vr h2{color:#FFF;font-weight:500;letter-spacing:-.034em;margin:1rem 0 1.1rem}
.vr .lede{color:var(--night-ink-2)}
.vr-grid{display:grid;gap:2.4rem;align-items:center}
@media(min-width:960px){.vr-grid{grid-template-columns:1.12fr .88fr;gap:3.8rem}}
.rollo{position:relative;aspect-ratio:4/5;background:var(--night);overflow:hidden;
  border:1px solid rgba(237,234,226,.3)}
.rollo-view{position:absolute;inset:0}
.rollo-view img{width:100%;height:100%;object-fit:cover}
.rollo-tablier{position:absolute;left:0;right:0;top:0;height:calc(var(--drop,0) * 1%);
  background:repeating-linear-gradient(180deg,#EBEDEE 0px,#D6DADC 6px,#A9AFB4 11px,#C6CBCE 13px);
  box-shadow:0 10px 26px rgba(0,0,0,.55);will-change:height}
.rollo-tablier::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;
  background:linear-gradient(180deg,#8E969B,#5B6367)}
.rollo-solar{position:absolute;z-index:4;right:7%;top:1.1%;width:20%;height:4.6%;
  background:linear-gradient(152deg,#1D3E62 0%,#122740 46%,#274C71 100%);
  border:1px solid rgba(255,255,255,.4);box-shadow:0 3px 12px rgba(0,0,0,.55);
  opacity:0;transform:translateY(-7px);transition:opacity .42s ease,transform .42s ease}
.rollo-solar::after{content:"";position:absolute;inset:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.15) 0 1px,transparent 1px 8px)}
.rollo.solaire .rollo-solar{opacity:1;transform:none}
.rollo-coffre{position:absolute;left:0;right:0;top:0;height:7.5%;z-index:3;
  background:linear-gradient(180deg,#EDEFF0 0%,#C3C9CD 40%,#959CA1 72%,#D9DDDF 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.5)}
.rollo-frame i{position:absolute;background:var(--alu-v);z-index:2}
.rollo-frame .l{top:0;bottom:0;left:0;width:5%}
.rollo-frame .r{top:0;bottom:0;right:0;width:5%}
.rollo-frame .b{bottom:0;left:0;right:0;height:4%;background:var(--alu)}
.rollo-cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:.85rem 1.1rem;
  background:linear-gradient(0deg,rgba(6,10,12,.9),rgba(6,10,12,0));
  font-size:.82rem;color:#DDE3E6;display:flex;justify-content:space-between;gap:1rem}
.rollo-cap b{font-variant-numeric:tabular-nums;color:#FFF}

/* --- options et teintes des configurateurs --- */
.opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.opt{font:inherit;font-size:.77rem;font-weight:600;letter-spacing:.01em;padding:.52rem .9rem;
  background:transparent;color:var(--night-ink-2);border:1px solid rgba(237,234,226,.28);
  cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.opt:hover{border-color:rgba(237,234,226,.6);color:#FFF}
.opt i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.4;
  transition:opacity .2s ease}
.opt[aria-pressed="true"]{background:#8FC0D8;color:#0B1013;border-color:#8FC0D8}
.opt[aria-pressed="true"] i{opacity:1}
.rals{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:1.4rem}
.rals>span{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--night-ink-2);margin-right:.35rem}
.ral{width:32px;height:32px;padding:0;border:1px solid rgba(237,234,226,.4);cursor:pointer;
  transition:transform .18s ease}
.ral:hover{transform:translateY(-2px)}
.ral[aria-pressed="true"]{outline:2px solid #8FC0D8;outline-offset:3px}
.louvre-ral{position:absolute;top:.75rem;left:.9rem;z-index:5;font-size:.63rem;font-weight:700;
  letter-spacing:.15em;color:#EDEAE2;background:rgba(6,10,12,.58);padding:.32rem .58rem;
  font-variant-numeric:tabular-nums}
.leds{position:absolute;left:3.4%;right:3.4%;top:5.5%;height:34%;z-index:4;pointer-events:none;
  opacity:0;transition:opacity .45s ease}
/* les bandeaux eux-mêmes, sous la poutre haute */
.leds::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;
  background:repeating-linear-gradient(90deg,transparent 0 5%,#FFE2B0 5% 29%,transparent 29% 34%);
  box-shadow:0 6px 26px 7px rgba(255,192,104,.6),0 0 10px 2px rgba(255,226,176,.9)}
/* la lumière qui retombe sur les lames */
.leds::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgba(255,198,118,.42) 0%,rgba(255,198,118,.14) 44%,transparent 78%)}
.louvre.led .leds{opacity:1}
.zipscreen{position:absolute;top:5.5%;bottom:0;right:3.4%;width:27%;z-index:2;
  transform:translateY(-102%);transition:transform .55s cubic-bezier(.22,.61,.36,1);
  box-shadow:-8px 0 22px rgba(0,0,0,.45);
  background:repeating-linear-gradient(0deg,rgba(18,24,28,.62) 0 2px,rgba(18,24,28,.34) 2px 4px)}
.louvre.zip .zipscreen{transform:none}
.rollo-tablier.ajour::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,238,198,.9) 0 1.7px,transparent 1.8px);
  background-size:15px 13px;background-position:3px 7px}

/* ============ PARTENAIRES ============ */
.parts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:520px){.parts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.parts{grid-template-columns:repeat(5,1fr)}}
.parts figure{margin:0;background:#FFF;display:flex;align-items:center;justify-content:center;
  padding:1.3rem 1rem;min-height:98px}
.parts img{max-width:145px;height:auto}
/* ================= MOBILE ================= */
@media(max-width:820px){
  /* le hero reste haut sans imposer trois écrans de défilement */
  .hero-wrap{height:190svh}
  .wrap{padding-inline:max(1.15rem,env(safe-area-inset-left)) max(1.15rem,env(safe-area-inset-right))}
  header .wrap{padding-block:.7rem}
  .topbar{font-size:.74rem}
  section[id]{scroll-margin-top:74px}
  .pad{padding-block:2.9rem}
  .shead{margin-bottom:1.9rem}
  /* le menu ne dépasse jamais l'écran et défile s'il le faut */
  .mnav{max-height:calc(100svh - var(--hh,74px));overflow-y:auto;
    padding-bottom:max(1.6rem,env(safe-area-inset-bottom))}
  .mnav a{padding:.82rem 0;font-size:1.02rem}
  body.locked{overflow:hidden}
  .mscrim{position:fixed;inset:0;z-index:53;background:rgba(8,12,14,.5);opacity:0;
    pointer-events:none;transition:opacity .3s ease}
  .mscrim.on{opacity:1;pointer-events:auto}
  /* cibles tactiles */
  .btn{padding:.95rem 1.4rem}
  .opt{padding:.65rem 1rem;font-size:.8rem}
  .ral{width:40px;height:40px}
  .villes a{padding:.55rem .85rem;font-size:.85rem}
  .faq summary{padding:1.1rem 2.4rem 1.1rem 0;font-size:1.02rem}
  .field input,.field select,.field textarea{font-size:16px}   /* évite le zoom iOS */
  .vtabs button{font-size:.8rem;padding:.8rem .35rem;line-height:1.25}
  .vpanel{padding:1.25rem}
  .vstat{grid-template-columns:1fr;gap:.35rem}
  .vstat dd b{font-size:1.7rem}
  .card-rge{padding:1.5rem;box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line)}
  .mani-fig{box-shadow:0 0 0 4px var(--surface),0 0 0 5px var(--line)}
  .tryba-plate{padding:1.6rem 1.3rem;box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--line)}
  .coord div{grid-template-columns:1fr;gap:.2rem}
  .proof li{padding:1rem 1.15rem;border-left:0;border-top:1px solid rgba(230,227,219,.14)}
  .proof li:first-child{border-top:0}
  .louvre-cap,.rollo-cap{font-size:.75rem;padding:.7rem .8rem}
  .louvre-ral{font-size:.58rem}
  .ref{display:none}
  .disclaimer{font-size:.78rem}
}
/* sous 700 px, le coulissant passe à 2 vantaux : 1 fixe + 1 ouvrant, bien plus lisible */
@media(max-width:700px){
  .fixe-l{width:50%}
  .fixe-r,.ouv-r{display:none}
  .ouv-l{left:50%;width:50%;transform:translateX(calc(var(--open,0) * -100%)) translateZ(46px)}
  .ouv-l .poignee{right:auto;left:clamp(12px,3.4vw,20px)}
  /* la poignée remonte dans la zone claire, au-dessus du voile */
  .poignee{top:30%;height:clamp(68px,10vh,108px);width:clamp(9px,2.5vw,13px)}
  .cote-bar{width:calc(var(--open,0) * 50vw)}
  .serv .txt{padding:1.15rem 1.2rem 1.35rem}
  .step{padding:1.5rem 1.25rem 1.6rem}
  .quote{padding:1.35rem}
}
@media(max-width:520px){
  .parts{grid-template-columns:repeat(2,1fr)}
  .parts figure{min-height:82px;padding:1rem .8rem}
  .parts img,.tryba-sm{max-width:112px}
  .gal{gap:.9rem}
  .villes{gap:.35rem}
  .fgrid{gap:1.7rem;padding-block:2.4rem}
  .louvre{aspect-ratio:16/12}
  .rollo{aspect-ratio:1/1.15}
}
@media(hover:none){
  /* pas de survol au doigt : les cartes restent nettes et à plat */
  .serv:hover{background:var(--surface);box-shadow:none}
  .serv:hover .ph img{transform:none}
  .shot:hover{transform:none;box-shadow:none}
  .shot:hover .ph img{transform:scale(1.11)!important}
  .serv .go{color:var(--accent)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
  .rev{opacity:1;transform:none}
  .ouv-l{transform:translateX(-100%) translateZ(46px)}
  .ouv-r{transform:translateX(100%) translateZ(46px)}
  .cote{display:none}
  .stag>*{opacity:1;transform:none}
  .rev .eyebrow::after,.stag .eyebrow::after{transform:scaleX(1)}
  .shot .ph img{transform:scale(1.11)}
  .hero-copy{opacity:1;transform:none}
  .hero-wrap{height:auto}.stage{position:relative}
}

/* ── Accès SAV rapide (en-tête) + bascule Devis/SAV du formulaire ── */
header .hdr-sav{margin-right:.5rem;font-size:.86rem;padding-top:.5rem;padding-bottom:.5rem}
header.solid .hdr-sav{background:transparent;color:var(--accent);border-color:var(--accent)}
@media(max-width:960px){header .hdr-sav{display:none}}
.mnav-sav{display:block;margin-top:.9rem;color:var(--accent);font-weight:600;font-size:.98rem}
.type-choix{display:flex;gap:.5rem;margin-bottom:1.1rem}
.type-choix .tc{flex:1;padding:.72rem .6rem;border:1px solid rgba(242,240,234,.28);border-radius:10px;
  background:transparent;color:#E6E3DB;font-weight:600;font-size:.95rem;cursor:pointer;transition:border-color .15s,background .15s}
.type-choix .tc:hover{border-color:rgba(242,240,234,.6)}
.type-choix .tc[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* Champ photos (facultatif) du formulaire de demande */
.form .opt-note{color:#8A949A;font-weight:400;font-size:.85em;border:0;padding:0;background:none}
.form input[type=file]{width:100%;color:#C7CDD1;font-size:.9rem;padding:.55rem 0}
.form input[type=file]::file-selector-button{margin-right:.8rem;padding:.55rem .9rem;border-radius:8px;
  border:1px solid rgba(242,240,234,.28);background:transparent;color:#E6E3DB;font-weight:600;cursor:pointer}
.form input[type=file]::file-selector-button:hover{border-color:rgba(242,240,234,.6)}
.form .champ-aide{display:block;margin-top:.4rem;color:#8A949A;font-size:.82rem;line-height:1.4}
/* Page rideau de verre : galerie d'illustration */
.rv-fig{margin:0 0 1rem;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.rv-fig img{display:block;width:100%;height:auto}
.rv-note{color:var(--ink-3);font-size:.8rem;margin-top:.3rem}
/* Aperçu de la vue « chez moi » jointe à la demande depuis un configurateur */
.vue-jointe{display:flex;gap:.9rem;align-items:center;margin-bottom:1.1rem;padding:.7rem;
  border:1px solid rgba(31,122,77,.5);border-radius:12px;background:rgba(31,122,77,.12)}
.vue-jointe img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:none}
.vue-jointe b{display:block;color:#E6E3DB;font-size:.92rem}
.vue-jointe span{display:block;color:#9FB4AC;font-size:.8rem;margin-top:.15rem}
.vue-jointe .vue-retirer{margin-top:.35rem;background:none;border:0;color:#8FC0D8;font-size:.8rem;cursor:pointer;padding:0;text-decoration:underline}
/* Sélecteur de photos en français (remplace le "Choose Files" natif) */
.filepick{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.filepick-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.6rem 1rem;
  border:1px solid rgba(242,240,234,.3);border-radius:9px;background:transparent;
  color:#E6E3DB;font-weight:600;font-size:.9rem;cursor:pointer;transition:border-color .15s}
.filepick-btn:hover{border-color:rgba(242,240,234,.65)}
.filepick-nom{color:#8A949A;font-size:.85rem}

/* ================= PAGES INTÉRIEURES ================= */
.phero{position:relative;background:var(--night);color:#F2F0EA;
  margin-top:calc(-1 * var(--pull,112px));padding-top:var(--pull,112px)}
.phero-media{position:absolute;inset:0;overflow:hidden}
.phero-media img{width:100%;height:100%;object-fit:cover}
.phero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(6,10,12,.94) 0%,rgba(6,10,12,.72) 42%,rgba(6,10,12,.42) 100%),
             linear-gradient(to right,rgba(6,10,12,.62),rgba(6,10,12,0) 62%)}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5.6rem)}
.phero .eyebrow{color:#A9CCE0}
.phero .eyebrow::after{background:rgba(242,240,234,.3)}
.phero h1{font-size:clamp(2.1rem,1.1rem + 3.4vw,3.9rem);font-weight:400;color:#FFF;
  margin:1rem 0 1.1rem;max-width:22ch}
.phero h1 em{font-weight:300;color:#A9CCE0}
.phero .lede{color:#D5D2CA;max-width:56ch}
.phero .hero-cta{margin-top:1.7rem}
.crumb{font-size:.78rem;color:var(--ink-3);padding-block:.9rem;border-bottom:1px solid var(--line)}
.crumb a{text-decoration:none;color:var(--ink-3)}
.crumb a:hover{color:var(--accent)}
.crumb span{margin-inline:.45rem;opacity:.55}
.tblwrap{overflow-x:auto;border:1px solid var(--line);background:var(--surface)}
.tbl{width:100%;border-collapse:collapse;font-size:.92rem;min-width:600px}
.tbl th,.tbl td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--line);
  vertical-align:top}
.tbl thead th{background:var(--ground-2);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.tbl tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.tbl td{color:var(--ink-2)}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.related{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
@media(min-width:700px){.related{grid-template-columns:repeat(3,1fr)}}
.related a{background:var(--surface);padding:1.35rem 1.4rem;text-decoration:none;display:block;
  transition:background .2s ease}
.related a:hover{background:var(--ground)}
.related b{display:block;font-size:1.05rem;font-weight:600;letter-spacing:-.022em;margin-bottom:.3rem}
.related span{font-size:.86rem;color:var(--ink-3)}
.villebox{border:1px solid var(--line-strong);background:var(--surface);padding:1.8rem;
  box-shadow:0 0 0 6px var(--ground),0 0 0 7px var(--line)}
.villebox dl{margin:1.2rem 0 0;border-top:1px solid var(--line)}
.villebox dl div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.8rem 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.villebox dt{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.villebox dd{margin:0;font-size:.92rem;color:var(--ink-2)}
.gamme{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.8rem}
@media(min-width:620px){.gamme{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.gamme{grid-template-columns:repeat(4,1fr)}}
.gamme a{background:var(--surface);padding:1.1rem 1.2rem;text-decoration:none;font-size:.93rem;
  font-weight:600;letter-spacing:-.015em;color:var(--ink);transition:background .2s ease}
.gamme a:hover{background:var(--ground);color:var(--accent)}
@media(max-width:820px){
  .phero h1{font-size:clamp(1.9rem,7.4vw,2.6rem)}
  .villebox{padding:1.4rem;box-shadow:0 0 0 4px var(--ground),0 0 0 5px var(--line)}
}
/* listes de définitions des pages produit : colonne de termes alignée */
@media(min-width:900px){
  .aide-list.wide li{grid-template-columns:11.5rem 1fr;gap:1.6rem}
}
.aide-list.wide p{max-width:74ch}
.aide-list.wide dfn{white-space:normal}
/* bande de fabricants des pages produit : elle s'adapte au nombre de logos */
@media(min-width:620px){
  .parts.few{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
/* pictogrammes de menuiserie */
.pictobox{padding:1.5rem 1.4rem .2rem;color:var(--accent)}
.picto{width:100%;max-width:118px;height:auto;display:block}
.serv:hover .picto{color:var(--accent-deep)}
/* jauges de performance du comparateur */
.jauges{display:grid;gap:.55rem;margin-top:.2rem}
.jauge{display:grid;grid-template-columns:5.6rem 1fr;gap:.9rem;align-items:center}
.jauge span{font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3)}
.pts{display:flex;gap:.3rem}
.pts i{width:100%;max-width:34px;height:6px;background:var(--line);
  transition:background .35s ease}
.pts i.on{background:var(--accent)}
.vpan[hidden]{display:none}
/* échantillons de vitrages décoratifs */
.verres{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:620px){.verres{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.verres{grid-template-columns:repeat(3,1fr)}}
.verrebox{background:var(--surface);display:flex;flex-direction:column;
  transition:background .2s ease}
.verrebox:hover{background:var(--ground)}
.verrevue{background:var(--ground-2);color:var(--ink-3)}
.verre{display:block;width:100%;height:auto}
.verrebox .txt{padding:1.2rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.verrebox p{font-size:.91rem;color:var(--ink-2)}
/* ---- le logo : monogramme vectoriel + nom ---- */
.mark{display:flex;align-items:center;gap:.72rem;text-decoration:none}
.mono{height:34px;width:auto;flex:none;display:block}
/* .mark span de styles.css frappe aussi .noms : on neutralise l'héritage */
.mark .noms{display:flex;flex-direction:column;line-height:1;opacity:1;margin-top:0;
  font-size:1rem;letter-spacing:normal;text-transform:none;white-space:normal}
.mark b{font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  white-space:nowrap;font-variation-settings:'wdth' 100}
.mark .villes-mark{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.62;margin-top:5px;white-space:nowrap}
@media(max-width:820px){
  .mono{height:28px}
  .mark{gap:.55rem}
  .mark b{font-size:.7rem;letter-spacing:.16em}
  .mark .villes-mark{font-size:.54rem;letter-spacing:.1em;margin-top:4px}
}
@media(max-width:400px){.mark .villes-mark{display:none}}