/* ════════════════════════════════════════════════════════════
   YBN LOS ANGELES — GRITTY THEME (pages intérieures)
   Chargé EN DERNIER sur : whitelist, règlement, guide,
   entraînement, dossiers, profil, admin.
   Repasse derrière la couche "noir plat" de style.css pour
   retrouver la signature Gritty LA de l'accueil :
   or riche, grain, Teko condensé, tampons, ombres dures.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&family=Permanent+Marker&family=Special+Elite&family=Teko:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

/* ════════ 1. PALETTE — l'or "gold chain" remplace l'or terne ════════ */
:root, body.v4-page {
  --g-gold:      #FFD700;
  --g-gold-2:    #DAA520;
  --g-gold-deep: #8a6914;
  --g-gold-glow: rgba(255,215,0,.32);
  --g-gold-soft: rgba(218,165,32,.12);

  --noir-bg:        #0c0b09;
  --noir-card:      #14120f;
  --noir-gold:      var(--g-gold-2);
  --noir-gold-2:    #b8891c;
  --noir-gold-soft: var(--g-gold-soft);

  --v4-bg:    #0c0b09;
  --v4-bg-2:  #12100d;
  --v4-bg-3:  #171410;
  --v4-card:  #14120f;
  --v4-card-hov: #1b1814;

  --v4-red:        var(--g-gold-2);
  --v4-red-2:      #b8891c;
  --v4-red-deep:   var(--g-gold-deep);
  --v4-amber:      var(--g-gold-2);
  --v4-amber-2:    #b8891c;
  --v4-amber-soft: var(--g-gold-soft);
  --v4-amber-glow: var(--g-gold-glow);
  --red:  var(--g-gold-2);
  --red2: var(--g-gold-2);
  --red3: var(--g-gold-2);

  /* Retour du contraste typographique street : Teko pour les displays */
  --v4-font-disp: 'Teko', sans-serif;
  --font-title:   'Teko', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
}

