/* ==========================================================================
   Stash & Go — Tunnel de réservation : adaptations responsives
   Mêmes points de rupture que responsive.css. À charger EN DERNIER.
   ========================================================================== */

/* ---------- Compléments de rendu indépendants de la largeur ---------- */
.bagage__img { display: block; }
.recap__img { max-width: 32px; max-height: 34px; width: auto; height: auto; }
.recap-bagage__img { max-width: 35px; max-height: 40px; width: auto; height: auto; }

/* --------------------------------------------------------------------------
   ≤ 1360 px — la grille cesse d'être figée
   -------------------------------------------------------------------------- */
@media (max-width: 1360px) {
  .resa__panels { flex: 1 1 auto; width: auto; min-width: 0; }
  /* La grille n'est plus figée : titre et chapô reprennent un retour à la ligne
     normal plutôt que de déborder du conteneur. */
  .resa__lead  { width: 100%; max-width: 100%; }
  .resa__title { width: auto;  max-width: 100%; }
  .resa-actions { width: 100%; }
  .carte { width: 100%; }
  .stepper__label { white-space: normal; }
}

/* --------------------------------------------------------------------------
   ≤ 1180 px — en-tête raccourci (82 px), récapitulatif plus étroit
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .resa { padding-top: 156px; }
  .resa__head { width: auto; }
  .recap { position: static; flex: 0 0 340px; width: 340px; }
  .recap__body { padding: 24px; }
  .recap__droite { gap: 20px; }
  .bagage__info { flex: 1 1 auto; width: auto; min-width: 0; }
  .bagage__actions { gap: 32px; }
}

/* --------------------------------------------------------------------------
   ≤ 1180 px — les règles responsive globales ajoutent `main { margin-top }`
   (104 px, puis 72 px en petit mobile) qui dégage déjà l'en-tête fixe : le
   padding de `.resa`, calibré pour un main sans marge (193 px au bureau),
   doublait la compensation et créait ~120 px de vide au-dessus du contenu.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .resa { padding-top: 56px; }
}

/* --------------------------------------------------------------------------
   ≤ 1024 px — le récapitulatif passe sous le panneau
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .resa__grid { flex-direction: column; }
  .resa__panels { width: 100%; }
  .recap { width: 100%; flex: none; max-width: 560px; margin-inline: auto; }
  .resa__cote { width: 100%; flex: none; max-width: 560px; margin-inline: auto; position: static; }
  .resa-card { padding: 28px; border-radius: var(--r-32); }
  .stepper { gap: 8px; }
  .stepper__label { font-size: 14px; line-height: 18px; }
  .confirmation { width: 100%; }
  .confirmation__panel,
  .confirmation__text { width: 100%; }
}

/* --------------------------------------------------------------------------
   ≤ 767 px — mise en page mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .resa { padding-top: 48px; padding-bottom: 72px; }
  .resa__tunnel { gap: 40px; }
  .resa-card { padding: 20px; border-radius: var(--r-24); }

  .stepper { gap: 6px; }
  .stepper__item { gap: 10px; }
  /* Les titres d'étapes restent visibles sur mobile (demande client du
     2026-08-10) : en petit, centrés sous le point, sur deux lignes si
     nécessaire. */
  .stepper__row {
    max-width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
  }
  .stepper__label {
    font-size: 10.5px;
    line-height: 13px;
    text-align: center;
    white-space: normal;
  }
  .stepper__dot { width: 20px; height: 20px; }
  .stepper__dot::after { width: 8px; height: 8px; }

  .resa-field__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .datepills { grid-template-columns: minmax(0, 1fr); }
  .resa-input--time { width: 100%; flex: none; justify-content: flex-start; }
  /* Heure centrée comme les pilules de date (2026-08-25) : le select
     s'étire sur la pilule, ses retraits sont symétriques (45 px de chaque
     côté = icône horloge à gauche, équivalent à droite). */
  .resa-input--time select.resa-input__control {
    padding-right: 45px;
    text-align: center;
    text-align-last: center;
  }
  .resa-grid2 { grid-template-columns: 1fr; gap: 20px; }

  .bagage { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; }
  .bagage__info { width: auto; }
  .bagage__desc { white-space: normal; }
  .bagage__icone { flex: 0 0 54px; width: 54px; height: 54px; }
  .bagage__actions { justify-content: space-between; gap: 16px; }

  .resa-actions { flex-direction: column-reverse; gap: 12px; }
  .resa-actions .btn,
  .resa-actions__next,
  .resa-actions__confirm { width: 100%; }

  .resa-login { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 20px; border-radius: var(--r-24); }

  /* Sur mobile, l'adresse (jusqu'à 4 lignes à 320 px) et les repères de
     proximité ne tiennent plus au-dessus du marqueur « Agadir », posé à
     42 % de la hauteur de la carte : le bloc descend en bas de la carte,
     façon feuille Google Maps, et les faux boutons de zoom (décor,
     aria-hidden) s'effacent pour lui laisser la place. Les repères tiennent
     sur une ligne qui défile latéralement, comme les pilules de date. */
  .carte__haut { top: auto; bottom: 16px; left: 16px; right: 16px; gap: 8px; }
  .carte__controls { display: none; }
  /* Vraie carte (2026-09-14) : le marqueur se place sous le bloc, qui
     remonte donc en haut comme demandé ; la carte, moins haute qu'avec
     l'image (4:5), laisse de la page à faire défiler autour d'elle, le
     glissé d'un doigt dessus déplaçant désormais la carte. */
  .carte--vivante { aspect-ratio: 4 / 5; }
  .carte--vivante .carte__haut { top: 16px; bottom: auto; }
  .carte--vivante .leaflet-bottom.leaflet-right { right: 12px; bottom: 12px; }
  .carte__adresse { padding: 8px 16px; font-size: 12px; line-height: 16px; }
  .carte__proches {
    align-self: stretch;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;        /* place pour l'ombre des pilules, sans la rogner */
    margin: -20px 0;
  }
  .carte__proches::-webkit-scrollbar { display: none; }
  .carte__proche { flex: 0 0 auto; padding: 5px 11px; font-size: 11px; line-height: 16px; }
  .carte__etiquette { height: 36px; padding: 0 14px; font-size: 13px; line-height: 36px; }
  .carte__etiquette::after { bottom: -9px; width: 16px; height: 14px; }

  /* Les trois notes de réassurance (paiement sécurisé, débit en euros,
     données bancaires protégées) disparaissent sur mobile — demande client
     du 2026-08-28. Dans la feuille du récapitulatif elles noyaient le
     total, et à l'étape 3 elles repoussaient « Confirmer ma réservation »
     d'un écran entier. Le bloc reste dans le DOM et sur le bureau ;
     `majChampsCarte()` continue de le montrer/cacher selon le prestataire. */
  .paiement__redirection { display: none; }

  .recap__body { padding: 20px; }
  .recap__droite { gap: 14px; }
  .recap__dates { font-size: 11px; }

  .recap-detail { gap: 24px; }
  .recap-ligne { flex-wrap: wrap; gap: 12px; }
  /* Carte bagage : nom + description empilés à droite de l'icône, la
     quantité reste EN FACE du nom (le wrap la faisait tomber dessous). */
  .recap-bagage { gap: 12px; }
  .recap-bagage__info {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    min-width: 0;
  }
  .recap-bagage__icone { grid-row: 1 / 3; }
  .recap-bagage__desc { line-height: 16px; }
  .recap-dates { height: auto; padding: 16px; }
  .recap-coordonnees { gap: 10px 20px; padding: 12px 16px; }
  .recap-carte__marqueur { font-size: 7px; }

  .confirmation { padding: 6px; }
  .confirmation__hero { padding: 20px; gap: 24px; }
  .confirmation__panel { padding: 16px; border-radius: var(--r-24); }
  .confirmation__title { font-size: 26px; line-height: 34px; }
  .confirmation__text { font-size: 14px; line-height: 21px; }
  .confirmation__corps { padding: 8px; gap: 28px; }
  .confirmation__actions { flex-direction: column; gap: 12px; }
  /* En colonne, le `flex: 1 1 0` du bureau (largeurs égales) s'applique à
     l'axe vertical et écrase la hauteur de 44px des boutons. */
  .confirmation__pdf,
  .confirmation__retour { flex: none; width: 100%; }
  .qr__aide { width: 100%; }
}

