/* ==========================================================================
   Concept Car — interface de gestion
   Thème Bootstrap 5.3 + composants du design system.
   Référence : docs/migration/DESIGN.md (tokens, structure, composants).
   Chargé après vendor/bootstrap/bootstrap.min.css et vendor/tom-select.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Couleurs de marque (alignées sur css/site-public.css) */
    --cc-ink: #0f172a;
    --cc-ink-2: #1e293b;
    --cc-text: #334155;
    --cc-muted: #64748b;
    --cc-muted-strong: #475569;
    --cc-subtle: #94a3b8;
    --cc-line: #e2e8f0;
    --cc-line-strong: #cbd5e1;
    --cc-soft: #f1f5f9;
    --cc-soft-2: #f8fafc;
    --cc-page: #f6f8fb;
    --cc-surface: #ffffff;

    --cc-accent: #e11d2a;
    --cc-accent-hover: #b3151f;
    --cc-accent-active: #9b111a;
    --cc-accent-soft: #fde8ea;
    --cc-accent-border: #f7b9be;
    --cc-accent-rgb: 225, 29, 42;

    --cc-dark: #0b1220;
    --cc-dark-2: #131c2e;
    --cc-dark-3: #1c2740;

    --cc-success: #16a34a;
    --cc-success-text: #166534;
    --cc-success-soft: #dcfce7;
    --cc-success-border: #bbf7d0;
    --cc-danger: #dc2626;
    --cc-danger-text: #b91c1c;
    --cc-danger-soft: #fee2e2;
    --cc-danger-border: #fecaca;
    --cc-warning: #d97706;
    --cc-warning-text: #92400e;
    --cc-warning-soft: #fef3c7;
    --cc-warning-border: #fde68a;
    --cc-info: #2563eb;
    --cc-info-text: #1e40af;
    --cc-info-soft: #dbeafe;
    --cc-info-border: #bfdbfe;

    /* Formes */
    --cc-radius: 14px;
    --cc-radius-sm: 10px;
    --cc-radius-xs: 8px;
    --cc-radius-pill: 999px;
    --cc-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --cc-shadow: 0 10px 30px -12px rgba(2, 6, 23, .25);
    --cc-shadow-lg: 0 24px 48px -16px rgba(2, 6, 23, .35);
    --cc-focus: 0 0 0 .2rem rgba(225, 29, 42, .22);

    /* Structure */
    --cc-sidebar-w: 264px;
    --cc-sidebar-w-compact: 76px;
    --cc-topbar-h: 60px;
    --cc-gutter: 1.5rem;

    --cc-font: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Thème Bootstrap */
    --bs-primary: #e11d2a;
    --bs-primary-rgb: 225, 29, 42;
    --bs-secondary: #64748b;
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: #16a34a;
    --bs-success-rgb: 22, 163, 74;
    --bs-info: #2563eb;
    --bs-info-rgb: 37, 99, 235;
    --bs-warning: #d97706;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger: #dc2626;
    --bs-danger-rgb: 220, 38, 38;
    --bs-light: #f1f5f9;
    --bs-light-rgb: 241, 245, 249;
    --bs-dark: #0f172a;
    --bs-dark-rgb: 15, 23, 42;

    --bs-primary-text-emphasis: #b3151f;
    --bs-primary-bg-subtle: #fde8ea;
    --bs-primary-border-subtle: #f7b9be;
    --bs-success-text-emphasis: #166534;
    --bs-success-bg-subtle: #dcfce7;
    --bs-success-border-subtle: #bbf7d0;
    --bs-danger-text-emphasis: #b91c1c;
    --bs-danger-bg-subtle: #fee2e2;
    --bs-danger-border-subtle: #fecaca;
    --bs-warning-text-emphasis: #92400e;
    --bs-warning-bg-subtle: #fef3c7;
    --bs-warning-border-subtle: #fde68a;
    --bs-info-text-emphasis: #1e40af;
    --bs-info-bg-subtle: #dbeafe;
    --bs-info-border-subtle: #bfdbfe;
    --bs-secondary-text-emphasis: #334155;
    --bs-secondary-bg-subtle: #f1f5f9;
    --bs-secondary-border-subtle: #e2e8f0;

    --bs-body-font-family: var(--cc-font);
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;
    --bs-body-color: #0f172a;
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: #f6f8fb;
    --bs-body-bg-rgb: 246, 248, 251;
    --bs-emphasis-color: #0f172a;
    --bs-heading-color: #0f172a;
    --bs-secondary-color: #64748b;
    --bs-secondary-bg: #f1f5f9;
    --bs-tertiary-color: #94a3b8;
    --bs-tertiary-bg: #f8fafc;
    --bs-border-color: #e2e8f0;
    --bs-border-color-translucent: rgba(15, 23, 42, .1);
    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: 18px;
    --bs-link-color: #0f172a;
    --bs-link-color-rgb: 15, 23, 42;
    --bs-link-hover-color: #b3151f;
    --bs-link-hover-color-rgb: 179, 21, 31;
    --bs-link-decoration: underline;
    --bs-focus-ring-color: rgba(225, 29, 42, .25);
    --bs-form-invalid-color: #b91c1c;
    --bs-form-invalid-border-color: #dc2626;
    --bs-form-valid-color: #166534;
    --bs-form-valid-border-color: #16a34a;
    --bs-code-color: #9b111a;
    --bs-box-shadow-sm: var(--cc-shadow-sm);
    --bs-box-shadow: var(--cc-shadow);
    --bs-box-shadow-lg: var(--cc-shadow-lg);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--cc-font);
    /* "calt" 0 : sans les alternatives contextuelles d'Inter, un « x » entre deux chiffres reste
       un « x » (« 4x4 », « 150x150 » s'affichaient « 4×4 » dans les données). */
    font-feature-settings: "cv11", "calt" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--cc-page);
    color: var(--cc-ink);
}
/* Les champs de formulaire n'héritent pas de font-feature-settings (valeur « 4x4 » d'une liste) */
button, input, optgroup, select, textarea {
    font-feature-settings: inherit;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--cc-ink);
}
h1, .h1 { font-size: 1.5rem; }
h2, .h2 { font-size: 1.25rem; }
h3, .h3 { font-size: 1.0625rem; }
h4, .h4 { font-size: .9375rem; }
h5, .h5, h6, .h6 { font-size: .875rem; }

a {
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(15, 23, 42, .28);
    text-underline-offset: .18em;
    transition: color .15s ease, text-decoration-color .15s ease;
}
a:hover {
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: 2px;
}

/* Conteneurs focalisés par programme (offcanvas, modale, zone de contenu) : pas de liseré. */
.offcanvas:focus,
.offcanvas-lg:focus,
.modal:focus,
dialog:focus,
.app-content:focus,
[tabindex="-1"]:focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: rgba(225, 29, 42, .16);
}

hr {
    border-color: var(--cc-line);
    opacity: 1;
}

small, .small { font-size: .8125rem; }
.text-muted, .text-secondary { color: var(--cc-muted) !important; }
.text-muted-strong { color: var(--cc-muted-strong) !important; }
.text-accent { color: var(--cc-accent) !important; }
.text-success { color: var(--cc-success-text) !important; }
.text-danger { color: var(--cc-danger-text) !important; }
.text-warning { color: var(--cc-warning-text) !important; }
.text-info { color: var(--cc-info-text) !important; }
.tabular, .cell-num { font-variant-numeric: tabular-nums; }
.fw-semibold { font-weight: 600 !important; }
.lh-tight { line-height: 1.25 !important; }
.min-w-0 { min-width: 0 !important; }

/* Icônes Bootstrap Icons dans le texte */
.bi {
    display: inline-block;
    line-height: 1;
    vertical-align: -.125em;
}
.icon-sm { font-size: .875rem; }
.icon-lg { font-size: 1.25rem; }
.icon-xl { font-size: 1.75rem; }

/* --------------------------------------------------------------------------
   3. Structure : barre latérale, barre supérieure, contenu
   -------------------------------------------------------------------------- */
.app-body {
    min-height: 100vh;
}

.app-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

@media (min-width: 992px) {
    .app-main {
        margin-left: var(--cc-sidebar-w);
        transition: margin-left .2s ease;
    }
}

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    z-index: 2000;
    padding: .6rem 1rem;
    border-radius: var(--cc-radius-sm);
    background: var(--cc-ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.skip-link:focus {
    top: 1rem;
    color: #fff;
}

/* ---- Barre latérale sombre -------------------------------------------------- */
.app-sidebar {
    --bs-offcanvas-width: 288px;
    --bs-offcanvas-bg: var(--cc-dark);
    --bs-offcanvas-color: #cbd5e1;
    --bs-offcanvas-border-width: 0;
    color: #cbd5e1;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1035;
        width: var(--cc-sidebar-w);
        transition: width .2s ease;
    }
}

.sidebar-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--cc-dark) 0%, #0d1628 100%);
    border-right: 1px solid rgba(148, 163, 184, .08);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1rem .875rem .75rem;
}

.sidebar-logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 48px;
    padding: .4rem .75rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .6);
    text-decoration: none;
}
.sidebar-logo img {
    display: block;
    max-width: 100%;
    height: 28px;
    width: auto;
}
.sidebar-mark {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    background: var(--cc-accent);
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    letter-spacing: .02em;
    text-decoration: none;
}

.sidebar-close {
    flex: none;
    color: #cbd5e1;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .5rem .75rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #334155 transparent;
}

.nav-list,
.nav-sub {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-section-label {
    padding: 1rem .75rem .4rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cc-subtle);
}

.nav-group + .nav-group,
.nav-list > li + li {
    margin-top: 2px;
}

.nav-row {
    display: flex;
    align-items: center;
    border-radius: var(--cc-radius-sm);
}

