/* Flotte et comparateur, choix de la taille, tarifs. */

/* ---------- Flotte ---------- */
.fleet { background: var(--asphalt-2); padding: 130px 0 120px; }
.fleet__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 64px; align-items: end; margin-bottom: 44px; }
.fleet__head p { margin: 0; color: var(--stone); }
.tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 76px; padding: 14px 16px 12px 0; background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -1px; color: var(--muted); text-align: left; }
.tab span { font: 800 clamp(22px, 2.3vw, 32px)/0.95 var(--display); }
.tab small { font: 500 13px var(--mono); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--white); border-bottom-color: var(--chart); }
.tab[aria-selected="true"] small { color: var(--chart); }
.fleet__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; padding-top: 36px; }
.fleet__left { min-width: 0; }
.fleet__draw svg { width: 100%; height: auto; }
.bike path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bike--a path { stroke: var(--text); stroke-width: 1.4; }
.bike--a .b-tireR, .bike--a .b-tireF { stroke: var(--stone); stroke-width: 1.6; fill: rgba(184, 190, 185, .2); fill-rule: evenodd; }
.bike--a .b-spokesR, .bike--a .b-spokesF { stroke: var(--muted); stroke-width: .7; opacity: .5; }
.bike--a .b-rimR, .bike--a .b-rimF, .bike--a .b-discR, .bike--a .b-discF, .bike--a .b-chain, .bike--a .b-cog, .bike--a .b-ring { stroke: var(--muted); stroke-width: 1.2; }
.bike--a .b-cs, .bike--a .b-ss, .bike--a .b-st, .bike--a .b-tt, .bike--a .b-dt, .bike--a .b-ht, .bike--a .b-fork { stroke: var(--chart); stroke-width: 3.6; }
.bike--a .b-dt { stroke-width: 5; }
.bike--a .b-ss { stroke-width: 2.6; }
.bike--a .b-cs { stroke-width: 3; }
.bike--a .b-ht { stroke-width: 6.5; }
.bike--a .b-saddle, .bike--a .b-bar { stroke-width: 3; }
.bike--a .b-saddle { fill: var(--text); stroke-width: 1.4; }
.bike--a .b-extra { stroke: var(--chart); stroke-width: 1.8; }
.bike--b { transition: opacity .3s; }
.bike--b path { stroke: var(--white); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: .75; }
.bike--b .b-spokesR, .bike--b .b-spokesF, .bike--b .b-rimR, .bike--b .b-rimF, .bike--b .b-discR, .bike--b .b-discF, .bike--b .b-cog, .bike--b .b-ring, .bike--b .b-chain { opacity: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: 14px; color: var(--stone); }
.lg { display: inline-flex; align-items: center; gap: 8px; }
.lg::before { content: ""; width: 26px; height: 0; border-top: 4px solid var(--chart); }
.lg--b::before { border-top: 2px dashed var(--white); }
.lg--s { color: var(--muted); }
.lg--s::before { display: none; }
.fleet__ctrl { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: flex-end; margin-top: 22px; }
.sizes { display: flex; }
.sz { min-width: 48px; min-height: 48px; background: none; border: 1px solid var(--line); margin-right: -1px; color: var(--stone); font: 800 20px/1 var(--display); }
.sz[aria-pressed="true"] { background: var(--chart); color: var(--ink); border-color: var(--chart); position: relative; }
.cmp__l { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
.fleet__name { font-size: clamp(36px, 3.2vw, 48px); margin-bottom: 18px; }
.sheet { font-size: 15px; }
.sheet th, .sheet td { text-align: left; vertical-align: top; padding: 11px 12px 11px 0; border-top: 1px solid var(--line); }
.sheet thead th { border-top: 0; padding-top: 0; font: 800 20px/1 var(--display); color: var(--white); }
.sheet thead th:first-child { width: 34%; }
.sheet tbody th { font-weight: 500; color: var(--muted); width: 34%; }
.sheet td { color: var(--text); }
.sheet__d { display: block; margin-top: 4px; font: 600 13px var(--mono); color: var(--chart); }
.sheet thead { display: none; }
.sheet--two thead { display: table-header-group; }
.sheet--two td:nth-child(3) { color: var(--stone); }
.sheet--two tbody th, .sheet--two thead th:first-child { width: 24%; }
.fleet__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin: 34px 0 0; }

