:root{--ink:#111;--paper:#fff;--mute:#777;--font:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);font-size:15px;line-height:1.5;color:var(--ink);background:var(--paper)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;padding:22px 28px;z-index:5}
header .brand{font-weight:600;letter-spacing:.01em}
nav{display:flex;gap:22px}
nav a[aria-current]{text-decoration:underline;text-underline-offset:3px}
/* Accueil */
body.home{color:#fff;background:#000}
.bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.home .shade{position:fixed;inset:0;background:rgba(0,0,0,.15);z-index:0}
.home .links{position:fixed;right:1.5vw;top:24%;z-index:1;display:flex;flex-direction:column;align-items:flex-end;font-size:clamp(20px,2.1vw,56px);line-height:1.15;text-shadow:0 0 14px rgba(0,0,0,.35)}
.home .links a:hover{text-decoration:none}
.home .links b{font-weight:700;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.1em}
.home .links .me{margin-bottom:.7em;font-size:1.6em;line-height:1.1}
.home .links .work{margin-top:.9em}
@media(max-width:700px){.home .links{right:18px;font-size:6vw}}
/* Pages blanches */
main{padding:110px 28px 60px;max-width:1200px;margin:0 auto}
@media(prefers-reduced-motion:reduce){.bg,.bgframe{display:none}.home{background:#222}}
/* Lecteur vidéo : fond blanc */
.modal{position:fixed;inset:0;z-index:10;background:#fff;color:var(--ink);overflow:auto;display:flex;flex-direction:column;padding:64px 20px 24px}
.modal[hidden]{display:none}
.modal .inner{margin:auto;text-align:center;width:100%}
.stage{display:flex;justify-content:center;align-items:center;gap:2vw}
.frame{background:#000;aspect-ratio:var(--r,1.7778);width:min(92vw,calc((100vh - 170px)*var(--r,1.7778)))}
.stage.multi .frame{width:auto;height:min(calc(100vh - 170px),calc(28vw / var(--r,.5625)))}
.frame iframe{display:block;width:100%;height:100%;border:0}
#mtitle{margin-top:14px;font-weight:700;letter-spacing:.02em}
.close{all:unset;position:fixed;top:20px;right:28px;z-index:11;cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:700px){.modal{padding:56px 12px 24px}.stage.multi{flex-direction:column;gap:14px}.stage.multi .frame{height:auto;width:min(80vw,calc((100vh - 170px)*var(--r,.5625)))}}

main h1{font-size:clamp(22px,3.5vw,34px);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin-bottom:.8em}
/* Accueil : fond Vimeo */
.bgframe{position:fixed;top:50%;left:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none;z-index:0}
/* Work : liste de titres */
.list{position:fixed;right:3.1vw;top:26%;display:flex;flex-direction:column;align-items:flex-end;font-size:clamp(20px,2.1vw,56px);line-height:1.13;font-weight:700;text-align:right}
.pitem{all:unset;cursor:pointer;font-weight:700;white-space:nowrap}
.pitem:hover{text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.1em}
.pitem:focus-visible,.home-link:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.home-link{margin-top:1.13em;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.1em}
@media(max-width:700px){.list{right:18px;font-size:5.5vw}}
/* Logo */
.logo{position:fixed;top:22px;left:28px;z-index:5;display:block;width:clamp(64px,7vw,130px)}
.logo img{display:block;width:100%;height:auto}
.mepage .logo{position:absolute}
/* Me : portrait plein cadre à gauche, texte sur toute la moitié droite */
.meh{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;max-width:none;margin:0;padding:0}
.meh figure{position:sticky;top:0;height:100vh;margin:0}
.meh figure img{display:block;width:100%;height:100%;object-fit:cover}
.profil{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:96px 3.1vw 64px;text-align:right;font-size:clamp(15px,1.45vw,30px);line-height:1.5}
.profil h1{font-size:clamp(24px,2.7vw,68px);font-weight:700;line-height:1.13;margin:0}
.profil .role{font-weight:700;font-size:clamp(24px,2.7vw,68px);line-height:1.13;margin-top:.5em}
.profil .bio{margin-top:1.8em;text-align:justify;hyphens:auto;text-wrap:pretty}
.credits{margin-top:2.2em;border-bottom:1px solid #ddd}
.credits div{display:flex;justify-content:space-between;gap:1.5em;padding:.65em 0;border-top:1px solid #ddd}
.credits dt{color:#767676;white-space:nowrap}
.credits dd{font-weight:700;text-align:right}
.credits a{text-decoration:underline;text-underline-offset:.15em}
.profil nav{display:flex;flex-direction:column;align-items:flex-end;margin-top:2.4em;font-weight:700;font-size:clamp(24px,2.7vw,68px);line-height:1.13}
.profil nav a:hover{text-decoration:underline;text-underline-offset:.1em}
.profil a:focus-visible,.logo:focus-visible{outline:2px solid #888;outline-offset:3px}
@media(max-width:800px){
  .logo{top:16px;left:18px;width:64px}
  .meh{grid-template-columns:1fr}
  .meh figure{position:static;height:62vh}
  .profil{min-height:0;padding:28px 18px 40px;font-size:15px}
  .profil h1,.profil .role,.profil nav{font-size:22px}
}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}