/**
 * Styles additionnels, écrits à la main (hors build Tailwind, qui ne peut pas
 * être régénéré sur ce poste — Node/npm absent). N'utilise que les variables
 * CSS déjà définies dans tailwind.css (:root), donc aucune dépendance au JIT.
 */

/* --- Classes Tailwind utilisées dans le code mais jamais recompilées ---
 * style.css est un instantané figé : toute classe utilisée après le dernier
 * build (et jamais utilisée avant) est absente du CSS et n'a aucun effet.
 * Ces quelques règles reproduisent exactement la sortie Tailwind attendue. */
@media (min-width: 40rem) {
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
}

.w-20 {
  width: calc(var(--spacing) * 20);
}

.w-28 {
  width: calc(var(--spacing) * 28);
}

.w-32 {
  width: calc(var(--spacing) * 32);
}

.self-end {
  align-self: flex-end;
}

.list-disc {
  list-style-type: disc;
}

.pl-5 {
  padding-left: calc(var(--spacing) * 5);
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

/* --- Lien d'évitement (accessibilité clavier) --- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: .65rem 1.1rem;
  border-radius: 0 0 .6rem 0;
  font-size: .85rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* --- Navigation mobile --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 1.1rem;
  background: var(--foreground);
  transition: transform .25s ease, opacity .2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.mobile-nav {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--border);
  background: var(--background);
  padding: .5rem 1.25rem 1.1rem;
}

.mobile-nav a {
  padding: .7rem .1rem;
  font-size: .9rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}

.mobile-nav a:last-child {
  border-bottom: none;
}

.mobile-nav a.is-active {
  color: var(--foreground);
  font-weight: 500;
}

@media (max-width: 767px) {
  .nav-toggle {
    display: flex;
  }

  .hide-mobile {
    display: none;
  }

  .mobile-nav.is-open {
    display: flex;
  }
}

/* Forcer le masquage du bouton hamburger sur grands écrans (sécurité si une règle
   externe le rend visible) */
@media (min-width: 768px) {
  .nav-toggle {
    display: none !important;
  }
}

/* --- Navigation mobile de l'espace admin (sidebar masquée sous 1024px,
   la visibilité du bouton/panneau est gérée par la classe Tailwind lg:hidden
   déjà présente dans le build, seule l'animation/l'état ouvert sont ici) --- */
.admin-nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 1px solid var(--sidebar-border);
  background: transparent;
  cursor: pointer;
}

.admin-nav-toggle span {
  display: block;
  height: 2px;
  width: 1.1rem;
  background: var(--sidebar-foreground);
  transition: transform .25s ease, opacity .2s ease;
}

.admin-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.admin-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.admin-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.admin-mobile-nav {
  display: none;
  flex-direction: column;
  gap: .25rem;
  background: var(--sidebar);
  color: var(--sidebar-foreground);
  padding: .75rem 1rem 1.1rem;
  border-bottom: 1px solid var(--sidebar-border);
}

.admin-mobile-nav.is-open {
  display: flex;
}

.admin-mobile-nav a {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .6rem .5rem;
  border-radius: .375rem;
  font-size: .875rem;
  color: var(--sidebar-foreground);
  opacity: .8;
}

/* Curseur pointer pour tous les éléments cliquables principaux (boutons, liens, actions admin) */
button,
a,
[role="button"],
.nav-toggle,
.admin-nav-toggle,
[data-toggle-label],
[data-chatbot-suggestion],
[data-chatbot-envoyer] {
  cursor: pointer;
}

/* Amélioration visuelle au survol pour les boutons ronds de la table admin */
[data-toggle-label]:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* --- Toast notifications (top-right) --- */
.toast-container {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 200px;
  max-width: 320px;
  padding: .6rem .8rem;
  border-radius: .5rem;
  box-shadow: 0 6px 18px rgba(11, 12, 14, 0.12);
  color: var(--background);
  font-size: .9rem;
  transform-origin: top right;
  animation: toast-in .28s ease-out, toast-out .28s ease-in forwards;
}

