/* Blackbird Studio — feuille de style principale
   Grille 12 colonnes, marges et gouttières de 12 px, filets de 1 px.
   Pour passer aux polices définitives, déposer les fichiers dans assets/fonts
   et décommenter les @font-face ci-dessous, puis changer --f-text et --f-display. */

/*
@font-face{font-family:"TWK Lausanne";src:url("../fonts/TWKLausanne-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TWK Lausanne";src:url("../fonts/TWKLausanne-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Display Wide";src:url("../fonts/Display-Wide-Black.woff2") format("woff2");font-weight:900;font-display:swap}
*/

:root{
  --paper:#E8E5DF;
  --ink:#121212;
  --night:#0A0A0A;
  --cream:#F4EEE4;
  --mute:#7A766F;
  --rule:rgba(18,18,18,.28);
  --rule-n:rgba(255,255,255,.16);
  --signal:#D9412A;
  --f-text:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wide:125%;
  --ease:cubic-bezier(.7,0,.2,1);
  --g:12px;
  --m:12px;
  --strip:34px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-text);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.is-dark{background:var(--night);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px solid var(--signal);outline-offset:2px}
sup{font-size:.6em;line-height:0;vertical-align:super;margin-left:2px}
.sm{font-size:12.5px;line-height:1.35}
.caps{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.mute{color:var(--mute)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}
.px{padding-left:max(var(--m),env(safe-area-inset-left));padding-right:max(var(--m),env(safe-area-inset-right))}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- bandeau fixe (mix-blend pour passer du papier au noir) ---------- */
.strip{position:fixed;inset:0 0 auto;z-index:50;color:#fff;mix-blend-mode:difference;pointer-events:none}
.strip .in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);height:var(--strip);align-items:center;font-size:12.5px;border-bottom:1px solid currentColor}
.strip a,.strip button{pointer-events:auto}
.strip .in>*:nth-child(4){text-align:right}
.strip nav a{opacity:.55;transition:opacity .3s}
.strip nav a:hover,.strip nav a[aria-current="page"]{opacity:1}
.strip .clock{font-variant-numeric:tabular-nums}
.strip .sound{pointer-events:auto;margin-right:14px;opacity:.55;transition:opacity .3s}
.strip .sound:hover,.strip .sound[aria-pressed="true"]{opacity:1}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--night);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform 1s var(--ease)}
.loader .w{display:flex;font-family:var(--f-display);font-stretch:var(--wide);font-weight:900;font-size:clamp(40px,9vw,140px);line-height:1;overflow:hidden;padding:.1em 0}
.loader .w span{display:inline-block;transform:translateY(var(--y,0));transition:transform 1.1s var(--ease)}
.loader.settle .w span{transform:none}
.loader.out{transform:translateY(-100%)}
.loader .c{position:absolute;left:var(--m);bottom:calc(var(--m) + env(safe-area-inset-bottom));font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---------- rideau de transition ---------- */
.curtain{position:fixed;inset:0;z-index:90;background:var(--night);transform:translateY(100%);visibility:hidden;pointer-events:none;display:flex;align-items:flex-end;padding:var(--m);color:#fff}
.curtain.in,.curtain.arrive,.curtain.leave{visibility:visible}
.curtain.in{transform:none;transition:transform .6s var(--ease)}
.curtain.leave{transform:translateY(-100%);transition:transform .7s var(--ease)}
.curtain .t{font-family:var(--f-display);font-stretch:var(--wide);font-weight:900;font-size:clamp(40px,9vw,140px);line-height:.85;text-transform:uppercase}

/* ---------- révélations ---------- */
.line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.line>span{display:block;transform:translateY(105%);transition:transform .95s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.is-in .line>span{transform:none}
.rule{height:1px;background:currentColor;opacity:.35;transform-origin:left;transition:transform .9s var(--ease)}
.js .rule{transform:scaleX(0)}
.is-in.rule,.is-in .rule{transform:none}
.js .fade{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-in.fade,.is-in .fade{opacity:1;transform:none}

/* ---------- accueil : en-tête ---------- */
.home-top{padding-top:calc(var(--strip) + 14px)}
.mark svg{display:block;width:100%;height:auto;overflow:visible}
.mark text{font-family:var(--f-display);font-stretch:var(--wide);font-weight:900;fill:var(--ink)}
.bar{height:clamp(14px,2.4vw,30px);background:var(--ink);margin-top:6px}
.meta4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);padding-block:8px;border-bottom:1px solid var(--rule);font-size:12.5px}
.meta4>*:last-child{text-align:right}
.lead{padding-block:clamp(56px,10vw,140px) clamp(48px,7vw,96px);align-items:end}
.lead .side{grid-column:1/4;align-self:end}
.lead .side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 14px}
.lead .side dt{color:var(--mute)}
.lead .side dd{margin:0}
.lead .h1{grid-column:4/13;margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(28px,4vw,60px);line-height:1.02;letter-spacing:-.03em}
.lead .scroll{grid-column:12/13;text-align:right;align-self:end;white-space:nowrap}

/* ---------- index (noir) ---------- */
.index{background:var(--night);color:#fff;position:relative;min-height:100vh}
.cv{position:sticky;top:var(--strip);z-index:20;display:flex;min-height:38px;background:var(--night);border-bottom:1px solid var(--rule-n);font-size:12.5px}
.cv .toggle{flex:1;display:flex;justify-content:space-between;align-items:center;padding:0 var(--m);text-align:left}
.cv .toggle i{font-style:normal;transition:transform .5s var(--ease)}
.cv.open .toggle i{transform:rotate(45deg)}
.cv .opts{flex:0;display:flex;overflow:hidden;transition:flex .6s var(--ease)}
.cv.open .opts{flex:3}
.cv .opts button{flex:1;padding:0 var(--m);text-align:left;border-left:1px solid var(--rule-n);white-space:nowrap;transition:background .3s,color .3s}
.cv .opts button[aria-pressed="true"]{background:var(--cream);color:var(--ink)}
.filters{display:flex;flex-wrap:wrap;gap:6px 20px;padding:44px var(--m) 16px;font-size:12.5px}
.filters button{opacity:.6;transition:opacity .3s}
.filters button:hover{opacity:1}
.filters button[aria-pressed="true"]{opacity:1;text-decoration:underline;text-underline-offset:3px}
.filters button[aria-pressed="true"] sup{color:var(--signal)}
.filters sup{opacity:.7}

.rows{list-style:none;margin:0;padding:0}
.rows li{border-top:1px solid var(--rule-n)}
.rows li:last-child{border-bottom:1px solid var(--rule-n)}
.rows a{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);align-items:center;padding:14px var(--m);transition:color .2s}
/* survol : la couleur du projet balaie la ligne de bas en haut, le titre clignote */
.rows a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hb,var(--cream));transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease)}
.rows a:hover::before,.rows a:focus-visible::before{transform:scaleY(1);transform-origin:50% 0}
.rows a:hover .t,.rows a:focus-visible .t{animation:bb-blink .32s steps(1) 1}
@keyframes bb-blink{0%{opacity:1}25%{opacity:0}50%{opacity:1}75%{opacity:0}100%{opacity:1}}
.rows .no{grid-column:1/2;font-size:11px;opacity:.5;font-variant-numeric:tabular-nums}
.rows .t{grid-column:2/7;font-size:15px}
.rows .cl{grid-column:7/9;font-size:12.5px;opacity:.6}
.rows .d{grid-column:9/13;text-align:right;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.rows a:hover,.rows a:focus-visible{color:var(--ht,var(--ink));outline:0}
.rows a:hover .no,.rows a:hover .cl,.rows a:hover .d{opacity:1}
.preview{position:fixed;left:0;top:0;z-index:30;width:min(60vw,115vh);aspect-ratio:16/10;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .35s,transform .5s var(--ease);overflow:hidden;background:#222}
.preview.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px var(--g);padding:0 var(--m) 60px}
.grid a{display:block;min-width:0}
.grid .ph{aspect-ratio:16/10;overflow:hidden;background:#1a1a1a}
.grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.grid a:hover .ph img{transform:scale(1.04)}
.grid .cap{display:flex;justify-content:space-between;gap:12px;padding-top:8px;font-size:12.5px}
.grid .cap span:last-child{opacity:.5;font-variant-numeric:tabular-nums}

.full{display:block}
.full a{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100vh;min-height:520px;padding:calc(var(--strip) + 48px) var(--m) var(--m);overflow:hidden;color:#fff}
.full img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.4s var(--ease)}
.full a.is-in img{transform:none}
.full .top,.full .bot{position:relative;display:flex;justify-content:space-between;gap:12px;font-size:12.5px;mix-blend-mode:difference}
.full h2{position:relative;margin:0;font-family:var(--f-display);font-stretch:var(--wide);font-weight:900;font-size:clamp(44px,10vw,170px);line-height:.85;text-transform:uppercase;mix-blend-mode:difference;overflow-wrap:anywhere}
.empty{padding:40px var(--m);opacity:.6}

/* ---------- page projet ---------- */
.p-hero{background:var(--ink);color:var(--paper);padding-top:var(--strip);min-height:clamp(280px,42vh,460px)}
.p-hero .g12{min-height:inherit}
.p-hero .num{grid-column:1/4;padding:6px 0 var(--m);font-family:var(--f-display);font-weight:500;font-size:clamp(56px,8vw,128px);line-height:.88;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
/* le trait et le titre se calent sur le bord gauche du visuel d'ouverture (colonne 4 + 92 px) */
.p-hero .ttl{grid-column:4/13;position:relative;display:flex;justify-content:space-between;gap:var(--g);padding:6px 0 var(--m) calc(92px + var(--m));min-width:0}
.p-hero .ttl::before{content:"";position:absolute;left:92px;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--paper) 30%,transparent)}
.p-hero h1{margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(56px,8vw,128px);line-height:.88;letter-spacing:-.045em;overflow-wrap:anywhere}
.p-hero .count{white-space:nowrap;padding-top:8px}
.p-hero .hcl{display:block;margin-top:16px;font-size:12.5px;line-height:1.3;opacity:.6}

.chap{position:relative;padding-block:var(--m) 72px;overflow:hidden}
.chap:first-child{padding-top:calc(var(--strip) + clamp(24px,4vw,56px))}
.chap .side{grid-column:1/4;grid-row:1/3;display:grid;grid-template-columns:auto 1fr;gap:14px;align-content:start;position:relative;z-index:2}
.chap .side ol{list-style:none;margin:0;padding:0}
.chap .side a{color:var(--mute);transition:color .3s}
.chap .side a:hover,.chap .side a[aria-current="page"]{color:var(--ink)}
.chap .lab{grid-column:4/5;position:relative;z-index:2}
.chap .ct{grid-column:5/12;margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(52px,8.6vw,150px);line-height:.88;letter-spacing:-.05em;position:relative;z-index:2;overflow-wrap:anywhere}
.chap .ct .cl{display:block;margin-top:18px;font-family:var(--f-text);font-size:12.5px;line-height:1.3;font-weight:400;letter-spacing:0;color:var(--mute)}
.chap .yr{grid-column:12/13;text-align:right;position:relative;z-index:2}
.open-wrap{grid-column:4/13;grid-row:2;display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;position:relative;z-index:1;margin-top:40px;text-align:left;cursor:zoom-in}
.ow-in{display:block;min-width:0}
.open{position:relative;aspect-ratio:16/10;width:100%;max-width:100%}
.open>img{width:100%;height:100%;object-fit:cover}
.open-wrap .cap{display:block}

.lames{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:3px}
.lame{position:relative;overflow:hidden;transform:translateY(var(--off,0));transition:transform .2s linear;will-change:transform}
.lame img{position:absolute;top:0;height:100%;max-width:none;width:calc(var(--n) * 100% + (var(--n) - 1) * 3px);left:calc(var(--k) * (-100% - 3px));object-fit:cover}
.reperes{overflow:visible}
.reperes .clip{position:absolute;inset:0;overflow:hidden;clip-path:inset(var(--in,0%) var(--in,0%) var(--in,0%) var(--in,0%));transition:clip-path .15s linear}
.reperes .clip img{width:100%;height:100%;object-fit:cover;transform:scale(var(--s,1));transition:transform .15s linear}
.cm{position:absolute;width:12px;height:12px;pointer-events:none}
.cm::before,.cm::after{content:"";position:absolute;background:var(--ink)}
.cm::before{width:9px;height:1px}
.cm::after{width:1px;height:9px}
.cm.tl{left:-12px;top:-12px}.cm.tl::before{right:3px;bottom:0}.cm.tl::after{right:0;bottom:3px}
.cm.tr{right:-12px;top:-12px}.cm.tr::before{left:3px;bottom:0}.cm.tr::after{left:0;bottom:3px}
.cm.bl{left:-12px;bottom:-12px}.cm.bl::before{right:3px;top:0}.cm.bl::after{right:0;top:3px}
.cm.br{right:-12px;bottom:-12px}.cm.br::before{left:3px;top:0}.cm.br::after{left:0;top:3px}
.reg{position:absolute;left:50%;top:-26px;width:14px;height:14px;margin-left:-7px;border:1px solid var(--ink);border-radius:50%;background:linear-gradient(var(--ink),var(--ink)) center/1px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) center/100% 1px no-repeat}
.ctrl{display:flex;align-items:center;gap:0;margin-top:22px}
.ctrl i{display:block;width:28px;height:12px;background:var(--c);border:1px solid var(--rule)}
.ctrl i+i{border-left:0}
.ctrl span{margin-left:auto;font-size:10.5px;letter-spacing:.08em}
.lignes>img{-webkit-mask:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 5px);mask:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 5px)}
.trame>img{filter:grayscale(1) contrast(1.35);-webkit-mask:radial-gradient(circle,#000 36%,transparent 40%) 0 0/6px 6px;mask:radial-gradient(circle,#000 36%,transparent 40%) 0 0/6px 6px}
.chap .side a[aria-current="page"]::before{content:"";display:inline-block;width:7px;height:7px;background:var(--signal);margin-right:6px;vertical-align:1px}
::selection{background:var(--signal);color:var(--paper)}

.statement{position:relative;z-index:2;margin-inline:var(--m);padding-block:36px clamp(72px,10vw,160px)}
.st-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g);padding-top:28px}
.statement p,.statement .n{grid-column:4/13;padding-left:92px;text-align:left}
.statement p{margin:0;max-width:30ch;font-family:var(--f-display);font-weight:500;font-size:clamp(26px,3.6vw,58px);line-height:1.04;letter-spacing:-.035em}
.statement .n{display:block;margin-top:clamp(48px,6vw,96px)}
.blackbar{height:clamp(18px,2.6vw,36px);background:var(--ink);margin:8px 0}

