/* ══════════════════════════════════════════════════════════════════════════════
   EMERGENCE LAB · V3 · SALLES
   Mise en page du frontispice et des salles. Comme base.css : aucune valeur en dur,
   tout vient de tokens.css. Une zone de contenu = .room-body (padding-block --sp-room).
   V3-b : page condensée (--sp-* réduits ~45 %), un seul niveau de cadre, salle II en grille de cartes.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── rythme commun ─────────────────────────────── */
.room-body{padding-block:var(--sp-room); padding-bottom:calc(var(--sp-room) + var(--sp-section-gap))}
.room{scroll-margin-top:var(--nav-h)}

/* cadres : UN seul niveau (V3-b) — filet encre extérieur, aucun cadre intérieur */
.case{border:var(--rule-hair) solid var(--ink); background:var(--paper)}
.case-in{border:0}
.frame-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-4); padding:var(--s-2) var(--s-4); border-bottom:var(--rule-hair) solid var(--rule); color:var(--ink-2)}
.frame-top b{font-weight:600; color:var(--ink)}

/* ══ FRONTISPICE ══════════════════════════════════ */
/* ── header C2 : automate + cube + tapis de cartes (hero.js) ── */
.c2-stage{position:relative; height:var(--c2-h); overflow:hidden; background:var(--paper); border-bottom:var(--rule-hair) solid var(--ink)}
.c2-stage > canvas{position:absolute; inset:0; width:100%; height:100%}
#c2Cube{z-index:2}
.hud{position:absolute; left:var(--pad); top:var(--s-3); z-index:5; display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2); pointer-events:none; font:var(--t-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--ink-2)}
.hud > span{background:var(--paper); padding:var(--s-1) var(--s-2); border:var(--rule-hair) solid var(--rule)}
.hud b{font-weight:600; color:var(--ink)}
.hud-paused{display:none}
.c2-stage.paused .hud-paused{display:inline}
.c2-anchor{position:absolute; z-index:4; top:50%; transform:translateY(-50%); width:var(--c2-card-w); min-height:var(--c2-anchor-h); visibility:hidden}
.c2-track{position:absolute; inset:0; z-index:4; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black var(--c2-fade)); mask-image:linear-gradient(to right, transparent 0, black var(--c2-fade))}
.c2-card{position:absolute; left:0; top:var(--c2-card-top); width:var(--c2-card-w); display:flex; flex-direction:column; gap:var(--c2k-gap); padding:var(--c2k-pad); pointer-events:auto; cursor:pointer;
  background:var(--chalk); color:var(--ink); text-decoration:none; font-family:var(--f-sans); font-variation-settings:'wdth' 100; font-size:var(--c2k-base); line-height:1.5;
  border:var(--rule-hair) solid var(--ink); box-shadow:var(--c2k-sh) var(--c2k-sh) 0 var(--c); will-change:transform, opacity; transition:box-shadow .3s, filter .3s}
/* cartes déjà présentées : couleurs vives conservées (décision du 04/10), seule l'ombre se réduit */
.c2-card.old{box-shadow:var(--c2k-sh-old) var(--c2k-sh-old) 0 var(--c)}
.c2-card:focus-visible{outline-offset:var(--focus-off)}
.c2-card p, .c2-card ul{margin:0}
.c2-top{display:flex; justify-content:space-between; align-items:flex-start; gap:var(--c2k-top-gap); font:var(--c2k-top); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); font-variation-settings:'wdth' 100}
.c2-chip{display:inline-block; padding:var(--c2k-chip-pad); background:var(--c); color:var(--c2fg); font:var(--c2k-top); letter-spacing:var(--c2k-ls-chip); text-transform:uppercase; white-space:nowrap; font-variation-settings:'wdth' 100}
.c2-name{font:var(--c2k-name); font-variation-settings:var(--c2k-w-name); letter-spacing:var(--c2k-ls-name); text-transform:uppercase; color:var(--ink)}
.c2-line{font:var(--c2k-line); font-variation-settings:var(--c2k-w-line); color:var(--ink)}
.c2-sig{display:flex; flex-wrap:wrap; gap:var(--c2k-sig-gap); margin-top:auto; font:var(--c2k-sig); letter-spacing:.07em; text-transform:uppercase; color:var(--faint); font-variation-settings:'wdth' 100}
.c2-sig b{font-weight:600; color:var(--ink)}
.c2-sig i{font-style:normal; color:var(--c)}
.c2-vis{position:relative; height:var(--c2-vis-h); flex:none; border:var(--rule-hair) solid var(--rule); background:var(--paper)}
.c2-vis canvas{position:absolute; inset:0; width:100%; height:100%}
.plats{display:grid; grid-template-columns:1fr 1fr; gap:var(--c2k-plats-gap); font:var(--c2k-plats); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); font-variation-settings:'wdth' 100}
.plats li{display:flex; align-items:center; gap:var(--c2k-plats-i-gap); white-space:nowrap; min-width:0}
.plats i{width:var(--c2k-plats-i); height:var(--c2k-plats-i); flex:none; background:var(--pc)}
.plats i.proto{background:linear-gradient(90deg, var(--pc) 50%, transparent 50%); outline:var(--rule-hair) solid var(--pc); outline-offset:calc(-1 * var(--rule-hair))}
.plats i.res{background:transparent; outline:var(--rule-hair) solid var(--pc); outline-offset:calc(-1 * var(--rule-hair))}
.plats b{font-weight:500; color:var(--faint)}
.c2-title{position:absolute; left:0; top:var(--c2-card-top); background:color-mix(in srgb, var(--paper) 88%, transparent); box-shadow:0 0 0 var(--rule-hair) var(--rule); pointer-events:none; will-change:transform}
.c2-title canvas{width:100%; height:100%}

