/* ============================================================
   Jurenys - app.css (composants + layouts + pages)
   Auteur : Thomas Dupont, Senior Frontend, dig-holding
   Date   : 2026-04-22 (sprint 1 J2)
   Design system de reference : docs/design-system.md V0.1 (Julie Vasseur)
   Regles :
     - Ne JAMAIS utiliser de hex en dur, toujours les tokens design-tokens.css
     - Pas de framework CSS (pas de Tailwind, pas de Bootstrap)
     - Responsive desktop-first : >=1024px defaut, tablette 768-1023px, mobile <768px
     - Dark mode : hors scope sprint 1 (TD-7 ouvert)
     - Bouton primaire = Navy profond (--navy-900), regle absolue Stephane
   ============================================================ */

/* Consommation des tokens. Import relatif au dossier CSS. */
@import url('./design-tokens.css');

/* ============================================================
   0. RESET COMPLEMENTAIRE + UTILITAIRES
   ============================================================ */

img, svg { display: inline-block; max-width: 100%; }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { cursor: pointer; }
button[disabled] { cursor: not-allowed; }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--navy-900);
    color: #FFFFFF;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible {
    top: var(--space-4);
    box-shadow: var(--shadow-focus);
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
    .hide-desktop { display: none !important; }
}

/* ============================================================
   1. LAYOUT AUTH (login, forgot, reset)
   ============================================================ */

.auth-shell {
    min-height: 100vh;
    background: var(--navy-900);
    color: var(--color-text);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-24) var(--space-6) var(--space-12);
}

.auth-brand {
    position: absolute;
    top: var(--space-8);
    left: var(--space-8);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: #FFFFFF;
    text-decoration: none;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}
.auth-brand:hover { color: var(--bronze-400); }
.auth-brand:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-md); }

.auth-brand .brand-mark {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bronze-500);
    color: var(--navy-900);
    border-radius: var(--radius-md);
    font-family: var(--font-serif);
    font-weight: var(--fw-bold);
    font-size: 17px;
}
.auth-brand .brand-title { opacity: 0.92; line-height: 1.1; }
.auth-brand .brand-sub {
    display: block;
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--bronze-400);
    margin-top: 2px;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--ivory-50);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-12);
}

.auth-card h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-bold);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--navy-900);
    margin: 0 0 var(--space-2);
}
.auth-card .lede {
    font-size: var(--fs-base);
    color: var(--gray-700);
    margin: 0 0 var(--space-8);
}
.auth-card .back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--bronze-600);
    text-decoration: none;
    margin: 0 0 var(--space-6);
}
.auth-card .back-link:hover { color: var(--bronze-700); text-decoration: underline; text-underline-offset: 2px; }
.auth-card .back-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.auth-footer {
    margin-top: var(--space-12);
    text-align: center;
    color: rgba(255, 255, 255, 0.58);
    font-size: var(--fs-xs);
    letter-spacing: 0.02em;
    padding: 0 var(--space-6);
}
.auth-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.auth-footer a:hover { color: var(--bronze-400); text-decoration: underline; text-underline-offset: 2px; }
.auth-footer a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.auth-footer .dot { margin: 0 var(--space-2); opacity: 0.5; }

@media (max-width: 640px) {
    .auth-shell { padding: var(--space-16) var(--space-4) var(--space-8); }
    .auth-brand { top: var(--space-4); left: var(--space-4); }
    .auth-card { padding: var(--space-8) var(--space-6); }
    .auth-card h1 { font-size: var(--fs-2xl); }
}

/* ============================================================
   2. LAYOUT ADMIN (topbar + sidebar + main)
   ============================================================ */

.admin-shell {
    min-height: 100vh;
    background: var(--color-bg);
    display: grid;
    grid-template-columns: 256px 1fr;
    grid-template-rows: 56px 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
}

/* Topbar */
.admin-topbar {
    grid-area: topbar;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #eef2f6;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);
}

.admin-topbar .topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex: 1;
    min-width: 0;
}

.admin-topbar .menu-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--gray-700);
    transition: background var(--dur-fast) var(--ease-out);
}
.admin-topbar .menu-toggle:hover { background: var(--navy-50); color: var(--navy-800); }
.admin-topbar .menu-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.admin-topbar .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--gray-600);
    min-width: 0;
    overflow: hidden;
}
.admin-topbar .breadcrumb a {
    color: var(--gray-600);
    text-decoration: none;
}
.admin-topbar .breadcrumb a:hover { color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
.admin-topbar .breadcrumb .sep {
    color: var(--gray-400);
    font-size: 12px;
}
.admin-topbar .breadcrumb .current {
    color: #0c2340;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-topbar .topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.topbar-search {
    position: relative;
    width: 280px;
}
.topbar-search input {
    width: 100%;
    height: 36px;
    padding: 0 var(--space-3) 0 36px;
    background: var(--gray-50);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--gray-900);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.topbar-search input::placeholder { color: var(--gray-500); }
.topbar-search input:focus-visible {
    outline: none;
    background: #FFFFFF;
    border-color: var(--navy-600);
    box-shadow: var(--shadow-focus-navy);
}
.topbar-search .icon-search {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    pointer-events: none;
}

.topbar-bell {
    position: relative;
    width: 40px; height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    transition: background .15s ease, color .15s ease;
}
.topbar-bell:hover { background: #f1f5f9; color: #0c2340; }
.topbar-bell:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.topbar-bell .dot {
    position: absolute;
    top: 10px; right: 10px;
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    background: var(--danger-500);
    box-shadow: 0 0 0 2px #FFFFFF;
}

/* User menu dropdown */
.user-menu {
    position: relative;
}
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--gray-800);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease-out);
}
.user-menu-trigger:hover { background: var(--navy-50); }
.user-menu-trigger:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.user-menu-trigger .avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--navy-700);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
}
.user-menu-trigger .chevron { color: var(--gray-500); transition: transform var(--dur-fast) var(--ease-out); }
.user-menu[data-open="true"] .user-menu-trigger .chevron { transform: rotate(180deg); }

.user-menu-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 260px;
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    display: none;
    z-index: var(--z-dropdown);
}
.user-menu[data-open="true"] .user-menu-panel { display: block; }

.user-menu-header {
    padding: var(--space-3) var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--space-2);
}
.user-menu-header .name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin-bottom: 2px;
}
.user-menu-header .email {
    display: block;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    margin-bottom: var(--space-1);
    word-break: break-all;
}
.user-menu-header .role {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--bronze-700);
    background: var(--bronze-100);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

.user-menu-panel a,
.user-menu-panel button.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--gray-800);
    font-size: var(--fs-sm);
    text-decoration: none;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.user-menu-panel a:hover,
.user-menu-panel button.menu-item:hover {
    background: var(--navy-50);
    color: var(--navy-900);
}
.user-menu-panel a:focus-visible,
.user-menu-panel button.menu-item:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.user-menu-panel .menu-sep {
    height: 1px;
    background: var(--gray-100);
    margin: var(--space-2) 0;
}
.user-menu-panel .menu-item.danger { color: var(--danger-500); }
.user-menu-panel .menu-item.danger:hover { background: var(--danger-100); color: var(--danger-700); }

/* Sidebar */
.admin-sidebar {
    grid-area: sidebar;
    background: #0c2340;
    border-right: none;
    padding: var(--space-6) 0 var(--space-8);
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: var(--z-sticky);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    color: #ffffff;
}
.sidebar-brand .brand-mark {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.1);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    font-size: 18px;
}
.sidebar-brand .brand-logo {
    max-height: 32px;
    max-width: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .95;
}
.sidebar-brand .brand-name {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
    color: #ffffff;
    line-height: 1.15;
}
.sidebar-brand .brand-sub {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: #c9a84c;
    margin-top: 2px;
}

.sidebar-section {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    padding: 22px 18px 8px 18px;
    margin-top: 0;
    border-top: none;
}
.sidebar-section:first-child {
    margin-top: 0;
    border-top: none;
}

.sidebar-nav { display: flex; flex-direction: column; }

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 11px 18px;
    margin: 1px 10px;
    border-radius: 10px;
    gap: 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: all .15s ease;
    position: relative;
}
.sidebar-item .icon { width: 26px; height: 26px; flex-shrink: 0; transition: all .15s ease; }
.sidebar-item .icon, .sidebar-item svg.icon { stroke: #fff; color: #fff; fill: none; stroke-width: 1.8; }
.sidebar-item svg.icon [fill] { fill: rgba(255,255,255,.2); }
.sidebar-item:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
    text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }
.fc .fc-icon { background: none; -webkit-mask: none; mask: none; fill: none; stroke: none; display: inline-block; font-family: 'fcicons' !important; }
.fc .fc-button { background: transparent; border: 1px solid #d1d5db; color: #334155; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.fc .fc-button:hover { background: #f1f5f9; }
.fc .fc-button-active, .fc .fc-button:active { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; }
.fc .fc-toolbar-title { font-size: 18px; font-weight: 700; color: #0c2340; }
.fc .fc-daygrid-day-number { color: #334155; font-size: 13px; }
.fc .fc-col-header-cell-cushion { color: #64748b; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.sidebar-item:hover .icon, .sidebar-item:hover svg.icon { stroke: #fff; color: #fff; }
.sidebar-item:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,.5); }

.sidebar-item[aria-current="page"],
.sidebar-item.is-active {
    background: rgba(37,99,235,.18);
    color: #fff;
    font-weight: 600;
}
.sidebar-item[aria-current="page"] .icon,
.sidebar-item.is-active .icon,
.sidebar-item[aria-current="page"] svg.icon,
.sidebar-item.is-active svg.icon { stroke: #fff; color: #fff; }
.sidebar-item.is-active svg.icon [fill],
.sidebar-item[aria-current="page"] svg.icon [fill] { fill: rgba(255,255,255,.25); }

.sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255,255,255,.08);
}

/* Main content */
.admin-main {
    grid-area: main;
    padding: 28px 32px;
    background: #f8fafc;
    min-width: 0;
    overflow-x: auto;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.page-header .page-title-wrap { min-width: 0; }
.page-header h1 {
    font-family: var(--font-sans);
    font-size: 22px;
    font-weight: 700;
    color: #0c2340;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-2);
    line-height: var(--lh-tight);
}
.page-header .page-subtitle {
    margin: 0;
    font-size: 13px;
    color: #64748b;
}
.page-header .page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Mobile / tablette */
@media (max-width: 1023px) {
    .admin-shell {
        grid-template-columns: 1fr;
        grid-template-rows: 56px 1fr;
        grid-template-areas:
            "topbar"
            "main";
    }
    .admin-topbar .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .admin-sidebar {
        position: fixed;
        top: 0; left: -280px;
        width: 260px;
        height: 100vh;
        z-index: var(--z-modal);
        transition: left var(--dur-base) var(--ease-out);
        box-shadow: var(--shadow-lg);
    }
    .admin-sidebar[data-open="true"] { left: 0; }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(12, 35, 64, 0.5);
        backdrop-filter: blur(2px);
        z-index: calc(var(--z-modal) - 1);
    }
    .sidebar-backdrop[data-open="true"] { display: block; }
    .topbar-search { width: 180px; }
}
@media (max-width: 639px) {
    .admin-main { padding: var(--space-4); }
    .topbar-search { display: none; }
    .page-header { flex-direction: column; }
}

/* ============================================================
   3. BOUTONS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 40px;
    padding: 0 var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn .icon { width: 16px; height: 16px; }

.btn-sm { height: 32px; padding: 0 var(--space-4); font-size: var(--fs-xs); }
.btn-lg { height: 48px; padding: 0 var(--space-8); font-size: var(--fs-sm); letter-spacing: 0.06em; text-transform: uppercase; }
.btn-block { width: 100%; }

/* Primary : Navy profond - signature du produit */
.btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(37,99,235,.2);
}
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 2px 6px rgba(37,99,235,.3); transform: translateY(-1px); }
.btn-primary:active { background: #1e40af; border-color: #1e40af; transform: translateY(0); box-shadow: none; }
.btn-primary[disabled],
.btn-primary.is-disabled {
    background: var(--gray-400);
    border-color: var(--gray-400);
    color: var(--gray-100);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Secondary : outline navy */
.btn-secondary {
    background: transparent;
    color: var(--navy-900);
    border-color: var(--navy-700);
    font-weight: var(--fw-medium);
}
.btn-secondary:hover { background: var(--navy-50); border-color: var(--navy-800); color: var(--navy-900); }
.btn-secondary:active { background: var(--navy-100); transform: translateY(1px); }
.btn-secondary[disabled],
.btn-secondary.is-disabled {
    color: var(--gray-500);
    border-color: var(--gray-300);
    cursor: not-allowed;
    background: transparent;
}

/* Ghost : tertiaire, pour toolbars denses */
.btn-ghost {
    background: transparent;
    color: #64748b;
    border-color: transparent;
    font-weight: var(--fw-medium);
}
.btn-ghost:hover { background: #f1f5f9; color: #0c2340; }
.btn-ghost:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Danger : actions destructrices */
.btn-danger {
    background: #dc2626;
    color: #FFFFFF;
    border-color: #dc2626;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.btn-danger:active { transform: translateY(1px); }

/* Icon-only ghost (toolbar compacte) */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--gray-600);
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { background: var(--navy-50); color: var(--navy-800); }
.btn-icon:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-icon.is-danger:hover { background: var(--danger-100); color: var(--danger-700); }

/* Loading */
.btn.is-loading { opacity: 0.85; pointer-events: none; }
.btn.is-loading .spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: currentColor;
    border-radius: var(--radius-full);
    animation: spin 640ms linear infinite;
}
.btn-secondary.is-loading .spinner,
.btn-ghost.is-loading .spinner {
    border-color: rgba(10,31,68,0.2);
    border-top-color: var(--navy-800);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   4. FORMULAIRES (inputs, selects, checkbox, textarea)
   ============================================================ */

.field { margin-bottom: var(--space-4); }
.field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (max-width: 640px) {
    .field-row { grid-template-columns: 1fr; }
}

.label,
.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: var(--space-1);
}
.label .req { color: var(--danger-500); margin-left: 2px; }

.helper {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    margin: var(--space-1) 0 0;
    line-height: var(--lh-normal);
}
.field-error {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--danger-700);
    margin: var(--space-1) 0 0;
}

.input,
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="tel"],
.field input[type="number"],
.field input[type="date"],
.field input[type="search"],
.field input[type="url"] {
    width: 100%;
    height: 40px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--gray-900);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder,
