/* ═══════════════════════════════════════════════════════════════════════════
   THEME RETRO — MyLastNight
   美式復古 · Ambiance rétro américaine × typographie japonaise
   version: 2.0.0
   Activé via : html[data-theme="retro"]
   Chargé systématiquement — ne s'active que si data-theme="retro"
═══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ── Variables système — surcharge mln-base.css ────────────────────────── */
html[data-theme="retro"] {
  /* Fond */
  --bg:      #1C1B18;
  --bg2:     #242320;
  --bg3:     #2E2C28;
  --surface: #2A2926;
  --card-base: #242320;

  /* Couleurs principales */
  --cream:   #DCC9A9;
  --red:     #B83A2D;
  --sage:    #4E6851;

  /* Rôles sémantiques */
  --accent:  #B83A2D;   /* terracotta (était violet) */
  --accent2: #4E6851;   /* sauge (était rose) */
  --text:    #DCC9A9;
  --muted:   rgba(220, 201, 169, 0.42);
  --green:   #4E6851;
  --success: #4E6851;
  --danger:  #B83A2D;

  /* Bordures */
  --border:  rgba(220, 201, 169, 0.10);
  --border2: rgba(220, 201, 169, 0.22);

  /* Fonts */
  --mono:         'IBM Plex Mono', 'MapleMono', monospace;
  --font-display: 'Bebas Neue', sans-serif;
  --font-jp:      'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', 'Noto Serif CJK JP', 'MS Mincho', serif;
}

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

/* Scanlines subtiles — ambiance CRT */
html[data-theme="retro"] body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, 0.055) 2px, rgba(0, 0, 0, 0.055) 4px
  );
}

/* ── Page header ───────────────────────────────────────────────────────── */
html[data-theme="retro"] .mln-page-header {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Watermark 私の昨夜 — au-dessus du fond, sous les titres */
html[data-theme="retro"] .mln-page-header::after {
  content: "私の昨夜";
  position: absolute !important;
  bottom: 0px !important;
  right: 15px !important;
  font-family: 'Dela Gothic One', 'Noto Serif JP', sans-serif !important;
  font-size: 144px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: rgba(220, 201, 169, 0.05) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  z-index: 0 !important;
  user-select: none !important;
}

/* Titres et contenu header au-dessus du watermark */
html[data-theme="retro"] .mln-page-header-inner {
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme="retro"] .mln-page-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.2rem, 6vw, 3.8rem) !important;
  letter-spacing: 0.04em !important;
  color: var(--cream) !important;
  line-height: 0.95 !important;
  font-weight: 400 !important;
  background: none !important;
  -webkit-text-fill-color: var(--cream) !important;
  padding-bottom: 0 !important;
}

/* kanji stamp — see full rule below (§ TITRE) */

html[data-theme="retro"] .mln-page-sub {
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
  color: var(--muted) !important;
}

/* ── Navbar ────────────────────────────────────────────────────────────── */
html[data-theme="retro"] .mln-navbar,
html[data-theme="retro"] .mln-nav {
  background: var(--bg2) !important;
  border-bottom: 1px solid var(--border) !important;
}

html[data-theme="retro"] .mln-nav-link,
html[data-theme="retro"] .mln-nav-item a {
  font-family: var(--mono) !important;
  color: var(--muted) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
}

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

html[data-theme="retro"] .mln-nav-link.active { color: var(--red) !important; }

/* ── Chip / badge de présence ──────────────────────────────────────────── */
html[data-theme="retro"] .chip {
  font-family: var(--mono) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.1em !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
}

html[data-theme="retro"] .chip-primary {
  background: rgba(78, 104, 81, 0.15) !important;
  border: 1px solid rgba(78, 104, 81, 0.35) !important;
  color: var(--sage) !important;
}

/* ── Cards génériques ──────────────────────────────────────────────────── */
html[data-theme="retro"] [class*="-card"]:not(.error-cover-wrap):not(.lock-card) {
  position: relative;
  overflow: hidden;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
html[data-theme="retro"] ::-webkit-scrollbar { width: 5px; height: 5px; }
html[data-theme="retro"] ::-webkit-scrollbar-track { background: var(--bg); }
html[data-theme="retro"] ::-webkit-scrollbar-thumb {
  background: rgba(220, 201, 169, 0.15);
  border-radius: 3px;
}
html[data-theme="retro"] ::-webkit-scrollbar-thumb:hover { background: rgba(220, 201, 169, 0.28); }

/* ── Inputs ────────────────────────────────────────────────────────────── */
html[data-theme="retro"] input,
html[data-theme="retro"] textarea,
html[data-theme="retro"] select {
  background: var(--bg3) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
html[data-theme="retro"] input:focus,
html[data-theme="retro"] textarea:focus,
html[data-theme="retro"] select:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}

/* ── Focus ring ────────────────────────────────────────────────────────── */
html[data-theme="retro"] :focus-visible {
  outline: 1px solid rgba(184, 58, 45, 0.6) !important;
  outline-offset: 2px;
}

/* ── Leaflet — filtre carte vintage ────────────────────────────────────── */
html[data-theme="retro"] .leaflet-tile-pane {
  filter: sepia(0.22) saturate(0.8) brightness(0.88) !important;
}

html[data-theme="retro"] .leaflet-control-zoom a {
  background: rgba(28, 27, 24, 0.9) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
  backdrop-filter: blur(8px);
  font-family: var(--mono) !important;
}
html[data-theme="retro"] .leaflet-control-zoom a:hover {
  background: rgba(184, 58, 45, 0.2) !important;
  color: var(--red) !important;
}

html[data-theme="retro"] .leaflet-popup-content-wrapper {
  background: rgba(28, 27, 24, 0.95) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(12px);
}
html[data-theme="retro"] .leaflet-popup-tip-container .leaflet-popup-tip {
  background: rgba(28, 27, 24, 0.95) !important;
}
html[data-theme="retro"] .leaflet-popup-close-button {
  color: var(--muted) !important;
}
html[data-theme="retro"] .leaflet-popup-close-button:hover { color: var(--text) !important; }

/* ── Toast messages ────────────────────────────────────────────────────── */
html[data-theme="retro"] #toast {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  font-family: var(--mono) !important;
}
html[data-theme="retro"] #toast.success { border-color: var(--sage) !important; color: var(--sage) !important; }
html[data-theme="retro"] #toast.error   { border-color: var(--red)  !important; color: var(--red)  !important; }

/* ── Modales / overlays ────────────────────────────────────────────────── */
html[data-theme="retro"] .p-modal {
  background: var(--bg2) !important;
  border-color: var(--border2) !important;
}
html[data-theme="retro"] .p-modal-title { color: var(--red) !important; font-style: italic; }

/* ── Pill live / statut ────────────────────────────────────────────────── */
html[data-theme="retro"] .pill-live {
  background: rgba(184, 58, 45, 0.12) !important;
  border: 1px solid rgba(184, 58, 45, 0.3) !important;
  color: var(--red) !important;
  animation: pill-blink 1.8s ease-in-out infinite;
}
@keyframes pill-blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Section headers (dashboard) ───────────────────────────────────────── */
html[data-theme="retro"] .mln-section-title,
html[data-theme="retro"] .section-title,
html[data-theme="retro"] .widget-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  color: var(--cream) !important;
  letter-spacing: 0.05em !important;
}

/* ── Chip Laurent présence ─────────────────────────────────────────────── */
html[data-theme="retro"] #status-laurent {
  font-family: var(--mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KANJI — Tampon rétro
═══════════════════════════════════════════════════════════════════════════ */
html[data-theme="retro"] .mln-title-row {
  display: contents !important; /* dissolved → enfants directs du grid parent */
}

html[data-theme="retro"] .mln-page-title-ja {
  display: block !important;
  font-family: var(--font-jp) !important;
  font-weight: 900 !important;
  font-size: 1.05rem !important;
  color: #B83A2D !important;
  background: #DCC9A9 !important;
  padding: 0.25em 0.45em !important;
  line-height: 1.15 !important;
  letter-spacing: 0.08em !important;
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55) !important;
  -webkit-text-fill-color: #B83A2D !important;
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS — Zéro arrondi, zéro glass, ombres tranchées
═══════════════════════════════════════════════════════════════════════════ */

/* Dashboard .card (mln-base.css) */
html[data-theme="retro"] .card {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #242320 !important;
  border: 1px solid rgba(220, 201, 169, 0.12) !important;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.65) !important;
}
html[data-theme="retro"] .card::before { content: none !important; }

/* Analytics */
html[data-theme="retro"] .a-card,
html[data-theme="retro"] .a-kpi {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6) !important;
}

/* Portal */
html[data-theme="retro"] .p-music-card,
html[data-theme="retro"] .p-services-card,
html[data-theme="retro"] .p-journey-card {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="retro"] .p-map-card {
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6) !important;
}

/* Journey replay controls (intégré dans la carte) */
html[data-theme="retro"] .p-journey-controls {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(220, 201, 169, 0.1) !important;
}
html[data-theme="retro"] .p-journey-label {
  font-family: var(--font-display) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
}

/* Journey replay : bouton play rectangulaire */
html[data-theme="retro"] #p-journey-btn {
  border-radius: 0 !important;
  background: rgba(184, 58, 45, 0.15) !important;
  border: 1px solid rgba(184, 58, 45, 0.5) !important;
  color: #B83A2D !important;
  font-family: var(--font-display) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.1em !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="retro"] #p-journey-btn:not(:disabled):hover {
  background: rgba(184, 58, 45, 0.28) !important;
}
html[data-theme="retro"] #jspd-1,
html[data-theme="retro"] #jspd-2 {
  border-radius: 0 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
}

/* Places */
html[data-theme="retro"] .place-card {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55) !important;
}

/* Tiles services portal */
html[data-theme="retro"] .p-tile {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="retro"] .p-tile:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6) !important;
}

/* Chip / pill */
html[data-theme="retro"] .chip,
html[data-theme="retro"] .pill {
  border-radius: 0 !important;
}

/* Modales */
html[data-theme="retro"] .p-modal {
  border-radius: 0 !important;
}

/* Popups Leaflet */
html[data-theme="retro"] .leaflet-popup-content-wrapper {
  border-radius: 0 !important;
}

/* Barre d'édition thèmes */
html[data-theme="retro"] #mln-edit-bar {
  background: #1C1B18 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(220, 201, 169, 0.12) !important;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5) !important;
  font-family: var(--mono) !important;
}
html[data-theme="retro"] .mln-bar-btn {
  border-radius: 0 !important;
  font-family: var(--mono) !important;
}

/* Boutons et éléments UI portal */
html[data-theme="retro"] .p-btn-cancel,
html[data-theme="retro"] .p-btn-post {
  border-radius: 0 !important;
}
html[data-theme="retro"] .p-btn-post {
  background: var(--red) !important;
  color: var(--cream) !important;
}
html[data-theme="retro"] .p-masto-btn {
  border-radius: 0 !important;
}
html[data-theme="retro"] .map-music-popup {
  border-radius: 0 !important;
  backdrop-filter: none !important;
}
html[data-theme="retro"] .p-modal-overlay .p-modal textarea {
  border-radius: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUS TILES — Rétro tramé
═══════════════════════════════════════════════════════════════════════════ */

/* Désaturation + vieillissement de l'ensemble de la tuile */
html[data-theme="retro"] .p-bus-tile {
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.6) !important;
  filter: saturate(0.42) brightness(0.82);
  overflow: hidden;
}

/* Badge numéro de ligne — effet tramé halftone */
html[data-theme="retro"] .p-bus-num {
  position: relative;
  font-family: var(--font-display) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  letter-spacing: 0.04em !important;
}
html[data-theme="retro"] .p-bus-num::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
    circle at 1.5px 1.5px,
    rgba(0, 0, 0, 0.3) 1.2px,
    transparent 0
  );
  background-size: 4px 4px;
  pointer-events: none;
}

/* Nom arrêt et temps — typo rétro */
html[data-theme="retro"] .p-bus-col-name {
  font-family: var(--mono) !important;
  font-style: normal !important;
  letter-spacing: 0.04em !important;
}
html[data-theme="retro"] .p-bus-col-time {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  letter-spacing: 0.06em !important;
  font-size: 1.15rem !important;
}
html[data-theme="retro"] .p-bus-col-time.none {
  font-family: var(--mono) !important;
  font-size: 0.75rem !important;
}

/* Séparateur */
html[data-theme="retro"] .p-bus-sep {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Timer bus */
html[data-theme="retro"] .bus-timer {
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(28, 27, 24, 0.96) !important;
  border: 1px solid rgba(220, 201, 169, 0.12) !important;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5) !important;
}

/* Pulsation bus — terracotta en rétro */
html[data-theme="retro"] .bus-pulse {
  background: #B83A2D !important;
  box-shadow: 0 0 0 rgba(184, 58, 45, 0.7) !important;
}
@keyframes bus-pulsate-retro {
  0%   { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(184, 58, 45, 0.7); }
  70%  { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(184, 58, 45, 0); }
  100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(184, 58, 45, 0); }
}
html[data-theme="retro"] .bus-pulse {
  animation: bus-pulsate-retro 1.4s ease-out infinite !important;
}

/* Légende dots — carrés en retro pour coller avec les marqueurs carte */
html[data-theme="retro"] .psc-dot {
  border-radius: 0 !important;
}