/* ============================================================ base.css — reset moderne, typographie, accessibilite, decor de fond. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-optical-sizing: auto; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-4)); -moz-tab-size: 4; tab-size: 4; } body { min-height: 100svh; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* ---- titres : Archivo Black (un seul poids 400, jamais d'italique natif) ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 400; line-height: var(--lh-tight); letter-spacing: -0.018em; color: var(--ink); text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } p { text-wrap: pretty; } p, ul, ol { max-width: var(--measure); } a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease-out); } a:hover { color: var(--brand-bright); } img, svg, video, iframe { display: block; max-width: 100%; } img, video { height: auto; } strong, b { font-weight: 700; color: var(--ink); } .mono, .when, kbd, time, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } ::selection { background: var(--brand-dim); color: var(--brand-bright); } /* ---- focus-visible : anneau bleu net (jamais glow seul) ---- */ :where(a, button, [role="button"], input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } /* ---- skip-link a11y ---- */ .skip-link { position: fixed; inset-block-start: -120%; inset-inline-start: var(--space-3); z-index: var(--z-modal); background: var(--surface-2); color: var(--ink); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--line-strong); transition: inset-block-start var(--t-fast) var(--ease-out); } .skip-link:focus-visible { inset-block-start: var(--space-3); } /* ---- progressive enhancement ---- La classe `no-js` est posee sur et RETIREE par common.js des que JS tourne (document.documentElement). Ces regles ne s'appliquent donc QUE dans le fallback sans JS. */ /* on revele le contenu masque (reveals animes ET grilles staggered) puisque l'IntersectionObserver ne tournera pas. Sans la regle `.stagger > *`, les cartes du listing d'archive (hub.mjs, classe .day-sessions.stagger), qui ne portent PAS .reveal, resteraient a opacity:0 = archive invisible. */ .no-js .reveal, .no-js .stagger > * { opacity: 1 !important; transform: none !important; } /* on cache les controles purement JS (inertes sans handler) plutot que de les laisser focusables et muets : bouton pause-anim, filtres + bascule de vue du hub, bouton Cmd+K. Le contenu lui-meme (listing, page seance) reste rendu cote serveur, donc visible sans JS. */ .no-js .motion-toggle, .no-js .toolbar, .no-js [data-cmdk-open] { display: none; } /* ============================================================ DECOR DE FOND — aurora, vignette, grain, progress bar. Tout en position:fixed, pointer-events:none, derriere le contenu (z-aurora). Compositor-only (transform/opacity). Coupe par reduced-motion. ============================================================ */ .bg-deco { position: fixed; inset: 0; z-index: var(--z-aurora); pointer-events: none; overflow: hidden; } .aurora { position: absolute; inset: -20%; filter: blur(80px); opacity: 0.5; mix-blend-mode: screen; } .aurora::before, .aurora::after, .aurora i { content: ""; position: absolute; display: block; border-radius: 50%; } .aurora::before { width: 52vw; height: 52vw; inset-block-start: -8vw; inset-inline-start: -6vw; background: radial-gradient(circle at center, var(--brand-glow), transparent 62%); animation: aurora-a 28s var(--ease-out) infinite alternate; } .aurora::after { width: 46vw; height: 46vw; inset-block-end: -12vw; inset-inline-end: -8vw; background: radial-gradient(circle at center, var(--violet-glow), transparent 64%); animation: aurora-b 34s var(--ease-out) infinite alternate; } .aurora i { width: 40vw; height: 40vw; inset-block-start: 30%; inset-inline-start: 40%; background: radial-gradient(circle at center, var(--cyan-glow), transparent 66%); animation: aurora-c 40s var(--ease-out) infinite alternate; } .vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 40%, var(--scrim) 100%); } .grain { position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay; /* grain self-hosted (img-src 'self') au lieu d'un data: URI : durcit la CSP (data: retire de img-src). */ background-image: url("/assets/noise.svg"); } /* ---- barre de progression de lecture ---- Animee en transform:scaleX (compositor-only, off-main-thread) plutot qu'en inline-size : le scroll est le geste le plus frequent, animer la largeur relayout/repaint a chaque frame. common.js ecrit bar.style.transform (ecriture CSSOM par-propriete = CSP-safe, pas unsafe-inline). */ .progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--z-modal); block-size: 2px; inline-size: 100%; background: linear-gradient(90deg, var(--brand), var(--violet)); box-shadow: 0 0 12px var(--brand-glow); transform: scaleX(0); transform-origin: left; transition: transform 0.1s linear; will-change: transform; } @keyframes aurora-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,4vw,0) scale(1.15); } } @keyframes aurora-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-5vw,-3vw,0) scale(1); } } @keyframes aurora-c { from { transform: translate3d(0,0,0) scale(0.9); } to { transform: translate3d(-4vw,4vw,0) scale(1.1); } } /* sous reduced-motion : aurora figee mais visible (pas d'anim) */ @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora i { animation: none; } } /* utilitaires */ .container { width: min(100% - 2 * var(--space-5), var(--container)); margin-inline: auto; } .container-narrow { width: min(100% - 2 * var(--space-5), var(--container-narrow)); margin-inline: auto; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .section { padding-block: clamp(var(--space-7), 6vw, var(--space-9)); } .text-center { text-align: center; } .text-center p, .text-center h1 { margin-inline: auto; }