/* Cycles Duingt — borne 10, le comptoir du terminus : module de réservation en bandeau, dos du panneau. */
.b10 {
  z-index: 1; background: var(--blanc); color: var(--encre);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(16px, .7fr) auto 1fr; column-gap: 24px;
  /* Bords sur la grille de l'en-tête : la barre de défilement de la fenêtre (--barre) ne mange pas la marge droite. */
  padding: var(--haut) calc(var(--marge) + var(--barre, 0px)) var(--sol) var(--marge);
}
.b10 .sol { background: var(--blanc); }
.b10 :focus-visible { outline-color: var(--encre); }
.comptoir { grid-column: 1 / span 9; grid-row: 2; min-width: 0; }
/* La roue rouge garde son cadre 3:4 dans les deux états du panneau : rien ne saute quand on le retourne. */
.comptoir__roue { grid-column: 10 / span 3; grid-row: 2; align-self: start; aspect-ratio: 3 / 4; margin: 0; }
.comptoir__roue img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.demi-tour {
  grid-column: 10 / span 3; grid-row: 3; align-self: start; justify-self: start; margin-top: 20px;
  display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 22px 0 16px;
  border: 3px solid var(--encre); color: var(--encre); font-size: 20px; font-weight: 900; text-decoration: none;
}
.demi-tour svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
@media (hover: hover) { .demi-tour:hover { background: var(--encre); color: var(--blanc); } }

