/* Julien Jimenez · Atelier de sites : feuille de style unique, une règle par ligne.
   Polices : --fd Syne (titres), --fb Manrope (texte), --fm Fragment Mono (spécifications). */

/* 1. Tokens */
:root{--bg:#FFFFFF;--surface:#F4F4F5;--ink:#18181B;--text:#3F3F46;--muted:#5F5F68;--line:#E2E2E6;--line-2:#D4D4D8;--bd:1px solid var(--line);--bd2:1px solid var(--line-2);--bdd:1px dashed var(--line-2);--primary:#00A86B;--primary-ink:#007A4D;--primary-soft:#E6F6EF;--secondary:#111827;--accent:#FFB703;--accent-line:#E9A600;--accent-soft:#FFF4D4;--accent-ink:#7A5200;--wf:#E4E4E7;--wf-2:#D4D4D8;
--fd:"Syne","Avenir Next","Segoe UI",system-ui,sans-serif;--fb:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fm:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-h1:clamp(2.15rem,1.2rem + 3.5vw,4.6rem);--fs-h2:clamp(1.7rem,1.2rem + 1.65vw,2.8rem);--fs-lead:clamp(1.06rem,.99rem + .32vw,1.24rem);--fs-body:clamp(1rem,.97rem + .12vw,1.0625rem);
--container:1240px;--gutter:clamp(16px,4vw,40px);--gap:clamp(16px,2.2vw,32px);--section:clamp(84px,4.5vw + 64px,144px);--header-h:64px;
--r-win:10px;--r-card:6px;--r-btn:8px;--sh-win:0 16px 40px -20px rgba(24,24,27,.22);--sh-pop:0 12px 32px -14px rgba(24,24,27,.24);--ease:cubic-bezier(.2,.7,.2,1);
--board-bg:linear-gradient(rgba(24,24,27,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(24,24,27,.055) 1px,transparent 1px),linear-gradient(rgba(24,24,27,.038) 1px,transparent 1px),linear-gradient(90deg,rgba(24,24,27,.038) 1px,transparent 1px);
--hatch:repeating-linear-gradient(-45deg,rgba(24,24,27,.075) 0 1px,transparent 1px 8px);
--hdl-sq:linear-gradient(var(--primary),var(--primary));
--hdl:var(--hdl-sq) left top/6px 6px no-repeat,var(--hdl-sq) right top/6px 6px no-repeat,var(--hdl-sq) left bottom/6px 6px no-repeat,var(--hdl-sq) right bottom/6px 6px no-repeat}

/* 2. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 20px);interpolate-size:allow-keywords}
html:focus-within{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:500 var(--fs-body)/1.65 var(--fb);overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{margin:0;font-family:var(--fd);color:var(--ink);line-height:1.1;letter-spacing:-.012em;text-wrap:balance;overflow-wrap:break-word}
p{margin:0 0 1em;text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit}
strong,b{font-weight:700;color:var(--ink)}
button{font:inherit;color:inherit}
figure{margin:0}
::selection{background:var(--accent);color:var(--secondary)}
:focus-visible{outline:2px dashed var(--primary-ink);outline-offset:3px;border-radius:2px}
.mono{font:400 .75rem/1.3 var(--fm);letter-spacing:.01em}
kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border:var(--bd2);border-bottom-width:2px;border-radius:5px;background:#fff;color:var(--ink);font:400 .72rem/1 var(--fm)}
.ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:fixed;left:16px;top:-80px;z-index:400;padding:12px 18px;border-radius:var(--r-btn);background:var(--secondary);color:#fff;font-weight:700;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:12px}

/* 3. Mise en page : planches grises à grille 8 px, pages blanches */
.wrap{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sec-head--split,.hero__grid,.atelier__grid,.fab__grid,.rules,.planche__head,.seuils,.notes,.ruler,.brief__grid,.versions__grid,.faq__grid,.contact__board,.nf__grid,.mag-hero__grid,.mag-edito,.art-layout,.gridov .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.sec{position:relative;padding-block:var(--section)}
.sec--board,.board{background-color:var(--surface);background-image:var(--board-bg);background-size:64px 64px,64px 64px,8px 8px,8px 8px;background-position:-1px -1px}
.sec--board{border-block:var(--bd)}
.board{border:var(--bd);border-radius:var(--r-win)}
.blabel{display:flex;align-items:center;gap:12px;margin:0 0 22px}
.blabel .ico{width:15px;height:15px;color:var(--primary-ink)}
.blabel__rule{flex:1;min-width:24px;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 4px,transparent 4px 8px)}
.blabel__w{padding:4px 7px;border:var(--bd2);border-radius:4px;background:#fff;color:var(--ink)}
.h2{font-size:var(--fs-h2);font-weight:700;line-height:1.06;letter-spacing:-.022em;max-width:21ch}
.sec-head{margin-bottom:clamp(40px,4.4vw,68px)}
.sec-head .h2{margin-bottom:20px}
.sec-head__intro{max-width:62ch;margin:0;font-size:var(--fs-lead);line-height:1.6}
.sec-head--split{align-items:end}
.sec-head--split .blabel{grid-column:1/-1}
.sec-head--split .h2{grid-column:1/8;margin:0}
.sec-head--split .sec-head__intro{grid-column:8/13}

/* Étiquettes mono */
.blabel,.layers__head,.frame-label,.artboard__label,.photo__label,.kinds__h,.fab__rail,.meter__txt,.ftr__h,.toc__h,.approach__label,.author__k,.contact__k,.inspector__bar,.vpanel__head{font:400 .75rem/1.2 var(--fm);color:var(--muted)}

/* 4. Composants */
.hdl{position:relative}
.hdl::before,.hdl::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity .2s var(--ease)}
.hdl::before{inset:-6px;border:1.5px dashed var(--primary);border-radius:2px}
.hdl::after{inset:-8.25px;background:var(--hdl)}
.hdl:hover::before,.hdl:hover::after,.hdl:focus-visible::before,.hdl:focus-visible::after,.hdl:focus-within::before,.hdl:focus-within::after,.hdl.is-sel::before,.hdl.is-sel::after{opacity:1}
.hdl:focus-visible{outline:none}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1.5px solid transparent;border-radius:var(--r-btn);font:700 .95rem/1.15 var(--fb);text-decoration:none;cursor:pointer;transition:background-color .2s,transform .25s var(--ease)}
.btn .ico{width:18px;height:18px}
.btn--primary{background:var(--primary);color:var(--secondary)}
.btn--primary:hover,.btn--ghost{background:#fff;border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--surface);transform:translateY(-1px)}
.lnk,.prose a:not(.btn){color:var(--ink);font-weight:700;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 3px no-repeat;padding-bottom:1px;transition:background-size .25s var(--ease)}
.lnk:hover,.prose a:not(.btn):hover{background-size:100% 42%}
.lnk--arrow{display:inline-flex;align-items:center;gap:8px}
.lnk--arrow .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.lnk--arrow:hover .ico{transform:translateX(3px)}
.spec{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid #F1D48A;border-radius:4px;background:var(--accent-soft);color:var(--accent-ink);font:400 .72rem/1 var(--fm);white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 13px;border-radius:999px;background:var(--primary);color:var(--secondary);font-weight:700;font-size:.9rem;text-decoration:none;transition:background-color .2s,transform .25s var(--ease)}
.pill .ico{width:17px;height:17px}
.pill:hover{background:#00BD78;transform:translateY(-1px)}
.win{position:relative;background:#fff;border:var(--bd);border-radius:var(--r-win);box-shadow:var(--sh-win);overflow:hidden}
.win__bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-bottom:var(--bd);background:#FAFAFA}
.win__dots{display:flex;gap:6px;flex:none}
.win__dots i{width:10px;height:10px;border-radius:50%;background:var(--wf-2)}
.win__addr{flex:1;min-width:0;max-width:380px;margin-inline:auto;display:flex;align-items:center;gap:7px;height:26px;padding:0 10px;border:var(--bd);border-radius:6px;background:#fff;font:400 .72rem/1 var(--fm);color:var(--muted);white-space:nowrap;overflow:hidden}
.win__addr .ico{width:13px;height:13px}
.win__addr>span{overflow:hidden;text-overflow:ellipsis}
.win__end{flex:none;min-width:42px;display:flex;justify-content:flex-end}
.win__view{position:relative;overflow:hidden;background:#fff;container-type:inline-size}
.stat{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--surface);border:var(--bd);color:var(--muted);font:400 .66rem/1 var(--fm);white-space:nowrap}
.wf{display:block;height:1.1cqw;border-radius:.4cqw;background:var(--wf)}
.wf--h{height:2.9cqw}
.ph{position:relative;border:var(--bd2);border-radius:.8cqw;background:linear-gradient(to top right,transparent calc(50% - .7px),var(--wf-2) calc(50% - .7px) calc(50% + .7px),transparent calc(50% + .7px)),linear-gradient(to bottom right,transparent calc(50% - .7px),var(--wf-2) calc(50% - .7px) calc(50% + .7px),transparent calc(50% + .7px)),var(--hatch),#F6F6F7}
.sw{display:grid;align-items:center}
.sw>*{grid-area:1/1}
.sw__wf{display:grid;gap:1cqw;opacity:calc(1 - var(--t,1))}
.sw__wf.row{display:flex;gap:2cqw}
.sw__real{opacity:var(--t,1)}
.dim{position:relative;display:flex;align-items:center;justify-content:center;height:16px;border-inline:1.5px solid var(--accent-line);font:400 .68rem/1 var(--fm);color:var(--accent-ink)}
.dim::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--accent);transform-origin:left;transform:scaleX(var(--k,1))}
.dim span{position:relative;padding:0 8px;background:var(--dim-bg,#fff)}

/* Maquette partagée hero et fabrication (unités cqw) */
.mk{position:absolute;inset:0;display:flex;flex-direction:column;gap:2.5cqw;padding:3cqw 4cqw}
.mk__nav,.mk__foot{display:flex;align-items:center;justify-content:space-between}
.mk__nav{min-height:3.6cqw}
.mk__foot{padding-top:1.5cqw;border-top:var(--bd)}
.mk__hero{flex:1;min-height:0;display:grid;grid-template-columns:1.1fr 1fr;gap:3.8cqw;align-items:center}
.mk__text{display:grid;gap:1.9cqw;align-content:center}
.mk__media{position:relative;aspect-ratio:4/3.3;border-radius:.9cqw;overflow:hidden;background:var(--surface)}
.mk__media img{width:100%;height:100%;object-fit:cover}
.mk__media .ph{position:absolute;inset:0;border-radius:inherit;opacity:calc(1 - var(--ti,1))}
.mk__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.2cqw}
.mk-card{display:grid;grid-template-columns:5.4cqw 1fr;gap:1.5cqw;align-items:center;padding:1.3cqw;border:var(--bd);border-radius:.7cqw}
.mk-card--txt{grid-template-columns:1fr}
.mk-th,.mk-th>*{height:5.4cqw;border-radius:.5cqw}
.mk-card .sw__real{font:700 1.4cqw/1.25 var(--fb);color:var(--ink)}
.mk-logo{font:800 1.9cqw/1 var(--fd);color:var(--ink)}
.mk-links{font:600 1.4cqw/1 var(--fb);word-spacing:1.1cqw}
.mk-kick,.mk-crumb,.mk-chip,.mk-card small{font:400 1.15cqw/1.3 var(--fm)}
.mk-kick{color:var(--primary-ink)}
.mk-crumb,.mk-card small{display:block;color:var(--muted)}
.mk-h1{font:800 3.4cqw/1.08 var(--fd);color:var(--ink);letter-spacing:-.02em}
.mk-p{font:500 1.45cqw/1.5 var(--fb)}
.mk-p u{color:var(--ink);font-weight:700;text-decoration-color:var(--accent);text-decoration-thickness:.35cqw;text-underline-offset:.3cqw}
.mk-btn{position:relative;isolation:isolate;justify-self:start;padding:1.25cqw 2.3cqw;border:1.5px solid var(--ink);border-radius:.7cqw;overflow:hidden;font:700 1.4cqw/1 var(--fb);color:var(--ink);white-space:nowrap}
.mk-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--primary);opacity:var(--tb,1)}
.mk-chip{padding:.7cqw 1.2cqw;border-radius:.6cqw;background:var(--primary-soft);color:var(--primary-ink);opacity:var(--t,1)}

/* 5. En-tête : barre d'outils et panneau de calques */
.hdr{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .25s}
.hdr.is-scrolled{border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;gap:14px;flex:none;color:var(--ink);text-decoration:none}
.brand__mark{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:3px;background:#fff;font:800 .8rem/1 var(--fd);letter-spacing:-.02em}
.brand__mark::before{content:"";position:absolute;inset:-5px;border:1px dashed var(--primary)}
.brand__mark::after{content:"";position:absolute;inset:-7px;background:var(--hdl);background-size:5px 5px}
.brand__txt{display:flex;flex-direction:column;line-height:1.15}
.brand__txt strong{font:700 1rem/1.1 var(--fd);letter-spacing:-.01em}
.brand__txt small{font:400 .68rem/1.35 var(--fm);color:var(--muted)}
.nav{margin-inline:auto}
.nav__list{display:flex;gap:2px;list-style:none}
.nav__list a,.hdr__blog{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 11px;border-radius:6px;color:var(--text);font-size:.9rem;font-weight:600;text-decoration:none;transition:background-color .2s,color .2s}
.nav__list a:hover,.hdr__blog:hover{background:var(--surface);color:var(--ink)}
.nav__list a[aria-current]{color:var(--ink)}
.nav__list a[aria-current]::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:var(--primary)}
.hdr__end{display:flex;align-items:center;gap:8px;flex:none}
.hdr__blog .ico{width:16px;height:16px;color:var(--primary-ink)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 14px;border:1.5px solid var(--ink);border-radius:var(--r-btn);background:#fff;font-weight:700;font-size:.9rem;cursor:pointer}
.menu-btn__ico{position:relative;width:16px;height:10px}
.menu-btn__ico::before,.menu-btn__ico::after{content:"";position:absolute;left:0;right:0;top:0;height:1.75px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease),top .25s var(--ease)}
.menu-btn__ico::after{top:8px}
.menu-btn[aria-expanded="true"] .menu-btn__ico::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__ico::after{top:4px;transform:rotate(-45deg)}
.layers{position:fixed;inset:var(--header-h) 0 0;z-index:99;padding:12px var(--gutter) 32px;overflow-y:auto;background:#fff;border-top:var(--bd);opacity:0;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.layers.is-open{opacity:1;transform:none}
.layers__head{display:flex;justify-content:space-between;padding:10px 6px 12px;border-bottom:var(--bd)}
.layers__list{list-style:none;padding:8px 0}
.layers__list a{display:grid;grid-template-columns:20px 18px 1fr auto;align-items:center;gap:12px;min-height:52px;padding:0 8px;border-radius:6px;color:var(--ink);font-weight:600;font-size:1.05rem;text-decoration:none}
.layers__list a:hover,.layers__list a[aria-current]{background:var(--surface)}
.layers__list .ico{width:17px;height:17px;color:var(--muted)}
.layers__list a[aria-current] .layers__frame{color:var(--primary-ink)}
.layers__list .mono{color:var(--muted)}
.layers__foot{display:grid;gap:12px;padding-top:18px;border-top:var(--bd)}
.layers__foot .btn{width:100%}
.layers__mail{font:700 1.05rem/1.3 var(--fd);color:var(--ink);overflow-wrap:anywhere}
html.menu-open{overflow:hidden}

/* 6. Hero */
.hero{padding-top:clamp(24px,2.6vw,44px);padding-bottom:clamp(72px,6vw,112px);border-top:0}
.ruler{margin-bottom:clamp(22px,2.4vw,34px)}
.ruler span{position:relative;padding-top:7px;border-top:var(--bd2);font:400 .625rem/1 var(--fm);color:var(--muted)}
.ruler span::before,.ruler span::after{content:"";position:absolute;top:-4px;left:0;width:1px;height:7px;background:var(--line-2)}
.ruler span::after{left:auto;right:0}
.hero__title{font-size:var(--fs-h1);font-weight:800;line-height:1.02;letter-spacing:-.034em;margin:0 0 clamp(28px,3.2vw,48px)}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hl{background:linear-gradient(var(--primary),var(--primary)) 0 94%/100% .15em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.js .hl{animation:hlgrow 1.1s var(--ease) .5s both}
@keyframes hlgrow{from{background-size:0 .15em}}
.hero__copy{grid-column:1/6;padding-top:52px}
.hero__lead{font-size:var(--fs-lead);line-height:1.6;color:var(--ink)}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin:30px 0 36px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:var(--bd2)}
.facts div{padding:14px 14px 0 0}
.facts div+div{padding-left:14px;border-left:var(--bdd)}
.facts dt{margin-bottom:6px;font:400 .68rem/1.2 var(--fm);color:var(--muted)}
.facts dd{margin:0;font:700 .95rem/1.3 var(--fd);color:var(--ink)}
.hero__stage{grid-column:6/13;padding-top:52px}
.stage{position:relative}
.win--hero{--p:1;--t:clamp(0,(var(--p) - .3)*2.6,1);--ti:clamp(0,var(--p)*1.7,1);--tb:clamp(0,(var(--p) - .55)*3,1)}
.js .win--hero{--p:0}
.win--hero .win__view{aspect-ratio:16/10}
.win--hero.is-steps .sw>*,.win--hero.is-steps .ph,.win--hero.is-steps .mk-btn::before,.win--hero.is-steps .mk-chip{transition:opacity .9s var(--ease) .25s}
.annos{position:absolute;inset:0;pointer-events:none}
.anno{position:absolute;left:var(--x);z-index:2;display:flex;flex-direction:column;align-items:center;transform:translateX(-50%)}
.anno--top{top:-46px;height:calc(var(--y) + 46px)}
.anno--bot{top:var(--y);bottom:-46px;flex-direction:column-reverse}
.anno__tag{position:relative;pointer-events:auto;cursor:help;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px 0 5px;border-radius:5px;background:var(--accent);color:var(--secondary);font:400 .72rem/1 var(--fm);white-space:nowrap;box-shadow:0 6px 14px -8px rgba(24,24,27,.45);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.anno__tag b{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--secondary);color:#fff;font-weight:400;font-size:.62rem}
.anno__line{flex:1;width:0;border-left:1.5px dashed var(--accent-line);transition:clip-path .9s var(--ease)}
.anno__pin{display:grid;place-items:center;flex:none;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1.5px var(--accent-line)}
.anno__pin span{display:none;font:400 .62rem/1 var(--fm);color:var(--secondary)}
.anno__tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,4px);padding:7px 10px;border-radius:6px;background:var(--secondary);color:#fff;font:400 .68rem/1.3 var(--fm);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.anno--bot .anno__tip{bottom:auto;top:calc(100% + 8px)}
.anno__tag:hover .anno__tip{opacity:1;transform:translate(-50%,0)}
.js .anno__tag{opacity:0;transform:translateY(6px)}
.js .anno--top .anno__line{clip-path:inset(0 0 100% 0)}
.js .anno--bot .anno__line{clip-path:inset(100% 0 0 0)}
.js .stage.is-drawn .anno__tag{opacity:1;transform:none;transition-delay:calc(var(--i)*.15s + .2s)}
.js .stage.is-drawn .anno__line{clip-path:inset(0);transition-delay:calc(var(--i)*.15s)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;margin:76px 0 0;list-style:none;counter-reset:lg}
.legend li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.legend li::before{counter-increment:lg;content:counter(lg);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--secondary);font:400 .68rem/1 var(--fm)}
.legend strong{display:block;font-size:.9rem}

/* 7. Atelier */

.atelier__board{grid-column:1/6;position:sticky;top:calc(var(--header-h) + 32px);padding:clamp(24px,3.2vw,44px)}
.atelier__text{grid-column:7/13}
.atelier__text p{max-width:62ch}
.atelier__text .h2{margin-bottom:24px}
.atelier__lead{font-size:var(--fs-lead);color:var(--ink)}
.photo__label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.photo__label span{display:inline-flex;align-items:center;gap:8px}
.photo__label .ico{width:15px;height:15px;color:var(--primary-ink)}
.photo__sel{padding:3px 7px;border-radius:4px;background:var(--primary);color:var(--secondary)}
.photo__frame img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-win);background:#2a2140}
.photo__frame.hdl::before,.photo__frame.hdl::after{opacity:1}
.photo .dim{margin-top:18px;--dim-bg:var(--surface)}
.photo figcaption,.art-cover figcaption,.prose figcaption{margin-top:12px;font-size:.86rem;line-height:1.5;color:var(--muted)}
.sig{margin:30px 0;padding:22px 24px 20px 28px;border-left:3px solid var(--primary);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--surface)}
.sig p{margin:0 0 10px;font:700 clamp(1.15rem,1rem + .7vw,1.5rem)/1.3 var(--fd);color:var(--ink);letter-spacing:-.01em}
.sig cite,.quote-card cite{font:normal 400 .75rem/1.3 var(--fm);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:26px 0 22px}
.chips li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 13px;border:var(--bd);border-radius:999px;background:#fff;font-size:.86rem;font-weight:600;color:var(--ink)}
.chips .ico{width:16px;height:16px;color:var(--primary-ink)}

/* 8. Expertises */
.frame-label{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}
.frame-label span{display:inline-flex;align-items:center;gap:8px}
.frame-label .ico{width:14px;height:14px;color:var(--primary-ink)}
.comps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none}
.comp{display:flex;flex-direction:column;gap:12px;height:100%;padding:22px 22px 20px;background:#fff;border:var(--bd);border-radius:var(--r-card);transition:border-color .2s,transform .35s var(--ease)}
.comp:hover{border-color:transparent;transform:translateY(-2px)}
.comp__top{display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.comp__ico{position:relative;display:grid;place-items:center;width:42px;height:42px;border:var(--bd);border-radius:8px;background:var(--surface);color:var(--ink)}
.comp__ico::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;background:var(--primary);border:2px solid #fff}
.comp h3{font-size:1.08rem;line-height:1.22}
.comp p{margin:0;font-size:.92rem;line-height:1.6}
.comp code,.prose code{padding:1px 5px;border-radius:4px;background:var(--surface);border:var(--bd);font:400 .86em/1.4 var(--fm);color:var(--ink)}
.comp .spec{margin-top:auto;align-self:flex-start}
.kinds{display:grid;grid-template-columns:180px repeat(3,minmax(0,1fr));margin-top:28px;background:#fff;border:var(--bd);border-radius:var(--r-card)}
.kinds>*{margin:0;padding:18px 22px}
.kinds>*+*{border-left:var(--bd)}
.kinds__h{display:flex;align-items:center;gap:8px;font:400 .75rem/1.3 var(--fm)}
.kinds__h .ico{width:15px;height:15px;color:var(--primary-ink)}
.kinds b{display:block;margin-bottom:2px;font:700 1rem/1.3 var(--fd)}
.kinds span{font-size:.88rem;line-height:1.45;color:var(--muted)}

/* 9. Fabrication */
.fab__grid{align-items:start}
.fab__steps{grid-column:1/6;grid-row:1;position:relative;list-style:none}
.fab__steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;border-left:1.5px dashed var(--line-2)}
.fab__sticky{grid-column:7/13;grid-row:1;position:sticky;top:calc(var(--header-h) + 28px)}
.fab-step{display:grid;grid-template-columns:48px 1fr;column-gap:22px;align-content:center;min-height:min(68vh,620px);padding:28px 0}
.fab-step:first-child{min-height:min(52vh,480px);align-content:start;padding-top:8px}
.fab-step__n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:var(--bd2);border-radius:8px;background:#fff;font:400 .8rem/1 var(--fm);color:var(--muted);transition:background-color .3s,color .3s,border-color .3s}
.fab-step h3{margin:6px 0 12px;font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);transition:color .3s}
.fab-step p{max-width:54ch;margin:0 0 14px;transition:color .3s}
.fab-step__out{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:.88rem;font-weight:600;color:var(--ink)}
.fab-step__out .mono{padding:4px 7px;border-radius:4px;background:var(--surface);border:var(--bd);color:var(--muted)}
.js .fab-step h3,.js .fab-step p{color:var(--muted)}
.js .fab-step.is-active h3{color:var(--ink)}
.js .fab-step.is-active p{color:var(--text)}
.js .fab-step.is-active .fab-step__n{background:var(--primary);border-color:var(--primary);color:var(--secondary)}
html:not(.js) .fab-step__n,.js .fab-step.is-done .fab-step__n{border-color:var(--primary);color:var(--primary-ink)}
.win--fab{--t:0;--tb:var(--t);--ti:var(--t)}
[data-step="5"] .win--fab,[data-step="6"] .win--fab{--t:1}
.win--fab .win__view{aspect-ratio:16/11}
.win--fab .sw>*,.win--fab .ph,.win--fab .paper,.win--fab .mk-btn::before,.win--fab .mk-chip{transition:opacity .5s var(--ease)}
.addr-s,.stat-s{display:none}
[data-step="1"] [data-s="1"],[data-step="2"] [data-s="2"],[data-step="3"] [data-s="3"],[data-step="4"] [data-s="4"],[data-step="5"] [data-s="5"],[data-step="6"] [data-s="6"]{display:inline}
[data-step="6"] .stat{background:var(--primary);border-color:var(--primary);color:var(--secondary)}
.fst{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(1.4cqw);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility 0s .45s}
[data-step="1"] .fst--1,[data-step="2"] .fst--2,[data-step="3"] .fst--page,[data-step="4"] .fst--page,[data-step="5"] .fst--page,[data-step="6"] .fst--page{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.fst__title{position:absolute;left:4cqw;top:3.2cqw;font:400 1.35cqw/1 var(--fm);color:var(--muted)}
.intent{position:absolute;inset:9cqw 4cqw 4cqw;display:grid;gap:3.2cqw;align-content:center}
.intent__row{display:grid;grid-template-columns:1fr 1fr 5cqw 16cqw;gap:1.6cqw;align-items:center}
.q{padding:1.6cqw 2cqw;border-radius:99cqw;border:var(--bd2);background:var(--surface);font:500 1.65cqw/1.1 var(--fb);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.intent__arrow{font:400 2.4cqw/1 var(--fm);color:var(--ink);text-align:center}
.intent__head{font:400 1.25cqw/1 var(--fm);color:var(--muted)}
.pg{padding:1.6cqw 1.6cqw;border-radius:.7cqw;background:var(--primary-soft);border:1.5px solid var(--primary);font:700 1.75cqw/1.1 var(--fd);color:var(--ink);text-align:center}
.pg small{display:block;margin-top:.6cqw;font:400 1.1cqw/1 var(--fm);color:var(--primary-ink)}
.tree{position:absolute;inset:10cqw 3cqw 4cqw;display:grid;justify-items:center;align-content:start}
.node{display:inline-block;padding:1.2cqw 1.6cqw;border:1.5px solid var(--ink);border-radius:.6cqw;background:#fff;font:400 1.35cqw/1 var(--fm);color:var(--ink);white-space:nowrap}
.node--root{background:var(--secondary);border-color:var(--secondary);color:#fff;padding-inline:3cqw}
.tree__kids{position:relative;display:grid;align-items:start;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4cqw;width:100%;margin-top:6cqw}
.tree__kids::before{content:"";position:absolute;left:10%;right:10%;top:-3cqw;border-top:1.5px solid var(--line-2)}
.tree__kids::after,.tree__kids>div::before{content:"";position:absolute;left:50%;top:-6cqw;height:3cqw;border-left:1.5px solid var(--line-2)}
.tree__kids>div{position:relative;display:grid;justify-items:center;gap:1.6cqw}
.tree__kids>div::before{top:-3cqw}
.tree__kids .node{width:100%;padding-inline:.6cqw;text-align:center;overflow:hidden;text-overflow:ellipsis}
.node--sub{border-style:dashed;border-color:var(--primary);color:var(--primary-ink)}
.tree__note{margin-top:5cqw;padding:1.2cqw 1.8cqw;border-radius:.6cqw;background:var(--accent-soft);border:1px solid #F1D48A;font:400 1.25cqw/1.3 var(--fm);color:var(--accent-ink)}
.fst--page .mk{gap:2.1cqw}
.fst--page [data-tg]{position:relative;outline:1px dashed transparent;outline-offset:.6cqw;transition:outline-color .3s}
[data-step="4"] .fst--page [data-tg]{outline-color:var(--primary)}
.tg{position:absolute;left:-.6cqw;top:-2.7cqw;z-index:2;padding:.5cqw .9cqw;border-radius:.4cqw;background:var(--primary);color:var(--secondary);font:400 1.3cqw/1 var(--fm);white-space:nowrap;opacity:0;transition:opacity .3s}
[data-step="4"] .tg{opacity:1}
[data-step="5"] .fst--page .mk-btn,[data-step="6"] .fst--page .mk-btn{background:var(--primary)}
.fst--page .mk__media{aspect-ratio:4/3;overflow:visible}
.fst--page .mk__media>.ph,.paper{position:absolute;inset:0;border-radius:.9cqw}
.paper{overflow:hidden;background:#F7F3EA;opacity:var(--t,1)}
.paper i{position:absolute;border-radius:.6cqw}
.mob,.chk{position:absolute;background:#fff;opacity:0;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.mob{right:4cqw;top:8cqw;width:19cqw;aspect-ratio:9/17;display:grid;align-content:start;gap:1.2cqw;padding:2.4cqw 1.6cqw;border:1.5px solid var(--ink);border-radius:2.6cqw;box-shadow:0 2cqw 4cqw -2cqw rgba(24,24,27,.4);transform:translateX(3cqw)}
.mob .ph{height:11cqw;border-radius:.6cqw}
.mob__tag{position:absolute;left:50%;top:-1.6cqw;transform:translateX(-50%);padding:.5cqw 1cqw;border-radius:.4cqw;background:var(--accent);color:var(--secondary);font:400 1.05cqw/1 var(--fm);white-space:nowrap}
.chk{right:3.4cqw;top:6cqw;width:34cqw;padding:2.2cqw 2.4cqw;border:var(--bd);border-radius:1cqw;box-shadow:0 2.4cqw 5cqw -2.4cqw rgba(24,24,27,.45);transform:translateY(2cqw)}
[data-step="3"] .mob,[data-step="6"] .chk{opacity:1;transform:none}
.chk__h{display:flex;justify-content:space-between;gap:1cqw;margin-bottom:1.4cqw;font:700 1.5cqw/1.2 var(--fd);color:var(--ink)}
.chk__h span{font:400 1.1cqw/1.4 var(--fm);color:var(--primary-ink)}
.chk__list{display:grid;gap:1cqw}
.chk__i{display:flex;align-items:center;gap:1.2cqw;font:600 1.25cqw/1.25 var(--fb);color:var(--ink)}
.chk__i i{display:grid;place-items:center;flex:none;width:2.2cqw;height:2.2cqw;border-radius:.5cqw;border:1.5px solid var(--line-2);font:700 1.4cqw/1 var(--fb);font-style:normal;color:transparent;transition:.3s calc(var(--i)*.12s + .2s)}
[data-step="6"] .chk__i i{background:var(--primary);border-color:var(--primary);color:var(--secondary)}
.fab__rail{display:flex;align-items:center;gap:14px;margin-top:16px}
.fab__rail ol{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:6px;list-style:none}
.fab__rail li{position:relative;height:4px;border-radius:2px;background:var(--line)}
.fab__rail li::after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--primary);opacity:clamp(0,var(--s,6) - var(--n) + 1,1);transition:opacity .35s}
.rules{margin-top:clamp(56px,6vw,96px)}
.rules__head,.seuils__head{grid-column:1/5}
.rules__head h3,.seuils__head h3{margin-bottom:12px;font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem)}
.rules__head p,.seuils__head p{max-width:42ch;font-size:.94rem;color:var(--muted)}
.rules__list{grid-column:5/13;list-style:none;border-top:1.5px solid var(--ink)}
.rules__list li{display:grid;grid-template-columns:64px minmax(0,15rem) 1fr;gap:18px;align-items:baseline;padding:16px 0;border-bottom:var(--bd)}
.rules__list .mono{color:var(--muted)}
.rules__list strong{font:700 1rem/1.35 var(--fd)}
.rules__list span:last-child{font-size:.94rem}

/* 10. Planche de composants */
.planche__head{align-items:center;margin-bottom:clamp(44px,5vw,76px)}
.planche__intro{grid-column:1/6}
.planche__intro .h2{margin-bottom:20px}
.planche__intro p{max-width:54ch}
.artboard{grid-column:7/13}
.artboard__label{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.artboard__label b{font-weight:400}
.artboard__img{padding:10px;background:#fff;border:var(--bd);border-radius:4px;box-shadow:var(--sh-win)}
.artboard__img img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.kit{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kit-item{min-width:0;display:flex;flex-direction:column;background:#fff;border:var(--bd);border-radius:var(--r-card)}
.kit-item__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 16px;border-bottom:var(--bd);color:var(--muted)}
.seg{display:inline-flex;flex:none;gap:2px;padding:3px;border:var(--bd);border-radius:8px;background:var(--surface)}
.seg button{min-height:32px;padding:0 10px;border:0;border-radius:6px;background:transparent;font:700 .76rem/1 var(--fb);color:var(--muted);cursor:pointer;transition:background-color .2s,color .2s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(24,24,27,.14),0 0 0 1px var(--line)}
.kit-item__views{display:grid;min-width:0;padding:16px;border-bottom:var(--bd);background:#FBFBFB}
.view{min-width:0;min-height:236px;border:var(--bd);border-radius:4px}
.view--design{display:grid;place-items:center;padding:18px;background-color:#fff;background-image:var(--board-bg);background-size:64px 64px,64px 64px,8px 8px,8px 8px}
.view--code{margin:0;padding:14px 16px;background:#FAFAFA;color:var(--ink);font:400 .72rem/1.7 var(--fm);white-space:pre;overflow-x:auto;tab-size:2}
.view--code .t{color:var(--primary-ink)}
.view--code .a{color:var(--accent-ink)}
.view--code .s{color:#1F4FA8}
.view--code .c{color:var(--muted);font-style:italic}
.js .kit-item__views>.view{grid-area:1/1;transition:opacity .35s var(--ease),visibility 0s .35s}
.js [data-view="design"] .view--code,.js [data-view="code"] .view--design{opacity:0;visibility:hidden}
.js [data-view="design"] .view--design,.js [data-view="code"] .view--code{transition-delay:0s}
html:not(.js) .seg{display:none}
html:not(.js) .view+.view{margin-top:12px}
.kit-item__body{padding:16px 18px 6px}
.kit-item h3{margin-bottom:8px;font-size:1.12rem}
.kit-item p{margin:0;font-size:.9rem;line-height:1.6}
.kit-item__spec{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:14px 18px 18px}
.kit-item__spec span{padding:3px 6px;border-radius:3px;background:var(--surface);color:var(--muted);font:400 .66rem/1.2 var(--fm)}
.d{width:100%;max-width:300px}
.d-box{border:1.5px solid var(--ink);border-radius:6px;background:#fff}
.d-hdr{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px}
.d-logo{font:800 .78rem/1 var(--fd);color:var(--ink);white-space:nowrap}
.d-links{display:flex;gap:8px}
.d-links i,.d-bar{display:block;width:30px;height:6px;border-radius:3px;background:var(--wf-2)}
.d-burger{display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:5px}
.d-burger::before{content:"";width:12px;height:7px;border-block:1.5px solid var(--ink)}
.d-note{display:flex;justify-content:space-between;margin-top:10px;font:400 .64rem/1.2 var(--fm);color:var(--accent-ink)}
.d-crumb{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;font:400 .7rem/1 var(--fm);color:var(--ink)}
.d-crumb span{padding:6px 8px;border:var(--bd2);border-radius:4px;background:#fff}
.d-crumb span:last-child,.d-faq .is-open{border-color:var(--primary);background:var(--primary-soft)}
.d-crumb i{width:6px;height:6px;border:solid var(--muted);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.d-card{display:grid;gap:8px;max-width:220px;padding:10px}
.d-card .ph{height:74px;border-radius:4px}
.d-card .d-bar{width:80%;height:8px;background:var(--ink)}
.d-card .d-bar+.d-bar{width:95%;height:5px;background:var(--wf-2)}
.d-card u,.d-lk{font:700 .72rem/1 var(--fb);color:var(--ink);text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.d-lk{text-decoration-line:underline}
.d-pair{display:grid;gap:12px;justify-items:center}
.d-btn{padding:9px 14px;border-radius:7px;background:var(--primary);font:700 .74rem/1 var(--fb);color:var(--secondary)}
.d-cap{font:400 .62rem/1 var(--fm);color:var(--muted)}
.d-faq{display:grid;gap:6px}
.d-faq div{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;padding:8px 10px;border:var(--bd2);border-radius:5px;background:#fff}
.d-faq div::after{content:"+";font:700 .8rem/1 var(--fm);color:var(--ink)}
.d-faq .is-open::after{content:"\2212"}
.d-faq .d-bar{width:60%}
.d-faq .is-open .d-bar+.d-bar{order:3;flex-basis:100%;height:5px;margin-top:8px}
.d-ftr{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px}
.d-ftr div{display:grid;gap:5px;align-content:start}
.d-ftr .d-bar{width:100%;height:5px}
.d-ftr .d-bar:first-child{width:60%;background:var(--ink)}
.d-ftr__base{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:8px;border-top:var(--bdd);font:400 .6rem/1 var(--fm);color:var(--muted)}
.mp{position:absolute;left:0;top:0;z-index:6;pointer-events:none;display:flex;align-items:flex-start;transform:translate(40px,40px);transition:transform 1.6s cubic-bezier(.45,.05,.25,1)}
.mp svg{width:20px;height:20px;fill:var(--primary);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(24,24,27,.25))}
.mp span{margin:14px 0 0 -2px;padding:4px 9px;border-radius:3px 999px 999px;background:var(--primary);color:var(--secondary);font:700 .72rem/1 var(--fb);white-space:nowrap}
html:not(.js) .mp{display:none}

/* 11. Brief */

.brief__main{grid-column:1/8}
.qlist{list-style:none;display:grid;gap:12px}
.qcard{display:grid;grid-template-columns:58px 1fr;column-gap:18px;padding:22px 24px 20px 20px;border:var(--bd);border-radius:var(--r-card);background:#fff;transition:border-color .25s,background-color .25s}
.qcard__n{padding-top:2px;font:800 1.9rem/1 var(--fd);letter-spacing:-.03em;color:var(--muted);transition:color .25s}
.qcard__q{font-size:1.1rem;line-height:1.3}
.qcard p{margin:8px 0 14px;font-size:.93rem}
.qcard.is-ready{border-color:var(--primary);background:#FAFEFC}
.qcard.is-ready .qcard__n{color:var(--primary-ink)}
.tick{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px 0 10px;border:1.5px solid var(--line-2);border-radius:var(--r-btn);background:#fff;font-weight:700;font-size:.88rem;color:var(--ink);cursor:pointer;transition:border-color .2s,background-color .2s}
.tick:hover{border-color:var(--ink)}
.tick__box{display:grid;place-items:center;width:20px;height:20px;border:1.5px solid var(--muted);border-radius:4px;transition:background-color .2s}
.tick__box .ico{width:14px;height:14px;stroke-width:2.4;opacity:0}
.tick[aria-pressed="true"]{border-color:var(--primary);background:var(--primary-soft)}
.tick[aria-pressed="true"] .tick__box{background:var(--primary);border-color:var(--primary);color:var(--secondary)}
.tick[aria-pressed="true"] .tick__box .ico{opacity:1}
html:not(.js) .tick,html:not(.js) .js-only{display:none}
.inspector{grid-column:9/13;position:sticky;top:calc(var(--header-h) + 28px)}
.inspector__bar,.vpanel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px;height:40px;border-bottom:var(--bd);background:#FAFAFA;font:400 .75rem/1 var(--fm);color:var(--muted)}
.inspector__bar span{display:inline-flex;align-items:center;gap:8px}
.inspector__bar .ico,.vpanel__head .ico{width:16px;height:16px;color:var(--primary-ink)}
.inspector__body{padding:22px 22px 24px}
.inspector h3{margin-bottom:14px;font-size:1.3rem}
.meter{margin-bottom:18px}
.meter__txt{display:flex;justify-content:space-between;margin:0 0 8px}
.meter__txt b{font-weight:400}
.meter__bar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.meter__bar i{height:6px;border-radius:2px;background:var(--line);transition:background-color .3s}
.meter__bar i.is-on{background:var(--primary)}
.recap{list-style:none;margin-bottom:20px;border-top:var(--bd)}
.recap li{display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line);font-size:.88rem;line-height:1.4}
.recap li::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid var(--muted)}
.recap .mono{color:var(--muted)}
.recap .is-ready{color:var(--ink)}
.recap .is-ready::before{background:var(--primary);border-color:var(--primary)}
.recap .is-ready .mono{color:var(--primary-ink)}
.inspector .btn{width:100%}
.inspector__note{margin:14px 0 0;font-size:.8rem;line-height:1.5;color:var(--muted)}

/* 12. Historique des versions */
.versions__intro,.faq__intro{grid-column:1/5;position:sticky;top:calc(var(--header-h) + 36px)}
.versions__intro .h2,.faq__intro .h2{margin-bottom:20px}
.quote-card{position:relative;margin:30px 0 0;padding:22px 22px 18px;border:var(--bd);border-radius:var(--r-card);background:#fff}
.quote-card::before{content:"";position:absolute;left:-1px;top:18px;bottom:18px;width:3px;background:var(--accent)}
.quote-card p{margin:0 0 10px;font:700 1.12rem/1.4 var(--fd);color:var(--ink)}
.vpanel{grid-column:6/13}
.vpanel__head{height:auto;padding:14px 22px;background:#fff}
.vpanel__head .mono{white-space:nowrap}
.vpanel__head strong{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1.2 var(--fd)}
.vlist{list-style:none;padding:6px 0}
.v{position:relative;display:grid;grid-template-columns:112px 1fr;gap:22px;padding:22px 24px 22px 52px;transition:background-color .2s}
.v::before{content:"";position:absolute;left:26px;top:0;bottom:0;border-left:1.5px solid var(--line)}
.v:first-child::before{top:34px}
.v:last-child::before{bottom:calc(100% - 34px)}
.v::after{content:"";position:absolute;left:20px;top:28px;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--muted)}
.v:hover{background:#FAFAFA}
.v--current{background:#FAFEFC}
.v--current::after{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.v__thumb{display:grid;align-content:start;gap:5px;aspect-ratio:4/3;padding:9px;border:var(--bd);border-radius:4px;background:#fff;overflow:hidden}
.v__thumb i{display:block;height:5px;border-radius:2px;background:var(--wf)}
.v__thumb .b{height:18px;background:var(--hatch),#F6F6F7;border:var(--bd)}
.v__thumb .h{width:70%;height:8px;background:var(--wf-2)}
.v__thumb .s{width:55%}
.v__thumb .row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.v__thumb .row i{height:12px}
.v__thumb .g{background:var(--primary)}
.v__thumb .y{background:var(--accent)}
.v__thumb .k{background:var(--ink)}
.v__thumb .gs{background:var(--primary-soft)}
.v__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 8px;color:var(--muted)}
.v__tag{padding:4px 7px;border-radius:4px;background:var(--surface);border:var(--bd);font:400 .7rem/1 var(--fm);color:var(--ink)}
.v--current .v__tag{background:var(--primary);border-color:var(--primary);color:var(--secondary)}
.v h3{margin-bottom:8px;font-size:1.14rem}
.v p{margin:0;font-size:.93rem}

/* 13. Cotes du chantier et seuils */
.cotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;border-top:1.5px solid var(--ink)}
.cote{padding:34px 28px 32px 0;border-bottom:var(--bd)}
.cote:not(:nth-child(3n+1)){padding-left:28px;border-left:var(--bd)}
.cote__k{margin:0 0 18px;font:400 .7rem/1 var(--fm);color:var(--muted)}
.cote__val{display:flex;align-items:baseline;gap:6px;margin:0;font:800 clamp(2.5rem,1.7rem + 2.5vw,4.1rem)/1 var(--fd);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.cote__val small{font-size:.42em;font-weight:700;letter-spacing:-.01em;color:var(--primary-ink)}
.cote__val sup{margin-left:-4px;font-size:.45em;vertical-align:.9em;line-height:0}
.cote .dim{margin:18px 0 14px}
.cote__lbl{max-width:32ch;margin:0;font-size:.95rem;line-height:1.5}
.seuils{margin-top:clamp(56px,6vw,96px)}
.seuils__grid{grid-column:5/13;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0}
.seuil{padding:20px 22px 22px;border:var(--bd);border-radius:var(--r-card);background:#fff}
.seuil dt{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font:400 .7rem/1.3 var(--fm);color:var(--muted)}
.seuil dt b{font-weight:400}
.seuil dd{margin:0}
.seuil__v{display:block;margin-bottom:14px;font:700 clamp(1.5rem,1.25rem + .8vw,2rem)/1 var(--fd);letter-spacing:-.02em;color:var(--ink)}
.gauge{display:grid;grid-template-columns:var(--g,50%) 1fr;height:8px;border-radius:4px;overflow:hidden;background:var(--surface)}
.gauge::before{content:"";background:var(--primary);transform-origin:left;transform:scaleX(var(--k,1))}
.gauge::after{content:"";background:repeating-linear-gradient(-45deg,var(--accent-soft) 0 4px,#fff 4px 8px)}
.seuil__lbl{display:block;margin-top:10px;font-size:.86rem;color:var(--muted)}

/* 14. Notes de revue */
.note{position:relative}
.note--a{grid-column:1/7}
.note--b{grid-column:7/13;margin-top:96px}
.note__pin{position:absolute;left:-12px;top:-14px;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50% 50% 50% 4px;background:var(--accent);color:var(--secondary);font:400 .72rem/1 var(--fm);box-shadow:0 6px 14px -6px rgba(24,24,27,.4)}
.note__card{padding:26px 28px 24px;background:#fff;border:var(--bd);border-radius:12px;box-shadow:var(--sh-pop)}
.note__who{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px dashed var(--line)}
.avatar{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:var(--secondary);color:#fff;font:700 .8rem/1 var(--fd)}
.note__who strong{display:block;font:700 1rem/1.25 var(--fd)}
.note__who span span{display:block;font-size:.84rem;line-height:1.4;color:var(--muted)}
.note blockquote{margin:0}
.note blockquote p{margin:0;font-size:1.01rem;line-height:1.72;color:var(--ink)}
.note mark{background:linear-gradient(transparent 52%,rgba(255,183,3,.5) 52%);color:inherit;padding:0 .08em}
.note__src{display:flex;align-items:center;gap:8px;margin:18px 0 0;font:400 .7rem/1.2 var(--fm);color:var(--muted)}
.note__src .ico{width:15px;height:15px;color:var(--primary-ink)}
.avis__more{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:48px 0 0;font-size:.95rem}
.avis__more .mono{padding:5px 8px;border-radius:4px;background:#fff;border:var(--bd);color:var(--ink)}

/* 15. Blog : cartes en fenêtres de navigateur */
.blog__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(36px,4vw,56px)}
.blog__head .h2{margin-bottom:16px}
.blog__head .sec-head__intro{max-width:56ch}
.posts,.mag-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post{display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:0 26px 50px -26px rgba(24,24,27,.32)}
.post .win__bar{height:34px;gap:10px;padding:0 12px}
.post .win__dots i{width:8px;height:8px}
.post .win__addr{height:22px;font-size:.66rem}
.post__img{aspect-ratio:3/2;overflow:hidden;background:var(--surface);border-bottom:var(--bd)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.post:hover .post__img img{transform:scale(1.035)}
.post__body{display:flex;flex-direction:column;gap:12px;flex:1;padding:20px 22px 24px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font:400 .72rem/1.3 var(--fm);color:var(--muted)}
.cat{padding:4px 8px;border-radius:4px;background:var(--primary-soft);color:var(--primary-ink)}
.post h2,.post h3{font-size:1.18rem;line-height:1.22}
.post h2 a,.post h3 a{text-decoration:none}
.post h2 a:hover,.post h3 a:hover{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}
.post p{margin:0;font-size:.92rem}
.post .lnk{margin-top:auto;align-self:flex-start;font-size:.92rem}

/* 16. FAQ */
.faq__ask{margin-top:26px;padding:18px 20px;border:var(--bd);border-radius:var(--r-card);background:#fff;font-size:.92rem}
.faq__ask p{margin:0 0 6px;color:var(--muted)}
.faq__list{grid-column:5/13;display:grid;gap:10px}
.qa{background:#fff;border:var(--bd);border-radius:var(--r-card);transition:border-color .25s,box-shadow .25s}
.qa:hover{border-color:var(--line-2)}
.qa[open]{border-color:var(--ink);box-shadow:var(--sh-pop)}
.qa summary{display:grid;grid-template-columns:52px 1fr 30px;align-items:center;gap:14px;min-height:64px;padding:16px 18px 16px 20px;cursor:pointer;list-style:none;font:700 1.03rem/1.4 var(--fb);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:focus-visible{outline-offset:-4px}
.qa__n{font:400 .72rem/1 var(--fm);color:var(--muted)}
.qa__ico{position:relative;width:30px;height:30px;border:var(--bd);border-radius:6px;background:var(--surface);transition:background-color .25s}
.qa__ico::before,.qa__ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.75px;margin:-.875px 0 0 -5.5px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease)}
.qa__ico::after{transform:rotate(90deg)}
.qa[open] .qa__ico{background:var(--primary);border-color:var(--primary)}
.qa[open] .qa__ico::after{transform:none}
.qa__a{padding:0 64px 22px 86px}
.qa__a p{margin:0}
.qa::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--ease),content-visibility .35s allow-discrete}
.qa[open]::details-content{block-size:auto}

/* 17. Contact */
.contact__board{align-items:center;padding:clamp(28px,5vw,72px);border-radius:14px}
.contact__intro{grid-column:1/6}
.contact__intro .h2{margin-bottom:20px}
.contact__intro p{max-width:46ch}
.win--contact{grid-column:6/13;container-type:inline-size}
.contact__body{padding:clamp(22px,3.2vw,44px)}
.contact__k{margin:0 0 12px}
.contact__mail{display:inline-block;max-width:100%;padding-bottom:6px;font:700 clamp(1.05rem,5.2cqi,2.45rem)/1.15 var(--fd);letter-spacing:-.025em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 4px no-repeat;transition:background-size .3s var(--ease)}
.contact__mail:hover{background-size:100% 38%}
.contact__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:28px 0 26px}
.copy-status{font:400 .75rem/1 var(--fm);color:var(--primary-ink)}
.contact__meta{list-style:none;display:grid;gap:12px;padding-top:20px;border-top:var(--bdd)}
.contact__meta li{display:flex;align-items:center;gap:12px;font-size:.93rem;color:var(--ink)}
.contact__meta .ico{width:18px;height:18px;color:var(--primary-ink)}
.contact__tip{margin:20px 0 0;font-size:.9rem;color:var(--muted)}

/* 18. Pied de page */
.ftr{padding:clamp(56px,6vw,88px) 0 28px;background:var(--surface);border-top:var(--bd);font-size:.92rem}
.ftr__grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.ftr__about .brand{margin-bottom:20px}
.ftr__about p{max-width:40ch}
.ftr__mail{font:700 1.02rem/1.3 var(--fd);color:var(--ink);overflow-wrap:anywhere}
.ftr__h{margin:0 0 14px;letter-spacing:.04em}
.ftr ul{list-style:none}
.ftr__links a,.network-links a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 calc(100% - 6px)/0 3px no-repeat;transition:background-size .25s var(--ease)}
.ftr__links a:hover,.network-links a:hover{background-size:100% 3px}
.network-links{display:grid}
.network-links a{font:400 .82rem/1.3 var(--fm)}
.network-links a::before{content:"";flex:none;width:7px;height:7px;margin-right:10px;border:1.5px solid var(--primary);border-radius:2px}
.ftr__legal{display:grid;gap:14px;margin-top:48px;padding-top:22px;border-top:var(--bd2);font-size:.82rem;color:var(--muted)}
.ftr__legal p{margin:0;max-width:110ch}
.ftr__legal a{color:var(--ink)}
.ftr__ver{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px}
.ftr__ver .mono{display:inline-flex;align-items:center;gap:8px}
.ftr__ver .mono::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--primary)}
.ftr__kbd{display:inline-flex;align-items:center;gap:8px}

/* 19. Grille G et curseur */
.gridov{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:0;transition:opacity .25s}
.show-grid .gridov{opacity:1}
.gridov .wrap{height:100%;align-items:stretch}
.gridov .wrap span{background:rgba(0,168,107,.06);border-inline:1px solid rgba(0,168,107,.28)}
.gridov__badge{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--secondary);color:#fff;font:400 .72rem/1 var(--fm)}
.gridov__badge kbd{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.cur{position:fixed;left:0;top:0;z-index:300;pointer-events:none;opacity:0;transition:opacity .2s}
.cur.is-on{opacity:1}
.cur__ring,.cur__dot{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur__ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--ink);transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),border-color .25s,background-color .25s}
.cur__dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--primary)}
.cur.is-link .cur__ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--primary);background:rgba(0,168,107,.08)}
.cur.is-down .cur__ring{width:26px;height:26px;margin:-13px 0 0 -13px}
html.has-cursor,html.has-cursor *{cursor:none!important}

/* 20. Apparitions (cachées seulement avec .js) */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="fade"]{transform:none}

/* 21. Rubrique blog et articles longs */
.progress{position:fixed;left:0;right:0;top:0;z-index:120;height:3px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--primary);transform-origin:left;transform:scaleX(var(--read,0))}
.crumbs{margin-bottom:26px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;list-style:none;font:400 .74rem/1.4 var(--fm);color:var(--muted)}
.crumbs li{display:inline-flex;align-items:center;gap:6px}
.crumbs li+li::before{content:"";width:6px;height:6px;margin-right:2px;border:solid var(--line-2);border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.crumbs a,.crumbs [aria-current]{display:inline-flex;align-items:center;min-height:32px;padding:0 8px;border:var(--bd);border-radius:4px;background:#fff;color:var(--ink);text-decoration:none}
.crumbs a:hover{border-color:var(--ink)}
.crumbs [aria-current]{border-color:var(--primary);background:var(--primary-soft);color:var(--primary-ink)}
.mag-hero{padding-top:clamp(32px,4vw,64px);padding-bottom:clamp(56px,6vw,96px)}
.mag-hero h1,.nf__text h1{font-size:clamp(1.9rem,1.1rem + 3.2vw,4rem);font-weight:800;line-height:1.03;letter-spacing:-.03em}
.mag-hero h1{grid-column:1/8}
.mag-hero__intro{grid-column:8/13;padding-top:8px}
.mag-hero__intro .facts{margin-top:28px}
.mag-edito{margin-top:clamp(48px,5vw,80px);padding-top:clamp(32px,4vw,48px);border-top:var(--bdd)}
.mag-edito>div:first-child{grid-column:1/5}
.mag-edito>.prose{grid-column:6/13}
.post .spec{align-self:flex-start}
.hdr__blog[aria-current]{background:var(--surface);color:var(--ink)}
.art-head{padding-top:clamp(28px,3.4vw,56px);padding-bottom:clamp(36px,4vw,60px)}
.art-head__in{max-width:920px}
.art-cat{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:5px 9px;border-radius:4px;background:var(--primary-soft);color:var(--primary-ink);font:400 .74rem/1 var(--fm)}
.art-head h1{margin-bottom:22px;font-size:clamp(1.5rem,.95rem + 2.5vw,3.2rem);font-weight:800;line-height:1.05;letter-spacing:-.03em}
.art-lead{max-width:64ch;font-size:var(--fs-lead);line-height:1.6;color:var(--ink)}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:26px 0 0;padding-top:18px;border-top:var(--bdd);font-size:.88rem;color:var(--muted)}
.art-meta img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.art-meta>span:last-child{display:inline-flex;align-items:center;gap:8px}
.art-meta .ico{width:16px;height:16px;color:var(--primary-ink)}
.art-meta__who{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:700}
.art-cover{margin-top:clamp(28px,3vw,44px)}
.art-cover img{width:100%;aspect-ratio:16/7;object-fit:cover}
.art-layout{padding-block:clamp(40px,5vw,72px) var(--section)}
.toc{grid-column:1/4;position:sticky;top:calc(var(--header-h) + 28px);max-height:calc(100vh - var(--header-h) - 56px);overflow-y:auto;padding:18px;border:var(--bd);border-radius:var(--r-card);background:#fff}
.toc__h{display:flex;align-items:center;gap:8px;margin:0 0 12px}
.toc__h .ico{width:15px;height:15px;color:var(--primary-ink)}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:2px}
.toc li{counter-increment:toc}
.toc a{display:grid;grid-template-columns:24px 1fr;gap:6px;padding:7px 8px;border-left:2px solid transparent;border-radius:4px;font-size:.84rem;line-height:1.35;color:var(--text);text-decoration:none;transition:background-color .2s,border-color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);font:400 .68rem/1.6 var(--fm);color:var(--muted)}
.toc a:hover{background:var(--surface);color:var(--ink)}
.toc a[aria-current]{background:var(--primary-soft);border-left-color:var(--primary);color:var(--ink);font-weight:700}
.art-body{grid-column:4/12;width:100%;max-width:770px;min-width:0}
.prose{max-width:70ch;font-size:clamp(1.02rem,.98rem + .18vw,1.1rem);line-height:1.75}
.prose>*+*{margin-top:1.1em}
.prose p{margin-bottom:0}
.prose h2{position:relative;margin-top:2.4em;padding-top:1.1em;border-top:var(--bd);font-size:clamp(1.45rem,1.15rem + 1.05vw,2.05rem);line-height:1.15;letter-spacing:-.02em}
.prose h2::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:3px;background:var(--primary)}
.prose h3{margin-top:1.9em;font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.25}
.prose h2+*,.prose h3+*{margin-top:.8em}
.prose ul,.prose ol{display:grid;gap:.55em;list-style:none}
.prose li{position:relative;padding-left:26px}
.prose ul li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border:1.5px solid var(--primary);border-radius:2px}
.prose ol{counter-reset:ol}
.prose ol>li{padding-left:40px;counter-increment:ol}
.prose ol>li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:.2em;padding:3px 5px;border-radius:3px;background:var(--surface);border:var(--bd);font:400 .7rem/1.2 var(--fm);color:var(--ink)}
.prose pre{padding:16px 18px;border:var(--bd);border-radius:var(--r-card);background:#FAFAFA;overflow-x:auto;font:400 .8rem/1.7 var(--fm);color:var(--ink)}
.prose pre code{padding:0;border:0;background:none;font-size:inherit}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent)}
.prose blockquote p{font:700 clamp(1.1rem,1rem + .5vw,1.35rem)/1.4 var(--fd);color:var(--ink)}
.prose blockquote cite{display:block;margin-top:10px;font:normal 400 .75rem/1.3 var(--fm);color:var(--muted)}
.table-wrap{margin:1.6em 0;overflow-x:auto;border:var(--bd);border-radius:var(--r-card);background:#fff}
.prose table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.prose caption{padding:12px 16px;border-bottom:var(--bd);text-align:left;font:400 .75rem/1.3 var(--fm);color:var(--muted)}
.prose th,.prose td{padding:12px 16px;border-bottom:var(--bd);text-align:left;vertical-align:top}
.prose thead th{background:var(--surface);font-size:.86rem;color:var(--ink)}
.prose tbody tr:last-child>*{border-bottom:0}
.prose tbody th{color:var(--ink)}
.prose .checklist{gap:0;border:var(--bd);border-radius:var(--r-card);background:#fff}
.prose .checklist li{padding:13px 16px 13px 50px;border-bottom:var(--bd)}
.prose .checklist li:last-child{border-bottom:0}
.prose .checklist li::before{left:16px;top:15px;width:18px;height:18px;border-radius:4px;background:var(--primary-soft)}
.prose .checklist li::after{content:"";position:absolute;left:22px;top:18px;width:5px;height:9px;border:solid var(--primary-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.callout{margin:1.8em 0;padding:20px 22px 20px 24px;border:var(--bd);border-left:3px solid var(--ink);border-radius:0 var(--r-card) var(--r-card) 0;background:#fff;font-size:.96rem;line-height:1.65}
.callout>*+*{margin-top:.7em}
.callout p{margin:0}
.callout__h{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:400 .74rem/1 var(--fm);color:var(--ink)}
.callout__h .ico{width:16px;height:16px}
.callout--tip{border-left-color:var(--primary);background:#FAFEFC}
.callout--tip .callout__h{color:var(--primary-ink)}
.callout--key{border-left-color:var(--accent);background:#FFFCF3}
.callout--key .callout__h{color:var(--accent-ink)}
.callout--warn{border-left-color:var(--ink);background:#FAFAFA}
.callout--warn .callout__h{color:var(--ink)}
.approach{margin:2.4em 0;padding:26px;border-radius:var(--r-win)}
.approach__in{position:relative;padding:22px 24px;border:var(--bd);border-radius:var(--r-card);background:#fff}
.approach__in::before{content:"";position:absolute;inset:-6px;border:1.5px dashed var(--primary);pointer-events:none}
.approach__in::after{content:"";position:absolute;inset:-8.25px;background:var(--hdl);pointer-events:none}
.approach__in>*+*{margin-top:.8em}
.approach__label{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px}
.approach__who{display:flex;align-items:center;gap:14px}
.approach__who img{flex:none;width:52px;height:52px;border-radius:8px;object-fit:cover}
.approach__who strong{display:block;font:700 1.15rem/1.2 var(--fd)}
.approach__who span{display:block;font-size:.84rem;color:var(--muted)}
.approach p{margin-bottom:0;font-size:.98rem}
.art-faq{display:grid;gap:10px}
.art-faq .qa summary{grid-template-columns:1fr 30px;font-size:1rem}
.art-faq .qa__a{padding:0 20px 20px}
.author{display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;margin-top:3em;padding:26px;border:var(--bd);border-radius:var(--r-win);background:#fff;box-shadow:var(--sh-win)}
.author__img img{width:120px;height:150px;border-radius:8px;object-fit:cover}
.author__k{margin:0 0 6px}
.author__name{margin:0 0 10px;font:700 1.3rem/1.2 var(--fd);color:var(--ink)}
.author p{margin:0 0 14px;font-size:.95rem;line-height:1.65}
.author__links{display:flex;flex-wrap:wrap;gap:10px 20px}
.related{padding-block:var(--section)}
.related__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}

/* 22. Page 404 */
.nf{padding-top:clamp(40px,6vw,96px)}
.nf__grid{align-items:center}
.nf__text{grid-column:1/7}
.nf__text h1{margin-bottom:22px;font-size:clamp(2.1rem,1.2rem + 2.4vw,3.5rem)}
.nf__text p{max-width:46ch}
.nf__links{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 24px}
.nf__list{list-style:none;display:grid;gap:4px}
.nf__list li{padding:8px 0}
.nf__stage{grid-column:8/13}
.nf__view{aspect-ratio:16/11;display:grid;place-items:center;padding:8%}
.nf__ph{width:100%;height:100%;overflow:hidden}
.nf__ph::after{content:"";position:absolute;left:50%;top:50%;width:120%;height:2px;background:var(--ink);transform:translate(-50%,-50%) rotate(-24deg)}
.nf__code{position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);padding:10px 16px;border:1.5px solid var(--ink);border-radius:6px;background:#fff;font:800 clamp(1.6rem,6cqw,3.4rem)/1 var(--fd);color:var(--ink)}
.nf__tag{position:absolute;left:6%;top:4%;z-index:1}

/* 23. Responsive */
@media (max-width:1199px){.comps,.kit{grid-template-columns:repeat(2,minmax(0,1fr))}.kinds{grid-template-columns:repeat(3,minmax(0,1fr))}.kinds__h{grid-column:1/-1;border-bottom:var(--bd)}.kinds>:nth-child(2){border-left:0}}
@media (max-width:1099px){
.nav{display:none}.menu-btn{display:inline-flex}.hdr__end{margin-left:auto}
html:not(.js) .hdr__in{height:auto;flex-wrap:wrap;padding-block:10px}html:not(.js) .nav{display:block;order:3;width:100%;margin:0}html:not(.js) .nav__list{flex-wrap:wrap}
.hero__copy,.hero__stage{grid-column:1/-1}.hero__copy{padding-top:0}.hero__stage{padding-top:72px}.hero__copy p{max-width:64ch}.facts{max-width:640px}
.atelier__text{grid-column:6/13}
.rules__head,.seuils__head,.versions__intro,.faq__intro{grid-column:1/-1;position:static;margin-bottom:32px}
.rules__list,.seuils__grid,.vpanel,.faq__list,.art-body{grid-column:1/-1}
.versions__intro p,.quote-card{max-width:640px}
.inspector{grid-column:8/13}
.toc,.art-body{grid-column:1/-1;width:100%;max-width:720px;margin-inline:auto}.toc{position:static;max-height:none;margin-bottom:40px}.prose{margin-inline:auto}}
@media (max-width:899px){
:root{--header-h:60px}
.sec-head--split,.atelier__grid,.fab__grid,.planche__head,.brief__grid,.notes,.contact__board,.mag-hero__grid,.mag-edito,.nf__grid{display:block}
.sec-head--split .h2{margin-bottom:18px}
.ruler{grid-template-columns:repeat(4,minmax(0,1fr))}.ruler span:nth-child(n+5){display:none}
.hero__stage{padding-top:24px}
.anno__tag,.anno__line{display:none}
.anno--top{top:auto;height:auto;bottom:calc(100% - var(--y))}.anno--bot{bottom:auto}
.anno__pin{width:20px;height:20px;box-shadow:0 0 0 1.5px var(--accent-line),0 4px 10px -4px rgba(24,24,27,.5)}
.anno--top .anno__pin{transform:translateY(50%)}.anno--bot .anno__pin{transform:translateY(-50%)}.anno__pin span{display:block}
.legend{grid-template-columns:1fr;gap:12px;margin-top:26px}
.atelier__board{position:static;max-width:520px;margin:0 auto 48px}
.fab__sticky{position:sticky;top:var(--header-h);z-index:3;margin-inline:calc(var(--gutter)*-1);padding:10px var(--gutter) 12px;background:#fff;box-shadow:0 14px 14px -6px #fff}
.win--fab .win__view{aspect-ratio:16/10}.win--fab .win__bar{height:34px}.fab__rail{margin-top:10px}
.fab-step,.fab-step:first-child{min-height:0;padding:26px 0 30px;align-content:start}.fab__steps::before{top:30px}
.planche__intro{margin-bottom:36px}
.inspector{position:static;margin-top:32px}
.note+.note{margin-top:44px}
.posts,.mag-list{grid-template-columns:1fr;max-width:560px}
.contact__intro{margin-bottom:32px}
.ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ftr__about{grid-column:1/-1}
.mag-hero__intro{padding-top:24px}.related__grid{grid-template-columns:1fr}.nf__stage{margin-top:40px}}
@media (max-width:719px){
.comps,.kit,.cotes,.seuils__grid,.kinds{grid-template-columns:1fr}
.cote,.cote:not(:nth-child(3n+1)){padding:26px 0;border-left:0}
.cote__k{margin-bottom:12px}
.rules__list li{grid-template-columns:44px 1fr;row-gap:4px}.rules__list span:last-child{grid-column:2}
.kinds>*+*{border-left:0;border-top:var(--bd)}.kinds__h{border-bottom:0}
.v{grid-template-columns:1fr;gap:14px;padding:20px 18px 20px 48px}.v::before{left:22px}.v::after{left:16px}.v__thumb{width:112px}
.qa summary{grid-template-columns:1fr 30px;padding:16px}.qa__n{display:none}.qa__a{padding:0 16px 20px}
.author{grid-template-columns:1fr;padding:20px}}
@media (max-width:599px){
.hdr__blog,.brand__txt small{display:none}
.pill{width:44px;height:44px;padding:0;justify-content:center}.pill span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts{grid-template-columns:1fr;border-top:0}
.facts div,.facts div+div{display:grid;grid-template-columns:96px 1fr;align-items:baseline;gap:10px;padding:10px 0;border-left:0;border-top:var(--bdd)}.facts dt{margin:0}
.hero__cta .btn,.contact__actions .btn{width:100%}
.win__bar{height:34px;padding:0 10px;gap:8px}.win__dots i{width:8px;height:8px}.win__addr{height:22px;font-size:.66rem}.win__end{display:none}.fab__sticky .win__end{display:flex}.stat{height:20px;padding:0 6px;font-size:.6rem}
.fab-step{grid-template-columns:40px 1fr;column-gap:16px}.fab-step__n{width:40px;height:40px}.fab__steps::before{left:19px}
.kit-item__head{flex-wrap:wrap}.frame-label span+span{display:none}
.qcard{grid-template-columns:1fr;padding:20px 18px}.qcard__n{margin-bottom:8px;font-size:1.4rem}
.note__card{padding:22px 20px 20px}.note__pin{left:-6px}
.contact__board{margin-inline:calc(var(--gutter)*-.5);padding:20px 14px}
.art-cover img{aspect-ratio:3/2}
.prose pre{font-size:.72rem;white-space:pre-wrap;overflow-wrap:anywhere}
.prose table,.prose caption,.prose tbody,.prose tr,.prose td,.prose tbody th{display:block;min-width:0}.prose thead{display:none}.prose tbody tr{padding:10px 0;border-bottom:var(--bd)}.prose tbody tr:last-child{border-bottom:0}.prose tbody th,.prose td{padding:4px 16px;border:0}.prose td::before{content:attr(data-label);display:block;font:400 .68rem/1.6 var(--fm);color:var(--muted)}
.ftr__grid{grid-template-columns:1fr;gap:32px}}
@media (max-width:399px){.hdr__in,.brand{gap:10px}.menu-btn{padding:0 11px}}
@media (pointer:coarse){.seg button,.nav__list a{min-height:44px}.ftr__kbd{display:none}}

/* 24. Mouvement réduit */
@media (prefers-reduced-motion:reduce){
html,html:focus-within{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
.js [data-reveal],.js .anno__tag{opacity:1;transform:none}
.js .anno__line{clip-path:none!important}
.js .win--hero{--p:1}
.cur,.mp{display:none}
.post:hover,.comp:hover,.btn:hover,.pill:hover,.post:hover .post__img img{transform:none}}