/* ══════════════════════════════════════════════════════════
    DOCAVOCAT — CHARTE VISUELLE v4
    Luxury juridique. Navy / Or / Blanc.
    DM Serif Display + DM Sans
══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Variables ─────────────────────────────────────────── */
:root {
    /* Primaires */
    --color-primary:        #0C1524;
    --color-primary-hover:  #162033;
    --primary:              #0C1524;
    --primary-dark:         #162033;

    /* Or */
    --color-accent:         #C9A96E;
    --color-accent-gold:    #C9A96E;
    --color-accent-light:   #E8D5B0;
    --accent:               #C9A96E;
    --accent-dark:          #B8924A;
    --accent-500:           #C9A96E;

    /* Fonds */
    --color-background:     #F4F6F9;
    --color-surface:        #FFFFFF;
    --bg-body:              #F4F6F9;
    --bg-surface:           #FFFFFF;
    --bg-surface-hover:     #F8FAFC;
    --bg-secondary:         #F4F6F9;
    --bg-tertiary:          #E8ECF0;
    --surface:              #FFFFFF;
    --surface-hover:        #F8FAFC;

    /* Bordures */
    --color-border:         #E2E7ED;
    --border-default:       #E2E7ED;
    --border-light:         #EEF1F5;
    --border-strong:        #C8D0DA;

    /* Statuts */
    --color-success:        #15803D;
    --color-success-bg:     rgba(21,128,61,0.07);
    --success:              #15803D;
    --color-warning:        #B45309;
    --color-warning-bg:     rgba(180,83,9,0.07);
    --warning:              #B45309;
    --color-danger:         #B91C1C;
    --color-danger-bg:      rgba(185,28,28,0.07);
    --color-info:           #1D4ED8;
    --color-info-bg:        rgba(29,78,216,0.07);

    /* Tokens legacy */
    --success-50:   #f0fdf4; --success-500: #22c55e; --success-600: #16a34a;
    --danger-50:    #fef2f2; --danger-500:  #ef4444; --danger-600:  #dc2626;
    --info-50:      #eff6ff; --info-500:    #3b82f6; --info-600:    #2563eb;
    --warning-50:   #fffbeb; --warning-500: #f59e0b; --warning-600: #d97706;

    /* Typo */
    --font-display:         'DM Serif Display', Georgia, serif;
    --font-family-base:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --bs-body-font-family:  'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --text-primary:         #0C1524;
    --text-secondary:       #4A5568;
    --text-tertiary:        #8896A5;
    --text-muted:           #7A8A9A;

    /* Sidebar */
    --sidebar-bg:           #0C1524;
    --sidebar-text:         rgba(255,255,255,0.60);

    /* Rayons */
    --radius-sm:    4px;
    --radius-small: 6px;
    --radius-md:    8px;
    --radius-medium:12px;
    --radius-large: 16px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-full:  9999px;

    /* Ombres */
    --shadow-xs:    0 1px 2px rgba(12,21,36,0.04);
    --shadow-soft:  0 2px 8px rgba(12,21,36,0.05);
    --shadow-sm:    0 2px 8px rgba(12,21,36,0.07);
    --shadow-medium:0 4px 16px rgba(12,21,36,0.09);
    --shadow-md:    0 4px 12px rgba(12,21,36,0.08);
    --shadow-large: 0 8px 28px rgba(12,21,36,0.11);
    --shadow-lg:    0 8px 28px rgba(12,21,36,0.11);
    --shadow-card:  0 2px 12px rgba(12,21,36,0.06), 0 1px 3px rgba(12,21,36,0.04);

    /* Transitions */
    --transition-fast:  0.15s cubic-bezier(0.4,0,0.2,1);
    --transition-base:  0.2s  cubic-bezier(0.4,0,0.2,1);
    --transition-slow:  0.35s cubic-bezier(0.4,0,0.2,1);
    --duration-normal:  0.2s;
    --ease-out:         cubic-bezier(0.16,1,0.3,1);

    /* Espacement */
    --spacing-1:8px; --spacing-2:16px; --spacing-3:24px;
    --spacing-4:32px; --spacing-5:40px; --spacing-6:48px;

    /* Brand legacy */
    --brand-300:#C8D0DA; --brand-400:#8896A5;
    --brand-500:#1E3A5F; --brand-600:#162033; --brand-700:#0C1524;
}

/* ── Dark mode ─────────────────────────────────────────── */
.dark {
    --bg-body:          #080F1A;
    --bg-surface:       #0F1E30;
    --bg-surface-hover: #162033;
    --color-background: #080F1A;
    --color-surface:    #0F1E30;
    --text-primary:     #EDF2F7;
    --text-secondary:   #A0AEC0;
    --text-muted:       #718096;
    --text-tertiary:    #4A5568;
    --border-default:   #1E2D42;
    --color-border:     #1E2D42;
    --border-light:     #152030;
    --border-strong:    #2D4463;
    --surface:          #0F1E30;
    --surface-hover:    #162033;
    --bg-secondary:     #0F1E30;
    --bg-tertiary:      #1A2C44;
    --shadow-sm:        0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:        0 4px 16px rgba(0,0,0,0.35);
    --shadow-lg:        0 8px 28px rgba(0,0,0,0.4);
    --shadow-card:      0 2px 12px rgba(0,0,0,0.25);
    --shadow-soft:      0 2px 8px rgba(0,0,0,0.25);
    --shadow-medium:    0 4px 16px rgba(0,0,0,0.35);
    --shadow-large:     0 8px 28px rgba(0,0,0,0.4);
    --shadow-xs:        0 1px 2px rgba(0,0,0,0.2);

    /* Statuts — lisibles en dark */
    --color-success-bg:  rgba(21,128,61,0.15);
    --color-warning-bg:  rgba(180,83,9,0.15);
    --color-danger-bg:   rgba(185,28,28,0.15);
    --color-info-bg:     rgba(29,78,216,0.15);

    /* Sidebar dark */
    --sidebar-bg:        #060E1A;
}

/* ── Dark mode : composants ───────────────────────────── */
.dark .alert-success { background: var(--color-success-bg); color: #86efac; border-color: rgba(21,128,61,0.3); }
.dark .alert-warning { background: var(--color-warning-bg); color: #fcd34d; border-color: rgba(180,83,9,0.3); }
.dark .alert-danger  { background: var(--color-danger-bg);  color: #fca5a5; border-color: rgba(185,28,28,0.3); }
.dark .alert-info    { background: var(--color-info-bg);    color: #93c5fd; border-color: rgba(29,78,216,0.3); }
.dark .alert .alert-link { color: inherit; }

.dark .form-control, .dark .form-select {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-primary);
}
.dark .form-control::placeholder { color: var(--text-tertiary); }
.dark .form-control:focus, .dark .form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.2);
}

.dark .modal-content { background: var(--bg-surface); border-color: var(--border-default); }
.dark .modal-header  { border-color: var(--border-default); }
.dark .modal-footer  { background: var(--bg-tertiary); border-color: var(--border-default); }
.dark .dropdown-menu { background: var(--bg-surface); border-color: var(--border-default); }
.dark .dropdown-item { color: var(--text-primary); }
.dark .dropdown-item:hover { background: var(--bg-surface-hover); }

.dark .table thead th  { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-default); }
.dark .table tbody td  { color: var(--text-primary); border-color: var(--border-light); }
.dark .table-modern thead th { background: var(--bg-tertiary); color: var(--text-muted); border-color: var(--border-default); }
.dark .table-modern tbody td { color: var(--text-primary); border-color: var(--border-light); }
.dark .table-hover tbody tr:hover,
.dark .table-modern tbody tr:hover { background: var(--bg-surface-hover); }

/* Dark mode: nav-tabs */
.dark .nav-tabs { border-bottom-color: var(--border-default); }
.dark .nav-tabs .nav-link { color: var(--text-secondary); }
.dark .nav-tabs .nav-link:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.dark .nav-tabs .nav-link.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* Dark mode: floating labels & Bootstrap overrides */
.dark .form-floating > label { color: var(--text-secondary); }
.dark .form-label { color: var(--text-secondary); }
.dark .card { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); }
.dark .card-header { background: var(--bg-tertiary); border-color: var(--border-default); color: var(--text-primary); }
.dark .card-footer { background: var(--bg-tertiary); border-color: var(--border-default); }
.dark .page-header, .dark .content-header { color: var(--text-primary); }
.dark .text-muted { color: var(--text-muted) !important; }
.dark .text-body { color: var(--text-primary) !important; }
.dark .bg-white { background-color: var(--bg-surface) !important; }
.dark .bg-light { background-color: var(--bg-tertiary) !important; }
.dark .border { border-color: var(--border-default) !important; }

