/*--------------------------------------------------------------
# Thème gris ardoise
# Remplace les noirs du thème par une palette gris-bleu
# dérivée de #455B6C (couleur du footer / body).
# Chargé après style-tailwind.css : aucune recompilation nécessaire.
--------------------------------------------------------------*/

:root {
  --gris-base: #3c4f5d;      /* ex #0a0a0a — fond des sections */
  --gris-deep: #344451;      /* ex #050505 — bas de footer */
  --gris-surface: #495e6e;   /* ex #111 / #141414 — cartes, blocs */
  --gris-surface-2: #52697a; /* ex #1a1a1a / #1e1e1e — cartes claires, champs */
  --gris-border: #647d90;    /* ex #1a1a1a / #222 / #333 — bordures */
  --gris-overlay: 40 54 65;  /* ex rgba(0,0,0,x) — voiles sur images */
  --gris-text: #d3dce3;      /* ex obsidian-400 */
  --gris-text-muted: #b4c2cc;/* ex obsidian-500 */
  --gris-placeholder: #9aaab6;

  /* Variables Tailwind générées */
  --color-dark: #3c4f5d;
  --color-dark-50: #52697a;
  --color-dark-100: #495e6e;
  --color-dark-200: #495e6e;
  --color-dark-300: #455b6c;
  --color-dark-400: #52697a;
  --color-dark-500: #5b7385;
  --color-dark-600: #647d90;
  --color-dark-700: #6e8799;
}

/* --- Classes Tailwind --- */
.bg-dark {
  background-color: var(--gris-base);
}

.bg-dark-400 {
  background-color: var(--gris-surface-2);
}

.bg-black,
.hover\:bg-black:hover {
  background-color: rgb(var(--gris-overlay) / var(--tw-bg-opacity, 1));
}

.bg-black\/40 {
  background-color: rgb(var(--gris-overlay) / 0.4);
}

.bg-black\/70 {
  background-color: rgb(var(--gris-overlay) / 0.7);
}

.bg-black\/90 {
  background-color: rgb(var(--gris-overlay) / 0.9);
}

.group:hover .group-hover\:bg-black\/20 {
  background-color: rgb(var(--gris-overlay) / 0.2);
}

.group:hover .group-hover\:bg-black\/50 {
  background-color: rgb(var(--gris-overlay) / 0.5);
}

.text-obsidian-400 {
  color: var(--gris-text);
}

.text-obsidian-500 {
  color: var(--gris-text-muted);
}

.placeholder-obsidian-600::placeholder {
  color: var(--gris-placeholder);
}

/* --- Surcharges de style.css --- */
.carousel,
.dark-section,
.leaflet-container {
  background: var(--gris-base) !important;
}

.carousel-cell,
.dark-section-alt {
  background-color: var(--gris-surface);
}

.dark-card,
.presta-card {
  background: var(--gris-surface);
  border-color: var(--gris-border);
}

.dark-card:hover,
.presta-card:hover {
  border-color: var(--color-secondary);
}

.presta-card:hover {
  box-shadow:
    0 10px 30px rgb(var(--gris-overlay) / 0.5),
    0 0 15px rgba(51, 135, 75, 0.15);
}

@media screen and (min-width: 1024px) {
  .dark-reviews .bg-gradient-reviews-2::before {
    background: radial-gradient(
      circle,
      rgba(60, 79, 93, 0) 0%,
      rgba(60, 79, 93, 0.6) 50%,
      rgba(60, 79, 93, 1) 100%
    ) !important;
  }
}

.flickity-button {
  background: var(--gris-surface-2) !important;
}

.flickity-button:hover {
  background: var(--color-secondary) !important;
}

.form-field {
  background-color: var(--gris-surface-2) !important;
  border-color: var(--gris-border) !important;
}

.form-field:focus {
  border-color: var(--color-secondary) !important;
}

::-webkit-scrollbar-track {
  background: var(--gris-base);
}

::-webkit-scrollbar-thumb {
  background: var(--gris-border);
}

#footerMenu .sub-menu {
  background: rgb(var(--gris-overlay) / 0.85);
}