/* header compact (≤ 900 px, classe posée par hero.js) : grand cube vectoriel + titre, plus de tapis ni de barre */
.c2-stage.c2-compact #c2Cube, .c2-stage.c2-compact .c2-track, .c2-stage.c2-compact .c2-anchor, .c2-stage.c2-compact .a-prog{display:none}
.c2-stage > canvas.c2-big{inset:auto; z-index:3; pointer-events:none}
.c2-stage > .c2-title-big{z-index:4; will-change:auto}
/* bande des 6 projets sous le cube (compact) : une ligne d'emblèmes pixel qui défile (hero.js, makeTicker) */
.c2-tk{position:absolute; left:0; right:0; bottom:var(--c2c-tk-lift); z-index:5; height:var(--c2c-tk-h); overflow:hidden; background:transparent;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--c2c-tk-fade), #000 calc(100% - var(--c2c-tk-fade)), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 var(--c2c-tk-fade), #000 calc(100% - var(--c2c-tk-fade)), transparent)}
.c2-tk-track{display:flex; align-items:center; height:100%; width:max-content; will-change:transform}
.c2-tk-it{position:relative; display:flex; align-items:center; justify-content:center; height:100%; padding-inline:var(--c2c-tk-gap)}
.c2-tk-it canvas{display:block; flex:none; image-rendering:pixelated}
.c2-tk-it::after{content:''; position:absolute; left:var(--c2c-tk-gap); right:var(--c2c-tk-gap); bottom:var(--s-1); height:2px; background:var(--pc); transform:scaleX(0); transition:transform .2s}
.c2-tk-it:hover::after, .c2-tk-it:focus-visible::after{transform:scaleX(1)}
.c2-tk-it:focus-visible{outline:2px solid var(--ink); outline-offset:-3px}
/* mouvement réduit : ligne fixe, défilement au doigt */
.c2-tk.c2-tk-rm{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
.c2-tk.c2-tk-rm::-webkit-scrollbar{display:none}
.c2-tk.c2-tk-rm .c2-tk-it{scroll-snap-align:start}
.c2-tk.c2-tk-rm .c2-tk-track{will-change:auto; padding-inline:var(--c2c-tk-fade)}

/* barre des 6 projets (header) */
.a-prog{position:absolute; left:0; right:0; bottom:0; z-index:6; border-top:var(--rule-hair) solid var(--ink); background:var(--chalk)}
.a-prog-in{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.a-prog button{position:relative; display:flex; align-items:center; gap:var(--s-2); min-width:0; min-height:var(--tap); padding:var(--s-3) var(--s-3) var(--s-2); border:0; border-left:var(--rule-hair) solid var(--rule); background:none; cursor:pointer; font:var(--t-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--ink-2); text-align:left}
.a-prog button:last-child{border-right:var(--rule-hair) solid var(--rule)}
.a-prog button b{position:absolute; left:0; right:0; top:0; height:var(--s-1); background:var(--tc); transform:scaleX(0); transform-origin:left}
.a-prog .n{flex:none; padding:0 var(--s-1)}
.a-prog .t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a-prog button[aria-current="true"]{color:var(--ink); background:var(--paper)}
.a-prog button[aria-current="true"] .n{background:var(--tc); color:var(--fg)}
.a-prog button:focus-visible{outline-offset:calc(-2 * var(--focus-w))}

.front-head{display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s-2) var(--s-4); padding-bottom:var(--s-2); margin-bottom:var(--s-5); border-bottom:var(--rule-hair) solid var(--ink); color:var(--ink-2)}
.front .grid{row-gap:var(--s-4); align-items:end}
.front .grid{row-gap:var(--s-5)}
.front .display{grid-column:1 / -1; max-width:none}
/* devise sur deux lignes à coupure fixe (au-dessus de 760 px) ; en dessous, retour à la ligne naturel */
@media (min-width:761px){ .front .display .br-d{display:block} }
/* intro en deux colonnes (04/10) : recherche à gauche, projets à droite ; empilées sur mobile, recherche d'abord */
.front-col{grid-column:span 6; align-self:start; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--ink)}
.front-col-k{color:var(--ink-2)}
.front-col .body a{color:var(--ink); text-decoration-thickness:var(--rule-hair); white-space:nowrap}
.front-col .body a:hover{color:var(--verm-t)}

