/* Indicateur de connexion, mode hors ligne et lien d'évitement (lot CONN).
   Les couleurs reprennent les jetons de style.css (repli sur des valeurs claires si style.css n'est pas chargé).
   Aucune couleur n'est seule à porter l'information : chaque niveau a son libellé. */

.lien-evitement {
  position: absolute;
  left: -9999px;
  top: 0.5rem;
  z-index: 100;
  padding: 0.4rem 0.8rem;
  background: var(--carte, #ffffff);
  color: var(--texte, #1d2430);
  border: 2px solid var(--accent, #1f5fa8);
  border-radius: 6px;
}
.lien-evitement:focus {
  left: 0.5rem;
}

.reseau-badge {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.6;
}
.reseau-resume {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.7em;
  border: 1px solid var(--bordure, #d6dbe3);
  border-radius: 999px;
  background: var(--carte, #ffffff);
  color: var(--texte, #1d2430);
  cursor: pointer;
  list-style: none;
}
.reseau-resume::-webkit-details-marker {
  display: none;
}
.reseau-resume:focus-visible {
  outline: 3px solid var(--accent, #1f5fa8);
  outline-offset: 2px;
}
.reseau-pastille {
  flex: none;
  width: 0.75em;
  height: 0.75em;
  border-radius: 50%;
  background: var(--ok, #1e7b4a);
}
.niveau-jaune .reseau-pastille {
  background: var(--alerte, #b26a00);
}
.niveau-rouge .reseau-pastille {
  background: var(--erreur, #b3261e);
}
.niveau-gris .reseau-pastille {
  background: var(--secondaire, #5b6575);
}

.reseau-panneau {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 60;
  width: min(24rem, calc(100vw - 2rem));
  margin-top: 0.4rem;
  padding: 0.8rem 1rem;
  background: var(--carte, #ffffff);
  color: var(--texte, #1d2430);
  border: 1px solid var(--bordure, #d6dbe3);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  font-size: 1rem;
}
.reseau-niveaux li {
  margin: 0.4rem 0;
}
.reseau-niveaux li.actuel {
  font-weight: 600;
}
.reseau-choix {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
  font-size: 0.95em;
  cursor: pointer;
}
.reseau-choix input {
  margin-top: 0.3em;
}
.reseau-file {
  color: var(--secondaire, #5b6575);
}
.reseau-attente {
  color: var(--secondaire, #5b6575);
  font-size: 0.9em;
}
.reseau-attente:empty {
  display: none;
}

.reseau-liste li {
  margin: 0.4rem 0;
}

@media (max-width: 720px) {
  .reseau-panneau {
    position: static;
    width: auto;
    margin-top: 0.4rem;
    box-shadow: none;
  }
}