/* =====================================================
   EM Wedding — Base CSS (Shared Reset & Components)
   =====================================================
   Ce fichier contient :
   - Reset universel
   - Composants communs (boutons, formulaires, images, typographie, utilitaires)
   - Les styles utilisent les variables CSS fournies par la DA active.
   ===================================================== */

/* --- Reset Universel --- */
:root[data-style] *,
:root[data-style] *::before,
:root[data-style] *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root[data-style] {
  font-family: var(--font-body, sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-primary, #333);
  background: var(--bg-primary, #fff);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

:root[data-style] body {
  overflow-x: hidden;
  min-height: 100vh;
}

/* --- Images --- */
:root[data-style] img {
  max-width: 100%;
  height: auto;
  display: block;
}

:root[data-style] .hero-parallax-img,
:root[data-style] .about-img,
:root[data-style] .gallery-img,
:root[data-style] .card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Liens --- */
:root[data-style] a {
  transition: color var(--transition-normal, 0.3s);
}

/* --- Paragraphes --- */
:root[data-style] p {
  margin-bottom: 1rem;
}

/* --- Typography de base --- */
:root[data-style] h1,
:root[data-style] h2,
:root[data-style] h3,
:root[data-style] h4,
:root[data-style] h5,
:root[data-style] h6 {
  line-height: 1.2;
}

/* --- Utilitaires --- */
:root[data-style] .text-center { text-align: center; }

:root[data-style] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   ANIMATIONS SCROLL (fade-in, slide-up)
   ===================================================== */
:root[data-style] .animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-style] .animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

:root[data-style] .animate-on-scroll.delay-1 { transition-delay: 0.1s; }
:root[data-style] .animate-on-scroll.delay-2 { transition-delay: 0.2s; }
:root[data-style] .animate-on-scroll.delay-3 { transition-delay: 0.3s; }

/* --- Container --- */
:root[data-style] .container-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Responsive Mobile --- */
@media (max-width: 768px) {
  :root[data-style] {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  :root[data-style] {
    font-size: 14px;
  }
}