/* ─────────────────────────────────────────────────────────────────────────
   INDUSIAX SUITE — kit visuel commun (Vector, Flux, Stator, Rotor, Contiax)
   Garde la charte existante ; ajoute images, mouvement discret et ton.
   Usage : <body data-produit="vector" class="sx"> + ce fichier après le CSS de l'app.
   Une seule variable à connaître : --p (couleur du produit), posée par data-produit.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --stator:#E84C2B; --rotor:#3B82F6; --vector:#A78BFA; --flux:#0EA5E9; --contiax:#10B981;
  --p:#E84C2B; --p-h:#c43b1f; --p-rgb:232,76,43; --p-l:#FFF1EE; --p-ld:#2A1510;
  --sx-ease:cubic-bezier(.22,1,.36,1);
}
[data-produit="stator"] {--p:var(--stator); --p-h:#c43b1f; --p-rgb:232,76,43;  --p-l:#FFF1EE; --p-ld:#2A1510;}
[data-produit="rotor"]  {--p:var(--rotor);  --p-h:#2563EB; --p-rgb:59,130,246;  --p-l:#EEF4FF; --p-ld:#111C33;}
[data-produit="vector"] {--p:var(--vector); --p-h:#7C5CE6; --p-rgb:167,139,250; --p-l:#F3EEFF; --p-ld:#1E1830;}
[data-produit="flux"]   {--p:var(--flux);   --p-h:#0284C7; --p-rgb:14,165,233;  --p-l:#E8F6FD; --p-ld:#0C2230;}
[data-produit="contiax"]{--p:var(--contiax);--p-h:#059669; --p-rgb:16,185,129;  --p-l:#E7F8F1; --p-ld:#0C2620;}

/* Pont avec les apps existantes : leur variable d'accent prend la couleur du produit */
.sx{--or:var(--p); --or-h:var(--p-h); --or-l:var(--p-l);}
.sx.dark{--or-l:var(--p-ld);}

/* ── 1. MOUVEMENT DISCRET ───────────────────────────────────────────────── */
.sx .main{animation:sxPage .45s var(--sx-ease) both;}
@keyframes sxPage{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.sx .btn,.sx .card,.sx .kpi-card,.sx .nav-item{transition:background .25s,border-color .25s,box-shadow .25s,transform .2s;}
.sx .btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(var(--p-rgb),.28);}
.sx .card:hover,.sx .kpi-card:hover{box-shadow:0 8px 28px rgba(var(--p-rgb),.10);}
/* halo derrière un titre ou une carte : ajouter la classe sx-halo */
.sx-halo{position:relative;isolation:isolate;}
.sx-halo::before{content:"";position:absolute;z-index:-1;inset:-40px -60px auto -60px;height:140px;
  background:radial-gradient(ellipse at 20% 50%,rgba(var(--p-rgb),.18),transparent 70%);pointer-events:none;}
/* emblème qui se dessine (~1 s) : <span class="sx-emblem"> + svg inline */
.sx-emblem{display:inline-flex;width:28px;height:28px;color:var(--p);}
.sx-emblem svg{width:100%;height:100%;}
.sx-emblem svg *{stroke-dasharray:120;stroke-dashoffset:120;animation:sxDraw 1s var(--sx-ease) forwards;}
.sx-emblem svg *:nth-child(2){animation-delay:.25s;}
.sx-emblem svg *:nth-child(3){animation-delay:.45s;}
@keyframes sxDraw{to{stroke-dashoffset:0;}}
/* emblèmes v2 (pleins, en volume) : apparition douce au lieu du tracé */
.sx-emblem.v2 svg *{stroke-dasharray:none;stroke-dashoffset:0;animation:none;}
.sx-emblem.v2 svg{animation:sxEmbIn 1s var(--sx-ease) both;}
@keyframes sxEmbIn{0%{opacity:0;transform:rotate(-90deg) scale(.6);}60%{opacity:1;}100%{transform:none;}}
.sx-lanceur-ico svg.sx-emb{width:100%;height:100%;}
@media (prefers-reduced-motion:reduce){
  .sx .main,.sx-emblem svg,.sx-emblem svg *,.sx-login *{animation:none!important;stroke-dashoffset:0!important;}
}

