/* ========================================================================== FGM TECHNOLOGIES — Jetons de design (design tokens) Fichier : fgm-tokens.css · Version 1.0 · 26/10/2026 -------------------------------------------------------------------------- PROVENANCE DES VALEURS (chaque tag renvoie au tableau d'annexe du guide) : [LOGO] = extrait des fichiers réels du logo fgm.ma (we.webp, fgmlogo.webp, fgmlogo-200x200.webp, fgmlogo2.webp) [THEME] = extrait du CSS réel du site actuel (bundle litespeed, variables --clb-* du thème, consultées le 26/10/2026) [QARIN] = valeur mesurée sur la référence qarin.framer.website (spécification design & motion, livrable PROMPT 02) [NOUVEAU]= valeur introduite par ce système (rôle complémentaire, validée contraste WCAG 2.1 AA) Règle absolue : les couleurs officielles [LOGO] ne sont jamais modifiées. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. COULEURS OFFICIELLES DE MARQUE — intangibles ------------------------------------------------------------------ */ --fgm-encre: #1A1A1A; /* [LOGO] monogramme + wordmark (we.webp, fgmlogo.webp) */ --fgm-noir: #000000; /* [LOGO] fond de la variante carrée fgmlogo2 (og:image) */ --fgm-blanc: #FFFFFF; /* [LOGO] monogramme blanc (icône) / fond (logo encre) */ /* Accent principal — héritage direct du site actuel [THEME] */ --fgm-rouge: #D90A2C; /* [THEME] --clb-color-primary (CTA, survols, accents) */ --fgm-rouge-fonce: #BB0926; /* [NOUVEAU] texte accentué sur fond clair (6,6:1 AA) */ --fgm-rouge-teinte: #FCEBEE; /* [NOUVEAU] fond teinté (badges, alertes danger) */ /* Accent secondaire éditorial — usage rare [THEME] */ --fgm-violet: #7646DD; /* [THEME] --clb-color-secondary (dégradés, tags) */ --fgm-violet-fonce: #633BBA; /* [NOUVEAU] version texte (7,3:1 AAA) */ --fgm-violet-teinte: #F1EDFD; /* [NOUVEAU] fond teinté */ /* ------------------------------------------------------------------ 2. NEUTRES — échelle dérivée de l'encre officielle #1A1A1A [NOUVEAU] ------------------------------------------------------------------ */ --fgm-gray-50: #F8F8F8; --fgm-gray-100: #F1F1F1; --fgm-gray-200: #E4E4E4; --fgm-gray-300: #C8C8C8; --fgm-gray-400: #A3A3A3; /* décoratif uniquement (2,5:1) */ --fgm-gray-500: #838383; /* large texte / icônes (3,8:1) */ --fgm-gray-600: #6C6C6C; /* texte secondaire (5,3:1 AA) */ --fgm-gray-700: #565656; /* texte secondaire fort (7,3:1 AAA) */ --fgm-gray-800: #3A3A3A; --fgm-gray-900: #2A2A2A; --fgm-gray-950: #1F1F1F; /* ------------------------------------------------------------------ 3. COULEURS SÉMANTIQUES — héritage du thème + versions texte AA ------------------------------------------------------------------ */ --fgm-succes: #29A366; /* [THEME] --clb-color-success */ --fgm-succes-texte: #207F50; /* [NOUVEAU] 5,0:1 AA */ --fgm-succes-teinte: #E8F5EE; /* [NOUVEAU] */ --fgm-alerte: #EC8013; /* [THEME] --clb-color-warning */ --fgm-alerte-texte: #B3610E; /* [NOUVEAU] 4,5:1 AA */ --fgm-alerte-teinte: #FDF2E4; /* [NOUVEAU] */ --fgm-danger: #D90A2C; /* [THEME] --clb-color-danger (= accent, cf. guide) */ --fgm-danger-texte: #BB0926; /* [NOUVEAU] 6,6:1 AA */ --fgm-danger-teinte: #FCEBEE; /* [NOUVEAU] */ --fgm-info: #2F6FED; /* [NOUVEAU] */ --fgm-info-texte: #2962D1; /* [NOUVEAU] 5,6:1 AA */ --fgm-info-teinte: #EAEFFD; /* [NOUVEAU] */ /* ------------------------------------------------------------------ 4. RÔLES D'INTERFACE (mapping fonctionnel) ------------------------------------------------------------------ */ --fgm-bg: var(--fgm-blanc); --fgm-surface: var(--fgm-blanc); --fgm-surface-alt: var(--fgm-gray-50); /* fonds de section alternés */ --fgm-surface-soft: var(--fgm-gray-100); --fgm-surface-dark: var(--fgm-encre); /* sections sombres (logo encre sur fond sombre interdit — voir guide) */ --fgm-texte: var(--fgm-encre); --fgm-texte-second: var(--fgm-gray-600); --fgm-texte-tertiaire: var(--fgm-gray-500); /* légendes, métadonnées */ --fgm-texte-inverse: var(--fgm-blanc); --fgm-texte-inverse-second: var(--fgm-gray-300); --fgm-bordure: var(--fgm-gray-200); --fgm-bordure-forte: var(--fgm-gray-300); --fgm-lien: var(--fgm-encre); /* [THEME] --clb-color-link: inherit */ --fgm-lien-survol: var(--fgm-rouge); /* [THEME] --clb-color-link-hover */ --fgm-focus: var(--fgm-rouge); /* anneau de focus visible */ --fgm-selection: rgba(217, 10, 44, .12); /* [THEME] --clb-color-selection */ /* ------------------------------------------------------------------ 5. TYPOGRAPHIE ------------------------------------------------------------------ */ --fgm-font-display: 'Poppins', 'DM Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; /* [NOUVEAU] Poppins : écho géométrique du mot-symbole ; DM Sans conservée en secours (police titre actuelle [THEME]) */ --fgm-font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* [QARIN] + [THEME] pile système en secours */ --fgm-font-mono: menlo, monaco, consolas, 'Lucida Console', monospace; /* [THEME] */ /* Échelle fluide (clamp — points de rupture Qarin 768/1200) */ --fgm-text-xs: .75rem; /* 12px */ --fgm-text-sm: .875rem; /* 14px */ --fgm-text-base: 1.0625rem; /* 17px [THEME] taille courant du site */ --fgm-text-md: clamp(1.125rem, .3vw + 1.05rem, 1.1875rem); --fgm-text-lg: clamp(1.25rem, .4vw + 1.15rem, 1.375rem); --fgm-text-xl: clamp(1.5rem, .9vw + 1.28rem, 1.75rem); --fgm-text-2xl: clamp(1.75rem, 1.4vw + 1.4rem, 2.125rem); --fgm-text-3xl: clamp(2rem, 2.2vw + 1.5rem, 2.625rem); --fgm-text-4xl: clamp(2.375rem, 3.4vw + 1.55rem, 3.375rem); --fgm-text-5xl: clamp(2.75rem, 4.8vw + 1.55rem, 4.25rem); --fgm-leading-serré: 1.15; --fgm-leading-titre: 1.25; --fgm-leading-texte: 1.65; --fgm-tracking-large: -.02em; /* grands titres */ --fgm-tracking-largeur: .08em; /* eyebrow, majuscules */ --fgm-poids-titre: 600; --fgm-poids-titre-fort: 700; --fgm-poids-texte: 400; --fgm-poids-moyen: 500; --fgm-poids-fort: 600; /* ------------------------------------------------------------------ 6. ESPACEMENTS — base 4px [NOUVEAU, usages Qarin] ------------------------------------------------------------------ */ --fgm-space-1: .25rem; /* 4px */ --fgm-space-2: .5rem; /* 8px */ --fgm-space-3: .75rem; /* 12px */ --fgm-space-4: 1rem; /* 16px */ --fgm-space-5: 1.25rem; /* 20px */ --fgm-space-6: 1.5rem; /* 24px */ --fgm-space-7: 2rem; /* 32px */ --fgm-space-8: 2.5rem; /* 40px */ --fgm-space-9: 3rem; /* 48px */ --fgm-space-10: 4rem; /* 64px */ --fgm-space-11: 5rem; /* 80px */ --fgm-space-12: 6rem; /* 96px */ --fgm-space-13: 8rem; /* 128px */ /* Rythme vertical des sections [QARIN] : 80px mobile → 130px desktop */ --fgm-section-y: clamp(5rem, 6.5vw + 2rem, 8.125rem); --fgm-section-y-s: clamp(3.5rem, 4vw + 1.5rem, 5rem); /* Conteneur [QARIN] : min(100vw − 32px, 1296px) */ --fgm-container: 81rem; /* 1296px */ --fgm-gouttiere: clamp(1rem, 4vw, 1.5rem); /* 16→24px */ /* ------------------------------------------------------------------ 7. RAYONS — 16/24 mesurés sur Qarin, pilule 100px [QARIN] ------------------------------------------------------------------ */ --fgm-radius-xs: .375rem; /* 6px — puces fines, inputs compacts */ --fgm-radius-sm: .625rem; /* 10px — petits éléments */ --fgm-radius-md: 1rem; /* 16px — cartes, champs [QARIN] */ --fgm-radius-lg: 1.5rem; /* 24px — blocs, médias [QARIN] */ --fgm-radius-xl: 2rem; /* 32px — panneaux héro */ --fgm-radius-full: 999px; /* pilule — boutons, badges [QARIN 100px] */ /* ------------------------------------------------------------------ 8. OMBRES — portées par l'encre rgb(26,26,26), douces et basses ------------------------------------------------------------------ */ --fgm-ombre-xs: 0 1px 2px rgba(26, 26, 26, .05); --fgm-ombre-sm: 0 1px 2px rgba(26, 26, 26, .05), 0 2px 8px rgba(26, 26, 26, .06); --fgm-ombre-md: 0 2px 4px rgba(26, 26, 26, .05), 0 8px 24px rgba(26, 26, 26, .09); --fgm-ombre-lg: 0 4px 8px rgba(26, 26, 26, .05), 0 16px 48px rgba(26, 26, 26, .13); /* ------------------------------------------------------------------ 9. MOTION — durées, courbes et ressorts mesurés sur Qarin [QARIN] ------------------------------------------------------------------ */ --fgm-dur-rapide: 150ms; /* micro-interactions (survols, couleurs) */ --fgm-dur-base: 300ms; /* transitions standard */ --fgm-dur-lente: 600ms; /* entrées de sections (tween Qarin 0,6 s) */ --fgm-ease-standard: cubic-bezier(.2, 0, 0, 1); /* sorties douces */ --fgm-ease-entree: cubic-bezier(.5, 0, .88, .77); /* [QARIN] tween d'apparition */ --fgm-ease-ressort: cubic-bezier(.34, 1.56, .64, 1); /* équivalent CSS du ressort Framer 350/70 [QARIN] (léger dépassement) */ /* Signature éditoriale : titre H1 mot à mot (voir guide, section Motion) */ --fgm-mot-delai: 50ms; /* [QARIN] pas d'échelonnement mesuré : 0,05 s */ --fgm-mot-depart: 200ms; /* [QARIN] délai de départ mesuré : 0,2 s */ /* Révélations au scroll — équivalents natifs des ressorts mesurés [QARIN] (catalogue appear_catalog.json, livrable PROMPT 02) */ --fgm-dur-reveal-proche: 550ms; /* ressort 350/70 → stabilisation ≈ 0,55 s */ --fgm-dur-reveal-section: 750ms; /* ressort 300/80 → stabilisation ≈ 0,75 s */ --fgm-dur-media: 600ms; /* tween d'image mesuré : 0,6 s */ --fgm-ease-ressort-lourd: cubic-bezier(.22, 1, .36, 1); /* ressort 300/80 amorti, sans dépassement [QARIN adapté] */ --fgm-reveal-proche: 1.25rem; /* 20px mesurés [QARIN] — éléments, cartes */ --fgm-reveal-section: 3rem; /* 80px mesurés [QARIN], appliqués à 48px : grands déplacements évités [adapté] */ /* Apparition séquencée — planifiée par animations.js sur [data-fgm-echelon] */ --fgm-echelon-pas: 70ms; /* pas entre deux éléments d'un groupe [NOUVEAU] */ --fgm-echelon-plafond: 480ms; /* au-delà : apparition simultanée [NOUVEAU] */ /* ------------------------------------------------------------------ 10. PROFONDEUR, GRILLE, DIVERS ------------------------------------------------------------------ */ --fgm-z-header: 100; --fgm-z-overlay: 200; --fgm-z-toast: 300; --fgm-colonnes: 12; --fgm-ligne-focus: 2px solid var(--fgm-focus); --fgm-decalage-focus: 2px; /* Breakpoints de référence (documentés, à utiliser en CSS natif) : 640px mobile large · 768px tablette [QARIN] · 1024px paysage · 1200px desktop [QARIN] */ } /* ------------------------------------------------------------------ Variante sombre — portée volontairement locale (.fgm-theme-dark). Elle ne redéfinit que les rôles d'interface, jamais les couleurs officielles de marque. Le rouge reste le seul accent utilisé. ------------------------------------------------------------------ */ .fgm-theme-dark, .fgm-section--dark { --fgm-bg: var(--fgm-encre); --fgm-surface: var(--fgm-gray-900); --fgm-surface-alt: var(--fgm-gray-950); --fgm-surface-soft: rgba(255, 255, 255, .06); --fgm-texte: var(--fgm-blanc); --fgm-texte-second: var(--fgm-gray-300); --fgm-texte-tertiaire: var(--fgm-gray-400); --fgm-texte-inverse: var(--fgm-encre); --fgm-bordure: rgba(255, 255, 255, .14); --fgm-bordure-forte: rgba(255, 255, 255, .24); --fgm-ombre-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .25); --fgm-ombre-md: 0 2px 4px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .35); --fgm-ombre-lg: 0 4px 8px rgba(0, 0, 0, .26), 0 16px 48px rgba(0, 0, 0, .42); color-scheme: dark; } /* ------------------------------------------------------------------ Accessibilité : mouvement réduit — toute animation non essentielle est neutralisée (le contenu reste intégralement visible sans JS). ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --fgm-dur-rapide: 1ms; --fgm-dur-base: 1ms; --fgm-dur-lente: 1ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }