/* ============================================================ Triptik — Base : reset, typographie, primitives ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; /* compense l'en-tête sticky sur les ancres */ } /* ── Défilement adouci (Lenis) ───────────────────────────── Lenis pose la classe `lenis` sur une fois démarré, et la retire s'il est détruit. Tout ce qui suit est donc conditionné à son activation réelle : sans JS, en mouvement réduit, ou si le fichier ne charge pas, la page garde son défilement natif et ces règles ne s'appliquent jamais. `scroll-behavior: auto` est le point important : les deux mécanismes se disputeraient la page — le natif animerait vers l'ancre pendant que Lenis anime vers la même ancre à sa propre vitesse. Un seul des deux doit conduire. `height: auto` est ce que Lenis exige pour mesurer la page, et `overflow: clip` est ce qui fige réellement la page quand on appelle `lenis.stop()` (menu mobile ouvert). */ html.lenis, html.lenis body { height: auto; } html.lenis { scroll-behavior: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-optical-sizing: auto; font-size: var(--step-1); line-height: var(--lh-body); text-wrap: pretty; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } /* `hidden` doit toujours l'emporter sur un display: de composant. C'est ce qui garantit qu'un panneau ou un écran de confirmation ne s'affiche jamais nu si la feuille de style manque à l'appel. */ [hidden] { display: none !important; } img, svg, video { max-width: 100%; } img { height: auto; } ::selection { background: var(--ink); color: var(--bg); } /* Anneau de focus réservé au clavier. Safari le laisse traîner après un clic — et un `focus()` déclenché par du JS le rallume : d'où l'anneau doré qui restait après la fermeture du menu. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } /* ── Typographie ───────────────────────────────────────── */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: var(--lh-tight); } .h1 { font-size: var(--step-7); letter-spacing: -0.035em; line-height: 0.98; } .h1--sm { font-size: var(--step-7-sm); letter-spacing: -0.035em; line-height: 1.01; } .h2 { font-size: var(--step-6); } .h2--sm { font-size: var(--step-5); } .h3 { font-size: var(--step-4); line-height: 1.1; letter-spacing: -0.025em; } .h4 { font-size: var(--step-3); line-height: var(--lh-snug); letter-spacing: -0.02em; font-weight: 500; } /* Italique Instrument Serif — la respiration éditoriale de la marque */ .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .eyebrow { margin: 0; font-size: var(--step--1); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } .eyebrow--sm { font-size: var(--step--2); } .lead { font-size: var(--step-2); line-height: var(--lh-body); color: var(--muted); } .body { font-size: var(--step-1); line-height: var(--lh-body); color: var(--muted); } .body-sm { font-size: var(--step-0); line-height: 1.55; color: var(--muted); } .note { font-size: var(--step--1); line-height: 1.5; color: var(--faint); } .ink { color: var(--ink); } .accent { color: var(--accent); } .muted { color: var(--muted); } .dim { color: color-mix(in srgb, var(--ink) 55%, var(--bg)); } .strong { font-weight: 500; } .num { font-size: var(--step--1); letter-spacing: 0.18em; color: var(--accent); } .measure-46 { max-width: 46ch; } .measure-52 { max-width: 52ch; } /* ── Mise en page ──────────────────────────────────────── */ .container { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--pad-section); } .section--lg { padding-block: var(--pad-section-lg); } .section--sm { padding-block: var(--pad-section-sm); } .section--flush-top { padding-block-start: 0; } .section--flush-bottom { padding-block-end: 0; } .surface-dark { background: var(--bg); color: var(--ink); } .surface-2 { background: var(--surface-2); } .rule-top { border-top: 1px solid var(--line); } .rule-bottom { border-bottom: 1px solid var(--line); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; gap: var(--s-4); } .row-wrap{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-col); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-col-sm); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } /* Variantes de répartition pour les blocs à deux colonnes */ .grid-2--wide-start { grid-template-columns: 1.05fr 0.95fr; } .grid-2--wide-end { grid-template-columns: 0.9fr 1.1fr; } .grid-2--narrow-end { grid-template-columns: 1.1fr 0.9fr; } .grid-2--aside { grid-template-columns: 1fr auto; } .grid-2--intro { grid-template-columns: 0.85fr 1.15fr; } .items-end { align-items: end; } .items-start { align-items: start; } .items-center{ align-items: center; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } /* ── Révélation au scroll ────────────────────────────────── Pilotée par IntersectionObserver (assets/js/reveal.js) : le même comportement sur tous les navigateurs. Sans JS, le contenu reste visible — rien n'est masqué par défaut. */ [data-reveal] { opacity: 1; transform: none; } .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }