/* ════════════════════════════════════════════════════════════════
   SKIN IDENTITÉ ZIKOF — pilote (override du look « dark néon générique »)
   Réutilise les tokens de /shared/css/zikof-theme.css (déjà chargé) :
   couleurs primaires, ombres dures 4px, bordures 2px, Bricolage Grotesque.
   ════════════════════════════════════════════════════════════════ */

body { background: var(--bg) !important; color: var(--ink) !important; font-family: var(--font) !important; }

/* Titres en Bricolage, sans dégradé arc-en-ciel (le tell « IA ») */
h1, h2, h3, .evolution-section h3, .game-section h2, [class*="title"] {
  font-family: var(--font-display) !important;
  color: var(--ink) !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Panneaux = cartes Zikof (bordure 2px + ombre dure) */
.game-section, .evolution-section, .welcome-section, .artist-image-container,
.stats-section, .hints-grid-section {
  background: var(--surf) !important;
  border: var(--border-w) solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-hard) !important;
}

/* Champ de recherche */
#search-artist {
  border: var(--border-w) solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hard-sm) !important;
  background: var(--surf) !important; color: var(--ink) !important;
  font-family: var(--font) !important; font-weight: 600 !important;
}
#search-artist:focus {
  box-shadow: var(--shadow-hard) !important;
  transform: translate(-1px, -1px);
  border-color: var(--blue) !important; outline: none !important;
}

/* Items d'historique = lignes bordées (PAS d'ombre dure : ils sont DANS le
   panneau Historique → une ombre imbriquée « dépasserait » et ferait sale) */
.history-item {
  display: block !important;
  background: var(--surf) !important;
  border: var(--border-w) solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
}
.history-item::before { display: none !important; }
.history-item-head { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 8px !important; }
.history-item img, .history-item-placeholder {
  width: 44px !important; height: 44px !important;
  border: var(--border-w) solid var(--line) !important;
  border-radius: 50% !important;
}
.history-item strong { font-family: var(--font-display) !important; color: var(--ink) !important;
  font-size: 1.15rem !important; margin: 0 !important; }

