/* ════════════════════════════════════════════════════════════════════════════════════════════════
   DISTRICT UI 2 : le design system commun de District Roleplay (jeu + site web)
   ────────────────────────────────────────────────────────────────────────────────────────────────
   Direction artistique : dashboard gaming premium, noir profond, gris anthracite, rouge lumineux,
   argent métallique. Référence : la maquette « Dynasty » validée par l'owner le 2026-10-17.

   Utilisation dans une NUI (à mettre AVANT la feuille de la ressource, qui peut ainsi surcharger) :
       <link rel="stylesheet" href="nui://district_ui/web/district.css">
       <link rel="stylesheet" href="nui://district_ui/web/vendor/fontawesome/css/all.min.css">  (si icônes)
   Sur le site web : /css/district.css (copie de ce fichier, voir web/LISEZMOI.md).

   Règles d'or NUI (CEF de FiveM = Chromium 103) :
     • jamais « color-scheme » (peint tout l'écran en gris), jamais « backdrop-filter » (coûteux, scintille)
     • page transparente : le body d'une NUI reste « background: transparent »
     • pas de :has(), pas d'imbrication CSS, pas de color-mix(), pas de translate/rotate/scale « seuls »
       (propriétés individuelles = Chromium 104+) : toujours transform: translate(...)
     • animations : transform et opacity seulement ; pas d'animation infinie lourde (box-shadow animé, blur)
     • tailles en rem : la ressource fixe html { font-size } (voir .d-root-scale plus bas)

   Tout ce qui est partagé est préfixé : variables --d-*, classes .d-*, animations d-*.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── Polices (fichiers locaux, sous-ensemble latin : français complet, € « » œ ’) ──────────────── */

/* Barlow : texte, menus, boutons, titres de panneaux */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/Barlow-800.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/Barlow-500i.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: italic; font-weight: 700; font-display: swap; src: url('fonts/Barlow-700i.woff2') format('woff2'); }
/* Barlow Semi Condensed : étiquettes denses (inventaire, tableaux, MDT) */
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/BarlowSemiCondensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/BarlowSemiCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/BarlowSemiCondensed-700.woff2') format('woff2'); }
/* Saira (variable : graisse 100-900, largeur 50-125 %) : titres, chiffres, marque, gros titres italiques */
@font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; src: url('fonts/Saira-var.woff2') format('woff2'); }
@font-face { font-family: 'Saira'; font-style: italic; font-weight: 100 900; font-stretch: 50% 125%; font-display: swap; src: url('fonts/Saira-var-italic.woff2') format('woff2'); }

/* ─── Jetons ───────────────────────────────────────────────────────────────────────────────────── */

