/* ══════════════════════════════════════════════════════════════════════════════
   EMERGENCE LAB · V3-b · PAGES SECONDAIRES
   Publications, projets, théorie, mentions légales.
   Même règle que base.css / rooms.css / rooms2.css : AUCUNE valeur en dur, aucun nouveau
   niveau typographique. Les niveaux sont ceux de base.css (h2 = .band-h, h3, h4, .k,
   .tag, .lead, .body, .small, .cap, .stamp, .btn, .lnk) ; ce fichier ne fait que la mise en page.
   Charger APRÈS rooms2.css.
   ══════════════════════════════════════════════════════════════════════════════ */

/* couleur de section « encre » (Play with History) */
.sc-ink{--sc:var(--ink); --sc-fg:var(--paper)}
.room:has(> .band.sc-ink){--room-tint:var(--ink)}

/* ══ EN-TÊTE DE PAGE : bande T1 (h1) + fond crème, comme le bandeau sous le header ══ */
.phead{padding-top:var(--s-4); background:var(--cream)}
.phead > .room-body{background:var(--cream); box-shadow:0 0 0 100vmax var(--cream); clip-path:inset(0 -100vmax)}
.crumb{justify-content:flex-start; column-gap:var(--s-2)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--verm-t); text-decoration:underline}
.crumb > span[aria-hidden]{color:var(--faint)}
.phead-grid{row-gap:var(--s-4); align-items:end}
.phead-main{grid-column:1 / span 8; display:flex; flex-direction:column; gap:var(--s-2)}
.phead-side{grid-column:9 / span 4; display:flex; flex-direction:column; align-items:flex-end; gap:var(--s-3)}
.phead-meta{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:var(--s-2) var(--s-3); color:var(--ink-2)}

/* « What emerges », mise en évidence légale : le filet prend la couleur de la page */
.pg .method{border-left-color:var(--sc)}

/* ══ PROJET · I · CE QUE C'EST ════════════════════ */
.about{row-gap:var(--s-5)}
.about-text{grid-column:1 / span 7; display:flex; flex-direction:column; gap:var(--s-3)}
.about-side{grid-column:9 / span 4; display:flex; flex-direction:column; gap:var(--s-4)}
.fact{display:flex; flex-direction:column; gap:var(--s-2); padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--ink)}
.fact-k{color:var(--ink-2)}
.about + .sub{margin-top:var(--sp-head)}
.about-text .sub{margin-top:var(--s-3)}

/* mots-clés */
.kw{display:flex; flex-wrap:wrap; gap:var(--s-1) var(--s-2)}
.kw li{padding:var(--s-1) var(--s-2); border:var(--rule-hair) solid var(--rule); background:var(--paper); color:var(--ink-2)}

/* plateformes (Collider Lab) */
.plist li{display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:var(--s-2); padding-block:var(--s-1); border-bottom:var(--rule-hair) solid var(--rule)}
.plist i{width:var(--s-3); height:var(--s-3); background:var(--tc)}
.plist .small{color:var(--ink)}

/* points clés */
.kp{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gutter)}
.kp li{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-2); padding-top:var(--s-3); border-top:var(--rule-room) solid var(--sc)}
.kp-n{padding:0 var(--s-1); background:var(--sc); color:var(--sc-fg)}

/* ══ PROJET · II · ÉCRANS (captures entières, lightbox) ══ */
.shots{display:grid; grid-template-columns:repeat(var(--cols), minmax(0, 1fr)); gap:var(--s-5) var(--gutter); align-items:start}
.shots-main{grid-column:1 / span 8; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-5) var(--s-4)}
.shots-main > .pcard:first-child{grid-column:1 / -1}
.shots-4 .shots-main > .pcard:first-child{grid-column:auto}
.shots-side{grid-column:9 / span 4}
.shots-4 .shots-main{grid-column:1 / span 9}
.shots-4 .shots-side{grid-column:10 / span 3}
.shots .pcard{margin:0}
.pimg{cursor:zoom-in}