/* --------------------------------------------------------------------------
   ≤ 767 px — barre de prix fixe + récapitulatif en feuille  (2026-08-28)

   Sur mobile, le total vivait tout en bas de la page (y ≈ 1 930 px sur un
   iPhone 390 × 844) : le client réglait ses bagages sans jamais voir le prix
   bouger. La barre le colle en bas de l'écran avec le bouton « Continuer » ;
   « Détail » fait remonter le récapitulatif EXISTANT (.resa__cote) en feuille,
   sans le dupliquer — les prix restent donc synchrones tout seuls.

   Active aux étapes 1 et 2 seulement (classe `a-barre` posée par
   reservation.js) : à l'étape 3, le clavier mobile et la case CGV imposent de
   garder « Confirmer ma réservation » dans le flux, juste sous la case.
   -------------------------------------------------------------------------- */
.resa-barre,
.resa-voile,
.resa-cote__fermer { display: none; }

@media (max-width: 767px) {

  /* --- La barre --- */
  /* `--h-barre` est mesurée par reservation.js après chaque rendu : à
     l'étape 3 la barre passe sur deux lignes (« Confirmer ma réservation »
     ne tient pas à côté du prix), et sa hauteur change encore selon la
     langue. Tout ce qui doit rester au-dessus s'y accroche. */
  body.a-barre .resa { padding-bottom: calc(var(--h-barre, 104px) + 16px); }

  body.a-barre .resa-barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* Au-dessus de l'en-tête fixe (z-index 100) : quand la feuille est
       ouverte, le voile doit couvrir la navigation aussi. */
    z-index: 122;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--c-white);
    border-top: 1px solid var(--c-border);
    box-shadow: 0 -6px 24px rgba(32, 36, 115, .10);
  }

  /* `align-items: flex-start` donnait aux trois lignes leur largeur
     max-content : le résumé (« · 2 sacs · 1 jour + 2 heures ») débordait du
     bouton et passait SOUS le CTA « Suivant », sans jamais déclencher son
     ellipse — le `text-overflow` de `.resa-barre__texte` ne peut couper que
     si sa ligne est bornée. `stretch` + `overflow: hidden` rendent au
     bouton le rôle de gabarit ; le texte est déjà aligné à gauche. */
  .resa-barre__detail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding: 4px 2px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
  }
  .resa-barre__total {
    font-family: var(--f-display);
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
    color: var(--c-ink);
    white-space: nowrap;
  }
  .resa-barre__resume {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-family: var(--f-body);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--c-primary);
  }
  /* « Détail » ne se tronque jamais : c'est la commande. Le résumé
     (« · 2 bagages · 1 jour ») cède la place à sa droite. */
  .resa-barre__lien {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--c-primary);
  }
  .resa-barre__texte {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--c-muted);
  }
  /* Troisième ligne : « 28 août 19:00 → 20:00 ». Elle se tronque plutôt
     que de pousser le bouton — c'est un rappel, pas une donnée à saisir. */
  .resa-barre__dates {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--f-body);
    font-size: 11.5px;
    line-height: 15px;
    font-weight: 500;
    color: var(--c-muted);
  }

  /* Bouton éteint tant que l'étape 3 n'est pas remplie. Il reste cliquable
     (`aria-disabled`, pas `disabled`) : le clic dit ce qui manque. */
  .resa-barre__cta[aria-disabled="true"] {
    background: var(--c-indigo-200);
    box-shadow: none;
  }
  .resa-barre__cta[aria-disabled="true"]:hover {
    transform: none;
    box-shadow: none;
  }
  .resa-barre__cta[aria-disabled="true"]::after { opacity: 0; }
  .resa-barre__chevron {
    flex: 0 0 auto;
    width: 9px;
    height: 6px;
    transform: rotate(180deg);            /* pointe en haut : la feuille monte */
    transition: transform var(--dur) var(--ease);
  }
  body.feuille-ouverte .resa-barre__chevron { transform: rotate(0deg); }

  .resa-barre__cta {
    flex: 0 0 auto;
    min-width: 148px;
    height: 48px;
    font-size: 15px;
  }
  /* Étape 3 : « Confirmer ma réservation 5,00 € » ne tient pas à côté du
     prix sur 390 px — la barre passe sur deux lignes, bouton pleine
     largeur sous le total. */
  body.barre-confirme .resa-barre {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  body.barre-confirme .resa-barre__detail { align-self: flex-start; }
  body.barre-confirme .resa-barre__cta { width: 100%; }

  /* --- Le récapitulatif en feuille --- */
  body.a-barre .resa__cote {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 121;
    width: 100%;
    max-width: none;
    margin: 0;
    /* Posée AU-DESSUS de la barre de prix (et non derrière, avec 162 px de
       marge basse) et compactée : la feuille s'affiche en entier, sans
       défilement interne, jusqu'aux petits téléphones (demande client du
       2026-09-08). `overflow-y: auto` ne reste qu'en filet de sécurité. */
    top: auto;                          /* annule le `top` sticky du bureau */
    bottom: var(--h-barre, 104px);
    padding: 0 12px 8px;
    max-height: calc(100vh - var(--h-barre, 104px) - 8px);
    max-height: calc(100dvh - var(--h-barre, 104px) - 8px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
  }
  /* Poignée de feuille, sur le voile au-dessus de la carte blanche. */
  body.a-barre .resa__cote::before {
    content: "";
    flex: 0 0 auto;
    width: 44px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, .65);
  }
  body.a-barre.feuille-ouverte .resa__cote {
    transform: translateY(0);
    visibility: visible;
    transition: transform var(--dur) var(--ease), visibility 0s;
  }

  body.a-barre .resa-voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(9, 11, 32, .48);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease),
                visibility 0s linear var(--dur);
  }
  body.a-barre.feuille-ouverte .resa-voile {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--dur) var(--ease), visibility 0s;
  }
  /* Le fond ne défile plus derrière la feuille ouverte : body figé en
     position: fixed à la hauteur courante (reservation.js pose `top`),
     `overflow: hidden` seul laissait la page défiler (2026-09-08). */
  html.feuille-ouverte { overflow: hidden; }
  body.feuille-ouverte {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
  }

  /* Feuille compacte : en-tête bas, titre sur une ligne, blocs resserrés. */
  body.a-barre .resa__cote .recap__head { position: relative; min-height: 0; padding: 14px 56px 14px 18px; gap: 10px; }
  body.a-barre .resa__cote .recap__title { font-size: 17px; line-height: 22px; }
  body.a-barre .resa__cote .recap__body { gap: 12px; padding: 14px 16px; }
  body.a-barre .resa__cote .recap__items { gap: 8px; }
  body.a-barre .resa__cote .recap__item { height: 40px; }
  body.a-barre .resa__cote .recap__icone { flex-basis: 40px; width: 40px; height: 40px; }
  body.a-barre .resa__cote .recap__ligne { min-height: 40px; }
  body.a-barre .resa__cote .recap__point { gap: 12px; }
  /* Croix de fermeture, en haut à droite de l'en-tête de la feuille. */
  body.a-barre .resa-cote__fermer {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 14px;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--c-primary, #444CED);
    cursor: pointer;
  }

  /* --- Le bouton d'action déménage dans la barre --- */
  /* Le bouton du formulaire (« Continuer », « Confirmer ma réservation »)
     RESTE affiché sous la barre (demande client du 2026-09-02 : certains
     clients ne voient pas le bouton de la barre fixe). Le flux mobile est en
     `column-reverse`, le bouton se place donc au-dessus de « Retour ».
     La barre n'est qu'une télécommande de ce bouton : aucun doublon de
     logique. */

  /* Le clavier mobile recouvre une barre `fixed` sur iOS et la fait sauter
     sur Android : elle s'efface le temps d'une saisie (étape 3). */
  body.clavier .resa-barre { display: none; }
  /* Idem pendant la recherche d'un indicatif : la liste passe sous la barre. */
  body.pays-ouvert .resa-barre { display: none; }

  /* « Déjà réservé ? Suivre ma réservation » retiré de l'étape 3 sur
     mobile (demande client du 2026-08-28) : le client est en train de
     réserver, pas de suivre. Le bloc reste dans le DOM et sur le bureau. */
  .resa-login { display: none; }

  /* --- Étape 1 découpée en deux écrans (dates, puis bagages) --- */
  /* Le fil des étapes reste « Étape 1 sur 3 » : la découpe est un confort
     d'affichage, l'état et le serveur ne connaissent qu'une étape 1. La
     première barre se remplit donc à moitié sur l'écran des dates. */
  .stepper__item.est-moitie .stepper__bar {
    background: linear-gradient(to right,
                var(--c-primary) 0 50%, var(--c-indigo-200) 50% 100%);
  }
}

