/*
 * © 2026 DATASHIELD RISK CONSULTING (SAS) — Zerval
 * Tous droits réservés. Code propriétaire — toute reproduction,
 * diffusion ou réutilisation non autorisée est interdite. SIREN 984 134 916
 */
/* ZSYS — « Le système » : diagramme d'interconnexion des piliers Composant autoportant (bande sombre), scopé .zsys, 0 collision. Desktop = SVG interactif · Mobile = repli <details> accessible. Thème via variables --zs-* (surchargées par .zsys--pro/smart/umbrella) */
.zsys{
  --zs-ink:#eaf1fb; --zs-muted:#93a7c4; --zs-faint:#6e83a3;
  --zs-line:rgba(140,170,210,.16); --zs-dot:rgba(140,170,210,.12);
  --zs-accent:#3aa0e8; --zs-accent-soft:#7fd0f2; --zs-warm:#ef9a54;
  --zs-card:rgba(255,255,255,.035); --zs-card-b:rgba(150,180,220,.18);
  --zs-bg0:#050d1c; --zs-bg1:#08152c;
  position:relative; color:var(--zs-ink);
  background:radial-gradient(1200px 700px at 50% -12%,#0b1e3c 0%,var(--zs-bg1) 42%,var(--zs-bg0) 100%);
  padding:clamp(48px,7vw,84px) 0;
}
.zsys--smart{ --zs-accent:#2bc0cf; --zs-accent-soft:#82e7ef; }
.zsys--umbrella{ --zs-accent:#33abec; --zs-accent-soft:#8ad7f6; }
.zsys .wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,26px)}

/* — En-tête — */
.zsys .zsys-head{max-width:1160px;margin:0 auto 6px}
.zsys .zsys-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--zs-accent-soft);font-weight:600}
.zsys .zsys-eyebrow::before{content:"";width:24px;height:2px;background:var(--zs-accent-soft);display:inline-block}
.zsys .zsys-head h2{font-size:clamp(23px,3vw,34px);font-weight:800;letter-spacing:-.02em;
  margin:14px 0 8px;max-width:24ch;line-height:1.12;color:#fff}
.zsys .zsys-head p{color:var(--zs-muted);max-width:66ch;margin:0;font-size:clamp(14.5px,1.4vw,16px);line-height:1.55}

/* — Scène SVG (desktop) — */
.zsys .zsys-stage-wrap{width:100%;max-width:1160px;margin:26px auto 0}
.zsys .zsys-stage{position:relative;width:100%;aspect-ratio:1160/700}
.zsys .zsys-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

@media (prefers-reduced-motion:no-preference){
  .zsys .z-flux{stroke-dasharray:5 12;animation:zsys-flow 1.15s linear infinite}
  @keyframes zsys-flow{to{stroke-dashoffset:-34}}
}
.zsys .z-lnk{stroke:var(--zs-line);stroke-width:1.4;fill:none}
.zsys .z-dot{fill:var(--zs-bg1);stroke:var(--zs-accent);stroke-width:1.6}
.zsys .z-chip{fill:#0d1f3d;stroke:var(--zs-card-b);stroke-width:1}
.zsys .z-chip-t{fill:#c4d3e8;font:600 12px 'Inter',system-ui,sans-serif;text-anchor:middle;letter-spacing:.01em}
.zsys .z-grid circle{fill:var(--zs-dot)}
.zsys .z-crop{stroke:rgba(140,170,210,.32);stroke-width:1.4;fill:none}

/* cartes (foreignObject) */
.zsys .zpil{height:100%;background:var(--zs-card);border:1px solid var(--zs-card-b);border-radius:6px;
  padding:16px 16px 14px;display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(2px);
  transition:border-color .2s ease,background .2s ease}
.zsys .zpil:hover{border-color:var(--zs-accent);background:rgba(58,160,232,.07)}
.zsys .zpil .zic{width:34px;height:34px;border-radius:6px;border:1px solid var(--zs-card-b);
  background:rgba(58,160,232,.08) center/20px no-repeat}
.zsys .zpil.warm .zic{background-color:rgba(239,154,84,.10)}
.zsys .zpil h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:#fff}
.zsys .zpil ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.zsys .zpil li{position:relative;padding-left:14px;font-size:12.5px;color:var(--zs-muted);line-height:1.35}
.zsys .zpil li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--zs-accent-soft)}
.zsys .zpil.warm li::before{background:var(--zs-warm)}
.zsys .zpil .zplus{margin-top:auto;align-self:flex-start;width:26px;height:26px;border:1px solid var(--zs-card-b);
  border-radius:5px;display:grid;place-items:center;color:var(--zs-muted);font-size:16px;line-height:1;cursor:pointer;
  background:transparent;transition:border-color .18s ease,color .18s ease}
.zsys .zpil .zplus:hover{border-color:var(--zs-accent);color:var(--zs-accent-soft)}
.zsys .zpil .zplus:focus-visible{outline:2px solid var(--zs-accent-soft);outline-offset:2px}
.zsys .zpil.open{border-color:var(--zs-accent);background:#0c1c38;box-shadow:0 0 0 1px rgba(58,160,232,.35)}
.zsys .zpil .zmore{max-height:0;overflow:hidden;opacity:0;display:flex;flex-direction:column;gap:5px;margin:0;
  transition:max-height .3s ease,opacity .24s ease,margin .3s ease}
.zsys .zpil.open .zmore{max-height:260px;opacity:1;margin:8px 0 2px}
.zsys .zpil .zmh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zs-accent-soft);font-weight:600}
.zsys .zpil.warm .zmh{color:var(--zs-warm)}
.zsys .zpil .zmore ul{gap:5px}

