*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--corps);
 font-size:17px;line-height:1.65;overflow-x:hidden;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}
h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2.6rem,7.2vw,5.6rem)}
h2{font-size:clamp(1.9rem,4.3vw,3.3rem)}
h3{font-size:1.12rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1rem}
.sur{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
 font-weight:700;display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.sur::before{content:"";width:34px;height:2px;background:var(--accent);flex:none}
.intro{color:var(--sourd);font-size:1.08rem;max-width:62ch}

/* ---- navigation */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);
 background:color-mix(in oklab,var(--fond) 82%,transparent);
 border-bottom:1px solid var(--ligne)}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;height:74px}
.logo{display:flex;align-items:center;gap:.65rem;text-decoration:none;font-family:var(--titre);
 font-weight:800;font-size:1.16rem;letter-spacing:-.01em;margin-right:auto}
.liens{display:flex;gap:1.6rem;font-size:.93rem}
.liens a{text-decoration:none;color:var(--sourd);transition:color .2s}
.liens a:hover{color:var(--encre)}
.bt{display:inline-flex;align-items:center;gap:.55rem;padding:.78rem 1.35rem;
 border-radius:var(--rayon);font-weight:700;text-decoration:none;font-size:.95rem;
 background:var(--accent);color:#0b0e12;border:1px solid var(--accent);white-space:nowrap;
 transition:transform .18s ease,filter .18s ease}
.bt:hover{transform:translateY(-2px);filter:brightness(1.06)}
.bt.fant{background:transparent;color:var(--encre);border-color:var(--ligne)}
.bt.fant:hover{border-color:var(--accent)}
@media(max-width:880px){.liens{display:none}}

/* ---- hero */
.hero{position:relative;overflow:hidden;padding:clamp(3.5rem,9vw,7.5rem) 0 clamp(3rem,6vw,5rem);
 background:linear-gradient(175deg,var(--fond2),var(--fond) 62%)}
.motif{position:absolute;inset:0;width:100%;height:100%;opacity:.85;pointer-events:none}
.hero .wrap{position:relative}
.hero h1 span{display:block}
.hero h1 .em{color:var(--accent)}
.hero .intro{margin-top:1.6rem;font-size:clamp(1.02rem,1.5vw,1.18rem)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}
.reperes{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:2.6rem;padding-top:1.5rem;
 border-top:1px solid var(--ligne);font-size:.9rem;color:var(--sourd)}
.reperes b{color:var(--encre);font-weight:700}

