/* ── Pile des réseaux connectés (mobile, Sprint 2) ─────────────────────────
   Petites cartes empilées en bas à droite, au-dessus de la barre d'onglets ; dépliées en
   overlay au centre de l'écran au tap. Voir reseaux-pile.js. */

.reseaux-pile {
  position: fixed; right: 14px; bottom: 100px; z-index: 98;
  /* Largeur = une carte + le décalage de chaque carte suivante. */
  width: calc(38px + (var(--n, 1) - 1) * 22px); height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.reseaux-pile-card {
  position: absolute; bottom: 0; right: calc(var(--i) * 22px);
  z-index: calc(10 - var(--i));
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-card);
  border: 1px solid rgba(var(--text-rgb),0.14);
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transform: rotate(calc(var(--i) * -6deg)) translateY(calc(var(--i) * -3px));
  transform-origin: bottom center;
  transition: transform 0.2s ease;
}
.reseaux-pile:active .reseaux-pile-card { transform: scale(0.94); }
body.modal-open .reseaux-pile { display: none; }

.reseaux-pile-overlay {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0,0,0,0);
  transition: background 0.25s ease;
}
.reseaux-pile-overlay.visible { display: flex; }
.reseaux-pile-overlay.ouvert { background: rgba(0,0,0,0.55); }

.reseaux-pile-deck {
  width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 10px;
}
.reseaux-pile-full {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: var(--bg-card);
  border: 1px solid rgba(var(--text-rgb),0.12);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  /* Replié : toutes les cartes partent du coin bas droit, empilées ; dépliées une à une. */
  opacity: 0;
  transform: translate(30%, 60vh) scale(0.3) rotate(-8deg);
  transition: transform 0.32s cubic-bezier(.2,.8,.2,1), opacity 0.2s ease;
  transition-delay: calc(var(--i) * 40ms);
}
.reseaux-pile-overlay.ouvert .reseaux-pile-full { opacity: 1; transform: none; }
.reseaux-pile-full-logo { flex: 0 0 auto; display: flex; }
.reseaux-pile-full-txt { flex: 1; min-width: 0; }
.reseaux-pile-full-nom {
  font-size: 15px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reseaux-pile-full-net { font-size: 12px; color: rgba(var(--text-rgb),0.5); margin-top: 2px; }
.reseaux-pile-full-stat { text-align: right; flex: 0 0 auto; }
.reseaux-pile-full-val { font-size: 18px; font-weight: 800; color: var(--text); font-family: var(--font-display); }
.reseaux-pile-full-lbl { font-size: 11px; color: rgba(var(--text-rgb),0.5); }

@media (min-width: 1024px) {
  .reseaux-pile, .reseaux-pile-overlay { display: none !important; }
}

/* Place réservée sous le contenu : sans elle, la pile masquerait le bas du dernier bloc une fois
   la page défilée jusqu'au bout. Posée par renderReseauxPile. */
@media (max-width: 1023px) {
  body.has-reseaux-pile .screen { padding-bottom: 160px; }
}