.row{padding-block:8px 48px}
.row .c1{grid-column:1/4;display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-content:start}
.row .c2{grid-column:4/13;display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-content:start;padding-top:8px;position:relative}
.row.narrow .c2{grid-column:4/10}
.row .c3{grid-column:10/13;display:flex;flex-direction:column;align-items:flex-end;padding-top:8px;position:relative}
.row .c2>.rule,.row .c3>.rule{position:absolute;inset:0 0 auto;opacity:1}
.big-n{font-family:var(--f-display);font-weight:500;font-size:clamp(64px,10vw,180px);line-height:.85;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.row .main{cursor:zoom-in;overflow:hidden;background:color-mix(in srgb,var(--ink) 6%,transparent)}
.row .main img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.row .main:hover img{transform:scale(1.02)}
.fiche{margin:0;display:grid;gap:0}
.fiche div{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule);padding:6px 0}
.fiche dt{color:var(--mute);font-size:11px}
.fiche dd{margin:0;font-size:13px}
.swatch{display:grid;gap:6px}
.swatch div{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:center;font-size:11px;line-height:1.25;font-variant-numeric:tabular-nums}
.swatch i{display:block;aspect-ratio:1;background:var(--c);border:1px solid var(--rule)}

.next{display:block;background:var(--ink);color:var(--paper);padding:var(--m);margin-top:8px;min-height:46vh;position:relative;overflow:hidden}
.next .in{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:space-between;min-height:calc(46vh - 2 * var(--m))}
.next .nt{font-family:var(--f-display);font-weight:500;font-size:clamp(52px,9vw,160px);line-height:.88;letter-spacing:-.05em}
.next img{position:absolute;right:0;top:0;height:100%;width:40%;object-fit:cover;opacity:0;transform:translateX(10%);transition:opacity .6s,transform 1s var(--ease)}
.next:hover img{opacity:.85;transform:none}

