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

/* === Colonne gauche (aperçu) === */
.preview-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #2c2c2c;
}

/* Onglets */
.tabs {
  display: flex;
  justify-content: center;
  background: #3a3a3a;
  width: 100%;
}
.tab {
  flex: 1;
  padding: 12px;
  background: #3a3a3a;
  border: none;
  color: #ddd;
  cursor: pointer;
  transition: background 0.3s;
}
.tab.active {
  background: #555;
  color: #fff;
}

/* Conteneur T-shirt */
.tshirt-container {
  position: relative;
  width: 60%;
  max-width: 500px;
  margin-top: 20px;
}
.tshirt-base {
  width: 100%;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* Calques */
.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 10;
}
.text {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2vw;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
}

/* === Éléments manipulables === */
.draggable {
  position: absolute;
  cursor: move;
  user-select: none;
  z-index: 20;
}

/* === Formes d’images === */
.image.circle { border-radius: 50%; }
.image.square { clip-path: inset(0); }
.image.triangle { clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.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.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 
                     75% 100%, 25% 100%, 0% 50%);
}
.image.diamond {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.image.arrow {
  clip-path: polygon(50% 0%, 100% 50%, 75% 50%, 
                     75% 100%, 25% 100%, 25% 50%, 0% 50%);
}
.image.cloud {
  clip-path: ellipse(50% 40% at 50% 50%);
}

/* === Effets graphiques === */
.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); }

/* === Colonne droite (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;
}

/* Inputs */
.controls input,
.controls select,
.controls button {
  margin: 6px 0;
  padding: 8px;
  font-size: 1em;
  border-radius: 6px;
  border: none;
  outline: none;
}
.controls input[type="file"] {
  background: #555;
  color: #fff;
}
.controls input[type="number"] {
  width: 80px;
}

/* 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;
}

/* Bouton reset */
#resetBtn {
  background: #c0392b;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 1em;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
  width: 100%;
}
#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 {
    flex: none;
    width: 100%;
    min-height: 50vh;
  }
  .tshirt-container {
    width: 80%;
    max-width: none;
  }
  .text {
    font-size: 4vw;
  }
  .controls {
    width: 95%;
    max-width: none;
  }
}