/* appel à l'action */
.pcta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s-3) var(--s-5); margin-top:var(--sp-head); padding:var(--s-3) var(--s-4) var(--s-4); border:var(--rule-hair) dashed var(--ink)}
.pcta-top{flex-basis:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--s-2) var(--s-3); color:var(--ink-2)}
.pcta-top b{font-weight:600; color:var(--ink)}
.pcta-st{display:inline-flex; align-items:center; gap:var(--s-3)}
.pcta .tag{max-width:none}

/* précédent / accueil / suivant */
.pager{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--s-2) var(--gutter); margin-top:var(--sp-head); padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--ink)}
.pager a{display:flex; flex-direction:column; justify-content:center; gap:var(--s-1); min-height:var(--tap); text-decoration:none; color:var(--ink-2)}
.pager b{font:var(--t-h4); letter-spacing:var(--ls-h4); text-transform:var(--tt-h4); color:var(--ink); align-self:inherit; box-shadow:inset 0 calc(-1 * var(--s-1)) 0 var(--tc)}
.pager-prev{align-items:flex-start}
.pager-home{align-items:center; text-align:center; text-decoration:underline !important; text-decoration-thickness:var(--rule-hair) !important; text-underline-offset:var(--ul-off)}
.pager-next{align-items:flex-end; text-align:right}
.pager a:hover, .pager a:hover b{color:var(--verm-t)}

/* ══ PUBLICATIONS ═════════════════════════════════ */
.range{margin-bottom:var(--s-4); color:var(--ink-2)}
.notice-body .cap{color:var(--ink-2)}

/* ══ CRÉATIVITÉ COMPUTATIONNELLE ══════════════════ */
.disc{row-gap:var(--s-5); align-items:start}
.disc-text{grid-column:1 / span 7; display:flex; flex-direction:column; gap:var(--s-3)}
.quote{grid-column:8 / span 5; 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)}
.quote > .k{color:var(--ink-2)}
.quote blockquote{margin:0; padding-left:var(--s-4); border-left:var(--rule-room) solid var(--sc)}
.quote blockquote .lead{color:var(--ink)}
.quote-tr:empty{display:none}

.cards{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gutter)}
.card{display:flex; flex-direction:column; gap:var(--s-2); min-width:0; padding:var(--s-3) var(--s-4) var(--s-4); background:var(--paper); border:var(--rule-hair) solid var(--ink); border-top:var(--strip) solid var(--tc)}
.card-k{color:var(--ink-2)}
.card-foot{margin-top:auto; padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--rule)}
.card-open{grid-column:1 / -1; background:none; border:var(--rule-hair) dashed var(--ink)}
.card-open-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s-2) var(--s-3); color:var(--ink-2)}
.pos-text{grid-column:5 / span 8; display:flex; flex-direction:column; gap:var(--s-3)}
.after-cta{margin-top:var(--sp-head)}

/* ══ THÉORIE (05/10/2026 : reprend Boden et « Precisely at this intersection » de l'ancienne page CC) ══ */
.th-toc{margin-top:var(--s-4)}
.th-grid{row-gap:var(--s-5); align-items:start}
.th-side{grid-column:8 / span 5; display:flex; flex-direction:column; gap:var(--s-4)}
.room .th-grid .method{border-left-color:var(--room-tint, var(--sc))}
/* schéma : deux entrées → une rencontre (II, III) ; décoratif, le texte dit la même chose */
.th-schema{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--s-5) var(--s-2)}
.th-schema li{display:flex; align-items:center; min-width:0; padding:var(--s-2) var(--s-3); background:var(--paper); border:var(--rule-hair) dashed var(--ink)}
.th-schema .th-out{position:relative; grid-column:1 / -1; border-style:solid; border-top:var(--strip) solid var(--room-tint, var(--sc))}
.th-out::before, .th-out::after{content:""; position:absolute; bottom:100%; height:var(--s-5); border-left:var(--rule-hair) solid var(--ink)}
.th-out::before{left:25%}
.th-out::after{left:75%}
.th-ref{margin-top:var(--s-3)}
.th-ref .k{margin-right:var(--s-2); color:var(--ink-2)}
.th-kp li{border-top-color:var(--room-tint, var(--sc))}
.cards + .sub, .disc + .sub{margin-top:var(--sp-head)}
.th-next{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-6); margin-top:var(--sp-head); padding-top:var(--s-2); border-top:var(--rule-hair) solid var(--ink)}
.th-off{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-2) var(--s-3); min-height:var(--tap)}
.th-off .k{color:var(--ink-2)}

