/** * base.css — MY PRESTIGE * * Responsabilité : Reset global, variables :root, typographie de base, * grain de fond, et toute règle applicable à tous les éléments. * * Aucune couleur en dur : tout passe par variables --nd, --n, --c, etc. */ /* ═══════════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES — Charte couleur + z-index nommés ═══════════════════════════════════════════════════════════ */ :root { /* ──── Nuances bleu marine (fonds, surfaces) ──── */ --nd: #12203F; /* Navy Very Dark (Dark Sapphire) — fond principal, cartes */ --n: #1a2d54; /* Navy — sections, hero overlay */ --nm: #223a6f; /* Navy Medium — about, contact */ --nl: #2a4884; /* Navy Light — hover surfaces */ --nb: #364a9f; /* Navy Blue — form focus */ /* ──── Or/Champagne (accents, texte premium) ──── */ --c: #E8D79B; /* Gold/Zombie — accent principal, CTA */ --cl: #F5F0C5; /* Champagne Light — hover accent */ --cd: #d4c074; /* Gold Dark — accents secondaires */ --cdk: #a8963d; /* Gold Dark Khaki — borders, séparateurs */ /* ──── Texte (nuances blanches) ──── */ --w: #F8F5EE; /* White — texte principal, haute lisibilité */ --wd: rgba(248, 245, 238, 0.55); /* White Dimmed — texte secondaire */ --wg: rgba(248, 245, 238, 0.07); /* White Ghost — séparateurs, borders légers */ /* ──── Z-index nommés (pour éviter conflits) ──── */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 400; --z-modal: 800; --z-loader: 9500; --z-grain: 997; --z-cursor: 9998; --z-cursor-ring: 9999; /* ──── Espacements réutilisables ──── */ --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 56px; --space-3xl: 80px; /* ──── Transitions standards ──── */ --t-fast: 0.2s; --t-normal: 0.3s; --t-slow: 0.5s; } /* ═══════════════════════════════════════════════════════════ RESET GLOBAL ═══════════════════════════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: linear-gradient(90deg, #12203F, #26326E); color: var(--w); font-family: 'Raleway', sans-serif; font-weight: 300; overflow-x: hidden; cursor: none; } img { display: block; max-width: 100%; height: auto; } /* ═══════════════════════════════════════════════════════════ GRAIN TEXTURE — Texture de luxe en fond fixe ═══════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); opacity: 0.4; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════ TYPOGRAPHIE GLOBALE ═══════════════════════════════════════════════════════════ */ /* Fonts Googl presentes : Cormorant Garamond (titres), Raleway (corps), Playfair Display (citations) */ /* @import obligatoire dans : voir index.html */ h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', serif; font-weight: 300; line-height: 1.1; } p { line-height: 1.6; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ═══════════════════════════════════════════════════════════ ACCESSIBILITÉ — Focus visible, outline ═══════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid var(--c); outline-offset: 2px; } /* Masquer outline pour souris, visible pour clavier */ :focus:not(:focus-visible) { outline: none; }