/* Maxime Meucci — site public.
   Colonne contact fixe à gauche + grille de projets 16:9. Une colonne sur mobile. */
:root{
  --bg:#ffffff; --fg:#111111; --muted:#7a7a74; --line:#e4e4df; --rec:#e0301e; --frame:#141414;
  --display:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:12px/1.55 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,video{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--rec);outline-offset:3px}

.wrap{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh;
  padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}

/* ---------- Colonne contact ---------- */
aside{position:sticky;top:0;height:100vh;padding:28px 28px 28px 0;display:flex;flex-direction:column;gap:30px;overflow:auto}
.name{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.2;text-decoration:none}
.role{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;font-size:11px;margin-top:4px}
.block{display:flex;flex-direction:column;gap:2px}
.label{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-bottom:4px}
.block a{text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
.block a:hover{border-color:currentColor}
.gap{height:10px}
.tc{margin-top:auto;display:flex;align-items:center;gap:8px;color:var(--muted);font-variant-numeric:tabular-nums}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Travaux ---------- */
main{padding:28px 0;min-width:0}
.showreel{position:relative;display:block;aspect-ratio:2.39/1;width:100%;background:var(--frame);overflow:hidden;margin-bottom:20px;text-decoration:none;color:#fff}
.showreel img,.showreel video,.showreel .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.showreel .ph{background:radial-gradient(120% 90% at 70% 30%,#3a3a3a,#0b0b0b 85%)}
.showreel .shade{position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.45))}
.showreel .cap{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.showreel .h1{font-family:var(--display);font-weight:800;font-size:clamp(30px,6vw,84px);line-height:.9;letter-spacing:-.02em;text-transform:uppercase}
.showreel .play{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.showreel img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.showreel:hover img{transform:scale(1.02)}

.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card{display:block;text-decoration:none;min-width:0}
.thumb{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--frame)}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.thumb video{opacity:0;transition:opacity .35s}
.thumb video.on{opacity:1}
.over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center;color:#fff;
  background:rgba(0,0,0,.36);opacity:0;transition:opacity .35s}
.over .t{font-family:var(--display);font-weight:800;font-size:clamp(15px,1.7vw,22px);letter-spacing:.12em;text-transform:uppercase;line-height:1.15;text-wrap:balance;transform:translateY(6px);transition:transform .35s}
.over .c{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.card:hover .over,.card:focus-visible .over,.card.show .over{opacity:1}
.card:hover .over .t,.card:focus-visible .over .t,.card.show .over .t{transform:none}
.card:hover .thumb img{transform:scale(1.03)}
.soon{color:var(--muted);padding:40px 0}

footer{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:var(--muted);gap:12px;flex-wrap:wrap}
footer button{color:var(--muted)}
footer button:hover{color:var(--fg)}

/* ---------- Fiche projet ---------- */
.modal{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto;overscroll-behavior:contain;
  padding:calc(20px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.m-in{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.m-top{display:flex;justify-content:space-between;gap:12px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-variant-numeric:tabular-nums}
.m-top button:hover{color:var(--rec)}
.player{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;margin:0 auto;background:var(--frame);overflow:hidden;
  transition:aspect-ratio .35s ease,width .35s ease}
@supports not (height:100svh){.player{max-height:calc(100vh - 150px)}}
.player video,.player iframe,.player img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain;background:#000}
.player .ext{position:absolute;inset:auto 0 0 0;padding:18px;display:flex;justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.player .ext a{color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:11px;border-bottom:1px solid #fff;text-decoration:none}
.m-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px}
.m-text{min-width:0}
.m-title{font-family:var(--display);font-weight:800;font-size:clamp(28px,5vw,60px);line-height:.95;letter-spacing:-.02em;text-transform:uppercase;margin:0;text-wrap:balance}
#mText{max-width:62ch;font-size:13px;margin:16px 0 0;white-space:pre-line}
#mText:empty{display:none}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;align-content:start}
dt{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px;padding-top:2px}
dd{margin:0;min-width:0;overflow-wrap:anywhere}
.m-nav{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;gap:12px}
.m-nav button{text-align:left;display:flex;flex-direction:column;gap:2px;max-width:48%}
.m-nav button:last-child{text-align:right;align-items:flex-end}
.m-nav button:hover span{color:var(--rec)}
.m-nav small{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.legal-txt{max-width:70ch;font-size:13px}
body.locked{overflow:hidden}

/* ---------- Mobile ---------- */
.mbar{display:none}
@media (max-width:860px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .mbar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;background:var(--bg);
    padding:calc(14px + env(safe-area-inset-top)) 0 14px;border-bottom:1px solid var(--line)}
  .mbar button{text-transform:uppercase;letter-spacing:.12em;font-size:11px}
  aside{position:static;height:auto;padding:20px 0 8px;gap:22px;overflow:visible}
  aside .id,aside .tc{display:none}
  aside.collapsed{display:none}
  main{padding:14px 0 20px}
  .grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .showreel{aspect-ratio:4/5;margin-bottom:12px}
  .over{transition:opacity .2s}
  .m-grid{grid-template-columns:minmax(0,1fr);gap:22px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}