/* ═══════════════════════════════════════════════════════════════════════════
   THEME 8BIT — 8-BIT / PIXEL ART
   NES · Pixel Art · DOS · Low-fi
   version: 1.0.0
   Activé via : html[data-theme="8bit"]
═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=DotGothic16&family=IBM+Plex+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Variables ─────────────────────────────────────────────────────────── */
html[data-theme="8bit"] {
  /* Palette NES-dark */
  --bg:      #080808;
  --bg2:     #121212;
  --bg3:     #1c1c1c;
  --surface: #121212;
  --card-base: #121212;

  --cream:   #f8f0d8;
  --red:     #d02818;
  --sage:    #30a040;

  --accent:  #d02818;
  --accent2: #30a040;
  --text:    #f0e8d0;
  --muted:   rgba(240,232,208,0.42);
  --green:   #30a040;
  --success: #30a040;
  --danger:  #d02818;

  --border:  rgba(240,232,208,0.14);
  --border2: rgba(240,232,208,0.28);

  /* Fonts */
  --mono:         'DotGothic16', 'IBM Plex Mono', monospace;
  --font-display: 'Press Start 2P', monospace;
  --font-jp:      'Press Start 2P', monospace;

  /* Pixel shadow shorthand */
  --px-shadow:  4px 4px 0 rgba(0,0,0,0.95);
  --px-shadow2: 3px 3px 0 rgba(0,0,0,0.95);
  --px-border:  2px solid rgba(240,232,208,0.28);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html[data-theme="8bit"] body {
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
  image-rendering: pixelated;
}

/* Dithered background subtil */
html[data-theme="8bit"] body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: repeating-conic-gradient(
    rgba(255,255,255,0.018) 0% 25%,
    transparent 0% 50%
  );
  background-size: 4px 4px;
}

/* Scanlines CRT */
html[data-theme="8bit"] body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0.12) 4px
  );
}

/* ── Page header ───────────────────────────────────────────────────────── */
html[data-theme="8bit"] .mln-page-header {
  background: var(--bg) !important;
  border-bottom: 3px solid rgba(240,232,208,0.2) !important;
  position: relative !important;
}

/* Watermark pixel */
html[data-theme="8bit"] .mln-page-header::after {
  content: "8BIT";
  position: absolute !important;
  bottom: 4px !important;
  right: 12px !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 80px !important;
  color: rgba(240,232,208,0.04) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 0 !important;
  user-select: none !important;
  letter-spacing: 0.05em !important;
}

html[data-theme="8bit"] .mln-page-header-inner {
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme="8bit"] .mln-page-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(1rem, 3.5vw, 1.8rem) !important;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-text-fill-color: var(--cream) !important;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.8) !important;
}

html[data-theme="8bit"] .mln-page-title-ja {
  display: inline-block !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  color: var(--red) !important;
  background: var(--cream) !important;
  padding: 0.3em 0.5em !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.9) !important;
  -webkit-text-fill-color: var(--red) !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  align-self: center !important;
}

html[data-theme="8bit"] .mln-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

html[data-theme="8bit"] .mln-page-sub {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  color: var(--muted) !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
html[data-theme="8bit"] .mln-navbar,
html[data-theme="8bit"] .mln-nav {
  background: var(--bg2) !important;
  border-bottom: 3px solid rgba(240,232,208,0.18) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.9) !important;
}

html[data-theme="8bit"] .mln-nav-link,
html[data-theme="8bit"] .mln-nav-item a {
  font-family: 'DotGothic16', monospace !important;
  color: var(--muted) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
}

html[data-theme="8bit"] .mln-nav-link:hover,
html[data-theme="8bit"] .mln-nav-item a:hover {
  color: var(--cream) !important;
}

html[data-theme="8bit"] .mln-nav-link.active,
html[data-theme="8bit"] .mln-active {
  color: var(--red) !important;
  text-shadow: 0 0 8px rgba(208,40,24,0.5) !important;
}

/* ── Cards — pixel border ──────────────────────────────────────────────── */

