/* =========================================================
   Les Cistes - Corrections responsive globales
   Fichier charge APRES les <style> inline pour gagner la cascade
   Cible : tablettes (<=980px), mobiles (<=640px), petits (<=420px)
   ========================================================= */

/* ---------- Base : evite tout scroll horizontal ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, svg { max-width: 100%; height: auto; }

/* =========================================================
   TABLETTES & PETITS ECRANS (<= 980px)
   ========================================================= */
@media (max-width: 980px) {
  header {
    padding: .7rem .9rem !important;
  }
  .logo-img { height: 62px !important; }
  nav ul { gap: .75rem !important; }
  nav a {
    font-size: .92rem !important;
    padding: .35rem .55rem !important;
  }
  .lang-switch { margin-left: .4rem !important; gap: .35rem !important; }
  .lang-btn { padding: .3rem .4rem !important; }

  main { padding-top: 5rem !important; }

  .container { padding: 0 1rem !important; }
  .section { padding: 2.2rem 0 !important; }
}

/* =========================================================
   MOBILES (<= 720px)
   ========================================================= */
@media (max-width: 720px) {
  /* HEADER : on permet au header de grandir sur 2 lignes proprement */
  header {
    flex-wrap: wrap !important;
    gap: .4rem .6rem !important;
    padding: .55rem .7rem !important;
    justify-content: center !important;
  }
  .logo { flex: 1 1 auto !important; text-align: center; }
  .logo-img { height: 50px !important; margin: 0 auto; }

  nav {
    flex: 1 1 100% !important;
    justify-content: center !important;
    order: 3;
  }
  nav ul {
    gap: .25rem !important;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  nav a {
    font-size: .82rem !important;
    padding: .3rem .45rem !important;
  }

  .lang-switch {
    margin-left: 0 !important;
    gap: .3rem !important;
    order: 2;
  }
  .lang-btn { padding: .25rem .35rem !important; }
  .lang-btn svg { width: 18px !important; height: 13px !important; }

  main { padding-top: 6.8rem !important; }

  /* HERO */
  .hero {
    min-height: 70vh !important;
    padding: 4rem .8rem 2rem !important;
  }
  .hero-title { font-size: clamp(2.6rem, 11vw, 5rem) !important; }

  /* TITRES */
  h1, .page-title {
    font-size: clamp(1.7rem, 6vw, 2.2rem) !important;
    line-height: 1.2;
  }
  h2, .section-title, .card-title {
    font-size: clamp(1.3rem, 4.5vw, 1.6rem) !important;
    line-height: 1.25;
  }
  .section-sub, .page-sub { font-size: .95rem !important; }

  /* GRILLES */
  .grid3, .grid2, .grid, .wrap, .reviews-container, .reviews-grid, .layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* CARDS */
  .card, .review-card, .activite-card, .cta-band {
    padding: 1.2rem 1rem !important;
    border-radius: 18px !important;
  }

  .container { padding: 0 .8rem !important; }
  .section { padding: 1.6rem 0 !important; }

  /* BOUTONS */
  .btn {
    padding: .72rem .95rem !important;
    font-size: .95rem !important;
  }
  .cta-actions {
    flex-wrap: wrap !important;
    gap: .6rem !important;
    justify-content: center;
  }

  /* FORMULAIRES : retire les min-width qui cassent */
  input, textarea, select { min-width: 0 !important; }
  .row, .dates-form, .dates-form-contact {
    grid-template-columns: 1fr !important;
    gap: .7rem !important;
  }
  .row.dates-row .dates-form {
    grid-template-columns: 1fr !important;
  }
  .row.dates-row .dates-field input {
    min-width: 0 !important;
    padding: .75rem 1rem !important;
    font-size: 1rem !important;
  }

  /* CTA BAND */
  .cta-band {
    flex-direction: column !important;
    text-align: center;
    gap: 1rem !important;
  }

  /* FOOTER */
  footer { font-size: .85rem !important; padding: 1.4rem .8rem !important; }

  /* BADGES / PILLS */
  .pill { font-size: .8rem !important; padding: .3rem .6rem !important; }

  /* CALENDRIERS - Fix mobile complet */
  #calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 300px !important;
    overflow-x: hidden !important;
  }
  .flatpickr-calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  #calendar .flatpickr-calendar {
    padding-right: 0 !important;
  }
  .flatpickr-calendar.multiMonth .flatpickr-days {
    width: 100% !important;
  }
  .flatpickr-months {
    padding: .2rem 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
  }
  .flatpickr-month {
    height: 40px !important;
    min-height: 40px !important;
    overflow: visible !important;
    background: transparent !important;
    flex: 1 !important;
  }
  .flatpickr-current-month {
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    padding: 0 !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .3rem !important;
  }
  .flatpickr-current-month .flatpickr-monthDropdown-months,
  .flatpickr-current-month input.cur-year {
    font-size: 1rem !important;
    font-weight: 900 !important;
    padding: 0 !important;
  }
  .flatpickr-current-month input.cur-year {
    width: 3.5ch !important;
  }
  .flatpickr-prev-month,
  .flatpickr-next-month {
    position: static !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    height: auto !important;
  }
  .flatpickr-innerContainer {
    width: 100% !important;
    overflow: hidden !important;
  }
  .flatpickr-rContainer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .flatpickr-days {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .flatpickr-days .dayContainer {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 2px !important;
  }
  .flatpickr-calendar .flatpickr-weekdays {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .flatpickr-calendar .flatpickr-weekdaycontainer {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .flatpickr-calendar span.flatpickr-weekday {
    width: auto !important;
    max-width: 100% !important;
    font-size: .75rem !important;
    padding: .2rem 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  .flatpickr-calendar span.flatpickr-weekday:last-child {
    transform: none !important;
  }
  .flatpickr-day {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    line-height: 1 !important;
    font-size: .85rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .flatpickr-day:hover {
    transform: none !important;
  }

  /* AVIS (commentaires.html) */
  .avg-number { font-size: 2.5rem !important; }
  .avg-score { gap: .6rem !important; }

  /* MINI-TABLE tarifs */
  .mini-table .row {
    grid-template-columns: 1fr !important;
    gap: .4rem !important;
    padding: .7rem .8rem !important;
  }
  .mini-table .price, .mini-table .min { justify-self: start !important; }

  /* ESPACE PRIVE - modal */
  .modal-card {
    width: 96% !important;
    max-width: 96% !important;
    padding: 1rem !important;
    border-radius: 18px !important;
  }
  .admin-fab {
    width: 48px !important;
    height: 48px !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  /* Empeche les inline styles flex de dessiner en largeur excessive */
  [style*="display:flex"][style*="gap"] {
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   PETITS MOBILES (<= 420px)
   ========================================================= */
@media (max-width: 420px) {
  header { padding: .45rem .5rem !important; }
  .logo-img { height: 44px !important; }
  nav a { font-size: .76rem !important; padding: .25rem .35rem !important; }
  nav ul { gap: .15rem !important; }

  main { padding-top: 6.2rem !important; }

  .hero { padding: 3.5rem .6rem 1.5rem !important; min-height: 60vh !important; }
  .hero-title { font-size: clamp(2rem, 10vw, 3.2rem) !important; }

  h1, .page-title { font-size: 1.5rem !important; }
  h2, .section-title, .card-title { font-size: 1.2rem !important; }

  .card, .review-card { padding: 1rem .85rem !important; border-radius: 16px !important; }
  .container { padding: 0 .6rem !important; }

  .btn {
    padding: .6rem .8rem !important;
    font-size: .88rem !important;
  }

  .review-avatar { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
  .review-name { font-size: 1rem !important; }
  .review-text { font-size: .95rem !important; line-height: 1.6 !important; }

  .avg-number { font-size: 2.1rem !important; }

  footer { font-size: .78rem !important; }
}