/* ═══════════════════════════════════════════════════════════════════ TOKENS — source unique de vérité du design system Franck Kessié — Site Officiel Ne jamais écrire une couleur, une taille ou une durée en dur dans une page. Tout part d'ici. Une valeur changée ici change le site. SOMMAIRE 01. Couleurs 02. Typographie — famille, graisses, échelle 03. Typographie — tracking, interlignes 04. Espacements 05. Layout — largeurs, hauteurs, rayons 06. Bordures & ombres 07. Mouvement — durées, courbes 08. Profondeur — z-index ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 01. COULEURS ─────────────────────────────────────────────── Noms sémantiques : décrivent le rôle, pas la teinte. */ /* Fonds */ --c-bg: #ffffff; /* fond principal de page */ --c-bg-soft: #f5f5f5; /* sections alternées, cartes */ --c-bg-invert: #111111; /* blocs sombres, footer */ /* Textes */ --c-text: #111111; /* texte principal */ --c-text-soft: rgba(0,0,0,0.62); /* texte secondaire */ --c-text-muted: rgba(0,0,0,0.42); /* labels, métadonnées */ --c-text-faint: rgba(0,0,0,0.22); /* décor, séparateurs */ --c-text-invert: #f2ede4; /* texte sur fond sombre */ /* Accents — identité Côte d'Ivoire */ --c-accent: #3d5a3e; /* vert */ --c-accent-warm: #8b2e2e; /* rouge/terre */ /* Lignes */ --c-border: rgba(0,0,0,0.08); --c-border-strong: rgba(0,0,0,0.16); --c-border-invert: rgba(255,255,255,0.12); /* ── ALIAS LEGACY ──────────────────────────────────────────────── Conservés pour le CSS déjà en place. Utiliser --c-* pour tout nouveau code ; ces alias disparaîtront à terme. */ --dark: var(--c-bg); --light: var(--c-text); --mid: var(--c-bg-soft); --muted: var(--c-text-muted); --border: var(--c-border); --green: var(--c-accent); --red: var(--c-accent-warm); /* ── 02. TYPOGRAPHIE — FAMILLE & GRAISSES ─────────────────────── Une seule police sur tout le site : TWK Lausanne. */ --font: 'TWK Lausanne', system-ui, -apple-system, sans-serif; --w-light: 300; /* display, corps de texte, grands titres */ --w-regular: 400; /* labels UI, nav, capitales */ --w-medium: 500; /* CTA, accents */ /* ── ÉCHELLE TYPOGRAPHIQUE ────────────────────────────────────── Base html = 10px, donc 1rem = 10px. Échelle fixe et fermée : aucune taille hors de cette liste. */ --ts-2xs: 1.0rem; /* 10px légal, méta */ --ts-xs: 1.1rem; /* 11px eyebrows, tags */ --ts-sm: 1.3rem; /* 13px légendes */ --ts-base: 1.5rem; /* 15px corps, champs */ --ts-md: 1.8rem; /* 18px chapô */ --ts-lg: 2.4rem; /* 24px petits titres */ --ts-xl: clamp(2.8rem, 4vw, 4.8rem); /* 28–48 sous-titres */ --ts-2xl: clamp(3.5rem, 5.5vw, 6rem); /* 35–60 titres section */ --ts-3xl: clamp(4rem, 8vw, 10rem); /* 40–100 titres majeurs */ --ts-4xl: clamp(6rem, 12vw, 15rem); /* 60–150 display */ --ts-hero: clamp(7rem, 13vw, 16rem); /* 70–160 nom en hero */ /* ── 03. TRACKING & INTERLIGNES ───────────────────────────────── Règle : plus le texte est grand, plus le tracking est serré. */ --ls-tight: -0.04em; /* hero, plus grand display */ --ls-snug: -0.025em; /* titres de section */ --ls-normal: 0em; /* corps de texte */ --ls-open: 0.04em; /* eyebrows */ --ls-wide: 0.10em; /* liens footer, légendes */ --ls-wider: 0.16em; /* nav, labels UI */ --ls-widest: 0.22em; /* petites capitales */ --lh-display: 0.85; /* hero */ --lh-tight: 0.92; /* titres de section */ --lh-snug: 1.05; /* sous-titres */ --lh-normal: 1.45; /* UI, nav */ --lh-relaxed: 1.65; /* paragraphes */ --lh-loose: 1.85; /* petits textes, descriptions */ /* ── 04. ESPACEMENTS ──────────────────────────────────────────── Échelle fixe, pas de valeur intermédiaire improvisée. */ --sp-3xs: 0.4rem; /* 4px */ --sp-2xs: 0.8rem; /* 8px */ --sp-xs: 1.2rem; /* 12px */ --sp-sm: 1.6rem; /* 16px */ --sp-md: 2.4rem; /* 24px */ --sp-lg: 4.0rem; /* 40px */ --sp-xl: 6.4rem; /* 64px */ --sp-2xl: 10.0rem; /* 100px */ --sp-3xl: 16.0rem; /* 160px */ /* Respiration verticale des sections */ --section-y: clamp(8rem, 12vw, 18rem); --section-y-s: clamp(5rem, 8vw, 10rem); /* ── 05. LAYOUT ─────────────────────────────────────────────────*/ --nav-h: 72px; /* hauteur de la barre de nav */ --gutter: clamp(2rem, 5vw, 6rem); /* marge latérale de page */ --maxw: 160rem; /* largeur max du contenu */ --maxw-text: 72rem; /* largeur max de lecture */ --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-full: 999px; /* ── 06. BORDURES & OMBRES ──────────────────────────────────────*/ --bw-hair: 1px; --bw-thick: 2px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 8px 30px rgba(0,0,0,0.08); --shadow-lg: 0 24px 60px rgba(0,0,0,0.12); /* ── 07. MOUVEMENT ────────────────────────────────────────────── Volontairement pauvre : une seule durée, courte. Le site ne fait que des changements d'état au survol — pas d'animation d'entrée, pas de reveal au scroll, pas de parallaxe. */ --dur-fast: 0.15s; --dur-base: 0.20s; --ease: cubic-bezier(0.65, 0.01, 0.05, 0.99); /* ── 08. PROFONDEUR ─────────────────────────────────────────────*/ --z-base: 1; --z-sticky: 100; --z-menu: 400; /* overlay du menu mobile */ --z-nav: 500; /* barre de nav, toujours au-dessus du menu */ --z-loader: 1000; } /* ═══ THÈME INVERSÉ ═══════════════════════════════════════════════ À poser sur ou sur n'importe quel bloc sombre (footer, bande CTA). Mêmes tokens, rôles retournés — les alias legacy suivent automatiquement. */ [data-theme='dark'] { --c-bg: #0c0c0a; --c-bg-soft: #16150f; --c-bg-invert: #f2ede4; --c-text: #f2ede4; --c-text-soft: rgba(242,237,228,0.62); --c-text-muted: rgba(242,237,228,0.35); --c-text-faint: rgba(242,237,228,0.14); --c-text-invert: #111111; --c-border: rgba(242,237,228,0.10); --c-border-strong: rgba(242,237,228,0.24); --c-border-invert: rgba(0,0,0,0.12); } /* ═══ AJUSTEMENTS RESPONSIVE DES TOKENS ═══════════════════════════ Seuls les tokens de layout bougent — l'échelle typo utilise déjà clamp() et s'adapte toute seule. */ @media (max-width: 900px) { :root { --nav-h: 60px; } }