/* Mixin réutilisable via variable — appliqué explicitement */
html[data-theme="8bit"] .card {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--bg2) !important;
  border: 2px solid rgba(240,232,208,0.22) !important;
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.95),
    inset 1px 1px 0 rgba(255,255,255,0.05) !important;
}
html[data-theme="8bit"] .card::before { content: none !important; }

/* Titre de section dans les cards */
html[data-theme="8bit"] .card h2,
html[data-theme="8bit"] .card h3 {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.08em !important;
  color: var(--cream) !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8) !important;
}

/* Analytics */
html[data-theme="8bit"] .a-card,
html[data-theme="8bit"] .a-kpi {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  border: 2px solid rgba(240,232,208,0.18) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.95) !important;
}

html[data-theme="8bit"] .a-card-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.06em !important;
}

/* Portal cards */
html[data-theme="8bit"] .p-card,
html[data-theme="8bit"] .p-music-card,
html[data-theme="8bit"] .p-services-card,
html[data-theme="8bit"] .p-map-card {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  border: 2px solid rgba(240,232,208,0.18) !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.95) !important;
}

/* Section labels */
html[data-theme="8bit"] [class*="-label"],
html[data-theme="8bit"] [class*="-title"]:not(.mln-page-title):not(.mln-nav-link) {
  font-family: 'DotGothic16', monospace !important;
}

/* ── Chip / badge ──────────────────────────────────────────────────────── */
html[data-theme="8bit"] .chip,
html[data-theme="8bit"] .pill {
  border-radius: 0 !important;
  font-family: 'DotGothic16', monospace !important;
}

html[data-theme="8bit"] .chip-primary {
  background: rgba(48,160,64,0.15) !important;
  border: 1px solid rgba(48,160,64,0.4) !important;
  color: var(--sage) !important;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
html[data-theme="8bit"] input,
html[data-theme="8bit"] textarea,
html[data-theme="8bit"] select {
  background: var(--bg3) !important;
  border: 2px solid rgba(240,232,208,0.2) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  font-family: 'DotGothic16', monospace !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}
html[data-theme="8bit"] input:focus,
html[data-theme="8bit"] textarea:focus,
html[data-theme="8bit"] select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9), 0 0 0 1px var(--accent) !important;
}

/* ── Boutons ───────────────────────────────────────────────────────────── */
html[data-theme="8bit"] button:not([class*="toggle"]):not([class*="leaflet"]) {
  border-radius: 0 !important;
  font-family: 'DotGothic16', monospace !important;
}

html[data-theme="8bit"] .s-save-btn,
html[data-theme="8bit"] .p-btn-post,
html[data-theme="8bit"] [class*="-btn"]:not(.mln-bar-btn) {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.08em !important;
  transition: box-shadow 0.05s, transform 0.05s !important;
}
html[data-theme="8bit"] .s-save-btn:active,
html[data-theme="8bit"] .p-btn-post:active {
  box-shadow: 1px 1px 0 rgba(0,0,0,0.95) !important;
  transform: translate(2px, 2px) !important;
}

/* ── BUS TILES — pixel couleur vive ────────────────────────────────────── */
html[data-theme="8bit"] .p-bus-tile {
  border-radius: 0 !important;
  border: 2px solid rgba(0,0,0,0.5) !important;
  box-shadow:
    4px 4px 0 rgba(0,0,0,0.95),
    inset 1px 1px 0 rgba(255,255,255,0.15) !important;
  /* Pas de désaturation — les couleurs NES restent vives */
  filter: none !important;
  image-rendering: pixelated;
}

/* Badge numéro de ligne — font pixel */
html[data-theme="8bit"] .p-bus-num {
  font-family: 'Press Start 2P', monospace !important;
  font-size: clamp(1rem, 2.8vw, 1.6rem) !important;
  letter-spacing: 0.02em !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.7) !important;
  position: relative !important;
}
/* Dithered overlay sur le badge */
html[data-theme="8bit"] .p-bus-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(
    rgba(0,0,0,0.12) 0% 25%,
    transparent 0% 50%
  );
  background-size: 3px 3px;
  pointer-events: none;
}

