/* Fonts chargées via + dans le de chaque page (voir index.html). Ne pas remettre en @import : requête render-blocking chaînée. */
/* ─── Reset & Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* ── PREVIEW dark-mode adouci (2026-07-16) : noir pur -> gris très foncé,
texte off-white, surfaces relevées. Voir SITE_TODO « Piste UX ». ── */
--bg: #0e0e10; /* ex #000000 — plus de halation */
--bg-2: #141417; /* surface relevée 1 */
--bg-3: #1a1a1e; /* surface relevée 2 (cartes) */
--border: #242428; /* ex #1a1a1a */
--border-2: #303036; /* ex #2a2a2a */
--text-1: #f1f1f2; /* ex #ffffff — off-white, titres */
--text-2: #c6c6ca; /* ex #aaaaaa — corps, plus lisible */
--text-3: #8a8a94; /* ex #6a6a72 — relevé, contraste AA (5.2:1 sur --bg, tâche 9) */
--text-4: #42424a; /* ex #333333 — relevé */
/* ── Token sémantique (2026-07-19, tâche 9) : couleur de signal, extraite
des particules du canvas du hero. Recoupe partiellement (7 sur 16) le
code couleur des chips d'effets de la page Granulate, sans alignement
complet : ce chantier reste à faire, voir SITE_TODO. ── */
--a-signal: #4d9eff; /* liens, focus ring, état actif, 7.03 */
/* ── Typographie (2026-07-19) : Archivo en titres, Inter en corps.
Registre "sérigraphie de face avant de rack", pas "SaaS/IA". ── */
--font-display: 'Archivo', 'Helvetica Neue', sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
--fs-hero: clamp(2.5rem, 6vw, 4rem);
--fs-h1: 2rem;
--fs-h2: 1.5rem;
--fs-h3: 1.125rem;
--fs-body: 0.875rem;
--fs-sm: 0.8125rem;
--fs-label: 0.6875rem;
--lh-hero: 0.95; --lh-head: 1.15; --lh-body: 1.6; --lh-dense: 1.4;
--lh-prose: 1.8; /* prose de lecture continue (article, about, hero produit) */
--ls-hero: -0.03em; --ls-head: -0.01em;
--ls-body: 0; --ls-label: 0.12em;
/* ── Échelle d'espacement (2026-07-19, densité) : remplace les paddings
de section hérités du calibre "landing SaaS" (96px) par un rythme
plus dense, porté par des séparateurs 1px plutôt que par du vide. ── */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
/* ── Motion (2026-07-19, tâche 8) : registre "outil", pas "SaaS",
transitions d'état resserrées, ease-out à l'entrée. ── */
--dur-fast: 120ms;
--dur-base: 160ms;
--ease-out: cubic-bezier(0.2, 0, 0, 1);
}
html { scroll-behavior: smooth; }
/* Page transition */
body { animation: pageFadeIn 0.15s ease both; }
@keyframes pageFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
body.page-exit {
animation: pageFadeOut 0.15s ease forwards;
}
@keyframes pageFadeOut {
to { opacity: 0; }
}
/* Cursor glow on card */
.plugin-card-hero-visual {
--gx: 50%; --gy: 50%;
}
.plugin-card-hero-visual::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(300px circle at var(--gx) var(--gy), rgba(255,255,255,0.04), transparent 70%);
pointer-events: none;
z-index: 1;
opacity: 0;
transition: opacity 0.2s;
}
.plugin-card-hero-visual:hover::before { opacity: 1; }
body {
background: var(--bg);
color: var(--text-2);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ── Titres : Archivo 700 partout, socle générique. Les tailles restent
portées par les classes spécifiques (.hero-animated-content h1, .product-title, etc.) ;
cette règle ne fixe que famille/graisse/tracking pour tout h1/h2 qui
n'a pas de classe dédiée (ex. les h2 promus depuis d'anciens .section-label). ── */
h1, h2 {
font-family: var(--font-display);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 0.98;
text-transform: none;
}
/* Focus clavier visible (n'apparaît pas au clic souris grâce à :focus-visible).
Sélecteur universel (tâche 9) : couvre aussi bien les /