/**
 * Sélecteur de taille en pastilles.
 *
 * Feuille autonome : elle ne dépend pas de design-boutique.css et porte ses
 * propres variables. Tout se règle dans le bloc ci-dessous.
 */

.cyl-tailles {
  --cyl-t-ink: #1d1d1b;
  --cyl-t-surface: #ffffff;
  --cyl-t-line: #dcdad6;
  --cyl-t-line-forte: #1d1d1b;
  --cyl-t-muted: #6e6c68;

  --cyl-t-taille: 35px;
  --cyl-t-radius: 8px;
  --cyl-t-gap: 8px;
}

.cyl-tailles__legende {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.8125rem;
}

.cyl-tailles__cle {
  color: var(--cyl-t-muted);
}

.cyl-tailles__valeur {
  font-weight: 600;
  color: var(--cyl-t-ink);
}

.cyl-tailles__liste {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cyl-t-gap);
}

/*
 * Le thème et Elementor habillent tous les boutons du site. On repart d'une
 * base nue plutôt que de corriger leurs règles une par une.
 */
.cyl-tailles .cyl-taille {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--cyl-t-taille);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 10px;
  background: var(--cyl-t-surface);
  border: 1px solid var(--cyl-t-line);
  border-radius: var(--cyl-t-radius);
  box-shadow: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--cyl-t-ink);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.cyl-tailles .cyl-taille:hover {
  background: var(--cyl-t-surface);
  border-color: var(--cyl-t-line-forte);
  color: var(--cyl-t-ink);
}

/* La taille choisie : aplat sombre, c'est le seul repère de couleur. */
.cyl-tailles .cyl-taille.est-active,
.cyl-tailles .cyl-taille.est-active:hover {
  background: var(--cyl-t-ink);
  border-color: var(--cyl-t-ink);
  color: var(--cyl-t-surface);
}

.cyl-tailles .cyl-taille:focus-visible {
  outline: 2px solid var(--cyl-t-ink);
  outline-offset: 2px;
}

/*
 * Épuisée : la pastille reste lisible et cliquable, pour que le message
 * puisse s'afficher. Un bouton désactivé ne dirait rien à personne.
 */
.cyl-tailles .cyl-taille.est-indispo {
  position: relative;
  background: var(--cyl-t-surface);
  border-color: var(--cyl-t-line);
  color: var(--cyl-t-muted);
  cursor: not-allowed;
}

.cyl-tailles .cyl-taille.est-indispo::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 1px;
  background: var(--cyl-t-line);
  transform: rotate(-32deg);
}

.cyl-tailles .cyl-taille.est-indispo:hover {
  border-color: var(--cyl-t-line);
}

.cyl-tailles__note {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: var(--cyl-t-muted);
}

.cyl-tailles__note[hidden] {
  display: none;
}

/*
 * Le menu déroulant natif garde la valeur et la validation : il est retiré
 * de la vue sans être retiré du formulaire. display: none le sortirait des
 * champs envoyés sur certains thèmes.
 */
.cyl-tailles__natif {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cyl-tailles .cyl-taille {
    transition: none;
  }
}