/* ============================================================
   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);
}

.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;
}

.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(4, 1fr); gap: 14px; margin-bottom: 20px; }

.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); }

.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; }
.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); }

.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; }
.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; }

.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 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-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); }

.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-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); }

/* ---------- 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-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); }

.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 ---------- */
#toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    background: var(--ink-900);
    color: #fff;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    opacity: 0;
    transition: opacity .2s ease-out;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

#toast.show { opacity: 1; }
#toast.err { background: var(--red-600); }
#toast.ok { background: var(--green-600); }

/* ---------- Modale pièce jointe ---------- */
#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; }

/* ---------- 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); }

.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); }

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) {
    .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 { 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; }

    .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; }