/* ============================================
   RESPONSIVE STYLES - La Vallée Premium Theme
   ============================================ */

/* ============================================
   BREAKPOINTS
   ============================================
   Mobile: < 576px
   Tablet: 576px - 768px
   Desktop: 768px - 992px
   Large Desktop: > 992px
   ============================================ */

/* ============================================
   HERO SECTION - Slider
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Hero height */
  .section.position-relative[style*="height: 85vh"] {
    height: 70vh !important;
    min-height: 400px !important;
  }

  /* Container padding */
  .r-container[style*="padding: 0 3rem"] {
    padding: 0 1rem !important;
  }

  /* Banner content */
  .banner-content {
    padding: 1.5rem !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hero title */
  h1.text-white[style*="font-size: clamp"] {
    font-size: 1.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* Hero description */
  p.text-white[style*="font-size: 1.125rem"] {
    font-size: 1rem !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
  }

  /* CTA Button */
  .cta-button {
    padding: 12px 24px !important;
    font-size: 12px !important;
    width: 100%;
    justify-content: center;
  }

  /* Swiper navigation */
  .swiper-button-next-banner,
  .swiper-button-prev-banner {
    display: none !important;
  }

  /* Swiper pagination */
  .swiper-pagination-banner {
    bottom: 1rem !important;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .section.position-relative[style*="height: 85vh"] {
    height: 75vh !important;
    min-height: 450px !important;
  }

  .r-container[style*="padding: 0 3rem"] {
    padding: 0 2rem !important;
  }

  .banner-content {
    padding: 1.75rem !important;
  }

  .swiper-button-next-banner,
  .swiper-button-prev-banner {
    width: 40px !important;
    height: 40px !important;
    right: 1rem !important;
    left: 1rem !important;
  }
}

/* ============================================
   FORMULAIRE DE CONTACT
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Section padding */
  .section[style*="padding: 4rem 0"] {
    padding: 2.5rem 0 !important;
  }

  /* Section title */
  h2[style*="font-size: clamp(1.75rem"] {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  /* Form container */
  div[style*="padding: 3rem"] {
    padding: 1.5rem !important;
    border-radius: 15px !important;
  }

  /* Form labels */
  .form-label {
    font-size: 0.875rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* Form inputs */
  .form-control,
  .form-select {
    padding: 0.75rem 1rem !important;
    font-size: 0.875rem !important;
  }

  /* Checkboxes grid */
  .row.g-3 > .col-md-6 {
    margin-bottom: 0.75rem;
  }

  /* Checkbox labels */
  .form-check-label {
    font-size: 0.875rem !important;
  }

  /* Contact preferences */
  .d-flex[style*="gap: 2rem"] {
    flex-direction: column !important;
    gap: 1rem !important;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  div[style*="padding: 3rem"] {
    padding: 2rem !important;
  }
}

/* ============================================
   SECTION À PROPOS
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Section padding */
  .section[style*="background: #FFFFFF"][style*="padding: 4rem 0"] {
    padding: 2.5rem 0 !important;
  }

  /* Title "À PROPOS" */
  p[style*="font-size: 0.85rem"][style*="color: #787878"] {
    font-size: 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  /* Main title */
  h2[style*="font-size: clamp(1.75rem"] {
    font-size: 1.5rem !important;
    margin-bottom: 2rem !important;
  }

  /* Service icons grid */
  .row.g-3 > .col-6 {
    margin-bottom: 1rem;
  }

  /* Service icon boxes */
  div[style*="width: 40px"][style*="height: 40px"] {
    width: 35px !important;
    height: 35px !important;
  }

  /* Service icon size */
  i[style*="font-size: 18px"],
  i[style*="font-size: 24px"] {
    font-size: 16px !important;
  }

  /* Service text */
  span[style*="font-size: 0.9rem"] {
    font-size: 0.85rem !important;
  }

  /* Image section */
  img[style*="min-height: 500px"] {
    min-height: 300px !important;
  }

  /* Image overlays */
  div[style*="position: absolute"][style*="bottom: 1.5rem"] {
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
  }

  /* Overlay text positioning */
  div[style*="position: absolute"][style*="bottom: 1.5rem"][style*="right: 1.5rem"] {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
    margin-top: 0.5rem !important;
    display: block !important;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  img[style*="min-height: 500px"] {
    min-height: 400px !important;
  }
}

/* ============================================
   SECTION POURQUOI CHOISIR LA VALLÉE
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Section padding */
  .section[style*="padding: 5rem 0"] {
    padding: 3rem 0 !important;
  }

  /* Section title */
  h2[style*="font-size: clamp(1.75rem"][style*="color: #2D5016"] {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Bloc 1 - Emplacement stratégique */
  div[style*="padding: 3rem"][style*="border-radius: 20px"] {
    padding: 1.5rem !important;
    border-radius: 15px !important;
  }

  /* Icon container */
  div[style*="width: 80px"][style*="height: 80px"] {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 1rem !important;
  }

  /* Icon size */
  i[style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }

  /* Bloc title */
  h3[style*="font-size: clamp(1.5rem"] {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
  }

  /* Bloc text */
  p[style*="font-size: 1.1rem"] {
    font-size: 0.95rem !important;
  }

  /* Bloc 2 - Two columns */
  div[style*="padding: 2.5rem"] {
    padding: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  /* Bloc 2 icon */
  div[style*="width: 60px"][style*="height: 60px"] {
    width: 50px !important;
    height: 50px !important;
  }

  /* Bloc 2 icon size */
  i[style*="font-size: 1.75rem"] {
    font-size: 1.5rem !important;
  }

  /* Bloc 3 */
  div[style*="padding: 3rem"][style*="border-top: 4px"] {
    padding: 1.5rem !important;
  }

  /* Bloc 3 icon */
  div[style*="width: 50px"][style*="height: 50px"] {
    width: 40px !important;
    height: 40px !important;
  }

  /* Bloc 3 icon size */
  i[style*="font-size: 1.5rem"] {
    font-size: 1.25rem !important;
  }

  /* Bloc 3 title */
  h4[style*="font-size: 1.35rem"] {
    font-size: 1.1rem !important;
  }

  /* Bloc 3 text */
  p[style*="font-size: 0.95rem"] {
    font-size: 0.875rem !important;
  }

  /* CTA button margin */
  .text-center.mt-5 {
    margin-top: 2rem !important;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  div[style*="padding: 3rem"] {
    padding: 2rem !important;
  }

  div[style*="padding: 2.5rem"] {
    padding: 2rem !important;
  }
}

/* ============================================
   SECTION ENSEIGNES RECHERCHÉES
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Section padding */
  .section[style*="padding: 3rem 0"] {
    padding: 2rem 0 !important;
  }

  /* Section title */
  h2[style*="font-size: clamp(1.5rem"] {
    font-size: 1.25rem !important;
    margin-bottom: 1.5rem !important;
  }

  /* Chips container */
  .d-flex[style*="gap: 0.5rem"] {
    gap: 0.4rem !important;
  }

  /* Chips */
  .enseigne-chip {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8rem !important;
    border-radius: 16px !important;
  }

  /* Phrase de cadrage */
  p[style*="font-size: 0.875rem"][style*="font-style: italic"] {
    font-size: 0.8rem !important;
    padding: 0 1rem;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .enseigne-chip {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.825rem !important;
  }
}

/* ============================================
   BOUTONS CTA
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  .cta-button {
    padding: 12px 24px !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
  }

  .cta-button span[style*="font-size: 1.1rem"] {
    font-size: 1rem !important;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .cta-button {
    padding: 13px 28px !important;
    font-size: 13px !important;
  }
}

/* ============================================
   GÉNÉRAL - CONTAINERS & SPACING
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Container padding */
  .r-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Section margins */
  .section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Row gaps */
  .row.g-4 {
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 1rem;
  }

  /* Text alignment on mobile */
  .text-center {
    text-align: center !important;
  }

  /* Flex wrap */
  .d-flex {
    flex-wrap: wrap;
  }
}

/* Tablet (576px - 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .r-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

/* Mobile (< 576px) */
@media (max-width: 575.98px) {
  /* Logo */
  .navbar-brand img {
    max-height: 40px !important;
  }

  /* Menu button */
  .btn-toggler-accent {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
  }
}

/* ============================================
   UTILITAIRES RESPONSIVE
   ============================================ */

/* Hide on mobile */
@media (max-width: 575.98px) {
  .d-none-mobile {
    display: none !important;
  }
}

/* Hide on tablet */
@media (min-width: 576px) and (max-width: 767.98px) {
  .d-none-tablet {
    display: none !important;
  }
}

/* Show only on mobile */
@media (min-width: 576px) {
  .d-mobile-only {
    display: none !important;
  }
}

/* ============================================
   FIXES POUR ÉLÉMENTS INLINE
   ============================================ */

/* Override inline styles on mobile */
@media (max-width: 575.98px) {
  /* Force responsive images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Prevent horizontal scroll */
  body {
    overflow-x: hidden;
  }

  /* Fix for fixed widths */
  [style*="width:"] {
    max-width: 100% !important;
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  .swiper-button-next-banner,
  .swiper-button-prev-banner,
  .swiper-pagination-banner {
    display: none !important;
  }

  .cta-button {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
  }
}