/************************************************************ * Inspection Strux — design tokens * * PALETTE DE MARQUE, adoptée le 2026-09-17 à partir du logo livré par le * client et de BRANDING.md (spec de Claude Design). Elle remplace la palette * ambre/olive héritée du gabarit Aurox. La table de correspondance * ancien -> nouveau est dans BRANDING-MAP.md, à la racine du dépôt. * * Awning (Bootstrap 5 HTML template) supplies the STRUCTURE. * Aurox (WordPress/Elementor theme) supplied the DESIGN VALUES — geometry * only, since 2026-09-17. Every colour below now comes from the logo. * * Load order: bootstrap.min.css (grid only) -> all.min.css (Font Awesome) -> * fonts.css -> THIS FILE -> strux.css. That is the whole list, and strux.css * is the whole design layer. * * Awning's custom.css and animate.css were never loaded by any page. Both were * DELETED from the repo and the server on 2026-09-06; a copy is kept out of * the deploy in sources/css-retire-2026-09-06/ with the reasoning. Do not * redeposit them here — read a value out of the copy and write it into this * file or strux.css. * * * L'ACCENT EST UNE PAIRE, PAS UNE VALEUR — et c'est LE point de ce fichier * ------------------------------------------------------------------------ * L'ancienne palette n'avait besoin que d'UN accent parce que l'ambre #F7880A * était lisible (de justesse) sur fond clair comme sur fond foncé. Le bleu du * logo ne l'est pas. Mesuré, sRGB, WCAG 2.1 : * * #80B0D0 sur blanc ........... 2.32 ÉCHEC * blanc sur #80B0D0 ........... 2.32 ÉCHEC * #80B0D0 sur encre #202020 ... 7.01 AA * #3D6E92 sur blanc ........... 5.46 AA * blanc sur #3D6E92 ........... 5.46 AA * #3D6E92 sur encre #202020 ... 2.98 ÉCHEC * * Inversion nette : aucun des deux bleus ne tient sur les deux fonds, et * chacun est fort exactement là où l'autre échoue. Ce n'est pas un défaut de * la palette, c'est la logique du logo lui-même — la marque pose son bleu * contre un mot-clé noir, jamais contre du blanc à taille de texte * (BRANDING.md §2, règles 1 et 2). * * COMMENT LE FOND EST CHOISI, et pourquoi ce n'est pas une liste de règles : * les quatre sections foncées du site — .hero, .bandeau, .page-entete, .pied — * REDÉCLARENT --accent-ground-rgb, --accent-contraste et --accent-hover-rgb. * Les propriétés personnalisées héritent, donc TOUT var(--accent-color) écrit * dans strux.css devient automatiquement le bon bleu selon l'endroit où la * règle s'applique. Aucune règle n'a à connaître son fond. * * C'est délibérément l'inverse d'une liste de surcharges par sélecteur : une * liste ne protège que les règles qu'on a pensé à auditer, et la prochaine * règle écrite sur un fond foncé en sortirait illisible sans que rien ne le * signale. Voir la section « Fonds foncés » en tête de strux.css. * * --accent-contraste est le corollaire indispensable : le TEXTE posé sur un * aplat d'accent. Blanc sur #3D6E92 = 5.46 ; blanc sur #80B0D0 = 2.32. Sur * fond foncé l'étiquette bascule donc en encre (7.01) — ce qui est, encore, * l'appariement du logo : champ bleu, marque noire. * * Note : l'ancien ambre échouait au même test (blanc sur #F7880A = 2.48). * Chaque .bouton--accent du site était sous AA avant aujourd'hui. Cette * palette corrige un défaut existant, elle n'en introduit pas. ************************************************************/ :root { /* ---- Les couleurs de marque, AUTORISÉES UNE SEULE FOIS CHACUNE ------- Chaque couleur de marque est écrite ici en triplet RGB, et toutes ses autres formes en descendent. C'est ce qui fait d'un changement de palette un changement de VALEURS et non une chasse dans le CSS : une couleur translucide ne peut pas s'écrire en hexadécimal + alpha sans coder la couleur une deuxième fois, et c'est cette deuxième copie qui survit à la substitution et reste à l'ancienne teinte. Gardé par M01/M02. --------------------------------------------------------------------- */ --primary-rgb: 32 32 32; /* #202020 — noir du mot-clé STRUX */ --accent-rgb: 128 176 208; /* #80B0D0 — le X / « INSPECTION » */ --accent-deep-rgb: 61 110 146; /* #3D6E92 — même teinte, AA sur blanc */ --accent-dark-rgb: 43 79 107; /* #2B4F6B — survol/actif, 8.63 blanc */ --error-rgb: 179 64 58; /* #B3403A — rouge fonctionnel désaturé */ /* Ambre fonctionnel, ajouté le 2026-09-23 pour .alerte--avis. Défendable au regard de la règle de palette : --error-rgb est déjà documenté ici comme couleur FONCTIONNELLE, hors de la paire de marque, et celle-ci joue exactement le même rôle. Mesuré 5.57 sur blanc — le rouge voisin mesure 5.66, donc les deux avis se lisent avec le même poids. */ --warning-rgb: 143 94 10; /* #8F5E0A — ambre fonctionnel désaturé */ /* ---- L'aiguillage de fond ------------------------------------------- Les trois seules lignes que les sections foncées redéclarent. Tout le reste du fichier, et tout strux.css, en dépend sans le savoir. --------------------------------------------------------------------- */ --accent-ground-rgb: var(--accent-deep-rgb); --accent-hover-rgb: var(--accent-dark-rgb); --accent-contraste: #FFFFFF; --primary-color: rgb(var(--primary-rgb)); --accent-color: rgb(var(--accent-ground-rgb)); --accent-hover: rgb(var(--accent-hover-rgb)); --error-color: rgb(var(--error-rgb)); --warning-color: rgb(var(--warning-rgb)); /* Le bleu clair nommé explicitement, pour les rares endroits qui doivent le désigner sans passer par l'aiguillage — le voile du héros n'en fait pas partie, il descend du primaire. */ --accent-on-dark: rgb(var(--accent-rgb)); --secondary-color: #FFFFFF; --white-color: #FFFFFF; --black-color: #000000; /* 10 % du primaire, pas un gris fixe — donc il suit la palette. */ --divider-color: rgb(var(--primary-rgb) / .1); --dark-divider-color: #FFFFFF1A; /* ---- Encres et métaux (BRANDING.md §1) ------------------------------ --text-color a quitté #767676 (neutre chaud, accordé à l'ambre) pour l'encre douce du logo. 5.33 sur blanc, 4.81 sur le fond chaud : la marge dont la surface alternée ci-dessous a besoin. --------------------------------------------------------------------- */ --ink-soft: #3A3A3A; /* texte secondaire — 11.37 sur blanc */ --text-color: #6B6B6B; /* corps, légendes — 5.33 sur blanc */ --metal-mid: #8A8F94; /* 3.26 — GROS TEXTE ET FILETS SEULEMENT */ --metal-light: #C9CDD1; /* hairlines, états désactivés */ /* ---- Les deux fonds, et pas un de plus ------------------------------ BRANDING.md §2 règle 5 : maximum deux couleurs de fond par page, blanc + --background-color. --background-alt n'est PAS une troisième couleur de page : il sert aux blocs posés SUR le fond chaud, qui deviendraient invisibles en reprenant la même valeur (voir .encadre dans strux.css). L'ancienne valeur était #FFF8ED, une crème chaude choisie pour aller sous l'ambre ; sous un bleu acier elle lit comme du papier jauni. ATTENTION au texte sur --background-alt : --text-color y mesure 4.21 et ÉCHOUE. Les blocs qui l'utilisent passent à --ink-soft (8.98). --------------------------------------------------------------------- */ --background-color: #F5F3F0; /* sections alternées, cartes */ --background-alt: #E8E4DE; /* blocs posés sur le fond chaud */ /* ---- Typography ---------------------------------------------------- INCHANGÉE. BRANDING.md §3 : « Si le template impose déjà une police, la garder et ne changer que les couleurs. » Instrument Sans est hébergée ici depuis le 2026-09-06 (Loi 25, aucune requête tierce) — la remplacer par Archivo + Source Sans 3 signifierait rapatrier deux familles de plus pour un gain nul. Le traitement « INSPECTION » du logo, lui, EST repris : voir .eyebrow dans strux.css. --------------------------------------------------------------------- */ --default-font: "Instrument Sans", sans-serif; --accent-font: "Instrument Sans", sans-serif; /* ---- Image slots --------------------------------------------------- Every content image is a named slot with a FIXED aspect ratio so that dropping in a real photograph later cannot change section height or reflow the page. Ratios are taken from Awning's own grey placeholders, which are stamped with the pixel size each slot was designed for. L'inventaire des neuf fichiers attendus est dans IMAGES.md. --------------------------------------------------------------------- */ --ratio-portrait: 262 / 368; /* about-img-1 and siblings */ --ratio-landscape: 16 / 9; --ratio-square: 1 / 1; --ratio-hero: 1920 / 1080; } /* Every content image renders through this. object-fit keeps the frame's dimensions authoritative, so a swapped photograph is a file drop and never a layout change. Never absolutely position copy over one of these in a way that depends on the specific photograph. */ .img-slot { display: block; width: 100%; aspect-ratio: var(--slot-ratio, var(--ratio-landscape)); overflow: hidden; background-color: var(--divider-color); } .img-slot > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Placeholder styling for slots with no asset yet — deliberately obvious, so a temporary image is never mistaken for a final one during review. */ .img-slot--placeholder { display: flex; align-items: center; justify-content: center; background-color: var(--divider-color); color: var(--text-color); font-family: var(--default-font); font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; } .bg-surface { background-color: var(--background-color); }