/* ============================================================
   THEME PARTAGÉ — Phab Protect V2
   Palette violette (logo/bannière) + animations façon Movix
   Inclus sur toutes les pages via <link rel="stylesheet" href="theme.css">
   ============================================================ */

/* Fondu d'entrée générique */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Entrée de carte (dashboard / admin) */
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Rotation de la bordure animée */
@keyframes spinBorder { to { transform: rotate(360deg); } }

/* Carte à bordure animée au survol (accent violet) */
.animated-border-card {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
}
.animated-border-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent, var(--accent3), var(--accent), transparent 35%);
  opacity: 0;
  transition: opacity 0.3s ease;
  animation: spinBorder 5s linear infinite;
  animation-play-state: paused; /* ne tourne que quand elle est visible (survol) */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}
.animated-border-card:hover::before {
  opacity: 1;
  animation-play-state: running;
}

/* Glow radial réutilisable, à placer en haut d'un conteneur position:relative */
.theme-glow {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 140vw;
  height: 480px;
  background: radial-gradient(ellipse at center, rgba(124,58,237,0.28), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}

/* Petit logo rond utilisé dans les navbars/sidebars à la place de l'emoji bouclier */
.brand-logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ============================================================
   MICRO-INTERACTIONS — cohérentes sur tout le site
   ============================================================ */

/* Transition douce par défaut sur tout élément interactif courant,
   sauf si une classe définit déjà sa propre transition plus précise */
a, button, .nav-item, .tab-btn, .duration-option, .product-card,
.feature-card, .cmd-cat, .social-pill, .payment-pill, .review-item,
.faq-item, .stat-card, .card, tr, .btn, .price-btn, .discord-link,
.form-input, .price-btn, .cmd-pill {
  transition: transform 0.18s cubic-bezier(.2,.8,.2,1), box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Boutons : léger effet d'appui + lift au survol */
button:not(:disabled):hover, .btn:not(:disabled):hover,
.price-btn:hover, .discord-link:hover, .btn-submit:not(:disabled):hover {
  transform: translateY(-1px);
}
button:not(:disabled):active, .btn:not(:disabled):active,
.price-btn:active, .discord-link:active, .btn-submit:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

/* Items de navigation (sidebar admin/dashboard) : glissement au survol */
.nav-item { position: relative; overflow: hidden; }
.nav-item:hover { transform: translateX(2px); }
.nav-item.active { position: relative; }
.nav-item.active::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 3px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow: 0 0 10px var(--accent);
}

/* Lignes de tableau : surbrillance douce */
tbody tr, table tr:not(:first-child) {
  transition: background-color 0.15s ease;
}
tbody tr:hover, table tr:hover td {
  background-color: rgba(255,255,255,0.025);
}

/* Icônes qui réagissent au survol de leur carte parente */
.feature-card:hover .feature-icon,
.stat-card:hover .stat-card-icon,
.cmd-cat:hover .cmd-cat-icon {
  transform: scale(1.08);
}
.feature-icon, .stat-card-icon, .cmd-cat-icon { transition: transform 0.2s ease; }

/* Focus clavier visible et cohérent partout (accessibilité) */
a:focus-visible, button:focus-visible, .form-input:focus-visible,
.nav-item:focus-visible, .duration-option:focus-visible, select:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible:not(.content) {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}
.switch input:focus-visible + .slider { outline: 2px solid var(--accent2); outline-offset: 2px; }
.skip-link { position: fixed; left: 12px; top: -64px; z-index: 10000; background: var(--accent, #8b3cf7); color: #fff; padding: 10px 14px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: 12px; }
.content:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  a, button, .nav-item, .tab-btn, .duration-option, .product-card,
  .feature-card, .cmd-cat, .social-pill, .payment-pill, .review-item,
  .faq-item, .stat-card, .card, tr, .btn, .price-btn, .discord-link,
  .form-input, .cmd-pill {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animated-border-card::before { animation: none !important; }
  .fade-in-up { animation: none !important; }
}