/* =========================================================================
   Hélène Simonin — système visuel
   Monochrome noir & blanc · éditorial · inspiration studio de DA
   Castoro (titres) · Lacoste Medium (corps) · IBM Plex Mono Light (méta)
   ========================================================================= */

/* ---------- fonts ---------- */
@font-face{
  font-family:'Castoro';
  src:url('assets/fonts/Castoro-Regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Lacoste';
  src:url('assets/fonts/Lacoste-Medium.otf') format('opentype');
  font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('assets/fonts/IBMPlexMono-Light.ttf') format('truetype');
  font-weight:300;font-style:normal;font-display:swap;
}

:root{
  --paper:#f5f3ee;
  --paper-2:#e9e5db;
  --paper-3:#ded9cb;
  --white:#fbfaf7;
  --ink:#14120d;
  --ink-2:#6c675c;
  --ink-3:#9d978a;
  --line:rgba(20,18,13,.16);
  --line-strong:rgba(20,18,13,.32);

  --font-display:'Castoro', Georgia, 'Times New Roman', serif;
  --font-sans:'Lacoste', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --maxw:1600px;
  --pad:clamp(18px,4.5vw,72px);
  --nav-h:54px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-sans);font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--ink);color:var(--paper);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;line-height:1;letter-spacing:.002em;}
.display{font-family:var(--font-display);font-weight:400;line-height:.96;}
.mono{font-family:var(--font-mono);font-weight:300;letter-spacing:.02em;}
.eyebrow{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);}
.arrow{font-family:var(--font-mono);font-weight:300;display:inline-block;}
.serif-italic{font-family:var(--font-display);font-style:italic;font-weight:400;}

/* ---------- language swap ---------- */
[data-en]{display:none;}
html[lang="en"] [data-fr]{display:none;}
html[lang="en"] [data-en]{display:revert;}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(70px,11vw,180px);}
.divider{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding-inline:var(--pad);color:var(--ink);
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.solid{background:color-mix(in srgb, var(--paper) 84%, transparent);backdrop-filter:blur(14px) saturate(1.1);border-bottom-color:var(--line);}
.nav.light{color:var(--white);}
.nav-brand{display:flex;align-items:center;gap:clamp(12px,1.2vw,18px);font-family:var(--font-display);letter-spacing:.01em;justify-self:start;}
.nav-logo{height:46px;width:auto;display:block;transition:filter .5s var(--ease);}
.nav.light .nav-logo{filter:invert(1) brightness(2);}
.nav-brand:hover .nav-logo{opacity:.7;}
.nav-brand .nm{font-family:var(--font-display);font-size:clamp(28px,3.6vw,54px);line-height:.92;text-transform:uppercase;letter-spacing:.015em;transition:opacity .3s;}
.nav-menu{justify-self:center;display:flex;align-items:center;gap:clamp(20px,2.8vw,52px);}
.nav-right{justify-self:end;display:flex;align-items:center;gap:clamp(14px,2vw,26px);}
.nav-link{font-family:var(--font-sans);font-weight:700;font-size:14px;letter-spacing:.01em;text-transform:none;position:relative;padding:10px 4px;opacity:.82;}
.nav-link:hover{opacity:1;}
.nav-link::after{content:"";position:absolute;left:4px;right:100%;bottom:8px;height:1px;background:currentColor;transition:right .4s var(--ease);}
.nav-link:hover::after,.nav-link.active::after{right:4px;}
.nav-link.active{opacity:1;}
.lang{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.1em;}
.lang button{background:none;border:0;color:inherit;cursor:pointer;font:inherit;padding:2px 3px;opacity:.42;transition:opacity .25s;}
.lang button.on{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.lang span{opacity:.4;}
.nav-burger{display:none;background:none;border:0;color:inherit;cursor:pointer;font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.16em;text-transform:uppercase;}

/* ---------- buttons / links ---------- */
.btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-mono);font-weight:300;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:100px;padding:14px 26px;transition:background .4s var(--ease),color .4s var(--ease);cursor:pointer;background:none;color:inherit;}
.btn:hover{background:var(--ink);color:var(--paper);}
.link-u{position:relative;font-family:var(--font-mono);font-weight:300;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;gap:9px;align-items:center;}
.link-u::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
.link-u:hover::after{transform:scaleX(1);}

