* { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }

  /* --- Portrait en fond, centré, jamais rogné ---
     <picture> : le navigateur choisit lui-même WebP (36 Ko) ou PNG (942 Ko)
     selon son support réel du décodage, sans JavaScript ni double téléchargement. */
  #portrait {
    position: fixed;
    inset: 0;
    background-color: #ffffff;
    z-index: 0;
  }
  #portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* --- Oscilloscopes verticaux gauche / droite : TOUJOURS au premier plan --- */
  .scope {
    position: fixed;
    top: 0;
    height: 100%;
    width: 72px;
    z-index: 6;
    pointer-events: none;
  }
  #scopeL { left: 0; }
  #scopeR { right: 0; }

  /* --- Pong rétro en arrière-plan de la page d'accueil --- */
  #pong {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    display: none;
  }
  body:not(.retro):not(.nocode):not(.music):not(.video) #pong { display: block; }

  /* --- Scores du pong (police pixel rétro grise, auto-hébergée) --- */
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pressstart2p-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  @font-face {
    font-family: "Press Start 2P";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/pressstart2p-latinext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  #scoreT, #scoreB {
    position: fixed;
    z-index: 1;
    display: none;
    pointer-events: none;
    color: #999999;
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: clamp(6px, 0.75vw, 10px);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  #scoreT { top: 14px; right: 92px; text-align: right; }
  #scoreB { bottom: 12px; left: 92px; }
  body:not(.retro):not(.nocode):not(.music):not(.video) #scoreT,
  body:not(.retro):not(.nocode):not(.music):not(.video) #scoreB { display: block; }

  /* --- Titre rouge au niveau des pectoraux : au-dessus du voile, sous les ondes --- */
  #titre {
    position: fixed;
    z-index: 4;
    transform: translate(-50%, -50%);
    color: #ff0000;
    font-size: clamp(20px, 4.2vw, 46px);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
    background: none;
    border: none;
    font-family: inherit;
    padding: 0.4em 0.6em;
  }
  #titre:hover { text-decoration: underline; }

  /* --- Liens sous le titre --- */
  #liens {
    position: fixed;
    z-index: 4;
    transform: translate(-50%, 0);
    color: #ff0000;
    font-size: clamp(10px, 1.5vw, 15px);
    letter-spacing: 0.03em;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
  }
  #liens a {
    color: #ff0000;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #liens a:hover { text-decoration: underline; }

  /* --- Invite cliquable sous les pieds --- */
  #hint {
    position: fixed;
    z-index: 4;
    transform: translate(-50%, 0);
    color: #000000;
    font-size: clamp(12px, 2.2vw, 16px);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    animation: blink 1.4s infinite;
  }
  #hint:hover { text-decoration: underline; }
  @keyframes blink { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.25; } }

  /* --- Smartphone 9:16 --- */
  @media (max-width: 600px) {
    .scope { width: 9vw; max-width: 44px; }
  }

  /* ==================== VUE RETRO GAMER ==================== */
  :root { --scopeW: 72px; }
  @media (max-width: 600px) { :root { --scopeW: min(9vw, 44px); } }

  /* Les deux silhouettes à gauche et à droite */
  .figure {
    position: fixed;
    bottom: 0;
    height: 92vh;
    width: 27vw;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 0;
    display: none;
  }
  #figL {
    left: calc(var(--scopeW) + 6px);
    background-image: url("../giant3.png");
    background-position: bottom left;
  }
  #figR {
    right: calc(var(--scopeW) + 6px);
    background-image: url("../giant2.png");
    background-position: bottom right;
  }

  /* ==================== VOILE DE PROTECTION DU HEADER ==================== */
  #header-veil {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(4vh + clamp(60px, 6.2vw, 100px));
    z-index: 3;
    pointer-events: none;
    display: none;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 70%,
      rgba(255, 255, 255, 0) 100%
    );
  }
  body.retro #header-veil,
  body.nocode #header-veil,
  body.music #header-veil,
  body.video #header-veil { display: block; }

  /* ==================== VUE RETRO : colonne centrale ==================== */
  #retro {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(46vw, 560px);
    z-index: 2;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1vh;
    box-sizing: border-box;
    padding-top: calc(4vh + clamp(62px, 6.2vw, 100px));
    padding-bottom: 6vh;
  }

  /* ==================== VUE NO CODE ==================== */
  #nocode {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(44vw - 2 * var(--scopeW) - 12px);
    max-width: 780px;
    z-index: 2;
    display: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6vh 1.6vw;
    align-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: calc(4vh + clamp(62px, 6.2vw, 100px)) 16px 4vh;
    scrollbar-width: thin;
    scrollbar-color: #ff0000 transparent;
    scrollbar-gutter: stable;
  }
  #nocode::-webkit-scrollbar { width: 6px; }
  #nocode::-webkit-scrollbar-thumb { background: #ff0000; border-radius: 3px; }
  #nocode::-webkit-scrollbar-track { background: transparent; }

  .game {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5vh;
    max-width: 100%;
    min-width: 0;
  }
  .game a { display: inline-block; line-height: 0; }
  .game img {
    max-width: 100%;
    max-height: 15.5vh;
    width: auto;
    height: auto;
    border: 2px solid #ff0000;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.35);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .game a:hover img {
    transform: scale(1.03);
    box-shadow: 0 0 22px rgba(255, 0, 0, 0.6);
  }
  .gdesc {
    color: #000000;
    font-size: clamp(10px, 1.3vw, 14px);
    line-height: 1.25;
    text-align: center;
    max-width: min(46ch, 100%);
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .gdesc strong {
    color: #ff0000;
    font-weight: 700;
  }
  /* Lien inline générique (aucun pour l'instant, gardé pour compatibilité) */
  .gdesc a {
    color: #ff0000;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
  }
  /* Lien « Manuel » : sur sa propre ligne, espacement constant quelle que soit la largeur */
  .gdesc .manual-link {
    display: block;
    width: fit-content;
    margin: 6px auto 0;
    padding: 2px 8px;
    white-space: nowrap;
  }

  /* Vues alternées : repositionner titre, liens et invite */
  body.retro #portrait, body.nocode #portrait, body.video #portrait, body.music #portrait { display: none; }
  body.retro .figure, body.nocode .figure, body.video .figure, body.music .figure { display: block; }
  body.retro #retro { display: flex; }
  body.nocode #nocode { display: grid; }
  body.video #video { display: grid; }
  body.music #music { display: grid; }
  body.retro #titre, body.nocode #titre, body.video #titre, body.music #titre { top: 4vh !important; left: 50% !important; }
  body.retro #liens, body.nocode #liens, body.video #liens, body.music #liens { top: calc(4vh + clamp(30px, 3.2vw, 58px)) !important; left: 50% !important; }
  body.retro #liens a[href="#retro-gamer"], body.nocode #liens a[href="#no-code"], body.video #liens a[href="#video"], body.music #liens a[href="#music"] { text-decoration: underline; }
  body.retro #hint, body.nocode #hint, body.video #hint, body.music #hint { top: auto !important; bottom: 1.5vh !important; left: 50% !important; right: auto !important; }

  /* Vue no code : vignettes compactes */
  #nocode .game img { max-height: 11vh; }
  #nocode .gdesc { font-size: clamp(9px, 1.0vw, 12px); max-width: 100%; }

  /* ==================== ÉCRAN INTERMÉDIAIRE : 1 COLONNE (≤ 1000px) ==================== */
  @media (max-width: 1000px) {
    #nocode {
      grid-template-columns: 1fr;
      gap: 2vh 0;
    }
    #nocode .game {
      width: 100%;
      max-width: 100%;
    }
    #nocode .game a {
      display: block;
      width: 100%;
      line-height: 0;
    }
    #nocode .game img {
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: none;
      display: block;
    }
    #nocode .gdesc {
      width: 100%;
      max-width: 100%;
      font-size: clamp(10px, 1.6vw, 14px);
    }
  }

  /* ==================== MOBILE (≤ 600px) ==================== */
  @media (max-width: 600px) {
    .figure { width: 13vw; }
    #retro { width: 52vw; padding-top: calc(4vh + 70px); padding-bottom: 8vh; }
    #nocode {
      width: calc(74vw - 2 * var(--scopeW) - 28px);
      max-width: none;
      padding: calc(4vh + 70px) 14px 8vh;
    }
    .game img { max-height: 13.5vh; }
    .gdesc { font-size: clamp(8px, 2.4vw, 11px); }
    #nocode .game img { max-height: none; }
    #nocode .gdesc { font-size: clamp(10px, 2.4vw, 12px); }
  }

  /* ==================== VUE VIDEO : mosaïque 2x2 au format 9:16 ==================== */
  #video {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: none;
    place-content: center;
    grid-template-columns: repeat(2, auto);
    gap: 1.8vh 2.5vw;
    padding: 0 calc(var(--scopeW) + 4vw);
  }
  .vcell {
    position: relative;
    height: min(36vh, 20vw);
    aspect-ratio: 9 / 16;
    background: #000;
    border: 2px solid #ff0000;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.35);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .vcell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }
  .vcell .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.9);
    pointer-events: none;
  }
  .vcell .play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-left: 1.1em solid #fff;
    border-top: 0.65em solid transparent;
    border-bottom: 0.65em solid transparent;
    font-size: clamp(9px, 2vh, 16px);
  }
  .vcell iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  #retour-mosaique {
    position: fixed;
    z-index: 5;
    transform: translateX(-50%);
    display: none;
    color: #ff0000;
    font-size: clamp(12px, 1.8vw, 17px);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
  }
  #retour-mosaique:hover { text-decoration: underline; }
  #retour-mosaique.visible { display: block; }

  #video.expanded .vcell:not(.active) { display: none; }
  #video.expanded { grid-template-columns: 1fr; justify-items: center; }
  .vcell.active {
    height: min(72vh, 28vw * 16 / 9);
    max-height: 72vh;
    cursor: default;
  }
  @media (max-width: 600px) {
    #video { gap: 1.6vh 2.5vw; padding: 0 calc(var(--scopeW) + 2vw); }
    .vcell { height: min(35.5vh, 31vw); }
    .vcell.active { height: min(62vh, 48vw * 16 / 9); max-height: 62vh; }
  }

  /* ==================== VUE MUSIC : mosaïque d'albums (3 colonnes) ==================== */
  #music {
    position: fixed;
    inset: 0;
    z-index: 2;
    display: none;
    place-content: center;
    grid-template-columns: repeat(3, auto);
    gap: 1.7vh 2.6vw;
    padding: calc(4vh + 60px) calc(var(--scopeW) + 4vw) 1vh;
  }
  #music.hidden { display: none !important; }
  .mcell {
    position: relative;
    width: min(16.5vh, 12.5vw);
    aspect-ratio: 1;
    border: 2px solid #ff0000;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.35);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .mcell:hover { transform: scale(1.04); box-shadow: 0 0 22px rgba(255, 0, 0, 0.6); }
  .mcell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
  .mcell span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.72);
    color: #ff0000;
    font-size: clamp(8px, 1.1vw, 12px);
    text-align: center;
    padding: 2px 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
  }

  #player {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: none;
    background: rgba(255, 255, 255, 0.92);
    align-items: flex-start;
    justify-content: center;
    gap: 3vw;
    padding: calc(4vh + clamp(52px, 5.5vw, 100px)) calc(var(--scopeW) + 4vw) 8vh;
    box-sizing: border-box;
    overflow: auto;
  }
  #player.open { display: flex; }
  #player-cover {
    width: min(34vh, 20vw);
    aspect-ratio: 1;
    border: 2px solid #ff0000;
    box-shadow: 0 0 18px rgba(255, 0, 0, 0.45);
    flex-shrink: 0;
    object-fit: cover;
  }
  #player-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(520px, 52vw);
    min-width: 0;
    max-height: 100%;
  }
  #player-album {
    color: #ff0000;
    font-size: clamp(15px, 2.4vw, 24px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
  }
  #player-album:hover { text-decoration: underline; }
  #bandcamp-player {
    display: block;
    width: 100%;
    height: min(58vh, 540px);
    min-height: 310px;
    margin-top: 8px;
    border: 2px solid #ff0000;
    background: #ffffff;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.24);
  }
  #retour-albums {
    position: fixed;
    z-index: 5;
    transform: translateX(-50%);
    display: none;
    color: #ff0000;
    font-size: clamp(12px, 1.8vw, 17px);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 2px rgba(255, 255, 255, 0.9);
  }
  #retour-albums:hover { text-decoration: underline; }
  #retour-albums.visible { display: block; }

  @media (max-width: 600px) {
    #music { grid-template-columns: repeat(3, auto); gap: 1.3vh 2vw; padding: calc(4vh + 54px) calc(var(--scopeW) + 2vw) 1vh; }
    .mcell { width: min(13.5vh, 20vw); }
    #player {
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 5px;
      padding: calc(4vh + 54px) calc(var(--scopeW) + 3vw) max(8vh, 58px);
    }
    #player-cover { width: min(16vh, 34vw); }
    #player-right { align-items: center; width: 100%; }
    #player-album { text-align: center; }
    #bandcamp-player {
      height: min(49vh, 460px);
      min-height: 270px;
      margin-top: 5px;
    }
  }

  @media (max-height: 600px) and (orientation: landscape) {
    #player {
      flex-direction: row;
      align-items: flex-start;
      gap: 2.5vw;
      padding-top: calc(4vh + 46px);
    }
    #player-cover { width: min(28vh, 25vw); }
    #player-right { align-items: flex-start; width: min(62vw, 520px); }
    #bandcamp-player { height: min(58vh, 360px); min-height: 210px; }
  }

  body.music.player-open #hint { top: auto !important; bottom: 0.5vh !important; left: 50% !important; right: auto !important; }