:root {
    /* Fonds : du plus profond au plus élevé */
    --d-bg: #08090c;            /* fond principal */
    --d-bg-2: #0c0d11;          /* fond des zones (sidebar, topbar) */
    --d-surface: #101216;       /* fond secondaire, panneaux */
    --d-card: #15171c;          /* cartes, lignes */
    --d-card-2: #1b1e24;        /* survol, élément levé */
    --d-input: #0d0f13;         /* champs */
    --d-overlay: rgba(4, 5, 7, 0.72);   /* voile derrière une fenêtre */

    /* Lignes */
    --d-line: #292c33;          /* bordures */
    --d-line-soft: #1d2026;     /* séparateurs internes */
    --d-line-strong: #3a3e47;   /* bordure accentuée, survol */

    /* Rouge District */
    --d-red: #e50920;           /* rouge principal */
    --d-red-hi: #ff2436;        /* rouge lumineux */
    --d-red-deep: #7d0512;      /* rouge sombre (fonds teintés) */
    --d-red-rgb: 229, 9, 32;
    --d-red-hi-rgb: 255, 36, 54;
    --d-red-grad: linear-gradient(180deg, #f2182d 0%, #c40719 100%);
    --d-red-grad-hover: linear-gradient(180deg, #ff2b40 0%, #d70a1e 100%);

    /* Argent métallique (marque, gros titres) */
    --d-silver: #d9dce1;
    --d-silver-grad: linear-gradient(180deg, #ffffff 0%, #e4e6ea 30%, #9a9ea7 50%, #eef0f3 66%, #b3b7bf 100%);

    /* Texte */
    --d-text: #f5f5f5;          /* principal */
    --d-text-2: #c9ccd3;        /* secondaire clair (paragraphes) */
    --d-muted: #9599a3;         /* secondaire */
    --d-faint: #60646e;         /* très discret, désactivé */

    /* États */
    --d-good: #2bd576;  --d-good-rgb: 43, 213, 118;
    --d-warn: #f5a524;  --d-warn-rgb: 245, 165, 36;
    --d-bad: #ff2436;   --d-bad-rgb: 255, 36, 54;
    --d-info: #a9b4c6;  --d-info-rgb: 169, 180, 198;

    /* Typographie */
    --d-font-display: 'Saira', 'Barlow', system-ui, sans-serif;
    --d-font-ui: 'Barlow', system-ui, 'Segoe UI', sans-serif;
    --d-font-cond: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    --d-font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Rayons */
    --d-r-xs: 0.25rem;
    --d-r-sm: 0.375rem;
    --d-r: 0.5rem;
    --d-r-lg: 0.75rem;
    --d-r-xl: 1rem;

    /* Ombres et lueurs (élégantes : jamais de néon sur tout) */
    --d-shadow: 0 0.9rem 2.4rem rgba(0, 0, 0, 0.55);
    --d-shadow-sm: 0 0.35rem 1rem rgba(0, 0, 0, 0.45);
    --d-glow: 0 0 1.25rem rgba(var(--d-red-rgb), 0.42);
    --d-glow-sm: 0 0 0.65rem rgba(var(--d-red-rgb), 0.38);
    --d-inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Mouvement */
    --d-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --d-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --d-dur: 0.18s;
    --d-dur-slow: 0.32s;
}

/* Échelle de base d'une NUI : 1rem = 16px en 1080p, suit l'écran (1440p, 4K) et la hauteur sur ultra-large.
   À mettre sur <html class="d-root-scale"> ou recopier la règle dans la feuille de la ressource.
   1.4815vh = 16px sur 1080 lignes (= 0.8334vw en 16:9) : un 21:9 / 32:9 garde la taille d'un 16:9 de même
   hauteur. L'ancienne valeur 1.85vh ne jouait qu'au-delà de 2.22:1 et donnait 20px en 2560x1080 (corrigé le
   2026-10-17, passe 2 d'ox_target ; rendu identique en 16:9). */
html.d-root-scale { font-size: clamp(10px, min(0.8334vw, 1.4815vh), 26px); }

/* ─── Base optionnelle (classe .d-app sur le conteneur racine) ─────────────────────────────────── */

.d-app {
    font-family: var(--d-font-ui);
    color: var(--d-text);
    font-size: 1rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.d-app *, .d-app *::before, .d-app *::after { box-sizing: border-box; }
.d-app button, .d-app input, .d-app select, .d-app textarea { font-family: inherit; color: inherit; font-size: inherit; }

/* ─── Typographie ──────────────────────────────────────────────────────────────────────────────── */

.d-display {               /* gros titre italique de la marque (bannière, chargement) */
    font-family: var(--d-font-display);
    font-weight: 900;
    font-style: italic;
    font-stretch: 112%;
    letter-spacing: -0.01em;
    line-height: 0.95;
    text-transform: uppercase;
}
.d-chrome {                /* texte argent métallique */
    background: var(--d-silver-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.d-chrome-red {            /* texte rouge métallique */
    background: linear-gradient(180deg, #ff5a67 0%, #ff2436 38%, #c00618 56%, #ff3346 78%, #d80a1e 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.d-eyebrow {               /* « FIVEM ROLEPLAY » : capitales très espacées */
    font-family: var(--d-font-display);
    font-weight: 500;
    font-stretch: 105%;
    text-transform: uppercase;
    letter-spacing: 0.38em;
}
.d-h1, .d-h2, .d-h3 { font-family: var(--d-font-display); font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; color: var(--d-text); }
.d-h1 { font-size: 2.25rem; }
.d-h2 { font-size: 1.6rem; }
.d-h3 { font-size: 1.2rem; }
.d-label {                 /* petite étiquette en capitales (sous-titre de carte, en-tête de tableau) */
    font-family: var(--d-font-ui);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--d-muted);
}
.d-num { font-family: var(--d-font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.d-upper { text-transform: uppercase; letter-spacing: 0.06em; }
.d-mono { font-family: var(--d-font-mono); }
.d-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Panneaux et cartes ───────────────────────────────────────────────────────────────────────── */

.d-panel {
    position: relative;
    background: linear-gradient(180deg, rgba(23, 25, 31, 0.97) 0%, rgba(14, 15, 19, 0.97) 100%);
    border: 1px solid var(--d-line);
    border-radius: var(--d-r-lg);
    box-shadow: var(--d-inner-hi), var(--d-shadow);
}
/* filet lumineux rouge au bas du panneau (comme la maquette) */
.d-panel--glow::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--d-red-hi-rgb), 0.95), transparent);
    box-shadow: 0 0 0.9rem 0.1rem rgba(var(--d-red-rgb), 0.55);
    pointer-events: none;
}
/* coin supérieur gauche teinté de rouge (panneau mis en avant) */
.d-panel--accent {
    background:
        radial-gradient(120% 80% at 0% 0%, rgba(var(--d-red-rgb), 0.10), transparent 55%),
        linear-gradient(180deg, rgba(23, 25, 31, 0.97) 0%, rgba(14, 15, 19, 0.97) 100%);
    border-color: rgba(var(--d-red-hi-rgb), 0.28);
}

.d-panel-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.85rem;
}
.d-panel-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--d-font-ui);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: var(--d-text);
    margin: 0;
}
.d-panel-title > i, .d-panel-title > .d-ico { color: var(--d-red-hi); font-size: 1.05em; filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.55)); }
.d-panel-head > .d-spacer, .d-spacer { flex: 1; }
.d-panel-body { padding: 0 1.25rem 1.25rem; }
.d-panel-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--d-line-soft);
}

.d-card {
    position: relative;
    background: linear-gradient(180deg, rgba(25, 27, 33, 0.92), rgba(18, 20, 25, 0.92));
    border: 1px solid var(--d-line);
    border-radius: var(--d-r);
    box-shadow: var(--d-inner-hi);
}
.d-card--hover { transition: transform var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease); }
.d-card--hover:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--d-red-hi-rgb), 0.5);
    box-shadow: var(--d-inner-hi), 0 0.6rem 1.6rem rgba(0, 0, 0, 0.5), 0 0 1rem rgba(var(--d-red-rgb), 0.18);
}
.d-card--active, .d-card.is-active {
    border-color: rgba(var(--d-red-hi-rgb), 0.85);
    background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05) 70%), linear-gradient(180deg, rgba(25, 27, 33, 0.95), rgba(18, 20, 25, 0.95));
    box-shadow: var(--d-glow-sm), inset 0 0 1rem rgba(var(--d-red-rgb), 0.12);
}

/* Carte avec image de fond à droite qui se fond dans le noir (rangée de cartes de la maquette) */
.d-media-card { overflow: hidden; }
.d-media-card > .d-media-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: right center;
    opacity: 0.85;
    transition: transform 0.6s var(--d-ease), opacity var(--d-dur) var(--d-ease);
}
.d-media-card > .d-media-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 11, 14, 0.98) 0%, rgba(10, 11, 14, 0.82) 38%, rgba(10, 11, 14, 0.25) 75%, rgba(10, 11, 14, 0.15) 100%),
                linear-gradient(0deg, rgba(10, 11, 14, 0.75), transparent 60%);
}
.d-media-card:hover > .d-media-bg { transform: scale(1.04); opacity: 1; }
.d-media-card > :where(:not(.d-media-bg)) { position: relative; }   /* :where = sans poids : la ressource peut repositionner */

/* ─── Boutons ──────────────────────────────────────────────────────────────────────────────────── */

.d-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line-strong);
    background: linear-gradient(180deg, rgba(22, 24, 29, 0.96), rgba(13, 14, 18, 0.96));
    color: var(--d-text);
    font-family: var(--d-font-ui);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: transform var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease);
}
.d-btn > i { font-size: 1em; }
.d-btn:hover { border-color: #565b66; background: linear-gradient(180deg, rgba(30, 32, 38, 0.98), rgba(18, 19, 24, 0.98)); }
.d-btn:active { transform: translateY(1px); }
.d-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(var(--d-red-hi-rgb), 0.6); }
.d-btn[disabled], .d-btn.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.d-btn .d-btn-chevron { margin-left: 0.35em; font-size: 0.8em; opacity: 0.85; transition: transform var(--d-dur) var(--d-ease); }
.d-btn:hover .d-btn-chevron { transform: translateX(3px); }

