/* ============================================================
   THÈME GLOBAL DU PORTAIL — BARRES DE DÉFILEMENT
   ============================================================ */

:root {
    color-scheme: dark;

    --scrollbar-track: #0a0c0e;
    --scrollbar-track-soft: #0d1012;
    --scrollbar-thumb: #30353a;
    --scrollbar-thumb-hover: #6d5922;
    --scrollbar-thumb-active: #9a7926;
    --scrollbar-border: #111417;
}

/* Firefox */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--scrollbar-thumb)
        var(--scrollbar-track);
}

/* Chromium / Edge / Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-track-piece {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    min-width: 38px;
    min-height: 38px;
    background:
        linear-gradient(
            180deg,
            #3a4045 0%,
            var(--scrollbar-thumb) 100%
        );
    border: 2px solid var(--scrollbar-track);
    border-radius: 999px;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #8b7029 0%,
            var(--scrollbar-thumb-hover) 100%
        );
    border-color: var(--scrollbar-track);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background:
        linear-gradient(
            180deg,
            #b58d2b 0%,
            var(--scrollbar-thumb-active) 100%
        );
    border-color: var(--scrollbar-track);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* Suppression des flèches / boutons natifs blancs */
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:vertical,
*::-webkit-scrollbar-button:horizontal {
    width: 0;
    height: 0;
    display: none;
    background: transparent;
}

/* Sidebar : discrète mais toujours visible */
.navigation::-webkit-scrollbar,
.nav::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 7px;
}

.navigation::-webkit-scrollbar-track,
.nav::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: #0d0f11;
}

.navigation::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    border-color: #0d0f11;
}

/* Champs et petites zones scrollables */
textarea::-webkit-scrollbar,
select::-webkit-scrollbar,
.card-body::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.board::-webkit-scrollbar,
.history::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

textarea::-webkit-scrollbar-track,
select::-webkit-scrollbar-track,
.card-body::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track,
.table-wrapper::-webkit-scrollbar-track,
.board::-webkit-scrollbar-track,
.history::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track {
    background: var(--scrollbar-track-soft);
}

textarea::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
.card-body::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.board::-webkit-scrollbar-thumb,
.history::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
    border-color: var(--scrollbar-track-soft);
}

/* Évite le flash de scrollbar claire au chargement sur les pages sombres. */
html,
body {
    background-color: #090b0d;
}


/* ============================================================
   THÈMES VISUELS PAR BRANCHE
   Général / Moi conservent volontairement le thème historique.
   ============================================================ */

:root {
    --portal-accent: #e4a11b;
    --portal-accent-hover: #f0b63d;
    --portal-accent-rgb: 228, 161, 27;
    --portal-bg: #090b0d;
    --portal-sidebar: #0d0f11;
    --portal-card: #121417;
    --portal-card-hover: #171a1d;
    --portal-border: #292d31;
    --portal-border-soft: #1e2225;
}

html[data-portal-theme="moderation"] {
    --portal-accent: #4da6f0;
    --portal-accent-hover: #72bbf7;
    --portal-accent-rgb: 77, 166, 240;
    --portal-bg: #070b10;
    --portal-sidebar: #090f15;
    --portal-card: #0d141b;
    --portal-card-hover: #111c25;
    --portal-border: #22384a;
    --portal-border-soft: #162936;

    --accent: var(--portal-accent) !important;
    --accent-hover: var(--portal-accent-hover) !important;
    --accent-soft: rgba(var(--portal-accent-rgb), .11) !important;
    --bg: var(--portal-bg) !important;
    --bg-main: var(--portal-bg) !important;
    --sidebar: var(--portal-sidebar) !important;
    --bg-sidebar: var(--portal-sidebar) !important;
    --card: var(--portal-card) !important;
    --bg-card: var(--portal-card) !important;
    --card-hover: var(--portal-card-hover) !important;
    --bg-card-hover: var(--portal-card-hover) !important;
    --border: var(--portal-border) !important;
    --border-soft: var(--portal-border-soft) !important;
    --scrollbar-thumb-hover: #356f9f;
    --scrollbar-thumb-active: #4da6f0;
}

html[data-portal-theme="animation"] {
    --portal-accent: #a76cff;
    --portal-accent-hover: #bd8cff;
    --portal-accent-rgb: 167, 108, 255;
    --portal-bg: #0a0710;
    --portal-sidebar: #0f0a16;
    --portal-card: #15101d;
    --portal-card-hover: #1b1427;
    --portal-border: #3a2950;
    --portal-border-soft: #291d39;

    --accent: var(--portal-accent) !important;
    --accent-hover: var(--portal-accent-hover) !important;
    --accent-soft: rgba(var(--portal-accent-rgb), .11) !important;
    --bg: var(--portal-bg) !important;
    --bg-main: var(--portal-bg) !important;
    --sidebar: var(--portal-sidebar) !important;
    --bg-sidebar: var(--portal-sidebar) !important;
    --card: var(--portal-card) !important;
    --bg-card: var(--portal-card) !important;
    --card-hover: var(--portal-card-hover) !important;
    --bg-card-hover: var(--portal-card-hover) !important;
    --border: var(--portal-border) !important;
    --border-soft: var(--portal-border-soft) !important;
    --scrollbar-thumb-hover: #704aa3;
    --scrollbar-thumb-active: #a76cff;
}

html[data-portal-theme="development"] {
    --portal-accent: #58cf7a;
    --portal-accent-hover: #76de94;
    --portal-accent-rgb: 88, 207, 122;
    --portal-bg: #070d09;
    --portal-sidebar: #09120c;
    --portal-card: #0e1811;
    --portal-card-hover: #122017;
    --portal-border: #24442e;
    --portal-border-soft: #193522;

    --accent: var(--portal-accent) !important;
    --accent-hover: var(--portal-accent-hover) !important;
    --accent-soft: rgba(var(--portal-accent-rgb), .11) !important;
    --bg: var(--portal-bg) !important;
    --bg-main: var(--portal-bg) !important;
    --sidebar: var(--portal-sidebar) !important;
    --bg-sidebar: var(--portal-sidebar) !important;
    --card: var(--portal-card) !important;
    --bg-card: var(--portal-card) !important;
    --card-hover: var(--portal-card-hover) !important;
    --bg-card-hover: var(--portal-card-hover) !important;
    --border: var(--portal-border) !important;
    --border-soft: var(--portal-border-soft) !important;
    --scrollbar-thumb-hover: #387f4c;
    --scrollbar-thumb-active: #58cf7a;
}

html[data-portal-theme="administration"] {
    --portal-accent: #e35f68;
    --portal-accent-hover: #f07b83;
    --portal-accent-rgb: 227, 95, 104;
    --portal-bg: #100708;
    --portal-sidebar: #15090b;
    --portal-card: #1a0e10;
    --portal-card-hover: #211215;
    --portal-border: #4a252a;
    --portal-border-soft: #351a1e;

    --accent: var(--portal-accent) !important;
    --accent-hover: var(--portal-accent-hover) !important;
    --accent-soft: rgba(var(--portal-accent-rgb), .11) !important;
    --bg: var(--portal-bg) !important;
    --bg-main: var(--portal-bg) !important;
    --sidebar: var(--portal-sidebar) !important;
    --bg-sidebar: var(--portal-sidebar) !important;
    --card: var(--portal-card) !important;
    --bg-card: var(--portal-card) !important;
    --card-hover: var(--portal-card-hover) !important;
    --bg-card-hover: var(--portal-card-hover) !important;
    --panel: #120a0c !important;
    --panel-2: #190e11 !important;
    --border: var(--portal-border) !important;
    --border-soft: var(--portal-border-soft) !important;
    --scrollbar-thumb-hover: #8f3f45;
    --scrollbar-thumb-active: #e35f68;
}

/* Fond global : noir teinté selon la branche. */
html[data-portal-theme] body {
    background:
        radial-gradient(
            circle at 82% 0%,
            rgba(var(--portal-accent-rgb), .085),
            transparent 34%
        ),
        var(--portal-bg) !important;
}

html[data-portal-theme] .sidebar {
    background:
        linear-gradient(
            180deg,
            rgba(var(--portal-accent-rgb), .035),
            transparent 180px
        ),
        var(--portal-sidebar) !important;
    border-right-color: var(--portal-border-soft) !important;
}

html[data-portal-theme] .card,
html[data-portal-theme] .panel,
html[data-portal-theme] .stat,
html[data-portal-theme] .welcome-card,
html[data-portal-theme] .user-box,
html[data-portal-theme] .profile-mini,
html[data-portal-theme] .terminal,
html[data-portal-theme] .vins-dashboard-enhanced {
    border-color: var(--portal-border-soft) !important;
}

html[data-portal-theme] .nav-link.active {
    color: var(--portal-accent) !important;
    background: rgba(var(--portal-accent-rgb), .115) !important;
}

html[data-portal-theme] .nav-link:hover,
html[data-portal-theme] .quick-item:hover {
    background: rgba(var(--portal-accent-rgb), .055) !important;
}

html[data-portal-theme] .header-label,
html[data-portal-theme] .user-role,
html[data-portal-theme] .profile-role,
html[data-portal-theme] .stat-value,
html[data-portal-theme] .quick-icon,
html[data-portal-theme] .up-arrow,
html[data-portal-theme] .prompt-symbol,
html[data-portal-theme] .vins-dash-value,
html[data-portal-theme] .vins-search-icon,
html[data-portal-theme] .nav-category-toggle:hover .nav-category-chevron {
    color: var(--portal-accent) !important;
}

html[data-portal-theme] .submit,
html[data-portal-theme] button.primary,
html[data-portal-theme] .primary-button,
html[data-portal-theme] .btn-primary {
    background: var(--portal-accent) !important;
}

html[data-portal-theme] .submit:hover,
html[data-portal-theme] button.primary:hover,
html[data-portal-theme] .primary-button:hover,
html[data-portal-theme] .btn-primary:hover {
    background: var(--portal-accent-hover) !important;
}

html[data-portal-theme] input:focus,
html[data-portal-theme] textarea:focus,
html[data-portal-theme] select:focus {
    border-color: rgba(var(--portal-accent-rgb), .72) !important;
    box-shadow: 0 0 0 2px rgba(var(--portal-accent-rgb), .07);
}

html[data-portal-theme="administration"] .root-pill {
    border-color: rgba(var(--portal-accent-rgb), .28) !important;
    background: rgba(var(--portal-accent-rgb), .07) !important;
    color: #ef9ca2 !important;
}

html[data-portal-theme="administration"] .terminal {
    background:
        linear-gradient(
            180deg,
            rgba(var(--portal-accent-rgb), .035),
            transparent 120px
        ),
        var(--panel) !important;
}

/* Les couleurs réagissent doucement lors d'un changement de thème. */
html.vins-theme-ready body,
html.vins-theme-ready .sidebar,
html.vins-theme-ready .card,
html.vins-theme-ready .panel,
html.vins-theme-ready .stat,
html.vins-theme-ready .welcome-card,
html.vins-theme-ready .nav-link,
html.vins-theme-ready .user-box,
html.vins-theme-ready .profile-mini,
html.vins-theme-ready input,
html.vins-theme-ready textarea,
html.vins-theme-ready select,
html.vins-theme-ready .submit,
html.vins-theme-ready .terminal,
html.vins-theme-ready .terminal-bar,
html.vins-theme-ready .vins-dashboard-enhanced {
    transition:
        background-color .42s ease,
        border-color .42s ease,
        color .32s ease,
        box-shadow .42s ease,
        opacity .22s ease,
        filter .22s ease;
}

/* Transition de navigation cross-document sur les navigateurs compatibles. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vins-page-out .16s ease-in both;
}

::view-transition-new(root) {
    animation: vins-page-in .28s ease-out both;
}

@keyframes vins-page-out {
    from { opacity: 1; filter: brightness(1); }
    to { opacity: 0; filter: brightness(.92); }
}

@keyframes vins-page-in {
    from { opacity: 0; filter: brightness(.92); }
    to { opacity: 1; filter: brightness(1); }
}

/* Fallback JS quand les View Transitions cross-document ne sont pas disponibles. */
html.vins-page-leaving body {
    opacity: 0 !important;
    filter: brightness(.92);
}

html.vins-page-arriving body {
    animation: vins-page-in .26s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    html.vins-page-arriving body {
        animation: none !important;
    }

    html.vins-page-leaving body {
        opacity: 1 !important;
        filter: none !important;
    }

    html.vins-theme-ready body,
    html.vins-theme-ready .sidebar,
    html.vins-theme-ready .card,
    html.vins-theme-ready .panel,
    html.vins-theme-ready .nav-link,
    html.vins-theme-ready input,
    html.vins-theme-ready textarea,
    html.vins-theme-ready select {
        transition: none !important;
    }
}

/* VINS PREMIUM VISUAL POLISH */
/* Couche de finition globale : profondeur, interactions, états de chargement et micro-animations. */

:root {
    --portal-secondary: #f0c35a;
    --portal-secondary-rgb: 240, 195, 90;
    --portal-glow-strength: .12;
    --portal-radius: 8px;
}

html[data-portal-theme="moderation"] {
    --portal-secondary: #5dd4ff;
    --portal-secondary-rgb: 93, 212, 255;
}

html[data-portal-theme="animation"] {
    --portal-secondary: #ed75d8;
    --portal-secondary-rgb: 237, 117, 216;
}

html[data-portal-theme="development"] {
    --portal-secondary: #8ee7ad;
    --portal-secondary-rgb: 142, 231, 173;
}

html[data-portal-theme="administration"] {
    --portal-secondary: #ff9b72;
    --portal-secondary-rgb: 255, 155, 114;
}

::selection {
    background: rgba(var(--portal-accent-rgb, 228, 161, 27), .28);
    color: #fff;
}

:focus-visible {
    outline: 1px solid rgba(var(--portal-accent-rgb, 228, 161, 27), .72) !important;
    outline-offset: 3px;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .18;
    background-image:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
        radial-gradient(circle at 18% 18%, rgba(var(--portal-secondary-rgb, 240,195,90), .025), transparent 22%);
    background-size: 34px 34px, 34px 34px, auto;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.78), transparent 78%);
}

html[data-portal-theme="moderation"] body::before {
    background-image:
        linear-gradient(rgba(93,212,255,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93,212,255,.022) 1px, transparent 1px),
        radial-gradient(circle at 82% 12%, rgba(93,212,255,.045), transparent 23%);
    background-size: 42px 42px, 42px 42px, auto;
}

html[data-portal-theme="animation"] body::before {
    background-image:
        radial-gradient(circle at 20% 18%, rgba(237,117,216,.05), transparent 1px),
        radial-gradient(circle at 80% 44%, rgba(167,108,255,.045), transparent 1px);
    background-size: 38px 38px, 56px 56px;
}

html[data-portal-theme="development"] body::before {
    background-image:
        linear-gradient(rgba(88,207,122,.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88,207,122,.022) 1px, transparent 1px);
    background-size: 28px 28px;
}

html[data-portal-theme="administration"] body::before {
    background-image:
        linear-gradient(135deg, rgba(227,95,104,.025) 1px, transparent 1px),
        linear-gradient(45deg, rgba(255,155,114,.016) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* En-têtes plus identitaires sans prendre de place. */
.header-title,
.topbar-title,
.page-title {
    position: relative;
    width: fit-content;
}

.header-title::after,
.topbar-title::after,
.page-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--portal-accent, #e4a11b), rgba(var(--portal-secondary-rgb, 240,195,90), .18));
    box-shadow: 0 0 18px rgba(var(--portal-accent-rgb, 228,161,27), .2);
}

.vins-header-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    margin-right: 8px;
    vertical-align: -5px;
    border: 1px solid rgba(var(--portal-accent-rgb, 228,161,27), .22);
    border-radius: 7px;
    background: rgba(var(--portal-accent-rgb, 228,161,27), .06);
    color: var(--portal-accent, #e4a11b);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 6px 22px rgba(0,0,0,.18);
}

.vins-header-icon svg,
.vins-svg-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* Cartes : profondeur très légère, jamais de néon agressif. */
.card,
.panel,
.stat,
.welcome-card,
.vins-dashboard-enhanced,
.terminal,
.modal-content,
[class*="card"]:not(.login-card) {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.014),
        0 12px 34px rgba(0,0,0,.105);
}

.card,
.panel,
.stat,
.vins-dashboard-enhanced,
.quick-item,
.up-card,
.status-box,
.vins-focus,
.vins-objective {
    transition:
        transform .22s cubic-bezier(.2,.8,.2,1),
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease !important;
}

@media (hover:hover) and (pointer:fine) {
    .card:hover,
    .panel:hover,
    .stat:hover,
    .up-card:hover,
    .vins-objective:hover {
        transform: translateY(-2px);
        border-color: rgba(var(--portal-accent-rgb, 228,161,27), .22) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.02),
            0 16px 42px rgba(0,0,0,.16),
            0 0 28px rgba(var(--portal-accent-rgb, 228,161,27), .035);
    }
}

/* Boutons premium : micro-déplacement + reflet court. */
button,
.submit,
.action,
.btn,
.btn-primary,
.primary-button,
[role="button"] {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    transition:
        transform .16s ease,
        box-shadow .22s ease,
        border-color .22s ease,
        background-color .22s ease,
        color .22s ease !important;
}

button::after,
.submit::after,
.action::after,
.btn::after,
.btn-primary::after,
.primary-button::after,
[role="button"]::after {
    content: "";
    position: absolute;
    top: -120%;
    bottom: -120%;
    left: -45%;
    width: 28%;
    pointer-events: none;
    opacity: 0;
    transform: rotate(18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}

@media (hover:hover) and (pointer:fine) {
    button:hover,
    .submit:hover,
    .action:hover,
    .btn:hover,
    .btn-primary:hover,
    .primary-button:hover,
    [role="button"]:hover {
        transform: translateY(-1px);
    }

    button:hover::after,
    .submit:hover::after,
    .action:hover::after,
    .btn:hover::after,
    .btn-primary:hover::after,
    .primary-button:hover::after,
    [role="button"]:hover::after {
        opacity: 1;
        animation: vins-button-shine .65s ease forwards;
    }
}

button:active,
.submit:active,
.action:active,
.btn:active,
.btn-primary:active,
.primary-button:active,
[role="button"]:active {
    transform: translateY(0) scale(.985);
}

@keyframes vins-button-shine {
    from { left: -45%; }
    to { left: 125%; }
}

/* Sidebar : icônes homogènes et indicateur de page active. */
.nav-link {
    position: relative;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 2px;
    height: 0;
    border-radius: 999px;
    transform: translateY(-50%);
    background: var(--portal-accent, #e4a11b);
    box-shadow: 0 0 12px rgba(var(--portal-accent-rgb, 228,161,27), .38);
    transition: height .2s ease, opacity .2s ease;
    opacity: 0;
}

.nav-link.active::before {
    height: 20px;
    opacity: 1;
}

.nav-icon.vins-svg-icon {
    display: grid;
    place-items: center;
    color: currentColor;
}

.nav-category-links-inner .nav-link {
    animation: vins-nav-item-in .24s ease both;
}

.nav-category-links-inner .nav-link:nth-child(2) { animation-delay: .025s; }
.nav-category-links-inner .nav-link:nth-child(3) { animation-delay: .05s; }
.nav-category-links-inner .nav-link:nth-child(4) { animation-delay: .075s; }
.nav-category-links-inner .nav-link:nth-child(5) { animation-delay: .1s; }
.nav-category-links-inner .nav-link:nth-child(6) { animation-delay: .125s; }

@keyframes vins-nav-item-in {
    from { opacity: 0; transform: translateX(-3px); }
    to { opacity: 1; transform: translateX(0); }
}

/* PP + grade dans la sidebar. */
.user-box.vins-userbox-enhanced,
.profile-mini.vins-userbox-enhanced {
    display: grid !important;
    grid-template-columns: 34px minmax(0,1fr);
    column-gap: 9px;
    align-items: center;
}

.vins-sidebar-avatar {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(var(--portal-accent-rgb, 228,161,27), .3);
    background: rgba(var(--portal-accent-rgb, 228,161,27), .08);
    box-shadow: 0 0 20px rgba(var(--portal-accent-rgb, 228,161,27), .08);
}

.vins-sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-role,
.profile-role,
.vins-rank-badge {
    width: fit-content;
    max-width: 100%;
    padding: 3px 7px;
    border: 1px solid rgba(var(--portal-accent-rgb, 228,161,27), .18);
    border-radius: 999px;
    background: rgba(var(--portal-accent-rgb, 228,161,27), .055);
    color: var(--portal-accent, #e4a11b) !important;
    letter-spacing: .55px !important;
}

/* Skeleton loaders. */
.vins-skeleton {
    width: 100%;
    display: grid;
    gap: 7px;
    padding: 2px 0;
}

.vins-skeleton-line {
    display: block;
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, #15191c 20%, #20262a 45%, #15191c 70%);
    background-size: 220% 100%;
    animation: vins-skeleton-shimmer 1.25s linear infinite;
}

.vins-skeleton-line:nth-child(1) { width: 74%; }
.vins-skeleton-line:nth-child(2) { width: 92%; }
.vins-skeleton-line:nth-child(3) { width: 58%; }

@keyframes vins-skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -20% 0; }
}

/* États vides avec pictogramme léger. */
.empty.vins-empty-state,
.no-data.vins-empty-state {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.empty.vins-empty-state::before,
.no-data.vins-empty-state::before {
    content: "◇";
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--portal-accent-rgb, 228,161,27), .18);
    border-radius: 9px;
    background: rgba(var(--portal-accent-rgb, 228,161,27), .045);
    color: rgba(var(--portal-accent-rgb, 228,161,27), .75);
    font-size: 13px;
}

/* Modales/panneaux flottants en verre sombre. */
.modal,
.modal-backdrop,
.overlay,
.dialog-backdrop {
    backdrop-filter: blur(8px);
}

.modal-content,
.dialog,
.vins-notifications,
.vins-search-box {
    background-color: rgba(13,16,18,.9) !important;
    backdrop-filter: blur(16px) saturate(125%);
    box-shadow: 0 26px 90px rgba(0,0,0,.48) !important;
}

