/* =============================================================
   responsive-fix.css — Mécalibre
   Corrections responsive : tablette paysage, iPad, mobile
   À charger APRÈS style.css pour que ces règles priment.
   ============================================================= */

/* ── PROTECTION GLOBALE ANTI-DÉBORDEMENT ── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── HEADER / NAVBAR ──
   Empêche tout débordement horizontal des éléments de la nav,
   quel que soit l'écran. Le logo et le bouton CTA ne se compressent jamais. */
.header,
.navbar {
  max-width: 100vw;
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
}

.navbar .logo {
  flex-shrink: 0;
  min-width: 0;
}

.navbar .nav-links {
  flex-wrap: nowrap;
}

.navbar .nav-links a {
  white-space: nowrap;
}

.navbar .nav-cta,
.navbar .header-cta-small,
.header-cta-small {
  white-space: nowrap;
  flex-shrink: 0;
}

.header-top {
  flex-wrap: wrap;
  gap: 8px;
}

/* =============================================================
   BREAKPOINT INTERMÉDIAIRE (1025–1280px)
   Cible iPad Air paysage (1180), iPad Pro 11" paysage (1194),
   et petits laptops. À ces tailles, la nav garde tous ses liens
   mais avec une typo et des espaces réduits pour tout faire tenir.
   ============================================================= */
@media (max-width: 1280px) and (min-width: 1025px) {
  .header-top {
    padding-left: 24px !important;
    padding-right: 24px !important;
    font-size: 0.85rem;
  }

  .navbar {
    padding-left: 24px !important;
    padding-right: 24px !important;
    gap: 12px;
  }

  .navbar .logo .logo-main {
    font-size: 1.6rem;
    letter-spacing: 0.04em;
  }
  .navbar .logo .logo-sub {
    font-size: 0.65rem;
  }

  .nav-links {
    gap: 18px !important;
  }
  .nav-links a {
    font-size: 0.82rem !important;
    letter-spacing: 0.06em !important;
  }
  .nav-links .nav-cta {
    padding: 10px 18px !important;
    font-size: 0.78rem !important;
  }
}

/* =============================================================
   BREAKPOINT INTERMÉDIAIRE STRICT (1025–1100px)
   Encore plus serré : iPad Pro 11" portrait n'est pas concerné
   (834px → tombe en règle tablette), mais certains modèles
   intermédiaires peuvent en bénéficier.
   ============================================================= */
@media (max-width: 1100px) and (min-width: 1025px) {
  .nav-links {
    gap: 14px !important;
  }
  .nav-links a {
    font-size: 0.78rem !important;
  }
}

/* =============================================================
   TABLETTE — passage en menu burger (≤1024px)
   On s'assure que le burger est visible et la nav classique cachée.
   ============================================================= */
@media (max-width: 1024px) {
  .navbar .nav-links {
    display: none !important;
  }
  .navbar .burger {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .header-top {
    padding-left: 20px !important;
    padding-right: 20px !important;
    font-size: 0.8rem;
  }
  .navbar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .navbar .logo .logo-main {
    font-size: 1.5rem;
  }
}

/* =============================================================
   TABLETTE PAYSAGE (toutes tailles, hauteur ≤900px)
   Couvre iPad classique paysage (1024×768), iPad Air (1180×820),
   iPad Pro 11" (1194×834), iPad Pro 12.9" (1366×1024).
   Hero compacté, stats en grille flexible, map plus basse.
   ============================================================= */
@media (orientation: landscape) and (max-height: 900px) and (max-width: 1366px) {
  .hero {
    min-height: auto !important;
    padding-top: 130px !important;
    padding-bottom: 60px !important;
  }
  .hero-title {
    font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
    line-height: 1.05;
  }
  .hero-desc {
    font-size: 0.95rem !important;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    padding: 12px 22px !important;
    font-size: 0.85rem !important;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
  }
  .hero-stats .stat-divider {
    display: none;
  }
  .hero-stats .stat {
    flex: 0 1 auto;
    min-width: 120px;
  }
  .hero-stats .stat-num {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  }

  .section {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  /* Carte plus basse pour ne pas écraser l'écran en paysage */
  .loc-map-container iframe {
    height: 360px !important;
  }
}

/* =============================================================
   MOBILE PAYSAGE (≤900px de large + paysage + petite hauteur)
   Téléphones tenus en paysage : on compacte au maximum.
   ============================================================= */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-top: 110px !important;
    padding-bottom: 40px !important;
  }
  .hero-title {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem) !important;
  }
  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    padding: 10px 18px !important;
    font-size: 0.8rem !important;
  }

  .hero-stats {
    margin-top: 24px !important;
    gap: 14px;
  }

  .section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .loc-map-container iframe {
    height: 280px !important;
  }
}

/* =============================================================
   GRILLE LOCALISATION — responsive
   La grille map+infos doit passer en colonne unique sur tablette
   et garder une carte lisible.
   ============================================================= */
.localisation-grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 901px) {
  .localisation-grid {
    grid-template-columns: 1fr 1.2fr;
    align-items: stretch;
  }
}

@media (max-width: 900px) {
  .localisation-grid {
    grid-template-columns: 1fr;
  }
  .loc-map-container iframe {
    height: 380px !important;
  }
}

@media (max-width: 640px) {
  .loc-map-container iframe {
    height: 320px !important;
  }
}

.loc-map-container {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.loc-map-container iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* =============================================================
   GRILLES GÉNÉRIQUES — sécurité responsive
   ============================================================= */
@media (max-width: 1024px) {
  .services-grid,
  .actualites-grid,
  .contact-grid,
  .footer-inner,
  .timeline {
    grid-template-columns: 1fr !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .services-grid,
  .actualites-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================================
   MOBILE (≤640px) — derniers ajustements
   ============================================================= */
@media (max-width: 640px) {
  .header-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 16px !important;
    font-size: 0.75rem;
  }
  .navbar {
    padding: 12px 16px !important;
  }
  .hero {
    padding-top: 140px !important;
    padding-bottom: 50px !important;
  }
  .hero-title {
    font-size: clamp(1.8rem, 8vw, 2.8rem) !important;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-outline {
    width: 100%;
    text-align: center;
  }

  .section-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
  }

  .footer-inner {
    text-align: center;
  }
}

/* =============================================================
   IFRAME / VIDÉOS — sécurité débordement
   ============================================================= */
iframe, video, img {
  max-width: 100%;
}

/* La vidéo flottante doit rester lisible et pas bloquer la nav */
@media (max-width: 1024px) {
  .video-container-floating {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px auto !important;
  }
}