/* =============================================================================
   static/common/css/base.css
   Migré depuis public/css/base/custom.css — partie PARTAGÉE (admin + public).
   Généré par split_css.py le 2026-08-17. Ne pas éditer manuellement sans mettre
   à jour le script source si une re-migration est nécessaire.
   ============================================================================= */

/* =============================================================================
   WebTV Admin — Design System Complet
   Identité "régie de diffusion" : marine profond, accent signal indigo→cyan,
   données en monospace. Construit sur Bootstrap 5 (variables + surcharges).
   ============================================================================= */

/* === VARIABLES CSS === */
:root {
  /* --- Palette de base --- */
  --wtv-bg:          #090c16;
  --wtv-bg-soft:     #0c1020;
  --wtv-panel:       #10142a;
  --wtv-card:        #131834;
  --wtv-card-hover:  #171d3d;
  --wtv-border:      rgba(148, 163, 196, .12);
  --wtv-border-strong: rgba(148, 163, 196, .22);

  --wtv-text:        #eef0fa;
  --wtv-text-soft:   #a6adcf;
  --wtv-text-mute:   #6b7299;
  --wtv-text-inverse: #fff;

  --wtv-bg-dark:     #000;

  /* --- Accent "signal" (identité de marque) --- */
  --wtv-accent-1:    #2563eb;
  --wtv-accent-2:    #38bdf8;
  --wtv-gradient:    linear-gradient(135deg, var(--wtv-accent-1) 0%, var(--wtv-accent-2) 100%);

  --wtv-live:        #fb3d5e;
  --wtv-success:     #22c55e;
  --wtv-warning:     #f7a531;
  --wtv-info:        #22d3ee;
  --wtv-danger:      #fb3d5e;
  --wtv-danger-hover: #e0234a;
  --wtv-danger-soft: rgba(251, 61, 94, .12);
  --wtv-warning-soft: rgba(247, 165, 49, .12);

  /* --- Rayons / ombres / transitions --- */
  --wtv-radius-sm:   .5rem;
  --wtv-radius:      .75rem;
  --wtv-radius-lg:   1rem;
  --wtv-shadow-sm:   0 1px 2px rgba(2, 4, 12, .4);
  --wtv-shadow:      0 8px 24px -8px rgba(2, 4, 12, .55);
  --wtv-shadow-accent: 0 8px 24px -8px rgba(106, 92, 248, .45);
  --wtv-ease:        cubic-bezier(.4, 0, .2, 1);

  /* --- Font families --- */
  --wtv-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wtv-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wtv-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --wtv-font-mono:    'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;

  /* --- Extra gradients --- */
  --wtv-gradient-card:      linear-gradient(160deg, var(--wtv-card) 0%, var(--wtv-panel) 100%);
  --wtv-gradient-red-blue: linear-gradient(135deg, var(--wtv-live) 0%, var(--wtv-info) 100%);
  --wtv-gradient-btn-red:  linear-gradient(135deg, var(--wtv-live) 0%, #e0234a 100%);

  /* --- Extra radii / shadows / transitions --- */
  --wtv-radius-full:       999px;
  --wtv-shadow-lg:         0 12px 32px -8px rgba(2, 4, 12, .6);
  --wtv-shadow-info:       0 8px 24px -8px rgba(34, 211, 238, .45);
  --wtv-transition-fast:   .18s cubic-bezier(.4, 0, .2, 1);
  --wtv-transition-base:   .25s cubic-bezier(.4, 0, .2, 1);
  --wtv-z-toast:           1080;

  /* --- Surcharges Bootstrap --- */
  --bs-body-bg:      var(--wtv-bg);
  --bs-body-color:   var(--wtv-text);
  --bs-border-color: var(--wtv-border);

  --bs-primary:      var(--wtv-accent-1);
  --bs-primary-rgb:  106, 92, 248;
  --bs-secondary:    #7c86b3;
  --bs-secondary-rgb: 124, 134, 179;
  --bs-success:      var(--wtv-success);
  --bs-success-rgb:  34, 197, 94;
  --bs-info:         var(--wtv-info);
  --bs-info-rgb:     34, 211, 238;
  --bs-warning:      var(--wtv-warning);
  --bs-warning-rgb:  247, 165, 49;
  --bs-danger:       var(--wtv-danger);
  --bs-danger-rgb:   251, 61, 94;
  --bs-dark:         var(--wtv-panel);
  --bs-dark-rgb:     16, 20, 42;

  --bs-link-color:   var(--wtv-accent-2);
  --bs-link-hover-color: #5fe6ff;
}


/* === RESET & BASE === */
::selection { 
  background: rgba(106, 92, 248, .35); 
  color: #fff; 
}

html, body {
  margin: 0;
  padding: 0;
}


body {
  font-family: var(--wtv-font-body);
  font-size: 14px;
  background:
    radial-gradient(1100px 520px at 100% -10%, rgba(106, 92, 248, .10), transparent 60%),
    radial-gradient(900px 480px at -10% 0%, rgba(34, 211, 238, .06), transparent 55%),
    var(--wtv-bg);
  background-attachment: fixed;
  letter-spacing: .005em;
  color: var(--wtv-text);
}

a { 
  text-decoration: none; 
  color: inherit;
  transition: color .2s var(--wtv-ease);
}

a:hover {
  color: var(--wtv-accent-2);
}

/* === SIGNAL MARK — identité visuelle === */
.signal-mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.signal-mark span {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--wtv-gradient);
  animation: signal-bounce 1.6s var(--wtv-ease) infinite;
}

.signal-mark span:nth-child(1) { height: 40%; animation-delay: -1.1s; }
.signal-mark span:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.signal-mark span:nth-child(3) { height: 65%; animation-delay: -0.3s; }
.signal-mark span:nth-child(4) { height: 80%; animation-delay: 0s; }

@keyframes signal-bounce {
  0%, 100% { transform: scaleY(.45); opacity: .75; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

.brand-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--wtv-radius-sm);
  background: rgba(106, 92, 248, .12);
  border: 1px solid rgba(106, 92, 248, .25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-loader {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.signal-loader span {
  display: block;
  width: 4px;
  border-radius: 2px;
  background: var(--wtv-accent-1);
  animation: signal-bounce 1s var(--wtv-ease) infinite;
}

.signal-loader span:nth-child(1) { height: 35%; animation-delay: -0.9s; }
.signal-loader span:nth-child(2) { height: 100%; animation-delay: -0.5s; }
.signal-loader span:nth-child(3) { height: 65%; animation-delay: -0.2s; }

.live-dot {
  width: 8px; 
  height: 8px; 
  border-radius: 50%;
  background: var(--wtv-success);
  box-shadow: 0 0 0 3px rgba(34,197,94,.18);
  display: inline-block;
}

.live-dot.is-live { 
  background: var(--wtv-live); 
  box-shadow: 0 0 0 3px rgba(251,61,94,.18); 
  animation: live-pulse 1.6s ease-in-out infinite; 
}

/* === BUTTONS === */
.btn { 
  font-weight: 600; 
  letter-spacing: .01em; 
  border-radius: var(--wtv-radius-sm); 
  transition: all .2s var(--wtv-ease);
}

.btn-primary { 
  background: var(--wtv-gradient); 
  border: none; 
  box-shadow: 0 4px 14px -4px rgba(106,92,248,.55); 
}

.btn-primary:hover, .btn-primary:focus { 
  background: linear-gradient(135deg, #5949f6, #17c2e0); 
  box-shadow: 0 6px 18px -4px rgba(106,92,248,.65); 
  transform: translateY(-1px);
}

.btn-outline-secondary { 
  border-color: var(--wtv-border-strong); 
  color: var(--wtv-text-soft); 
}

.btn-outline-secondary:hover { 
  background: rgba(255,255,255,.06); 
  color: var(--wtv-text); 
  border-color: var(--wtv-border-strong); 
}

.btn-dark { 
  background: rgba(255,255,255,.04); 
  border: 1px solid var(--wtv-border); 
}

.btn-dark:hover { 
  background: rgba(255,255,255,.08); 
}

/* === TABLES === */
.table { 
  --bs-table-bg: transparent; 
  --bs-table-color: var(--wtv-text); 
  --bs-table-border-color: var(--wtv-border); 
}

.table > thead { 
  --bs-table-color: var(--wtv-text-mute); 
}

.table thead th { 
  font-size: .7rem; 
  text-transform: uppercase; 
  letter-spacing: .08em; 
  font-weight: 700; 
  border-bottom-width: 1px; 
}

.table-hover > tbody > tr:hover > * { 
  --bs-table-accent-bg: rgba(255,255,255,.03); 
}

/* === FORMS === */
.form-control, .form-select {
  background: var(--wtv-bg-soft);
  border: 1px solid var(--wtv-border);
  color: var(--wtv-text);
  transition: all .2s var(--wtv-ease);
}

.form-control:focus, .form-select:focus {
  background: var(--wtv-bg-soft);
  border-color: var(--wtv-accent-1);
  color: var(--wtv-text);
  box-shadow: 0 0 0 .2rem rgba(106,92,248,.2);
}

.form-control::placeholder { 
  color: var(--wtv-text-mute); 
}

.form-label { 
  font-size: .8rem; 
  font-weight: 600; 
  color: var(--wtv-text-soft); 
}

/* === BADGES === */
.badge { 
  font-weight: 600; 
  letter-spacing: .02em; 
  padding: .4em .65em; 
}

/* === DROPDOWNS === */
.dropdown-menu { 
  background: var(--wtv-panel); 
  border: 1px solid var(--wtv-border); 
  box-shadow: var(--wtv-shadow); 
}

.dropdown-item { 
  color: var(--wtv-text-soft); 
}

.dropdown-item:hover, .dropdown-item:focus { 
  background: rgba(255,255,255,.06); 
  color: var(--wtv-text); 
}

.dropdown-divider { 
  border-color: var(--wtv-border); 
}

/* === TOASTS === */
.toast { 
  background: var(--wtv-panel); 
  border: 1px solid var(--wtv-border); 
  box-shadow: var(--wtv-shadow); 
}

/* === MODALS === */
.modal-content {
  background: var(--wtv-card);
  border: 1px solid var(--wtv-border);
  border-radius: var(--wtv-radius-lg);
  box-shadow: var(--wtv-shadow);
}

.modal-header {
  border-bottom: 1px solid var(--wtv-border);
}

.modal-footer {
  border-top: 1px solid var(--wtv-border);
}

/* === UTILITAIRES === */
.vr { 
  opacity: .15; 
}

.min-w-0 { 
  min-width: 0; 
}

.text-mute { 
  color: var(--wtv-text-mute) !important; 
}

.text-soft { 
  color: var(--wtv-text-soft) !important; 
}

/* === ANIMATIONS === */
@keyframes fadeIn { 
  from { opacity: 0; } 
  to { opacity: 1; } 
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in { 
  animation: fadeInUp .35s var(--wtv-ease); 
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-left {
  animation: slideInLeft .4s var(--wtv-ease);
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.scale-in {
  animation: scaleIn .3s var(--wtv-ease);
}

/* Stagger animation pour les listes */
.stagger-animation > * {
  opacity: 0;
  animation: fadeInUp .4s var(--wtv-ease) forwards;
}

.stagger-animation > *:nth-child(1) { animation-delay: .05s; }
.stagger-animation > *:nth-child(2) { animation-delay: .10s; }
.stagger-animation > *:nth-child(3) { animation-delay: .15s; }
.stagger-animation > *:nth-child(4) { animation-delay: .20s; }
.stagger-animation > *:nth-child(5) { animation-delay: .25s; }
.stagger-animation > *:nth-child(6) { animation-delay: .30s; }
.stagger-animation > *:nth-child(7) { animation-delay: .35s; }
.stagger-animation > *:nth-child(8) { animation-delay: .40s; }