/* ============================================================ COV 360 — DESIGN TOKENS · SOURCE UNIQUE DE VÉRITÉ ------------------------------------------------------------ RÈGLE : aucune couleur, taille de texte, rayon, ombre ou dégradé ne s'écrit en dur dans le CSS du site. Tout passe par var(--…) défini ICI et uniquement ici. Modifier une valeur ici = tout le site se met à jour. Les états dérivés (hover, contours…) se construisent avec color-mix() à partir de ces couleurs, jamais un nouvel hex. Référence visuelle : styleguide.html Valeurs extraites du Figma (Style guide.jpg) — confirmées. ============================================================ */ :root { /* ---------- COULEURS ---------- */ --beige: #f8f4ed; /* fond principal du site */ --ink: #222222; /* texte principal */ --gold: #eda85d; /* accent or — points actifs, cercles, icônes */ --sky: #caf1ff; /* bleu clair — accents froids, fins de dégradés */ --teal-dark: #004f49; /* vert foncé — sections sombres, boutons, liens */ --rust: #a85d3e; /* terracotta — eyebrows / labels de section */ --white: #ffffff; /* Dérivées — toujours via color-mix(), jamais un nouvel hex */ --ink-muted: color-mix(in srgb, var(--ink) 72%, transparent); --ink-faint: color-mix(in srgb, var(--ink) 45%, transparent); --hairline: color-mix(in srgb, var(--ink) 12%, transparent); --hairline-on-dark: color-mix(in srgb, var(--white) 18%, transparent); --white-muted: color-mix(in srgb, var(--white) 78%, transparent); --white-faint: color-mix(in srgb, var(--white) 45%, transparent); --teal-hover: color-mix(in srgb, var(--teal-dark) 86%, black); --gold-hover: color-mix(in srgb, var(--gold) 85%, black); --shadow-ink: color-mix(in srgb, var(--teal-dark) 55%, black); /* ---------- DÉGRADÉS ---------- */ --gradient-linear-cool: linear-gradient( 160deg, var(--teal-dark) 0%, color-mix(in srgb, var(--teal-dark) 40%, var(--sky)) 55%, var(--sky) 100% ); --gradient-warm: linear-gradient( 180deg, var(--gold) 0%, color-mix(in srgb, var(--teal-dark) 65%, var(--gold)) 100% ); --gradient-btn: linear-gradient( 90deg, var(--teal-dark) 0%, color-mix(in srgb, var(--teal-dark) 40%, var(--sky)) 60%, var(--sky) 100% ); /* Version miroir pour l'animation de glissement au survol : à background-size 200%, la moitié gauche = --gradient-btn exactement */ --gradient-btn-motion: linear-gradient( 90deg, var(--teal-dark) 0%, color-mix(in srgb, var(--teal-dark) 40%, var(--sky)) 30%, var(--sky) 50%, color-mix(in srgb, var(--teal-dark) 40%, var(--sky)) 70%, var(--teal-dark) 100% ); /* ---------- TYPOGRAPHIE ---------- Police unique : Poppins. Graisses : 600 titres · 500 labels/boutons · 300 corps. Tailles fluides : min mobile ↔ max desktop (valeurs Figma). */ --font-sans: "Poppins", system-ui, sans-serif; --fw-semibold: 600; --fw-medium: 500; --fw-regular: 400; --fw-light: 300; --fs-display: clamp(5rem, 3.4rem + 5.5vw, 8rem); /* 80 → 128px — grands chiffres */ --fs-display-sm: clamp(3rem, 2.5rem + 2vw, 4rem); /* 48 → 64px — chiffres moyens */ --fs-h1: clamp(1.875rem, 1.4rem + 2.1vw, 2.5rem); /* 30 → 40px */ --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 1.875rem); /* 24 → 30px */ --fs-h3: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* 19 → 22px */ --fs-h4: 1rem; /* 16px */ --fs-h5: 0.875rem; /* 14px */ --fs-body-lg: 0.875rem; /* 14px */ --fs-body: 0.8125rem; /* 13px */ --fs-body-sm: 0.75rem; /* 12px */ --fs-eyebrow: 0.625rem; /* 10px */ --lh-title: 1.15; --lh-body: 1.6; --ls-title: -0.02em; --ls-eyebrow: 0.1em; /* Raccourcis font complets (graisse taille/interligne famille) */ --type-display: var(--fw-light) var(--fs-display) / 0.9 var(--font-sans); --type-display-sm: var(--fw-semibold) var(--fs-display-sm) / 0.9 var(--font-sans); --type-h1: var(--fw-semibold) var(--fs-h1) / var(--lh-title) var(--font-sans); --type-h2: var(--fw-semibold) var(--fs-h2) / 1.2 var(--font-sans); --type-h3: var(--fw-semibold) var(--fs-h3) / 1.3 var(--font-sans); --type-h4: var(--fw-semibold) var(--fs-h4) / 1.4 var(--font-sans); --type-h5: var(--fw-semibold) var(--fs-h5) / 1.4 var(--font-sans); --type-body-lg: var(--fw-light) var(--fs-body-lg) / var(--lh-body) var(--font-sans); --type-body: var(--fw-light) var(--fs-body) / var(--lh-body) var(--font-sans); --type-body-sm: var(--fw-light) var(--fs-body-sm) / 1.5 var(--font-sans); --type-eyebrow: var(--fw-medium) var(--fs-eyebrow) / 1.4 var(--font-sans); /* ---------- RAYONS ---------- */ --radius-none: 0; /* cards formules */ --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1.25rem; /* cards standard */ --radius-xl: 1.5rem; /* card verre du hero */ --radius-full: 999px; /* pills, points, icônes rondes */ /* ---------- OMBRES ---------- */ --shadow-card: 0 28px 56px -22px color-mix(in srgb, var(--shadow-ink) 50%, transparent); --shadow-card-hover: 0 38px 70px -22px color-mix(in srgb, var(--shadow-ink) 62%, transparent); --shadow-btn-drop: 0 10px 22px -8px color-mix(in srgb, var(--teal-dark) 30%, transparent); --shadow-btn-inset: inset 0 3px 8px color-mix(in srgb, var(--teal-dark) 25%, transparent); /* ---------- VERRE (glassmorphism) ---------- */ --glass-bg: linear-gradient( 135deg, color-mix(in srgb, var(--white) 9%, transparent) 0%, color-mix(in srgb, var(--white) 3%, transparent) 50%, color-mix(in srgb, var(--white) 1%, transparent) 100% ); --glass-border: color-mix(in srgb, var(--white) 16%, transparent); --blur-glass: blur(28px); --glass-highlight: inset 0 1px 0 color-mix(in srgb, var(--white) 18%, transparent); /* ---------- MOUVEMENT ---------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 0.25s; --dur-med: 0.4s; --dur-slow: 0.55s; } /* Sur mobile, les chiffres décoratifs redescendent d'un cran */ @media (max-width: 560px) { :root { --fs-display: clamp(3.5rem, 18vw, 5rem); /* 56 → 80px */ --fs-display-sm: clamp(2.25rem, 11vw, 3rem); /* 36 → 48px */ } }