/* =========================================================================
   Ar-mada ERP — feuille de styles globale
   Charte extranet : blanc/crème · trame discrète · boutons à contour doré
   Polices : Assistant (texte et titres) · Boogaloo (marque)
   ========================================================================= */

:root {
    /* Couleurs de la charte */
    --color-primary: #9C713F;
    --color-primary-dark: rgb(156, 113, 63);
    --color-primary-soft: rgb(250, 250, 250);
    --color-button-border: rgb(233, 193, 129);
    --color-action: #79552b;
    --color-action-hover: #624321;
    --color-on-action: #ffffff;
    --color-input: rgb(247, 239, 226);
    --coltrame01: rgb(246, 243, 240);
    --coltrame02: rgb(241, 238, 237);
    --color-background: rgb(255, 255, 255);
    --color-page: rgb(255, 255, 255);
    --color-surface: #ffffff;
    --color-surface-alt: rgb(250, 250, 250);
    --color-doc-bg: #ffffff;
    --color-ink: #202020;
    --color-ink-soft: #484848;
    --color-muted: #6b6b6b;
    --color-border: #e8e6e3;
    --color-row-hover: #f3f3f3;
    --color-badge-soft-bg: #f3f3f3;
    --color-info: #426788;
    --color-violet: #73508f;
    --color-teal: #276d70;
    --color-rose: #944e6b;

    /* États */
    --color-success: #2b7549;
    --color-success-bg: #e8f5ec;
    --color-success-border: #a9d8bb;
    --color-danger: #a4342a;
    --color-danger-strong: #8a2c23;
    --color-danger-bg: #fdecea;
    --color-danger-border: #f0b7b0;
    --color-warn-ink: #8a5a10;
    --color-warn-bg: #fdf3e0;

    /* Surfaces colorées */
    --color-on-primary: #ffffff;
    --color-on-danger: #ffffff;
    --color-sidebar-from: #ffffff;
    --color-sidebar-to: #ffffff;
    --color-sidebar-active-bg: #ffffff;
    --color-sidebar-active-ink: #202020;
    --color-overlay: rgba(20, 14, 6, .5);
    --color-overlay-soft: rgba(20, 14, 6, .45);
    --color-focus-ring: rgba(156, 113, 63, .25);
    --color-error-ui-bg: #fff8dc;
    --color-page-gradient: rgba(233, 193, 129, 0);

    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 10px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);

    --font-body: 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-heading: var(--font-body);
    --font-brand: 'Boogaloo', 'Trebuchet MS', cursive;

    --sidebar-width: 264px;
    --sidebar-rail-width: 78px;
    --header-height: 64px;
}

/* -------------------------------------------------------------------------
   Mode sombre — mêmes rôles, valeurs adaptées.
   Posé sur <html data-theme="dark"> par wwwroot/app.js (préférence locale).
   ------------------------------------------------------------------------- */
[data-theme="dark"] {
    color-scheme: dark;

    --color-primary: #c99a5d;
    --color-primary-dark: #e0b47a;
    --color-primary-soft: #292929;
    --color-button-border: #9c7947;
    --color-action: #d9ae74;
    --color-action-hover: #ebc38f;
    --color-on-action: #21180f;
    --color-input: #30302d;
    --coltrame01: #242424;
    --coltrame02: #202020;
    --color-background: #1b1b1b;
    --color-page: #1b1b1b;
    --color-surface: #222222;
    --color-surface-alt: #292929;
    --color-doc-bg: #222222;
    --color-ink: #f2f2f2;
    --color-ink-soft: #cccccc;
    --color-muted: #aaaaaa;
    --color-border: #3b3b3b;
    --color-row-hover: #2d2d2d;
    --color-badge-soft-bg: #292929;
    --color-info: #9bc1e2;
    --color-violet: #c4a4e0;
    --color-teal: #8dcace;
    --color-rose: #e4a4bc;

    --color-success: #7fd3a0;
    --color-success-bg: #1e3327;
    --color-success-border: #2f5c43;
    --color-danger: #f09a90;
    --color-danger-strong: #c96b60;
    --color-danger-bg: #3a2320;
    --color-danger-border: #63332d;
    --color-warn-ink: #e8bd7a;
    --color-warn-bg: #3a2f1c;

    --color-on-primary: #1e1811;
    --color-on-danger: #1e1811;
    --color-sidebar-from: #222222;
    --color-sidebar-to: #222222;
    --color-sidebar-active-bg: #292929;
    --color-sidebar-active-ink: #f2f2f2;
    --color-overlay: rgba(0, 0, 0, .65);
    --color-overlay-soft: rgba(0, 0, 0, .55);
    --color-focus-ring: rgba(201, 154, 93, .35);
    --color-error-ui-bg: #3a2f1c;
    --color-page-gradient: rgba(42, 33, 24, 0);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
}

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

html, body {
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--color-page);
}

body {
    --s: 128px;
    --c1: var(--coltrame01);
    --c2: var(--coltrame02);
    --_g: var(--c1) 0% 5%, var(--c2) 6% 15%,
        var(--c1) 16% 25%, var(--c2) 26% 35%,
        var(--c1) 36% 45%, var(--c2) 46% 55%,
        var(--c1) 56% 65%, var(--c2) 66% 75%,
        var(--c1) 76% 85%, var(--c2) 86% 95%, #0000 96%;
    background-color: var(--c1);
    background-image: radial-gradient(50% 50% at 100% 0, var(--_g)),
        radial-gradient(50% 50% at 0 100%, var(--_g)),
        radial-gradient(50% 50%, var(--_g)),
        radial-gradient(50% 50%, var(--_g));
    background-position: 0 0, 0 0, 0 0, calc(var(--s) / 2) calc(var(--s) / 2);
    background-size: var(--s) var(--s);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: normal;
    margin: 0 0 .25rem;
    color: var(--color-ink);
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.35rem; }

.brand-title {
    font-family: var(--font-brand);
    font-weight: 400;
}

a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

a:hover, a:focus-visible {
    text-decoration: underline;
}

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

code {
    background: var(--color-primary-soft);
    border-radius: 4px;
    padding: .05rem .35rem;
    font-size: .9em;
}

/* ------------------------------------------------------------------ Icônes */

.app-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
}

/* ---------------------------------------------------------------- Layout */

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

.app-sidebar {
    width: var(--sidebar-width);
    flex: none;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    color: var(--color-ink);
    border-right: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
    /* Le repli en rail est animé (desktop uniquement, cf. media query en fin de fichier). */
    transition: width .2s ease;
}

.app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

.app-content {
    flex: 1;
    width: 100%;
    padding: 1.25rem;
    /* Pas de largeur maximale : les tableaux larges (Compta, Missions) doivent utiliser tout
       l'espace disponible plutôt que de provoquer un défilement horizontal inutile. */
}

/* --------------------------------------------------------------- Sidebar */

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    min-height: 68px;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
    transition: padding .2s ease, gap .2s ease;
}

.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    overflow: hidden;
    color: var(--color-primary);
}

.sidebar-brand-link:hover {
    text-decoration: none;
}

/* Logo du client (armada-logo.png) : bandeau horizontal, affiché en entier. */
.sidebar-logo {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 180px;
    height: auto;
}

