/* ══════════════════════════════════════════════════════════════════════════════
   EMERGENCE LAB · V3 · SALLES (suite) — galerie G-D (salle II) et salles III à VI
   Même règle que base.css et rooms.css : AUCUNE valeur en dur, aucun nouveau niveau
   typographique. Tout vient de tokens.css ; les niveaux sont ceux de base.css
   (h3, h4, .k, .lead, .body, .small, .cap, .num, .display, .tag, .stamp, .btn, .lnk).
   Charger APRÈS rooms.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* jetons ajoutés (manquaient vraiment) */
:root{
  --scrim:color-mix(in srgb, var(--ink) 88%, transparent);   /* fond de la lightbox */
}

/* variante de bouton : contour (Spread out, Fermer) */
.btn.ghost{background:transparent; color:var(--ink)}
.btn.ghost:hover{color:var(--chalk)}

/* sous-section : filet encre + titre h3 (+ lien) — salle III */
.sub + .sub{margin-top:var(--sp-head)}
.room-head + .sub > .sub-head{padding-top:0; border-top:0}   /* le filet de l'ouverture suffit */
.sub-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:var(--s-2) var(--s-4); padding-top:var(--s-2); margin-bottom:var(--s-3); border-top:var(--rule-hair) solid var(--ink)}

/* ══ SALLE II · GALERIE G-D ═══════════════════════ */
.look{margin-top:var(--sp-head)}
.look-head{row-gap:var(--s-2); align-items:end; padding-top:var(--s-2); margin-bottom:var(--s-3); border-top:var(--rule-hair) solid var(--ink)}
.look-title{grid-column:1 / span 7; display:flex; flex-direction:column; gap:var(--s-1)}
.look-title .k{color:var(--ink-2)}
.look-head .body{grid-column:8 / span 5}
.look-ctrl{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); margin-bottom:var(--s-3)}
.look-hint{flex-basis:100%}
.look [hidden]{display:none !important}   /* .btn (inline-flex) écraserait l'attribut hidden */
.look-count{min-width:var(--s-7)}

/* table lumineuse : par défaut (sans JS ou reduced-motion) = planche fixe en grille */
.ltable{position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s-8) * 2 + var(--s-6))), 1fr)); gap:var(--s-5) var(--s-4); padding:var(--s-4);
  background-color:var(--chalk-2);   /* V3-b : plus de filet autour de la table — les écrans sont le seul cadre */
  background-image:linear-gradient(var(--rule-2) var(--rule-hair), transparent var(--rule-hair)), linear-gradient(90deg, var(--rule-2) var(--rule-hair), transparent var(--rule-hair));
  background-size:calc(var(--cell) * 2) calc(var(--cell) * 2);
}
.pcard{min-width:0}
.pw{background:var(--paper); border:var(--rule-hair) solid var(--ink); box-shadow:var(--s-1) var(--s-1) 0 var(--sc), 0 var(--s-3) var(--s-5) var(--rule); transition:box-shadow .2s}
.pc-verm{--sc:var(--verm)} .pc-cobalt{--sc:var(--cobalt)} .pc-mustard{--sc:var(--mustard)} .pc-emerald{--sc:var(--emerald)} .pc-lilac{--sc:var(--lilac)} .pc-ink{--sc:var(--ink)}

/* barre de navigateur */
.bar{display:flex; align-items:center; gap:var(--s-2); height:var(--s-5); padding:0 var(--s-1) 0 var(--s-2); border-bottom:var(--rule-hair) solid var(--ink); background:var(--chalk-2)}
.dots{display:flex; gap:var(--s-1); flex:none}
.dots i{display:block; width:var(--s-2); height:var(--s-2); border-radius:50%; border:var(--rule-hair) solid var(--ink)}
.dots i:first-child{background:var(--sc)}
.url{flex:1; min-width:0; font:var(--t-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center}
.pzoom{position:relative; flex:none; display:grid; place-items:center; width:var(--s-5); height:calc(var(--s-5) - var(--s-1)); padding:0; border:var(--rule-hair) solid var(--ink); background:var(--paper); color:var(--ink); font:var(--t-kicker); cursor:zoom-in}
.pzoom::after{content:""; position:absolute; inset:calc(-1 * var(--s-2))}   /* cible tactile élargie */
.pzoom:hover{background:var(--ink); color:var(--chalk)}

/* capture : largeur fixée, hauteur naturelle → jamais recadrée */
.pimg{display:block; color:inherit; text-decoration:none; -webkit-user-drag:none; -webkit-tap-highlight-color:transparent}
.pimg img{width:100%; height:auto; pointer-events:none; -webkit-user-drag:none; background:var(--paper)}
.pcap{display:block; padding:var(--s-2); border-top:var(--rule-hair) solid var(--ink); font:var(--t-caption); letter-spacing:var(--ls-caption); text-transform:uppercase; color:var(--ink-2)}
.pcap b{font-weight:600; color:var(--ink)}
.pimg:hover .pcap b{color:var(--verm-t)}
.pimg:focus-visible{outline:none}
.pcard:has(.pimg:focus-visible) .pw{outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off)}

