/* ============================================================================
   NEXOTIK — Mode App premium (portail)
   Activé quand la racine porte .nx-app (standalone / TWA / ?app=1).
   Le chrome « app » (splash, tabbar, FAB) est scopé sous .nx-app pour ne PAS
   toucher le site web classique. Les transitions de page sont globales (douces).
   ============================================================================ */

/* ---- Transitions de page « ça glisse » (Chrome / TWA, MPA) ---------------- */
@view-transition { navigation: auto; }
@keyframes nx-slide-in  { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes nx-slide-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateX(-12px); } }
::view-transition-old(root) { animation: nx-slide-out .22s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: nx-slide-in  .26s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- Barre de progression haute (feedback de navigation) ------------------ */
#nx-progress {
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9999;
  background:linear-gradient(90deg,#ff8a00,#ffb347); box-shadow:0 0 10px rgba(255,138,0,.6);
  opacity:0; transition:width .2s ease, opacity .3s ease; pointer-events:none;
}
#nx-progress.on { opacity:1; }

/* ---- Splash de lancement -------------------------------------------------- */
#nx-splash { display:none; }
.nx-app #nx-splash {
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px;
  background:radial-gradient(120% 120% at 50% 0%, #12203a 0%, #0a0f1c 55%, #06080f 100%);
  transition:opacity .5s ease, visibility .5s ease;
}
#nx-splash.hide { opacity:0; visibility:hidden; }
.nx-splash-badge {
  width:104px; height:104px; border-radius:26px; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 22px 60px -18px rgba(255,138,0,.55);
  animation:nx-badge-pop .7s cubic-bezier(.16,1,.3,1) both, nx-badge-float 3s ease-in-out 1s infinite;
}
.nx-splash-badge img { width:100%; height:100%; object-fit:cover; display:block; }
@keyframes nx-badge-pop   { from { opacity:0; transform:scale(.7) translateY(10px); } to { opacity:1; transform:none; } }
@keyframes nx-badge-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.nx-splash-word { font-weight:800; letter-spacing:.02em; font-size:26px; color:#fff;
  animation:nx-fade-up .6s ease .18s both; }
.nx-splash-word b { color:#ff8a00; }
.nx-splash-sub { font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#8ea0c0;
  margin-top:-16px; animation:nx-fade-up .6s ease .28s both; }
@keyframes nx-fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.nx-splash-bar { width:132px; height:4px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.nx-splash-bar::after { content:''; display:block; height:100%; width:40%; border-radius:999px;
  background:linear-gradient(90deg,#ff8a00,#ffb347); animation:nx-loader 1.1s ease-in-out infinite; }
@keyframes nx-loader { 0% { margin-left:-40%; } 100% { margin-left:100%; } }

/* ---- Barre d'onglets basse (app) ----------------------------------------- */
.nx-tabbar { display:none; }
.nx-app .nx-tabbar {
  position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:60;
  display:flex; justify-content:space-around; align-items:stretch;
  padding:7px 8px; border-radius:22px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(0,0,0,.06); box-shadow:0 14px 34px -10px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.06);
}
.nx-tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:6px 4px; text-decoration:none; color:#8b8f99; font-size:10.5px; font-weight:700;
  border-radius:12px; transition:color .18s, background .18s; -webkit-tap-highlight-color:transparent; }
.nx-tab svg { width:22px; height:22px; }
.nx-tab.active { color:#ff7a2f; }
.nx-tab.active svg { filter:drop-shadow(0 3px 8px rgba(255,122,47,.4)); }
.nx-tab:active { background:rgba(255,138,0,.10); transform:scale(.94); }

/* ---- Bouton d'assistance flottant (FAB) ---------------------------------- */
.nx-fab { display:none; }
.nx-app .nx-fab {
  position:fixed; right:18px; bottom:calc(90px + env(safe-area-inset-bottom)); z-index:61;
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#25D366,#1ebe5a); color:#fff;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.7); animation:nx-fab-in .5s cubic-bezier(.16,1,.3,1) .6s both; }
.nx-fab svg { width:28px; height:28px; }
.nx-fab::after { content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5); animation:nx-fab-pulse 2.4s ease-out infinite; }
@keyframes nx-fab-in { from { opacity:0; transform:scale(.5) translateY(12px); } to { opacity:1; transform:none; } }
@keyframes nx-fab-pulse { 0% { box-shadow:0 0 0 0 rgba(37,211,102,.45); } 70%,100% { box-shadow:0 0 0 16px rgba(37,211,102,0); } }

/* Feuille d'assistance (petit menu au-dessus du FAB) */
.nx-help-sheet { position:fixed; right:18px; bottom:calc(156px + env(safe-area-inset-bottom)); z-index:62;
  width:238px; background:#fff; border-radius:18px; padding:8px; opacity:0; visibility:hidden;
  transform:translateY(10px) scale(.96); transform-origin:bottom right;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.05);
  transition:opacity .2s ease, transform .2s cubic-bezier(.16,1,.3,1), visibility .2s; }
.nx-help-sheet.open { opacity:1; visibility:visible; transform:none; }
.nx-help-sheet a { display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:#0a0a0a; font-weight:700; font-size:13.5px; }
.nx-help-sheet a:active { background:rgba(0,0,0,.05); }
.nx-help-sheet a svg { width:19px; height:19px; flex:none; color:#ff7a2f; }
.nx-help-sheet .nx-help-title { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#9a9da6; font-weight:800; padding:8px 12px 4px; }

/* Espace bas pour ne pas masquer le contenu sous la tabbar flottante */
.nx-app .nx-main { padding-bottom:calc(92px + env(safe-area-inset-bottom)); }

/* Menu latéral OUVERT : masquer barre du bas + assistance (sinon elles bloquent
   la déconnexion en bas du menu). JS (body.nx-drawer-open) + CSS :has en secours. */
body.nx-drawer-open .nx-tabbar,
body.nx-drawer-open .nx-fab,
body.nx-drawer-open .nx-help-sheet,
.nx-app:has(#nx-sidebar.open) .nx-tabbar,
.nx-app:has(#nx-sidebar.open) .nx-fab,
.nx-app:has(#nx-sidebar.open) .nx-help-sheet { display:none !important; }

/* Éditeur couleurs/texte : totalement masqué dans l'app (reste dispo sur le web). */
.nx-app #nxse-fab, .nx-app #nxse-panel,
.nx-app #nxte-fab, .nx-app #nxte-bar { display:none !important; }

/* Le contenu principal anime son entrée (navigation par swap) */
.nx-app main.nx-content { will-change:opacity, transform; }

/* ---- Skeletons (chargements élégants) ------------------------------------ */
.nx-skel { position:relative; overflow:hidden; background:rgba(0,0,0,.06); border-radius:10px; }
.nx-skel::after { content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%); animation:nx-shimmer 1.3s infinite; }
@keyframes nx-shimmer { 100% { transform:translateX(100%); } }