.comptoir__tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.retourner {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none;
  font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
.retourner svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.retourner__mot { display: inline-grid; justify-items: start; text-align: left; }
.retourner__mot > * { grid-area: 1 / 1; }
.retourner[aria-expanded="false"] .retourner__mot > :last-child, .retourner[aria-expanded="true"] .retourner__mot > :first-child { visibility: hidden; }

/* ——— Le bandeau : quatre cases, lues de gauche à droite comme la piste ——— */
.module { display: grid; grid-template-columns: 1.35fr 1.2fr .8fr 1fr; gap: 4px; }
.module[hidden] { display: none; }
.depart__plage { clear: both; margin-top: 10px; font-size: 13px; color: var(--gris); text-align: center; }
.module .natif, .velos-tel { display: none; }
.case { min-width: 0; padding: 16px 18px 18px; background: var(--lac-pale); }
.case__nom { display: block; float: left; width: 100%; margin-bottom: 10px; font-size: 16px; font-weight: 700; }
.velos { clear: both; display: grid; }
.panier { display: none; }
.rv { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; }
.rv + .rv { border-top: 2px solid var(--blanc); }
.rv__nom { display: block; font-size: 16px; font-weight: 700; line-height: 1.15; }
.rv__prix { display: block; font-size: 13px; color: var(--gris); }
.rv__stock { color: var(--rouge); font-weight: 700; }
.rv.epuise .rv__nom { color: var(--gris); }
.pas { flex: none; display: inline-flex; align-items: center; }
.pas button {
  width: 44px; height: 44px; padding: 0; border: 2px solid var(--encre); background: var(--blanc); color: var(--encre);
  font-size: 20px; font-weight: 700; line-height: 1;
}
.pas button:disabled { border-color: var(--inactif-bord); color: var(--inactif); cursor: not-allowed; }
.pas output { min-width: 30px; text-align: center; font-size: 18px; font-weight: 900; }
@media (hover: hover) { .pas button:not(:disabled):hover { background: var(--encre); color: var(--blanc); } }

.jours-cadre { clear: both; display: flex; align-items: center; gap: 2px; margin: 0 -8px; }
.jours__fleche { flex: none; width: 28px; height: 44px; padding: 0; border: 0; background: none; }
.jours__fleche svg { width: 10px; height: 18px; margin: auto; fill: none; stroke: var(--encre); stroke-width: 2.4; }
/* Une seule rangée de jours, lue de gauche à droite ; toujours un nombre entier de jours visibles (--nj). */
.jours {
  --nj: 5; flex: 1; display: grid; grid-auto-flow: column; grid-template-rows: 64px; grid-auto-columns: calc((100% - (var(--nj) - 1) * 4px) / var(--nj)); gap: 4px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.jours::-webkit-scrollbar { display: none; }
.rj { position: relative; display: grid; place-content: center; justify-items: center; background: var(--blanc); cursor: pointer; scroll-snap-align: start; line-height: 1.05; }
.rj input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rj span { font-size: 12.5px; }
.rj b { font-size: 20px; letter-spacing: -.02em; }
.rj:has(input:checked) { background: var(--encre); color: var(--blanc); }
.rj:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }

.depart { clear: both; display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.depart button { width: 44px; height: 44px; flex: none; padding: 0; border: 2px solid var(--encre); background: var(--blanc); font-size: 20px; font-weight: 700; }
.depart select {
  min-width: 0; flex: 1; height: 56px; padding: 0; border: 0; background: none; text-align: center; text-align-last: center;
  font-size: 30px; font-weight: 900; letter-spacing: -.02em; -webkit-appearance: none; appearance: none; cursor: pointer;
}

.durees { clear: both; display: grid; }
.rd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 10px; cursor: pointer; }
.rd + .rd { border-top: 2px solid var(--blanc); }
.rd input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rd b { font-size: 16px; }
.rd span { font-size: 13px; color: var(--gris); white-space: nowrap; }
.rd:has(input:checked) { background: var(--encre); color: var(--blanc); }
.rd:has(input:checked) span { color: var(--blanc); }
.rd:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: -2px; }
.rd.ferme { cursor: not-allowed; }
.rd.ferme b { color: var(--gris); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ——— Ligne de résultat ——— */
.resultat {
  grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; column-gap: 28px; row-gap: 8px;
  padding: 16px 0 0;
}
.resultat__retour { font-size: 18px; font-weight: 700; }
.resultat__total { display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.resultat__total b { font-size: 32px; letter-spacing: -.02em; }
.resultat__eco { font-size: 15px; }
.resultat__caution { flex: 1 1 260px; font-size: 15px; line-height: 1.3; color: var(--gris); }
.resultat__caution b { color: var(--encre); font-size: 15px; font-weight: 700; }
.resultat__etat { flex-basis: 100%; order: 9; font-size: 15px; font-weight: 700; color: var(--rouge); }
.resultat__etat:empty { display: none; }
.continuer { min-height: 52px; padding: 0 26px; font-size: 18px; margin-left: auto; }

/* ——— Le dos du panneau : adresse, horaires, mentions ——— */
.dos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; font-size: 16px; line-height: 1.45; }
.dos[hidden] { display: none; }
.dos h3 { margin-bottom: 8px; font-size: 20px; font-weight: 900; }
.dos p + p { margin-top: 10px; }
.dos a { text-underline-offset: 3px; }
.horaires li + li { margin-top: 8px; }
.horaires b { display: block; font-size: 16px; font-weight: 700; }
.mentions { margin-top: 18px; font-size: 13px; line-height: 1.45; color: var(--gris); }
.mentions p + p { margin-top: 6px; }

/* Sous 1 600 px, le bandeau prend toute la largeur : la photo sort, la mise en page change. */
@media (min-width: 1024px) and (max-width: 1599.98px) {
  .comptoir { grid-column: 1 / -1; }
  .comptoir__roue { display: none; }
  .comptoir { margin-bottom: 12px; }
  .demi-tour { grid-column: 1 / -1; justify-self: end; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) { .jours { --nj: 3; } }
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .depart { flex-wrap: wrap; justify-content: center; }
  .depart select { flex-basis: 100%; order: -1; font-size: 26px; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .module { grid-template-columns: 1.35fr 1.1fr .8fr 1.05fr; }
  .case { padding: 14px 12px 16px; }
  .rd { display: grid; justify-content: start; gap: 0; padding: 4px 10px; line-height: 1.2; }
  .rv__nom { font-size: 15px; }
}

/* ——— Téléphone : le comptoir est une borne comme les autres ; le résultat et « Continuer » restent toujours à l'écran ——— */
@media (max-width: 1023.98px) {
  .b10 { display: block; padding: 0; }
  .b10 .defil { display: flex; padding-top: calc(var(--haut) + 10px); padding-bottom: 12px; }
  .b10::after { display: none; }
  .comptoir__roue { display: none; }
  .comptoir { display: flex; flex-direction: column; margin-bottom: 4px; }
  .comptoir__tete { margin-bottom: 10px; align-items: center; }
  .comptoir__tete .nom-borne { font-size: 32px; }
  .retourner { font-size: 16px; }
  .retourner__mot > :first-child { font-size: 0; }
  .retourner__mot > :first-child::after { content: "Adresse, horaires"; font-size: 16px; }
  .module { grid-template-columns: 1fr; gap: 4px; }
  .case { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; column-gap: 8px; min-height: 56px; padding: 6px 6px 6px 12px; }
  .case__nom { float: left; grid-column: 1; width: auto; margin: 0; font-size: 16px; }
  .velos, .jours-cadre, .durees { display: none; }
  .module .natif { display: block; }
  .velos-tel { display: flex; grid-column: 2; align-items: center; gap: 6px; min-width: 0; }
  .panier { display: block; grid-column: 1 / -1; margin: 6px 0 2px; font-size: 16px; line-height: 1.3; }
  .panier:empty { display: none; }
  .panier b { font-weight: 700; }
  .natif, .depart select {
    flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0 30px 0 10px; border: 2px solid var(--encre); border-radius: 0; background-color: var(--blanc);
    font-size: 16px; font-weight: 700; letter-spacing: 0; text-align: left; text-align-last: auto; -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2304302F' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 8px;
  }
  .case .natif, .case .depart { grid-column: 2; }
  .depart { flex: 1; }
  .depart button, .depart__plage { display: none; }
  .velos-tel .pas output { min-width: 26px; }
  .resultat {
    position: sticky; bottom: -12px; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
    margin: 0 calc(-1 * var(--marge)); padding: 10px var(--marge) 8px; background: var(--blanc);
  }
  /* Quand la zone défile, le pied collé se détache de ce qui passe dessous. */
  .b10.suite .resultat { box-shadow: 0 -14px 16px -14px rgb(4 48 47 / .45); }
  .resultat__retour { font-size: 16px; }
  .resultat__total { justify-self: end; }
  .resultat__total span { display: none; }
  .resultat__total b { font-size: 26px; }
  .resultat__eco { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; font-size: 16px; }
  .resultat__caution { grid-column: 1; grid-row: 2; font-size: 16px; }
  .resultat__caution b { font-size: 16px; }
  .resultat__etat { grid-column: 1 / -1; font-size: 16px; }
  .continuer { grid-column: 1 / -1; width: 100%; min-height: 48px; margin: 8px 0 0; }
  .demi-tour { align-self: flex-start; min-height: 44px; margin-top: 8px; font-size: 16px; border-width: 2px; }
  .demi-tour svg { width: 24px; height: 24px; }
  .dos { grid-template-columns: 1fr; gap: 16px; font-size: 16px; }
  .dos h3 { font-size: 18px; margin-bottom: 4px; }
  .mentions { font-size: 14px; }
}
@media (max-width: 1023.98px) and (max-height: 700px) {
  .comptoir__tete { margin-bottom: 6px; }
  .comptoir__tete .nom-borne { font-size: 26px; }
  .case { min-height: 50px; padding-block: 3px; }
  .resultat { padding-top: 8px; }
}
/* Safari avec ses barres : un résultat collé couperait la case Départ ; il suit la case Durée. */
@media (max-width: 1023.98px) and (orientation: portrait) and (max-height: 600px) {
  .resultat { position: relative; bottom: auto; }
  .b10.suite .resultat { box-shadow: none; }
}
@media (max-width: 1023.98px) and (orientation: landscape) and (max-height: 480px) {
  .b10 .defil { padding-top: calc(var(--haut) + 6px); }
  .comptoir__tete .nom-borne { font-size: 24px; }
  /* Couché : les cases à gauche, le résultat et « Continuer » à droite. */
  .module { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 16px; }
  .module .case { grid-column: 1; min-height: 48px; }
  .resultat { position: sticky; top: 0; bottom: auto; grid-column: 2; grid-row: 1 / span 4; align-self: start; margin: 0; padding: 0; box-shadow: none; }
  .b10.suite .resultat { box-shadow: none; }
}

@media (min-width: 1024px) and (max-height: 820px) {
  .b10 { grid-template-rows: 0 auto 1fr; }
  .comptoir__tete { margin-bottom: 12px; }
  .comptoir__tete .nom-borne { font-size: min(8vw, 10vh); }
  .case { padding: 10px 14px 12px; }
  .case__nom { margin-bottom: 4px; }
  .rv { min-height: 44px; }
  .rv__prix { display: inline; margin-left: 8px; }
  .jours { grid-template-rows: repeat(2, 52px); }
  .rd { min-height: 38px; }
  .resultat { padding-top: 10px; }
  .demi-tour { margin-top: 12px; min-height: 48px; }
}