/* pile vivante (JS) : free = fouillis déplaçable · stack = pile à balayer */
.look.is-live:not([data-mode="static"]) .ltable{display:block; padding:0; overflow:hidden}
.look.is-live:not([data-mode="static"]) .pcard{position:absolute; left:0; top:0; touch-action:none; user-select:none; -webkit-user-select:none; cursor:grab; will-change:transform}
.look.is-live[data-mode="stack"] .pcard{touch-action:pan-y}
.look.is-live .pcard.drag{cursor:grabbing}
.look.is-live .pcard.drag .pw{box-shadow:var(--s-2) var(--s-2) 0 var(--sc), 0 var(--s-5) var(--s-6) var(--rule)}

/* lightbox */
.lbox{width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:var(--s-5) var(--pad); border:0; background:transparent; color:var(--chalk)}
.lbox[open]{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-4)}
.lbox::backdrop{background:var(--scrim)}
.lbox figure{display:flex; flex-direction:column; align-items:center; gap:var(--s-3); max-width:100%; min-height:0}
.lbox img{width:auto; height:auto; max-width:100%; max-height:calc(100dvh - var(--s-8) * 2); border:var(--rule-hair) solid var(--chalk); background:var(--paper)}
.lbox figcaption{color:var(--chalk); text-align:center}
.lbox-act{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3)}
.lbox .btn{background:var(--chalk); color:var(--ink); border-color:var(--chalk)}
.lbox .btn.ghost{background:transparent; color:var(--chalk)}
.lbox .btn:hover{background:var(--verm-t); border-color:var(--verm-t); color:var(--chalk)}
.lbox :focus-visible{outline-color:var(--chalk)}
html:has(.lbox[open]){overflow:hidden}

/* ══ SALLE III · PUBLICATIONS ═════════════════════ */
.room-head.solo .lead{grid-column:1 / span 8}

/* registre ligné : 4 chiffres ; sous-grille → numéros et libellés alignés d'une colonne à l'autre */
.ledger{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border:var(--rule-hair) solid var(--ink); background:var(--paper)}
.ledger li{display:grid; grid-row:span 4; grid-template-rows:subgrid; row-gap:var(--s-2); min-width:0; padding:var(--s-3) var(--s-4) var(--s-4);
  background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--s-5) - var(--rule-hair)), var(--rule-2) calc(var(--s-5) - var(--rule-hair)) var(--s-5))}
.ledger li + li{border-left:var(--rule-hair) solid var(--rule)}
.ledger .k{color:var(--ink-2)}
.ledger .num{align-self:end; padding-top:var(--s-2)}
.ledger h4{align-self:start; padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--ink)}

/* notices bibliographiques */
.notice{display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); column-gap:var(--gutter); row-gap:var(--s-2); align-items:start; padding-block:var(--s-3); border-bottom:var(--rule-hair) solid var(--rule)}
.notice:first-child{padding-top:0}
.cote{grid-column:1 / span 2; display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2)}
.cote .venue{color:var(--ink-2)}
.notice-body{grid-column:3 / span 6; display:flex; flex-direction:column; gap:var(--s-2)}
.notice-body cite{font-style:normal}
/* titre du papier = niveau « accroche » (--t-tag) en encre ; description au niveau petit texte */
.notice-title{font:var(--t-tag); font-variation-settings:var(--w-tag); letter-spacing:var(--ls-tag); color:var(--ink); max-width:none; text-wrap:pretty}
.notice-desc{max-width:var(--ms-body)}
.notice-link{grid-column:9 / span 4; justify-self:end; display:block; text-align:right; overflow-wrap:anywhere; line-height:var(--lh-link)}

