/* Compléments au build Tailwind du template (vendor.css) */
@import url("site-widgets.css");

html {
  scroll-padding-top: 5rem;
}

/* Contenu sous le header fixe (h-16 = 4rem). L’utilitaire Tailwind pt-16 n’est pas
   toujours inclus dans vendor.css — on force le décalage ici. */
.tt-inner-below-header {
  padding-top: calc(4rem + env(safe-area-inset-top, 0px));
}

/* Air visuel entre le header et le titre (pages rubrique / légal / blog, même gabarit que le footer) */
.tt-inner-below-header > main.container {
  margin-top: 35px;
}

/* Hero : cartes chiffres — 1 colonne mobile, ligne sur écrans larges (responsive Tailwind absent du vendor) */
.tt-hero-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .tt-hero-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

html[lang="fr"] .lang-en {
  display: none !important;
}

html[lang="en"] .lang-fr {
  display: none !important;
}

/* Menu mobile : visibilité gérée par JS (hidden / is-open) */

#mobile-drawer .absolute.right-0 {
  animation: drawer-in 0.2s ease-out;
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #mobile-drawer .absolute.right-0 {
    animation: none;
  }
}

/* FAQ : panneaux ouverts (sans React) */
#faq [role="region"][hidden] {
  display: none !important;
}

#faq [role="region"]:not([hidden]) {
  display: block;
  padding: 0 1.5rem 1rem;
  color: hsl(var(--muted-foreground));
}

#faq button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}