*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--enc);font-family:'Jost','Inter',system-ui,sans-serif;
 font-size:17.5px;font-weight:400;line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto}
h1,h2,h3{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
 line-height:1.04;letter-spacing:-.012em}
h1{font-size:clamp(3rem,7.4vw,6.6rem)}
h2{font-size:clamp(2.05rem,6.4vw,3.9rem)}
h3{font-family:'Jost',sans-serif;font-size:1.02rem;font-weight:500;letter-spacing:.01em;line-height:1.4}
p{margin:0 0 1.1rem}
em{font-style:italic;color:var(--acc)}

.w{width:min(1240px,88vw);margin-inline:auto}
.sur{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
 color:var(--doux);margin-bottom:1.6rem;display:block}
.intro{color:var(--doux);max-width:60ch;font-size:1.1rem}
section{padding:clamp(4.5rem,10vw,9rem) 0}
.trait{height:1px;background:var(--fil);border:0;margin:0}

/* ---------- voile d'ouverture : la page se découvre, elle n'apparaît pas */
.voile{position:fixed;inset:0;background:var(--fond);z-index:200;pointer-events:none;
 transform-origin:top;animation:leve 1.05s cubic-bezier(.76,0,.24,1) .15s forwards}
@keyframes leve{to{transform:scaleY(0)}}

/* ---------- en-tête discret */
header{position:fixed;top:0;left:0;right:0;z-index:90;padding:1.5rem 0;
 transition:background .4s ease,padding .4s ease,border-color .4s}
header.colle{background:color-mix(in oklab,var(--fond) 92%,transparent);padding:.85rem 0;
 backdrop-filter:blur(10px);border-bottom:1px solid var(--fil)}
header .in{display:flex;align-items:center;gap:2rem}
.marque{font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.01em;margin-right:auto}
.marque b{font-weight:500}
nav{display:flex;gap:2.1rem;font-size:.84rem;letter-spacing:.08em;text-transform:uppercase}
nav a{position:relative;padding-bottom:3px}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--acc);
 transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.76,0,.24,1)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
.tel{font-size:.92rem;letter-spacing:.04em;border:1px solid var(--fil);padding:.6rem 1.2rem;
 border-radius:999px;transition:border-color .35s,color .35s}
.tel:hover{border-color:var(--acc);color:var(--acc)}
@media(max-width:900px){nav{display:none}}

/* ---------- ouverture */
.hero{padding:clamp(9rem,17vw,13rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero h1 .l{display:block;overflow:hidden}
.hero h1 .l span{display:block;transform:translateY(104%);
 animation:monte 1.15s cubic-bezier(.16,.84,.3,1) forwards}
.hero h1 .l:nth-child(2) span{animation-delay:.1s}
.hero h1 .l:nth-child(3) span{animation-delay:.2s}
@keyframes monte{to{transform:none}}
.hero .bas{display:grid;grid-template-columns:1fr auto;gap:2.4rem;align-items:end;
 margin-top:clamp(2.4rem,5vw,4rem)}
@media(max-width:820px){.hero .bas{grid-template-columns:1fr}}
.cadre{position:absolute;right:-6%;top:8%;width:min(46vw,620px);opacity:.5;pointer-events:none}
@media(max-width:1000px){.cadre{display:none}}

.lien-f{display:inline-flex;align-items:center;gap:.9rem;font-size:.88rem;letter-spacing:.1em;
 text-transform:uppercase;padding-bottom:.5rem;position:relative;white-space:nowrap}
.lien-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--enc);
 transform-origin:right;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.lien-f:hover::after{transform:scaleX(0)}
.lien-f i{font-style:normal;transition:transform .45s cubic-bezier(.76,0,.24,1)}
.lien-f:hover i{transform:translateX(7px)}

/* ---------- chiffres et repères, en filets */
.reperes{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--fil);
 margin-top:clamp(3rem,6vw,5rem)}
@media(max-width:760px){.reperes{grid-template-columns:1fr}}
.reperes div{padding:1.9rem 1.9rem 1.9rem 0;border-right:1px solid var(--fil)}
.reperes div:last-child{border-right:0}
.reperes b{display:block;font-family:'Cormorant Garamond',serif;font-size:1.75rem;font-weight:500;
 margin-bottom:.25rem}
.reperes span{font-size:.88rem;color:var(--doux)}

