/* Pose ton sac – front (tout est préfixé .pts-app pour ne pas entrer en conflit avec le thème) */

.pts-app {
  --pts-accent: #5046e5;
  --pts-accent-soft: color-mix(in srgb, var(--pts-accent) 12%, #fff);
  --pts-bg: #f5f5fa;
  --pts-card: #ffffff;
  --pts-text: #14142b;
  --pts-muted: #6e6e85;
  --pts-border: #e3e3ee;
  --pts-disabled: #dfdfe6;
  --pts-danger: #c62828;
  --pts-success: #12a150;
  --pts-star: #f2734b;
  --pts-radius: 16px;

  box-sizing: border-box;
  max-width: 520px;
  margin: 24px auto;
  color: var(--pts-text);
  font-size: calc(16px * var(--pts-fs, 1));
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
.pts-app *, .pts-app *::before, .pts-app *::after { box-sizing: inherit; }
/* Taille du texte : un peu plus petite sur téléphone (« trop zoomé », choix de l'utilisateur 14/10/2026).
   Toutes les tailles de police sont multipliées par --pts-fs ; les champs de saisie restent à 16 px (zoom iOS). */
:root { --pts-fs: 1; }
@media (max-width: 600px) { :root { --pts-fs: .9; } }

.pts-app button,
.pts-app input,
.pts-app select,
.pts-app textarea {
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
  box-shadow: none;
}
.pts-app img { max-width: 100%; height: auto; display: block; border: 0; }
.pts-app a { color: var(--pts-accent); }
.pts-app p { margin: 0 0 12px; }

.pts-shell {
  background: var(--pts-bg);
  border-radius: 24px;
  overflow: clip;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.pts-reviews-widget { background: var(--pts-bg); border-radius: 24px; padding: 16px; }

.pts-loading, .pts-spinner-wrap { padding: 40px; text-align: center; color: var(--pts-muted); }

/* ---------- Header ---------- */
.pts-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 10px 16px 2px; /* espace optimisé (choix de l'utilisateur 18/10/2026 ; avant 16px 16px 8px) */
}
.pts-app .pts-title {
  margin: 0;
  font-size: calc(22px * var(--pts-fs, 1));
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  color: var(--pts-text);
}
.pts-app .pts-icon-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--pts-text);
  cursor: pointer;
  padding: 0;
}
.pts-app .pts-icon-btn:hover { background: rgba(0, 0, 0, .05); }
.pts-icon-spacer { width: 44px; }

.pts-progress { height: 4px; margin: 4px 20px 0; background: var(--pts-border); border-radius: 4px; overflow: hidden; }
.pts-progress span { display: block; height: 100%; background: var(--pts-accent); border-radius: 4px; transition: width .3s ease; }
/* Barre en étapes : un morceau par étape, séparés par un petit espace */
.pts-progress.pts-steps { display: flex; gap: 6px; background: none; border-radius: 0; overflow: visible; }
/* La barre est une route (choix de l'utilisateur 18/10/2026, comme le billet et les e-mails) : 10 px, violet clair avec
   pointillés blancs au milieu ; partie faite en violet. */
.pts-steps { --road: #dedbfa; --dash: repeating-linear-gradient(90deg, rgba(255, 255, 255, .95) 0 6px, transparent 6px 12px) 0 50% / 100% 2px no-repeat; }
.pts-steps span { position: relative; flex: 1; height: 10px; border-radius: 5px; background: var(--dash), var(--road); overflow: hidden; transition: none; }
.pts-steps span.is-done::after { content: ""; position: absolute; inset: 0; background: var(--dash), var(--pts-accent); border-radius: 5px; transform-origin: left; }
.pts-steps span.is-grow::after { animation: pts-step-grow .5s ease-out both; }
.pts-steps span.is-ahead::after { opacity: .35; } /* modification depuis le récapitulatif : étapes suivantes (déjà faites) en violet clair */
/* … qui se déchargent de droite à gauche en entrant dans la modification */
.pts-steps span.is-drain::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--dash), var(--pts-accent); border-radius: 5px;
  transform-origin: left; animation: pts-step-drain .45s ease-in both; animation-delay: var(--pts-drain-delay, 0s);
}
@keyframes pts-step-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .pts-steps span.is-drain::before { animation: none; display: none; } }
@keyframes pts-step-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pts-steps span.is-grow::after { animation: none; } }
/* Convoi de petites valises posé sur la barre : une par bagage, dans l'ordre d'ajout, de gauche à droite comme du texte ; au début sur la 1re étape, au bout sur le récapitulatif, il roule d'une étape à l'autre.
   left + translateX(-même %) : à 0 le convoi touche le bord gauche, à 1 le bord droit, quelle que soit sa longueur.
   Trop de valises pour une ligne : on « saute une ligne » et une nouvelle barre se crée en dessous, comme du texte
   (choix de l'utilisateur 18/10/2026). Le convoi est placé après les morceaux, remonté de 38 px : sa 1re ligne est
   posée sur la vraie barre, les suivantes en dessous, chacune sur sa barre grise (fond du convoi, une barre tous les 38 px
   à partir de la 2e ligne) ; violet sous chaque valise, gris à droite (choix de l'utilisateur 18/10/2026).
   Hauteur de ligne --cv-h : 36 px, 42 px dès qu'un sac à main est posé sur une valise (« has-stack ») ; la 1re ligne monte
   alors un peu dans l'espace libre au-dessus de la barre (marge négative) sans faire bouger l'en-tête. */
.pts-progress.pts-steps { position: relative; height: auto; margin-top: 36px; flex-wrap: wrap; row-gap: 0; }
.pts-progress.pts-steps::after { content: ""; order: 1; flex-basis: 100%; height: 0; } /* retour à la ligne avant le convoi */
.pts-convoy {
  --cv-h: 36px;
  position: relative; z-index: 2; order: 2; flex: none; max-width: calc(100% - var(--cv-pin, 0px)); margin-top: calc(-6px - var(--cv-h)); /* roues 4 px dans la route */
  left: calc(var(--to) * (100% - var(--cv-pin, 0px))); transform: translateX(calc(var(--to) * -100%));
  display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 2px; padding: 0 3px 6px 0; pointer-events: none;
  /* Lignes suivantes : une route violet clair sous chaque ligne (la 1re ligne roule sur la vraie barre) */
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--cv-h) - 8px), var(--road, #eae8fd) calc(var(--cv-h) - 8px) calc(var(--cv-h) + 2px)) 0 100% / 100% calc(100% - var(--cv-h) - 6px) no-repeat;
}
.pts-convoy.has-stack { --cv-h: 42px; }
.pts-convoy:empty { display: none; }
/* Partie violette « peinte » par le convoi (choix de l'utilisateur 18/10/2026) : de la gauche jusqu'aux valises, elle roule
   avec elles ; les morceaux de la barre ne se remplissent plus tout seuls (sauf le violet clair « déjà fait » en modification). */
.pts-cv-fill { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 10px; pointer-events: none; }
.pts-cv-fill > i { display: block; height: 100%; border-radius: 5px 0 0 5px; background: var(--dash), var(--pts-accent); width: calc(var(--to) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px))); }
.pts-cv-fill.is-move > i { animation: pts-cv-fill 1s cubic-bezier(.45, 0, .25, 1) var(--fill-delay, var(--cv-delay, 0s)) both; }
@keyframes pts-cv-fill {
  from { width: calc(var(--from) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px))); }
  to { width: calc(var(--to) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px))); }
}
.pts-steps.has-fill span.is-done:not(.is-ahead)::after, .pts-steps.has-fill span.is-drain::before { display: none; }
/* La file est posée à sa place d'arrivée ; chaque valise roule depuis sa place de départ (--dx), la tête d'abord
   (--car-delay, convoyCars : déphasées comme des voitures, choix de l'utilisateur 18/10/2026). */
.pts-convoy.is-move > .pts-cv-bag { animation: pts-cv-car 1s cubic-bezier(.45, 0, .25, 1) var(--car-delay, var(--cv-delay, 0s)) both, pts-cv-bump .48s ease-in-out calc(var(--i, 0) * -.08s) infinite both; }
@keyframes pts-cv-car { from { transform: translateX(var(--dx, 0px)); } to { transform: none; } }
@keyframes pts-cv-roll {
  from { left: calc(var(--from) * (100% - var(--cv-pin, 0px))); transform: translateX(calc(var(--from) * -100%)); }
  to { left: calc(var(--to) * (100% - var(--cv-pin, 0px))); transform: translateX(calc(var(--to) * -100%)); }
}
.pts-app .pts-cv-bag { position: relative; display: flex; align-items: flex-end; height: var(--cv-h, 36px); margin-right: -3px; flex: none; font-style: normal; transform-origin: 50% 100%; } /* roues 4 px dans la route, serrées */
/* Toujours du violet sous les valises (choix de l'utilisateur 18/10/2026) : chaque valise a son morceau de barre violette */
.pts-cv-bag::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -6px; height: 10px; background: var(--dash), var(--pts-accent); }
/* Route d'une seule couleur et continue (choix de l'utilisateur 18/10/2026) : plus de violet (ni partie faite, ni sous les
   valises, ni « peinture » du convoi) et plus de coupure entre les morceaux : une seule route violet clair à pointillés. */
.pts-progress.pts-steps { column-gap: 0; }
.pts-steps span { flex: 1 1 1px; border-radius: 0; } /* base 1 px : sans espace, le retour à la ligne avant le convoi doit rester sur sa propre ligne */
.pts-steps span:first-of-type { border-radius: 5px 0 0 5px; }
.pts-steps span:last-of-type { border-radius: 0 5px 5px 0; }
.pts-steps span::after, .pts-steps span::before { display: none !important; }
/* … puis un violet léger revient pour la partie parcourue et sous les valises (choix de l'utilisateur 18/10/2026) */
.pts-steps { --road-done: #bdb8f6; }
.pts-cv-fill > i, .pts-cv-bag::after { background: var(--dash), var(--road-done); }
.pts-cv-fill { -webkit-mask-image: none !important; mask-image: none !important; } /* route continue : plus de coupure entre les morceaux (le masque de fillHtml en gardait une) */
/* Le violet léger va du début de la route jusqu'à la valise de tête, tout à droite (choix de l'utilisateur 18/10/2026) :
   il couvre aussi la file (+ --cvw) et suit la tête quand les valises partent l'une après l'autre (--fill-delay). */
/* --cvl = jusqu'aux valises déjà posées (19/10/2026) : l'ombre ne va pas plus loin qu'elles pendant qu'une valise roule
   vers sa place, puis s'allonge doucement quand elle se pose. */
.pts-cv-fill > i { width: calc(var(--to) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px)) + var(--cvl, var(--cvw, 0px))); transition: width .25s ease-out; }
.pts-cv-fill.is-move > i { animation-name: pts-cv-fill-head; }
@keyframes pts-cv-fill-head {
  from { width: calc(var(--from) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px)) + var(--cvl, var(--cvw, 0px))); }
  to { width: calc(var(--to) * (100% - var(--cv-pin, 0px) - var(--cvw, 0px)) + var(--cvl, var(--cvw, 0px))); }
}
/* Valises qui montent et descendent doucement en roulant, comme des voitures sur la route (choix de l'utilisateur
   18/10/2026) : propriété translate (s'ajoute aux transform des autres animations), décalée d'une valise à l'autre. */
.pts-cv-bag { animation: pts-cv-bump .48s ease-in-out calc(var(--i, 0) * -.08s) infinite both; }
.pts-cv-bag.is-rider { animation: none; } /* sac posé : pas de mouvement à lui, il monte et descend avec sa valise, collé à elle (choix de l'utilisateur 18/10/2026) */
/* Sans arrêt, au rythme de la valise du billet (0,24 s pour monter, 0,24 s pour redescendre, 2 px) ; les valises sautent
   l'une après l'autre de droite à gauche (délai négatif plus grand à droite, --i croît vers la droite ; choix de
   l'utilisateur 18/10/2026). */
