/* ========================================================================= base.css — Design tokens, reset, typographie Toutes les couleurs/tailles/espacements du thème passent par ces variables. ========================================================================= */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-var-latin.woff2') format('woff2-variations'), url('../fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Fonds — thème sombre uniquement */ --c-bg: #0F1923; --c-bg-alt: #131E2B; --c-surface: #1A2634; --c-surface-hover: #22303F; --c-border: #2A3847; /* Accent cyan */ --c-accent: #00A8E8; --c-accent-hover: #0090C7; --c-accent-soft: rgba(0,168,232,0.12); /* Texte */ --c-text: #FFFFFF; --c-text-muted: #9BA9B8; --c-text-dim: #6B7A8B; /* Typographie */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-hero: clamp(2.5rem, 5vw, 4rem); --fs-h2: clamp(1.75rem, 3vw, 2.5rem); --fs-h3: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; /* Espacements */ --sp-xs: .5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; /* Divers */ --radius: 12px; --radius-sm: 8px; --container: 1200px; --shadow: 0 4px 24px rgba(0,0,0,.3); --transition: 200ms ease; } /* --- Reset minimal ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, picture, svg { max-width: 100%; display: block; } h1, h2, h3, h4, p, figure, blockquote { margin: 0; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } /* --- Typo utilitaires ----------------------------------------------------*/ .lt-h1 { font-size: var(--fs-hero); font-weight: 700; line-height: 1.1; } .lt-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.2; color: var(--c-text); } .lt-h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--c-text); } .lt-surtitre { display: block; font-size: var(--fs-small); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--sp-xs); } .lt-lead { font-size: 1.05rem; color: var(--c-text-muted); max-width: 640px; } .lt-text-muted { color: var(--c-text-muted); } .lt-text-dim { color: var(--c-text-dim); font-size: var(--fs-small); } .lt-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; } .lt-skip-link { position: absolute; left: var(--sp-sm); top: -100px; background: var(--c-accent); color: var(--c-bg); padding: var(--sp-xs) var(--sp-sm); border-radius: var(--radius-sm); z-index: 1000; transition: top var(--transition); } .lt-skip-link:focus { top: var(--sp-sm); } /* --- Switch de profil : rendu serveur + masquage CSS --------------------- Les deux versions (particulier/professionnel) sont présentes dans le DOM pour le SEO et le fallback sans JS ; seul l'attribut data-profil du détermine laquelle est visible. */ body[data-profil="particulier"] [data-profil="professionnel"] { display: none; } body[data-profil="professionnel"] [data-profil="particulier"] { display: none; } /* --- Accessibilité : mouvement réduit ------------------------------------*/ @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; } }