/* ══ SALLE IV · SERVICES : bons ═══════════════════ */
.orders{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--gutter)}
/* deux bons alignés ligne à ligne (sous-grille) : étiquette · nom · citation · corps · « Ce que vous recevez » · liste · « Pour » · bouton */
.orders{grid-template-rows:repeat(8, auto)}
.order{display:grid; grid-row:span 8; grid-template-rows:subgrid; row-gap:0; border:var(--rule-hair) solid var(--ink); background:var(--paper)}   /* un seul cadre */
.order .case-in, .order-body, .order .recv{display:contents}
.order-body > h3{padding:var(--s-4) var(--s-4) 0}
.order-body > .body{padding:var(--s-3) var(--s-4) 0}
.order-body > .body + .body{padding-bottom:var(--s-3)}
.order .recv > .k{margin-inline:var(--s-4); padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--rule); color:var(--ink-2)}   /* livrables (V1) : liste numérotée 01–04, niveau petit texte */
.order .recv ol{display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-2) var(--s-4) var(--s-3)}
.order .recv li{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:baseline; gap:var(--s-3)}
.order .recv li .k{color:var(--ink-2)}
.order .recv li .small{color:var(--ink)}
.order-for{display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:baseline; gap:var(--s-3); padding:var(--s-3) var(--s-4); border-top:var(--rule-hair) solid var(--rule)}
.order-for .k{color:var(--ink-2)}
.order-act{padding:var(--s-3) var(--s-4); border-top:var(--rule-hair) dashed var(--ink)}   /* talon détachable */

/* ══ SALLE V · MANIFESTO : principes en tuiles (M2) ══ */
.manifesto-q{margin:0 0 var(--sp-head); padding-left:var(--s-4); border-left:var(--rule-room) solid var(--lilac)}
.manifesto-q .display{max-width:var(--ms-manifesto)}
.principles-head{padding-inline:0; border:0; border-bottom:var(--rule-hair) solid var(--ink)}
.principles{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--rule-hair); background:var(--ink); border:var(--rule-hair) solid var(--ink)}
.principle{display:flex; flex-direction:column; gap:var(--s-3); min-width:0; min-height:var(--tile-min-h); padding:var(--s-3) var(--s-4) var(--s-4); background:var(--tc); color:var(--fg)}
.principle .small{margin-top:auto; color:var(--fg)}
/* signature : cube L2 animé dans une pastille papier, nom + bio, liens */
.bio{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:var(--s-3) var(--s-5); margin-top:var(--sp-obj); padding-top:var(--s-4); border-top:var(--rule-hair) solid var(--ink)}
.seal{display:inline-grid; place-items:center; flex:none; width:calc(var(--logo-nav) + var(--s-4)); height:calc(var(--logo-nav) + var(--s-4)); background:var(--paper); border:var(--rule-hair) solid var(--ink)}
.seal .logo-cube{width:var(--logo-nav); height:var(--logo-nav)}
.bio-txt{display:grid; gap:var(--s-1)}
.bio-links{display:flex; flex-wrap:wrap; column-gap:var(--s-5)}

