/* SendgateRouting — Brevo → Sendgate trie → équipes (porté du composant React en vanilla).
   Tokens scopés sur .sgr ; piloté par assets/sg-routing.js (boucle rAF).
   Conçu pour vivre dans une carte .demo de la home → fond transparent, pas de padding propre. */

.sgr {
  --sg-navy: #263B6A; --sg-navy-dark: #1B2C52; --sg-blue-gray: #6984A9;
  --sg-green: #A0D585; --sg-green-dark: #82BD63; --sg-lime: #EEFABD;
  --sg-ink: #22293B; --sg-muted: #6E7790; --sg-line: #E7E9F0;
  --sg-bg: #FCFCF8; --sg-section: #F4F6EC; --sg-card: #FFFFFF; --sg-brevo: #0B996E;
  --sg-t1: #82BD63;  /* Sales — vert */
  --sg-t2: #6984A9;  /* Marketing — bleu-gris */
  --sg-t3: #C58B5C;  /* Support — ocre */
  --sg-serif: var(--sg-heading, 'Lexend Deca', Georgia, sans-serif);
  --sg-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-family: var(--sg-sans); color: var(--sg-ink);
  display: flex; justify-content: center;
}
.sgr-stage { position: relative; width: 380px; max-width: 100%; display: flex; flex-direction: column; align-items: center; }

/* Source : carte neutre portant deux ESP (Brevo + Mailchimp) */
.sgr-source {
  display: flex; align-items: center; gap: 12px;
  background: var(--sg-card); border: 1.5px solid var(--sg-line);
  border-radius: 14px; padding: 12px 18px;
  box-shadow: 0 6px 20px rgba(38,59,106,0.08);
  width: 248px; z-index: 6;
}
.sgr-source-logos { display: inline-flex; flex-shrink: 0; }
.sgr-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--sg-card); border: 1.5px solid var(--sg-line);
  box-shadow: 0 2px 6px rgba(38,59,106,0.1); overflow: hidden;
}
.sgr-logo img { width: 24px; height: 24px; object-fit: contain; display: block; }
.sgr-logo + .sgr-logo { margin-left: -9px; }       /* léger chevauchement, effet "stack" */
.sgr-source-txt { display: flex; flex-direction: column; min-width: 0; }
.sgr-source-name { font-weight: 600; font-size: 14px; color: var(--sg-navy); line-height: 1.2; }
.sgr-source-sub { font-size: 12px; color: var(--sg-muted); }

/* Flux */
.sgr-flux { position: relative; width: 380px; max-width: 100%; height: 320px; margin: -6px 0; }
.sgr-rails { position: absolute; inset: 0; width: 100%; height: 100%; }
.sgr-rails line, .sgr-rails path { stroke: var(--sg-line); stroke-width: 1.5; stroke-dasharray: 3 7; fill: none; }

/* Cartes-listes qui circulent (créées par le JS) */
.sgr-list {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sg-card);
  border: 1.5px solid var(--sg-line);
  border-left: 3px solid var(--list-color);
  border-radius: 9px;
  padding: 7px 11px 7px 9px;
  box-shadow: 0 4px 12px rgba(38,59,106,0.12);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  transition: opacity .15s linear;
  will-change: transform;
  z-index: 4;
}
.sgr-list-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sgr-list-txt { display: flex; flex-direction: column; line-height: 1.2; }
.sgr-list-name { font-size: 12px; font-weight: 600; color: var(--sg-ink); }
.sgr-list-count { font-size: 10.5px; font-weight: 500; color: var(--sg-muted); font-variant-numeric: tabular-nums; }

/* Barre Sendgate */
.sgr-gate { position: absolute; top: 150px; left: 0; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; z-index: 8; }
.sgr-gate-line { position: absolute; left: 8px; right: 8px; height: 3px; background: linear-gradient(90deg, transparent, var(--sg-navy) 10%, var(--sg-navy) 90%, transparent); border-radius: 3px; opacity: 0.85; }
.sgr-gate-fav {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--sg-navy); color: var(--sg-lime);
  font-family: var(--sg-serif); font-weight: 600; font-size: 22px;
  box-shadow: 0 8px 22px rgba(38,59,106,0.3); border: 2px solid var(--sg-bg);
}

/* Équipes */
.sgr-teams { display: flex; justify-content: space-between; width: 360px; max-width: 100%; gap: 10px; z-index: 6; }
.sgr-team {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--sg-card); border: 1.5px solid var(--sg-line);
  border-radius: 12px; padding: 12px 8px; box-shadow: 0 6px 18px rgba(38,59,106,0.07);
}
.sgr-team-dot { width: 11px; height: 11px; border-radius: 50%; }
.sgr-team-name { font-size: 12.5px; font-weight: 600; color: var(--sg-navy); white-space: nowrap; }
.sgr-team-count { font-family: var(--sg-serif); font-size: 24px; font-weight: 600; color: var(--sg-navy); line-height: 1.1; }

@media (max-width: 460px) {
  .sgr-team-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sgr-list { display: none; }
}