/* ── Base ──────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background: var(--bg-body);
    line-height: 1.6;
    font-size: 15px;
}

/* Scrollbar fine */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* Focus visible */
*:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ══════════════════════════════════════════════════════════
    TYPOGRAPHIE
══════════════════════════════════════════════════════════ */

h1,.h1 { font-family: var(--font-display); font-size: clamp(1.5rem,3.5vw,2.125rem); font-weight: 400; color: var(--text-primary); line-height:1.2; letter-spacing:-0.01em; }
h2,.h2 { font-family: var(--font-display); font-size: clamp(1.25rem,2.5vw,1.625rem); font-weight: 400; color: var(--text-primary); line-height:1.3; }
h3,.h3 { font-size: clamp(1rem,2vw,1.25rem); font-weight: 600; color: var(--text-primary); line-height:1.4; }
h4,.h4 { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); }
h5,.h5 { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary); }
h6,.h6 { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }
p { color: var(--text-secondary); line-height:1.65; }

/* ══════════════════════════════════════════════════════════
    PAGE HEADERS — Séparateur or
══════════════════════════════════════════════════════════ */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-default);
    position: relative;
    flex-wrap: wrap;
}
.page-header::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 64px; height: 2px;
    background: var(--color-accent);
}
.page-title {
    font-family: var(--font-display);
    font-size: clamp(1.375rem,3vw,1.875rem);
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.page-title i { color: var(--color-accent); margin-right: 0.625rem; font-family: var(--font-family-base); font-style: normal; }
.page-subtitle { font-size: 0.875rem; color: var(--text-muted); margin: 0; }

/* ══════════════════════════════════════════════════════════
    BOUTONS
══════════════════════════════════════════════════════════ */

.btn, a.btn, button.btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: var(--font-family-base);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
    transition: all var(--transition-fast);
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: 1px solid var(--color-primary) !important;
    box-shadow: 0 1px 3px rgba(12,21,36,0.15);
}
.btn-primary:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(12,21,36,0.22) !important;
    color: #fff !important;
}
.btn-primary:active { transform: translateY(0); }

/* Bouton accent or */
.btn-accent {
    background: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-accent) !important;
    font-weight: 600 !important;
}
.btn-accent:hover {
    background: var(--accent-dark) !important;
    border-color: var(--accent-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(201,169,110,0.3) !important;
}

.btn-secondary {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-default) !important;
}
.btn-secondary:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-outline-primary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-default) !important;
}
.btn-outline-secondary:hover {
    background: var(--bg-surface-hover) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-danger { background: var(--color-danger) !important; color: #fff !important; border: 1px solid var(--color-danger) !important; }
.btn-danger:hover { background: #991b1b !important; border-color: #991b1b !important; }
.btn-success { background: var(--color-success) !important; color: #fff !important; border: 1px solid var(--color-success) !important; }

.btn-ghost, a.btn-ghost, button.btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
    font-weight: 500 !important;
}
.btn-ghost:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-color: var(--color-primary) !important;
}

.btn-sm { padding: 0.375rem 0.75rem !important; font-size: 0.8125rem !important; }
.btn-lg { padding: 0.75rem 1.5rem !important; font-size: 0.9375rem !important; }

.action-buttons, td .action-buttons, div.action-buttons {
    display: flex !important;
    gap: 0.375rem !important;
    align-items: center !important;
    flex-wrap: wrap;
}
table td a.btn, table td button.btn, table td .btn-ghost,
table tbody td a.btn, table tbody td button.btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════
    FORMULAIRES
══════════════════════════════════════════════════════════ */

.form-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
    letter-spacing: 0.01em;
}
.form-control, .form-select {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-family-base);
    font-size: 0.9375rem;
    padding: 0.625rem 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    width: 100%;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.15);
    outline: none;
}
.form-control::placeholder { color: var(--text-tertiary); }
.form-text { font-size: 0.8125rem; color: var(--text-muted); margin-top: 0.25rem; }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
    TABLEAUX
══════════════════════════════════════════════════════════ */

