html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
}

body {
    height: 100vh;
}

a, .btn-link {
    color: #4F46E5;
}

h1:focus { outline: none; }

/* ============================================================
   CCC — utilitaires layout pour pages liste viewport-bounded
   ============================================================ */

/* Wrapper pour empiler TabBar + container */
.ccc-main-with-tabs {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Container global — flex column qui fitte le viewport.
   height: 100% est requis car MudMainContent n'est pas un flex container.
   flex: 1 + min-height: 0 sont conservés au cas où on l'imbrique dans un wrapper flex. */
.ccc-app-container {
    height: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    padding: 4px 24px 4px 24px;
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}

/* Page liste : flex column qui remplit le container */
.ccc-page-list {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Page détail : scroll interne fluide (pour pages SANS onglets) */
.ccc-page-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

/* Page détail avec sections fixes en haut + zone scrollable en bas */
.ccc-page-detail {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ccc-page-detail > .ccc-detail-top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Compacte la breadcrumb dans les fiches détail (gain de place vertical) */
.ccc-page-detail .mud-breadcrumbs {
    padding: 0;
    margin: 0;
}

/* Zone contenu (sans onglets) : scroll interne */
.ccc-page-detail > .ccc-detail-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Barre d'onglets custom — collée au header gradient, fixe en haut */
.ccc-detail-tabs-bar {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
    position: relative;
    /* Hauteur FIXE (pas min-) = hauteur réelle avec MudTextField Margin.Dense outlined.
       min-height seul ne suffit pas si un enfant clipe verticalement. */
    height: 56px;
    flex-shrink: 0;
}
.ccc-detail-tabs-bar::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: var(--tab-x, 0);
    width: var(--tab-w, 0);
    height: 2px;
    background: #4F46E5;
    border-radius: 2px 2px 0 0;
    transition: left 280ms cubic-bezier(.4, 0, .2, 1),
                width 280ms cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.ccc-detail-tabs-spacer { flex: 1; }

.ccc-detail-tabs-bar > .ccc-detail-tabs-search {
    display: flex;
    align-items: center;
    padding: 4px 8px 4px 0;
    min-width: 280px;
}
/* Onglets sans recherche : on garde le conteneur pour préserver la largeur de la barre,
   on masque juste visuellement → les tabs ne "respirent" plus entre onglets. */
.ccc-detail-tabs-bar > .ccc-detail-tabs-search.is-hidden {
    visibility: hidden;
}

.ccc-detail-tab-btn {
    background: transparent;
    border: none;
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 120ms, border-color 120ms, background 120ms;
    font-family: inherit;
    white-space: nowrap;
}
.ccc-detail-tab-btn:hover {
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}
.ccc-detail-tab-btn.active {
    color: #4F46E5;
    /* L'indicateur de position passe par ::after de .ccc-detail-tabs-bar (slide animé),
       pas par le border-bottom statique. */
    border-bottom-color: transparent;
}

/* Wrapper scroll pour onglets SANS grille (cards, infos) */
.ccc-tab-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 8px;
}

/* Wrapper d'une grille MudDataGrid dans un onglet : pattern identique à la liste */
.ccc-tab-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    background: var(--mud-palette-surface);
}

/* ============================================================
   CCC — DataGrid natif (CccDataGrid)
   ============================================================ */

.ccc-grid-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

/* Zone scrollable : div wrapper qui contient le table (table ne peut pas être flex:1 directement) */
.ccc-grid-fill > .ccc-grid-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Table */
.ccc-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.ccc-data-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ccc-data-table thead th {
    background: var(--mud-palette-background);
    font-weight: 500;
    text-align: left;
    padding: 10px 16px;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    user-select: none;
    font-size: 12px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.ccc-data-table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    vertical-align: middle;
    color: var(--mud-palette-text-primary);
}

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

.ccc-data-table tbody tr {
    transition: background 80ms;
}

.ccc-data-table tbody tr:hover {
    background: var(--mud-palette-action-default-hover);
}

.ccc-data-table tbody tr.clickable { cursor: pointer; }

/* Header sortable */
.ccc-th { vertical-align: middle; }
.ccc-th .ccc-th-content {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ccc-th.sortable { cursor: pointer; }
.ccc-th.sortable:hover { color: var(--mud-palette-text-primary); }
.ccc-th.active { color: var(--mud-palette-text-primary); }
.ccc-th-arrow { opacity: 0.7; }

/* Skeleton loading */
.ccc-grid-skeleton {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ccc-grid-skeleton-row {
    height: 32px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        var(--mud-palette-action-default-hover) 0%,
        var(--mud-palette-lines-default) 50%,
        var(--mud-palette-action-default-hover) 100%);
    background-size: 200% 100%;
    animation: ccc-shimmer 1.4s ease-in-out infinite;
}
@keyframes ccc-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state */
.ccc-grid-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    gap: 8px;
}

/* Pager sticky en bas, toujours visible */
.ccc-pager {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
}

.ccc-pager-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ccc-pager-pagesize {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 12px;
}

.ccc-pager-pagesize select {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

.ccc-pager-btn {
    background: transparent;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    width: 28px; height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 80ms, border-color 80ms;
}
.ccc-pager-btn:hover:not(:disabled) {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-text-primary);
}
.ccc-pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.ccc-pager-current {
    min-width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* Sur mobile : on revient au flux naturel */
@media (max-width: 960px) {
    html, body { overflow: auto; }
    body { height: auto; }
    .ccc-app-container {
        height: auto;
        overflow: visible;
    }
    .ccc-page-list, .ccc-page-scroll {
        flex: none;
        min-height: 0;
        overflow: visible;
    }
}

/* ============================================================
   CCC — header gradient pour les fiches détail
   ============================================================ */

.ccc-detail-header {
    border-radius: 12px;
    color: white;
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
}

.ccc-detail-header::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
}

.ccc-detail-header.indigo  { background: linear-gradient(135deg, #4F46E5 0%, #312e81 100%); }
.ccc-detail-header.emerald { background: linear-gradient(135deg, #10b981 0%, #064e3b 100%); }
.ccc-detail-header.rose    { background: linear-gradient(135deg, #f43f5e 0%, #881337 100%); }
.ccc-detail-header.amber   { background: linear-gradient(135deg, #f59e0b 0%, #78350f 100%); }
.ccc-detail-header.slate   { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); }
.ccc-detail-header.sky     { background: linear-gradient(135deg, #0ea5e9 0%, #0c4a6e 100%); }
.ccc-detail-header.teal    { background: linear-gradient(135deg, #14b8a6 0%, #134e4a 100%); }

.ccc-detail-header .meta-pill {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-family: ui-monospace, Menlo, monospace;
}

.ccc-icon-tile {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

/* ============================================================
   CCC — bits divers
   ============================================================ */

/* Status dot */
.ccc-status-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ccc-status-dot.active   { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.20); }
.ccc-status-dot.inactive { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,0.15); opacity: 0.7; }
.ccc-status-dot.warning  { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,0.20); }
.ccc-status-dot.danger   { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.20); }

/* Tile colorée (icône dans un fond teinté) — pour rows */
.ccc-row-tile {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ccc-row-tile.indigo  { background: rgba(79,70,229,0.10);  color: #4F46E5; }
.ccc-row-tile.emerald { background: rgba(16,185,129,0.10); color: #10b981; }
.ccc-row-tile.rose    { background: rgba(244,63,94,0.10);  color: #f43f5e; }
.ccc-row-tile.amber   { background: rgba(245,158,11,0.10); color: #f59e0b; }
.ccc-row-tile.slate   { background: rgba(100,116,139,0.10); color: #64748b; }
.ccc-row-tile.sky     { background: rgba(14,165,233,0.10);  color: #0ea5e9; }
.ccc-row-tile.violet  { background: rgba(139,92,246,0.10);  color: #8b5cf6; }

/* Avatar avec initiales — pour rows ou listes */
.ccc-row-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.ccc-row-avatar.indigo  { background: rgba(79,70,229,0.12);  color: #4F46E5; }
.ccc-row-avatar.emerald { background: rgba(16,185,129,0.12); color: #10b981; }
.ccc-row-avatar.rose    { background: rgba(244,63,94,0.12);  color: #f43f5e; }
.ccc-row-avatar.amber   { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ccc-row-avatar.slate   { background: rgba(100,116,139,0.12); color: #64748b; }
.ccc-row-avatar.sky     { background: rgba(14,165,233,0.12);  color: #0ea5e9; }
.ccc-row-avatar.violet  { background: rgba(139,92,246,0.12);  color: #8b5cf6; }

/* Cellule "primary" : nom en bold + sous-texte en secondary */
.ccc-cell-primary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.ccc-cell-primary .name {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccc-cell-primary .subtle {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

/* Pill ref (mono code) */
.ccc-ref-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

/* Hover row plus marqué + transition fluide */
.mud-table-row {
    transition: background-color 120ms ease, box-shadow 120ms ease !important;
}
.mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    box-shadow: inset 3px 0 0 #4F46E5;
}
.ccc-data-table tbody tr {
    transition: background 120ms ease, box-shadow 120ms ease;
}
.ccc-data-table tbody tr:hover {
    background: var(--mud-palette-action-default-hover);
    box-shadow: inset 3px 0 0 #4F46E5;
}

/* N4 — zébrage très subtil sur les grilles de listes principales */
.ccc-page-list .ccc-grid-fill .mud-table-row:nth-of-type(even) {
    background-color: rgba(148,163,184,0.04);
}

/* Quand pas de PagerContent : MudDataGrid laisse un footer vide visuel — le masquer */
.ccc-page-list .ccc-grid-fill .mud-table-pagination,
.ccc-page-list .ccc-grid-fill .mud-table-pagination-toolbar { display: none !important; }

/* ============================================================
   CCC — Skeleton shimmer fluide (override MudBlazor)
   ============================================================ */

.mud-skeleton {
    background: linear-gradient(90deg,
        var(--mud-palette-action-default-hover) 0%,
        rgba(148,163,184,0.18) 50%,
        var(--mud-palette-action-default-hover) 100%) !important;
    background-size: 200% 100% !important;
    animation: ccc-shimmer-fluid 1.6s ease-in-out infinite !important;
    border-radius: 6px !important;
}

@keyframes ccc-shimmer-fluid {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ============================================================
   CCC — Side panel slide-in (édition / création)
   ============================================================ */

/* Dialogs (confirmations, etc.) doivent passer AU-DESSUS du side-panel (1499/1500),
   sinon ils apparaissent floutés derrière le backdrop et leurs clics ne passent pas. */
.mud-overlay-dialog { z-index: 1600 !important; }
.mud-dialog-container { z-index: 1601 !important; }

/* Confirmation in-panel : remplace le contenu du panel pour éviter un dialog flottant.
   Centre verticalement la carte de confirmation dans le body du side-panel. */
.ccc-confirm-inline {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 24px 8px;
}
.ccc-confirm-inline .icon-wrap {
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.10);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
}

.ccc-side-panel-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1499;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.ccc-side-panel-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.ccc-side-panel {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    background: var(--mud-palette-surface);
    box-shadow: none;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
                box-shadow 200ms ease,
                visibility 0s linear 320ms;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    max-width: 100vw;
}
.ccc-side-panel.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
                width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms ease,
                visibility 0s linear 0s;
}

/* Panel secondaire empilé : backdrop transparent pour ne pas masquer les panels en arrière.
   L'overlay sombre qui désactive visuellement les panels arrière est appliqué via ::after sur chaque panel. */
.ccc-side-panel-backdrop.stacked { background: transparent; backdrop-filter: none; }

/* Cascade "pages d'un livre" : chaque niveau recule de ~64px vers la gauche + scale léger.
   transform-origin: right center → ancrage stable à droite, le panel s'amincit vers la gauche.
   Cap visuel : au-delà de StackLevel 2 (donc 3 panels visibles : top, -1, -2), on masque
   les panels les plus profonds — ils restent dans la pile et réapparaissent au close. */
.ccc-side-panel.open {
    transform: translateX(calc(var(--ccc-stack-level, 0) * -64px))
               scale(calc(1 - var(--ccc-stack-level, 0) * 0.04));
    transform-origin: right center;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
}
/* Au-delà de 3 panels visibles : fade out + désactive pointer-events.
   On ne peut pas tester --ccc-stack-level dans un sélecteur CSS, donc on s'appuie sur
   une classe ajoutée par le composant : .ccc-stack-hidden. */
.ccc-side-panel.ccc-stack-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 220ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ccc-side-panel {
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                width 360ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 280ms ease,
                visibility 0s linear 380ms;
    will-change: transform;
}
/* Les panels en arrière (StackLevel > 0) ont un overlay sombre + cliquable pour remonter */
.ccc-side-panel.open::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: rgba(15, 23, 42, calc(var(--ccc-stack-level, 0) * 0.18));
    transition: background 280ms ease;
    border-radius: inherit;
}
/* Box-shadow plus marquée pour le top, plus discrète pour les panels arrière */
.ccc-side-panel.open {
    box-shadow:
        calc(var(--ccc-stack-level, 0) * -4px - 16px) 0 calc(var(--ccc-stack-level, 0) * 8px + 36px)
            rgba(0, 0, 0, calc(0.22 - var(--ccc-stack-level, 0) * 0.04));
}

.ccc-side-panel-header {
    flex-shrink: 0;
    padding: 24px 28px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.ccc-side-panel-header::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    pointer-events: none;
}
.ccc-side-panel-header.indigo  { background: linear-gradient(135deg, #4F46E5 0%, #312e81 100%); }
.ccc-side-panel-header.emerald { background: linear-gradient(135deg, #10b981 0%, #064e3b 100%); }
.ccc-side-panel-header.rose    { background: linear-gradient(135deg, #f43f5e 0%, #881337 100%); }
.ccc-side-panel-header.amber   { background: linear-gradient(135deg, #f59e0b 0%, #78350f 100%); }
.ccc-side-panel-header.violet  { background: linear-gradient(135deg, #8b5cf6 0%, #4c1d95 100%); }
.ccc-side-panel-header.sky     { background: linear-gradient(135deg, #0ea5e9 0%, #075985 100%); }
.ccc-side-panel-header.slate   { background: linear-gradient(135deg, #475569 0%, #1e293b 100%); }
.ccc-side-panel-header.teal    { background: linear-gradient(135deg, #14b8a6 0%, #134e4a 100%); }

.ccc-side-panel-header .header-content {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    min-width: 0;
}
.ccc-side-panel-header .header-text { min-width: 0; }
.ccc-side-panel-header .header-text .title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ccc-side-panel-header .header-text .subtitle {
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    margin-top: 2px;
}

.ccc-side-panel-header .close-btn,
.ccc-side-panel-header .back-btn {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.ccc-side-panel-header .close-btn:hover,
.ccc-side-panel-header .back-btn:hover { background: rgba(255,255,255,0.22); }

.ccc-side-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 28px;
}

.ccc-side-panel-footer {
    flex-shrink: 0;
    padding: 16px 28px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Section dans un panel — header avec icône + label uppercase */
.ccc-form-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.ccc-form-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ccc-form-section-header .mud-icon-root {
    font-size: 14px !important;
    color: var(--mud-palette-primary);
}

/* Mobile : panel pleine largeur */
@media (max-width: 640px) {
    .ccc-side-panel {
        width: 100vw !important;
    }
}

/* ============================================================
   CCC — SAV thread (chat-like)
   ============================================================ */

.ccc-thread {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ccc-thread-header {
    flex-shrink: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
}

.ccc-thread-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 200px;
}

.ccc-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    animation: ccc-message-in 240ms ease;
}

@keyframes ccc-message-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ccc-message-content {
    flex: 1;
    min-width: 0;
    background: var(--mud-palette-action-default-hover);
    border-radius: 10px;
    padding: 10px 14px;
    border: 1px solid var(--mud-palette-lines-default);
}

.ccc-message-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ccc-message-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ccc-thread-composer {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.ccc-thread-composer .mud-input-control {
    flex: 1;
}

/* ============================================================
   CCC — Situation chip cliquable (header SAV)
   ============================================================ */

.ccc-situation-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 6px;
    border: none;
    background: rgba(255,255,255,0.95);
    color: #1e293b;
    font-weight: 500;
    font-size: 11px;
    font-family: inherit;
    cursor: pointer;
    transition: background 120ms, transform 80ms;
}
.ccc-situation-chip:hover {
    background: rgba(255,255,255,1);
    transform: translateY(-1px);
}
.ccc-situation-chip.final {
    opacity: 0.75;
}

/* ============================================================
   CCC — Mini stats dans header gradient (fiche photocopieuse)
   ============================================================ */

.ccc-header-stats {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.ccc-stat-pill {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    min-width: 0;
}

/* Variantes colorées (border-left + tile icon) */
.ccc-stat-pill.nb        { border-left-color: #f1f5f9; }
.ccc-stat-pill.color     { border-left-color: #f0abfc; }
.ccc-stat-pill.toner     { border-left-color: #fbbf24; }
.ccc-stat-pill.abn       { border-left-color: #c4b5fd; }
.ccc-stat-pill.printers  { border-left-color: #7dd3fc; }
.ccc-stat-pill.paid      { border-left-color: #6ee7b7; }
.ccc-stat-pill.due       { border-left-color: #fda4af; }
.ccc-stat-pill.due.zero  { border-left-color: #cbd5e1; }

.ccc-stat-pill .icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ccc-stat-pill.nb       .icon { background: rgba(255,255,255,0.22); }
.ccc-stat-pill.color    .icon { background: rgba(240,171,252,0.22); }
.ccc-stat-pill.toner    .icon { background: rgba(251,191,36,0.22); }
.ccc-stat-pill.abn      .icon { background: rgba(196,181,253,0.22); }
.ccc-stat-pill.printers .icon { background: rgba(125,211,252,0.22); }
.ccc-stat-pill.paid     .icon { background: rgba(110,231,183,0.22); }
.ccc-stat-pill.due      .icon { background: rgba(253,164,175,0.22); }
.ccc-stat-pill.due.zero .icon { background: rgba(203,213,225,0.22); }
.ccc-stat-pill.color    .value { color: #f0abfc; }
.ccc-stat-pill.abn      .value { color: #c4b5fd; }
.ccc-stat-pill.printers .value { color: #7dd3fc; }
.ccc-stat-pill.paid     .value { color: #6ee7b7; }
.ccc-stat-pill.due      .value { color: #fda4af; }
.ccc-stat-pill.due.zero .value { color: #e2e8f0; }

/* ============================================================
   CCC — Mini-cartes KPI au-dessus des listes principales
   (variante claire de ccc-stat-pill, hors header gradient)
   ============================================================ */
.ccc-list-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 4px;
}
.ccc-list-stat {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid transparent;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: box-shadow 180ms ease, transform 180ms ease;
    min-width: 0;
}
.ccc-list-stat:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transform: translateY(-1px);
}
.ccc-list-stat .icon {
    width: 38px; height: 38px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ccc-list-stat .info { display: flex; flex-direction: column; min-width: 0; }
.ccc-list-stat .value {
    font-weight: 700;
    font-size: 20px;
    line-height: 1.1;
    font-family: ui-monospace, Menlo, monospace;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
}
.ccc-list-stat .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
    font-weight: 500;
}
.ccc-list-stat .sub {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
    opacity: 0.85;
}

/* Variantes de couleur (border-left + tile icon background) */
.ccc-list-stat.indigo  { border-left-color: #4F46E5; }
.ccc-list-stat.indigo  .icon { background: rgba(79,70,229,0.10);  color: #4F46E5; }
.ccc-list-stat.emerald { border-left-color: #10b981; }
.ccc-list-stat.emerald .icon { background: rgba(16,185,129,0.10); color: #059669; }
.ccc-list-stat.sky     { border-left-color: #0ea5e9; }
.ccc-list-stat.sky     .icon { background: rgba(14,165,233,0.10); color: #0284c7; }
.ccc-list-stat.amber   { border-left-color: #f59e0b; }
.ccc-list-stat.amber   .icon { background: rgba(245,158,11,0.10); color: #d97706; }
.ccc-list-stat.rose    { border-left-color: #f43f5e; }
.ccc-list-stat.rose    .icon { background: rgba(244,63,94,0.10);  color: #e11d48; }
.ccc-list-stat.violet  { border-left-color: #8b5cf6; }
.ccc-list-stat.violet  .icon { background: rgba(139,92,246,0.10); color: #7c3aed; }
.ccc-list-stat.slate   { border-left-color: #64748b; }
.ccc-list-stat.slate   .icon { background: rgba(100,116,139,0.10); color: #475569; }

@media (max-width: 1100px) {
    .ccc-list-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Skeleton blanc translucide pour valeurs en chargement sur fond gradient */
.ccc-skel-w {
    display: inline-block;
    height: 16px;
    background: rgba(255,255,255,0.18);
    border-radius: 4px;
    animation: ccc-skel-pulse 1.2s ease-in-out infinite;
    vertical-align: middle;
}
@keyframes ccc-skel-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.85; }
}

.ccc-stat-pill .info { display: flex; flex-direction: column; min-width: 0; }
.ccc-stat-pill .value {
    font-weight: 700;
    font-size: 16px;
    font-family: ui-monospace, Menlo, monospace;
    line-height: 1.1;
    white-space: nowrap;
}
.ccc-stat-pill .label {
    font-size: 10px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ccc-stat-pill .sub {
    font-size: 10px;
    opacity: 0.7;
    margin-top: 2px;
}

/* Mini barres CMJN dans header */
.ccc-stat-pill .cmykbars {
    display: flex;
    gap: 3px;
    align-items: stretch;
    height: 36px;
    flex-shrink: 0;
}
.ccc-stat-pill .cmykbars .bar {
    width: 8px;
    height: 100%;
    border-radius: 2px;
    background: rgba(255,255,255,0.20);
    position: relative;
    overflow: hidden;
}
.ccc-stat-pill .cmykbars .bar .fill {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    border-radius: 2px;
    transition: height 600ms ease-out;
}

/* ============================================================
   CCC — Layout 2 colonnes (graph + table relevés)
   ============================================================ */

.ccc-tab-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.ccc-twocol {
    display: grid;
    grid-template-columns: 1fr 420px;
    grid-template-rows: 1fr;
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.ccc-twocol > .panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

.ccc-twocol .panel-header {
    flex-shrink: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ccc-twocol .panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.ccc-twocol .panel-body.no-pad { padding: 0; }
.ccc-twocol .panel-body.no-scroll {
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    min-height: 220px;
}
/* Wrapper pour ApexChart en Height="100%" (parent doit avoir hauteur calculée) */
.ccc-chart-fill {
    position: absolute;
    inset: 12px 16px;
}
.ccc-chart-fill > * { width: 100%; height: 100%; }

.ccc-twocol .panel-footer {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.ccc-twocol .panel-footer .stat {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ccc-twocol .panel-footer .stat .label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}
.ccc-twocol .panel-footer .stat .value {
    font-family: ui-monospace, Menlo, monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 1280px) {
    .ccc-twocol {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/* ============================================================
   CCC — Type selection grid (création abonnement)
   ============================================================ */

.ccc-type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ccc-type-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms, transform 80ms, box-shadow 120ms;
    font-family: inherit;
    color: inherit;
}
.ccc-type-card:hover {
    border-color: #4F46E5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.10);
}
.ccc-type-card.active {
    border-color: #4F46E5;
    background: rgba(79,70,229,0.04);
}
.ccc-type-card .title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.ccc-type-card .subtitle {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ============================================================
   CCC — Empty state
   ============================================================ */

.ccc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
    gap: 12px;
}

.ccc-empty-state .icon-bg {
    width: 72px; height: 72px;
    border-radius: 18px;
    background: var(--mud-palette-action-default-hover);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.ccc-empty-state .icon-bg .mud-icon-root {
    font-size: 36px !important;
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

.ccc-empty-state .title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.ccc-empty-state .subtitle {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    max-width: 360px;
    line-height: 1.5;
}

/* Mono code */
.ccc-mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }

/* ============================================================
   CCC — Sidebar polish (MudNavMenu)
   ============================================================ */

.mud-drawer .mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    padding: 8px 12px;
    transition: background 120ms, color 120ms;
}
.mud-drawer .mud-nav-link:hover {
    background: var(--mud-palette-action-default-hover);
}
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link[aria-current="page"] {
    background: linear-gradient(135deg, rgba(79,70,229,0.10) 0%, rgba(79,70,229,0.04) 100%) !important;
    color: #4F46E5 !important;
    font-weight: 500;
    box-shadow: inset 2px 0 0 #4F46E5;
}
.mud-drawer .mud-nav-link.active .mud-icon-root,
.mud-drawer .mud-nav-link[aria-current="page"] .mud-icon-root {
    color: #4F46E5 !important;
}
.mud-drawer .mud-nav-group .mud-nav-link {
    margin-left: 16px;
}
.mud-drawer-header {
    padding: 20px 16px 8px 16px !important;
}

/* Filter card sobre */
.ccc-filters {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px 16px;
    background: var(--mud-palette-surface);
}

/* Hover row plus visible sur grille */
.mud-table-row:hover { background-color: var(--mud-palette-action-default-hover) !important; }

/* ============================================================
   CCC — Dashboard
   ============================================================ */

.ccc-dashboard {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ccc-dashboard .ccc-dashboard-header {
    flex-shrink: 0;
}

.ccc-dashboard .ccc-dashboard-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

/* Hover sur KPI clickable */
.ccc-kpi-card:hover {
    border-color: var(--mud-palette-text-primary) !important;
}

/* Item d'une liste interactive (top dettes, sav, etc.) */
.ccc-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color 150ms, background 150ms;
}
.ccc-list-item.clickable { cursor: pointer; }
.ccc-list-item.clickable:hover {
    border-color: var(--mud-palette-text-primary);
    background: var(--mud-palette-action-default-hover);
}

@media (max-width: 960px) {
    .ccc-dashboard {
        height: auto;
    }
    .ccc-dashboard .ccc-dashboard-content {
        overflow-y: visible;
    }
}

html, body { overflow-x: hidden; }

/* ============================================================
   CCC — TabBar (onglets multi-pages style browser)
   ============================================================ */
.ccc-tabbar {
    display: flex;
    align-items: stretch;
    gap: 2px;
    padding: 6px 12px 0 12px;
    background: var(--mud-palette-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    overflow-x: auto;
    overflow-y: hidden;
    height: 40px;
    scrollbar-width: thin;
    flex-shrink: 0;
}
.ccc-tabbar::-webkit-scrollbar { height: 4px; }
.ccc-tabbar::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 2px;
}
.ccc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 34px;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
    flex-shrink: 0;
    max-width: 220px;
    position: relative;
    top: 1px;
}
.ccc-tab:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}
.ccc-tab.active {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-lines-default);
    z-index: 2;
}
.ccc-tab.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--mud-palette-surface);
}
.ccc-tab-icon { opacity: 0.7; flex-shrink: 0; }
.ccc-tab.active .ccc-tab-icon { opacity: 1; }
.ccc-tab-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 160px;
}
.ccc-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px; height: 18px;
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease;
    flex-shrink: 0;
}
.ccc-tab:hover .ccc-tab-close,
.ccc-tab.active .ccc-tab-close { opacity: 0.6; }
.ccc-tab-close:hover {
    background: var(--mud-palette-error-hover, rgba(220,38,38,0.12));
    color: #dc2626;
    opacity: 1 !important;
}

/* ============================================================
   CCC — Fil d'Ariane historique de navigation
   ============================================================ */
.ccc-nav-history {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    line-height: 1.2;
}
.ccc-nav-history .ccc-nav-sep {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
    font-size: 16px !important;
}
.ccc-nav-history .ccc-nav-link,
.ccc-nav-history .ccc-nav-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    transition: background-color 140ms ease, color 140ms ease;
}
.ccc-nav-history .ccc-nav-link {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}
.ccc-nav-history .ccc-nav-link:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-primary);
}
.ccc-nav-history .ccc-nav-current {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}
.ccc-nav-history .ccc-nav-current .mud-icon-root,
.ccc-nav-history .ccc-nav-link .mud-icon-root {
    font-size: 14px !important;
    opacity: 0.7;
}

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ============================================================
   CCC — Animation entrée de page (fade + slight slide-up)
   ============================================================ */
@keyframes ccc-page-enter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ccc-page-list,
.ccc-page-detail,
.ccc-page-scroll,
.ccc-dashboard {
    animation: ccc-page-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ============================================================
   CCC — Skeleton "morphologique" : lignes qui matchent la grille
   ============================================================ */
.ccc-skeleton-rows {
    padding: 4px 0;
}
.ccc-skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ccc-skel-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--mud-palette-table-striped) 0%, var(--mud-palette-action-default-hover) 50%, var(--mud-palette-table-striped) 100%);
    background-size: 200% 100%;
    animation: ccc-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
.ccc-skel-square {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--mud-palette-table-striped) 0%, var(--mud-palette-action-default-hover) 50%, var(--mud-palette-table-striped) 100%);
    background-size: 200% 100%;
    animation: ccc-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
.ccc-skel-line {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--mud-palette-table-striped) 0%, var(--mud-palette-action-default-hover) 50%, var(--mud-palette-table-striped) 100%);
    background-size: 200% 100%;
    animation: ccc-shimmer 1.4s ease-in-out infinite;
}
.ccc-skel-line.short { width: 40%; }
.ccc-skel-line.medium { width: 60%; }
.ccc-skel-line.long { width: 80%; }
.ccc-skel-pill {
    height: 22px;
    width: 80px;
    border-radius: 11px;
    background: linear-gradient(90deg, var(--mud-palette-table-striped) 0%, var(--mud-palette-action-default-hover) 50%, var(--mud-palette-table-striped) 100%);
    background-size: 200% 100%;
    animation: ccc-shimmer 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes ccc-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  100% 0; }
}
.ccc-skel-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* ============================================================
   CCC — Quick actions menu (apparaît au hover de ligne)
   ============================================================ */
.ccc-row-actions {
    opacity: 0;
    transition: opacity 140ms ease;
}
.mud-table-row:hover .ccc-row-actions {
    opacity: 1;
}
/* sur tactile / focus, rendre toujours visible */
.mud-table-row:focus-within .ccc-row-actions {
    opacity: 1;
}

/* ============================================================
   CCC — Recherche globale (palette Cmd+K)
   ============================================================ */
.ccc-cmdk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
    animation: ccc-cmdk-fade 160ms ease;
}
@keyframes ccc-cmdk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}
.ccc-cmdk-panel {
    width: 640px;
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ccc-cmdk-slide 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ccc-cmdk-slide {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.ccc-cmdk-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ccc-cmdk-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--mud-palette-text-primary);
    font-family: 'Inter', sans-serif;
}
.ccc-cmdk-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}
.ccc-cmdk-kbd {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}
.ccc-cmdk-results {
    overflow-y: auto;
    flex: 1;
    padding: 8px;
}
.ccc-cmdk-section-label {
    padding: 10px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
}
.ccc-cmdk-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 100ms ease;
}
.ccc-cmdk-item:hover,
.ccc-cmdk-item.active {
    background: var(--mud-palette-action-default-hover);
}
.ccc-cmdk-item .icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: var(--mud-palette-table-striped);
    color: var(--mud-palette-primary);
}
.ccc-cmdk-item .body { flex: 1; min-width: 0; }
.ccc-cmdk-item .body .title {
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    line-height: 1.2;
}
.ccc-cmdk-item .body .subtitle {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.ccc-cmdk-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}
.ccc-cmdk-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--mud-palette-table-striped);
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}
.ccc-cmdk-footer .hints {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* ============================================================
   CCC — Notifications popover (cloche top bar)
   ============================================================ */
.ccc-notif-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ccc-notif-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #DC2626;
    color: white;
    border: 2px solid var(--mud-palette-appbar-background);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    pointer-events: none;
    box-sizing: content-box;
    font-family: 'Inter', sans-serif;
}
.ccc-notif-popup {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(0,0,0,0.18);
    z-index: 2001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: ccc-notif-slide 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes ccc-notif-slide {
    from { opacity: 0; transform: translateY(-4px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ccc-notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: transparent;
}
.ccc-notif-panel {
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ccc-notif-header {
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.ccc-notif-header .title {
    font-weight: 600;
    font-size: 14px;
}
.ccc-notif-list {
    overflow-y: auto;
    flex: 1;
}
.ccc-notif-item {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color 100ms ease;
}
.ccc-notif-item:hover {
    background: var(--mud-palette-action-default-hover);
}
.ccc-notif-item:last-child { border-bottom: none; }
.ccc-notif-item .icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ccc-notif-item .icon.critical { background: rgba(220,38,38,0.10); color: #dc2626; }
.ccc-notif-item .icon.warning  { background: rgba(245,158,11,0.10); color: #d97706; }
.ccc-notif-item .icon.info     { background: rgba(59,130,246,0.10); color: #2563eb; }
.ccc-notif-item .body { flex: 1; min-width: 0; }
.ccc-notif-item .body .title {
    font-weight: 500;
    font-size: 13px;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}
.ccc-notif-item .body .desc {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.ccc-notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}
.ccc-notif-empty .ico { font-size: 40px; opacity: 0.3; margin-bottom: 8px; }

/* ============================================================
   CCC — Brand (logo + nom dans la top bar)
   ============================================================ */
.ccc-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}
.ccc-brand-logo {
    height: 26px;
    width: auto;
    display: block;
    opacity: 0.95;
}
.ccc-brand-text {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--mud-palette-text-primary);
}

/* ============================================================
   CCC — Drawer (sidebar) avec logo en bas
   ============================================================ */
.ccc-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.ccc-drawer-nav {
    flex: 1;
    overflow-y: auto;
}
.ccc-drawer-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: transparent;
}
.ccc-drawer-logo {
    width: 96px;
    height: auto;
    opacity: 0.9;
    transition: opacity 200ms ease, transform 200ms ease;
}
.ccc-drawer-logo:hover {
    opacity: 1;
    transform: scale(1.04);
}
.ccc-drawer-version {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.9;
}

/* ============================================================
   CCC — Toner cartridges (CMJN SVG avec niveau rempli)
   ============================================================ */
.ccc-toner-cartridges {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
}
.ccc-toner-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}
.ccc-toner-cart-svg {
    width: 32px;
    height: 56px;
    display: block;
    overflow: visible;
}
.ccc-toner-cart-fill {
    transition: height 340ms cubic-bezier(.22, 1, .36, 1),
                y 340ms cubic-bezier(.22, 1, .36, 1);
}
/* Pulse discret si niveau bas (<15%) pour attirer l'œil */
.ccc-toner-cart-fill.low {
    animation: ccc-toner-low-pulse 1.8s ease-in-out infinite;
}
@keyframes ccc-toner-low-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}
.ccc-toner-cart-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.ccc-toner-cart-pct.muted {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
    font-weight: 500;
    font-size: 10px;
}
.ccc-toner-cart-pct.low {
    color: #ef4444;
}

/* ============================================================
   CCC — Printer illustration (silhouette SVG par marque)
   ============================================================ */
.ccc-printer-illu {
    display: inline-block;
    flex-shrink: 0;
    /* Variables override-ables par .dark si besoin */
    --ccc-printer-shell:        #f1f5f9;
    --ccc-printer-shell-top:    #e5e7eb;
    --ccc-printer-shell-stroke: #94a3b8;
    --ccc-printer-glass:        #cbd5e1;
}
.ccc-printer-illu-svg {
    width: 100%;
    height: 100%;
    display: block;
}
[data-ccc-theme="dark"] .ccc-printer-illu {
    --ccc-printer-shell:        #27272a;
    --ccc-printer-shell-top:    #3f3f46;
    --ccc-printer-shell-stroke: #71717a;
    --ccc-printer-glass:        #52525b;
}

/* ============================================================
   CCC — Installer agent (dialog body)
   Le body du dialog est flex + overflow:hidden par design (chaque contenu
   gère son scroll). Le wrapper Installer doit donc scroller lui-même pour
   éviter que le panneau "Installations en attente" soit clippé en 100%.
   ============================================================ */
.ccc-installer-wrapper {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px; /* réserve la gutter de scrollbar */
}
.ccc-installer-wrapper > .ccc-wizard-intro { padding-bottom: 8px !important; }

/* ============================================================
   CCC — Sub-links cliquables dans une ligne (références croisées)
   ex: cliquer sur le magasin dans une ligne photocopieuse
   ============================================================ */
.ccc-sub-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 140ms ease, transform 140ms ease;
    color: inherit;
    text-decoration: none;
    position: relative;
}
.ccc-sub-link .ccc-sub-link-icon {
    opacity: 0.55;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    flex-shrink: 0;
    color: var(--mud-palette-primary);
}
.ccc-sub-link:hover {
    background-color: var(--mud-palette-primary-hover, rgba(99,102,241,0.08));
}
.ccc-sub-link:hover .ccc-sub-link-icon {
    opacity: 1;
    transform: scale(1.15) rotate(-3deg);
}
.ccc-sub-link:hover .ccc-sub-link-text {
    color: var(--mud-palette-primary);
}
.ccc-sub-link-text {
    transition: color 140ms ease;
    font-weight: 500;
    line-height: 1.1;
}
.ccc-sub-link-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* ============================================================
   CCC — Dark mode overrides pour bannières (réduit la saturation)
   ============================================================ */
[data-ccc-theme="dark"] .ccc-detail-header.indigo  { background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%); }
[data-ccc-theme="dark"] .ccc-detail-header.emerald { background: linear-gradient(135deg, #047857 0%, #022c22 100%); }
[data-ccc-theme="dark"] .ccc-detail-header.rose    { background: linear-gradient(135deg, #9f1239 0%, #4c0519 100%); }
[data-ccc-theme="dark"] .ccc-detail-header.amber   { background: linear-gradient(135deg, #b45309 0%, #451a03 100%); }
[data-ccc-theme="dark"] .ccc-detail-header.slate   { background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }
[data-ccc-theme="dark"] .ccc-detail-header.sky     { background: linear-gradient(135deg, #0369a1 0%, #082f49 100%); }
[data-ccc-theme="dark"] .ccc-detail-header {
    border: 1px solid rgba(255,255,255,0.06);
}
[data-ccc-theme="dark"] .ccc-detail-header::before {
    background: rgba(255,255,255,0.04);
}

/* Améliorer contraste des mini-pills en dark */
[data-ccc-theme="dark"] .ccc-stat-pill {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.10);
}
[data-ccc-theme="dark"] .ccc-stat-pill .icon {
    background: rgba(255,255,255,0.08);
}

/* Light mode : plus de contraste sur les pills (bordure plus marquée) */
.ccc-stat-pill {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.14);
}
.ccc-stat-pill .icon { background: rgba(255,255,255,0.18); }
.ccc-stat-pill .label {
    color: rgba(255,255,255,0.95);
    font-weight: 500;
}
.ccc-stat-pill .sub {
    color: rgba(255,255,255,0.75);
}

/* ============================================================
   CCC — Lignes cliquables dans les grilles
   - Curseur pointer + hover marqué + chevron visible
   - Activé sur les MudDataGrid à l'intérieur de .ccc-clickable-rows
   ============================================================ */
.ccc-clickable-rows .mud-table-row {
    cursor: pointer;
    transition: background-color 120ms ease;
}
.ccc-clickable-rows .mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
}
.ccc-clickable-rows .mud-table-row:hover .ccc-row-chevron {
    opacity: 1;
    transform: translateX(2px);
}
.ccc-row-chevron {
    opacity: 0.35;
    transition: opacity 140ms ease, transform 140ms ease;
    color: var(--mud-palette-text-secondary);
}

/* Indicateur visuel de bord gauche au hover (subtil) */
.ccc-clickable-rows .mud-table-row {
    box-shadow: inset 3px 0 0 transparent;
}
.ccc-clickable-rows .mud-table-row:hover {
    box-shadow: inset 3px 0 0 var(--mud-palette-primary);
}

/* ============================================================
   CCC — Cycles facturation : cards années + mois
   ============================================================ */

.ccc-year-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.ccc-year-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 18px 20px;
    cursor: pointer;
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ccc-year-card:hover {
    border-color: #4F46E5;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.10);
    transform: translateY(-1px);
}
.ccc-year-card.closed { opacity: 0.85; }

.ccc-year-card .head {
    display: flex; align-items: center; justify-content: space-between;
}
.ccc-year-card .head .year {
    font-size: 28px; font-weight: 700; letter-spacing: -0.5px;
    color: var(--mud-palette-text-primary);
}
.ccc-year-card .badge {
    font-size: 11px; font-weight: 600; padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ccc-year-card .badge.active { background: rgba(34,197,94,0.12); color: #15803d; }
.ccc-year-card .badge.closed { background: rgba(100,116,139,0.12); color: #475569; }

.ccc-year-card .totals {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.ccc-year-card .kpi {
    display: flex; flex-direction: column; gap: 2px;
}
.ccc-year-card .kpi .value {
    font-size: 18px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}
.ccc-year-card .kpi .label {
    font-size: 11px; color: var(--mud-palette-text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
}

.ccc-year-card .months .bar-row {
    display: flex; height: 8px; border-radius: 4px; overflow: hidden;
    background: var(--mud-palette-lines-default);
}
.ccc-year-card .months .bar-row .seg { display: block; }
.ccc-year-card .months .bar-row .seg.confirmed { background: #22c55e; }
.ccc-year-card .months .bar-row .seg.validated { background: #f59e0b; }
.ccc-year-card .months .bar-row .seg.draft     { background: #cbd5e1; }
.ccc-year-card .months .legend {
    display: flex; gap: 12px; margin-top: 6px;
    font-size: 11px; color: var(--mud-palette-text-secondary);
    align-items: center;
}
.ccc-year-card .months .legend .dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    margin-right: 4px; vertical-align: middle;
}
.ccc-year-card .months .legend .dot.confirmed { background: #22c55e; }
.ccc-year-card .months .legend .dot.validated { background: #f59e0b; }
.ccc-year-card .months .legend .dot.draft     { background: #cbd5e1; }

.ccc-year-card .foot {
    font-size: 11px; color: var(--mud-palette-text-secondary);
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 10px;
    display: flex; gap: 6px;
}

/* Mois : grille 4×3 */
.ccc-month-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr));
    gap: 14px;
}
@media (max-width: 1100px) {
    .ccc-month-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
    .ccc-month-grid { grid-template-columns: repeat(2, 1fr); }
}

.ccc-month-card {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 3px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 140ms, box-shadow 140ms, transform 140ms;
    display: flex; flex-direction: column; gap: 8px;
    min-height: 110px;
}
.ccc-month-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}
.ccc-month-card.confirmed { border-left-color: #22c55e; }
.ccc-month-card.validated { border-left-color: #f59e0b; }
.ccc-month-card.draft     { border-left-color: #cbd5e1; }

.ccc-month-card .month-head {
    display: flex; align-items: center; justify-content: space-between;
}
.ccc-month-card .month-name {
    font-weight: 600; font-size: 14px;
    color: var(--mud-palette-text-primary);
    text-transform: capitalize;
}
.ccc-month-card .status-pill {
    font-size: 10px; font-weight: 600; padding: 2px 6px;
    border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em;
}
.ccc-month-card .status-pill.confirmed { background: rgba(34,197,94,0.14); color: #15803d; }
.ccc-month-card .status-pill.validated { background: rgba(245,158,11,0.14); color: #b45309; }
.ccc-month-card .status-pill.draft     { background: rgba(100,116,139,0.10); color: #475569; }

.ccc-month-card .stats {
    display: flex; gap: 14px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}
.ccc-month-card .stats strong {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.ccc-month-card .total-amount {
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* Stats compactes du MonthSheet QuickPanel */
.ccc-month-quick-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.ccc-month-quick-stats .stat {
    background: var(--mud-palette-action-default-hover);
    border-radius: 8px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 2px;
}
.ccc-month-quick-stats .stat .value {
    font-size: 16px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}
.ccc-month-quick-stats .stat .label {
    font-size: 11px; color: var(--mud-palette-text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.ccc-month-quick-stats .stat.due .value { color: #dc2626; }

/* Liste compacte des factures dans le QuickPanel */
.ccc-month-quick-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px; overflow: hidden;
}
.ccc-month-quick-list .row {
    display: grid; grid-template-columns: 120px 1fr 100px 20px;
    gap: 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: background-color 120ms;
    align-items: center;
}
.ccc-month-quick-list .row:last-child { border-bottom: none; }
.ccc-month-quick-list .row:hover { background: var(--mud-palette-action-default-hover); }
.ccc-month-quick-list .row .row-chevron {
    color: var(--mud-palette-text-secondary);
    opacity: 0.3;
    transition: opacity 140ms, transform 160ms;
}
.ccc-month-quick-list .row:hover .row-chevron {
    opacity: 1;
    transform: translateX(2px);
}
.ccc-month-quick-list .col-num { display: flex; flex-direction: column; gap: 2px; }
.ccc-month-quick-list .col-num .num {
    font-family: ui-monospace, Menlo, monospace;
    font-size: 12px; font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.ccc-month-quick-list .col-num .date {
    font-size: 11px; color: var(--mud-palette-text-secondary);
}
.ccc-month-quick-list .col-mag { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ccc-month-quick-list .col-mag .mag {
    font-size: 13px; font-weight: 500;
    color: var(--mud-palette-text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccc-month-quick-list .col-mag .ville {
    font-size: 11px; color: var(--mud-palette-text-secondary);
}
.ccc-month-quick-list .col-amt {
    display: flex; flex-direction: column; gap: 2px;
    align-items: flex-end;
}
.ccc-month-quick-list .col-amt .ttc {
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}
.ccc-month-quick-list .col-amt .due {
    font-size: 11px; color: #dc2626; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.ccc-month-quick-list .col-amt .paid {
    font-size: 11px; color: #15803d; font-weight: 500;
}


/* ============================================================
   CCC — Facture detail panel : section client + compteurs
   ============================================================ */

.ccc-facture-client {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
}
.ccc-facture-client .client-main {
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.ccc-facture-client .client-main .addr {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}
.ccc-facture-client .client-period {
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    text-align: right;
    min-width: 130px;
}
.ccc-facture-client .client-period .caption {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}
.ccc-facture-client .client-period .date {
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* Compteur N&B / couleur côte à côte */
.ccc-counter-block {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}
.ccc-counter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.ccc-counter-grid .cell {
    background: var(--mud-palette-table-striped);
    border-radius: 6px;
    padding: 10px;
    display: flex; flex-direction: column; gap: 4px;
    min-width: 0;
}
.ccc-counter-grid .cell .caption {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}
.ccc-counter-grid .cell .caption strong {
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}
.ccc-counter-grid .cell .counters {
    display: flex; align-items: baseline; gap: 4px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 13px;
    flex-wrap: wrap;
}
.ccc-counter-grid .cell .counters .prev {
    color: var(--mud-palette-text-secondary);
}
.ccc-counter-grid .cell .counters .curr {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Preview facturation : lignes d'écart / warning */
.ccc-preview-row.row-ecart { background: rgba(220, 38, 38, 0.06); }
.ccc-preview-row.row-ecart:hover { background: rgba(220, 38, 38, 0.10); }
.ccc-preview-row.row-warn { background: rgba(245, 158, 11, 0.05); }
.ccc-preview-row.row-warn:hover { background: rgba(245, 158, 11, 0.10); }

/* Preview facturation : sticky header sur le scroll naturel de .ccc-detail-content */
.ccc-preview-table thead th {
    background: var(--mud-palette-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}