/* ═══════════════════════════════════════════════════════════════
   Gestion Contrôles CEE — Design System AC Environnement
   DM Sans chargé via <link> dans _Layout.cshtml
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
    --bleu:        #0B1F8F;
    --vert:        #7FBD00;
    --fond:        #f0f2f8;
    --texte:       #1a1f36;
    --gris:        #6b7280;
    --rouge:       #e84040;
    --blanc:       #ffffff;
    --card-shadow: 0 4px 28px rgba(0,0,0,.07);
    --radius-card: 20px;
    --radius-btn:  10px;
    --header-h:    64px;
    --subnav-h:    46px;
    --imp-h:       40px;
}

/* ── RESET + BASE ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 15px !important;
    background: var(--fond) !important;
    color: var(--texte) !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── HEADER (64 px, blanc, sticky) ──────────────────────────── */
header.cee-header,
.cee-header {
    background: var(--blanc) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.1) !important;
    height: var(--header-h) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 32px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 200 !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
}

.cee-brand {
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    color: var(--bleu) !important;
    letter-spacing: -.3px;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.cee-brand span { color: var(--vert) !important; }

.cee-logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    pointer-events: none;
}
.cee-logo img {
    height: 32px !important;
    width: auto !important;
    max-height: 32px !important;
    display: block !important;
}

.cee-user {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0;
}
.cee-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: var(--bleu) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: .82rem !important;
    flex-shrink: 0;
}
.cee-user-meta { text-align: right; line-height: 1.25; }
.cee-user-meta .u-name  { font-weight: 600 !important; font-size: .88rem !important; color: var(--texte) !important; }
.cee-user-meta .u-role  { font-size: .72rem !important; color: var(--gris) !important; }
.cee-btn-logout {
    color: var(--gris) !important;
    text-decoration: none !important;
    font-size: .82rem !important;
    padding: 7px 11px !important;
    border-radius: 8px !important;
    background: none !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.cee-btn-logout:hover { background: var(--fond) !important; color: var(--rouge) !important; }

/* ── SUB-NAV (46 px, bleu) ──────────────────────────────────── */
nav.cee-subnav,
.cee-subnav {
    background: var(--bleu) !important;
    background-color: var(--bleu) !important;
    height: var(--subnav-h) !important;
    min-height: var(--subnav-h) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 24px !important;
    gap: 2px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    position: sticky !important;
    top: var(--header-h) !important;
    z-index: 190 !important;
    list-style: none !important;
    margin: 0 !important;
    flex-wrap: nowrap !important;
}
.cee-subnav::-webkit-scrollbar { display: none; }

button.cee-tab,
.cee-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 7px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.72) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    transition: background .15s, color .15s;
    text-decoration: none !important;
}
button.cee-tab:hover:not(:disabled),
.cee-tab:hover:not(:disabled) {
    background: rgba(255,255,255,.13) !important;
    color: #fff !important;
}
button.cee-tab.active,
.cee-tab.active {
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
}
button.cee-tab:disabled,
.cee-tab:disabled {
    opacity: .38 !important;
    cursor: not-allowed !important;
}

/* ── MAIN ────────────────────────────────────────────────────── */
.cee-main {
    flex: 1;
    padding: 32px 28px 48px !important;
    max-width: 1320px;
    width: 100%;
    margin: 0 auto !important;
}

/* ── KPI STRIP ───────────────────────────────────────────────── */
.kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}
.kpi-card {
    background: var(--blanc) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    border: 1px solid #eef0f5 !important;
}
.kpi-label {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: var(--gris) !important;
}
.kpi-value {
    font-size: 1.9rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.kpi-card.kpi-blue  .kpi-value { color: var(--bleu) !important; }
.kpi-card.kpi-green .kpi-value { color: #15803d !important; }
.kpi-card.kpi-amber .kpi-value { color: #b45309 !important; }
.kpi-card.kpi-red   .kpi-value { color: #dc2626 !important; }
.kpi-pill {
    display: inline-block !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-top: 4px !important;
    width: fit-content !important;
}
.kpi-card.kpi-blue  .kpi-pill { background: #eef1fb !important; color: var(--bleu) !important; }
.kpi-card.kpi-green .kpi-pill { background: #f0fdf4 !important; color: #166534 !important; }
.kpi-card.kpi-amber .kpi-pill { background: #fffbeb !important; color: #92400e !important; }
.kpi-card.kpi-red   .kpi-pill { background: #fef2f2 !important; color: #dc2626 !important; }

/* ── AC-CARD (module content wrapper) ───────────────────────── */
.ac-card {
    background: var(--blanc) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 32px 36px !important;
    margin-bottom: 20px !important;
    border: none !important;
}
.ac-card-sm {
    background: var(--blanc) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 20px 24px !important;
    margin-bottom: 14px !important;
}

/* ── PAGE HEADER inside module ───────────────────────────────── */
.mod-title {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    letter-spacing: -.3px;
    margin-bottom: 4px !important;
    color: var(--texte) !important;
}
.mod-subtitle { color: var(--gris) !important; font-size: .85rem !important; margin-bottom: 4px !important; }
.accent-bar {
    height: 4px;
    width: 44px;
    background: var(--vert) !important;
    border-radius: 4px;
    margin-bottom: 24px;
}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-ac-primary {
    background: var(--bleu) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--radius-btn) !important;
    padding: 9px 20px !important;
    font-size: .85rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: opacity .15s;
    font-family: inherit !important;
}
.btn-ac-primary:hover { opacity: .87; color: #fff !important; }
.btn-ac-primary:disabled { opacity: .4; cursor: not-allowed; }

.btn-ac-secondary {
    background: var(--fond) !important;
    color: var(--texte) !important;
    border: 1px solid #dde1ef !important;
    border-radius: var(--radius-btn) !important;
    padding: 9px 18px !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .15s;
    font-family: inherit !important;
}
.btn-ac-secondary:hover { background: #e4e7f0 !important; color: var(--texte) !important; }

/* ── OVERRIDE BOOTSTRAP ──────────────────────────────────────── */
.form-control, .form-select, .btn, .table, .modal-content, .alert, .card-body {
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.btn-primary {
    background-color: var(--bleu) !important;
    border-color: var(--bleu) !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: #091973 !important;
    border-color: #091973 !important;
    opacity: .9;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--bleu) !important;
    border-color: var(--bleu) !important;
}
.btn-outline-primary:hover {
    background-color: var(--bleu) !important;
    color: #fff !important;
}

/* Tables */
.table thead th {
    font-size: .72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    background: #f8f9fe !important;
    color: var(--gris) !important;
    border-bottom: 2px solid #e5e7eb !important;
}
.table-dark thead th {
    background: var(--bleu) !important;
    color: #fff !important;
}
.table > tbody > tr:hover > td { background: #f5f7ff !important; }

/* Cards Bootstrap */
.card {
    border-radius: 14px !important;
    border: 1px solid #eef0f5 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.05) !important;
}

/* Forms */
.form-control, .form-select {
    border-radius: 8px !important;
    border-color: #dde1ef !important;
    font-size: .88rem !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--bleu) !important;
    box-shadow: 0 0 0 3px rgba(11,31,143,.12) !important;
}
.form-label { font-size: .82rem !important; font-weight: 600 !important; color: var(--texte) !important; }

/* Badges */
.badge {
    font-size: .7rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
}

/* Modals */
.modal-content {
    border-radius: 18px !important;
    border: none !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.18) !important;
}
.modal-header {
    border-bottom: 1px solid #f0f2f8 !important;
    padding: 20px 24px 16px !important;
}
.modal-footer {
    border-top: 1px solid #f0f2f8 !important;
    padding: 14px 24px !important;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.cee-footer {
    text-align: center !important;
    padding: 18px 32px !important;
    color: #9ca3af !important;
    font-size: .72rem !important;
    border-top: 1px solid #e8eaf2 !important;
    background: var(--blanc) !important;
}

/* ── LOGIN PAGE ──────────────────────────────────────────────── */
.cee-login-page {
    min-height: 100vh !important;
    background: var(--fond) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 20px !important;
}
.cee-login-logo { margin-bottom: 24px !important; }
.cee-login-logo img { height: 40px !important; width: auto !important; }
.cee-login-card {
    background: var(--blanc) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--card-shadow) !important;
    padding: 40px 44px !important;
    width: 100% !important;
    max-width: 460px !important;
}
.cee-login-title {
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    color: var(--bleu) !important;
    letter-spacing: -.4px;
    margin-bottom: 2px !important;
    text-align: center !important;
}
.cee-login-sub {
    font-size: .82rem !important;
    color: var(--gris) !important;
    text-align: center !important;
    margin-bottom: 6px !important;
}
.cee-login-accent { margin: 0 auto 28px !important; }

/* Tabs login */
.login-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    background: var(--fond) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin-bottom: 24px !important;
}
.login-tab {
    border: none !important;
    background: none !important;
    padding: 7px 4px !important;
    border-radius: 8px !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: var(--gris) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: background .15s, color .15s;
}
.login-tab.active {
    background: var(--blanc) !important;
    color: var(--bleu) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* ── UTIL ────────────────────────────────────────────────────── */
.btn-xs { font-size: .7rem !important; padding: 2px 7px !important; border-radius: 5px !important; }
.font-monospace { font-family: 'Cascadia Code', 'Consolas', monospace !important; }
code {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .8em;
    color: var(--texte);
}

/* ── BLAZOR ERROR UI ─────────────────────────────────────────── */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0; left: 0;
    box-shadow: 0 -1px 3px rgba(0,0,0,.15);
    display: none;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .85rem;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── BANDEAU « VOIR EN TANT QUE » ────────────────────────────── */
.cee-imp-banner {
    height: var(--imp-h) !important;
    min-height: var(--imp-h) !important;
    background: linear-gradient(90deg, #b45309, #d97706) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    padding: 0 20px !important;
    font-size: .82rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 300 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
}
.cee-imp-banner-text      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cee-imp-banner-role {
    background: rgba(255,255,255,.22);
    border-radius: 6px;
    padding: 1px 7px;
    margin-left: 7px;
    font-size: .74rem;
    font-weight: 600;
}
.cee-imp-banner-sep       { margin: 0 8px; opacity: .6; }
.cee-imp-banner-btn {
    background: rgba(255,255,255,.95) !important;
    color: #92400e !important;
    border: none !important;
    border-radius: 7px !important;
    padding: 4px 12px !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s;
}
.cee-imp-banner-btn:hover { background: #fff !important; }

/* En-tête et sous-nav collants : décalés sous le bandeau quand il est présent.
   Le sélecteur frère fonctionne car bannière, header et nav sont rendus à plat. */
.cee-imp-banner ~ .cee-header { top: var(--imp-h) !important; }
.cee-imp-banner ~ .cee-subnav { top: calc(var(--header-h) + var(--imp-h)) !important; }

/* Avatar signalant une session endossée */
.cee-avatar-imp {
    background: #d97706 !important;
    box-shadow: 0 0 0 2px rgba(217,119,6,.28) !important;
}

/* Bouton « Voir en tant que » dans l'en-tête.
   Calé sur .btn-ac-secondary (mêmes tokens, même bordure), en version compacte
   pour tenir dans les 64 px de l'en-tête à côté de « Déconnexion ». */
.cee-btn-impersonate {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: var(--fond) !important;
    color: var(--bleu) !important;
    border: 1px solid #dde1ef !important;
    border-radius: var(--radius-btn) !important;
    padding: 8px 14px !important;
    font-size: .82rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    cursor: pointer !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s, color .15s;
}
.cee-btn-impersonate i { font-size: .95rem !important; line-height: 1 !important; }
.cee-btn-impersonate:hover {
    background: var(--blanc) !important;
    border-color: var(--bleu) !important;
    color: var(--bleu) !important;
}
.cee-btn-impersonate:active { background: #e8ebf6 !important; }
.cee-btn-impersonate:focus-visible {
    outline: 2px solid rgba(11,31,143,.35) !important;
    outline-offset: 1px !important;
}

/* Pastille d'initiales dans le sélecteur de compte */
.cee-imp-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bleu);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .68rem;
}

/* ── SYNTHÈSE : TABLEAU DE BORD VISUEL ─────────────────── */
/* Palette validée (surface = blanc des cartes) :
   - rampe ordinale une seule teinte, dérivée du bleu de la charte : monotone,
     ΔL >= 0,06 entre marches, extrémité claire à 2,26:1, écart de teinte 8° ;
   - statuts réservés (5,02 / 5,02 / 4,83:1 sur blanc), toujours accompagnés d'une
     icône et d'un libellé. Le vert de la charte (#7FBD00, 2,29:1) est écarté comme
     couleur de marque : illisible à cette taille. */
.dash {
    --dash-gap: 14px;
    --ord-1: #9CAAE4;
    --ord-2: #6B7ECF;
    --ord-3: #3A4FAE;
    --ord-4: #0B1F8F;
    /* Etat terminal, hors rampe d'avancement : cloture. */
    --ord-done: #15803D;
    --dash-track: #eceffa;
    --st-good: #15803d;
    --st-warn: #b45309;
    --st-crit: #dc2626;
    --dash-ink: var(--texte);
    --dash-ink-2: #52514e;
    --dash-muted: #898781;
    --dash-hairline: #e6e8f0;
    display: flex;
    flex-direction: column;
    gap: var(--dash-gap);
}

/* Figure héro + jauge */
/* Lignes multi-colonnes. Les colonnes prennent la meme hauteur (etirement par
   defaut de la grille) et se replient seules quand la largeur ne suffit plus. */
.dash-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 14px; }
.dash-row-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.dash-row-3 > *, .dash-row-2 > * { min-width: 0; }

.dash-hero-card {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    border: 1px solid var(--dash-hairline);
    border-radius: 16px;
    background: var(--blanc);
}
.dash-hero-label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--dash-muted); margin-bottom: 2px;
}
.dash-hero-figure {
    font-family: inherit;
    font-size: 2.2rem; line-height: 1.05; font-weight: 700;
    color: var(--ord-4); letter-spacing: -1px;
    margin-bottom: 8px;
}
.dash-hero-unit { font-size: 1.2rem; font-weight: 600; margin-left: 2px; }
.dash-hero-sub { font-size: .73rem; color: var(--dash-ink-2); margin: 8px 0 0; }

.dash-meter {
    height: 10px; border-radius: 999px; background: var(--dash-track); overflow: hidden;
}
.dash-meter-fill {
    display: block; height: 100%;
    background: var(--ord-4);
    border-radius: 0 4px 4px 0;
    transition: width .35s ease;
}

/* Compteurs en pied de carte hero, deux par ligne */
.dash-hero-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid var(--dash-hairline);
}
.dash-stat { display: flex; flex-direction: column; min-width: 0; }
.dash-stat-value { font-size: 1.02rem; font-weight: 700; color: var(--dash-ink); line-height: 1.15; }
.dash-stat-label { font-size: .69rem; color: var(--dash-ink-2); }
.dash-stat-alert .dash-stat-value, .dash-stat-alert .dash-stat-label { color: var(--st-crit); }

/* Blocs */
.dash-block {
    padding: 14px 16px;
    border: 1px solid var(--dash-hairline);
    border-radius: 16px;
    background: var(--blanc);
}
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dash-title { font-weight: 700; font-size: .89rem; color: var(--dash-ink); margin: 0; }
.dash-subtitle { font-size: .72rem; color: var(--dash-ink-2); margin: 3px 0 10px; max-width: 78ch; }
.dash-empty { font-size: .76rem; color: var(--dash-muted); margin: 4px 0 0; }

.dash-table-toggle {
    flex-shrink: 0; line-height: 1;
    background: var(--fond); color: var(--bleu);
    border: 1px solid #dde1ef; border-radius: var(--radius-btn);
    padding: 6px 12px; font-size: .78rem; font-weight: 600;
    font-family: inherit; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.dash-table-toggle:hover { background: var(--blanc); border-color: var(--bleu); }

/* Barres horizontales. Marque fine, extrémité arrondie 4px côté valeur et
   carrée sur la ligne de base ; l'axe est un filet 1px pleine ligne. */
.dash-bars { display: flex; flex-direction: column; gap: 2px; }
.dash-bar-row {
    display: grid; grid-template-columns: minmax(120px, 26%) 1fr auto;
    align-items: center; gap: 12px;
    min-height: 24px; padding: 1px 0; border-radius: 6px;
    transition: background .12s;
}
.dash-bar-row:hover { background: #f7f8fc; }
.dash-bar-label { font-size: .76rem; color: var(--dash-ink-2); }
.dash-bar-track { display: block; width: 100%; }
.dash-bar-fill {
    display: block; height: 14px; max-height: 24px;
    border-radius: 0 4px 4px 0;
    min-width: 2px;
    transition: width .35s ease;
}
.dash-bar-value {
    font-size: .78rem; font-weight: 700; color: var(--dash-ink);
    font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right;
}
.dash-axis {
    display: flex; justify-content: space-between;
    margin-top: 6px; padding-top: 5px;
    border-top: 1px solid var(--dash-hairline);
    font-size: .68rem; color: var(--dash-muted);
    font-variant-numeric: tabular-nums;
}

/* Barre empilée : séparation par un jour de 2px dans la couleur de surface,
   jamais par un contour. */
.dash-stack {
    display: flex; height: 16px; border-radius: 4px; overflow: hidden;
    background: var(--dash-track);
}
.dash-stack-seg { display: block; height: 100%; }
.dash-stack-seg + .dash-stack-seg { border-left: 2px solid var(--blanc); }

.dash-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 9px; }
.dash-legend-item {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .74rem; color: var(--dash-ink-2);
}
.dash-legend-item strong { color: var(--dash-ink); }
.dash-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.dash-legend-icon { font-size: .85rem; }

/* À traiter */
.dash-todo { display: flex; flex-direction: column; gap: 1px; }
.dash-todo-row {
    display: grid; grid-template-columns: 2.2rem 1fr auto;
    align-items: center; gap: 10px;
    min-height: 29px; padding: 2px 8px; border-radius: 8px;
    text-decoration: none !important; color: inherit;
    transition: background .12s;
}
.dash-todo-row:hover { background: #f2f5fd; }
.dash-todo-row.is-empty { opacity: .5; }
.dash-todo-count {
    font-size: 1rem; font-weight: 700; color: var(--ord-4);
    font-variant-numeric: tabular-nums; text-align: right;
}
.dash-todo-label { font-size: .76rem; font-weight: 600; color: var(--dash-ink); }
.dash-todo-module { font-size: .68rem; font-weight: 700; color: var(--dash-muted); letter-spacing: .4px; }

/* Vue globale */
.dash-global-sep {
    display: flex; align-items: center; gap: 12px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: var(--dash-muted);
    margin-top: 2px;
}
.dash-global-sep::after {
    content: ""; flex: 1; height: 1px; background: var(--dash-hairline);
}
/* Liste cle/valeur compacte (referentiel de la vue globale) */
.dash-kv-list { display: flex; flex-direction: column; gap: 1px; }
.dash-kv {
    display: grid; grid-template-columns: 2.2rem 1fr;
    align-items: center; gap: 10px;
    min-height: 29px; padding: 2px 0;
}
.dash-kv-value {
    font-size: 1rem; font-weight: 700; color: var(--ord-4);
    font-variant-numeric: tabular-nums; text-align: right;
}
.dash-kv-label { font-size: .76rem; color: var(--dash-ink-2); }


/* Tableau jumeau : toute valeur d'un graphique reste lisible en texte. */
.dash-data-table { font-size: .76rem; }
.dash-data-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; color: var(--dash-muted); }
.dash-data-table td, .dash-data-table th { border-color: var(--dash-hairline) !important; }
.dash-data-table .text-end { font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .dash-hero-figure { font-size: 2.3rem !important; }
    .dash-bar-row { grid-template-columns: minmax(90px, 38%) 1fr auto !important; gap: 8px !important; }
    .dash-block, .dash-hero-card { padding: 16px 14px !important; }
}

/* ── M1 : éditeur de critères réglementaires ────────────────────── */
/* Un cadre par critère : les libellés longs se replient chez eux, on ne confond
   plus un nouveau critère avec la suite du précédent. */
.fos-crit-list { display: flex; flex-direction: column; gap: 8px; }
.fos-crit {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid #e6e8f0;
    border-radius: 10px;
    background: var(--blanc);
}
.fos-crit.is-warned {
    border-color: #f0c68a;
    background: #fffdf7;
}
.fos-crit-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-top: 4px;
    border-radius: 50%;
    background: #eef1fb; color: var(--bleu);
    font-size: .7rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.fos-crit-body { min-width: 0; }
.fos-crit-input {
    resize: vertical;
    min-height: 48px;
    font-size: .82rem !important;
    line-height: 1.4;
}
.fos-crit-meta { margin-top: 4px; font-size: .72rem; }
.fos-crit-used { color: var(--gris); cursor: help; }
.fos-crit-warn { color: #b45309; font-weight: 600; }
.fos-crit-actions { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.fos-crit-actions .btn { line-height: 1; padding: 3px 7px !important; }

@media (max-width: 768px) {
    .fos-crit { grid-template-columns: 22px 1fr; }
    .fos-crit-actions { grid-column: 2; flex-direction: row; }
}

/* ── PAGE NUE (définition de mot de passe, hors session) ─────────── */
.cee-bare {
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 22px; padding: 32px 18px;
    background: var(--fond);
}
.cee-bare-logo img { height: 42px; width: auto; display: block; }
.cee-bare-card {
    width: 100%; max-width: 440px;
    background: var(--blanc);
    border-radius: var(--radius-card);
    box-shadow: var(--card-shadow);
    padding: 32px 30px;
}
.cee-bare-title { font-size: 1.25rem; font-weight: 700; color: var(--bleu); margin: 0 0 4px; }
.cee-bare-sub { font-size: .85rem; color: var(--texte); margin: 0 0 20px; }
.cee-bare-foot { font-size: .72rem; color: var(--gris); text-align: center; }

/* Lien d'action rendu comme du texte, pour ne pas concurrencer le bouton principal */
.cee-link-btn {
    background: none; border: none; padding: 0;
    color: var(--bleu); font-family: inherit; font-size: .78rem;
    text-decoration: underline; cursor: pointer;
}
.cee-link-btn:hover { color: var(--texte); }
.cee-login-forgot { margin-top: 8px; text-align: right; }

/* ── M1 : gabarit d'import CSV d'une fiche FOS ─────────────────── */
.fos-tpl {
    padding: 12px 14px;
    border: 1px solid #e6e8f0;
    border-radius: 10px;
    background: var(--fond);
}
/* Colonnes du gabarit : des jetons plutôt qu'une ligne de texte, pour qu'on voie
   d'un coup d'œil où commence et finit chaque nom de colonne. */
.fos-tpl-cols { display: flex; flex-wrap: wrap; gap: 5px; }

/* Deux emplacements de gabarit cote a cote : personne physique et personne
   morale. Ils se replient l'un sous l'autre quand la largeur manque. */
.fos-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
    gap: 10px;
}
.fos-slot {
    border-left: 3px solid #d7dae6;
    border-radius: 0 10px 10px 0;
}
.fos-slot.is-present { border-left-color: var(--bleu); }

.fos-slot-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    margin-bottom: 6px;
}
.fos-slot-type {
    font-size: .78rem; font-weight: 700; color: var(--texte);
}
.fos-slot-file {
    font-size: .72rem; color: #898781; line-height: 1.4;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}
.fos-slot-file span { white-space: nowrap; }

/* Criteres lus dans les libelles de colonnes du tableau officiel : proposes,
   jamais imposes. L'utilisateur relit puis reprend. */
.fos-detect {
    margin-top: 8px;
    padding: 10px 12px;
    background: #eef1fb;
    border-radius: 8px;
    display: flex; flex-direction: column; gap: 6px;
}
.fos-detect-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap;
}
.fos-detect-count { font-size: .78rem; font-weight: 600; color: var(--bleu); }
.fos-detect-scope { display: block; font-weight: 400; color: #52514e; font-size: .74rem; }

.fos-detect-toggle {
    font-size: .74rem; font-weight: 600; color: var(--bleu);
    cursor: pointer; list-style: none;
}
.fos-detect-toggle::-webkit-details-marker { display: none; }
.fos-detect-toggle::before { content: "\f282  "; font-family: "bootstrap-icons"; font-size: .7rem; }
details[open] > .fos-detect-toggle::before { content: "\f286  "; }

.fos-detect-list {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column; gap: 7px;
    max-height: 20rem; overflow-y: auto;
}
.fos-detect-list li {
    display: flex; flex-direction: column; gap: 3px;
    padding-bottom: 6px; border-bottom: 1px solid #dfe3f2;
}
.fos-detect-text { font-size: .78rem; font-weight: 600; color: var(--texte); line-height: 1.45; }
.fos-detect-opts { display: flex; flex-wrap: wrap; gap: 4px; }
.fos-detect-free { font-size: .7rem; color: #898781; font-style: italic; }

/* Rappel du gabarit en M2 : meme presentation qu'en M1. */
.fos-tpl-recall { background: #eef1fb; border-color: #dfe3f2; }
.fos-tpl-recall-head { font-size: .8rem; color: var(--texte); margin-bottom: 4px; }

/* Etat des deux gabarits dans la liste des fiches. */
.fos-tpl-badges { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fos-tpl-badges .badge { font-variant-numeric: tabular-nums; }


/* Bandeau de groupe du tableau officiel : il decoupe la liste des colonnes en
   sections, comme dans le fichier d'origine. */
.fos-tpl-band {
    display: flex; align-items: baseline; gap: 8px;
    margin: 12px 0 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid #e6e8f0;
}
.fos-tpl-band:first-of-type { margin-top: 2px; }
.fos-tpl-band-name {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--bleu);
    line-height: 1.35;
}
.fos-tpl-band-count {
    margin-left: auto; white-space: nowrap;
    font-size: .66rem; color: #898781; font-variant-numeric: tabular-nums;
}
.fos-tpl-col {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--blanc);
    border: 1px solid #dde1ef;
    font-size: .72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--texte);
}

/* ── M1 : réponses types d'un critère ────────────────────────── */
.crit-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.crit-opts-empty { font-size: .7rem; color: var(--gris); font-style: italic; }
.crit-opt {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px 2px 9px;
    border-radius: 999px;
    background: #eef1fb;
    border: 1px solid #dde1ef;
    font-size: .72rem;
    color: var(--bleu);
}
.crit-opt-del {
    background: none; border: none; padding: 0 2px;
    color: var(--gris); font-size: .9rem; line-height: 1; cursor: pointer;
}
.crit-opt-del:hover { color: var(--rouge); }
.crit-opts-add { display: flex; gap: 5px; align-items: center; margin-top: 6px; }
.crit-opts-add input { max-width: 240px; font-size: .78rem !important; }
.crit-opts-add .btn { white-space: nowrap; font-size: .72rem !important; padding: 3px 8px !important; }

/* ── M1 : sélection des FOS d'un inspecteur ───────────────────── */
/* Un jeton par fiche, actif ou non : l'état se lit à la couleur ET à l'icône,
   jamais à la couleur seule. */
.fos-pick {
    display: flex; flex-wrap: wrap; gap: 5px;
    max-height: 190px; overflow-y: auto;
    padding: 8px;
    border: 1px solid #dde1ef;
    border-radius: 10px;
    background: var(--fond);
}
.fos-pick-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #dde1ef;
    background: var(--blanc);
    color: var(--gris);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .72rem; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.fos-pick-item:hover { border-color: var(--bleu); color: var(--bleu); }
.fos-pick-item.is-active {
    background: var(--bleu);
    border-color: var(--bleu);
    color: #fff;
}

/* ── SYNTHESE : TABLEAU RECAPITULATIF DES LOTS ───────────────── */
.lot-recap {
    --lot-hair: #e6e8f0;
    --lot-ink: var(--texte);
    --lot-ink2: #52514e;
    --lot-mute: #898781;
    --lot-ok: #15803d;
    --lot-warn: #b45309;
    --lot-crit: #dc2626;
    --lot-violet: #4338ca;
    display: flex; flex-direction: column; gap: 14px;
}

/* Recherche et filtres */
.lot-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.lot-search { position: relative; flex: 0 1 320px; min-width: 220px; }
.lot-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--lot-mute); font-size: .85rem; }
.lot-search input { padding-left: 32px !important; border-radius: 999px !important; }

.lot-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lot-filters-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--lot-mute); margin-right: 4px;
}
.lot-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px;
    border: 1px solid var(--lot-hair); background: var(--blanc);
    font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--lot-ink2);
    cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.lot-chip:hover { border-color: var(--bleu); color: var(--bleu); }
.lot-chip.is-active { background: var(--texte); border-color: var(--texte); color: #fff; }
.lot-chip-count {
    font-variant-numeric: tabular-nums; font-size: .68rem;
    padding: 0 5px; border-radius: 999px;
    background: rgba(0,0,0,.07);
}
.lot-chip.is-active .lot-chip-count { background: rgba(255,255,255,.22); }

/* Tableau : son propre defilement horizontal, la page ne bouge pas */
.lot-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--lot-hair);
    border-radius: 14px;
    background: var(--blanc);
}
.lot-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.lot-table thead th {
    padding: 12px 14px; text-align: left; vertical-align: bottom;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--lot-mute); background: #f7f8fc;
    border-bottom: 1px solid #d9dded; white-space: nowrap;
}
.lot-table thead th.c, .lot-table tbody td.c { text-align: center; }
.lot-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--lot-hair); vertical-align: middle; }
.lot-table tbody tr:last-child td { border-bottom: none; }
.lot-table tbody tr:hover { background: #fafbff; }

.lot-ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .8rem; color: var(--lot-ink); }
.lot-sub { font-size: .68rem; color: var(--lot-mute); }
.lot-client { font-size: .84rem; font-weight: 600; color: var(--lot-ink); }

