/* ====== Thème (tu peux changer l'accent ici) ====== */
:root{
  --wcvs-accent:#b48a54;           /* couleur thème (bordure sélection + hover) */
  --wcvs-label-width:72px;         /* largeur max du libellé sous chaque pastille */
}

/* ====== Conteneurs ====== */
.wcvs-wrap{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  margin: .6rem 0 1rem; /* ↑ espace vertical augmenté */
}

.wcvs-swatches{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 1rem;                 /* espace horizontal/vertical pour éviter tout chevauchement */
}

/* ====== Pastille ====== */
.wcvs-swatch{
  position:relative;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  /* réserve de place pour le label (évite qu'il chevauche les voisins) */
  margin-bottom:1.6rem;

  /* neutralise totalement le halo bleu navigateur */
  outline:none !important;
}
.wcvs-swatch:hover{
  box-shadow:0 0 0 2px rgba(180,138,84,.25) inset;
}
.wcvs-swatch:focus,
.wcvs-swatch:active{
  outline:none !important;
  /* on ne met pas de box-shadow ici pour garder un rendu propre même pendant le clic */
}
.wcvs-swatch.is-selected{
  box-shadow:0 0 0 2px var(--wcvs-accent) inset;  /* couleur sélection */
}
.wcvs-swatch.is-disabled{
  opacity:.45;
  cursor:not-allowed;
  filter:grayscale(.35);
}

/* ====== Visuels ====== */
.wcvs-img{
  width:100%;
  height:100%;
  border-radius:50%;
  background-image:var(--wcvs-bg-image);
  background-size:cover;
  background-position:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  display:block;
}
.wcvs-dot{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--wcvs-color, #ccc); /* ← la couleur reste visible même sélectionnée */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  display:block;
}

/* ====== Libellés sous les pastilles ====== */
.wcvs-label{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-1.25rem;
  width:var(--wcvs-label-width);
  max-width:var(--wcvs-label-width);
  white-space:normal;              /* autorise le retour à la ligne */
  line-height:1.1;
  font-size:11px;
  color:#444;
  text-align:center;
  pointer-events:none;
}

/* ====== Bouton Effacer ====== */
/* Bouton "EFFACER" – même style que "OBTENIR LE PRIX MAINTENANT" */
.wcvs-clear{
  appearance:none;
  background:transparent;           /* blanc, sans voile */
  color:#b47f38;                     /* même teinte que le CTA */
  border:1px solid #b47f38;          /* bord fin */
  border-radius:20px;                /* pilule */
  padding:.45rem 1rem;               /* même gabarit visuel */
  font-size:.75rem;                  /* petite taille en caps */
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;              /* espacement des lettres */
  line-height:1;
  cursor:pointer;
  outline:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}

.wcvs-clear:hover{
  background:#b47f38;                /* plein au survol */
  color:#fff;
  border-color:#b47f38;
}

.wcvs-clear:focus{ outline:none; box-shadow:none; }

/* make the visual container fill the swatch */
/* le conteneur visuel occupe la pastille ET centre le contenu */
.wcvs-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}