.sidebar-brand-text {
    font-family: var(--font-brand);
    font-size: 1.55rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    max-width: 160px;
    opacity: 1;
    transition: opacity .15s ease, max-width .2s ease;
}

/* Bouton de repli, en haut de la sidebar (déclaré ici, affiché en desktop seulement). */
.sidebar-collapse-btn {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-primary);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.sidebar-collapse-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.sidebar-collapse-btn .app-icon {
    transition: transform .2s ease;
}

/* Libellés des liens : masqués en douceur quand la sidebar passe en rail. */
.sidebar-label {
    white-space: nowrap;
    overflow: hidden;
    max-width: 190px;
    opacity: 1;
    transition: opacity .15s ease, max-width .2s ease;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: .85rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 46px;
    padding: .5rem .85rem;
    border-radius: var(--radius);
    color: var(--color-ink-soft);
    font-size: 1rem;
    font-weight: 700;
}

.sidebar-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
    text-decoration: none;
}

.sidebar-link.active {
    background: var(--color-surface-alt);
    color: var(--color-sidebar-active-ink);
    box-shadow: inset 3px 0 var(--color-button-border);
}

.sidebar-footer {
    padding: .75rem .7rem 1rem;
    border-top: 1px solid var(--color-border);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .75rem;
    border-radius: var(--radius);
    color: var(--color-ink-soft);
    font-size: .92rem;
}

.sidebar-user:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
    text-decoration: none;
}

/* ------------------------------------------------- En-tête / sous-modules */

.module-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.module-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    color: var(--color-ink);
    font-weight: 700;
    white-space: nowrap;
}

.submodule-nav {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
}

.submodule-link {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .35rem .95rem;
    border-radius: 999px;
    color: var(--color-primary);
    border: 1px solid var(--color-button-border);
    background: var(--color-surface);
    font-weight: 700;
    font-size: .95rem;
}

.submodule-link:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    text-decoration: none;
}

.submodule-link.active {
    background: var(--color-input);
    color: var(--color-primary);
}

/* Bouton hamburger (tablette / mobile) */

.sidebar-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.sidebar-toggle-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    color: var(--color-primary-dark);
    background: var(--color-primary-soft);
    cursor: pointer;
}

.sidebar-backdrop {
    display: none;
}

/* ----------------------------------------------------------- Fil d'Ariane */

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    font-size: .92rem;
}

.breadcrumb li + li::before {
    content: "›";
    margin-right: .35rem;
    color: var(--color-muted);
}

.breadcrumb li span[aria-current] {
    color: var(--color-ink-soft);
    font-weight: 700;
}

.breadcrumb li > span:not([aria-current]) {
    color: var(--color-ink-soft);
}

/* -------------------------------------------------------------- En-têtes */

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-head h1 {
    margin-bottom: .15rem;
}

.page-subtitle {
    margin: 0;
    color: var(--color-ink-soft);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------- Cartes */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
}

.card-title {
    margin: 0 0 .7rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 1.2rem;
}

.card > p:last-child {
    margin-bottom: 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.card-grid .card {
    margin-bottom: 0;
}

/* --------------------------------------------------------- Listes clé/val */

.info-grid {
    display: grid;
    grid-template-columns: minmax(140px, 40%) 1fr;
    gap: .4rem 1rem;
    margin: 0;
}

.info-grid dt {
    color: var(--color-ink-soft);
    font-weight: 700;
}

.info-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- Tableaux */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
    line-height: 1.4;
}

.data-table th,
.data-table td {
    padding: .4rem .5rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.data-table thead th {
    background: var(--color-primary-soft);
    color: var(--color-ink);
    font-size: .8rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    position: sticky;
    top: 0;
}

.data-table tbody tr:nth-child(even) {
    background: var(--color-surface-alt);
}

.data-table tbody tr:hover,
.data-table tbody tr:focus-within {
    background: var(--color-row-hover);
}

.data-table .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table .text-center { text-align: center; }

.data-table .table-number {
    width: 1%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.data-table .table-actions { width: 1%; white-space: nowrap; }

/* Evasan : actions sur une seule ligne, informations secondaires à la demande. */
.evasan-row-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .3rem;
}

.btn.evasan-icon-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    padding: .3rem;
    flex: 0 0 32px;
}

.evasan-short-cell { white-space: nowrap; }
.evasan-medical-cell { min-width: 10rem; max-width: 24rem; }
.evasan-inline-details summary {
    cursor: pointer;
    color: var(--color-primary);
    padding: .3rem 0;
    min-height: 32px;
    line-height: 1.5;
}
.evasan-inline-details summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: 3px;
}
.evasan-inline-details p {
    margin: .35rem 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.evasan-inline-details .acces { min-width: 15rem; margin-top: .35rem; }
.evasan-inline-details .checkbox-inline { margin-top: .35rem; }

.table-legend {
    margin: 0 0 .6rem;
    color: var(--color-ink-soft);
    font-size: .85rem;
}

.live-results-status {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-height: 1.5rem;
    margin: -.25rem 0 .65rem;
    color: var(--color-muted);
    font-size: .85rem;
}

.live-query-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: live-query-spin .7s linear infinite;
}

@keyframes live-query-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .live-query-spinner { animation: none; } }

.data-table .table-number input[type="number"] {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Compacter les données, pas les cibles interactives. */
.data-table .row-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    min-height: 28px;
}

.table-wrap:focus-visible {
    outline-offset: -3px;
}

/* Missions : matrice compacte comparable au tableau du client lourd.
   On conserve la grille sur mobile, avec défilement clavier et mission figée. */
.mission-matrix-guide {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.mission-matrix-guide .table-legend { margin: 0; }
.mission-team-legend { font-size: .85rem; }
.mission-team-legend summary { color: var(--color-primary); cursor: pointer; padding: .25rem 0; }
.mission-team-legend dl { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .4rem 0 0; }
.mission-team-legend dl > div { display: flex; gap: .4rem; }
.mission-team-legend dt { font-weight: 700; }
.mission-team-legend dd { margin: 0; color: var(--color-ink-soft); }
.mission-matrix { font-size: .85rem; }
.mission-matrix th, .mission-matrix td { padding: .3rem .45rem; }
.mission-matrix thead th { white-space: nowrap; font-size: .75rem; }
.mission-matrix abbr { text-decoration: none; cursor: help; }
.mission-matrix .mission-date { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mission-matrix .team-cell { width: 1%; min-width: 35px; text-align: center; padding: .3rem .25rem; border-left: 1px solid var(--color-border); }
.mission-matrix .mission-total { border-left: 1px solid var(--color-border); background: var(--color-surface-alt); }
.mission-matrix .mission-number { position: sticky; left: 0; z-index: 1; background: var(--color-surface); border-right: 1px solid var(--color-border); }
.mission-matrix thead .mission-number { z-index: 2; background: var(--color-surface-alt); }
.mission-matrix tbody tr:nth-child(even) .mission-number { background: var(--color-surface-alt); }
.mission-matrix tbody tr:hover .mission-number, .mission-matrix tbody tr:focus-within .mission-number { background: var(--color-row-hover); }
.team-count { display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.team-dot, .team-empty { display: inline-block; width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--color-success); vertical-align: middle; }
.team-empty { background: var(--color-muted); opacity: .4; }
.mission-itineraries summary { min-height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 28px; font-weight: 600; cursor: pointer; list-style: none; }
.mission-itineraries summary::-webkit-details-marker { display: none; }
.mission-itineraries summary::after { content: "⌄"; color: var(--color-muted); font-size: .7rem; }
.mission-itineraries[open] summary::after { content: "⌃"; }
.mission-itineraries ul { margin: .25rem 0; padding: 0; list-style: none; text-align: left; font-size: .8rem; }
.mission-itineraries li { padding: .15rem 0; white-space: nowrap; }
.mission-matrix .mission-wait-link { min-height: 32px; width: 32px; padding: .25rem; justify-content: center; }
.mission-matrix .badge { padding: .15rem .45rem; font-size: .78rem; }

.data-table td > a:not(.btn):not(.count-link):not(.badge-status) { overflow-wrap: anywhere; }

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-danger { color: var(--color-danger); font-weight: 700; }
.muted { color: var(--color-muted); }

.row-link {
    font-weight: 700;
}

/* ------------------------------------------------------------ Formulaire */

.toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}

.toolbar-field {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1 1 320px;
    max-width: 480px;
    background: var(--color-input);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0 .8rem;
    color: var(--color-muted);
}

.toolbar-field input {
    flex: 1;
    min-height: 46px;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-ink);
}

