/* Design system Tastellers — SOURCE UNIQUE DE VERITE des jetons, côté pages réelles. Source : app/views/mockups/shared/_design_tokens.html.erb (la référence validée avec la cliente). Les valeurs ci-dessous en sont la copie EXACTE : gold 50→800, gold-primary / gold-deep, les 3 gradients, l'encre sur gold, l'échelle de neutres, le vert de succès, l'échelle d'espacement, les rayons et la transition standard. Si une valeur doit changer, elle change d'abord dans le partial de maquette, puis ici. Pourquoi ce fichier existe : le produit compte 58 feuilles de style pour ~18 000 lignes, dont 46 redéfinissent leurs propres couleurs en dur. On mesurait 9 variantes du même doré en circulation (#C4A559, #A38543, #D4BC7A, #BFA15C, #A8893C, #CDB563, #B19136, #B8994F, #E2BD74) et 4 variantes de l'encre sur doré. Chaque dérive correspondait à un ticket client. Les nouvelles feuilles consomment ces jetons ; les anciennes seront migrées une par une (voir test/assets/design_tokens_test.rb). Règle de marque : tout texte posé sur un fond doré est BLANC, avec une ombre de lisibilité (--on-gold / --on-gold-shadow). Seule exception validée (retour Tatianna #2619) : le badge « Vérifié », qui reste en écriture foncée sur fond doré. Chargé partout via `stylesheet_link_tag :app` (Propshaft sert tout le dossier app/assets, cf. ApplicationHelper#app_stylesheets_paths). */ :root { /* ── Gold : échelle 50 → 800 (valeur canonique unique) ── */ --gold-50:#FBF7EE; --gold-100:#F4EBD2; --gold-200:#E6D5A4; --gold-300:#D0B87E; --gold-400:#BFA15C; --gold-500:#A38543; --gold-600:#8A6F37; --gold-700:#6E582C; --gold-800:#4A3C1E; --gold-primary:#C4A559; /* gold vif de marque (accents, gradients) */ --gold-deep:#8A6B1F; /* #4732 (12/10/2026) — en-tête doré des fenêtres « Candidature et contact » et « Proposition de contact » (maquette Drive du 08/10, `.pm-head`). */ --gold-wash:linear-gradient(135deg,#FFFDF8 0%,#FAF0D8 55%,#F1E1B3 100%); --gold-wash-line:#EBDDB4; /* #4755 #4737 (12/10/2026) — messagerie « nouveau design » de Kevin (livraison du 11/10, validée par lui) : les ors que sa maquette écrit en dur et que l'échelle gold n'a pas. Valeurs LITTÉRALES de la source (le doré « Doux » remplace volontairement l'or de la plateforme, jugé trop lourd par Kevin) ; lues par `messagerie_nd.css` seulement. */ /* #4804 (13/10/2026) : cartes du haut des tableaux de bord, livraison de Kevin du 10/10 : les trois ors de sa feuille que l'échelle gold n'a pas. Valeurs LITTÉRALES de la source ; lues par `dashboard_cards.css` seulement. */ --dtc-gold-bar:#D9BE7B; /* départ du dégradé des jauges */ --dtc-gold-line:#DCCDA6; /* liseré au survol d'une ligne ou de la vignette */ --dtc-gold-ring:#E3D5B0; /* anneau de l'avatar, bord de la carte de recherche */ --nd-gold-edge:#E6C877; /* liseré doré au survol, carte choisie, avatar survolé */ --nd-gold-back-ink:#7A5416; /* texte de « Revenir à l'aperçu » */ --nd-gold-star:#DFA52B; /* étoile et anneau de focus du panneau réduit 08/10 */ --nd-crest-ink:#E5D4A0; /* écusson d'une maison masquée, sur brun */ --nd-presence-away:#C9A04A; /* présence « absent » du panneau réduit */ --nd-gold-soft-start:#E9D6A5; /* départ du dégradé doré « Doux » des boutons */ --nd-brown-start:#5E4B27; /* départ du dégradé marron (onglets actifs, compteurs) */ --nd-bub-line:#E4CF98; /* filet de la bulle envoyée et des cartes « en cours » (bulles Écrin, 12/10) */ --nd-bub-mid:#F4E7C4; /* milieu du dégradé de la bulle envoyée (bulles Écrin) */ /* Deux dorés de la SÉLECTION (maquette de la recherche, reposée le 25/09/2026). Ils ne se replient sur rien : le voisin le plus proche est à 14 unités perceptuelles, donc replier = repeindre, et c'est justement l'écart qu'on est en train de fermer. · --gold-edge : le liseré d'une case cochée, sur un aplat doré ; · --gold-on-ink : le chiffre du compteur, sur la barre presque noire. Ce sont les deux seuls endroits du produit qui les portent. S'ils se retrouvent ailleurs, c'est le signe qu'il faut les ranger dans l'échelle, pas les recopier. */ --gold-edge:#B08A1E; --gold-on-ink:#E8CC6E; /* gold profond (fills contrastés) */ /* ── Gradients gold (définis 1 fois) ── */ --gold-text-grad: linear-gradient(100deg,#C4A559,#E5D4A0,#A38543); /* titres / mots en gold */ --gold-fill: linear-gradient(135deg,#C4A559 0%,#D4BC7A 40%,#E5D4A0 70%,#EFE2B8 100%); /* fond des CTA / pills */ --gold-fill-deep: linear-gradient(135deg,#8A6B1F 0%,#A38543 38%,#C4A559 70%,#CDB264 100%); /* fond gold profond */ /* Retours Tatianna 01/10 (#4268, #4277) — « dégradé expresso, pas de noir » : les bandeaux sombres (Découverte, hero d'une Maison sans photo) passent du noir à ce brun, fait des jetons or et brun chaud existants. */ --espresso-fill: linear-gradient(135deg, var(--gold-700) 0%, var(--gold-800) 45%, var(--n-warm-700) 100%); /* ── Texte sur gold : BLANC partout (décision client) + ombre de lisibilité ── */ --on-gold:#FFFFFF; --on-gold-shadow: 0 1px 2px rgba(60,44,10,.45); /* ── Neutres ── */ --n-0:#FFFFFF; --n-50:#FAFAF8; --n-100:#F4F2EE; --n-200:#E5E2DC; --n-300:#C9C5BC; --n-400:#A8A399; --n-500:#8A857A; --n-700:#4A4640; /* Neutres CHAUDS. Les maquettes de la brique 3 écrivent deux gris beigés que l'échelle --n-* ne portait pas : #6E6250 pour le texte courant d'un écran posé sur crème, #7A6E5A pour son texte secondaire. Repliés sur --n-700 et --n-500 (24/09/2026, écran d'import du référentiel), ils viraient au gris froid et l'écart se voyait à l'œil nu contre la maquette. Quatre maquettes les portent chacun : c'est une couleur du produit, pas un accident. */ --n-warm-600:#6E6250; --n-warm-550:#8A7C63; --n-warm-500:#7A6E5A; /* L'échelle CHAUDE, complétée le 24/09/2026 par la campagne de parité. Les maquettes de la brique 3 travaillent sur crème et posent des neutres beigés à chaque niveau ; repliés sur l'échelle froide --n-*, ils viraient au gris et l'écart se voyait sur les titres, les chapôs et les bordures. Les valeurs sont celles des maquettes, pas une moyenne : c'est le rendu validé par le client qui fait référence. L'échelle ne porte QUE les niveaux réellement consommés : les quatre qui ne servaient plus après le recadrage du 24/09 (on ne retouche pas un écran validé à une brique précédente) ont été retirés plutôt que laissés morts. */ --n-warm-800:#3D3527; --n-warm-700:#2C2413; --n-warm-450:#8E8370; --n-warm-400:#9C9280; --n-warm-250:#DDD6C8; --n-warm-100:#E7E1D6; --n-warm-50:#FDFBF6; --n-900:#2C2C2C; --ink:#1A1614; /* texte quasi-noir (sur fond clair) */ /* #4274 (06/10/2026) — deux valeurs des écrans de recherche finaux du 12/09 (recherche Talent et recherche recruteur) que l'échelle ne portait pas : le gris ardoise du sous-titre d'accueil d'Auguste, et la pastille « en ligne » de son avatar dans la barre de recherche. */ --slate-600:#5C6270; --presence:#809A38; /* ── Vert de succès (unique) ── */ --green:#1B7A4E; --green-50:#EAF4EE; --green-200:#BFE0CC; /* ── Grille de Match (Perfect / Strong / Match) ── #4478 (06/10) : la fiche d'offre peignait tout score en vert. Les teintes de la Grille de Match (ai_score.css, maquette « Grille de Match » du 16/07) deviennent des jetons pour que toute surface qui affiche un score les reprenne : Perfect vert, Strong orange, Match doré (--gold-*). */ --match-perfect:#2D7A4F; --match-strong:#C0651F; --match-strong-50:#FBEFE2; --match-strong-200:#EBC9A6; /* ── Rouge de refus (unique) ── Le refus (« Décliner », menu danger, erreur destructive) n'avait pas de jeton : chaque feuille écrivait le sien. On en comptait 4 en circulation (#B0432F, #B23A2E, #B8322B, #B4442F), dont deux sur le MÊME écran (« Candidatures reçues » : la carte en #B0432F, l'aperçu latéral en #B23A2E). La valeur canonique retenue est celle de la carte, recruiter_applications.css, l'écran de référence de ce parcours. */ --red:#B0432F; --red-50:#FBF4F1; --red-200:#F0D9D1; /* #4507 (Kevin 05/10) — pastilles d'icône du menu déroulant de la barre : les teintes de catégorie déjà portées par les cartes du tableau de bord (doré, vert, bleu ardoise, rouge), sur fond blanc. */ --nav-ic-gold-bg:var(--gold-50); --nav-ic-gold:var(--gold-600); --nav-ic-green-bg:var(--green-50); --nav-ic-green:var(--green); --nav-ic-slate-bg:#EEF2F6; --nav-ic-slate:#4A5B70; --nav-ic-rose-bg:var(--red-50); --nav-ic-rose:var(--red); /* #4654 (08/10) — bloc « Inviter sur Tastellers » de la fenêtre membre, valeurs de la maquette `Etablissement_recruteur_edition_complet` : boutons de partage aux couleurs des deux réseaux, fond crème dégradé du bloc, fond de l'astuce. */ --share-linkedin:#2563EB; --share-whatsapp:#25D366; --invite-bg-top:#FFFDF7; --invite-bg-bottom:#FBF4E4; --invite-tip-bg:#FBF3DC; /* ── Encre et filet des APERÇUS LATÉRAUX ── L'aperçu talent (`.ts-page`, recruiter_talent_search.css) et l'aperçu d'une candidature (`.ra-overlay`) doivent rester identiques : c'est la demande #3191, « reprendre les mêmes codes graphiques que les autres aperçus ». Tant que chacun écrivait sa propre copie des cinq valeurs, la parité ne tenait qu'à ce que personne ne modifie l'une des deux. Une définition, deux consommateurs. Ces trois-là sont des variantes tièdes des jetons de base (--ink #1A1614, --n-200 #E5E2DC, --green #1B7A4E). Les replier dessus repeindrait un écran déjà validé par la cliente : c'est un arbitrage à lui soumettre, pas une correction à passer en silence. */ --preview-ink:#1E1C18; --preview-line:#E8E2D6; --preview-success:#2D7A4F; /* ── Ambre sémantique (arbitrage Loïc 06/08) ── Distinct du doré de marque : l'ambre porte un SENS (état intermédiaire), là où le doré porte l'identité. Sans ce jeton, la migration ramenait ces états sur le doré et les rendait indistinguables d'un élément décoratif. Usages : disponibilité « sous 2 semaines », visibilité « ouvert aux opportunités », fiabilité moyenne. */ --amber:#B0741E; --amber-strong:#9A6A1E; --amber-bright:#F5B301; --amber-fill:linear-gradient(135deg,#F6C453 0%,#E0A52E 100%); --amber-50:#FBF1E5; --amber-200:#F0DCC2; /* ── Espacement ── */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; /* ── Rayons ── */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px; /* ── Transition standard ── */ --t: .18s ease; } /* ── Utilitaires « définis 1 fois » (repris de _design_tokens.html.erb) ── */ /* Texte en dégradé gold (anti-crop de la dernière lettre intégré) */ .ds-gold-text { background: var(--gold-text-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; padding-right: .14em; margin-right: -.14em; } /* Fond gold + texte blanc (CTA, pill, badge) */ .ds-gold-fill { background: var(--gold-fill); color: var(--on-gold); text-shadow: var(--on-gold-shadow); } .ds-gold-fill * { color: var(--on-gold); } /* Garde-fou : plusieurs pages posent un reset `.page-x a { color: inherit }` qui, à specificité égale, reprend la main sur un CTA doré et le repasse en écriture foncée. La classe doublée passe devant sans !important. */ .ds-btn-gold.ds-btn-gold { color: var(--on-gold); text-shadow: 0 1px 1px rgba(0,0,0,.15); } /* ───────────────────────────────────────────────────────────────────────── Échelle or de l'ONBOARDING TALENT (maquette du 07/09/2026). Pourquoi une famille à part et pas les jetons --gold-* : la spec DEF du 09/09 (S19, point ouvert 7) pose l'or de la charte #A38543 SUR L'ONBOARDING SEULEMENT, et laisse les dashboards et la landing sur l'or précédent, « à aligner si on généralise ». Les deux échelles coexistent donc à dessein, et chacune a UNE source : c'est tout ce que le garde-fou du design system demande. Le jour où le client généralise, c'est ce bloc qui fusionne avec --gold-*. ───────────────────────────────────────────────────────────────────────── */ :root { --onb-gold: #A38543; /* or de la charte du 07/09 (spec DEF S19) */ --onb-gold-600: #8A6F37; /* or profond, bords et dégradés */ --onb-gold-soft: #C6AB5E; /* or adouci */ --onb-gold-200: #E6D5A4; /* palier clair */ --onb-gold-300: #D0B87E; /* palier clair */ --onb-gold-400: #BFA15C; /* palier moyen */ --onb-gold-700: #6E582C; /* palier sombre */ --onb-gold-btn-mid: #C2A24E; /* coeur du dégradé des boutons */ --onb-gold-btn-dark: #7A6128; /* bord du dégradé du CTA */ --onb-gold-shine: #E0C67C; /* reflet du filet du rail */ --onb-gold-warm: #B19136; /* chaud du dégradé du stepper */ --onb-gold-thumb: #B99640; /* pouce du sélecteur de prétentions */ --onb-gold-on-dark: #EBD9A2; /* encre claire sur fond espresso */ --onb-gold-badge: #B08A1E; /* encre de la pastille Match */ --onb-gold-check-hi: #E7C87F; /* haut du disque de validation */ --onb-gold-check-lo: #D3A94F; /* bas du disque de validation */ --onb-gold-sheen: #FFE093; /* balayage de validation */ --onb-gold-espresso-mid: #4A3B1C; /* milieu du dégradé espresso du CTA */ --onb-gold-sand: #E6C783; /* sable du fond de carte */ } /* ───────────────────────────────────────────────────────────────────────── Or de l'ONBOARDING RECRUTEUR (maquette validée le 02/10/2026, B3 tâche 082). Même raison d'être que la famille --onb-gold-* juste au-dessus : la maquette recruteur (bundle de Kevin) a sa propre échelle d'or, plus chaude. Les valeurs déjà présentes dans --onb-gold-* sont lues là ; celles-ci sont les seules que la feuille `recruiter_onboarding_page.css` ne trouvait nulle part. Une source par valeur, rien de plus. ───────────────────────────────────────────────────────────────────────── */ :root { --ronb-gold-deep: #8A7037; /* bords dorés profonds */ --ronb-gold-pale: #D0B67E; /* or pâle des filets */ --ronb-gold-cream: #E5D2A8; /* crème dorée des bordures */ --ronb-gold-200: #DAC28F; /* palier clair de la charte de Kevin */ --ronb-gold-sand: #D9C18D; /* sable des pastilles */ --ronb-gold-300: #C5A663; /* palier moyen de la charte de Kevin */ --ronb-gold-dark: #755E2D; /* encre dorée sombre */ --ronb-gold-linen: #EAD9B5; /* lin des fonds clairs */ --ronb-gold-ink: #6E592C; /* encre dorée des titres */ --ronb-gold-wheat: #E6D4AC; /* blé des bords de carte */ --ronb-gold-mid: #C3A35F; /* or moyen des dégradés */ --ronb-gold-straw: #E4D0A6; /* paille des séparateurs */ --ronb-gold-bronze: #B9964B; /* bronze des pastilles actives */ --ronb-gold-brass: #A58642; /* laiton des icônes */ } /* ───────────────────────────────────────────────────────────────────────── Or du TABLEAU DE BORD RECRUTEUR (maquette du 13/09/2026, B3 tâche 031). Même raison d'être que la famille --onb-* juste au-dessus : la maquette déposée par le client le 13/09 pose sept valeurs d'or que l'échelle --gold-* ne porte pas (un dégradé de bandeau en trois arrêts, un dégradé de jauge en deux, un médaillon et un filet pointillé). Les recopier telles quelles dans la feuille de l'écran, c'était rouvrir la dérive que ce fichier existe pour fermer : sept dorés de plus en circulation, sans source. Elles sont ici, donc nommées et uniques. Le reste de l'écran consomme l'échelle commune : --gold-200/300/500/700, --gold-50, --gold-metal (le dégradé estampillé du badge « Verified », déjà défini dans components.css) et la famille --amber-* pour les pastilles d'alerte. ───────────────────────────────────────────────────────────────────────── */ :root { --rdz-gold-wave-hi: #FFF3BE; /* haut du bandeau de la carte profil */ --rdz-gold-wave-mid: #E4C66D; /* coeur du bandeau */ --rdz-gold-wave-lo: #C99D3B; /* bas du bandeau */ --rdz-gold-bar-lo: #B98D36; /* début de la jauge « Profil complété » */ --rdz-gold-bar-hi: #E3CB81; /* fin de la jauge */ --rdz-gold-medallion: #D1B06A; /* pointe du médaillon « Voir mon profil public » */ --rdz-gold-dashed: #EBD3A0; /* filet pointillé du dossier « Non classé » */ } /* ───────────────────────────────────────────────────────────────────────── Échelle or du TABLEAU DE BORD TALENT (maquette finale du client, 13/09/2026 — tâche 055). Même raison que la famille --onb-gold-* juste au-dessus, et même portée limitée : le point ouvert 7 de la spec DEF (S19) pose l'or de la charte #A38543 SUR L'ONBOARDING SEULEMENT et laisse les tableaux de bord sur l'or précédent, « à aligner si on généralise ». Cette famille-ci porte donc les cinq valeurs propres au dégradé du tableau de bord du talent — la vague de la carte de profil, la barre de complétion et la place du badge Verified — sans toucher ni à --gold-*, ni à --onb-gold-*. Les valeurs que la maquette partage DÉJÀ avec le design system ne sont pas reprises ici : son ambre est --amber, son vert --green, son « off-market » #A38543 est --gold-500, et son #E6D5A4 est --gold-200. Le jour où le client tranche le point 7, ce bloc fusionne avec --gold-*. ───────────────────────────────────────────────────────────────────────── */ :root { --td-gold-ink: #A8893C; /* encre du prénom dans la salutation */ --td-gold-wave-hi: #FFF3BE; /* haut de la vague de la carte de profil */ --td-gold-wave-mid: #E4C66D; /* milieu de la vague */ --td-gold-wave-lo: #C99D3B; /* bas de la vague */ --td-gold-bar-from: #B98D36; /* départ de la barre de complétion */ --td-gold-bar-to: #E3CB81; /* arrivée de la barre, et place du badge Verified */ /* #4649 : maquette « Dashboard_Talent_7oct26 » (valeurs littérales). */ --tz-gold-ink: #8A6F37; /* prénom, teinte Off-market, pastilles « à l'écoute » */ --tz-gold-ink-mid: #B8964F; /* reflet du prénom */ --tz-cover-hi: #F7E9B8; /* fond doré de l'aperçu « Ma page talent » */ --tz-cover-mid: #E4C66F; --tz-cover-lo: #C69A3F; --tz-bar-from: #EBD9A8; /* jauge « Profil complété » */ --tz-bar-mid: #D4B26C; --tz-bar-to: #BE9440; --tz-find-border: #E4C98C; /* bord de « Trouvez votre prochaine maison » */ --tz-dot: #C39A4A; /* point des choix « Je peux » */ --tz-open-dot: #C2A24E; /* point « À l'écoute du marché » */ /* #4713 (09/10) : barre flottante « Ouvrir Auguste » de la maquette du tableau de bord Maison du 07/10 (valeurs littérales). Son contour de focus est --gold-primary. */ --augx-badge-border: #DAC39C; /* contour de l'éclair sur le portrait */ --augx-badge-ink: #B2955F; /* l'éclair */ --augx-eyebrow: #AC9670; /* « AGENT IA » */ /* #4919 (15/10) : carte « Éditer mon profil » en trois tuiles, source Drive Editer_mon_profil_card_15oct26.html (valeurs littérales). Les autres dorés de la carte lisent --gold-200 / 600 / 700 et --gold-wash-line, mêmes valeurs. */ --ttp-play-from: #C2A24E; /* début du dégradé du bouton lecture */ --ttp-book-first: #C9AE6B; /* première case du Book, début du dégradé */ --ttp-sub: #5E5241; /* sous-titre des tuiles */ } /* ───────────────────────────────────────────────────────────────────────── Or de la BULLE DE VISITE GUIDÉE (composant de Tatianna, retour du 01/09, B3 tâche 063). Même raison d'être que les familles --onb-* et --rdz-* au-dessus : la bulle est le seul composant du produit posé sur un VERRE FONCÉ, et son encre est donc un or clair que l'échelle --gold-* ne porte pas (elle s'arrête à --gold-50 #FBF7EE, un crème, et --gold-200 #E6D5A4 est trop éteint sur ce fond). Les recopier dans la feuille de l'écran, c'était cinq dorés de plus sans source. Ils sont ici, nommés et uniques. Le reste de la bulle consomme l'échelle commune : --gold-500 pour le bas du filet de la note. ───────────────────────────────────────────────────────────────────────── */ :root { --gt-gold-ink: #F6E7BC; /* encre de la pastille d'étape, sur verre foncé */ --gt-gold-ink-strong: #FFF6DC; /* le NUMÉRO d'étape, un cran plus clair */ --gt-gold-note: #E8D6AA; /* encre de la ligne Découverte et des notes */ --gt-gold-rule: #F2E2B4; /* haut du filet vertical de la note */ --gt-gold-tag: #EBD9A2; /* fond de l'étiquette « En Découverte » */ --gt-gold-link: #EFD9A4; /* lien et survol dans une note */ /* B3 tâche 064 — la NAVIGATION de la visite : la rangée d'actions et l'écran de fin. Mêmes valeurs que le composant du client, même raison qu'au-dessus : ce sont des dorés sur verre foncé, que l'échelle --gold-* ne porte pas. */ --gt-gold-hover: #EFD9A4; /* survol d'une commande discrète (Passer, ‹) */ --gt-gold-btn-from: #B0904A; /* haut du bouton principal */ --gt-gold-btn-to: #8C7233; /* bas du bouton principal */ --gt-gold-btn-hover-from: #BF9E55; --gt-gold-btn-hover-to: #96793A; --gt-gold-dot-from: #F6E7BC; /* point d'étape courant, départ */ --gt-gold-dot-to: #C9A54A; /* point d'étape courant, arrivée */ --gt-gold-demo-ink: #8C7233; /* encre du marqueur « Exemple » du jeu de démonstration */ /* #4501 (Kevin 05/10) — la croix « Quitter la visite », mêmes valeurs que ‹ */ --gt-quit-ink: #D6C9B5; --gt-quit-bg: rgba(240, 224, 180, .06); --gt-quit-bg-hover: rgba(240, 224, 180, .16); --gt-quit-rule: rgba(240, 224, 180, .25); }