/* ══ OUVERTURE DE SALLE (accroche + chapeau) ══════ */
.room-head{row-gap:var(--s-2); align-items:baseline; margin-bottom:var(--sp-head)}
.room-head .tag{grid-column:1 / span 4}
.room-head .lead{grid-column:5 / span 8}

/* légende des statuts */
.key{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-5); width:fit-content; max-width:100%; margin-bottom:var(--s-4); padding:var(--s-2) var(--s-3); background:var(--paper); border:var(--rule-hair) solid var(--ink)}
.key > .k{color:var(--ink-2)}
.key .def{display:inline-flex; align-items:center; gap:var(--s-2)}

/* ══ SALLE I · LES INSTRUMENTS ════════════════════ */
.instr{row-gap:var(--s-5); padding:var(--s-5) var(--s-4)}
.instr-text{grid-column:1 / span 5; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3)}
.method{border-left:var(--rule-room) solid var(--verm); padding-left:var(--s-4); font:var(--t-h4); letter-spacing:var(--ls-h4); color:var(--ink)}
.instr .fig{grid-column:6 / span 7; align-self:start}
.mount img{width:100%; border:var(--rule-hair) solid var(--rule)}   /* capture posée à nu : pas de passe-partout */
.figcap{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-3); align-items:baseline; margin-top:var(--s-2)}
.figcap .k{color:var(--ink)}

.tray-head{padding:var(--s-2) var(--s-4); border-top:var(--rule-hair) solid var(--rule); border-bottom:var(--rule-hair) solid var(--rule); color:var(--ink-2)}
.tiles{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--rule-hair); background:var(--ink)}
.tile{display:flex; flex-direction:column; gap:var(--s-2); min-width:0; min-height:var(--tile-min-h); padding:var(--s-3) var(--s-3) var(--s-4); background:var(--tc); color:var(--fg)}
.tile .small{margin-top:auto; color:var(--fg)}
.tile-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--s-2)}
.tile .stamp{color:var(--fg)}
.mini{width:var(--tile-mini); height:var(--tile-mini); fill:var(--fg)}
/* couleur de projet / plateforme : --tc = fond, --fg = texte posé dessus (AA) */
.t-verm{--tc:var(--tile-verm); --fg:var(--paper)}  .t-cobalt{--tc:var(--cobalt); --fg:var(--paper)}  .t-mustard{--tc:var(--mustard); --fg:var(--ink)}
.t-emerald{--tc:var(--emerald-t); --fg:var(--paper)}  .t-lilac{--tc:var(--lilac); --fg:var(--ink)}  .t-ink{--tc:var(--ink); --fg:var(--paper)}

/* vitrine vide : Creativity Foundry */
.vacant{margin-top:var(--sp-obj); border:var(--rule-hair) dashed var(--ink)}
.vacant .frame-top{border-bottom-style:dashed}
.vacant-body{row-gap:var(--s-3); align-items:center; padding:var(--s-4)}
.vacant-body h3{grid-column:1 / span 4}
.vacant-body .body{grid-column:5 / span 6}
.vacant-body .stamp{grid-column:11 / span 2; justify-self:end}

 /* ══ SALLE II · PROJETS : grille de cartes (V3-b) ══
   3 colonnes desktop · 2 tablette · 1 mobile ; cartes de même hauteur (étirement de grille) ;
   capture ENTIÈRE (largeur fixée, hauteur naturelle) ; « le prochain projet » = 6e case (3×2 · 2×3 · 1 colonne). */
