/* ═══════════════════════════════════════════════════════════════════════════ Jetons Shoopeek — LA source unique des couleurs, polices, rayons, ombres, espacements et hauteurs (plan de remise en état, phase 3, chantier 1). Chargée EN PREMIER dans le de toute page rendue (site public, espaces /my /bo /livreur /chauffeur, administration, StudioPages) par DesignSystemFilter (ressource « sk-tokens », position First), et liée par les documents autonomes (mini-sites). Les réglages de marque de l'administration (ShoopeekBrandingSettings) ne sont que des SURCHARGES de ces noms, écrites juste après (bloc « data-sk-branding »). Règle : aucune valeur hexadécimale, aucun rayon, aucune police en dur ailleurs qu'ici (porte tools/styles-check). Un besoin nouveau = un jeton ici. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Marque ─────────────────────────────────────────────────────────── */ --sk-primary: #094ED7; --sk-primary-hover: #073CA0; --sk-primary-soft: #EAF1FE; --sk-primary-soft-fg: #073CA0; --sk-primary-rgb: 9, 78, 215; --sk-on-primary: #FFFFFF; --sk-accent: #F5B800; /* ── Surfaces et gris ───────────────────────────────────────────────── */ --sk-bg: #F4F6FA; --sk-surface: #FFFFFF; --sk-surface-alt: #F8F9FC; --sk-border: #E4E6EF; --sk-border-strong: #D3D7E4; /* ── Texte ──────────────────────────────────────────────────────────── */ --sk-fg: #0E0E28; --sk-fg-soft: #3A3A55; --sk-muted: #6B6B80; --sk-subtle: #9A9AAE; /* ── Sémantique : UNE valeur par sens ───────────────────────────────── */ --sk-success: #0F7B4F; --sk-success-soft: #E8F6EF; --sk-warning: #B45309; --sk-warning-soft: #FFF6E5; --sk-danger: #C62828; --sk-danger-soft: #FDECEC; --sk-info: #0891B2; --sk-rating: #F0AD4E; --sk-overlay: rgba(0, 0, 0, .5); /* ── Chrome (barre du haut, rail) ───────────────────────────────────── */ --sk-chrome-h: 64px; --sk-chrome-bg: #0E0E28; --sk-chrome-fg: #FFFFFF; --sk-chrome-fg-muted: rgba(255, 255, 255, .72); --sk-chrome-hover: rgba(255, 255, 255, .08); --sk-chrome-hover-strong: rgba(255, 255, 255, .16); --sk-chrome-tool: 40px; /* favoris, panier, cloche, messages : une seule boîte */ --sk-chrome-badge-bg: var(--sk-danger); --sk-chrome-badge-fg: #FFFFFF; --sk-rail-width: 248px; /* ── Formes : six rayons, pas un de plus ─────────────────────────────── */ --sk-radius-none: 0; /* angle droit voulu (onglet collé, bord de bandeau) */ --sk-radius-xs: 4px; --sk-radius-sm: 8px; --sk-radius: 12px; --sk-radius-md: 12px; /* ancien nom (réglages de marque) */ --sk-radius-lg: 16px; --sk-radius-pill: 999px; --sk-radius-round: 50%; --sk-shadow-sm: 0 1px 2px rgba(14, 14, 40, .06); --sk-shadow: 0 1px 2px rgba(14, 14, 40, .04), 0 8px 24px rgba(14, 14, 40, .05); --sk-shadow-md: var(--sk-shadow); --sk-shadow-lg: 0 14px 40px rgba(14, 14, 40, .18); --sk-focus: 0 0 0 3px rgba(9, 78, 215, .35); --sk-focus-ring: 2px solid var(--sk-primary); /* ── Typographie ────────────────────────────────────────────────────── */ --sk-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sk-font-heading: var(--sk-font); --sk-font-mono: ui-monospace, SFMono-Regular, Consolas, monospace; --sk-fs-xs: .75rem; --sk-fs-sm: .875rem; --sk-fs-base: 1rem; --sk-fs-lg: 1.125rem; --sk-fs-xl: 1.5rem; --sk-fs-2xl: 2rem; --sk-fs-3xl: 3rem; --sk-h1: 1.5rem; --sk-h2: 1.25rem; --sk-h3: 1.05rem; /* ── Rythme : grille de 4 px ────────────────────────────────────────── */ --sk-s1: 4px; --sk-s2: 8px; --sk-s3: 12px; --sk-s4: 16px; --sk-s5: 24px; --sk-s6: 32px; --sk-s7: 48px; --sk-s8: 64px; --sk-stack: var(--sk-s5); --sk-stack-section: var(--sk-s7); --sk-gutter-x: 24px; --sk-content-max: 1320px; /* ── Contrôles ──────────────────────────────────────────────────────── */ --sk-control-h-sm: 32px; --sk-control-h: 40px; --sk-control-h-lg: 48px; /* ── Tableaux ───────────────────────────────────────────────────────── */ --sk-row-h: 52px; --sk-row-h-dense: 44px; --sk-thead-h: 52px; /* ── Anciens noms Shoopeek (thème du site, contenus) → alias ─────────── */ --sk-blue: var(--sk-primary); --sk-blue-d: var(--sk-primary-hover); --sk-blue-l: var(--sk-primary-soft); --sk-ink: var(--sk-fg); --sk-ink-soft: var(--sk-fg-soft); --sk-white: var(--sk-surface); --sk-gold: var(--sk-accent); --sk-red: var(--sk-danger); --sk-gray-500: var(--sk-muted); --sk-gray-200: var(--sk-border); --sk-gray-100: var(--sk-surface-alt); --sk-shadow-h: var(--sk-shadow-lg); --sk-surface-2: var(--sk-surface-alt); /* ── Vocabulaires génériques des contenus et pages autonomes : repli seulement (un contenu qui les définit lui-même garde sa valeur — lot B) ──────── */ --encre: var(--sk-fg); --sourd: var(--sk-muted); --doux: var(--sk-muted); --accent: var(--sk-primary); --marque: var(--sk-primary); --fond: var(--sk-bg); --carte: var(--sk-surface); --bord: var(--sk-border); --trait: var(--sk-border); --bleu: var(--sk-primary); --gris: var(--sk-muted); --ms-primaire: var(--sk-primary); --ms-texte: var(--sk-fg); --ms-fond: var(--sk-surface); --ms-police: var(--sk-font); } /* ── Vocabulaires des autres feuilles → alias de la charte ───────────────── « html:root » l'emporte sur le « :root » de ces feuilles quel que soit l'ordre de chargement : un composant écrit avec --studio-*, --as-*, --mk-*, --cnx-* ou --dw-* suit la marque sans être retouché. */ html:root { --studio-brand: var(--sk-primary); --studio-brand-hover: var(--sk-primary-hover); --studio-brand-soft-bg: var(--sk-primary-soft); --studio-brand-soft-fg: var(--sk-primary-soft-fg); --studio-bg: var(--sk-bg); --studio-surface: var(--sk-surface); --studio-surface-alt: var(--sk-surface-alt); --studio-border: var(--sk-border); --studio-border-strong: var(--sk-border-strong); --studio-text: var(--sk-fg); --studio-text-muted: var(--sk-muted); --studio-text-subtle: var(--sk-subtle); --studio-accent: var(--sk-primary); --studio-accent-soft-bg: var(--sk-primary-soft); --studio-accent-soft-fg: var(--sk-primary-soft-fg); --as-header-bg: var(--sk-chrome-bg); --as-header-text: var(--sk-chrome-fg); --as-font: var(--sk-font); --mk-primary: var(--sk-primary); --mk-primary-dark: var(--sk-primary-hover); --mk-danger: var(--sk-danger); --mk-radius: var(--sk-radius); --dw-primary: var(--sk-primary); /* Bootstrap 5.3 (site ET administration) suit la marque : liens (lus en -rgb), rayons, police, anneau de focus. */ --bs-primary: var(--sk-primary); --bs-primary-rgb: var(--sk-primary-rgb); --bs-link-color: var(--sk-primary); --bs-link-color-rgb: var(--sk-primary-rgb); --bs-link-hover-color: var(--sk-primary-hover); --bs-link-hover-color-rgb: 7, 60, 160; --bs-focus-ring-color: rgba(var(--sk-primary-rgb), .35); --bs-border-radius-sm: var(--sk-radius-xs); --bs-border-radius: var(--sk-radius-sm); --bs-border-radius-lg: var(--sk-radius); --bs-border-radius-xl: var(--sk-radius-lg); --bs-border-radius-xxl: var(--sk-radius-lg); --bs-border-radius-2xl: var(--sk-radius-lg); --bs-border-radius-pill: var(--sk-radius-pill); --bs-body-font-family: var(--sk-font); --bs-font-sans-serif: var(--sk-font); --bs-font-monospace: var(--sk-font-mono); --bs-body-color: var(--sk-fg); --bs-border-color: var(--sk-border); --bs-danger: var(--sk-danger); --bs-success: var(--sk-success); } @media (max-width: 960px) { :root { --sk-gutter-x: 16px; } } @media (max-width: 600px) { :root { --sk-gutter-x: 12px; } } /* ── Palette des contenus (GÉNÉRÉ par tools/styles-check/extraire-styles-recettes.py — ne pas éditer) ── */ :root { --sk-c-ambre-1: #F5D77A; --sk-c-bleu-1: #6EA8FE; --sk-c-bleu-2: #5B8DEF; --sk-c-bleu-3: #2C6BEA; --sk-c-cyan-1: #0DCAF0; --sk-c-gris-1: #B8BCC8; --sk-c-indigo-1: #6D3FD0; --sk-c-indigo-2: #3730A3; --sk-c-orange-1: #EA580C; --sk-c-orange-2: #F97316; --sk-c-orange-3: #7A4B00; --sk-c-rose-1: #DB2777; --sk-c-rose-2: #E6007E; --sk-c-rouge-1: #F3B3C2; --sk-c-rouge-2: #991B1B; --sk-c-sarcelle-1: #134E4A; --sk-c-sarcelle-2: #10B981; --sk-c-sarcelle-3: #34D399; --sk-c-sarcelle-4: #A7E0C4; --sk-c-vert-1: #4ADE80; --sk-c-violet-1: #7C3AED; --sk-c-violet-2: #2E1065; --sk-c-violet-3: #6D28D9; --sk-c-violet-4: #9D6BFF; --sk-c-violet-5: #4C1D95; } /* ── fin de la palette des contenus ── */