/* =============================================================================
   mobile.css — refonte mobile public (≤768px)
   Charge APRÈS style.css dans partials/head.php pour override propre.
   Tokens et palette runtime déjà gérés par head.php (color_primary, etc.).
   ============================================================================= */

:root {
  /* Tokens mobile-spécifiques. Réutilisables côté admin via admin-mobile.css. */
  --touch-min: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-inline: env(safe-area-inset-left, 0px);
  --mobile-gutter: 16px;
  --mobile-radius: 14px;
  --sheet-handle-w: 36px;
  --sheet-handle-h: 4px;
  --bottom-bar-h: 64px;
}

/* =============================================================================
   0. Honeypots anti-spam : éviter overflow horizontal en RTL
   Les inputs .hp utilisent inline style="left:-9999px" qui en RTL étend le
   scrollWidth de ~10000px (vu sur contact.php?lang=ar : scrollWidth=10389).
   Pattern sr-only standard : 1×1px clipped, sans coordonnée négative. Le
   !important neutralise l'inline style hérité. */
.hp {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: auto !important;
  right: auto !important;
}

/* Bouton X du drawer mobile : caché par défaut (desktop), affiché dans le
   @media (max-width: 1100px) plus bas. Évite qu'il apparaisse dans la nav
   horizontale desktop. */
.nav-close { display: none; }

/* =============================================================================
   1. ATOMIQUES : touch-target floor partout
   ============================================================================= */
@media (max-width: 768px) {
  /* Tout élément interactif standalone : 44px minimum. Préserve les .field
     wrappers qui sont déjà 64px et contiennent leur propre input. */
  a:not(.btn):not(.chip):not(.car-link):not(.selector-trigger):not(.footer a):not(.car-fav):not([class*="logo"]):not([href^="#"]),
  .chip,
  .car-link,
  button:not(.btn):not(.nav-burger):not(.car-fav):not(.selector-trigger),
  input[type="checkbox"],
  input[type="radio"] {
    min-height: var(--touch-min);
  }

  /* Checkbox/radio doivent rester petits visuellement mais avoir une zone
     cliquable plus large via le label parent. */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px; height: 22px; min-height: 22px;
    accent-color: var(--orange);
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]),
  .chk {
    min-height: var(--touch-min);
    padding-block: 8px;
    display: inline-flex; align-items: center; gap: 10px;
  }

  /* Chips filtres : passer de 43 → 44+ */
  .chip { min-height: var(--touch-min); padding-block: 10px; }

  /* car-fav (icon-only) : zone tactile 44×44 mais visuel reste compact */
  .car-fav {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Burger menu : 44×44 (était 40×40) */
  .nav-burger {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }

  /* Liens footer : déjà padding 10px 0 dans style.css, on garde mais on garantit
     un min-height visuel. */
  .footer a, .site-footer a { min-height: 36px; align-items: center; display: inline-flex; }
}

/* =============================================================================
   2. NAV : drawer mobile amélioré (slide-in droite avec backdrop)
   ============================================================================= */
