/* ============================================================================ TOURAK 2027 — SYSTEME DE DESIGN Fichier : /assets/css/tk-2027.css (tourak-digital.com — FR, LTR) Charge EN DERNIER. Additif : ne supprime aucune ancienne feuille. Rollback = retirer la ligne qui pointe ici. Namespace neuf : --t27-* (aucune collision avec les 69 tokens existants) Remap des anciens tokens : section (C), scope html:not(.t27-legacy):root Desactiver le remap sans toucher au fichier : SOMMAIRE (A) Primitives : couleurs OKLCH, typo, espace, rayon, ombre, motion (B) Semantique : tokens de surface/texte/bordure, clair + sombre (C) Remap legacy : critical.css / style.css / tk-unified.css / premium-2026.css (D) Reset minimal : non destructif (E) Typographie : echelle appliquee (F) Dark mode : prefers-color-scheme + [data-theme] (le toggle gagne) (G) Motion : durees, easings, prefers-reduced-motion total (H) Surcharges : uniquement les selecteurs en !important qui resistent (I) Utilitaires : conteneur, pile, bento, boutons, marqueurs ========================================================================== */ /* ========================================================================== (A) PRIMITIVES Toutes les couleurs sont en OKLCH. Les hex equivalents sont dans le bloc @supports de repli (fin de section A) pour les navigateurs sans OKLCH. ========================================================================== */ html:not(.t27-legacy):root { /* --- Indigo electrique : accent principal. Echelle 50 -> 950, hue 274 --- 600 = la signature Tourak (contraste blanc 6,4:1, AA valide). */ --t27-indigo-50: oklch(0.972 0.014 274); --t27-indigo-100: oklch(0.944 0.030 274); --t27-indigo-200: oklch(0.892 0.062 274); --t27-indigo-300: oklch(0.812 0.110 274); --t27-indigo-400: oklch(0.702 0.176 274); --t27-indigo-500: oklch(0.600 0.240 274); --t27-indigo-600: oklch(0.508 0.276 274); --t27-indigo-700: oklch(0.442 0.240 273); --t27-indigo-800: oklch(0.378 0.196 272); --t27-indigo-900: oklch(0.312 0.150 272); --t27-indigo-950: oklch(0.212 0.096 272); /* --- Ambre sable : accent secondaire (pont France <-> Maroc). Plafond d'usage : moins de 10 % de la surface. JAMAIS sur du texte long. 700 = seule teinte autorisee pour du texte sur fond clair (5,5:1). --- */ --t27-amber-50: oklch(0.978 0.016 78); --t27-amber-100: oklch(0.950 0.036 78); --t27-amber-200: oklch(0.900 0.070 76); --t27-amber-300: oklch(0.845 0.106 73); --t27-amber-400: oklch(0.790 0.130 70); --t27-amber-500: oklch(0.730 0.140 66); --t27-amber-600: oklch(0.648 0.136 60); --t27-amber-700: oklch(0.548 0.120 56); --t27-amber-800: oklch(0.452 0.098 54); --t27-amber-900: oklch(0.372 0.078 52); /* --- Sable : neutres CLAIRS, teintes chauds. Aucun gris pur. hue 80 --- */ --t27-sand-25: oklch(0.992 0.003 85); --t27-sand-50: oklch(0.980 0.005 84); --t27-sand-100: oklch(0.962 0.007 82); --t27-sand-200: oklch(0.930 0.009 80); --t27-sand-300: oklch(0.880 0.011 78); --t27-sand-400: oklch(0.775 0.013 76); /* --- Encre : neutres SOMBRES, bleu-noir. Aucun gris pur. hue 266 --- */ --t27-ink-400: oklch(0.640 0.024 268); --t27-ink-500: oklch(0.548 0.026 268); --t27-ink-600: oklch(0.448 0.030 267); --t27-ink-700: oklch(0.352 0.032 266); --t27-ink-800: oklch(0.258 0.032 265); --t27-ink-900: oklch(0.186 0.030 265); --t27-ink-950: oklch(0.132 0.028 265); --t27-ink-1000: oklch(0.098 0.024 265); /* --- Etats --- */ --t27-success: oklch(0.620 0.150 152); --t27-warning: oklch(0.700 0.150 74); --t27-danger: oklch(0.570 0.215 27); /* --- Familles typographiques (2 + 1 editoriale) --- */ --t27-font-display: 'Bricolage Grotesque', 'Space Grotesk', system-ui, sans-serif; --t27-font-text: 'Instrument Sans', 'Inter', system-ui, -apple-system, sans-serif; --t27-font-editorial: 'Instrument Serif', Georgia, serif; /* 1 mot par section max */ --t27-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; /* --- Echelle typographique fluide. Une seule progression, ratio ~1,22 --- */ --t27-text-2xs: clamp(0.6875rem, 0.67rem + 0.09vw, 0.75rem); --t27-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --t27-text-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem); --t27-text-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem); --t27-text-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.25rem); --t27-text-xl: clamp(1.375rem, 1.25rem + 0.60vw, 1.625rem); --t27-text-2xl: clamp(1.75rem, 1.50rem + 1.20vw, 2.25rem); --t27-text-3xl: clamp(2.25rem, 1.80rem + 2.20vw, 3.25rem); --t27-text-4xl: clamp(2.75rem, 2.00rem + 3.60vw, 4.50rem); --t27-text-5xl: clamp(3.25rem, 2.10rem + 5.60vw, 6.50rem); /* --- Graisses, interlignes, interlettrages --- */ --t27-weight-regular: 400; --t27-weight-medium: 500; --t27-weight-semibold: 600; --t27-weight-bold: 700; --t27-weight-black: 800; --t27-leading-tight: 1.04; --t27-leading-snug: 1.18; --t27-leading-normal: 1.45; --t27-leading-relaxed: 1.68; --t27-tracking-tight: -0.032em; /* titres 3xl et plus */ --t27-tracking-snug: -0.016em; /* titres xl / 2xl */ --t27-tracking-normal: 0em; --t27-tracking-wide: 0.08em; /* sur-titres, kickers en majuscules */ --t27-measure: 68ch; /* longueur de ligne maximale du texte long */ /* --- Espacement : UNE progression, base 4 px. Rien hors de cette liste --- */ --t27-space-1: 0.25rem; /* 4 */ --t27-space-2: 0.5rem; /* 8 */ --t27-space-3: 0.75rem; /* 12 */ --t27-space-4: 1rem; /* 16 */ --t27-space-5: 1.5rem; /* 24 */ --t27-space-6: 2rem; /* 32 */ --t27-space-7: 3rem; /* 48 */ --t27-space-8: 4rem; /* 64 */ --t27-space-9: 6rem; /* 96 */ --t27-space-10: 8rem; /* 128 */ --t27-section: clamp(4rem, 8vw, 8rem); /* padding vertical de section */ --t27-gutter: clamp(1.25rem, 4vw, 2.5rem); /* gouttiere laterale */ --t27-container: 1240px; --t27-container-narrow: 780px; /* --- Rayons --- */ --t27-radius-xs: 6px; --t27-radius-sm: 10px; --t27-radius-md: 14px; --t27-radius-lg: 20px; --t27-radius-xl: 28px; --t27-radius-2xl: 40px; --t27-radius-full: 999px; /* --- Bordures --- */ --t27-border-width: 1px; --t27-border-width-thick: 2px; /* --- Motion : durees et easings (section G pour l'usage) --- */ --t27-dur-1: 120ms; --t27-dur-2: 200ms; --t27-dur-3: 320ms; --t27-dur-4: 520ms; --t27-dur-5: 800ms; --t27-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --t27-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t27-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* --- Profondeurs --- */ --t27-z-base: 1; --t27-z-sticky: 100; --t27-z-header: 1000; --t27-z-overlay: 5000; --t27-z-modal: 9000; } /* Repli pour les navigateurs sans OKLCH (Chrome < 111, Safari < 15.4). Sans ce bloc, chaque var() en oklch serait invalide et la couleur sauterait. */ @supports not (color: oklch(0.5 0.1 270)) { html:not(.t27-legacy):root { --t27-indigo-50:#f2f1fe; --t27-indigo-100:#e6e4fd; --t27-indigo-200:#d0ccfc; --t27-indigo-300:#b0a8fa; --t27-indigo-400:#8b7bf7; --t27-indigo-500:#6b53f8; --t27-indigo-600:#4441f1; --t27-indigo-700:#3a34d1; --t27-indigo-800:#2f2caa; --t27-indigo-900:#272485; --t27-indigo-950:#191653; --t27-amber-50:#fdf6ea; --t27-amber-100:#faead2; --t27-amber-200:#f3d7a8; --t27-amber-300:#ecc078; --t27-amber-400:#e0a851; --t27-amber-500:#cf8f39; --t27-amber-600:#b1742c; --t27-amber-700:#8f5b22; --t27-amber-800:#6f461c; --t27-amber-900:#553516; --t27-sand-25:#fefdfb; --t27-sand-50:#fbfaf6; --t27-sand-100:#f6f3ed; --t27-sand-200:#eae6dd; --t27-sand-300:#dad5ca; --t27-sand-400:#bab4a7; --t27-ink-400:#8d8b9e; --t27-ink-500:#737186; --t27-ink-600:#5a586e; --t27-ink-700:#434258; --t27-ink-800:#2c2b3e; --t27-ink-900:#1c1b2b; --t27-ink-950:#121121; --t27-ink-1000:#0c0b18; --t27-success:#16a34a; --t27-warning:#d97706; --t27-danger:#dc2626; } } /* ========================================================================== (B) TOKENS SEMANTIQUES — THEME CLAIR (valeur par defaut) C'est ce que les 20 agents front doivent consommer, pas les primitives. ========================================================================== */ html:not(.t27-legacy):root { --t27-bg: var(--t27-sand-50); --t27-bg-subtle: var(--t27-sand-100); --t27-bg-alt: var(--t27-sand-200); --t27-surface: var(--t27-sand-25); --t27-surface-raised: #ffffff; --t27-surface-inset: var(--t27-sand-100); --t27-text: var(--t27-ink-900); --t27-text-muted: var(--t27-ink-600); --t27-text-subtle: var(--t27-ink-500); --t27-text-invert: var(--t27-sand-50); --t27-border: var(--t27-sand-300); --t27-border-strong: var(--t27-sand-400); --t27-border-accent: var(--t27-indigo-200); --t27-accent: var(--t27-indigo-600); --t27-accent-hover: var(--t27-indigo-700); --t27-accent-soft: var(--t27-indigo-50); --t27-accent-text: var(--t27-indigo-700); /* accent lisible sur fond clair */ --t27-on-accent: #ffffff; --t27-accent-2: var(--t27-amber-500); --t27-accent-2-soft: var(--t27-amber-100); --t27-accent-2-text: var(--t27-amber-700); /* seule teinte ambre pour du texte */ --t27-on-accent-2: var(--t27-ink-950); /* Ombres TEINTEES de l'accent. Jamais de noir pur. */ --t27-shadow-tint: 30 26 120; /* indigo-950 en RGB, pour les rgba() */ --t27-shadow-xs: 0 1px 2px rgba(var(--t27-shadow-tint) / 0.06); --t27-shadow-sm: 0 2px 6px rgba(var(--t27-shadow-tint) / 0.07); --t27-shadow-md: 0 6px 18px rgba(var(--t27-shadow-tint) / 0.09), 0 1px 3px rgba(var(--t27-shadow-tint) / 0.05); --t27-shadow-lg: 0 16px 42px rgba(var(--t27-shadow-tint) / 0.11), 0 2px 8px rgba(var(--t27-shadow-tint) / 0.06); --t27-shadow-xl: 0 32px 80px rgba(var(--t27-shadow-tint) / 0.14), 0 4px 14px rgba(var(--t27-shadow-tint) / 0.07); --t27-shadow-accent: 0 12px 32px rgba(68 65 241 / 0.22); /* Anneau de focus : visible dans les deux themes, 3:1 minimum. */ --t27-focus-ring: var(--t27-indigo-600); --t27-focus-halo: #ffffff; } /* Repli rgba() pour les navigateurs sans syntaxe espace/slash. */ @supports not (color: rgb(0 0 0 / 0.5)) { html:not(.t27-legacy):root { --t27-shadow-xs: 0 1px 2px rgba(30,26,120,0.06); --t27-shadow-sm: 0 2px 6px rgba(30,26,120,0.07); --t27-shadow-md: 0 6px 18px rgba(30,26,120,0.09); --t27-shadow-lg: 0 16px 42px rgba(30,26,120,0.11); --t27-shadow-xl: 0 32px 80px rgba(30,26,120,0.14); --t27-shadow-accent: 0 12px 32px rgba(68,65,241,0.22); } } /* ========================================================================== (F) DARK MODE — declare avant (C) pour que le remap legacy lise les bonnes valeurs. Le toggle manuel [data-theme] gagne DANS LES DEUX SENS : - systeme sombre + toggle "light" -> clair (le :not([data-theme="light"])) - systeme clair + toggle "dark" -> sombre (le bloc [data-theme="dark"]) Rappel : header.php:152 pose data-theme depuis localStorage 'tourak-theme'. ========================================================================== */ @media (prefers-color-scheme: dark) { html:not(.t27-legacy):root:not([data-theme="light"]) { --t27-bg: var(--t27-ink-1000); --t27-bg-subtle: var(--t27-ink-950); --t27-bg-alt: var(--t27-ink-900); --t27-surface: var(--t27-ink-950); --t27-surface-raised: var(--t27-ink-900); --t27-surface-inset: var(--t27-ink-1000); --t27-text: var(--t27-sand-100); --t27-text-muted: var(--t27-sand-400); --t27-text-subtle: var(--t27-ink-400); --t27-text-invert: var(--t27-ink-950); --t27-border: var(--t27-ink-800); --t27-border-strong: var(--t27-ink-700); --t27-border-accent: var(--t27-indigo-800); --t27-accent: var(--t27-indigo-500); --t27-accent-hover: var(--t27-indigo-400); --t27-accent-soft: var(--t27-indigo-950); --t27-accent-text: var(--t27-indigo-400); --t27-on-accent: #ffffff; --t27-accent-2: var(--t27-amber-400); --t27-accent-2-soft: var(--t27-amber-900); --t27-accent-2-text: var(--t27-amber-400); --t27-on-accent-2: var(--t27-ink-1000); --t27-shadow-tint: 8 6 34; /* encre indigo, jamais du noir pur */ --t27-shadow-accent: 0 12px 32px rgba(107 83 248 / 0.30); --t27-focus-ring: var(--t27-indigo-400); --t27-focus-halo: var(--t27-ink-1000); color-scheme: dark; } } html:not(.t27-legacy):root[data-theme="dark"] { --t27-bg: var(--t27-ink-1000); --t27-bg-subtle: var(--t27-ink-950); --t27-bg-alt: var(--t27-ink-900); --t27-surface: var(--t27-ink-950); --t27-surface-raised: var(--t27-ink-900); --t27-surface-inset: var(--t27-ink-1000); --t27-text: var(--t27-sand-100); --t27-text-muted: var(--t27-sand-400); --t27-text-subtle: var(--t27-ink-400); --t27-text-invert: var(--t27-ink-950); --t27-border: var(--t27-ink-800); --t27-border-strong: var(--t27-ink-700); --t27-border-accent: var(--t27-indigo-800); --t27-accent: var(--t27-indigo-500); --t27-accent-hover: var(--t27-indigo-400); --t27-accent-soft: var(--t27-indigo-950); --t27-accent-text: var(--t27-indigo-400); --t27-on-accent: #ffffff; --t27-accent-2: var(--t27-amber-400); --t27-accent-2-soft: var(--t27-amber-900); --t27-accent-2-text: var(--t27-amber-400); --t27-on-accent-2: var(--t27-ink-1000); --t27-shadow-tint: 8 6 34; /* encre indigo, jamais du noir pur */ --t27-shadow-accent: 0 12px 32px rgba(107 83 248 / 0.30); --t27-focus-ring: var(--t27-indigo-400); --t27-focus-halo: var(--t27-ink-1000); color-scheme: dark; } /* Le toggle "clair" gagne sur un systeme en sombre sans qu'aucune valeur ne soit redeclaree : le bloc @media ci-dessus s'exclut lui-meme via :root:not([data-theme="light"]). Seul color-scheme doit etre repose. */ html:not(.t27-legacy):root[data-theme="light"] { color-scheme: light; } /* ========================================================================== (C) REMAP DES TOKENS LEGACY Levier principal : l'ancien CSS (critical.css, style.css, tk-unified.css, premium-2026.css, et le