/* ============================================================
   Acordo — design system (handoff « Acordo Redesign »)
   Tokens dans css/tokens/*.css (chargés via css/styles.css AVANT ce fichier).
   Shell : sidebar 248px + topbar 60px. Fonts self-hostées.
   ============================================================ */

/* ---------- Fonts (self-hosted, wwwroot/fonts) ---------- */
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/archivo-v25-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/archivo-v25-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('fonts/archivo-v25-latin_latin-ext-800.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/ibm-plex-sans-v23-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-v20-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-v20-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/ibm-plex-mono-v20-latin_latin-ext-600.woff2') format('woff2');
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--surface-page);
    color: var(--text-body);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    line-height: var(--lh-normal);
}

h1:focus { outline: none; }

h1, h2, h3 { font-family: var(--font-display); color: var(--text-strong); letter-spacing: var(--ls-snug); }

a { color: var(--text-link); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Shell : sidebar + topbar ---------- */
.shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    flex: none;
    background: var(--white);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    height: var(--topbar-h);
    flex: none;
    padding: 0 18px;
    border-bottom: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--ink-950);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex: none;
}

.brand-text h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: var(--ls-tight);
    color: var(--ink-950);
    line-height: 1;
}

.brand-text h1 .brand-dot { color: var(--orange-600); }

.tenant-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 12px 6px;
    padding: 8px 10px;
    background: var(--slate-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.tenant-box .t-name { display: block; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.25; }
.tenant-box .t-sub { display: block; font-size: var(--text-2xs); color: var(--text-muted); line-height: 1.25; }

.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 12px 12px; flex: 1; }

.side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--slate-600);
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background 130ms ease-out, color 130ms ease-out;
}

.side-nav a svg { flex: none; }
.side-nav a .nav-label { flex: 1; min-width: 0; }
.side-nav a .nav-plus { color: var(--text-subtle); display: inline-flex; }
.side-nav a:hover:not(.active) { background: var(--surface-hover); color: var(--text-strong); }
.side-nav a.active { background: var(--surface-brand-soft); color: var(--orange-700); font-weight: var(--fw-semibold); }
.side-nav a.active .nav-plus { display: none; }
.side-nav .nav-spacer { flex: 1; min-height: 24px; }
.side-nav .nav-divider { height: 1px; background: var(--border-subtle); margin: 8px 4px; }

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

.topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--topbar-h);
    flex: none;
    padding: 0 24px 0 30px;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    position: sticky;
    top: 0;
    z-index: 50;
}

.searchbox {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 380px;
    height: 34px;
    padding: 0 12px;
    background: var(--slate-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-subtle);
}

.searchbox input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--text-strong);
}

.searchbox input::placeholder { color: var(--text-subtle); }
.searchbox:focus-within { border-color: var(--border-focus); box-shadow: var(--ring); }

.topbar-spacer { flex: 1; }
.topbar-sep { width: 1px; height: 24px; background: var(--border-subtle); flex: none; }

.bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 130ms ease-out, color 130ms ease-out;
}

.bell:hover { border-color: var(--border-strong); color: var(--text-strong); }

.bell .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--orange-600);
    color: #fff;
    font-size: 10px;
    font-weight: var(--fw-bold);
}

.user-area { display: flex; align-items: center; gap: 9px; }

.avatar {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-semibold);
}

.user-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.user-meta .u-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.user-meta .u-role { font-size: var(--text-2xs); color: var(--text-muted); }

.role-chip {
    font-size: var(--text-2xs);
    font-weight: var(--fw-bold);
    background: var(--surface-brand-soft);
    color: var(--orange-700);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.logout {
    background: none;
    border: none;
    color: var(--text-link);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    margin-left: 6px;
    font-family: var(--font-sans);
}

.logout:hover { color: var(--blue-700); text-decoration: underline; }

.content { padding: 26px 30px 34px; min-width: 0; width: 100%; max-width: var(--container-max); }

/* Layout non authentifié (Login, erreurs) : contenu centré sans sidebar */
.shell-plain { max-width: 560px; margin: 0 auto; padding: 40px 20px 80px; }

/* ---------- En-tête de page ---------- */
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.page-head h1 {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--text-strong);
}

/* Variante compacte, pour une page dont le contenu se présente tout seul
   (liste avec bandeau de synthèse) : titre d'un cran plus bas, sans sous-titre,
   actions centrées sur le titre. Gagne ~35 px de haut de page. */
.page-head--tight { align-items: center; margin-bottom: 14px; }
.page-head--tight h1 { font-size: var(--text-2xl); }

.page-head .sub { margin: 5px 0 0; font-size: var(--text-md); color: var(--text-muted); }
.page-head .actions { flex: none; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.eyebrow {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-subtle);
}

/* ---------- Cards ---------- */
.card {
    display: block;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    margin-bottom: 18px;
    overflow: hidden;
}

/* Carte qui contient une liste déroulante (SearchSelect) devant déborder :
   overflow visible pour ne pas clipper le menu (cf. IntervenantsRattaches). */
.card.card--pop { overflow: visible; }

.card h2 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-snug);
    color: var(--text-strong);
    margin: 0 0 2px;
}

.card .sub { color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 18px; }
.card .card-body { padding: 0; }

/* Carte avec en-tête bordé + corps sans padding (listes, tables) */
.card.flush { padding: 0; }
.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
}
.card-head h2 { margin: 0; }
.card-head .sub { margin: 2px 0 0; }
.card-head .head-actions { display: flex; gap: 8px; flex: none; align-items: center; }
.card-foot {
    padding: 11px 18px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
    font-size: var(--text-sm);
}
.card-foot a { font-weight: var(--fw-semibold); text-decoration: none; }
.card.flush .card-pad { padding: 20px; }

/* ---------- KPI / dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
/* Grille de métriques à nombre variable de tuiles (fiche société plateforme). */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }

/* Liste clé/valeur (fiches de supervision plateforme). */
.kv-list { list-style: none; margin: 0; padding: 0; }
.kv-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.kv-list li:last-child { border-bottom: 0; }
.kv-list li > span:first-child { color: var(--text-subtle); }

/* Liste clé/valeur (fiches de supervision plateforme). */
.kv-list { list-style: none; margin: 0; padding: 0; }
.kv-list li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.kv-list li:last-child { border-bottom: 0; }
.kv-list li > span:first-child { color: var(--text-subtle); }

.stat-card {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-top: 3px solid var(--slate-400);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    color: inherit;
    text-decoration: none;
    display: block;
    transition: border-color 130ms ease-out;
}

a.stat-card:hover { border-color: var(--border-strong); border-top-color: var(--slate-400); }

.stat-card .l {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.stat-card .l svg { color: var(--text-subtle); flex: none; }

.stat-card .n {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    color: var(--text-strong);
    margin-top: 8px;
}

.stat-card.acc-pending { border-top-color: var(--amber-600); }
.stat-card.acc-info { border-top-color: var(--blue-600); }
.stat-card.acc-brand { border-top-color: var(--orange-600); }
.stat-card.acc-confirmed { border-top-color: var(--green-600); }
.stat-card.acc-dispute { border-top-color: var(--red-600); }
a.stat-card.acc-pending:hover { border-top-color: var(--amber-600); }
a.stat-card.acc-info:hover { border-top-color: var(--blue-600); }
a.stat-card.acc-brand:hover { border-top-color: var(--orange-600); }
a.stat-card.acc-confirmed:hover { border-top-color: var(--green-600); }

/* Barre + hero d'avancement (suivi de chantier) */
.progress {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-hover);
    overflow: hidden;
}
.progress > span {
    display: block;
    height: 100%;
    background: var(--green-600);
    border-radius: var(--radius-pill);
    transition: width 200ms ease-out;
}
.avct-hero { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.avct-hero .pct {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    color: var(--green-600);
}
.avct-hero .cx { font-size: var(--text-md); color: var(--text-muted); }
.avct-mini { display: flex; align-items: center; gap: 8px; }
.avct-mini .progress { flex: 1; min-width: 60px; }
.avct-mini .pct { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-strong); min-width: 46px; text-align: right; white-space: nowrap; }

.two-col { display: grid; grid-template-columns: 1fr 360px; gap: 18px; align-items: start; }
.col-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.cta-row { display: flex; gap: 10px; margin: 22px 0 20px; flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--control-h-md);
    padding: 0 16px;
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-md);
    line-height: 1;
    letter-spacing: var(--ls-snug);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 130ms ease-out, border-color 130ms ease-out, color 130ms ease-out;
}

.btn svg { flex: none; }

.btn-primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--action-primary-bg-hover); color: var(--action-primary-fg); }

.btn-ghost, .btn-secondary {
    background: var(--action-secondary-bg);
    color: var(--action-secondary-fg);
    border-color: var(--action-secondary-border);
    box-shadow: var(--shadow-xs);
}

.btn-ghost:hover, .btn-secondary:hover { background: var(--action-secondary-bg-hover); color: var(--text-strong); }

.btn-plain { background: transparent; color: var(--action-ghost-fg); }
.btn-plain:hover { background: var(--action-ghost-bg-hover); color: var(--text-strong); }

.btn-dark { background: var(--ink-950); color: #fff; }
.btn-dark:hover { background: var(--slate-800); color: #fff; }

.btn-danger { background: var(--action-danger-bg); color: #fff; }
.btn-danger:hover { background: var(--action-danger-bg-hover); color: #fff; }

.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--text-sm); gap: 6px; }

.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--slate-600);
    cursor: pointer;
    transition: background 130ms ease-out, border-color 130ms ease-out;
}

.icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.icon-btn.danger { color: var(--red-600); }

.row-actions { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; }

/* ---------- Listes ---------- */
.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}

.list-item:last-child { border-bottom: none; }

