/* ============================================================ tokens.css — Variables de conception (design tokens) Palette Nafida Pixel. Ratio d'usage : 45% offwhite, 25% night, 15% mist, 10% pixel, 5% slate. ============================================================ */ :root { color-scheme: light; /* contrôles natifs et barres de défilement clairs */ /* --- Couleurs de marque --- */ --night: #0F2A4A; /* bleu nuit : fonds sombres, texte principal */ --pixel: #2563EB; /* bleu pixel : boutons, liens, accents */ --slate: #64748B; /* gris ardoise : texte secondaire, détails */ --mist: #E2E8F0; /* gris brume : surfaces douces, séparations */ --offwhite: #F8FAFC; /* blanc cassé : fond principal du site */ --text2: #475569; /* texte secondaire sur fond clair */ --sky: #60A5FA; /* bleu ciel : lueur, état actif sur fond nuit */ --slate-light: #94A3B8; /* ardoise claire : détails sur fond nuit */ --ice: #F1F5F9; /* quasi blanc : carrés de l'icône, cartes */ --white: #FFFFFF; /* --- Typographie --- */ --font-title: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-text: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-h1: clamp(2rem, 5vw, 3rem); /* échelle type du spec */ --fs-h2: clamp(1.25rem, 2.5vw, 1.5rem); --fs-body: 1rem; --lh-body: 1.6; /* --- Mise en page --- */ --container-max: 70rem; /* 1120px */ --container-pad: clamp(1.25rem, 5vw, 2rem); /* gouttière latérale */ --header-height: 4.5rem; --section-pad: clamp(3.5rem, 8vw, 6rem); /* rythme vertical */ /* --- Formes --- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; /* --- Ombres --- */ --shadow-soft: 0 10px 30px rgba(15, 42, 74, 0.08); --shadow-card: 0 4px 20px rgba(15, 42, 74, 0.06); /* --- États fonctionnels --- */ --error: #DC2626; /* erreur de validation (fond clair) */ --error-on-night: #FCA5A5; /* erreur de validation (fond nuit, contraste AA) */ /* --- Mouvement --- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 600ms; --dur-theme: 200ms; /* fondu des couleurs au changement de thème */ /* --- Thème sémantique (Clair par défaut) --- */ --bg: var(--offwhite); --bg-alt: var(--mist); --bg-night: var(--night); --surface: var(--white); --surface-raised: var(--offwhite); /* surface surélevée (modale de devis) */ --surface-ice: var(--ice); --surface-hover: var(--mist); /* survol d'une commande sans fond propre */ --border: var(--mist); --border-control: var(--slate); /* contour d'un composant actif (champ, puce) : 4,8:1 */ --border-subtle: rgba(15, 42, 74, 0.12); --text: var(--night); --text-muted: var(--text2); --text-muted-more: var(--slate); --text-muted-light: var(--slate-light); --text-on-night: var(--white); --text-on-night-soft: var(--mist); /* texte courant sur un fond nuit */ --text-muted-night: var(--slate-light); --accent: var(--pixel); --accent-subtle: rgba(37, 99, 235, 0.1); --accent-night: var(--sky); --accent-night-subtle: rgba(96, 165, 250, 0.14); /* aussi la lueur décorative du catalogue Services */ --accent-night-pill: rgba(96, 165, 250, 0.08); /* pastille « Réponse sur mesure » : 4,9:1 avec --sky */ --accent-contrast: var(--white); --btn-primary-bg: var(--pixel); /* bouton principal : fond */ --btn-primary-text: var(--white); /* bouton principal : texte */ --accent-hover: #1D4FD8; --whatsapp-glow: rgba(18, 140, 126, 0.35); --accent-shadow: rgba(37, 99, 235, 0.35); --accent-shadow-hover: rgba(37, 99, 235, 0.45); --link: var(--pixel); --link-hover: var(--night); --focus-ring: var(--pixel); --focus-ring-night: var(--sky); --overlay: rgba(15, 42, 74, 0.62); --shadow: var(--shadow-soft); --shadow-card-ui: var(--shadow-card); --shadow-modal: 0 24px 60px rgba(15, 42, 74, 0.35); --accent-halo: rgba(37, 99, 235, 0.14); /* anneau du choix sélectionné */ --accent-halo-strong: rgba(37, 99, 235, 0.16); /* anneau du bloc visé par une ancre (#real-x) */ --border-hover: rgba(226, 232, 240, 0.6); /* contour d'un champ au survol */ --header-bg: var(--offwhite); --footer-bg: var(--night); --footer-text: var(--mist); /* --- Variables immuables (décoration, marque) --- */ --hero-bg: var(--night); --hero-dots: rgba(148, 163, 184, 0.08); --hero-grid-from: #14294A; --hero-grid-to: #3B4F6B; --hero-grid-lit: #2563EB; --hero-glow-center: #2563EB; --hero-glow-edge: #60A5FA; --hero-icon-sq-light: var(--ice); /* carrés clairs de l'icône */ --hero-icon-sq-muted: var(--slate-light); --hero-icon-sq-accent: var(--sky); --hero-label-text: var(--night); /* étiquette sous un carré */ --logo-sq-light: var(--ice); /* carrés clairs du logo (les deux variantes) */ --logo-slogan-inv: #CBD5E1; --surface-night-subtle: rgba(241, 245, 249, 0.05); --border-on-night: rgba(226, 232, 240, 0.16); --border-on-night-strong: rgba(226, 232, 240, 0.45); /* contour d'un champ sur fond nuit : 3,4:1 */ --border-on-night-accent: rgba(96, 165, 250, 0.5); /* survol d'une carte, contour */ --border-on-night-bright: rgba(255, 255, 255, 0.55); /* contour d'un bouton secondaire */ --surface-on-night-hover: rgba(255, 255, 255, 0.1); /* survol d'un bouton à contour */ --surface-on-night-hover-soft: rgba(241, 245, 249, 0.08); /* survol d'une carte */ --glow-hero-icon: rgba(96, 165, 250, 0.35); /* lueur du carré bleu de l'icône */ --cover-gradient: linear-gradient(135deg, rgba(37, 99, 235, 0.35), rgba(15, 42, 74, 0.9)); /* visuel des cartes « Exemple » */ --whatsapp: #128C7E; --whatsapp-light: #25D36F; --whatsapp-subtle: rgba(18, 140, 126, 0.12); } /* ============================================================ Thème sombre — activé par data-theme="dark" sur (posé par js/theme-init.js avant le premier rendu). Couleurs toutes dérivées de la marque : fond de page --night #0F2A4A, sections creusées un peu plus sombres, cartes et bordures en #E2E8F0 translucide, texte #F8FAFC, texte secondaire #94A3B8, liens et accents #60A5FA (5,5:1 sur le fond), bouton principal #2563EB sur texte blanc (5,2:1). Les variables immuables (--hero-*, logo, fonds « on-night ») ne sont pas touchées : le hero reste identique dans les deux thèmes. ============================================================ */ [data-theme="dark"] { color-scheme: dark; /* contrôles natifs et barres de défilement sombres */ /* Surfaces dérivées de #0F2A4A */ --bg: #0F2A4A; /* fond principal de la page */ --bg-alt: #0B2140; /* sections alternées, un cran plus sombres */ --bg-night: #091B33; /* bandeaux les plus creusés */ --surface: #1A3556; /* cartes */ --surface-raised: #1D395B; /* surface surélevée (modale de devis) */ --surface-ice: #1A3556; /* pastilles et fonds doux posés sur une carte */ --surface-hover: rgba(226, 232, 240, 0.1); /* survol discret sur fond sombre */ --border: rgba(226, 232, 240, 0.18); --border-control: rgba(226, 232, 240, 0.42); /* contour d'un composant actif : 3,1:1 */ --border-subtle: rgba(226, 232, 240, 0.1); --border-hover: rgba(226, 232, 240, 0.55); /* Textes */ --text: #F8FAFC; --text-muted: #94A3B8; --text-muted-more: #94A3B8; /* Accents : --sky est lisible sur le fond nuit, --pixel ne l'est pas */ --accent: #60A5FA; --accent-subtle: rgba(96, 165, 250, 0.16); --link: #60A5FA; --link-hover: #F8FAFC; --focus-ring: #60A5FA; --accent-halo: rgba(96, 165, 250, 0.24); --accent-halo-strong: rgba(96, 165, 250, 0.3); /* Bouton principal : le bleu pixel reste le fond, le texte reste blanc */ --btn-primary-bg: #2563EB; --btn-primary-text: #FFFFFF; /* Erreur de validation sur fond sombre */ --error: #FCA5A5; /* Icône WhatsApp : le vert de marque #128C7E ne tient que 2,9:1 sur une carte sombre ; on passe au vert clair officiel (6,3:1). */ --whatsapp: #25D366; --whatsapp-light: #25D366; /* Voiles et reliefs : plus profonds sur fond nuit */ --overlay: rgba(6, 16, 30, 0.72); --shadow-soft: 0 10px 30px rgba(3, 10, 20, 0.5); --shadow-card: 0 4px 20px rgba(3, 10, 20, 0.4); --shadow-modal: 0 24px 60px rgba(3, 10, 20, 0.65); --whatsapp-glow: rgba(37, 211, 102, 0.35); /* En-tête et pied de page */ --header-bg: #142C4C; --footer-bg: #0A1C33; }