/* ==========================================================================
   UniMan design system — F0.2
   The SmartStaff token system (colors, radii, shadows, type scale, badges,
   buttons, cards, forms) carried over value for value and renamed --um-*.
   Identity (UI-1, palette A « Bleu académique et or »): shell blue #14234b,
   primary blue #1f4e9c, gold accent #c08a2b — components use the role tokens; fonts Source Sans 3 + JetBrains Mono.
   No color outside a token. Class prefix: um-. Printed documents have their
   own sheet (uniman-print.css) linked by the print pages only.
   R3-FIX1 (review R-3 L-11): both fonts are BUNDLED (SIL OFL 1.1, unmodified
   upstream WOFF2, licences next to them in ../fonts/) and served by the app
   itself — the campus LAN has no internet, so no web-font service or CDN is
   ever linked (guard test: no http(s) URL in App.razor or any stylesheet).
   ========================================================================== */

/* Source Sans 3 — Adobe, release 3.052R, variable (200–900), upright + italic.
   `url()` is relative to this stylesheet (`_content/UniMan.Client.Shared/styles/`
   → `…/fonts/`). `swap`: text shows at once in the fallback, then the font. */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3VF-Upright.ttf.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 900;
    font-display: swap;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/SourceSans3VF-Italic.ttf.woff2') format('woff2');
    font-style: italic;
    font-weight: 200 900;
    font-display: swap;
}

/* JetBrains Mono — JetBrains, release v2.304, the two weights the UI uses. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

:root {
    color-scheme: light;

    /* Bleu académique — palette A (docs/design/01-UI-Direction.md) */
    --um-blue-950: #0c1631;
    --um-blue-900: #14234b;
    --um-blue-800: #182f64;
    --um-blue-700: #1f3f82;
    --um-blue-600: #1f4e9c;
    --um-blue-500: #3a68b4;
    --um-blue-200: #bcd0ee;
    --um-blue-100: #dde7f7;
    --um-blue-50: #f1f5fc;

    /* Or — accent (jamais un statut, jamais du petit texte sur blanc) */
    --um-gold-800: #6b4a10;
    --um-gold-700: #8a6117;
    --um-gold-500: #c08a2b;
    --um-gold-300: #e3c27f;
    --um-gold-100: #f6e8c8;
    --um-gold-50: #fbf6ea;

    /* Rôles — les composants utilisent ces noms, pas les rampes */
    --um-shell: var(--um-blue-900);
    --um-shell-deep: var(--um-blue-950);
    --um-shell-hover: var(--um-blue-800);
    --um-primary: var(--um-blue-600);
    --um-primary-hover: var(--um-blue-700);
    --um-primary-soft: var(--um-blue-50);
    --um-highlight: var(--um-gold-500);
    --um-highlight-soft: var(--um-gold-50);
    --um-highlight-text: var(--um-gold-800);
    --um-focus-ring: var(--um-blue-600);
    --um-link: var(--um-blue-600);

    /* Avatars (ApiAuthClient.RoleAvatarColors) — initiales blanches >= 4,5:1 */
    --um-avatar-blue: #1f4e9c;
    --um-avatar-shell: #14234b;
    --um-avatar-sky: #0369a1;
    --um-avatar-purple: #7e22ce;
    --um-avatar-slate: #475569;

    /* Amber — avertissements */
    --um-amber-700: #b45309;
    --um-amber-600: #d97706;
    --um-amber-500: #f59e0b;
    --um-amber-200: #fcd97b;
    --um-amber-100: #fde68a;
    --um-amber-50: #fffbeb;

    /* Emerald — succès */
    --um-emerald-700: #047857;
    --um-emerald-600: #059669;
    --um-emerald-100: #d1fae5;
    --um-emerald-50: #ecfdf5;

    /* Rose — erreur */
    --um-rose-700: #b91c1c;
    --um-rose-600: #dc2626;
    --um-rose-100: #fee2e2;
    --um-rose-50: #fef2f2;

    /* Sky — information */
    --um-sky-700: #0369a1;
    --um-sky-600: #0284c7;
    --um-sky-100: #e0f2fe;
    --um-sky-50: #f0f9ff;

    /* Purple — avatar « Direction » (ApiAuthClient.RoleAvatarColors) */
    --um-purple-700: #7e22ce;

    /* Surfaces & texte */
    --um-surface-0: #ffffff;
    --um-surface-1: #f8fafc;
    --um-surface-2: var(--um-blue-50);
    --um-text-primary: var(--um-blue-900);
    --um-text-secondary: #64748b;
    --um-text-tertiary: #94a3b8;
    --um-text-on-dark: #ffffff;
    --um-text-on-dark-muted: rgba(255, 255, 255, 0.65);
    --um-text-on-dark-faint: rgba(255, 255, 255, 0.45);
    --um-border: var(--um-blue-100);
    --um-border-soft: var(--um-blue-50);
    --um-border-on-dark: rgba(255, 255, 255, 0.1);
    --um-fill-on-dark: rgba(255, 255, 255, 0.07);
    --um-fill-on-dark-hover: rgba(255, 255, 255, 0.12);
    --um-fill-primary-on-dark: rgba(31, 78, 156, 0.45);
    --um-fill-highlight-on-dark: rgba(192, 138, 43, 0.16);
    --um-overlay: rgba(20, 35, 75, 0.5);
    --um-scrollbar: #c3d2ea;
    --um-skeleton-a: #e7ecf5;
    --um-skeleton-b: #f4f7fc;

    /* Espacements — grille de 4 px */
    --um-space-1: 4px;
    --um-space-2: 8px;
    --um-space-3: 12px;
    --um-space-4: 16px;
    --um-space-5: 20px;
    --um-space-6: 24px;
    --um-space-8: 32px;
    --um-space-10: 40px;

    /* Échelle typographique — H1 28/700, H2 22/600, H3 18/600, corps 15,
       libellé 13/500, légende 11 */
    --um-font-size-h1: 28px;
    --um-font-size-h2: 22px;
    --um-font-size-h3: 18px;
    --um-font-size-body: 15px;
    --um-font-size-ui: 14px;
    --um-font-size-label: 13px;
    --um-font-size-small: 12px;
    --um-font-size-caption: 11px;

    --um-radius-sm: 6px;
    --um-radius-md: 8px;
    --um-radius-lg: 12px;
    --um-radius-xl: 16px;
    --um-radius-2xl: 20px;
    --um-radius-pill: 999px;

    --um-shadow-card: 0 1px 2px rgba(20, 35, 75, 0.04);
    --um-shadow-popover: 0 12px 32px rgba(20, 35, 75, 0.16);

    --um-font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --um-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Dimensions des coquilles */
    --um-sidebar-width: 248px;
    --um-sidebar-width-collapsed: 60px;
    --um-topbar-height: 60px;
    --um-etudiant-column: 430px;

    /* PUB-2 — site public (« Site public » family): bands, overlays, shadows and the discreet pattern, from the blue / gold scales. */
    --um-site-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
    --um-site-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --um-site-hero: linear-gradient(120deg, var(--um-blue-950) 0%, var(--um-blue-900) 45%, var(--um-blue-700) 100%);
    --um-site-hero-voile: linear-gradient(90deg, rgba(12, 22, 49, 0.92) 0%, rgba(12, 22, 49, 0.72) 45%, rgba(12, 22, 49, 0.25) 100%);
    --um-site-hero-voile-bas: linear-gradient(0deg, rgba(12, 22, 49, 0.85) 0%, rgba(12, 22, 49, 0) 100%);
    --um-site-motif: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23c08a2b' stroke-opacity='0.16' stroke-width='1'%3E%3Ccircle cx='160' cy='0' r='60'/%3E%3Ccircle cx='160' cy='0' r='100'/%3E%3Ccircle cx='160' cy='0' r='140'/%3E%3Ccircle cx='0' cy='160' r='60'/%3E%3Ccircle cx='0' cy='160' r='100'/%3E%3C/g%3E%3C/svg%3E");
    --um-site-motif-clair: url("data:image/svg+xml,%3Csvg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%231f4e9c' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='160' cy='0' r='60'/%3E%3Ccircle cx='160' cy='0' r='100'/%3E%3Ccircle cx='160' cy='0' r='140'/%3E%3Ccircle cx='0' cy='160' r='60'/%3E%3Ccircle cx='0' cy='160' r='100'/%3E%3C/g%3E%3C/svg%3E");
    --um-site-ombre-carte: 0 1px 2px rgba(20, 35, 75, 0.06), 0 4px 12px rgba(20, 35, 75, 0.06);
    --um-site-ombre-levee: 0 2px 4px rgba(20, 35, 75, 0.06), 0 16px 32px rgba(20, 35, 75, 0.14);
    --um-site-ombre-entete: 0 1px 0 rgba(20, 35, 75, 0.06), 0 4px 16px rgba(20, 35, 75, 0.05);
    --um-site-or-voile: rgba(192, 138, 43, 0.14);
    --um-site-blanc-voile: rgba(255, 255, 255, 0.82);
    --um-site-blanc-trait: rgba(255, 255, 255, 0.55);
    --um-site-credit-fond: rgba(12, 22, 49, 0.72);
    --um-site-bande-image: linear-gradient(135deg, var(--um-blue-100) 0%, var(--um-blue-50) 100%);
    --um-site-couverture-voile: linear-gradient(0deg, rgba(12, 22, 49, 0.88) 0%, rgba(12, 22, 49, 0.1) 70%);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: var(--um-font-sans);
    background-color: var(--um-blue-50);
    color: var(--um-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--um-primary);
}

.um-icon {
    flex-shrink: 0;
}

/* Chiffres tabulaires — matricules, montants, années */
.tabnum {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

.font-mono {
    font-family: var(--um-font-mono);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--um-scrollbar) transparent;
}
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--um-scrollbar);
    border-radius: 3px;
}

*:focus-visible {
    outline: 2px solid var(--um-focus-ring);
    outline-offset: 2px;
}

@keyframes um-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--um-skeleton-a) 25%, var(--um-skeleton-b) 50%, var(--um-skeleton-a) 75%);
    background-size: 200% 100%;
    animation: um-shimmer 1.5s infinite;
    border-radius: 4px;
}

@media print {
    .no-print { display: none !important; }
}

/* ── Typographie ──────────────────────────────────────────────────────── */

.um-h1 { margin: 0; font-size: var(--um-font-size-h1); line-height: 1.2; font-weight: 700; color: var(--um-text-primary); }
.um-h2 { margin: 0; font-size: var(--um-font-size-h2); line-height: 1.25; font-weight: 600; color: var(--um-text-primary); }
.um-h3 { margin: 0; font-size: var(--um-font-size-h3); line-height: 1.3; font-weight: 600; color: var(--um-text-primary); }
.um-body { font-size: var(--um-font-size-body); font-weight: 400; color: var(--um-text-primary); }
.um-body-secondary { font-size: var(--um-font-size-body); font-weight: 400; color: var(--um-text-secondary); margin: 0; line-height: 1.5; }
.um-label { font-size: var(--um-font-size-label); font-weight: 500; color: var(--um-text-primary); }
.um-caption { font-size: var(--um-font-size-caption); font-weight: 400; color: var(--um-text-tertiary); }
.um-eyebrow { font-size: var(--um-font-size-small); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-primary); }

.um-text-success { color: var(--um-emerald-600); }
.um-text-warning { color: var(--um-amber-600); }
.um-text-danger { color: var(--um-rose-600); }
.um-text-muted { color: var(--um-text-tertiary); }

/* ── Badges de statut ─────────────────────────────────────────────────── */

.badge-success { background-color: var(--um-emerald-50); color: var(--um-emerald-700); border: 1px solid var(--um-emerald-100); }
.badge-warning { background-color: var(--um-amber-50); color: var(--um-amber-700); border: 1px solid var(--um-amber-100); }
.badge-danger  { background-color: var(--um-rose-50); color: var(--um-rose-700); border: 1px solid var(--um-rose-100); }
.badge-info    { background-color: var(--um-sky-50); color: var(--um-sky-700); border: 1px solid var(--um-sky-100); }
.badge-bleu    { background-color: var(--um-blue-50); color: var(--um-blue-900); border: 1px solid var(--um-blue-100); }
.badge-primaire    { background-color: var(--um-primary-soft); color: var(--um-primary); border: 1px solid var(--um-blue-100); }
.badge-amber   { background-color: var(--um-amber-50); color: var(--um-amber-700); border: 1px solid var(--um-amber-100); }

.um-badge-pill,
[class^="badge-"].um-badge-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    justify-self: start;
    padding: var(--um-space-1) var(--um-space-3);
    border-radius: var(--um-radius-pill);
    font-size: var(--um-font-size-label);
    font-weight: 600;
}

/* ── Boutons ──────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: var(--um-space-2) var(--um-space-4);
    border-radius: var(--um-radius-md);
    border: 1px solid transparent;
    font-size: var(--um-font-size-ui);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

.btn-primaire { background: var(--um-primary); color: var(--um-surface-0); }
.btn-primaire:hover:not(:disabled) { background: var(--um-primary-hover); }

/* UI-4 (UI-1 gate finding) — three-level hierarchy: primary filled, secondary OUTLINED, tertiary ghost. */
.btn-secondaire { background: var(--um-surface-0); border-color: var(--um-primary); color: var(--um-primary); }
.btn-secondaire:hover:not(:disabled) { background: var(--um-primary-soft); }

.btn-tertiaire { background: transparent; border-color: var(--um-border); color: var(--um-text-secondary); }
.btn-tertiaire:hover:not(:disabled) { border-color: var(--um-primary); color: var(--um-primary); }

.btn-avertissement { background: var(--um-amber-600); color: var(--um-surface-0); }
.btn-succes { background: var(--um-emerald-600); color: var(--um-surface-0); }
.btn-danger { background: var(--um-rose-600); color: var(--um-surface-0); }

.btn-bloc { width: 100%; }

.btn:disabled,
.btn[disabled] {
    background: var(--um-blue-50);
    color: var(--um-text-tertiary);
    border-color: transparent;
    cursor: not-allowed;
    opacity: 0.85;
}

/* ── Cartes ───────────────────────────────────────────────────────────── */

.card {
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-xl);
    box-shadow: var(--um-shadow-card);
    padding: var(--um-space-5);
}

.card-lg {
    border-radius: var(--um-radius-2xl);
    padding: var(--um-space-6);
}

.card-kpi { display: grid; gap: var(--um-space-1); }
/* Barre d’accent or des cartes de chiffres (UI-1) */
.card.card-kpi { border-top: 3px solid var(--um-highlight); }
.card-kpi-label { font-size: var(--um-font-size-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-tertiary); }
.card-kpi-value { font-size: 30px; font-weight: 700; }
.card-kpi-sub { font-size: var(--um-font-size-small); color: var(--um-text-secondary); }

/* ── Formulaires ──────────────────────────────────────────────────────── */

.um-form { display: flex; flex-direction: column; gap: var(--um-space-4); }
.um-field { display: flex; flex-direction: column; gap: 6px; }
.um-field-label { font-size: var(--um-font-size-ui); font-weight: 600; color: var(--um-text-primary); }

.um-input {
    width: 100%;
    padding: 10px var(--um-space-3);
    border-radius: var(--um-radius-md);
    border: 1px solid var(--um-border);
    background: var(--um-surface-0);
    color: var(--um-text-primary);
    font-size: var(--um-font-size-ui);
}
.um-input:focus-visible { border-color: var(--um-primary); }
.um-input.is-invalid { border-color: var(--um-rose-600); }

.um-form-error {
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-rose-50);
    color: var(--um-rose-700);
    font-size: var(--um-font-size-ui);
}

.um-form-success {
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-emerald-50);
    color: var(--um-emerald-700);
    font-size: var(--um-font-size-ui);
}

.um-info-banner {
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-primary-soft);
    color: var(--um-primary);
    font-size: var(--um-font-size-ui);
}

.um-link-inline {
    align-self: flex-start;
    /* lien : --um-link */
    background: none;
    border: none;
    padding: 6px 0 0;
    font-size: var(--um-font-size-small);
    font-weight: 600;
    color: var(--um-link);
    text-align: left;
}

/* ── Tableaux ─────────────────────────────────────────────────────────── */

.um-table-wrap { overflow-x: auto; border: 1px solid var(--um-border); border-radius: var(--um-radius-lg); }
.um-table { width: 100%; border-collapse: collapse; background: var(--um-surface-0); font-size: var(--um-font-size-label); }
.um-table thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--um-blue-50);
    color: var(--um-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--um-font-size-caption);
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--um-border);
}
.um-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--um-border-soft);
    color: var(--um-text-primary);
}
.um-table tbody tr:hover td { background: var(--um-blue-50); }

.um-list-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--um-space-3); flex-wrap: wrap; margin-bottom: var(--um-space-4); }
.um-list-header-actions { display: flex; gap: var(--um-space-2); flex-wrap: wrap; }

/* ── Surfaces de repli (404, 403, surface protégée) ───────────────────── */

.shell-card {
    max-width: 480px;
    margin: 64px auto;
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-2xl);
    box-shadow: var(--um-shadow-card);
    padding: var(--um-space-8);
    text-align: left;
}
.shell-card-warning { border-color: var(--um-amber-200); background: var(--um-amber-50); }
.shell-eyebrow { font-size: var(--um-font-size-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--um-primary); margin-bottom: var(--um-space-2); }
.shell-card-warning .shell-eyebrow { color: var(--um-amber-700); }
.shell-title { font-size: var(--um-font-size-h2); font-weight: 700; color: var(--um-text-primary); margin: 0 0 var(--um-space-2); }
.shell-copy { font-size: var(--um-font-size-ui); color: var(--um-text-secondary); margin: 0 0 var(--um-space-5); line-height: 1.5; }
.shell-link-button {
    display: inline-flex;
    align-items: center;
    padding: var(--um-space-2) var(--um-space-4);
    border-radius: var(--um-radius-md);
    background: var(--um-primary);
    color: var(--um-surface-0);
    font-size: var(--um-font-size-ui);
    font-weight: 600;
    text-decoration: none;
}
.shell-link-button:hover { background: var(--um-primary-hover); }

/* ── Mise en page des écrans ─────────────────────────────────────────── */

.um-page-pad { padding: var(--um-space-5); }
.um-page-stack { display: grid; gap: var(--um-space-4); max-width: 640px; }
.um-coming-soon { max-width: 560px; display: grid; gap: 10px; }

.um-definitions { display: grid; grid-template-columns: max-content 1fr; gap: 6px var(--um-space-4); margin: 0; font-size: var(--um-font-size-ui); }
.um-definitions dt { color: var(--um-text-secondary); font-weight: 500; }
.um-definitions dd { margin: 0; color: var(--um-text-primary); font-weight: 600; }

/* « Bientôt disponible » (Components/BientotDisponible.razor) */
.um-bientot { max-width: 560px; display: grid; gap: var(--um-space-3); }
.um-bientot-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--um-radius-lg);
    background: var(--um-primary-soft);
    color: var(--um-primary);
}
.um-bientot-note { font-size: var(--um-font-size-label); color: var(--um-text-tertiary); margin: 0; }

/* ==========================================================================
   Connexion (Pages/Connexion.razor, Pages/PlatformAdmin/Connexion.razor)
   ========================================================================== */

.um-login-shell {
    min-height: 100vh;
    display: flex;
    background: var(--um-blue-50);
}

.um-login-brand {
    display: none;
    width: 400px;
    flex-shrink: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--um-space-8);
    padding: var(--um-space-10);
    background: var(--um-shell);
    color: var(--um-text-on-dark);
}

.um-login-brand-logo-row { display: flex; align-items: center; gap: var(--um-space-3); margin-bottom: var(--um-space-10); }

.um-login-logo-mark {
    width: 40px;
    height: 40px;
    border-radius: var(--um-radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--um-font-size-h3);
    background: var(--um-primary);
    color: var(--um-surface-0);
    flex-shrink: 0;
}

.um-login-brand-title { font-weight: 700; font-size: var(--um-font-size-h3); line-height: 1.2; }
.um-login-brand-subtitle { color: var(--um-text-on-dark-faint); font-size: var(--um-font-size-ui); }

.um-login-features { display: flex; flex-direction: column; gap: var(--um-space-5); }
.um-login-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--um-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--um-space-3);
    background: var(--um-fill-primary-on-dark);
}
.um-login-feature-title { font-weight: 600; margin-bottom: var(--um-space-1); }
.um-login-feature-copy { color: var(--um-text-on-dark-muted); font-size: var(--um-font-size-ui); line-height: 1.45; }

.um-login-brand-footer { border-top: 2px solid var(--um-highlight); padding-top: var(--um-space-6); }
.um-login-brand-footer-eyebrow { color: var(--um-text-on-dark-faint); font-size: var(--um-font-size-small); }
.um-login-brand-footer-name { font-weight: 600; margin-top: var(--um-space-1); }
.um-login-brand-footer-note { color: var(--um-text-on-dark-faint); font-size: var(--um-font-size-small); margin-top: 2px; }

.um-login-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--um-space-6);
}

.um-login-card { width: 100%; max-width: 400px; }

.um-login-mobile-logo { display: flex; align-items: center; gap: var(--um-space-3); margin-bottom: var(--um-space-8); }
.um-login-mobile-title { font-weight: 700; font-size: 20px; color: var(--um-text-primary); }
.um-login-mobile-subtitle { font-size: var(--um-font-size-small); color: var(--um-text-secondary); }

.um-login-lede { margin-bottom: var(--um-space-8); }

.um-login-submit { width: 100%; padding: var(--um-space-3); font-size: var(--um-font-size-ui); }
.um-login-submit:disabled { opacity: 0.7; background: var(--um-primary); color: var(--um-surface-0); cursor: progress; }

.um-login-demo-panel {
    margin-top: var(--um-space-6);
    padding: var(--um-space-3);
    border-radius: var(--um-radius-xl);
    background: var(--um-amber-50);
    border: 1px solid var(--um-amber-100);
}
.um-login-demo-title { display: flex; align-items: center; gap: 6px; font-size: var(--um-font-size-small); font-weight: 600; color: var(--um-amber-700); margin-bottom: var(--um-space-2); }
.um-login-demo-hint { font-size: var(--um-font-size-caption); color: var(--um-amber-700); margin: -4px 0 var(--um-space-2); }
.um-login-demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--um-space-1); }
.um-login-demo-button {
    padding: 6px var(--um-space-2);
    border-radius: var(--um-radius-sm);
    border: none;
    background: var(--um-shell);
    color: var(--um-surface-0);
    font-size: var(--um-font-size-small);
    font-weight: 500;
}
.um-login-demo-button:hover { background: var(--um-shell-hover); }

@media (min-width: 1024px) {
    .um-login-brand { display: flex; }
    .um-login-mobile-logo { display: none; }
}

/* ==========================================================================
   W1-ACC1 — codes à usage unique (connexion), dialogues, « Comptes & rôles »
   ========================================================================== */

/* Connexion : liens vers les panneaux et panneau « code » */
.um-login-liens { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--um-space-2) var(--um-space-4); margin-top: var(--um-space-3); }
.um-code-panneau { display: grid; gap: var(--um-space-3); }
.um-code-retour { display: inline-flex; align-items: center; gap: var(--um-space-1); padding-top: 0; }
.um-code-saisie { letter-spacing: 0.12em; text-transform: uppercase; }
.um-code-etablissement { margin-bottom: var(--um-space-3); }

/* Dialogues (confirmation, code affiché une fois) */
.um-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--um-space-4);
    background: var(--um-overlay);
}
.um-dialog {
    width: min(520px, 100%);
    max-height: calc(100vh - 2 * var(--um-space-4));
    overflow-y: auto;
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-xl);
    box-shadow: var(--um-shadow-popover);
    padding: var(--um-space-5);
    display: grid;
    gap: var(--um-space-4);
}
.um-dialog-header { display: flex; align-items: center; gap: var(--um-space-3); }
.um-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--um-radius-lg);
    background: var(--um-primary-soft);
    color: var(--um-primary);
}
.um-dialog-icon.is-danger { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-dialog-body { display: grid; gap: var(--um-space-3); }
.um-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--um-space-2); }

.um-code-affiche {
    padding: var(--um-space-4);
    border-radius: var(--um-radius-lg);
    border: 1px dashed var(--um-blue-200);
    background: var(--um-primary-soft);
    color: var(--um-blue-900);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-align: center;
    user-select: all;
}
.um-code-avertissement {
    display: flex;
    align-items: flex-start;
    gap: var(--um-space-2);
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-amber-50);
    color: var(--um-amber-700);
    font-size: var(--um-font-size-ui);
}
.um-code-avertissement .um-icon { flex-shrink: 0; margin-top: 2px; }
.um-code-lien { overflow-wrap: anywhere; font-weight: 500; }

/* Administration › Comptes & rôles */
.um-comptes-bandeau { margin-bottom: var(--um-space-4); }
.um-comptes-nouveau { display: grid; gap: var(--um-space-3); margin-bottom: var(--um-space-4); }
.um-comptes-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--um-space-3) var(--um-space-4); }
.um-comptes-actions-form { display: flex; justify-content: flex-end; gap: var(--um-space-2); flex-wrap: wrap; }
.um-comptes-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3) var(--um-space-4); margin-bottom: var(--um-space-4); }
.um-comptes-filtres .um-field { min-width: 200px; }
.um-comptes-filtres .um-field-label { display: inline-flex; align-items: center; gap: var(--um-space-1); }
.um-comptes-compte { margin-left: auto; }
.um-comptes-squelette { height: 200px; }
.um-comptes-email { overflow-wrap: anywhere; }
.um-comptes-legende { margin-top: var(--um-space-1); }
.um-comptes-actions { display: flex; flex-wrap: wrap; gap: var(--um-space-1); }
.um-comptes-action { padding: var(--um-space-1) var(--um-space-2); font-size: var(--um-font-size-small); }

/* ==========================================================================
   Coquille Bureau (Components/Layout/BureauLayout.razor, PlatformLayout.razor)
   Desktop d'abord ; sous 1024 px la barre latérale devient un tiroir.
   ========================================================================== */

.um-bureau-shell {
    display: flex;
    height: 100vh;
    background: var(--um-blue-50);
    overflow: hidden;
    font-family: var(--um-font-sans);
}

.um-bureau-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--um-overlay);
    display: none;
}

.um-bureau-sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--um-sidebar-width);
    background: var(--um-shell);
    color: var(--um-text-on-dark);
    transition: width 0.2s ease, transform 0.2s ease;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
}
.um-bureau-sidebar.is-collapsed { width: var(--um-sidebar-width-collapsed); }