/* dans une carte "flush", la liste colle aux bords */
.card.flush .list-item { padding: 12px 18px; }

.li-icon {
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--slate-100);
    color: var(--slate-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.li-icon.round { border-radius: 50%; width: 28px; height: 28px; }
.li-main { min-width: 0; flex: 1; }
.li-title { font-weight: var(--fw-semibold); font-size: var(--text-md); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sub { color: var(--text-subtle); font-size: var(--text-2xs); margin-top: 1px; }
.li-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.empty { text-align: center; padding: 30px 10px; color: var(--text-muted); font-size: var(--text-sm); }

.empty-illu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.empty-illu .ico {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--slate-100);
    color: var(--slate-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Badges & pills ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge-draft { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.badge-archive { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.badge-brand { background: var(--orange-100); color: var(--orange-700); }

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    padding: 3px 10px 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge-status svg { flex: none; }
.badge-status.badge-icon-only { gap: 0; padding: 5px; border-radius: 50%; cursor: default; }
.st-brouillon { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.st-attente { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.st-valide { background: var(--status-confirmed-bg); color: var(--status-confirmed-fg); }
.st-transmis { background: var(--status-info-bg); color: var(--status-info-fg); }
.st-refuse { background: var(--status-dispute-bg); color: var(--status-dispute-fg); }
/* États de devis (les autres réutilisent st-attente / st-valide / st-refuse) */
.st-devis-encours { background: var(--status-info-bg); color: var(--status-info-fg); }
.st-devis-repondu { background: var(--surface-brand-soft); color: var(--orange-700); }
.st-devis-infructueux { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.st-devis-termine { background: var(--green-600); color: #fff; }

.pill-actif {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--status-confirmed-bg);
    color: var(--status-confirmed-fg);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
}

.pill-actif::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px; }

.tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 120ms ease-out, border-color 120ms ease-out;
}

.tab:hover { color: var(--text-strong); }
.tab.active { border-bottom-color: var(--orange-600); color: var(--text-strong); }

.tab .count {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--radius-pill);
    background: var(--slate-100);
    color: var(--text-muted);
}

.tab.active .count { background: var(--orange-100); color: var(--orange-700); }

/* ---------- Segmented control ---------- */
.segmented {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--slate-100);
    border-radius: var(--radius-sm);
}

.segmented button {
    border: none;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: var(--radius-xs);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    background: transparent;
    color: var(--text-muted);
    transition: background 120ms ease-out, color 120ms ease-out;
}

.segmented button.on { background: var(--white); color: var(--text-strong); box-shadow: var(--shadow-xs); }

/* ---------- Wizard : stepper ---------- */
.steps-rail { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; padding-bottom: 2px; }

.step-pill {
    flex: 1 1 0;
    min-width: 86px;
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 11px 8px;
    border-radius: var(--radius-sm);
    background: var(--white);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    font-family: var(--font-sans);
    transition: border-color 130ms ease-out;
}

.step-pill .num {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 600;
    letter-spacing: var(--ls-wide);
    color: var(--text-subtle);
}

.step-pill .lab { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.step-pill:hover:not(.current) { border-color: var(--border-strong); }
.step-pill.current { background: var(--ink-950); border-color: var(--ink-950); box-shadow: none; }
.step-pill.current .num { color: var(--slate-300); }
.step-pill.current .lab { color: var(--white); font-weight: var(--fw-bold); }
.step-pill.done { border-color: var(--green-100); }
.step-pill.done .num { color: var(--green-600); }
.step-pill.done .lab { color: var(--text-strong); }
.step-pill.invalid .lab::after { content: " •"; color: var(--red-600); }

/* ---------- Formulaires ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: var(--fw-medium); font-size: var(--text-sm); color: var(--text-body); margin-bottom: 6px; }
.field label .req { color: var(--red-600); margin-left: 2px; }
.field .hint { color: var(--text-muted); font-size: var(--text-xs); margin-top: 4px; }

.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
    width: 100%;
    height: var(--control-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    background: var(--white);
    color: var(--text-strong);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.field textarea { resize: vertical; min-height: 74px; height: auto; padding: 10px 12px; line-height: var(--lh-snug); }

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}

.field.error input, .field.error select, .field.error textarea { border-color: var(--red-600); background: var(--red-50); }
.field input[readonly] { background: var(--slate-50); color: var(--text-muted); cursor: not-allowed; }

/* Sélecteur filtrable (SearchSelect) : <input> + liste déroulante filtrée. */
.search-select { position: relative; }
.search-select > input { padding-right: 34px; }
.search-select > svg {
    position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
    color: var(--text-subtle); pointer-events: none;
}
.search-select-list {
    position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
    max-height: 260px; overflow-y: auto;
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px;
}
.search-select-opt {
    padding: 8px 10px; border-radius: var(--radius-sm);
    font-size: var(--text-md); color: var(--text-strong); cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-select-opt:hover { background: var(--surface-hover); }
.search-select-opt.sel { background: var(--surface-brand-soft); color: var(--orange-700); font-weight: var(--fw-semibold); }
.search-select-empty { padding: 8px 10px; font-size: var(--text-sm); color: var(--text-muted); }

/* Sélecteur d'intervenants (staged) — cartes des sélections + champ de recherche. */
.ipk-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }

/* Cartes d'intervenants rattachés — variante B du design (rail d'accent +
   avatar, fond BLANC : l'orange reste la couleur d'action, il ne teinte pas
   un bloc entier). Partagées par le sélecteur du devis (édition) et la fiche
   devis en lecture. */
.iv-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px; align-items: start; margin-bottom: 12px;
}
.iv-c {
    background: var(--white); border: 1px solid var(--border-default);
    border-top: 3px solid var(--orange-600); border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs); overflow: hidden;
}
.iv-c__h {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--border-subtle);
}
.iv-c__ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.iv-soc {
    font-size: var(--text-md); font-weight: var(--fw-semibold);
    color: var(--text-strong); line-height: var(--lh-snug);
}
a.iv-soc { color: var(--text-strong); text-decoration: none; }
a.iv-soc:hover { color: var(--orange-700); text-decoration: underline; }
.iv-role { font-size: var(--text-2xs); color: var(--text-muted); }
.iv-av {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--slate-100); border: 1px solid var(--border-subtle);
    color: var(--slate-600); display: inline-flex; align-items: center;
    justify-content: center; font-size: var(--text-xs); font-weight: var(--fw-semibold);
}
.iv-c__b { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.iv-f label {
    display: block; font-size: var(--text-sm); font-weight: var(--fw-medium);
    color: var(--text-body); margin-bottom: 6px;
}
/* Cible de 40 px pour le retrait (une croix de 14 px se rate au doigt). */
.iv-x {
    width: 40px; height: 40px; flex: none; display: inline-flex;
    align-items: center; justify-content: center; border: none;
    background: transparent; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
}
.iv-x:hover { background: var(--surface-hover); color: var(--red-600); }
.iv-x:focus-visible { outline: none; box-shadow: var(--ring); }

/* Coordonnées du contact d'un intervenant (carte, tableau de la fiche affaire). */
.iv-lines { display: flex; flex-direction: column; gap: 7px; }
.iv-line { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--text-sm); color: var(--text-body); }
.iv-line > svg { flex: none; color: var(--text-subtle); }
.iv-line > span, .iv-line > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-contact { font-weight: var(--fw-medium); color: var(--text-strong); }
.iv-fn { color: var(--text-muted); font-weight: var(--fw-regular); }
.iv-empty-c { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }
/* Coordonnées sur une rangée : pastille compacte, où la hauteur compte plus
   que l'alignement des icônes. */
.iv-lines--row { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; }

/* Contact sélectionné sous une liste déroulante (facturation d'un AR, contact
   d'un devis ou d'une affaire) — variante D du design « Cartes Intervenants » :
   la personne choisie s'affiche en pastille, avatar + identité + coordonnées,
   sur un fond sourd (l'orange reste la couleur d'action). */
.ct-person {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 8px; padding: 10px 12px;
    background: var(--surface-page); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.iv-av--sm { width: 28px; height: 28px; font-size: var(--text-2xs); }
.ct-person__m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ct-person__t {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    line-height: var(--lh-snug);
}
.ct-tag {
    font-size: var(--text-2xs); font-weight: var(--fw-semibold);
    text-transform: uppercase; letter-spacing: var(--ls-caps);
    background: var(--status-neutral-bg); color: var(--status-neutral-fg);
    padding: 2px 7px; border-radius: var(--radius-pill);
}
.ct-empty {
    display: flex; align-items: center; gap: 8px;
    margin-top: 8px; padding: 10px 12px;
    background: var(--surface-page); border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); color: var(--text-muted);
}
.ct-empty > svg { flex: none; color: var(--text-subtle); }

/* Le picker et les sélecteurs de contact ne sont pas toujours posés dans un
   .field (fiche devis, fiche affaire) : sans ça leurs contrôles natifs sortent
   sans bordure ni hauteur. Mêmes valeurs que « .field input » — c'est ce que
   /nouveau-devis obtient déjà via ses styles scoped. */
.ipk .search-select > input,
.contact-select {
    width: 100%;
    height: var(--control-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    background: var(--white);
    color: var(--text-strong);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
/* Pas de chevrons ↕ ici — comme sur /nouveau-devis. */
.ipk .search-select > svg { display: none; }
.ipk .search-select > input:focus,
.contact-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.ipk .search-select > input::placeholder { color: var(--text-subtle); }
/* Dans un tableau (fiche affaire), le sélecteur ne mange pas toute la colonne. */
.db-table .contact-select { max-width: 300px; margin-bottom: 8px; }

/* Liste des PJ bufferisées (avant enregistrement) dans DevisForm. */
.pending-files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pending-files li { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-strong); }
.pending-files .linklike {
    border: none; background: none; padding: 0 4px; cursor: pointer;
    font-size: var(--text-md); line-height: 1; color: var(--text-subtle);
}
.pending-files .linklike.danger:hover { color: var(--red-600); }
.field-error-msg { color: var(--red-600); font-size: var(--text-xs); margin-top: 4px; font-weight: var(--fw-semibold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-row.narrow { grid-template-columns: 2fr 1fr; }

/* Saisie d'avancement (% cumulé) du suivi de chantier : input-group compact
   avec suffixe « % » intégré, focus ring du design system, spinners masqués. */
.pct-field {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    width: 104px;
    height: var(--control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--white);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.pct-field:focus-within { border-color: var(--border-focus); box-shadow: var(--ring); }
.pct-field input {
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-md);
    color: var(--text-strong);
    -moz-appearance: textfield;
    appearance: textfield;
}
.pct-field input:focus { outline: none; }
.pct-field input::-webkit-outer-spin-button,
.pct-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pct-field .suffix { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); user-select: none; }

.radio-group, .check-group { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    background: var(--white);
    color: var(--text-body);
    font-family: var(--font-sans);
    box-shadow: var(--shadow-xs);
    transition: background 130ms ease-out, border-color 130ms ease-out, color 130ms ease-out;
}

.chip:hover:not(.selected) { border-color: var(--border-strong); }
.chip.selected { background: var(--surface-brand-soft); border-color: var(--orange-600); color: var(--orange-700); box-shadow: none; }

.section-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-subtle);
    margin: 26px 0 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.section-title:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.wizard-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; gap: 8px; flex-wrap: wrap; }
.wizard-footer .right { display: flex; gap: 10px; }
.autosave-note { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-600); }

