/* =========================================================================
   MAC NEMA — V5 « Univers » (oct. 2026)
   Pages Art IA / Photographie / Clips vidéo / À propos, panneaux empilés de
   l'accueil, bobine horizontale des clips, transitions de page.
   S'ajoute à cinema.css (qui reste chargé) : mêmes couleurs, mêmes polices.
   ========================================================================= */

/* ------------------------------------------------------------------ TRANSITIONS DE PAGE */
.cn-tr{position:fixed;inset:0;z-index:600;pointer-events:none;visibility:hidden}
.cn-tr.is-on,.cn-entering .cn-tr{visibility:visible;pointer-events:auto}
.cn-entering .cn-tr{background:var(--bg)}
.cn-tr-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--cols,14),1fr);grid-auto-rows:1fr}
.cn-tr-cells i{background:var(--bg);transform:scale(0);transition:transform .38s cubic-bezier(.7,0,.3,1) var(--d,0s)}
.cn-tr-cells i:nth-child(7n+3){background:#0f160f}.cn-tr-cells i:nth-child(11n+5){background:#151a10}
.cn-tr-cells.is-full i{transform:scale(1.02)}
.cn-tr::before,.cn-tr::after{content:'';position:absolute;left:0;right:0;height:50.5%;background:#000;transition:transform .5s cubic-bezier(.76,0,.24,1)}
.cn-tr::before{top:0;transform:translateY(-101%)}.cn-tr::after{bottom:0;transform:translateY(101%)}
.cn-tr.shut::before,.cn-tr.shut::after{transform:none}
.cn-tr-flash{position:absolute;inset:0;background:#fff;opacity:0}
.cn-tr.flashing .cn-tr-flash{animation:cnFlash .6s ease-out}
.cn-tr-leader{position:absolute;inset:0;display:grid;place-items:center;background:#0b0c0a;opacity:0;transition:opacity .2s}
.cn-tr-leader span{font:700 clamp(90px,22vmin,170px)/1 var(--sans);letter-spacing:-.05em;color:#dfe3da;width:min(46vmin,320px);aspect-ratio:1;display:grid;place-items:center;border:1.4px solid #dfe3da80;border-radius:50%;background:conic-gradient(#dfe3da22 var(--sw,0deg),transparent 0)}
.cn-tr-leader em{position:absolute;bottom:6vh;font:500 11px/1 var(--mono);font-style:normal;letter-spacing:.18em;color:#dfe3da}
.cn-tr.leader .cn-tr-leader{opacity:1}
.cn-tr-wipe{position:absolute;inset:0;background:var(--bg);transform:translateY(101%);transition:transform .55s cubic-bezier(.76,0,.24,1)}
.cn-tr.wipe .cn-tr-wipe{transform:none}
.cn-tr.wipe-out .cn-tr-wipe{transform:translateY(-101%)}

/* ------------------------------------------------------------------ NAVIGATION */
.navigation a[aria-current=page]{color:var(--accent)}
.navigation a[aria-current=page]::after{transform:scaleX(1)}

/* ------------------------------------------------------------------ ACCUEIL : PANNEAUX EMPILÉS */
.cn-worlds{position:relative;z-index:3;background:var(--bg)}
.cn-world{position:sticky;top:0;height:100svh;overflow:hidden}
.cn-world-in{position:absolute;inset:0;display:block;transform:scale(calc(1 - var(--cov,0) * .07));filter:brightness(calc(1 - var(--cov,0) * .55));border-radius:calc(var(--cov,0) * 26px);overflow:hidden;transform-origin:50% 0;will-change:transform}
.cn-world-media{position:absolute;inset:-8% 0;transform:translate3d(0,var(--wpy,0px),0) scale(var(--wsc,1.06))}
.cn-world-media img,.cn-world-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cn-world-media canvas{opacity:0}
.cn-world-media canvas.is-live{opacity:1}
.cn-world-shade{position:absolute;inset:0;background:linear-gradient(90deg,#070807e6 0,#07080780 38%,#07080700 70%),linear-gradient(0deg,#070807d0,transparent 45%)}
.cn-world-hud{position:absolute;inset:calc(var(--head) + 18px) var(--pad) 40px;pointer-events:none;font:500 10px/1.3 var(--mono);letter-spacing:.14em;color:#fff}
.cn-world-hud>i{position:absolute;width:22px;height:22px;border:0 solid #ffffffb0}
.cn-world-hud>i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.cn-world-hud>i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.cn-world-hud>i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.cn-world-hud>i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.cn-world-hud span{position:absolute;display:flex;gap:8px;align-items:center;max-width:min(560px,70%)}
.cn-world-hud .h1{left:34px;top:4px}.cn-world-hud .h2{right:34px;top:4px;color:var(--accent)}
.cn-world-hud em{font-style:normal}
.cn-world-copy{position:absolute;left:var(--pad);bottom:12vh;max-width:min(760px,86vw)}
.cn-world-copy h2{font:800 clamp(64px,13vw,210px)/.82 var(--sans);letter-spacing:-.07em;margin:16px 0 22px;transition:letter-spacing .8s var(--ease)}
.cn-world-in:hover .cn-world-copy h2{letter-spacing:-.05em}
.cn-world-intro{font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:#d6dbd2;max-width:520px;margin:0 0 26px}
.cn-world-go{display:inline-flex;align-items:center;gap:14px;font:500 11px/1 var(--mono);letter-spacing:.2em;border:1px solid #ffffff70;border-radius:50px;padding:15px 20px;transition:background .4s,color .4s,border-color .4s}
.cn-world-go b{font-weight:400;transition:transform .5s var(--ease)}
.cn-world-in:hover .cn-world-go{background:var(--accent);color:#000;border-color:var(--accent)}
.cn-world-in:hover .cn-world-go b{transform:translateX(6px)}
/* photo : diaphragme */
.cn-iris{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cn-iris i{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;transform:rotate(calc(var(--b) * 45deg)) translateY(calc(-50% - var(--iris,0vmax)));transform-origin:50% 50%;transition:transform 1.25s cubic-bezier(.65,0,.25,1)}
.cn-iris i::before{content:'';position:absolute;inset:0;background:#030403;border-bottom:1px solid #2a2f29;transform:skewX(-28deg)}
.cn-iris.is-open i{transform:rotate(calc(var(--b) * 45deg + 30deg)) translateY(-136vmax)}
.w-photo .cn-world-media img{filter:blur(var(--pull,0px)) brightness(var(--bright,1));transition:filter 1.1s var(--ease)}
.cn-world-flash{position:absolute;inset:0;background:#fff;pointer-events:none;opacity:0}
.cn-world-flash.go{animation:cnFlash .7s ease-out}
/* clips : pellicule */
.cn-film{position:absolute;left:0;right:0;bottom:16%;height:clamp(110px,18vh,170px);background:#0b0c0a;transform:rotate(-4deg) scale(1.1);box-shadow:0 30px 80px #000c;overflow:hidden;opacity:.92}
.cn-film::before,.cn-film::after{content:'';position:absolute;left:0;right:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 9px,#0b0c0a 9px 20px),#d9d4c4;z-index:2;opacity:.85}
.cn-film::before{top:6px}.cn-film::after{bottom:6px}
.cn-film-track{position:absolute;top:24px;bottom:24px;left:0;display:flex;gap:8px;animation:cnFilmRun 38s linear infinite;will-change:transform}
.cn-film-track span{flex:none;height:100%;aspect-ratio:16/10;background:center/cover no-repeat;filter:saturate(.85) contrast(1.05)}
.w-clips .cn-world-in:hover .cn-film-track{animation-duration:12s}
.cn-world.w-clips .cn-world-shade{background:linear-gradient(90deg,#070807f0 0,#07080790 40%,#07080720 75%),linear-gradient(0deg,#070807e0,transparent 50%)}
.cn-world.w-aifilm::before,.cn-world.w-aifilm::after,.cn-world.w-clips::before,.cn-world.w-clips::after{content:'';position:absolute;left:0;right:0;height:7vh;background:#000;z-index:2;pointer-events:none}
.cn-world.w-clips::before{top:0}.cn-world.w-clips::after{bottom:0}
@keyframes cnFilmRun{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------------ PAGES UNIVERS : EN-TÊTE */
.cn-whero .cn-hero-copy h1{font-size:clamp(68px,15vw,240px);letter-spacing:-.07em;margin:16px 0 34px}
.js .fx-stage .cn-whero{height:calc(100svh + 100vh)}
.cn-whero .cn-shade{background:linear-gradient(180deg,#070807b0 0,#07080700 30%,#07080700 50%,#070807f0 100%),color-mix(in srgb,#000 30%,transparent)}
.cn-whero:not(.has-image)::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#26352a,#070807 70%)}
.cn-iris--hero{z-index:5}
.cn-exif,.cn-slate{position:absolute;z-index:6;left:var(--pad);top:calc(var(--head) + 26px + var(--lb));display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 16px;font:500 11px/1.3 var(--mono);letter-spacing:.14em;color:#e9ede4;background:#06070699;border:1px solid #ffffff22;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cn-exif b,.cn-slate b{color:#fff;font-weight:500}
.cn-exif [data-exif=af]{color:var(--rec)}
.cn-exif.is-lock [data-exif=af]{color:var(--accent)}
.cn-slate-count{position:fixed;left:50%;top:50%;translate:-50% -50%;font:700 clamp(80px,18vw,220px)/1 var(--sans);letter-spacing:-.06em;color:#fff;opacity:0;pointer-events:none;text-shadow:0 0 60px #000}
.cn-slate.counting .cn-slate-count{opacity:.9}
.cn-film--hero{bottom:auto;top:62%;z-index:1;opacity:.75;transform:rotate(-3deg) scale(1.15) translateX(var(--fx,0px))}
.cn-film--hero .cn-film-track{animation:none}
.w-aifilm.cn-whero .cn-letterbox i,.w-clips.cn-whero .cn-letterbox i{height:calc(var(--lb) + 8vh)}
.w-clips .cn-scanlines,.cn-whero.w-clips .cn-sticky::before{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000026 2px 3px);mix-blend-mode:multiply}

/* ------------------------------------------------------------------ PAGES UNIVERS : CONTENU */
.cn-wwork{padding-top:110px}
.cn-intro{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:4vw;margin-bottom:70px}
.cn-intro .eyebrow{color:var(--accent)}
.cn-intro-text{font:600 clamp(22px,2.6vw,42px)/1.22 var(--sans);letter-spacing:-.03em;margin:0;max-width:30ch;text-wrap:balance}
.cn-filters{display:flex;flex-wrap:wrap;gap:8px 18px}
.cn-filters a{opacity:.55;transition:opacity .3s,color .3s}
.cn-filters a:hover,.cn-filters a.selected{opacity:1;color:var(--accent)}
.cn-cardprompt{font:400 11px/1.5 var(--mono);color:var(--accent);opacity:.75;margin:-4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* IA : re-génération au survol */
.visual .cn-glitch{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0}
.is-ai .visual:hover .cn-frame{animation:cnChroma .5s steps(3) 1}
@keyframes cnChroma{0%{filter:none}30%{filter:drop-shadow(4px 0 0 #ff2a6daa) drop-shadow(-4px 0 0 #2affd5aa)}60%{filter:drop-shadow(-3px 0 0 #ff2a6daa) drop-shadow(3px 0 0 #2affd5aa) contrast(1.2)}100%{filter:none}}
/* Photo : mise au point au survol */
.cn-af-card{position:absolute;left:50%;top:45%;width:84px;height:60px;translate:-50% -50%;border:1px solid #fff;z-index:4;opacity:0;scale:1.6;transition:opacity .3s,scale .5s var(--ease),border-color .3s;pointer-events:none}
.is-photo .visual:hover .cn-af-card{opacity:.9;scale:1;border-color:var(--accent)}
.is-photo .visual picture img{transition:filter .6s var(--ease),scale 1.6s var(--ease)}
.is-photo .visual:not(:hover) picture img{filter:saturate(.92)}
.is-photo .visual.shot::after{content:'';position:absolute;inset:0;background:#fff;z-index:5;animation:cnFlash .55s ease-out forwards;pointer-events:none}
.js .page-photo .project.reveal:not(.visible) .visual picture img{filter:brightness(3) contrast(.4) blur(8px)}
/* Clips : bobine horizontale */
.cn-reel{position:relative}
.cn-reel-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.cn-reel-track{display:flex;gap:3vw;padding:0 var(--pad);width:max-content;transform:translate3d(var(--rx,0px),0,0);will-change:transform}
.cn-reel .project{width:min(58vw,880px);flex:none;translate:none}
.cn-reel .project .visual{aspect-ratio:16/9}
.cn-reel .project .visual picture img{object-position:var(--thumb-x,50%) var(--thumb-y,50%);transform:scale(var(--thumb-zoom,1));transform-origin:var(--thumb-x,50%) var(--thumb-y,50%)}
.cn-reel .project .visual::before,.cn-reel .project .visual::after{content:'';position:absolute;left:0;right:0;height:9%;background:#000;z-index:3;pointer-events:none;transition:height .6s var(--ease)}
.cn-reel .project .visual::before{top:0}.cn-reel .project .visual::after{bottom:0}
.cn-reel .project .visual:hover::before,.cn-reel .project .visual:hover::after{height:0}
.cn-reel .projectinfo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.cn-reel .projectinfo h2{font-size:clamp(26px,2.6vw,46px)}
.cn-reel-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:58px;height:1px;background:#ffffff30;display:flex;align-items:center}
.cn-reel-bar i{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--rp,0))}
.cn-reel-bar span{position:absolute;right:0;top:12px;font:500 10px/1 var(--mono);letter-spacing:.16em;color:#cfd4cb}

/* ------------------------------------------------------------------ AUTRES UNIVERS */
.cn-next-grid{display:grid;gap:2vw}
.cn-next-grid.n-2{grid-template-columns:1fr 1fr}.cn-next-grid.n-3{grid-template-columns:repeat(3,1fr)}.cn-next-grid.n-1{grid-template-columns:1fr}
.cn-next-item{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;isolation:isolate}
.cn-next-media{position:absolute;inset:-10% 0;transform:translate3d(0,var(--np,0px),0)}
.cn-next-media img{width:100%;height:100%;object-fit:cover;display:block;transition:scale 1.4s var(--ease),filter 1s var(--ease);filter:brightness(.62) saturate(.9)}
.cn-next-item:hover .cn-next-media img{scale:1.06;filter:brightness(.85) saturate(1)}
.cn-next-copy{position:absolute;left:24px;right:24px;bottom:22px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 14px;z-index:2}
.cn-next-copy em{grid-column:1/-1;font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.16em;color:#d6dbd2}
.cn-next-copy b{font:800 clamp(32px,4.4vw,72px)/.9 var(--sans);letter-spacing:-.06em}
.cn-next-copy i{font-style:normal;width:52px;height:52px;border-radius:50%;border:1px solid #ffffff80;display:grid;place-items:center;transition:background .4s,color .4s,transform .5s var(--ease)}
.cn-next-item:hover .cn-next-copy i{background:var(--accent);color:#000;transform:rotate(-45deg)}
.cn-next-item.w-photo:hover::after{content:'';position:absolute;inset:0;background:#fff;animation:cnFlash .6s ease-out forwards;pointer-events:none;z-index:3}

/* ------------------------------------------------------------------ ACCUEIL / À PROPOS */
.cn-about-teaser .mac-about-layout p{font-size:clamp(18px,1.7vw,26px)}
.cn-more{display:inline-flex;gap:12px;align-items:center;font:500 11px/1 var(--mono);letter-spacing:.18em;border-bottom:1px solid currentColor;padding-bottom:8px;margin-top:10px;transition:color .3s}
.cn-more:hover{color:var(--accent)}
.cn-ahero{padding:calc(var(--head) + 16vh) var(--pad) 6vh;position:relative;z-index:3}
.cn-ahero h1{font:800 clamp(52px,10vw,170px)/.96 var(--sans);letter-spacing:-.065em;margin:20px 0 0;max-width:14ch;text-wrap:balance}
.page-about .about .mac-about-layout p:first-child{font-size:clamp(19px,1.9vw,30px)}
.cn-foot-nav{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:70px;font:500 11px/1 var(--mono);letter-spacing:.16em}
.cn-foot-nav a{border-bottom:1px solid transparent;padding-bottom:4px;transition:border-color .3s}
.cn-foot-nav a:hover{border-color:currentColor}
.grid-3{display:grid}

/* ------------------------------------------------------------------ RESPONSIVE */
@media(max-width:1100px){.cn-reel .project{width:72vw}.cn-next-grid.n-3{grid-template-columns:1fr 1fr}}
@media(max-width:767px){
  .cn-world-copy{bottom:9vh}
  .cn-world-copy h2{font-size:clamp(56px,19vw,110px)}
  .cn-world-hud .h1{max-width:58%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cn-world-shade{background:linear-gradient(0deg,#070807f0 10%,#07080760 55%,#07080730)}
  .js .fx-stage .cn-whero{height:calc(100svh + 60vh)}
  .cn-intro{grid-template-columns:1fr;gap:14px;margin-bottom:46px}
  .cn-exif,.cn-slate{font-size:9.5px;gap:6px 12px;padding:9px 11px;top:calc(var(--head) + 12px + var(--lb))}
  .cn-reel-pin{position:relative;height:auto;display:block}
  .cn-reel-track{display:grid;grid-template-columns:1fr;gap:64px;width:auto;padding:0;transform:none!important}
  .cn-reel .project{width:auto}
  .cn-reel .projectinfo{grid-template-columns:1fr;gap:0}
  .cn-reel-bar{display:none}
  .cn-next-grid.n-2,.cn-next-grid.n-3{grid-template-columns:1fr}
  .cn-next-item{aspect-ratio:16/10}
  .cn-ahero{padding-top:calc(var(--head) + 10vh)}
}
@media(prefers-reduced-motion:reduce){
  .cn-world{position:relative}.cn-world-in{transform:none!important;filter:none!important}
  .cn-film-track{animation:none}.cn-iris{display:none}
  .cn-reel-pin{position:relative;height:auto}.cn-reel-track{flex-wrap:wrap;width:auto;transform:none!important}
  .cn-tr{display:none}
}

/* --- correctifs V5 --- */
.cn-whero .cn-hero-copy h1{font-size:min(15vw,calc(90vw / (var(--tlen,6) * .62)),240px);overflow-wrap:normal}
.cn-world-copy h2{font-size:min(13vw,calc(84vw / (var(--tlen,6) * .62)),210px);overflow-wrap:normal}
#projects.cn-reel-track{display:flex;grid-template-columns:none;gap:3vw;padding-bottom:0}
.cn-film--hero{top:20%}
@media(max-width:767px){#projects.cn-reel-track{display:grid;grid-template-columns:1fr;gap:64px}.cn-whero .cn-hero-copy h1{font-size:min(18vw,calc(92vw / (var(--tlen,6) * .62)))}.cn-world-copy h2{font-size:min(19vw,calc(90vw / (var(--tlen,6) * .62)))}}
@media(max-width:767px){.cn-world-hud .h2{display:none}.cn-world-hud .h1{max-width:80%}}