/* ---- Base ---- */
body.theme-dark {
  background-color: #060c07 !important;
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .loader {
  background-color: rgba(4, 8, 5, 0.88);
}

/* ---- Typography ---- */
body.theme-dark h1:not(.text-green):not(.text-gradiant),
body.theme-dark h2:not(.text-green):not(.text-gradiant),
body.theme-dark h3:not(.text-green):not(.text-gradiant),
body.theme-dark h4:not(.text-green):not(.text-gradiant),
body.theme-dark h5:not(.text-green):not(.text-gradiant),
body.theme-dark h6:not(.text-green):not(.text-gradiant) {
  color: #fff;
}

body.theme-dark p {
  color: rgba(255, 255, 255, 0.72);
}

body.theme-dark li {
  color: rgba(255, 255, 255, 0.72);
}

body.theme-dark .text-dark,
body.theme-dark .text-body,
body.theme-dark .text-black {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.theme-dark .text-muted,
body.theme-dark .text-body-secondary,
body.theme-dark .text-secondary {
  color: rgba(255, 255, 255, 0.42) !important;
}

body.theme-dark small {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Desktop Navbar ---- */
body.theme-dark .navbar {
  background-color: transparent !important;
}

body.theme-dark .navbar.scrolled {
  background-color: rgba(4, 8, 5, 0.9) !important;
  backdrop-filter: blur(14px);
}

body.theme-dark .nav-item-custom:first-child .nav-link-custom,
body.theme-dark .nav-item-custom:last-child .nav-link-custom {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.theme-dark .nav-item-custom:first-child .nav-link-custom:hover,
body.theme-dark .nav-item-custom:last-child .nav-link-custom:hover {
  color: #fff !important;
}

/* ---- Mobile Navbar & Offcanvas ---- */
body.theme-dark .navbar.bg-light,
body.theme-dark .navbar-light.bg-light,
body.theme-dark nav.navbar.navbar-light {
  background-color: rgba(6, 12, 7, 0.97) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.theme-dark .navbar-light .navbar-brand,
body.theme-dark .navbar-light .navbar-brand span {
  color: #fff !important;
}

body.theme-dark .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.theme-dark .navbar-light .navbar-toggler-icon {
  filter: invert(1);
}

body.theme-dark .offcanvas,
body.theme-dark .offcanvas-end {
  background-color: #0a1510 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff;
}

body.theme-dark .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .offcanvas-title,
body.theme-dark .offcanvas-header p {
  color: #fff !important;
}

body.theme-dark .offcanvas-body .nav-link,
body.theme-dark .offcanvas-body a {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark .offcanvas-body .nav-link:hover,
body.theme-dark .offcanvas-body a:hover {
  color: #3aaf78 !important;
}

/* ---- Dropdown ---- */
body.theme-dark .dropdown-menu {
  background-color: #0c1a0f !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(12px);
}

body.theme-dark .dropdown-item {
  color: rgba(255, 255, 255, 0.8) !important;
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
  background: rgba(37, 140, 93, 0.15) !important;
  color: #3aaf78 !important;
}

body.theme-dark .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Cards ---- */
body.theme-dark .card:not(.card-preview) {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

/* Prévisualisation carte gravure — conserve couleurs/texture d'origine */
body.theme-dark .card-preview {
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

body.theme-dark .card-header {
  background: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

body.theme-dark .card-body {
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .card-title {
  color: #fff !important;
}

body.theme-dark .card-text {
  color: rgba(255, 255, 255, 0.65) !important;
}

body.theme-dark .card-footer {
  background: rgba(255, 255, 255, 0.03) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.65);
}

/* ---- Forms ---- */
body.theme-dark .form-control,
body.theme-dark .form-select {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

body.theme-dark .form-control::placeholder,
body.theme-dark .form-select::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(37, 140, 93, 0.6) !important;
  box-shadow: 0 0 0 0.2rem rgba(37, 140, 93, 0.18) !important;
  color: #fff !important;
}

body.theme-dark .form-label,
body.theme-dark label:not(.form-check-label) {
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark .form-text,
body.theme-dark .form-check-label {
  color: rgba(255, 255, 255, 0.52) !important;
}

body.theme-dark .input-group-text {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Override des styles inline de style-checkout.css */
body.theme-dark
  input:not([type="submit"]):not([type="button"]):not([type="radio"]):not(
    [type="checkbox"]
  ):not([type="range"]):not([type="color"]):not([type="file"]),
body.theme-dark textarea,
body.theme-dark select {
  background-color: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ---- bg-white-transparent (cartes hero) ---- */
body.theme-dark .bg-white-transparent {
  background-color: rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ---- Sections / containers ---- */
body.theme-dark section {
  background: transparent;
}

body.theme-dark .container-custom {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ---- Modale de connexion ---- */
body.theme-dark .modal-content {
  background: rgba(8, 16, 10, 0.97) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

body.theme-dark .modal-title {
  color: #fff !important;
}

body.theme-dark .modal-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .modal-body {
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---- Alertes ---- */
body.theme-dark .alert-warning {
  background: rgba(255, 193, 7, 0.1) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
  color: rgba(255, 235, 130, 0.95) !important;
}

body.theme-dark .alert-danger {
  background: rgba(220, 53, 69, 0.1) !important;
  border-color: rgba(220, 53, 69, 0.3) !important;
  color: rgba(255, 140, 150, 0.95) !important;
}

body.theme-dark .alert-success {
  background: rgba(37, 140, 93, 0.12) !important;
  border-color: rgba(37, 140, 93, 0.4) !important;
  color: rgba(100, 220, 155, 0.95) !important;
}

body.theme-dark .alert-info {
  background: rgba(13, 202, 240, 0.1) !important;
  border-color: rgba(13, 202, 240, 0.25) !important;
  color: rgba(100, 225, 255, 0.95) !important;
}

/* ---- Séparateurs ---- */
body.theme-dark hr {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .border-top {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Notifications toast ---- */
body.theme-dark .toast {
  background-color: rgba(8, 16, 10, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff;
}

body.theme-dark .toast-header {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* ---- Pagination ---- */
body.theme-dark .pagination a:hover {
  background-color: rgba(37, 140, 93, 0.2) !important;
  border-color: #258c5d !important;
  color: #3aaf78 !important;
}

/* ---- Badges ---- */
body.theme-dark .badge.bg-light,
body.theme-dark .badge.bg-secondary {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ---- List groups ---- */
body.theme-dark .list-group-item {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.07) !important;
}

/* ---- Tableaux ---- */
body.theme-dark .table {
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .table > :not(caption) > * > * {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .table thead th {
  color: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ---- Critères de mot de passe (override style-reset.css) ---- */
body.theme-dark #passwordCriteria li {
  color: rgba(255, 255, 255, 0.72) !important;
}

body.theme-dark #passwordCriteria li.valid {
  color: #3aaf78 !important;
}

body.theme-dark #passwordCriteria li.invalid {
  color: rgba(255, 100, 100, 0.9) !important;
}

body.theme-dark #passwordMatchMessage {
  color: rgba(255, 100, 100, 0.9);
}

body.theme-dark #passwordMatchMessage.valid {
  color: #3aaf78 !important;
}

/* ---- Réservation — choix matériau ---- */
body.theme-dark .choix-material-card {
  color: #fff;
}

body.theme-dark .choix-material-card.selected {
  border-color: #3aaf78 !important;
  box-shadow: 0 4px 20px rgba(58, 175, 120, 0.35) !important;
}

/* ---- Overrides Bootstrap bg-light / bg-white ---- */
body.theme-dark .bg-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .bg-white {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.theme-dark .bg-secondary {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Boutons btn-dark / btn-outline-dark (panneau de personnalisation) ---- */
body.theme-dark .btn-dark {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
}

body.theme-dark .btn-dark.active,
body.theme-dark .btn-dark:active {
  background-color: rgba(37, 140, 93, 0.35) !important;
  border-color: #258c5d !important;
}

body.theme-dark .btn-outline-dark {
  color: rgba(255, 255, 255, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

body.theme-dark .btn-outline-dark:hover,
body.theme-dark .btn-outline-dark.active {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
}

body.theme-dark .btn-outline-secondary {
  color: rgba(255, 255, 255, 0.65) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

body.theme-dark .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* ---- Page formules — slider de cartes tarifaires ---- */
body.theme-dark .pricing-card {
  background: #111 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark .pricing-card.active {
  border-color: rgba(58, 175, 120, 0.45) !important;
  box-shadow: 0 12px 48px rgba(37, 140, 93, 0.2) !important;
}

body.theme-dark .pricing-card h2 {
  color: #fff !important;
}

body.theme-dark .pricing-card li {
  color: rgba(255, 255, 255, 0.75) !important;
}

body.theme-dark .pricing-card .text-dark {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* ---- Page personnalisation — sidebar & panneau ---- */
body.theme-dark #sidebar {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .sidebar-header {
  background: rgba(255, 255, 255, 0.04) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark #elementPanel {
  background: #000 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .panel-drag-handle {
  color: rgba(255, 255, 255, 0.85);
}

body.theme-dark .font-hint {
  color: rgba(255, 255, 255, 0.45) !important;
}

body.theme-dark .section-card {
  color: rgba(255, 255, 255, 0.85);
}

/* ---- Stepper (composant étapes réservation) ---- */
body.theme-dark .steps .step .step-icon {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

body.theme-dark .steps .step .step-title {
  color: rgba(255, 255, 255, 0.5) !important;
}

body.theme-dark .steps .step .step-icon-wrap::before,
body.theme-dark .steps .step .step-icon-wrap::after {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-dark .steps .step.completed .step-icon-wrap::before,
body.theme-dark .steps .step.completed .step-icon-wrap::after {
  background-color: rgba(37, 140, 93, 0.5) !important;
}

/* ---- jQuery UI (page de personnalisation) ---- */
body.theme-dark .ui-widget,
body.theme-dark .ui-widget-content {
  background: rgba(15, 25, 18, 0.98) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

body.theme-dark .ui-widget-header {
  background: rgba(37, 140, 93, 0.2) !important;
  border-color: rgba(37, 140, 93, 0.4) !important;
  color: #fff !important;
}

body.theme-dark .ui-menu .ui-menu-item-wrapper.ui-state-active,
body.theme-dark .ui-menu .ui-menu-item-wrapper:hover {
  background: rgba(37, 140, 93, 0.25) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* ---- Scrollbar (discrète sur fond sombre) ---- */
body.theme-dark ::-webkit-scrollbar {
  width: 6px;
}

body.theme-dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(37, 140, 93, 0.4);
  border-radius: 3px;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 140, 93, 0.65);
}