/* -------------------------------------------------------------- Boutons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 36px;
    max-width: 100%;
    padding: .4rem .8rem;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink-soft);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:hover {
    background: var(--color-input);
    color: var(--color-ink);
    text-decoration: none;
}

.btn-primary {
    background: var(--color-action);
    border-color: var(--color-action);
    color: var(--color-on-action);
}

.btn-primary:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
    color: var(--color-on-action);
}

.btn-ghost {
    background: var(--color-surface);
    border-color: var(--color-button-border);
    color: var(--color-ink-soft);
}

.btn-ghost:hover {
    background: var(--color-input);
    color: var(--color-ink);
}

/* Conserver le sélecteur natif et son nom de fichier, en l'accordant aux boutons. */
input[type="file"] {
    min-width: 0;
    max-width: 100%;
    padding: .25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink-soft);
    font-family: inherit;
    font-size: .875rem;
}

input[type="file"]::file-selector-button {
    min-height: 32px;
    margin-right: .6rem;
    padding: .35rem .65rem;
    border: 1px solid var(--color-button-border);
    border-radius: 4px;
    background: var(--color-surface-alt);
    color: var(--color-ink);
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
    background: var(--color-input);
}

@media (pointer: coarse) {
    .btn, .btn.btn-sm, input[type="file"]::file-selector-button { min-height: 44px; }
}

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--color-on-danger);
}

.btn-danger:hover {
    background: var(--color-danger-strong);
    border-color: var(--color-danger-strong);
    color: var(--color-on-danger);
}

.btn:disabled,
.btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------- Badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 700;
    white-space: nowrap;
}

.badge-primary {
    background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
    border: 1px solid var(--color-button-border);
    color: var(--color-primary);
}

/* ----------------------------------------------------- États / divers */

.empty-state {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
    color: var(--color-ink-soft);
}

.checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: .5rem;
}

.checklist li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.checklist .app-icon {
    color: var(--color-success);
    margin-top: .15rem;
}

/* Cartes de modules (accueil) */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.module-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-sm);
}

.module-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transform: translateY(-1px);
}

.module-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: none;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.module-card-icon .app-icon {
    width: 1.6rem;
    height: 1.6rem;
}

.module-card-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.module-card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    color: var(--color-ink);
    font-weight: 700;
}

.module-card-text {
    font-size: .9rem;
    color: var(--color-ink-soft);
}

/* --------------------------------------------------- Erreur Blazor */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--color-error-ui-bg);
    border-top: 2px solid var(--color-danger);
    bottom: 0;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, .2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .8rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .9rem;
    top: .6rem;
}

.sidebar-logout {
    margin-top: .25rem;
}

/* ------------------------------------------------- Formulaires de saisie */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field label {
    background: var(--color-surface-alt);
    font-weight: 700;
    font-size: .95rem;
    color: var(--color-ink-soft);
}

.field input,
.field select,
.field textarea {
    min-height: 46px;
    padding: .5rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input);
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-ink);
}

.field textarea {
    min-height: 130px;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 0;
}

.field-wide {
    grid-column: 1 / -1;
}

.validation-message {
    color: var(--color-danger);
    font-size: .88rem;
    font-weight: 700;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.alert {
    border-radius: var(--radius);
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.alert-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
}

/* -------------------------------------------------- Page de connexion */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: transparent;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
}

/* Logo du client sur la page de connexion (même fichier que la sidebar). */
.login-logo {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
}

.login-brand-mark {
    font-family: var(--font-brand);
    font-size: 2rem;
    line-height: 1;
    color: var(--color-primary-dark);
}

.login-sub {
    margin-top: 0;
    color: var(--color-ink-soft);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}

.login-hint {
    margin: 1.25rem 0 0;
    font-size: .9rem;
    color: var(--color-muted);
}

.btn-block {
    width: 100%;
    justify-content: center;
}

/* --------------------------------------- Réglages / tableaux de saisie */

.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.25rem;
}

.section-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .35rem .9rem;
    border: 1px solid var(--color-button-border);
    border-radius: 999px;
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .92rem;
}

.section-nav a:hover {
    background: var(--color-primary-soft);
    text-decoration: none;
}

.card-subtitle {
    margin: 1.5rem 0 .75rem;
    font-size: 1.1rem;
    color: var(--color-ink);
}

.cell-input {
    width: 100%;
    min-height: 42px;
    padding: .4rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-input);
    font-family: inherit;
    font-size: .95rem;
    color: var(--color-ink);
}

.cell-input:focus {
    border-color: var(--color-primary);
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 0;
}

.cell-input-code {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 700;
}

.inline-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.inline-form .cell-input {
    flex: 1 1 220px;
    max-width: 360px;
}

/* Une cellule reste une cellule ; seul son groupe d'actions utilise flex. */
.data-table td.actions { white-space: nowrap; }
.table-row-actions {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: nowrap;
    vertical-align: middle;
}
.btn.table-action {
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    flex: 0 0 32px;
    padding: .35rem;
    margin: 0;
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-ink-soft);
}
.btn.table-action:hover {
    background: var(--color-input);
    border-color: var(--color-button-border);
    color: var(--color-ink);
}
.btn.table-action-danger { color: var(--color-danger); }
.btn.table-action-danger:hover {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}
.btn.table-action .app-icon { width: 1.05rem; height: 1.05rem; }
@media (pointer: coarse) {
    .btn.table-action { width: 44px; height: 44px; min-width: 44px; min-height: 44px; flex-basis: 44px; }
}

.data-table td .badge {
    margin: 0 .25rem .2rem 0;
}

.btn-sm {
    min-height: 32px;
    padding: .3rem .6rem;
    font-size: .85rem;
}

.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .4rem .3rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--color-button-border);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .92rem;
}

.chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.chip-remove:hover {
    background: var(--color-danger);
    color: var(--color-on-danger);
}

.checkbox {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 42px;
    font-size: .95rem;
}

.checkbox input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    margin: 0;
    padding: .5rem .9rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.checkbox-group legend {
    padding: 0 .35rem;
    font-weight: 700;
    font-size: .9rem;
    color: var(--color-ink-soft);
}

