/* Villa Zadig — couche responsive commune
   Chargée en dernier sur chaque page : elle adapte la maquette desktop (shared.css + styles de page)
   aux tablettes et aux mobiles. Les !important sont nécessaires pour reprendre la main sur les
   styles écrits directement dans le HTML (attributs style="…").
   Points de rupture : mobile 360–767 px · tablette 768–1023 px · desktop ≥ 1024 px. */

/* ---------- Éléments ajoutés par responsive.js (masqués sur desktop) ---------- */
.vz-burger, .vz-book { display: none; }

/* Rangées flexibles écrites dans le HTML : retour à la ligne plutôt que débordement
   (ex. « Klimatisiert · Voll ausgestattete Küche · WLAN » sur la page d'accueil allemande) */
main [style*="display: flex"], main [style*="display:flex"] { flex-wrap: wrap; row-gap: 8px; }

/* ================================================================
   TABLETTE ET MOBILE (< 1024 px)
   ================================================================ */
@media (max-width: 1023px) {
  html { -webkit-text-size-adjust: 100%; }

  /* ---- En-tête : logo + burger, menu déroulant ---- */
  .site-header {
    flex-wrap: wrap !important; gap: 0 !important;
    padding: 12px 24px !important;
  }
  .site-header .brand-lockup { min-width: 0; min-height: 48px; }
  body .hero .hb-facts:empty { display: none !important; }
  .site-header .logo { height: 64px; }
  .site-header .nav, .site-header .lang-switch { display: none !important; }

  .vz-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: -12px; flex-shrink: 0;
    background: none; border: 0; cursor: pointer; color: var(--ink);
  }
  .vz-burger span, .vz-burger span::before, .vz-burger span::after {
    display: block; width: 24px; height: 1.5px; background: currentColor;
    transition: transform .25s ease, background-color .25s ease;
  }
  .vz-burger span { position: relative; }
  .vz-burger span::before, .vz-burger span::after { content: ""; position: absolute; left: 0; }
  .vz-burger span::before { top: -7px; }
  .vz-burger span::after { top: 7px; }
  .site-header.is-open .vz-burger span { background: transparent; }
  .site-header.is-open .vz-burger span::before { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .vz-burger span::after { transform: translateY(-7px) rotate(-45deg); }

  .site-header.is-open .nav {
    display: flex !important; flex-direction: column; flex-basis: 100%; order: 3;
    gap: 0 !important; margin-top: 12px; border-top: 1px solid var(--line);
    font-size: 14px !important; letter-spacing: .16em !important;
  }
  .site-header.is-open .nav a {
    display: flex; align-items: center; min-height: 52px;
    border-bottom: 1px solid var(--line); white-space: normal;
  }
  .site-header.is-open .lang-switch {
    display: flex !important; position: static !important; order: 4; flex-basis: 100%;
    gap: 0 !important; padding: 8px 0 4px !important; margin: 0 !important; font-size: 13px !important;
  }
  .site-header.is-open .lang-switch a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 48px; min-height: 48px; padding: 0 !important;
  }

  /* ---- Marges latérales 24 px ---- */
  .section, .quote, .cta, .id-card, .site-footer, .lm-row, .tf-details,
  body[data-pdv] .pdv .text, .hero-b, .faq-wrap {
    padding-left: 24px !important; padding-right: 24px !important;
  }

  /* ---- Rythme vertical ---- */
  .section { padding-top: 72px !important; padding-bottom: 72px !important; }
  .quote, .cta { padding-top: 72px !important; padding-bottom: 72px !important; }
  .faq-wrap { padding-top: 56px !important; }

  /* ---- Titres ---- */
  .section h2, .lm-text h2, .vz-act h2, .vz-resto h2 { font-size: 44px !important; }
  .cta h2 { font-size: 52px !important; }
  .quote .q { font-size: 32px !important; }
  .hero h1, .hero .hero-h1 { font-size: 72px !important; }
  .hb-title { font-size: 96px !important; }

  /* ---- Héros ---- */
  .hero { height: 640px !important; }
  .hero .content[style] { padding-left: 24px !important; padding-right: 24px !important; max-width: none !important; }
  body[data-hero="h"] .hero-b { left: 0 !important; right: 0 !important; }
  body[data-hero="h"] .hb-facts { left: 24px !important; right: 24px !important; gap: 32px !important; }
  .hb-actions { flex-wrap: wrap; row-gap: 16px; }

  /* ---- Bandeau « carte d'identité » : 3 colonnes ---- */
  .id-card { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 28px !important; }
  .id-card .cell { padding-left: 0 !important; border-left: none !important; }

  /* ---- Grilles photos / équipements : 2 colonnes ---- */
  .grid-3, .act-grid, .spots, .tf-details { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid-3, .act-grid { gap: 24px !important; }
  main [style*="repeat(6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 32px !important; }
  .act-card { height: 440px; }
  .card .img { height: 320px; }
  .pdv > img { aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: 65% 50% !important; }

  /* ---- Mises en page en deux colonnes inégales : une seule colonne ---- */
  .lm-row { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 28px; padding-top: 56px !important; padding-bottom: 0 !important; }
  .lm-row > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .lm-text p, .lm-note, .lm-list { max-width: 62ch !important; }
  .contact-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 56px !important; }
  .faq-layout { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .faq-toc { position: static !important; }
  .vz-plan .vz-plan-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .vz-plan .vz-plan-map { position: relative !important; top: auto !important; }

  /* ---- Tarifs ---- */
  .pricing-grid { gap: 16px !important; }
  .price-card { padding: 32px 16px !important; }
  .price-card .price { font-size: 56px !important; }
  .price-card .season { font-size: 26px !important; }

  /* ---- Pied de page : 2 colonnes ---- */
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 40px 24px !important; }
  .site-footer .legal { flex-wrap: wrap; gap: 8px 24px; }

  /* ---- Zones tactiles ≥ 48 px ---- */
  .btn, .btn-ghost, .btn-outline, .hb-btn, .hb-link {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-height: 48px; padding-top: 12px !important; padding-bottom: 12px !important;
  }
  .site-footer ul { gap: 0 !important; }
  .site-footer ul li { min-height: 48px; display: flex; align-items: center; }
  .site-footer ul a { display: inline-flex; align-items: center; min-height: 48px; }
  .faq-toc a { min-height: 48px; align-items: center; }
  .faq-body summary { min-height: 56px; }
  .faq-search input { min-height: 48px; }
  .vz-near summary { min-height: 48px; }
  .mail-hero { min-height: 48px; }
  input, textarea, select { font-size: 16px !important; }
  .form-block input { min-height: 48px; }
}

