/* ==========================================================================
   Stash & Go — 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
   ========================================================================== */
/* ≤ 1439px — la barre n’a plus la place du numéro en clair (il faut 1185px utiles) : la pilule
   téléphone garde l'icône seule (le numéro reste dans son attribut title). */
@media (max-width: 1439px) {
  .nav__tel { padding: 0 10px; }
  .nav__tel-num { display: none; }
}

/* Allemand et polonais : libellés du menu plus longs, la barre n'a jamais la
   place du numéro en clair sur ordinateur — icône seule (le numéro reste dans
   le title, dans le panneau mobile et au pied de page). Entre 1181 et 1360px,
   ES/PL/DE resserrent aussi le menu d'un cran pour tenir sur une ligne. */
html[lang="de"] .nav__tel, html[lang="pl"] .nav__tel { padding: 0 10px; }
html[lang="de"] .nav__tel-num, html[lang="pl"] .nav__tel-num { display: none; }
@media (min-width: 1181px) and (max-width: 1360px) {
  html[lang="es"] .nav__menu, html[lang="pl"] .nav__menu, html[lang="de"] .nav__menu { gap: 14px; }
  html[lang="es"] .nav__link, html[lang="pl"] .nav__link, html[lang="de"] .nav__link,
  html[lang="es"] .nav__gain-btn, html[lang="pl"] .nav__gain-btn, html[lang="de"] .nav__gain-btn { font-size: 15px; }
  html[lang="es"] .nav__end .btn, html[lang="pl"] .nav__end .btn, html[lang="de"] .nav__end .btn { padding: 0 18px; }
}

