/* =====================================================================
   PARIS VIP TRIP — CORRECTIFS MOBILE & RESPONSIVE v2
   À charger APRÈS pvt-extras.css dans le <head> de index.html :
   <link rel="stylesheet" href="pvt-mobile-fix.css">
   ===================================================================== */


/* ══════════════════════════════════════════════════════════════════════
   0. ANTI-SCROLL HORIZONTAL — protection globale renforcée
      C'est la cause principale du "partie droite coupée" sur iPhone
   ══════════════════════════════════════════════════════════════════════ */
html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
}

/* Tous les enfants directs de section doivent rester dans la page */
*,
*::before,
*::after {
  box-sizing: border-box;
  max-width: 100%;
}

/* Images et médias toujours dans leur conteneur */
img, video, canvas, svg, iframe {
  max-width: 100%;
  display: block;
}

/* Empêcher les mots très longs de déborder */
p, h1, h2, h3, h4, h5, h6, li, td, th, label, span {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ── EXCEPTION : étiquettes pill (monuments, excursions, puces) ─────────
   word-break: break-word + max-width:100% cassait border-radius 999px → cercle géant.
   !important obligatoire pour écraser le * global et le label global.    */
.choix-monument,
.choix-excursion {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.choix-monument label,
.choix-excursion label,
.puce,
.circuit-tab,
.badge,
.tag {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

/* Flex et grid : les enfants ne gonflent pas hors du conteneur */
/* NOTE : header est EXCLU volontairement — overflow-x:hidden sur un element sticky
   crée un nouveau scroll-container et coupe les menus position:absolute (bug mobile nav) */
.wrap,
section,
footer {
  overflow-x: clip;
}


/* ══════════════════════════════════════════════════════════════════════
   1. CANVAS PARTICULES — ne doit pas dépasser la largeur d'écran
   ══════════════════════════════════════════════════════════════════════ */
#pvtCanvas {
  max-width: 100vw;
  width: 100% !important;
  left: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   2. CORRECTIF iOS — empêche le zoom automatique sur les champs
   ══════════════════════════════════════════════════════════════════════ */
input,
select,
textarea {
  font-size: 16px !important;
  max-width: 100%;
}


/* ══════════════════════════════════════════════════════════════════════
   3. ZONES TACTILES — minimum 44px sur tous les éléments cliquables
   ══════════════════════════════════════════════════════════════════════ */
.btn {
  min-height: 44px;
}
.btn-petit {
  min-height: 40px;
  padding: 10px 18px;
}
.puce {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.lang-trigger {
  min-height: 36px;
}
nav.principal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}


/* ══════════════════════════════════════════════════════════════════════
   4. HERO SECTION — correctifs iPhone
   ══════════════════════════════════════════════════════════════════════ */
.hero {
  overflow: hidden;
  width: 100%;
}
.hero-grille {
  width: 100%;
  box-sizing: border-box;
}

/* Le sous-titre hero : max-width en ch peut dépasser sur petit écran */
.hero-texte .sous {
  max-width: 100%;
}

@media (max-width: 680px) {
  .hero-grille {
    padding-top: 86px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 52px;
    gap: 28px;
  }
  .hero-chiffres {
    gap: 16px;
    padding-top: 18px;
  }
  .chiffre b {
    font-size: 1.35rem;
  }
  .chiffre span {
    font-size: .76rem;
  }
  /* CTA hero en colonne pleine largeur */
  .hero-cta {
    flex-direction: column;
    gap: 10px;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  /* Puces de service scrollables horizontalement plutôt que cassées */
  .hero-puces {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-puces::-webkit-scrollbar { display: none }
  .puce { white-space: nowrap; flex-shrink: 0 }
}

@media (max-width: 480px) {
  .hero-chiffres {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .hero-grille {
    padding-top: 80px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   5. NAVIGATION — header sticky qui ne déborde pas
      CORRECTION PRINCIPALE : header coupé sur iPhone visible sur screenshot
   ══════════════════════════════════════════════════════════════════════ */
header.top {
  width: 100%;
  max-width: 100vw;
  /* PAS de overflow:hidden ici — ça couperait le menu déroulant langue */
}
.topbar {
  width: 100%;
  box-sizing: border-box;
  /* overflow:visible pour que le lang-menu position:absolute soit visible */
}
nav.principal {
  width: 100%;
  box-sizing: border-box;
}
nav.principal.ouvert {
  max-width: 100vw;
  left: 0;
  right: 0;
}
.entete-droite {
  flex-shrink: 0;
  min-width: 0;
}

/* ─── MOBILE ≤ 680px : masquer les éléments secondaires ─────────────── */
@media (max-width: 680px) {
  .topbar {
    padding: 10px 14px;
    gap: 8px;
  }

  /* Masquer les boutons d'accès (🚗 🔒) — libère de la place */
  .acces {
    display: none !important;
  }

  /* Dropdown langue mobile : menu s'ouvre vers le bas, bien visible */
  .lang-trigger {
    padding: 5px 9px;
    font-size: .78rem;
  }
  .lang-menu {
    right: 0;
    min-width: 140px;
  }

  /* Bouton Espace client / connexion compact */
  .entete-droite .btn-petit {
    padding: 8px 12px;
    font-size: .8rem;
  }
}

/* ─── MOBILE ≤ 420px : encore plus compact ───────────────────────────── */
@media (max-width: 420px) {
  .topbar {
    padding: 8px 12px;
    gap: 6px;
  }
  .logo svg { width: 34px; height: 34px }
  .logo .nom { font-size: .98rem }
  .logo .nom small { display: none }
  .entete-droite .btn-petit {
    padding: 7px 10px;
    font-size: .77rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   6. TYPOGRAPHIE FLUIDE
   ══════════════════════════════════════════════════════════════════════ */
h1 { font-size: clamp(1.75rem, 4.5vw, 3.4rem) }
h2, .titre-section { font-size: clamp(1.4rem, 3vw, 2.2rem) }
h3 { font-size: clamp(1.05rem, 2vw, 1.5rem) }
.sous-titre, .titre p { font-size: clamp(.88rem, 1.5vw, 1.05rem) }
/* Hero conserve son propre clamp */
.hero-texte h1 { font-size: clamp(1.9rem, 4.6vw, 3.4rem) }


/* ══════════════════════════════════════════════════════════════════════
   7. BREAKPOINT 768px — iPad portrait (manquait)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  section { padding: 52px 0 }

  /* Formulaire de réservation */
  .carte-devis { padding: 20px }
  .resa-corps, .bon-corps { padding: 20px }

  /* Blocs prestation adaptatifs : 2 → 1 colonne */
  .bloc-prestation.actif { grid-template-columns: 1fr }

  /* Services 3 → 2 colonnes */
  .services { grid-template-columns: 1fr 1fr }

  /* Avis 2 → 1 colonne */
  .avis { grid-template-columns: 1fr }

  /* Étapes 2 → 1 */
  .etapes { grid-template-columns: 1fr 1fr }

  /* Galerie 3 → 2 */
  .galerie { grid-template-columns: 1fr 1fr }

  /* Pied de page */
  .pied-grille { grid-template-columns: 1fr 1fr }
}


/* ══════════════════════════════════════════════════════════════════════
   8. CARTE LEAFLET — hauteur et layout mobile
   ══════════════════════════════════════════════════════════════════════ */
#pvtMap {
  width: 100%;
  min-width: 0;
}

@media (max-width: 860px) {
  /* La colonne 340px du panneau passe en colonne unique */
  .carte-wrap {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
  }
  #pvtMap {
    height: 320px;
    border-radius: 14px;
  }
  .circuit-panneau {
    border-radius: 14px;
    padding: 16px;
  }
  /* Sur mobile : liste pleine hauteur, pas de max-height arbitraire */
  ul.circuit-liste,
  #circuitListe {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Items de circuit — zones tactiles 48px minimum */
  ul.circuit-liste > li,
  #circuitListe > li,
  .circuit-item {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 2px solid #DCE4F2 !important;
    border-radius: 12px !important;
    min-height: 48px !important;
    background: #ffffff !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    color: #0E1B33 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .circuit-item:hover,
  .circuit-item:active {
    border-color: #0B2D7A !important;
    background: #EEF3FC !important;
  }
  .circuit-item.selec {
    border-color: #0B2D7A !important;
    background: #EEF3FC !important;
  }
  .circuit-item .ic { font-size: 1.3rem !important; flex: none !important; }
}

@media (max-width: 480px) {
  #pvtMap { height: 240px; border-radius: 10px }
}


/* ══════════════════════════════════════════════════════════════════════
   9. VISITES VIRTUELLES — grille responsive
   ══════════════════════════════════════════════════════════════════════ */
.visites-grille {
  padding: 0 24px;
}

@media (max-width: 900px) {
  .visites-grille {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 560px) {
  .visites-grille {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
    gap: 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   10. LIGHTBOX — optimisée iPhone
   ══════════════════════════════════════════════════════════════════════ */
#pvtLightbox {
  padding: 12px;
  box-sizing: border-box;
}

@media (max-width: 680px) {
  #pvtLightbox .lb-inner {
    width: 100%;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 14px;
    padding: 14px;
    overflow-y: auto;
    box-sizing: border-box;
  }
  #pvtLightbox .lb-photo {
    height: 200px;
    border-radius: 10px;
  }
  #pvtLightbox .lb-nav {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  #pvtLightbox .lb-titre { font-size: 1rem }
  #pvtLightbox .lb-faits { font-size: .8rem }

  /* Indicateur swipe */
  #pvtLightbox::after {
    content: '← swipe →';
    display: block;
    text-align: center;
    font-size: .72rem;
    color: rgba(255,255,255,.5);
    margin-top: 8px;
    font-family: var(--sans);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   11. FORMULAIRE DE RÉSERVATION — mobile
   ══════════════════════════════════════════════════════════════════════ */
.resa-carte,
.resa-corps,
.grille2 {
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

@media (max-width: 680px) {
  .resa-carte { border-radius: 14px }
  .resa-entete { padding: 16px 18px }
  .grille2 { grid-template-columns: 1fr }
  .grille2 .large { grid-column: auto }

  .champ input,
  .champ select,
  .champ textarea {
    padding: 14px;
    border-radius: 10px;
  }

  /* Suggestions d'adresse : largeur limitée */
  .suggestions {
    max-width: calc(100vw - 32px);
    left: 0 !important;
    right: 0 !important;
  }

  /* Bouton réserver pleine largeur */
  #btnReserver,
  form .btn-rouge[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   12. SERVICES — cartes sur mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  .services {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
  }
  .etapes {
    grid-template-columns: 1fr !important;
    padding: 0 16px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   13. GALERIE — padding réduit sur mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
  .galerie {
    grid-template-columns: 1fr 1fr !important;
    padding-inline: 12px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   14. FOOTER — 1 colonne sur mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .pied-grille {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .pied-bas {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   15. BOUTON WHATSAPP — position correcte safe area iOS
   ══════════════════════════════════════════════════════════════════════ */
.wa-float,
a[href*="wa.me"],
a[href*="whatsapp"] {
  bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  right: 16px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   16. SAFE AREA iOS (encoche, Dynamic Island, barre home)
   ══════════════════════════════════════════════════════════════════════ */
@supports (padding: env(safe-area-inset-bottom)) {
  header.top {
    padding-top: env(safe-area-inset-top, 0);
  }
  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   18. VÉHICULES — images optimisées sur mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Forcer 1 colonne pour les cartes véhicules */
  .vehicules {
    grid-template-columns: 1fr !important;
  }
  /* Limiter la hauteur de l'image dans chaque carte véhicule */
  .veh .ph {
    aspect-ratio: 16/6 !important;
    max-height: 150px !important;
    overflow: hidden !important;
  }
  .veh .ph img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
  }
}

@media (max-width: 900px) {
  /* Sur tablette : 2 colonnes mais images moins hautes */
  .veh .ph {
    aspect-ratio: 16/7 !important;
    max-height: 180px !important;
    overflow: hidden !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   19. BOUTONS EXCURSION — lisibles sur mobile
   ══════════════════════════════════════════════════════════════════════ */
.choix-excursion {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choix-excursion label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--bord, #DCE4F2);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  cursor: pointer;
  background: var(--blanc, #fff);
  word-break: normal;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .choix-excursion {
    gap: 6px;
  }
  .choix-excursion label {
    font-size: .8rem;
    padding: 7px 11px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   17. MIN-WIDTH: 0 — empêche les éléments de déborder dans flex/grid
       C'est la règle la plus importante contre le scroll horizontal
   ══════════════════════════════════════════════════════════════════════ */
.wrap > *,
section > *,
.services > *,
.etapes > *,
.avis > *,
.galerie > *,
.carte-wrap > *,
.visites-grille > *,
.grille2 > *,
.pied-grille > *,
.atouts > *,
.hero-grille > * {
  min-width: 0;
}


/* ══════════════════════════════════════════════════════════════════════
   20. FORMULAIRE — ergonomie mobile
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Champs plus grands et plus aérés */
  .champ label {
    font-size: .9rem !important;
    margin-bottom: 8px !important;
  }
  .champ input,
  .champ select,
  .champ textarea {
    padding: 14px 14px !important;
    font-size: 16px !important; /* évite le zoom iOS */
    border-radius: 12px !important;
  }
  /* Carte formulaire : padding réduit pour plus de place utile */
  .resa-carte {
    border-radius: 16px !important;
    padding: 0 !important;
  }
  .resa-entete {
    padding: 16px 16px 12px !important;
  }
  .resa-corps {
    padding: 0 14px 14px !important;
  }
  /* Grille 2 colonnes → 1 colonne sur mobile */
  .grille2 {
    grid-template-columns: 1fr !important;
  }
  .champ.large,
  .champ {
    grid-column: 1 !important;
  }
  /* Bloc préstation — bords plus doux */
  .bloc-prestation {
    border-radius: 12px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
  /* Bouton de réservation bien visible */
  #btnResa {
    padding: 16px !important;
    font-size: 1.05rem !important;
    border-radius: 12px !important;
  }
  /* Récap tarif — plus compact */
  .recap {
    border-radius: 12px !important;
    padding: 14px !important;
  }
  /* Paiements — wrapping propre */
  .paiements {
    gap: 8px !important;
  }
}

/* ── DROPDOWN LANGUE — responsive ────────────────────────────────────── */
/* Sur tablette ≤820px : le trigger reste visible mais menu réduit */
@media (max-width: 820px) {
  .lang-trigger {
    padding: 5px 10px;
    font-size: .8rem;
  }
}

/* Sur mobile ≤680px : menu bien positionné, pas de débordement */
@media (max-width: 680px) {
  .lang-drop {
    position: relative;
  }
  .lang-menu {
    right: 0;
    left: auto;
    max-height: 60vh;
    overflow-y: auto;
    min-width: 150px;
    /* Eviter que le menu sorte de l'écran à droite */
    max-width: calc(100vw - 28px);
  }
}

/* Sur très petit mobile ≤420px */
@media (max-width: 420px) {
  .lang-trigger {
    padding: 4px 8px;
    font-size: .75rem;
    gap: 4px;
  }
  .lang-menu {
    right: -4px;
  }
}

/* ── CIRCUIT REORDER BUTTONS ──────────────────────────────────────────── */
.circuit-reorder {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 6px;
  vertical-align: middle;
}
.circuit-reorder-btn {
  background: none;
  border: 1px solid var(--bord);
  border-radius: 4px;
  padding: 0 5px;
  font-size: .75rem;
  cursor: pointer;
  line-height: 1.6;
  color: var(--gris);
  transition: background .15s, color .15s;
}
.circuit-reorder-btn:hover:not(:disabled) {
  background: var(--bleu-pale);
  color: var(--bleu);
}
.circuit-reorder-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ══════════════════════════════════════════════════════════════════════
   21. BOUTON "RÉSERVER" DANS LE HEADER — toujours visible sur mobile
   ══════════════════════════════════════════════════════════════════════ */

/* L'entete-droite ne doit pas shrink en dehors de la page */
.entete-droite {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* Sur mobile : rendre le bouton Réserver compact mais toujours visible */
@media (max-width: 680px) {
  .entete-droite {
    gap: 6px;
  }
  /* Le bouton Réserver dans le header : compact et visible */
  .entete-droite > .btn-rouge {
    padding: 8px 12px !important;
    font-size: .78rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  /* lang-drop peut légèrement se comprimer */
  .lang-drop { flex-shrink: 1; }
}

/* Sur très petits écrans : rendre encore plus compact */
@media (max-width: 380px) {
  .entete-droite > .btn-rouge {
    padding: 7px 9px !important;
    font-size: .72rem !important;
  }
  .lang-trigger {
    padding: 4px 7px !important;
    gap: 3px !important;
  }
  /* Masquer le chevron du dropdown sur très petit écran */
  .ld-arr { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   v17 — SÉLECTION MONUMENTS : layout mobile optimisé
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  /* Colonne pleine largeur sur mobile */
  #choixMonuments {
    flex-direction: column;
    gap: 6px;
  }
  #choixMonuments label {
    width: 100%;
    border-radius: 12px;
    padding: 10px 14px;
    justify-content: flex-start;
    white-space: normal;      /* autorise le retour à la ligne */
    min-height: 44px;         /* taille tactile confortable */
  }
  #choixMonuments label span:last-child {
    flex: 1;
    min-width: 0;
    word-break: break-word;
  }
  /* Badge numéro d'ordre : à droite */
  #choixMonuments label .mon-num {
    order: 3;
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    font-size: .72rem;
  }
  /* Zones souhaitées : 2 colonnes sur mobile */
  #choixZones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  #choixZones label {
    width: 100%;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: .8rem;
    white-space: normal;
    word-break: break-word;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   22. COULEUR PERMANENTE BLEUE — burger + lang-trigger toujours blancs
   ══════════════════════════════════════════════════════════════════════ */
.burger {
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
}
.lang-trigger {
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.ld-arr path { stroke: rgba(255,255,255,.8) }
.acces a { color: rgba(255,255,255,.85) !important }
.acces a:hover { background: rgba(255,255,255,.12) !important; color: #fff !important }