/* Complément au CSS Tailwind compilé : animations d'apparition (remplacent framer-motion)
   et quelques ajustements. Tout est dégradé proprement si JavaScript est désactivé. */

html { scroll-behavior: smooth; }

/* Reveal au scroll — actif uniquement si JS est présent (classe .js ajoutée par main.js). */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Verrou de défilement quand le menu mobile est ouvert. */
body.menu-open { overflow: hidden; }

/* ------------------------------------------------------------------
   Réimplémentation des variantes group-hover / group-open absentes du
   CSS Tailwind compilé d'origine (l'app React pilotait ces états en JS).
   Indispensable pour les menus déroulants desktop et effets de survol.
------------------------------------------------------------------ */
.group:hover .group-hover\:visible { visibility: visible; }
.group:hover .group-hover\:opacity-100 { opacity: 1; }
.group:hover .group-hover\:translate-y-0 { --tw-translate-y: 0px; transform: translateY(0); }
.group:hover .group-hover\:rotate-180 { transform: rotate(180deg); }
.group:hover .group-hover\:text-primary { color: hsl(var(--primary)); }

.group\/seo:hover .group-hover\/seo\:visible { visibility: visible; }
.group\/seo:hover .group-hover\/seo\:opacity-100 { opacity: 1; }
.group\/vis:hover .group-hover\/vis\:visible { visibility: visible; }
.group\/vis:hover .group-hover\/vis\:opacity-100 { opacity: 1; }

/* Pont de survol : évite que le menu se referme entre le lien et le panneau */
.group > .absolute { margin-top: 0; padding-top: .5rem; }

/* Chevron des éléments repliables natifs (<details>) : rotation à l'ouverture */
details[open] > summary svg:last-of-type { transform: rotate(180deg); }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Carrousel d'avis (scroll-snap horizontal, sans dépendance JS lourde). */
.reviews-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
}
.reviews-track::-webkit-scrollbar { height: 6px; }
.reviews-track::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }
.reviews-track > * { scroll-snap-align: start; flex: 0 0 100%; }
@media (min-width: 768px) { .reviews-track > * { flex-basis: calc(50% - .5rem); } }