/* =========================================================================
   ANIMATIONS
   ========================================================================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
/* masked line reveal for big type */
.mask{overflow:hidden;display:block;}
.mask > .mask-i{display:block;transform:translateY(112%);transition:transform 1.05s var(--ease);}
.mask.in > .mask-i{transform:none;}
.mask.d1 > .mask-i{transition-delay:.08s;}
.mask.d2 > .mask-i{transition-delay:.16s;}
.mask.d3 > .mask-i{transition-delay:.24s;}
.mask.d4 > .mask-i{transition-delay:.32s;}
/* clip reveal for big multi-line type */
.clip-rev{clip-path:inset(0 0 108% 0);transition:clip-path 1.15s var(--ease);}
.clip-rev.in{clip-path:inset(0 0 -6% 0);}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .mask > .mask-i{transform:none;transition:none;}
  .clip-rev{clip-path:none;transition:none;}
}
/* parallax media */
.px-wrap{overflow:hidden;position:relative;}
.px-wrap img{width:100%;height:100%;object-fit:cover;transform-origin:center;will-change:transform;}
/* page veil */
.page-veil{position:fixed;inset:0;background:var(--paper);z-index:9999;pointer-events:none;opacity:1;transition:opacity .8s var(--ease);}
.page-veil.hide{opacity:0;}
.page-veil .pv-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:34px;opacity:.0;transition:opacity .5s;}

/* =========================================================================
   HOME — manifesto hero
   ========================================================================= */
.home-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav-h) + clamp(20px,5vh,60px)) var(--pad) clamp(96px,16vh,150px);position:relative;}
.hh-eyebrow{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:clamp(20px,4.5vh,52px);}
.hh-name{font-family:var(--font-display);font-weight:400;letter-spacing:.004em;font-size:clamp(72px,16.5vw,260px);margin:0;line-height:1;}
.hh-name .mask{display:block;}
.hh-name .mask.d2{margin-top:-0.16em;}
.hh-name .mask-i{display:block;line-height:1.16;}
.hh-name .serif-italic{font-style:italic;}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:clamp(13px,1.7vw,24px);}
.marquee-track{display:inline-flex;align-items:center;animation:marq 30s linear infinite;will-change:transform;}
.marquee-track span{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,3vw,46px);padding-inline:clamp(16px,2.2vw,40px);white-space:nowrap;}
.marquee-track .dot{font-family:var(--font-mono);font-weight:300;font-size:.5em;opacity:.6;padding-inline:0;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
.manifesto{font-family:var(--font-display);font-weight:400;
  font-size:clamp(34px,6.4vw,104px);line-height:1.04;letter-spacing:.004em;max-width:18ch;}
.manifesto .serif-italic{font-style:italic;}
.home-hero-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(22px,3.5vw,42px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;}
.hh-loc{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}
.scroll-cue{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:9px;}
.scroll-cue .a{animation:bob 2.2s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* statement band */
.statement{padding-block:clamp(80px,16vw,260px);}
.statement p{font-family:var(--font-display);font-weight:400;font-size:clamp(28px,5vw,82px);line-height:1.08;max-width:22ch;margin:0;}
.statement .serif-italic{font-style:italic;}

/* WORKS — full-bleed list */
.works-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding-bottom:clamp(26px,3vw,46px);}
.works-head h2{font-size:clamp(30px,4.6vw,66px);}
.work{display:block;position:relative;margin-bottom:clamp(46px,7vw,128px);}
.work-media{position:relative;overflow:hidden;background:var(--paper-2);width:100%;}
.work-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);will-change:transform;}
.work:hover .work-media img{transform:scale(1.045);}
.work-cap{display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:baseline;margin-top:20px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.work-num{font-family:var(--font-mono);font-weight:300;font-size:13px;letter-spacing:.04em;}
.work-name{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.6vw,52px);line-height:1;}
.work-desc{font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.5vw,21px);color:var(--ink-2);line-height:1.3;align-self:center;}
.work-meta{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.05em;color:var(--ink-2);text-align:right;white-space:nowrap;}
.work-cta-row{display:flex;justify-content:center;padding-top:clamp(10px,3vw,40px);}
/* layout rhythm: alternate widths */
.work.w-full .work-media{aspect-ratio:16/8.6;}
.work.w-left{max-width:62%;}
.work.w-left .work-media{aspect-ratio:4/3;}
.work.w-right{max-width:54%;margin-left:auto;}
.work.w-right .work-media{aspect-ratio:3/4;}
.work.w-mid{max-width:78%;margin-inline:auto;}
.work.w-mid .work-media{aspect-ratio:3/2;}

/* =========================================================================
   PROJETS — index list + hover preview
   ========================================================================= */
.page-head{padding-top:calc(var(--nav-h) + clamp(46px,8vw,120px));padding-bottom:clamp(34px,4vw,64px);}
.page-head .eyebrow{margin-bottom:20px;}
.page-title{font-size:clamp(50px,11vw,168px);line-height:.9;}
.page-head .lead{margin-top:24px;max-width:52ch;color:var(--ink-2);font-size:clamp(17px,1.6vw,21px);}

