/* ============================================================ Globalronde — Design tokens adaptatifs (Night / Day / High-Viz) Source : Claude Design prototype v2.6 Thèmes pour la lisibilité en terrain (météo variable). ============================================================ */ /* ── NIGHT (défaut) — Poste de contrôle, travail de nuit ── */ :root, :root[data-theme='night'] { --gr-bg: #070c1a; --gr-bg-2: #0b1120; --gr-surface: #0f1729; --gr-surface-2: #162033; --gr-surface-3: #1e2d47; --gr-surface-glass: rgba(15, 23, 41, 0.65); --gr-border: rgba(255, 255, 255, 0.07); --gr-border-2: rgba(255, 255, 255, 0.12); --gr-border-3: rgba(245, 158, 11, 0.18); --gr-gold: #f59e0b; --gr-gold-dark: #d97706; --gr-gold-darker: #b45309; --gr-gold-glow: rgba(245, 158, 11, 0.15); --gr-cyan: #22d3ee; --gr-cyan-muted: #06b6d4; --gr-green: #34d399; --gr-green-dark: #059669; --gr-red: #f87171; --gr-red-dark: #dc2626; --gr-text: #f1f5f9; --gr-text-muted: #94a3b8; --gr-text-faint: #64748b; --gr-shadow-strength: 0.45; --gr-bg-pattern-opacity: 0.025; --gr-bg-glow-opacity: 0.05; --gr-radius-sm: 8px; --gr-radius-md: 12px; --gr-radius-lg: 16px; --gr-radius-xl: 20px; --gr-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --gr-font-heading: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --gr-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace; } /* Titres : police dediee surchargeable depuis /superadmin/preferences */ html[data-theme] h1, html[data-theme] h2, html[data-theme] h3, html[data-theme] h4, html[data-theme] h5, html[data-theme] h6, html[data-theme] .h1, html[data-theme] .h2, html[data-theme] .h3, html[data-theme] .h4, html[data-theme] .h5, html[data-theme] .h6, html[data-theme] .gr-pg-head h1, html[data-theme] .navbar-brand { font-family: var(--gr-font-heading, var(--gr-font)); } /* ── DAY — Plein soleil, fond clair contrasté ── */ :root[data-theme='day'] { --gr-bg: #f4f5f7; --gr-bg-2: #eceef2; --gr-surface: #ffffff; --gr-surface-2: #f4f5f7; --gr-surface-3: #e6e8ee; --gr-surface-glass: rgba(255, 255, 255, 0.85); --gr-border: rgba(15, 23, 41, 0.1); --gr-border-2: rgba(15, 23, 41, 0.16); --gr-border-3: rgba(180, 83, 9, 0.3); --gr-gold: #b45309; --gr-gold-dark: #92400e; --gr-gold-darker: #78350f; --gr-gold-glow: rgba(180, 83, 9, 0.12); --gr-cyan: #0369a1; --gr-cyan-muted: #0284c7; --gr-green: #047857; --gr-green-dark: #065f46; --gr-red: #b91c1c; --gr-red-dark: #991b1b; --gr-text: #0f172a; --gr-text-muted: #475569; --gr-text-faint: #64748b; --gr-shadow-strength: 0.08; --gr-bg-pattern-opacity: 0.04; --gr-bg-glow-opacity: 0; } /* ── HIGH-VIZ — Pluie, reflets, lumière intense (EN ISO 20471) ── */ :root[data-theme='hiviz'] { --gr-bg: #ffffff; --gr-bg-2: #ffffff; --gr-surface: #ffffff; --gr-surface-2: #fafafa; --gr-surface-3: #f0f0f0; --gr-surface-glass: #ffffff; --gr-border: #000000; --gr-border-2: #000000; --gr-border-3: #000000; --gr-gold: #000000; --gr-gold-dark: #000000; --gr-gold-darker: #000000; --gr-gold-glow: #fde047; --gr-cyan: #000000; --gr-cyan-muted: #000000; --gr-green: #000000; --gr-green-dark: #000000; --gr-red: #000000; --gr-red-dark: #000000; --gr-text: #000000; --gr-text-muted: #000000; --gr-text-faint: #000000; --gr-shadow-strength: 0; --gr-bg-pattern-opacity: 0; --gr-bg-glow-opacity: 0; } /* ── Body theming — Active sur ────── */ html[data-theme] body { background: var(--gr-bg); color: var(--gr-text); font-family: var(--gr-font); -webkit-font-smoothing: antialiased; } /* ── Hi-Viz : texte toujours gras + lettres espacées ─────── */ html[data-theme='hiviz'] body { font-weight: 600; } html[data-theme='hiviz'] * { letter-spacing: 0.01em !important; } html[data-theme='hiviz'] .card, html[data-theme='hiviz'] .btn, html[data-theme='hiviz'] .form-control, html[data-theme='hiviz'] .form-select, html[data-theme='hiviz'] table { border: 2px solid #000 !important; } html[data-theme='hiviz'] .btn-primary, html[data-theme='hiviz'] .btn-warning { background: #fde047 !important; color: #000 !important; border: 2px solid #000 !important; font-weight: 700 !important; } html[data-theme='hiviz'] .badge { border: 2px solid #000 !important; font-weight: 800 !important; } html[data-theme='hiviz'] * { box-shadow: none !important; text-shadow: none !important; filter: none !important; } /* ── Day mode overrides Bootstrap ────────────────────────── */ html[data-theme='day'] { --bs-body-bg: #f4f5f7; --bs-body-color: #0f172a; } html[data-theme='day'] .card { background: #ffffff; border-color: rgba(15, 23, 41, 0.1); box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04), 0 4px 14px rgba(15, 23, 41, 0.05); } html[data-theme='day'] .text-muted, html[data-theme='day'] .text-body-secondary { color: #475569 !important; } html[data-theme='day'] .navbar-dark { background: #ffffff !important; border-bottom: 1px solid rgba(15, 23, 41, 0.08); } html[data-theme='day'] .navbar-dark .navbar-brand, html[data-theme='day'] .navbar-dark .nav-link { color: #0f172a !important; } html[data-theme='day'] .navbar-dark .nav-link:hover { color: #b45309 !important; } html[data-theme='day'] .table { --bs-table-color: #0f172a; --bs-table-bg: #ffffff; } html[data-theme='day'] .table-dark { --bs-table-bg: #f4f5f7; --bs-table-color: #0f172a; --bs-table-border-color: rgba(15, 23, 41, 0.1); } html[data-theme='day'] .form-control, html[data-theme='day'] .form-select { background: #ffffff; color: #0f172a; border-color: rgba(15, 23, 41, 0.16); } /* ── Hi-viz overrides Bootstrap ──────────────────────────── */ html[data-theme='hiviz'] { --bs-body-bg: #ffffff; --bs-body-color: #000000; } html[data-theme='hiviz'] .navbar-dark, html[data-theme='hiviz'] .navbar { background: #ffffff !important; border-bottom: 3px solid #000 !important; } html[data-theme='hiviz'] .navbar-dark .navbar-brand, html[data-theme='hiviz'] .navbar-dark .nav-link { color: #000 !important; } html[data-theme='hiviz'] .card, html[data-theme='hiviz'] .table, html[data-theme='hiviz'] .form-control, html[data-theme='hiviz'] .form-select { background: #ffffff !important; color: #000 !important; } html[data-theme='hiviz'] .alert { border-width: 2px !important; border-color: #000 !important; } html[data-theme='hiviz'] .text-muted, html[data-theme='hiviz'] .text-body-secondary { color: #000 !important; opacity: 1 !important; } html[data-theme='hiviz'] .badge.bg-success, html[data-theme='hiviz'] .badge.bg-info { background: #ffffff !important; color: #000 !important; } html[data-theme='hiviz'] .badge.bg-danger { background: #000 !important; color: #fff !important; } html[data-theme='hiviz'] .badge.bg-warning { background: #fde047 !important; color: #000 !important; } html[data-theme='hiviz'] .badge.bg-secondary { background: #fff !important; color: #000 !important; text-decoration: underline; } html[data-theme='hiviz'] .nav-link.active { background: #fde047 !important; color: #000 !important; box-shadow: inset 4px 0 0 #000 !important; } /* ── Theme switcher (widget flottant) ────────────────────── */ .gr-theme-switcher { position: fixed; bottom: 18px; right: 18px; z-index: 1080; display: flex; background: var(--gr-surface, #0f1729); border: 1px solid var(--gr-border-2, rgba(255, 255, 255, 0.12)); border-radius: 999px; padding: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); font-family: var(--gr-font); } .gr-theme-switcher button { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border: none; background: transparent; color: var(--gr-text-muted, #94a3b8); font-size: 12px; font-weight: 600; border-radius: 999px; cursor: pointer; transition: all 0.15s; } .gr-theme-switcher button:hover { color: var(--gr-text, #f1f5f9); background: var(--gr-surface-2, #162033); } .gr-theme-switcher button.on { background: var(--gr-gold, #f59e0b); color: #0a0f1f; } html[data-theme='day'] .gr-theme-switcher button.on { color: #fff; } html[data-theme='hiviz'] .gr-theme-switcher { border: 2px solid #000; } html[data-theme='hiviz'] .gr-theme-switcher button.on { background: #fde047; color: #000; border: 2px solid #000; } .gr-theme-switcher svg { width: 14px; height: 14px; } @media (max-width: 576px) { .gr-theme-switcher button span { display: none; } .gr-theme-switcher { padding: 4px; bottom: 80px; right: 12px; } .gr-theme-switcher button { padding: 8px; } } /* ── Utilitaires communs du prototype ────────────────────── */ .gr-mono { font-family: var(--gr-mono); } @keyframes gr-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } .gr-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px rgba(52, 211, 153, 0.6); animation: gr-pulse-dot 1.6s ease-in-out infinite; display: inline-block; } .gr-live-dot.red { background: #f87171; box-shadow: 0 0 10px rgba(248, 113, 113, 0.6); } .gr-live-dot.gold { background: var(--gr-gold); box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); } /* Gradient doré pour titres d'accent (désactivé en day/hiviz) */ .gr-gold-grad { background: linear-gradient(135deg, #fbbf24, #f59e0b 60%, #d97706); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme='day'] .gr-gold-grad, html[data-theme='hiviz'] .gr-gold-grad { background: none !important; color: var(--gr-text) !important; -webkit-text-fill-color: currentColor !important; }