/* ================================================================
   MOBILE (< 768 px) — référence 390 px
   ================================================================ */
@media (max-width: 767px) {
  html, body { font-size: 16px; }

  /* ---- Marges latérales 16 px ---- */
  .site-header, .section, .quote, .cta, .id-card, .site-footer, .lm-row, .tf-details,
  body[data-pdv] .pdv .text, .hero-b, .faq-wrap, .page-hero .content {
    padding-left: 16px !important; padding-right: 16px !important;
  }
  .site-header .logo { height: 58px; }
  .brand-lockup { gap: 12px !important; }
  .brand-place { padding-left: 12px !important; gap: 5px !important; }
  .brand-place .bp-1 { font-size: 24px !important; }
  .brand-place .bp-2 { font-size: 12px !important; letter-spacing: .26em !important; }

  /* ---- Rythme vertical ---- */
  .section { padding-top: 56px !important; padding-bottom: 56px !important; }
  .quote, .cta { padding-top: 56px !important; padding-bottom: 56px !important; }
  .faq-wrap { padding-top: 40px !important; }
  main [style*="margin-bottom: 80px"] { margin-bottom: 40px !important; }
  main [style*="margin-top: 64px"] { margin-top: 40px !important; }
  .lm-row { padding-top: 40px !important; }

  /* ---- Texte courant : 16 px minimum ---- */
  main p:not(.serif), main li, main li span, main li b + span,
  .card .body p, .spot p, .split .text p, .lm-text p, .dist-list .row,
  .contact-info p, .faq-intro, .faq-body details > *:not(summary), .faq-toc a, .faq-none,
  .price-card .week, .price-card .note, .vz-near li span, .vz-star span,
  .site-footer ul, .site-footer .brand div {
    font-size: 16px !important;
  }
  .site-footer .legal { font-size: 11px !important; }
  main p.serif { font-size: 22px !important; }

  /* ---- Titres réduits proportionnellement ---- */
  .section h2, .lm-text h2, .vz-act h2, .vz-resto h2 { font-size: 32px !important; white-space: normal !important; }
  .section h2[style*="font-size: 36px"], .section h2[style*="font-size:36px"] { font-size: 28px !important; }
  .cta h2 { font-size: 36px !important; margin-bottom: 28px !important; }
  .quote .q { font-size: 24px !important; line-height: 1.45 !important; }
  .faq-head h1 { font-size: 32px !important; }
  .faq-h2 { font-size: 28px !important; margin-top: 48px !important; }
  .page-hero h1 { font-size: clamp(34px, 10vw, 44px) !important; }
  .page-hero .sub { font-size: 18px !important; }
  .hero h1, .hero .hero-h1 { font-size: 52px !important; }
  .hero .lede { font-size: 20px !important; }
  .card .body h3, .spot h4 { font-size: 24px !important; }
  .act-card h3 { font-size: 28px !important; }
  .serif[style*="font-size: 28px"] { font-size: 24px !important; }
  main [style*="font-size: clamp(44px"] { font-size: 40px !important; }

  /* ---- Héros (accueil) ---- */
  .hero { height: auto !important; min-height: 560px; }
  .hero > img { position: absolute; inset: 0; }
  body[data-hero="h"] .hero:has(.hero-b) { min-height: min(100svh, 680px); }
  /* Photo d'accueil : cadrée sur le mur à la fresque océan plutôt que sur la fenêtre */
  body[data-hero="h"] .hero:has(.hero-b) > img { object-position: 86% 50%; }
  body[data-hero="h"] .hero-b { bottom: 32px !important; }
  .hb-title { font-size: clamp(52px, 16vw, 64px) !important; line-height: .9 !important; }
  .hb-place { font-size: 26px !important; }
  .hb-lede { font-size: 18px !important; max-width: none !important; }
  body[data-hero="h"][data-esp="bloc"] .hb-lede { font-size: 22px !important; }
  .hb-actions { gap: 12px 24px !important; margin-top: 24px !important; justify-content: flex-start !important; }
  .hero .content[style] { position: relative !important; inset: auto !important; min-height: 520px; padding: 48px 16px !important; justify-content: flex-end !important; }
  .hero .content[style] p { max-width: none !important; }
  .hero .meta { flex-wrap: wrap; justify-content: center; gap: 8px 16px; }

  /* ---- Héros des pages intérieures ---- */
  .page-hero { height: auto !important; min-height: 300px !important; }
  .page-hero .content { position: relative !important; padding-top: 56px !important; padding-bottom: 56px !important; min-height: 300px; }
  .page-hero > img, .page-hero .scrim { position: absolute !important; inset: 0; height: 100% !important; }
  .page-hero h1.crumb, .mh .crumb { white-space: normal !important; font-size: 11px !important; max-width: 100%; }
  .page-hero .crumb { white-space: normal; text-align: center; }

  /* ---- Images : largeur 100 %, ratio conservé ---- */
  .card .img, .split img, main .section img[style*="height"] {
    width: 100% !important; height: auto !important; aspect-ratio: auto !important;
  }
  /* Pièce de vie (accueil) : photo plus haute, recadrée à gauche pour garder le salon et la cuisine */
  .pdv > img { width: 100% !important; height: auto !important; aspect-ratio: 3 / 2 !important; object-fit: cover !important; object-position: 62% 50% !important; }
  .act-card { height: auto !important; aspect-ratio: 4 / 3; }

  /* Photos bord à bord : elles débordent de la marge de 16 px pour toucher les bords de l'écran */
  .card .img, .lm-media, .tf-details figure, .tf-side, .contact-grid figure, .vz-plan-map,
  .lm-who-img, .act-card, main .section div:has(> img:only-child),
  main .section [style*="grid-template-columns"] > img {
    width: calc(100% + 32px) !important; max-width: none !important;
    margin-left: -16px !important; margin-right: -16px !important;
  }

  /* ---- Grilles : une colonne ---- */
  .grid-3, .act-grid, .spots, .tf-details, .pricing-grid, .tf-grid, .lm-list,
  main [style*="grid-template-columns"], main [style*="repeat(6"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .grid-3, .act-grid { gap: 40px !important; }
  main [style*="grid-template-columns"] { gap: 32px !important; }
  .spots { gap: 40px !important; }
  .tf-details { gap: 16px !important; padding-bottom: 56px !important; }
  .lm-list { gap: 8px !important; }
  .lm-list > * { font-size: 14px; }

  /* ---- Rangées flexibles écrites dans le HTML ---- */
  main [style*="display: flex"], main [style*="display:flex"] { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* ---- Tableaux transformés en listes ---- */
  .id-card { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
  .id-card .cell {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 16px; align-items: baseline;
    padding: 14px 0 !important; border-bottom: 1px solid var(--line);
  }
  .id-card .cell:last-child { border-bottom: none; }
  .id-card .cell h6 { grid-row: span 2; margin: 0 !important; }
  .id-card .cell .s { grid-column: 2; font-size: 16px; }

  .dist-list .row, .contact-info .field {
    flex-direction: column; align-items: flex-start !important; gap: 2px; justify-content: flex-start !important;
  }
  .dist-list .row .v { font-size: 18px; }
  .dist-list { max-width: none !important; }
  .vz-resto li { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  .vz-act ul { grid-template-columns: minmax(0, 1fr) !important; }

  /* ---- Tarifs ---- */
  .pricing-grid { gap: 16px !important; }
  .price-card { padding: 32px 20px !important; }
  .price-card .price { font-size: 64px !important; margin-bottom: 6px; }

  /* ---- Contact ---- */
  .form-block { padding: 24px 16px !important; }
  .form-block .row { grid-template-columns: minmax(0, 1fr) !important; }
  .mail-hero { padding: 20px 16px !important; column-gap: 12px !important; }
  .mail-v { font-size: 22px !important; }

  /* ---- Boutons ---- */
  .cta .btn-outline {
    max-width: 100%; padding-left: 20px !important; padding-right: 20px !important;
    letter-spacing: .12em !important; overflow-wrap: anywhere; text-align: center;
  }
  .btn, .btn-ghost, .hb-btn { padding-left: 24px !important; padding-right: 24px !important; text-align: center; }

  /* ---- Pied de page : une colonne ---- */
  .site-footer { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .site-footer .legal { flex-direction: column; letter-spacing: .14em !important; }

  /* ---- Bouton « Réserver » fixé en bas ---- */
  .vz-book {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    min-height: 56px; padding: 0 16px env(safe-area-inset-bottom);
    background: var(--accent, var(--ink)); color: #fefdf9;
    font-size: 13px; letter-spacing: .28em; text-transform: uppercase;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .12);
  }
  body.has-book { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* Petits mobiles (360 px) */
@media (max-width: 380px) {
  .site-header .logo { height: 54px; }
  .brand-place .bp-1 { font-size: 22px !important; }
  .hb-title { font-size: 52px !important; }
}