/* ==========================================================================
   PC Lambda — les grands schémas explicatifs

   Chargée via $css_page par les pages qui en portent un :
   infrastructure.php (la chaîne réseau) et ia.php (l'IA dans vos murs,
   puis la chaîne d'automatisation).

   Les schémas parlent tous la même grammaire, d'une page à l'autre :
     --net   le matériel, les machines     → le bleu --infra du site
     --ok    vos flux, votre périmètre     → un vert distinct du vert IA de la
                                             charte, pour qu'un trait vert dans
                                             un schéma veuille dire « légitime,
                                             chez vous » et pas « offre IA »
     --bad   ce qui est refusé             → le rouge d'alerte, réservé à ça

   Ces jetons n'existent que sur ces pages : ailleurs, --infra et --ia portent
   déjà un sens, et les détourner brouillerait la lecture du site.
   ========================================================================== */

:root{
  --net:#2F6795;      --net-soft:#E7EFF7;
  --ok:#0B8A6C;       --ok-soft:#E2F3EE;      --ok-ink:#097458;
  --bad:#BC3227;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --net:#6EA7D4;    --net-soft:#152431;
    --ok:#2ACFA9;     --ok-soft:#0F2C27;      --ok-ink:#2ACFA9;
    --bad:#F0796E;
  }
}
:root[data-theme="dark"]{
  --net:#6EA7D4;      --net-soft:#152431;
  --ok:#2ACFA9;       --ok-soft:#0F2C27;      --ok-ink:#2ACFA9;
  --bad:#F0796E;
}

/* ---------- la figure ---------- */
.chaine{margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; padding:clamp(16px,3vw,30px); box-shadow:var(--shadow)}
.chaine svg{width:100%; height:auto; display:block}

/* Le schéma ne se lit plus en dessous de 820 px : il défile dans son propre
   cadre plutôt que d'être écrasé, ou de faire déborder la page entière. */
.chaine-scroll{overflow-x:auto; min-width:0}
.chaine-scroll > svg{min-width:820px}

.chaine figcaption{margin:20px 4px 0; font-size:16px; color:var(--ink-soft);
  text-align:center; text-wrap:balance; line-height:1.55}
.chaine figcaption b{color:var(--ink); font-weight:700}

/* ---------- légende ----------
   Deux encodages se répètent dans les dessins : la couleur et le trait
   (plein ou pointillé). Une légende ne se justifie que là. */
.chaine-leg{display:flex; gap:26px; flex-wrap:wrap; justify-content:center;
  margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line)}
.chaine-leg span{display:flex; align-items:center; gap:9px; font-size:15px; color:var(--ink-soft)}
.swatch{width:26px; height:3px; border-radius:2px; flex:none}
.swatch.dash{background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 11px)}

/* Sur le bandeau vert de la page IA, .ialocal impose color:#fff à toute sa
   descendance. La figure est une carte peinte avec --surface : son texte doit
   reprendre les encres de la charte, sinon la légende ressort en blanc sur
   blanc. On rétablit à la source plutôt que de peindre chaque élément. */
.ialocal .chaine{color:var(--ink)}
.ialocal .chaine figcaption{color:var(--ink-soft)}
.ialocal .chaine figcaption b{color:var(--ink)}
.ialocal .chaine-leg span{color:var(--ink-soft)}

/* Le mouvement des schémas est du SMIL (animateMotion), que le CSS ne peut pas
   arrêter : c'est footer.php qui appelle pauseAnimations() sur chaque <svg>
   quand le visiteur demande moins d'animations. Rien à faire de plus ici. */

/* Les schémas sont dessinés sur 1140 unités et se rendent ici autour de 990 px :
   les annotations les plus fines descendent vers 9,5 px. On l'accepte plutôt
   que d'élargir la figure — un bord gauche décalé de 40 px par rapport au titre
   se lirait comme un défaut, et ces annotations ne sont que du second plan. */

/* ---------- renvoi vers le comparateur, sur le bandeau vert de la page IA ----
   Même matière que .pill (le voile noir du bandeau) : le bloc appartient
   visiblement à la section plutôt que d'y être posé. */
.vers-cmp{display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  justify-content:space-between; margin:22px 0 0; padding:20px 24px;
  background:rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.16);
  border-radius:14px}
.vers-cmp p{margin:0; flex:1 1 340px; font-size:15px; color:rgba(255,255,255,.88); line-height:1.6}
.vers-cmp strong{color:#fff}
.vers-cmp .btn{flex:none}