/* ===== Mobile uniquement (desktop inchangé) ===== */
.mbar,.mmenu,.mfs{display:none}
@media (max-width:800px){
  :root{--bg:#1D1D1D;--fg:#ECE8E0;--mu:#8F8A80}
  body.light{--bg:#E1DED7;--fg:#111;--mu:#8A857C}
  .nav{display:none !important}
  body:not(.keep-id) .fid{display:none !important}
  body.keep-id .fid{top:96px !important}
  h1{white-space:normal !important}

  .mbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:60;align-items:center;justify-content:space-between;
    padding:18px 20px 14px;background:var(--bg);color:var(--fg);font-size:13px;transition:transform .45s ease}
  .mbar.mbar-hide{transform:translateY(-100%)}
  .mbar-id{color:var(--fg) !important;text-decoration:none}
  .mbar-btn{all:unset;cursor:pointer;color:var(--fg);font-size:13px;padding:6px 0 6px 16px}
  body.keep-id:not([data-page="index"]) .mbar-id{visibility:hidden}
  body[data-page="index"] .fid{display:none !important}

  .mmenu{display:flex;position:fixed;inset:0;z-index:70;flex-direction:column;justify-content:space-between;
    padding:18px 20px 28px;background:var(--bg);color:var(--fg);
    opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
  .mmenu-open .mmenu{opacity:1;visibility:visible;transition:opacity .45s ease}
  .mmenu-open body{overflow:hidden}
  .mmenu-top{display:flex;justify-content:space-between;align-items:center}
  .mmenu-top img{height:20px;width:auto}
  body:not(.light) .mmenu-top img{filter:invert(1)}
  .mmenu-list{display:flex;flex-direction:column;gap:14px}
  .mmenu-list a{color:var(--mu) !important;text-decoration:none;font-size:34px;line-height:1.05;letter-spacing:-.01em;
    opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease,color .3s}
  .mmenu-list a span{display:block;font-size:10px;letter-spacing:.04em;margin-bottom:4px;opacity:.7}
  .mmenu-list a.on{color:var(--fg) !important}
  .mmenu-open .mmenu-list a{opacity:1;transform:none}
  .mmenu-open .mmenu-list a:nth-child(2){transition-delay:.04s}.mmenu-open .mmenu-list a:nth-child(3){transition-delay:.08s}
  .mmenu-open .mmenu-list a:nth-child(4){transition-delay:.12s}.mmenu-open .mmenu-list a:nth-child(5){transition-delay:.16s}
  .mmenu-open .mmenu-list a:nth-child(6){transition-delay:.2s}
  .mmenu-foot{display:flex;flex-direction:column;gap:14px;font-size:12px;color:var(--mu)}
  .mmenu-foot div{display:flex;flex-direction:column;gap:4px}
  .mmenu-foot a{color:var(--fg) !important;text-decoration:none}
  .mmenu-foot p{margin:0;line-height:1.5}
  .mseat{display:inline-flex;align-items:center;gap:10px}
  .mseat i{display:block;width:8px;height:8px;border-radius:50%;background:var(--fg);animation:br 2.8s ease-in-out infinite}

  .mfs{all:unset;display:block;position:absolute;right:10px;top:10px;z-index:3;cursor:pointer;
    font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:2px}
}
@media (hover:none){
  .gr .ph4::after{opacity:0 !important}
  .gr figcaption .tag{color:#fff !important;text-shadow:0 0 6px rgba(0,0,0,.35) !important}
}
@keyframes br{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.5);opacity:1}}
/* Playground mobile : visionneuse */
.mpg{display:none}
@media (max-width:800px){
  body[data-page="playground"] .gr{display:none !important}
  body[data-page="playground"] .pl .rgt{padding:28px 0 64px !important}
  .mpg{display:block;color:#111}
  .mpg-view{position:relative;aspect-ratio:4/5;overflow:hidden;background:#CFCAC1;touch-action:pan-y}
  .mpg-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease,transform .5s ease}
  .mpg-media.from-r{transform:translateX(24px)}.mpg-media.from-l{transform:translateX(-24px)}
  .mpg-media.in{opacity:1;transform:none}.mpg-media.out{opacity:0}
  .mpg-cap{display:flex;justify-content:space-between;padding:12px 20px 0;font-family:ui-monospace,'SF Mono',Menlo,monospace !important;font-size:11px;color:#8A857C}
  .mpg-cap .mpg-name{color:#111;font-family:inherit !important}
  .mpg-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 16px;padding:20px 20px 0;font-size:13px}
  .mpg-nav > button{all:unset;cursor:pointer;color:#111;padding:6px 0}
  .mpg-dots{order:-1;flex-basis:100%;display:flex;justify-content:space-between;gap:0}
  .mpg-dots button{all:unset;cursor:pointer;width:4px;height:4px;padding:0;border-radius:50%;background:#111;opacity:.18;transition:opacity .3s,transform .3s}
  .mpg-dots button.on{opacity:1;transform:scale(1.3)}
}
/* About : le portrait défile normalement (pas de sticky) */
body[data-page="about"] .grid > figure{position:static !important}
@media (max-width:800px){
  /* Playground + Publications : texte remonté */
  body[data-page="playground"] .pl .lft{padding-top:84px !important}
  body[data-page="publications"] .fid + div{height:0 !important}
  body[data-page="publications"] .fid + div + main{margin-top:12px !important}
  /* Index : la phrase plus grande, ferrée à gauche */
  body[data-page="index"] main{justify-content:flex-start !important;padding:0 20px !important}
  body[data-page="index"] main > div{align-items:flex-start !important;text-align:left !important;transform:translateY(-10px) !important}
  body[data-page="index"] main h1{font-size:clamp(34px,9.6vw,44px) !important;line-height:1.08 !important}
  body[data-page="index"] main p{font-size:13px !important;margin-bottom:10px !important}
}
/* Index : curseur plume (ordinateur) */
.pcur{display:none}
@media (pointer:fine) and (min-width:801px){
  .pcur-on body[data-page="index"], .pcur-on body[data-page="index"] *{cursor:none !important}
  .pcur{display:block;position:fixed;left:0;top:0;z-index:200;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .3s}
  .pcur::before{content:'';position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#CFCAC1;transition:all .25s ease}
  .pcur.pen::before{left:-.5px;top:-14px;width:1px;height:28px;border-radius:0;transform:rotate(18deg)}
  .pcur.link::before{left:-9px;top:-9px;width:18px;height:18px;background:transparent;box-shadow:inset 0 0 0 1px #CFCAC1}
}
/* Playground ordinateur : une ligne d'images */
@media (min-width:801px){
  body[data-page="playground"] .pl{display:flex !important;flex-direction:column;min-height:100vh}
  body[data-page="playground"] .pl .lft{position:static !important;height:auto !important;padding-bottom:0 !important;flex-direction:row !important;align-items:flex-end;gap:48px}
  body[data-page="playground"] .pl .rgt{padding:44px 0 56px clamp(20px,4vw,56px) !important;min-width:0;display:flex;flex-direction:column}
  body[data-page="playground"] .gr{display:flex !important;flex-wrap:nowrap;gap:0;overflow-x:auto;overflow-y:hidden;height:min(38vh,420px);gap:2px;scrollbar-width:none;cursor:grab}
  body[data-page="playground"] .gr::-webkit-scrollbar{display:none}
  body[data-page="playground"] .gr.drag{cursor:grabbing}
  body[data-page="playground"] .gr figure{flex:0 0 auto;height:100%}
  body[data-page="playground"] .gr .ph4{height:100%;aspect-ratio:4/5;width:auto}
  body[data-page="playground"] .gr img{-webkit-user-drag:none;user-select:none}
  .pgbar{display:flex;justify-content:space-between;align-items:center;padding:16px clamp(20px,4vw,56px) 0 0;font-family:ui-monospace,'SF Mono',Menlo,monospace !important;font-size:10px;color:#8A857C}
  .pgbar button{all:unset;cursor:pointer;color:#111;font-family:'Helveesti','Helvetica Neue',Arial,sans-serif !important;font-size:13px;margin-left:22px}
  .pgbar .pgtrack{flex:1;height:1px;background:rgba(17,17,17,.12);margin:0 24px;position:relative}
  .pgbar .pgtrack i{position:absolute;left:0;top:0;height:1px;background:#111;width:0}
}
.pgbar{display:none}
@media (min-width:801px){.pgbar{display:flex}}
/* Commissions : mode cinéma quand le film est lancé */
body[data-page="commissions"] .cineroot, body[data-page="commissions"] .nav{transition:background-color 2s ease !important}
body[data-page="commissions"] .nav, body[data-page="commissions"] h1, body[data-page="commissions"] .srh, body[data-page="commissions"] .sw,
body[data-page="commissions"] footer, body[data-page="commissions"] main p, body[data-page="commissions"] .mbar,
body[data-page="commissions"] main span:not(.rc span), body[data-page="commissions"] main button:not(.rc button):not(.mfs){transition:filter 2s ease,opacity 2s ease}
.cine body[data-page="commissions"], .cine body[data-page="commissions"] .cineroot, .cine body[data-page="commissions"] .nav, .cine body[data-page="commissions"] .mbar{background-color:#141414 !important}
.cine body[data-page="commissions"] .nav, .cine body[data-page="commissions"] h1, .cine body[data-page="commissions"] .srh,
.cine body[data-page="commissions"] .sw, .cine body[data-page="commissions"] footer, .cine body[data-page="commissions"] main p,
.cine body[data-page="commissions"] .mbar,
.cine body[data-page="commissions"] main span:not(.rc span), .cine body[data-page="commissions"] main button:not(.rc button):not(.mfs){filter:blur(6px);opacity:.45}
.cine body[data-page="commissions"] .sw, .cine body[data-page="commissions"] .nav{pointer-events:none}
body[data-page="commissions"] .cinewrap{transition:transform 2.4s cubic-bezier(.25,.6,.2,1);transform-origin:50% 45%;will-change:transform}
@media (min-width:801px){.cine body[data-page="commissions"] .cinewrap{transform:scale(1.2)}}
@media (max-width:800px){.cine body[data-page="commissions"] .cinewrap{transform:scale(1.06)}}
/* Message après un clic sur un lien email */
.mtoast{position:fixed;left:50%;bottom:28px;z-index:300;transform:translate(-50%,12px);opacity:0;pointer-events:none;
  font-family:ui-monospace,'SF Mono',Menlo,monospace !important;font-size:11px;letter-spacing:.02em;color:#ECE8E0;background:rgba(20,20,20,.92);padding:9px 14px;transition:opacity .35s ease,transform .35s ease}
.mtoast.on{opacity:1;transform:translate(-50%,0)}