.checkbox-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
}

.checkbox-inline .checkbox {
    min-height: 34px;
}

.acces {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.acces-motdepasse {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.acces-motdepasse .cell-input {
    flex: 1;
    min-width: 0;
}

.add-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--color-border);
}

.badge-soft {
    background: var(--color-badge-soft-bg);
    border-color: var(--color-border);
    color: var(--color-ink-soft);
    font-weight: 700;
}

.alert-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}

.sidebar-form {
    margin: 0;
}

.sidebar-form .sidebar-logout {
    width: 100%;
    border: 1px solid var(--color-button-border);
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: inherit;
    cursor: pointer;
}

.sidebar-form .sidebar-logout:hover {
    background: var(--color-input);
}

/* ------------------------------------------- Missions / écrans de suivi */

.badge-ok {
    background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 20%, var(--color-surface));
    color: var(--color-success);
    font-weight: 700;
}

.badge-warn {
    background: color-mix(in srgb, var(--color-warn-ink) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-warn-ink) 20%, var(--color-surface));
    color: var(--color-warn-ink);
    font-weight: 700;
}

.badge-pending {
    background: color-mix(in srgb, var(--color-info) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-info) 20%, var(--color-surface));
    color: var(--color-info);
}

.badge-danger {
    background: color-mix(in srgb, var(--color-danger) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 20%, var(--color-surface));
    color: var(--color-danger);
}

.badge-violet {
    background: color-mix(in srgb, var(--color-violet) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-violet) 20%, var(--color-surface));
    color: var(--color-violet);
}

.badge-teal {
    background: color-mix(in srgb, var(--color-teal) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-teal) 20%, var(--color-surface));
    color: var(--color-teal);
}

.badge-rose {
    background: color-mix(in srgb, var(--color-rose) 9%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-rose) 20%, var(--color-surface));
    color: var(--color-rose);
}

.badge-status::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-status {
    width: max-content;
    max-width: none;
    white-space: nowrap;
    overflow-wrap: normal;
    flex-shrink: 0;
    line-height: 1.35;
}

/* Seuls les longs libellés peuvent se replier, toujours entre les mots. */
.badge-status-long {
    width: auto;
    max-width: 32ch;
    white-space: normal;
    word-break: normal;
}

.field > .badge-status { align-self: flex-start; }

.status-editor {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.status-editor .cell-input { flex: 1 1 180px; width: auto; }

/* Accueil : recherche utile, modules et tâches courantes, sans compteurs fictifs. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.home-dashboard { max-width: 1440px; margin: 0 auto; }

.home-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.home-eyebrow {
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-muted);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.home-welcome .brand-title {
    font-size: 2.6rem;
    line-height: 1.1;
    margin: .25rem 0 .6rem;
    color: var(--color-primary);
}

.home-welcome p { margin: .2rem 0 0; }
.home-greeting { font-size: 1.15rem; font-weight: 600; }
.home-welcome-tools { flex: 0 1 360px; min-width: 0; }
.home-welcome-tools time { display: block; color: var(--color-muted); font-size: .9rem; text-align: right; margin-bottom: .75rem; }

.home-search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .35rem .25rem .7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-input);
    color: var(--color-muted);
}

.home-search input {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    background: transparent;
    color: var(--color-ink);
    border: 0;
    font: inherit;
}

.home-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary);
    cursor: pointer;
}

.home-search button .app-icon { transform: rotate(180deg); }
.home-search button:hover { background: var(--color-primary-soft); }
.home-contact-results { margin-top: .5rem; padding: .65rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.home-contact-results .live-results-status { margin: 0 0 .35rem; }
.home-contact-result { display: block; padding: .5rem .25rem; border-bottom: 1px solid var(--color-border); color: var(--color-ink); }
.home-contact-result:hover { background: var(--color-surface-alt); text-decoration: none; }
.home-contact-result strong { display: block; font-size: .9rem; }
.home-contact-result small { display: block; color: var(--color-muted); font-size: .8rem; }
.home-contact-all { display: inline-flex; align-items: center; min-height: 32px; font-size: .85rem; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.home-layout-single { grid-template-columns: 1fr; }
.home-layout > section { min-width: 0; }
.home-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.home-section-head h2, .home-shortcuts h2 { font-size: 1.2rem; font-weight: 700; }
.home-section-head > span { font-size: .85rem; }
.home-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

.home-module {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.home-module-featured { border-color: var(--color-button-border); }
.home-module:focus-within, .home-module:hover { box-shadow: var(--shadow-md); }
.home-module-link { display: flex; align-items: flex-start; gap: .75rem; padding: 1.1rem; flex: 1; color: var(--color-ink); }
.home-module-link:hover { text-decoration: none; background: var(--color-surface-alt); }
.home-module-link:focus-visible { outline-offset: -3px; }
.home-module-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: var(--radius); background: var(--color-surface-alt); color: var(--color-primary); }
.home-module-copy { flex: 1; min-width: 0; }
.home-module-copy h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .3rem; }
.home-module-copy > span { font-size: .9rem; line-height: 1.4; color: var(--color-ink-soft); }
.home-link-arrow { color: var(--color-primary); flex: none; }
.home-module-links { display: flex; flex-wrap: wrap; gap: .15rem .5rem; padding: .4rem .9rem; border-top: 1px solid var(--color-border); }
.home-module-links a { display: inline-flex; align-items: center; min-height: 32px; padding: .2rem .35rem; font-size: .85rem; }
.home-shortcuts { padding: 1.1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.home-shortcuts > p { font-size: .85rem; margin: .25rem 0 .75rem; }
.home-shortcut { display: flex; align-items: center; gap: .65rem; padding: .8rem .25rem; color: var(--color-ink); border-bottom: 1px solid var(--color-border); }
.home-shortcut:last-child { border: 0; }
.home-shortcut:hover { text-decoration: none; background: var(--color-surface-alt); }
.home-shortcut > .app-icon { color: var(--color-primary); width: 1.1rem; height: 1.1rem; }
.home-shortcut > span:not(.home-link-arrow) { flex: 1; min-width: 0; }
.home-shortcut strong { display: block; font-size: .95rem; font-weight: 600; }
.home-shortcut small { display: block; color: var(--color-muted); font-size: .8rem; line-height: 1.4; }

@media (max-width: 1200px) {
    .home-layout { grid-template-columns: 1fr; }
    .home-shortcuts nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
}

@media (max-width: 640px) {
    .home-welcome { flex-direction: column; align-items: stretch; padding: 1.1rem; gap: 1rem; }
    .home-welcome-tools { flex-basis: auto; }
    .home-welcome-tools time { text-align: left; }
    .home-modules, .home-shortcuts nav { grid-template-columns: 1fr; }
}

.action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .75rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
}

.summary-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.summary-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-ink);
    overflow-wrap: anywhere;
}

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Les 4 étapes sont calculées par une autre application : affichage seul, pas de clic. */
.step {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: .2rem .6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 700;
}

.step-ok {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success);
}

.step-ok::before {
    content: "✓ ";
}