.d-btn--primary {
    border-color: rgba(255, 76, 90, 0.9);
    background: var(--d-red-grad);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0.45rem 1.2rem rgba(var(--d-red-rgb), 0.32), 0 0 0.9rem rgba(var(--d-red-rgb), 0.28);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.d-btn--primary:hover {
    border-color: #ff6a76;
    background: var(--d-red-grad-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0.55rem 1.5rem rgba(var(--d-red-rgb), 0.42), 0 0 1.4rem rgba(var(--d-red-rgb), 0.45);
}
.d-btn--outline-red { border-color: rgba(var(--d-red-hi-rgb), 0.7); color: #ff5361; background: rgba(var(--d-red-rgb), 0.06); }
.d-btn--outline-red:hover { border-color: var(--d-red-hi); background: rgba(var(--d-red-rgb), 0.14); color: #fff; }
.d-btn--ghost { border-color: transparent; background: transparent; color: var(--d-text-2); }
.d-btn--ghost:hover { background: rgba(255, 255, 255, 0.05); border-color: transparent; color: var(--d-text); }
.d-btn--good { border-color: rgba(var(--d-good-rgb), 0.6); background: linear-gradient(180deg, #23c46b, #15994f); color: #fff; }
.d-btn--good:hover { border-color: rgba(var(--d-good-rgb), 0.9); background: linear-gradient(180deg, #2bd576, #19a95a); }
.d-btn--sm { height: 2.15rem; padding: 0 0.85rem; font-size: 0.8rem; border-radius: var(--d-r-sm); }
.d-btn--lg { height: 3.35rem; padding: 0 1.6rem; font-size: 1.05rem; }
.d-btn--block { width: 100%; }
.d-btn--icon { width: 2.75rem; padding: 0; }
.d-btn--icon.d-btn--sm { width: 2.15rem; }

/* ─── Navigation latérale (sidebar de la maquette) ─────────────────────────────────────────────── */

.d-nav { display: flex; flex-direction: column; gap: 0.4rem; }
.d-nav-label {
    margin: 1rem 0 0.35rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--d-faint);
}
.d-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    height: 3.25rem;
    padding: 0 1.2rem;
    border: 1px solid transparent;
    border-radius: var(--d-r);
    color: #c3c6cd;
    font-family: var(--d-font-ui);
    font-weight: 500;
    font-size: 1.08rem;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease);
}
.d-nav-item > i, .d-nav-item > .d-ico {
    width: 1.6rem;
    text-align: center;
    font-size: 1.2rem;
    color: #a6aab3;
    transition: transform var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease);
}
.d-nav-item:hover { background: rgba(255, 255, 255, 0.035); color: #fff; }
.d-nav-item:hover > i, .d-nav-item:hover > .d-ico { color: #fff; transform: translateX(2px); }
.d-nav-item.is-active, .d-nav-item.active {
    color: #fff;
    font-weight: 600;
    border-color: rgba(var(--d-red-hi-rgb), 0.9);
    background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.34) 0%, rgba(var(--d-red-rgb), 0.12) 55%, rgba(var(--d-red-rgb), 0.06) 100%);
    box-shadow: 0 0 1.1rem rgba(var(--d-red-rgb), 0.38), inset 0 0 1.4rem rgba(var(--d-red-rgb), 0.16);
    animation: d-nav-in var(--d-dur-slow) var(--d-ease) both;
}
.d-nav-item.is-active > i, .d-nav-item.active > i, .d-nav-item.is-active > .d-ico, .d-nav-item.active > .d-ico { color: #fff; filter: drop-shadow(0 0 0.4rem rgba(var(--d-red-hi-rgb), 0.7)); }
.d-nav-badge {
    margin-left: auto;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--d-red);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: var(--d-glow-sm);
}

/* ─── Onglets (contrôle segmenté) ──────────────────────────────────────────────────────────────── */

.d-tabs { display: inline-flex; gap: 0.3rem; padding: 0.3rem; border-radius: var(--d-r); background: var(--d-input); border: 1px solid var(--d-line); }
.d-tab {
    height: 2.3rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: var(--d-r-sm);
    border: 1px solid transparent;
    color: var(--d-muted);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    background: none;
    transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease);
}
.d-tab:hover { color: var(--d-text); background: rgba(255, 255, 255, 0.04); }
.d-tab.is-active, .d-tab.active { color: #fff; border-color: rgba(var(--d-red-hi-rgb), 0.8); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.3), rgba(var(--d-red-rgb), 0.12)); box-shadow: var(--d-glow-sm); }

/* ─── Tuile d'icône (carré rouge des lignes « Pourquoi District ? ») ───────────────────────────── */

.d-icon-tile {
    flex: none;
    width: 2.85rem;
    height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--d-r);
    border: 1px solid rgba(var(--d-red-hi-rgb), 0.8);
    background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05));
    color: var(--d-red-hi);
    font-size: 1.2rem;
    box-shadow: inset 0 0 0.9rem rgba(var(--d-red-rgb), 0.18), 0 0 0.6rem rgba(var(--d-red-rgb), 0.15);
}
.d-icon-tile--sm { width: 2.2rem; height: 2.2rem; font-size: 0.95rem; border-radius: var(--d-r-sm); }
.d-icon-tile--lg { width: 3.6rem; height: 3.6rem; font-size: 1.5rem; }
.d-icon-tile--solid { background: var(--d-red-grad); color: #fff; border-color: rgba(255, 90, 100, 0.9); }
.d-icon-tile--good { border-color: rgba(var(--d-good-rgb), 0.7); background: linear-gradient(180deg, rgba(var(--d-good-rgb), 0.16), rgba(var(--d-good-rgb), 0.04)); color: var(--d-good); box-shadow: inset 0 0 0.9rem rgba(var(--d-good-rgb), 0.12); }
.d-icon-tile--warn { border-color: rgba(var(--d-warn-rgb), 0.7); background: linear-gradient(180deg, rgba(var(--d-warn-rgb), 0.16), rgba(var(--d-warn-rgb), 0.04)); color: var(--d-warn); box-shadow: inset 0 0 0.9rem rgba(var(--d-warn-rgb), 0.12); }
.d-icon-tile--info { border-color: rgba(var(--d-info-rgb), 0.55); background: linear-gradient(180deg, rgba(var(--d-info-rgb), 0.14), rgba(var(--d-info-rgb), 0.03)); color: #dfe5ee; box-shadow: none; }
.d-icon-tile--mute { border-color: var(--d-line-strong); background: rgba(255, 255, 255, 0.03); color: var(--d-text-2); box-shadow: none; }

/* ─── Pastilles d'état, badges, puces ──────────────────────────────────────────────────────────── */

.d-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 2.35rem;
    padding: 0 0.95rem;
    border-radius: var(--d-r-sm);
    border: 1px solid rgba(var(--d-good-rgb), 0.32);
    background: linear-gradient(180deg, rgba(var(--d-good-rgb), 0.12), rgba(var(--d-good-rgb), 0.05));
    color: #3ee083;
    font-weight: 600;
    font-size: 0.92rem;
    white-space: nowrap;
}
.d-pill--off { border-color: rgba(var(--d-red-hi-rgb), 0.35); background: rgba(var(--d-red-rgb), 0.08); color: #ff5361; }
.d-pill--warn { border-color: rgba(var(--d-warn-rgb), 0.35); background: rgba(var(--d-warn-rgb), 0.08); color: var(--d-warn); }
.d-pill--mute { border-color: var(--d-line); background: rgba(255, 255, 255, 0.03); color: var(--d-text-2); }
.d-pill--sm { height: 1.75rem; padding: 0 0.6rem; font-size: 0.75rem; gap: 0.4rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; }

/* point d'état « en ligne » : halo qui pulse (transform + opacity seulement) */
.d-dot { position: relative; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0.5rem currentColor; }
.d-dot--live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    animation: d-pulse 2s var(--d-ease-out) infinite;
}

.d-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 1.35rem;
    padding: 0 0.45rem;
    border-radius: var(--d-r-xs);
    font-family: var(--d-font-ui);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid var(--d-line-strong);
    color: var(--d-text-2);
    background: rgba(255, 255, 255, 0.04);
}
.d-badge--new { border-color: rgba(255, 90, 100, 0.9); background: var(--d-red-grad); color: #fff; box-shadow: var(--d-glow-sm); }
.d-badge--red { border-color: rgba(var(--d-red-hi-rgb), 0.75); color: #ff4a59; background: rgba(var(--d-red-rgb), 0.08); }
.d-badge--good { border-color: rgba(var(--d-good-rgb), 0.5); color: var(--d-good); background: rgba(var(--d-good-rgb), 0.08); }
.d-badge--warn { border-color: rgba(var(--d-warn-rgb), 0.5); color: var(--d-warn); background: rgba(var(--d-warn-rgb), 0.08); }

.d-kbd {                    /* touche du clavier : [E] */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0 0.45rem;
    border-radius: var(--d-r-sm);
    border: 1px solid rgba(var(--d-red-hi-rgb), 0.85);
    background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.28), rgba(var(--d-red-rgb), 0.1));
    color: #fff;
    font-family: var(--d-font-display);
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: var(--d-glow-sm), inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

/* ─── Lignes de liste ──────────────────────────────────────────────────────────────────────────── */

/* ligne clé / valeur (panneau « Aperçu du serveur ») */
.d-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 3.1rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--d-line-soft);
}
.d-row:last-child { border-bottom: 0; }
.d-row > i, .d-row-icon { width: 1.4rem; text-align: center; color: #aeb2bb; font-size: 1.05rem; }
.d-row-label { flex: 1; color: var(--d-text-2); font-weight: 500; }
.d-row-value { color: var(--d-text); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.d-rows { border: 1px solid var(--d-line-soft); border-radius: var(--d-r); background: rgba(255, 255, 255, 0.012); overflow: hidden; }
.d-rows > .d-row:nth-child(odd) { background: rgba(255, 255, 255, 0.014); }

/* ligne riche : tuile + titre + description + chevron (« Pourquoi District ? ») */
.d-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--d-line-soft);
    border-radius: var(--d-r);
    background: linear-gradient(180deg, rgba(24, 26, 32, 0.9), rgba(17, 19, 24, 0.9));
    color: inherit;
    text-decoration: none;
    transition: border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease), transform var(--d-dur) var(--d-ease);
}
a.d-item:hover, button.d-item:hover, .d-item.is-clickable:hover { border-color: rgba(var(--d-red-hi-rgb), 0.45); background: linear-gradient(180deg, rgba(30, 32, 38, 0.95), rgba(20, 22, 27, 0.95)); }
.d-item-body { flex: 1; min-width: 0; }
.d-item-title, .d-item-desc { display: block; }
.d-item-title { font-weight: 600; font-size: 1.02rem; color: var(--d-text); line-height: 1.25; }
.d-item-desc { margin-top: 0.2rem; font-size: 0.86rem; color: var(--d-muted); line-height: 1.35; }
.d-item-chevron { color: #c3c6cd; font-size: 0.95rem; transition: transform var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease); }
a.d-item:hover .d-item-chevron, button.d-item:hover .d-item-chevron, .d-item.is-clickable:hover .d-item-chevron { transform: translateX(3px); color: var(--d-red-hi); }

/* ─── Champs ───────────────────────────────────────────────────────────────────────────────────── */

.d-field { display: flex; flex-direction: column; gap: 0.4rem; }
.d-field > label, .d-field-label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-muted); }
.d-input, .d-select, .d-textarea {
    width: 100%;
    height: 2.75rem;
    padding: 0 0.95rem;
    border-radius: var(--d-r-sm);
    border: 1px solid var(--d-line);
    background: var(--d-input);
    color: var(--d-text);
    font-family: var(--d-font-ui);
    font-size: 0.98rem;
    outline: none;
    transition: border-color var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.d-textarea { height: auto; min-height: 6rem; padding: 0.7rem 0.95rem; resize: vertical; line-height: 1.45; }
.d-input::placeholder, .d-textarea::placeholder { color: var(--d-faint); }
.d-input:hover, .d-select:hover, .d-textarea:hover { border-color: var(--d-line-strong); }
.d-input:focus, .d-select:focus, .d-textarea:focus { border-color: rgba(var(--d-red-hi-rgb), 0.8); box-shadow: 0 0 0 3px rgba(var(--d-red-rgb), 0.16); background: #0f1116; }
.d-select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background-image: linear-gradient(45deg, transparent 50%, #9599a3 50%), linear-gradient(135deg, #9599a3 50%, transparent 50%); background-position: calc(100% - 1.15rem) 52%, calc(100% - 0.8rem) 52%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; }
.d-search { position: relative; display: flex; align-items: center; }
.d-search > i { position: absolute; left: 0.95rem; color: var(--d-muted); font-size: 0.95rem; pointer-events: none; }
.d-search > .d-input { padding-left: 2.6rem; }

/* interrupteur */
.d-switch { position: relative; display: inline-flex; width: 2.75rem; height: 1.5rem; flex: none; cursor: pointer; }
.d-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.d-switch span { position: absolute; inset: 0; border-radius: 999px; background: #22252c; border: 1px solid var(--d-line-strong); transition: background var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease); }
.d-switch span::before { content: ''; position: absolute; top: 50%; left: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #c9ccd3; transform: translate(0, -50%); transition: transform var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.d-switch input:checked + span { background: var(--d-red-grad); border-color: rgba(255, 90, 100, 0.9); box-shadow: var(--d-glow-sm); }
.d-switch input:checked + span::before { background: #fff; transform: translate(1.2rem, -50%); }

/* case à cocher */
.d-check { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; color: var(--d-text-2); }
.d-check input { appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin: 0; border-radius: var(--d-r-xs); border: 1px solid var(--d-line-strong); background: var(--d-input); display: inline-grid; place-content: center; transition: background var(--d-dur), border-color var(--d-dur); }
.d-check input::after { content: ''; width: 0.55rem; height: 0.3rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translate(0, -1px) rotate(-45deg) scale(0); transition: transform var(--d-dur) var(--d-ease); }
.d-check input:checked { background: var(--d-red); border-color: var(--d-red-hi); }
.d-check input:checked::after { transform: translate(0, -1px) rotate(-45deg) scale(1); }

/* ─── Barre de progression ─────────────────────────────────────────────────────────────────────── */

.d-progress { position: relative; height: 0.42rem; border-radius: 999px; background: #24272e; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5); }
.d-progress > .d-progress-fill, .d-progress > span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--d-value, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, #b8061a, var(--d-red-hi));
    box-shadow: 0 0 0.6rem rgba(var(--d-red-hi-rgb), 0.65);
    transition: width 0.4s var(--d-ease);
}
.d-progress--good > span, .d-progress--good > .d-progress-fill { background: linear-gradient(90deg, #15994f, var(--d-good)); box-shadow: 0 0 0.6rem rgba(var(--d-good-rgb), 0.5); }
.d-progress--warn > span, .d-progress--warn > .d-progress-fill { background: linear-gradient(90deg, #b5730d, var(--d-warn)); box-shadow: 0 0 0.6rem rgba(var(--d-warn-rgb), 0.5); }
.d-progress--lg { height: 0.7rem; }

/* ─── Tableau dense ────────────────────────────────────────────────────────────────────────────── */

.d-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.92rem; }
.d-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.7rem 0.9rem;
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--d-muted);
    background: #121419;
    border-bottom: 1px solid var(--d-line);
}
.d-table td { padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--d-line-soft); color: var(--d-text-2); }
.d-table tbody tr { transition: background var(--d-dur) var(--d-ease); }
.d-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.d-table tbody tr.is-active { background: rgba(var(--d-red-rgb), 0.1); box-shadow: inset 2px 0 0 var(--d-red-hi); }

/* ─── Fenêtre (modale) ─────────────────────────────────────────────────────────────────────────── */

.d-overlay { position: fixed; inset: 0; background: var(--d-overlay); animation: d-fade-in var(--d-dur) var(--d-ease) both; }
.d-modal { width: min(32rem, calc(100vw - 2rem)); animation: d-pop-in var(--d-dur-slow) var(--d-ease) both; }
.d-modal .d-panel-head { border-bottom: 1px solid var(--d-line-soft); padding-bottom: 1rem; margin-bottom: 1rem; }

/* ─── Notification (carte à barre rouge : choix de l'owner 2026-10-17) ─────────────────────────── */

.d-toast {
    position: relative;
    display: flex;
    gap: 0.9rem;
    width: 23rem;
    padding: 0.85rem 1rem 1rem 1.1rem;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: linear-gradient(180deg, rgba(24, 26, 32, 0.97), rgba(14, 15, 19, 0.97));
    box-shadow: var(--d-shadow), var(--d-inner-hi);
    overflow: hidden;
    --d-tone: var(--d-red-hi);
    --d-tone-rgb: var(--d-red-hi-rgb);
}
.d-toast::before {           /* barre verticale colorée à gauche */
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--d-tone);
    box-shadow: 0 0 0.8rem rgba(var(--d-tone-rgb), 0.8);
}
.d-toast--success { --d-tone: var(--d-good); --d-tone-rgb: var(--d-good-rgb); }
.d-toast--warning { --d-tone: var(--d-warn); --d-tone-rgb: var(--d-warn-rgb); }
.d-toast--error { --d-tone: var(--d-bad); --d-tone-rgb: var(--d-bad-rgb); }
.d-toast--info { --d-tone: var(--d-red-hi); --d-tone-rgb: var(--d-red-hi-rgb); }
.d-toast .d-icon-tile { border-color: rgba(var(--d-tone-rgb), 0.8); color: var(--d-tone); background: linear-gradient(180deg, rgba(var(--d-tone-rgb), 0.2), rgba(var(--d-tone-rgb), 0.05)); box-shadow: inset 0 0 0.9rem rgba(var(--d-tone-rgb), 0.16); }
.d-toast-body { flex: 1; min-width: 0; }
.d-toast-head { display: flex; align-items: baseline; gap: 0.6rem; }
.d-toast-title { flex: 1; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--d-text); }
.d-toast-time { font-size: 0.75rem; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.d-toast-text { margin-top: 0.2rem; font-size: 0.95rem; line-height: 1.38; color: var(--d-text-2); word-wrap: break-word; }
.d-toast-bar { position: absolute; left: 1.1rem; right: 1rem; bottom: 0.5rem; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.d-toast-bar > span { position: absolute; inset: 0; background: var(--d-tone); transform-origin: left center; box-shadow: 0 0 0.5rem rgba(var(--d-tone-rgb), 0.7); }

/* ─── Divers ───────────────────────────────────────────────────────────────────────────────────── */

.d-divider { height: 1px; background: var(--d-line-soft); border: 0; margin: 1rem 0; }
.d-divider--glow { background: linear-gradient(90deg, transparent, rgba(var(--d-red-hi-rgb), 0.85), transparent); box-shadow: 0 0 0.6rem rgba(var(--d-red-rgb), 0.5); }
.d-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2.5rem 1rem; color: var(--d-muted); text-align: center; }
.d-empty > i { font-size: 2rem; color: var(--d-faint); }
.d-logo { display: block; width: 4rem; height: 4rem; object-fit: contain; filter: drop-shadow(0 0 0.8rem rgba(var(--d-red-rgb), 0.35)); }
.d-avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: var(--d-r-sm); border: 1px solid var(--d-line-strong); background: #1a1d23 center / cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--d-text-2); overflow: hidden; }
.d-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.d-money { font-family: var(--d-font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--d-good); }
.d-money--dirty { color: #ff4a59; }

/* barres de défilement fines (Chromium) */
.d-scroll { overflow: auto; scrollbar-width: thin; }
.d-scroll::-webkit-scrollbar, .d-app ::-webkit-scrollbar { width: 0.45rem; height: 0.45rem; }
.d-scroll::-webkit-scrollbar-track, .d-app ::-webkit-scrollbar-track { background: transparent; }
.d-scroll::-webkit-scrollbar-thumb, .d-app ::-webkit-scrollbar-thumb { background: #2c3038; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.d-scroll::-webkit-scrollbar-thumb:hover, .d-app ::-webkit-scrollbar-thumb:hover { background: rgba(var(--d-red-hi-rgb), 0.7); background-clip: padding-box; }

/* ─── Utilitaires de couleur (en dernier : ils l'emportent sur la couleur des composants) ─────────── */

.d-text-2 { color: var(--d-text-2); }
.d-muted { color: var(--d-muted); }
.d-faint { color: var(--d-faint); }
.d-red { color: var(--d-red-hi); }
.d-good { color: var(--d-good); }
.d-warn { color: var(--d-warn); }
.d-bad { color: var(--d-bad); }

/* ─── Apparitions (à appliquer sur l'ouverture, pas en boucle) ─────────────────────────────────── */

.d-anim-rise { animation: d-rise var(--d-dur-slow) var(--d-ease) both; }
.d-anim-fade { animation: d-fade-in var(--d-dur-slow) var(--d-ease) both; }
.d-anim-pop { animation: d-pop-in var(--d-dur-slow) var(--d-ease) both; }
.d-stagger > * { animation: d-rise 0.42s var(--d-ease) both; }
.d-stagger > *:nth-child(2) { animation-delay: 0.05s; }
.d-stagger > *:nth-child(3) { animation-delay: 0.1s; }
.d-stagger > *:nth-child(4) { animation-delay: 0.15s; }
.d-stagger > *:nth-child(5) { animation-delay: 0.2s; }
.d-stagger > *:nth-child(6) { animation-delay: 0.25s; }
.d-stagger > *:nth-child(n+7) { animation-delay: 0.3s; }

@keyframes d-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-rise { from { opacity: 0; transform: translate(0, 0.6rem); } to { opacity: 1; transform: none; } }
@keyframes d-pop-in { from { opacity: 0; transform: translate(0, 0.5rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes d-slide-in-right { from { opacity: 0; transform: translate(1.5rem, 0); } to { opacity: 1; transform: none; } }
@keyframes d-slide-out-right { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(1.5rem, 0); } }
@keyframes d-nav-in { from { opacity: 0.4; transform: translate(-0.35rem, 0); } to { opacity: 1; transform: none; } }
@keyframes d-pulse { 0% { transform: scale(1); opacity: 0.55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes d-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .d-anim-rise, .d-anim-fade, .d-anim-pop, .d-stagger > *, .d-nav-item.is-active, .d-nav-item.active { animation: none; }
    .d-dot--live::after { animation: none; }
}