.lot-type {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
    font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.lot-type.is-std { color: var(--lot-mute); }
.lot-type.is-pouce { color: var(--lot-warn); }
.lot-type.is-pncee { color: var(--lot-violet); }

.lot-fos {
    display: inline-block; padding: 2px 7px; border-radius: 5px;
    background: #eef1fb; color: var(--bleu);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .7rem; font-weight: 700;
}
.lot-fos-title {
    display: block; margin-top: 3px;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lot-sample { font-size: .92rem; font-weight: 700; color: var(--lot-ink); font-variant-numeric: tabular-nums; }
.lot-pending { font-size: .7rem; font-style: italic; color: var(--lot-mute); }
.lot-none { color: var(--lot-mute); }

.lot-rate { font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lot-rate.is-ok { color: var(--lot-ok); }
.lot-rate.is-warn { color: var(--lot-warn); }
.lot-rate.is-crit { color: var(--lot-crit); }
.lot-rate.is-muted { color: var(--lot-mute); }

/* Barre du taux de RDV : la couleur double le chiffre, elle ne le remplace pas. */
.lot-bar { height: 4px; border-radius: 2px; background: #eceffa; margin: 4px auto 0; max-width: 74px; overflow: hidden; }
.lot-bar span { display: block; height: 100%; background: var(--bleu); border-radius: 2px; }

.lot-status {
    display: inline-block; padding: 3px 9px; border-radius: 999px;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.lot-status.is-grey   { background: #f1f2f6; color: #52514e; }
.lot-status.is-warn   { background: #fdf4e7; color: var(--lot-warn); }
.lot-status.is-blue   { background: #eef1fb; color: var(--bleu); }
.lot-status.is-violet { background: #eeeafd; color: var(--lot-violet); }
.lot-status.is-ok     { background: #eaf6ee; color: var(--lot-ok); }
.lot-status.is-crit   { background: #fdecec; color: var(--lot-crit); }
/* Date d'application sur la pastille FOS : deux versions d'un meme code ne se
   distinguent que par elle. */
.fos-pick-date { margin-left: 4px; font-size: .72em; opacity: .7; font-weight: 600; }

/* Cloture : pastille pleine, elle se distingue des statuts du flux en cours. */
.lot-status.is-done   { background: #2f3141; color: #fff; }

.lot-next {
    display: block; margin-top: 4px;
    font-size: .68rem; font-weight: 600; color: var(--bleu); text-decoration: none;
}
.lot-next:hover { text-decoration: underline; }
.lot-next.is-crit { color: var(--lot-crit); font-weight: 500; }
.lot-alert { display: block; margin-top: 3px; font-size: .66rem; color: var(--lot-warn); }

.lot-quick { display: flex; gap: 4px; justify-content: center; margin-top: 7px; }
.lot-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 6px;
    border: 1px solid var(--lot-hair); background: var(--blanc);
    color: var(--lot-mute); font-size: .75rem; cursor: pointer;
    text-decoration: none !important; padding: 0;
    transition: color .12s, border-color .12s;
}
.lot-ico:hover { color: var(--bleu); border-color: var(--bleu); }

.lot-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.lot-actions .btn { white-space: nowrap; font-size: .72rem !important; padding: 3px 9px !important; }

.lot-empty { text-align: center; padding: 28px 14px !important; color: var(--lot-mute); font-size: .84rem; }

/* Note reglementaire */
.lot-note {
    border: 1px solid #f0dcc0; border-left: 3px solid var(--lot-warn);
    border-radius: 0 12px 12px 0; background: #fffdf7;
    padding: 14px 18px; display: flex; flex-direction: column; gap: 5px;
}
.lot-note-title { font-size: .8rem; font-weight: 700; color: var(--lot-warn); }
.lot-note p { margin: 0; font-size: .76rem; color: var(--lot-ink2); line-height: 1.6; }

@media (max-width: 768px) {
    .lot-head { flex-direction: column; align-items: stretch; }
    .lot-search { flex: 1 1 auto; }
}

/* ── MODULE 0 : ETAT REGLEMENTAIRE DE LA STRUCTURE ────────────── */
.reg {
    --reg-hair: #e6e8f0;
    --reg-ok: #15803d;
    --reg-warn: #b45309;
    --reg-crit: #dc2626;
    display: flex; flex-direction: column; gap: 12px;
}
.reg-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.reg-eyebrow {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #898781;
}
.reg-year {
    font-size: .7rem; font-weight: 600; color: #898781;
    font-variant-numeric: tabular-nums;
}

.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

.reg-card {
    background: var(--blanc);
    border: 1px solid var(--reg-hair);
    border-left: 3px solid var(--reg-hair);
    border-radius: 0 14px 14px 0;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.reg-card.is-ok   { border-left-color: var(--reg-ok); }
.reg-card.is-warn { border-left-color: var(--reg-warn); background: #fffdf7; }
.reg-card.is-crit { border-left-color: var(--reg-crit); background: #fffbfb; }

.reg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reg-label { font-size: .82rem; font-weight: 700; color: var(--texte); }

/* L'etat se lit a l'icone et au libelle, pas seulement a la couleur. */
.reg-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: 999px;
    font-size: .68rem; font-weight: 700; white-space: nowrap;
}
.reg-pill.is-ok   { background: #eaf6ee; color: var(--reg-ok); }
.reg-pill.is-warn { background: #fdf4e7; color: var(--reg-warn); }
.reg-pill.is-crit { background: #fdecec; color: var(--reg-crit); }

.reg-figure {
    font-size: 2.1rem; font-weight: 700; line-height: 1.05;
    letter-spacing: -1px; color: var(--bleu);
}
.reg-figure.is-ok { color: var(--reg-ok); }
.reg-figure.is-crit { color: var(--reg-crit); }
.reg-unit { font-size: 1.05rem; font-weight: 600; margin-left: 2px; }

/* Jauge graduee a 50 %, avec le plafond materialise par un repere vertical. */
.reg-meter {
    position: relative;
    height: 10px; border-radius: 999px;
    background: #eceffa; overflow: hidden;
}
.reg-meter-fill { display: block; height: 100%; background: var(--bleu); border-radius: 999px 0 0 999px; }
.reg-card.is-warn .reg-meter-fill { background: var(--reg-warn); }
.reg-card.is-crit .reg-meter-fill { background: var(--reg-crit); }
.reg-meter-cap {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--texte); opacity: .55;
}
.reg-scale {
    display: flex; justify-content: space-between;
    font-size: .64rem; color: #898781; font-variant-numeric: tabular-nums;
}
.reg-scale-cap { font-weight: 700; }

.reg-detail { margin: 0; font-size: .76rem; color: #52514e; line-height: 1.55; }
.reg-warn  { margin: 0; font-size: .76rem; font-weight: 600; color: var(--reg-crit); }
.reg-watch { margin: 0; font-size: .76rem; font-weight: 600; color: var(--reg-warn); }

.reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.reg-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 5px 0; border-top: 1px solid var(--reg-hair);
    font-size: .78rem;
}
.reg-list-name { color: var(--texte); font-weight: 600; }
.reg-list-pct {
    color: var(--reg-crit); font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.reg-foot { margin: 0; font-size: .68rem; color: #898781; line-height: 1.5; }

/* ── BOUTON D'AIDE DANS L'EN-TETE ───────────────────────── */
.cee-btn-help {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--bleu);
    background: transparent; color: var(--bleu);
    font-size: .78rem; font-weight: 600; text-decoration: none;
    white-space: nowrap;
}
.cee-btn-help:hover, .cee-btn-help:focus-visible {
    background: var(--bleu); color: var(--blanc);
}
@media (max-width: 900px) { .cee-btn-help-label { display: none; } }

/* ── PAGE D'AIDE ────────────────────────────────────── */
.aide {
    /* Une teinte par famille de profil, jamais seule : le libelle est toujours la. */
    --aide-interne:  #0B1F8F;
    --aide-terrain:  #0F766E;
    --aide-ordre:    #9A5B0E;
    --aide-autorite: #414660;
    --aide-hair:     #e6e8f0;

    max-width: 60rem;
    display: flex; flex-direction: column; gap: 18px;
}

.aide-head { display: flex; flex-direction: column; gap: 4px; }
.aide-eyebrow {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: #898781;
}
.aide-title { margin: 0; font-weight: 700; letter-spacing: -.3px; }
.aide-lede { margin: 0; font-size: .9rem; color: #52514e; max-width: 46rem; }

.aide-common {
    background: var(--blanc);
    border: 1px solid var(--aide-hair);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
}
.aide-h6 {
    margin: 0; font-size: .8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--texte);
}
.aide-dl { margin: 0; display: grid; grid-template-columns: 12rem 1fr; gap: 6px 18px; }
.aide-dl dt { font-size: .82rem; font-weight: 700; color: var(--bleu); }
.aide-dl dd { margin: 0; font-size: .85rem; color: #52514e; line-height: 1.55; }
@media (max-width: 700px) {
    .aide-dl { grid-template-columns: 1fr; gap: 2px; }
    .aide-dl dd { margin-bottom: 8px; }
}
.aide-note {
    margin: 0; padding: 9px 12px; border-radius: 8px;
    background: #eef1fb; color: var(--bleu);
    font-size: .82rem; font-weight: 600;
}

/* Une fiche par profil. Repliee sauf celle du profil connecte. */
.aide-sheet {
    background: var(--blanc);
    border: 1px solid var(--aide-hair);
    border-left: 3px solid var(--fam);
    border-radius: 0 12px 12px 0;
    overflow: hidden;
}
.aide-interne  { --fam: var(--aide-interne); }
.aide-terrain  { --fam: var(--aide-terrain); }
.aide-ordre    { --fam: var(--aide-ordre); }
.aide-autorite { --fam: var(--aide-autorite); }
.aide-sheet.is-mine { box-shadow: 0 1px 10px rgba(11, 31, 143, .09); }

.aide-summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 13px 18px; cursor: pointer;
    list-style: none;
}
.aide-summary::-webkit-details-marker { display: none; }
.aide-summary::after {
    content: "\f282"; font-family: "bootstrap-icons"; margin-left: auto;
    font-size: .8rem; color: #898781;
}
.aide-sheet[open] .aide-summary::after { content: "\f286"; }
.aide-sheet-role { font-size: .95rem; font-weight: 700; color: var(--fam); }
.aide-badge-mine {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 8px; border-radius: 999px;
    background: var(--fam); color: var(--blanc);
}
.aide-sheet-count { font-size: .72rem; color: #898781; font-variant-numeric: tabular-nums; }

.aide-body {
    padding: 0 18px 18px;
    display: flex; flex-direction: column; gap: 14px;
    border-top: 1px solid var(--aide-hair);
    padding-top: 14px;
}
.aide-sheet-lede { margin: 0; font-size: .88rem; color: #52514e; line-height: 1.6; }

.aide-nav { display: flex; flex-direction: column; gap: 5px; }
.aide-nav-label {
    font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: #898781;
}
.aide-navbar {
    display: flex; flex-wrap: wrap; gap: 3px;
    background: #0D2280; padding: 6px 7px; border-radius: 8px;
}
.aide-navbar-tab {
    font-size: .72rem; font-weight: 600; white-space: nowrap;
    color: #DDE3FF; padding: 4px 9px; border-radius: 5px;
}
.aide-nav-note { margin: 0; font-size: .78rem; color: #898781; }

.aide-steps {
    list-style: none; counter-reset: aide; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 11px;
}
.aide-steps > li {
    counter-increment: aide;
    display: grid; grid-template-columns: 1.6rem 1fr; gap: 10px;
}
.aide-steps > li::before {
    content: counter(aide);
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .76rem; font-weight: 700;
    color: var(--fam); background: #f1f2f6;
}
.aide-step-what { display: flex; flex-direction: column; min-width: 0; }
.aide-step-title { font-size: .86rem; font-weight: 700; color: var(--texte); }
.aide-steps p { margin: 2px 0 0; font-size: .84rem; color: #52514e; line-height: 1.55; }

.aide-cannot {
    background: #f7f7fa; border-radius: 8px; padding: 11px 13px;
    display: flex; flex-direction: column; gap: 3px;
}
.aide-cannot-label {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #898781;
}
.aide-cannot p { margin: 0; font-size: .83rem; color: #52514e; line-height: 1.55; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .cee-header { padding: 0 16px !important; }
    .cee-logo   { display: none !important; }
    .cee-user-meta .u-role { display: none !important; }
    .cee-main   { padding: 20px 14px 40px !important; }
    .ac-card    { padding: 22px 18px !important; border-radius: 14px !important; }
    .kpi-strip  { grid-template-columns: repeat(2, 1fr) !important; }
    .cee-subnav { padding: 0 12px !important; }
    .cee-tab    { padding: 5px 9px !important; font-size: .75rem !important; }
    .cee-btn-impersonate { padding: 8px 10px !important; }
    .cee-btn-impersonate-label { display: none !important; }
    .cee-imp-banner { font-size: .74rem !important; gap: 10px !important; padding: 0 10px !important; }
    .cee-imp-banner-sep, .cee-imp-banner-role { display: none !important; }
}
@media (max-width: 480px) {
    .kpi-strip  { grid-template-columns: repeat(2, 1fr) !important; }
    .cee-login-card { padding: 28px 22px !important; }
}

/* ── ENTÊTES DE COLONNE TRIABLES ─────────────────────────────────
   La flèche est posée en CSS et non dans le balisage : un caractère
   Unicode, pour ne dépendre d'aucune police d'icônes, et un seul
   endroit à relire quand l'apparence doit changer. */
.cee-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.cee-sort:hover { color: #0b1f8f; }

.cee-sort::after {
    content: "\2195";        /* ↕ : la colonne est triable */
    margin-left: .3rem;
    opacity: .25;
    font-size: .85em;
}
.cee-sort-asc::after  { content: "\25B2"; opacity: .85; font-size: .62em; }  /* ▲ */
.cee-sort-desc::after { content: "\25BC"; opacity: .85; font-size: .62em; }  /* ▼ */

/* Sur fond sombre — le journal d'audit en M8 — la flèche doit rester lisible. */
.table-dark .cee-sort:hover { color: #9db4ff; }

/* Barre de recherche des tableaux. */
.cee-filter { max-width: 280px; }

/* ── PARAMÉTRAGE D'UN CRITÈRE (M1) ───────────────────────────────
   Les réglages tiennent sur une ligne qui se replie : le panneau des
   critères est déjà dense, et un critère en porte cinq. */
.crit-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-end;
    margin-top: 8px;
    padding: 8px 10px;
    background: #f7f8fc;
    border: 1px solid #e4e7f2;
    border-radius: 8px;
}
.crit-spec > label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    font-size: .7rem;
    color: #525870;
}
.crit-spec > label > span { font-weight: 600; color: #525870; }
.crit-spec select { min-width: 118px; }
.crit-spec-check {
    flex-direction: row !important;
    align-items: center;
    gap: 6px !important;
    padding-bottom: 5px;
}