/* metrage-selector.css — composant métier : sélecteur de métrage (multiples de 10 cm) + total. */
.metrage-selector{
  border: var(--border-hairline);
  padding: var(--space-5);
}

.metrage-selector__header{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.metrage-selector__label{
  font-size: var(--fs-small);
  font-weight: 600;
}
.metrage-selector__value{
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.metrage-selector__stepper{
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  border: 1px solid var(--color-ink);
}
.metrage-selector__btn{
  min-height: 48px;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--duration) var(--ease);
}
.metrage-selector__btn:hover{ background: var(--color-gray-100); }
.metrage-selector__btn:disabled{ color: var(--color-gray-400); cursor: not-allowed; }
.metrage-selector__btn:first-child{ border-right: var(--border-hairline); }
.metrage-selector__btn:last-child{ border-left: var(--border-hairline); }

.metrage-selector__input{
  width: 100%;
  min-height: 48px;
  border: 0;
  text-align: center;
  font-size: var(--fs-body);
  font-weight: 600;
  background: transparent;
  -moz-appearance: textfield;
}
.metrage-selector__input::-webkit-outer-spin-button,
.metrage-selector__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.metrage-selector__input:focus-visible{
  outline: 2px solid var(--color-ink);
  outline-offset: -2px;
}

.metrage-selector__hint{
  font-size: var(--fs-micro);
  color: var(--color-ink-faint);
  margin-top: var(--space-2);
}

.metrage-selector__total{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
  font-size: var(--fs-small);
}
.metrage-selector__total strong{
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-accent-text);
}