/* ── 2. IMAGES : page de connexion en écran partagé ─────────────────────── */
.sx-login{position:fixed;inset:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr);z-index:5;}
.sx-login-visuel{position:relative;overflow:hidden;background:#0b0d12;}
.sx-login-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);animation:sxZoom 18s ease-in-out infinite alternate;}
@keyframes sxZoom{to{transform:scale(1.10);}}
.sx-login-visuel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(var(--p-rgb),.38) 0%,rgba(11,13,18,.25) 45%,rgba(11,13,18,.85) 100%);}
.sx-login-texte{position:absolute;z-index:2;left:48px;right:48px;bottom:48px;color:#fff;animation:sxPage .8s .2s var(--sx-ease) both;}
.sx-login-texte .sx-emblem{width:44px;height:44px;margin-bottom:14px;color:#fff;}
.sx-login-texte h2{font-size:30px;font-weight:700;line-height:1.15;letter-spacing:-.4px;max-width:440px;}
.sx-login-texte p{margin-top:10px;font-size:15px;color:rgba(255,255,255,.75);max-width:420px;}
.sx-login-suite{margin-top:22px;display:flex;gap:8px;flex-wrap:wrap;}
.sx-login-suite span{font-size:11px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.8);}
.sx-login-suite span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:6px;background:var(--c);vertical-align:middle;}
.sx-login-form{position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;}
@media (max-width:900px){
  .sx-login{grid-template-columns:1fr;grid-template-rows:200px 1fr;position:static;min-height:100vh;}
  .sx-login-texte{left:20px;right:20px;bottom:18px;}
  .sx-login-texte h2{font-size:20px;}
  .sx-login-texte p,.sx-login-suite{display:none;}
  .sx-login-texte .sx-emblem{width:30px;height:30px;margin-bottom:6px;}
}

/* ── 3. TON : accueil, états vides, célébration ─────────────────────────── */
.sx-bonjour{font-size:28px;font-weight:700;letter-spacing:-.3px;}
.sx-bonjour .wave{display:inline-block;animation:sxWave 1.6s .4s ease-in-out 1;transform-origin:70% 70%;}
@keyframes sxWave{0%,100%{transform:rotate(0);}20%,60%{transform:rotate(14deg);}40%,80%{transform:rotate(-8deg);}}
.sx-vide{text-align:center;padding:36px 20px;border:1.5px dashed rgba(var(--p-rgb),.35);border-radius:16px;
  background:rgba(var(--p-rgb),.04);}
.sx-vide img,.sx-vide svg{width:200px;max-width:70%;height:auto;color:var(--p);opacity:.9;margin-bottom:10px;}
.sx-vide h3{font-size:18px;font-weight:700;margin-bottom:6px;}
.sx-vide p{color:var(--mut,#6E6E78);font-size:14px;margin-bottom:16px;}
.sx-confetti{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.sx-confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:.95;
  animation:sxFall var(--t,2.6s) var(--d,0s) cubic-bezier(.3,.6,.4,1) forwards;}
@keyframes sxFall{to{transform:translate(var(--x,0),105vh) rotate(var(--r,540deg));opacity:.2;}}
.sx-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:10000;
  background:var(--p);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;
  box-shadow:0 10px 30px rgba(var(--p-rgb),.4);animation:sxCentre .5s var(--sx-ease) both;}
@keyframes sxCentre{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}

/* ── 4. LANCEUR DE SUITE (grille d'applications) ────────────────────────── */
.sx-lanceur{position:relative;display:inline-flex;}
.sx-lanceur-fixe{position:fixed;top:14px;right:16px;z-index:900;}
.sx-lanceur-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--bord,rgba(127,127,140,.25));
  background:var(--card,#fff);color:var(--mid,#3C3C40);cursor:pointer;display:grid;place-items:center;
  transition:background .2s,color .2s,box-shadow .2s;}
.sx-lanceur-btn svg{width:18px;height:18px;fill:currentColor;}
.sx-lanceur-btn:hover,.sx-lanceur-btn[aria-expanded="true"]{color:var(--p);box-shadow:0 0 0 3px rgba(var(--p-rgb),.18);}
.sx-lanceur-btn:focus-visible,.sx-lanceur-app:focus-visible{outline:2px solid var(--p);outline-offset:2px;}
.sx-lanceur-panneau{position:absolute;top:46px;right:0;width:340px;max-width:calc(100vw - 24px);
  background:var(--card,#fff);color:var(--txt,#1C1C1E);border:1px solid var(--bord,#E8E8EA);border-radius:16px;
  padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);z-index:901;animation:sxPage .25s var(--sx-ease) both;}
