/* ========================================================================== PINAL SMART TECHNOLOGY — Design tokens Palette dérivée du logo (assets/logo-pinal.jpg) : navy, cyan, orange, jaune. ========================================================================== */ :root { /* --- Couleurs de marque --- */ --color-navy: #0b2545; --color-navy-dark: #071a33; --color-navy-light: #123a66; --color-cyan: #1cade4; --color-cyan-dark: #128bb8; --color-cyan-light: #6fd2f2; --color-orange: #f2871d; --color-orange-dark: #d9720e; --color-orange-light: #ffa94d; /* Orange assombri réservé aux boutons à texte blanc : ~4.8:1 sur blanc (--color-orange seul ne passe qu'à ~2.5:1, insuffisant pour WCAG AA). */ --color-orange-cta: #bd5209; --color-orange-cta-dark: #97420a; --color-yellow: #ffc93c; --color-yellow-dark: #e6a800; --color-whatsapp: #25d366; --color-whatsapp-dark: #1ebc59; /* Variante assombrie réservée au texte/icônes blancs sur fond WhatsApp : --color-whatsapp seul ne passe qu'à ~2:1 (insuffisant pour WCAG AA), même logique que --color-orange-cta ci-dessus. */ --color-whatsapp-cta: #178741; --color-whatsapp-cta-dark: #157a3b; /* Success/error légèrement assombris pour rester lisibles en texte (AA, ~4.6:1) sur fond blanc/gris clair ; usage en bordure conservait déjà une marge suffisante avant cet ajustement. */ --color-success: #198045; --color-error: #d23232; --color-warning: #e0a30d; /* --- Neutres --- */ --color-white: #ffffff; --color-gray-100: #f5f7fa; --color-gray-200: #e7ebf0; --color-gray-300: #d3d9e0; --color-gray-400: #c3cbd4; --color-gray-500: #7c8896; --color-gray-600: #5f6b7a; --color-gray-700: #4a5568; --color-gray-800: #2d3648; --color-gray-900: #1a202c; /* --- Rôles sémantiques --- */ --color-bg: var(--color-white); --color-bg-alt: var(--color-gray-100); --color-text: var(--color-gray-900); --color-text-muted: var(--color-gray-700); --color-border: var(--color-gray-200); /* Couleur de lien de contenu, distincte de --color-cyan-dark (icônes/hover) pour garantir ~5:1 sur fond blanc en texte courant. */ --color-link: #0f7999; --color-primary: var(--color-navy); --color-accent-tech: var(--color-cyan); --color-accent-energy: var(--color-orange); --color-accent-highlight: var(--color-yellow); /* --- Typographie --- Pile système en fallback pour rester autonome sans dépendance CDN ; Poppins/Inter chargées via Google Fonts (voir ) et utilisées en priorité quand disponibles. */ --font-heading: "Poppins", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --fs-xs: 0.8rem; --fs-sm: 0.9rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; /* Tailles fluides : évitent le retour à la ligne non maîtrisé du h1/h2 entre 390px (mobile) et 1440px+ (desktop). */ --fs-2xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); --fs-3xl: clamp(2rem, 1.55rem + 2.1vw, 2.75rem); --lh-tight: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; /* --- Espacements (échelle 4px) --- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-10: 4rem; --space-12: 6rem; /* --- Forme & effets --- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.06), 0 1px 3px rgba(11, 37, 69, 0.08); --shadow-md: 0 4px 10px rgba(11, 37, 69, 0.08), 0 2px 4px rgba(11, 37, 69, 0.06); --shadow-lg: 0 12px 28px rgba(11, 37, 69, 0.14); --transition-fast: 150ms ease; --transition-base: 220ms ease; /* --- Icônes --- */ --icon-sm: 20px; --icon-md: 26px; --icon-lg: 40px; /* --- Mise en page --- */ --container-max: 1200px; --header-height: 76px; --z-header: 100; --z-overlay: 200; }