/* ===============================================
   WIDGET: CONTAINER RÉUTILISABLE
   ===============================================
   Conteneur avec bordure, gradient, zoom et halo
   Couleurs paramétrables via data-attributes
   =============================================== */

.widget-container {
  /* Base styles */
  border-radius: 1.5rem;
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;

  /* Flex layout */
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Default colors (can be overridden) */
  border: 1px solid rgba(6, 182, 212, 0.2);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(34, 211, 238, 0.1) 100%);
}

/* Hover effects */
.widget-container:hover {
  border-color: rgba(6, 182, 212, 0.5);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%);
  transform: scale(1.02);
  box-shadow: 0 20px 40px rgba(6, 182, 212, 0.3);
}

/* Active/Click state */
.widget-container.active {
  border-color: rgba(6, 182, 212, 0.8);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(34, 211, 238, 0.3) 100%);
  transform: scale(1.05);
  box-shadow: 0 30px 60px rgba(6, 182, 212, 0.5);
}

/* ===== CONTAINER VARIANTS ===== */

/* Variant: CYAN/BLUE */
.widget-container.variant-cyan-blue {
  border-color: var(--border-blue-20);
  background: linear-gradient(135deg, var(--blue-500-10) 0%, var(--cyan-500-10) 100%);
}

.widget-container.variant-cyan-blue:hover {
  border-color: var(--border-blue-50);
  background: linear-gradient(135deg, var(--blue-500-10) 0%, var(--cyan-500-10) 100%);
  box-shadow: 0 20px 40px var(--shadow-blue);
}

.widget-container.variant-cyan-blue.active {
  border-color: var(--gradient-cyan-500);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(34, 211, 238, 0.2) 100%);
  box-shadow: 0 30px 60px var(--shadow-cyan);
}

/* Variant: PURPLE/BLUE */
.widget-container.variant-purple-blue {
  border-color: var(--border-purple-20);
  background: linear-gradient(135deg, var(--purple-500-10) 0%, var(--blue-500-10) 100%);
}

.widget-container.variant-purple-blue:hover {
  border-color: var(--border-purple-50);
  background: linear-gradient(135deg, var(--purple-500-10) 0%, var(--blue-500-10) 100%);
  box-shadow: 0 20px 40px var(--shadow-purple);
}

.widget-container.variant-purple-blue.active {
  border-color: var(--gradient-purple-500);
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%);
  box-shadow: 0 30px 60px var(--shadow-purple);
}

/* Variant: PINK/PURPLE */
.widget-container.variant-pink-purple {
  border-color: var(--border-pink-20);
  background: linear-gradient(135deg, var(--pink-500-10) 0%, var(--purple-500-10) 100%);
}

.widget-container.variant-pink-purple:hover {
  border-color: var(--border-pink-50);
  background: linear-gradient(135deg, var(--pink-500-10) 0%, var(--purple-500-10) 100%);
  box-shadow: 0 20px 40px rgba(236, 72, 153, 0.3);
}

.widget-container.variant-pink-purple.active {
  border-color: var(--gradient-pink-500);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  box-shadow: 0 30px 60px rgba(236, 72, 153, 0.4);
}

/* ===== SIZE VARIANTS ===== */

.widget-container.size-sm {
  padding: 1rem;
}

.widget-container.size-md {
  padding: 1.5rem;
}

.widget-container.size-lg {
  padding: 2rem;
}

.widget-container.size-xl {
  padding: 2.5rem;
}

/* ===== INTERACTIVE VARIANT ===== */

.widget-container.interactive {
  cursor: pointer;
}

.widget-container.interactive:active {
  transform: scale(0.98);
}

/* ===== CUSTOM COLOR SUPPORT ===== */

.widget-container[data-border-color] {
  border-color: var(--border-cyan-20); /* Default */
}

.widget-container[data-bg-from-color] {
  background: linear-gradient(135deg, var(--blue-500-10) 0%, var(--cyan-500-10) 100%);
}

/* ===== CONTENT STRUCTURE ===== */

.widget-container-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.widget-container-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-white);
  margin: 0;
}

.widget-container-subtitle {
  font-size: 0.875rem;
  color: var(--text-gray-400);
  margin: 0;
}

.widget-container-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.widget-container-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-gray-100);
  margin: 0;
  text-align: justify;
}

.widget-container-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(6, 182, 212, 0.1);
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .widget-container {
    padding: 1.25rem;
  }

  .widget-container.size-lg {
    padding: 1.5rem;
  }

  .widget-container-title {
    font-size: 1.1rem;
  }
}