/* ══ SALLE VI · CONTACT : carte de visite (C3) ════ */
/* niveau « Citation » (--t-quote, voir tokens.css) : une seule phrase sur la page */
.citation{font:var(--t-quote); letter-spacing:var(--ls-display); max-width:var(--ms-quote); text-wrap:balance}
.citation em{font-style:italic; color:var(--verm-t)}
.contact{row-gap:var(--s-6); align-items:center}
.contact-intro{grid-column:1 / span 7; display:flex; flex-direction:column; gap:var(--s-5)}
/* la carte reprend le langage des cartes du header (filet encre, ombre décalée, nom Archivo large : --c2k-*) */
.vcard{grid-column:8 / span 5; display:flex; flex-direction:column; gap:var(--c2k-gap); margin-right:var(--s-3); padding:var(--s-5); background:var(--chalk); color:var(--ink); border:var(--rule-hair) solid var(--ink); box-shadow:var(--s-3) var(--s-3) 0 var(--verm); transform:rotate(var(--card-tilt))}
.vcard-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--s-2); color:var(--ink-2)}
.vcard-chip{display:inline-block; padding:var(--c2k-chip-pad); background:var(--verm-t); color:var(--paper); font:var(--c2k-top); letter-spacing:var(--c2k-ls-chip); text-transform:uppercase}
.vcard-id{display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-3)}
.vcard-id .logo-cube{flex:none; width:calc(var(--logo-nav) * 1.25); height:calc(var(--logo-nav) * 1.25)}
.vcard-name{min-width:0; font:var(--c2k-name); font-variation-settings:var(--c2k-w-name); letter-spacing:var(--c2k-ls-name); text-transform:uppercase}
.vcard-line{font:var(--c2k-line); font-variation-settings:var(--c2k-w-line)}
.vcard-rows{margin:var(--s-2) 0 0; border-top:var(--rule-hair) solid var(--ink)}
.vcard-rows div{display:grid; grid-template-columns:calc(var(--s-8) - var(--s-4)) minmax(0, 1fr); align-items:center; gap:var(--s-3); min-height:var(--tap); border-bottom:var(--rule-hair) solid var(--rule)}
.vcard-rows dt{color:var(--ink-2)}
.vcard-rows dd{margin:0; min-width:0; color:var(--ink); overflow-wrap:anywhere}
.vcard-rows a{text-decoration:underline; text-decoration-thickness:var(--rule-hair); text-underline-offset:var(--ul-off)}
.vcard-rows a:hover{color:var(--verm-t)}
.vcard-btn{align-self:stretch; justify-content:space-between; margin-top:var(--s-3)}

/* ══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width:1100px){
  .ledger{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .ledger li:nth-child(3){border-left:0}
  .ledger li:nth-child(n+3){border-top:var(--rule-hair) solid var(--rule)}
}
@media (max-width:900px){
  .look-title, .look-head .body, .room-head.solo .lead, .contact-intro, .vcard,
  .cote, .notice-body, .notice-link{grid-column:1 / -1}
  .cote{flex-direction:row; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-4)}
  .notice-link{justify-self:start; text-align:left}
  .principles{grid-template-columns:minmax(0, 1fr)}
  .principle{min-height:0}
  .bio{grid-template-columns:auto minmax(0, 1fr)}
  .bio-links{grid-column:1 / -1}
  .vcard{transform:none; margin-right:var(--s-2); box-shadow:var(--s-2) var(--s-2) 0 var(--verm)}
}
@media (max-width:640px){
  .orders{grid-template-columns:minmax(0, 1fr)}   /* deux bons côte à côte jusqu'à 640 px (alignement ligne à ligne) */
  .order-body > h3, .order-body > .body, .order .recv ol{padding-inline:var(--s-3)}
  .order .recv > .k{margin-inline:var(--s-3)}
  .order-for, .order-act{padding-inline:var(--s-3)}
}
@media (prefers-reduced-motion:reduce){
  .pw{transition:none}
}


/* bloc « About the lab » sous la bio (05/10) */
.bio-txt .bio-k{margin-top:var(--s-4); color:var(--ink-2)}

.bio{align-items:start}
.bio .seal{align-self:start}
.bio-links{align-self:start}

/* portrait de Sebastian (05/10) : manifesto + carte de contact ; cube à côté de « About the lab » */
.portrait{display:block; width:100%; height:100%; object-fit:cover; border-radius:0}
.seal.seal-photo{padding:0; overflow:hidden; width:calc(var(--logo-nav) + var(--s-4)); height:calc(var(--logo-nav) + var(--s-4))}   /* 05/10 : même cadre que le cube */
.portrait-card{width:var(--logo-nav); height:var(--logo-nav); flex:none; border:var(--rule-hair) solid var(--ink)}
.bio-k{display:flex; align-items:center; gap:var(--s-2)}
.bio-k .bio-k-cube{width:28px; height:28px; flex:none}

/* 05/10 : portrait de la carte de contact = hauteur du nom (2 lignes) */
.vcard-id{align-items:center}
.vcard-id .portrait-card{font:var(--c2k-name); width:2lh; height:2lh; object-fit:cover}

/* 05/10 : ligne « About the lab » = même mise en page que la bio (cube dans le même cadre que la photo) */
.bio > .seal + .bio-about{grid-column:2}
.bio-about .bio-k{margin-top:0}