/* ========================================================================== EMSTYLAR — Design Tokens ========================================================================== Source unique de vérité pour les couleurs, la typographie, les échelles d'espacement, les ombres, les durées d'animation, etc. Ce fichier ne contient AUCUNE règle de mise en page ni de composant : uniquement des variables CSS (custom properties), consommées par base.css, layout.css, components.css, animations.css et print.css. ========================================================================== */ :root { /* -------------------------------------------------------------------- 1. Couleurs de marque -------------------------------------------------------------------- */ --color-black: #0a0a0a; /* Noir profond — fond principal, texte */ --color-white: #f8f5f0; /* Blanc cassé — fond clair, texte inversé */ --color-gold: #c9a24b; /* Doré — accent signature de la marque */ --color-gold-light: #e3c988; /* Doré éclairci — hover, dégradés, décor */ --color-gold-dark: #a3813a; /* Doré assombri — hover sur bouton doré */ --color-gold-ink: #7a5e26; /* Doré foncé — UNIQUEMENT pour du texte doré sur fond clair (contraste AA ≥ 4.5:1). --color-gold ne doit jamais servir de couleur de texte sur --color-white. */ /* Couleur secondaire — bordeaux profond, présent sur les supports de marque (fond du logo). Utilisée pour enrichir la palette sans la dénaturer. */ --color-secondary: #4a1420; --color-secondary-light: #6b2434; --color-secondary-dark: #300d15; /* -------------------------------------------------------------------- 2. Nuances de gris (neutres) -------------------------------------------------------------------- */ --gray-50: #fafaf9; --gray-100: #f2f1ef; --gray-200: #e5e3df; /* ≈ Gris clair de la charte */ --gray-300: #d3d0ca; --gray-400: #b3aea5; --gray-500: #918b80; --gray-600: #6f6a62; --gray-700: #504c46; --gray-800: #34312d; --gray-900: #1c1a17; /* -------------------------------------------------------------------- 3. Couleurs d'état Chaque état expose 3 tons : texte (contraste AA sur fond clair), fond (teinte pâle pour alertes/badges) et bordure. -------------------------------------------------------------------- */ --color-success: #2f6d4f; --color-success-bg: #e8f3ec; --color-success-border: #bcdcc9; --color-error: #9a2a2a; --color-error-bg: #f8eaea; --color-error-border: #e3bcbc; --color-warning: #8a5a00; --color-warning-bg: #faf1df; --color-warning-border: #edd6a3; --color-info: #2a5a8a; --color-info-bg: #e8f0f8; --color-info-border: #bcd4e9; /* -------------------------------------------------------------------- 4. Couleurs sémantiques (alias d'usage) -------------------------------------------------------------------- */ --color-text: var(--color-black); --color-text-muted: var(--gray-600); --color-text-inverse: var(--color-white); --color-bg: var(--color-white); --color-bg-alt: var(--gray-100); --color-bg-inverse: var(--color-black); --color-accent: var(--color-gold); --color-border: var(--gray-200); --color-border-strong: var(--gray-400); --color-focus-ring: var(--color-gold); /* -------------------------------------------------------------------- 5. Typographie -------------------------------------------------------------------- */ --font-heading: "Playfair Display", serif; --font-body: "Poppins", sans-serif; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Échelle fluide (mobile-first) : s'ajuste entre le viewport mobile et desktop */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-base: 1rem; /* 16px */ --fs-md: 1.125rem; /* 18px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: clamp(1.375rem, 1.3rem + 0.5vw, 1.625rem); /* ~22–26px */ --fs-2xl: clamp(1.625rem, 1.5rem + 1vw, 2.125rem); /* ~26–34px */ --fs-3xl: clamp(2rem, 1.75rem + 1.5vw, 2.75rem); /* ~32–44px */ --fs-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.75rem); /* ~40–60px */ --fs-5xl: clamp(3rem, 2.2rem + 4vw, 5rem); /* ~48–80px */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --lh-loose: 2; /* -------------------------------------------------------------------- 6. Espacements Échelle cohérente basée sur un pas de 4px, utilisée pour paddings, margins et gaps de grille afin de garantir un rythme vertical régulier. -------------------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2.5rem; /* 40px */ --space-xl: 4rem; /* 64px */ --space-2xl: 6rem; /* 96px */ --space-3xl: 8rem; /* 128px */ /* -------------------------------------------------------------------- 7. Rayons Esthétique volontairement sobre (peu arrondie) pour rester dans un registre haute couture plutôt que "ludique". -------------------------------------------------------------------- */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 16px; --radius-full: 999px; /* -------------------------------------------------------------------- 8. Bordures -------------------------------------------------------------------- */ --border-width-sm: 1px; --border-width-md: 2px; --border-width-lg: 3px; --border-style: solid; /* -------------------------------------------------------------------- 9. Ombres Ombres douces et discrètes, cohérentes avec un rendu luxueux et épuré. -------------------------------------------------------------------- */ --shadow-xs: 0 1px 3px rgba(10, 10, 10, 0.06); --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.08); --shadow-md: 0 8px 24px rgba(10, 10, 10, 0.10); --shadow-lg: 0 16px 40px rgba(10, 10, 10, 0.14); --shadow-gold: 0 8px 24px rgba(201, 162, 75, 0.25); --shadow-focus: 0 0 0 3px rgba(201, 162, 75, 0.35); /* -------------------------------------------------------------------- 10. Durées & courbes d'animation -------------------------------------------------------------------- */ --duration-fast: 150ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-slower: 900ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Raccourcis prêts à l'emploi pour les micro-interactions (hover, focus...) */ --transition-fast: var(--duration-fast) var(--ease-default); --transition-base: var(--duration-base) var(--ease-default); --transition-slow: var(--duration-slow) var(--ease-out); /* -------------------------------------------------------------------- 11. Z-index Échelle centralisée pour éviter les conflits d'empilement. -------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 50; --z-sticky: 80; --z-header: 100; --z-floating: 200; --z-overlay: 250; --z-modal: 300; --z-toast: 400; --z-tooltip: 500; /* -------------------------------------------------------------------- 12. Conteneur -------------------------------------------------------------------- */ --container-max: 1200px; --container-narrow: 720px; --container-wide: 1440px; --container-padding: var(--space-sm); /* -------------------------------------------------------------------- 12b. Dimensions structurelles Hauteur du header généreuse : le logo source (carré, fond plein, non recadré à ce stade) a besoin de place pour rester lisible. À réduire une fois le logo optimisé/recadré (Milestone Médias). -------------------------------------------------------------------- */ --header-height: 88px; } /* -------------------------------------------------------------------- 13. Repères de breakpoints (documentation) -------------------------------------------------------------------- Les media queries ne peuvent pas lire les custom properties CSS dans leur condition : ces valeurs sont donc une référence à recopier littéralement dans chaque @media (approche mobile-first, min-width). --bp-sm : 576px (petits mobiles → mobiles larges) --bp-md : 768px (tablettes) --bp-lg : 992px (petits écrans desktop) --bp-xl : 1200px (desktop) --bp-2xl : 1440px (grands écrans) -------------------------------------------------------------------- */ /* -------------------------------------------------------------------- 14. Mode sombre — préparé, non activé -------------------------------------------------------------------- Ce bloc redéfinit les tokens sémantiques pour un thème sombre. Il ne s'applique que si l'attribut data-theme="dark" est posé sur , ce qui n'est pas encore fait à ce stade du projet (aucun sélecteur de thème n'existe dans l'interface pour le moment). -------------------------------------------------------------------- */ :root[data-theme="dark"] { --color-text: var(--color-white); --color-text-muted: var(--gray-400); --color-text-inverse: var(--color-black); --color-bg: var(--color-black); --color-bg-alt: var(--gray-900); --color-bg-inverse: var(--color-white); --color-border: var(--gray-800); --color-border-strong: var(--gray-600); }