/* =========================================================
   VISUALISEUR - NOYAU COMMUN MUR / EXEMPLES
   Utilise par la visionneuse simple et le composeur.
   ========================================================= */

.av-wall-examples-label {
  display: block;
  margin: 14px 0 7px;
  color: var(--av-muted, rgba(20,20,20,0.62));
  font-size: 13px;
}

.av-wall-choice-grid,
.av-visualiseur-v0134g .av-wall-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  gap: 7px;
  max-height: 88px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--av-border, rgba(20,20,20,0.12));
  border-radius: 9px;
  background: rgba(255,255,255,0.62);
}

.av-wall-choice-grid--compact {
  max-height: 88px;
}

.av-wall-choice-item,
.av-visualiseur-v0134g .av-wall-choice-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 44px auto;
  gap: 5px;
  align-items: start;
  width: 100%;
  min-height: 68px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,0.40);
  color: var(--av-text, #151515);
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.av-wall-choice-item:hover,
.av-wall-choice-item.is-active,
.av-visualiseur-v0134g .av-wall-choice-item:hover,
.av-visualiseur-v0134g .av-wall-choice-item.is-active {
  background: rgba(255,255,255,0.94);
  border-color: rgba(110,75,42,0.38);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.av-wall-choice-item.is-active::after,
.av-visualiseur-v0134g .av-wall-choice-item.is-active::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(30,24,18,0.64);
  border-radius: 6px;
  pointer-events: none;
}

.av-wall-choice-item img,
.av-visualiseur-v0134g .av-wall-choice-item img,
.av-wall-choice-swatch {
  display: block;
  width: 100%;
  height: 44px;
  object-fit: cover;
  border-radius: 6px;
  background: #e7e4dc;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.av-wall-choice-item span:not(.av-wall-choice-swatch),
.av-visualiseur-v0134g .av-wall-choice-item span:not(.av-wall-choice-swatch) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.2;
}

.av-wall-choice-swatch--neutral {
  background: linear-gradient(180deg, #f3f3f0, #ece8df);
}

.av-wall-choice-swatch--warm {
  background: linear-gradient(180deg, #f1ece2, #e4dbcc);
}

.av-wall-choice-swatch--grey {
  background: linear-gradient(180deg, #e7e7e3, #d7d7d2);
}


/* V0.19 - correction stricte des vignettes de mur dans la visionneuse simple.
   Les anciennes regles .av-wall-example-item de la V1 imposaient une grille texte + image.
   La classe commune force ici le rendu vignette, identique au composeur. */
.av-visualiseur-v0134g .av-wall-example-picker.av-wall-choice-grid {
  grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
  max-height: 88px;
}

.av-visualiseur-v0134g .av-wall-example-item.av-wall-choice-item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 44px auto;
  min-height: 68px;
  padding: 5px;
  gap: 5px;
}

.av-visualiseur-v0134g .av-wall-example-item.av-wall-choice-item img,
.av-visualiseur-v0134g .av-wall-example-item.av-wall-choice-item .av-wall-choice-swatch {
  width: 100%;
  height: 44px;
}

.av-visualiseur-v0134g .av-wall-example-item.av-wall-choice-item span:not(.av-wall-choice-swatch) {
  display: block;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.2;
}

/* V0.20 - noyau commun mur : presets, exemple et photo chargee pour les deux interfaces. */
.av-wall-choice-grid,
.av-visualiseur-v0134g .av-wall-choice-grid,
.av-wall-composer-v0130 .av-wall-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 106px;
  padding: 6px;
  align-items: start;
}

.av-wall-choice-item,
.av-visualiseur-v0134g .av-wall-choice-item,
.av-wall-composer-v0130 .av-wall-choice-item {
  grid-template-rows: 50px auto;
  min-height: 76px;
  padding: 5px;
}

.av-wall-choice-item img,
.av-visualiseur-v0134g .av-wall-choice-item img,
.av-wall-composer-v0130 .av-wall-choice-item img,
.av-wall-choice-swatch {
  height: 50px;
}

.av-wall-choice-swatch--room {
  background: linear-gradient(180deg, #f2f0eb 0%, #e6e1d8 70%, #d8c9b7 100%);
}

.av-wall-choice-swatch--uploaded {
  background: linear-gradient(135deg, #ece9e1, #d8d3c8);
}


/* V0.21 - harmonisation mur commun et correction previsualisation V1. */
.av-wall-choice-grid,
.av-visualiseur-v0134g .av-wall-choice-grid,
.av-wall-composer-v0130 .av-wall-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-height: 118px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  align-items: start;
}

.av-visualiseur-v0134g .av-wall-example-picker.av-wall-choice-grid,
.av-wall-composer-v0130 .av-wall-example-picker.av-wall-choice-grid {
  margin-top: 0;
}

.av-wall-choice-item,
.av-visualiseur-v0134g .av-wall-choice-item,
.av-wall-composer-v0130 .av-wall-choice-item {
  grid-template-rows: 58px auto;
  min-height: 84px;
  padding: 5px;
}

.av-wall-choice-item img,
.av-visualiseur-v0134g .av-wall-choice-item img,
.av-wall-composer-v0130 .av-wall-choice-item img,
.av-wall-choice-swatch {
  width: 100%;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}

.av-wall-choice-item span:not(.av-wall-choice-swatch),
.av-visualiseur-v0134g .av-wall-choice-item span:not(.av-wall-choice-swatch),
.av-wall-composer-v0130 .av-wall-choice-item span:not(.av-wall-choice-swatch) {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  line-height: 1.2;
}