/* Écrans courts (paysage, petits téléphones) : la feuille ne doit pas
   dépasser la fenêtre. */
@media (max-width: 767px) and (max-height: 560px) {
  body.a-barre .resa__cote { max-height: 86vh; max-height: 86dvh; }
}

/* --------------------------------------------------------------------------
   Impression — « Télécharger PDF » déclenche window.print() : on ne garde que
   le billet (en-tête de confirmation, détails, QR code) et on le resserre
   pour qu'il tienne sur une seule page A4.
   Ce bloc vit ici, dans la feuille chargée en dernier, sinon les media queries
   responsives (padding-top de .resa notamment) reprennent le dessus.
   -------------------------------------------------------------------------- */
@media print {
  /* Les aplats et dégradés du billet sont son identité : sans cette règle,
     les navigateurs les suppriment à l'impression. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  @page { margin: 10mm; }

  html, body { background: #fff; }
  .page-reservation { background: #fff; }

  .skip-link,
  .site-header,
  .resa__tunnel,
  .confirmation__actions { display: none !important; }

  /* margin comprise : l'en-tête flottant réserve 104 px au-dessus de <main>,
     inutiles une fois l'en-tête masqué — et c'est ce décalage qui poussait
     le QR code sur une seconde page. */
  .resa { margin: 0; padding: 0; }
  .container { width: auto; max-width: none; padding: 0; }

  .confirmation {
    width: auto;
    margin: 0;
    padding: 0;
    gap: 8px;
    box-shadow: none;
    border-radius: 0;
  }

  /* Bandeau de confirmation resserré : c'est lui qui faisait déborder
     le QR code sur une deuxième page. */
  .confirmation__hero { gap: 12px; padding: 16px; border-radius: 12px; }
  .confirmation__logo { width: 96px; height: 44px; }
  .confirmation__panel { width: 100%; gap: 12px; padding: 8px; }
  .confirmation__intro { gap: 6px; }
  .confirmation__title { font-size: 24px; line-height: 32px; }
  .confirmation__text { width: 100%; font-size: 12px; line-height: 17px; }
  .confirmation__check { width: 36px; height: 36px; }
  .confirmation__check img { width: 20px; height: 20px; }
  .confirmation__corps { gap: 12px; }

  .qr__image { width: 120px; height: 110px; }
  .recap-dates__fleche { height: 24px; }

  /* Un billet tient sur une page : rien ne doit être coupé en deux. */
  .recap-detail__bloc,
  .recap-bagage,
  .recap-dates,
  .qr,
  .qr__carte { break-inside: avoid; page-break-inside: avoid; }

  /* Pas d'animation d'entrée : sinon les blocs s'impriment
     translatés ou transparents. */
  [data-reveal], .reveal, .is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }
}