/* ============================================
   DOCS.CSS - Styles optimisés pour la lecture
   (Mentions, CGU, Contact, Histoire, etc.)
   ============================================ */

/* --- Polices Spécifiques --- */
.font-fredoka {
  font-family: "Fredoka One", cursive;
}
.font-knewave {
  font-family: "Knewave", cursive;
}

/* --- CONTENEURS & CARTES --- */
/* Remplace bg-white */
.doc-card {
  background-color: #ffffff;
  color: #374151; /* Gray-700 */
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Remplace bg-gray-50 */
.doc-box {
  background-color: #f9fafb; /* Gray-50 */
  border: 1px solid #e5e7eb; /* Gray-200 */
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* --- TEXTES --- */
.doc-title {
  color: #1f2937;
} /* Gray-800 */
.doc-text {
  color: #374151;
} /* Gray-700 */
.doc-muted {
  color: #6b7280;
} /* Gray-500 */

/* --- MODE SOMBRE (Overrides) --- */
body.dark-mode .doc-card {
  background-color: var(--bg-modal); /* Utilise le fond sombre des modales */
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1); /* Petite lueur néon subtile */
  border: 1px solid var(--border-color);
}

body.dark-mode .doc-box {
  background-color: rgba(
    255,
    255,
    255,
    0.05
  ); /* Fond légèrement plus clair que le noir */
  border-color: var(--border-color);
  color: var(--text-primary);
}

body.dark-mode .doc-title {
  color: var(--text-title);
}
body.dark-mode .doc-text {
  color: var(--text-primary);
}
body.dark-mode .doc-muted {
  color: var(--text-secondary);
}

body.dark-mode strong {
  color: var(--pastel-blue); /* Met en valeur les mots importants */
}

body.dark-mode a {
  color: var(--button-primary);
}

/* --- ANIMATIONS SPÉCIFIQUES --- */
.error-wheel {
  animation: errorRotate 3s ease-in-out infinite alternate;
  filter: drop-shadow(6px 6px 0 var(--border-color));
}

.offline-tag {
  animation: pulseTag 1.2s infinite;
}

.coin-spin {
  animation: spinCoin 3s infinite linear;
  display: inline-block;
}

@keyframes errorRotate {
  from {
    transform: rotate(-12deg);
  }
  to {
    transform: rotate(12deg);
  }
}
@keyframes pulseTag {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}
@keyframes spinCoin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

h2,
h3,
h4 {
  font-family: "Fredoka One", cursive !important;
}

.btn {
  color: white;
}