:root { color-scheme:dark; --ink:#071114; --paper:#e7fbff; --muted:#89a9ac; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:#050505; color:var(--paper); font-family:"Barlow Condensed", Arial, sans-serif; }
body::before, body::after { content:""; position:fixed; z-index:-1; pointer-events:none; }
body::before, body::after { display:none; }
a { color:inherit; text-decoration:none; }
.site-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:min(1180px, 92vw); margin:22px auto 68px; padding:18px 22px; gap:20px; position:relative; background:linear-gradient(115deg, rgba(196,249,255,.16), rgba(73,153,164,.06)); border:1px solid rgba(206,250,255,.36); border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.3); backdrop-filter:blur(18px) saturate(135%); }
nav { display:flex; gap:28px; font-size:20px; font-weight:600; letter-spacing:.02em; }
nav a { color:#bababa; transition:color .2s; }
nav a:first-child, nav a:hover { color:var(--paper); }
.brand { font-size:20px; font-weight:700; letter-spacing:.02em; line-height:1; white-space:nowrap; color:#e9fcff; text-shadow:0 0 15px rgba(113,240,250,.32); }
.menu-note { justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:9px; color:#777; font:10px "DM Mono", monospace; letter-spacing:.12em; text-align:right; }
.menu-note small { color:rgba(170,241,246,.58); font:9px "DM Mono", monospace; letter-spacing:.14em; }
.projects { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0; width:min(1140px, 88vw); margin:0 auto 10vw; isolation:isolate; }
.project { position:relative; min-width:0; aspect-ratio:16/9; overflow:hidden; background:transparent; cursor:pointer; border:0; border-radius:0; padding:0; color:inherit; text-align:left; box-shadow:none; transition:transform .35s ease, box-shadow .6s; }
@media (min-width:701px) { .project:nth-child(n + 3) { margin-top:-12%; } }
.project img { width:100%; height:100%; display:block; object-fit:cover; opacity:1; mix-blend-mode:normal; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%); transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .4s; }
.project::before { content:""; position:absolute; z-index:1; width:55%; height:150%; top:-25%; left:-78%; pointer-events:none; background:linear-gradient(90deg, transparent 0%, rgba(134,245,255,.03) 22%, rgba(227,255,255,.6) 48%, rgba(105,238,255,.08) 72%, transparent 100%); transform:rotate(18deg); transition:left .85s cubic-bezier(.2,.7,.2,1); mix-blend-mode:screen; }
.project::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(218,255,255,.12), transparent 18% 78%, rgba(75,218,247,.08)); mix-blend-mode:screen; }
.project:hover, .project:focus-visible { transform:scale(1.025); box-shadow:inset 0 0 0 1px rgba(223,255,255,.7), 0 0 32px rgba(99,236,250,.2); z-index:5; }
.project:hover::before, .project:focus-visible::before { left:120%; }
.project:hover img, .project:focus-visible img { transform:scale(1.045); filter:brightness(.9) saturate(1.1); }
.project-info { position:absolute; inset:auto 20px 17px; display:flex; justify-content:space-between; align-items:end; opacity:0; transform:translateY(8px); transition:.35s; }
.project:hover .project-info, .project:focus-visible .project-info { opacity:1; transform:none; }
.project-title { font-size:17px; line-height:1; font-weight:700; letter-spacing:.025em; text-shadow:0 0 5px rgba(255,255,255,.92), 0 0 15px rgba(104,230,255,.7), 0 2px 7px #000; }
.project-year { font:9px "DM Mono", monospace; color:#e7e4dc; text-shadow:0 0 7px rgba(104,230,255,.85), 0 1px 5px #000; }
footer { width:90vw; margin:0 auto; padding:0 0 70px; display:grid; grid-template-columns:1fr auto auto; align-items:end; gap:25px; border-top:1px solid rgba(235,250,250,.22); padding-top:18px; }
footer p { margin:0; color:#888; font:10px "DM Mono", monospace; letter-spacing:.06em; } footer a { font-size:20px; font-weight:600; } .to-top { color:#aaa; }
.player { width:100%; max-width:none; height:100%; max-height:none; border:0; margin:0; padding:0; background:#061013; color:var(--paper); }
.player::backdrop { background:#061013; }
.player-bar { height:72px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #2a2a2a; }
.player-title { margin:0; font-size:21px; font-weight:600; }
.close-player { border:0; background:transparent; color:var(--paper); font:600 18px "Barlow Condensed", sans-serif; cursor:pointer; padding:12px 0; }
.close-player:hover { color:#aaa; }
.video-shell { height:calc(100vh - 72px); display:grid; place-items:center; padding:3vw; }
.video-shell iframe { width:min(100%, 1400px); height:min(100%, 78.75vw); aspect-ratio:16/9; border:0; }
@media (max-width:700px) { .site-header { grid-template-columns:1fr auto; width:92vw; margin:14px auto 42px; padding:17px; } .brand { grid-row:2; grid-column:1/-1; font-size:17px; margin-top:22px; } nav { gap:16px; font-size:17px; } .menu-note { font-size:8px; gap:6px; } .menu-note small { font-size:7px; } .projects { width:100%; gap:0; grid-template-columns:1fr; margin-bottom:16vw; } .project { aspect-ratio:16/10; border-radius:0; padding:0; } .project:not(:first-child) { margin-top:-13%; } .project:first-child { aspect-ratio:16/10; } .project-info { opacity:1; transform:none; inset:auto 11px 10px; text-shadow:0 1px 8px #000; } .project-title { font-size:14px; line-height:1; } .project-year { font-size:8px; } .project:hover, .project:focus-visible { transform:scale(1.01); } footer { width:90vw; grid-template-columns:1fr; gap:12px; } .to-top { display:none; } .player-bar { height:62px; padding:0 5vw; } .player-title { font-size:17px; } .close-player { font-size:15px; } .video-shell { height:calc(100vh - 62px); padding:0; } }

/* Qorz — direction visuelle orange / cyan */
body { background:radial-gradient(ellipse at 0 0, #51200f66, transparent 28rem),radial-gradient(ellipse at 100% 0, #007bac40, transparent 38rem),#020912; }
body::before { display:block; inset:0; z-index:0; background:linear-gradient(120deg,transparent 65%,#71d7ff05 65%,transparent 88%); }
.site-header { width:min(1200px,92%); height:clamp(180px,40vw,340px); margin:0 auto; padding:0; display:flex; justify-content:center; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
.site-header::before,.site-header::after { content:""; position:absolute; bottom:20%; width:19%; height:1px; background:linear-gradient(90deg,#ff7017,#4f92aa66); }
.site-header::before { left:2%; box-shadow:-22px -35px 14px #ff701777; }
.site-header::after { right:11%; background:linear-gradient(90deg,#17607d66,#00ceff); }
.brand { font-size:clamp(25px,4.4vw,40px); color:#fafaff; text-shadow:0 0 12px #ffffff18; margin:0; }
.menu-toggle { position:absolute; right:2%; bottom:20%; display:grid; gap:6px; width:44px; padding:6px 2px; border:0; background:transparent; cursor:pointer; z-index:12; }
.menu-toggle span { height:3px; width:100%; background:#fff; transition:transform .2s; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(9px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-9px) rotate(-45deg); }
nav { position:absolute; right:0; top:82%; padding:25px; flex-direction:column; gap:20px; background:#04101ff5; border:1px solid #16c6f777; border-radius:15px; z-index:15; box-shadow:0 10px 40px #0009; }
nav[hidden] { display:none; }
.projects { width:min(1200px,100%); grid-template-columns:1fr; gap:4px; margin:0 auto 100px; padding:0 2px; }
.project,.project:first-child { aspect-ratio:16/9; padding:2px; border-radius:26px; background:linear-gradient(105deg,#ff711a 0%,#ffb15b 12%,#68737d 43%,#45dfff 90%,#08cfff); overflow:hidden; box-shadow:-5px 0 19px #ff6b172b,5px 0 19px #00cfff30; }
.project:nth-child(n),.project:not(:first-child) { margin-top:0; }
.project img { border-radius:24px; mask-image:none; -webkit-mask-image:none; filter:brightness(.88); }
.project::before { inset:2px; width:auto; height:auto; transform:none; background:linear-gradient(120deg,transparent 75%,#a4e5ff12 75%,transparent 94%); mix-blend-mode:normal; border-radius:24px; box-shadow:inset 3px 3px 7px #ffab6366,inset -3px 3px 7px #4ce5ff77; }
.project::after { inset:2px; border-radius:24px; background:linear-gradient(0deg,#0109138c,transparent 28%); mix-blend-mode:normal; }
.project:hover,.project:focus-visible { transform:none; box-shadow:-5px 0 25px #ff6b1755,5px 0 25px #00cfff55; }
.project:hover::before,.project:focus-visible::before { left:2px; }
.project-info { z-index:2; inset:auto 24px 22px; }
a:focus-visible,button:focus-visible { outline:2px solid #fff; outline-offset:4px; }
footer { position:relative; width:min(1140px,90%); }
@media(max-width:700px) { .site-header { height:40vw; min-height:175px; } .brand { font-size:clamp(24px,4.4vw,32px); } .menu-toggle { width:36px; gap:5px; } .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(8px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-8px) rotate(-45deg); } .project,.project:first-child { border-radius:23px; } .project img,.project::before,.project::after { border-radius:21px; } .project-info { inset:auto 17px 15px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; } }

/* Superposition, reflet de verre et activation lumineuse. */
.projects { gap:0; }
.project:not(:first-child) { margin-top:-3%; }
.project { transition:box-shadow .3s ease; }
.project img { filter:brightness(.78) saturate(.95); }
.project::before { z-index:1; background:linear-gradient(120deg,transparent 0 61%,rgba(212,246,255,.2) 61.2%,rgba(151,220,255,.08) 79%,transparent 79.2%); transition:background .3s,box-shadow .3s; }
.project::after { z-index:1; background:linear-gradient(0deg,#01091380,transparent 30%),linear-gradient(110deg,transparent 25%,#ffffff00 37%,#e3faff66 49%,#a4edff10 60%,transparent 72%); background-size:100% 100%,250% 100%; background-position:0 0,150% 0; background-repeat:no-repeat; transition:background-position .85s ease; }
.project:hover,.project:focus-visible { z-index:5; box-shadow:-8px 0 34px #ff741aa6,8px 0 34px #00d5ffc0,0 0 8px #d7faffaa; }
.project:hover img,.project:focus-visible img { filter:brightness(1.15) saturate(1.12); transform:scale(1.025); }
.project:hover::before,.project:focus-visible::before { box-shadow:inset 4px 3px 14px #ffae70b0,inset -4px 3px 14px #69efffd0; }
.project:hover::after,.project:focus-visible::after { background-position:0 0,-60% 0; }

/* Proportions et éclairage ajustés sur la référence 850 × 1850. */
body { background:radial-gradient(ellipse 280px 320px at 0 0,#7b2b1338,transparent 80%),radial-gradient(ellipse 170px 230px at 100% 0,#009bda38,transparent 75%),#020912; }
body::before { background:linear-gradient(120deg,transparent 64%,#a2dcff08 64.1%,transparent 84%); }
.site-header { width:min(1200px,100%); height:min(40.25vw,483px); min-height:165px; }
.brand { position:absolute; top:60%; font-size:clamp(22px,4.45vw,53px); font-weight:600; line-height:1; }
.site-header::before { left:6.8%; bottom:19.8%; width:18.8%; background:linear-gradient(90deg,#b36336aa,#6596ae88); box-shadow:none; }
.site-header::after { right:14.3%; bottom:19.8%; width:11.5%; background:#07516f99; }
.menu-toggle { right:6.7%; bottom:19.8%; width:4.8%; min-width:30px; padding:0; gap:7px; }
.menu-toggle span { height:3px; }
.header-rail { position:absolute; top:37%; bottom:20%; width:1px; }
.rail-orange { left:4.1%; color:#ff731d; background:linear-gradient(#ff701799,#ff701733); }
.rail-cyan { right:4%; color:#00d8ff; background:linear-gradient(#00caff33,#00caff99); }
.header-rail::before { content:""; position:absolute; width:3px; height:21%; top:54%; left:-1px; border-radius:4px; background:currentColor; box-shadow:0 0 5px currentColor,0 0 13px currentColor; }
.header-rail::after { content:""; position:absolute; bottom:0; left:-1px; width:3px; height:3px; background:currentColor; border-radius:50%; }
.header-dots { position:absolute; left:6.9%; bottom:24%; font:12px monospace; letter-spacing:6px; color:#ff7a20; }
.projects { padding:0 1px; }
.project,.project:first-child { border-radius:clamp(18px,3vw,36px); background:linear-gradient(100deg,#ff821e 0%,#ffe4b5 2%,#ff7b22 18%,#73828d 42%,#81eaff 78%,#00d5ff 100%); box-shadow:-4px -2px 12px #ff681b66,4px -2px 12px #00cfff77; }
.project:not(:first-child) { margin-top:-1%; }
.project img { border-radius:inherit; filter:brightness(.93) saturate(1.02); }
.project::before { border-radius:inherit; background:linear-gradient(121deg,transparent 0 73%,#b8e6ff17 73.1%,#b8e6ff05 87%,transparent 87.1%); box-shadow:inset 0 2px 2px #edfbffb0,inset 3px 3px 6px #ff9f4180,inset -3px 3px 6px #31dfffaa; }
.project::after { border-radius:inherit; background-image:linear-gradient(0deg,#010913b0,transparent 30%),linear-gradient(110deg,transparent 25%,#ffffff00 37%,#e3faff55 49%,#a4edff10 60%,transparent 72%); }
.project:hover,.project:focus-visible { box-shadow:-7px -2px 28px #ff741aaa,7px -2px 28px #00d5ffbb,0 0 7px #e6fcff; }
.project:hover img,.project:focus-visible img { filter:brightness(1.13) saturate(1.1); }
@media(max-width:700px) { .brand { font-size:4.45vw; } .menu-toggle { gap:5px; } .header-dots { font-size:9px; letter-spacing:4px; } .project-info { opacity:0; } .project:focus-visible .project-info { opacity:1; } }

/* Contour bicolore : orange à gauche, cyan à droite. */
.project,.project:first-child {
  background:linear-gradient(90deg,#ff7418 0%,#ff8b32 22%,#ad8571 43%,#548fa7 57%,#19cfff 78%,#00d9ff 100%);
  box-shadow:-4px -1px 12px #ff701866,4px -1px 12px #00cfff77;
}
.project::before {
  box-shadow:inset 3px 2px 6px #ff831b88,inset -3px 2px 6px #00d9ff99;
}
.project:hover,.project:focus-visible {
  box-shadow:-7px -2px 28px #ff741aaa,7px -2px 28px #00d5ffbb;
}
.project:hover::before,.project:focus-visible::before {
  box-shadow:inset 4px 3px 12px #ff831baa,inset -4px 3px 12px #00d9ffbb;
}

/* Fondu inférieur et chevauchement d’un quart de la hauteur (format 16/9). */
.project,.project:first-child {
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 65%,transparent 100%);
}
.project:not(:first-child) { margin-top:-14.0625%; }
.project:hover,.project:focus-visible { z-index:auto; }

/* Titre au centre gauche, révélé au survol. */
.project-info {
  inset:50% 24px auto;
  align-items:center;
  opacity:0;
  transform:translateY(calc(-50% + 8px));
}
.project:hover .project-info,.project:focus-visible .project-info {
  opacity:1;
  transform:translateY(-50%);
}
.project-year { display:none; }
@media(max-width:700px) { .project-info { inset:50% 17px auto; } }

/* Les projets non sélectionnés reculent avant l’ouverture du lecteur. */
body.viewing-project { overflow:hidden; }
.viewing-project .projects { pointer-events:none; }
.project.selected-project {
  z-index:30!important;
  -webkit-mask-image:none;
  mask-image:none;
  box-shadow:-7px 0 30px #ff741a88,7px 0 30px #00d5ff99;
}
.project.selected-project img { filter:brightness(1.08) saturate(1.1); }
.project.selected-project .project-info { opacity:1; transform:translateY(-50%); }

/* Halo de néon sur le contour au survol, à l’intérieur du masque de fondu. */
.project::before { transition:box-shadow .28s ease,background .28s ease; }
.project:hover::before,.project:focus-visible::before,.project.selected-project::before {
  box-shadow:inset 2px 0 2px #ffc18a,inset -2px 0 2px #9bf5ff,
    inset 8px 1px 14px #ff781bba,inset -8px 1px 14px #00d9ffcc,
    inset 19px 0 35px #ff681b55,inset -19px 0 35px #00cfff66;
}
.project:hover,.project:focus-visible {
  background:linear-gradient(90deg,#ffb164 0%,#ff881e 24%,#ac9790 47%,#47c9ee 65%,#91f6ff 100%);
  box-shadow:-8px 0 32px #ff781bcc,8px 0 32px #00d9ffdd;
}

/* En-tête deux fois moins haut. */
.site-header { height:min(20.125vw,241.5px); min-height:82.5px; }

/* Titre d’en-tête plus discret. */
.brand { font-size:clamp(17px,3.3vw,40px); }

.sound-toggle { position:fixed; right:20px; bottom:20px; z-index:50; border:1px solid #19cfff88; border-radius:30px; padding:12px 17px; background:#020912e8; color:#e7fbff; font:500 11px 'DM Mono',monospace; cursor:pointer; box-shadow:0 0 14px #00cfff22; }
.sound-toggle[aria-pressed="true"] { border-color:#63e7ff; box-shadow:0 0 18px #00cfff55; }
.viewing-project .sound-toggle { visibility:hidden; }

/* Ordinateur : deux films côte à côte ; mobile : colonne immersive. */
@media(min-width:1024px) {
  .projects { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:12px; }
  .project:nth-child(2) { margin-top:0; }
  .project:nth-child(n+3) { margin-top:-14.0625%; }
}

/* Éviter le badge de l’hébergeur en bas à droite. */
.sound-toggle { left:20px; right:auto; }

/* Titres visibles en permanence. */
.project .project-info { opacity:1; transform:translateY(-50%); }

/* Présentation sans traits colorés. */
.site-header::before,.site-header::after,.header-rail,.header-dots { display:none; }
.project,.project:first-child,.project:hover,.project:focus-visible,.project.selected-project {
  padding:0; background:#000; box-shadow:none;
}
.project::before,.project:hover::before,.project:focus-visible::before,.project.selected-project::before { box-shadow:none; }
/* Lecteur noir, au format natif 16/9, sans bandes dues à une iframe trop haute. */
.player,.player::backdrop,.video-shell,.video-shell iframe { background:#000; color-scheme:normal; }
.player { height:100dvh; }
.video-shell { height:calc(100dvh - 72px); }
.video-shell iframe { display:block; width:min(100%,1400px); height:auto; aspect-ratio:16/9; max-height:100%; border:0; }
.close-player:focus { outline:none; }
.close-player:focus-visible { outline:none; text-decoration:underline; text-underline-offset:6px; }
@media(max-width:700px) { .video-shell { height:calc(100dvh - 62px); } }

/* Titres de films plus discrets. */
.project-title { font-size:13px; }
@media(max-width:700px) { .project-title { font-size:11px; } }

/* Proposition typographique — aperçu uniquement. */
body,nav,.brand,.project-title,.player-title,.close-player,footer a { font-weight:300; }
.brand-filmmaker { font-weight:600; }
.sound-toggle,.project-year,footer p { font-weight:400; }
.project-title { text-shadow:0 0 8px #68e6ff66,0 2px 5px #000; }

/* Même typographie fine pour l’en-tête et les titres des films. */
.brand,.brand-filmmaker { font-family:"Barlow Condensed",Arial,sans-serif; font-weight:300; }
.brand,.brand-filmmaker { font-family:Arial,sans-serif; font-weight:300; }

@font-face {
  font-family:'Gotham Book';
  src:url('assets/fonts/Gotham-Book.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
body,button,a,nav,.brand,.brand-filmmaker,.project-title,.project-year,.player-title,.close-player,footer p,footer a,.sound-toggle,.menu-note,.menu-note small {
  font-family:'Gotham Book',Arial,sans-serif;
  font-weight:400;
  font-synthesis:none;
}

@font-face {
  font-family:'Gotham Medium';
  src:url('assets/fonts/Gotham-Medium.otf') format('opentype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
.brand-filmmaker { font-family:'Gotham Medium',Arial,sans-serif; font-weight:500; }

@font-face {
  font-family:'Gotham Light';
  src:url('assets/fonts/Gotham-Light.otf') format('opentype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
body,button,a,nav,.brand,.project-title,.project-year,.player-title,.close-player,footer p,footer a,.sound-toggle,.menu-note,.menu-note small {
  font-family:'Gotham Light',Arial,sans-serif;
  font-weight:300;
  font-synthesis:none;
}
.brand-filmmaker { font-family:'Gotham Medium',Arial,sans-serif; font-weight:500; }

.intro-copy {
  width:min(1200px,100%);
  margin:0 auto clamp(18px,3vw,36px);
  overflow:hidden;
  color:#e7fbff;
  font-family:'Gotham Light',Arial,sans-serif;
  font-size:15px;
  font-weight:300;
  line-height:1.45;
  letter-spacing:.01em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.intro-track { display:block; width:max-content; white-space:nowrap; }
.intro-message {
  display:inline-block;
  padding-left:100vw;
  will-change:transform;
  animation:intro-marquee 65s linear infinite;
}
@keyframes intro-marquee { to { transform:translateX(-100%); } }
@media(max-width:700px) {
  .intro-copy {
    margin-bottom:22px;
    font-size:14px;
    line-height:1.5;
  }
}
@media(prefers-reduced-motion:reduce) {
  .intro-message { animation:none; padding-left:0; }
}

.project-title { font-family:'Gotham Medium',Arial,sans-serif; font-weight:500; }

.player-title { font-family:'Gotham Medium',Arial,sans-serif; font-weight:500; }

.music-entry[hidden] { display:none; }
.music-entry { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:#020912dd; backdrop-filter:blur(12px); }
.music-entry-panel { text-align:center; padding:30px; max-width:100%; }
.music-entry-panel p { font-size:clamp(18px,4vw,28px); margin:0 0 35px; }
.music-entry-panel strong { font-family:'Gotham Medium',Arial,sans-serif; font-weight:500; }
.music-entry button { display:block; margin:14px auto; cursor:pointer; }
.enter-with-sound { background:#fff; color:#05090c; border:0; border-radius:28px; padding:16px 28px; font-size:14px; }
.enter-without-sound { background:none; border:0; color:#c4c7cb; font-size:12px; padding:12px; }