/* ===================================================================
   AeroDry — styles complémentaires à Tailwind (CDN)
   =================================================================== */

/* Respecte la préférence utilisateur pour les animations réduites */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  scroll-behavior: smooth;
}

/* Icônes Lucide : épaisseur et taille homogènes */
.lucide {
  stroke-width: 1.75;
}

/* Grande icône décorative des cartes d'avantages */
.icone-carte {
  width: 2.25rem;
  height: 2.25rem;
  color: #2563eb;
}

/* Icônes de la barre de réassurance (bandeau sombre) */
.icone-reassure {
  width: 1.25rem;
  height: 1.25rem;
  color: #7dd3fc;
}

/* Étoiles des avis clients */
.icone-etoile {
  width: 1rem;
  height: 1rem;
  color: #f59e0b;
  fill: #f59e0b;
}

/* Champ autofocus : aide la saisie des coordonnées COD */
.champ:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Champ invalide : contour rouge (validité codée en dur, pas de classe Tailwind dynamique) */
.champ-invalide {
  border-color: #ef4444 !important;
}

/* ===================================================================
   Zoom loupe (effet loupe au survol des images produit)
   =================================================================== */
.zoom-loupe {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
  touch-action: pan-y;
}

.zoom-loupe img {
  transition: transform 400ms ease;
  will-change: transform;
}

/* Grandissement général de l'image (desktop uniquement) */
@media (hover: hover) and (pointer: fine) {
  .zoom-loupe:hover img {
    transform: scale(1.6);
  }
}

/* Verre de la loupe : petite fenêtre agrandie qui suit le curseur */
.loupe {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 9999px;
  pointer-events: none;
  border: 3px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.35);
  background-color: rgba(255, 255, 255, 0.12);
  background-repeat: no-repeat;
  display: none;
  z-index: 20;
}

@media (hover: hover) and (pointer: fine) {
  .zoom-loupe:hover .loupe {
    display: block;
  }
}

/* Miniatures de la galerie hero */
.miniature {
  opacity: 0.6;
  transition: opacity 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}
.miniature:hover {
  opacity: 1;
}
.miniature-active {
  opacity: 1;
  box-shadow: 0 0 0 2px #2563eb;
}

/* Carte d'avis : légère élévation au survol (desktop uniquement) */
.carte-avis {
  transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) {
  .carte-avis:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.12);
  }
}