/* ---------- prestations : une liste, pas des cartes */
.presta{border-top:1px solid var(--fil)}
.presta > a{display:grid;grid-template-columns:3.4rem 1fr auto;gap:2rem;align-items:baseline;
 padding:2.2rem 0;border-bottom:1px solid var(--fil);position:relative;transition:padding-left .5s cubic-bezier(.76,0,.24,1)}
.presta > a:hover{padding-left:1.4rem}
.presta > a::before{content:"";position:absolute;inset:0;background:var(--acc);opacity:0;
 transition:opacity .45s;z-index:-1}
.presta .no{font-size:.78rem;letter-spacing:.2em;color:var(--doux);padding-top:.5rem}
.presta h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,3vw,2.5rem);
 font-weight:400;letter-spacing:-.01em;margin-bottom:.5rem}
.presta p{color:var(--doux);font-size:1.02rem;max-width:64ch;margin:0}
.presta .fl{font-size:1.1rem;color:var(--doux);transition:transform .45s cubic-bezier(.76,0,.24,1),color .3s}
.presta > a:hover .fl{transform:translateX(8px);color:var(--acc)}
.presta ul{margin:.9rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
 font-size:.86rem;color:var(--doux)}
.presta li{position:relative;padding-left:.9rem}
.presta li::before{content:"";position:absolute;left:0;top:.72rem;width:4px;height:1px;background:var(--acc)}
@media(max-width:700px){
 .presta > a{grid-template-columns:1fr;gap:.5rem;padding:1.8rem 0}
 .presta .no{padding-top:0;font-size:.72rem}
 .presta .fl{display:none}
 .presta ul{gap:.3rem 1.1rem}
 .presta h3{font-size:1.85rem}}

/* ---------- deux colonnes texte/dessin */
.duo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.4rem,6vw,6rem);align-items:center}
@media(max-width:920px){.duo{grid-template-columns:1fr}}

/* ---------- étapes */
.etapes{display:grid;gap:0;margin-top:3rem}
.etape{display:grid;grid-template-columns:6rem 1fr;gap:2rem;padding:2rem 0;
 border-top:1px solid var(--fil)}
.etape:last-child{border-bottom:1px solid var(--fil)}
.etape b{font-family:'Cormorant Garamond',serif;font-size:2.2rem;font-weight:400;color:var(--acc);
 line-height:1}
.etape p{color:var(--doux);margin:.4rem 0 0;font-size:.97rem;max-width:62ch}
@media(max-width:600px){.etape{grid-template-columns:1fr;gap:.6rem}}

/* ---------- secteur */
.communes{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:2.4rem 0 0;padding:0;list-style:none}
@media(max-width:620px){.communes{grid-template-columns:1fr}}
.communes a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
 padding:1.05rem 0;border-bottom:1px solid var(--fil);transition:padding-left .45s cubic-bezier(.76,0,.24,1)}
.communes a:hover{padding-left:.9rem}
.communes em{font-style:normal;font-size:.86rem;color:var(--doux);font-variant-numeric:tabular-nums}

/* ---------- questions */
details{border-bottom:1px solid var(--fil)}
summary{cursor:pointer;list-style:none;padding:1.5rem 0;display:flex;justify-content:space-between;
 gap:2rem;align-items:center;font-size:1.04rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"";width:11px;height:11px;border-right:1px solid var(--acc);
 border-bottom:1px solid var(--acc);transform:rotate(45deg);flex:none;margin-bottom:5px;
 transition:transform .45s cubic-bezier(.76,0,.24,1)}
details[open] summary::after{transform:rotate(-135deg);margin-bottom:0}
details p{color:var(--doux);padding:0 0 1.5rem;margin:0;max-width:74ch;font-size:.98rem}

/* ---------- demande */
.demande{background:var(--enc);color:var(--fond)}
.demande .sur,.demande .intro{color:color-mix(in oklab,var(--fond) 80%,transparent)}
.demande h2{color:var(--fond)}
.demande .duo{align-items:start}
form{display:grid;gap:0}
label{display:grid;padding:1.15rem 0;border-bottom:1px solid color-mix(in oklab,var(--fond) 24%,transparent);
 font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
 color:color-mix(in oklab,var(--fond) 76%,transparent)}
input,textarea{font:inherit;font-size:1.05rem;font-weight:400;border:0;background:transparent;
 color:var(--fond);padding:.5rem 0 0;width:100%}