.index{position:relative;border-top:1px solid var(--line-strong);}
.index-row{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:26px;
  padding:clamp(20px,2.7vw,34px) 0;border-bottom:1px solid var(--line);position:relative;
  transition:padding-left .5s var(--ease),color .35s;}
.index-row:hover{padding-left:26px;}
.index-num{font-family:var(--font-mono);font-weight:300;font-size:13px;letter-spacing:.04em;}
.index-name{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,5.4vw,76px);line-height:.98;}
.index-row:hover .index-name{font-style:italic;}
.index-tags{font-family:var(--font-mono);font-weight:300;font-size:12px;color:var(--ink-2);letter-spacing:.03em;text-align:right;max-width:38vw;}
.index-tags .y{color:var(--ink-3);}
.index-thumb{display:none;}

.preview{position:fixed;top:0;left:0;width:clamp(280px,25vw,400px);height:clamp(340px,33vw,500px);
  pointer-events:none;z-index:60;opacity:0;transform:translate(-50%,-50%) scale(.96);
  transition:opacity .4s var(--ease);overflow:hidden;background:var(--paper-2);will-change:transform,opacity;}
.preview.show{opacity:1;}
.preview img{width:100%;height:100%;object-fit:cover;}
@media (hover:none){.preview{display:none;}}

/* =========================================================================
   PROJETS — scattered mosaic (composition « studio »)
   ========================================================================= */
.pfilter-bar{position:sticky;top:var(--nav-h);z-index:40;background:color-mix(in srgb, var(--paper) 88%, transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);padding:clamp(14px,1.6vw,20px) var(--pad);display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);flex-wrap:wrap;}
.pfilter-bar .pf-label{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-right:auto;}
.pf-btn{font-family:var(--font-mono);font-weight:300;font-size:13px;letter-spacing:.05em;background:none;border:0;color:var(--ink);cursor:pointer;padding:4px 0;position:relative;opacity:.5;transition:opacity .3s;}
.pf-btn:hover{opacity:.85;}
.pf-btn.on{opacity:1;}
.pf-btn::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:currentColor;transition:right .4s var(--ease);}
.pf-btn.on::after,.pf-btn:hover::after{right:0;}
.pf-count{font-size:.78em;vertical-align:super;color:var(--ink-3);margin-left:3px;}

.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(30px,3vw,64px) clamp(18px,2.2vw,38px);align-items:start;
  padding-top:clamp(40px,6vw,90px);padding-bottom:clamp(40px,6vw,90px);}
.pcard{grid-column:span 4;display:block;min-width:0;}
.pcard.s{grid-column:span 3;}
.pcard.m{grid-column:span 4;}
.pcard.l{grid-column:span 5;}
.pcard.xl{grid-column:span 6;}
.pcard.o1{margin-top:clamp(20px,5vw,76px);}
.pcard.o2{margin-top:clamp(44px,11vw,168px);}
.pcard.o3{margin-top:clamp(10px,2.6vw,44px);}
.pcard-media{position:relative;overflow:hidden;background:var(--paper-2);width:100%;}
.pcard-media img,.pcard-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease);will-change:transform;}
.pcard:hover .pcard-media img{transform:scale(1.05);}
.pcard-media video{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);}
.pcard.has-video:hover .pcard-media video{opacity:1;}
.pcard-media .vtag{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--font-mono);font-weight:300;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);mix-blend-mode:difference;display:flex;align-items:center;gap:6px;}
.pcard-media .vtag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.ar-port{aspect-ratio:4/5;}
.ar-tall{aspect-ratio:3/4;}
.ar-land{aspect-ratio:4/3;}
.ar-wide{aspect-ratio:16/10;}
.ar-sq{aspect-ratio:1/1;}
.pcard-cap{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:14px;padding-bottom:2px;}
.pcard-title{font-family:var(--font-display);font-weight:400;font-size:clamp(17px,1.5vw,23px);line-height:1.12;transition:font-style .2s;}
.pcard:hover .pcard-title{font-style:italic;}
.pcard-sub{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.04em;color:var(--ink-2);margin-top:3px;}
.pcard-num{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.04em;color:var(--ink-3);flex:none;}
.pcard.is-hidden{display:none;}
/* filtering fade */
.pgrid.filtering .pcard{transition:opacity .35s var(--ease);}

