/** * apps/web/public/jetons.css — l'identité visuelle ConsultAuto. Le seul fichier de jetons du * projet : l'ancienne copie `config/jetons.css`, que plus rien ne lisait, a été écartée le * 01.10.2026 (`_transfert/_a_supprimer/config-jetons.css`). * * Version « cabinet » (06.10.2026, Sophia) — décision de Hassan : « Pour la version cabinet, tu * remplaces partout ». L'encre devient le marine de la charte (#0B2A4A), le fond doux devient * l'ivoire, les gris tirent vers le marine. Les NOMS des jetons ne bougent pas : toutes les * feuilles du site les lisent déjà, elles changent de teinte sans changer une ligne. * * Fond blanc, encre marine, un seul accent doré. Une seule famille de lettres pour TOUT : le * site, Lens, l'Analyse, Mon compte, l'administration, l'impression, le film client — titres, * texte, boutons, champs, tableaux, chiffres, châssis, codes, compteurs, pneus. C'est * « Playfair » (la version 2 de la famille Playfair) — en demi-gras (600) pour les titres et * les grands chiffres, en romain (400) pour le texte, en 500 pour ce qui doit appuyer * (boutons, libellés, prix). Aucune autre police nulle part : ni « Playfair Display » * (l'ancienne), ni police système, ni monospace. Seul secours : Georgia, puis la serif du * système, le temps que la police arrive (ou sur une page qui la bloquerait). * * Hassan, 01.10.2026 : « tu reprends exactement cette police en semi bold pour les titres, * le reste du site COMPLET tu le mets dans la même police ». Le 02.10.2026 (T28), la police * devient Playfair v2. Le 07.10.2026 : « je veux quelque chose d'uni sur le site, les Lens, * l'Analyse, toutes les pages » — les données (`--donnees`, `--mono`), restées en Playfair * Display jusque-là, passent en Playfair v2 elles aussi. * * Le doré ne s'utilise que pour ce qui compte : l'action principale, la valeur clé. * S'il est partout, il ne signale plus rien. * * Interdits (§14.4) : fond noir, liens violets, dégradés, ombres lourdes, coins très arrondis * partout, emoji comme titres, tout centrer, accumulation de cartes identiques. */ /* ── L'ancienne police, Playfair Display : plus servie (07.10.2026) ────────────────────────── Ses quatre @font-face sont retirés : plus rien ne la demande. Ses fichiers restent dans /polices/ (playfair-display-*.woff2, licence /polices/OFL.txt), sans qu'aucune page ne les charge : on ne supprime pas de fichier, Hassan fera le ménage s'il le veut. */ /* ── La police, hébergée chez nous : Playfair, la version 2 (02.10.2026) ────────────────────── Hassan a accepté le 02.10.2026 (T28) de passer le site en « Playfair » (Google Fonts, version 2 de la famille ; The Playfair Project Authors, licence SIL OFL 1.1 — voir /polices/OFL-playfair.txt). Hébergée chez nous comme la première : aucune requête vers Google. Les fichiers sont variables sur deux axes : la graisse (300 à 900 ; on sert 600 aux titres, 500 aux grands montants) et la taille optique (`opsz`), que le navigateur règle seul d'après la taille du texte — c'est ce qui donne aux grands titres leurs déliés très fins. Téléchargés le 02.10.2026 depuis fonts.googleapis.com (jeux latin et latin étendu). Le navigateur ne télécharge le second jeu (latin étendu : Ł, Ő, Ș…) que si la page en contient. Aucune requête ne part vers Google : rien n'est appris sur le garagiste qui ouvre une page. Ce que la police fait, à savoir : elle a des chiffres tabulaires (fonction OpenType `tnum`, mesurée le 07.10.2026 : « 1111111111 » et « 0000000000 » de même largeur). Les colonnes de montants et les données du permis écrivent donc `font-variant-numeric: lining-nums tabular-nums` : chiffre sous chiffre, à la hauteur des capitales. Sans cette ligne, les chiffres sont proportionnels (le 1 plus étroit que le 0), ce qui est plus beau dans une phrase. */ @font-face { font-family: 'Playfair'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-italique-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-italique-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Les indices de Playfair (J4, 09.10.2026, Hassan : « la police partout pareille, la Playfair ») : le jeu latin de Google contient les indices DESSINÉS PAR PLAYFAIR (₁ ₂ ₃), mais sans leur code : le « ₂ » de CO₂ retombait sur Georgia ou une police du système. Ces deux petits fichiers (2 ko) leur rendent leur code, avec leurs variations (graisse, taille optique). Fabriqués par `fabrique/police/faire-indices.py` depuis nos fichiers Playfair ; licence SIL OFL 1.1 (/polices/OFL-playfair.txt), sans nom réservé. */ @font-face { font-family: 'Playfair'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-indices.woff2') format('woff2'); unicode-range: U+2081-2083; } @font-face { font-family: 'Playfair'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-italique-indices.woff2') format('woff2'); unicode-range: U+2081-2083; } /* Les signes de Playfair (J9, 13.10.2026, Hassan : « une seule police, Playfair, exactement celle du site » — au rendu aussi) : → ← ◆ ⌘ ∞ ✓ ★ ⋮ ⋯ ↺ ʳ et l'espace fine insécable, que nos fichiers Playfair n'ont pas, retombaient sur Georgia ou une police du téléphone. Fabriqués DEPUIS Playfair par `fabrique/police/faire-signes.py` (la flèche : le filet du « − » et la pointe du « › » de Playfair ; ⋮ ⋯ : ses points médians ; ʳ : son « r » à la hauteur de son « ᵉ », en composants qui suivent la graisse et la taille optique). Un seul fichier (3 ko), servi au droit comme à l'italique, avec EXACTEMENT les descripteurs des autres fichiers (300 900) : Chrome groupe les fichiers d'une famille par descripteurs, et une autre plage de graisses formerait un groupe à part (le texte gras retombait sur Georgia, vu au banc). Licence SIL OFL 1.1 (/polices/OFL-playfair.txt). */ @font-face { font-family: 'Playfair'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-signes.woff2') format('woff2'); unicode-range: U+02B3, U+202F, U+2190, U+2192, U+21BA, U+221E, U+22EE-22EF, U+2318, U+25C6, U+2605, U+2713; } @font-face { font-family: 'Playfair'; font-style: italic; font-weight: 300 900; font-display: swap; src: url('/polices/playfair-signes.woff2') format('woff2'); unicode-range: U+02B3, U+202F, U+2190, U+2192, U+21BA, U+221E, U+22EE-22EF, U+2318, U+25C6, U+2605, U+2713; } /* Les signes que Playfair n'a pas (J4, 09.10.2026) : la flèche des boutons et la coche des listes sont DESSINÉES (le même trait que la flèche de l'accueil) — la même forme sur Windows, Mac, Android et iPhone, au lieu de retomber sur Georgia ou une police du téléphone. Peintes en `currentColor`. */ :root { --dessin-fleche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --dessin-coche: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3.2L13 4.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :root { /* ── la marque ──────────────────────────────────────────── */ /* Trois ors pour trois usages — revu le 01.10.2026 (règle de contraste) : l'ancien or « assombri » #B8912A ne faisait que 2,95:1 sur blanc, pas les 4,6 annoncés. */ --or: #8A6B12; /* l'or du TEXTE (sur-titres, libellés, liens) : 5,0:1 sur blanc, 4,7:1 sur le voile doré — lisible à toutes les tailles */ --or-titre: #AD861E; /* l'or des GRANDS titres et grands chiffres (24 px et plus) : 3,4:1 sur blanc, 3,2:1 sur le voile — plus d'éclat, seuil 3:1 */ --or-appuye: #B8912A; /* l'or des états : survol d'un bouton doré, bordure active, puces et coches — jamais pour une lettre */ --or-pur: #D4AF37; /* le doré de la marque, pour les aplats et les filets */ /* Ancien « or clair » #F4C430 : un troisième or, hors palette (contrôle du 06.10.2026, A7). Il devient le doré de la marque, partout où il servait (carte Gold, film client). */ --or-clair: #D4AF37; --or-voile: #FBF7EC; --or-filet: rgba(212, 175, 55, 0.30); /* ── le marine (version cabinet, 06.10.2026) ─────────────── */ --marine: #0B2A4A; /* 14,5:1 sur blanc — titres, chiffres, boutons sombres */ --marine-profond: #07203C; /* le pied de page, la carte « Recommandé » */ --marine-clair: #5A6B82; /* 5,4:1 sur blanc, 4,9:1 sur l'ivoire — le texte secondaire */ --ardoise: #7389A6; /* un segment de barre posé sur le marine */ --texte-marine: #CDD7E4; /* le texte courant SUR le marine : 10:1 */ --gris-marine: #9FB0C6; /* les petits libellés SUR le marine : 6,6:1 */ --vert-sobre: #2F6B4F; /* « rapide », sur fond clair : 6,3:1 */ --vert-sur-marine: #8FCBA8; /* « rapide », sur le marine : 7,8:1 */ /* ── les trois couleurs des jauges (T106, 08.10.2026, Sophia) ────────────────────────── Les SEULES couleurs ajoutées : elles servent aux jauges et aux puces du résultat, parce qu'elles le rendent plus clair. Texte (lisible sur blanc et sur son voile) / arc / voile. */ --vert: #1D6F4B; /* 6,1:1 sur blanc, 5,3:1 sur son voile */ --vert-arc: #2E9466; /* l'arc, la coche : 3,8:1 sur blanc */ --vert-voile: #E4F2EA; --orange: #94580A; /* 5,7:1 sur blanc, 5,1:1 sur son voile */ --orange-arc: #CC7F12; /* l'arc, la puce : 3,2:1 sur blanc */ --orange-voile: #FCEFD9; --rouge: #B02A1F; /* 6,6:1 sur blanc, 5,5:1 sur son voile */ --rouge-arc: #D24B3E; /* l'arc, la puce : 4,4:1 sur blanc */ --rouge-voile: #FBE5E2; --cuivre: #D08A68; /* le segment « problème du vendeur » sur le marine : 5,2:1 */ --ombre-cabinet: 0 18px 48px -24px rgba(11, 42, 74, 0.30); --doux: cubic-bezier(.2, .7, .2, 1); /* ── l'encre ────────────────────────────────────────────── */ /* Depuis le 06.10.2026, l'encre EST le marine : chaque titre, chaque chiffre et chaque bouton sombre du site passe au bleu de la charte sans qu'aucune règle ne change. */ --encre: #0B2A4A; --texte: #22272E; /* 15:1 — le texte courant, presque noir, un rien bleuté */ --gris: #5A6B82; /* 5,4:1 sur blanc (l'ancien #6B6B6B faisait 5,3:1) */ --gris-clair: #607089; /* 5,0:1 sur blanc, 4,5:1 sur l'ivoire (A8, 06.10.2026 : l'ancien #7C8A9C ne faisait que 3,5:1, et il portait des phrases) */ /* ── les fonds : blanc, et rien d'autre ─────────────────── */ --fond: #FFFFFF; --blanc: #FFFFFF; /* employé par l'avis sur les témoins, les cartes du compte : jamais défini jusqu'au 01.10.2026, ces fonds étaient transparents et le texte de dessous traversait l'avis */ --creme: #FAF8F1; /* le crème du badge de la marque */ --ivoire: #F6F3EC; /* les bandes de section de la version cabinet */ --fond-doux: #F6F3EC; /* une seule nuance, pour un encart discret : l'ivoire */ --filet: #E7E2D6; --filet-fort: #D6CFBF; /* ── les quatre niveaux de gravité ─────────────────────── la couleur n'est jamais seule porteuse du sens : elle accompagne toujours un mot */ --positif: #0E7C5A; --neutre: #767676; --vigilance: #9A5D09; /* 5,3:1 sur blanc, 4,8:1 sur l'ivoire (l'ancien #B4700B : 4,0:1) */ --alerte: #C2410C; /* ── la typographie ────────────────────────────────────── Une seule police, Playfair (version 2), pour tout (07.10.2026). Les trois noms restent pour que chaque règle dise ce qu'elle porte — ils valent tous la même famille : --titre les titres et les grands chiffres, en --graisse-titre (600) --police tout le texte, les boutons, les champs, les tableaux --donnees les données du permis (réception, châssis, code moteur), les compteurs, les pneus : même police, en chiffres tabulaires, un peu espacées pour se lire caractère par caractère --mono l'ancien nom de --donnees (aucune police à chasse fixe nulle part) */ --titre: 'Playfair', Georgia, 'Times New Roman', serif; --police: 'Playfair', Georgia, 'Times New Roman', serif; --donnees: 'Playfair', Georgia, 'Times New Roman', serif; --mono: var(--donnees); --graisse-titre: 600; /* les titres h1 à h4, les grands chiffres */ --graisse-prix: 500; /* un montant en CHF mis en avant — choix de Hassan sur l'exemple « CHF 23'900 » de l'accueil retouché */ /* ── l'échelle typographique, dont on ne sort pas ────────── */ /* Un pixel de plus qu'avec l'ancienne police sans empattement pour les trois plus petites tailles : Playfair a un œil plus petit et des déliés très fins ; à 11 px elle ne se lisait plus sur un écran d'ordinateur ordinaire. */ /* Échelle agrandie le 03.10.2026 (demande de Hassan : le site paraissait trop petit). Texte de base 16 → 18 px, tout le reste monté en proportion (~×1,125) en gardant la hiérarchie (les titres restent plus gros). */ /* J4 (09.10.2026, Hassan : « augmente la taille de la police dans tout le site où c'est nécessaire ») : plus rien sous 14 px — les capitales passent de 13 à 14 px, les précisions de 15 à 16 px. Le résultat d'analyse a sa propre échelle (page.css, « V3.1 ») : inchangé. */ --t-mini: 0.875rem; /* 14px — libellés en capitales, petites mentions */ --t-petit: 1rem; /* 16px — précisions */ --t-base: 1.125rem; /* 18px — texte courant */ --t-moyen: 1.1875rem; /* 19px — chapeaux */ --t-grand: 1.5rem; /* 24px — titres de section */ --t-titre: 3rem; /* 48px — titre de page, en serif */ --t-cle: 3.5rem; /* 56px — la valeur clé, le prix */ --t-chiffre: 2.25rem; /* 36px — un grand chiffre dans un bloc (40 px dans le résultat, voir page.css) */ /* ── les graisses ───────────────────────────────────────── Le texte ne descend jamais sous 400 (Playfair v2 irait jusqu'à 300, trop fin à l'écran) : « maigre » vaut donc le romain. */ --maigre: 400; --normal: 400; --appuye: 500; --fort: 600; /* ── les espaces ─────────────────────────────────────────── */ --e1: 0.25rem; --e2: 0.5rem; --e3: 0.75rem; --e4: 1rem; --e5: 1.5rem; --e6: 2rem; --e7: 3rem; --e8: 4.5rem; /* ── le reste ────────────────────────────────────────────── */ --rayon: 6px; --rayon-grand: 10px; --largeur: 64rem; /* texte courant autour de 65 caractères par ligne */ --cible-tactile: 44px; /* §12.3 — jamais moins, sur tablette */ --transition: 140ms ease; } /* ── Fond blanc et couleurs forcés (J4, 09.10.2026) ────────────────────────────────────────── Hassan : « le fond blanc et les couleurs respectées, peu importe le support (tablette, ordinateur, iOS, Android) ; ni le client ni son appareil ne peuvent les modifier ». - `color-scheme: only light`, avec la balise de chaque page : Chrome (Android et ordinateur), Edge, Opera, Brave et les vues web d'Android (Gmail, WhatsApp…) n'assombrissent plus la page ; les champs, les listes déroulantes et les barres de défilement restent clairs, même quand le téléphone est en mode sombre. - `forced-color-adjust: none` : le « thème de contraste » de Windows ne remplace plus nos couleurs (elles sont déjà contrastées : marine 14,5:1 sur blanc). - L'encre est écrite sur ; le fond blanc vient du de chaque page (page.css), que le navigateur reporte sur toute la fenêtre. - La même consigne sous `prefers-color-scheme: dark` : certains navigateurs cherchent une règle « sombre » avant de recolorer une page ; la nôtre dit « clair ». Samsung Internet, en mode sombre, ignore toute consigne (Samsung l'écrit sur son forum des développeurs) : le script de l'en-tête pose alors `sombre-force` sur , et les deux règles du bas enlèvent ce qui devient illisible quand il recolore la page — le texte en dégradé doré (« reprendre », « revendre ») et le texte des boutons dorés. */ :root { color-scheme: only light; forced-color-adjust: none; color: var(--texte); } @media (prefers-color-scheme: dark) { :root { color-scheme: only light; color: var(--texte); } } :root.sombre-force .reflet-or { background: none !important; -webkit-text-fill-color: currentColor !important; } :root.sombre-force :is(.btn-or, .bouton-or, .bouton-plein, .bouton-client) { background: var(--marine) !important; border-color: var(--or-pur) !important; color: var(--or-pur) !important; } :root.sombre-force .menu-traits span { background: var(--or-pur) !important; }