:root{--creme:#f6f1e8;--creme-2:#ede5d6;--blanc:#fdfbf7;--noyer:#3a2a1d;--brun:#1e1611;--laiton:#c8963e;--laiton-2:#e0b25c;--gris:#7d746a;--trait:rgba(58,42,29,.14);--r:20px;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--brun);font-family:"Instrument Sans",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.disp{font-family:"Fraunces","Georgia",serif;font-weight:600;letter-spacing:-.015em;line-height:1.05;margin:0;font-variation-settings:"opsz" 144,"SOFT" 40}
a{color:inherit}svg{max-width:100%}
.wrap{width:min(1180px,calc(100% - 40px));margin-inline:auto}
@media(max-width:600px){.wrap{width:calc(100% - 32px)}}
.bois{position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .23 0 0 0 0 .16 0 0 0 0 .11 0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");mix-blend-mode:multiply}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(246,241,232,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--trait)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:16px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo .m{width:34px;height:34px;border-radius:8px;background:var(--noyer);display:grid;place-items:center;color:var(--laiton-2)}
.logo .m svg{width:20px;height:20px}
.logo b{font-family:"Fraunces",serif;font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1}.logo small{display:block;font-family:"Instrument Sans",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-top:3px}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}.nav ul a{text-decoration:none;font-size:15px;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-7px;height:1.5px;width:0;background:var(--laiton);transition:width .35s var(--ease)}.nav ul a:hover::after{width:100%}
@media(max-width:860px){.nav ul{display:none}}
@media(max-width:600px){.logo small{display:none}.logo b{font-size:17px;white-space:nowrap}.nav .btn{padding:12px 14px}.nav .btn .num{display:none}.nav .wrap{height:62px}}
.btn{--bg:var(--noyer);--fg:var(--creme);display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:999px;background:var(--bg);color:var(--fg);text-decoration:none;font-weight:600;border:0;cursor:pointer;font-size:16px;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:radial-gradient(140px 70px at var(--mx,50%) var(--my,50%),rgba(224,178,92,.45),transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -14px rgba(58,42,29,.6)}.btn:hover::before{opacity:1}
.btn.or{--bg:var(--laiton);--fg:var(--brun)}.btn.ghost{--bg:transparent;--fg:currentColor;border:1.5px solid currentColor}.btn.ghost:hover{box-shadow:none;background:rgba(0,0,0,.04)}
.btn svg{width:18px;height:18px}
/* hero */
.hero{position:relative;overflow:hidden;min-height:min(90vh,860px);display:flex;align-items:center;background:linear-gradient(180deg,var(--creme) 0%,var(--creme-2) 100%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:80px 0 70px}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;padding:56px 0 40px}}
.sur{display:inline-flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-bottom:22px;font-weight:600}
.sur::before{content:"";width:36px;height:1.5px;background:currentColor}
.h1{font-size:clamp(40px,6.4vw,84px);max-width:13ch}
.h1 .l{display:block;overflow:hidden}.h1 .l span{display:inline-block;transform:translateY(105%);animation:monte 1s var(--ease) forwards}
.h1 .l:nth-child(2) span{animation-delay:.12s}.h1 .l:nth-child(3) span{animation-delay:.24s}
.h1 em{font-style:italic;color:var(--laiton);font-weight:500}
@keyframes monte{to{transform:none}}
.lead{font-size:clamp(17px,1.5vw,20px);max-width:44ch;color:#4d4137;margin:26px 0 32px;animation:fondu 1s .5s both}
@keyframes fondu{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cta{display:flex;gap:14px;flex-wrap:wrap;animation:fondu 1s .7s both}
.badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:46px;font-size:14px;color:#4d4137;animation:fondu 1s .9s both}
.badges b{color:var(--noyer);font-weight:600}
/* la fenêtre dessinée */
.vitrine{position:relative;aspect-ratio:4/5;max-width:520px;justify-self:end;width:100%}
@media(max-width:900px){.vitrine{max-width:380px;justify-self:center}}
.vitrine svg{width:100%;height:100%;overflow:visible}
.vitrine .cadre{fill:none;stroke:var(--noyer);stroke-width:3}
.vitrine .trait{fill:none;stroke:var(--noyer);stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace 2.6s .3s var(--ease) forwards}
.vitrine .cote{fill:none;stroke:var(--laiton);stroke-width:1.4;stroke-dasharray:600;stroke-dashoffset:600;animation:trace 1.6s 1.6s var(--ease) forwards}
.vitrine text{font-family:"Instrument Sans",sans-serif;font-size:12px;fill:var(--laiton);letter-spacing:.06em;opacity:0;animation:fondu .8s 2.4s both}
.vitrine .vitre{fill:url(#ciel);opacity:0;animation:fondu 1.6s 1.2s both}
.vitrine .reflet{fill:rgba(255,255,255,.35);transform:translateX(-60%) skewX(-18deg);animation:reflet 7s 3s ease-in-out infinite}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes reflet{0%,15%{transform:translateX(-70%) skewX(-18deg)}45%,100%{transform:translateX(160%) skewX(-18deg)}}
/* ruban */
.ruban{background:var(--noyer);color:var(--creme);overflow:hidden;white-space:nowrap;font-family:"Fraunces",serif;font-style:italic;font-size:17px;padding:14px 0}
.ruban div{display:inline-block;animation:defile 46s linear infinite}.ruban span{padding:0 26px}.ruban span::after{content:"·";margin-left:26px;color:var(--laiton-2)}
@keyframes defile{to{transform:translateX(-50%)}}
section{padding:clamp(72px,9vw,120px) 0;position:relative}
.h2{font-size:clamp(32px,4.4vw,56px);max-width:20ch}
.kick{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--laiton);margin-bottom:16px;font-weight:600}
.intro{font-size:clamp(17px,1.35vw,20px);max-width:58ch;color:#4d4137;margin-top:18px}
.grille{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:48px}
.carte{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r);padding:30px 28px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.carte::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--laiton);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.carte:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(58,42,29,.4);border-color:rgba(200,150,62,.5)}.carte:hover::after{transform:none}
.carte .ic{width:58px;height:58px;color:var(--noyer);margin-bottom:18px}
.carte .ic .d{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.2s var(--ease)}
.carte.in .ic .d,.carte:hover .ic .d{stroke-dashoffset:0}
.carte h3{font-size:25px;margin-bottom:8px}.carte p{margin:0 0 14px;color:#4d4137}
.carte ul{margin:0;padding:0;list-style:none;font-size:15px;color:#4d4137}.carte li{padding:7px 0;border-top:1px dashed var(--trait);display:flex;gap:10px}
.carte li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--laiton);margin-top:9px;flex:none}
/* sur mesure : la règle */
.sombre{background:var(--brun);color:var(--creme)}.sombre .intro{color:rgba(246,241,232,.75)}
.regle{margin-top:48px;position:relative;height:74px}
.regle svg{width:100%;height:100%;overflow:visible}
.regle .base{fill:none;stroke:rgba(246,241,232,.35);stroke-width:1.5}
.regle .grad{stroke:rgba(246,241,232,.55);stroke-width:1.5;stroke-dasharray:0 1;transition:stroke-dasharray 1.4s var(--ease)}
.regle .grad.long{stroke:var(--laiton-2)}
.regle.in .grad{stroke-dasharray:1 0}
.regle .curseur{fill:var(--laiton);transition:transform 2.2s var(--ease)}.regle.in .curseur{transform:translateX(var(--x,0))}
.regle text{font-family:"Instrument Sans",sans-serif;font-size:12px;fill:rgba(246,241,232,.6)}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
@media(max-width:760px){.etapes{grid-template-columns:1fr}}
.etape{padding:26px;border:1px solid rgba(246,241,232,.14);border-radius:var(--r);background:rgba(246,241,232,.03)}
.etape i{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--laiton);color:var(--brun);font-style:normal;font-weight:700;font-family:"Fraunces",serif;margin-bottom:16px}
.etape h3{font-size:24px;margin-bottom:10px}.etape p{margin:0;opacity:.82}
/* zone : la route */
.route{margin-top:48px;position:relative;padding:20px 0 0}
.route .ligne{position:relative;height:2px;background:var(--trait);margin:70px 0 100px}
.route .ligne::after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--p,0%);background:var(--laiton);transition:width 2s var(--ease)}
.route .pt{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:var(--noyer);border:3px solid var(--creme);box-shadow:0 0 0 1px var(--trait);transition:transform .3s var(--ease),background .3s}
.route .pt.home{background:var(--laiton);width:16px;height:16px}
.route .pt span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;color:#4d4137;top:18px}
.route .pt:nth-child(even) span{top:auto;bottom:18px}.route .pt.fin span{left:auto;right:0;transform:none;text-align:right}
.route .pt:hover{transform:translate(-50%,-50%) scale(1.35);background:var(--laiton)}
.route .pt b{font-family:"Fraunces",serif;font-weight:600;color:var(--brun);display:block;font-size:15px}
@media(max-width:760px){.route{display:none}}
.communes{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.communes li a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;white-space:nowrap;padding:16px 18px;border:1px solid var(--trait);border-radius:14px;text-decoration:none;background:var(--blanc);transition:transform .3s var(--ease),border-color .3s}
.communes li a:hover{transform:translateY(-3px);border-color:var(--laiton)}
.communes b{font-family:"Fraunces",serif;font-weight:600;font-size:18px}.communes small{color:var(--gris);font-variant-numeric:tabular-nums;font-size:13px}
/* devis */
.devis{background:var(--noyer);color:var(--creme)}
.devis .box{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media(max-width:900px){.devis .box{grid-template-columns:1fr}}
.devis .intro{color:rgba(246,241,232,.8)}
form.f{background:var(--blanc);color:var(--brun);border-radius:24px;padding:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.f .prog{display:flex;gap:6px;margin-bottom:22px}.f .prog i{flex:1;height:4px;border-radius:4px;background:var(--creme-2);overflow:hidden;position:relative}
.f .prog i::after{content:"";position:absolute;inset:0;background:var(--laiton);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.f .prog i.on::after{transform:none}
.f fieldset{border:0;padding:0;margin:0;display:none}.f fieldset.on{display:block;animation:fondu .5s both}
.f legend{font-family:"Fraunces",serif;font-size:24px;font-weight:600;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}.chips label{cursor:pointer}.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;padding:11px 16px;border-radius:999px;border:1.5px solid var(--trait);background:#fff;font-weight:600;transition:all .25s var(--ease)}
.chips input:checked+span{background:var(--noyer);color:var(--creme);border-color:var(--noyer);transform:translateY(-1px)}
.f .row{display:grid;gap:12px;margin-top:14px}.f label.t{display:block;font-size:14px;font-weight:600;margin:12px 0 6px;color:#4d4137}
.f input[type=text],.f input[type=tel],.f input[type=email],.f textarea,.f select{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--trait);background:#fff;font:inherit;color:inherit;transition:border-color .25s,box-shadow .25s}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--laiton);box-shadow:0 0 0 4px rgba(200,150,62,.2)}
.f textarea{min-height:120px;resize:vertical}
.f .act{display:flex;justify-content:space-between;gap:12px;margin-top:22px;align-items:center}
.f .retour{background:none;border:0;font:inherit;color:var(--gris);cursor:pointer;padding:8px 0}
.f .erreur{color:#9b2c1e;font-size:14px;margin-top:10px;min-height:1.2em}
.f .ok{display:none;text-align:center;padding:30px 10px}.f.ok fieldset,.f.ok .prog,.f.ok .act{display:none}.f.ok .ok{display:block;animation:fondu .6s both}
.f .ok svg{width:72px;height:72px;color:var(--laiton);margin-bottom:14px}.f .ok .d{stroke-dasharray:80;stroke-dashoffset:80;animation:trace2 1s .2s var(--ease) forwards}
@keyframes trace2{to{stroke-dashoffset:0}}.f .ok h3{font-size:26px;margin-bottom:8px}
.devis .args{display:grid;gap:18px;margin-top:28px}.devis .args div{display:flex;gap:14px;align-items:flex-start}
.devis .args svg{width:26px;height:26px;color:var(--laiton-2);flex:none;margin-top:2px}.devis .args p{margin:0}
/* faq */
details{border-top:1px solid var(--trait);padding:6px 0}details:last-of-type{border-bottom:1px solid var(--trait)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 0;font-family:"Fraunces",serif;font-weight:600;font-size:21px}
summary::-webkit-details-marker{display:none}
summary i{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--trait);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease),background .35s;font-style:normal;font-weight:400;font-family:"Instrument Sans",sans-serif}
details[open] summary i{transform:rotate(45deg);background:var(--laiton);border-color:var(--laiton);color:var(--brun)}
details p{margin:0 0 18px;color:#4d4137;max-width:72ch}
footer{background:var(--brun);color:rgba(246,241,232,.75);padding:56px 0 110px;font-size:14px}
footer .wrap{display:grid;gap:22px;grid-template-columns:1.2fr 1fr 1fr}
@media(max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer b{color:var(--creme);font-family:"Fraunces",serif;font-size:19px;display:block;margin-bottom:8px}
footer a{color:inherit}footer ul{list-style:none;padding:0;margin:0}footer li{padding:3px 0}
.barre{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(30,22,17,.92);backdrop-filter:blur(10px);gap:10px}
.barre .btn{flex:1;justify-content:center}@media(max-width:760px){.barre{display:flex}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}
.tete{background:var(--noyer);color:var(--creme);padding:80px 0 60px;position:relative;overflow:hidden}
.tete .h1{font-size:clamp(34px,5.4vw,70px);max-width:18ch}.tete .lead{animation:none;color:rgba(246,241,232,.82)}.tete .sur{color:var(--laiton-2)}
.fil{font-size:14px;opacity:.7;margin-bottom:18px}.fil a{text-decoration:none}
.texte{max-width:70ch;font-size:18px;color:#3d332a}.texte p{margin:0 0 18px}
.mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:36px}
.mini a{display:block;padding:20px;border:1px solid var(--trait);border-radius:16px;text-decoration:none;background:var(--blanc);transition:transform .3s var(--ease),border-color .3s}
.mini a:hover{transform:translateY(-4px);border-color:var(--laiton)}.mini b{font-family:"Fraunces",serif;font-weight:600;font-size:19px;display:block}.mini small{color:var(--gris)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.h1 .l span{transform:none}.vitrine .trait,.vitrine .cote{stroke-dashoffset:0}.vitrine text,.vitrine .vitre{opacity:1}}