:root {
  --bg:           #d6e4f7;
  --bg-alt:       #c4d9f2;
  --bg-card:      #e8f1fb;
  /* Harmonisé avec la vraie couleur de marque Manage (celle du logo et des
     embeds de vote Botillon) plutôt que le bleu utilisé jusqu'ici sur ce
     site. --accent-2/--accent-light restent des teintes dérivées, dans les
     mêmes proportions que l'ancienne palette. */
  --accent:       #7281df;
  --accent-2:     #8895e4;
  --accent-light: #d2d6f1;
  --text:         #0e1d35;
  --text-sec:     #4a6689;
  --border:       #b3cceb;
  --white:        #f2f8ff;
  --green:        #1a9e5c;
  --green-bg:     #d4f5e4;
  --orange:       #d97706;
  --orange-bg:    #fef3c7;
  --red:          #dc2626;
  --red-bg:       #fee2e2;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Auto-hébergée (plutôt que Google Fonts) : si la police d'icônes ne charge
   pas (connexion lente, extension anti-tracking, hors-ligne), le nom brut
   de l'icône ("warning", "dns"...) s'affichait en toutes lettres à la place
   du glyphe — un fichier local élimine ce risque et évite une dépendance
   externe. Sous-ensemble contenant uniquement les icônes utilisées sur le
   site (~40 Ko au lieu des ~5 Mo du jeu complet). */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
  font-display: block;
}

body {
  font-family: 'DM Sans', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.icon {
  font-family: 'Material Symbols Rounded';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  user-select: none;
  vertical-align: middle;
  font-size: 20px;
}


.badge {
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge .icon { font-size: 12px; }
.badge.operational { background: var(--green-bg); color: var(--green); }
.badge.degraded    { background: var(--orange-bg); color: var(--orange); }
.badge.down        { background: var(--red-bg); color: var(--red); }
.badge.en_cours    { background: var(--orange-bg); color: var(--orange); }
.badge.resolu      { background: var(--green-bg); color: var(--green); }
.badge.info        { background: rgba(114,129,223,.12); color: var(--accent); }


#toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  background: var(--text);
  color: white;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s;
  display: flex;
  align-items: center;
  gap: 8px;
}
#toast .icon { font-size: 18px; }
#toast.show    { transform: none; opacity: 1; }
#toast.success { background: var(--green); }
#toast.error   { background: var(--red); }

@media (max-width: 500px) {
  #toast {
    left: 16px; right: 16px; bottom: 16px;
    justify-content: center; text-align: center;
  }
}