/* Nom arrêt — DotGothic lisible */
html[data-theme="8bit"] .p-bus-col-name {
  font-family: 'DotGothic16', monospace !important;
  font-style: normal !important;
  letter-spacing: 0.03em !important;
  font-size: 0.85rem !important;
}

/* Heure — Press Start 2P */
html[data-theme="8bit"] .p-bus-col-time {
  font-family: 'Press Start 2P', monospace !important;
  font-style: normal !important;
  font-size: 1rem !important;
  letter-spacing: 0.04em !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6) !important;
}
html[data-theme="8bit"] .p-bus-col-time.none {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.72rem !important;
}
html[data-theme="8bit"] .p-bus-col-dir {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.65rem !important;
  opacity: 0.7 !important;
}

html[data-theme="8bit"] .p-bus-sep {
  background: rgba(255,255,255,0.2) !important;
  width: 2px !important;
}

/* Bus timer */
html[data-theme="8bit"] .bus-timer {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  background: var(--bg2) !important;
  border: 2px solid rgba(240,232,208,0.18) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
}

/* Bus pulse — pixel rouge */
html[data-theme="8bit"] .bus-pulse {
  background: var(--red) !important;
  border-radius: 0 !important;
  animation: bus-pulsate-pixel 1.2s steps(2) infinite !important;
}
@keyframes bus-pulsate-pixel {
  0%  { box-shadow: 0 0 0 0 rgba(208,40,24,0.9); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(208,40,24,0); transform: scale(1.3); }
  100%{ box-shadow: 0 0 0 0 rgba(208,40,24,0); transform: scale(1); }
}

/* ── Places / PSC ──────────────────────────────────────────────────────── */
html[data-theme="8bit"] .place-card {
  border-radius: 0 !important;
  border: 2px solid rgba(240,232,208,0.15) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
}

html[data-theme="8bit"] .psc-dot {
  border-radius: 0 !important;
}

html[data-theme="8bit"] .psc-track-title {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.88rem !important;
}
html[data-theme="8bit"] .psc-track-meta {
  font-family: 'DotGothic16', monospace !important;
}

/* ── Tiles services ────────────────────────────────────────────────────── */
html[data-theme="8bit"] .p-tile {
  border-radius: 0 !important;
  border: 2px solid rgba(240,232,208,0.14) !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
  background: var(--bg2) !important;
}
html[data-theme="8bit"] .p-tile:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.95) !important;
}
html[data-theme="8bit"] .p-tile-name {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.7rem !important;
  color: var(--muted) !important;
}

/* ── Journey replay ────────────────────────────────────────────────────── */
html[data-theme="8bit"] .p-journey-controls {
  background: rgba(0,0,0,0.5) !important;
  border-top: 2px solid rgba(240,232,208,0.12) !important;
}
html[data-theme="8bit"] .p-journey-label {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.1em !important;
  color: var(--red) !important;
}
html[data-theme="8bit"] #p-journey-btn {
  border-radius: 0 !important;
  background: rgba(208,40,24,0.15) !important;
  border: 2px solid rgba(208,40,24,0.5) !important;
  color: var(--red) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.5rem !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}
html[data-theme="8bit"] #jspd-1,
html[data-theme="8bit"] #jspd-2 {
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.45rem !important;
}

/* ── Modales / overlays ────────────────────────────────────────────────── */
html[data-theme="8bit"] .p-modal {
  background: var(--bg2) !important;
  border: 3px solid rgba(240,232,208,0.3) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.95) !important;
}
html[data-theme="8bit"] .p-modal-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.6rem !important;
  color: var(--red) !important;
  letter-spacing: 0.06em !important;
}
html[data-theme="8bit"] .p-modal-overlay .p-modal textarea {
  border-radius: 0 !important;
}