.nav-link-side {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    min-height: 40px;
    padding: .5rem .75rem;
    border-radius: var(--cc-radius-sm);
    color: #cbd5e1;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.nav-link-side:hover,
.nav-link-side:focus-visible {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}
.nav-link-side .nav-icon {
    flex: none;
    width: 1.25rem;
    font-size: 1.1rem;
    text-align: center;
    color: var(--cc-subtle);
    transition: color .15s ease;
}
.nav-link-side:hover .nav-icon {
    color: #fff;
}
.nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-ext {
    font-size: .75rem;
    color: #64748b;
}
.nav-link-side.active {
    background: rgba(225, 29, 42, .16);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--cc-accent);
}
.nav-link-side.active .nav-icon {
    color: #ff7a82;
}
.nav-group.is-open > .nav-row > .nav-link-side {
    color: #fff;
}
.nav-group.is-open > .nav-row > .nav-link-side .nav-icon {
    color: #e2e8f0;
}

.nav-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: .125rem;
    border: 0;
    border-radius: var(--cc-radius-xs);
    background: transparent;
    color: var(--cc-subtle);
}
.nav-toggle:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.nav-toggle .bi {
    font-size: .8rem;
    transition: transform .2s ease;
}
.nav-toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

.nav-sub {
    position: relative;
    padding: .125rem 0 .375rem 1.1rem;
}
.nav-sub::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: .25rem;
    bottom: .5rem;
    width: 1px;
    background: rgba(148, 163, 184, .18);
}
.nav-sub .nav-link-side {
    min-height: 34px;
    padding: .375rem .75rem .375rem 1.1rem;
    font-size: .8125rem;
    color: #b4c0d0;
}
.nav-sub .nav-link-side .nav-icon {
    font-size: .9rem;
}
.nav-sub .nav-link-side.active {
    background: rgba(255, 255, 255, .07);
    box-shadow: inset 2px 0 0 var(--cc-accent);
}
.nav-sub-title {
    display: none;
}

.sidebar-footer {
    padding: .75rem 1rem 1rem;
    border-top: 1px solid rgba(148, 163, 184, .1);
    font-size: .75rem;
    color: var(--cc-subtle);
}
.sidebar-footer a {
    color: #cbd5e1;
}

/* Mode compact (bureau) : icônes seules, sous-menus en panneau flottant */
@media (min-width: 992px) {
    .sidebar-compact {
        --cc-sidebar-w: var(--cc-sidebar-w-compact);
    }
    .sidebar-compact .sidebar-logo {
        display: none;
    }
    .sidebar-compact .sidebar-mark {
        display: inline-flex;
        margin: 0 auto;
    }
    .sidebar-compact .sidebar-panel,
    .sidebar-compact .sidebar-nav {
        overflow: visible;
    }
    .sidebar-compact .nav-section-label,
    .sidebar-compact .nav-toggle,
    .sidebar-compact .nav-ext,
    .sidebar-compact .sidebar-footer {
        display: none;
    }
    .sidebar-compact .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .sidebar-compact .nav-sub .nav-label {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
    }
    .sidebar-compact .nav-link-side {
        justify-content: center;
        padding: .6rem 0;
    }
    /* Page d'un sous-menu (Stock, Validées…) : le sous-menu étant masqué, c'est l'icône du groupe qui
       indique où l'on est. */
    .sidebar-compact .nav-group:has(.nav-sub .nav-link-side.active) > .nav-row > .nav-link-side {
        background: rgba(225, 29, 42, .16);
        box-shadow: inset 3px 0 0 var(--cc-accent);
    }
    .sidebar-compact .nav-group:has(.nav-sub .nav-link-side.active) > .nav-row > .nav-link-side .nav-icon {
        color: #ff7a82;
    }
    .sidebar-compact .nav-group {
        position: relative;
    }
    .sidebar-compact .nav-group > .nav-sub {
        display: none !important;
    }
    .sidebar-compact .nav-group:hover > .nav-sub,
    .sidebar-compact .nav-group:focus-within > .nav-sub {
        display: block !important;
        position: absolute;
        top: 0;
        left: calc(100% + .5rem);
        z-index: 1040;
        min-width: 230px;
        height: auto !important;
        padding: .375rem;
        border-radius: 12px;
        background: var(--cc-dark-2);
        border: 1px solid rgba(148, 163, 184, .14);
        box-shadow: var(--cc-shadow-lg);
    }
    .sidebar-compact .nav-group > .nav-sub::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -.75rem;
        width: .75rem;
        background: transparent;
    }
    .sidebar-compact .nav-sub .nav-link-side {
        justify-content: flex-start;
        padding: .45rem .75rem;
    }
    .sidebar-compact .nav-sub-title {
        display: block;
        padding: .4rem .75rem .35rem;
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--cc-subtle);
    }
}

/* ---- Barre supérieure claire ------------------------------------------------- */
.app-header {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--cc-line);
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: .75rem;
    height: var(--cc-topbar-h);
    padding: 0 var(--cc-gutter);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--cc-line);
}

.topbar-toggle {
    flex: none;
    --bs-btn-color: var(--cc-ink-2);
}
.topbar-toggle .bi {
    font-size: 1.2rem;
}

.topbar-crumbs {
    flex: 1;
    min-width: 0;
}

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

.breadcrumb {
    --bs-breadcrumb-margin-bottom: 0;
    --bs-breadcrumb-font-size: .8125rem;
    --bs-breadcrumb-divider-color: var(--cc-subtle);
    --bs-breadcrumb-item-padding-x: .45rem;
    --bs-breadcrumb-item-active-color: var(--cc-ink);
    --bs-breadcrumb-divider: '›';
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.breadcrumb-item {
    display: flex;
    align-items: center;
    min-width: 0;
}
/* La maison ne rétrécit jamais : un nom de fichier de 41 caractères la coupait en deux sur téléphone. */
.breadcrumb-item:first-child {
    flex: none;
}
.breadcrumb-item > a,
.breadcrumb-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.breadcrumb-item a {
    color: var(--cc-muted);
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: var(--cc-ink);
    text-decoration: underline;
}
.breadcrumb-item.active {
    font-weight: 600;
}
.breadcrumb-item .bi {
    margin-right: .3rem;
}
.breadcrumb-home .bi {
    margin-right: 0;
    font-size: .95rem;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cc-ink-2), var(--cc-ink));
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.avatar-sm {
    width: 28px;
    height: 28px;
    font-size: .6875rem;
}

.user-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .2rem .5rem .2rem .2rem;
    border: 1px solid transparent;
    border-radius: var(--cc-radius-pill);
    background: transparent;
    color: var(--cc-ink);
    font-weight: 600;
}
.user-menu-toggle:hover,
.user-menu-toggle[aria-expanded="true"] {
    background: var(--cc-soft);
    border-color: var(--cc-line);
}
.user-menu-toggle .bi-chevron-down {
    font-size: .7rem;
    color: var(--cc-muted);
}
.user-menu-name {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-menu-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .75rem .75rem;
    border-bottom: 1px solid var(--cc-line);
    margin-bottom: .375rem;
}
.user-menu-header strong {
    display: block;
    line-height: 1.25;
}
.user-menu-header span {
    display: block;
    font-size: .75rem;
    color: var(--cc-muted);
}

/* ---- En-tête de page : titre, statut, actions --------------------------------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: 1.25rem var(--cc-gutter) 1.125rem;
}
.page-heading {
    min-width: 0;
}
.page-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
}
.page-title {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 750;
    letter-spacing: -.02em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.page-status {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.page-subtitle {
    margin: .3rem 0 0;
    color: var(--cc-muted);
    font-size: .875rem;
}
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.page-actions .btn-icon {
    --cc-icon-btn: 36px;
}
.page-actions-sep {
    width: 1px;
    height: 24px;
    background: var(--cc-line);
    margin: 0 .125rem;
}

/* ---- Contenu ------------------------------------------------------------------ */
.app-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
    max-width: 1680px;
    padding: 1.25rem var(--cc-gutter) 2rem;
}
.app-content > * {
    margin-bottom: 0;
}
.flash-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.flash-stack:empty {
    display: none;
}

.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding: 1rem var(--cc-gutter) 1.5rem;
    font-size: .75rem;
    color: var(--cc-muted-strong);
}
.app-footer a {
    color: inherit;
}

@media (max-width: 1279.98px) {
    :root {
        --cc-gutter: 1rem;
    }
}

@media (max-width: 575.98px) {
    /* Fil d'Ariane compact sur téléphone (l'ancien fil restait affiché sur mobile) : accueil,
       page parente et page courante ; les autres miettes sont masquées. */
    .app-topbar .breadcrumb-item:not(.breadcrumb-home):not(:nth-last-child(-n+2)) {
        display: none;
    }
    .app-topbar .breadcrumb {
        --bs-breadcrumb-item-padding-x: .3rem;
    }
    /* La page parente, souvent un numéro, n'est pas tronquée au profit de la page courante (« 301: »
       pour la voiture 3012, devant « Annexe vente parti… »). */
    .app-topbar .breadcrumb-item:nth-last-child(2):not(.breadcrumb-home) {
        flex: none;
        max-width: 45%;
    }
    .page-header {
        padding-top: 1rem;
        align-items: stretch;
    }
    .page-title {
        font-size: 1.2rem;
    }
    .page-actions {
        width: 100%;
    }
}

/* Grilles de mise en page */
.grid-2,
.grid-3,
.grid-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
/* La barre latérale occupe 264px : la colonne principale d'une grid-sidebar ou d'une
   grid-3 n'a assez de place qu'à partir de 1280px de fenêtre. */
