/* ========================================================================== */
  /* 🐺 WOLF-HQ — THÈME SOMBRE PREMIUM : GRAPHITE / LOUP                       */
  /* Remplace l'ancien theme-blue.css (bleu cyber). Tout ce fichier ne         */
  /* s'applique QU'au thème sombre (body sans .light-theme) — le thème clair  */
  /* reste géré par style.css (body.light-theme), sans interférence.          */
  /* ========================================================================== */

  /* 🌫️ ARRIÈRE-PLAN DÉGRADÉ GRAPHITE (sans photo, légère vignette) */
  body:not(.light-theme) {
    background-color: #0d0e10;
    background-image:
      radial-gradient(circle at 50% 0%, rgba(232, 99, 28, 0.16) 0%, transparent 55%),
      linear-gradient(160deg, #16171a 0%, #0e0f11 55%, #0a0b0c 100%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #f5f5f4;
  }

  /* 🪨 REDÉFINITION DES VARIABLES GRAPHITE PREMIUM (thème sombre uniquement) */
  body:not(.light-theme) {
    --bg-dark: #0d0e10;
    --card-bg: rgba(28, 29, 33, 0.78);          /* Effet verre dépoli / Glassmorphism */
    --card-sub-bg: rgba(40, 41, 46, 0.68);
    --input-bg: rgba(20, 21, 24, 0.85);
    --border-color: rgba(255, 122, 41, 0.18);    /* Bordure orange loup, discrète */
    --input-border: rgba(255, 122, 41, 0.32);

    --gold: #ff7a29;
    --gold-bright: #ff8f4d;
    --accent-blue: #3b82c4;
    --accent-gold: #ffb27a;                     /* Pêche clair : réservé aux éléments spéciaux (VIP, cibles...) */
    --text: #f8f8f7;
    --text-sub: #a8a8ad;
    --nav-bg: rgba(11, 12, 14, 0.92);
    --header-bg: linear-gradient(180deg, rgba(28, 29, 33, 0.95) 0%, rgba(13, 14, 16, 0.92) 100%);
    --sidebar-bg: rgba(15, 16, 18, 0.92);
    --topbar-bg: rgba(13, 14, 16, 0.86);

    /* 🔷 Accent cyan électrique du Centre de Commandement Analytique — plus vif qu'en thème
       clair, pour ressortir sur le fond graphite sombre premium. */
    --cyan: #22d3ee;
  }

  /* ✨ EFFET DE VERRE SUR LES CARTES (thème sombre uniquement) */
  body:not(.light-theme) .card,
  body:not(.light-theme) .modal-content,
  body:not(.light-theme) .custom-accordion,
  body:not(.light-theme) .wolf-sidebar,
  body:not(.light-theme) .wolf-topbar {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 122, 41, 0.16);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.55), inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  }

  /* 🟠 HEADER PREMIUM GRAPHITE (thème sombre uniquement) */
  body:not(.light-theme) .header {
    border-bottom: 2px solid rgba(255, 122, 41, 0.55);
    box-shadow: 0 4px 24px rgba(232, 99, 28, 0.22);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
  }

  /* 🔶 BOUTONS ACCENTUÉS EN GLOW ORANGE (thème sombre uniquement) */
  body:not(.light-theme) .btn-gold {
    background: linear-gradient(135deg, #c94f0f 0%, #ff8f4d 100%);
    color: #14100a;
    font-weight: 800;
    text-shadow: none;
    box-shadow: 0 4px 15px rgba(255, 122, 41, 0.35);
  }

  body:not(.light-theme) .btn-gold:hover {
    box-shadow: 0 0 22px rgba(255, 122, 41, 0.6);
  }

  /* 📱 BARRE DE NAVIGATION EN BAS (thème sombre uniquement) */
  body:not(.light-theme) .nav-bar {
    background: rgba(13, 14, 16, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 122, 41, 0.2);
  }

  body:not(.light-theme) .nav-item.active {
    color: #ff8f4d;
    background-color: rgba(212, 175, 55, 0.08); /* même fond léger que .nav-item:hover (style.css), sur toute la case */
    text-shadow: 0 0 10px rgba(255, 122, 41, 0.45);
  }

  /* 🐺 Coquille desktop (sidebar / topbar) — voile graphite + liseré orange très discret */
  body:not(.light-theme) .wolf-sidebar { background: var(--sidebar-bg); }
  body:not(.light-theme) .wolf-topbar { background: var(--topbar-bg); }
  body:not(.light-theme) .wolf-sidebar-link.active {
    background: rgba(255, 122, 41, 0.14);
    box-shadow: inset 3px 0 0 0 #ff7a29;
  }

  /* 🎯 CENTRE DE COMMANDEMENT ANALYTIQUE — accents cyan électrique "glow" (thème sombre premium
     uniquement ; la version thème clair reste sur le style plat de style.css). */
  body:not(.light-theme) .ca-classement-row.ca-ligne-moi {
    border-left-color: var(--cyan);
    background: linear-gradient(90deg, rgba(34, 211, 238, 0.14) 0%, rgba(255, 122, 41, 0.07) 100%);
    box-shadow: 0 0 18px rgba(34, 211, 238, 0.18), inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  }
  body:not(.light-theme) .ca-badge-moi {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--gold-bright) 100%);
    color: #0a0b0c;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
  }
  body:not(.light-theme) .ca-mon-profil-card {
    border-color: rgba(34, 211, 238, 0.35) !important;
    box-shadow: 0 4px 18px rgba(34, 211, 238, 0.14), inset 0 1px 1px 0 rgba(255, 255, 255, 0.05);
  }
  body:not(.light-theme) .ca-chip.active {
    background: linear-gradient(135deg, var(--cyan) 0%, #38bdf8 100%);
    color: #0a0b0c;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
  }
  /* En-tête HUD + segmented control : légère lueur cyan additionnelle sur fond graphite sombre,
     cohérente avec le glassmorphism déjà appliqué aux .card (voir plus haut dans ce fichier). */
  body:not(.light-theme) .ca-hero-card {
    background-image: radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.10) 0%, transparent 55%);
  }
  body:not(.light-theme) .ca-hero-icon {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(255, 122, 41, 0.22));
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.3), inset 0 1px 1px 0 rgba(255, 255, 255, 0.08);
  }
  body:not(.light-theme) .ca-tab-group { border-color: rgba(34, 211, 238, 0.16); }
  body:not(.light-theme) .ca-classement-row:hover {
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.10);
  }

  /* 🎮 ROSTER MEMBRES (page Membres) — effet de verre premium cohérent avec le reste de l'app
     (voir .card/.modal-content plus haut dans ce fichier). Bloc séparé plutôt qu'un ajout à la
     liste .card/.modal-content/... : .roster-card gère elle-même sa bordure (accent de rang
     R4/R5 via border-left, voir style.css), qu'un `border` raccourci ici écraserait. */
  body:not(.light-theme) .roster-card {
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.45), inset 0 1px 1px 0 rgba(255, 255, 255, 0.04);
  }

  /* 🕐 HORLOGES ACCUEIL — lueur cyan/orange "premium" en thème sombre uniquement (structure de
     base cross-thème dans style.css). Même principe que .ca-hero-card ci-dessus. */
  body:not(.light-theme) .whq-horloges-card {
    background-image: radial-gradient(circle at 15% 0%, rgba(34, 211, 238, 0.10) 0%, transparent 55%),
                       radial-gradient(circle at 85% 100%, rgba(255, 122, 41, 0.08) 0%, transparent 55%);
  }
  body:not(.light-theme) .whq-horloge-digits { text-shadow: 0 0 14px currentColor; }
  body:not(.light-theme) .whq-horloge-serveur .whq-horloge-digits { text-shadow: 0 0 16px rgba(255, 143, 77, 0.55); }
  body:not(.light-theme) .whq-horloge-moi .whq-horloge-digits { text-shadow: 0 0 16px rgba(34, 211, 238, 0.55); }