/* Responsive — YOON TRAVEL
   Palette (logo) : bleu nuit #171731 · bleu clair #d7e9f5 · accent or #c9a24a
   Utilise les variables du logo sur tous les écrans. */

/* Tablettes paysage / petits desktops */
@media (max-width: 960px) {
  .about-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .form-grid { grid-template-columns: 1fr; }

  .section-title { margin-bottom: 2.5rem; }
}

/* Tablettes portrait / mobiles larges */
@media (max-width: 768px) {
  .section { padding: 3.5rem 0; }

  .main-nav {
    position: fixed;
    inset: 64px 0 auto 0;
    background: var(--white);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
    box-shadow: var(--shadow-md);
    transform: translateY(-120%);
    transition: transform .35s ease;
    border-bottom: 1px solid var(--sand);
  }

  .main-nav.open {
    transform: translateY(0);
  }

  .main-nav a {
    padding: .5rem 0;
    width: 100%;
    border-bottom: 1px solid rgba(23, 23, 49, .08);
    color: var(--ink);
  }

  .main-nav a:hover,
  .main-nav a.active {
    color: var(--orange);
  }

  .nav-toggle {
    display: block;
    color: var(--green);
  }

  .nav-toggle:hover {
    color: var(--orange);
  }

  .hero {
    min-height: 90vh;
    padding: 7rem 0 3rem;
    text-align: center;
  }

  .hero-actions { justify-content: center; }

  .package.featured { transform: none; }
  .package.featured:hover { transform: translateY(-6px); }

  .form-card {
    padding: 1.5rem;
    background: var(--white);
  }

  .contact-info {
    padding: 1.75rem;
    background: var(--green);
    color: var(--white);
  }
}

/* Mobiles */
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social { justify-content: center; }

  .logo small { display: none; }

  .whatsapp-float,
  .top-btn {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .btn {
    padding: .75rem 1.35rem;
    font-size: .9rem;
  }
}

/* Grands écrans */
@media (min-width: 1400px) {
  :root { --container: 1320px; }
}