/* ======================================== RESET & BASE ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-normal); color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ======================================== TYPOGRAPHIE ======================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); font-weight: 800; line-height: var(--line-height-tight); color: inherit; /* hérite de la couleur du contexte (le donne la couleur sombre par défaut) */ margin-bottom: var(--space-md); } h1 { font-size: var(--font-size-4xl); margin-bottom: var(--space-lg); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } p { font-family: var(--font-primary); font-weight: 400; margin-bottom: var(--space-md); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } strong, b { font-weight: var(--font-weight-bold); } em, i { font-style: italic; } small { font-size: var(--font-size-sm); }