.step-ko {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.step-ko::before {
    content: "✕ ";
}

.data-table tfoot .total-row td {
    background: var(--color-primary-soft);
    border-top: 2px solid var(--color-border);
}

/* ------------------------------------------------ Reçu fiscal (affichage) */

/* Synthèse mission : montants prioritaires, échéances en second niveau. */
.participant-group {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-top: .6rem;
    overflow: hidden;
}

.participant-group > summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 48px;
    padding: .6rem .85rem;
    background: var(--color-surface-alt);
    cursor: pointer;
    list-style: none;
}

.participant-group > summary::-webkit-details-marker { display: none; }
.participant-group > summary:hover { background: var(--color-row-hover); }
.participant-group-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.participant-group-count { color: var(--color-muted); font-size: .9rem; }
.participant-group-chevron { display: flex; flex: none; color: var(--color-primary); }
.participant-group[open] > summary .participant-group-chevron { transform: rotate(180deg); }

.participant-group > .table-wrap {
    border: 0;
    border-top: 1px solid var(--color-border);
    border-radius: 0;
}

.mission-summary .card-title {
    margin-bottom: .75rem;
    padding-bottom: 0;
    border: 0;
}

.mission-finances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.mission-finances > div {
    padding: .35rem .8rem;
    border-left: 2px solid var(--color-border);
}

.mission-finances > .mission-balance {
    border-color: var(--color-button-border);
}

.mission-finances dt {
    color: var(--color-ink-soft);
    font-size: .9rem;
}

.mission-finances dd {
    margin: .1rem 0 0;
    font-size: clamp(1.2rem, 2vw, 1.65rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.mission-deadlines {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.75rem;
    margin: .9rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid var(--color-border);
    font-size: .9rem;
}

.mission-deadlines > div {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
}

.mission-deadlines dt { color: var(--color-muted); }
.mission-deadlines dd { margin: 0; font-weight: 600; }

/* Quatre états indépendants, dans des colonnes étroites. */
.data-table .validation-cell {
    width: 30px;
    min-width: 30px;
    padding: .4rem .25rem;
    text-align: center;
    white-space: nowrap;
}

.validation-cell abbr {
    font-size: .72rem;
    text-decoration: none;
    cursor: help;
}

.validation-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
    color: var(--color-surface);
    font: 700 9px/12px system-ui, sans-serif;
    text-align: center;
}

.validation-dot.is-valid { background: var(--color-success); }
.validation-dot.is-invalid { background: var(--color-danger); }
.validation-dot.is-valid::after { content: "✓"; }
.validation-dot.is-invalid::after { content: "×"; }

@media (max-width: 640px) {
    .mission-finances {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .mission-finances > div {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
    }

    .mission-finances dd { margin: 0; }
}

.recu-document {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-doc-bg);
}

.recu-entete {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--color-primary);
}

.recu-association {
    display: block;
    font-family: var(--font-brand);
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--color-primary-dark);
}

.recu-mention {
    display: block;
    font-size: .85rem;
    color: var(--color-muted);
}

.recu-numero {
    text-align: right;
}

.recu-numero strong {
    display: block;
    font-size: 1.1rem;
    color: var(--color-ink);
}

.recu-titre {
    margin: 1rem 0 .35rem;
    text-align: center;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.recu-objet {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: .9rem;
    font-style: italic;
    color: var(--color-ink-soft);
}

.recu-document .info-grid {
    margin-bottom: 0;
}

/* --------------------------------------------- Modale, toast, vignettes */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 100;
}

.modal {
    position: fixed;
    z-index: 101;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(760px, calc(100vw - 2rem));
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    margin: 0;
    font-size: 1.35rem;
}

.modal-close {
    padding: .3rem .5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-soft);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.modal-close:hover {
    background: var(--color-primary-soft);
}

.modal-body > :last-child {
    margin-bottom: 0;
}

.modal-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.toast {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 110;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: min(420px, calc(100vw - 2rem));
    padding: .85rem 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-weight: 700;
}

.toast-success {
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    color: var(--color-success);
}

.toast-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    color: var(--color-danger);
}

.toast-close {
    padding: 0 .15rem;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.count-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 34px;
    padding: .25rem .7rem;
    border: 1px solid var(--color-button-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: .9rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    cursor: pointer;
}

.count-link:hover {
    background: var(--color-primary-soft);
}

.chip-input {
    width: 180px;
    padding: .25rem .5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--color-input);
    font-family: inherit;
    font-size: .92rem;
    font-weight: 700;
    color: var(--color-primary-dark);
}

.chip-input:hover {
    border-color: var(--color-border);
    background: var(--color-input);
}

.chip-input:focus {
    border-color: var(--color-primary);
    background: var(--color-input);
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 0;
}

.doc-list {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
}

.doc-item .app-icon {
    color: var(--color-primary);
}

.doc-item-title {
    font-weight: 700;
}

.doc-item-meta {
    margin-left: auto;
    font-size: .85rem;
    color: var(--color-muted);
    text-align: right;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}

.photo-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.photo-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    color: #fff;
}

.photo-thumb .app-icon {
    width: 2rem;
    height: 2rem;
    opacity: .9;
}

.photo-caption {
    padding: .5rem .65rem;
    border-top: 1px solid var(--color-border);
    font-size: .85rem;
    color: var(--color-ink-soft);
}

.photo-caption small {
    color: var(--color-muted);
}

/* ------------------------------------------- Portrait d'un contact (fiche) */

.contact-portrait {
    display: block;
    width: 100%;
    max-width: 132px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
}

.contact-portrait-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 132px;
    aspect-ratio: 4 / 5;
    padding: .5rem;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: .78rem;
    text-align: center;
}

.photo-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: .55rem;
    margin-top: .85rem;
}

.photo-form input[type="file"] {
    width: 100%;
}

.photo-form label {
    font-size: .85rem;
    font-weight: 600;
}

.photo-form .btn { justify-self: end; }
.photo-form small { font-size: .78rem; }
.photo-remove-form { margin-top: .55rem; text-align: right; }

/* ------------- Listes de contenu : étiquettes carrées, deux par ligne ---- */
/*
   Une pastille signale un ÉTAT (soldé, validé, non payé…).
   Pour ÉNUMÉRER du contenu — itinéraires, composition d'une équipe — on utilise des
   étiquettes de forme carrée (même rayon que les boutons), aérées et disposées
   deux par ligne, plutôt qu'une guirlande de pastilles arrondies.
*/

.liste {
    color: var(--color-ink-soft);
    font-size: .88rem;
}

.tags {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: .35rem .5rem;
    min-width: 0;
}

.tags .tag {
    flex: 1 1 calc(50% - .5rem);
    min-width: 0;
    padding: .22rem .5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
    font-size: .8rem;
    line-height: 1.3;
}

/* --------------------- Étapes de validation : deux par ligne au besoin --- */

.steps-compact {
    max-width: 210px;
}

/* Tableaux simples : fiches selon la largeur disponible dans leur propre région.
   Les matrices restent des grilles. app.js complète les libellés des tableaux simples
   sans déplacer les éléments ni recréer les champs gérés par Blazor. */
.table-wrap {
    min-width: 0;
    max-width: 100%;
    container: table-region / inline-size;
    overscroll-behavior-x: contain;
}

@container table-region (max-width: 55rem) {
    .table-stack,
    .table-stack.data-table > tbody,
    .table-stack.data-table > tfoot {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .table-stack.data-table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .table-stack.data-table > tbody > tr,
    .table-stack.data-table > tfoot > tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .8rem 1.25rem;
        margin: .75rem;
        padding: 1rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }
    .table-stack.data-table > tbody > tr > :is(td, th),
    .table-stack.data-table > tfoot > tr > :is(td, th) {
        display: block;
        min-width: 0;
        width: auto;
        max-width: none;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .table-stack.data-table > tbody > tr > :is(td, th)::before,
    .table-stack.data-table > tfoot > tr > :is(td, th)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .2rem;
        color: var(--color-muted);
        font-size: .8rem;
        font-weight: 600;
        line-height: 1.35;
    }
    .table-stack.data-table > tbody > tr > :first-child,
    .table-stack.data-table > tbody > tr > [data-label="Actions"],
    .table-stack.data-table > tbody > tr > [data-label="Désignation"],
    .table-stack.data-table > tbody > tr > [data-label="Informations"],
    .table-stack.data-table > tbody > tr > [data-label="Pathologie"],
    .table-stack.data-table > tfoot > tr > :first-child {
        grid-column: 1 / -1;
    }
    .table-stack.data-table > tbody > tr > :first-child {
        padding-bottom: .6rem;
        border-bottom: 1px solid var(--color-border);
        font-weight: 700;
    }
    .table-stack :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, fieldset) {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
    .table-stack :is(input, select, textarea) { font-family: inherit; font-size: 1rem; }
    .table-stack :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        padding: .5rem .65rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        background: var(--color-input);
        color: var(--color-ink);
    }
    .table-stack :is(input:not([type="checkbox"]):not([type="radio"]), select, .btn, button) {
        min-height: 44px;
    }
    .table-stack :is(input[type="checkbox"], input[type="radio"]) { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); }
    .table-stack :is(.btn, button) { margin: .15rem .15rem .15rem 0; white-space: normal; }
    .table-stack .table-actions { white-space: normal; }
    .table-stack .evasan-short-cell { white-space: normal; }
    .table-stack .evasan-row-actions { flex-wrap: wrap; }
    .table-stack .validation-cell { text-align: left; }
    .participant-table.table-stack.data-table > tbody > tr > td.validation-cell {
        display: flex;
        align-items: center;
        gap: .5rem;
        min-width: 0;
    }
    .participant-table.table-stack.data-table > tbody > tr > td.validation-cell::before { margin: 0; }
}

@container table-region (max-width: 30rem) {
    .table-stack.data-table > tbody > tr,
    .table-stack.data-table > tfoot > tr {
        grid-template-columns: minmax(0, 1fr);
        gap: .85rem;
        margin: .5rem;
        padding: .85rem;
    }
    .table-stack.data-table > tbody > tr > :is(td, th):has(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
        grid-column: 1 / -1;
    }
    .participant-table.table-stack.data-table > tbody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .participant-table.table-stack.data-table > tbody > tr > td:not(.validation-cell) { grid-column: 1 / -1; }
}

/* --------------------- Aperçu d'un document dans une modale ----------- */
/* Le document est servi depuis la GED et affiché sur place : pas d'onglet à ouvrir. */

.apercu-document {
    display: block;
    max-width: 100%;
    max-height: 68vh;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface-alt);
}

.apercu-cadre {
    width: 100%;
    height: 68vh;
}

.apercu-legende {
    margin-top: 1rem;
}

/* Lecteur PDF : dialogue natif, presque plein écran, sans navigation ERP. */
.pdf-preview {
    width: min(1400px, calc(100vw - 3rem));
    height: calc(100dvh - 3rem);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.pdf-preview[open] { display: flex; flex-direction: column; }
.pdf-preview::backdrop { background: var(--color-overlay); }
.pdf-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .85rem;
    border-bottom: 1px solid var(--color-border);
}
.pdf-preview-header h2 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.pdf-preview-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.pdf-preview .modal-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; }
.pdf-preview-body { flex: 1; min-height: 0; background: var(--color-surface-alt); }
.pdf-preview-frame { display: block; width: 100%; height: 100%; border: 0; }
.pdf-preview-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .35rem 1rem; padding: .45rem .85rem; font-size: .8rem; color: var(--color-muted); }
.pdf-preview-trigger { cursor: pointer; font-family: inherit; }
.pdf-preview-trigger:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .pdf-preview { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
    .pdf-preview-header { flex-wrap: wrap; }
    .pdf-preview-header h2 { flex: 1 1 160px; }
}

