/* ===================================================
   NoctaviaTravel - Responsive Design
=================================================== */

/* ── EXTRA LARGE (1400px+) ────────────────────── */
@media (min-width: 1400px) {
  .container { max-width: 1340px; }
  .hero-title { font-size: 5rem; }
  .mega-menu { width: 1100px; }
}

/* ── LARGE (1200px - 1400px) ──────────────────── */
@media (max-width: 1399px) {
  .hero-title { font-size: 3.5rem; }
  .mega-menu { width: 800px; }
}

/* ── DESKTOP (992px - 1199px) ─────────────────── */
@media (max-width: 1199px) {
  :root { --header-h: 70px; }

  .hero-title { font-size: 3rem; }
  .hero-stats { gap: 24px; }
  .hero-stat-num { font-size: 1.75rem; }

  .search-grid { grid-template-columns: repeat(3, 1fr); }

  .newsletter-card { padding: 40px; }

  .mega-menu { width: 700px; left: auto; transform: none; }
  .mega-dropdown { position: static; }

  .section-pad { padding: 80px 0; }

  #navbarMenu { display: none !important; }
  .navbar-toggler { display: flex !important; }
}

/* ── TABLET (768px - 991px) ───────────────────── */
@media (max-width: 991px) {
  html { font-size: 15px; }

  .hero-section { min-height: 90vh; }
  .hero-content { padding: 100px 0 60px; }
  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1rem; }
  .hero-stats { flex-direction: row; flex-wrap: wrap; gap: 20px; }
  .hero-divider { display: none; }

  .search-box { padding: 20px; }
  .search-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .search-tabs { gap: 6px; }
  .search-tab { padding: 6px 14px; font-size: .8rem; }

  .section-pad { padding: 60px 0; }
  .section-pad-sm { padding: 40px 0; }
  .section-header { margin-bottom: 40px; }

  .newsletter-card { padding: 30px; }
  .newsletter-content h2 { font-size: 1.5rem; }

  .footer-top { padding: 60px 0 40px; }
  .footer-bottom-inner { flex-direction: column; text-align: center; gap: 12px; }

  .page-hero { padding: 60px 0; }
  .page-hero h1 { font-size: 2.5rem; }

  .stats-section .row > div { margin-bottom: 40px; }
  .stats-section .row > div:last-child { margin-bottom: 0; }

  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { margin-left: 0; }
}

/* ── LARGE MOBILE (576px - 767px) ─────────────── */
@media (max-width: 767px) {
  html { font-size: 14px; }

  .top-bar { display: none !important; }

  .hero-section { min-height: 80vh; }
  .hero-title { font-size: 2rem; }
  .hero-stats { flex-direction: row; justify-content: center; }
  .hero-stat-num { font-size: 1.5rem; }

  .search-grid { grid-template-columns: 1fr; }
  .search-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px; }

  .package-card-image { height: 220px; }

  .destination-card .dest-image-wrap { aspect-ratio: 16/9; }

  .newsletter-card { padding: 24px; }
  .newsletter-card .row { flex-direction: column; }

  .testimonial-card { padding: 24px; }

  .footer-top { padding: 40px 0 30px; }
  .footer-widget { margin-bottom: 30px; }

  .contact-info-card { padding: 24px; }

  .form-card { padding: 24px; }

  .cookie-content { flex-direction: column; }

  .page-hero { padding: 40px 0; }
  .page-hero h1 { font-size: 1.9rem; }

  .booking-sidebar { position: static; }

  .hero-badge { font-size: .75rem; padding: 6px 14px; }

  .scroll-down { display: none; }

  .stat-num { font-size: 2.5rem; }

  .why-card { padding: 20px; }
  .why-icon { width: 56px; height: 56px; font-size: 1.4rem; }
}

/* ── SMALL MOBILE (< 576px) ───────────────────── */
@media (max-width: 575px) {
  .hero-title { font-size: 1.75rem; }
  .hero-subtitle { font-size: .9rem; }
  .hero-stats { gap: 16px; }
  .hero-stat-num { font-size: 1.25rem; }

  .search-box { border-radius: 16px; padding: 16px; }

  .section-title { font-size: 1.5rem; }
  .section-desc { font-size: .9rem; }

  .newsletter-content h2 { font-size: 1.3rem; }

  .package-card-image { height: 200px; }

  .whatsapp-float { bottom: 70px; right: 16px; width: 48px; height: 48px; font-size: 1.3rem; }
  .scroll-top-btn { bottom: 16px; right: 16px; width: 40px; height: 40px; }

  .footer-bottom-links { flex-direction: column; gap: 8px; align-items: center; }
  .footer-payment-icons { justify-content: center; }

  .breadcrumb-item { font-size: .8rem; }

  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.15rem; }
}

/* ── PRINT ────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .newsletter-section,
  .cookie-banner, .whatsapp-float, .scroll-top-btn,
  #pageLoader { display: none !important; }
  body { font-size: 12pt; color: #000; }
  a { color: #000; text-decoration: underline; }
  .page-hero { background: #f5f5f5 !important; }
  .page-hero h1 { color: #000 !important; }
}

/* ── DARK MODE (préférence système) ───────────── */
@media (prefers-color-scheme: dark) {
  /* Intentionnellement minimal - NoctaviaTravel utilise un dark mode custom */
}

/* ── REDUCED MOTION ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-bg { animation: none !important; }
  .animate-float { animation: none !important; }
  .page-loader { display: none !important; }
}

/* ── HIGH CONTRAST ────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --primary: #0000CC;
    --border: #000;
  }
  .package-card, .why-card { border: 2px solid #000; }
  a { text-decoration: underline; }
}

/* ── TOUCH DEVICES ────────────────────────────── */
@media (hover: none) {
  .package-overlay { opacity: 1; background: rgba(0,0,0,.3); }
  .dest-overlay { background: linear-gradient(to top, rgba(0,0,0,.8), transparent); }
  .hover-lift:hover { transform: none; }
  .why-card:hover { transform: none; }
}

/* ── UTILITY ──────────────────────────────────── */
@media (max-width: 767px) {
  .d-mobile-none { display: none !important; }
  .text-mobile-center { text-align: center !important; }
  .mt-mobile-4 { margin-top: 1.5rem !important; }
}
@media (min-width: 768px) {
  .d-desktop-none { display: none !important; }
}

/* ── LANDSCAPE MOBILE ─────────────────────────── */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-section { min-height: 110vh; }
  .hero-content { padding: 70px 0 40px; }
}

/* ── RETINA DISPLAYS ──────────────────────────── */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo-icon { box-shadow: 0 4px 15px rgba(0,87,255,.4); }
}