input:focus,textarea:focus{outline:0}
textarea{min-height:92px;resize:vertical}
.duo-c{display:grid;grid-template-columns:1fr 1fr;gap:0 2.4rem}
@media(max-width:560px){.duo-c{grid-template-columns:1fr}}
button{font:inherit;cursor:pointer;margin-top:2.2rem;padding:1.15rem 2.4rem;background:transparent;
 color:var(--fond);border:1px solid color-mix(in oklab,var(--fond) 34%,transparent);border-radius:999px;
 font-size:.84rem;letter-spacing:.18em;text-transform:uppercase;
 transition:background .4s,color .4s,border-color .4s}
button:hover{background:var(--fond);color:var(--enc);border-color:var(--fond)}
.miel{position:absolute;left:-9999px}
.merci{display:none;margin-top:1.6rem;font-size:1.05rem}

/* ---------- pied */
footer{padding:clamp(3rem,6vw,5rem) 0 2.4rem;font-size:.9rem;color:var(--doux)}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4rem}
@media(max-width:760px){footer .cols{grid-template-columns:1fr}}
footer b{display:block;color:var(--enc);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
 margin-bottom:1.1rem;font-weight:500}
footer a{display:block;padding:.22rem 0;transition:color .3s}
footer a:hover{color:var(--acc)}
.bas{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--fil);font-size:.8rem;
 display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between}

/* ---------- preuve : la note Google, la décennale, le délai. Mesurés, jamais inventés. */
.preuve{display:flex;flex-wrap:wrap;gap:1.2rem 2.6rem;align-items:center;
 padding:1.5rem 0;border-top:1px solid var(--fil);border-bottom:1px solid var(--fil);
 margin-top:clamp(2rem,4vw,3rem);font-size:.95rem}
.preuve .note{display:flex;align-items:center;gap:.7rem}
.preuve .etoiles{color:var(--acc);letter-spacing:.12em;font-size:1.02rem}
.preuve b{font-weight:500}
.preuve span{color:var(--doux)}
.preuve a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:.5px}

/* ---------- barre d'appel : sur un téléphone, l'action c'est appeler */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;
 grid-template-columns:1fr 1fr;background:var(--enc);color:var(--fond)}
.barre a{padding:1.05rem;text-align:center;font-size:.88rem;letter-spacing:.08em;
 text-transform:uppercase}
.barre a:first-child{background:var(--acc);color:#fff}
@media(max-width:820px){.barre{display:grid}body{padding-bottom:58px}}

/* ---------- apparitions : lentes, courtes, jamais de rebond */
.ap{opacity:0;transform:translateY(20px);
 transition:opacity 1s cubic-bezier(.16,.84,.3,1),transform 1s cubic-bezier(.16,.84,.3,1)}
.ap.vu{opacity:1;transform:none}
.derive{will-change:transform}
@media(prefers-reduced-motion:reduce){
 .ap{opacity:1;transform:none;transition:none}
 .hero h1 .l span{transform:none;animation:none}
 .voile{display:none}
 .derive{transform:none!important}
 html{scroll-behavior:auto}}

/* ---------- LE PLAN QUI SE DESSINE
   L'effet « wahou » du site, et il dit le métier au lieu de le décorer : un plan
   d'appartement se trace au fil du défilement, murs d'abord, cloisons ensuite, puis les
   cotes et les noms de pièces. Tout est en SVG — aucune image, aucune vidéo, 12 Ko.
   Le tracé est piloté par la position dans la page : on remonte, il s'efface. */
.plan-zone{position:relative;min-height:210vh}
.plan-colle{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:clamp(1.2rem,3vh,2.4rem);overflow:hidden;
 padding:clamp(4rem,9vh,6rem) 0 clamp(2rem,5vh,3.4rem)}
.plan-svg{width:min(86vw,860px);max-height:52vh}
.plan-svg .mur,.plan-svg .cloison,.plan-svg .cote{
 stroke-dasharray:var(--l);stroke-dashoffset:var(--l)}
.plan-svg text{opacity:0;transition:opacity .5s ease}
.plan-svg .surgi{opacity:1}
.plan-legende{text-align:center;max-width:60ch;padding-inline:1.2rem}
.plan-legende .sur{margin:0 0 .6rem}
.plan-legende h2{font-size:clamp(1.6rem,3.4vw,2.9rem)}
.plan-legende p{color:var(--doux);max-width:46ch;margin:.8rem auto 0;font-size:.98rem}
@media(max-width:700px){.plan-zone{min-height:170vh}}
@media(prefers-reduced-motion:reduce){
 .plan-svg .mur,.plan-svg .cloison,.plan-svg .cote{stroke-dashoffset:0}
 .plan-svg text{opacity:1}}