/* =============================================================================
   SINI School Management — feuille de style applicative
   Variables CSS branchées sur l'identité visuelle de l'école courante
   (TenantContext peut les réécrire via une balise <style> servie en SSR).
   ============================================================================= */

/* ----- Bandeau MODE DÉMO ----- */
.demo-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(90deg, #F97316, #FBBF24);
    color: #0F172A;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.demo-banner a {
    color: #0F172A;
    text-decoration: underline;
    font-weight: 700;
}

:root {
    --primary: #1E5F8A;
    --primary-dark: #144460;
    --accent: #E6A817;
    --bg: #F5F7FA;
    --card: #FFFFFF;
    --border: #E2E8F0;
    --text: #1A202C;
    --muted: #64748B;
    --success: #16A34A;
    --danger: #DC2626;
    --warning: #D97706;
    --info: #2563EB;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }

/* ===== Login ===== */
.login-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.login-card {
    background: white; padding: 40px; border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2); width: 380px;
}
.logo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.logo-circle {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 18px;
}
.school-name { font-size: 14px; font-weight: bold; }
.domain { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ===== App shell ===== */
/* Layout viewport-locké : la barre latérale et l'entête restent visibles, seul le contenu défile. */
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: 56px 1fr 32px;
    grid-template-areas: 'side header' 'side main' 'side foot';
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}
/* Quand un bandeau fixe (mode démo, mode visite AdminCentral ou AdminGroupe)
   occupe les 40px en haut du viewport, on REDUIT la hauteur effective du
   shell ET on le pousse vers le bas. Sans ça, .sidebar (height: 100vh) et
   la zone 'foot' du grid dépassent en bas du viewport et sont clipsés par
   body { overflow: hidden } — symptôme : footer Compte/Logout invisible,
   menu mobile coupé sous le bandeau. */
.app-shell.with-banner {
    margin-top: 40px;
    height: calc(100vh - 40px);
}
.app-shell.with-banner .sidebar {
    height: calc(100vh - 40px);
}
.sidebar {
    grid-area: side; background: var(--primary-dark); color: white;
    /* Padding-top à 0 (de 16px historique, puis 6px, maintenant 0) pour coller
       le logo en haut absolu du panneau — la demande UX étant un logo « bien
       remonté » et non plus juste un peu décollé du bord. */
    padding: 0 0 16px;
    /* Layout flex-column : header (.brand) et footer (.sidebar-footer) restent
       FIXES en haut et en bas, seule la <nav> du milieu défile. Sans ce flex,
       le scroll global de .sidebar emportait aussi la marque et le footer. */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;   /* le scroll se fait dans .sidebar nav, pas ici */
}
/* Header (marque) : taille naturelle, jamais réduit ni étiré.
   Padding-top: 4px et padding-bottom: 6px pour un header très compact
   (l'image SVG porte déjà un margin-bottom: 8px côté inline-style dans
   MainLayout.razor pour aérer entre logo et nom d'école). */
.sidebar .brand {
    flex: none;
    padding: 4px 16px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar .brand .name { font-weight: bold; font-size: 13px; }
.sidebar .brand .domain { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 4px; }
/* Zone scrollable au milieu — prend toute la place restante entre header et
   footer. min-height: 0 est nécessaire pour que overflow-y:auto fonctionne
   dans un parent flex (sinon le contenu pousse au-delà du viewport). */
.sidebar nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Scrollbar Firefox : fine, blanche translucide sur fond transparent —
       cohérent avec le fond bleu foncé de la sidebar (la scrollbar grise par
       défaut du navigateur tranche violemment). */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
/* Scrollbar WebKit (Chrome / Edge / Safari) — équivalent visuel de scrollbar-color. */
.sidebar nav::-webkit-scrollbar {
    width: 6px;
}
.sidebar nav::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}
.sidebar nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.28);
}
.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.4);
}
.sidebar nav .section {
    padding: 16px 16px 4px; font-size: 10px; text-transform: uppercase;
    color: rgba(255,255,255,0.4); letter-spacing: 1px;
}
.sidebar nav a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; color: rgba(255,255,255,0.85);
    text-decoration: none; font-size: 13px; border-left: 3px solid transparent;
}
.sidebar nav a:hover { background: rgba(255,255,255,0.08); }
.sidebar nav a.active { background: var(--primary); border-left-color: var(--accent); }
/* Conteneur fixe d'icônes dans la sidebar — garantit un alignement vertical
   parfait entre tous les NavLink, même si certaines icônes ont des proportions
   légèrement différentes. La taille 18px évite la concurrence visuelle avec
   le texte 13px. */
.sidebar nav a .sb-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; flex: none;
    color: rgba(255,255,255,0.75);
}
.sidebar nav a:hover .sb-icon,
.sidebar nav a.active .sb-icon { color: #fff; }

/* Footer sidebar — petit pavé discret toujours visible en bas. Comme la
   sidebar est en flex-column et que .sidebar nav est la seule zone
   scrollable, ce footer reste collé au bas de l'écran indépendamment du
   scroll. Le bordure-top sert de séparateur visuel avec le dernier NavLink. */
.sidebar-footer {
    flex: none;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: var(--primary-dark);   /* couvre tout flash de fond */
    text-align: center;
    color: rgba(255,255,255,0.45);
    font-size: 11px;
    line-height: 1.5;
}
.sidebar-footer .sb-foot-brand {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
}
.sidebar-footer .sb-foot-ver {
    margin-left: 4px;
    color: rgba(255,255,255,0.35);
    font-weight: 400;
}
.sidebar-footer .sb-foot-copy {
    margin-top: 2px;
    font-size: 10px;
    color: rgba(255,255,255,0.3);
}

.topbar {
    grid-area: header; background: white; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
}
.topbar h2 { font-size: 16px; }
.user-info { display: flex; align-items: center; gap: 12px; }
.user-info .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 12px;
}
.user-info .name { font-size: 12px; font-weight: bold; }
.user-info .role { font-size: 10px; color: var(--muted); }
.logout { color: var(--danger); cursor: pointer; font-size: 12px; text-decoration: none; }

.content {
    grid-area: main;
    padding: 24px;
    overflow-y: auto;
    /* Hauteur exacte = viewport − topbar (56) − footer (32). Quand un bandeau
       fixe est présent (mode démo, impersonation), .app-shell.with-banner
       réduit déjà la hauteur du shell de 40 px et applique margin-top: 40px ;
       il faut donc compenser sur .content aussi sinon le bas du scroll devient
       inaccessible (cas vu : derniers apprenants invisibles en mode grille). */
    height: calc(100vh - 56px - 32px);
    /* Scroll fluide iOS — surtout utile en mode grille où les cartes peuvent
       descendre loin et où le tap-scroll natif est attendu. */
    -webkit-overflow-scrolling: touch;
    /* Évite que la dernière ligne de cartes soit collée contre le bord. */
    scroll-padding-bottom: 16px;
}
.app-shell.with-banner .content {
    /* 88 px = topbar 56 + footer 32, + 40 px du bandeau fixe = 128 px. */
    height: calc(100vh - 128px);
}

