:root{
  --paper:#ecebe4; --ink:#111; --dim:#6d6c66; --faint:#b9b7af;
  --night:#0d0f0f; --white:#f4f3ee;
  --rule:.6px solid currentColor;
  --mono:"Space Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Inter Tight",system-ui,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.en{color:var(--dim)}
img{display:block;max-width:100%}
::selection{background:#111;color:var(--paper)}

/* ============ barre commune ============ */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 28px 8px;font-size:12px;letter-spacing:.01em}
.bar::after{content:"";position:absolute;left:28px;right:28px;bottom:0;border-bottom:var(--rule);opacity:.7}
.bar nav{display:flex;gap:18px;flex-wrap:wrap}
.bar nav a{position:relative;opacity:.75;transition:opacity .2s}
.bar nav a:hover,.bar nav a.on{opacity:1}
.bar nav a.on::before{content:"/";margin-right:2px}
.bar nav a.on::after{content:"//";margin-left:2px}
.bar .home{font-weight:500}
.paper .bar{background:linear-gradient(var(--paper) 70%,transparent)}

/* ============ curseur réticule (toutes les pages) ============ */
.reticle{position:fixed;left:0;top:0;width:0;height:0;z-index:90;pointer-events:none;mix-blend-mode:difference;color:#fff}
.reticle::before,.reticle::after{content:"";position:absolute;background:currentColor}
.reticle::before{width:22px;height:.8px;left:-11px;top:0}
.reticle::after{height:22px;width:.8px;top:-11px;left:0}
.reticle span{position:absolute;left:12px;top:10px;font:9px var(--mono);white-space:nowrap}
@media (hover:none){.reticle{display:none}}

/* ============ COUVERTURE ============ */
body.cover{background:var(--night);color:var(--white);overflow:hidden;cursor:crosshair}
#stage,#overlay{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#overlay{pointer-events:none}
.cover .bar{color:var(--white)}
.cover .bar::after{opacity:.35}
.lieux{display:flex;gap:6px;flex-wrap:wrap;text-transform:uppercase;font-size:11px;letter-spacing:.06em}
.lieux button{all:unset;cursor:pointer;opacity:.6;padding:2px 0}
.lieux button.on{opacity:1;font-weight:600}
.lieux button[disabled]{opacity:.28;cursor:default}
.lieux i{opacity:.35;font-style:normal}
.c-name{position:fixed;left:24px;bottom:58px;z-index:40;font-weight:200;font-size:clamp(44px,8.2vw,128px);letter-spacing:-.05em;line-height:.88;text-shadow:0 0 40px rgba(0,0,0,.35);pointer-events:none}
.c-name b{display:block;font-weight:200}
.c-links{position:fixed;right:28px;bottom:58px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-size:clamp(28px,3.4vw,52px);font-weight:400;letter-spacing:-.03em;line-height:1}
.c-links a{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:10px 16px 10px;text-shadow:none;transition:background .3s,color .3s}
.c-links a:hover{background:var(--white);color:#0b0b0b}
.c-links a{position:relative;padding-bottom:2px}
.c-links a::after{content:"";position:absolute;left:16px;right:16px;bottom:6px;height:.8px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s}
.c-links a:hover::after{transform:scaleX(1);transform-origin:left}
.c-links small{display:block;font-size:12px;font-weight:400;opacity:.85;text-align:right;letter-spacing:0;margin-top:6px}
.c-foot{position:fixed;left:28px;right:28px;bottom:16px;z-index:40;display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);border-top:.6px solid rgba(244,243,238,.35);padding-top:6px;gap:12px}
.c-foot .live{display:flex;align-items:center;gap:6px}
.c-foot .live::before{content:"";width:6px;height:6px;border-radius:50%;background:#e2483d;animation:blink 1.6s infinite}
.c-foot .live.demo::before{background:#d9a441}
@keyframes blink{50%{opacity:.25}}
.c-clock{font:300 22px "Inter Tight";letter-spacing:.02em}
.c-status{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;text-align:center;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase;transition:opacity .8s}
.c-status .t{font:200 clamp(28px,4vw,56px) "Inter Tight";letter-spacing:-.03em;text-transform:none;margin-bottom:10px}
.c-status.gone{opacity:0;pointer-events:none}
.c-hint{position:fixed;left:50%;bottom:62px;transform:translateX(-50%);z-index:40;font:10px var(--mono);opacity:.55;letter-spacing:.08em;text-transform:uppercase}

/* étiquettes de phrases (HTML pour le texte, SVG pour les cadres) */
#labels{position:fixed;inset:0;pointer-events:none;z-index:30}
.lbl{position:absolute;max-width:260px;background:#0b0b0b;color:#f4f3ee;padding:5px 8px 6px;font-size:12.5px;line-height:1.25;transform:translate(-2px,calc(-100% - 6px));transition:opacity .6s;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.lbl small{display:block;color:#9b9a93;font-size:10.5px;margin-top:3px}
.lbl.out{opacity:0}
.lbl::after{content:"";position:absolute;left:0;bottom:-6px;width:.8px;height:6px;background:#f4f3ee}

/* ============ PAGES PAPIER (portfolio, à propos) ============ */
body.paper{cursor:crosshair}
.wrap{padding:84px 28px 80px;max-width:1500px;margin:0 auto}
.big-title{font-size:clamp(72px,14vw,220px);font-weight:500;letter-spacing:-.06em;line-height:.84;border-bottom:.8px solid var(--ink);padding-bottom:14px}
.subhead{display:flex;justify-content:space-between;font-size:12px;padding:6px 0 0}
h2.sec{font-size:clamp(30px,3.4vw,48px);font-weight:500;letter-spacing:-.045em;line-height:1;border-bottom:var(--rule);padding:6px 0 6px;margin:56px 0 14px;display:flex;justify-content:space-between;align-items:flex-end}
h2.sec span{font-size:.5em;font-weight:400;color:var(--dim);letter-spacing:-.02em}
.foot{display:flex;justify-content:space-between;gap:12px;font-size:11px;border-top:var(--rule);padding:6px 0;margin-top:80px;flex-wrap:wrap}

/* apparition au défilement */
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* filtres */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 4px;font-size:12px}
.filters button{all:unset;cursor:pointer;border:.6px solid var(--ink);padding:4px 10px;border-radius:20px;transition:background .2s,color .2s}
.filters button.on,.filters button:hover{background:var(--ink);color:var(--paper)}

/* grille des œuvres */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px 22px;margin-top:22px}
.card{display:block;position:relative}
.card .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:#222}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.02);transition:filter .7s,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph img{filter:none;transform:scale(1.07)}
.card .meta{display:grid;grid-template-columns:34px 1fr auto;gap:6px;align-items:baseline;border-bottom:var(--rule);padding:8px 0 6px}
.card .no{font-weight:200;font-size:22px;letter-spacing:-.04em}
.card .ti{font-weight:600;font-size:15px;letter-spacing:-.01em}
.card .yr{font-size:12px;color:var(--dim)}
.card .ro{font-size:11px;color:var(--dim);padding-top:5px}
.card.hide{display:none}
.badge{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;border:.6px solid currentColor;padding:2px 6px;vertical-align:2px;margin-left:6px}

/* cadres « détection » sur les images */
.scan{position:absolute;inset:0;pointer-events:none}
.scan .box{position:absolute;border:.8px solid rgba(255,255,255,.9);opacity:0;transition:opacity .35s}
.scan .box span{position:absolute;left:-1px;top:-15px;font:9px var(--mono);color:#fff;background:rgba(0,0,0,.55);padding:1px 4px;white-space:nowrap}
.card:hover .scan .box,.shot:hover .scan .box,.shot.in .scan .box{opacity:1}
.scan .line{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.65);box-shadow:0 0 12px rgba(255,255,255,.7);top:-2%;opacity:0}
.card:hover .scan .line,.shot.in .scan .line{animation:sweep 1.6s ease-out 1}
@keyframes sweep{0%{top:-2%;opacity:1}100%{top:102%;opacity:0}}

/* page œuvre */
.work{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:34px;padding-top:84px}
.work aside{position:sticky;top:84px;align-self:start}
.w-no{font-size:96px;font-weight:200;letter-spacing:-.06em;line-height:.8}
.w-status{display:inline-block;margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border:.8px solid var(--ink);padding:4px 8px}
.w-status span{font-weight:400;color:var(--dim)}
.w-title{font-size:clamp(32px,3.2vw,46px);font-weight:500;letter-spacing:-.045em;line-height:.98;border-bottom:var(--rule);padding:12px 0 8px}
.w-yr{font-size:14px;margin-top:8px}
.w-part{font-size:12px;color:var(--dim);margin-top:3px}
.w-role{font-size:12px;font-weight:600;margin-top:8px}
.w-role .en{font-weight:400}
.w-text{font-size:13px;line-height:1.45;margin-top:14px}
.w-text.en{margin-top:6px}
.w-quote{font-style:italic;font-size:13px;border-left:.8px solid var(--ink);padding-left:10px;margin-top:16px}
.creds{margin-top:22px}
.cr{display:grid;grid-template-columns:140px 1fr;gap:8px;font-size:11.5px;line-height:1.3;border-top:.5px solid var(--faint);padding:5px 0}
.cr:last-child{border-bottom:.5px solid var(--faint)}
.pc{font-size:10.5px;color:var(--dim);margin-top:8px}
.shots{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.shot{position:relative;overflow:hidden;background:#222;cursor:zoom-in}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.04)}
.shot.s-full{grid-column:span 6;aspect-ratio:16/9}
.shot.s-half{grid-column:span 3;aspect-ratio:4/3}
.shot.s-third{grid-column:span 2;aspect-ratio:3/4}
.shot.s-tall{grid-column:span 3;aspect-ratio:3/4}
.w-nav{display:flex;justify-content:space-between;margin-top:60px;border-top:var(--rule);padding-top:10px;font-size:13px;gap:20px}
.w-nav a{display:flex;flex-direction:column;gap:2px;max-width:45%}
.w-nav a b{font-size:clamp(20px,2.4vw,34px);font-weight:500;letter-spacing:-.04em}
.w-nav a:last-child{text-align:right;align-items:flex-end}
.w-nav small{color:var(--dim)}

/* visionneuse */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(13,15,15,.94);display:none;align-items:center;justify-content:center;color:var(--white)}
.lightbox.on{display:flex}
.lightbox img{max-width:88vw;max-height:84vh;object-fit:contain}
.lightbox .lb-ui{position:absolute;left:24px;right:24px;bottom:18px;display:flex;justify-content:space-between;font:11px var(--mono)}
.lightbox button{all:unset;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);font-size:40px;font-weight:200;padding:20px;opacity:.7}
.lightbox button:hover{opacity:1}
.lightbox .prev{left:6px}.lightbox .next{right:6px}
.lightbox .close{top:30px;right:14px;transform:none;font-size:28px}

/* ============ À PROPOS / CV ANIMÉ ============ */
.ab-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;padding-top:84px;min-height:92vh;align-items:end}
.ab-portrait{position:relative;aspect-ratio:3/4;overflow:hidden;background:#888}
.ab-portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.ab-portrait svg{position:absolute;inset:0;width:100%;height:100%}
.ab-portrait svg line{stroke:rgba(255,255,255,.75);stroke-width:.6;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 2.4s ease forwards}
.ab-portrait svg circle{fill:#fff;opacity:0;animation:pop .4s ease forwards}
.ab-portrait svg text{font:3.4px var(--mono);fill:rgba(255,255,255,.85);opacity:0;animation:pop .4s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.ab-name{font-size:clamp(64px,10vw,160px);font-weight:500;letter-spacing:-.06em;line-height:.84}
.ab-name .ln{display:block;overflow:hidden}
.ab-name .ln span{display:inline-block;animation:up 1s cubic-bezier(.2,.7,.2,1) both}
.ab-name .ln:nth-child(2) span{animation-delay:.15s}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
.ab-role{display:flex;justify-content:space-between;border-top:.8px solid var(--ink);margin-top:12px;padding-top:6px;font-size:13px}
.ab-prat{margin-top:34px;font-size:clamp(16px,1.6vw,22px);font-weight:300;line-height:1.35}
.ab-prat .typed::after{content:"▍";animation:blink 1s infinite;margin-left:2px}
.ab-profile{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.ab-profile p{font-size:clamp(15px,1.25vw,18px);line-height:1.45;font-weight:300;margin-bottom:12px;text-align:justify;hyphens:auto}
.tl{position:relative}
.tl-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:20px;border-top:.5px solid var(--faint);padding:14px 0;align-items:baseline}
.tl-row .y{font:13px var(--mono)}
.tl-row b{font-weight:600;font-style:italic;font-size:17px;letter-spacing:-.01em}
.tl-row .r{font-size:14px}
.tl-row .r .en{display:block}
.tl-row .track{grid-column:1/-1;height:2px;background:#d9d7cf;display:block}
.tl-row .bar-y{display:block;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.tl-row.in .bar-y{transform:scaleX(1)}
.ab-works{columns:3 220px;column-gap:24px;font-size:15px;line-height:1.7}
.ab-works div{break-inside:avoid;display:flex;justify-content:space-between;gap:10px;border-bottom:.5px solid var(--faint)}
.ab-works b{font-weight:600}
.ab-works span{color:var(--dim);font-size:13px}
.dl{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.dl a{border:.8px solid var(--ink);padding:10px 16px;font-size:13px;transition:background .2s,color .2s}
.dl a:hover{background:var(--ink);color:var(--paper)}
.ab-contact{font-size:clamp(22px,3vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1.3}
.ab-contact a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:.8px}

@media (max-width:820px){
  .bar{padding:12px 16px 8px}.bar::after{left:16px;right:16px}
  .wrap{padding:76px 16px 60px}
  .work{grid-template-columns:1fr;padding-top:76px}.work aside{position:static}
  .shot.s-half,.shot.s-tall{grid-column:span 6}.shot.s-third{grid-column:span 3}
  .ab-hero{grid-template-columns:1fr}.ab-profile{grid-template-columns:1fr}
  .tl-row{grid-template-columns:1fr}
  .c-name{left:16px;bottom:120px}.c-links{right:16px;bottom:60px}.c-foot{left:16px;right:16px}
  .lieux{flex-wrap:nowrap;overflow-x:auto;max-width:62vw;scrollbar-width:none}.lieux button{white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .ab-name .ln span{transform:none}
  .ab-portrait svg line{stroke-dashoffset:0}.ab-portrait svg circle,.ab-portrait svg text{opacity:1}
}

/* accessibilité / référencement */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.c-name .tight{font-size:0}
h1.c-name{font-weight:200;margin:0}

/* extrait de bio en haut de la couverture */
.c-bio{max-width:min(760px,62vw);font-size:12px;line-height:1.4;letter-spacing:.01em;opacity:.9;transition:opacity .6s;margin:0}
.c-bio.out{opacity:0}
@media (max-width:820px){.c-bio{font-size:11px;max-width:60vw}}

/* lisibilité : dégradés sombres haut et bas de la couverture */
#stage{z-index:0}#overlay{z-index:1}
.shade{position:fixed;inset:0;z-index:2;pointer-events:none;background:linear-gradient(rgba(0,0,0,.55) 0,rgba(0,0,0,0) 150px),linear-gradient(0deg,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 42%)}
.c-bio,.c-name,.c-foot{text-shadow:0 1px 12px rgba(0,0,0,.45)}
@media (max-width:820px){
  .cover .bar{align-items:flex-start}
  .cover .bar nav{flex-direction:column;align-items:flex-end;gap:6px}
  .c-name{bottom:150px;font-size:clamp(40px,13vw,64px)}
  .c-links{left:16px;right:16px;bottom:58px;flex-direction:row;justify-content:space-between;gap:10px;font-size:clamp(18px,5.6vw,26px)}
  .c-links a{flex:1;text-align:center;padding:10px 8px}
  .c-links small{display:none}
  .c-links a::after{display:none}
  .c-hint{bottom:auto;top:96px}
  #coord{display:none}
  .c-foot{font-size:9px}
  .c-clock{font-size:16px}
  .lbl{max-width:200px;font-size:11.5px}
}
body.cover{touch-action:none;overscroll-behavior:none}
.c-hint{opacity:.85;text-shadow:0 1px 8px rgba(0,0,0,.7)}
@media (max-width:820px){
  .paper .bar{gap:10px}
  .paper .bar nav{gap:14px;flex-wrap:nowrap}
  .paper .bar nav a[href$="../"],.paper .bar nav a[href="../../"]{display:none}
  .paper .bar .home{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}