@media (min-width: 992px) {
    .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-sidebar { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
}
.stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .45rem;
    --bs-btn-padding-x: .9rem;
    --bs-btn-line-height: 1.25;
    --bs-btn-border-radius: var(--cc-radius-sm);
    --bs-btn-focus-box-shadow: var(--cc-focus);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    white-space: nowrap;
}
.btn .bi {
    font-size: 1.05em;
}
.btn-sm {
    --bs-btn-padding-y: .3rem;
    --bs-btn-padding-x: .65rem;
    --bs-btn-font-size: .8125rem;
    --bs-btn-border-radius: var(--cc-radius-xs);
    gap: .35rem;
}
.btn-lg {
    --bs-btn-padding-y: .65rem;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-font-size: .9375rem;
    --bs-btn-border-radius: 12px;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e11d2a;
    --bs-btn-border-color: #e11d2a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b3151f;
    --bs-btn-hover-border-color: #b3151f;
    --bs-btn-focus-shadow-rgb: 225, 29, 42;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9b111a;
    --bs-btn-active-border-color: #9b111a;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e11d2a;
    --bs-btn-disabled-border-color: #e11d2a;
    box-shadow: 0 1px 2px rgba(225, 29, 42, .25), 0 6px 14px -8px rgba(225, 29, 42, .55);
}
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0f172a;
    --bs-btn-border-color: #0f172a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1e293b;
    --bs-btn-hover-border-color: #1e293b;
    --bs-btn-active-bg: #020617;
    --bs-btn-active-border-color: #020617;
    --bs-btn-disabled-bg: #0f172a;
    --bs-btn-disabled-border-color: #0f172a;
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #475569;
    --bs-btn-border-color: #475569;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-border-color: #334155;
    --bs-btn-active-bg: #1e293b;
    --bs-btn-active-border-color: #1e293b;
    --bs-btn-disabled-bg: #475569;
    --bs-btn-disabled-border-color: #475569;
}
.btn-light {
    --bs-btn-color: #0f172a;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #94a3b8;
    --bs-btn-disabled-color: #64748b;
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #e2e8f0;
    box-shadow: var(--cc-shadow-sm);
}
.btn-outline-secondary {
    --bs-btn-color: #334155;
    --bs-btn-border-color: #cbd5e1;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #f1f5f9;
    --bs-btn-hover-border-color: #94a3b8;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: #94a3b8;
}
.btn-outline-primary {
    --bs-btn-color: #b3151f;
    --bs-btn-border-color: #f7b9be;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e11d2a;
    --bs-btn-hover-border-color: #e11d2a;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b3151f;
    --bs-btn-active-border-color: #b3151f;
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #16a34a;
    --bs-btn-border-color: #16a34a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #166534;
    --bs-btn-active-border-color: #166534;
    --bs-btn-disabled-bg: #16a34a;
    --bs-btn-disabled-border-color: #16a34a;
}
.btn-outline-success {
    --bs-btn-color: #166534;
    --bs-btn-border-color: #bbf7d0;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #16a34a;
    --bs-btn-hover-border-color: #16a34a;
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc2626;
    --bs-btn-border-color: #dc2626;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-bg: #991b1b;
    --bs-btn-active-border-color: #991b1b;
    --bs-btn-disabled-bg: #dc2626;
    --bs-btn-disabled-border-color: #dc2626;
}
.btn-outline-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-border-color: #fecaca;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc2626;
    --bs-btn-hover-border-color: #dc2626;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
}
.btn-ghost {
    --bs-btn-color: #475569;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #0f172a;
    --bs-btn-hover-bg: #eef2f7;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #0f172a;
    --bs-btn-active-bg: #e2e8f0;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #94a3b8;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}
.btn-ghost-danger {
    --bs-btn-color: #b91c1c;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #991b1b;
    --bs-btn-hover-bg: #fee2e2;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #991b1b;
    --bs-btn-active-bg: #fecaca;
    --bs-btn-active-border-color: transparent;
}
.btn-ghost-primary {
    --bs-btn-color: #b3151f;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #9b111a;
    --bs-btn-hover-bg: #fde8ea;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: #fbd0d4;
    --bs-btn-active-border-color: transparent;
}
.btn-ghost-success {
    --bs-btn-color: #166534;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #14532d;
    --bs-btn-hover-bg: #dcfce7;
    --bs-btn-hover-border-color: transparent;
}

/* Bouton icône seule (toujours avec title + aria-label, cf. Ui->iconButton) */
.btn-icon {
    --cc-icon-btn: 36px;
    gap: 0;
    flex: none;
    width: var(--cc-icon-btn);
    height: var(--cc-icon-btn);
    padding: 0;
}
.btn-icon .bi {
    font-size: 1rem;
}
.btn-icon-sm {
    --cc-icon-btn: 32px;
    --bs-btn-border-radius: var(--cc-radius-xs);
}
.btn-icon-xs {
    --cc-icon-btn: 28px;
    --bs-btn-border-radius: 7px;
}
.btn-icon-xs .bi {
    font-size: .875rem;
}

.btn-toolbar-group,
.actions-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .125rem;
}

/* Écran tactile étroit : cibles d'au moins 40 px (36 px pour les petits boutons), au lieu de 26 à 34 px. */
@media (max-width: 767.98px) {
    .btn {
        min-height: 2.5rem;
    }
    .btn-sm {
        min-height: 2.25rem;
    }
    .btn-icon,
    .btn-icon-sm,
    .btn-icon-xs {
        --cc-icon-btn: 40px;
    }
    .breadcrumb-item > a {
        display: inline-flex;
        align-items: center;
        min-height: 2.5rem;
    }
    .form-switch .form-check-input {
        width: 2.75rem;
        height: 1.5rem;
    }
    .form-switch .form-check-label {
        padding-block: .15rem;
    }
}
/* Grille des annexes sur téléphone : tient dans la largeur (11 px de trop sur l'annexe 29, à cause
   des marges intérieures de la carte et des en-têtes d'état). */
@media (max-width: 575.98px) {
    .card > .table-responsive > .table.annex-table > :not(caption) > tr > :first-child,
    .card > .collapse > .table-responsive > .table.annex-table > :not(caption) > tr > :first-child {
        padding-left: .75rem;
    }
    .card > .table-responsive > .table.annex-table > thead > tr > :last-child,
    .card > .collapse > .table-responsive > .table.annex-table > thead > tr > :last-child {
        padding-right: .25rem;
    }
    .table.annex-table > thead > tr > th.annex-status-col {
        width: 3.25rem;
        padding-left: .25rem;
        padding-right: .25rem;
    }
}
@media (max-width: 379.98px) {
    /* 360 px (téléphones Android courants) : 6 px de trop dans chaque grille, autour du numéro. */
    .card > .table-responsive > .table.annex-table > :not(caption) > tr > :first-child,
    .card > .collapse > .table-responsive > .table.annex-table > :not(caption) > tr > :first-child {
        padding-left: .5rem;
        padding-right: .25rem;
    }
}

/* --------------------------------------------------------------------------
   5. Cartes
   -------------------------------------------------------------------------- */
.card {
    --bs-card-spacer-y: 1.125rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-title-spacer-y: 0;
    --bs-card-border-color: var(--cc-line);
    --bs-card-border-radius: var(--cc-radius);
    --bs-card-inner-border-radius: calc(var(--cc-radius) - 1px);
    --bs-card-cap-padding-y: .875rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-bg: transparent;
    --bs-card-bg: #fff;
    box-shadow: var(--cc-shadow-sm);
}
.card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    border-bottom-color: var(--cc-line);
}
.card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.35;
}
.card-title > .bi {
    color: var(--cc-muted);
}
.card-subtitle {
    margin: .15rem 0 0;
    font-size: .8125rem;
    color: var(--cc-muted);
}
.card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
}
.card-footer {
    background: var(--cc-soft-2);
    border-top-color: var(--cc-line);
}
.card-table {
    overflow: hidden;
}
.card-body > :last-child {
    margin-bottom: 0;
}
.card-section-title {
    margin: 0 0 .75rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cc-muted);
}
/* Intertitre placé juste sous une liste de propriétés (fiche Logs : Old Value / New Value) */
.props + .card-section-title,
.section-text + .card-section-title {
    margin-top: 1.25rem;
}

/* Carte repliable (panneau de filtres, sections de fiche) */
.collapse-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cc-ink);
    font-size: .9375rem;
    font-weight: 650;
    text-align: left;
}
.collapse-toggle > .bi:first-child {
    color: var(--cc-muted);
}
.collapse-chevron {
    margin-left: auto;
    color: var(--cc-muted);
    font-size: .8rem;
    transition: transform .2s ease;
}
.collapse-toggle[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
}
.card-collapsible > .card-header {
    padding: 0;
}
.card-collapsible > .card-header > .collapse-toggle {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    border-radius: var(--bs-card-inner-border-radius);
}
.card-collapsible > .card-header > .collapse-toggle[aria-expanded="false"] {
    border-radius: var(--bs-card-inner-border-radius);
}
.card-collapsible > .card-header:has(> .collapse-toggle[aria-expanded="false"]) {
    border-bottom-color: transparent;
}

/* Panneau de filtres des listes (bloc 'filters') */
.filters-card .filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 .4rem;
    border-radius: var(--cc-radius-pill);
    background: var(--cc-accent);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
}
.filters-card .card-body {
    padding-top: 1rem;
}
.filters-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--cc-line);
}
.filters-actions .filters-hint {
    margin-right: auto;
    color: var(--cc-muted);
    font-size: .8125rem;
}

/* --------------------------------------------------------------------------
   6. Tableaux
   -------------------------------------------------------------------------- */
.table {
    --bs-table-color: var(--cc-ink);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--cc-line);
    --bs-table-striped-bg: #fafbfd;
    --bs-table-hover-bg: #f3f6fa;
    --bs-table-hover-color: var(--cc-ink);
    --bs-table-active-bg: #eef2f7;
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * {
    padding: .6rem .75rem;
}
.table > thead > tr > th,
.table > thead > tr > td {
    background: var(--cc-soft-2);
    color: var(--cc-muted);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom-color: var(--cc-line);
}
.table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}
.table > tfoot > tr > * {
    background: var(--cc-soft-2);
    font-weight: 650;
    border-top: 1px solid var(--cc-line);
    border-bottom-width: 0;
}
.table-list > tbody > tr > td {
    vertical-align: middle;
}
.table-top > tbody > tr > td {
    vertical-align: top;
}
.table-sm > :not(caption) > * > * {
    padding: .4rem .6rem;
}
.card > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .collapse > .table-responsive > .table > :not(caption) > tr > :first-child,
.card > .table > :not(caption) > tr > :first-child {
    padding-left: 1.25rem;
}
.card > .table-responsive > .table > :not(caption) > tr > :last-child,
.card > .collapse > .table-responsive > .table > :not(caption) > tr > :last-child,
.card > .table > :not(caption) > tr > :last-child {
    padding-right: 1.25rem;
}
/* Contient les éléments en position absolue du tableau (.visually-hidden des en-têtes « Actions ») :
   sinon ils sortent de la zone de défilement et, sur téléphone, élargissent toute la page. */
.table-responsive {
    position: relative;
}

/* Tri (Paginator->sort) */
.table thead a.sort {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: inherit;
    text-decoration: none;
}
.table thead a.sort:hover {
    color: var(--cc-ink);
}
.sort-icon {
    font-size: .7rem;
    opacity: .5;
}
a.sort.asc .sort-icon,
a.sort.desc .sort-icon {
    opacity: 1;
    color: var(--cc-accent);
}
a.sort.asc,
a.sort.desc {
    color: var(--cc-ink) !important;
}

/* Lignes cliquables (tr[data-href], cf. app.js) */
.table > tbody > tr[data-href] {
    cursor: pointer;
}
.table > tbody > tr[data-href]:hover > * {
    --bs-table-bg-state: var(--bs-table-hover-bg);
}
.table > tbody > tr[data-href]:focus-visible {
    outline: 2px solid var(--cc-accent);
    outline-offset: -2px;
}
.table > tbody > tr.is-muted > * {
    color: var(--cc-muted);
}

/* Cellules */
.cell-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.cell-num {
    text-align: right;
    white-space: nowrap;
}
.cell-nowrap {
    white-space: nowrap;
}
.cell-title {
    font-weight: 600;
}
.cell-sub {
    display: block;
    font-size: .8125rem;
    color: var(--cc-muted);
}
.cell-thumb img {
    width: 56px;
    height: 42px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--cc-line);
}
.cell-thumb img[src*="img/icons/"] {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 4px;
    object-fit: contain;
}
.cell-vehicle + .cell-vehicle {
    margin-top: .5rem;
}
.cell-switch {
    width: 1%;
}
.cell-switch .form-check {
    margin: 0;
    min-height: 0;
}

/* Tableau à première colonne figée sur mobile (remplace responsive-tables) */
@media (max-width: 767.98px) {
    .table-sticky-first > :not(caption) > tr > :first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 1px 0 0 var(--cc-line);
    }
    .table-sticky-first > thead > tr > :first-child,
    .table-sticky-first > tfoot > tr > :first-child {
        background-color: var(--cc-soft-2);
    }
}

/* Sur téléphone, un tableau plus large que l'écran défile horizontalement : l'état vide (cellule
   fusionnée sur toute la largeur du tableau) reste centré dans la partie visible, et le total
   d'une liste (tfoot.table-sum) s'affiche sous le tableau (.list-sum) au lieu d'un pied de
   tableau dont le montant sortait de l'écran. */
.list-sum {
    display: none;
}
@media (max-width: 767.98px) {
    .table-responsive {
        container-type: inline-size;
    }
    .table-responsive td > .empty-state {
        position: sticky;
        left: 1.25rem;
        width: calc(100cqi - 2.5rem);
    }
    .table > tfoot.table-sum {
        display: none;
    }
    .list-sum {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: .25rem 1rem;
        padding: .75rem 1.25rem;
        border-top: 1px solid var(--cc-line);
        background: var(--cc-soft-2);
        font-weight: 650;
    }
}

/* Écran moyen (petit portable, tablette, fenêtre réduite) : les titres de colonnes peuvent passer
   à la ligne (« Prix unitaire » réservait 129 px au-dessus de nombres de 40 px). */
@media (min-width: 576px) and (max-width: 1279.98px) {
    .table > thead > tr > th {
        white-space: normal;
    }
    .table-list {
        font-size: .8125rem;
    }
    .table-list .cell-sub {
        font-size: .75rem;
    }
    .table-list > :not(caption) > * > * {
        padding-left: .4rem;
        padding-right: .4rem;
    }
    .card > .table-responsive > .table-list > :not(caption) > tr > :first-child,
    .card > .collapse > .table-responsive > .table-list > :not(caption) > tr > :first-child {
        padding-left: .75rem;
    }
    .card > .table-responsive > .table-list > :not(caption) > tr > :last-child,
    .card > .collapse > .table-responsive > .table-list > :not(caption) > tr > :last-child {
        padding-right: .75rem;
    }
    .table .status-badge {
        font-size: .6875rem;
    }
}

/* Statut dans un tableau : sur deux lignes plutôt qu'une colonne de 250 px qui écrasait le contact
   et le véhicule (« Envoyée, en attente de paiement »). */
.table .status-badge {
    width: max-content;
    max-width: 10.5rem;
    border-radius: .7rem;
    white-space: normal;
}
@media (min-width: 576px) and (max-width: 1279.98px) {
    .table .status-badge {
        max-width: 9rem;
    }
}
@media (max-width: 575.98px) {
    .table .status-badge {
        max-width: 100%;
    }
}

/* Tableau plus large que sa carte (classe posée par app.js) : la colonne d'actions reste visible à
   droite et son ombre signale qu'il y a du contenu à faire défiler. */
@media (min-width: 576px) {
    .table-responsive.has-overflow > .table > :not(caption) > tr > .cell-actions {
        position: sticky;
        right: 0;
        z-index: 1;
    }
    .table-responsive.has-overflow > .table > tbody > tr > .cell-actions {
        background-color: #fff;
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, transparent), -1px 0 0 var(--cc-line), -8px 0 8px -8px rgba(15, 23, 42, .22);
    }
    .table-responsive.has-overflow > .table > thead > tr > .cell-actions {
        box-shadow: -1px 0 0 var(--cc-line), -8px 0 8px -8px rgba(15, 23, 42, .22);
    }
}

/* Très longue liste dans une fiche (contact 4 : 510 factures, 16 000 px avant les fichiers liés) :
   la liste défile dans sa carte, en-têtes visibles. Toutes les lignes restent présentes. */
.table-scroll-y {
    max-height: min(36rem, 75vh);
    overflow-y: auto;
}
.table-scroll-y > .table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Téléphone : chaque ligne de liste devient une fiche (libellé / valeur), sans défilement horizontal.
   Les libellés viennent des en-têtes (data-label, posé par app.js) ; les liens de tri restent
   disponibles dans une barre au-dessus de la liste. Les cartes .annex-table gardent leur tableau. */
@media (max-width: 575.98px) {
    .table-list:not(.annex-table),
    .table-list:not(.annex-table) > tbody,
    .table-list:not(.annex-table) > tfoot:not(.table-sum) {
        display: block;
        width: 100%;
    }
    .table-list:not(.annex-table) > thead {
        display: block;
    }
    .table-list:not(.annex-table) > thead:not(:has(a.sort)) {
        display: none;
    }
    /* Liens de tri sur une seule ligne défilante : sur quatre rangées, ils repoussaient la première
       voiture de 180 px à chaque page. */
    .table-list:not(.annex-table) > thead > tr {
        display: flex;
        flex-wrap: nowrap;
        gap: .375rem .5rem;
        padding: .625rem 1.25rem;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 1px solid var(--cc-line);
        background: var(--cc-soft-2);
    }
    .table-list:not(.annex-table) > thead > tr::-webkit-scrollbar {
        display: none;
    }
    .table-list:not(.annex-table) > thead > tr > th {
        display: block;
        flex: none;
        position: static;
        padding: 0 !important;
        border: 0;
        background: none;
        box-shadow: none;
        white-space: nowrap;
    }
    .table-list:not(.annex-table) > thead > tr > th:not(:has(a.sort)) {
        display: none;
    }
    .table-list:not(.annex-table) > thead a.sort {
        display: inline-flex;
        align-items: center;
        min-height: 2.25rem;
        padding: 0 .55rem;
        border: 1px solid var(--cc-line);
        border-radius: var(--cc-radius-xs);
        background: #fff;
    }
    .table-list:not(.annex-table) > tbody > tr {
        display: block;
        position: relative;
        padding: .75rem 1.25rem;
        border-bottom: 1px solid var(--cc-line);
    }
    .table-list:not(.annex-table) > tbody > tr:last-child {
        border-bottom: 0;
    }
    .table-list:not(.annex-table) > tbody > tr[data-href]:hover {
        background: var(--bs-table-hover-bg);
    }
    .table-list:not(.annex-table) > tbody > tr > td {
        display: block;
        position: static;
        min-height: 1.5rem;
        padding: .2rem 0 !important;
        border: 0;
        background-color: transparent;
        box-shadow: none;
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* À 360 px (téléphones Android courants), le numéro de châssis en une seule ligne était coupé. */
    .table-list:not(.annex-table) > tbody > tr > td .cell-sub.text-nowrap {
        white-space: normal !important;
    }
    .table-list:not(.annex-table) > tbody > tr > td[data-label] {
        position: relative;
        padding-left: 6.75rem !important;
    }
    .table-list:not(.annex-table) > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        top: .3rem;
        left: 0;
        width: 6rem;
        color: var(--cc-muted);
        font-size: .75rem;
        font-weight: 500;
        line-height: 1.25;
        overflow-wrap: normal;
    }
    .table-list:not(.annex-table) > tbody > tr > td.cell-blank {
        display: none;
    }
    .table-list:not(.annex-table) > tbody > tr > td.cell-actions {
        position: absolute;
        top: .4rem;
        right: .75rem;
        width: auto;
        min-height: 0;
        padding: 0 !important;
    }
    .table-list:not(.annex-table) > tbody > tr > td.cell-actions:empty,
    .table-list:not(.annex-table) > tbody > tr > td.cell-actions.cell-blank {
        display: none;
    }
    /* Pied de tableau (totaux d'une facture) : valeurs à la suite, libellées par colonne. */
    .table-list:not(.annex-table) > tfoot:not(.table-sum) > tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: .25rem 1.25rem;
        padding: .6rem 1.25rem;
        border-top: 1px solid var(--cc-line);
        background: var(--cc-soft-2);
    }
    .table-list:not(.annex-table) > tfoot:not(.table-sum) > tr > * {
        display: block;
        position: static;
        padding: 0 !important;
        border: 0;
        background: none;
        box-shadow: none;
        text-align: left;
        white-space: normal;
    }
    .table-list:not(.annex-table) > tfoot:not(.table-sum) > tr > :empty {
        display: none;
    }
    .table-list:not(.annex-table) > tfoot:not(.table-sum) > tr > [data-label]::before {
        content: attr(data-label) " : ";
        color: var(--cc-muted);
        font-size: .75rem;
        font-weight: 500;
    }
}

