:root {
    --blue: #2b4bf2;
    --blue-dark: #1a2e8c;
    --dark: #1a1a1a;
    --gray: #6b7280;
    --bg: #f5f6fa;
    --white: #fff;
    --red: #dc2626;
    --green: #16a34a;
    --orange: #ea580c;
    --navbar-bg: #166534;
    --navbar-bg: #166534;
}
html.theme-sombre {
    --dark: #e8e8e8;
    --gray: #9ca3af;
    --bg: #14161c;
    --white: #1e2129;
}
html.theme-sombre .panel,
html.theme-sombre .stat-card,
html.theme-sombre .form-card,
html.theme-sombre .data-table,
html.theme-sombre .auth-card {
    background: var(--white);
    color: var(--dark);
}
html.theme-sombre .data-table th { background: #262a35; color: var(--dark); }
html.theme-sombre .broadcast-target-all { background: #202844; border-color: var(--blue); }
html.theme-sombre .broadcast-ministere-grid { border-color: #3a3f4c; }
html.theme-sombre .broadcast-ministere-item:hover { background: #262a35; }
html.theme-sombre input, html.theme-sombre select, html.theme-sombre textarea {
    background: #262a35; color: var(--dark); border-color: #3a3f4c;
}
* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: var(--bg); color: var(--dark); }

.auth-page {
    position: relative;
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(120deg, #0d1650, #1a2e8c, #2b4bf2, #1a2e8c);
    background-size: 300% 300%;
    animation: authGradient 16s ease infinite;
    overflow: hidden;
}
@keyframes authGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.auth-bg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.auth-bg-orb {
    position: absolute; border-radius: 50%; filter: blur(2px);
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), rgba(255,255,255,0) 70%);
    animation: authOrbFloat linear infinite;
}
@keyframes authOrbFloat {
    0% { transform: translate(0,0) scale(1); }
    33% { transform: translate(30px,-40px) scale(1.08); }
    66% { transform: translate(-25px,20px) scale(.95); }
    100% { transform: translate(0,0) scale(1); }
}
.auth-lang { position: absolute; top: 22px; right: 26px; z-index: 5; }
.auth-card { position: relative; z-index: 2; background: var(--white); padding: 40px; border-radius: 16px; width: 380px; box-shadow: 0 20px 50px rgba(0,0,0,.25); animation: authCardIn .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes authCardIn {
    from { opacity: 0; transform: translateY(24px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.auth-logo { display: block; height: 40px; width: auto; margin: 0 0 20px; }
.auth-card h1 { margin: 0 0 4px; }
.auth-card h1 span { color: var(--blue); }
.subtitle { color: var(--gray); margin-bottom: 20px; font-size: 14px; }
.footer-note { font-size: 12px; color: var(--gray); text-align: center; margin-top: 20px; }

label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 13px; }
input, select, textarea { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
button { margin-top: 20px; width: 100%; background: var(--blue); color: #fff; border: none; padding: 12px; border-radius: 24px; font-weight: 700; cursor: pointer; }
button:hover { background: var(--blue-dark); }

.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-warning { background: #fef3c7; color: #92400e; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-info { background: #dbeafe; color: #1e40af; }

.navbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--navbar-bg); color: #fff; padding: 12px 24px;
    flex-wrap: nowrap;
    column-gap: 16px;
    position: relative;
}

.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo { height: 28px; width: auto; background: #fff; padding: 3px 6px; border-radius: 4px; }
.nav-brand-text { color: var(--blue); font-weight: 600; white-space: nowrap; }

/* Le bloc de liens ne casse plus jamais en plusieurs lignes : s'il ne
   rentre pas, il devient scrollable horizontalement (scrollbar cachée)
   au lieu de faire descendre des éléments en désordre. Cela garantit un
   rendu identique quel que soit le navigateur ou le niveau de zoom. */
.nav-links {
    display: flex; align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* Edge legacy */
}
.nav-links::-webkit-scrollbar { display: none; } /* Chrome / Safari / Edge */
.nav-links a { color: #ddd; margin-right: 18px; text-decoration: none; font-size: 13px; white-space: nowrap; flex-shrink: 0; }
.nav-links a:hover { color: #fff; }
.nav-user { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }

/* --- Hamburger : n'apparaît que sur petits écrans (vrais mobiles) --- */
.nav-burger {
    display: none;
    background: none; border: none; color: #fff; font-size: 22px;
    cursor: pointer; padding: 4px 8px; flex-shrink: 0; line-height: 1;
}

@media (max-width: 860px) {
    .navbar { flex-wrap: wrap; }
    .nav-burger { display: block; order: 1; }
    .nav-brand { order: 0; }
    .nav-user { order: 2; margin-left: auto; }
    .nav-links {
        order: 3;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        flex-direction: column;
        align-items: flex-start;
        white-space: normal;
        transition: max-height .2s ease;
    }
    .nav-links.is-open {
        max-height: 70vh;
        overflow-y: auto;
        margin-top: 10px;
    }
    .nav-links a { margin-right: 0; padding: 8px 0; width: 100%; }
}

.nav-avatar-img, .nav-avatar-placeholder {
    width: 30px; height: 30px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
}
.nav-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2b4bf2, #1a2e8c);
    color: #fff; font-weight: 600; font-size: 13px;
}

/* Petite photo de profil utilisée dans les tableaux (ex : liste des
   utilisateurs côté admin) : même logique que .nav-avatar-img mais un peu
   plus grande pour rester lisible dans une cellule de tableau. */
.table-avatar-img, .table-avatar-placeholder {
    width: 34px; height: 34px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; display: block;
}
.table-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2b4bf2, #1a2e8c);
    color: #fff; font-weight: 600; font-size: 13px;
}

.profile-card { max-width: 560px; }
.profile-card-header { display: flex; align-items: center; gap: 16px; }
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-img, .profile-avatar-placeholder {
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.15);
}
.profile-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #2b4bf2, #1a2e8c);
    color: #fff; font-weight: 700; font-size: 24px;
}
.profile-avatar-edit-btn {
    position: absolute; bottom: -2px; right: -2px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #2b4bf2; color: #fff; font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: 2px solid #fff;
}
.profile-card-identity h2 { margin: 0 0 2px 0; font-size: 17px; }
.profile-card-identity p { margin: 0 0 6px 0; font-size: 13px; }
.profile-card-divider { border: none; border-top: 1px solid rgba(0,0,0,.08); margin: 16px 0; }
.profile-card-form { display: flex; flex-direction: column; gap: 4px; }
.profile-card-form label { margin-top: 8px; font-size: 13px; font-weight: 600; }
.profile-card-meta { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.profile-card-password { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.link-danger-sm {
    background: none; border: none; color: #dc2626; font-size: 12px;
    text-decoration: underline; cursor: pointer; padding: 0; margin-left: 8px;
}

.nav-activity-link {
    color: #ddd !important;
    margin-right: 18px;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: normal;
    white-space: nowrap;
}
.nav-activity-link:hover {
    color: #fff !important;
    text-decoration: none !important;
}
.nav-activity-link:active {
    color: #fff !important;
}
.btn-logout {
    background: #dc3545; color: #fff !important;
    width: 34px; height: 34px; padding: 0;
    border-radius: 50%; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; line-height: 1; margin-left: 4px;
    white-space: nowrap; flex-shrink: 0;
}
.btn-theme-toggle {
    background: rgba(255,255,255,.1); color: #fff;
    width: 34px; height: 34px; padding: 0; margin: 0;
    border: none; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; line-height: 1; flex-shrink: 0;
    transition: background-color .2s ease, transform .2s ease;
}
.btn-theme-toggle:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.btn-theme-toggle:active { transform: translateY(0); }

/* --- Sélecteur de langue --- */
.nav-lang { position: relative; display: inline-flex; }
.btn-lang {
    background: rgba(255,255,255,.1); color: #fff;
    height: 34px; padding: 0 12px; margin: 0;
    border: none; border-radius: 17px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; line-height: 1; flex-shrink: 0;
    transition: background-color .2s ease, transform .2s ease;
}
.btn-lang:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.nav-lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
    background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
    padding: 6px; display: flex; flex-direction: column; min-width: 150px;
}
.nav-lang-dropdown[hidden] { display: none; }
.nav-lang-option {
    background: none; border: none; text-align: left; cursor: pointer;
    padding: 8px 10px; border-radius: 6px; font-size: 13px; color: #1a1a2e;
    margin: 0; width: 100%; font-weight: 500;
    transition: background-color .15s ease;
}
.nav-lang-option:hover { background: #eef2ff; }
html.theme-sombre .nav-lang-dropdown { background: #262a35; }
html.theme-sombre .nav-lang-option { color: #e8e8e8; }
html.theme-sombre .nav-lang-option:hover { background: #202844; }

.btn-favorite-star {
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1; padding: 2px 4px; margin: 0;
    color: #f59e0b; transition: transform .15s ease;
}
.btn-favorite-star:hover { transform: scale(1.2); }

.container { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
.muted { color: var(--gray); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 24px 0; }
.stat-card { background: #fff; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.stat-card.stat-alert { border: 2px solid var(--red); }
.stat-number { display: block; font-size: 32px; font-weight: 800; color: var(--blue); }
.stat-label { font-size: 13px; color: var(--gray); }

@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .stats-grid { grid-template-columns: 1fr; }
}

.panel { background: #fff; border-radius: 12px; padding: 24px; margin: 20px 0; box-shadow: 0 2px 8px rgba(0,0,0,.06); }

.data-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.data-table th { text-align: left; background: #f0f1f5; padding: 10px 12px; }
.data-table td { padding: 10px 12px; border-bottom: 1px solid #eee; }

.badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; color: #fff; }
.badge-public { background: #16a34a; }
.badge-interne { background: #2563eb; }
.badge-confidentiel { background: #ea580c; }
.badge-secret { background: #dc2626; }
.badge-archive { background: #64748b; }

.checksum { font-size: 11px; color: var(--gray); }

.btn { display: inline-block; background: var(--blue); color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 20px; margin: 12px 0; font-size: 14px; }
.form-card { background: #fff; padding: 24px; border-radius: 12px; max-width: 500px; }

.broadcast-targets { margin-bottom: 16px; }
.broadcast-target-all {
    display: block; padding: 12px 14px; margin-bottom: 10px;
    background: #eef2ff; border: 1px solid var(--blue); border-radius: 8px;
    cursor: pointer; font-size: 14px;
}
.broadcast-target-all input { width: auto; margin-right: 8px; }
.broadcast-ministere-grid {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 220px; overflow-y: auto;
    border: 1px solid #ddd; border-radius: 8px; padding: 10px;
}
.broadcast-ministere-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; padding: 6px 8px; border-radius: 6px; cursor: pointer;
}
.broadcast-ministere-item:hover { background: #f5f7ff; }
.broadcast-ministere-item input { width: auto; margin: 0; }
.form-inline { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.form-inline button { width: auto; margin-top: 0; }

.row-alert-haute, .row-alert-critique { background: #fee2e2; }

/* ===============================================================
   EFFETS DE SURVOL SUR LES BOUTONS (toute la plateforme)
   =============================================================== */
button, .btn, .btn-logout, .btn-copy, .btn-reply, .btn-cancel-reply {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, filter .15s ease;
}
button:hover:not(:disabled), .btn:hover, .btn-logout:hover, .btn-copy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(43,75,242,.25);
    filter: brightness(1.08);
}
button:active:not(:disabled), .btn:active, .btn-logout:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
button:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}
.nav-links a, .contact-link { transition: color .15s ease, background-color .15s ease, transform .15s ease; }

/* ===============================================================
   MESSAGERIE INTERNE
   =============================================================== */
.msg-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 999px; line-height: 1;
}
.nav-link-messages { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.msg-badge-nav { position: relative; top: -1px; }

.msg-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; margin-top: 16px; align-items: start; }
@media (max-width: 800px) { .msg-layout { grid-template-columns: 1fr; } }

.msg-contacts { padding: 16px; max-height: 70vh; overflow-y: auto; }
.contact-list { list-style: none; margin: 12px 0 0; padding: 0; }
.contact-list li { margin-bottom: 4px; }
.contact-link {
    display: flex; flex-direction: column; gap: 2px; position: relative;
    padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--dark);
}
.contact-link:hover { background: var(--bg); transform: translateX(3px); }
.contact-active { background: #e8ecff; }
.contact-name { font-size: 14px; font-weight: 600; }
.contact-preview { font-size: 12px; color: var(--gray); }
.contact-link .msg-badge { position: absolute; top: 10px; right: 10px; }

.msg-thread { padding: 20px; min-height: 400px; display: flex; flex-direction: column; }
.thread-scroll { flex: 1; overflow-y: auto; max-height: 50vh; margin: 12px 0; padding-right: 4px; }

.msg-bubble { max-width: 75%; margin-bottom: 14px; padding: 10px 14px; border-radius: 14px; position: relative; }
.msg-theirs { background: #f0f1f5; align-self: flex-start; margin-right: auto; }
.msg-mine { background: #e8ecff; align-self: flex-end; margin-left: auto; text-align: right; }
.msg-content { font-size: 14px; white-space: pre-wrap; }
.msg-meta { font-size: 11px; color: var(--gray); margin-top: 4px; }
.msg-reply-tag { font-size: 11px; color: var(--blue); margin-bottom: 4px; font-style: italic; }
.btn-reply {
    margin-top: 6px; width: auto; padding: 3px 10px; font-size: 11px;
    background: transparent; color: var(--blue); border: 1px solid var(--blue); border-radius: 14px;
}
.btn-reply:hover { background: var(--blue); color: #fff; }

.msg-compose { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #eee; padding-top: 12px; }
.msg-compose textarea { resize: vertical; }
.msg-compose button { width: auto; align-self: flex-end; padding: 10px 24px; }
.reply-notice {
    background: #fff7ed; color: #92400e; font-size: 12px; padding: 6px 10px;
    border-radius: 8px; display: flex; justify-content: space-between; align-items: center;
}
.btn-cancel-reply {
    width: auto; margin: 0; padding: 2px 10px; font-size: 11px;
    background: transparent; color: #92400e; border: 1px solid #92400e; border-radius: 12px;
}

/* ===============================================================
   SÉLECTEUR D'EMOJIS (style WhatsApp)
   =============================================================== */
.emoji-picker-holder { position: relative; }
.emoji-picker-holder textarea { padding-right: 44px; }

.emoji-picker-toggle {
    position: absolute; right: 6px; bottom: 8px; width: 32px; height: 32px;
    margin: 0; padding: 0; border-radius: 50%; border: none;
    background: transparent; font-size: 20px; line-height: 32px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.emoji-picker-toggle:hover { background: var(--bg); transform: scale(1.1); box-shadow: none; }

.emoji-picker {
    position: absolute; z-index: 50; bottom: calc(100% + 8px); right: 0;
    width: 320px; max-width: 90vw; background: #fff; border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.2); border: 1px solid #eee;
    display: flex; flex-direction: column; overflow: hidden;
}
.emoji-picker-search {
    margin: 8px 8px 0; width: calc(100% - 16px); padding: 8px 12px;
    border: 1px solid #ddd; border-radius: 20px; font-size: 13px;
}
.emoji-picker-tabs {
    display: flex; gap: 2px; padding: 8px; overflow-x: auto; border-bottom: 1px solid #eee;
}
.emoji-picker-tab {
    width: auto; margin: 0; flex: none; background: transparent; font-size: 18px;
    padding: 4px 8px; border-radius: 8px; border: none; cursor: pointer;
}
.emoji-picker-tab:hover { background: var(--bg); box-shadow: none; transform: none; }
.emoji-picker-tab-active { background: #e8ecff; }
.emoji-picker-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
    padding: 8px; max-height: 220px; overflow-y: auto;
}
.emoji-picker-item {
    width: auto; margin: 0; background: transparent; border: none; border-radius: 8px;
    font-size: 20px; line-height: 1; padding: 6px 0; cursor: pointer;
}
.emoji-picker-item:hover { background: var(--bg); box-shadow: none; transform: scale(1.15); }
.emoji-picker-empty { grid-column: 1 / -1; font-size: 12px; color: var(--gray); text-align: center; padding: 20px 8px; }

/* ===============================================================
   ALERTES DE SÉCURITÉ — filtres, tri, export
   =============================================================== */
.alerts-filter-bar {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 16px 20px;
}
.alerts-filter-bar label { margin: 0 0 4px; }
.alerts-filter-bar select { padding: 8px 10px; min-width: 150px; }
.alerts-filter-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.alerts-filter-actions .btn { margin: 0; }
.sort-link { color: inherit; text-decoration: none; }
.sort-link:hover { text-decoration: underline; }
.data-table th { white-space: nowrap; }

/* Tableau "Utilisateurs existants" (admin) : beaucoup de colonnes, donc
   police réduite + pas de retour à la ligne pour que chaque utilisateur
   tienne sur une seule ligne, avec la photo de profil bien visible. */
#users-table { font-size: 12px; }
#users-table th, #users-table td { padding: 6px 8px; white-space: nowrap; vertical-align: middle; }
#users-table td.col-actions { white-space: normal; }
#users-table .badge { font-size: 10px; padding: 2px 6px; }

/* ===============================================================
   EFFETS DE SURVOL "IMPRESSIONNANTS" — Déconnexion / Quitter / Se connecter
   =============================================================== */
.btn-quit, .btn-cta {
    position: relative;
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease;
}
/* Effet "brillance" qui balaie le bouton au survol */
.btn-quit::before, .btn-cta::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
    transform: skewX(-25deg);
    transition: left .65s ease;
    pointer-events: none;
    z-index: 1;
}
.btn-quit:hover::before, .btn-cta:hover::before {
    left: 130%;
}

.btn-quit { background: #6b7280; }

/* Déconnexion : mêmes couleurs et effet de survol que Mon activité / Mon profil */
.btn-logout {
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn-logout:hover {
    background: #b02a37;
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.45);
}
.btn-logout:active {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.35);
}
.btn-cta:hover {
    transform: translateY(-4px) scale(1.07);
    box-shadow: 0 12px 28px rgba(43, 75, 242, .4);
}
.btn-quit:hover {
    transform: translateY(-4px) scale(1.07) rotate(-1.5deg);
    box-shadow: 0 12px 28px rgba(107, 114, 128, .45);
}
.btn-quit:active, .btn-cta:active {
    transform: translateY(-1px) scale(.97);
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}
.btn-logout:focus-visible, .btn-quit:focus-visible, .btn-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Le bouton "Se connecter" est un peu plus spectaculaire (page d'accroche) */
.btn-cta {
    background: linear-gradient(135deg, var(--blue), var(--blue-dark));
    background-size: 160% 160%;
    animation: btn-cta-idle 4s ease-in-out infinite;
}
.btn-cta:hover {
    background-position: 100% 0;
    animation-play-state: paused;
}
@keyframes btn-cta-idle {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-logout, .btn-quit, .btn-cta,
    .btn-logout::before, .btn-quit::before, .btn-cta::before {
        transition: none; animation: none;
    }
}

/* ===============================================================
   ACTIONS SUR LES DOCUMENTS — Détails / Lire / Télécharger /
   Modifier / Supprimer / Signer, alignés sur une seule ligne,
   jamais soulignés, avec un effet de survol marqué.
   =============================================================== */

/* Conteneur défilable horizontalement : évite que la colonne Actions
   (ou n'importe quelle autre) ne soit écrasée par les autres colonnes
   quand le tableau a beaucoup de contenu — au lieu de ça, le tableau
   garde sa largeur naturelle et on scrolle horizontalement si besoin. */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive .data-table {
    width: max-content;
    min-width: 100%;
}

/* La cellule Actions garde toujours assez de place pour ses boutons :
   plus jamais écrasée au point de forcer un empilement vertical. */
.col-actions { white-space: nowrap; }

/* Règle générale : sur TOUS les tableaux (utilisateurs, rôles, alertes,
   échéances, mes écrits, partages, ministères...), la dernière colonne
   contient les boutons d'action. On garantit ici, partout, le même
   alignement horizontal net (une seule ligne, espacement régulier de
   8px) qu'on avait déjà sur la page Ministères, sans devoir toucher
   chaque tableau un par un. */
.data-table td:last-child {
    white-space: nowrap;
}
.data-table td:last-child > form,
.data-table td:last-child > a,
.data-table td:last-child > button {
    display: inline-flex;
    vertical-align: middle;
}
/* Les <details> (Modifier / Gérer les rôles) doivent rester en flux normal
   à l'intérieur : le résumé (bouton) d'abord, puis le formulaire déroulant
   EN DESSOUS. inline-flex les aurait mis côte à côte et aurait écrasé
   tous les champs du formulaire sur une seule ligne minuscule. */
.data-table td:last-child > details {
    display: inline-block;
    vertical-align: middle;
}
.data-table td:last-child > * + * {
    margin-left: 8px;
}

.doc-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}
.btn-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 8px 14px;
    border-radius: 999px;
    color: #fff;
    background: var(--blue);
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, filter .2s ease;
}
.btn-action:link, .btn-action:visited, .btn-action:hover, .btn-action:active {
    text-decoration: none !important;
}
.btn-action .btn-action-icon { font-size: 13px; line-height: 1; }
.btn-action::before {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.6), transparent);
    transform: skewX(-25deg);
    transition: left .6s ease;
    pointer-events: none;
    z-index: 1;
}
.btn-action:hover::before { left: 130%; }
.btn-action:hover {
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.08);
}
.btn-action:active { transform: translateY(0) scale(.97); }
.btn-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn-action-sm { padding: 5px 10px; font-size: 11px; }

.btn-action-details { background: linear-gradient(135deg, #2b4bf2, #1a2e8c); }
.btn-action-details:hover { box-shadow: 0 10px 22px rgba(43,75,242,.4); }

.btn-action-read { background: linear-gradient(135deg, #0891b2, #0e7490); }
.btn-action-read:hover { box-shadow: 0 10px 22px rgba(8,145,178,.4); }

.btn-action-download { background: linear-gradient(135deg, #16a34a, #15803d); }
.btn-action-download:hover { box-shadow: 0 10px 22px rgba(22,163,74,.4); }

.btn-action-edit { background: linear-gradient(135deg, #ea580c, #c2410c); }
.btn-action-edit:hover { box-shadow: 0 10px 22px rgba(234,88,12,.4); }

.btn-action-delete { background: linear-gradient(135deg, #dc2626, #991b1b); }
.btn-action-delete:hover { box-shadow: 0 10px 22px rgba(220,38,38,.4); }

.btn-action-sign { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.btn-action-sign:hover { box-shadow: 0 10px 22px rgba(124,58,237,.4); }

/* Formulaires repliables (Modifier / Signer) ouverts sous le bouton */
.doc-edit-details { display: inline-block; }
.doc-edit-details summary { list-style: none; }
.doc-edit-details summary::-webkit-details-marker { display: none; }
.doc-edit-details[open] summary { margin-bottom: 10px; }
.doc-edit-form { margin-top: 4px; min-width: 280px; max-width: 420px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }

/* ===============================================================
   RÔLES — puces de sélection (page admin/roles.php)
   =============================================================== */
.role-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.role-checkbox-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    font-weight: normal;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
html.theme-sombre .role-checkbox-item { background: #262a35; border-color: #3a3f4c; }
.role-checkbox-item:hover { border-color: var(--blue); }
.role-checkbox-item-checked { background: #eef2ff; border-color: var(--blue); }
html.theme-sombre .role-checkbox-item-checked { background: #202844; }
.role-checkbox-name { font-weight: 700; }
.role-checkbox-desc { flex-basis: 100%; }
.roles-hint { display: block; margin-top: 6px; min-height: 16px; }
.roles-hint-warning { color: var(--orange); font-weight: 600; }

/* ===============================================================
   SIGNATURES ÉLECTRONIQUES
   =============================================================== */
.signature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.signature-card {
    background: #f9fafb;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.signature-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.signature-img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #eee;
    padding: 4px;
}
.signature-meta { font-size: 11.5px; margin-top: 8px; }

/* ===============================================================
   MESSAGERIE — actions supplémentaires (supprimer message / conversation)
   =============================================================== */
.msg-actions-row { display: flex; gap: 6px; margin-top: 6px; }
.btn-delete-msg {
    color: var(--red) !important; border-color: var(--red) !important;
}
.btn-delete-msg:hover { background: var(--red) !important; color: #fff !important; }
.btn-msg-action {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    padding: 6px 12px; border-radius: 14px;
    background: transparent; color: var(--red); border: 1px solid var(--red);
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-msg-action:hover {
    background: var(--red); color: #fff;
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 8px 18px rgba(220,38,38,.35);
}

/* ===============================================================
   PAGE DE CONNEXION — image d'arrière-plan (remplace le dégradé bleu)
   =============================================================== */
.auth-page {
    position: relative;
    background:
        linear-gradient(135deg, rgba(15,23,60,.72), rgba(26,46,140,.6)),
        url('../img/login-bg.jpg') center center / cover no-repeat fixed;
}
.auth-card {
    backdrop-filter: blur(2px);
}

/* ===============================================================
   MINISTÈRES — tableau de gestion (admin)
   =============================================================== */
.ministere-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ministere-actions > form,
.ministere-actions > details { flex-shrink: 0; display: inline-flex; align-items: center; }

/* ===============================================================
   ÉDITEUR "WORD" — espace utilisateurs (Mes écrits)
   =============================================================== */
.word-editor-page { max-width: 900px; }
.word-editor-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.word-editor-topbar #word-title {
    flex: 1;
    min-width: 200px;
    font-size: 18px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--dark);
}
.word-editor-topbar #word-title:focus {
    border-color: var(--blue);
    background: var(--white);
    outline: none;
}
.word-editor-topbar #word-title[readonly] { cursor: default; }
#word-save-status { font-size: 13px; white-space: nowrap; }
#word-toolbar.ql-toolbar.ql-snow {
    border-radius: 10px 10px 0 0;
    background: var(--white);
    border-color: #d7dae2;
}
#word-container {
    background: var(--white);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    margin-bottom: 40px;
}
#word-container .ql-container.ql-snow {
    border-color: #d7dae2;
    border-radius: 0 0 10px 10px;
    font-size: 15px;
}
#word-container .ql-editor {
    min-height: 60vh;
    padding: 32px 40px;
}
html.theme-sombre #word-toolbar.ql-toolbar.ql-snow,
html.theme-sombre #word-container { background: var(--white); }
html.theme-sombre .ql-snow .ql-stroke { stroke: var(--dark); }
html.theme-sombre .ql-snow .ql-fill { fill: var(--dark); }
html.theme-sombre .ql-snow .ql-picker { color: var(--dark); }
html.theme-sombre #word-container .ql-editor { color: var(--dark); }

.word-container-no-toolbar,
.word-container-no-toolbar .ql-container.ql-snow { border-radius: 10px !important; }

#word-toolbar #word-undo-btn,
#word-toolbar #word-redo-btn {
    width: 28px; height: 24px; border: none; background: transparent;
    font-size: 16px; line-height: 1; cursor: pointer; color: #444;
    border-radius: 4px;
}
#word-toolbar #word-undo-btn:hover,
#word-toolbar #word-redo-btn:hover { background: #f0f0f0; }

#word-save-btn.btn-action { background: var(--blue); color: #fff; border-color: var(--blue); }

#word-readonly-banner { margin-bottom: 14px; }

#word-status-bar {
    display: flex; justify-content: flex-end; font-size: 12px;
    margin: -30px 4px 30px; position: relative; z-index: 1;
}
#word-container .ql-editor img { max-width: 100%; height: auto; }

@media print {
    body * { visibility: hidden; }
    #word-container, #word-container * { visibility: visible; }
    #word-container {
        position: absolute; left: 0; top: 0; width: 100%;
        box-shadow: none; border-radius: 0;
    }
    #word-container .ql-editor { padding: 0; min-height: 0; }
    #word-status-bar, .word-editor-topbar, nav, .word-editor-page > p { display: none !important; }
    .word-page-break { page-break-before: always; border: none; height: 0; margin: 0; }
}

/* ---- Tableaux insérés dans l'éditeur ---- */
#word-container .ql-editor table {
    border-collapse: collapse; width: 100%; margin: 10px 0;
}
#word-container .ql-editor table td,
#word-container .ql-editor table th {
    border: 1px solid #b9bfcc; padding: 6px 10px; min-width: 40px;
}
#word-container .ql-editor table th { background: #f2f4fa; font-weight: 600; }
html.theme-sombre #word-container .ql-editor table td,
html.theme-sombre #word-container .ql-editor table th { border-color: #444; }
html.theme-sombre #word-container .ql-editor table th { background: #2a2f3a; }

/* ---- Saut de page (visible à l'écran comme un séparateur) ---- */
#word-container .ql-editor hr.word-page-break {
    border: none; border-top: 2px dashed #9aa3b5; margin: 24px 0; position: relative;
}
#word-container .ql-editor hr.word-page-break::after {
    content: "Saut de page"; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--white); color: var(--gray); font-size: 11px; padding: 0 8px;
}

/* ---- Interlignage (formats personnalisés Quill) ---- */
#word-container .ql-editor .ql-line-height-1 { line-height: 1.15; }
#word-container .ql-editor .ql-line-height-115 { line-height: 1.15; }
#word-container .ql-editor .ql-line-height-15 { line-height: 1.5; }
#word-container .ql-editor .ql-line-height-2 { line-height: 2; }

/* ---- Panneau Rechercher / Remplacer ---- */
.word-find-panel {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--white); border: 1px solid #d7dae2; border-radius: 8px;
    padding: 8px 10px; margin-bottom: 10px;
}
.word-find-panel input[type="text"] {
    padding: 6px 10px; border: 1px solid #d7dae2; border-radius: 6px; font-size: 13px;
}
.word-find-panel button { width: auto; margin: 0; padding: 6px 12px; font-size: 13px; }
.word-find-panel .word-find-count { font-size: 12px; color: var(--gray); }
.word-find-panel .word-find-close {
    margin-left: auto; background: transparent; color: var(--dark); border: none;
    font-size: 16px; cursor: pointer; padding: 0 4px;
}
mark.word-find-highlight { background: #ffe066; color: #1a1a1a; }
mark.word-find-highlight-active { background: #ff9f1c; }

/* ===============================================================
   CLOCHE DE NOTIFICATIONS (nav)
   =============================================================== */
.nav-notif { position: relative; display: inline-flex; }
.btn-notif {
    background: transparent; border: none; color: #ddd; font-size: 18px;
    cursor: pointer; padding: 4px 6px; margin: 0; width: auto; position: relative;
    border-radius: 6px;
}
.btn-notif:hover { background: rgba(255,255,255,.08); }
.nav-notif .msg-badge { position: absolute; top: -2px; right: -2px; }
.nav-notif-dropdown {
    position: absolute; right: 0; top: 36px; width: 340px; max-height: 420px;
    background: var(--white); color: var(--dark); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0,0,0,.25); overflow: hidden; z-index: 50;
    display: flex; flex-direction: column;
}
.nav-notif-dropdown[hidden] { display: none; }
.nav-notif-dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid #e5e7ef; font-size: 14px;
}
.nav-notif-dropdown-header button {
    width: auto; margin: 0; background: transparent; color: var(--blue);
    border: none; font-size: 12px; cursor: pointer; padding: 0;
}
.nav-notif-list { overflow-y: auto; overflow-x: hidden; max-height: 360px; }
.nav-notif-empty { padding: 16px; text-align: center; }
.nav-notif-item {
    display: block; padding: 10px 14px; border-bottom: 1px solid #f0f1f5;
    text-decoration: none; color: var(--dark); cursor: pointer;
}
.nav-notif-item:hover { background: var(--bg); }
.nav-notif-item-unread { background: #eef1ff; }
.nav-notif-item-titre { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.nav-notif-item-msg { font-size: 12px; color: var(--gray); margin-top: 2px; overflow-wrap: anywhere; }
.nav-notif-item-date { font-size: 11px; color: var(--gray); margin-top: 4px; }
html.theme-sombre .nav-notif-dropdown { background: #262a35; }
html.theme-sombre .nav-notif-item-unread { background: #202844; }
html.theme-sombre .nav-notif-item { border-color: #333844; }

/* ===============================================================
   CONFÉRENCES EN LIGNE (visio + partage d'écran)
   =============================================================== */
.conference-page { min-height: 100vh; display: flex; flex-direction: column; background: #111318; color: #f1f1f1; }
.conference-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 20px; background: #1b1e26; border-bottom: 1px solid #2a2e3a;
}
.conference-topbar .muted { color: #9aa0ac; }
.conference-invite { display: flex; align-items: center; gap: 8px; flex: 1; max-width: 420px; }
.conference-invite input {
    flex: 1; background: #262a35; color: #f1f1f1; border: 1px solid #33384a;
    border-radius: 6px; padding: 6px 10px; font-size: 12px;
}
#conference-large-group-notice { margin: 10px 20px 0; }
.conference-grid {
    flex: 1; display: grid; gap: 12px; padding: 20px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-content: start;
}
.conference-tile {
    position: relative; background: #000; border-radius: 10px; overflow: hidden;
    aspect-ratio: 16 / 9; border: 1px solid #2a2e3a;
}
.conference-tile video { width: 100%; height: 100%; object-fit: cover; }
.conference-tile-name {
    position: absolute; left: 8px; bottom: 8px; padding: 3px 10px;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px; border-radius: 6px;
}
.conference-tile-local { border-color: var(--blue, #4f6bff); }
.conference-controls {
    display: flex; justify-content: center; gap: 14px; padding: 16px;
    background: #1b1e26; border-top: 1px solid #2a2e3a;
}
.conference-controls .btn-action {
    width: 52px; height: 52px; border-radius: 50%; font-size: 20px;
    display: flex; align-items: center; justify-content: center; padding: 0;
}

/* =====================================================================
   Module Échéances — calendrier
   ===================================================================== */
.echeance-layout { display: flex; gap: 24px; margin-top: 16px; flex-wrap: wrap; }
.echeance-calendar { flex: 2; min-width: 320px; }
.echeance-upcoming { flex: 1; min-width: 240px; background: var(--white); border-radius: 12px; padding: 16px 20px; height: fit-content; }
.echeance-cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.echeance-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.echeance-cal-weekday { text-align: center; font-size: 12px; font-weight: 700; color: var(--gray); padding: 4px 0; }
.echeance-cal-cell { background: var(--white); border-radius: 8px; min-height: 64px; padding: 6px; position: relative; }
.echeance-cal-empty { background: transparent; }
.echeance-cal-today { outline: 2px solid var(--blue); }
.echeance-cal-daynum { font-size: 12px; color: var(--gray); }

@media (max-width: 480px) {
    .echeance-cal-cell { min-height: 44px; padding: 3px; }
    .echeance-cal-grid { gap: 2px; }
    .echeance-cal-weekday { font-size: 10px; }
}
.echeance-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin: 2px 2px 0 0; }
.echeance-dot-avenir { background: var(--blue); }
.echeance-dot-traite { background: var(--green); }
.echeance-dot-retard { background: var(--red); }
.echeance-upcoming-list { list-style: none; padding: 0; margin: 0; }
.echeance-upcoming-list li { padding: 10px 0; border-bottom: 1px solid #eee; display: flex; flex-direction: column; gap: 4px; }
.echeance-upcoming-list li:last-child { border-bottom: none; }
.echeance-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; }
.echeance-form input, .echeance-form select, .echeance-form textarea { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }

/* =====================================================================
   Footer global
   ===================================================================== */
.site-footer {
    width: 100%;
    box-sizing: border-box;
    background: var(--blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 20px;
    font-size: 13px;
    margin-top: 40px;
}
.site-footer p { margin: 0; }
html.theme-sombre .site-footer { background: var(--blue-dark); color: #e8e8e8; }

/* =====================================================================
   Hero animé — page d'accueil (dashboard)
   ===================================================================== */
.dash-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    padding: 40px 36px;
    margin: 24px 0 20px;
    color: #fff;
    background: linear-gradient(120deg, #1a2e8c, #2b4bf2, #3d6bff, #2b4bf2);
    background-size: 300% 300%;
    animation: dashHeroGradient 14s ease infinite;
    box-shadow: 0 10px 30px rgba(26,46,140,.25);
}
@keyframes dashHeroGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.dash-hero-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dash-hero-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
    animation: dashFloat 10s ease-in-out infinite;
}
.dash-hero-shape:nth-child(1) { width: 160px; height: 160px; top: -50px; right: 8%; animation-duration: 12s; }
.dash-hero-shape:nth-child(2) { width: 90px; height: 90px; bottom: -30px; right: 25%; animation-duration: 9s; animation-delay: 1s; background: rgba(255,255,255,.08); }
.dash-hero-shape:nth-child(3) { width: 60px; height: 60px; top: 30%; right: 45%; animation-duration: 7s; animation-delay: .4s; background: rgba(255,255,255,.07); }
.dash-hero-shape:nth-child(4) { width: 40px; height: 40px; top: 15%; right: 6%; animation-duration: 6s; animation-delay: .8s; background: rgba(255,255,255,.12); }
@keyframes dashFloat {
    0%, 100% { transform: translateY(0) translateX(0) scale(1); }
    50% { transform: translateY(-22px) translateX(10px) scale(1.06); }
}
.dash-hero-inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dash-hero-content { position: relative; z-index: 2; max-width: 60%; }
.dash-hero-chart { flex: 1 1 260px; max-width: 320px; opacity: .95; }
.dash-hero-chart svg { width: 100%; height: auto; display: block; }
.dash-hero-line {
    stroke-dasharray: 520;
    stroke-dashoffset: 520;
    animation: dashLineDraw 2.2s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.dash-hero-area { opacity: 0; animation: dashAreaIn 1.2s ease 1.4s forwards; }
@keyframes dashLineDraw { to { stroke-dashoffset: 0; } }
@keyframes dashAreaIn { to { opacity: 1; } }
.dash-hero-dot {
    fill: #fff; opacity: 0; transform-origin: center;
    animation: dashDotIn .4s ease forwards, dashDotPulse 2.4s ease-in-out infinite 2.2s;
}
.dash-hero-dot:nth-of-type(1) { animation-delay: .8s, 2.2s; }
.dash-hero-dot:nth-of-type(2) { animation-delay: 1.4s, 2.4s; }
.dash-hero-dot:nth-of-type(3) { animation-delay: 2s, 2.6s; }
.dash-hero-dot-end { fill: #ffd166; animation-delay: 2.3s, 2.8s; }
@keyframes dashDotIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes dashDotPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,.5)); } 50% { filter: drop-shadow(0 0 6px rgba(255,255,255,.85)); } }
@media (max-width: 760px) { .dash-hero-inner { flex-direction: column; align-items: flex-start; } .dash-hero-content { max-width: 100%; } .dash-hero-chart { max-width: 100%; } }
.dash-hero h1 {
    margin: 0 0 8px; font-size: 28px; font-weight: 800;
    animation: dashFadeUp .7s ease both;
}
.dash-hero .dash-hero-sub {
    margin: 0 0 4px; font-size: 15px; color: rgba(255,255,255,.9);
    animation: dashFadeUp .7s ease .1s both;
}
.dash-hero .dash-hero-meta {
    margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,.75);
    animation: dashFadeUp .7s ease .2s both;
}
@keyframes dashFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Cartes de statistiques : compteur animé + effet d'entrée */
.stat-card {
    animation: dashCardIn .5s ease both;
    transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(43,75,242,.18); }
.stats-grid .stat-card:nth-child(1) { animation-delay: .05s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: .12s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: .19s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: .26s; }
@keyframes dashCardIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Barres du graphique "Documents par classification" : croissance animée */
.dash-chart-frame { position: relative; height: 190px; padding: 12px 0 0; }
.dash-chart-grid {
    position: absolute; inset: 12px 0 38px; display: flex; flex-direction: column; justify-content: space-between;
    pointer-events: none;
}
.dash-chart-grid span { display: block; height: 1px; background: rgba(43,75,242,.10); }
.dash-chart-bars { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 28px; height: 100%; padding-top: 4px; }
.dash-bar-track { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dash-bar {
    width: 48px; border-radius: 8px 8px 3px 3px;
    background: linear-gradient(180deg, #6c8bff, var(--blue) 70%, var(--blue-dark));
    height: 0 !important;
    position: relative; overflow: hidden;
    transition: height 1.1s cubic-bezier(.22,1,.36,1), filter .2s ease, transform .2s ease;
    box-shadow: 0 6px 14px rgba(43,75,242,.28);
}
.dash-bar::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
    background-size: 250% 100%; background-position: 150% 0;
    animation: dashBarShine 3.2s ease-in-out 1.4s infinite;
}
@keyframes dashBarShine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.dash-bar:hover { filter: brightness(1.12); transform: translateY(-2px); }

html.theme-sombre .dash-hero { box-shadow: 0 10px 30px rgba(0,0,0,.4); }