.modal-content,
.dialog {
    animation: vins-modal-in .2s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes vins-modal-in {
    from { opacity: 0; transform: translateY(5px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toasts globalisés. */
.vins-toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 12000;
    width: min(360px, calc(100vw - 28px));
    display: grid;
    gap: 8px;
    pointer-events: none;
}

.vins-toast {
    position: relative;
    overflow: hidden;
    padding: 11px 13px 11px 40px;
    border: 1px solid #292f33;
    border-radius: 9px;
    background: rgba(12,15,17,.94);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 50px rgba(0,0,0,.38);
    color: #d9dddf;
    font: 800 10px/1.45 Arial, sans-serif;
    animation: vins-toast-in .24s cubic-bezier(.2,.8,.2,1) both;
}

.vins-toast::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    transform: translateY(-50%);
    border-radius: 50%;
    background: rgba(99,193,116,.12);
    color: #79cf89;
    font-size: 9px;
}

.vins-toast.error { border-color: rgba(217,92,92,.28); }
.vins-toast.error::before { content: "!"; background: rgba(217,92,92,.12); color: #e88282; }
.vins-toast.info::before { content: "i"; background: rgba(var(--portal-accent-rgb,228,161,27),.12); color: var(--portal-accent,#e4a11b); }
.vins-toast.leaving { animation: vins-toast-out .2s ease forwards; }

@keyframes vins-toast-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vins-toast-out {
    to { opacity: 0; transform: translateY(6px) scale(.985); }
}

/* Mini-graphique personnel. */
.vins-mini-chart-card {
    margin-top: 12px;
    padding: 11px 12px 9px;
    border: 1px solid #1e2428;
    border-radius: 7px;
    background: rgba(8,11,13,.55);
}

.vins-mini-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.vins-mini-chart-title { color: #aab0b3; font: 900 8px Arial; text-transform: uppercase; letter-spacing: .7px; }
.vins-mini-chart-total { color: var(--portal-accent,#e4a11b); font: 900 11px Arial; }
.vins-mini-chart-svg { width: 100%; height: 52px; display: block; overflow: visible; }
.vins-mini-chart-labels { display: grid; grid-template-columns: repeat(7,1fr); margin-top: 3px; color: #4f565a; font: 700 7px Arial; text-align: center; }

/* Command palette plus structurée. */
.vins-search-section-title {
    padding: 11px 16px 6px;
    color: #51585c;
    font: 900 8px Arial;
    text-transform: uppercase;
    letter-spacing: .85px;
}

.vins-search-result.vins-selected {
    background: rgba(var(--portal-accent-rgb,228,161,27),.08) !important;
    box-shadow: inset 2px 0 0 var(--portal-accent,#e4a11b);
}

.vins-search-result .vins-result-icon {
    float: left;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    margin-right: 10px;
    border-radius: 6px;
    background: rgba(var(--portal-accent-rgb,228,161,27),.05);
    color: var(--portal-accent,#e4a11b);
}

/* Curseur rond réactif — uniquement souris/trackpad. */
@media (hover:hover) and (pointer:fine) {
    html.vins-custom-cursor body,
    html.vins-custom-cursor a,
    html.vins-custom-cursor button,
    html.vins-custom-cursor [role="button"],
    html.vins-custom-cursor input,
    html.vins-custom-cursor textarea,
    html.vins-custom-cursor select,
    html.vins-custom-cursor [contenteditable]:not([contenteditable="false"]),
    html.vins-custom-cursor .terminal-input,
    html.vins-custom-cursor .vins-search-input,
    html.vins-custom-cursor .nav-title {
        cursor: none !important;
    }

    .vins-cursor-dot,
    .vins-cursor-ring {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 20000;
        pointer-events: none;
        border-radius: 50%;
        transform: translate(-50%,-50%);
        opacity: 0;
        will-change: transform,left,top,width,height,opacity;
    }

    .vins-cursor-dot {
        width: 4px;
        height: 4px;
        background: var(--portal-accent,#e4a11b);
        box-shadow: 0 0 10px rgba(var(--portal-accent-rgb,228,161,27),.45);
        transition: width .14s ease, height .14s ease, opacity .15s ease;
    }

    .vins-cursor-ring {
        width: 24px;
        height: 24px;
        border: 1px solid rgba(var(--portal-accent-rgb,228,161,27),.55);
        background: rgba(var(--portal-accent-rgb,228,161,27),.025);
        box-shadow: 0 0 18px rgba(var(--portal-accent-rgb,228,161,27),.06);
        transition: width .16s ease, height .16s ease, border-color .16s ease, background .16s ease, opacity .15s ease;
    }

    html.vins-cursor-visible .vins-cursor-dot,
    html.vins-cursor-visible .vins-cursor-ring { opacity: 1; }

    html.vins-cursor-hover .vins-cursor-ring {
        width: 38px;
        height: 38px;
        border-color: rgba(var(--portal-accent-rgb,228,161,27),.82);
        background: rgba(var(--portal-accent-rgb,228,161,27),.075);
    }

    html.vins-cursor-hover .vins-cursor-dot { width: 3px; height: 3px; }

    /* Les zones de saisie gardent le curseur rond custom au lieu du I-beam natif. */
    html.vins-cursor-text .vins-cursor-ring {
        width: 22px;
        height: 22px;
        border-color: rgba(var(--portal-accent-rgb,228,161,27),.9);
        background: rgba(var(--portal-accent-rgb,228,161,27),.045);
        box-shadow: 0 0 22px rgba(var(--portal-accent-rgb,228,161,27),.11);
    }

    html.vins-cursor-text .vins-cursor-dot {
        width: 3px;
        height: 3px;
    }

    html.vins-cursor-click .vins-cursor-ring {
        width: 18px;
        height: 18px;
        background: rgba(var(--portal-accent-rgb,228,161,27),.16);
    }
}

/* Transition page plus organique : fondu + très léger déplacement. */
@keyframes vins-page-out {
    from { opacity: 1; transform: translateY(0); filter: brightness(1); }
    to { opacity: 0; transform: translateY(-4px); filter: brightness(.94); }
}

@keyframes vins-page-in {
    from { opacity: 0; transform: translateY(5px); filter: brightness(.94); }
    to { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

/* Écran de connexion : mouvement lent uniquement décoratif. */
.login-wrapper { animation: vins-login-card-in .65s cubic-bezier(.2,.8,.2,1) both; }
.login-card { border-radius: 12px !important; box-shadow: 0 30px 100px rgba(0,0,0,.58), 0 0 50px rgba(228,161,27,.035) !important; }
.login-card::before { height: 3px !important; background: linear-gradient(90deg, transparent, var(--accent), #f3d47c, var(--accent), transparent) !important; background-size: 220% 100% !important; animation: vins-login-line 5s ease-in-out infinite alternate; }
.background-grid { animation: vins-grid-drift 22s linear infinite; }
.glow { animation: vins-glow-breathe 6s ease-in-out infinite alternate; }

@keyframes vins-login-card-in { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes vins-login-line { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes vins-grid-drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(20px,20px,0); } }
@keyframes vins-glow-breathe { from { opacity:.7; transform:scale(.96); } to { opacity:1; transform:scale(1.04); } }

@media (prefers-reduced-motion: reduce) {
    .card,.panel,.stat,.quick-item,.up-card,.vins-objective,button,.submit,.action,.btn,.btn-primary,.primary-button,[role="button"] { transition: none !important; transform: none !important; }
    .vins-skeleton-line,.login-wrapper,.login-card::before,.background-grid,.glow,.nav-category-links-inner .nav-link { animation: none !important; }
    .vins-cursor-dot,.vins-cursor-ring { display:none !important; }
}

/* VINS VISUAL POLISH V2 */
:root {
    --vins-sidebar-compact-width: 72px;
}

/* Header/hero et fil d'Ariane */
.main.vins-page-hero,
main.vins-page-hero {
    position: relative;
    isolation: isolate;
}
.main.vins-page-hero::before,
main.vins-page-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    height: 190px;
    pointer-events: none;
    opacity: .7;
    background:
        radial-gradient(circle at 82% 12%, rgba(var(--portal-accent-rgb,228,161,27),.075), transparent 31%),
        linear-gradient(180deg, rgba(var(--portal-accent-rgb,228,161,27),.018), transparent);
    mask-image: linear-gradient(to bottom,#000,transparent);
}
.vins-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 18px;
    margin: 0 0 9px;
    color: #4f565a;
    font: 800 8px/1 Arial,sans-serif;
    text-transform: uppercase;
    letter-spacing: .72px;
}
.vins-breadcrumbs a { color: #666e72; text-decoration: none; }
.vins-breadcrumbs a:hover { color: var(--portal-accent,#e4a11b); }
.vins-breadcrumb-sep { opacity: .4; }
.vins-breadcrumb-current { color: rgba(var(--portal-accent-rgb,228,161,27),.88); }

/* Spotlight qui suit la souris dans les cartes. */
.vins-spotlight {
    position: relative;
    isolation: isolate;
}
.vins-spotlight::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .24s ease;
    background: radial-gradient(280px circle at var(--vins-spot-x,50%) var(--vins-spot-y,50%), rgba(var(--portal-secondary-rgb,240,195,90),.075), transparent 62%);
}
@media (hover:hover) and (pointer:fine) {
    .vins-spotlight:hover::after { opacity: 1; }
}

/* Séparateurs et titres de cartes plus raffinés. */
.card-header,
.panel-header,
.section-header {
    position: relative;
}
.card-header::after,
.panel-header::after,
.section-header::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(var(--portal-accent-rgb,228,161,27),.22), transparent 56%);
}

/* Tableaux plus lisibles. */
table { border-collapse: separate; border-spacing: 0; }
thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(13,16,18,.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(var(--portal-accent-rgb,228,161,27),.08);
}
tbody tr { transition: background-color .18s ease, transform .18s ease; }
tbody tr:hover { background: rgba(var(--portal-accent-rgb,228,161,27),.035); }
td, th { vertical-align: middle; }

/* Badges de statut cohérents. */
.status,
.badge,
.chip,
.private-badge,
[class*="status-"] {
    position: relative;
}
.status::before,
.badge::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 9px currentColor;
    opacity: .72;
    vertical-align: 1px;
}
.status.pending,
.status.waiting,
.badge.pending,
.task-urgent {
    animation: vins-attention-breathe 2.6s ease-in-out infinite;
}
@keyframes vins-attention-breathe {
    0%,100% { box-shadow: 0 0 0 rgba(var(--portal-accent-rgb,228,161,27),0); }
    50% { box-shadow: 0 0 22px rgba(var(--portal-accent-rgb,228,161,27),.075); }
}

/* Stacks d'avatars. */
.vins-assignees-row { display:flex; align-items:center; gap:9px; margin-top:9px; }
.vins-avatar-stack { display:flex; align-items:center; min-height:28px; padding-left:3px; }
.vins-avatar-stack-item {
    width: 28px;
    height: 28px;
    margin-left: -7px;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid var(--portal-card,#121417);
    background: #171b1e;
    box-shadow: 0 5px 18px rgba(0,0,0,.25);
    transition: transform .16s ease, z-index .16s ease, border-color .16s ease;
}
.vins-avatar-stack-item:first-child { margin-left:0; }
.vins-avatar-stack-item img { width:100%; height:100%; object-fit:cover; display:block; }
.vins-avatar-stack-item:hover { transform: translateY(-3px) scale(1.08); z-index:8; border-color: rgba(var(--portal-accent-rgb,228,161,27),.55); }
.vins-avatar-stack-more {
    width:28px;height:28px;margin-left:-7px;border-radius:50%;display:grid;place-items:center;
    border:2px solid var(--portal-card,#121417);background:#191d20;color:#777e82;font:900 8px Arial;
}

/* Hover card d'un membre staff. */
.vins-staff-hover-target { cursor:none; }
.vins-staff-popover {
    position: fixed;
    z-index: 19000;
    width: 286px;
    padding: 13px;
    border: 1px solid rgba(var(--portal-accent-rgb,228,161,27),.2);
    border-radius: 11px;
    background: rgba(11,14,16,.94);
    backdrop-filter: blur(18px) saturate(125%);
    box-shadow: 0 24px 70px rgba(0,0,0,.52);
    color:#d9dddf;
    opacity:0;
    transform: translateY(4px) scale(.985);
    pointer-events:none;
    transition: opacity .16s ease, transform .16s ease;
}
.vins-staff-popover.open { opacity:1; transform:none; }
.vins-staff-popover-head { display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px; align-items:center; }
.vins-staff-popover-avatar { width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid rgba(var(--portal-accent-rgb,228,161,27),.28);background:#15191c; }
.vins-staff-popover-avatar img { width:100%;height:100%;object-fit:cover; }
.vins-staff-popover-name { color:#f3f4f4;font:900 12px Arial;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.vins-staff-popover-role { margin-top:3px;color:var(--portal-accent,#e4a11b);font:800 8px Arial;text-transform:uppercase;letter-spacing:.55px; }
.vins-staff-popover-grid { display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:11px; }
.vins-staff-popover-cell { padding:8px;border:1px solid #202529;border-radius:7px;background:rgba(6,8,10,.48); }
.vins-staff-popover-label { color:#50575b;font:800 7px Arial;text-transform:uppercase;letter-spacing:.55px; }
.vins-staff-popover-value { margin-top:4px;color:#aeb4b7;font:800 9px Arial;overflow-wrap:anywhere; }
.vins-staff-popover-last { margin-top:9px;padding-top:8px;border-top:1px solid #1d2225;color:#666e72;font:8px/1.5 Arial; }

/* Tooltips custom. */
.vins-tooltip {
    position: fixed;
    z-index: 21000;
    max-width: 280px;
    padding: 7px 9px;
    border: 1px solid #282e32;
    border-radius: 7px;
    background: rgba(10,13,15,.96);
    backdrop-filter: blur(12px);
    color:#b7bdc0;
    box-shadow:0 12px 34px rgba(0,0,0,.36);
    font:700 8px/1.4 Arial;
    pointer-events:none;
    opacity:0;
    transform:translateY(3px);
    transition:opacity .13s ease,transform .13s ease;
}
.vins-tooltip.open { opacity:1;transform:none; }

/* Timeline compacte. */
.vins-mini-timeline { display:flex;align-items:center;gap:0;margin-top:10px;padding-top:9px;border-top:1px solid #1b2023; }
.vins-mini-timeline-step { display:flex;align-items:center;gap:5px;color:#51585c;font:800 7px Arial;text-transform:uppercase;letter-spacing:.45px; }
.vins-mini-timeline-step::before { content:"";width:7px;height:7px;border-radius:50%;border:1px solid #3b4246;background:#101316; }
.vins-mini-timeline-step.done { color:#858d91; }
.vins-mini-timeline-step.done::before { border-color:rgba(var(--portal-accent-rgb,228,161,27),.65);background:rgba(var(--portal-accent-rgb,228,161,27),.24);box-shadow:0 0 9px rgba(var(--portal-accent-rgb,228,161,27),.15); }
.vins-mini-timeline-step.final.ok::before { border-color:#63c174;background:rgba(99,193,116,.22); }
.vins-mini-timeline-step.final.bad::before { border-color:#d95c5c;background:rgba(217,92,92,.22); }
.vins-mini-timeline-line { width:22px;height:1px;background:#2a3034;margin:0 5px; }

/* Dates relatives. */
.vins-relative-date { color:#7a8286;white-space:nowrap;border-bottom:1px dotted #3a4145; }

/* Feedback de sauvegarde et modifications non enregistrées. */
.vins-save-pulse { animation:vins-save-pulse .68s ease; }
@keyframes vins-save-pulse {
    0% { box-shadow:0 0 0 rgba(99,193,116,0); }
    35% { box-shadow:0 0 0 1px rgba(99,193,116,.42),0 0 28px rgba(99,193,116,.11); }
    100% { box-shadow:0 0 0 rgba(99,193,116,0); }
}
html.vins-has-unsaved .header-label::after,
html.vins-has-unsaved .topbar-label::after {
    content:"  •  modifications non enregistrées";
    color:#d6a94d;
    letter-spacing:.4px;
    text-transform:none;
}
form.vins-dirty { position:relative; }
form.vins-dirty::after { content:"";position:absolute;right:2px;top:2px;width:6px;height:6px;border-radius:50%;background:#d6a94d;box-shadow:0 0 10px rgba(214,169,77,.45); }

/* Progression de scroll + retour en haut. */
.vins-scroll-progress { position:fixed;top:0;left:0;z-index:22000;height:2px;width:0;background:linear-gradient(90deg,var(--portal-accent,#e4a11b),var(--portal-secondary,#f0c35a));box-shadow:0 0 14px rgba(var(--portal-accent-rgb,228,161,27),.28);pointer-events:none;transition:width .08s linear; }
.vins-back-top { position:fixed;right:22px;bottom:22px;z-index:8800;width:34px;height:34px;border:1px solid #2b3034;border-radius:9px;background:rgba(12,15,17,.9);backdrop-filter:blur(12px);color:var(--portal-accent,#e4a11b);display:grid;place-items:center;opacity:0;transform:translateY(8px);pointer-events:none;box-shadow:0 12px 36px rgba(0,0,0,.3); }
.vins-back-top.visible { opacity:1;transform:none;pointer-events:auto; }
.vins-back-top svg { width:14px;height:14px; }

/* Apparition des blocs et transitions de filtre. */
.vins-reveal { opacity:0;transform:translateY(5px); }
.vins-reveal.vins-revealed { animation:vins-reveal-in .32s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vins-reveal-in { to { opacity:1;transform:none; } }
.vins-filter-enter { animation:vins-filter-enter .24s ease both; }
@keyframes vins-filter-enter { from { opacity:0;transform:translateY(3px); } to { opacity:1;transform:none; } }

/* Scrollbar quasi invisible au repos, visible pendant le scroll. */
html:not(.vins-scrolling) *::-webkit-scrollbar-thumb { background-color:rgba(98,105,109,.24); }
html.vins-scrolling *::-webkit-scrollbar-thumb { background-color:rgba(var(--portal-accent-rgb,228,161,27),.42); }

/* Sidebar compacte, expansion au survol sans déplacer le contenu. */
.vins-sidebar-compact-toggle { position:absolute;right:10px;top:16px;width:24px;height:24px;border:1px solid #252b2f;border-radius:7px;background:#111519;color:#737b7f;display:grid;place-items:center;z-index:3; }
.vins-sidebar-compact-toggle svg { width:12px;height:12px; }
html.vins-sidebar-compact { --sidebar-width:var(--vins-sidebar-compact-width) !important; }
html.vins-sidebar-compact .sidebar { width:var(--vins-sidebar-compact-width) !important;transition:width .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;overflow:hidden; }
html.vins-sidebar-compact .sidebar:hover { width:250px !important;box-shadow:16px 0 50px rgba(0,0,0,.28); }
html.vins-sidebar-compact .main,
html.vins-sidebar-compact main.main { margin-left:var(--vins-sidebar-compact-width) !important;width:calc(100% - var(--vins-sidebar-compact-width)) !important;transition:margin-left .28s ease,width .28s ease; }
html.vins-sidebar-compact .brand { min-height:72px;padding-left:14px !important;padding-right:14px !important; }
html.vins-sidebar-compact .brand-title { font-size:0;white-space:nowrap; }
html.vins-sidebar-compact .brand-title::before { content:"VC";font-size:15px;color:#f2f3f3;font-weight:900;letter-spacing:-.5px; }
html.vins-sidebar-compact .brand-subtitle,
html.vins-sidebar-compact .nav-category-toggle > span:first-child,
html.vins-sidebar-compact .nav-category-chevron,
html.vins-sidebar-compact .nav-link { font-size:0 !important; }
html.vins-sidebar-compact .nav-category { margin-top:8px; }
html.vins-sidebar-compact .nav-category-toggle { min-height:8px;pointer-events:none; }
html.vins-sidebar-compact .nav-link { justify-content:center;padding-left:8px !important;padding-right:8px !important;gap:0 !important; }
html.vins-sidebar-compact .nav-icon { width:22px !important;font-size:12px !important; }
html.vins-sidebar-compact .user-box.vins-userbox-enhanced,
html.vins-sidebar-compact .profile-mini.vins-userbox-enhanced { display:flex !important;justify-content:center;padding:8px !important; }
html.vins-sidebar-compact .user-name,
html.vins-sidebar-compact .user-role,
html.vins-sidebar-compact .profile-name,
html.vins-sidebar-compact .profile-role { display:none !important; }
html.vins-sidebar-compact .logout { font-size:0 !important;min-height:32px;position:relative; }
html.vins-sidebar-compact .logout::before { content:"↗";font-size:13px; }
html.vins-sidebar-compact .sidebar:hover .brand-title { font-size:17px !important; }
html.vins-sidebar-compact .sidebar:hover .brand-title::before { display:none; }
html.vins-sidebar-compact .sidebar:hover .brand-subtitle { display:block !important;font-size:9px !important; }
html.vins-sidebar-compact .sidebar:hover .nav-category-toggle > span:first-child { font-size:9px !important; }
html.vins-sidebar-compact .sidebar:hover .nav-category-toggle { pointer-events:auto; }
html.vins-sidebar-compact .sidebar:hover .nav-category-chevron { font-size:10px !important; }
html.vins-sidebar-compact .sidebar:hover .nav-link { justify-content:flex-start;font-size:12px !important;gap:10px !important; }
html.vins-sidebar-compact .sidebar:hover .user-box.vins-userbox-enhanced,
html.vins-sidebar-compact .sidebar:hover .profile-mini.vins-userbox-enhanced { display:grid !important;justify-content:initial;padding:10px !important; }
html.vins-sidebar-compact .sidebar:hover .user-name,
html.vins-sidebar-compact .sidebar:hover .user-role,
html.vins-sidebar-compact .sidebar:hover .profile-name,
html.vins-sidebar-compact .sidebar:hover .profile-role { display:block !important; }
html.vins-sidebar-compact .sidebar:hover .logout { font-size:10px !important; }
html.vins-sidebar-compact .sidebar:hover .logout::before { display:none; }

/* Splash ultra court une seule fois par session de connexion. */
.vins-session-splash { position:fixed;inset:0;z-index:30000;display:grid;place-items:center;background:#080a0c;transition:opacity .25s ease,visibility .25s ease; }
.vins-session-splash.leaving { opacity:0;visibility:hidden; }
.vins-session-splash-mark { position:relative;width:86px;height:86px;display:grid;place-items:center;border:1px solid rgba(var(--portal-accent-rgb,228,161,27),.2);border-radius:24px;background:radial-gradient(circle,rgba(var(--portal-accent-rgb,228,161,27),.09),transparent 70%);color:#f1f2f2;font:900 20px Arial;letter-spacing:-1px; }
.vins-session-splash-mark::after { content:"";position:absolute;left:13px;right:13px;bottom:17px;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--portal-accent,#e4a11b),transparent);animation:vins-splash-line .72s ease-in-out infinite alternate; }
@keyframes vins-splash-line { from{transform:scaleX(.35);opacity:.45} to{transform:scaleX(1);opacity:1} }

/* Signature/watermark. */
.vins-watermark { position:absolute;right:28px;top:76px;z-index:-1;color:rgba(var(--portal-accent-rgb,228,161,27),.035);font:900 76px/1 Arial;letter-spacing:-7px;user-select:none;pointer-events:none;transform:rotate(-7deg); }
.login-card::after { content:"VC";position:absolute;right:-8px;bottom:-22px;color:rgba(228,161,27,.035);font:900 90px/1 Arial;letter-spacing:-8px;transform:rotate(-8deg);pointer-events:none; }

/* Easter egg Fondateur très discret. */
html.vins-founder .user-role,
html.vins-founder .profile-role { position:relative;overflow:hidden; }
html.vins-founder .user-role::after,
html.vins-founder .profile-role::after { content:"";position:absolute;inset:-80% auto -80% -40%;width:25%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);animation:vins-founder-shine 7s ease-in-out infinite; }
@keyframes vins-founder-shine { 0%,78%{left:-40%;opacity:0} 82%{opacity:1} 94%,100%{left:125%;opacity:0} }
html.vins-founder a[href*="/cmd"] .nav-icon { filter:drop-shadow(0 0 8px rgba(var(--portal-accent-rgb,228,161,27),.22)); }

@media (max-width:720px) {
    .vins-sidebar-compact-toggle { display:none; }
    .vins-breadcrumbs { margin-top:4px; }
    .vins-back-top { right:12px;bottom:12px; }
    .vins-watermark { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .status.pending,.status.waiting,.badge.pending,.task-urgent,.vins-session-splash-mark::after,html.vins-founder .user-role::after,html.vins-founder .profile-role::after { animation:none !important; }
    .vins-reveal,.vins-reveal.vins-revealed,.vins-filter-enter { opacity:1 !important;transform:none !important;animation:none !important; }
}