@media (max-width:1000px){
  .pgrid{gap:clamp(26px,4vw,48px) clamp(16px,2.4vw,28px);}
  .pcard,.pcard.s,.pcard.m{grid-column:span 6;}
  .pcard.l,.pcard.xl{grid-column:span 6;}
  .pcard.o1,.pcard.o2,.pcard.o3{margin-top:clamp(14px,3vw,40px);}
}
@media (max-width:600px){
  .pgrid{grid-template-columns:1fr;}
  .pcard,.pcard.s,.pcard.m,.pcard.l,.pcard.xl{grid-column:1/-1;}
  .pcard.o1,.pcard.o2,.pcard.o3{margin-top:0;}
}

/* =========================================================================
   HOME v3 — hero vidéo plein cadre + bande À propos
   ========================================================================= */
.cine-hero{position:relative;width:100%;height:100svh;min-height:540px;overflow:hidden;
  background:var(--ink) url('assets/ceres-hero.jpg') center/cover no-repeat;}
.cine-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cine-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,13,.36),rgba(20,18,13,0) 28%,rgba(20,18,13,0) 56%,rgba(20,18,13,.62));}
.cine-overlay{position:absolute;inset:0;z-index:2;color:var(--white);display:flex;flex-direction:column;justify-content:flex-end;padding:var(--pad) var(--pad) clamp(26px,3.6vw,52px);}
.cine-name{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,8.5vw,128px);line-height:.88;}
.cine-name .serif-italic{font-style:italic;}
.cine-sub{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:clamp(12px,1.6vw,20px);}
.cine-role{font-family:var(--font-sans);font-weight:700;font-size:clamp(13px,1.15vw,17px);letter-spacing:.04em;text-transform:uppercase;}
.cine-credit{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.92;display:flex;align-items:center;gap:8px;}
.cine-credit::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:vblink 2s ease-in-out infinite;}
.cine-cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.85);
  font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:7px;}
.cine-cue .a{animation:bob 2.2s ease-in-out infinite;}

.about-band{padding-block:clamp(70px,12vw,170px);}
.about-band .ab-eyebrow{margin-bottom:clamp(20px,3vw,40px);}
.about-band .ab-lead{font-family:var(--font-display);font-weight:400;font-size:clamp(26px,3.6vw,54px);line-height:1.14;max-width:20ch;}
.about-band .ab-lead .serif-italic{font-style:italic;}
.about-band .ab-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(34px,5vw,70px);}
.about-band .ab-bio p{font-size:clamp(16px,1.4vw,19px);color:var(--ink);margin:0 0 16px;max-width:52ch;}
.about-band .ab-side{font-family:var(--font-mono);font-weight:300;font-size:13px;letter-spacing:.02em;color:var(--ink-2);}
.about-band .ab-side .row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);}
.about-band .ab-side .row .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;font-size:11px;}
.about-band .ab-cta{margin-top:clamp(26px,3vw,40px);}
@media (max-width:860px){ .about-band .ab-grid{grid-template-columns:1fr;} }

/* blend white-background images into the paper (remove white box) */
.mcard.no-bg{background:transparent;}
.mcard.no-bg img{mix-blend-mode:multiply;}
.mcard.no-bg:hover img{transform:none;}

/* =========================================================================
   HOME v4 — façon NOA : hero logo géant + grille projets + à propos final
   ========================================================================= */
.noa-hero{position:relative;width:100%;height:100svh;min-height:540px;overflow:hidden;
  background:var(--ink) url('assets/ceres-hero.jpg') center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;}
.noa-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.noa-logo{position:relative;z-index:2;width:clamp(240px,46vw,760px);height:auto;
  filter:drop-shadow(0 3px 36px rgba(20,18,13,.22));}
.noa-scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.18em;color:var(--white);opacity:.7;}
/* morphing SH logo : centré géant en haut, file vers le nav en scrollant */
.morph-logo{position:fixed;top:0;left:6px;height:var(--nav-h);z-index:120;display:flex;align-items:center;}
.morph-logo img{height:46px;width:auto;display:block;transform-origin:center;will-change:transform;filter:drop-shadow(0 3px 30px rgba(20,18,13,.22));}
body.home .nav-brand{opacity:0;pointer-events:none;}

