/* ══════════════════════════════════════════════════════════════════════════════
   EMERGENCE LAB · V3 · BASE
   Reset · niveaux typographiques · focus · boutons et liens · tampons de statut ·
   nav · bande-frontière T1 · colophon.
   Ne contient AUCUNE valeur de couleur, de police, de taille ou d'espacement :
   tout vient de tokens.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── reset ─────────────────────────────────────── */
*, *::before, *::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h); -webkit-text-size-adjust:100%; text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--chalk); color:var(--ink); font:var(--t-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
a{color:inherit}
img, svg, canvas{display:block; max-width:100%}
img{height:auto}
p, figure, blockquote{margin:0}
h1, h2, h3, h4{margin:0; font-weight:inherit}
ol, ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.grid{display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); column-gap:var(--gutter)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ── focus : visible partout, jamais supprimé ─── */
:focus-visible{outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off)}
.skip{position:absolute; left:var(--pad); top:calc(-1 * var(--nav-h)); z-index:100; padding:var(--s-3) var(--s-4); background:var(--ink); color:var(--chalk); font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; text-decoration:none}
.skip:focus{top:var(--s-2)}

/* ── niveaux typographiques — un style par niveau, jamais redéfini localement ── */
.k{font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase}
.display{font:var(--t-display); letter-spacing:var(--ls-display); max-width:var(--ms-display); text-wrap:balance}
h2{font:var(--t-h2); letter-spacing:var(--ls-h2)}
.tag{font:var(--t-tag); font-variation-settings:var(--w-tag); letter-spacing:var(--ls-tag); max-width:var(--ms-tag); text-wrap:balance}
h3{font:var(--t-h3); font-variation-settings:var(--w-h3); letter-spacing:var(--ls-h3)}
h4{font:var(--t-h4); letter-spacing:var(--ls-h4); text-transform:var(--tt-h4)}
.lead{font:var(--t-lead); font-variation-settings:var(--w-lead); letter-spacing:var(--ls-lead); max-width:var(--ms-lead); color:var(--ink-2)}
.body{font:var(--t-body); max-width:var(--ms-body); color:var(--ink-2)}
.body.strong{color:var(--ink)}   /* V3-b : même style que le corps (un style par niveau), seule l'encre change */
.small{font:var(--t-small); color:var(--ink-2)}
.cap{font:var(--t-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--ink-2)}
.num{font:var(--t-num); font-variation-settings:var(--w-num)}

/* ── boutons et liens d'action ─────────────────── */
.btn{display:inline-flex; align-items:center; gap:var(--s-3); min-height:var(--tap); padding:var(--s-3) var(--s-4); background:var(--ink); color:var(--chalk); border:var(--rule-hair) solid var(--ink); text-decoration:none; font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; transition:background-color .2s, border-color .2s}
.btn:hover{background:var(--verm-t); border-color:var(--verm-t)}
.lnk{display:inline-flex; align-items:center; min-height:var(--tap); font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; text-decoration:underline; text-decoration-thickness:var(--rule-hair); text-underline-offset:var(--ul-off)}
.lnk:hover{color:var(--verm-t)}

/* ── tampons de statut ─────────────────────────── */
.stamp{display:inline-flex; align-items:center; flex:none; font:var(--t-stamp); letter-spacing:var(--ls-stamp); text-transform:uppercase; padding:var(--s-1) var(--s-2); border:var(--stamp-bw) solid currentColor; border-radius:var(--radius); transform:rotate(var(--stamp-tilt)); white-space:nowrap}
.st-live{color:var(--emerald-t)}
.st-proto{color:var(--mustard-t)}
.st-research{color:var(--lilac-t)}
.st-soon{color:var(--ink-2); border-style:dashed}
.st-open{color:var(--verm-t)}

/* ── couleur de salle (cellules de la bande T1, numéro de salle) ── */
.sc-verm{--sc:var(--verm); --sc-fg:var(--paper)}
.sc-cobalt{--sc:var(--cobalt); --sc-fg:var(--paper)}
.sc-mustard{--sc:var(--mustard); --sc-fg:var(--ink)}
.sc-emerald{--sc:var(--emerald); --sc-fg:var(--paper)}
.sc-lilac{--sc:var(--lilac); --sc-fg:var(--ink)}