.um-bureau-sidebar-logo {
    display: flex;
    align-items: center;
    gap: var(--um-space-3);
    padding: var(--um-space-4) 14px;
    min-height: var(--um-topbar-height);
    border-bottom: 1px solid var(--um-border-on-dark);
}
.um-bureau-logo-mark {
    width: 32px;
    height: 32px;
    border-radius: var(--um-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--um-primary);
    color: var(--um-surface-0);
    font-weight: 700;
    font-size: var(--um-font-size-small);
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.um-bureau-logo-text { overflow: hidden; }
.um-bureau-logo-title { font-weight: 700; font-size: 15px; line-height: 1.2; }
.um-bureau-logo-subtitle { font-size: var(--um-font-size-small); color: var(--um-text-on-dark-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.um-bureau-org-badge {
    margin: var(--um-space-3) var(--um-space-3) var(--um-space-1);
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-fill-on-dark);
}
.um-bureau-org-eyebrow { font-size: var(--um-font-size-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-on-dark-faint); margin-bottom: 2px; }
.um-bureau-org-name { font-size: var(--um-font-size-label); font-weight: 600; line-height: 1.3; }

.um-bureau-nav { flex: 1; overflow-y: auto; padding: var(--um-space-2); display: flex; flex-direction: column; gap: 2px; }
.um-bureau-nav-item {
    display: flex;
    align-items: center;
    gap: var(--um-space-3);
    padding: 9px var(--um-space-3);
    border-radius: var(--um-radius-md);
    font-size: var(--um-font-size-ui);
    color: var(--um-text-on-dark-muted);
    border-left: 2px solid transparent;
    text-decoration: none;
    background: transparent;
}
.um-bureau-nav-item:hover { background: var(--um-fill-on-dark); color: var(--um-text-on-dark); }
.um-bureau-nav-item.is-active {
    background: var(--um-fill-primary-on-dark);
    color: var(--um-text-on-dark);
    border-left-color: var(--um-highlight);
}
.um-bureau-nav-item.is-active .um-bureau-nav-icon { color: var(--um-highlight); }
.um-bureau-nav-icon { flex-shrink: 0; }
.um-bureau-nav-label { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.um-bureau-collapse-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: none;
    border-top: 1px solid var(--um-border-on-dark);
    background: transparent;
    color: var(--um-text-on-dark-faint);
}
.um-bureau-collapse-toggle:hover { color: var(--um-text-on-dark); }

.um-bureau-main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.um-bureau-topbar {
    display: flex;
    align-items: center;
    gap: var(--um-space-3);
    height: var(--um-topbar-height);
    padding: 0 var(--um-space-4);
    background: var(--um-surface-0);
    border-bottom: 1px solid var(--um-border);
    flex-shrink: 0;
}

.um-bureau-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--um-radius-md);
    background: transparent;
    color: var(--um-text-primary);
    flex-shrink: 0;
}
.um-bureau-hamburger:hover { background: var(--um-blue-50); }
.um-bureau-hamburger-bars { display: flex; flex-direction: column; gap: 4px; }
.um-bureau-hamburger-bars span { display: block; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }

.um-bureau-topbar-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: var(--um-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.um-bureau-etab-chip {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--um-radius-md);
    border: 1px solid var(--um-border);
    background: var(--um-surface-1);
    color: var(--um-text-primary);
    font-size: var(--um-font-size-label);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.um-bureau-etab-chip .um-icon { color: var(--um-blue-600); }

/* Sélecteur d'année académique (Components/AnneeAcademiqueSelecteur.razor) */
.um-annee-selecteur {
    display: inline-flex;
    align-items: center;
    gap: var(--um-space-2);
    padding: 4px 10px;
    border-radius: var(--um-radius-md);
    border: 1px solid var(--um-highlight);
    background: var(--um-highlight-soft);
    color: var(--um-highlight-text);
    flex-shrink: 0;
}
.um-annee-selecteur .um-icon { color: var(--um-highlight-text); }
.um-annee-selecteur-texte { display: flex; flex-direction: column; line-height: 1.15; }
.um-annee-selecteur-libelle { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--um-highlight-text); }
.um-annee-selecteur-valeur { font-size: var(--um-font-size-label); font-weight: 700; }
.um-annee-selecteur.is-empty { background: var(--um-amber-50); border-color: var(--um-amber-100); color: var(--um-amber-700); }
.um-annee-selecteur.is-empty .um-icon,
.um-annee-selecteur.is-empty .um-annee-selecteur-libelle { color: var(--um-amber-700); }

/* ── W1-REF1 — sélecteur d'année branché, administration des référentiels ── */

.um-annee-selecteur-racine { position: relative; flex-shrink: 0; }
button.um-annee-selecteur { cursor: pointer; font: inherit; text-align: left; }
button.um-annee-selecteur:hover { border-color: var(--um-gold-700); }
.um-annee-selecteur.is-lecture-seule { background: var(--um-blue-50); border-color: var(--um-blue-100); color: var(--um-blue-900); }
.um-annee-selecteur.is-lecture-seule .um-icon,
.um-annee-selecteur.is-lecture-seule .um-annee-selecteur-libelle { color: var(--um-blue-600); }
.um-annee-selecteur-chevron { color: var(--um-text-tertiary); }
.um-annee-lecture-seule { gap: 4px; }
.um-annee-menu-backdrop { position: fixed; inset: 0; z-index: 45; background: transparent; }
.um-annee-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 50;
    min-width: 240px;
    padding: var(--um-space-2);
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-popover);
    display: grid;
    gap: 2px;
}
.um-annee-menu-titre { font-size: var(--um-font-size-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-tertiary); padding: var(--um-space-1) var(--um-space-2); }
.um-annee-menu-item {
    display: flex;
    align-items: center;
    gap: var(--um-space-2);
    width: 100%;
    padding: var(--um-space-2);
    border: 0;
    border-radius: var(--um-radius-md);
    background: transparent;
    color: var(--um-text-primary);
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.um-annee-menu-item:hover { background: var(--um-blue-50); }
.um-annee-menu-item.is-selected { background: var(--um-primary-soft); }
.um-annee-menu-code { font-weight: 700; min-width: 84px; }
.um-annee-menu-check { margin-left: auto; color: var(--um-primary); }

.um-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px var(--um-space-2);
    border-radius: var(--um-radius-pill);
    font-size: var(--um-font-size-small);
    font-weight: 600;
    white-space: nowrap;
}

.um-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.um-admin-page { display: grid; gap: var(--um-space-4); max-width: 1080px; }
.um-admin-page-large { max-width: 1200px; }
.um-admin-entete { display: grid; gap: var(--um-space-2); }
.um-lien-retour { display: inline-flex; align-items: center; gap: 6px; font-size: var(--um-font-size-label); font-weight: 600; color: var(--um-text-secondary); text-decoration: none; justify-self: start; }
.um-lien-retour:hover { color: var(--um-primary); }
.um-admin-section { display: grid; gap: var(--um-space-3); }

.um-admin-cartes { display: grid; gap: var(--um-space-4); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.um-admin-carte { display: flex; align-items: flex-start; gap: var(--um-space-3); text-decoration: none; color: var(--um-text-primary); transition: border-color 0.15s ease; }
.um-admin-carte:hover { border-color: var(--um-blue-500); }
.um-admin-carte-icone {
    width: 44px;
    height: 44px;
    border-radius: var(--um-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--um-primary-soft);
    color: var(--um-primary);
    flex-shrink: 0;
}
.um-admin-carte-texte { display: grid; gap: var(--um-space-1); flex: 1; min-width: 0; }
.um-admin-carte-titre { font-size: var(--um-font-size-h3); font-weight: 700; }
.um-admin-carte-description { font-size: var(--um-font-size-label); color: var(--um-text-secondary); line-height: 1.45; }
.um-admin-carte-chevron { color: var(--um-text-tertiary); align-self: center; }

.um-btn-petit { padding: 4px var(--um-space-3); font-size: var(--um-font-size-label); }
.um-icone-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
    color: var(--um-text-secondary);
    cursor: pointer;
}
.um-icone-bouton:hover:not(:disabled) { border-color: var(--um-primary); color: var(--um-primary); }
.um-icone-bouton:disabled { opacity: 0.4; cursor: not-allowed; }

.um-num,
.um-table thead th.um-num { text-align: right; }
.um-actions-col,
.um-table thead th.um-actions-col { text-align: right; white-space: nowrap; }
.um-actions-col > * + * { margin-left: var(--um-space-1); }
.um-skeleton-table { height: 160px; border-radius: var(--um-radius-lg); }

.um-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); }
.um-filtres-badge { margin-bottom: 8px; }
.um-field-court { min-width: 160px; }
.um-field-large { min-width: min(100%, 480px); }
.um-form-ligne { display: flex; flex-wrap: wrap; gap: var(--um-space-3); }
.um-form-ligne > .um-field { flex: 1; }
.um-form-ligne > .um-field-court { flex: 0 1 180px; }
.um-form-en-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-case { display: inline-flex; align-items: center; gap: var(--um-space-2); font-size: var(--um-font-size-ui); }

/* Boîte de dialogue (Components/Dialogue.razor) */
.um-dialogue-fond { position: fixed; inset: 0; z-index: 60; background: var(--um-overlay); }
.um-dialogue {
    position: fixed;
    z-index: 61;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(520px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    background: var(--um-surface-0);
    border-radius: var(--um-radius-xl);
    box-shadow: var(--um-shadow-popover);
}
.um-dialogue.is-large { width: min(1040px, calc(100vw - 32px)); }
.um-dialogue-entete { display: flex; align-items: center; gap: var(--um-space-3); padding: var(--um-space-4) var(--um-space-5); border-bottom: 1px solid var(--um-border); }
.um-dialogue-entete .um-h3 { flex: 1; }
.um-dialogue-icone { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--um-radius-md); background: var(--um-primary-soft); color: var(--um-primary); }
.um-dialogue-icone.is-danger { background: var(--um-rose-50); color: var(--um-rose-600); }
.um-dialogue-fermer { border: 0; background: transparent; color: var(--um-text-tertiary); cursor: pointer; padding: var(--um-space-1); border-radius: var(--um-radius-sm); }
.um-dialogue-fermer:hover { color: var(--um-text-primary); background: var(--um-blue-50); }
.um-dialogue-corps { padding: var(--um-space-5); overflow-y: auto; display: grid; gap: var(--um-space-3); }
.um-dialogue-corps p { margin: 0; line-height: 1.5; }
.um-dialogue-pied { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--um-space-2); padding: var(--um-space-4) var(--um-space-5); border-top: 1px solid var(--um-border); }

/* Réglages de l'établissement (Pages/Bureau/Administration/Etablissement.razor, W2-ETAB1) */
.um-etab-grille { display: grid; gap: var(--um-space-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.um-etab-section { display: grid; gap: var(--um-space-3); min-width: 0; }
.um-etab-logo { display: flex; flex-wrap: wrap; gap: var(--um-space-4); align-items: flex-start; }
.um-etab-logo > .um-form { flex: 1; min-width: 200px; }
.um-etab-logo-apercu {
    width: 120px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-1);
    flex-shrink: 0;
}
.um-etab-logo-apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.um-etab-logo-vide { display: grid; justify-items: center; gap: var(--um-space-1); font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-etab-apercu-entete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--um-space-2); }
.um-etab-apercus { display: grid; gap: var(--um-space-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.um-etab-apercu { margin: 0; display: grid; gap: var(--um-space-2); align-content: start; min-width: 0; }
.um-etab-apercu-titre { display: grid; gap: 2px; font-size: var(--um-font-size-label); font-weight: 700; color: var(--um-text-primary); }
/* A strip of A4 paper at half scale: the header is laid out at its printed
   width (190 mm) then zoomed, so what is seen is what prints. */
.um-etab-feuille {
    overflow: hidden;
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-print-paper, var(--um-surface-0));
    color: var(--um-print-ink, var(--um-text-primary));
    padding: var(--um-space-3);
}
.um-etab-feuille-contenu { width: 190mm; zoom: 0.5; font-family: var(--um-print-font-sans, sans-serif); font-size: 11pt; line-height: 1.3; }
.um-etab-feuille--pied { width: fit-content; max-width: 100%; }
.um-etab-feuille--pied .um-etab-feuille-contenu { zoom: 0.6; }
.um-etab-feuille .um-entete,
.um-etab-feuille .um-pied { margin: 0; }
.um-etab-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--um-space-2); }

/* Arbre de la structure (Pages/Bureau/Administration/Structure.razor) */
.um-arbre { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-3); }
.um-arbre-enfants { list-style: none; margin: var(--um-space-2) 0 0; padding: 0 0 0 var(--um-space-5); border-left: 2px solid var(--um-border-soft); display: grid; gap: var(--um-space-2); }
.um-arbre-noeud { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); padding: var(--um-space-1) 0; }
.um-arbre-type { font-size: var(--um-font-size-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-primary); min-width: 88px; }
.um-arbre-code { font-size: var(--um-font-size-label); color: var(--um-text-secondary); }
.um-arbre-nom { font-weight: 600; }
.um-arbre-compte { margin-right: auto; }
.um-arbre-actions { display: inline-flex; flex-wrap: wrap; gap: var(--um-space-1); }
.um-arbre .is-inactif > .um-arbre-noeud .um-arbre-nom { color: var(--um-text-tertiary); text-decoration: line-through; }
.um-arbre-formulaire { margin: var(--um-space-2) 0; padding: var(--um-space-3); border: 1px dashed var(--um-blue-200); border-radius: var(--um-radius-lg); background: var(--um-primary-soft); display: grid; gap: var(--um-space-3); }
.um-arbre-formulaire-titre { font-weight: 700; font-size: var(--um-font-size-ui); }
.um-arbre-formulaire-actions { display: flex; justify-content: flex-end; gap: var(--um-space-2); }

