/* =========================================================
   SuiviClients — Animations (Phase B). Dépend de tokens.css.
   ========================================================= */

/* Fond animé */
.bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.5}
body[data-strong="1"] .bgfx{opacity:1}
body[data-strong="1"]{background:radial-gradient(130% 130% at 50% 0%, #16201f 0%, #0b0f0f 70%)}
.wrap{position:relative;z-index:1}
.appbar{position:relative;z-index:2}

/* Transition de page */
.page-enter{animation:pageEnter .45s var(--ease)}
@keyframes pageEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Révélation en cascade */
.has-reveal{opacity:0;transform:translateY(16px)}
.has-reveal.in{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* Tilt 3D (le transform est posé par ui.js) */
.tiltable{transition:transform .25s var(--ease),box-shadow .25s var(--ease);transform-style:preserve-3d;will-change:transform}

/* Pulse « Urgente » */
.prio-urgent{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--brand-red)}
.prio-urgent::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand-red);animation:urgent 1.7s infinite}
@keyframes urgent{0%{box-shadow:0 0 0 0 rgba(224,0,16,.5)}70%{box-shadow:0 0 0 9px rgba(224,0,16,0)}100%{box-shadow:0 0 0 0 rgba(224,0,16,0)}}

/* Toasts */
.toast-wrap{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:80}
.toast{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-left:4px solid var(--c);border-radius:var(--r-md);padding:13px 16px;box-shadow:var(--shadow-lg);
  min-width:260px;max-width:360px;font-weight:500;animation:toastIn .4s cubic-bezier(.34,1.56,.64,1)}
.toast.out{animation:toastOut .36s var(--ease) forwards}
.toast .tk{width:24px;height:24px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;font-size:.8rem;flex-shrink:0}
@keyframes toastIn{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(24px) scale(.96)}}

/* Bandeau inactivité */
.idle-warn{position:fixed;left:50%;top:24px;transform:translateX(-50%) translateY(-160%);z-index:90;
  background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--brand-red);
  border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:14px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.idle-warn.show{transform:translateX(-50%) translateY(0)}
.idle-warn .cd{font-family:var(--font-mono);font-weight:700;color:var(--brand-red)}

/* Accueil après login */
.welcome{position:fixed;inset:0;z-index:120;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(closest-side, rgba(11,15,15,.6), transparent 75%);transition:opacity .5s var(--ease)}
.welcome.out{opacity:0}
.welcome .wbox{text-align:center}
.welcome .wbox>div{font-family:var(--font-display);color:#F4F7F6;font-weight:700;
  font-size:clamp(1.4rem,4vw,2rem);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.welcome .wname{font-weight:800;color:var(--brand-red-bright);font-size:clamp(2rem,7vw,3.4rem);letter-spacing:-.03em}
.reveal-up{opacity:0;transform:translateY(14px);filter:blur(4px);animation:revealUp .7s var(--ease) forwards}
.reveal-up.d2{animation-delay:.16s}
@keyframes revealUp{to{opacity:1;transform:none;filter:blur(0)}}

/* Notice login après déconnexion inactivité */
.idle-notice{max-width:400px;margin:0 auto var(--s-4);text-align:center;font-size:.9rem;
  background:color-mix(in srgb,var(--brand-red) 10%,var(--surface));color:var(--text);
  border:1px solid color-mix(in srgb,var(--brand-red) 30%,transparent);border-radius:var(--r-sm);
  padding:12px 16px;animation:pageEnter .5s var(--ease)}

/* Entrée des alertes/flash */
.alert{animation:pageEnter .4s var(--ease)}

/* Fond 3D (WebGL) */
#bg3d{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg3d-veil{position:fixed;inset:0;z-index:0;pointer-events:none}
body.has-bg3d #bg3d-veil{background:linear-gradient(rgba(11,15,15,.30),rgba(11,15,15,.62))}
body.has-bg3d .bgfx{display:none}
/* Verre dépoli pour garder le contenu lisible par-dessus le 3D */
body.has-bg3d .appbar,
body.has-bg3d .card,
body.has-bg3d .stat-card,
body.has-bg3d .panel{
  background:color-mix(in srgb,var(--surface) 76%,transparent);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}

@media (prefers-reduced-motion:reduce){
  .page-enter,.toast,.idle-warn,.reveal-up,.alert,.idle-notice,.prio-urgent::before{animation:none!important}
  .has-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .tiltable{transition:none!important}
  .welcome{display:none}
}