/* Machines et dangers : cases grises sans filet. Au téléphone, deux colonnes :
   la marge (chiffre ou signe) et la note. Épures à l'échelle, pneus et selle en aplat d'encre. */
@media (max-width: 599px) {
  .case--gris { grid-template-columns: 68px minmax(0, 1fr); }
  .case--gris > .c-tu, .case--gris > .c-note, .case--gris > .c-large { grid-column: 2; }
  .machine > .c-km.r2 { grid-row: 2 / span 2; }
}

.reglage .c-large > * + * { margin-top: 12px; }
.reglage__l { display: block; font-weight: 700; }
.reglage__vous { font-style: italic; color: var(--rouge); }
.reglage output { display: block; }

/* Curseur natif, pouce de 44 px. */
.curseur { display: block; width: 100%; height: 44px; margin: 4px 0 0; background: none; accent-color: var(--rouge); -webkit-appearance: none; appearance: none; cursor: pointer; }
.curseur::-webkit-slider-runnable-track { height: 2px; background: var(--encre); }
.curseur::-moz-range-track { height: 2px; background: var(--encre); }
.curseur::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 44px; margin-top: -21px; border: 2px solid var(--encre); border-radius: 0; background: #fff; box-shadow: inset 0 0 0 10px #fff, inset 0 0 0 22px var(--rouge); }
.curseur::-moz-range-thumb { width: 40px; height: 40px; border: 2px solid var(--encre); border-radius: 0; background: var(--rouge); box-shadow: inset 0 0 0 10px #fff; }

/* Tri du permis : des mots soulignés à la machine. */
.permis legend { font-weight: 700; }
.permis__choix { display: flex; align-items: center; gap: 0 10px; margin-left: -10px; }
.permis label { position: relative; display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; cursor: pointer; }
.permis input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.permis input:checked + span { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.permis input:focus-visible + span { outline: 2px solid var(--encre); outline-offset: 4px; }

.machines__liste { display: flex; flex-direction: column; }
.machine[hidden] { display: none; }
.machine__epure { padding-bottom: 4px; }
.machine .c-note > * + * { margin-top: 6px; }
.machine .age { font-weight: 700; font-size: 17px; }
.verdict { min-height: 1.5em; margin-top: 4px; font-weight: 700; color: var(--rouge); }
.prix { font-weight: 700; }
.reste { color: var(--rouge); font-weight: 700; }
.machine table { width: 100%; margin-top: 4px; border-collapse: collapse; font-size: 15px; }
.machine th, .machine td { padding: 4px 6px 4px 0; text-align: left; font-weight: 400; }
.machine thead th { font-style: italic; color: var(--gris); }
.machine td { font-weight: 700; white-space: nowrap; }

.moto-svg { width: 100%; height: auto; overflow: visible; }
.moto-svg * { fill: none; stroke: var(--encre); stroke-linecap: round; stroke-linejoin: round; }
.moto-svg :not(.e-pneu) { vector-effect: non-scaling-stroke; stroke-width: 3px; }
.moto-svg .e-gomme, .moto-svg .e-jante { stroke-width: 1.5px; stroke: var(--case); }
.moto-svg .e-rayon, .moto-svg .e-ailette, .moto-svg .e-trait--fin, .moto-svg .e-disque { stroke-width: 1.5px; }
.moto-svg .e-moyeu, .moto-svg .e-phare { fill: var(--encre); }
.moto-svg .e-selle { stroke-width: 9px; }
.moto-svg .e-axe, .moto-svg .e-rappel { stroke: var(--gris); stroke-width: 1px; stroke-dasharray: 5 5; }
.moto-svg .e-cote, .moto-svg .e-cote-v { stroke: var(--gris); stroke-width: 1.5px; }
.moto-svg .e-sol { stroke-width: 2px; }
.moto-svg .e-vous { stroke: var(--rouge); stroke-width: 4px; }
.moto-svg .e-t { fill: var(--gris); stroke: none; font: 400 110px "Courier Prime", monospace; }
.moto-svg .e-t--selle { fill: var(--encre); font-weight: 700; }
@media (max-width: 599px) { .moto-svg .e-t { display: none; } }

.dangers ol { display: flex; flex-direction: column; }
.dangers .c-large { align-self: center; }