/* ========================================================================== Charte graphique unifiée — tokens Socle commun + 3 déclinaisons : app source, app sœur (mobile), webapp (web) La couleur de marque est MESURÉE sur le logo OraPV (décodage PNG en Python pur : inflate zlib + défiltrage ligne à ligne, puis comptage par région). Les neutres, la typographie et la géométrie restent ceux de l'audit inverse d'origine — eux non plus ne sont pas estimés. Voir CHARTE.md § Étape 1. Les ratios en commentaire sont CALCULÉS (WCAG 2.1, sur #FFFFFF sauf mention). Usage : → app sœur → webapp dashboard (aucun attribut) → valeurs de l'app source Thème clair uniquement — pas de bloc prefers-color-scheme par décision produit. ========================================================================== */ :root { /* ---------------------------------------------------------------- COULEUR */ /* Marque — bleu. MESURÉ sur logo/logo-orapv-bleu-flat.png : #3567A0 sur 153 749 px d'aplat. L'icône « plein » est un dégradé vertical dont toute l'échelle ci-dessous est prélevée, tous les 85 px, plutôt que calculée : #3567A0 · #2C5D99 · #265694 · #225191 · #1E4D8E · #1A488B · #164488 · #134186 · #113E84 · #0F3C83. Le bleu passe AA tout seul (5,83:1). Il n'y a donc plus de variante « celle qu'on peut poser sous du texte » : la rampe est simplement repos → survol → enfoncé. */ --color-primary: #3567A0; /* 5.83:1 — MESURÉ. CTA, liens, icônes */ --color-primary-strong: #225191; /* 7.91:1 — MESURÉ à mi-dégradé. Survol */ --color-primary-deep: #0F3C83; /* 10.53:1 — MESURÉ, bas du dégradé. Enfoncé, et texte de marque AAA */ --color-primary-soft: #EDF2F7; /* fond teinté, badges, lignes sélectionnées — #3567A0 dessus 5.18:1, #0F3C83 9.35:1 */ /* Le système est MONOCHROME : il n'y a plus de seconde teinte de marque. --color-secondary survit comme bas de la même rampe — il porte les actions secondaires, les contours, accent-color, et l'alias --accent que consomme ~/docker/_template-app. Le renommer casserait ces consommateurs pour rien. */ --color-secondary: #0F3C83; /* 10.53:1 */ --color-secondary-deep: #0A2E66; /* 13.16:1 — survol */ --color-secondary-soft: #E7EDF7; /* #0F3C83 dessus 8.95:1 */ /* Dégradé de marque — MESURÉ sur l'icône d'app (logo-orapv-plein-flat.png). Ce n'est pas un style de bouton : il est réservé aux surfaces de marque pleines — icône, splash, en-tête de courriel. */ --gradient-brand: linear-gradient(180deg, #3567A0 0%, #0F3C83 100%); --color-scrim-dim: rgba(0, 0, 0, 0.45); /* Neutres — MESURÉS sur l'app source. La hiérarchie du système repose sur ces cinq gris, et le logotype OraPV les confirme : son gris de baseline est #4D4D4D (8,45:1), à un cran de --color-text. */ --color-bg: #FFFFFF; --color-surface: #F7F7F7; /* tuiles d'option, rangées, fonds de champ */ --color-surface-alt: #ECECEC; /* bulle de chat entrante */ --color-border: #ECECEC; /* hairline 1px — la séparation par défaut */ --color-border-strong: #DDDDDD; /* séparateur appuyé */ --color-text: #4B4B4B; /* 8.72:1 — corps */ --color-text-muted: #5C5C5C; /* 6.69:1 — titres sérif, métadonnées */ --color-text-subtle: #767676; /* 4.54:1 sur blanc — plus petit gris encore AA */ --color-text-on-fill: #FFFFFF; /* ⚠️ L'app source utilise #B7B7B7 en placeholder = 2,01:1. Illisible. Corrigé ici, et sur fond teinté #F7F7F7 il faut descendre encore. */ --color-placeholder: #767676; /* 4.54:1 sur #FFFFFF */ --color-placeholder-on-tint: #6B6B6B; /* 4.97:1 sur #F7F7F7 */ --color-disabled-bg: #CBCBCB; /* état désactivé — exempté WCAG */ --color-disabled-text: #FFFFFF; /* Sémantique — DÉRIVÉE, absente des captures (voir CHARTE.md § alertes). Le rouge reste franchement chaud : contre un bleu de marque c'est la teinte la plus éloignée possible, donc une erreur ne peut pas se lire comme du chrome. Les valeurs sont inchangées — c'est leur justification qui a changé, l'ancienne parlait d'éviter la confusion avec le magenta. */ --color-success: #0F7B5A; /* 5.25:1 */ --color-success-text: #0B6B4F; /* 6.50:1 — 5.84:1 sur -soft */ --color-success-soft: #E8F6F0; --color-danger: #C42B1C; /* 5.66:1 */ --color-danger-text: #B3261E; /* 6.54:1 — 5.72:1 sur -soft */ --color-danger-soft: #FDECEA; /* ⚠️ --color-warning est un jaune de signalisation à 2,13:1 : jamais de texte blanc dessus, jamais de texte dessus tout court. Texte → --color-warning-text. */ --color-warning: #F0A202; /* 2.13:1 — pastille / bordure / icône pleine */ --color-warning-text: #8A5300; /* 6.33:1 — 5.89:1 sur -soft */ --color-warning-soft: #FEF6E6; /* « Info » ne crée pas de teinte nouvelle : c'est le bleu de marque, ce qui est aussi la convention universelle. ⚠️ C'est le prix du monochrome : un bandeau d'information et une action primaire partagent la teinte. Ils se distinguent par la FORME — l'info est un fond -soft + un filet, l'action est un aplat. Voir la règle 1 de CLAUDE.md. */ --color-info: var(--color-secondary); --color-info-text: var(--color-secondary-deep); --color-info-soft: var(--color-secondary-soft); /* Focus — absent de l'app source (aucun état focus dans les captures). Obligatoire sur web, recommandé sur mobile pour les claviers externes. ⚠️ Le système étant monochrome, l'anneau ne se distingue plus d'un bouton bleu par la teinte : c'est --focus-offset qui fait le travail, en posant 2px de fond entre le remplissage et l'anneau. Ne pas le mettre à 0. */ --color-focus: var(--color-primary-deep); /* 10.53:1 sur blanc, 9.90:1 sur #F7F8F9 */ --focus-ring: 0 0 0 3px rgba(53, 103, 160, 0.35); --focus-outline: 2px solid var(--color-focus); --focus-offset: 2px; /* ----------------------------------------------------------- TYPOGRAPHIE */ /* Deux familles : un sérif éditorial pour le nom du produit et les moments de bascule, un sans humaniste pour tout le reste. Les polices exactes de l'app source ne sont pas identifiables depuis un PNG — piles à valider. */ --font-display: "Instrument Serif", "Source Serif 4", Georgia, "Times New Roman", serif; --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Échelle app source (base 16px) */ --text-display: 44px; --lh-display: 1.05; --ls-display: -0.02em; --text-h1: 28px; --lh-h1: 1.25; --ls-h1: -0.01em; --text-h2: 20px; --lh-h2: 1.30; --ls-h2: 0; --text-title: 17px; --lh-title: 1.30; --ls-title: 0; --text-section: 16px; --lh-section: 1.20; --ls-section: 0.06em; /* CAPITALES */ --text-body: 16px; --lh-body: 1.40; --ls-body: 0; --text-label: 15px; --lh-label: 1.35; --ls-label: 0; --text-helper: 13px; --lh-helper: 1.45; --ls-helper: 0; --text-micro: 12px; --lh-micro: 1.20; --ls-micro: 0.08em; /* CAPITALES */ /* -------------------------------------------------------------- ESPACEMENT */ --space-unit: 4px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --gutter: 20px; /* marge latérale d'écran — MESURÉE 16–20px */ --gap-field: 12px; /* entre deux champs — MESURÉ */ --gap-section: 44px; /* entre deux blocs — MESURÉ 40–48px */ /* ------------------------------------------------------------------ FORME */ --radius-field: 8px; /* champs, tuiles d'option — MESURÉ */ --radius-card: 12px; /* cartes — MESURÉ */ --radius-bubble: 18px; /* bulles de chat — MESURÉ */ --radius-pill: 999px; --radius-cta-bar: 0; /* la barre CTA est pleine largeur, sans rayon */ --control-height: 52px; /* champs — MESURÉ 52–54px */ --cta-height: 56px; /* barre CTA collante — MESURÉ 56–58px */ --touch-min: 44px; --border-width: 1px; /* ------------------------------------------------------------------ OMBRE */ /* Parti pris central : la profondeur se lit par la TEINTE, pas par l'élévation. Les cartes et les champs n'ont PAS d'ombre — ils ont un hairline et un fond. */ --shadow-none: none; --shadow-card: none; --shadow-sticky: 0 -1px 0 var(--color-border); /* barre CTA collante */ --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.18); /* modale — le seul vrai z */ --shadow-popover: 0 4px 16px rgba(0, 0, 0, 0.12); } /* ========================================================================== APP SŒUR (mobile) — continuité stricte, ergonomie une main ========================================================================== */ [data-support="mobile-sister"] { /* CTA en --color-primary : le bleu du logo porte du blanc à 5,83:1, donc le bouton est exactement la couleur de la marque. C'était impossible avec le magenta d'origine (3,94:1), d'où l'ancien recours à -strong. */ --color-cta-bg: var(--color-primary); --color-cta-text: var(--color-text-on-fill); /* Tout ce qui se tape grandit ; rien d'autre ne bouge. */ --control-height: 56px; --cta-height: 56px; --touch-min: 48px; /* > 44px minimum : marge pour l'usage au pouce */ --row-height: 52px; /* rangées de liste, contre 44px sur la source */ --gutter: 20px; --gap-field: 12px; } /* ========================================================================== WEBAPP DASHBOARD — plus dense, plus contrastée, focus clavier obligatoire ========================================================================== */ [data-support="web"] { /* Un bleu supporte les grandes surfaces là où le magenta ne le pouvait pas : l'ancien budget « < 5 % de la surface » n'a plus lieu d'être. Ce qui le remplace n'est pas une quantité mais un sens — l'aplat de marque veut dire « action » (règle 1). La chrome reste neutre pour cette raison, pas par économie de couleur. */ --color-cta-bg: var(--color-primary); /* 5.83:1 avec libellé blanc */ --color-cta-text: var(--color-text-on-fill); --color-link: var(--color-primary); /* 5.83:1 */ --color-link-hover: var(--color-primary-deep); /* 10.53:1 */ /* Neutres élargis : sur grand écran il faut un cran de séparation en plus. */ --color-bg: #F7F8F9; --color-surface: #FFFFFF; --color-surface-alt: #F1F2F4; --color-border: #E2E2E4; --color-border-strong: #C9C9CD; --color-border-input: #8C8C8C; /* 3.36:1 — contour de champ, seuil non-textuel 3:1 */ --color-placeholder: #6B6B6B; /* 5.33:1 — un cran plus foncé qu'en mobile */ /* Base 14px, échelle resserrée pour afficher plus d'information. */ --text-display: 32px; --lh-display: 1.10; --text-h1: 24px; --lh-h1: 1.25; --text-h2: 20px; --lh-h2: 1.30; --text-title: 16px; --lh-title: 1.35; --text-section: 13px; --lh-section: 1.20; --ls-section: 0.07em; --text-body: 14px; --lh-body: 1.50; --text-label: 13px; --lh-label: 1.40; --text-helper: 12px; --lh-helper: 1.50; --text-micro: 11px; --lh-micro: 1.20; --ls-micro: 0.08em; /* Formes resserrées : le rayon généreux du mobile devient mou en desktop. */ --radius-field: 6px; --radius-card: 8px; --radius-bubble: 14px; --control-height: 38px; --cta-height: 40px; --row-height: 44px; --touch-min: 32px; /* pointeur : le minimum tactile ne s'applique pas */ --gutter: 24px; --gap-field: 16px; --gap-section: 32px; --wizard-max-width: 640px; /* le wizard reste une colonne étroite, comme en mobile */ --content-max-width: 1280px; /* Toujours pas d'ombre sur les cartes : bordure + fond blanc sur --color-bg. */ --shadow-card: none; } /* ========================================================================== Alias de compatibilité — ~/docker/_template-app/src/app/globals.css Le squelette Next.js utilise ces six noms courts. Les garder mappés évite d'avoir à réécrire le template pour adopter la charte. ========================================================================== */ :root { --bg: var(--color-bg); --surface: var(--color-surface); --border: var(--color-border); --text: var(--color-text); --muted: var(--color-text-subtle); --accent: var(--color-primary); /* le bleu de marque, AA en texte comme en lien */ }