/* ═══════════════════════════════════════════════════════════════ BREKIZ — Mode Sombre À ajouter à la fin de officebreak.css Activé par [data-theme="dark"] sur ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Palette sombre — conserve l'esprit pixel art */ --ob-bg: #1C1610; --ob-bg-card: #251E14; --ob-bg-inset: #1a140b; --ob-border: #3a2e1e; --ob-border-dark: #4d3f29; --ob-text: #e8dcc8; --ob-text-muted: #9a8a72; --ob-orange: #E07B2A; --ob-orange-dk: #c4621a; --ob-orange-lt: #3d2510; --ob-green: #4ade80; --ob-red: #f87171; --ob-red-lt: #3d1010; --ob-yellow: #fbbf24; /* Ombres portées plus douces */ --ob-shadow: 2px 2px 0px #0a0806; --ob-shadow-sm: 1px 1px 0px #0a0806; color-scheme: dark; } [data-theme="dark"] body { background-color: var(--ob-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%23ffffff08'/%3E%3C/svg%3E"); color: var(--ob-text); } /* Navbar en mode sombre */ [data-theme="dark"] .navbar { background: rgba(28, 22, 16, 0.96); border-bottom-color: var(--ob-border-dark); } /* Cards */ [data-theme="dark"] .card { background: var(--ob-bg-card); border-color: var(--ob-border-dark); } [data-theme="dark"] .card-header { background: var(--ob-bg-inset); border-bottom-color: var(--ob-border-dark); } /* Inputs */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--ob-bg-inset); border-color: var(--ob-border-dark); color: var(--ob-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--ob-bg-inset); color: var(--ob-text); border-color: var(--ob-orange); box-shadow: 0 0 0 2px rgba(224,123,42,.25); } [data-theme="dark"] .form-control::placeholder { color: var(--ob-text-muted); } /* Boutons */ [data-theme="dark"] .btn-secondary { background: var(--ob-bg-inset); border-color: var(--ob-border-dark); color: var(--ob-text); } [data-theme="dark"] .btn-outline-primary { border-color: var(--ob-orange); color: var(--ob-orange); } [data-theme="dark"] .btn-outline-secondary { border-color: var(--ob-border-dark); color: var(--ob-text-muted); } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: var(--ob-bg-card); border-color: var(--ob-border-dark); } [data-theme="dark"] .dropdown-item { color: var(--ob-text); } [data-theme="dark"] .dropdown-item:hover { background: var(--ob-bg-inset); } /* Footer */ [data-theme="dark"] .ob-footer { background: var(--ob-bg-card); border-top-color: var(--ob-border-dark); color: var(--ob-text-muted); } [data-theme="dark"] .ob-footer a { color: var(--ob-text-muted); } /* Alerts */ [data-theme="dark"] .alert-success { background: rgba(74,222,128,.1); border-color: #16a34a; color: #4ade80; } [data-theme="dark"] .alert-danger { background: rgba(248,113,113,.1); border-color: #b91c1c; color: #f87171; } [data-theme="dark"] .alert-info { background: rgba(56,189,248,.1); border-color: #0284c7; color: #38bdf8; } /* Jeu — tuiles lettres */ [data-theme="dark"] .lt-letter-tile, [data-theme="dark"] .wd-tile { background: var(--ob-bg-card); border-color: var(--ob-border-dark); color: var(--ob-text); } /* Cémentix — barres température */ [data-theme="dark"] .cem-thermo-bar { background: var(--ob-bg-inset); } /* Toast */ [data-theme="dark"] .ob-toast { background: var(--ob-bg-card); border-color: var(--ob-border-dark); color: var(--ob-text); } /* ── Tables ────────────────────────────────────────────── */ [data-theme="dark"] .table { color: var(--ob-text); border-color: var(--ob-border); } [data-theme="dark"] .table > :not(caption) > * > * { color: var(--ob-text); background-color: transparent; border-color: var(--ob-border); } [data-theme="dark"] .table-light, [data-theme="dark"] .table > thead.table-light > tr > th, [data-theme="dark"] .table > thead.table-light > tr > td { background-color: var(--ob-bg-inset) !important; color: var(--ob-text-muted) !important; border-color: var(--ob-border-dark) !important; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(224,123,42,.07) !important; color: var(--ob-text) !important; } [data-theme="dark"] .table-primary, [data-theme="dark"] .table-primary > td, [data-theme="dark"] .table-primary > th { --bs-table-color: var(--ob-text) !important; --bs-table-bg: rgba(224,123,42,.13) !important; background-color: rgba(224,123,42,.13) !important; color: var(--ob-text) !important; } /* ── Cards & headers ──────────────────────────────────── */ [data-theme="dark"] .card-header, [data-theme="dark"] .card-header.bg-white, [data-theme="dark"] .card-header.bg-light { background: var(--ob-bg-inset) !important; color: var(--ob-text) !important; border-color: var(--ob-border-dark) !important; } /* ── Badges & bg-light ───────────────────────────────── */ [data-theme="dark"] .bg-light, [data-theme="dark"] .bg-white { background-color: var(--ob-bg-inset) !important; } [data-theme="dark"] .text-dark { color: var(--ob-text) !important; } [data-theme="dark"] .text-muted { color: var(--ob-text-muted) !important; } [data-theme="dark"] .text-primary { color: var(--ob-orange) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--ob-bg-inset) !important; color: var(--ob-text) !important; border-color: var(--ob-border-dark) !important; } [data-theme="dark"] .bg-primary-subtle { background-color: rgba(224,123,42,.15) !important; } [data-theme="dark"] .text-primary.small { color: var(--ob-orange) !important; } [data-theme="dark"] .badge.bg-primary-subtle { color: var(--ob-orange) !important; } /* ── Liens ───────────────────────────────────────────── */ [data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--ob-orange); } /* ── Hr / divider ────────────────────────────────────── */ [data-theme="dark"] hr, [data-theme="dark"] .dropdown-divider { border-color: var(--ob-border-dark); } /* ── Btn-close ───────────────────────────────────────── */ [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1); } /* ── Modals ──────────────────────────────────────────── */ [data-theme="dark"] .modal-content { background: var(--ob-bg-card); border-color: var(--ob-border-dark); color: var(--ob-text); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--ob-border-dark); } /* ── Podium ──────────────────────────────────────────── */ [data-theme="dark"] .ob-podium-bar-gold { background: linear-gradient(to top,#92620a,#d4900a) !important; } [data-theme="dark"] .ob-podium-bar-silver { background: linear-gradient(to top,#475569,#94a3b8) !important; } [data-theme="dark"] .ob-podium-bar-bronze { background: linear-gradient(to top,#6b3a0a,#b45309) !important; } /* ── Transition douce ────────────────────────────────── */ body, .navbar, .card, .card-header, .form-control, .form-select, .dropdown-menu, .ob-footer, .btn { transition: background-color .2s, border-color .2s, color .2s; }