/* Renforts responsive globaux — chargé en dernier pour avoir la priorité */

/* ===== Tablet (max 900px) ===== */
@media (max-width: 900px) {
  .container { padding: 0 18px; }
  .section { padding: clamp(48px, 7vw, 80px) 0; }
  .section-head { margin-bottom: 24px; }
  h1 { font-size: clamp(34px, 7vw, 56px); }
  h2 { font-size: clamp(26px, 5vw, 40px); }
  h3 { font-size: clamp(20px, 3vw, 26px); }
}

/* ===== Tablet+Mobile (max 820px) : forcer affichage menu-toggle ===== */
@media (max-width: 820px) {
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .nav-right .btn.btn-primary { display: none; }
}

/* ===== Mobile (max 640px) ===== */
@media (max-width: 640px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 16px; }

  /* ----- Header / Nav mobile ----- */
  .site-header {
    position: sticky;
    top: 0;
    width: 100%;
  }
  .site-header .container {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 8px;
    flex-wrap: nowrap;
    max-width: 100%;
  }
  .brand { gap: 8px; font-size: 16px; }
  .brand img { width: 30px; height: 30px; }
  .brand b { font-size: 15px; }
  .brand small { display: none; }

  /* Le menu déroulant occupe tout l'écran sous le header (sorti du flux) */
  .nav {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--surface);
    padding: 16px;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-110%);
    transition: transform 0.25s ease;
    margin: 0;
    z-index: 49;
    visibility: hidden;
  }
  .nav.open {
    transform: translateY(0);
    visibility: visible;
  }
  .nav a {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 12px;
  }

  .nav-right { gap: 6px; margin-left: auto; }
  .lang { padding: 2px; }
  .lang button { padding: 4px 8px; font-size: 11px; }
  /* CTA navbar masqué en mobile — bouton WhatsApp suffit */
  .nav-right .btn.btn-primary { display: none; }
  .menu-toggle {
    display: inline-flex !important;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface);
  }

  /* ----- Hero ----- */
  .hero {
    min-height: calc(100svh - 70px);
    margin: 0 12px;
    border-radius: 18px;
  }
  .hero-body {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 22px 32px;
  }

  /* ----- Cards ----- */
  .card-img { aspect-ratio: 16/10; }
  .card-body { padding: 16px; gap: 8px; }
  .card-body h3 { font-size: 18px; }
  .card-foot { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  .price { font-size: 20px; }

  /* ----- Pricing plans ----- */
  .plan { padding: 24px 20px; }
  .plan-price { font-size: 36px; }

  /* ----- Footer ----- */
  .footer { padding: 56px 0 24px; margin-top: 48px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* ----- WhatsApp FAB ----- */
  .wa-fab {
    right: 14px;
    bottom: 14px;
    width: 52px;
    height: 52px;
  }
  .wa-fab svg { width: 26px; height: 26px; }
  /* Pas de bulle sur mobile (manque de place + pas de hover) */
  .wa-bubble { display: none; }

  /* ----- Forms ----- */
  .form { grid-template-columns: 1fr !important; gap: 12px; }
  .form .field.full { grid-column: auto; }

  /* ----- Pricing table : scroll horizontal ----- */
  .price-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* ----- Modal excursion ----- */
  .modal { width: 96vw; max-height: 92vh; }
  .modal-body { padding: 20px; gap: 16px; }

  /* ----- Tweaks panel : caché sur mobile (chevauche WA FAB) ----- */
  .twk-panel, .twk-toggle, .twk-fab { display: none !important; }

  /* ----- Carousel ----- */
  .carousel-track { grid-auto-columns: 90%; }

  /* ----- DuoSection ----- */
  .duo { gap: 18px; }

  /* ----- PageHero (bannières des pages internes) ----- */
  .page-hero { padding: 56px 0 40px; }
  .page-hero h1 { font-size: clamp(32px, 8vw, 48px); }
}

/* ===== Très petits écrans (max 380px) ===== */
@media (max-width: 380px) {
  .brand b { font-size: 14px; }
  .lang { display: none; }
}