/* ==========================================================================
   Lock & Gooo — Adaptation responsive
   La maquette fait foi à 1440px ; en dessous, les proportions sont conservées
   et les grilles se réorganisent. À charger en dernier.
   ========================================================================== */

/* ==========================================================================
   ≤ 1360px — on resserre les marges latérales
   ========================================================================== */
@media (max-width: 1360px) {
  :root { --gutter: 64px; }

  .site-header { width: calc(100% - 64px); }
  .nav { padding: 0 36px; }
  .nav__start { gap: 32px; }
  .nav__menu { gap: 20px; }

  .hero__content { width: auto; flex: 1 1 auto; min-width: 0; }
  .hero__visual  { width: 440px; }
  .hero__card    { height: 460px; }

  .about__content { width: auto; flex: 1 1 auto; min-width: 0; }
  .about__visual  { width: 440px; height: 560px; }

  .partners__inner { gap: 40px; }
  .partners__showcase,
  .partners__content { width: auto; flex: 1 1 0; min-width: 0; }
  .partners__showcase { height: 400px; }

  .footer__top { gap: 48px; }
  .footer__brand { width: auto; flex: 1 1 0; min-width: 0; }
}

/* ==========================================================================
   ≤ 1180px — la navigation passe en menu déroulant
   ========================================================================== */
@media (max-width: 1180px) {
  :root { --gutter: 40px; --section-gap: 80px; }

  .site-header { width: calc(100% - 40px); }
  .nav { height: 82px; padding: 0 20px 0 24px; }
  .nav__logo,
  .nav__logo img { width: 112px; height: 52px; }
  .nav__burger { display: inline-flex; }

  /* Panneau de navigation mobile */
  .nav__menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px;
    background: var(--c-white);
    border-radius: var(--r-32);
    box-shadow: 0 18px 48px rgba(18, 26, 38, .14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link {
    flex-direction: row;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: var(--r-16);
    font-size: 17px;
  }
  .nav__link:hover { background: var(--c-bg-ghost); }
  .nav__link::after { width: 8px; height: 8px; border-radius: 50%; }

  .lang-switch { display: none; }
  .nav__end { gap: 12px; }

  main { margin-top: 104px; }
  html { scroll-padding-top: 120px; }

  /* Grilles 4 colonnes → 2 colonnes */
  .how__grid,
  .pricing__grid,
  .activities__grid,
  .videos__grid { grid-template-columns: repeat(2, 1fr); }
  .activities__grid > :nth-child(even) { margin-top: 0; }

  .spots__grid,
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid > :nth-child(3) { display: none; }

  .how__head { gap: 40px; }
  .how__head .section-head { width: auto; flex: 1 1 auto; }

  .videos__socials { flex-wrap: wrap; gap: 16px; }
  .social-pill { width: auto; padding-inline: 28px; }
}

/* ==========================================================================
   ≤ 1024px — empilement des blocs à deux colonnes
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --t-h1: 46px; --t-h1-lh: 58px; --t-h2: 36px; --t-h2-lh: 46px; --t-footer-h: 52px; --t-footer-h-lh: 66px; }

  .hero { padding-top: 148px; }
  .hero::before { height: 100%; border-radius: 0 0 40px 40px; }
  .hero__main { flex-direction: column; align-items: stretch; gap: 48px; }
  .hero__visual { width: 100%; max-width: 520px; margin-inline: auto; }
  .hero__card { height: 440px; }
  .hero__float { right: 12px; top: auto; bottom: -28px; }
  .hero__blob--a { left: auto; right: -120px; }

  .hero__trust { height: auto; flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px; padding: 18px 24px; border-radius: var(--r-32); }
  .hero__trust-sep { display: none; }

  .searchbar { flex-direction: column; align-items: stretch; gap: 16px; border-radius: var(--r-32); padding: 20px; }
  .searchbar__fields { flex-direction: column; align-items: stretch; gap: 14px; }
  .searchbar__field { min-height: 44px; } /* zone de saisie confortable au doigt */
  .searchbar__sep { width: 100%; height: 1px; }
  .searchbar .btn { width: 100%; }

  .about__inner { flex-direction: column; }
  .about__visual { width: 100%; max-width: 503px; height: 520px; }
  .about__visual-side { left: 50%; transform: translateX(-50%); }
  .about__wordmark { left: auto; right: 40px; }

  /* ⚠️ Ces conteneurs passent de « ligne » à « colonne » : il faut neutraliser les
     `flex: 1 1 <basis>` prévus pour l'axe horizontal, sinon le `flex-basis` est
     réinterprété comme une HAUTEUR (showcase partenaires réduit à 0px). */
  .partners__inner { flex-direction: column; }
  .partners__showcase {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 380px;
  }
  .partners__content { flex: 0 0 auto; width: 100%; }

  .contact__inner { flex-direction: column; align-items: stretch; }
  .contact__divider { display: none; }
  .contact__form-col { flex: 0 0 auto; }
  .contact__aside { width: 100%; }

  .faq__inner { flex-direction: column; }
  .faq__list { flex: 0 0 auto; }
  .faq__visual { width: 100%; height: 340px; }

  .footer__top { flex-direction: column; gap: 48px; }
  .footer__brand { gap: 40px; }
  .footer__nav { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 40px; }
  .footer__nav-group { flex: 1 1 220px; }
  .footer__logo { width: 100%; max-width: 380px; }
  .footer__card { position: static; width: 100%; max-width: 380px; margin-top: 40px; }
  .footer__contact-list a { font-size: 24px; }
}

