/* =========================================================================
   RAINETTE - design system facon shadcn/ui (new-york v4), mode clair
   Jetons : couleurs RAINETTE (teal #49a89b = primary, navy #1f2833 = foreground), neutres slate.
   Composants : Components/Ui/* (Button, Badge, Card, Input...). MudBlazor ne sert plus qu'aux
   dialogues, notifications et infobulles : ils sont restyles en fin de fichier.
   ========================================================================= */

:root {
    --radius: 0.625rem;
    --background: #ffffff;
    --foreground: #1f2833;
    --card: #ffffff;
    --card-foreground: #1f2833;
    --popover: #ffffff;
    --popover-foreground: #1f2833;
    --primary: #49a89b;
    --primary-foreground: #ffffff;
    /* Teal assombri : texte et icones teal lisibles sur fond clair */
    --primary-strong: #2f7d73;
    --secondary: #f1f5f9;
    --secondary-foreground: #1f2833;
    --muted: #f1f5f9;
    --muted-foreground: #64748b;
    --accent: #f1f5f9;
    --accent-foreground: #1f2833;
    --destructive: #c1280d;
    --success: #3f8159;
    --warning: #b7862a;
    --info: #2a7b9b;
    --border: #e2e8f0;
    --input: #dbe2ea;
    --ring: #49a89b;
    /* Fond de la barre laterale et de la page (shadcn sidebar variant="inset") : le contenu est une carte blanche */
    --sidebar: #f8fafc;
    --sidebar-foreground: #1f2833;
    --sidebar-accent: #eef2f6;
    --sidebar-border: #e2e8f0;
    --chart-1: #49a89b;
    --chart-2: #4e6480;
    --chart-3: #3f8159;
    --chart-4: #7596bf;
    --chart-5: #b7862a;
    /* Niveaux GC > Enseigne > Sous-enseigne > Sous-sous-enseigne */
    --navy-1: #1f2833;
    --navy-2: #273240;
    --navy-3: #4e6480;
    --navy-4: #7596bf;
    --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.1);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
    --sidebar-width: 16rem;
    --header-height: 3rem;
    /* Marge autour de la carte de contenu (SidebarInset : md:m-2) */
    --inset-gap: 0.5rem;
    /* Palette Vivalya : tiber pour la structure et la selection, teal pour les actions ; statuts de comparaison
       en couleur pleine. Selection des listes maitre-detail : degrade clair, texte tiber (contraste AA). */
    --vv-teal: #008684;
    --vv-teal-hover: #006f6d;
    --vv-tiber: #053833;
    --vv-tiber-soft: #eaf4f2;
    --vv-line: var(--border);
    --vv-line-soft: #edf1f5;
    --vv-ink: #10201e;
    --vv-muted: #4d5856;
    --st-same-bg: #d9f2e3; --st-same-fg: #0b6b3a;
    --st-near-bg: #ffeac2; --st-near-fg: #8a4b00;
    --st-diff-bg: #fde0db; --st-diff-fg: #a8200d;
    --st-none-bg: #e9eceb; --st-none-fg: #4d5856;
    --selection-bg: linear-gradient(to bottom right, #e3f1f0, #78cbb9);
    --selection-muted: #23413d;
    /* Couleur d'environnement (pastille du badge de l'en-tete) : transparente en prod */
    --env: transparent;
}
html[data-env="preprod"] { --env: #495ba8; }
html[data-env="dev"] { --env: #a86c49; }

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

html, body { margin: 0; padding: 0; }
body {
    font-family: 'Geist', 'Segoe UI', system-ui, sans-serif !important;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--foreground) !important;
    background: var(--background) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p { margin: 0; }
/* Titre focalise par FocusOnNavigate (accessibilite) : pas de contour visible */
h1:focus { outline: none; }
code, pre, kbd, .font-mono { font-family: 'Geist Mono', 'Cascadia Code', 'Consolas', monospace !important; }
code { font-size: 0.8125rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem; background: var(--muted); }

.text-muted { color: var(--muted-foreground) !important; }
.tabular { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.separator { height: 1px; background: var(--border); border: 0; margin: 0; }
.separator-v { width: 1px; height: 1rem; background: var(--border); flex-shrink: 0; }

.icon { width: 1rem; height: 1rem; flex-shrink: 0; pointer-events: none; }
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   Button
   ========================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 2.25rem; padding: 0 1rem; flex-shrink: 0;
    border: 1px solid transparent; border-radius: calc(var(--radius) - 2px);
    font: inherit; font-size: 0.875rem; font-weight: 500; line-height: 1; white-space: nowrap;
    text-decoration: none; cursor: pointer; user-select: none; outline: none;
    transition: background-color 150ms, color 150ms, border-color 150ms, box-shadow 150ms;
}
.btn:has(> .icon) { padding: 0 0.75rem; }
.btn:focus-visible { border-color: var(--ring); box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }

.btn-default { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-xs); }
.btn-default:hover { background: color-mix(in srgb, var(--primary) 88%, var(--foreground)); }
.btn-destructive { background: var(--destructive); color: #ffffff; box-shadow: var(--shadow-xs); }
.btn-destructive:hover { background: color-mix(in srgb, var(--destructive) 90%, black); }
.btn-outline { background: var(--background); color: var(--foreground); border-color: var(--input); box-shadow: var(--shadow-xs); }
.btn-outline:hover { background: var(--accent); }
.btn-secondary { background: var(--secondary); color: var(--secondary-foreground); box-shadow: var(--shadow-xs); }
.btn-secondary:hover { background: #e2e8f0; }
.btn-ghost { background: transparent; color: var(--foreground); }
.btn-ghost:hover { background: var(--accent); }
.btn-link { background: transparent; color: var(--primary-strong); height: auto; padding: 0; text-underline-offset: 4px; }
.btn-link:hover { text-decoration: underline; }

.btn-sm { height: 2rem; padding: 0 0.75rem; gap: 0.375rem; }
.btn-sm:has(> .icon) { padding: 0 0.625rem; }
.btn-lg { height: 2.5rem; padding: 0 1.5rem; }
.btn-icon, .btn-icon:has(> .icon) { width: 2.25rem; padding: 0; }
.btn-icon.btn-sm { width: 2rem; height: 2rem; }
.btn-block { width: 100%; }

/* =========================================================================
   Input, Select, Textarea, Label, Field
   ========================================================================= */
.input {
    display: flex; width: 100%; min-width: 0; height: 2.25rem; padding: 0.25rem 0.75rem;
    border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px);
    background: var(--background); color: var(--foreground);
    font: inherit; font-size: 0.875rem; box-shadow: var(--shadow-xs); outline: none;
    transition: color 150ms, border-color 150ms, box-shadow 150ms;
}
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible { border-color: var(--ring); box-shadow: var(--focus-ring); }
.input[aria-invalid="true"] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input[readonly] { background: var(--muted); }
textarea.input { height: auto; min-height: 4rem; padding: 0.5rem 0.75rem; line-height: 1.45; resize: vertical; }
select.input {
    appearance: none; padding-right: 2rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.625rem center; background-size: 1rem;
}
.input-otp { height: 3rem; text-align: center; letter-spacing: 0.75em; font-family: 'Geist Mono', monospace !important; font-size: 1.25rem; }

.input-search { position: relative; flex: 1; min-width: 200px; max-width: 24rem; }
.input-search > .icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.input-search .input { padding-left: 2.25rem; }

.label { display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1; user-select: none; }
.label-required { color: var(--destructive); }
.field { display: grid; gap: 0.5rem; min-width: 0; align-content: start; }
.field-description { font-size: 0.8125rem; color: var(--muted-foreground); }
.field-error { font-size: 0.8125rem; color: var(--destructive); }
.field-span-2 { grid-column: span 2; }
.field-span-3 { grid-column: span 3; }
.field-span-4 { grid-column: 1 / -1; }
.input-group { display: flex; gap: 0.5rem; align-items: center; }
.input-group .input { flex: 1; }

/* Formulaires : grille, sections de reglages (intitule a gauche), actions */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; align-items: start; }
@media (max-width: 960px) { .form-grid { grid-template-columns: 1fr !important; } .field-span-2, .field-span-3 { grid-column: auto; } }
.form-section { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); }
.form-section:first-child { padding-top: 0; }
.form-section:last-of-type { border-bottom: none; }
.form-section-title { font-weight: 600; }
.form-section-description { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
@media (max-width: 960px) { .form-section { grid-template-columns: 1fr; gap: 0.75rem; } }
.form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.form-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }

/* Switch */
.switch-row { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; user-select: none; }
.switch-row.is-disabled { cursor: not-allowed; opacity: 0.5; }
.switch-row .label { line-height: 1.15rem; cursor: inherit; }
.switch-text { display: grid; gap: 0.375rem; }
.switch {
    display: inline-flex; align-items: center; justify-content: flex-start; flex-shrink: 0; width: 2rem; height: 1.15rem; padding: 0;
    border: 1px solid transparent; border-radius: 999px; background: var(--input); box-shadow: var(--shadow-xs);
    cursor: inherit; outline: none; transition: background-color 150ms;
}
.switch[aria-checked="true"] { background: var(--primary); }
.switch:focus-visible { border-color: var(--ring); box-shadow: var(--focus-ring); }
.switch-thumb { display: block; width: 1rem; height: 1rem; border-radius: 999px; background: var(--background); transition: transform 150ms; }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(calc(100% - 2px)); }

/* =========================================================================
   Card
   ========================================================================= */
.card {
    display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; padding: 1.5rem 0;
    border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px);
    background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow-sm);
}
.card-header { display: grid; grid-auto-rows: min-content; align-items: start; gap: 0.375rem; padding: 0 1.5rem; }
.card-header:has(> .card-action) { grid-template-columns: 1fr auto; }
.card-title { font-weight: 600; line-height: 1.25rem; }
.card-description { font-size: 0.875rem; color: var(--muted-foreground); }
.card-action { grid-column: 2; grid-row: 1 / span 2; align-self: start; justify-self: end; display: flex; align-items: center; gap: 0.5rem; }
.card-content { padding: 0 1.5rem; }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; padding: 0 1.5rem; }
.card-footer.border-t { padding-top: 1.5rem; border-top: 1px solid var(--border); }
/* Contenu sans marge (tableau) : colle aux bords de la carte */
.card-flush { padding-bottom: 0; overflow: hidden; }
.card-flush:not(:has(> .card-header)) { padding-top: 0; }
.card-flush .dt { border: 0; border-radius: 0; }
.card-flush > .card-header + .card-content-flush .dt { border-top: 1px solid var(--border); }

/* =========================================================================
   Badge, Alert, Avatar, Tabs, Empty
   ========================================================================= */
.badge {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; flex-shrink: 0;
    width: fit-content; padding: 0.125rem 0.5rem; overflow: hidden; white-space: nowrap;
    border: 1px solid transparent; border-radius: calc(var(--radius) - 4px);
    font-size: 0.75rem; font-weight: 500; line-height: 1rem;
}
.badge .icon { width: 0.75rem; height: 0.75rem; }
.badge-dot { width: 0.375rem; height: 0.375rem; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.badge-default { background: var(--primary); color: var(--primary-foreground); }
.badge-secondary { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline { border-color: var(--border); color: var(--foreground); }
.badge-brand { background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary-strong); }
.badge-success { background: color-mix(in srgb, var(--success) 12%, white); color: var(--success); }
.badge-warning { background: color-mix(in srgb, var(--warning) 14%, white); color: #8a6420; }
.badge-destructive { background: color-mix(in srgb, var(--destructive) 10%, white); color: var(--destructive); }
.badge-info { background: color-mix(in srgb, var(--info) 12%, white); color: var(--info); }

.alert {
    position: relative; display: grid; grid-template-columns: 0 1fr; align-items: start; gap: 0.125rem 0; width: 100%;
    padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--card-foreground); font-size: 0.875rem;
}
.alert:has(> .icon) { grid-template-columns: 1rem 1fr; column-gap: 0.75rem; }
.alert > .icon { transform: translateY(2px); }
.alert-title { grid-column: 2; font-weight: 500; line-height: 1.25rem; }
.alert-description { grid-column: 2; color: var(--muted-foreground); }
.alert-destructive { color: var(--destructive); border-color: color-mix(in srgb, var(--destructive) 30%, white); }
.alert-destructive .alert-description { color: color-mix(in srgb, var(--destructive) 85%, black); }
.alert-info > .icon { color: var(--info); }
.alert-success > .icon { color: var(--success); }
.alert-warning { background: color-mix(in srgb, var(--warning) 6%, white); border-color: color-mix(in srgb, var(--warning) 30%, white); }
.alert-warning > .icon { color: var(--warning); }

.avatar {
    display: inline-grid; place-items: center; flex-shrink: 0; border-radius: calc(var(--radius) - 2px);
    font-weight: 600; background: color-mix(in srgb, var(--primary) 14%, white); color: var(--primary-strong);
}

.tabs-list {
    display: inline-flex; align-items: center; width: fit-content; max-width: 100%; height: 2.25rem; padding: 3px;
    border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground); overflow-x: auto; scrollbar-width: none;
}
.tabs-trigger {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; height: 100%; padding: 0.25rem 0.75rem;
    border: 1px solid transparent; border-radius: calc(var(--radius) - 2px); background: transparent;
    font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); white-space: nowrap; cursor: pointer; outline: none;
    transition: color 150ms, box-shadow 150ms;
}
.tabs-trigger:hover { color: var(--foreground); }
.tabs-trigger:focus-visible { border-color: var(--ring); box-shadow: var(--focus-ring); }
.tabs-trigger[data-state="active"] { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-sm); }
.tabs-content { margin-top: 1rem; }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 3rem 1.5rem; text-align: center; }
.card .empty { padding: 1.5rem; }
.empty-media { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); background: var(--muted); color: var(--foreground); }
.empty-media .icon { width: 1.25rem; height: 1.25rem; }
.empty-header { display: grid; gap: 0.5rem; justify-items: center; max-width: 26rem; }
.empty-title { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.015em; }
.empty-description { font-size: 0.875rem; line-height: 1.4rem; color: var(--muted-foreground); }
.empty-content { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }

.divider-text { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--muted-foreground); }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Listes cle / valeur */
.kv { display: grid; grid-template-columns: minmax(120px, 180px) 1fr; margin: 0; font-size: 0.875rem; }
.kv dt { padding: 0.5rem 0; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.kv dd { margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--border); word-break: break-word; }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: none; }

/* =========================================================================
   Disposition : shadcn dashboard-01 (sidebar variant="inset") : barre laterale sur le fond gris de la page,
   contenu dans une carte blanche arrondie decollee des bords, en-tete dans la carte
   Repli et ouverture mobile : classes sidebar-collapsed / sidebar-open sur <html> (rainette.js)
   ========================================================================= */
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width);
    display: flex; flex-direction: column; background: var(--sidebar); color: var(--sidebar-foreground);
    transition: transform 200ms ease-out;
}
body { background: var(--sidebar) !important; }
.app-inset {
    display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 2 * var(--inset-gap));
    margin: var(--inset-gap) var(--inset-gap) var(--inset-gap) var(--sidebar-width);
    background: var(--background); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-sm);
    transition: margin-left 200ms ease-out;
}
html.sidebar-collapsed .sidebar { transform: translateX(-100%); }
html.sidebar-collapsed .app-inset { margin-left: var(--inset-gap); }
.sidebar-backdrop { display: none; }
@media (max-width: 767px) {
    .sidebar { width: 18rem; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    .app-inset { margin: 0 !important; min-height: 100vh; border-radius: 0; box-shadow: none; }
    html.sidebar-open .sidebar { transform: none; }
    html.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / 0.5); }
}

.sidebar-header { padding: 0.5rem; }
.sidebar-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 3rem; padding: 0 0.5rem; border-radius: calc(var(--radius) - 2px); text-decoration: none; }
.sidebar-brand:hover { background: var(--sidebar-accent); }
.sidebar-brand img { display: block; height: 30px; width: auto; }
/* Action principale (Quick Create du bloc) et raccourci a cote */
.sidebar-quick { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.5rem 0.5rem; }
.sidebar-quick-create {
    display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; height: 2rem; padding: 0 0.5rem;
    border-radius: calc(var(--radius) - 2px); background: var(--primary); color: var(--primary-foreground);
    font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background 150ms;
}
.sidebar-quick-create:hover { background: color-mix(in srgb, var(--primary) 88%, black); }
.sidebar-quick-create:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sidebar-quick .btn { flex-shrink: 0; background: var(--background); }
.sidebar-search { padding: 0 0.5rem 0.25rem; }
.sidebar-search .input-search { max-width: none; min-width: 0; }
.sidebar-search .input { height: 2rem; box-shadow: none; background: var(--background); }

.sidebar-content { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; scrollbar-width: thin; }
.sidebar-group { display: flex; flex-direction: column; min-width: 0; padding: 0.5rem; }
.sidebar-group-label { display: flex; align-items: center; height: 2rem; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 500; color: color-mix(in srgb, var(--sidebar-foreground) 70%, transparent); }
.sidebar-menu, .sidebar-menu-sub { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sidebar-menu-sub { margin: 0 0 0 0.875rem; padding: 0.125rem 0 0.125rem 0.625rem; border-left: 1px solid var(--sidebar-border); }
.sidebar-menu-item, .sidebar-menu-sub-item { position: relative; min-width: 0; }

.sidebar-menu-button, .sidebar-menu-sub-button {
    display: flex; align-items: center; gap: 0.5rem; width: 100%; min-width: 0; height: 2rem; padding: 0 0.5rem;
    border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--sidebar-foreground);
    font: inherit; font-size: 0.875rem; text-align: left; text-decoration: none; cursor: pointer; outline: none; overflow: hidden;
}
.sidebar-menu-sub-button { height: 1.75rem; }
.sidebar-menu-button > span, .sidebar-menu-sub-button > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-menu-button:hover, .sidebar-menu-sub-button:hover { background: var(--sidebar-accent); }
.sidebar-menu-button:focus-visible, .sidebar-menu-sub-button:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
/* Element actif : fond teinte uni plus marque que le survol, texte teal fonce (contraste AA), pas de barre ni de degrade */
.sidebar-menu-button.active, .sidebar-menu-sub-button.active { background: color-mix(in srgb, var(--primary) 22%, white); color: #174f48; font-weight: 600; }
.sidebar-menu-button.active > .icon:first-child, .sidebar-menu-sub-button.active > .icon:first-child { color: #174f48; }
.sidebar-chevron { margin-left: auto; color: var(--muted-foreground); transition: transform 200ms; }
[aria-expanded="true"] > .sidebar-chevron { transform: rotate(90deg); }
.sidebar-legacy { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); }
.nav-empty { padding: 0.5rem 1rem; font-size: 0.8125rem; color: var(--muted-foreground); }

.sidebar-footer { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; }
.sidebar-notice {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 2px);
    font-size: 0.75rem; color: #7a4a1f; background: color-mix(in srgb, #a86c49 12%, white); border: 1px solid color-mix(in srgb, #a86c49 25%, white);
}
.nav-user { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: calc(var(--radius) - 2px); }
.nav-user-info { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.nav-user-name { font-size: 0.875rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-user-email { font-size: 0.75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-header {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
    height: var(--header-height); padding: 0 1rem 0 0.75rem; border-bottom: 1px solid var(--border);
    border-radius: calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;
}
.app-header .breadcrumb-page { font-weight: 500; }
.app-header .separator-v { height: 1rem; margin: 0 0.25rem; }
.app-header-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.env-badge .badge-dot { background: var(--env); }
.app-content { flex: 1; min-width: 0; padding: 1.5rem; }
@media (max-width: 767px) { .app-content { padding: 1rem; } }

/* Fil d'Ariane */
.breadcrumb { min-width: 0; }
.breadcrumb ol { display: flex; align-items: center; gap: 0.375rem; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted-foreground); overflow: hidden; }
.breadcrumb-item { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
.breadcrumb-link { color: inherit; text-decoration: none; transition: color 150ms; }
.breadcrumb-link:hover { color: var(--foreground); }
.breadcrumb-page { color: var(--foreground); overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-separator { display: inline-flex; }
.breadcrumb-separator .icon { width: 0.875rem; height: 0.875rem; }
@media (max-width: 767px) { .breadcrumb-item:not(:last-child), .breadcrumb-separator { display: none; } }

/* En-tete de page */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; }
.page-header-text { flex: 1; min-width: 240px; }
.page-header-eyebrow { margin-bottom: 0.25rem; font-size: 0.875rem; font-weight: 500; color: var(--primary-strong); }
.page-header-title { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; }
.page-header-description { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); }
.page-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* Indicateurs */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { gap: 1rem; }
.stat-value { font-size: 1.5rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.stat-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); color: var(--muted-foreground); }
.stat-hint { justify-content: flex-start; font-size: 0.8125rem; color: var(--muted-foreground); }

/* Barre de filtres au-dessus d'une liste */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.filter-bar-spacer { flex: 1; }
.filter-bar-summary { font-size: 0.8125rem; color: var(--muted-foreground); }
.filter-bar-summary strong { color: var(--foreground); font-weight: 600; }

/* Accueil : un espace par section du menu */
.quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.space-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.space-card { gap: 0.75rem; padding: 0.75rem 0; }
.space-head { display: flex; align-items: center; gap: 0.75rem; margin: 0 0.75rem; padding: 0.5rem; border-radius: calc(var(--radius) - 2px); color: inherit; text-decoration: none; }
.space-head:hover { background: var(--accent); }
.space-icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: calc(var(--radius) - 2px); background: color-mix(in srgb, var(--primary) 12%, white); color: var(--primary-strong); }
.space-head-text { display: grid; flex: 1; min-width: 0; }
.space-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-count { font-size: 0.75rem; color: var(--muted-foreground); }
.space-head > .icon:last-child { color: var(--muted-foreground); }
.space-links { display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0 0.75rem; list-style: none; }
.space-link { display: flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.5rem; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; color: var(--foreground); text-decoration: none; }
.space-link:hover { background: var(--accent); }
.space-link > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.space-link > .icon { width: 0.875rem; height: 0.875rem; color: var(--muted-foreground); }
.space-more { padding: 0 1.25rem; font-size: 0.75rem; color: var(--muted-foreground); }

/* =========================================================================
   DataTable : grille dense (remplace les tables HyperList / DataTables du PHP)
   ========================================================================= */
