/* Module « Réserver » : rangées à case dessinée, bande des jours, durées, vos vélos, pied qui résume. */
.bloc { margin-top: 20px; }
.bloc:first-child { margin-top: 4px; }
.bloc legend, .bloc-titre { display: block; margin-bottom: 6px; font: 700 15px/1.4 var(--texte); }
.rangee { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 6px 0;
  border: 0; background: none; text-align: left; }
.rangee span { display: flex; flex-direction: column; }
.rangee b { font: 600 16.5px/1.25 var(--texte); }
.rangee small { font: 500 13.5px/1.35 var(--texte); color: var(--gris); }
.rangee em { font: 800 17px/1 var(--texte); font-style: normal; }
.rangee[aria-disabled="true"] { cursor: not-allowed; }
.rangee[aria-disabled="true"] b { color: var(--gris); text-decoration: line-through; }
.rangee[aria-disabled="true"] .boite { border-color: rgb(15 42 58 / .25); }
.durees { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; }
.durees .rangee { min-height: 50px; }

.jours { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.jour { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 70px; padding: 0;
  border: 2px solid rgb(15 42 58 / .16); border-radius: 6px; background: var(--terre); scroll-snap-align: start; }
.jour small { font: 600 12.5px/1.2 var(--texte); color: var(--gris); }
.jour b { font: 800 20px/1.2 var(--texte); }
.jour[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.jour[aria-pressed="true"] small { color: #fff; }
@media (hover: hover) { .jour:not([aria-pressed="true"]):hover { border-color: var(--encre); } }
.select { width: 100%; height: 48px; padding: 0 14px; border: 2px solid var(--encre); border-radius: 6px; background: var(--terre); font: 600 16.5px/1 var(--texte); }

.velos { display: flex; flex-direction: column; }
.velo { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 12px; min-height: 60px; padding: 6px 0;
  box-shadow: 0 1px 0 var(--filet); }
.velo-nom b { display: block; font: 700 16.5px/1.25 var(--texte); }
.velo-nom b small { font: 500 13.5px/1 var(--texte); color: var(--gris); }
.velo-nom .eco, .velo-nom .reste { display: inline-block; margin-right: 10px; font: 600 14px/1.5 var(--texte); }
.velo-nom .eco { color: var(--volet); }
.velo-nom .reste { color: var(--encre); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.velo-prix { font: 800 20px/1 var(--texte); text-align: right; white-space: nowrap; }
.velo .pas output { width: 30px; }
.velo-indispo { font: 600 14px/1.2 var(--texte); color: var(--gris); }
.velo.indispo .velo-nom b, .velo.indispo .velo-prix { color: var(--gris); }
.notes { margin-top: 12px; display: grid; gap: 4px; }
.notes li { position: relative; padding-left: 16px; font-size: 16px; line-height: 1.45; color: var(--gris); }
.notes li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 2px; background: var(--encre); }
.note-retour { margin-top: 8px; font: 600 15px/1.4 var(--texte); }
.sans-script { margin-top: 16px; }

.pied-resa { gap: 6px; }
.retour { font: 600 16px/1.35 var(--texte); }
.total { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.total b { font: 900 44px/1 var(--texte); letter-spacing: -0.01em; }
.total span { font: 600 16px/1.3 var(--texte); color: var(--gris); }
.total.vide b { font-size: 26px; }
.caution, .rappel { font: 500 16px/1.4 var(--texte); }
.pied-resa .bouton-rose { margin-top: 6px; }
.pied-resa .bouton-rose:disabled { background: rgb(15 42 58 / .18); color: var(--gris); cursor: default; }
.annulation { font: 500 15px/1.4 var(--texte); color: var(--gris); }
@media (max-width: 1023px) {
  .total b { font-size: 36px; }
  .velo { grid-template-columns: 1fr auto; row-gap: 6px; }
  .velo .pas, .velo .velo-indispo { grid-column: 2; grid-row: 1 / span 2; }
  .velo-prix { grid-column: 1; grid-row: 2; text-align: left; font-size: 18px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .total b { font-size: 34px; }
  .pied-resa { gap: 3px; padding-top: 12px; padding-bottom: 14px; }
  .annulation { display: none; }
}