@media (max-width: 1100px) {
  /* Clip horizontal : le drawer position:fixed translateX(100%) déborde
     du viewport et provoque scrollWidth > innerWidth sans ce clip. */
  html, body { overflow-x: clip; }

  /* CRITIQUE : retirer backdrop-filter du header en mobile.
     `backdrop-filter` (≠ none) crée un containing block pour TOUS les
     `position: fixed` descendants (spec CSS Filter Effects 2 §4.7). Notre
     drawer .nav-links est enfant direct du <header class="nav"> → quand la
     page est scrollée, le drawer est ancré au top du header (qui scrolle
     avec la page en sticky) au lieu du viewport, donc invisible.
     En mobile l'effet vitre apporte peu : on désactive et on rend le bg
     opaque pour compenser la perte du flou.
     En desktop (>1100px) le drawer est dans le flux normal du header,
     pas en position:fixed → bug ne s'applique pas, on garde l'effet vitre.
     Bonus : dégradé horizontal subtil (orange-pâle → blanc → cream-pâle)
     inspiré scola.ma, qui ajoute de la profondeur sans agressivité. */
  .nav,
  .nav.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(
      to right,
      rgba(255, 240, 230, 0.92),
      rgb(252, 250, 247) 50%,
      rgba(255, 248, 240, 0.92)
    );
  }

  /* Sur mobile, .nav-links devient un drawer fixé hors flow et .nav-cta est
     hidden — le grid 3-col du desktop laisse alors le burger (4ᵉ enfant)
     atterrir dans la colonne 1fr du milieu. Bascule en flex pour que
     [brand] et [burger] s'épinglent aux bords. */
  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  /* Convention : le burger se place côté inline-start (= côté d'apparition
     du drawer). En LTR : burger à gauche, brand à droite. En RTL : burger
     à droite, brand à gauche. Réalisé via `order: -1` sur le burger : le
     flex étant bidi-aware, la direction du document inverse l'axe visuel
     automatiquement. */
  .nav-inner .nav-burger { order: -1; }

  /* Inversion interne du couple logo+texte dans .brand : le logo doit être
     au côté EXTERNE de la brand (collé au bord du viewport), le texte vers
     l'intérieur. La brand étant à droite en LTR, on veut [texte][logo] →
     `flex-direction: row-reverse`. En RTL, brand à gauche → on veut
     [logo][texte] → row-reverse aussi (le bidi du flex en RTL réinverse
     l'axe, donc visuellement on obtient logo à gauche, texte à droite).
     Bilan : row-reverse universel sur mobile, marche LTR + RTL. */
  .brand { flex-direction: row-reverse; gap: 10px; }

  /* Le bloc texte (nom + slogan) doit s'aligner VERS le logo (côté inline-end
     en mobile). `text-align: end` = right en LTR (le logo est à droite),
     left en RTL (le logo est à gauche). Et `align-items: flex-end` sur le
     flex column pour que les enfants soient compactés contre le côté logo. */
  .brand-text-block { align-items: flex-end; }
  .brand-name,
  .brand-slogan { text-align: end; }

  .nav-links {
    position: fixed;
    top: 0;
    /* Orientation : drawer s'ouvre depuis le côté inline-start.
       En LTR (fr/en/es) : `inset-inline-start: 0` = collé à gauche → drawer
       slide-in depuis la GAUCHE.
       En RTL (ar) : `inset-inline-start` = collé à droite → drawer
       slide-in depuis la DROITE.
       Inversion explicite par rapport au burger (qui reste dans la nav-inner
       à l'autre extrémité), choix produit. */
    inset-inline-start: 0;
    width: min(86vw, 360px);
    height: 100vh;
    height: 100dvh;
    /* Drawer en thème sombre : fond ink (navy) + texte clair, accord avec
       les surfaces sombres du site (footer, .rsv-aside). */
    background: var(--ink);
    color: #fff;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: calc(var(--safe-top) + 76px) 20px calc(var(--safe-bottom) + 24px);
    /* Au repos en LTR : translaté de -100% (hors écran à gauche).
       Override en RTL : +100% (hors écran à droite). */
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.2,.7,.2,1);
    /* Ombre projetée du côté opposé au bord d'attache. LTR (drawer à
       gauche) : ombre vers la droite (+x). RTL : ombre vers la gauche (-x). */
    box-shadow: 16px 0 40px rgba(0, 0, 0, .35);
    z-index: 60;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[dir="rtl"] .nav-links {
    transform: translateX(100%);
    box-shadow: -16px 0 40px rgba(0, 0, 0, .35);
  }
  .nav-links.open,
  html[dir="rtl"] .nav-links.open { transform: translateX(0); }

  /* Backdrop quand drawer ouvert.
     z-index 40 < .nav (sticky, z:50) : .nav crée un stacking context qui
     plafonne le drawer (z:60 interne) à z:50 en absolu. Si le backdrop est
     >= 50, il passe AU-DESSUS du drawer et intercepte tous les clics → liens
     du menu inutilisables. Le drawer reste cliquable, le header aussi (les
     deux au-dessus du voile), seul le contenu de page est assombri.
     Couleur : noir 50% au lieu de --ink-rgb 42% — plus lisible sur fond cream
     (l'ink est un bleu marine 16,40,67 qui donne un voile gris-bleu peu
     contrasté ; noir donne un dim universel, clair en LTR comme RTL). */
  body.nav-open::before {
    content: "";
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 40;
    backdrop-filter: blur(2px);
  }
  /* Geler le scroll de la page sous le drawer.
     `body { overflow: hidden }` SEUL ne suffit pas sur iOS Safari : un swipe
     dans le drawer (qui a son propre `overflow-y: auto` pour les viewports
     courts où le contenu déborde, ex. landscape) "passe à travers" et fait
     scroller `<html>` derrière. Verrouiller html ET body élimine ce
     scroll-passthrough sur tous les browsers. */
  body.nav-open { overflow: hidden; }
  html.nav-open { overflow: hidden; }

  /* Quand drawer ouvert : on cache le burger pour éviter le doublon visuel
     avec le bouton X dédié (les deux dessinent un X superposé en haut-droite).
     Le X dans le drawer est désormais le seul affordance de fermeture (en plus
     du tap-outside et de la touche Échap). */
  body.nav-open .nav-burger { visibility: hidden; }

  /* Bouton X visible en haut-droite (haut-gauche en RTL) du drawer. */
  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset-inline-end: 12px;
    top: calc(var(--safe-top) + 18px);
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: #fff;
    border-radius: 999px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-close:hover,
  .nav-close:focus-visible { background: rgba(255,255,255,.12); outline: none; }

  /* Items dans le drawer : plus aérés, séparateurs subtils sur fond sombre */
  .nav-links > li,
  .nav-links > a {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-links > li:last-of-type,
  .nav-links > a:last-of-type { border-bottom: 0; }
  .nav-links a {
    display: flex; align-items: center;
    padding: 14px 4px;
    font-size: 17px; font-weight: 600;
    color: #fff;
    min-height: var(--touch-min);
  }
  .nav-links a:hover { color: var(--orange); background: transparent; }

  /* Sélecteurs currency / langue dans drawer (thème sombre).
     Specificity alignée sur style.css:2703 qui utilise `.nav-links.open
     .selector-mobile` (3 classes) — sinon ses styles clairs (var(--surface),
     var(--ink)) gagnent et la pill reste blanche sur fond navy. */
  .nav-links.open .selector-mobile {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
  }
  .nav-links.open .selector-mobile-label {
    color: rgba(255,255,255,.7);
  }
  .nav-links.open .selector-mobile .selector-trigger {
    color: #fff;
    background: transparent;
  }
  .nav-links.open .selector-mobile .selector-trigger:hover {
    background: rgba(255,255,255,.08);
  }

  /* Le menu déroulant des selectors devient inline dans le drawer (était
     position:absolute avec box-shadow lourd qui flottait par-dessus le
     contenu). Plus calme visuellement et reste contenu. */
  .nav-links.open .selector-mobile .selector-menu {
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12);
    margin-top: 6px;
    padding: 4px;
    width: 100%;
    min-width: 0;
    max-height: 220px;
    overflow-y: auto;
  }
  .nav-links.open .selector-mobile .selector-menu li {
    font-size: 14px; padding: 10px 10px;
    color: #fff;
  }
  .nav-links.open .selector-mobile .selector-menu li:hover { background: rgba(255,255,255,.08); }
  .nav-links.open .selector-mobile .selector-menu li[aria-selected="true"] {
    background: rgba(255,255,255,.14);
    color: #fff;
  }
  .nav-links.open .selector-mobile .selector-menu .opt-name { color: rgba(255,255,255,.65); }
  .nav-links.open .selector-mobile .selector-menu .opt-code {
    background: rgba(255,255,255,.10);
    color: #fff;
  }

  /* Toggles segmented control (style inspiré scola.ma) — applique aux toggles
     devise et langue dans le drawer. Pills accolées dans un container pill.
     Active = gradient orange + texte blanc, inactive = transparent + texte
     gris clair. Tous les segments partagent le même look (ne pas dupliquer). */
  .nav-links.open .lang-toggle,
  .nav-links.open .currency-toggle {
    margin-top: 8px;
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .nav-links.open .currency-toggle { margin-top: 16px; }
  .nav-links.open .lang-toggle-label,
  .nav-links.open .currency-toggle-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    white-space: nowrap;
  }
  .nav-links.open .lang-toggle-options,
  .nav-links.open .currency-toggle-options {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    padding: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
  }
  .nav-links.open .lang-toggle-opt,
  .nav-links.open .currency-toggle-opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    transition: color .15s, background .15s;
  }
  .nav-links.open .lang-toggle-opt:hover,
  .nav-links.open .currency-toggle-opt:hover { color: #fff; }
  .nav-links.open .lang-toggle-opt.is-active,
  .nav-links.open .currency-toggle-opt.is-active {
    background: linear-gradient(to right, var(--orange), var(--orange-dark, var(--orange)));
    color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }

  /* Bouton "Réserver" topbar : plus compact mobile */
  .nav-cta-mobile,
  .nav .btn-primary {
    padding: 10px 16px;
    font-size: 14px;
  }

  /* Quick win 1 : retrait du bouton "Réserver" du header sur mobile.
     Le burger + le WhatsApp FAB suffisent ; chaque page a son propre CTA.
     Les selectors devise/langue restent visibles à l'intérieur du drawer. */
  .nav .nav-cta { display: none !important; }
}