.dt { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.dt-scroll { overflow: auto; max-height: var(--dt-height, calc(100vh - 260px)); }
.dt table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; }
.dt th, .dt td {
    height: 2.25rem; padding: 0 0.75rem; text-align: left; vertical-align: middle;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; border-bottom: 1px solid var(--border);
}
.dt thead th { position: sticky; top: 0; z-index: 2; height: 2.5rem; font-weight: 500; color: var(--foreground); background: var(--muted); user-select: none; }
.dt thead th.dt-sortable { cursor: pointer; }
.dt thead th.dt-sortable:hover { background: #e9eef4; }
.dt thead th .icon { width: 0.875rem; height: 0.875rem; margin-left: 0.25rem; vertical-align: -2px; color: var(--muted-foreground); }
.dt thead th.dt-sorted .icon { color: var(--foreground); }
.dt tbody tr:hover td { background: color-mix(in srgb, var(--muted) 60%, white); }
.dt tbody tr.dt-clickable { cursor: pointer; }
.dt tbody tr.dt-selected td { background: color-mix(in srgb, var(--primary) 9%, white); }
.dt tbody tr.dt-selected td:first-child { box-shadow: inset 2px 0 0 var(--primary); }
.dt td.num, .dt th.num { text-align: right; font-variant-numeric: tabular-nums; }
.dt td.center, .dt th.center { text-align: center; }
/* Colonnes figees ("figer les volets") */
.dt .dt-sticky { position: sticky; z-index: 1; background: var(--card); }
.dt thead .dt-sticky { z-index: 3; background: var(--muted); }
.dt .dt-sticky-last { box-shadow: 1px 0 0 var(--border), 6px 0 8px -6px rgb(15 23 42 / 0.15); }
.dt tfoot td { position: sticky; bottom: 0; font-weight: 600; background: var(--muted); border-top: 1px solid var(--border); }
.dt-empty { height: 6rem; text-align: center !important; color: var(--muted-foreground); }
.dt-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border-top: 1px solid var(--border); font-size: 0.8125rem; color: var(--muted-foreground); }
.dt-footer strong { color: var(--foreground); font-weight: 500; }