.home-grid{padding-top:clamp(70px,10vw,150px);padding-bottom:clamp(8px,1.4vw,20px);}
.hg-masonry{display:flex;flex-direction:column;}
.hg-cols{display:flex;gap:clamp(40px,5vw,96px);align-items:flex-start;}
.hg-band{margin-top:clamp(40px,5vw,90px);margin-bottom:clamp(40px,5vw,90px);}
.hg-band .hg-item{width:100%;margin:0;}
.hg-col{flex:1;min-width:0;display:flex;flex-direction:column;}
.hg-col:last-child{margin-top:clamp(50px,9vw,150px);}
.hg-item{display:block;width:100%;}
/* irrégularité : largeurs variées + alignements alternés + marges inégales */
.hg-col:first-child .hg-item:nth-child(1){width:96%;margin-bottom:clamp(80px,10vw,168px);}
.hg-col:first-child .hg-item:nth-child(2){width:72%;margin-left:auto;margin-bottom:clamp(58px,7vw,120px);}
.hg-col:first-child .hg-item:nth-child(3){width:88%;margin-bottom:clamp(96px,12vw,200px);}
.hg-col:first-child .hg-item:nth-child(4){width:64%;margin-bottom:clamp(58px,7vw,120px);}
.hg-col:first-child .hg-item:nth-child(5){width:92%;margin-left:auto;margin-bottom:clamp(80px,10vw,168px);}
.hg-col:first-child .hg-item:nth-child(n+6){width:80%;margin-bottom:clamp(70px,9vw,150px);}
.hg-col:first-child .hg-item:nth-child(even):nth-child(n+6){margin-left:auto;}
.hg-col:last-child .hg-item:nth-child(1){width:80%;margin-bottom:clamp(96px,12vw,200px);}
.hg-col:last-child .hg-item:nth-child(2){width:94%;margin-left:auto;margin-bottom:clamp(58px,7vw,120px);}
.hg-col:last-child .hg-item:nth-child(3){width:68%;margin-bottom:clamp(86px,11vw,184px);}
.hg-col:last-child .hg-item:nth-child(4){width:90%;margin-left:auto;margin-bottom:clamp(58px,7vw,120px);}
.hg-col:last-child .hg-item:nth-child(n+5){width:76%;margin-bottom:clamp(70px,9vw,150px);}
.hg-col:last-child .hg-item:nth-child(odd):nth-child(n+5){margin-left:auto;}
.hg-col .hg-item:last-child{margin-bottom:clamp(10px,1.6vw,28px);}
.hg-item.big{width:100%!important;margin-left:0!important;margin-right:0!important;}

/* paires de fin de grille : gros à gauche, petit décalé à droite */
.hg-pairs{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,48px);margin-top:clamp(18px,2.2vw,40px);}
.hg-pair{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(40px,5vw,96px);align-items:start;}
.hg-pair .hg-item{width:100%;margin:0;}
.hg-pair .hg-small{margin-top:clamp(48px,8vw,150px);}
@media (max-width:600px){ .hg-pair{grid-template-columns:1fr;gap:clamp(34px,8vw,56px);} .hg-pair .hg-small{margin-top:0;} }

/* paire inversée : petit à gauche (décalé bas), grand à droite (remonté) */
.hg-pair-rev{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(40px,5vw,96px);align-items:start;}
.hg-pair-rev .hg-item{width:100%;margin:0;}
.hg-pair-rev .hg-small{margin-top:clamp(28px,4vw,72px);}
@media (max-width:600px){ .hg-pair-rev{grid-template-columns:1fr;gap:clamp(34px,8vw,56px);} .hg-pair-rev .hg-small{margin-top:0;} }

/* trio : Nice (gauche) + 2 projets empilés à droite */
.hg-trio{display:grid;grid-template-columns:1.18fr 1fr;gap:clamp(40px,5vw,96px);align-items:start;margin-bottom:clamp(34px,4vw,72px);}
.hg-trio .hg-item{width:100%;margin:0;}
.hg-trio-main{align-self:center;}
.hg-trio-side{display:flex;flex-direction:column;gap:clamp(40px,5vw,90px);}
@media (max-width:600px){ .hg-trio{grid-template-columns:1fr;gap:clamp(34px,8vw,56px);} }
.hg-media{position:relative;overflow:hidden;background:var(--paper-2);}
.hg-media img,.hg-media video{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease);will-change:transform;}
.hg-item:hover .hg-media img{transform:scale(1.03);}
.hg-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease);}
.hg-item.has-video:hover .hg-media video{opacity:1;}
.hg-item.no-bg .hg-media{background:transparent;}
.hg-item.no-bg .hg-media img,.hg-item.no-bg .hg-media video{mix-blend-mode:multiply;}
.hg-item.no-bg:hover .hg-media img{transform:none;}
.hg-cap{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:12px;}
.hg-name{font-family:var(--font-sans);font-weight:700;font-size:15px;letter-spacing:.01em;text-transform:none;line-height:1.2;}
.hg-meta{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.04em;color:var(--ink-2);text-align:right;flex:none;}
.hg-sub{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.03em;color:var(--ink-2);margin-top:3px;text-transform:lowercase;}