/* ---- sections */
section{padding:clamp(3.4rem,7vw,6rem) 0;position:relative}
.clair{background:var(--clair);color:#12161b}
.clair .intro{color:#4b5763}
.clair .sur{color:color-mix(in oklab,var(--accent) 76%,#000)}
.tete{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}

/* ---- métiers */
.metiers{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.carte{padding:1.7rem;border:1px solid var(--ligne);border-radius:var(--rayon);
 background:color-mix(in oklab,var(--fond2) 70%,transparent);
 transition:transform .25s ease,border-color .25s ease}
.clair .carte{background:#fff;border-color:#e2e6ea}
.carte:hover{transform:translateY(-4px);border-color:var(--accent)}
.carte .ic{width:46px;height:46px;color:var(--accent);margin-bottom:1rem}
.carte h3{margin-bottom:.5rem}
.carte p{color:var(--sourd);font-size:.96rem}
.clair .carte p{color:#5a6672}
.carte ul{margin:.9rem 0 0;padding:0;list-style:none;font-size:.92rem}
.carte li{padding:.34rem 0 .34rem 1.3rem;position:relative;color:var(--sourd)}
.clair .carte li{color:#5a6672}
.carte li::before{content:"";position:absolute;left:0;top:.86rem;width:7px;height:7px;
 background:var(--accent2);border-radius:2px}

/* ---- méthode */
.etapes{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 counter-reset:et}
.etape{counter-increment:et;padding-top:2.6rem;position:relative}
.etape::before{content:counter(et,decimal-leading-zero);position:absolute;top:0;left:0;
 font-family:var(--titre);font-size:2.1rem;font-weight:800;color:var(--accent);opacity:.85}
.etape h3{margin-bottom:.4rem}
.etape p{color:var(--sourd);font-size:.97rem;margin:0}
.clair .etape p{color:#5a6672}

/* ---- zone */
.zone{display:grid;gap:2.4rem;grid-template-columns:1fr 1fr;align-items:center}
@media(max-width:900px){.zone{grid-template-columns:1fr}}
.communes{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
 margin:0;padding:0;list-style:none}
.communes a{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;
 padding:.75rem .9rem;border:1px solid var(--ligne);border-radius:var(--rayon);
 text-decoration:none;font-size:.95rem;transition:border-color .2s,background .2s}
.communes a:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 7%,transparent)}
.communes small{color:var(--sourd);font-variant-numeric:tabular-nums;font-size:.84rem}

/* ---- questions */
.faq{max-width:74ch}
details{border-bottom:1px solid var(--ligne);padding:1.15rem 0}
summary{cursor:pointer;font-weight:700;font-size:1.02rem;list-style:none;display:flex;
 justify-content:space-between;gap:1rem;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--titre);font-size:1.5rem;color:var(--accent);
 transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.85rem 0 0;color:var(--sourd);font-size:.98rem}
.clair details p{color:#5a6672}

/* ---- devis */
.devis{display:grid;gap:2.2rem;grid-template-columns:1fr 1.15fr;align-items:start}
@media(max-width:900px){.devis{grid-template-columns:1fr}}
form{display:grid;gap:.85rem;padding:1.7rem;border:1px solid var(--ligne);
 border-radius:var(--rayon);background:color-mix(in oklab,var(--fond2) 70%,transparent)}
.clair form{background:#fff;border-color:#e2e6ea}
label{display:grid;gap:.35rem;font-size:.83rem;font-weight:600;color:var(--sourd)}
.clair label{color:#5a6672}
input,textarea{font:inherit;font-size:.98rem;padding:.8rem .95rem;border-radius:calc(var(--rayon) - 4px);
 border:1px solid var(--ligne);background:var(--fond);color:var(--encre);width:100%}
.clair input,.clair textarea{background:#f7f9fa;border-color:#dfe4e9;color:#12161b}
input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea{min-height:104px;resize:vertical}
.duo{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
@media(max-width:560px){.duo{grid-template-columns:1fr}}
.miel{position:absolute;left:-9999px}
.merci{display:none;padding:1rem;border-radius:var(--rayon);background:var(--accent);
 color:#0b0e12;font-weight:700}

/* ---- pied */
footer{border-top:1px solid var(--ligne);padding:3rem 0 2.2rem;font-size:.92rem;color:var(--sourd)}
footer .cols{display:grid;gap:2rem;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer b{color:var(--encre)}
footer a{color:var(--sourd)}
.bas{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid var(--ligne);font-size:.84rem}


/* ---- grain : casse l'aplat numérique, très légèrement */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--accent);color:#0b0e12}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* ---- bandeau défilant : le secteur, en continu */
.ruban{overflow:hidden;border-block:1px solid var(--ligne);padding:.85rem 0;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ruban ul{display:flex;gap:2.4rem;margin:0;padding:0;list-style:none;width:max-content;
 animation:glisse 38s linear infinite}
.ruban li{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:var(--sourd);
 white-space:nowrap;font-weight:600}
.ruban li::before{content:"";width:6px;height:6px;background:var(--accent);
 border-radius:50%;flex:none}
@keyframes glisse{to{transform:translateX(-50%)}}
.ruban:hover ul{animation-play-state:paused}

/* ---- boutons : la flèche avance */
.bt .fl{transition:transform .22s ease}
.bt:hover .fl{transform:translateX(4px)}

/* ---- titre : la dernière ligne prend la lumière */
.hero h1 .em{background:linear-gradient(100deg,var(--accent),var(--accent2) 78%);
 -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- cartes : lueur au survol, numéro discret */
.carte{position:relative;overflow:hidden;isolation:isolate}
.carte::before{content:"";position:absolute;inset:-1px;z-index:-1;opacity:0;
 background:radial-gradient(320px 200px at var(--x,50%) var(--y,0%),
  color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%);transition:opacity .3s}
.carte:hover::before{opacity:1}
.carte .no{position:absolute;top:1.1rem;right:1.25rem;font-family:var(--titre);
 font-size:.82rem;font-weight:800;color:var(--accent);opacity:.5}

/* ---- méthode : un trait relie les étapes */
.etapes{position:relative}
.etape::after{content:"";position:absolute;top:1.25rem;left:2.6rem;right:-1.6rem;height:1px;
 background:linear-gradient(90deg,var(--accent),transparent);opacity:.45}
.etape:last-child::after{display:none}
@media(max-width:820px){.etape::after{display:none}}

/* ---- ce que vous recevez */
.recus{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
 margin-top:2.4rem}
.recu{padding:1.3rem 1.4rem;border-radius:var(--rayon);
 border:1px solid var(--ligne);background:color-mix(in oklab,var(--fond2) 55%,transparent)}
.clair .recu{background:#fff;border-color:#e2e6ea}
.recu b{display:block;font-family:var(--titre);font-size:1.04rem;margin-bottom:.3rem}
.recu span{font-size:.93rem;color:var(--sourd)}
.clair .recu span{color:#5a6672}


/* ---- carte du secteur */
.radar{width:100%;max-width:560px;margin-inline:auto;display:block}
.radar circle[fill="var(--accent)"]{transition:r .2s}
/* ---- coupe de maison : les postes s'allument l'un après l'autre */
.coupe{width:100%;display:block}
.coupe .p{opacity:0;transition:opacity .6s ease}
.coupe.vu .p{opacity:1}
.coupe.vu .p[data-p="2"]{transition-delay:.18s}
.coupe.vu .p[data-p="3"]{transition-delay:.36s}
.coupe.vu .p[data-p="4"]{transition-delay:.54s}
.coupe.vu .p[data-p="5"]{transition-delay:.72s}
.coupe .p:hover{opacity:1;filter:brightness(1.35)}
.duoviz{display:grid;gap:2.6rem;grid-template-columns:1fr 1.05fr;align-items:center}
@media(max-width:900px){.duoviz{grid-template-columns:1fr}}

/* ---- biseau entre deux sections */
.clair{clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%)}
@media(max-width:700px){.clair{clip-path:none}}

/* ---- apparitions */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.vu{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
 .rv{opacity:1;transform:none;transition:none}
 .motif animate{display:none}
 html{scroll-behavior:auto}}

/* Galerie de chantiers — une scène, une photo à la fois, fondu lent et léger mouvement
   (site.js). Les photos sont celles de l'artisan, jamais générées. En dessous, la bande de
   vignettes ; au clic sur la scène, la visionneuse plein écran. */
.galerie .scene-g{position:relative;margin-top:2.8rem;aspect-ratio:16/10;overflow:hidden;
 background:rgba(127,127,127,.12);cursor:zoom-in}
.galerie .vue{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.06);z-index:0;
 transition:opacity 1.2s cubic-bezier(.4,0,.2,1),transform 2s cubic-bezier(.2,.7,.2,1)}
.galerie .vue.est{opacity:1;transform:none;z-index:1}
.galerie .vue img{display:block;width:100%;height:100%;object-fit:cover;transform-origin:52% 48%}
.galerie .vue.est img{animation:galerie-derive 9s cubic-bezier(.2,.5,.3,1) forwards}
@keyframes galerie-derive{from{transform:scale(1)}to{transform:scale(1.045)}}
.galerie .vue figcaption{position:absolute;left:0;right:0;bottom:0;padding:5rem clamp(1.2rem,3vw,2.6rem) clamp(1.2rem,2.6vw,2rem);
 color:#fff;background:linear-gradient(to top,rgba(0,0,0,.66),rgba(0,0,0,0));display:flex;align-items:baseline;gap:1.2rem;
 opacity:0;transform:translateY(16px);transition:opacity .8s .35s,transform .9s .35s cubic-bezier(.2,.7,.2,1)}
.galerie .vue.est figcaption{opacity:1;transform:none}
.galerie .vue figcaption i{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(2rem,4vw,3.2rem);line-height:1;opacity:.85}
.galerie .vue figcaption span{font-size:clamp(.92rem,1.4vw,1.15rem);letter-spacing:.06em;text-transform:uppercase}
.galerie .cmd{position:absolute;top:0;right:0;z-index:2;display:flex;align-items:center;gap:.2rem;
 padding:.9rem 1rem;color:#fff}
.galerie .cmd button,.galerie .vig{margin:0;padding:0;box-sizing:border-box;min-width:0;min-height:0;border-radius:0;box-shadow:none}
.galerie .cmd button{background:rgba(0,0,0,.28);border-radius:50%;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);color:#fff;
 width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;font-size:1.1rem;line-height:1;font-family:inherit;
 transition:background .3s,border-color .3s}
.galerie .cmd button:hover{background:rgba(0,0,0,.55);border-color:#fff}
.galerie .cmd .compte{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.25rem;letter-spacing:.06em;margin:0 .9rem;
 text-shadow:0 1px 6px rgba(0,0,0,.5)}
.galerie .cmd .compte b{font-weight:400;font-size:1.6rem}
.galerie .fil{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.22);z-index:2}
.galerie .fil i{display:block;height:100%;width:0;background:#fff;opacity:.9}
.galerie .fil.va i{transition:width var(--tempo,6s) linear;width:100%}
.galerie .bande{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:.45rem;margin-top:.55rem}
.galerie .vig{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:4/3;overflow:hidden;position:relative;
 opacity:.5;transition:opacity .5s;filter:saturate(.85)}
.galerie .vig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.galerie .vig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
 transform:scaleX(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.galerie .vig:hover{opacity:.85;background:none;border-color:transparent}
.galerie .vig.est{opacity:1;filter:none}
.galerie .vig.est::after{transform:none}
.galerie .vig.est img{transform:scale(1.06)}
@media(max-width:760px){
 .galerie .scene-g{aspect-ratio:4/3;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
 .galerie .vue figcaption{padding:3.4rem 1rem 1rem;gap:.8rem}
 .galerie .cmd{padding:.6rem .7rem}.galerie .cmd .compte{margin:0 .5rem}
 .galerie .bande{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.4rem;padding-bottom:.3rem;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:1rem;padding-right:1rem;scrollbar-width:none}
 .galerie .bande::-webkit-scrollbar{display:none}
 .galerie .vig{flex:0 0 22vw;scroll-snap-align:center}}
@media(prefers-reduced-motion:reduce){
 .galerie .vue,.galerie .vue figcaption,.galerie .fil i,.galerie .vig img{transition:none}
 .galerie .vue.est img{animation:none}}
/* Visionneuse */
.vision{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;
 inset:0;margin:0}
.vision::backdrop{background:rgba(12,12,12,.94)}
.vision .scene{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
 flex-direction:column;gap:1rem;padding:3.5rem 4.5rem 2.5rem;box-sizing:border-box}
.vision img{max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain;
 box-shadow:0 30px 80px rgba(0,0,0,.6);animation:vision-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes vision-in{from{opacity:0;transform:scale(.97)}}
.vision p{margin:0;color:#fff;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85;text-align:center}
.vision button{position:fixed;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;
 font-size:2.4rem;line-height:1;cursor:pointer;padding:1rem;opacity:.7;font-family:inherit}
.vision button:hover{opacity:1}
.vision .prec{left:.6rem}.vision .suiv{right:.6rem}
.vision .ferme{top:.6rem;right:.9rem;transform:none;font-size:1.8rem}
@media(max-width:760px){.vision .scene{padding:3.2rem .8rem 2rem}.vision img{max-height:calc(100vh - 7rem)}
 .vision button{padding:.6rem;font-size:2rem}.vision .prec{left:0}.vision .suiv{right:0}}

/* ---- gabarit v2 (20/09/2026) : preuve, tarifs, avis — variables avec repli d'une composition à l'autre */
.preuve{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:1.6rem;font-size:.95rem}
.preuve>*{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none}
.preuve b{font-weight:700}.preuve .etoiles{letter-spacing:.06em;color:var(--acc,var(--accent,#C9A86A))}
.preuve a,.preuve a *{text-decoration:none}.preuve a.note:hover b{text-decoration:underline}
.tarifs .grille{width:100%;border-collapse:collapse;margin-top:1.8rem;font-size:1rem}
.tarifs .grille th{text-align:left;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
 opacity:.7;padding:.6rem 0;border-bottom:1px solid var(--fil,var(--ligne,rgba(127,127,127,.35)))}
.tarifs .grille td{padding:.85rem 0;border-bottom:1px solid var(--fil,var(--ligne,rgba(127,127,127,.25)));vertical-align:top}
.tarifs .grille td:last-child{text-align:right;white-space:nowrap;font-weight:700}
.tarifs .note-t{margin-top:1rem;font-size:.88rem;opacity:.75;max-width:64ch}
.avis-g .chiffre{font-size:1.25rem;margin:1.4rem 0 1.2rem}.avis-g .etoiles{letter-spacing:.08em;color:var(--acc,var(--accent,#C9A86A))}
.avis-g .actions{display:flex;flex-wrap:wrap;gap:.8rem 2.2rem;margin:0}
@media(max-width:600px){.tarifs .grille td:last-child{white-space:normal}}