/* * Thème Comte Isolation * ================================ * Palette officielle : * --color-primary: #00213D → bleu marine foncé * --color-secondary: #07B594 → vert émeraude */ :root { --color-primary: #00213D; --color-primary-soft: rgba(0, 33, 61, 0.10); --color-primary-hover: #003a63; --color-secondary: #07B594; --color-secondary-soft: rgba(7, 181, 148, 0.10); --color-secondary-hover: #06a085; --color-dark: #1c1c1c; --color-topnav-bg: #ffffff; /* ── Bootstrap overrides ── */ --bs-primary: #00213D; --bs-primary-rgb: 0, 33, 61; --bs-secondary: #07B594; --bs-secondary-rgb: 7, 181, 148; --bs-link-color: #00213D; --bs-link-hover-color: #07B594; --bs-focus-ring-color: rgba(0, 33, 61, 0.25); } /* ===== Topnav ===== */ .topnav { background-color: var(--color-topnav-bg) !important; border-bottom: 3px solid var(--color-secondary); box-shadow: 0 2px 8px rgba(0, 0, 0, .06); } .navbar-brand img { max-height: 52px; } /* ===== Sidebar ===== */ .sidenav { background-color: var(--color-primary) !important; } /* ===== Boutons / accents ===== */ .btn-primary { background-color: var(--color-primary) !important; border-color: var(--color-primary) !important; } .btn-secondary { color: #fff !important; background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; } .btn-secondary:hover, .btn-check:focus + .btn-secondary, .btn-secondary:focus { color: #fff !important; background-color: var(--color-secondary-hover) !important; border-color: var(--color-secondary-hover) !important; } .btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle { color: #fff !important; background-color: #058a73 !important; border-color: #058a73 !important; } .btn-check:focus + .btn-secondary, .btn-secondary:focus, .btn-check:checked + .btn-secondary:focus, .btn-secondary:active:focus { box-shadow: 0 0 0 0.25rem var(--color-secondary-soft) !important; } .btn-secondary:disabled, .btn-secondary.disabled { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; } .btn-outline-secondary { color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; } .btn-outline-secondary:hover, .btn-check:checked + .btn-outline-secondary, .btn-check:active + .btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show { color: #fff !important; background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; } .btn-check:focus + .btn-outline-secondary, .btn-outline-secondary:focus { box-shadow: 0 0 0 0.25rem var(--color-secondary-soft) !important; } .btn-outline-secondary:disabled, .btn-outline-secondary.disabled { color: var(--color-secondary) !important; } a { color: var(--bs-link-color); } a:hover { color: var(--bs-link-hover-color); } /* ===== Tom Select dans une modale (dropdownParent: 'body') ===== * Le menu déroulant est alors un enfant direct de , en dehors du * conteneur .modal (z-index Bootstrap : 1055) et .modal-backdrop (1050). * Sans cette règle, son z-index par défaut (1000) le place SOUS la modale : * un clic sur une option est intercepté par .modal, ce que Bootstrap * interprète comme un clic à l'extérieur de .modal-dialog et ferme la modale. */ body > .ts-dropdown { z-index: 1090; }