/* ── Edit bar ──────────────────────────────────────────────────────────── */
html[data-theme="8bit"] #mln-edit-bar {
  background: var(--bg2) !important;
  backdrop-filter: none !important;
  border-bottom: 2px solid rgba(240,232,208,0.15) !important;
  box-shadow: 0 3px 0 rgba(0,0,0,0.9) !important;
  font-family: 'DotGothic16', monospace !important;
}
html[data-theme="8bit"] .mln-bar-btn {
  border-radius: 0 !important;
  font-family: 'DotGothic16', monospace !important;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
html[data-theme="8bit"] #toast {
  background: var(--bg2) !important;
  border: 2px solid var(--border2) !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
  color: var(--text) !important;
  font-family: 'DotGothic16', monospace !important;
}
html[data-theme="8bit"] #toast.success { border-color: var(--sage) !important; color: var(--sage) !important; }
html[data-theme="8bit"] #toast.error   { border-color: var(--red)  !important; color: var(--red)  !important; }

/* ── Pill live ─────────────────────────────────────────────────────────── */
html[data-theme="8bit"] .pill-live {
  background: rgba(208,40,24,0.12) !important;
  border: 1px solid rgba(208,40,24,0.35) !important;
  border-radius: 0 !important;
  color: var(--red) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.45rem !important;
  animation: pill-blink-pixel 1s steps(1) infinite !important;
}
@keyframes pill-blink-pixel {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0; }
}

/* ── Leaflet ───────────────────────────────────────────────────────────── */
html[data-theme="8bit"] .leaflet-tile-pane {
  filter: saturate(0.6) contrast(1.1) brightness(0.85) !important;
  image-rendering: pixelated !important;
}

html[data-theme="8bit"] .leaflet-control-zoom a {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 2px solid rgba(240,232,208,0.2) !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.9) !important;
}
html[data-theme="8bit"] .leaflet-control-zoom a:hover {
  background: rgba(208,40,24,0.2) !important;
  color: var(--red) !important;
}

html[data-theme="8bit"] .leaflet-popup-content-wrapper {
  background: var(--bg2) !important;
  border: 2px solid rgba(240,232,208,0.25) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.95) !important;
  backdrop-filter: none !important;
}
html[data-theme="8bit"] .leaflet-popup-tip-container .leaflet-popup-tip {
  background: var(--bg2) !important;
}
html[data-theme="8bit"] .leaflet-popup-close-button {
  color: var(--muted) !important;
  font-family: 'Press Start 2P', monospace !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
html[data-theme="8bit"] ::-webkit-scrollbar { width: 6px; height: 6px; }
html[data-theme="8bit"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="8bit"] ::-webkit-scrollbar-thumb {
  background: rgba(240,232,208,0.18);
  border-radius: 0;
}
html[data-theme="8bit"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(240,232,208,0.32);
}

/* ── Focus ─────────────────────────────────────────────────────────────── */
html[data-theme="8bit"] :focus-visible {
  outline: 2px solid rgba(208,40,24,0.7) !important;
  outline-offset: 1px !important;
  border-radius: 0 !important;
}

/* ── Section headers ───────────────────────────────────────────────────── */
html[data-theme="8bit"] .mln-section-title,
html[data-theme="8bit"] .section-title {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 0.65rem !important;
  color: var(--cream) !important;
  letter-spacing: 0.08em !important;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8) !important;
}

/* ── Music portal ──────────────────────────────────────────────────────── */
html[data-theme="8bit"] .mmp-title {
  font-family: 'DotGothic16', monospace !important;
}
html[data-theme="8bit"] .p-music-title,
html[data-theme="8bit"] .p-music-title--link {
  font-family: 'DotGothic16', monospace !important;
}
html[data-theme="8bit"] .map-music-popup {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.95) !important;
}

/* ── Status chip ───────────────────────────────────────────────────────── */
html[data-theme="8bit"] #status-laurent {
  font-family: 'DotGothic16', monospace !important;
  font-size: 0.7rem !important;
  border-radius: 0 !important;
}

/* ── Cursor clignottant (dashboard clock style) ────────────────────────── */
html[data-theme="8bit"] .s-number-input,
html[data-theme="8bit"] input[type="number"] {
  caret-color: var(--red) !important;
}