.banner {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    margin-bottom: 16px;
    display: block;
    line-height: var(--lh-normal);
}

.banner-danger { background: var(--red-50); border: 1px solid var(--red-100); color: var(--red-600); }
.banner-info { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--text-body); }
.banner-warning { background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-600); }
/* Variante appuyée : une liste à corriger, qui doit se voir au premier coup d'œil. */
.banner-warning--strong { border: 1.5px solid var(--orange-600); color: var(--text-body); }
.banner-warning--strong strong { color: var(--orange-700); }
/* ---------- Annonce plateforme (AnnouncementBox) ----------
   Bandeau posé par le super-admin, en tête d'application pour tous. Doit se voir
   sans hurler : filet d'accent à gauche + pastille d'icône + eyebrow de niveau.
   Réutilisé tel quel en aperçu dans /plateforme/systeme. */
.app-announcement { margin: 16px 28px 0; }

.announce {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--ann-border);
    border-left: 4px solid var(--ann-accent);
    border-radius: var(--radius-md);
    background: var(--ann-bg);
    box-shadow: var(--shadow-sm);
    animation: announce-in 220ms ease-out;
}

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

.announce-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-pill);
    background: var(--ann-chip);
    color: var(--ann-accent-strong);
}

.announce-body { min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.announce-tag {
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--ann-accent-strong);
}

/* pre-line : un message multi-lignes saisi dans le textarea garde ses retours. */
.announce-msg {
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    color: var(--text-body);
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.announce--info {
    --ann-bg: var(--blue-50);
    --ann-border: var(--blue-100);
    --ann-accent: var(--blue-500);
    --ann-accent-strong: var(--blue-700);
    --ann-chip: var(--blue-100);
}

.announce--warning {
    --ann-bg: var(--amber-50);
    --ann-border: var(--amber-100);
    --ann-accent: var(--amber-600);
    --ann-accent-strong: var(--amber-600);
    --ann-chip: var(--amber-100);
}

.announce--danger {
    --ann-bg: var(--red-50);
    --ann-border: var(--red-100);
    --ann-accent: var(--red-600);
    --ann-accent-strong: var(--red-600);
    --ann-chip: var(--red-100);
}

@media (max-width: 960px) {
    .app-announcement { margin: 12px 16px 0; }
}

/* Panneau d'alertes du tableau de bord plateforme. */
.alert-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.alert-list li { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.alert-list li svg { flex: none; }
.alert-list .al-danger { background: var(--red-50); color: var(--red-600); }
.alert-list .al-warning { background: var(--amber-50); color: var(--amber-600); }
.alert-list .al-info { background: var(--blue-50); color: var(--text-body); }
.alert-list a { color: inherit; text-decoration: underline; }
.banner ul { margin: 6px 0 0; padding-left: 18px; font-weight: var(--fw-regular); }

.info-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 13px;
    background: var(--blue-50);
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--text-body);
    line-height: var(--lh-normal);
}

.info-note svg { color: var(--blue-600); flex: none; margin-top: 1px; }

.siret-row { display: flex; gap: 8px; align-items: stretch; }
.siret-row input { flex: 1; }
.multi-field { display: flex; flex-direction: column; gap: 8px; }
.multi-row { display: flex; gap: 8px; align-items: center; }
.multi-row input { flex: 1; }
.devis-field { display: flex; flex-direction: column; gap: 8px; }
/* Devis rattachés (étape Commande du wizard) : colonnes alignées d'une ligne
   à l'autre — n° / nom (ellipse) / montant / bouton détacher. */
.devis-linked { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px 32px; gap: 8px; align-items: center; }
.devis-linked .devis-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devis-linked .devis-montant { text-align: right; }
/* Total de la commande (sous les boutons de rattachement) : mis en valeur,
   même langage visuel que les stat-cards (liseré brand). */
.devis-total-box {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--orange-600);
    border-radius: var(--radius-md);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.devis-total-box .l { color: var(--text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.devis-total-box .n {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
}
.devis-row { display: flex; gap: 8px; align-items: center; }
.devis-row .devis-num { flex: 2; }
.devis-row .devis-montant { flex: 1; min-width: 110px; }

/* Inputs hors .field (lignes de devis) : même style que .field input */
.devis-row input {
    height: var(--control-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    background: var(--white);
    color: var(--text-strong);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.devis-row input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}
.money-input { position: relative; display: flex; align-items: center; }
/* :not() répétés = spécificité alignée sur .field input pour gagner dedans */
.money-input input:not([type=checkbox]):not([type=radio]):not([type=file]) {
    width: 100%;
    padding-right: 28px;
    text-align: right;
    font-family: var(--font-mono);
    appearance: textfield;
    -moz-appearance: textfield;
}
.money-input input::-webkit-outer-spin-button,
.money-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.money-input .unit {
    position: absolute;
    right: 10px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    pointer-events: none;
}
.devis-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.devis-total { font-family: var(--font-mono); font-size: var(--text-md); font-weight: 600; color: var(--text-brand); }

.file-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-name { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.file-none { font-size: var(--text-sm); color: var(--text-muted); }

.certify {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: var(--slate-50);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 13px 16px;
    margin-top: 6px;
}

.certify input { margin-top: 3px; }

.computed-val {
    padding: 9px 12px;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-brand);
}

.paste-zone {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px dashed var(--border-default);
    border-radius: var(--radius-md);
    padding: 20px;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-muted);
    cursor: pointer;
    background: var(--white);
    transition: border-color 130ms ease-out, color 130ms ease-out;
}

.paste-zone:hover { border-color: var(--border-strong); }
.paste-zone:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); color: var(--text-body); }
.paste-zone.drag { border-color: var(--border-focus); box-shadow: var(--ring); color: var(--text-body); background: var(--surface-raised, transparent); }

.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 10px 0; }
.review-grid .rk { font-size: var(--text-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-semibold); }
.review-grid .rv { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--text-strong); overflow-wrap: anywhere; }

/* ---------- Tables ---------- */
.db-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: 0; font-family: var(--font-sans); background: var(--surface-card); }

.db-table th, .db-table td { border-bottom: 1px solid var(--border-subtle); padding: 12px 14px; text-align: left; vertical-align: middle; }

.db-table th {
    background: var(--slate-50);
    font-weight: var(--fw-semibold);
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--text-muted);
    position: sticky;
    top: 0;
    white-space: nowrap;
}

.db-table tbody tr:last-child td { border-bottom: none; }
.db-table tbody tr[role=button], .db-table tbody tr.clickable { transition: background 100ms ease-out; }
.db-table tbody tr[role=button]:hover, .db-table tbody tr.clickable:hover { background: var(--surface-hover); cursor: pointer; }
.db-table .mono, .db-table td.num { font-family: var(--font-mono); }
.db-table td.right, .db-table th.right { text-align: right; }
.db-table .cell-strong { color: var(--text-strong); font-weight: var(--fw-medium); }
.db-table .cell-dash { color: var(--text-subtle); }
.db-table .cell-late { color: var(--status-dispute-fg); font-weight: var(--fw-semibold); }
.db-table tfoot tr.row-total td { border-top: 2px solid var(--border-subtle); border-bottom: none; background: var(--surface-hover); color: var(--text-strong); }
.db-table a.cell-link { color: inherit; text-decoration: none; }
.db-table a.cell-link:hover { color: var(--orange-700); text-decoration: underline; }

.db-scroll {
    overflow: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
}

.table-note { margin-top: 12px; font-size: var(--text-sm); color: var(--text-muted); }

.wf-trail { margin-top: 6px; font-size: var(--text-xs); color: var(--text-muted); padding-left: 18px; }
.wf-trail li { margin: 3px 0; }

.archives-toolbar { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; align-items: flex-end; }

.archives-toolbar input, .archives-toolbar select {
    flex: 1;
    min-width: 160px;
    height: var(--control-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-family: var(--font-sans);
    background: var(--white);
    color: var(--text-strong);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.archives-toolbar input:focus, .archives-toolbar select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

/* ---------- Ligne d'onglets + recherche en ligne ---------- */
/* Le filet du bas passe sur la ligne entière, pas sur les seuls onglets, pour
   que la recherche s'y aligne au lieu de flotter à côté. */
.tabs-row {
    display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px;
    border-bottom: 1px solid var(--border-subtle); margin-bottom: 16px;
}
/* Pas d'overflow ici : une barre de défilement se glisserait entre les onglets
   et le champ de recherche. À l'étroit, c'est la ligne entière qui passe en
   colonne (media query plus bas). */
.tabs-row .tabs { flex: 1 1 auto; border-bottom: none; margin-bottom: 0; }

.inline-search {
    flex: none; display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
    width: 230px; height: var(--control-h-sm); padding: 0 8px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--white); color: var(--text-subtle);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.inline-search:focus-within { border-color: var(--border-focus); box-shadow: var(--ring); }
.inline-search.filled { border-color: var(--orange-600); color: var(--orange-700); }
.inline-search input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: none; outline: none;
    background: transparent; font-family: var(--font-sans); font-size: var(--text-sm);
    color: var(--text-strong);
}
.inline-search button {
    flex: none; display: inline-flex; border: none; background: transparent;
    color: inherit; cursor: pointer; padding: 2px; border-radius: 50%;
}
.inline-search button:hover { background: var(--surface-hover); }

/* ---------- Bandeau de synthèse d'une liste ---------- */
.list-summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 28px;
    margin-bottom: 16px; padding: 12px 18px;
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.ls-stat { display: flex; align-items: baseline; gap: 10px; }
.ls-stat .k {
    font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
    color: var(--text-muted); font-weight: var(--fw-semibold);
}
.ls-stat .v {
    font-family: var(--font-mono); font-size: var(--text-lg);
    font-weight: var(--fw-semibold); color: var(--text-strong);
}
.ls-view { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ls-view label {
    font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
    color: var(--text-muted); font-weight: var(--fw-semibold);
}
.ls-view select {
    height: var(--control-h-sm); padding: 0 9px; min-width: 190px;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-family: var(--font-sans);
    background: var(--white); color: var(--text-strong);
}
.ls-view select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

/* ---------- Tri + filtre par colonne (ColumnHead, FilterChecklist) ---------- */
.db-table th.col-head { padding: 0; }
.db-table th.col-head .ch { display: flex; align-items: center; padding: 4px 8px 4px 10px; }
.db-table th.col-head.right .ch { justify-content: flex-end; }
.db-table th.col-head.filtered { background: var(--surface-brand-soft); }

/* La colonne filtrée réserve la place de l'entonnoir, qui reste alors visible ;
   les autres non — un bouton par colonne élargirait la table de ~20 px chacun
   et la ferait déborder de son conteneur. */
.db-table th.col-head.filtered .ch { padding-right: 28px; }

.ch-sort {
    display: inline-flex; align-items: center; gap: 4px;
    border: none; background: transparent; cursor: pointer;
    font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit;
    padding: 6px 4px; border-radius: var(--radius-sm);
    transition: color 120ms ease-out, background 120ms ease-out;
}
.ch-sort:hover { color: var(--text-strong); background: var(--surface-hover); }
.ch-sort.on { color: var(--orange-700); }

/* Colonne calculée (avancement) : libellé seul, aligné sur les autres. */
.ch-static { padding: 6px 4px; }

/* Entonnoir en superposition (aucune largeur consommée), révélé au survol. */
.ch-filter {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; border: none; background: transparent; cursor: pointer;
    color: var(--text-subtle); padding: 5px; border-radius: var(--radius-sm);
    opacity: 0; transition: opacity 120ms ease-out, color 120ms ease-out;
}
.db-table th.col-head:hover .ch-filter, .ch-filter.on { opacity: 1; }
.ch-filter:hover { background: var(--surface-hover); color: var(--text-strong); }
.ch-filter.on { color: var(--orange-600); }

/* Popover de filtre, ancré sous l'en-tête. `.db-scroll.pop` relâche l'overflow
   pendant l'ouverture, sinon le conteneur scrollable clipperait le popover
   (même piège que `.card--pop` avec SearchSelect). */
.db-scroll.pop { overflow: visible; }

.col-pop-backdrop { position: fixed; inset: 0; z-index: 40; }

.col-pop {
    position: absolute; z-index: 41; top: 100%; left: 6px; width: 262px;
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    text-transform: none; letter-spacing: normal;
    font-weight: var(--fw-regular); color: var(--text-body); cursor: default;
}
.col-pop.right { left: auto; right: 6px; }
.col-pop-head {
    padding: 10px 12px 0; font-size: var(--text-2xs); text-transform: uppercase;
    letter-spacing: var(--ls-caps); color: var(--text-subtle); font-weight: var(--fw-semibold);
}
.col-pop-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.col-pop-foot {
    display: flex; justify-content: space-between; gap: 8px;
    padding: 8px 12px; border-top: 1px solid var(--border-subtle);
}

.fpop-search, .fpop-row input {
    height: var(--control-h-sm); padding: 0 9px;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font-size: var(--text-sm); font-family: var(--font-sans);
    background: var(--white); color: var(--text-strong);
}
.fpop-search { width: 100%; }
.fpop-search:focus, .fpop-row input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

.fpop-actions { display: flex; gap: 12px; }
.fpop-actions .btn-link { font-size: var(--text-xs); }

.fpop-list { max-height: 244px; overflow-y: auto; display: flex; flex-direction: column; }
.fpop-opt {
    display: flex; align-items: center; gap: 8px; padding: 5px 4px;
    border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm);
}
.fpop-opt:hover { background: var(--surface-hover); }
.fpop-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-strong); }
.fpop-count { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); }
.fpop-empty { padding: 6px 2px; font-size: var(--text-sm); color: var(--text-muted); }

.fpop-row { display: flex; align-items: center; gap: 8px; }
.fpop-row label { flex: none; width: 66px; font-size: var(--text-xs); color: var(--text-muted); }
.fpop-row input { flex: 1; min-width: 0; }

/* Filtre composite (le « contient » ET le format, sur la colonne Document). */
.fpop-stack { display: flex; flex-direction: column; gap: 8px; }
.fpop-sub {
    font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
    color: var(--text-subtle); font-weight: var(--fw-semibold);
    border-top: 1px solid var(--border-subtle); padding-top: 8px;
}

.fpop-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; }
.fpop-shortcuts .chip { padding: 4px 9px; font-size: var(--text-xs); }

/* Puces des filtres actifs : sans elles, un filtre posé puis oublié se lit
   comme une liste vide. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }

.fchip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 6px 4px 10px; border-radius: var(--radius-pill);
    background: var(--surface-brand-soft); border: 1px solid var(--orange-200);
    color: var(--orange-700); font-size: var(--text-xs); font-weight: var(--fw-semibold);
}
.fchip button {
    display: inline-flex; border: none; background: transparent; color: inherit;
    cursor: pointer; padding: 2px; border-radius: 50%;
}
.fchip button:hover { background: rgba(20, 26, 33, .10); }

/* ---------- Utilisateurs : stats par rôle, avatars ---------- */
.role-stats { display: flex; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }

.role-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex: 1;
    min-width: 150px;
}

.role-stat .rs-ico {
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--slate-50);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.role-stat .rs-n { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-strong); line-height: 1; }
.role-stat .rs-l { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }

.avatar-sm {
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: var(--fw-semibold);
    background: var(--slate-500);
}

.avatar-admin { background: var(--orange-600); }
.avatar-dir { background: var(--slate-700); }
.avatar-ca { background: var(--blue-600); }
.avatar-chiffreur { background: var(--amber-600); }
.avatar-assist { background: var(--slate-500); }

.user-cell { display: inline-flex; align-items: center; gap: 11px; }
.user-cell .uc-name { font-weight: var(--fw-semibold); color: var(--text-strong); line-height: 1.3; display: block; }
.user-cell .uc-mail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.3; display: block; }

.role-select {
    width: 100%;
    height: var(--control-h-sm);
    padding: 0 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    background: var(--white);
    color: var(--text-strong);
}

.role-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

/* Édition inline de l'email (tables Équipe et Plateforme). */
.email-edit-input {
    height: var(--control-h-sm);
    min-width: 220px;
    padding: 0 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    background: var(--white);
    color: var(--text-strong);
}

.email-edit-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }

.role-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.role-segment button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    gap: 4px;
    padding: 10px 6px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-body);
    text-align: center;
    transition: background 130ms ease-out, border-color 130ms ease-out, color 130ms ease-out;
}

.role-segment button:hover:not(.on) { border-color: var(--border-strong); }
.role-segment button.on { border-color: var(--orange-600); background: var(--surface-brand-soft); color: var(--orange-700); box-shadow: none; }

/* ---------- Toast ---------- */
/* Succès et erreur partagent la même grammaire : surface claire teintée,
   filet d'accent à gauche, icône, texte sombre. Seule la teinte change (et
   l'erreur ajoute une croix, puisqu'elle est persistante). */
#toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: var(--radius-md);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: var(--fw-regular);
    color: var(--text-body);
    background: var(--white);
    border: 1px solid var(--border-subtle);
    opacity: 0;
    transition: opacity .2s ease-out;
    /* Au-dessus des modales (.modal-overlay = 10000) : un toast déclenché
       depuis une modale doit rester visible. */
    z-index: 10001;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

#toast.show { opacity: 1; }
#toast .toast-ic { flex: none; margin-top: 1px; }
#toast .toast-body { flex: 1; min-width: 0; padding-top: 1px; }
#toast .toast-body > span { color: var(--text-strong); font-weight: var(--fw-semibold); }
#toast .toast-list { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
#toast .toast-list li { list-style: disc; color: var(--text-body); }

#toast.ok {
    background: var(--green-50);
    border-color: var(--green-100);
    border-left: 3px solid var(--green-600);
}
#toast.ok .toast-ic { color: var(--green-600); }

/* Erreur : persistante, donc interactive (croix pour fermer). */
#toast.err {
    pointer-events: auto;
    background: var(--red-50);
    border-color: var(--red-100);
    border-left: 3px solid var(--red-600);
}
#toast.err .toast-ic { color: var(--red-600); }
#toast.err .toast-x {
    flex: none;
    display: inline-flex;
    border: none;
    background: transparent;
    color: var(--text-subtle);
    cursor: pointer;
    line-height: 1;
    padding: 2px;
    border-radius: var(--radius-sm);
}
#toast.err .toast-x:hover { background: var(--red-100); color: var(--red-600); }

/* ---------- Modale pièce jointe ---------- */
/* Modale générique (formulaire) — overlay scrollable, boîte centrée en haut. */
.modal-overlay { position: fixed; inset: 0; background: rgba(14, 17, 22, .5); z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.modal-box { background: var(--surface-card); border-radius: var(--radius-lg); width: min(680px, 96vw); box-shadow: var(--shadow-lg); padding: 22px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.modal-head h2 { margin: 0; }

#att-modal { position: fixed; inset: 0; background: rgba(14, 17, 22, .5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.att-box { background: var(--white); border-radius: var(--radius-lg); width: min(900px, 96vw); height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-lg); }
.att-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
.att-name { font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-body { flex: 1; overflow: auto; background: var(--slate-100); }
.att-body img { max-width: 100%; display: block; margin: auto; }
.att-body iframe { width: 100%; height: 100%; border: none; }

/* Fiche document : aperçu à gauche, métadonnées à droite. La colonne de droite
   scrolle seule — sur un PDF long, les informations restent atteignables. */
.att-box--doc { width: min(1180px, 96vw); }
.att-split { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.att-split .att-body { border-right: 1px solid var(--border-subtle); }
.att-meta { overflow: auto; padding: 14px 18px 20px; background: var(--surface-card); }
.att-meta .meta-line { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 8px; padding: 5px 0; align-items: baseline; }
.att-meta .rk { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
.att-meta .rv { font-size: var(--text-sm); color: var(--text-body); overflow-wrap: anywhere; }

@media (max-width: 900px) {
    .att-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .att-split .att-body { border-right: none; border-bottom: 1px solid var(--border-subtle); }
    .att-meta { max-height: 45vh; }
}

/* Base documentaire : la taille ne se coupe jamais en deux lignes (« 38,5 / Ko »). */
.db-table td.size { white-space: nowrap; }

/* ---------- Résultats de recherche globale ---------- */
.search-group + .search-group { margin-top: 18px; }
.search-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-hits { display: flex; flex-direction: column; gap: 2px; }

.search-hit {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.search-hit:hover { background: var(--surface-hover); }
.search-hit:focus-visible { outline: none; box-shadow: var(--ring); }
.hit-body { display: flex; flex-direction: column; gap: 2px; }
.hit-title { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-medium); color: var(--text-strong); }
.hit-sub { font-size: var(--text-sm); color: var(--text-body); }
.hit-context { font-size: var(--text-xs); color: var(--text-muted); }

/* Modale de confirmation générique (actions destructrices) */
.confirm-modal { position: fixed; inset: 0; background: rgba(14, 17, 22, .5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
/* La boîte ne dépasse JAMAIS de l'écran. Sans ce plafond, une modale plus haute
   que la fenêtre débordait en haut ET en bas : le fond est en position fixed,
   il n'y a donc rien à faire défiler, et les boutons devenaient inatteignables.
   dvh (et non vh) pour que la barre d'adresse mobile ne rogne pas le pied. */
.confirm-box {
    background: var(--white); border-radius: var(--radius-lg);
    width: min(420px, 96vw); max-height: calc(100dvh - 40px);
    padding: 22px 22px 18px; box-shadow: var(--shadow-lg);
    overflow: auto;
}
.confirm-box h3 { margin: 0 0 8px; font-size: var(--text-md); color: var(--text-strong); }
.confirm-box p { margin: 0 0 18px; color: var(--text-body); font-size: var(--text-sm); }
.confirm-box .confirm-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Modales larges (aperçu d'import, édition d'une ligne). `width` et non
   `max-width` : la règle de base fixe déjà une largeur, un max-width seul ne
   l'élargirait pas. */
.confirm-box--md { width: min(660px, 96vw); }
.confirm-box--lg { width: min(920px, 96vw); }

/* Modale à en-tête et pied FIXES, corps défilant : sur un aperçu de plusieurs
   centaines de lignes, faire défiler toute la boîte éloignerait le bouton
   « Créer le devis » de plusieurs écrans. */
.confirm-box--flow { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
.confirm-box--flow > h3 { flex: none; }
.confirm-box__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; min-height: 0; margin: 0 -22px; padding: 0 22px 4px; }
.confirm-box--flow > .confirm-actions {
    flex: none; margin: 0 -22px; padding: 14px 22px;
    border-top: 1px solid var(--border-subtle); background: var(--white);
}

/* ---------- Pages Identity (sans Bootstrap : classes réimplémentées) ---------- */
.form-label { display: block; font-weight: var(--fw-medium); font-size: var(--text-sm); color: var(--text-body); margin-bottom: 6px; }

.form-control, .form-select {
    display: block;
    width: 100%;
    height: var(--control-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: var(--text-md);
    background: var(--white);
    color: var(--text-strong);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

textarea.form-control { height: auto; min-height: 74px; padding: 10px 12px; }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.form-control::placeholder { color: var(--text-subtle); }

/* form-floating (markup Identity : input puis label) → label affiché au-dessus */
.form-floating { display: flex; flex-direction: column-reverse; }
.form-floating > label { font-weight: var(--fw-medium); font-size: var(--text-sm); color: var(--text-body); margin-bottom: 6px; }
.form-floating > .form-control::placeholder { color: transparent; }
.form-floating > .form-control:focus::placeholder { color: var(--text-subtle); }

.form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.form-check-input { width: 16px; height: 16px; accent-color: var(--orange-600); margin: 0; }
.form-check-label { font-size: var(--text-md); color: var(--text-body); }

.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--green-600); }
.invalid { outline: none; border-color: var(--red-600); }
.validation-message { color: var(--red-600); font-size: var(--text-xs); font-weight: var(--fw-semibold); display: block; margin-top: 4px; }

.alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); margin-bottom: 16px; border: 1px solid transparent; }
.alert-danger { background: var(--red-50); border-color: var(--red-100); color: var(--red-600); }
.alert-success { background: var(--green-50); border-color: var(--green-100); color: var(--green-600); }
.alert-info { background: var(--blue-50); border-color: var(--blue-100); color: var(--text-body); }
.alert-warning { background: var(--amber-50); border-color: var(--amber-100); color: var(--amber-600); }

/* Navigation de SECTION (Annuaire : clients / intervenants) — à ne pas
   confondre avec `.tabs`, qui filtre le contenu d'une liste. D'où des pastilles
   pleines plutôt que des onglets soulignés : sur la liste des intervenants, les
   deux rangées se suivent et doivent se distinguer au premier coup d'œil. */
.subnav { display: flex; gap: 6px; margin: 0 0 16px; }
.subnav-item {
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--control-h-sm); padding: 0 14px;
    border: 1px solid var(--border-default); border-radius: var(--radius-pill);
    background: var(--white); color: var(--text-subtle);
    font-size: var(--text-sm); font-weight: var(--fw-medium); text-decoration: none;
    transition: border-color 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}
.subnav-item:hover { color: var(--text-strong); border-color: var(--border-strong); }
.subnav-item.is-on {
    background: var(--text-strong); border-color: var(--text-strong); color: var(--white);
}

/* N° d'affaire pas encore attribué par l'ERP du client : une étape du
   processus, pas une donnée manquante — d'où un libellé lisible plutôt qu'une
   cellule vide, en retrait pour ne pas se confondre avec un vrai numéro. */
.num-attente {
    color: var(--text-muted);
    font-style: italic;
    font-family: var(--font-sans);
    font-size: .92em;
    white-space: nowrap;
}

.text-danger { color: var(--red-600); }
.text-secondary { color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-info { color: var(--blue-600); }
.text-success { color: var(--green-600); }
.font-weight-bold { font-weight: var(--fw-bold); }

/* grille Bootstrap minimale (pages Account) */
.row { display: flex; flex-wrap: wrap; gap: 20px; }
.row > * { min-width: 0; }
.col, .col-md-4, .col-md-6, .col-lg-4, .col-lg-5, .col-lg-6, .col-xl-6 { flex: 1 1 320px; }
.col-md-2, .col-md-3, .col-lg-3 { flex: 0 0 220px; }
.col-md-8, .col-md-9, .col-md-12, .col-lg-8, .col-lg-9 { flex: 1 1 460px; }
.col-12 { flex: 0 0 100%; }

.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group-append { display: flex; }
.input-group-text {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--border-default);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--slate-50);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.recovery-code { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-strong); }

/* QR code TOTP : le SVG généré par le serveur porte sa propre taille en
   modules — on la neutralise et on borne l'affichage. */
.qr-code {
    display: inline-block;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.qr-code svg { display: block; width: 200px; height: 200px; }

table:not(.db-table) { border-collapse: collapse; }
table:not(.db-table) th, table:not(.db-table) td { padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); text-align: left; font-size: var(--text-sm); }

.w-100 { width: 100%; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 14px; }
.mt-3 { margin-top: 14px; }
.btn-lg { height: var(--control-h-lg); padding: 0 22px; font-size: var(--text-lg); }
.btn-link { background: none; border: none; color: var(--text-link); font-size: var(--text-md); cursor: pointer; padding: 0; text-decoration: underline; font-family: var(--font-sans); }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: 18px 0; }

/* ---------- Connexion (layout auth plein écran) ---------- */
.auth { display: grid; grid-template-columns: 44% 1fr; min-height: 100vh; }

.auth-brand {
    background: var(--ink-950);
    color: var(--white);
    padding: 44px 48px;
    display: flex;
    flex-direction: column;
}

.auth-wordmark {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-tight);
    color: var(--white);
}

.auth-wordmark .brand-dot { color: var(--orange-500); }

.auth-pitch { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 420px; }

.auth-pitch h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: var(--fw-black);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--white);
}

.auth-pitch p { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--slate-300); }

.auth-copy { font-size: var(--text-xs); color: var(--slate-500); }

.auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--surface-page);
}

.auth-card { width: 100%; max-width: 380px; }

.auth-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--text-strong);
    letter-spacing: var(--ls-snug);
}

.auth-sub { margin: 6px 0 26px; font-size: var(--text-md); color: var(--text-muted); }

.input-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--control-h-md);
    padding: 0 12px;
    background: var(--white);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-subtle);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}

.input-icon:focus-within { border-color: var(--border-focus); box-shadow: var(--ring); }
.input-icon svg { flex: none; }

/* prime sur .field input (l'enveloppe .input-icon porte bordure et focus) */
.field .input-icon input:not([type=checkbox]):not([type=radio]):not([type=file]),
.input-icon input {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-md);
    color: var(--text-strong);
}

.input-icon input::placeholder { color: var(--text-subtle); }
.input-icon:has(input.invalid) { border-color: var(--red-600); }

.auth-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-md);
    color: var(--text-body);
    cursor: pointer;
}

.auth-foot {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: center;
    line-height: var(--lh-normal);
}

.auth-foot a { font-weight: var(--fw-semibold); text-decoration: none; }

@media (max-width: 840px) {
    .auth { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-panel { padding: 24px 16px; align-items: flex-start; padding-top: 48px; }
}

/* ---------- Mon compte (pages Identity Manage) ---------- */
.manage-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }

.manage-nav { display: flex; flex-direction: column; gap: 2px; }

.manage-nav a {
    display: block;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--slate-600);
    font-size: var(--text-md);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background 130ms ease-out, color 130ms ease-out;
}

.manage-nav a:hover:not(.active) { background: var(--surface-hover); color: var(--text-strong); }
.manage-nav a.active { background: var(--surface-brand-soft); color: var(--orange-700); font-weight: var(--fw-semibold); }

.manage-body {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    min-width: 0;
}

.manage-body h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-strong); margin: 0 0 14px; }

@media (max-width: 960px) {
    .manage-grid { grid-template-columns: 1fr; }
    .manage-nav { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- Blazor error UI ---------- */
#blazor-error-ui {
    color-scheme: light only;
    background: var(--red-600);
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 100000;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
}

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

#blazor-error-ui a { color: #fff; }

.blazor-error-boundary {
    background: var(--red-600);
    border-radius: var(--radius-md);
    padding: 1rem;
    color: white;
}

.blazor-error-boundary::after { content: "Une erreur est survenue."; }

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

/* Écrans tactiles : cibles ≥ 40px (recommandation ~44px) */
@media (pointer: coarse) {
    .btn-sm { height: 38px; padding: 0 14px; }
    .icon-btn { width: 40px; height: 40px; }
    .tab { padding: 12px 14px; }
    .side-nav a, .manage-nav a { padding: 12px 10px; }
    .segmented button { padding: 9px 14px; }
}

/* Tablette : sidebar repliée en barre horizontale, grilles à 1 colonne */
@media (max-width: 960px) {
    /* Étroit : la recherche repasse sous les onglets, pleine largeur. */
    .tabs-row { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 8px; }
    .inline-search { width: 100%; margin-bottom: 0; }

    .shell { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: column; border-right: none; border-bottom: 1px solid var(--border-subtle); overflow-y: visible; }
    .brand { height: 52px; border-bottom: none; }
    .side-nav { flex-direction: row; overflow-x: auto; padding: 0 12px 8px; align-items: center; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .side-nav::-webkit-scrollbar { display: none; }
    .side-nav a { white-space: nowrap; flex: none; }
    .side-nav .nav-spacer, .side-nav .nav-divider { display: none; }
    .tenant-box { margin: 8px 12px; }
    .topbar { padding: 0 16px; gap: 10px; }
    .searchbox { display: none; }
    .content { padding: 20px 16px 34px; }
    .two-col { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr 1fr; }
    .role-stats { display: grid; grid-template-columns: 1fr 1fr; }
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: none; white-space: nowrap; }
    .db-scroll { -webkit-overflow-scrolling: touch; }
}

/* Mobile */
@media (max-width: 640px) {
    .field-row { grid-template-columns: 1fr; }
    .field-row.narrow { grid-template-columns: 1fr; }
    .dash-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .user-meta { display: none; }

    /* iOS zoome sur les champs < 16px : forcer 16px au focus */
    .field input:not([type=checkbox]):not([type=radio]):not([type=file]),
    .field select, .field textarea,
    .archives-toolbar input, .archives-toolbar select,
    .form-control, .form-select, .role-select, .email-edit-input { font-size: 16px; }

    .page-head { flex-direction: column; align-items: stretch; }
    .page-head h1 { font-size: var(--text-2xl); }

    .page-head .actions { justify-content: stretch; }
    .page-head .actions .btn { flex: 1; }

    /* Stepper compact : numéros seuls, libellé sur l'étape courante */
    .steps-rail { gap: 5px; }
    .step-pill { min-width: 0; min-height: 44px; padding: 8px 6px; }
    .step-pill:not(.current) .lab { display: none; }
    .step-pill.current { flex: 2 1 auto; }

    /* Footer wizard empilé, boutons pleine largeur */
    .wizard-footer { flex-direction: column-reverse; align-items: stretch; }
    .wizard-footer .right { flex-direction: column; }
    .wizard-footer .right .btn, .wizard-footer > .btn { width: 100%; justify-content: center; }
    .autosave-note { justify-content: center; }

    /* Toolbars et actions de liste empilées */
    .archives-toolbar { flex-direction: column; align-items: stretch; }
    .archives-toolbar input, .archives-toolbar select { max-width: none !important; flex: 1 1 auto; }
    .archives-toolbar > * { width: 100%; }
    .cta-row .btn { flex: 1 1 auto; justify-content: center; }
    .list-item { flex-wrap: wrap; }
    .list-item .li-actions { width: 100%; justify-content: flex-end; }
    .role-stats { grid-template-columns: 1fr; }
    .role-segment { grid-template-columns: 1fr 1fr; }
    .two-col { gap: 14px; }
    .card, .manage-body { padding: 16px; }
    .card.flush { padding: 0; }
    .card-head { padding: 12px 16px; }
    .card.flush .card-pad { padding: 16px; }
    .card.flush .list-item { padding: 12px 16px; }

    /* Modale pièce jointe plein écran */
    #att-modal { padding: 0; }
    .att-box { width: 100vw; height: 100vh; border-radius: 0; }

    #toast { left: 16px; right: 16px; transform: none; text-align: center; }
    #toast.err { max-width: none; text-align: left; }

    .bell { padding: 0 10px; }
}

/* ---------- Légal : badge bêta, footers, pages CGU ---------- */
.badge-beta {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    background: var(--orange-100);
    color: var(--orange-700);
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    vertical-align: middle;
    line-height: 1.4;
}

.auth-wordmark .badge-beta { background: var(--orange-500); color: var(--white); }

.app-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px 16px;
    font-size: var(--text-xs);
    color: var(--slate-400);
}

.app-footer a { color: var(--slate-500); text-decoration: none; }
.app-footer a:hover { color: var(--text-strong); text-decoration: underline; }
.app-footer .footer-note { margin-left: auto; }

.auth-panel { flex-direction: column; gap: 18px; }

.auth-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-xs);
    color: var(--slate-400);
}

.auth-footer a { color: var(--slate-500); text-decoration: none; }
.auth-footer a:hover { color: var(--text-strong); text-decoration: underline; }

/* Page d'acceptation : carte élargie + texte CGU scrollable */
.auth-card:has(.cgu-scroll) { max-width: 640px; }

.cgu-scroll {
    max-height: 46vh;
    overflow-y: auto;
    margin: 16px 0;
    padding: 14px 16px;
    border: 1px solid var(--border-default, var(--slate-200));
    border-radius: var(--radius-md);
    background: var(--white);
}

/* Contenu des documents légaux */
.legal-page { max-width: 860px; }
.legal-page h2 { margin-top: 0; }

.legal-doc h4 { margin: 18px 0 6px; font-size: var(--text-md); color: var(--text-strong); }
.legal-doc p, .legal-doc li { font-size: var(--text-sm); line-height: 1.65; color: var(--slate-600); }
.legal-doc ul { margin: 6px 0 10px; padding-left: 20px; }
.legal-doc .legal-meta { font-size: var(--text-xs); color: var(--slate-400); margin: 0 0 4px; }

/* ============================================================
   Tableau de bord « Vue d'ensemble » (handoff design, classes ac-*)
   ============================================================ */
.ac-eyebrow { font-size: var(--text-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); }
.ac-eyebrow--sec { margin: 0 0 10px; }
.ac-link { font-size: var(--text-sm); font-weight: 600; color: var(--text-link); }

.ac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.ac-head h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.02em; color: var(--text-strong); }
.ac-head .sub { margin: 5px 0 0; font-size: var(--text-md); color: var(--text-muted); }
.ac-head .actions { display: flex; gap: 10px; flex: none; }