/* Niveaux de hierarchie (GC > Enseigne > Sous-enseigne > Sous-sous-enseigne), navy RAINETTE */
.lvl-1 { background: var(--navy-1) !important; color: #ffffff; }
.lvl-2 { background: var(--navy-2) !important; color: #ffffff; }
.lvl-3 { background: var(--navy-3) !important; color: #ffffff; }
.lvl-4 { background: var(--navy-4) !important; color: #ffffff; }
/* Sous-total / total general (RowST / RowGT du PHP) */
.dt tr.row-subtotal td { background: color-mix(in srgb, var(--primary) 18%, white); font-weight: 600; }
.dt tr.row-total td { background: var(--primary); color: #ffffff; font-weight: 600; }

/* Echelle de chaleur RAINETTE (pivots, carte, delais) : mauvais -> bon */
.heat-0 { background: #c1280d !important; color: #ffffff; }
.heat-1 { background: #f78d7b !important; }
.heat-2 { background: #fab4a7 !important; }
.heat-3 { background: #fcdad3 !important; }
.heat-4 { background: #def5ef !important; }
.heat-5 { background: #beebde !important; }
.heat-6 { background: #9de1ce !important; }
.heat-7 { background: #34ab8a !important; color: #ffffff; }

/* =========================================================================
   Connexion (shadcn login-02 : logo, carte centree sur fond muted)
   ========================================================================= */
.login-page {
    display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem;
    background: var(--muted);
}
.login-wrap { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; max-width: 24rem; }
.login-logo { align-self: center; display: block; height: 44px; width: auto; }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.login-foot { text-align: center; font-size: 0.75rem; color: var(--muted-foreground); }

/* =========================================================================
   MudBlazor (dialogues, notifications, infobulles) aligne sur les jetons
   ========================================================================= */
.mud-dialog {
    border: 1px solid var(--border); border-radius: var(--radius) !important;
    background: var(--background) !important; color: var(--foreground) !important; box-shadow: var(--shadow-lg) !important;
}
.mud-dialog .mud-dialog-title { padding: 1.5rem 1.5rem 0.5rem; border: 0; }
.mud-dialog .mud-dialog-title .mud-typography { font-family: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; letter-spacing: -0.01em; }
.mud-dialog .mud-dialog-content { padding: 0.5rem 1.5rem 1rem; font-family: inherit; }
.mud-dialog .mud-dialog-actions { gap: 0.5rem; padding: 0.5rem 1.5rem 1.5rem; }
.mud-dialog .mud-dialog-actions > :not(:first-child) { margin-left: 0; }
.dialog-description { font-size: 0.875rem; color: var(--muted-foreground); }
.dialog-body { display: grid; gap: 1rem; width: min(420px, 80vw); }

/* Notifications facon Sonner : carte blanche, icone coloree selon la gravite */
.mud-snackbar {
    min-width: 356px; padding: 0.875rem 1rem !important;
    background: var(--popover) !important; color: var(--popover-foreground) !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important;
    font-family: inherit !important; font-size: 0.875rem !important; font-weight: 500;
}
.mud-snackbar .mud-snackbar-icon { color: var(--muted-foreground); }
.mud-snackbar.mud-alert-outlined-success .mud-snackbar-icon { color: var(--success); }
.mud-snackbar.mud-alert-outlined-error .mud-snackbar-icon { color: var(--destructive); }
.mud-snackbar.mud-alert-outlined-warning .mud-snackbar-icon { color: var(--warning); }
.mud-snackbar.mud-alert-outlined-info .mud-snackbar-icon { color: var(--info); }
.mud-snackbar .mud-icon-button { color: var(--muted-foreground); }

.mud-tooltip {
    padding: 0.375rem 0.75rem !important; border-radius: calc(var(--radius) - 2px) !important;
    background: var(--foreground) !important; color: var(--background) !important;
    font-family: inherit !important; font-size: 0.75rem !important; font-weight: 400; line-height: 1rem;
}
.mud-tooltip .mud-tooltip-arrow::after { border-color: var(--foreground) transparent transparent transparent !important; }
.mud-popover { border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px) !important; box-shadow: var(--shadow-lg) !important; }

/* Graphiques ApexCharts */
.apexcharts-canvas text { font-family: 'Geist', 'Segoe UI', sans-serif !important; }
.apexcharts-legend-text { font-family: 'Geist', 'Segoe UI', sans-serif !important; color: var(--muted-foreground) !important; }

/* =========================================================================
   Ecrans migres (Features/) : lignes de groupe, cellules editables, bascules
   ========================================================================= */
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-destructive { color: var(--destructive); }
.mb-4 { margin-bottom: 1rem; }

/* Ligne d'intertitre dans une grille (en-tetes Header = 'Y' du PHP, adherent / domaine) */
.dt tbody tr.dt-group td { background: var(--muted); font-weight: 600; color: var(--foreground); }
.dt tbody tr.dt-group-0 td, .dt tbody tr.dt-group-1 td { background: var(--navy-1); color: #fff; }
.dt tbody tr.dt-group-2 td { background: var(--navy-2); color: #fff; }
.dt tbody tr.dt-group-3 td { background: var(--navy-3); color: #fff; }
.dt tbody tr.dt-group-4 td { background: var(--navy-4); color: #fff; }

/* Cellule editable (EditableCell) : champ compact + icone d'etat */
.inline-edit { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.inline-edit .input { height: 1.75rem; padding: 0 0.5rem; font-size: 0.8125rem; }
.inline-edit select.input { padding-right: 1.75rem; background-position: right 0.4rem center; }
.inline-edit-state { display: inline-flex; width: 1rem; flex-shrink: 0; justify-content: center; }
.inline-edit-state .icon { width: 0.875rem; height: 0.875rem; }

/* Bascule visible / masque, droit actif / inactif */
.toggle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; }
.toggle-chip {
    display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; height: 2.25rem; padding: 0 0.75rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card);
    font: inherit; font-size: 0.8125rem; text-align: left; cursor: pointer; transition: background 120ms, border-color 120ms;
}
.toggle-chip:hover:not(:disabled) { border-color: var(--primary); }
.toggle-chip:disabled { opacity: 0.6; cursor: wait; }
.toggle-chip .icon { flex-shrink: 0; }
.toggle-chip.is-on { color: var(--foreground); }
.toggle-chip.is-on .icon { color: var(--primary); }
.toggle-chip.is-off { color: var(--muted-foreground); background: var(--muted); }
.toggle-chip-sm { height: 1.625rem; padding: 0 0.5rem; gap: 0.25rem; font-size: 0.75rem; }
.toggle-chip-sm.is-on { border-color: color-mix(in srgb, var(--primary) 45%, transparent); background: color-mix(in srgb, var(--primary) 10%, white); }

/* Navigation par lettre (Masque Stats) */
.letter-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem; }
.letter-nav-item {
    display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.5rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--card);
    font-size: 0.8125rem; font-weight: 500; color: var(--foreground); text-decoration: none;
}
.letter-nav-item:hover { border-color: var(--primary); color: var(--primary); }

/* =========================================================================
   Panneau du layout (bloc shadcn sidebar-09, boite mail) : entre la barre laterale et le contenu, meme fond.
   Rempli par une page (SectionContent LayoutSections.SidebarPanel), masque sinon.
   ========================================================================= */
:root { --panel-width: 20rem; --panel-extra: 0rem; }
@media (max-width: 1279px) { :root { --panel-width: 18rem; } }
/* Colonne supplementaire avant la liste (sites des declaratifs) : le panneau s'elargit d'autant */
body:has(.panel-pair) { --panel-extra: 15rem; }
.sidebar-panel:empty { display: none; }
.sidebar-panel {
    position: fixed; top: 0; bottom: 0; left: var(--sidebar-width); z-index: 35; width: calc(var(--panel-width) + var(--panel-extra));
    display: flex; flex-direction: column; background: var(--sidebar); border-left: 1px solid var(--sidebar-border);
    transition: left 200ms ease-out;
}
html.sidebar-collapsed .sidebar-panel { left: 0; border-left: 0; }
body:has(.sidebar-panel:not(:empty)) .app-inset { margin-left: calc(var(--sidebar-width) + var(--panel-width) + var(--panel-extra) + var(--inset-gap)); }
html.sidebar-collapsed body:has(.sidebar-panel:not(:empty)) .app-inset { margin-left: calc(var(--panel-width) + var(--panel-extra) + var(--inset-gap)); }
.panel-pair { display: grid; grid-template-columns: var(--panel-extra) minmax(0, 1fr); height: 100%; min-height: 0; }
.panel-pair > .mail-panel:first-child { border-right: 1px solid var(--sidebar-border); }
.panel-single { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.mail-panel { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.mail-panel-head { display: grid; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--sidebar-border); }
.mail-panel-title { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.mail-panel-title h1 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vv-tiber); }
.mail-panel-count { padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--vv-tiber); color: #fff; font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mail-panel-title .text-muted { font-size: 0.75rem; }
.mail-panel-unread { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; font-size: 0.875rem; cursor: pointer; user-select: none; }
.mail-panel-tools { display: flex; align-items: center; gap: 0.25rem; }
.mail-panel-tools .input-search { max-width: none; min-width: 0; margin-right: 0.25rem; }
.mail-panel-tools .input { height: 2rem; background: var(--background); box-shadow: none; }
.mail-panel-filters { display: grid; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--sidebar-border); }
.mail-panel-filters .input { background: var(--background); }
.mail-panel-filters-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.mail-panel-items { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }

/* Element de liste : expediteur et date, sujet, apercu sur deux lignes. Hauteur fixe (Virtualize : ItemHeight = 113) */
.mail-item {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.375rem; width: 100%; height: 113px; padding: 0.875rem 1rem;
    border: 0; border-bottom: 1px solid var(--sidebar-border); background: transparent; color: var(--foreground);
    font: inherit; text-align: left; cursor: pointer; overflow: hidden;
}
.mail-item:hover { background: var(--vv-tiber-soft); }
/* Element courant : degrade clair du mapping, texte tiber */
.mail-item.is-active { background: var(--selection-bg); color: var(--vv-tiber); }
.mail-item.is-active .mail-item-date, .mail-item.is-active .mail-item-preview { color: var(--selection-muted); }
.mail-item.is-active .ticket-unread-dot { background: var(--vv-tiber); }
.mail-item.is-closed { color: var(--muted-foreground); }
.mail-item.is-active.is-closed { color: var(--selection-muted); }
.mail-item-top { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; }
.mail-item-from { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-date { display: inline-flex; align-items: center; gap: 0.375rem; flex-shrink: 0; font-size: 0.75rem; color: var(--muted-foreground); }
.mail-item-subject { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item-preview {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    height: 2rem; font-size: 0.75rem; line-height: 1rem; color: var(--muted-foreground); white-space: normal; overflow-wrap: anywhere;
}
.mail-item.is-unread .mail-item-from, .mail-item.is-unread .mail-item-subject { font-weight: 600; }
.ticket-unread-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--primary); }

/* Tickets (accueil) : le ticket ouvert occupe toute la zone de contenu, sans carte */
.app-content:has(> .tickets) { padding: 0; }
.tickets { height: calc(100vh - var(--header-height) - 2 * var(--inset-gap)); min-height: 520px; }
.tickets-detail { display: flex; flex-direction: column; height: 100%; overflow-y: auto; }
.tickets-detail > .empty { margin: auto; }

/* Mobile : panneau en pleine largeur sous l'en-tete ; liste ou ticket, l'un ou l'autre */
@media (max-width: 767px) {
    body { display: flex; flex-direction: column; }
    .app-inset { order: 1; min-height: 0 !important; }
    .sidebar-panel { order: 2; position: static; width: auto; height: auto; border-left: 0; }
    .mail-panel-items { overflow: visible; }
    .panel-pair { grid-template-columns: minmax(0, 1fr); }
    .panel-pair > .mail-panel:first-child { border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
    body:has(.tickets.has-selection) .sidebar-panel { display: none; }
    body:has(.tickets.has-selection) .app-inset { min-height: 100vh !important; }
    .tickets:not(.has-selection) { display: none; }
    .tickets { height: auto; min-height: calc(100vh - var(--header-height)); }
}

.ticket-detail { display: flex; flex-direction: column; min-height: 100%; }
.ticket-head { position: sticky; top: 0; z-index: 2; display: grid; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(8px); }
.ticket-head-top { display: flex; align-items: flex-start; gap: 0.75rem; }
.ticket-head-close { display: none; }
@media (max-width: 767px) { .ticket-head-close { display: inline-flex; } }
.ticket-logos { display: flex; gap: 0.25rem; flex-shrink: 0; }
.ticket-logos img { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; border: 1px solid var(--border); background: var(--card); }
.ticket-head-title { flex: 1; min-width: 0; }
.ticket-head-title h2 { margin: 0.25rem 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.ticket-head-meta { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
.ticket-id { border: 0; background: none; padding: 0; font: inherit; font-family: 'Geist Mono', monospace; font-size: 0.8125rem; color: var(--muted-foreground); cursor: copy; }
.ticket-id:hover { color: var(--primary); }
.ticket-head-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.ticket-head-info { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.ticket-head-info > span { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.ticket-head-accord { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.8125rem; padding: 0.5rem 0.75rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); }

.ticket-reply { display: grid; gap: 0.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.ticket-editor { height: auto; min-height: 4.5rem; max-height: 16rem; overflow-y: auto; display: block; padding: 0.5rem 0.75rem; line-height: 1.5; }
.ticket-editor:empty::before { content: attr(data-placeholder); color: var(--muted-foreground); pointer-events: none; }
.ticket-editor img { max-width: 100%; height: auto; }
.ticket-reply-actions { display: flex; align-items: center; gap: 0.75rem; }
.ticket-drop {
    position: relative; flex: 1; display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.75rem;
    border: 1px dashed var(--input); border-radius: calc(var(--radius) - 2px); color: var(--muted-foreground); font-size: 0.8125rem; cursor: pointer;
}
.ticket-drop:hover, .ticket-drop:focus-within { border-color: var(--primary); color: var(--primary); }
/* Champ fichier invisible etendu a toute la zone : clic et glisser-deposer natifs */
.ticket-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.ticket-thread { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.75rem 1.25rem 1.5rem; }
.chat-date { display: flex; justify-content: center; margin: 0.75rem 0 0.25rem; }
.chat-date span { padding: 0.125rem 0.75rem; border-radius: 999px; font-size: 0.75rem; color: var(--muted-foreground); background: var(--muted); border: 1px solid var(--border); }
.chat-event { display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin: 0.5rem 0; font-size: 0.75rem; color: var(--muted-foreground); }
.chat { display: flex; align-items: flex-end; gap: 0.5rem; max-width: 85%; margin-top: 0.375rem; }
.chat.chat-tailless { margin-top: 0.125rem; }
.chat-mine { flex-direction: row-reverse; margin-left: auto; }
.chat-avatar { width: 28px; flex-shrink: 0; }
.chat-avatar img { width: 28px; height: 28px; border-radius: 999px; object-fit: contain; border: 1px solid var(--border); background: var(--card); }
.chat-body { display: flex; flex-direction: column; min-width: 0; }
.chat-mine .chat-body { align-items: flex-end; }
.chat-author { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); margin: 0 0.5rem 0.125rem; }
.chat-bubble { padding: 0.5rem 0.75rem; border-radius: 1rem; background: var(--muted); color: var(--foreground); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; }
.chat-mine .chat-bubble { background: var(--primary); color: var(--primary-foreground); }
.chat:not(.chat-tailless) .chat-bubble { border-bottom-left-radius: 0.25rem; }
.chat-mine:not(.chat-tailless) .chat-bubble { border-bottom-left-radius: 1rem; border-bottom-right-radius: 0.25rem; }
.chat-subject { font-size: 0.75rem; font-weight: 600; opacity: 0.75; margin-bottom: 0.125rem; }
.chat-content img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.chat-content p { margin: 0; }
.chat-mine .chat-content a, .chat-mine .chat-file { color: inherit; }
.chat-image img { display: block; max-width: 320px; max-height: 240px; border-radius: 0.5rem; margin-bottom: 0.375rem; }
.chat-file { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; color: inherit; }
.chat-time { font-size: 0.6875rem; color: var(--muted-foreground); margin: 0.125rem 0.5rem 0; }

/* Selection multiple en pastilles (TagPicker) */
.tag-picker { display: grid; gap: 0.5rem; }
.tag-picker-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.tag-picker-tag { gap: 0.25rem; padding-right: 0.25rem; }
.tag-picker-remove { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.tag-picker-remove:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.tag-picker-remove .icon { width: 0.75rem; height: 0.75rem; }
.tag-picker.is-inline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; min-height: 2.25rem; padding: 0.1875rem 0.375rem;
    border: 1px solid var(--input); border-radius: var(--radius); background: var(--background);
}
.tag-picker.is-inline:focus-within { border-color: var(--ring); box-shadow: var(--focus-ring); }
.tag-picker.is-inline .tag-picker-tags { display: contents; }
.tag-picker.is-inline .input { flex: 1; min-width: 8rem; height: 1.75rem; padding: 0 0.375rem; border: 0; box-shadow: none; background: transparent; }
.tag-picker.is-inline .input:focus { box-shadow: none; }

/* Denouement */
.denouement-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.denouement-title { font-size: 0.875rem; font-weight: 600; margin: 1rem 0 0.5rem; }

/* ---------- Tableau croise (PivotWorkspace : ecrans EDI) ---------- */
.pv {
    display: grid; grid-template-columns: 15rem minmax(0, 1fr) 16rem; gap: 1rem; align-items: start;
}
.pv > .card { padding: 0; gap: 0; min-width: 0; }
.pv:fullscreen { padding: 1rem; background: var(--background); overflow: auto; }
.pv:fullscreen .pv-scroll { max-height: calc(100vh - 6rem); }
/* Ecrans courants : modeles en bandeau au-dessus, toute la largeur pour le tableau */
@media (max-width: 1799px) {
    .pv { grid-template-columns: minmax(0, 1fr) 16rem; }
    .pv-side { grid-column: 1 / -1; grid-row: 1; flex-direction: row !important; flex-wrap: wrap; }
    .pv-side .pv-block { flex: 1 1 18rem; padding: 0.75rem 1rem; border-bottom: 0 !important; border-right: 1px solid var(--border); }
    .pv-side .pv-block:first-child { flex-grow: 2; }
    .pv-side .pv-presets { display: flex; flex-wrap: wrap; gap: 0.375rem; }
    .pv-side .pv-preset { display: inline-block; width: auto; max-width: 100%; height: 1.75rem; line-height: calc(1.75rem - 2px); padding: 0 0.625rem; border: 1px solid var(--border); }
    .pv-side .pv-preset.is-active { border-color: color-mix(in srgb, var(--primary) 35%, white); }
    .pv-side .pv-model { gap: 0; }
    .pv-side .pv-save { display: flex; }
    .pv-side .pv-save .input { flex: 1; min-width: 8rem; }
}
@media (max-width: 960px) {
    .pv { grid-template-columns: minmax(0, 1fr); }
    .pv-side { flex-direction: column !important; }
    .pv-side .pv-block { border-right: 0; border-bottom: 1px solid var(--border) !important; }
}

.pv-side { display: flex; flex-direction: column; }
.pv-block { display: grid; align-content: start; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.pv-block:last-child { border-bottom: 0; border-right: 0; }
.pv-block-title { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-strong); }
.pv-presets { display: grid; gap: 0.25rem; }
/* Meme rendu que les entrees du menu lateral (sidebar-menu-button) */
.pv-preset {
    display: block; width: 100%; min-width: 0; height: 2rem; line-height: 2rem; padding: 0 0.5rem;
    border: 0; border-radius: calc(var(--radius) - 2px); background: transparent; color: var(--foreground);
    font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; outline: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-preset:hover { background: var(--sidebar-accent); }
.pv-preset:focus-visible { box-shadow: 0 0 0 2px var(--ring); }
.pv-preset.is-active { background: color-mix(in srgb, var(--primary) 22%, white); color: #174f48; font-weight: 600; }
.pv-model { display: flex; align-items: center; gap: 0.25rem; }
.pv-model .pv-preset { flex: 1; min-width: 0; }
.pv-save { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.pv-hint { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }
.pv-help p { margin: 0; font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.5; }

.pv-main-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.75rem 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.pv-main-title { display: flex; align-items: baseline; gap: 0.75rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.pv-main-title h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.pv-main-title .text-muted { font-size: 0.75rem; }
.pv-main-actions { display: flex; align-items: center; gap: 0.25rem; }
.pv-scroll { overflow: auto; max-height: calc(100vh - var(--header-height) - 13rem - 2 * var(--inset-gap)); min-height: 16rem; transition: opacity 0.15s; }
.pv-scroll.is-loading { opacity: 0.5; pointer-events: none; }

/* Tableau : en-tetes fusionnes, totaux, valeurs alignees a droite ; libelles d'axe cliquables (filtre) */
.pvt { border-collapse: separate; border-spacing: 0; font-size: 0.8125rem; min-width: 100%; }
.pvt th, .pvt td { padding: 0.375rem 0.625rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); white-space: nowrap; }
.pvt thead th { background: var(--muted); font-weight: 500; text-align: left; }
.pvt .pvt-corner { background: var(--muted); }
.pvt .pvt-axis { color: var(--primary-strong); font-weight: 600; cursor: pointer; }
.pvt .pvt-axis:hover { background: #e9eef4; }
.pvt .pvt-axis.is-filtered::after { content: ""; display: inline-block; width: 0.375rem; height: 0.375rem; margin-left: 0.375rem; border-radius: 999px; background: var(--primary); vertical-align: 0.125rem; }
.pvt .pvt-col { text-align: center; }
.pvt .pvt-row { background: var(--card); font-weight: 500; text-align: left; vertical-align: top; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.pvt .pvt-total-label { background: var(--muted); font-weight: 600; text-align: left; }
.pvt td { text-align: right; font-variant-numeric: tabular-nums; cursor: cell; }
.pvt td[data-r]:hover { outline: 2px solid var(--ring); outline-offset: -2px; }
.pvt .pvt-total { background: color-mix(in srgb, var(--primary) 8%, white); font-weight: 600; }
.pvt .pvt-totals .pvt-total { background: color-mix(in srgb, var(--primary) 14%, white); }
.pvt .pvt-grand { background: var(--primary); color: var(--primary-foreground); font-weight: 600; }
.pvt .pvt-null { color: var(--muted-foreground); font-style: italic; font-weight: 400; }
.pvt-bar { position: relative; display: block; min-width: 4rem; }
.pvt-bar-fill { position: absolute; top: -0.125rem; bottom: -0.125rem; border-radius: 3px; background: color-mix(in srgb, var(--primary) 30%, transparent); }
.pvt-bar-fill.is-negative { background: color-mix(in srgb, var(--destructive) 30%, transparent); }
.pvt-bar-text { position: relative; }

/* Configuration : zones de champs (glisser-deposer), valeurs, tri */
.pv-config { display: flex; flex-direction: column; }
.pv-config-block { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; border-bottom: 1px solid var(--border); }
.pv-config-block:last-child { border-bottom: 0; }
.pv-zone-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.pv-zone { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 0.375rem; min-height: 2.25rem; padding: 0.375rem; border: 1px dashed var(--input); border-radius: calc(var(--radius) - 2px); background: var(--muted); }
.pv-zone.is-dragging { border-color: var(--ring); background: color-mix(in srgb, var(--primary) 6%, white); }
.pv-zone-empty { align-self: center; padding: 0 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.pv-chip {
    display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.1875rem 0.5rem 0.1875rem 0.25rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px); background: var(--card); box-shadow: var(--shadow-xs);
    font-size: 0.75rem; font-weight: 500; cursor: grab; user-select: none;
}
.pv-chip:hover { border-color: var(--ring); }
.pv-chip:active { cursor: grabbing; }
.pv-chip.is-filtered { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, white); }
.pv-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-chip .icon.pv-chip-grip { width: 0.75rem; height: 0.75rem; color: var(--muted-foreground); }
.pv-chip .icon.pv-chip-filter { width: 0.75rem; height: 0.75rem; color: var(--primary-strong); }
.pv-label { font-size: 0.75rem; font-weight: 500; color: var(--muted-foreground); margin-top: 0.25rem; }
.pv-order { display: flex; gap: 0.5rem; }
.pv-order .btn { flex: 1; }

/* Filtre d'un champ */
.pv-filter-backdrop { position: fixed; inset: 0; z-index: 1400; background: rgb(15 23 42 / 0.25); }
.pv-filter {
    position: fixed; z-index: 1401; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; gap: 0.75rem; width: min(28rem, calc(100vw - 2rem)); max-height: min(40rem, calc(100vh - 2rem));
    padding: 1rem !important; box-shadow: var(--shadow-lg);
}
.pv-filter-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.pv-filter-head .text-muted { font-size: 0.75rem; }
.pv-filter-title { font-weight: 600; }
.pv-filter-bulk { display: flex; gap: 0.25rem; margin: -0.25rem 0; }
.pv-filter-list { flex: 1; min-height: 6rem; overflow: auto; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.25rem; }
.pv-filter-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; border-radius: 4px; font-size: 0.8125rem; cursor: pointer; }
.pv-filter-item:hover { background: var(--accent); }
.pv-filter-item input { accent-color: var(--primary); }
.pv-filter-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pv-filter-count { color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.pv-filter-list .pv-hint { padding: 0.5rem 0.375rem; }
.pv-filter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pv-filter-move { display: flex; align-items: center; gap: 0.125rem; font-size: 0.75rem; }
.pv-filter-move .text-muted { margin-right: 0.25rem; }
.pv-filter-actions { display: flex; gap: 0.5rem; margin-left: auto; }

/* ---------- Mapping client (Gestion des Tiers) : sites dans le panneau, comparatif, candidats ----------
   Maquette "Mapping propositions" 2a (jetons --vv-* et --st-* en tete de fichier). Pas de cartes : le contenu est pose sur la page. */
.mail-panel-head > .input { height: 2rem; background: var(--background); box-shadow: none; }
.mail-panel-head .input-search { max-width: none; min-width: 0; }
.map-link { color: inherit; text-decoration: underline; text-decoration-color: rgb(5 56 51 / 0.35); text-underline-offset: 3px; }
.map-link:hover { text-decoration-color: currentColor; }

/* Liste des sites : nom, code et ville, depot et grand compte ; factures bloquees et plus ancienne facture en evidence */
.mail-item.map-site { height: 88px; gap: 0.25rem; padding: 0.75rem 1rem; }
.map-site-top { display: flex; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.map-site-name { flex: 1; min-width: 0; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: var(--vv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-site-line { font-size: 0.8125rem; line-height: 1.125rem; color: var(--vv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-site-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.75rem; line-height: 1rem; color: var(--vv-muted); }
.map-site-where { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-site-count {
    flex-shrink: 0; padding: 0.0625rem 0.4375rem; border-radius: 5px; font-size: 0.75rem; font-weight: 700; line-height: 1.125rem;
    background: color-mix(in srgb, var(--vv-tiber) 10%, white); color: var(--vv-tiber); font-variant-numeric: tabular-nums;
}
.map-site-age { display: inline-flex; align-items: center; gap: 0.25rem; flex-shrink: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--vv-ink); }
.map-site-age.is-aging { color: var(--st-near-fg); }
.map-site-age.is-old { color: var(--st-diff-fg); }
/* Site courant (degrade commun .mail-item.is-active) : couleurs assombries pour rester AA */
.map-site.is-active .map-site-name, .map-site.is-active .map-site-age { color: var(--vv-tiber); }
.map-site.is-active .map-site-line, .map-site.is-active .map-site-meta { color: var(--selection-muted); }
.map-site.is-active .map-site-count { background: rgb(255 255 255 / 0.6); color: var(--vv-tiber); }
.map-site.is-active .map-site-age.is-aging { color: #6b3a00; }
.map-site.is-active .map-site-age.is-old { color: #861a0a; }

/* Pleine page comme les tickets : comparatif et factures a gauche, candidats sur toute la hauteur a droite derriere un filet */
.app-content:has(> .map-workspace) { padding: 0; }
.map-workspace {
    display: grid; grid-template-columns: minmax(0, 1fr) 22rem; color: var(--vv-ink);
    min-height: calc(100vh - var(--header-height) - 2 * var(--inset-gap));
}
.map-main { display: grid; align-content: start; gap: 1.5rem; min-width: 0; padding-bottom: 1.5rem; border-right: 1px solid var(--vv-line); }

/* Niveau de confiance (seuils 40 / 70) */
.map-level { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 5px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.map-level.is-certain { background: #0b6b3a; color: #fff; }
.map-level.is-probable { background: #f2a91d; color: #2e1d00; }
.map-level.is-low { background: #dfe3e2; color: #2b3634; }

/* Comparatif symetrique : libelle, site transmis aligne a droite, statut (score dans l'en-tete) au centre, candidat a gauche.
   Lignes en subgrid pour aligner les colonnes. */
.cmp-grid { display: grid; grid-template-columns: 8rem minmax(0, 1fr) minmax(8rem, auto) minmax(0, 1fr); column-gap: 1.25rem; }
.cmp-head, .cmp-row, .cmp-summary { grid-column: 1 / -1; padding: 0 1.375rem; border-bottom: 1px solid var(--vv-line-soft); }
.cmp-head, .cmp-row { display: grid; grid-template-columns: subgrid; }
/* En-tete clair en degrade (demande du 2026-10-23) : texte tiber, contraste AA sur tout le degrade */
.cmp-head { align-items: start; padding-top: 1.125rem; padding-bottom: 1.125rem; background: var(--selection-bg); color: var(--vv-tiber); border-bottom: 0; }
.cmp-row { align-items: start; padding-top: 0.5625rem; padding-bottom: 0.5625rem; font-size: 0.875rem; line-height: 1.6; }
.cmp-party { min-width: 0; }
.cmp-eyebrow { font-size: 0.71875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #1d5b54; }
.cmp-title { margin-top: 0.1875rem; font-size: 1.0625rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.cmp-sub { margin-top: 0.1875rem; font-size: 0.8125rem; color: #23413d; }
.cmp-party-site, .cmp-site { text-align: right; }
.cmp-score { display: grid; justify-items: center; align-self: center; gap: 0.3125rem; }
.cmp-score-value { font-size: 2.125rem; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.cmp-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding-top: 0.625rem; padding-bottom: 0.625rem; background: #f1f6f5; border-bottom-color: var(--vv-line); font-size: 0.8125rem; }
.cmp-summary-title { font-weight: 600; }
.cmp-label { padding-top: 0.0625rem; font-size: 0.8125rem; font-weight: 600; color: var(--vv-muted); white-space: nowrap; }
.cmp-site, .cmp-candidate { min-width: 0; overflow-wrap: break-word; }
.cmp-state { text-align: center; }
.cmp-tk { border-radius: 3px; }
.cmp-tk.is-diff { padding: 0 0.25rem; background: var(--st-diff-bg); color: var(--st-diff-fg); font-weight: 700; }
.cmp-tk.is-hit { padding: 0 0.25rem; background: var(--st-same-bg); color: var(--st-same-fg); font-weight: 700; }
.cmp-empty { color: var(--vv-muted); }
.cmp-note { margin-top: 0.125rem; font-size: 0.78125rem; line-height: 1.4; }
.cmp-status { display: inline-block; padding: 0.0625rem 0.5rem; border-radius: 6px; font-size: 0.78125rem; font-weight: 700; white-space: nowrap; }
.cmp-status.is-same { background: var(--st-same-bg); color: var(--st-same-fg); }
.cmp-status.is-near { background: var(--st-near-bg); color: var(--st-near-fg); }
.cmp-status.is-diff { background: var(--st-diff-bg); color: var(--st-diff-fg); }
.cmp-status.is-none { background: var(--st-none-bg); color: var(--st-none-fg); }
.cmp-note.is-same { color: var(--st-same-fg); }
.cmp-note.is-near { color: var(--st-near-fg); }
.cmp-note.is-diff { color: var(--st-diff-fg); }
.cmp-note.is-none { color: var(--st-none-fg); }

/* Actions : teal pour mapper, nouveau tiers en bouton discret */
.cmp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; padding: 1rem 1.375rem; }
.cmp-actions .btn-lg { height: 2.75rem; font-size: 0.9375rem; }
.cmp-actions .btn-default { background: var(--vv-teal); }
.cmp-actions .btn-default:hover { background: var(--vv-teal-hover); }
.cmp-action-target { display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cmp-actions kbd {
    display: inline-grid; place-items: center; min-width: 1.25rem; height: 1.25rem; margin-left: 0.25rem; padding: 0 0.25rem;
    border-radius: 4px; background: rgb(255 255 255 / 0.22); font-family: inherit !important; font-size: 0.75rem;
}
@media (max-width: 900px) {
    .cmp-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .cmp-head > div:first-child { display: none; }
    .cmp-label { grid-column: 1 / -1; }
}

/* Factures en attente */
.map-invoices { display: grid; gap: 0.375rem; padding: 0 1.375rem; }
.map-invoices-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.875rem; color: var(--vv-muted); }
.map-invoices-head h3 { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--vv-tiber); }
.map-invoices-empty { margin: 0; font-size: 0.875rem; color: var(--vv-muted); }
.map-invoice { display: grid; grid-template-columns: minmax(8rem, 9.5rem) 6.5rem minmax(15rem, 1.4fr) minmax(0, 1fr) 8.5rem; gap: 0.75rem; align-items: center; padding: 0.375rem 0; border-top: 1px solid var(--vv-line-soft); font-size: 0.84375rem; }
.map-invoice-cols { padding-top: 0.25rem; font-size: 0.75rem; font-weight: 600; color: var(--vv-muted); }
.map-invoice-received { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-variant-numeric: tabular-nums; }
.map-invoice-age { font-size: 0.78125rem; color: var(--vv-muted); }
.map-invoice-age.is-aging { color: var(--st-near-fg); font-weight: 600; }
.map-invoice-age.is-old { color: var(--st-diff-fg); font-weight: 600; }
.map-invoice-number { color: var(--vv-teal); overflow-wrap: anywhere; }
.map-invoice-gln { color: var(--vv-muted); }
/* Ligne cliquable : consultation de la facture */
a.map-invoice.is-link { color: inherit; text-decoration: none; border-radius: 4px; }
a.map-invoice.is-link:hover { background: var(--vv-tiber-soft); }
a.map-invoice.is-link:hover .map-invoice-number { text-decoration: underline; }
.map-invoice-amount { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Nouveau tiers (dialogue) : rubriques du formulaire PHP en intertitres, standard et contacts repliables */
.nt-form { min-width: min(760px, 82vw); }
.nt-legend { grid-column: 1 / -1; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.8125rem; font-weight: 600; color: var(--vv-tiber); }
.nt-legend:first-child { padding-top: 0; border-top: 0; }
.nt-inline { display: flex; gap: 0.5rem; align-items: center; }
.nt-inline .input { flex: 1; min-width: 0; }
.nt-more { border-top: 1px solid var(--border); padding-top: 0.75rem; }
.nt-more > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 600; color: var(--vv-tiber); }
.nt-more[open] > summary { margin-bottom: 1rem; }

/* Candidats : rang, nom et ville, barre de score, niveau et ecart avec le meilleur */
.map-cands {
    position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; min-width: 0;
    height: calc(100vh - var(--header-height) - 2 * var(--inset-gap));
}
@media (max-width: 1279px) {
    .map-workspace { grid-template-columns: minmax(0, 1fr); }
    .map-main { border-right: 0; }
    .map-cands { position: static; height: auto; border-top: 1px solid var(--vv-line); }
}
.map-cands-head { display: grid; gap: 0.625rem; padding: 1rem 1rem 0.75rem; border-bottom: 1px solid var(--vv-line); }
.map-cands-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem; color: var(--vv-muted); }
.map-cands-title h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--vv-tiber); }
.map-cands-head .input-search { max-width: none; min-width: 0; }
.map-cands-list { flex: 1; min-height: 0; overflow-y: auto; transition: opacity 0.15s; }
.map-cands-list.is-loading { opacity: 0.5; pointer-events: none; }
.map-cand {
    display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: start; gap: 0.625rem; width: 100%;
    padding: 0.6875rem 1rem 0.6875rem 0.75rem; border: 0; border-left: 4px solid transparent; border-bottom: 1px solid var(--vv-line-soft);
    background: transparent; color: var(--vv-ink); font: inherit; text-align: left; cursor: pointer;
}
.map-cand:hover { background: #f6faf9; }
.map-cand.is-active { background: var(--vv-tiber-soft); border-left-color: var(--vv-tiber); }
.map-cand-rank { padding-top: 0.125rem; font-size: 0.75rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.map-cand-body { display: grid; gap: 0.25rem; min-width: 0; }
.map-cand-name { font-size: 0.84375rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.map-cand-city { font-size: 0.78125rem; color: var(--vv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-cand-bar { display: block; height: 4px; border-radius: 2px; background: var(--vv-line-soft); overflow: hidden; }
.map-cand-bar > span { display: block; height: 100%; }
.map-cand-bar > .is-certain { background: #0b6b3a; }
.map-cand-bar > .is-probable { background: #e09a12; }
.map-cand-bar > .is-low { background: #9aa4a2; }
.map-cand-side { display: grid; justify-items: end; gap: 0.25rem; }
.map-cand-delta { font-size: 0.71875rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Declaratifs fournisseurs (DFR) : periodes dans le panneau, saisie de la periode ---------- */
.decla-panel-tiers { font-size: 0.8125rem; color: var(--vv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.decla-quarter {
    position: sticky; top: 0; z-index: 1; padding: 0.5rem 1rem 0.375rem; background: var(--sidebar); border-bottom: 1px solid var(--sidebar-border);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--vv-tiber);
}
.decla-more {
    display: block; width: calc(100% - 2rem); margin: 0.75rem 1rem 1rem; padding: 0.5rem; border: 1px dashed var(--vv-line); border-radius: var(--radius);
    background: transparent; color: var(--vv-tiber); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.decla-more:hover { background: var(--vv-tiber-soft); border-style: solid; }
.mail-item.decla-period { height: auto; flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; }
.decla-period-body { display: grid; flex: 1; gap: 0.25rem; min-width: 0; }
.mail-item.decla-site { height: auto; gap: 0.125rem; padding: 0.625rem 1rem; }
.decla-site-name { font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; color: var(--vv-ink); overflow-wrap: anywhere; }
.decla-site-code { font-size: 0.75rem; color: var(--vv-muted); }
.mail-item.is-active .decla-site-code { color: var(--selection-muted); }
.decla-period-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.decla-period-name { font-size: 0.875rem; font-weight: 600; color: var(--vv-ink); }
.decla-period-ca { font-size: 0.8125rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.mail-item.is-active .decla-period-ca { color: var(--selection-muted); }
.decla-state { display: inline-block; flex-shrink: 0; padding: 0.0625rem 0.4375rem; border-radius: 5px; font-size: 0.75rem; font-weight: 600; line-height: 1.125rem; white-space: nowrap; }
.decla-state.is-ok { background: var(--st-same-bg); color: var(--st-same-fg); }
.decla-state.is-todo { background: var(--st-near-bg); color: var(--st-near-fg); }
.decla-state.is-wait { background: var(--st-none-bg); color: var(--st-none-fg); }
.decla-state.is-gap { background: var(--st-diff-bg); color: var(--st-diff-fg); }

.decla { display: grid; gap: 1.25rem; align-content: start; color: var(--vv-ink); }
.decla-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.decla-eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vv-muted); }
.decla-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0; font-size: 1.375rem; font-weight: 600; color: var(--vv-tiber); }
.decla-title .decla-state { font-size: 0.8125rem; }
.decla-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.decla-import { position: relative; overflow: hidden; cursor: pointer; }
.decla-import input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.decla-import.is-busy { pointer-events: none; opacity: 0.6; }
.decla-errors ul { margin: 0.25rem 0 0; padding-left: 1.125rem; max-height: 14rem; overflow-y: auto; }
.decla-error-line { font-weight: 600; font-variant-numeric: tabular-nums; }
.decla-add { display: flex; gap: 0.5rem; max-width: 42rem; }
.decla-add > :first-child { flex: 1; min-width: 0; }

.decla-table { display: grid; border-top: 1px solid var(--vv-line); transition: opacity 0.15s; }
.decla-table.is-loading { opacity: 0.5; pointer-events: none; }
.decla-row { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1rem; align-items: center; padding: 0.625rem 0; border-bottom: 1px solid var(--vv-line-soft); }
.decla-row.has-other { grid-template-columns: minmax(0, 1fr) 13rem 10rem; }
.decla-row-head { padding: 0.5rem 0; font-size: 0.75rem; font-weight: 600; color: var(--vv-muted); }
.decla-row-total { border-bottom: 0; border-top: 1px solid var(--vv-line); font-weight: 600; font-variant-numeric: tabular-nums; }
.decla-tiers { display: grid; gap: 0.125rem; min-width: 0; }
.decla-tiers-name { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.decla-tiers-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.78125rem; color: var(--vv-muted); }
.decla-tiers-meta .decla-state { margin-left: 0.375rem; }
.decla-amount { display: grid; justify-items: end; gap: 0.125rem; text-align: right; }
.decla-input { display: flex; align-items: center; gap: 0.375rem; }
.decla-input .input { width: 10rem; height: 2.125rem; text-align: right; font-variant-numeric: tabular-nums; }
.decla-input .input[readonly] { background: var(--muted); color: var(--vv-muted); }
.decla-input > span { font-size: 0.875rem; color: var(--vv-muted); }
.decla-locked, .decla-invalid { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.75rem; }
.decla-locked { color: var(--vv-muted); }
.decla-invalid { color: var(--st-diff-fg); font-weight: 600; }
.decla-other { font-size: 0.875rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.decla-empty { margin: 0; padding: 1rem 0; font-size: 0.875rem; color: var(--vv-muted); }
/* Barre d'actions collee en bas de l'ecran : Enregistrer reste visible sur une longue liste */
.decla-actions { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0.625rem; margin: 0 -1.5rem -1.5rem; padding: 0.875rem 1.5rem; background: var(--background); border-top: 1px solid var(--vv-line); }
.decla-actions .btn-default { background: var(--vv-teal); }
.decla-actions .btn-default:hover { background: var(--vv-teal-hover); }
@media (max-width: 767px) {
    .decla-row, .decla-row.has-other { grid-template-columns: minmax(0, 1fr); }
    .decla-amount { justify-items: start; text-align: left; }
}

/* Format du fichier (dialogue) */
.decla-spec { display: grid; gap: 1rem; min-width: min(760px, 82vw); }
.decla-spec-intro { margin: 0; font-size: 0.875rem; color: var(--vv-muted); }
.decla-spec h3 { margin: 0.5rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--vv-tiber); }
.decla-spec-table { display: grid; border-top: 1px solid var(--border); }
.decla-spec-row { display: grid; grid-template-columns: 2.5rem 10rem 7.5rem 2.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--vv-line-soft); font-size: 0.8125rem; }
.decla-spec-row.is-head { font-size: 0.75rem; font-weight: 600; color: var(--vv-muted); }
.decla-spec-ftp { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem 1rem; font-size: 0.8125rem; }
.decla-spec-ftp > span:nth-child(odd) { color: var(--vv-muted); font-weight: 600; }
.decla-spec-secret { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Petit calendrier annuel (MonthCalendar) : annee en en-tete, 12 mois, le mois concerne en rouge */
.month-cal {
    display: inline-grid; flex-shrink: 0; width: 2.375rem; overflow: hidden; border: 1px solid var(--vv-line); border-radius: 6px;
    background: var(--background); box-shadow: var(--shadow-xs);
}
.month-cal-year { padding: 0.0625rem 0 0; background: #e3f1f0; color: var(--vv-tiber); font-size: 0.625rem; font-weight: 700; line-height: 0.875rem; text-align: center; font-variant-numeric: tabular-nums; }
.month-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 3px; }
.month-cal-grid > span { height: 4px; border-radius: 1px; background: #dfe5e3; }
.month-cal-grid > span.is-on { background: #c1280d; }

/* ---------- Declaratifs : synthese comptable (matrice fournisseurs x depots) ---------- */
.synt-period .synt-period-figures { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 0.5rem; font-size: 0.75rem; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.synt-period-figures > span:nth-child(3n + 1) { font-weight: 600; }
.synt-period-figures > span:nth-child(3n + 2), .synt-period-figures > span:nth-child(3n) { text-align: right; }
.mail-item.is-active .synt-period-figures { color: var(--selection-muted); }
.synt-alert { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem; border-radius: 999px; background: var(--st-diff-fg); vertical-align: middle; }

.synt { display: grid; gap: 1rem; align-content: start; min-width: 0; color: var(--vv-ink); }
.synt-invoice.btn-default { background: var(--vv-teal); }
.synt-invoice.btn-default:hover { background: var(--vv-teal-hover); }
/* Feu tricolore (proposition 5a) : rouge = probleme, ambre = en attente de quelqu'un (l'icone dit qui relancer),
   bleu = a facturer, vert = termine, contour gris = rien a faire. Aplats pour les stades decisifs, teinte claire pour
   les attentes. Icones en masques CSS (une seule balise par case de la matrice) ; couleur des segments : --cat. */
.synt-bar-seg { --cat: #e2e5ea; background: var(--cat); }
.synt-bar-seg.is-gap { --cat: #dc2626; }
.synt-bar-seg.is-wait-depot { --cat: #f59e0b; }
.synt-bar-seg.is-wait-frn { --cat: #f7b23b; }
.synt-bar-seg.is-wait-both { --cat: #fcd34d; }
.synt-bar-seg.is-to-invoice { --cat: #2563eb; }
.synt-bar-seg.is-invoiced { --cat: #16a34a; }
.synt-bar-seg.is-zero { --cat: #e2e5ea; }

.synt-badge {
    display: inline-grid; place-items: center; flex-shrink: 0; width: 1.375rem; height: 1.375rem; border-radius: 5px;
    background: var(--badge-bg); box-shadow: inset 0 0 0 1.5px var(--badge-border);
}
.synt-badge::before { content: ""; width: 62%; height: 62%; background: var(--badge-fg); mask: var(--icon) center / contain no-repeat; -webkit-mask: var(--icon) center / contain no-repeat; }
.synt-badge.is-gap { --badge-bg: #dc2626; --badge-border: #dc2626; --badge-fg: #fff; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }
.synt-badge.is-wait-depot { --badge-bg: #fff4dc; --badge-border: #f0a63a; --badge-fg: #b45309; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 8.35V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8.35A2 2 0 0 1 3.26 6.5l8-3.2a2 2 0 0 1 1.48 0l8 3.2A2 2 0 0 1 22 8.35Z'/%3E%3Cpath d='M6 18h12'/%3E%3Cpath d='M6 14h12'/%3E%3Crect width='12' height='12' x='6' y='10'/%3E%3C/svg%3E"); }
.synt-badge.is-wait-frn { --badge-bg: #fff4dc; --badge-border: #f0a63a; --badge-fg: #b45309; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2'/%3E%3Cpath d='M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.synt-badge.is-wait-both { --badge-bg: #fff4dc; --badge-border: #f0a63a; --badge-fg: #b45309; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 22h14'/%3E%3Cpath d='M5 2h14'/%3E%3Cpath d='M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22'/%3E%3Cpath d='M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2'/%3E%3C/svg%3E"); }
.synt-badge.is-to-invoice { --badge-bg: #2563eb; --badge-border: #2563eb; --badge-fg: #fff; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8'/%3E%3Cpath d='M12 17.5v-11'/%3E%3C/svg%3E"); }
.synt-badge.is-invoiced { --badge-bg: #16a34a; --badge-border: #16a34a; --badge-fg: #fff; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.synt-badge.is-zero { --badge-bg: #fff; --badge-border: #cbd5e1; --badge-fg: #94a3b8; --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E"); }

/* Legende dynamique : barre de progression des couples par categorie */
.synt-summary { display: grid; gap: 0.625rem; }
.synt-summary-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; font-size: 0.875rem; color: var(--vv-muted); }
.synt-summary-head strong { color: var(--vv-ink); font-variant-numeric: tabular-nums; }
.synt-summary-figures strong { color: var(--vv-tiber); }
.synt-bar { display: flex; gap: 2px; height: 0.875rem; }
.synt-bar-seg { flex: 1 1 0; min-width: 6px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; transition: opacity 0.15s, transform 0.15s; }
.synt-bar-seg:hover { transform: scaleY(1.25); }
.synt-bar-seg.is-dim { opacity: 0.25; }
.synt-legend { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.synt-legend-item {
    display: inline-flex; align-items: center; gap: 0.5rem; height: 2.25rem; padding: 0 0.75rem 0 0.4375rem; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--background); color: var(--vv-ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.synt-legend-item > span:last-child { font-weight: 500; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.synt-legend-item:hover { border-color: var(--vv-tiber); }
.synt-legend-item.is-on { border-color: var(--vv-tiber); box-shadow: inset 0 0 0 1px var(--vv-tiber); }
.synt-legend-item.is-dim { opacity: 0.5; }

/* Onglets de filtre (controle segmente) et recherche */
.synt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.synt-pickers { display: grid; grid-template-columns: repeat(2, minmax(14rem, 1fr)); gap: 0.5rem; flex: 1; min-width: min(100%, 30rem); }
.synt-pickers .field { gap: 0.25rem; }
.synt-pickers .label { font-size: 0.75rem; color: var(--vv-muted); }
@media (max-width: 900px) { .synt-pickers { grid-template-columns: minmax(0, 1fr); } }
.synt-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; padding: 0.25rem; border-radius: calc(var(--radius) + 2px); background: #eeeae0; }
.synt-tab {
    display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.375rem 0.875rem; border: 0; border-radius: var(--radius);
    background: transparent; color: var(--vv-ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.synt-tab > span { font-weight: 500; color: var(--vv-muted); font-variant-numeric: tabular-nums; }
.synt-tab:hover { background: rgb(255 255 255 / 0.6); }
.synt-tab.is-on { background: var(--vv-tiber); color: #fff; }
.synt-tab.is-on > span { color: #fff; }
.synt-filter {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding: 0 0.625rem 0 0.875rem; border: 1px solid var(--vv-tiber);
    border-radius: 999px; background: var(--vv-tiber-soft); color: var(--vv-tiber); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.synt-filter:hover { background: #dcefec; }
.synt-count { font-size: 0.78125rem; color: var(--vv-muted); }

/* Matrice : en-tetes de depots verticaux et colonne des fournisseurs figes, defilement dans le cadre */
/* Matrice en pleine largeur : elle deborde des marges de la page pour gagner deux colonnes de chaque cote */
.synt-matrix {
    overflow: auto; max-height: calc(100vh - var(--header-height) - 2 * var(--inset-gap) - 15rem); min-height: 18rem;
    margin: 0 -1.5rem; border-top: 1px solid var(--vv-line); border-bottom: 1px solid var(--vv-line); transition: opacity 0.15s;
}
@media (max-width: 767px) { .synt-matrix { margin: 0 -1rem; } }
.synt-matrix.is-loading { opacity: 0.5; pointer-events: none; }
.synt-matrix table { border-collapse: separate; border-spacing: 0; font-size: 0.78125rem; }
.synt-matrix th, .synt-matrix td { border-right: 1px solid var(--vv-line-soft); border-bottom: 1px solid var(--vv-line-soft); }
.synt-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--background); vertical-align: bottom; }
.synt-matrix .synt-corner { left: 0; z-index: 3; min-width: 15rem; padding: 0.5rem 0.75rem 0.5rem 1.5rem; text-align: left; color: var(--vv-muted); font-weight: 600; }
.synt-corner > span { display: block; }
.synt-depot { width: 1.75rem; min-width: 1.75rem; height: 11rem; padding: 0.375rem 0; }
.synt-depot button {
    writing-mode: vertical-rl; transform: rotate(180deg); max-height: 10.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 0; background: transparent; color: var(--vv-ink); font: inherit; font-weight: 600; cursor: pointer;
}
.synt-depot button:hover, .synt-frn button:hover { color: var(--vv-teal); text-decoration: underline; }
.synt-frn { position: sticky; left: 0; z-index: 1; min-width: 15rem; max-width: 15rem; background: var(--background); text-align: left; }
.synt-frn button {
    display: block; width: 100%; padding: 0.3rem 0.75rem 0.3rem 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    border: 0; background: transparent; color: var(--vv-ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.synt-matrix tbody tr:hover > * { background-color: #f6faf9; }
.synt-cell { width: 1.875rem; height: 1.875rem; padding: 0; text-align: center; vertical-align: middle; cursor: pointer; }
.synt-cell .synt-badge { vertical-align: middle; }
.synt-cell:hover .synt-badge { transform: scale(1.12); }
/* Couple hors filtre : grise et efface, la ligne garde son contexte */
.synt-cell.is-dim .synt-badge { opacity: 0.22; filter: grayscale(1); }
.synt-depot { width: 1.875rem; min-width: 1.875rem; }

/* Infobulle d'une case : categorie, depot et son CA, ecart, fournisseur et son CA */
.synt-tip {
    position: fixed; z-index: 1500; display: none; width: 30rem; max-width: calc(100vw - 1rem); padding: 0.75rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--background); box-shadow: var(--shadow-lg); color: var(--vv-ink); font-size: 0.8125rem; pointer-events: none;
}
.synt-tip.is-on { display: grid; gap: 0.375rem; }
.synt-tip-head { display: flex; align-items: flex-start; gap: 0.625rem; padding-bottom: 0.5rem; margin-bottom: 0.125rem; border-bottom: 1px solid var(--vv-line-soft); }
.synt-tip-cat { font-weight: 700; }
.synt-tip-desc { font-size: 0.75rem; color: var(--vv-muted); }
.synt-tip-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.synt-tip-col { display: grid; gap: 0.125rem; min-width: 0; }
.synt-tip-col.is-frn { text-align: right; }
.synt-tip-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vv-muted); }
.synt-tip-name { font-size: 0.75rem; font-weight: 600; overflow-wrap: anywhere; }
.synt-tip-value { font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.synt-tip-col.is-gap { align-self: stretch; align-content: center; padding: 0.375rem 0.625rem; border-radius: 5px; background: var(--muted); text-align: center; }
.synt-tip-col.is-gap.is-neg .synt-tip-value, .synt-tip-col.is-gap.is-pos .synt-tip-value { color: #b91c1c; }
.synt-tip-col.is-gap.is-zero .synt-tip-value { color: #15803d; }
.synt-tip-col.is-gap.is-none .synt-tip-value { color: var(--vv-muted); font-weight: 500; }

/* Detail et relances (dialogues) */
.synt-detail { display: grid; gap: 1rem; min-width: min(760px, 82vw); }
.synt-detail-id { display: grid; gap: 0.125rem; }
.synt-detail .decla-row.has-other { grid-template-columns: minmax(0, 1fr) 12rem 12rem; }
.relance { display: grid; gap: 0.25rem; min-width: min(760px, 82vw); }
.relance-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; color: var(--vv-muted); }
.relance-group { margin-top: 0.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--vv-line); font-size: 0.8125rem; font-weight: 600; color: var(--vv-tiber); }
.relance-row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) 5rem 6.5rem 6.5rem; gap: 0.75rem; align-items: center; padding: 0.375rem 0; border-bottom: 1px solid var(--vv-line-soft); cursor: pointer; }
.relance-row-head { cursor: default; font-size: 0.75rem; font-weight: 600; color: var(--vv-muted); }
.relance-num { font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Declaratifs : etats Excel ---------- */
.reporting-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem 1.25rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); }
.reporting-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.reporting-card { display: grid; grid-template-rows: auto 1fr auto auto; gap: 0.625rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.reporting-card-head { display: flex; align-items: center; gap: 0.5rem; }
.reporting-id { padding: 0.0625rem 0.4375rem; border-radius: 5px; background: var(--vv-tiber); color: #fff; font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.reporting-title { flex: 1; font-size: 0.9375rem; font-weight: 600; color: var(--vv-tiber); }
.reporting-charts { color: var(--vv-muted); }
.reporting-desc { margin: 0; font-size: 0.8125rem; line-height: 1.45; color: var(--vv-muted); }
.reporting-fields { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.reporting-field { padding: 0.0625rem 0.4375rem; border-radius: 5px; font-size: 0.75rem; font-weight: 600; }
.reporting-field.is-ok { background: var(--st-same-bg); color: var(--st-same-fg); }
.reporting-field.is-missing { background: var(--st-diff-bg); color: var(--st-diff-fg); }
.reporting-field.is-optional { background: var(--st-none-bg); color: var(--st-none-fg); }
.reporting-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.reporting-problem { flex: 1; font-size: 0.75rem; color: var(--st-diff-fg); }


/* ===== Recherche de facture (EDI) ===== */
.header-search { flex: 0 1 17rem; min-width: 10rem; }
.header-search .input { height: 2rem; font-size: 0.8125rem; }
@media (max-width: 767px) { .header-search { display: none; } }

.fsearch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.fsearch-input { flex: 1 1 28rem; max-width: 44rem; }
.fsearch-input .input { height: 2.5rem; font-size: 0.9375rem; }
.fsearch-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 0.5rem; font-size: 0.8125rem; }
.fsearch-understood-label { color: var(--muted-foreground); margin-right: 0.125rem; }
.fsearch-chip {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 1.5rem; padding: 0 0.625rem; border: 1px solid var(--border);
    border-radius: 999px; background: var(--background); font-weight: 600;
}
.fsearch-chip > span { font-weight: 500; color: var(--muted-foreground); }
.fsearch-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-height: 1.75rem; margin-bottom: 0.5rem; font-size: 0.8125rem; }
.fsearch-status .btn-link { font-size: inherit; font-weight: 600; }
.fsearch-note { color: var(--muted-foreground); }
.fsearch-spinner { display: inline-flex; color: var(--muted-foreground); }
.fsearch-row { cursor: pointer; }
.fsearch-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.fsearch-avoir { margin-left: 0.375rem; }
.fsearch-client .fsearch-gc { margin-right: 0.375rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground); }
.fsearch-tiers small { margin-left: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); }
/* Termes trouves */
.dt mark, .fsearch-hit { padding: 0 1px; border-radius: 2px; background: #fde68a; color: inherit; }

/* ===== Consultation de facture (EDI > Suivi Facture) ===== */
.fsv-panel-invoice { display: grid; gap: 0.125rem; min-width: 0; font-size: 0.8125rem; color: var(--vv-muted); }
.fsv-panel-invoice .font-mono { font-size: 0.9375rem; font-weight: 600; color: var(--vv-ink); }
.fsv-panel-invoice > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-item.fsv-item { height: auto; gap: 0.3125rem; color: inherit; text-decoration: none; }
.fsv-item-title { font-weight: 600; font-variant-numeric: tabular-nums; }
.fsv-item-line, .fsv-item-meta { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--muted-foreground); }
.fsv-item-meta { justify-content: space-between; }
.fsv-item-ano { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--st-diff-fg); font-weight: 600; }
.mail-item.is-active .fsv-item-line, .mail-item.is-active .fsv-item-meta > span:first-child { color: var(--selection-muted); }

.fsv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.fsv-anos { overflow-x: auto; }
.fsv-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.fsv-toolbar-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; min-width: 0; }
.fsv-toolbar-title h1 { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--vv-tiber); }
.fsv-toolbar-title .text-muted { font-size: 0.8125rem; }
.fsv-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; }
.fsv-anos { padding: 0.875rem 1rem; border: 1px solid #f3d19c; border-radius: var(--radius); background: #fffaf0; }
.fsv-anos-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: #92400e; font-size: 0.875rem; }
.fsv-anos-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.fsv-anos-table th, .fsv-anos-table td { padding: 0.3125rem 0.5rem; text-align: left; vertical-align: top; border-top: 1px solid #f6e3c4; }
.fsv-anos-table th { border-top: 0; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #a16207; }
.fsv-anos-table .num { text-align: right; }
.fsv-stage { overflow-x: auto; padding: 1.5rem; border-radius: var(--radius); background: var(--muted); }

/* Document : une feuille, sobre, lisible a l'ecran comme a l'impression */
.fpaper {
    display: grid; gap: 1.5rem; max-width: 64rem; margin: 0 auto; padding: 2.5rem 2.75rem; border-radius: 4px;
    background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.06);
    color: #1f2933; font-size: 0.8125rem; line-height: 1.45;
}
.fpaper-loading { min-height: 24rem; place-items: center; }
.fpaper-label { margin-bottom: 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vv-teal); }
.fpaper-name { font-weight: 700; color: #111827; }
.fpaper-ids { display: flex; flex-wrap: wrap; gap: 0.125rem 0.75rem; margin-top: 0.25rem; font-size: 0.75rem; color: #6b7280; }
.fpaper-logo { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: 6px; }
.fpaper-logo.is-small { width: 1.75rem; height: 1.75rem; }

.fpaper-head { display: flex; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--vv-tiber); }
.fpaper-issuer { display: flex; gap: 1rem; min-width: 0; }
.fpaper-doc { flex-shrink: 0; text-align: right; }
.fpaper-doc-type { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vv-teal); }
.fpaper-doc-number { margin: 0.125rem 0 0.75rem; font-size: 1.375rem; font-weight: 700; color: var(--vv-tiber); font-variant-numeric: tabular-nums; }
.fpaper-dates { display: grid; grid-template-columns: auto auto; gap: 0.1875rem 1rem; margin: 0; justify-content: end; }
.fpaper-dates dt { color: #6b7280; }
.fpaper-dates dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.fpaper-dates dd.is-late { color: var(--st-diff-fg); }

.fpaper-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.fpaper-party { padding: 0.75rem 0.875rem; border: 1px solid #e5e7eb; border-radius: 6px; min-width: 0; overflow-wrap: anywhere; }
.fpaper-party-head { display: flex; align-items: center; gap: 0.5rem; }
.fpaper-vva { margin-top: 0.375rem; padding-top: 0.375rem; border-top: 1px dashed #e5e7eb; font-size: 0.75rem; color: var(--vv-tiber); }

.fpaper-lines { width: 100%; border-collapse: collapse; font-size: 0.78125rem; font-variant-numeric: tabular-nums; }
.fpaper-lines th, .fpaper-lines td { padding: 0.3125rem 0.5rem; text-align: left; vertical-align: top; }
.fpaper-lines thead th { border-bottom: 1px solid #d1d5db; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.fpaper-lines .num { text-align: right; white-space: nowrap; }
.fpaper-lines .center { text-align: center; }
.fpaper-bl th { padding-top: 0.75rem; background: #E3F1F0; color: var(--vv-tiber); font-weight: 600; }
.fpaper-bl th span + span::before { content: "·"; margin: 0 0.5rem; color: var(--vv-teal); }
.fpaper-line td { border-bottom: 1px solid #f1f3f5; }
.fpaper-line.is-expandable { cursor: pointer; }
.fpaper-line.is-expandable:hover td, .fpaper-line.is-open td { background: #f7faf9; }
.fpaper-lib { min-width: 16rem; }
.fpaper-lib .icon { margin-right: 0.25rem; color: var(--vv-teal); vertical-align: -1px; }
.fpaper-lib small { display: block; color: #9ca3af; font-size: 0.6875rem; }
.fpaper-amount { font-weight: 600; }
.fpaper-detail td { padding-top: 0.125rem; padding-bottom: 0.25rem; background: #f7faf9; color: #4b5563; font-size: 0.75rem; }
.fpaper-avoir { display: block; color: #92400e; }
.fpaper-subtotal td { border-top: 1px solid #d1d5db; font-weight: 600; color: var(--vv-tiber); }

.fpaper-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; }
.fpaper-vat { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fpaper-vat th, .fpaper-vat td { padding: 0.25rem 0.75rem 0.25rem 0; text-align: left; }
.fpaper-vat th { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6b7280; }
.fpaper-vat .num { text-align: right; }
.fpaper-totals { display: grid; grid-template-columns: auto auto; gap: 0.25rem 2rem; min-width: 16rem; margin: 0; font-variant-numeric: tabular-nums; }
.fpaper-totals dt { color: #6b7280; }
.fpaper-totals dd { margin: 0; text-align: right; font-weight: 600; }
.fpaper-totals .is-ttc { padding-top: 0.5rem; border-top: 2px solid var(--vv-tiber); font-size: 1.125rem; font-weight: 700; color: var(--vv-tiber); }

.fpaper-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; padding-top: 1rem; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: #4b5563; }

/* Impression : le document seul */
@media print {
    .sidebar, .sidebar-panel, .sidebar-backdrop, .app-header, .fsv-toolbar { display: none !important; }
    body, .app-inset, .app-content { margin: 0 !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; border: 0 !important; }
    .fsv-stage { padding: 0; background: none; }
    .fpaper { max-width: none; padding: 0; box-shadow: none; }
    .fpaper-line, .fpaper-bl, .fpaper-foot, .fpaper-notes { break-inside: avoid; }
}