/* Programme (Components/Administration/ProgrammeVue.razor) */
.um-programme-semestre { margin: var(--um-space-2) 0 0; font-size: var(--um-font-size-ui); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-secondary); }
.um-programme-vide { display: flex; align-items: center; flex-wrap: wrap; gap: var(--um-space-3); color: var(--um-text-tertiary); }
.um-ue { display: grid; gap: var(--um-space-3); padding: var(--um-space-4); }
.um-ue-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-3); }
.um-ue-identite { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--um-space-2); flex: 1; min-width: 240px; }
.um-ue-code { font-size: var(--um-font-size-label); font-weight: 600; color: var(--um-blue-700); background: var(--um-primary-soft); border-radius: var(--um-radius-sm); padding: 2px 6px; }
.um-ue-intitule { font-size: var(--um-font-size-h3); font-weight: 700; }
.um-ue-chiffres { display: flex; gap: var(--um-space-4); margin: 0; }
.um-ue-chiffres div { display: grid; text-align: right; }
.um-ue-chiffres dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.um-ue-chiffres dd { margin: 0; font-size: var(--um-font-size-h3); font-weight: 700; }
.um-ue-actions { display: inline-flex; flex-wrap: wrap; gap: var(--um-space-1); }
/* Same column widths in every UE block, so the figures line up down the page
   (desktop); narrow screens scroll the table sideways instead of squeezing it. */
.um-ec-table { min-width: 560px; }
@media (min-width: 768px) {
    .um-ec-table { table-layout: fixed; }
    .um-ec-table th:nth-child(2),
    .um-ec-table th:nth-child(3),
    .um-ec-table th:nth-child(4) { width: 130px; }
    .um-ec-table th.um-actions-col { width: 124px; }
}
.um-ue-sans-ec { margin: 0; }
.um-programme-totaux { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--um-space-3); background: var(--um-blue-50); }
.um-programme-totaux-valeurs { font-size: var(--um-font-size-h3); }
/* LMD-1 — 30 credits per semester / 60 per year: a warning on the programme, never a block. */
.um-avertissement-credits { display: flex; gap: var(--um-space-3); align-items: flex-start; background: var(--um-amber-50); border: 1px solid var(--um-amber-100); color: var(--um-amber-700); margin-bottom: var(--um-space-3); }
.um-avertissement-credits ul { margin: var(--um-space-1) 0; padding-left: var(--um-space-4); }

/* Aperçu d'import */
.um-import-resume { display: flex; align-items: center; gap: var(--um-space-2); padding: var(--um-space-3); border-radius: var(--um-radius-md); font-weight: 600; }
.um-import-resume.is-ok { background: var(--um-emerald-50); color: var(--um-emerald-700); }
.um-import-resume.is-ko { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-import-table { max-height: 360px; overflow-y: auto; }
.um-import-table tr.is-erreur td { background: var(--um-rose-50); }
.um-import-erreur { font-size: var(--um-font-size-small); }

/* ── W1-REF1 end ─────────────────────────────────────────────────────── */

/* ── W2-INS1 — Inscriptions › Étudiants, dossier étudiant ─────────────── */

/* Sous-navigation du module (Components/Etudiants/InscriptionsOnglets.razor) */
.um-sous-nav { display: flex; flex-wrap: wrap; gap: var(--um-space-1); border-bottom: 1px solid var(--um-border); }
.um-sous-nav-onglet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--um-space-2) var(--um-space-3);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    font-size: var(--um-font-size-ui);
    font-weight: 600;
    color: var(--um-text-secondary);
    text-decoration: none;
}
.um-sous-nav-onglet:hover:not(.is-bientot) { color: var(--um-primary); }
.um-sous-nav-onglet.is-active { color: var(--um-primary); border-bottom-color: var(--um-highlight); }
.um-sous-nav-onglet.is-bientot { color: var(--um-text-tertiary); cursor: not-allowed; }
.um-sous-nav-onglet .um-badge { margin-left: 2px; }

/* Liste des étudiants */
.um-recherche { position: relative; display: flex; align-items: center; }
.um-recherche > .um-icon { position: absolute; left: var(--um-space-3); color: var(--um-text-tertiary); pointer-events: none; }
.um-recherche > .um-input { padding-left: 36px; }
.um-etudiants-photo-col,
.um-table thead th.um-etudiants-photo-col { width: 52px; padding-right: 0; }
.um-lien-dossier { font-weight: 600; color: var(--um-text-primary); text-decoration: none; }
.um-lien-dossier:hover { color: var(--um-primary); text-decoration: underline; }
.um-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); }

/* Photo (Components/Etudiants/PhotoEtudiant.razor) */
.um-photo-etudiant { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; border-radius: var(--um-radius-md); background: var(--um-blue-50); color: var(--um-blue-700); font-weight: 700; }
/* An unreadable image keeps its box (no alt text spilling over the row). */
img.um-photo-etudiant,
img.um-photo-etudiant.is-miniature,
img.um-photo-etudiant.is-grande { overflow: hidden; font-size: 0; }
.um-photo-etudiant.is-miniature { width: 36px; height: 44px; font-size: var(--um-font-size-small); }
/* SYNC-10 — the file has not reached this site yet: the text in the photo's place. */
.um-photo-etudiant.is-synchro { padding: 2px; text-align: center; font-size: 9px; line-height: 1.15; font-weight: 600; color: var(--um-text-tertiary); }
.um-fichier-synchro { font-size: var(--um-font-size-small); color: var(--um-text-tertiary); }
.um-photo-etudiant.is-grande { width: 96px; height: 120px; font-size: var(--um-font-size-h2); border: 1px solid var(--um-border); }

/* Dossier */
.um-dossier-entete { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--um-space-5); }
.um-dossier-identite { display: grid; gap: var(--um-space-2); flex: 1; min-width: 240px; }
.um-dossier-resume { display: flex; flex-wrap: wrap; gap: var(--um-space-3) var(--um-space-6); margin: 0; }
.um-dossier-resume dt { font-size: var(--um-font-size-caption); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--um-text-tertiary); }
.um-dossier-resume dd { margin: var(--um-space-1) 0 0; font-weight: 600; }
.um-dossier-matricule { font-size: var(--um-font-size-h3); color: var(--um-blue-700); }
.um-onglets { display: flex; flex-wrap: wrap; gap: var(--um-space-1); border-bottom: 1px solid var(--um-border); }
.um-onglet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--um-space-2) var(--um-space-3);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font: inherit;
    font-size: var(--um-font-size-ui);
    font-weight: 600;
    color: var(--um-text-secondary);
    cursor: pointer;
}
.um-onglet:hover { color: var(--um-primary); }
.um-onglet.is-active { color: var(--um-primary); border-bottom-color: var(--um-highlight); }
.um-dossier-section { display: grid; gap: var(--um-space-4); }
.um-dossier-section-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-dossier-sous-titre { margin: var(--um-space-2) 0 0; font-size: var(--um-font-size-ui); font-weight: 700; color: var(--um-text-primary); }
.um-dossier-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--um-space-2); }
.um-dossier-ajout { justify-self: start; }
.um-dossier-depot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); }

/* Bulletin d'inscription P3 — lecture et formulaires */
.um-p3 { display: grid; gap: 0; margin: 0; }
.um-p3-ligne { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: var(--um-space-3); padding: var(--um-space-2) 0; border-bottom: 1px solid var(--um-border-soft); }
.um-p3-ligne dt { color: var(--um-text-secondary); font-size: var(--um-font-size-ui); font-weight: 500; }
.um-p3-ligne dd { margin: 0; color: var(--um-text-primary); font-size: var(--um-font-size-ui); font-weight: 600; }
.um-p3-ligne dd.is-vide,
.um-p3-libre.is-vide { color: var(--um-text-tertiary); font-weight: 400; font-style: italic; }
.um-p3-libre { margin: 0; white-space: pre-line; }
.um-p3-form { max-width: 820px; }
.um-p3-groupe { display: grid; gap: var(--um-space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.um-p3-groupe > legend { padding: 0; margin-bottom: var(--um-space-2); }
.um-p3-lecture { padding: 10px 0; color: var(--um-text-secondary); }
.um-p3-table { min-width: 720px; }
.um-p3-table td { padding: 6px 8px; }
@media (max-width: 640px) {
    .um-p3-ligne { grid-template-columns: 1fr; gap: 2px; }
}

/* Pièces du dossier */
.um-document-retire td { color: var(--um-text-tertiary); }
.um-document-retire .um-document-nom { text-decoration: line-through; }
.um-document-nom { overflow-wrap: anywhere; }
.um-apercu-image { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--um-radius-md); }
.um-apercu-pdf { width: 100%; height: 70vh; border: 1px solid var(--um-border); border-radius: var(--um-radius-md); }

/* Portail étudiant — profil */
.um-profil-identite { display: grid; gap: var(--um-space-3); }
.um-profil-identite .um-p3-ligne { grid-template-columns: 1fr; gap: 2px; }

/* ── W2-INS1 end ─────────────────────────────────────────────────────── */

/* ── W2-INS2 — Inscriptions : assistant L1, réinscription, liste ─────── */

/* Étapes de l'assistant (sections du bulletin P3) */
.um-assistant-etapes { display: flex; flex-wrap: wrap; gap: var(--um-space-2); }
.um-assistant-etape {
    display: inline-flex;
    align-items: center;
    gap: var(--um-space-2);
    padding: 6px var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-pill);
    background: var(--um-surface-0);
    font: inherit;
    font-size: var(--um-font-size-ui);
    font-weight: 500;
    color: var(--um-text-secondary);
    cursor: pointer;
}
.um-assistant-etape:hover:not(:disabled) { border-color: var(--um-primary-hover); color: var(--um-primary); }
.um-assistant-etape.is-courante { border-color: var(--um-primary); color: var(--um-primary); font-weight: 700; }
.um-assistant-etape.is-faite { color: var(--um-text-primary); }
.um-assistant-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--um-blue-50);
    font-size: var(--um-font-size-small);
    font-weight: 700;
}
.um-assistant-etape.is-courante .um-assistant-numero { background: var(--um-primary); color: var(--um-surface-0); }
.um-assistant-etape.is-faite .um-assistant-numero { background: var(--um-primary-soft); color: var(--um-primary); }
.um-assistant-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); padding-top: var(--um-space-2); border-top: 1px solid var(--um-border-soft); }
.um-assistant-recap { display: grid; gap: var(--um-space-2); }
.um-assistant-certification { align-items: flex-start; gap: var(--um-space-2); padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-blue-50); font-style: italic; }
.um-assistant-succes { display: grid; gap: var(--um-space-3); border-left: 4px solid var(--um-emerald-600); }
.um-assistant-succes .um-h3 { display: inline-flex; align-items: center; gap: var(--um-space-2); color: var(--um-emerald-700); }
.um-assistant-repris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
/* A wide table (20. Etudes post-secondaires) scrolls inside its wrapper instead of widening the page. */
.um-assistant-section > *,
.um-assistant-section .um-p3-form { min-width: 0; }
.um-assistant-section .um-dossier-ajout { align-self: flex-start; }
.um-assistant-titre:focus { outline: none; }

/* Liste des inscriptions */
.um-inscriptions-comptes { display: flex; flex-wrap: wrap; gap: var(--um-space-4); align-items: center; }
.um-inscriptions-comptes > span { display: inline-flex; align-items: center; gap: var(--um-space-2); }
/* The table scrolls inside its wrapper instead of widening the page (narrow office screens). */
.um-inscriptions-wrap { min-width: 0; }
.um-inscriptions-selection { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-selection-col,
.um-table thead th.um-selection-col { width: 36px; padding-right: 0; }
.um-inscription-annulee td { color: var(--um-text-tertiary); }
.um-inscription-annulee .um-lien-dossier { color: var(--um-text-tertiary); text-decoration: line-through; }

/* ── W2-INS2 end ─────────────────────────────────────────────────────── */

/* Menu utilisateur (nom, rôle, mot de passe, déconnexion) */
.um-user-menu { position: relative; flex-shrink: 0; }
.um-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: var(--um-space-2);
    padding: 4px 6px 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--um-radius-md);
    background: transparent;
    color: var(--um-text-primary);
    text-align: left;
}
.um-user-menu-trigger:hover,
.um-user-menu.is-open .um-user-menu-trigger { background: var(--um-blue-50); border-color: var(--um-border); }
.um-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--um-surface-0);
    font-size: var(--um-font-size-small);
    font-weight: 700;
    flex-shrink: 0;
}
.um-user-meta { display: none; min-width: 0; }
.um-user-name { display: block; font-size: var(--um-font-size-label); font-weight: 600; line-height: 1.2; color: var(--um-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.um-user-role { display: block; font-size: var(--um-font-size-small); color: var(--um-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
/* Puce utilisateur non interactive (console plateforme) */
.um-user-chip { display: flex; align-items: center; gap: var(--um-space-2); padding-left: var(--um-space-3); border-left: 1px solid var(--um-border); flex-shrink: 0; }
.um-user-menu-chevron { color: var(--um-text-tertiary); }

.um-user-menu-backdrop { position: fixed; inset: 0; z-index: 45; background: transparent; }
.um-user-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 272px;
    padding: var(--um-space-2);
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    box-shadow: var(--um-shadow-popover);
}
.um-user-menu-header { display: flex; align-items: center; gap: 10px; padding: var(--um-space-2) var(--um-space-2) var(--um-space-3); border-bottom: 1px solid var(--um-border); margin-bottom: var(--um-space-1); }
.um-user-menu-identity { min-width: 0; }
.um-user-menu-name { font-size: var(--um-font-size-ui); font-weight: 700; color: var(--um-text-primary); overflow-wrap: anywhere; }
.um-user-menu-role { font-size: var(--um-font-size-small); color: var(--um-text-secondary); }
.um-user-menu-email { font-size: var(--um-font-size-small); color: var(--um-text-tertiary); overflow-wrap: anywhere; }
.um-user-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--um-space-2) 10px;
    border-radius: var(--um-radius-md);
    font-size: var(--um-font-size-ui);
    font-weight: 500;
    color: var(--um-text-primary);
    text-decoration: none;
}
.um-user-menu-item:hover { background: var(--um-blue-50); }
.um-user-menu-item .um-icon { color: var(--um-text-secondary); }
.um-user-menu-item--danger { color: var(--um-rose-700); }
.um-user-menu-item--danger .um-icon { color: var(--um-rose-600); }

.um-bureau-main { flex: 1; overflow-y: auto; background: var(--um-blue-50); }

@media (max-width: 1023px) {
    .um-bureau-sidebar { transform: translateX(-100%); }
    .um-bureau-sidebar.is-open { transform: translateX(0); }
    .um-bureau-sidebar.is-collapsed { width: var(--um-sidebar-width); }
    .um-bureau-backdrop { display: block; }
}

@media (min-width: 640px) {
    .um-bureau-etab-chip { display: inline-flex; }
}

@media (min-width: 1024px) {
    .um-bureau-sidebar { position: relative; transform: none !important; }
    .um-bureau-collapse-toggle { display: flex; }
    .um-bureau-hamburger { display: none; }
    .um-bureau-backdrop { display: none !important; }
    .um-bureau-topbar { padding: 0 var(--um-space-5); }
    .um-user-meta { display: block; }
    .um-page-pad { padding: var(--um-space-6); }
}

/* ── Badge réseau ─────────────────────────────────────────────────────── */

.um-network-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--um-radius-md);
    font-size: var(--um-font-size-small);
    font-weight: 500;
    flex-shrink: 0;
}
.um-network-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

.um-network-online       { background: var(--um-emerald-50); color: var(--um-emerald-700); }
.um-network-online .um-network-dot { background: var(--um-emerald-600); }
.um-network-offline      { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-network-offline .um-network-dot { background: var(--um-rose-600); }
.um-network-weak         { background: var(--um-amber-50); color: var(--um-amber-700); }
.um-network-weak .um-network-dot { background: var(--um-amber-600); }
.um-network-syncing      { background: var(--um-sky-50); color: var(--um-sky-700); }
.um-network-syncing .um-network-dot { background: var(--um-sky-600); }
.um-network-sync-failed  { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-network-sync-failed .um-network-dot { background: var(--um-rose-600); }
.um-network-conflict     { background: var(--um-amber-50); color: var(--um-amber-700); }
.um-network-conflict .um-network-dot { background: var(--um-amber-600); }
.um-network-rejected     { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-network-rejected .um-network-dot { background: var(--um-rose-600); }

.um-network-badge-compact {
    background: transparent !important;
    padding: 0;
    color: var(--um-text-on-dark-muted) !important;
}

@media (max-width: 767px) {
    /* SYNC-11 : sur téléphone, le badge ne s'affiche que quand le lien n'est pas « En ligne ». */
    .um-bureau-topbar .um-network-badge.um-network-online { display: none; }
}

/* SYNC-11 — « À examiner · n » dans la barre du haut. */
.um-chip-examiner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--um-radius-md);
    font-size: var(--um-font-size-small);
    font-weight: 600;
    background: var(--um-amber-50);
    color: var(--um-amber-700);
    text-decoration: none;
    flex-shrink: 0;
}
.um-chip-examiner:hover,
.um-chip-examiner:focus-visible { background: var(--um-amber-100); }

/* ==========================================================================
   Coquille Étudiant (Components/Layout/EtudiantLayout.razor)
   Mobile d'abord : une colonne de 430 px au plus, onglets en bas.
   ========================================================================== */

.um-etudiant-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    max-width: var(--um-etudiant-column);
    margin: 0 auto;
    background: var(--um-blue-50);
    overflow: hidden;
    font-family: var(--um-font-sans);
}

.um-etudiant-header {
    padding: 10px var(--um-space-4) var(--um-space-4);
    background: var(--um-shell);
    color: var(--um-text-on-dark);
    flex-shrink: 0;
}
.um-etudiant-header-top { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); font-size: var(--um-font-size-small); }
.um-etudiant-brand { display: flex; align-items: center; gap: var(--um-space-2); min-width: 0; }
.um-etudiant-brand-mark {
    width: 22px;
    height: 22px;
    border-radius: var(--um-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--um-primary);
    color: var(--um-surface-0);
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
}
.um-etudiant-brand-text { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-etudiant-brand-sigle { color: var(--um-text-on-dark-faint); font-weight: 500; }
.um-etudiant-header-actions { display: flex; align-items: center; gap: var(--um-space-3); flex-shrink: 0; }
.um-etudiant-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--um-radius-md);
    color: var(--um-text-on-dark-muted);
    text-decoration: none;
}
.um-etudiant-logout:hover { background: var(--um-fill-on-dark-hover); color: var(--um-text-on-dark); }

.um-etudiant-identite { display: flex; align-items: center; gap: var(--um-space-3); margin-top: var(--um-space-3); }
.um-etudiant-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--um-fill-on-dark-hover);
    border: 2px solid var(--um-border-on-dark);
    color: var(--um-text-on-dark-muted);
    flex-shrink: 0;
}
.um-etudiant-identite-texte { min-width: 0; display: grid; gap: 2px; }
.um-etudiant-nom { font-size: 16px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-etudiant-meta { font-size: var(--um-font-size-small); color: var(--um-text-on-dark-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-etudiant-meta-valeur { color: var(--um-text-on-dark); font-weight: 500; }

.um-etudiant-content { flex: 1; overflow-y: auto; background: var(--um-blue-50); }
.um-etudiant-content .um-page-pad { padding: var(--um-space-4); }

.um-etudiant-bottomnav { display: flex; background: var(--um-surface-0); border-top: 1px solid var(--um-border); flex-shrink: 0; padding-bottom: env(safe-area-inset-bottom, 0); }
.um-etudiant-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--um-space-2) 0;
    text-decoration: none;
    color: var(--um-text-tertiary);
}
.um-etudiant-tab.is-active { color: var(--um-primary); }
.um-etudiant-tab-icon { display: flex; line-height: 1; }
.um-etudiant-tab-label { font-size: var(--um-font-size-caption); font-weight: 600; white-space: nowrap; }

@media (min-width: 431px) {
    .um-etudiant-shell { border-left: 1px solid var(--um-border); border-right: 1px solid var(--um-border); }
}

/* Profil étudiant */
.um-profil-card { display: grid; gap: var(--um-space-4); }
.um-profil-entete { display: flex; align-items: center; gap: var(--um-space-3); }
.um-profil-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--um-blue-50);
    border: 1px solid var(--um-border);
    color: var(--um-text-tertiary);
    flex-shrink: 0;
}

/* ── W2-INS3 — Inscriptions › Tableau de bord, Semestre, Cours ─────────── */

/* Étapes des formulaires Semestre / Cours */
.um-parcours-etape { display: grid; gap: var(--um-space-4); }
.um-parcours-etape > h2 { display: flex; align-items: center; gap: var(--um-space-2); margin: 0; }
.um-parcours-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--um-primary-soft);
    color: var(--um-blue-700);
    font-size: var(--um-font-size-small);
    font-weight: 700;
    flex-shrink: 0;
}
.um-parcours-etudiant { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--um-space-3); }
.um-parcours-etudiant-texte { display: grid; gap: var(--um-space-1); flex: 1; min-width: 220px; }
.um-parcours-inscriptions { display: grid; gap: var(--um-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--um-font-size-small); color: var(--um-text-secondary); }
.um-form-error > .um-icon,
.um-form-success > .um-icon,
.um-info-banner > .um-icon { vertical-align: -3px; }

/* Liste à cocher des cours (groupée par UE) */
.um-cours-ue { display: grid; gap: var(--um-space-1); padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-lg); }
.um-cours-ue-entete { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--um-space-2); }
.um-cours-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2) var(--um-space-4); padding: var(--um-space-2) 0; border-top: 1px solid var(--um-border-soft); }
.um-cours-ligne.is-deja { color: var(--um-text-tertiary); }
.um-cours-case { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); flex: 1; min-width: 220px; }
.um-cours-portee { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2) var(--um-space-3); }
.um-cours-session { width: auto; min-width: 200px; }
.um-cours-recap { display: grid; gap: var(--um-space-1); margin: 0; padding-left: var(--um-space-4); font-size: var(--um-font-size-ui); }

/* Tableau de bord du module + tuile de l'accueil */
.um-tableau-tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--um-space-3); }
.um-tableau-section { display: grid; gap: var(--um-space-2); }
.um-tableau-date { white-space: nowrap; }
.um-tableau-section > h2 { margin: 0; }
.um-tableau-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--um-space-4); }
.um-tableau-comptes tfoot th,
.um-tableau-comptes tfoot td { padding: 10px 12px; border-top: 1px solid var(--um-border); background: var(--um-blue-50); font-weight: 700; text-align: left; }
.um-tableau-comptes tfoot td.um-num { text-align: right; }
.um-accueil-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--um-space-3); }
.um-tuile-module { color: var(--um-text-primary); text-decoration: none; }
.um-tuile-module:hover { border-color: var(--um-primary-hover); }
.um-tuile-module .card-kpi-label { display: inline-flex; align-items: center; gap: 6px; }
.um-tuile-lien { display: inline-flex; align-items: center; gap: 4px; font-size: var(--um-font-size-small); font-weight: 600; color: var(--um-primary); }
@media (max-width: 640px) {
    .um-tableau-grille { grid-template-columns: 1fr; }
}

/* ── W2-INS3 end ─────────────────────────────────────────────────────── */

/* ── R2-FIX1 begin — compteur des matricules, UE / EC inactifs, rapport de validation ── */
.um-compteur-matricule { display: grid; gap: var(--um-space-2); margin-top: var(--um-space-4); }
.um-compteur-matricule-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-3); flex-wrap: wrap; }
.um-compteur-matricule-entete > h2 { margin: 0; }
.um-compteur-matricule-valeurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--um-space-3); margin: 0; }
.um-compteur-matricule-valeurs dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-compteur-matricule-valeurs dd { margin: 0; font-weight: 700; }
.um-programme-inactif, .um-programme-inactif td { color: var(--um-text-tertiary); }
.um-rapport-refus { display: grid; gap: var(--um-space-1); margin: 0; padding-left: var(--um-space-4); }
/* ── R2-FIX1 end ─────────────────────────────────────────────────────── */

/* ── W3-DOC2 begin — Inscriptions › Listes (listes définitives) ──────── */
.um-listes-table td { vertical-align: top; }
.um-listes-table td.um-num { white-space: nowrap; }
.um-listes-auditoire { font-weight: 600; }
.um-listes-table .um-badge { display: inline-flex; align-items: center; gap: 4px; }
.um-listes-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--um-space-2); }
@media (max-width: 900px) {
    .um-listes-actions { justify-content: flex-start; }
}
/* ── W3-DOC2 end ─────────────────────────────────────────────────────── */

/* ── W3-DOC1 — Documents imprimables du dossier, vérification de carte ──── */

/* Bloc « Documents imprimables » du dossier étudiant */
.um-documents-imprimables { margin-top: var(--um-space-4); }
.um-documents-imprimables-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--um-space-6); }
.um-documents-imprimables-bloc { display: grid; gap: var(--um-space-3); align-content: start; }
.um-documents-imprimables-bloc .um-dossier-sous-titre { display: flex; align-items: center; gap: var(--um-space-2); margin: 0; }
.um-documents-imprimables-bloc p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-documents-imprimables-bloc p.um-info-banner { flex-wrap: nowrap; align-items: flex-start; }
.um-documents-imprimables-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-2); }
.um-documents-imprimables-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-skeleton-ligne { height: 36px; border-radius: var(--um-radius-md); }

/* Page publique « /verifier/carte/{organisation}/{jeton} » (R3-FIX1) — mobile d'abord, sans session, rendu statique */
.um-verif {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--um-space-6) var(--um-space-4);
    background: var(--um-surface-2);
    font-family: var(--um-font-sans);
    color: var(--um-text-primary);
}
.um-verif-carte {
    width: 100%;
    max-width: 420px;
    display: grid;
    gap: var(--um-space-4);
    padding: var(--um-space-5);
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-xl);
    box-shadow: var(--um-shadow-card);
}
.um-verif-eyebrow { display: flex; align-items: center; gap: var(--um-space-2); font-size: var(--um-font-size-label); color: var(--um-text-secondary); }
.um-verif-statut {
    display: flex;
    align-items: center;
    gap: var(--um-space-3);
    padding: var(--um-space-4);
    border-radius: var(--um-radius-lg);
    font-size: var(--um-font-size-h2);
    font-weight: 700;
    line-height: 1.2;
}
.um-verif-statut--valide { background: var(--um-emerald-50); color: var(--um-emerald-700); border: 1px solid var(--um-emerald-100); }
.um-verif-statut--invalide { background: var(--um-rose-50); color: var(--um-rose-700); border: 1px solid var(--um-rose-100); }
.um-verif-statut--attente { background: var(--um-blue-50); color: var(--um-text-secondary); border: 1px solid var(--um-border); }
.um-verif-note { margin: 0; color: var(--um-text-secondary); font-size: var(--um-font-size-ui); }
.um-verif-identite { display: grid; justify-items: center; gap: var(--um-space-3); text-align: center; }
.um-verif-photo { width: 132px; height: 165px; object-fit: cover; border-radius: var(--um-radius-md); border: 1px solid var(--um-border); }
.um-verif-nom { font-size: var(--um-font-size-h3); font-weight: 700; }
.um-verif-donnees { width: 100%; margin: 0; display: grid; gap: var(--um-space-2); text-align: left; }
.um-verif-donnees > div { display: grid; grid-template-columns: 130px 1fr; gap: var(--um-space-2); padding: var(--um-space-2) 0; border-bottom: 1px solid var(--um-border-soft); }
.um-verif-donnees dt { color: var(--um-text-secondary); font-size: var(--um-font-size-label); }
.um-verif-donnees dd { margin: 0; font-weight: 600; font-size: var(--um-font-size-ui); overflow-wrap: anywhere; }

/* ── W3-DOC1 end ─────────────────────────────────────────────────────── */

/* ── R3-FIX1 begin — vérification : l'établissement qui se porte garant ── */
.um-verif-etablissement { display: flex; align-items: center; gap: var(--um-space-3); padding-bottom: var(--um-space-3); border-bottom: 1px solid var(--um-border-soft); }
.um-verif-logo { width: 48px; height: 48px; object-fit: contain; flex: none; }
.um-verif-etablissement-nom { font-size: var(--um-font-size-ui); font-weight: 700; color: var(--um-blue-900); line-height: 1.25; overflow-wrap: anywhere; }
/* Lot de cartes : étudiants dont la carte active n'est plus valable (non imprimés) */
.um-cartes-lot-exclues { margin-top: var(--um-space-3); }
/* ── R3-FIX1 end ─────────────────────────────────────────────────────── */

/* ── W4-FIN1 begin — Bureau › Finances ───────────────────────────────── */
.um-finance-tuile { text-decoration: none; color: inherit; }
.um-finance-tuile:hover { border-color: var(--um-primary); }
.um-finance-taux-jour { display: grid; gap: var(--um-space-1); }
.um-finance-taux-valeur { font-size: 26px; font-weight: 700; }
.um-finance-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--um-space-3); margin-bottom: var(--um-space-4); }
.um-finance-totaux .card-kpi-value { font-size: 22px; }
.um-finance-affectations { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.um-finance-affectations li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.um-finance-affectations li.is-inactive { opacity: 0.6; }
.um-finance-auditoires { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.um-finance-identite { margin-bottom: var(--um-space-4); }
.um-ligne-inactive td { color: var(--um-text-tertiary); }
/* ── W4-FIN1 end ─────────────────────────────────────────────────────── */

/* ── W4-FIN2 begin — Bureau › Finances › Caisse ─────────────────────── */
.um-caisse-choix { max-width: 360px; margin: var(--um-space-3) 0; }
.um-caisse-fermee,
.um-caisse-banniere { display: grid; gap: var(--um-space-3); margin: var(--um-space-4) 0; }
.um-caisse-fermee h2 { display: flex; align-items: center; gap: var(--um-space-2); }
.um-caisse-banniere-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-caisse-banniere .um-finance-totaux { margin-bottom: 0; }
.um-caisse-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--um-space-3); }
.um-caisse-action { min-height: 52px; font-size: 16px; font-weight: 700; }
.um-caisse-recherche { display: grid; gap: var(--um-space-3); margin-top: var(--um-space-4); }
.um-caisse-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-2); }
.um-caisse-resultats[hidden] { display: none; } /* R-8 L-5: always rendered, hidden when empty */
.um-caisse-resultat {
    width: 100%;
    display: grid;
    gap: 2px;
    padding: var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.um-caisse-resultat:hover,
.um-caisse-resultat:focus-visible { border-color: var(--um-primary); }
.um-caisse-paiement { margin-top: var(--um-space-4); }
.um-caisse-montant { font-size: 20px; font-weight: 700; }
.um-caisse-parametres { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--um-space-4); margin-top: var(--um-space-4); }
.um-caisse-parametres-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.um-caisse-parametres-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.um-caisse-parametres-liste li.is-inactive { opacity: 0.6; }
/* ── W4-FIN2 end ─────────────────────────────────────────────────────── */

/* ── W4-FIN3 begin — Banque, bordereaux, portail « Finances », seuils ──── */
/* Portail étudiant (mobile d'abord) */
.um-portail-situation { display: grid; gap: var(--um-space-3); }
.um-portail-solde { display: grid; gap: 2px; }
.um-portail-solde-valeur { font-size: 26px; font-weight: 700; color: var(--um-blue-900); }
.um-portail-totaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--um-space-2); margin: 0; }
.um-portail-totaux dt, .um-portail-montants dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-portail-totaux dd, .um-portail-montants dd { margin: 0; font-weight: 600; }
.um-portail-sous-titre { font-size: var(--um-font-size-small); font-weight: 600; margin: var(--um-space-2) 0 0; color: var(--um-text-secondary); }
.um-portail-liste { list-style: none; margin: var(--um-space-2) 0 0; padding: 0; display: grid; gap: var(--um-space-2); }
.um-portail-ligne { display: grid; gap: 6px; padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-surface-0); }
.um-portail-ligne.is-annule { opacity: 0.65; }
.um-portail-ligne-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); font-weight: 600; }
.um-portail-ligne-detail { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--um-space-2); }
.um-portail-montants { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--um-space-2); margin: 0; }
.um-portail-montants dd { white-space: nowrap; font-size: var(--um-font-size-ui); }
.um-portail-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--um-space-3); padding-top: var(--um-space-2); border-top: 1px solid var(--um-border); }
.um-portail-explication { margin: 0; font-size: var(--um-font-size-small); color: var(--um-text-secondary); }
.um-portail-explication.is-rejet { color: var(--um-rose-700); }
.um-portail-formulaire { display: grid; gap: var(--um-space-4); }
.um-portail-formulaire .um-form { display: grid; gap: var(--um-space-3); }
.um-portail-ligne .btn, .um-portail-ligne-entete .um-badge { justify-self: start; }
/* Bureau › Banque */
.um-banque-bordereau { display: grid; gap: var(--um-space-4); margin-bottom: var(--um-space-4); }
.um-banque-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--um-space-3); margin: 0; }
.um-banque-details dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-banque-details dd { margin: 2px 0 0; }
.um-banque-resultats { list-style: none; margin: var(--um-space-2) 0 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.um-statut-financier { white-space: nowrap; }
/* ── W4-FIN3 end ─────────────────────────────────────────────────────── */

/* ── R4-FIX2 begin — montants saisis, brouillons, report de caisse, bordereaux signalés ── */
.um-montant-saisie { min-width: 0; }
.um-montant-lu { display: inline-flex; align-items: center; gap: 4px; min-height: 18px; }
.um-brouillon-repris { align-items: flex-start; }
.um-caisse-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--um-space-3); margin: 0; }
.um-caisse-report dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-caisse-report dd { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 700; color: var(--um-blue-900); }
.um-banque-alerte { display: grid; gap: 6px; }
.um-banque-alerte strong { display: inline-flex; align-items: center; gap: 6px; }
.um-banque-alerte ul, .um-banque-historique ul { margin: 0; padding-left: var(--um-space-4); display: grid; gap: 4px; }
.um-banque-historique { align-items: flex-start; }
/* ── R4-FIX2 end ─────────────────────────────────────────────────────── */

/* ── W4-FIX2 begin — légende des montants CDF (L-4) ─────────────────── */
.um-finance-legende-cdf { display: block; font-style: italic; color: var(--um-text-tertiary); white-space: normal; }
.um-finance-affectations li .um-finance-legende-cdf { flex-basis: 100%; }
/* ── W4-FIX2 end ─────────────────────────────────────────────────────── */

/* ── W5-RPT1 begin — Finances › Rapports (hub) ───────────────────────── */
.um-rapports-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--um-space-4); }
.um-rapport-carte { display: grid; align-content: start; gap: var(--um-space-3); }
.um-rapport-carte-entete { display: flex; align-items: flex-start; gap: var(--um-space-2); color: var(--um-text-primary); }
.um-rapport-carte-titre { margin: 0 0 2px; font-size: var(--um-font-size-ui); font-weight: 700; }
.um-rapport-carte-entete p { margin: 0; }
.um-rapport-formulaire { display: grid; gap: var(--um-space-3); align-items: end; }
.um-rapport-formulaire .btn { justify-self: start; }
.um-rapport-case { display: inline-flex; align-items: center; gap: 6px; font-size: var(--um-font-size-small); color: var(--um-text-secondary); }
.um-rapport-resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.um-rapport-resultats li { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); padding: 6px 0; border-bottom: 1px solid var(--um-border); }
/* ── W5-RPT1 end ─────────────────────────────────────────────────────── */

/* ── W6-COT1 begin — attribution des cours, grille d'encodage, historique des cotes ── */
.um-encodage-entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-encodage-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--um-space-3); margin: 0 0 var(--um-space-3); }
.um-encodage-infos dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-encodage-infos dd { margin: 2px 0 0; font-weight: 600; }
.um-encodage-tampons { display: flex; flex-wrap: wrap; gap: var(--um-space-3); }
.um-encodage-statut { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 var(--um-space-2); padding: 4px 10px; border-radius: var(--um-radius-pill); font-size: var(--um-font-size-small); font-weight: 600; border: 1px solid var(--um-border); }
.um-encodage-statut.is-ok { background: var(--um-emerald-50); color: var(--um-emerald-700); border-color: var(--um-emerald-100); }
.um-encodage-statut.is-attente { background: var(--um-amber-50); color: var(--um-amber-700); border-color: var(--um-amber-100); }
.um-encodage-statut.is-hors-connexion { background: var(--um-rose-50); color: var(--um-rose-700); border-color: var(--um-rose-100); }
.um-encodage-actions { display: flex; flex-wrap: wrap; gap: var(--um-space-2); margin-bottom: var(--um-space-3); }
.um-encodage-table { font-size: var(--um-font-size-ui); }
.um-encodage-table thead th { white-space: nowrap; }
.um-encodage-table tbody td { padding-top: 3px; padding-bottom: 3px; }
.um-encodage-maxima th { font-size: var(--um-font-size-caption); color: var(--um-text-secondary); background: var(--um-surface-1); }
.um-encodage-calcule { background: var(--um-surface-1); font-weight: 600; min-width: 52px; }
.um-encodage-nom { min-width: 200px; }
.um-encodage-case { padding: 2px 4px; }
.um-encodage-input { width: 58px; padding: 4px 6px; text-align: right; font-family: var(--um-font-mono); font-size: var(--um-font-size-ui); border: 1px solid var(--um-border); border-radius: var(--um-radius-sm); background: var(--um-surface-0); color: var(--um-text-primary); }
.um-encodage-input:focus { outline: 2px solid var(--um-primary-hover); outline-offset: 0; border-color: var(--um-primary); }
.um-encodage-input[readonly] { background: var(--um-surface-1); color: var(--um-text-secondary); }
.um-encodage-input.is-invalid { border-color: var(--um-rose-600); background: var(--um-rose-50); }
.um-encodage-ligne.is-modifiee td, .um-encodage-ligne.is-enenvoi td { background: var(--um-amber-50); }
.um-encodage-ligne.is-conflit td, .um-encodage-ligne.is-refusee td { background: var(--um-rose-50); }
.um-encodage-etat { color: var(--um-text-secondary); white-space: nowrap; }
.um-encodage-ligne.is-enregistree .um-encodage-etat { color: var(--um-emerald-700); }
.um-encodage-erreur td, .um-encodage-conflit td { color: var(--um-rose-700); background: var(--um-rose-50); font-size: var(--um-font-size-small); }
.um-encodage-conflit .btn { margin-left: var(--um-space-2); }
.um-encodage-historique { margin-top: var(--um-space-6); display: grid; gap: var(--um-space-3); }
.um-historique-cotes { display: grid; gap: var(--um-space-3); }
.um-historique-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); }
.um-historique-filtres .um-field { min-width: 160px; }
.um-historique-pages { display: flex; align-items: center; justify-content: flex-end; gap: var(--um-space-2); }
.um-lien-bouton { background: none; border: 0; padding: 0; color: var(--um-primary); cursor: pointer; font: inherit; text-align: left; }
.um-lien-bouton:hover { text-decoration: underline; }
.um-mes-cours-auditoire { max-width: 520px; margin-bottom: var(--um-space-3); }
.um-mes-cours-progres { width: 120px; height: 6px; accent-color: var(--um-primary); }
.um-academique-carte { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-3); margin-bottom: var(--um-space-4); }
.um-attributions-table tr.is-inactif td { color: var(--um-text-tertiary); }
.um-attributions-choix { min-width: 200px; padding: 4px 8px; }
.um-attributions-assistants { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.um-attributions-retirer { display: inline-flex; background: none; border: 0; padding: 0 0 0 4px; color: inherit; cursor: pointer; }
/* ── W6-COT1 end ─────────────────────────────────────────────────────── */

/* ── ACA-2 begin — répartition des heures (attributions), charge horaire ── */
.um-attributions-repartition { display: grid; gap: 4px; min-width: 190px; }
.um-attributions-part { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); margin: 0; }
.um-attributions-part-saisie { display: inline-flex; align-items: center; gap: 4px; }
.um-attributions-heures { width: 72px; padding: 2px 6px; text-align: right; }
.um-attributions-avertissement { display: flex; align-items: flex-start; gap: 4px; color: var(--um-amber-700); font-size: var(--um-font-size-caption); }
.um-charge-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); }
.um-charge-filtres .um-field { margin: 0; min-width: 170px; }
.um-charge-case { display: inline-flex; align-items: center; gap: 6px; }
.um-charge-table tr.is-detail td { background: var(--um-surface-1); font-size: var(--um-font-size-caption); }
.um-charge-table tr.is-total td, .um-charge-table tr.is-total th { font-weight: 700; }
.um-charge-deplier { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.um-charge-noncouverts { margin-top: var(--um-space-4); }
/* ── ACA-2 end ─────────────────────────────────────────────────────────── */

/* ── ACA-11 begin — CM / TD / TP, activités hors cours, import des charges ── */
.um-attributions-part { flex-wrap: wrap; }
.um-attributions-cmtdtp { display: inline-flex; gap: 6px; width: 100%; justify-content: flex-end; }
.um-attributions-cmtdtp-champ { display: inline-flex; align-items: center; gap: 2px; }
.um-attributions-heures-partie { width: 52px; padding: 2px 4px; text-align: right; }
/* ACA-12 — shared courses (« enseigné ensemble »). */
.um-attributions-mutualise { display: inline-flex; align-items: center; gap: 4px; color: var(--um-text-secondary); font-size: var(--um-font-size-caption); }
.um-charge-mutualise { margin-left: 6px; }
.um-charge-table tr.is-activites td { background: var(--um-surface-1); }
.um-charge-activites { display: grid; gap: var(--um-space-2); padding: var(--um-space-2) 0; }
.um-charge-activites ul { margin: 0; padding-left: var(--um-space-4); }
.um-charge-activites li { display: flex; align-items: center; gap: var(--um-space-2); }
.um-charge-activite-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-2); }
.um-charge-activite-form .um-field { margin: 0; }
.um-charge-activite-form .um-input { padding: 4px 8px; }
.um-charge-activite-heures { width: 80px; }
.um-import-bilan { margin: 0; padding-left: var(--um-space-4); color: var(--um-text-secondary); }
/* ── ACA-11 end ────────────────────────────────────────────────────────── */