/* ══ MENTIONS LÉGALES ═════════════════════════════ */
.toc{grid-column:5 / span 8; display:flex; flex-direction:column; gap:var(--s-1)}
.toc-k{color:var(--ink-2)}
.toc ol{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, calc(var(--s-8) * 2 + var(--s-6))), 1fr)); column-gap:var(--gutter)}
.toc-n{margin-right:var(--s-2); color:var(--ink-2)}
.legal{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3)}
.legal h3:not(:first-child){margin-top:var(--s-4)}
.legal h3{scroll-margin-top:var(--nav-h)}
.bullets li{position:relative; padding-left:var(--s-5)}
.bullets li::before{content:"—"; position:absolute; left:0; color:var(--ink-2)}
.legal .method{max-width:var(--ms-body)}

/* ══ RESPONSIVE ═══════════════════════════════════ */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:900px){
  .phead-main, .phead-side, .about-text, .about-side, .disc-text, .quote, .pos-text, .toc, .th-side,
  .shots-main, .shots-side, .shots-4 .shots-main, .shots-4 .shots-side{grid-column:1 / -1}
  .phead-side, .phead-meta{align-items:flex-start; justify-content:flex-start}
  .shots-side{width:100%; max-width:calc(var(--s-8) * 3)}
}
@media (max-width:720px){
  .kp{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:640px){
  .cards{grid-template-columns:minmax(0, 1fr)}
  .card{padding-inline:var(--s-3)}
  .shots-main{grid-template-columns:minmax(0, 1fr)}
  .pcta{padding-inline:var(--s-3)}
  .pager{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .pager-home{grid-column:1 / -1; grid-row:2}
}

/* Theory : grand titre de page à la place de la bande « T · Theory » (05/10) */
.phead-big .room-body{padding-top:var(--sp-room)}
.page-title{margin:0 0 var(--s-5); font:850 clamp(30px, 21px + 2.1vw, 52px)/1 var(--f-sans); font-variation-settings:'wdth' 112; text-transform:uppercase; letter-spacing:.005em; color:var(--ink); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.35em}
.page-title a{color:inherit; text-decoration:none}
.page-title a:hover{text-decoration:underline; text-decoration-thickness:.06em; text-underline-offset:.12em}
.page-title .pt-sep{color:var(--lilac-t)}

/* 05/10 : pas d'espace supplémentaire entre l'en-tête de page et la première section */
.phead .room-body{padding-bottom:var(--sp-room)}

/* 05/10 : sur-titre au-dessus du grand titre de page (Theory, pages projet) */
.pt-kicker{margin:0 0 var(--s-3); color:var(--ink-2)}
.pt-kicker a{color:inherit}

/* 05/10 : en-tête de page, le chapeau occupe toute sa colonne (aligné à droite sur les autres blocs) */
.phead .room-head .lead{max-width:none}

/* 05/10 : logo pixellisé du projet dans l'en-tête de page */
.proj-emb{position:relative; width:clamp(150px, 12vw + 60px, 220px); aspect-ratio:1; border:var(--rule-hair) solid var(--ink); background:var(--paper); box-shadow:6px 6px 0 var(--sc, var(--ink))}
.proj-emb canvas{position:absolute; inset:0; width:100%; height:100%}

/* 05/10 : en-tête projet compact — texte à gauche, logo en haut à droite */
.phead-proj{align-items:start}
.phead-proj .phead-main{gap:var(--s-2)}
.phead-proj .page-title{margin-bottom:var(--s-2)}
.phead-proj .phead-act{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) var(--s-5); margin-top:var(--s-3)}
.phead-proj .phead-side{align-items:flex-end}
.phead-proj .proj-emb{width:clamp(120px, 8vw + 60px, 180px)}
@media (max-width:900px){ .phead-proj .phead-side{order:-1; align-items:flex-start} .phead-proj .proj-emb{width:110px} }