/* ========================================================================== BASE — reset, typographie globale, utilitaires, accessibilité, mouvement. ========================================================================== */ /* ---- Reset minimal ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; } html { /* Navigation par ancres fluide ; désactivée plus bas si reduced-motion */ scroll-behavior: smooth; scroll-padding-top: 5rem; /* compense le header fixe */ } body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } /* ---- Typographie ---- Fluence cognitive : deux familles seulement, rôles fixes. Fraunces = titres (émotion), Instrument Sans = lecture (clarté). */ h1, h2, h3 { font-family: var(--font-display); font-weight: 560; line-height: var(--leading-tight); letter-spacing: -0.015em; text-wrap: balance; } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p { max-width: 62ch; /* charge cognitive : lignes courtes = lecture facile */ } a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 0.2em; transition: text-decoration-color var(--motion-fast) var(--ease-out); } a:hover { text-decoration-color: var(--accent); } strong { font-weight: 600; } /* ---- Accessibilité ---- */ /* Focus visible net et cohérent partout (navigation clavier) */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: var(--space-3); top: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--paper); border-radius: var(--radius); transform: translateY(-300%); } .skip-link:focus { transform: none; } /* ---- Utilitaires de mise en page ---- */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-7); } .section__head { margin-bottom: var(--space-6); } .section__head h2 { margin-bottom: var(--space-3); } .section__lede { font-size: var(--text-lg); color: var(--ink-soft); max-width: 46ch; } /* Sur-titre de section : petit repère répété = familiarité (simple exposition) */ .eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); } .eyebrow--inverse { color: var(--accent-bright); } /* ---- Mouvement : reveal au scroll ---- Attention et mouvement : translation courte (16px) + fondu en 320 ms. Le mouvement signale « nouveau contenu ici », puis disparaît. */ /* L'état masqué n'est appliqué que si JS est actif (classe .js posée dans ) : sans JavaScript, tout le contenu reste visible. */ .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Respect de prefers-reduced-motion : tout mouvement non essentiel disparaît */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }