/* =========================================================
   THÈME ADMINISTRATION — ZINOVA INVEST ACADEMY
   Design modernisé : sidebar, verre dépoli, accents dorés.
   ========================================================= */

:root {
    --admin-bg: #070c16;
    --admin-bg-2: #0b1324;
    --admin-bg-3: #101a2e;

    --admin-sidebar: rgba(9, 15, 28, 0.94);
    --admin-surface: rgba(23, 33, 54, 0.72);
    --admin-surface-2: rgba(17, 26, 44, 0.85);
    --admin-surface-solid: #131c31;

    --admin-border: rgba(148, 163, 184, 0.16);
    --admin-border-gold: rgba(212, 175, 55, 0.36);

    --admin-text: #f8fafc;
    --admin-muted: #93a3bd;
    --admin-muted-2: #6b7a94;

    --admin-primary: #d4af37;
    --admin-primary-2: #f3d477;
    --admin-primary-soft: rgba(212, 175, 55, 0.14);

    --admin-success: #34d399;
    --admin-success-soft: rgba(52, 211, 153, 0.14);
    --admin-danger: #f87171;
    --admin-danger-soft: rgba(248, 113, 113, 0.14);
    --admin-info: #60a5fa;
    --admin-info-soft: rgba(96, 165, 250, 0.14);

    --admin-radius: 18px;
    --admin-radius-sm: 12px;

    --admin-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    --admin-shadow-sm: 0 10px 24px rgba(0, 0, 0, 0.35);

    --admin-sidebar-width: 272px;
}

/* =========================================================
   BASE
   ========================================================= */

body.admin-page {
    font-family: 'Inter', sans-serif;
    margin: 0;
    min-height: 100vh;
    color: var(--admin-text);
    background:
        radial-gradient(circle at 12% -10%, rgba(212, 175, 55, 0.16), transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.10), transparent 40%),
        linear-gradient(160deg, var(--admin-bg) 0%, var(--admin-bg-2) 55%, var(--admin-bg-3) 100%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

body.admin-page h1,
body.admin-page h2,
body.admin-page h3 {
    color: #ffffff;
    letter-spacing: -0.02em;
}

body.admin-page .text-on-surface {
    color: var(--admin-text) !important;
}

body.admin-page .text-on-surface-variant {
    color: var(--admin-muted) !important;
}

body.admin-page .text-primary {
    color: var(--admin-primary) !important;
}

body.admin-page p {
    color: #dbe3f0;
}

/* =========================================================
   STRUCTURE
   ========================================================= */

.admin-shell {
    display: flex;
    min-height: 100vh;
}

.admin-wrapper {
    width: min(100% - 32px, 1240px);
    margin: 0 auto;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--admin-sidebar-width);
    display: flex;
    flex-direction: column;
    padding: 24px 18px;
    background: var(--admin-sidebar);
    border-right: 1px solid var(--admin-border);
    backdrop-filter: blur(14px);
    z-index: 60;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 6px 8px 24px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #1a1204;
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-2) 100%);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.30);
}

.admin-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.admin-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: #fff;
}

.admin-brand-sub {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--admin-primary-2);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    overflow-y: auto;
}

.admin-nav-quick {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 0 12px;
    margin-bottom: 4px;
    background: var(--admin-sidebar);
    border-bottom: 1px solid var(--admin-border);
    backdrop-filter: blur(14px);
}

.admin-nav-quick-title {
    display: block;
    margin: 0 6px 8px;
    color: var(--admin-muted-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.admin-nav-quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.admin-nav-quick-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--admin-border-gold);
    border-radius: var(--admin-radius-sm);
    background: rgba(212, 175, 55, 0.09);
    color: var(--admin-primary-2);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-nav-quick-link .material-symbols-outlined {
    font-size: 18px;
}

.admin-nav-quick-link:hover,
.admin-nav-quick-link.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(212, 175, 55, 0.12));
    transform: translateY(-1px);
}

.admin-nav-title {
    margin: 18px 12px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--admin-muted-2) !important;
}

/* Groupe « Espace VIP » : met visuellement à part tout ce qui touche
   à l'offre payante (une seule section regroupée dans le menu). */
.admin-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    border-radius: var(--admin-radius);
    border: 1px solid transparent;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.admin-nav-group.is-open {
    border-color: var(--admin-border-gold);
    background: rgba(212, 175, 55, 0.05);
}

.admin-nav-group .admin-nav-item {
    padding-left: 11px;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid transparent;
    color: var(--admin-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.18s ease;
}

.admin-nav-item .admin-nav-icon {
    font-size: 20px;
    opacity: 0.85;
}

.admin-nav-item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--admin-border);
}

.admin-nav-item.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.06));
    border-color: var(--admin-border-gold);
    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.12);
}

.admin-nav-item.is-active .admin-nav-icon {
    color: var(--admin-primary-2);
    opacity: 1;
}

.admin-sidebar-footer {
    padding-top: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--admin-border);
}

.admin-user-chip {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--admin-radius-sm);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--admin-border);
    margin-bottom: 10px;
}

.admin-user-avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-2));
    color: #1a1204;
    font-weight: 800;
    font-family: 'Montserrat', sans-serif;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-user-role {
    font-size: 11px;
    color: var(--admin-muted-2);
}

.admin-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border-radius: var(--admin-radius-sm);
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s ease;
}

.admin-logout .material-symbols-outlined {
    font-size: 19px;
}

.admin-logout:hover {
    color: var(--admin-danger);
    background: var(--admin-danger-soft);
}

.admin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 15, 0.65);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease;
    z-index: 55;
}

.admin-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* =========================================================
   COLONNE PRINCIPALE + TOPBAR
   ========================================================= */

.admin-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--admin-sidebar-width);
    display: flex;
    flex-direction: column;
}

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 28px;
    background: rgba(8, 13, 24, 0.72);
    border-bottom: 1px solid var(--admin-border);
    backdrop-filter: blur(14px);
}

.admin-burger {
    display: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--admin-text);
    cursor: pointer;
}

.admin-topbar-titles {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.admin-topbar-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    font-size: 24px;
    color: var(--admin-primary-2);
    background: var(--admin-primary-soft);
    border: 1px solid var(--admin-border-gold);
}

.admin-topbar-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.admin-topbar-sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--admin-muted) !important;
}

.admin-topbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.admin-content {
    flex: 1;
    padding: 28px;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.admin-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    font-size: 12px;
    color: var(--admin-muted-2);
    border-top: 1px solid var(--admin-border);
}

.admin-footer-sep {
    color: var(--admin-border-gold);
}

/* =========================================================
   BLOCS DE SECTION (TABLEAU DE BORD)
   =========================================================
   Regroupent les cartes par thème (Espace VIP, Demandes,
   Contenu) pour une lecture structurée du tableau de bord. */

.admin-block {
    margin-bottom: 28px;
}

.admin-block:last-of-type {
    margin-bottom: 8px;
}

.admin-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--admin-border);
}

.admin-block-eyebrow {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--admin-primary-2);
}

.admin-block-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-block-sub {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--admin-muted);
}

.admin-block-icon {
    flex-shrink: 0;
    font-size: 26px;
    color: var(--admin-border-gold);
}

/* =========================================================
   CARTES & SURFACES
   ========================================================= */

.admin-card,
.admin-stat,
.admin-toolbar,
.contact-card,
.info-card,
.detail-card {
    position: relative;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
    backdrop-filter: blur(12px);
}

.admin-card {
    overflow: hidden;
}

.admin-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.02);
}

.admin-card-head h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.admin-card-head p {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--admin-muted) !important;
}

.admin-card-head-icon {
    font-size: 28px;
    color: var(--admin-primary-2);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--admin-surface-2);
}

/* Barre d'outils sur une seule ligne dès que la place le permet. */
.admin-toolbar .toolbar-grow {
    flex: 1 1 260px;
    min-width: 200px;
    position: relative;
}

.admin-toolbar .toolbar-select {
    flex: 0 0 auto;
    width: 210px;
}

.admin-toolbar .toolbar-action {
    flex: 0 0 auto;
}

@media (max-width: 560px) {
    .admin-toolbar .toolbar-select {
        width: 100%;
    }
}

/* Icône de recherche alignée dans le champ. */
.toolbar-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--admin-muted-2);
    pointer-events: none;
}

body.admin-page .admin-toolbar .toolbar-grow input {
    padding-left: 44px !important;
}

/* =========================================================
   STATISTIQUES
   ========================================================= */

.admin-stat {
    padding: 20px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--admin-primary), rgba(212, 175, 55, 0.15));
}

.admin-stat::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -40px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.14), transparent 70%);
    pointer-events: none;
}

a.admin-stat:hover,
.admin-stat.is-link:hover {
    transform: translateY(-4px);
    border-color: var(--admin-border-gold);
    box-shadow: 0 24px 55px rgba(0, 0, 0, 0.5);
}

.admin-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--admin-muted) !important;
}

.admin-stat-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.admin-stat-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--admin-muted-2) !important;
}

.admin-stat-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--admin-primary) !important;
}

.admin-stat-cta .material-symbols-outlined {
    font-size: 16px;
}

.admin-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 23px;
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    border: 1px solid var(--admin-border-gold);
}

.admin-stat-icon.is-info {
    background: var(--admin-info-soft);
    color: var(--admin-info);
    border-color: rgba(96, 165, 250, 0.3);
}

.admin-stat-icon.is-success {
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border-color: rgba(52, 211, 153, 0.3);
}

.admin-stat-icon.is-danger {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    border-color: rgba(248, 113, 113, 0.3);
}

/* =========================================================
   BOUTONS
   ========================================================= */

.primary-button,
.publish-button,
.update-button,
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 0;
    border-radius: var(--admin-radius-sm);
    background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-2) 100%);
    color: #17130a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(212, 175, 55, 0.20);
    transition: all 0.2s ease;
}

.primary-button:hover,
.publish-button:hover,
.update-button:hover,
.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(212, 175, 55, 0.30);
    filter: brightness(1.03);
}

.btn-ghost,
.admin-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-ghost:hover,
.admin-btn-ghost:hover {
    color: #fff;
    border-color: var(--admin-border-gold);
    background: rgba(212, 175, 55, 0.10);
}

.btn-excel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--admin-radius-sm);
    border: 1px solid rgba(52, 211, 153, 0.42);
    background: linear-gradient(135deg, rgba(16, 122, 87, 0.95), rgba(22, 163, 74, 0.92));
    color: #f0fff7;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(16, 122, 87, 0.28);
    transition: all 0.2s ease;
}

.btn-excel:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(16, 122, 87, 0.4);
    filter: brightness(1.05);
}

.btn-excel .material-symbols-outlined {
    font-size: 19px;
}

/* --- Sélecteur d'export regroupé (contacts / inscriptions / VIP) --- */
.export-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--admin-radius-sm);
    border: 1px solid rgba(52, 211, 153, 0.42);
    background: linear-gradient(135deg, rgba(16, 122, 87, 0.95), rgba(22, 163, 74, 0.92));
    box-shadow: 0 10px 22px rgba(16, 122, 87, 0.28);
    transition: all 0.2s ease;
}

.export-select:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(16, 122, 87, 0.4);
    filter: brightness(1.05);
}

.export-select-icon {
    position: absolute;
    left: 14px;
    font-size: 19px;
    color: #f0fff7;
    pointer-events: none;
}

.export-select-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 38px 12px 42px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    color: #f0fff7;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0fff7'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
}

.export-select-input:focus {
    outline: none;
}

.export-select-input option {
    color: #0f172a;
    background: #ffffff;
    font-weight: 600;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--admin-muted);
    cursor: pointer;
    transition: all 0.18s ease;
}

.action-button:hover {
    color: var(--admin-primary-2);
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
}

/* Bouton « Rejoindre » : même base qu'action-button mais avec un libellé
   visible (largeur automatique, icône + texte) et un ton doré actif. */
.action-button.rejoindre-button {
    width: auto;
    gap: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--admin-primary-2);
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
    white-space: nowrap;
}

.action-button.rejoindre-button:hover {
    background: var(--admin-primary-2);
    color: #101820;
}

.delete-button:hover,
.delete-form button:hover {
    color: var(--admin-danger);
    border-color: rgba(248, 113, 113, 0.5);
    background: var(--admin-danger-soft);
}

.delete-form {
    display: inline-flex;
    margin: 0;
}

.delete-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--admin-muted);
    cursor: pointer;
    transition: all 0.18s ease;
}

/* =========================================================
   BADGES & PILLS
   ========================================================= */

.status-pill,
.badge-new,
.badge-read,
.category-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge-new,
.category-badge {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    border: 1px solid var(--admin-border-gold);
}

.badge-read {
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

/* Badge de statut d'article */
.badge-publie {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border: 1px solid rgba(52, 211, 153, 0.3);
}

.badge-brouillon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(148, 163, 184, 0.16);
    color: var(--admin-muted);
    border: 1px solid var(--admin-border);
}

.badge-publie .material-symbols-outlined,
.badge-brouillon .material-symbols-outlined {
    font-size: 14px;
}

/* Ligne de brouillon : légèrement atténuée */
.article-row.is-brouillon {
    opacity: 0.82;
}

.badge-new .material-symbols-outlined,
.badge-read .material-symbols-outlined {
    font-size: 14px;
}

/* =========================================================
   TABLEAUX
   ========================================================= */

.data-table,
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table th {
    padding: 14px 20px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--admin-muted-2);
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--admin-border);
    white-space: nowrap;
}

.admin-table td {
    padding: 16px 20px;
    border-bottom: 1px solid var(--admin-border);
    vertical-align: middle;
}

.admin-table tbody tr,
.contact-row,
.article-row {
    transition: background 0.16s ease;
}

.admin-table tbody tr:hover,
.contact-row:hover,
.article-row:hover {
    background: rgba(212, 175, 55, 0.06);
}

.admin-table tbody tr:last-child td {
    border-bottom: 0;
}

.cell-strong {
    font-weight: 600;
    color: #fff;
}

.cell-muted {
    color: var(--admin-muted);
    font-size: 13px;
}

.article-image {
    width: 66px;
    height: 46px;
    object-fit: cover;
    border-radius: 9px;
    border: 1px solid var(--admin-border);
}

/* =========================================================
   FORMULAIRES
   ========================================================= */

.form-label,
label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--admin-muted) !important;
}

.admin-page input[type="text"],
.admin-page input[type="email"],
.admin-page input[type="password"],
.admin-page input[type="file"],
.admin-page select,
.admin-page textarea,
.form-input,
.form-select {
    width: 100%;
    padding: 13px 15px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: rgba(6, 11, 22, 0.6);
    color: var(--admin-text) !important;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-page input::placeholder,
.admin-page textarea::placeholder,
.form-input::placeholder {
    color: var(--admin-muted-2);
}

.admin-page input:focus,
.admin-page select:focus,
.admin-page textarea:focus,
.form-input:focus,
.form-select:focus {
    border-color: var(--admin-primary) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

.admin-page input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    font-weight: 600;
    cursor: pointer;
}

.admin-search {
    border: 1px solid var(--admin-border);
    background: rgba(6, 11, 22, 0.6);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.admin-search:focus {
    border-color: var(--admin-primary) !important;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16);
}

.form-section {
    padding: 22px;
    margin-bottom: 26px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: rgba(6, 11, 22, 0.34);
}

.form-section h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
}

.video-local-preview {
    max-width: 760px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--admin-border-gold);
    border-radius: var(--admin-radius);
    background: rgba(212, 175, 55, 0.06);
}

.video-local-preview[hidden] {
    display: none;
}

.video-local-preview-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: var(--admin-primary-2);
}

.video-local-preview-head > .material-symbols-outlined {
    font-size: 24px;
}

.video-local-preview-head strong {
    display: block;
    color: var(--admin-text);
    font-size: 14px;
}

.video-local-preview-head p {
    margin: 3px 0 0;
    color: var(--admin-muted);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.video-local-preview video {
    display: block;
    width: 100%;
    max-height: min(60vh, 480px);
    border-radius: 9px;
    background: #000;
}

.form-card {
    padding: 26px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow);
    backdrop-filter: blur(12px);
}

/* =========================================================
   MESSAGES
   ========================================================= */

.admin-alert,
.message-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--admin-radius-sm);
    font-size: 14px;
    border: 1px solid var(--admin-border);
    background: rgba(255, 255, 255, 0.03);
}

.admin-alert-success {
    background: var(--admin-success-soft);
    border-color: rgba(52, 211, 153, 0.35);
    color: #b8f5dc;
}

.admin-alert-success .material-symbols-outlined {
    color: var(--admin-success);
}

.admin-alert-error {
    background: var(--admin-danger-soft);
    border-color: rgba(248, 113, 113, 0.35);
    color: #fecaca;
}

.admin-alert-error .material-symbols-outlined {
    color: var(--admin-danger);
}

/* Variante d'avertissement (ex. migration non appliquée) : ton doré. */
.admin-alert-warning {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--admin-border-gold);
    color: #f5e6b8;
}

.admin-alert-warning .material-symbols-outlined {
    color: var(--admin-gold, #d4af37);
}

.message-box {
    background: rgba(212, 175, 55, 0.06);
    border-color: var(--admin-border-gold);
    color: #eef2f8;
    line-height: 1.8;
}

/* =========================================================
   DÉTAILS
   ========================================================= */

.info-row {
    padding: 15px 0;
    border-bottom: 1px solid var(--admin-border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-row-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--admin-muted-2) !important;
}

.info-row-value {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.info-row-value a {
    color: var(--admin-primary-2);
    text-decoration: none;
}

.info-row-value a:hover {
    text-decoration: underline;
}

.empty-state {
    padding: 48px 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.015);
}

.empty-state .material-symbols-outlined {
    font-size: 52px;
    color: var(--admin-muted-2);
}

/* =========================================================
   QUILL (éditeur)
   ========================================================= */

.ql-toolbar.ql-snow {
    background: rgba(9, 15, 28, 0.9);
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm) var(--admin-radius-sm) 0 0;
}

.ql-container.ql-snow {
    border: 1px solid var(--admin-border);
    border-top: none;
    border-radius: 0 0 var(--admin-radius-sm) var(--admin-radius-sm);
    font-family: 'Inter', sans-serif;
    font-size: 15px;
}

.ql-editor {
    min-height: 420px;
    line-height: 1.8;
    color: #e2e8f0;
}

.ql-snow .ql-stroke {
    stroke: #cbd5e1;
}

.ql-snow .ql-fill {
    fill: #cbd5e1;
}

.ql-snow .ql-picker {
    color: #cbd5e1;
}

.ql-editor h2 {
    color: #fff;
}

.ql-editor blockquote {
    background: rgba(212, 175, 55, 0.07);
    border-left: 3px solid var(--admin-primary);
    padding: 14px 18px;
}

#editor {
    background: rgba(6, 11, 22, 0.6);
    color: #e2e8f0;
}

.image-preview {
    display: none;
    margin-top: 14px;
    max-width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: var(--admin-radius-sm);
    border: 1px solid var(--admin-border);
    box-shadow: var(--admin-shadow-sm);
}

/* =========================================================
   LOGIN
   ========================================================= */

body.admin-login {
    background:
        radial-gradient(circle at 15% 10%, rgba(212, 175, 55, 0.16), transparent 40%),
        linear-gradient(160deg, var(--admin-bg) 0%, var(--admin-bg-2) 55%, var(--admin-bg-3) 100%) !important;
    color: var(--admin-text) !important;
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    padding: 24px;
    display: grid;
    place-items: center;
}

.login-layout {
    width: min(100%, 1040px);
    min-height: min(680px, calc(100vh - 48px));
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    overflow: hidden;
    border: 1px solid var(--admin-border-gold);
    border-radius: 22px;
    background: rgba(11, 18, 33, 0.86);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
}

.login-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 44px;
    overflow: hidden;
    background: linear-gradient(160deg, #0d1526 0%, #070b14 100%);
    color: #fff;
}

.login-aside::before,
.login-aside::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.22);
    border-radius: 50%;
}

.login-aside::before {
    width: 380px;
    height: 380px;
    right: -180px;
    top: -120px;
}

.login-aside::after {
    width: 480px;
    height: 480px;
    bottom: -300px;
    left: -180px;
}

.login-content {
    display: grid;
    place-items: center;
    padding: 44px;
}

.login-form {
    width: min(100%, 390px);
}

.login-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #1a1204;
    background: linear-gradient(135deg, var(--admin-primary), var(--admin-primary-2));
    box-shadow: 0 10px 24px rgba(212, 175, 55, 0.3);
}

.login-eyebrow {
    color: var(--admin-primary) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.login-input {
    background: rgba(6, 11, 22, 0.7) !important;
    border-color: var(--admin-border) !important;
    color: var(--admin-text) !important;
}

.login-input::placeholder {
    color: var(--admin-muted-2);
}

.login-input:focus {
    border-color: var(--admin-primary) !important;
}

body.admin-login h1,
body.admin-login h2 {
    color: #fff !important;
}

body.admin-login p {
    color: #dbe3f0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-aside {
        min-height: 240px;
    }
}

@media (max-width: 992px) {
    .admin-sidebar {
        transform: translateX(-100%);
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    }

    .admin-sidebar.is-open {
        transform: translateX(0);
    }

    .admin-main {
        margin-left: 0;
    }

    .admin-burger {
        display: grid;
    }

    .admin-content {
        padding: 20px;
    }

    .admin-topbar {
        padding: 14px 18px;
    }
}

@media (max-width: 640px) {
    .admin-topbar-icon {
        display: none;
    }

    .admin-topbar-title {
        font-size: 19px;
    }

    .admin-content {
        padding: 16px;
    }

    .admin-stat-value {
        font-size: 26px;
    }

    .desktop-table {
        display: none;
    }

    .mobile-articles {
        display: block;
    }
}

@media (min-width: 641px) {
    .mobile-articles {
        display: none;
    }
}

/* =========================================================
   TABLETTE (<= 992px)
   ========================================================= */

@media (max-width: 992px) {
    /* Barre supérieure : icône et actions compactées */
    .admin-topbar-actions {
        gap: 8px;
    }

    .admin-topbar-actions .primary-button,
    .admin-topbar-actions .btn-gold,
    .admin-topbar-actions .publish-button,
    .admin-topbar-actions .update-button,
    .admin-topbar-actions .btn-ghost,
    .admin-topbar-actions .admin-btn-ghost,
    .admin-topbar-actions .btn-excel {
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Grilles de statistiques : deux colonnes dès la tablette */
    .admin-stat {
        padding: 18px;
    }

    /* Cartes de formulaire plus compactes */
    .form-card {
        padding: 20px;
    }

    .form-section {
        padding: 18px;
    }
}

/* =========================================================
   MOBILE / PETITE TABLETTE (<= 768px)
   ========================================================= */

@media (max-width: 768px) {
    /* --- Barre supérieure : passe en colonnes --- */
    .admin-topbar {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 12px;
    }

    .admin-burger {
        width: 40px;
        height: 40px;
    }

    .admin-topbar-titles {
        gap: 10px;
        flex: 1 1 auto;
    }

    .admin-topbar-title {
        font-size: 18px;
    }

    .admin-topbar-sub {
        font-size: 12px;
    }

    /* Les actions passent sur leur propre ligne. On autorise le retour à
       la ligne au lieu du défilement horizontal : les boutons restent
       entiers (sinon « Tableau de bord » finit tronqué sur petit mobile). */
    .admin-topbar-actions {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        overflow-x: visible;
        padding-bottom: 2px;
    }

    .admin-topbar-actions > * {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* Le titre ne doit pas glisser sous le bouton burger : on lui laisse
       la place restante et on autorise le retour à la ligne. */
    .admin-topbar-titles {
        flex: 1 1 0;
        min-width: 0;
    }

    .admin-topbar-title {
        overflow-wrap: anywhere;
    }

    /* --- Contenu : marges réduites --- */
    .admin-content {
        padding: 14px;
    }

    /* --- Cartes --- */
    .admin-card-head {
        flex-wrap: wrap;
        padding: 16px;
        gap: 10px;
    }

    .admin-card-head h2 {
        font-size: 16px;
    }

    /* --- Barre d'outils / recherche --- */
    .admin-toolbar {
        padding: 12px;
        gap: 10px;
    }

    .admin-toolbar .toolbar-grow {
        flex: 1 1 100%;
        min-width: 0;
    }

    .admin-toolbar .toolbar-select,
    .admin-toolbar .toolbar-action {
        flex: 1 1 calc(50% - 5px);
        width: auto;
    }

    /* Sélecteur d'export : pleine largeur sous la recherche, sans
       chevauchement entre l'icône et le texte sélectionné. */
    .admin-toolbar .export-select {
        flex: 1 1 100%;
        width: 100%;
        justify-content: flex-start;
    }

    .admin-toolbar .export-select-input {
        width: 100%;
    }

    /* --- Statistiques : une colonne lisible --- */
    .admin-stat-value {
        font-size: 28px;
    }

    /* --- Formulaires --- */
    .form-card {
        padding: 16px;
    }

    .form-section {
        padding: 16px;
        margin-bottom: 18px;
    }

    .form-section h2 {
        font-size: 16px;
    }

    /* --- Boutons : pleine largeur et empilés --- */
    .primary-button,
    .publish-button,
    .update-button,
    .btn-gold,
    .btn-excel,
    .btn-ghost,
    .admin-btn-ghost {
        padding: 12px 16px;
    }

    /* --- Éditeur Quill --- */
    .ql-editor {
        min-height: 300px;
        font-size: 14px;
    }

    .ql-toolbar.ql-snow {
        padding: 6px;
    }

    /* --- Tableaux transformés en cartes empilées --- */
    .desktop-table table.admin-table,
    .desktop-table table.data-table,
    table.admin-table.responsive-cards,
    table.data-table.responsive-cards {
        border-collapse: collapse;
    }

    .desktop-table thead,
    table.admin-table.responsive-cards thead,
    table.data-table.responsive-cards thead {
        display: none;
    }

    .desktop-table table.admin-table tr,
    .desktop-table table.data-table tr,
    table.admin-table.responsive-cards tr,
    table.data-table.responsive-cards tr {
        display: block;
        padding: 8px 4px;
        border-bottom: 1px solid var(--admin-border);
    }

    .desktop-table table.admin-table td,
    .desktop-table table.data-table td,
    table.admin-table.responsive-cards td,
    table.data-table.responsive-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 9px 14px;
        border-bottom: 0;
        text-align: right;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* La valeur alignée à droite ne doit pas déborder de la carte. */
    .desktop-table table.admin-table td > *,
    table.admin-table.responsive-cards td > *,
    table.data-table.responsive-cards td > * {
        min-width: 0;
    }

    /* Libellé de colonne repris via data-label */
    .desktop-table table.admin-table td[data-label]::before,
    .desktop-table table.data-table td[data-label]::before,
    table.admin-table.responsive-cards td[data-label]::before,
    table.data-table.responsive-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        margin-right: auto;
        text-align: left;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--admin-muted-2);
    }

    /* La cellule "Article"/"Nom" reste en pleine largeur */
    .desktop-table table.admin-table td[data-label="Article"],
    .desktop-table table.admin-table td[data-label="Nom"],
    table.admin-table.responsive-cards td[data-label="Article"],
    table.admin-table.responsive-cards td[data-label="Nom"],
    table.data-table.responsive-cards td[data-label="Article"],
    table.data-table.responsive-cards td[data-label="Nom"] {
        display: block;
        text-align: left;
        overflow: hidden;
    }

    .desktop-table table.admin-table td[data-label="Article"]::before,
    .desktop-table table.admin-table td[data-label="Nom"]::before,
    table.admin-table.responsive-cards td[data-label="Article"]::before,
    table.admin-table.responsive-cards td[data-label="Nom"]::before,
    table.data-table.responsive-cards td[data-label="Article"]::before,
    table.data-table.responsive-cards td[data-label="Nom"]::before {
        display: block;
        margin: 0 0 6px;
    }

    /* Bloc article (image + titre) : le titre ne doit plus être tronqué
       ni imposer une largeur supérieure à l'écran. */
    .desktop-table table.admin-table td[data-label="Article"] > .flex,
    table.admin-table.responsive-cards td[data-label="Article"] > .flex,
    table.data-table.responsive-cards td[data-label="Article"] > .flex {
        min-width: 0;
        max-width: 100%;
    }

    .desktop-table table.admin-table td[data-label="Article"] .truncate,
    .desktop-table table.admin-table td[data-label="Article"] .max-w-md,
    table.admin-table.responsive-cards td[data-label="Article"] .truncate,
    table.admin-table.responsive-cards td[data-label="Article"] .max-w-md,
    table.data-table.responsive-cards td[data-label="Article"] .truncate,
    table.data-table.responsive-cards td[data-label="Article"] .max-w-md {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    /* Actions alignées à droite */
    .desktop-table table.admin-table td[data-label="Actions"] .flex,
    .desktop-table table.data-table td[data-label="Actions"] .flex,
    table.admin-table.responsive-cards td[data-label="Actions"] .flex,
    table.data-table.responsive-cards td[data-label="Actions"] .flex {
        justify-content: flex-end;
    }

    /* La première ligne de chaque carte (Article / Nom) sans bordure haute */
    .desktop-table table.admin-table tbody tr:first-child td,
    .desktop-table table.data-table tbody tr:first-child td {
        border-top: 0;
    }

    /* --- Détails de contact --- */
    .message-box {
        padding: 14px;
    }

    .info-row-value {
        font-size: 13px;
        word-break: break-word;
    }

    /* --- Connexion --- */
    .login-shell {
        padding: 16px;
    }

    .login-aside {
        padding: 28px 24px;
        min-height: 220px;
    }

    .login-aside h2 {
        font-size: 1.5rem;
    }

    .login-content {
        padding: 26px 22px;
    }
}

/* =========================================================
   PETIT MOBILE (<= 480px)
   ========================================================= */

@media (max-width: 480px) {
    .admin-content {
        padding: 12px;
    }

    .admin-topbar-title {
        font-size: 17px;
    }

    .admin-toolbar .toolbar-select,
    .admin-toolbar .toolbar-action {
        flex: 1 1 100%;
    }

    /* Statistiques plus compactes */
    .admin-stat {
        padding: 16px;
    }

    .admin-stat-value {
        font-size: 24px;
    }

    .admin-stat-icon {
        width: 40px;
        height: 40px;
        font-size: 21px;
    }

    /* Champs de formulaire : on évite les zooms automatiques iOS */
    .admin-page input[type="text"],
    .admin-page input[type="email"],
    .admin-page input[type="password"],
    .admin-page input[type="file"],
    .admin-page select,
    .admin-page textarea,
    .form-input,
    .form-select {
        font-size: 16px;
    }

    .article-image {
        width: 58px;
        height: 42px;
    }

    /* Tableaux : libellé au-dessus de la valeur */
    .desktop-table table.admin-table td,
    .desktop-table table.data-table td {
        padding: 8px 12px;
        font-size: 13px;
    }

    .login-aside {
        padding: 24px 20px;
    }

    .login-content {
        padding: 22px 18px;
    }

    .login-form h1,
    body.admin-login .login-content > .login-form > h1 {
        font-size: 1.6rem;
    }
}/* =========================================================
   TABLEAU DE BORD — RACCOURCIS D'ACTIONS RAPIDES
   =========================================================
   Rangée de tuiles cliquables donnant accès direct aux tâches
   courantes (nouvelle actualité, demandes, membres, échéances).
   --------------------------------------------------------- */

/* Conteneur : grille responsive (2 colonnes en mobile, 4 au large). */
.admin-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 20px 20px;
}

@media (min-width: 1024px) {
    .admin-shortcuts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.admin-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: var(--admin-surface-2, rgba(255, 255, 255, 0.02));
    color: var(--admin-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.admin-shortcut:hover {
    transform: translateY(-2px);
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
}

.admin-shortcut .material-symbols-outlined {
    font-size: 22px;
    color: var(--admin-primary-2);
    flex-shrink: 0;
}

/* Pastille de comptage (ex. nombre de demandes non lues). */
.admin-shortcut-badge {
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .admin-shortcut {
        font-size: 13px;
        padding: 12px 14px;
    }
}

/* =========================================================
   TABLEAU DE BORD — ARCHITECTURE DES DEUX ESPACES
   =========================================================
   Bandeau de synthèse montrant les deux espaces cloisonnés
   (standard / VIP) : leur connexion dédiée, leur tableau de
   bord et leur contenu respectif.
   --------------------------------------------------------- */

.admin-spaces {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 900px) {
    .admin-spaces {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.admin-space {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background: var(--admin-surface-2, rgba(255, 255, 255, 0.02));
    position: relative;
    overflow: hidden;
}

.admin-space::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--admin-primary-2);
    opacity: .8;
}

.admin-space.is-standard::before {
    background: var(--admin-info, #4aa3ff);
}

.admin-space.is-vip::before {
    background: linear-gradient(90deg, #d4af37, #f2d678);
}

.admin-space.is-gratuit::before {
    background: var(--admin-success, #34d399);
}

.admin-space.is-bot::before {
    background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

.admin-space-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-space-badge {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--admin-info-soft);
    color: var(--admin-info);
}

.admin-space.is-vip .admin-space-badge {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
}

.admin-space-badge .material-symbols-outlined {
    font-size: 26px;
}

.admin-space-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--admin-text);
}

.admin-space-sub {
    margin: 3px 0 0;
    font-size: 13px;
    color: var(--admin-muted);
}

/* Liste des contenus inclus / exclus de l'espace. */
.admin-space-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-space-list li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13.5px;
    color: var(--admin-text);
}

.admin-space-list li.is-off {
    color: var(--admin-muted);
}

.admin-space-list .material-symbols-outlined {
    font-size: 19px;
    flex-shrink: 0;
}

.admin-space-list li.is-on .material-symbols-outlined {
    color: var(--admin-success);
}

.admin-space-list li.is-off .material-symbols-outlined {
    color: var(--admin-muted);
    opacity: .7;
}

/* Liens vers les pages publiques de l'espace. */
.admin-space-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.admin-space-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--admin-border);
    border-radius: 10px;
    background: transparent;
    color: var(--admin-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.admin-space-link:hover {
    transform: translateY(-2px);
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
}

.admin-space-link .material-symbols-outlined {
    font-size: 17px;
    color: var(--admin-primary-2);
}

.admin-space-link.is-gold .material-symbols-outlined {
    color: #d4af37;
}

/* =========================================================
   FILTRES PAR PUBLIC (COURS VIDÉO, ESPACES)
   =========================================================
   Boutons de filtre dans la barre d'outils : l'état actif est
   mis en évidence (bordure dorée + fond).
   --------------------------------------------------------- */

.admin-toolbar .btn-ghost.is-active,
.admin-toolbar .admin-btn-ghost.is-active {
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
}

/* =========================================================
   THÈME CLAIR — ADMINISTRATION
   =========================================================
   Actif lorsque <html data-theme="light">. Le thème sombre
   reste la valeur par défaut (aucun attribut). On redéfinit
   ici les variables puis on rattrape les couleurs codées en
   dur (blancs sur fond sombre) pour garantir la lisibilité.
   ========================================================= */

html[data-theme="light"] {
    --admin-bg: #eef2f8;
    --admin-bg-2: #e6ecf5;
    --admin-bg-3: #dde5f0;

    --admin-sidebar: rgba(255, 255, 255, 0.92);
    --admin-surface: rgba(255, 255, 255, 0.92);
    --admin-surface-2: rgba(248, 250, 253, 0.96);
    --admin-surface-solid: #ffffff;

    --admin-border: rgba(15, 23, 42, 0.12);
    --admin-border-gold: rgba(154, 116, 16, 0.45);

    --admin-text: #16203a;
    --admin-muted: #4b5a75;
    --admin-muted-2: #6b7893;

    --admin-primary: #a9840f;
    --admin-primary-2: #c99a1e;
    --admin-primary-soft: rgba(169, 132, 15, 0.12);

    --admin-success: #0f7a4f;
    --admin-success-soft: rgba(16, 122, 87, 0.12);
    --admin-danger: #c0392b;
    --admin-danger-soft: rgba(192, 57, 43, 0.12);
    --admin-info: #1d4ed8;
    --admin-info-soft: rgba(29, 78, 216, 0.12);

    --admin-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
    --admin-shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.10);
}

/* --- Base --- */
html[data-theme="light"] body.admin-page {
    color: var(--admin-text);
    background:
        radial-gradient(circle at 12% -10%, rgba(212, 175, 55, 0.14), transparent 42%),
        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.12), transparent 40%),
        linear-gradient(160deg, var(--admin-bg) 0%, var(--admin-bg-2) 55%, var(--admin-bg-3) 100%);
}

html[data-theme="light"] body.admin-page h1,
html[data-theme="light"] body.admin-page h2,
html[data-theme="light"] body.admin-page h3,
html[data-theme="light"] body.admin-page h4 {
    color: #0f1b34;
}

html[data-theme="light"] body.admin-page p {
    color: #3d4b66;
}

/* --- Sidebar --- */
html[data-theme="light"] .admin-sidebar {
    background: var(--admin-sidebar);
    border-right: 1px solid var(--admin-border);
}

html[data-theme="light"] .admin-brand-name {
    color: #0f1b34;
}

html[data-theme="light"] .admin-brand-sub {
    color: var(--admin-muted);
}

html[data-theme="light"] .admin-nav-title {
    color: var(--admin-muted-2);
}

html[data-theme="light"] .admin-nav-quick {
    background: var(--admin-sidebar);
}

html[data-theme="light"] .admin-nav-quick-link:hover,
html[data-theme="light"] .admin-nav-quick-link.is-active {
    color: #5c4708;
}

html[data-theme="light"] .admin-nav-item {
    color: var(--admin-muted);
}

html[data-theme="light"] .admin-nav-item:hover {
    color: #0f1b34;
    background: rgba(15, 23, 42, 0.05);
}

html[data-theme="light"] .admin-nav-item.is-active {
    color: #5c4708;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(212, 175, 55, 0.08));
}

html[data-theme="light"] .admin-nav-item.is-active .admin-nav-label {
    color: #5c4708;
}

html[data-theme="light"] .admin-nav-icon {
    color: inherit;
}

/* --- Chips / cartes / surfaces translucides --- */
html[data-theme="light"] .admin-user-chip,
html[data-theme="light"] .admin-nav-group,
html[data-theme="light"] .admin-topbar,
html[data-theme="light"] .admin-card,
html[data-theme="light"] .admin-stat,
html[data-theme="light"] .form-card,
html[data-theme="light"] .admin-shortcut {
    background: var(--admin-surface);
    border-color: var(--admin-border);
}

/* Encadrés de formulaire : fond clair au lieu du voile sombre par défaut. */
html[data-theme="light"] .form-section {
    background: rgba(15, 23, 42, 0.03);
    border-color: var(--admin-border);
}

html[data-theme="light"] .admin-user-name,
html[data-theme="light"] .admin-card-head h2,
html[data-theme="light"] .admin-topbar-title,
html[data-theme="light"] .admin-stat-value,
html[data-theme="light"] .cell-strong,
html[data-theme="light"] .admin-block-title,
html[data-theme="light"] .admin-space-title {
    color: #0f1b34;
}

html[data-theme="light"] .admin-user-role,
html[data-theme="light"] .admin-topbar-sub,
html[data-theme="light"] .admin-card-head p,
html[data-theme="light"] .admin-stat-label,
html[data-theme="light"] .admin-stat-hint,
html[data-theme="light"] .cell-muted,
html[data-theme="light"] .admin-block-sub,
html[data-theme="light"] .admin-space-sub {
    color: var(--admin-muted);
}

/* --- Boutons fantômes / actions --- */
html[data-theme="light"] .admin-btn-ghost,
html[data-theme="light"] .btn-ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: var(--admin-border);
    color: var(--admin-text);
}

html[data-theme="light"] .admin-btn-ghost:hover,
html[data-theme="light"] .btn-ghost:hover {
    color: #0f1b34;
    border-color: var(--admin-border-gold);
    background: rgba(212, 175, 55, 0.10);
}

/* --- Champs de formulaire --- */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .admin-search {
    background: #ffffff;
    color: #16203a;
    border-color: var(--admin-border);
}

/* Liste déroulante native : les options sont peintes par le navigateur et
   n'héritent pas du fond du champ. On force une liste sombre (thème admin
   par défaut) et une liste claire en mode clair, pour que le texte reste
   toujours lisible sur son propre fond. */
select option {
    background-color: #0b1220;
    color: #f8fafc;
}

html[data-theme="light"] select {
    color-scheme: light;
}

html[data-theme="light"] select option {
    background-color: #ffffff;
    color: #16203a;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: #8a97b0;
}

/* --- Tableaux --- */
html[data-theme="light"] .admin-table thead th {
    color: var(--admin-muted);
    background: rgba(15, 23, 42, 0.03);
    border-bottom: 1px solid var(--admin-border);
}

html[data-theme="light"] .admin-table tbody tr {
    border-bottom: 1px solid var(--admin-border);
}

html[data-theme="light"] .admin-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.06);
}

html[data-theme="light"] .admin-table td {
    color: var(--admin-text);
}

html[data-theme="light"] .empty-state {
    background: rgba(15, 23, 42, 0.02);
}

/* --- Alertes --- */
html[data-theme="light"] .admin-alert {
    color: var(--admin-text);
}

html[data-theme="light"] .admin-alert-success {
    background: var(--admin-success-soft);
    border-color: rgba(15, 122, 79, 0.35);
    color: #0b5c3c;
}

html[data-theme="light"] .admin-alert-error {
    background: var(--admin-danger-soft);
    border-color: rgba(192, 57, 43, 0.32);
    color: #96261a;
}

/* --- Overlay / drawer (mobile) --- */
html[data-theme="light"] .admin-overlay {
    background: rgba(15, 23, 42, 0.35);
}

/* --- Badges de statut --- */
html[data-theme="light"] .badge-publie {
    background: rgba(15, 122, 79, 0.12);
    color: #0b5c3c;
    border-color: rgba(15, 122, 79, 0.30);
}

html[data-theme="light"] .badge-brouillon {
    background: rgba(120, 90, 10, 0.12);
    color: #6b4e06;
    border-color: rgba(120, 90, 10, 0.28);
}

html[data-theme="light"] .category-badge {
    background: rgba(29, 78, 216, 0.10);
    color: #1e3a8a;
    border-color: rgba(29, 78, 216, 0.25);
}

/* --- Éditeur Quill (articles) --- */
html[data-theme="light"] .ql-toolbar,
html[data-theme="light"] .ql-container {
    background: #ffffff;
    border-color: var(--admin-border);
}

html[data-theme="light"] .ql-editor,
html[data-theme="light"] .ql-editor h2 {
    color: #16203a;
}

html[data-theme="light"] .ql-snow .ql-picker,
html[data-theme="light"] .ql-snow .ql-stroke {
    color: #475569;
    stroke: #475569;
}

/* --- Page de connexion admin (admin/index.php, rh/login.php) --- */
/*
   LE PROBLÈME CORRIGÉ ICI

   Les pages de connexion portent `body.admin-login`, alors que toutes les
   autres règles claires de ce fichier visent `body.admin-page`. Résultat : en
   mode clair, seul le fond de la PAGE passait en clair ; la carte de connexion
   gardait ses fonds sombres codés en dur (.login-layout en rgba(11,18,33,.86),
   .login-aside en bleu nuit).

   Le bloc précédent aggravait la faute en forçant les titres en bleu foncé
   (#0f1b34) SUR ce fond sombre : « Bienvenue » devenait illisible, et les
   champs de saisie restaient noirs sur gris anthracite.

   La règle est simple : en thème clair, la carte, ses deux panneaux, ses
   textes et ses champs doivent TOUS être clairs. On les redéfinit donc
   ensemble, plutôt que par retouches isolées.
*/

/* La carte elle-même : fond blanc, ombre adoucie. */
html[data-theme="light"] body.admin-login .login-layout {
    background: #ffffff;
    border-color: rgba(169, 132, 15, 0.32);
    box-shadow: 0 24px 60px rgba(15, 27, 52, 0.14);
}

/*
   Panneau de gauche.

   Il est volontairement conservé en dégradé sombre : c'est le bandeau
   d'identité (logo, accroche, mention de sécurité), et son contraste avec le
   formulaire clair est un choix graphique assumé, pas un oubli. Ses textes
   restent donc clairs — voir les règles dédiées plus bas.
*/
html[data-theme="light"] body.admin-login .login-aside {
    background: linear-gradient(160deg, #10203a 0%, #0a1524 100%);
    color: #ffffff;
}

/* Panneau de droite (formulaire) : fond clair, texte foncé. */
html[data-theme="light"] body.admin-login .login-content {
    background: #ffffff;
    color: #16203a;
}

html[data-theme="light"] body.admin-login .login-form {
    color: #16203a;
}

/*
   Titres et paragraphes — DEUX CAS À SÉPARER.

   Le bloc précédent appliquait `color: #0f1b34 !important` à TOUS les h1/h2 de
   la page, y compris ceux du panneau sombre : « ZINOVA INVEST ACADEMY » et
   l'accroche disparaissaient sur le bleu nuit. On distingue donc le panneau
   clair du panneau sombre par leur conteneur.
*/

/* 1. Titres du FORMULAIRE (fond blanc) : bleu foncé. */
html[data-theme="light"] body.admin-login .login-content h1,
html[data-theme="light"] body.admin-login .login-content h2 {
    color: #0f1b34 !important;
}

html[data-theme="light"] body.admin-login .login-content p {
    color: #3d4b66;
}

/* 2. Titres du BANDEAU (fond sombre) : blanc, sans exception. */
html[data-theme="light"] body.admin-login .login-aside h1,
html[data-theme="light"] body.admin-login .login-aside h2,
html[data-theme="light"] body.admin-login .login-aside p {
    color: #ffffff !important;
}

/* L'accroche du bandeau garde une teinte adoucie, lisible sur le bleu nuit. */
html[data-theme="light"] body.admin-login .login-aside p {
    color: rgba(226, 232, 240, 0.85) !important;
}

/*
   ÉTIQUETTES ET CHAMPS DE SAISIE

   Ils restaient en gris clair sur fond sombre (champs noirs sur carte
   anthracite). C'est le défaut le plus visible du formulaire.

   ⚠️ `!important` N'EST PAS DÉCORATIF ICI.
   La règle sombre d'origine (ligne ~1398) est écrite :
       .login-input { background: rgba(6, 11, 22, 0.7) !important; }
   Un `!important` ne peut être neutralisé que par un AUTRE `!important`,
   quelle que soit la spécificité du sélecteur. Sans ces marques, le champ
   restait noir en mode clair — c'est exactement ce qui se produisait.
*/
html[data-theme="light"] body.admin-login label {
    color: #3d4b66;
}

html[data-theme="light"] body.admin-login .login-input,
html[data-theme="light"] body.admin-login input[type="text"],
html[data-theme="light"] body.admin-login input[type="email"],
html[data-theme="light"] body.admin-login input[type="password"] {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #0f1b34 !important;
}

html[data-theme="light"] body.admin-login .login-input::placeholder,
html[data-theme="light"] body.admin-login input::placeholder {
    color: #94a3b8 !important;
}

html[data-theme="light"] body.admin-login .login-input:focus,
html[data-theme="light"] body.admin-login input:focus {
    background: #ffffff !important;
    border-color: #a9840f !important;
    outline: none;
}

/* Le sélecteur de thème lui-même, posé sur la carte claire. */
html[data-theme="light"] body.admin-login .admin-theme-toggle {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #16203a;
}

/* Les messages d'alerte (erreur de connexion, expiration de session). */
html[data-theme="light"] body.admin-login .admin-alert-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}

html[data-theme="light"] body.admin-login .admin-alert-error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* --- Sélecteur d'export : conserve son fond vert dans les deux thèmes
   (bouton d'action « télécharger »), le texte reste clair et lisible. */

/* --- Bouton de thème (topbar admin) --- */
.admin-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.4rem;
    padding: 0.85rem;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: var(--admin-surface);
    color: var(--admin-text);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
        transform 0.2s ease;
}

.admin-theme-toggle .material-symbols-outlined {
    font-size: 1.1rem;
}

.admin-theme-toggle:hover,
.admin-theme-toggle:focus-visible {
    border-color: var(--admin-border-gold);
    color: var(--admin-primary-2);
    transform: translateY(-1px);
}

/* Label du bouton de thème admin : masqué sur très petits écrans. */
.admin-theme-toggle-label {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .admin-theme-toggle-label {
        display: none;
    }
}

/* =========================================================
   TABLEAU DE BORD ÉPURÉ — KPI, AIDES & GRILLE HARMONISÉE
   Composants ajoutés pour la refonte du tableau de bord :
   lecture immédiate, hiérarchie claire et encarts d'aide.
   ========================================================= */

/* --- Bandeau de bienvenue / résumé d'activité --------------------------- */

/* Carte unique regroupant la salutation et les 4 chiffres clés : évite un
   bandeau isolé suivi d'une grille détachée, et gagne de la hauteur. */
.dash-overview {
    position: relative;
    overflow: hidden;
    padding: 24px 26px 22px;
    margin-bottom: 22px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background:
        radial-gradient(circle at 88% -20%, rgba(212, 175, 55, 0.16), transparent 60%),
        var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.dash-overview-head {
    margin-bottom: 20px;
}

.dash-hero {
    position: relative;
    overflow: hidden;
    padding: 24px 26px;
    margin-bottom: 24px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius);
    background:
        radial-gradient(circle at 88% -20%, rgba(212, 175, 55, 0.16), transparent 60%),
        var(--admin-surface);
    box-shadow: var(--admin-shadow);
}

.dash-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--admin-primary-2);
}

.dash-hero-eyebrow .material-symbols-outlined {
    font-size: 15px;
}

.dash-hero-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 23px;
    font-weight: 800;
    color: #fff;
}

.dash-hero-text {
    margin: 8px 0 0;
    max-width: 60ch;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--admin-muted);
}

/* --- Grille de KPI essentiels (toujours en colonnes pleines) ------------ */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Empêche une valeur ou une étiquette longue de pousser la carte au-delà de
   sa colonne (cause des débordements horizontaux sur les grilles serrées). */
.dash-kpi,
.dash-kpi-top,
.dash-kpi-label,
.dash-kpi-hint {
    min-width: 0;
}

.dash-kpi-label,
.dash-kpi-hint {
    overflow-wrap: anywhere;
}

