/* Barre des pôles Alyneia — feuille autonome, identique dans les quatre
   portails. Autonome par nécessité : les quatre applications n'ont pas la même
   feuille de style ni les mêmes variables, et une barre qui se présenterait
   différemment de l'un à l'autre manquerait précisément ce qu'on lui demande —
   dire d'un coup d'œil qu'on est dans la même maison.

   Les couleurs sont posées en dur, sans variable : c'est la charte Alyneia, elle
   ne suit pas celle du pôle où la barre s'affiche. */

.reseau {
  /* `flex: none` et `align-items` explicites : posée dans une colonne en
     display:flex — c'est le cas des quatre portails —, la barre se laisserait
     sinon étirer sur toute la hauteur disponible, et ses pastilles avec elle. */
  display: flex;
  flex: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 4px;
  background: #f1f3f8;
  border: 1px solid #e0e5ee;
  border-radius: 9px;
  font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.reseau-pole {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 6px;
  color: #35405a;
  text-decoration: none;
  white-space: nowrap;
  transition: background .12s, color .12s;
}

.reseau-pole:hover,
.reseau-pole:focus-visible {
  background: #e2e7f0;
  color: #003366;
}

/* Le pôle courant : marqué, et non cliquable. */
.reseau-actuel {
  background: #003366;
  color: #fff;
  cursor: default;
}

/* Une pastille vide ne s'affiche pas : `hidden` la tient hors de la barre
   jusqu'à ce que le voisin ait répondu un nombre non nul. La règle globale
   `[hidden]` de certains portails étant supplantée par `display: inline-flex`,
   on le redit ici. */
.reseau-pastille[hidden] {
  display: none;
}

.reseau-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: #cc3366;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .reseau {
    padding: 6px;
  }
  .reseau-pole {
    padding: 5px 7px;
  }
}

/* Procédures : un outil commun aux pôles, pas un pôle. Un filet l'en sépare. */
.reseau-outil {
  margin-left: 7px;
}

.reseau-outil::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 6px;
  bottom: 6px;
  border-left: 1px solid #d3dae6;
}