.home-about{padding-block:clamp(8px,1.4vw,20px) clamp(30px,4vw,56px);}
.ha-label{font-family:var(--font-sans);font-weight:700;font-size:14px;text-transform:none;letter-spacing:.01em;color:var(--ink-2);margin-bottom:clamp(26px,3.2vw,46px);}
.ha-grid{display:block;}
.ha-drawing{margin:0 0 clamp(24px,3vw,44px);}
.ha-drawing img{width:auto;max-width:100%;max-height:clamp(280px,40vh,440px);}
.ha-bio p{font-family:var(--font-display);font-weight:400;font-size:clamp(24px,3.2vw,46px);line-height:1.22;margin:0 0 24px;max-width:min(94%,1120px);}
.ha-bio p .serif-italic{font-style:italic;}
.ha-side{display:flex;flex-wrap:wrap;gap:clamp(30px,5vw,86px);margin-top:clamp(40px,5vw,72px);padding-top:clamp(26px,3vw,42px);border-top:1px solid var(--line);font-family:var(--font-mono);font-weight:300;letter-spacing:.02em;}
.ha-side .row{display:flex;flex-direction:column;gap:7px;padding:0;border:0;}
.ha-side .row .k{color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;font-size:11px;}
.ha-side .row .v{color:var(--ink);font-size:14px;}
.ha-cta{margin-top:clamp(30px,3.4vw,48px);}
.ha-cta a{font-family:var(--font-sans);font-weight:700;text-transform:lowercase;font-size:14px;}
@media (max-width:1100px){ .hg-masonry{column-count:2;} }
@media (max-width:600px){ .hg-cols{flex-direction:column;} .hg-col .hg-item{width:100%!important;margin-left:0!important;} }

/* =========================================================================
   PROJETS — composition « studio » v2 : feature vidéo + masonry 2 colonnes
   ========================================================================= */
.pwrap{padding-top:var(--nav-h);}
/* hover title overlay shared */
.pcard-over{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(16px,2vw,28px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;color:var(--white);
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);}
.pcard-over::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(20,18,13,.62),rgba(20,18,13,0));opacity:0;transition:opacity .5s var(--ease);}
.pcard-over .o-title{font-family:var(--font-display);font-weight:400;font-size:clamp(22px,2.4vw,38px);line-height:1;}
.pcard-over .o-sub{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.05em;margin-top:6px;opacity:.9;}
.pcard-over .o-num{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.04em;flex:none;}
:where(.pfeature,.mcard):hover .pcard-over{opacity:1;transform:none;}
:where(.pfeature,.mcard):hover .pcard-over::before{opacity:1;}

/* feature — Cérès, big autoplay video */
.pfeature{position:relative;display:block;width:100%;overflow:hidden;background:var(--ink);
  aspect-ratio:16/9;margin-top:clamp(8px,1.4vw,20px);}
.pfeature video,.pfeature img{width:100%;height:100%;object-fit:cover;display:block;}
.pfeature .vtag{position:absolute;top:clamp(16px,2vw,26px);left:clamp(16px,2vw,28px);z-index:3;
  font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:8px;}
.pfeature .vtag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:vblink 2s ease-in-out infinite;}
@keyframes vblink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* masonry — 2 columns, natural ratios (no crop, no rotation) */
.pmasonry{column-count:2;column-gap:clamp(18px,2.4vw,44px);margin-top:clamp(18px,2.4vw,44px);
  padding-bottom:clamp(40px,6vw,90px);}
.mcard{position:relative;display:block;break-inside:avoid;margin-bottom:clamp(18px,2.4vw,44px);overflow:hidden;background:var(--paper-2);}
.mcard img,.mcard video{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease);will-change:transform;}
.mcard:hover img{transform:scale(1.04);}
.mcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease);}
.mcard.has-video:hover video{opacity:1;}
.mcard .vtag{position:absolute;top:12px;left:12px;z-index:4;font-family:var(--font-mono);font-weight:300;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);display:flex;align-items:center;gap:6px;}
.mcard .vtag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
@media (max-width:740px){
  .pmasonry{column-count:1;}
  .pfeature{aspect-ratio:4/3;}
}

/* =========================================================================
   PROJET — description d'abord, puis galerie mosaïque (formats naturels)
   ========================================================================= */
