/* Site Commerce · css/fx-selection.css : Lot 3 · Sélection et succès, le choix qui se voit.
   Les règles de fx/selection.js, accrochées à `html.cv-selection` (posée par
   le script) : sans lui, l'option cochée garde son fond de la coquille. Les
   deux variables du pouce (`--cv-pouce-x`, `--cv-pouce-w`) sont posées en
   ligne par le script ; les autres sont les jetons --cv-* de la coquille. */

/* ── Le pouce des contrôles segmentés ─────────────────────────────────────
   Le `::before` du contrôle, jamais un enfant (chooser.js réécrit les
   enfants). Il est placé par translation depuis le bord gauche, ce qui lui
   permet de glisser ET de s'étirer d'un même transform. Les options passent
   au-dessus, l'option cochée perd son propre fond. */
html.cv-selection .cv-seg { position: relative; isolation: isolate; }
html.cv-selection .cv-seg.is-pouce::before {
  content: "";
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0;
  width: var(--cv-pouce-w, 0px);
  transform: translateX(var(--cv-pouce-x, 0px));
  transform-origin: 0 50%;
  border-radius: 999px;
  background: var(--cv-thumb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 1px var(--cv-line);
  pointer-events: none;
}
/* L'option cochée perd son fond DÈS le départ, pas à la pose du pouce : un
   contrôle caché (la feuille de choix fermée) reçoit son pouce au premier
   affichage, et un fond retiré à ce moment-là s'effaçait en transition sous
   le pouce déjà posé (mesuré : deux transitions de couleur à chaque
   ouverture, « moins de mouvement » compris). Le fond ne transite donc plus :
   c'est le pouce qui montre le choix. */
html.cv-selection .cv-seg > .opt {
  position: relative; z-index: 1;
  transition: color var(--cv-dur-court) var(--cv-ease-standard);
}
html.cv-selection .cv-seg > .opt[aria-checked="true"] { background: transparent; box-shadow: none; }

/* ── La pression ──────────────────────────────────────────────────────────
   `scale` (propriété individuelle) : il se compose avec un transform déjà
   posé. La transition n'existe que pour ENFONCER ; au relâché, un ressort
   (WAAPI) ramène à 1 depuis là où la pression en était. */
html.cv-selection .is-presse {
  scale: .96;
  transition: scale 110ms cubic-bezier(.2, .8, .2, 1),
              background-color var(--cv-dur-court) var(--cv-ease-standard),
              border-color var(--cv-dur-court) var(--cv-ease-standard),
              color var(--cv-dur-court) var(--cv-ease-standard);
}

/* ── La coche de la tuile choisie ─────────────────────────────────────── */
html.cv-selection .cv-grid .opt { position: relative; }
.cv-coche {
  position: absolute; top: 5px; right: 5px; z-index: 1;
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--cv-accent); color: var(--cv-on-accent);
  pointer-events: none;
}
.cv-coche svg { width: 14px; height: 14px; display: block; }
.cv-coche path {
  stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.cv-selection .is-presse { scale: none; transition: none; }
}