/* ===================================================================== MANIÈRE CUT PLUS — LE JEU DE JETONS --------------------------------------------------------------------- À charger APRÈS mc-v6.css et AVANT mc-boutons.css. Sa place compte : il doit gagner sur les définitions de style.css et mc-v5.css, et être disponible pour les feuilles qui suivent. LE PROBLÈME Trois vocabulaires nommaient les mêmes choses : style.css --primary, --bg, --surface, --text, --border… mc-v5.css --mc-cut, --mc-carbon, --mc-steel, --mc-ink, --mc-line… et redéfinissait par-dessus tous ceux de style.css devis.css --dv-rouge, --dv-bg, --dv-surface, --dv-texte… S'y ajoutaient les jetons que j'ai moi-même introduits en chemin (--b-* pour les boutons, --role-* pour les couleurs) et 78 valeurs hexadécimales écrites en dur. Pour changer une couleur, il fallait la chercher dans quatre feuilles, deviner laquelle l'emporte, et vérifier à la main que rien d'autre n'en dépendait. J'ai buté trois fois dessus pendant les chantiers précédents : deux palettes claires concurrentes, des jetons de bouton qu'il a fallu inventer faute d'échelle partagée, et un style injecté par le JavaScript qui échappait à l'ordre des feuilles. CE QUE FAIT CE FICHIER Il pose UN vocabulaire, nommé par les rôles du métier. Puis il redéfinit les trois anciens EN FONCTION de celui-ci. Rien ne casse : --primary, --mc-cut et --dv-rouge continuent de marcher, mais ils désignent désormais la même source. Changer le rouge de l'application est devenu UNE ligne. Les valeurs reprises ci-dessous sont celles qui s'affichent réellement aujourd'hui — celles de mc-v5.css, qui gagnait. Ce fichier ne déplace donc rien à l'écran : il range. ===================================================================== */ :root { /* ── LES SURFACES ────────────────────────────────────────────────── De la plus profonde à la plus haute, comme on empile des plaques sur un établi. */ --fond: #08090B; --plan: #121419; --plan-haut: #191C23; --plan-creux: #22262F; --champ: #0B0D11; --entete: #0F1116; --filet: #2C313B; --survol: rgba(255, 255, 255, .035); /* ── LE TEXTE ──────────────────────────────────────────────────── */ --texte: #F3F5F8; --texte-doux: #8C94A3; /* ── LES RÔLES ───────────────────────────────────────────────────── Nommés par ce qu'ils veulent dire, pas par leur teinte. Un jeton qui s'appelle « --rouge » finit employé partout où quelque chose doit être rouge ; « --role-couper » ne s'emploie que là où on coupe. C'est la règle posée au chantier 03. */ --role-couper: #E12D2D; --role-couper-fonce: #A81C1C; --role-couper-voile: rgba(225, 45, 45, .14); --role-attente: #D9A441; --role-attente-fond: rgba(217, 164, 65, .12); --role-attente-fil: rgba(217, 164, 65, .34); --role-attente-plein: #D9A441; --role-acquis: #17C08A; --role-alerte: #EF4444; --role-structure: var(--texte-doux); --role-choisi-fond: rgba(255, 255, 255, .055); /* ── LES CARACTÈRES ────────────────────────────────────────────── */ --police-titre: 'Archivo', system-ui, sans-serif; --police-corps: 'Public Sans', system-ui, sans-serif; --police-chiffre: 'JetBrains Mono', ui-monospace, monospace; /* ── LES FORMES ──────────────────────────────────────────────────── Trois rayons, pas neuf. Cinq pas d'espacement, pas trente-deux valeurs improvisées. */ --rayon: 14px; --rayon-s: 9px; --rayon-l: 18px; --pas-1: 4px; --pas-2: 8px; --pas-3: 14px; --pas-4: 22px; --pas-5: clamp(16px, 3.2vw, 28px); --ombre: 0 18px 44px -22px rgba(0, 0, 0, .85); } /* ===================================================================== LE THÈME CLAIR --------------------------------------------------------------------- Seules les surfaces et le texte changent. Les rôles gardent leur teinte : le rouge qui coupe reste le rouge qui coupe, sur fond clair comme sur fond sombre — sinon ce n'est plus le même signal. Le rouge est simplement assombri pour tenir le contraste sur du blanc : #E12D2D sur fond clair passe tout juste, #C81E1E est franc. ===================================================================== */ :root[data-theme="light"] { --fond: #EEF0F3; --plan: #FFFFFF; --plan-haut: #F7F8FA; --plan-creux: #EDEFF3; --champ: #FBFCFD; --entete: #F5F7F9; --filet: #DCE0E7; --survol: rgba(0, 0, 0, .025); --texte: #10131A; --texte-doux: #5F6773; --role-couper: #C81E1E; --role-couper-fonce: #9B1414; --role-couper-voile: rgba(200, 30, 30, .12); --role-attente: #7C5A11; --role-attente-plein:#C99A38; --role-acquis: #0F7A55; --role-choisi-fond: rgba(0, 0, 0, .045); --ombre: 0 16px 38px -24px rgba(15, 23, 42, .45); } /* ===================================================================== LES ANCIENS NOMS, RAMENÉS À LA SOURCE --------------------------------------------------------------------- Chacun continue de fonctionner, mais ne porte plus de valeur propre. Cette liste est le plan du déménagement : elle rétrécira à mesure que les feuilles adopteront les noms de gauche, et le jour où elle sera vide, il n'y aura plus qu'un vocabulaire. ⚠️ NE JAMAIS faire pointer un jeton canonique vers un ancien nom : mc-couleurs.css définissait --role-couper: var(--primary), et --primary vaut maintenant var(--role-couper). La boucle rendait le jeton invalide et la couleur disparaissait. Le sens est toujours ancien → canonique, jamais l'inverse. ===================================================================== */ :root, :root[data-theme="light"] { /* Vocabulaire de style.css */ --primary: var(--role-couper); --primary-dark: var(--role-couper-fonce); --bg: var(--fond); --surface: var(--plan); --surface-hover: var(--plan-haut); --text: var(--texte); --text-light: var(--texte-doux); --border: var(--filet); --success: var(--role-acquis); --danger: var(--role-alerte); --input-bg: var(--champ); --th-bg: var(--entete); --bar-bg: var(--entete); --table-hover: var(--survol); --waste-bg-1: var(--plan-haut); --waste-bg-2: var(--plan); /* Les repères des colonnes du tableau des cotes. Le seul endroit où la couleur empêche une erreur qui coûte une barre d'aluminium. */ --col-larg: var(--role-couper); --col-haut: var(--texte-doux); /* Vocabulaire de mc-v5.css */ --mc-carbon: var(--fond); --mc-steel: var(--plan); --mc-steel-2: var(--plan-haut); --mc-steel-3: var(--plan-creux); --mc-line: var(--filet); --mc-ink: var(--texte); --mc-mute: var(--texte-doux); --mc-cut: var(--role-couper); --mc-cut-soft: var(--role-couper-voile); --mc-brass: var(--role-attente); --mc-mint: var(--role-acquis); --mc-display: var(--police-titre); --mc-body: var(--police-corps); --mc-data: var(--police-chiffre); --mc-r: var(--rayon); --mc-r-s: var(--rayon-s); --mc-gap: var(--pas-5); --mc-shadow: var(--ombre); /* Vocabulaire de devis.css — il aliasait déjà vers le cœur, on le branche directement pour éviter un rebond de plus. */ --dv-rouge: var(--role-couper); --dv-rouge-fonce: var(--role-couper-fonce); --dv-bg: var(--fond); --dv-surface: var(--plan); --dv-surface-2: var(--plan-haut); --dv-texte: var(--texte); --dv-gris: var(--texte-doux); --dv-bord: var(--filet); --dv-vert: var(--role-acquis); --dv-rayon: var(--rayon-s); } /* ===================================================================== LES DERNIERS RÉCALCITRANTS --------------------------------------------------------------------- Après le branchement, changer --role-couper fait basculer 150 éléments sur 163. Les treize qui résistent sont des teintes écrites à la main DANS une règle, pas dans un jeton : un dégradé de bouton, un voile rgba() recopié, une bordure d'un ton légèrement différent. Ils sont ramenés ici. Ce ne sont pas des cas particuliers : ce sont les endroits où quelqu'un a eu besoin d'une variante et l'a écrite sur place faute de jeton pour la porter. C'est exactement ce que ce fichier existe pour empêcher. color-mix() dérive les variantes de la source : le dégradé du bouton d'achat s'éclaircit et s'assombrit autour du rouge canonique au lieu de figer deux teintes cousines. ===================================================================== */ /* Le dégradé des boutons d'achat, dérivé au lieu d'être recopié. */ .btn-price-order, .btn-hero-primary { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--role-couper) 88%, #FFFFFF), var(--role-couper) 55%, color-mix(in srgb, var(--role-couper) 84%, #000000) ); } /* Le badge « fournisseur » de l'annuaire portait son voile rouge écrit à la main. Il est corrigé à la source, dans mc-annuaire.js, plutôt qu'ici : sa règle est injectée par un