/* ═══════════════════════════════════════════════════════════════
   Le Gîte de l'Étang — Custom Styles
   Fichier : style.css
   ═══════════════════════════════════════════════════════════════ */

/* ─── Variables (tokens de design) ─── */
:root {
  --color-cream:          #faf6f0;
  --color-cream-dark:     #f0ead8;
  --color-forest-400:     #86efac;
  --color-forest-500:     #22c55e;
  --color-forest-950:     #052e16;
  --color-earth-400:      #c49a5c;

  --transition-base:      0.3s ease;
  --transition-smooth:    0.7s ease-out;
  --duration-hero-delay:  0.2s;
}


/* ═══════════════════════════════════
   1. BASE & SCROLL
   ═══════════════════════════════════ */

/* ─── Défilement fluide (désactivé si préférence réduit mouvement) ─── */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ─── Scrollbar personnalisée ─── */
::-webkit-scrollbar        { width:            8px; }
::-webkit-scrollbar-track  { background:       var(--color-cream); }
::-webkit-scrollbar-thumb  {
  background:   var(--color-forest-400);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background:   var(--color-forest-500);
}


/* ═══════════════════════════════════
   2. ANIMATIONS — HERO
   ═══════════════════════════════════ */

/* ─── Fade-up avec délais progressifs ─── */
@keyframes heroFadeUp {
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.hero-anim {
  opacity:         0;
  transform:       translateY(30px);
  animation:       heroFadeUp 0.8s ease-out forwards;
}
.hero-anim-d1 { animation-delay: calc(var(--duration-hero-delay) * 1); }
.hero-anim-d2 { animation-delay: calc(var(--duration-hero-delay) * 2); }
.hero-anim-d3 { animation-delay: calc(var(--duration-hero-delay) * 3); }


/* ═══════════════════════════════════
   3. ANIMATIONS — SCROLL & UI
   ═══════════════════════════════════ */

/* ─── Apparition au scroll (observée via IntersectionObserver) ─── */
.fade-in {
  opacity:   0;
  transform: translateY(40px);
  transition: opacity var(--transition-smooth),
              transform var(--transition-smooth);
}
.fade-in.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ─── Flèche de défilement (hero) ─── */
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}
.bounce-down {
  animation: bounceDown 2s ease-in-out infinite;
}

/* ─── Spinner de chargement ─── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1s linear infinite;
}


/* ═══════════════════════════════════
   4. OVERLAYS & MODALS
   ═══════════════════════════════════ */

/* ─── Lightbox (galerie) ─── */
.lightbox-overlay {
  transition: opacity 0.2s ease;
}

/* ─── Menu mobile ─── */
.mobile-menu {
  transform: translateX(100%);
  transition: transform var(--transition-base);
}
.mobile-menu.open {
  transform: translateX(0);
}

/* ─── Modal mentions légales / confidentialité ─── */
.legal-modal-overlay {
  display:    none;
  opacity:    0;
  transition: opacity var(--transition-base);
}
.legal-modal-overlay.active {
  display:    flex;
  opacity:    1;
}

.legal-modal-content {
  opacity:    0;
  transform:  scale(0.95) translateY(20px);
  transition: opacity var(--transition-base),
              transform var(--transition-base);
}
.legal-modal-overlay.active .legal-modal-content {
  opacity:   1;
  transform: scale(1) translateY(0);
}


/* ═══════════════════════════════════
   5. CARROUSEL (avis clients)
   ═══════════════════════════════════ */

.carousel-track {
  display:    flex;
  transition: transform 0.5s ease;
}


/* ═══════════════════════════════════
   6. FORMULAIRE DE CONTACT
   ═══════════════════════════════════ */

/* ─── États de validation ─── */
.form-input.border-emerald-400 {
  border-color:    #34d399;
  background-color: #ecfdf5;
}

.form-input.border-red-400 {
  border-color:    #f87171;
  background-color: #fef2f2;
}