.p-head{padding-top:calc(var(--nav-h) + clamp(46px,8vw,112px));}
.p-eyebrow{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.04em;color:var(--ink-2);margin-top:7px;}
.p-title{font-family:var(--font-sans);font-weight:700;font-size:clamp(16px,1.7vw,22px);line-height:1.15;text-transform:uppercase;letter-spacing:.012em;}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,1.8vw,22px);}
.p-body{margin-top:clamp(34px,5vw,72px);padding-bottom:clamp(40px,5vw,72px);}
.p-body .intro{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,1.8vw,26px);line-height:1.34;max-width:92ch;}
.p-body .p-credit{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.04em;color:var(--ink-3);margin-top:clamp(16px,2vw,26px);}
.fact h4{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;}
.fact p{margin:0;font-size:15.5px;}
.fact .tags{display:flex;flex-wrap:wrap;gap:8px;}
.tag{font-family:var(--font-mono);font-weight:300;font-size:12px;border:1px solid var(--line-strong);border-radius:100px;padding:4px 12px;letter-spacing:.02em;}

/* galerie mosaïque — 2 colonnes, ratios naturels (pas de recadrage, pas de rotation) */
.p-gallery{column-count:2;column-gap:clamp(20px,2.8vw,52px);padding:clamp(14px,1.8vw,26px) 0 clamp(36px,5vw,72px);}
.pg-fig{margin:0 0 clamp(22px,3vw,56px);break-inside:avoid;overflow:hidden;background:var(--paper-2);}
.pg-fig img{width:100%;height:auto;display:block;transition:transform 1.2s var(--ease);will-change:transform;}
.pg-fig:hover img{transform:scale(1.03);}
.pg-fig video{width:100%;height:auto;display:block;background:var(--ink);}
/* rogne un cadre blanc intégré à la vidéo */
.pg-fig.crop-frame{overflow:hidden;}
.pg-fig.crop-frame video{transform:scale(1.2);transform-origin:center;}
/* vidéo verticale : limiter la hauteur pour la voir en entier */
.pg-fig.fit-h video{max-height:78vh;width:auto;max-width:100%;margin-inline:auto;}
.pg-fig.fit-h{display:flex;justify-content:center;}
.pg-fig.no-bg{background:transparent;}
.pg-fig.no-bg img{mix-blend-mode:multiply;}
.pg-fig.no-bg:hover img{transform:none;}
.pg-fig.feature{column-span:all;margin-bottom:clamp(28px,3.6vw,64px);}
/* dessin centré au milieu de la composition */
.pg-fig.feature.center{display:flex;justify-content:center;}
.pg-fig.feature.center img{width:auto;max-width:min(48%,420px);height:auto;}
/* paire d'images côte à côte (demi-largeur), hors flux colonne */
.pg-pair{column-span:all;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,40px);margin-bottom:clamp(22px,3vw,56px);align-items:start;}
.pg-pair .pg-fig{margin:0;}
/* image rognée pour égaliser la hauteur de la paire (rogne le haut) */
.pg-pair.crop .pg-fig:nth-child(2) img{height:100%;object-fit:cover;object-position:bottom;}
.pg-cap{display:none;}
.p-empty{padding-block:clamp(30px,4vw,60px);color:var(--ink-2);font-family:var(--font-display);font-style:italic;font-size:clamp(20px,2.2vw,30px);}

/* précédent / suivant — minimal, IBM Plex Mono */
.p-nav{display:flex;justify-content:space-between;gap:20px;padding-block:clamp(26px,3vw,44px);}
.p-nav a{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:9px;transition:color .3s;}
.p-nav a:hover{color:var(--ink);}
@media (max-width:740px){ .p-gallery{column-count:1;} }

/* =========================================================================
   À PROPOS
   ========================================================================= */
.about-hero{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(30px,5vw,80px);align-items:end;}
.about-portrait{position:relative;background:var(--paper-2);overflow:hidden;aspect-ratio:4/5;}
.about-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);}
.about-portrait .pcap{position:absolute;left:14px;bottom:12px;color:var(--white);font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-shadow:0 1px 14px rgba(0,0,0,.55);}
.about-hello{font-family:var(--font-display);font-weight:400;font-size:clamp(46px,9vw,124px);line-height:.92;}
.about-hello .serif-italic{font-style:italic;}
.about-bio{margin-top:clamp(22px,2.6vw,38px);max-width:54ch;}
.about-bio p{font-size:clamp(17px,1.55vw,21px);margin:0 0 17px;}

.about-illu-wrap{padding-top:clamp(40px,6vw,90px);display:flex;justify-content:center;}
.about-illu{margin:0;max-width:clamp(260px,34vw,440px);}
.about-illu img{width:100%;height:auto;}
.about-drawing{margin:clamp(22px,3vw,40px) 0 0;}
.about-drawing img{width:auto;max-width:100%;max-height:clamp(300px,42vh,460px);mix-blend-mode:multiply;}

.cv{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(32px,4vw,60px) clamp(28px,4vw,56px);}
.cv-block{grid-column:span 6;}
.cv-block.full{grid-column:1/-1;}
.cv-block > h3{font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);
  margin:0 0 22px;padding-bottom:13px;border-bottom:1px solid var(--line-strong);}
