/* Sélecteur de tailles du Studio.
   Des classes dédiées plutôt que l'ancien .size-card : ce dernier était
   surchargé par cinq feuilles successives (thème sombre, puis clair, puis
   retouches) et chaque nouvelle règle devait en contrer une précédente. */

.size-picker {
  --sp-ink: var(--ink, #07111b);
  --sp-muted: var(--muted, #63707a);
  --sp-line: #d9d5cd;
  --sp-divider: #eeeae3;
  --sp-surface: #ffffff;
  --sp-paper: #f7f4ee;
  --sp-track: #e7e2d9;
  --sp-accent: var(--orange, #ff7900);
  /* L'orange de marque ne tient que 2.8:1 en texte de 12 px sur blanc ;
     cette teinte le prolonge pour les libellés d'action (5:1). */
  --sp-accent-ink: #b45309;
  --sp-fill: #fff7ef;
  --sp-fill-line: #f4cfa8;
  --sp-success: #1c7a54;
  --sp-ease: cubic-bezier(.22, 1, .36, 1);
  display: grid;
  gap: 12px;
}

/* Dans un inspecteur étroit, le lien passe à la ligne plutôt que de couper
   le titre en deux. */
.size-picker__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
}

.size-picker__head .insp-label {
  margin: 0;
  white-space: nowrap;
}

.size-picker .size-picker__guide {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--sp-accent-ink);
  font: 700 12px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}

.size-picker .size-picker__guide .material-symbols-rounded { font-size: 17px; }

.size-picker .size-picker__guide:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Récapitulatif ------------------------------------------------------ */

.size-picker__summary {
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
  background: var(--sp-paper);
  border: 1px solid #e6e1d8;
  border-radius: 14px;
}

.size-picker__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.size-picker__total {
  color: var(--sp-ink);
  font: 800 30px/1 var(--font-display);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.size-picker__total-unit {
  color: var(--sp-muted);
  font: 600 14px/1 var(--font-ui);
  letter-spacing: 0;
}

.size-picker .size-picker__reset {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  color: var(--sp-accent-ink);
  font: 700 12px/1 var(--font-ui);
  cursor: pointer;
  transition: background-color 160ms var(--sp-ease), border-color 160ms var(--sp-ease);
}

.size-picker .size-picker__reset:hover {
  background: var(--sp-surface);
  border-color: var(--sp-line);
}

.size-picker__meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--sp-track);
}

.size-picker__meter > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sp-accent);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  transition: transform 220ms var(--sp-ease), background-color 220ms var(--sp-ease);
}

.size-picker.is-complete .size-picker__meter > span { background: var(--sp-success); }

/* L'état est porté par l'icône et le texte, jamais par la seule couleur. */
.size-picker .size-picker__status {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  color: var(--sp-ink);
  font: 600 12.5px/1.4 var(--font-ui);
}

.size-picker__status svg {
  flex: none;
  margin-top: 1px;
  color: var(--sp-accent-ink);
}

.size-picker.is-complete .size-picker__status svg { color: var(--sp-success); }

/* --- Tailles retirées --------------------------------------------------- */

.size-picker__notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f1d3a9;
  border-radius: 12px;
  background: #fff6e8;
  color: #6b3a00;
  font: 600 12.5px/1.45 var(--font-ui);
}

.size-picker__notice[hidden] { display: none; }

.size-picker__notice svg { flex: none; margin-top: 1px; color: #b45309; }

/* --- Lignes ------------------------------------------------------------- */

/* Une seule liste à séparateurs : empiler six cartes blanches dans une
   carte blanche est un anti-motif de DESIGN.md. */
.size-picker .size-picker__rows {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: var(--sp-surface);
}

.size-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 8px 8px 14px;
  background: var(--sp-surface);
  transition: background-color 180ms var(--sp-ease);
}

.size-row + .size-row { border-top: 1px solid var(--sp-divider); }

.size-row.is-filled { background: var(--sp-fill); }

/* Le libellé est un <label> : la règle globale lui ajouterait une grille et
   17 px de marge basse. Cliquer sur « M » place le curseur dans son champ. */
.size-picker .size-row__name {
  display: block;
  margin: 0;
  color: var(--sp-muted);
  font: 750 14px/1 var(--font-ui);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 180ms var(--sp-ease);
}

.size-picker .size-row.is-filled .size-row__name { color: var(--sp-ink); }

/* Mini-histogramme : la part de chaque taille dans la commande se lit d'un
   coup d'œil en parcourant la colonne. */
.size-row__share {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1ede7;
}

.size-row__share > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sp-accent);
  transform: scaleX(var(--share, 0));
  transform-origin: left center;
  transition: transform 220ms var(--sp-ease);
}

/* --- Stepper ------------------------------------------------------------ */

/* 46 px de haut : les deux bordures de 1 px laissent aux boutons une vraie
   cible tactile de 44 × 44. */
.size-stepper {
  display: grid;
  grid-template-columns: 44px 48px 44px;
  height: 46px;
  overflow: hidden;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-surface);
  transition: border-color 180ms var(--sp-ease);
}

.size-row.is-filled .size-stepper { border-color: var(--sp-fill-line); }

/* Anneau sur l'ensemble du stepper, sombre pour rester visible sur la ligne
   teintée où l'anneau orange global ne tiendrait que 2.4:1. */
.size-stepper:has(:focus-visible) {
  outline: 2px solid var(--sp-ink);
  outline-offset: 2px;
}

.size-picker .size-stepper__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--sp-ink);
  cursor: pointer;
  transition: background-color 140ms var(--sp-ease);
}

.size-picker .size-stepper__btn:hover:not(:disabled) { background: var(--sp-paper); }

.size-picker .size-stepper__btn:active:not(:disabled) { background: #ebe8e1; }

.size-picker .size-stepper__btn:disabled {
  color: #b3bac0;
  cursor: not-allowed;
}

.size-picker .size-stepper__btn:focus-visible { outline: none; }

/* 16 px minimum : en dessous, Safari iOS zoome sur le champ au focus. */
.size-picker .size-stepper__input {
  width: 48px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--sp-divider);
  border-radius: 0;
  background: transparent;
  color: var(--sp-ink);
  font: 700 16px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.size-picker .size-stepper__input:focus,
.size-picker .size-stepper__input:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--sp-divider);
  background: var(--sp-surface);
}

.size-stepper__input::-webkit-outer-spin-button,
.size-stepper__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

@media (max-width: 900px) {
  .size-picker__total { font-size: 28px; }
  .size-picker .size-picker__reset,
  .size-picker .size-picker__guide { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .size-picker__meter > span,
  .size-row__share > span,
  .size-row,
  .size-stepper,
  .size-picker .size-row__name,
  .size-picker .size-stepper__btn,
  .size-picker .size-picker__reset { transition: none; }
}