/* ============================================================
   Le Guide du Lotisseur — Custom Stylesheet
   ============================================================ */

/* CSS Custom Properties */
:root {
  --brand-blue: #235488;
  --brand-gold: #F0A51E;
  --brand-dark: #163659;
}

/* ── Nav scroll shadow ──────────────────────────────────────── */
nav.scrolled {
  box-shadow: 0 4px 24px rgba(22, 54, 89, 0.15);
}

/* ── Feature cards ──────────────────────────────────────────── */
.feature-card {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(35, 84, 136, 0.12);
}

/* ── Gallery images ─────────────────────────────────────────── */
.gallery-img {
  transition: transform 0.35s ease;
}
.gallery-img:hover {
  transform: scale(1.05);
}

/* ── Contact links hover lift ───────────────────────────────── */
.contact-link {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile Bottom CTA Bar ──────────────────────────────────── */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: white;
  padding: 0.6rem 1rem;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
  gap: 0.6rem;
  align-items: stretch;
}

@media (max-width: 767px) {
  .mobile-cta-bar {
    display: flex;
  }
  body {
    padding-bottom: 72px;
  }
  .whatsapp-float {
    display: none !important;
  }
}

/* ── Modal mobile scroll ────────────────────────────────────── */
@media (max-width: 767px) {
  #orderModal .modal-scroll-wrapper {
    max-height: 92vh;
    overflow-y: auto;
  }
}