/* Copie SANS RETOUCHE du design system DATIVO (brief de G du 04/11/2026, webdesign d'Audit web cyber). Origine : depot DativoSAS/rgpdf_site, fichier _app2/shared/assets/css/tokens.css, commit 096a001e230dbc1a0d1aa37585137e8ac91a7d8a (la meme copie que DativoSAS/cra_site). Ne pas modifier ici : tout ce qui est propre a AWC vit dans ../awc.css. Mise a jour = nouvelle copie. */ /* * _app2/shared/assets/css/tokens.css * * Variables design tokens DATIVO (palette, typo, espacements, ombres, transitions, couches). * Importé en premier par toute page _app2/. Source de vérité unique des valeurs. * Toute valeur visuelle est référencée via var(--dv-*), jamais en dur dans components.css. * * Référence visuelle unique : _app2/.documentation/maquettes/v3/ (v3.css), règle 18 d'AGENTS.md. * Chaque couple texte / fond utilisé par un composant est contrôlé par bin/recette/contrast.test.php * (4,5:1 au moins) : un couple nouveau s'y déclare en même temps qu'ici. */ :root { /* ===================================================== * 1. PALETTE DATIVO (cf. CLAUDE.md projet §5.1) * ===================================================== */ /* Charte V2 « Emerald » (cf. CHARTE_GRAPHIQUE.html) — Emerald #4E7F65 = primaire, Forest = encre. Échelle Emerald teinte unique 148°. */ --dv-color-forest: #1f3d33; /* ENCRE — texte, titres, fonds foncés (blanc 11,8:1 AAA) */ --dv-color-emerald: #4e7f65; /* PRIMAIRE — logo, CTA, aplats marque, liens (blanc 4,6:1 AA) */ --dv-color-tender: #157f77; /* Teal accent — highlights, badges (blanc 4,8:1 AA) */ --dv-color-dew: #dcf1e0; /* Badges, highlights, fond soft (texte encre 9,7:1) */ --dv-color-cream: #ffffff; /* Fond de page */ --dv-color-terra: #e37222; /* Accent conversion — label ≥19px bold (blanc 3,1:1) */ /* Échelle Emerald (teinte 148°) — surfaces, états, dérivés */ --dv-color-emerald-900: #193828; --dv-color-emerald-800: #264c38; --dv-color-emerald-700: #37664d; --dv-color-emerald-600: #44755b; --dv-color-emerald-500: #4e7f65; /* = --dv-color-emerald (primaire) */ --dv-color-emerald-400: #659e80; --dv-color-emerald-300: #84bd9f; --dv-color-emerald-200: #a7d6bd; --dv-color-emerald-100: #caebd9; --dv-color-emerald-50: #eff7f2; /* v3 : survol de ligne, encart de marque (charte : #e4f7ed) */ /* États boutons primaires — RGAA : on FONCE au survol/clic, jamais on éclaircit */ --dv-color-emerald-hover: #37664d; /* Emerald 700 — survol (blanc 6,6:1 AAA) */ --dv-color-emerald-active: #264c38; /* Emerald 800 — clic (blanc 9,7:1 AAA) */ --dv-color-tender-hover: #0f6a63; --dv-color-terra-hover: #c75f12; /* Bouton primaire (v3) : Emerald #4E7F65 (blanc 4,6:1), survol Emerald 700, clic Emerald 800. */ --dv-color-primary: var(--dv-color-emerald); --dv-color-primary-hover: var(--dv-color-emerald-700); --dv-color-primary-active: var(--dv-color-emerald-800); /* Bouton clair (v3) : fond Emerald 200, texte encre ; survol Emerald 100. */ --dv-btn-light-bg: var(--dv-color-emerald-200); --dv-btn-light-bg-hover: var(--dv-color-emerald-100); --dv-btn-light-text: var(--dv-color-forest); /* Bouton désactivé (v3 : fond #cbd5d0). Le texte v3 #5f6e65 n'atteint que 3,6:1 sur ce fond : il passe à l'encre 2 (#3d4842, 6,3:1), la couleur de fond suffisant à dire l'état. */ --dv-btn-disabled-bg: #cbd5d0; --dv-btn-disabled-text: #3d4842; /* Menthe (charte) : libellé « RGPD Facile » de la barre haute, badge « Espace agence ». */ --dv-color-mint: #b7ddd2; /* Badges de rôle de la barre haute (v3) */ --dv-role-admin-bg: var(--dv-color-terra); --dv-role-admin-text: #1f1206; --dv-role-agence-bg: var(--dv-color-mint); --dv-role-agence-text: var(--dv-color-forest); /* Anneau de focus (v3) : Forest, 2 px, décalé de 2 px. */ --dv-focus-ring-color: var(--dv-color-forest); --dv-focus-ring-width: 2px; --dv-focus-ring-offset: 2px; /* ===================================================== * 2. NEUTRES — échelle greenish-cream tirée vers gris * (cohérence chromatique avec forest/emerald) * ===================================================== */ --dv-g-50: #fafbfa; --dv-g-100: #f3f6f4; --dv-g-200: #e5ebe7; --dv-g-300: #cfd8d2; --dv-g-400: #a3b0a8; --dv-g-500: #5f6e65; /* assombri le 03/10/2026 (était #74837a) : 5,4:1 sur blanc, 4,8:1 sur le fond de page #eef3f0 */ --dv-g-600: #54625a; --dv-g-700: #3d4842; --dv-g-800: #2a322d; --dv-g-900: #1a201d; /* ===================================================== * 3. SÉMANTIQUE — usages contextualisés (themable) * ===================================================== */ --dv-bg-page: #eef3f0; /* fond de page, derrière les cartes (phase 1.1 : était blanc, et #f3f6f4 dans les espaces) */ --dv-bg-app: var(--dv-bg-page); /* fond des espaces /rgpd et /admin : même valeur que la page */ --dv-bg-card: var(--dv-color-cream); --dv-bg-elevated: #fdfefd; --dv-bg-surface-2: #f6f9f7; /* v3 --surface-2 : en-tête de tableau, référence, sélecteur de la bande de contexte */ --dv-bg-muted: var(--dv-g-100); --dv-bg-overlay: rgba(31, 61, 51, 0.55); --dv-text-primary: var(--dv-color-forest); --dv-text-muted: var(--dv-g-600); --dv-text-subtle: var(--dv-g-500); --dv-text-inverse: var(--dv-color-cream); --dv-text-link: var(--dv-color-emerald-700); /* v3 : liens Emerald 700, survol 800 */ --dv-text-link-hover: var(--dv-color-emerald-800); --dv-text-body: var(--dv-g-700); /* v3 --ink-2 : texte courant secondaire */ --dv-border-default: #dde5e0; /* bordure de carte et bordures courantes (phase 1.1 : était --dv-g-200) */ --dv-border-subtle: #eaf0ec; /* séparateurs internes : en-tête de carte, lignes libellé / valeur */ --dv-border-strong: var(--dv-g-300); --dv-border-focus: var(--dv-color-emerald); /* bordure d'un champ actif (l'anneau, lui, est Forest) */ /* ===================================================== * 4. ÉTATS (success / warning / danger / info) * Chacun avec : couleur principale, bg léger, border * ===================================================== */ /* Couples texte / fond fixés le 03/10/2026 (refonte UI phase 1), tous à 5:1 ou plus. Vérifiés par bin/recette/contrast.test.php. Ne pas les modifier sans rejouer ce test. */ --dv-color-success: #23704a; --dv-color-success-bg: #e1f2e8; --dv-color-success-border: #a9d6bb; --dv-color-warning: #8f5200; --dv-color-warning-bg: #fdf0d8; --dv-color-warning-border: #f0c46c; --dv-color-danger: #b3261e; --dv-color-danger-bg: #fde7e5; --dv-color-danger-border: #f2b8b3; --dv-color-info: #1d5687; --dv-color-info-bg: #e3eef8; --dv-color-info-border: #c5dcf0; /* Brouillon / neutre (statuts sans enjeu : brouillon, archivé, non renseigné) */ --dv-color-neutral: #4a555c; --dv-color-neutral-bg: #eceff1; --dv-color-neutral-border: #cfd6da; /* ===================================================== * 4 bis. ALIAS DE COMPATIBILITÉ (03/10/2026) * Variables appelées dans le code sans avoir jamais été définies (inventaire UI * du 03/10/2026, §4.2). Elles pointent désormais sur les tokens existants : ne pas * les utiliser dans du code nouveau, préférer le token cible. * ===================================================== */ --dv-text-danger: var(--dv-color-danger); --dv-text-warning: var(--dv-color-warning); --dv-text-default: var(--dv-text-primary); --dv-border-color: var(--dv-border-default); --dv-border: var(--dv-border-default); --dv-color-border: var(--dv-border-default); --dv-color-bg: var(--dv-bg-app); --dv-dew: var(--dv-color-dew); --dv-sidebar-text-soft: var(--dv-text-muted); --color-forest: var(--dv-color-forest); --color-emerald: var(--dv-color-emerald); --color-tender: var(--dv-color-tender); --color-dew: var(--dv-color-dew); /* ===================================================== * 5. TYPOGRAPHIE * ===================================================== */ --dv-font-title: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif; --dv-font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --dv-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* Tailles (échelle modulaire, base 16px) */ --dv-text-xs: 0.75rem; /* 12px — micro */ --dv-text-sm: 0.8125rem; /* 13px — tables, helper */ --dv-text-md: 0.875rem; /* 14px — corps standard */ --dv-text-base: 1rem; /* 16px — base navigateur */ --dv-text-lg: 1.125rem; /* 18px — sous-titre */ --dv-text-xl: 1.375rem; /* 22px — H3 */ --dv-text-2xl: 1.75rem; /* 28px — H2 */ --dv-text-3xl: 2.25rem; /* 36px — H1 hero */ /* Line-heights */ --dv-leading-tight: 1.2; --dv-leading-snug: 1.35; --dv-leading-normal: 1.5; --dv-leading-relaxed: 1.65; /* Weights */ --dv-weight-regular: 400; --dv-weight-medium: 500; --dv-weight-semibold: 600; --dv-weight-bold: 700; /* ===================================================== * 6. SPACING (échelle 4px) * ===================================================== */ --dv-space-0: 0; --dv-space-1: 4px; --dv-space-2: 8px; --dv-space-3: 12px; --dv-space-4: 16px; --dv-space-5: 20px; --dv-space-6: 24px; --dv-space-8: 32px; --dv-space-10: 40px; --dv-space-12: 48px; --dv-space-16: 64px; --dv-space-20: 80px; --dv-space-24: 96px; /* ===================================================== * 7. RADII * ===================================================== */ /* v3 : 6 px (entrée de menu, référence), 8 px (bouton, champ), 10 px (carte, barre d'onglets). */ --dv-radius-none: 0; --dv-radius-sm: 6px; --dv-radius-md: 8px; --dv-radius-lg: 10px; --dv-radius-xl: 16px; --dv-radius-full: 9999px; /* ===================================================== * 8. SHADOWS — tons forest (cohérence avec palette) * ===================================================== */ --dv-shadow-sm: 0 1px 2px 0 rgba(31, 61, 51, 0.06); --dv-shadow-card: 0 1px 2px rgba(31, 61, 51, .06), 0 2px 8px rgba(31, 61, 51, .04); /* cartes posées sur le fond de page */ --dv-shadow-md: 0 4px 6px -1px rgba(31, 61, 51, 0.10), 0 2px 4px -2px rgba(31, 61, 51, 0.08); --dv-shadow-lg: 0 10px 15px -3px rgba(31, 61, 51, 0.12), 0 4px 6px -4px rgba(31, 61, 51, 0.08); --dv-shadow-xl: 0 20px 25px -5px rgba(31, 61, 51, 0.14), 0 8px 10px -6px rgba(31, 61, 51, 0.08); /* ===================================================== * 9. TRANSITIONS * ===================================================== */ --dv-ease: cubic-bezier(0.4, 0, 0.2, 1); --dv-transition-fast: 120ms var(--dv-ease); --dv-transition-normal: 200ms var(--dv-ease); --dv-transition-slow: 320ms var(--dv-ease); /* ===================================================== * 10. Z-INDEX LAYERS * ===================================================== */ --dv-z-base: 1; --dv-z-dropdown: 100; --dv-z-sticky: 200; --dv-z-modal: 1000; --dv-z-toast: 1100; --dv-z-tooltip: 1200; /* ===================================================== * 11. LAYOUT (constantes utiles) * ===================================================== */ --dv-container-max: 1280px; --dv-sidebar-width: 240px; --dv-topbar-min-height: 56px; /* v3 : barre Forest */ --dv-context-min-height: 44px; /* v3 : bande de contexte */ /* ===================================================== * 12. ICONES — tailles Lucide * (Phase 2.5 Sprint A — Item A1) * ===================================================== */ --dv-icon-sm: 16px; --dv-icon-md: 20px; --dv-icon-lg: 24px; --dv-icon-xl: 32px; /* ===================================================== * 13. AVATARS — palette deterministe (8 couleurs) * Derivees de la charte + variantes desaturees * (Phase 2.5 Sprint A — Item A4) * ===================================================== */ --dv-avatar-bg-1: #1f3d33; /* forest */ --dv-avatar-bg-2: #4e7f65; /* emerald */ --dv-avatar-bg-3: #157f77; /* tender */ --dv-avatar-bg-4: #e37222; /* terra */ --dv-avatar-bg-5: #6b8e7f; /* sage (desature) */ --dv-avatar-bg-6: #8c5a3c; /* terracota tamise */ --dv-avatar-bg-7: #5c7a8a; /* slate bleute */ --dv-avatar-bg-8: #9a7baa; /* mauve doux */ }