/* ==========================================================================
   ≤ 767px — mobile
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --section-gap: 64px;
    --t-h1: 36px; --t-h1-lh: 45px;
    --t-h2: 28px; --t-h2-lh: 36px;
    --t-h3: 19px; --t-h3-lh: 25px;
    --t-footer-h: 40px; --t-footer-h-lh: 52px;
    --t-accordion: 17px; --t-accordion-lh: 24px;
    --t-price: 32px;
  }

  .site-header { top: 16px; width: calc(100% - 24px); }
  .site-header.is-scrolled { top: 8px; }
  .nav { height: 72px; padding: 0 14px 0 18px; }
  .nav__logo, .nav__logo img { width: 92px; height: 42px; }
  .nav__end .btn { height: 40px; padding: 0 18px; font-size: 13px; }

  main { margin-top: 72px; }
  html { scroll-padding-top: 100px; }

  .hero { padding-top: 116px; padding-bottom: 40px; }
  .hero__card { height: 380px; border-radius: var(--r-32); padding: 18px; }
  .hero__float { width: 92px; height: 74px; right: 8px; }

  /* Toutes les grilles passent sur une colonne */
  .how__grid,
  .pricing__grid,
  .spots__grid,
  .activities__grid,
  .reviews__grid,
  .videos__grid { grid-template-columns: 1fr; gap: 20px; }
  .reviews__grid > :nth-child(3) { display: flex; }

  .how__head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .reviews__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .reviews__head .section-head { width: auto; }

  .section--offers,
  .section--contact { padding: 56px 0; }
  .section--reviews { padding: 48px 0; }
  .partners { padding: 56px 16px; }
  .partners__showcase { min-height: 320px; }
  .offers__stack { gap: 56px; }

  .contact__card { padding: 24px; border-radius: var(--r-32); }
  .contact__row { flex-direction: column; gap: 20px; }
  .contact__aside { min-height: 0; gap: 36px; padding: 24px 16px; }

  .about__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .about__actions .btn { width: 100%; }
  .about__visual { height: 420px; border-radius: var(--r-32); }
  .about__wordmark { width: 120px; right: 20px; top: 40px; }
  .about__seal { width: 40px; height: 42px; top: 90px; left: 24px; }

  .info-box { flex-direction: column; gap: 12px; }

  .faq-item { padding: 20px; }
  .faq-item__answer { padding: 18px 0 0 0; }

  .spot-card { padding: 18px; border-radius: var(--r-32); }
  .spot-card__meta { max-width: none; }
  .video-card { height: 420px; }
  .activity-card { height: 340px; }

  .footer__nav { flex-direction: column; gap: 32px; }
  .footer__social { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer__contact-list a { font-size: 20px; }
  .site-footer { padding: 56px 0; }
  .site-footer__lines, .site-footer__glow { display: none; }

  .price-table th,
  .price-table td { padding: 14px 16px; font-size: 14px; white-space: nowrap; }
}

/* ==========================================================================
   ≤ 420px — très petits écrans
   ========================================================================== */
@media (max-width: 420px) {
  :root { --gutter: 18px; --t-h1: 32px; --t-h1-lh: 40px; }

  .nav__end .btn span { display: none; }
  .nav__end .btn { padding: 0 14px; }
  .hero__chips { gap: 6px; }
  .hero__chip { padding: 6px 12px; }
  .social-pill { width: 100%; font-size: 16px; }
}

/* ==========================================================================
   Écrans tactiles — agrandissement des zones de tap
   Les petits éléments de la maquette (points du carrousel 9px, liens de
   contact) restent visuellement identiques : seule la surface cliquable est
   étendue par un pseudo-élément transparent, pour atteindre ~44px.
   ========================================================================== */
@media (pointer: coarse) {
  .dots__item { position: relative; }
  .dots__item::before {
    content: "";
    position: absolute;
    inset: -16px;
  }

  .contact__info a,
  .footer__contact-list a,
  .spot-card__meta a { position: relative; }
  .contact__info a::after,
  .footer__contact-list a::after {
    content: "";
    position: absolute;
    inset: -12px -6px;
  }

  .footer__social-links a { position: relative; }
  .footer__social-links a::after {
    content: "";
    position: absolute;
    inset: -4px;
  }

  /* Le survol n'existe pas au doigt : on neutralise les effets de lévitation
     qui restent « collés » après un tap. */
  .btn:hover,
  .step-card:hover,
  .price-card:hover,
  .spot-card:hover,
  .review-card:hover,
  .social-pill:hover,
  .rating-pill:hover,
  .partners__logo:hover { transform: none; }
}

/* ==========================================================================
   Impression
   ========================================================================== */
@media print {
  .site-header, .hero__blob, .videos__socials, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  .section--offers, .section--reviews, .section--contact, .site-footer { background: #fff !important; color: #000 !important; }
}