/* Pied de liste : compteur + pagination */
.list-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--cc-line);
    background: var(--cc-soft-2);
}
.list-footer:only-child {
    border-top: 0;
}
/* Pagination aussi en tête de liste, comme l'ancienne interface : une page réelle de voitures fait
   2 000 px, 8 000 sur téléphone, et le pied n'est jamais visible à l'arrivée. */
.list-top {
    padding-block: .5rem;
    border-top: 0;
    border-bottom: 1px solid var(--cc-line);
    background: var(--cc-surface);
}
@media (max-width: 767.98px) {
    .list-top .list-counter {
        display: none;
    }
}
@media (max-width: 575.98px) {
    /* Une seule ligne sur téléphone : précédente, première, courante, dernière, suivante. Tous les
       numéros restent au pied de la liste. */
    .list-top .page-item:not(.active):not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)):not(:last-child) {
        display: none;
    }
}
.list-counter {
    color: var(--cc-muted-strong);
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}
.paginator-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.pagination {
    --bs-pagination-padding-x: .65rem;
    --bs-pagination-padding-y: .3rem;
    --bs-pagination-font-size: .8125rem;
    --bs-pagination-color: var(--cc-ink);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--cc-line);
    --bs-pagination-border-radius: var(--cc-radius-xs);
    --bs-pagination-hover-color: var(--cc-ink);
    --bs-pagination-hover-bg: var(--cc-soft);
    --bs-pagination-hover-border-color: var(--cc-line-strong);
    --bs-pagination-focus-color: var(--cc-ink);
    --bs-pagination-focus-bg: var(--cc-soft);
    --bs-pagination-focus-box-shadow: var(--cc-focus);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--cc-accent);
    --bs-pagination-active-border-color: var(--cc-accent);
    --bs-pagination-disabled-color: var(--cc-subtle);
    --bs-pagination-disabled-bg: #fff;
    --bs-pagination-disabled-border-color: var(--cc-line);
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
}
.pagination .page-link {
    min-width: 32px;
    border-radius: var(--cc-radius-xs) !important;
    margin-left: 0 !important;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
}
@media (max-width: 767.98px) {
    .pagination {
        justify-content: center;
        gap: .1875rem;
    }
    .pagination .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        min-height: 40px;
        padding-inline: .35rem;
    }
    .paginator-bar {
        justify-content: center;
    }
    .list-counter {
        width: 100%;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   7. Formulaires
   -------------------------------------------------------------------------- */
.form-label {
    margin-bottom: .35rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cc-ink-2);
}
.field.required > .form-label::after,
.field.required > .choices > .form-label::after {
    content: " *";
    color: var(--cc-accent);
    font-weight: 700;
}

.form-control,
.form-select {
    min-height: 38px;
    padding: .45rem .75rem;
    font-size: .875rem;
    line-height: 1.45;
    color: var(--cc-ink);
    background-color: #fff;
    border-color: var(--cc-line-strong);
    border-radius: var(--cc-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-select {
    padding-right: 2.25rem;
    background-position: right .75rem center;
}
.form-select[multiple] {
    padding-right: .75rem;
}
.form-control:hover,
.form-select:hover {
    border-color: var(--cc-subtle);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--cc-accent);
    box-shadow: var(--cc-focus);
}
.form-control::placeholder {
    color: var(--cc-subtle);
}
.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--cc-soft-2);
    color: var(--cc-muted-strong);
}
.form-control-sm,
.form-select-sm {
    min-height: 32px;
    padding-top: .3rem;
    padding-bottom: .3rem;
    font-size: .8125rem;
    border-radius: var(--cc-radius-xs);
}
textarea.form-control {
    min-height: 96px;
}
.form-control[type="file"] {
    padding: .35rem .5rem;
}
.form-control::file-selector-button {
    margin: -.35rem .75rem -.35rem -.5rem;
    padding: .45rem .75rem;
    border-radius: 0;
    background: var(--cc-soft);
    color: var(--cc-ink);
    font-weight: 600;
}

.form-check {
    min-height: 1.4rem;
    padding-left: 1.65em;
}
.form-check .form-check-input {
    margin-left: -1.65em;
}
.form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: .2em;
    border-color: var(--cc-subtle);
}
.form-check-input:checked {
    background-color: var(--cc-accent);
    border-color: var(--cc-accent);
}
.form-check-input:focus {
    border-color: var(--cc-accent);
    box-shadow: var(--cc-focus);
}
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--cc-accent);
    border-color: var(--cc-accent);
}
.form-check-label {
    cursor: pointer;
}
.form-switch {
    padding-left: 2.75em;
}
.form-switch .form-check-input {
    width: 2.2em;
    height: 1.2em;
    margin-left: -2.75em;
    margin-top: .12em;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f08a92'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    /* « Actif » : vert, pas le rouge réservé à l'action principale et au danger (règle d'or 7). Rouge,
       il se confondait avec la corbeille sur chaque ligne de la liste des contacts. */
    background-color: var(--cc-success);
    border-color: var(--cc-success);
}
.form-switch-only {
    display: inline-flex;
    padding-left: 0;
    margin: 0;
    min-height: 0;
}
.form-switch-only .form-check-input {
    margin: 0;
}
.form-switch .form-check-input.is-saving {
    opacity: .6;
    cursor: progress;
}

.form-text {
    margin-top: .3rem;
    font-size: .78rem;
    color: var(--cc-muted);
}
.invalid-feedback {
    font-size: .78rem;
    font-weight: 500;
    color: var(--cc-danger-text);
}
.has-error > .invalid-feedback,
.has-error .invalid-feedback {
    display: block;
}
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: var(--cc-danger);
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .2);
}

.input-group-text {
    background: var(--cc-soft);
    border-color: var(--cc-line-strong);
    color: var(--cc-muted-strong);
    font-size: .875rem;
}
.input-group > .form-control,
.input-group > .form-select {
    min-height: 38px;
}

/* Grille de formulaire : 1 colonne sur mobile, 2 sur bureau */
.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 1.25rem;
    align-items: start;
}
@media (min-width: 768px) {
    .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.form-grid-1 { grid-template-columns: minmax(0, 1fr) !important; }
.form-grid-filters {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)) !important;
    gap: .75rem 1rem;
}
/* Le filet de la liste des voitures isolait « Calculer valeur totale » sur une rangée de plus. */
.form-grid-filters > hr {
    display: none;
}
/* Colonnes de 230 px sur tablette : « --- Veuillez sélectionner --- » tient sur une ligne, sinon la
   liste de contacts passait à deux lignes et les listes natives étaient coupées. */
@media (min-width: 576px) and (max-width: 991.98px) {
    .form-grid-filters .form-control,
    .form-grid-filters .form-select,
    .form-grid-filters .ts-wrapper .ts-control,
    .form-grid-filters .ts-wrapper .ts-control input {
        font-size: .8125rem;
    }
    .form-grid-filters .form-select {
        padding-right: 1.75rem;
        background-position: right .5rem center;
    }
}
.form-grid-filters .ts-wrapper.single .ts-control {
    flex-wrap: nowrap;
}
.form-grid-filters .ts-wrapper.single .ts-control > .item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-grid > .field-wide,
.form-grid > .field.textarea,
.form-grid > .field-choices,
.form-grid > fieldset,
.form-grid > .form-grid-full,
.form-grid > hr {
    grid-column: 1 / -1;
}
.form-grid > hr {
    margin: .25rem 0;
}
.field {
    min-width: 0;
}
.field-check {
    align-self: end;
    padding-bottom: .55rem;
}
.form-grid-filters .field-check {
    padding-bottom: .45rem;
}
.choices {
    margin: 0;
    padding: 0;
    border: 0;
}
.choices legend {
    float: none;
}
.choices .form-check {
    margin-bottom: .25rem;
}
.field-choices > .form-check {
    margin-bottom: .25rem;
}
.field-inline-choices .form-check,
.field-choices.inline .form-check {
    display: inline-block;
    margin-right: 1.25rem;
}

.form-section {
    border: 0;
    margin: 0;
    padding: 0;
}
.form-section-title {
    float: none;
    margin: 0 0 .75rem;
    font-size: .9375rem;
    font-weight: 650;
}
.form-section-desc {
    margin: -.4rem 0 1rem;
    font-size: .8125rem;
    color: var(--cc-muted);
}

/* Pied de formulaire */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}
.form-actions .form-actions-start {
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.form-actions-bar {
    position: sticky;
    bottom: .75rem;
    z-index: 10;
    padding: .75rem 1rem;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--cc-shadow);
}

