/* ============================================================
   Mysteria — Académie de Magie
   Thème or / marine / cyan magique. Chargé APRÈS le style de
   chaque page : surcharge les anciennes couleurs et modernise
   les composants (arrondis, lueurs, transitions).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  --bg: #070b14;
  --bg-soft: #0c1422;
  --card: #101a2c;
  --card-hover: #162238;
  --border: #2a3d5c;
  /* l'ancien accent devient l'or Mysteria (toutes les pages s'y réfèrent) */
  --green: #d4af37;
  --green-dark: #b8941f;
  --accent: #d4af37;
  --accent2: #ffd700;
  --magic: #00d4ff;
  --navy: #0a2342;
  --text: #f4ead5;
  --text-dim: #b8c4d4;
  --faint: #7a8496;
  --radius: 12px;
  --gold: #d4af37;
  --gold2: #ffd700;
}

body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(0,212,255,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 67% 22%, rgba(255,215,0,.55), transparent 60%),
    radial-gradient(1px 1px at 81% 71%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.4px 1.4px at 44% 88%, rgba(0,212,255,.45), transparent 60%),
    radial-gradient(1px 1px at 93% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1100px 480px at 50% -90px, rgba(212,175,55,.16), transparent 68%),
    radial-gradient(700px 380px at 100% 0, rgba(0,212,255,.08), transparent 58%),
    radial-gradient(640px 320px at 0% 100%, rgba(10,35,66,.9), transparent 70%) !important;
  background-size: 100% 100% !important;
  color: var(--text);
}

h1, h2, h3, h4, .brand-txt, .hero-txt h1, .hero-title {
  font-family: 'Cinzel', 'Times New Roman', serif;
}

/* ---- barre de navigation : verre marine souligné d'or ---- */
nav, .vz-nav, .nav {
  background: rgba(8, 12, 22, .86) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(212, 175, 55, .28) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .45), 0 1px 0 rgba(0, 212, 255, .06);
}

/* ---- arrondis modernes partout ---- */
button, .btn, input, select, textarea,
.cat, .lcat, .srv-pill, .pt, .hook input, .chip, .badge-admin,
.nav-user, .lang-sel, .keybtn, .btn-scan, .btn-primary {
  border-radius: 10px !important;
}
.card, .logc, .conf, .info-card, .search-card, .credit-bar, .scan-head,
.sbadge, .ws-block, .mfa-box, .ask-box, .zip-box, .buy-opt, .kind-card,
.viewer-msg, .tex-card, .mfam-box, .stat, .feat, .opt, .gate, .tool, .row {
  border-radius: 14px !important;
}
img.tex-thumb, .lmedia-img, .lmedia-vid-tile, .lmedia img, .lmedia video { border-radius: 10px !important; }

/* ---- boutons : or métallique + lueur cyan au survol ---- */
button, .btn, a.btn {
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease,
              background .14s ease, border-color .14s ease, color .14s ease;
}
.btn.primary, .btn-scan, .btn-primary, .keybtn, .btn-buy, .btn.btn-green, .pw-btn {
  background: linear-gradient(180deg, #ffe27a, #d4af37 55%, #a68620) !important;
  color: #1a1302 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 16px rgba(212, 175, 55, .28) !important;
}
.btn.primary:hover, .btn-scan:hover, .btn-primary:hover, .btn.btn-green:hover, .pw-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
              0 8px 28px rgba(212, 175, 55, .4),
              0 0 22px rgba(0, 212, 255, .22) !important;
}
.btn.primary:active, .btn-scan:active { transform: translateY(0); }

/* ---- cartes : profondeur douce ---- */
.card, .logc, .info-card, .search-card, .conf, .credit-bar, .scan-head {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  border-color: rgba(212, 175, 55, .18) !important;
}
.logc { border-left-width: 3px !important; }
.logc:hover { border-color: rgba(212, 175, 55, .4); }

/* ---- champs : focus or + halo magique ---- */
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .18), 0 0 16px rgba(0, 212, 255, .12) !important;
}

/* ---- pastilles de filtre (panel) ---- */
.cat { border-radius: 999px !important; padding: 6px 13px !important; }
.cat.on { color: #1a1302 !important; font-weight: 800; box-shadow: 0 3px 12px rgba(212, 175, 55, .3); }

/* ---- liens et accents ---- */
a:hover { color: #ffd700; }

/* ---- marque texte ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img, .brand-img, nav img, .vz-nav .brand-img {
  max-height: 48px;
  filter: drop-shadow(0 0 12px rgba(0, 212, 255, .25));
}
.brand-txt {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #e8d5a3;
}
.brand-txt b {
  background: linear-gradient(180deg, #ffe27a, #d4af37 60%, #8a6a14);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-ver {
  align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .12em;
  line-height: 1; padding: 4px 8px; border-radius: 999px;
  color: #9eefff; background: rgba(0, 212, 255, .1);
  border: 1px solid rgba(0, 212, 255, .35); white-space: nowrap;
  text-transform: uppercase;
}
@media (max-width: 640px) { .brand-ver { font-size: 9px; padding: 3px 6px; } }

/* ---- barre de défilement ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070b14; }
::-webkit-scrollbar-thumb { background: #2a3d5c; border-radius: 99px; border: 2px solid #070b14; }
::-webkit-scrollbar-thumb:hover { background: #d4af37; }

/* ---- sélection de texte dorée ---- */
::selection { background: rgba(212, 175, 55, .38); color: #fff; }