/* ============================================================================= LFW.app — jetons de design ============================================================================= LE SEUL FICHIER QUI CONTIENT UNE COULEUR EN DUR. Mêmes noms que docs/superpowers/specs/. Le flip Bouleau = data-marque="bouleau" sur — aucune page touchée. ⚠️ N'ajoute jamais un hex dans une page, un style inline ou un . Les icônes SVG utilisent currentColor. ───────────────────────────────────────────────────────────────────────── ⚠️ CE FICHIER NE SUFFIT PAS ENCORE À FAIRE BASCULER LE TABLEAU DE BORD. Mesuré le 2026-08-15 : **1211 hex en dur dans 35 écrans** (`.tsx`/`.ts` de `dashboard-next/app` et `components` — 603 × #2E7D32, 294 × #1B4332). Tant qu'ils sont là, changer une valeur ici ne repeint que le site statique et les écrans déjà convertis. ⚠️ Le chiffre exclut `globals.css`, seul fichier où un hex a le droit de vivre. Une première mesure disait 1284 en le comptant — un compte qui inclut ce qu'on ne veut PAS voir baisser ne peut pas servir de garde-fou. Ce n'est pas une raison de ne pas avoir ce fichier — c'est la mesure de ce qui reste, et elle est suivie par `outils/hex-en-dur.mjs`. Un écran converti est un écran de moins dans ce compte ; quand il tombe à zéro, la promesse « une valeur à changer » devient vraie. Ne pas écrire ailleurs qu'ici que le compte est réglé avant qu'il le soit. ⚠️ ET LES POLICES NE SUIVENT PAS ENCORE LA BASCULE. Chaque surface ne charge que la moitié du jeu : le dashboard a Inter + Fraunces, le site a Inter + Plus Jakarta Sans. Donc `--titre` en LFW retombe sur Inter dans le dashboard, et `--sans` en Bouleau (Lato) retombe partout. Les couleurs basculent, la typo non — et une police qui retombe ne fait aucun bruit. ========================================================================== */ :root { /* Marque */ --vert: #2E7D32; /* vert principal — boutons, titres, liens */ --v900: #1B5E20; /* fonds foncés, pied de page, ET survol des pleins */ --v700: #1B5E20; /* survols — TRANCHÉ: un survol FONCE, jamais #388E3C (plus pâle = mauvais sens). Aligné sur --v900; le rôle "accent clair" n'existe plus. */ --v100: #f0fdf4; /* pastilles et fonds légers — aligné sur le design system (ex-#E8F5E9) */ --v100b: #dcfce7; /* bordure d'une pastille --v100 */ --vfonce:#166534; /* texte vert sur fond très clair — le plus foncé des verts de texte */ --camel: #A5D6A7; /* accent clair sur fond foncé */ /* Surfaces */ --creme: #f9fafb; /* fond de page — TRANCHÉ: gris pâle neutre; le vrai crème (#FAF7F0) appartient au thème Bouleau. #F7F9F7 disparaît. */ --surf1: #FFFFFF; /* cartes */ --surf2: #f3f4f6; /* sections alternées ET séparateurs discrets — neutre, plus de teinte verte */ --bord: #e5e7eb; /* bordures — slate neutre (ex-#DDE4DD) */ /* Texte — TRANCHÉ: slate neutre. En LFW le vert est réservé à l'accent; l'encre verdie (#1A2E1C) appartient au thème Bouleau. */ --texte: #111827; /* titres et corps fort */ --texte2:#374151; /* corps secondaire — plus foncé que --att, ce n'est PAS du texte atténué */ --att: #6b7280; /* texte atténué (ex-#5F6B60) */ --att2: #9ca3af; /* placeholders, méta (ex-#8A938B) */ --bord2: #d1d5db; /* champs, séparateurs (ex-#C7D0C7) */ /* ───────────────────────────────────────────────────────────────────────── CHROME — LA SURFACE DE NAVIGATION FONCÉE. C'EST UN RÔLE, PAS UNE NUANCE DE --vert. ⚠️ POURQUOI CE RÔLE EXISTE, ET C'EST LA LEÇON DU LOT. La barre latérale était `#1B4332` EN DUR parce que le jeu de jetons n'avait rien pour elle : ni `--vert` (qui l'éclaircirait à #2E7D32), ni rien d'autre. Devant ce vide on a deux mauvaises sorties — écraser avec un rôle qui ne veut pas dire ça, ou figer un hex qui ne basculera jamais. Les deux se sont produites dans ce dépôt. C'est la TROISIÈME collision de la même cause en une passe : `--titre` servait les titres ET les chiffres (→ `--chiffre`), le chrome n'avait aucun rôle (→ ici). **Ce n'est jamais une mauvaise valeur, c'est un rôle manquant** — et c'est ce qu'il faut chercher dans les écrans qui restent, avant d'écrire un hex. Foncé dans les deux thèmes, jamais la même valeur : la nav reste une nav, et elle bascule. Le désync avec le mobile n'existerait qu'en Bouleau, qui dort — le jour où la marque change, le mobile change avec. ───────────────────────────────────────────────────────────────────────── */ --chrome: #1B4332; /* fond de la barre latérale — aligné sur l'app mobile */ --chrome-texte: #FFFFFF; /* texte et icônes posés dessus */ --chrome-survol: #234d38; /* rangée survolée ou courante */ --chrome-bord: #234d38; /* séparateurs internes */ /* Rôles de chrome — ce que le logo, l'élément actif et le héros portent. ⚠️ `--nav-actif-*` DÉCRIT L'INVERSION DE CD (pastille claire sur fond foncé) et n'est PAS encore branché : shadcn peint aujourd'hui le survol ET l'élément courant avec `--chrome-survol`. Les deux rôles ne font donc pas doublon — l'un est l'état d'aujourd'hui, l'autre attend la refonte de la nav. Ne pas en supprimer un en croyant nettoyer. */ --logo-fond: #FFFFFF; --logo-texte: #2E7D32; --nav-actif-fond: #FFFFFF; --nav-actif-texte: #1B5E20; --hero-cta-fond: #FFFFFF; --hero-cta-texte: #166534; /* Alerte — ⚠️ LE ROUGE EST UN JETON, PAS UNE PERMISSION. CLAUDE.md le verrouille: jamais sur ce qui décrit un CANDIDAT (disponibilité, complétude, statut, verdict) — ambre ou gris là, et c'est légal, pas cosmétique. Il est légitime sur le retard de l'EMPLOYEUR et sur une erreur système. Le compte à rebours d'attente a ses propres jetons dans globals.css. */ --erreur: #EF4444; --erreur-fond: #fee2e2; /* Ambre — la pastille de DISPONIBILITÉ PARTIELLE (◐), rien d'autre. Vient du paquet de CD, utilisé par les pages publiques. ⚠️ `--ambre` vaut EXACTEMENT `--waiting-late-text` (#B45309), et ce n'est pas une raison de fusionner les deux. Ce sont deux OBJETS : ici c'est un candidat dont les dispos couvrent une partie des exigences ; là c'est le compte à rebours de l'EMPLOYEUR qui approche de sa limite. Le jour où l'un des deux bouge, l'autre ne doit pas suivre — un seul jeton les ferait bouger ensemble et personne ne s'en apercevrait. ⚠️ Et la règle légale s'applique ici, pas là : le rouge est INTERDIT sur ce qui décrit un candidat (Loi 25). L'ambre est la teinte la plus forte que cette pastille ait le droit de porter. Ne jamais la remplacer par --erreur. ⚠️ Le suffixe est `-bg` et non `-fond` alors que tout le reste du fichier est en français. C'est le nom que les pages de CD consomment : le renommer voudrait dire éditer ses pages, et sa prochaine livraison ramènerait `-bg`. Même arbitrage que `data-marque` — le nom du livrable gagne sur la cohérence. */ --ambre: #B45309; --ambre-bg: #FCEFD4; /* Typographie — TRANCHÉ: UNE police de titre par thème. LFW = Plus Jakarta Sans. Fraunces n'existe que sous data-marque="bouleau". ⚠️ LA FORME `var(--font-x, 'X')` N'EST PAS DE LA COQUETTERIE — LES DEUX SURFACES NE NOMMENT PAS LEURS POLICES PAREIL. Le dashboard passe par `next/font`, qui AUTO-HÉBERGE au build sous un nom de famille généré et ne l'expose que via `--font-inter` / `--font-fraunces` : y écrire le nom littéral 'Fraunces' ne résout RIEN et retombe sur Georgia. Le site statique, lui, charge Google Fonts et ne connaît que le nom littéral. La variable d'abord, le littéral en repli : chaque surface prend la branche qu'elle possède, et aucune ne casse. ⚠️ Et un repli de police est SILENCIEUX. Personne ne verra la différence entre « Fraunces ne s'est pas chargée » et « Fraunces n'était pas demandée ». */ --sans: var(--font-inter, 'Inter'), -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --titre: var(--font-jakarta, 'Plus Jakarta Sans'), var(--font-inter, 'Inter'), sans-serif; /* ⚠️ AJOUT AU SYSTÈME DE CD — À LUI FAIRE VALIDER, ce n'est pas une application. CD tranche « une police de titre par thème », ce qui retirerait Fraunces des chiffres du tableau de bord en LFW. Or la donnée géante est la signature du produit : c'est elle qu'on reconnaît d'un écran à l'autre, et elle doit rester la même quand la marque change. D'où un rôle distinct de --titre, stable dans les deux thèmes. Si CD refuse, c'est UNE valeur à changer ici. */ --chiffre: var(--font-fraunces, 'Fraunces'), Georgia, 'Times New Roman', serif; /* Signature — la donnée en géant (nouvelle) */ --geant: clamp(40px, 6vw, 64px); /* le chiffre-décision; un par écran */ --geant-hero: clamp(48px, 7vw, 72px); /* héros Achats seulement */ --ls-geant: -0.02em; /* Rythme */ --r-carte: 16px; /* rayon des cartes */ --r-btn: 16px; /* TRANCHÉ: 16px partout — la règle de marque; le 12px disparaît, deux rayons: 16 + pill */ --r-pill: 999px; --tap: 48px; /* Ombres — flottant seulement (modal + CTA primaire). Cartes de liste: bordure hairline, JAMAIS d'ombre; survol = border-color: var(--vert). */ --ombre-cta: 0 4px 12px rgba(46, 125, 50, 0.30); --ombre-cta-max: 0 6px 20px rgba(46, 125, 50, 0.40); /* survol du CTA primaire */ --ombre-survol: 0 8px 24px rgba(46, 125, 50, 0.12); /* survol d'une carte cliquable */ --ombre-modal: 0 20px 40px rgba(0, 0, 0, 0.10); } /* ============================================================================= THÈME BOULEAU — dépôt de marque confirmé, classes 35 & 42. Complet et équivalent: chaque rôle ci-dessus a sa valeur ici. ⚠️ « Équivalent » se vérifie, ça ne se déclare pas. Un rôle oublié ici ne produit AUCUNE erreur: il hérite de la valeur LFW et laisse une tache verte au milieu du crème. Comparer les deux blocs rôle par rôle avant de commiter. ========================================================================== */ [data-marque="bouleau"] { /* Marque */ --vert: #1B4332; /* vert forêt */ --v900: #132F23; --v700: #132F23; --v100: #FBF3DE; --v100b: #F1E3BC; --vfonce:#1B4332; --camel: #FFD580; /* LE camel — CTA hero, logo, états actifs sur fond foncé */ /* Surfaces */ --creme: #FAF7F0; /* le vrai crème */ --surf1: #FFFFFF; --surf2: #F2EDE2; --bord: #E8E1D2; /* Texte — encre tirée vers le vert: ici, oui */ --texte: #1F2A24; --texte2:#44534A; --att: #7C8A80; --att2: #A8B3A9; --bord2: #D8CFBC; /* Chrome — la nav descend d'un cran vers le vert le plus profond, et le survol remonte sur le vert forêt. Foncé, comme en LFW, mais lisiblement Bouleau. */ --chrome: #132F23; --chrome-texte: #FAF7F0; --chrome-survol: #1B4332; --chrome-bord: #1B4332; /* C'est ICI que le camel prend la place du blanc. */ --logo-fond: #FFD580; --logo-texte: #1B4332; --nav-actif-fond: #FFD580; --nav-actif-texte: #1B4332; --hero-cta-fond: #FFD580; --hero-cta-texte: #1B4332; /* Alerte — identique aux deux thèmes: une erreur système n'est pas de la marque. */ --erreur: #EF4444; --erreur-fond: #fee2e2; /* Ambre — l'encre se réchauffe et le fond se crème, comme le reste du thème. */ --ambre: #8A5A12; --ambre-bg: #FBF0D8; /* Typographie — ⚠️ AUCUNE DES DEUX SURFACES NE CHARGE LATO AUJOURD'HUI. Le repli est donc actif partout en Bouleau, et il est muet. À charger avant la bascule. */ --sans: var(--font-lato, 'Lato'), -apple-system, sans-serif; --titre: var(--font-fraunces, 'Fraunces'), Georgia, serif; --chiffre: var(--font-fraunces, 'Fraunces'), Georgia, 'Times New Roman', serif; /* Ombres */ --ombre-cta: 0 4px 12px rgba(27, 67, 50, 0.30); --ombre-cta-max: 0 6px 20px rgba(27, 67, 50, 0.40); --ombre-survol: 0 8px 24px rgba(27, 67, 50, 0.12); }