/* ========================================================================== MAISON TOURNELLE · base.css Reset · Variables CSS · Typographie · Helpers Design system : "Wabi-Sabi Luxe" ========================================================================== */ /* -------------------------------------------------------------------------- 1. RESET -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } /* -------------------------------------------------------------------------- 2. VARIABLES CSS -------------------------------------------------------------------------- */ :root { /* Couleurs */ --bg: #0D0B09; --surface: #1A1612; --surface-2: #211D18; --border: rgba(196, 146, 58, 0.15); --border-hover: rgba(196, 146, 58, 0.6); --gold: #C4923A; --gold-light: #E8BA6A; /* Doré "encre" : réservé au PETIT texte doré, garanti contrasté (WCAG AA). En thème sombre il égale --gold (déjà très lisible sur fond foncé). */ --gold-ink: #C4923A; --earth: #8B6B4A; --text: #F0E8DC; --text-muted: #9A8C7A; /* éclairci : AA (≥4.5:1) sur surface & surface-2 */ --text-faint: #4A4035; /* décoratif uniquement (placeholders), pas de texte lisible */ /* Typographie */ --font-display: 'Cormorant Garamond', serif; --font-body: 'Lato', sans-serif; --font-mono: 'DM Mono', monospace; /* Géométrie & mouvement */ --radius: 2px; --transition: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Layout */ --max-width: 1320px; --gutter: clamp(24px, 5vw, 80px); --nav-height: 80px; /* Couleur de texte posée sur les images sombres (héros, push RSE). Constante : ne change PAS selon le thème, car l'overlay reste sombre. */ --on-overlay: #F4ECE0; } /* -------------------------------------------------------------------------- 2bis. THÈME CLAIR · "Papier & Or" Activé par (script anti-FOUC + bascule nav). On ne redéfinit que les couleurs : typographie et géométrie inchangées. -------------------------------------------------------------------------- */ :root[data-theme="light"] { --bg: #F4EEE4; --surface: #FBF7F0; --surface-2: #ECE3D4; --border: rgba(166, 117, 42, 0.22); --border-hover: rgba(166, 117, 42, 0.65); --gold: #A6752A; /* doré assombri pour contraster sur fond clair */ --gold-light: #C4923A; /* Doré "encre" plus profond : passe AA (≥4.5:1) même en petit corps sur les fonds clairs (--bg, --surface, --surface-2). */ --gold-ink: #855912; --earth: #8B6B4A; --text: #2A2017; --text-muted: #6E6051; --text-faint: #A2937C; } /* Métadonnée pour les navigateurs (formulaires natifs, barre d'adresse) */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* -------------------------------------------------------------------------- 3. TYPOGRAPHIE DE BASE -------------------------------------------------------------------------- */ body { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 1.9; color: var(--text); background-color: var(--bg); } h1, h2, h3 { font-family: var(--font-display); font-style: italic; font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; } h1 { /* Hero : clamp 56px -> 96px */ font-size: clamp(3.5rem, 9vw, 6rem); } h2 { /* Sections : clamp 40px -> 64px */ font-size: clamp(2.5rem, 6vw, 4rem); } h3 { font-size: 2.25rem; /* 36px */ } p { max-width: 65ch; } strong, b { font-weight: 400; } /* -------------------------------------------------------------------------- 4. HELPERS / UTILITAIRES -------------------------------------------------------------------------- */ /* Conteneur centré */ .container { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--gutter); } /* Espacement vertical de section */ .section { padding-block: clamp(72px, 12vw, 120px); } .section--tight { padding-block: clamp(56px, 8vw, 88px); } /* Eyebrow / label */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 0.6875rem; /* 11px */ letter-spacing: 0.25em; /* ~4px */ text-transform: uppercase; color: var(--gold-ink); margin-bottom: 16px; } /* Séparateur doré */ .separator { width: 60px; height: 1px; background-color: var(--gold); opacity: 0.2; border: none; margin: 0 auto; } .separator--left { margin: 0; } /* Texte centré */ .text-center { text-align: center; } /* Prix */ .price { font-family: var(--font-mono); color: var(--gold-ink); } /* Texte d'accroche secondaire */ .lead { color: var(--text-muted); font-size: 1.0625rem; max-width: 52ch; } /* Visuellement masqué (accessibilité) */ .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; } /* Lien d'évitement clavier */ .skip-link { position: absolute; left: 16px; top: -60px; z-index: 2000; background: var(--gold); color: var(--bg); padding: 10px 18px; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; transition: top 200ms var(--transition); } .skip-link:focus { top: 16px; } /* -------------------------------------------------------------------------- 5. FOCUS & ACCESSIBILITÉ -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* Respect des préférences de mouvement réduit */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 6. SCROLLBAR (masquée proprement) -------------------------------------------------------------------------- */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--gold) var(--bg); } /* Chrome / Safari / Edge */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background-color: var(--earth); border-radius: 0; } ::-webkit-scrollbar-thumb:hover { background-color: var(--gold); } /* Sélection de texte */ ::selection { background: var(--gold); color: var(--bg); }