/* Layout global */
.config-wrapper {
  display: flex;
  background: #2c2c2c;
  color: #f0f0f0;
}

/* Aperçu */
.preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tabs {
  display: flex;
  justify-content: center;
  background: #3a3a3a;
  width: 100%;
}
.tab { flex: 1; padding: 12px; border: none; background: #3a3a3a; color: #ddd; cursor: pointer; }
.tab.active { background: #555; color: #fff; }

.mug-container {
  position: relative;
  width: 55%;
  max-width: 520px;
  margin-top: 20px;
}
.mug-base {
  width: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* Overlay + zone d’impression sécurisée */
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
.print-area {
  position: absolute;
  left: 12%;
  top: 18%;
  width: 76%;
  height: 54%;
  outline: 1px dashed rgba(255,255,255,0.35);
  border-radius: 6px;
}
.print-area.narrow {
  left: 18%;
  width: 64%;
}

/* Hint */
.print-hint { margin-top: 10px; font-size: 0.9em; color: #bbb; }

/* Draggables */
.draggable { position: absolute; cursor: move; user-select: none; z-index: 20; }
.text {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 24px; font-weight: 700; color: #000;
}

/* Formes + effets */
.image.circle { border-radius: 50%; }
.image.square { clip-path: inset(0); }
.image.star { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.image.heart { clip-path: path("M24 4C12 -4 0 8 12 20L24 32L36 20C48 8 36 -4 24 4Z"); }
.image.fx-grayscale { filter: grayscale(100%); }
.image.fx-sepia { filter: sepia(100%); }
.image.fx-contrast { filter: contrast(200%); }
.image.fx-glow { filter: drop-shadow(0 0 10px #fff); }

/* Contrôles */
.controls-column {
  flex: 1;
  display: flex; justify-content: center; align-items: flex-start;
  background: #3a3a3a; padding: 20px;
}
.controls { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.control-block { background: #444; padding: 15px; border-radius: 10px; }
.control-block h3 { margin-bottom: 10px; font-size: 1.1em; color: #fff; }
.row { display: flex; gap: 10px; align-items: center; }
.effects label { display: block; margin: 5px 0; color: #ddd; }
.controls input, .controls select, .controls button {
  margin: 6px 0; padding: 8px; font-size: 1em; border-radius: 6px; border: none;
}
.controls input[type="file"] { background: #555; color: #fff; }

/* Galerie */
.image-gallery { display: flex; gap: 10px; margin-top: 10px; }
.gallery-img { width: 50px; height: 50px; cursor: pointer; border: 2px solid transparent; border-radius: 6px; transition: border 0.3s; }
.gallery-img:hover { border: 2px solid #fff; }

/* Reset */
#resetBtn {
  background: #c0392b; color: #fff; padding: 10px 15px; border-radius: 6px; cursor: pointer; width: 100%; transition: background 0.3s;
}
#resetBtn:hover { background: #e74c3c; }

/* Titre animé */
.animated-title {
  font-size: 2.2em; font-weight: 700; text-align: center; color: #fff;
  margin-bottom: 20px; position: relative; display: inline-block; overflow: hidden;
}
.animated-title::after {
  content: ""; position: absolute; left: -100%; top: 0; width: 100%; height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  animation: shine 3s infinite;
}
@keyframes shine { 0%{left:-100%} 50%{left:100%} 100%{left:100%} }

/* Responsive */
@media (max-width: 1024px) {
  .config-wrapper { flex-direction: column; height: auto; }
  .preview-column, .controls-column { width: 100%; min-height: 50vh; }
  .mug-container { width: 80%; max-width: none; }
  .controls { width: 95%; }
}