/* * TutinGo — Theme clair / sombre * ----------------------------------------------------------------------------- * Une seule source de verite : les tokens --tg-* ci-dessous. Les vues consomment * ces variables (ex. `background: var(--tg-surface)`) plutot que des couleurs en * dur, ce qui leur fait suivre le theme automatiquement. * * Le theme actif est porte par l'attribut `data-bs-theme` sur (light|dark), * pose avant le premier paint par partials/theme-boot.blade.php. C'est l'attribut * natif de Bootstrap 5.3 : tous les composants Bootstrap basculent donc seuls. * * Regles de contraste (CLAUDE.md) : minimum 4.5:1, jamais de violet sur violet. * En sombre, la couleur de marque #3F3896 devient illisible en texte : on utilise * --tg-primary-text (violet eclairci) pour le texte/les icones, et on garde * --tg-primary pour les aplats de boutons, ou le texte blanc reste lisible. */ /* ============================================================ 1. Tokens — theme clair (valeurs historiques de la plateforme) ============================================================ */ :root, [data-bs-theme="light"] { --tg-bg: #F8F7F4; --tg-bg-alt: #FFFFFF; --tg-surface: #FFFFFF; --tg-surface-2: #F9FAFB; --tg-surface-3: #F3F4F6; --tg-surface-hover: #F3F4F6; --tg-text: #1F2937; --tg-text-strong: #111827; --tg-text-muted: #6B7280; --tg-text-subtle: #9CA3AF; --tg-border: #E5E7EB; --tg-border-strong: #D1D5DB; --tg-border-subtle: #F3F4F6; --tg-primary: #3F3896; --tg-primary-hover: #322C7A; --tg-primary-text: #3F3896; --tg-primary-soft: rgba(63, 56, 150, 0.08); --tg-on-primary: #FFFFFF; --tg-success: #059669; --tg-success-text: #059669; --tg-success-soft: rgba(5, 150, 105, 0.10); --tg-warning: #F59E0B; --tg-warning-text: #B45309; --tg-warning-soft: rgba(245, 158, 11, 0.12); --tg-danger: #DC2626; --tg-danger-text: #DC2626; --tg-danger-soft: rgba(220, 38, 38, 0.10); --tg-info: #3B82F6; --tg-info-text: #2563EB; --tg-info-soft: rgba(59, 130, 246, 0.10); --tg-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --tg-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); --tg-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12); --tg-overlay: rgba(17, 24, 39, 0.45); color-scheme: light; } /* ============================================================ 2. Tokens — theme sombre ============================================================ */ [data-bs-theme="dark"] { --tg-bg: #12141A; --tg-bg-alt: #171A21; --tg-surface: #1B1E26; --tg-surface-2: #212530; --tg-surface-3: #272C38; --tg-surface-hover: #2B3140; --tg-text: #E7E9EE; --tg-text-strong: #F5F6F8; --tg-text-muted: #A3AAB8; --tg-text-subtle: #7C8494; --tg-border: #2E3440; --tg-border-strong: #3C4352; --tg-border-subtle: #262B35; --tg-primary: #5B54B8; --tg-primary-hover: #6E66CC; --tg-primary-text: #A9A2F0; --tg-primary-soft: rgba(139, 132, 232, 0.16); --tg-on-primary: #FFFFFF; --tg-success: #10B981; --tg-success-text: #4ADE9E; --tg-success-soft: rgba(16, 185, 129, 0.16); --tg-warning: #F59E0B; --tg-warning-text: #FBBF24; --tg-warning-soft: rgba(245, 158, 11, 0.18); --tg-danger: #EF4444; --tg-danger-text: #FF8A8A; --tg-danger-soft: rgba(239, 68, 68, 0.18); --tg-info: #3B82F6; --tg-info-text: #7DB3FF; --tg-info-soft: rgba(59, 130, 246, 0.18); --tg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --tg-shadow: 0 4px 14px rgba(0, 0, 0, 0.50); --tg-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.60); --tg-overlay: rgba(0, 0, 0, 0.65); color-scheme: dark; } /* ============================================================ 3. Bootstrap 5.3 — on aligne ses variables sur nos tokens pour que les deux systemes ne se contredisent pas. Attention : ce build du template prefixe les variables Bootstrap en --tb-* (et non --bs-*). L'attribut, lui, reste data-bs-theme. ============================================================ */ [data-bs-theme="dark"] { --tb-body-bg: var(--tg-bg); --tb-body-bg-rgb: 18, 20, 26; --tb-body-color: var(--tg-text); --tb-body-color-rgb: 231, 233, 238; --tb-emphasis-color: var(--tg-text-strong); --tb-secondary-color: var(--tg-text-muted); --tb-secondary-bg: var(--tg-surface-2); --tb-tertiary-bg: var(--tg-surface-3); --tb-tertiary-color: var(--tg-text-subtle); --tb-border-color: var(--tg-border); --tb-border-color-translucent: var(--tg-border); --tb-heading-color: var(--tg-text-strong); --tb-link-color: var(--tg-primary-text); --tb-link-color-rgb: 169, 162, 240; --tb-link-hover-color: #C4BEFF; } /* ============================================================ 4. Base ============================================================ */ body { background-color: var(--tg-bg); color: var(--tg-text); } /* Bascule douce, sans animer les elements qui bougent deja (drawer, modales). */ [data-tg-theme-switching] body, [data-tg-theme-switching] .card, [data-tg-theme-switching] .topbar, [data-tg-theme-switching] #page-topbar { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease; } [data-bs-theme="dark"] ::selection { background: var(--tg-primary-soft); color: var(--tg-text-strong); } [data-bs-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-bs-theme="dark"] ::-webkit-scrollbar-track { background: var(--tg-bg); } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--tg-border-strong); border-radius: 6px; } [data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--tg-text-subtle); } /* ============================================================ 5. Utilitaires Tailwind neutres (CDN, sans variantes dark:) Ils sont figes en clair dans le markup existant : on les reinterprete en sombre. `text-white` et `border-white` sont volontairement laisses tels quels : ils habillent des aplats colores ou le blanc reste la bonne couleur. ============================================================ */ [data-bs-theme="dark"] .bg-white { background-color: var(--tg-surface) !important; } [data-bs-theme="dark"] .bg-gray-50 { background-color: var(--tg-surface-2) !important; } [data-bs-theme="dark"] .bg-gray-100 { background-color: var(--tg-surface-3) !important; } [data-bs-theme="dark"] .bg-gray-200 { background-color: var(--tg-surface-hover) !important; } [data-bs-theme="dark"] .text-gray-900, [data-bs-theme="dark"] .text-gray-800 { color: var(--tg-text-strong) !important; } [data-bs-theme="dark"] .text-gray-700 { color: var(--tg-text) !important; } [data-bs-theme="dark"] .text-gray-600, [data-bs-theme="dark"] .text-gray-500 { color: var(--tg-text-muted) !important; } [data-bs-theme="dark"] .text-gray-400, [data-bs-theme="dark"] .text-gray-300 { color: var(--tg-text-subtle) !important; } [data-bs-theme="dark"] .border-gray-100, [data-bs-theme="dark"] .border-gray-200 { border-color: var(--tg-border) !important; } [data-bs-theme="dark"] .border-gray-300, [data-bs-theme="dark"] .border-gray-400 { border-color: var(--tg-border-strong) !important; } [data-bs-theme="dark"] .shadow, [data-bs-theme="dark"] .shadow-md { box-shadow: var(--tg-shadow) !important; } [data-bs-theme="dark"] .shadow-sm { box-shadow: var(--tg-shadow-sm) !important; } [data-bs-theme="dark"] .shadow-lg, [data-bs-theme="dark"] .shadow-xl, [data-bs-theme="dark"] .shadow-2xl { box-shadow: var(--tg-shadow-lg) !important; } /* Bootstrap : memes utilitaires, memes reserves sur le blanc de texte. */ [data-bs-theme="dark"] .bg-light { background-color: var(--tg-surface-2) !important; } [data-bs-theme="dark"] .bg-body, [data-bs-theme="dark"] .bg-body-tertiary { background-color: var(--tg-surface-2) !important; } [data-bs-theme="dark"] .text-dark { color: var(--tg-text) !important; } [data-bs-theme="dark"] .text-muted { color: var(--tg-text-muted) !important; } [data-bs-theme="dark"] .border { border-color: var(--tg-border) !important; } /* ============================================================ 6. Composants Bootstrap — ajustements au-dela du natif ============================================================ */ [data-bs-theme="dark"] .card { background-color: var(--tg-surface); border-color: var(--tg-border); color: var(--tg-text); } [data-bs-theme="dark"] .card-header, [data-bs-theme="dark"] .card-footer { background-color: var(--tg-surface-2); border-color: var(--tg-border); } [data-bs-theme="dark"] .modal-content { background-color: var(--tg-surface); border-color: var(--tg-border); color: var(--tg-text); } [data-bs-theme="dark"] .modal-header, [data-bs-theme="dark"] .modal-footer { border-color: var(--tg-border); } [data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.7; } [data-bs-theme="dark"] .dropdown-menu { background-color: var(--tg-surface-2); border-color: var(--tg-border); box-shadow: var(--tg-shadow); } [data-bs-theme="dark"] .dropdown-item { color: var(--tg-text); } [data-bs-theme="dark"] .dropdown-item:hover, [data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--tg-surface-hover); color: var(--tg-text-strong); } [data-bs-theme="dark"] .dropdown-divider { border-color: var(--tg-border); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea, [data-bs-theme="dark"] input[type="text"], [data-bs-theme="dark"] input[type="email"], [data-bs-theme="dark"] input[type="password"], [data-bs-theme="dark"] input[type="number"], [data-bs-theme="dark"] input[type="search"], [data-bs-theme="dark"] input[type="tel"], [data-bs-theme="dark"] input[type="date"], [data-bs-theme="dark"] input[type="time"], [data-bs-theme="dark"] select { background-color: var(--tg-surface-2); border-color: var(--tg-border-strong); color: var(--tg-text); } [data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus, [data-bs-theme="dark"] input:focus, [data-bs-theme="dark"] textarea:focus, [data-bs-theme="dark"] select:focus { background-color: var(--tg-surface-2); border-color: var(--tg-primary-text); color: var(--tg-text); box-shadow: 0 0 0 3px var(--tg-primary-soft); } [data-bs-theme="dark"] ::placeholder { color: var(--tg-text-subtle) !important; opacity: 1; } [data-bs-theme="dark"] .input-group-text { background-color: var(--tg-surface-3); border-color: var(--tg-border-strong); color: var(--tg-text-muted); } [data-bs-theme="dark"] .table { --tb-table-bg: transparent; --tb-table-color: var(--tg-text); --tb-table-border-color: var(--tg-border); --tb-table-striped-bg: var(--tg-surface-2); --tb-table-striped-color: var(--tg-text); --tb-table-hover-bg: var(--tg-surface-hover); --tb-table-hover-color: var(--tg-text-strong); } [data-bs-theme="dark"] .table > thead { color: var(--tg-text-muted); } [data-bs-theme="dark"] .list-group-item { background-color: var(--tg-surface); border-color: var(--tg-border); color: var(--tg-text); } [data-bs-theme="dark"] .nav-tabs { border-color: var(--tg-border); } [data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--tg-text-muted); } [data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--tg-surface); border-color: var(--tg-border) var(--tg-border) var(--tg-surface); color: var(--tg-text-strong); } [data-bs-theme="dark"] .accordion { --tb-accordion-bg: var(--tg-surface); --tb-accordion-color: var(--tg-text); --tb-accordion-border-color: var(--tg-border); --tb-accordion-btn-bg: var(--tg-surface-2); --tb-accordion-btn-color: var(--tg-text); --tb-accordion-active-bg: var(--tg-primary-soft); --tb-accordion-active-color: var(--tg-text-strong); } [data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--tg-text-subtle); } [data-bs-theme="dark"] .page-link { background-color: var(--tg-surface-2); border-color: var(--tg-border); color: var(--tg-text); } [data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--tg-primary); border-color: var(--tg-primary); color: var(--tg-on-primary); } [data-bs-theme="dark"] .page-item.disabled .page-link { background-color: var(--tg-surface); color: var(--tg-text-subtle); } [data-bs-theme="dark"] .alert { border-color: var(--tg-border); } [data-bs-theme="dark"] .alert-success { background-color: var(--tg-success-soft); color: var(--tg-success-text); } [data-bs-theme="dark"] .alert-danger { background-color: var(--tg-danger-soft); color: var(--tg-danger-text); } [data-bs-theme="dark"] .alert-warning { background-color: var(--tg-warning-soft); color: var(--tg-warning-text); } [data-bs-theme="dark"] .alert-info { background-color: var(--tg-info-soft); color: var(--tg-info-text); } [data-bs-theme="dark"] .offcanvas, [data-bs-theme="dark"] .toast, [data-bs-theme="dark"] .popover { background-color: var(--tg-surface); color: var(--tg-text); border-color: var(--tg-border); } /* Le bouton primaire garde la marque : aplat violet, texte blanc (7.9:1). */ [data-bs-theme="dark"] .btn-primary { --tb-btn-bg: var(--tg-primary); --tb-btn-border-color: var(--tg-primary); --tb-btn-hover-bg: var(--tg-primary-hover); --tb-btn-hover-border-color: var(--tg-primary-hover); --tb-btn-color: var(--tg-on-primary); --tb-btn-hover-color: var(--tg-on-primary); } [data-bs-theme="dark"] .btn-outline-primary { --tb-btn-color: var(--tg-primary-text); --tb-btn-border-color: var(--tg-primary-text); --tb-btn-hover-bg: var(--tg-primary); --tb-btn-hover-border-color: var(--tg-primary); --tb-btn-hover-color: var(--tg-on-primary); } [data-bs-theme="dark"] .btn-light { --tb-btn-bg: var(--tg-surface-3); --tb-btn-border-color: var(--tg-border-strong); --tb-btn-color: var(--tg-text); --tb-btn-hover-bg: var(--tg-surface-hover); --tb-btn-hover-color: var(--tg-text-strong); --tb-btn-hover-border-color: var(--tg-border-strong); } /* Librairies tierces employees sur la plateforme. */ [data-bs-theme="dark"] .swal2-popup { background: var(--tg-surface) !important; color: var(--tg-text) !important; } [data-bs-theme="dark"] .swal2-title, [data-bs-theme="dark"] .swal2-html-container { color: var(--tg-text) !important; } [data-bs-theme="dark"] .flatpickr-calendar, [data-bs-theme="dark"] .choices__list--dropdown, [data-bs-theme="dark"] .choices__inner { background: var(--tg-surface-2) !important; color: var(--tg-text) !important; border-color: var(--tg-border) !important; } /* Logo : l'encre est foncee et la marque violette. L'inverser detruirait les couleurs, on le pose donc sur une pastille claire plutot que de le retoucher. */ [data-bs-theme="dark"] .logo-desktop, [data-bs-theme="dark"] .logo-mobile, [data-bs-theme="dark"] .drawer-logo, [data-bs-theme="dark"] .auth-logo img, [data-bs-theme="dark"] .navbar-brand-box .logo-dark img { background: #FFFFFF; padding: 4px 10px; border-radius: 8px; box-sizing: content-box; } /* Illustrations pensees pour un fond clair : on attenue le halo. */ [data-bs-theme="dark"] .tg-dim-on-dark { filter: brightness(0.88) contrast(1.05); } /* ============================================================ 8. Pont de palette — couleurs historiques des vues ------------------------------------------------------------ Les vues portaient leurs couleurs en dur. Chaque teinte utilisee recoit ici un token dont la valeur CLAIRE est identique a l'originale : la conversion des vues ne change donc rien en clair, et donne son equivalent lisible en sombre. --tg-c-* surfaces et bordures --tg-t-* couleurs de texte neutres --tg-a-* couleurs de texte accentuees (marque, statuts) ============================================================ */ :root, [data-bs-theme="light"] { --tg-c-white: #FFFFFF; --tg-c-cream: #F8F7F4; --tg-c-gray-50: #F9FAFB; --tg-c-gray-100: #F3F4F6; --tg-c-gray-200: #E5E7EB; --tg-c-gray-300: #D1D5DB; --tg-c-gray-e9: #E9ECEF; --tg-c-slate-100: #F1F5F9; --tg-c-slate-200: #E2E8F0; --tg-t-900: #111827; --tg-t-800: #1F2937; --tg-t-700: #374151; --tg-t-600: #4B5563; --tg-t-500: #6B7280; --tg-t-400: #9CA3AF; --tg-a-brand: #3F3896; --tg-a-violet: #7C3AED; --tg-a-green: #10B981; --tg-a-green-600: #059669; --tg-a-red: #EF4444; --tg-a-red-600: #DC2626; --tg-a-amber: #F59E0B; --tg-a-amber-600: #D97706; --tg-a-blue: #3B82F6; --tg-a-blue-600: #2563EB; } [data-bs-theme="dark"] { --tg-c-white: #1B1E26; --tg-c-cream: #12141A; --tg-c-gray-50: #212530; --tg-c-gray-100: #272C38; --tg-c-gray-200: #2E3440; --tg-c-gray-300: #3C4352; --tg-c-gray-e9: #2E3440; --tg-c-slate-100: #272C38; --tg-c-slate-200: #2E3440; /* Texte : l'echelle s'inverse, du plus contraste au plus discret. */ --tg-t-900: #F5F6F8; --tg-t-800: #E7E9EE; --tg-t-700: #D5DAE3; --tg-t-600: #B9C0CC; --tg-t-500: #A3AAB8; --tg-t-400: #7C8494; /* Accents eclaircis : les teintes d'origine tombent sous 4.5:1 sur fond sombre. */ --tg-a-brand: #A9A2F0; --tg-a-violet: #C4B5FD; --tg-a-green: #4ADE9E; --tg-a-green-600: #34D399; --tg-a-red: #FF8A8A; --tg-a-red-600: #F87171; --tg-a-amber: #FBBF24; --tg-a-amber-600: #FBBF24; --tg-a-blue: #7DB3FF; --tg-a-blue-600: #60A5FA; } /* Aplats pastel des badges et encarts. En sombre ils deviennent des voiles translucides : ils se posent sur n'importe quelle surface sans creer de tache claire, et laissent le texte accentue (--tg-a-*) lisible par-dessus. */ :root, [data-bs-theme="light"] { --tg-s-amber-50: #FFFBEB; --tg-s-amber-100: #FEF3C7; --tg-s-amber-200: #FDE68A; --tg-s-red-50: #FEF2F2; --tg-s-red-100: #FEE2E2; --tg-s-red-200: #FECACA; --tg-s-green-50: #ECFDF5; --tg-s-green-100: #D1FAE5; --tg-s-green-150: #DCFCE7; --tg-s-green-200: #A7F3D0; --tg-s-blue-50: #EFF6FF; --tg-s-blue-100: #DBEAFE; --tg-s-blue-200: #BFDBFE; --tg-s-violet-50: #F5F3FF; --tg-s-violet-100: #EDE9FE; --tg-s-violet-150: #FAF5FF; --tg-s-indigo-50: #EEF2FF; --tg-s-indigo-100: #E0E7FF; --tg-s-brand-50: #F8F9FF; --tg-s-brand-100: #F0F4FF; --tg-c-gray-f8f9fa: #F8F9FA; --tg-c-beige: #F3F2EE; } [data-bs-theme="dark"] { --tg-s-amber-50: rgba(245, 158, 11, 0.10); --tg-s-amber-100: rgba(245, 158, 11, 0.16); --tg-s-amber-200: rgba(245, 158, 11, 0.24); --tg-s-red-50: rgba(239, 68, 68, 0.10); --tg-s-red-100: rgba(239, 68, 68, 0.16); --tg-s-red-200: rgba(239, 68, 68, 0.24); --tg-s-green-50: rgba(16, 185, 129, 0.10); --tg-s-green-100: rgba(16, 185, 129, 0.16); --tg-s-green-150: rgba(16, 185, 129, 0.18); --tg-s-green-200: rgba(16, 185, 129, 0.24); --tg-s-blue-50: rgba(59, 130, 246, 0.10); --tg-s-blue-100: rgba(59, 130, 246, 0.16); --tg-s-blue-200: rgba(59, 130, 246, 0.24); --tg-s-violet-50: rgba(124, 58, 237, 0.12); --tg-s-violet-100: rgba(124, 58, 237, 0.20); --tg-s-violet-150: rgba(124, 58, 237, 0.14); --tg-s-indigo-50: rgba(139, 132, 232, 0.14); --tg-s-indigo-100: rgba(139, 132, 232, 0.22); --tg-s-brand-50: rgba(139, 132, 232, 0.10); --tg-s-brand-100: rgba(139, 132, 232, 0.16); --tg-c-gray-f8f9fa: #212530; --tg-c-beige: #1B1E26; } /* Voiles blancs translucides (survols, pastilles posees sur un encart). En sombre un voile blanc opaque cree une tache claire : on l'attenue, ou on le remplace par la surface quand il servait de carte pleine. */ :root, [data-bs-theme="light"] { --tg-veil-solid: rgba(255, 255, 255, 0.95); --tg-veil-70: rgba(255, 255, 255, 0.70); --tg-veil-50: rgba(255, 255, 255, 0.50); } [data-bs-theme="dark"] { --tg-veil-solid: rgba(27, 30, 38, 0.92); --tg-veil-70: rgba(255, 255, 255, 0.07); --tg-veil-50: rgba(255, 255, 255, 0.06); } /* Nuances heritees restantes : valeur claire conservee au pixel pres. */ :root, [data-bs-theme="light"] { --tg-c-f8fafc: #F8FAFC; --tg-c-fafafa: #FAFAFA; --tg-c-f5f5f5: #F5F5F5; --tg-c-eee: #EEEEEE; --tg-c-ddd: #DDDDDD; --tg-t-495057: #495057; --tg-t-666: #666666; --tg-t-333: #333333; } [data-bs-theme="dark"] { --tg-c-f8fafc: #272C38; --tg-c-fafafa: #212530; --tg-c-f5f5f5: #272C38; --tg-c-eee: #2E3440; --tg-c-ddd: #3C4352; --tg-t-495057: #B9C0CC; --tg-t-666: #A3AAB8; --tg-t-333: #E7E9EE; } /* ============================================================ 7. Bouton de bascule de theme ============================================================ */ .tg-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--tg-border); border-radius: 10px; background: var(--tg-surface-2); } .tg-theme-toggle__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 30px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--tg-text-muted); font-size: 15px; line-height: 1; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .tg-theme-toggle__btn:hover { background: var(--tg-surface-hover); color: var(--tg-text); } .tg-theme-toggle__btn[aria-checked="true"] { background: var(--tg-primary); color: var(--tg-on-primary); } .tg-theme-toggle__btn:focus-visible { outline: 2px solid var(--tg-primary-text); outline-offset: 2px; } /* Variante compacte : un seul bouton qui fait defiler clair -> sombre -> auto. */ .tg-theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--tg-border); border-radius: 10px; background: var(--tg-surface); color: var(--tg-text-muted); font-size: 18px; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .tg-theme-switch:hover { background: var(--tg-surface-hover); color: var(--tg-primary-text); border-color: var(--tg-border-strong); } .tg-theme-switch:focus-visible { outline: 2px solid var(--tg-primary-text); outline-offset: 2px; } /* Icones SVG inline : elles suivent la taille de texte du bouton et sa couleur, comme le faisaient les qu'elles remplacent. */ .tg-theme-icon { width: 1em; height: 1em; flex: none; } /* L'icone affichee depend du mode courant, porte par . */ .tg-theme-switch__icon { display: none; } [data-tg-theme="light"] .tg-theme-switch__icon--light, [data-tg-theme="dark"] .tg-theme-switch__icon--dark, [data-tg-theme="auto"] .tg-theme-switch__icon--auto { display: block; } /* Rangee pleine largeur pour le tiroir mobile. */ .tg-theme-toggle--block { display: flex; width: 100%; } .tg-theme-toggle--block .tg-theme-toggle__btn { flex: 1; height: 36px; gap: 6px; font-size: 13px; font-weight: 600; } /* ============================================================ 9. Teintes ponctuelles des vues (generees) ------------------------------------------------------------ Longue traine de couleurs employees une ou deux fois : encarts pastel et textes de statut. Meme principe que le pont de palette : valeur claire identique a l'originale, equivalent lisible en sombre (voile translucide pour les fonds, teinte eclaircie pour les textes). ============================================================ */ :root, [data-bs-theme="light"] { --tg-x-bg-bae6fd: #BAE6FD; --tg-x-bg-c8e6c9: #C8E6C9; --tg-x-bg-cce5ff: #CCE5FF; --tg-x-bg-ccfbf1: #CCFBF1; --tg-x-bg-d4edda: #D4EDDA; --tg-x-bg-dcf8c6: #DCF8C6; --tg-x-bg-e0e0e0: #E0E0E0; --tg-x-bg-e0f2fe: #E0F2FE; --tg-x-bg-e0f7ff: #E0F7FF; --tg-x-bg-e1f5fe: #E1F5FE; --tg-x-bg-e3f2fd: #E3F2FD; --tg-x-bg-e5e2f0: #E5E2F0; --tg-x-bg-e5e3df: #E5E3DF; --tg-x-bg-e6eef6: #E6EEF6; --tg-x-bg-e8e7f0: #E8E7F0; --tg-x-bg-e8efff: #E8EFFF; --tg-x-bg-e8f5e9: #E8F5E9; --tg-x-bg-ebe9f5: #EBE9F5; --tg-x-bg-eceae5: #ECEAE5; --tg-x-bg-efebe9: #EFEBE9; --tg-x-bg-efeef8: #EFEEF8; --tg-x-bg-f0eeff: #F0EEFF; --tg-x-bg-f0effa: #F0EFFA; --tg-x-bg-f0f0f0: #F0F0F0; --tg-x-bg-f0fdf4: #F0FDF4; --tg-x-bg-f3e5f5: #F3E5F5; --tg-x-bg-f3e8ff: #F3E8FF; --tg-x-bg-f3f2fb: #F3F2FB; --tg-x-bg-f4f7f6: #F4F7F6; --tg-x-bg-f5f7fa: #F5F7FA; --tg-x-bg-f5f7fb: #F5F7FB; --tg-x-bg-f5f7ff: #F5F7FF; --tg-x-bg-f7fafc: #F7FAFC; --tg-x-bg-f8d7da: #F8D7DA; --tg-x-bg-f8f7fc: #F8F7FC; --tg-x-bg-f8f7ff: #F8F7FF; --tg-x-bg-fafaf9: #FAFAF9; --tg-x-bg-fafbff: #FAFBFF; --tg-x-bg-fbf9f6: #FBF9F6; --tg-x-bg-fce4c8: #FCE4C8; --tg-x-bg-fce4ec: #FCE4EC; --tg-x-bg-fce7f3: #FCE7F3; --tg-x-bg-fdebd0: #FDEBD0; --tg-x-bg-fdf8ed: #FDF8ED; --tg-x-bg-fed7aa: #FED7AA; --tg-x-bg-fef3e2: #FEF3E2; --tg-x-bg-ffe0b2: #FFE0B2; --tg-x-bg-ffe3a0: #FFE3A0; --tg-x-bg-ffe5b4: #FFE5B4; --tg-x-bg-ffecd2: #FFECD2; --tg-x-bg-ffedd5: #FFEDD5; --tg-x-bg-fff3cd: #FFF3CD; --tg-x-bg-fff3e0: #FFF3E0; --tg-x-bg-fff5f5: #FFF5F5; --tg-x-bg-fff7ed: #FFF7ED; --tg-x-bg-fffbf0: #FFFBF0; --tg-x-t-004085: #004085; --tg-x-t-0277bd: #0277BD; --tg-x-t-0284c7: #0284C7; --tg-x-t-047857: #047857; --tg-x-t-055160: #055160; --tg-x-t-059669: #059669; --tg-x-t-065f46: #065F46; --tg-x-t-0d6efd: #0D6EFD; --tg-x-t-0d9488: #0D9488; --tg-x-t-0e7490: #0E7490; --tg-x-t-155724: #155724; --tg-x-t-15803d: #15803D; --tg-x-t-166534: #166534; --tg-x-t-1877f2: #1877F2; --tg-x-t-1976d2: #1976D2; --tg-x-t-198754: #198754; --tg-x-t-1a1a2e: #1A1A2E; --tg-x-t-1a202c: #1A202C; --tg-x-t-1d1e20: #1D1E20; --tg-x-t-1d4ed8: #1D4ED8; --tg-x-t-1e293b: #1E293B; --tg-x-t-1e3a8a: #1E3A8A; --tg-x-t-1e40af: #1E40AF; --tg-x-t-1f2937: #1F2937; --tg-x-t-212529: #212529; --tg-x-t-2563eb: #2563EB; --tg-x-t-2e7d32: #2E7D32; --tg-x-t-334155: #334155; --tg-x-t-388e3c: #388E3C; --tg-x-t-475569: #475569; --tg-x-t-4a5568: #4A5568; --tg-x-t-4f46e5: #4F46E5; --tg-x-t-5b4fc7: #5B4FC7; --tg-x-t-5b54b8: #5B54B8; --tg-x-t-5d4037: #5D4037; --tg-x-t-6366f1: #6366F1; --tg-x-t-636b6f: #636B6F; --tg-x-t-64748b: #64748B; --tg-x-t-667781: #667781; --tg-x-t-667eea: #667EEA; --tg-x-t-6b21a8: #6B21A8; --tg-x-t-6c757d: #6C757D; --tg-x-t-6d28d9: #6D28D9; --tg-x-t-718096: #718096; --tg-x-t-721c24: #721C24; --tg-x-t-78350f: #78350F; --tg-x-t-7b1fa2: #7B1FA2; --tg-x-t-7f1d1d: #7F1D1D; --tg-x-t-856404: #856404; --tg-x-t-8b5cf6: #8B5CF6; --tg-x-t-92400e: #92400E; --tg-x-t-991b1b: #991B1B; --tg-x-t-996f0a: #996F0A; --tg-x-t-9a3412: #9A3412; --tg-x-t-9a7209: #9A7209; --tg-x-t-9d174d: #9D174D; --tg-x-t-a855f7: #A855F7; --tg-x-t-b45309: #B45309; --tg-x-t-b91c1c: #B91C1C; --tg-x-t-be185d: #BE185D; --tg-x-t-c2185b: #C2185B; --tg-x-t-c2410c: #C2410C; --tg-x-t-d84315: #D84315; --tg-x-t-db4437: #DB4437; --tg-x-t-dc3545: #DC3545; --tg-x-t-e65100: #E65100; --tg-x-t-ea4335: #EA4335; --tg-x-t-ea580c: #EA580C; } [data-bs-theme="dark"] { --tg-x-bg-bae6fd: rgba(43, 171, 238, 0.16); --tg-x-bg-c8e6c9: rgba(77, 203, 81, 0.16); --tg-x-bg-cce5ff: rgba(43, 138, 238, 0.16); --tg-x-bg-ccfbf1: rgba(43, 238, 196, 0.16); --tg-x-bg-d4edda: rgba(77, 203, 107, 0.16); --tg-x-bg-dcf8c6: rgba(129, 230, 51, 0.16); --tg-x-bg-e0e0e0: var(--tg-c-gray-200); --tg-x-bg-e0f2fe: rgba(43, 160, 238, 0.16); --tg-x-bg-e0f7ff: rgba(43, 187, 238, 0.16); --tg-x-bg-e1f5fe: rgba(43, 177, 238, 0.16); --tg-x-bg-e3f2fd: rgba(43, 155, 238, 0.16); --tg-x-bg-e5e2f0: rgba(104, 77, 203, 0.16); --tg-x-bg-e5e3df: rgba(203, 161, 77, 0.16); --tg-x-bg-e6eef6: rgba(77, 140, 203, 0.16); --tg-x-bg-e8e7f0: rgba(91, 77, 203, 0.16); --tg-x-bg-e8efff: rgba(43, 102, 238, 0.16); --tg-x-bg-e8f5e9: rgba(77, 203, 87, 0.16); --tg-x-bg-ebe9f5: rgba(98, 77, 203, 0.16); --tg-x-bg-eceae5: rgba(203, 167, 77, 0.16); --tg-x-bg-efebe9: rgba(203, 119, 77, 0.16); --tg-x-bg-efeef8: rgba(90, 77, 203, 0.16); --tg-x-bg-f0eeff: rgba(66, 43, 238, 0.16); --tg-x-bg-f0effa: rgba(89, 77, 203, 0.16); --tg-x-bg-f0f0f0: var(--tg-c-gray-100); --tg-x-bg-f0fdf4: rgba(52, 228, 107, 0.16); --tg-x-bg-f3e5f5: rgba(188, 77, 203, 0.16); --tg-x-bg-f3e8ff: rgba(136, 43, 238, 0.16); --tg-x-bg-f3f2fb: rgba(91, 77, 203, 0.16); --tg-x-bg-f4f7f6: rgba(77, 203, 161, 0.16); --tg-x-bg-f5f7fa: rgba(77, 128, 203, 0.16); --tg-x-bg-f5f7fb: rgba(77, 119, 203, 0.16); --tg-x-bg-f5f7ff: rgba(43, 82, 238, 0.16); --tg-x-bg-f7fafc: rgba(77, 153, 203, 0.16); --tg-x-bg-f8d7da: rgba(221, 60, 74, 0.16); --tg-x-bg-f8f7fc: rgba(102, 77, 203, 0.16); --tg-x-bg-f8f7ff: rgba(67, 43, 238, 0.16); --tg-x-bg-fafaf9: var(--tg-c-gray-100); --tg-x-bg-fafbff: rgba(43, 82, 238, 0.16); --tg-x-bg-fbf9f6: rgba(203, 153, 77, 0.16); --tg-x-bg-fce4c8: rgba(238, 148, 43, 0.16); --tg-x-bg-fce4ec: rgba(232, 48, 110, 0.16); --tg-x-bg-fce7f3: rgba(230, 51, 153, 0.16); --tg-x-bg-fdebd0: rgba(238, 160, 43, 0.16); --tg-x-bg-fdf8ed: rgba(232, 175, 48, 0.16); --tg-x-bg-fed7aa: rgba(238, 147, 43, 0.16); --tg-x-bg-fef3e2: rgba(238, 161, 43, 0.16); --tg-x-bg-ffe0b2: rgba(238, 159, 43, 0.16); --tg-x-bg-ffe3a0: rgba(238, 180, 43, 0.16); --tg-x-bg-ffe5b4: rgba(238, 170, 43, 0.16); --tg-x-bg-ffecd2: rgba(238, 155, 43, 0.16); --tg-x-bg-ffedd5: rgba(238, 154, 43, 0.16); --tg-x-bg-fff3cd: rgba(238, 191, 43, 0.16); --tg-x-bg-fff3e0: rgba(238, 162, 43, 0.16); --tg-x-bg-fff5f5: rgba(238, 43, 43, 0.16); --tg-x-bg-fff7ed: rgba(238, 151, 43, 0.16); --tg-x-bg-fffbf0: rgba(238, 186, 43, 0.16); --tg-x-t-004085: #91C0F3; --tg-x-t-0277bd: #91CEF3; --tg-x-t-0284c7: #91D1F3; --tg-x-t-047857: #91F3D7; --tg-x-t-055160: #91E3F3; --tg-x-t-059669: #91F3D4; --tg-x-t-065f46: #91F3D7; --tg-x-t-0d6efd: #91B8F3; --tg-x-t-0d9488: #91F3EA; --tg-x-t-0e7490: #91DEF3; --tg-x-t-155724: #9CE7AD; --tg-x-t-15803d: #96EEB7; --tg-x-t-166534: #9AE9B8; --tg-x-t-1877f2: #91BCF3; --tg-x-t-1976d2: #92C2F2; --tg-x-t-198754: #98ECC5; --tg-x-t-1a1a2e: #A6A6DD; --tg-x-t-1a202c: #A6B9DD; --tg-x-t-1d1e20: var(--tg-t-700); --tg-x-t-1d4ed8: #93ACF1; --tg-x-t-1e293b: #A6BBDD; --tg-x-t-1e3a8a: #9AAFE9; --tg-x-t-1e40af: #97ABED; --tg-x-t-1f2937: #A6BDDD; --tg-x-t-212529: #A6C2DD; --tg-x-t-2563eb: #91B0F3; --tg-x-t-2e7d32: #A6DEA8; --tg-x-t-334155: #A6BDDD; --tg-x-t-388e3c: #A6DDA9; --tg-x-t-475569: #A6BDDD; --tg-x-t-4a5568: #A6BADD; --tg-x-t-4f46e5: #B2AEF4; --tg-x-t-5b4fc7: #A8A2E1; --tg-x-t-5b54b8: #AAA6DD; --tg-x-t-5d4037: #DDB3A6; --tg-x-t-6366f1: #9193F3; --tg-x-t-636b6f: var(--tg-t-500); --tg-x-t-64748b: #A6BDDD; --tg-x-t-667781: #A6C9DD; --tg-x-t-667eea: #93A4F0; --tg-x-t-6b21a8: #C699EB; --tg-x-t-6c757d: var(--tg-t-500); --tg-x-t-6d28d9: #B897ED; --tg-x-t-718096: #A6BDDD; --tg-x-t-721c24: #E79DA4; --tg-x-t-78350f: #F1B592; --tg-x-t-7b1fa2: #D398EB; --tg-x-t-7f1d1d: #E89B9B; --tg-x-t-856404: #F3DA91; --tg-x-t-8b5cf6: #AF91F3; --tg-x-t-92400e: #F3B691; --tg-x-t-991b1b: #ED9797; --tg-x-t-996f0a: #F3D691; --tg-x-t-9a3412: #F2AA91; --tg-x-t-9a7209: #F3D891; --tg-x-t-9d174d: #EF94B9; --tg-x-t-a855f7: #C391F3; --tg-x-t-b45309: #F3BB91; --tg-x-t-b91c1c: #EF9595; --tg-x-t-be185d: #F192BA; --tg-x-t-c2185b: #F292B8; --tg-x-t-c2410c: #F3AD91; --tg-x-t-d84315: #F3A891; --tg-x-t-db4437: #EC9E97; --tg-x-t-dc3545: #ED979F; --tg-x-t-e65100: #F3B391; --tg-x-t-ea4335: #F39891; --tg-x-t-ea580c: #F3B291; } /* ============================================================ 10. Logo — variante blanche en theme sombre ============================================================ Le logo par defaut (logo-dark.png) porte le mot « Tutin » en #000000 : sur les fonds sombres il disparait, seul le « Go » violet reste lisible. On sert alors logo-white.png (meme fichier, mot « Tutin » passe en blanc, « Go » inchange, fond transparent, meme resolution 330x76 donc aucun flou). Le remplacement se fait ici plutot que dans la vingtaine de vues qui affichent le logo. `content: url()` sur un remplace l'image rendue sans toucher au src ni a l'attribut alt. Exception `:not(.invert)` : le pied de page des pages legales applique deja `brightness-0 invert` pour obtenir un logo entierement blanc sur son fond sombre permanent — l'inversion reteindrait le blanc en noir. */ [data-bs-theme="dark"] img[src$="logo-dark.png"]:not(.invert), [data-bs-theme="dark"] .topbar-logo img, [data-bs-theme="dark"] .platform-logo img, [data-bs-theme="dark"] .drawer-logo, [data-bs-theme="dark"] .loader-logo { content: url("/build/images/logo-white.png"); } /* ============================================================ 11. Bascule de theme sur mobile ============================================================ */ /* Cible tactile : 38px suffit a la souris, pas au doigt. */ @media (max-width: 767px) { .tg-theme-switch { width: 42px; height: 42px; font-size: 20px; } } /* Variante posee sur un fond sombre permanent — l'overlay du menu mobile de la landing est violet quel que soit le theme, les tokens clairs y seraient illisibles. */ .tg-theme-toggle--on-dark { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); } .tg-theme-toggle--on-dark .tg-theme-toggle__btn { color: #FFFFFF; } .tg-theme-toggle--on-dark .tg-theme-toggle__btn:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; } .tg-theme-toggle--on-dark .tg-theme-toggle__btn[aria-checked="true"] { background: #FFFFFF; color: var(--tg-primary); }