/* 📁 assets/css/centering_quotes.css */

/* 📦 Conteneur principal */
.image-wrapper {
  position: relative;
}

/* 📏 Quotes génériques */
.quote {
  position: absolute;
  z-index: 10;
  box-sizing: content-box;
  line-height: 0;
}

.quote.vertical {
  width: 1px;
  height: 100%;
  top: 0;
  cursor: ew-resize;
}

.quote.horizontal {
  width: 100%;
  height: 1px;
  left: 0;
  cursor: ns-resize;
}

/* 🔴 Rouge = outer, 🌸 Rose = inner */
.quote.outer {
  background-color: red !important;
}
.quote.inner {
  background-color: deeppink !important;
}

/* 📦 Handles visibles (grab zone) */
.quote::after {
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  z-index: 11;
  box-sizing: border-box;
  cursor: grab;
  transition: border 0.2s ease, background 0.2s ease;
}

.quote.outer::after {
  border: 2px solid red;
}
.quote.inner::after {
  border: 2px solid deeppink;
}

.quote:hover::after {
  background-color: rgba(255, 255, 255, 0.5);
  cursor: grabbing;
}

.quote.outer:hover::after {
  border-color: red;
}
.quote.inner:hover::after {
  border-color: deeppink;
}

.quote.active::after {
  box-shadow: 0 0 0 2px deeppink;
}

/* 💡 Forme du grab : adaptée à l'orientation */
.quote.vertical::after {
  width: 15px;
  height: 60px;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}

.quote.horizontal::after {
  width: 60px;
  height: 15px;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  border-radius: 6px;
}

/* 🛠️ Décalage visuel des grab zones pour éviter la superposition */
.quote.left.inner::after  { transform: translate(-50%, -50%) translateX(8px); }
.quote.left.outer::after  { transform: translate(-50%, -50%) translateX(-8px); }
.quote.right.inner::after { transform: translate(-50%, -50%) translateX(-8px); }
.quote.right.outer::after { transform: translate(-50%, -50%) translateX(8px); }

.quote.top.inner::after    { transform: translate(-50%, -50%) translateY(8px); }
.quote.top.outer::after    { transform: translate(-50%, -50%) translateY(-8px); }
.quote.bottom.inner::after { transform: translate(-50%, -50%) translateY(-8px); }
.quote.bottom.outer::after { transform: translate(-50%, -50%) translateY(8px); }

/* 📊 Mesures à gauche */
#live-values {
  font-size: 0.9rem;
  line-height: 1.4;
}

#live-values h6 {
  font-size: 0.8rem;
  letter-spacing: 1px;
  color: #6c757d;
}

@media (min-width: 768px) {
  #live-values {
    position: sticky;
    top: 20px;
    z-index: 100;
  }
}