/* ============================================================================ KARL & LÉON — DESIGN TOKENS (source unique de vérité) ---------------------------------------------------------------------------- Architecture 3 couches : PRIMITIVE → SEMANTIC → COMPONENT + couche LEGACY (alias rétro-compatibles : les anciens noms marchent toujours) Esprit Apple : vert olive maison, neutres chauds (papier/encre), Inter Tight, easings forts, ombres chaudes. Aucune couleur froide, un seul accent (olive), l'or réservé au programme Fidélité. Importer en 1ère ligne du : Puis ne JAMAIS réécrire un hex en dur dans les composants — toujours var(--token). ============================================================================ */ :root{ /* ======================================================================== 1. PRIMITIVE — valeurs brutes, nommage systématique par échelle. Ne jamais utiliser directement dans un composant : passer par SEMANTIC. ======================================================================== */ /* — Olive (couleur de marque) — échelle 50→900 */ --olive-50: #F3F7E7; --olive-100: #EEF4DE; --olive-200: #E4EECF; --olive-400: #CFE0A8; --olive-600: #6C931D; /* ★ BRAND */ --olive-700: #517011; --olive-900: #3A4F0C; /* — Or (accent fidélité) */ --gold-100: #F2E9D4; --gold-500: #AD7E2E; /* ★ ACCENT */ --gold-600: #8A6310; --gold-900: #6E4F12; /* — Encre chaude (texte) — échelle 400→900 */ --ink-400: #A8A492; --ink-500: #76735F; /* assombri pour contraste AA 4.79:1 sur blanc (était #8C8975 = 3.5:1) */ --ink-700: #5C6153; --ink-900: #20241D; /* noir chaud, jamais #000 */ /* — Papier (surfaces neutres) — échelle 0→300 */ --paper-0: #FFFFFF; --paper-50: #FAFAF6; --paper-100: #F6F7F4; --paper-150: #F4F4EF; --paper-200: #EFF0EA; --paper-300: #EAEBE5; /* — Spéciaux */ --warm-yellow: #F2E9D4; --shadow-rgb: 40, 32, 18; /* base RGB des ombres chaudes (warm shadow) */ --brand-rgb: 108, 147, 29; /* base RGB olive pour les rings/glows */ /* — Rayons (primitives px) */ --radius-8: 8px; --radius-10: 10px; --radius-14: 14px; --radius-24: 24px; --radius-full: 999px; /* — Espacement (base 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* — Typographie (primitives) */ --font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', ui-monospace, 'Roboto Mono', Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 22px; --tracking-tight: -.03em; --tracking-snug: -.015em; --tracking-normal: -.005em; --tracking-label: .06em; --tracking-caps: .1em; --leading-tight: 1.05; --leading-snug: 1.3; --leading-normal: 1.55; --leading-relaxed: 1.7; /* — Easings (primitives) — courbes fortes, jamais les natifs mous */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* UI entrant/sortant */ --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* mouvement on-screen */ --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* drawer iOS-like */ --ease-in-fast: cubic-bezier(0.4, 0, 1, 1); /* sortie accélérée */ --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* pops/pulses avec rebond — remplace les back.out GSAP (lot B9) */ /* — Durées (primitives) — échelle UNIQUE à 7 crans : tout le site pioche ici (audit 2026-07-02 : 15 durées en dur recensées → on rabat sur ces crans, lot B3) */ --dur-press: 120ms; /* feedback tactile : active/hover */ --dur-fast: 150ms; /* micro-transitions, SORTIES courtes */ --dur-page: 220ms; /* view transitions ENTRE PAGES (lot B2) */ --dur-base: 250ms; /* fades, overlays, transitions standard */ --dur-slow: 350ms; /* entrées de vue, reveals, cascades */ --dur-drawer-in: 420ms; --dur-drawer-out: 260ms; /* sortie de drawer plus rapide que l'entrée */ /* ======================================================================== 2. SEMANTIC — intention. C'est CE QUE LES COMPOSANTS RÉFÉRENCENT. Changer ici = re-thématiser tout le site sans toucher aux composants. ======================================================================== */ /* — Couleurs d'intention */ --color-brand: var(--olive-600); --color-brand-hover: var(--olive-700); --color-brand-soft: var(--olive-100); /* surfaces "active" légères */ --color-brand-tint: var(--olive-50); --color-accent: var(--gold-500); /* fidélité / cagnotte */ --color-accent-hover: var(--gold-600); --color-text: var(--ink-900); --color-text-2: var(--ink-700); /* sous-titres, méta */ --color-text-3: var(--ink-500); /* secondaire */ --color-text-disabled: var(--ink-400); --color-on-brand: #FFFFFF; /* texte sur fond olive */ /* — Surfaces */ --surface-base: var(--paper-0); /* cartes, modales */ --surface-raised: var(--paper-50); /* élévation +1 (foot drawer) */ --surface-sunken: var(--paper-150); /* champs, boutons idle */ --surface-app: var(--paper-100); /* fond de page */ --border-subtle: var(--paper-300); --border-line: var(--paper-200); /* — États sémantiques (succès vert, erreur chaude) */ --color-success: var(--olive-600); --color-success-bg: var(--olive-50); --color-error: #A2392A; --color-error-bg: #F7E8E4; /* — Élévation (ombres chaudes, palier xs→xl) */ --elevation-xs: 0 1px 2px rgba(var(--shadow-rgb), .04); --elevation-sm: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 2px 6px rgba(var(--shadow-rgb), .04); --elevation-md: 0 12px 30px -16px rgba(var(--shadow-rgb), .22), 0 3px 10px rgba(var(--shadow-rgb), .05); --elevation-lg: 0 28px 60px -24px rgba(var(--shadow-rgb), .30), 0 6px 18px rgba(var(--shadow-rgb), .06); --elevation-xl: 0 36px 80px -28px rgba(var(--shadow-rgb), .38), 0 10px 24px rgba(var(--shadow-rgb), .08); /* — Focus / glow */ --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), .22); --focus-ring-soft: 0 0 0 3px rgba(var(--brand-rgb), .18); /* — Rayons d'intention */ --r-control: var(--radius-10); /* boutons, inputs */ --r-surface: var(--radius-14); /* cartes, drawer, modales */ --r-large: var(--radius-24); /* grandes tuiles */ --r-tight: var(--radius-8); /* petits éléments */ --r-pill: var(--radius-full); /* — Motion d'intention */ --motion-press: transform var(--dur-press) var(--ease-out); --motion-hover: background-color var(--dur-fast) ease, color var(--dur-fast) ease; --motion-surface: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) ease; /* Entrée/sortie d'éléments (vues, cartes, panneaux) — audit 2026-07-02 lot B. POURQUOI : l'entrée décélère (opacity + léger déplacement), la sortie est plus courte et accélère (exit-faster-than-enter, déjà le pattern des drawers). */ --motion-enter: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out); --motion-exit: opacity var(--dur-fast) var(--ease-in-fast); /* Cascades (stagger) : délai PAR ÉLÉMENT — multiplier par l'index (--card-i etc.) */ --stagger-card: 20ms; /* grilles de cartes produits */ --stagger-list: 40ms; /* listes verticales (lignes panier, commandes) */ /* ======================================================================== 3. COMPONENT — tokens spécifiques par composant (référencent SEMANTIC). Permet de customiser un composant sans impacter les autres. ======================================================================== */ /* == SYSTEME DE BOUTONS — 2 NIVEAUX (audit front 2026-07-02, lot C1 ; decision proprietaire : PRIMAIRE = pilule verte de marque, SECONDAIRE = pilule neutre). POURQUOI : l'audit recensait 6 traitements de « bouton principal » divergents (rectangle vert sur login/reset, pilule verre + sheen sur home, pilule verte plate sur apropos, pilule noire morte .btn-primary sur le catalogue, pilule header, pilule footer) et .btn-primary voulait dire « vert » sur login mais « noir » sur le catalogue. On rabat le tout sur DEUX composants qui partagent la MEME geometrie (pilule --btn-radius) : seul le PRIMAIRE porte la couleur de marque, le SECONDAIRE reste neutre clair a bordure. Aucune teinte inventee : tout reference les tokens SEMANTIC existants. == */ --btn-radius: var(--r-pill); /* les 2 niveaux sont des pilules */ /* — PRIMAIRE : pilule verte de marque (action principale) */ --btn-primary-bg: var(--color-brand); --btn-primary-bg-hover: var(--color-brand-hover); --btn-primary-fg: var(--color-on-brand); --btn-primary-border: transparent; --btn-primary-shadow: 0 8px 22px -10px rgba(var(--brand-rgb), .6); /* — SECONDAIRE : pilule neutre claire a bordure (action secondaire, ex. « Excel ») */ --btn-secondary-bg: var(--surface-base); --btn-secondary-bg-hover: var(--surface-sunken); --btn-secondary-fg: var(--color-text); --btn-secondary-border: var(--border-subtle); /* — Bouton neutre (tokens herites, conserves : consommes par chips/pills) */ --btn-bg: var(--surface-sunken); --btn-bg-hover: var(--ink-900); --btn-fg: var(--color-text-2); --btn-fg-hover: #FFFFFF; --btn-disabled-opacity: .32; /* — Carte */ --card-bg: var(--surface-base); --card-radius: var(--r-surface); --card-border: rgba(var(--shadow-rgb), .04); --card-shadow: var(--elevation-xs); --card-shadow-hover: var(--elevation-md); /* — Input */ --input-bg: var(--surface-sunken); --input-bg-focus: var(--surface-base); --input-border: transparent; --input-border-focus: var(--color-brand); --input-radius: var(--r-control); --input-ring-focus: var(--focus-ring); /* — Chip / pill */ --chip-bg: var(--surface-sunken); --chip-fg: var(--color-text-2); --chip-bg-active: var(--ink-900); --chip-fg-active: #FFFFFF; /* — Drawer / overlay */ --drawer-bg: var(--surface-base); --drawer-shadow: var(--elevation-xl); --overlay-scrim: rgba(20, 26, 31, .50); --overlay-blur: saturate(180%) blur(14px); --drawer-in: transform var(--dur-drawer-in) var(--ease-out); --drawer-out: transform var(--dur-drawer-out) var(--ease-in-fast); /* — Badge prix négocié */ --badge-bg: var(--color-brand); --badge-fg: #FFFFFF; /* — Header du site (échelle CANONIQUE — audit 2026-07-02, lot B1). POURQUOI : le header changeait d'échelle entre pages (home 92px/logo 46/liens 15.5px vs 80px/38/14px partout ailleurs) — le grief « tailles différentes » du propriétaire. L'échelle de la home (la plus lisible, valeurs vérifiées dans home.html:1590-1597) devient LA référence unique. Le header canonique de assets/site.css consomme ces tokens ; home.html et web.html (copies autonomes de la barre) les consomment AUSSI. NB (vérifié C3, 2026-07-03) : plus AUCUN override local de --header-h dans home.html ni web.html — l'ancien NB (qui l'affirmait) était PÉRIMÉ ; l'échelle n'est donc plus dupliquée. Restent triplés les BLOCS de règles du header (site.css / home.html / web.html:20-header-nav.css) : la fusion en fragment unique est DIFFÉRÉE car non neutre au pixel (obstacles mesurés dans src/web/css/20-header-nav.css, en-tête « copie CONFORME »). */ --header-h: 92px; /* hauteur de la barre fixe */ --header-logo-h: 46px; /* logo complet, desktop */ --header-logo-h-sm: 32px; /* logo ≤480px (parité home) */ --header-nav-fs: 15.5px; /* liens du menu principal */ --header-nav-pad: 10px 16px; /* padding des liens du menu */ --header-pill-fs: 14.5px; /* pilules d'action (Déconnexion, Se connecter…) */ --header-pill-pad: 11px 18px; --header-pill-icon: 18px; /* icônes svg dans les pilules */ --header-icon-btn: 42px; /* burger + pilules icône seule (≤780px) */ --header-pad-x: 32px; /* padding horizontal de la barre */ /* ======================================================================== 4. LEGACY — alias rétro-compatibles. Tous les anciens noms (home.html / web.html / admin.html) pointent vers les nouveaux tokens, valeurs IDENTIQUES → aucune régression. À terme : migrer les composants vers les noms SEMANTIC ci-dessus. ======================================================================== */ --green: var(--olive-600); --green-dark: var(--olive-700); --green-light: var(--olive-100); --green-mid: var(--olive-400); --green-50: var(--olive-50); --green-100: var(--olive-200); --gold: var(--gold-500); --gold-dark: var(--gold-600); --gold-tint: var(--gold-100); --black: var(--ink-900); --ink-2: var(--ink-700); --ink-3: var(--ink-500); --ink-4: var(--ink-400); --grey-light: var(--paper-100); --grey-border: var(--paper-300); --grey-line: var(--paper-200); --grey-text: var(--ink-500); --surface: var(--paper-0); --surface-1: var(--paper-0); --surface-2: var(--paper-50); --surface-3: var(--paper-150); --bg-soft: var(--paper-50); --yellow-bg: var(--warm-yellow); --radius: var(--radius-14); --radius-md: var(--radius-10); --radius-sm: var(--radius-8); --radius-lg: var(--radius-24); --radius-pill: var(--radius-full); --shadow-xs: var(--elevation-xs); --shadow-sm: var(--elevation-sm); --shadow-md: var(--elevation-md); --shadow-lg: var(--elevation-lg); --shadow-xl: var(--elevation-xl); --ring: var(--focus-ring-soft); --ring-focus: var(--focus-ring); /* --ease-out / --ease-in-out déjà définis en primitive (mêmes noms) */ /* ======================================================================== 5. LIQUID GLASS (Apple 2025) — recette centralisée, partagée par TOUTES les pages (home, catalogue, apropos, contact, login). Verre dépoli translucide + reflet spéculaire + ombre teintée. Régler la translucidité ICI = tout le site se met à jour. ======================================================================== */ --glass-blur: blur(18px) saturate(180%); /* flou de réfraction standard */ --glass-blur-bar: blur(22px) saturate(180%); /* barres (header) */ /* Verre clair — panneaux & boutons secondaires : assez présent pour rester lisible */ --glass-white-bg: rgba(255,255,255,.55); --glass-white-bg-hover: rgba(255,255,255,.74); --glass-white-border: rgba(255,255,255,.85); /* Verre vert teinté — CTA PRINCIPAL : VIF et glossy (ressort franchement, garde le reflet/glow). Apple Liquid Glass : l'action principale reste vive — la translucidité est pour le chrome. */ --glass-green-bg: linear-gradient(180deg, rgba(132,178,46,.95) 0%, rgba(92,126,22,.98) 100%); --glass-green-bg-hover: linear-gradient(180deg, rgba(143,190,54,1) 0%, rgba(104,140,26,1) 100%); --glass-green-border: rgba(255,255,255,.50); --glass-green-shadow: 0 12px 28px -10px rgba(81,112,17,.6); /* Reflets & lisibilité */ --glass-highlight: inset 0 1px 0 rgba(255,255,255,.72); /* reflet spéculaire — bord haut */ --glass-highlight-soft: inset 0 1px 0 rgba(255,255,255,.8); --glass-text-shadow: 0 1px 2px rgba(28,38,8,.35); /* texte blanc */ } /* ============================================================================ 6. VIEW TRANSITIONS CROSS-DOCUMENT (audit 2026-07-02, lot B2) ---------------------------------------------------------------------------- POURQUOI ICI : ce fichier est chargé par TOUTES les pages du site (home, web, compte, apropos, contact, ouvrir-un-compte…) — la transition cross-document exige que les DEUX pages (sortante et entrante) aient opté ; le mettre ici active donc le fondu sur chaque navigation interne, sans toucher aux pages. DÉGRADATION : Firefox ignore @view-transition (at-rule inconnue) → il garde la coupure sèche actuelle, zéro régression. Support : Chrome/Edge ≥126, Safari ≥18.2. ACCESSIBILITÉ : tout le bloc est gardé par prefers-reduced-motion — en PRM on n'opte JAMAIS (pas de navigation:auto), et un bloc ceinture-bretelles annule les animations si une transition était malgré tout capturée. ============================================================================ */ @supports (view-transition-name: root) { @media (prefers-reduced-motion: no-preference) { /* Opt-in : chaque navigation same-origin déclenche un fondu croisé natif */ @view-transition { navigation: auto; } /* Fondu de page : court (220ms) et décéléré — assez discret pour ne jamais « ralentir » la navigation, assez long pour gommer le flash blanc */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-page); animation-timing-function: var(--ease-out); } } /* PRM : si le navigateur a capturé une transition (ex. préférence changée en cours de session), on coupe TOUTES les animations de la transition. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } }