/* ====================================================================
   Thème Nexion Hosting — CyberPanel
   --------------------------------------------------------------------
   Reprend les jetons de nexionstudio.fr, déjà appliqués au panel
   Pterodactyl, pour que les deux panels et le site se lisent comme un
   seul produit.

     fond       #0c1015     surface   #171e28
     texte      #e9eef5     atténué   #93a1b5
     accent     #4ade80     accent 2  #22d3ee

   Méthode : CyberPanel pilote son apparence par des jetons CSS
   (cyberpanel-ui.css → cyberpanel-tokens.css → cyberpanel-dark.css).
   On redéfinit ces jetons plutôt que de réécrire les composants : le
   thème survit aux mises à jour du panel et ne touche pas au balisage.

   Règle de prudence, identique à celle du panel Pterodactyl : on ne
   modifie que l'apparence. Aucun sélecteur ici ne masque, ne déplace
   hors flux ni ne désactive un élément interactif.

   Le dégradé de marque s'exprime par des filets et des halos, jamais
   par du texte en dégradé : sur un titre, l'effet nuit à la lisibilité.
   ==================================================================== */

/* ------------------------------------------------------------------ *
 * Polices — hébergées localement (aucune requête vers un tiers, donc
 * aucune fuite d'adresse IP et un rendu qui ne dépend d'aucun service
 * externe). Fichiers repris à l'identique du panel Pterodactyl.
 * ------------------------------------------------------------------ */
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400;
  font-stretch: 100%; font-display: swap;
  src: url(fonts/nx-046090ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 400;
  font-stretch: 100%; font-display: swap;
  src: url(fonts/nx-284bb947.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 500;
  font-stretch: 100%; font-display: swap;
  src: url(fonts/nx-046090ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 600;
  font-stretch: 100%; font-display: swap;
  src: url(fonts/nx-046090ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans'; font-style: normal; font-weight: 700;
  font-stretch: 100%; font-display: swap;
  src: url(fonts/nx-046090ca.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url(fonts/nx-b76914c2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 500;
  font-display: swap;
  src: url(fonts/nx-d8c865bf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url(fonts/nx-b76914c2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url(fonts/nx-d8c865bf.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * Jetons Nexion
 * ------------------------------------------------------------------ */
:root {
    --nx-bg: #0c1015;
    --nx-bg-deep: #070a0e;
    --nx-surface: #171e28;
    --nx-surface-high: #1e2733;
    --nx-text: #e9eef5;
    --nx-text-muted: #93a1b5;
    --nx-accent: #4ade80;
    --nx-accent-strong: #22c55e;
    --nx-accent-soft: #22d3ee;
    --nx-accent-glow: rgba(74, 222, 128, 0.42);
    --nx-gradient: linear-gradient(135deg, #4ade80, #22d3ee);
    --nx-border: rgba(233, 238, 245, 0.08);
    --nx-border-strong: rgba(233, 238, 245, 0.16);
    --nx-radius-sm: 10px;
    --nx-radius: 14px;
    --nx-radius-lg: 18px;
    --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --nx-transition: 280ms var(--nx-ease);
    --nx-transition-fast: 160ms ease;
    --nx-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.85);
}

/* ------------------------------------------------------------------ *
 * Remappage des jetons CyberPanel.
 *
 * Nexion est le thème unique : la palette est posée sur :root ET sur
 * les deux valeurs de [data-theme], pour qu'aucun état ne puisse
 * retomber sur l'ancien thème clair — y compris avant que le script
 * d'initialisation n'ait posé l'attribut.
 * ------------------------------------------------------------------ */
:root,
[data-theme="dark"],
[data-theme="light"] {
    /* --- fonds et texte --- */
    --bg-primary: #0c1015;
    --bg-secondary: #171e28;
    --bg-sidebar: #0a0e13;
    --bg-sidebar-item: transparent;
    --bg-hover: #1e2733;
    --bg-muted: #131a23;
    --bg-code: #070a0e;
    --bg-tertiary: #131a23;
    --bg-light: #171e28;
    --bg-card: #171e28;
    --bg-active: #1e2733;
    --bg-gradient: #171e28;
    --bg-hover-alt: #1e2733;
    --bg-hover-light: #1e2733;
    --bg-info: #171e28;
    --bg-primary-light: #1e2733;
    --hover-light: #1e2733;
    --card-bg: #171e28;

    --text-primary: #e9eef5;
    --text-secondary: #93a1b5;
    --text-heading: #f6f9fc;

    /* --- bordures --- */
    --border-color: rgba(233, 238, 245, 0.08);
    --border-soft: rgba(233, 238, 245, 0.06);
    --border-light: rgba(233, 238, 245, 0.08);
    --border-primary: rgba(233, 238, 245, 0.08);
    --border-secondary: rgba(233, 238, 245, 0.08);
    --border-hover: rgba(74, 222, 128, 0.35);
    --border-color-light: rgba(233, 238, 245, 0.08);
    --shadow-color: rgba(0, 0, 0, 0.55);

    /* --- accent : le violet d'origine devient le vert Nexion --- *
     * Le vert est une couleur claire : le texte posé dessus doit être
     * sombre, sinon il devient illisible (l'original prévoyait du blanc
     * sur violet).                                                    */
    --accent-color: #4ade80;
    --accent-hover: #22c55e;
    --accent-primary: #4ade80;
    --accent-dark: #16a34a;
    --accent-light: rgba(74, 222, 128, 0.14);
    --accent-bg: rgba(74, 222, 128, 0.12);
    --accent-border: rgba(74, 222, 128, 0.32);
    --primary-color: #4ade80;
    --primary-hover: #22c55e;
    --secondary-color: #22d3ee;
    --text-on-accent: #04060a;
    --focus-ring: #4ade80;

    /* --- sémantique : conservée, mais accordée au fond profond --- */
    --success-color: #4ade80;
    --danger-color: #f87171;
    --warning-color: #fbbf24;

    --success-soft-bg: rgba(74, 222, 128, 0.13);
    --success-soft-text: #86efac;
    --danger-soft-bg: rgba(248, 113, 113, 0.13);
    --danger-soft-text: #fca5a5;
    --warn-soft-bg: rgba(251, 191, 36, 0.13);
    --warn-soft-text: #fcd34d;
    --info-soft-bg: rgba(34, 211, 238, 0.13);
    --info-soft-text: #67e8f9;

    --bar-ok: #4ade80;
    --bar-warn: #fbbf24;
    --bar-crit: #f87171;

    /* --- boutons --- */
    --btn-primary: #4ade80;
    --btn-primary-hover: #22c55e;
    --btn-success: #4ade80;
    --btn-success-hover: #22c55e;
    --btn-warning: #fbbf24;
    --btn-warning-hover: #f59e0b;
    --btn-secondary-bg: #1e2733;
    --btn-secondary-hover-bg: #253141;
    --btn-secondary-text: #e9eef5;

    /* --- tableaux --- */
    --table-head-bg: linear-gradient(135deg, #171e28 0%, #1e2733 100%);
    --table-head-text: #e9eef5;

    /* --- console / code --- */
    --console-bg: #070a0e;
    --console-border: rgba(233, 238, 245, 0.08);
    --console-text: #e9eef5;
    --code-bg: #070a0e;
    --code-text: #e9eef5;
    --code-scrollbar-track: transparent;
    --code-scrollbar-thumb: #4ade80;
    --code-scrollbar-hover: #22d3ee;

    /* --- squelettes de chargement --- */
    --skeleton-base: #171e28;
    --skeleton-shine: #1e2733;
    --spinner-bg: #1e2733;

    /* --- dégradés décoratifs : tous ramenés à la marque --- */
    --warning-bg: linear-gradient(135deg, rgba(251,191,36,0.16) 0%, rgba(245,158,11,0.16) 100%);
    --ai-banner-bg: linear-gradient(135deg, #4ade80 0%, #22d3ee 100%);
    --log-gradient-start: #4ade80;
    --log-gradient-end: #22d3ee;
    --php-gradient-start: #4ade80;
    --php-gradient-end: #22d3ee;
    --ssh-gradient-start: #4ade80;
    --ssh-gradient-end: #22d3ee;
    --firewall-gradient-start: #f87171;
    --firewall-gradient-end: #dc2626;

    --ssh-input-bg: #131a23;
    --ssh-tab-bg: #171e28;
    --ssh-tab-hover-bg: #1e2733;
    --ssh-table-header-bg: #171e28;
    --ssh-table-hover-bg: #1e2733;

    --info-color: #22d3ee;
    --info-hover: #06b6d4;
    --info-accent: #22d3ee;
    --info-bg: #171e28;
    --info-border: rgba(233, 238, 245, 0.08);
    --info-text: #67e8f9;
    --purple-color: #22d3ee;
    --neutral-bg: #445164;
    --neutral-hover: #6b7a91;
}

/* ------------------------------------------------------------------ *
 * Fond ambiant : deux halos (vert / cyan) identiques à ceux du site et
 * du panel Pterodactyl. Posés en `fixed` derrière le contenu, sans
 * capter la souris.
 * ------------------------------------------------------------------ */
html {
    background-color: var(--nx-bg);
}

/*
 * Les halos sont posés en couches de `background-image` sur le body, et non
 * via un pseudo-élément en z-index négatif : le body ne crée pas de contexte
 * d'empilement, un ::before en z-index -1 remonterait donc à la racine et se
 * peindrait DERRIÈRE le fond du body, donc invisible. En couches de fond,
 * l'ordre est explicite et ne dépend d'aucun empilement.
 *
 * Ordre : le voile d'abord (au-dessus), puis les trois halos, la couleur de
 * fond servant de base. `fixed` les ancre à la fenêtre : ils ne défilent pas.
 */
body {
    position: relative;
    background-color: var(--nx-bg) !important;
    background-image:
        linear-gradient(180deg, rgba(7, 10, 14, 0) 0%, rgba(7, 10, 14, 0.55) 100%),
        radial-gradient(928px 672px at 12% -8%, rgba(74, 222, 128, 0.16), transparent 62%),
        radial-gradient(832px 608px at 92% 4%, rgba(34, 211, 238, 0.13), transparent 60%),
        radial-gradient(736px 640px at 50% 108%, rgba(74, 222, 128, 0.07), transparent 65%) !important;
    background-attachment: fixed, fixed, fixed, fixed;
    background-repeat: no-repeat;
    color: var(--nx-text);
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------ *
 * Typographie
 * ------------------------------------------------------------------ */
h1, h2, h3,
.page-title,
.card-title {
    font-family: 'Newsreader', Georgia, Cambria, serif;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-heading);
}

h4, h5, h6 {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    color: var(--text-heading);
}

::selection {
    background: rgba(74, 222, 128, 0.28);
    color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * Ascenseurs — couleur entreprise, comme sur le site.
 * ------------------------------------------------------------------ */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--nx-accent) transparent;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--nx-accent);
    border-radius: 999px;
    border: 2px solid var(--nx-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--nx-accent-soft); }
::-webkit-scrollbar-corner { background: transparent; }

/* ------------------------------------------------------------------ *
 * Focus clavier — anneau vert lisible, sans casser la navigation.
 * ------------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--nx-accent);
    outline-offset: 2px;
    border-radius: var(--nx-radius-sm);
}

/* ------------------------------------------------------------------ *
 * Surfaces
 * ------------------------------------------------------------------ */
.nx-glass,
.card,
.panel,
.content-box,
.cyberpanel-card {
    background: linear-gradient(180deg, rgba(30, 39, 51, 0.82) 0%, rgba(23, 30, 40, 0.9) 100%);
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius);
    box-shadow: var(--nx-shadow);
}

/* Liseré dégradé fin, en tête des grands blocs. */
.nx-rule {
    height: 2px;
    border: 0;
    background: var(--nx-gradient);
    opacity: 0.55;
    border-radius: 999px;
}

/* Adoucissement des angles, sans toucher aux pastilles rondes. */
.rounded { border-radius: var(--nx-radius-sm) !important; }
.rounded-lg { border-radius: var(--nx-radius) !important; }
.rounded-xl, .rounded-2xl { border-radius: var(--nx-radius-lg) !important; }

/* ------------------------------------------------------------------ *
 * Barre latérale
 * ------------------------------------------------------------------ */
.sidebar,
#sidebar,
.main-sidebar,
.left-sidebar {
    background: var(--bg-sidebar) !important;
    border-right: 1px solid var(--nx-border);
}

.sidebar a:hover,
#sidebar a:hover,
.sidebar-menu > li > a:hover {
    background: var(--bg-hover) !important;
    color: var(--nx-accent) !important;
}

.sidebar .active > a,
.sidebar-menu > li.active > a {
    color: var(--nx-accent) !important;
    box-shadow: inset 3px 0 0 var(--nx-accent);
}

/* ------------------------------------------------------------------ *
 * Formulaires — fond profond, liseré vert au focus.
 * ------------------------------------------------------------------ */
input[type='text'], input[type='password'], input[type='email'],
input[type='number'], input[type='date'], input[type='datetime-local'],
input[type='search'], input[type='url'], input[type='tel'],
textarea, select, .form-control {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--nx-border) !important;
    color: var(--nx-text) !important;
    border-radius: var(--nx-radius-sm) !important;
    transition: border-color var(--nx-transition-fast),
                box-shadow var(--nx-transition-fast),
                background-color var(--nx-transition-fast);
}

input[type='text']:focus, input[type='password']:focus, input[type='email']:focus,
input[type='number']:focus, input[type='search']:focus, input[type='url']:focus,
input[type='tel']:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: rgba(74, 222, 128, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.14) !important;
    background-color: var(--bg-muted) !important;
    color: var(--nx-text) !important;
}

::placeholder { color: var(--nx-text-muted) !important; opacity: 0.75; }

input[readonly] { cursor: default; }

/* Correction d'accessibilité : la saisie automatique de Chrome repeint
   le champ en bleu clair avec du texte noir, illisible sur fond sombre.
   L'ombre interne rétablit le fond ; le `text-fill-color` le texte. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--nx-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--bg-muted) inset !important;
    box-shadow: 0 0 0 1000px var(--bg-muted) inset !important;
    caret-color: var(--nx-text);
    transition: background-color 5000s ease-in-out 0s;
}

/* ------------------------------------------------------------------ *
 * Boutons
 * ------------------------------------------------------------------ */
a, button, .btn {
    transition: color var(--nx-transition-fast),
                background-color var(--nx-transition-fast),
                border-color var(--nx-transition-fast),
                box-shadow var(--nx-transition-fast),
                transform var(--nx-transition-fast);
}

.btn { border-radius: var(--nx-radius-sm) !important; font-weight: 500; }

.btn-primary,
.btn-success {
    background-color: var(--nx-accent) !important;
    border-color: var(--nx-accent) !important;
    color: #04060a !important;
    font-weight: 600;
}

.btn-primary:hover, .btn-primary:focus,
.btn-success:hover, .btn-success:focus {
    background-color: var(--nx-accent-strong) !important;
    border-color: var(--nx-accent-strong) !important;
    color: #04060a !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35),
                0 12px 32px -18px rgba(74, 222, 128, 0.55);
}

.btn-default, .btn-secondary {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--nx-border) !important;
    color: var(--nx-text) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background-color: var(--btn-secondary-hover-bg) !important;
    border-color: var(--nx-border-strong) !important;
}

.btn-info { background-color: var(--nx-accent-soft) !important; border-color: var(--nx-accent-soft) !important; color: #04060a !important; }
.btn-danger { background-color: var(--danger-color) !important; border-color: var(--danger-color) !important; color: #04060a !important; }
.btn-warning { background-color: var(--warning-color) !important; border-color: var(--warning-color) !important; color: #04060a !important; }

/* Liens */
a { color: var(--nx-accent); }
a:hover, a:focus { color: var(--nx-accent-soft); }

/* ------------------------------------------------------------------ *
 * Tableaux
 * ------------------------------------------------------------------ */
.table, table {
    color: var(--nx-text);
    border-color: var(--nx-border);
}
.table > thead > tr > th, table thead th {
    background: var(--table-head-bg);
    color: var(--table-head-text);
    border-color: var(--nx-border) !important;
    font-weight: 600;
}
.table > tbody > tr > td, table tbody td { border-color: var(--nx-border) !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(233, 238, 245, 0.02); }
.table-hover > tbody > tr:hover { background-color: var(--bg-hover) !important; }

/* Chiffres alignés partout où ils se comparent en colonne. */
td, .stat-value, .metric-value { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ *
 * Alertes et pastilles
 * ------------------------------------------------------------------ */
.alert { border-radius: var(--nx-radius-sm); border-width: 1px; }
.alert-success { background: var(--success-soft-bg); border-color: rgba(74,222,128,0.28); color: var(--success-soft-text); }
.alert-danger, .alert-error { background: var(--danger-soft-bg); border-color: rgba(248,113,113,0.28); color: var(--danger-soft-text); }
.alert-warning { background: var(--warn-soft-bg); border-color: rgba(251,191,36,0.28); color: var(--warn-soft-text); }
.alert-info { background: var(--info-soft-bg); border-color: rgba(34,211,238,0.28); color: var(--info-soft-text); }

.badge, .label { border-radius: 999px; font-weight: 500; }

/* ------------------------------------------------------------------ *
 * Fenêtres modales et menus déroulants
 * ------------------------------------------------------------------ */
.modal-content, .dropdown-menu, .popover {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    box-shadow: var(--nx-shadow) !important;
    color: var(--nx-text);
}
.modal-header, .modal-footer { border-color: var(--nx-border) !important; }
.modal-backdrop.in { opacity: 0.72; background: #04060a; }
.dropdown-menu > li > a { color: var(--nx-text); }
.dropdown-menu > li > a:hover { background: var(--bg-hover); color: var(--nx-accent); }

/* ------------------------------------------------------------------ *
 * Barres de progression
 * ------------------------------------------------------------------ */
.progress { background-color: var(--bg-muted); border-radius: 999px; }
.progress-bar { background-color: var(--nx-accent); }
.progress-bar-success { background-color: var(--nx-accent); }
.progress-bar-warning { background-color: var(--warning-color); }
.progress-bar-danger  { background-color: var(--danger-color); }

/* ------------------------------------------------------------------ *
 * Onglets et navigation
 * ------------------------------------------------------------------ */
.nav-tabs { border-bottom-color: var(--nx-border); }
.nav-tabs > li > a { color: var(--nx-text-muted); border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0; }
.nav-tabs > li > a:hover { background: var(--bg-hover); border-color: transparent; color: var(--nx-text); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background: var(--bg-secondary) !important;
    border-color: var(--nx-border) !important;
    border-bottom-color: transparent !important;
    color: var(--nx-accent) !important;
}

/* ------------------------------------------------------------------ *
 * Console et blocs de code
 * ------------------------------------------------------------------ */
pre, code, .console-output, .terminal {
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
    border: 1px solid var(--nx-border);
    border-radius: var(--nx-radius-sm);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ *
 * Respect de la préférence « animations réduites ».
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------------------ *
 * Mise en page — laisser respirer le fond ambiant.
 *
 * CyberPanel peint #main-content avec une couleur pleine, ce qui masque
 * entièrement les halos posés sur le body. On le rend transparent : le
 * fond de la page redevient visible, comme sur le site et le panel de
 * jeu. L'en-tête et le rail latéral passent en surfaces vitrées, assez
 * opaques pour que le texte reste parfaitement lisible.
 * ------------------------------------------------------------------ */
#main-content {
    background: transparent !important;
}

#header {
    background: rgba(12, 16, 21, 0.82) !important;
    border-bottom: 1px solid var(--nx-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

#sidebar {
    background: rgba(10, 14, 19, 0.88) !important;
    border-right: 1px solid var(--nx-border);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Cartes du tableau de bord : surface vitrée plutôt que fond plein. */
.cp-qa-card,
.cp-card,
.cp-panel,
.cp-onboarding,
.content-card,
.stat-card {
    background: linear-gradient(180deg, rgba(30, 39, 51, 0.78) 0%, rgba(23, 30, 40, 0.86) 100%) !important;
    border: 1px solid var(--nx-border) !important;
    border-radius: var(--nx-radius) !important;
    box-shadow: var(--nx-shadow);
}

.cp-qa-card:hover,
.content-card:hover,
.stat-card:hover {
    border-color: rgba(74, 222, 128, 0.30) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.18),
                0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

/* Titres de section : le filet vertical reprend l'accent de marque. */
.cp-section-title,
.section-title {
    border-left-color: var(--nx-accent) !important;
}

/* Pastilles d'icône des actions rapides : dégradé de marque plutôt que
   les violets d'origine, sauf celles qui portent un sens (danger...). */
.cp-qa-ic {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(34, 211, 238, 0.18)) !important;
    color: var(--nx-accent) !important;
    border: 1px solid rgba(74, 222, 128, 0.22);
}


/* nexion-retours — jetons des rubriques Nexion.
   Ils etaient supposes et n'existaient pas : chaque bloc tombait sur sa valeur
   de repli, plus sombre et plus plate que les cartes du panel. On les fait
   pointer sur les vrais jetons du theme. */
:root {
    --cp-surface: linear-gradient(180deg, rgba(30, 39, 51, 0.78) 0%, rgba(23, 30, 40, 0.86) 100%);
    --cp-border: var(--nx-border, #24303f);
    --cp-text-muted: var(--text-muted, #9aa7b8);
    --cp-bg: var(--bg-code, #070a0e);
    --cp-accent: var(--accent-color, #4ade80);
}

/* Les rubriques Nexion prennent la meme presence que les cartes du panel :
   ombre portee, coin arrondi, et un liseré d'accent qui les identifie. */
.cp-section {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
    position: relative;
    overflow: hidden;
}
.cp-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--accent-color, #4ade80);
    opacity: .85;
}
.cp-section h3 {
    color: var(--text-primary, #e8eef6);
    letter-spacing: .01em;
}

/* Vignette de site fabriquee sur place : aucune requete a un tiers. */
.nx-vignette {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(74, 222, 128, .14) 0%, rgba(34, 211, 238, .12) 100%);
    border: 1px solid var(--nx-border, #24303f);
    color: var(--accent-color, #4ade80);
    font-size: 34px;
    font-weight: 700;
    text-transform: uppercase;
    user-select: none;
}


/* nexion-apercus : la capture du site, avec l'initiale en secours. */
.nx-apercu { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--nx-border, #24303f); background: #0b0f14; margin-bottom: 14px; }
.nx-apercu img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.nx-apercu .nx-vignette { position: absolute; inset: 0; border: 0; border-radius: 0; margin: 0; }
.nx-apercu-actu { position: absolute; right: 8px; bottom: 8px; font-size: 12px; padding: 4px 8px; border-radius: 6px;
    background: rgba(7, 10, 14, .78); color: var(--text-muted, #9aa7b8); border: 1px solid var(--nx-border, #24303f);
    cursor: pointer; }
.nx-apercu-actu:hover { color: var(--text-primary, #e8eef6); }