.table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.table thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
.table tbody td {
    padding: 0.9375rem 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr { transition: background var(--transition-fast); }
.table-hover tbody tr:hover { background: var(--bg-surface-hover); }

/* Table moderne avec style unifié */
.table-modern { width: 100%; border-collapse: collapse; }
.table-modern thead th {
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--text-muted); background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    padding: 0.75rem 1rem; white-space: nowrap;
}
.table-modern tbody td {
    padding: 0.9375rem 1rem;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary); vertical-align: middle;
    font-size: 0.875rem;
}
.table-modern tbody tr:last-child td { border-bottom: none; }
.table-modern tbody tr { transition: background var(--transition-fast); }
.table-modern tbody tr:hover { background: var(--bg-surface-hover); }

/* ══════════════════════════════════════════════════════════
    BADGES
══════════════════════════════════════════════════════════ */

.badge {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.3rem 0.625rem;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: none;
}
.bg-primary   { background: var(--color-primary) !important;    color: #fff !important; }
.bg-secondary { background: var(--bg-tertiary) !important;       color: var(--text-secondary) !important; }
.bg-success   { background: var(--color-success-bg) !important;  color: var(--color-success) !important;  border:1px solid rgba(21,128,61,.15); }
.bg-warning   { background: var(--color-warning-bg) !important;  color: var(--color-warning) !important;  border:1px solid rgba(180,83,9,.15); }
.bg-danger    { background: var(--color-danger-bg) !important;   color: var(--color-danger) !important;   border:1px solid rgba(185,28,28,.15); }
.bg-info      { background: var(--color-info-bg) !important;     color: var(--color-info) !important;     border:1px solid rgba(29,78,216,.15); }
.badge-success{ background: var(--color-success-bg); color: var(--color-success); border:1px solid rgba(21,128,61,.15); }
.badge-warning{ background: var(--color-warning-bg); color: var(--color-warning); border:1px solid rgba(180,83,9,.15); }
.badge-danger { background: var(--color-danger-bg);  color: var(--color-danger);  border:1px solid rgba(185,28,28,.15); }
.badge-info   { background: var(--color-info-bg);    color: var(--color-info);    border:1px solid rgba(29,78,216,.15); }

/* ══════════════════════════════════════════════════════════
    ALERTES
══════════════════════════════════════════════════════════ */

.alert {
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    border: 1px solid transparent;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    line-height: 1.5;
}
.alert i { flex-shrink: 0; margin-top: 0.125rem; }
.alert-success { background: var(--color-success-bg); border-color: rgba(21,128,61,.2); color: #14532d; }
.alert-warning { background: var(--color-warning-bg); border-color: rgba(180,83,9,.2);  color: #7c2d12; }
.alert-danger  { background: var(--color-danger-bg);  border-color: rgba(185,28,28,.2); color: #7f1d1d; }
.alert-info    { background: var(--color-info-bg);    border-color: rgba(29,78,216,.2);  color: #1e3a8a; }
.alert .alert-link { font-weight: 600; color: inherit; }

/* ══════════════════════════════════════════════════════════
    CARTES
══════════════════════════════════════════════════════════ */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card:hover { box-shadow: var(--shadow-medium); }
.card-elevated { box-shadow: var(--shadow-medium); }
.card-header {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card-header i { color: var(--color-accent); }
.card-body { padding: 1.5rem; }
.card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
}

/* ══════════════════════════════════════════════════════════
    STATS CARDS
══════════════════════════════════════════════════════════ */

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content:'';
    position:absolute; bottom:0; left:0; right:0;
    height:3px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-slow);
}
.stat-card:hover { box-shadow: var(--shadow-medium); transform: translateY(-2px); }
.stat-card:hover::after { transform: scaleX(1); }
.stat-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.125rem;
    margin-bottom: 1rem;
}
.stat-icon.blue   { background: rgba(29,78,216,.08);  color: #1d4ed8; }
.stat-icon.green  { background: rgba(21,128,61,.08);  color: #15803d; }
.stat-icon.orange { background: rgba(180,83,9,.08);   color: #b45309; }
.stat-icon.red    { background: rgba(185,28,28,.08);  color: #b91c1c; }
.stat-value { font-size: 2rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; margin: 0 0 0.25rem; letter-spacing: -0.03em; }
.stat-label { font-size: 0.8125rem; font-weight: 500; color: var(--text-secondary); margin: 0; }
.stat-change { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ══════════════════════════════════════════════════════════
    HERO BANNER
══════════════════════════════════════════════════════════ */

.hero-banner {
    background: var(--color-primary) !important;
    background-image: none !important;
    border-radius: var(--radius-large) !important;
    padding: 1.75rem 2rem !important;
    margin-bottom: 1.5rem !important;
    position: relative;
    overflow: hidden;
    border: none !important;
}
.hero-banner::before {
    content:'';
    position:absolute; right:-60px; top:-60px;
    width:220px; height:220px;
    background: rgba(201,169,110,0.07);
    border-radius: 50%;
    pointer-events: none;
}
.hero-banner::after {
    content:'';
    position:absolute; left:-40px; bottom:-80px;
    width:180px; height:180px;
    background: rgba(255,255,255,0.025);
    border-radius: 50%;
    pointer-events: none;
}
.hero-banner h1 {
    font-family: var(--font-display) !important;
    color: #fff !important;
    font-size: clamp(1.25rem,3vw,1.625rem) !important;
    font-weight: 400 !important;
    margin-bottom: 0.375rem !important;
}
.hero-banner p { color: rgba(255,255,255,0.75) !important; font-size: 0.875rem !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════
    SEARCH BAR
══════════════════════════════════════════════════════════ */

.search-bar {
    display: flex; align-items: center; gap: 0.625rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.12);
}
.search-bar .search-icon { color: var(--text-muted); font-size: 0.875rem; flex-shrink: 0; }
.search-input {
    border: none; background: transparent; outline: none;
    flex: 1; font-size: 0.9375rem; color: var(--text-primary);
    font-family: var(--font-family-base);
}
.search-input::placeholder { color: var(--text-tertiary); }

/* ══════════════════════════════════════════════════════════
    TOOLTIPS
══════════════════════════════════════════════════════════ */

.tip { position: relative; display: inline-flex; align-items: center; }
.tip .tooltip-text {
    visibility: hidden; opacity: 0; pointer-events: none;
    position: absolute; bottom: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: rgba(12,21,36,0.93); color: #fff;
    padding: 5px 8px; border-radius: 6px;
    font-size: 0.75rem; white-space: nowrap; z-index: 9999;
    transition: opacity 150ms ease, transform 150ms ease;
    font-family: var(--font-family-base);
}
.tip:hover .tooltip-text, .tip:focus-within .tooltip-text {
    visibility: visible; opacity: 1;
    transform: translateX(-50%) translateY(-3px);
}
.tip .tooltip-text::after {
    content:''; position:absolute; top:100%; left:50%;
    transform: translateX(-50%);
    border:5px solid transparent;
    border-top-color: rgba(12,21,36,0.93);
}

/* ══════════════════════════════════════════════════════════
    AVATAR
══════════════════════════════════════════════════════════ */

.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff; font-weight: 600;
    font-family: var(--font-family-base);
    flex-shrink: 0;
}
.avatar-sm  { width: 36px; height: 36px; font-size: 0.8125rem; }
.avatar-md  { width: 44px; height: 44px; font-size: 0.9375rem; }
.avatar-lg  { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-gold{ background: var(--color-accent); color: var(--color-primary); }

/* ══════════════════════════════════════════════════════════
    MODAL
══════════════════════════════════════════════════════════ */

.modal-content {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-large);
    box-shadow: 0 20px 60px rgba(12,21,36,0.18);
    font-family: var(--font-family-base);
}
.modal-header {
    border-bottom: 1px solid var(--border-default);
    padding: 1.25rem 1.5rem;
}
.modal-title { font-weight: 700; font-size: 1.0625rem; font-family: var(--font-display); }
.modal-footer {
    border-top: 1px solid var(--border-default);
    padding: 1rem 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0 0 var(--radius-large) var(--radius-large);
}
.modal-backdrop { backdrop-filter: blur(4px); }

/* ══════════════════════════════════════════════════════════
    DROPDOWN
══════════════════════════════════════════════════════════ */

.dropdown-menu {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-large);
    padding: 0.375rem;
    background: var(--bg-surface);
    font-family: var(--font-family-base);
}
.dropdown-item {
    border-radius: 6px; padding: 0.5rem 0.75rem;
    font-size: 0.875rem; color: var(--text-primary);
    transition: background var(--transition-fast);
}
.dropdown-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
.dropdown-item.text-danger:hover { background: var(--color-danger-bg); color: var(--color-danger); }
.dropdown-divider { margin: 0.25rem 0; border-color: var(--border-light); }

/* ══════════════════════════════════════════════════════════
    NAV TABS
══════════════════════════════════════════════════════════ */

.nav-tabs { border-bottom: 1px solid var(--border-default); gap: 0; }
.nav-tabs .nav-link {
    color: var(--text-muted); border: none; border-bottom: 2px solid transparent;
    padding: 0.625rem 1rem; font-weight: 500; font-size: 0.875rem;
    border-radius: 0; transition: all var(--transition-fast); margin-bottom: -1px;
}
.nav-tabs .nav-link:hover { color: var(--text-primary); background: transparent; border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active { color: var(--color-accent); font-weight: 600; border-bottom-color: var(--color-accent); background: transparent; }

/* ══════════════════════════════════════════════════════════
    EMPTY STATE
══════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center; padding: 3.5rem 1.5rem;
    color: var(--text-secondary);
}
.empty-state-icon {
    font-size: 3rem; display: block; margin-bottom: 1rem;
    color: var(--text-tertiary); opacity: 0.5;
}
.empty-state-icon-sm { font-size: 2rem; display: block; margin-bottom: 0.75rem; opacity: 0.4; }
.empty-state-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 0.5rem; }
.empty-state-message { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
.empty-state-centered { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); }

/* ══════════════════════════════════════════════════════════
    ANIMATIONS
══════════════════════════════════════════════════════════ */

.fade-in, .animate-fade-in { animation: fadeIn 0.28s ease forwards; }
.animate-fade-in-up        { animation: fadeInUp 0.32s ease forwards; }
.stagger-children > * { opacity: 0; animation: fadeInUp 0.3s ease forwards; }
.stagger-children > *:nth-child(1){ animation-delay:.05s }
.stagger-children > *:nth-child(2){ animation-delay:.10s }
.stagger-children > *:nth-child(3){ animation-delay:.15s }
.stagger-children > *:nth-child(4){ animation-delay:.20s }

@keyframes fadeIn   { from{opacity:0;transform:translateY(4px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ══════════════════════════════════════════════════════════
    UTILITAIRES
══════════════════════════════════════════════════════════ */

.rounded-md  { border-radius: var(--radius-md)    !important; }
.rounded-lg  { border-radius: var(--radius-large) !important; }
.rounded-xl  { border-radius: var(--radius-xl)    !important; }
.fw-500 { font-weight:500!important; } .fw-600 { font-weight:600!important; } .fw-700 { font-weight:700!important; }
.text-xs  { font-size:0.75rem  !important; }
.text-sm  { font-size:0.8125rem!important; }
.text-base{ font-size:0.9375rem!important; }
.text-lg  { font-size:1.0625rem!important; }
.text-gold{ color:var(--color-accent)  !important; }
.text-navy{ color:var(--color-primary) !important; }
.mt-1{margin-top:var(--spacing-1)!important} .mt-2{margin-top:var(--spacing-2)!important} .mt-3{margin-top:var(--spacing-3)!important}
.mb-1{margin-bottom:var(--spacing-1)!important} .mb-2{margin-bottom:var(--spacing-2)!important} .mb-3{margin-bottom:var(--spacing-3)!important}
.p-2{padding:var(--spacing-2)!important} .p-3{padding:var(--spacing-3)!important}
.backdrop-blur { backdrop-filter: blur(8px); }

/* ══════════════════════════════════════════════════════════
    LAYOUT CLASSES
══════════════════════════════════════════════════════════ */

.skip-nav-link { z-index:10000; }
.sidebar-user-text { flex:1; min-width:0; }
.form-margin-0 { margin:0; }
.form-inline-block { margin:0; display:inline; }
.btn-dropdown-reset { border:none; background:none; width:100%; text-align:left; cursor:pointer; }
.settings-modal-header { background:rgba(12,21,36,0.03); border-bottom:1px solid var(--border-default); }
.settings-modal-icon { color:var(--color-accent); }
.email-signature-textarea { height:84px; }
.autocomplete-hidden { display:none; }

/* ══════════════════════════════════════════════════════════
    NOTIFICATIONS
══════════════════════════════════════════════════════════ */

#notifBadge { font-size:10px; display:none; }
#notifPanel {
    display:none; position:absolute; top:60px; right:70px;
    width:360px; max-height:480px;
    background:var(--bg-surface); border-radius:var(--radius-medium);
    box-shadow:var(--shadow-large); z-index:9999; overflow:hidden;
    border:1px solid var(--border-default);
}
.notif-header { padding:12px 16px; border-bottom:1px solid var(--border-default); display:flex; justify-content:space-between; align-items:center; background:var(--bg-secondary); }
.notif-header-title { margin:0; font-weight:700; font-size:0.875rem; color:var(--text-primary); }
.notif-header-icon { color:var(--color-accent); }
.notif-mark-all-btn { border:none; background:none; color:var(--color-accent); font-size:0.75rem; font-weight:600; cursor:pointer; }
#notifList { max-height:380px; overflow-y:auto; }
#notifEmpty { display:none; text-align:center; padding:2rem 1rem; color:var(--text-tertiary); }
.notif-empty-icon { opacity:.35; }
.notif-empty-msg { margin:0; font-size:0.875rem; }
.notif-item { display:flex; gap:12px; padding:12px 16px; text-decoration:none; color:inherit; border-bottom:1px solid var(--border-light); transition:background var(--transition-fast); }
.notif-item:hover { background:var(--bg-surface-hover); }
.notif-item.unread { background:var(--bg-secondary); }
.notif-icon-wrap { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-icon-wrap.color-success{background:#ecfdf5} .notif-icon-wrap.color-warning{background:#fef3c7}
.notif-icon-wrap.color-danger{background:#fee2e2}  .notif-icon-wrap.color-primary{background:#eef2f7}
.notif-icon{font-size:13px}
.notif-icon.color-success{color:#15803d} .notif-icon.color-warning{color:#b45309}
.notif-icon.color-danger{color:#b91c1c}  .notif-icon.color-primary{color:var(--color-accent)}
.notif-body{flex:1;min-width:0}
.notif-title{font-weight:600;font-size:0.8125rem;margin-bottom:2px;color:var(--text-primary)}
.notif-msg{font-size:0.75rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-time{font-size:0.6875rem;color:var(--text-tertiary);margin-top:2px}
.notif-unread-dot{width:7px;height:7px;border-radius:50%;background:var(--color-accent);flex-shrink:0;margin-top:5px}

/* ══════════════════════════════════════════════════════════
    COOKIE BANNER
══════════════════════════════════════════════════════════ */

#cookieConsentBanner { display:none; position:fixed; bottom:0; left:0; right:0; z-index:9999; background:var(--bg-surface); border-top:1px solid var(--border-default); box-shadow:0 -4px 20px rgba(0,0,0,.07); font-size:0.875rem; }
.cookie-banner-inner { padding:1rem 1.5rem; }
.cookie-banner-text-col { max-width:700px; }
.cookie-banner-title { color:var(--text-primary); font-weight:600; }
.cookie-banner-desc { font-size:0.8125rem; color:var(--text-secondary); }
.cookie-banner-link { color:var(--color-accent); }

/* ══════════════════════════════════════════════════════════
    APP MODAL (confirm/alert)
══════════════════════════════════════════════════════════ */

#appModalOverlay { display:none; position:fixed; inset:0; z-index:99999; background:rgba(12,21,36,0.45); backdrop-filter:blur(6px); transition:opacity .2s; opacity:0; }
.app-modal-centering { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
#appModalBox { background:var(--bg-surface); border:1px solid var(--border-default); border-radius:var(--radius-2xl); box-shadow:0 24px 60px rgba(12,21,36,.18); max-width:440px; width:100%; overflow:hidden; transform:scale(.93) translateY(10px); transition:transform .25s var(--ease-out),opacity .25s ease; opacity:0; }
.app-modal-accent { height:3px; background:linear-gradient(90deg,var(--color-primary),var(--color-accent)); }
.app-modal-body { padding:28px 28px 0; text-align:center; }
#appModalIcon { width:52px; height:52px; border-radius:var(--radius-lg); display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:22px; }
#appModalTitle { font-weight:700; color:var(--text-primary); margin-bottom:8px; font-size:1.0625rem; font-family:var(--font-display); }
#appModalMessage { color:var(--text-secondary); font-size:.9rem; line-height:1.5; margin-bottom:0; white-space:pre-line; }
#appModalFooter { padding:20px 28px 24px; display:flex; justify-content:center; gap:10px; }
.app-modal-btn { min-width:100px; } .app-modal-btn-ok { min-width:120px; }

/* ══════════════════════════════════════════════════════════
    PWA BANNER
══════════════════════════════════════════════════════════ */

.pwa-install-banner { position:fixed; right:1rem; bottom:1rem; max-width:400px; width:calc(100% - 2rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; background:var(--color-primary); color:#fff; border-radius:var(--radius-large); box-shadow:0 16px 40px rgba(12,21,36,.3); z-index:2500; }
.pwa-install-banner-copy { display:flex; flex-direction:column; gap:.2rem; }
.pwa-install-banner-copy strong { font-size:.9375rem; }
.pwa-install-banner-copy span { font-size:.8125rem; color:rgba(255,255,255,.70); line-height:1.45; }
.pwa-install-banner-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.pwa-install-primary,.pwa-install-secondary { border:none; border-radius:8px; padding:.5rem .875rem; font-size:.8125rem; font-weight:600; cursor:pointer; }
.pwa-install-primary { background:var(--color-accent); color:var(--color-primary); }
.pwa-install-secondary { background:rgba(255,255,255,.12); color:#fff; }
.pwa-install-banner[hidden] { display:none!important; }

@media(max-width:640px){
    .pwa-install-banner{left:1rem;right:1rem;bottom:1rem;width:auto;flex-direction:column;align-items:stretch}
    .pwa-install-banner-actions{justify-content:stretch}
    .pwa-install-primary,.pwa-install-secondary{flex:1}
}

/* ══════════════════════════════════════════════════════════
    STANDALONE LAYOUT (pages légales)
══════════════════════════════════════════════════════════ */

.standalone-body{background:var(--bg-secondary);min-height:100vh}
.standalone-header{background:var(--color-primary);padding:1rem 2rem;display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;z-index:110}
.standalone-header-inner{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.standalone-logo-link{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:#fff}
.standalone-logo-icon{font-size:1.4rem;color:var(--color-accent)}
.standalone-logo-text{font-family:var(--font-display);font-size:1.125rem}
.standalone-nav{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.standalone-nav-link{color:rgba(255,255,255,.8);text-decoration:none;font-size:.9rem;font-weight:500}
.standalone-nav-link:hover{color:#fff}
.standalone-header-actions{display:flex;align-items:center;gap:.75rem}
.standalone-header-btn,.standalone-install-btn,.standalone-menu-btn{border-radius:8px;font-weight:600;text-decoration:none;transition:all .2s ease;border:1px solid transparent}
.standalone-header-btn,.standalone-install-btn{display:inline-flex;align-items:center;justify-content:center;padding:.625rem 1rem;font-size:.875rem;cursor:pointer}
.standalone-header-btn-primary{background:#fff;color:var(--color-primary)}
.standalone-header-btn-primary:hover{background:var(--bg-secondary);color:var(--color-primary)}
.standalone-header-btn-secondary,.standalone-install-btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.standalone-header-btn-secondary:hover,.standalone-install-btn:hover{background:rgba(255,255,255,.1);color:#fff}
.standalone-menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;color:#fff;border-color:rgba(255,255,255,.3);cursor:pointer}
.standalone-mobile-menu{display:none;width:100%;max-width:1200px;margin:0 auto;background:rgba(12,21,36,.25);border-top:1px solid rgba(255,255,255,.1);padding-top:.5rem;flex-direction:column;gap:.25rem}
.standalone-mobile-menu.open{display:flex}
.standalone-mobile-link{color:#fff;text-decoration:none;font-size:.95rem;font-weight:600;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.standalone-mobile-actions{display:flex;flex-direction:column;gap:.75rem;padding:.75rem 0 .25rem}
.standalone-footer{text-align:center;padding:2rem;color:var(--text-muted);font-size:.85rem;border-top:1px solid var(--border-default);margin-top:3rem}
.standalone-footer-link{color:var(--color-accent)}

@media(max-width:900px){
    .standalone-header{padding:1rem}
    .standalone-nav,.standalone-header-btn,.standalone-install-btn{display:none}
    .standalone-menu-btn{display:inline-flex}
}

/* ══════════════════════════════════════════════════════════
    GRADIENT SUPPRESSION
══════════════════════════════════════════════════════════ */
.gradient-bg,[class*="gradient"]{background:var(--color-primary)!important;background-image:none!important}