@media (max-width: 1360px) {
  :root { --gutter: 64px; }

  .site-header { width: calc(100% - 64px); }
  .nav { padding: 0 36px; }
  .nav__start { gap: 24px; } /* 32px avant la pilule téléphone */
  .nav__menu { gap: 18px; }  /* 20px avant la pilule téléphone */
  .nav__end { gap: 12px; }

  .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%; }

  /* La barre ne garde que logo + langue + burger : le CTA Réserver quitte le
     header (trop étroit ≤ 390px) au profit du sticky bas d'écran et d'une
     entrée dans le panneau du menu. */
  .nav__end > .btn--primary { display: none; }
  /* Menu « Gagnez avec » dans le panneau mobile : déroulant posé dans
     le flux, pleine largeur. */
  .nav__gain-btn { width: 100%; justify-content: space-between; }
  .nav__gain-panel { position: static; box-shadow: none; border: 0; padding: 4px 0 0 12px; min-width: 0; }
  .nav__menu-cta { display: block; margin-top: 10px; }
  .nav__menu-cta .btn { display: flex; width: 100%; height: 48px; font-size: 15px; }

  .cta-sticky {
    display: flex;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    margin-inline: auto;
    max-width: 400px;
    height: 52px;
    font-size: 15px;
    z-index: 90;
    box-shadow: 0 12px 32px rgba(68, 76, 237, .35);
  }
  /* Réserve la hauteur du sticky pour que le pied de page reste lisible
     (absent de la page réservation, où le sticky n'est pas rendu). */
  body:has(.cta-sticky) { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  /* Le sticky n'apparaît qu'une fois le hero dépassé : masqué par défaut
     sur les pages à hero (toutes celles qui le rendent), montré par main.js
     via .is-visible. Vieux navigateurs sans :has() : bouton affiché en
     permanence, comportement historique. */
  body:has(.hero) .cta-sticky {
    opacity: 0;
    transform: translateY(calc(100% + 26px));
    pointer-events: none;
    transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
  }
  body:has(.hero) .cta-sticky.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  /* La bulle WhatsApp remonte au-dessus du sticky quand il est visible,
     et redescend avec lui (transition sur bottom). */
  .wa-float { transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), bottom .35s var(--ease-out); }
  body:has(.cta-sticky.is-visible) .wa-float { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

  /* Sélecteur langue/devise : l'espace libéré permet de garder le code langue. */
  .lang-switch { height: 36px; padding: 0 12px; gap: 8px; }
  .nav__end { gap: 12px; }
  /* Téléphone : icône seule dans la barre, numéro en clair dans le panneau. */
  .nav__tel { padding: 0 10px; }
  .nav__tel-num { display: none; }
  .nav__menu-tel { display: block; }
  .nav__menu-tel .nav__link { display: inline-flex; align-items: center; gap: 8px; }

  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 { grid-template-columns: repeat(2, 1fr); }
  /* Piste d'avis : 2 cartes visibles au lieu de 3. */
  .reviews__grid > .review-card { flex-basis: calc((100% - 24px) / 2); }

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

  /* Les cartes tarifaires deviennent plus larges que les 282px de la maquette :
     leur contenu ne remplit plus les 384px imposés et un vide de ~45px se
     creusait sous la liste d'avantages. En hauteur libre, la grille égalise
     les cartes d'une même ligne. */
  .price-card { height: 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; }
  /* ⚠️ Le cadre garde sinon la hauteur de la maquette (479px) alors que la
     carte est réduite à 440 puis 380px : le badge « 2 min », ancré au bas du
     cadre, se retrouvait décroché une centaine de pixels sous la carte. */
  .hero__visual { width: 100%; max-width: 520px; height: auto; 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 li` (classe + type) est plus spécifique que
     `.hero__trust-sep` : sans citer le `li`, les séparateurs restaient
     affichés et pendaient en bout de ligne une fois le bandeau replié. */
  .hero__trust li.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%; }
  /* Panneaux de la barre : pleine largeur sous la barre une fois empilée.
     `left` peut rester posé en ligne par main.js (ouverture en desktop puis
     rétrécissement de la fenêtre) : on le neutralise. */
  .search-pop { left: 8px !important; right: 8px; width: auto; }
  .search-pop--date { flex-direction: column; gap: 16px; }
  .search-cal { width: 100%; }
  .search-cal__jours, .search-cal__grille { grid-template-columns: repeat(7, 1fr); }

  .about__inner { flex-direction: column; }
  /* Ratio de la maquette plutôt qu'une hauteur figée : `object-fit: cover` ne
     recadre alors jamais la photo, qui garde son cadrage d'origine à toutes
     les largeurs (le personnage restait sinon coupé aux pieds ou au front). */
  .about__visual { width: 100%; max-width: 503px; height: auto; aspect-ratio: 503 / 621; }
  .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%; }

  .guide__inner { gap: 40px; }
  .guide__row { gap: 32px; }

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

  /* ⚠️ La hauteur de 414px vient du Figma, où les trois blocs sont côte à côte.
     Empilés, ils la dépassent de 400 à 700px : le grand logo et la carte du bas
     remontaient par-dessus les liens de navigation, illisibles. */
  .footer__top { flex-direction: column; gap: 48px; min-height: 0; }
  .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) {
  .guide__row { grid-template-columns: 1fr; gap: 20px; }
  .guide__row:nth-child(even) .guide__media { order: 0; }
  .guide__facts { grid-template-columns: 1fr 1fr; }
  .guide__card > .btn { min-width: 0; align-self: stretch; }
  :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; }
  /* À 92px de large, « 2 min » se coupait en deux lignes et débordait des 74px
     de haut. Le badge s'ajuste à son contenu et passe en haut à droite : au bas
     de la carte, il recouvrait la dernière puce (« Sites historiques »), la
     carte n'étant plus assez large pour les deux. */
  .hero__float {
    width: auto; min-width: 88px; height: auto;
    padding: 12px 16px;
    top: 14px; bottom: auto; right: 12px;
  }
  .hero__float strong { white-space: nowrap; }

  /* Toutes les grilles passent sur une colonne */
  .how__grid,
  .pricing__grid,
  .spots__grid,
  .activities__grid,
  .videos__grid { grid-template-columns: 1fr; gap: 20px; }

  /* Piste d'avis : une carte par écran (la piste elle-même est définie
     dans sections.css, commune à toutes les largeurs). */
  .reviews__grid { gap: 16px; }
  .reviews__grid > .review-card {
    flex-basis: 100%;
    /* Hauteur libre : à 320px, les avis longs débordaient des 194px de maquette. */
    height: auto;
    min-height: 194px;
  }

  .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; }
  /* Les logos portent une largeur fixe issue de la maquette (Booking 284px,
     Conciergerie 229px) : plus large que la pastille sur un petit écran, ils
     étaient rognés par l'`overflow: hidden` du showcase. */
  .partners__logo { max-width: 100%; padding: 12px 20px; }
  .partners__logo img { max-width: 100%; }
  .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%; }
  /* Pas de hauteur ici non plus : le ratio posé à 1024px doit rester intact. */
  .about__visual { border-radius: var(--r-32); }
  .about__wordmark { width: 120px; right: 20px; top: 40px; }
  .about__seal { width: 40px; height: 42px; top: 90px; left: 24px; }

  /* ⚠️ Même piège que le showcase partenaires : en colonne, le `flex: 1 1 378px`
     de la première colonne est réinterprété comme une HAUTEUR. L'encart de la
     section « À propos » affichait 378px de vide entre ses deux lignes. */
  .info-box { flex-direction: column; gap: 12px; }
  .info-box__col:first-child { flex: 0 0 auto; }

  /* La bordure gauche de 6 px est comptée dans le retrait, comme en desktop. */
  .faq-item { padding: 20px 20px 20px 14px; }
  .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; }

  /* Sans retour à la ligne sur la description, le tableau dépasse la largeur de
     l'écran : les colonnes de prix ne restent atteignables qu'en balayant à
     l'intérieur du tableau, sans le moindre indice visuel — autrement dit les
     tarifs sont invisibles sur mobile. La description se replie, les montants
     restent d'un seul tenant. */
  /* `.price-table thead th` est plus spécifique que `.price-table th` : sans le
     citer, l'en-tête garde ses 32 px de marge intérieure et impose à lui seul
     la largeur du tableau. */
  .price-table th,
  .price-table td,
  .price-table thead th { padding: 14px 12px; font-size: 14px; white-space: nowrap; }
  .price-table th:first-child,
  .price-table td:first-child { white-space: normal; }
}

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

  /* Le libellé « Réserver » est un nœud texte, pas un `<span>` : la règle
     `.nav__end .btn span { display: none }` ne visait rien et le bouton ne se
     resserrait jamais. À 320px, le burger débordait de 10px dans la marge
     intérieure de la barre. On resserre les écarts plutôt que de supprimer le
     libellé, qu'une flèche seule ne remplace pas. */
  .nav__inner { gap: 12px; }
  .nav__end { gap: 8px; }
  .nav__end .btn { padding: 0 14px; }
  .hero__chips { gap: 6px; }
  .hero__chip { padding: 6px 12px; }
  .social-pill { width: 100%; font-size: 16px; }

  /* Dernier resserrement pour que les trois colonnes de tarifs tiennent
     jusqu'à 320 px sans défilement horizontal caché. */
  .price-table th,
  .price-table td,
  .price-table thead th { padding: 12px 8px; font-size: 13px; }

  /* `.btn` est en white-space: nowrap : les libellés longs (« Déposez vos
     bagages dès maintenant ») dépassent alors de l'écran et se font rogner.
     Sous 420 px, ces boutons prennent toute la largeur et se replient. */
  .activities__body .btn,
  .about__actions .btn,
  .partners__content .btn {
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: 12px 20px;
    text-align: center;
    max-width: 100%;
  }
}

/* ==========================================================================
   Écrans tactiles — agrandissement des zones de tap
   Les petits éléments de la maquette (liens de contact) restent visuellement
   identiques : seule la surface cliquable est étendue par un pseudo-élément
   transparent, pour atteindre ~44px. (Les flèches du carrousel d'avis font
   déjà 44px.)
   ========================================================================== */
@media (pointer: coarse) {

  .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; }
}

/* ==========================================================================
   Champs de saisie : jamais moins de 16 px sur mobile / écran tactile
   --------------------------------------------------------------------------
   En dessous de 16 px, Safari iOS ZOOME la page dès qu'un champ prend le
   focus et ne dézoome pas ensuite : le client remplit le tunnel de travers
   (signalé par le client le 2026-09-20 ; les champs étaient à 14 px, la
   valeur de la maquette). Règle unique ici plutôt que champ par champ :
   tout champ ajouté plus tard est couvert. Le bureau garde 14 px.
   On ne touche PAS au viewport (maximum-scale / user-scalable=no) : le zoom
   à deux doigts doit rester possible pour les malvoyants.
   ========================================================================== */
@media (max-width: 1023px), (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }
}

/* ==========================================================================
   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; }
}