/* Les quatre cases de réservation, dans le flux : sélecteurs natifs, durées à cocher,
   motos à quantité, phrase de retour tapée. Champs à 16 px au moins, cibles de 44 px. */
.resa .mot { padding-top: 22px; }
.champs { display: grid; gap: 12px; }
.champs label { display: grid; gap: 4px; font-weight: 700; }
.champs select {
  width: 100%; min-height: 48px; padding: 0 40px 0 12px; border: 2px solid var(--encre); border-radius: 0; background: #fff;
  font-size: 17px; font-weight: 400; -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(-45deg, transparent 50%, var(--encre) 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
@media (min-width: 600px) { .champs { grid-template-columns: 1.6fr 1fr; } }

.durees { display: grid; gap: 2px; }
.duree { position: relative; display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.duree input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.duree input:focus-visible + .coche { outline: 2px solid var(--encre); outline-offset: 3px; }
.duree:has(input:checked) b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.duree__ret { color: var(--gris); text-align: right; }
.duree.est-off { color: var(--gris); cursor: not-allowed; }
.duree.est-off .coche { border-color: var(--lib); }

.lignes { display: grid; }
.ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.ligne + .ligne { border-top: 2px dotted var(--lib); }
.ligne__txt { display: grid; min-width: 0; }
.ligne__txt > span { color: var(--gris); }
.ligne__txt .rouge { color: var(--rouge); font-weight: 700; }
.ligne.est-choisie .ligne__txt > span:first-of-type { color: var(--encre); font-weight: 700; }
.qte { display: inline-flex; flex: none; align-items: center; }
.qte button {
  width: 44px; height: 44px; border: 2px solid var(--encre); border-radius: 0; background: #fff; font-weight: 700; font-size: 20px; line-height: 1; cursor: pointer;
}
.qte button:disabled { border-color: var(--lib); color: var(--lib); cursor: not-allowed; }
.qte output { width: 32px; text-align: center; font-weight: 700; font-size: 18px; }

.retour .c-large > * + * { margin-top: 10px; }
.phrase { font-weight: 700; font-size: 19px; line-height: 1.4; }
.retour .touche { margin-top: 18px; }
@media (min-width: 600px) { .phrase { font-size: 22px; } }

.navette .c-large > * + * { margin-top: 6px; }

/* Dernière case, « Retour à l'atelier ». */
.atelier { margin-bottom: 0; }
.atelier .c-large > * + * { margin-top: 6px; }
.atelier__tu .tulip { width: 100%; max-width: 72px; height: auto; aspect-ratio: 1; }
.atelier__tel a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; font-size: 22px; text-decoration: none; }
.mentions { font-size: 14px; line-height: 1.45; color: var(--gris); }