/* * SmartExpert — Tokens de thème (Étape 1 du chantier design system) * ───────────────────────────────────────────────────────────────── * Décidé le 2026-09-18 (cf. docs/ROADMAP.md, section "Système de design * & thème unifié") : bleu #2563eb comme couleur de marque primaire. * * Ce fichier surcharge les variables CSS natives de Bootstrap 5.3 * (--bs-primary, --bs-success, etc.) plutôt que de recompiler Bootstrap * depuis ses sources SCSS — Bootstrap est chargé ici en CSS déjà compilé * (public/vendor/bootstrap/css/bootstrap.min.css), donc cette surcharge * doit être chargée APRÈS ce fichier dans chaque layout. * * Beaucoup de classes utilitaires Bootstrap (.text-primary, .bg-primary, * .border-primary, .link-primary...) lisent déjà --bs-primary(-rgb) en * live via var(), donc les surcharger ici suffit à les retinter partout * sans toucher un seul fichier Blade. Les composants qui figent leurs * couleurs en dur au moment de la compilation (.btn-primary, .btn-outline- * primary, .form-check-input:checked, la pagination active) sont * surchargés explicitement ci-dessous. * * Variables --brand-* : à utiliser dans tout nouveau code (Blade inline, * futurs composants) à la place d'un hex en dur — survit à un futur * changement de couleur de marque sans chercher/remplacer dans 200+ fichiers. */ :root { /* ── Couleur de marque primaire (bleu) ────────────────────────── */ --brand-primary: #2563eb; /* base */ --brand-primary-hover: #1d4ed8; /* hover boutons/liens */ --brand-primary-active: #1e40af; /* état actif/pressed */ --brand-primary-light: #eff6ff; /* fond subtil (badges, bannières) */ --brand-primary-dark: #1e3a8a; /* texte sur fond clair */ /* ── Accent secondaire — réservé au module Intelligence Artificielle ── */ --brand-accent-ia: #7c3aed; /* ── Accent doré ponctuel — clin d'œil au logo, usage très ciblé ─── */ --brand-gold: #d4a017; /* ── Sidebar tenant (fond sombre) ──────────────────────────────── */ /* Si cette valeur change, mettre à jour aussi dans layouts/app.blade.php — un attribut HTML ne peut pas lire une variable CSS. */ --brand-sidebar-bg: #1a2035; /* ── Sémantique (consolidation des teintes déjà dominantes dans le code) ── */ --brand-success: #16a34a; --brand-danger: #dc2626; --brand-warning: #f59e0b; --brand-info: #0ea5e9; /* ── Fond de page (surchargé sous [data-bs-theme=dark]) ────────── */ --brand-page-bg: #f4f6f9; /* ── Surcharge Bootstrap : primary ────────────────────────────── */ --bs-primary: var(--brand-primary); --bs-primary-rgb: 37, 99, 235; --bs-pagination-active-bg: var(--brand-primary); --bs-pagination-active-border-color: var(--brand-primary); /* ── Surcharge Bootstrap : sémantique ──────────────────────────── */ --bs-success: var(--brand-success); --bs-success-rgb: 22, 163, 74; --bs-danger: var(--brand-danger); --bs-danger-rgb: 220, 38, 38; --bs-warning: var(--brand-warning); --bs-warning-rgb: 245, 158, 11; --bs-info: var(--brand-info); --bs-info-rgb: 14, 165, 233; } /* * Mode sombre (Étape 4, 2026-09-18) — s'appuie sur le support natif de * Bootstrap 5.3 (attribut [data-bs-theme="dark"] sur , déjà compilé * dans bootstrap.min.css : body/cards/tables/forms/navs s'adaptent tout * seuls). Ici on ne redéfinit que ce que NOS surcharges de marque * casseraient sinon (ex. --bs-primary-bg-subtle pointait vers un bleu * quasi-blanc qui aurait littéralement écrasé le bon réglage sombre de * Bootstrap sur :root, qui s'applique dans les deux modes à la fois). * * --brand-primary-light et --brand-primary-dark sont volontairement * inversées en mode sombre : elles sont presque toujours utilisées comme * PAIRE (fond clair + texte foncé) dans le code déjà migré — les inverser * ensemble donne automatiquement (fond foncé + texte clair) partout où * la paire est utilisée, sans retoucher les fichiers Blade concernés. */ :root:not([data-bs-theme="dark"]) { --bs-primary-bg-subtle: var(--brand-primary-light); --bs-primary-border-subtle: #bfdbfe; --bs-primary-text-emphasis: var(--brand-primary-dark); } [data-bs-theme="dark"] { --brand-primary-light: #1e2a4a; --brand-primary-dark: #93c5fd; --brand-page-bg: var(--bs-body-bg); } /* Bootstrap garde .bg-white/.bg-light/.text-dark fixes dans tous les modes par conception (ce ne sont pas des couleurs "adaptatives") — sans ce correctif, les 90+ en-têtes de card en bg-white resteraient blancs sur fond sombre. */ [data-bs-theme="dark"] .bg-white { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } [data-bs-theme="dark"] .text-dark { color: var(--bs-body-color) !important; } [data-bs-theme="dark"] .top-bar, [data-bs-theme="dark"] .admin-topbar, [data-bs-theme="dark"] .expert-topbar { background: var(--bs-tertiary-bg) !important; border-bottom-color: var(--bs-border-color) !important; } /* .table-light est fixe par conception, comme .bg-white plus haut. */ [data-bs-theme="dark"] .table-light { --bs-table-color: var(--bs-body-color); --bs-table-bg: var(--bs-tertiary-bg); --bs-table-border-color: var(--bs-border-color); --bs-table-striped-bg: var(--bs-secondary-bg); --bs-table-striped-color: var(--bs-body-color); --bs-table-active-bg: var(--bs-secondary-bg); --bs-table-active-color: var(--bs-body-color); --bs-table-hover-bg: var(--bs-secondary-bg); --bs-table-hover-color: var(--bs-body-color); } /* Séparation visuelle carte/page — sans ça, .card (fond = var(--bs-body-bg), identique au fond de la page en mode sombre) devient invisible : plus aucune bordure ni ombre perceptible pour distinguer une carte du reste. */ [data-bs-theme="dark"] .card { --bs-card-bg: var(--bs-tertiary-bg); } /* * Bootstrap NE fait PAS varier les couleurs sémantiques "de base" entre * light/dark (--bs-primary, --bs-secondary, --bs-success...) — c'est * voulu pour que les fonds pleins (.btn-primary, badge plein) restent la * même couleur de marque dans les deux modes. Mais utilisées seules comme * TEXTE ou BORDURE sur un fond sombre (.text-primary, .btn-outline-*, * .border-*, liens), ces teintes de base manquent de contraste. Bootstrap * fournit déjà des teintes "-text-emphasis" calibrées spécifiquement pour * ce cas — on les réutilise partout où une couleur sémantique sert de * texte/bordure plutôt que de fond plein. */ [data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; } [data-bs-theme="dark"] .text-secondary { color: var(--bs-secondary-text-emphasis) !important; } [data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; } [data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; } [data-bs-theme="dark"] .text-warning { color: var(--bs-warning-text-emphasis) !important; } [data-bs-theme="dark"] .text-info { color: var(--bs-info-text-emphasis) !important; } [data-bs-theme="dark"] .border-primary { border-color: var(--bs-primary-text-emphasis) !important; } [data-bs-theme="dark"] .border-secondary { border-color: var(--bs-secondary-text-emphasis) !important; } [data-bs-theme="dark"] .border-success { border-color: var(--bs-success-text-emphasis) !important; } [data-bs-theme="dark"] .border-danger { border-color: var(--bs-danger-text-emphasis) !important; } [data-bs-theme="dark"] .border-warning { border-color: var(--bs-warning-text-emphasis) !important; } [data-bs-theme="dark"] .border-info { border-color: var(--bs-info-text-emphasis) !important; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary-text-emphasis); --bs-btn-hover-bg: var(--bs-primary-text-emphasis); --bs-btn-hover-border-color: var(--bs-primary-text-emphasis); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--bs-primary-text-emphasis); --bs-btn-active-border-color: var(--bs-primary-text-emphasis); } [data-bs-theme="dark"] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); --bs-btn-border-color: var(--bs-secondary-text-emphasis); --bs-btn-hover-bg: var(--bs-secondary-text-emphasis); --bs-btn-hover-border-color: var(--bs-secondary-text-emphasis); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--bs-secondary-text-emphasis); --bs-btn-active-border-color: var(--bs-secondary-text-emphasis); } [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success-text-emphasis); --bs-btn-hover-bg: var(--bs-success-text-emphasis); --bs-btn-hover-border-color: var(--bs-success-text-emphasis); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--bs-success-text-emphasis); --bs-btn-active-border-color: var(--bs-success-text-emphasis); } [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger-text-emphasis); --bs-btn-hover-bg: var(--bs-danger-text-emphasis); --bs-btn-hover-border-color: var(--bs-danger-text-emphasis); --bs-btn-hover-color: #000; --bs-btn-active-bg: var(--bs-danger-text-emphasis); --bs-btn-active-border-color: var(--bs-danger-text-emphasis); } [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-border-color: var(--bs-warning-text-emphasis); } [data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); --bs-btn-border-color: var(--bs-info-text-emphasis); } /* Idem pour les badges "-subtle" pairés avec le texte de base au lieu du texte "-emphasis" prévu pour ça (pattern très répandu dans l'app : `badge bg-success-subtle text-success` au lieu de `text-success-emphasis`). Sélecteur avec .badge en plus (spécificité 0,4,0) : les 6 correctifs de contraste WCAG AA sur layouts/{app,admin,expert}.blade.php utilisent exactement `.badge.bg-X-subtle.text-X` (spécificité 0,3,0) — sans le .badge ici, les deux règles étaient à spécificité égale et celle du layout (chargée après theme.css dans le document) gagnait toujours, dans les deux modes. C'est ça qui rendait ce correctif inopérant. */ [data-bs-theme="dark"] .badge.bg-primary-subtle.text-primary { color: var(--bs-primary-text-emphasis) !important; } [data-bs-theme="dark"] .badge.bg-secondary-subtle.text-secondary { color: var(--bs-secondary-text-emphasis) !important; } [data-bs-theme="dark"] .badge.bg-success-subtle.text-success { color: var(--bs-success-text-emphasis) !important; } [data-bs-theme="dark"] .badge.bg-danger-subtle.text-danger { color: var(--bs-danger-text-emphasis) !important; } [data-bs-theme="dark"] .badge.bg-warning-subtle.text-warning { color: var(--bs-warning-text-emphasis) !important; } [data-bs-theme="dark"] .badge.bg-info-subtle.text-info { color: var(--bs-info-text-emphasis) !important; } /* Même souci de spécificité pour ce correctif de contraste sur les onglets (layouts/{app,admin,expert}.blade.php : .nav-tabs .nav-link:not(.active)). */ [data-bs-theme="dark"] .nav-tabs .nav-link:not(.active) { color: var(--bs-primary-text-emphasis) !important; } /* Liens : laisser Bootstrap gérer sa propre teinte de lien adaptée au mode sombre plutôt que notre bleu de marque (qui manque de contraste ici). */ :root:not([data-bs-theme="dark"]) { --bs-link-color: var(--brand-primary); --bs-link-color-rgb: 37, 99, 235; --bs-link-hover-color: var(--brand-primary-hover); --bs-link-hover-color-rgb: 29, 78, 216; } /* Texte atténué (.text-muted, placeholders) un peu plus lisible en sombre — Bootstrap part de 75% d'opacité, un peu juste dans cette app. */ [data-bs-theme="dark"] { --bs-secondary-color: rgba(222, 226, 230, 0.85); } /* ── Composants Bootstrap qui figent leurs couleurs à la compilation ── */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary-hover); --bs-btn-hover-border-color: var(--brand-primary-hover); --bs-btn-focus-shadow-rgb: 37, 99, 235; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary-active); --bs-btn-active-border-color: var(--brand-primary-active); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); } .btn-outline-primary { --bs-btn-color: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-focus-shadow-rgb: 37, 99, 235; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-primary); --bs-btn-active-border-color: var(--brand-primary); --bs-btn-disabled-color: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); } .form-check-input:checked { background-color: var(--brand-primary); border-color: var(--brand-primary); } .form-check-input:focus { border-color: var(--brand-primary-hover); box-shadow: 0 0 0 0.25rem rgba(37, 99, 235, 0.25); }