@keyframes pts-cv-bump { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
/* Plus de morceau de route sous chaque valise (il montait et descendait avec elle, choix de l'utilisateur 18/10/2026) :
   le violet léger sous la file vient de .pts-cv-fill, qui va jusqu'à la valise de droite. */
.pts-cv-bag::after { display: none !important; }
/* Péages (choix de l'utilisateur 18/10/2026) : cabine + barrière juste devant la valise de tête à chaque arrêt
   (même calcul que la place du convoi, --cvw = largeur de la file) ; barrière rayée orange et blanc, baissée en travers
   devant les valises, levée (pivot côté cabine) une fois l'étape franchie. Derrière les valises (z-index 1 < convoi 2). */
/* Barrière baissée devant la file (choix de l'utilisateur 19/10/2026) : la file s'arrête 6 px avant elle et, quand il y a
   trop de valises, elles sont poussées vers l'arrière et sortent de l'écran à gauche (une seule ligne, pas de retour à la
   ligne). Bord droit de la file = to × W + (1 − to) × largeur, W = route sans l'épingle ; justify-content: flex-end = les
   valises en trop débordent à gauche. */
.pts-progress.has-stop .pts-convoy { flex-wrap: nowrap; justify-content: flex-end; max-width: max(30px, min(100% - var(--cv-pin, 0px), (var(--cv-stop) * (100% - var(--cv-pin, 0px)) - 19px - var(--to) * (100% - var(--cv-pin, 0px))) / (1 - var(--to)))); }
.pts-app .pts-toll { position: absolute; z-index: 1; top: -18px; left: calc(var(--at, 0) * (100% - var(--cv-pin, 0px)) - 13px); width: 27px; height: 22px; display: block; font-style: normal; pointer-events: none; }
.pts-toll-booth { position: absolute; right: 0; bottom: 0; display: block; width: 14px; height: 22px; }
.pts-app .pts-toll-arm { position: absolute; right: 12px; bottom: 9px; width: 14px; height: 3px; border-radius: 2px; display: block; font-style: normal;
  background: repeating-linear-gradient(90deg, #ff8a3d 0 3.5px, #fff 3.5px 7px); box-shadow: 0 0 0 .8px #3b32b8; transform-origin: 100% 50%; transition: none; }
.pts-app .pts-toll.is-open .pts-toll-arm { transform: rotate(90deg); }
.pts-app .pts-toll.is-opening .pts-toll-arm { animation: pts-toll-open .35s ease-out both; }
.pts-app .pts-toll.is-closing .pts-toll-arm { animation: pts-toll-open .35s ease-in .6s reverse both; }
@keyframes pts-toll-open { from { transform: none; } to { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { .pts-app .pts-toll-arm { animation: none !important; } }
/* Décor de la route (choix de l'utilisateur 18/10/2026) : nuages et petits arbres dans l'espace au-dessus de la route,
   derrière le convoi (z-index 0 < convoi 2) ; les arbres sont plantés sur le bord de la route. */
.pts-app .pts-road-decor { position: absolute; z-index: 0; left: 0; right: var(--cv-pin, 0px); top: -36px; height: 36px; pointer-events: none; font-style: normal; }
.pts-app .pts-road-decor > i { position: absolute; display: block; font-style: normal; }
.pts-road-decor svg { display: block; width: 100%; height: auto; }
.pts-app .pts-rd-cloud.is-1 { left: 6%; top: -2px; width: 42px; }
.pts-app .pts-rd-cloud.is-2 { left: 45%; top: 4px; width: 30px; }
.pts-app .pts-rd-cloud.is-3 { left: 78%; top: -1px; width: 36px; }
.pts-app .pts-rd-tree { bottom: 0; width: 17px; }
.pts-app .pts-rd-tree.is-1 { left: 27%; }
.pts-app .pts-rd-tree.is-2 { left: 63%; width: 14px; }
.pts-app .pts-rd-tree.is-3 { left: 91%; width: 15px; }
.pts-cv-bag svg { display: block; width: 26px; height: auto; } /* valise standard (celle du billet) */
.pts-cv-bag.is-odd svg { width: 24px; } /* grande valise debout (≈ 34 px de haut) */
.pts-cv-bag.is-small svg { width: 22px; } /* sac à main */
/* Valises d'origine en couleur (BAG_COLORS, 19/10/2026, choix de l'utilisateur) : standard debout jaune-vert ≈ 30 px de haut,
   grande valise bleue ≈ 34 px, sac bleu clair ; le sac posé sur une valise standard est un peu plus petit, posé sur la coque. */
.pts-cv-bag svg.pts-orig { width: 17px; }
.pts-cv-bag.is-odd svg.pts-orig { width: 28px; }
.pts-cv-bag.is-small svg.pts-orig { width: 22px; }
.pts-app .pts-cv-bag.is-rider:has(> svg.pts-orig) { bottom: 23px; }
.pts-cv-bag.is-small.is-rider svg.pts-orig { width: 18px; }
.pts-cv-bag .pts-wheel { transform-box: fill-box; transform-origin: center; }
/* Sac à main posé sur une valise standard (choix de l'utilisateur 18/10/2026) : centré, un peu au-dessus de la coque
   (petit espace, la poignée reste visible : « pas collés »), il suit la valise ; une valise standard porte un sac à main au plus. */
.pts-app .pts-cv-bag.is-rider { position: absolute; z-index: 1; left: 0; right: 0; bottom: 19px; height: auto; margin: 0; justify-content: center; }
.pts-cv-bag.is-rider::after { display: none; }
/* Roues qui tournent tout le temps, à toutes les étapes, comme si la file roulait (choix de l'utilisateur 18/10/2026 ;
   avant : seulement pendant le trajet, puis sans fin au récapitulatif) ; à l'envers en reculant. Petit sautillement pendant le trajet. */
.pts-convoy .pts-wheel { animation: pts-tk-spin .5s linear infinite; }
.pts-convoy.is-back .pts-wheel { animation-direction: reverse; }
.pts-convoy.is-move .pts-cv-bag svg { animation: pts-tk-bob .25s ease-in-out 4 alternate; animation-delay: var(--car-delay, var(--cv-delay, 0s)); }
/* Sac à main (pas de roues) : 2 petits bonds bien séparés (arc, tassement à l'atterrissage, repos au sol), choix de l'utilisateur 18/10/2026 */
.pts-convoy.is-move .pts-cv-bag.is-small svg { transform-origin: 50% 100%; animation: pts-cv-hop .5s linear 2; animation-delay: var(--car-delay, var(--cv-delay, 0s)); }
@keyframes pts-cv-hop {
  0% { transform: none; animation-timing-function: cubic-bezier(.33, .66, .66, 1); } /* monte en ralentissant */
  31% { transform: translateY(-6px); animation-timing-function: cubic-bezier(.33, 0, .66, .34); } /* redescend en accélérant */
  62% { transform: none; animation-timing-function: ease-out; }
  72% { transform: scale(1.1, .86); animation-timing-function: ease-in-out; } /* tassement à l'atterrissage */
  82%, 100% { transform: none; } /* repos au sol */
}
/* Bagage ajouté : la valise apparaît avec un petit « pop » */
.pts-cv-bag.is-pop { animation: pts-cv-pop .4s cubic-bezier(.3, 1.6, .5, 1) both, pts-cv-bump .48s ease-in-out calc(var(--i, 0) * -.08s) infinite both; } /* + petit mouvement de haut en bas */
@keyframes pts-cv-pop { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 1; } }
/* Bouton + : une copie de la valise roule depuis la carte jusqu'à sa place (reservation.js, flyBag) ;
   la place est gardée invisible pendant le vol, puis la vraie valise se tasse un peu en se posant. */
.pts-app .pts-cv-bag.is-landing { visibility: hidden; animation: none; }
.pts-cv-bag.is-land { animation: pts-cv-land .28s ease-out both, pts-cv-bump .48s ease-in-out calc(var(--i, 0) * -.08s) infinite both; } /* + petit mouvement de haut en bas */
@keyframes pts-cv-land { from { transform: scale(1.08, .86); } to { transform: none; } }
/* Sac à main « à cheval » sur sa valise standard (choix de l'utilisateur 18/10/2026 : comme sur un cheval ou une moto) :
   posé pile sur la coque (sans espace), en biais (dessin TK_HANDBAG_RIDE : le sac tourné comme par rotateY 60° avec perspective, points
   recalculés pour garder des contours de même épaisseur ; plus d'inclinaison de 12°) ; la valise s'enfonce un peu quand il monte
   dessus ; quand la file roule, il se penche en arrière au démarrage et en avant au freinage. */
.pts-cv-bag.is-rider > svg { transform-origin: 50% 100%; }
.pts-cv-bag.is-mounted > svg { transform-origin: 50% 100%; animation: pts-cv-mount .4s ease-out; }
@keyframes pts-cv-mount { 0% { transform: none; } 30% { transform: scale(1.05, .88); } 65% { transform: scale(.98, 1.03); } 100% { transform: none; } }
.pts-convoy.is-move .pts-cv-bag.is-rider > svg { animation: pts-cv-ride 1s ease-in-out var(--car-delay, var(--cv-delay, 0s)) both; }
.pts-convoy.is-move.is-back .pts-cv-bag.is-rider > svg { animation-name: pts-cv-ride-back; }
@keyframes pts-cv-ride {
  0%, 100% { transform: none; }
  18% { transform: translateY(-1px) rotate(-10deg); }
  50% { transform: translateY(-2px) rotate(-3deg); }
  82% { transform: rotate(10deg); }
}
@keyframes pts-cv-ride-back {
  0%, 100% { transform: none; }
  18% { transform: translateY(-1px) rotate(10deg); }
  50% { transform: translateY(-2px) rotate(3deg); }
  82% { transform: rotate(-10deg); }
}

.pts-cv-fly { position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.pts-cv-fly svg { display: block; width: 100%; height: auto; }
.pts-cv-fly .pts-wheel { transform-box: fill-box; transform-origin: center; animation: pts-tk-spin .3s linear infinite; }
.pts-cv-fly.is-back .pts-wheel { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .pts-app .pts-convoy, .pts-app .pts-cv-bag, .pts-app .pts-cv-bag svg, .pts-app .pts-cv-bag .pts-wheel, .pts-app .pts-cv-fill > i { animation: none !important; }
  .pts-cv-fly { display: none; }
}

/* Épingle Pose ton sac au bout de la barre (choix de l'utilisateur 18/10/2026) : destination du convoi, posée sur la barre
   comme les valises ; le convoi s'arrête juste avant (--cv-pin = place gardée à droite, aussi pour les lignes suivantes). */
.pts-progress.pts-steps { --cv-pin: 15px; }
.pts-app .pts-cv-pin {
  position: absolute; z-index: 3; right: -12px; top: -14px; width: 24px; height: 30px; display: block; font-style: normal;
  pointer-events: none; transform-origin: 50% 96.6%; filter: drop-shadow(0 1.5px 2px rgba(80, 70, 229, .3));
}
.pts-cv-pin svg { display: block; width: 24px; height: auto; }
.pts-cv-pin .pts-cv-pin-bag { transform-box: fill-box; transform-origin: 50% 100%; }
/* Réservation confirmée (reservation.js, confirmShow) : les valises sautent une à une dans l'épingle (copies posées sur
   la barre), elle les avale puis fait « pop » ; une feuille en sort et se déplie pour devenir le billet de « Ma réservation ». */
.pts-convoy.is-gone .pts-cv-bag > svg { visibility: hidden; }
.pts-cv-show { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.pts-app .pts-cv-clone { position: absolute; left: 0; top: 0; display: block; font-style: normal; transform-origin: 0 0; will-change: transform, opacity; }
.pts-cv-clone svg { display: block; width: 100%; height: auto; }
.pts-cv-clone .pts-wheel { transform-box: fill-box; transform-origin: center; }
.pts-cv-show.is-spin .pts-wheel { animation: pts-tk-spin .5s linear infinite; }
.pts-cv-clone.is-rider svg { transform-origin: 50% 100%; transform: rotate(12deg) perspective(80px) rotateY(60deg); }
.pts-app .pts-cv-spark { position: absolute; z-index: 5; left: 0; top: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; }
.pts-app .pts-cv-ring { position: absolute; z-index: 5; left: 0; top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--pts-accent); opacity: 0; }
.pts-cv-sheet {
  position: fixed; left: 0; top: 0; z-index: 100000; pointer-events: none; background: #fff; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(80, 70, 229, .14), 0 10px 28px rgba(40, 30, 140, .22); overflow: hidden; will-change: transform, opacity;
}
.pts-cv-sheet::before { content: ""; position: absolute; left: 14%; right: 14%; top: 22%; height: 6%; min-height: 3px; border-radius: 99px; background: #c7c3f7; }
.pts-cv-sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 19%; border-top: 2px dashed #e3e3ee; }
/* … le billet attend la feuille (caché, valise en pause), puis se dessine ; le reste de la page arrive en fondu. */
.pts-app .pts-ref-card.is-await { visibility: hidden; }
.pts-ref-card.is-await .pts-tk-bag, .pts-ref-card.is-await .pts-tk-bag svg, .pts-ref-card.is-await .pts-wheel { animation-play-state: paused; }
.pts-shell.is-arrive > .pts-header, .pts-shell.is-arrive > .pts-body > :not(.pts-ref-card) { animation: pts-arrive .45s cubic-bezier(.2, .8, .3, 1) both; }
.pts-shell.is-arrive > .pts-body > .pts-ref-card ~ * { animation-delay: .85s; }
@keyframes pts-arrive { from { opacity: 0; transform: translateY(14px); } }
.pts-ticket.is-unfold .pts-tk-cloud { animation: pts-tk-cloud-in .55s cubic-bezier(.2, .8, .3, 1) both; }
.pts-ticket.is-unfold .pts-tk-cloud.is-left { --dx: -30px; }
.pts-ticket.is-unfold .pts-tk-cloud.is-right { --dx: 30px; animation-delay: .06s; }
@keyframes pts-tk-cloud-in { from { opacity: 0; transform: translateX(var(--dx, 0)); } }
.pts-ticket.is-unfold .pts-tk-tree { transform-origin: 50% 100%; animation: pts-tk-pop-in .4s cubic-bezier(.3, 1.6, .5, 1) .2s both; }
.pts-ticket.is-unfold .pts-tk-dot, .pts-ticket.is-unfold .pts-tk-pin { animation: pts-tk-pop-in .35s cubic-bezier(.3, 1.6, .5, 1) .05s both; }
@keyframes pts-tk-pop-in { from { transform: scale(0); } }
.pts-ticket.is-unfold .pts-tk-names { animation: pts-tk-up .35s ease-out .12s both; }
.pts-ticket.is-unfold .pts-tk-msg { animation: pts-tk-up .4s ease-out .18s both; }
.pts-ticket.is-unfold .pts-ref { animation: pts-tk-up .4s ease-out .24s both; }
.pts-ticket.is-unfold .pts-tk-foot { animation: pts-tk-up .4s ease-out .3s both; }
@keyframes pts-tk-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Body ---------- */
.pts-body { padding: 12px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pts-intro { color: var(--pts-text); margin: 0; }
.pts-app .pts-contact-intro { margin: 0; }
.pts-app .pts-headline { font-size: calc(34px * var(--pts-fs, 1)); line-height: 1.1; font-weight: 800; margin: 0; letter-spacing: -.5px; color: var(--pts-text); }
.pts-muted { color: var(--pts-muted); }
.pts-small { font-size: calc(14px * var(--pts-fs, 1)); }
.pts-center { text-align: center; }
.pts-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pts-card {
  background: var(--pts-card);
  border-radius: var(--pts-radius);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(20, 20, 43, .04), 0 4px 14px rgba(20, 20, 43, .04);
  border: 0;
  margin: 0;
}
.pts-card-title { font-size: calc(20px * var(--pts-fs, 1)); font-weight: 700; margin-bottom: 10px; padding: 0; }
.pts-sep { height: 1px; background: var(--pts-border); margin: 16px 0; }

.pts-loc-name { font-size: calc(20px * var(--pts-fs, 1)); font-weight: 700; margin-bottom: 4px; }
.pts-loc-line { display: flex; gap: 6px; align-items: flex-start; margin-bottom: 2px; }
.pts-loc-line svg { flex: none; margin-top: 2px; }
/* « Ma réservation » : même bloc que dans les e-mails (nom, adresse, horaires, Itinéraire ; petite photo à droite) */
.pts-loc-head { display: flex; gap: 12px; align-items: center; }   /* photo centrée en hauteur par rapport au texte */
.pts-loc-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: calc(15px * var(--pts-fs, 1)); line-height: 1.5; }
.pts-loc-title { font-weight: 700; }
.pts-app .pts-dir-link { align-self: flex-start; font-weight: 700; text-decoration: underline; }
/* (classe à part : .pts-loc-thumb sert déjà aux vignettes 76x76 de la liste des consignes, plus bas dans ce fichier) */
.pts-loc-photo { flex: none; display: block; width: 120px; height: 96px; object-fit: cover; border-radius: 12px; background: #f1f0fe; }
@media (max-width: 380px) { .pts-loc-photo { width: 96px; height: 77px; } }

/* ---------- Buttons ---------- */
.pts-app .pts-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 56px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: calc(18px * var(--pts-fs, 1));
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, opacity .15s, transform .05s;
}
.pts-app .pts-btn:active:not(:disabled) { transform: scale(.99); }
.pts-app .pts-btn-primary { background: var(--pts-accent); color: #fff; }
.pts-app .pts-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--pts-accent) 88%, #000); }
.pts-app .pts-btn-primary:disabled { background: var(--pts-disabled); color: #9a9aae; cursor: not-allowed; }
.pts-app .pts-btn-secondary { background: var(--pts-card); color: var(--pts-text); border-color: var(--pts-border); }
.pts-app .pts-btn-secondary:hover { border-color: var(--pts-muted); }
.pts-app .pts-btn-small { width: auto; min-height: 48px; font-size: calc(16px * var(--pts-fs, 1)); padding: 10px 18px; background: var(--pts-accent); color: #fff; }
.pts-app .pts-btn.is-loading { position: relative; color: transparent !important; }
.pts-app .pts-btn.is-loading::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 3px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%;
  animation: pts-spin .7s linear infinite;
}
.pts-app .pts-btn-secondary.is-loading::after { border-color: var(--pts-border); border-top-color: var(--pts-accent); }

.pts-app .pts-link {
  background: none; border: 0; padding: 4px 0; margin-left: auto;
  color: var(--pts-accent); font-weight: 600; cursor: pointer; font-size: calc(16px * var(--pts-fs, 1));
}
.pts-app .pts-link:hover { text-decoration: underline; }

.pts-spinner {
  display: inline-block; width: 32px; height: 32px;
  border: 3px solid var(--pts-border); border-top-color: var(--pts-accent); border-radius: 50%;
  animation: pts-spin .7s linear infinite;
}
@keyframes pts-spin { to { transform: rotate(360deg); } }

/* ---------- Footer ---------- */
.pts-footer {
  position: sticky; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--pts-card);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -6px 18px rgba(20, 20, 43, .06);
  z-index: 2;
}

/* ---------- Form fields ---------- */
.pts-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.pts-label { font-weight: 600; font-size: calc(15px * var(--pts-fs, 1)); color: var(--pts-text); }
.pts-app .pts-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--pts-border);
  border-radius: 14px;
  background: var(--pts-card);
  color: var(--pts-text);
  font-size: 16px; /* évite le zoom iOS (pas réduit sur téléphone) */
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.pts-app select.pts-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%236e6e85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.pts-app textarea.pts-input { min-height: 110px; resize: vertical; }
.pts-app .pts-input:focus { border-color: var(--pts-accent); box-shadow: 0 0 0 3px var(--pts-accent-soft); }
/* Nom / e-mail manquants au récapitulatif : champ rouge + petit message (choix de l'utilisateur 18/10/2026) */
.pts-app .pts-input.is-invalid { border-color: var(--pts-danger); box-shadow: 0 0 0 3px rgba(198, 40, 40, .12); }
.pts-field-err { display: none; color: var(--pts-danger); font-size: calc(12.5px * var(--pts-fs, 1)); font-weight: 500; line-height: 1.3; }
.pts-field-err:not(:empty) { display: block; }
.pts-app .pts-input.is-shake { animation: pts-shake .36s ease; }
@keyframes pts-shake { 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .pts-app .pts-input.is-shake { animation: none; } }
.pts-form { display: flex; flex-direction: column; gap: 16px; }
.pts-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pts-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.pts-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pts-checkbox { flex: none; width: 24px; height: 24px; border: 1.5px solid var(--pts-border); border-radius: 6px; background: var(--pts-card); margin-top: 1px; }
.pts-check input:checked + .pts-checkbox {
  background: var(--pts-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  border-color: var(--pts-accent);
}
.pts-check input:focus-visible + .pts-checkbox { box-shadow: 0 0 0 3px var(--pts-accent-soft); }

.pts-error { display: none; color: var(--pts-danger); background: #fdecec; border-radius: 12px; padding: 12px 14px; font-size: calc(15px * var(--pts-fs, 1)); }
.pts-error.is-visible { display: block; }
.pts-notice { display: flex; gap: 10px; align-items: flex-start; background: #fff7e6; border-radius: 12px; padding: 12px 14px; font-size: calc(15px * var(--pts-fs, 1)); }
.pts-notice svg { flex: none; }

/* ---------- Step: dates ---------- */
.pts-dt-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; margin-top: 8px; }
.pts-dt-row .pts-field, .pts-dt-row .pts-input { min-width: 0; }
.pts-app input[type="date"].pts-input { padding-right: 10px; }
.pts-date-long { margin-top: 6px; }
.pts-duration { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--pts-accent); font-weight: 600; }

.pts-app .pts-rating-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  background: var(--pts-bg); border: 0; border-radius: 999px; padding: 8px 12px;
  color: var(--pts-text); cursor: pointer; font-size: calc(15px * var(--pts-fs, 1));
}
.pts-app .pts-rating-link:hover { background: var(--pts-accent-soft); }

/* ---------- Step: dates — calendrier (choix d'une période) ---------- */
/* Calendrier resserré pour faire à peu près la même hauteur que le choix des bagages (choix de l'utilisateur 18/10/2026) */
.pts-app .pts-cal-card { padding: 6px 10px 10px; }
.pts-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.pts-app .pts-cal-head .pts-icon-btn { width: 32px; height: 32px; }
.pts-cal-title { font-size: calc(18px * var(--pts-fs, 1)); font-weight: 700; }
.pts-app .pts-cal-nav:disabled { visibility: hidden; } /* flèche grisée retirée (choix de l'utilisateur 18/10/2026) ; sa place est gardée, le mois reste centré */
.pts-cal-next svg { transform: rotate(180deg); }
.pts-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 1px; }
.pts-cal-wd { text-align: center; font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); padding: 0 0 2px; text-transform: capitalize; }
.pts-app .pts-cal-day {
  position: relative; height: 30px; border: 0; border-radius: 0; background: transparent; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--pts-text); font-size: calc(16px * var(--pts-fs, 1)); font-weight: 500; cursor: pointer;
}
.pts-cal-day > span {
  position: relative; z-index: 1; width: 29px; height: 29px; max-width: 100%;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.pts-app .pts-cal-day:hover:not(:disabled) > span { background: var(--pts-accent-soft); }
.pts-app .pts-cal-day:disabled { color: #c6c6d4; cursor: not-allowed; }
.pts-app .pts-cal-day:focus-visible { outline: none; }
.pts-app .pts-cal-day:focus-visible > span { box-shadow: 0 0 0 2px var(--pts-accent); }
.pts-cal-day.is-today > span::after {
  content: ""; position: absolute; bottom: 3px; left: 50%; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor;
}
/* Période : bande colorée entre le dépôt et le retrait */
.pts-app .pts-cal-day.in-range, .pts-app .pts-cal-day.in-preview { background: var(--pts-accent-soft); }
.pts-app .pts-cal-day.is-start.has-range { background: linear-gradient(90deg, transparent 50%, var(--pts-accent-soft) 50%); }
.pts-app .pts-cal-day.is-end { background: linear-gradient(90deg, var(--pts-accent-soft) 50%, transparent 50%); }
.pts-app .pts-cal-day.is-start.is-end { background: none; }
.pts-app .pts-cal-day.is-start > span, .pts-app .pts-cal-day.is-end > span { background: var(--pts-accent); color: #fff; font-weight: 700; }

.pts-range { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--pts-border); }
.pts-range-part { display: flex; flex-direction: column; min-width: 0; }
.pts-range-part strong { font-size: calc(16px * var(--pts-fs, 1)); }
.pts-range-arrow { color: var(--pts-muted); font-size: calc(18px * var(--pts-fs, 1)); }
.pts-days-pill {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--pts-accent-soft); color: var(--pts-accent); font-weight: 700;
  border-radius: 999px; padding: 8px 14px; white-space: nowrap;
}
.pts-app .pts-cal-hint { margin: 4px 0 0; }

/* ---------- Step: bags ---------- */
/* Cartes compactes (choix de l'utilisateur 18/10/2026 : zone trop longue) : image | nom, description, prix | − n + à droite */
.pts-app .pts-card.pts-bag { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 12px 8px 8px; }
.pts-app .pts-card.pts-bag + .pts-card.pts-bag { margin-top: -4px; } /* 8 px entre les cartes */
.pts-intro:has(+ .pts-bag-grid) { font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); line-height: 1.35; } /* phrase d'intro en petit gris */
.pts-bag-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.pts-bag-info > * { grid-column: 1; }
.pts-bag-info > .pts-qty { grid-column: 2; grid-row: 1 / span 3; } /* nom, description, prix */
.pts-bag-info .pts-muted { font-size: calc(13px * var(--pts-fs, 1)); line-height: 1.3; }
/* Liste des tailles, une carte par ligne (essayé Petit et Standard côte à côte, puis retour à la liste, 18/10/2026) */
.pts-bag-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pts-app .pts-bag-grid .pts-card.pts-bag + .pts-card.pts-bag { margin-top: 0; }
/* Téléphone / fenêtre étroite : zone des bagages à la même hauteur que le calendrier (≈ 298 px), place en plus partagée entre les cartes
   (choix de l'utilisateur 18/10/2026). */
@media (max-width: 899px) { .pts-body > .pts-bag-grid { min-height: 298px; align-content: stretch; } }
/* Description des cartes côte à côte : petite, interligne serré, coupée proprement sur plusieurs lignes si besoin */
.pts-bag-img { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 6px; }
.pts-bag-img::before {
  content: ""; position: absolute; inset: 8% 6% 4% 6%;
  background: #eeeefa; border-radius: 14px; transform: rotate(-4deg);
}
.pts-bag-img img { position: relative; width: 90%; }
/* Standard : une carte grise qu'on retourne d'un appui, valise au recto, sac à dos au verso (26/10/2026, choix de
   l'utilisateur ; essayés : fondu, cartes qui s'échangent, retournement automatique). Les deux faces sont
   superposées, faces arrière masquées ; un petit rond « flèches qui tournent » en bas montre qu'on peut toucher. */
.pts-bag-img.is-swap { perspective: 420px; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 14px; }
.pts-bag-img.is-swap:focus { outline: none; }
.pts-bag-img.is-swap:focus-visible { outline: 2px solid var(--pts-accent); outline-offset: 2px; }
.pts-bag-img.is-swap::before { display: none; } /* la carte grise est portée par chaque face */
.pts-bag-img.is-swap .pts-swap-a, .pts-bag-img.is-swap .pts-swap-b {
  position: absolute; top: 50%; left: 50%; display: block; width: 86%; box-sizing: border-box; padding: 2%;
  background: #eeeefa; border-radius: 14px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.45, .05, .25, 1);
}
.pts-bag-img.is-swap .pts-swap-a { transform: translate(-50%, -50%) rotate(-4deg) rotateY(0deg); }
.pts-bag-img.is-swap .pts-swap-b { transform: translate(-50%, -50%) rotate(-4deg) rotateY(-180deg); }
.pts-bag-img.is-swap.is-flipped .pts-swap-a { transform: translate(-50%, -50%) rotate(-4deg) rotateY(180deg); }
.pts-bag-img.is-swap.is-flipped .pts-swap-b { transform: translate(-50%, -50%) rotate(-4deg) rotateY(0deg); }
/* Le dessin est redressé dans la carte penchée (cadre en biais, valise / sac à dos droits, comme les autres cartes). */
.pts-bag-img.is-swap .pts-swap-a img, .pts-bag-img.is-swap .pts-swap-b img { display: block; width: 100%; transform: rotate(4deg); }
/* Petit rond en bas à droite : flèches qui tournent, petit coup de poignet régulier tant qu'on n'a pas touché. */
.pts-flip-hint {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; color: var(--pts-accent, #5046e5); box-shadow: 0 2px 6px rgba(30, 30, 60, .2);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  animation: pts-flip-hint 2.6s ease-in-out infinite;
}
.pts-flip-hint svg { width: 14px; height: 14px; }
.is-touched .pts-flip-hint { animation: none; }
@keyframes pts-flip-hint {
  0%, 62%, 100% { transform: rotate(0deg) scale(1); }
  72% { transform: rotate(-40deg) scale(1.12); }
  84% { transform: rotate(20deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .pts-bag-img.is-swap .pts-swap-a, .pts-bag-img.is-swap .pts-swap-b { transition: none; }
  .pts-flip-hint { animation: none; }
}
/* Dessins du convoi en grand (choix de l'utilisateur 18/10/2026) : sac à main, valise standard, grande valise debout */
.pts-bag-img svg { position: relative; display: block; width: 84%; height: auto; }
.pts-bag-img.is-odd svg { width: 60%; } /* grande valise debout : plus étroite que haute */
.pts-bag-img svg.pts-orig { width: 46%; } /* valises d'origine en couleur (BAG_COLORS) */
.pts-bag-img.is-odd svg.pts-orig { width: 72%; }
.pts-bag-img.is-small svg.pts-orig { width: 66%; }
.pts-bag-img .pts-wheel { transform-box: fill-box; transform-origin: center; }
/* … qui bougent comme dans la file (19/10/2026, choix de l'utilisateur) : roues qui tournent, petit sautillement */
.pts-bag-img.is-live svg { animation: pts-card-bump .48s ease-in-out infinite; } /* sautillement très léger (19/10/2026, choix de l'utilisateur) */
.pts-bag-img.is-live .pts-wheel { animation: pts-tk-spin .5s linear infinite; }
/* Sac à main : même sautillement très léger que les valises (19/10/2026, choix de l'utilisateur ; bonds pts-card-hop essayés puis retirés) */
/* Bonds plus petits que dans la file : le dessin est grand (19/10/2026, choix de l'utilisateur) */
@keyframes pts-card-hop {
  0% { transform: none; animation-timing-function: cubic-bezier(.33, .66, .66, 1); }
  31% { transform: translateY(-2.5px); animation-timing-function: cubic-bezier(.33, 0, .66, .34); }
  62% { transform: none; animation-timing-function: ease-out; }
  72% { transform: scale(1.015, .985); animation-timing-function: ease-in-out; } /* tassement à peine visible (19/10/2026) */
  82%, 100% { transform: none; }
}
@keyframes pts-card-bump { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1px; } }
@media (prefers-reduced-motion: reduce) { .pts-bag-img.is-live svg, .pts-bag-img.is-live .pts-wheel { animation: none; } }
.pts-bag-title { font-size: calc(18px * var(--pts-fs, 1)); font-weight: 700; }
.pts-bag-price { font-size: calc(14px * var(--pts-fs, 1)); color: var(--pts-accent); font-weight: 600; margin-top: 2px; }
.pts-qty { display: flex; align-items: center; gap: 8px; }
.pts-app .pts-qty-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--pts-border); background: var(--pts-card); color: var(--pts-text);
  font-size: calc(24px * var(--pts-fs, 1)); line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.pts-app .pts-qty-btn:hover:not(:disabled) { border-color: var(--pts-text); }
.pts-app .pts-qty-btn:disabled { background: #f0f0f6; color: #b5b5c5; cursor: not-allowed; }
.pts-qty-n { min-width: 20px; text-align: center; font-size: calc(21px * var(--pts-fs, 1)); font-weight: 700; }

/* ---------- Step: summary ---------- */
.pts-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.pts-edit-row svg { flex: none; color: var(--pts-muted); }
.pts-edit-row > span:first-of-type { flex: 1; min-width: 0; }
.pts-edit-bags { align-items: center; }
/* Cadre fixe des bagages : 3 cases liées (Petit, Standard, Hors format), valise + nombre à droite */
.pts-bag-slots {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 320px;
  border: 1.5px solid var(--pts-border); border-radius: 12px; overflow: hidden; background: #fff;
}
.pts-bag-slot { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 7px 6px; }
.pts-bag-slot + .pts-bag-slot { border-left: 1.5px solid var(--pts-border); }
.pts-bag-slot img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.pts-bag-slot b { font-size: calc(15px * var(--pts-fs, 1)); font-weight: 700; color: var(--pts-muted); }
.pts-bag-slot.is-on b { color: var(--pts-text); }

.pts-pay-methods { min-width: 0; border: 0; padding: 0; margin: 0; }
.pts-form > .pts-sep { margin: 4px 0; }
.pts-pay-methods legend { float: left; width: 100%; }
.pts-radio-row { clear: both; display: flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; }
.pts-radio-row + .pts-radio-row { border-top: 1px solid var(--pts-border); }
.pts-radio-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pts-pm-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--pts-bg); display: inline-flex; align-items: center; justify-content: center; }
.pts-pm-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pts-pm-label { font-weight: 500; }
/* Place garantie (carte) / non garantie (sur place) */
.pts-pm-badge { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin: 3px 0 2px; padding: 2px 8px; border-radius: 999px; font-size: calc(12.5px * var(--pts-fs, 1)); font-weight: 600; }
.pts-pm-badge svg { width: 13px; height: 13px; }
.pts-pm-badge.is-ok { background: #e3f6ea; color: #1b7a3d; }
.pts-pm-badge.is-warn { background: #fff1de; color: #b25e00; }
.pts-pay-online .pts-btn { margin-bottom: 8px; }
#pts-pay-online svg { flex: none; } /* petite carte bancaire avant « Payer en ligne » */
.pts-pay-online > .pts-notice { margin: -6px -6px 14px; } /* encadré « à régler sur place / place non garantie » en haut du même cadre */
/* Cadre qui pousse à payer en ligne (« Ma réservation », réservation sur place non payée) */
.pts-pay-online.is-nudge { border: 1.5px solid #f3d9b0; }
.pts-nudge-head { display: flex; gap: 10px; align-items: flex-start; margin: -6px -6px 12px; padding: 12px 14px; border-radius: 12px; background: #fff7e6; color: #b25e00; }
.pts-nudge-head svg { flex: none; margin-top: 1px; }
.pts-nudge-head strong { display: block; font-weight: 800; font-size: calc(15.5px * var(--pts-fs, 1)); line-height: 1.25; }
.pts-nudge-head span { display: block; margin-top: 3px; color: #6e5a3c; font-size: calc(13px * var(--pts-fs, 1)); line-height: 1.4; }
.pts-app .pts-nudge-perks { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pts-nudge-perks li { display: flex; gap: 8px; align-items: flex-start; font-size: calc(14px * var(--pts-fs, 1)); line-height: 1.35; color: var(--pts-text); }
.pts-nudge-perks svg { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: #e3f6ea; color: #1b7a3d; }
.pts-app .pts-nudge-alt { margin: 4px 0 0; text-align: center; font-size: calc(12px * var(--pts-fs, 1)); }
/* Champs de la carte ouverts sous « Carte bancaire » (récapitulatif) */
.pts-card-details { padding: 2px 0 14px; }
.pts-card-details #pts-inline-card { min-height: 60px; }
.pts-card-details .pts-secure { margin: 10px 0 0; }
.pts-pay-online #pts-switch-payment-element { margin: 4px 0 12px; min-height: 60px; }
.pts-warn-txt { display: inline-block; margin-top: 4px; color: #b25e00; font-weight: 600; }
.pts-radio { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pts-border); background: var(--pts-card); }
.pts-radio-row input:checked + .pts-radio { border: 7px solid var(--pts-accent); }
.pts-radio-row input:focus-visible + .pts-radio { box-shadow: 0 0 0 3px var(--pts-accent-soft); }

/* Code promo sous les moyens de paiement du récapitulatif (19/10/2026) : petit lien discret, champ + « Appliquer »,
   puis ligne verte « Code promo HELLO −3,00 € · Retirer ». */
.pts-app .pts-promo-link { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--pts-muted); font-size: calc(13.5px * var(--pts-fs, 1)); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.pts-app .pts-promo-link:hover { color: var(--pts-accent); }
.pts-app .pts-promo-link svg, .pts-app .pts-promo svg, .pts-app .pts-pay-promo svg { flex: none; width: 16px; height: 16px; }
.pts-app .pts-promo { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; color: var(--pts-text); font-size: calc(14px * var(--pts-fs, 1)); }
.pts-app .pts-promo-open { flex-direction: column; align-items: stretch; gap: 4px; }
.pts-app .pts-promo-form { display: flex; gap: 8px; }
.pts-app .pts-promo-form .pts-input { flex: 1; min-width: 0; min-height: 42px; padding: 8px 12px; text-transform: uppercase; letter-spacing: .04em; }
.pts-app .pts-promo-form .pts-input::placeholder { text-transform: none; letter-spacing: 0; }
.pts-app .pts-promo-form .pts-btn-small { min-height: 42px; padding: 8px 16px; font-size: calc(15px * var(--pts-fs, 1)); }
.pts-app .pts-promo-applied { color: var(--pts-success); background: #e3f6ea; border-radius: 10px; padding: 6px 10px; }
.pts-app .pts-promo-applied .pts-promo-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.pts-app .pts-promo-applied .pts-promo-amt { white-space: nowrap; }
.pts-app .pts-promo-applied .pts-link { margin-left: 4px; padding: 2px 0; font-size: calc(13.5px * var(--pts-fs, 1)); color: var(--pts-muted); text-decoration: underline; }
.pts-app .pts-promo-msg { margin: 0; }
.pts-app .pts-pay-promo { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 4px; color: var(--pts-success); font-weight: 600; font-size: calc(14px * var(--pts-fs, 1)); }

.pts-breakdown { padding: 0 4px; }
.pts-bd-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.pts-bd-discount { color: var(--pts-success); }
.pts-with-info { display: inline-flex; align-items: center; gap: 6px; }
.pts-info { display: inline-flex; color: var(--pts-muted); cursor: help; }
.pts-bd-total { display: flex; justify-content: space-between; border-top: 1px solid var(--pts-border); margin-top: 8px; padding-top: 14px; font-size: calc(24px * var(--pts-fs, 1)); font-weight: 800; }
.pts-near-links { margin: 18px 0 0; text-align: center; font-size: calc(13px * var(--pts-fs, 1)); line-height: 1.6; color: var(--pts-muted); }
.pts-app .pts-near-links a { color: var(--pts-muted); }
.pts-near-links + .pts-legal-links { margin-top: 6px; }
.pts-legal-links { margin: 18px 0 0; text-align: center; font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-app .pts-legal-links a { color: var(--pts-muted); }
.pts-legal { color: var(--pts-muted); font-size: calc(15px * var(--pts-fs, 1)); margin: 0; padding: 0 4px; }
/* « Consigne exploitée par … » (Pose ton sac intermédiaire) : petite ligne grise, fiche et récapitulatif. */
.pts-app .pts-operator { color: var(--pts-muted); font-size: calc(10px * var(--pts-fs, 1)); line-height: 1.35; margin: auto 0 -14px; padding: 56px 4px 0; text-align: center; opacity: .8; } /* le plus bas possible : collé au bas du panneau, juste au-dessus du bouton (choix de l'utilisateur 19/10/2026) */ /* tout petit, tout en bas (choix de l'utilisateur 19/10/2026) */
.pts-app .pts-legal + .pts-operator { margin-top: 6px; padding-top: 0; text-align: left; }

/* ---------- Step: payment ---------- */
.pts-pay-total { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.pts-pay-total strong { font-size: calc(32px * var(--pts-fs, 1)); font-weight: 800; }
.pts-secure { display: flex; gap: 8px; align-items: flex-start; color: var(--pts-muted); font-size: calc(14px * var(--pts-fs, 1)); margin: 0; }
.pts-secure svg { flex: none; margin-top: 2px; }
#pts-payment-element { min-height: 120px; }

/* ---------- Done / view ---------- */
.pts-success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
.pts-success-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--pts-success); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
/* QR code du comptoir à la place du rond vert (page confirmée, 22/10/2026) : coche verte posée sur le coin. */
.pts-success-qr { position: relative; display: block; width: 184px; max-width: 70%; margin: 8px auto 4px; padding: 4px; border: 1px solid var(--pts-border); border-radius: 12px; background: #fff; }
.pts-success-qr > svg { display: block; width: 100%; height: auto; }
.pts-success-badge { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--pts-success); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px #fff; }
.pts-success-badge svg { width: 24px; height: 24px; }
.pts-ref-card { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.pts-ref { font-size: calc(30px * var(--pts-fs, 1)); font-weight: 800; letter-spacing: 2px; color: var(--pts-accent); }
.pts-ref-card:not(.pts-staff) { touch-action: manipulation; user-select: none; -webkit-user-select: none; } /* ni zoom ni texte surligné pendant les 6 touches */
/* Référence façon billet : étapes Réservé → Dépôt → Retrait (vert = fait, gris = étape à venir ; plus d'orange :
   il faisait penser à « en cours de validation », choix de l'utilisateur 14/10/2026) */
/* Billet tout blanc, comme les animations des e-mails (choix de l'utilisateur 17/10/2026 ; avant : violet) */
.pts-ticket { background: #fff; color: var(--pts-text); gap: 0; padding: 20px 18px 16px; overflow: hidden; }
.pts-ticket .pts-ref { color: var(--pts-text); margin-top: 2px; }
/* Parcours : petite scène blanche comme les animations des e-mails (route, nuages, arbre) */
.pts-tk-scene { position: relative; overflow: hidden; margin: -10px -10px 0; padding: 30px 22px 6px; }
.pts-tk-cloud { position: absolute; top: 6px; pointer-events: none; }
.pts-tk-cloud.is-left { left: 14%; }
.pts-tk-cloud.is-right { right: 8%; top: 4px; }
.pts-tk-tree { position: absolute; left: 70%; top: 14px; pointer-events: none; }
.pts-tk-steps { display: flex; align-items: center; gap: 0; position: relative; margin-top: 8px; z-index: 1; }
/* Petite valise des animations (sans rond autour) : roues sur la ligne, rayon des roues qui tourne */
.pts-tk-bag { position: absolute; z-index: 3; top: 50%; left: var(--to); width: 36px; height: 33px; margin: -29px 0 0 -18px; display: block; }
.pts-tk-bag svg { display: block; }
/* Valises d'origine en couleur, autant que dans la réservation (19/10/2026) : les mêmes que la file de la route (.pts-cv-bag :
   tailles, sautillement l'une après l'autre, sac à main posé sur les valises standard), en rangée posée en bas de la place
   de la valise du billet, centrée sur elle ; --f = échelle si la rangée est trop large (tkArt). Les roues tournent comme
   celles de la valise du billet ; pas de balancement d'ensemble (chaque valise a le sien). */
.pts-tk-group { position: absolute; left: 50%; bottom: 0; display: flex; align-items: flex-end; padding-right: 3px; transform: translateX(-50%) scale(var(--f, 1)); transform-origin: 50% 100%; }
.pts-tk-group.has-stack { --cv-h: 42px; }
.pts-tk-bag .pts-tk-group svg { animation: none !important; }
/* Bagages déposés (tkSwallow) : la file roule jusqu'au pied de l'épingle, rangée calée à droite pour avancer quand une
   valise saute dedans. */
.pts-tk-bag.is-in-cv { animation: pts-tk-roll 2s cubic-bezier(.45, 0, .2, 1) .2s both; }
.pts-tk-bag.is-in-cv .pts-wheel, .pts-tk-bag.is-collect-cv .pts-wheel { animation: pts-tk-spin .45s linear infinite; }
/* Récupéré (tkCollect) : rangée cachée au départ, puis sortie de l'épingle, trajet et sauts menés par le script ; avion aussi. */
.pts-tk-bag.is-collect-cv { opacity: 0; }
.pts-tk-plane.is-js { animation: none; }
.pts-tk-bag.is-in-cv .pts-tk-group, .pts-tk-bag.is-collect-cv .pts-tk-group { left: auto; right: 50%; transform: scale(var(--f, 1)); transform-origin: 100% 100%; } /* sinon le balancement d'ensemble du billet (pts-tk-bob) s'ajoute */
.pts-tk-bag .pts-wheel { transform-box: fill-box; transform-origin: center; }
.pts-tk-bag.is-rolling .pts-wheel, .pts-tk-bag.is-in .pts-wheel, .pts-tk-bag.is-out .pts-wheel { animation: pts-tk-spin .45s linear infinite; }
.pts-tk-bag.is-rolling svg { animation: pts-tk-bob .24s ease-in-out infinite alternate; }
.pts-tk-bag.is-in svg, .pts-tk-bag.is-out svg { animation: pts-tk-bob .2s ease-in-out 7 alternate; }
/* Étape « Dépôt » : l'épingle blanche (vide, puis le logo, puis cochée) */
.pts-tk-pin { flex: none; position: relative; z-index: 2; width: 33px; height: 41px; margin-top: -13px; display: inline-flex; filter: drop-shadow(0 2px 3px rgba(80, 70, 229, .3)); }
.pts-tk-pin.is-anim { animation: pts-tk-pop .4s ease-out var(--pin-at, 1.55s) both; }
.pts-tk-pin.is-anim .pts-pin-bag { animation: pts-tk-show .2s ease-out calc(var(--pin-at, 1.55s) - .05s) both; }
/* Bagages déposés : la valise « attend » dans l'épingle (choix de l'utilisateur 18/10/2026) : petit trépignement
   impatient puis pause, et deux « z » qui montent. En boucle, après l'arrivée de la valise si elle vient d'entrer. */
.pts-tk-pin { --wait-delay: 0s; }
.pts-tk-pin.is-anim { --wait-delay: 2s; }
.pts-tk-pin.is-full .pts-pin-wait { transform-box: fill-box; transform-origin: 50% 100%; animation: pts-tk-wait 2.6s ease-in-out var(--wait-delay) infinite; }
@keyframes pts-tk-wait {
  0%, 45%, 100% { transform: none; }
  52% { transform: translateY(-1.2px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(7deg); }
  68% { transform: translateY(-1px) rotate(-5deg); }
  76% { transform: rotate(3deg); }
  84% { transform: none; }
}
.pts-tk-zz { position: absolute; left: 25px; top: -4px; width: 0; height: 0; pointer-events: none; }
.pts-tk-zz i {
  position: absolute; left: 0; top: 0; font-style: normal; font-weight: 800; font-size: 11px; line-height: 1; color: var(--pts-accent);
  opacity: 0; animation: pts-tk-z 2.6s ease-out calc(var(--wait-delay) + .3s) infinite;
}
.pts-tk-zz i + i { font-size: 8px; animation-delay: calc(var(--wait-delay) + 1.6s); }
@keyframes pts-tk-z {
  0% { opacity: 0; transform: translate(0, 4px) scale(.6); }
  20% { opacity: 1; }
  70% { opacity: .8; }
  100% { opacity: 0; transform: translate(9px, -16px) scale(1.15); }
}
@keyframes pts-tk-show { from { opacity: 0; } to { opacity: 1; } }
/* Réservé : roule jusqu'à mi-chemin */
.pts-tk-bag.is-anim { animation: pts-tk-roll 2s cubic-bezier(.45, 0, .2, 1) .25s both; }
/* Déposé : finit sa route puis saute dans l'épingle */
.pts-tk-bag.is-in { animation: pts-tk-in 1.7s cubic-bezier(.45, 0, .2, 1) .2s both; }
/* Récupéré : ressort de l'épingle, roule jusqu'à « Retrait », puis l'avion décolle */
.pts-tk-bag.is-out { animation: pts-tk-out 1.7s cubic-bezier(.45, 0, .2, 1) .2s both; }
/* L'avion décolle vers la gauche, au-dessus des étapes, pour rester dans le billet (le bord droit le couperait) */
.pts-tk-plane { position: absolute; top: 50%; left: var(--to); width: 90px; height: 40px; margin: -34px 0 0 -46px; opacity: 0; pointer-events: none; animation: pts-tk-fly 2s ease-in 1.75s both; }
.pts-tk-plane svg { transform: scaleX(-1); }
/* Récupéré : en boucle toutes les 5,5 s (sortie, route, avion, pause) */
.pts-tk-bag.is-out.is-loop { animation: pts-tk-out-loop 5.5s ease-in-out .2s infinite both; }
.pts-tk-bag.is-out.is-loop svg { animation: pts-tk-bob .2s ease-in-out infinite alternate; }
.pts-tk-plane.is-loop { animation: pts-tk-fly-loop 5.5s ease-in .2s infinite both; }
@keyframes pts-tk-out-loop {
  0% { left: var(--from); transform: translateY(-10px) scale(.4); opacity: 0; }
  5% { left: var(--from); transform: none; opacity: 1; }
  28% { left: var(--to); transform: none; opacity: 1; }
  32%, 100% { left: var(--to); transform: scale(.4); opacity: 0; }
}
@keyframes pts-tk-fly-loop {
  0%, 31% { opacity: 0; transform: translate(0, 6px) scale(.7); }
  35% { opacity: 1; transform: translate(0, 0) scale(.9); }
  70%, 100% { opacity: 0; transform: translate(-190px, -30px) scale(1); }
}
@keyframes pts-tk-roll { from { left: var(--from); } to { left: var(--to); } }
@keyframes pts-tk-spin { to { transform: rotate(360deg); } }
@keyframes pts-tk-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes pts-tk-in {
  0% { left: var(--from); transform: none; opacity: 1; }
  72% { left: var(--to); transform: none; opacity: 1; }
  86% { left: var(--to); transform: translateY(-16px) scale(.8); opacity: 1; }
  100% { left: var(--to); transform: translateY(-6px) scale(.3); opacity: 0; }
}
@keyframes pts-tk-out {
  0% { left: var(--from); transform: translateY(-10px) scale(.4); opacity: 0; }
  14% { left: var(--from); transform: none; opacity: 1; }
  85% { left: var(--to); transform: none; opacity: 1; }
  100% { left: var(--to); transform: scale(.4); opacity: 0; }
}
@keyframes pts-tk-fly {
  0% { opacity: 0; transform: translate(0, 6px) scale(.7); }
  12% { opacity: 1; transform: translate(0, 0) scale(.9); }
  100% { opacity: 0; transform: translate(-190px, -30px) scale(1); }
}
@keyframes pts-tk-pop { 0% { transform: scale(.85); } 55% { transform: scale(1.15); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pts-tk-bag, .pts-tk-bag svg, .pts-tk-bag .pts-wheel, .pts-tk-plane, .pts-tk-pin.is-anim, .pts-tk-pin .pts-pin-bag, .pts-tk-pin .pts-pin-wait { animation: none !important; }
  .pts-tk-zz { display: none; }
  .pts-tk-bag.is-in, .pts-tk-bag.is-in-cv, .pts-tk-bag.is-collect-cv, .pts-tk-bag.is-out, .pts-tk-plane { display: none; }
}
.pts-tk-dot {
  flex: none; position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #eae8fd; color: var(--pts-accent); border: 2px solid #fff; font-size: calc(14px * var(--pts-fs, 1)); font-weight: 800;
}
.pts-tk-dot.is-done { background: var(--pts-accent); color: #fff; }
.pts-tk-dot.is-now { background: #fff; border-color: var(--pts-accent); }
.pts-tk-dot.is-cancel { background: var(--pts-danger); color: #fff; }   /* réservation annulée : 1er rond rouge avec une croix */
/* Route violet clair avec pointillés blancs au milieu, qui passe sous les étapes */
.pts-tk-line { flex: 1; position: relative; height: 14px; margin: 0 -16px; border-radius: 7px; background: #eae8fd; }
.pts-tk-line::after { content: ""; position: absolute; left: 18px; right: 18px; top: 6px; border-top: 2px dashed #fff; }
.pts-tk-names { display: flex; justify-content: space-between; margin-top: 6px; font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); position: relative; z-index: 1; }
.pts-tk-names > span { width: 64px; text-align: center; }   /* centré sous chaque rond de 28 px */
.pts-tk-names > span:first-child { margin-left: -18px; }
.pts-tk-names > span:last-child { margin-right: -18px; }
.pts-tk-names .is-now { font-weight: 800; color: var(--pts-accent); }
.pts-tk-names .is-cancel { font-weight: 800; color: var(--pts-danger); }
.pts-tk-msg { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; font-size: calc(16px * var(--pts-fs, 1)); font-weight: 600; }
.pts-tk-msg svg { flex: none; width: 20px; height: 20px; color: var(--pts-accent); }
/* QR code scanné au comptoir (PTS_QR, avant le dépôt) : carré blanc, marge blanche comprise dans le SVG. */
.pts-tk-qr { width: 184px; max-width: 70%; margin: 12px auto 2px; padding: 4px; border: 1px solid var(--pts-border); border-radius: 12px; background: #fff; }
.pts-tk-qr svg { display: block; width: 100%; height: auto; }
/* Numéro à 2 chiffres attribué au dépôt (20/10/2026) : en grand, montré au comptoir pour le retrait. */
.pts-tk-tag { display: flex; flex-direction: column; align-items: center; margin: 14px auto 4px; padding: 8px 26px 10px; border: 3px solid var(--pts-accent); border-radius: 16px; width: max-content; max-width: 100%; }
.pts-tk-tag span { font-size: calc(12px * var(--pts-fs, 1)); text-transform: uppercase; letter-spacing: .08em; color: var(--pts-muted, #6e6e85); }
.pts-tk-tag strong { font-size: calc(56px * var(--pts-fs, 1)); line-height: 1.05; font-weight: 800; color: var(--pts-text, #1b1b2f); font-variant-numeric: tabular-nums; }
.pts-tk-tag em { font-style: normal; font-size: calc(12px * var(--pts-fs, 1)); color: var(--pts-muted, #6e6e85); text-align: center; max-width: 230px; margin-top: 2px; }
/* Numéro flou à toucher = retrait validé (31/10/2026, choix de l'utilisateur) */
.pts-app button.pts-tk-tag { position: relative; margin: 14px auto 4px; background: #fff; font-family: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pts-tk-tag.is-blur strong { filter: blur(6px); color: #111; user-select: none; }
.pts-tk-tap { position: absolute; left: calc(50% + 44px); top: 50%; transform: translate(0, -62%); display: flex; color: #111; }
.pts-tk-tag.is-loading .pts-tk-tap { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .pts-tk-tag.is-blur:not(.is-loading) .pts-tk-tap { animation: pts-tap-pulse 1.6s ease-in-out infinite; }
  .pts-tk-tag.is-loading strong { animation: pts-tap-wait .8s ease-in-out infinite alternate; }
  .pts-tk-tag.is-reveal strong { animation: pts-tag-reveal .25s ease-out both; }
}
@keyframes pts-tap-pulse { 50% { transform: translate(0, -62%) scale(1.15); } }
@keyframes pts-tap-wait { to { filter: blur(3px); } }
@keyframes pts-tag-reveal { from { filter: blur(6px); transform: scale(.85); } to { filter: blur(0); transform: none; } }
.pts-tk-foot {
  display: flex; justify-content: space-between; gap: 12px; font-size: calc(14px * var(--pts-fs, 1)); opacity: .9;
  border-top: 2px dashed var(--pts-border); margin: 14px -18px 0; padding: 12px 18px 0; color: var(--pts-muted);
}
.pts-tk-foot > span:last-child { text-align: right; }
/* Réservation déjà payée : cadre blanc sous le billet avec un bandeau vert « Place garantie / Payé · 13,50 € »
   (comme le cadre « Payer en ligne », choix de l'utilisateur 18/10/2026) */
.pts-app .pts-paid-card { padding: 14px; border: 1.5px solid #bfe6cc; }
.pts-paid-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #e3f6ea; color: #1b7a3d; }
.pts-paid-head > svg { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: #1b7a3d; color: #fff; }
.pts-paid-head strong { display: block; font-weight: 800; font-size: calc(16px * var(--pts-fs, 1)); line-height: 1.2; }
.pts-paid-head span { display: block; margin-top: 2px; font-weight: 600; font-size: calc(14px * var(--pts-fs, 1)); }
/* Supplément d'une modification à régler au comptoir (carte payée / montant bloqué), 18/10/2026 */
.pts-paid-head .pts-paid-due { color: #b25e00; font-weight: 700; }
/* « Payer 7,50 € en ligne » sous la ligne orange, dans le même cadre (18/10/2026) */
.pts-paid-card .pts-due-pay { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.pts-paid-card .pts-due-pay p { margin: 0; }
#pts-due-pay svg { flex: none; }
#pts-due-payment-element { min-height: 60px; }
.pts-staff { gap: 12px; }
.pts-collect { display: flex; flex-direction: column; gap: 10px; }
.pts-collect .pts-card-title, .pts-collect p { margin: 0; }
/* Guide « À voir à pied » après le dépôt (19/10/2026) : une ligne par lieu, qui ouvre l'itinéraire à pied */
.pts-guide .pts-card-title { margin-bottom: 2px; }
.pts-guide > p { margin: 0 0 8px; }
.pts-app .pts-guide-list { list-style: none; margin: 0; padding: 0; }
.pts-app .pts-guide-list li { margin: 0; padding: 0; border-top: 1px solid var(--pts-border); }
.pts-app .pts-guide-list li:first-child { border-top: 0; }
.pts-app a.pts-guide-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--pts-text); text-decoration: none; }
.pts-guide-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--pts-accent-soft); color: var(--pts-accent); }
.pts-guide-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.pts-guide-txt strong { font-size: calc(15px * var(--pts-fs, 1)); font-weight: 700; }
.pts-app .pts-guide-list li.is-more { display: none; }
.pts-app .pts-guide.is-open .pts-guide-list li.is-more { display: block; }
.pts-app .pts-guide.is-open .pts-guide-more { display: none; }
.pts-app .pts-guide-more { display: block; margin: 2px auto 0; }
.pts-guide-txt span { font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-guide-min { flex: none; display: flex; align-items: center; gap: 3px; font-size: calc(13px * var(--pts-fs, 1)); font-weight: 700; color: var(--pts-accent); white-space: nowrap; }
.pts-app a.pts-guide-row:hover strong { text-decoration: underline; }
.pts-guide-tip { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--pts-bg); font-size: calc(13px * var(--pts-fs, 1)); line-height: 1.4; }
.pts-guide-tip svg { flex: none; margin-top: 1px; color: var(--pts-accent); }
.pts-guide-h { margin: 14px 0 2px; font-size: calc(16px * var(--pts-fs, 1)); font-weight: 700; }
.pts-guide .pts-card-title + .pts-guide-h { margin-top: 4px; }
/* Parcours conseillé : étapes sur une petite route violet clair à pointillés blancs (comme la barre de progression) */
.pts-app .pts-tour { position: relative; list-style: none; margin: 10px 0 14px; padding: 0; }
.pts-app .pts-tour::before {
  content: ''; position: absolute; left: 13px; top: 16px; bottom: 16px; width: 6px; border-radius: 3px;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, #fff 4px 8px) center / 2px 100% no-repeat, #dedbfa;
}
.pts-app .pts-tour li { margin: 0; padding: 0; }
.pts-app .pts-tour-stop > a, .pts-app .pts-tour-stop.is-home { display: flex; align-items: center; gap: 12px; color: var(--pts-text); text-decoration: none; }
.pts-app .pts-tour-stop > a:hover strong { text-decoration: underline; }
.pts-tour-dot {
  position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--pts-accent); color: #fff; font-weight: 700; font-size: calc(14px * var(--pts-fs, 1)); box-shadow: 0 0 0 3px var(--pts-card);
}
.pts-tour-stop.is-home .pts-tour-dot { background: var(--pts-accent-soft); color: var(--pts-accent); }
.pts-tour-dot svg { width: 18px; height: 18px; }
.pts-app .pts-tour-leg a {
  display: inline-flex; align-items: center; gap: 3px; margin: 2px 0 2px 44px; padding: 3px 0;
  font-size: calc(12px * var(--pts-fs, 1)); font-weight: 700; color: var(--pts-accent); text-decoration: none;
}
.pts-app .pts-tour-btn { text-decoration: none; text-align: center; }
/* Carte du parcours (tracé à pied en pointillés violets, étapes numérotées) */
.pts-tour-map { position: relative; z-index: 0; height: 300px; margin: 10px 0 4px; border-radius: 14px; overflow: hidden; background: #f1f0fe; border: 1px solid var(--pts-border); }
@media (min-width: 900px) { .pts-tour-map { height: 340px; } }
.leaflet-marker-icon.pts-tour-mk { display: grid; place-items: center; border-radius: 50%; background: var(--pts-accent, #5046e5); color: #fff; font: 700 12px/1 system-ui, sans-serif; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(20, 20, 43, .35); }
.leaflet-marker-icon.pts-tour-mk.is-home { background: #fff; color: var(--pts-accent, #5046e5); box-shadow: 0 0 0 2px var(--pts-accent, #5046e5), 0 1px 4px rgba(20, 20, 43, .35); }
.pts-tour-mk svg { width: 16px; height: 16px; }
.pts-incident-cta { text-align: center; }
.pts-app .pts-inc-cancel { align-self: center; color: var(--pts-muted); }
.pts-inc-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.pts-inc-thumb { position: relative; width: 84px; height: 84px; }
.pts-inc-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.pts-app .pts-inc-thumb button {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 0;
  background: var(--pts-text); color: #fff; font-size: calc(16px * var(--pts-fs, 1)); line-height: 1; cursor: pointer;
}
.pts-app .pts-inc-add {
  width: 84px; height: 84px; border: 1.5px dashed var(--pts-border); border-radius: 12px; background: var(--pts-bg);
  color: var(--pts-muted); font: inherit; font-size: calc(12px * var(--pts-fs, 1)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.pts-app .pts-inc-add span { font-size: calc(26px * var(--pts-fs, 1)); line-height: 1; color: var(--pts-accent); }
.pts-my-stars { display: flex; gap: 2px; }
/* Avis laissé : commentaire, mention de validation et lien « Modifier » rapprochés. */
.pts-app .pts-my-review > p { margin: 0; }
.pts-app .pts-my-review .pts-my-comment ~ p,
.pts-app .pts-my-review .pts-edit-review { margin-top: -6px; }
.pts-app .pts-edit-review { align-self: flex-start; margin-left: 0; padding: 0; }
.pts-my-comment { margin: 0; font-style: italic; color: var(--pts-text); white-space: pre-line; }
.pts-g-head .pts-card-title { margin-bottom: 4px; }
.pts-my-review .pts-g-head { margin-top: 6px; }
.pts-g-head p { margin: 0; }
.pts-app a.pts-gcard {
  display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--pts-border); border-radius: 14px;
  color: var(--pts-text); text-decoration: none; background: var(--pts-card);
}
.pts-app a.pts-gcard:hover { border-color: var(--pts-accent); }
.pts-gcard img { display: block; width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.pts-gcard-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pts-gcard-rating { display: flex; align-items: center; gap: 4px; font-size: calc(14px * var(--pts-fs, 1)); }
.pts-gcard > svg { flex: none; color: var(--pts-muted); }
.pts-gcard-photo { position: relative; flex: none; display: flex; min-width: 30px; min-height: 30px; }
.pts-gmaps-badge {
  position: absolute; right: -8px; bottom: -8px; width: 30px; height: 30px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(20, 20, 43, .25); display: flex; align-items: center; justify-content: center;
}
.pts-gcard-photo:not(:has(img)) .pts-gmaps-badge { position: static; }
/* Bulle temporaire au-dessus de la carte cliquée (« Votre avis a été copié… ») */
.pts-app a.pts-gcard { position: relative; }
.pts-toast {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 10; transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: 100%;
  padding: 10px 14px; border-radius: 12px; background: #14142b; color: #fff;
  font-size: calc(14px * var(--pts-fs, 1)); font-weight: 600; line-height: 1.35; box-shadow: 0 8px 24px rgba(20, 20, 43, .25);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.pts-toast::after { /* petite pointe vers la carte */
  content: ""; position: absolute; left: 50%; top: 100%; margin-left: -7px;
  border: 7px solid transparent; border-top-color: #14142b;
}
.pts-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.pts-toast svg { flex: none; width: 18px; height: 18px; color: #4ade80; }
/* Curseur « glisser pour valider le dépôt » */
.pts-slide { position: relative; height: 64px; border-radius: 999px; background: var(--pts-bg); overflow: hidden; user-select: none; -webkit-user-select: none; }
.pts-slide-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; border-radius: 999px; background: var(--pts-accent-soft); }
.pts-slide-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-left: 56px; font-weight: 600; font-size: calc(16px * var(--pts-fs, 1)); color: var(--pts-muted); pointer-events: none; }
.pts-slide-knob {
  position: absolute; left: 4px; top: 4px; width: 56px; height: 56px; border-radius: 50%; background: var(--pts-accent); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; box-shadow: 0 4px 12px rgba(80, 70, 229, .35);
}
.pts-slide-knob:active { cursor: grabbing; }
.pts-slide-knob svg { width: 26px; height: 26px; }
.pts-slide.is-anim .pts-slide-knob { transition: transform .25s ease; }
.pts-slide.is-anim .pts-slide-fill { transition: width .25s ease; }
.pts-slide.is-done .pts-slide-knob { background: #22a55a; box-shadow: 0 4px 12px rgba(34, 165, 90, .35); }
.pts-slide.is-done .pts-slide-fill { background: #e3f6ea; }
.pts-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.pts-dl dt { color: var(--pts-muted); margin: 0; font-weight: 400; }
.pts-dl dd { margin: 0; }
.pts-status-line { display: flex; justify-content: center; }
.pts-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: calc(14px * var(--pts-fs, 1)); font-weight: 600; background: var(--pts-border); }
.pts-badge-confirmed, .pts-badge-dropped_off { background: #e3f6ea; color: #0d7a3c; }
.pts-badge-collected { background: #e8e8f7; color: #3b3b8f; }
.pts-badge-pending { background: #fff2d9; color: #8a5a00; }
.pts-badge-cancelled, .pts-badge-expired { background: #fdecec; color: var(--pts-danger); }
.pts-badge-no_show { background: #ececf1; color: var(--pts-muted); }

/* ---------- Gérer / modifier une réservation ---------- */
.pts-app .pts-manage { display: flex; flex-direction: column; gap: 10px; }
.pts-app .pts-manage .pts-card-title { margin-bottom: 0; }
.pts-app .pts-cancel-link { align-self: center; margin: 2px 0 0; color: var(--pts-danger); }
/* Annulation le jour du dépôt (carte) : raison obligatoire ; seuil atteint : « Pour annuler aujourd'hui, contactez-nous » */
.pts-app .pts-cancel-reasons legend { margin: 0 0 2px; font-weight: 600; }
.pts-app .pts-cancel-reasons .pts-radio-row { padding: 9px 0; }
.pts-app .pts-cancel-reasons .pts-pm-label { font-size: calc(15px * var(--pts-fs, 1)); line-height: 1.3; }
.pts-app .pts-cancel-locked { margin: 2px 0 0; text-align: center; }
.pts-app .pts-cancel-fee { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff7e6; color: #8a4b00; font-weight: 600; font-size: calc(14px * var(--pts-fs, 1)); line-height: 1.4; }
.pts-app .pts-fee-notice { margin: 6px 0 0; font-size: calc(12.5px * var(--pts-fs, 1)); line-height: 1.35; }
.pts-app .pts-cancel-locked a { color: var(--pts-accent); font-weight: 600; word-break: break-all; }
.pts-app .pts-unavailable { display: flex; flex-direction: column; gap: 14px; }
.pts-app .pts-btn-danger { background: var(--pts-danger); color: #fff; }
.pts-app .pts-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--pts-danger) 85%, #000); }
.pts-app .pts-edit-price .pts-breakdown { padding: 0; }
.pts-app .pts-edit-diff { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--pts-bg); font-weight: 600; }
.pts-app .pts-diff-pay { color: var(--pts-accent); background: var(--pts-accent-soft); }
.pts-app .pts-diff-refund { color: var(--pts-success); background: #e3f6ea; }
.pts-app .pts-diff-lower { color: var(--pts-success); background: #e3f6ea; }
/* Hausse de prix d'une réservation carte : supplément par carte ou au comptoir (18/10/2026) */
.pts-app .pts-supp-choice { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pts-app .pts-supp-choice legend { margin: 0 0 8px; }
.pts-app .pts-edit-price > .pts-small { margin: 8px 0 0; }
.pts-app .pts-hold-note { max-width: 340px; margin-top: 4px; }
.pts-app [hidden] { display: none !important; }

/* ---------- Reviews ---------- */
.pts-reviews { display: flex; flex-direction: column; gap: 16px; }
.pts-stars { display: inline-flex; gap: 3px; }
.pts-star { fill: #e0e0ea; }
.pts-star.is-on { fill: var(--pts-star); }
.pts-rating-summary { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.pts-rating-big { text-align: center; }
.pts-rating-avg { font-size: calc(52px * var(--pts-fs, 1)); font-weight: 800; line-height: 1; letter-spacing: -1px; }
.pts-bars { display: flex; flex-direction: column; gap: 6px; }
.pts-bar-row { display: grid; grid-template-columns: 12px 14px 1fr auto; gap: 6px; align-items: center; font-size: calc(15px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-bar-row .pts-star { fill: var(--pts-star); }
.pts-bar { height: 8px; background: var(--pts-disabled); border-radius: 8px; overflow: hidden; }
.pts-bar span { display: block; height: 100%; background: var(--pts-star); border-radius: 8px; }
.pts-bar-n { min-width: 36px; text-align: right; }

.pts-chips { display: flex; gap: 12px; flex-wrap: wrap; }
.pts-app .pts-chip {
  border: 1px solid var(--pts-border); background: var(--pts-card); color: var(--pts-muted);
  border-radius: 999px; padding: 12px 20px; font-size: calc(16px * var(--pts-fs, 1)); cursor: pointer;
}
.pts-app .pts-chip.is-active { background: var(--pts-accent-soft); border-color: var(--pts-accent); color: var(--pts-accent); }

/* Carte d'avis : avatar, nom, date • source (lien) + icône, étoiles, texte coupé + « Afficher plus » */
.pts-app .pts-review { display: flex; flex-direction: column; gap: 12px; border: 1px solid #f0f0f5; box-shadow: none; padding: 16px; }
.pts-review-head { display: flex; gap: 12px; align-items: center; }
.pts-review-who { min-width: 0; }
.pts-avatar { position: relative; overflow: hidden; flex: none; width: 44px; height: 44px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: calc(19px * var(--pts-fs, 1)); }
.pts-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pts-review-author { font-weight: 700; font-size: calc(15px * var(--pts-fs, 1)); }
.pts-review-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.pts-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .6; }
.pts-app .pts-review-source { color: var(--pts-accent); text-decoration: underline; text-underline-offset: 2px; }
.pts-source-icon { flex: none; }
.pts-review-text { margin: 0; } /* commentaire toujours affiché en entier */
.pts-review-photos { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pts-review-photos::-webkit-scrollbar { display: none; }
.pts-app .pts-review-photos button {
  flex: none; width: 76px; height: 76px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: var(--pts-border); cursor: zoom-in;
}
.pts-review-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Photo d'avis en grand */
.pts-lightbox {
  position: fixed; inset: 0; z-index: 100000; background: rgba(10, 10, 20, .92);
  display: flex; align-items: center; justify-content: center; padding: 56px 12px;
}
.pts-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.pts-lightbox button {
  position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: calc(30px * var(--pts-fs, 1)); line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0 0 4px;
}
.pts-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.pts-lightbox .pts-lb-close { top: 12px; right: 12px; }
.pts-lightbox .pts-lb-prev { left: 12px; top: 50%; margin-top: -22px; }
.pts-lightbox .pts-lb-next { right: 12px; top: 50%; margin-top: -22px; }
.pts-lb-count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: calc(14px * var(--pts-fs, 1)); opacity: .8; }
.pts-app .pts-review-more {
  align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -4px;
  color: var(--pts-accent); font-weight: 600; font-size: calc(15px * var(--pts-fs, 1)); cursor: pointer;
}
.pts-app .pts-review-more[hidden] { display: none; }
.pts-app .pts-review-orig {
  align-self: flex-start; background: none; border: 0; padding: 0; margin-top: -4px;
  color: var(--pts-muted); font-size: calc(13px * var(--pts-fs, 1)); cursor: pointer; text-align: left;
}
.pts-app .pts-review-orig span { color: var(--pts-accent); font-weight: 600; }
.pts-app .pts-review-orig em { font-style: normal; display: none; } /* « Traduit par Google · » seulement quand la traduction est affichée */
.pts-app .pts-review-orig.is-translated em { display: inline; }

/* Fiche : avis côte à côte qu'on fait défiler (le suivant dépasse pour inviter à glisser) */
.pts-app .pts-review-strip {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -20px; padding: 2px 20px 8px; scroll-padding: 0 20px; scrollbar-width: none;
}
.pts-review-strip::-webkit-scrollbar { display: none; }
.pts-app .pts-review-strip .pts-review { flex: 0 0 86%; scroll-snap-align: start; }
.pts-app .pts-see-all { align-self: center; margin: 0; font-size: calc(17px * var(--pts-fs, 1)); }

.pts-review-form { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.pts-star-input { display: flex; gap: 4px; }
.pts-app .pts-star-btn { background: none; border: 0; padding: 2px; cursor: pointer; border-radius: 8px; line-height: 0; }
.pts-app .pts-star-btn:focus-visible { outline: 2px solid var(--pts-accent); }

/* ---------- Mise en page avec carte : panneau à gauche, carte à droite ---------- */
/* Pleine largeur, même dans un thème à colonne étroite (les thèmes blocs imposent margin:auto !important). */
.pts-app.pts-has-map {
  max-width: none !important;
  /* --pts-sbw = largeur de la barre de défilement (mesurée en JS), sinon 100vw déborde */
  width: calc(100vw - var(--pts-sbw, 0px));
  margin: 0 0 0 calc(50% - 50vw + var(--pts-sbw, 0px) / 2) !important;
}
body:has(.pts-has-map) { overflow-x: hidden; }

.pts-split { position: relative; height: clamp(640px, calc(100vh - 110px), 980px); }
.pts-map-col { position: absolute; inset: 0; z-index: 0; }
.pts-map { width: 100%; height: 100%; background: #e8ecef; }
/* Pendant le chargement : image floutée du quartier, puis la vraie carte apparaît en fondu.
   Le rond de chargement est centré dans la partie visible, à droite du panneau. */
.pts-map-loading {
  position: absolute; inset: 0; z-index: 400; padding-left: 486px;
  display: flex; align-items: center; justify-content: center;
  background: #e8ecef url('img/map-placeholder.jpg') 62% 50% / cover no-repeat;
  transition: opacity .4s ease, visibility .4s;
}
.pts-map-loading .pts-spinner {
  width: 26px; height: 26px; border-width: 3px; border-color: rgba(255, 255, 255, .7); border-top-color: var(--pts-accent);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .55);
  border-radius: 50%; background: rgba(255, 255, 255, .55);
  /* Le rond n'apparaît que si la carte met plus de 2 secondes à arriver. */
  opacity: 0; animation: pts-spin .7s linear infinite, pts-appear .3s ease 2s forwards;
}
@keyframes pts-appear { to { opacity: 1; } }
.pts-map-col.is-ready .pts-map-loading { opacity: 0; visibility: hidden; }
.pts-map .leaflet-tile-pane { filter: saturate(.6) brightness(1.04) contrast(.95); } /* fond plus doux, le marqueur ressort */
.pts-panel-col {
  position: absolute; z-index: 1;
  top: 16px; bottom: 16px; left: 16px;
  width: 470px; max-width: calc(100% - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px;
  background: var(--pts-bg);
  box-shadow: 0 10px 40px rgba(20, 20, 43, .18);
  scrollbar-width: thin;
}
.pts-has-map .pts-shell { min-height: 100%; border-radius: 0; }
.pts-panel-inner { min-height: 100%; }

/* Marqueur */
.pts-app .pts-pin { background: none; border: 0; }
.pts-pin-inner {
  position: absolute; left: 2px; top: 0;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pts-accent);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.pts-pin-inner svg { transform: rotate(45deg); color: #fff; width: 22px; height: 22px; }
.pts-pin-halo {
  position: absolute; left: 6px; top: 34px; width: 40px; height: 16px; border-radius: 50%;
  background: color-mix(in srgb, var(--pts-accent) 35%, transparent);
  animation: pts-halo 2s ease-out infinite;
}
@keyframes pts-halo { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
/* Bouton « Me localiser » (sous le + / −) et message d'erreur */
.pts-app .pts-locate a { display: flex; align-items: center; justify-content: center; color: #333; }
.pts-app .pts-locate.is-on a { color: #1a73e8; }
.pts-app .pts-locate.is-busy svg { animation: pts-locate-pulse 1s ease-in-out infinite; }
@keyframes pts-locate-pulse { 50% { opacity: .3; } }
.pts-map-msg {
  position: absolute; z-index: 500; top: 12px; right: 60px; max-width: 260px;
  padding: 10px 14px; border-radius: 12px; background: #1f1f2e; color: #fff; font-size: calc(14px * var(--pts-fs, 1)); line-height: 1.35;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.pts-map-msg.is-visible { opacity: 1; visibility: visible; }
.pts-app .leaflet-popup-content { font-size: calc(14px * var(--pts-fs, 1)); line-height: 1.4; }
.pts-app .leaflet-popup-content a { color: var(--pts-accent); font-weight: 600; }

/* ---------- Fiche de la consigne ---------- */
/* Bandeau photo de la consigne (bord arrondi du panneau qui « mord » sur la photo) */
.pts-store-photo { position: relative; margin: -16px -20px -8px; height: 230px; overflow: hidden; background: var(--pts-border); }
.pts-store-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fiche ouverte avec ?louvre… : moitié magasin | moitié lieu, séparées d'un trait blanc */
.pts-store-photo.is-split { display: flex; }
.pts-store-photo.is-split img { width: 50%; flex: none; }
.pts-store-photo.is-split img + img { border-left: 3px solid #fff; }
.pts-app .pts-photo-credit {
  position: absolute; z-index: 1; right: 8px; bottom: 32px; max-width: 46%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .45); color: #fff; text-decoration: none;
  font-size: calc(9px * var(--pts-fs, 1)); line-height: 1.3;
}
.pts-app .pts-name-near { color: var(--pts-accent); }
.pts-store-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px;
  background: var(--pts-bg); border-radius: 24px 24px 0 0;
}
.pts-app .pts-photo-back {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--pts-text); text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
  transition: transform .15s ease;
}
.pts-app .pts-photo-back:hover { transform: scale(1.06); }
.pts-app .pts-photo-back svg { width: 22px; height: 22px; }
.pts-app .pts-store-name { font-size: calc(32px * var(--pts-fs, 1)); line-height: 1.1; font-weight: 800; letter-spacing: -.5px; margin: 8px 0 0; color: var(--pts-text); }
.pts-store-meta { display: flex; align-items: stretch; gap: 20px; }
.pts-store-open, .pts-app .pts-store-rating, .pts-store-hours { display: flex; flex-direction: column; gap: 4px; }
.pts-store-hours { border-left: 1px solid var(--pts-border); padding-left: 20px; white-space: nowrap; }
.pts-store-hours-n { font-size: calc(21px * var(--pts-fs, 1)); font-weight: 600; line-height: 1.4; }
@media (max-width: 400px) { /* 3 colonnes (ouvert, note, horaires) sur un petit téléphone */
  .pts-store-meta { gap: 14px; }
  .pts-app .pts-store-rating, .pts-store-hours { padding-left: 14px; }
}
.pts-app .pts-store-rating {
  border: 0; border-left: 1px solid var(--pts-border); background: none; padding: 0 0 0 20px;
  text-align: left; cursor: pointer; color: var(--pts-text); font-size: calc(16px * var(--pts-fs, 1));
}
.pts-store-rating-n { display: inline-flex; align-items: center; gap: 4px; font-size: calc(21px * var(--pts-fs, 1)); font-weight: 600; }
.pts-open-badge { display: inline-flex; align-items: center; gap: 6px; font-size: calc(21px * var(--pts-fs, 1)); font-weight: 600; }
.pts-open-badge.is-open { color: var(--pts-success); }
.pts-open-badge.is-closed { color: var(--pts-danger); }
.pts-open-txt { color: var(--pts-success); }
.pts-closed-txt { color: var(--pts-danger); }

.pts-app .pts-info-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.pts-info-row { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.pts-info-icon { flex: none; color: var(--pts-text); margin-top: 1px; }
.pts-info-title { font-weight: 600; }
.pts-phone-row { display: flex; align-items: center; gap: 8px; }
.pts-app .pts-contact { display: flex; flex-direction: column; gap: 6px; }
.pts-app .pts-contact-head { display: flex; align-items: center; gap: 6px; } /* « Nous rejoindre : » / « Nous joindre : » */
.pts-app .pts-contact .pts-info-icon { color: var(--pts-text); } /* icônes noires, 25 px (violettes essayées le 4/11/2026) */
.pts-app .pts-contact .pts-info-icon svg { width: 25px; height: 25px; display: block; }
.pts-app .pts-addr-map { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--pts-border); } /* petit plan à gauche de l'adresse */
.pts-app .pts-addr-map img { display: block; width: 44px; height: 34px; object-fit: cover; }
.pts-app .pts-phone-num { flex: 1; min-width: 0; }
.pts-app .pts-phone-tag { flex: none; min-width: 68px; box-sizing: border-box; padding: 3px 8px; border-radius: 999px; text-align: center;
  background: color-mix(in srgb, var(--pts-accent) 14%, #fff); color: color-mix(in srgb, var(--pts-accent) 70%, #000);
  font-size: calc(12px * var(--pts-fs, 1)); font-weight: 600; white-space: nowrap; }
.pts-app .pts-phone-num.is-tel a { font-size: calc(17px * var(--pts-fs, 1)); }
.pts-app .pts-store-phones { border-top: 1px solid var(--pts-border); padding-top: 16px; } /* « Nous joindre » après les avis, trait comme au-dessus des avis */
.pts-app .pts-phone-row.is-card { padding: 2px 0; } /* sans cadre blanc (4/11/2026, choix de l'utilisateur) : « Magasin » au-dessus du numéro, collé à gauche */
.pts-app .pts-phone-row.is-card .pts-phone-num { display: flex; flex-direction: column; }
.pts-app .pts-phone-row.is-card .pts-muted { font-size: calc(12px * var(--pts-fs, 1)); line-height: 1.2; }
.pts-app .pts-phone-num a { color: var(--pts-text); text-decoration: none; }
.pts-app .pts-call-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 30px;
  border-radius: 999px; background: var(--pts-accent); color: #fff; text-decoration: none; }
.pts-app .pts-call-btn:hover { background: color-mix(in srgb, var(--pts-accent) 85%, #000); }
.pts-app .pts-call-btn svg { width: 18px; height: 18px; }
.pts-app .pts-wa-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 30px;
  border-radius: 999px; background: #25d366; color: #fff; text-decoration: none; }
.pts-app .pts-wa-btn:hover { background: #1ebe5b; }
.pts-app .pts-wa-btn svg { width: 20px; height: 20px; }

.pts-hours { border-top: 1px solid var(--pts-border); border-bottom: 1px solid var(--pts-border); padding: 16px 0; }
.pts-hours summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.pts-hours summary::-webkit-details-marker { display: none; }
.pts-hours summary > span { display: flex; flex-direction: column; gap: 2px; }
.pts-hours[open] summary svg { transform: rotate(180deg); }
.pts-hours-row { display: flex; justify-content: space-between; margin-top: 12px; }
.pts-app .pts-section-title { font-size: calc(22px * var(--pts-fs, 1)); font-weight: 700; margin: 0; color: var(--pts-text); }
.pts-store-reviews { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--pts-border); padding-top: 16px; } /* trait laissé par le bloc « Horaires » retiré */

/* En-tête du thème masqué : la carte occupe tout l'écran (moins la barre d'admin WordPress) */
body.pts-fullscreen .pts-split { height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); min-height: 560px; }

/* Marqueurs : survol depuis la liste, consigne affichée */
.pts-app .pts-pin { cursor: pointer; }
.pts-pin-inner { transition: transform .15s ease, background .15s ease; }
.pts-app .pts-pin.is-hover .pts-pin-inner { transform: rotate(-45deg) scale(1.15); background: color-mix(in srgb, var(--pts-accent) 80%, #000); }
.pts-app .pts-pin:not(.is-focus) .pts-pin-inner { width: 42px; height: 42px; left: 5px; top: 6px; }
.pts-app .pts-tooltip { font-weight: 600; font-size: calc(14px * var(--pts-fs, 1)); border-radius: 8px; padding: 4px 10px; }
/* Lieu demandé dans l'adresse (?louvre) : rond orange relié à la consigne en pointillés */
.pts-app .pts-spot { background: none; border: 0; }
.pts-app .pts-spot span { display: block; width: 22px; height: 22px; border-radius: 50%; background: #ff8a3d; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); box-sizing: border-box; }
.pts-app .pts-spot-tip { border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.pts-app .pts-spot-tip::before { display: none; }
.pts-app .pts-spot-tip.is-shop { color: var(--pts-accent); }
.pts-app .pts-spot-tip { text-align: center; }
.pts-app .pts-spot-walk { display: flex; align-items: center; gap: 4px; color: var(--pts-accent); font-size: calc(13px * var(--pts-fs, 1)); }

/* Lien « Toutes les consignes » */
.pts-app .pts-all-link {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  color: var(--pts-text); text-decoration: none; font-weight: 600; font-size: calc(15px * var(--pts-fs, 1));
  background: var(--pts-card); border-radius: 999px; padding: 8px 14px 8px 10px;
  box-shadow: 0 1px 2px rgba(20, 20, 43, .06);
}
.pts-app .pts-all-link svg { width: 18px; height: 18px; }
.pts-app .pts-all-link:hover { background: var(--pts-accent-soft); }
.pts-store-photo + .pts-store-name, .pts-all-link + .pts-store-name { margin-top: 0; }
.pts-all-link + .pts-store-photo { margin-top: 0; border-radius: var(--pts-radius); }

/* Accueil : liste des consignes */
.pts-app .pts-loc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pts-app .pts-loc-list li { margin: 0; }
.pts-app .pts-loc-card {
  display: flex; align-items: center; gap: 14px; padding: 12px;
  color: var(--pts-text); text-decoration: none;
  border: 2px solid transparent; transition: border-color .15s ease, transform .15s ease;
}
.pts-app .pts-loc-card:hover, .pts-app .pts-loc-card:focus-visible { border-color: var(--pts-accent); outline: none; }
.pts-loc-thumb {
  flex: none; width: 76px; height: 76px; border-radius: 12px; overflow: hidden;
  background: var(--pts-accent-soft); color: var(--pts-accent);
  display: flex; align-items: center; justify-content: center;
}
.pts-loc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pts-loc-thumb-empty svg { width: 30px; height: 30px; }
.pts-loc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pts-loc-name { font-size: calc(18px * var(--pts-fs, 1)); font-weight: 700; }
.pts-loc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: calc(14px * var(--pts-fs, 1)); margin-top: 2px; }
.pts-loc-rating { display: inline-flex; align-items: center; gap: 3px; }
.pts-loc-go { flex: none; color: var(--pts-muted); }

/* Mobile / tablette : carte en haut, panneau en dessous */
@media (max-width: 899px) {
  .pts-split, body.pts-fullscreen .pts-split { height: auto; min-height: 0; }
  .pts-map-col { position: relative; inset: auto; height: var(--pts-map-h, 260px); transition: height .3s ease; }
  .pts-map-loading { padding-left: 0; }
  body.pts-fullscreen .pts-map-col { height: var(--pts-map-h, 42vh); }
  .pts-split.is-dragging .pts-map-col { transition: none; }
  /* Le panneau va jusqu'en bas de l'écran, même avec peu de contenu (pas de blanc dessous). */
  body.pts-fullscreen .pts-has-map .pts-shell { min-height: calc(100vh - var(--pts-map-h, 42vh) + 24px - var(--wp-admin--admin-bar--height, 0px)); }
  @supports (height: 100dvh) {
    body.pts-fullscreen .pts-has-map .pts-shell { min-height: calc(100dvh - var(--pts-map-h, 42vh) + 24px - var(--wp-admin--admin-bar--height, 0px)); }
  }

  .pts-panel-col {
    position: relative; inset: auto; width: auto; max-width: none;
    overflow: visible; box-shadow: none;
    margin-top: -24px; border-radius: 24px 24px 0 0;
  }
  .pts-has-map .pts-shell { border-radius: 24px 24px 0 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  .pts-app { margin: 0 auto; }
  .pts-shell, .pts-reviews-widget { border-radius: 0; }
  .pts-store-photo { margin: -12px -16px -8px; height: 200px; }
  .pts-app .pts-store-name { font-size: calc(28px * var(--pts-fs, 1)); }
  .pts-open-badge, .pts-store-rating-n, .pts-store-hours-n { font-size: calc(19px * var(--pts-fs, 1)); }
  .pts-body { padding: 8px 16px 16px; }
  .pts-app .pts-card.pts-bag { grid-template-columns: 72px minmax(0, 1fr); gap: 8px; }
  .pts-qty { gap: 6px; }
  .pts-app .pts-headline { font-size: calc(30px * var(--pts-fs, 1)); }
  .pts-dt-row { grid-template-columns: minmax(0, 1fr) 100px; gap: 8px; }
  .pts-app .pts-input { padding-left: 12px; }
  .pts-app .pts-title { font-size: calc(20px * var(--pts-fs, 1)); }
  .pts-rating-summary { gap: 16px; padding: 16px; }
  .pts-rating-avg { font-size: calc(44px * var(--pts-fs, 1)); }
  .pts-app .pts-review-strip { margin: 0 -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; }
  .pts-chips { gap: 8px; }
  .pts-app .pts-chip { padding: 10px 16px; font-size: calc(15px * var(--pts-fs, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .pts-app *, .pts-app *::before, .pts-app *::after { transition: none !important; animation-duration: 1.5s !important; }
}

/* Menu des langues : bouton avec le drapeau actuel, liste de drapeaux au clic */
.pts-shell { position: relative; }
.pts-header { grid-template-columns: 64px 1fr 64px; }
.pts-header > :last-child { justify-self: end; }
.pts-app .pts-lang { position: relative; }
.pts-app .pts-lang-btn {
  display: inline-flex; align-items: center; gap: 3px;
  height: 36px; padding: 0 6px 0 5px; border-radius: 999px;
  background: #fff; color: var(--pts-muted, #6e6e85); border: 1px solid var(--pts-border);
  cursor: pointer; font: inherit;
}
.pts-app .pts-lang-btn:hover, .pts-app .pts-lang-btn[aria-expanded="true"] { border-color: var(--pts-accent); }
.pts-app .pts-flag {
  display: inline-block; width: 24px; height: 24px; flex: none;
  border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}
.pts-app .pts-flag svg { display: block; width: 100%; height: 100%; }
.pts-app .pts-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  margin: 0; padding: 6px; list-style: none; min-width: 172px;
  background: #fff; border-radius: 14px; box-shadow: 0 8px 30px rgba(20, 20, 43, .18);
}
.pts-app .pts-lang-menu[hidden] { display: none; }
.pts-app .pts-lang-menu li { margin: 0; padding: 0; }
.pts-app .pts-lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 10px; background: none;
  color: var(--pts-text); font: inherit; font-size: calc(15px * var(--pts-fs, 1)); text-align: left; cursor: pointer;
}
.pts-app .pts-lang-menu button:hover, .pts-app .pts-lang-menu button:focus-visible { background: var(--pts-bg); outline: none; }
.pts-app .pts-lang-menu button.is-current { font-weight: 700; }
.pts-app .pts-lang-menu button.is-current::after { content: "✓"; margin-left: auto; color: var(--pts-accent); }
.pts-lang-float { position: absolute; top: 16px; right: 16px; z-index: 3; }
.pts-lang-float .pts-lang-btn { border-color: transparent; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); height: 40px; }
.pts-lang-float ~ .pts-body .pts-headline { padding-right: 76px; }

/* « Oui, j'ai récupéré mes bagages » : la case s'efface sur place, puis l'avis arrive à sa place (choix de l'utilisateur 18/10/2026) */
.pts-collect.is-leaving { animation: pts-swap-out .32s ease-in both; pointer-events: none; }
.pts-swap-in { animation: pts-swap-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes pts-swap-out { to { opacity: 0; transform: scale(.94) translateY(-6px); } }
@keyframes pts-swap-in { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pts-collect.is-leaving, .pts-swap-in { animation: none; } }

/* Ordinateur (panneau à côté de la carte) : on rend l'espace retiré pour le téléphone (choix de l'utilisateur 18/10/2026 :
   « sur PC on a retiré trop d'espace ») ; le téléphone garde la version compacte. */
@media (min-width: 900px) {
  .pts-header { padding: 16px 16px 8px; }
  .pts-body { padding: 16px 20px 24px; gap: 16px; }
  .pts-footer { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .pts-app .pts-intro:has(+ .pts-bag-grid) { font-size: inherit; color: var(--pts-text); line-height: inherit; }
  .pts-bag-grid { gap: 12px; }
  /* Ordinateur : l'étape remplit toujours toute la hauteur du panneau, jusqu'au bouton (choix de l'utilisateur 18/10/2026) :
     les 3 cartes des bagages s'agrandissent à parts égales ; le calendrier aussi (lignes des jours étirées). */
  .pts-body > .pts-bag-grid { flex: 1; grid-auto-rows: 1fr; }
  .pts-body > .pts-cal-card { flex: 1; display: flex; flex-direction: column; }
  .pts-cal-card > .pts-cal { flex: 1; display: flex; flex-direction: column; }
  .pts-cal-card .pts-cal-grid { flex: 1; grid-template-rows: auto; grid-auto-rows: minmax(44px, 1fr); }
  .pts-app .pts-cal-card .pts-cal-day { height: auto; min-height: 44px; }
  .pts-app .pts-card.pts-bag { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 18px 14px 14px; }
  /* Calendrier : espaces d'origine sur ordinateur (même hauteur que le choix des bagages, ≈ 460 px) */
  .pts-app .pts-cal-card { padding: 14px 14px 18px; }
  .pts-cal-head { margin-bottom: 6px; }
  .pts-app .pts-cal-head .pts-icon-btn { width: 44px; height: 44px; }
  .pts-cal-title { font-size: calc(20px * var(--pts-fs, 1)); }
  .pts-cal-grid { row-gap: 4px; }
  .pts-cal-wd { padding: 6px 0 8px; }
  .pts-app .pts-cal-day { height: 44px; }
  .pts-cal-day > span { width: 40px; height: 40px; }
  .pts-range { margin-top: 14px; padding-top: 14px; }
  .pts-app .pts-cal-hint { margin: 10px 0 0; }
  /* Le panneau est rempli jusqu'en bas : plus de blanc sous « Continuer » quand l'étape est courte */
  .pts-panel-inner { display: flex; flex-direction: column; }
  .pts-has-map .pts-panel-inner > .pts-shell { flex: 1 0 auto; }
}

/* Animations de la barre désactivées (ROAD_FX = false dans reservation.js, 18/10/2026) : barre simple d'avant,
   morceaux de 4 px séparés, violet qui se remplit ; annule les règles de la route ci-dessus. */
.pts-app .pts-progress.pts-steps.pts-plain { margin-top: 4px; column-gap: 6px; }
.pts-app .pts-steps.pts-plain span { flex: 1 1 0; height: 4px; border-radius: 4px; background: var(--pts-border); }
.pts-app .pts-steps.pts-plain span.is-done::after { display: block !important; background: var(--pts-accent); border-radius: 4px; }
.pts-app .pts-steps.pts-plain span.is-drain::before { display: block !important; background: var(--pts-accent); border-radius: 4px; }

/* Seulement sur ordinateur (BAGS_INTRO / PROGRESS_BAR = 'pc') : phrase d'intro « Combien de bagages ? », barre simple */
.pts-app .is-pc-only { display: none; }
@media (min-width: 900px) { .pts-app .pts-intro.is-pc-only { display: block; } .pts-app .pts-progress.is-pc-only { display: flex; } }

/* Téléphone (< 900 px) : cadre « Vos coordonnées + Moyen de paiement » compact, à peu près de la hauteur du choix des
   bagages et du calendrier (choix de l'utilisateur 18/10/2026) : plus de phrase « C'est à cette adresse… », titres des
   titres des champs gardés (petits), champs moins hauts, moyens de paiement
   sans la ligne d'explication (les badges Place garantie / non garantie restent). */
@media (max-width: 899px) {
  .pts-app #pts-contact-form { gap: 6px; padding: 12px 14px; }
  .pts-app #pts-contact-form .pts-card-title { font-size: calc(17px * var(--pts-fs, 1)); margin-bottom: 4px; }
  .pts-app #pts-contact-form .pts-contact-intro { display: none; }
  .pts-app #pts-contact-form .pts-field { gap: 3px; } /* titres « Nom complet » / « E-mail » remis (choix de l'utilisateur 18/10/2026) */
  .pts-app #pts-contact-form .pts-label { font-size: calc(14px * var(--pts-fs, 1)); }
  /* « Nom complet » retiré au-dessus du champ (indication dans le champ ; gardé pour les lecteurs d'écran), « E-mail » gardé (choix de l'utilisateur 18/10/2026) */
  .pts-app #pts-contact-form .pts-field:has(#pts-name) .pts-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pts-app #pts-contact-form .pts-input { min-height: 42px; padding: 8px 12px; border-radius: 12px; }
  .pts-app #pts-contact-form > .pts-sep { margin: 2px 0; }
  .pts-app #pts-contact-form .pts-radio-row { padding: 3px 0; gap: 10px; }
  .pts-app #pts-contact-form .pts-pm-icon { width: 32px; height: 32px; }
  .pts-app #pts-contact-form .pts-pm-text > .pts-muted { display: none; }
  .pts-app #pts-contact-form .pts-pm-text > .pts-pm-cover { display: block; margin-top: 3px; font-size: calc(11px * var(--pts-fs, 1)); line-height: 1.25; } /* « Bagages garantis… » gardé sur téléphone (choix de l'utilisateur 18/10/2026) */
  /* Carte bancaire à gauche, paiement sur place à droite, côte à côte (choix de l'utilisateur 18/10/2026) ;
     les champs de la carte passent dessous sur toute la largeur. */
  .pts-app #pts-contact-form .pts-pay-methods { display: flex; flex-wrap: wrap; gap: 8px; }
  .pts-app #pts-contact-form .pts-radio-row { order: 1; flex: 1 1 0; min-width: 0; position: relative; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 8px 30px 8px 10px; border: 1.5px solid var(--pts-border); border-radius: 12px; }
  .pts-app #pts-contact-form .pts-radio-row + .pts-radio-row { border-top: 1.5px solid var(--pts-border); }
  .pts-app #pts-contact-form .pts-radio-row:has(input:checked) { border-color: var(--pts-accent); background: var(--pts-accent-soft); }
  .pts-app #pts-contact-form .pts-radio-row .pts-radio { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; }
  .pts-app #pts-contact-form .pts-radio-row input:checked + .pts-radio { border-width: 6px; }
  .pts-app #pts-contact-form .pts-pm-icon { width: 28px; height: 28px; }
  .pts-app #pts-contact-form .pts-pm-label { font-size: calc(15px * var(--pts-fs, 1)); line-height: 1.2; }
  .pts-app #pts-contact-form .pts-pm-badge { margin: 2px 0 0; padding: 1px 7px; font-size: calc(11.5px * var(--pts-fs, 1)); }
  .pts-app #pts-contact-form .pts-card-details { order: 2; flex: 0 0 100%; }
}

/* Validation du dépôt : déjà payé / à encaisser, sous la barre « Glisser pour valider le dépôt » */
/* Validation du retrait au comptoir (20/10/2026) : numéro en grand, nom et bagages, puis le curseur. */
.pts-staff-tag { font-size: calc(18px * var(--pts-fs, 1)); font-weight: 700; margin: 6px 0 2px; }
.pts-staff-tag strong { font-size: calc(48px * var(--pts-fs, 1)); line-height: 1; font-variant-numeric: tabular-nums; }
.pts-staff-bags { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 14px; }
.pts-staff-money { margin-top: 12px; border-top: 1px solid var(--pts-border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pts-staff-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: calc(14px * var(--pts-fs, 1)); }
.pts-staff-row strong { font-size: calc(16px * var(--pts-fs, 1)); font-weight: 800; white-space: nowrap; }
.pts-staff-row.is-due { color: #b25e00; font-weight: 600; } /* toute la ligne en orange */
.pts-staff-row.is-due.is-refused { color: var(--pts-danger); } /* carte refusée : à régler au comptoir en rouge */
.pts-staff-row.is-ok, .pts-staff-row.is-paid { color: #1b7a3d; font-weight: 600; } /* toute la ligne en vert */
.pts-staff-sync { font-size: calc(12px * var(--pts-fs, 1)); color: var(--pts-muted); }
/* Pas de dépôt sans l'argent (18/10/2026) : refus de la carte en rouge, curseur « X € encaissés » */
.pts-staff-alert { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #c62828; font-size: calc(14px * var(--pts-fs, 1)); }
.pts-staff-alert strong { font-weight: 700; }
.pts-staff-alert .pts-link { color: #c62828; text-decoration: underline; font-size: calc(13px * var(--pts-fs, 1)); padding: 0; }
.pts-slide.is-cash .pts-slide-label { color: #b25e00; font-size: calc(14px * var(--pts-fs, 1)); line-height: 1.2; padding-right: 10px; text-align: center; }
.pts-slide.is-cash.is-refused .pts-slide-label { color: var(--pts-danger); } /* carte refusée : texte de la barre en rouge (choix de l'utilisateur 18/10/2026) */

/* Récapitulatif sur téléphone (< 900 px, choix de l'utilisateur 18/10/2026) : rappel consigne / bagages / dates et détail du
   prix masqués, seul le total reste, dans le bouton « Continuer / Confirmer » : prix à gauche, texte au centre. Ordinateur : inchangé. */
.pts-btn-total { display: none; }
@media (max-width: 899px) {
  .pts-app .pts-sum-detail { display: none; }
  .pts-app .pts-btn.has-total { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 8px; padding-left: 22px; padding-right: 22px; }
  .pts-app .pts-btn.has-total .pts-btn-total { display: inline; grid-column: 1; grid-row: 1; justify-self: start; font-weight: 800; white-space: nowrap; }
  .pts-app .pts-btn.has-total .pts-btn-label { grid-column: 2; grid-row: 1; text-align: center; }
}

/* Petit « i » à côté du nom de la taille → fenêtre d'exemples dessinés (19/10/2026, choix de l'utilisateur) */
.pts-app .pts-bag-i {
  position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: 2px;
  width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--pts-muted); background: none; color: var(--pts-muted);
  font: italic 700 calc(11px * var(--pts-fs, 1))/1 Georgia, serif; cursor: pointer;
}
.pts-app .pts-bag-i:hover { border-color: var(--pts-accent); color: var(--pts-accent); }
.pts-app .pts-bag-i::before { content: ""; position: absolute; inset: -12px; } /* zone tactile plus grande */
.pts-size-dlg {
  --pts-accent: #5046e5; --pts-text: #14142b; --pts-muted: #6e6e85; --pts-fs: 1; /* hors de .pts-app (ajouté à la page) */
  font-family: inherit; box-sizing: border-box;
  position: fixed; inset: 0; z-index: 100000; background: rgba(20, 20, 43, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: pts-size-fade .18s ease-out both;
}
/* Numéro du ticket en haut à gauche, par-dessus la fenêtre d'avis (1/11/2026) */
.pts-tag-corner { position: fixed; top: 12px; left: 12px; z-index: 2; transform: rotate(-20deg); display: flex; flex-direction: column; align-items: center; padding: 6px 14px 8px; border: 3px solid var(--pts-accent); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(20, 20, 43, .25); animation: pts-corner-pop .3s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes pts-corner-pop { from { opacity: 0; transform: rotate(-20deg) scale(.6); } }
/* téléphone : la fenêtre descend un peu pour que le numéro ne cache pas le titre */
@media (max-width: 600px) { .pts-size-dlg.has-tag { padding-top: 64px; } .pts-size-dlg.has-tag .pts-size-card { max-height: calc(100vh - 80px); } }
.pts-tag-corner span { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pts-muted); }
.pts-tag-corner strong { font-size: 34px; line-height: 1.05; font-weight: 800; color: var(--pts-text); font-variant-numeric: tabular-nums; }
.pts-size-dlg.is-closing { animation: pts-size-fade .16s ease-in reverse both; }
.pts-size-card {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow: auto;
  background: #fff; color: var(--pts-text); border-radius: 18px; padding: 20px 18px 18px;
  box-shadow: 0 18px 50px rgba(20, 20, 43, .25); animation: pts-size-pop .26s cubic-bezier(.2, .9, .3, 1.2) both;
}
.pts-size-close {
  position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f0f0f6; color: var(--pts-text); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 0 3px;
}
.pts-size-close:hover { background: #e3e3ee; }
.pts-size-head { display: flex; align-items: baseline; gap: 10px; padding-right: 40px; }
.pts-size-title { font-size: calc(20px * var(--pts-fs, 1)); font-weight: 800; }
.pts-size-price { font-size: calc(14px * var(--pts-fs, 1)); font-weight: 600; color: var(--pts-accent); }
.pts-size-sub { margin: 2px 0 14px; font-size: calc(13px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pts-size-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pts-size-ex { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pts-size-art { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; max-height: 120px; background: #f1f0fe; border-radius: 14px; }
.pts-size-art svg { width: 70%; height: 70%; }
.pts-size-ex figcaption { font-size: calc(13px * var(--pts-fs, 1)); font-weight: 600; line-height: 1.25; }
@keyframes pts-size-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pts-size-pop { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pts-size-dlg, .pts-size-card { animation: none; } }
@media (max-width: 600px) { .pts-size-dlg { --pts-fs: .9; } }
.pts-size-dlg *, .pts-size-dlg *::before { box-sizing: border-box; }

/* « Récupérer mes bagages » (21/10/2026) : question, puis numéro en grand + bagages, puis demande d'avis (style Bounce) */
.pts-app .pts-tk-pickup { width: auto; margin: 6px auto 10px; padding: 0 22px; }
.pts-pick-dlg { --pts-border: #e3e3ee; --pts-star: #ffb400; }
.pts-pick-dlg .pts-size-card { text-align: center; padding: 26px 20px 20px; }
.pts-pick-show .pts-bag-slots { max-width: 300px; margin: 0 auto; }
.pts-pick-ask > svg { width: 44px; height: 44px; color: var(--pts-accent); margin: 0 auto 6px; display: block; }
.pts-pick-title { font-size: calc(21px * var(--pts-fs, 1)); font-weight: 800; line-height: 1.25; padding: 0 22px; }
.pts-pick-sub { margin: 8px 0 18px; font-size: calc(14px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-pick-dlg .pts-btn { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 999px; background: var(--pts-accent); color: #fff; font: inherit; font-size: calc(16px * var(--pts-fs, 1)); font-weight: 700; cursor: pointer; }
/* « J'arrive dans 5 min » sous « Je suis là » : même pilule, contour violet (28/10/2026) */
.pts-pick-dlg .pts-btn.pts-pick-soon { margin-top: 10px; background: #fff; color: var(--pts-accent); box-shadow: inset 0 0 0 2px var(--pts-accent); }
.pts-pick-dlg .pts-link { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 0; background: none; color: var(--pts-muted); font: inherit; font-size: calc(14px * var(--pts-fs, 1)); cursor: pointer; }
.pts-pick-label { font-size: calc(13px * var(--pts-fs, 1)); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pts-muted); }
.pts-pick-num { font-size: calc(96px * var(--pts-fs, 1)); line-height: 1; font-weight: 900; letter-spacing: -2px; color: var(--pts-accent); margin: 4px 0 14px; font-variant-numeric: tabular-nums; }
.pts-pick-show .pts-bag-slots { justify-content: center; }
.pts-pick-show .pts-pick-sub { margin-bottom: 0; }
/* « Dépôt effectué ! Comment s'est passé votre dépôt ? » Facile / Difficile (21/10/2026, comme Bounce) */
.pts-drop-ask .pts-drop-art { display: block; margin: 0 auto 8px; animation: pts-tk-pop .4s ease-out both; }
.pts-drop-done { margin: 0 0 4px; font-size: calc(15px * var(--pts-fs, 1)); color: var(--pts-muted); }
.pts-drop-btns { display: flex; justify-content: center; gap: 36px; margin: 20px 0 4px; }
.pts-pick-dlg .pts-drop-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--pts-muted); font: inherit; font-size: calc(15px * var(--pts-fs, 1)); cursor: pointer; }
.pts-drop-btn > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--pts-accent-soft, #eceafd); color: var(--pts-accent); transition: transform .15s ease, background .15s ease; }
.pts-drop-btn.is-hard > span svg { transform: rotate(180deg) scaleX(-1); } /* pouce vers le bas */
.pts-drop-btn:hover > span { transform: scale(1.06); }
.pts-drop-btn.is-picked > span { background: var(--pts-accent); color: #fff; }
.pts-drop-btn:disabled { cursor: default; }
.pts-drop-btn:disabled:not(.is-picked) { opacity: .45; }
/* Fenêtre de l'e-mail du récapitulatif (emailAsk) : prénom | nom côte à côte, puis l'e-mail */
.pts-mail-ask .pts-mail-cell { display: block; min-width: 0; }
.pts-mail-ask .pts-mail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pts-mail-ask .pts-mail-in { display: block; width: 100%; height: 50px; padding: 0 14px; border: 1.5px solid #e3e3ee; border-radius: 12px; background: #fff; color: var(--pts-text); font: inherit; font-size: 16px; text-align: center; } /* 16 px : pas de zoom sur iPhone */
.pts-mail-ask .pts-mail-in:focus { outline: none; border-color: var(--pts-accent); box-shadow: 0 0 0 3px rgba(80, 70, 229, .15); }
.pts-mail-ask .pts-mail-in.is-invalid { border-color: #d63638; }
.pts-mail-ask .pts-field-err { display: block; margin: 4px 0 10px; color: #d63638; font-size: calc(13px * var(--pts-fs, 1)); }
.pts-mail-ask .pts-mail-in.is-shake { animation: pts-mail-shake .36s ease; }
@keyframes pts-mail-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.pts-rate-img { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 auto 12px; }
.pts-rate-img.is-equity { width: 100%; max-width: 440px; margin-bottom: 4px; } /* client Bounce : graphiques + avis (29/10/2026) */
.pts-rate-equity { margin: 4px 26px 10px; font-size: calc(min(20px, 4.4vw) * var(--pts-fs, 1)); font-weight: 800; line-height: 1.3; color: #14142b; text-align: center; } /* en grand (29/10/2026, choix de l'utilisateur) */
.pts-rate.is-equity .pts-eq-go { width: auto; display: inline-flex; margin: 4px auto 0; padding: 8px 26px 8px 10px; font-size: calc(16px * var(--pts-fs, 1)); } /* bouton « Aidez-nous » comme dans l'e-mail (31/10/2026) */
.pts-rate.is-equity { text-align: center; }
/* Tickets de caisse de la fenêtre d'avis Bounce, avec les montants de la réservation (1/11/2026) */
.pts-eqt { display: flex; gap: 14px; justify-content: center; align-items: flex-start; margin: 6px 0 8px; text-align: left; }
.pts-eqt-col { flex: 1 1 0; min-width: 0; max-width: 200px; }
.pts-eqt-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 30px; border-radius: 9px; background: #78788c; color: #fff; font-size: calc(13px * var(--pts-fs, 1)); font-weight: 800; }
.pts-eqt-head::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; border-radius: 2px; background: #28283c; }
.is-pts .pts-eqt-head { background: #5046e5; }
.pts-eqt-head i { display: flex; width: 18px; height: 18px; border-radius: 50%; background: #fff; overflow: hidden; }
.pts-eqt-head img { width: 100%; height: 100%; object-fit: contain; }
.pts-eqt-slot { margin: -3px 8px 0; padding-bottom: 8px; overflow: hidden; }
.pts-eqt-paper { filter: drop-shadow(0 0 1px rgba(20, 20, 43, .55)); }
.pts-eqt-sheet { position: relative; padding: 10px 9px 40px; background: #fff;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 7px repeat-x; }
.pts-eqt-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: calc(10.5px * var(--pts-fs, 1)); line-height: 1.25; color: #6e6e85; }
.pts-eqt-row b { flex: none; font-size: calc(11.5px * var(--pts-fs, 1)); font-weight: 800; color: #14142b; white-space: nowrap; }
.pts-eqt-row.is-total { margin: 8px 0 0; padding-top: 8px; border-top: 2px dashed #cdcdd8; font-size: calc(12px * var(--pts-fs, 1)); font-weight: 800; color: #14142b; }
.pts-eqt-row.is-total b { font-size: calc(15px * var(--pts-fs, 1)); }
.pts-eqt-for { margin: 12px 0 5px; text-align: center; font-size: calc(10px * var(--pts-fs, 1)); color: #6e6e85; }
.pts-eqt-bar { position: relative; height: 20px; border-radius: 6px; background: #f0f0f5; overflow: hidden; }
.pts-eqt-bar span { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; overflow: hidden; }
.pts-eqt-rest { right: 0; width: calc(100% - var(--w) + 8px); background: #cdcdd8; } /* le reste, qui arrive de la droite */
.pts-eqt-rest em { padding-left: 8px; }
.pts-eqt-own { left: 0; width: var(--w); background: #ffa05a; }
.pts-eqt-bar em { font-style: normal; font-size: calc(9.5px * var(--pts-fs, 1)); font-weight: 800; color: #fff; white-space: nowrap; }
.pts-eqt-rest em { font-weight: 700; }
.pts-eqt-stamp { position: absolute; right: 8px; bottom: 12px; padding: 1px 7px; border: 2.5px solid #e24652; border-radius: 6px; color: #e24652; font-size: calc(13px * var(--pts-fs, 1)); font-weight: 800; transform: rotate(-12deg); background: rgba(255, 255, 255, .7); }
@media (prefers-reduced-motion: no-preference) {
  .pts-eqt.is-play .pts-eqt-paper { animation: pts-eqt-print 1s .2s ease-in-out both; }
  .pts-eqt.is-play .is-pts .pts-eqt-paper { animation-delay: 1.7s; }
  .pts-eqt.is-play .pts-eqt-own { animation: pts-eqt-fill .5s 1.25s ease-out both; }
  .pts-eqt.is-play .pts-eqt-rest { animation: pts-eqt-fill-r .5s 1.25s ease-out both; }
  .pts-eqt.is-play .is-pts .pts-eqt-own, .pts-eqt.is-play .is-pts .pts-eqt-rest { animation-delay: 2.75s; }
  .pts-eqt.is-play .pts-eqt-bar em { animation: pts-eqt-show .25s 1.7s both; }
  .pts-eqt.is-play .is-pts .pts-eqt-bar em { animation-delay: 3.2s; }
  .pts-eqt.is-play .pts-eqt-stamp { animation: pts-eqt-stamp .3s 3.5s cubic-bezier(.3, 1.4, .5, 1) both; }
}
@keyframes pts-eqt-print { from { transform: translateY(-101%); } }
@keyframes pts-eqt-fill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pts-eqt-fill-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pts-eqt-show { from { opacity: 0; } }
@keyframes pts-eqt-stamp { from { opacity: 0; transform: rotate(-12deg) scale(2.2); } }
.pts-eq-why { margin: 12px 4px 12px; font-size: calc(15px * var(--pts-fs, 1)); line-height: 1.5; color: #3d3d55; }
.pts-eq-note { margin: 12px 4px 0; font-size: calc(10px * var(--pts-fs, 1)); line-height: 1.35; color: #8a8aa0; }
.pts-rate-stars { display: flex; justify-content: center; gap: 6px; }
.pts-rate-star { padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.pts-rate-star .pts-star { fill: #dcdce6; transition: fill .1s, transform .1s; }
.pts-rate-star .pts-star.is-on { fill: #ffb400; }
.pts-rate-star:active .pts-star { transform: scale(.9); }


/* Fenêtre d'avis : tout dedans (23/10/2026) — commentaire, envoi, puis guide Google / signaler un problème */
.pts-rate .pts-rate-more { margin-top: 14px; text-align: left; }
.pts-rate .pts-rate-more .pts-input { width: 100%; box-sizing: border-box; font-family: inherit; font-size: 16px; line-height: 1.4; padding: 10px 12px; resize: vertical; }
.pts-rate .pts-rate-more .pts-btn { width: 100%; margin-top: 10px; }
.pts-rate .pts-rate-more .pts-error:empty { display: none; }
.pts-rate.is-next { text-align: center; }
.pts-rate-done { width: 52px; height: 52px; margin: 4px auto 10px; border-radius: 50%; background: #e3f6ea; color: #1b7a3a; display: flex; align-items: center; justify-content: center; }
.pts-rate-done .pts-i-done { width: 28px; height: 28px; }
.pts-g-steps { text-align: left; margin: 12px 0 14px; padding: 0; list-style: none; counter-reset: g; }
.pts-g-steps li { counter-increment: g; position: relative; padding: 6px 0 6px 36px; font-size: calc(15px * var(--pts-fs, 1)); line-height: 1.35; }
.pts-g-steps li::before { content: counter(g); position: absolute; left: 0; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #eef0ff; color: var(--pts-accent, #5046e5); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.pts-rate .pts-g-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; position: relative; text-decoration: none; }
.pts-rate .pts-g-go .pts-gmaps-badge { position: static; width: 26px; height: 26px; }
.pts-rate .pts-rate-later { display: block; margin: 12px auto 0; }
.pts-rate .pts-rate-report { width: 100%; margin-top: 12px; }
.pts-rate.is-next .pts-g-go { margin-top: 16px; }