@media (min-width: 900px) {
    .dash-kpis {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.dash-kpi {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 15px 16px 15px 18px;
    border: 1px solid var(--admin-border);
    border-radius: 14px;
    background: var(--admin-surface-2);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* Liseré coloré à gauche : identifie chaque KPI d'un coup d'œil, alors que
   les cartes d'action n'en ont pas. */
.dash-kpi::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--admin-primary);
}

.dash-kpi.is-success::before { background: var(--admin-success); }
.dash-kpi.is-info::before    { background: var(--admin-info); }
.dash-kpi.is-gold::before    { background: linear-gradient(180deg, #d4af37, #f2d678); }
.dash-kpi.is-danger::before  { background: var(--admin-danger); }

a.dash-kpi:hover {
    transform: translateY(-3px);
    border-color: var(--admin-border-gold);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.dash-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.dash-kpi-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--admin-muted);
}

.dash-kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 20px;
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    border: 1px solid var(--admin-border-gold);
}

.dash-kpi-icon.is-info {
    background: var(--admin-info-soft);
    color: var(--admin-info);
    border-color: rgba(96, 165, 250, 0.3);
}

.dash-kpi-icon.is-success {
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border-color: rgba(52, 211, 153, 0.3);
}

.dash-kpi-icon.is-danger {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    border-color: rgba(248, 113, 113, 0.3);
}

.dash-kpi-value {
    font-family: 'Montserrat', sans-serif;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
}

.dash-kpi-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--admin-muted);
}

/* Pastille d'alerte quand un KPI demande une action. */
.dash-kpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    font-size: 11px;
    font-weight: 700;
}

.dash-kpi-badge.is-warn {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
}

/* Variante « tout va bien » : signale l'absence d'alerte sans crier. */
.dash-kpi-badge.is-calm {
    background: var(--admin-success-soft);
    color: var(--admin-success);
}

/* --- Encart d'aide / astuce -------------------------------------------- */
.dash-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 22px;
    border: 1px solid rgba(96, 165, 250, 0.28);
    border-left-width: 3px;
    border-radius: 12px;
    background: var(--admin-info-soft);
}

.dash-tip-icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--admin-info);
}

.dash-tip-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--admin-muted);
    margin: 0;
}

.dash-tip-text strong {
    color: #fff;
}

/* Variante dorée : conseil « bon à savoir ». */
.dash-tip.is-gold {
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
}

.dash-tip.is-gold .dash-tip-icon {
    color: var(--admin-primary-2);
}

/* --- Grille de cartes harmonisée (colonnes pleines) -------------------- */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}

/* --- Cartes d'action : plus compactes que .admin-stat ------------------ */
.dash-action {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    border-radius: 13px;
    background: var(--admin-surface);
    box-shadow: var(--admin-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, border-color 0.18s ease;
}

.dash-action:hover {
    transform: translateY(-3px);
    border-color: var(--admin-border-gold);
}

.dash-action-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 22px;
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    border: 1px solid var(--admin-border-gold);
}

.dash-action-body {
    min-width: 0;
    flex: 1;
}

.dash-action-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.dash-action-desc {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--admin-muted-2);
}

.dash-action-count {
    flex-shrink: 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    font-size: 12px;
    font-weight: 700;
}

/* --- Numéro d'étape dans un titre de section --------------------------- */
.admin-block-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 999px;
    background: var(--admin-primary-soft);
    border: 1px solid var(--admin-border-gold);
    color: var(--admin-primary-2);
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}

/* --- Bloc « À traiter aujourd'hui » ------------------------------------ */
/* N'apparaît que s'il y a réellement une action attendue : une liste de
   points actionnables, plus utile et plus calme qu'un bandeau générique. */
.dash-attention {
    margin-bottom: 26px;
    padding: 16px 18px;
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: var(--admin-radius);
    background:
        linear-gradient(180deg, rgba(248, 113, 113, 0.09), transparent 70%),
        var(--admin-surface);
    box-shadow: var(--admin-shadow-sm);
}

.dash-attention-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-attention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    font-size: 21px;
    color: var(--admin-danger);
    background: var(--admin-danger-soft);
    border: 1px solid rgba(248, 113, 113, 0.3);
}

.dash-attention-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.dash-attention-sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--admin-muted);
}

.dash-attention-list {
    display: grid;
    gap: 8px;
}

.dash-attention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 13px;
    border: 1px solid var(--admin-border);
    border-radius: 11px;
    background: var(--admin-surface-2);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.16s ease, transform 0.16s ease;
}

.dash-attention-item:hover {
    border-color: var(--admin-border-gold);
    transform: translateX(2px);
}

.dash-attention-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 999px;
}

.dash-attention-dot.is-danger { background: var(--admin-danger); box-shadow: 0 0 0 3px var(--admin-danger-soft); }
.dash-attention-dot.is-warn   { background: var(--admin-primary-2); box-shadow: 0 0 0 3px var(--admin-primary-soft); }

.dash-attention-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #dbe3f0;
}

.dash-attention-text strong {
    color: #fff;
}

.dash-attention-go {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--admin-muted-2);
}

/* --- Aide contextuelle compacte (remplace les bandeaux pleine largeur) -- */
.dash-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--admin-muted);
}

.dash-note .material-symbols-outlined {
    flex-shrink: 0;
    font-size: 17px;
    color: var(--admin-primary-2);
    margin-top: 1px;
}

.dash-note strong {
    color: #e6ecf7;
}

/* --- Séparation douce entre grands blocs ------------------------------- */
.dash-sep {
    height: 1px;
    margin: 30px 0 26px;
    background: linear-gradient(90deg, transparent, var(--admin-border), transparent);
}

/* --- Repli des KPI sur très petits écrans ------------------------------ */
@media (max-width: 460px) {
    .dash-kpis {
        grid-template-columns: minmax(0, 1fr);
    }

    .dash-kpi-value {
        font-size: 28px;
    }

    .dash-overview {
        padding: 20px;
    }
}
/* =========================================================
   TABLEAU DE BORD — RAFFINEMENTS UX/UI
   Améliorations ciblées (bandeau, KPI, synthèse, jauges).
   ========================================================= */

/* --- Bandeau d'accueil : filet de séparation avant les KPI -------------- */
/* Sépare nettement le titre « Bonjour … » de la grille de chiffres,
   pour que les 4 indicateurs se lisent comme des données, pas comme la
   suite du texte d'accueil. */
.dash-overview-head {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--admin-border);
}

/* --- KPI : liseré plus présent + survol plus net ------------------------ */
/* Le liseré coloré passe de 3px à 4px et se colore au survol pour
   renforcer l'identité de chaque indicateur. */
.dash-kpi::before {
    width: 4px;
    transition: width 0.18s ease;
}

a.dash-kpi:hover::before {
    width: 6px;
}

.dash-kpi-badge {
    margin-top: 2px;
}

/* =========================================================
   SYNTHÈSE EN TÊTE DE SECTION (chiffres clés d'un bloc)
   ========================================================= */

.dash-stats-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

@media (min-width: 760px) {
    .dash-stats-strip {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.dash-stats-strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-surface-2);
}

.dash-stats-strip-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 20px;
    background: var(--admin-info-soft);
    color: var(--admin-info);
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.dash-stats-strip-icon.is-gold {
    background: var(--admin-primary-soft);
    color: var(--admin-primary-2);
    border-color: var(--admin-border-gold);
}

.dash-stats-strip-icon.is-success {
    background: var(--admin-success-soft);
    color: var(--admin-success);
    border-color: rgba(52, 211, 153, 0.3);
}

.dash-stats-strip-icon.is-danger {
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
    border-color: rgba(248, 113, 113, 0.3);
}

.dash-stats-strip-icon.is-muted {
    background: rgba(148, 163, 184, 0.12);
    color: var(--admin-muted);
    border-color: var(--admin-border);
}

.dash-stats-strip-value {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #fff;
}

.dash-stats-strip-label {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--admin-muted);
}

/* =========================================================
   JAUGE DE CONSOMMATION DE TOKENS
   ========================================================= */

.token-gauge {
    position: relative;
    margin-top: 7px;
    height: 7px;
    min-width: 130px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.token-gauge-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4af37, #f5d16b);
    transition: width 0.35s ease;
}