/* agrandissement en place */
.is-open .row .main{position:relative;display:block;width:100%}
.row.is-open .c1,.row.is-open .c3,.row.is-open .c2>.sm,.row.is-open .c2>.rule{display:none}
.row.is-open .c2{grid-column:1/13;grid-template-columns:minmax(0,1fr);padding-top:0;margin-inline:calc(-1 * max(var(--m),env(safe-area-inset-left)))}
.row.is-open .main{cursor:zoom-out;background:var(--ink)}
.row.is-open .main img{width:100%;max-height:calc(100vh - var(--strip));object-fit:contain;transform:none}
.open-wrap.is-open{grid-column:1/13;grid-row:3;grid-template-columns:minmax(0,1fr);margin-inline:calc(-1 * max(var(--m),env(safe-area-inset-left)));cursor:zoom-out}
.open-wrap.is-open>.cap,.open-wrap.is-open .cm,.open-wrap.is-open .reg,.open-wrap.is-open .ctrl{display:none}
.ow-in{position:relative}
.open-wrap.is-open .open{aspect-ratio:auto;height:calc(100vh - var(--strip));background:var(--ink)}
.open-wrap.is-open .open img,.open-wrap.is-open .clip img{object-fit:contain}

/* ---------- pages simples (studio, ressources) ---------- */
.page-top{padding-top:calc(var(--strip) + 14px)}
.page-title{font-family:var(--f-display);font-stretch:var(--wide);font-weight:900;font-size:clamp(64px,16vw,260px);line-height:.82;margin:0;text-transform:uppercase}
.sec{padding-block:56px;border-top:1px solid var(--ink)}
.sec h2{grid-column:1/6;margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(30px,4.4vw,64px);line-height:.95;letter-spacing:-.035em}
.sec h2 .n{display:block;font-family:var(--f-text);font-size:12.5px;font-weight:400;letter-spacing:0;margin-bottom:14px}
.sec .body{grid-column:6/13;min-width:0}
.sec .body p{margin:0 0 14px;max-width:60ch}
.big-text{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.8vw,40px);line-height:1.08;letter-spacing:-.025em;margin:0}
.tbl{list-style:none;margin:0;padding:0}
.tbl li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;border-top:1px solid var(--rule);padding:10px 0;align-items:baseline}
.tbl li:last-child{border-bottom:1px solid var(--rule)}
.tbl .k{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.tbl a:hover{text-decoration:underline;text-underline-offset:3px}
.copy{display:inline-flex;align-items:baseline;gap:10px;font-family:var(--f-display);font-weight:500;font-size:clamp(22px,3vw,44px);letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere;text-align:left}
.copy small{font-family:var(--f-text);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* ---------- pied de page ---------- */
.foot{background:var(--ink);color:var(--paper);padding-block:var(--m) calc(var(--m) + env(safe-area-inset-bottom))}
.foot .cta{grid-column:1/13;padding-block:60px 80px}
.foot .cta p{margin:0 0 18px;font-size:12.5px;opacity:.6}
.foot .mail{font-family:var(--f-display);font-weight:500;font-size:clamp(28px,5.4vw,92px);line-height:.95;letter-spacing:-.045em;overflow-wrap:anywhere;text-align:left}
.foot .mail small{display:block;font-family:var(--f-text);font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.5;margin-top:10px}
.foot .cols{grid-column:1/13;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g);border-top:1px solid rgba(255,255,255,.2);padding-top:10px;font-size:12.5px}
.foot .cols>*:last-child{text-align:right}
.foot .cols a{opacity:.7}
.foot .cols a:hover{opacity:1}
.foot .cols div{display:flex;flex-direction:column;gap:2px}
.foot .cols>div:last-child{align-items:flex-end}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .strip .in{grid-template-columns:1fr auto}
  .strip .in>*:nth-child(3),.strip .in>*:nth-child(4){display:none}
  .meta4{grid-template-columns:1fr 1fr}
  .meta4>*:nth-child(n+3){display:none}
  .lead .side,.lead .h1,.lead .scroll{grid-column:1/13;text-align:left}
  .lead{row-gap:28px}
  .rows a{grid-template-columns:28px minmax(0,1fr)}
  .rows .t{grid-column:2}
  .rows .cl{display:none}
  .rows .d{grid-column:2;text-align:left}
  .preview{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv .opts button{padding:0 8px}
  .p-hero .num,.p-hero h1{font-size:clamp(34px,10.5vw,64px)}
  .p-hero h1{overflow-wrap:normal}
  .foot .mail{font-size:clamp(20px,6.6vw,40px)}
  .p-hero .num{grid-column:1/4}
  .p-hero .ttl{grid-column:4/13;padding-left:0}
  .p-hero .ttl::before{left:calc(var(--g) / -2)}
  .chap .side,.chap .lab,.chap .ct,.chap .yr{grid-column:1/13;text-align:left}
  .chap{row-gap:18px}
  .statement p,.statement .n{grid-column:1/13;padding-left:0}
  .open-wrap{grid-column:1/13;grid-row:auto;margin-top:16px;grid-template-columns:minmax(0,1fr)}
  .chap .side{grid-row:auto}
  .row.narrow .c2{grid-column:1/13}
  .row .c3{display:none}
  .row .c1,.row .c2{grid-column:1/13}
  .row{row-gap:18px}
  .sec h2,.sec .body{grid-column:1/13}
  .sec .g12{row-gap:24px}
  .foot .cols{grid-template-columns:1fr 1fr;row-gap:18px}
  .foot .cols>*:last-child{text-align:left}
  .foot .cols>div:last-child{align-items:flex-start}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
  .cv .opts button{font-size:11px}
}
/* ---------- curseur ---------- */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor{position:fixed;left:0;top:0;z-index:120;pointer-events:none;mix-blend-mode:difference;color:#000;opacity:0;transition:opacity .3s;will-change:transform}
.cursor.on{opacity:1}
.cursor .b{position:absolute;left:0;top:0;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;transition:transform .45s var(--ease),background-color .3s}
.cursor.is-link .b{transform:scale(5);background:transparent;box-shadow:inset 0 0 0 .2px #fff}
.cursor.down .b{transform:scale(.6)}
.cursor.is-link.down .b{transform:scale(4)}
.cursor .t{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;gap:0;white-space:nowrap;background:var(--cb,#F4EEE4);color:var(--ct,#121212);box-shadow:0 2px 14px rgba(0,0,0,.18);height:30px;padding:0 14px;border-radius:15px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;clip-path:inset(50% 50% round 15px);transition:clip-path .55s var(--ease)}
.cursor .t span{display:inline-block;transition:transform .55s var(--ease)}
.cursor .t span:first-child{transform:translateX(16px)}
.cursor .t span:last-child{transform:translateX(-16px)}
.cursor .t em{font-style:normal;padding:0 .55em;opacity:0;transition:opacity .3s}
/* étiquette pleine, sans effet d'inversion : couleur du projet survolé, sinon crème */
.cursor.is-label{mix-blend-mode:normal}
.cursor.is-label .b{transform:scale(0)}
.cursor.is-label .t{clip-path:inset(0 0 round 15px)}
.cursor.is-label .t span{transform:none}
.cursor.is-label .t em{opacity:1;transition-delay:.12s}
.cursor.down .t{transform:translate(-50%,-50%) scale(.92)}

/* ---------- thème « rose » : gris chaud, blanc cassé, rose, noir, filets épais ---------- */
html[data-theme="rose"]{
  --paper:#8E8F8D;
  --ink:#141414;
  --night:#141414;
  --cream:#F38BC9;
  --offwhite:#ECEBE6;
  --mute:#4E4F4D;
  --rule:rgba(20,20,20,.4);
  --signal:#F38BC9;
}
html[data-theme="rose"] .blackbar{height:5px}
html[data-theme="rose"] .rule{height:2px;opacity:1}
.p-bands{padding-top:var(--strip);background:var(--paper);color:var(--ink);font-family:var(--f-display);font-weight:600;letter-spacing:-.045em;text-transform:uppercase}
.p-bands .band{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--g);height:clamp(44px,6.4vw,104px);overflow:hidden;padding:0 var(--m);font-size:clamp(64px,10.5vw,176px);line-height:.86}
.p-bands .band.cream{background:var(--offwhite)}
.p-bands .band.pink{background:var(--cream)}
.p-bands{border-bottom:5px solid var(--ink)}
.p-bands .bt{display:block;margin:0;font:inherit;padding-top:.04em;white-space:nowrap;max-width:calc(100% - 36px);overflow:hidden;transform:translateY(105%);transition:transform 1.1s var(--ease);transition-delay:calc(var(--i,0) * .08s)}
.p-bands .band.is-in .bt{transform:none}
.p-bands .band i{position:absolute;right:var(--m);top:clamp(16px,2.4vw,40px);width:12px;height:12px;border-radius:50%;background:var(--ink)}
.p-bands+.chap{padding-top:clamp(24px,4vw,56px)}
@media (max-width:860px){
  .p-bands .band{font-size:clamp(44px,15vw,96px);height:clamp(30px,9vw,60px)}
  .p-bands .band i{width:8px;height:8px;top:12px}
}

/* ---------- pages sur mesure ---------- */
.pg-body{padding-block:clamp(40px,6vw,96px) clamp(72px,10vw,160px)}
.pg-in{padding-block:clamp(32px,5vw,72px) 0}
.pg-title{grid-column:4/13;padding-left:92px;margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(52px,8.6vw,150px);line-height:.88;letter-spacing:-.05em;overflow-wrap:anywhere}
.pg-blk{margin-bottom:clamp(40px,6vw,88px)}
.pg-h{grid-column:4/13;padding-left:92px;margin:0;font-family:var(--f-display);font-weight:500;font-size:clamp(34px,4.6vw,76px);line-height:.95;letter-spacing:-.04em}
.pg-text{grid-column:4/13;padding-left:92px;max-width:calc(92px + 62ch);font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.pg-text p{margin:0 0 1em}
.pg-img,.pg-duo{grid-column:4/13;padding-left:92px;margin:0}
.pg-img img,.pg-img video,.pg-duo img,.pg-duo video{display:block;width:100%;height:auto}
.pg-img figcaption{margin-top:10px;color:var(--mute)}
.pg-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.pg-duo figure{margin:0}
@media (max-width:860px){
  .pg-title,.pg-h,.pg-text,.pg-img,.pg-duo{grid-column:1/13;padding-left:0}
  .pg-duo{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .line>span,.fade,.rule,.p-bands .bt{transform:none!important;opacity:1!important}
}