/* ============================================================
   MVT Solution — Thème sombre (mode nuit)
   Surcharge chargée APRÈS la feuille de style principale.
   La classe .dark est posée sur <html> par assets/theme.js
   selon la préférence système (ou le choix manuel du visiteur).
   ============================================================ */

/* ---------- Variables shadcn / Tailwind en sombre ---------- */
.dark {
  color-scheme: dark;
  /* Fond page : bleu nuit profond (déclinaison du nuit-900 de la marque) */
  --background: 215 70% 10%;
  /* Texte principal : bleu très clair */
  --foreground: 213 45% 91%;
  /* Cartes / panneaux : navy légèrement plus lumineux que le fond */
  --card: 216 60% 14%;
  --card-foreground: 213 45% 91%;
  --popover: 216 60% 14%;
  --popover-foreground: 213 45% 91%;
  /* Boutons primaires : or de la marque, texte navy */
  --primary: 43 68% 55%;
  --primary-foreground: 215 70% 10%;
  /* Secondaire : navy moyen, accent or */
  --secondary: 216 40% 19%;
  --secondary-foreground: 43 70% 62%;
  --muted: 216 38% 17%;
  --muted-foreground: 214 22% 68%;
  --accent: 14 55% 52%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 98%;
  --border: 216 32% 26%;
  --input: 216 30% 28%;
  --ring: 43 68% 55%;
  --radius: .75rem;
}

.dark body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* ---------- Couleurs en dur (palette maison) ---------- */

/* Fonds blancs / crème -> panneaux navy */
.dark .bg-white { --tw-bg-opacity: 1; background-color: rgb(16 37 74 / var(--tw-bg-opacity, 1)); }
.dark .bg-sable { --tw-bg-opacity: 1; background-color: rgb(9 26 53 / var(--tw-bg-opacity, 1)); }
.dark .bg-nuit-50 { --tw-bg-opacity: 1; background-color: rgb(12 30 62 / var(--tw-bg-opacity, 1)); }
.dark .bg-nuit-800 { --tw-bg-opacity: 1; background-color: rgb(19 42 82 / var(--tw-bg-opacity, 1)); }
/* nuit-900 : fond déjà sombre, conservé tel quel pour les sections héro */

/* Textes navy / charbon -> bleu très clair (opacités Tailwind respectées) */
.dark .text-nuit-800,
.dark .text-nuit-700 { --tw-text-opacity: 1; color: rgb(231 238 249 / var(--tw-text-opacity, 1)); }

/* Charbon (gris très foncé) -> gris bleuté clair, mêmes niveaux d'opacité */
.dark .text-charbon\/45 { color: #a9bcd645; }
.dark .text-charbon\/50 { color: #a9bcd650; }
.dark .text-charbon\/60 { color: #a9bcd660; }
.dark .text-charbon\/70 { color: #a9bcd670; }
.dark .text-charbon\/75 { color: #a9bcd675; }
.dark .text-charbon\/80 { color: #a9bcd680; }

/* Bordures claires -> bordures navy lumineuses */
.dark .border-nuit-100,
.dark .border-nuit-50 { --tw-border-opacity: 1; border-color: rgb(38 60 98 / var(--tw-border-opacity, 1)); }
.dark .border-nuit-700 { --tw-border-opacity: 1; border-color: rgb(47 71 110 / var(--tw-border-opacity, 1)); }

/* Or et terracotta « foncés » : rehaussés pour rester lisibles sur navy */
.dark .text-or-dark { --tw-text-opacity: 1; color: rgb(226 190 107 / var(--tw-text-opacity, 1)); }
.dark .text-terracotta-dark { --tw-text-opacity: 1; color: rgb(229 138 102 / var(--tw-text-opacity, 1)); }

/* Placeholder du champ de recherche */
.dark .placeholder\:text-nuit-800\/40::placeholder {
  color: rgb(231 238 249 / .35);
}

/* ---------- Durcissement : on neutralise l'inversion forcée des navigateurs ---------- */
/* Même si un visiteur n'a pas le JS, on évite que Chrome/Safari « inventent » un sombre cassé */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not(.light) { color-scheme: light; }
}

/* ---------- Photos : léger voile pour harmoniser avec le thème sombre ---------- */
.dark .group img,
.dark img[src^="/images/hero-"] {
  filter: brightness(.88) saturate(.95);
}

/* ---------- Bouton flottant de bascule clair / sombre ---------- */
#mvt-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid rgba(212, 168, 67, .55);
  background: rgb(8 24 48 / .92);
  color: #e7eef9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, box-shadow .2s ease;
}
#mvt-theme-toggle:hover { transform: scale(1.07); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
#mvt-theme-toggle svg { width: 22px; height: 22px; }
#mvt-theme-toggle .icon-sun { display: none; }
.dark #mvt-theme-toggle .icon-sun { display: block; }
.dark #mvt-theme-toggle .icon-moon { display: none; }
.dark #mvt-theme-toggle {
  background: rgb(212 168 67 / .94);
  color: rgb(8 24 48);
  border-color: rgba(255, 255, 255, .35);
}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  #mvt-theme-toggle { transition: none; }
}

/* ============================================================
   Correctif mobile — logo déformé (« allongé ») sur petit écran
   Sur ≤480 px, la barre (logo + loupe + FR/EN + burger) déborde :
   le logo se retrouvait compressé horizontalement
   (141 px affichés pour ~188 px nécessaires).
   On compacte les boutons d'action et on verrouille le ratio du logo.
   ============================================================ */
@media (max-width: 480px) {
  /* Marges latérales un peu plus fines */
  header nav.px-4 { padding-left: .75rem; padding-right: .75rem; }

  /* Boutons d'action plus compacts */
  header .lg\:hidden { gap: .5rem; }
  header .lg\:hidden > button { height: 2.25rem; width: 2.25rem; }
  header .lg\:hidden > button.rounded-lg { height: 2.5rem; width: 2.5rem; }
  header .lg\:hidden > button.rounded-lg svg { width: 22px; height: 22px; }

  /* Sélecteur de langue un peu plus fin */
  header .lg\:hidden > div.rounded-full { padding-left: .375rem; padding-right: .375rem; }
  header .lg\:hidden > div.rounded-full button { padding-left: .5rem; padding-right: .5rem; }

  /* Logo : taille réduite et surtout ratio IMPOSE (plus de compression) */
  header a[href="#/"] { flex-shrink: 0; }
  header a[href="#/"] img { flex-shrink: 0; height: 38px !important; width: auto !important; }
}