/* ── W6-COT2 begin — Cotes : accueil, suivi de l'encodage, import ────── */
.um-cotes-compteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--um-space-3); }
.um-cotes-compteur { display: flex; align-items: flex-start; gap: var(--um-space-2); color: var(--um-text-primary); }
.um-cotes-compteur-titre { font-weight: 700; font-size: var(--um-font-size-ui); }
.um-cotes-resume { margin: 0; color: var(--um-text-secondary); }
.um-cotes-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); }
.um-cotes-filtres .um-field { min-width: 180px; }
.um-cotes-vues { display: inline-flex; gap: var(--um-space-1); margin-left: auto; }
.um-cotes-auditoire { margin-top: var(--um-space-4); }
.um-cotes-auditoire-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); flex-wrap: wrap; }
.um-cotes-auditoire-entete h2 { margin: 0; }
.um-cotes-semestre { margin: var(--um-space-2) 0 0; font-size: var(--um-font-size-ui); font-weight: 700; color: var(--um-text-secondary); }
.um-cotes-ec { font-weight: 600; }
.um-cotes-progression { width: 120px; height: 6px; border-radius: var(--um-radius-pill); background: var(--um-surface-2); overflow: hidden; }
.um-cotes-progression span { display: block; height: 100%; background: var(--um-blue-500); }
.um-cotes-import { display: grid; gap: var(--um-space-3); }
.um-cotes-import-actions { display: flex; flex-wrap: wrap; gap: var(--um-space-2); }
/* ── W6-COT2 end ─────────────────────────────────────────────────────── */

/* ── W6-FIX1 begin — Académique : registre des enseignants ; accueil Cotes ── */
.um-enseignants-table tr.is-inactif td { color: var(--um-text-tertiary); }
.um-enseignants-table td { vertical-align: top; }
.um-academique-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--um-space-3); margin-bottom: var(--um-space-4); }
.um-academique-cartes .um-academique-carte { margin-bottom: 0; }
.um-cotes-ec-lien { font-weight: 600; color: var(--um-primary); text-decoration: none; }
.um-cotes-ec-lien:hover { text-decoration: underline; }
/* ── W6-FIX1 end ─────────────────────────────────────────────────────── */

/* ── W7-PUB1 begin — portail « Résultats » (bulletin sur téléphone), Publications, Règles de délibération ── */
.um-resultat-carte { display: grid; gap: var(--um-space-2); }
.um-resultat-titre { margin: 0; }
.um-resultat-retour { justify-self: start; }
.um-resultat-vide { display: grid; justify-items: center; gap: var(--um-space-2); text-align: center; color: var(--um-text-secondary); }
.um-resultat-vide h2 { margin: 0; color: var(--um-text-primary); }
.um-resultat-resume { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--um-space-2); margin: var(--um-space-1) 0 0; }
.um-resultat-resume dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-resultat-resume dd { margin: 0; font-weight: 700; font-size: var(--um-font-size-ui); }
.um-resultat-masque { display: flex; align-items: flex-start; gap: var(--um-space-2); padding: var(--um-space-3); border-radius: var(--um-radius-md); background: var(--um-amber-50); border: 1px solid var(--um-amber-100); color: var(--um-amber-700); }
.um-resultat-masque p { margin: 0; font-size: var(--um-font-size-ui); }
.um-resultat-masque .um-icon { flex-shrink: 0; margin-top: 1px; }
.um-bulletin { display: grid; gap: var(--um-space-3); }
.um-bulletin-entete h1 { margin: 2px 0 0; letter-spacing: 0.02em; }
.um-bulletin-sous-titre { font-weight: 600; color: var(--um-text-secondary); font-size: var(--um-font-size-ui); }
/* W7-FIX1: the phone view reads THE bulletin lines (row modifiers `um-bulletin-ligne--<genre>`, shared with the
   printed sheet); its rules are scoped under the card (`.um-bulletin`) / `.um-bulletin-ecran-table` so they never
   reach the printed sheet (uniman-print.css, W7-FIX1 block). */
.um-bulletin .um-bulletin-identite { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--um-space-2); margin: 0; }
.um-bulletin .um-bulletin-identite > div:nth-child(2) { grid-column: 1 / -1; }
.um-bulletin .um-bulletin-identite dt { font-size: var(--um-font-size-caption); color: var(--um-text-tertiary); }
.um-bulletin .um-bulletin-identite dd { margin: 0; font-weight: 600; }
.um-bulletin-ecran-table { width: 100%; border-collapse: collapse; font-size: var(--um-font-size-ui); }
.um-bulletin-ecran-table th { font-size: var(--um-font-size-caption); font-weight: 600; color: var(--um-text-tertiary); text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--um-border); }
.um-bulletin-ecran-table td { padding: 6px 4px; border-bottom: 1px solid var(--um-border-soft); vertical-align: top; }
.um-bulletin-ecran-table .um-bulletin-matiere { overflow-wrap: anywhere; }
.um-bulletin-ecran-table .um-bulletin-nombre { text-align: right; white-space: nowrap; }
.um-bulletin-ecran-table .um-bulletin-val { text-align: center; white-space: nowrap; width: 3.5em; }
.um-bulletin-ecran-table tr.um-bulletin-ligne--ue td { font-weight: 700; background: var(--um-surface-1); }
.um-bulletin-ecran-table tr.um-bulletin-ligne--ec .um-bulletin-matiere { padding-left: var(--um-space-4); color: var(--um-text-secondary); }
.um-bulletin-ecran-table tr.um-bulletin-ligne--decisionue td { font-size: var(--um-font-size-small); color: var(--um-text-secondary); }
.um-bulletin-ecran-table tr.um-bulletin-ligne--total td,
.um-bulletin-ecran-table tr.um-bulletin-ligne--pourcentage td,
.um-bulletin-ecran-table tr.um-bulletin-ligne--credits td,
.um-bulletin-ecran-table tr.um-bulletin-ligne--decision td { font-weight: 700; }
.um-bulletin-ecran-table tr.um-bulletin-ligne--decisionue + tr.um-bulletin-ligne--total td { border-top: 2px solid var(--um-border); }
.um-bulletin .um-bulletin-observation { margin: 0; font-weight: 600; }
.um-publications-table td { vertical-align: top; }
.um-publications-note { margin: var(--um-space-2) 0 0; }
.um-publications-consequences { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: var(--um-font-size-ui); }
.um-regles-d7 { margin-bottom: var(--um-space-3); }
.um-regles-carte { display: grid; gap: var(--um-space-3); margin-top: var(--um-space-3); }
.um-regles-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--um-space-3); flex-wrap: wrap; }
.um-regles-entete h2 { margin: 2px 0; display: flex; align-items: center; gap: var(--um-space-2); flex-wrap: wrap; }
.um-regles-actions { display: flex; gap: var(--um-space-2); flex-wrap: wrap; }
.um-regles-empreinte { display: inline-flex; align-items: center; gap: 4px; }
.um-regles-lignes { display: grid; grid-template-columns: minmax(200px, max-content) 1fr; gap: 6px var(--um-space-4); margin: 0; font-size: var(--um-font-size-ui); }
.um-regles-lignes > div { display: contents; }
.um-regles-lignes dt { color: var(--um-text-secondary); font-weight: 500; }
.um-regles-lignes dd { margin: 0; color: var(--um-text-primary); }
.um-regles-comparaison { display: grid; gap: var(--um-space-2); border-top: 1px solid var(--um-border); padding-top: var(--um-space-3); }
.um-regles-comparaison .um-field { max-width: 320px; }
.um-regles-ecarts td:first-child { color: var(--um-text-secondary); }
.um-regles-source { display: block; grid-column: 1 / -1; margin: -8px 0 0 24px; }
.um-regles-groupe > .um-field:not(.um-regles-champ) { grid-column: 1 / -1; }
.um-regles-section { margin: var(--um-space-5) 0 0; }
.um-regles-archive { margin-top: var(--um-space-2); display: grid; gap: var(--um-space-3); }
.um-regles-archive summary { cursor: pointer; display: flex; align-items: center; gap: var(--um-space-2); flex-wrap: wrap; }
.um-regles-groupe { margin: 0; padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-md); display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--um-space-3); }
.um-regles-groupe legend { padding: 0 4px; font-weight: 600; font-size: var(--um-font-size-ui); }
.um-regles-groupe .um-case { grid-column: 1 / -1; }
@media (max-width: 640px) {
    .um-regles-lignes { grid-template-columns: 1fr; }
    .um-regles-lignes dd { margin-bottom: var(--um-space-2); }
}
/* ── W7-PUB1 end ─────────────────────────────────────────────────────── */

/* ── W7-DEL1 begin — Délibérations : accueil, jury, grille à l'écran ──── */
.um-delib-auditoire { margin-top: var(--um-space-4); display: grid; gap: var(--um-space-3); }
.um-delib-auditoire-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); flex-wrap: wrap; }
.um-delib-auditoire-entete h2 { margin: 0; }
.um-delib-jury { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--um-space-2); margin: 0; }
.um-delib-jury dt { font-size: var(--um-font-size-caption); color: var(--um-text-secondary); }
.um-delib-jury dd { margin: 0; font-weight: 600; color: var(--um-text-primary); }
.um-delib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-delib-sessions td { vertical-align: middle; }
.um-delib-jury-form { display: grid; gap: var(--um-space-3); max-width: 720px; }
.um-delib-membres { border: 1px solid var(--um-border); border-radius: var(--um-radius-md); padding: var(--um-space-3); }
.um-delib-membre { display: flex; align-items: center; gap: var(--um-space-2); padding: 2px 0; }
.um-delib-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--um-space-3); margin-bottom: var(--um-space-3); }
.um-delib-barre > .um-delib-actions { margin-left: auto; }
.um-delib-choix { display: inline-flex; gap: var(--um-space-1); }
.um-delib-version { min-width: 260px; }
.um-delib-blocages { border-color: var(--um-amber-200); background: var(--um-amber-50); margin-bottom: var(--um-space-3); }
.um-delib-blocages h2 { display: flex; align-items: center; gap: var(--um-space-2); margin: 0 0 var(--um-space-2); }
.um-delib-blocages ul { margin: 0; padding-left: 20px; }
.um-delib-decisions { margin-top: var(--um-space-4); }
.um-grille-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--um-space-2); }
.um-grille-page .um-h2 { margin: 4px 0; }
.um-grille-defilement { overflow-x: auto; border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-surface-0); }
.um-grille-synthese-ecran { margin: var(--um-space-2) 0 0; color: var(--um-text-secondary); }

/* The grille table (screen and print share the structure; the print sizes are in uniman-print.css). */
.um-grille { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.um-grille th,
.um-grille td { border: 1px solid var(--um-border); padding: 3px 4px; text-align: center; vertical-align: middle; }
.um-grille thead th { font-weight: 700; }
.um-grille-libelles th { height: 150px; vertical-align: bottom; }
.um-grille-libelles th > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 146px; white-space: normal; text-align: left; line-height: 1.15; }
.um-grille-libelles th.um-grille-obs { vertical-align: middle; }
.um-grille thead .um-grille-vertical > span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.um-grille .um-grille-parametre { text-align: left; font-weight: 600; white-space: nowrap; }
.um-grille .um-grille-nom { text-align: left; white-space: nowrap; }
.um-grille thead .um-grille-nom { white-space: normal; max-width: 220px; font-size: 11px; }
.um-grille .um-grille-matricule { white-space: nowrap; }
.um-grille .um-grille-total { font-weight: 700; }
.um-grille .um-grille-obs { text-align: left; min-width: 220px; }
.um-grille--ecran { font-size: 12px; }
.um-grille--ecran tbody tr:hover td { background: var(--um-blue-50); }
.um-grille--ecran .um-grille-decision.is-nv { color: var(--um-rose-700); }
.um-grille .is-jury,
.um-grille--ecran tbody tr:hover td.is-jury { background: var(--um-amber-50); box-shadow: inset 0 0 0 2px var(--um-amber-500); }
.um-grille-bouton { all: unset; cursor: pointer; display: block; width: 100%; font-weight: 700; }
.um-grille-bouton--texte { font-weight: 400; }
.um-grille-bouton:focus-visible { outline: 2px solid var(--um-blue-500); outline-offset: 2px; }
/* ── W7-DEL1 end ─────────────────────────────────────────────────────── */

