/* =========================================================================
   MAC NEMA — « CINÉMA » (oct. 2026)
   Codes du cinéma, de la photo et de l'image générée par IA.
   Remplace site.css + immersion.css + film-label.css (les anciens fichiers
   restent sur le serveur pour un retour arrière, ils ne sont plus chargés).
   ========================================================================= */
@font-face{font-family:Inter;src:url(fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'DM Mono';src:url(fonts/dm-mono-500.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#070807;--bg2:#0e100e;--fg:#f2f3ee;--muted:#959c94;--line:#262a25;
  --accent:#d6ff66;--rec:#ff3b2f;--paper:#e9ece4;--ink:#0c0f0c;
  --sans:Inter,'Helvetica Neue',Arial,sans-serif;--mono:'DM Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --pad:4vw;--head:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:#000}
.eyebrow{font:500 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#aab3a8;margin:0}
.cn-sc{font-style:normal;display:inline-block;border:1px solid currentColor;padding:2px 6px 1px;margin-right:12px;font-size:9px;letter-spacing:.14em;opacity:.8;vertical-align:1px}

/* ------------------------------------------------------------- HEADER */
.header{position:fixed;inset:0 0 auto;z-index:60;height:var(--head);display:flex;align-items:center;gap:22px;padding:0 var(--pad);
  background:linear-gradient(#070807d0,#07080700);transition:transform .6s var(--ease),background .4s,border-color .4s;border-bottom:1px solid transparent}
.header.is-scrolled{background:#070807cc;-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:#ffffff14}
.header.is-hidden{transform:translateY(-100%)}
.brand{display:flex;align-items:center;gap:12px;font:800 13px/1 var(--sans);letter-spacing:.08em;white-space:nowrap;margin-right:auto}
.brand img{width:38px;height:38px;object-fit:contain}
.navigation{display:flex;align-items:center;gap:26px}
.navigation a{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;position:relative;padding:6px 0;transition:color .3s}
.navigation a i{font-style:normal;opacity:.4;margin-right:6px;font-size:9px}
.navigation a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.navigation a:hover::after,.navigation a.selected::after,.navigation a.is-active::after{transform:scaleX(1);transform-origin:left}
.navigation a.selected,.navigation a:hover{color:var(--accent)}
.menu-pill .navigation a{border:1px solid #ffffff40;border-radius:50px;padding:8px 13px}
.menu-pill .navigation a::after{display:none}
.menu-editorial .navigation a{font:800 13px/1 var(--sans);letter-spacing:.02em}
.mac-header-socials{display:flex;gap:8px}
.mac-header-socials a{width:30px;height:30px;display:grid;place-items:center;border:1px solid #ffffff38;border-radius:50%;transition:border-color .3s,background .3s}
.mac-header-socials a:hover{border-color:var(--accent);background:#d6ff6614}
.mac-brand-icon{width:14px;height:14px;filter:invert(1);opacity:.9}
.languages{display:flex;gap:7px;font:500 11px/1 var(--mono);letter-spacing:.12em}
.languages a{opacity:.45;transition:opacity .3s}
.languages a:hover{opacity:1}
.languages a[aria-current]{opacity:1;color:var(--accent)}
.hamburger{display:none;width:42px;height:42px;border:1px solid #ffffff40;border-radius:50%;background:transparent;position:relative}
.hamburger span{position:absolute;left:12px;right:12px;height:1.5px;background:currentColor;transition:transform .45s var(--ease)}
.hamburger span:first-child{top:16px}.hamburger span:last-child{top:24px}
.hamburger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.hamburger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* ------------------------------------------------------------- LOADER (amorce de film) */
.cn-loader{position:fixed;inset:0;z-index:200;background:#0b0c0a;display:grid;place-items:center;color:#dfe3da;transition:opacity .5s ease,visibility .5s}
.cn-loader.is-out{opacity:0;visibility:hidden}
.cn-leader{position:relative;width:min(46vmin,340px);aspect-ratio:1}
.cn-leader-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#dfe3da;stroke-width:1.4;opacity:.75}
.cn-leader-sweep{position:absolute;inset:8%;border-radius:50%;background:conic-gradient(from 0deg,#dfe3da30 var(--sweep,0deg),transparent 0)}
.cn-leader-num{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(90px,22vmin,170px)/1 var(--sans);letter-spacing:-.05em}
.cn-loader-meta{position:absolute;left:var(--pad);right:var(--pad);bottom:5vh;display:flex;justify-content:space-between;gap:20px;font:500 11px/1 var(--mono);letter-spacing:.18em;opacity:.7}
.cn-loader{background:var(--bg)}
.cn-lg{position:relative;width:min(48vmin,260px);aspect-ratio:1;-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;--p:0;transition:transform .7s cubic-bezier(.22,1,.36,1)}
.cn-lg-base{position:absolute;inset:0;background:#ffffff0d}
.cn-lg-digits{position:absolute;inset:-2%;font:500 clamp(9px,1.5vmin,12px)/1.05 var(--mono);letter-spacing:.04em;color:var(--accent);opacity:.55;white-space:pre;overflow:hidden;word-break:break-all}
.cn-lg-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p) * 100%);background:#f2f3ee}
.cn-lg-scan{position:absolute;left:0;right:0;bottom:calc(var(--p) * 100%);height:2px;background:var(--accent);box-shadow:0 0 18px var(--accent)}
.cn-loader.is-done .cn-lg{transform:scale(1.06)}
.cn-loader.is-out{opacity:0;visibility:hidden;transition:opacity .9s ease .15s,visibility 1s}
.cn-loader.is-out .cn-lg{transform:scale(18);transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.cn-loader.is-out .cn-lg-count,.cn-loader.is-out .cn-loader-meta{opacity:0;transition:opacity .3s}
.cn-loader.is-done .cn-lg-digits,.cn-loader.is-done .cn-lg-scan{opacity:0;transition:opacity .3s}
.cn-lg-count{position:absolute;left:50%;bottom:13vh;translate:-50% 0;display:flex;align-items:flex-start;gap:4px;font:800 clamp(40px,7vw,84px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#f2f3ee}
.cn-lg-count em{font:500 12px/1 var(--mono);font-style:normal;letter-spacing:.14em;color:var(--accent);margin-top:8px}

/* ------------------------------------------------------------- HUD (caméra) */
.cn-hud{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;align-items:center;gap:22px;padding:0 var(--pad) 16px;font:500 10px/1 var(--mono);letter-spacing:.16em;color:#e8ebe4;mix-blend-mode:difference;pointer-events:none;opacity:0;transition:opacity .6s}
.fx-hud .cn-hud{display:flex}
.cn-hud.is-on{opacity:.85}
.cn-hud-l,.cn-hud-r{display:flex;gap:18px;white-space:nowrap}
.cn-hud-c{flex:1;height:1px;background:#ffffff40;position:relative}
.cn-playhead{position:absolute;left:0;top:-3px;width:1px;height:7px;background:#fff;transform:translateX(calc(var(--cn-progress,0) * var(--cn-track,0px)))}
.cn-rec{display:inline-flex;align-items:center;gap:7px}
.cn-rec i,.cn-dot{width:7px;height:7px;border-radius:50%;background:var(--rec);display:inline-block;animation:cnBlink 1.2s steps(2) infinite}
.cn-lens b,.cn-hud b{font-weight:500}

/* ------------------------------------------------------------- HERO */
.cn-hero{position:relative;height:var(--hero-height,100svh);background:radial-gradient(ellipse at 70% 32%,#26352a 0,#121a14 38%,#070807 76%)}
.js .fx-stage .cn-hero{height:calc(var(--hero-height,100svh) + 115vh)}
.cn-sticky{position:sticky;top:0;height:var(--hero-height,100svh);overflow:hidden;isolation:isolate;--lb:0px}
.cn-cam{position:absolute;inset:0;transform:scale(var(--dolly,1)) translate3d(calc(var(--pan-x,0px) + var(--wpan,0px)),var(--pan-y,0px),0);transform-origin:50% 55%;will-change:transform;filter:blur(calc(var(--defocus,0px) + var(--pull,0px)))}
.hero-background{position:absolute;inset:0;display:block;overflow:hidden}
.hero-background img{width:100%;height:100%;display:block;object-fit:cover;object-position:var(--hero-x,50%) var(--hero-y,50%);transform:scale(var(--hero-zoom,1));transform-origin:var(--hero-x,50%) var(--hero-y,50%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.cn-gen{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .9s ease}
.cn-gen.is-live{opacity:1;transition:none}
.cn-gen.is-done{opacity:0}
.cn-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#070807a0 0,#07080700 26%,#07080700 52%,#070807e8 100%),color-mix(in srgb,#000 var(--hero-overlay,35%),transparent)}
.cn-hero:not(.has-image) .cn-shade{background:none}
.cn-hero:not(.has-image)::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 85px,#ffffff08 86px 87px);pointer-events:none}
.cn-letterbox i{position:absolute;left:0;right:0;height:var(--lb);background:#000;z-index:5;pointer-events:none}
.cn-letterbox i:first-child{top:0}.cn-letterbox i:last-child{bottom:0}
.cn-vf{position:absolute;inset:calc(var(--lb) + var(--head) + 14px) 2vw calc(var(--lb) + 46px);pointer-events:none;z-index:4;opacity:0;transition:opacity 1s .2s}
.fx-hud .cn-vf.is-on{opacity:1}
.cn-vf>i{position:absolute;width:26px;height:26px;border:0 solid #ffffffb0}
.cn-vf>i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.cn-vf>i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}
.cn-vf>i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.cn-vf>i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.cn-af{position:absolute;left:var(--af-x,50%);top:var(--af-y,42%);width:96px;height:66px;translate:-50% -50%;border:1px solid #fff;opacity:.7;scale:1.5;transition:scale .5s var(--ease),border-color .3s,left .5s var(--ease),top .5s var(--ease),opacity .4s}
.cn-af::before,.cn-af::after{content:'';position:absolute;left:50%;top:50%;background:#fff;translate:-50% -50%}
.cn-af::before{width:9px;height:1px}.cn-af::after{width:1px;height:9px}
.cn-af.is-lock{scale:1;border-color:var(--accent);opacity:.95}
.cn-af.is-lock::before,.cn-af.is-lock::after{background:var(--accent)}
.cn-prompt{position:absolute;z-index:6;left:var(--pad);top:calc(var(--head) + 26px + var(--lb));width:min(560px,92vw);padding:14px 16px 13px;font:400 12px/1.6 var(--mono);letter-spacing:.02em;color:#e9ede4;background:#06070699;border:1px solid #ffffff22;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transform:translateY(-8px);transition:opacity .6s,transform .6s var(--ease)}
.fx-aigen .cn-prompt.is-on{opacity:1;transform:none}
.fx-aigen .cn-prompt.is-on.is-done{opacity:0;transform:translateY(-6px);transition:opacity 1.2s 1.8s,transform 1.2s 1.8s}
.cn-prompt-line{display:flex;gap:9px;min-height:19px}
.cn-prompt-line em{font-style:normal;color:var(--accent)}
.cn-caret{display:inline-block;width:7px;height:14px;background:var(--accent);align-self:center;animation:cnBlink .9s steps(2) infinite}
.cn-prompt-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px;font-size:10px;letter-spacing:.14em;color:#9aa399}
.cn-prompt-meta b{color:#fff;font-weight:500}
#cnState{color:var(--accent)}
.cn-prompt-bar{height:2px;background:#ffffff1c;margin-top:10px;overflow:hidden}
.cn-prompt-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--gen,0))}
.cn-hero-copy{position:absolute;z-index:6;left:var(--pad);right:var(--pad);bottom:calc(var(--lb) + 7vh);transform:translate3d(0,var(--copy-y,0px),0);opacity:var(--copy-o,1)}
.cn-hero h1{font:800 clamp(54px,10.4vw,172px)/.86 var(--sans);letter-spacing:-.062em;margin:22px 0 48px;max-width:1500px;overflow-wrap:anywhere;text-wrap:balance}
.heroend,.sectiontop{display:flex;justify-content:space-between;gap:16px;font:500 11px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:#b8c0b6}
.cn-scroll{display:inline-flex;align-items:center;gap:10px}
.cn-scroll::after{content:'';width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:cnCue 2s var(--ease) infinite}
.cn-sticky::after{content:'';position:absolute;inset:0;z-index:10;background:var(--bg);opacity:var(--cut,0);pointer-events:none}
.cn-flash{position:absolute;inset:0;z-index:9;background:#fff;opacity:var(--flash,0);pointer-events:none;mix-blend-mode:normal}
.cn-flash-fx{position:fixed;inset:0;z-index:300;background:#fff;pointer-events:none;animation:cnFlash .55s ease-out forwards}

/* ------------------------------------------------------------- PELLICULE */
.js .fx-stage .cn-hero + *{margin-top:-45vh}
.cn-work,.exhibitions,.about{position:relative;z-index:3;background:var(--bg)}
.exhibitions{background:#0d0f0c}
.cn-strip{position:relative;z-index:3;box-shadow:0 -30px 60px #0009;height:78px;background:#121410;overflow:hidden;border-block:1px solid #000;display:flex;align-items:center}
.cn-strip::before,.cn-strip::after{content:'';position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 10px,#070807 10px 24px);opacity:.95}
.cn-strip::before{top:6px}.cn-strip::after{bottom:6px}
.cn-strip-track{display:flex;white-space:nowrap;will-change:transform}
.cn-strip-run{display:flex;align-items:center;gap:30px;padding-right:30px;font:500 13px/1 var(--mono);letter-spacing:.2em;color:#cdd3c9}
.cn-strip-run b{color:var(--accent);font-weight:400}

/* ------------------------------------------------------------- SECTIONS */
.section{padding:120px var(--pad);position:relative}
.sectiontop{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:34px}
.cn-work{padding-top:90px}
.project{padding:34px 0 86px;border-bottom:1px solid var(--line)}
.project[hidden]{display:none}
.visual{position:relative;aspect-ratio:16/9;overflow:hidden;background:#121512;isolation:isolate}
.project:nth-child(2n) .visual{background:#0f1712}
.cn-frame{position:absolute;inset:0;transform:translate3d(var(--tx,0%),0,0) scale(var(--ts,1));will-change:transform}
.visual picture,.visual .video-placeholder{position:absolute;inset:0;display:block;overflow:hidden}
.visual picture img{width:100%;height:100%;display:block;object-fit:cover;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%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
.visual picture{transition:scale 1.6s var(--ease)}
.visual:hover picture{scale:1.035}
.visualfallback{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(36px,7vw,120px)/1 var(--sans);letter-spacing:-.06em;text-align:center;padding:20px}
.video-placeholder{cursor:pointer;background:#0b0d0b}
.video-placeholder .mac-film-preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:1}
.mac-video-hint{position:absolute;left:50%;top:50%;z-index:3;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;pointer-events:none;text-shadow:0 1px 10px #0009;transition:opacity .3s,scale .5s var(--ease)}
.mac-video-hint svg{width:58px;height:58px;padding:18px;border:1px solid #ffffffa0;border-radius:50%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.mac-video-hint em{font:500 10px/1 var(--mono);font-style:normal;letter-spacing:.24em}
.video-placeholder:hover .mac-video-hint{scale:1.08}
/* HUD de chaque visuel */
.cn-vhud{position:absolute;inset:16px;z-index:4;pointer-events:none;font:500 10px/1 var(--mono);letter-spacing:.16em;color:#fff;text-shadow:0 1px 6px #0008;opacity:.0;transition:opacity .5s,inset .6s var(--ease)}
.fx-hud .cn-vhud{opacity:.62}
.fx-hud .visual:hover .cn-vhud{opacity:1;inset:24px}
.cn-vhud .c{position:absolute;width:18px;height:18px;border:0 solid #fff}
.cn-vhud .tl{left:0;top:0;border-width:1px 0 0 1px}.cn-vhud .tr{right:0;top:0;border-width:1px 1px 0 0}
.cn-vhud .bl{left:0;bottom:0;border-width:0 0 1px 1px}.cn-vhud .br{right:0;bottom:0;border-width:0 1px 1px 0}
.cn-vhud span{position:absolute;display:flex;align-items:center;gap:7px;white-space:nowrap}
.cn-vhud .t1{left:28px;top:4px}.cn-vhud .t2{right:28px;top:4px}.cn-vhud .t3{left:28px;bottom:4px}.cn-vhud .t4{right:28px;bottom:4px;color:var(--accent);opacity:0;transition:opacity .4s}
.visual.is-generating .t4{opacity:1}
.visual .cn-gen{z-index:2}
.projectinfo{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-top:26px}
.projectinfo h2{font:750 clamp(34px,5.2vw,82px)/.98 var(--sans);letter-spacing:-.055em;margin:12px 0}
.projectinfo>p{max-width:470px;color:var(--muted);line-height:1.8;margin:6px 0 0}
.gallerytoggle{display:inline-flex;align-items:center;gap:16px;border:1px solid #ffffff40;background:none;font:500 11px/1 var(--mono);letter-spacing:.16em;padding:15px 20px;margin-top:26px;transition:border-color .3s,color .3s,background .3s}
.gallerytoggle i{font-style:normal;opacity:.5}
.gallerytoggle:hover,.gallerytoggle[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.gallerypanel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .9s var(--ease),opacity .6s}
.gallerypanel>*{min-height:0;overflow:hidden}
.gallerypanel.open{grid-template-rows:1fr;opacity:1}
.gallerypanel.open>*{overflow:visible}
.gallerygrid{column-gap:14px;padding-top:26px}
.gallerygrid.cols-2{columns:2}.gallerygrid.cols-3{columns:3}.gallerygrid.cols-4{columns:4}
.cn-shot{margin:0 0 14px;break-inside:avoid;position:relative;overflow:hidden;background:#111}
.cn-shot img{display:block;width:100%;height:auto;cursor:zoom-in;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:filter 1.4s var(--ease),transform 1.4s var(--ease),opacity .8s}
.cn-shot figcaption{position:absolute;left:8px;bottom:7px;font:500 9px/1 var(--mono);letter-spacing:.16em;color:#fff;background:#0008;padding:4px 6px;opacity:.75;pointer-events:none}
.js .fx-develop .cn-shot:not(.is-shot) img{filter:brightness(3.2) contrast(.35) saturate(0) blur(6px);transform:scale(1.06);opacity:.4}

/* ------------------------------------------------------------- EXPOSITIONS */
.exhibitions{background:#0d0f0c}
.expo{display:grid;grid-template-columns:110px 1fr 1fr 40px;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding:26px 0;position:relative;overflow:hidden}
.expo::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ff7a3018 30%,#ff3b2f22 50%,#d6ff6614 70%,transparent);transform:translateX(-101%);transition:transform 1.1s var(--ease);pointer-events:none}
.expo:hover::before{transform:translateX(101%)}
.expo h3{font:750 clamp(26px,3.6vw,52px)/1 var(--sans);letter-spacing:-.045em;margin:0}
.expo span{color:#aab2a8}
.cn-date{font:500 11px/1.5 var(--mono);letter-spacing:.14em}
.expo.is-upcoming .cn-date{color:var(--accent)}
.expo a{width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff38;border-radius:50%;transition:background .3s,color .3s}
.expo a:hover{background:var(--accent);color:#000}

/* ------------------------------------------------------------- À PROPOS (chambre noire) */
.mac-about-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:5vw;align-items:start}
.mac-about-layout:not(:has(figure)){grid-template-columns:1fr}
.mac-about-layout figure{margin:0;position:sticky;top:calc(var(--head) + 30px)}
.cn-develop-img{position:relative;overflow:hidden;background:#200605}
.cn-develop-img img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:filter 3.2s cubic-bezier(.45,0,.2,1),transform 3.2s var(--ease)}
.cn-develop-img::after{content:'';position:absolute;inset:0;background:#ff1d0d;mix-blend-mode:multiply;opacity:0;transition:opacity 3.4s ease;pointer-events:none}
.js .fx-develop .cn-develop:not(.is-developed) .cn-develop-img img{filter:invert(1) grayscale(1) contrast(.55) brightness(.75);transform:scale(1.04)}
.js .fx-develop .cn-develop:not(.is-developed) .cn-develop-img::after{opacity:.55}
.mac-about-layout figcaption{display:flex;justify-content:space-between;gap:14px;font:500 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--muted);padding:12px 0;text-transform:uppercase}
.cn-develop-state b{color:var(--rec);font-weight:500}
.cn-develop.is-developed .cn-develop-state b{color:var(--accent)}
.mac-about-layout h2{font:800 clamp(36px,6vw,96px)/.95 var(--sans);letter-spacing:-.055em;margin:0 0 30px}
.mac-about-layout p{font-size:clamp(18px,1.85vw,28px);line-height:1.42;letter-spacing:-.02em;margin:0 0 28px}
.mac-about-layout .mac-about-extra{font-size:clamp(15px,1.4vw,20px);line-height:1.7;color:var(--muted);letter-spacing:0}

/* ------------------------------------------------------------- CONTACT */
.contact{background:var(--paper);color:var(--ink);padding:120px var(--pad) 46px;position:relative;z-index:2}
.contact .eyebrow{color:#5a6458}
.contact h2{font:800 clamp(58px,11vw,180px)/.84 var(--sans);letter-spacing:-.07em;margin:24px 0 44px}
.email{display:inline-block;font:600 clamp(20px,3vw,42px)/1.2 var(--sans);letter-spacing:-.03em;border-bottom:2px solid;transition:color .3s}
.email:hover{color:#4b6a00}
.contact footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:130px;font:500 11px/1 var(--mono);letter-spacing:.14em;flex-wrap:wrap}
.contact footer div{display:flex;gap:20px;flex-wrap:wrap}
.contact footer a:hover{text-decoration:underline}
.cn-end{opacity:.55}

/* ------------------------------------------------------------- APPARITIONS (réglages admin) */
.js .reveal{opacity:0;transform:translateY(46px);transition:opacity var(--anim-projects-duration,.9s) var(--ease) var(--anim-projects-delay,0s),transform var(--anim-projects-duration,.9s) var(--ease) var(--anim-projects-delay,0s)}
.js .reveal[data-anim=fade]{transform:none}
.js .reveal[data-anim=slide]{transform:translateX(-50px)}
.js .reveal[data-anim=zoom]{transform:scale(.94)}
.js .reveal[data-anim=none]{opacity:1;transform:none;transition:none}
.js .reveal.visible{opacity:1;transform:none}
.js .cn-in{opacity:0;transform:translateY(30px);transition:opacity var(--anim-sections-duration,.9s) var(--ease) var(--anim-sections-delay,0s),transform var(--anim-sections-duration,.9s) var(--ease) var(--anim-sections-delay,0s)}
.js [data-anim-sections=fade] .cn-in{transform:none}
.js [data-anim-sections=slide] .cn-in{transform:translateX(-40px)}
.js [data-anim-sections=zoom] .cn-in{transform:scale(.97)}
.js .cn-in.visible{opacity:1;transform:none}
.cn-hero h1{animation:none}
.js .cn-hero-copy .eyebrow,.js .cn-hero-copy .heroend{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .cn-hero.is-live .cn-hero-copy .eyebrow,.js .cn-hero.is-live .cn-hero-copy .heroend{opacity:1;transform:none}
.js .cn-hero.is-live .cn-hero-copy .heroend{transition-delay:.35s}
.js body:not(.fx-decode) .cn-hero h1,.js [data-anim-text=none] .cn-hero h1{opacity:0;transform:translateY(24px);transition:opacity var(--anim-hero-duration,.9s) var(--ease) var(--anim-hero-delay,0s),transform var(--anim-hero-duration,.9s) var(--ease) var(--anim-hero-delay,0s)}
.js body:not(.fx-decode) .cn-hero.is-live h1,.js [data-anim-text=none] .cn-hero.is-live h1{opacity:1;transform:none}
.js .fx-decode.fx-stage .cn-hero h1:not([data-decoded]){opacity:0}

/* ------------------------------------------------------------- VISIBILITÉ ORDINATEUR / MOBILE (réglage admin) */
@media(min-width:768px){.project.hide-desktop{display:none!important}}
@media(max-width:767px){.project.hide-mobile{display:none!important}}

/* ------------------------------------------------------------- CURSEUR VISEUR */
.cn-cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
.cn-cursor.on{opacity:1}
.cn-cursor .box{position:absolute;left:-17px;top:-17px;width:34px;height:34px;transition:all .45s var(--ease)}
.cn-cursor .box i{position:absolute;width:9px;height:9px;border:0 solid #fff}
.cn-cursor .box i:nth-child(1){left:0;top:0;border-width:1.5px 0 0 1.5px}.cn-cursor .box i:nth-child(2){right:0;top:0;border-width:1.5px 1.5px 0 0}
.cn-cursor .box i:nth-child(3){left:0;bottom:0;border-width:0 0 1.5px 1.5px}.cn-cursor .box i:nth-child(4){right:0;bottom:0;border-width:0 1.5px 1.5px 0}
.cn-cursor .dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:#fff}
.cn-cursor .lbl{position:absolute;left:0;top:44px;translate:-50% 0;font:500 10px/1 var(--mono);letter-spacing:.18em;color:#fff;white-space:nowrap;opacity:0;transition:opacity .3s,top .45s var(--ease)}
.cn-cursor{mix-blend-mode:difference}
.cn-cursor.is-hover .box{left:-11px;top:-11px;width:22px;height:22px}
.cn-cursor.is-label .box{left:-42px;top:-30px;width:84px;height:60px}
.cn-cursor.is-label .lbl{opacity:1;top:40px}
.cn-cursor.is-down .box{scale:.8}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [role=button],.has-cursor .visual,.has-cursor .cn-shot img{cursor:none}
.cn-ring{position:fixed;z-index:390;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;pointer-events:none;background:radial-gradient(#fff,#fff0 70%);animation:cnRing .6s ease-out forwards}

/* ------------------------------------------------------------- GRAIN + VIGNETTE */
.cn-grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;background:var(--cn-noise) repeat;opacity:.065;animation:cnGrain 1s steps(6) infinite}
.cn-vignette{position:fixed;inset:0;z-index:49;pointer-events:none;background:radial-gradient(ellipse at center,transparent 58%,#00000075 100%)}

/* ------------------------------------------------------------- VISIONNEUSES */
.mac-protection-toast{position:fixed;bottom:58px;left:50%;transform:translate(-50%,16px);z-index:9999;max-width:calc(100vw - 32px);background:#141614f2;color:#fff;border:1px solid #ffffff30;padding:12px 20px;border-radius:100px;font:500 12px/1.3 var(--mono);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .22s,transform .22s;text-align:center}
.mac-protection-toast.show{opacity:1;transform:translate(-50%,0)}
.cn-lb-open,.mac-film-open{overflow:hidden}
.cn-lightbox{position:fixed;inset:0;z-index:1000;background:#050605f7;display:flex;align-items:center;justify-content:center;padding:70px 6vw 64px}
.cn-lightbox img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;animation:cnDev 1s var(--ease)}
.cn-lightbox::before,.cn-lightbox::after{content:'';position:absolute;left:0;right:0;height:50%;background:#000;z-index:2;pointer-events:none;animation:cnShutTop .55s var(--ease-io) forwards}
.cn-lightbox::before{top:0}.cn-lightbox::after{bottom:0;animation-name:cnShutBot}
.cn-lb-btn{position:absolute;z-index:3;border:1px solid #ffffff4a;background:#121412cc;color:#fff;width:48px;height:48px;border-radius:50%;font-size:20px;display:grid;place-items:center;transition:border-color .3s,color .3s}
.cn-lb-btn:hover{border-color:var(--accent);color:var(--accent)}
.cn-lb-close{right:20px;top:16px}.cn-lb-prev{left:18px;top:50%;translate:0 -50%}.cn-lb-next{right:18px;top:50%;translate:0 -50%}
.cn-lb-meta{position:absolute;left:24px;right:90px;top:30px;z-index:3;display:flex;gap:20px;font:500 10px/1 var(--mono);letter-spacing:.18em;color:#cfd4cb}
.cn-lb-meta b{color:var(--accent);font-weight:500}
.mac-film-modal{position:fixed;inset:0;z-index:1000;background:#050505f8;display:flex;align-items:center;justify-content:center;padding:65px 3vw 35px}
.mac-film-modal::before,.mac-film-modal::after{content:'';position:absolute;left:0;right:0;height:50%;background:#000;z-index:2;pointer-events:none;animation:cnShutTop .6s var(--ease-io) forwards}
.mac-film-modal::before{top:0}.mac-film-modal::after{bottom:0;animation-name:cnShutBot}
.mac-film-shell{width:min(1280px,100%);max-height:calc(100dvh - 110px);aspect-ratio:16/9;display:flex}
.mac-film-shell video,.mac-film-shell iframe{width:100%;height:100%;border:0;background:#000;object-fit:contain}
.mac-film-close{position:absolute;z-index:3;top:14px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid #ffffff4a;background:#121412cc;color:#fff;font-size:22px}

/* ------------------------------------------------------------- KEYFRAMES */
@keyframes cnBlink{50%{opacity:0}}
@keyframes cnGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@keyframes cnCue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes cnFlash{0%{opacity:.95}100%{opacity:0}}
@keyframes cnRing{to{width:160px;height:160px;margin:-80px 0 0 -80px;opacity:0}}
@keyframes cnShutTop{0%{transform:none}100%{transform:translateY(-101%)}}
@keyframes cnShutBot{0%{transform:none}100%{transform:translateY(101%)}}
@keyframes cnDev{0%{filter:brightness(4) contrast(.4) blur(8px);opacity:.3}100%{filter:none;opacity:1}}

/* ------------------------------------------------------------- RESPONSIVE */
@media(max-width:1100px){
  .hamburger{display:block}
  .brand{margin-right:auto}
  .navigation{position:fixed;left:0;right:0;top:var(--head);height:calc(100svh - var(--head));flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:30px var(--pad);background:#070807f7;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .4s,visibility .4s,transform .5s var(--ease)}
  .navigation.open{opacity:1;visibility:visible;transform:none}
  .navigation a{font:800 clamp(34px,8vw,64px)/1.1 var(--sans);letter-spacing:-.04em;text-transform:none}
  .navigation a i{font:500 11px/1 var(--mono);vertical-align:top;margin-right:12px}
  .navigation a::after{display:none}
  .menu-pill .navigation a{border:0;padding:6px 0}
  .mac-header-socials{display:none}
}
@media(max-width:767px){
  :root{--pad:5vw;--head:64px}
  .brand span{font-size:12px}
  .brand img{width:32px;height:32px}
  .header{gap:14px}
  .js .fx-stage .cn-hero{height:calc(var(--hero-height,100svh) + 70vh)}
  .js .fx-stage .cn-hero + *{margin-top:-30vh}
  .hero-background img{object-position:var(--hero-mobile-x,50%) var(--hero-mobile-y,50%);transform:scale(var(--hero-mobile-zoom,1));transform-origin:var(--hero-mobile-x,50%) var(--hero-mobile-y,50%)}
  .cn-hero h1{font-size:clamp(46px,14.5vw,96px);margin:16px 0 34px}
  .cn-prompt{font-size:10.5px;top:calc(var(--head) + 14px + var(--lb));padding:11px 12px}
  .cn-prompt-meta{font-size:9px;gap:4px 12px}
  .cn-vf{inset:calc(var(--lb) + var(--head) + 10px) 3vw calc(var(--lb) + 40px)}
  .cn-af{width:70px;height:48px}
  .heroend{font-size:9px}
  .cn-strip{height:62px}
  .cn-strip-run{font-size:11px}
  .section{padding:80px var(--pad)}
  .visual{aspect-ratio:4/5}
  .visual picture img{object-position:var(--thumb-mx,50%) var(--thumb-my,50%);transform:scale(var(--thumb-mzoom,1));transform-origin:var(--thumb-mx,50%) var(--thumb-my,50%)}
  .cn-vhud{inset:12px}
  .cn-vhud .t3{display:none}
  .projectinfo{display:block}
  .gallerygrid.cols-3,.gallerygrid.cols-4{columns:2}
  .expo{grid-template-columns:76px 1fr 40px;gap:12px}
  .expo>span:nth-of-type(2){grid-column:2;grid-row:2;font-size:13px}
  .expo>a,.expo>span:last-child{grid-column:3;grid-row:1/3}
  .mac-about-layout{grid-template-columns:1fr}
  .mac-about-layout figure{position:relative;top:0}
  .contact{padding:90px var(--pad) 90px}
  .contact footer{margin-top:90px}
  .cn-hud{padding-bottom:12px;gap:12px}
  .cn-hud-r .cn-lens,.cn-hud-r #cnScene{display:none}
  .cn-lb-meta{right:80px}
}
@media(max-width:520px){.gallerygrid.cols-2,.gallerygrid.cols-3,.gallerygrid.cols-4{columns:1}}

/* ------------------------------------------------------------- MOUVEMENTS RÉDUITS */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .cn-in,.js .cn-hero-copy .eyebrow,.js .cn-hero-copy .heroend,.js .cn-hero h1{opacity:1!important;transform:none!important;transition:none!important}
  .js .fx-develop .cn-shot:not(.is-shot) img,.js .fx-develop .cn-develop:not(.is-developed) .cn-develop-img img{filter:none!important;transform:none!important;opacity:1!important}
  .js .fx-develop .cn-develop:not(.is-developed) .cn-develop-img::after{opacity:0!important}
  .cn-grain,.cn-loader,.cn-gen,.cn-prompt{display:none!important}
  .cn-lightbox::before,.cn-lightbox::after,.mac-film-modal::before,.mac-film-modal::after{display:none}
  .cn-rec i,.cn-dot,.cn-caret,.cn-scroll::after{animation:none}
}

/* =========================================================================
   V2 (20 oct. 2026) — projets en 3 colonnes, parallaxe renforcée,
   boutiques (Artmajeur / Artboxy), vidéo du header animée au scroll
   ========================================================================= */
/* --- grille de projets --- */
#projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 2.4vw;align-items:start;padding-bottom:9vh}
.project{padding:0;border:0;translate:0 var(--col-y,0px);will-change:translate}
.project:nth-child(3n+2){margin-top:11vh}
.project .visual{aspect-ratio:4/5}
.visual picture img{object-position:var(--thumb-mx,50%) var(--thumb-my,50%);transform:scale(var(--thumb-mzoom,1));transform-origin:var(--thumb-mx,50%) var(--thumb-my,50%)}
.cn-frame{transform:translate3d(var(--tx,0%),var(--ty,0%),0) scale(var(--ts,1))}
.cn-vhud{inset:12px}.fx-hud .visual:hover .cn-vhud{inset:16px}
.cn-vhud .t3{display:none}
.cn-vhud span{font-size:9px}
.mac-video-hint svg{width:50px;height:50px;padding:15px}
.projectinfo{display:block;margin-top:20px}
.projectinfo .eyebrow{font-size:10px}
.projectinfo h2{font:750 clamp(24px,2.1vw,38px)/1.02 var(--sans);letter-spacing:-.04em;margin:10px 0 12px}
.projectinfo>p{max-width:none;font-size:14px;line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.gallerytoggle{margin-top:18px;padding:12px 16px;font-size:10px;gap:12px}
.gallerypanel[hidden]{display:none}
.js .reveal{transform:translateY(60px)}

/* --- menu sans numéros --- */
.navigation a i{display:none}

/* --- boutiques --- */
.cn-shop{position:relative;z-index:3;background:var(--bg)}
.cn-shop-intro{max-width:620px;color:var(--muted);font-size:clamp(16px,1.4vw,20px);line-height:1.6;margin:0 0 34px}
.cn-shop-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:24px;padding:34px 0;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.cn-shop-row:first-child{border-top:1px solid var(--line)}
.cn-shop-row::before{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease);z-index:-1}
.cn-shop-row:hover::before{transform:scaleY(1)}
.cn-shop-row:hover{color:#0a0c0a}
.cn-shop-row:hover .cn-shop-text{color:#1d2419}
.cn-shop-name{font:800 clamp(38px,6vw,104px)/.9 var(--sans);letter-spacing:-.06em;transition:transform .7s var(--ease)}
.cn-shop-row:hover .cn-shop-name{transform:translateX(18px)}
.cn-shop-text{color:var(--muted);font-size:clamp(14px,1.2vw,18px);transition:color .4s}
.cn-shop-go{font:500 11px/1 var(--mono);letter-spacing:.16em;white-space:nowrap;border:1px solid currentColor;border-radius:40px;padding:12px 16px}
.cn-shop-row{isolation:isolate}

/* --- parallaxe des sections --- */
.sectiontop{translate:0 var(--sp,0px)}
.mac-about-layout figure .cn-develop-img img{translate:0 var(--ip,0px);scale:1.12}
.contact h2{translate:0 var(--hp,0px)}

/* --- vidéo du header --- */
.cn-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-x,50%) var(--hero-y,50%);transform:scale(var(--hero-zoom,1));transform-origin:var(--hero-x,50%) var(--hero-y,50%);opacity:0;transition:opacity .8s ease;pointer-events:none}
.cn-hero-video.is-ready{opacity:1}

@media(max-width:1100px){#projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 4vw}.project:nth-child(3n+2){margin-top:0}.project:nth-child(2n){margin-top:9vh}}
@media(max-width:767px){
  #projects{grid-template-columns:1fr;gap:64px}
  .project:nth-child(2n){margin-top:0}
  .projectinfo h2{font-size:clamp(28px,8vw,40px)}
  .cn-shop-row{grid-template-columns:1fr;gap:10px;padding:26px 0}
  .cn-shop-go{justify-self:start}
  .cn-hero-video{object-position:var(--hero-mobile-x,50%) var(--hero-mobile-y,50%);transform:scale(var(--hero-mobile-zoom,1));transform-origin:var(--hero-mobile-x,50%) var(--hero-mobile-y,50%)}
}
@media(prefers-reduced-motion:reduce){.project,.sectiontop,.contact h2,.mac-about-layout figure .cn-develop-img img{translate:none!important}}

/* --- séquence d'images du header (animation au scroll) --- */
.cn-hero-seq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease;pointer-events:none}
.cn-hero-seq.is-ready{opacity:1}

/* --- portfolio PDF (section contact) --- */
.cn-portfolio{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;margin-top:64px;padding:30px 34px;border:1.5px solid var(--ink);color:var(--ink);position:relative;isolation:isolate;overflow:hidden;max-width:1100px;transition:color .4s}
.cn-portfolio::before{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:-1}
.cn-portfolio:hover{color:var(--paper)}
.cn-portfolio:hover::before{transform:scaleX(1)}
.cn-pf-label{font:800 clamp(34px,5vw,74px)/.9 var(--sans);letter-spacing:-.06em}
.cn-pf-text{font-size:clamp(14px,1.2vw,18px);opacity:.75}
.cn-pf-meta{font:500 11px/1 var(--mono);letter-spacing:.16em;white-space:nowrap;border:1px solid currentColor;border-radius:40px;padding:12px 16px}
@media(max-width:767px){.cn-portfolio{grid-template-columns:1fr;gap:12px;padding:24px;margin-top:48px}.cn-pf-meta{justify-self:start}}
.contact h2{margin-bottom:56px}
/* lecteur Instagram (format vertical) */
.mac-film-shell.is-vertical{width:auto;height:calc(100dvh - 110px);max-width:100%;aspect-ratio:9/16.5}
.mac-film-shell.is-vertical iframe{background:#fff;border-radius:4px}