/* GambitIQ — feuille de style complémentaire à Tailwind (CDN) */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #181b1e;
}

/* Damier discret en fond de hero — esprit "bulletin de tournoi" */
.chess-motif {
  background-image:
    linear-gradient(45deg, #ece8dd 25%, transparent 25%, transparent 75%, #ece8dd 75%),
    linear-gradient(45deg, #ece8dd 25%, transparent 25%, transparent 75%, #ece8dd 75%);
  background-size: 64px 64px;
  background-position: 0 0, 32px 32px;
  opacity: 0.035;
}

/* Grain mat très léger sur le fond racine, pas de dégradé brillant */
.grain-ink {
  background-color: #181b1e;
  background-image: radial-gradient(circle at 1px 1px, rgba(236, 232, 221, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

.font-notation {
  font-family: "IBM Plex Mono", monospace;
}

/* Barre de progression du quiz */
.progress-track {
  background-color: #3b434a;
}
.progress-fill {
  background-color: #d9a441;
  transition: width 300ms ease;
}

/* Carte d'option de quiz */
.quiz-option {
  border: 1px solid #3b434a;
  background-color: #22272c;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.quiz-option:hover {
  border-color: #d9a441;
  background-color: #2b3137;
}
.quiz-option:active {
  transform: scale(0.99);
}
.quiz-option.is-selected {
  border-color: #d9a441;
  background-color: #2b3137;
}

/* Transitions douces entre étapes */
.quiz-step {
  animation: fadein 220ms ease;
}
@keyframes fadein {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scrollbar discrète (webkit) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #181b1e;
}
::-webkit-scrollbar-thumb {
  background: #3b434a;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6f777c;
}

/* Focus clavier visible mais discret */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #d9a441;
  outline-offset: 2px;
}

.legal-content h2 {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  color: #ece8dd;
  font-size: 1.25rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.legal-content p {
  color: #9aa2a6;
  line-height: 1.75;
  margin-bottom: 1rem;
}
.legal-content a {
  color: #d9a441;
  text-decoration: underline;
  text-decoration-color: #a67d33;
}
.legal-content strong {
  color: #ece8dd;
  font-weight: 600;
}