/* Polices (fichiers dans le dossier polices/) */
@font-face{font-family:"Schibsted Grotesk";src:url(polices/sg.ttf) format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(polices/sgi.ttf) format("truetype");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(polices/eb.ttf) format("truetype");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(polices/ebi.ttf) format("truetype");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/pm4.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(polices/pm5.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url(polices/uf.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Monoton";src:url(polices/mo.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Rye";src:url(polices/ry.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Silkscreen";src:url(polices/sk.ttf) format("truetype");font-display:swap}
@font-face{font-family:"Shrikhand";src:url(polices/sh.ttf) format("truetype");font-display:swap}
/* Layout : une colonne centrée de 980px, navigation fine en haut, cadres d'image au format cinéma, grande typo. */
:root{
  --bg:#ffffff;
  --paper:#f5f5f6;
  --ink:#141416;
  --muted:#6c6c74;
  --line:#e4e4e8;
  --frame:#d4d4d9;
  --frame-2:#c2c2c8;
  --accent:#141416;
  --blue:#1f6fe0;
  --floor:#f5f5f6;
  --display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --serif:"EB Garamond","Apple Garamond","ITC Garamond",Garamond,Georgia,serif;
  --wrap:980px;
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:var(--wrap);margin:0 auto}
a{color:var(--accent);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
::selection{background:var(--accent);color:#fff}

/* ---------- Curseur ---------- */
/* Curseur négatif (mix-blend difference). Pour limiter la latence : position mise à jour à chaque événement souris,
   sans transition, et le rond grossit par transform: scale (pas de recalcul de mise en page). */
.cur{position:fixed;left:0;top:0;z-index:600;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .2s;will-change:transform}
.cur[data-on]{opacity:1}
.cur-dot{position:absolute;left:-43px;top:-43px;width:86px;height:86px;border-radius:50%;background:#fff;display:grid;place-items:center;
  transform:scale(.1163);transition:transform .3s cubic-bezier(.2,.8,.2,1);will-change:transform}
.cur.big .cur-dot{transform:scale(1)}
.cur-label{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .2s}
.cur.big .cur-label{opacity:1}
@media (hover:none),(pointer:coarse){.cur{display:none}}
@media (hover:hover) and (pointer:fine){body.has-cur, body.has-cur a, body.has-cur button, body.has-cur [data-cursor]{cursor:none}}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;height:56px}
.nav-links{display:flex;gap:clamp(14px,3vw,32px)}
.nav-links a{color:var(--muted);font:500 13px/1 var(--body);position:relative;padding-block:6px}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.nav-links a.active::after{transform:scaleX(1)}
.logo{background:none;border:0;padding:0;color:var(--ink);font:800 17px/1 var(--display);letter-spacing:-.04em}
.nav-right{display:flex;align-items:center;gap:clamp(14px,3vw,28px)}
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang button{appearance:none;border:0;background:none;border-radius:999px;padding:5px 8px;font:500 10px/1 var(--mono);letter-spacing:.08em;color:var(--muted)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.lang button:hover{color:var(--ink)}.lang button[aria-pressed="true"]:hover{color:var(--bg)}
.sv-bar-r{display:flex;align-items:center;gap:16px}
@media (max-width:420px){.nav-right{gap:10px}.nav-links{gap:12px}.nav-links a{font-size:12px}.lang button{padding:5px 6px}}

/* ---------- Hero ---------- */
.hero{padding-block:72px 40px;display:grid;gap:28px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 22px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@keyframes blink{50%{opacity:.15}}
.name{font:800 clamp(56px,13vw,148px)/.86 var(--display);letter-spacing:-.055em;margin:0 0 0 -.065em;text-wrap:balance}
.name .w{display:inline-block;white-space:nowrap}
.name .l{display:inline-block;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 45ms + 150ms)}
.name .l:hover{color:var(--blue);transform:translateY(-6px);transition:transform .2s,color .2s}
@keyframes rise{from{transform:translateY(.6em) rotate(4deg);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:none}}
.lede{max-width:none;font-size:17px;line-height:1.55;color:var(--muted);margin:0;text-wrap:balance}
.lede b{color:var(--ink);font-weight:600}
.lede .swap{display:inline-block;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;font-family:var(--display);font-weight:600}

/* ---------- Cadres gris (visuels) ---------- */
.frame{position:relative;background:linear-gradient(135deg,var(--frame),var(--frame-2));border-radius:3px;overflow:hidden;max-width:100%}
.frame::after{content:attr(data-tag);position:absolute;left:10px;bottom:8px;font:500 10px/1 var(--mono);letter-spacing:.1em;color:rgba(255,255,255,.75);text-transform:uppercase}
.scope{aspect-ratio:2.39/1}
.wide{aspect-ratio:16/9}

.sq{aspect-ratio:1/1}
.por{aspect-ratio:2/3}
.por img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.reel{position:relative}
.reel .frame{display:grid;place-items:center}
.reel .frame::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);pointer-events:none}
.btn{appearance:none;border:1px solid var(--ink);border-radius:999px;color:var(--bg);background:var(--ink);font:500 13px/1 var(--body);
  padding:12px 20px;display:inline-flex;align-items:center;gap:8px;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.play-big{width:72px;height:72px;padding:0;justify-content:center;border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.9);color:#16161a}
.play-big:hover{background:transparent;color:#fff}

/* ---------- Sections ---------- */
section{padding-block:72px;border-top:1px solid var(--line)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:36px}
.sec-head h2{font:800 clamp(36px,6vw,64px)/.95 var(--display);letter-spacing:-.045em;margin:0}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.sec-head p{margin:0;max-width:40ch;color:var(--muted)}

/* Films */
.films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 28px}
.film{display:grid;gap:14px;color:inherit}

.film .frame{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.film:hover .frame{transform:scale(.985)}
.film-info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:baseline}
.film-title{font:600 22px/1.15 var(--display);letter-spacing:-.02em;margin:0}
.film-year{font:500 12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.film-sub{grid-column:1/-1;color:var(--muted);margin:0;max-width:60ch}
.specs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.spec{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border:1px solid var(--line);border-radius:3px;color:var(--muted)}
@media (max-width:720px){.films{grid-template-columns:minmax(0,1fr)}}

/* À propos */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:stretch}
.about-pic{margin:0;display:flex;min-height:100%}
.about-pic .por{aspect-ratio:auto;flex:1;min-height:420px}
.about-txt{display:grid;gap:30px;align-content:start}
.about-h{margin:0 0 -6px;font-weight:500}
.big-quote{position:relative;font:500 clamp(26px,3.4vw,38px)/1.18 var(--display);letter-spacing:-.03em;margin:0;text-wrap:balance}
.big-quote em{font-style:italic;color:var(--blue)}
.big-quote .q{position:absolute;left:-.55em;top:-.05em;color:var(--line);font-weight:800}
.about-p{margin:0;max-width:56ch;font-size:17px;line-height:1.65;color:var(--muted);text-wrap:pretty}
.about-cv .eyebrow{margin-bottom:16px}
.cv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px}
.cv li{display:grid;gap:5px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}
.cv time{font:700 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:6px}
.cv b{font-weight:600;font-size:15px}
.cv span{color:var(--muted);font-size:14px;line-height:1.45}
@media (max-width:860px){.about{grid-template-columns:minmax(0,1fr);gap:32px}.about-pic{order:2}.about-pic .por{aspect-ratio:4/5;min-height:0;max-width:420px}.big-quote .q{display:none}}
@media (max-width:520px){.cv{grid-template-columns:1fr;gap:20px}}

/* Siv — vitrine façon Apple Store */
.civ{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:40px max(20px,4vw) 8px;overflow:hidden}
.civ-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.civ-word{font:italic 400 clamp(72px,13vw,140px)/.8 var(--serif);letter-spacing:-.03em;margin:0}
.civ-word a{color:inherit}
.civ-word{display:flex;align-items:flex-start}
.civ-logo{height:.7em;width:auto;display:block}
.sv-bar-logo{height:20px;width:auto;display:block}
.sv-logo .sv-face{width:auto;display:block}
.sv-logo .sv-face-main{height:.62em}
.sv-logo .sv-face-oasis{height:.66em}
.sv-logo .sv-face-daft{height:.7em}
.civ-cta{display:flex;justify-content:flex-start;margin-top:24px}
.civ-word sup{font:500 11px var(--mono);letter-spacing:.1em;vertical-align:top;margin-left:6px;color:var(--muted)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.seg button{appearance:none;border:0;border-radius:999px;font:500 12px var(--body);padding:8px 16px;color:var(--muted);background:transparent}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.civ-intro{max-width:58ch;color:var(--muted);margin:18px 0 0}
.shelf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:40px;padding-bottom:48px}
.prod{display:grid;gap:10px;text-align:center;color:inherit}
.prod .frame{border-radius:6px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.shelf-img{aspect-ratio:1;background:#fff;border-radius:6px;overflow:hidden;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.shelf-img img{width:100%;height:100%;object-fit:contain;display:block}
.shelf-img.photo img{object-fit:cover}
.prod:hover .shelf-img{transform:translateY(-6px)}
.prod h3{margin:0;font:600 14px/1.2 var(--display)}
.prod p{margin:0;font:12px var(--body);color:var(--muted)}
.prod .tag{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
@media (max-width:760px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
.marquee{overflow:hidden;border-top:1px solid var(--line);margin:0 calc(-1 * max(20px,4vw));padding:14px 0;white-space:nowrap;
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marquee div{display:inline-block;animation:mq 90s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}

/* Contact */
.contact{display:grid;gap:26px}
.contact>.eyebrow{margin-bottom:-14px}
.mail{font:800 clamp(24px,5.6vw,64px)/1.05 var(--display);letter-spacing:-.045em;color:var(--ink);overflow-wrap:anywhere;user-select:all}
.mail .ml{display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1),color .35s}
.mail .ml:hover{color:var(--blue);transform:translateY(-.1em);transition:transform .15s,color .15s}
.contact-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.toast{font:500 11px var(--mono);color:var(--muted)}
.toast a{color:var(--ink)}
footer .credit a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
footer .credit a:hover{color:var(--ink)}
.mf{display:grid;gap:22px;max-width:760px;margin-top:28px;padding:32px;background:var(--floor);border:1px solid var(--line);border-radius:16px}
.mf-head{display:grid;gap:6px}
.mf-head h3{margin:0;font:700 26px/1.15 var(--display);letter-spacing:-.025em;color:var(--ink)}
.mf-head p{margin:0;color:var(--muted);font-size:15px}
.mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mf-f{display:grid;gap:8px}
.mf-f>span{font:600 14px/1.2 var(--body);color:var(--ink)}
.mf input,.mf textarea{font:400 16px/1.5 var(--body);color:var(--ink);background:var(--bg);border:1px solid var(--frame);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.mf input::placeholder,.mf textarea::placeholder{color:#9a9aa2}
.mf textarea{resize:vertical;min-height:140px}
.mf input:hover,.mf textarea:hover{border-color:var(--frame-2)}
.mf input:focus,.mf textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,20,22,.08)}
.mf-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{appearance:none;border:1px solid var(--frame);background:var(--bg);color:var(--ink);border-radius:999px;padding:10px 16px;font:500 14px/1 var(--body);transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.mf-foot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-top:4px}
.mf .btn{padding:14px 24px;font-size:15px}
.mf .btn:disabled{opacity:.5}
.mf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:600px){.mf{padding:22px 18px}.mf-grid{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:22px 40px;font-size:12px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}


/* ---------- Animations au scroll (transform seul : la page reste lisible sans) ---------- */
@supports (animation-timeline: view()){
  .film .frame,.about .frame,.reel .frame{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .sec-head h2{animation:slide linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
}
@keyframes lift{from{transform:translateY(60px) scale(.94);clip-path:inset(8% 8% 8% 8%)}to{transform:none;clip-path:inset(0)}}
@keyframes slide{from{transform:translateX(-40px);letter-spacing:.02em}to{transform:none}}
.frame .shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-100%);pointer-events:none}
.film:hover .shine,.prod:hover .shine{transform:translateX(100%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}

/* ---------- Mini-jeu ---------- */
.egg{appearance:none;background:none;border:0;padding:4px;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font:500 11px var(--mono)}
.egg svg{display:block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.egg:hover svg{transform:rotate(-12deg) scale(1.25)}
.egg:hover{color:var(--ink)}
.game-bg{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  animation:fade .3s both}
@keyframes fade{from{opacity:0}}
.game{width:min(560px,100%);background:var(--bg);border:1px solid var(--ink);border-radius:10px;padding:16px;display:grid;gap:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.18);animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.game-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.game-top b{font:800 18px/1 var(--display);letter-spacing:-.02em;text-transform:none}
.game canvas{width:100%;aspect-ratio:4/3;display:block;border-radius:4px;background:var(--paper);touch-action:none}
.game-hud{display:flex;justify-content:space-between;gap:12px;font:500 12px var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.pad{display:none;grid-template-columns:1fr 1.4fr 1fr;gap:8px}
.pad button{appearance:none;border:1px solid var(--line);background:var(--paper);border-radius:8px;height:52px;font:600 16px var(--display);color:var(--ink);user-select:none;-webkit-user-select:none}
.pad button:active{background:var(--ink);color:var(--bg)}
@media (pointer:coarse){.pad{display:grid}}
.game-help{margin:0;font-size:12px;color:var(--muted)}


/* =================== Page Siv — même langage que le portfolio, les photos au centre =================== */
.sv-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;height:56px;display:flex;justify-content:space-between;align-items:center;
  background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.sv-bar a{color:var(--muted);font:500 13px var(--body)}.sv-bar a:hover{color:var(--ink)}
.sv-bar span{font:italic 400 22px/1 var(--serif)}
.sv-intro{padding-block:88px 72px;display:grid;justify-items:center;text-align:center;gap:22px}
.sv-logo{font:italic 400 clamp(110px,22vw,220px)/1 var(--serif);margin:0;letter-spacing:-.03em;height:1.1em;display:grid;place-items:center;user-select:none}
.sv-logo .f-fraktur{font-family:"UnifrakturMaguntia",var(--serif);font-style:normal}
.sv-logo .f-western{font-family:"Rye",var(--serif);font-style:normal;font-size:.7em}
.sv-logo .f-neon{font-family:"Monoton",cursive;font-style:normal;font-size:.62em}
.sv-logo .f-fat{font-family:"Shrikhand",var(--serif);font-style:normal;font-size:.8em}
.sv-logo .f-pixel{font-family:"Silkscreen",monospace;font-style:normal;font-size:.6em}
.sv-sub{font:500 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.sv-text{max-width:52ch;margin:8px 0 0;font:400 clamp(19px,2.2vw,23px)/1.5 var(--serif);text-wrap:pretty}

.sv-sec{padding-block:72px;border-top:1px solid var(--line)}
.sv-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:32px}
.sv-head h2{font:italic 400 clamp(40px,6vw,64px)/1 var(--serif);margin:0;letter-spacing:-.02em}
.sv-head p{margin:0;max-width:44ch;color:var(--muted)}
.sv-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.ph{position:relative;display:block;padding:0;border:0;background:var(--paper);overflow:hidden;border-radius:2px;max-width:100%;cursor:zoom-in}
.ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.ph:hover img{transform:scale(1.035)}
.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c6{grid-column:span 6}
.fill{aspect-ratio:auto;min-height:220px}
.r34{aspect-ratio:3/4}.r43{aspect-ratio:4/3}.r1{aspect-ratio:1}.r32{aspect-ratio:3/2}.r23{aspect-ratio:2/3}
@media (max-width:700px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.c2,.c3{grid-column:span 1}.c4,.c6{grid-column:span 2}}
@supports (animation-timeline: view()){.ph{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 60%}}

.sv-merch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 16px}
@media (max-width:700px){.sv-merch{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pc{appearance:none;border:0;background:none;padding:0;color:inherit;text-align:left;display:grid;gap:10px;font:inherit}
.pc-img{position:relative;aspect-ratio:900/782;background:#fff}
.pc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s ease}
.pc-img img+img{opacity:0}
.pc:hover .pc-img img+img,.pc[aria-pressed="true"] .pc-img img+img{opacity:1}
.pc:hover .pc-img img:first-child,.pc[aria-pressed="true"] .pc-img img:first-child{opacity:0}
.pc-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
.pc h3{margin:0;font:600 15px/1.2 var(--display)}
.pc small{font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.sv-end{padding-block:80px 40px;border-top:1px solid var(--line);display:grid;justify-items:center;gap:20px;text-align:center}
.sv-guig{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:calc((min(100vw,1040px) - 64px) / 30);gap:12px}
.sv-guig .gx{overflow:hidden;border-radius:3px;padding:0;border:0;background:none;display:block;width:100%;height:100%;cursor:pointer}
.sv-guig .g2 img,.sv-guig .g3 img,.sv-guig .g6 img,.sv-guig .g5 img{object-position:50% 25%}
.sv-guig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sv-guig .gx:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){.sv-guig img{transition:none}.sv-guig .gx:hover img{transform:none}}
.sv-guig .g1{grid-column:1 / 5;grid-row:1 / 9}
.sv-guig .g2{grid-column:1 / 5;grid-row:9 / 22}
.sv-guig .g3{grid-column:5 / 10;grid-row:1 / 14}
.sv-guig .g4{grid-column:5 / 10;grid-row:14 / 22}
.sv-guig .g6{grid-column:10 / 13;grid-row:1 / 12}
.sv-guig .g5{grid-column:10 / 13;grid-row:12 / 22}
@media (max-width:700px){.sv-guig{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:10px;grid-auto-flow:dense}.sv-guig .gx{grid-column:auto!important;grid-row:auto!important;aspect-ratio:3/4}.sv-guig .g3,.sv-guig .g4{grid-column:span 2!important;aspect-ratio:4/5}}
.sv-poster{margin:0 auto;max-width:560px;display:grid;gap:14px}
.sv-poster img{width:100%;height:auto;display:block;border-radius:3px}
.sv-poster figcaption{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center}
.sv-poster figcaption a{color:var(--muted)}.sv-poster figcaption a:hover{color:var(--ink)}
.sv-end p{margin:0;font:italic 400 clamp(26px,4vw,40px)/1.2 var(--serif);max-width:24ch;text-wrap:balance}

.lb{position:fixed;inset:0;z-index:220;background:rgba(255,255,255,.96);display:grid;grid-template-rows:auto 1fr auto;animation:fade .25s both;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-top{display:flex;justify-content:space-between;align-items:center;height:44px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lb-stage{position:relative;display:grid;place-items:center;min-height:0;padding-inline:64px}
.lb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);
  font:400 22px/1 var(--display);display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.lb-arrow:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lb-arrow.prev{left:0}.lb-arrow.next{right:0}
@media (max-width:600px){.lb-stage{padding-inline:0}.lb-arrow{width:44px;height:44px;background:color-mix(in srgb,var(--bg) 85%,transparent)}.lb-arrow.prev{left:6px}.lb-arrow.next{right:6px}}
.lb-stage img{max-width:100%;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px);width:auto;height:auto;object-fit:contain;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.lb-nav{display:flex;justify-content:center;gap:10px;padding-top:12px}

.totop-row{display:flex;justify-content:center;padding-block:8px 48px}
.end-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.totop-arrow{display:inline-block;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.btn:hover .totop-arrow{transform:translateY(-3px)}
/* ---------- Lecteur de film ---------- */
.pl{position:fixed;inset:0;z-index:230;background:#0b0b0c;color:#ecebe8;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;animation:fade .3s both;overflow-y:auto;
  padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.pl-top{display:flex;justify-content:space-between;align-items:center;height:44px;font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8c8b88;font-variant-numeric:tabular-nums}
.pl-close{appearance:none;background:none;border:1px solid #333;color:#ecebe8;border-radius:999px;padding:9px 14px;font:500 11px var(--mono);letter-spacing:.1em}
.pl-close:hover{background:#ecebe8;color:#0b0b0c}
.pl-stage{position:relative;display:grid;place-items:center;min-height:0;padding-inline:72px}
.pl-screen{width:100%;max-width:1200px;max-height:100%;background:#1a1a1c;position:relative;animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.pl-screen.scope{aspect-ratio:2.39/1}.pl-screen.wide{aspect-ratio:16/9;max-width:min(1100px,calc((100vh - 300px) * 16 / 9))}
.pl-screen video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.pl-ph{appearance:none;border:0;position:absolute;inset:0;width:100%;height:100%;background:linear-gradient(135deg,#1c1c1f,#2a2a2e);color:#0b0b0c;display:grid;place-items:center;align-content:center;gap:16px}
.pl-play{width:76px;height:76px;border-radius:50%;background:#ecebe8;display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.pl-ph:hover .pl-play{transform:scale(1.08)}
.pl-msg{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#a9a8a4;animation:rise .4s both}
.pl-arrow{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:1px solid #333;background:transparent;color:#ecebe8;font:400 22px/1 var(--display);display:grid;place-items:center;transition:background .2s,color .2s}
.pl-arrow:hover{background:#ecebe8;color:#0b0b0c}
.pl-arrow.prev{left:0}.pl-arrow.next{right:0}
.pl-info{width:100%;max-width:1200px;margin:0 auto;padding-inline:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 40px;align-items:start;animation:rise .5s .08s cubic-bezier(.2,.8,.2,1) both}
.pl-info h2{margin:0;font:800 clamp(28px,4vw,44px)/1 var(--display);letter-spacing:-.035em}
.pl-info p{margin:6px 0 0;color:#a9a8a4}
.pl-pitch{font-size:15px;max-width:52ch}
.pl-specs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.pl-specs span{font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:5px 7px;border:1px solid #333;border-radius:3px;color:#a9a8a4}
@media (max-width:700px){.pl-stage,.pl-info{padding-inline:0}.pl-info{grid-template-columns:minmax(0,1fr)}
  .pl-arrow{top:auto;bottom:-62px;transform:none;width:44px;height:44px}.pl-arrow.prev{left:auto;right:54px}.pl-arrow.next{right:0}.pl-stage{margin-bottom:56px}}

/* ---------- Page d'un film ---------- */
.fp-logo{color:var(--ink)!important;font:800 17px/1 var(--display);letter-spacing:-.04em}
.fp-head{padding-block:64px 32px;display:grid;gap:14px}
.fp-title{font:800 clamp(44px,9vw,112px)/.9 var(--display);letter-spacing:-.05em;margin:0 0 0 -.05em;text-wrap:balance}
.fp-title .fw{display:inline-block;white-space:nowrap}
.fp-title .fl{display:inline-block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.fp-art svg{display:block}
.fp-art .fl{vertical-align:baseline}
.fp-title .fl:hover{transform:translateY(-.08em);transition:transform .15s}
.fp-role{margin:0;font-size:17px;color:var(--muted)}
.fp-screen{position:relative;width:100%;max-width:100%;background:#1a1a1c;border-radius:3px;overflow:hidden}
.fp-screen.scope{aspect-ratio:2.39/1}.fp-screen.wide{aspect-ratio:16/9}
.fp-screen video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.fp-ph{background:linear-gradient(135deg,var(--frame),var(--frame-2))}
.fp-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding-block:56px;border-bottom:1px solid var(--line)}
.fp-pitch{font:400 clamp(20px,2.4vw,26px)/1.4 var(--display);letter-spacing:-.01em;margin:14px 0 0;max-width:34ch;text-wrap:pretty}
.fp-note{margin:12px 0 0;color:var(--muted);max-width:60ch}
.fp-credits{margin:12px 0 0;border-top:1px solid var(--line)}
.fp-credits div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.fp-credits dt{color:var(--muted)}.fp-credits dd{margin:0;font-weight:600}.fp-credits dd.todo{color:var(--muted);font-weight:400;font-style:italic}
.fp-sec{padding-block:56px;border-bottom:1px solid var(--line);display:grid;gap:20px}
.fp-fest{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-weight:600}
.fp-stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fp-stills .ph,.fp-still{aspect-ratio:16/9}
.fp-next{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-block:48px}
.fp-next a{display:grid;gap:10px;color:var(--ink)}.fp-next a.r{text-align:right}
.fp-next b{font:800 clamp(22px,3.4vw,40px)/1 var(--display);letter-spacing:-.035em;transition:color .2s}
.fp-next a:hover b{color:var(--blue)}
@media (max-width:700px){.fp-body{grid-template-columns:minmax(0,1fr);gap:36px}.fp-stills{grid-template-columns:repeat(2,minmax(0,1fr))}.fp-next{grid-template-columns:minmax(0,1fr)}.fp-next a.r{text-align:left}}

/* ---------- Intro bm. ---------- */
.intro{position:fixed;inset:0;z-index:500;display:grid;place-items:center;cursor:pointer}
.intro::before{content:"";position:absolute;inset:0;background:var(--bg);transition:opacity .8s cubic-bezier(.65,0,.35,1)}
.intro.out::before{opacity:0}
.intro.out{pointer-events:none}
.intro-logo{position:relative;display:flex;align-items:flex-end;font:800 clamp(88px,15vw,170px)/1 var(--display);letter-spacing:-.04em;color:var(--ink);
  transform-origin:center;transition:transform .85s cubic-bezier(.65,0,.35,1),opacity .22s linear;will-change:transform;backface-visibility:hidden}
.intro.gone .intro-logo{opacity:0}
.il-w{display:inline-flex;clip-path:inset(-10% -10% 0 -10%);padding-bottom:.02em}
.il-l{display:inline-block;animation:il-up .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--d) + 100ms)}
@keyframes il-up{from{transform:translate3d(0,105%,0)}to{transform:none}}
.il-dot{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--blue);margin:0 0 .1em .045em;
  animation:il-dot .6s cubic-bezier(.16,1,.3,1) .55s both,il-ink .45s ease 1s forwards}
@keyframes il-dot{from{transform:translate3d(0,-.9em,0) scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes il-ink{to{background:var(--ink)}}
html.intro-on .nav .logo{opacity:0}
html.intro-on .name .l{animation-play-state:paused}
html:not(.intro-on) .nav .logo{transition:opacity .6s ease .25s}
html.intro-on body{overflow:hidden}
.frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.frame[data-tag]:has(.frame-img)::after{z-index:1;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pl-ph{background-size:cover;background-position:center}
.fp-ext{display:flex;justify-content:flex-end;align-items:center;padding:22px 0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.fp-ext a{color:var(--muted)}.fp-ext a:hover{color:var(--ink)}

.vb{position:absolute;inset:0;background:#111 center/cover no-repeat;display:grid;place-items:center}
.vb::before{content:"";position:absolute;inset:0;background:rgba(11,11,12,.72)}
.vb-in{position:relative;display:grid;justify-items:center;gap:16px;text-align:center;padding:20px;color:#f2efe9}
.vb-in p{margin:0;font:500 11px/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(242,239,233,.75)}
.btn.light{background:#f2efe9;color:#0b0b0c;border-color:#f2efe9}.btn.light:hover{background:transparent;color:#f2efe9}




/* Intro ouverture cinémascope */
.ci{position:fixed;inset:0;z-index:500;cursor:pointer;overflow:hidden;--w:min(74vw,1100px)}
.ci-hole{position:absolute;left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);box-shadow:0 0 0 300vmax #0c0c0e;border-radius:1px;
  transition:width .5s cubic-bezier(.65,0,.35,1),height .55s cubic-bezier(.65,0,.35,1),border-radius .5s}
/* Un seul mouvement continu : la largeur part vite, la hauteur démarre plus tard, ce qui donne un rectangle cinéma
   qui s'agrandit sans s'arrêter jusqu'au plein écran. */
.ci.s4 .ci-hole{width:calc(100vw + 4px);height:calc(100vh + 4px);border-radius:0;
  transition:width .8s cubic-bezier(.6,0,.2,1),height .9s cubic-bezier(.9,0,.2,1),border-radius .3s}
.ci-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:flex-end;font:800 clamp(72px,12vw,140px)/1 var(--display);letter-spacing:-.04em;color:#f5f5f6;transition:opacity .3s ease,transform .5s ease}
.ci-logo .il-l,.ci-logo .il-dot{animation-play-state:paused}
.ci.s0 .ci-logo .il-l,.ci.s0 .ci-logo .il-dot{animation-play-state:running}
.ci.s1 .ci-logo{opacity:0;transform:translate(-50%,-50%) scale(.96)}
@media (max-width:640px){.ci{--w:88vw}}
@media (prefers-reduced-motion:reduce){.ci-hole,.ci-logo{transition:opacity .3s}.ci.s4{opacity:0;transition:opacity .35s}}

/* Vestiaire : CTA + page complète */
.vt-cta{margin-top:40px;display:flex;justify-content:center}
.films-cta{margin-top:56px;display:flex;justify-content:center}
.films-all{padding-bottom:8px}
.vt-n{font:500 10px/1 var(--mono);background:var(--ink);color:var(--bg);border-radius:999px;padding:3px 6px;letter-spacing:0}
.btn:hover .vt-n{background:var(--bg);color:var(--ink)}
.vt-head{padding-block:56px 28px;display:grid;gap:22px}
.vt-head h1{font:italic 400 clamp(44px,7vw,80px)/1 var(--serif);margin:0;letter-spacing:-.02em}
.vt-cats{display:flex;flex-wrap:wrap;gap:6px 22px}
.vt-cats button{appearance:none;border:0;background:none;padding:2px 0;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid transparent}
.vt-cats button sup{font-size:8px;margin-left:3px;letter-spacing:0}
.vt-cats button:hover{color:var(--ink)}
.vt-cats button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.vt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:30px 10px;padding-bottom:40px;border-top:1px solid var(--line);padding-top:28px}
.vt-it{appearance:none;border:0;background:none;padding:0;text-align:left;display:grid;gap:3px;color:var(--ink)}
.vt-img{position:relative;aspect-ratio:1;background:#fff;margin-bottom:6px}
.vt-img img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain;transition:opacity .45s ease}
.vt-img img+img{opacity:0}
.vt-it:hover .vt-img img+img,.vt-it[aria-pressed="true"] .vt-img img+img{opacity:1}
.vt-it:hover .vt-img img:first-child:not(:only-child),.vt-it[aria-pressed="true"] .vt-img img:first-child:not(:only-child){opacity:0}
.vt-name{font:500 12.5px/1.3 var(--body)}
.vt-col{font:500 9.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vt-foot{color:var(--muted);font-size:13px;padding-bottom:72px;margin:0}
@media (max-width:520px){.vt-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 8px}}

@media (prefers-reduced-motion:reduce){.il-l,.il-dot{animation:none}.il-dot{background:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
  html{scroll-behavior:auto}
}