/* =============================================================================
   2bis. PAGE CONTACT : éviter le débordement texte dans les cards d'adresse
   ============================================================================= */
@media (max-width: 540px) {
  /* Les cards "Téléphone / WhatsApp / Email / Adresse" sont des <a>/<li>
     en display:flex avec un icône fixe (36×36) + un <div> texte. Sans
     min-width:0 sur le wrapper texte, le contenu intrinsèque (email long,
     adresse complète) empêche le shrink → débordement visible (texte
     tronqué qui sort du card). */
  .page-contact ul a > div,
  .page-contact ul li > div {
    min-width: 0;
    flex: 1;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .page-contact ul a,
  .page-contact ul li { overflow: hidden; }
}

/* =============================================================================
   2ter. PAGE RÉSERVATION : forcer 1 colonne sur petits mobiles
   ============================================================================= */
@media (max-width: 480px) {
  /* Sur 390px, 2 colonnes pour DATE/HEURE / lieux laissait 167px par champ
     mais l'input[type=date] natif iOS/Android utilise une UI plus large que
     prévu et coupait visuellement le label "DATE RETOUR *" à droite.
     Stack en 1 colonne sous 480px (en plus du < 380 déjà existant). */
  #rsv-form .form-row-2col,
  .rsv-card .form-row-2col,
  form[data-form="reservation"] .form-row-2col {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =============================================================================
   3. HERO : compactage mobile (titre + form)
   ============================================================================= */
@media (max-width: 640px) {
  /* Hero photo / airbnb / mesh — compacter pour révéler le titre */
  .hero { min-height: auto; }
  .hero-content,
  .hero-airbnb-content,
  .hero-mesh-content {
    padding-top: 24px;
    padding-bottom: 16px;
  }
  /* Titre principal : 36→28 et line-height plus tight */
  .hero-title,
  .hero h1 {
    font-size: clamp(26px, 7.5vw, 36px) !important;
    line-height: 1.06 !important;
    margin-bottom: 8px;
  }
  .hero-lede,
  .hero p {
    font-size: 15px;
    line-height: 1.45;
  }

  /* Booking form hero : pile compact */
  .booking,
  .hero-booking,
  form[data-form="reservation-hero"] {
    padding: 14px;
    gap: 10px !important;
    border-radius: var(--mobile-radius);
  }
  .booking .field {
    padding: 8px 12px;
    min-height: 56px;
  }
  .booking .field-label {
    font-size: 10px;
    margin-bottom: 2px;
  }
  /* Cacher checkboxes optionnelles dans un détail collapsible */
  .booking-foot {
    padding: 8px 0 0;
    gap: 10px;
    font-size: 12px;
  }
  .booking-foot .chk { font-size: 13px; padding-block: 6px; }
}

/* =============================================================================
   4. CARDS véhicule : compact mobile
   ============================================================================= */
@media (max-width: 480px) {
  .car-card {
    padding: 12px;
    border-radius: var(--mobile-radius);
  }
  .car-card .car-photo,
  .car-card img {
    aspect-ratio: 16 / 10;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
  }
  .car-name {
    font-size: 17px;
    font-weight: 700;
  }
  .car-specs {
    font-size: 12px;
    gap: 6px;
  }
  .car-price {
    font-size: 22px;
  }
  .car-card .btn,
  .car-link {
    width: 100%;
    justify-content: center;
  }
}

/* =============================================================================
   5. MODALE RÉSERVATION → bottom-sheet mobile
   ============================================================================= */
@media (max-width: 768px) {
  #rsv-overlay { align-items: flex-end !important; }
  .rsv-modal,
  .rsv-form-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh;
    max-height: 92dvh;
    transform: translateY(100%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1);
    padding-bottom: var(--safe-bottom);
  }
  #rsv-overlay.is-open .rsv-modal,
  #rsv-overlay[data-open="1"] .rsv-modal,
  #rsv-overlay.open .rsv-modal { transform: translateY(0); }

  /* Handle drag visuel en haut */
  .rsv-modal::before {
    content: "";
    display: block;
    width: var(--sheet-handle-w);
    height: var(--sheet-handle-h);
    background: var(--ink-40);
    border-radius: 999px;
    margin: 8px auto 4px;
  }

  /* Body scrollable, footer sticky */
  .rsv-body { padding: 12px 16px 0 !important; max-height: calc(92dvh - 120px); overflow-y: auto; }
  .rsv-foot,
  .rsv-actions {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 12px 16px calc(12px + var(--safe-bottom));
    margin-top: 12px;
  }
  .rsv-foot .btn,
  .rsv-actions .btn { width: 100%; min-height: 48px; }

  /* Titre modale plus compact */
  .rsv-head h2,
  .rsv-modal h2 { font-size: 19px; line-height: 1.2; }
  .rsv-close { width: 40px; height: 40px; }
}

/* =============================================================================
   6. FOOTER : accordéons sans JS via <details>
   - Desktop : toujours ouverts, marker caché, h4-style sur summary
   - Mobile (≤680px) : collapsibles avec marker +/×
   ============================================================================= */
.footer-col { /* <details> */
  border: 0;
}
.footer-col[open] { /* desktop default visuel */ }
.footer-col-title {
  cursor: default;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  margin: 0 0 18px;
  display: block;
}
.footer-col-title::-webkit-details-marker { display: none; }
.footer-col-title::marker { content: ""; }

@media (max-width: 680px) {
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .footer-col {
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .footer-col:first-of-type { border-top: 0; }
  .footer-col-title {
    cursor: pointer;
    user-select: none;
    padding: 16px 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
  }
  .footer-col-title::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    transition: transform .2s;
    color: rgba(255,255,255,.6);
    line-height: 1;
  }
  .footer-col[open] .footer-col-title::after { transform: rotate(45deg); }
  .footer-col-list,
  .footer-col ul {
    margin: 0;
    padding: 0 0 16px;
    list-style: none;
  }
  /* Newsletter en bas, pleine largeur */
  .footer-main { display: block; padding-bottom: 32px; }
  .newsletter { max-width: 100%; margin-bottom: 24px; }
  .news-row { padding: 4px; }
  .news-row .btn { padding: 10px 16px; }
}

/* =============================================================================
   7. WhatsApp FAB : safe-area + ne pas chevaucher sticky CTAs
   ============================================================================= */
@media (max-width: 768px) {
  .wa-fab {
    bottom: max(16px, calc(16px + var(--safe-bottom)));
    inset-inline-end: 16px;
    /* Override style.css @640 qui met min-width: 56px */
    min-width: 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    /* Quick win 2 : transition pour auto-hide quand le footer entre en vue. */
    transition: opacity .2s ease, transform .2s ease;
  }
  .wa-fab > svg { width: 22px; height: 22px; flex-basis: 22px; }
  /* Sur mobile on cache aussi le label "WhatsApp" — l'icône suffit */
  .wa-fab .wa-label { display: none; }
  /* Sur pages avec sticky bottom CTA : décaler FAB plus haut */
  body.page-vehicule .wa-fab,
  body.page-reservation .wa-fab,
  body.has-bottom-bar .wa-fab {
    bottom: calc(var(--bottom-bar-h) + 16px + var(--safe-bottom));
  }
  /* Auto-hide quand le footer (newsletter "S'abonner") est visible :
     évite la collision FAB ↔ bouton newsletter / liens footer. */
  body.footer-visible .wa-fab {
    opacity: 0;
    transform: translateY(8px) scale(.9);
    pointer-events: none;
  }
  /* Auto-hide quand le drawer mobile est ouvert : le FAB flottait au-dessus
     du panel et masquait le bouton de fermeture / l'item "Réserver" en bas
     du menu. Vu sur audit mobile 2026-05-11. */
  body.nav-open .wa-fab {
    opacity: 0;
    pointer-events: none;
  }
}

/* =============================================================================
   7bis. Carte véhicule (.car-card) : version compacte mobile
   Avant : ~500px par carte → 12 cartes = 6000px de scroll.
   Après  : ~330px par carte → 12 cartes = ~4000px (-33%).
   - image en 16:9 plus basse, padding réduit
   - specs en 1 ligne d'icônes serrées
   - foot : prix à gauche, 1 seul CTA "Réserver" (le tap ouvre la modale ;
     le clic sur la photo va vers la fiche détaillée)
   ============================================================================= */
@media (max-width: 768px) {
  .car-card .car-media { aspect-ratio: 16 / 10; }
  .car-card .car-body { padding: 14px 16px 16px; gap: 10px; }
  .car-card .car-name { font-size: 17px; }
  .car-card .car-sub { font-size: 12px; }
  .car-card .car-specs {
    gap: 10px;
    padding: 8px 0;
    font-size: 12px;
  }
  .car-card .spec { font-size: 12px; }
  .car-card .car-price-val { font-size: 22px; }
  .car-card .car-price-val sub { font-size: 11px; }
  .car-card .car-price-hint { font-size: 10px; margin-top: 2px; }
  /* Compactage du footer carte (style.css le met déjà en column).
     Dédoublonner : price + Réserver inline sur la même ligne, "Détails"
     comme petit lien en text-button sous l'image. */
  .car-card .car-foot {
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 8px !important;
  }
  .car-card .car-actions {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .car-card .car-link { font-size: 12px; padding: 6px 8px; }
  .car-card .car-book { padding: 8px 12px; font-size: 13px; }
  .car-card .car-book svg { width: 12px; height: 12px; }
  .car-card .car-pill { font-size: 10px; padding: 5px 10px; }
  .car-card .car-fav { width: 36px; height: 36px; top: 10px; right: 10px; }
}

/* =============================================================================
   7ter. Page Contact : compactage des 4 cartes coordonnées sur mobile
   Inline-styles dans le PHP (padding: 18px 20px) → 4×80px = 320px de scroll
   avant même le formulaire. Override mobile : padding compact + gap serré.
   ============================================================================= */
@media (max-width: 768px) {
  .contact-coords-list { gap: 8px !important; }
  .contact-coords-list > li,
  .contact-coords-list > li > a {
    padding: 12px 14px !important;
  }
  .contact-coords-list > li span:first-child,
  .contact-coords-list > li > a span:first-child {
    width: 32px !important;
    height: 32px !important;
  }
  .contact-coords-list > li div div:first-child {
    font-size: 14px;
  }
}

/* =============================================================================
   7quater. Page accueil : allègement mobile
   - Carte Google Maps masquée (déjà accessible sur la page Contact)
   - Témoignages : 1 seul affiché (au lieu d'un carousel de 3)
   - FAQ : 4 questions au lieu de 6 (questions 5-6 hidden sur mobile)
   Gain estimé : ~1 800 px en moins sur la home (~25% du total).
   ============================================================================= */
@media (max-width: 768px) {
  body.page-home .agence-map,
  body.page-home .locate-map { display: none !important; }
  body.page-home .agence-tgrid > *:nth-child(n+2) { display: none !important; }
  body.page-home .faq-list .faq-item:nth-child(n+5) { display: none !important; }
}

/* =============================================================================
   8. STATS et grids 4-col : 2-col mobile au lieu de 4-col écrasé
   ============================================================================= */
@media (max-width: 480px) {
  .stats,
  .stats-grid,
  .about-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  .stat-num,
  .about-stat-num,
  .stats > div > strong,
  .stats-num {
    font-size: 28px;
  }
  .stat-label,
  .about-stat-label,
  .stats > div > span {
    font-size: 12px;
  }
}

/* =============================================================================
   9. Forms : labels jamais blancs sur fond clair (correction P0)
   ============================================================================= */
@media (max-width: 768px) {
  /* Si la field est dans un container clair, force ink. La règle airbnb/photo
     hero a son propre <style> inline avec color:white, on l'override ici. */
  .booking:not(.booking--dark) .field-label,
  form:not(.form--dark) .field-label {
    color: var(--ink-60);
  }
  /* Inversement, si on est sur un fond sombre/photo : garder blanc lisible */
  .hero--photo .booking .field-label,
  .hero--airbnb .booking .field-label,
  .hero--dark .booking .field-label {
    color: var(--ink); /* sur surface blanche du form, ink reste lisible */
  }
}

/* =============================================================================
   10. RTL safety : pas de left/right en absolu sur les nouveaux composants
   ============================================================================= */
html[dir="rtl"] .car-card .btn svg,
html[dir="rtl"] .btn svg:not(.no-flip) {
  transform: scaleX(-1);
}
html[dir="rtl"] .footer-col-title::after { /* + ne se flip pas */ }

/* =============================================================================
   11. Scroll-snap pour rangées scrollables (filtres, gamme, testimonials)
   ============================================================================= */
@media (max-width: 768px) {
  .filters-row,
  .fleet-filters,
  .chip-row {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    gap: 8px;
    padding-inline: var(--mobile-gutter);
    margin-inline: calc(var(--mobile-gutter) * -1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters-row::-webkit-scrollbar,
  .fleet-filters::-webkit-scrollbar,
  .chip-row::-webkit-scrollbar { display: none; }
  .filters-row .chip,
  .fleet-filters .chip,
  .chip-row .chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Sous 480px : `fleet-filters` passe en wrap multi-lignes plutot que scroll
   horizontal. Le scroll-x sans indicateur visuel cache des chips ("Premium"
   coupé hors viewport sur la home → mobile-01 audit 2026-05-11). Wrap est
   plus accessible : tous les chips sont visibles, accessibles au tap. */
@media (max-width: 480px) {
  .fleet-filters {
    overflow-x: visible;
    flex-wrap: wrap;
    scroll-snap-type: none;
    padding-inline: 0;
    margin-inline: 0;
    row-gap: 8px;
    justify-content: center;
  }
  .fleet-filters .chip {
    scroll-snap-align: none;
  }
}