/* Portfolio additions: keep the portrait, red ink, pixel scores and side figures. */
:root { --ink: #ba0000; }
a { color: var(--ink); }
:focus-visible { outline: 3px solid #990000 !important; outline-offset: 4px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:30; background:white; padding:12px; transform:translateY(-160%); }
.skip-link:focus { transform:none; }
#home-intro { position:fixed; z-index:2; top:14px; left:50%; transform:translateX(-50%); width:calc(100% - 160px); text-align:center; font-size:11px; line-height:1.5; color:#666; pointer-events:none; }
#home-intro h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
body:not([data-view="home"]) #home-intro { display:none; }
#liens { max-width:calc(100vw - 24px); text-align:center; }
#liens a { color:#ff0000; }
#liens a[aria-current] { text-decoration:underline; text-underline-offset:4px; }
#nocode { padding-bottom:24px; }
#retro { overflow-y:auto; padding-bottom:24px; }
#retro,#nocode,#music,#video { bottom:50px; }
#retro,#nocode,#music,#video { scroll-padding-top:140px; scroll-padding-bottom:80px; }
.project-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 16px; width:100%; }
#nocode .game .project-actions a,.project-actions a { width:auto; display:inline-block; line-height:1.5; font-size:12px; font-weight:700; padding:7px 3px; color:var(--ink); text-underline-offset:3px; }
#nocode .game .manual-link { line-height:1.5; padding:7px 0; }
.gdesc,#nocode .gdesc { line-height:1.5; color:#202020; }
#motion-toggle { position:fixed; bottom:34px; left:92px; z-index:8; border:0; background:none; color:#a00000; font:10px monospace; padding:3px; cursor:pointer; text-shadow:0 0 6px #fff,0 0 2px #fff; }
#music a.mcell { text-decoration:none; }
.mcell img { height:auto; }
.mcell span { color:#fff; background:rgba(0,0,0,.85); font-size:12px; }
.gdesc strong,#hint,#retour-albums,#retour-mosaique { color:var(--ink); opacity:1; }
.video-fallback { display:none; }
.video-destination { position:absolute; bottom:4px; right:4px; padding:2px 4px; color:white; background:rgba(0,0,0,.8); font:10px/1.4 system-ui; }
body.video .video-fallback { display:block; position:fixed; top:125px; left:50%; transform:translateX(-50%); z-index:4; }
@media (max-width: 700px), (max-height: 500px) {
  #liens { max-width:calc(100vw - 24px); }
  #nocode,#retro { width:calc(100vw - 2 * var(--scopeW) - 12px); padding-left:12px; padding-right:12px; padding-top:135px; }
  #nocode { grid-template-columns:1fr; }
  #nocode .gdesc,.gdesc { font-size:13px; }
  .game { flex-shrink:0; }
  #retro .game img { max-height:22vh; width:auto; height:auto; }
  #home-intro { top:40px; width:calc(100% - 72px); font-size:10px; }
  #motion-toggle { left:12px; bottom:34px; }
  #music,#video { padding-top:135px; }
  #header-veil { height:140px; }
  #music { overflow-y:auto; place-content:start center; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:max-content; gap:16px 10px; padding:145px calc(var(--scopeW) + 14px) 70px; }
  #music .mcell { width:100%; min-height:0; height:auto; align-self:start; }
  #video { overflow-y:auto; align-content:start; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; justify-items:center; padding:145px calc(var(--scopeW) + 14px) 75px; gap:16px; }
  #video .vcell { width:100%; height:auto; aspect-ratio:9/16; }
  #video.expanded .vcell { width:min(240px,100%); height:calc(100dvh - 210px); min-height:160px; }
}
@media (min-aspect-ratio:3/2) and (min-width:700px) {
  #home-intro { top:36px; left:calc(var(--scopeW) + 20px); transform:none; width:min(240px,calc((100vw - 73vh)/2 - var(--scopeW) - 40px)); text-align:left; font-size:12px; }
}
@media (max-height:500px) and (min-width:700px) {
  #video { grid-template-columns:repeat(4,minmax(0,1fr)); padding:110px calc(var(--scopeW) + 12px) 16px; gap:12px; }
  #video .vcell { width:min(100%,calc((100dvh - 176px)*9/16)); }
  #video.expanded { grid-template-columns:1fr; }
  #video.expanded .vcell { width:min(240px,100%); }
  body.video #header-veil { height:105px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

#home-intro {
 top:8px; left:calc(var(--scopeW) + 12px); transform:none; text-align:left;
 width:min(240px,calc(50vw - var(--scopeW) - 24px)); font-size:10px; line-height:1.4;
}
#home-intro p { margin:0; }
@media(min-width:1000px) { #home-intro { font-size:12px; } }
@media(min-aspect-ratio:3/2) {
 #home-intro { width:min(240px,calc((100vw - 73vh)/2 - var(--scopeW) - 24px)); }
}
/* One reserved central column at every viewport size and in every media state. */
:root {
  --content-top:calc(4vh + 90px);
  --figure-width:min(clamp(13vw,calc(40vw - 162px),27vw),calc((100dvh - var(--content-top)) * .385));
  --safe-side:calc(var(--scopeW) + 6px + var(--figure-width) + 10px);
}
.figure { width:var(--figure-width); height:calc(100dvh - var(--content-top)); }
#header-veil { height:var(--content-top) !important; }
#nocode,#retro,#music,#video,#player {
  left:var(--safe-side); right:var(--safe-side); top:var(--content-top); bottom:58px;
  width:auto; max-width:none; transform:none; padding:4px 4px 24px;
  box-sizing:border-box; overflow-x:hidden; overflow-y:auto;
  scroll-padding:8px;
}
#nocode { grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; }
#retro .game { flex-shrink:0; width:100%; }
.game,.gdesc { min-width:0; overflow-wrap:anywhere; }
#retro .game img,#nocode .game img { max-width:100%; height:auto; object-fit:contain; }
#music { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:max-content; place-content:start center; gap:18px 12px; }
#music .mcell { width:100%; height:auto; min-width:0; align-self:start; }
#video,#video.expanded { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:max-content; place-content:start center; gap:16px; }
#video .vcell { width:100%; height:auto; aspect-ratio:9/16; }
#video.expanded { grid-template-columns:minmax(0,1fr); }
#video.expanded .vcell { width:min(100%,calc((100dvh - var(--content-top) - 110px)*9/16)); height:auto; min-height:0; }
#player { background:#fff; flex-direction:column; align-items:center; justify-content:flex-start; gap:12px; }
#player-cover { width:min(100%,18dvh,180px); height:auto; }
#player-right { width:100%; max-height:none; flex-shrink:0; align-items:center; }
#player-album { text-align:center; overflow-wrap:anywhere; }
#bandcamp-player { box-sizing:border-box; height:420px; min-height:270px; }
#retour-albums,#retour-mosaique { top:calc(var(--content-top) - 20px) !important; left:50% !important; font-size:12px; }
body:not([data-view="home"]) #motion-toggle,body:not([data-view="home"]) #hint {
 left:var(--safe-side) !important; right:var(--safe-side) !important; width:auto; transform:none !important; text-align:center;
}
body:not([data-view="home"]) #hint { font-size:clamp(10px,1.5vw,14px); white-space:normal; overflow-wrap:anywhere; }
body.player-open #hint { visibility:hidden; }
@media(max-width:1000px) {
 #nocode { grid-template-columns:minmax(0,1fr); }
 #music { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 8px; }
 #nocode .gdesc,.gdesc { font-size:13px; }
}
@media(max-width:600px) {
 #music,#video { grid-template-columns:minmax(0,1fr); }
 #retro .game img { width:100%; max-height:none; }
 #nocode,#retro,#music,#video,#player { padding-left:0; padding-right:0; }
}
@media(min-width:700px) and (max-height:600px) {
 #player { flex-direction:row; align-items:flex-start; }
 #player-right { flex:1; width:0; }
}

body.project-page > :not(#project-sheet):not(script):not(noscript){display:none!important}
#project-sheet[hidden]{display:none!important}