.field input::placeholder { color: var(--gray-500); }
.input:hover,
.field input:hover { border-color: var(--gray-400); }
.input:focus-visible,
.field input:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.input[aria-invalid="true"],
.field input[aria-invalid="true"] {
    border-color: var(--danger-500);
    padding-right: var(--space-8);
}
.input[disabled],
.field input[disabled] {
    background: var(--gray-50);
    color: var(--gray-500);
    cursor: not-allowed;
}

.input-lg,
.field input.input-lg { height: 48px; padding: 0 var(--space-4); font-size: var(--fs-base); }
.input-sm { height: 32px; padding: 0 var(--space-2); font-size: var(--fs-xs); }

/* Input wrapper pour icone interne (password toggle, search) */
.input-wrap {
    position: relative;
}
.input-wrap .input,
.input-wrap input { padding-right: 44px; }
.input-wrap .input-addon-right {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-md);
    color: var(--gray-500);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.input-wrap .input-addon-right:hover { color: var(--navy-700); background: var(--navy-50); }
.input-wrap .input-addon-right:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.input-wrap .input-addon-left {
    position: absolute;
    left: var(--space-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    pointer-events: none;
    display: inline-flex;
}
.input-wrap.has-addon-left .input,
.input-wrap.has-addon-left input { padding-left: 40px; }

textarea,
.textarea {
    width: 100%;
    min-height: 96px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--gray-900);
    resize: vertical;
    line-height: var(--lh-normal);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea:focus-visible,
.textarea:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

/* Select natif stylé */
.select,
.field select {
    width: 100%;
    height: 40px;
    padding: 10px 36px 10px 14px;
    background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    color: var(--gray-900);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.select:hover,
.field select:hover { border-color: var(--gray-400); }
.select:focus-visible,
.field select:focus-visible {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.select[disabled] {
    background-color: var(--gray-50);
    color: var(--gray-500);
    cursor: not-allowed;
}

/* Checkbox */
.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--gray-900);
    line-height: var(--lh-normal);
}
.checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin: 1px 0 0;
    accent-color: var(--navy-900);
    cursor: pointer;
}
.checkbox input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.checkbox-text { display: block; }
.checkbox-text .helper { margin: 2px 0 0; }

/* Radio */
.radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--gray-900);
}
.radio input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: var(--navy-900);
    cursor: pointer;
}

/* Fieldset / form sections */
.form-section {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--gray-100);
}
.form-section:first-of-type { padding-top: 0; border-top: 0; }
.form-section > h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0 0 var(--space-4);
    letter-spacing: 0;
}
.form-section > .form-section-helper {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    margin: 0 0 var(--space-4);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-100);
    margin-top: var(--space-6);
}

/* Password strength bar */
.pwd-strength {
    display: flex;
    gap: 4px;
    margin: var(--space-2) 0 var(--space-1);
}
.pwd-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    transition: background var(--dur-fast) var(--ease-out);
}
.pwd-strength[data-level="1"] .pwd-strength-bar:nth-child(-n+1) { background: var(--danger-500); }
.pwd-strength[data-level="2"] .pwd-strength-bar:nth-child(-n+2) { background: var(--warning-500); }
.pwd-strength[data-level="3"] .pwd-strength-bar:nth-child(-n+3) { background: var(--bronze-500); }
.pwd-strength[data-level="4"] .pwd-strength-bar { background: var(--navy-700); }

.pwd-criteria {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--fs-xs);
}
.pwd-criteria li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-700);
    transition: color var(--dur-fast) var(--ease-out);
}
.pwd-criteria li .check-mark {
    width: 14px; height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    flex-shrink: 0;
}
.pwd-criteria li.is-ok { color: var(--gray-900); }
.pwd-criteria li.is-ok .check-mark { color: var(--success-500); }

/* Error banner / success banner (inline forms) */
.form-banner {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.form-banner.is-error {
    background: var(--danger-100);
    color: var(--danger-700);
    border-left: 3px solid var(--danger-500);
}
.form-banner.is-info {
    background: var(--info-100);
    color: var(--info-700);
    border-left: 3px solid var(--navy-600);
}
.form-banner.is-success {
    background: var(--success-100);
    color: var(--success-700);
    border-left: 3px solid var(--success-500);
}
.form-banner.is-warning {
    background: var(--warning-100);
    color: var(--warning-700);
    border-left: 3px solid var(--warning-500);
}

/* Separateur visuel "ou" pour auth */
.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    font-size: var(--fs-xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}
.divider::before, .divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* ============================================================
   5. CARDS
   ============================================================ */

.card {
    background: #fff;
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    padding: var(--space-6);
    box-shadow: 0 1px 2px rgba(12,35,64,.04);
}
.card + .card { margin-top: var(--space-4); }

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--space-4);
}
.card-header h3 {
    font-family: var(--font-sans);
    font-size: 16px;
    font-weight: 600;
    color: #0c2340;
    margin: 0;
    line-height: var(--lh-snug);
    padding-left: 12px;
    border-left: 3px solid #2563eb;
}
.card-header .eyebrow { margin-bottom: var(--space-1); }

.card-footer {
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-100);
    margin-top: var(--space-4);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
}

.card.is-editing {
    border-left: 3px solid var(--bronze-500);
    padding-left: calc(var(--space-6) - 3px);
}
.card.is-flash {
    animation: flash-bg var(--dur-slow) var(--ease-out);
}
@keyframes flash-bg {
    0% { background: var(--navy-100); }
    100% { background: #FFFFFF; }
}

.card.is-danger-zone {
    border-left: 3px solid var(--danger-500);
    background: #FCF5F5;
}
.card.is-danger-zone h3 { color: var(--danger-700); }

/* ============================================================
   6. BADGES
   ============================================================ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    letter-spacing: 0.02em;
    font-family: var(--font-sans);
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.badge .icon { width: 12px; height: 12px; }

.badge-default { background: #f1f5f9; color: #475569; }
.badge-primary { background: #dbeafe; color: #1d4ed8; }
.badge-accent  { background: var(--bronze-100); color: var(--bronze-700); }
.badge-success { background: #dcfce7; color: #15803d; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger  { background: #fee2e2; color: #991b1b; }
.badge-info    { background: var(--info-100); color: var(--info-700); }

/* ============================================================
   7. TABLES
   ============================================================ */

.table-container {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}

.data-table thead th {
    background: #f8fafc;
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    white-space: nowrap;
}
.data-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.data-table thead th.sortable .sort-icon {
    display: inline-block;
    margin-left: var(--space-1);
    color: var(--gray-400);
    transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.data-table thead th.sortable:hover .sort-icon { color: var(--bronze-600); }
.data-table thead th.sortable[aria-sort="ascending"] .sort-icon { color: var(--bronze-600); transform: rotate(180deg); }
.data-table thead th.sortable[aria-sort="descending"] .sort-icon { color: var(--bronze-600); }

.data-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 13.5px;
    vertical-align: middle;
}
.data-table tbody td a { color: #2563eb; text-decoration: none; }
.data-table tbody td a:hover { text-decoration: underline; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}
.data-table tbody tr:hover { background: #f8fafc; cursor: default; }
.data-table tbody tr:nth-child(even) { background: #fafbfc; }
.data-table tbody tr:nth-child(even):hover { background: #f5f6f8; }
.data-table tbody tr.is-selected {
    background: var(--navy-100);
    box-shadow: inset 3px 0 0 var(--bronze-500);
}

.data-table .cell-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 220px;
}
.data-table .cell-user .avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--navy-700);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}
.data-table .cell-user .name {
    display: block;
    font-weight: var(--fw-medium);
    color: var(--gray-900);
    line-height: 1.3;
}
.data-table .cell-user .email {
    display: block;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    margin-top: 2px;
}

.data-table .cell-actions {
    text-align: right;
    white-space: nowrap;
}
.data-table .cell-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--gray-700);
}

/* Table skeleton loading */
.skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--gray-100), var(--gray-50), var(--gray-100));
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1400ms ease-in-out infinite;
    min-height: 12px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ============================================================
   8. FILTERS BAR
   ============================================================ */

.filters-bar {
    background: var(--ivory-100);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.filters-bar .filter-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
.filters-bar .filter-field-inline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.filters-bar .filter-spacer { flex: 1; }
.filters-bar .reset-link {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--bronze-600);
    background: transparent;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    padding: var(--space-1) var(--space-2);
}
.filters-bar .reset-link:hover { color: var(--bronze-700); text-decoration: underline; }
.filters-bar .reset-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ============================================================
   9. PAGINATION
   ============================================================ */

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-4);
    font-size: var(--fs-sm);
    color: var(--gray-700);
}
.pagination .info { color: var(--gray-700); }
.pagination .nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.pagination .page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--gray-800);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pagination .page-btn:hover { background: var(--navy-50); color: var(--navy-900); }
.pagination .page-btn.is-current {
    background: var(--navy-900);
    color: #FFFFFF;
    border-color: var(--navy-900);
    font-weight: var(--fw-semibold);
}
.pagination .page-btn[disabled] { color: var(--gray-400); cursor: not-allowed; background: transparent; }
.pagination .page-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.pagination .goto {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-xs);
    color: var(--gray-600);
}
.pagination .goto input {
    width: 60px;
    height: 30px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    text-align: center;
}

/* ============================================================
   10. EMPTY STATE
   ============================================================ */

.empty-state {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    color: var(--gray-700);
}
.empty-state .icon-xl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: var(--radius-full);
    background: var(--ivory-100);
    color: var(--gray-400);
    margin-bottom: var(--space-4);
}
.empty-state h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin: 0 0 var(--space-2);
}
.empty-state p {
    margin: 0 0 var(--space-6);
    color: var(--gray-600);
    font-size: var(--fs-sm);
}

/* ============================================================
   11. MODAL (accessible, focus-trap via JS)
   ============================================================ */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 68, 0.55);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    z-index: var(--z-modal);
    animation: fade-in var(--dur-base) var(--ease-out);
}
.modal-backdrop[hidden] { display: none; }

.modal {
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-8);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    animation: modal-pop var(--dur-base) var(--ease-out);
    position: relative;
}
.modal-md { max-width: 720px; }
.modal-lg { max-width: 960px; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.modal-header h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    color: var(--navy-900);
    margin: 0;
    line-height: var(--lh-snug);
}
.modal-header .eyebrow { margin-bottom: var(--space-1); }
.modal-close {
    flex-shrink: 0;
    width: 36px; height: 36px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.modal-close:hover { background: var(--navy-50); color: var(--navy-900); }
.modal-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--gray-100);
    margin-top: var(--space-6);
}

/* ============================================================
   12. TOASTS / FLASH
   ============================================================ */

.toasts {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: var(--z-toast);
    max-width: 400px;
    width: calc(100% - var(--space-8));
}
.toast {
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-left: 4px solid var(--navy-600);
    animation: toast-in var(--dur-base) var(--ease-out);
}
.toast.is-success { border-left-color: var(--success-500); }
.toast.is-warning { border-left-color: var(--warning-500); }
.toast.is-danger  { border-left-color: var(--danger-500); }
.toast.is-info    { border-left-color: var(--navy-600); }
.toast .toast-icon {
    flex-shrink: 0;
    width: 20px; height: 20px;
}
.toast.is-success .toast-icon { color: var(--success-500); }
.toast.is-warning .toast-icon { color: var(--warning-500); }
.toast.is-danger  .toast-icon { color: var(--danger-500); }
.toast.is-info    .toast-icon { color: var(--navy-600); }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin: 0 0 2px;
}
.toast .toast-msg {
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin: 0;
    line-height: var(--lh-normal);
}
.toast .toast-close {
    flex-shrink: 0;
    width: 28px; height: 28px;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.toast .toast-close:hover { color: var(--navy-800); background: var(--navy-50); }
.toast .toast-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   13. SECTIONS EDIT INLINE (edit user page)
   ============================================================ */

.section-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.kv-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: var(--fs-sm);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row .kv-label {
    color: var(--gray-600);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    padding-top: 2px;
}
.kv-row .kv-value { color: var(--gray-900); }
.kv-row .kv-value.is-mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gray-700); }
@media (max-width: 640px) {
    .kv-row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* User header (profil edit) */
.profile-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) 0 var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}
.profile-header .avatar-lg {
    width: 64px; height: 64px;
    border-radius: var(--radius-full);
    background: var(--navy-700);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}
.profile-header .profile-info h1 {
    margin: 0 0 var(--space-1);
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    color: var(--navy-900);
}
.profile-header .profile-info .email { color: var(--gray-600); font-size: var(--fs-sm); margin: 0 0 var(--space-2); word-break: break-all; }
.profile-header .profile-info .badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.profile-header .profile-meta {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--gray-600);
}

/* ============================================================
   14. PERMISSIONS MATRIX (roles)
   ============================================================ */

.permission-domain {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    overflow: hidden;
}
.permission-domain-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--ivory-100);
    border: 0;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out);
}
.permission-domain-header:hover { background: var(--ivory-200); }
.permission-domain-header:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.permission-domain-header .count {
    color: var(--gray-600);
    font-weight: var(--fw-regular);
    margin-left: var(--space-2);
}
.permission-domain-header .chev {
    margin-left: auto;
    color: var(--bronze-600);
    transition: transform var(--dur-fast) var(--ease-out);
}
.permission-domain[data-open="true"] .permission-domain-header .chev { transform: rotate(90deg); }
.permission-domain-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: #FFFFFF;
    display: none;
}
.permission-domain[data-open="true"] .permission-domain-body { display: flex; flex-direction: column; gap: var(--space-2); }

/* ============================================================
   15. TABS
   ============================================================ */

.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-6);
}
.tabs .tab {
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--gray-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tabs .tab:hover { color: var(--navy-900); }
.tabs .tab.is-active {
    color: var(--navy-900);
    border-bottom-color: var(--bronze-500);
    font-weight: var(--fw-semibold);
}
.tabs .tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ============================================================
   16. STATUS DOT / DIFF
   ============================================================ */

.dot-status {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: var(--radius-full);
    margin-right: var(--space-1);
}
.dot-status.is-success { background: var(--success-500); }
.dot-status.is-warning { background: var(--warning-500); }
.dot-status.is-danger  { background: var(--danger-500); }
.dot-status.is-muted   { background: var(--gray-400); }

.diff-block {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    background: var(--gray-50);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--gray-900);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid var(--gray-100);
}
.diff-block .removed { color: var(--danger-700); }
.diff-block .added   { color: var(--success-700); }

/* ============================================================
   17. HOME / LANDING (sprint 0 compat)
   ============================================================ */

/* Les vieilles classes de home.php restent supportées pour transition sprint 0 -> sprint 1.
   Elles seront remplacées progressivement. */
.site-header,
.site-main,
.site-footer { background: #FFFFFF; }
.site-header { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; box-shadow: var(--shadow-xs); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header .brand { color: var(--navy-900); text-decoration: none; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.site-header .brand-dig { color: var(--bronze-600); font-weight: var(--fw-semibold); }
.site-main { padding: var(--space-8) 0; min-height: calc(100vh - 200px); }
.env-badge {
    font-size: 11px;
    text-transform: uppercase;
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--ivory-100);
    color: var(--gray-700);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
}
.env-badge.env-local { background: var(--warning-100); color: var(--warning-700); }
.env-badge.env-production { background: var(--success-100); color: var(--success-700); }

.hero {
    background: #FFFFFF;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid var(--navy-900);
}
.hero h1 { margin: 0 0 var(--space-2); font-size: var(--fs-2xl); color: var(--navy-900); font-family: var(--font-serif); }
.hero-sub { margin: 0 0 var(--space-1); font-size: var(--fs-base); color: var(--gray-700); }
.hero-version { margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--gray-600); }

.status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.status-card {
    background: #FFFFFF;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--color-border);
}
.status-card.status-ok { border-top-color: var(--success-500); }
.status-card h3 { margin: 0 0 var(--space-3); font-size: var(--fs-base); color: var(--navy-900); font-family: var(--font-sans); }
.status-card p { margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
.status-card ul { margin: var(--space-2) 0; padding-left: var(--space-4); font-size: var(--fs-sm); }
.status-card li { margin-bottom: var(--space-1); }
.status-card a { color: var(--navy-700); }

.team-panel {
    background: #FFFFFF;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.team-panel h2 { margin: 0 0 var(--space-4); font-size: var(--fs-md); color: var(--navy-900); font-family: var(--font-sans); }
.team-panel ul { list-style: none; padding: 0; margin: 0; }
.team-panel li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.team-panel li:last-child { border-bottom: 0; }

.site-footer { border-top: 1px solid var(--color-border); padding: var(--space-6) 0; text-align: center; font-size: var(--fs-xs); color: var(--gray-600); }
.site-footer p { margin: var(--space-1) 0; }

/* Error pages */
.error-page { text-align: center; padding: var(--space-16) 0; }
.error-page h1 { font-size: 72px; margin: 0; color: var(--navy-900); font-family: var(--font-serif); }

/* ============================================================
   18. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   19. MODULE 2 - LAYOUT PUBLIC
   (pages /mentions-legales, /confidentialite, /cgu, /cookies-preferences)
   Auteur : Thomas Girard, sprint 2F (2026-04-22)
   ============================================================ */

.public-body {
    background: var(--ivory-50);
}

.public-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.public-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    box-shadow: var(--shadow-xs);
}
.public-header .public-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.public-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--navy-900);
    font-family: var(--font-sans);
}
.public-brand .brand-mark {
    width: 36px; height: 36px;
    border-radius: var(--radius-md);
    background: var(--navy-900);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-serif);
    font-weight: var(--fw-bold);
    font-size: 18px;
}
.public-brand .brand-text { line-height: 1.15; }
.public-brand .brand-name {
    display: block;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-md);
}
.public-brand .brand-sub {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--bronze-600);
    margin-top: 2px;
}

.public-nav {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.public-nav-link {
    color: var(--navy-700);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.public-nav-link:hover { background: var(--navy-50); color: var(--navy-900); }
.public-nav-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.public-main {
    min-height: calc(100vh - 200px);
    padding: var(--space-12) 0 var(--space-16);
}
.public-main:focus { outline: none; }

.public-content {
    max-width: 880px;
}

.public-footer {
    background: #FFFFFF;
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) 0 var(--space-6);
    margin-top: var(--space-16);
}
.public-footer .public-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}
.public-footer-copy {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--gray-600);
}
.public-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--fs-sm);
}
.public-footer-nav a {
    color: var(--navy-700);
    text-decoration: none;
    font-weight: var(--fw-medium);
}
.public-footer-nav a:hover { color: var(--bronze-600); text-decoration: underline; text-underline-offset: 2px; }
.public-footer-nav a:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* Article legal (rendu depuis LegalRenderer) */
.legal-article h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    color: var(--navy-900);
    margin: 0 0 var(--space-8);
    line-height: var(--lh-tight);
}
.legal-content {
    font-size: var(--fs-base);
    color: var(--gray-900);
    line-height: var(--lh-normal);
}
.legal-content h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    margin: var(--space-12) 0 var(--space-4);
    color: var(--navy-900);
}
.legal-content h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    margin: var(--space-8) 0 var(--space-3);
    color: var(--navy-900);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--gray-200);
}
.legal-content h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    margin: var(--space-6) 0 var(--space-2);
    color: var(--navy-900);
}
.legal-content h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    margin: var(--space-4) 0 var(--space-2);
    color: var(--navy-900);
}
.legal-content p { margin: 0 0 var(--space-4); line-height: var(--lh-relaxed); }
.legal-content ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal-content li { margin-bottom: var(--space-1); }
.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-4) 0;
    font-size: var(--fs-sm);
}
.legal-content th {
    background: var(--ivory-100);
    text-align: left;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--gray-300);
    font-weight: var(--fw-semibold);
    color: var(--gray-700);
}
.legal-content td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: top;
}
.legal-content code {
    background: var(--gray-100);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--navy-900);
}
.legal-content hr {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: var(--space-8) 0;
}
.legal-content a {
    color: var(--navy-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--bronze-600); }

@media (max-width: 640px) {
    .public-header .public-container { flex-wrap: wrap; }
    .public-footer .public-container { flex-direction: column; align-items: flex-start; }
    .public-main { padding: var(--space-8) 0; }
    .legal-article h1 { font-size: var(--fs-2xl); }
    .legal-content h1 { font-size: var(--fs-xl); }
}

/* ============================================================
   20. MODULE 2 - PAGE MES DONNEES (user RGPD self-service)
   ============================================================ */

.mes-donnees-lede {
    max-width: 760px;
    font-size: var(--fs-base);
    color: var(--gray-700);
    line-height: var(--lh-normal);
}

.mes-donnees-section {
    margin-top: var(--space-12);
}
.mes-donnees-h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    color: var(--navy-900);
    margin: 0 0 var(--space-6);
    line-height: var(--lh-tight);
}

