/* ============================================================ base.css — Auréa Gems Investment Reset moderne + styles d'élément par défaut + accessibilité. Dépend de tokens.css (à charger AVANT ce fichier). ============================================================ */ /* ---------------------------------------------------------- RESET — box model & marges ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ---------------------------------------------------------- ROOT — anti-aliasing & scroll ---------------------------------------------------------- */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; text-size-adjust: 100%; } /* ---------------------------------------------------------- BODY — typographie & couleurs par défaut ---------------------------------------------------------- */ body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; background: var(--paper); color: var(--ink); } /* ---------------------------------------------------------- ÉLÉMENTS — défauts cohérents ---------------------------------------------------------- */ a { color: inherit; text-decoration: none; } img, svg, video, canvas, picture { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; } /* ---------------------------------------------------------- SÉLECTION ---------------------------------------------------------- */ ::selection { background: var(--champagne); color: var(--paper); } /* ---------------------------------------------------------- ACCESSIBILITÉ — masquage visuel (lecteurs d'écran) ---------------------------------------------------------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------- GARDE-FOU : pas de scroll horizontal global RÈGLE D'OR : ne JAMAIS mettre overflow-x: hidden sur html ou body. - overflow-x: hidden sur se propage au viewport dans Blink (Chrome/Edge) et bloque tous les scrolls JS (scrollIntoView, window.scrollTo) même si le scroll manuel fonctionne encore. - overflow-x: hidden sur crée un scroll container implicite qui détourne document.scrollingElement. Solution : overflow-x: clip sur body — clip le débordement sans créer de scroll container, n'affecte pas le viewport. ---------------------------------------------------------- */ body { overflow-x: clip; /* pas de scroll container, pas de propagation viewport */ } /* Empêche tout débordement horizontal en mobile (paragraphes + titres) */ p, dd, dt, li, h1, h2, h3, h4, h5, h6, blockquote, span { overflow-wrap: break-word; word-wrap: break-word; } img, svg, video { max-width: 100%; height: auto; } /* ---------------------------------------------------------- ACCESSIBILITÉ — focus clavier visible ---------------------------------------------------------- */ :focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 3px; border-radius: 1px; } /* ---------------------------------------------------------- ACCESSIBILITÉ — prefers-reduced-motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------- UTILITY — container centré ---------------------------------------------------------- */ .container { max-width: var(--container-max); margin: 0 auto; padding-inline: 32px; }