:root{--w:#fff;--k:#000;--g:#6b6b6b;--r:#dcdcdc;--top:62px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:#000;color:#000;font:400 16px/1.4 "DM Sans",system-ui,sans-serif;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a{color:inherit}p{margin:0}h1,h2,h3{margin:0;font-weight:500}
:focus-visible{outline:2px solid #000;outline-offset:2px}
.app{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100vh - var(--top));height:calc(100svh - var(--top))}
.stage{display:flex;flex-direction:column;min-width:0;padding:10px 12px 12px;gap:8px;background:#000}
.bar{display:flex;justify-content:space-between;gap:14px;color:#fff;font-size:14px;align-items:center;min-height:24px}
.bar .c{font:400 13px "JetBrains Mono",monospace;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dev{display:flex;gap:12px;flex:none}.dev button{color:#8d8d8d}.dev button[aria-pressed=true]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.frame{position:relative;flex:1;min-height:0;width:100%;margin:0 auto;background:#fff;overflow:hidden;border-radius:6px;transition:width .5s cubic-bezier(.7,0,.2,1);container-type:inline-size}
.frame.tablet{width:min(768px,100%)}.frame.phone{width:min(390px,100%)}
.view{position:absolute;inset:0;overflow-y:auto}
.code{position:absolute;inset:0;background:#000;color:#fff;font:400 13px/1.55 "JetBrains Mono",monospace;padding:18px;white-space:pre-wrap;word-break:break-all;overflow:hidden;z-index:3;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.76,0,.24,1)}
.code.on{clip-path:inset(0);transition:none}
.note{color:#8d8d8d;font-size:12.5px}
.side{background:#fff;overflow-y:auto;padding:0 16px 24px;min-width:0}
.grp{padding:14px 0;border-bottom:1px solid var(--r)}.grp:last-child{border-bottom:0}
.grp h2{font-size:17px;letter-spacing:-.02em;margin-bottom:9px;font-weight:600}
.lb{display:block;font-size:13.5px;color:var(--g);margin:10px 0 5px}.lb:first-of-type{margin-top:0}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{border:1.5px solid #000;border-radius:30px;padding:4px 11px;font-size:14.5px;transition:background .12s,color .12s}
.chips button:hover:not(:disabled),.chips button[aria-pressed=true]{background:#000;color:#fff}
.chips button:disabled{opacity:.3;cursor:default}
.sw{display:flex;gap:6px;flex-wrap:wrap}.sw button{width:30px;height:30px;border-radius:50%;border:1.5px solid #000}.sw button[aria-pressed=true]{box-shadow:0 0 0 2px #fff,0 0 0 4px #000}
input[type=range]{width:100%;accent-color:#000;margin:2px 0}
.hist{list-style:none;margin:0;padding:0;font-size:14px;max-height:130px;overflow:auto}.hist li{padding:3px 0;border-top:1px solid var(--r)}
.row2{display:flex;gap:6px;margin-bottom:8px}
/* Site */
.mk{--bg:#fff;--fg:#000;--ac:#000;--on:#fff;--sf:#eee;--ff:"DM Sans",sans-serif;--ht:none;--hw:500;--hs:normal;--ls:-.04em;--rad:0px;--d:1;background:var(--bg);color:var(--fg);font-family:"DM Sans",sans-serif;min-height:100%;display:flex;flex-direction:column;font-size:clamp(14px,1.45cqw,18px);line-height:1.45}
.mk h2,.mk h3,.mk .br{font-family:var(--ff);font-style:var(--hs);font-weight:var(--hw);text-transform:var(--ht);letter-spacing:var(--ls);line-height:1.02}
.mk-n{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:calc(1.8cqw*var(--d)) 3.4cqw;position:sticky;top:0;background:var(--bg);z-index:2}
.mk-n .br{font-size:clamp(18px,2.3cqw,30px)}
.mk-l{display:flex;gap:2cqw;flex-wrap:wrap}.mk-l button{color:inherit;font:inherit}.mk-l button[aria-current]{text-decoration:underline;text-underline-offset:4px}
.mk-b{background:var(--ac);color:var(--on);padding:.55em 1.05em;border-radius:var(--rad);display:inline-block;font-weight:600;white-space:nowrap}
.mk-pr{background:var(--ac);color:var(--on);text-align:center;padding:.5em 1em;font-weight:600}
.mk-h{padding:calc(7cqw*var(--d)) 3.4cqw calc(6cqw*var(--d))}
.mk-h h2{font-size:clamp(40px,9.6cqw,170px)}.mk-h p{font-size:1.32em;max-width:30em;margin:1em 0 1.3em}
.mk-h.c{text-align:center}.mk-h.c p{margin-left:auto;margin-right:auto}
.mk-h.v{display:grid;grid-template-columns:1.2fr 1fr;gap:3cqw;align-items:center}.mk-h.v h2{font-size:clamp(34px,6.8cqw,120px)}
.vis{aspect-ratio:1;border-radius:var(--rad);background:var(--ac);color:var(--on);display:grid;place-items:center;overflow:hidden}.vis svg{width:64%;height:64%}
.mk-s{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 3.4cqw calc(3.4cqw*var(--d))}
.mk-s>div{background:var(--sf);border-radius:var(--rad);padding:2.4cqw;min-height:calc(15cqw*var(--d));display:flex;flex-direction:column;justify-content:flex-end;gap:.4em}
.mk-s h3{font-size:clamp(20px,2.9cqw,44px)}
.mk-t{padding:calc(4cqw*var(--d)) 3.4cqw;display:grid;grid-template-columns:1fr 1.4fr;gap:3cqw}.mk-t h2{font-size:clamp(28px,5cqw,84px)}
.mk-t p{font-size:1.15em}
.mk-f{margin:0 3.4cqw calc(3.4cqw*var(--d));padding:2.6cqw;background:var(--ac);color:var(--on);border-radius:var(--rad);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px}
.mk-f h3{font-size:clamp(22px,3.3cqw,50px)}.mk-f span{display:flex;gap:6px;flex-wrap:wrap}.mk-f button{color:inherit;border:1px solid currentColor;border-radius:var(--rad);padding:.35em .8em;font:inherit}.mk-f button[aria-pressed=true]{background:var(--on);color:var(--ac)}
.mk-q{padding:calc(3.4cqw*var(--d)) 3.4cqw}.mk-q h2{font-size:clamp(28px,5cqw,84px);margin-bottom:.5em}
.mk-q details{border-top:1px solid var(--fg);padding:.7em 0}.mk-q summary{cursor:pointer;font-weight:600}
.mk-g{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4cqw;padding:0 3.4cqw calc(3.4cqw*var(--d))}.mk-g>div{background:var(--sf);border-radius:var(--rad);padding:2.4cqw}
.mk-g h3{font-size:clamp(20px,2.6cqw,38px);margin-bottom:.3em}
.mk-hd{padding:calc(5cqw*var(--d)) 3.4cqw calc(3cqw*var(--d))}.mk-hd h2{font-size:clamp(38px,8cqw,140px)}.mk-hd p{font-size:1.25em;margin-top:.6em;max-width:32em}
.mk-fm{padding:0 3.4cqw calc(3.4cqw*var(--d));display:grid;gap:10px;max-width:640px}.mk-fm i{font-style:normal;display:block;border:1px solid var(--fg);border-radius:var(--rad);padding:.7em;opacity:.75}
.mk-p{padding:0 3.4cqw calc(3cqw*var(--d))}.mk-p>div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--fg);padding:.75em 0}
.mk-z{margin-top:auto;padding:2.2cqw 3.4cqw;background:var(--fg);color:var(--bg);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sk{color:transparent!important;background:color-mix(in srgb,currentColor 9%,transparent)}
@container (max-width:620px){#vw:not(.wide) .mk-s,#vw:not(.wide) .mk-g,#vw:not(.wide) .mk-t,#vw:not(.wide) .mk-h.v{grid-template-columns:1fr}#vw:not(.wide) .mk-l{display:none}#vw:not(.wide) .mk-n{padding:12px 14px}#vw:not(.wide) .mk-h,#vw:not(.wide) .mk-hd,#vw:not(.wide) .mk-t,#vw:not(.wide) .mk-q{padding:32px 14px}#vw:not(.wide) .mk-s,#vw:not(.wide) .mk-g,#vw:not(.wide) .mk-p,#vw:not(.wide) .mk-fm{padding:0 14px 14px}#vw:not(.wide) .mk-s>div,#vw:not(.wide) .mk-g>div{min-height:0;padding:16px}#vw:not(.wide) .mk-f{margin:0 14px 14px;padding:16px}#vw:not(.wide) .mk-z{padding:14px}#vw:not(.wide) .mk-h h2{font-size:44px}#vw:not(.wide) .vis{aspect-ratio:2}}
@media (max-width:900px){body{overflow:auto}.app{grid-template-columns:1fr;height:auto}.stage{height:calc(82svh - var(--top));position:sticky;top:0;z-index:2}.side{overflow:visible}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Options */
.side{padding-inline:18px}.grp{padding:18px 0}.grp h2{font-size:16px;letter-spacing:-.01em;margin-bottom:12px}
.chips{gap:8px 7px;margin-bottom:2px}.chips button{border:1px solid #bdbdbd;padding:7px 13px;font-size:14.5px;line-height:1.2;transition:background .12s,color .12s,border-color .12s}.chips button:hover:not(:disabled){background:#f1f1f1;color:#000;border-color:#000}.chips button[aria-pressed=true],.chips button[aria-pressed=true]:hover:not(:disabled){background:#000;color:#fff;border-color:#000}
.lb{display:block;margin:16px 0 8px;font-size:14px;color:var(--g)}.grp h2+.lb{margin-top:0}.sw{gap:9px;margin-bottom:4px}.sw button{border-width:1px}
/* Panneau : un parcours en six étapes, et la demande en cours toujours visible */
.gi{padding-bottom:14px}.gi h1{font-size:25px;line-height:1.08;letter-spacing:-.03em;margin:0 0 6px}.gi p{color:var(--g);font-size:14.5px;line-height:1.4}
.rq{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 -18px;padding:10px 18px;background:#fff;border-top:1px solid var(--r);border-bottom:1px solid var(--r)}.rq span{display:block;font-size:12.5px;color:var(--g)}.rq p{font-size:14.5px;font-weight:500;line-height:1.25}
.rq-a{display:flex;flex:none;gap:4px}.rq-a button{padding:4px 8px;border:1px solid #cfcfcf;border-radius:7px;font-size:13px;line-height:1.2;background:#fff}.rq-a button:hover:not(:disabled){border-color:#000}.rq-a button:disabled{opacity:.35;cursor:default}
.grp h2{display:flex;align-items:center;gap:8px}.grp h2 i{flex:none;display:grid;place-items:center;width:20px;height:20px;border:1px solid #000;border-radius:50%;font:500 12px/1 "DM Sans",sans-serif}.gc h2{margin-bottom:4px}
.hp{margin:-6px 0 10px;font-size:13.5px;color:var(--g)}.rg{margin-top:4px}.rg input{display:block}
.gc p{margin-bottom:12px;font-size:15px;line-height:1.4}.gc a{display:block;padding:11px;border-radius:40px;background:#000;color:#fff;text-align:center;text-decoration:none}.grp.gc{border-bottom:0}
@media (max-width:900px){.stage{height:50svh}.rq{top:50svh}}
/* Aperçu au format choisi (ordinateur par défaut), réduit pour tenir dans l'écran */
.frame.fit{flex:none;margin:0;transition:none;transform-origin:0 0}
.stage{overflow:hidden}
.ask-ia,.sheet-h{display:none}
/* Téléphone : l'aperçu prend l'écran, les demandes s'ouvrent dans un panneau */
@media (max-width:900px){
.stage{height:calc(100svh - var(--top) - 76px)}
.gi{display:none}
.ask-ia{display:block;position:fixed;left:16px;right:16px;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;height:52px;border:0;border-radius:999px;background:#fff;color:#000;font:500 16px "DM Sans",sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08);cursor:pointer}
.side{position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:82svh;overflow-y:auto;border-radius:18px 18px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.8,.2,1);visibility:hidden;padding-bottom:28px}
.side.open{transform:none;visibility:visible}
.sheet-h{display:flex;position:sticky;top:0;z-index:4;justify-content:space-between;align-items:center;margin:0 -18px;padding:14px 18px;background:#fff;border-bottom:1px solid var(--r)}
.sheet-h b{font-size:16px;font-weight:600}
.sheet-h button{width:40px;height:40px;border:1px solid #cfcfcf;border-radius:50%;background:#fff;font-size:22px;line-height:1;cursor:pointer}
.rq{top:68px}
body.sheet-on{overflow:hidden}
.sheet-bg{position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.35)}
}
/* Maquette plus fournie, mais qui reste une maquette : images, vidéo, logos, avis et textes figurés */
.mk .ph{display:grid;place-items:center;border-radius:var(--rad);background:color-mix(in srgb,var(--fg) 9%,transparent);border:1px dashed color-mix(in srgb,var(--fg) 28%,transparent);color:color-mix(in srgb,var(--fg) 45%,transparent);aspect-ratio:4/3}
.mk .ph svg{width:clamp(44px,8cqw,110px);height:auto;stroke-width:1.1}
.mk-s.wf .ph svg{width:clamp(40px,6.5cqw,90px)}
.mk .ln{display:flex;flex-direction:column;gap:.55em;width:100%}
.mk .ln i{display:block;height:.55em;border-radius:99px;background:color-mix(in srgb,var(--fg) 14%,transparent)}
.mk-lg{display:flex;justify-content:space-between;gap:2cqw;padding:0 3.4cqw calc(3cqw*var(--d))}
.mk-lg i{flex:1;max-width:14cqw;height:4.4cqw;min-height:30px;border-radius:99px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.mk-s.wf>div{justify-content:flex-start;gap:.8em;min-height:0}
.mk-s.wf .ph{aspect-ratio:16/10;background:color-mix(in srgb,var(--fg) 7%,transparent)}
.mk-s.wf .ln{width:80%}
.mk-t.wf{grid-template-columns:1fr 1fr;align-items:center}
.mk-t.wf>div{display:flex;flex-direction:column;gap:1em;align-items:flex-start}
.mk-t.wf .ln{max-width:28em}
.mk .ph.tall{aspect-ratio:5/4}
.mk-gl,.mk-vd{padding:calc(3.4cqw*var(--d)) 3.4cqw}
.mk-gl h2,.mk-vd h2{font-size:clamp(26px,4.4cqw,72px);margin-bottom:.6em}
.mk-gl>div{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto;gap:1.2cqw}
.mk-gl .ph{aspect-ratio:auto;min-height:12cqw}.mk-gl .ph.a{grid-row:span 2}
.mk-gl .ph.d,.mk-gl .ph.e{min-height:10cqw}
.vd{position:relative;aspect-ratio:16/7;border-radius:var(--rad);background:var(--fg);color:var(--bg);display:grid;place-items:center;overflow:hidden}
.vd::before{content:"";position:absolute;inset:0;background-image:linear-gradient(45deg,transparent 49.6%,color-mix(in srgb,var(--bg) 14%,transparent) 50%,transparent 50.4%),linear-gradient(-45deg,transparent 49.6%,color-mix(in srgb,var(--bg) 14%,transparent) 50%,transparent 50.4%)}
.vd .pl{position:relative;width:clamp(68px,12cqw,150px);aspect-ratio:1;border-radius:50%;background:var(--ac);color:var(--on);display:grid;place-items:center}
.vd .pl svg{width:42%;margin-left:8%}
.vd .bar{position:absolute;left:3%;right:3%;bottom:7%;height:4px;border-radius:4px;background:color-mix(in srgb,var(--bg) 25%,transparent)}
.vd .bar i{display:block;width:32%;height:100%;border-radius:4px;background:var(--ac)}
.mk-tq{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:0 3.4cqw calc(3.4cqw*var(--d))}
.mk-tq>div{border:1px solid color-mix(in srgb,var(--fg) 18%,transparent);border-radius:var(--rad);padding:2cqw;display:flex;flex-direction:column;gap:1em}
.mk-tq b{font-family:var(--ff);font-size:3em;line-height:.6;color:var(--ac)}
.mk-tq .av{display:flex;align-items:center;gap:.7em}.mk-tq .av i{flex:none;width:2.2em;height:2.2em;border-radius:50%;background:color-mix(in srgb,var(--fg) 16%,transparent)}.mk-tq .av .ln{width:40%}
.mk-z.wf{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3cqw;padding:calc(3cqw*var(--d)) 3.4cqw;align-items:start}
.mk-z.wf .br{font-size:1.4em;display:block;margin-bottom:.8em}
.mk-z.wf .ln i{background:color-mix(in srgb,var(--bg) 22%,transparent)}
@container (max-width:620px){#vw:not(.wide) .mk-t.wf,#vw:not(.wide) .mk-tq,#vw:not(.wide) .mk-z.wf{grid-template-columns:1fr}#vw:not(.wide) .mk-gl>div{grid-template-columns:1fr 1fr}#vw:not(.wide) .mk-gl .ph.a{grid-column:span 2;grid-row:auto}#vw:not(.wide) .mk-lg,#vw:not(.wide) .mk-gl,#vw:not(.wide) .mk-vd,#vw:not(.wide) .mk-tq{padding-left:14px;padding-right:14px}#vw:not(.wide) .mk-z.wf{padding:18px 14px}}

/* Version large sur petit écran : mêmes proportions que sur ordinateur */
#vw.wide .mk{font-size:1.45cqw}
#vw.wide .mk-n{padding:1.8cqw 3.4cqw}#vw.wide .mk-n .br{font-size:2.3cqw}#vw.wide .mk-l{gap:2cqw}
#vw.wide .mk-h h2{font-size:9.6cqw}#vw.wide .mk-h.v h2{font-size:6.8cqw}
#vw.wide .mk-s h3{font-size:2.9cqw}#vw.wide .mk-t h2,#vw.wide .mk-q h2{font-size:5cqw}#vw.wide .mk-hd h2{font-size:8cqw}
#vw.wide .mk-g h3{font-size:2.6cqw}#vw.wide .mk-f h3{font-size:3.3cqw}#vw.wide .mk-gl h2,#vw.wide .mk-vd h2{font-size:4.4cqw}
#vw.wide .mk .ph svg{width:8cqw}#vw.wide .mk-s.wf .ph svg{width:6.5cqw}#vw.wide .vd .pl{width:12cqw}
#vw.wide .mk-lg i{min-height:0}#vw.wide .mk-gl .ph{min-height:12cqw}
#vw.wide .mk-b,#vw.wide .mk-pr{font-size:1em}
#vw.wide .mk{--rad2:1}#vw.wide .mk *{border-radius:calc(var(--rad) * .35)}#vw.wide .mk .mk-b,#vw.wide .mk .mk-lg i,#vw.wide .mk .vd .pl,#vw.wide .mk .av i,#vw.wide .mk .ln i{border-radius:999px}