/* ───────────────────────────────────────────────────────── Émotivance · Design system — Tokens Ce fichier ne contient AUCUNE règle de style : uniquement des variables. Tout composant doit puiser ici — jamais de couleur ni de taille en dur ailleurs. ───────────────────────────────────────────────────────── */ :root { /* ═══ Palette de marque ═══════════════════════════════ Nuancier client : bleu pétrole, doré, ivoire. Une contrainte gouverne toute la répartition des rôles : le doré ne tient que **2,03:1** sur l'ivoire, et le blanc que **2,23:1** sur le doré. Il ne peut donc porter ni petit texte, ni libellé blanc. Le doré est un ORNEMENT — aplats, badges, halos, médaillons, filets. Le bleu porte l'action : blanc sur bleu tient 7,53:1. */ --primary-1: #315a67; /* bleu pétrole — accent, actions, titres */ --primary-2: #5a6b72; /* gris-bleu — texte courant */ --primary-3: #1e3a44; /* bleu nuit — aplats sombres */ --primary-4: #f6f4ef; /* ivoire — fond de page */ --primary-5: #f0ebe0; /* ivoire doré — dalles de section */ --gold: #c8a977; /* doré — ornement uniquement */ --white: #ffffff; /* Neutres — échelle zinc, pour les états techniques (désactivé, séparateurs d'interface, ombres portées). */ --default-50: #fafafa; --default-100: #f4f4f5; --default-200: #e4e4e7; --default-300: #d4d4d8; --default-400: #a1a1aa; --default-500: #71717a; --default-600: #52525b; --default-700: #3f3f46; --default-800: #27272a; --default-900: #18181b; --default-950: #09090b; /* ═══ Rôles sémantiques ═══════════════════════════════ Les composants référencent ceux-ci, pas la rampe brute. */ --bg: var(--primary-4); --surface: var(--primary-5); --surface-raised: var(--white); --ink: var(--primary-1); /* titres — 6,85:1 sur ivoire, 6,27:1 sur dalle */ --ink-2: var(--primary-2); /* texte — 5,05:1 sur ivoire, 4,62:1 sur dalle */ --ink-inverse: var(--white); /* Tertiaire — mentions, labels, légendes. Volontairement IDENTIQUE à --ink-2 : descendre plus clair tomberait sous 4,5:1. Le niveau tertiaire se distingue par la TAILLE et la CASSE (12px, majuscules, interlettrage), jamais par un gris plus pâle. */ --ink-3: var(--primary-2); --accent: var(--primary-1); /* actions, liens, états actifs */ --accent-ink: var(--white); /* texte posé sur l'accent — 7,53:1 */ /* Le bleu tient 6,85:1 sur ivoire : contrairement au bronze de l'ancienne palette, il n'a besoin d'aucune variante assombrie pour le petit texte. Le token reste défini pour que les composants existants n'aient pas à changer. */ --accent-text: var(--primary-1); /* Mise en avant à l'intérieur d'un titre. Le doré échouerait ici (2,03:1) : c'est une déclinaison claire du bleu qui joue ce rôle sur fond clair — 4,09:1, donc lisible même en petit texte. Sur un aplat sombre, l'emphase passe au doré (--ornament, 5,38:1 sur le bleu nuit). */ --accent-light: #4e7f8c; /* Voiles d'accent — badges, bordures douces, cartouches. */ --accent-05: color-mix(in srgb, var(--primary-1) 5%, transparent); --accent-10: color-mix(in srgb, var(--primary-1) 10%, transparent); --accent-15: color-mix(in srgb, var(--primary-1) 15%, transparent); --accent-40: color-mix(in srgb, var(--primary-1) 40%, transparent); --accent-60: color-mix(in srgb, var(--primary-1) 60%, transparent); --accent-75: color-mix(in srgb, var(--primary-1) 75%, transparent); /* ═══ Ornement ════════════════════════════════════════ Le doré, et lui seul. À n'employer que comme SURFACE ou tracé — jamais comme couleur de texte sur fond clair. Sur un aplat doré, le texte passe en --ink-on-gold. */ --ornament: var(--gold); --ornament-10: color-mix(in srgb, var(--gold) 10%, transparent); --ornament-20: color-mix(in srgb, var(--gold) 20%, transparent); --ornament-35: color-mix(in srgb, var(--gold) 35%, transparent); --ornament-60: color-mix(in srgb, var(--gold) 60%, transparent); /* Voile champagne POSÉ SUR un aplat bleu — pastilles d'icône, fonds de badge sur fond sombre. */ --ornament-on-ink: color-mix(in srgb, var(--gold) 22%, transparent); /* Doré assombri — seule déclinaison utilisable en TEXTE, et uniquement en grand corps : 3,27:1 sur ivoire. Réservé aux numéros géants et aux mots de bandeau. */ --ornament-deep: color-mix(in srgb, var(--gold) 70%, var(--primary-3)); /* ═══ RÈGLE DE DIRECTION ARTISTIQUE ═══════════════════ Le champagne ne sert JAMAIS de fond à un élément bleu. C'est toujours l'inverse : le champagne — texte, icône, contour — se pose SUR un aplat bleu. La mesure conforte la règle : champagne sur bleu nuit tient 5,38:1, donc lisible même en petit texte, tandis que du bleu sur champagne obligeait à surveiller chaque cas. `--slab-ink` est l'aplat qui accueille le champagne. */ --slab-ink: var(--primary-3); --on-slab-ink: var(--ornament); /* 5,38:1 */ /* Conservé pour les rares aplats champagne restants (aucun à ce jour) — ne pas en introduire de nouveaux. */ --ink-on-gold: var(--primary-3); /* Filets champagne. `--line-gold` est décoratif : il souligne une carte, un séparateur, un cadre. `--ornament-deep` sert dès que la bordure IDENTIFIE une commande — champ de saisie, bouton à contour — car elle doit alors tenir 3:1 (WCAG 1.4.11) ; il tient 3,27:1. */ --line-gold: color-mix(in srgb, var(--gold) 55%, transparent); --line-gold-soft: color-mix(in srgb, var(--gold) 30%, transparent); --line: var(--accent-15); --line-soft: var(--accent-05); --line-strong: color-mix(in srgb, var(--primary-1) 28%, transparent); --focus: var(--primary-1); /* États sémantiques — hors accent, réservés aux messages. */ --ok: #2f7a4e; --ok-bg: color-mix(in srgb, #2f7a4e 10%, transparent); --error: #b94842; --error-bg: color-mix(in srgb, #b94842 10%, transparent); /* ═══ Typographie ═════════════════════════════════════ Hedvig Letters Serif n'existe qu'en graisse 400 (axe optique 12–24 uniquement). La hiérarchie est donc portée par la TAILLE, jamais par une fausse graisse : ne jamais appliquer font-weight > 400 à --font-heading. */ --font-heading: "Hedvig Letters Serif", Georgia, "Times New Roman", serif; --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Échelle fluide (90 / 72 / 46 / 30 / 24 / 20 / 16 / 15 / 14 / 12). */ --t-display: clamp(42px, 1.9rem + 4.2vw, 90px); --t-h1: clamp(34px, 1.7rem + 3.2vw, 72px); --t-h2: clamp(28px, 1.5rem + 1.9vw, 46px); --t-h3: clamp(22px, 1.25rem + 0.7vw, 30px); --t-h4: clamp(19px, 1.1rem + 0.35vw, 24px); --t-h5: clamp(17px, 1rem + 0.2vw, 20px); --t-lg: 18px; --t-base: 16px; --t-md: 15px; --t-sm: 14px; --t-xs: 12px; --lh-display: 1.1; --lh-heading: 1.2; --lh-snug: 1.3; --lh-body: 1.6; --tracking-tight: -0.02em; --tracking-wide: 0.08em; /* badges, sur-titres */ /* ═══ Espacement ══════════════════════════════════════ */ --sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 16px; --sp-5: 20px; --sp-6: 30px; --sp-7: 40px; --sp-8: 50px; --sp-9: 60px; --sp-10: 80px; --section-y: clamp(100px, 5rem + 5vw, 200px); --section-y-sm: clamp(64px, 3.5rem + 3.5vw, 130px); /* Couture entre deux fonds : voir « frontière de dalle » (base.css). */ --section-y-seam: clamp(52px, 2.75rem + 2.4vw, 96px); /* ═══ Rayons ══════════════════════════════════════════ */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* Rayon du coin inversé de la barre de navigation et des encoches (voir .cutout dans components.css). */ --cut: 30px; /* ═══ Ombres ══════════════════════════════════════════ */ --shadow-sm: 0 1px 2px color-mix(in srgb, var(--primary-3) 6%, transparent); --shadow: 0 1px 2px color-mix(in srgb, var(--primary-3) 5%, transparent), 0 10px 30px -18px color-mix(in srgb, var(--primary-3) 35%, transparent); --shadow-lg: 0 2px 4px color-mix(in srgb, var(--primary-3) 5%, transparent), 0 24px 60px -30px color-mix(in srgb, var(--primary-3) 45%, transparent); /* ═══ Grille ══════════════════════════════════════════ */ --container: 1460px; --container-md: 1360px; --container-prose: 900px; --gutter: clamp(15px, 1rem + 1vw, 30px); /* ═══ Mouvement ═══════════════════════════════════════ */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur: 300ms; --dur-slow: 500ms; } /* ═════════════════════════════════════════════════════ Échelle téléphone — < 600px Le kit est dessiné pour un écran large : à 390px, un titre de 47px ne tient plus que trois mots par ligne et une respiration de section de 100px pousse la moitié du contenu sous la ligne de flottaison. Ce bloc ne redéfinit QUE des variables — aucune règle de style, donc aucun risque de régression au-dessus de 600px, où rien de tout ceci ne s'applique. Les minimums restent au-dessus des seuils de lisibilité : corps de texte ≥ 16px (pas de zoom auto iOS sur les champs), libellés ≥ 12px. ───────────────────────────────────────────────────── */ @media (max-width: 599px) { :root { /* Titres — mêmes rapports, un cran plus bas. Chaque pente est calculée pour REJOINDRE exactement la courbe de bureau à 600px, la borne du bloc : à la bascule, aucune marche. Le commentaire donne la valeur avant → après à 390px. */ --t-display: clamp(29px, 2.5px + 8.86vw, 56px); /* 47 → 37 */ --t-h1: clamp(27px, 8px + 6.38vw, 47px); /* 40 → 33 */ --t-h2: clamp(23px, 11.4px + 4vw, 36px); /* 31 → 27 */ --t-h3: clamp(19px, 15px + 1.52vw, 25px); /* 23 → 21 */ --t-h4: clamp(17px, 14.8px + 0.81vw, 20px); /* 19 → 18 */ --t-lg: 17px; /* chapôs */ /* Respirations — la dalle sépare déjà, le vide n'a plus besoin de faire tout le travail. */ --section-y: clamp(58px, 3rem + 3vw, 78px); /* 100 → 70 */ --section-y-sm: clamp(44px, 2.25rem + 2.4vw, 62px); --section-y-seam: clamp(38px, 2rem + 2vw, 54px); /* Écartements — seuls les trois plus grands descendent : en dessous, la densité est déjà juste. */ --sp-8: 38px; --sp-9: 46px; --sp-10: 56px; } }