/* ==========================================================
   SURVEY WIDGET - CSS DE PERSONNALISATION
   ========================================================== */

/* 
   UTILISATION :
   Incluez ce fichier CSS APRÈS le widget JavaScript pour personnaliser les couleurs
   
   <script src="https://event-system-live.emergent.host/js/survey-widget.js" 
           data-survey-id="votre-id"></script>
   <link rel="stylesheet" href="https://event-system-live.emergent.host/js/survey-widget-custom.css">
   
   OU définissez vos couleurs via les attributs data-* :
   <script src="https://event-system-live.emergent.host/js/survey-widget.js" 
           data-survey-id="votre-id"
           data-primary-color="#ff6b6b"
           data-secondary-color="#4ecdc4"></script>
*/

/* ==========================================================
   VARIABLES CSS PERSONNALISABLES
   ========================================================== */
:root {
  /* Couleurs principales (gradient du compteur et bouton) */
  --survey-primary-color: #667eea;     /* Couleur principale */
  --survey-secondary-color: #764ba2;   /* Couleur secondaire */
  --survey-primary-rgb: 102, 126, 234; /* RGB pour les ombres */
  
  /* Couleurs d'interface */
  --survey-text-color: #333333;        /* Texte principal */
  --survey-bg-color: #ffffff;          /* Arrière-plan */
  --survey-border-color: #dddddd;      /* Bordures */
}

/* ==========================================================
   EXEMPLES DE THÈMES PRÉDÉFINIS
   ========================================================== */

/* Thème Rouge/Rose */
.survey-widget-theme-red {
  --survey-primary-color: #ff6b6b;
  --survey-secondary-color: #ff8e8e;
  --survey-primary-rgb: 255, 107, 107;
}

/* Thème Vert */
.survey-widget-theme-green {
  --survey-primary-color: #4ecdc4;
  --survey-secondary-color: #44a08d;
  --survey-primary-rgb: 78, 205, 196;
}

/* Thème Bleu */
.survey-widget-theme-blue {
  --survey-primary-color: #3498db;
  --survey-secondary-color: #2980b9;
  --survey-primary-rgb: 52, 152, 219;
}

/* Thème Orange */
.survey-widget-theme-orange {
  --survey-primary-color: #f39c12;
  --survey-secondary-color: #e67e22;
  --survey-primary-rgb: 243, 156, 18;
}

/* Thème Violet */
.survey-widget-theme-purple {
  --survey-primary-color: #9b59b6;
  --survey-secondary-color: #8e44ad;
  --survey-primary-rgb: 155, 89, 182;
}

/* Thème Sombre */
.survey-widget-theme-dark {
  --survey-primary-color: #34495e;
  --survey-secondary-color: #2c3e50;
  --survey-primary-rgb: 52, 73, 94;
  --survey-text-color: #2c3e50;
  --survey-bg-color: #ecf0f1;
  --survey-border-color: #bdc3c7;
}

/* ==========================================================
   UTILISATION DES THÈMES
   ========================================================== 
   
   Ajoutez simplement la classe du thème au conteneur parent :
   
   <div class="survey-widget-theme-red">
     <script src="...survey-widget.js" data-survey-id="..."></script>
   </div>
   
   ========================================================== */

/* Personnalisations avancées possibles */
.survey-widget-container {
  /* Personnaliser le conteneur principal */
}

.survey-signature-counter {
  /* Personnaliser le compteur de signatures */
  /* Les variables CSS sont automatiquement appliquées */
}

.survey-submit-button {
  /* Personnaliser le bouton de soumission */
  /* Les variables CSS sont automatiquement appliquées */
}

/* Responsive pour mobile */
@media (max-width: 600px) {
  .survey-signature-counter {
    font-size: 14px;
    padding: 10px 16px;
  }
  
  .survey-submit-button {
    font-size: 14px;
    padding: 12px;
  }
}