/* Tom Select (remplace Chosen) */
.ts-wrapper.form-select,
.ts-wrapper.form-control {
    min-height: 38px;
    border-color: var(--cc-line-strong);
    border-radius: var(--cc-radius-sm);
    background-color: #fff;
}
.ts-wrapper.form-select.focus,
.ts-wrapper.form-control.focus {
    border-color: var(--cc-accent);
    box-shadow: var(--cc-focus);
}
.ts-wrapper.form-select.is-invalid,
.ts-wrapper.form-control.is-invalid {
    border-color: var(--cc-danger);
}
.ts-wrapper .ts-control {
    min-height: 36px;
    padding-top: .4rem;
    padding-bottom: .4rem;
    font-size: .875rem;
    color: var(--cc-ink);
}
.ts-wrapper .ts-control,
.ts-wrapper .ts-control input {
    color: var(--cc-ink);
}
.focus .ts-control {
    box-shadow: none;
}
.ts-dropdown,
.ts-dropdown.form-control,
.ts-dropdown.form-select {
    border-color: var(--cc-line);
    border-radius: 12px;
    box-shadow: var(--cc-shadow-lg);
    overflow: hidden;
    font-size: .875rem;
    z-index: 1060;
}
.ts-dropdown .ts-dropdown-content {
    padding: .25rem;
    max-height: 300px;
}
.ts-dropdown .option,
.ts-dropdown .no-results,
.ts-dropdown .create {
    padding: .45rem .65rem;
    border-radius: 8px;
}
.ts-dropdown .active {
    background-color: var(--cc-soft);
    color: var(--cc-ink);
}
.ts-dropdown .option.selected {
    font-weight: 600;
}
.ts-dropdown .no-results {
    color: var(--cc-muted);
}
.ts-dropdown .highlight,
.ts-dropdown [data-selectable] .highlight {
    background: rgba(225, 29, 42, .14);
    border-radius: 3px;
    color: inherit;
}
.plugin-dropdown_input .dropdown-input-wrap {
    padding: .375rem;
    border-bottom: 1px solid var(--cc-line);
}
.plugin-dropdown_input .dropdown-input,
.plugin-dropdown_input.focus .ts-dropdown .dropdown-input {
    padding: .4rem .65rem;
    border: 1px solid var(--cc-line-strong);
    border-radius: var(--cc-radius-xs);
    box-shadow: none;
}
.plugin-dropdown_input.focus .ts-dropdown .dropdown-input:focus {
    border-color: var(--cc-accent);
    box-shadow: var(--cc-focus);
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
    box-shadow: none;
    border: 0;
}
.ts-wrapper.form-select.multi {
    background-image: none;
}
.ts-wrapper.multi .ts-control > div {
    border-radius: 6px;
    background: var(--cc-soft);
    color: var(--cc-ink);
}
.ts-wrapper.multi .ts-control > div.active {
    background: var(--cc-accent);
}

/* --------------------------------------------------------------------------
   8. Badges de statut
   -------------------------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .55rem;
    border: 1px solid transparent;
    border-radius: var(--cc-radius-pill);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}
.status-badge .bi {
    font-size: .85em;
}
.status-badge.is-neutral { background: var(--cc-soft); color: var(--cc-muted-strong); border-color: var(--cc-line); }
.status-badge.is-info { background: var(--cc-info-soft); color: var(--cc-info-text); border-color: var(--cc-info-border); }
.status-badge.is-success { background: var(--cc-success-soft); color: var(--cc-success-text); border-color: var(--cc-success-border); }
.status-badge.is-warning { background: var(--cc-warning-soft); color: var(--cc-warning-text); border-color: var(--cc-warning-border); }
.status-badge.is-danger { background: var(--cc-danger-soft); color: var(--cc-danger-text); border-color: var(--cc-danger-border); }
.status-badge.is-accent { background: var(--cc-accent-soft); color: var(--cc-accent-hover); border-color: var(--cc-accent-border); }
.status-badge.is-dark { background: var(--cc-ink); color: #fff; border-color: var(--cc-ink); }
a.status-badge:hover,
a:hover > .status-badge,
a:focus-visible > .status-badge {
    filter: brightness(.96);
    text-decoration: none;
}
/* Pastille cliquable des listes (« Stock » mène à la facturation) : seul indice qu'elle est un lien. */
a:hover > .status-badge,
a:focus-visible > .status-badge {
    box-shadow: 0 0 0 1px currentColor;
}
.status-badge-lg {
    padding: .3rem .7rem;
    font-size: .8125rem;
}
.status-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
}

.badge {
    --bs-badge-font-weight: 650;
    --bs-badge-border-radius: var(--cc-radius-pill);
    --bs-badge-padding-x: .5em;
    --bs-badge-padding-y: .3em;
}

/* --------------------------------------------------------------------------
   9. Fiches : carte de propriétés (liste de définitions)
   -------------------------------------------------------------------------- */
/* Le nombre de colonnes suit la largeur réelle de la carte, pas celle de la fenêtre :
   au plus --props-cols colonnes, chacune d'au moins --props-min (sinon passage à la ligne). */
.props {
    --props-cols: 1;
    --props-min: 16rem;
    --props-gap: 2.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(min(var(--props-min), 100%), calc((100% - (var(--props-cols) - 1) * var(--props-gap)) / var(--props-cols))), 1fr));
    column-gap: var(--props-gap);
    margin: 0;
}
.props-2 { --props-cols: 2; }
.props-3 { --props-cols: 3; }
.props-4 { --props-cols: 4; }
.prop {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: .25rem 1rem;
    align-items: baseline;
    padding: .55rem 0;
    border-bottom: 1px solid #eef2f6;
    min-width: 0;
}
.props-1 > .prop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.prop > dt {
    margin: 0;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--cc-muted);
}
.prop > dd {
    margin: 0;
    font-weight: 500;
    color: var(--cc-ink);
    overflow-wrap: anywhere;
}
.prop > dd:empty::before {
    content: "—";
    color: var(--cc-subtle);
}
.props-html {
    grid-column: 1 / -1;
    padding: .75rem 0;
}
@media (max-width: 575.98px) {
    /* Libellé à gauche de la valeur (fiches moitié moins longues : 15 champs sur une fiche voiture) ;
       au-dessus dans .props-stacked, où un libellé long comme « Adaptations/réparations convenues »
       serait coupé en milieu de mot. */
    .prop,
    .props-1 > .prop {
        grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
        gap: .25rem .75rem;
    }
    .props-stacked .prop {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Contact réel sans nom (id 1013) : l'en-tête de sa fiche et son lien en liste ne restent pas vides. */
.card-title:empty::before,
td > a:empty::before,
.prop > dd > a:empty::before {
    content: "(sans nom)";
    color: var(--cc-muted);
    font-style: italic;
    font-weight: 500;
}

/* Texte multiligne facultatif sous un intertitre de fiche (note d'une facture, ancienne valeur d'un
   journal) : tiret quand il est vide, comme les autres valeurs, plutôt qu'un titre orphelin. */
.section-text:empty::before {
    content: "—";
    color: var(--cc-subtle);
}
.section-text > :last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   10. Tuiles (tableau de bord, raccourcis d'action)
   -------------------------------------------------------------------------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
@media (min-width: 768px) {
    .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tile-grid-auto {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)) !important;
}
.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
    min-height: 96px;
    padding: 1rem;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--cc-ink);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tile:hover,
.tile:focus-visible {
    border-color: var(--cc-accent-border);
    box-shadow: var(--cc-shadow);
    color: var(--cc-ink);
    transform: translateY(-1px);
}
.tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--cc-accent-soft);
    color: var(--cc-accent);
    font-size: 1.2rem;
    transition: background-color .15s ease, color .15s ease;
}
.tile:hover .tile-icon {
    background: var(--cc-accent);
    color: #fff;
}
.tile-label {
    overflow-wrap: anywhere;
}
.tile-meta {
    margin-top: -.35rem;
    font-size: .75rem;
    font-weight: 500;
    color: var(--cc-muted);
}
.tile-ext {
    position: absolute;
    top: .85rem;
    right: .85rem;
    font-size: .75rem;
    color: var(--cc-subtle);
}
.tile.is-success .tile-icon { background: var(--cc-success-soft); color: var(--cc-success-text); }
.tile.is-success:hover .tile-icon { background: var(--cc-success); color: #fff; }
.tile.is-info .tile-icon { background: var(--cc-info-soft); color: var(--cc-info-text); }
.tile.is-info:hover .tile-icon { background: var(--cc-info); color: #fff; }
.tile.is-neutral .tile-icon { background: var(--cc-soft); color: var(--cc-ink-2); }
.tile.is-neutral:hover .tile-icon { background: var(--cc-ink); color: #fff; }
.tile-compact {
    flex-direction: row;
    align-items: center;
    min-height: 0;
    padding: .7rem .85rem;
}

.dash-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--cc-radius);
    background:
        radial-gradient(600px 220px at 100% 0, rgba(225, 29, 42, .28), transparent 70%),
        linear-gradient(135deg, var(--cc-dark) 0%, var(--cc-dark-2) 100%);
    color: #e2e8f0;
    box-shadow: var(--cc-shadow);
}
.dash-hero h2 {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
}
.dash-hero p {
    margin: .25rem 0 0;
    color: #cbd5e1;
    font-size: .875rem;
}
.dash-section .card-title .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cc-soft);
    color: var(--cc-ink-2);
    font-size: .95rem;
}