/* ===== Footer applicatif ===== */
/* Bandeau bas compact : statut système + branding + badge conformité + liens utiles.
   32 px de hauteur pour rester discret sur les écrans denses, intégré dans le grid
   app-shell (zone 'foot') donc reste visible quel que soit le scroll de .content. */
.appfoot {
    grid-area: foot;
    background: #FAFAFA;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    font-size: 11px;
    color: var(--muted, #6B7280);
    overflow: hidden;
    white-space: nowrap;
}
.appfoot .foot-left  { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.appfoot .foot-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.appfoot .foot-sep   { color: #D1D5DB; }
.appfoot a           { color: var(--primary, #1E5F8A); text-decoration: none; }
.appfoot a:hover     { text-decoration: underline; }
.appfoot .foot-status { display: inline-flex; align-items: center; gap: 6px; }
.appfoot .foot-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 0 2px rgba(16,185,129,.18);
    animation: foot-pulse 2.4s ease-in-out infinite;
}
.appfoot .foot-badge {
    background: #EFF6FF; color: #1E5F8A; padding: 1px 7px; border-radius: 10px;
    font-weight: 600; font-size: 10px; letter-spacing: .3px;
}
.appfoot .foot-version { color: #9CA3AF; font-variant-numeric: tabular-nums; }
@keyframes foot-pulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
    50%      { box-shadow: 0 0 0 5px rgba(16,185,129,.05); }
}
@media (max-width: 640px) {
    .appfoot { font-size: 10px; padding: 0 10px; gap: 8px; }
    .appfoot .foot-badge,
    .appfoot .foot-version { display: none; }
}

/* ===== Spinner réutilisable =====
   Petit anneau qui tourne, à mettre dans un bouton pendant une action longue
   (génération PDF, envoi multi-canal…). Hérite de currentColor donc s'adapte
   à la couleur du bouton. Tailles : .spinner (14px) / .spinner-lg (24px). */
.spinner, .spinner-lg {
    display: inline-block; vertical-align: -2px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: spin 0.7s linear infinite;
}
.spinner    { width: 14px; height: 14px; margin-right: 6px; }
.spinner-lg { width: 24px; height: 24px; margin-right: 8px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Overlay de chargement positionné par-dessus une zone preview pendant la
   génération PDF. Bloque visuellement la zone, montre un spinner centré. */
.preview-loading-overlay {
    position: absolute; inset: 0; background: rgba(255,255,255,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 10; backdrop-filter: blur(1px);
}
.preview-loading-overlay .loading-box {
    background: white; border: 1px solid #E2E8F0; border-radius: 8px;
    padding: 16px 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    display: flex; align-items: center; gap: 12px; color: #1E5F8A;
    font-weight: 500; font-size: 14px;
}

/* ===== Headings ===== */
h1 { font-size: 22px; margin-bottom: 4px; color: var(--text); }
h2 { font-size: 16px; margin-bottom: 12px; }
h3 { font-size: 14px; margin-bottom: 8px; color: var(--muted); }
.muted { color: var(--muted); margin-bottom: 16px; }

/* ===== Cards ===== */
.card {
    background: var(--card); border-radius: 8px; border: 1px solid var(--border);
    padding: 20px; margin-bottom: 16px;
}
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }

/* ===== Stats ===== */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--card); padding: 20px; border-radius: 8px; border: 1px solid var(--border); }
.stat-card .label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 28px; font-weight: bold; margin: 8px 0 4px; color: var(--primary-dark); }
.stat-card .change { font-size: 11px; color: var(--muted); }

/* ===== Tables ===== */
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.table th {
    background: #F8FAFC; padding: 10px 12px; text-align: left;
    font-weight: 600; border-bottom: 2px solid var(--border);
    color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px;
}
table.table td { padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.table tr:hover { background: #F8FAFC; }
table.table .amount { text-align: right; font-variant-numeric: tabular-nums; }
table.table tr.total { background: #F8FAFC; font-weight: 700; }
table.table tr.total td { border-top: 2px solid var(--primary); }

/* ===== Badges ===== */
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.badge-success { background: #DCFCE7; color: #166534; }
.badge-danger  { background: #FEE2E2; color: #991B1B; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-info    { background: #DBEAFE; color: #1E40AF; }

/* =====================================================================
   MODALES — Styles globaux (R32)
   =====================================================================
   Deux patterns supportés pour rétro-compatibilité avec les ~35 pages
   existantes qui les redéfinissaient localement :

     Pattern legacy  : .modal-overlay + .modal-content
                       (1 conteneur unique, padding inline, simple)
     Pattern moderne : .modal-overlay + .modal-box (+ .modal-header /
                       .modal-body / .modal-footer / .modal-close)
                       (structure en 3 zones avec séparations)

   Toute NOUVELLE modale doit utiliser le pattern moderne. Les composants
   qui redéfinissent encore localement peuvent supprimer leur bloc sans
   risque tant qu'ils n'ont pas customisé (padding, max-width, etc.).
   ===================================================================== */

.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}

/* ----- Pattern legacy ----- */
.modal-content {
    background: #fff; padding: 24px; border-radius: 8px;
    max-width: 600px; width: 90%; max-height: 90vh; overflow-y: auto;
}

/* ----- Pattern moderne ----- */
.modal-box {
    background: #fff; border-radius: 10px;
    max-height: 90vh; max-width: 640px; width: 100%;
    display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.modal-small { max-width: 480px; }

.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid #E5E7EB;
}
.modal-header h2 {
    margin: 0; font-size: 15px; color: var(--primary);
    display: inline-flex; align-items: center; gap: 6px;
}
.modal-close {
    background: none; border: none; cursor: pointer;
    color: #6B7280; padding: 4px; line-height: 1;
    display: inline-flex; align-items: center; font-size: 22px;
}
.modal-close:hover { color: var(--primary); }
.modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: 12px 18px; border-top: 1px solid #E5E7EB;
    display: flex; gap: 8px; justify-content: flex-end;
}

/* ----- Formulaires dans les modales ----- */
.form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.form-grid .form-group.full { grid-column: 1 / -1; }
.form-grid .form-group label {
    display: block; font-size: 13px; font-weight: 600;
    margin-bottom: 4px; color: #374151;
}
.form-grid .form-control,
.form-grid .form-select {
    width: 100%; padding: 6px 10px;
    border: 1px solid #D1D5DB; border-radius: 6px;
    font-size: 14px; background: white;
}
.form-grid .form-control:focus,
.form-grid .form-select:focus {
    outline: none; border-color: var(--primary);
}
.required { color: var(--danger); }

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
}

/* ===== Buttons ===== */
.btn-primary, .btn-secondary, .btn-danger {
    padding: 8px 16px; border: none; border-radius: 6px;
    font-weight: 600; cursor: pointer; font-size: 13px;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: white; color: var(--primary); border: 1px solid var(--primary); }
.btn-secondary:hover { background: var(--primary); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-sm { padding: 4px 10px; font-size: 11px; }

/* ===== Form ===== */
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; margin-bottom: 4px; font-weight: 600; }
.form-control, .form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px;
}
.form-control:focus, .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary); }
.form-control.inline { width: auto; padding: 4px 6px; }
.form-control.inline.w-80 { width: 80px; }
.form-control.inline.w-100 { width: 100px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.filter-row { display: flex; gap: 12px; margin-bottom: 16px; }
.filter-row > * { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }

/* ===== Grade input (autosave) ===== */
.grade { width: 60px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; text-align: center; font-size: 12px; }
.grade:focus { border-color: var(--primary); outline: none; }
.grade.saved { background: #DCFCE7; border-color: var(--success); }

/* ===== Layout helpers ===== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row { display: flex; gap: 12px; }
.col { flex: 1; }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

/* ===== Alerts ===== */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 12px; font-size: 13px; }
.alert-success { background: #DCFCE7; color: #166534; border-left: 3px solid var(--success); }
.alert-danger  { background: #FEE2E2; color: #991B1B; border-left: 3px solid var(--danger); }

/* ===== Pager ===== */
.pager { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.pager span { font-size: 12px; color: var(--muted); }

/* ===== Sections (settings) ===== */
.cycle-section, .level-section { margin-bottom: 24px; }
.cycle-section header, .level-section header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.cycle-section .count { color: var(--muted); font-weight: normal; font-size: 12px; }


/* =============================================================================
   ★ RESPONSIVE MOBILE & TABLET (chantier 2B — PWA)
   =============================================================================
   On garde le layout desktop intact tel quel et on l'écrase à partir de
   768px. Stratégie :
     - sidebar repliée par défaut, hamburger dans la topbar
     - tables transformées en cartes (1 ligne = 1 carte avec libellés)
     - form-grid en 1 colonne
     - boutons à 44px de hauteur minimum (Apple HIG / Material)
     - card padding réduit pour gagner de l'espace
   La tablette (769-1024px) voit une version intermédiaire avec sidebar
   visible mais formulaires en 2 colonnes.
   ============================================================================= */

/* ===== Hamburger button (mobile uniquement) ===== */
.hamburger-btn {
    display: none;   /* visible seulement <= 768px */
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
    width: 44px; height: 44px;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
}
.hamburger-btn span {
    display: block;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: all 0.2s;
}
.sidebar-overlay {
    display: none;   /* visible quand body.sidebar-open en mobile */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    backdrop-filter: blur(2px);
}

/* ===== TABLETTE : 769-1024px ===== */
@media (max-width: 1024px) {
    .form-grid { grid-template-columns: 1fr 1fr; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
}

/* ===== MOBILE : <= 768px ===== */
@media (max-width: 768px) {
    /* ----- Layout général ----- */
    /* On lève l'overflow:hidden imposé en desktop pour que le scroll natif marche */
    html, body { overflow-y: auto; height: auto; }

    .app-shell {
        display: block;     /* on sort du grid 2 colonnes */
        height: auto;
        min-height: 100vh;
    }

    /* ----- Sidebar : hors-écran par défaut, slide-in via .sidebar-open ----- */
    .sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 280px;
        max-width: 85vw;
        z-index: 101;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; }

    .app-shell .sidebar { padding-top: 16px; }

    /* Quand un bandeau fixe (mode démo orange, mode visite AdminCentral bleu,
       vue réseau AdminGroupe violet) occupe le haut du viewport, on décale la
       sidebar mobile pour qu'elle commence SOUS le bandeau — sinon les
       premiers items du menu ("Tableau de bord" en tête) restent invisibles
       derrière la barre. La classe .with-banner est posée par MainLayout
       quand l'un quelconque des bandeaux est actif. */
    .app-shell.with-banner .sidebar {
        top: 40px;
        height: calc(100vh - 40px);
    }
    .app-shell.with-banner .sidebar-overlay {
        top: 40px;
    }

    /* ----- Topbar : compacte + hamburger ----- */
    .topbar {
        padding: 0 12px;
        position: sticky;
        top: 0;
        z-index: 50;
        height: 56px;
        gap: 8px;
    }
    .topbar h2 { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hamburger-btn { display: flex; }

    .user-info { gap: 6px; }
    .user-info > div:not(.avatar) { display: none; }   /* on masque nom + role pour gagner de la place */
    .topbar .logout { font-size: 11px; }

    /* ----- Contenu : padding réduit + scroll natif ----- */
    .content {
        padding: 16px 12px;
        height: auto;
        overflow-y: visible;
    }
    h1 { font-size: 20px; }
    h2 { font-size: 14px; }
    .card { padding: 16px; }

    /* ----- Form grids : 1 colonne ----- */
    .form-grid { grid-template-columns: 1fr; gap: 8px; }
    .form-grid .full { grid-column: auto; }
    .filter-row { flex-direction: column; gap: 8px; }
    .filter-row > * { width: 100%; }

    /* ----- Stats : 2 colonnes ----- */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .stat-card { padding: 12px; }
    .stat-card .value { font-size: 22px; }

    /* ----- Boutons : tap-targets 44px ----- */
    .btn-primary, .btn-secondary, .btn-danger {
        padding: 12px 16px;
        font-size: 14px;
        min-height: 44px;
    }
    .btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; }

    /* ----- Inputs : tap-targets 44px + zoom navigateur stoppé via 16px font-size ----- */
    /* iOS zoom auto si font-size < 16px → on force 16px sur mobile */
    .form-control,
    .form-group input, .form-group select, .form-group textarea,
    input[type=text], input[type=email], input[type=password], input[type=number],
    input[type=date], input[type=tel], textarea, select {
        font-size: 16px;
        min-height: 44px;
    }

    /* ----- TABLES → CARDS ----- */
    /* On masque thead et on transforme chaque ligne en carte. Les valeurs
       reçoivent l'intitulé de la colonne via data-label (à fournir dans le HTML
       quand on veut bénéficier de la transformation, sinon on tombe en scroll). */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    table.table {
        display: block;
        width: 100%;
    }
    table.table thead {
        display: none;
    }
    table.table tbody, table.table tr {
        display: block;
        width: 100%;
    }
    table.table tr {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 8px;
        margin-bottom: 8px;
        padding: 8px 12px;
    }
    table.table tr:hover { background: var(--card); }
    table.table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px solid var(--border);
        text-align: right;
    }
    table.table td:last-child { border-bottom: none; }
    /* Si la cellule a un attribut data-label, on l'affiche en pseudo-élément.
       Sans data-label, le th caché ne s'affichera pas → c'est OK pour les
       tables où la colonne se comprend d'elle-même (login, code, etc.). */
    table.table td[data-label]::before {
        content: attr(data-label) " :";
        font-weight: 600;
        color: var(--muted);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
        flex-shrink: 0;
    }
    table.table td.amount { text-align: right; }

    /* Lignes "total" qui agrègent : on les affiche bloc-plein avec fond ocre */
    table.table tr.total {
        background: #FFF7ED;
        border-color: var(--accent);
    }

    /* ----- Modals : full-width avec safe-area iOS ----- */
    .modal-content {
        max-width: 95vw !important;
        max-height: 90vh;
        padding: 16px !important;
        margin: 16px;
    }

    /* ----- Login : padding réduit ----- */
    .login-card { padding: 24px 20px; width: auto; max-width: 380px; }

    /* ----- Demo banner : empilé, plus compact ----- */
    .demo-banner {
        font-size: 11px;
        padding: 6px 12px;
        flex-wrap: wrap;
    }
    .demo-banner a { margin-left: 4px; }

    /* ----- Charts : hauteur réduite ----- */
    canvas { max-height: 240px !important; }
}

/* ===== TRÈS PETITS ÉCRANS : <= 360px ===== */
@media (max-width: 360px) {
    .stat-grid { grid-template-columns: 1fr; }
    .topbar h2 { display: none; }   /* place trop chère, on l'enlève */
}

/* =============================================================================
   ★ COCKPIT DIRECTEUR (Dashboard refactor 2026-05-14)
   Tuiles KPI compactes avec sparklines, leaderboard, panneau d'alertes,
   heatmap d'activité, raccourcis. Le but : faire tenir « tout ce qui compte
   ce matin » au-dessus de la pliure sans surcharger.
   ============================================================================= */

/* ----- En-tête contextualisé ----- */
.cockpit-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.cockpit-header .title-block h1 { margin: 0; font-size: 20px; }
.cockpit-header .title-block .subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
.cockpit-header .period-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cockpit-header .period-pill strong { color: var(--text); font-weight: 600; }

/* ----- Grille KPI cockpit (4 tuiles) ----- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.kpi-tile {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 120px;
}
.kpi-tile .kpi-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--muted);
}
.kpi-tile .kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.1;
    margin: 6px 0 2px;
    font-variant-numeric: tabular-nums;
}
.kpi-tile .kpi-value .suffix {
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 2px;
}
.kpi-tile .kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #F1F5F9;
    color: var(--muted);
    width: fit-content;
    margin-top: 2px;
    font-weight: 500;
}
.kpi-tile.trend-up .kpi-delta    { background: #DCFCE7; color: #166534; }
.kpi-tile.trend-down .kpi-delta  { background: #FEE2E2; color: #991B1B; }
.kpi-tile.trend-warning .kpi-delta { background: #FEF3C7; color: #92400E; }

/* Bande verticale colorée à gauche selon la tendance */
.kpi-tile::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: transparent;
}
.kpi-tile.trend-up::before      { background: var(--success); }
.kpi-tile.trend-down::before    { background: var(--danger); }
.kpi-tile.trend-warning::before { background: var(--warning); }
.kpi-tile.trend-flat::before    { background: #CBD5E1; }

.kpi-tile .kpi-spark {
    height: 36px;
    margin-top: auto;
    margin-right: -10px;     /* déborde un peu à droite : effet « infinite » */
    margin-bottom: -4px;
}
.kpi-tile .kpi-spark canvas { display: block; }

/* ----- Layout principal cockpit : leaderboard + panneau alertes ----- */
.cockpit-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

/* ----- Leaderboard classes ----- */
.leaderboard {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.leaderboard h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.leaderboard h2 .scope {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}
.lb-row {
    display: grid;
    grid-template-columns: 24px 1fr auto 90px auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 13px;
}
.lb-row:last-child { border-bottom: none; }
.lb-row .lb-rank {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    width: 24px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.lb-row .lb-rank.top-1 { color: #B45309; }
.lb-row .lb-rank.top-2 { color: #475569; }
.lb-row .lb-rank.top-3 { color: #92400E; }
.lb-row .lb-label { font-weight: 500; }
.lb-row .lb-effectif {
    font-size: 11px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.lb-row .lb-bar {
    height: 6px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
}
.lb-row .lb-bar .fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.lb-row .lb-mean {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 50px;
}

/* ----- Panneau alertes ----- */
.alerts-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.alerts-panel h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}
.alert-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #F8FAFC;
    border-left: 3px solid var(--muted);
    margin-bottom: 8px;
}
.alert-card:last-child { margin-bottom: 0; }
.alert-card.sev-danger  { border-left-color: var(--danger);  background: #FEF2F2; }
.alert-card.sev-warning { border-left-color: var(--warning); background: #FFFBEB; }
.alert-card.sev-info    { border-left-color: var(--info);    background: #EFF6FF; }
.alert-card .alert-ico {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.alert-card .alert-body { flex: 1; min-width: 0; }
.alert-card .alert-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}
.alert-card .alert-detail {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.alert-card .alert-cta {
    align-self: center;
    font-size: 11px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: white;
    white-space: nowrap;
}
.alert-card .alert-cta:hover { background: var(--primary); color: white; border-color: var(--primary); }
.alerts-panel .empty {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    padding: 16px 0;
}

/* ----- Départs de l'année ----- */
.departures-strip {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--warning);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}
.departures-strip header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}
.departures-strip header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
}
.departures-strip header .hint { font-size: 11px; color: var(--muted); }
.departures-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: start;
}
.departures-counts {
    display: flex;
    gap: 16px;
}
.dep-stat {
    background: #FFFBEB;
    padding: 10px 14px;
    border-radius: 6px;
    min-width: 90px;
    text-align: center;
}
.dep-stat .lab {
    display: block;
    font-size: 10px;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}
.dep-stat strong {
    font-size: 20px;
    color: #92400E;
    font-variant-numeric: tabular-nums;
}
.departures-motifs .lab {
    display: block;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 4px;
}
.departures-motifs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.departures-motifs li {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 3px 8px;
    background: #F8FAFC;
    border-radius: 4px;
}
.departures-motifs .motif { color: var(--text); }
.departures-motifs .nb {
    font-weight: 600;
    color: var(--warning);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .departures-body { grid-template-columns: 1fr; gap: 12px; }
    .departures-counts { justify-content: space-around; }
}

/* ----- Heatmap activité 7 jours ----- */
.activity-strip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}
.activity-strip header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.activity-strip header h3 {
    margin: 0;
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}
.activity-strip header .hint { font-size: 11px; color: var(--muted); }
.activity-cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.activity-cell {
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    background: #F1F5F9;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 10px;
    color: var(--muted);
    border: 1px solid transparent;
    transition: transform 0.15s ease;
}
.activity-cell:hover { transform: translateY(-1px); border-color: var(--primary); }
.activity-cell.level-1 { background: #DBEAFE; }
.activity-cell.level-2 { background: #93C5FD; color: #0F172A; }
.activity-cell.level-3 { background: #3B82F6; color: white; }
.activity-cell.level-4 { background: #1E40AF; color: white; }
.activity-cell strong { font-size: 14px; font-weight: 700; line-height: 1; }
.activity-cell.today { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ----- Raccourcis ----- */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 16px;
}
.quick-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.quick-action:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 95, 138, 0.08);
}
.quick-action .qa-ico {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #EFF6FF;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}
.quick-action .qa-text { display: flex; flex-direction: column; min-width: 0; }
.quick-action .qa-text strong { font-size: 13px; font-weight: 600; }
.quick-action .qa-text span { font-size: 11px; color: var(--muted); }

/* ----- Événements à venir (compact) ----- */
.events-strip {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 16px;
}
.events-strip header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.events-strip header h3 { margin: 0; font-size: 13px; font-weight: 600; }
.events-strip header a { font-size: 11px; color: var(--primary); text-decoration: none; }
.events-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.events-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
}
.events-list li:hover { background: #F8FAFC; }
.events-list .ev-date {
    background: var(--primary);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 11px;
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.events-list .ev-type {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #F1F5F9;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.events-list .ev-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- Responsive cockpit ----- */
@media (max-width: 1100px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .cockpit-grid { grid-template-columns: 1fr; }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .kpi-tile { min-height: 100px; }
    .kpi-tile .kpi-value { font-size: 24px; }
    .quick-actions { grid-template-columns: 1fr; }
    .lb-row { grid-template-columns: 20px 1fr auto 60px; gap: 8px; }
    .lb-row .lb-effectif { display: none; }
}

/* =============================================================================
   ★ COCKPIT AVANCÉ (DashboardAdvanced refactor 2026-05-14)
   Vue pilotage : 8 KPIs étendus, distribution notes, matrice matières × niveaux,
   tableau classes enrichi, top fortes/faibles, funnel financier, signaux auto.
   ============================================================================= */

/* Barre de filtres avec sélecteur de période + bouton actualiser */
.adv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.adv-toolbar .title-block h1 { margin: 0; font-size: 20px; }
.adv-toolbar .title-block .subtitle {
    color: var(--muted);
    font-size: 12px;
    margin-top: 2px;
}
.adv-toolbar .controls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.adv-period-tabs {
    display: inline-flex;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.adv-period-tabs button {
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    transition: all 0.15s ease;
}
.adv-period-tabs button:hover { color: var(--text); }
.adv-period-tabs button.active {
    background: var(--primary);
    color: white;
}

/* Grille KPI avancé : 4 colonnes (et 2 rangées de 4) */
.adv-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.adv-kpi-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    min-height: 92px;
}
.adv-kpi-tile .kpi-label {
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}
.adv-kpi-tile .kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.adv-kpi-tile .kpi-value .suffix {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    margin-left: 2px;
}
.adv-kpi-tile .kpi-delta {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
    font-weight: 500;
}
.adv-kpi-tile.trend-up    { border-top: 3px solid var(--success); }
.adv-kpi-tile.trend-up    .kpi-delta { color: var(--success); }
.adv-kpi-tile.trend-down  { border-top: 3px solid var(--danger); }
.adv-kpi-tile.trend-down  .kpi-delta { color: var(--danger); }
.adv-kpi-tile.trend-warning { border-top: 3px solid var(--warning); }
.adv-kpi-tile.trend-warning .kpi-delta { color: var(--warning); }
.adv-kpi-tile.trend-flat  { border-top: 3px solid #CBD5E1; }

/* Cards en deux colonnes pour la zone analytique */
.adv-grid-3 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* ----- Distribution des notes (histogramme + stats latérales) ----- */
.distribution-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.distribution-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.distribution-card header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.distribution-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.distribution-stats .stat {
    text-align: center;
    padding: 8px 4px;
    background: #F8FAFC;
    border-radius: 6px;
}
.distribution-stats .stat .lab {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.distribution-stats .stat .val {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-dark);
    font-variant-numeric: tabular-nums;
}
.distribution-canvas-wrap {
    height: 180px;
    position: relative;
}

/* ----- Matrice matières × niveaux ----- */
.matrix-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    overflow-x: auto;
}
.matrix-card header { margin-bottom: 12px; }
.matrix-card header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.matrix-card header .hint {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.subject-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    font-size: 11px;
}
.subject-matrix th, .subject-matrix td {
    padding: 6px 8px;
    text-align: center;
    border-radius: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.subject-matrix th {
    background: #F8FAFC;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 10px;
}
.subject-matrix th.row-label, .subject-matrix td.row-label {
    text-align: left;
    background: #F1F5F9;
    color: var(--text);
    font-weight: 600;
    position: sticky;
    left: 0;
    z-index: 1;
}
.subject-matrix td.cell {
    color: white;
    font-weight: 600;
    min-width: 48px;
}
.subject-matrix td.cell.empty {
    background: #F1F5F9 !important;
    color: var(--muted);
    font-weight: 400;
}
.matrix-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font-size: 10px;
    color: var(--muted);
}
.matrix-legend .gradient {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #DC2626 0%, #F59E0B 33%, #84CC16 66%, #16A34A 100%);
}

/* ----- Tableau classes enrichi ----- */
.adv-classes-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.adv-classes-table thead th {
    background: #F8FAFC;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.4px;
    border-bottom: 1px solid var(--border);
}
.adv-classes-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #F1F5F9;
    font-variant-numeric: tabular-nums;
}
.adv-classes-table tbody tr:hover { background: #F8FAFC; }
.adv-classes-table .num { text-align: right; }
.adv-classes-table .stat-bar {
    display: inline-block;
    width: 80px;
    height: 6px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 6px;
}
.adv-classes-table .stat-bar .fill {
    height: 100%;
    border-radius: 3px;
}
.adv-classes-table .delta {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.adv-classes-table .delta.pos { background: #DCFCE7; color: #166534; }
.adv-classes-table .delta.neg { background: #FEE2E2; color: #991B1B; }
.adv-classes-table .delta.flat { background: #F1F5F9; color: var(--muted); }

/* ----- Top fortes / faibles côte à côte ----- */
.adv-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.subject-list {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}
.subject-list h3 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.subject-list ul { list-style: none; padding: 0; margin: 0; }
.subject-list li {
    display: grid;
    grid-template-columns: 1fr auto 60px auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 12px;
}
.subject-list li:last-child { border-bottom: none; }
.subject-list .matiere { font-weight: 500; }
.subject-list .count { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.subject-list .bar {
    height: 5px;
    background: #F1F5F9;
    border-radius: 3px;
    overflow: hidden;
}
.subject-list .bar .fill { height: 100%; border-radius: 3px; }
.subject-list .moy {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    min-width: 44px;
}

/* ----- Liste élèves à risque ----- */
.at-risk-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.at-risk-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.at-risk-card header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.at-risk-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.at-risk-list li {
    display: grid;
    grid-template-columns: 24px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #FEF2F2;
    border-radius: 6px;
    border-left: 3px solid var(--danger);
    font-size: 12px;
}
.at-risk-list .rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.at-risk-list .who { display: flex; flex-direction: column; min-width: 0; }
.at-risk-list .who strong { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-risk-list .who small { font-size: 10px; color: var(--muted); }
.at-risk-list .mean {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--danger);
    min-width: 36px;
    text-align: right;
}
.at-risk-list .trend {
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    font-weight: 600;
}
.at-risk-list .trend.down  { background: #FEE2E2; color: #991B1B; }
.at-risk-list .trend.up    { background: #DCFCE7; color: #166534; }
.at-risk-list .trend.flat  { background: #F1F5F9; color: var(--muted); }

/* ----- Funnel financier ----- */
.funnel-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.funnel-card header { margin-bottom: 12px; }
.funnel-card header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.funnel {
    display: flex;
    align-items: stretch;
    gap: 4px;
    margin-bottom: 16px;
}
.funnel .step {
    flex: 1;
    padding: 12px;
    border-radius: 6px;
    background: var(--card);
    border: 1px solid var(--border);
    position: relative;
}
.funnel .step .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
}
.funnel .step .amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-dark);
    margin: 4px 0 2px;
    font-variant-numeric: tabular-nums;
}
.funnel .step .meta {
    font-size: 11px;
    color: var(--muted);
}
.funnel .step.facture { border-left: 4px solid var(--info); }
.funnel .step.encaisse { border-left: 4px solid var(--success); }
.funnel .step.impaye { border-left: 4px solid var(--danger); }
.funnel-evolution {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.funnel-evolution .label {
    font-size: 11px;
    color: var(--muted);
}
.funnel-evolution-bars {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
}
.funnel-evolution-bars .bar {
    flex: 1;
    background: var(--primary);
    opacity: 0.6;
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    position: relative;
    transition: opacity 0.15s ease;
}
.funnel-evolution-bars .bar:hover { opacity: 1; }
.funnel-evolution-bars .bar.current { opacity: 1; background: var(--accent); }

/* ----- Signaux automatiques (insights) ----- */
.signals-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}
.signals-card header { margin-bottom: 12px; }
.signals-card header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.signals-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.signal-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--muted);
    background: #F8FAFC;
}
.signal-card.lvl-positif { border-left-color: var(--success); background: #ECFDF5; }
.signal-card.lvl-warning { border-left-color: var(--warning); background: #FFFBEB; }
.signal-card.lvl-danger  { border-left-color: var(--danger);  background: #FEF2F2; }
.signal-card.lvl-info    { border-left-color: var(--info);    background: #EFF6FF; }
.signal-card .ico {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: white;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.signal-card .text { flex: 1; min-width: 0; }
.signal-card .title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.signal-card .desc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ----- Responsive ----- */
@media (max-width: 1100px) {
    .adv-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .adv-grid-3 { grid-template-columns: 1fr; }
    .adv-grid-2 { grid-template-columns: 1fr; }
    .signals-list { grid-template-columns: 1fr; }
    .at-risk-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .adv-kpi-grid { grid-template-columns: 1fr; }
    .funnel { flex-direction: column; }
    .distribution-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ─────────────────────────────────────────────────────────────────────
   ★ RAPPORTS TRIMESTRIELS (chantier 2026-05-15)
   Page /rapports/trimestriels — sélecteur de trimestre, aperçu live et
   liste des rapports générés. Cf. docs/16-Rapports-Trimestriels.md.
   ─────────────────────────────────────────────────────────────────── */
.qr-page { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.qr-page .card { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; }
.qr-page .card-title { font-weight: 600; color: #1E5F8A; font-size: 14px; margin-bottom: 8px; }
.qr-page .card-subtitle { font-weight: 600; color: #374151; font-size: 12px; margin: 12px 0 6px; }
.qr-page .muted { color: #6B7280; font-size: 13px; }

/* Sélecteur de trimestre — pills cliquables */
.qr-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-pill { display: flex; flex-direction: column; align-items: flex-start;
           padding: 8px 14px; border: 1px solid #E5E7EB; border-radius: 999px;
           background: #fff; cursor: pointer; min-width: 200px; transition: all .15s; }
.qr-pill:hover { border-color: #1E5F8A; background: #F0F7FB; }
.qr-pill.active { border-color: #1E5F8A; background: #1E5F8A; color: #fff; }
.qr-pill .pill-label { font-weight: 600; font-size: 13px; }
.qr-pill .pill-meta  { font-size: 11px; opacity: .8; }

.qr-actions { display: flex; gap: 8px; margin-top: 12px; }

/* KPI grid (aperçu live) */
.qr-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 8px 0; }
.qr-kpi { border: 1px solid #E5E7EB; border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.qr-kpi-label { font-size: 11px; color: #6B7280; }
.qr-kpi-value { font-size: 20px; font-weight: 700; color: #1E5F8A; }
.qr-kpi-value small { font-size: 11px; color: #6B7280; font-weight: 400; margin-left: 2px; }
.qr-kpi-success .qr-kpi-value { color: #2E7D32; }
.qr-kpi-warning .qr-kpi-value { color: #EF6C00; }
.qr-kpi-danger  .qr-kpi-value { color: #C62828; }
.qr-kpi-primary .qr-kpi-value { color: #1E5F8A; }

/* Avancement des chantiers */
.qr-progress { margin-top: 12px; }
.qr-progress-row { display: grid; grid-template-columns: 140px 1fr 50px; gap: 8px;
                   align-items: center; padding: 4px 0; }
.qr-progress-row .prog-label { font-size: 12px; color: #374151; }
.qr-progress-row .prog-bar   { background: #F3F4F6; border-radius: 999px; height: 10px; overflow: hidden; }
.qr-progress-row .prog-fill  { height: 100%; border-radius: 999px; transition: width .3s; }
.qr-progress-row .prog-fill.prog-termine  { background: #2E7D32; }
.qr-progress-row .prog-fill.prog-en-cours { background: #1E5F8A; }
.qr-progress-row .prog-fill.prog-en-retard { background: #EF6C00; }
.qr-progress-row .prog-pct { font-size: 12px; font-weight: 600; text-align: right; color: #374151; }

/* Signaux */
.qr-signals { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.qr-signals .signal { padding: 8px 10px; border-left: 3px solid #1E5F8A; background: #F9FAFB; border-radius: 4px; }
.qr-signals .signal-title { font-weight: 600; font-size: 12px; color: #1E5F8A; }
.qr-signals .signal-desc  { font-size: 11px; color: #374151; margin-top: 2px; }
.qr-signals .signal-positif { border-left-color: #2E7D32; }
.qr-signals .signal-positif .signal-title { color: #2E7D32; }
.qr-signals .signal-warning { border-left-color: #EF6C00; }
.qr-signals .signal-warning .signal-title { color: #EF6C00; }
.qr-signals .signal-danger  { border-left-color: #C62828; }
.qr-signals .signal-danger  .signal-title { color: #C62828; }

/* Tableau des rapports générés */
.qr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qr-table thead th { text-align: left; font-size: 11px; color: #6B7280; font-weight: 600;
                     border-bottom: 1px solid #E5E7EB; padding: 6px 8px; }
.qr-table tbody td { padding: 8px; border-bottom: 1px solid #F3F4F6; }
.qr-table tbody tr:hover { background: #F9FAFB; }
.qr-row-archived { opacity: .55; }
.qr-actions-cell { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-actions-cell .btn-link { background: transparent; border: 1px solid #E5E7EB;
                              border-radius: 4px; padding: 4px 8px; cursor: pointer;
                              font-size: 12px; color: #374151; }
.qr-actions-cell .btn-link:hover { background: #F0F7FB; border-color: #1E5F8A; color: #1E5F8A; }
.qr-actions-cell .btn-link-primary { background: #1E5F8A; color: #fff; border-color: #1E5F8A; }
.qr-actions-cell .btn-link-primary:hover { background: #144A6E; }

.status-badge { display: inline-block; padding: 2px 8px; border-radius: 999px;
                font-size: 11px; font-weight: 600; }
.status-badge.status-draft     { background: #FEF3C7; color: #92400E; }
.status-badge.status-published { background: #D1FAE5; color: #065F46; }
.status-badge.status-archived  { background: #E5E7EB; color: #4B5563; }

@media (max-width: 1100px) {
    .qr-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    .qr-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .qr-pill { min-width: 100%; }
    .qr-table { font-size: 11px; }
}

/* ─────────────────────────────────────────────────────────────────────
   ★ EXPORT DGI MALI (chantier 2026-05-15)
   Page /declarations/dgi — sélecteur année, aperçu KPIs, liste exports.
   Cf. docs/17-Export-DGI-Mali.md.
   ─────────────────────────────────────────────────────────────────── */
.dgi-page { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.dgi-page .card { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; }
.dgi-page .card-title { font-weight: 600; color: #1E5F8A; font-size: 14px; margin-bottom: 8px; }
.dgi-page .muted { color: #6B7280; font-size: 13px; }

.dgi-year-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dgi-year-row label { font-weight: 600; color: #374151; font-size: 13px; }
.dgi-year-row .form-select { padding: 6px 10px; border: 1px solid #D1D5DB; border-radius: 4px;
                              font-size: 14px; min-width: 100px; }

.dgi-banner-warn { margin-top: 10px; padding: 8px 10px; background: #FEF3C7; border-left: 3px solid #C9A227;
                    border-radius: 4px; font-size: 13px; color: #78350F; }

.dgi-kpi-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 8px 0; }
.dgi-kpi { border: 1px solid #E5E7EB; border-radius: 6px; padding: 10px; display: flex;
            flex-direction: column; gap: 4px; background: #FAFAFA; }
.dgi-kpi .lbl { font-size: 10px; color: #6B7280; text-transform: uppercase; letter-spacing: .5px; }
.dgi-kpi .val { font-size: 16px; font-weight: 700; color: #1E5F8A; }
.dgi-kpi .val small { font-size: 10px; color: #6B7280; font-weight: 400; margin-left: 2px; }

.dgi-note { margin-top: 12px; padding: 8px 10px; background: #F0F9FF; border-left: 3px solid #1E5F8A;
            border-radius: 4px; font-size: 12px; color: #1E3A5F; }

.dgi-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dgi-table thead th { text-align: left; font-size: 11px; color: #6B7280; font-weight: 600;
                       border-bottom: 1px solid #E5E7EB; padding: 6px 6px; }
.dgi-table tbody td { padding: 6px 6px; border-bottom: 1px solid #F3F4F6; white-space: nowrap; }
.dgi-table tbody tr:hover { background: #F9FAFB; }
.dgi-row-archived { opacity: .55; }
.dgi-actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.dgi-actions-cell .btn-link { background: transparent; border: 1px solid #E5E7EB;
                               border-radius: 4px; padding: 3px 8px; cursor: pointer;
                               font-size: 11px; color: #374151; }
.dgi-actions-cell .btn-link:hover { background: #F0F7FB; border-color: #1E5F8A; color: #1E5F8A; }
.dgi-actions-cell .btn-link-primary { background: #1E5F8A; color: #fff; border-color: #1E5F8A; }
.dgi-actions-cell .btn-link-primary:hover { background: #144A6E; }
.dgi-actions-cell .btn-link-warn { background: #C9A227; color: #fff; border-color: #C9A227; }
.dgi-actions-cell .btn-link-warn:hover { background: #A6841E; }

@media (max-width: 1100px) { .dgi-kpi-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .dgi-kpi-grid { grid-template-columns: repeat(2, 1fr); } .dgi-table { font-size: 10px; } }

/* ─────────────────────────────────────────────────────────────────────
   ★ MOUVEMENTS BANCAIRES (refonte 2026-05-15)
   Page /mouvements — KPIs + mini-cartes comptes + filtres + table paginée + modal détail.
   ─────────────────────────────────────────────────────────────────── */
.mvt-page { display: flex; flex-direction: column; gap: 14px; padding: 12px; }
.mvt-page .card { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 14px; }
.mvt-page h2 { margin: 0 0 8px; font-size: 14px; color: #1E5F8A; }
.mvt-page .muted { color: #6B7280; font-size: 13px; }
.mvt-page .text-success { color: #2E7D32; }
.mvt-page .text-danger  { color: #C62828; }

/* — Bandeau KPI 4 tuiles — */
.mvt-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.mvt-kpi { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px; padding: 12px;
           display: flex; flex-direction: column; gap: 4px; border-left: 4px solid #1E5F8A; }
.mvt-kpi.mvt-kpi-success { border-left-color: #2E7D32; }
.mvt-kpi.mvt-kpi-danger  { border-left-color: #C62828; }
.mvt-kpi.mvt-kpi-warning { border-left-color: #EF6C00; }
.mvt-kpi .lbl  { font-size: 10px; color: #6B7280; text-transform: uppercase; letter-spacing: .5px; }
.mvt-kpi .val  { font-size: 22px; font-weight: 700; color: #1E5F8A; }
.mvt-kpi .val small { font-size: 11px; color: #6B7280; font-weight: 400; margin-left: 4px; }
.mvt-kpi .meta { font-size: 11px; color: #6B7280; }
.mvt-kpi.mvt-kpi-success .val { color: #2E7D32; }
.mvt-kpi.mvt-kpi-danger  .val { color: #C62828; }
.mvt-kpi.mvt-kpi-warning .val { color: #EF6C00; }

/* — Mini-cartes comptes avec sparkline — */
.mvt-account-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.mvt-account-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 8px;
                     padding: 12px; cursor: pointer; text-align: left; transition: all .15s;
                     display: flex; flex-direction: column; gap: 6px; }
.mvt-account-card:hover { border-color: #1E5F8A; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.mvt-account-card.active { border-color: #1E5F8A; background: #F0F7FB; }
.mvt-account-card .acc-banque  { font-weight: 700; color: #1E5F8A; font-size: 13px; }
.mvt-account-card .acc-libelle { font-size: 11px; color: #6B7280; margin-left: 4px; }
.mvt-account-card .acc-solde   { font-size: 18px; font-weight: 700; color: #1E5F8A; }
.mvt-account-card .acc-solde small { font-size: 10px; color: #6B7280; font-weight: 400; }
.mvt-account-card .acc-spark   { height: 36px; }
.mvt-account-card .acc-spark canvas { display: block; width: 100%; height: 36px; }
.mvt-account-card .acc-tendance { font-size: 11px; }
.mvt-account-card.tendance-up      .acc-tendance { color: #2E7D32; }
.mvt-account-card.tendance-down    .acc-tendance { color: #C62828; }
.mvt-account-card.tendance-warning .acc-tendance { color: #EF6C00; font-weight: 600; }
.mvt-account-card.tendance-warning { border-left: 3px solid #EF6C00; }
.mvt-account-card-clear { background: #F3F4F6; border-style: dashed; align-items: center; justify-content: center; }
.mvt-account-card-clear .acc-clear { font-weight: 600; color: #1E5F8A; }

/* — Filtres pliables — */
.filters-toolbar { display: flex; justify-content: space-between; align-items: center;
                    cursor: pointer; padding: 4px 0; font-weight: 600; color: #1E5F8A; }
.filters-toggle { font-size: 12px; color: #6B7280; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
                 gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #E5E7EB; }
.filters-grid .filter { display: flex; flex-direction: column; gap: 4px; }
.filters-grid .filter label { font-size: 11px; color: #6B7280; }
.filters-grid .filter input, .filters-grid .filter select {
    padding: 6px 8px; border: 1px solid #D1D5DB; border-radius: 4px; font-size: 13px; }
.filters-grid .filter-search { grid-column: span 2; }
.filters-grid .filter-actions { display: flex; align-items: flex-end; }

/* — Table paginée — */
.table-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.table-meta { font-size: 12px; color: #6B7280; }
.mvt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mvt-table thead th { text-align: left; padding: 8px 6px; font-size: 11px; color: #6B7280;
                       border-bottom: 2px solid #E5E7EB; font-weight: 600; }
.mvt-table thead th.amount { text-align: right; }
.mvt-table thead th.sortable { cursor: pointer; user-select: none; }
.mvt-table thead th.sortable:hover { color: #1E5F8A; }
.mvt-table tbody td { padding: 8px 6px; border-bottom: 1px solid #F3F4F6; }
.mvt-table tbody td.amount { text-align: right; font-variant-numeric: tabular-nums; }
.mvt-table tbody tr:hover { background: #F9FAFB; cursor: pointer; }
.mvt-table .auto-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
                          background: #DBEAFE; color: #1E40AF; font-size: 10px; font-weight: 600; letter-spacing: .5px; }
.mvt-table .btn-link { background: transparent; border: 1px solid #E5E7EB; padding: 4px 6px;
                        border-radius: 4px; cursor: pointer; }
.mvt-table .btn-link:hover { background: #F0F7FB; border-color: #1E5F8A; }

/* Pagination */
.paginator { display: flex; gap: 12px; align-items: center; justify-content: center;
              margin-top: 12px; padding-top: 12px; border-top: 1px solid #E5E7EB; }
.paginator .btn-secondary { padding: 6px 12px; }
.paginator select { padding: 4px 8px; border: 1px solid #D1D5DB; border-radius: 4px; }

/* Modal détail */
.mvt-detail-box { max-width: 560px; }
.detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th { text-align: left; padding: 6px 8px; color: #6B7280; font-weight: 600; width: 35%; vertical-align: top; }
.detail-table td { padding: 6px 8px; }
.detail-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid #E5E7EB; }
.detail-section h3 { margin: 0 0 6px; font-size: 13px; color: #1E5F8A; }
.detail-section .auto-badge { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 999px;
                               background: #DBEAFE; color: #1E40AF; font-size: 10px; font-weight: 600; }
.detail-section .btn-link { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px;
                             color: #1E5F8A; text-decoration: none; font-size: 12px; }
.detail-section .btn-link:hover { text-decoration: underline; }

@media (max-width: 1100px) { .mvt-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .mvt-kpi-grid { grid-template-columns: 1fr; }
                              .filters-grid .filter-search { grid-column: span 1; }
                              .mvt-table { font-size: 11px; } }