/* ══════════════════════════════════════════════════════════════════════════════ EMERGENCE LAB · V3 · TOKENS Le cabinet des hybrides. Une règle par niveau, définie ici et nulle part ailleurs. Aucun composant ne fixe de taille, de couleur, de police ou d'espacement « à la main » : il ne fait que consommer ces variables. 1 · TYPOGRAPHIE — un style par niveau (tailles : 390 px → 1440 px, interpolées) V3-b : échelle réduite et resserrée. Pas de base : 16 px × √1,2 (≈ 1,095) par demi-pas ; les titres montent par pas entiers de 1,2 (h4 → h3 : 1,2² · h3 → h2 : 1,2³ · h2 → display : 1,2²… voir tableau). ┌────────────┬──────────────┬──────────────────────────────┬──────────┬──────────┬───────────────────────────────────────────┐ │ Niveau │ Token │ Police · graisse · largeur │ Taille │ Interl. │ Casse · usage │ ├────────────┼──────────────┼──────────────────────────────┼──────────┼──────────┼───────────────────────────────────────────┤ │ Kicker │ --t-kicker │ Martian Mono 500 │ 11 → 12 │ 1,45 │ CAPITALES +.12em · numéros, nav, boutons │ │ Display h1 │ --t-display │ IM Fell English 400 │ 32 → 44 │ 1,06 │ phrase · la devise et le manifeste │ │ h2 │ --t-h2 │ IM Fell English 400 │ 26 → 33 │ 1,05 │ phrase · titre de salle, DANS la bande T1 │ │ h3 │ --t-h3 │ Archivo 750 · wdth 108 │ 21 → 23 │ 1,12 │ phrase · nom d'un objet │ │ Accroche │ --t-tag │ Archivo 700 · wdth 100 │ 19 → 21 │ 1,2 │ phrase · énoncé de salle (p, pas un titre)│ │ Chapeau │ --t-lead │ Archivo 500 · wdth 88 │ 17 → 19 │ 1,38 │ phrase · un seul par bloc d'ouverture │ │ h4 │ --t-h4 │ Archivo 700 │ 16 → 17,5│ 1,25 │ CAPITALES +.01em · nom dans une tuile │ │ Corps │ --t-body │ Archivo 400 │ 15 → 16 │ 1,55 │ 68 ch max │ │ Petit │ --t-small │ Archivo 400 │ 13,5→14,5│ 1,5 │ textes de tuile et de carte │ │ Légende │ --t-caption │ Martian Mono 400 │ 11 fixe │ 1,55 │ CAPITALES +.05em · légendes de figure │ │ Tampon │ --t-stamp │ Martian Mono 500 │ 11 fixe │ 1,40 │ CAPITALES +.14em · statuts (Live…) │ │ Chiffre │ --t-num │ Archivo 850 · wdth 62 │ 32 → 44 │ 0,92 │ les 4 chiffres d'inventaire (salle III) │ │ Citation │ --t-quote │ IM Fell English 400 │ 40 → 84 │ 1,02 │ phrase · UNE seule : l'appel du contact │ └────────────┴──────────────┴──────────────────────────────┴──────────┴──────────┴───────────────────────────────────────────┘ Desktop, en demi-pas de √1,2 depuis le corps (16) : petit −1 (14,6) · h4 +1 (17,5) · chapeau +2 (19,2) · accroche +3 (21) · h3 +4 (23) · h2 +8 (33,2) · display +11 (43,6). Règles : · aucun saut de niveau (h1 → h2 → h3 → h4) ; un h2 n'existe que dans une bande T1 ; · plafonds : h4 < h3 < h2 < display, à toutes les largeurs ; l'accroche reste sous le h3 ; · la serif IM Fell English a DEUX rôles et aucun autre : display · h2 (l'« espèce » A × B a disparu avec la planche de la salle II) — plus le niveau « Citation », hors plafond, réservé à la phrase d'appel de la salle VI (option C3 de la planche v3b-manifesto-contact, retenue le 04/10). · EXCEPTION ASSUMÉE : les cartes du tapis du header (--c2k-*) reprennent à l'identique le rendu C2 de cube-options.html — c'est l'identité du header, hors échelle. 2 · ESPACEMENTS — échelle unique (px) : 4 · 8 · 12 · 16 · 24 · 40 · 64 · 112 Rythme vertical (le même partout) : · --sp-room : espace entre une bande (ou le header) et le contenu, ET entre le contenu et la bande suivante. Toute zone de contenu = padding-block: var(--sp-room). · --sp-head : ouverture de salle (accroche + chapeau) → premier objet. · --sp-obj : entre deux objets d'une même salle (I.1 → I.2). 3 · GRILLE — 12 colonnes, gouttière 24 px, largeur max 1280 px, marge latérale 16 → 48 px. 4 · COULEURS — craie / papier / encre ; cinq couleurs de salle ; tons « -t » pour le texte coloré sur fond clair (contraste AA ≥ 4,5:1). ══════════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 4 · couleurs ─────────────────────────────── */ --cream:#fbf5ea; /* beige de Collider Lab */ --chalk:#f2eee5; --chalk-2:#e9e3d6; --paper:#f8f5ee; --ink:#1c1b20; --ink-2:#4a4851; --faint:#8b8794; /* faint : filets et ornements, jamais du texte */ --rule:rgba(28,27,32,.16); --rule-2:rgba(28,27,32,.07); --verm:#d4472c; --cobalt:#2c51ad; --mustard:#d6a12a; --emerald:#1f8659; --lilac:#9682c6; --verm-t:#b23a22; --mustard-t:#7f5e0e; --emerald-t:#17704a; --lilac-t:#65529e; /* texte coloré lisible */ --focus:var(--cobalt); --tile-verm:var(--verm-t); /* fond de tuile : vermillon assombri pour un texte clair AA */ /* ── 1 · familles ─────────────────────────────── */ --f-sans:'Archivo', 'Helvetica Neue', Arial, sans-serif; --f-mono:'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace; --f-serif:'IM Fell English', 'Iowan Old Style', Georgia, serif; /* ── 1 · tailles (390 → 1440) ─────────────────── */ --fs-kick:clamp(11px, 10.63px + .095vw, 12px); --fs-display:clamp(32px, 27.54px + 1.143vw, 44px); --fs-h2:clamp(26px, 23.4px + .667vw, 33px); --fs-tag:clamp(19px, 18.26px + .19vw, 21px); --fs-h3:clamp(21px, 20.26px + .19vw, 23px); --fs-h4:clamp(16px, 15.44px + .143vw, 17.5px); --fs-lead:clamp(17px, 16.26px + .19vw, 19px); --fs-body:clamp(15px, 14.63px + .095vw, 16px); --fs-small:clamp(13.5px, 13.13px + .095vw, 14.5px); --fs-cap:11px; --fs-stamp:11px; --fs-num:clamp(32px, 27.54px + 1.143vw, 44px); --fs-quote:clamp(40px, 23.7px + 4.19vw, 84px); /* ── 1 · niveaux (raccourci font) ─────────────── */ --t-kicker:500 var(--fs-kick)/1.45 var(--f-mono); --t-display:400 var(--fs-display)/1.06 var(--f-serif); --t-h2:400 var(--fs-h2)/1.05 var(--f-serif); --t-tag:700 var(--fs-tag)/1.2 var(--f-sans); --t-h3:750 var(--fs-h3)/1.12 var(--f-sans); --t-h4:700 var(--fs-h4)/1.25 var(--f-sans); --t-lead:500 var(--fs-lead)/1.38 var(--f-sans); --t-body:400 var(--fs-body)/1.55 var(--f-sans); --t-small:400 var(--fs-small)/1.5 var(--f-sans); --t-caption:400 var(--fs-cap)/1.55 var(--f-mono); --t-stamp:500 var(--fs-stamp)/1.4 var(--f-mono); --t-num:850 var(--fs-num)/.92 var(--f-sans); --t-quote:400 var(--fs-quote)/1.02 var(--f-serif); --fs-brand:clamp(19px, 14px + 1.5vw, 36px); --t-brand:850 var(--fs-brand)/1 var(--f-sans); /* logotype « Emergence Lab » (nav), pas un niveau de texte */ /* largeurs (font-variation-settings) et interlettrages par niveau */ --w-h3:'wdth' 108; --w-tag:'wdth' 100; --w-lead:'wdth' 88; --w-num:'wdth' 62; --w-brand:'wdth' 112; --ls-kicker:.12em; --ls-caption:.05em; --ls-stamp:.14em; --ls-display:-.005em; --ls-h2:-.01em; --ls-tag:-.012em; --ls-h3:-.015em; --ls-h4:.01em; --tt-h4:uppercase; --ls-lead:-.005em; /* mesures */ --ms-display:24ch; --ms-manifesto:30ch; --ms-quote:12ch; --ms-tag:28ch; --ms-lead:60ch; --ms-body:68ch; /* ── 2 · espacements ──────────────────────────── */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:40px; --s-7:64px; --s-8:112px; --sp-room:clamp(32px, 23.09px + 2.286vw, 56px); --sp-section-gap:clamp(32px, 26px + 1.6vw, 50px); /* 05/10 : ≈ deux lignes de plus entre la fin d'une section et la bande suivante */ /* 32 → 56 (V3 : 56 → 106) : bande ↔ contenu, partout */ --sp-head:clamp(20px, 17.03px + .762vw, 28px); /* ouverture de salle → premier objet (V3 : 32 → 48) */ --sp-obj:clamp(16px, 13.03px + .762vw, 24px); /* objet → objet (V3 : 24 → 40) */ /* ── 3 · grille ───────────────────────────────── */ --max:1280px; --pad:clamp(16px, 3.4vw, 48px); --cols:12; --gutter:var(--s-5); /* chrome */ --nav-h:84px; --rule-room:3px; /* filet « nouvelle salle » : bandes T1 et colophon, nulle part ailleurs */ --rule-hair:1px; --logo-nav:52px; --logo-foot:26px; /* grille native du logo L2 : pixels nets (×1, ×2) */ --tap:44px; /* cible tactile minimale */ --focus-w:2px; --focus-off:3px; --stamp-bw:1.5px; --stamp-tilt:-2deg; --card-tilt:calc(var(--stamp-tilt) / 2); /* carte de visite (salle VI) */ --radius:2px; --band-no-pad:.22em; --band-no-min:1.4em; --ul-off:.45em; --lh-link:1.9; /* lien d’action qui passe sur deux lignes */ --hole:22px; --tile-min-h:176px; --tile-mini:44px; /* tuiles des plateformes (salle I) */ /* bande T1 : taille de cellule de l'automate */ --cell:9px; /* V3-b : bande = filet vivant de 2 rangées de cellules */ --band-rows:3; /* emplacement du header animé C2 (même hauteur que la scène C2 de cube-options.html) */ --c2-h:clamp(520px, 66vh, 640px); /* scène C2 (valeur finale de la V2) ; le script l'agrandit si une carte ne tient pas */ --c2-card-w:300px; --c2-anchor-h:250px; --c2-card-top:64px; --c2-vis-h:150px; --c2-fade:64px; --strip:6px; /* bandeau de couleur en tête d'un cartouche */ --fw-light:300; /* cartes du tapis (header C2) : valeurs C2 de cube-options.html, à l'identique — exception à l'échelle */ --c2k-base:16px; --c2k-gap:10px; --c2k-pad:16px 18px 18px; --c2k-sh:6px; --c2k-sh-old:4px; --c2k-top:400 10px/1.5 var(--f-mono); --c2k-top-gap:10px; --c2k-chip-pad:3px 7px; --c2k-name:850 clamp(27.2px, 2.5vw, 40px)/.9 var(--f-sans); --c2k-line:400 15px/1.45 var(--f-sans); --c2k-w-name:'wdth' 118; --c2k-ls-name:-.03em; --c2k-ls-chip:.08em; --c2k-w-line:'wdth' 92; /* aussi : carte de visite (salle VI) */ --c2k-sig:400 9.5px/1.5 var(--f-mono); --c2k-sig-gap:5px; --c2k-plats:400 9px/1.5 var(--f-mono); --c2k-plats-gap:4px 10px; --c2k-plats-i:9px; --c2k-plats-i-gap:7px; /* header compact (≤ 900 px) : grand cube vectoriel + titre en cellules */ --c2c-cube-max:440px; --c2c-cube-w:.66; --c2c-title-cs-max:7; /* bande des projets sous le cube (compact) : hauteur, cellule des emblèmes, vitesse (px/s), fondu des bords */ --c2c-tk-h:52px; --c2c-tk-cs:3; --c2c-tk-speed:22; --c2c-tk-fade:40px; --c2c-tk-gap:22px; /* demi-espace entre deux logos */ --c2c-tk-lift:8px; /* marge sous la bande (≈ 2 cellules) */ } @media (max-width:720px){ :root{ --cell:8px; --c2-h:680px; --c2-fade:26px; } } /* header compact (≤ 900 px : téléphones, iPad portrait) : grand cube L2 + titre, sans tapis de cartes (hero.js) */ @media (max-width:900px){ :root{ --c2-h:calc(clamp(420px, 66vh, 680px) + var(--c2c-tk-h)); } /* + la bande des projets */ } /* téléphones : le cube est limité par la largeur, la bande prend la marge libre sous lui (pas de hauteur ajoutée) */ @media (max-width:720px){ :root{ --c2-h:clamp(420px, 66vh, 680px); } }