/* ════════ 2. BASE — fond chaud + grain de film ════════ */
html, body, body.v4-page { background: var(--noir-bg) !important; }
::selection { background: var(--g-gold-2) !important; color: #000 !important; }
::-webkit-scrollbar { width: 10px !important; }
::-webkit-scrollbar-track { background: #080706 !important; }
::-webkit-scrollbar-thumb { background: #3b3226 !important; border: 2px solid #080706 !important; }
::-webkit-scrollbar-thumb:hover { background: var(--g-gold-deep) !important; }

/* Grain SANS mix-blend-mode (la fusion plein écran faisait ramer le scroll) */
body::after {
  content: '';
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 2000;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ════════ 3. NAV — bande arrachée ════════ */
.v4-nav, #ybn-nav {
  background: rgba(10,9,7,.93) !important;
  backdrop-filter: blur(14px) !important;
  border-bottom: none !important;
  animation: none !important;
}
/* Déchirure en pseudo-élément SOUS la barre — jamais de clip-path sur la nav
   elle-même, sinon le menu profil (dropdown) serait rogné et invisible. */
.v4-nav::after, #ybn-nav::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important; left: 0 !important; right: 0 !important;
  height: 8px !important;
  background: rgba(10,9,7,.95) !important;
  clip-path: polygon(0 0,100% 0,100% 30%,97.5% 100%,94% 25%,90% 90%,86% 35%,81% 100%,76% 30%,71% 85%,66% 20%,61% 95%,56% 35%,50% 100%,45% 30%,40% 90%,35% 25%,30% 100%,25% 35%,20% 85%,15% 25%,10% 95%,6% 30%,3% 90%,0 35%) !important;
  pointer-events: none !important;
}
.v4-nav-brand img, .nav-logo { filter: drop-shadow(0 0 10px rgba(255,215,0,.25)) !important; }
.v4-nav-links a, .nav-links a {
  font-family: 'Teko', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
}
.v4-nav-links a:hover, .v4-nav-links a.active,
.nav-links a:hover, .nav-links a.active {
  color: var(--g-gold) !important;
  text-shadow: 0 0 14px var(--g-gold-glow) !important;
}

/* ════════ 4. TYPO — retour du condensé street ════════ */
.v4-display, .v4-title-section, .chap-h2, .sp-title {
  font-family: 'Teko', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  line-height: .94 !important;
}
.v4-display .amber, .v4-title-section .amber, .chap-h2 span {
  color: var(--g-gold) !important;
  text-shadow: 0 0 22px var(--g-gold-glow) !important;
}

/* Kickers → machine à écrire "dossier" */
.v4-welcome {
  font-family: 'Special Elite', monospace !important;
  font-size: 11px !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: var(--g-gold-2) !important;
  background: transparent !important;
  border: 1px solid var(--g-gold-deep) !important;
  border-radius: 0 !important;
  padding: 6px 14px 5px !important;
}
.v4-welcome i { color: var(--g-gold-2) !important; }

/* ════════ 5. BOUTONS — pochoirs sprayés ════════ */
.v4-btn-primary {
  font-family: 'Teko', sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  clip-path: polygon(0 10%, 2% 0, 98% 2%, 100% 14%, 99% 88%, 97% 100%, 3% 97%, 0 90%) !important;
  background: var(--g-gold-2) !important;
  color: #000 !important;
  box-shadow: 0 0 24px rgba(218,165,32,.22) !important;
  transition: background .2s, transform .15s, box-shadow .2s !important;
}
.v4-btn-primary:hover {
  background: var(--g-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 0 34px rgba(255,215,0,.35) !important;
}
.v4-btn-primary.ghost {
  background: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35) !important;
}
.v4-btn-primary.ghost:hover {
  color: var(--g-gold) !important;
  box-shadow: inset 0 0 0 2px var(--g-gold-2), 0 0 22px rgba(255,215,0,.15) !important;
  background: rgba(218,165,32,.06) !important;
}

.v4-pill, .v4-btn-connect {
  font-family: 'Teko', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  clip-path: polygon(0 12%, 3% 0, 100% 5%, 98% 86%, 95% 100%, 2% 95%) !important;
}
.v4-pill { border: 1.5px solid rgba(255,255,255,.25) !important; background: transparent !important; color: #fff !important; }
.v4-pill:hover { border-color: var(--g-gold-2) !important; color: var(--g-gold) !important; background: rgba(218,165,32,.07) !important; }
.v4-pill-light, .v4-pill-amber {
  background: var(--g-gold-2) !important;
  border-color: var(--g-gold-2) !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(218,165,32,.2) !important;
}
.v4-pill-light:hover, .v4-pill-amber:hover { background: var(--g-gold) !important; border-color: var(--g-gold) !important; color: #000 !important; }

.v4-btn-connect {
  background: var(--g-gold-2) !important;
  border: none !important;
  color: #000 !important;
  box-shadow: 0 0 22px rgba(255,215,0,.2) !important;
}
.v4-btn-connect:hover { background: var(--g-gold) !important; box-shadow: 0 0 30px rgba(255,215,0,.38) !important; }

/* Boutons génériques (.btn du panel/modales) */
.btn {
  font-family: 'Rajdhani', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  clip-path: polygon(0 14%, 2.5% 0, 100% 6%, 98.5% 84%, 96% 100%, 1.5% 94%) !important;
}
.btn-acc { background: var(--g-gold-2) !important; color: #000 !important; border-color: var(--g-gold-2) !important; }
.btn-acc:hover { background: var(--g-gold) !important; }

/* ════════ 6. CARTES — affiches, dalles, ombres dures ════════ */
.v4-card, .v4-qa-card, .tier-card, .police-report, .gang-card, .lore-card {
  border-radius: 0 !important;
  background: linear-gradient(165deg, #1a1713, var(--noir-card) 60%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 6px 8px 24px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.03) !important;
  transition: transform .25s, border-color .25s, box-shadow .25s !important;
}
.v4-card:hover, .gang-card:hover, .tier-card:hover {
  border-color: rgba(218,165,32,.35) !important;
  transform: translateY(-4px) !important;
  box-shadow: 10px 14px 34px rgba(0,0,0,.75), 0 0 26px rgba(218,165,32,.08) !important;
}
.v4-card-icon {
  border-radius: 0 !important;
  clip-path: polygon(6% 0,100% 4%,96% 96%,0 100%);
  background: rgba(218,165,32,.07) !important;
  border: 2px solid var(--g-gold-deep) !important;
  color: var(--g-gold) !important;
}
.v4-card-title { font-family: 'Teko', sans-serif !important; font-size: 22px !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; }

body.v4-page .sanction-wrap { border-radius: 0 !important; }

/* ════════ 7. FORMULAIRES — encre sur papier sombre ════════ */
body.v4-page input[type="text"],
body.v4-page input[type="email"],
body.v4-page input[type="number"],
body.v4-page input[type="url"],
body.v4-page textarea,
body.v4-page select {
  border-radius: 0 !important;
  background: #0f0e0b !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: #fff !important;
  transition: border-color .2s, box-shadow .2s !important;
}
body.v4-page input:focus,
body.v4-page textarea:focus,
body.v4-page select:focus {
  border-color: var(--g-gold-2) !important;
  box-shadow: 0 0 0 1px var(--g-gold-deep), 0 0 18px rgba(218,165,32,.12) !important;
  outline: none !important;
}
body.v4-page input[type="checkbox"], body.v4-page input[type="radio"] { accent-color: var(--g-gold-2) !important; }

/* ════════ 8. DIVERS ════════ */
/* Ruban type scène de crime → ruban or */
.crime-tape {
  background: #14120f !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  color: #7d7a74 !important;
  font-family: 'Teko', sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
}

/* Barres de progression QCM & co */
.qpfill, body.page-whitelist .qpfill {
  background: linear-gradient(90deg, var(--g-gold-deep), var(--g-gold)) !important;
  box-shadow: 0 0 12px rgba(255,215,0,.35) !important;
}

/* Badges filière — on garde les couleurs métier (fonctionnelles) */
.v4-fil-pill.illegale, .fc-illegale { /* rouge conservé par style.css */ }

/* Liens en texte courant */
body.v4-page a:not([class]) { color: var(--g-gold-2); }
body.v4-page a:not([class]):hover { color: var(--g-gold); }

/* Footer */
.v4-footer { background: #080706 !important; }
.v4-footer h5 { font-family: 'Teko', sans-serif !important; letter-spacing: 2.5px !important; color: var(--g-gold-2) !important; text-transform: uppercase !important; }
.v4-footer a:hover { color: var(--g-gold) !important; }

/* Notifs (shared.js) — cartes sombres bord or */
.notif {
  border-radius: 0 !important;
  background: #0d0c0a !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-left: 3px solid var(--g-gold-2) !important;
  box-shadow: 6px 7px 0 rgba(0,0,0,.5) !important;
}
.notif.ok { border-left-color: #3fae66 !important; }
.notif.err { border-left-color: #ef4444 !important; }
.notif.warn { border-left-color: #f59e0b !important; }

/* Modales */
.modal, .modal-box, #modal-overlay .modal-card {
  border-radius: 0 !important;
  background: #14120f !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 12px 14px 0 rgba(0,0,0,.5) !important;
}

/* ════════ 9. ACCESSIBILITÉ ════════ */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
}