.projs{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); grid-auto-rows:1fr; gap:var(--gutter)}   /* rangées 1fr = toutes les cartes à la hauteur de la plus haute */
.proj{display:flex; min-width:0}
.proj > article{display:flex; flex-direction:column; width:100%; background:var(--paper); border:var(--rule-hair) solid var(--ink); border-top:var(--strip) solid var(--tc)}
.proj-img{display:block; border-bottom:var(--rule-hair) solid var(--ink)}
.proj-img img{width:100%; height:auto}
.proj-body{flex:1; display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-3) var(--s-4) var(--s-2)}
.proj-sig{color:var(--ink-2)}
.proj-sig b{font-weight:500; color:var(--ink)}
.proj-sig i{font-style:normal; color:var(--tc)}
.proj-head{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-3)}
.proj-line{color:var(--ink)}
.proj-link{margin-top:auto; align-self:flex-start}
.proj > article:hover .proj-link{color:var(--verm-t)}
.case-act{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4); margin:0}   /* I.1 : démo + fiche de la plateforme */
.proj-next > article{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); padding:var(--s-3) var(--s-4) var(--s-4); background:none; border:var(--rule-hair) dashed var(--ink)}   /* 05/10 : 5 projets → « le prochain projet » est la 6e case de la grille */
.proj-next-top{align-self:stretch; display:flex; justify-content:space-between; align-items:center; gap:var(--s-3); color:var(--ink-2)}
.proj-next-top b{font-weight:600; color:var(--ink)}
.proj-next .btn{margin-top:auto}

/* salle à venir (étape suivante) */
.todo-room{display:grid; place-items:center; min-height:calc(var(--cell) * 10); border:var(--rule-hair) dashed var(--ink-2); color:var(--ink-2)}

/* ══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width:1100px){
  .tiles{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .projs{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:900px){
  .a-prog .t{display:none}
  .a-prog button{justify-content:center; padding-inline:var(--s-1)}
  .front .display, .front-col, .room-head .tag, .room-head .lead,
  .instr-text, .instr .fig, .vacant-body h3, .vacant-body .body, .vacant-body .stamp{grid-column:1 / -1}
  .vacant-body .stamp{justify-self:start}
}
@media (max-width:720px){
  .c2-anchor{left:var(--pad); right:var(--pad); top:auto; bottom:calc(var(--tap) + var(--s-2)); transform:none; width:auto}
  .c2-card{top:auto; bottom:calc(var(--tap) + var(--s-2))}
  .hud > span:nth-child(4){display:none}
}
@media (max-width:560px){
  .projs{grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto}
  .tiles{grid-template-columns:repeat(2, minmax(0, 1fr))}   /* V3-b : 2 colonnes même sur mobile */
  .tile{min-height:0}
}
@media (max-width:640px){
  .instr{padding:var(--s-4) var(--s-3)}
  .frame-top, .tray-head{padding:var(--s-2) var(--s-3)}
  .vacant-body{padding:var(--s-3)}
  .proj-body{padding-inline:var(--s-3)}
}

/* Fonds alternés entre sections (essai du 04/10) : une salle sur deux reçoit une teinte légère de sa couleur */
.room:nth-of-type(even){background:color-mix(in srgb, var(--room-tint, var(--ink)) 7%, var(--chalk))}
.room:has(> .band.sc-verm){--room-tint:var(--verm)}
.room:has(> .band.sc-cobalt){--room-tint:var(--cobalt)}
.room:has(> .band.sc-mustard){--room-tint:var(--mustard)}
.room:has(> .band.sc-emerald){--room-tint:var(--emerald)}
.room:has(> .band.sc-lilac){--room-tint:var(--lilac)}

/* bande sous le header animé : beige Collider Lab (04/10) */
.front > .room-body{background:var(--cream); box-shadow:0 0 0 100vmax var(--cream); clip-path:inset(0 -100vmax)}

/* fiche de plateforme (platforms/*.html) : hors navigation précédent / suivant, un seul retour vers « Platforms »
   (ici plutôt que dans pages.css : deux classes pour passer devant .pager, chargé après) */
.pager.pager-solo{grid-template-columns:minmax(0, 1fr)}
.pager-solo .pager-home{grid-column:1; grid-row:auto}

/* 05/10 : les deux colonnes de l’intro ont la même hauteur ; « See the platforms » et « See the projects » alignés en bas */
.front-col{align-self:stretch}
.front-col > a:last-child, .front-col > .lnk:last-child{margin-top:auto}