.token-gauge-fill.is-critical {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

/* --- Thème clair : lisibilité des nouveaux éléments -------------------- */
html[data-theme="light"] .dash-stats-strip-value,
html[data-theme="light"] .dash-stats-strip-icon {
    color: #0f1b34;
}

html[data-theme="light"] .dash-stats-strip-item {
    background: #ffffff;
}

html[data-theme="light"] .token-gauge {
    background: rgba(15, 23, 42, 0.1);
}/* =========================================================
   ÉTAT VIDE — PLUS STRUCTURÉ
   Un fond à peine visible donnait l'impression d'un « trou » dans la page.
   On lui donne une bordure en pointillés discrète pour qu'il se lise comme
   un état volontaire, et non comme un contenu manquant.
   ========================================================= */

.empty-state {
    border: 1px dashed var(--admin-border);
    border-radius: var(--admin-radius-sm);
    margin-top: 4px;
}

.empty-state .material-symbols-outlined {
    opacity: 0.75;
}

html[data-theme="light"] .empty-state {
    border-color: rgba(15, 23, 42, 0.16);
}/* =========================================================
   TABLEAU DE BORD — CORRECTIONS DU THÈME CLAIR
   Les valeurs et titres des cartes `dash-*` étaient codés en #fff pour le
   thème sombre (défaut). En mode clair, ils devenaient blancs sur fond
   clair, donc illisibles. On repasse ici toutes ces couleurs en encre
   foncée lisible.
   ========================================================= */

/* --- Bandeau d'accueil --------------------------------------------------- */
html[data-theme="light"] .dash-hero-title {
    color: #0f1b34;
}

html[data-theme="light"] .dash-hero-text {
    color: var(--admin-muted);
}

/* --- Valeurs des KPI et de la synthèse ----------------------------------- */
html[data-theme="light"] .dash-kpi-value,
html[data-theme="light"] .dash-stats-strip-value {
    color: #0f1b34;
}

html[data-theme="light"] .dash-kpi-label,
html[data-theme="light"] .dash-kpi-hint {
    color: var(--admin-muted);
}

/* --- Cartes d'action (titres et descriptions) ---------------------------- */
html[data-theme="light"] .dash-action-title {
    color: #0f1b34;
}

html[data-theme="light"] .dash-action-desc {
    color: var(--admin-muted);
}

html[data-theme="light"] .dash-action {
    background: var(--admin-surface);
}

/* --- Encart « À traiter aujourd'hui » ------------------------------------ */
html[data-theme="light"] .dash-attention-title {
    color: #0f1b34;
}

html[data-theme="light"] .dash-attention-text {
    color: var(--admin-text);
}

html[data-theme="light"] .dash-attention-text strong {
    color: #0f1b34;
}

/* --- Bloc d'astuce ------------------------------------------------------- */
html[data-theme="light"] .dash-tip-text {
    color: var(--admin-muted);
}

html[data-theme="light"] .dash-tip-text strong {
    color: #0f1b34;
}

/* --- Textes forts / muets du tableau ------------------------------------ */
html[data-theme="light"] .dash-note strong {
    color: #0f1b34;
}

html[data-theme="light"] .cell-strong {
    color: #0f1b34;
}

/* --- Compteurs des cartes d'action (pastille) --------------------------- */
html[data-theme="light"] .dash-action-count {
    color: #0f1b34;
}
/* =========================================================
   TABLEAU DE BORD — ENTONNOIR : ÉTAT, ALERTES, ACTIONS
   =========================================================
   Le tableau de bord répond à trois questions, dans cet ordre :
     1. où j'en suis        -> .dash-tools + .dash-kpis
     2. qu'est-ce qui m'attend -> .dash-attention + .dash-panel
     3. que veux-je faire   -> .dash-action
   Chaque composant ci-dessous sert UNE seule de ces questions.
   Toutes les couleurs passent par les variables du thème, ce qui
   les rend valables en sombre (défaut) comme en clair.
   ========================================================= */

/* --- Barre d'outils de l'en-tête --------------------------------------- */
/* Les actions les plus fréquentes vivaient à mi-page ; elles sont
   désormais en haut, et restent accessibles au défilement. */
.dash-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.dash-tool {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--admin-border);
    border-radius: 999px;
    background: var(--admin-surface-2);
    color: var(--admin-text);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.dash-tool:hover {
    border-color: var(--admin-border-gold);
    background: var(--admin-primary-soft);
    transform: translateY(-1px);
}

.dash-tool:focus-visible {
    outline: 2px solid var(--admin-primary-2);
    outline-offset: 2px;
}

.dash-tool .material-symbols-outlined {
    font-size: 17px;
    color: var(--admin-primary-2);
}

/* Badge de compteur posé sur un outil (demandes non lues, etc.). */
.dash-tool-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--admin-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.6;
}

/* --- État de l'activité, à droite de la salutation --------------------- */
.dash-overview-status {
    flex-shrink: 0;
    text-align: right;
}

.dash-overview-date {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--admin-muted-2);
}

.dash-overview-state {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(52, 211, 153, 0.32);
    background: var(--admin-success-soft);
    color: var(--admin-success);
    font-size: 12.5px;
    font-weight: 700;
}

.dash-overview-state.is-alerte {
    border-color: rgba(248, 113, 113, 0.36);
    background: var(--admin-danger-soft);
    color: var(--admin-danger);
}

.dash-overview-state .material-symbols-outlined {
    font-size: 17px;
}

/* L'en-tête devient une ligne souple : salutation à gauche, état à droite. */
.dash-overview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

/* --- Jauge compacte (part d'actifs dans un ensemble) ------------------- */
.dash-gauge {
    height: 6px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.dash-gauge-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--admin-primary), var(--admin-primary-2));
    transition: width 0.4s ease;
}

.dash-gauge-fill.is-success {
    background: linear-gradient(90deg, #10b981, var(--admin-success));
}

.dash-gauge-fill.is-danger {
    background: linear-gradient(90deg, #dc2626, var(--admin-danger));
}

/* --- Corps en deux colonnes -------------------------------------------- */
/* L'essentiel à gauche, les panneaux de surveillance à droite : deux
   rythmes de lecture distincts, au lieu de neuf blocs pleine largeur. */
.dash-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (min-width: 1100px) {
    .dash-cols {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

.dash-col {
    min-width: 0;
}

.dash-col-side {
    display: grid;
    gap: 16px;
}

/* --- Panneau compact de surveillance ----------------------------------- */
/* Résumé d'un tableau long (échéances, réinitialisations, tokens) :
   un chiffre qui compte, une phrase, un lien vers le détail. */
.dash-panel {
    padding: 16px 18px;
    border: 1px solid var(--admin-border);
    border-radius: var(--admin-radius-sm);
    background: var(--admin-surface-2);
    box-shadow: var(--admin-shadow-sm);
}

.dash-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dash-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 18px;
    color: var(--admin-primary-2);
    background: var(--admin-primary-soft);
    border: 1px solid var(--admin-border-gold);
}

.dash-panel-icon.is-danger {
    color: var(--admin-danger);
    background: var(--admin-danger-soft);
    border-color: rgba(248, 113, 113, 0.3);
}

.dash-panel-icon.is-info {
    color: var(--admin-info);
    background: var(--admin-info-soft);
    border-color: rgba(96, 165, 250, 0.3);
}

.dash-panel-title {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--admin-text);
}

.dash-panel-sub {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--admin-muted-2);
}

/* Chiffres clés du panneau : deux colonnes, valeur au-dessus du libellé. */
.dash-panel-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.dash-panel-figure {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--admin-border);
    background: var(--admin-surface);
}

.dash-panel-value {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--admin-text);
}

.dash-panel-value.is-danger { color: var(--admin-danger); }
.dash-panel-value.is-warn   { color: var(--admin-primary-2); }
.dash-panel-value.is-calm   { color: var(--admin-success); }

.dash-panel-label {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--admin-muted);
    overflow-wrap: anywhere;
}

.dash-panel-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 13px;
    color: var(--admin-primary-2);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.dash-panel-link:hover {
    text-decoration: underline;
}

.dash-panel-link:focus-visible {
    outline: 2px solid var(--admin-primary-2);
    outline-offset: 2px;
}

.dash-panel-link .material-symbols-outlined {
    font-size: 17px;
}

/* État vide interne à un panneau : discret, jamais un « trou » visuel. */
.dash-panel-vide {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12.5px;
    color: var(--admin-muted);
}

.dash-panel-vide .material-symbols-outlined {
    font-size: 17px;
    color: var(--admin-success);
}

/* --- Réglages fins du bandeau de pilotage ------------------------------ */
/* Les tuiles informent : elles n'ont pas besoin de la hauteur d'une carte
   d'action, d'où un pas vertical légèrement resserré. */
.dash-kpi-value {
    letter-spacing: -0.02em;
}

.dash-kpi-hint {
    line-height: 1.45;
}

@media (max-width: 720px) {
    .dash-overview-status {
        text-align: left;
    }

    .dash-tools {
        gap: 6px;
    }

    .dash-tool {
        padding: 8px 12px;
        font-size: 12px;
    }
}