/* --------------------- Places disponibles : matrice du logiciel ERP --- */
.places-card { padding: .75rem; }
.places-matrix-wrap { max-height: 75vh; max-height: 75dvh; overflow: auto; }
.places-matrix { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .75rem; line-height: 1.25; }
.places-matrix th, .places-matrix td { padding: .25rem .3rem; border-bottom: 1px solid var(--color-border); }
.places-matrix .places-count { min-width: 2.5rem; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.places-matrix .places-function-heading { text-align: center; height: 30px; padding: .25rem .4rem; white-space: nowrap; border-left: 1px solid var(--color-border); }
.places-matrix .places-subheading { text-align: center; min-width: 2.5rem; height: 26px; font-size: .7rem; font-weight: 400; top: 30px; }
.places-matrix thead th { z-index: 3; background: var(--color-surface-alt); }
.places-matrix abbr { text-decoration: none; cursor: help; }
.places-matrix .places-pair-end { border-right: 1px solid var(--color-border); }
.places-matrix .places-total-heading { border-left: 2px solid var(--color-border); }
.places-matrix .places-route { position: sticky; left: 0; min-width: 5.75rem; z-index: 2; border-right: 1px solid var(--color-border); background: var(--places-row-bg, var(--color-surface)); white-space: nowrap; font-weight: 700; }
.places-matrix thead .places-route { z-index: 4; background: var(--color-surface-alt); }
.data-table.places-matrix tbody tr { background: var(--places-row-bg, var(--color-surface)); }
.places-route-ts1 { --places-row-bg: #eaf2f8; }
.places-route-ts2 { --places-row-bg: #fbf5e3; }
.places-route-pn { --places-row-bg: #edf4e6; }
.places-route-ps { --places-row-bg: #faeee7; }
.places-route-other { --places-row-bg: var(--color-surface-alt); }
.places-occupied { color: #984333; }
.places-available { color: #245a98; font-weight: 700; }
.places-zero { color: var(--color-muted); font-weight: 400; }
.places-overbooked { color: #9c2929; font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }
.places-matrix .places-mission-header tr { background: var(--color-surface); }
.places-matrix .places-mission-header th { padding: .35rem .3rem; border-top: 1px solid var(--color-border); }
.places-mission-title { position: sticky; left: .3rem; display: flex; align-items: center; flex-wrap: wrap; width: fit-content; max-width: calc(100vw - 4rem); gap: .25rem .45rem; color: var(--color-ink-soft); }
.places-mission-title a { color: var(--color-primary-dark); font-weight: 700; }
.places-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--color-button-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-dark); cursor: pointer; }
.places-toggle .app-icon { width: 14px; height: 14px; }
.places-toggle.is-collapsed .app-icon { transform: rotate(-90deg); }
.places-toggle:hover { background: var(--color-primary-soft); }
.places-matrix tfoot th, .places-matrix tfoot td { background: var(--color-surface-alt); border-top: 2px solid var(--color-border); }
.places-matrix tfoot .places-route { --places-row-bg: var(--color-surface-alt); }
[data-theme="dark"] .places-route-ts1 { --places-row-bg: #273641; }
[data-theme="dark"] .places-route-ts2 { --places-row-bg: #3b3829; }
[data-theme="dark"] .places-route-pn { --places-row-bg: #2e392b; }
[data-theme="dark"] .places-route-ps { --places-row-bg: #3d302b; }
[data-theme="dark"] .places-occupied { color: #f3b7a9; }
[data-theme="dark"] .places-available { color: #a9d0ff; }
[data-theme="dark"] .places-overbooked { color: #ffb4b4; }

/* ------------------------------------------------------- Responsive */

@media (max-width: 1023.98px) {
    .sidebar-toggle-btn {
        display: inline-flex;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 82%;
        max-width: 300px;
        transform: translateX(-100%);
        transition: transform .2s ease-out;
        box-shadow: var(--shadow-md);
    }

    .sidebar-toggle:checked ~ .app-shell .app-sidebar {
        transform: translateX(0);
    }

    .sidebar-toggle:checked ~ .app-shell .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--color-overlay-soft);
        z-index: 30;
    }

    .app-content {
        padding: 1.1rem;
    }
}

@media (max-width: 640px) {
    body { font-size: 15px; }
    h1 { font-size: 1.7rem; }
    .info-grid { grid-template-columns: 1fr; }
    .info-grid dt { margin-top: .35rem; }
    .card { padding: 1rem; }
}

/* ------------------------------------------- Actions d'en-tête + thème */

.header-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    cursor: pointer;
}

.icon-btn:hover {
    background: var(--color-primary-soft);
}

.theme-icon-sun {
    display: none;
}

[data-theme="dark"] .theme-icon-sun {
    display: inline-flex;
}

[data-theme="dark"] .theme-icon-moon {
    display: none;
}

/* Repli de la sidebar (desktop) : elle se réduit à un rail d'icônes, avec animation.
   Préférence mémorisée par app.js (classe sidebar-collapsed sur <html>). */

@media (min-width: 1024px) {
    .sidebar-collapse-btn {
        display: inline-flex;
    }

    html.sidebar-collapsed .app-sidebar {
        width: var(--sidebar-rail-width);
    }

    /* Le bandeau passe en colonne : logo au-dessus, bouton de repli dessous. */
    html.sidebar-collapsed .sidebar-brand {
        flex-direction: column;
        justify-content: center;
        gap: .55rem;
        padding: .85rem .5rem;
    }

    /* Titre de la marque et libellés des liens : repliés à zéro et effacés en douceur. */
    html.sidebar-collapsed .sidebar-brand-text,
    html.sidebar-collapsed .sidebar-logo,
    html.sidebar-collapsed .sidebar-label {
        max-width: 0;
        opacity: 0;
    }

    html.sidebar-collapsed .sidebar-brand-link,
    html.sidebar-collapsed .sidebar-link,
    html.sidebar-collapsed .sidebar-user {
        justify-content: center;
        gap: 0;
        padding-left: 0;
        padding-right: 0;
    }

    html.sidebar-collapsed .sidebar-nav,
    html.sidebar-collapsed .sidebar-footer {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    /* La flèche indique le sens de l'action (déplier). */
    html.sidebar-collapsed .sidebar-collapse-btn .app-icon {
        transform: rotate(180deg);
    }
}

/* -------------------------------------------------------- Pagination */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
}

.pagination-info {
    font-size: .9rem;
    color: var(--color-muted);
}

.pagination-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: .2rem .7rem;
    border: 1px solid var(--color-button-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: .92rem;
}

.pagination-link:hover {
    background: var(--color-primary-soft);
    text-decoration: none;
}

.pagination-link.active {
    background: var(--color-input);
    border-color: var(--color-button-border);
    color: var(--color-primary);
}

.pagination-link.disabled {
    opacity: .45;
}

span.pagination-link.disabled {
    cursor: default;
}

/* Rangée d'actions en pied de carte (remplace les boutons empilés). */

.card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------- Barres de filtres */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    padding: .9rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.filters .field {
    min-width: 170px;
}

.filters-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-left: auto;
}

/* ------------------------------------------------------------ Impression */

@media print {
    .app-sidebar,
    .app-header,
    .sidebar-toggle,
    .sidebar-backdrop,
    .breadcrumb,
    .action-bar,
    .card-actions,
    .filters,
    .toolbar,
    .pagination,
    .page-actions,
    .toast,
    .modal,
    .modal-backdrop,
    #blazor-error-ui {
        display: none !important;
    }

    html,
    body {
        background: #fff !important;
        color: #000;
        font-size: 11pt;
    }

    .app-shell {
        display: block;
    }

    .app-content {
        padding: 0;
    }

    .card {
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0 0 1rem;
        break-inside: avoid;
    }

    .card-title {
        border-bottom: 1px solid #000;
    }

    .table-wrap {
        overflow: visible;
        border: none;
    }

    .data-table {
        font-size: 9pt;
    }

    .data-table th,
    .data-table td {
        padding: .25rem .35rem;
        border-color: #999;
    }

    .data-table thead th {
        background: #f0f0f0 !important;
        color: #000 !important;
    }

    a {
        color: #000;
        text-decoration: none;
    }

    /* Le reçu fiscal occupe la page tel quel. */
    .recu-document {
        border: 1px solid #000;
        background: #fff;
    }
}

/* ------------------------------------------------ Bandeau de progression */

.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}

.nav-progress-active {
    opacity: 1;
    transform: scaleX(0.85);
    transition: transform 4s cubic-bezier(.05, .8, .15, 1), opacity .1s ease;
}

.nav-progress-done {
    opacity: 1;
    transform: scaleX(1);
    transition: transform .18s ease-out;
}
.editable-fields {
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.feature-notice {
    padding: .65rem .85rem;
    border-inline-start: 3px solid var(--colbtnborder, rgb(233, 193, 129));
    background: var(--coltrame01);
    font-size: .9rem;
}

/* Contraintes intrinsèques des champs et en-têtes sur petits écrans. */
.card, .field, .editable-fields, .toolbar-field, .toolbar-field input { min-width: 0; }
.editable-fields { max-width: 100%; }
.field :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.app-header .module-header { flex: 1; }
.app-header .header-actions, .sidebar-toggle-btn { flex-shrink: 0; }
@media (max-width: 640px) {
    .app-content { padding: .75rem; }
    .app-header { align-items: flex-start; gap: .5rem; padding: .6rem .75rem; }
    .module-header { gap: .4rem; flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
    .submodule-nav { gap: .3rem; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: thin; padding-bottom: .2rem; }
    .submodule-link { flex-shrink: 0; min-height: 44px; padding: .3rem .65rem; }
    .card { padding: .85rem; }
    .page-actions { width: 100%; }
    .page-actions > .btn { flex: 0 1 auto; }
    .filters .field { flex: 1 1 100%; min-width: 0; }
    .filters-actions { margin-left: 0; width: 100%; }
    .modal { width: calc(100% - 1rem); padding: 1rem; max-height: 94dvh; top: 3dvh; }
    .pagination { align-items: flex-start; gap: .5rem; }
    .pagination-pages { flex-wrap: wrap; }
}
@media print {
    .table-wrap { container-type: normal; }
}

/* Matrices : synthèse adaptée à l'espace disponible, tableau intégral sur demande. */
.matrix-view { container: matrix-view / inline-size; min-width: 0; }
.matrix-cards, .matrix-mode-toggle, .matrix-mode-label { display: none; }
.matrix-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    min-width: 0;
    overflow-wrap: anywhere;
}
.matrix-card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.matrix-card-head h2 { margin: 0; font-size: 1.2rem; }
.matrix-dates, .matrix-routes { margin: .5rem 0; color: var(--color-ink-soft); }
.matrix-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: .9rem 0; }
.matrix-summary > div { padding: .65rem .75rem; border-radius: var(--radius-sm); background: var(--color-surface-alt); }
.matrix-summary dt { color: var(--color-muted); font-size: .85rem; }
.matrix-summary dd { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.matrix-details { border-top: 1px solid var(--color-border); margin-top: .65rem; }
.matrix-details > summary { cursor: pointer; min-height: 48px; padding: .75rem 0; color: var(--color-primary-dark); }
.matrix-function-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .9rem; margin: .25rem 0 .75rem; }
.matrix-function-grid > div { padding: .5rem 0; border-bottom: 1px solid var(--color-border); min-width: 0; }
.matrix-function-grid dt { color: var(--color-ink-soft); font-size: .85rem; }
.matrix-function-grid dd { display: flex; flex-wrap: wrap; gap: .25rem .65rem; margin: .2rem 0 0; font-weight: 700; }
.matrix-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.matrix-card-actions .btn { flex: 1 1 auto; min-height: 44px; }
.places-route-details > summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.places-route-details > summary::after { content: "+"; font-size: 1.15rem; }
.places-route-details[open] > summary::after { content: "−"; }
.places-route-details > summary > span { flex: 1; text-align: right; font-size: .85rem; }

@container matrix-view (max-width: 55rem) {
    .matrix-mode-toggle { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; opacity: 0; }
    .matrix-mode-label { display: inline-flex; min-height: 44px; margin-bottom: .85rem; cursor: pointer; }
    .matrix-mode-toggle:focus-visible + .matrix-mode-label { outline: 3px solid var(--color-primary); outline-offset: 2px; }
    .matrix-label-summary { display: none; }
    .matrix-cards { display: grid; gap: .75rem; }
    .matrix-view > .table-wrap { display: none; }
    .matrix-mode-toggle:checked ~ .matrix-cards { display: none; }
    .matrix-mode-toggle:checked ~ .table-wrap { display: block; }
    .matrix-mode-toggle:checked + .matrix-mode-label .matrix-label-full { display: none; }
    .matrix-mode-toggle:checked + .matrix-mode-label .matrix-label-summary { display: inline; }
}

/* Les matrices intégrales restent défilables dans leur propre région. */
.mission-matrix-wrap { max-height: min(70dvh, 48rem); overflow: auto; }
.mission-matrix { width: max-content; min-width: 100%; font-size: .9rem; }
.mission-matrix th, .mission-matrix td { padding: .5rem; }
.mission-matrix .team-cell { min-width: 2.75rem; }
.mission-matrix .row-link { min-height: 44px; }
.mission-matrix .mission-number, .places-matrix .places-route { box-shadow: 2px 0 0 var(--color-border); }
.table-wrap[data-scroll-x]::after {
    content: "↔ Faites défiler pour voir les autres colonnes";
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: block;
    width: 100%;
    padding: .55rem .7rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    color: var(--color-ink-soft);
    font-size: .8rem;
    text-align: center;
    white-space: normal;
}
.table-wrap[data-scroll-x]:not([data-scroll-end]) { border-right-color: var(--color-primary); }
@media print {
    .matrix-view { container-type: normal; }
    .matrix-cards, .matrix-mode-toggle, .matrix-mode-label, .table-wrap::after { display: none !important; }
    .matrix-view > .table-wrap { display: block !important; max-height: none; overflow: visible; }
}

@container table-region (max-width: 55rem) {
    .table-stack .table-row-actions { flex-wrap: wrap; }
    .table-stack .btn.table-action { margin: 0; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.table-stack .btn.table-action { min-height: 32px; }
@media (pointer: coarse) {
    .table-stack .btn.table-action { min-height: 44px; }
}

/* Referentiels et droits */
summary { cursor: pointer; }
.site-details > summary { padding: .25rem 0; }
.site-details[open] > summary { margin-bottom: 1rem; }
.access-list { display: grid; gap: .25rem; min-width: 18rem; }
.access-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .3rem .55rem; border-left: 3px solid currentColor; border-radius: .2rem; }
.access-row strong { white-space: nowrap; font-size: .8rem; }

.compta-details { min-width: 9rem; }
.compta-details dl { display: grid; gap: .35rem; margin: .6rem 0 0; }
.compta-details dl div { display: flex; justify-content: space-between; gap: 1rem; }
.compta-details dt { color: #596579; }
.compta-details dd { margin: 0; text-align: right; }

/* User accounts and permission details */
.users-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.5fr); gap: 1rem; align-items: start; }
.users-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.users-section-head h2 { margin: 0; }
.users-section-head p { margin: .35rem 0 0; }
.users-count, .users-admin { background: var(--color-surface-alt); color: var(--color-ink-soft); border-radius: .35rem; padding: .3rem .6rem; font-size: .8rem; font-weight: 700; }
.users-search { margin: 1rem 0; }
.users-rows { display: grid; gap: .3rem; max-height: 65vh; overflow-y: auto; }
.users-row { display: flex; align-items: center; gap: .25rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.users-row.is-selected { border-color: var(--color-primary); background: var(--color-surface-alt); box-shadow: inset 3px 0 0 var(--color-primary); }
.users-select { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: .7rem .85rem; cursor: pointer; color: var(--color-ink); display: grid; gap: .15rem; }
.users-select strong { overflow-wrap: anywhere; }
.users-select span, .users-select small { color: var(--color-ink-soft); font-size: .85rem; overflow-wrap: anywhere; }
.users-empty { padding: .75rem; }
.users-placeholder { padding: 2rem 0; color: var(--color-ink-soft); }
.users-eyebrow { font-size: .72rem; letter-spacing: .08em; font-weight: 700; color: var(--color-ink-soft); margin: 0 0 .35rem !important; }
.users-rights-help { margin: 1.25rem 0 .75rem; color: var(--color-ink-soft); }
.rights-table { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.rights-table-head, .rights-table-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 1fr); gap: 1rem; align-items: center; padding: .7rem 1rem; }
.rights-table-head { background: var(--color-surface-alt); color: var(--color-ink-soft); font-size: .8rem; font-weight: 700; }
.rights-table-row { border-top: 1px solid var(--color-border); }
.rights-table-row > strong { overflow-wrap: anywhere; }
.rights-level { border-radius: .35rem; padding: .25rem .5rem; font-weight: 600; }
.rights-level select { display: block; width: 100%; min-height: 40px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rights-level span { display: block; padding: .5rem .25rem; }
.users-rights-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
@media (max-width: 800px) { .users-layout { grid-template-columns: minmax(0, 1fr); } .users-rows { max-height: 18rem; } }
@media (max-width: 420px) { .rights-table-head, .rights-table-row { grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr); gap: .5rem; padding: .6rem; } }