.cv-item{display:grid;grid-template-columns:148px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);}
.cv-item .per{font-family:var(--font-mono);font-weight:300;font-size:12.5px;letter-spacing:.02em;padding-top:5px;color:var(--ink-2);}
.cv-item .org{font-family:var(--font-display);font-size:clamp(22px,2.1vw,30px);line-height:1.04;}
.cv-item .rol{font-size:14.5px;margin-top:3px;}
.cv-item .nte{font-size:14px;color:var(--ink-2);margin-top:6px;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:var(--font-mono);font-weight:300;font-size:12.5px;border:1px solid var(--line-strong);border-radius:100px;padding:6px 15px;letter-spacing:.02em;}
.lang-list{list-style:none;margin:0;padding:0;}
.lang-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15.5px;}

/* =========================================================================
   FOOTER — centré, compact, logo centré
   ========================================================================= */
.footer{background:var(--paper);color:var(--ink);padding-block:clamp(30px,3.5vw,48px) clamp(22px,2.6vw,34px);}
.footer a{color:inherit;}
.footer-inner{text-align:left;}
.footer-row{display:flex;justify-content:space-between;align-items:flex-start;gap:clamp(28px,5vw,80px);flex-wrap:wrap;}
.footer-mail{display:inline-block;font-family:var(--font-display);font-style:normal;font-size:clamp(24px,4vw,52px);line-height:1;transition:opacity .3s;}
.footer-mail:hover{opacity:.6;}
.footer-grid{display:flex;justify-content:flex-end;gap:clamp(28px,4vw,64px);flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:1px;}
.footer-col h4{font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;}
.footer-col p{margin:0;}
.footer-col p,.footer-col a{font-size:15px;line-height:1.45;}
.footer-col a:hover{text-decoration:underline;text-underline-offset:3px;}
.footer-logo{display:flex;justify-content:center;padding-block:clamp(24px,3.5vw,44px) clamp(16px,2vw,26px);}
.footer-logo img{width:clamp(150px,22vw,300px);height:auto;}
.footer-bottom{display:flex;justify-content:space-between;gap:clamp(14px,2vw,30px);flex-wrap:wrap;
  font-family:var(--font-mono);font-weight:300;font-size:11px;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;}

/* =========================================================================
   mobile menu
   ========================================================================= */
.mobile-menu{position:fixed;inset:0;z-index:120;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:var(--pad);
  transform:translateY(-100%);transition:transform .6s var(--ease);}
.mobile-menu.open{transform:none;}
.mobile-menu a{font-family:var(--font-display);font-size:13vw;line-height:1.04;}
.mobile-menu a:hover{font-style:italic;}
.mm-close{position:absolute;top:24px;right:var(--pad);background:none;border:0;color:var(--paper);font-family:var(--font-mono);font-weight:300;font-size:13px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;}
.mm-foot{position:absolute;left:var(--pad);bottom:34px;font-family:var(--font-mono);font-weight:300;font-size:12px;letter-spacing:.08em;color:var(--ink-3);}

/* =========================================================================
   responsive
   ========================================================================= */
@media (max-width:1000px){
  .nav-brand .nm{font-size:clamp(22px,3vw,30px);}
  .p-meta .intro{grid-column:1/-1;}
  .p-meta .facts{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:28px 48px;}
  .about-hero{grid-template-columns:1fr;}
  .about-portrait{max-width:440px;aspect-ratio:4/5;}
  .cv-block{grid-column:1/-1;}
  .work.w-left,.work.w-right,.work.w-mid{max-width:100%;margin-inline:0;}
  .work.w-right{margin-left:0;}
}
@media (max-width:720px){
  body{font-size:16px;}
  .nav{grid-template-columns:1fr auto;}
  .nav-menu{display:none;}
  .nav-burger{display:inline-flex;}
  .nav-brand .nm{display:none;}
  .index-row{grid-template-columns:54px 1fr;gap:14px;padding-left:0 !important;}
  .index-tags{display:none;}
  .index-thumb{display:block;grid-column:1/-1;margin-top:8px;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2);}
  .index-thumb img{width:100%;height:100%;object-fit:cover;}
  .gallery{grid-template-columns:1fr;}
  .g-fig.span2{grid-column:auto;}
  .p-meta .facts{flex-direction:column;}
  .cv-item{grid-template-columns:1fr;gap:4px;}
  .work-cap{grid-template-columns:auto 1fr;}
  .work-meta{display:none;}
  .work-desc{grid-column:1/-1;}
  .work.w-full .work-media{aspect-ratio:4/3;}
}