/* ════════════════════════════════════════════════════════════════════════════════════════════════
   DISTRICT PANEL · panel.css — feuille de l'application (lot C), chargée APRÈS district.css et Font Awesome.
   ────────────────────────────────────────────────────────────────────────────────────────────────
   Langage : District UI 2 (district.css, intact) dans la version « tablette admin » du menu en jeu, en plus dense :
   noir opaque, anthracite, rouge RARE (élément actif, action principale, icônes de titre, ce qui demande une action),
   argent pour la marque, Saira pour les chiffres (tabulaires), Barlow Semi Condensed dans les tableaux denses.
   Une application, pas un site : coquille plein écran, pas de pied de page, marges serrées, raccourcis clavier,
   chrome non sélectionnable, barres de défilement fines, une seule zone qui défile (le contenu).
   Interdits (ui-design.md) : backdrop-filter, color-scheme, grands rayons, néon partout, animations en boucle
   (sauf le point « en direct » d-pulse et la roue de chargement), :has(), imbrication CSS, color-mix().
   Préfixes : .p-* (composants du panel), .is-* (états), --p-* (variables du panel). Les .d-* viennent de district.css.
   Sommaire : 1 base · 2 coquille · 3 barre latérale · 4 barre du haut · 5 contenu et pages · 6 boutons · 7 panneaux,
   tuiles, clé/valeur · 8 tableaux · 9 champs · 10 onglets, badges, données · 11 menus, infobulles, palette ·
   12 fenêtres, tiroirs, toasts · 13 fenêtre flottante · 14 graphiques · 15 écrans de connexion · 16 utilitaires de
   mise en page (vague 2, voir js/ui/README.md) · 17 mode bureau (Electron) · 18 cellulaire · 19 mouvement réduit.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Base ──────────────────────────────────────────────────────────────────────────────────── */

:root {
    --p-side-w: 16.5rem;            /* barre latérale dépliée */
    --p-side-w-mini: 5.25rem;       /* repliée en icônes */
    --p-top-h: 4.1rem;              /* barre du haut */
    --p-tabbar-h: 3.75rem;          /* onglets du bas (cellulaire) */
    --p-titlebar-h: 0px;            /* zone de glissement (mode bureau seulement) */
    --p-pad: 1.35rem;               /* marge du contenu */
    --p-gap: 1rem;                  /* écart entre panneaux */
    --p-ctl-h: 2.6rem;              /* hauteur des contrôles (dense) */
    --p-ctl-h-sm: 2.1rem;
    --p-panel: linear-gradient(180deg, rgba(23, 25, 31, 0.97) 0%, rgba(14, 15, 19, 0.97) 100%);
    --p-tile: linear-gradient(180deg, rgba(25, 27, 33, 0.92), rgba(18, 20, 25, 0.92));
    --p-btn: linear-gradient(180deg, rgba(24, 26, 31, 0.98), rgba(15, 16, 20, 0.98));
    --p-btn-hover: linear-gradient(180deg, rgba(32, 34, 40, 0.98), rgba(19, 20, 25, 0.98));
    --p-active: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.3), rgba(var(--d-red-rgb), 0.12));
    --p-th: #121419;
    --p-pop: linear-gradient(180deg, rgba(26, 28, 34, 0.99) 0%, rgba(16, 17, 21, 0.99) 100%);
    --p-credit: #ffc83d;
    --p-red-soft: #ff5867;
}

/* densité : 13 px (1366-1733 px de large) -> 16 px (2133 px et plus) ; au cellulaire 14,5 px pour le doigt */
html { font-size: clamp(13px, 0.75vw, 16px); height: 100%; background: var(--d-bg); }
html[data-density="compact"] { font-size: clamp(12px, 0.68vw, 14.5px); }
html[data-density="comfortable"] { font-size: clamp(14px, 0.84vw, 17.5px); }
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--d-bg);
    color: var(--d-text);
    font-family: var(--d-font-ui);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: default;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; margin: 0; text-align: inherit; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
/* Leaflet dimensionne lui-même ses SVG et images (panes maison compris : districts, mesure) */
.leaflet-container img, .leaflet-container svg { max-width: none; max-height: none; }
img { border: 0; }
code, kbd, samp { font-family: var(--d-font-cond); font-weight: 600; }
code { padding: 0.05rem 0.3rem; border-radius: var(--d-r-xs); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--d-line-soft); font-size: 0.9em; color: var(--d-text-2); }
small { font-size: 0.85em; }
[hidden] { display: none !important; }
::selection { background: rgba(var(--d-red-rgb), 0.42); color: #fff; }
::placeholder { color: var(--d-faint); opacity: 1; }

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

/* focus clavier : contour blanc sur les commandes, anneau rouge sur les champs (district.css) */
:focus { outline: none; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.d-input:focus-visible, .d-select:focus-visible, .d-textarea:focus-visible, .p-search-input:focus-visible, .p-code-cell:focus-visible { outline: none; }

/* #app ne crée PAS de contexte d'empilement (pas de position fixe ni de z-index) : les calques fixes des portails
   (fenêtres 2000, popovers 2500, toasts 3000, infobulles 3500, fenêtres flottantes 1000+) se comparent tous à la racine */
#app { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.p-app { position: relative; flex: 1; min-height: 0; }
.p-portal { position: static; }
.p-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.p-spacer { flex: 1; }
.p-faint { color: var(--d-faint); }
.p-num { font-family: var(--d-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-eyebrow { display: block; font-family: var(--d-font-display); font-weight: 600; font-stretch: 105%; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--p-red-soft); }
.p-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem;
    border-radius: var(--d-r-xs); border: 1px solid var(--d-line-strong); background: var(--d-input);
    font-family: var(--d-font-display); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.03em; line-height: 1;
    color: var(--d-text-2); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35); white-space: nowrap;
}
.p-kbd + .p-kbd { margin-left: 0.2rem; }
.p-linkbtn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--d-muted); transition: color var(--d-dur) var(--d-ease); }
.p-linkbtn:hover { color: #fff; }
.p-linkbtn:hover > i { color: var(--d-red-hi); }
.p-skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 3000; padding: 0.6rem 1rem; border-radius: var(--d-r); background: var(--d-red-grad); color: #fff; font-weight: 700; }
.p-skip:focus { top: 0.75rem; }
.p-spin { animation: d-spin 0.9s linear infinite; }
.is-dragging, .is-dragging * { cursor: grabbing !important; user-select: none !important; }
.is-resizing, .is-resizing * { cursor: nwse-resize !important; user-select: none !important; }

/* le « chrome » de l'app ne se sélectionne pas comme une page web ; le contenu, oui */
.p-side, .p-top, .p-tabbar, .p-titlebar, .p-btn, .p-tabs, .p-menu, .p-pager, .p-palette-foot, .p-win-head,
.p-table th, .p-kpi-label, .p-field-label, .p-nav-label, .d-panel-head, .p-modal-head, .p-toast-x, .p-steps { user-select: none; -webkit-user-select: none; }

/* ─── 2. Coquille ──────────────────────────────────────────────────────────────────────────────── */

.p-shell {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: var(--p-side-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    background: var(--d-bg);
}
.p-shell.is-collapsed { --p-side-w: var(--p-side-w-mini); }
.p-main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(var(--d-red-rgb), 0.055), transparent 62%),
        linear-gradient(180deg, #0e1014 0%, #0a0b0e 100%);
}
.p-scrim { display: none; }
.p-tabbar { display: none; }

/* bandeau hors ligne (WebSocket coupé / réseau absent) */
.p-offline {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.6rem;
    padding: 0.4rem var(--p-pad);
    border-bottom: 1px solid rgba(var(--d-warn-rgb), 0.35);
    background: linear-gradient(90deg, rgba(var(--d-warn-rgb), 0.14), rgba(var(--d-warn-rgb), 0.04) 70%);
    color: var(--d-text-2);
    font-size: 0.86rem;
    animation: d-fade-in var(--d-dur-slow) var(--d-ease) both;
}
.p-offline > i { color: var(--d-warn); font-size: 0.95rem; }
.p-offline > b { color: var(--d-text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.p-offline.is-offline { border-color: rgba(var(--d-red-hi-rgb), 0.38); background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.16), rgba(var(--d-red-rgb), 0.04) 70%); }
.p-offline.is-offline > i { color: var(--d-red-hi); }

/* ─── 3. Barre latérale ────────────────────────────────────────────────────────────────────────── */

.p-side {
    position: relative;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(180deg, #0f1115 0%, #0b0c0f 100%);
    border-right: 1px solid var(--d-line-soft);
}
.p-brand { position: relative; flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 1.05rem 1.1rem 1rem; }
.p-brand::after {
    content: ''; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0; height: 1px;
    background: linear-gradient(90deg, rgba(var(--d-red-hi-rgb), 0.85), rgba(var(--d-red-hi-rgb), 0.12) 72%, transparent);
    box-shadow: 0 0 0.6rem rgba(var(--d-red-rgb), 0.35);
}
.p-brand-logo { flex: none; width: 3.1rem; height: 3.1rem; object-fit: contain; filter: drop-shadow(0 0 0.7rem rgba(var(--d-red-rgb), 0.35)); transition: transform var(--d-dur-slow) var(--d-ease); }
.p-brand:hover .p-brand-logo { transform: scale(1.04); }
.p-brand-text { min-width: 0; }
.p-brand-name { display: block; font-family: var(--d-font-display); font-weight: 800; font-stretch: 108%; font-size: 1.16rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.p-brand-name > span { display: block; }
.p-brand-name > span + span { margin-top: 0.1rem; }
.p-brand-red { color: var(--d-red-hi); text-shadow: 0 0 0.9rem rgba(var(--d-red-rgb), 0.35); }
.p-brand-sub { display: block; margin-top: 0.42rem; font-family: var(--d-font-display); font-weight: 600; font-stretch: 105%; font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--p-red-soft); white-space: nowrap; }

.p-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.75rem 1.6rem;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 0.6rem, #000 calc(100% - 1.6rem), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 0.6rem, #000 calc(100% - 1.6rem), transparent 100%);
}
.p-nav::-webkit-scrollbar { width: 0.3rem; }
.p-nav-group { display: flex; flex-direction: column; gap: 0.15rem; }
.p-nav-label { margin: 0.95rem 0 0.25rem 0.85rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-faint); white-space: nowrap; overflow: hidden; }

.p-nav-item {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid transparent;
    border-radius: var(--d-r);
    font-weight: 500;
    font-size: 0.95rem;
    color: #c3c6cd;
    white-space: nowrap;
    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);
}
.p-nav-item > i { flex: none; width: 1.3rem; text-align: center; font-size: 0.98rem; color: #a6aab3; transition: transform var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease); }
.p-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-nav-item:hover { background: rgba(255, 255, 255, 0.035); color: #fff; }
.p-nav-item:hover > i { color: #fff; transform: translate(2px, 0); }
.p-nav-item:focus-visible { outline: none; border-color: rgba(255, 255, 255, 0.7); }
.p-nav-item.is-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.32), inset 0 0 1.4rem rgba(var(--d-red-rgb), 0.16);
    animation: d-nav-in var(--d-dur-slow) var(--d-ease) both;
}
.p-nav-item.is-active > i { color: #fff; filter: drop-shadow(0 0 0.4rem rgba(var(--d-red-hi-rgb), 0.7)); }
.p-nav-badge {
    flex: none; margin-left: auto; min-width: 1.35rem; height: 1.35rem; padding: 0 0.38rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; background: var(--d-red); color: #fff;
    font-family: var(--d-font-display); font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
    box-shadow: var(--d-glow-sm);
}
.p-nav-item.is-active .p-nav-badge { background: #fff; color: var(--d-red); box-shadow: none; }

.p-side-foot { flex: none; display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.75rem 0.8rem; border-top: 1px solid var(--d-line-soft); background: rgba(0, 0, 0, 0.2); }
.p-me {
    display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.6rem;
    border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--p-tile); box-shadow: var(--d-inner-hi);
    text-align: left; transition: border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.p-me:hover, .p-me[aria-expanded="true"] { border-color: var(--d-line-strong); background: var(--p-btn-hover); }
.p-me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-me-name { font-size: 0.92rem; font-weight: 600; color: var(--d-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-me-rank { margin-top: 0.08rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #ff4a59; }
.p-me-more { color: var(--d-faint); font-size: 0.85rem; }

/* barre repliée en icônes (choix de l'utilisateur au-dessus de 1100 px ; automatique entre 901 et 1100 px, voir §18) */
@media (min-width: 1101px) {
    .p-shell.is-collapsed .p-brand { justify-content: center; padding: 1rem 0.5rem 0.95rem; }
    .p-shell.is-collapsed .p-brand-text,
    .p-shell.is-collapsed .p-nav-text,
    .p-shell.is-collapsed .p-me-text,
    .p-shell.is-collapsed .p-me-more { display: none; }
    .p-shell.is-collapsed .p-brand::after { left: 0.9rem; right: 0.9rem; }
    .p-shell.is-collapsed .p-nav { padding-left: 0.6rem; padding-right: 0.6rem; }
    .p-shell.is-collapsed .p-nav-label { height: 1px; margin: 0.7rem 0.6rem; background: var(--d-line-soft); color: transparent; }
    .p-shell.is-collapsed .p-nav-item { justify-content: center; padding: 0; min-height: 2.65rem; }
    .p-shell.is-collapsed .p-nav-item > i { width: auto; font-size: 1.05rem; }
    .p-shell.is-collapsed .p-nav-item:hover > i { transform: none; }
    .p-shell.is-collapsed .p-nav-badge { position: absolute; top: 0.18rem; right: 0.22rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem; font-size: 0.58rem; }
    .p-shell.is-collapsed .p-side-foot { align-items: center; padding-left: 0.5rem; padding-right: 0.5rem; }
    .p-shell.is-collapsed .p-me { justify-content: center; padding: 0.4rem; width: auto; }
}

@media (max-height: 960px) and (min-width: 901px) {
    .p-brand { padding-top: 0.85rem; padding-bottom: 0.8rem; }
    .p-nav { padding-top: 0.55rem; }
    .p-nav-item { min-height: 2.28rem; }
    .p-nav-label { margin-top: 0.7rem; margin-bottom: 0.15rem; }
    .p-side-foot { padding-top: 0.55rem; padding-bottom: 0.6rem; }
    .p-me { padding-top: 0.45rem; padding-bottom: 0.45rem; }
}
@media (max-height: 800px) and (min-width: 901px) {
    .p-brand-logo { width: 2.6rem; height: 2.6rem; }
    .p-nav-item { min-height: 2.05rem; font-size: 0.9rem; }
    .p-nav-label { margin-top: 0.5rem; margin-bottom: 0.1rem; font-size: 0.62rem; }
    .p-nav, .p-nav-group { gap: 0.1rem; }
    .p-shell.is-collapsed .p-nav-item { min-height: 2.25rem; }
}

/* ─── 4. Barre du haut ─────────────────────────────────────────────────────────────────────────── */

.p-top {
    position: relative;
    z-index: 20;
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: var(--p-top-h);
    padding: 0.55rem var(--p-pad);
    border-bottom: 1px solid var(--d-line-soft);
}
.p-burger { flex: none; width: 2.35rem; height: 2.35rem; display: grid; place-items: center; margin-left: -0.3rem; border-radius: var(--d-r); border: 1px solid transparent; color: var(--d-muted); font-size: 1rem; transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease); }
.p-burger:hover, .p-burger[aria-expanded="true"] { color: #fff; border-color: var(--d-line); background: rgba(255, 255, 255, 0.04); }
.p-top-logo { display: none; flex: none; width: 2.2rem; height: 2.2rem; object-fit: contain; filter: drop-shadow(0 0 0.5rem rgba(var(--d-red-rgb), 0.35)); }
.p-top .p-btn--icon { width: 2.35rem; height: 2.35rem; }
.p-top-title { min-width: 0; display: flex; align-items: baseline; gap: 0.75rem; }
.p-top-title h1 {
    min-width: 0;
    font-family: var(--d-font-display);
    font-weight: 800;
    font-stretch: 104%;
    font-size: 1.5rem;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--d-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.p-top-title small { flex: none; font-size: 0.84rem; font-weight: 600; color: var(--d-muted); white-space: nowrap; }
.p-top-right { margin-left: auto; flex: none; display: flex; align-items: center; gap: 0.5rem; }

.p-top-server { display: inline-flex; align-items: center; gap: 0.45rem; }
.p-status { display: inline-flex; border-radius: var(--d-r-sm); }
.p-status .d-pill { height: 2.1rem; padding: 0 0.7rem; cursor: pointer; transition: border-color var(--d-dur) var(--d-ease), filter var(--d-dur) var(--d-ease); }
.p-status:hover .d-pill { filter: brightness(1.15); }
.p-status[aria-expanded="true"] .d-pill { border-color: currentColor; }
.p-top-players {
    display: inline-flex; align-items: center; gap: 0.45rem; height: 2.1rem; padding: 0 0.7rem;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.025);
    color: var(--d-text-2); white-space: nowrap; transition: border-color var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease);
}
.p-top-players > i { color: var(--d-good); font-size: 0.85rem; }
.p-top-players > b { font-family: var(--d-font-display); font-weight: 700; font-size: 0.98rem; color: var(--d-text); font-variant-numeric: tabular-nums; }
.p-top-players > small { font-size: 0.78rem; color: var(--d-muted); font-variant-numeric: tabular-nums; }
.p-top-players:hover { border-color: var(--d-line-strong); color: #fff; }

/* compte à rebours de redémarrage / arrêt (topic countdown) : pastille ambre, rouge dans la dernière minute */
.p-top-cd { display: inline-flex; }
.p-top-cd-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; height: 2.1rem; padding: 0 0.7rem;
    border-radius: var(--d-r-sm); border: 1px solid rgba(var(--d-warn-rgb), 0.55);
    background: linear-gradient(180deg, rgba(var(--d-warn-rgb), 0.16), rgba(var(--d-warn-rgb), 0.05));
    color: var(--d-text-2); white-space: nowrap;
    transition: border-color var(--d-dur) var(--d-ease), filter var(--d-dur) var(--d-ease);
}
.p-top-cd-btn > i { color: var(--d-warn); font-size: 0.85rem; }
.p-top-cd-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.p-top-cd-btn > b { font-family: var(--d-font-display); font-weight: 700; font-size: 0.98rem; color: var(--d-warn); font-variant-numeric: tabular-nums; min-width: 2.6rem; text-align: right; }
.p-top-cd-btn:hover { filter: brightness(1.15); }
.p-top-cd-btn[aria-expanded="true"] { border-color: var(--d-warn); }
.p-top-cd-btn.is-urgent { 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.1)); }
.p-top-cd-btn.is-urgent > i, .p-top-cd-btn.is-urgent > b { color: #ff5361; }
.p-top-cd-body { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.75rem 0.85rem 0.35rem; }
.p-top-cd-big { display: flex; align-items: baseline; gap: 0.6rem; }
.p-top-cd-big > b { font-family: var(--d-font-display); font-weight: 700; font-size: 1.7rem; line-height: 1; color: var(--d-warn); font-variant-numeric: tabular-nums; }
.p-top-cd-big > span { font-size: 0.84rem; color: var(--d-muted); }
.p-top-cd-body .p-status-rows { padding: 0; }
.p-top-cd-msg { white-space: normal; max-width: 13rem; }
.p-linkbtn.is-danger { color: #ff5361; }
.p-linkbtn.is-danger:hover { color: #fff; }

.p-top-search {
    display: flex; align-items: center; gap: 0.6rem; width: 15.5rem; height: 2.35rem; padding: 0 0.45rem 0 0.8rem;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: var(--d-input);
    color: var(--d-faint); font-size: 0.88rem; text-align: left;
    transition: border-color var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease);
}
.p-top-search > i { color: var(--d-muted); font-size: 0.85rem; }
.p-top-search > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-top-search:hover { border-color: var(--d-line-strong); color: var(--d-muted); }
.p-top-kbd { flex: none; display: inline-flex; }
.p-top-bell { display: inline-flex; }
.p-top-account {
    display: inline-flex; align-items: center; gap: 0.55rem; height: 2.35rem; padding: 0 0.6rem 0 0.25rem;
    border-radius: var(--d-r); border: 1px solid transparent; color: var(--d-text-2);
    transition: border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.p-top-account:hover, .p-top-account[aria-expanded="true"] { border-color: var(--d-line); background: rgba(255, 255, 255, 0.03); color: #fff; }
.p-top-account-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.9rem; }
.p-top-account > i { font-size: 0.7rem; color: var(--d-faint); }

/* fenêtre « État du serveur » et notifications (popovers en carte) */
.p-pop-head { display: flex; align-items: center; gap: 0.55rem; padding: 0.7rem 0.85rem 0.65rem; border-bottom: 1px solid var(--d-line-soft); }
.p-pop-head > i { color: var(--d-red-hi); font-size: 0.9rem; filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.55)); }
.p-pop-head > b { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.p-pop-head .d-pill { height: 1.6rem; }
.p-pop-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; min-height: 2.4rem; padding: 0.4rem 0.85rem; border-top: 1px solid var(--d-line-soft); }
.p-pop-foot .p-linkbtn { font-size: 0.8rem; }
.p-pop-foot a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; color: var(--d-muted); }
.p-pop-foot a > i { font-size: 0.65rem; transition: transform var(--d-dur) var(--d-ease); }
.p-pop-foot a:hover { color: #fff; }
.p-pop-foot a:hover > i { color: var(--d-red-hi); transform: translate(2px, 0); }
.p-status-rows { padding: 0.35rem 0.85rem; }
.p-status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.05rem; border-bottom: 1px solid var(--d-line-soft); font-size: 0.86rem; }
.p-status-row:last-child { border-bottom: 0; }
.p-status-row > span { color: var(--d-muted); }
.p-status-row > b { font-weight: 600; color: var(--d-text); font-variant-numeric: tabular-nums; text-align: right; }
.p-status-row > b.is-good { color: var(--d-good); }
.p-status-row > b.is-bad { color: var(--d-red-hi); }
.p-status-row > b.is-warn { color: var(--d-warn); }
.p-status-row > b.is-muted { color: var(--d-faint); }
.p-notif-list { max-height: min(26rem, 60vh); overflow-y: auto; padding: 0.3rem; }
.p-notif {
    position: relative; display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; padding: 0.6rem 0.6rem 0.6rem 0.65rem;
    border-radius: var(--d-r); text-align: left; transition: background var(--d-dur) var(--d-ease);
}
.p-notif + .p-notif { margin-top: 0.1rem; }
.p-notif:hover, .p-notif:focus-visible { background: rgba(255, 255, 255, 0.04); outline: none; }
.p-notif.is-unread { background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.09), transparent 70%); }
.p-notif.is-unread::before { content: ''; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 2px; border-radius: 2px; background: var(--d-red-hi); box-shadow: 0 0 0.5rem rgba(var(--d-red-rgb), 0.8); }
.p-notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.p-notif-body > b { font-size: 0.88rem; font-weight: 600; color: var(--d-text); }
.p-notif-text { font-size: 0.82rem; line-height: 1.38; color: var(--d-text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.p-notif-time { font-size: 0.72rem; color: var(--d-faint); }

/* ─── 5. Contenu et pages ──────────────────────────────────────────────────────────────────────── */

.p-content {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    padding: var(--p-pad) var(--p-pad) calc(var(--p-pad) + 0.25rem);
    scroll-padding-top: 1rem;
}
.p-content:focus { outline: none; }
.p-content.is-fill, .p-content.is-flush { overflow: hidden; }
.p-content.is-flush { padding: 0; }
.p-page { flex: 1 0 auto; display: flex; flex-direction: column; gap: var(--p-gap); min-width: 0; animation: d-fade-in 0.24s var(--d-ease) both; }
.p-page.is-fill, .p-page.is-flush { flex: 1 1 auto; min-height: 0; }
.p-page-center { flex: 1; display: grid; place-items: center; padding: 1rem 0; }
.p-state-card { width: min(36rem, 100%); }
.p-state-card .p-empty { padding: 2rem 1.5rem 1.75rem; }

/* page provisoire « En construction » */
.p-construction { width: 100%; }
.p-construction-in { display: flex; align-items: flex-start; gap: 1.25rem; padding: 0.6rem 0.4rem 0.2rem; }
.p-construction-text { min-width: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.p-construction-title { font-family: var(--d-font-display); font-weight: 800; font-stretch: 104%; font-size: 1.7rem; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--d-text); }
.p-construction-text > p { max-width: 64ch; color: var(--d-text-2); line-height: 1.5; }
.p-construction-perm { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.84rem; color: var(--d-muted) !important; }
.p-construction-perm > i { color: var(--d-faint); }
.p-construction-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-top: 1.1rem; padding: 0 0.4rem 0.2rem; }
.p-construction-list > li { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.5rem 0.85rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: rgba(255, 255, 255, 0.022); color: var(--d-text-2); font-size: 0.9rem; }
.p-construction-list > li > i { flex: none; font-size: 0.7rem; color: var(--d-red-hi); }
.p-construction.has-preview { display: flex; flex-direction: column; gap: var(--p-gap); }
.p-construction.is-fill { flex: 1 1 auto; min-height: 0; }
/* silhouette de la future page : décor estompé, jamais interactif */
.p-ghost { position: relative; display: flex; flex-direction: column; gap: var(--p-gap); flex: 1 1 auto; min-height: 0; opacity: 0.5; pointer-events: none; user-select: none;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.p-ghost-panel { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: 0.85rem 1.1rem 1rem; border-radius: var(--d-r-lg); border: 1px solid var(--d-line-soft); background: linear-gradient(180deg, rgba(20, 22, 27, 0.9), rgba(13, 14, 18, 0.9)); }
.p-ghost-panel.p-grow { flex: 1 1 auto; min-height: 18rem; }
.p-ghost-head { display: flex; align-items: center; gap: 0.6rem; }
.p-ghost-kpi { display: flex; align-items: center; gap: 0.9rem; min-height: 5.2rem; padding: 0.85rem 1rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: linear-gradient(180deg, rgba(22, 24, 29, 0.9), rgba(15, 16, 20, 0.9)); }
.p-ghost-kpi > .p-skel:first-child { flex: none; border-radius: var(--d-r); }
.p-ghost-rows { display: flex; flex-direction: column; }
.p-ghost-row { display: flex; align-items: center; gap: 1.2rem; height: 2.35rem; border-bottom: 1px solid var(--d-line-soft); }
.p-ghost-row:last-child { border-bottom: 0; }
.p-ghost-toolbar { display: flex; gap: 0.5rem; }
.p-ghost-toolbar > .p-skel { border-radius: var(--d-r-sm); }
.p-ghost-chart { height: 12rem; border-radius: var(--d-r); background: repeating-linear-gradient(0deg, transparent 0 2.95rem, var(--d-line-soft) 2.95rem 3rem), linear-gradient(180deg, rgba(var(--d-red-rgb), 0.08), transparent); }
.p-ghost-map { position: relative; flex: 1; min-height: 16rem; border-radius: var(--d-r); background: radial-gradient(40% 50% at 55% 55%, rgba(var(--d-red-rgb), 0.07), transparent 70%), repeating-linear-gradient(90deg, transparent 0 3.95rem, rgba(255, 255, 255, 0.03) 3.95rem 4rem), repeating-linear-gradient(0deg, transparent 0 3.95rem, rgba(255, 255, 255, 0.03) 3.95rem 4rem), #0a0b0e; }
.p-ghost-card { position: absolute; top: 1rem; left: 1rem; width: 15rem; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: #121418; }
.p-ghost-console { flex: 1; display: flex; flex-direction: column; gap: 0.62rem; padding: 0.85rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: var(--d-input); }
.p-ghost-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.p-ghost-kv > div { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem 0.75rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); }
.p-ghost-hero { flex-direction: row; align-items: center; gap: 1rem; }
.p-ghost-hero > .p-skel:first-child { flex: none; border-radius: var(--d-r); }
.p-ghost-field { display: flex; flex-direction: column; gap: 0.45rem; }
.p-ghost-field > .p-skel:last-child { border-radius: var(--d-r-sm); }

/* ─── 6. Boutons (tablette admin : casse de phrase, rouge TEINTÉ ; rouge plein = une action par vue) ─── */

.p-btn {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    height: var(--p-ctl-h);
    padding: 0 0.95rem;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line-strong);
    background: var(--p-btn);
    color: var(--d-text);
    font-family: var(--d-font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    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), opacity var(--d-dur) var(--d-ease);
}
.p-btn > i { flex: none; font-size: 0.92em; color: #aeb2bb; transition: color var(--d-dur) var(--d-ease), transform var(--d-dur) var(--d-ease); }
.p-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding-block: 0.2em; margin-block: -0.2em; } /* Q3 : l'accent des capitales (É, À) n'est plus rogné */
.p-btn-right { margin-left: 0.1em; font-size: 0.72em !important; opacity: 0.85; }
.p-btn:hover { border-color: #565b66; background: var(--p-btn-hover); }
.p-btn:hover > i { color: #fff; }
.p-btn:active { transform: translate(0, 1px); }
.p-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.p-btn:disabled, .p-btn[aria-disabled="true"] { opacity: 0.42; pointer-events: none; box-shadow: none; }
.p-btn.is-loading { opacity: 0.75; }

.p-btn--primary { border-color: rgba(var(--d-red-hi-rgb), 0.85); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.36), rgba(var(--d-red-rgb), 0.15)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0.9rem rgba(var(--d-red-rgb), 0.16); }
.p-btn--primary > i { color: #fff; }
.p-btn--primary:hover { border-color: var(--d-red-hi); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.55), rgba(var(--d-red-rgb), 0.26)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 1.2rem rgba(var(--d-red-rgb), 0.34); }
.p-btn--solid, .p-modal > .p-modal-foot .p-btn--primary, .p-modal > .p-modal-foot .p-btn--danger {
    border-color: rgba(255, 76, 90, 0.9);
    background: var(--d-red-grad);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
    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);
}
.p-btn--solid > i, .p-modal > .p-modal-foot .p-btn--primary > i, .p-modal > .p-modal-foot .p-btn--danger > i { color: #fff; }
.p-btn--solid:hover, .p-modal > .p-modal-foot .p-btn--primary:hover, .p-modal > .p-modal-foot .p-btn--danger: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);
}
.p-btn--danger { border-color: rgba(var(--d-red-hi-rgb), 0.62); color: #ff5361; background: rgba(var(--d-red-rgb), 0.07); }
.p-btn--danger > i { color: #ff5361; }
.p-btn--danger:hover { border-color: var(--d-red-hi); background: rgba(var(--d-red-rgb), 0.16); color: #fff; }
.p-btn--danger:hover > i { color: #fff; }
.p-btn--good > i { color: var(--d-good); }
.p-btn--good:hover { border-color: rgba(var(--d-good-rgb), 0.6); }
.p-btn--good:hover > i { color: var(--d-good); }
.p-btn--warn > i { color: var(--d-warn); }
.p-btn--warn:hover { border-color: rgba(var(--d-warn-rgb), 0.6); }
.p-btn--warn:hover > i { color: var(--d-warn); }
.p-btn--ghost { background: transparent; border-color: transparent; color: var(--d-text-2); box-shadow: none; }
.p-btn--ghost:hover { background: rgba(255, 255, 255, 0.06); border-color: transparent; color: #fff; }
/* allumé (spectate en cours, gelé…) : même langage que l'onglet actif + point blanc */
.p-btn.is-on { color: #fff; border-color: rgba(var(--d-red-hi-rgb), 0.8); background: var(--p-active); box-shadow: var(--d-glow-sm); }
.p-btn.is-on > i { color: #fff; }
.p-btn.is-on:not(.p-btn--icon):not(.p-pager-num)::after { content: ''; position: absolute; top: 0.3rem; right: 0.3rem; width: 0.34rem; height: 0.34rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0.45rem rgba(var(--d-red-hi-rgb), 0.95); }
.p-btn--ghost.is-on { background: rgba(255, 255, 255, 0.07); border-color: transparent; box-shadow: none; }

.p-btn--sm { height: var(--p-ctl-h-sm); padding: 0 0.7rem; font-size: 0.82rem; border-radius: var(--d-r-sm); }
.p-btn--lg { height: 3.05rem; padding: 0 1.4rem; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.045em; text-transform: uppercase; }
.p-btn--block { display: flex; width: 100%; }
.p-btn--icon { width: var(--p-ctl-h); padding: 0; }
.p-btn--icon > i { font-size: 0.95rem; }
.p-btn--icon.p-btn--sm { width: var(--p-ctl-h-sm); }
.p-btn--icon.p-btn--sm > i { font-size: 0.82rem; }
.p-btn--icon.p-btn--lg { width: 3.05rem; }
.p-btn-badge {
    position: absolute; top: -0.4rem; right: -0.4rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.28rem;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
    background: var(--d-red); color: #fff; border: 2px solid #0d0e12;
    font-family: var(--d-font-display); font-size: 0.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
    box-shadow: var(--d-glow-sm);
}
.p-copy.is-copied > i, .p-btn.is-copied > i { color: var(--d-good) !important; }
.p-dd-anchor { display: inline-flex; }
.p-tip-anchor { display: inline-flex; max-width: 100%; }
.p-tip-anchor.p-nav-tip { display: flex; flex: none; width: 100%; }
.p-nav-tip > .p-nav-item { flex: 1; min-width: 0; }

/* action principale répétée à chaque ligne d'un tableau ou d'une liste : contour rouge sur fond sombre */
.p-table td .p-btn--primary, .p-li-acts .p-btn--primary { border-color: rgba(var(--d-red-hi-rgb), 0.6); background: var(--p-btn); box-shadow: none; }
.p-table td .p-btn--primary > i, .p-li-acts .p-btn--primary > i { color: var(--d-red-hi); }
.p-table td .p-btn--primary:hover, .p-li-acts .p-btn--primary:hover { border-color: var(--d-red-hi); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.4), rgba(var(--d-red-rgb), 0.18)); }
.p-table td .p-btn--primary:hover > i, .p-li-acts .p-btn--primary:hover > i { color: #fff; }

/* ─── 7. Panneaux, tuiles de chiffres, clé / valeur, état vide, barre d'outils ─────────────────── */

.p-panel { display: flex; flex-direction: column; min-width: 0; box-shadow: var(--d-inner-hi), 0 0.5rem 1.4rem rgba(0, 0, 0, 0.32); }
.p-panel-head { flex: none; gap: 0.65rem; min-height: 3.05rem; padding: 0.7rem 1.1rem 0.6rem; }
.p-panel-head .d-panel-title { gap: 0.62rem; font-size: 0.92rem; line-height: 1.2; min-width: 0; }
.p-panel-head .d-panel-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-panel-sub { flex: none; font-size: 0.8rem; font-weight: 600; color: var(--d-muted); white-space: nowrap; }
.p-panel-actions { flex: none; display: flex; align-items: center; gap: 0.4rem; }
.p-panel-actions .p-search { width: 15rem; }
.p-panel-body { flex: 1; min-width: 0; padding: 0.25rem 1.1rem 1.1rem; }
.p-panel-body.is-headless { padding-top: 1.1rem; }
.p-panel-body.is-flush { padding: 0; }
.p-panel-body.is-flush:last-child { overflow: hidden; border-radius: 0 0 var(--d-r-lg) var(--d-r-lg); }
.p-panel-body.is-flush.is-headless { border-radius: var(--d-r-lg); }
.p-panel-head + .p-panel-body.is-flush { border-top: 1px solid var(--d-line-soft); }
.p-panel-foot { padding: 0.65rem 1.1rem; gap: 0.5rem; }
.p-panel-body > .p-toolbar:first-child { margin-top: 0.15rem; }
.p-panel-body.is-flush > .p-toolbar { margin: 0; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--d-line-soft); }
.p-panel-body.is-flush > .p-pager { margin: 0; padding: 0.6rem 1.1rem; border-top: 1px solid var(--d-line-soft); }

/* tuile de chiffre (KPI) : façon .stat de la tablette admin */
.p-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    min-height: 5.2rem;
    padding: 0.85rem 1rem;
    border-radius: var(--d-r);
    border: 1px solid var(--d-line);
    background: var(--p-tile);
    box-shadow: var(--d-inner-hi);
    color: inherit;
    text-align: left;
    --kpi: var(--d-silver);
    --kpi-rgb: 217, 220, 225;
}
.p-kpi::after { content: ''; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(var(--d-red-hi-rgb), 0.55), transparent 70%); pointer-events: none; }
.p-kpi.is-click { cursor: pointer; transition: border-color var(--d-dur) var(--d-ease), transform var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-kpi.is-click:hover { border-color: var(--d-line-strong); background: var(--p-btn-hover); transform: translate(0, -1px); }
.p-kpi-icon {
    flex: none; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: var(--d-r);
    border: 1px solid var(--d-line-strong); background: rgba(255, 255, 255, 0.035); color: #e4e6ea; font-size: 1.05rem;
}
.p-kpi--good .p-kpi-icon { border-color: rgba(var(--d-good-rgb), 0.65); 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); }
.p-kpi--warn .p-kpi-icon { border-color: rgba(var(--d-warn-rgb), 0.65); 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); }
.p-kpi--red .p-kpi-icon { border-color: rgba(var(--d-red-hi-rgb), 0.8); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.22), rgba(var(--d-red-rgb), 0.05)); color: var(--d-red-hi); box-shadow: inset 0 0 0.9rem rgba(var(--d-red-rgb), 0.18), 0 0 0.6rem rgba(var(--d-red-rgb), 0.12); }
.p-kpi--info .p-kpi-icon { border-color: rgba(var(--d-info-rgb), 0.5); background: linear-gradient(180deg, rgba(var(--d-info-rgb), 0.13), rgba(var(--d-info-rgb), 0.03)); color: #dfe5ee; }
.p-kpi-main { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-kpi-value { display: flex; align-items: baseline; gap: 0.35rem; min-width: 0; font-family: var(--d-font-display); font-weight: 700; font-size: 1.7rem; line-height: 1.05; letter-spacing: 0.01em; color: var(--d-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kpi-value > small { font-family: var(--d-font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--d-muted); }
.p-kpi-label { margin-top: 0.32rem; font-size: 0.68rem; font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kpi-sub { margin-top: 0.15rem; font-size: 0.76rem; color: var(--d-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kpi-spark { flex: none; align-self: flex-end; width: 30%; max-width: 7.5rem; margin-bottom: -0.15rem; opacity: 0.85; pointer-events: none; }

/* clé / valeur */
.p-kv { display: grid; grid-template-columns: repeat(var(--kv-cols, 2), minmax(0, 1fr)); gap: 0.5rem; }
.p-kv-item { min-width: 0; padding: 0.55rem 0.75rem; border-radius: var(--d-r); background: rgba(255, 255, 255, 0.022); border: 1px solid var(--d-line-soft); }
.p-kv-item > dt { margin-bottom: 0.22rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.p-kv-item > dd { font-weight: 600; font-size: 0.95rem; line-height: 1.3; color: var(--d-text); overflow-wrap: anywhere; }
.p-kv-item > dd.is-mono { font-family: var(--d-font-cond); font-weight: 500; font-size: 0.9rem; color: var(--d-text-2); }
.p-kv-hint { display: block; margin-top: 0.15rem; font-size: 0.74rem; color: var(--d-faint); }
.p-kv.is-compact { gap: 0.35rem; }
.p-kv.is-compact .p-kv-item { padding: 0.4rem 0.6rem; }
.p-kv.is-compact .p-kv-item > dd { font-size: 0.88rem; }

/* état vide */
.p-empty { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.2rem 1.25rem; text-align: center; color: var(--d-muted); }
.p-empty-icon { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin-bottom: 0.25rem; border-radius: var(--d-r); border: 1px solid var(--d-line-strong); background: rgba(255, 255, 255, 0.03); color: var(--d-faint); font-size: 1.3rem; }
.p-empty--red .p-empty-icon { border-color: rgba(var(--d-red-hi-rgb), 0.7); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05)); color: var(--d-red-hi); 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); }
.p-empty--warn .p-empty-icon { border-color: rgba(var(--d-warn-rgb), 0.6); color: var(--d-warn); background: rgba(var(--d-warn-rgb), 0.08); }
.p-empty-title { font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--d-text); }
.p-empty-text { max-width: 46ch; font-size: 0.9rem; line-height: 1.5; color: var(--d-muted); }
.p-empty-action { margin-top: 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.p-empty.is-compact { padding: 1.4rem 1rem; gap: 0.35rem; }
.p-empty.is-compact .p-empty-icon { width: 2.4rem; height: 2.4rem; font-size: 1rem; margin-bottom: 0.1rem; }
.p-empty.is-compact .p-empty-text { font-size: 0.86rem; }

/* barre d'outils (au-dessus d'un tableau) */
.p-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.8rem; min-width: 0; }
.p-toolbar .p-search { width: 18rem; max-width: 100%; }
.p-toolbar > .p-tabs { flex: none; }

/* ─── 8. Tableaux denses et pagination ─────────────────────────────────────────────────────────── */

.p-table-wrap { position: relative; width: 100%; min-width: 0; overflow-x: auto; transition: opacity var(--d-dur) var(--d-ease); }
.p-table-wrap.is-scroll { overflow-y: auto; }
.p-table-wrap.is-loading { opacity: 0.55; pointer-events: none; }
.p-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.p-table th {
    padding: 0.6rem 0.75rem;
    text-align: left;
    white-space: nowrap;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--d-muted);
    background: var(--p-th);
    border-bottom: 1px solid var(--d-line);
}
.p-table.is-sticky th { position: sticky; top: 0; z-index: 2; }
.p-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--d-line-soft); color: var(--d-text-2); vertical-align: middle; transition: background var(--d-dur) var(--d-ease); }
.p-table th:first-child, .p-table td:first-child { padding-left: 1.1rem; }
.p-table th:last-child, .p-table td:last-child { padding-right: 1.1rem; }
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table td b, .p-table td strong { font-weight: 600; color: var(--d-text); }
.p-table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
.p-table tr.is-click { cursor: pointer; }
.p-table tr.is-click:hover td { background: rgba(var(--d-red-rgb), 0.075); }
.p-table tr.is-click:hover td:first-child, .p-table tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--d-red-hi); }
.p-table tr.is-click:focus-visible { outline: none; }
.p-table tr.is-click:focus-visible td { background: rgba(var(--d-red-rgb), 0.1); }
.p-table tr.is-click:focus-visible td:first-child { box-shadow: inset 2px 0 0 #fff; }
.p-table tr.is-active td { background: rgba(var(--d-red-rgb), 0.11); }
.p-table tr.is-checked td { background: rgba(var(--d-red-rgb), 0.07); }
.p-table .p-td-sel { width: 2.6rem; padding-right: 0; }
.p-table .p-td-sel .p-check { margin: 0; }
.p-table .is-right { text-align: right; }
.p-table .is-center { text-align: center; }
.p-table .is-nowrap { white-space: nowrap; }
.p-table td.is-num { font-family: var(--d-font-display); font-weight: 600; font-size: 0.93rem; color: var(--d-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-table td.is-mono { font-family: var(--d-font-cond); font-weight: 500; font-size: 0.86rem; color: var(--d-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-table.is-dense th { padding: 0.5rem 0.55rem; }
.p-table.is-dense td { padding: 0.42rem 0.55rem; font-family: var(--d-font-cond); font-weight: 500; font-size: 0.92rem; }
.p-table.is-dense th:first-child, .p-table.is-dense td:first-child { padding-left: 1.1rem; }
.p-table.is-dense th:last-child, .p-table.is-dense td:last-child { padding-right: 1.1rem; }
.p-table.is-dense td.is-num { font-family: var(--d-font-cond); font-weight: 600; font-size: 0.95rem; }
.p-table td .d-badge { vertical-align: middle; }
.p-table td .p-btn--sm { height: 1.9rem; }
.p-table td small, .p-td-sub { color: var(--d-faint); }
.p-td-sub { display: block; margin-top: 0.1rem; font-size: 0.78rem; }
.p-td-acts { display: flex; justify-content: flex-end; gap: 0.3rem; }
.p-th-sort { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.p-th-sort > i { font-size: 0.85em; opacity: 0.35; transition: opacity var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease); }
.p-th-sort:hover { color: var(--d-text); }
.p-th-sort:hover > i { opacity: 0.8; }
.p-th-sort.is-active { color: var(--d-text); }
.p-th-sort.is-active > i { opacity: 1; color: var(--d-red-hi); }
.is-right > .p-th-sort { flex-direction: row-reverse; }
.p-table tr.is-skel td { border-bottom-color: var(--d-line-soft); }
.p-table tr.is-skel:hover td { background: none; }
.p-td-empty { padding: 0 !important; }
.p-table tr.is-empty:hover td { background: none; }

.p-pager { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.8rem; }
.p-pager-info { font-size: 0.8rem; font-weight: 600; color: var(--d-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-pager-num { min-width: var(--p-ctl-h-sm); padding: 0 0.45rem; font-family: var(--d-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-pager-num.is-on { box-shadow: none; }
.p-pager-gap { padding: 0 0.2rem; color: var(--d-faint); }
.p-pager-cur { padding: 0 0.5rem; font-family: var(--d-font-display); font-weight: 600; font-size: 0.86rem; color: var(--d-text-2); font-variant-numeric: tabular-nums; }

/* ─── 9. Champs ────────────────────────────────────────────────────────────────────────────────── */

.p-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.p-field + .p-field { margin-top: 0.85rem; }
.p-field-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--d-muted); }
.p-req { margin-left: 0.25rem; color: var(--d-red-hi); }
.p-field-hint { font-size: 0.78rem; line-height: 1.4; color: var(--d-faint); }
.p-field-error, .p-form-error { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; line-height: 1.35; color: var(--d-red-hi); }
.p-field-error > i, .p-form-error > i { margin-top: 0.12rem; }
.p-form-error { margin-top: 0.6rem; font-size: 0.86rem; animation: d-fade-in var(--d-dur) var(--d-ease) both; }
.p-field.is-inline { flex-direction: row; align-items: center; gap: 0.75rem; }
.p-field.is-inline > .p-field-label { flex: none; width: 11rem; }
.p-field.has-error .d-input, .p-field.has-error .d-select, .p-field.has-error .d-textarea { border-color: rgba(var(--d-red-hi-rgb), 0.7); }

.p-input, .p-select, .p-textarea { height: var(--p-ctl-h); padding: 0 0.85rem; font-size: 0.93rem; }
.p-textarea { height: auto; min-height: 5.5rem; padding: 0.6rem 0.85rem; font-size: 0.93rem; }
.p-input--sm, .p-select.p-input--sm { height: var(--p-ctl-h-sm); padding: 0 0.65rem; font-size: 0.85rem; }
.p-input--lg { height: 3.05rem; font-size: 1rem; }
.p-input:disabled, .p-select:disabled, .p-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.p-input[aria-invalid="true"], .p-select[aria-invalid="true"], .p-textarea[aria-invalid="true"] { border-color: rgba(var(--d-red-hi-rgb), 0.7); }
.p-input--num { font-family: var(--d-font-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-input--num::-webkit-inner-spin-button, .p-input--num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.p-input--num { -moz-appearance: textfield; }
.p-select { padding-right: 2.2rem; cursor: pointer; }
.p-select.is-placeholder { color: var(--d-faint); }
.p-select option { background: #101216; color: var(--d-text); }
.p-input-wrap { position: relative; display: flex; align-items: center; min-width: 0; width: 100%; }
.p-input-wrap > .p-input { flex: 1; min-width: 0; }
.p-input-icon { position: absolute; left: 0.85rem; z-index: 1; color: var(--d-muted); font-size: 0.85rem; pointer-events: none; }
.p-input-wrap.has-icon > .p-input { padding-left: 2.35rem; }
.p-input-wrap.has-suffix > .p-input { padding-right: 3.2rem; }
.p-input-wrap.has-action > .p-input { padding-right: 2.8rem; }
.p-input-suffix { position: absolute; right: 0.8rem; font-size: 0.8rem; font-weight: 600; color: var(--d-muted); pointer-events: none; }
.p-input-action { position: absolute; right: 0.3rem; top: 50%; transform: translate(0, -50%); width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: var(--d-r-sm); color: var(--d-muted); transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-input-action:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.p-input-wrap--sm .p-input-icon { left: 0.65rem; }
.p-input-wrap--sm.has-icon > .p-input { padding-left: 2rem; }
.p-textarea-wrap { position: relative; display: block; }
.p-textarea-wrap > .p-textarea { padding-bottom: 1.5rem; }
.p-count { position: absolute; right: 0.7rem; bottom: 0.45rem; font-family: var(--d-font-cond); font-size: 0.72rem; font-weight: 600; color: var(--d-faint); font-variant-numeric: tabular-nums; pointer-events: none; }
.p-count.is-max { color: var(--d-red-hi); }

/* recherche */
.p-search {
    position: relative; display: flex; align-items: center; gap: 0.55rem; width: 100%; min-width: 0; height: 2.35rem; padding: 0 0.3rem 0 0.8rem;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: var(--d-input); color: var(--d-muted);
    transition: border-color var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.p-search:hover { border-color: var(--d-line-strong); }
.p-search:focus-within { 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; }
.p-search > i { flex: none; font-size: 0.85rem; }
.p-search-input { flex: 1; min-width: 0; height: 100%; padding: 0; background: transparent; border: 0; outline: 0; color: var(--d-text); font-size: 0.92rem; }
.p-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.p-search-clear { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: var(--d-r-xs); color: var(--d-faint); transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-search-clear:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.p-search--sm { height: var(--p-ctl-h-sm); }
.p-search--sm .p-search-input { font-size: 0.85rem; }

/* interrupteur, ligne « toggle », case à cocher */
.p-switch { vertical-align: middle; }
.p-switch.is-disabled { opacity: 0.45; cursor: not-allowed; }
.p-switch input:focus-visible + span { box-shadow: 0 0 0 2px #0b0c0f, 0 0 0 4px rgba(255, 255, 255, 0.8); }
.p-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; min-width: 0;
    padding: 0.5rem 0.85rem 0.5rem 0.55rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: rgba(255, 255, 255, 0.02);
    cursor: pointer; transition: border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.p-toggle + .p-toggle { margin-top: 0.45rem; }
.p-toggle:hover { border-color: var(--d-line-strong); background: rgba(255, 255, 255, 0.035); }
.p-toggle.is-on { border-color: rgba(var(--d-red-hi-rgb), 0.38); background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.11), rgba(var(--d-red-rgb), 0.02) 70%); }
.p-toggle.is-disabled { opacity: 0.4; cursor: not-allowed; }
.p-toggle-lbl { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.p-toggle-ico { flex: none; width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.035); color: var(--d-text-2); font-size: 0.88rem; transition: color var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-toggle.is-on .p-toggle-ico { color: var(--d-red-hi); border-color: rgba(var(--d-red-hi-rgb), 0.75); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05)); }
.p-toggle-text { min-width: 0; display: flex; flex-direction: column; }
.p-toggle-text > b { font-weight: 600; font-size: 0.93rem; color: var(--d-text); }
.p-toggle-text > small { margin-top: 0.08rem; font-size: 0.78rem; color: var(--d-muted); }
.p-check { font-size: 0.92rem; vertical-align: middle; }
.p-check.is-disabled { opacity: 0.45; cursor: not-allowed; }
.p-check input { flex: none; cursor: inherit; }
.p-check input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.p-check.is-mixed input { background: var(--d-red); border-color: var(--d-red-hi); }
.p-check.is-mixed input::after { width: 0.55rem; height: 0; border-left: 0; border-bottom: 2px solid #fff; transform: none; }

/* code à 6 chiffres (2FA) */
.p-code { display: flex; justify-content: center; gap: 0.5rem; }
.p-code-cell {
    width: 3rem; height: 3.55rem; padding: 0; text-align: center;
    border-radius: var(--d-r); border: 1px solid var(--d-line-strong); background: var(--d-input); color: var(--d-text);
    font-family: var(--d-font-display); font-weight: 700; font-size: 1.6rem; font-variant-numeric: tabular-nums; caret-color: var(--d-red-hi);
    transition: border-color var(--d-dur) var(--d-ease), box-shadow var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease);
}
.p-code-cell:nth-child(3) { margin-right: 0.75rem; }
.p-code-cell:hover { border-color: #565b66; }
.p-code-cell:focus { border-color: rgba(var(--d-red-hi-rgb), 0.85); box-shadow: 0 0 0 3px rgba(var(--d-red-rgb), 0.18); background: #0f1116; }
.p-code.is-invalid .p-code-cell { border-color: rgba(var(--d-red-hi-rgb), 0.75); }
.p-code.is-disabled .p-code-cell { opacity: 0.55; }

/* ─── 10. Onglets, badges, données ─────────────────────────────────────────────────────────────── */

.p-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 0.25rem; gap: 0.25rem; }
.p-tabs::-webkit-scrollbar { display: none; }
.p-tab { flex: none; height: 2.1rem; padding: 0 0.85rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; color: var(--d-muted); }
.p-tab > i { font-size: 0.9em; }
.p-tab:disabled { opacity: 0.4; }
.p-tab:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.p-tabs.is-full { display: flex; width: 100%; }
.p-tabs.is-full .p-tab { flex: 1 0 auto; justify-content: center; }
.p-tabs--sm .p-tab { height: 1.8rem; padding: 0 0.65rem; font-size: 0.74rem; }
.p-tab-badge { min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--d-red); color: #fff; font-family: var(--d-font-display); font-size: 0.62rem; font-weight: 700; letter-spacing: 0; box-shadow: var(--d-glow-sm); }
.p-tab.is-active .p-tab-badge { background: #fff; color: var(--d-red); box-shadow: none; }

.p-badge { vertical-align: middle; line-height: 1; }
.p-badge > i { font-size: 0.9em; }
.p-badge--info { border-color: rgba(var(--d-info-rgb), 0.45); color: #dfe5ee; background: rgba(var(--d-info-rgb), 0.08); }
.p-pill { vertical-align: middle; }
.p-pill > i { font-size: 0.9em; }
.p-pill--info { border-color: rgba(var(--d-info-rgb), 0.4); background: rgba(var(--d-info-rgb), 0.07); color: #dfe5ee; }

.p-job { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; max-width: 100%; white-space: nowrap; color: var(--d-text-2); --job: var(--d-silver); }
.p-job-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--job); box-shadow: 0 0 0.45rem var(--job); }
.p-job-name { color: var(--d-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.p-job-grade { color: var(--d-muted); overflow: hidden; text-overflow: ellipsis; }
.p-job-off { margin-left: 0.15rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-faint); }
.p-job.is-off .p-job-dot { background: transparent; border: 1.5px solid var(--job); box-shadow: none; }
.p-job.is-off .p-job-name { color: var(--d-text-2); }
.p-job.is-none { color: var(--d-muted); }
.p-job.is-none .p-job-dot { background: var(--d-faint); box-shadow: none; }

.p-money { font-family: var(--d-font-display); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-money--money { color: var(--d-good); }
.p-money--bank { color: var(--d-silver); }
.p-money--black_money { color: #ff4a59; }
.p-money--credits { color: var(--p-credit); }
.p-money.is-neg { color: var(--d-red-hi); }
.p-ago { white-space: nowrap; font-variant-numeric: tabular-nums; }
.p-fivem { white-space: pre-wrap; overflow-wrap: anywhere; }

.p-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line-strong); background: #1a1d23; color: var(--d-text-2);
    font-family: var(--d-font-display); font-weight: 700; line-height: 1; text-transform: uppercase;
}
.p-avatar > img { width: 100%; height: 100%; object-fit: cover; }
.p-avatar--sm { width: 1.85rem; height: 1.85rem; font-size: 0.72rem; }
.p-avatar--md { width: 2.45rem; height: 2.45rem; font-size: 0.92rem; }
.p-avatar--lg { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; border-radius: var(--d-r); }
.p-avatar--red { border-color: rgba(var(--d-red-hi-rgb), 0.75); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.22), rgba(var(--d-red-rgb), 0.06)); color: #fff; box-shadow: inset 0 0 0.9rem rgba(var(--d-red-rgb), 0.18); }
.p-avatar--red > i { color: var(--d-red-hi); }

/* chargement : roue (fa-rotate) et blocs fantômes FIXES (pas de reflet animé) */
.p-spinner { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--d-muted); }
.p-spinner > i { color: var(--d-red-hi); font-size: 1.35rem; filter: drop-shadow(0 0 0.4rem rgba(var(--d-red-rgb), 0.5)); }
.p-spinner--sm > i { font-size: 0.9rem; }
.p-spinner--lg > i { font-size: 2rem; }
.p-spinner.is-inline { flex-direction: row; vertical-align: middle; }
.p-spinner-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.p-skel { display: block; height: 0.9rem; border-radius: 0.3rem; background: linear-gradient(90deg, #1c1f25, #191b21); }
.p-skel.is-circle { border-radius: 50%; }
.p-skel-lines { display: flex; flex-direction: column; gap: 0.55rem; width: 100%; }
.p-skel-lines > .p-skel { height: 0.8rem; }

/* ─── 11. Menus, popovers, infobulles, palette ─────────────────────────────────────────────────── */

.p-pop {
    position: fixed;
    z-index: 2500;
    min-width: 12rem;
    max-width: calc(100vw - 1rem);
    border-radius: var(--d-r);
    border: 1px solid var(--d-line-strong);
    background: var(--p-pop);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--d-shadow), var(--d-inner-hi);
    opacity: 0;
}
.p-pop.is-placed { opacity: 1; animation: p-pop-in 0.16s var(--d-ease) both; }
.p-pop.is-top { animation-name: p-pop-up; }
.p-pop--card { border-color: var(--d-line); border-radius: var(--d-r-lg); overflow: hidden; }
.p-pop--menu { padding: 0; }
.p-pop--notif .p-pop-head .d-badge { height: 1.25rem; font-size: 0.62rem; }
@keyframes p-pop-in { from { opacity: 0; transform: translate(0, -0.3rem) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes p-pop-up { from { opacity: 0; transform: translate(0, 0.3rem) scale(0.98); } to { opacity: 1; transform: none; } }

.p-menu { display: flex; flex-direction: column; min-width: 13rem; max-height: min(70vh, 32rem); overflow-y: auto; padding: 0.3rem; }
.p-menu > * { flex-shrink: 0; }
.p-menu-item {
    display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 2.2rem; padding: 0.3rem 0.7rem 0.3rem 0.6rem;
    border-radius: var(--d-r-sm); color: var(--d-text-2); font-size: 0.9rem; font-weight: 500; text-align: left; white-space: nowrap;
    transition: background var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease);
}
.p-menu-item > i { flex: none; width: 1.05rem; text-align: center; font-size: 0.85rem; color: var(--d-muted); transition: color var(--d-dur) var(--d-ease); }
.p-menu-item > i.is-blank { visibility: hidden; }
.p-menu-item:hover, .p-menu-item:focus-visible { outline: none; background: rgba(255, 255, 255, 0.055); color: #fff; }
.p-menu-item:hover > i, .p-menu-item:focus-visible > i { color: #fff; }
.p-menu-item:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.p-menu-item.is-danger { color: #ff5361; }
.p-menu-item.is-danger > i { color: #ff5361; }
.p-menu-item.is-danger:hover, .p-menu-item.is-danger:focus-visible { background: rgba(var(--d-red-rgb), 0.14); color: #fff; }
.p-menu-item.is-danger:hover > i { color: #fff; }
.p-menu-item.is-checked > i { color: var(--d-red-hi); }
.p-menu-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.p-menu-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.p-menu-label > small { display: block; margin-top: 0.05rem; font-size: 0.74rem; color: var(--d-faint); white-space: normal; }
.p-menu-hint { flex: none; margin-left: 1rem; font-family: var(--d-font-cond); font-size: 0.76rem; font-weight: 600; color: var(--d-faint); }
.p-menu-sep { height: 1px; margin: 0.3rem 0.4rem; background: var(--d-line-soft); }
.p-menu-head { padding: 0.45rem 0.6rem 0.3rem; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--d-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-menu-empty { padding: 0.8rem 0.9rem; font-size: 0.85rem; color: var(--d-faint); }

.p-tooltip {
    position: fixed; z-index: 3500; max-width: 20rem; padding: 0.32rem 0.55rem;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line-strong); background: #1b1e24;
    box-shadow: var(--d-shadow-sm); color: var(--d-text); font-size: 0.78rem; font-weight: 600; line-height: 1.3;
    pointer-events: none; opacity: 0;
}
.p-tooltip.is-placed { opacity: 1; animation: d-fade-in 0.12s var(--d-ease) both; }

/* palette Ctrl+K */
.p-layer--palette { align-items: start; justify-items: center; padding-top: max(8vh, 3rem); }
.p-palette {
    position: relative; display: flex; flex-direction: column; width: min(40rem, calc(100vw - 1.5rem)); max-height: min(36rem, calc(100% - 4rem));
    border-radius: var(--d-r-lg); border: 1px solid var(--d-line-strong); background: var(--p-pop);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 2rem 4rem rgba(0, 0, 0, 0.7), var(--d-inner-hi);
    overflow: hidden; animation: d-pop-in 0.2s var(--d-ease) both;
}
.p-palette::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--d-red-hi-rgb), 0.9), transparent); box-shadow: 0 0 0.9rem 0.1rem rgba(var(--d-red-rgb), 0.5); pointer-events: none; }
.p-palette-search { flex: none; display: flex; align-items: center; gap: 0.75rem; height: 3.4rem; padding: 0 0.9rem 0 1.1rem; border-bottom: 1px solid var(--d-line-soft); }
.p-palette-search > i { color: var(--d-red-hi); font-size: 1rem; filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.55)); }
.p-palette-search > input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--d-text); font-size: 1.05rem; }
.p-palette-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.35rem 0.4rem 0.5rem; }
.p-palette-group + .p-palette-group { margin-top: 0.3rem; }
.p-palette-group-title { padding: 0.55rem 0.65rem 0.3rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--d-faint); }
.p-palette-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 2.6rem; padding: 0.3rem 0.65rem 0.3rem 0.4rem; border-radius: var(--d-r); border: 1px solid transparent; text-align: left; }
.p-palette-item.is-active { border-color: rgba(var(--d-red-hi-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05) 70%); }
.p-palette-ico { flex: none; width: 1.95rem; height: 1.95rem; display: grid; place-items: center; border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.035); color: var(--d-text-2); font-size: 0.82rem; }
.p-palette-item.is-active .p-palette-ico { border-color: rgba(var(--d-red-hi-rgb), 0.7); color: var(--d-red-hi); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.2), rgba(var(--d-red-rgb), 0.05)); }
.p-palette-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-palette-text > b { font-weight: 600; font-size: 0.93rem; color: var(--d-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-palette-text > small { font-size: 0.78rem; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-palette-hint { flex: none; font-family: var(--d-font-cond); font-size: 0.8rem; font-weight: 600; color: var(--d-faint); }
.p-palette-enter { flex: none; font-size: 0.75rem; color: var(--d-red-hi); opacity: 0; }
.p-palette-item.is-active .p-palette-enter { opacity: 1; }
.p-palette-empty { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 2.2rem 1rem; color: var(--d-muted); font-size: 0.9rem; }
.p-palette-empty > i { font-size: 1.5rem; color: var(--d-faint); }
.p-palette-foot { flex: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding: 0.55rem 1.1rem 0.65rem; border-top: 1px solid var(--d-line-soft); background: rgba(8, 9, 12, 0.45); font-size: 0.74rem; color: var(--d-faint); }
.p-palette-foot > span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* ─── 12. Fenêtres modales, tiroirs, toasts ────────────────────────────────────────────────────── */

.p-layer {
    position: fixed;
    inset: var(--p-titlebar-h) 0 0 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: var(--d-overlay);
    animation: d-fade-in 0.16s var(--d-ease) both;
}
.p-layer--drawer { padding: 0; place-items: stretch; justify-content: end; }
.p-layer--drawer.is-left { justify-content: start; }
.p-modal {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 34rem;
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--d-r-lg);
    border: 1px solid var(--d-line);
    background: linear-gradient(180deg, rgba(24, 26, 32, 0.99) 0%, rgba(14, 15, 19, 0.99) 100%);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), var(--d-shadow), var(--d-inner-hi);
    animation: p-modal-in 0.24s var(--d-ease) both;
}
.p-modal::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; }
.p-modal:focus { outline: none; }
.p-modal--sm { width: 27rem; }
.p-modal--lg { width: 48rem; }
.p-modal--xl { width: 66rem; }
@keyframes p-modal-in { from { opacity: 0; transform: translate(0, 0.8rem) scale(0.985); } to { opacity: 1; transform: none; } }
.p-modal-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0.8rem 0.8rem 1.15rem; border-bottom: 1px solid var(--d-line-soft); }
.p-modal-title { display: flex; align-items: center; gap: 0.65rem; min-width: 0; font-weight: 700; font-size: 1rem; line-height: 1.2; letter-spacing: 0.035em; text-transform: uppercase; color: var(--d-text); }
.p-modal-title::before { content: ''; flex: none; width: 3px; height: 1.15em; border-radius: 2px; background: var(--d-red-hi); box-shadow: 0 0 0.6rem rgba(var(--d-red-rgb), 0.85); }
.p-modal-title > i { color: var(--d-red-hi); font-size: 0.95em; }
.p-modal-title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-modal-x { flex: none; width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: var(--d-r); color: var(--d-muted); transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-modal-x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.p-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem 1.15rem 1.15rem; }
.p-modal-text { font-size: 0.95rem; line-height: 1.5; color: var(--d-text-2); }
.p-modal-text + .p-field, .p-modal-text + .p-code { margin-top: 1rem; }
.p-modal-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: 0.55rem; padding: 0.85rem 1.15rem 0.95rem; border-top: 1px solid var(--d-line-soft); }
.p-modal-foot .p-btn { height: 2.65rem; padding: 0 1.25rem; font-weight: 700; font-size: 0.86rem; letter-spacing: 0.045em; text-transform: uppercase; }
.p-modal-foot .p-btn--ghost { border-color: var(--d-line-strong); background: var(--p-btn); color: var(--d-text); }
.p-modal-foot .p-btn--ghost:hover { border-color: #565b66; background: var(--p-btn-hover); }
.p-mfa-modal .p-code { margin-top: 1.1rem; }

.p-drawer {
    position: relative; display: flex; flex-direction: column; width: min(var(--drawer-w, 28rem), 100vw); height: 100%;
    border-left: 1px solid var(--d-line); background: linear-gradient(180deg, #111318 0%, #0c0d11 100%);
    box-shadow: -1.5rem 0 3rem rgba(0, 0, 0, 0.55), var(--d-inner-hi);
    animation: p-drawer-in 0.26s var(--d-ease) both;
}
.p-drawer.is-left { border-left: 0; border-right: 1px solid var(--d-line); box-shadow: 1.5rem 0 3rem rgba(0, 0, 0, 0.55); animation-name: p-drawer-in-left; }
.p-drawer:focus { outline: none; }
.p-drawer > .p-modal-head { min-height: var(--p-top-h); }
.p-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.1rem 1.15rem 1.25rem; }
@keyframes p-drawer-in { from { opacity: 0.4; transform: translate(2rem, 0); } to { opacity: 1; transform: none; } }
@keyframes p-drawer-in-left { from { opacity: 0.4; transform: translate(-2rem, 0); } to { opacity: 1; transform: none; } }

.p-toasts { position: fixed; top: calc(var(--p-titlebar-h) + var(--p-top-h) + 0.6rem); right: 1rem; z-index: 3000; display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; pointer-events: none; }
.p-toast { pointer-events: auto; width: 23rem; max-width: calc(100vw - 2rem); padding-right: 2.4rem; animation: d-slide-in-right 0.26s var(--d-ease) both; }
.p-toast .d-toast-bar > span { animation: p-toast-time linear both; }
.p-toast.is-paused .d-toast-bar > span { animation-play-state: paused; }
@keyframes p-toast-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.p-toast-x { position: absolute; top: 0.55rem; right: 0.55rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; border-radius: var(--d-r-sm); color: var(--d-faint); font-size: 0.8rem; transition: color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-toast-x:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.p-toast-action { display: inline-flex; align-items: center; margin-top: 0.45rem; height: 1.75rem; padding: 0 0.6rem; border-radius: var(--d-r-sm); border: 1px solid rgba(var(--d-tone-rgb), 0.6); background: rgba(var(--d-tone-rgb), 0.1); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; transition: background var(--d-dur) var(--d-ease); }
.p-toast-action:hover { background: rgba(var(--d-tone-rgb), 0.22); }
.p-toast .d-toast-head { padding-right: 0.2rem; }

.p-shortcuts { display: flex; flex-direction: column; }
.p-shortcut { display: flex; align-items: center; gap: 1rem; min-height: 2.5rem; border-bottom: 1px solid var(--d-line-soft); font-size: 0.9rem; color: var(--d-text-2); }
.p-shortcut:last-child { border-bottom: 0; }
.p-shortcut-keys { flex: none; width: 9.5rem; display: inline-flex; align-items: center; }

/* ─── 13. Fenêtre flottante (FloatingWindow : écran en direct §14.4, outils détachés) ──────────── */

.p-win {
    position: fixed;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--d-r-lg);
    border: 1px solid var(--d-line-strong);
    background: #0b0c0f;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1.6rem 3.6rem rgba(0, 0, 0, 0.7), var(--d-inner-hi);
    overflow: hidden;
    animation: d-pop-in 0.22s var(--d-ease) both;
}
.p-win.is-active { border-color: #4a4f59; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1.8rem 4rem rgba(0, 0, 0, 0.75), 0 0 1.2rem rgba(var(--d-red-rgb), 0.12), var(--d-inner-hi); }
.p-win.is-active::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 3; background: linear-gradient(90deg, transparent, rgba(var(--d-red-hi-rgb), 0.8), transparent); pointer-events: none; }
.p-win.is-max { inset: calc(var(--p-titlebar-h) + 0.5rem) 0.5rem 0.5rem 0.5rem; width: auto !important; height: auto !important; }
.p-win.is-full { inset: 0; border: 0; border-radius: 0; }
.p-win-head {
    flex: none; display: flex; align-items: center; gap: 0.5rem; height: 38px; padding: 0 0.3rem 0 0.75rem;
    border-bottom: 1px solid var(--d-line-soft); background: linear-gradient(180deg, #17191e 0%, #111317 100%);
    cursor: grab; touch-action: none;
}
.p-win:not(.is-active) .p-win-head { background: #111216; }
.p-win.is-max .p-win-head, .p-win.is-full .p-win-head { cursor: default; }
.p-win-icon { flex: none; color: var(--d-red-hi); font-size: 0.85rem; filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.55)); }
.p-win-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--d-text); }
.p-win:not(.is-active) .p-win-title { color: var(--d-text-2); }
.p-win-live { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; height: 1.35rem; padding: 0 0.45rem; border-radius: var(--d-r-xs); border: 1px solid rgba(var(--d-red-hi-rgb), 0.7); background: rgba(var(--d-red-rgb), 0.12); color: #ff4a59; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.p-win-live .d-dot { width: 0.42rem; height: 0.42rem; }
.p-win-actions { flex: none; display: inline-flex; align-items: center; gap: 0.15rem; }
.p-win-head .p-btn--ghost { color: var(--d-muted); }
.p-win-head .p-btn--ghost:hover { color: #fff; }
.p-win-close:hover { background: rgba(var(--d-red-rgb), 0.85) !important; }
.p-win-body { position: relative; flex: 1; min-height: 0; overflow: auto; background: #08090c; }
.p-win-body--pad { padding: 1rem; }
.p-win-media { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.p-win-edge { position: absolute; z-index: 4; touch-action: none; }
.p-win-edge.is-r { top: 38px; right: 0; bottom: 14px; width: 6px; cursor: ew-resize; }
.p-win-edge.is-b { left: 0; right: 14px; bottom: 0; height: 6px; cursor: ns-resize; }
.p-win-grip {
    position: absolute; right: 0; bottom: 0; z-index: 5; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, 0.28) 46% 52%, transparent 52% 64%, rgba(255, 255, 255, 0.28) 64% 70%, transparent 70%);
}
.p-win-grip:hover { background: linear-gradient(135deg, transparent 0 46%, var(--d-red-hi) 46% 52%, transparent 52% 64%, var(--d-red-hi) 64% 70%, transparent 70%); }

/* ─── 14. Graphiques (uPlot) et mini-courbes ───────────────────────────────────────────────────── */

.p-chart { position: relative; width: 100%; min-width: 0; }
.p-chart.is-empty { display: grid; place-items: center; border-radius: var(--d-r); border: 1px dashed var(--d-line); }
.p-chart-plot { position: relative; width: 100%; }
.p-chart-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; margin-bottom: 0.45rem; font-size: 0.74rem; font-weight: 600; color: var(--d-muted); }
.p-chart-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.p-chart-legend i { width: 0.8rem; height: 2px; border-radius: 2px; }
.p-chart .uplot { font-family: var(--d-font-cond); }
.p-chart .u-over { cursor: crosshair; }
.p-chart .u-cursor-x { border-right: 1px solid rgba(255, 255, 255, 0.35) !important; }
.p-chart .u-cursor-y { border-bottom: 1px dashed rgba(255, 255, 255, 0.12) !important; }
.p-chart .u-cursor-pt { border-radius: 50%; }
.p-chart .u-select { background: rgba(var(--d-red-rgb), 0.08); }
.p-chart-tip {
    position: absolute; top: 0; left: 0; z-index: 10; min-width: 9rem; padding: 0.45rem 0.6rem;
    border-radius: var(--d-r-sm); border: 1px solid var(--d-line-strong); background: rgba(21, 23, 28, 0.98);
    box-shadow: var(--d-shadow-sm); pointer-events: none; font-size: 0.78rem; white-space: nowrap;
}
.p-chart-tip-x { margin-bottom: 0.25rem; font-family: var(--d-font-cond); font-weight: 600; color: var(--d-faint); }
.p-chart-tip-row { display: flex; align-items: center; gap: 0.45rem; }
.p-chart-tip-row + .p-chart-tip-row { margin-top: 0.15rem; }
.p-chart-tip-row > i { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.p-chart-tip-row > span { flex: 1; color: var(--d-muted); }
.p-chart-tip-row > b { font-family: var(--d-font-display); font-weight: 600; color: var(--d-text); font-variant-numeric: tabular-nums; }
.p-spark { display: block; width: 100%; overflow: visible; }
.p-spark.is-empty { display: block; }

/* ─── 15. Écrans hors session (connexion, 2FA, attente) ────────────────────────────────────────── */

.p-auth { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; display: flex; background: var(--d-bg); }
.p-auth-bg { position: fixed; inset: 0; pointer-events: none; background: #08090c url('../img/ville-nuit.webp') center 40% / cover no-repeat; }
.p-auth-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(8, 9, 12, 0.72), rgba(8, 9, 12, 0.94) 70%), linear-gradient(180deg, rgba(8, 9, 12, 0.6), rgba(8, 9, 12, 0.96)); }
.p-auth-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 45% 35% at 50% 30%, rgba(var(--d-red-rgb), 0.12), transparent 70%); }
.p-auth-main { position: relative; z-index: 1; margin: auto; width: min(28.5rem, 100%); padding: 2rem 1rem 1.6rem; display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; }
.p-auth-main.is-wide { width: min(46rem, 100%); }
.p-auth-brand { display: grid; grid-template-columns: auto auto; grid-template-areas: "logo name" "logo sub"; align-items: center; justify-content: center; column-gap: 0.95rem; }
.p-auth-logo { grid-area: logo; width: 4.4rem; height: 4.4rem; object-fit: contain; filter: drop-shadow(0 0 1.1rem rgba(var(--d-red-rgb), 0.42)); }
.p-auth-name { grid-area: name; align-self: end; display: flex; flex-direction: column; font-family: var(--d-font-display); font-weight: 800; font-stretch: 108%; font-size: 1.55rem; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.p-auth-name > span + span { margin-top: 0.12rem; }
.p-auth-sub { grid-area: sub; align-self: start; margin-top: 0.5rem; font-family: var(--d-font-display); font-weight: 600; font-stretch: 105%; font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--p-red-soft); white-space: nowrap; }
.p-auth-card { padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--d-inner-hi), 0 2rem 4rem rgba(0, 0, 0, 0.65); }
.p-auth-form { display: flex; flex-direction: column; gap: 1rem; }
.p-auth-form > .p-field + .p-field { margin-top: 0; }
.p-auth-head { display: flex; flex-direction: column; gap: 0.4rem; text-align: center; }
.p-auth-head h1 { font-family: var(--d-font-display); font-weight: 800; font-stretch: 104%; font-size: 1.45rem; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--d-text); }
.p-auth-head p { font-size: 0.9rem; line-height: 1.5; color: var(--d-text-2); }
.p-auth-head p b { color: var(--d-text); font-weight: 600; }
.p-auth-icon { align-self: center; margin-bottom: 0.3rem; }
.p-auth-remember, .p-auth-trust { align-self: flex-start; margin-top: -0.1rem; font-size: 0.88rem; }
.p-auth-note { display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.78rem; line-height: 1.4; color: var(--d-faint); text-align: center; }
.p-auth-note > i { color: var(--d-muted); }
.p-auth-alt { align-self: center; text-align: center; }
.p-auth-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.p-auth-row > .p-btn { flex: 1 1 12rem; }
.p-auth-foot { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--d-faint); text-align: center; }
.p-auth-link { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.3rem; padding: 0 0.9rem; border-radius: var(--d-r); border: 1px solid var(--d-line); background: rgba(12, 13, 17, 0.8); color: var(--d-text-2); font-size: 0.84rem; font-weight: 600; transition: border-color var(--d-dur) var(--d-ease), color var(--d-dur) var(--d-ease); }
.p-auth-link:hover { border-color: var(--d-line-strong); color: #fff; }
.p-auth-link > i { color: #6ab4ff; }

.p-alert { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.65rem 0.8rem; border-radius: var(--d-r); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.03); font-size: 0.86rem; line-height: 1.45; color: var(--d-text-2); animation: d-fade-in var(--d-dur) var(--d-ease) both; }
.p-alert > i { flex: none; margin-top: 0.15rem; font-size: 0.9rem; }
.p-alert > div { min-width: 0; }
.p-alert b { display: block; margin-bottom: 0.1rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--d-text); }
.p-alert span b { display: inline; font-size: inherit; letter-spacing: 0; text-transform: none; }
.p-alert--red { border-color: rgba(var(--d-red-hi-rgb), 0.45); background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.12), rgba(var(--d-red-rgb), 0.03)); }
.p-alert--red > i { color: var(--d-red-hi); }
.p-alert--warn { border-color: rgba(var(--d-warn-rgb), 0.42); background: linear-gradient(90deg, rgba(var(--d-warn-rgb), 0.12), rgba(var(--d-warn-rgb), 0.03)); }
.p-alert--warn > i { color: var(--d-warn); }
.p-alert--info { border-color: rgba(var(--d-info-rgb), 0.35); background: linear-gradient(90deg, rgba(var(--d-info-rgb), 0.09), rgba(var(--d-info-rgb), 0.02)); }
.p-alert--info > i { color: #dfe5ee; }
.p-alert--good { border-color: rgba(var(--d-good-rgb), 0.4); background: linear-gradient(90deg, rgba(var(--d-good-rgb), 0.1), rgba(var(--d-good-rgb), 0.02)); }
.p-alert--good > i { color: var(--d-good); }

.p-steps { display: flex; justify-content: center; gap: 0.4rem; counter-reset: step; }
.p-steps > li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--d-faint); white-space: nowrap; }
.p-steps > li + li::before { content: ''; width: 1.6rem; height: 1px; margin-right: 0.15rem; background: var(--d-line); }
.p-step-n { width: 1.45rem; height: 1.45rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--d-line-strong); font-family: var(--d-font-display); font-size: 0.72rem; color: var(--d-muted); }
.p-steps > li.is-active { color: var(--d-text); }
.p-steps > li.is-active .p-step-n { border-color: var(--d-red-hi); background: var(--d-red-grad); color: #fff; box-shadow: var(--d-glow-sm); }
.p-steps > li.is-done { color: var(--d-text-2); }
.p-steps > li.is-done .p-step-n { border-color: rgba(var(--d-good-rgb), 0.6); background: rgba(var(--d-good-rgb), 0.12); color: var(--d-good); }

.p-mfa-grid { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.p-qr { position: relative; width: 13.5rem; height: 13.5rem; padding: 0.55rem; border-radius: var(--d-r); background: #fff; box-shadow: 0 0 0 1px var(--d-line-strong), 0 0 1.4rem rgba(var(--d-red-rgb), 0.18); overflow: hidden; }
.p-qr > img { width: 100%; height: 100%; image-rendering: pixelated; }
.p-qr > .p-skel { background: #e9ebef; }
.p-qr-off { display: grid; place-items: center; height: 100%; font-size: 4rem; color: #c9ccd3; }
.p-mfa-side { min-width: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.p-mfa-side .p-code { justify-content: flex-start; }
.p-mfa-step { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.9rem; line-height: 1.45; color: var(--d-text-2); }
.p-mfa-step b { color: var(--d-text); font-weight: 600; }
.p-mfa-n { flex: none; width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border-radius: var(--d-r-sm); border: 1px solid rgba(var(--d-red-hi-rgb), 0.75); background: linear-gradient(180deg, rgba(var(--d-red-rgb), 0.22), rgba(var(--d-red-rgb), 0.06)); color: #fff; font-family: var(--d-font-display); font-weight: 700; font-size: 0.78rem; }
.p-mfa-secret { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.65rem 0.75rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: rgba(255, 255, 255, 0.02); }
.p-secret-row { display: flex; align-items: center; gap: 0.5rem; }
.p-secret { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: var(--d-input); font-family: var(--d-font-cond); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.12em; color: var(--d-text); user-select: all; overflow-wrap: anywhere; }
.p-recovery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.p-recovery > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: rgba(255, 255, 255, 0.025); }
.p-recovery-n { font-family: var(--d-font-display); font-weight: 600; font-size: 0.72rem; color: var(--d-faint); font-variant-numeric: tabular-nums; }
.p-recovery code { padding: 0; border: 0; background: none; font-family: var(--d-font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.12em; color: var(--d-text); user-select: all; }
.p-recovery-input .p-input { font-family: var(--d-font-display); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }

.p-splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background: radial-gradient(ellipse 40% 35% at 50% 42%, rgba(var(--d-red-rgb), 0.1), transparent 70%), var(--d-bg); }
.p-splash-logo { width: 6.5rem; height: 6.5rem; object-fit: contain; filter: drop-shadow(0 0 1.4rem rgba(var(--d-red-rgb), 0.45)); }

/* ─── 16. Utilitaires de mise en page (pages de la vague 2 : voir js/ui/README.md) ─────────────── */

/* piles et rangées */
.p-stack { display: flex; flex-direction: column; gap: var(--p-gap); min-width: 0; }
.p-stack--sm { gap: 0.5rem; }
.p-stack--lg { gap: 1.5rem; }
.p-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.p-row--nowrap { flex-wrap: nowrap; }
.p-row--top { align-items: flex-start; }
.p-row--end { justify-content: flex-end; }
.p-row--between { justify-content: space-between; }
.p-row--lg { gap: 1rem; }
.p-row > .p-grow, .p-grow { flex: 1 1 0; min-width: 0; }

/* grilles : colonnes égales (--cols), automatiques (--min), KPI, partages maître / détail */
.p-grid { display: grid; gap: var(--p-gap); grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); align-items: start; min-width: 0; }
.p-grid > * { min-width: 0; }
.p-grid > .p-field + .p-field, .p-grid-auto > .p-field + .p-field, .p-row > .p-field + .p-field, .p-split > .p-field + .p-field { margin-top: 0; }
.p-grid-2 { --cols: 2; }
.p-grid-3 { --cols: 3; }
.p-grid-4 { --cols: 4; }
.p-grid-5 { --cols: 5; }
.p-grid--stretch { align-items: stretch; }
.p-grid-auto { display: grid; gap: var(--p-gap); grid-template-columns: repeat(auto-fill, minmax(min(var(--min, 16rem), 100%), 1fr)); align-items: start; }
.p-kpis { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr)); }
.p-split { display: grid; gap: var(--p-gap); grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
.p-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.p-split--aside { grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); }
.p-split--nav { grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
.p-split--stretch { align-items: stretch; }
.p-span-2 { grid-column: span 2; }
.p-span-3 { grid-column: span 3; }
.p-span-all { grid-column: 1 / -1; }

/* pages pleine hauteur (registerPage({ layout: 'fill' | 'flush' })) */
.p-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--p-gap); }
.p-fill > .p-panel.p-grow, .p-fill > .p-grow { flex: 1 1 0; min-height: 0; }
.p-scroll { min-height: 0; overflow: auto; }
.p-sticky { position: sticky; top: 0; z-index: 5; }

/* carte simple, titre de section, séparateur */
.p-card { position: relative; min-width: 0; padding: 0.85rem 1rem; border-radius: var(--d-r); border: 1px solid var(--d-line); background: var(--p-tile); box-shadow: var(--d-inner-hi); }
.p-card.is-click { cursor: pointer; transition: border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-card.is-click:hover { border-color: rgba(var(--d-red-hi-rgb), 0.45); background: var(--p-btn-hover); }
.p-card.is-active { border-color: rgba(var(--d-red-hi-rgb), 0.8); background: linear-gradient(90deg, rgba(var(--d-red-rgb), 0.16), rgba(var(--d-red-rgb), 0.04) 70%), var(--p-tile); }
.p-section-title { display: flex; align-items: center; gap: 0.55rem; margin: 0.25rem 0 0.6rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--d-muted); }
.p-section-title > i { color: var(--d-red-hi); }
.p-section-title::after { content: ''; flex: 1; height: 1px; background: var(--d-line-soft); }
.p-hr { height: 1px; margin: 0.9rem 0; border: 0; background: var(--d-line-soft); }

/* liste riche (rapports, staff, notes) : avatar · corps · méta · actions */
.p-list { display: flex; flex-direction: column; }
.p-li { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.65rem 0; border-bottom: 1px solid var(--d-line-soft); min-width: 0; }
.p-li:first-child { padding-top: 0.1rem; }
.p-li:last-child { border-bottom: 0; padding-bottom: 0.1rem; }
.p-li.is-click { cursor: pointer; margin: 0 -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: var(--d-r-sm); transition: background var(--d-dur) var(--d-ease); }
.p-li.is-click:hover { background: rgba(255, 255, 255, 0.03); }
.p-li-body { flex: 1; min-width: 0; }
.p-li-title { display: block; font-weight: 600; color: var(--d-text); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-li-text { margin-top: 0.2rem; font-size: 0.88rem; line-height: 1.45; color: var(--d-text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.p-li-meta { margin-top: 0.2rem; font-size: 0.76rem; color: var(--d-faint); }
.p-li-acts { flex: none; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }

/* grille d'actions rapides (lignes à tuile d'icône, tablette admin) */
.p-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); gap: 0.5rem; }
.p-btn-grid > .p-btn, .p-btn-grid > .p-tip-anchor > .p-btn { justify-content: flex-start; width: 100%; height: auto; min-height: 2.75rem; padding: 0.32rem 0.8rem 0.32rem 0.38rem; gap: 0.65rem; text-align: left; white-space: normal; line-height: 1.15; }
.p-btn-grid .p-btn > i:first-child { flex: none; width: 1.95rem; height: 1.95rem; display: grid; place-items: center; border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.035); font-size: 0.85rem; color: var(--d-text-2); }
.p-btn-grid .p-btn:hover > i:first-child { color: #fff; border-color: var(--d-line-strong); }
.p-btn-grid .p-btn--good > i:first-child { color: var(--d-good); border-color: rgba(var(--d-good-rgb), 0.45); background: rgba(var(--d-good-rgb), 0.08); }
.p-btn-grid .p-btn--warn > i:first-child { color: var(--d-warn); border-color: rgba(var(--d-warn-rgb), 0.45); background: rgba(var(--d-warn-rgb), 0.08); }
.p-btn-grid .p-btn--danger > i:first-child { color: var(--d-red-hi); border-color: rgba(var(--d-red-hi-rgb), 0.55); background: rgba(var(--d-red-rgb), 0.1); }
.p-btn-grid .p-btn--primary > i:first-child, .p-btn-grid .p-btn.is-on > i:first-child { color: #fff; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.12); }
.p-btn-grid .p-btn .p-btn-label { white-space: normal; }

/* puces et filtres */
.p-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.p-chip { display: inline-flex; align-items: center; gap: 0.45rem; height: 1.95rem; padding: 0 0.65rem; border-radius: var(--d-r-sm); border: 1px solid var(--d-line-strong); background: rgba(255, 255, 255, 0.03); font-size: 0.84rem; font-weight: 600; color: var(--d-text-2); white-space: nowrap; }
.p-chip > i { font-size: 0.85em; color: var(--d-muted); }
.p-chip.is-on { color: #3ee083; border-color: 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)); }
.p-chip-x { margin-right: -0.25rem; width: 1.3rem; height: 1.3rem; display: grid; place-items: center; border-radius: var(--d-r-xs); color: var(--d-faint); }
.p-chip-x:hover { color: var(--d-red-hi); background: rgba(255, 255, 255, 0.05); }
.p-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.p-filter { display: inline-flex; align-items: center; gap: 0.4rem; height: 1.95rem; padding: 0 0.65rem; border-radius: var(--d-r-sm); border: 1px solid var(--d-line); background: rgba(255, 255, 255, 0.03); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--d-muted); white-space: nowrap; cursor: pointer; transition: color var(--d-dur) var(--d-ease), border-color var(--d-dur) var(--d-ease), background var(--d-dur) var(--d-ease); }
.p-filter:hover { color: var(--d-text); border-color: var(--d-line-strong); }
.p-filter.is-on { color: #fff; border-color: rgba(var(--d-red-hi-rgb), 0.8); background: var(--p-active); box-shadow: var(--d-glow-sm); }
.p-filter > small { font-family: var(--d-font-cond); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; color: var(--d-faint); }
.p-filter.is-on > small { color: rgba(255, 255, 255, 0.8); }

/* note (barre acier), bandeau compte à rebours (ambre), boîte de sortie brute */
.p-note { padding: 0.6rem 0.8rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: rgba(255, 255, 255, 0.022); box-shadow: inset 2px 0 0 rgba(var(--d-info-rgb), 0.55); color: var(--d-text-2); line-height: 1.45; }
.p-note--red { box-shadow: inset 2px 0 0 var(--d-red-hi); }
.p-note--warn { box-shadow: inset 2px 0 0 var(--d-warn); }
.p-countdown { display: flex; align-items: center; gap: 0.85rem; padding: 0.65rem 0.9rem; border-radius: var(--d-r); border: 1px solid rgba(var(--d-warn-rgb), 0.38); background: linear-gradient(90deg, rgba(var(--d-warn-rgb), 0.13), rgba(var(--d-warn-rgb), 0.03) 75%); color: var(--d-text-2); }
.p-countdown > i { flex: none; width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border-radius: var(--d-r-sm); border: 1px solid rgba(var(--d-warn-rgb), 0.7); background: linear-gradient(180deg, rgba(var(--d-warn-rgb), 0.18), rgba(var(--d-warn-rgb), 0.04)); color: var(--d-warn); }
.p-countdown > b { font-family: var(--d-font-display); font-weight: 700; font-size: 1.4rem; color: var(--d-warn); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-state-box { padding: 0.6rem 0.75rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: var(--d-input); font-family: var(--d-font-cond); font-weight: 500; font-size: 0.86rem; line-height: 1.45; color: var(--d-text-2); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 14rem; overflow: auto; user-select: text; }

/* console / journal brut (page Console, flux de logs) */
.p-console { flex: 1 1 auto; min-height: 8rem; overflow: auto; padding: 0.6rem 0.8rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); background: var(--d-input); font-family: var(--d-font-mono); font-size: 0.82rem; line-height: 1.5; color: var(--d-text-2); user-select: text; }
.p-console-line { display: flex; gap: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.p-console-line:hover { background: rgba(255, 255, 255, 0.025); }
.p-console-time { flex: none; color: var(--d-faint); font-variant-numeric: tabular-nums; user-select: none; }
.p-console-input { display: flex; align-items: center; gap: 0.5rem; }
.p-console-input::before { content: '›'; flex: none; font-family: var(--d-font-display); font-weight: 700; font-size: 1.3rem; color: var(--d-red-hi); }
.p-console-input > .p-input, .p-console-input > .p-input-wrap { flex: 1; font-family: var(--d-font-mono); }

/* barre de progression avec étiquette (jetons d-progress) */
.p-meter { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.p-meter-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; color: var(--d-muted); }
.p-meter-head > b { font-family: var(--d-font-display); font-weight: 600; color: var(--d-text); font-variant-numeric: tabular-nums; }

/* texte */
.p-muted { color: var(--d-muted); }
.p-text2 { color: var(--d-text-2); }
.p-red { color: var(--d-red-hi); }
.p-good { color: var(--d-good); }
.p-warn { color: var(--d-warn); }
.p-cond { font-family: var(--d-font-cond); }
.p-mono { font-family: var(--d-font-mono); }
.p-upper { text-transform: uppercase; letter-spacing: 0.06em; }
.p-bold { font-weight: 700; }
.p-small { font-size: 0.85rem; }
.p-tiny { font-size: 0.74rem; }
.p-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-nowrap { white-space: nowrap; }
.p-right { text-align: right; }
.p-center { text-align: center; }
.p-select-text { user-select: text; }
.p-mt-0 { margin-top: 0 !important; }
.p-mt-sm { margin-top: 0.5rem; }
.p-mt { margin-top: 1rem; }
.p-mb-sm { margin-bottom: 0.5rem; }
.p-mb { margin-bottom: 1rem; }
.p-w-full { width: 100%; }

/* page de démonstration (#/dev/composants) */
.p-demo-nav { position: sticky; top: calc(-1 * var(--p-pad)); z-index: 6; margin: calc(-1 * var(--p-pad)) calc(-1 * var(--p-pad)) 0; padding: 0.6rem var(--p-pad); border-bottom: 1px solid var(--d-line-soft); background: rgba(10, 11, 14, 0.97); }
.p-demo-swatch { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.55rem; border-radius: var(--d-r); border: 1px solid var(--d-line-soft); font-size: 0.8rem; }
.p-demo-swatch > i { flex: none; width: 1.6rem; height: 1.6rem; border-radius: var(--d-r-sm); border: 1px solid rgba(255, 255, 255, 0.12); }
.p-demo-swatch > span { display: flex; flex-direction: column; min-width: 0; }
.p-demo-swatch small { font-family: var(--d-font-cond); color: var(--d-faint); }
.p-demo-box { display: grid; place-items: center; min-height: 3.2rem; border-radius: var(--d-r-sm); border: 1px dashed var(--d-line-strong); color: var(--d-faint); font-family: var(--d-font-cond); font-size: 0.8rem; }

/* ─── 17. Mode bureau (app Windows, Electron + Window Controls Overlay) ────────────────────────── */

.is-desktop { --p-titlebar-h: env(titlebar-area-height, 36px); }
.p-titlebar {
    position: relative;
    z-index: 4000;
    flex: none;
    height: var(--p-titlebar-h);
    background: var(--d-bg-2);
    border-bottom: 1px solid var(--d-line-soft);
    -webkit-app-region: drag;
    app-region: drag;
}
.p-titlebar-in {
    position: absolute;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.75rem;
}
.p-titlebar img { width: 18px; height: 18px; object-fit: contain; filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.45)); }
.p-titlebar-name { font-family: var(--d-font-display); font-weight: 700; font-stretch: 105%; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-text-2); white-space: nowrap; }
.p-titlebar-name > b { color: var(--d-red-hi); font-weight: 700; }
.p-titlebar small { font-family: var(--d-font-cond); font-size: 11px; font-weight: 600; color: var(--d-faint); }
.p-titlebar-page { margin-left: 0.4rem; padding-left: 0.75rem; border-left: 1px solid var(--d-line); font-size: 12px; font-weight: 600; color: var(--d-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-titlebar button, .p-titlebar a, .p-titlebar input { -webkit-app-region: no-drag; app-region: no-drag; }
.is-desktop .p-side, .is-desktop .p-top { -webkit-app-region: no-drag; }
.is-desktop .p-pop, .is-desktop .p-layer, .is-desktop .p-win, .is-desktop .p-toasts { -webkit-app-region: no-drag; }
/* dans l'app, pas de « lien qu'on traîne » ni d'image glissable : comportement d'application */
.is-desktop img, .is-desktop a { -webkit-user-drag: none; }

/* ─── 18. Largeurs : 1366 et moins, tablette (≤ 1100), menu burger (≤ 900), cellulaire (≤ 700) ──── */

@media (max-width: 1440px) {
    :root { --p-pad: 1.15rem; }
    .p-top-search { width: 13rem; }
}

@media (max-width: 1100px) and (min-width: 901px) {
    /* barre repliée automatiquement en icônes ; le burger l'ouvre en entier par-dessus le contenu */
    .p-shell { --p-side-w: var(--p-side-w-mini); }
    .p-shell:not(.is-nav-open) .p-brand { justify-content: center; padding: 1rem 0.5rem 0.95rem; }
    .p-shell:not(.is-nav-open) .p-brand-text, .p-shell:not(.is-nav-open) .p-nav-text, .p-shell:not(.is-nav-open) .p-me-text, .p-shell:not(.is-nav-open) .p-me-more { display: none; }
    .p-shell:not(.is-nav-open) .p-brand::after { left: 0.9rem; right: 0.9rem; }
    .p-shell:not(.is-nav-open) .p-nav { padding-left: 0.6rem; padding-right: 0.6rem; }
    .p-shell:not(.is-nav-open) .p-nav-label { height: 1px; margin: 0.7rem 0.6rem; background: var(--d-line-soft); color: transparent; }
    .p-shell:not(.is-nav-open) .p-nav-item { justify-content: center; padding: 0; min-height: 2.65rem; }
    .p-shell:not(.is-nav-open) .p-nav-item > i { width: auto; font-size: 1.05rem; }
    .p-shell:not(.is-nav-open) .p-nav-badge { position: absolute; top: 0.18rem; right: 0.22rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.22rem; font-size: 0.58rem; }
    .p-shell:not(.is-nav-open) .p-side-foot { align-items: center; padding-left: 0.5rem; padding-right: 0.5rem; }
    .p-shell:not(.is-nav-open) .p-me { justify-content: center; padding: 0.4rem; width: auto; }
    .p-shell.is-nav-open .p-side { position: fixed; top: var(--p-titlebar-h); bottom: 0; left: 0; z-index: 1500; width: 16.5rem; box-shadow: 1.5rem 0 3rem rgba(0, 0, 0, 0.6); animation: p-drawer-in-left 0.22s var(--d-ease) both; }
    .p-shell.is-nav-open .p-scrim { display: block; position: fixed; inset: var(--p-titlebar-h) 0 0 0; z-index: 1400; background: var(--d-overlay); animation: d-fade-in 0.2s var(--d-ease) both; }
}

@media (max-width: 1100px) {
    .p-grid-4, .p-grid-5 { --cols: 2; }
    .p-split, .p-split--aside, .p-split--nav { grid-template-columns: minmax(0, 1fr); }
    .p-top-search > span:first-of-type, .p-top-kbd { display: none; }
    .p-top-search { width: 2.35rem; padding: 0; justify-content: center; }
    .p-top-account-name { display: none; }
    .p-top-cd-label { display: none; }
}

@media (max-width: 900px) {
    :root { --p-pad: 1rem; --p-top-h: 3.6rem; }
    .p-shell { grid-template-columns: minmax(0, 1fr); }
    .p-side {
        position: fixed;
        top: var(--p-titlebar-h);
        bottom: 0;
        left: 0;
        z-index: 1500;
        width: min(18rem, 86vw);
        transform: translate(-102%, 0);
        transition: transform 0.26s var(--d-ease);
        box-shadow: none;
    }
    .p-shell.is-nav-open .p-side { transform: none; box-shadow: 1.5rem 0 3rem rgba(0, 0, 0, 0.6); }
    .p-scrim { display: block; position: fixed; inset: var(--p-titlebar-h) 0 0 0; z-index: 1400; background: var(--d-overlay); opacity: 0; pointer-events: none; transition: opacity 0.26s var(--d-ease); }
    .p-shell.is-nav-open .p-scrim { opacity: 1; pointer-events: auto; }
    .p-top-logo { display: block; }
    .p-burger { margin-left: 0; border-color: var(--d-line); background: var(--p-btn); color: var(--d-text-2); }
    .p-top { gap: 0.6rem; padding-top: max(0.45rem, env(safe-area-inset-top)); padding-bottom: 0.45rem; }
    .p-top-title h1 { font-size: 1.22rem; }
    .p-top-title small { display: none; }
    .p-grid-3 { --cols: 2; }
    .p-construction-list { grid-template-columns: minmax(0, 1fr); }
    .p-field.is-inline { flex-direction: column; align-items: stretch; gap: 0.35rem; }
    .p-field.is-inline > .p-field-label { width: auto; }
}

@media (max-width: 700px) {
    html { font-size: 14.5px; }
    html[data-density="compact"] { font-size: 13.5px; }
    html[data-density="comfortable"] { font-size: 15.75px; }
    :root { --p-pad: 0.85rem; --p-gap: 0.75rem; }
    .p-shell { grid-template-rows: minmax(0, 1fr) auto; }
    .p-tabbar {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        height: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--d-line-soft);
        background: var(--d-bg-2);
        z-index: 1600;
    }
    .p-tab-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--d-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
    .p-tab-item::before { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; border-radius: 0 0 2px 2px; background: transparent; }
    .p-tab-item.is-active { color: #fff; }
    .p-tab-item.is-active::before { background: var(--d-red-hi); box-shadow: 0 0 0.6rem rgba(var(--d-red-rgb), 0.8); }
    .p-tab-item.is-active .p-tab-ico > i { color: var(--d-red-hi); filter: drop-shadow(0 0 0.35rem rgba(var(--d-red-rgb), 0.6)); }
    .p-tab-ico { position: relative; font-size: 1.15rem; line-height: 1; }
    .p-tab-dot { position: absolute; top: -0.45rem; right: -0.75rem; min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 2px solid var(--d-bg-2); background: var(--d-red); color: #fff; font-family: var(--d-font-display); font-size: 0.56rem; font-weight: 700; }
    .p-side { bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom)); }
    .p-top-players, .p-top-account { display: none; }
    .p-status .d-pill { padding: 0 0.6rem; }
    .p-top-cd-label { display: none; }
    .p-top-cd-btn { padding: 0 0.5rem; gap: 0.35rem; }
    .p-top-right { gap: 0.35rem; }
    .p-grid, .p-grid-3, .p-grid-4, .p-grid-5 { --cols: 1; }
    .p-span-2, .p-span-3 { grid-column: auto; }
    .p-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .p-kpi { min-height: 4.4rem; padding: 0.65rem 0.75rem; gap: 0.65rem; }
    .p-kpi-icon { width: 2.2rem; height: 2.2rem; font-size: 0.9rem; }
    .p-kpi-value { font-size: 1.35rem; }
    .p-kpi-spark { display: none; }
    .p-kv { grid-template-columns: minmax(0, 1fr); }
    .p-toolbar .p-search { width: 100%; }
    .p-panel-actions .p-search { width: 100%; }
    .p-modal, .p-modal--sm, .p-modal--lg, .p-modal--xl { width: 100%; }
    .p-layer { padding: 0.6rem; }
    .p-toasts { top: auto; bottom: calc(var(--p-tabbar-h) + env(safe-area-inset-bottom) + 0.6rem); left: 0.6rem; right: 0.6rem; align-items: stretch; }
    .p-toast { width: auto; }
    .p-win { inset: var(--p-titlebar-h) 0 0 0 !important; width: auto !important; height: auto !important; border-radius: 0; }
    .p-win-edge, .p-win-grip { display: none; }
    .p-auth-main { padding-top: 1.4rem; }
    .p-auth-card { padding: 1.2rem 1.05rem 1.1rem; }
    .p-auth-logo { width: 3.6rem; height: 3.6rem; }
    .p-auth-name { font-size: 1.3rem; }
    .p-mfa-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .p-mfa-side { width: 100%; }
    .p-mfa-side .p-code { justify-content: center; }
    .p-recovery { grid-template-columns: minmax(0, 1fr); }
    .p-code { gap: 0.35rem; }
    .p-code-cell { width: 2.6rem; height: 3.2rem; font-size: 1.4rem; }
    .p-code-cell:nth-child(3) { margin-right: 0.45rem; }
    .p-steps > li > span:last-child { display: none; }
    .p-steps > li.is-active > span:last-child { display: inline; }
    .p-construction-in { flex-direction: column; gap: 0.8rem; }
    .p-construction-title { font-size: 1.4rem; }
    .p-hide-mobile { display: none !important; }
    .p-content.is-fill { overflow-y: auto; }
    .p-demo-nav { position: static; }
}
@media (max-width: 480px) {
    .p-top-logo { display: none; }
    .p-status.is-good .d-pill > span:last-child { display: none; }
    .p-status.is-good .d-pill { padding: 0 0.55rem; }
}
@media (min-width: 701px) { .p-only-mobile { display: none !important; } }
@media (max-width: 1100px) { .p-hide-narrow { display: none !important; } }
/* Q3 : au cellulaire, l'étiquette d'une tuile chiffrée passe à la ligne au lieu d'être coupée (« Prochaine exécu… ») */
@media (max-width: 700px) { .p-kpi-label { white-space: normal; overflow: visible; } }

/* ─── 19. Mouvement réduit ─────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .p-page, .p-pop.is-placed, .p-tooltip.is-placed, .p-palette, .p-layer, .p-modal, .p-drawer, .p-toast, .p-win,
    .p-offline, .p-alert, .p-form-error, .p-nav-item.is-active { animation: none !important; }
    .p-side, .p-scrim, .p-btn, .p-kpi, .p-nav-item > i { transition: none !important; }
    .p-toast .d-toast-bar > span { animation-name: p-toast-time !important; }
    .p-spin { animation-duration: 2.4s; }
}