/* ========== GALLERY ========== */
.wcv-galerie {
  width: 100%;
}

/* ========== MAIN IMAGE ========== */
.wcv-galerie__principale {
  position: relative;
  overflow: hidden;
  border-radius: var(--wcv-marque-arrondi, 8px);
}

.wcv-galerie__principale img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.wcv-savoir-faire__inner .wcv-galerie__principale img {
  aspect-ratio: auto;
}

.wcv-galerie__fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: #1a1a1a;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}

.wcv-galerie__principale:hover .wcv-galerie__fleche {
  opacity: 1;
}

.wcv-galerie__fleche:hover {
  background: #fff;
}

.wcv-galerie__fleche--prev {
  left: 12px;
}

.wcv-galerie__fleche--next {
  right: 12px;
}

/* ========== THUMBNAILS ========== */
.wcv-galerie__vignettes-zone {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.wcv-galerie__vignettes {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.wcv-galerie__vignettes::-webkit-scrollbar {
  display: none;
}

.wcv-galerie__vignette {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  border-radius: var(--wcv-marque-arrondi, 8px);
  background-size: calc(100% + 4px);
}

.wcv-galerie__vignette.is-active {
  border-color: var(--wcv-marque-principale, #000);
}

.wcv-galerie__vignettes-fleche {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.wcv-galerie__vignettes-fleche:hover {
  background: #f5f5f5;
}

/* ========== ICONS ========== */
/* Phosphor Icons (phosphor-icons/core, MIT license) — "regular" weight : Caret Left/Right. */
.wcv-icone {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.wcv-icone--caret-gauche {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z'/%3E%3C/svg%3E");
}

.wcv-icone--caret-droite {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z'/%3E%3C/svg%3E");
}