/* ========================================================================== tokens.css — Variables de design VENTACTIV Source unique de vérité pour la charte. Toutes les pages y font référence. Aucune valeur brute dans les autres CSS : toujours passer par un token. ========================================================================== */ :root { /* --- 1. Couleurs ------------------------------------------------------- */ /* Fonds sombres */ --couleur-marine-profonde: #0B1E3F; --couleur-anthracite: #1C2028; /* Fonds clairs */ --couleur-creme: #FAF6EE; --couleur-blanc: #FFFFFF; /* Textes */ --couleur-texte: #3A4556; /* corps sur fond clair */ --couleur-texte-subtil: #8B94A3; /* méta, légendes, aides sur fond clair */ --couleur-texte-inverse: #FAF6EE; /* corps sur fond sombre */ --couleur-texte-subtil-inverse: #D9CFC0; /* méta, sous-titres sur fond sombre — WCAG AAA */ /* Accent cuivre chaud */ --couleur-cuivre: #B8935A; /* CTA, liens, traits décoratifs */ --couleur-cuivre-clair: #D4B88A; /* hover, variations */ --couleur-cuivre-texte: #9A7A47; /* texte courant sur crème (WCAG AA) */ /* Typogramme VENTACTIV — lettre A centrale bicolore (charnière sémantique : VENT+A = VENTE, A+CTIV = ACTIVE) Redéfinis localement dans les contextes sombres (menu, footer, section sombre) */ --typogramme-a-gauche: var(--couleur-marine-profonde); --typogramme-a-droite: var(--couleur-cuivre); /* Séparateurs et bordures */ --couleur-bordure: #E5E0D5; --couleur-bordure-sombre: #2A3040; /* sur fond marine */ /* États fonctionnels (rares, pour formulaires) */ --couleur-succes: #4F7A5A; --couleur-erreur: #A8443A; /* --- 2. Typographie ---------------------------------------------------- */ --police-titre: "Libre Caslon Text", Georgia, "Times New Roman", serif; --police-corps: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Graisses (utilisées avec var(--graisse-xxx)) */ --graisse-regular: 400; --graisse-medium: 500; --graisse-semibold: 600; --graisse-bold: 700; --graisse-heavy: 800; /* Échelle typographique — responsive via clamp(min, preferred, max) */ /* preferred = proportionnelle à la largeur du viewport */ /* Échelle revue en avril 2026 : +2 pt partout pour crédibilité premium */ --taille-display: clamp(3.375rem, 2.5rem + 3vw, 4.875rem); /* 54 → 78px */ --taille-h1: clamp(2.5rem, 2rem + 2vw, 3.5rem); /* 40 → 56px */ --taille-h2: clamp(2rem, 1.65rem + 1.5vw, 2.75rem); /* 32 → 44px */ --taille-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem); /* 22 → 28px */ --taille-h4: 1.25rem; /* 20px · inchangé */ --taille-corps-l: 1.125rem; /* 18px — chapô, intro (réduit de 20 → 18, registre éditorial) */ --taille-corps: 1rem; /* 16px — paragraphes courants (réduit de 18 → 16) */ --taille-corps-s: 0.9375rem; /* 15px — descriptifs, méta compacte (réduit de 16 → 15) */ --taille-meta: 0.875rem; /* 14px · inchangé */ --taille-eyebrow: 0.75rem; /* 12px — surtitres, inchangé */ /* Hauteurs de ligne */ --ligne-titre: 1.15; --ligne-titre-h3: 1.3; --ligne-corps: 1.65; --ligne-meta: 1.5; /* Lettres (letter-spacing) */ --tracking-titre: -0.01em; /* titres : resserré, plus noble */ --tracking-corps: 0; --tracking-eyebrow: 0.14em; /* surtitres en caps : aéré */ /* --- 3. Espacements (grille 8pt) -------------------------------------- */ --espace-0: 0; --espace-1: 0.5rem; /* 8px */ --espace-2: 1rem; /* 16px */ --espace-3: 1.5rem; /* 24px */ --espace-4: 2rem; /* 32px */ --espace-5: 2.5rem; /* 40px */ --espace-6: 3rem; /* 48px */ --espace-8: 4rem; /* 64px */ --espace-10: 5rem; /* 80px */ --espace-12: 6rem; /* 96px */ --espace-16: 8rem; /* 128px */ /* Padding section (vertical) — responsive, respiration ample */ --espace-section: clamp(4rem, 3rem + 5vw, 8rem); /* Échelle XXL — traitements éditoriaux (hero, signatures, chiffres) */ /* Borne basse agressive : tient sur iPhone SE 375 px en 2 lignes */ --taille-xxl-hero: clamp(2.5rem, 0.5rem + 9vw, 7rem); /* 40 → 112px · baseline typewriter */ --taille-xxl-titre: clamp(2rem, 1rem + 4vw, 6rem); /* 32 → 96px · signatures H2 */ --taille-xxl-chiffre: clamp(4rem, 2rem + 8vw, 10rem); /* 64 → 160px · compteurs */ /* Gouttières container (horizontal) */ --espace-gouttiere: clamp(1.25rem, 1rem + 1vw, 2rem); /* --- 4. Rayons --------------------------------------------------------- */ --rayon-sm: 6px; --rayon-md: 10px; --rayon-lg: 18px; --rayon-xl: 28px; --rayon-pill: 999px; /* --- 5. Ombres (élévations subtiles) ---------------------------------- */ /* Toutes teintées marine pour rester dans la palette */ --ombre-sm: 0 1px 2px rgba(11, 30, 63, 0.06), 0 1px 3px rgba(11, 30, 63, 0.04); --ombre-md: 0 4px 12px rgba(11, 30, 63, 0.07), 0 2px 6px rgba(11, 30, 63, 0.04); --ombre-lg: 0 12px 32px rgba(11, 30, 63, 0.10), 0 4px 12px rgba(11, 30, 63, 0.06); /* Ombre dédiée aux CTA au hover */ --ombre-cuivre: 0 6px 20px rgba(184, 147, 90, 0.25); /* --- 6. Transitions --------------------------------------------------- */ /* Courbe "premium" unique — inspirée cabinet haut de gamme */ --courbe-premium: cubic-bezier(0.22, 1, 0.36, 1); --courbe-douce: cubic-bezier(0.4, 0, 0.2, 1); --duree-rapide: 200ms; --duree-moyenne: 300ms; --duree-lente: 450ms; /* Transitions composées prêtes à l'emploi */ --transition-rapide: all var(--duree-rapide) var(--courbe-premium); --transition-moyenne: all var(--duree-moyenne) var(--courbe-premium); /* --- 7. Z-index ------------------------------------------------------- */ --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* --- 8. Dimensions ---------------------------------------------------- */ --largeur-container: 1200px; --largeur-contenu: 720px; /* texte long (articles) */ --largeur-max-lecture: 65ch; /* confort de lecture */ --hauteur-nav: 76px; /* --- 9. Breakpoints (référence — à répliquer dans @media) ------------- */ /* --bp-mobile: 480px → jusqu'à ce seuil : mobile --bp-tablette: 768px → au-delà : tablette --bp-desktop: 1024px → au-delà : desktop --bp-large: 1280px → au-delà : desktop large Utilisation : @media (min-width: 768px) { ... } (CSS ne permet pas de var() dans une media-query sans build step.) */ }