.sx-lanceur-titre{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--mut,#6E6E78);margin:2px 4px 10px;}
.sx-lanceur-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.sx-lanceur-app{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:12px 6px;
  border-radius:12px;text-decoration:none;color:inherit;transition:background .2s,transform .2s;}
.sx-lanceur-app:hover{background:color-mix(in srgb,var(--c) 10%,transparent);transform:translateY(-1px);}
.sx-lanceur-app.est-courant{background:color-mix(in srgb,var(--c) 12%,transparent);}
.sx-lanceur-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);}
.sx-lanceur-ico svg{width:24px;height:24px;}
.sx-lanceur-nom{font-size:12.5px;font-weight:600;}
.sx-lanceur-etat{font-size:10.5px;color:var(--mut,#6E6E78);line-height:1.2;}
@media (max-width:600px){.sx-lanceur-panneau{position:fixed;top:60px;left:12px;right:12px;width:auto;}}
/* illustration au trait, teintée à la couleur du produit (masque CSS) */
.sx-illus{display:block;width:200px;max-width:70%;aspect-ratio:3/2;margin:0 auto 10px;background:var(--p);
  -webkit-mask:var(--illus) center/contain no-repeat;mask:var(--illus) center/contain no-repeat;}
/* ── 5. MOMENTS (célébrations des premières fois) ───────────────────────── */
.sx-moment-fond{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;padding:16px;
  background:rgba(11,13,18,.45);backdrop-filter:blur(4px);animation:sxFondu .25s ease both;}
@keyframes sxFondu{from{opacity:0;}to{opacity:1;}}
.sx-moment{width:100%;max-width:420px;text-align:center;background:var(--card,#fff);color:var(--txt,#1C1C1E);
  border:1px solid rgba(var(--p-rgb),.35);border-radius:20px;padding:30px 26px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 6px rgba(var(--p-rgb),.08);
  animation:sxPop .5s var(--sx-ease) both;}
@keyframes sxPop{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}
.sx-moment-ico{width:58px;height:58px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:26px;
  background:radial-gradient(circle,rgba(var(--p-rgb),.28),rgba(var(--p-rgb),.08));animation:sxPop .6s .1s var(--sx-ease) both;}
.sx-moment h2{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:-.2px;}
.sx-moment p{font-size:14px;color:var(--mut,#6E6E78);margin-bottom:20px;}
.sx-moment-actions{display:flex;flex-direction:column;gap:8px;}
.sx-moment-btn{justify-content:center;width:100%;text-decoration:none;}
@media (prefers-reduced-motion:reduce){.sx-moment,.sx-moment-fond,.sx-moment-ico{animation:none!important;}}
/* ── 6. PRISE EN MAIN GUIDÉE ────────────────────────────────────────────── */
.sx-onb{background:var(--card,#fff);border:1px solid rgba(var(--p-rgb),.35);border-radius:16px;padding:18px 20px;margin:0 0 22px;
  box-shadow:0 10px 30px rgba(var(--p-rgb),.08);animation:sxPage .5s var(--sx-ease) both;}
.sx-onb-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.sx-onb-titre{font-weight:700;font-size:17px;}
.sx-onb-sous{font-size:13px;color:var(--mut,#6E6E78);margin-top:2px;}
.sx-onb-passer{background:none;border:none;color:var(--mut,#6E6E78);font:inherit;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:6px;}
.sx-onb-passer:hover{color:var(--p);}
.sx-onb-barre{height:6px;border-radius:99px;background:rgba(var(--p-rgb),.14);margin:12px 0 10px;overflow:hidden;}
.sx-onb-barre span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--p),var(--p-h));transition:width .8s var(--sx-ease);}
.sx-onb-etapes{list-style:none;display:grid;gap:8px;margin:0;padding:0;}
.sx-onb-etapes li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;transition:background .25s;}
.sx-onb-etapes li.en-cours{background:rgba(var(--p-rgb),.07);}
.sx-onb-etapes li.fait{opacity:.6;}
.sx-onb-etapes li.fait strong{text-decoration:line-through;}
.sx-onb-num{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;
  border:2px solid rgba(var(--p-rgb),.5);color:var(--p);}
.sx-onb-etapes li.fait .sx-onb-num{background:var(--p);border-color:var(--p);color:#fff;}
.sx-onb-txt{flex:1;min-width:0;display:flex;flex-direction:column;}
.sx-onb-txt strong{font-size:14px;}
.sx-onb-txt small{font-size:12.5px;color:var(--mut,#6E6E78);}
.sx-repere{position:absolute;z-index:9990;border-radius:12px;pointer-events:none;
  box-shadow:0 0 0 3px var(--p),0 0 0 9999px rgba(11,13,18,.35);animation:sxFondu .3s ease both;}
.sx-bulle{position:absolute;z-index:9991;max-width:280px;background:var(--p);color:#fff;font-size:13.5px;font-weight:500;
  padding:10px 14px;border-radius:12px;box-shadow:0 12px 30px rgba(var(--p-rgb),.4);animation:sxPop .35s var(--sx-ease) both;}
.sx-bulle::before{content:"";position:absolute;top:-6px;left:22px;width:12px;height:12px;background:inherit;transform:rotate(45deg);}
@media (max-width:600px){.sx-onb-etapes li{flex-wrap:wrap;}.sx-onb-go{margin-left:40px;}}
/* moteur en tête du lanceur */
.sx-lanceur-moteur{display:flex;justify-content:center;margin:2px 0 6px;}
.sx-lanceur-moteur svg{max-width:150px;height:auto;}

/* ── 8. TÂCHES LONGUES (barre de progression) ───────────────────────────── */
.sx-pg{background:var(--card,#fff);border:1px solid rgba(var(--p-rgb),.35);border-radius:14px;padding:14px 16px;margin:0 0 16px;
  box-shadow:0 8px 24px rgba(var(--p-rgb),.08);animation:sxPage .4s var(--sx-ease) both;}
.sx-pg-etapes{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;list-style:none;margin:0 0 10px;padding:0;font-size:14px;}
.sx-pg-etape{display:flex;align-items:center;gap:6px;opacity:.55;}
.sx-pg-etape.fait,.sx-pg-etape.en_cours,.sx-pg-etape.erreur{opacity:1;}
.sx-pg-etape.en_cours{font-weight:700;color:var(--p);}
.sx-pg-etape.erreur{color:#DC2626;font-weight:700;}
.sx-pg-ico{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:12px;
  border:1.5px solid currentColor;}
.sx-pg-etape.fait .sx-pg-ico{background:var(--p);border-color:var(--p);color:#fff;}
.sx-pg-etape.en_cours .sx-pg-ico{border-color:rgba(var(--p-rgb),.3);border-top-color:var(--p);animation:sxTourne 1s linear infinite;}
.sx-pg-fleche{opacity:.4;}
.sx-pg-barre{height:8px;border-radius:99px;background:rgba(var(--p-rgb),.15);overflow:hidden;}
.sx-pg-barre i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--p),var(--p-h));
  transition:width .8s var(--sx-ease);}
.sx-pg-pied{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;margin-top:8px;font-size:13px;opacity:.8;}
.sx-pg-notif{background:none;border:0;color:var(--p);font-weight:600;cursor:pointer;padding:0;text-decoration:underline;}
@keyframes sxTourne{to{transform:rotate(360deg)}}
.sx-toast-fin a{color:#fff;text-decoration:none;}

/* ── 9. MESSAGES D'ERREUR UTILES ────────────────────────────────────────── */
.sx-erreur{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10001;max-width:min(560px,calc(100vw - 32px));
  display:flex;align-items:center;gap:12px;background:#1F2430;color:#fff;padding:12px 14px 12px 16px;border-radius:12px;
  border-left:4px solid #F59E0B;box-shadow:0 12px 32px rgba(0,0,0,.3);font-size:14px;animation:sxCentre .35s var(--sx-ease) both;}
.sx-erreur span{flex:1;}
.sx-erreur-btn{background:var(--p);color:#fff;border:0;border-radius:8px;padding:7px 12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.sx-erreur-x{background:none;border:0;color:#fff;opacity:.6;font-size:20px;cursor:pointer;line-height:1;}
@media (prefers-reduced-motion:reduce){.sx-pg,.sx-erreur{animation:none}.sx-pg-etape.en_cours .sx-pg-ico{animation:none}.sx-pg-barre i{transition:none}}