/* ── LA CELLULE DESIGN (SPEOS) ───────────────────────────────────────
   Un diagramme de position, pas un récit : au centre la cellule, en
   cuivre et en avant — c'est la seule pièce qui porte l'accent plein.
   À gauche, trois matières qui entrent ; à droite, deux clients
   internes qui reçoivent. Les fils sont fins, en SVG, une seule nappe
   sous les plaques.

   Scène à ratio (1.85) : les coordonnées du SVG (viewBox 740×400)
   suivent le même ratio, les fils restent accrochés aux plaques. */

/* Une plaque d'entrée ou de sortie : sobre, un libellé et un nom. */
.spc-in, .spc-out{
  display:flex; flex-direction:column; gap:.5cqw;
  padding:1.5cqw 1.6cqw;
}
.spc-in span, .spc-out span{ font-size:1.1cqw; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--fg-mate); }
.spc-in b, .spc-out b{ font-size:1.75cqw; font-weight:700; line-height:1.25;
  color:var(--fg-encre); }

/* La cellule : la seule plaque en cuivre, posée en avant. Son ombre
   est plus marquée que celle des plaques qu'elle relie — c'est elle
   qui la soulève. */
.spc-mid{
  display:flex; flex-direction:column; align-items:center; gap:.55cqw;
  padding:2.1cqw 1.6cqw; text-align:center;
  background:var(--fg-accent); outline-color:transparent;
  box-shadow:
    0 .14cqw .6cqw rgba(10,18,32,.07),
    0 1cqw 2.6cqw rgba(10,18,32,.09),
    0 3cqw 7.4cqw rgba(10,18,32,.11),
    0 7cqw 16cqw rgba(10,18,32,.09);
}
html:not(.theme-light) .spc-mid{ box-shadow:
    0 .14cqw .6cqw rgba(2,6,13,.4),
    0 1cqw 2.6cqw rgba(2,6,13,.36),
    0 3cqw 7.4cqw rgba(2,6,13,.32),
    0 7cqw 16cqw rgba(2,6,13,.26); }
.spc-mid span{ font-size:1.12cqw; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.82); }
.spc-mid b{ font-size:2.3cqw; font-weight:700; line-height:1.2; color:#fff; }

/* Les fils : une seule nappe SVG sous les plaques, traits fins,
   pointes discrètes. La voix est mate, pas cuivre : le cuivre est
   réservé à la cellule. */
.spc-fils{ display:block; width:100%; height:auto; overflow:visible; }
.spc-fils path{ fill:none; stroke:var(--fg-mate); stroke-width:1.5;
  stroke-linecap:round; opacity:.6; }
.spc-fils polygon{ fill:var(--fg-mate); opacity:.6; }

/* ── PETIT ÉCRAN ─────────────────────────────────────────────────────
   Même image en plus petit : on rend seulement du corps aux textes,
   sans dépasser ce que les plaques peuvent porter sans se toucher. */
@container (max-width:560px){
  .spc-in, .spc-out{ padding:1.6cqw 1.7cqw; gap:.6cqw; }
  .spc-in span, .spc-out span{ font-size:1.6cqw; }
  .spc-in b, .spc-out b{ font-size:2.3cqw; }
  .spc-mid span{ font-size:1.6cqw; }
  .spc-mid b{ font-size:2.9cqw; }
}
@container (max-width:400px){
  .spc-in span, .spc-out span{ font-size:1.9cqw; }
  .spc-in b, .spc-out b{ font-size:2.7cqw; }
  .spc-mid span{ font-size:1.9cqw; }
  .spc-mid b{ font-size:3.3cqw; }
}