/* Fichier pour customiser les couleurs Tailwind via CSS natif ou classes utilitaires personnalisées */

/* Palette pompier inspirée de code_test/index.html */
:root {
  --bs-dark-blue: #2c3e50;
  --bs-firefighter-red: #e74c3c;
  --bs-light-gray: #ecf0f1;
  --bs-text-dark: #34495e;
  --bs-text-muted: #7f8c8d;
  --bs-primary-blue: #3498db;
  --bs-success-green: #2ecc71;
  --bs-danger-red: #c0392b;
  --bs-border-red: #c0392b;
  --bs-option-hover-bg: #dde1e2;
  --bs-option-selected-bg: #2980b9;
  --bs-option-correct-bg: #27ae60;
  --bs-option-incorrect-bg: #e74c3c;
}

body.bg-custom {
  background-color: var(--bs-dark-blue) !important;
  background-image: url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><line x1="0" y1="50" x2="100" y2="50" stroke="%2334495e" stroke-width="1" opacity="0.1"/><line x1="50" y1="0" x2="50" y2="100" stroke="%2334495e" stroke-width="1" opacity="0.1"/></svg>');
  background-size: 50px 50px;
}

.bg-primary {
  background-color: var(--bs-primary-blue) !important;
}
.text-primary {
  color: var(--bs-primary-blue) !important;
}
.bg-secondary {
  background-color: var(--bs-firefighter-red) !important;
}
.text-secondary {
  color: var(--bs-firefighter-red) !important;
}
.bg-accent {
  background-color: var(--bs-success-green) !important;
}
.text-accent {
  color: var(--bs-success-green) !important;
}
.bg-light-gray {
  background-color: var(--bs-light-gray) !important;
}
.text-custom {
  color: var(--bs-text-dark) !important;
}
.text-muted-custom {
  color: var(--bs-text-muted) !important;
}

.btn-custom-primary {
  background-color: var(--bs-primary-blue);
  border-color: var(--bs-primary-blue);
  color: white;
  border-radius: 0.35rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s, transform 0.2s;
}
.btn-custom-primary:hover {
  background-color: #217dbb;
  border-color: #217dbb;
  transform: translateY(-2px);
}

.btn-custom-danger {
  background-color: var(--bs-danger-red);
  border-color: var(--bs-danger-red);
  color: white;
  border-radius: 0.35rem;
  transition: background-color 0.2s;
}
.btn-custom-danger:hover {
  background-color: var(--bs-border-red);
}

.btn-custom-download {
  background-color: var(--bs-success-green);
  border-color: var(--bs-success-green);
  color: white;
  border-radius: 0.35rem;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background-color 0.2s, transform 0.2s;
}
.btn-custom-download:hover {
  background-color: #23a060;
  border-color: #23a060;
  transform: translateY(-2px);
}

.quiz-container {
  max-width: 850px;
  border-radius: 0.75rem;
  border: 5px solid var(--bs-firefighter-red) !important;
  box-shadow: 0 0 20px rgba(0,0,0,0.2);
  background-color: var(--bs-dark-blue);
  padding: 30px;
}

.question-form, .quiz-info-form {
  background-color: var(--bs-light-gray) !important;
  border: 1px solid #bdc3c7;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 25px;
  border-radius: 0.5rem;
}

.alert-custom {
  background-color: var(--bs-firefighter-red);
  color: white;
  padding: 15px;
  border-radius: 0.5rem;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
  font-family: 'Oswald', sans-serif;
  font-size: 1.1em;
}

/* Utilitaires */
.hidden { display: none !important; }