/* cœur */
.zsys .zcore{height:100%;border-radius:8px;border:1px solid rgba(58,160,232,.5);
  background:linear-gradient(180deg,rgba(58,160,232,.14),rgba(8,21,44,.6));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:14px}
.zsys .zcore .zcic{width:44px;height:44px;border-radius:8px;background:#08152c center/26px no-repeat;
  border:1px solid rgba(58,160,232,.5)}
.zsys .zcore b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.25;color:#fff}
.zsys .zcore span{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zs-accent-soft);font-weight:600}

/* — Légende + liens — */
.zsys .zsys-legend{max-width:1160px;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:18px;
  color:var(--zs-muted);font-size:12.5px;align-items:center;justify-content:center}
.zsys .zsys-legend b{color:var(--zs-ink);font-weight:600}
.zsys .zsys-legend .k{display:inline-flex;align-items:center;gap:7px}
.zsys .zsys-legend .sw{width:22px;height:2px;background:var(--zs-accent)}
.zsys .zsys-legend .sw.d{background:repeating-linear-gradient(90deg,var(--zs-accent) 0 5px,transparent 5px 12px)}
.zsys .zsys-legend .sw.w{background:var(--zs-warm)}
.zsys .zsys-explore{max-width:1160px;margin:22px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.zsys .zsys-explore a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;
  color:var(--zs-accent-soft);border:1px solid var(--zs-card-b);border-radius:999px;padding:7px 14px;
  transition:border-color .18s ease,background .18s ease}
.zsys .zsys-explore a:hover{border-color:var(--zs-accent);background:rgba(58,160,232,.08)}

/* — Repli mobile (<details>) — */
.zsys .zsys-m{display:none;margin:26px auto 0;max-width:560px}
.zsys .zsys-m .m-core{display:flex;align-items:center;gap:12px;border:1px solid rgba(58,160,232,.5);
  border-radius:8px;background:linear-gradient(180deg,rgba(58,160,232,.14),rgba(8,21,44,.5));
  padding:14px 16px;margin-bottom:14px}
.zsys .zsys-m .m-core .zcic{width:38px;height:38px;border-radius:8px;background:#08152c center/24px no-repeat;
  border:1px solid rgba(58,160,232,.5);flex:0 0 auto}
.zsys .zsys-m .m-core span{display:block;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--zs-accent-soft);font-weight:600}
.zsys .zsys-m .m-core b{display:block;font-size:15px;color:#fff;font-weight:700;margin-top:2px}
.zsys .zsys-m details{border:1px solid var(--zs-card-b);border-radius:6px;background:var(--zs-card);margin-bottom:10px}
.zsys .zsys-m details[open]{border-color:var(--zs-accent);background:#0c1c38}
.zsys .zsys-m summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:14px 15px}
.zsys .zsys-m summary::-webkit-details-marker{display:none}
.zsys .zsys-m .m-ic{width:32px;height:32px;flex:0 0 auto;border-radius:6px;border:1px solid var(--zs-card-b);
  background:rgba(58,160,232,.08) center/19px no-repeat;margin-top:1px}
.zsys .zsys-m details.warm .m-ic{background-color:rgba(239,154,84,.10)}
.zsys .zsys-m .m-tx{flex:1;min-width:0}
.zsys .zsys-m .m-tx h3{margin:0;font-size:15.5px;font-weight:700;color:#fff}
.zsys .zsys-m .m-tx p{margin:3px 0 0;font-size:12.5px;color:var(--zs-muted);line-height:1.4}
.zsys .zsys-m .m-chev{flex:0 0 auto;color:var(--zs-muted);font-size:18px;line-height:1;margin-top:4px;transition:transform .2s ease}
.zsys .zsys-m details[open] .m-chev{transform:rotate(45deg);color:var(--zs-accent-soft)}
.zsys .zsys-m .m-more{padding:0 15px 14px 59px}
.zsys .zsys-m .m-more .zmh{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--zs-accent-soft);font-weight:600}
.zsys .zsys-m .m-more ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.zsys .zsys-m .m-more li{position:relative;padding-left:14px;font-size:12.5px;color:var(--zs-muted);line-height:1.35}
.zsys .zsys-m .m-more li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--zs-accent-soft)}
.zsys .zsys-m details.warm .m-more li::before{background:var(--zs-warm)}

/* bascule desktop/mobile */
@media (max-width:860px){
  .zsys .zsys-stage-wrap,.zsys .zsys-legend{display:none}
  .zsys .zsys-m{display:block}
  .zsys .zsys-explore{margin-top:18px}
}