/* Bandeau KPI — une seule ligne desktop (StatCard réutilisé) */
.ac-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.ac-kpis .stat-card { height: 100%; transition: box-shadow 140ms ease-out, transform 140ms ease-out; }
.ac-kpis a.stat-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }

/* Grilles thématiques */
.ac-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; align-items: start; }
.ac-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }

/* Tuiles de stats dans les cartes */
.ac-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ac-stats--2 { grid-template-columns: 1fr 1fr; align-items: stretch; }
.ac-stat { display: flex; flex-direction: column; gap: 3px; min-height: 40px; padding: 12px 14px; background: var(--slate-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); transition: background 140ms ease-out, border-color 140ms ease-out; }
a.ac-stat:hover { background: var(--white); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.ac-stat__l { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); }
.ac-stat__v { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.ac-stat__s { font-size: var(--text-2xs); color: var(--text-subtle); }
.ac-finaliser { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; padding: 12px 14px; background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--radius-sm); }
.ac-chart { overflow-x: auto; padding-bottom: 2px; }

/* Tendance */
.ac-trend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ac-trend__i { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--slate-50); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
a.ac-trend__i:hover { background: var(--white); border-color: var(--border-default); box-shadow: var(--shadow-sm); }
.ac-trend__l { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.ac-trend__v { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 600; color: var(--text-strong); letter-spacing: -.01em; }
.ac-trend__p { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--text-subtle); }
.ac-delta { font-weight: 600; font-size: var(--text-sm); }
.ac-delta.up { color: var(--green-600); }
.ac-delta.down { color: var(--red-600); }
.ac-delta.flat { color: var(--text-subtle); }

