

:root{--paper:#fff;--ink:#000;--soft:#6b6b6b;--rule:#d9d9d9;--card:#f2f2f2;--gut:clamp(18px,3vw,44px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.5 "DM Sans",system-ui,sans-serif;padding-bottom:190px;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit}
p{margin:0}
.h{font-family:"Bodoni Moda",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.015em}
.m{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:400;letter-spacing:-.04em}
.s{font-family:"DM Sans",sans-serif;font-weight:600;letter-spacing:-.045em}
.tag{font:400 15px/1.35 "DM Sans",sans-serif;color:var(--soft)}
.hero{padding:clamp(24px,5vh,70px) var(--gut) clamp(30px,5vh,60px)}
.hero h1{margin:0;font-size:clamp(46px,10.4vw,190px);line-height:.98;font-weight:400}
.hero h1 span{display:block}
.hero h1 .h{font-size:.84em;white-space:nowrap;letter-spacing:-.03em;line-height:1.1}
@media (max-width:760px){.hero h1 .h{font-size:.9em;white-space:normal}}
.hero h1 .m{font-size:.8em;line-height:1.16;text-align:right}
.hero h1 .s{line-height:1.02}
@keyframes in{from{opacity:.15;transform:translateY(8px)}}
.sub{display:grid;grid-template-columns:1fr minmax(0,560px);gap:24px;margin-top:clamp(26px,4vh,48px);align-items:end}
.sub p{font-size:clamp(20px,2vw,26px);line-height:1.3}
.list{padding:clamp(60px,10vw,140px) var(--gut);border-top:1px solid var(--rule)}
.list ol{list-style:none;margin:26px 0 0;padding:0;font-size:clamp(46px,9.4vw,158px);line-height:1.02}
.list li{position:relative;width:max-content;max-width:100%;color:var(--soft);font-family:"DM Sans";font-weight:600;letter-spacing:-.05em}
.list li:after{content:"";position:absolute;left:-.04em;right:-.04em;top:53%;height:.075em;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.list li.x:after{transform:scaleX(1)}
.list li.keep{color:var(--ink);font:italic 400 1.12em/1.1 "Bodoni Moda",serif;letter-spacing:-.02em;margin-top:.12em}
.list li.keep:after{display:none}
.big{font-size:clamp(34px,5.6vw,92px);line-height:1.04;margin:0;font-weight:400}
.qt{padding:clamp(60px,9vw,130px) var(--gut) 0}.qt blockquote{margin:0;font:italic 400 clamp(30px,4.8vw,84px)/1.08 "Bodoni Moda",serif;letter-spacing:-.02em;max-width:17em}.qt p{margin-top:14px}
.sub .acts{margin-top:18px}
.best{padding:clamp(60px,9vw,130px) var(--gut);border-top:1px solid var(--rule)}
.best h2{font-size:clamp(46px,8.8vw,160px);line-height:1.02;margin:0;font-weight:400}.best h2 span{display:block}.best h2 .m{font-size:.86em;text-align:right}
.best-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);margin-top:clamp(36px,6vw,80px)}
.best-y{font-size:clamp(34px,4.6vw,84px);line-height:1;margin:0}.best-t{font-size:clamp(20px,2vw,27px);line-height:1.25;margin-top:14px;max-width:24em}
.best ul{list-style:none;margin:0;padding:0}.best li{font-size:clamp(28px,3.6vw,64px);line-height:1.05;letter-spacing:-.045em;font-weight:500;padding:8px 0;border-top:1px solid var(--rule)}.best li.s2{font-size:clamp(18px,1.6vw,23px);letter-spacing:0;font-weight:400;padding-top:12px}
.who{padding:clamp(60px,9vw,130px) var(--gut);background:var(--paper);color:var(--ink);border-top:1px solid var(--rule)}
.who .tag{color:inherit;opacity:.65}
.rows{margin-top:clamp(30px,5vw,70px)}
.row{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--rule);align-items:baseline}
.row b{font-weight:600;font-size:clamp(20px,2.1vw,30px);letter-spacing:-.03em}
.row .h{font-size:clamp(23px,2.4vw,34px)}.row .m{font-size:clamp(15px,1.4vw,19px);letter-spacing:-.02em}
.row.hd{border:0;padding-bottom:6px}
.off{padding:clamp(60px,9vw,130px) var(--gut) 0}
.off a{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:baseline;text-decoration:none;padding:clamp(18px,2.4vw,34px) 0;border-top:1px solid var(--rule);transition:padding .25s}
.off a:last-child{border-bottom:1px solid var(--rule)}
.off a:hover{padding-left:18px}.off a:hover .off h3{margin:0;font-size:clamp(36px,6vw,98px);line-height:1;font-weight:400}
.off p{font-size:18px;line-height:1.35}
.us{margin:clamp(70px,10vw,150px) var(--gut) 0;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:end}
.us img{width:100%;height:auto;display:block;border-radius:6px}
.names{font-size:clamp(25px,3vw,44px);line-height:1.14;margin-top:20px}
.names i{font-style:normal;color:var(--soft)}
.end{margin-top:clamp(70px,10vw,150px);padding:clamp(40px,7vw,100px) var(--gut) 40px;border-top:1px solid var(--rule)}
.end h2{font-size:clamp(50px,13vw,226px);line-height:.95;margin:0;font-weight:400}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-block;padding:13px 20px;border-radius:40px;border:1px solid var(--ink);text-decoration:none;font-size:17px}
.btn.f{background:var(--ink);color:var(--paper)}
.bar{border:1px solid rgba(255,255,255,.2);position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));background:var(--ink);color:var(--paper);border-radius:16px;padding:12px 14px;z-index:9;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.bar-t{display:flex;justify-content:space-between;gap:10px;font:400 12px/1.3 "JetBrains Mono",monospace;opacity:.75;margin-bottom:8px}

