/* érika — Choix de la couleur (fiche produit) */
.erika-couleur {
  --ec-or: var(--c-gold, #a69f73);
  --ec-encre: var(--c-char, #342b2f);
  --ec-doux: var(--c-muted, #7a7176);
  flex: 0 0 100%;            /* le formulaire d'achat est en flex dans le thème */
  width: 100%;
  min-width: 0;
  margin: 0 0 1.2rem;
  padding: 0;
  border: 0;
  background: none;
  scroll-margin-top: calc(var(--c-headh-mini, 120px) + 16px); /* s'arrêter sous l'en-tête fixe du thème */
}
.erika-couleur__titre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  padding: 0; margin: 0 0 .7rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ec-encre);
}
.erika-couleur__choix { font-size: .95rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ec-doux); }
.erika-couleur.is-choisi .erika-couleur__choix { color: var(--ec-encre); font-weight: 600; }
.erika-couleur__cherche {
  display: block; width: 100%; max-width: 320px; margin: 0 0 .8rem; padding: .55rem .8rem;
  border: 1px solid rgba(166,159,115,.6); border-radius: 3px; background: #fff; font: inherit; font-size: .9rem;
}
.erika-couleur__cherche[hidden] { display: none; }
.erika-couleur__grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: .55rem .3rem;
  max-height: 22rem; overflow-y: auto; overflow-x: hidden; padding: 5px 0; margin: 0;
  overscroll-behavior: contain;
}
.erika-couleur__opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; text-align: center; }
.erika-couleur__opt[hidden] { display: none; }
.erika-couleur__opt input {
  position: absolute; top: 0; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.erika-couleur__pastille {
  display: block; width: 44px; height: 44px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
  outline: 2px solid transparent; outline-offset: 3px;
  transition: outline-color .15s, transform .15s;
}
.erika-couleur__opt:hover .erika-couleur__pastille { transform: scale(1.06); }
.erika-couleur__opt input:checked + .erika-couleur__pastille { outline-color: var(--ec-encre); }
.erika-couleur__opt input:focus-visible + .erika-couleur__pastille { outline-color: var(--ec-or); }
.erika-couleur__nom { font-size: .72rem; line-height: 1.25; color: var(--ec-doux); overflow-wrap: anywhere; }
.erika-couleur__opt input:checked ~ .erika-couleur__nom { color: var(--ec-encre); font-weight: 600; }
.erika-couleur__vide { margin: .5rem 0 0; font-size: .9rem; color: var(--ec-doux); }
.erika-couleur__erreur {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 0 0 .9rem; padding: .85rem 1rem;
  border: 1px solid #e3a3b6; border-left: 4px solid #a7003b; border-radius: 4px;
  background: #fdf1f4; color: #7a0029;
  font-size: .95rem; line-height: 1.45;
  animation: erika-couleur-alerte .45s ease;
}
.erika-couleur__erreur.is-relance { animation: erika-couleur-secoue .4s ease; }
.erika-couleur__erreur svg {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  fill: none; stroke: #a7003b; stroke-width: 2; stroke-linecap: round;
}
.erika-couleur__erreur span { min-width: 0; overflow-wrap: anywhere; }
.erika-couleur__erreur strong { display: block; font-weight: 700; color: #a7003b; }
.erika-couleur.is-erreur .erika-couleur__titre { color: #a7003b; }
.erika-couleur.is-erreur .erika-couleur__grille { box-shadow: inset 0 0 0 2px #e3a3b6; border-radius: 4px; padding: 8px 6px; }
@keyframes erika-couleur-alerte { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes erika-couleur-secoue { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
  .erika-couleur__pastille { transition: none; }
  .erika-couleur__erreur, .erika-couleur__erreur.is-relance { animation: none; }
}