/* --------------------------------------------------------------------------
   11. Onglets, accordéons
   -------------------------------------------------------------------------- */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--cc-line);
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--cc-ink);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-link-color: var(--cc-muted);
    --bs-nav-link-hover-color: var(--cc-ink);
    --bs-nav-link-padding-x: .9rem;
    --bs-nav-link-padding-y: .65rem;
    --bs-nav-link-font-weight: 600;
    gap: .25rem;
}
.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 0;
    border-bottom: 2px solid transparent;
    font-size: .875rem;
    text-decoration: none;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: var(--cc-accent);
}
.nav-tabs .nav-link .badge {
    background: var(--cc-soft);
    color: var(--cc-muted-strong);
}
.card-header-tabs {
    margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--cc-radius-pill);
    --bs-nav-pills-link-active-bg: var(--cc-ink);
    --bs-nav-link-color: var(--cc-muted-strong);
    --bs-nav-link-hover-color: var(--cc-ink);
    --bs-nav-link-padding-y: .35rem;
    --bs-nav-link-padding-x: .8rem;
    gap: .25rem;
    font-size: .8125rem;
    font-weight: 600;
}
.nav-pills .nav-link {
    text-decoration: none;
}

.accordion {
    --bs-accordion-color: var(--cc-ink);
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: var(--cc-line);
    --bs-accordion-border-radius: var(--cc-radius);
    --bs-accordion-inner-border-radius: calc(var(--cc-radius) - 1px);
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: .875rem;
    --bs-accordion-btn-color: var(--cc-ink);
    --bs-accordion-btn-focus-box-shadow: var(--cc-focus);
    --bs-accordion-active-color: var(--cc-ink);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-btn-icon-width: .9rem;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230f172a' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    box-shadow: var(--cc-shadow-sm);
    border-radius: var(--cc-radius);
}
.accordion-button {
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 650;
}
.accordion-button:not(.collapsed) {
    box-shadow: inset 0 -1px 0 var(--cc-line);
}
.accordion-button > .bi {
    color: var(--cc-muted);
}

/* --------------------------------------------------------------------------
   12. Galerie photo et visionneuse plein écran (remplace Foundation Clearing)
   -------------------------------------------------------------------------- */
.gallery {
    --gallery-min: 132px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--gallery-min)), 1fr));
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gallery-sm { --gallery-min: 88px; }
.gallery-lg { --gallery-min: 190px; }
.gallery-item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    margin: 0;
}
.gallery-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-sm);
    background: var(--cc-soft);
}
.gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}
.gallery-thumb.is-contain img {
    object-fit: contain;
    padding: .75rem;
}
/* Icône PDF (carré noir de l'ancien logo Acrobat) : éclaircie et réduite. Répétée sur chaque ligne
   des listes réelles (2 985 documents), elle dominait toute la page. Le fichier reste le même. */
img[src*="img/icons/pdf"] {
    filter: invert(1) hue-rotate(180deg);
}
.gallery-thumb.is-contain img[src*="img/icons/pdf"] {
    padding: 22% 30%;
}
.gallery-thumb::after {
    content: "\f62c";
    font-family: bootstrap-icons;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .35);
    color: #fff;
    font-size: 1.25rem;
    opacity: 0;
    transition: opacity .2s ease;
}
.gallery-thumb:hover img {
    transform: scale(1.04);
}
.gallery-thumb:hover::after,
.gallery-thumb:focus-visible::after {
    opacity: 1;
}
/* Nom de fichier sur deux lignes : les noms réels de 41 caractères étaient coupés à 20, sans infobulle
   sur téléphone. */
.gallery-caption {
    display: -webkit-box;
    overflow: hidden;
    font-size: .75rem;
    line-height: 1.3;
    text-align: center;
    color: var(--cc-muted);
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.gallery-actions {
    display: flex;
    justify-content: center;
    gap: .25rem;
}

.viewer {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(2, 6, 23, .95);
    color: #fff;
    overflow: hidden;
}
.viewer::backdrop {
    background: rgba(2, 6, 23, .6);
}
.viewer[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.viewer-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
}
.viewer-counter {
    margin-right: auto;
    font-size: .8125rem;
    color: #cbd5e1;
    font-variant-numeric: tabular-nums;
}
.viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 1.05rem;
    text-decoration: none;
    transition: background-color .15s ease;
}
.viewer-btn:hover,
.viewer-btn:focus-visible {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}
.viewer-btn:focus-visible {
    outline-color: #fff;
}
.viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0 4.5rem;
    touch-action: pan-y;
}
.viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
    user-select: none;
    -webkit-user-drag: none;
}
.viewer-nav {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    transform: translateY(-50%);
    font-size: 1.3rem;
}
.viewer-prev { left: 1rem; }
.viewer-next { right: 1rem; }
.viewer-footer {
    padding: .5rem 1rem 1rem;
}
.viewer-caption {
    min-height: 1.25rem;
    margin: 0 0 .5rem;
    font-size: .875rem;
    text-align: center;
    color: #e2e8f0;
}
.viewer-thumbs {
    display: flex;
    justify-content: center;
    gap: .4rem;
    overflow-x: auto;
    padding: .25rem;
    scrollbar-width: thin;
}
.viewer-thumbs button {
    flex: none;
    width: 56px;
    height: 42px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    opacity: .55;
    overflow: hidden;
    transition: opacity .15s ease, border-color .15s ease;
}
.viewer-thumbs button:hover {
    opacity: .9;
}
.viewer-thumbs button[aria-current="true"] {
    border-color: var(--cc-accent);
    opacity: 1;
}
.viewer-thumbs img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 575.98px) {
    .viewer-stage {
        padding: 0 .5rem;
    }
    .viewer-nav {
        width: 40px;
        height: 40px;
        background: rgba(2, 6, 23, .55);
    }
    .viewer-prev { left: .5rem; }
    .viewer-next { right: .5rem; }
    .viewer-thumbs {
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   13. Alertes, messages flash, toasts, état vide
   -------------------------------------------------------------------------- */
.alert {
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: .75rem;
    --bs-alert-border-radius: 12px;
    --bs-alert-margin-bottom: 0;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    font-size: .875rem;
}
.alert-icon {
    flex: none;
    font-size: 1.1rem;
    line-height: 1.3;
}
.alert-body {
    flex: 1;
    min-width: 0;
    padding-top: .05rem;
}
.alert-title {
    display: block;
    font-weight: 650;
}
.alert-dismissible {
    padding-right: 3rem;
}
.alert-dismissible .btn-close {
    padding: 1rem;
}
.alert-success { --bs-alert-color: #166534; --bs-alert-bg: #f0fdf4; --bs-alert-border-color: #bbf7d0; --bs-alert-link-color: #14532d; }
.alert-danger { --bs-alert-color: #b91c1c; --bs-alert-bg: #fef2f2; --bs-alert-border-color: #fecaca; --bs-alert-link-color: #991b1b; }
.alert-warning { --bs-alert-color: #92400e; --bs-alert-bg: #fffbeb; --bs-alert-border-color: #fde68a; --bs-alert-link-color: #78350f; }
.alert-info { --bs-alert-color: #1e40af; --bs-alert-bg: #eff6ff; --bs-alert-border-color: #bfdbfe; --bs-alert-link-color: #1e3a8a; }
.alert-secondary,
.alert-light { --bs-alert-color: #334155; --bs-alert-bg: #f8fafc; --bs-alert-border-color: #e2e8f0; --bs-alert-link-color: #0f172a; }
.alert .alert-link {
    font-weight: 650;
}

.toast-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1095;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(380px, calc(100vw - 2rem));
}
.toast {
    --bs-toast-border-radius: 12px;
    --bs-toast-border-color: var(--cc-line);
    --bs-toast-box-shadow: var(--cc-shadow-lg);
    --bs-toast-font-size: .875rem;
    --bs-toast-padding-x: .9rem;
    --bs-toast-padding-y: .75rem;
    width: 100%;
    border-left: 4px solid var(--cc-subtle);
}
.toast .toast-body {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}
.toast.is-success { border-left-color: var(--cc-success); }
.toast.is-danger { border-left-color: var(--cc-danger); }
.toast.is-warning { border-left-color: var(--cc-warning); }
.toast.is-info { border-left-color: var(--cc-info); }
.toast.is-success .toast-icon { color: var(--cc-success); }
.toast.is-danger .toast-icon { color: var(--cc-danger); }
.toast.is-warning .toast-icon { color: var(--cc-warning); }
.toast.is-info .toast-icon { color: var(--cc-info); }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--cc-muted);
}
.empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: .9rem;
    border-radius: 16px;
    background: var(--cc-soft);
    color: var(--cc-subtle);
    font-size: 1.6rem;
}
.empty-state-title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 650;
    color: var(--cc-ink);
}
.empty-state-text {
    max-width: 46ch;
    margin: .3rem 0 0;
    font-size: .8125rem;
}
.empty-state-action {
    margin-top: 1rem;
}
.empty-state-compact {
    padding: 1.5rem 1rem;
}
.empty-state-compact .empty-state-icon {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
    border-radius: 12px;
}
/* Carte vide d'une fiche (« Fichiers liés » de presque tous les contacts réels, « Photos » d'une voiture
   qui vient d'arriver) : une ligne discrète plutôt qu'un bloc de 165 px qui repousse le reste. */
.card-body > .empty-state-compact {
    flex-direction: row;
    justify-content: center;
    gap: .75rem;
    padding: .25rem 0;
    text-align: left;
}
.card-body > .empty-state-compact .empty-state-icon {
    flex: none;
    width: 36px;
    height: 36px;
    margin-bottom: 0;
    font-size: 1.05rem;
    border-radius: 10px;
}
.card-body > .empty-state-compact .empty-state-title {
    font-size: .875rem;
    font-weight: 500;
    color: var(--cc-muted-strong);
}
td > .empty-state {
    padding: 2rem 1rem;
}

/* --------------------------------------------------------------------------
   14. Infobulles, menus déroulants, modales
   -------------------------------------------------------------------------- */
.tooltip {
    --bs-tooltip-bg: var(--cc-ink);
    --bs-tooltip-color: #fff;
    --bs-tooltip-font-size: .75rem;
    --bs-tooltip-padding-x: .6rem;
    --bs-tooltip-padding-y: .35rem;
    --bs-tooltip-border-radius: 8px;
    --bs-tooltip-max-width: 300px;
    --bs-tooltip-opacity: 1;
    font-family: var(--cc-font);
}
.tooltip-html .tooltip-inner {
    text-align: left;
}

.dropdown-menu {
    --bs-dropdown-font-size: .875rem;
    --bs-dropdown-color: var(--cc-ink);
    --bs-dropdown-border-color: var(--cc-line);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-inner-border-radius: 11px;
    --bs-dropdown-box-shadow: var(--cc-shadow-lg);
    --bs-dropdown-padding-x: .375rem;
    --bs-dropdown-padding-y: .375rem;
    --bs-dropdown-item-padding-x: .75rem;
    --bs-dropdown-item-padding-y: .45rem;
    --bs-dropdown-link-color: var(--cc-ink);
    --bs-dropdown-link-hover-color: var(--cc-ink);
    --bs-dropdown-link-hover-bg: var(--cc-soft);
    --bs-dropdown-link-active-color: var(--cc-ink);
    --bs-dropdown-link-active-bg: var(--cc-soft);
    --bs-dropdown-divider-bg: var(--cc-line);
    --bs-dropdown-header-color: var(--cc-muted);
    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    border-radius: 8px;
    text-decoration: none;
}
.dropdown-item > .bi {
    width: 1rem;
    color: var(--cc-muted);
}
.dropdown-item.text-danger > .bi {
    color: inherit;
}

.modal {
    --bs-modal-border-radius: 16px;
    --bs-modal-inner-border-radius: 15px;
    --bs-modal-border-color: transparent;
    --bs-modal-box-shadow: var(--cc-shadow-lg);
    --bs-modal-header-border-color: var(--cc-line);
    --bs-modal-footer-border-color: var(--cc-line);
    --bs-modal-padding: 1.25rem;
    --bs-modal-header-padding: 1rem 1.25rem;
    --bs-modal-title-line-height: 1.35;
}
.modal-backdrop {
    --bs-backdrop-bg: #0b1220;
    --bs-backdrop-opacity: .55;
}
.modal-title {
    font-size: 1rem;
    font-weight: 700;
}
.modal-footer {
    gap: .5rem;
}
.modal-footer > * {
    margin: 0;
}
.modal-confirm .modal-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 1.25rem 1.25rem;
}
.modal-confirm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cc-danger-soft);
    color: var(--cc-danger);
    font-size: 1.25rem;
}
.modal-confirm-title {
    margin: 0 0 .3rem;
    font-size: 1rem;
    font-weight: 700;
}
.modal-confirm-text {
    margin: 0;
    color: var(--cc-text);
    white-space: pre-line;
}
.modal-confirm .modal-footer {
    border-top: 0;
    padding-top: 0;
    background: transparent;
}