/* Action cards (export art.15, portabilite art.20, suppression art.17) */
.action-card {
    padding: var(--space-6);
}
.action-card + .action-card { margin-top: var(--space-4); }

.action-card-body {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-6);
    align-items: start;
}
.action-card-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-lg);
    background: var(--bronze-100);
    color: var(--bronze-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-card-icon-danger {
    background: var(--danger-100);
    color: var(--danger-700);
}
.action-card-text h4 {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
}
.action-card-text p {
    color: var(--gray-700);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-2);
}
.action-card-text .action-legal {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-semibold);
    margin-top: var(--space-2);
}
.action-card-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
}
.action-card-form textarea {
    min-width: 240px;
}

.action-card-danger {
    border-left: 3px solid var(--danger-500);
    background: #FCF5F5;
}
.action-card-danger h4 { color: var(--danger-700); }

.action-link {
    color: var(--navy-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
.action-link:hover { color: var(--bronze-600); }

@media (max-width: 768px) {
    .action-card-body { grid-template-columns: 1fr; text-align: left; }
    .action-card-form { margin-top: var(--space-2); }
    .action-card-form textarea { min-width: 0; }
}

/* ============================================================
   21. MODULE 2 - ADMIN RGPD (demandes, config DPO, retention, breach)
   ============================================================ */

.rgpd-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-4);
}
.rgpd-detail-card { min-height: 280px; }

.rgpd-workflow-intro {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
}

.rgpd-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.rgpd-action-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.rgpd-action-block label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--gray-700);
}
.rgpd-action-block .req { color: var(--danger-500); }

@media (max-width: 1023px) {
    .rgpd-detail-grid,
    .rgpd-actions-grid { grid-template-columns: 1fr; }
}

.rgpd-config-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-6);
    margin-top: var(--space-4);
}
.rgpd-config-card { padding: var(--space-6); }
.rgpd-config-aside { padding: var(--space-6); background: var(--ivory-100); }

.rgpd-help-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--gray-700);
}
.rgpd-help-list li {
    padding-left: var(--space-4);
    position: relative;
}
.rgpd-help-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 6px; height: 6px;
    border-radius: var(--radius-full);
    background: var(--bronze-500);
}

@media (max-width: 1023px) {
    .rgpd-config-grid { grid-template-columns: 1fr; }
}

.rgpd-retention-form { padding: 0 var(--space-6) var(--space-6); }
.rgpd-retention-row { align-items: end; }
.rgpd-retention-inline {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    margin: 0;
}

/* Breach workflow */
.breach-banner {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-6);
    background: var(--warning-100);
    border-left: 3px solid var(--warning-500);
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-8);
}
.breach-banner p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--gray-900);
}

.breach-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.breach-step {
    padding: 0;
}
.breach-step-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    list-style: none;
    background: var(--ivory-100);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transition: background var(--dur-fast) var(--ease-out);
}
.breach-step[open] .breach-step-summary { background: var(--navy-50); }
.breach-step-summary::-webkit-details-marker { display: none; }
.breach-step-summary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.breach-step-num {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--navy-900);
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    flex-shrink: 0;
}
.breach-step-title {
    flex: 1;
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    font-size: var(--fs-base);
}

.breach-form {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ============================================================
   22. MODULE 2 - DASHBOARD AUDIT + FORENSIC
   ============================================================ */

.audit-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
}
.audit-kpi {
    padding: var(--space-4);
    text-align: left;
}
.audit-kpi-value {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: var(--space-2) 0 var(--space-1);
    line-height: var(--lh-tight);
}
.audit-kpi-small {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--gray-700);
}
.audit-kpi-warning { color: var(--warning-700); }
.audit-kpi-danger  { color: var(--danger-700); }

@media (max-width: 1023px) {
    .audit-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .audit-kpi-grid { grid-template-columns: 1fr; }
}

.audit-charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.audit-chart { padding: var(--space-6); }
.audit-chart-wide { grid-column: 1 / -1; }
.audit-chart-canvas {
    position: relative;
    width: 100%;
    min-height: 260px;
    max-height: 360px;
}
.audit-chart-canvas canvas { width: 100% !important; height: 100% !important; }

@media (max-width: 1023px) {
    .audit-charts-grid { grid-template-columns: 1fr; }
}

.audit-alert-form { padding: var(--space-6); }

/* ============================================================
   23. MODULE 2 - COOKIE BANNER + MODAL PREFERENCES
   ============================================================ */

.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-modal);
    background: #FFFFFF;
    border-top: 2px solid var(--navy-900);
    box-shadow: 0 -4px 24px rgba(10, 31, 68, 0.12);
    animation: cookie-slide-up var(--dur-slow) var(--ease-out);
}
.cookie-banner[hidden] { display: none; }

@keyframes cookie-slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

.cookie-banner-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-8);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-8);
    align-items: center;
}
.cookie-banner-content {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
}
.cookie-banner-icon {
    color: var(--bronze-500);
    width: 24px; height: 24px;
    flex-shrink: 0;
}
.cookie-banner-title {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0 0 var(--space-1);
}
.cookie-banner-desc {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-sm);
    color: var(--gray-700);
    max-width: 720px;
    line-height: var(--lh-normal);
}
.cookie-banner-learn {
    font-size: var(--fs-sm);
    color: var(--bronze-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cookie-banner-learn:hover { color: var(--bronze-700); }

.cookie-banner-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 200px;
}
.cookie-btn { width: 100%; justify-content: center; }
.cookie-btn-link {
    color: var(--bronze-600);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-underline-offset: 2px;
    height: auto;
    padding: var(--space-2) var(--space-3);
}
.cookie-btn-link:hover { color: var(--bronze-700); background: transparent; }

@media (max-width: 768px) {
    .cookie-banner-inner {
        grid-template-columns: 1fr;
        padding: var(--space-4);
        gap: var(--space-4);
    }
    .cookie-banner-actions { min-width: 0; }
}

/* Modal cookies granulaires */
.cookie-prefs-modal[data-open="false"][hidden] { display: none; }
.cookie-prefs-modal[data-open="true"] { display: flex; }

.cookie-prefs-intro {
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin: 0 0 var(--space-6);
}

.cookie-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 52vh;
    overflow-y: auto;
    padding-right: var(--space-2);
}

.cookie-category {
    background: var(--ivory-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.cookie-category-locked {
    background: var(--navy-50);
    border-color: var(--navy-100);
}
.cookie-category-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
.cookie-category-heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.cookie-category-icon {
    color: var(--bronze-500);
    width: 20px; height: 20px;
    flex-shrink: 0;
}
.cookie-category h4 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
}
.cookie-category-desc {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--gray-700);
    line-height: var(--lh-normal);
}

.cookie-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.cookie-toggle-badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}

.cookie-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--gray-300);
    border: 0;
    border-radius: var(--radius-full);
    cursor: pointer;
    padding: 0;
    transition: background var(--dur-base) var(--ease-out);
    flex-shrink: 0;
}
.cookie-toggle-knob {
    position: absolute;
    top: 2px; left: 2px;
    width: 20px; height: 20px;
    border-radius: var(--radius-full);
    background: #FFFFFF;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-out);
}
.cookie-toggle.is-on { background: var(--navy-700); }
.cookie-toggle.is-on .cookie-toggle-knob { transform: translateX(20px); }
.cookie-toggle.is-locked {
    cursor: not-allowed;
    opacity: 0.65;
}
.cookie-toggle:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.cookie-prefs-footer {
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .cookie-prefs-footer { flex-direction: column-reverse; align-items: stretch; }
    .cookie-prefs-footer .btn { width: 100%; }
}

/* ============================================================
   24. MODULE 3 MATTERS - badges matiere / statut / confidentialite
   Sprint 3F - Thomas Girard, Frontend dig-holding - 2026-04-22
   ============================================================ */

.badge-matter-ma         { background: var(--matter-matiere-ma-bg,          #F5EEDF); color: var(--matter-matiere-ma-fg,          #8F6E3F); }
.badge-matter-contentieux{ background: var(--matter-matiere-contentieux-bg, #DCE4F0); color: var(--matter-matiere-contentieux-fg, #122C5C); }
.badge-matter-corporate  { background: var(--matter-matiere-corporate-bg,   #EEF2F8); color: var(--matter-matiere-corporate-fg,   #2A4D7A); }
.badge-matter-ip         { background: var(--matter-matiere-ip-bg,          #FBF4E4); color: var(--matter-matiere-ip-fg,          #8F6E3F); }
.badge-matter-social     { background: var(--matter-matiere-social-bg,      #EEF0F4); color: var(--matter-matiere-social-fg,      #4A5060); }
.badge-matter-fiscal     { background: var(--matter-matiere-fiscal-bg,      #EEF2F8); color: var(--matter-matiere-fiscal-fg,      #0A1F44); }
.badge-matter-immobilier { background: var(--matter-matiere-immobilier-bg,  #F5EEDF); color: var(--matter-matiere-immobilier-fg,  #A17F4B); }
.badge-matter-penal      { background: var(--matter-matiere-penal-bg,       #F5D9D9); color: var(--matter-matiere-penal-fg,       #812525); }
.badge-matter-autre      { background: var(--gray-100);                      color: var(--gray-700); }

/* ============================================================
   25. MATTER HEADER / TABS / SECTIONS (fiche dossier)
   ============================================================ */

.back-link {
    margin-bottom: var(--space-4);
}
.back-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--gray-700);
    text-decoration: none;
}
.back-link a:hover { color: var(--navy-800); }

.matter-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-6);
}
.matter-title {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin: 0;
}
.matter-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.matter-meta {
    margin-top: var(--space-2);
}

.matter-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}
.matter-tab {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-700);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
    white-space: nowrap;
}
.matter-tab:hover { color: var(--navy-800); }
.matter-tab.is-active {
    color: var(--navy-900);
    border-bottom-color: var(--navy-900);
}

.matter-section {
    margin-bottom: var(--space-6);
}
.matter-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    gap: var(--space-3);
}
.matter-section-head h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0;
}
.matter-section-form {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.matter-section-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.matter-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3) var(--space-6);
}
.matter-dl > div { display: flex; flex-direction: column; gap: var(--space-1); }
.matter-dl-wide { grid-column: 1 / -1; }
.matter-dl dt {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    margin: 0;
}
.matter-dl dd {
    font-size: var(--fs-sm);
    color: var(--gray-900);
    margin: 0;
}
.matter-mono { font-family: var(--font-mono); font-size: var(--fs-sm); }

.matter-ref-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
}
.matter-ref {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--navy-700);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
}
.matter-name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-900);
    line-height: var(--lh-snug);
}
.matter-ref-link:hover .matter-name { color: var(--navy-800); }

.matter-team-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.matter-team-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--gray-100);
}
.matter-team-item:last-child { border-bottom: 0; }
.matter-team-name { flex: 1; font-weight: var(--fw-medium); color: var(--gray-900); }

.matter-deadlines-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.matter-deadline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
}
.matter-deadline-item.is-urgent {
    background: var(--warning-100);
    border-left: 3px solid var(--warning-500);
}

.matter-fees-totals {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.matter-fees-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--ivory-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--ivory-200);
}
.matter-fees-stat .stat-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--gray-600);
    font-weight: var(--fw-semibold);
}
.matter-fees-stat .stat-value {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
}

.matter-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
}
.matter-timeline-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-left: 2px solid var(--gray-200);
    padding-left: var(--space-4);
    position: relative;
}
.timeline-dot {
    position: absolute;
    left: -6px;
    top: var(--space-3);
    width: 10px;
    height: 10px;
    background: var(--navy-700);
    border-radius: var(--radius-full);
    border: 2px solid var(--ivory-50);
}
.timeline-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}
.timeline-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.timeline-label { font-weight: var(--fw-medium); color: var(--gray-900); }
.timeline-meta-details { margin-top: var(--space-2); }
.timeline-meta-details summary { cursor: pointer; color: var(--gray-700); }
.timeline-meta-details pre {
    background: var(--gray-50);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    overflow: auto;
    font-size: var(--fs-xs);
}

.card-danger {
    border: 1px solid var(--danger-100);
    background: #FEF7F7;
}

/* ============================================================
   26. WIZARD MATTERS CREATE - stepper + radio cards
   ============================================================ */

.wizard-stepper {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--ivory-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-6);
    overflow-x: auto;
}
.wizard-step,
a.wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--gray-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    flex: 1;
    min-width: 140px;
    transition: background var(--dur-base) var(--ease-out);
}
a.wizard-step:hover { background: var(--navy-100); color: var(--navy-900); }
.wizard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--gray-200);
    color: var(--gray-700);
    font-weight: var(--fw-semibold);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}
.wizard-step.is-current {
    background: var(--navy-900);
    color: #FFFFFF;
}
.wizard-step.is-current .wizard-step-num {
    background: var(--bronze-500);
    color: #FFFFFF;
}
.wizard-step.is-done .wizard-step-num {
    background: var(--success-500);
    color: #FFFFFF;
}
.wizard-step-label { flex: 1; }

.wizard-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.wizard-form h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-xl);
    color: var(--navy-900);
    margin: 0;
}
.wizard-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}
.wizard-recap {
    padding: var(--space-4);
    background: var(--ivory-50);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
}
.wizard-recap h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-md);
    margin: 0 0 var(--space-3) 0;
    color: var(--navy-900);
}

.radio-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
    margin-bottom: var(--space-2);
}
.radio-card:hover { border-color: var(--navy-600); background: var(--navy-50); }
.radio-card input[type="radio"] { margin-top: 2px; }
.radio-card input[type="radio"]:checked ~ .radio-card-body strong { color: var(--navy-900); }
.radio-card:has(input[type="radio"]:checked) {
    border-color: var(--navy-900);
    background: var(--navy-50);
}
.radio-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}
.radio-card-body strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
}
.radio-card-body span.text-muted {
    font-size: var(--fs-xs);
    color: var(--gray-600);
}

.checkbox-field {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
    cursor: pointer;
}
.checkbox-field input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.checkbox-field span { font-size: var(--fs-sm); color: var(--gray-800); line-height: var(--lh-normal); }

/* ============================================================
   27. CONFLICT WARNING (partial conflict_warning.php)
   ============================================================ */

.conflict-warning {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    margin: var(--space-4) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.conflict-warning-danger {
    background: var(--danger-100);
    border: 1px solid var(--danger-500);
    border-left: 4px solid var(--danger-500);
    color: var(--danger-700);
}
.conflict-warning-success {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    background: var(--success-100);
    border: 1px solid var(--success-500);
    border-left: 4px solid var(--success-500);
    color: var(--success-700);
}
.conflict-warning-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.conflict-warning-icon { flex-shrink: 0; }
.conflict-warning-title strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    display: block;
}
.conflict-warning-sub {
    font-size: var(--fs-xs);
    color: var(--danger-700);
    opacity: 0.85;
}
.conflict-warning-reason {
    font-size: var(--fs-sm);
    color: var(--danger-700);
    margin: 0;
}
.conflict-warning-intro {
    font-size: var(--fs-sm);
    color: var(--danger-700);
    margin: 0;
}
.conflict-warning-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.conflict-warning-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    background: #FFFFFF;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
}
.conflict-warning-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.conflict-warning-ref {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--navy-700);
    font-weight: var(--fw-semibold);
}
.conflict-warning-name {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
}
.conflict-warning-meta {
    font-size: var(--fs-xs);
    color: var(--gray-700);
}
.conflict-warning-legal {
    font-size: var(--fs-xs);
    color: var(--danger-700);
    font-style: italic;
    margin: 0;
    padding-top: var(--space-2);
    border-top: 1px solid var(--danger-500);
}
.conflict-warning-check-info {
    font-size: var(--fs-xs);
    color: inherit;
    opacity: 0.75;
    margin: 0;
}
.conflict-warning-ok-text { margin: 0; font-size: var(--fs-sm); }

/* ============================================================
   28. KPI DASHBOARD DPO (admin/rgpd/kpi)
   ============================================================ */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.kpi-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    background: var(--ivory-50);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-md);
}
.kpi-card-warning {
    background: var(--warning-100);
    border-color: var(--warning-500);
}
.kpi-card-danger {
    background: var(--danger-100);
    border-color: var(--danger-500);
}
.kpi-card .kpi-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--gray-600);
    font-weight: var(--fw-semibold);
}
.kpi-card .kpi-value {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    line-height: 1;
}
.kpi-card .kpi-unit {
    font-size: var(--fs-md);
    color: var(--gray-700);
    margin-left: 2px;
}
.kpi-card .kpi-hint {
    font-size: var(--fs-xs);
    color: var(--gray-600);
}

.kpi-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    padding: var(--space-2);
}
.kpi-chart-block { display: flex; flex-direction: column; gap: var(--space-2); min-height: 220px; }
.kpi-chart-block canvas { max-width: 100%; height: 220px !important; }

/* ============================================================
   29. TABLE MATTERS / FILTERS / PAGINATION
   ============================================================ */

.table-matters { width: 100%; }
.table-matters th,
.table-matters td { font-size: var(--fs-sm); vertical-align: middle; }

.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-3) 0;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.pagination-info { margin: 0; color: var(--gray-700); font-size: var(--fs-sm); }
.pagination-actions { display: flex; gap: var(--space-2); }

.filter-actions {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.row-danger { background: var(--danger-100); }
.text-right { text-align: right; }
.text-mono { font-family: var(--font-mono); }
.text-xs { font-size: var(--fs-xs); }

/* Responsive Module 3 */
@media (max-width: 768px) {
    .matter-dl { grid-template-columns: 1fr; }
    .wizard-stepper { flex-direction: column; }
    .wizard-step { min-width: 100%; }
    .matter-fees-totals { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: 1fr; }
    .table-matters thead { display: none; }
    .table-matters,
    .table-matters tbody,
    .table-matters tr,
    .table-matters td { display: block; width: 100%; }
    .table-matters tr { border: 1px solid var(--gray-200); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-3); }
    .table-matters td { border: 0; padding: var(--space-1) 0; }
}

/* ============================================================
   30. MODULE 4 DMS + eIDAS (Sprint 4F Thomas Girard)
   Table documents, upload dropzone, timeline versions, signatures badges,
   preview document, formulaire de signature DSS.
   ============================================================ */

/* ---------- Table documents (user + admin) ---------- */
.table-documents { width: 100%; }
.table-documents th,
.table-documents td { font-size: var(--fs-sm); vertical-align: middle; }
.table-documents td { padding: var(--space-3) var(--space-2); }

.document-ref-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: inherit;
    max-width: 100%;
}
.document-ref-link:hover { color: var(--navy-900); }
.document-ref-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.document-icon {
    display: inline-block;
    width: 32px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--ivory-50);
    position: relative;
}
.document-icon::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 10px; height: 10px;
    background: linear-gradient(135deg, transparent 50%, var(--gray-300) 50%);
}
.document-icon::after {
    content: attr(data-label);
    position: absolute;
    bottom: 4px;
    left: 2px; right: 2px;
    font-size: 9px;
    font-weight: var(--fw-semibold);
    text-align: center;
    letter-spacing: 0.04em;
    color: var(--gray-700);
    text-transform: uppercase;
}
.document-icon-pdf { border-color: var(--danger-500); }
.document-icon-pdf::after { content: 'PDF'; color: var(--danger-500); }
.document-icon-doc { border-color: var(--navy-700); }
.document-icon-doc::after { content: 'DOC'; color: var(--navy-700); }
.document-icon-xls { border-color: var(--success-500); }
.document-icon-xls::after { content: 'XLS'; color: var(--success-500); }
.document-icon-img::after { content: 'IMG'; color: var(--navy-600); }
.document-icon-txt::after { content: 'TXT'; color: var(--gray-700); }
.document-icon-file::after { content: 'FILE'; color: var(--gray-600); }

.document-meta-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.document-name {
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 560px;
}
.document-desc {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 560px;
}

/* ---------- Upload dropzone ---------- */
.upload-form {
    max-width: 760px;
    padding: var(--space-6);
}

.upload-dropzone {
    position: relative;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    background: var(--ivory-50);
    transition: border-color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}
.upload-dropzone:hover {
    border-color: var(--navy-600);
    background: var(--navy-50);
}
.upload-dropzone:focus-visible {
    outline: none;
    border-color: var(--navy-700);
    box-shadow: var(--shadow-focus);
}
.upload-dropzone.is-dragover {
    border-color: var(--navy-900);
    background: var(--navy-100);
}
.upload-dropzone-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.upload-dropzone-body svg {
    color: var(--gray-500);
    margin-bottom: var(--space-3);
}
.upload-dropzone.is-dragover .upload-dropzone-body svg { color: var(--navy-900); }

.upload-dropzone-title {
    font-size: var(--fs-base);
    color: var(--gray-900);
    margin: 0 0 var(--space-1);
}
.upload-dropzone-btn {
    background: transparent;
    border: 0;
    color: var(--navy-700);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-size: inherit;
}
.upload-dropzone-btn:hover { color: var(--navy-900); }
.upload-dropzone-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.upload-dropzone-hint { margin: 0; }

.upload-dropzone-preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: center;
    padding: var(--space-4);
    background: var(--navy-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--navy-100);
}
.upload-dropzone-preview:not([hidden]) ~ .upload-dropzone-body { display: none; }
.upload-dropzone-preview-icon {
    display: inline-block;
    width: 32px;
    height: 40px;
    background: white;
    border: 1px solid var(--navy-600);
    border-radius: var(--radius-sm);
}
.upload-dropzone-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
}

.upload-progress {
    margin-top: var(--space-3);
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    height: 8px;
    overflow: hidden;
    position: relative;
}
.upload-progress-bar {
    background: var(--navy-900);
    height: 100%;
    width: 0%;
    transition: width 0.2s ease;
    border-radius: var(--radius-sm);
}
.upload-progress-text {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--gray-700);
    font-weight: var(--fw-semibold);
}

/* ---------- Document show : versions timeline ---------- */
.document-versions-timeline {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-4);
    position: relative;
}
.document-versions-timeline::before {
    content: '';
    position: absolute;
    top: 12px; bottom: 12px; left: 15px;
    width: 2px;
    background: var(--gray-200);
}
.document-version-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    position: relative;
}
.document-version-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ivory-50);
    border: 2px solid var(--navy-600);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy-900);
    z-index: 1;
}
.document-version-icon-upload {
    background: var(--navy-900);
    color: white;
    border-color: var(--navy-900);
}
.document-version-body {
    flex: 1;
    min-width: 0;
}
.document-version-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}
.document-version-note {
    margin: var(--space-1) 0;
    color: var(--gray-800);
    font-size: var(--fs-sm);
}
.document-version-meta {
    margin: var(--space-1) 0;
}
.document-version-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* ---------- Document show : new version details ---------- */
.doc-new-version-wrap {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-200);
}
.doc-new-version-summary {
    cursor: pointer;
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    padding: var(--space-2) 0;
    list-style: none;
}
.doc-new-version-summary::-webkit-details-marker { display: none; }
.doc-new-version-summary::before {
    content: '+';
    display: inline-block;
    width: 18px;
    margin-right: var(--space-2);
    font-weight: var(--fw-bold);
    color: var(--navy-700);
}
details[open] > .doc-new-version-summary::before { content: '-'; }

/* ---------- Signature status badge ---------- */
.signature-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border: 1px solid transparent;
}
.signature-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}
.signature-status-pending {
    background: var(--gray-100);
    color: var(--gray-700);
    border-color: var(--gray-300);
}
.signature-status-valid {
    background: #E8F4EE;
    color: var(--success-500);
    border-color: var(--success-500);
}
.signature-status-invalid {
    background: var(--danger-100, #FBE9E9);
    color: var(--danger-500);
    border-color: var(--danger-500);
}
.signature-status-expired {
    background: #FDF4E1;
    color: var(--warning-500);
    border-color: var(--warning-500);
}
.signature-status-revoked {
    background: var(--danger-100, #FBE9E9);
    color: #7A1F1F;
    border-color: #7A1F1F;
}

/* ---------- Signature level badge (SES / AES / QES) ---------- */
.signature-level-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border: 1px solid transparent;
}
.signature-level-badge-ses,
.signature-level-badge-bronze {
    background: var(--bronze-100);
    color: var(--bronze-700);
    border-color: var(--bronze-500);
}
.signature-level-badge-aes,
.signature-level-badge-navy {
    background: var(--navy-100);
    color: var(--navy-900);
    border-color: var(--navy-600);
}
.signature-level-badge-qes,
.signature-level-badge-navy-900 {
    background: var(--navy-900);
    color: var(--bronze-400);
    border-color: var(--navy-900);
}

/* ---------- Signature list (fiche document user) ---------- */
.signature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.signature-item {
    padding: var(--space-3);
    background: var(--ivory-50);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-md);
}
.signature-item-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}
.signature-item-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* ---------- Sign form : workflow DSS ---------- */
.sign-form {
    max-width: 760px;
    padding: var(--space-6);
}
.sign-section {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}
.sign-section:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.sign-section h2 {
    font-size: var(--fs-md);
    margin: 0 0 var(--space-3);
    color: var(--navy-900);
}

.sign-level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}
.sign-level-card {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    position: relative;
}
.sign-level-card:hover {
    border-color: var(--navy-600);
    background: var(--navy-50);
}
.sign-level-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.sign-level-card:has(input[type="radio"]:checked) {
    border-color: var(--navy-900);
    background: var(--navy-100);
    box-shadow: inset 0 0 0 1px var(--navy-900);
}
.sign-level-card:focus-within {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.sign-level-badge {
    display: inline-block;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-wide);
    margin-bottom: var(--space-2);
}
.sign-level-badge-bronze {
    background: var(--bronze-100);
    color: var(--bronze-700);
    border: 1px solid var(--bronze-500);
}
.sign-level-badge-navy {
    background: var(--navy-100);
    color: var(--navy-900);
    border: 1px solid var(--navy-600);
}
.sign-level-badge-navy-900 {
    background: var(--navy-900);
    color: var(--bronze-400);
    border: 1px solid var(--navy-900);
}
.sign-level-label {
    display: block;
    font-weight: var(--fw-semibold);
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}
.sign-level-hint {
    display: block;
    line-height: 1.4;
}
.sign-qes-warning { margin-top: var(--space-4); }

/* ---------- Document preview ---------- */
.document-preview {
    background: var(--ivory-50);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    min-height: 320px;
}
.document-preview-iframe {
    width: 100%;
    min-height: 640px;
    border: 0;
    display: block;
}
.document-preview-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.document-preview-text {
    display: block;
    padding: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--gray-900);
    background: var(--ivory-50);
    max-height: 640px;
    overflow: auto;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---------- DSS report JSON pre ---------- */
.dss-report {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    max-height: 480px;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--gray-900);
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ---------- Responsive Module 4 ---------- */
@media (max-width: 768px) {
    .sign-level-grid { grid-template-columns: 1fr; }
    .upload-form,
    .sign-form { padding: var(--space-4); }
    .table-documents thead { display: none; }
    .table-documents,
    .table-documents tbody,
    .table-documents tr,
    .table-documents td { display: block; width: 100%; }
    .table-documents tr {
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-3);
        padding: var(--space-3);
    }
    .table-documents td { border: 0; padding: var(--space-1) 0; }
    .document-name,
    .document-desc { max-width: 100%; white-space: normal; }
    .document-preview-iframe { min-height: 320px; }
}

/* ============================================================
   31. Module 5 Timekeeping - sprint 5F (Thomas Girard)
   ============================================================ */

/* ---------- Category badges ---------- */
.badge-cat-billable {
    background: var(--navy-900);
    color: var(--ivory-50);
    border-color: var(--navy-900);
}
.badge-cat-non-billable {
    background: var(--gray-500);
    color: var(--ivory-50);
    border-color: var(--gray-500);
}
.badge-cat-pro-bono {
    background: var(--bronze-500);
    color: var(--ivory-50);
    border-color: var(--bronze-500);
}

/* ---------- KPI cards timekeeping variantes ---------- */
.timekeeping-kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kpi-card-billable {
    border-left: 4px solid var(--navy-900);
}
.kpi-card-non-billable {
    border-left: 4px solid var(--gray-500);
}
.kpi-card-pro-bono {
    border-left: 4px solid var(--bronze-500);
}

/* ---------- Table time entries ---------- */
.table-time-entries th,
.table-time-entries td {
    vertical-align: middle;
}
.table-time-entries tbody tr:hover {
    background: var(--navy-50);
}
.table-time-entries .text-right {
    text-align: right;
}

/* ---------- Reminder banner (snooze) ---------- */
.reminder-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--bronze-100);
    border: 1px solid var(--bronze-400);
    border-radius: var(--radius-md);
    color: var(--gray-900);
    font-size: var(--fs-sm);
}
.reminder-banner-body {
    flex: 1;
}
.reminder-banner-form {
    flex: 0 0 auto;
    margin: 0;
}

/* ---------- Top matters list ---------- */
.top-matters-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.top-matter-item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
}
.top-matter-rank {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--navy-900);
    color: var(--ivory-50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}
.top-matter-body {
    flex: 1;
    min-width: 0;
}
.top-matter-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--gray-900);
    text-decoration: none;
}
.top-matter-link:hover strong {
    text-decoration: underline;
}
.top-matter-hours {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
}

/* ---------- Week bars (partial timekeeping_week_bars) ---------- */
.week-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
    padding: var(--space-3) 0 var(--space-2) 0;
    min-height: 180px;
}
.week-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-height: 180px;
}
.week-bar-value {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--gray-700);
    margin-bottom: auto;
}
.week-bar-track {
    width: 36px;
    height: 120px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
.week-bar-total {
    width: 100%;
    background: var(--gray-500);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    position: relative;
    transition: height 0.3s ease;
    display: flex;
    align-items: flex-end;
}
.week-bar-billable {
    width: 100%;
    background: var(--navy-900);
    border-radius: 0;
}
.week-bar-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}
.week-bar-day {
    font-weight: var(--fw-semibold);
}
.week-bar-num {
    color: var(--gray-500);
}
.week-bars-legend {
    margin: var(--space-2) 0 0 0;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    display: flex;
    gap: var(--space-4);
    align-items: center;
}
.legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: var(--space-1);
}
.legend-swatch-billable {
    background: var(--navy-900);
}
.legend-swatch-other {
    background: var(--gray-500);
}

/* ---------- Chart block dashboards timekeeping ---------- */
.timekeeping-chart-block {
    padding: var(--space-3) 0;
    min-height: 280px;
    position: relative;
}
.timekeeping-chart-block canvas {
    max-height: 360px;
}

/* ---------- Period picker ---------- */
.period-picker {
    display: inline-block;
    margin-right: var(--space-2);
}
.period-picker select {
    min-width: 160px;
}

/* ---------- Preview panel (generate fees) ---------- */
.preview-panel {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-4) 0;
}
.preview-panel h2 {
    margin: 0 0 var(--space-3) 0;
    font-size: var(--fs-md);
    color: var(--navy-900);
}
.preview-dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin: 0;
}
.preview-dl > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.preview-dl dt {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
}
.preview-dl dd {
    margin: 0;
    font-size: var(--fs-lg);
    color: var(--gray-900);
}

/* ---------- Field row + hints ---------- */
.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
}
.field.has-error .input,
.field.has-error .select {
    border-color: var(--danger-500);
}
.field-hint {
    display: block;
    font-size: var(--fs-xs);
    color: var(--gray-600);
    margin-top: 4px;
}
.field-error {
    display: block;
    font-size: var(--fs-sm);
    color: var(--danger-700);
    margin-top: 4px;
}

/* ---------- Form-banner is-info ---------- */
.form-banner.is-info {
    background: var(--navy-50);
    border-color: var(--navy-100);
    color: var(--navy-900);
}

/* ---------- Responsive Module 5 ---------- */
@media (max-width: 768px) {
    .week-bars {
        grid-template-columns: repeat(7, 1fr);
        gap: var(--space-1);
    }
    .week-bar-track {
        width: 24px;
    }
    .timekeeping-kpi-grid {
        grid-template-columns: 1fr;
    }
    .preview-dl {
        grid-template-columns: 1fr;
    }
    .reminder-banner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   32. DARK MODE - CSS VARIABLES OVERRIDE
   Sprint UI Redesign - Julie Vasseur, Studio Design - 2026-05-15
   Activation : ajouter class="dark" sur <html> ou via prefers-color-scheme
   ============================================================ */

@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --color-bg: #0F1419;
        --color-surface: #1A2030;
        --color-surface-alt: #151B26;
        --color-border: #2A3444;
        --color-border-strong: #3A4858;
        --color-text: #E8ECF1;
        --color-text-muted: #A0AABB;
        --color-text-subtle: #6B7890;
        --color-text-inverse: #0F1419;
        --color-primary: #C9D4E8;
        --color-primary-hover: #DDE4F0;
        --color-primary-active: #A8B8D4;
        --color-primary-fg: #0A1F44;
        --color-accent: #D4B06A;
        --color-accent-hover: #E0C080;
        --color-accent-fg: #0A1F44;
        --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
        --shadow-sm: 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
        --shadow-md: 0 6px 16px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
        --shadow-lg: 0 12px 32px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.25);
    }
}

html.dark {
    --color-bg: #0F1419;
    --color-surface: #1A2030;
    --color-surface-alt: #151B26;
    --color-border: #2A3444;
    --color-border-strong: #3A4858;
    --color-text: #E8ECF1;
    --color-text-muted: #A0AABB;
    --color-text-subtle: #6B7890;
    --color-text-inverse: #0F1419;
    --color-primary: #C9D4E8;
    --color-primary-hover: #DDE4F0;
    --color-primary-active: #A8B8D4;
    --color-primary-fg: #0A1F44;
    --color-accent: #D4B06A;
    --color-accent-hover: #E0C080;
    --color-accent-fg: #0A1F44;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md: 0 6px 16px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.25);
}

html.dark body { background: var(--color-bg); color: var(--color-text); }
html.dark .admin-topbar { background: var(--color-surface); border-color: var(--color-border); }
html.dark .admin-sidebar { background: var(--color-surface); border-color: var(--color-border); }
html.dark .card { background: var(--color-surface); border-color: var(--color-border); }
html.dark .table-container { background: var(--color-surface); border-color: var(--color-border); }
html.dark .data-table thead th { background: var(--color-surface-alt); color: var(--color-text-muted); border-color: var(--color-border); }
html.dark .data-table tbody td { border-color: var(--color-border); color: var(--color-text); }
html.dark .data-table tbody tr:hover { background: rgba(42,77,122,0.15); }
html.dark .modal { background: var(--color-surface); }
html.dark .toast { background: var(--color-surface); }
html.dark .filters-bar { background: var(--color-surface-alt); border-color: var(--color-border); }
html.dark .input, html.dark .field input, html.dark .select, html.dark .field select, html.dark textarea {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}
html.dark .sidebar-item:hover { background: rgba(42,77,122,0.2); }
html.dark .sidebar-item.is-active { background: rgba(42,77,122,0.25); }
html.dark .btn-primary { background: var(--color-primary); color: var(--color-primary-fg); border-color: var(--color-primary); }
html.dark .btn-primary:hover { background: var(--color-primary-hover); }
html.dark .btn-secondary { color: var(--color-text); border-color: var(--color-border-strong); }
html.dark .user-menu-panel { background: var(--color-surface); border-color: var(--color-border); }

/* ============================================================
   33. DASHBOARD HUB - KPI + activite recente + raccourcis
   Sprint UI Redesign - Julie Vasseur / Thomas Dupont - 2026-05-15
   ============================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-kpi-card {
    background: #FFFFFF;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(12,35,64,.06);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.dashboard-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(12,35,64,.1);
    transform: translateY(-2px);
}
.dashboard-kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: #2563eb;
}
.dashboard-kpi-card.kpi-accent::before { background: #2563eb; }
.dashboard-kpi-card.kpi-green::before { background: #16a34a; }
.dashboard-kpi-card.kpi-success::before { background: #0c2340; }
.dashboard-kpi-card.kpi-warning::before { background: #c9a84c; }
.dashboard-kpi-card.kpi-gold::before { background: #c9a84c; }
.dashboard-kpi-card.kpi-danger::before { background: #dc2626; }

.dashboard-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}
.dashboard-kpi-value {
    font-family: var(--font-sans);
    font-size: 28px;
    font-weight: 700;
    color: #0c2340;
    line-height: 1;
}
.dashboard-kpi-change {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.dashboard-kpi-change.is-up { color: var(--success-700); }
.dashboard-kpi-change.is-down { color: var(--danger-700); }
.dashboard-kpi-change.is-neutral { color: var(--gray-600); }

.dashboard-kpi-icon {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37,99,235,.06);
    color: #2563eb;
}
.dashboard-kpi-card.kpi-accent .dashboard-kpi-icon { background: rgba(37,99,235,.06); color: #2563eb; }
.dashboard-kpi-card.kpi-green .dashboard-kpi-icon { background: rgba(22,163,74,.06); color: #16a34a; }
.dashboard-kpi-card.kpi-success .dashboard-kpi-icon { background: rgba(12,35,64,.06); color: #0c2340; }
.dashboard-kpi-card.kpi-warning .dashboard-kpi-icon { background: rgba(201,168,76,.1); color: #92400e; }
.dashboard-kpi-card.kpi-gold .dashboard-kpi-icon { background: rgba(201,168,76,.1); color: #92400e; }
.dashboard-kpi-card.kpi-danger .dashboard-kpi-icon { background: rgba(220,38,38,.06); color: #dc2626; }

@media (max-width: 1023px) {
    .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dashboard-grid { grid-template-columns: 1fr; }
}

/* Dashboard content grid (2/3 + 1/3) */
.dashboard-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}
@media (max-width: 1023px) {
    .dashboard-content { grid-template-columns: 1fr; }
}

/* Activity feed */
.activity-feed {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.activity-feed-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--dur-fast) var(--ease-out);
}
.activity-feed-item:last-child { border-bottom: 0; }
.activity-feed-item:hover { background: var(--navy-50); margin: 0 calc(var(--space-3) * -1); padding-left: var(--space-3); padding-right: var(--space-3); border-radius: var(--radius-md); }

.activity-feed-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: var(--navy-100);
    color: var(--navy-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    flex-shrink: 0;
}
.activity-feed-body { flex: 1; min-width: 0; }
.activity-feed-text {
    font-size: var(--fs-sm);
    color: var(--gray-900);
    margin: 0 0 var(--space-1);
    line-height: var(--lh-snug);
}
.activity-feed-text strong { font-weight: var(--fw-semibold); }
.activity-feed-time {
    font-size: var(--fs-xs);
    color: var(--gray-500);
}

/* Quick links / shortcuts */
.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}
.quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
    border: 1px solid var(--ivory-200);
    text-decoration: none;
    color: var(--gray-900);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.quick-link:hover {
    background: var(--navy-50);
    border-color: var(--navy-100);
    transform: translateY(-1px);
}
.quick-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.quick-link .icon { color: var(--navy-700); }

/* Upcoming deadlines compact */
.upcoming-deadlines {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.upcoming-deadline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--ivory-50);
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease-out);
}
.upcoming-deadline-item:hover { background: var(--navy-50); }
.upcoming-deadline-item.is-overdue {
    background: var(--danger-100);
    border-left: 3px solid var(--danger-500);
}
.upcoming-deadline-item.is-soon {
    background: var(--warning-100);
    border-left: 3px solid var(--warning-500);
}
.upcoming-deadline-title {
    font-weight: var(--fw-medium);
    color: var(--gray-900);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.upcoming-deadline-date {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    white-space: nowrap;
}

/* ============================================================
   34. COMMAND PALETTE (Ctrl+K search)
   Sprint UI Redesign - Thomas Dupont - 2026-05-15
   ============================================================ */

.cmd-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 31, 68, 0.55);
    backdrop-filter: blur(4px);
    z-index: calc(var(--z-modal) + 10);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: fade-in var(--dur-fast) var(--ease-out);
}
.cmd-palette-backdrop[hidden] { display: none; }

.cmd-palette {
    width: 100%;
    max-width: 620px;
    background: #FFFFFF;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: modal-pop var(--dur-base) var(--ease-out);
}

.cmd-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--gray-200);
}
.cmd-palette-input-wrap .icon { color: var(--gray-500); flex-shrink: 0; }
.cmd-palette-input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: var(--fs-md);
    color: var(--gray-900);
    outline: none;
}
.cmd-palette-input::placeholder { color: var(--gray-500); }
.cmd-palette-kbd {
    font-size: var(--fs-xs);
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

.cmd-palette-results {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--space-2);
}
.cmd-palette-group-title {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--gray-500);
    padding: var(--space-2) var(--space-3);
}
.cmd-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--gray-900);
    text-decoration: none;
    font-size: var(--fs-sm);
    transition: background var(--dur-fast) var(--ease-out);
    cursor: pointer;
}
.cmd-palette-item:hover,
.cmd-palette-item.is-highlighted {
    background: var(--navy-50);
    color: var(--navy-900);
}
.cmd-palette-item .icon { color: var(--gray-500); }
.cmd-palette-item:hover .icon { color: var(--navy-700); }
.cmd-palette-item-meta {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--gray-500);
}

.cmd-palette-empty {
    text-align: center;
    padding: var(--space-8) var(--space-4);
    color: var(--gray-600);
}

/* ============================================================
   35. PROGRESS BAR COMPONENT
   Sprint UI Redesign - Julie Vasseur - 2026-05-15
   ============================================================ */

.progress {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--navy-900);
    transition: width 0.4s var(--ease-out);
}
.progress-bar.is-accent { background: var(--bronze-500); }
.progress-bar.is-success { background: var(--success-500); }
.progress-bar.is-warning { background: var(--warning-500); }
.progress-bar.is-danger { background: var(--danger-500); }

.progress-lg { height: 12px; }
.progress-sm { height: 4px; }

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--gray-600);
    font-weight: var(--fw-semibold);
}

/* ============================================================
   36. AVATAR VARIATIONS
   Sprint UI Redesign - Julie Vasseur - 2026-05-15
   ============================================================ */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    flex-shrink: 0;
    user-select: none;
}
.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-xs); }
.avatar-md { width: 40px; height: 40px; font-size: var(--fs-sm); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
.avatar-xl { width: 80px; height: 80px; font-size: var(--fs-xl); }

.avatar-navy { background: var(--navy-700); color: #FFFFFF; }
.avatar-bronze { background: var(--bronze-500); color: #FFFFFF; }
.avatar-gray { background: var(--gray-400); color: #FFFFFF; }
.avatar-success { background: var(--success-500); color: #FFFFFF; }

.avatar-group {
    display: flex;
    flex-direction: row-reverse;
}
.avatar-group .avatar {
    margin-left: -8px;
    border: 2px solid #FFFFFF;
    position: relative;
}
.avatar-group .avatar:last-child { margin-left: 0; }
.avatar-group .avatar:hover { z-index: 2; transform: scale(1.1); }

/* ============================================================
   37. INVOICE CREATION ASSISTANT
   Sprint Facturation Intelligente - Clara Martin / Thomas Dupont - 2026-05-15
   ============================================================ */

.invoice-wizard {
    max-width: 960px;
}

.invoice-wizard-steps {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--ivory-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    border: 1px solid var(--ivory-200);
}
.invoice-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-600);
    flex: 1;
    min-width: 0;
}
.invoice-wizard-step.is-active {
    background: var(--navy-900);
    color: #FFFFFF;
}
.invoice-wizard-step.is-done {
    color: var(--success-700);
}
.invoice-wizard-step-num {
    width: 28px; height: 28px;
    border-radius: var(--radius-full);
    background: var(--gray-200);
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    flex-shrink: 0;
}
.invoice-wizard-step.is-active .invoice-wizard-step-num {
    background: var(--bronze-500);
    color: #FFFFFF;
}
.invoice-wizard-step.is-done .invoice-wizard-step-num {
    background: var(--success-500);
    color: #FFFFFF;
}

/* Billing mode selector */
.billing-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.billing-mode-card {
    display: block;
    padding: var(--space-4);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    position: relative;
}
.billing-mode-card:hover {
    border-color: var(--navy-600);
    background: var(--navy-50);
}
.billing-mode-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.billing-mode-card:has(input:checked) {
    border-color: var(--navy-900);
    background: var(--navy-50);
    box-shadow: inset 0 0 0 1px var(--navy-900);
}
.billing-mode-card:focus-within { box-shadow: var(--shadow-focus); }
.billing-mode-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--navy-100);
    color: var(--navy-700);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.billing-mode-card:has(input:checked) .billing-mode-icon {
    background: var(--navy-900);
    color: #FFFFFF;
}
.billing-mode-title {
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    font-size: var(--fs-sm);
    margin-bottom: var(--space-1);
}
.billing-mode-desc {
    font-size: var(--fs-xs);
    color: var(--gray-600);
    line-height: var(--lh-normal);
}

/* Invoice line items */
.invoice-lines {
    margin-bottom: var(--space-4);
}
.invoice-line-header {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--ivory-100);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--gray-700);
}
.invoice-line-row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr 40px;
    gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--gray-100);
    align-items: center;
    transition: background var(--dur-fast) var(--ease-out);
}
.invoice-line-row:hover { background: var(--navy-50); }
.invoice-line-row:last-child { border-bottom: 0; }
.invoice-line-row input,
.invoice-line-row select {
    height: 32px;
    font-size: var(--fs-xs);
}
.invoice-line-desc {
    font-size: var(--fs-sm);
    color: var(--gray-900);
}
.invoice-line-amount {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    text-align: right;
    color: var(--navy-900);
    font-weight: var(--fw-semibold);
}
.invoice-line-remove {
    width: 32px; height: 32px;
    border: 0;
    background: transparent;
    color: var(--gray-500);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.invoice-line-remove:hover { background: var(--danger-100); color: var(--danger-700); }

.invoice-add-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--navy-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.invoice-add-line:hover { background: var(--navy-50); border-color: var(--navy-600); }

/* Invoice totals summary */
.invoice-totals {
    background: var(--ivory-50);
    border: 1px solid var(--ivory-200);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-top: var(--space-4);
}
.invoice-totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    font-size: var(--fs-sm);
    color: var(--gray-700);
}
.invoice-totals-row.is-total {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--navy-900);
    border-top: 2px solid var(--navy-900);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
}
.invoice-totals-label { flex: 1; }
.invoice-totals-value {
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    text-align: right;
    min-width: 120px;
}