/* ---------- Taille (fond calcaire) ---------- */
.size { background: var(--calc); color: var(--ink); padding: 130px 0 120px; }
.size__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 64px; align-items: start; }
.size__form > p { margin: 22px 0 26px; color: var(--ink-2); }
.size .opts { margin-bottom: 26px; }
.size .opt { color: var(--ink-2); }
.size .opt:hover, .size .opt[aria-pressed="true"] { color: var(--ink); }
.size .opt[aria-pressed="true"] { border-bottom-color: var(--ink); }
.size .field output { color: var(--ink); font-weight: 700; }
.size input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--ink) var(--fill, 50%), var(--calc-2) var(--fill, 50%)); }
.size input[type="range"]::-moz-range-track { background: var(--calc-2); }
.size input[type="range"]::-moz-range-progress { background: var(--ink); }
.size input[type="range"]::-webkit-slider-thumb { background: var(--chart); border-color: var(--ink); }
.size input[type="range"]::-moz-range-thumb { background: var(--chart); border-color: var(--ink); }
.size :focus-visible { outline-color: var(--ink); }
.size__how { font-size: 14px; color: var(--ink-2); border-left: 3px solid var(--ink); padding-left: 12px; }
.size__out { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 28px; align-items: start; }
.size__letter { grid-row: span 2; margin: 0; min-width: 132px; padding: 18px 16px 6px; background: var(--chart); color: var(--ink); text-align: center; font: 900 120px/0.85 var(--display); }
.size__verdict { margin: 4px 0 8px; font-size: 19px; }
.size__verdict strong { font: 800 30px/1 var(--display); display: block; margin-bottom: 8px; }
.size__note { margin: 0; font-size: 15px; color: var(--ink-2); min-height: 1.5em; }
#size-svg { grid-column: 1 / -1; width: 100%; height: auto; margin: 24px 0 8px; }
#size-svg .bike--a path { stroke: var(--ink); }
#size-svg .bike--a .b-tireR, #size-svg .bike--a .b-tireF { stroke: var(--ink-2); fill: rgba(19, 22, 20, .13); }
#size-svg .bike--a .b-spokesR, #size-svg .bike--a .b-spokesF { stroke: #7b837e; opacity: .7; }
#size-svg .bike--a .b-rimR, #size-svg .bike--a .b-rimF, #size-svg .bike--a .b-discR, #size-svg .bike--a .b-discF, #size-svg .bike--a .b-chain, #size-svg .bike--a .b-cog, #size-svg .bike--a .b-ring { stroke: #7b837e; }
#size-svg .bike--a .b-extra { stroke: var(--ink); }
#size-svg .bike--a .b-saddle { fill: var(--ink); }
.cote { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.cote--x { stroke-dasharray: 4 5; stroke: #6f7772; }
.cote-t { font: 700 38px var(--mono); fill: var(--ink); paint-order: stroke; stroke: var(--calc); stroke-width: 12px; }
.size__out .scroll-x, .size__out > p:last-child { grid-column: 1 / -1; }
.size__table { font-size: 14.5px; min-width: 600px; }
.size__table th, .size__table td { padding: 10px 10px 10px 0; text-align: left; border-top: 1px solid var(--calc-2); font-variant-numeric: tabular-nums; }
.size__table thead th { font-weight: 600; color: var(--ink-2); border-top: 0; font-size: 13px; }
.size__table tbody th { font: 800 20px/1 var(--display); }
.size__table td { font-family: var(--mono); font-size: 13.5px; }
.size__table tr.is-rec th, .size__table tr.is-rec td { background: var(--chart); }
.size__table tr.is-rec th { padding-left: 10px; }
.size__out > p:last-child { margin-top: 24px; }

/* ---------- Tarifs ---------- */
.rates { padding: 130px 0 120px; }
.rates__head { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 20px 64px; align-items: end; margin-bottom: 40px; }
.rates__head p { margin: 0; color: var(--stone); max-width: 58ch; }
.grid { min-width: 860px; font-variant-numeric: tabular-nums; }
.grid th, .grid td { padding: 16px 14px 14px 0; text-align: left; border-top: 1px solid var(--line); }
.grid thead th { border-top: 0; font-weight: 600; font-size: 14px; color: var(--stone); vertical-align: bottom; }
.grid thead small { display: block; font: 500 12px var(--mono); color: var(--muted); }
.grid tbody th { font: 800 26px/1 var(--display); color: var(--white); }
.grid tbody th small { display: block; margin-top: 6px; font: 500 12.5px var(--sans); color: var(--muted); }
.grid td { font: 800 30px/1 var(--display); color: var(--white); }
.grid td small { display: block; margin-top: 6px; font: 600 12px var(--mono); color: var(--chart); }
.grid td.dep { color: var(--stone); font-size: 24px; }
.grid td.dep small { color: var(--muted); }
.rates__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; margin-top: 72px; }
.incl { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.incl li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; color: var(--stone); font-size: 15.5px; }
.incl svg { width: 40px; height: 40px; fill: none; stroke: var(--chart); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.incl strong { color: var(--white); display: block; }
.rates__opt h3 + * { margin-top: 18px; }
.rates__opt h3:not(:first-child) { margin-top: 40px; }
.optlist { margin: 0; }
.optlist div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.optlist dd { margin: 0; font: 600 14px var(--mono); color: var(--chart); white-space: nowrap; }
.rates__opt .small { margin-top: 14px; }
.pedals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 80px; }
.pedals img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pedals figcaption { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; font-size: 15px; color: var(--stone); }
.cleat { flex: none; width: 72px; height: 36px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cleat .cleat__sole { stroke: var(--stone); }
.cleat .cleat__c { stroke: var(--chart); fill: rgba(212, 242, 46, .14); }
.cleat circle { fill: var(--chart); stroke: none; }
.pedals strong { color: var(--white); font: 800 22px/1 var(--display); margin-right: 4px; }

@media (max-width: 1023px) {
  .fleet__head, .rates__head { grid-template-columns: minmax(0, 1fr); }
  /* Une colonne : dessin, réglages, fiche, puis le bouton de réservation en dernier. */
  .fleet__body { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .fleet__left { display: contents; }
  .fleet__sheet { order: 2; margin-top: 36px; }
  .fleet__acts { order: 3; }
  .size__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rates__grid { grid-template-columns: minmax(0, 1fr); }
  .grid { min-width: 0; }
  .grid thead { display: none; }
  .grid tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0 12px; padding: 18px 0; border-top: 1px solid var(--line); }
  .grid tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 12px; }
  .grid td { border: 0; padding: 8px 0; font-size: 26px; }
  .grid td::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 500 12px var(--sans); color: var(--muted); }
}
@media (max-width: 759px) {
  .fleet, .size, .rates { padding: 88px 0; }
  .tabs { grid-template-columns: 1fr 1fr; }
  .tab { min-height: 64px; padding-right: 8px; }
  .fleet__body { padding-top: 20px; }
  .fleet__sheet { margin-top: 28px; }
  .sheet { font-size: 14px; }
  .sheet tbody th { width: 38%; }
  .sheet thead th { font-size: 17px; }
  .sheet--two tbody th, .sheet--two thead th:first-child { width: 27%; }
  .size__letter { min-width: 96px; font-size: 92px; padding: 14px 10px 4px; }
  .size__verdict { font-size: 16px; }
  .size__verdict strong { font-size: 24px; }
  .cote-t { font-size: 64px; stroke-width: 18px; }
  .grid tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .incl { grid-template-columns: minmax(0, 1fr); }
  .pedals { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 56px; }
  .pedals figure { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; }
  .pedals img { aspect-ratio: 1; }
  .pedals figcaption { margin: 0; flex-direction: column; gap: 6px; }
  .cleat { width: 60px; height: 30px; }
  .pedals strong { display: block; margin-bottom: 4px; }
}