/* ============================================================================= Inoma Canada — 01-tokens.css ----------------------------------------------------------------------------- Variables de design (design tokens). Source de vérité pour la palette, la typographie, les rayons, les ombres, les espacements et les durées. Aucune règle visuelle appliquée ici : uniquement des `--variables` sous :root. Les feuilles 02-base.css et suivantes consomment ces tokens. Toute couleur, tout rayon, toute ombre du site doit venir d'une variable définie ci-dessous — jamais d'une valeur en dur. PALETTE — relevée dans le logo et les designs d'emballage Inoma (voir docs/marque.md). Ce ne sont pas des couleurs inventées : le bleu marine #003058, l'or #F8C038 et l'argent #C0C8D0 sont échantillonnés dans le logo. POLICES (Google Fonts) — Archivo (titres et corps) + IBM Plex Mono (données). Elles sont chargées par un dans le de chaque page, PAS par un @import ici : un @import oblige le navigateur à d'abord télécharger cette feuille pour découvrir l'adresse des polices, puis à les demander — deux allers-retours en série avant le premier rendu. Le part en parallèle. Chaque page pose donc, dans cet ordre : POURQUOI CES DEUX-LÀ (2026-08-06, remplacent Manrope + Inter) * IBM Plex Mono règle un vrai défaut : `--police-mono` était une PILE SYSTÈME. Le numéro de certificat AHRI — la donnée que l'entrepreneur recopie dans le dossier de subvention de son client — était donc rendu par SF Mono, Cascadia ou DejaVu selon la machine. Trois dessins de zéro différents pour un numéro qu'on demande de lire chiffre par chiffre. Plex Mono le fixe, sur l'accueil comme sur chaque fiche produit. * Archivo porte un AXE DE CHASSE variable (wdth 62→125). On en tire trois voix dans une seule fonte : 75 % pour la mesure XL (elle tient sur une ligne à 150 px), 100 % pour le texte courant, 112 % pour les étiquettes de planche en petites capitales. Manrope ne proposait que la taille. ⚠️ L'URL est la partie fragile : écrite sous la forme ordinaire `family=Archivo:wght@400;700`, la propriété `font-stretch` ne fait RIEN et les trois voix s'effondrent en une seule, SANS qu'aucun script ne se plaigne. Le contrôle 10 de outils/verifier.mjs relit donc ce fragment dans les 8 pages. ========================================================================== */ :root { /* --------------------------------------------------------------------------- PALETTE BRUTE — noms internes. On ne change QUE ces valeurs pour re-thémer. Les noms sémantiques ci-dessous sont l'API stable consommée par les composants. --------------------------------------------------------------------------- */ --brut-marine: #003058; /* PRIMAIRE — lettrage du logo */ --brut-marine-fonce: #00223F; /* fonds profonds, pied de page */ --brut-marine-nuit: #001A31; /* le plus sombre — hero */ --brut-marine-clair: #104870; /* survols, dégradés */ --brut-marine-voile: #E7EEF5; /* voile bleu très clair — badges, états actifs */ --brut-or: #F8C038; /* ACCENT — arc du symbole du logo */ --brut-or-fonce: #E8A830; /* survol / bordure de l'or */ --brut-or-voile: #FDF3DC; /* voile or — bandeaux d'information */ /* Descendue d'un cran de luminance sous le marine nuit, teinte inchangée. C'est le fond de LA SEULE planche de nuit de l'accueil — la règle graduée. Une seule descente dans le noir par page : deux, et plus aucune ne compte. */ --brut-abysse: #000D19; /* L'argent poussé vers le cyan et éclairci. Sert les graduations et le réticule SUR la planche de nuit : l'argent (#C0C8D0) y tient la lisibilité, mais pas sur une tablette en plein jour. */ --brut-glace: #C8DCEA; --brut-argent: #C0C8D0; /* vague du logo — séparateurs, traits */ --brut-blanc: #FFFFFF; /* surface haute (cartes) */ --brut-nuage: #F4F7FA; /* fond de page — blanc froid */ --brut-brume: #E9EFF5; /* surface basse */ --brut-bordure: #D8E0E8; /* bordures fines */ --brut-encre: #0B1B2B; /* texte principal — noir bleuté */ --brut-ardoise: #4A5C6E; /* texte secondaire — AA 7:1 sur blanc */ --brut-ardoise-sombre:#3B4B5B; /* texte secondaire sur surface teintée */ /* États de validation */ --brut-succes: #1F7A4C; --brut-succes-fond: #E4F3EB; --brut-erreur: #C0392B; --brut-erreur-fond: #FBEAE7; /* Brun d'alerte — texte des pastilles SEER2 et des badges « en préparation ». Assombri le 2026-08-04 : #A96A00 ne donnait que 4,01:1 sur le voile crème, sous le seuil AA. Contrôlé par outils/verifier-contrastes.mjs. */ --brut-alerte: #8A5800; --brut-alerte-fond: #FDF3DC; /* Rouge feuille d'érable — RÉSERVÉ aux marqueurs « conçu pour le Canada ». Jamais une couleur d'interface (ni bouton, ni lien, ni état). Assombri le 2026-08-04 pour la même raison (4,28:1 sur son propre voile). */ --brut-erable: #C41F26; /* --------------------------------------------------------------------------- RÔLES SÉMANTIQUES — à consommer par les composants --------------------------------------------------------------------------- */ --couleur-fond: var(--brut-nuage); --couleur-surface: var(--brut-blanc); --couleur-surface-basse: var(--brut-brume); --couleur-surface-sombre: var(--brut-marine-fonce); --couleur-surface-nuit: var(--brut-marine-nuit); --couleur-bordure: var(--brut-bordure); --couleur-trait: var(--brut-argent); --couleur-texte: var(--brut-encre); --couleur-texte-secondaire: var(--brut-ardoise); --couleur-texte-sur-sombre: var(--brut-blanc); --couleur-texte-doux-sombre: #A9BDD0; /* secondaire sur marine — AA 5.6:1 */ --couleur-primaire: var(--brut-marine); --couleur-primaire-fort: var(--brut-marine-clair); --couleur-primaire-voile: var(--brut-marine-voile); --couleur-accent: var(--brut-or); --couleur-accent-fort: var(--brut-or-fonce); --couleur-accent-voile: var(--brut-or-voile); --couleur-accent-contraste: var(--brut-marine); /* texte posé SUR l'or : 7.7:1 */ --couleur-succes: var(--brut-succes); --couleur-succes-fond: var(--brut-succes-fond); --couleur-erreur: var(--brut-erreur); --couleur-erreur-fond: var(--brut-erreur-fond); --couleur-alerte: var(--brut-alerte); --couleur-alerte-fond: var(--brut-alerte-fond); /* Anneau de focus — accessibilité (WCAG AA), très visible sur les deux fonds */ --focus-anneau: var(--brut-marine-clair); --focus-anneau-clair: var(--brut-or); --focus-epaisseur: 3px; --focus-decalage: 2px; --couleur-voile: rgba(0, 26, 49, 0.62); /* fond de modale */ /* --- LA PLANCHE DE NUIT (accueil, règle graduée) ------------------------- */ --couleur-planche-nuit: var(--brut-abysse); --couleur-trait-nuit: var(--brut-glace); /* Quadrillage de calibration : DÉCOR PUR. Aucun texte ne s'y pose, aucune information ne s'y appuie — c'est pour ça qu'il a le droit d'être à 1,29:1. */ --couleur-trame-nuit: rgba(200, 220, 234, 0.14); /* « Vous êtes ici » — réticule, pastille active, filet de la ligne pointée du registre. L'or ne sert qu'à ça et au bouton principal : toute autre occurrence de --brut-or dans une feuille est un bug, et c'est grepable. */ --couleur-aiguille: var(--brut-or); /* --------------------------------------------------------------------------- TYPOGRAPHIE --------------------------------------------------------------------------- */ --police-titre: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --police-corps: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --police-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace; /* Chasses d'Archivo réellement employées. Trois voix, une seule fonte. Hors des bornes chargées (75..112), le navigateur synthétiserait la chasse en étirant les glyphes : ne pas sortir de cet intervalle. */ --chasse-serree: 75%; /* mesure XL — tenir un « −30 °C » de 150 px sur une ligne */ --chasse-normale: 100%; --chasse-large: 112%; /* étiquettes de planche en petites capitales */ /* Échelle typographique (mobile-first) */ --taille-xs: 0.75rem; /* 12 — mentions, badges */ --taille-sm: 0.875rem; /* 14 — labels, tableaux denses */ --taille-base: 1rem; /* 16 — corps */ --taille-md: 1.125rem; /* 18 — introductions */ --taille-lg: 1.375rem; /* 22 — sous-titres */ --taille-xl: 1.75rem; /* 28 — titres de section */ --taille-2xl: 2.25rem; /* 36 — titres de page */ --taille-3xl: 3rem; /* 48 — hero mobile */ --taille-4xl: 4rem; /* 64 — hero grand écran */ --graisse-normale: 400; --graisse-moyenne: 500; --graisse-semi: 600; --graisse-forte: 700; --graisse-extra: 800; --interligne-serre: 1.08; /* très grands titres */ --interligne-titre: 1.2; --interligne-corps: 1.65; --lettrage-titre: -0.025em; --lettrage-normal: 0; --lettrage-majuscule: 0.1em; /* surtitres en petites capitales */ --lettrage-etiquette: 0.16em; /* étiquettes de planche — chasse large, 11 px */ --lettrage-mesure: -0.04em; /* mesure XL : à 150 px, -0,025em ne suffit plus */ /* --------------------------------------------------------------------------- ESPACEMENTS — échelle 4 / 8 px --------------------------------------------------------------------------- */ --espace-1: 0.25rem; --espace-2: 0.5rem; --espace-3: 0.75rem; --espace-4: 1rem; --espace-5: 1.5rem; --espace-6: 2rem; --espace-7: 3rem; --espace-8: 4rem; --espace-9: 6rem; --espace-10: 8rem; /* Largeurs */ --largeur-contenu: 74rem; /* ~1184px — grille générale */ --largeur-large: 84rem; /* ~1344px — sections pleine largeur */ --largeur-texte: 42rem; /* ~672px — colonne de lecture */ --largeur-etroite: 26rem; /* ~416px — formulaires */ /* --------------------------------------------------------------------------- RAYONS — sobres, légèrement techniques (moins ronds que le grand public) --------------------------------------------------------------------------- */ --rayon-sm: 6px; --rayon-md: 10px; /* boutons, champs */ --rayon-lg: 16px; /* cartes */ --rayon-xl: 24px; /* grands blocs, hero */ --rayon-plein: 999px; /* pastilles, badges */ /* --------------------------------------------------------------------------- OMBRES — froides, teintées marine --------------------------------------------------------------------------- */ --ombre-xs: 0 1px 2px rgba(0, 34, 63, 0.06); --ombre-sm: 0 2px 8px rgba(0, 34, 63, 0.07); --ombre-md: 0 8px 24px rgba(0, 34, 63, 0.10); --ombre-lg: 0 20px 48px rgba(0, 34, 63, 0.15); --ombre-accent: 0 8px 20px rgba(232, 168, 48, 0.35); /* halo or sous les CTA */ /* --------------------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------------------- */ --duree-rapide: 120ms; --duree-moyenne: 200ms; --duree-lente: 320ms; --courbe: cubic-bezier(0.4, 0, 0.2, 1); --transition-douce: var(--duree-moyenne) var(--courbe); /* Deux courbes pour deux natures de geste, et pas une de plus. — planche : ce qui ARRIVE (tracé des filets, révélations). Sortie très amortie : le trait se pose comme une règle qu'on repose sur la table. — état : ce qui RÉPOND à la main (réticule, bascule de bordereau). Symétrique, sans dépassement : un instrument ne rebondit pas. */ --courbe-planche: cubic-bezier(0.16, 1, 0.3, 1); --courbe-etat: cubic-bezier(0.65, 0, 0.35, 1); --duree-trait: 480ms; --duree-etat: 220ms; --duree-reveler: 420ms; --trait-fin: 1px; --trait-moyen: 2px; /* Profondeurs */ --z-header: 100; --z-voile: 900; --z-modale: 1000; --z-toast: 1100; }