/* ══ NAV ══════════════════════════════════════════ */
.nav{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:var(--rule-hair) solid var(--ink)}
.nav .wrap{max-width:none; display:flex; align-items:stretch; justify-content:space-between; gap:var(--s-4); height:var(--nav-h); position:relative}
.brand{display:flex; align-items:center; gap:var(--s-3); min-width:0; text-decoration:none; font:var(--t-brand); font-variation-settings:var(--w-brand); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap}
.brand img{width:var(--logo-nav); height:var(--logo-nav); image-rendering:pixelated; flex:none}
.brand .logo-cube{display:block; width:var(--logo-nav); height:var(--logo-nav); flex:none}   /* cube L2 vectoriel animé (logo-cube.js) */
.links{display:flex; align-items:stretch}
.links li{display:flex; border-left:var(--rule-hair) solid var(--rule)}
.links a, .links .lang{display:flex; align-items:center; padding:0 var(--s-4); text-decoration:none; font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; white-space:nowrap; background:none; border:0; cursor:pointer}
.links a:hover{color:var(--verm-t)}
.links .lang{background:var(--ink); color:var(--chalk); min-width:calc(var(--tap) + var(--s-4))}
.links .lang:hover{background:var(--verm-t)}
.brand:focus-visible, .links a:focus-visible, .links .lang:focus-visible, .menu-btn:focus-visible{outline-offset:calc(-2 * var(--focus-w))}
.links .lang:focus-visible{outline-color:var(--chalk)}
.menu-btn{display:none}
@media (max-width:1299px){   /* 05/10 : menu replié sous 1300 px — 6 liens depuis « Theory » ; mesuré (texte de la marque → 1er lien ≥ 24 px en EN et FR à partir de 1300 px). 04/10 : 1140 px avec 5 liens */
  .brand .logo-cube{width:calc(var(--logo-nav) - 8px); height:calc(var(--logo-nav) - 8px)}
  .links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; background:var(--chalk); border-bottom:var(--rule-hair) solid var(--ink)}
  .links.open{display:flex}
  .links li{border-left:0; border-top:var(--rule-hair) solid var(--rule)}
  .links a, .links .lang{width:100%; min-height:var(--tap); padding:var(--s-3) var(--pad)}
  .links .lang{justify-content:flex-start}
  .menu-btn{display:flex; align-items:center; gap:var(--s-2); flex:none; min-width:var(--tap); background:none; border:0; border-left:var(--rule-hair) solid var(--rule); padding:0 0 0 var(--s-4); font:var(--t-kicker); letter-spacing:var(--ls-kicker); text-transform:uppercase; cursor:pointer}
  .menu-btn i{display:block; width:var(--s-4); height:var(--rule-hair); background:currentColor; box-shadow:0 calc(-1 * var(--s-1)) 0 currentColor, 0 var(--s-1) 0 currentColor}
  .menu-btn[aria-expanded="true"] i{box-shadow:none}
}

/* ══ BANDE-FRONTIÈRE T1 (V3-b : filet vivant) ═══
   Deux rangées de cellules vivantes (--band-rows × --cell) dans la couleur de la salle,
   centrées sur l'étiquette ; la rangée est vidée autour de l'étiquette (fondu sur deux
   cellules). Pas de fond, pas de filet : la ligne de cellules EST le délimiteur.
   L'étiquette découpée porte le VRAI h2 de la salle.                         */
.band{position:relative; overflow:hidden; display:flex; align-items:center; scroll-margin-top:var(--nav-h)}
.band canvas{position:absolute; left:0; top:0; width:100%; pointer-events:none}
.band-frame{position:relative; padding-block:var(--s-2)}
.band-h{font:850 var(--fs-h2)/1.05 var(--f-sans); font-variation-settings:'wdth' 112; text-transform:uppercase; letter-spacing:.01em; position:relative; display:inline-flex; align-items:baseline; flex-wrap:nowrap; column-gap:var(--s-2); max-width:100%; color:var(--ink)}
.band-no{flex:none; display:inline-block; min-width:var(--band-no-min); padding:0 var(--band-no-pad); background:var(--sc); color:var(--sc-fg); text-align:center}
.band-dot{flex:none; color:var(--ink-2)}
.band-t{min-width:0}   /* titre long : il passe à la ligne À CÔTÉ du numéro (nowrap sur la rangée) */

/* ══ COLOPHON ═════════════════════════════════════ */
.colophon{border-top:var(--rule-room) solid var(--ink); background:var(--chalk-2)}
.colophon .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-2) var(--s-6); padding-block:var(--s-5)}
.colophon .who{display:flex; align-items:center; gap:var(--s-3); min-width:0}
.colophon .who img{width:var(--logo-foot); height:var(--logo-foot); image-rendering:pixelated; flex:none}
.colophon .who .logo-cube{display:block; width:var(--logo-foot); height:var(--logo-foot); flex:none}
.colophon nav ul{display:flex; flex-wrap:wrap; column-gap:var(--s-5)}
.colophon nav a{display:inline-flex; align-items:center; min-height:var(--tap); text-decoration:none}
.colophon nav a:hover{color:var(--verm-t); text-decoration:underline}

/* HUD de l'automate masqué dans le hero (décision du 04/10) */
.hud{display:none !important}

/* Burger : seulement les trois traits, le mot « Menu » est réservé aux lecteurs d'écran (04/10) */
.menu-btn > span{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.menu-btn{justify-content:center; padding-inline:var(--s-3)}
.menu-btn i{width:calc(var(--s-4) + 4px)}