:root{--noir-mat:#363530;--nuit:#212320;--ivoire:#FEFEF9;--pierre:#EFEDE4;--encre:#212320;--gris:#5C605F;--or:#B6A47C;--or-texte:#6D6247;--argent:#7A7E7D;--brun:#261D14;--ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.65 var(--sans);color:var(--encre);background:var(--ivoire);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--noir-mat);line-height:1.02;margin:0}
a{color:var(--noir-mat)}
img,video,svg{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 1.4rem}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.btn{display:inline-block;background:var(--noir-mat);color:var(--ivoire);text-decoration:none;letter-spacing:0;padding:1rem 1.8rem;border:1px solid var(--noir-mat);border-radius:2px;font:600 1rem var(--sans);cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease)}
.btn:hover{background:#4a4943}
.btn.clair{background:var(--ivoire);color:var(--noir-mat);border-color:var(--ivoire)}.btn.clair:hover{background:#fff}
.btn.fil{background:transparent;color:var(--ivoire);border-color:rgba(254,254,249,.6)}.btn.fil:hover{background:rgba(254,254,249,.12)}
.btn.petit{padding:.65rem 1.2rem;font-size:.88rem}
.kicker{font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--or);font-weight:700;margin:0 0 1.1rem}
.kicker.sombre{color:var(--gris)}
.verif{display:inline-block;font:600 .68rem/1 var(--sans);letter-spacing:0;text-transform:none;background:var(--pierre);color:var(--noir-mat);border:1px solid var(--or);padding:.3rem .55rem;border-radius:2px;vertical-align:middle;margin-left:.5rem}
.credit{position:absolute;right:1.2rem;bottom:.9rem;font-size:.68rem;color:rgba(254,254,249,.85);letter-spacing:0;z-index:3;text-align:right;max-width:calc(100% - 2.4rem)}
/* en-tête */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
.entete.fond{background:var(--noir-mat);box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.entete .in{max-width:1360px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.4rem}
.entete .logo img{height:36px;width:auto}
.entete nav.bureau{display:none;gap:1.9rem}
.entete nav a{white-space:nowrap;color:var(--ivoire);text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:0;padding:.4rem 0;border-bottom:1px solid transparent;transition:border-color .4s var(--ease)}
.entete nav a:hover,.entete nav a[aria-current]{border-color:var(--or)}
.entete .droite{display:none;align-items:center;gap:1.2rem}
.entete .tel{color:var(--ivoire);text-decoration:none;font-weight:700;font-size:.92rem;white-space:nowrap}
.entete details{position:relative}
.entete summary{list-style:none;cursor:pointer;color:var(--ivoire);font-size:.82rem;font-weight:700;letter-spacing:0;text-transform:none;border:1px solid rgba(254,254,249,.55);padding:.55rem .9rem;border-radius:2px}
.entete summary::-webkit-details-marker{display:none}
.entete details nav{position:absolute;right:0;top:calc(100% + .6rem);background:var(--noir-mat);padding:1.2rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;min-width:240px;box-shadow:0 20px 40px -20px #000}
@media(min-width:1000px){.entete nav.bureau{display:flex}.entete .droite{display:flex}.entete details{display:none}}
@media(min-width:1000px) and (max-width:1199px){.entete .tel{display:none}.entete nav.bureau{gap:1.4rem}}
.wa{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font-weight:700;font-size:.88rem;border-radius:2px;padding:.6rem 1rem;white-space:nowrap}
.wa-ico{width:20px;height:20px;flex:none}
.wa-entete{background:transparent;color:var(--ivoire,#FEFEF9);border:1px solid rgba(254,254,249,.55)}
.wa-fonce{background:#FEFEF9;color:#363530;padding:.9rem 1.4rem;font-size:1rem}
/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:580px;display:flex;align-items:flex-end;color:var(--ivoire);background:var(--nuit);overflow:hidden}
.hero-media{position:absolute;inset:0;animation:zoomlent 26s ease-out forwards;transform-origin:60% 50%}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes zoomlent{from{transform:scale(1)}to{transform:scale(1.1)}}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,35,32,.55) 0%,rgba(33,35,32,.15) 35%,rgba(33,35,32,.88) 100%),radial-gradient(90% 70% at 20% 100%,rgba(182,164,124,.28),transparent 70%)}
.hero .accroche{position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;padding:7rem 1.4rem 4.2rem}
.hero h1{color:var(--ivoire);font-size:clamp(3.25rem,10vw,9rem);font-weight:500;letter-spacing:-.02em;line-height:.95}
.hero .sous{font-size:clamp(1.05rem,1.6vw,1.375rem);margin:1.4rem 0 2rem;color:#EFEDE4;max-width:34rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.hero.court{height:auto;min-height:min(92svh,820px)}
.hero.court h1{font-size:clamp(2.9rem,8.3vw,7.5rem);max-width:18ch;line-height:.96}
.defile{position:absolute;z-index:2;left:50%;bottom:1.2rem;width:1px;height:46px;background:linear-gradient(var(--or),transparent);animation:descend 2.4s ease-in-out infinite}
@keyframes descend{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* uw */
.uw{position:relative;height:230vh;background:radial-gradient(110% 80% at 50% 40%,#363530,var(--noir-mat) 60%,var(--nuit))}
.uw-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 1.4rem;color:var(--ivoire)}
.uw .kicker{color:var(--or)}
.uw-num{font-family:var(--display);font-weight:500;font-size:clamp(7.5rem,19.5vw,17.5rem);line-height:.9;color:var(--ivoire);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.uw-unit{font-size:clamp(.9rem,1.4vw,1.1rem);letter-spacing:0;text-transform:none;color:var(--or);margin:.6rem 0 1.8rem;font-weight:700}
.uw-phrase{font:500 clamp(1.5rem,3vw,2.4rem)/1.2 var(--display);max-width:30ch;margin:0 0 1.4rem;color:#F3F1E8}
.uw-leg{font-size:.875rem;max-width:44rem;color:#DAD8CE;margin:0}
.uw-barre{width:min(280px,60vw);height:2px;background:rgba(254,254,249,.2);margin-top:2rem}
.uw-barre i{display:block;height:100%;width:100%;background:var(--or);transform:scaleX(var(--p,1));transform-origin:left}
/* mots */
.mots{position:relative}
.mot{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--ivoire);background:var(--nuit)}
.mot .img{position:absolute;inset:0;background:center/cover no-repeat}
.mot:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,35,32,.25),rgba(33,35,32,.2) 40%,rgba(33,35,32,.85))}
.mot .txt{position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;padding:0 1.4rem 4.2rem}
.mot h2{color:var(--ivoire);font-size:clamp(3.25rem,6.67vw,6rem);letter-spacing:-.01em}
.mot p{font-size:1.125rem;max-width:36rem;margin:1.1rem 0 1.6rem;color:#EFEDE4}
.mot .num{font:500 1.4rem var(--display);color:var(--or);margin:0 0 .6rem}
.mot .src{display:block;font-size:.78rem;color:#D8D6CC;margin-top:.8rem}
/* chiffres */
.bande{background:var(--ivoire);padding:5.5rem 0 4.5rem}
.chiffres{display:grid;grid-template-columns:repeat(2,1fr);gap:2.6rem 1.4rem;text-align:center}
.chiffre{border-top:2px solid var(--or);padding-top:1.4rem}
.chiffre b{display:block;font:500 clamp(3.1rem,4.4vw,4rem)/1 var(--display);color:var(--noir-mat);font-variant-numeric:lining-nums tabular-nums}
.chiffre b small{font-size:.45em;letter-spacing:0;margin-left:.15em}
.chiffre span{display:block;margin-top:.5rem;font-weight:600;font-size:.95rem}
.chiffre em{display:block;margin-top:.3rem;font-size:.75rem;color:var(--gris);font-style:normal}
.sources{text-align:center;font-size:.8rem;color:var(--gris);margin:2.4rem 0 0}
@media(min-width:800px){.chiffres{grid-template-columns:repeat(4,1fr);gap:1.6rem}}
/* pergolas */
.perg{position:relative;min-height:86vh;min-height:86svh;display:flex;align-items:flex-end;color:var(--ivoire);background:var(--nuit);overflow:hidden}
.perg .img{position:absolute;inset:0;background:center/cover no-repeat}
.perg:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,35,32,.1),rgba(33,35,32,.85))}
.perg .txt{position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;padding:6rem 1.4rem 4rem}
.perg h2{color:var(--ivoire);font-size:clamp(3rem,5.6vw,5rem)}
.perg p{max-width:36rem;font-size:1.1rem;margin:1rem 0 1.6rem;color:#EFEDE4}
/* sections génériques */
section.s{padding:5.5rem 0}
section.s.pierre{background:var(--pierre)}
section.s.sombre{background:var(--nuit);color:var(--ivoire)}
.titre-s{margin-bottom:2.6rem;max-width:44rem}
.titre-s h2{font-size:clamp(2.4rem,4.6vw,4rem)}
.sombre .titre-s h2,.sombre h3{color:var(--ivoire)}
.titre-s p{font-size:1.1rem;margin:1rem 0 0}
.fabricants{display:grid;gap:1.6rem}
.fab{border-left:2px solid var(--or);padding:.2rem 0 .2rem 1.4rem}
.fab h3{font-size:2rem;margin-bottom:.5rem}
.fab p{margin:0}
@media(min-width:800px){.fabricants{grid-template-columns:1fr 1fr;gap:3rem}}
.conseil{background:var(--noir-mat);color:var(--ivoire);padding:4rem 0}
.conseil-in{display:grid;gap:2rem;align-items:center}
.conseil h2{color:var(--ivoire);font-size:clamp(2.2rem,4vw,3.4rem)}
.conseil p{margin:.8rem 0 0;color:#E6E4DA}
.conseil-act{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.tel2{font:500 clamp(2.2rem,5vw,3.2rem)/1 var(--display);color:var(--ivoire);text-decoration:none;white-space:nowrap}
.delai{font-size:.88rem;letter-spacing:0;color:var(--or);font-weight:700}
@media(min-width:800px){.conseil-in{grid-template-columns:1.2fr 1fr}}
/* formulaire */
.demande{background:var(--ivoire);padding:5.5rem 0}
.demande h2{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:.8rem}
.demande .intro{max-width:36rem;margin:0 0 2rem}
form{max-width:640px}
.l{display:block;font-weight:700;font-size:.85rem;letter-spacing:0;margin:1.1rem 0 .35rem}
input:not([type=checkbox]),select{width:100%;font:1rem var(--sans);padding:.85rem .9rem;border:1px solid #A9ACAA;border-radius:2px;background:#fff;color:var(--encre)}
.duo{display:grid;gap:0 1rem}
@media(min-width:600px){.duo{grid-template-columns:1fr 1fr}}
.rgpd{font-size:.8rem;color:var(--gris);margin:1.2rem 0}
.rgpd label{display:flex;gap:.7rem;align-items:flex-start}
.rgpd input{margin-top:.25rem;flex:none}
.delai-form{font-size:.85rem;color:var(--noir-mat);font-weight:700;margin:.8rem 0 0}
#etat{background:var(--pierre);padding:.8rem 1rem;border-left:3px solid var(--or);font-size:.9rem}
.appel{margin:1.4rem 0 0;font-size:.98rem}
/* pied */
footer{background:var(--nuit);color:#D6D5CC;padding:3.5rem 0 6.5rem;font-size:.9rem}
footer img{height:40px;width:auto;margin-bottom:1rem}
footer a{color:var(--ivoire)}
footer .grille{display:grid;gap:2rem}
footer .liens{display:flex;flex-direction:column;gap:.5rem}
footer .liens a{text-decoration:none}
footer .bas{border-top:1px solid rgba(254,254,249,.18);margin-top:2.2rem;padding-top:1.4rem;font-size:.78rem}
@media(min-width:800px){footer .grille{grid-template-columns:1.2fr 1fr 1fr}}
.wa-flot{position:fixed;right:1rem;bottom:4.6rem;z-index:40;width:54px;height:54px;border-radius:50%;background:#363530;color:#FEFEF9;border:1px solid #B6A47C;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.wa-flot .wa-ico{width:28px;height:28px}
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex}
.barre a{flex:1;text-align:center;padding:.95rem .5rem;font-weight:700;text-decoration:none;font-size:.95rem}
.barre .a1{background:var(--ivoire);color:var(--noir-mat);border-top:1px solid var(--or)}
.barre .a2{background:var(--noir-mat);color:var(--ivoire)}
@media(min-width:1000px){.barre{display:none}.wa-flot{bottom:1.4rem}footer{padding-bottom:3.5rem}}
/* bande d'étapes */
.etapes-fine{background:var(--pierre);padding:1.4rem 0;font-size:.92rem}
.etapes-fine ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:center;counter-reset:e}
.etapes-fine li{counter-increment:e}
.etapes-fine li:before{content:counter(e)" ";color:var(--or);font:600 1.1rem var(--display);margin-right:.3rem}
/* coupe */
.coupe-grille{display:grid;gap:2.4rem;align-items:center}
.coupe-svg{width:100%;max-width:640px;margin:0 auto;height:auto}
.coupe-svg text{font-family:var(--sans);fill:#EFEDE4}
.coupe-svg .dim{font-size:30px;font-weight:700;fill:var(--or)}
.coupe-svg .pin text{font-size:20px;font-weight:800;fill:var(--nuit);text-anchor:middle}
.coupe-svg .ch{fill:var(--noir-mat);stroke:#8A7B58;stroke-width:1.5}
.coupe-svg .bloc{fill:var(--ivoire);stroke:var(--or);stroke-width:3}
.coupe-svg .vitre{fill:rgba(182,164,124,.28);stroke:var(--or);stroke-width:2}
.coupe-svg .acier{fill:#9AA09F;stroke:#D8DADA;stroke-width:1.5}
.coupe-svg .joint{fill:#111;stroke:var(--or);stroke-width:2}
.coupe-svg .lien{stroke:var(--or);stroke-width:1.6;fill:none}
.coupe-svg .pinc{fill:var(--or)}
.js .coupe-svg .ch,.js .coupe-svg .vitre,.js .coupe-svg .acier,.js .coupe-svg .joint,.js .coupe-svg .pin,.js .coupe-svg .dimg{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0)*.32s)}
.js .coupe-svg .ch{transform:scaleY(.2);transform-box:fill-box;transform-origin:center}
.js .coupe.vu .coupe-svg .ch,.js .coupe.vu .coupe-svg .vitre,.js .coupe.vu .coupe-svg .acier,.js .coupe.vu .coupe-svg .joint,.js .coupe.vu .coupe-svg .pin,.js .coupe.vu .coupe-svg .dimg{opacity:1;transform:none}
.legende{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.legende li{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;align-items:start}
.legende .n{width:2rem;height:2rem;border-radius:50%;background:var(--or);color:var(--nuit);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem}
.legende b{display:block;font:500 1.6rem/1.1 var(--display);color:var(--ivoire)}
.legende span{font-size:.95rem;color:#DAD8CE}
.note-fine{font-size:.8rem;color:#C9CBC8;margin:1.6rem 0 0}
@media(min-width:900px){.coupe-grille{grid-template-columns:1.1fr 1fr;gap:4rem}}
/* comparatif */
.compare{display:grid;gap:1.4rem}
.col{background:#fff;border-top:4px solid var(--noir-mat);padding:2rem 1.6rem}
.col.alu{background:var(--nuit);color:var(--ivoire);border-top-color:var(--or)}
.col h3{font-size:2.4rem}
.col.alu h3{color:var(--ivoire)}
.col .mat{font-size:.78rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--gris);margin:0 0 .5rem}
.col.alu .mat{color:var(--or)}
.col dl{margin:1.4rem 0 0}
.col dl div{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid rgba(33,35,32,.15);padding:.75rem 0}
.col.alu dl div{border-color:rgba(254,254,249,.2)}
.col dt{font-size:.92rem;color:var(--gris)}
.col.alu dt{color:#C9CBC8}
.col dd{margin:0;font-weight:700;text-align:right}
.col .grand{font:500 4.2rem/1 var(--display);color:var(--noir-mat);margin:1rem 0 0}
.col.alu .grand{color:var(--ivoire)}
.col .grand small{display:block;font:600 .72rem var(--sans);letter-spacing:0;text-transform:none;color:var(--gris);margin-top:.3rem}
.col.alu .grand small{color:var(--or)}
.col .pg{font-size:.76rem;color:var(--gris);margin:1rem 0 0}
.col.alu .pg{color:#C9CBC8}
@media(min-width:900px){.compare{grid-template-columns:1fr 1fr;gap:1.6rem}.col{padding:2.6rem 2.4rem}}
.ecarts{max-width:46rem;margin:2rem 0 0;font-size:1.05rem}
/* baies alu */
.baies{display:grid;gap:3.4rem}
.baie{display:grid;gap:1.6rem;align-items:center}
.baie .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000}
.baie .ph div{position:absolute;inset:0;background:center/cover no-repeat}
.baie h3{font-size:clamp(2.2rem,3.4vw,3rem);margin-bottom:.4rem}
.baie .nombres{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.2rem 0}
.baie .nombres b{display:block;font:500 3rem/1 var(--display);color:var(--or)}
.baie .nombres span{font-size:.8rem;color:#C9CBC8}
.baie p{margin:.4rem 0;color:#E4E2D9}
.baie .pg{font-size:.78rem;color:#C9CBC8}
@media(min-width:900px){.baie{grid-template-columns:1.15fr 1fr;gap:3.6rem}.baie.inv .ph{order:2}}
.pan{overflow:hidden}
.js .pan{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s var(--ease)}
.js .pan.vu{clip-path:inset(0)}
.js .pan div{transform:scale(1.15);transition:transform 1.8s var(--ease)}
.js .pan.vu div{transform:none}
.rv{}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.vu{opacity:1;transform:none}
/* gamme */
.tableau{width:100%;border-collapse:collapse;font-size:.95rem}
.tableau th{text-align:left;font-size:.75rem;letter-spacing:0;text-transform:none;color:var(--gris);border-bottom:2px solid var(--noir-mat);padding:.7rem .8rem}
.tableau td{padding:.95rem .8rem;border-bottom:1px solid rgba(33,35,32,.18);vertical-align:top}
.tableau td:first-child{font:600 1.35rem var(--display);color:var(--noir-mat)}
.tableau tr.alu td:first-child:after{content:" alu";font:600 .65rem var(--sans);letter-spacing:0;text-transform:none;color:var(--or)}
@media(max-width:799px){
.tableau,.tableau tbody,.tableau tr,.tableau td{display:block;width:100%}
.tableau thead{display:none}
.tableau tr{border:1px solid rgba(33,35,32,.2);background:#fff;margin:0 0 1rem;padding:.8rem 1rem}
.tableau td{border:0;padding:.3rem 0;display:flex;justify-content:space-between;gap:1rem;text-align:right}
.tableau td:before{content:attr(data-l);font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--gris);text-align:left;flex:none;padding-top:.25rem}
.tableau td:first-child{display:block;text-align:left}.tableau td:first-child:before{display:none}
}
.portes{display:grid;gap:2rem;align-items:center}
.portes p{max-width:36rem}
@media(min-width:900px){.portes{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.hero-media,.defile{animation:none}
.js .rv,.js .pan,.js .pan div,.js .coupe-svg *{transition:none!important}
.js .rv{opacity:1;transform:none}
.js .pan{clip-path:none}.js .pan div{transform:none}
.js .coupe-svg .ch,.js .coupe-svg .vitre,.js .coupe-svg .acier,.js .coupe-svg .joint,.js .coupe-svg .pin,.js .coupe-svg .dimg{opacity:1;transform:none}
}
.col .grand,.baie .nombres b,.tel2,.legende b,.tableau td:first-child{font-variant-numeric:lining-nums}
@media(min-width:1000px){.wa-flot{display:none}}
@media(max-width:999px){.hero .credit,.mot .credit,.perg .credit{top:4.8rem;bottom:auto;right:auto;left:1.4rem;text-align:left}}
h1,h2,h3,.etapes-fine li:before,.mot .num,.chiffre b{font-variant-numeric:lining-nums}
.credit{background:rgba(33,35,32,.62);padding:.2rem .55rem;border-radius:2px}
.baie .ph .credit{right:.6rem;bottom:.6rem}
@media(max-width:699px){.hero-media img.dako{object-position:88% 40%}.hero-media video{object-position:82% 50%}.wa-flot{width:48px;height:48px;bottom:4.2rem}}
/* galerie de chantiers (photos réelles Yeterna) */
.galerie{background:var(--nuit);color:var(--ivoire);padding:0 0 .5rem}
.galerie-t{max-width:1360px;margin:0 auto;padding:5.5rem 1.4rem 2.4rem}
.galerie-t h2{color:var(--ivoire);font-size:clamp(2.6rem,6vw,5.5rem);letter-spacing:-.01em;max-width:16ch}
.galerie-t p{max-width:34rem;margin:1.2rem 0 0;color:#E4E2D9}
.vue{position:relative;margin:0 0 .5rem;height:88vh;height:88svh;min-height:420px;overflow:hidden;background:var(--nuit)}
.vue picture,.vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vue:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,35,32,0) 55%,rgba(33,35,32,.72))}
.vue figcaption{position:absolute;z-index:2;left:1.4rem;bottom:1.5rem;font:500 clamp(1.9rem,3.6vw,3rem)/1 var(--display);color:var(--ivoire)}
.vue .mention{position:absolute;z-index:2;right:1.4rem;bottom:1.7rem;font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.25rem .6rem;border-radius:2px}
.js .vue{clip-path:inset(9% 5% 9% 5%);transition:clip-path 1.3s var(--ease)}
.js .vue.vu{clip-path:inset(0)}
.js .vue img{transform:scale(1.14);transition:transform 2s var(--ease)}
.js .vue.vu img{transform:none}
.js .vue figcaption,.js .vue .mention{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease) .5s,transform .9s var(--ease) .5s}
.js .vue.vu figcaption,.js .vue.vu .mention{opacity:1;transform:none}
@media(max-width:699px){.vue{height:74vh;height:74svh;min-height:380px}.vue .mention{left:1.4rem;right:auto;bottom:.8rem}.vue figcaption{bottom:2.4rem}}
@media(prefers-reduced-motion:reduce){.js .vue,.js .vue img,.js .vue figcaption,.js .vue .mention{transition:none!important;clip-path:none;transform:none;opacity:1}}
/* pages produit */
.hero .mention{position:absolute;z-index:3;right:1.2rem;bottom:.9rem;font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.25rem .6rem;border-radius:2px}
@media(max-width:999px){.hero .mention{right:auto;left:1.4rem;top:4.8rem;bottom:auto}}
.intro-p{max-width:44rem}
.intro-p p{font-size:1.15rem;margin:0 0 1rem}
.liens-int{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.btn.ligne{background:transparent;color:var(--noir-mat);border-color:var(--noir-mat)}.btn.ligne:hover{background:rgba(54,53,48,.07)}
/* numéro de Robin, discret */
.robin{font-size:.9rem;color:#D6D5CC;margin:.5rem 0 0!important}
.robin a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.appel.discret{font-size:.9rem;color:var(--gris)}
/* qui sommes-nous */
.qui{display:grid;gap:2rem;align-items:center}
.qui .txt h2{font-size:clamp(2.4rem,4.6vw,4rem);margin-bottom:1.2rem}
.qui .txt p{max-width:30rem}
.qui figure{margin:0;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--nuit)}
.qui figure img,.qui figure video{width:100%;height:100%;object-fit:cover}
.qui figcaption{position:absolute;left:.8rem;bottom:.8rem;font-size:.72rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.25rem .6rem;border-radius:2px}
.qui .medias{display:grid;gap:1rem}
@media(min-width:700px){.qui .medias{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.qui{grid-template-columns:.9fr 1.3fr;gap:4rem}}
/* chantier pro */
.chantier .etapes3{display:grid;gap:1.2rem}
.chantier .etapes2{display:grid;gap:1.2rem;margin-top:1.2rem}
.chantier figure{margin:0;position:relative}
.chantier figure img{width:100%;height:auto;display:block}
.chantier figure.p img{aspect-ratio:3/4;object-fit:cover}
.chantier figure.l img{aspect-ratio:4/3;object-fit:cover}
.chantier .etape{display:block;font:500 1.7rem/1 var(--display);color:var(--ivoire);margin:0 0 .6rem}
.chantier .mention{position:absolute;right:.6rem;bottom:.6rem;font-size:.68rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.2rem .5rem;border-radius:2px}
@media(min-width:700px){.chantier .etapes3{grid-template-columns:repeat(3,1fr)}.chantier .etapes2{grid-template-columns:1fr 1fr}}
/* visuels fabricant (en complément) */
.visus{display:grid;gap:1.2rem}
.visu{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--nuit)}
.visu img{width:100%;height:100%;object-fit:cover}
.visu .credit{left:.6rem;right:auto;bottom:.6rem;text-align:left;max-width:calc(100% - 1.2rem)}
@media(min-width:800px){.visus{grid-template-columns:repeat(3,1fr)}}
@media(max-width:999px){.visu .credit{top:auto;bottom:.6rem;left:.6rem}}
/* second appel à l'action : showroom */
.btn.fin{background:transparent;color:var(--ivoire);border-color:rgba(254,254,249,.55);font-weight:500}
.btn.fin:hover{background:rgba(254,254,249,.12)}
.entete .droite .fin{display:none}
@media(min-width:1366px){.entete .droite .fin{display:inline-block}}
.barre .a3{background:var(--nuit);color:var(--ivoire)}
.barre a{font-size:.82rem}
.cartes{display:grid;gap:.5rem;margin:0 0 .5rem}
@media(min-width:800px){.cartes{grid-template-columns:repeat(3,1fr)}}
.cartes .visu .mention{position:absolute;left:.6rem;bottom:.6rem;font-size:.66rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.2rem .5rem;border-radius:2px}
.cartes .visu{aspect-ratio:4/3}
.cta-bloc{background:var(--nuit);padding:2.2rem 1.4rem 4.5rem;text-align:center}
.cta-bloc p{color:#E4E2D9;margin:0 0 1.2rem}
.etat-adresse{border-left:3px solid var(--or);background:var(--pierre);padding:.8rem 1rem;margin:0 0 1rem}
/* bloc showroom (accueil) */
.sh-grand{position:relative;min-height:94vh;min-height:94svh;display:flex;align-items:flex-end;background:var(--nuit);overflow:hidden;color:var(--ivoire)}
.sh-grand>picture,.sh-grand>picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-grand:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(33,35,32,.2) 0%,rgba(33,35,32,.15) 35%,rgba(33,35,32,.9) 100%)}
.sh-grand .txt{position:relative;z-index:2;max-width:1360px;width:100%;margin:0 auto;padding:6rem 1.4rem 4rem}
.sh-grand h2{color:var(--ivoire);font-size:clamp(2.7rem,6.6vw,6rem);letter-spacing:-.01em;max-width:15ch;line-height:.98}
.sh-grand .horaires{margin:1.4rem 0 1.8rem;font-size:1.1rem;color:#EFEDE4}
.sh-grand .horaires b{display:block;font:500 1.6rem/1.2 var(--display);color:var(--ivoire)}
.sh-grand .mention{position:absolute;z-index:3;right:1.2rem;bottom:.9rem;font-size:.7rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.25rem .6rem;border-radius:2px}
@media(max-width:699px){.sh-grand .mention{right:auto;left:1.4rem;top:4.8rem;bottom:auto}}
.sh-bloc{background:var(--nuit);padding-bottom:0}
.js .sh-grand .txt>*{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .sh-grand.vu .txt>*{opacity:1;transform:none}
.js .sh-grand.vu .txt>*:nth-child(2){transition-delay:.15s}.js .sh-grand.vu .txt>*:nth-child(3){transition-delay:.3s}.js .sh-grand.vu .txt>*:nth-child(4){transition-delay:.45s}
@media(prefers-reduced-motion:reduce){.js .sh-grand .txt>*{opacity:1;transform:none;transition:none}}
.form-rdv .l+select,.form-rdv .l+input{margin-bottom:0}
.creneau{display:grid;gap:0 1rem}
@media(min-width:600px){.creneau{grid-template-columns:1fr 1fr}}
.infos-pratiques{display:grid;gap:1.6rem}
@media(min-width:800px){.infos-pratiques{grid-template-columns:1fr 1fr;gap:3rem}}
/* en-tête : pas de retour à la ligne, logo qui ne s'écrase pas */
.entete .logo{flex:none}
.entete .btn.petit,.entete .wa{white-space:nowrap}
.entete .droite{gap:.8rem}
@media(min-width:1000px) and (max-width:1499px){.entete .tel{display:none}}
@media(min-width:1000px) and (max-width:1279px){.entete nav.bureau{gap:1.1rem}.entete nav a{font-size:.85rem}}
/* image claire : voile plus profond */
.hero.fonce:before{background:linear-gradient(180deg,rgba(33,35,32,.62) 0%,rgba(33,35,32,.5) 45%,rgba(33,35,32,.93) 100%)}
.sh-grand:before{background:linear-gradient(180deg,rgba(33,35,32,.5) 0%,rgba(33,35,32,.35) 40%,rgba(33,35,32,.92) 100%)}

@media(min-width:1000px){.entete nav.bureau{gap:1.25rem}.entete nav a{font-size:.86rem}.entete .droite{gap:.6rem}.entete .btn.petit{font-size:.82rem;padding:.6rem 1rem}}
@media(min-width:1000px) and (max-width:1599px){.entete .wa-entete span{display:none}.entete .wa-entete{padding:.6rem .7rem}}

/* v2.1 : lisibilité du kicker sur vidéo, vidéos showroom */
.hero .kicker{text-shadow:0 1px 10px rgba(33,35,32,.9),0 0 3px rgba(33,35,32,.7)}
.sh-grand>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sh-grand h2{max-width:22ch;font-size:clamp(2.4rem,5vw,4.6rem)}
.hero .kicker{color:#FEFEF9}
.sh-grand .kicker{color:#FEFEF9;text-shadow:0 1px 10px rgba(33,35,32,.9)}

/* bouton WhatsApp de Robin : secondaire, contour fin */
.wa-fin{background:transparent;font-weight:600;font-size:.82rem;padding:.4rem .8rem;border:1px solid;margin-left:.3rem;white-space:normal}
.wa-fin .wa-ico{width:16px;height:16px}
.wa-fin.wa-sombre{color:var(--ivoire);border-color:var(--or)}
.wa-fin.wa-sombre:hover{background:rgba(254,254,249,.12)}
.wa-fin.wa-clair{color:var(--noir-mat);border-color:var(--noir-mat)}
.wa-fin.wa-clair:hover{background:rgba(54,53,48,.06)}
.robin .wa-fin{text-decoration:none;display:inline-flex;margin:.5rem .3rem 0 0}
.hero .actions .wa-fin{margin-left:0;align-self:center}
.appel .wa-fin{margin:.5rem 0 0 .3rem}@media(max-width:699px){.appel .wa-fin{margin:.6rem 0 0}.appel .wa-fin,.robin .wa-fin{display:flex;width:fit-content}}

/* ===================== v3 (10-11/11/2026) ===================== */
.hero-media img.ouv{object-position:52% 58%}
@media(max-width:699px){.hero-media img.ouv{object-position:50% 55%}}
/* Ce qui nous anime */
.anime{background:var(--ivoire);padding:5.5rem 0 4.5rem}
.an-tete h2{font-size:clamp(2.6rem,5.4vw,4.8rem);max-width:16ch}
.chapo{font:500 clamp(1.5rem,2.6vw,2.2rem)/1.25 var(--display);color:var(--noir-mat);max-width:36ch;margin:1.4rem 0 2.4rem}
.an-cols{display:grid;gap:1.8rem 3rem}
@media(min-width:900px){.an-cols{grid-template-columns:1fr 1fr}}
.an-cols h3{font-size:1.9rem;margin-bottom:.5rem}
.an-cols p{margin:0;font-size:1rem}
cite{font-style:normal;font-size:.84em;color:var(--gris)}
.matieres{display:grid;grid-auto-flow:column;grid-auto-columns:76%;gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:3rem -1.4rem 0;padding:0 1.4rem .6rem;-webkit-overflow-scrolling:touch}
.mat{margin:0;scroll-snap-align:start;min-width:0}
@media(min-width:900px){.matieres{grid-auto-flow:row;grid-template-columns:repeat(5,1fr);grid-auto-columns:auto;overflow:visible;margin:3rem 0 0;padding:0}}
.mat-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--nuit)}
.mat-img img{width:100%;height:100%;object-fit:cover}
.mat .credit{left:.5rem;right:auto;bottom:.5rem;top:auto;font-size:.62rem;text-align:left;max-width:calc(100% - 1rem)}
.mat figcaption{font-size:.9rem;padding-top:.8rem;line-height:1.5}
.mat figcaption b{display:block;font:500 1.55rem/1.1 var(--display);color:var(--noir-mat);margin-bottom:.3rem}
.mat figcaption cite{display:block;margin-top:.4rem;font-size:.74rem}
.an-cta{margin:2.6rem 0 0}
/* engagements */
.engage{background:var(--pierre)}
.eng-grille{display:grid;gap:1.8rem}
@media(min-width:700px){.eng-grille{grid-template-columns:1fr 1fr;gap:2rem 2.4rem}}
@media(min-width:1100px){.eng-grille{grid-template-columns:repeat(4,1fr)}}
.eng{border-top:2px solid var(--or);padding-top:1.1rem;min-width:0}
.eng h3{font-size:2.1rem;margin-bottom:.7rem}
.eng ul{margin:0;padding:0;list-style:none;display:grid;gap:.95rem}
.eng li{font-size:1rem;line-height:1.5}
.legal-credit{margin:2.2rem 0 0;max-width:46rem;font-size:.95rem;border-left:3px solid var(--or);padding:.5rem 0 .5rem 1rem}
/* conseil : Thibault (initiales) et Robin (portrait) */
.conseil-t .delai{display:block;margin-top:1.2rem}
.gens{display:grid;gap:1.6rem;max-width:34rem}
.pers{display:flex;gap:1.2rem;align-items:flex-start}
.pers-t{min-width:0}
.pers h3{font-size:2rem;color:var(--ivoire)}
.pers .role{margin:.1rem 0 .7rem;font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--or);font-weight:700}
.pers .tel2{display:block;font-size:1.75rem;margin-bottom:.8rem}
.pers .tel3{display:block;font:500 1.45rem/1.2 var(--display);color:var(--ivoire);text-decoration:none;margin-bottom:.5rem;white-space:nowrap}
.avatar{flex:none;width:120px;aspect-ratio:4/5;border:1px solid var(--or);background:radial-gradient(100% 90% at 50% 30%,#363530,var(--nuit));display:flex;align-items:center;justify-content:center}
.avatar span{font:500 2.6rem/1 var(--display);color:var(--or);letter-spacing:0}
.portrait{flex:none;width:120px;margin:0}
.portrait img{width:120px;height:150px;object-fit:cover;object-position:50% 18%}
.portrait figcaption{font-size:.66rem;letter-spacing:0;text-transform:none;color:#D6D5CC;margin-top:.35rem}
.pers .wa{white-space:normal}
.pers .wa-fonce{padding:.75rem 1.1rem;font-size:.92rem}
@media(max-width:520px){.avatar,.portrait,.portrait img{width:92px}.avatar{aspect-ratio:4/5}.portrait img{height:115px}.avatar span{font-size:2rem}.pers{gap:.9rem}.pers .tel2{font-size:1.5rem}}
@media(min-width:800px){.conseil-in{grid-template-columns:1fr 1fr}}
/* modèles Veranco */
.modeles{display:grid;gap:2.6rem}
@media(min-width:1000px){.modeles:not(.un){grid-template-columns:1fr 1fr;gap:3rem 2.4rem}}
.modele{min-width:0;border-top:2px solid var(--or);padding-top:1.1rem}
.mod-t .kicker{margin-bottom:.3rem}
.mod-t h3{font-size:clamp(2.3rem,3.4vw,3rem)}
.mod-imgs{display:grid;grid-auto-flow:column;grid-auto-columns:84%;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:1rem 0 0;-webkit-overflow-scrolling:touch}
.mod-imgs figure{margin:0;position:relative;scroll-snap-align:start;min-width:0}
@media(min-width:700px){.mod-imgs{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;overflow:visible}.mod-imgs.trois{grid-template-columns:repeat(3,1fr)}}
.mod-imgs img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--nuit)}
.mod-imgs .credit{left:.5rem;right:auto;top:.5rem;bottom:auto;font-size:.62rem;text-align:left;max-width:calc(100% - 1rem)}
.mod-imgs figcaption{font-size:.9rem;font-weight:600;color:var(--noir-mat);padding-top:.5rem}
.proj{margin-top:1rem}
.proj summary{list-style:none;cursor:pointer}
.proj summary::-webkit-details-marker{display:none}
.proj[open] summary{background:rgba(54,53,48,.07)}
.proj-txt{background:#fff;border-left:3px solid var(--or);padding:.9rem 1.1rem;margin-top:.8rem;max-width:34rem}
.proj-txt p{margin:0 0 .5rem}
.proj-txt .note{font-size:.88rem;color:var(--gris);margin:0}
@media(prefers-reduced-motion:reduce){.matieres,.mod-imgs{scroll-behavior:auto}}
/* personnification : Robin et Thibault */
.duo-pers{background:var(--ivoire);padding:5rem 0 4rem}
.duo-grille{display:grid;gap:2.4rem}
@media(min-width:800px){.duo-grille{grid-template-columns:1fr 1fr;gap:2.6rem}}
.grand{min-width:0}
.grand figure{margin:0;position:relative}
.grand img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.grand figcaption{position:absolute;left:.6rem;bottom:.6rem;font-size:.64rem;letter-spacing:0;text-transform:none;font-weight:700;color:var(--ivoire);background:rgba(33,35,32,.62);padding:.2rem .5rem;border-radius:2px}
.grand h3{font-size:2.8rem;margin:1.1rem 0 .1rem}
.grand .role{margin:0 0 .8rem;font-size:.8rem;letter-spacing:0;text-transform:none;color:var(--gris);font-weight:700}
.grand blockquote{margin:0;font:500 1.5rem/1.3 var(--display);color:var(--noir-mat);max-width:30ch}
.grand blockquote footer{background:none;padding:.4rem 0 0;font:600 .9rem var(--sans);color:var(--gris)}
.sig{font-weight:600;color:var(--gris);font-size:.9em;white-space:nowrap}
.page-t{background:var(--nuit);color:var(--ivoire);padding:9rem 0 3.5rem}
.page-t h1{color:var(--ivoire);font-size:clamp(2.8rem,6.4vw,5.6rem);max-width:16ch}
.page-t .sous{max-width:38rem;margin:1.4rem 0 0;font-size:1.15rem;color:#EFEDE4}
.portrait figcaption{white-space:normal;line-height:1.3}
.avatar-grand{width:100%;aspect-ratio:4/3;border:1px solid var(--or);background:radial-gradient(100% 90% at 50% 30%,#363530,var(--nuit));display:flex;align-items:center;justify-content:center}
.avatar-grand span{font:500 clamp(4rem,10vw,7rem)/1 var(--display);color:var(--or);letter-spacing:0}
.grand figure.vide{aspect-ratio:auto}
/* v4 : charte réelle, var(--display) est une capitale large, tailles resserrées et espacement des capitales */
h1,h2,h3{letter-spacing:0;line-height:1.12;text-transform:none}
.hero h1{font-size:clamp(2.1rem,6.2vw,5.4rem);letter-spacing:0}
.hero.court h1{font-size:clamp(1.9rem,5vw,4.5rem)}
.mot h2{font-size:clamp(2rem,4.2vw,3.8rem);letter-spacing:0}
.perg h2{font-size:clamp(1.9rem,3.6vw,3.2rem)}
.titre-s h2,.demande h2,.qui .txt h2{font-size:clamp(1.6rem,3vw,2.6rem)}
.conseil h2{font-size:clamp(1.5rem,2.6vw,2.2rem)}
.galerie-t h2{font-size:clamp(1.7rem,3.8vw,3.4rem);letter-spacing:0}
.sh-grand h2,.sh-grand h2{font-size:clamp(1.6rem,3.2vw,2.9rem);letter-spacing:0}
.an-tete h2{font-size:clamp(1.7rem,3.4vw,3rem)}
.page-t h1{font-size:clamp(1.9rem,4vw,3.6rem)}
.uw-num{font-size:clamp(5rem,13vw,12rem);letter-spacing:0}
.uw-phrase,.chapo,.grand blockquote{letter-spacing:0;font-size:clamp(1.15rem,2vw,1.7rem)}
.chiffre b{font-size:clamp(2.2rem,3.2vw,3rem)}
.col .grand{font-size:3.2rem}
.tel2{font-size:clamp(1.6rem,3.6vw,2.4rem)}
.baie .nombres b{font-size:2.3rem}
.tableau td:first-child{font-size:1.05rem}
.vue figcaption{font-size:clamp(1.4rem,2.6vw,2.2rem)}
.mat figcaption b{font-size:1.2rem}
.pers .tel3{font-size:1.15rem}
.avatar-grand span{font-size:clamp(3rem,8vw,5.5rem)}
.entete .logo{font-family:var(--display)}
.btn.clair,.wa-fonce{color:var(--nuit)}
@media(max-width:600px){h1,h2,h3{overflow-wrap:break-word;hyphens:manual}}
.etapes-fine li:before{color:var(--or-texte)}
.mot .num{text-shadow:0 1px 8px rgba(33,35,32,.9)}