.btn-close:focus {
    box-shadow: var(--cc-focus);
}

/* --------------------------------------------------------------------------
   15. Connexion et pages d'erreur
   -------------------------------------------------------------------------- */
.auth-body {
    min-height: 100vh;
    background: var(--cc-page);
}
.auth-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
}
@media (min-width: 992px) {
    .auth-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
}
.auth-aside {
    display: none;
    position: relative;
    overflow: hidden;
    padding: 3rem;
    background:
        radial-gradient(700px 380px at 0% 0%, rgba(225, 29, 42, .32), transparent 65%),
        radial-gradient(600px 400px at 100% 100%, rgba(37, 99, 235, .12), transparent 60%),
        linear-gradient(160deg, var(--cc-dark) 0%, var(--cc-dark-2) 100%);
    color: #cbd5e1;
}
@media (min-width: 992px) {
    .auth-aside {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
}
.auth-aside-logo {
    display: inline-flex;
    align-self: flex-start;
    padding: .65rem 1rem;
    border-radius: 14px;
    background: #fff;
}
.auth-aside-logo img {
    height: 36px;
    width: auto;
}
.auth-aside h2 {
    max-width: 22ch;
    margin: 0 0 1rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}
.auth-aside p {
    max-width: 46ch;
    margin: 0;
    font-size: .9375rem;
}
.auth-features {
    display: grid;
    gap: .75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}
.auth-features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-weight: 500;
}
.auth-features .bi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
}
.auth-aside-foot {
    font-size: .75rem;
    color: var(--cc-subtle);
}
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.auth-card {
    width: 100%;
    max-width: 420px;
}
.auth-card-logo {
    display: inline-flex;
    margin-bottom: 1.5rem;
}
.auth-card-logo img {
    height: 34px;
    width: auto;
}
@media (min-width: 992px) {
    .auth-card-logo {
        display: none;
    }
}
.auth-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.auth-intro {
    margin: .5rem 0 1.5rem;
    color: var(--cc-muted-strong);
}
.auth-panel {
    padding: 1.5rem;
    border: 1px solid var(--cc-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--cc-shadow);
}
.auth-panel .field + .field {
    margin-top: 1rem;
}
.auth-panel .form-control {
    min-height: 42px;
}
.auth-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    margin-top: 1.25rem;
    font-size: .8125rem;
}
.auth-links a {
    color: var(--cc-muted-strong);
}
.auth-links a:hover {
    color: var(--cc-accent-hover);
}

.error-body {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(900px 400px at 50% -10%, rgba(225, 29, 42, .08), transparent 70%),
        var(--cc-page);
}
.error-card {
    width: 100%;
    max-width: 560px;
    padding: 2rem;
    border: 1px solid var(--cc-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--cc-shadow);
    text-align: center;
}
.error-logo img {
    height: 30px;
    width: auto;
}
.error-code {
    margin: 1.5rem 0 .25rem;
    font-size: 3.5rem;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--cc-accent);
}
.error-title {
    margin: 0 0 .5rem;
    font-size: 1.25rem;
}
.error-message {
    margin: 0 auto 1.5rem;
    max-width: 48ch;
    color: var(--cc-muted-strong);
    overflow-wrap: anywhere;
}
.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

/* --------------------------------------------------------------------------
   16. Guide de style (Pages/styleguide)
   -------------------------------------------------------------------------- */
.sg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .75rem;
}
.sg-swatch {
    overflow: hidden;
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    background: #fff;
    font-size: .75rem;
}
.sg-swatch-color {
    height: 56px;
}
.sg-swatch-body {
    padding: .5rem .65rem;
}
.sg-swatch-body strong {
    display: block;
    font-size: .8125rem;
}
.sg-swatch-body code {
    color: var(--cc-muted);
}
.sg-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.sg-toc {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.sg-toc a {
    padding: .3rem .65rem;
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius-pill);
    background: #fff;
    color: var(--cc-ink);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
}
.sg-toc a:hover {
    border-color: var(--cc-accent-border);
    color: var(--cc-accent-hover);
}
.sg-icons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .375rem;
    font-size: .75rem;
}
.sg-icons div {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    background: var(--cc-soft-2);
}
.sg-icons .bi {
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   17. Compatibilité : anciennes icônes Foundation (fi-*)
   Filet de sécurité pour le HTML encore produit avec des classes fi-* (getters
   d'entité, contenus stockés) : chaque fi-* affiche l'icône Bootstrap Icons
   correspondante (table DESIGN.md §9). Ne pas utiliser dans du nouveau code.
   -------------------------------------------------------------------------- */
[class^="fi-"]::before,
[class*=" fi-"]::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    vertical-align: -.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fi-alert::before { content: "\f33b"; }
.fi-archive::before { content: "\f10d"; }
.fi-arrow-down::before { content: "\f128"; }
.fi-arrow-left::before { content: "\f12f"; }
.fi-arrow-up::before { content: "\f148"; }
.fi-calendar::before { content: "\f214"; }
.fi-camera::before { content: "\f220"; }
.fi-check::before { content: "\f633"; }
.fi-clipboard-notes::before { content: "\f28b"; }
.fi-clock::before { content: "\f293"; }
.fi-download::before { content: "\f30a"; }
.fi-euro::before { content: "\f637"; }
.fi-eye::before { content: "\f341"; }
.fi-filter::before { content: "\f3e1"; }
.fi-home::before { content: "\f423"; }
.fi-key::before { content: "\f44f"; }
.fi-link::before { content: "\f470"; }
.fi-list::before { content: "\f478"; }
.fi-magnifying-glass::before { content: "\f52a"; }
.fi-mail::before { content: "\f32f"; }
.fi-minus::before { content: "\f63b"; }
.fi-page::before { content: "\f392"; }
.fi-page-copy::before { content: "\f3c2"; }
.fi-page-filled::before { content: "\f38a"; }
.fi-page-pdf::before { content: "\f63e"; }
.fi-pencil::before { content: "\f4cb"; }
.fi-plus::before { content: "\f64d"; }
.fi-power::before { content: "\f4ff"; }
.fi-price-tag::before { content: "\f5b0"; }
.fi-results::before { content: "\f17e"; }
.fi-shopping-cart::before { content: "\f242"; }
.fi-skull::before { content: "\f337"; }
.fi-target::before { content: "\f1de"; }
.fi-torso-business::before { content: "\f8c9"; }
.fi-torsos::before { content: "\f4d0"; }
.fi-trash::before { content: "\f78b"; }
.fi-upload::before { content: "\f603"; }
.fi-web::before { content: "\f3ef"; }
.fi-wrench::before { content: "\f621"; }
.fi-x::before { content: "\f659"; }

/* --------------------------------------------------------------------------
   18. Impression, mouvement réduit
   -------------------------------------------------------------------------- */
@media print {
    .app-sidebar,
    .app-topbar,
    .page-actions,
    .filters-card,
    .list-footer .pagination,
    .list-top,
    .toast-stack,
    .skip-link,
    .cell-actions {
        display: none !important;
    }
    .app-main {
        margin-left: 0 !important;
    }
    body,
    .app-header {
        background: #fff !important;
    }
    .card {
        box-shadow: none !important;
        break-inside: avoid;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}