/* ==========================================================================
   COMPTEURS « MOINS / VALEUR / PLUS » DU MODULE DE RÉSERVATION
   (Marino, 2026-09-10 : « il me faut des champs moins nombre plus, car si
   j'ouvre le clavier ça bugue au moment de refermer sur mobile ».)

   Le champ garde EXACTEMENT la pilule blanche des autres champs du module
   (.fp-resbar-input, assets/css/home.css) : même hauteur, même rayon, même
   fond, pour que la rangée reste alignée. Les deux boutons sont posés à
   l'intérieur de la pilule, en absolu, et le nombre se centre entre eux : la
   mise en page ne bouge donc pas d'un pixel, ni sur téléphone ni sur poste de
   travail. Les flèches natives du champ nombre sont retirées, elles feraient
   doublon avec les boutons.

   Couleurs : uniquement des tokens --fp-*, comme partout ailleurs.
   ========================================================================== */

.fp-resbar-stepper {
  position: relative;
  display: block;
}

.fp-resbar-stepper .fp-resbar-input {
  text-align: center;
  padding-left: 48px;
  padding-right: 48px;
  /* Flèches natives retirées : Firefox d'abord, moteurs WebKit ensuite. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.fp-resbar-stepper .fp-resbar-input::-webkit-outer-spin-button,
.fp-resbar-stepper .fp-resbar-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Sur téléphone, le champ est en lecture seule (assets/js/resbar-stepper.js) :
   le curseur de texte laisserait croire qu'on peut y écrire. */
.fp-resbar-stepper .fp-resbar-input[readonly] {
  cursor: default;
}

/* CHAMP HEURE : MÊME LARGEUR QUE LES AUTRES (Marino, 2026-09-11 : « le bouton
   votre heure pour fêter un anniversaire sur mobile il est trop large le
   champs, faudrait la même largeur que le nb de personnes »).

   C'est un input[type="time"], donc un CONTRÔLE NATIF. Sur iOS, Safari lui
   donne une largeur intrinsèque qui lui est propre et qui ignore la largeur
   demandée tant que -webkit-appearance vaut autre chose que none : le champ
   débordait de sa pilule et paraissait plus large que « Nombre de personnes »,
   qui est un input[type="number"] et n'a pas ce comportement. Le champ date
   voisin y échappe parce que Flatpickr le remplace par un champ texte, donc
   sans contrôle natif.

   appearance: textfield plus haut ne suffit pas : la forme préfixée reste
   nécessaire pour les champs de date et d'heure sur les moteurs WebKit. On
   ajoute donc la remise à zéro préfixée, et on borne la largeur pour de bon
   (min-width: 0 sans quoi un enfant de flex refuse de se réduire sous sa
   largeur intrinsèque, exactement le cas ici).

   Aucun effet ailleurs : le sélecteur d'heure natif s'ouvre toujours au
   toucher, seul son habillage par défaut est retiré. */
.fp-resbar-stepper .fp-resbar-input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.fp-resbar-stepper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fp-primary) 12%, transparent);
  color: var(--fp-primary);
  font-family: var(--fp-font-body);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* Deux appuis rapprochés sur un bouton sont lus comme un double-tap par les
     navigateurs mobiles, qui zooment alors sur la page (Marino, 2026-09-10).
     touch-action: manipulation supprime ce geste sur le bouton seul, le zoom
     à deux doigts restant disponible partout. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}
.fp-resbar-stepper-moins { left: 7px; }
.fp-resbar-stepper-plus { right: 7px; }

.fp-resbar-stepper-btn:hover,
.fp-resbar-stepper-btn:focus-visible {
  background: var(--fp-primary);
  color: var(--fp-white);
}

/* Aux bornes (1 personne, 500 personnes) : le bouton reste en place, éteint,
   plutôt que de disparaître et de décaler le nombre. */
.fp-resbar-stepper-btn[disabled],
.fp-resbar-stepper-btn[aria-disabled="true"] {
  opacity: .3;
  cursor: default;
}
.fp-resbar-stepper-btn[disabled]:hover,
.fp-resbar-stepper-btn[aria-disabled="true"]:hover {
  background: color-mix(in srgb, var(--fp-primary) 12%, transparent);
  color: var(--fp-primary);
}

/* Téléphone : cibles tactiles plus généreuses, le champ n'étant plus
   saisissable, les boutons sont le seul moyen de régler le nombre. */
@media (max-width: 720px) {
  .fp-resbar-stepper .fp-resbar-input {
    padding-left: 54px;
    padding-right: 54px;
  }
  .fp-resbar-stepper-btn {
    width: 38px;
    height: 38px;
    font-size: 1.25rem;
  }
  .fp-resbar-stepper-moins { left: 5px; }
  .fp-resbar-stepper-plus { right: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-resbar-stepper-btn { transition: none; }
}