/* =========================================================
   Scène animée « La suite Prisia en action » (assets/suite.js)
   ========================================================= */
.suite{background:radial-gradient(700px 400px at 80% 0%,rgba(28,122,168,.35),transparent 70%),radial-gradient(520px 380px at 0% 100%,rgba(46,199,107,.14),transparent 70%),#060c1d;
  border-radius:32px;padding:26px 26px 22px;color:#e8eefc;box-shadow:0 40px 80px -40px rgba(6,12,29,.8);position:relative;overflow:hidden}
.suite-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:12px 6px 6px}
.suite-scene{position:relative;aspect-ratio:1100/600;min-width:720px;font-size:clamp(9px,1.05vw,13.5px)}
.suite-liens{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.suite-liens .lien{fill:none;stroke:rgba(127,200,230,.25);stroke-width:4;stroke-linecap:round;stroke-dasharray:3 12;transition:stroke .3s}
.suite-liens .lien.actif{stroke:url(#lienGrad);stroke-dasharray:none;filter:drop-shadow(0 0 6px rgba(76,195,207,.8))}
.suite-liens .paquet{fill:#eaffe0;filter:drop-shadow(0 0 8px #8fe06a) drop-shadow(0 0 3px #fff)}
.suite.hors-ligne #l1{stroke:#ef6b6b;stroke-dasharray:6 10;filter:none}
.suite .coupure{opacity:0;transition:opacity .3s}
.suite.hors-ligne .coupure{opacity:1}

.sn{position:absolute;border-radius:1.4em;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);
  padding:.9em 1em;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s,opacity .4s;opacity:.55}
.sn.actif{opacity:1;border-color:rgba(143,224,106,.55);box-shadow:0 0 0 1px rgba(76,195,207,.35),0 0 40px rgba(76,195,207,.28);transform:translateY(-3px)}
.sn.ping{animation:snPing .7s ease-out}
@keyframes snPing{0%{box-shadow:0 0 0 0 rgba(143,224,106,.8)}100%{box-shadow:0 0 0 22px rgba(143,224,106,0)}}
.sn h4{font:700 1.15em/1.15 var(--head);margin:0;display:flex;align-items:center;gap:.5em}
.sn h4 img{width:1.9em;height:1.9em;border-radius:.5em}
.sn small{display:block;color:var(--on-dark);font-size:.82em;margin-top:.15em}
.sn .k{font-size:.72em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}

/* tablette */
.sn-tab .ecran{margin-top:.6em;border-radius:.9em;background:#0a1630;border:1px solid rgba(255,255,255,.1);padding:.6em;text-align:center;position:relative;overflow:hidden}
.sn-tab .heure{font:300 1.9em/1 "Plus Jakarta Sans",sans-serif;letter-spacing:.05em}
.sn-tab .pin{display:flex;gap:.35em;justify-content:center;margin-top:.45em}
.sn-tab .pin i{width:.6em;height:.6em;border-radius:50%;border:1.5px solid #aebcd6}
.sn-tab.actif .pin i{animation:pinRemplit .2s steps(1) forwards}
.sn-tab.actif .pin i:nth-child(2){animation-delay:.15s}.sn-tab.actif .pin i:nth-child(3){animation-delay:.3s}.sn-tab.actif .pin i:nth-child(4){animation-delay:.45s}
@keyframes pinRemplit{to{background:#4cc3cf;border-color:#4cc3cf}}
.sn-tab .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sn-tab.ping .flash{animation:flash .5s ease-out .5s}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
.sn-tab .avatar{position:absolute;left:-.4em;top:-1.3em;display:flex;align-items:center;gap:.4em;background:#fff;color:#0d3b66;border-radius:999px;padding:.25em .7em .25em .3em;font-weight:700;font-size:.85em;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6);transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.sn-tab .avatar span{width:1.5em;height:1.5em;border-radius:50%;background:linear-gradient(135deg,#3d6fe0,#8fe0dc)}
.sn-tab.actif .avatar{transform:scale(1)}
.sn-tab .file{position:absolute;right:-.6em;top:-.9em;background:#ef6b6b;color:#fff;border-radius:999px;padding:.2em .6em;font-size:.78em;font-weight:700;transform:scale(0);transition:transform .3s}
.sn-tab .file.on{transform:scale(1)}

/* serveur */
.sn-srv .rack{margin-top:.6em;display:grid;gap:.35em}
.sn-srv .rack div{height:1.15em;border-radius:.35em;background:#0a1630;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:.3em;padding:0 .5em}
.sn-srv .rack i{width:.42em;height:.42em;border-radius:50%;background:#2ec76b;opacity:.35}
.sn-srv.actif .rack i{animation:led .45s steps(2) infinite}
.sn-srv.actif .rack div:nth-child(2) i{animation-delay:.15s}.sn-srv.actif .rack div:nth-child(3) i{animation-delay:.3s}
@keyframes led{50%{opacity:1;box-shadow:0 0 6px #2ec76b}}
.sn-srv .rack b{flex:1;height:.25em;border-radius:.2em;background:rgba(255,255,255,.12)}

/* direction */
.sn-dir .kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:.55em}
.sn-dir .kpi div{background:#0a1630;border-radius:.6em;padding:.35em .45em;border:1px solid rgba(255,255,255,.08)}
.sn-dir .kpi b{display:block;font:800 1.35em/1 var(--head)}
.sn-dir .kpi small{margin:0;font-size:.72em}
.sn-dir .alerte{margin-top:.45em;display:flex;justify-content:space-between;background:rgba(183,156,255,.14);border:1px solid rgba(183,156,255,.45);color:#d9ccff;border-radius:999px;padding:.25em .7em;font-size:.82em;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.suite.vu-2 .sn-dir .alerte{opacity:1;transform:none}
.suite.vu-2 .sn-dir .retards{color:#b79cff}

/* PrisiaTime */
.sn-time .grille{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em;margin-top:.6em}
.sn-time .grille i{aspect-ratio:1.4;border-radius:.35em;background:rgba(255,255,255,.08);transition:background .3s,transform .3s}
.suite.vu-3 .sn-time .grille i.m{background:#d9ecfb}.suite.vu-3 .sn-time .grille i.a{background:#d6f3f1}.suite.vu-3 .sn-time .grille i.n{background:#1c7aa8}.suite.vu-3 .sn-time .grille i.c{background:#c9ecd6}
.suite.vu-3 .sn-time .grille i:nth-child(odd){transition-delay:.1s}.suite.vu-3 .sn-time .grille i:nth-child(3n){transition-delay:.25s}
.sn-time .cpt{display:flex;justify-content:space-between;margin-top:.55em;background:#0a1630;border-radius:.6em;padding:.35em .6em;font-size:.85em;color:var(--on-dark)}
.sn-time .cpt b{color:#fff;font-family:var(--head)}

/* secrétariat social */
.sn-secr .doc{margin:.6em auto 0;width:3.6em;height:4.4em;border-radius:.45em;background:#f2f7fb;position:relative;padding:.6em .45em}
.sn-secr .doc i{display:block;height:.28em;border-radius:.2em;background:#c5d8ea;margin-bottom:.35em}
.sn-secr .tampon{position:absolute;right:-.9em;bottom:-.6em;background:#2ec76b;color:#04230f;font-weight:800;font-size:.75em;border-radius:999px;padding:.2em .6em;transform:scale(0) rotate(-12deg);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.suite.vu-4 .sn-secr .tampon{transform:scale(1) rotate(-12deg)}

/* GSM */
.sn-gsm{display:flex;gap:.8em;align-items:center}
.sn-gsm .tel{flex:0 0 2.6em;height:4.4em;border-radius:.7em;border:2px solid rgba(255,255,255,.35);position:relative;background:#0a1630}
.sn-gsm .tel::after{content:"";position:absolute;left:50%;bottom:.3em;width:.8em;height:.15em;margin-left:-.4em;border-radius:.1em;background:rgba(255,255,255,.4)}
.sn-gsm .notif{background:#fff;color:#121a2c;border-radius:.8em;padding:.4em .6em;font-size:.82em;line-height:1.3;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s;box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.sn-gsm .notif b{color:#0d3b66}
.suite.vu-5 .sn-gsm .notif{opacity:1;transform:none}

/* légende + commandes */
.suite-bas{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.suite-texte{flex:1 1 360px;margin:0;font-size:17px;line-height:1.45;min-height:2.9em;color:#d8e3f7}
.suite-texte b{color:#fff}
.suite-ctrl{display:flex;gap:8px;flex-wrap:wrap}
.suite-ctrl button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px}
.suite-ctrl button:hover{background:rgba(255,255,255,.16)}
.suite-etapes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;list-style:none;padding:0}
.suite-etapes button{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#aebcd6;border-radius:999px;padding:7px 14px 7px 7px;font:600 13.5px "Plus Jakarta Sans",sans-serif;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.suite-etapes button i{font-style:normal;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.suite-etapes button.fait{color:#d8e3f7}
.suite-etapes button.fait i{background:rgba(46,199,107,.3)}
.suite-etapes button.on{background:linear-gradient(135deg,#1c7aa8,#0d3b66);color:#fff;border-color:transparent}
.suite-etapes button.on i{background:#8fe06a;color:#04230f}
@media(prefers-reduced-motion:reduce){.sn,.sn-tab .avatar,.sn-dir .alerte,.sn-gsm .notif,.sn-secr .tampon{transition:none}}