:root{--bg:#f4f4f2;--ink:#111;--mut:#777;--line:#cfcfca;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
*{box-sizing:border-box}
body.nz{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--mono)}
.nz a{color:inherit;text-decoration:none}
.nzTop{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:var(--bg);border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.nzTop a{color:var(--ink);text-decoration:none}
.nzTop nav{display:flex;gap:22px}
.nzTop nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
/* intro */
.intro{position:fixed;inset:0;z-index:99;background:var(--bg);display:grid;place-content:center;justify-items:center;gap:20px;animation:nzOut .6s ease 2.1s forwards}
.intro img{width:min(40vw,180px);mix-blend-mode:multiply;animation:nzSpin 1.5s cubic-bezier(.7,0,.2,1) both}
.intro span{font:12px var(--mono);letter-spacing:.5em;opacity:0;animation:nzFade .8s ease 1s forwards}
@keyframes nzSpin{from{opacity:0;transform:scale(.6) rotate(-180deg)}to{opacity:1;transform:none}}
@keyframes nzFade{to{opacity:1}}
@keyframes nzOut{to{opacity:0;visibility:hidden}}
/* accueil */
.menu{max-width:1200px;margin:0 auto;padding:6vh 20px}
.menu a{display:flex;align-items:baseline;gap:20px;padding:22px 0;border-bottom:1px solid var(--ink);font-size:clamp(30px,8vw,84px);line-height:1;letter-spacing:-.02em;transition:transform .35s ease}
.menu a:first-child{border-top:1px solid var(--ink)}
.menu small{font-size:13px;letter-spacing:.1em;color:var(--mut);min-width:2ch}
.menu a:hover{transform:translateX(14px)}
.menu i{margin-left:auto;font-style:normal;opacity:0;transition:opacity .3s}
.menu a:hover i{opacity:1}
/* portfolio */
.stack{padding:34px 0 80px;overflow:hidden}
.folder{display:block;position:relative;isolation:isolate;opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.folder+.folder{margin-top:-34px}
.folder.in{opacity:1;transform:none}
.folder.in:hover,.folder.in:focus-visible{transform:translateY(-22px)}
.folder .front{position:relative;z-index:1;display:flex;align-items:flex-start;gap:16px;height:96px;padding:10px 20px;background:var(--bg);border:1px solid var(--ink);border-radius:14px 14px 0 0;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.folder .front b{font-weight:400;flex:1}
.folder .front i{font-style:normal;color:var(--mut);font-size:12px;text-transform:none}
.folder .tab{position:absolute;top:-23px;left:6%;padding:2px 16px;background:var(--bg);border:1px solid var(--ink);border-bottom:0;border-radius:9px 9px 0 0;font-size:12px}
.folder:nth-child(even) .tab{left:auto;right:6%}
.folder .sheet{position:absolute;z-index:0;left:12%;bottom:50px;width:min(300px,42%);aspect-ratio:16/9;object-fit:cover;border:1px solid var(--ink);background:#ddd;opacity:0;transform:translateY(46px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.folder:nth-child(even) .sheet{left:auto;right:12%}
.folder:hover .sheet,.folder:focus-visible .sheet{opacity:1;transform:translateY(-6px)}
@media (hover:none){.folder .sheet{opacity:1;transform:translateY(-6px);width:34%}}
/* projet */
.pv{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.pgal img{width:100%;display:block;margin-bottom:12px}
.pinfo{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:36px 0 80px}
.pinfo h1{margin:0 0 6px;font-size:clamp(28px,6vw,64px);line-height:1;font-weight:400;text-transform:uppercase}
.pinfo dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px}
.pinfo dt{color:var(--mut);text-transform:uppercase;font-size:12px;letter-spacing:.08em}
.pinfo dd{margin:0}
.pinfo p{margin:0 0 28px;max-width:60ch;white-space:pre-line}
/* contact */
.cform{display:grid;gap:16px;max-width:560px;padding:6vh 0 80px}
.cform h1{margin:0;font-size:clamp(30px,7vw,64px);font-weight:400;letter-spacing:-.02em}
.cform input,.cform textarea{width:100%;padding:12px;background:transparent;border:1px solid var(--ink);border-radius:0;font:inherit;color:inherit}
.cform textarea{min-height:160px;resize:vertical}
.cform button{padding:14px;background:var(--ink);color:var(--bg);border:0;font:inherit;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* jukebox */
.jb{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;align-items:flex-end;gap:4px;font-family:var(--mono);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.jb.docked{left:auto!important;top:auto!important;right:0!important;bottom:16px!important;transform:translateX(calc(100% - 34px))}
.jbBtn{width:58px;height:70px;padding:6px;background:var(--bg);border:1px solid var(--ink);border-radius:30px 30px 6px 6px;cursor:grab;touch-action:none;color:var(--ink)}
.jbBtn svg{width:100%;height:100%;display:block}
.jbHide{width:30px;height:34px;background:var(--ink);color:var(--bg);border:0;cursor:pointer;font:inherit;transition:transform .3s}
.jb.docked .jbHide{transform:scaleX(-1)}
.jbPop{position:absolute;bottom:calc(100% + 10px);width:min(300px,calc(100vw - 32px));padding:14px;background:var(--bg);border:1px solid var(--ink);font-size:13px;animation:nzFade .25s ease both;opacity:0}
.jbPop[hidden]{display:none}
.jbPop h2{margin:0 0 8px;font-size:12px;letter-spacing:.14em;font-weight:400}
.jbNow{min-height:20px;margin-bottom:10px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jbCtl{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.jbPop button{background:transparent;border:1px solid var(--ink);color:var(--ink);padding:5px 10px;font:inherit;cursor:pointer}
.jbPop input[type=range]{flex:1;accent-color:var(--ink)}
.jbList{display:grid;gap:4px;max-height:140px;overflow:auto}
.jbList button{text-align:left;border-color:var(--line)}
.jbList button[aria-current]{background:var(--ink);color:var(--bg)}
@media (max-width:700px){.pinfo{grid-template-columns:1fr}.folder .front{font-size:13px;padding:10px 14px}.folder .front i{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}}
html,body.nz{height:auto}
#view.enter{animation:nzIn .4s ease both}
@keyframes nzIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ptitle{margin:0;font-size:clamp(34px,9vw,120px);line-height:.95;letter-spacing:-.03em;font-weight:400;text-transform:uppercase}
.stack{--hl:#ffe45c;padding-top:36px}
.stack .ptitle{min-height:min(250px,40vw);padding-bottom:24px;display:flex;align-items:flex-end}
.folder.latest .front{background:var(--hl)}
.folder.latest .sheet{width:min(380px,48%);left:auto;right:12%;opacity:1;transform:translateY(-6px)}
.folder.latest:nth-child(odd) .tab{left:auto;right:6%}
.pbody{max-width:980px;margin:0 auto;padding:22px 20px 0}
.back{display:inline-block;margin-bottom:18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.back:hover{text-decoration:underline;text-underline-offset:5px}
.pbody .ptitle{font-size:clamp(26px,5vw,52px);margin-bottom:18px}
.pvbox{max-width:100%}
.pvbox img{width:100%;display:block;margin-bottom:12px}
.jbHead{display:flex;justify-content:space-between;align-items:center}
.jbPop .jbClose{padding:2px 8px;border-color:transparent}
.footer{margin-top:40px}
@media (hover:none){.folder.latest .sheet{width:55%}}
.cform select{width:100%;padding:12px;background:transparent;border:1px solid var(--ink);border-radius:0;font:inherit;color:inherit}
.cform select option{color:#111}
/* STUDIO : ambiance cinéma sombre */
body.studio{--bg:#0b0b0b;--ink:#f4f4f2;--mut:#8a8a86;--line:#2b2b2b;--text:#f4f4f2;--muted:#8a8a86}
.sHero{position:relative;height:calc(100vh - 49px);height:calc(100svh - 49px);min-height:420px;overflow:hidden;background:#000 radial-gradient(circle at 70% 30%,#222,#000 70%);color:#f4f4f2}
.sVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sHero::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.65))}
.sOver{position:absolute;inset:auto 0 0 0;z-index:1;padding:0 20px 24px}
.sWord,.sBig{font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:-.04em;text-transform:uppercase}
.sWord{margin:0;font-size:clamp(52px,15vw,240px);line-height:.82}
.sWord span{display:block}
.sSub{margin:14px 0 0;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.sCue{position:absolute;right:20px;bottom:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.sMarq{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:14px 0}
.sTrack{display:inline-flex;animation:nzMarq 40s linear infinite}
.sTrack span{padding-right:2rem;font-size:clamp(20px,4vw,44px);text-transform:uppercase}
@keyframes nzMarq{to{transform:translateX(-50%)}}
.sSec{padding-top:12vh;padding-bottom:4vh}
.sBig{margin:0 0 10vh;font-size:clamp(28px,6vw,84px);line-height:1;max-width:18ch}
.sLab{margin:0 0 28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:400;border-top:1px solid var(--line);padding-top:14px}
.sCols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:30px}
.sCols small{color:var(--mut)}
.sCols h3{margin:6px 0;font-size:20px;font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.sCols p{margin:0;color:var(--mut);max-width:34ch}
.sGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:22px}
.sCard{display:block}
.sImg{display:block;aspect-ratio:4/5;overflow:hidden;background:#1a1a1a;margin-bottom:10px}
.sImg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.sCard:hover .sImg img{transform:scale(1.05)}
.sCard b{display:block;font-weight:400;text-transform:uppercase;letter-spacing:.04em}
.sCard i{font-style:normal;color:var(--mut);font-size:12px}
.sBts{columns:3 240px;column-gap:14px}
.sBts img{width:100%;display:block;margin-bottom:14px}
.sInfo{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:40px 0 0}
.sInfo dt{color:var(--mut);text-transform:uppercase;font-size:12px;letter-spacing:.1em}
.sInfo dd{margin:0}
.sCta{display:block;margin-top:10vh;padding:14vh 20px;border-top:1px solid var(--line);text-align:center;font:700 clamp(32px,10vw,140px)/.95 Arial,Helvetica,sans-serif;letter-spacing:-.04em;text-transform:uppercase}
.sCta:hover{text-decoration:underline;text-underline-offset:.12em}
.jbVeil{position:fixed;inset:0;z-index:200;background:#000;opacity:0;transition:opacity 1.2s ease}
.jbVeil.on{opacity:1}
/* Mobile : pas d'images d'aperçu sur les dossiers */
@media (max-width:700px),(hover:none) and (max-width:900px){
  .folder .sheet,.folder.latest .sheet{display:none}
  .stack .ptitle{min-height:min(120px,30vw)}
}

/* PROFIL */
.profileThumb__img{width:120px;height:76px;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.profileThumb{overflow:visible}
.profileThumb:hover .profileThumb__img{transform:translateY(-4px)}
.profileSoftRow__cell{display:flex;align-items:center;font-size:12px;transition:transform .25s ease,color .25s ease}
.profileSoftRow__cell:hover{transform:translateY(-2px);color:var(--text)}
.swIcon{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;margin-right:10px;border-radius:8px;border:1.5px solid var(--c);background:var(--b);color:var(--c);font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:-.02em;transition:transform .25s ease}
.profileSoftRow__cell:hover .swIcon{transform:scale(1.1) rotate(-4deg)}
.sw-pr{--c:#9999ff;--b:#00005b}.sw-ae{--c:#d291ff;--b:#00005b}.sw-dv{--c:#e8e8e8;--b:#2a2a2a}
.sw-id{--c:#ff3366;--b:#49021f}.sw-ai{--c:#ff9a00;--b:#330000}.sw-ps{--c:#31a8ff;--b:#001e36}
.sw-ac{--c:#5ec8ff;--b:#0b2a66}.sw-au{--c:#00e4bb;--b:#00181f}.sw-mx{--c:#53d3ff;--b:#06324a}
.sw-fr{--c:#fff;--b:#0055ff}.sw-wp{--c:#fff;--b:#21759b}.sw-cu{--c:#f4f4f2;--b:#111}
/* Bouton Letterboxd */
.lbBtn{display:inline-flex;align-items:center;gap:12px;margin:18px 0 6px;padding:10px 18px 10px 14px;border:1px solid var(--text);border-radius:999px;color:var(--text);text-decoration:none;font-size:12px;letter-spacing:.06em;text-transform:uppercase;transition:background .3s ease,color .3s ease}
.lbDots{display:inline-flex}
.lbDots i{width:14px;height:14px;border-radius:50%;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.lbDots i:nth-child(1){background:#ff8000;transform:translateX(8px)}
.lbDots i:nth-child(2){background:#00e054;transform:translateX(0)}
.lbDots i:nth-child(3){background:#40bcf4;transform:translateX(-8px)}
.lbArr{display:inline-block;transition:transform .3s ease}
.lbBtn:hover,.lbBtn:focus-visible{background:var(--text);color:var(--bg)}
.lbBtn:hover .lbDots i,.lbBtn:focus-visible .lbDots i{transform:translateX(0);animation:lbBounce .6s ease both}
.lbBtn:hover .lbDots i:nth-child(2){animation-delay:.08s}
.lbBtn:hover .lbDots i:nth-child(3){animation-delay:.16s}
.lbBtn:hover .lbArr{transform:translate(3px,-3px)}
@keyframes lbBounce{40%{transform:translateY(-5px)}}
/* EXPÉRIENCE PROFESSIONNELLE */
.profileExp{margin-top:48px}
.expRow{display:grid;grid-template-columns:minmax(120px,170px) 1fr;gap:16px 24px;padding:20px 0;border-top:1px dotted var(--line);transition:padding-left .3s ease}
.expRow:hover{padding-left:8px}
.expDate{font-size:11px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.expTitle{margin:0;font-size:17px;font-weight:400;text-transform:uppercase;letter-spacing:.03em;line-height:1.2}
.expRow--feat .expTitle{font-size:22px}
.expPlace{display:block;margin-top:2px;font-size:11px;color:var(--muted);text-transform:none;letter-spacing:0}
.expRole{margin:6px 0 4px;font-size:12px}
.expText{margin:0;max-width:56ch;font-size:12px;line-height:1.6;color:var(--muted)}
.expNow{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:10px;letter-spacing:.1em;color:var(--text)}
.expNow::before{content:"";width:6px;height:6px;border-radius:50%;background:#00e054;animation:expPulse 1.8s ease-in-out infinite}
@keyframes expPulse{50%{transform:scale(1.6);opacity:.4}}
@media (max-width:700px){.expRow{grid-template-columns:1fr;gap:6px}}
/* TRUSTED CONNECTIONS : logos */
.profileTrustedLogos{display:flex;flex-wrap:wrap;align-items:center;gap:22px 28px}
.trustLogo{height:34px;width:auto;max-width:110px;object-fit:contain}
/* ================= RESPONSIVE (téléphone / tablette) ================= */
html{overflow-x:hidden}
body.nz{overflow-x:clip}
img,video,iframe{max-width:100%}

@media (max-width:860px){
  /* barre du haut + accueil */
  .nzTop{padding:12px 16px;font-size:12px;letter-spacing:.05em;gap:12px}
  .nzLogo{white-space:nowrap}
  .nzTop nav{gap:14px}
  .menu{padding:4vh 16px}
  .menu a{padding:18px 0}

  /* profil : portrait, 3 domaines, logiciels, Letterboxd, logos */
  .profilePortrait{max-width:360px}
  .profileCopy__text{max-width:none}
  .profileServicesThumbs{flex-direction:row;gap:14px;margin-top:22px}
  .profileThumb{flex:1 1 0;min-width:0;align-items:flex-start}
  .profileThumb__img{width:100%;height:auto;aspect-ratio:16/10}
  .profileThumb__label{font-size:10px}
  .profileSoftware{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  .profileSoftware__heading{grid-column:1/-1}
  .profileSoftRow{display:contents}
  .profileSoftRow__cell{padding:14px 0;border-top:1px dotted var(--line);font-size:12px}
  .profileExp{margin-top:36px}
  .lbBtn{max-width:100%;padding:9px 14px 9px 12px;gap:10px;font-size:11px}
  .profileTrustedLogos{gap:16px 20px}
  .trustLogo{height:28px;max-width:90px}
}

@media (max-width:700px){
  /* expérience pro */
  .expRow{padding:16px 0}
  .expDate{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
  .expNow{margin-top:0}
  .expTitle{font-size:16px}
  .expRow--feat .expTitle{font-size:19px}
  .expText{max-width:none}

  /* page Studio */
  .sHero{min-height:360px}
  .sOver{padding:0 16px 20px}
  .sCue{display:none}
  .sSec{padding-top:8vh}
  .sBig{max-width:none;margin-bottom:6vh}
  .sGrid{grid-template-columns:repeat(2,1fr);gap:14px}
  .sCard b{font-size:12px}
  .sBts{columns:2 140px;column-gap:10px}
  .sInfo{grid-template-columns:1fr;gap:2px}
  .sInfo dd{margin-bottom:12px}
  .sCta{padding:10vh 16px}

  /* contact, projet, jukebox */
  .cform{padding:4vh 0 60px}
  .pbody{padding:16px 16px 0}
  .jb{right:10px;bottom:10px}
  .jbBtn{width:48px;height:58px;padding:5px}
  .jbPop{max-height:70vh;overflow:auto}
}

@media (max-width:380px){
  .nzTop{font-size:11px;letter-spacing:.03em}
  .nzTop nav{gap:10px}
}