.chips button,.act button{font:inherit;cursor:pointer;border-radius:30px;border:1px solid color-mix(in srgb,var(--paper) 35%,transparent);background:none;color:inherit;padding:6px 11px;font-size:14.5px;white-space:nowrap}
.chips,.act{display:flex;gap:6px;margin-top:2px;overflow-x:auto;scrollbar-width:none}
.chips button:hover{background:color-mix(in srgb,var(--paper) 14%,transparent)}
.act{display:none;align-items:center}.bar.pending .act{display:flex}.bar.pending .chips,.bar.work .chips{display:none}
.act span{font-size:14.5px;flex:1;min-width:0}
.act .pub{background:var(--paper);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.dem{padding:clamp(60px,9vw,130px) var(--gut);border-top:1px solid var(--rule)}
.dem h2{font-size:clamp(40px,7.6vw,132px);line-height:1;margin:14px 0 0;font-weight:400}
.dem h2 span{display:block}
.pr{margin:clamp(26px,3vw,44px) 0;font:400 clamp(17px,2vw,27px)/1.5 "JetBrains Mono",monospace;letter-spacing:-.03em}
.pr b{font-weight:400;color:var(--ink)}
.dem-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.dem-g>div{padding:18px 18px 0;border-left:1px solid var(--rule)}.dem-g>div:first-child{border-left:0;padding-left:0}
.dem-g b{display:block;font-weight:600;font-size:clamp(23px,2.3vw,34px);line-height:1.08;letter-spacing:-.035em}
.log{display:none;font:400 13.5px/1.55 "JetBrains Mono",monospace}.bar.work .log{display:block}
.log div{opacity:.5}.log div.on{opacity:1}.log div.on:before{content:"> ";color:var(--ink)}.log div.ok:before{content:"ok ";color:var(--ink)}
.busy{background:var(--ink);color:var(--paper);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scan{position:fixed;left:0;right:0;top:0;height:34vh;background:#fff;mix-blend-mode:difference;z-index:8;display:none;pointer-events:none}
.working .scan{display:block;animation:scan 1.5s cubic-bezier(.7,0,.3,1) infinite alternate}
@keyframes scan{from{transform:translateY(-34vh)}to{transform:translateY(100vh)}}
.strips{position:fixed;inset:0;display:grid;grid-template-columns:repeat(10,1fr);z-index:7;pointer-events:none;margin-right:-1px}
.strips i{background:#000;transform:scaleY(0);transform-origin:top}.strips i:nth-child(even){background:#fff;transform-origin:bottom}
.strips.go i{animation:st 1.5s cubic-bezier(.76,0,.24,1) both;animation-delay:calc(var(--n)*45ms)}
@keyframes st{0%{transform:scaleY(0)}42%,58%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
.strips.go i:nth-child(even){animation-name:st2}
@keyframes st2{0%{transform:scaleY(0)}42%,58%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:top}}
.hero h1.pop{animation:hp .9s cubic-bezier(.16,1,.3,1)}
@keyframes hp{from{transform:scale(1.5);opacity:0}}
[data-style=pop]{--paper:#ffd400;--ink:#000;--soft:#000;--rule:#000;--card:#fff}
[data-style=pop] main .h,[data-style=pop] main .m,[data-style=pop] main .s,[data-style=pop] .list li,[data-style=pop] .list li.keep,[data-style=pop] .dem-g b{font-family:"Anton",sans-serif;font-style:normal;font-weight:400;line-height:1.02;letter-spacing:.005em;text-transform:uppercase}
[data-style=pop] .hero h1{text-align:center;font-size:clamp(54px,13.6vw,240px)}
[data-style=pop] .hero h1 .h,[data-style=pop] .hero h1 .m,[data-style=pop] .hero h1 .s{font-size:.72em;text-align:center;line-height:1.08}
[data-style=pop] .hero h1 .s{font-size:1.04em}
[data-style=pop] .dem{--paper:#ff3b30;background:var(--paper);border:0}
[data-style=pop] .dem-g{border:0;gap:14px}[data-style=pop] .dem-g>div{background:#fff;border:3px solid #000;box-shadow:8px 8px 0 #000;padding:18px}[data-style=pop] .dem-g b{font-size:clamp(23px,2.5vw,36px)}
[data-style=pop] .list{--paper:#2546ff;--ink:#fff;--soft:#fff;background:var(--paper);color:#fff;border:0}
[data-style=pop] .off{padding-bottom:clamp(40px,6vw,90px)}[data-style=pop] .btn{border-radius:0;border:3px solid #000;box-shadow:5px 5px 0 #000}
[data-style=pop] .btn.f{background:#ff3b30;color:#000}
[data-style=pop] .us img{border:4px solid #000;box-shadow:12px 12px 0 #000;border-radius:0}[data-style=pop] .end{border:0}
[data-style=maison]{--paper:#10261f;--ink:#efe6d2;--soft:#b9ae97;--rule:#3a5247;--card:#1a352c}
[data-style=maison] main .h,[data-style=maison] main .m,[data-style=maison] main .s,[data-style=maison] .list li,[data-style=maison] .list li.keep,[data-style=maison] .dem-g b{font-family:"Bodoni Moda",serif;font-style:italic;font-weight:400;letter-spacing:-.02em;text-transform:none}
[data-style=maison] main section{text-align:center}
[data-style=maison] .hero h1{font-size:clamp(44px,8vw,150px);line-height:1.16}[data-style=maison] .hero h1 .h,[data-style=maison] .hero h1 .m,[data-style=maison] .hero h1 .s{font-size:1em;text-align:center}
[data-style=maison] .sub{grid-template-columns:1fr;justify-items:center}[data-style=maison] .sub p{max-width:30em}
[data-style=maison] .list li{width:auto}[data-style=maison] .list ol{font-size:clamp(40px,6.6vw,110px)}[data-style=maison] .list li:after{height:.03em}
[data-style=maison] .row,[data-style=maison] .off a{justify-items:center}[data-style=maison] .dem-g{border:0}[data-style=maison] .dem-g>div{border:0}
[data-style=maison] .us{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}[data-style=maison] .acts{justify-content:center}
[data-style=maison] .x3d{background:#0a1a15;color:#efe6d2}[data-style=maison] .pr b{display:none}[data-style=maison] .btn{border-radius:0}
#rdvs{display:none;margin:clamp(60px,8vw,110px) var(--gut) 0;padding-top:24px;border-top:1px solid var(--ink)}
#rdvs.on{display:block}
.skel{height:230px;border-radius:6px;background:linear-gradient(100deg,var(--rule) 30%,var(--card) 50%,var(--rule) 70%);background-size:300% 100%;animation:sk 1s linear infinite}
@keyframes sk{from{background-position:120% 0}to{background-position:-60% 0}}
.rdv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,4vw,60px);align-items:start}
.cal{width:100%;height:720px;border:2px solid var(--ink);border-radius:6px;background:#fff;display:block}
@media (max-width:760px){.best-g{grid-template-columns:1fr}.best h2 .m{text-align:left}}
@media (max-width:760px){body{padding-bottom:200px;font-size:17px}.sub,.us,.dem-g,.rdv{grid-template-columns:1fr}.dem-g>div{border-left:0;border-top:1px solid var(--rule);padding:16px 0}.sub div:first-child{display:none}.row{grid-template-columns:1fr 1fr;gap:4px 14px}.row b{grid-column:1/-1}.row.hd{display:none}.off a{grid-template-columns:1fr}.list li{width:auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.scan{display:none!important}html{scroll-behavior:auto}}

.ld{position:fixed;inset:0;background:var(--ink);color:var(--paper);z-index:20;display:grid;place-items:center;font:italic 400 clamp(70px,14vw,200px)/1 "Bodoni Moda",serif;transition:clip-path .9s cubic-bezier(.8,0,.15,1);clip-path:inset(0 0 0 0)}
.ld b{color:var(--ink);font-weight:400}.ld.off{clip-path:inset(0 0 100% 0)}
.dots{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero{position:relative;overflow:hidden}.hero>*:not(.dots){position:relative;z-index:1}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .03em .16em 0;margin:-.08em -.03em -.16em 0}
.w i{display:inline-block;font-style:inherit;transform:translateY(112%) rotate(4deg);transition:transform 1.05s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*55ms + .5s)}
.ready .w i{transform:none}
.sub{opacity:0;transform:translateY(16px);transition:1s 1.1s}.ready .sub{opacity:1;transform:none}
.bar{opacity:0;transition:opacity .6s 1.5s}.ready .bar{opacity:1}
.x3d{height:420vh;position:relative;background:var(--ink);color:var(--paper)}
.x3d-s{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;padding:0 var(--gut);perspective:1700px}
.x3d .tag{color:inherit;opacity:.65}
.x3d-t{position:relative;z-index:3;min-height:300px}
.x3d-t>div{position:absolute;left:0;top:0;right:0;opacity:0;transform:translateY(24px);transition:.5s}
.x3d-t>div.on{opacity:1;transform:none}
.x3d-t h2{margin:10px 0 0;font-size:clamp(44px,6.6vw,116px);line-height:1;font-weight:400}
.x3d-t p{margin-top:14px;font-size:clamp(18px,1.7vw,23px);max-width:22em;opacity:.8}
.st3{position:relative;width:min(58vw,820px);aspect-ratio:16/10;transform-style:preserve-3d;justify-self:center;will-change:transform}
.ly{position:absolute;inset:0;border-radius:10px;overflow:hidden;transform-style:preserve-3d;will-change:transform,opacity;backface-visibility:hidden}
.ly1{background:transparent;border:1.5px solid #fff}
.ly1 span{position:absolute;border:1.5px dashed #fff;border-radius:4px;font:400 12px "JetBrains Mono",monospace;padding:6px;color:#fff}
.ly2{background:#fff;color:#000;padding:5%}
.ly2 .t{font:italic 400 clamp(26px,4.6vw,66px)/1 "Bodoni Moda",serif;margin-top:6%}
.ly2 .b{position:absolute;right:5%;bottom:8%;width:36%;height:44%;background:#000;border-radius:6px}
.ly2 .c{position:absolute;left:5%;bottom:8%;width:22%;height:9%;background:#000;border-radius:40px}
.ly2 .n{display:flex;justify-content:space-between;font:400 12px "JetBrains Mono",monospace}
.ly3{background:rgba(20,19,17,.82);border:1px solid #fff;color:#fff;font:400 clamp(11px,1.15vw,16px)/1.65 "JetBrains Mono",monospace;padding:4%;white-space:pre;backdrop-filter:blur(2px)}
.ly3 b{font-weight:400;color:#fff}
.ly4{background:none;overflow:visible}
.ly4 div{position:absolute;right:3%;bottom:6%;width:48%;background:#000;color:#fff;border:1px solid #fff;border-radius:12px;padding:12px 14px;font-size:clamp(12px,1.2vw,17px);line-height:1.3;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ly4 u{text-decoration:none;display:block;color:#fff;font:400 11px "JetBrains Mono",monospace;margin-bottom:5px}
.prog{position:absolute;left:var(--gut);right:var(--gut);bottom:26px;height:1px;background:rgba(244,241,234,.2)}.prog i{display:block;height:1px;background:#fff;width:100%;transform-origin:left;transform:scaleX(0)}
.off a{position:relative;overflow:hidden;isolation:isolate}
.off a:before{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:-1}
.off a:hover{color:var(--paper);padding-left:18px}.off a:hover:before{transform:scaleX(1)}
@media (max-width:760px){.x3d-s{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;padding-top:40px;padding-bottom:170px}.x3d-t{min-height:210px}.st3{width:84vw}.x3d-t h2{font-size:42px}}
@media (prefers-reduced-motion:reduce){.ld{display:none}.w i,.sub,.bar{transform:none!important;opacity:1!important}.x3d{height:auto}.x3d-s{position:static;height:auto;padding:60px var(--gut)}.dots{display:none!important}}

/* Demandes tapées une à une, puis pastille « Fait » */
.pr-cmd>div{position:relative;padding-left:1.3em}.pr-cmd>div>b{position:absolute;left:0}.pr-cmd .t-gh{visibility:hidden;font-style:normal}
.pr-cmd>div+div{margin-top:.55em}
.pr-cmd .t-ok{display:inline-flex;align-items:center;gap:.4em;margin-left:.6em;padding:.18em .7em .2em .55em;border-radius:99px;background:var(--ink);color:var(--paper);font:500 12px/1.2 "DM Sans",sans-serif;letter-spacing:0;vertical-align:.2em;white-space:nowrap;opacity:0;transform:translateY(4px) scale(.85);transition:opacity .35s ease,transform .45s cubic-bezier(.2,1.6,.4,1)}
.pr-cmd .t-ok:before{content:"";width:.38em;height:.7em;border:solid currentColor;border-width:0 .14em .14em 0;transform:translateY(-.08em) rotate(45deg)}
.pr-cmd .t-ok.on{opacity:1;transform:none}
.pr-cmd .t-cur:after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:.08em;background:currentColor;vertical-align:-.17em;animation:t-blink 1s steps(1) infinite}
@keyframes t-blink{50%{opacity:0}}
@media (max-width:820px){.pr-cmd{font-size:16px;line-height:1.55;letter-spacing:-.02em;margin:34px 0}.pr-cmd>div{padding:14px 0 14px 1.3em;border-top:1px solid var(--r)}.pr-cmd>div>b{top:14px}.pr-cmd>div+div{margin-top:0}.pr-cmd>div:first-child{border-top:0;padding-top:4px}.pr-cmd>div:first-child>b{top:4px}.pr-cmd .t-ok{display:flex;width:max-content;margin:8px 0 0;vertical-align:0}}
/* Mobile : une coche apparaît sur chaque ligne au défilement */
@media (max-width:760px){
.best li:not(.s2){position:relative;padding-right:44px}
.best li:not(.s2):before{content:"";position:absolute;right:0;top:50%;width:24px;height:24px;margin-top:-12px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.best li:not(.s2):after{content:"";position:absolute;right:9px;top:50%;width:5px;height:10px;margin-top:-7px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .3s ease .18s}
.best li.ck:before{transform:scale(1)}
.best li.ck:after{transform:rotate(45deg) scale(1)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.best li:not(.s2):before,.best li:not(.s2):after{transition:none}}
