/**
 * KEKENDO — Couche responsive mobile-first
 * Chargé après style.css : complète espacements, overflow, navigation tactile,
 * typographie fluide et grilles sans casser le design existant.
 *
 * Breakpoints de référence : xs <480 | sm 480–767 | md 768–991 | lg 992+
 */

/* -------------------------------------------------------------------------
   1. Fondations — scroll ancré sous header fixe + pas de débordement global
   ------------------------------------------------------------------------- */
html {
  scroll-padding-top: calc(var(--nav-offset) + 0.75rem);
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: calc(var(--nav-offset) + 0.5rem);
  }
}

#main-content {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   2. Espacements fluides (tablette) — sans écraser le réglage xs de style.css
   ------------------------------------------------------------------------- */
@media (max-width: 767px) and (min-width: 481px) {
  :root {
    --space-xl: clamp(3.25rem, 10vw, 5.25rem);
    --space-lg: clamp(2.35rem, 7vw, 3.75rem);
    --space-md: clamp(1.35rem, 4vw, 2rem);
  }
}

/* -------------------------------------------------------------------------
   3. Header / navbar — flex sûr, marque lisible, CTA tactiles
   ------------------------------------------------------------------------- */
.navbar-inner {
  gap: clamp(0.5rem, 2.5vw, 1.5rem);
  min-width: 0;
}

.navbar-brand {
  min-width: 0;
  flex-shrink: 1;
  font-size: clamp(1.05rem, 4.2vw, 1.5rem);
}

.site-logo--nav {
  height: clamp(38px, 11vw, 48px);
  max-width: clamp(112px, 36vw, 168px);
}

/* Nom KEKENDO à côté du logo : taille fluide */
.navbar-brand-name {
  font-size: clamp(1rem, 4vw, 1.5rem);
  line-height: 1;
}

/* Sur très petits écrans, on prive d'espace : on rétrécit le logo et masque le nom */
@media (max-width: 360px) {
  .navbar-brand-name { display: none; }
  .site-logo--nav {
    height: 34px;
    max-width: 92px;
  }
}

.navbar-end {
  min-width: 0;
  gap: clamp(0.35rem, 1.8vw, 1rem);
}

.btn-reserve {
  flex-shrink: 0;
  padding-inline: clamp(0.65rem, 2.5vw, 1.25rem);
}

.burger {
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

@media (max-width: 380px) {
  .btn-reserve {
    font-size: 0.78rem;
    padding-inline: 0.65rem;
  }
}

/* -------------------------------------------------------------------------
   4. Hero — contrôles accessibles, hint scroll masqué sur très petit écran
   ------------------------------------------------------------------------- */
.hero-nav {
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(100vw - 2 * var(--container-gutter));
  left: 50%;
  transform: translateX(-50%);
}

.hero-prev,
.hero-next {
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .hero-scroll {
    display: none;
  }

  .hero-nav {
    bottom: clamp(2rem, 9vh, 4.5rem);
    gap: 0.5rem;
  }
}

/* -------------------------------------------------------------------------
   5. Typo & sections — titres et interlignes sur mobile
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section-title {
    font-size: clamp(1.5rem, 6.5vw, 2.35rem);
    line-height: 1.18;
    word-break: break-word;
    hyphens: manual;
  }

  .section-desc {
    font-size: clamp(0.94rem, 3.6vw, 1.05rem);
    padding-inline: 0;
  }

  .section-header.center .section-desc {
    max-width: 100%;
  }

  .page-section {
    padding-block: clamp(2rem, 8vw, var(--space-lg));
  }

  .page-section-title {
    font-size: clamp(1.2rem, 4.5vw, 1.55rem);
  }
}

/* -------------------------------------------------------------------------
   6. Booking strip — champs pleine largeur sur étroit, dates lisibles iOS
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .booking-strip {
    margin-top: clamp(-1.75rem, -4vw, -1rem);
  }

  .booking-form {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    padding: clamp(0.85rem, 3vw, 1rem);
  }

  .booking-field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .booking-field select,
  .booking-field input[type="date"] {
    min-height: 46px;
    font-size: 16px;
  }

  .btn-booking {
    width: 100%;
    justify-content: center;
    height: auto;
    min-height: 48px;
    white-space: normal;
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
   7. Cartes offres & méta — texte long
   ------------------------------------------------------------------------- */
.offre-meta {
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.offre-meta span {
  min-width: 0;
  word-break: break-word;
}

.offre-body h3 {
  word-break: break-word;
}

/* -------------------------------------------------------------------------
   8. Grilles « pourquoi nous » & stats — pas de débordement
   ------------------------------------------------------------------------- */
.why-item {
  min-width: 0;
}

.why-item h4 {
  word-break: break-word;
}

.about-stats,
.stat,
.stat-card {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   9. Swiper témoignages — clip horizontal + padding pagination
   ------------------------------------------------------------------------- */
.temoignages-swiper {
  overflow: hidden;
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: 2.5rem;
}

.temoignages-section .container {
  min-width: 0;
}

/* -------------------------------------------------------------------------
   10. Formulaires pages (réservation, contact) — zones de toucher confortables
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-form input[type="text"],
  .page-form input[type="email"],
  .page-form input[type="tel"],
  .page-form input[type="date"],
  .page-form input[type="number"],
  .page-form textarea,
  .page-form select {
    min-height: 46px;
    font-size: 16px;
  }

  .page-form textarea {
    min-height: 120px;
  }

  .page-form--light input[type="text"],
  .page-form--light input[type="email"],
  .page-form--light input[type="tel"],
  .page-form--light textarea {
    min-height: 46px;
    font-size: 16px;
  }
}

/* -------------------------------------------------------------------------
   11. Grille détail activité — une colonne stable sur mobile
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .activity-detail-grid {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 4vw, 1.75rem);
  }

  .booking-panel {
    position: static;
  }
}

/* -------------------------------------------------------------------------
   12. Footer Bootstrap row — gouttières et pas d’overflow
   ------------------------------------------------------------------------- */
.site-footer .footer-grid.row {
  --bs-gutter-x: 1.25rem;
  margin-inline: 0;
  max-width: 100%;
}

.site-footer .footer-grid > [class*="col-"] {
  min-width: 0;
}

@media (max-width: 767px) {
  .footer-social--block {
    justify-content: flex-start;
  }

  .footer-social a {
    min-width: 40px;
    min-height: 40px;
  }

  .mobile-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .mobile-nav .mobile-nav-cta {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------------
   13. Lightbox — hauteur dynamique sur mobile
   ------------------------------------------------------------------------- */
#lightbox.lightbox .lightbox__img {
  max-width: min(94vw, 100vw - 1rem);
  max-height: min(88vh, 88dvh);
}

/* -------------------------------------------------------------------------
   14. CTA bandeau — hauteur min réduite sur mobile (déjà partiellement en style)
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cta-banner {
    min-height: 0;
    padding-block: clamp(1.75rem, 6vw, 2.5rem);
  }
}

/* -------------------------------------------------------------------------
   15. Galerie page — grille respire sur xs
   ------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .gallery-page-mosaic .galerie-item,
  .galerie-strip .galerie-item {
    min-width: 0;
  }
}

/* -------------------------------------------------------------------------
   16. Pages SEO — colonne unique sur tablette/mobile
   ------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .seo-page-grid {
    grid-template-columns: 1fr;
  }

  .seo-page-panel {
    position: static;
  }
}