/* ── W7-FIX1 begin — import « cellules vides = 0 », décisions reprises / révoquées ── */
.um-cotes-import-option { display: grid; gap: var(--um-space-2); }
.um-cotes-import-avertissement { margin: 0; }
.um-delib-reprise { margin-left: var(--um-space-1); vertical-align: middle; }
/* ── W7-FIX1 end ─────────────────────────────────────────────────────── */

/* ── R7-FIX1 begin — barème verrouillé (règles de délibération) ────────── */
.um-regles-verrou { display: flex; align-items: flex-start; gap: var(--um-space-1); margin: 0 0 var(--um-space-2); }
.um-regles-champ .um-input[readonly] { background: var(--um-surface-1); color: var(--um-text-secondary); cursor: not-allowed; }
/* ── R7-FIX1 end ─────────────────────────────────────────────────────── */

/* ==========================================================================
   UI-1 — famille « Poste de travail » (Components/PosteDeTravail/*,
   BureauLayout Mode="PosteDeTravail") : pleine largeur, barre latérale
   repliée, seule la zone de travail défile ; grilles denses `um-grille-poste`.
   ========================================================================== */

.um-bureau-main--pleine-largeur {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: var(--um-space-2) var(--um-space-3);
}

.um-poste { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--um-space-2); }

.um-poste-entete {
    display: flex;
    align-items: center;
    gap: var(--um-space-3);
    min-height: 40px;
    max-height: 56px;
    flex-shrink: 0;
}
.um-poste-entete-contenu { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--um-space-3); }
.um-poste-eyebrow { font-size: var(--um-font-size-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--um-primary); white-space: nowrap; }
.um-poste-titre { margin: 0; font-size: var(--um-font-size-h3); font-weight: 600; color: var(--um-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-poste-actions { margin-left: auto; display: flex; align-items: center; gap: var(--um-space-2); flex-shrink: 0; }
.um-poste-statut { flex-shrink: 0; }

.um-poste-onglets { flex-shrink: 0; } /* UI-FIX1 — module tabs stay at the top, outside the scrolling work area. */
.um-poste-onglets .um-onglets { margin-bottom: 0; }
.um-poste-resume { display: flex; flex-wrap: wrap; gap: var(--um-space-2); flex-shrink: 0; }
.um-chip-resume {
    display: inline-flex;
    align-items: baseline;
    gap: var(--um-space-2);
    padding: 3px 10px;
    border-radius: var(--um-radius-pill);
    border: 1px solid var(--um-border);
    background: var(--um-surface-0);
    font-size: var(--um-font-size-label);
}
.um-chip-resume-libelle { color: var(--um-text-secondary); }
.um-chip-resume-valeur { font-weight: 700; color: var(--um-text-primary); }
.um-chip-resume.is-succes { background: var(--um-emerald-50); border-color: var(--um-emerald-100); }
.um-chip-resume.is-succes .um-chip-resume-valeur { color: var(--um-emerald-700); }
.um-chip-resume.is-avertissement { background: var(--um-amber-50); border-color: var(--um-amber-100); }
.um-chip-resume.is-avertissement .um-chip-resume-valeur { color: var(--um-amber-700); }
.um-chip-resume.is-danger { background: var(--um-rose-50); border-color: var(--um-rose-100); }
.um-chip-resume.is-danger .um-chip-resume-valeur { color: var(--um-rose-700); }
.um-chip-resume.is-info { background: var(--um-sky-50); border-color: var(--um-sky-100); }
.um-chip-resume.is-info .um-chip-resume-valeur { color: var(--um-sky-700); }

.um-poste-zone {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background: var(--um-surface-0);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
}
.um-poste-zone:focus { outline: none; }
.um-poste-zone:focus-visible { outline: 2px solid var(--um-focus-ring); outline-offset: -2px; } /* R-8 L-4 */

/* État d'enregistrement : icône + texte, jamais la couleur seule */
.um-etat-sauvegarde {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--um-radius-pill);
    font-size: var(--um-font-size-label);
    font-weight: 600;
    white-space: nowrap;
}
.um-etat-sauvegarde.is-enregistre { background: var(--um-emerald-50); color: var(--um-emerald-700); }
.um-etat-sauvegarde.is-en-cours { background: var(--um-sky-50); color: var(--um-sky-700); }
.um-etat-sauvegarde.is-brouillon { background: var(--um-amber-50); color: var(--um-amber-700); }
.um-etat-sauvegarde.is-erreur { background: var(--um-rose-50); color: var(--um-rose-700); }
.um-etat-sauvegarde-reessayer {
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

/* Grille dense : en-têtes collants (1 ou 2 lignes), premières colonnes fixes
   (`um-col-fixe` + `--um-col-fixe-left` par colonne), lignes de 32 px. */
.um-grille-poste {
    --um-grille-ligne: 32px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--um-font-size-label);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    background: var(--um-surface-0);
    min-width: 100%;
}
.um-grille-poste th,
.um-grille-poste td {
    height: var(--um-grille-ligne);
    padding: 0 var(--um-space-2);
    border-right: 1px solid var(--um-border-soft);
    border-bottom: 1px solid var(--um-border-soft);
    white-space: nowrap;
    text-align: left;
    background: var(--um-surface-0);
}
.um-grille-poste thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--um-surface-2);
    color: var(--um-text-secondary);
    font-size: var(--um-font-size-caption);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--um-border);
}
/* Deuxième ligne d'en-tête : collée sous la première */
.um-grille-poste thead tr + tr th { top: var(--um-grille-ligne); }
.um-grille-poste tbody tr:nth-child(even) td { background: var(--um-surface-1); }
.um-grille-poste tbody tr:focus-within td { background: var(--um-primary-soft); }
.um-grille-poste .um-col-fixe {
    position: sticky;
    left: var(--um-col-fixe-left, 0);
    z-index: 1;
}
.um-grille-poste thead .um-col-fixe { z-index: 3; }
.um-grille-poste .um-col-fixe-derniere { border-right: 2px solid var(--um-border); }
.um-grille-poste .is-nombre { text-align: right; }
.um-grille-poste td.is-vide { color: var(--um-text-tertiary); }
/* UI-FIX1 — grille without a table: the blocking points fill the work area. */
.um-grille-vide { display: grid; justify-items: center; gap: var(--um-space-3); max-width: 640px; margin: var(--um-space-6) auto; padding: var(--um-space-5); text-align: center; color: var(--um-text-secondary); }
.um-grille-vide h2 { margin: 0; font-size: var(--um-font-size-h3); color: var(--um-text-primary); }
.um-grille-vide .um-icon { color: var(--um-amber-700); }
.um-grille-vide ul { margin: 0; padding-left: var(--um-space-5); text-align: left; justify-self: stretch; }
.um-grille-poste td.is-tiret { color: var(--um-text-tertiary); text-align: center; }
.um-grille-poste tbody tr td.is-invalide { background: var(--um-rose-50); color: var(--um-rose-700); box-shadow: inset 0 0 0 1px var(--um-rose-600); }
.um-grille-poste tbody tr td.is-modifie { background: var(--um-blue-100); }
.um-grille-poste td:focus-within,
.um-grille-poste td:focus-visible { outline: 2px solid var(--um-focus-ring); outline-offset: -2px; }
.um-grille-poste td input {
    width: 100%;
    height: calc(var(--um-grille-ligne) - 6px);
    border: 1px solid transparent;
    border-radius: var(--um-radius-sm);
    background: transparent;
    text-align: inherit;
    font-variant-numeric: tabular-nums;
}
.um-grille-poste td input:focus { outline: none; border-color: var(--um-focus-ring); background: var(--um-surface-0); }

@media (min-width: 1024px) {
    .um-bureau-main--pleine-largeur { padding: var(--um-space-3) var(--um-space-4); }
}

/* ── W8-DOC1 begin — documents académiques (register): the student picker ── */
.um-docs-choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--um-space-1); }
/* ── W8-DOC1 end ── */

/* ── DOC-REQ begin — demandes de documents (office queue): the reason a paid request is blocked ── */
.um-demande-blocage { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--um-amber-700); }
/* ── DOC-REQ end ── */

/* ── SYNC-8 : détention (« site détenteur ») ─────────────────────────── */

.um-detention {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--um-space-3);
    margin: 0 0 var(--um-space-4);
}

.um-detention-note {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--um-space-3);
    margin: 0 0 var(--um-space-4);
    padding: var(--um-space-3) var(--um-space-4);
    border-radius: var(--um-radius-md);
    background-color: var(--um-amber-50);
    border: 1px solid var(--um-amber-100);
    color: var(--um-amber-700);
}

.um-zone-lecture-seule {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Un lien d'action (« Encaisser »…) n'est pas un bouton : le fieldset désactivé ne le couvre pas. */
.um-zone-lecture-seule a {
    pointer-events: none;
    opacity: 0.55;
}

/* ── SYNC-11 begin — pages « Synchronisation » et « À examiner » ─────────── */
.um-synchro-liens { display: flex; flex-wrap: wrap; gap: var(--um-space-2); margin-bottom: var(--um-space-3); }
.um-synchro-alerte {
    display: flex;
    align-items: flex-start;
    gap: var(--um-space-2);
    margin-bottom: var(--um-space-3);
    padding: var(--um-space-3) var(--um-space-4);
    border-radius: var(--um-radius-md);
    font-size: var(--um-font-size-ui);
}
.um-synchro-alerte.is-avertissement { background: var(--um-amber-50); border: 1px solid var(--um-amber-100); color: var(--um-amber-700); }
.um-synchro-alerte.is-danger { background: var(--um-rose-50); border: 1px solid var(--um-rose-100); color: var(--um-rose-700); }
.um-synchro-alerte > .um-icon { flex-shrink: 0; margin-top: 2px; }
.um-synchro-valeur { font-size: 20px; }
[data-synchro="etat"] { margin-bottom: var(--um-space-4); }

.um-vide { display: grid; justify-items: center; gap: var(--um-space-2); padding: var(--um-space-6) var(--um-space-4); color: var(--um-text-secondary); text-align: center; }
.um-vide > .um-icon { color: var(--um-emerald-600); }
.um-examen { display: grid; gap: var(--um-space-3); margin-top: var(--um-space-3); }
.um-examen-entete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--um-space-2); }
.um-examen-entete h2 { margin: 0; }
.um-examen-table caption { caption-side: top; text-align: left; font-weight: 600; padding: var(--um-space-1) 0; color: var(--um-text-primary); }
.um-examen-table th[scope="row"] { font-weight: 500; color: var(--um-text-secondary); white-space: nowrap; }
.um-examen-table tr.is-different td { background: var(--um-gold-50); color: var(--um-gold-800); font-weight: 600; }
.um-examen-argent {
    display: flex;
    align-items: flex-start;
    gap: var(--um-space-2);
    margin: 0;
    padding: var(--um-space-2) var(--um-space-3);
    border-radius: var(--um-radius-md);
    background: var(--um-sky-50);
    color: var(--um-sky-700);
    font-size: var(--um-font-size-ui);
}
.um-examen-argent > .um-icon { flex-shrink: 0; margin-top: 2px; }
@media (max-width: 640px) {
    .um-examen-table th[scope="row"] { white-space: normal; }
}
/* ── SYNC-11 end ─────────────────────────────────────────────────────── */

/* INPUT-FIX2 — prerendered page, circuit not yet live (`Routes.razor`): the page is inert and says so. */
.um-routes { display: contents; }
.um-routes.is-en-attente > * { opacity: 0.6; cursor: progress; }
.um-connexion-en-cours {
    position: fixed;
    top: var(--um-space-3);
    left: 50%;
    transform: translateX(-50%);
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: var(--um-space-2);
    padding: var(--um-space-2) var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
    color: var(--um-text-primary);
    box-shadow: var(--um-shadow-popover);
    font-size: var(--um-font-size-small);
}

/* ACA-6 — documents pédagogiques (matrix). */
.um-docped-compteurs { display: flex; flex-wrap: wrap; gap: var(--um-space-2); margin-bottom: var(--um-space-3); }
.um-docped-compteurs .um-badge, .um-docped-cellule .um-badge { display: inline-flex; align-items: center; gap: 4px; }
.um-docped-matrice td { vertical-align: top; }
.um-docped-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.um-docped-liste { margin-top: var(--um-space-4); }
.um-docped-apercu { width: 100%; min-height: 60vh; border: 1px solid var(--um-border); }

/* ── BUD-2 — demandes de dépense ── */
.um-demande-numero { white-space: nowrap; }

/* CAND-1 — Inscriptions › Candidatures en ligne: status counters (filter buttons) and the history. */
.um-candidatures-compteur { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--um-border); border-radius: var(--um-radius-pill); background: var(--um-surface-0); cursor: pointer; font: inherit; }
.um-candidatures-compteur.is-active { border-color: var(--um-primary); box-shadow: 0 0 0 2px var(--um-primary-soft); }
.um-candidature-historique { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.um-candidature-historique li { display: grid; gap: 2px; padding: 8px 12px; border-left: 3px solid var(--um-blue-200); }
.um-candidature-message { white-space: pre-line; }

/* REINS-1 — Réinscription par auditoire: the choice and target columns stay readable. */
.um-reins-choix { min-width: 9.5rem; }
.um-reins-cible { min-width: 16rem; }