/* Variables CSS par mode */
:root {
  /* Médailles */
  --medal-gold: #FFD700;
  --medal-silver: #C0C0C0;
  --medal-bronze: #CD7F32;
}

/* Mode Eurovision - Thème violet/indigo */
body[data-mode="eurovision"] {
  --primary-start: #4F46E5; /* indigo-600 */
  --primary-end: #7C3AED; /* purple-600 */
  --primary-dark-start: #4338CA; /* indigo-700 */
  --primary-dark-end: #6D28D9; /* purple-700 */
  --accent-color: #4F46E5;
  --accent-bg: #EEF2FF; /* indigo-50 */
  --accent-border: #C7D2FE; /* indigo-200 */
}

/* Mode Miss France - Couleurs officielles */
body[data-mode="missfrance"] {
  --midnight-blue: #04244b;
  --gold-light: #d5c48f26;
  --white: white;
  --gold: #a29163;

  /* Variables pour compatibilité avec les templates */
  --primary-start: #04244b; /* midnight-blue */
  --primary-end: #a29163; /* gold */
  --primary-dark-start: #031a36; /* midnight-blue plus foncé */
  --primary-dark-end: #8a7a56; /* gold plus foncé */
  --accent-color: #a29163; /* gold */
  --accent-bg: #d5c48f26; /* gold-light */
  --accent-border: #a29163; /* gold */
}

body {
  background-color: #F3F4F6;
}

/* Le style des couleurs de classement n'est plus utilisé */

/* Animation */
@keyframes pulse {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.animate-pulse {
  animation: pulse 1.5s infinite;
}

/* Bouton de score */
.score-button {
  transition: all 0.2s ease;
  width: 100%;
  min-width: unset;
  font-size: 0.9rem;
}

.score-button.active {
  background-color: var(--accent-color);
  color: white;
  transform: scale(1.05);
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

/* Override Tailwind colors with mode-specific colors */
body[data-mode="eurovision"] .text-indigo-600,
body[data-mode="eurovision"] .text-indigo-700,
body[data-mode="missfrance"] .text-indigo-600,
body[data-mode="missfrance"] .text-indigo-700 {
  color: var(--accent-color) !important;
}

body[data-mode="eurovision"] .bg-indigo-600,
body[data-mode="missfrance"] .bg-indigo-600 {
  background-color: var(--accent-color) !important;
}

body[data-mode="eurovision"] .hover\:bg-indigo-700:hover,
body[data-mode="missfrance"] .hover\:bg-indigo-700:hover {
  background-color: var(--accent-color) !important;
  filter: brightness(0.9);
}

body[data-mode="eurovision"] .bg-indigo-100,
body[data-mode="missfrance"] .bg-indigo-100 {
  background-color: var(--accent-bg) !important;
}

body[data-mode="eurovision"] .text-indigo-800,
body[data-mode="missfrance"] .text-indigo-800 {
  color: var(--accent-color) !important;
}

body[data-mode="eurovision"] .text-indigo-500,
body[data-mode="missfrance"] .text-indigo-500 {
  color: var(--accent-color) !important;
}

/* Classes utilitaires pour les dégradés par mode */
.bg-gradient-primary {
  background: linear-gradient(to right, var(--primary-start), var(--primary-end));
}

.bg-gradient-primary-dark {
  background: linear-gradient(to right, var(--primary-dark-start), var(--primary-dark-end));
}

.bg-accent {
  background-color: var(--accent-bg);
}

.text-accent {
  color: var(--accent-color);
}

.border-accent {
  border-color: var(--accent-border);
}

.btn-primary {
  background-color: var(--accent-color);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  filter: brightness(0.9);
}

/* Pour Alpine JS */
[x-cloak] {
  display: none !important;
}