/* Listes (à traiter / brouillons / activité) */
.ac-list { display: flex; flex-direction: column; }
.ac-row { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 11px 18px; border-bottom: 1px solid var(--border-subtle); color: inherit; }
.ac-row:last-child { border-bottom: none; }
.ac-row:hover { background: var(--surface-hover); color: inherit; }
.ac-row__ic { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--slate-100); color: var(--slate-500); display: inline-flex; align-items: center; justify-content: center; }
.ac-row__tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-row__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: var(--text-md); font-weight: 600; color: var(--text-strong); min-width: 0; }
.ac-row__n { font-size: var(--text-2xs); color: var(--text-muted); }
.ac-row__r { flex: none; }
.ac-ref { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--text-strong); }
.ac-sep { font-size: var(--text-sm); font-weight: 500; color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac-go { color: var(--text-subtle); display: inline-flex; }
.ac-more { display: block; padding: 12px 18px; border-top: 1px solid var(--border-subtle); text-align: center; font-size: var(--text-sm); font-weight: 600; color: var(--text-link); }

.badge-warning { background: var(--status-pending-bg); color: var(--status-pending-fg); }

@media (max-width: 1280px) {
    .ac-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ac-g2, .ac-g3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .ac-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ac-trend, .ac-stats { grid-template-columns: 1fr; }
    .ac-head { flex-direction: column; }
}

/* Barre de filtres du journal des sociétés : libellé au-dessus du champ,
   les champs se répartissent la largeur et repassent à la ligne au besoin. */
.filters { display: flex; flex-wrap: wrap; gap: 12px; }
.filters label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 180px;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ── Tête du suivi de chantier : avancement + chiffres dans UNE carte ───────
   Le pourcentage à gauche, les montants à droite, sur une seule ligne. En deux
   blocs séparés (hero d'avancement + quatre tuiles), le haut de page occupait
   un écran entier avant la première ligne de saisie, et le montant réalisé
   apparaissait deux fois. */
.chantier-head {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 20px;
    margin-bottom: 18px;
}
.chantier-head .ch-pct { flex: 0 0 190px; }
.chantier-head .ch-pct .l {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.chantier-head .ch-pct .n {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1.1;
    color: var(--text-strong);
    margin: 2px 0 8px;
}
.chantier-head .ch-stats {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 24px;
}
/* Le liseré coloré remplace la tuile : le code couleur des stat-cards survit
   sans leur encombrement. */
.chantier-head .s { padding-left: 12px; border-left: 3px solid var(--slate-400); }
.chantier-head .s .l {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.chantier-head .s .n {
    display: block;
    margin-top: 4px;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
    line-height: 1.1;
    color: var(--text-strong);
    white-space: nowrap;
}
.chantier-head .s.acc-brand { border-left-color: var(--orange-600); }
.chantier-head .s.acc-confirmed { border-left-color: var(--green-600); }
.chantier-head .s.acc-info { border-left-color: var(--blue-600); }
.chantier-head .s.acc-pending { border-left-color: var(--amber-600); }

@media (max-width: 1100px) {
    .chantier-head { flex-wrap: wrap; gap: 18px; }
    .chantier-head .ch-pct { flex: 1 1 100%; }
    .chantier-head .ch-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ── Saisie des situations de chantier (page /affaire/{id}/situations) ──────

   L'ÉQUATION, au-dessus du tableau : déjà réalisé + cette situation = nouveau
   cumul. Tous les chiffres saisis sont des cumuls, un seul est un montant de
   période — la confusion se règle ici, en écrivant l'opération en toutes
   lettres, plutôt qu'en espérant qu'un intitulé de colonne suffise. */
.sit-eq { display: flex; align-items: stretch; flex-wrap: wrap; margin: 4px 0 18px; }
.sit-eq .box {
    flex: 1 1 200px;
    padding: 12px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}
.sit-eq .box .l {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.sit-eq .box .n {
    font-size: 22px;
    font-weight: var(--fw-semibold);
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}
.sit-eq .box .x { font-size: var(--text-xs); color: var(--text-muted); margin-top: 3px; }
.sit-eq .op { display: flex; align-items: center; padding: 0 12px; font-size: 20px; color: var(--text-subtle); }
/* Le terme du milieu est le seul qui compte au moment de facturer : il est le
   seul en couleur d'action. */
.sit-eq .box.now { border: 2px solid var(--action-primary-bg); background: var(--surface-brand-soft); }
.sit-eq .box.now .l, .sit-eq .box.now .n { color: var(--text-brand); }

@media (max-width: 900px) {
    .sit-eq { flex-direction: column; }
    .sit-eq .op { padding: 4px 0; }
}

/* Le tableau porte deux colonnes de saisie (le cumul, en % ou en €) et une
   colonne calculée (le montant de la période) : sans séparateur visuel, l'œil
   ne sait plus dans quelle série il tape.

   Ces champs vivent DANS un tableau, donc hors d'un `.field` : ils n'héritent
   d'aucun style de contrôle et sortiraient nus (bordure du navigateur, hauteur
   différente de celle du champ % voisin). On rejoue donc ici le style de
   contrôle du design system, calé sur `.pct-field` pour que les deux colonnes
   d'une même série s'alignent au pixel. */
.sit-table th.sep, .sit-table td.sep { border-left: 2px solid var(--border-subtle); }

/* L'en-tête est collant (`.db-table th`), mais sans z-index il reste dans la
   même couche que les cellules positionnées — et `.money-input` / `.pct-field`
   le sont. Sur un bordereau qui défile, les champs de saisie passaient DEVANT
   le nom de leur colonne. Posé ici et pas sur `.db-table th` : les listes ont
   un popover de filtre dans leur en-tête, dont l'empilement dépend de ces
   th-là. */
.sit-table th { z-index: 2; }

/* Deux zones nommées par un en-tête à deux niveaux : le cumul, et la période.
   Le fond porte le groupe sur toute la hauteur — c'est lui qui dit « ces deux
   colonnes-là parlent de la même chose », ce qu'un intitulé ne fait pas. La
   sélection de ligne et la ligne de total ont leur propre fond : les sélecteurs
   sont donc plus spécifiques. */
.sit-table tr.grp th {
    text-align: center;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: 2px;
    border-bottom: none;
}
.sit-table th.sub { font-size: var(--text-xs); font-weight: var(--fw-medium); color: var(--text-muted); }
.db-table.sit-table th.zn,
.db-table.sit-table tbody td.zn,
.db-table.sit-table tfoot tr.row-total td.zn,
.db-table.sit-table tbody tr.row-selected > td.zn { background: var(--surface-brand-soft); }
.sit-table th.zn, .sit-table td.zn { color: var(--text-brand); }
.sit-table tbody td.zn { font-size: var(--text-md); }
/* Prévisionnel non posé : le montant affiché vient du réalisé (règle de
   SituationService.PrevuPeriode). Il est juste, mais il n'a été décidé par
   personne — d'où le ton effacé. */
.sit-table tbody td.zn.herite { color: var(--text-muted); font-weight: var(--fw-regular); }
/* D'où part le cumul, et ce qui avait été prévu : en filigrane sous le champ,
   parce que la colonne qui portait ces valeurs n'est plus à l'écran. */
.sit-was {
    display: block;
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-align: right;
}

/* Conséquence de la saisie, en une phrase, juste avant les boutons. */
.sit-phrase {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-left: 3px solid var(--action-primary-bg);
    background: var(--surface-brand-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    color: var(--text-body);
}

.sit-table .pct-field { width: 96px; margin-left: auto; }
.sit-table .money-input { width: 118px; margin-left: auto; }
.sit-table .money-input input,
.sit-comment input {
    height: var(--control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-strong);
    font-size: var(--text-md);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.sit-table .money-input input {
    width: 100%;
    padding-right: 26px;
    text-align: right;
    font-family: var(--font-mono);
}
.sit-table .money-input .unit { font-size: var(--text-sm); }
.sit-table .money-input input:focus,
.sit-comment input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}
.sit-table .money-input input:disabled { background: var(--surface-hover); }
.sit-table td { vertical-align: middle; }
.sit-trace { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.db-table tr.row-group td {
    background: var(--surface-hover);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}
/* Ligne de remise d'un bordereau : déduite du total, jamais saisie dans
   les situations. En italique pour se distinguer d'un poste. */
.db-table tr.row-remise td { font-style: italic; color: var(--text-muted); }
.db-table tr.row-remise td.mono { color: var(--text-strong); }
.db-table tr.row-selected > td { background: var(--surface-hover); }
.db-table td.neg, .db-table td .neg { color: var(--red-600); }
.nowrap { white-space: nowrap; }
/* Ligne verrouillée (validée ou partie au client) : lisible, mais visiblement
   inerte — sans ça, un champ désactivé garde l'air d'un champ où l'on peut taper. */
.money-input--off { opacity: .55; }
.money-input--off input { pointer-events: none; }
.pct-field:has(input:disabled) { opacity: .55; background: var(--surface-hover); }

/* Commentaire d'une ligne de situation : il part sur le relevé du client, donc
   il est visible en permanence, pas caché derrière une icône à déplier. Le
   libellé en petites capitales reprend celui des clés de fiche (.rk) — c'est
   ce qui le rattache visuellement au reste du site plutôt qu'à un champ isolé. */
/* La ligne de commentaire prolonge celle du devis : le trait qui les séparait
   faisait lire le commentaire comme celui du devis SUIVANT. Il tombe donc, et
   la cellule garde l'espace vertical d'une cellule normale — sans lui, le
   champ vient toucher la ligne du dessus. */
.sit-table tr:has(+ tr.row-comment) > td { border-bottom: none; }
.db-table tr.row-comment > td { border-top: none; padding-top: 10px; padding-bottom: 12px; }
.sit-comment { display: flex; align-items: center; gap: 10px; }
.sit-comment .lbl {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.sit-comment input { flex: 1; min-width: 0; }
.sit-comment-ro { color: var(--text-muted); font-style: italic; font-size: var(--text-sm); }
/* Suite donnée à un relevé (accord ou annulation) : le motif compte autant que
   le statut — un « Annulé » sans raison oblige à aller chercher ailleurs. Sur
   UNE ligne, tronqué : en pile, trois relevés annulés doublaient la hauteur du
   tableau pour des phrases qu'on ne relit jamais en entier. */
.db-table td.sit-suite {
    font-size: var(--text-sm);
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sit-suite .d { color: var(--text-body); font-weight: var(--fw-medium); }
.sit-suite .m { color: var(--text-muted); }
.sit-suite .d + .m::before { content: " — "; }
.sit-suite .m.todo { font-style: italic; }

/* Barre de génération d'un relevé : fenêtre de dates, commentaire, aperçu du
   montant et bouton sur une seule ligne. */
.releve-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 4px;
}
.releve-bar > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.releve-bar > label.grow { flex: 1 1 240px; }
.releve-bar > label > span,
.sit-entete > label > span {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.releve-bar input, .releve-bar select,
.sit-entete input {
    height: var(--control-h-sm);
    padding: 0 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text-strong);
    font-size: var(--text-md);
    width: 100%;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.releve-bar input:focus, .releve-bar select:focus,
.sit-entete input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--ring);
}
.releve-bar .rb-apercu { display: flex; flex-direction: column; gap: 1px; padding-bottom: 2px; }
.releve-bar .rb-apercu .n {
    font-size: var(--text-lg);
    font-weight: var(--fw-semibold);
    color: var(--text-brand);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.releve-bar .rb-apercu .x { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.releve-bar .rb-apercu .vide { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* En-tête d'une situation : date, libellé, commentaire interne sur une ligne,
   sans bouton à eux — ils partent avec « Tout enregistrer ». */
.sit-entete {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 12px 0 14px;
}
.sit-entete > label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sit-entete > label.grow { flex: 1 1 200px; }
.sit-entete > label.grow2 { flex: 2 1 280px; }

/* ---------- Bordereau d'un devis (lignes) ---------- */
/* Le code article vit sous la désignation, en second plan : il sert à retrouver
   un poste dans le fichier d'origine, pas à être lu à chaque ligne. */
.dl-code { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 2px; }

/* Aperçu d'import : le défilement vertical est celui du corps de la modale
   (.confirm-box__body) — deux ascenseurs imbriqués rendraient la lecture
   pénible. Ici, seul le débordement horizontal est pris en charge. */
.import-preview { overflow-x: auto; }

/* Bilan de réconciliation d'un import : deux totaux face à face. Le vert ou le
   rouge portent l'information, le chiffre la confirme. */
.import-check { display: flex; flex-wrap: wrap; gap: 22px; align-items: baseline; margin: 10px 0 4px; }
.import-check .k { font-size: var(--text-2xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-semibold); }
.import-check .v { font-family: var(--font-mono); font-size: var(--text-md); color: var(--text-strong); font-weight: var(--fw-semibold); }
.import-check.ok .v { color: var(--status-ok-fg, var(--text-strong)); }
.import-check.ko .v { color: var(--red-600); }

/* Ouvrages repris sans n° de bordereau : un par ligne, chapitre · libellé · montant. */
.import-sans-numero { margin: 12px 0 4px; }
/* Bornée en hauteur : un gros devis peut en aligner cent, la modale ne doit
   pas devenir une page de liste. */
.import-sans-numero ul { list-style: none; padding-left: 0; margin-top: 8px; max-height: 260px; overflow: auto; }
.import-sans-numero li { display: flex; gap: 12px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--amber-100); }
.import-sans-numero li .mono:first-child { min-width: 56px; color: var(--text-strong); }
.import-sans-numero__d { flex: 1; min-width: 0; }
.import-sans-numero li .mono:last-child { white-space: nowrap; }

/* Dépôt des deux fichiers de l'export de chiffrage. */
.import-drop { border: 1px dashed var(--border-default); border-radius: var(--radius-md); padding: 10px; background: var(--surface-hover); }

/* La zone ENTIÈRE est le champ de fichiers : l'input est en superposition,
   transparent, aux dimensions du cadre. Sans ça, seul le bouton natif accepte
   le dépôt — et un fichier lâché dans le cadre part s'ouvrir dans un onglet.
   C'est aussi ce qui rend le clic actif partout dans la zone. */
.import-drop__zone {
    position: relative; display: flex; flex-direction: column; align-items: center;
    gap: 6px; text-align: center; padding: 22px 16px; border-radius: var(--radius-sm);
    color: var(--text-muted); cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}
.import-drop__zone:hover { background: var(--surface-card); color: var(--text-strong); }
.import-drop__zone .t { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
.import-drop__zone .hint { max-width: 46ch; }
.import-drop__zone input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.import-drop__zone input[type=file]:disabled { cursor: default; }
.import-files { list-style: none; margin: 10px 0 0; padding: 0; font-size: var(--text-sm); }
.import-files li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.import-files .role { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); font-weight: var(--fw-semibold); }

/* ---------- Saisie d'une situation poste par poste ---------- */
/* Le chevron ouvre le détail d'un devis. Il est là même quand le détail n'est
   pas activé : c'est par lui qu'on découvre que la saisie fine existe. */
.sit-expand {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-right: 6px; vertical-align: middle;
    border: none; background: transparent; color: var(--text-subtle);
    border-radius: var(--radius-sm); cursor: pointer;
    transition: transform 120ms ease-out, color 120ms ease-out, background 120ms ease-out;
}
.sit-expand:hover { background: var(--surface-hover); color: var(--text-strong); }
.sit-expand.on { transform: rotate(90deg); color: var(--orange-700); }

/* Un devis suivi poste par poste : le dire sur la ligne, sinon on cherche
   pourquoi ses champs ne se laissent pas taper. */
.sit-badge-detail {
    margin-left: 8px; padding: 1px 7px; border-radius: var(--radius-pill);
    font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps);
    font-weight: var(--fw-semibold); color: var(--orange-700);
    background: var(--orange-50, var(--surface-hover));
}

.db-table tr.row-detail > td { background: var(--surface-hover); padding: 0; }
.sit-detail { padding: 14px 16px 16px; }
.sit-detail__off { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.sit-detail__off .hint { margin: 4px 0 0; max-width: 70ch; }
.sit-detail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.sit-detail__t { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-caps); font-weight: var(--fw-semibold); color: var(--text-subtle); }
.sit-detail__a { display: flex; gap: 8px; }
/* Le panneau n'a pas de bouton d'enregistrement : le dire, sinon on cherche
   celui qui a disparu. */
.sit-detail__x { margin-left: 10px; text-transform: none; letter-spacing: normal; font-weight: var(--fw-regular); color: var(--text-muted); }
/* Un bordereau fait couramment cent postes : il défile dans sa boîte, sinon la
   ligne du devis suivant se retrouve à deux écrans de la précédente. */
.sit-detail__scroll { max-height: 52vh; }

/* N° de devis + version : deux champs de saisie, un seul numéro. Les séparer
   dans la grille ferait oublier qu'ils vont ensemble — le client, lui, lit
   « 2210447/00 » d'un seul tenant. Le séparateur affiché entre les deux dit
   qu'il n'est pas à saisir. */
.num-ver { display: flex; align-items: center; gap: 6px; }
.num-ver > input { flex: 1 1 auto; min-width: 0; }
.num-ver__sep { flex: none; color: var(--text-muted); }
/* Deux chiffres : la largeur du champ le dit avant même qu'on essaie. Elle est
   posée sur un CONTENEUR et non sur l'input — la règle générale des champs de
   formulaire (`.field input:not(…)`, width 100 %) est plus spécifique que
   n'importe quelle classe posée directement dessus, et l'emporterait. */
.num-ver__v { flex: none; width: 3.6em; }
.num-ver__v input { text-align: center; }