.toast--success {
  background: linear-gradient(180deg, var(--primary) 0%, #b35b38 100%);
}

.toast--info {
  background: linear-gradient(180deg, #374151 0%, #111827 100%);
}

.toast--error {
  background: linear-gradient(180deg, var(--destructive) 0%, #c53030 100%);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
}

.admin-mobile-nav a.is-active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
  opacity: 1;
}

/* --- Révélation au défilement --- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Lightbox galerie (fiche villa) --- */
[data-galerie-principale],
[data-galerie-vignette] {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: oklch(15% .02 45 / .9);
  animation: lightbox-fade .2s ease;
}

.lightbox.is-open {
  display: flex;
}

.lightbox img {
  max-height: 88vh;
  max-width: 100%;
  border-radius: .75rem;
  box-shadow: var(--shadow-soft);
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid oklch(98.5% .008 85 / .4);
  background: oklch(98.5% .008 85 / .12);
  color: var(--background);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
}

.lightbox-close:hover {
  background: oklch(98.5% .008 85 / .22);
}

.lightbox-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid oklch(98.5% .008 85 / .4);
  background: oklch(98.5% .008 85 / .12);
  color: var(--background);
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
}

.lightbox-fleche:hover {
  background: oklch(98.5% .008 85 / .22);
}

.lightbox-fleche-prec {
  left: 1rem;
}

.lightbox-fleche-suiv {
  right: 1rem;
}

.lightbox-compteur {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  right: 0;
  text-align: center;
  color: oklch(98.5% .008 85 / .85);
  font-size: .8rem;
  letter-spacing: .05em;
}

/* --- Listes limitées avec bouton "Afficher plus" (équipements, galerie
   photo de la fiche villa) : hauteur plafonnée + fondu en bas tant que non
   étendue, pour éviter qu'une longue liste n'alourdisse la page. */
.zone-limitee {
  position: relative;
  max-height: 5.5rem;
  overflow: hidden;
  transition: max-height .3s ease;
}

.zone-limitee:not(.is-etendue)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2rem;
  background: linear-gradient(to bottom, transparent, var(--card));
  pointer-events: none;
}

.zone-limitee.is-etendue {
  max-height: none;
}

.zone-limitee.is-etendue::after {
  display: none;
}

#galerie-vignettes.zone-limitee {
  max-height: 220px;
}

#galerie-vignettes.zone-limitee.is-etendue {
  max-height: none;
}

@keyframes lightbox-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* --- Galerie de la fiche villa : image principale en haut sur toute la
   largeur, toutes les vignettes alignées EN LIGNE juste en dessous (3 par
   rangée), plutôt qu'empilées dans une colonne étroite à gauche. Une seule
   règle, valable à toutes les tailles d'écran. --- */
.two-fr-one-fr {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.two-fr-one-fr > img[data-galerie-principale] {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* Réduite sur ordinateur : une photo affichée plus petite montre moins ses
   éventuels défauts de netteté/résolution qu'un agrandissement sur toute la
   largeur d'un grand écran. */
@media (min-width: 64rem) {
  .two-fr-one-fr > img[data-galerie-principale] {
    height: 360px;
  }
}

.two-fr-one-fr > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 1rem;
}

.two-fr-one-fr > div img[data-galerie-vignette] {
  width: calc((100% - 2rem) / 3);
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: .5rem;
}

@media (max-width: 47.99rem) {
  /* Sur mobile : 2 vignettes par rangée plutôt que 3, pour qu'elles restent lisibles */
  .two-fr-one-fr > div img[data-galerie-vignette] {
    width: calc((100% - 1rem) / 2);
  }
}

/* Masquer le bouton burger de l'espace admin sur grands écrans (lg et plus) */
@media (min-width: 1024px) {
  .admin-nav-toggle {
    display: none !important;
  }

  .admin-mobile-nav {
    display: none !important;
  }
}

/* Rendre le bouton/soulignement 'Supprimer' lisible si une règle couleur a été écrasée */
.text-destructive,
button.text-destructive,
a.text-destructive {
  color: #b91c1c !important;
  /* rouge lisible */
}

.text-destructive:hover {
  text-decoration: underline !important;
}

/* --- Mini-carrousel photo à l'intérieur de chaque carte villa (accueil,
   catalogue) : plusieurs photos, flèches précédent/suivant, sans quitter la
   page — comme sur Airbnb. Écrit à la main pour ne pas dépendre d'un
   rebuild Tailwind indisponible ici (opacité, position, transitions). */
.carte-villa-galerie {
  position: relative;
}

.carte-villa-photo {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.carte-villa-photo.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

.carte-villa-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  border: none;
  background: oklch(20% .02 45 / .45);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease;
}

.carte-villa-galerie:hover .carte-villa-fleche {
  opacity: 1;
}

.carte-villa-fleche:hover {
  background: oklch(20% .02 45 / .7);
}

.carte-villa-fleche-prec {
  left: .5rem;
}

.carte-villa-fleche-suiv {
  right: .5rem;
}

.carte-villa-points {
  position: absolute;
  bottom: .6rem;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: .3rem;
}

.carte-villa-point {
  width: .35rem;
  height: .35rem;
  border-radius: 9999px;
  background: oklch(98.5% .008 85 / .55);
}

.carte-villa-point.is-active {
  background: oklch(98.5% .008 85 / .95);
}

/* --- Image d'en-tête de l'accueil : toujours toute la largeur de l'écran,
   même quand une règle externe ou une marge parasite la rétrécit. Hauteur
   réduite sur petit écran pour laisser respirer le texte par-dessus. */
.hero-accueil {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .hero-accueil {
    height: 400px !important;
  }
}