:root {
  /* Couleurs de marque */
  --color-bg: #0B0A14;           /* noir profond, nuit de stade */
  --color-bg-elevated: #15121F;  /* cartes, header, menu */
  --color-violet: #3B1770;       /* violet foncé principal */
  --color-violet-light: #6C3CD9;
  --color-orange: #FF6B1A;       /* accent VIP / CTA */
  --color-orange-soft: #FF8A45;
  --color-gold: #D4AF37;         /* couronne, éléments premium */
  --color-white: #F5F3FA;
  --color-grey: #8B87A0;
  --color-success: #2ECC71;
  --color-danger: #E74C3C;
  --color-on-accent: #0B0A14; /* texte toujours foncé sur fond orange/doré, quel que soit le thème */

  /* Dégradés signature */
  --gradient-hero: linear-gradient(160deg, #0B0A14 0%, #241049 55%, #3B1770 100%);
  --gradient-cta: linear-gradient(90deg, #FF6B1A 0%, #D4AF37 100%);

  /* Typographie */
  --font-display: 'Segoe UI Semibold', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* Rayons & ombres */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-glow-orange: 0 0 24px rgba(255,107,26,0.45);

  /* Espacements */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--color-bg);
  color: var(--color-white);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

.hidden { display: none !important; }

.accent-orange { color: var(--color-orange-soft); }
.accent-gold { color: var(--color-gold); }

.btn {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: var(--radius-l);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.btn:active { transform: scale(0.96); }

.btn-primary {
  background: var(--gradient-cta);
  color: var(--color-on-accent);
  box-shadow: var(--shadow-glow-orange);
}

.btn-ghost {
  background: transparent;
  color: var(--color-grey);
  border: 1.5px solid rgba(139,135,160,0.35);
}
.btn-ghost:disabled { opacity: 0.35; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ============ ANIMATIONS GÉNÉRALES ============ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-block, .match-card, .post-card, .prediction-card,
.admin-list-item, .dashboard-stat-card, .vip-category-card {
  animation: fadeInUp 0.35s ease both;
}

/* Effet tactile cohérent sur tous les éléments cliquables */
.match-card, .post-card, .admin-list-item, .vip-category-card,
.dashboard-tool-row, .comparison-tool {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.match-card:active, .vip-category-card:active:active {
  transform: scale(0.97);
}

/* ============ ÉTATS DE CHARGEMENT (squelette) ============ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(139,135,160,0.12);
  border-radius: var(--radius-s);
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skeletonShimmer 1.4s infinite;
}
@keyframes skeletonShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.skeleton-card {
  height: 140px;
  border-radius: var(--radius-m);
  margin-bottom: var(--space-3);
}
.skeleton-line {
  height: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
}
.skeleton-line.short { width: 60%; }

.match-card:nth-child(1) { animation-delay: 0.02s; }
.match-card:nth-child(2) { animation-delay: 0.06s; }
.match-card:nth-child(3) { animation-delay: 0.10s; }
.match-card:nth-child(4) { animation-delay: 0.14s; }
.match-card:nth-child(5) { animation-delay: 0.18s; }

/* ============ TRANSITION DOUCE ENTRE PAGES ============ */
#page-content, .admin-page {
  animation: fadeInUp 0.3s ease both;
}