@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ═══════════════════════════════════════════════════════════ */
/* DIGITAL-FIRST DESIGN SYSTEM — Portal                       */
/* ═══════════════════════════════════════════════════════════ */
:root {
    --ink:    #040E25;
    --navy:   #091B48;
    --elec:   #1A6CFF;
    --elec-h: #0550E0;
    --sky:    #EDF3FF;
    --sky-2:  #D6E7FF;
    --sky-3:  #B4CEFF;
    --r-pill: 100px;
    --ts:     .18s cubic-bezier(.4,0,.2,1);
}

body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ── Digital-First Nav ─────────────────────────────── */
header {
    background: var(--ink) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1030; height: 64px;
}
header nav.df-nav {
    display: flex; align-items: center;
    height: 64px; padding: 0 1.75rem;
    max-width: 1440px; margin: 0 auto; gap: 1rem;
}
.nav-logo {
    display: flex; align-items: center; gap: .6rem;
    text-decoration: none; flex-shrink: 0;
}
.nav-logo img { height: 38px; width: auto; }
.nav-logo:hover { opacity: .82; }

.nav-back {
    display: flex; align-items: center; gap: .35rem;
    background: transparent; border: none;
    color: rgba(255,255,255,.55); font-size: .83rem; font-weight: 500;
    cursor: pointer; font-family: inherit; flex-shrink: 0;
    padding: .45rem .7rem; border-radius: 6px;
    transition: all var(--ts); text-decoration: none;
}
.nav-back:hover { color: #fff; background: rgba(255,255,255,.08); }

.nav-btn-icon {
    width: 34px; height: 34px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.72); text-decoration: none;
    transition: all var(--ts);
}
.nav-btn-icon:hover { background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.3); }

.nav-center {
    display: flex; align-items: center;
    gap: .1rem; flex: 1; justify-content: center;
}
.nav-center > a, .nav-center .nav-drop-btn {
    color: rgba(255,255,255,.72); font-size: .875rem;
    font-weight: 500; padding: .45rem .85rem;
    border-radius: 6px; text-decoration: none;
    border: none; background: transparent;
    transition: all var(--ts); cursor: pointer;
    font-family: inherit;
}
.nav-center > a:hover, .nav-center .nav-drop-btn:hover {
    color: #fff; background: rgba(255,255,255,.08);
}
.nav-center .dropdown-menu {
    background: var(--navy); border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px; padding: .5rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    min-width: 200px;
}
.nav-center .dropdown-item {
    color: rgba(255,255,255,.78); border-radius: 6px;
    padding: .55rem .85rem; font-size: .875rem;
}
.nav-center .dropdown-item:hover {
    background: rgba(255,255,255,.08); color: #fff;
}
.nav-center .dropdown-divider { border-color: rgba(255,255,255,.1); }

.nav-end {
    display: flex; align-items: center;
    gap: .6rem; flex-shrink: 0;
    margin-left: auto;
}
.btn-nav-fill {
    background: var(--elec); color: #fff;
    border: none; border-radius: var(--r-pill);
    padding: .5rem 1.25rem; font-size: .84rem;
    font-weight: 600; cursor: pointer; font-family: inherit;
    transition: all var(--ts); text-decoration: none;
    display: inline-flex; align-items: center;
}
.btn-nav-fill:hover { background: var(--elec-h); color: #fff; transform: translateY(-1px); }
.btn-nav-outline {
    background: transparent; color: rgba(255,255,255,.85);
    border: 1.5px solid rgba(255,255,255,.3);
    border-radius: var(--r-pill); padding: .48rem 1.15rem;
    font-size: .84rem; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: all var(--ts);
    text-decoration: none; display: inline-flex; align-items: center;
}
.btn-nav-outline:hover {
    border-color: rgba(255,255,255,.7); color: #fff;
    background: rgba(255,255,255,.07);
}
.btn-nav-text {
    color: rgba(255,255,255,.72); font-size: .84rem;
    font-weight: 500; background: none; border: none;
    cursor: pointer; font-family: inherit;
    text-decoration: none; padding: .45rem .7rem;
    border-radius: 6px; transition: all var(--ts);
    display: inline-flex; align-items: center;
}
.btn-nav-text:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-burger {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px; cursor: pointer; color: #fff;
}
.nav-burger:hover { background: rgba(255,255,255,.14); }

/* Mobile nav offcanvas dark theme */
#offcanvasMenu { background: var(--navy) !important; }
#offcanvasMenu .offcanvas-header { background: rgba(0,0,0,.2) !important; border-color: rgba(255,255,255,.1) !important; }
#offcanvasMenu .offcanvas-title { color: #fff !important; }
#offcanvasMenu .btn-close { filter: invert(1) brightness(1.5); }
#offcanvasMenu .nav-link { color: rgba(255,255,255,.8) !important; }
#offcanvasMenu .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; border-radius: 6px; }
#offcanvasMenu .btn { font-family: 'Inter', sans-serif; margin-top: .5rem; }
#offcanvasMenu .btn-primary { background: var(--elec); border-color: var(--elec); border-radius: var(--r-pill); }
#offcanvasMenu .btn-outline-primary { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); border-radius: var(--r-pill); }
#offcanvasMenu .btn-outline-primary:hover { background: rgba(255,255,255,.08); }
#offcanvasMenu .fw-bold { color: rgba(255,255,255,.4) !important; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── Digital-First Hero ────────────────────────────── */
.hero {
    background-color: var(--ink, #040E25);
    background-image:
        linear-gradient(160deg, rgba(4,14,37,.82) 0%, rgba(4,14,37,.55) 55%, rgba(4,14,37,.72) 100%),
        url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1400&h=600&fit=crop&q=80');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 7rem 2rem 5.5rem;
    min-height: 460px;
    display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end;
    position: relative; overflow: hidden;
    margin-bottom: 0;
}
.hero::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 80px;
    background: linear-gradient(to bottom, transparent, #fff);
    pointer-events: none; z-index: 0;
}
.hero-inner {
    max-width: 1320px; width: 100%; margin: 0 auto;
    position: relative; z-index: 1;
}
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(26,108,255,.25); border: 1px solid rgba(26,108,255,.4);
    color: #90b8ff; font-size: .78rem; font-weight: 600;
    padding: .35rem 1rem; border-radius: var(--r-pill);
    letter-spacing: .05em; text-transform: uppercase;
    margin-bottom: 1.1rem;
}
.hero-title {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 900; line-height: 1.08;
    letter-spacing: -.03em; color: #fff;
    text-transform: uppercase;
    margin-bottom: .8rem;
}
.hero-sub {
    font-size: 1.05rem; color: rgba(255,255,255,.75);
    max-width: 540px; line-height: 1.55; margin-bottom: 1.8rem;
    font-weight: 400;
}
.hero-actions {
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    margin-bottom: 0;
}
.btn-hero {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--elec); color: #fff;
    border: none; border-radius: var(--r-pill);
    padding: .88rem 2.25rem; font-size: .9375rem; font-weight: 700;
    cursor: pointer; text-decoration: none; font-family: inherit;
    transition: all var(--ts); box-shadow: 0 4px 24px rgba(26,108,255,.5);
}
.btn-hero:hover { background: var(--elec-h); transform: translateY(-2px); color: #fff; }
.btn-hero-outline {
    display: inline-flex; align-items: center;
    background: transparent; color: #fff;
    border: 1.5px solid rgba(255,255,255,.4);
    border-radius: var(--r-pill); padding: .86rem 2rem;
    font-size: .9375rem; font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none; transition: all var(--ts);
}
.btn-hero-outline:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.7); color: #fff; }
.hero-stats {
    display: flex; gap: 2rem; flex-wrap: wrap;
    margin-top: 2rem;
    border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 1.5rem;
}
.hero-stat { display: flex; flex-direction: column; gap: .15rem; }
.hero-stat strong { font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.hero-stat span { font-size: .775rem; color: rgba(255,255,255,.6); font-weight: 400; text-transform: uppercase; letter-spacing: .06em; }

/* Welcome hero (logged-in variant) */
.hero-welcome .hero-title { text-transform: none; font-size: clamp(1.7rem,3.5vw,2.8rem); }

/* ── Digital-First Footer ──────────────────────────── */
footer.df-footer {
    background: var(--ink); color: rgba(255,255,255,.55);
    border-top: 3px solid var(--elec);
    padding: 1.5rem 2rem;
    font-size: .84rem; text-align: center;
    margin-top: 0;
}
footer.df-footer a { color: rgba(255,255,255,.55); text-decoration: none; }
footer.df-footer a:hover { color: #fff; }

/* ==================== VARIABLES ==================== */
:root {
    --primary: #0066cc;
    --primary-dark: #0052a3;
    --primary-light: #1a7aff;
    --neutral-50: #fafbfc;
    --neutral-100: #f5f6f8;
    --neutral-200: #eaeef2;
    --neutral-300: #d9dfe7;
    --neutral-400: #8b95a7;
    --neutral-500: #6b7684;
    --neutral-600: #4a5568;
    --neutral-700: #2d3748;
    --neutral-900: #1a202c;
    --success: #1f8449;
    --warning: #f59e0b;
    --danger: #dc2626;
    --border-radius: 3px;
    --transition: all 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════ */
/* PORTAL ACCUEIL COMPONENTS                                  */
/* ═══════════════════════════════════════════════════════════ */

/* Section title */
.wp-section-title {
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em;
    color: var(--neutral-500, #6b7684);
    margin-bottom: 1rem;
    display: flex; align-items: center; gap: .5rem;
}
.wp-section-title::before {
    content: ''; display: inline-block;
    width: 16px; height: 3px;
    background: var(--elec, #1A6CFF); border-radius: 2px;
}
.wp-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1rem;
}
.wp-section-action {
    font-size: .8rem; font-weight: 600; color: var(--elec);
    text-decoration: none;
}
.wp-section-action:hover { text-decoration: underline; }

/* Quick action cards */
.wp-actions { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: 2rem; }
.wp-action-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border: 1px solid var(--neutral-200, #eaeef2);
    border-radius: 10px; padding: 1.2rem 1.1rem;
    text-decoration: none; color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .15s;
}
.wp-action-card:hover {
    border-color: var(--elec); box-shadow: 0 4px 16px rgba(26,108,255,.1);
    transform: translateY(-2px); color: inherit;
}
.wp-action-icon {
    width: 44px; height: 44px; min-width: 44px;
    border-radius: 10px; display: flex; align-items: center;
    justify-content: center; font-size: 1.3rem;
}
.wp-action-card h3 { font-size: .93rem; font-weight: 700; margin-bottom: .15rem; color: var(--neutral-900, #1a202c); }
.wp-action-card p { font-size: .8rem; color: var(--neutral-500, #6b7684); margin: 0; line-height: 1.4; }
.wp-action-arrow { margin-left: auto; color: var(--neutral-300, #d9dfe7); font-size: 1.2rem; transition: .18s; }
.wp-action-card:hover .wp-action-arrow { transform: translateX(3px); color: var(--elec); }

/* Admin cards grid */
.wp-admin-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: .8rem; margin-bottom: 2rem;
}
.wp-admin-card {
    display: flex; flex-direction: column; gap: .35rem;
    background: #fff; border: 1px solid var(--neutral-200, #eaeef2);
    border-radius: 10px; padding: 1.15rem 1rem;
    text-decoration: none; color: inherit;
    transition: border-color .18s, box-shadow .18s, transform .15s;
}
.wp-admin-card:hover {
    border-color: var(--elec); box-shadow: 0 4px 14px rgba(26,108,255,.1);
    transform: translateY(-2px); color: inherit;
}
.wp-admin-card h4 { font-size: .86rem; font-weight: 700; margin: 0; color: var(--neutral-900, #1a202c); }
.wp-admin-card p { font-size: .77rem; color: var(--neutral-500, #6b7684); margin: 0; line-height: 1.4; }

/* E-learning modules list */
.wp-modules-grid { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 2rem; }
.wp-module-row {
    display: flex; align-items: center; gap: .9rem;
    background: #fff; border: 1px solid var(--neutral-200, #eaeef2);
    border-radius: 8px; padding: .75rem 1rem;
}
.wp-module-icon { font-size: 1.3rem; flex-shrink: 0; }
.wp-module-info { flex: 1; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.wp-module-info strong { font-size: .88rem; color: var(--neutral-900, #1a202c); }
.wp-module-status {
    font-size: .7rem; font-weight: 700; padding: .2rem .55rem;
    border-radius: 99px; text-transform: uppercase; letter-spacing: .05em;
}
.wp-module-status.active { background: rgba(31,132,73,.1); color: #156b35; }
.wp-module-status.draft { background: rgba(245,158,11,.12); color: #92400e; }
.wp-module-actions { display: flex; gap: .4rem; flex-shrink: 0; }
.wp-mod-btn {
    width: 30px; height: 30px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: .95rem; text-decoration: none;
    background: var(--neutral-100, #f5f6f8);
    transition: background .15s;
}
.wp-mod-btn:hover { background: var(--neutral-200, #eaeef2); }
.wp-module-new {
    display: flex; align-items: center; gap: .6rem;
    border: 1.5px dashed var(--neutral-300, #d9dfe7);
    border-radius: 8px; padding: .7rem 1rem;
    color: var(--neutral-500, #6b7684); font-size: .85rem;
    font-weight: 600; text-decoration: none; transition: .18s;
}
.wp-module-new:hover { border-color: var(--elec); color: var(--elec); }
.wp-module-new span { font-size: 1.1rem; }

/* News cards */
.wp-news-card {
    display: flex; gap: 1rem; background: #fff;
    border: 1px solid var(--neutral-200, #eaeef2);
    border-radius: 10px; overflow: hidden;
    transition: box-shadow .18s, border-color .18s;
    margin-bottom: .8rem;
}
.wp-news-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.07); border-color: var(--neutral-300, #d9dfe7); }
.wp-news-thumb { width: 120px; min-width: 120px; }
.wp-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-news-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.wp-news-body h5 { font-size: .9rem; font-weight: 700; color: var(--neutral-900, #1a202c); margin-bottom: .3rem; line-height: 1.35; }
.wp-news-body p { font-size: .81rem; color: var(--neutral-600, #4a5568); margin: 0 0 .6rem; line-height: 1.5; }
.wp-news-meta { font-size: .75rem; color: var(--neutral-400, #8b95a7); }

/* Sidebar */
.wp-sidebar-card { background: #fff; border: 1px solid var(--neutral-200, #eaeef2); border-radius: 10px; overflow: hidden; }
.wp-sidebar-head { background: var(--ink, #040E25); padding: .7rem 1rem; }
.wp-sidebar-head h5 { font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.9); margin: 0; text-transform: uppercase; letter-spacing: .07em; }
.wp-sidebar-item {
    display: flex; gap: .7rem; align-items: center;
    padding: .65rem 1rem; border-bottom: 1px solid var(--neutral-200, #eaeef2);
    text-decoration: none; color: inherit; transition: background .15s;
}
.wp-sidebar-item:last-child { border-bottom: none; }
.wp-sidebar-item:hover { background: var(--neutral-50, #fafbfc); }
.wp-sidebar-thumb { width: 48px; height: 36px; border-radius: 4px; overflow: hidden; flex-shrink: 0; }
.wp-sidebar-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wp-sidebar-title { font-size: .81rem; font-weight: 600; color: var(--neutral-700, #2d3748); line-height: 1.3; }
.wp-sidebar-date { font-size: .72rem; color: var(--neutral-400, #8b95a7); }

/* Empty state */
.wp-empty {
    padding: 2rem 1.5rem; text-align: center;
    border: 1px dashed var(--neutral-300, #d9dfe7);
    border-radius: 10px; color: var(--neutral-400, #8b95a7); font-size: .88rem;
}

/* ==================== RESET & BASE ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: #ffffff;
    color: var(--neutral-700);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 64px;
    font-size: 14px;
}

body.wipseemobile-page {
    padding-top: 64px;
}

/* ==================== NAVIGATION (Bootstrap fallback for inner pages) ==================== */
.nav-tabs .nav-link {
    color: var(--neutral-600) !important;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    padding: 0.5rem 1rem !important;
}
.nav-tabs .nav-link:hover { color: var(--primary) !important; }
.nav-tabs .nav-link.active { color: var(--primary) !important; }

/* ==================== MAIN ==================== */
main {
    flex: 1;
    padding: 0 0 2rem;
    background-color: #ffffff;
}

main > .container {
    max-width: 1200px;
}

/* ==================== FOOTER ==================== */
footer {
    background-color: var(--neutral-100);
    color: var(--neutral-700);
    border-top: 1px solid var(--neutral-200);
    margin-top: auto;
    flex-shrink: 0;
    padding: 2.5rem 0 1rem;
}

footer a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

footer a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

/* ==================== BUTTONS ==================== */
.btn {
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    border: 1px solid transparent;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
}

.btn:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-primary:active {
    background-color: #003d7a;
}

.btn-outline-primary {
    color: var(--primary);
    border: 1px solid var(--primary);
    background-color: white;
}

.btn-outline-primary:hover {
    background-color: #f0f4f9;
    border-color: var(--primary-dark);
    color: var(--primary-dark);
}

.btn-success {
    background-color: var(--success);
    color: white;
    border-color: var(--success);
}

.btn-success:hover {
    background-color: #156b35;
    border-color: #156b35;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 0.8rem 2rem;
    font-size: 0.95rem;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== FORMS ==================== */
.form-control,
.form-select {
    border-radius: 3px;
    border: 1px solid var(--neutral-300);
    background-color: #ffffff;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    transition: var(--transition);
    color: var(--neutral-700);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
    outline: none;
    background-color: #ffffff;
}

.form-control::placeholder {
    color: var(--neutral-400);
}

.form-label {
    font-weight: 600;
    color: var(--neutral-700);
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}

.form-check-input {
    border-radius: 2px;
    border: 1px solid var(--neutral-300);
    cursor: pointer;
    width: 1rem;
    height: 1rem;
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}

/* ==================== CARDS ==================== */
.card {
    border: 1px solid var(--neutral-200);
    border-radius: 3px;
    box-shadow: none;
    background-color: #ffffff;
    transition: var(--transition);
    overflow: hidden;
}

.card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: var(--neutral-300);
}

.card-header {
    background-color: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    padding: 1rem 1.2rem;
    font-weight: 600;
    color: var(--neutral-900);
    font-size: 0.95rem;
}

.card-body {
    padding: 1.5rem;
    color: var(--neutral-700);
}

.card-title {
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}

.card-text {
    color: var(--neutral-600);
    font-size: 0.9rem;
}

/* ==================== ALERTS ==================== */
.alert {
    border-radius: 3px;
    border: 1px solid;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-success {
    background-color: #f0f9f4;
    color: #155724;
    border-color: #d4f0db;
}

.alert-info {
    background-color: #f0f7ff;
    color: #0c4a6e;
    border-color: #d0e1f5;
}

.alert-warning {
    background-color: #fffbf0;
    color: #7f5a1f;
    border-color: #fde8bb;
}

.alert-danger {
    background-color: #fff5f5;
    color: #7f1d1d;
    border-color: #f5b7b1;
}

/* ==================== MODALS ==================== */
.modal-content {
    border-radius: 3px;
    border: 1px solid var(--neutral-200);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    background-color: #ffffff;
}

.modal-header {
    background-color: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
    padding: 1.25rem;
}

.modal-title {
    font-weight: 700;
    color: var(--neutral-900);
    font-size: 1.05rem;
}

.modal-body {
    padding: 1.5rem;
    color: var(--neutral-700);
}

.modal-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--neutral-200);
    padding: 1rem 1.25rem;
}

.btn-close {
    opacity: 0.5;
    transition: var(--transition);
    width: 1.5rem;
    height: 1.5rem;
}

.btn-close:hover {
    opacity: 0.8;
}

/* ==================== TABS ==================== */
.nav-tabs {
    border-bottom: 1px solid var(--neutral-200);
    gap: 0;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--neutral-600) !important;
    padding: 0.75rem 1.25rem !important;
    margin-bottom: -1px;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: transparent;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: var(--neutral-300);
    color: var(--primary) !important;
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--primary);
    color: var(--primary) !important;
    background-color: transparent;
    font-weight: 700;
}

.tab-content {
    color: var(--neutral-700);
    padding-top: 1rem;
}

/* ==================== HEADINGS ==================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--neutral-900);
    margin-bottom: 1rem;
    line-height: 1.3;
}

h1 {
    font-size: 2rem;
    letter-spacing: -0.5px;
}

h2 {
    font-size: 1.6rem;
    letter-spacing: -0.3px;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.1rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.95rem;
}

.lead {
    font-size: 1.05rem;
    color: var(--neutral-600);
    font-weight: 500;
}

/* ==================== TEXT UTILITIES ==================== */
.text-muted {
    color: var(--neutral-500) !important;
}

.text-center {
    text-align: center;
}

.text-decoration-none {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

.text-decoration-none:hover {
    color: var(--primary);
}

/* ==================== UTILITIES ==================== */
.bg-light {
    background-color: var(--neutral-100) !important;
    border-radius: 3px;
}

.bg-dark {
    background-color: var(--neutral-900) !important;
    color: white;
}

.bg-secondary {
    background-color: var(--neutral-500) !important;
    color: white;
}

.border-0 {
    border: none !important;
}

.fw-bold {
    font-weight: 700;
}

.small {
    font-size: 0.85rem;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.mt-5 { margin-top: 3rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-3 { margin-top: 1rem !important; }

.p-3 { padding: 1rem !important; }
.p-5 { padding: 3rem !important; }

.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }

.ps-4 { padding-left: 1.5rem !important; }

.ms-2 { margin-left: 0.5rem !important; }
.ms-auto { margin-left: auto !important; }

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

/* ==================== LIST GROUPS ==================== */
.list-group {
    border-radius: 3px;
    border: 1px solid var(--neutral-200);
    overflow: hidden;
}

.list-group-item {
    border: none;
    border-bottom: 1px solid var(--neutral-200);
    color: var(--neutral-700);
    padding: 0.9rem 1rem;
    transition: var(--transition);
    font-size: 0.9rem;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--neutral-100);
    color: var(--primary);
}

/* ==================== IMAGES ==================== */
.img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 3px;
}

.rounded-start {
    border-radius: 3px 0 0 3px;
}

/* ==================== OFFCANVAS ==================== */
.offcanvas {
    background-color: #ffffff;
}

.offcanvas-header {
    background-color: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.offcanvas-title {
    font-weight: 700;
    color: var(--neutral-900);
}

.offcanvas-body {
    padding: 1rem;
}

/* ==================== BADGES ==================== */
.badge {
    border-radius: 2px;
    padding: 0.35rem 0.65rem;
    font-weight: 600;
    font-size: 0.8rem;
}

.badge-primary {
    background-color: var(--primary);
    color: white;
}

.badge-success {
    background-color: var(--success);
    color: white;
}

/* ==================== DROPDOWN ==================== */
.dropdown-menu {
    border: 1px solid var(--neutral-200);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.5rem 0;
    background-color: #ffffff;
}

.dropdown-item {
    color: var(--neutral-700);
    transition: var(--transition);
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: var(--neutral-100);
    color: var(--primary);
}

.dropdown-item.active {
    background-color: var(--primary);
    color: white;
}

.dropdown-divider {
    background-color: var(--neutral-200);
    margin: 0.4rem 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
    body {
        padding-top: 64px;
        font-size: 13px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    main {
        padding: 1rem 0;
    }

    .card-body {
        padding: 1rem;
    }

    .p-5 {
        padding: 1.5rem !important;
    }

    .card:hover {
        transform: none;
    }

    /* Header mobile: toujours opaque blanc */
    header {
        background-color: #ffffff;
        border-bottom: 1px solid #eaeef2;
    }

    /* Navbar mobile: affiche seulement le logo et le bouton menu */
    header .navbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    header .container-fluid {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
}

@media (max-width: 576px) {
    body {
        font-size: 13px;
    }

    h1 {
        font-size: 1.3rem;
    }

    h2 {
        font-size: 1.1rem;
    }

    .container {
        padding: 0 1rem;
    }

    .btn {
        padding: 0.55rem 1rem;
        font-size: 0.85rem;
    }

    .btn-lg {
        padding: 0.7rem 1.5rem;
        font-size: 0.9rem;
    }
}

/* ==================== UTILITY CLASSES ==================== */
.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.g-0 {
    gap: 0 !important;
}

.g-2 {
    gap: 0.5rem !important;
}

/*
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡔⣢⣾⣶⣷⣞⢶⡖⢦⠐⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⣏⣻⣜⣓⢏⡾⣱⢫⢾⡱⣛⡞⣷⢫⢿⡝⣯⢟⡿⣽⣿⣻⣿⣿⣿⣿⣿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠈⠷⣛⠻⠋⠞⠣⠛⠀⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢘⠾⣑⠮⡙⢾⡸⢧⠛⠢⢍⡷⣹⢎⣟⢮⠿⣭⣟⣿⡽⣾⢷⣯⣷⣿⣾⣿⣼
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣻⣶⣶⣝⣿⣿⣱⣶⡆⠀⠀⠀⠀⣶⣶⠀⠀⠀⠀⠀⢀⣴⣶⠾⢶⣶⣄⠀⣶⣶⠀⠀⣶⣶⠀⣶⣶⠀⣶⣶⠶⠶⠶⠆⠲⠶⣶⣶⠶⠶⠀⠀⢠⣴⣶⠾⢶⣶⣅⠂⣶⡶⣦⡡⠁⣶⣶⠸⡜⣇⢿⡸⢎⡿⡱⣞⢧⣟⣟⡯⣟⣷⣯⣷⡿⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⣵⣿⣣⣝⣿⣮⢿⢸⣿⡇⠀⠀⠀⠀⣿⣿⠀⠀⠀⠀⠀⢸⣿⣇⠀⣀⣹⣿⠃⣿⣿⠀⢀⣿⣿⠀⣿⣿⠀⣿⣿⠒⠒⠒⠀⠀⠀⣿⣿⠀⠀⠀⠀⢺⣿⣇⠀⢀⣿⣿⠀⣿⣿⠙⢿⣆⣿⣿⠨⢵⠩⣆⠹⢌⠲⡙⣜⢺⠞⣮⢽⣻⣞⣷⣻⣟⣿
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⣾⣟⣭⣿⣯⣝⣿⣏⣸⠛⠛⠛⠛⠛⠀⠟⠛⠛⠛⠛⠃⠀⠀⠙⠛⠿⠿⠿⠏⠀⠘⠛⠿⠿⠛⠁⠀⠛⠛⠀⠛⠛⠻⠛⠟⠛⠀⠀⠛⠛⠂⠀⠀⠀⠀⠛⠻⠿⠟⠛⣁⠐⠟⡛⢠⢠⠛⡟⢻⠐⡡⢃⠄⠣⢈⠂⡱⢈⢣⡛⡬⢯⣳⢏⣾⢷⣻⣾
⡻⢏⢏⠣⢍⠫⡽⣻⣿⣟⣾⣟⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢪⠝⠌⡑⢣⠮⡝⢮⡑⢎⡐⠡⢈⠂⠡⢈⠤⡁⠦⢉⠶⠹⣜⢯⢞⣭⡷⣯
⢹⢊⡄⠃⠄⡑⡐⢣⣛⡾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⣤⣋⢾⡩⢇⡹⠠⠄⡁⠂⠀⠀⠂⡐⠠⡑⠨⢌⠳⣘⢮⣛⣾⣹⣻
⣳⡌⠤⢁⠂⡐⠠⠡⢌⡳⣛⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣀⠄⢰⡆⢴⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢓⢦⡹⢦⡝⢎⠴⢁⠂⠐⡀⠂⢀⠂⠌⡁⠰⢁⠊⠴⣉⠞⣼⢲⣳⡽
⣿⣾⣱⢊⠔⡠⢁⠎⡰⣱⢯⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⠀⠀⠀⠀⣦⡀⠀⠀⠀⢀⠀⣿⡿⢋⣴⠃⠀⠀⢈⣐⢠⡄⠀⠁⠀⢀⣀⠀⠀⢠⠖⣂⠀⠀⠨⡍⢿⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠶⣙⢶⡹⢌⢂⠂⡌⠐⡀⠐⡀⠂⡐⠄⣁⠢⢉⠆⡥⢛⡰⣏⢷⣹
⣿⣿⣿⣯⣖⡡⢢⢌⡱⣭⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⠀⠀⠀⠀⠀⠀⠀⠘⣷⢠⣴⣶⣷⠀⣧⣳⣨⠙⣃⣈⣀⣚⣋⣸⡗⠀⢀⠰⣿⣿⣦⠀⢺⣘⠃⡀⢂⣀⢭⣠⡿⡃⢰⣷⣦⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⡝⣦⢝⠪⣌⠣⣌⡱⢄⡡⢠⠁⡄⢂⠄⠒⡌⢦⡑⢮⡱⢞⢮⡵
⣿⣿⣿⣿⣿⡶⡡⢎⡔⣣⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣟⣀⢀⣀⣀⣀⣀⣀⣀⡀⠀⠈⠸⣿⣿⣷⣤⣤⣤⣉⣉⣉⣉⣈⠁⣀⣀⣁⠀⠈⣸⣿⣿⣿⠄⠐⠽⠞⠒⠛⠒⠚⠛⠚⠃⢸⣿⣿⡇⠀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⡼⣎⡱⢌⠳⣌⠳⢥⡒⢡⢊⠰⡁⢎⠱⢘⢄⡚⣆⢯⣙⢮⣳
⣿⣿⣿⣿⣿⣿⡱⢎⡼⣱⣻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⡄⠀⠈⢿⣿⣿⣿⣿⣿⣿⣿⣯⣤⣶⣾⣿⣿⡟⠀⢠⣿⣿⣿⣿⡇⢳⣶⣶⣶⣦⣤⣴⣴⣾⣾⣿⣿⣿⡇⠐⠠⢁⠀⠀⠀⠀⠀⠀⠀⡐⡲⣖⢿⡶⣁⠎⠰⢈⠑⢢⠉⡔⠈⡔⠩⢄⠃⢎⡰⢘⡌⠷⣎⡧⢯
⣿⣿⣿⣿⣿⣿⣿⣳⢾⣵⣻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣆⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠇⣀⣿⣿⣿⣿⣿⣗⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⡁⠂⠀⠠⠀⠀⠀⠀⠀⢰⡙⣾⢯⢿⡝⣮⠐⡄⠨⢀⠃⠄⣁⠂⠡⠂⠜⢠⢂⠣⢜⠳⡎⣵⢫
⣿⣿⣿⣿⣿⣿⣿⣿⣟⣮⠳⢭⢻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠙⣿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠁⣸⣼⣿⣿⣿⣿⣿⣿⡜⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠁⠐⠀⠀⠄⠀⡀⢀⠠⠀⡄⢣⠞⡵⠋⠎⡽⡲⡝⠤⢃⠆⡈⠐⡀⠈⠄⠡⠈⠄⠂⠍⢢⠵⣙⢦⢋
⣿⣿⣿⣿⣿⣿⣿⣿⣟⢦⢋⡌⢣⢚⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⡀⠀⠘⣿⣿⣿⣿⣿⣿⣿⠟⠁⠀⠉⠁⠈⠉⠉⠉⠉⠉⠁⠘⢿⣿⣿⣿⣿⣿⣿⣿⣿⡟⠉⠀⠀⠂⠀⢀⠂⠔⠠⢂⠱⡈⢇⡉⠀⠀⢈⠶⡱⢍⠚⡄⠂⠄⢁⠀⠄⠂⠀⠁⠀⠈⠀⢡⠒⡭⡒⢭
⣿⣿⣿⣿⣿⣿⣿⣿⣿⢎⡒⠬⡑⢪⠼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡀⠐⡀⠀⠈⠻⢿⣿⣿⠟⣡⡠⠒⠗⠒⢒⣂⣠⣠⡀⣀⣀⡈⠥⠬⠵⠽⢬⣝⢿⣿⣿⠟⠀⠀⠀⠀⠀⠀⠀⠈⠠⠑⡈⢢⠑⢌⠰⡁⠰⡈⠖⣉⠎⡒⠄⠡⠈⠀⠀⡀⠠⠐⠀⠀⠀⠀⡴⢩⠔⡙⢦
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡘⢆⡉⠦⡙⡽⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⠀⠙⣆⠀⠀⠀⣩⠴⠛⢁⣠⣴⣶⢿⣟⡻⢽⣓⣳⢵⡿⠿⠛⢟⣲⠶⢦⣬⣤⣤⣥⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠠⠐⠂⠜⡀⠣⠌⢡⠘⠤⢁⠊⠤⠁⠀⠀⠠⠀⠀⠀⠀⠠⠐⠠⠑⢢⢃⢎⡹⢄
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡛⡆⠰⢀⠳⢘⡻⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣇⠀⠘⠇⣰⣾⠇⣰⣶⡘⣃⡶⠆⠛⠃⠀⢀⣀⣀⣶⣶⣆⠟⢰⡆⡆⠘⠛⠛⠛⠻⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⠘⢀⠃⠰⢃⠘⡀⠆⠰⢀⠃⠆⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠆⠃⠆⢇⡘⡆⢇
⣿⣿⣿⣿⣿⣿⣿⣿⣿⠷⡑⡈⠄⠀⠐⡀⢣⢟⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⣽⣯⡟⡽⡆⠠⣘⠛⠂⢀⣻⠟⠃⠀⠀⢀⡄⡴⢹⠼⣿⣿⣿⣿⡞⢀⢸⠇⠓⣸⣿⣷⣦⣄⡈⢢⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠀⠠⠀⠀⠁⡀⠠⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠐⢈⠘⠤⡑⣘⠢
⣿⣿⣿⣿⣿⣿⣿⣿⣋⠓⠄⡀⠀⠀⠀⠐⢠⢋⡿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢿⡽⣯⢷⣫⠞⠁⠀⢐⠆⣴⡷⢸⠋⠀⠰⡶⢏⣼⡿⠿⢑⠊⠉⠉⠉⠉⠀⠀⠈⠀⠁⢿⢿⣿⣿⣿⣿⣦⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠄⢂⠘⠤⡑⢄⠣
⢿⣽⣟⣿⡿⣿⣳⢧⢣⠉⡀⠀⠀⠀⠀⠈⠀⢎⡹⣛⣿⡿⣿⡿⣟⡿⡽⡞⣏⡳⡝⠎⠀⠀⠀⣤⠀⠈⠙⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠈⠀⠀⠐⠤⢤⢠⠀⠀⠀⠈⠁⣟⣻⠟⣻⡽⣷⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡀⠂⠄⢊⠰⢈⠆⠒
⢹⠞⡽⣺⢽⡳⣛⠎⡅⢂⠀⠀⠀⠀⠀⠀⠁⠂⠴⣙⢮⣛⠷⡻⣍⠳⣍⠳⡌⠑⠈⠀⠀⠀⣼⣿⠂⠄⠀⢀⡰⢌⣀⣤⣤⡦⠐⣂⠁⣤⠀⠀⢸⣷⣶⣤⣄⣀⠈⠀⠀⠀⠀⠀⠒⣻⠵⣜⠻⣿⣆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠠⠀⢀⠂⠌⡐⠨⠄⢊⠡
⢌⡹⣐⠣⢎⡱⢩⠘⠠⠀⠀⠀⠀⠀⠀⠀⠀⠁⠢⢑⠊⡌⢣⠑⡌⠱⠀⠃⠀⠀⠀⠀⠀⠀⠀⠀⠈⢀⠀⡞⢱⣿⡟⣩⣽⠖⢹⢃⠸⢿⡀⠠⠈⠋⠙⠫⠿⢯⣿⠳⠀⠄⠀⠀⠀⠈⠋⠨⢑⢸⣿⣦⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠀⢈⠐⠠⠁⠌⡀⠂
⢀⠒⠄⠃⢆⠰⠁⠌⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠂⠡⠈⠄⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡖⢀⢊⡴⠛⢋⡜⣉⠁⠀⡀⠃⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠓⠩⠀⠰⠀⠀⠀⠉⡔⡈⠦⡙⢧⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠂⠀⠀⠁
⠀⠌⠠⠁⠂⠠⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⠎⠠⡁⠆⠁⠼⣁⠞⡰⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⠁⠀⠀⠀⠀⠈⠠⢁⠠⡉⢖⡩⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠄⠐⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠋⠀⠰⠁⢠⢉⠒⡌⠒⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠂⠄⠐⠨⠐⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⢂⠀⠀⢁⠐⠂⠌⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠁⠂⠀⠀⠀⠌⠐⠈⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢠⣤⡄⠀⠀⣤⣤⠀⠀⢀⣤⣤⡄⠀⠀⢠⣤⣤⣤⣤⣤⡀⢠⣤⣤⣤⣤⣤⡀⢤⣤⣤⣤⣤⡄⢠⣤⣤⡀⠀⢠⣤⠀⣤⣤⠀⣤⣤⣄⠀⠀⣤⡄⠀⣠⣤⣶⣦⣤⡀⠀⠀⣤⣤⣤⣤⣤⡄⣤⣤⣤⣤⣤⣄⠀⢀⣤⣶⣶⣤⡀⠀⣤⣤⣄⠀⢠⣤⡄⢠⣤⣤⣤⣤⡄⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢸⣿⡷⠶⠶⣿⣿⠀⢠⣾⣟⣘⣿⣄⠀⢸⣿⣧⣤⣼⡿⠇⢸⣿⣧⣤⣼⡿⠇⢺⣿⠶⠶⠶⠀⢸⣿⡎⢿⣦⢸⣿⠀⣿⣿⠀⣿⣿⠙⣷⣄⣿⡇⢸⣿⡏⠀⠬⣭⡅⠀⠀⣽⣿⠶⠶⠶⠀⣿⣿⣤⣤⣾⡿⠃⣿⣟⠀⠀⣻⣿⠀⣿⣗⠻⣷⡸⣿⡇⠀⠀⣿⣿⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠸⠿⠇⠀⠀⠿⠿⠠⠿⠏⠉⠉⠙⠿⠦⠸⠿⠇⠀⠀⠀⠀⠸⠿⠃⠀⠀⠀⠀⠹⠿⠿⠿⠿⠇⠸⠿⠇⠀⠙⠿⠿⠀⠿⠿⠀⠿⠿⠀⠈⠻⠿⠇⠀⠛⠿⠿⠿⠛⠟⠀⠀⠻⠿⠀⠀⠀⠀⠿⠿⠀⠀⠹⠿⠄⠙⠻⠿⠿⠟⠋⠀⠿⠿⠀⠈⠻⠿⠇⠀⠀⠿⠿⠀⠀⠀⠀⠀⠀⠀
*/
/* ═══════════════════════════════════════════════════════════ */
/* ADMINISTRATION — Pages back-office (scopé sous .wp-admin)   */
/* Harmonise les pages admin avec le design system du portail. */
/* ═══════════════════════════════════════════════════════════ */
.wp-admin {
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ── En-tête de page ──────────────────────────────── */
.wp-admin-head { margin-bottom: 1.6rem; }
.wp-admin-back {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .8rem; font-weight: 600; color: var(--neutral-500);
    text-decoration: none; margin-bottom: .9rem;
    transition: color var(--ts);
}
.wp-admin-back:hover { color: var(--elec); }
.wp-admin-title {
    display: flex; align-items: center; gap: .6rem;
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em;
    color: var(--ink); margin: 0;
}
.wp-admin-title .wp-admin-emoji {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: var(--sky); font-size: 1.3rem;
}
.wp-admin-sub {
    font-size: .9rem; color: var(--neutral-500);
    margin: .5rem 0 0; padding-left: calc(42px + .6rem);
}

/* ── Panneau (carte générique) ────────────────────── */
.wp-admin-panel {
    background: #fff; border: 1px solid var(--neutral-200);
    border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 2px rgba(4,14,37,.04);
    margin-bottom: 1.5rem;
}
.wp-admin-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .95rem 1.25rem;
    border-bottom: 1px solid var(--neutral-200);
    background: var(--neutral-50);
}
.wp-admin-panel-head h2,
.wp-admin-panel-head h5,
.wp-admin-panel-head h6 {
    font-size: .92rem; font-weight: 700; color: var(--ink); margin: 0;
}
.wp-admin-panel-body { padding: 1.25rem; }
.wp-admin-toolbar { margin-bottom: 1.25rem; }
.wp-admin-count { font-size: .82rem; color: var(--neutral-500); }

/* ── Cartes Bootstrap réutilisées dans l'admin ──────── */
.wp-admin .card {
    border: 1px solid var(--neutral-200);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(4,14,37,.04);
    overflow: hidden;
}
.wp-admin .card-header {
    border-bottom: 1px solid var(--neutral-200);
    font-weight: 700; font-size: .92rem;
    padding: .95rem 1.25rem;
}
.wp-admin .card-header.bg-primary {
    background: var(--ink) !important; color: #fff !important;
}
.wp-admin .card-header.bg-info { background: var(--elec) !important; color: #fff !important; }
.wp-admin .card-header.bg-warning { background: var(--sky) !important; color: var(--ink) !important; }
.wp-admin .card-header.bg-light { background: var(--neutral-50) !important; color: var(--ink); }
.wp-admin .card-footer { background: var(--neutral-50); border-top: 1px solid var(--neutral-200); }

/* ── Tableaux ─────────────────────────────────────── */
.wp-admin .table-responsive {
    border: 1px solid var(--neutral-200);
    border-radius: 12px; overflow: hidden;
    background: #fff;
}
.wp-admin-panel .table-responsive,
.wp-admin .card .table-responsive { border: none; border-radius: 0; }
.wp-admin .table { margin: 0; color: var(--neutral-700); vertical-align: middle; }
.wp-admin .table > :not(caption) > * > * { padding: .8rem 1rem; }
.wp-admin .table thead th {
    background: var(--ink); color: rgba(255,255,255,.92);
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: none; white-space: nowrap;
}
.wp-admin .table thead.table-light th {
    background: var(--neutral-50); color: var(--neutral-500);
    border-bottom: 1px solid var(--neutral-200);
}
.wp-admin .table tbody td { border-top: 1px solid var(--neutral-200); font-size: .86rem; }
.wp-admin .table.table-striped > tbody > tr:nth-of-type(odd) > * { background: var(--neutral-50); }
.wp-admin .table.table-hover > tbody > tr:hover > * { background: var(--sky); }

/* ── Badges ───────────────────────────────────────── */
.wp-admin .badge {
    font-size: .72rem; font-weight: 700;
    padding: .35em .7em; border-radius: 99px; letter-spacing: .01em;
}
.wp-admin .badge.bg-primary   { background: var(--sky-2) !important; color: var(--elec-h) !important; }
.wp-admin .badge.bg-secondary { background: var(--neutral-200) !important; color: var(--neutral-700) !important; }
.wp-admin .badge.bg-success   { background: rgba(31,132,73,.12) !important; color: #156b35 !important; }
.wp-admin .badge.bg-warning   { background: rgba(245,158,11,.16) !important; color: #92400e !important; }
.wp-admin .badge.bg-danger    { background: rgba(220,38,38,.12) !important; color: #b91c1c !important; }
.wp-admin .badge.bg-info      { background: var(--sky-2) !important; color: var(--elec-h) !important; }

/* ── Boutons ──────────────────────────────────────── */
.wp-admin .btn { border-radius: 8px; font-weight: 600; transition: all var(--ts); }
.wp-admin .btn:hover { transform: translateY(-1px); }
.wp-admin .btn-primary { background: var(--elec); border-color: var(--elec); }
.wp-admin .btn-primary:hover { background: var(--elec-h); border-color: var(--elec-h); }
.wp-admin .btn-info { background: var(--elec); border-color: var(--elec); color: #fff; }
.wp-admin .btn-info:hover { background: var(--elec-h); border-color: var(--elec-h); color: #fff; }
.wp-admin .btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.wp-admin .btn-danger  { background: var(--danger); border-color: var(--danger); color: #fff; }
.wp-admin .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }
.wp-admin .btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.wp-admin .btn-warning:hover { background: #d98a08; border-color: #d98a08; color: #fff; }
.wp-admin .btn-secondary { background: var(--neutral-100); border-color: var(--neutral-200); color: var(--neutral-700); }
.wp-admin .btn-secondary:hover { background: var(--neutral-200); color: var(--ink); }
.wp-admin .btn-outline-primary { color: var(--elec); border-color: var(--elec); background: #fff; }
.wp-admin .btn-outline-primary:hover { background: var(--sky); color: var(--elec-h); }
.wp-admin .btn-outline-info { color: var(--elec); border-color: var(--sky-3); background: #fff; }
.wp-admin .btn-outline-info:hover { background: var(--sky); color: var(--elec-h); }
.wp-admin .btn-xs { padding: .25rem .6rem; font-size: .78rem; border-radius: 7px; }

/* ── Formulaires & modales ────────────────────────── */
.wp-admin .form-control, .wp-admin .form-select { border-radius: 8px; }
.wp-admin .input-group .form-control { border-radius: 0 8px 8px 0; }
.wp-admin .input-group-text {
    background: var(--neutral-50); border: 1px solid var(--neutral-300);
    border-radius: 8px 0 0 8px; color: var(--neutral-500);
}
.wp-admin .list-group-item { border-color: var(--neutral-200); font-size: .86rem; }
.wp-admin .alert { border-radius: 10px; }
.modal-content { border: none; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(4,14,37,.22); }
.modal-header { border-bottom: 1px solid var(--neutral-200); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-size: 1rem; font-weight: 700; color: var(--ink); }
.modal-footer { border-top: 1px solid var(--neutral-200); }

/* ── État vide ────────────────────────────────────── */
.wp-admin-empty {
    padding: 3rem 1.5rem; text-align: center;
    border: 1.5px dashed var(--neutral-300); border-radius: 12px;
    color: var(--neutral-400); font-size: .9rem; background: var(--neutral-50);
}
.wp-admin-empty .wp-admin-empty-icon { font-size: 2rem; display: block; margin-bottom: .5rem; }

@media (max-width: 576px) {
    .wp-admin { padding: 1.25rem 1rem 2rem; }
    .wp-admin-title { font-size: 1.25rem; }
    .wp-admin-sub { padding-left: 0; }
}

/* ── Lisibilité des titres dans les bandeaux colorés ──────────── */
/* Les règles globales h1..h6 fixent une couleur foncée qui écrase le */
/* blanc hérité d'un parent .text-white (ex. en-têtes de cartes,      */
/* bandeau « Vos informations personnelles » des formulaires).        */
.text-white,
.text-white h1, .text-white h2, .text-white h3,
.text-white h4, .text-white h5, .text-white h6 { color: #fff !important; }