/* ========================================================================= By Zigzag — Styles de base (reset, typographie, layout) Les COULEURS ne sont pas définies ici : elles viennent des variables de thème (voir themes.css), pilotées par l'attribut [data-theme] sur . ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 88px; /* compense le header sticky lors des ancres */ } body { margin: 0; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.65; color: var(--c-text); background-color: var(--c-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* Sticky footer : le footer reste collé en bas même sur les pages courtes. Le
occupe tout l'espace disponible (public + espace client). */ .site { min-height: 100vh; display: flex; flex-direction: column; } .site > main { flex: 1 0 auto; } h1, h2, h3 { font-family: "Oswald", "Inter", sans-serif; font-weight: 600; line-height: 1.1; letter-spacing: 0.5px; margin: 0 0 0.5em; } p { margin: 0 0 1rem; } a { color: var(--c-accent); text-decoration: none; transition: color 0.18s ease; } a:hover { color: var(--c-accent-hover); } /* ---- Layout ---- */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; } .container--narrow { max-width: 640px; } .section { padding: 4.5rem 0; } .section__head { text-align: center; margin-bottom: 2.75rem; } .section__eyebrow { text-transform: uppercase; letter-spacing: 3px; font-size: 0.78rem; font-weight: 600; color: var(--c-accent); margin: 0 0 0.5rem; } .section__title { font-size: clamp(1.8rem, 4vw, 2.6rem); text-transform: uppercase; } .section__lead { color: var(--c-text-muted); max-width: 540px; margin: 0.5rem auto 0; } /* Accessibilité : focus visible cohérent */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* Contenu réservé aux lecteurs d'écran / SEO : retiré du flux visuel sans être masqué pour l'accessibilité (ex. h1 « By Zigzag » sous le logo hero). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }