/* ─────────────────────────────────────────────────────────────────────
   theme-glass.css — light, aéré, liquid glass
   Dominantes : blanc cassé, gris perle, rose poudré, orange clair, bleu ciel
   ───────────────────────────────────────────────────────────────────── */

[data-theme="glass"] {
  /* ── Couleurs de base ── */
  --bg:      #f5f6f9;
  --bg2:     #fbfcfe;
  --bg3:     rgba(255,255,255,0.55);
  --border:  rgba(31,41,51,0.08);
  --border2: rgba(31,41,51,0.16);
  --accent:  #fb923c;
  --accent2: #f472b6;
  --green:   #34d399;
  --orange:  #fb923c;
  --text:    #1f2933;
  --muted:   rgba(31,41,51,0.55);

  /* ── Surfaces & ombres ── */
  --surface:        #fbfcfe;
  --card-base:      rgba(255,255,255,0.55);
  --text-primary:   #1f2933;
  --text-muted:     rgba(31,41,51,0.55);
  --border-subtle:  rgba(31,41,51,0.10);
  --shadow-deep:    0 18px 60px rgba(56,189,248,0.10),
                    0 4px 16px rgba(244,114,182,0.06);

  /* ── Couleurs sémantiques light ── */
  --sky:      #38bdf8;
  --pink:     #f472b6;
  --peach:    #fb923c;
  --lavender: #c4b5fd;
  --danger:   #ef4444;
  --success:  #10b981;

  /* ── Glass parameters ── */
  --glass-blur:        28px;
  --glass-blur-strong: 40px;
  --glass-sat:         200%;
  --glass-bg:          rgba(255,255,255,0.40);
  --glass-bg-strong:   rgba(255,255,255,0.65);
  --glass-border:      rgba(255,255,255,0.55);

  /* ── Background image (override-able) ── */
  --glass-bg-image: url("https://identity.mylastnight.eu/static/img/glass-bg.svg");

  /* ── Typo ── */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", monospace;
}

/* ── Body : photo en background (fixed), couches lumineuses ── */
[data-theme="glass"] html { background: var(--bg); }
[data-theme="glass"] body {
  background:
    var(--glass-bg-image) center/cover no-repeat fixed,
    var(--bg) !important;
  color: var(--text);
  font-family: var(--sans) !important;
  -webkit-font-smoothing: antialiased;
}
[data-theme="glass"] body::before { display: none !important; }

/* ── Cards (génériques + .mln-card) : liquid glass fort ── */
[data-theme="glass"] .card,
[data-theme="glass"] .mln-card,
[data-theme="glass"] .glass {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--shadow-deep) !important;
  border-radius: 18px !important;
  color: var(--text) !important;
}

/* Pseudo overlay sombre/grain de mln-base.css : on neutralise */
[data-theme="glass"] .card::before { display: none !important; }
[data-theme="glass"] .card *,
[data-theme="glass"] .mln-card * { color: inherit; }
[data-theme="glass"] .card-title,
[data-theme="glass"] .card-subtitle,
[data-theme="glass"] .card-header { color: var(--text) !important; }
[data-theme="glass"] .card-subtitle { color: var(--muted) !important; }

/* ── Navbar : liquid glass clair ────────────────────── */
[data-theme="glass"] #mln-navbar {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(28px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(220%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 24px rgba(56,189,248,0.10) !important;
}
[data-theme="glass"] #mln-navbar a,
[data-theme="glass"] #mln-navbar .mln-link,
[data-theme="glass"] #mln-navbar .mln-nav-link,
[data-theme="glass"] #mln-navbar .mln-nav-item {
  color: var(--text) !important;
}
[data-theme="glass"] #mln-navbar a:hover,
[data-theme="glass"] #mln-navbar .mln-link:hover {
  color: var(--pink) !important;
  background: rgba(56,189,248,0.12) !important;
}
/* Lien actif (page courante) : fond rose pastel + TEXTE SOMBRE (fix lisibilité) */
[data-theme="glass"] #mln-navbar .active,
[data-theme="glass"] #mln-navbar .mln-active,
[data-theme="glass"] #mln-navbar .mln-link.mln-active,
[data-theme="glass"] #mln-navbar [aria-current="page"] {
  background: rgba(244,114,182,0.18) !important;
  color: var(--text) !important;
  border-color: rgba(244,114,182,0.35) !important;
  font-weight: 600 !important;
}

/* Logo : background du carré en blanc translucide pour qu'il ressorte */
[data-theme="glass"] #mln-navbar .mln-logo rect:first-of-type,
[data-theme="glass"] .mln-logo rect:first-of-type {
  fill: rgba(255,255,255,0.92) !important;
}
/* Reflet subtil autour du logo */
[data-theme="glass"] #mln-navbar .mln-logo {
  filter: drop-shadow(0 2px 6px rgba(244,114,182,0.18));
}

/* Icônes SVG navbar : par défaut blanches → invert pour fond clair */
[data-theme="glass"] #mln-navbar img {
  filter: invert(1) brightness(0.45) !important;
  opacity: 0.85;
}
[data-theme="glass"] #mln-navbar .mln-link.mln-active img {
  opacity: 1;
}
[data-theme="glass"] #mln-navbar .mln-nav-divider {
  background: var(--border2) !important;
  opacity: 0.5;
}

/* ── Ticker ────────────────────── */
[data-theme="glass"] #mln-ticker {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-label {
  background: rgba(244,114,182,0.14) !important;
  color: var(--pink) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-content,
[data-theme="glass"] #mln-ticker .mln-ticker-track,
[data-theme="glass"] #mln-ticker a {
  color: var(--text) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-dot {
  background: var(--pink) !important;
}

/* Texte des items ticker — par défaut clair (cream/blanc) → contraste fond glass clair */
[data-theme="glass"] #mln-ticker .mln-ticker-source {
  color: var(--text) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-title {
  color: rgba(31,41,51,0.75) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-time {
  color: rgba(31,41,51,0.45) !important;
}
[data-theme="glass"] #mln-ticker .mln-ticker-sep {
  color: rgba(31,41,51,0.18) !important;
}

/* ── Headers de page ───────────────── */
[data-theme="glass"] header,
[data-theme="glass"] .mln-page-header {
  background: transparent !important;
  color: var(--text);
}

/* ── Titre de page : pas de gradient text (cassait), couleur unie + accent ── */
[data-theme="glass"] .mln-page-title {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  font-style: italic;
  font-weight: 700;
  position: relative;
  display: inline-block !important;
  padding-bottom: 0.15em;
}
[data-theme="glass"] .mln-page-title::after {
  content: "";
  display: block;
  height: 4px;
  margin-top: 0.3em;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--peach), var(--pink), var(--sky));
  width: 60%;
  opacity: 0.85;
}

/* ── Petits accents .em ── */
[data-theme="glass"] .em {
  color: var(--pink) !important;
  font-weight: 700;
}

/* ── Liens, inputs, boutons ──────────── */
[data-theme="glass"] a { color: var(--sky); }
[data-theme="glass"] a:hover { color: var(--pink); }

[data-theme="glass"] input,
[data-theme="glass"] textarea,
[data-theme="glass"] select {
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px;
}
[data-theme="glass"] input:focus,
[data-theme="glass"] textarea:focus {
  border-color: var(--sky) !important;
  box-shadow: 0 0 0 4px rgba(56,189,248,0.18) !important;
  outline: none;
}

[data-theme="glass"] .btn,
[data-theme="glass"] button {
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="glass"] .btn:hover,
[data-theme="glass"] button:hover {
  border-color: var(--sky) !important;
  background: rgba(255,255,255,0.95) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(56,189,248,0.15);
}

[data-theme="glass"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="glass"] ::-webkit-scrollbar-track { background: transparent; }
[data-theme="glass"] ::-webkit-scrollbar-thumb {
  background: rgba(31,41,51,0.18);
  border-radius: 4px;
}
[data-theme="glass"] ::-webkit-scrollbar-thumb:hover { background: rgba(31,41,51,0.32); }

[data-theme="glass"] .mln-grain,
[data-theme="glass"] .vignette { display: none !important; }

/* ── Pages d'erreur (NPM error_pages style) ─────────── */
[data-theme="glass"] .error-page,
[data-theme="glass"] .error-container,
[data-theme="glass"] body.error {
  background:
    var(--glass-bg-image) center/cover no-repeat fixed,
    var(--bg) !important;
  color: var(--text) !important;
}
[data-theme="glass"] .error-code,
[data-theme="glass"] .error-title {
  background: linear-gradient(135deg, var(--peach), var(--pink), var(--sky)) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ── Animation orbs (mode svg-anim) ─────────────────────────
   Overlay animé par-dessus le SVG background.
   Anti-jank : transform + opacity uniquement, pas de blur en animate. */
[data-theme="glass"].glass-orbs-anim body::after {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(251,146,60,0.22), transparent 60%),
    radial-gradient(800px 600px at 85% 30%, rgba(244,114,182,0.20), transparent 60%),
    radial-gradient(700px 500px at 50% 95%, rgba(56,189,248,0.20), transparent 60%);
  animation: glassOrbsDrift 60s ease-in-out infinite alternate;
  filter: blur(20px);
  opacity: 0.85;
  will-change: transform;
}
@keyframes glassOrbsDrift {
  0%   { transform: translate(0,0)       scale(1)    rotate(0deg); }
  50%  { transform: translate(-3%, 2%)   scale(1.06) rotate(2deg); }
  100% { transform: translate(2%, -2%)   scale(0.98) rotate(-2deg); }
}


/* ═════════════════════════════════════════════════════════════
   Glass v2 — homogénéité avec la page Infra (référence)
   ═════════════════════════════════════════════════════════════ */

/* ── Logo MyLastNight : retirer le carré blanc, garder juste le glyphe en surimpression ── */
[data-theme="glass"] #mln-navbar .mln-logo rect:first-of-type,
[data-theme="glass"] .mln-logo rect:first-of-type {
  fill: transparent !important;
}

/* ── Logo Watchtower (était emoji 🗼) : remplacer par SVG masqué blanc ── */
[data-theme="glass"] #mln-navbar .mln-nav-watchtower {
  font-size: 0 !important;          /* masque l'emoji texte */
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  width: 28px;
  height: 28px;
  position: relative;
  overflow: hidden;
}
[data-theme="glass"] #mln-navbar .mln-nav-watchtower::before {
  content: "";
  position: absolute; inset: 4px;
  background-image: url("https://identity.mylastnight.eu/static/img/navbar/watchtower.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: invert(1) brightness(0.45);    /* blanc → gris foncé pour fond clair */
  opacity: 0.85;
}

/* Aussi sur les autres thèmes (dark) : passer aussi en SVG */
#mln-navbar .mln-nav-watchtower:not(:hover) {
  /* preserve fallback emoji on non-glass for now — only override glass */
}

/* ── Cards opaques transversalement : tous les selectors *-card / *-pane / *-panel ── */
[data-theme="glass"] .s-card,
[data-theme="glass"] .kb-pane,
[data-theme="glass"] .kb-detail,
[data-theme="glass"] .kb-list,
[data-theme="glass"] .stats-card,
[data-theme="glass"] .stats-table,
[data-theme="glass"] .panel,
[data-theme="glass"] .pane,
[data-theme="glass"] [class*="-panel"],
[data-theme="glass"] [class*="-pane"]:not(.leaflet-pane),
/* Match only true card roots like .p-bus-card, .pj-card, .stats-card.
   Exclude inner wrappers like .pj-card-fixed, .p-bus-card-header,
   .p-card-label, .s-card-title — these contain "-card-" and were
   wrongly getting a nested glass pill behind titles. */
[data-theme="glass"] [class*="-card"]:not(.cat):not([class*="-card-"]) {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-deep) !important;
}

/* Contre les forcing white opaque (bg blanc plein qui traîne dans plusieurs CSS) */
[data-theme="glass"] [style*="background:#fff"],
[data-theme="glass"] [style*="background: #fff"],
[data-theme="glass"] [style*="background:white"],
[data-theme="glass"] [style*="background: white"] {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(180%);
}

/* ── Sections settings : wrapper visuel autour des sections orphelines ── */
[data-theme="glass"] .s-main > div:not(.s-guest-banner) {
  padding: 22px;
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-deep);
}

/* Titres de section settings dans la card → bien lisibles */
[data-theme="glass"] .s-card-title,
[data-theme="glass"] .s-glass-option-header strong {
  color: var(--text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Boutons "Choisir le mode solaire" / "Choisir l'abstrait" : plaque de verre flottante */
[data-theme="glass"] .s-glass-pick {
  background: rgba(255, 255, 255, 0.45) !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0)) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: var(--text) !important;
  padding: 0.65rem 1.35rem !important;
  border-radius: 999px !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  transition: transform 140ms ease, box-shadow 140ms ease,
              background 140ms ease, border-color 140ms ease !important;
  cursor: pointer !important;
  font-weight: 500 !important;
}
[data-theme="glass"] .s-glass-pick:hover {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}
[data-theme="glass"] .s-glass-pick:active {
  transform: translateY(0) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
[data-theme="glass"] .s-glass-pick.active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--peach) 28%, rgba(255,255,255,0.7)),
    color-mix(in srgb, var(--pink) 25%, rgba(255,255,255,0.7))) !important;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent) !important;
  color: var(--text) !important;
  font-weight: 600 !important;
  box-shadow:
    0 8px 22px color-mix(in srgb, var(--accent) 18%, transparent),
    0 2px 5px rgba(0, 0, 0, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* ── Maps Leaflet : container clair + tiles inversées pour cohérence avec le fond pastel ── */
[data-theme="glass"] .leaflet-container {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 12px;
}
[data-theme="glass"] .leaflet-tile-pane {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.92) !important;
}
/* Préserve les markers / popups (eux ne doivent pas être inversés) */
[data-theme="glass"] .leaflet-marker-pane,
[data-theme="glass"] .leaflet-popup-pane,
[data-theme="glass"] .leaflet-overlay-pane {
  filter: none !important;
}

/* ── World map / cartes SVG custom (Stats — Carte des visites) ── */
[data-theme="glass"] svg.world-map,
[data-theme="glass"] .stats-map,
[data-theme="glass"] [class*="visits-map"],
[data-theme="glass"] [class*="world"] svg {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 12px;
}
/* Filtre global sur cartes SVG noires : invert puis hue-rotate */
[data-theme="glass"] .stats-map svg,
[data-theme="glass"] [class*="visits"] svg,
[data-theme="glass"] svg[viewBox][class*="map"] {
  filter: invert(0.88) hue-rotate(180deg) brightness(1.05) !important;
}

/* ── Bandes "Mise à jour position" / footer info dark : passer en glass ── */
[data-theme="glass"] .bus-update-bar,
[data-theme="glass"] .map-footer-bar,
[data-theme="glass"] [class*="update-bar"],
[data-theme="glass"] [class*="status-bar"]:not(.mln-ticker):not(#mln-ticker) {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border) !important;
  border-radius: 10px;
  color: var(--text) !important;
}

/* ── Knowledge : panneau detail vide → bg glass ── */
[data-theme="glass"] .kb-detail,
[data-theme="glass"] .kb-detail-empty,
[data-theme="glass"] [class*="detail-empty"] {
  background: var(--glass-bg) !important;
  color: var(--muted) !important;
}

/* ── Notification / Mastodon / Scrobbles cards (Portal) : alignement avec Infra ── */
[data-theme="glass"] .mln-notification-card,
[data-theme="glass"] .mln-mastodon-card,
[data-theme="glass"] .mln-scrobbles-card,
[data-theme="glass"] [class*="-section"]:not(.s-glass-option) {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
}

/* ── Tag/badge "Temps réel" et autres pills — déjà OK généralement, on s'assure du fond translucide ── */
[data-theme="glass"] .pill,
[data-theme="glass"] .badge,
[data-theme="glass"] .tag-info {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(10px);
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}


/* ═════════════════════════════════════════════════════════════
   Glass v3 — feedback ajustements visuels
   ═════════════════════════════════════════════════════════════ */

/* (1) Réduire le blur de moitié pour la lecture */
[data-theme="glass"] {
  --glass-blur:        14px;
  --glass-blur-strong: 20px;
}

/* (2) Padding interne sur la card horaires bus pour faire respirer les tuiles */
[data-theme="glass"] [class*="bus-card"],
[data-theme="glass"] [class*="bus-grid"],
[data-theme="glass"] .bus-tiles,
[data-theme="glass"] [class*="lines-grid"] {
  padding: 12px !important;
  gap: 12px !important;
}
/* Si le wrapper interne ne porte pas la classe, on cible aussi via .card contenant des .bus-tile */
[data-theme="glass"] .card:has(.bus-tile),
[data-theme="glass"] .card:has([class*="bus-line"]) {
  padding: 16px !important;
}

/* (3) Virer le timer "Mise à jour position" sur le dashboard */
#bus-update-timer { display: none !important; }

/* (4) Dashboard — titres de card en blanc avec ombre sombre (test) */
[data-theme="glass"] .card-title,
[data-theme="glass"] .card .card-header > div:first-child > .card-title {
  color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.45),
    0 0 6px rgba(0,0,0,0.25);
}
[data-theme="glass"] .card-subtitle {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* (5) Knowledge — panneau central qui était opaque blanc */
[data-theme="glass"] .knw-main,
[data-theme="glass"] .knw-welcome,
[data-theme="glass"] .knw-content,
[data-theme="glass"] .knw-detail,
[data-theme="glass"] .knw-empty,
[data-theme="glass"] .knw-app,
[data-theme="glass"] .knw-sidebar {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  border-radius: 16px !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--text) !important;
}
[data-theme="glass"] .knw-welcome-title { color: var(--text) !important; }
[data-theme="glass"] .knw-welcome-sub   { color: var(--muted) !important; }

/* (6) Infra — sous-textes daltonien-friendly (assombrir au lieu de pâlir) */
[data-theme="glass"] .card .card-subtitle,
[data-theme="glass"] .a-map-stats,
[data-theme="glass"] [class*="-sub-info"],
[data-theme="glass"] .stats-subtitle,
[data-theme="glass"] [class*="-meta"] {
  color: var(--text) !important;
  opacity: 0.75 !important;
}
/* Override le opacity 0.7 spécifique de stats.css */
[data-theme="glass"] .a-map-stats { opacity: 0.85 !important; }

/* Pills de status infra (Dashboard API, OTP, Ntfy) : contrast++
   Exclure :
   - .s-theme-pill / .chip-toggle (cas existants)
   - [class*="-pills"]  → wrappers pluriels (.i-pills) qui héritaient à tort
   - [class*="-pill-"]  → sous-éléments (.i-pill-dot, .pj-pill-icon, etc.) */
[data-theme="glass"] .pill,
[data-theme="glass"] [class*="-status-pill"],
[data-theme="glass"] [class*="-pill"]:not(.s-theme-pill):not(.chip-toggle):not([class*="-pills"]):not([class*="-pill-"]) {
  background: rgba(255,255,255,0.7) !important;
  color: var(--text) !important;
  border: 1px solid rgba(31,41,51,0.18) !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}
/* Variantes : .pill.success / .pill.error / .pill.warning gardent leur teinte */
[data-theme="glass"] .pill.success,
[data-theme="glass"] [class*="-pill"].success:not([class*="-pills"]):not([class*="-pill-"]) {
  background: rgba(16,185,129,0.20) !important;
  color: #047857 !important;
  border-color: rgba(16,185,129,0.4) !important;
}
[data-theme="glass"] .pill.error,
[data-theme="glass"] [class*="-pill"].error:not([class*="-pills"]):not([class*="-pill-"]),
[data-theme="glass"] .pill.danger {
  background: rgba(239,68,68,0.20) !important;
  color: #b91c1c !important;
  border-color: rgba(239,68,68,0.4) !important;
}
[data-theme="glass"] .pill.warning,
[data-theme="glass"] [class*="-pill"].warning:not([class*="-pills"]):not([class*="-pill-"]) {
  background: rgba(245,158,11,0.20) !important;
  color: #b45309 !important;
  border-color: rgba(245,158,11,0.4) !important;
}

/* (7) Virer les contours/pills autour des titres de card. Harmoniser avec dashboard.
       Les section-title des sous-blocs (◎ SERVICES, ◎ RÉSEAU UNIFI…) avaient des bordures :
       on les neutralise et on espace avant le contenu. */
[data-theme="glass"] .section-title,
[data-theme="glass"] [class*="card-title"]:not(.s-card-title),
[data-theme="glass"] .card > header,
[data-theme="glass"] .card > .card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 8px !important;
  margin-bottom: 4px !important;
}

/* (8) Stats — World map (#a-world-map) qui restait noir
       Les paths du SVG ont probablement fill noir hardcodé. On force fill clair sur les paths "land". */
[data-theme="glass"] #a-world-map {
  background: rgba(255,255,255,0.4) !important;
  border-radius: 12px;
}
[data-theme="glass"] #a-world-map path {
  fill: rgba(31,41,51,0.18) !important;
  stroke: rgba(31,41,51,0.10) !important;
}
/* Cercles de visites (markers) gardent leur couleur */
[data-theme="glass"] #a-world-map circle {
  /* preserved */
}

/* (9) Incidents — première série de chiffres : forcer contraste */
[data-theme="glass"] [class*="incidents"] [class*="metric"],
[data-theme="glass"] [class*="incidents"] [class*="stat"],
[data-theme="glass"] .incidents-summary,
[data-theme="glass"] .incidents-summary > div {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 14px 18px;
  color: var(--text) !important;
}

/* (10) Titre + sous-titre de page (mln-page-title, mln-page-sub) : ombre pour se détacher des photos */
[data-theme="glass"] .mln-page-title {
  text-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    0 0 12px rgba(255,255,255,0.5);
}
[data-theme="glass"] .mln-page-sub {
  color: var(--text) !important;
  opacity: 0.78;
  text-shadow:
    0 1px 3px rgba(255,255,255,0.7),
    0 1px 2px rgba(0,0,0,0.15);
  font-weight: 600;
}

/* Bonus : les liens de la navbar gagnent aussi un mini text-shadow doux pour rester lisibles
   sur photo très claire/foncée selon le thème. */
[data-theme="glass"] #mln-navbar a,
[data-theme="glass"] #mln-navbar .mln-link {
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}

/* ── Bouton Déconnexion (.mln-nav-logout) en glass : cohérent avec Watchtower ── */
[data-theme="glass"] #mln-navbar .mln-nav-logout {
  background: rgba(255,255,255,0.5) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="glass"] #mln-navbar .mln-nav-logout:hover {
  background: rgba(255,255,255,0.85) !important;
  color: var(--pink) !important;
}
[data-theme="glass"] #mln-navbar .mln-nav-logout.active {
  background: rgba(244,114,182,0.18) !important;
  color: var(--text) !important;
}

/* ── Incidents — KPI bandeau lisible sur photo de fond ── */
[data-theme="glass"] .inc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
[data-theme="glass"] .inc-stat {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-sat)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 18px 22px !important;
  text-align: center;
  box-shadow: var(--shadow-deep);
}
[data-theme="glass"] .inc-stat b {
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
[data-theme="glass"] .inc-stat-error b {
  color: #b91c1c;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
[data-theme="glass"] .inc-stat-ok b {
  color: #047857;
  text-shadow: 0 1px 2px rgba(255,255,255,0.6);
}
[data-theme="glass"] .inc-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted) !important;
  margin-top: 6px;
  font-weight: 600;
}

/* Aligne le bouton .mln-nav-logout sur le style Watchtower (carré arrondi blanc) */
[data-theme="glass"] #mln-navbar .mln-nav-logout {
  width: 28px !important;
  height: 28px !important;
  margin: 0 8px !important;
  background: rgba(255,255,255,0.5) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="glass"] #mln-navbar .mln-nav-logout img {
  filter: invert(1) brightness(0.45) !important;
  opacity: 0.85;
}
[data-theme="glass"] #mln-navbar .mln-nav-logout:hover {
  background: rgba(244,114,182,0.18) !important;
  border-color: rgba(244,114,182,0.4) !important;
}
[data-theme="glass"] #mln-navbar .mln-nav-logout:hover img {
  opacity: 1;
}

/* ── Logout : SUR-spécificité html[data-theme] pour battre les !important origin ── */
html[data-theme="glass"] #mln-navbar {
  padding-right: 12px !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout,
html[data-theme="glass"] #mln-navbar button.mln-nav-logout {
  background: rgba(255,255,255,0.5) !important;
  background-color: rgba(255,255,255,0.5) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-left: 1px solid var(--border) !important;
  border-radius: 6px !important;
  width: 32px !important;
  height: 32px !important;
  margin-right: 8px !important;
  color: var(--text) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout img {
  filter: invert(1) brightness(0.45) !important;
  opacity: 0.85 !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout:hover {
  background: rgba(244,114,182,0.18) !important;
  background-color: rgba(244,114,182,0.18) !important;
  border-color: rgba(244,114,182,0.5) !important;
  color: var(--pink) !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout:hover img {
  opacity: 1 !important;
}

/* ── Force le centrage + taille visible de l'icône clé ── */
html[data-theme="glass"] #mln-navbar .mln-nav-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout img,
html[data-theme="glass"] #mln-navbar .mln-nav-logout .mln-icon {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  filter: invert(1) brightness(0.35) !important;
  opacity: 0.95 !important;
}

/* ═══ Logout + Watchtower : plein hauteur navbar (52px) + icônes bien visibles ═══ */
html[data-theme="glass"] #mln-navbar {
  padding-right: 0 !important;  /* boutons plein hauteur, pas de gap */
}

html[data-theme="glass"] #mln-navbar .mln-nav-logout,
html[data-theme="glass"] #mln-navbar button.mln-nav-logout,
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower,
html[data-theme="glass"] #mln-navbar button.mln-nav-watchtower {
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 1px solid var(--border) !important;
  background: rgba(255,255,255,0.45) !important;
  background-color: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(12px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
}

/* Hover */
html[data-theme="glass"] #mln-navbar .mln-nav-logout:hover,
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower:hover {
  background: rgba(244,114,182,0.20) !important;
  background-color: rgba(244,114,182,0.20) !important;
}

/* Watchtower : reset le ::before custom v2 (qui faisait double image) → on utilise plus innerHTML */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower::before {
  content: none !important;
}
/* Garde l'emoji 🗼 du innerHTML mais on le masque puis ajoute background-image (tour SVG) */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower {
  font-size: 0 !important;
  color: transparent !important;
  background-image: url("https://identity.mylastnight.eu/static/img/navbar/watchtower.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 22px !important;
  /* override : on garde le bg + une couche light derrière via box-shadow inset */
  box-shadow: inset 0 0 0 999px rgba(255,255,255,0.45) !important;
}
/* Hover watchtower : layer rose inset */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower:hover {
  box-shadow: inset 0 0 0 999px rgba(244,114,182,0.20) !important;
}
/* L'image SVG navbar (tour) doit ressortir foncée sur fond clair → filter */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower {
  /* SVG Server : white 0.85 → invert + brightness pour gris foncé */
}
/* Comme on fait via background-image (pas img), il faut filter sur le bouton entier — mais ça assombrit aussi le bg.
   Solution : utiliser mask au lieu de background-image */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower {
  background-image: none !important;  /* on annule */
  -webkit-mask-image: url("https://identity.mylastnight.eu/static/img/navbar/watchtower.svg");
  mask-image: url("https://identity.mylastnight.eu/static/img/navbar/watchtower.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
}
/* Hmm mais avec mask-image, le bouton entier devient le glyph. Pas bon. */
/* On revient à la stratégie ::before pour Watchtower (override v2 mais ajusté) */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px !important;     /* marge intérieure → glyphe ~24px dans bouton 52px */
  background-image: url("https://identity.mylastnight.eu/static/img/navbar/watchtower.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  filter: invert(1) brightness(0.35) !important;
  opacity: 0.95 !important;
}

/* ── Logout : icône img dans innerHTML, override opacity 0.6 du .mln-icon origin ── */
html[data-theme="glass"] #mln-navbar .mln-nav-logout img,
html[data-theme="glass"] #mln-navbar .mln-nav-logout .mln-icon {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  filter: invert(1) brightness(0.35) !important;
  opacity: 1 !important;
  object-fit: contain !important;
}
html[data-theme="glass"] #mln-navbar .mln-nav-logout:hover img,
html[data-theme="glass"] #mln-navbar .mln-nav-logout:hover .mln-icon {
  opacity: 1 !important;
  filter: invert(0) brightness(1) !important;  /* reset filter au hover → couleur d'origine */
}

/* ── Aligne l'opacité/filter du Watchtower et du Logout sur les mêmes valeurs ── */
html[data-theme="glass"] #mln-navbar .mln-nav-watchtower::before,
html[data-theme="glass"] #mln-navbar .mln-nav-logout img,
html[data-theme="glass"] #mln-navbar .mln-nav-logout .mln-icon {
  filter: invert(1) brightness(0.40) !important;
  opacity: 0.85 !important;
}

/* Décoller la clé du bord droit de la navbar */
html[data-theme="glass"] #mln-navbar .mln-nav-logout {
  margin-right: 12px !important;
}

/* ═════════════════════════════════════════════════════════════
   (11) Titres de card unifiés — alignés sur le style dashboard
   16px / 600 / uppercase / 0.025em / blanc + text-shadow
   Plus de fond, plus de bordure, plus de pill autour des titres.
   ═════════════════════════════════════════════════════════════ */
[data-theme="glass"] .card-title,
[data-theme="glass"] .s-card-title,
[data-theme="glass"] .p-card-label,
[data-theme="glass"] .pj-card-title,
[data-theme="glass"] .inc-card-title {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.45),
    0 0 6px rgba(0,0,0,0.25) !important;
}

/* p-card-label sert aussi de lien sur certaines cards portal — préserver le hover */
[data-theme="glass"] .p-card-label.p-card-link:hover {
  color: rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}