/* Indices = pastilles Zikof (bordure + petite ombre dure) */
.indices-container { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
.indice-item {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
  gap: 3px !important; text-align: center !important; white-space: normal !important;
  background: var(--surf) !important; color: var(--ink) !important;
  border: var(--border-w) solid var(--line) !important;
  border-radius: 10px !important; box-shadow: none !important;
  padding: 11px 4px !important; min-height: 72px !important; line-height: 1.12 !important; word-break: break-word !important;
}
.indice-label { font-size: .8rem !important; font-weight: 800 !important; opacity: .85 !important; }
.indice-val   { font-size: 1.08rem !important; font-weight: 800 !important; }
.indice-item.indice-ok   { background: var(--green) !important;  color: var(--on-green) !important;
  animation: pop-ok-indice .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.indice-item.indice-no   { background: #e7e1ee !important;       color: #15131c !important; }
.indice-item.indice-near { background: var(--yellow) !important; color: var(--on-yellow) !important; }
.indice-item.indice-na   { background: var(--surf) !important;   color: var(--soft, #8a8699) !important; }
@keyframes pop-ok-indice {
  0%   { transform: scale(.5);  box-shadow: 0 0 0 0 rgba(87, 227, 95, 0); }
  50%  { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(87, 227, 95, .55); }
  100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(87, 227, 95, 0); }
}
@media (prefers-reduced-motion: reduce) { .indice-item.indice-ok { animation: none; } }

/* Carte gagnante : on garde le fond sombre + liseré vert (le fond jaune rendait
   les pastilles illisibles). Les 5 pastilles vertes signalent déjà la victoire. */
.history-item.correct-answer { border-color: var(--green) !important; box-shadow: 0 0 0 3px rgba(22,192,138,.35), var(--shadow-hard) !important; }

/* Boutons primaires → bouton Zikof (display, ombre dure, bleu) */
.btn-primary, .onboarding-cta, .modal .btn-primary, button.primary, .cta-btn {
  font-family: var(--font-display) !important; font-weight: 800 !important;
  border: var(--border-w) solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-hard) !important;
  background: var(--blue) !important; color: #fff !important;
}

/* Valeur révélée en synthèse → accent bleu Zikof */
.correct-value { color: var(--accent-blue) !important; font-weight: 800 !important; }

/* Barre de progression → vert Zikof plein */
.progress-fill, [class*="progress"] > [class*="fill"] { background: var(--green) !important; }
.progress-bar { background: var(--surf-2) !important; border: var(--border-w) solid var(--line) !important; height: 12px !important; }

/* Aération : le « X/6 » et « essais restants » étaient trop collés à la barre */
.game-section { padding: 22px 20px !important; }
.game-section h2 { margin-bottom: 18px !important; }
.lives-container { margin-bottom: 16px !important; }
.progress-bar { margin-top: 4px !important; }
.progress-info { margin-top: 18px !important; margin-bottom: 4px !important; font-weight: 700 !important; }
.progress-container { margin-bottom: 28px !important; }

/* ════════════════════════════════════════════════════════════════
   REMAP DES TOKENS GÉNÉRIQUES (base "Tailwind" violet/slate) → palette + brutalist Zikof.
   Couvre TOUT ce qui n'est pas listé ci-dessus (header, liens, badges, ombres…) par cascade.
   ════════════════════════════════════════════════════════════════ */
:root, [data-theme="dark"], [data-theme="light"] {
  /* couleurs de marque (mêmes en clair/sombre, comme le reste du portail) */
  --primary-color: var(--blue) !important;
  --primary-hover: #1d1dd6 !important;
  --accent-color: var(--yellow) !important;
  --success-color: var(--green) !important;
  --error-color: var(--pink) !important;
  --warning-color: var(--yellow) !important;
  /* ombres dures (fini le flou) */
  --shadow-sm: var(--shadow-hard-sm) !important;
  --shadow-md: var(--shadow-hard) !important;
  --shadow-lg: 6px 6px 0 var(--sh) !important;
  /* surfaces & texte → suivent le thème du portail (var(--bg/surf/ink) sont theme-aware) */
  --bg-primary: var(--bg) !important;
  --bg-secondary: var(--surf) !important;
  --text-primary: var(--ink) !important;
  --text-secondary: var(--soft, #a79fc4) !important;
  --gray-100: var(--surf) !important;
  --gray-200: var(--line) !important;
  --gray-300: var(--line) !important;
}
/* Header custom (dégradé violet) → header brutaliste bleu */
.main-header {
  background: var(--blue) !important;
  border-bottom: var(--border-w) solid var(--sh) !important;
  box-shadow: 0 3px 0 var(--sh) !important;
}
[data-theme="dark"] .main-header { background: var(--blue) !important; }
.practice-indicator { background: var(--yellow) !important; color: var(--on-yellow) !important; }
.btn-login-header, .btn-theme-toggle { border: var(--border-w) solid rgba(255,255,255,.55) !important; border-radius: var(--radius-md) !important; }
/* Liens nav surlignés en jaune (au lieu du translucide) */
.nav-links a[aria-current="page"] { background: rgba(255,210,63,.25) !important; }

/* Cases plus aérées sur mobile (aligné sur Devine le Groupe) */
@media (max-width: 380px) {
  .indice-item { min-height: 64px !important; padding: 9px 2px !important; }
  .indice-label { font-size: .7rem !important; }
  .indice-val { font-size: .94rem !important; }
}


/* Bloc « Indices découverts » : pastilles (chips) au lieu d'une phrase à puces */
.evolution-phrase { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; justify-content: center !important; }
.evo-chip {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  background: var(--surf) !important; color: var(--ink) !important;
  border: var(--border-w) solid var(--line) !important; border-radius: 999px !important;
  padding: 5px 11px !important; font-weight: 700 !important; font-size: .8rem !important;
}
.evo-empty { opacity: .7 !important; font-weight: 700 !important; }

/* Couleur des pastilles : vert = indice exact, jaune = fourchette */
.evo-chip--ok    { background: var(--green) !important;  color: #15131c !important; }
.evo-chip--range { background: var(--yellow) !important; color: #15131c !important; }
.evo-chip--ok .correct-value, .evo-chip--range .range-value { color: #15131c !important; }

/* Indices découverts : un seul cadre (on retire la section englobante) + de l'air autour */
#evolution-phrase-container { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.evolution-section { padding: 20px 18px !important; }