/* Time entries auto-suggest panel */
.time-entries-suggest {
    background: var(--navy-50);
    border: 1px solid var(--navy-100);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.time-entries-suggest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.time-entries-suggest-header h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0;
}
.time-entry-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--navy-100);
    font-size: var(--fs-sm);
}
.time-entry-suggest-item:last-child { border-bottom: 0; }
.time-entry-suggest-item input[type="checkbox"] {
    width: 16px; height: 16px;
    accent-color: var(--navy-900);
}
.time-entry-suggest-desc { flex: 1; color: var(--gray-900); }
.time-entry-suggest-hours {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--navy-700);
    font-weight: var(--fw-semibold);
}
.time-entry-suggest-amount {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    min-width: 80px;
    text-align: right;
}

/* Invoice payment tracking badges */
.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-2);
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
}
.payment-badge.is-paid { background: var(--success-100); color: var(--success-700); }
.payment-badge.is-partial { background: var(--warning-100); color: var(--warning-700); }
.payment-badge.is-unpaid { background: var(--danger-100); color: var(--danger-700); }
.payment-badge.is-overdue { background: var(--danger-500); color: #FFFFFF; }
.payment-badge.is-draft { background: var(--gray-100); color: var(--gray-700); }

/* Invoice number format display */
.invoice-number-display {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--navy-900);
    letter-spacing: var(--ls-wide);
}

/* Provision request card */
.provision-card {
    background: var(--bronze-100);
    border: 1px solid var(--bronze-400);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}
.provision-card-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--bronze-500);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.provision-card-body { flex: 1; }
.provision-card-body h4 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--bronze-700);
    margin: 0 0 var(--space-1);
}
.provision-card-body p {
    font-size: var(--fs-sm);
    color: var(--gray-700);
    margin: 0;
}

@media (max-width: 768px) {
    .invoice-wizard-steps { flex-direction: column; }
    .billing-mode-grid { grid-template-columns: 1fr; }
    .invoice-line-header,
    .invoice-line-row { grid-template-columns: 1fr; gap: var(--space-2); }
    .invoice-line-header { display: none; }
}

/* ============================================================
   38. ENHANCED TABLE STYLES + HOVER CARDS
   Sprint UI Redesign - Thomas Dupont - 2026-05-15
   ============================================================ */

.table-wrap {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
}

.table thead th {
    background: #f8fafc;
    padding: var(--space-3) var(--space-4);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    white-space: nowrap;
}

.table tbody td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-size: 14px;
    vertical-align: middle;
}
.table tbody td a { color: #2563eb; text-decoration: none; }
.table tbody td a:hover { text-decoration: underline; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr {
    transition: background var(--dur-fast) var(--ease-out);
}
.table tbody tr:hover { background: #fafbfc; }
.table tbody tr:nth-child(even) { background: #fafbfc; }
.table tbody tr:nth-child(even):hover { background: #f5f6f8; }

.table .text-sm { font-size: var(--fs-sm); }

/* Row clickable (full row links) */
.table tbody tr.is-clickable { cursor: pointer; }
.table tbody tr.is-clickable:hover { background: var(--navy-100); }

/* ============================================================
   39. SIDEBAR BADGE COUNTER
   Sprint UI Redesign - Julie Vasseur - 2026-05-15
   ============================================================ */

.sidebar-item .sidebar-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--danger-500);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: var(--fw-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.sidebar-item .sidebar-badge.is-muted {
    background: var(--gray-400);
}

/* ============================================================
   40. MATTER HUB TAB CONTENT (scrollable sections in fiche dossier)
   Sprint UI Redesign - Julie Vasseur / Thomas Dupont - 2026-05-15
   ============================================================ */

.matter-hub-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-6);
}
@media (max-width: 1023px) {
    .matter-hub-grid { grid-template-columns: 1fr; }
}

.matter-hub-main { min-width: 0; }
.matter-hub-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.matter-mini-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}
.matter-mini-card h4 {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--gray-600);
    margin: 0 0 var(--space-3);
}

/* Notes inline */
.matter-notes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.matter-note-item {
    padding: var(--space-3);
    background: var(--ivory-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--bronze-500);
}
.matter-note-item p {
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--gray-900);
    line-height: var(--lh-normal);
}
.matter-note-meta {
    margin-top: var(--space-1);
    font-size: var(--fs-xs);
    color: var(--gray-500);
}

/* ============================================================
   41. ENHANCED BREADCRUMBS (with icons)
   Sprint UI Redesign - Thomas Dupont - 2026-05-15
   ============================================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--gray-600);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}
.breadcrumbs a {
    color: var(--gray-600);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.breadcrumbs a:hover { color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs .sep {
    color: var(--gray-400);
    font-size: 12px;
}
.breadcrumbs .current {
    color: var(--gray-900);
    font-weight: var(--fw-medium);
}

/* ============================================================
   42. PRINT STYLES (invoice PDF)
   Sprint Facturation - Thomas Dupont - 2026-05-15
   ============================================================ */

@media print {
    .admin-sidebar,
    .admin-topbar,
    .sidebar-backdrop,
    .toasts,
    .btn,
    .cookie-banner,
    .cmd-palette-backdrop { display: none !important; }

    .admin-shell { display: block; }
    .admin-main { padding: 0; }

    body {
        background: #FFFFFF;
        color: #000000;
        font-size: 12pt;
    }

    .card { box-shadow: none; border: 1px solid #CCC; }
    .invoice-totals { background: #F5F5F5; }

    a { color: #000000; text-decoration: none; }
    .badge { border: 1px solid #999; }
}

/* ============================================================
   SETTINGS PAGE - Parametres cabinet
   Sprint UI Redesign - 2026-05-15
   ============================================================ */

.settings-integration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.settings-integration-info {
    flex: 1;
}
.settings-integration-info h4 {
    margin: 0 0 var(--space-1);
    font-size: var(--fs-base);
}
.settings-integration-info p {
    margin: 0;
}

.settings-integration-status {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Toggle switch */
.toggle-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gray-300);
    border-radius: var(--radius-full);
    transition: background var(--dur-base) var(--ease-out);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-base) var(--ease-out);
}

.toggle-input:checked + .toggle-switch {
    background: var(--success-500);
}
.toggle-input:checked + .toggle-switch::after {
    transform: translateX(20px);
}
.toggle-input:focus-visible + .toggle-switch {
    box-shadow: var(--shadow-focus);
}

/* field-row : layout horizontal 2 colonnes de formulaire */
.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
@media (max-width: 767px) {
    .field-row { grid-template-columns: 1fr; }
    .settings-integration { flex-direction: column; align-items: flex-start; }
}

/* field : champ de formulaire standard */
.field {
    margin-bottom: var(--space-4);
}
.field label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}
.field .req { color: var(--danger-500); }

.field-hint {
    display: block;
    font-size: var(--fs-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

/* Textarea */
.textarea {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea:focus {
    outline: none;
    border-color: var(--navy-600);
    box-shadow: var(--shadow-focus-navy);
}

/* Invoice number display */
.invoice-number-display {
    font-family: var(--font-mono);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
}

/* Time entries suggest */
.time-entries-suggest {
    background: var(--navy-50);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.time-entries-suggest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.time-entries-suggest-header h3 {
    margin: 0;
    font-size: var(--fs-base);
}
.time-entry-suggest-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}
.time-entry-suggest-item:last-child { border-bottom: 0; }
.time-entry-suggest-desc {
    flex: 1;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.time-entry-suggest-desc .text-xs {
    display: block;
    font-size: var(--fs-xs);
}
.time-entry-suggest-hours {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--navy-700);
    white-space: nowrap;
}
.time-entry-suggest-amount {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    white-space: nowrap;
    min-width: 80px;
    text-align: right;
}

/* Invoice add line button */
.invoice-add-line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--navy-700);
    background: none;
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.invoice-add-line:hover {
    background: var(--navy-50);
    border-color: var(--navy-600);
    color: var(--navy-900);
}

/* form-actions alignment */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-4);
}

/* back-link */
.back-link {
    margin-bottom: var(--space-4);
}
.back-link a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--gray-600);
    text-decoration: none;
}
.back-link a:hover { color: var(--navy-700); }

/* ============================================================
   SPRINT 6 - Form Grid, Autocomplete, Alerts
   Marcus Leroy (CTO) - 2026-05-15
   ============================================================ */

/* Form grid: 2 columns on desktop, 1 on mobile */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
@media (max-width: 767px) {
    .form-grid { grid-template-columns: 1fr; }
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.form-section-title {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--navy-900);
    margin: 0 0 var(--space-4);
    letter-spacing: 0;
}

.form-help {
    font-size: var(--fs-xs);
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.required {
    color: var(--danger-500, #dc2626);
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
    position: absolute;
    z-index: var(--z-dropdown, 50);
    left: 0;
    right: 0;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.1));
    max-height: 240px;
    overflow-y: auto;
}
.autocomplete-item {
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--gray-50, #f9fafb);
}
.autocomplete-item:hover {
    background: var(--gray-50, #f9fafb);
}
.autocomplete-item:last-child {
    border-bottom: 0;
}

/* Make address fields position relative for dropdown */
.form-group {
    position: relative;
}

/* Alerts */
.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
}
.alert h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}
.alert ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-5);
}
.alert-warning {
    background: var(--warning-50, #fef3c7);
    border: 1px solid var(--warning-300, #fcd34d);
    color: var(--warning-800, #92400e);
}

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
}

/* Page header with actions */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
}
.page-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* Matter actions (edit/delete buttons on show pages) */
.matter-actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

/* ============================================================
   36. TABLE FILTER - Recherche instantanee client-side
   Sprint 9 - Thomas Dupont, Frontend, dig-holding
   ============================================================ */

.table-filter-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.table-filter-wrap .input-wrap { flex: 1; min-width: 200px; max-width: 400px; }
.table-filter-wrap .table-filter-count {
    font-size: var(--fs-xs);
    color: var(--gray-500);
    white-space: nowrap;
}

/* Highlight lignes filtrees : transition smooth */
[data-table-filter] ~ .table-wrap tbody tr,
.table-wrap tbody tr {
    transition: opacity 0.15s ease;
}
.table-wrap tbody tr[hidden] {
    display: none;
}

/* ============================================================
   37. SEARCHABLE SELECT - Dropdown avec recherche integree
   Sprint 9 - Thomas Dupont, Frontend, dig-holding
   ============================================================ */

.searchable-select {
    position: relative;
    display: inline-block;
    width: 100%;
}
.searchable-select-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7284' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}
.searchable-select.is-open .searchable-select-trigger {
    border-color: var(--navy-400);
    box-shadow: var(--shadow-focus);
}

.searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--ivory-200, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
html.dark .searchable-select-dropdown {
    background: var(--color-surface);
    border-color: var(--color-border);
}

.searchable-select-search {
    margin: var(--space-2);
    width: calc(100% - var(--space-4));
}

.searchable-select-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.searchable-select-option {
    padding: var(--space-2) var(--space-3);
    font-size: var(--fs-sm);
    cursor: pointer;
    outline: none;
    transition: background 0.1s;
}
.searchable-select-option:hover,
.searchable-select-option:focus {
    background: var(--ivory-100, #f7f8fa);
}
html.dark .searchable-select-option:hover,
html.dark .searchable-select-option:focus {
    background: rgba(42,77,122,0.15);
}
.searchable-select-option.is-selected {
    font-weight: var(--fw-semibold);
    color: var(--navy-700);
}
.searchable-select-option[tabindex] { outline: none; }
.searchable-select-option:focus-visible {
    box-shadow: inset 0 0 0 2px var(--navy-300);
}
.searchable-select-empty {
    padding: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--gray-500);
    text-align: center;
}

/* Focusability des options */
.searchable-select-option { -webkit-user-select: none; user-select: none; }

/* ============================================================
   Fin app.css v2.3
   Julie Vasseur (Studio Design) + Thomas Dupont (Frontend)
   + Marcus Leroy (CTO) Sprint 9
   dig-holding, sprint 9, 2026-06-02
   ============================================================ */