/* ==========================================================================
   Gelinapp - feuille de style principale
   Systeme de theme clair/sombre via [data-theme]. Police systeme (perf + CSP).
   ========================================================================== */

:root {
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Rouge eclair du logo Gelinas Electrique (#dd1d23). */
    --brand: #dd1d23;
    --brand-hover: #b8171d;
    --brand-soft: #fde8e9;
    --brand-ink: #0a0a0a;

    --bg: #f4f4f4;
    --bg-elev: #ffffff;
    --bg-sidebar: #0a0a0a;
    --bg-sidebar-hover: #1c1c1c;
    --text: #1a1a1a;
    --text-muted: #5c5c5c;
    --text-inverse: #f2f2f2;
    --border: #e2e2e2;
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);
    --primary-soft: var(--brand-soft);
    --success: #16a34a;
    --success-soft: #dcfce7;
    --danger: #b91c1c;
    --danger-soft: #fee2e2;
    --warning: #d97706;
    --warning-soft: #fef3c7;
    --info: #0f766e;
    --info-soft: #ccfbf1;

    --radius: 8px;
    --radius-sm: 6px;
    --shadow: 0 1px 2px rgba(10, 10, 10, .06);
    --shadow-lg: 0 12px 28px rgba(10, 10, 10, .14);
    /* Barre laterale : rail d'icones + panneau du menu. --sidebar-w est le
       total, c'est lui que lisent les elements poses a droite du menu. */
    --rail-w: 60px;
    --panel-w: 236px;
    --sidebar-w: calc(var(--rail-w) + var(--panel-w));
    color-scheme: light;
}

[data-theme="dark"] {
    --brand: #ef3a40;
    --brand-hover: #f87171;
    --brand-soft: #3a1416;
    --bg: #121212;
    --bg-elev: #1a1a1a;
    --bg-sidebar: #050505;
    --bg-sidebar-hover: #1a1a1a;
    --text: #f2f2f2;
    --text-muted: #a3a3a3;
    --text-inverse: #f2f2f2;
    --border: #2a2a2a;
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);
    --primary-soft: var(--brand-soft);
    --success-soft: #14351f;
    --danger-soft: #3b1717;
    --warning-soft: #3a2a0c;
    --info-soft: #0c2f2c;
    --shadow: 0 1px 3px rgba(0, 0, 0, .45);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.icon { flex: 0 0 auto; vertical-align: middle; }
.muted { color: var(--text-muted); }
.center { text-align: center; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .85em; }

/* ---------- Layout ---------- */
.layout { display: flex; min-height: 100vh; }

/* Barre laterale = rail d'icones (categories) + menu a trois niveaux.
   Le rail reste visible quel que soit le niveau du menu : depuis un
   projet ou l'arborescence, on saute au Magasin ou au Carnet d'un clic. */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--bg-sidebar);
    color: var(--text-inverse);
    display: flex;
    flex-direction: row;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
.sidebar-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
}
.sidebar-rail {
    flex: 0 0 var(--rail-w);
    width: var(--rail-w);
    display: flex; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px 6px;
    background: #000;
    border-right: 1px solid rgba(255, 255, 255, .08);
    overflow-y: auto; scrollbar-width: none;
}
.sidebar-rail::-webkit-scrollbar { width: 0; }
.rail-brand {
    display: grid; place-items: center; height: 56px; margin-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.rail-brand .brand-logo { width: 36px; height: 36px; }
.rail-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 54px; border-radius: var(--radius-sm);
    color: #94a3b8; font-size: 10px; line-height: 1; letter-spacing: .2px;
    position: relative;
}
.rail-item .icon { width: 22px; height: 22px; }
/* line-height 1 + overflow hidden coupait les jambages (le g de Magasin). */
.rail-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; padding: 0 2px; }
.rail-item:hover { background: var(--bg-sidebar-hover); color: #fff; text-decoration: none; }
/* is-shown : la categorie dont le menu est affiche ; active : celle de la
   page courante (trait rouge). Les deux se confondent le plus souvent. */
.rail-item.is-shown { color: #fff; background: rgba(255, 255, 255, .08); }
.rail-item.active::before {
    content: ''; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px;
    background: var(--primary); border-radius: 0 3px 3px 0;
}
/* Le menu principal ne montre qu'une categorie a la fois : celle du rail. */
.nav-panel[data-panel="root"] .nav-category { display: none; }
.nav-panel[data-panel="root"] .nav-category.is-shown,
.nav-panel[data-panel="root"].show-all .nav-category { display: block; }
.nav-panel[data-panel="root"]:not(.show-all) .nav-category.is-shown + .nav-category { border-top: 0; }
.rail-all { margin-bottom: 4px; }

/* Bas du rail : bascule de theme + badge utilisateur (menu deplace ici). */
.rail-foot {
    margin-top: auto;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.rail-foot .rail-theme,
.rail-foot .rail-search-btn { color: #94a3b8; border-color: transparent; }
.rail-foot .rail-theme:hover,
.rail-foot .rail-search-btn:hover { color: #fff; background: var(--bg-sidebar-hover); border-color: transparent; }
.rail-foot .rail-theme .icon,
.rail-foot .rail-search-btn .icon { width: 20px; height: 20px; }
.rail-search { position: static; }
.rail-search-pop {
    position: fixed;
    z-index: 60;
    width: min(420px, calc(100vw - 24px));
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px;
}
.rail-search-pop input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.rail-search-pop input:focus { outline: none; border-color: var(--primary); }
.rail-foot .user-menu { position: static; }
.rail-foot .user-trigger { padding: 0; border: 0; border-radius: 50%; background: transparent; }
.rail-foot .user-trigger:hover { background: transparent; }
.rail-foot .user-trigger .avatar { width: 34px; height: 34px; font-size: 13px; }
/* Le menu utilisateur s'ouvre a droite du rail (evite le rognage du overflow). */
.sidebar-rail .user-dropdown {
    position: fixed; right: auto; top: auto;
    left: calc(var(--rail-w) + 8px); bottom: 12px;
    z-index: 60;
}

.sidebar-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    flex: 0 0 auto;
    min-height: 77px;
}
.brand-logo {
    width: 40px; height: 40px; border-radius: 6px;
    display: block; object-fit: cover; background: #0a0a0a;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; color: #94a3b8; }

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0;
    overflow: hidden;
}

/* Barre laterale a trois niveaux : menu principal, menu du module, arborescence.
   La piste fait 300 % ; chaque panneau un tiers. Ne pas la laisser retrecir
   dans la largeur du menu, sinon les panneaux se retrouvent au tiers. */
html.has-files-explorer { --panel-w: 290px; }

.nav-track {
    display: flex;
    width: 300%;
    flex: 1 1 auto;
    min-height: 0;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.nav-panel {
    width: 33.3333%;
    flex: 0 0 33.3333%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(30px, env(safe-area-inset-bottom, 0px));
    visibility: hidden;
    transition: visibility 0s .3s;
    scrollbar-width: none;
}
.nav-panel::-webkit-scrollbar { width: 0; height: 0; }
.sidebar-nav[data-level="1"] .nav-panel[data-panel="root"],
.sidebar-nav[data-level="2"] .nav-panel[data-panel="module"],
.sidebar-nav[data-level="3"] .nav-panel[data-panel="tree"] {
    visibility: visible;
    transition-delay: 0s;
}
.sidebar-nav[data-level="2"] .nav-track { transform: translateX(-33.3333%); }
.sidebar-nav[data-level="3"] .nav-track { transform: translateX(-66.6666%); }

.nav-back {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--radius-sm);
    color: #94a3b8; font-size: 13px; font-weight: 600;
    background: none; border: 0; width: 100%; cursor: pointer;
    text-align: left;
}
.nav-back:hover { background: var(--bg-sidebar-hover); color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .nav-track { transition: none; }
}

.nav-section { margin-bottom: 6px; padding-bottom: 10px; }
.nav-section + .nav-section {
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, .18);
}
.nav-section-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
    color: #64748b; padding: 8px 10px 4px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border-radius: var(--radius-sm);
    color: #cbd5e1; font-size: 14px; margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-sidebar-hover); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-item.disabled { color: #64748b; cursor: default; }
.nav-item .nav-item-more { margin-left: auto; opacity: .55; display: grid; place-items: center; }
.nav-item .nav-item-more .icon { width: 16px; height: 16px; }
.nav-item:hover .nav-item-more { opacity: 1; }
.nav-item.disabled:hover { background: transparent; color: #64748b; }
/* Projets recents dans le menu du module : numero en gras, nom tronque. */
.nav-recent-item { padding-top: 6px; padding-bottom: 6px; font-size: 13px; }
.nav-recent-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-recent-item strong { font-weight: 600; color: #e2e8f0; margin-right: 4px; }
.nav-recent-item .icon { width: 16px; height: 16px; opacity: .7; }
.badge-soon {
    margin-left: auto; font-size: 10px; text-transform: uppercase;
    background: rgba(148, 163, 184, .18); color: #94a3b8;
    padding: 2px 6px; border-radius: 20px; letter-spacing: .5px;
}

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

.topbar {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    padding: 12px 22px;
    position: sticky; top: 0; z-index: 20;
}
.page-title { font-size: 18px; margin: 0; font-weight: 600; flex: 0 1 auto; white-space: nowrap; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.topbar-search {
    flex: 1 1 220px;
    max-width: 480px;
    position: relative;
    min-width: 0;
}
.topbar-search .icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.topbar-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.topbar-search input:focus {
    outline: none;
    border-color: var(--primary);
}

.icon-btn {
    background: transparent; border: 1px solid transparent; color: var(--text);
    width: 38px; height: 38px; border-radius: var(--radius-sm);
    display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: var(--bg); border-color: var(--border); }

#sidebarToggle { display: none; }

/* Theme toggle : montre l'icone opposee au theme actif */
[data-theme="light"] .theme-dark { display: none; }
[data-theme="dark"] .theme-light { display: none; }

/* ---------- User menu ---------- */
.user-menu { position: relative; }
.user-trigger {
    display: flex; align-items: center; gap: 9px;
    background: transparent; border: 1px solid var(--border);
    border-radius: 30px; padding: 5px 12px 5px 5px; cursor: pointer; color: var(--text);
}
.user-trigger:hover { background: var(--bg); }
.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.user-name { font-size: 14px; font-weight: 500; }
.user-trigger.is-impersonating { border-color: var(--warning); }
.user-trigger.is-impersonating .avatar { background: var(--warning); }

.impersonate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 22px;
    background: var(--warning-soft);
    color: var(--text);
    border-bottom: 1px solid var(--warning);
    font-size: 14px;
}
.impersonate-bar form { margin: 0; }

/* Bandeau du projet courant : « Tous » + projets ouverts, en onglets.
   Le projet allume filtre tickets, bons de commande et demandes de prix. */
.project-bar {
    display: flex; align-items: flex-end; gap: 2px;
    padding: 6px 22px 0;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
    flex: 0 0 auto;
}
.project-bar::-webkit-scrollbar { display: none; }
.project-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px 8px; margin-bottom: -1px;
    border: 1px solid transparent; border-bottom: 0;
    border-radius: 8px 8px 0 0;
    color: var(--text-muted); text-decoration: none;
    font-size: 13px; line-height: 1.2; white-space: nowrap;
    flex: 0 0 auto;
}
.project-tab .icon { width: 15px; height: 15px; }
.project-tab strong { font-weight: 600; color: var(--text); }
.project-tab:hover { color: var(--text); background: var(--bg); }
.project-tab.is-current {
    color: var(--text); background: var(--bg);
    border-color: var(--border);
    box-shadow: inset 0 2px 0 var(--primary);
}
@media (max-width: 900px) {
    .project-bar { padding-left: 56px; }
    .project-tab span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
}
@media print { .project-bar { display: none; } }
.client-preview-bar { position: sticky; top: 0; z-index: 50; font-size: 14px; }
.user-dropdown {
    position: absolute; right: 0; top: calc(100% + 8px);
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    min-width: 220px; padding: 8px; display: none; z-index: 40;
}
.user-dropdown.open { display: block; }
.user-dropdown-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; display: flex; flex-direction: column; gap: 6px; }
.dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border-radius: var(--radius-sm);
    background: transparent; border: 0; color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
}
.dropdown-item:hover { background: var(--bg); text-decoration: none; }
.dropdown-form { margin: 0; }

/* ---------- Content ---------- */
.content { padding: 24px; max-width: 1200px; width: 100%; }
.content:has([data-explorer]) { max-width: 1800px; }
.content:has([data-invoice-sheet]) { max-width: none; }
/* Demande de prix : autant de colonnes que de fournisseurs. La page prend
   juste la largeur qu'il faut a la grille (au moins la largeur normale),
   jamais plus que l'ecran ; au-dela, la grille defile. */
.content:has([data-ddp-sheet]) { max-width: 100%; width: fit-content; min-width: min(100%, 1200px); }
.layout:has(.planner-shell),
.layout:has(.sb-board) { height: 100vh; overflow: hidden; }
.layout:has(.planner-shell) .main,
.layout:has(.sb-board) .main { min-height: 0; overflow: hidden; }
.layout:has(.planner-shell) .page-title,
.layout:has(.sb-board) .page-title { display: none; }
.content:has(.planner-shell),
.content:has(.sb-board) {
    max-width: none;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-header h2 { margin: 0 0 2px; font-size: 22px; }

/* ---------- Cards ---------- */
.card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px; margin-bottom: 20px;
}
.card-head { margin-bottom: 14px; }
.card-head h3 { margin: 0; font-size: 16px; }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.card-header h3 { margin: 0; font-size: 16px; }
.card-body { margin-top: 4px; }
.form-card { max-width: 860px; }

.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-header-lead {
    display: flex; align-items: center; gap: 10px; min-width: 0;
}
.page-header-lead h2 { margin: 0; }
.page-back {
    display: grid; place-items: center; flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    color: var(--text); text-decoration: none;
}
.page-back:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.page-back .icon { width: 22px; height: 22px; }

/* ---------- Fiche detaillee (paires libelle / valeur) ---------- */
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px 22px; margin: 0;
}
.detail-item dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted); margin-bottom: 3px;
}
.detail-item dd { margin: 0; font-size: 14px; }
.detail-notes { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.detail-notes dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted); margin-bottom: 6px;
}
.detail-notes p { margin: 0; font-size: 14px; }

.task-note { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.table tr.is-done td { opacity: .7; }
.table tr.is-done td strong { text-decoration: line-through; }

/* ---------- Menu contextuel ---------- */
.context-menu {
    position: fixed; z-index: 1200; min-width: 210px; max-width: 320px;
    padding: 6px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev); box-shadow: var(--shadow-lg);
}
.context-menu-head {
    padding: 7px 10px 9px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
    overflow: hidden;
}
.context-menu-kind {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-muted); margin-bottom: 2px;
}
.context-menu-head strong {
    display: block; font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.context-menu-item {
    display: block; width: 100%; padding: 8px 10px; border: 0;
    border-radius: var(--radius-sm); background: none; color: var(--text);
    font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.context-menu-item-label {
    display: block; font-size: 11px; text-transform: uppercase;
    letter-spacing: .5px; color: var(--text-muted); margin-bottom: 1px;
}
.context-menu-item-num { display: block; }
.context-menu-item:hover, .context-menu-item:focus {
    background: var(--primary-soft); color: var(--primary); outline: none;
}
.context-menu-item.is-primary {
    background: var(--primary-soft); color: var(--primary);
}
.context-menu-item.is-primary .context-menu-item-label { color: var(--primary); }
.context-menu-item.is-primary:hover, .context-menu-item.is-primary:focus {
    background: var(--primary); color: #fff;
}
.context-menu-item.is-primary:hover .context-menu-item-label,
.context-menu-item.is-primary:focus .context-menu-item-label { color: #fff; }
.context-menu-item.danger { color: var(--danger); }
.context-menu-item.danger:hover, .context-menu-item.danger:focus {
    background: var(--danger-soft); color: var(--danger);
}
/* Raccourci a droite, entree grisee (rien a coller...). */
.context-menu-item.has-hint {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.context-menu-hint {
    flex: none; font-size: 11px; color: var(--text-muted); white-space: nowrap;
}
.context-menu-item:hover .context-menu-hint, .context-menu-item:focus .context-menu-hint { color: inherit; opacity: .75; }
.context-menu-item:disabled { color: var(--text-muted); cursor: default; opacity: .6; }
.context-menu-item:disabled:hover { background: none; color: var(--text-muted); }
.context-menu-sep { height: 1px; margin: 5px 4px; background: var(--border); }
/* Menu long (tableur) : il defile plutot que de sortir de l'ecran. */
.context-menu { max-height: calc(100vh - 16px); overflow-y: auto; }

.btn-menu { padding: 6px 7px; color: var(--text-muted); }
.btn-menu .icon { width: 16px; height: 16px; }
.btn-menu:hover { color: var(--text); }

/* Action reservee au menu contextuel : elle existe dans la page pour que le
   menu la recopie, mais n'encombre pas la colonne d'actions. */
.menu-only { display: none; }

/* ---------- Module de toast (messages + upload/download) ---------- */
html.has-chat-bubble #toast-stack { bottom: 88px; }
html.has-chat-dock #toast-stack { right: 436px; }
html.has-scan-dock #toast-stack { right: 316px; }
html.has-scan-dock.has-chat-dock #toast-stack { right: 436px; }

#toast-stack {
    position: fixed; z-index: 1300; right: 16px; bottom: 16px;
    width: min(360px, calc(100vw - 32px));
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none;
}
#toast-stack > * { pointer-events: auto; }
.toast-card {
    padding: 11px 14px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-size: 14px;
}
.toast-card-body { overflow: hidden; text-overflow: ellipsis; }
.toast-card.is-link .toast-card-body,
.toast-card.is-action .toast-card-body { white-space: normal; overflow: visible; }
.toast-card.is-link a { color: inherit; text-decoration: underline; cursor: pointer; }
.toast-card.is-action .toast-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.toast-card-action {
    flex: 0 0 auto;
    background: var(--primary);
    color: #fff;
    border: 0;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.toast-card-action:disabled { opacity: .6; cursor: wait; }
.toast-card.is-action:not(.is-hold) .upload-progress { display: none; }
.toast-card .upload-progress { margin-top: 8px; }
.toast-card.is-success { border-left: 3px solid var(--success); }
.toast-card.is-error { border-left: 3px solid var(--danger); }
.toast-card.is-success .upload-progress-fill { background: var(--success); }
.toast-card.is-error .upload-progress-fill { background: var(--danger); }
.upload-item.toast-card { padding: 10px 12px; border-left: 3px solid var(--primary); }
#toast-stack .is-hold .upload-progress-fill {
    transition: width 3s linear;
}
@media (prefers-reduced-motion: reduce) {
    #toast-stack .upload-progress-fill { transition: none; }
}

/* ---------- Explorateur de fichiers ---------- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.crumbs a, .crumbs span.here {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px; border-radius: 20px; font-size: 13px;
    background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-muted);
}
.crumbs a:hover { color: var(--primary); border-color: var(--primary); text-decoration: none; }
.crumbs span.here { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.crumbs .sep { color: var(--text-muted); opacity: .45; }

.nav-tree-scroll { min-width: 0; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul {
    margin-left: 12px; padding-left: 7px; display: none;
    border-left: 1px solid rgba(255, 255, 255, .09);
}
.tree [data-tree-branch].is-open > ul { display: block; }
.tree-row {
    display: flex; align-items: center; gap: 2px;
    border-radius: var(--radius-sm); padding-right: 6px;
}
.tree-row:hover { background: var(--bg-sidebar-hover); }
.tree-row.is-current { background: var(--primary); }
.tree-row.is-current .tree-link { color: #fff; font-weight: 600; }
.tree-row.is-current .tree-link .icon { color: #fff; }
.tree-twisty {
    width: 20px; height: 26px; flex: none; display: grid; place-items: center;
    background: none; border: 0; cursor: pointer; color: #64748b; padding: 0;
}
.tree-twisty:hover { color: #cbd5e1; }
.tree-twisty .icon { width: 14px; height: 14px; transition: transform .15s; }
[data-tree-branch].is-open > .tree-row .tree-twisty .icon { transform: rotate(90deg); }
.tree-twisty.is-leaf { visibility: hidden; }
.tree-link {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 4px; font-size: 13.5px; color: #cbd5e1;
    min-width: 0; flex: 1 1 auto;
}
.tree-link:hover { text-decoration: none; color: #fff; }
.tree-link .icon { color: #64748b; width: 16px; height: 16px; }
.tree-link:hover .icon { color: #94a3b8; }
.tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-left: auto; }
.tree-dot-public { background: var(--success); }
.tree-dot-private { background: #64748b; }
.tree-row.is-current .tree-dot-private { background: rgba(255, 255, 255, .6); }
.tree-legend {
    display: flex; gap: 12px; flex-wrap: wrap; flex: none;
    margin: 0; padding: 10px 11px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: 11px; color: #64748b;
}
.tree-legend span { display: inline-flex; align-items: center; gap: 6px; }

.pane {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px;
}
.pane-head {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 16px 18px; border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--primary);
}
.pane-head-icon {
    width: 46px; height: 46px; border-radius: 12px; flex: none;
    background: var(--primary-soft); color: var(--primary);
    display: grid; place-items: center;
}
.pane-head-main { min-width: 0; flex: 1 1 200px; }
.pane-head-main h2 { margin: 0; font-size: 20px; }
.pane-head-path { font-size: 13px; color: var(--text-muted); margin: 2px 0 0; }
.pane-head-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.hero-stat-value { font-size: 18px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hero-stat-label {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted);
}
.pane-head-actions {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-left: auto;
}
.pane-head-actions > .btn,
.pane-head-actions > label.btn,
.pane-head-actions .menu-wrap > .btn {
    min-height: 42px; height: 42px; padding: 0 16px;
    font-size: 14px; font-weight: 600; gap: 8px;
}
.pane-head-actions .btn-menu { width: 42px; padding: 0; }
.pane-head-actions .btn-menu .icon { width: 18px; height: 18px; }

.pane .table { table-layout: fixed; width: 100%; }
.pane .table .c-name { width: auto; }
.pane .table .c-check { width: 42px; }
.pane .table .c-tier { width: 130px; }
.pane .table .c-size { width: 190px; }
.pane .table .c-by { width: 160px; }
.pane .table .c-date { width: 170px; }
.pane .table .c-actions { width: 150px; }
.pane .table td .explorer-entry { max-width: 100%; }
.pane .table td .explorer-entry > span { overflow-wrap: anywhere; }
.pane .table thead th { background: var(--bg); }
.pane .table th:first-child, .pane .table td:first-child { padding-left: 18px; }
.pane .table th:last-child, .pane .table td:last-child { padding-right: 18px; }
.pane .table tbody tr:last-child td { border-bottom: 0; }

[data-explorer] { container-type: inline-size; }

.explorer-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 0; padding: 10px 18px;
    border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
    background: var(--primary-soft);
}
.explorer-toolbar[hidden] { display: none !important; }
.explorer-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.explorer-toolbar.is-busy .explorer-toolbar-actions { display: none; }
.explorer-job {
    display: flex; align-items: center; gap: 12px;
    flex: 1; min-width: 200px; width: 100%;
}
.explorer-job[hidden] { display: none !important; }
.explorer-job .upload-progress {
    flex: 0 0 38%; max-width: 260px; min-width: 80px;
    margin: 0; height: 8px;
}
.explorer-job-status {
    flex: 1 1 0; min-width: 0;
    font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.btn-icon {
    width: 32px; height: 32px; padding: 0;
    display: inline-grid; place-items: center;
}
.btn-icon .icon { width: 16px; height: 16px; }
.btn-icon.btn-share {
    color: var(--primary); border-color: var(--primary-soft);
    background: var(--primary-soft);
}
.btn-icon.btn-share:hover {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.pane td.col-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.is-drop-target { outline: 2px solid var(--primary); outline-offset: -2px; background: var(--primary-soft); }
.pane.is-drop-active, .pane-head.is-drop-active {
    outline: 2px dashed var(--primary); outline-offset: -4px;
}

.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    margin-bottom: 16px; font-size: 14px;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb-sep { color: var(--text-muted); opacity: .5; }
.breadcrumb-current { font-weight: 600; }

.card-header-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.explorer-entry { display: inline-flex; align-items: center; gap: 9px; color: inherit; }
.explorer-entry .icon { color: var(--text-muted); flex: none; }
a.explorer-entry:hover { color: var(--primary); text-decoration: none; }
a.explorer-entry:hover .icon { color: var(--primary); }

.badge-inherit { font-weight: 400; opacity: .7; }
.form-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.form-inline .form-group { margin-bottom: 0; min-width: 260px; }

.modal-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: grid; place-items: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
}
.modal-overlay[hidden] { display: none; }
.modal {
    width: min(600px, calc(100vw - 40px));
    max-height: calc(100vh - 40px); overflow-y: auto;
    padding: 0; border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev); color: var(--text);
    box-shadow: var(--shadow-lg);
}
.modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-head .icon-btn { margin-left: auto; }
.modal-body { padding: 18px; }
.modal-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 13px 18px; border-top: 1px solid var(--border); background: var(--bg);
    border-radius: 0 0 var(--radius) var(--radius);
}
.modal-foot .spacer { flex: 1 1 auto; }

#modal-share .modal { width: min(560px, calc(100vw - 40px)); }

/* Modale d'emission en trois etapes : plus large pour le cadre du portail. */
.invoice-issue-modal { width: min(1080px, calc(100vw - 40px)); display: flex; flex-direction: column; max-height: calc(100vh - 40px); }
.invoice-issue-modal form { display: flex; flex-direction: column; min-height: 0; }
.invoice-issue-modal .modal-body { overflow: auto; min-height: 0; }
.invoice-issue-modal .modal-head { gap: 14px; }
.issue-steps {
    display: flex; gap: 4px; margin: 0 0 0 12px; padding: 0; list-style: none; counter-reset: step;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.issue-steps li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--bg); }
.issue-steps li::before { counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; background: var(--border); color: var(--text); font-size: 11px; }
.issue-steps li.is-active { color: var(--text); background: var(--primary-soft); }
.issue-steps li.is-active::before { background: var(--primary); color: #fff; }
.issue-steps li.is-done::before { content: "\2713"; background: var(--success); color: #fff; }
.issue-step-client { padding: 10px 18px 18px; }
.issue-client-note { margin: 0 0 8px; font-size: 13px; }
.issue-client-frame { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #fff; }
.issue-client-frame iframe { display: block; width: 100%; height: min(70vh, 760px); border: 0; }
.issue-mail-meta { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.issue-mail-body {
    min-height: 160px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elev); color: var(--text); line-height: 1.5; font-size: 14px;
}
.issue-mail-body:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.issue-mail-body p { margin: 0 0 10px; }
.issue-mail-body a { color: var(--primary); }
@media (max-width: 720px) {
    .issue-steps { display: none; }
    .issue-client-frame iframe { height: 60vh; }
}
.invoice-issue-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.invoice-issue-row { align-items: flex-start; }
.invoice-issue-row span { display: flex; flex-direction: column; gap: 2px; }
.invoice-issue-row small { color: var(--muted); font-weight: 400; }
.invoice-issue-new { margin-top: 8px; }
.invoice-issue-new summary { cursor: pointer; font-weight: 600; margin-bottom: 10px; }

.file-viewer { z-index: 1200; padding: 12px; }
.file-viewer-dialog {
    width: min(1280px, calc(100vw - 24px));
    height: calc(100vh - 24px);
    max-height: none;
    display: flex; flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev); color: var(--text);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.file-viewer-dialog .modal-head { flex: 0 0 auto; }
.file-viewer-dialog .modal-head h3 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.file-viewer-stage {
    flex: 1 1 auto; min-height: 0;
    background: #0b1220;
    display: flex; align-items: center; justify-content: center;
    overflow: auto;
}
.file-viewer-stage.is-pdf {
    align-items: stretch; justify-content: flex-start;
    background: #d8d8d8;
}
.file-viewer-stage.is-mail {
    align-items: stretch; justify-content: flex-start;
    background: #e8e8e8;
}
.file-viewer-mail {
    margin: 0;
    padding: 24px 16px 40px;
    background: #e8e8e8;
    color: #1a1a1a;
    font: 15px/1.5 var(--font);
}
.file-viewer-mail-sheet {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 32px 36px;
    background: #fff;
    border: 1px solid #d4d4d4;
    box-shadow: 0 8px 24px rgba(10, 10, 10, .08);
}
.file-viewer-mail-meta { margin: 0 0 20px; }
.file-viewer-mail-row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px 12px;
    margin: 0 0 6px;
}
.file-viewer-mail-row dt { margin: 0; color: var(--text-muted); font-weight: 600; }
.file-viewer-mail-row dd { margin: 0; word-break: break-word; }
.file-viewer-mail-body { border-top: 1px solid var(--border); padding-top: 18px; overflow-wrap: anywhere; }
.file-viewer-mail-body img { max-width: 100%; height: auto; }
.file-viewer-mail-files { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.file-viewer-mail-files h2 { margin: 0 0 8px; font-size: 14px; }
.file-viewer-mail-files ul { margin: 0; padding-left: 18px; }
.file-viewer-mail-files span { color: var(--text-muted); font-size: 13px; }
.file-viewer-mail-error { margin: 0 0 16px; color: var(--danger); }
.file-viewer-stage iframe.file-viewer-mail { padding: 0; }
.file-viewer-pdf {
    align-self: stretch; width: 100%; min-height: 100%;
    overflow: auto; padding: 16px 12px 24px; box-sizing: border-box;
}
.file-viewer-pdf .portal-pdf-pages { width: 100%; max-width: 960px; margin: 0 auto; }
.file-viewer-pdf .portal-pdf-page { width: 100%; }
.file-viewer-stage img {
    max-width: 100%; max-height: 100%; object-fit: contain;
}
.file-viewer-stage iframe,
.file-viewer-stage pre {
    flex: 1 1 auto; align-self: stretch;
    width: 100%; height: 100%; min-height: 0; border: 0;
}
.file-viewer-stage iframe { background: #fff; }
.file-viewer-stage video {
    flex: 0 1 auto; align-self: center;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    min-height: 0; border: 0;
    background: #000; object-fit: contain;
}
.file-viewer-stage audio {
    flex: 0 0 auto; align-self: center;
    width: 100%; max-width: 480px; height: auto;
    background: #000;
}
.file-viewer-stage pre {
    margin: 0; padding: 18px 22px;
    overflow: auto; color: #e2e8f0; font-size: 13px;
    white-space: pre-wrap; word-break: break-word;
}
.file-viewer-empty {
    text-align: center; color: #cbd5e1; padding: 24px;
    max-width: 420px;
}
.file-viewer-empty p { margin: 8px 0 16px; }
.file-viewer-busy { color: #94a3b8; font-size: 14px; }
.share-lead {
    margin: 0 0 16px; padding: 12px 14px;
    background: var(--info-soft); border: 1px solid var(--info);
    border-radius: var(--radius-sm); font-size: 13px; color: var(--text);
}
.share-lead strong { font-weight: 700; }
.share-target {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg);
}
.share-target .avatar { width: 34px; height: 34px; font-size: 12px; }
.share-target-main { min-width: 0; flex: 1 1 auto; }
.share-target-main strong { display: block; font-size: 14px; }
.share-target-main span { font-size: 12px; color: var(--text-muted); }
.share-section { margin-top: 18px; }
.share-section h4 {
    margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-muted);
}
.share-link-row { display: flex; gap: 8px; align-items: stretch; }
.share-link-row input {
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px;
}
.share-soon {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px; border: 1px dashed var(--border);
    border-radius: var(--radius-sm); background: var(--bg);
    opacity: .85;
}
.share-soon .badge { flex: none; margin-top: 2px; }
.share-soon p { margin: 0; font-size: 13px; color: var(--text-muted); }
.share-soon strong { color: var(--text); }

@container (min-width: 861px) and (max-width: 1150px) {
    .pane .table { table-layout: auto; }
    .pane .table .c-tier, .pane .table .c-size, .pane .table .c-by,
    .pane .table .c-date, .pane .table .c-actions { width: auto; }
    .pane .table .c-name { width: 42%; }
    .pane .table td .explorer-entry > span { overflow-wrap: break-word; }
    .pane .table th:nth-child(6), .pane .table td:nth-child(6) { white-space: nowrap; }
    .pane .table th, .pane .table td { padding-left: 10px; padding-right: 10px; }
}

@container (max-width: 860px) {
    .pane-head { padding: 14px; gap: 10px; border-left-width: 3px; }
    .pane-head-icon { width: 38px; height: 38px; border-radius: 10px; }
    .pane-head-icon .icon { width: 20px; height: 20px; }
    .pane-head-main { flex: 1 1 auto; }
    .pane-head-main h2 { font-size: 17px; }
    .pane-head-stats { order: 3; flex: 1 1 100%; gap: 16px; }
    .hero-stat-value { font-size: 15px; }
    .hero-stat-label { font-size: 10px; }
    .pane-head-actions { order: 4; flex: 1 1 100%; margin-left: 0; gap: 6px; }
    .pane-head-actions > .btn,
    .pane-head-actions > label.btn,
    .pane-head-actions .menu-wrap > .btn { min-height: 44px; height: 44px; }
    .pane-head-actions .btn-folder { width: 44px; padding: 0; }
    .pane-head-actions .btn-folder-label { display: none; }
    .pane-head-actions .btn-menu { width: 44px; }
    .explorer-toolbar { padding: 10px 14px; gap: 8px; }
    .explorer-toolbar-actions {
        flex-wrap: nowrap; width: 100%; overflow-x: auto;
        padding-bottom: 2px; scrollbar-width: none;
    }
    .explorer-toolbar-actions::-webkit-scrollbar { display: none; }
    .explorer-toolbar-actions .btn { white-space: nowrap; }
    .table-wrap { overflow-x: visible; }
    .pane .table { table-layout: auto; display: block; }
    .pane .table colgroup, .pane .table thead { display: none; }
    .pane .table tbody { display: block; }
    .pane .table tbody tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: 4px 10px; padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }
    .pane .table tbody tr::after {
        content: ""; order: 4; flex: 1 0 100%; height: 0;
    }
    .pane .table tbody tr:last-child { border-bottom: 0; }
    .pane .table tbody td { display: block; border: 0; padding: 0; }
    .pane .table tbody td.col-check { order: 1; flex: none; width: auto; }
    .pane .table tbody td.col-check:empty { display: none; }
    .pane .table tbody td:nth-child(2) {
        order: 2; flex: 1 1 0%; min-width: 0; font-weight: 600;
    }
    .pane .table tbody td.col-actions {
        order: 3; flex: none; display: flex; gap: 6px; margin-left: auto;
    }
    .pane .table tbody td:nth-child(3),
    .pane .table tbody td:nth-child(4),
    .pane .table tbody td:nth-child(5),
    .pane .table tbody td:nth-child(6) {
        order: 5; flex: none; font-size: 12px; color: var(--text-muted);
    }
    .pane .table tbody td:nth-child(3)::after,
    .pane .table tbody td:nth-child(4)::after,
    .pane .table tbody td:nth-child(5)::after {
        content: "\00b7"; margin-left: 9px; opacity: .55;
    }
    .mobile-hide { display: none !important; }
}

@media (max-width: 760px) {
    .crumbs {
        flex-wrap: nowrap; overflow-x: auto; margin-bottom: 12px;
        padding-bottom: 2px; scrollbar-width: none;
    }
    .crumbs::-webkit-scrollbar { display: none; }
    .crumbs a, .crumbs span.here { white-space: nowrap; font-size: 12px; padding: 5px 10px; }
    .tree-link { padding: 8px 4px; }
    .btn-icon { width: 36px; height: 36px; }
    .btn-icon .icon { width: 17px; height: 17px; }
    .btn-sm.btn-menu { width: 36px; height: 36px; padding: 0; }
    .modal-overlay { padding: 0; place-items: end stretch; }
    .modal,
    #modal-share .modal,
    #modal-folder .modal {
        width: 100%; max-height: 92vh;
        border-radius: 14px 14px 0 0; border-width: 1px 0 0;
    }
    .modal-head, .modal-body, .modal-foot { padding-left: 14px; padding-right: 14px; }
    .modal-foot { position: sticky; bottom: 0; }
    .modal-foot .muted { flex: 1 1 100%; }
    .modal-foot .spacer { display: none; }
    .modal-foot .btn { flex: 1 1 0; min-height: 44px; }
    .file-viewer { padding: 0; place-items: stretch; }
    .file-viewer-dialog {
        width: 100%; height: 100%; max-height: none;
        border-radius: 0; border: 0;
    }
}

/* ---------- Contacts / equipe ---------- */
.people-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}
.people-group { margin-bottom: 18px; }
.people-group:last-child { margin-bottom: 0; }
.people-group h4 {
    margin: 0 0 10px; font-size: 12px; text-transform: uppercase;
    letter-spacing: .6px; color: var(--text-muted);
}
.people-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 14px; background: var(--bg);
    display: flex; flex-direction: column; gap: 10px;
}
.people-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.people-card-head strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.member-role { margin: 2px 0 0; }
.member-role select {
    font-size: 13px; color: var(--text-muted); background: transparent;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    padding: 0 4px 0 0; margin: 0; max-width: 100%; cursor: pointer;
}
.member-role select:hover, .member-role select:focus { border-color: var(--border); }
.people-avatar {
    width: 36px; height: 36px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-size: 12px; font-weight: 700;
}
.people-meta { font-size: 13px; color: var(--text-muted); }
.people-meta div { overflow: hidden; text-overflow: ellipsis; }
.people-meta a { color: inherit; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.people-card-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.team-assign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.team-assign select { max-width: 220px; }
.team-assign .picker { margin: 0; min-width: 220px; flex: 1 1 220px; }
.search-filters .picker { margin: 0; }
.req-list { display: flex; flex-direction: column; gap: 10px; }
.req-item {
    display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
}
.req-item strong { display: block; }
.req-item .muted { font-size: 13px; }
.req-item .req-actions { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 720px) {
    .req-item .req-actions { margin-left: 0; width: 100%; }
    .req-item .req-actions .btn { flex: 1; }
}
.people-card-add {
    width: 100%; min-height: 132px;
    align-items: center; justify-content: center; gap: 8px;
    border-style: dashed; cursor: pointer;
    font: inherit; color: var(--text-muted);
}
.people-card-add:hover,
.people-add-wrap.is-open .people-card-add {
    border-color: var(--primary); color: var(--primary); text-decoration: none;
}
.people-avatar.is-add {
    background: transparent; border: 1px dashed currentColor; color: inherit;
}
.people-avatar.is-add .icon { width: 18px; height: 18px; }
.people-add-panel {
    margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--border);
}
.people-add-panel .muted { margin: 0 0 12px; }
.people-add {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
}
.people-add h4 { margin: 0 0 12px; font-size: 14px; }
.people-edit { font-size: 13px; }
.people-edit summary { cursor: pointer; color: var(--primary); font-weight: 500; }
.people-edit form { margin-top: 10px; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 12px; }
.check { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
input[type="checkbox"],
input[type="radio"] { width: auto; accent-color: var(--primary); }

.page-tabs { display: flex; gap: 8px; margin: -8px 0 18px; flex-wrap: wrap; }

/* ---------- Carnet (personnes / entreprises) ---------- */
.carnet-tabs {
    display: inline-flex; padding: 4px; margin: -4px 0 18px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
    gap: 2px;
}
.carnet-tabs a {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    color: var(--text-muted); font-weight: 600; font-size: 13px;
}
.carnet-tabs a:hover { text-decoration: none; color: var(--text); }
.carnet-tabs a.is-active {
    background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow);
}
.carnet-tabs .icon { width: 16px; height: 16px; }
.carnet-toolbar {
    display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap;
}
.carnet-toolbar input[type="search"] { flex: 1; min-width: 200px; max-width: none; }
.carnet-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.carnet-more { text-align: center; padding: 18px 8px 8px; min-height: 1.5em; }

/* Accueil du carnet : favoris, derniers contactes, listes. */
.carnet-home { display: flex; flex-direction: column; gap: 16px; }
.carnet-home-section > .carnet-home-head {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.carnet-home-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.carnet-home-head h3 .icon { width: 18px; height: 18px; color: var(--text-muted); }
.carnet-grid-compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.seg { display: inline-flex; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; gap: 2px; }
.seg a { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
.seg a:hover { text-decoration: none; color: var(--text); }
.seg a.is-active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow); }
.carnet-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.carnet-recent-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
    padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.carnet-recent-row:last-child { border-bottom: 0; }
.carnet-recent-main { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; }
.carnet-recent-main:hover { text-decoration: none; }
.carnet-recent-main:hover strong { text-decoration: underline; }
.carnet-recent-body { display: flex; flex-direction: column; min-width: 0; }
.carnet-recent-body span, .carnet-recent-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet-recent-when { font-size: 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.carnet-recent-when .icon { width: 14px; height: 14px; }
.carnet-recent-actions { display: flex; gap: 4px; }
.carnet-lists { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.carnet-list-link {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: inherit;
}
.carnet-list-link:hover { text-decoration: none; border-color: var(--primary); }
.carnet-list-dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; background: var(--text-muted); flex: 0 0 auto; }
.carnet-list-new { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.carnet-list-new input[type="color"] { width: 44px; height: 36px; padding: 2px; }
.carnet-group-title { margin: 18px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.carnet-list-item { display: flex; flex-direction: column; gap: 6px; }
.carnet-list-item .carnet-card { flex: 1 1 auto; }
.carnet-list-note { margin: 0 4px; font-size: 13px; }
.carnet-list-remove { margin: 0; align-self: flex-end; }
.carnet-list-delete { justify-content: flex-start; border-top: 1px solid var(--border); }
/* Etoile Favori et menu Listes sur une fiche. */
.btn-star .icon { color: var(--text-muted); }
.btn-star.is-on .icon { color: #f59e0b; fill: #f59e0b; }
.carnet-list-menu { position: relative; display: inline-block; }
.carnet-list-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.carnet-list-menu > summary::-webkit-details-marker { display: none; }
.carnet-list-menu .dropdown-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
    min-width: 260px; max-width: 360px; padding: 10px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.carnet-list-menu .plain-list { gap: 2px; margin-bottom: 8px; }
.carnet-list-menu .inline-form { width: 100%; }
.carnet-list-choice {
    display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text);
}
.carnet-list-choice:hover { background: var(--bg); text-decoration: none; }
.carnet-list-choice.is-on { font-weight: 600; }
.carnet-list-quick { display: flex; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.carnet-list-quick input { flex: 1 1 auto; min-width: 0; }
.rows-more { text-align: center; padding: 14px 8px 10px; margin: 0; font-size: 13px; }
.carnet-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
    min-width: 0; transition: border-color .15s, box-shadow .15s;
}
.carnet-card:not(.is-ghost) {
    animation: carnet-in .22s ease;
}
.carnet-card.is-ghost {
    min-height: 92px;
    pointer-events: none;
    border-style: dashed;
    background: linear-gradient(90deg, var(--bg-elev) 0%, var(--bg) 45%, var(--bg-elev) 100%);
    background-size: 200% 100%;
    animation: carnet-ghost 1.1s ease infinite;
}
@keyframes carnet-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes carnet-ghost {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
.carnet-card:hover:not(.is-ghost) {
    border-color: var(--primary); box-shadow: var(--shadow-lg); text-decoration: none;
}
.carnet-card-main {
    display: flex; gap: 12px; align-items: flex-start; min-width: 0; flex: 1;
    color: inherit; text-decoration: none;
}
.carnet-card-main:hover { text-decoration: none; color: inherit; }
.carnet-card-body { min-width: 0; flex: 1; }
.carnet-card-body strong {
    display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carnet-card-body .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px;
    font-size: 12px; color: var(--text-muted);
}
.carnet-card-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.carnet-card-meta .icon { width: 14px; height: 14px; }
.carnet-card-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.carnet-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.carnet-avatar.is-org {
    border-radius: 12px; background: var(--info-soft); color: var(--info);
}
.carnet-avatar.is-lg { width: 64px; height: 64px; font-size: 20px; border-radius: 18px; }
.carnet-avatar.is-lg:not(.is-org) { border-radius: 50%; }
.carnet-empty {
    text-align: center; padding: 48px 20px; color: var(--text-muted);
}
.carnet-empty .carnet-avatar { margin: 0 auto 14px; }
.carnet-empty p { margin: 0 0 16px; }
.carnet-hero {
    display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.carnet-hero-text { flex: 1; min-width: 200px; }
.carnet-hero-text h2 { margin: 0 0 4px; }
.carnet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.carnet-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text); font-size: 13px;
}
.carnet-chip:hover { border-color: var(--primary); text-decoration: none; }
.carnet-chip .icon { width: 15px; height: 15px; color: var(--primary); }
[data-call] { cursor: pointer; }
.carnet-split {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start;
}
.carnet-split > .card { margin-bottom: 0; }
.carnet-split-lead { grid-column: 1 / -1; }
.carnet-project {
    display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 10px 0; border-bottom: 1px solid var(--border); color: inherit;
}
.carnet-project:last-child { border-bottom: 0; padding-bottom: 0; }
.carnet-project:first-child { padding-top: 0; }
.carnet-project:hover { text-decoration: none; }
.carnet-project .carnet-card-main { align-items: center; }
.carnet-project strong { display: block; }
.carnet-project .muted { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carnet-project-body { min-width: 0; flex: 1; }
.carnet-notes dt {
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--text-muted); margin-bottom: 6px;
}
.carnet-pick {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 240px; overflow: auto;
    padding: 10px 12px; margin: 0 0 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg);
}
.carnet-pick .check { font-weight: 500; }
@media (max-width: 860px) {
    .carnet-split { grid-template-columns: 1fr; }
}

/* ---------- Stat grid ---------- */
.stat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 22px;
}
.stat-card {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 18px; display: flex; align-items: center; gap: 14px;
}
.stat-icon {
    width: 46px; height: 46px; border-radius: 11px;
    background: var(--primary-soft); color: var(--primary);
    display: grid; place-items: center;
}
.stat-value { font-size: 26px; font-weight: 700; line-height: 1; }
.stat-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
a.stat-card { text-decoration: none; color: inherit; }
a.stat-card:hover { border-color: var(--primary); text-decoration: none; }
.stat-card.is-alert .stat-icon { background: var(--danger-soft); color: var(--danger); }
.dash-overdue {
    margin-bottom: 20px;
    border-color: var(--danger);
    background: var(--danger-soft);
}
.dash-overdue .card-header h3,
.dash-overdue-lead { color: var(--danger); }
.dash-overdue-lead {
    margin: 0 16px 12px; font-size: 15px; font-weight: 600;
}
[data-theme="dark"] .dash-overdue { border-color: #7f1d1d; }
[data-theme="dark"] .dash-overdue .card-header h3,
[data-theme="dark"] .dash-overdue-lead { color: #fca5a5; }
[data-theme="dark"] .dash-overdue .muted { color: #d4b4b4; }

.dash-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.dash-grid:has(> :only-child) { grid-template-columns: 1fr; }
.dash-list { display: flex; flex-direction: column; }
.dash-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.dash-list .dash-row:first-child { padding-top: 0; }
.dash-list .dash-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-row-main { min-width: 0; }
.dash-row-main strong { display: block; }
.dash-row-main .muted {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.dash-row-link { text-decoration: none; color: inherit; }
a.dash-row-link:hover { text-decoration: none; }
a.dash-row-link:hover strong { color: var(--primary); }
@media (max-width: 860px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.table th { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 600; }
.table tbody tr:hover { background: var(--bg); }
.table tbody tr.is-selected { background: var(--primary-soft); }
.table tbody tr.is-selected:hover { background: var(--primary-soft); }
.address-review-table td { vertical-align: top; }
.address-review-table form { margin: 0; }
.address-review-candidate { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; cursor: pointer; }
.address-review-candidate span { display: grid; gap: 2px; }
.address-review-candidate small { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-success { color: var(--success); }
/* Statistiques du chantier : sous-ligne des tuiles, tableau pose / facture. */
.stat-sub { font-size: 12px; margin-top: 4px; line-height: 1.4; }
.stats-kpis { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stats-kpis .stat-card { align-items: flex-start; }
.stats-kpis .stat-value { font-size: 22px; white-space: nowrap; }
.stats-table th.num, .stats-table td.num { text-align: right; white-space: nowrap; }
.stats-table tr.is-gap td { background: var(--warning-soft); }
.stats-table tr.is-alert td { background: var(--danger-soft); }
.text-warning { color: var(--warning); }
/* Estimation du projet : materiel a mettre sur un ticket. */
.estimate-material th.check, .estimate-material td.check { width: 32px; text-align: center; }
.estimate-material .estimate-qty { width: 90px; text-align: right; }
.estimate-material tr.is-done td { opacity: .6; }
.stats-table tfoot th { border-top: 2px solid var(--border); }
.stats-note { margin: 12px 0 0; font-size: 12px; }
.col-actions { text-align: right; white-space: nowrap; }
.pane td.col-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.col-check {
    width: 1%;
    white-space: nowrap;
    padding-right: 4px;
    vertical-align: middle;
}
.col-check input[type="checkbox"] { margin: 0; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 7px; justify-content: center;
    padding: 9px 15px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-elev); color: var(--text);
    font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
    transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; pointer-events: none; }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(1.08); }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #fff; }
.inline { display: inline; margin: 0; }

/* ---------- Badges / pills ---------- */
.badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-muted { background: var(--border); color: var(--text-muted); }
.role-pill {
    display: inline-block; padding: 3px 10px; border-radius: 20px;
    background: var(--primary-soft); color: var(--primary);
    font-size: 12px; font-weight: 600; font-family: ui-monospace, monospace;
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 15px; display: flex; flex-direction: column; gap: 5px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.phone-fields { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; }
.phone-fields input[name="phone_ext"],
.phone-fields input[name$="[ext]"] { text-align: center; }
.phone-list-row {
    display: grid; grid-template-columns: auto minmax(110px, 170px) minmax(0, 1fr) 36px;
    gap: 8px; align-items: center; margin-bottom: 8px;
}
.phone-list-row .icon-btn { justify-self: end; }
.phone-list-primary { margin: 0; font-size: 12px; white-space: nowrap; }
.phone-list-primary span { font-weight: 500; color: var(--text-muted); }
.phone-list-primary:has(input:checked) span { color: var(--primary); font-weight: 600; }
@media (max-width: 560px) {
    .phone-list-row {
        grid-template-columns: auto minmax(0, 1fr) 36px;
    }
    .phone-list-row > input[name$="[label]"] { grid-column: 1 / -1; }
}
[hidden] { display: none !important; }
label { font-size: 13px; font-weight: 600; color: var(--text); }
input, select, textarea {
    font: inherit; padding: 9px 11px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elev); color: var(--text); width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input[type="hidden"] { display: none !important; }
input[type="color"] {
    width: 2.4rem; height: 2.4rem; padding: 2px; cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
input:disabled { background: var(--bg); color: var(--text-muted); }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }
.invoice-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 38px;
}
.invoice-tax-manual {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 0;
}
.invoice-tax-manual[hidden] { display: none; }

/* Taxes retenues sur la facture : une case par taxe de la province. */
.invoice-tax-parts { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 0; }
.invoice-tax-parts .check { margin: 0; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.filter-bar input[type="search"] { max-width: 320px; }
.filter-bar select { max-width: 200px; }
.filter-bar .check-row { margin: 0; align-items: center; }
.filter-bar .picker { margin: 0; flex: 0 1 240px; min-width: 180px; }
.filter-bar .check,
.carnet-toolbar .check { white-space: nowrap; align-self: center; }
.carnet-toolbar { align-items: center; }
.input-sm { width: 80px; }
.input-grow { flex: 1 1 auto; }
.inline-edit { display: flex; gap: 8px; align-items: center; margin: 0; flex-wrap: wrap; }

/* ---------- Alerts ---------- */
.alert { padding: 12px 15px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: 14px; border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.alert-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

/* ---------- Permissions matrix ---------- */
.perm-role { padding: 0; }
.perm-summary { padding: 16px 18px; cursor: pointer; display: flex; align-items: center; gap: 12px; list-style: none; }
.perm-summary::-webkit-details-marker { display: none; }
.perm-summary::before { content: "\25B8"; color: var(--text-muted); transition: transform .15s; }
details[open] .perm-summary::before { transform: rotate(90deg); }
.perm-form, .perm-note { padding: 0 18px 18px; }
.perm-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.perm-module { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 14px 14px; margin-bottom: 14px; }
.perm-module legend { font-size: 13px; font-weight: 700; text-transform: capitalize; padding: 0 6px; color: var(--primary); }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.perm-check { display: flex; align-items: center; gap: 8px; font-weight: 400; font-size: 14px; padding: 4px; }
.perm-check input { width: auto; }
.perm-check small { color: var(--text-muted); margin-left: auto; }

/* ---------- Auth page ---------- */
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 20px;
    background: #0a0a0a;
    background: radial-gradient(ellipse at 50% -20%, #3a1014 0%, #0a0a0a 58%); }
.auth-card {
    background: var(--bg-elev); color: var(--text);
    width: 100%; max-width: 400px; border-radius: var(--radius);
    border-top: 3px solid var(--brand);
    box-shadow: var(--shadow-lg); padding: 32px 28px;
}
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-logo {
    width: 56px; height: 56px; border-radius: 8px; margin: 0 auto 12px;
    display: block; object-fit: cover; background: #0a0a0a;
}
.auth-brand h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.auth-tagline { color: var(--text-muted); font-size: 13px; margin: 6px 0 0; line-height: 1.4; }
.auth-form { display: flex; flex-direction: column; gap: 6px; }
.auth-form label { margin-top: 8px; }
.auth-form .btn { margin-top: 18px; }
.auth-footer { text-align: center; color: var(--text-muted); font-size: 12px; margin: 18px 0 0; }

/* ---------- Error page ---------- */
.error-page { display: grid; place-items: center; min-height: 100vh; background: var(--bg); }
.error-card { text-align: center; padding: 40px; }
.error-code { font-size: 64px; font-weight: 800; color: var(--primary); line-height: 1; }
.error-card h1 { margin: 8px 0; }

/* ---------- Backdrop (mobile) ---------- */
.sidebar-backdrop {
    display: none; position: fixed; inset: 0;
    background: rgba(15, 23, 42, .5); z-index: 25;
}
.sidebar-backdrop.show { display: block; }

/* ---------- Televersement de documents ---------- */
.uploader { display: block; }

.uploader-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 18px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-elev);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.uploader-drop:hover { border-color: var(--primary); color: var(--text); }
.uploader.dragging .uploader-drop {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text);
}

.uploader-formats { margin: 8px 0 0; font-size: 12px; }

.uploader-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }

.upload-item {
    padding: 10px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
}
.upload-item.done { border-left-color: var(--success); }
.upload-item.error { border-left-color: var(--danger); }

.upload-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
}
.upload-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-item-status { color: var(--text-muted); flex-shrink: 0; }
.upload-item-mode {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}
.upload-item.done .upload-item-mode,
.upload-item.error .upload-item-mode {
    font-weight: 500;
    color: var(--text-muted);
}
.upload-item.error .upload-item-status { color: var(--danger); }
.upload-item.done .upload-item-status { color: var(--success); }

.upload-progress {
    margin-top: 8px;
    height: 5px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.upload-progress-fill {
    height: 100%;
    width: 0;
    background: var(--primary);
    border-radius: 999px;
    transition: width .18s ease;
}
.upload-item.done .upload-progress-fill { background: var(--success); }
.upload-item.error .upload-progress-fill { background: var(--danger); }

.upload-item-stats {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
    /* Chiffres de meme largeur : la ligne ne tremble pas a chaque mesure. */
    font-variant-numeric: tabular-nums;
}
.upload-item-stats:empty { display: none; }

/* ---------- Barre de progression (navigation partielle) ---------- */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--primary);
    box-shadow: 0 0 8px var(--primary);
    z-index: 80;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .2s ease;
}
#nav-progress.active { opacity: 1; }
#nav-progress.done { transition: width .15s ease, opacity .3s ease .1s; }

.content:focus { outline: none; }

/* ---------- Banniere nouvelle version ---------- */
.update-banner {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-left: 4px solid var(--warning);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    animation: update-banner-in .25s ease;
}
.update-banner-text { font-size: 14px; }
.sync-banner { border-left-color: var(--info); }

@keyframes update-banner-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 560px) {
    .update-banner { flex-direction: column; align-items: stretch; text-align: center; }
    .update-banner-actions { justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sidebar {
        position: fixed; left: 0; top: 0; z-index: 30;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .sidebar.open { transform: translateX(0); }
    #sidebarToggle {
        display: grid;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 25;
        background: var(--bg-elev);
        border-color: var(--border);
        box-shadow: var(--shadow);
    }
    .content { padding: 16px; }
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 0 18px 16px;
    align-items: end;
}
.search-filters .form-group {
    margin: 0;
    min-width: 140px;
    flex: 1 1 140px;
}
.search-filters .form-group:first-child {
    flex: 2 1 220px;
}
.search-filters-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: auto;
    flex: 0 0 auto;
}
.search-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    border: 0;
    margin: 12px 0 16px;
    padding: 0;
}
.search-types legend {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0;
}
.search-types label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}
.search-global .form-group { margin-bottom: 12px; }
.search-global .check { margin: 0 0 14px; }
.search-snippet {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0 28px;
    line-height: 1.4;
}
td.search-snippet { margin: 0; font-size: 13px; }
.search-hit-open {
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: var(--primary); cursor: pointer; text-align: left;
}
.search-hit-open:hover { text-decoration: underline; }
.chat-bubble {
    position: fixed; z-index: 1200;
    right: 20px; bottom: 20px;
    width: 56px; height: 56px; padding: 0;
    border: 0; border-radius: 50%;
    background: var(--primary); color: #fff;
    box-shadow: var(--shadow-lg);
    display: grid; place-items: center;
    cursor: pointer;
}
.chat-bubble:hover { background: var(--primary-hover); }
.chat-bubble .icon { width: 24px; height: 24px; }
.chat-bubble-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 10px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}
.chat-bubble-badge[hidden] { display: none; }

.chat-dock {
    position: fixed; z-index: 1200;
    right: 20px; bottom: 88px;
    width: min(400px, calc(100vw - 24px));
    height: min(640px, calc(100vh - 120px));
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.chat-dock[hidden] { display: none; }
.chat-dock-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.chat-dock-bar strong { font-size: 15px; }
.chat-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-dock-body .chat-shell { min-height: 0; height: 100%; border: 0; }
.chat-dock-create { padding: 14px 16px; overflow-y: auto; flex: 1; }

.chat-shell {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    flex: 1;
    min-height: calc(100vh - 64px);
    background: var(--bg-elev);
    border-top: 1px solid var(--border);
}
.chat-list {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
}
.chat-list-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 16px 16px 8px;
}
.chat-list-head h2 { margin: 0; font-size: 18px; }
.chat-list-filter {
    display: flex; gap: 6px; padding: 0 16px 12px; flex-wrap: wrap;
}
.chat-list-filter input[type="search"] { flex: 1 1 120px; }
.chat-list-filter select { max-width: 120px; }
.chat-list-items { list-style: none; margin: 0; padding: 0 8px 16px; overflow-y: auto; flex: 1; }
.chat-list-items li { margin: 0; }
.chat-list-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    color: inherit; text-decoration: none;
    width: 100%; text-align: left; border: 0; background: transparent;
    font: inherit; cursor: pointer;
}
.chat-list-item:hover { background: var(--bg-elev); text-decoration: none; }
.chat-list-item.is-active { background: var(--primary-soft); }
.chat-list-code { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: .3px; }
.chat-list-item strong { font-size: 14px; }
.chat-list-item .muted {
    font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-list-item.is-broadcast strong,
.chat-list-item.is-group strong { color: var(--primary); }
.chat-group-form {
    display: grid; gap: 8px;
    padding: 0 16px 12px;
}
.chat-group-form[hidden] { display: none; }
.chat-group-users {
    overflow: visible;
}

.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-thread { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-thread-head {
    display: flex; align-items: center;
    gap: 8px; padding: 12px 14px 10px; border-bottom: 1px solid var(--border);
}
.chat-thread-head h2 { margin: 0; font-size: 16px; min-width: 0; }
.chat-thread-code { font-size: 12px; font-weight: 700; color: var(--primary); }
.chat-back {
    display: none; flex: 0 0 auto;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); cursor: pointer;
    place-items: center;
}
.chat-back:hover { background: var(--bg); color: var(--primary); }
.chat-people {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    padding: 8px 14px; border-bottom: 1px solid var(--border);
}
.chat-people .badge {
    display: inline-flex; align-items: center; gap: 4px;
}
.chat-person-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; padding: 0; border: 0;
    background: none; color: inherit; cursor: pointer; opacity: .7;
}
.chat-person-remove:hover { opacity: 1; }
.chat-person-remove .icon { width: 12px; height: 12px; }
.chat-add-people summary { cursor: pointer; color: var(--primary); font-size: 13px; font-weight: 600; }
.chat-add-form {
    display: grid; gap: 8px; padding: 10px 0;
    grid-template-columns: minmax(140px, 1fr);
}
.chat-people .badge.is-external small {
    font-size: 10px; font-weight: 600; opacity: .75; text-transform: uppercase;
}
.chat-check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0; }
.chat-check input { width: auto; }

.chat-log {
    flex: 1; overflow-y: auto; padding: 16px 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}
.chat-msg {
    align-self: flex-start;
    max-width: 78%;
    padding: 10px 12px;
    border-radius: 12px 12px 12px 4px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
}
.chat-msg.is-mine {
    align-self: flex-end;
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    border-radius: 12px 12px 4px 12px;
}
.chat-msg.is-mine .muted,
.chat-msg.is-mine .chat-msg-meta time { color: rgba(255, 255, 255, .78); }
.chat-msg.is-mine a { color: #fff; }
.chat-msg.is-mine .badge-muted {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}
.chat-msg.is-mine .chat-msg-delivery .is-ok { color: #bbf7d0; }
.chat-msg.is-mine .chat-msg-delivery .is-fail { color: #fecaca; }
.chat-msg-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.chat-msg-body { margin-top: 4px; white-space: pre-wrap; }
.chat-msg-files { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.chat-msg-delivery {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
}
.chat-msg-delivery li { margin: 0; }
.chat-msg-delivery .is-ok { color: var(--success); }
.chat-msg-delivery .is-fail { color: var(--danger); }

.chat-composer {
    border-top: 1px solid var(--border);
    padding: 12px 16px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.chat-composer-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chat-closed, .chat-empty { padding: 24px 20px; }
.chat-empty { display: grid; place-items: center; flex: 1; }

.chat-shell.is-dock { grid-template-columns: 1fr; min-height: 0; }
.chat-shell.is-dock.is-thread .chat-list { display: none; }
.chat-shell.is-dock:not(.is-thread) .chat-main { display: none; }
.chat-shell.is-dock .chat-back { display: grid; }
.chat-shell.is-dock .chat-thread-head { padding: 10px 12px; }
.chat-shell.is-dock .chat-people { padding: 8px 14px; }
.chat-shell.is-dock .chat-log { padding: 12px 14px; }
.chat-shell.is-dock .chat-composer { padding: 10px 12px 12px; }
.chat-shell.is-dock .chat-msg { max-width: 92%; }

@media (max-width: 800px) {
    .chat-dock {
        right: 0; bottom: 0; left: 0;
        width: 100%; height: 100%;
        border-radius: 0; border: 0;
    }
    html.has-chat-dock #toast-stack,
    html.has-scan-dock #toast-stack { right: 16px; bottom: 16px; }
    .chat-shell { grid-template-columns: 1fr; min-height: calc(100vh - 56px); }
    .chat-shell.is-thread .chat-list { display: none; }
    .chat-shell:not(.is-thread) .chat-main { display: none; }
    .chat-back { display: grid; }
    .chat-msg { max-width: 92%; }
}

.search-hit-where { display: block; font-size: 12px; margin-top: 4px; }
mark.search-hit {
    background: var(--primary-soft);
    color: var(--primary-hover);
    font-weight: 700;
    padding: 0 2px;
    border-radius: 3px;
}

/* ---------- Selecteur d'adresses ---------- */
.address-picker-wrap { position: relative; }
.address-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
    margin: 0; padding: 4px; list-style: none;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    max-height: 260px; overflow: auto;
}
.address-suggest-item {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.address-suggest-item strong { font-size: 14px; font-weight: 600; }
.address-suggest-item span { font-size: 12px; color: var(--text-muted); }
.address-suggest-item .address-suggest-source { color: var(--primary); font-weight: 600; }
.address-suggest-fallback { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0; }
.address-suggest-item:hover,
.address-suggest-item.is-active { background: var(--bg); }
.address-source-note {
    display: block; margin-top: 5px; color: var(--text-muted); font-size: 11px; line-height: 1.35;
}

/* ---------- Selecteur (entreprises, personnes, usagers) ---------- */
.picker-wrap { position: relative; }
.picker-wrap [data-picker-q] { padding-right: 36px; }
.picker-wrap [data-picker-q]::-webkit-search-cancel-button,
.picker-wrap [data-picker-q]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.picker-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border: 0; border-radius: 50%;
    background: none; color: var(--text-muted); font: inherit; font-size: 20px;
    line-height: 1; cursor: pointer;
}
.picker-clear:hover { color: var(--text); background: var(--bg); }
.picker-suggest {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
    margin: 0; padding: 4px; list-style: none;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
    max-height: 280px; overflow: auto;
}
.picker-suggest-item {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.picker-suggest-item strong { font-size: 14px; font-weight: 600; }
.picker-suggest-item span { font-size: 12px; color: var(--text-muted); }
.picker-suggest-item:hover,
.picker-suggest-item.is-active { background: var(--bg); }
.picker[data-faces="1"] .picker-clear { display: none; }
.picker-faces {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px; margin-top: 8px; max-height: 320px; overflow: auto;
}
.picker-faces-empty {
    grid-column: 1 / -1; margin: 0; padding: 8px 2px;
    color: var(--text-muted); font-size: 13px;
}
.picker-faces-label {
    grid-column: 1 / -1; margin: 4px 0 0; padding: 2px 2px 0;
    font-size: 11px; font-weight: 700; letter-spacing: .4px;
    text-transform: uppercase; color: var(--text-muted);
}
.user-face {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-height: 96px; padding: 10px 6px 8px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg); color: var(--text); font: inherit; cursor: pointer;
}
.user-face:hover { border-color: var(--primary); }
.user-face.is-on {
    border-color: var(--primary); background: var(--primary-soft);
    box-shadow: inset 0 0 0 1px var(--primary);
}
.user-face-av {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.user-face.is-none .user-face-av {
    background: var(--bg-elev); color: var(--text-muted);
    border: 1px dashed var(--border);
}
.user-face-name {
    font-size: 12px; font-weight: 650; line-height: 1.25; text-align: center;
}
.user-face-role {
    font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.2;
}
.picker-suggest-empty {
    padding: 10px 12px; font-size: 13px; color: var(--text-muted);
}
.picker-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.picker-picked:empty { display: none; }
.picker-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px 4px 10px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 13px; line-height: 1.3;
}
.picker-chip-x {
    width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--text-muted); font: inherit; font-size: 16px;
    line-height: 1; cursor: pointer;
}
.picker-chip-x:hover { color: var(--text); background: var(--border); }

.call-dock {
    position: fixed; z-index: 1250;
    left: max(20px, calc(var(--sidebar-w, 248px) + 20px));
    bottom: 20px;
    width: min(360px, calc(100vw - 40px));
    max-height: calc(100vh - 16px);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.call-dock.is-moved {
    right: auto;
    bottom: auto;
    width: min(360px, calc(100vw - 16px));
}
.call-dock.is-dragging {
    user-select: none;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
}
.call-dock[hidden] { display: none; }
.call-dock.is-min {
    width: auto; min-width: 220px;
}
.call-dock.is-min .call-dock-actions,
.call-dock.is-min .call-transfer,
.call-dock.is-min .call-setup,
.call-dock.is-min .call-crm { display: none !important; }
.call-dock-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 14px 12px;
    background: linear-gradient(180deg, var(--success-soft), var(--bg-elev));
    cursor: grab;
    touch-action: none;
    user-select: none;
}
.call-dock.is-dragging .call-dock-head { cursor: grabbing; }
.call-dock-head .icon-btn,
.call-dock-head a { cursor: pointer; }
.call-dock.is-connecting .call-dock-head {
    background: linear-gradient(180deg, var(--primary-soft), var(--bg-elev));
}
.call-dock.is-ringing .call-dock-head {
    background: linear-gradient(180deg, var(--primary-soft), var(--bg-elev));
}
.call-dock.is-ringing .call-dock-actions {
    grid-template-columns: 1fr 1fr;
}
.call-btn.is-answer { background: var(--success); color: #fff; }
.call-btn.is-answer:hover { filter: brightness(1.08); }
.call-avatar {
    width: 52px; height: 52px; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    background: var(--success); color: #fff;
    font-size: 16px; font-weight: 700;
}
.call-dock.is-connecting .call-avatar { background: var(--primary); }
.call-dock.is-error .call-avatar { background: var(--danger); }
.call-dock-who { min-width: 0; flex: 1; }
.call-dock-who strong {
    display: block; font-size: 16px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.call-status { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.call-timer {
    font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
    margin-top: 6px; letter-spacing: .04em;
}
.call-setup {
    margin: 0; padding: 0 16px 14px;
    font-size: 13px; color: var(--text-muted);
}
.call-dock-actions {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px; padding: 8px 14px 16px;
}
.call-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 4px 8px; border: 0; border-radius: 14px;
    background: var(--bg); color: var(--text);
    font: inherit; font-size: 11px; font-weight: 600;
    cursor: pointer; text-decoration: none;
}
a.call-btn:hover { text-decoration: none; color: var(--text); }
.call-btn .icon { width: 22px; height: 22px; }
.call-btn:hover { background: var(--border); }
.call-btn.is-on { background: var(--primary-soft); color: var(--primary); }
.call-btn.is-hangup { background: var(--danger); color: #fff; }
.call-btn.is-hangup:hover { filter: brightness(1.08); }
.call-btn:disabled { opacity: .45; cursor: wait; }
.call-transfer {
    display: grid; grid-template-columns: 1fr auto;
    gap: 8px; padding: 0 14px 16px; align-items: center;
}
.call-transfer input { grid-column: 1 / -1; }
.call-transfer .btn { white-space: nowrap; }

.call-crm {
    padding: 10px 14px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
}
.call-crm[hidden] { display: none; }
.call-crm-note { font-size: 12px; color: var(--text-muted); padding-top: 10px; }
.call-crm-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: 14px;
    background: var(--bg); color: var(--text);
    font: inherit; font-size: 13px; font-weight: 600;
    text-decoration: none; border: 0; width: 100%; text-align: left; cursor: pointer;
}
.call-crm-btn .icon { width: 18px; height: 18px; flex: none; }
.call-crm-btn span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.call-crm-btn:hover { background: var(--border); text-decoration: none; color: var(--text); }

.call-line {
    position: fixed; z-index: 1185;
    left: max(20px, calc(var(--sidebar-w, 248px) + 20px));
    bottom: 20px;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 13px; font-weight: 600;
}
.call-line[hidden] { display: none; }
html.has-call-dock .call-line { display: none !important; }
.call-line-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
}
.call-line.is-live .call-line-dot { background: var(--success); }
.call-line.is-error .call-line-dot { background: var(--danger); }

/* ---------- Telephone (clavier + historique) ---------- */
.phone-page {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
.phone-page.is-history-only,
.phone-page.is-dial-only {
    grid-template-columns: 1fr;
}
.phone-page.is-dial-only .phone-dialer { max-width: 320px; }
.phone-dialer { padding: 18px; }
.phone-dialer h3 { margin: 0 0 12px; font-size: 16px; }
.phone-dial-form { display: flex; flex-direction: column; gap: 12px; }
.phone-dial-form input[type="tel"] {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
}
.phone-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.phone-pad-key {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: var(--radius);
    font-size: 20px;
    font-weight: 650;
    min-height: 48px;
    cursor: pointer;
}
.phone-pad-key:hover { background: var(--border); }
.phone-dial-actions { display: flex; gap: 8px; }
.phone-dial-actions .btn { flex: 1; justify-content: center; }
.phone-dial-hint { margin: 12px 0 0; font-size: 12px; }
.phone-group td {
    background: var(--bg);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-muted);
    padding-top: 14px;
}
.phone-group:hover td { background: var(--bg); }
.phone-page .col-actions { white-space: normal; }
.call-history-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(120px, .9fr) auto auto;
    gap: 8px 14px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.call-history-row:last-child { border-bottom: 0; }
.call-history-desk { min-width: 0; }
.call-history-dur { color: var(--text-muted); }
@media (max-width: 700px) {
    .call-history-row { grid-template-columns: minmax(0, 1fr) auto; }
    .call-history-desk { grid-column: 1; }
}

@media (max-width: 900px) {
    .phone-page { grid-template-columns: 1fr; }
    .call-dock { left: 12px; right: 12px; width: auto; bottom: 12px; }
    .call-dock.is-moved {
        right: auto;
        width: min(360px, calc(100vw - 16px));
    }
    .call-dock.is-moved.is-min {
        width: auto;
    }
    .call-line { left: 12px; bottom: 12px; }
}

#modal-share .modal { overflow: visible; }

/* ---------- Sites ---------- */
.site-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.site-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 12px; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border);
    color: var(--text); font-size: 13px;
}
.site-chip:hover { border-color: var(--primary); text-decoration: none; }
.site-chip .icon { width: 15px; height: 15px; color: var(--primary); }

.site-project {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border);
    color: inherit;
}
.site-project:last-child { border-bottom: 0; padding-bottom: 0; }
.site-project:first-child { padding-top: 0; }
.site-project:hover { text-decoration: none; }
.site-project strong { display: block; }
.site-project .muted { font-size: 13px; }

.site-owners { display: flex; flex-direction: column; }
.site-owner {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 12px; align-items: start;
    padding: 12px 0; border-bottom: 1px solid var(--border);
}
.site-owner:last-child { border-bottom: 0; padding-bottom: 0; }
.site-owner:first-child { padding-top: 0; }
.site-owner-dates { font-size: 13px; color: var(--text-muted); }
.site-owner-bar {
    height: 10px; border-radius: 999px;
    background: var(--primary-soft); margin-top: 8px;
}
.site-owner.is-current .site-owner-bar { background: var(--primary); }
.site-owner-name { font-weight: 600; }
.site-owner-name a { color: inherit; }

.site-timeline { list-style: none; margin: 0; padding: 0; }
.site-timeline li {
    display: grid; grid-template-columns: 110px 1fr;
    gap: 14px; padding: 12px 0 12px 18px;
    border-left: 2px solid var(--border); position: relative;
}
.site-timeline li:first-child { padding-top: 0; }
.site-timeline li:last-child { padding-bottom: 0; }
.site-timeline li::before {
    content: ""; position: absolute; left: -5px; top: 18px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--bg-elev);
}
.site-timeline li:first-child::before { top: 6px; }
.site-timeline-date { font-size: 13px; color: var(--text-muted); }
.site-timeline-body strong { display: block; }
        .site-timeline-body .muted { font-size: 13px; }

.site-map-card .card-header { padding: 0 0 12px; margin: 0; }
.site-map {
    height: 360px;
    width: 100%;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    z-index: 0;
    isolation: isolate;
    background: var(--bg);
}
.site-map .leaflet-container { font: inherit; }
.site-map-popup strong { display: block; margin-bottom: 2px; }
.site-map-popup .muted { font-size: 13px; margin: 0 0 8px; }

@media (max-width: 720px) {
    .col-site-owner, .col-site-count { display: none; }
    .site-owner { grid-template-columns: 1fr; gap: 4px; }
    .site-timeline li { grid-template-columns: 1fr; gap: 4px; padding-left: 16px; }
    .site-map { height: 240px; }
}

/* Planificateur / bons de travail / portail client */
.planner-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
}
.planner-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    flex: 0 0 auto;
}
.planner-bar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    justify-self: start;
}
.planner-bar-title .icon { color: var(--primary); }
.planner-week {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-self: center;
}
.planner-bar-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
    justify-self: end;
}
.planner-week-label {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text);
}
.planner-week-nav { display: flex; align-items: center; gap: 4px; }
.planner-week-arrow { min-width: 30px; padding: 4px 8px; font-size: 16px; line-height: 1; text-align: center; }
.planner-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 10px 16px 0;
    padding: 9px 12px;
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
    border-left: 4px solid var(--danger);
    border-radius: var(--radius-sm);
    flex: 0 0 auto;
}
.planner-alert p { margin: 0; font-size: 13px; font-weight: 600; }
.planner-alert .btn { background: #fff; border-color: var(--danger); color: var(--danger); }
.planner-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    margin-top: 10px;
    padding: 0 10px;
    gap: 10px;
}
.planner-side {
    width: 292px;
    flex: 0 0 292px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.planner-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--border);
}
.planner-tabs a {
    padding: 10px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.planner-tabs a:hover { text-decoration: none; color: var(--text); }
.planner-tabs a.is-on { color: var(--primary); border-bottom-color: var(--primary); }
.planner-side.is-dossiers .planner-filters { display: none; }
body.is-planner-drag .planner-tabs a.is-drop {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 16%, var(--bg-elev));
    border-bottom-color: var(--primary);
}
.planner-filters { padding: 8px 8px 0; display: flex; flex-direction: column; gap: 2px; }
.planner-filters a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
}
.planner-filters a:hover { background: var(--bg); text-decoration: none; }
.planner-filters a.is-on { background: var(--primary-soft); color: var(--primary); }
.planner-filters a .icon { width: 16px; height: 16px; color: var(--text-muted); }
.planner-filters a.is-on .icon { color: var(--primary); }
.planner-filters a em {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    padding: 1px 7px;
    border-radius: 99px;
}
.planner-filters a.is-on em { background: #fff; color: var(--primary); }
[data-theme="dark"] .planner-filters a.is-on em { background: var(--bg-elev); }
.planner-search {
    position: relative;
    margin: 8px 10px;
}
.planner-search .icon {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-muted);
}
.planner-search input[type="search"] { padding-left: 32px; padding-right: 32px; font-size: 13px; height: 38px; }
.planner-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.planner-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-muted); cursor: pointer;
}
.planner-search-clear:hover { background: var(--bg); color: var(--text); }
.planner-search-clear .icon { width: 14px; height: 14px; }
.planner-search-clear[hidden] { display: none; }
.planner-place { margin: 0 10px 8px; }
.planner-backlog {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 4px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.planner-backlog [data-planner-pane="a_faire"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.planner-file[hidden],
[data-planner-pane][hidden] { display: none !important; }
.planner-file {
    border: 1px solid var(--border);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
    background: var(--bg-elev);
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.planner-file:active { cursor: grabbing; }
.planner-file.is-dragging { opacity: .55; }
.planner-file.is-urgent { border-left-color: var(--danger); background: var(--danger-soft); }
.planner-file.is-waiting,
.planner-file.is-unplanned { border-left-color: var(--warning); background: var(--warning-soft); }
.planner-file.is-week:not(.is-urgent):not(.is-waiting):not(.is-unplanned) {
    border-left-color: var(--success);
}
.planner-file strong { font-size: 13px; line-height: 1.3; }
.planner-file span, .planner-file small { font-size: 12px; color: var(--text-muted); }
.planner-file em {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--info);
    margin-top: 4px;
}
.planner-file em.is-week { color: var(--success); }
.planner-file em.is-urgent { color: var(--danger); }
.planner-file-head { display: flex; flex-direction: column; gap: 2px; }
[data-theme="dark"] .planner-file.is-urgent { background: var(--danger-soft); }
[data-theme="dark"] .planner-file.is-waiting,
[data-theme="dark"] .planner-file.is-unplanned { background: var(--warning-soft); }
.planner-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.planner-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}
.planner-density { display: flex; gap: 2px; background: var(--bg); padding: 2px; border-radius: 99px; }
.planner-density a, .planner-weekend {
    padding: 5px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}
.planner-density a:hover, .planner-weekend:hover { text-decoration: none; color: var(--text); }
.planner-density a.is-on, .planner-weekend.is-on {
    color: #fff;
    background: var(--primary);
}
.planner-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.planner-grid {
    display: grid;
    grid-template-columns: 128px repeat(7, minmax(140px, 1fr));
    min-width: 1120px;
    background: var(--border);
    gap: 1px;
}
.planner-shell:not(.show-weekend) .planner-grid {
    grid-template-columns: 128px repeat(5, minmax(150px, 1fr));
    min-width: 880px;
}
.planner-shell:not(.show-weekend) .is-weekend { display: none; }
.planner-corner, .planner-dayhead, .planner-who, .planner-cell {
    background: var(--bg-elev);
}
.planner-corner, .planner-dayhead {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px 10px;
    font-size: 12px;
}
.planner-corner {
    left: 0;
    z-index: 3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: flex-end;
}
.planner-dayhead {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 6px;
    min-height: 0;
    box-shadow: 0 1px 0 var(--border);
}
.planner-dayhead.is-today {
    background: var(--primary-soft);
    box-shadow: inset 0 3px 0 var(--primary);
}
.planner-cell.is-today { background: color-mix(in srgb, var(--primary-soft) 55%, var(--bg-elev)); }
[data-theme="dark"] .planner-dayhead.is-today { background: #152238; box-shadow: inset 0 3px 0 var(--primary); }
[data-theme="dark"] .planner-cell.is-today { background: #152238; }
.planner-day-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}
.planner-day-date { text-align: right; flex: none; }
.planner-day-kicker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.planner-dayhead.is-today .planner-day-kicker { color: var(--primary); }
.planner-day-num { display: block; font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.planner-dayhead.is-today .planner-day-num { color: var(--primary); }
.planner-dayhead.is-frozen .planner-day-num { display: inline-flex; align-items: center; gap: 6px; }
.planner-day-lock .icon { width: 14px; height: 14px; }
.planner-pill {
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border: 0;
    border-radius: 99px;
    background: var(--bg);
    color: var(--text-muted);
}
button.planner-pill { cursor: pointer; }
.planner-pill.is-ok { background: var(--success-soft); color: var(--success); }
.planner-pill.is-wait { background: var(--warning-soft); color: var(--warning); }
.planner-pill.is-wait:hover { filter: brightness(.96); }
.planner-pill.is-holy { background: #f1f5f9; color: #475569; }
.planner-pill.is-frozen { background: var(--bg); color: var(--text-muted); }
.planner-who {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 10px;
    min-height: 0;
}
.planner-who .avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
}
.planner-who strong { display: block; font-size: 12px; line-height: 1.25; }
.planner-who-info span { display: block; font-size: 11px; color: var(--text-muted); }
.planner-who-info .planner-who-truck { display: inline-flex; }
.planner-who-truck {
    margin-top: 4px;
    padding: 1px 7px;
    font-size: 10px;
    text-decoration: none;
}
.planner-who-app {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
}
.planner-who-full { margin-top: 4px; }
.planner-who-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.planner-dayhead.is-holiday, .planner-cell.is-holiday {
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(15,23,42,.04) 6px, rgba(15,23,42,.04) 12px);
}
.planner-cell {
    position: relative;
    min-height: 88px;
    padding: 8px 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.is-planner-drag .planner-cell.is-drop,
body.is-planner-drag .planner-cell.has-cards.is-drop,
[data-theme="dark"] body.is-planner-drag .planner-cell.is-drop {
    outline: 2px dashed var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 20%, var(--bg-elev));
    box-shadow: inset 0 0 0 1px var(--primary);
}
body.is-planner-drag .planner-cell.is-drop-blocked {
    outline: 2px solid var(--danger);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--danger) 16%, var(--bg-elev));
    box-shadow: inset 0 0 0 1px var(--danger);
}
.planner-drop-slot {
    flex: none;
    pointer-events: none;
    border: 2px dashed var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    color: var(--primary);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.planner-cell.is-drop-blocked .planner-drop-slot {
    border-color: var(--danger);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.planner-who.is-drop,
.planner-filters a.is-drop,
.planner-folder.is-drop,
.planner-tabs a.is-drop {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 18%, var(--bg-elev));
}
.planner-card.is-drop {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 28%, transparent);
}
.planner-card.is-drop::after {
    content: "Ajouter à ce bon";
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
}
.planner-empty-grid {
    grid-column: 1 / -1;
    padding: 28px 16px;
    background: var(--bg-elev);
    color: var(--text-muted);
    text-align: center;
}
.planner-card {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 3px;
    padding: 8px 10px 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--success) 22%, var(--border));
    border-left: 3px solid #16a34a;
    background: var(--success-soft);
    color: inherit;
    font-size: 12px;
    line-height: 1.3;
    position: relative;
}
.planner-card:has(.planner-card-more) { padding-bottom: 0; }
.planner-card.is-c2 {
    background: #ecfeff;
    border-color: color-mix(in srgb, #0f766e 22%, var(--border));
    border-left-color: #0f766e;
}
.planner-card.is-c3 {
    background: var(--info-soft);
    border-color: color-mix(in srgb, var(--info) 22%, var(--border));
    border-left-color: var(--info);
}
.planner-card[data-drag-visit] {
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.planner-card[data-drag-visit] a,
.planner-card[data-drag-visit] button,
.planner-card[data-drag-visit] [data-modal-open] {
    cursor: pointer;
    touch-action: manipulation;
}
.planner-card[data-drag-visit] a { -webkit-user-drag: none; }
.planner-card-kicker {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    min-width: 0;
    padding-right: 16px;
}
.planner-card-num {
    flex: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.planner-card.is-c2 .planner-card-num { background: #0f766e; }
.planner-card.is-c3 .planner-card-num { background: var(--info, #3b82f6); }
.planner-card.is-marked,
.sched-m-card.is-marked {
    background: color-mix(in srgb, var(--card-color) 22%, #fff);
    border-color: color-mix(in srgb, var(--card-color) 30%, var(--border));
    border-left: 3px solid var(--card-color);
}
.planner-card.is-marked .planner-card-num { background: var(--card-color); }
.planner-hold {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--card-color, #94a3b8);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
}
.planner-card-color {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.planner-card-color > span {
    flex: 1 1 100%;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.planner-card-color button[name="color"] {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
}
.planner-card-color button[name="color"].is-on { box-shadow: 0 0 0 2px var(--text); }
.planner-card-color .planner-folder-color { width: 22px; height: 22px; border-radius: 50%; }
.planner-card-color .planner-folder-color input[type="color"] { width: 36px; height: 36px; margin: -8px; }
.planner-card-color-clear {
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elev);
    color: var(--text);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}
.planner-card.is-started .planner-card-num,
.planner-card.is-overlap .planner-card-num { background: var(--warning); }
.planner-card-code {
    font-weight: 700;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: -.03em;
    min-width: 0;
    flex: 1 1 8em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
a.planner-card-code:hover {
    color: var(--primary);
    text-decoration: underline;
}
.planner-card-acc {
    margin-top: 0;
    padding: 6px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.planner-card-acc[hidden] { display: none; }
.planner-acc-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.planner-card-acc .planner-acc-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
}
@container (min-width: 210px) {
    .planner-card-acc .planner-acc-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.planner-acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-elev);
    color: var(--text);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    padding: 0 8px;
}
.planner-card-acc .planner-acc-btn {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 4px;
    font-size: 10px;
    overflow: hidden;
}
.planner-acc-btn .icon { width: 14px; height: 14px; flex: none; }
.planner-acc-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); text-decoration: none; }
.planner-acc-btn.is-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.planner-card-x {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: #ef4444;
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    opacity: 0;
    transition: opacity .15s, background .15s;
    z-index: 2;
}
.planner-card:hover .planner-card-x,
.planner-app-tile:hover .planner-card-x { opacity: 1; }
.planner-card-x:hover { background: #dc2626; color: #fff; }
.planner-card-x .icon { width: 14px; height: 14px; pointer-events: none; }
.planner-card.is-dragging { opacity: .55; }
.planner-card.is-started { background: #fef3c7; border-color: #fde68a; }
.planner-card.is-done { background: #dcfce7; border-color: #bbf7d0; }
[data-theme="dark"] .planner-card { background: #14351f; border-left-color: #10b981; }
[data-theme="dark"] .planner-card.is-c2 { background: #134e4a; border-left-color: #14b8a6; }
[data-theme="dark"] .planner-card.is-c3 { background: #1e3a5f; border-left-color: #3b82f6; }
[data-theme="dark"] .planner-card.is-marked,
[data-theme="dark"] .sched-m-card.is-marked {
    background: color-mix(in srgb, var(--card-color) 32%, #0f172a);
}
[data-theme="dark"] .planner-card.is-started { background: #3a2a0c; border-left-color: #f59e0b; }
[data-theme="dark"] .planner-card.is-done { background: #14351f; border-left-color: #22c55e; }
.planner-card .badge { flex: none; font-size: 10px; padding: 1px 7px; }
.planner-card .badge-warning { color: var(--warning); }
.planner-card .badge-success { color: var(--success); }
.planner-card-name,
.planner-card-client,
.planner-card-addr {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}
.planner-card-extra { display: flex; flex-direction: column; gap: 2px; }
.planner-card-name {
    font-weight: 600;
    font-size: 12.5px;
    color: inherit;
}
.planner-card-client { font-size: 12px; color: var(--text); }
.planner-card-addr { display: block; color: var(--text-muted); }
.planner-card-name:hover,
.planner-card-client:hover,
.planner-card-addr:hover {
    color: var(--primary);
    text-decoration: underline;
}
.planner-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
}
.planner-hours {
    margin: 0;
    padding: 2px 8px;
    border: 0;
    border-radius: 99px;
    background: rgba(255,255,255,.7);
    color: inherit;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.planner-hours:hover { color: var(--primary); text-decoration: none; }
.planner-punch { font-size: 10px; color: var(--text-muted); }
.planner-card-more {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px -10px 0 -12px;
    padding: 2px 0 4px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 0 0 4px 4px;
    background: color-mix(in srgb, #fff 42%, transparent);
    color: #6b7280;
    cursor: pointer;
}
.planner-card-more:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, #fff);
}
.planner-card-more-icon { display: block; line-height: 0; }
.planner-card-more-icon svg {
    width: 12px;
    height: 12px;
    display: block;
    transition: transform .18s ease;
}
/* Ferme : chevron vers la droite ; ouvert : vers le bas. */
.planner-card-more-icon svg { transform: rotate(-90deg); }
.planner-card.is-open .planner-card-more-icon svg { transform: rotate(0deg); }
.planner-card.is-open .planner-card-more { color: var(--primary); }
.planner-app-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    position: relative;
}
.planner-app-tile .avatar {
    width: 22px; height: 22px; min-width: 22px; font-size: 9px; color: #fff;
}
.planner-shell.is-compact .planner-who,
.planner-shell.is-compact .planner-cell { min-height: 48px; }
.planner-shell.is-compact .planner-who-hours,
.planner-shell.is-compact .planner-who-km,
.planner-shell.is-compact .planner-who-actions,
.planner-shell.is-compact .planner-who-app,
.planner-shell.is-compact .planner-who-full { display: none; }
.planner-shell.is-compact .planner-who-truck { margin-top: 2px; }
.planner-shell.is-compact .planner-card { padding: 5px 6px 5px 8px; gap: 2px; }
.planner-shell.is-compact .planner-card:has(.planner-card-more) { padding-bottom: 0; }
.planner-shell.is-compact .planner-card-more {
    margin-left: -8px;
    margin-right: -6px;
    order: 4;
}
.planner-shell.is-compact .planner-card-extra,
.planner-shell.is-compact .planner-legs,
.planner-shell.is-compact .planner-route-leg { display: none; }
.planner-shell.is-compact .planner-card-acc { order: 6; }
.planner-shell.is-compact .planner-card-meta { margin-top: 0; }
.planner-shell.is-compact .planner-card-kicker .badge,
.planner-shell.is-compact .planner-card-num,
.planner-shell.is-compact .planner-overlap { display: none; }
.planner-add {
    margin-top: auto;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    padding: 2px 2px 0;
}
.planner-empty-actions {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    opacity: 0;
    padding: 8px;
    pointer-events: none;
    z-index: 1;
}
.planner-cell:not(.has-cards):hover .planner-empty-actions { opacity: 1; pointer-events: auto; }
.planner-empty-actions .planner-add {
    position: static;
    margin: 0;
    color: var(--primary);
    opacity: 1;
}
.planner-cell.is-frozen:not(.has-cards) .planner-empty-actions { display: none; }
.planner-absent {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.planner-absent:hover { color: var(--danger); }
.planner-add:hover { text-decoration: underline; }
.planner-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
    flex: 0 0 auto;
}
.planner-apps { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.planner-app {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 99px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    cursor: grab;
    user-select: none;
    touch-action: none;
}
.planner-app:active { cursor: grabbing; }
.planner-ghost {
    position: fixed;
    z-index: 80;
    pointer-events: none;
    padding: 8px 12px;
    max-width: 240px;
    background: #fff;
    color: #1e293b;
    border: 1px solid var(--primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}
body.is-planner-drag { cursor: grabbing; user-select: none; }
body.is-planner-drag .planner-file,
body.is-planner-drag .planner-card[data-drag-visit],
body.is-planner-drag .planner-app { cursor: grabbing; }

.modal--wide { width: min(980px, calc(100vw - 32px)); }
.ov-body { display: flex; flex-direction: column; gap: 10px; }
.ov-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-tabs button {
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.ov-tabs button.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.ov-map { height: 380px; width: 100%; border-radius: 12px; background: #e5e9f0; }
.ov-legend { font-size: 13px; }
.ov-leg-head { font-weight: 700; margin-bottom: 8px; }
.ov-leg-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }
.ov-swatch { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ov-leg-name { font-weight: 600; }
.ov-leg-meta { color: var(--text-muted); font-size: 12px; }
.ov-empty { color: var(--text-muted); font-style: italic; }
.ov-holy-form { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ov-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ov-stops { margin: 0; padding-left: 18px; font-size: 13px; }
.planner-avail-btn {
    border: 0; background: transparent; cursor: pointer; align-self: flex-start; padding: 0;
}
.planner-folder {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 8px 10px; border-left: 4px solid var(--folder-color, #64748b);
    background: var(--bg); margin-bottom: 4px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.planner-folder-branch {
    margin: 0 0 6px 8px;
    padding-left: 8px;
    border-left: 2px solid var(--folder-color, var(--border));
}
.planner-folder-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 8px;
}
.planner-folder-files:empty { display: none; }
.planner-folder-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}
.planner-folder-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.planner-folder-plus span { line-height: 1; }
.planner-folder-node.is-adding > .planner-folder .planner-folder-plus {
    border-color: var(--primary);
    color: var(--primary);
}
.planner-folder-new.is-nested {
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 8px;
    padding: 4px 0 8px;
}
.planner-folder-node.is-adding > .planner-folder-branch > .planner-folder-new.is-nested {
    display: flex;
}
.planner-folder-new {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 4px 0 12px;
}
.planner-folder-new input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 38px;
}
.planner-folder-new .btn {
    flex: none;
    height: 38px;
    padding: 0 12px;
}
.planner-folder-color {
    display: block;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-elev);
    font-size: 0;
    line-height: 0;
}
.planner-folder-color:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.planner-folder-color input[type="color"] {
    display: block;
    width: 52px;
    height: 52px;
    margin: -8px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    box-shadow: none;
}
.planner-pill.is-frozen { background: #e2e8f0; color: #334155; }
.planner-dayhead.is-frozen, .planner-cell.is-frozen {
    background-color: var(--bg-elev);
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(15, 23, 42, .05) 8px,
        rgba(15, 23, 42, .05) 16px
    );
}
[data-theme="dark"] .planner-pill.is-frozen {
    background: #1e293b;
    color: #94a3b8;
}
[data-theme="dark"] .planner-dayhead.is-holiday,
[data-theme="dark"] .planner-cell.is-holiday {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 8px,
        rgba(148, 163, 184, .06) 8px,
        rgba(148, 163, 184, .06) 16px
    );
}
[data-theme="dark"] .planner-dayhead.is-frozen,
[data-theme="dark"] .planner-cell.is-frozen {
    background-color: #0f172a;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(148, 163, 184, .07) 10px,
        rgba(148, 163, 184, .07) 20px
    );
}
.planner-cell.is-absent {
    background: repeating-linear-gradient(45deg, #fef2f2, #fef2f2 8px, #fee2e2 8px, #fee2e2 16px);
    border-color: #fca5a5;
}
[data-theme="dark"] .planner-cell.is-absent {
    background: repeating-linear-gradient(45deg, #3f1d1d, #3f1d1d 8px, #4a2020 8px, #4a2020 16px);
}
.planner-absent-mark {
    font-size: 10px;
    font-weight: 700;
    color: #b91c1c;
    background: rgba(239, 68, 68, .12);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.planner-absent-btn {
    position: absolute;
    right: 4px;
    bottom: 4px;
    z-index: 3;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
    opacity: .35;
    transition: opacity .12s, background .12s;
}
.planner-cell:hover .planner-absent-btn { opacity: .55; }
.planner-absent-btn:hover { opacity: 1; background: rgba(0,0,0,.06); }
.planner-absent-btn.is-on { opacity: 1; }
[data-theme="dark"] .planner-absent-btn:hover { background: rgba(255,255,255,.08); }
#modal-absence .modal { width: min(420px, calc(100vw - 40px)); }
.planner-opt-day {
    width: 100%;
    padding: 3px 6px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--info);
    background: var(--info-soft);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.planner-who-btn, .planner-who-opt, .planner-who-map {
    flex: none;
    width: 28px; height: 28px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-elev);
    color: var(--text-muted);
    display: grid; place-items: center; cursor: pointer;
    padding: 0;
    font: inherit;
}
.planner-who-btn:hover, .planner-who-opt:hover, .planner-who-map:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-soft);
}
.planner-who-btn .icon, .planner-who-opt .icon, .planner-who-map .icon { width: 14px; height: 14px; }
.planner-who-span {
    border: 0; background: transparent; cursor: pointer; font-size: 13px; padding: 0 2px;
}
.planner-who-km { display: block; font-size: 11px; color: var(--text-muted); }
.planner-card.is-overlap {
    background: #fef3c7;
    border-left-color: #f59e0b;
}
.planner-card.is-avail { outline: 2px dashed #0d9488; }
.planner-card.is-locked { opacity: .92; }
.planner-card.is-selected {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.planner-overlap {
    font-size: 10px;
    font-weight: 700;
    color: var(--warning);
    background: #fff;
    padding: 1px 6px;
    border-radius: 99px;
}
.planner-legs { display: flex; flex-wrap: wrap; gap: 4px; }
.planner-route-leg {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1px 0;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0 7px;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.6;
    white-space: nowrap;
    width: 100%;
}
.planner-route-leg:hover { color: var(--primary); border-color: var(--primary); }
.planner-leg-chip {
    font-size: 10px; font-weight: 700; background: var(--bg); border-radius: 99px; padding: 1px 6px;
}
.planner-trucks-label { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.planner-cal-who a { font-size: 11px; font-weight: 600; }
.planner-cal-cell { min-height: 52px; gap: 4px; }
.planner-cal-cell .cal-item { font-size: 11px; }
.planner-truck-chip {
    display: inline-flex; align-items: center; gap: 4px;
    background: #fef3c7; border: 1px solid #d97706; color: #78350f;
    border-radius: 99px; padding: 2px 8px; font-size: 12px; font-weight: 700;
}
a.planner-truck-chip { text-decoration: none; color: inherit; }
a.planner-truck-chip:hover { filter: brightness(.97); }
.planner-card .planner-truck-chip,
.planner-card .planner-truck-chip small {
    color: #78350f;
}
.planner-truck-chip .icon { width: 14px; height: 14px; color: inherit; }
[data-theme="dark"] .planner-truck-chip {
    background: #92400e;
    border-color: #fbbf24;
    color: #fffbeb;
}
[data-theme="dark"] .planner-card .planner-truck-chip,
[data-theme="dark"] .planner-card .planner-truck-chip small {
    color: #fffbeb;
}
.planner-truck-chip.is-draggable { cursor: grab; }
.planner-truck-chip.is-dragging { opacity: 0.45; }
.planner-truck-add { display: flex; gap: 4px; align-items: center; }
.planner-truck-cell { min-height: 48px; }
.planner-truck-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.planner-fleet {
    margin: 0 10px 8px;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: var(--radius-sm);
}
.planner-fleet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 6px; font-size: 13px;
}
.planner-fleet-list { display: flex; flex-wrap: wrap; gap: 6px; }
.truck-dl {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin: 0;
}
.truck-dl dt { font-size: 12px; color: var(--text-muted); margin: 0 0 2px; }
.truck-dl dd { margin: 0; font-weight: 600; }
.truck-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px;
}
.truck-stats div { display: flex; flex-direction: column; gap: 2px; }
.truck-stat-list { margin: 0 0 12px; padding-left: 18px; }
.truck-maint-form { margin-bottom: 16px; }
.truck-maint-files {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.truck-maint-thumb {
    display: block; width: 44px; height: 44px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-elev); flex: 0 0 auto;
}
.truck-maint-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.truck-maint-file {
    display: inline-flex; max-width: 160px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid var(--border); background: var(--bg-elev); font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
}
.truck-maint-add { position: relative; }
.truck-maint-add .btn { min-height: 36px; }
.truck-maint-add input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.truck-maint-add .uploader-list { display: none; }
.planner-tl { position: relative; min-height: 92px; }
.planner-tl-hours {
    display: grid; grid-template-columns: repeat(16, 1fr); font-size: 9px; color: var(--text-muted);
    border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.planner-tl-track { position: relative; min-height: 72px; }
.planner-shell.is-detail .planner-card[data-tl-block] {
    position: absolute; top: 0; min-height: 68px; max-width: none;
}
.planner-resize {
    position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; left: 0;
}
.planner-resize.is-end { left: auto; right: 0; }
.planner-wx { font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 3px; }
#modal-heures .modal { width: min(640px, calc(100vw - 40px)); }
.planner-tg-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 8px;
    margin-bottom: 8px;
}
.planner-tg-dur {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #047857;
    margin: 0;
}
.planner-tg-dur input[type="number"] {
    width: 56px;
}
.planner-tg {
    display: flex;
    flex-direction: column;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fafbfc;
    max-height: 320px;
    overflow: auto;
    user-select: none;
    padding: 4px 0;
}
.planner-tg-cell {
    appearance: none;
    display: flex;
    align-items: center;
    position: relative;
    height: 18px;
    padding: 0 12px;
    border: 0;
    border-top: 1px dashed transparent;
    background: transparent;
    color: #94a3b8;
    font: inherit;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: left;
    cursor: pointer;
    line-height: 1;
}
.planner-tg-cell.is-hour {
    border-top: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    height: 20px;
}
.planner-tg-cell:hover { background: rgba(59, 130, 246, .08); }
.planner-tg-cell.is-in {
    background: linear-gradient(90deg, rgba(16, 185, 129, .18), rgba(16, 185, 129, .28));
    color: #065f46;
    font-weight: 700;
}
.planner-tg-cell.is-start,
.planner-tg-cell.is-end {
    background: #10b981;
    color: #fff;
    font-weight: 800;
}
.planner-tg-cell.is-start::after,
.planner-tg-cell.is-end::after {
    position: absolute;
    right: 10px;
    font-size: 9px;
    letter-spacing: .08em;
    background: rgba(255,255,255,.25);
    padding: 1px 6px;
    border-radius: 3px;
}
.planner-tg-cell.is-start::after { content: "DEBUT"; }
.planner-tg-cell.is-end::after { content: "FIN"; }
.planner-tg-cell.is-single::after { content: "DEBUT / FIN"; }
.planner-tg-hint {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 8px;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.planner-tg-hint.is-active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #92400e;
    font-weight: 600;
}
[data-theme="dark"] .planner-tg-summary {
    background: linear-gradient(135deg, #14351f 0%, #14532d 100%);
    border-color: #166534;
}
[data-theme="dark"] .planner-tg-summary label { color: #86efac; }
[data-theme="dark"] .planner-tg-dur { color: #6ee7b7; }
[data-theme="dark"] .planner-tg {
    background: #0f172a;
    border-color: var(--border);
}
[data-theme="dark"] .planner-tg-cell { color: #64748b; }
[data-theme="dark"] .planner-tg-cell.is-hour {
    border-top-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .planner-tg-cell:hover { background: rgba(59, 130, 246, .16); }
[data-theme="dark"] .planner-tg-cell.is-in {
    background: linear-gradient(90deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .38));
    color: #a7f3d0;
}
[data-theme="dark"] .planner-tg-cell.is-start,
[data-theme="dark"] .planner-tg-cell.is-end {
    background: #059669;
    color: #fff;
}
[data-theme="dark"] .planner-tg-hint {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text-muted);
}
[data-theme="dark"] .planner-tg-hint.is-active {
    background: linear-gradient(135deg, #3a2a0c 0%, #422006 100%);
    border-color: #d97706;
    color: #fde68a;
}

.planner-card-caret {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    color: var(--text-muted);
    transition: transform .15s;
}
.planner-file.is-expanded { z-index: 2; }
.planner-file-acc {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.planner-file-acc[hidden] { display: none; }
.planner-file-tasks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
}
.planner-file-tasks-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.planner-file-tasks-head strong {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.planner-file-tasks-head a,
.planner-file-tasks-more {
    font-size: 12px;
    font-weight: 600;
}
.planner-file-tasks ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.planner-file-tasks li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.3;
}
.planner-file-tasks li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 6px;
    background: var(--text-muted);
    transform: translateY(-1px);
}
.planner-file-tasks li.is-progress::before { background: var(--info); }
.planner-file-tasks li.is-ticket::before { background: #f97316; }
.planner-file-tasks li.is-ticket a {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
    color: #c2410c;
    font-weight: 700;
    text-decoration: none;
}
.planner-file-tasks li.is-ticket a span { color: #c2410c; }
.planner-file-tasks-more.is-ticket { color: #c2410c; }
.planner-file-tasks li span {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-file-tasks li small {
    flex: 0 0 auto;
    font-size: 11px;
}
.planner-file-tasks li.is-late small { color: var(--danger); font-weight: 700; }
.planner-file-tasks p {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}
.planner-file.is-expanded .planner-card-caret { transform: rotate(90deg); }
.planner-acc-btn.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.planner-card .planner-card-num { color: #fff; }
[data-theme="dark"] .planner-card .planner-card-num {
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
[data-theme="dark"] .planner-card.is-overlap .planner-card-num {
    background: #fbbf24;
    color: #1c1003;
}
/* Chevauchement en mode sombre : ambre sombre, pas le jaune pale du mode
   clair (texte clair sur fond clair). */
[data-theme="dark"] .planner-card.is-overlap {
    background: #3a2a0c;
    border-left-color: #f59e0b;
}
.planner-day-holy {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 5px;
    padding: 0 4px;
    line-height: 1.35;
    pointer-events: none;
}
.planner-wx-lo { opacity: .7; font-weight: 500; }
.planner-sel-bar {
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 999px;
    background: #1e293b;
    color: #f8fafc;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .35);
    font-size: 13px;
    max-width: 92vw;
}
.planner-sel-bar .ssb-count {
    background: var(--primary);
    border-radius: 999px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 12px;
}
.planner-sel-bar .ssb-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-sel-bar .ssb-txt b { color: #93c5fd; }
.planner-sel-bar .ssb-clear {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 999px;
}
.planner-sel-bar .ssb-clear:hover { background: rgba(248, 250, 252, .3); }
.sched-m-actions { display: flex; gap: 4px; margin-top: 4px; }

.planner-wiz-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.planner-wiz-steps button {
    border: 1px solid var(--border); background: var(--bg); border-radius: 99px;
    padding: 4px 8px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
}
.planner-wiz-steps button.is-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.planner-av-row, .planner-stale-row {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.planner-stale-row { justify-content: space-between; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.sched-m { display: none; }
@media (max-width: 768px) {
    .planner-body, .planner-toolbar, .planner-foot { display: none; }
    .sched-m { display: block; padding: 10px 12px; }
    .sched-m-bar { display: flex; justify-content: space-between; margin-bottom: 10px; }
    .sched-m-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; background: var(--bg-elev); }
    .sched-m-row h4 { margin: 0 0 6px; }
    .sched-m-card { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; color: inherit; text-decoration: none; }
}

.ov-mkr {
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 800; font-size: 12px;
    border: 2px solid #fff; box-shadow: 0 3px 8px rgba(2,6,23,.4);
}
tr.is-muted { opacity: .5; }

.wo-page { max-width: 640px; }
.wo-number {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px;
    letter-spacing: .2px;
    word-break: break-all;
}
.wo-head-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wo-steps {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.wo-step {
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px; color: var(--text-muted); font-weight: 600;
}
.wo-step::before {
    content: ""; height: 4px; border-radius: 99px; background: var(--border);
}
.wo-step.is-done { color: var(--text); }
.wo-step.is-done::before { background: var(--success); }
.wo-facts { margin-bottom: 16px; }
.wo-team { padding-top: 4px; border-top: 1px solid var(--border); }
.wo-team-label {
    display: block; margin-bottom: 8px;
    font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
}
.wo-members { display: flex; flex-wrap: wrap; gap: 8px; }
.wo-member {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg); font-size: 13px;
}
.wo-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--primary-soft); color: var(--primary);
    font-size: 11px; font-weight: 700;
}
.punch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.punch-row .btn, .punch-row form .btn { min-height: 52px; font-size: 16px; width: 100%; }
.punch-log { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.punch-log li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.punch-log li:last-child { border-bottom: 0; padding-bottom: 0; }
.wo-punch-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.wo-mat-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wo-mat-name small { color: var(--text-muted); }
.wo-mat-qty {
    display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto;
    font-variant-numeric: tabular-nums;
}
/* Inventaire du chantier vu du bon : les deux portes d'entree d'abord
   (gros boutons, pleine largeur au telephone), puis la liste. */
.wo-site-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.wo-site-actions .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.wo-site-sub { margin: 16px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
/* Compteur « pose sur ce bon » : -, quantite, unite, +. Gros au doigt. */
.wo-mat-where { color: var(--text-muted); }
.wo-mat-where strong { color: var(--text); font-weight: 600; }
.wo-mat-step { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.wo-mat-step .icon-btn { width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.wo-mat-step input {
    width: 64px; height: 40px; text-align: right; font-variant-numeric: tabular-nums; font-size: 16px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 8px; background: var(--bg-elev); color: var(--text);
}
.wo-mat-step input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.wo-mat-list li.is-used .wo-mat-step input { border-color: var(--primary); font-weight: 600; }
.wo-mat-list li.is-saving { opacity: .6; }
.wo-mat-help { margin: 10px 0 0; font-size: 12px; }
@media (max-width: 640px) {
    .wo-mat-list li { flex-wrap: nowrap; }
    .wo-mat-step .icon-btn { width: 44px; height: 44px; }
    .wo-mat-step input { height: 44px; width: 60px; }
}
.wo-site-list .badge { font-size: 11px; }
@media (max-width: 640px) {
    .wo-site-actions { flex-direction: column; }
    .wo-site-actions .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 16px; }
}
/* Ecrans Sorti du camion / Demande de materiel : une carte, les faits du
   bon en tete, le tableur, puis les boutons. */
.wo-page.wo-supply { max-width: 900px; }
.wo-supply-form { display: flex; flex-direction: column; gap: 14px; }
.wo-supply-facts { margin: 0; }
.wo-supply-note { margin: 0; font-size: 13px; }
.wo-supply-fields { align-items: end; }
.wo-supply-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 640px) {
    .wo-supply-actions { flex-direction: column-reverse; }
    .wo-supply-actions .btn { width: 100%; min-height: 52px; font-size: 16px; }
    .wo-supply-fields { grid-template-columns: 1fr; }
}
/* Materiel du chantier : une journee de consommation par bloc. */
.mat-day + .mat-day { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.mat-day h4 { margin: 0 0 8px; font-size: 14px; display: flex; gap: 8px; align-items: baseline; }
.punch-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.punch-edit { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.punch-edit input[type="time"] { width: 7.6rem; min-height: 40px; }
.punch-fold { margin-left: auto; }
.punch-fold > summary { list-style: none; cursor: pointer; }
.punch-fold > summary::-webkit-details-marker { display: none; }
.punch-fold[open] > summary { margin-bottom: 8px; }
.punch-add {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--border);
    margin-left: 0;
}
.punch-add > summary.btn {
    width: 100%; min-height: 44px; justify-content: center;
}
.punch-manual {
    display: flex; flex-direction: column; gap: 12px;
}
.punch-manual .form-row { grid-template-columns: 1fr 1fr; margin: 0; }
.punch-manual .form-group { margin: 0; }
.punch-manual .btn { min-height: 44px; }
.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.task-item {
    display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); min-height: 52px;
}
.task-item.is-past { opacity: .7; background: var(--bg-elev); }
.task-item.is-done .task-label { color: var(--text-muted); }
.task-item.is-partial .task-label { color: var(--text); }
.task-status {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
}
.task-status-form { margin: 0; min-width: 0; }
.task-status-btn {
    width: 100%; min-height: 40px; padding: 6px 8px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font: inherit; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elev); color: var(--text-muted); cursor: pointer;
}
.task-status-btn.is-on[data-status="open"] {
    background: var(--bg); color: var(--text); border-color: var(--text-muted);
}
.task-status-btn.is-on[data-status="in_progress"] {
    background: #fff8e6; color: #8a5a00; border-color: #e0b84a;
}
.task-status-btn.is-on[data-status="done"] {
    background: var(--success); color: #fff; border-color: var(--success);
}
.task-status-btn:disabled { cursor: default; }
.task-item.is-past .task-label { text-decoration: line-through; }
.task-label { flex: 1; font-weight: 500; padding-top: 4px; }
.task-item small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.task-check {
    width: 28px; min-width: 28px; height: 28px; padding: 0;
    display: grid; place-items: center;
    border: 2px solid var(--border); border-radius: 7px;
    background: var(--bg-elev); color: transparent; cursor: pointer;
}
.task-check .icon { width: 16px; height: 16px; }
button.task-check { font: inherit; }
span.task-check { cursor: default; }
.task-check.is-on {
    background: var(--success); border-color: var(--success); color: #fff;
}
.task-photos {
    flex: 1 1 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding-top: 4px;
}
.task-photos[hidden] { display: none; }
.task-photo {
    display: block; width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg-elev);
}
.task-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.task-photo-add { position: relative; }
.task-photo-add .btn { min-height: 44px; }
.task-photo-add input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.task-photo-add .uploader-list { display: none; }
.portal-task-photos {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0;
}
.portal-task-photos a {
    display: block; width: 96px; height: 96px; border-radius: 10px; overflow: hidden;
    border: 1px solid var(--border); background: var(--bg);
}
.portal-task-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portal-file-thumb {
    width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
    border: 1px solid var(--border); background: #fff; flex: none;
}
.invoice-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.invoice-lines th, .invoice-lines td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.invoice-lines th { color: var(--text-muted); font-weight: 600; font-size: 12px; }
.invoice-lines td:last-child, .invoice-lines th:last-child { text-align: right; white-space: nowrap; }
.invoice-line.is-title td { font-weight: 700; padding-top: 14px; border-bottom: 0; }
.invoice-line.is-blank td { border-bottom: 0; padding: 4px 8px; }
.invoice-line.is-subtotal td { font-weight: 600; font-style: italic; border-top: 1px solid var(--text-muted); border-bottom: 0; }
/* Pages de la facture : un bloc par onglet (nom en tete, lignes, total),
   separes par un espace franc, comme des feuilles agrafees. */
.invoice-page-block {
    margin: 18px 0 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-elev);
}
.invoice-page-block:first-of-type { margin-top: 8px; }
.invoice-page-head {
    display: flex; align-items: baseline; gap: 12px;
    padding: 10px 12px;
    background: var(--bg);
    border-bottom: 2px solid var(--primary);
}
.invoice-page-head h3 {
    margin: 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.invoice-page-no {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px;
}
.invoice-page-block .invoice-lines, .portal-note .invoice-page-block .invoice-lines { margin: 0; }
.invoice-page-block .invoice-lines td, .invoice-page-block .invoice-lines th { padding-left: 12px; padding-right: 12px; }
.invoice-line.is-page-total td {
    font-weight: 700; color: var(--text);
    background: var(--bg);
    border-top: 2px solid var(--border); border-bottom: 0;
    padding-top: 10px; padding-bottom: 10px;
}
.invoice-title {
    display: flex; align-items: center; gap: 12px;
    text-transform: uppercase; letter-spacing: .04em; font-size: 12px;
}
.invoice-title::before, .invoice-title::after { content: ''; flex: 1 1 auto; border-top: 1px solid var(--border); }

/* Tableur des lignes : grille dense, une cellule = un champ, style Acceo. */
.invoice-sheet-note { margin: 0 0 12px; }
.invoice-sheet-toolbar {
    display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
    margin: 0 0 12px;
}
.invoice-sheet-toolbar > .muted { flex: 1 1 280px; margin: 0; font-size: 12px; }
.invoice-sheet-rule { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.invoice-sheet-rule span { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.invoice-sheet-rule select,
.invoice-sheet-rule input { min-width: 160px; }
/* Inserer un bon : liste radio des bons du projet + parts a inserer. */
.invoice-wo-modal { width: min(620px, calc(100vw - 40px)); }
.invoice-wo-list {
    list-style: none; margin: 0 0 12px; padding: 0;
    max-height: min(46vh, 380px); overflow: auto;
    border: 1px solid var(--border); border-radius: var(--radius);
}
.invoice-wo-list li + li { border-top: 1px solid var(--border); }
.invoice-wo-row {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px;
    padding: 8px 12px; margin: 0; font-weight: 400; cursor: pointer;
}
.invoice-wo-row:hover { background: var(--bg); }
.invoice-wo-row:has(input:checked) { background: var(--primary-soft, var(--bg)); }
.invoice-wo-row:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: -2px; }
.invoice-wo-main { display: flex; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.invoice-wo-meta { font-size: 12px; white-space: nowrap; }
.invoice-wo-parts { display: grid; gap: 6px; }
@media (max-width: 720px) {
    .invoice-wo-row { grid-template-columns: auto 1fr; }
    .invoice-wo-meta { grid-column: 2; white-space: normal; }
}

.invoice-sheet-wrap {
    overflow: auto;
    max-height: calc(100vh - 280px);
    border: 1px solid var(--border);
    background: var(--bg-elev);
}
/* Volet Statistiques a droite du tableur (Materiel : pose contre facture).
   Le tableur garde sa largeur minimale et defile ; le volet reste colle en
   haut pendant qu'on descend dans les lignes. */
.invoice-sheet { position: relative; }
.invoice-sheet.is-split { padding-right: 436px; }
.sheet-split-panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 420px;
}
.sheet-split-panel > * { position: sticky; }
.sheet-split-head {
    top: 72px; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    background: var(--bg-elev); border: 1px solid var(--border); border-bottom: 0;
    border-radius: var(--radius) var(--radius) 0 0; font-size: 14px; z-index: 2;
}
.sheet-split-head strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-split-body {
    top: 118px; max-height: calc(100vh - 140px); overflow: auto;
    border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); background: var(--bg-elev);
}
.sheet-split-body .card { border: 0; box-shadow: none; margin: 0; border-radius: 0; }
.sheet-split-body .card-header h3 { font-size: 14px; }
.sheet-split-body .stats-table { font-size: 12px; }
.sheet-split-body .stats-table td, .sheet-split-body .stats-table th { padding: 5px 8px; }
.sheet-tool.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* Glisser un produit du volet vers le tableur. */
.sheet-split-body tr[draggable="true"] { cursor: grab; }
.sheet-split-body tr[draggable="true"]:active { cursor: grabbing; }
.sheet-split-body tr.is-dragging { opacity: .5; }
.invoice-sheet.is-drop-hover .invoice-sheet-wrap { outline: 2px dashed var(--primary); outline-offset: -2px; }
.invoice-sheet-grid tr.is-drop-before > td { box-shadow: inset 0 3px 0 var(--primary); }
@media (max-width: 1099px) {
    .invoice-sheet.is-split { padding-right: 0; }
    .sheet-split-panel { position: static; width: auto; margin-top: 14px; }
    .sheet-split-panel > * { position: static; }
    .sheet-split-body { max-height: 60vh; }
}

.invoice-sheet-grid {
    /* Toutes les colonnes ont une largeur fixe sauf Description, qui prend
       le reste : sur un grand ecran, c'est elle qui s'etire, pas UM ou Type. */
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    line-height: 1.25;
    color: var(--text);
    background: var(--bg-elev);
}
.invoice-sheet-grid th,
.invoice-sheet-grid td {
    border: 1px solid var(--border);
    padding: 0;
    background: var(--bg-elev);
    color: var(--text);
    vertical-align: middle;
}
.invoice-sheet-grid thead th {
    position: sticky; top: 0; z-index: 3;
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    padding: 5px 4px;
    white-space: nowrap;
}
.invoice-sheet-grid tfoot th {
    position: sticky; bottom: 0; z-index: 3;
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    padding: 5px 6px;
    border-top: 2px solid var(--border);
}
.invoice-sheet-grid .is-row {
    width: 32px; min-width: 32px; text-align: center;
    background: var(--bg); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.invoice-sheet-grid .is-code { width: 168px; min-width: 168px; }
.invoice-sheet-grid .is-label { width: auto; min-width: 220px; }
.invoice-sheet-grid .is-kind { width: 104px; }
.invoice-sheet-grid .is-unit { width: 64px; }
.invoice-sheet-grid .is-profit { width: 112px; }
.invoice-sheet-grid .is-num { width: 78px; min-width: 64px; }
.invoice-sheet-grid .is-row,
.invoice-sheet-grid thead th:first-child { width: 36px; min-width: 36px; }
.invoice-sheet-grid .is-src,
.invoice-sheet-grid .is-del { width: 28px; min-width: 28px; text-align: center; }
/* Retirer : la ligne part au clic (Ctrl+Z la ramene). */
.sheet-del {
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 4px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.sheet-del .icon { width: 14px; height: 14px; }
.sheet-del:hover, .sheet-del:focus-visible { background: var(--danger-soft); color: var(--danger); outline: none; }
/* Memo des raccourcis du tableur (F1). Deux colonnes de groupes, touches
   en <kbd> comme sur un clavier. */
.invoice-keys-modal { width: min(880px, calc(100vw - 40px)); }
.invoice-keys {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 6px 28px;
    max-height: 72vh; overflow: auto;
}
.invoice-keys-group { break-inside: avoid; }
.invoice-keys-group h4 {
    margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted);
}
.invoice-keys dl { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 4px 14px; margin: 0; align-items: baseline; }
.invoice-keys dt { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; white-space: nowrap; }
.invoice-keys dd { margin: 0; font-size: 13px; color: var(--text); }
.invoice-keys-plus { color: var(--text-muted); font-size: 11px; padding: 0 2px; }
.invoice-keys kbd {
    display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px;
    border: 1px solid var(--border); border-bottom-width: 2px; background: var(--bg);
    font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text);
    text-align: center;
}
/* Bouton qui se lit comme un lien dans une phrase. */
.link-btn {
    background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--primary);
    text-decoration: underline; cursor: pointer;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--primary-hover); outline: none; }
/* Historique des actions d'une page. */
.invoice-history-modal { width: min(640px, calc(100vw - 40px)); }
.invoice-history { list-style: none; margin: 12px 0 0; padding: 0; max-height: 60vh; overflow: auto; }
.invoice-history-item {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px; border-top: 1px solid var(--border);
}
.invoice-history-item:first-child { border-top: 0; }
.invoice-history-item.is-current { background: var(--primary-soft); border-radius: 6px; }
.invoice-history-item.is-undone { opacity: .6; }
.invoice-history-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.invoice-history-main strong { font-size: 13px; }
.invoice-history-main .muted { font-size: 12px; }
.invoice-history-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--primary); white-space: nowrap;
}
.invoice-history-item .btn { white-space: nowrap; }
.invoice-sheet-grid .is-src { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.invoice-sheet-grid .is-calc { background: var(--warning-soft); }
.invoice-sheet-grid td.is-off {
    background: repeating-linear-gradient(135deg, var(--bg) 0 3px, var(--bg-elev) 3px 7px);
}
/* Une case desactivee est le « fond » d'ou l'on trace le rectangle de
   selection : le navigateur avale la souris sur un champ disabled, on la
   laisse passer a la cellule. */
.invoice-sheet-grid td.is-off { cursor: crosshair; }
.invoice-sheet-grid td.is-off input:disabled,
.invoice-sheet-grid td.is-off select:disabled { pointer-events: none; opacity: 1; }
.invoice-sheet-grid td.is-src, .invoice-sheet-grid td.is-del { cursor: crosshair; }
/* Ligne titre : un filet traverse la rangee de part et d'autre du libelle,
   comme un separateur de section. */
.invoice-sheet-grid tr.is-title td { background: var(--bg); border-top: 2px solid var(--border); }
.invoice-sheet-grid tr.is-title td:not(.is-row):not(.is-label):not(.is-del) {
    background-image: linear-gradient(var(--text-muted), var(--text-muted));
    background-size: 100% 1px;
    background-position: center;
    background-repeat: no-repeat;
}
.invoice-sheet-grid tr.is-title .is-label input {
    font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: center;
}
.invoice-sheet-grid tr.is-title .is-src { color: transparent; }
.invoice-sheet-grid tr.is-title select { background: var(--bg); }
/* Ligne sous-total : la somme des postes au-dessus jusqu'au titre precedent.
   Seul le libelle se tape ; le cout et le prix sont calcules. */
.invoice-sheet-grid tr.is-subtotal td { background: var(--bg); border-top: 1px solid var(--text-muted); }
.invoice-sheet-grid tr.is-subtotal .is-label input { font-weight: 600; font-style: italic; text-align: right; }
.invoice-sheet-grid tr.is-subtotal input[data-sheet-cost],
.invoice-sheet-grid tr.is-subtotal input[data-sheet-amount] { font-weight: 700; background: var(--bg); }
.invoice-sheet-grid tr.is-subtotal .is-src { color: transparent; }
.invoice-sheet-grid tr.is-subtotal select { background: var(--bg); }
/* Ligne Ensemble : nom, quantite, unite ; cout et prix = la somme de son
   detail. La fleche de la colonne Code deroule / replie ce detail, dont les
   lignes sont en retrait et se corrigent comme les autres. */
.invoice-sheet-grid tr.is-kit td { background: var(--primary-soft); }
.invoice-sheet-grid tr.is-kit .is-label input { font-weight: 700; }
.invoice-sheet-grid tr.is-kit input[data-sheet-cost],
.invoice-sheet-grid tr.is-kit input[data-sheet-amount] { font-weight: 700; background: transparent; }
.invoice-sheet-grid tr.is-kit [data-picker] { display: none; }
.invoice-sheet-grid tr:not(.is-kit) .sheet-kit-head { display: none; }
/* Fleche du detail + nombre de sections, dans la colonne Code. */
.sheet-kit-head { display: inline-flex; align-items: center; gap: 4px; width: 100%; }
.invoice-sheet-grid input.sheet-kit-sections {
    flex: 1 1 40px; min-width: 40px; text-align: right; font-weight: 600;
}
.invoice-sheet-grid input.sheet-kit-sections::placeholder { font-weight: 400; }
.sheet-kit-sections-unit { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
/* Barre « longueur et sections » d'un ensemble (Ctrl+M), posee au-dessus
   de sa ligne dans la grille. */
.invoice-sheet-grid tr.sheet-ask-row td { padding: 6px 8px; background: var(--primary-soft); border-bottom: 2px solid var(--primary); }
.sheet-ask { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sheet-ask strong { font-size: 13px; }
.sheet-ask-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.invoice-sheet-grid tr.sheet-ask-row .sheet-ask-field input[type=text] {
    width: 90px; height: 30px; padding: 0 8px; text-align: right; font-weight: 600; font-size: 14px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text);
}
.invoice-sheet-grid tr.sheet-ask-row .sheet-ask-field input[type=text]:focus { outline: 2px solid var(--primary); outline-offset: 0; }
.sheet-ask .muted { font-size: 12px; }
.sheet-kit-toggle {
    width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-elev); color: var(--text); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
}
.sheet-kit-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.invoice-sheet-grid tr.is-kit:not(.is-collapsed) .sheet-kit-toggle svg { transform: rotate(90deg); }
.invoice-sheet-grid tr.is-kit .is-label { position: relative; }
.invoice-sheet-grid tr.is-kit.is-collapsed .is-label[data-kit-count]:not([data-kit-count="0"])::after {
    content: attr(data-kit-count) ' lignes'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--text-muted); pointer-events: none;
}
.invoice-sheet-grid tr.is-kit.is-collapsed .is-label[data-kit-count="1"]::after { content: '1 ligne'; }
.invoice-sheet-grid tr.is-nested td { background: color-mix(in srgb, var(--primary-soft) 40%, transparent); }
.invoice-sheet-grid tr.is-nested .is-row { color: var(--text-muted); font-size: 11px; }
.invoice-sheet-grid tr.is-nested .is-label input { padding-left: 22px; }
.invoice-sheet-grid tr.is-nested .is-label { position: relative; }
.invoice-sheet-grid tr.is-nested .is-label::before {
    content: ''; position: absolute; left: 9px; top: 0; bottom: 0; border-left: 2px solid var(--primary); opacity: .5;
}
/* Detail par section (boite, plaque, pose par prise) : double trait, il
   suit le nombre de sections et non la longueur. */
.invoice-sheet-grid tr.is-nested.is-per-section .is-label::before { border-left-style: double; border-left-width: 4px; }
.invoice-sheet-grid tr.is-nested.is-per-section .is-label input { padding-left: 26px; }
.invoice-sheet-grid input[type=text],
.invoice-sheet-grid input[type=search],
.invoice-sheet-grid select {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    box-shadow: none;
    padding: 3px 5px;
    font: inherit;
    height: 26px;
}
.invoice-sheet-grid td.is-num input { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-sheet-grid input:focus,
.invoice-sheet-grid select:focus {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: var(--bg-elev);
    color: var(--text);
    z-index: 1;
    position: relative;
}
.invoice-sheet-grid .is-calc input:focus {
    background: color-mix(in srgb, var(--warning) 22%, var(--bg-elev));
}
.invoice-sheet-grid td.is-code { overflow: visible; }
/* Selection de lignes : les numeros sont la poignee (clic, glisser, Maj,
   Ctrl) ; une rangee selectionnee se teinte et la barre apparait. */
.invoice-sheet-grid td.is-row { cursor: pointer; user-select: none; outline: none; }
.invoice-sheet-grid td.is-row:hover,
.invoice-sheet-grid td.is-row:focus-visible { background: var(--primary-soft); color: var(--primary); }
.invoice-sheet-grid tr.is-selected td { background: var(--primary-soft); }
.invoice-sheet-grid tr.is-selected td.is-row { background: var(--primary); color: #fff; }
.invoice-sheet-grid tr.is-selected td.is-calc { background: color-mix(in srgb, var(--warning-soft) 50%, var(--primary-soft)); }
.invoice-sheet-grid tr.is-selected td.is-off {
    background: repeating-linear-gradient(135deg, var(--primary-soft) 0 3px, var(--bg-elev) 3px 7px);
}
.invoice-sheet-grid tr.is-selected input:not(:focus),
.invoice-sheet-grid tr.is-selected select:not(:focus) { background: transparent; }
.sheet-rubber-band {
    position: fixed; z-index: 80; pointer-events: none;
    border: 1px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 2px;
}
body.is-rubber-band { user-select: none; cursor: crosshair; }
/* Deplacer au glisser : le numero d'une ligne selectionnee se prend ; les
   lignes tirees se montrent en transparence a l'endroit ou elles tomberont
   (apercu : les autres lignes descendent dessous), une etiquette suit le
   pointeur. */
.invoice-sheet-grid tr.is-selected td.is-row { cursor: grab; }
body.is-row-drag, body.is-row-drag .invoice-sheet-grid td.is-row { cursor: grabbing; user-select: none; }
.invoice-sheet-grid tr.is-drag-source td {
    opacity: .5;
    border-top: 1px dashed var(--primary);
    border-bottom: 1px dashed var(--primary);
}
.sheet-drag-badge {
    position: fixed; z-index: 90; pointer-events: none;
    padding: 4px 9px;
    border-radius: 6px;
    background: var(--primary); color: #fff;
    font-size: 12px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    white-space: nowrap;
}
/* Deuxieme barre (selection) : memes cadre, espacement et icones que la
   premiere (.invoice-sheet-actions), juste en dessous ; le compte et le
   total de la selection a gauche des outils. */
.invoice-sheet-selection { margin-top: 8px; }
.invoice-sheet-selection[hidden] { display: none; }
.invoice-sheet-selection-info { display: flex; align-items: baseline; gap: 10px; font-size: 13px; white-space: nowrap; }
.invoice-sheet-selection-info .muted { font-size: 12px; }
.invoice-sheet-selection .sheet-tool:disabled { opacity: .4; cursor: default; }
.sheet-tool.is-danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.invoice-sheet-selection-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; margin: 0; }
.invoice-sheet-selection-field > span { color: var(--text-muted); white-space: nowrap; }
.invoice-sheet-selection-field select,
.invoice-sheet-selection-field input { height: 30px; padding: 2px 6px; font-size: 12px; width: auto; min-width: 0; }
.invoice-sheet-selection-field input { width: 64px; text-align: right; }
@media (max-width: 720px) {
    .invoice-sheet-selection { justify-content: center; }
}
.invoice-sheet-grid .picker,
.invoice-sheet-grid .form-group { margin: 0; gap: 0; }
.invoice-sheet-grid .picker-wrap [data-picker-q] { padding-right: 22px; }
.invoice-sheet-grid .picker-clear {
    width: 18px; height: 18px; right: 2px; font-size: 14px;
}
.invoice-sheet-grid .picker-suggest { min-width: 280px; z-index: 20; }
.invoice-sheet-grid .check { margin: 0; justify-content: center; }

/* Tableur de materiel (ticket depuis un bon, sortie du camion) : la grille
   de facture reduite (photo, code, description, quantite, unite). */
.material-sheet { display: flex; flex-direction: column; gap: 10px; }
.material-sheet-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.material-sheet-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
.material-sheet-hint { font-size: 12px; }
.material-sheet-wrap {
    margin: 0; max-height: none; overflow: visible;
    border-radius: var(--radius);
}
/* Coins arrondis sur les cases, pas sur le cadre : le menu du code
   deborde du tableau. */
.material-sheet-grid { border-collapse: separate; border-spacing: 0; }
.material-sheet-grid thead th:first-child { border-top-left-radius: var(--radius); }
.material-sheet-grid thead th:last-child { border-top-right-radius: var(--radius); }
.material-sheet-grid tbody tr:last-child > td:first-child { border-bottom-left-radius: var(--radius); }
.material-sheet-grid tbody tr:last-child > td:last-child { border-bottom-right-radius: var(--radius); }
/* Grille plus proche d'une carte : filets horizontaux, coins du cadre,
   derniere rangee (celle ou l'on ajoute) teintee. */
.material-sheet-grid { font-size: 14px; line-height: 1.35; }
.material-sheet-grid th,
.material-sheet-grid td {
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.material-sheet-grid thead th {
    background: var(--bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
}
.material-sheet-grid thead th.is-num,
.material-sheet-grid thead th.is-photo,
.material-sheet-grid thead th.is-unit { text-align: center; }
.material-sheet-grid tbody td.is-row {
    background: transparent;
    padding: 8px 4px;
}
.material-sheet-grid tbody tr:last-child > td { border-bottom: 0; }
.material-sheet-grid tr.is-add > td { background: var(--primary-soft); }
.material-sheet-grid tr.is-add > td.is-row { color: var(--primary); font-weight: 700; }
.material-sheet-grid tr.is-add input { font-weight: 600; }
.material-sheet-grid .is-photo {
    width: 52px; min-width: 52px; text-align: center; padding: 4px 6px;
}
.material-sheet-grid .sheet-photo {
    width: 36px; height: 36px; object-fit: contain; display: block; margin: 0 auto;
    border-radius: 6px; background: #fff; border: 1px solid var(--border);
}
.material-sheet-grid .sheet-photo[hidden] { display: none; }
.material-sheet-grid input[type=text],
.material-sheet-grid input[type=search] {
    height: 36px; padding: 8px 10px;
}
.material-sheet-grid input:focus,
.material-sheet-grid input[type=search]:focus {
    background: var(--primary-soft);
}
/* Depot d'un produit glisse depuis le selecteur. */
.material-sheet.is-drop-hover .material-sheet-wrap { outline: 2px dashed var(--primary); outline-offset: -2px; border-radius: var(--radius); }
.material-sheet-grid tr.is-drop-before > td { box-shadow: inset 0 3px 0 var(--primary); }
.material-sheet-grid tr.is-drop-fill > td { background: var(--primary-soft); }
.pselect-item[draggable="true"] { cursor: grab; }
.pselect-item.is-dragging { opacity: .5; }
.material-sheet-grid { min-width: 0; width: 100%; }
.material-sheet-grid .is-code { width: 200px; min-width: 160px; }
.material-sheet-grid .is-label { min-width: 200px; }
.material-sheet-grid .is-num { width: 84px; min-width: 70px; }
.material-sheet-grid .is-unit { width: 72px; }
.material-sheet-count { margin: 0; font-size: 13px; }
/* Telephone : chaque ligne devient une carte. Numero a gauche, code et
   croix en haut, description en pleine largeur, quantite et unite dessous. */
@media (max-width: 640px) {
    .material-sheet-hint { display: none; }
    .material-sheet-wrap { overflow: visible; border: 0; }
    .material-sheet-grid, .material-sheet-grid tbody { display: block; }
    .material-sheet-grid thead { display: none; }
    .material-sheet-grid tr[data-sheet-row] {
        display: grid; grid-template-columns: 30px 1fr 1fr 34px; grid-template-rows: auto auto auto;
        gap: 4px 6px; padding: 8px 6px; margin-bottom: 8px;
        border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev);
    }
    .material-sheet-grid tr.is-add { background: var(--primary-soft); }
    .material-sheet-grid tr[data-sheet-row] td { display: block; border: 0; padding: 0; width: auto; min-width: 0; }
    .material-sheet-grid td.is-row { grid-column: 1; grid-row: 1; align-self: start; padding-top: 6px; text-align: center; }
    .material-sheet-grid td.is-photo { grid-column: 1; grid-row: 2; width: auto; min-width: 0; align-self: center; }
    .material-sheet-grid td.is-code { grid-column: 2 / span 2; grid-row: 1; }
    .material-sheet-grid td.is-del { grid-column: 4; grid-row: 1; }
    .material-sheet-grid td.is-label { grid-column: 2 / span 3; grid-row: 2; }
    .material-sheet-grid td.is-num { grid-column: 2; grid-row: 3; }
    .material-sheet-grid td.is-unit { grid-column: 3; grid-row: 3; }
    .material-sheet-grid input[type=text], .material-sheet-grid input[type=search] {
        height: 40px; font-size: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px;
    }
    .material-sheet-grid td.is-num input { text-align: left; }
    .material-sheet-grid .sheet-del { width: 34px; height: 40px; }
    .material-sheet-grid .picker-suggest { min-width: 0; left: 0; right: 0; }
}
/* Barre d'outils du tableur : centree sous la grille, boutons groupes, et
   l'ecart avec le montant de la facture a cote. */
.invoice-sheet-actions {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.invoice-sheet-tools { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px; }
.invoice-sheet-tools form { margin: 0; display: inline-flex; }
/* Soumission : numero Acceo + bouton, dans la barre d'outils. */
.sheet-acceo { align-items: center; gap: 2px; margin-left: 4px !important; }
.invoice-sheet-tools .sheet-acceo-number { width: 96px; height: 30px; padding: 0 8px; font-size: 12.5px; }

/* --- Suivi des imports Acceo --- */
.import-progress {
    position: relative; height: 8px; border-radius: 999px; overflow: hidden;
    background: var(--bg); border: 1px solid var(--border); min-width: 120px;
}
.import-progress.is-big { height: 18px; margin-bottom: 14px; }
.import-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--success); transition: width .6s ease; }
.import-progress-fail { position: absolute; right: 0; top: 0; bottom: 0; background: var(--danger); opacity: .7; transition: width .6s ease; }
.import-progress.is-live .import-progress-fill {
    background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.25) 50%, transparent 100%);
    background-size: 60px 100%; animation: import-shine 1.4s linear infinite;
}
@keyframes import-shine { from { background-position: -60px 0; } to { background-position: 260px 0; } }
.import-progress-cell { min-width: 180px; }
.import-progress-cell .import-progress { display: inline-block; width: 120px; vertical-align: middle; margin-right: 8px; }
.import-batches tr.is-active td:first-child { border-left: 3px solid var(--success); }
.import-batch-figures { display: flex; flex-wrap: wrap; gap: 18px 34px; margin-bottom: 10px; }
.import-batch-figures > div { display: flex; flex-direction: column; }
.import-batch-figures strong { font-size: 22px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.import-batch-figures .muted { font-size: 12px; }
.is-danger { color: var(--danger); }
.import-batch-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.import-batch-docs { margin: 4px 0 10px; }
.import-batch-docs .import-progress { height: 6px; margin-bottom: 6px; }
.import-progress-fill.is-docs { background: var(--primary); }
.import-batch-docs p { margin: 0; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.import-batch-docs p svg { width: 14px; height: 14px; flex: none; align-self: center; }
.import-failures li + li { margin-top: 10px; }
.import-failure-numbers { font-size: 12px; margin-top: 2px; word-break: break-word; }
.import-last li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; }

/* --- Soumissions --- */
.quote-actions { display: flex; flex-direction: column; gap: 12px; }
.quote-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; }
.quote-action .muted { font-size: 13px; }
.quote-action input[type=text] { width: 220px; }
/* Outils en icones seules ; le libelle est dans l'infobulle. */
.sheet-tool { width: 36px; height: 36px; color: var(--text); border: 1px solid transparent; }
.sheet-tool:hover { background: var(--bg-elev); border-color: var(--border); }
.sheet-tool.is-primary { color: var(--primary); }
.sheet-tool.is-primary:hover { background: var(--primary-soft); border-color: var(--primary); }
.sheet-tool .icon { width: 20px; height: 20px; }
.invoice-sheet-sep { width: 1px; align-self: stretch; min-height: 24px; background: var(--border); margin: 0 4px; }
/* L'ecart avec le montant de la facture : sa propre ligne sous la barre. */
.invoice-sheet-gap { margin: 8px 0 0; font-size: 13px; text-align: center; }
@media (max-width: 720px) {
    .invoice-sheet-sep { display: none; }
}
/* Pages de la facture : la barre d'onglets au bas du tableur, comme Excel.
   L'onglet ouvert est rattache a la grille ; les autres sont en retrait. */
.invoice-pages {
    display: flex; align-items: stretch; justify-content: space-between; gap: 12px;
    border: 1px solid var(--border); border-top: 0;
    background: var(--bg);
    padding: 0 8px 0 0;
    min-height: 36px;
    overflow: hidden;
}
.invoice-pages-tabs {
    display: flex; align-items: stretch; gap: 2px;
    padding: 4px 6px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}
.invoice-page-tab {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 12px;
    min-height: 30px;
    border: 1px solid var(--border); border-bottom: 0;
    border-radius: 0 0 6px 6px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 13px; font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.invoice-page-tab:hover { color: var(--text); background: var(--bg-elev); }
.invoice-page-tab.is-active {
    background: var(--bg-elev);
    color: var(--text);
    border-color: var(--primary);
    border-top: 0;
    margin-top: -1px;
    padding-right: 4px;
    cursor: default;
}
.invoice-page-rename { margin: 0; display: inline-flex; }
.invoice-page-tab [data-sheet-page-name] {
    border: 0; background: transparent; padding: 0; margin: 0;
    height: auto; min-height: 0;
    font: inherit; color: inherit;
    width: 12ch; min-width: 6ch;
    cursor: default;
}
.invoice-page-tab [data-sheet-page-name]:not([readonly]) {
    background: var(--primary-soft); border-radius: 3px; padding: 0 4px; cursor: text;
    outline: 1px solid var(--primary);
}
.invoice-page-tools { display: inline-flex; align-items: center; gap: 0; }
.invoice-page-tools form, .invoice-page-add { margin: 0; display: inline-flex; align-items: center; }
.invoice-page-tool {
    border: 0; background: transparent; color: var(--text-muted);
    width: 24px; height: 24px; line-height: 1;
    border-radius: 4px; cursor: pointer; font-size: 16px;
    display: inline-flex; align-items: center; justify-content: center;
}
.invoice-page-tool:hover { background: var(--primary-soft); color: var(--text); }
.invoice-page-tool.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.invoice-page-add { padding: 4px 2px 0; }
/* Pages supprimees : bouton a cote du +, la liste s'ouvre en modale (la
   barre d'onglets coupe ce qui deborde). */
.invoice-pages-trash { width: auto; padding: 0 6px; gap: 3px; font-size: 13px; align-self: center; margin-top: 4px; }
.invoice-pages-trash svg { width: 14px; height: 14px; }
.invoice-pages-trash-count { font-size: 11px; font-weight: 600; }
.invoice-history-item form { margin: 0; }
.invoice-pages-total {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; white-space: nowrap;
    padding: 4px 4px 4px 12px;
}
.invoice-pages-total strong { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
    .invoice-pages { flex-wrap: wrap; padding-right: 0; }
    .invoice-pages-total { width: 100%; justify-content: flex-end; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
    .invoice-sheet-grid input[type=text],
    .invoice-sheet-grid input[type=search],
    .invoice-sheet-grid select { height: 36px; font-size: 16px; }
    .invoice-sheet-wrap { max-height: calc(100vh - 220px); }
    /* Le tableur de materiel n'a pas de defilement interne : la page defile. */
    .material-sheet-wrap { max-height: none; }
}
/* --- Calculatrice integree (double Entree sur une case de nombre) --- */
.calc-pop {
    position: fixed; z-index: 1200; width: 232px; padding: 8px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, .25));
}
.calc-pop .calc-expr {
    width: 100%; height: 34px; padding: 0 8px; font-size: 15px; text-align: right;
    font-variant-numeric: tabular-nums; border-radius: var(--radius-sm);
}
.calc-pop .calc-out {
    min-height: 20px; margin: 4px 2px 6px; text-align: right; font-size: 14px; font-weight: 600;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.calc-pop .calc-out.is-bad { color: var(--danger); }
.calc-pop .calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.calc-pop .calc-key {
    height: 34px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--text); font: inherit; font-size: 15px; cursor: pointer;
}
.calc-pop .calc-key:hover { filter: brightness(.95); }
.calc-pop .calc-key.is-op { color: var(--primary); font-weight: 700; }
.calc-pop .calc-key.is-edit { color: var(--text-muted); }
.calc-pop .calc-key.is-eq { grid-column: 3 / span 2; background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.calc-pop .calc-hint { margin: 6px 2px 0; font-size: 11px; color: var(--text-muted); }

/* ---------- Selecteur de produits universel (Gelinapp.productSelect) ---------- */
.pselect-overlay { z-index: 1150; }
.pselect-modal {
    width: min(1040px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 32px));
    max-height: none;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.pselect { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pselect-page {
    flex: 1 1 auto; min-height: 0;
    height: calc(100vh - 150px);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev);
}
.pselect-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.pselect-head .pselect-q {
    flex: 1 1 auto; min-width: 0;
    height: 42px; font-size: 16px; padding: 0 12px;
}
.pselect-page-link { white-space: nowrap; }
.pselect-context { margin: 0; padding: 8px 14px 0; font-size: 13px; }
.pselect-body {
    flex: 1 1 auto; min-height: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 34%);
}
.pselect-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.pselect-tabs {
    display: flex; gap: 2px; padding: 8px 10px 0;
    border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
.pselect-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    padding: 8px 14px; margin-bottom: -1px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--text-muted); border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
}
.pselect-tab:hover { color: var(--text); background: var(--bg); }
.pselect-tab.is-active { color: var(--primary); border-bottom-color: var(--primary); }
.pselect-results { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px 10px 12px; }
.pselect-none-go { margin-left: 4px; vertical-align: baseline; }
.pselect-section { margin-bottom: 10px; }
.pselect-section h4 {
    margin: 8px 4px 4px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.pselect-item {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main qty" "sub qty";
    align-items: center; column-gap: 10px; row-gap: 2px;
    width: 100%; padding: 8px 10px; margin: 0 0 2px;
    border: 1px solid transparent; border-radius: var(--radius-sm);
    background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.pselect-item:hover { background: var(--bg); }
.pselect-item.is-active { background: var(--bg); border-color: var(--primary); }
.pselect-item.is-picked { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.pselect-item.is-kit { border-left: 3px solid var(--warning); }
.pselect-item.is-companion { border-left: 3px solid var(--success); }
.pselect-item-main {
    grid-area: main; display: flex; gap: 8px; align-items: baseline; min-width: 0;
    font-size: 14px;
}
.pselect-item-main strong { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.pselect-item-main span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pselect-item-sub {
    grid-area: sub; font-size: 12px; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pselect-item-qty {
    grid-area: qty; min-width: 34px; padding: 3px 8px; text-align: center;
    border-radius: 999px; font-size: 13px; font-weight: 700;
    background: var(--bg); color: var(--text-muted);
}
.pselect-item.is-picked .pselect-item-qty { background: var(--primary); color: #fff; }
/* Vignette produit : colonne a gauche du code et de la description. */
.pselect-item.has-thumb {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas: "thumb main qty" "thumb sub qty";
}
.pselect-item-thumb {
    grid-area: thumb; width: 40px; height: 40px; object-fit: contain;
    border-radius: 6px; background: #fff; border: 1px solid var(--border);
}

/* --- Image produit (fiche, liste, cartes) --- */
.product-photo {
    flex: none; width: 96px; height: 96px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #fff; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.product-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-photo.is-empty { color: var(--text-muted); background: var(--bg); position: relative; }
.product-photo.is-empty label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    width: 100%; height: 100%; cursor: pointer; font-size: 12px;
}
.product-photo.is-empty label:hover { color: var(--primary); }
.product-photo.is-empty input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.product-photo.is-empty svg { width: 22px; height: 22px; }
.product-photo.is-empty .uploader-list { display: none; }
.product-header .page-header-lead { align-items: center; }
.product-thumb-cell { width: 48px; padding-right: 0 !important; }
.product-thumb, .product-file-thumb {
    width: 40px; height: 40px; object-fit: contain; display: block;
    border-radius: 6px; background: #fff; border: 1px solid var(--border);
}
.product-files li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; }
.product-files .inline-form { margin: 0; }
.magasin-card.has-photo { display: grid; grid-template-columns: 88px minmax(0, 1fr); }
.magasin-card.has-photo .magasin-card-photo {
    grid-row: 1 / span 3; display: flex; align-items: center; justify-content: center;
    padding: 10px 0 10px 10px;
}
.magasin-card.has-photo .magasin-card-photo img {
    width: 78px; height: 78px; object-fit: contain; border-radius: 8px;
    background: #fff; border: 1px solid var(--border);
}
@media (max-width: 640px) {
    .product-photo { width: 72px; height: 72px; }
}
.pselect-none { margin: 20px 10px; font-size: 14px; }
/* Ensemble a la longueur : la barre qui demande combien, au-dessus des resultats. */
.pselect-ask {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin: 8px 10px; padding: 8px 10px;
    background: var(--primary-soft); border-radius: var(--radius-sm);
}
.pselect-ask label { font-size: 13px; font-weight: 600; flex: 1 1 200px; }
.pselect-ask-title { flex: 1 1 100%; }
.pselect-ask-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.pselect-ask-field input { color: var(--text); }
.pselect-ask input { width: 90px; height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); text-align: right; font-size: 15px; }
/* Un mot ecarte pour trouver quelque chose : dit avant la liste. */
.pselect-note {
    margin: 8px 10px 2px; padding: 6px 10px; font-size: 12px;
    background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-sm);
}
.pselect-cart {
    min-height: 0; display: flex; flex-direction: column;
    border-left: 1px solid var(--border); background: var(--bg);
}
.pselect-cart-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.pselect-count {
    min-width: 22px; padding: 1px 7px; border-radius: 999px; text-align: center;
    font-size: 12px; font-weight: 700; background: var(--primary); color: #fff;
}
.pselect-cart-back { display: none; margin-left: auto; }
.pselect-cart-list { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; padding: 6px 8px; list-style: none; }
.pselect-cart-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 62px 52px 26px;
    align-items: center; gap: 6px;
    padding: 6px 4px; border-bottom: 1px solid var(--border);
}
.pselect-cart-main { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.pselect-cart-main strong { font-size: 12px; font-variant-numeric: tabular-nums; }
.pselect-cart-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pselect-cart-qty, .pselect-cart-unit {
    height: 30px; padding: 0 6px; font-size: 13px; text-align: right;
}
.pselect-cart-unit { text-align: center; text-transform: uppercase; }
.pselect-cart-x {
    width: 26px; height: 26px; border: 0; border-radius: 999px;
    background: none; color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.pselect-cart-x:hover { background: var(--bg-elev); color: var(--danger); }
/* Section d'un ensemble dans la selection : en-tete, puis ses produits en retrait. */
.pselect-cart-group {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 26px;
    align-items: center; gap: 6px;
    margin-top: 6px; padding: 6px 4px;
    background: var(--primary-soft); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 1px solid var(--border);
}
.pselect-cart-group .pselect-cart-main span { font-weight: 600; }
.pselect-cart-group-qty { font-size: 12px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pselect-cart-item.is-grouped { padding-left: 14px; border-left: 3px solid var(--primary-soft); }
.pselect-cart-empty { margin: 14px 12px; font-size: 13px; }
.pselect-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg);
}
.pselect-hint { flex: 1 1 auto; font-size: 12px; }
.pselect-cart-toggle { display: none; }

/* Grand ecran : le selecteur s'ancre a droite et reste visible pendant
   qu'on travaille dans la page (l'appli se pousse a gauche). Resultats en
   haut, selection en bas. */
html.pselect-docked { --pselect-dock-w: 560px; }
html.pselect-docked .layout { padding-right: var(--pselect-dock-w); }
.pselect-overlay.is-docked {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: var(--pselect-dock-w, 560px); z-index: 1150;
    display: block; padding: 0; background: var(--bg-elev);
    border-left: 1px solid var(--border); box-shadow: var(--shadow-lg);
}
.pselect-overlay.is-docked[hidden] { display: none; }
.pselect-overlay.is-docked .pselect-modal {
    width: 100%; height: 100%; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
}
.pselect-overlay.is-docked .pselect-body { display: flex; flex-direction: column; }
.pselect-overlay.is-docked .pselect-pane { flex: 1 1 58%; }
.pselect-overlay.is-docked .pselect-cart {
    flex: 0 1 42%; min-height: 140px;
    border-left: 0; border-top: 1px solid var(--border);
}
.pselect-overlay.is-docked .pselect-hint { display: none; }
.pselect-overlay.is-docked .pselect-page-link { display: none; }

@media (max-width: 720px) {
    .pselect-overlay { padding: 0; }
    .pselect-modal {
        width: 100%; height: 100%; max-height: none;
        border-radius: 0; border: 0;
    }
    .pselect-page { height: calc(100vh - 120px); }
    .pselect-head { padding: 10px; }
    .pselect-head .pselect-q { height: 44px; }
    .pselect-page-link { display: none; }
    .pselect-body { grid-template-columns: minmax(0, 1fr); }
    .pselect-item { padding: 12px 10px; min-height: 56px; }
    .pselect-cart { display: none; border-left: 0; }
    .pselect.is-cart-open .pselect-pane { display: none; }
    .pselect.is-cart-open .pselect-cart { display: flex; }
    .pselect-cart-back { display: inline-flex; }
    .pselect-cart-item { grid-template-columns: minmax(0, 1fr) 70px 56px 32px; padding: 10px 4px; }
    .pselect-cart-qty, .pselect-cart-unit { height: 40px; font-size: 16px; }
    .pselect-cart-x { width: 32px; height: 32px; }
    .pselect-hint { display: none; }
    .pselect-cart-toggle { display: inline-flex; }
    .pselect-foot { position: sticky; bottom: 0; }
    .pselect-foot .btn { flex: 1 1 0; min-height: 44px; }
}

/* Ensembles de produits */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.kit-card.is-inactive { opacity: .6; }
.kit-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.kit-card-head h3 { margin: 0 0 2px; font-size: 16px; }
.kit-card-head h3 a { color: inherit; }
.kit-card-head p { margin: 0; }
.kit-code {
    display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px;
    background: var(--bg); font-size: 12px; font-variant-numeric: tabular-nums;
}
.kit-desc { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); }
.kit-items { margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; }
.kit-items li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border); }
.kit-items li a { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-qty { flex: none; min-width: 64px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kit-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.kit-form-head h3 { margin: 0; font-size: 15px; }
.kit-items-table td.is-num input { width: 90px; text-align: right; }
.kit-items-table td input[list] { width: 90px; text-transform: uppercase; }
.kit-items-table td.is-actions { width: 40px; text-align: right; }
/* Regle a l'echelle : « 2 U par 1,5 M », et la case Fixe. */
.kit-items-table .kit-per { white-space: nowrap; }
.kit-per-fields { display: inline-flex; gap: 4px; align-items: center; }
.kit-per-fields input:first-child { width: 64px; text-align: right; }
.kit-items-table .kit-fixed { width: 44px; text-align: center; }
.kit-items-table th.kit-per, .kit-items-table th.kit-fixed { cursor: help; }
.kit-empty { margin: 8px 0 0; }

.invoice-files { display: flex; flex-direction: column; gap: 8px; }
.form-card.is-drop-active,
.invoice-files.is-drop-active,
tr[data-scan-invoice].is-drop-active td {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.invoice-file {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg);
}
.invoice-file a {
    display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit;
}
.invoice-file a:hover { text-decoration: none; }
.invoice-file img {
    width: 44px; height: 44px; object-fit: cover; border-radius: 6px; flex: none;
}
.invoice-file span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-file small { color: var(--text-muted); font-size: 12px; }
.invoice-file-pick { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.invoice-file.is-pick { background: var(--bg); }
.invoice-file.is-suggested { border-color: var(--primary); }
.invoice-file-add { position: relative; }
.invoice-file-add input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.invoice-file-add .uploader-list { display: none; }
/* Depot sur une fiche du magasin (bon, demande de prix, ticket, produit). */
.magasin-file-add { position: relative; display: inline-block; margin: 4px 0 8px; }
.magasin-file-add input[type=file] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 0;
}
.magasin-file-add .uploader-list { display: none; }
.wo-soon { opacity: .45; filter: grayscale(.4); pointer-events: none; }
.wo-soon-tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.wo-approve .btn { min-height: 48px; width: 100%; }
.wo-sign-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wo-sign-actions .btn { min-height: 44px; }
.wo-sms-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.wo-sms-list .btn {
    width: 100%; min-height: 48px;
    justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.wo-sms-list .muted { font-weight: 400; font-size: 13px; }
.wo-sms-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wo-sms-skip { margin: 0; padding: 10px 12px; }
.wo-sign {
    margin: 0;
    padding: 16px 18px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}
.wo-sign img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 160px;
    object-fit: contain;
    background: #fff;
}
.wo-sign figcaption {
    margin: 8px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
}
.wo-list { display: flex; flex-direction: column; gap: 10px; }
.wo-list-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev); box-shadow: var(--shadow);
    text-decoration: none; color: inherit;
}
.wo-list-item:hover { border-color: var(--primary); text-decoration: none; color: inherit; }
.wo-list-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wo-list-item strong { font-size: 16px; }
.day-page { max-width: 560px; }
.day-nav {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
    margin: 0 0 16px;
}
.day-nav .btn { min-height: 48px; justify-content: center; }
.day-when { margin: -6px 0 14px; font-weight: 600; }
.day-list { display: flex; flex-direction: column; gap: 12px; }
.day-card {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev); box-shadow: var(--shadow); overflow: hidden;
}
.day-card-main {
    display: flex; flex-direction: column; gap: 4px;
    padding: 16px; min-height: 92px;
    text-decoration: none; color: inherit;
}
.day-card-main:hover { text-decoration: none; color: inherit; background: var(--bg); }
.day-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.day-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-end; }
.day-card-name { font-size: 17px; font-weight: 600; }
.day-card-addr { font-size: 15px; }
.day-card .punch-row { padding: 0 12px 12px; }
.day-empty { padding: 22px 18px; }
.sign-pad-wrap { position: relative; background: #fff; border-radius: var(--radius); }
.sign-cam-start {
    position: absolute; inset: 0; z-index: 2;
    border: 0; border-radius: inherit;
    background: rgba(15, 23, 42, .9);
    color: #fff; font-weight: 700; font-size: 16px;
    cursor: pointer;
}
.sign-cam-start[hidden] { display: none; }
.sign-cam-src {
    position: fixed; left: 0; bottom: 0;
    width: 176px; height: 132px;
    opacity: .04; pointer-events: none; z-index: 0;
}
.sign-pad {
    display: block; width: 100%; height: 280px;
    border: 2px dashed #cbd5e1; border-radius: var(--radius);
    background: #fff; touch-action: none;
}
.sign-hint {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #64748b; font-size: 14px; pointer-events: none;
}
.sign-pad-wrap.is-dirty .sign-hint { display: none; }
.rec-pill {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--danger); color: #fff;
    font-size: 12px; font-weight: 700;
}
.rec-pill[hidden] { display: none; }
.rec-pill::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.sign-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.cam-note {
    margin: 12px 0 0; padding: 10px 12px;
    border-left: 4px solid var(--danger);
    background: var(--danger-soft);
    border-radius: var(--radius-sm); font-size: 13px;
}
.wo-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.period-wo-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.period-wo-list li {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 13px;
}
.period-wo-list .badge { margin-left: auto; }
.period-invoices { margin-top: 16px; }
.wo-check {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg);
}
.wo-check input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.wo-check strong { display: block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.wo-check small { display: block; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.wo-check.is-off { opacity: .7; background: var(--bg-elev); }
.wo-check.is-off input { cursor: not-allowed; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plain-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inline-form { display: inline; }
.client-body { min-height: 100vh; background: #f2f2f2; color: var(--text); }
.client-wrap {
    display: grid; place-items: center;
    padding: 28px 16px 48px; min-height: 100vh;
    background: #0a0a0a;
    background: radial-gradient(ellipse at 50% -20%, #3a1014 0%, #0a0a0a 58%);
}
.portal-otp {
    font-size: 26px; letter-spacing: .35em; text-align: center;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    padding: 12px 10px;
}
.portal-topbar {
    position: sticky; top: 0; z-index: 8;
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 10px 20px;
    background: var(--brand-ink); color: #f2f2f2;
    border-bottom: 2px solid var(--brand);
}
.portal-brand {
    display: flex; align-items: center; gap: 10px;
    color: inherit; text-decoration: none; min-width: 0;
}
.portal-brand:hover { text-decoration: none; color: #fff; }
.portal-logo {
    width: 36px; height: 36px; border-radius: 6px; flex: none;
    display: block; object-fit: cover; background: #0a0a0a;
}
.portal-brand strong, .portal-brand span { display: block; line-height: 1.2; }
.portal-brand strong { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.portal-brand span { font-size: 11px; color: #b3b3b3; text-transform: uppercase; letter-spacing: .06em; }
.portal-topbar-end { display: flex; align-items: center; gap: 12px; flex: none; }
.portal-who { font-size: 13px; color: #c4c4c4; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-quit {
    background: transparent; color: #f2f2f2; border-color: #3a3a3a;
}
.portal-quit:hover { background: #1a1a1a; color: #fff; border-color: #555; }
.portal-main { max-width: 760px; margin: 0 auto; padding: 24px 20px 64px; }
.portal-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0 0 16px; font-weight: 600; font-size: 13px; color: var(--text);
}
.portal-back:hover { text-decoration: none; color: var(--primary); }
.portal-hero { margin-bottom: 22px; }
.portal-hero h1 { margin: 4px 0 8px; font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700; }
.portal-hero p { margin: 0; font-size: 14px; }
.portal-kicker {
    margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--brand);
}
.portal-hero-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.portal-map { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 13px; }
.portal-stack { display: flex; flex-direction: column; gap: 0; }
.portal-card, .portal-row, .portal-panel, .portal-empty {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius);
}
.portal-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 16px; color: inherit; text-decoration: none;
}
a.portal-card:hover, a.portal-row:hover { text-decoration: none; }
.portal-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.portal-card-title { font-size: 16px; }
.portal-card-foot { margin-top: 4px; font-size: 13px; font-weight: 600; }
.portal-mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }
.portal-panel { padding: 0; margin-bottom: 14px; overflow: hidden; }
.portal-panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.portal-panel-head h2 {
    margin: 0; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.portal-panel > .muted,
.portal-panel > p {
    margin: 0;
    padding: 14px 16px;
}
.portal-panel .portal-stack { gap: 0; }
.portal-past > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    list-style: none; cursor: pointer; font-weight: 700; font-size: 11px;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
    min-height: 44px; padding: 12px 16px;
}
.portal-past > summary::-webkit-details-marker { display: none; }
.portal-past > summary::after {
    content: ''; width: 8px; height: 8px; flex: none;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg); margin-top: -4px;
}
.portal-past[open] > summary { border-bottom: 1px solid var(--border); }
.portal-past[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.portal-panel.is-alert { border-color: #e4c48a; }
.portal-panel.is-alert .portal-panel-head { background: #fffbeb; }
.portal-empty { padding: 20px 16px; color: var(--text-muted); font-size: 14px; }
.portal-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; min-height: 56px; color: inherit; text-decoration: none;
    border: 0; border-top: 1px solid var(--border); border-radius: 0;
    background: transparent;
}
.portal-panel .portal-row:first-child,
.portal-stack .portal-row:first-child { border-top: 0; }
a.portal-row:hover { background: #fafafa; }
.portal-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.portal-row-title { font-weight: 600; font-size: 14px; }
.portal-row-meta { font-size: 13px; color: var(--text-muted); }
.portal-row-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.portal-row-aside strong { font-variant-numeric: tabular-nums; }
.portal-row.is-warn { background: #fffbeb; }
.portal-bar {
    height: 6px; border-radius: 0; background: var(--border); overflow: hidden;
    margin: 0 16px 12px;
}
.portal-bar span { display: block; height: 100%; background: var(--primary); }
.portal-bar-label { margin: 0; padding: 0 16px 14px; font-size: 13px; }
.portal-tasks {
    list-style: none; margin: 0; padding: 12px 16px 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.portal-tasks li { display: flex; align-items: flex-start; gap: 10px; }
.portal-punches { list-style: none; margin: 0; padding: 4px 16px 16px; display: flex; flex-direction: column; }
.portal-punches li {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.portal-punches li:last-child { border-bottom: 0; padding-bottom: 0; }
.portal-sign-img {
    display: block; width: calc(100% - 32px); max-height: 160px; object-fit: contain;
    margin: 0 16px 16px; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius);
}
.portal-panel form { padding: 0 16px 16px; }
.portal-totals { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; }
.portal-total-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-size: 14px;
}
.portal-total-row.is-sum {
    padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 18px;
}
.portal-dl { margin: 0; padding: 14px 16px; display: grid; gap: 10px; }
.portal-dl div { display: flex; justify-content: space-between; gap: 12px; }
.portal-dl dt { color: var(--text-muted); }
.portal-dl dd { margin: 0; font-weight: 600; }
.portal-note { margin: 0 16px 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.portal-note h2 {
    margin: 0 0 8px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}
.portal-note p { margin: 0; }
.portal-note .invoice-lines { margin-top: 8px; }
.portal-preview { display: flex; flex-direction: column; overflow: hidden; }
.portal-pdf {
    overflow: auto; height: 420px; background: #d8d8d8; padding: 12px 10px 18px;
}
.portal-pdf-wait { margin: 16px; }
.portal-pdf-pages { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.portal-pdf-page {
    display: block; width: 100%; height: auto;
    background: #fff; box-shadow: 0 2px 10px rgba(15, 23, 42, .16);
}
.portal-preview-img {
    display: block; width: 100%; max-height: 420px; object-fit: contain; background: #0b1220;
}
.portal-pay-hint { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--text-muted); }
.portal-pay-frame {
    display: block; width: 100%; min-height: 480px; border: 0; background: #fff;
}
.portal-pay-frame[hidden] { display: none; }
.portal-pay-msg { margin: 0; padding: 12px 16px 16px; font-size: 13px; }
.portal-cols { display: flex; flex-direction: column; gap: 0; }
.portal-cols-primary { min-width: 0; }
.portal-cols:not(:has(.portal-cols-aside > *)) .portal-cols-aside { display: none; }
@media (min-width: 960px) {
    .content { max-width: 1360px; padding: 28px 32px; }
    .page-header h2 { font-size: 24px; }
    .topbar { padding: 14px 28px; }
    .portal-topbar {
        padding: 12px 32px;
        padding-left: max(32px, env(safe-area-inset-left));
        padding-right: max(32px, env(safe-area-inset-right));
    }
    .portal-who { max-width: 280px; }
    .portal-main { max-width: 1100px; padding: 32px 32px 80px; }
    .portal-hero { margin-bottom: 28px; }
    .portal-hero h1 { font-size: 28px; }
    .portal-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 20px;
        align-items: start;
    }
    .portal-cols:not(:has(.portal-cols-aside > *)) { grid-template-columns: 1fr; }
    .portal-main:has(.portal-cols:not(:has(.portal-cols-aside > *))) { max-width: 760px; }
    .portal-cols-aside { grid-column: 2; position: sticky; top: 72px; }
    .portal-pdf, .portal-preview-img { height: min(72vh, 740px); max-height: min(72vh, 740px); }
    .portal-projects {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 12px;
    }
    .portal-projects .portal-row {
        border: 1px solid var(--border);
        border-radius: var(--radius);
        min-height: 92px;
        align-items: flex-start;
    }
    .auth-card { max-width: 420px; padding: 36px 32px; }
    .client-wrap { padding: 48px 24px 64px; }
    .form-card { max-width: 920px; }
    .detail-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 720px) {
    .planner-body { flex-direction: column; }
    .planner-side { width: 100%; flex: 0 0 auto; max-height: 280px; }
    .wo-page { max-width: none; }
    .day-page { max-width: none; }
    .day-nav .btn { min-height: 52px; }
    .wo-step { font-size: 11px; }
    .punch-row .btn { min-height: 56px; }
    .wo-approve {
        position: sticky; bottom: 0; z-index: 2;
        margin-bottom: 0; border-radius: var(--radius) var(--radius) 0 0;
    }
    .sign-pad { height: 280px; }
    .sign-actions {
        position: sticky; bottom: 0; z-index: 2;
        display: flex; flex-direction: column; gap: 8px;
        background: var(--bg); padding: 12px 0 max(4px, env(safe-area-inset-bottom));
    }
    .sign-actions .btn { width: 100%; min-height: 48px; }
    .portal-topbar {
        padding: 10px 14px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-top: max(10px, env(safe-area-inset-top));
    }
    .portal-who { display: none; }
    .portal-brand > span > span { display: none; }
    .portal-main {
        padding: 18px 14px 48px;
        padding-left: max(14px, env(safe-area-inset-left));
        padding-right: max(14px, env(safe-area-inset-right));
        padding-bottom: max(48px, env(safe-area-inset-bottom));
    }
    .portal-hero { margin-bottom: 16px; }
    .portal-hero h1 { font-size: 20px; }
    .portal-row { min-height: 60px; }
    .portal-row .btn { min-height: 40px; }
    .portal-stat { min-height: 72px; }
    .portal-cols { display: flex; flex-direction: column; }
    .portal-otp { font-size: 22px; letter-spacing: .18em; }
    input, select, textarea { font-size: 16px; }
    .auth-body, .client-wrap {
        padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
            max(28px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    }
    .auth-card { width: min(100%, 420px); padding: 22px 16px; }
    .page-header { flex-wrap: wrap; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; }
    .topbar {
        padding-top: max(10px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    .content {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}

/* Tableau des statuts (meme pipeline que le site Firestore) */
.sb-board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Hero clair par defaut ; le mode sombre reprend le bandeau brand-ink. */
.sb-hero {
    flex: none;
    padding: 16px 20px 12px;
    background: var(--bg-elev);
    border-bottom: 2px solid var(--brand);
    color: var(--text);
}
.sb-hero-title { margin: 0; font-size: 22px; font-weight: 800; color: var(--text); }
.sb-hero-sub { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.sb-hero-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.sb-hero-brand { min-width: 0; flex: 1 1 220px; }
.sb-hero-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.sb-hero-stat {
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    padding: 8px 12px; min-width: 72px;
    display: block; text-decoration: none; cursor: pointer;
    transition: border-color .12s, box-shadow .12s, background .12s;
}
a.sb-hero-stat:hover { border-color: var(--primary); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
a.sb-hero-stat.is-selected {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 1px var(--primary);
    background: var(--bg-elev);
}
.sb-hero-stat-value { font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--text); }
.sb-hero-stat-label { font-size: 11px; opacity: .8; margin-top: 2px; color: var(--text-muted); }
.sb-hero-stat.is-urgent .sb-hero-stat-value { color: var(--warning); }
.sb-hero-stat.is-overdue .sb-hero-stat-value { color: var(--danger); }
.sb-hero-stat.is-unread .sb-hero-stat-value { color: var(--info); }
.sb-hero-select {
    width: auto; min-width: 140px; height: 38px; padding: 0 10px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-elev); color: var(--text); font: inherit; font-size: 13px;
}
.sb-hero-select option { color: var(--text); background: var(--bg-elev); }
.sb-hero-filter {
    background: var(--bg); border-color: var(--border); color: var(--text);
}
.sb-hero-filter:hover { background: var(--border); color: var(--text); }
.sb-view-toggle {
    display: flex; margin-left: auto;
    background: var(--bg); padding: 3px; border-radius: 8px;
}
.sb-view-toggle a {
    padding: 6px 10px; border-radius: 6px; color: var(--text-muted);
    font-size: 13px; font-weight: 600; text-decoration: none;
}
.sb-view-toggle a:hover { background: var(--border); text-decoration: none; color: var(--text); }
.sb-view-toggle a.is-active { background: var(--brand-ink); color: #fff; }
.sb-hero-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.sb-search {
    position: relative; flex: 1 1 240px; max-width: 420px;
}
.sb-search-ic {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.sb-search-ic .icon { width: 16px; height: 16px; display: block; }
.sb-search input {
    width: 100%; height: 38px; padding: 0 34px 0 34px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-elev); color: var(--text); font: inherit; font-size: 14px;
}
.sb-search input::placeholder { color: var(--text-muted); }
.sb-search input:focus { outline: none; border-color: var(--brand); }
/* Masquer le X natif de <input type=search> : on fournit le notre. */
.sb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sb-search-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--text-muted); cursor: pointer;
    border-radius: 6px; padding: 0;
}
.sb-search-clear:hover { background: var(--border); color: var(--text); }
.sb-search-clear .icon { width: 14px; height: 14px; display: block; }
.sb-archived { color: var(--text); font-size: 13px; }
.sb-archived label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
@media (min-width: 901px) {
    .sb-filters { display: flex; align-items: center; gap: 10px; }
    .sb-filters summary { display: none; }
    .sb-filters-body {
        display: flex !important;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }
}

[data-theme="dark"] .sb-hero {
    background: var(--brand-ink);
    color: #fff;
}
[data-theme="dark"] .sb-hero-title { color: #fff; }
[data-theme="dark"] .sb-hero-sub { color: rgba(255,255,255,.82); }
[data-theme="dark"] .sb-hero-stat {
    background: rgba(255,255,255,.15); border-color: transparent;
}
[data-theme="dark"] .sb-hero-stat-value { color: #fff; }
[data-theme="dark"] .sb-hero-stat-label { color: #fff; }
[data-theme="dark"] .sb-hero-stat.is-urgent .sb-hero-stat-value { color: #fbbf24; }
[data-theme="dark"] .sb-hero-stat.is-overdue .sb-hero-stat-value { color: #f87171; }
[data-theme="dark"] .sb-hero-stat.is-unread .sb-hero-stat-value { color: #67e8f9; }
[data-theme="dark"] .sb-hero-select {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.14); color: #fff;
}
[data-theme="dark"] .sb-hero-filter {
    background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); color: #fff;
}
[data-theme="dark"] .sb-hero-filter:hover { background: rgba(255,255,255,.24); color: #fff; }
[data-theme="dark"] .sb-view-toggle { background: rgba(255,255,255,.12); }
[data-theme="dark"] .sb-view-toggle a { color: rgba(255,255,255,.88); }
[data-theme="dark"] .sb-view-toggle a:hover { background: rgba(255,255,255,.12); color: #fff; }
[data-theme="dark"] .sb-view-toggle a.is-active { background: var(--bg-elev); color: var(--text); }
[data-theme="dark"] .sb-search-ic { color: rgba(255,255,255,.7); }
[data-theme="dark"] .sb-search input {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.14); color: #fff;
}
[data-theme="dark"] .sb-search input::placeholder { color: rgba(255,255,255,.55); }
[data-theme="dark"] .sb-archived { color: rgba(255,255,255,.9); }

/* Colonnes a largeur fixe : un seul defilement horizontal sur le pipeline
   (barre en bas). Le corps de chaque colonne defile verticalement pour les
   cartes ; les groupes ne creent plus de barres horizontales. */
.sb-pipe {
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 10px; padding: 10px 12px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.sb-group {
    flex: 0 0 auto;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 14px; padding: 6px 6px 8px;
}
.sb-group-h {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin: 2px 4px 8px; padding: 6px 8px;
    border: 0; background: transparent; color: var(--text-muted);
    font: inherit; font-size: 13px; font-weight: 700; text-decoration: none;
    border-radius: 8px; cursor: pointer;
}
.sb-group-h:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.sb-group-h em {
    font-style: normal; font-size: 11px; font-weight: 700;
    background: var(--bg); color: var(--text-muted);
    padding: 1px 8px; border-radius: 999px;
}
.sb-group-cols {
    flex: 1 1 auto; min-height: 0;
    display: flex; gap: 8px; overflow: hidden;
}
.sb-group--cash { outline: 1px solid rgba(139,92,246,.25); }
.sb-group--intake { background: #f8fafc; }
.sb-group--work { background: #eff6ff; }
.sb-group--out { background: #f0fdf4; }
.sb-group--done { background: #f1f5f9; }

.sb-col {
    flex: 0 0 360px;
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    display: flex; flex-direction: column; min-height: 0;
    background: var(--bg); border-radius: 12px;
}
.sb-col--over { outline: 2px dashed var(--sb-col, var(--primary)); outline-offset: -2px; }
.sb-col-h {
    flex: none; padding: 8px 10px; border-radius: 12px 12px 0 0;
    background: var(--sb-col, #64748b); color: #fff;
}
.sb-col-h-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 700;
}
.sb-col-h-row > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-col-count { flex: none; }
.sb-col-count {
    background: rgba(255,255,255,.25); padding: 1px 7px; border-radius: 999px; font-size: 11px;
}
.sb-col-review {
    display: block; width: 100%; margin-top: 6px;
    border: 0; border-radius: 6px; padding: 4px 8px;
    background: rgba(255,255,255,.25); color: #fff;
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sb-col-review:hover { background: rgba(255,255,255,.38); }
.sb-col-body {
    flex: 1 1 auto; min-height: 80px; overflow: auto;
    display: flex; flex-direction: column; gap: 8px; padding: 8px;
    touch-action: pan-y;
}
.sb-col-empty {
    text-align: center; color: var(--text-muted); font-size: 12px; font-style: italic; padding: 24px 8px;
}

.sb-tile {
    position: relative;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow);
    cursor: grab;
}
.sb-tile.is-dragging { opacity: .5; }
.sb-tile.is-late { border-color: #fecaca; background: #fef2f2; }
.sb-tile.is-urgent { box-shadow: 0 0 0 2px #dc2626; }
.sb-tile--invoice { border-left: 4px solid #8b5cf6; }
.sb-tile--ticket { border-left: 5px solid var(--sb-col, #3b82f6); }
.sb-tile-urgent {
    font-size: 11px; font-weight: 700; color: #fff;
    background: #dc2626; border-radius: 6px; padding: 1px 6px;
}
.sb-tile-body { padding: 10px 12px; }
.sb-tile-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.sb-tile-number { font-size: 11px; font-weight: 700; color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; }
.sb-tile-client { font-size: 14px; font-weight: 700; line-height: 1.3; }
.sb-tile-name, .sb-tile-address, .sb-tile-tech { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sb-tile-signal { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.sb-tile-signal.is-late { color: #b91c1c; font-weight: 600; }
.sb-tile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sb-tile-more {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 0; padding: 6px 0;
    border: 0; border-top: 1px solid var(--border);
    border-radius: 0 0 10px 10px; background: var(--bg); color: var(--text-muted);
    cursor: pointer;
}
.sb-tile-more:hover { background: var(--bg-elev); color: var(--text); }
.sb-tile-more-caret {
    width: 7px; height: 7px; margin-top: -1px;
    border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg);
}
.sb-tile.is-expanded .sb-tile-more-caret { transform: rotate(225deg); margin-top: 1px; }
.sb-tile-progress { margin-top: 8px; }
.sb-progress-bg { height: 5px; background: var(--border); border-radius: 99px; overflow: hidden; }
.sb-progress-fill { display: block; height: 100%; background: var(--success); }
.sb-progress-label { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sb-col-body.is-drop { background: #eef2ff; }
.sb-col-completed-hidden {
    text-align: center; color: var(--text-muted); font-size: 12px;
    padding: 20px 8px;
}
.sb-board.is-list { overflow: auto; }
.sb-list { padding: 0 12px 16px; }
.sb-empty { padding: 24px; }
.sb-focus--intake { background: #f8fafc; }
.sb-focus--work { background: #eff6ff; }
.sb-focus--out { background: #f0fdf4; }
.sb-focus--done { background: #f1f5f9; }

/* Mode sombre : les teintes de groupe restent des nuances de la surface,
   pas des fonds clairs ; les alertes passent en teintes sombres. */
[data-theme="dark"] .sb-group--intake,
[data-theme="dark"] .sb-focus--intake { background: rgba(148,163,184,.08); }
[data-theme="dark"] .sb-group--work,
[data-theme="dark"] .sb-focus--work { background: rgba(59,130,246,.10); }
[data-theme="dark"] .sb-group--out,
[data-theme="dark"] .sb-focus--out { background: rgba(34,197,94,.09); }
[data-theme="dark"] .sb-group--done,
[data-theme="dark"] .sb-focus--done { background: rgba(148,163,184,.06); }
[data-theme="dark"] .sb-tile.is-late { border-color: #7f1d1d; background: rgba(127,29,29,.28); }
[data-theme="dark"] .sb-tile-signal.is-late,
[data-theme="dark"] .sb-stale { color: #fca5a5; }
[data-theme="dark"] .sb-col-body.is-drop { background: rgba(99,102,241,.16); }

.sb-focus { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 10px 12px 14px; }
.sb-focus-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sb-focus-title { font-weight: 800; font-size: 16px; }
.sb-stale { font-size: 12px; color: #b91c1c; font-weight: 600; }
.sb-focus-cols { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; overflow: auto; }
.sb-col--detail { min-width: 260px; max-width: 420px; flex: 1; }

.sb-ctx {
    position: fixed; z-index: 80; min-width: 220px;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px;
}
.sb-ctx-h { font-size: 11px; font-weight: 700; color: var(--text-muted); padding: 6px 8px 4px; }
.sb-ctx button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    border: 0; background: transparent; text-align: left;
    padding: 7px 8px; border-radius: 7px; font: inherit; font-size: 13px; cursor: pointer; color: var(--text);
}
.sb-ctx button:hover { background: var(--bg); }
.sb-ctx button.is-on { opacity: .55; cursor: default; }
.sb-ctx-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

.sb-review-progress { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.sb-review-bar { height: 6px; background: var(--bg); border-radius: 99px; overflow: hidden; margin-bottom: 14px; }
.sb-review-bar > span { display: block; height: 100%; background: var(--primary); }
.sb-review-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.sb-review-kicker { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.sb-review-title { margin: 4px 0 6px; font-size: 18px; }
.sb-review-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-review-choices button { color: #fff; border: 0; border-radius: 8px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

@media (max-width: 900px) {
    .scan-tab,
    .scan-dock { display: none !important; }
    .sb-hero { padding: 12px 12px 10px; }
    .sb-hero-sub,
    .sb-hero-stats { display: none; }
    .sb-hero-top { align-items: center; }
    .sb-hero-toolbar { gap: 8px; }
    .sb-search { flex: 1 1 100%; max-width: none; }
    .sb-filters {
        display: block;
        flex: 1 1 100%;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: var(--bg);
    }
    .sb-filters summary {
        display: flex;
        align-items: center;
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    .sb-filters summary::-webkit-details-marker { display: none; }
    .sb-filters summary::after {
        content: '';
        margin-left: auto;
        width: 7px; height: 7px;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg);
    }
    .sb-filters[open] summary::after { transform: rotate(225deg); margin-top: 4px; }
    .sb-filters:not([open]) .sb-filters-body { display: none; }
    .sb-filters[open] .sb-filters-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0 10px 10px;
    }
    .sb-hero-select { width: 100%; min-width: 0; }
    /* Les groupes restent cote a cote : un glissement horizontal les fait defiler. */
    .sb-pipe {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }
    .sb-group {
        flex: 0 0 auto;
        width: auto;
        min-width: 0;
        min-height: 0;
        scroll-snap-align: start;
    }
    .sb-group--out,
    .sb-group--done { min-width: 0; }
    .sb-col {
        flex: 0 0 min(320px, 86vw);
        width: min(320px, 86vw);
        min-width: min(320px, 86vw);
        max-width: min(320px, 86vw);
    }
    .sb-col--detail { max-width: none; min-width: min(260px, 86vw); }
    .sb-focus-cols {
        overflow-x: auto;
        touch-action: pan-x pan-y;
        -webkit-overflow-scrolling: touch;
    }
    .sb-view-toggle { margin-left: 0; width: 100%; }
    .sb-view-toggle a { flex: 1; text-align: center; }
}

/* ---------- Boite des numerisations (tiroir droit) ---------- */
.scan-tab {
    position: fixed; z-index: 1180;
    top: 50%; right: 0; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 36px; padding: 14px 0;
    border: 1px solid var(--border); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    background: var(--bg-elev); color: var(--text);
    box-shadow: var(--shadow);
    cursor: pointer;
}
.scan-tab:hover { background: var(--primary-soft); color: var(--primary); }
.scan-tab .icon { width: 18px; height: 18px; }
.scan-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.scan-tab-badge {
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--danger); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.scan-tab-badge[hidden] { display: none; }
html.has-scan-dock .scan-tab { display: none; }

.scan-dock {
    position: fixed; z-index: 1180;
    top: 0; right: 0; bottom: 0;
    width: min(300px, 100vw);
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.scan-dock[hidden] { display: none; }
.scan-dock-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.scan-dock-bar strong { font-size: 15px; }
.scan-drop {
    display: flex; align-items: center; justify-content: center;
    margin: 12px 12px 8px; padding: 16px 10px;
    border: 2px dashed var(--border); border-radius: var(--radius);
    color: var(--text-muted); font-size: 13px; cursor: pointer; text-align: center;
}
.scan-drop:hover, .scan-drop.is-over {
    border-color: var(--primary); background: var(--primary-soft); color: var(--text);
}
.scan-dock-list {
    flex: 1; min-height: 0; overflow: auto;
    padding: 4px 12px 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.scan-card {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px; border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); cursor: grab;
}
.scan-card:hover { border-color: var(--primary); }
.scan-card.is-dragging { opacity: .55; }
.scan-card-thumb,
.scan-card-body strong[data-viewer-open] { cursor: pointer; }
.scan-card-thumb {
    width: 56px; height: 72px; flex: 0 0 56px;
    border-radius: 4px; background: var(--bg-elev);
    display: grid; place-items: center; overflow: hidden;
    color: var(--text-muted);
}
.scan-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.scan-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.scan-card-body strong {
    font-size: 13px; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scan-card-body small { color: var(--muted); font-size: 11px; }
.scan-card-actions { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-dock.is-drop-active,
.chat-thread.is-drop-active {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
.chat-bubble.is-drop-active {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

html.has-scan-dock .chat-bubble,
html.has-scan-dock .chat-dock { right: 320px; }

@media (max-width: 800px) {
    .scan-dock { width: 100%; }
    html.has-scan-dock .chat-bubble,
    html.has-scan-dock .chat-dock { right: 20px; }
}

/* ============================================================
   Magasin : produits, inventaire, transferts, tickets, DDP, BC
   Jetons uniquement : chaque bloc doit tenir en theme sombre.
   ============================================================ */

/* --- Briques partagees ------------------------------------ */

.tabs {
    display: flex; gap: 2px; flex-wrap: wrap;
    margin: 0 0 18px; border-bottom: 1px solid var(--border);
}
.tab {
    padding: 9px 14px; font-size: 14px; color: var(--text-muted);
    border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }

.detail-list { display: grid; grid-template-columns: minmax(110px, auto) 1fr; gap: 6px 14px; margin: 0; }
.detail-list dt { color: var(--text-muted); font-size: 13px; }
.detail-list dd { margin: 0; font-size: 14px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 0; }

.table tr.is-late td { background: var(--danger-soft); }
.table tr.is-muted td { opacity: .55; }

.filter-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.view-toggle { margin-left: auto; display: flex; gap: 4px; }
.view-toggle .btn.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

.form-section {
    margin: 20px 0 10px; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .6px; color: var(--text-muted);
}
.form-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.form-group-wide { grid-column: 1 / -1; }
.form-group-action { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-bottom: 15px; }
.form-inline-row { align-items: end; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stack-form {
    display: flex; flex-direction: column; gap: 4px;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.queue-list { max-height: 320px; overflow: auto; margin-bottom: 12px; }
.unit-hint { margin: 0; font-size: 13px; color: var(--text-muted); }
.count-input, .qty-input { width: 110px; font-variant-numeric: tabular-nums; }

.magasin-hero, .hero-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.hero-tile, .hero-stat {
    display: flex; flex-direction: column; gap: 3px;
    padding: 14px 16px; color: inherit; text-align: left;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
a.hero-tile:hover, a.hero-stat:hover { border-color: var(--primary); text-decoration: none; }
.hero-tile.is-active, .hero-stat.is-active { border-color: var(--primary); background: var(--primary-soft); }
.hero-value { font-size: 25px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero-label { font-size: 13px; color: var(--text-muted); }
.hero-tile.is-danger .hero-value, .hero-stat.is-alert .hero-value { color: var(--danger); }
.hero-tile.is-warn .hero-value { color: var(--warning); }

.magasin-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.magasin-band > div { flex: 1 1 260px; }
.magasin-band .btn { flex: none; }
.magasin-band .icon { width: 18px; height: 18px; vertical-align: -3px; color: var(--text-muted); }
.magasin-band.is-frozen { border-left: 4px solid var(--warning); }
.magasin-band.is-dock { border-left: 4px solid var(--info); }

/* --- Cartes produit et inventaire ------------------------- */

.magasin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.magasin-card {
    display: flex; flex-direction: column;
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.magasin-card-head { display: flex; gap: 10px; align-items: flex-start; padding: 13px 15px 6px; }
.magasin-card-head h3 { margin: 0 0 2px; font-size: 15px; }
.magasin-card-total { margin-left: auto; text-align: right; white-space: nowrap; }
.magasin-code {
    margin-bottom: 4px; font-size: 12px; color: var(--text-muted);
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
.magasin-qty { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.magasin-qty-lead { margin: 0 0 10px; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.magasin-unit { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.magasin-card-body { flex: 1; padding: 0 15px 8px; font-size: 13.5px; }
.magasin-card-body p { margin: 0 0 6px; }
.magasin-card-foot { display: flex; gap: 6px; padding: 0 13px 13px; }
.magasin-card-foot .btn { flex: 1; justify-content: center; }

.stock-badge {
    display: inline-block; padding: 2px 9px; border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
}
.stock-badge.ok { background: var(--success-soft); color: var(--success); }
.stock-badge.low { background: var(--warning-soft); color: var(--warning); }
.stock-badge.out { background: var(--danger-soft); color: var(--danger); }
[data-theme="dark"] .stock-badge.ok { color: #4ade80; }
[data-theme="dark"] .stock-badge.low { color: #fbbf24; }
[data-theme="dark"] .stock-badge.out { color: #f87171; }

.price-chart {
    display: flex; align-items: flex-end; gap: 4px;
    height: 90px; padding: 8px 0; border-bottom: 1px solid var(--border);
}
.price-bar { flex: 1 1 6px; min-height: 3px; background: var(--primary-soft); border-radius: 2px 2px 0 0; }
.price-bar:last-child { background: var(--primary); }

/* --- Transferts : trois colonnes -------------------------- */

.board { display: grid; gap: 14px; align-items: start; }
.board-3 { grid-template-columns: repeat(3, 1fr); }
.board-column {
    display: flex; flex-direction: column; gap: 10px;
    padding: 12px; background: var(--bg-elev);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.board-head { display: flex; align-items: center; gap: 8px; }
.board-head h3 { margin: 0; font-size: 14px; }
.board-card {
    display: block; padding: 11px 12px; color: inherit;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px;
}
.board-card:hover { border-color: var(--primary); text-decoration: none; }
.board-card.is-stale { border-left: 3px solid var(--warning); }
.board-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.board-alert { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--warning); }

/* --- Tickets : kanban et fiche ---------------------------- */

/* Une colonne par statut, toujours sur une seule rangee : autant de
   colonnes qu'il y a de statuts (Ticket::BOARD), qui se partagent la
   largeur et defilent de cote si l'ecran est trop etroit. */
.kanban {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
    gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 6px;
}
.kanban-column {
    display: flex; flex-direction: column;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
}
.kanban-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; border-bottom: 1px solid var(--border);
}
.kanban-head h3 { margin: 0; font-size: 13.5px; }
.kanban-count {
    margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 20px;
    background: var(--bg); color: var(--text-muted);
    font-size: 12px; font-weight: 700; text-align: center;
}
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 80px; padding: 10px; }
.kanban-cards.is-drop { background: var(--primary-soft); }

.ticket-card {
    display: block; padding: 10px 11px; color: inherit;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    cursor: grab;
}
.ticket-card:hover { border-color: var(--primary); text-decoration: none; }
.ticket-card.is-dragging { opacity: .5; }
.ticket-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.ticket-code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 11.5px; color: var(--text-muted);
}
.ticket-priority { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.ticket-priority.low { background: var(--border); }
.ticket-priority.normal { background: var(--info); }
.ticket-priority.high { background: var(--warning); }
.ticket-priority.urgent { background: var(--danger); }
.ticket-card-title { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.ticket-card-meta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text-muted); }
.ticket-late { color: var(--danger); font-weight: 600; }
.ticket-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ticket-progress { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.ticket-progress-bar { width: 60px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ticket-progress-fill { display: block; height: 100%; background: var(--success); }
.ticket-avatar {
    margin-left: auto; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--primary-soft); color: var(--primary);
    font-size: 11px; font-weight: 700;
}
.ticket-suggest { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-left: 4px solid var(--success); }
.ticket-suggest p { margin: 0; flex: 1 1 240px; }

.mat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mat-row {
    display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap;
    padding: 11px 12px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mat-row-main { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mat-row-actions { display: flex; gap: 4px; flex-wrap: wrap; }
.mat-shadow {
    position: relative; height: 6px; max-width: 320px;
    border-radius: 3px; background: var(--border); overflow: hidden;
}
.mat-shadow-fill { position: absolute; top: 0; left: 0; height: 100%; }
.mat-shadow-fill.is-reserved { background: var(--warning); }
.mat-shadow-fill.is-delivered { background: var(--info); }
.mat-shadow-fill.is-consumed { background: var(--success); }
.mat-figures { font-size: 12px; }
.mat-estimate { color: var(--text); }

/* Mini-estimation du ticket : heures, materiel, budget (roles autorises). */
.ticket-budget { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.ticket-budget h4 { margin: 0 0 8px; }
.ticket-budget-table { width: auto; min-width: min(100%, 560px); }
.ticket-budget-table th { text-align: left; white-space: nowrap; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); }
.ticket-budget-table th, .ticket-budget-table td { padding: 7px 10px; }
.ticket-budget-table td.num { text-align: right; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
.ticket-budget-table td.muted { font-size: 12px; }
.ticket-budget-total th, .ticket-budget-total td { border-top: 2px solid var(--border); }

/* --- Assistant de ticket ---------------------------------- */

.wizard { display: flex; flex-direction: column; gap: 12px; }
.wizard-steps { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.wizard-steps li {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 11px; border: 1px solid var(--border); border-radius: 20px;
    background: var(--bg-elev); color: var(--text-muted);
    font-size: 12.5px; cursor: pointer;
}
.wizard-steps li.is-current { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.wizard-steps li.is-done { color: var(--success); }
.wizard-n {
    width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg); font-size: 11px; font-weight: 700;
}
.wizard-draft { margin: 0; font-size: 12.5px; }
.wizard-section {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.wizard-section.is-open { border-color: var(--primary); }
.wizard-head { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.wizard-head h3 { margin: 0; font-size: 15px; }
.wizard-summary { margin-left: auto; font-size: 12.5px; color: var(--text-muted); text-align: right; }
.wizard-body { display: none; padding: 0 16px 16px; }
.wizard-section.is-open .wizard-body { display: block; }
.wizard-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wizard-foot .spacer { flex: 1 1 auto; }
.wizard .form-label { display: block; font-size: 13px; font-weight: 600; margin: 4px 0 6px; }
.wizard-recap { align-items: start; }
.wizard-recap dt { font-weight: 600; }
.wizard-recap dd { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.wizard-recap dd .btn-link {
    border: 0; background: none; padding: 0; color: var(--primary);
    font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline;
}
.wizard-done { text-align: center; padding: 28px 20px; }
.wizard-done-badge {
    width: 48px; height: 48px; margin: 0 auto 10px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--success); color: #fff;
}
.wizard-done-badge .icon { width: 24px; height: 24px; }
.wizard-done h3 { margin: 0 0 4px; font-size: 22px; }
.wizard-done-title { margin: 0 0 6px; font-size: 15px; }
.wizard-done-actions { justify-content: center; margin-top: 18px; }

/* Assistant de ticket : une seule etape visible, dans un cadre. */
.wo-page.ticket-wizard { max-width: 720px; }
.ticket-wizard-frame {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(10, 10, 10, .12);
    padding: 6px 18px 16px;
}
.ticket-wizard-bar { margin-bottom: 6px; align-items: center; }
.ticket-wizard-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.ticket-wizard-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border);
}
.ticket-wizard-foot:not(:has(:not([hidden]))) { display: none; }
.ticket-wizard-foot form { margin: 0; flex: none; }
.ticket-wizard-actions .icon-btn {
    width: 40px; height: 40px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg);
}
.ticket-wizard-actions .icon-btn:hover { border-color: var(--primary); color: var(--primary); }
.ticket-wizard .wizard-steps {
    display: flex; flex-wrap: nowrap; gap: 0;
    margin: 0; padding: 2px 0 4px;
    background: transparent; border-radius: 0;
    overflow-x: auto;
}
.ticket-wizard .wizard-steps li {
    position: relative;
    flex: 1 0 76px;
    flex-direction: column; justify-content: flex-start;
    gap: 6px; padding: 0 4px;
    border: 0; border-radius: 0; background: none;
    box-shadow: none; color: var(--text-muted);
    font-size: 11px; font-weight: 600; text-align: center;
}
.ticket-wizard .wizard-steps li::before {
    content: "";
    position: absolute; z-index: 0;
    top: 11px; left: calc(50% + 16px); right: calc(-50% + 16px);
    height: 2px; background: var(--border);
}
.ticket-wizard .wizard-steps li:last-child::before { display: none; }
.ticket-wizard .wizard-n {
    position: relative; z-index: 1;
    width: 24px; height: 24px;
    border: 2px solid var(--border);
    background: var(--bg-elev); color: var(--text-muted);
}
.ticket-wizard .wizard-label { line-height: 1.2; }
.ticket-wizard .wizard-steps li.is-current {
    color: var(--text); background: none; box-shadow: none; border: 0;
}
.ticket-wizard .wizard-steps li.is-current .wizard-n {
    background: var(--primary); border-color: var(--primary); color: #fff;
}
.ticket-wizard .wizard-steps li.is-done {
    color: var(--success); background: none; box-shadow: none; border: 0;
}
.ticket-wizard .wizard-steps li.is-done .wizard-n {
    background: var(--success); border-color: var(--success); color: #fff;
}
.ticket-wizard .wizard-steps li.is-done::before { background: var(--success); }
.ticket-wizard .wizard-section:not(.is-open) { display: none; }
.ticket-wizard .wizard-section,
.ticket-wizard .wizard-section.is-open {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
}
.ticket-wizard .wizard-head { padding: 4px 0 10px; cursor: default; }
.ticket-wizard .wizard-summary { display: none; }
.ticket-wizard .wizard-body { padding: 0; }
.ticket-wizard .wizard-foot {
    margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border);
}
/* La grille d'usagers suit la page : une seule barre, celle du contenu. */
.ticket-wizard .picker-faces { max-height: none; overflow: visible; }
.ticket-wizard .choice-row {
    display: flex; gap: 4px; margin-bottom: 10px; padding: 4px;
    background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.ticket-wizard .choice {
    position: relative; flex: 1 1 0; justify-content: center;
    min-height: 46px; padding: 10px 12px;
    border: 0; border-radius: 9px; background: transparent;
    font-weight: 650;
}
.ticket-wizard .choice input {
    position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0;
}
.ticket-wizard .choice::before {
    content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
    background: var(--info); box-shadow: inset 0 0 0 2px var(--bg-elev);
}
.ticket-wizard .choice:has(input[value="urgent"])::before { background: var(--danger); }
.ticket-wizard .choice:has(input[value="site"])::before { background: var(--warning); }
.ticket-wizard .choice:has(input:checked) {
    background: var(--bg-elev); color: var(--text);
    box-shadow: 0 1px 3px rgba(10, 10, 10, .12);
}
.ticket-wizard .choice:has(input[value="urgent"]:checked) {
    background: var(--danger-soft); color: var(--danger);
}
.ticket-wizard .choice:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.date-cal { user-select: none; }
.date-cal-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 8px;
}
.date-cal-bar strong { font-size: 15px; text-transform: capitalize; }
.date-cal-nav {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg);
    color: var(--text); font: inherit; font-size: 20px; line-height: 1; cursor: pointer;
}
.date-cal-nav:hover { border-color: var(--primary); color: var(--primary); }
.date-cal-week, .date-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.date-cal-week { margin-bottom: 4px; }
.date-cal-week span {
    text-align: center; font-size: 11px; font-weight: 700;
    letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase;
}
.date-cal-day {
    height: 40px; border: 0; border-radius: 10px;
    background: transparent; color: var(--text);
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.date-cal-day:hover { background: var(--bg); }
.date-cal-day.is-weekend,
.date-cal-day.is-out { color: var(--text-muted); font-weight: 500; }
.date-cal-day.is-today { box-shadow: inset 0 0 0 1px var(--border); }
.date-cal-day.is-on,
.date-cal-day.is-on:hover { background: var(--primary); color: #fff; }
.date-cal-empty { height: 40px; }

.wizard-recap-lead { margin: 0 0 10px; font-size: 13px; }
.ticket-wizard .wizard-recap { display: flex; flex-direction: column; gap: 8px; }
.wizard-recap-row {
    display: grid; grid-template-columns: 108px minmax(0, 1fr) auto;
    gap: 8px 12px; align-items: start;
    padding: 12px 14px; background: var(--bg);
    border: 1px solid var(--border); border-radius: 12px;
}
.wizard-recap-label { font-size: 12px; font-weight: 700; color: var(--text-muted); padding-top: 2px; }
.wizard-recap-value { min-width: 0; font-size: 14px; line-height: 1.4; }
.wizard-recap-value strong { display: block; font-weight: 650; }
.wizard-recap-value span { display: block; }
.wizard-recap-note { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.wizard-recap-row .btn-link { white-space: nowrap; }
@media (max-width: 720px) {
    .wizard-foot .btn { flex: 1 1 45%; text-align: center; }
    .wizard-foot .spacer { display: none; }
    .wizard-summary { display: none; }
    .wizard-recap-row { grid-template-columns: 1fr auto; }
    .wizard-recap-label { grid-column: 1 / -1; padding-top: 0; }
}
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.choice {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.mat-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.mat-line {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 9px 10px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.mat-line-main { flex: 1 1 260px; min-width: 0; }
.mat-line-name { font-size: 13.5px; font-weight: 600; }
.mat-line-name input { width: 100%; }
.mat-line-stock { font-size: 12px; color: var(--text-muted); }
.mat-line-stock.is-short { color: var(--danger); font-weight: 600; }
.mat-line input[type="text"] { width: 90px; }
.mat-remove {
    width: 28px; height: 28px; flex: none; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: var(--bg-elev);
    color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer;
}
.mat-remove:hover { border-color: var(--danger); color: var(--danger); }

/* --- Demandes de prix : grille comparative ---------------- */

.ddp-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.ddp-suppliers { display: flex; flex-direction: column; gap: 8px; }
.ddp-suppliers h3 { margin: 0 0 4px; font-size: 15px; }
.ddp-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.supplier-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13.5px; }
.supplier-row + .supplier-row { border-top: 1px solid var(--border); padding-top: 8px; }
.supplier-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); }
.supplier-dot.pending { background: var(--border); }
.supplier-dot.sent { background: var(--info); }
.supplier-dot.opened { background: var(--warning); }
.supplier-dot.replied { background: var(--warning); }
.supplier-dot.quoted { background: var(--success); }
.supplier-dot.declined { background: var(--danger); }
.supplier-name { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; }
.supplier-name small { color: var(--text-muted); font-size: 11.5px; overflow-wrap: anywhere; }

.lock-bar {
    display: flex; align-items: center; gap: 10px;
    border-left: 4px solid var(--warning);
}
.lock-bar .icon { width: 18px; height: 18px; color: var(--warning); }

.grid-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid-actions .spacer { flex: 1 1 auto; }
.saved { font-size: 12.5px; font-weight: 600; color: var(--success); }
.grid-wrap {
    overflow: auto; background: var(--bg-elev);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.ddp-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ddp-grid th, .ddp-grid td {
    padding: 9px 10px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.ddp-grid th {
    position: sticky; top: 0; z-index: 1;
    background: var(--bg); font-size: 12px; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-muted);
}
.ddp-grid td.item, .ddp-grid th.item { position: sticky; left: 0; z-index: 1; background: var(--bg-elev); min-width: 230px; }
.ddp-grid th.item { z-index: 2; background: var(--bg); }
.ddp-grid tr[data-equiv] td.item { border-left: 3px solid var(--info); }
.item-qty { display: block; font-size: 12px; color: var(--text-muted); }
/* Quantite demandee : un vrai champ dans la ligne. Transparent, il passait
   pour du texte et personne ne savait qu'on pouvait corriger un compte. */
.qty-input {
    width: 78px; padding: 3px 6px; font-size: 13px;
    font-variant-numeric: tabular-nums; text-align: right;
    background: var(--bg-elev); border-color: var(--border);
}
.qty-input:hover { border-color: var(--primary); }
.qty-input:focus { background: var(--bg-elev); border-color: var(--primary); }
.qty-input.is-error { border-color: var(--danger); }
.item-key {
    margin-top: 3px; font-size: 10.5px; color: var(--text-muted); opacity: .7;
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.equiv-tag {
    display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 20px;
    background: var(--info-soft); color: var(--info); font-size: 11px; font-weight: 600;
}
.ddp-grid td.cell { min-width: 165px; }
.ddp-grid td.cell.is-best { background: var(--success-soft); }
.ddp-grid td.cell.is-picked { outline: 2px solid var(--primary); outline-offset: -2px; }
.ddp-grid td.cell.is-error { background: var(--danger-soft); }
.cell-inputs { display: flex; gap: 4px; }
.cell-inputs input { width: 100%; padding: 5px 7px; font-size: 13px; }
.cell-unit { width: 54px !important; flex: none; text-transform: uppercase; }
.cell-conv { margin-top: 3px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cell-error { color: var(--danger); }
.cell-gap { font-size: 11.5px; font-weight: 600; color: var(--warning); }
/* Prix repris d'une offre passee : lisible, mais visiblement plus pale
   qu'une reponse a la demande en cours. */
.cell-offer:not(:empty) { margin-top: 2px; font-size: 11px; font-style: italic; color: var(--text-muted); opacity: 0.85; }
.cell-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 5px; }
.cell-meta input { padding: 3px 6px; font-size: 11.5px; }
.total-conso { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.ddp-grid tfoot td { font-weight: 700; background: var(--bg); }

/* --- Grille comparative en tableur ----------------------------
   Meme chrome que les lignes de facture (invoice-sheet-grid) : une rangee
   par article, les cases du fournisseur cote a cote, les details
   (U/paquet, delai, dispo, substitut) repliables. */
.ddp-sheet-wrap { max-height: none; }
/* Sur un grand ecran seule la grille s'etire ; les cartes de texte
   (reponses, envois, notes) restent lisibles. */
.ddp-main > .card, .ddp-main > .grid-actions { max-width: 1200px; }
.ddp-main > .card.ddp-add-lines { max-width: none; }
/* Autant de colonnes que de fournisseurs x 3 : la table prend la largeur
   qu'il lui faut et le cadre defile ; l'article reste colle a gauche. */
.invoice-sheet-grid.ddp-sheet { table-layout: auto; width: max-content; min-width: 100%; }
.ddp-sheet th.is-num, .ddp-sheet td.is-num { min-width: 84px; }
.ddp-sheet td.is-row, .ddp-sheet th:first-child { position: sticky; left: 0; z-index: 2; }
.invoice-sheet-grid.ddp-sheet td.is-row, .invoice-sheet-grid.ddp-sheet thead tr:not(.ddp-sheet-groups) th:first-child { width: 32px; min-width: 32px; max-width: 32px; }
.ddp-sheet td.ddp-sheet-code, .ddp-sheet th.is-code { position: sticky; left: 32px; z-index: 2; width: 110px; min-width: 110px; max-width: 110px; }
.ddp-sheet td.ddp-sheet-label, .ddp-sheet th.ddp-sheet-label-head { position: sticky; left: 142px; z-index: 2; width: 220px; min-width: 220px; max-width: 220px; box-shadow: 2px 0 0 var(--border); }
.ddp-sheet thead th.is-code, .ddp-sheet thead th.ddp-sheet-label-head, .ddp-sheet thead th:first-child { z-index: 4; }
.ddp-sheet thead tr.ddp-sheet-groups th.is-label { position: sticky; left: 0; z-index: 4; text-align: left; padding-left: 8px; }
.ddp-sheet thead tr.ddp-sheet-groups th { text-transform: none; font-size: 12.5px; letter-spacing: 0; text-align: center; border-bottom: 0; }
.ddp-sheet thead tr.ddp-sheet-groups th.is-label { text-align: left; }
/* Separation des fournisseurs : un trait fort au debut de chaque groupe,
   une teinte alternee, et le nom en bandeau. */
.ddp-sheet .ddp-g-first { border-left: 3px solid var(--text-muted) !important; }
.ddp-sheet .ddp-g-last { border-right: 3px solid var(--text-muted) !important; }
.ddp-sheet th.ddp-sheet-supplier {
    color: var(--text); font-weight: 700; font-size: 12.5px; letter-spacing: .2px;
    padding: 6px 8px; border-bottom: 2px solid var(--text-muted);
    white-space: nowrap;
}
.ddp-sheet .ddp-g1, .ddp-sheet thead th.ddp-g1, .ddp-sheet tfoot th.ddp-g1 { background: color-mix(in srgb, var(--text) 5%, var(--bg-elev)); }
.ddp-sheet thead th.ddp-g0 { background: var(--bg); }
.ddp-sheet thead th.ddp-g1 { background: color-mix(in srgb, var(--text) 7%, var(--bg)); }
.ddp-sheet td.cell { min-width: 84px; }
.ddp-sheet td.cell input { text-align: right; font-weight: 600; }
.ddp-sheet td.cell.is-best, .ddp-sheet td.ddp-sheet-conv.is-best { background: var(--success-soft); }
.ddp-sheet td.cell.is-picked { outline: 2px solid var(--primary); outline-offset: -2px; }
.ddp-sheet td.cell.is-error { background: var(--danger-soft); }
.ddp-sheet td.ddp-sheet-code { padding: 0 8px; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.ddp-sheet td.ddp-sheet-label { padding: 0 8px; }
.ddp-sheet .ddp-sheet-text { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 13px; }
.ddp-sheet .ddp-sheet-label .equiv-tag, .ddp-sheet .ddp-sheet-label .badge { margin: 0 0 0 6px; vertical-align: middle; }
.ddp-sheet th.ddp-sheet-desc, .ddp-sheet td.ddp-sheet-desc { min-width: 130px; }
.ddp-sheet td.ddp-sheet-desc input::placeholder { font-size: 11.5px; }
.ddp-sheet td.is-unit { white-space: nowrap; }
.ddp-sheet td.is-unit input { width: 52px; text-transform: uppercase; }
.ddp-sheet .ddp-sheet-compare { font-size: 11px; margin-left: 2px; }
.ddp-sheet .ddp-sheet-compare:empty { display: none; }
.ddp-sheet td.ddp-sheet-conv { padding: 2px 8px; min-width: 100px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; line-height: 1.25; }
.ddp-sheet .ddp-sheet-unitcost { display: block; font-weight: 600; }
.ddp-sheet .cell-gap { display: block; font-size: 11px; }
.ddp-sheet .cell-offer { display: block; font-size: 10.5px; font-style: italic; color: var(--text-muted); }
.ddp-sheet .cell-offer:empty, .ddp-sheet .cell-gap[hidden] { display: none; }
.ddp-sheet tr.is-skipped td:not(.ddp-sheet-actions) { opacity: .55; }
.ddp-sheet td.ddp-sheet-actions { white-space: nowrap; width: 56px; }
.ddp-sheet td.ddp-sheet-actions .inline-form { display: inline-block; margin: 0; }
.ddp-sheet tfoot th { font-weight: 700; background: var(--bg); text-transform: none; letter-spacing: 0; font-size: 13px; }
.ddp-sheet tfoot th.is-num { text-align: right; }
.ddp-sheet-note { margin: 8px 2px 0; font-size: 12.5px; }

/* --- Repartition et attribution --------------------------- */

.split-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.split-option.is-recommended { border-color: var(--success); }
.split-option h3 { margin: 0 0 4px; font-size: 15px; }
.split-table td { vertical-align: top; }
.split-table select { max-width: 100%; }
.award-card { display: flex; flex-direction: column; gap: 10px; }
.award-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.award-head h3 { margin: 0; font-size: 15px; }

/* --- Bons de commande et reception ------------------------ */

.po-progress { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; min-width: 90px; }
.po-progress-fill { display: block; height: 100%; background: var(--success); }
.po-progress-fill.is-partial { background: var(--warning); }

.phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.phase {
    padding: 14px 16px; background: var(--bg-elev);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.phase p { margin: 0 0 10px; font-size: 13.5px; color: var(--text-muted); }
.phase.is-current { border-color: var(--primary); }
.phase.is-done { border-color: var(--success); }
.phase-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.phase-top h3 { margin: 0; font-size: 15px; }
.phase-n {
    width: 26px; height: 26px; flex: none; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg); color: var(--text-muted); font-size: 13px; font-weight: 700;
}
.phase.is-current .phase-n { background: var(--primary-soft); color: var(--primary); }
.phase.is-done .phase-n { background: var(--success-soft); color: var(--success); }

.receipt { padding: 11px 0; border-bottom: 1px solid var(--border); }
.receipt:last-child { border-bottom: 0; }
.receipt-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }

.recv-line {
    display: grid; grid-template-columns: minmax(0, 1fr) 110px 80px 150px;
    gap: 10px; align-items: center;
    padding: 11px 0; border-bottom: 1px solid var(--border);
}
.recv-line:last-of-type { border-bottom: 0; }
.recv-name { font-size: 14px; font-weight: 600; }
.recv-sub { margin: 2px 0 6px; font-size: 12.5px; color: var(--text-muted); }

@media (max-width: 1100px) {
    .ddp-layout { grid-template-columns: 1fr; }
    .kanban { grid-auto-columns: minmax(240px, 1fr); }
    .board-3 { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .split-2 { grid-template-columns: 1fr; }
    .magasin-hero, .hero-stats { grid-template-columns: repeat(2, 1fr); }
    .view-toggle { margin-left: 0; }
    .recv-line { grid-template-columns: 1fr 1fr; }
    .detail-list { grid-template-columns: 1fr; gap: 2px 0; }
    .detail-list dd { margin-bottom: 8px; }
}

/* ---------- Journal des communications (admin) ---------- */
.comm-filters input,
.comm-filters select { width: auto; flex: 1 1 150px; min-width: 140px; max-width: 280px; }
.comm-filters input[type="search"] { flex: 2 1 220px; max-width: 360px; }
.comm-filters input[type="date"] { flex: 0 1 170px; }
.comm-filters .btn { width: auto; flex: 0 0 auto; }
.comm-origins { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: -6px 0 16px; }
.comm-origin { display: flex; flex-direction: column; min-width: 120px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); text-decoration: none; color: inherit; }
.comm-origin strong { font-size: 18px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.comm-origin span { font-size: 12.5px; color: var(--text-muted); }
.comm-origin.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.comm-origins > .muted { flex: 1 1 280px; margin: 0; font-size: 13px; }
.comm-contexts { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 16px; }
.comm-context { border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 13px; background: var(--bg-elev); }
.comm-context strong { font-variant-numeric: tabular-nums; margin-right: 4px; }
.comm-log-table td.nowrap, .comm-log-table .nowrap { white-space: nowrap; }
.comm-log-content { max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-log-table tr.is-failed td { background: rgba(220, 38, 38, .06); }
.comm-log-body {
    margin: 0; padding: 12px 14px; white-space: pre-wrap; word-break: break-word;
    font: inherit; font-size: 14px; line-height: 1.5;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
    max-height: 70vh; overflow: auto;
}

/* ---------- Appels d'offres (Estimation) ---------- */
.tender-tabs .tab .muted { font-weight: 400; }
.tender-filters select, .tender-filters input[type="search"] { max-width: 220px; }
.tender-filters input[type="search"] { flex: 1 1 220px; }
.tender-map-card .site-map { height: 320px; }
.tender-table td { vertical-align: top; }
.tender-table .small, .tender-layout .small, .tender-head .small { font-size: 12.5px; }
.tender-table .badge-row { margin-top: 4px; }
.tender-source { font-weight: 500; }
.tender-summary { margin-top: 4px; max-width: 520px; }
.tender-col-score { width: 56px; text-align: center; }
.tender-score {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 14px;
    border: 2px solid var(--border); color: var(--text-muted); text-decoration: none;
}
.tender-score:hover { text-decoration: none; }
.tender-score.is-high, .tender-score-big.is-high { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.tender-score.is-mid, .tender-score-big.is-mid { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.tender-score.is-low, .tender-score-big.is-low { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.tender-score.is-none, .tender-score-big.is-none { border-style: dashed; }

.tender-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.tender-main, .tender-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tender-actions { align-items: center; }
.tender-actions form { display: flex; gap: 6px; align-items: center; margin: 0; }
.tender-decide { position: relative; }
.tender-decide summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tender-decide summary::-webkit-details-marker { display: none; }
.tender-decide-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 320px;
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 4px;
}
.tender-decide-form { flex-direction: column; align-items: stretch !important; gap: 6px !important; padding: 8px 10px; border-top: 1px solid var(--border); }
.tender-decide-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.tender-decide-form input, .tender-decide-form select { width: 100%; }

.tender-score-card .tender-score-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.tender-score-big {
    flex: none; width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; border: 3px solid var(--border); color: var(--text-muted);
}
.tender-score-card h3 { margin: 0 0 4px; }
.tender-score-card p { margin: 0; }
.tender-criteria { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tender-criteria li { display: grid; grid-template-columns: 170px minmax(80px, 1fr) 36px minmax(0, 2fr); gap: 10px; align-items: center; font-size: 13.5px; }
.tender-crit-bar { height: 8px; border-radius: 4px; background: var(--border); overflow: hidden; }
.tender-crit-bar span { display: block; height: 100%; border-radius: 4px; background: var(--text-muted); }
.tender-crit-bar span.is-high { background: var(--success); }
.tender-crit-bar span.is-mid { background: var(--warning); }
.tender-crit-bar span.is-low { background: var(--danger); }
.tender-crit-val { text-align: right; }
.tender-crit-note { overflow-wrap: anywhere; }

.tender-summary-full, .tender-description { white-space: pre-line; line-height: 1.5; }
.tender-list { margin: 4px 0 12px; padding-left: 18px; line-height: 1.5; }
.tender-list li { margin-bottom: 4px; }
.tender-list form { display: inline; margin-left: 6px; }
.tender-opinion { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--primary); background: var(--bg); border-radius: var(--radius-sm); }
.tender-opinion h4 { margin: 0 0 6px; }
.tender-opinion p { margin: 0; white-space: pre-line; }
.tender-gcs { display: flex; flex-direction: column; gap: 12px; }
.tender-gc { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 4px; }
.tender-gc-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tender-gc .grid-actions { margin-top: 6px; }
.tender-gc form { margin: 0; }
.tender-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tender-timeline summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.tender-timeline summary::-webkit-details-marker { display: none; }
.tender-mail {
    margin: 8px 0 0; padding: 10px 12px; max-height: 360px; overflow: auto;
    white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.45;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.tender-mini-map { height: 180px; margin-bottom: 12px; }
.tender-side .detail-list { font-size: 13.5px; }
.tender-side .detail-list dd { margin: 0; overflow-wrap: anywhere; }
.tender-more { margin-top: 10px; }
.tender-more summary { cursor: pointer; }
.tender-edit summary { cursor: pointer; }
.tender-edit form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tender-edit form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.tender-edit form input, .tender-edit form select { width: 100%; }
@media (max-width: 980px) {
    .tender-layout { grid-template-columns: 1fr; }
    .tender-criteria li { grid-template-columns: 130px 1fr 36px; }
    .tender-crit-note { grid-column: 1 / -1; }
}.tender-weights { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; }
.tender-weight { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--text-muted); }
.tender-weight input { width: 100%; }.tender-due-banner { border-left: 4px solid var(--warning); }
.tender-due-banner .card-header h3 { display: inline-flex; align-items: center; gap: 6px; }
.tender-due-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tender-due-list li { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 13.5px; }
.tender-recal { margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm); }
.tender-recal .tender-weight strong { font-size: 18px; color: var(--text); }
/* ---------- Mode kiosque (ecran TV / borne) ---------- */
body.kiosk-mode .rail-all,
body.kiosk-mode .rail-search,
body.kiosk-mode .user-menu,
body.kiosk-mode #sidebarToggle,
body.kiosk-mode .nav-section-title,
body.kiosk-mode .impersonate-bar { display: none !important; }
body.kiosk-mode .sidebar-body { display: flex; flex-direction: column; }
body.kiosk-mode .sidebar-nav { flex: 1 1 auto; }
body.kiosk-mode .nav-item { font-size: 16px; padding: 13px 14px; margin-bottom: 4px; }
body.kiosk-mode .nav-item .icon { width: 22px; height: 22px; }
body.kiosk-mode .rail-item { padding-top: 12px; padding-bottom: 12px; }
.kiosk-foot { flex: 0 0 auto; padding: 10px 12px 14px; }
.kiosk-restart-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
    color: #fff; font: inherit; font-size: 13.5px;
}
.kiosk-restart-btn:hover { background: rgba(255, 255, 255, .18); }
.kiosk-restart-btn:disabled { opacity: .5; cursor: default; }
.kiosk-restart-btn .icon { width: 16px; height: 16px; }
.kiosk-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.kiosk-menu label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.kiosk-menu .muted { font-size: 11.5px; }
/* ---------- Personnel : bloc-notes, rappels, calendrier ---------- */
.notes-layout { display: grid; grid-template-columns: 220px 300px minmax(0, 1fr); gap: 14px; align-items: start; }
.notes-sections { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.notes-section-row { display: flex; align-items: center; gap: 2px; }
.notes-section-row .notes-section { flex: 1 1 auto; min-width: 0; }
.notes-section { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: 13.5px; }
.notes-section:hover { background: var(--bg); text-decoration: none; }
.notes-section.is-active { background: var(--primary-soft, var(--bg)); font-weight: 600; }
.notes-section .muted { margin-left: auto; font-size: 12px; }
.notes-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }
.notes-section-edit summary, .notes-section-add summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.notes-section-edit summary::-webkit-details-marker, .notes-section-add summary::-webkit-details-marker { display: none; }
.notes-section-edit summary:hover, .notes-section-add summary:hover { background: var(--bg); }
.notes-section-edit { position: relative; }
.notes-section-edit .notes-section-form { position: absolute; right: 0; top: 100%; z-index: 30; width: 240px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.notes-section-form { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.notes-section-form input[type="text"] { width: 100%; }
.notes-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.notes-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; position: relative; border: 2px solid transparent; }
.notes-color input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.notes-color:has(input:checked) { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-elev) inset; }
.notes-list { padding: 8px; display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 200px); overflow: auto; }
.notes-search { margin-bottom: 6px; }
.notes-search input { width: 100%; }
.notes-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); }
.notes-item:hover { background: var(--bg); text-decoration: none; }
.notes-item.is-active { background: var(--primary-soft, var(--bg)); }
.notes-item .notes-dot { margin-top: 5px; }
.notes-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notes-item-main strong { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-item-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-item-date { flex: none; }
.notes-editor { padding: 14px; min-height: 60vh; display: flex; flex-direction: column; }
.notes-editor form { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; }
.notes-editor-head { display: flex; gap: 10px; }
.notes-title { flex: 1 1 auto; font-size: 18px; font-weight: 600; }
.notes-body { flex: 1 1 auto; min-height: 50vh; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.55; width: 100%; }
.notes-editor-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.notes-layout .small, .rem-layout .small, .cal-layout .small { font-size: 12.5px; }
@media (max-width: 1100px) { .notes-layout { grid-template-columns: 200px minmax(0, 1fr); } .notes-editor { grid-column: 1 / -1; } }
@media (max-width: 720px) { .notes-layout { grid-template-columns: 1fr; } .notes-list { max-height: none; } }

.rem-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.rem-lists { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.rem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.rem-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 6px; border-radius: var(--radius-sm); }
.rem-item:hover { background: var(--bg); }
.rem-item.is-late strong { color: var(--danger); }
.rem-item.is-done strong { text-decoration: line-through; color: var(--text-muted); }
.rem-check { margin: 0; }
.rem-checkbox { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); background: transparent; cursor: pointer; display: grid; place-items: center; color: transparent; padding: 0; margin-top: 2px; }
.rem-checkbox:hover { border-color: var(--success); color: var(--success); }
.rem-checkbox.is-checked { background: var(--success); border-color: var(--success); color: #fff; }
.rem-checkbox .icon { width: 14px; height: 14px; }
.rem-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-notes { color: var(--text-muted); white-space: pre-line; }
.rem-actions { display: flex; gap: 4px; align-items: center; flex: none; }
.rem-actions form { margin: 0; }
.rem-snooze { position: relative; }
.rem-snooze summary { list-style: none; display: inline-flex; cursor: pointer; }
.rem-snooze summary::-webkit-details-marker { display: none; }
.rem-snooze-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 180px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; margin: 0; }
.rem-done summary { cursor: pointer; }
.rem-done .rem-list { margin-top: 10px; }
@media (max-width: 900px) { .rem-layout { grid-template-columns: 1fr; } }

.cal-nav { align-items: center; gap: 8px; }
.cal-label { font-size: 16px; margin: 0 6px; }
.cal-views { margin: 0; border-bottom: 0; }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.cal-card { padding: 10px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow { text-align: center; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; padding: 4px 0; }
.cal-day { min-height: 108px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; display: flex; flex-direction: column; gap: 3px; background: var(--bg-elev); min-width: 0; }
.cal-day.is-other { opacity: .55; }
.cal-day.is-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; }
.cal-day-head { display: flex; justify-content: space-between; align-items: center; }
.cal-day-num { font-weight: 600; font-size: 13px; color: var(--text); }
.cal-day.is-today .cal-day-num { color: var(--primary); }
.cal-day-add { color: var(--text-muted); font-weight: 700; padding: 0 5px; border-radius: 4px; opacity: 0; }
.cal-day:hover .cal-day-add, .cal-week-day:hover .cal-day-add { opacity: 1; }
.cal-day-add:hover { background: var(--bg); text-decoration: none; }
.cal-day-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-item { display: block; font-size: 12px; line-height: 1.3; padding: 2px 6px; border-radius: 4px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 3px solid var(--c, var(--primary)); background: var(--bg); }
.cal-item:hover { text-decoration: none; filter: brightness(.96); }
.cal-time { color: var(--text-muted); margin-right: 4px; font-variant-numeric: tabular-nums; }
.cal-event { --c: var(--primary); }
.cal-visit { --c: var(--warning); }
.cal-reminder { --c: var(--success); }
.cal-reminder.is-done { opacity: .5; text-decoration: line-through; }
.cal-more { padding-left: 6px; }
.cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-week-day { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; min-height: 260px; display: flex; flex-direction: column; gap: 4px; background: var(--bg-elev); min-width: 0; }
.cal-week-day.is-today { border-color: var(--primary); }
.cal-week-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.cal-week .cal-item { white-space: normal; }
.cal-legend { margin: 10px 4px 0; display: flex; gap: 6px 10px; align-items: center; flex-wrap: wrap; }
.cal-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.cal-swatch-event { background: var(--primary); }
.cal-swatch-visit { background: var(--warning); }
.cal-swatch-reminder { background: var(--success); }
@media (max-width: 1000px) { .cal-layout { grid-template-columns: 1fr; } .cal-week { grid-template-columns: 1fr; } .cal-week-day { min-height: 0; } }
@media (max-width: 720px) { .cal-day { min-height: 70px; } .cal-item { font-size: 11px; } .cal-time { display: none; } }.cal-layout:not(:has(.cal-form)) { grid-template-columns: 1fr; }
.cal-owner select { min-width: 180px; }
.share-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.share-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.share-pending { border-left: 4px solid var(--warning); margin-bottom: 18px; }
.share-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.share-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); flex-wrap: wrap; }
.share-list li:hover { background: var(--bg); }
.share-list form { margin: 0; }
.share-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (max-width: 900px) { .share-layout { grid-template-columns: 1fr; } }.cal-sources { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 4px 0; padding-top: 10px; border-top: 1px solid var(--border); }
.cal-source { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); cursor: pointer; }
.cal-source input { margin: 0; }
.cal-source:has(input:checked) { color: var(--text); }
.cal-item.is-done { opacity: .55; }
.cal-day-items .cal-item { border-left-width: 3px; }
/* ---------- Memo magasin (2e ecran du kiosque) ---------- */
.wm-body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
.wm-body.wm-rotate-180 .wm-root { transform: rotate(180deg); transform-origin: center; }
.wm-root { display: flex; flex-direction: column; gap: 14px; padding: 14px 18px 18px; min-height: 100vh; box-sizing: border-box; font-size: 17px; }
.wm-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wm-brand { display: flex; align-items: center; gap: 12px; }
.wm-brand strong { font-size: 22px; display: block; }
.wm-brand .muted { font-size: 14px; }
.wm-logo { width: 34px; height: 34px; border-radius: 6px; }
.wm-header-actions { display: flex; align-items: center; gap: 10px; }
.wm-clock { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 6px; }
.wm-btn { font-size: 16px; padding: 12px 18px; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; }
.wm-section { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.wm-section--tickets { flex: 1 1 auto; }
.wm-section-title { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 10px; }
.wm-count { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; background: var(--text); color: var(--bg-elev); font-size: 15px; font-weight: 700; }
.wm-empty { padding: 26px; text-align: center; color: var(--text-muted); background: var(--bg-elev); border: 1px dashed var(--border); border-radius: var(--radius); font-size: 18px; }
.wm-bc-strip { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 6px; }
.wm-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--bg-elev); border: 1px solid var(--border); border-left: 6px solid var(--lane, var(--primary)); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); text-decoration: none; min-width: 0; }
.wm-card:hover { text-decoration: none; }
a.wm-card:active { transform: scale(.995); }
.wm-bc { --lane: #2563eb; flex: 0 0 340px; align-items: stretch; }
.wm-bc.is-late { --lane: var(--danger); }
.wm-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-badge { display: inline-block; padding: 3px 10px; border-radius: 14px; font-size: 13px; font-weight: 700; }
.wm-badge-bc { background: #2563eb22; color: #1d4ed8; }
.wm-badge-late { background: var(--danger-soft); color: var(--danger); }
.wm-card-id { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; color: var(--text-muted); }
.wm-card-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.wm-card-sub { font-size: 15px; color: var(--text-muted); }
.wm-meta { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; }
.wm-meta > div { display: flex; gap: 8px; }
.wm-label { color: var(--text-muted); min-width: 64px; flex: none; }
.wm-progress { display: flex; flex-direction: column; gap: 4px; }
.wm-progress-bg { height: 10px; border-radius: 5px; background: var(--border); overflow: hidden; }
.wm-progress-fill { display: block; height: 100%; background: var(--success); border-radius: 5px; }
.wm-progress-label { font-size: 13.5px; color: var(--text-muted); }
.wm-qr { display: flex; align-items: center; justify-content: center; align-self: center; padding: 6px; background: #fff; border-radius: 8px; min-height: 60px; }
.wm-qr-img { display: block; }
.wm-card-action { align-self: stretch; justify-content: center; }
.wm-kanban { display: flex; gap: 14px; flex: 1 1 auto; min-height: 0; }
.wm-kanban--single .wm-lane { flex: 1 1 100%; }
.wm-lane { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius); background: var(--bg-elev); border: 1px solid var(--border); overflow: hidden; }
.wm-lane--narrow { flex: 0 0 34%; }
.wm-lane--wide { flex: 1 1 64%; }
.wm-lane-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--lane); color: #fff; font-size: 18px; font-weight: 700; }
.wm-lane-head .wm-count { background: rgba(255, 255, 255, .25); color: #fff; }
.wm-lane-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 12px; overflow-y: auto; align-content: start; }
.wm-lane--narrow .wm-lane-cards { grid-template-columns: 1fr; }
.wm-ticket.is-urgent { box-shadow: 0 0 0 2px var(--danger) inset, var(--shadow); }
.wm-ticket.is-late .wm-card-id { color: var(--danger); }
.wm-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: auto; }
.wm-card-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 14px; color: var(--text-muted); }
.wm-card-meta .icon { width: 15px; height: 15px; vertical-align: -2px; }
.wm-late { color: var(--danger); font-weight: 600; }
.wm-priority { padding: 2px 8px; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: var(--border); }
.wm-priority-urgent { background: var(--danger-soft); color: var(--danger); }
.wm-priority-high { background: var(--warning-soft); color: var(--warning); }
.wm-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; }
.wm-qr--small { align-self: flex-end; padding: 4px; }
.wm-hint { margin: 0; text-align: center; font-size: 14px; }
@media (max-width: 900px) { .wm-kanban { flex-direction: column; } .wm-lane--narrow, .wm-lane--wide { flex: 1 1 auto; } .wm-bc { flex-basis: 280px; } }
/* ---------- Outils projet : dessins, QRT, avis, relances, revue ---------- */
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.tool-grid .tool-main { min-width: 0; }
.tool-side .card { padding: 14px; }
.tool-side .card-header h3 { font-size: 15px; }
@media (max-width: 1100px) { .tool-grid { grid-template-columns: 1fr; } }
.tool-create > summary, .tool-compose > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tool-create > summary::-webkit-details-marker, .tool-compose > summary::-webkit-details-marker { display: none; }
.tool-create > summary h3, .tool-compose > summary h3 { margin: 0; }
.tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tool-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); background: var(--bg); }
.tool-tile:hover { border-color: var(--primary); }
.tool-tile .badge { align-self: flex-start; }
.tool-review-summary { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.tool-review-summary p { margin: 0 0 4px; }
.small { font-size: 13px; }
.tool-suggestions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.tool-suggestions h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; }
.tool-suggestion { border: 1px solid var(--warning); background: var(--warning-soft); border-radius: var(--radius-sm); padding: 12px; margin-top: 10px; }
.tool-suggestion-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.tool-suggestion p { margin: 6px 0; }
.tool-suggestion-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tool-suggestion-form input[type="text"] { flex: 1 1 200px; }
.tool-suggestion-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.tool-suggestion-actions form { display: flex; gap: 6px; align-items: center; }
.tool-mail-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; background: var(--bg); transition: border-color .15s, background .15s; }
.tool-mail-drop.dragging { border-color: var(--primary); background: var(--primary-soft); }
.tool-mail-drop.has-files { border-style: solid; border-color: var(--success); }
.tool-mail-drop.is-form { margin-bottom: 0; }
.tool-mail-drop-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tool-mail-drop-inner > .icon { width: 26px; height: 26px; flex: none; color: var(--primary); }
.tool-mail-drop-inner > div { flex: 1 1 260px; }
.tool-mail-drop-inner p { margin: 2px 0 0; font-size: 13px; }
.tool-mail-drop-inner strong { font-size: 14px; }
.tool-mail-drop-files { list-style: none; margin: 8px 0 0; padding: 0; font-size: 13px; }
.tool-mail-drop > span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.tool-mail-drop > span .icon { width: 20px; height: 20px; color: var(--primary); }
[data-tool-upload].dragging { outline: 2px dashed var(--primary); outline-offset: 2px; }
.tool-link-label { color: var(--primary); cursor: pointer; text-decoration: underline; }
.tool-history-list { display: flex; flex-direction: column; gap: 10px; }
.tool-history-system { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: var(--text-muted); padding: 2px 6px; border-left: 2px solid var(--border); }
.tool-history-system time { flex: none; font-variant-numeric: tabular-nums; }
.tool-pending-mark { margin: 6px 0 -4px; }
.tool-pending { border-color: var(--warning); box-shadow: 0 0 0 2px var(--warning-soft); }
.tool-reply { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.tool-reply-actions, .tool-compose-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tool-reply-actions .btn-primary, .tool-compose-actions .btn-primary { margin-left: auto; }
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 12px; }
.chip { border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 999px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--primary); }
.chip.is-primary { border-color: var(--primary); color: var(--primary); }
.tool-doc-picks { display: flex; flex-direction: column; gap: 6px; }
.tool-doc-pick { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tool-doc-pick .tool-doc-name { flex: 1 1 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-doc-pick .check { margin: 0; font-size: 13px; }
.tool-stepper { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; gap: 10px; }
.tool-stepper li { counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tool-stepper li::before { content: counter(step); grid-column: 1; grid-row: 1; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: var(--bg); border: 1px solid var(--border); }
.tool-stepper li > * { grid-column: 2; min-width: 0; }
.tool-stepper li > strong { margin-top: 5px; }
.tool-stepper li > .btn { justify-self: start; white-space: nowrap; }
.tool-stepper li.is-done::before { content: "\2713"; background: var(--success); color: #fff; border-color: var(--success); }
.tool-stepper li.is-current { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.tool-stepper li.is-current::before { background: var(--primary); color: #fff; border-color: var(--primary); }
.tool-stepper h4 { margin: 2px 0 4px; font-size: 14px; }
.tool-stepper p { margin: 0 0 4px; font-size: 14px; }
.tool-stepper .tool-step-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.tool-revisions { margin-bottom: 16px; }
.tool-people, .tool-docs, .tool-links, .tool-signed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.tool-people li, .tool-links li, .tool-signed li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.tool-people li .badge, .tool-links li .badge { font-size: 11px; }
.tool-people li form, .tool-links li form { margin-left: auto; }
.tool-docs li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.tool-docs li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-docs-folder { margin-top: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.tool-signed small { display: block; color: var(--text-muted); }
.tool-inline-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tool-inline-form input[type="number"] { width: 80px; }
.tool-inline-form select { flex: 1 1 140px; min-width: 0; }
.tool-unlink button { padding: 0 6px; }
.tool-side-action { margin: 8px 0 0; }
.tool-review-until { width: 150px; }
.tool-rich { line-height: 1.5; word-break: break-word; }
.tool-rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.tool-rich p { margin: 0 0 8px; }
.tool-rich blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding: 4px 12px; color: var(--text-muted); }
.tool-preview { margin-top: 12px; }
.tool-preview summary { cursor: pointer; }
.tool-preview .tool-rich { margin-top: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
/* Editeur riche */
.tool-editor { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.tool-editor:focus-within { border-color: var(--primary); }
.tool-editor.dragging { outline: 2px dashed var(--primary); }
.tool-editor.is-busy { opacity: .6; pointer-events: none; }
.tool-editor-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 8px; border-bottom: 1px solid var(--border); background: var(--bg); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tool-editor-btn { border: 1px solid transparent; background: transparent; color: var(--text); min-width: 30px; height: 28px; border-radius: 5px; padding: 0 8px; cursor: pointer; font-size: 14px; }
.tool-editor-btn:hover { background: var(--bg-elev); border-color: var(--border); }
.tool-editor-btn.is-text { font-size: 13px; }
.tool-editor-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.tool-editor-select { height: 28px; font-size: 13px; padding: 0 6px; }
.tool-editor-status { margin-left: auto; font-size: 13px; }
.tool-editor-area { min-height: 110px; padding: 10px 12px; outline: none; line-height: 1.5; }
.tool-editor-area:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.tool-editor-area img { max-width: 100%; height: auto; }
.tool-editor-area p { margin: 0 0 6px; }
/* Page titre */
.tool-title-page-dialog { width: min(1180px, calc(100vw - 40px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-lg); }
.tool-title-page-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; padding: 18px; }
@media (max-width: 960px) { .tool-title-page-body { grid-template-columns: 1fr; } }
.tool-title-page-stage { position: relative; min-height: 320px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 12px; }
.tool-title-page-stage > p { align-self: center; }
.tool-title-canvas { display: block; box-shadow: var(--shadow); background: #fff; }
.tool-title-layer { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.tool-title-box { position: absolute; white-space: nowrap; line-height: 1; padding: 1px 3px; border: 1px dashed var(--primary); background: rgba(255, 255, 255, .55); color: #000; cursor: move; user-select: none; font-family: Helvetica, Arial, sans-serif; touch-action: none; }
.tool-title-box.is-moving { border-style: solid; background: var(--primary-soft); }
.tool-title-page-panel { display: flex; flex-direction: column; gap: 10px; }
.tool-title-fields { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.tool-title-field { display: grid; grid-template-columns: 90px minmax(0, 1fr) 62px 30px; gap: 6px; align-items: center; font-size: 13px; }
.tool-title-field label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-title-field .icon-btn { width: 28px; height: 28px; }
.tool-title-size { width: 62px; }
/* Revue */
.review-items { display: flex; flex-direction: column; gap: 12px; }
.review-item { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.review-item.review-late { border-left: 4px solid var(--danger); }
.review-item.review-warn { border-left: 4px solid var(--warning); }
.review-item-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 4px; }
.review-item p { margin: 4px 0; }
.review-item-form { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.review-item-form input[type="text"] { flex: 1 1 260px; }
.review-item-form .check { margin: 0; font-size: 13px; }
.review-summary { white-space: normal; }
.tool-links a.is-active { font-weight: 700; }

/* ---------- Outils projet : design retenu (liste pleine largeur + fiche en nouvelle fenetre) ---------- */
.content:has(.tools-hero), .content:has(.tools-fiche-head) { max-width: 1600px; }
.tools-hero {
    position: relative; overflow: visible;
    background: linear-gradient(135deg, #0a0a0a 0%, #1f1f1f 55%, #3a1416 100%);
    color: #f2f2f2; border-radius: 16px; padding: 22px 24px; margin-bottom: 18px;
    box-shadow: 0 12px 28px rgba(10, 10, 10, .18);
}
.tools-hero-glow { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.tools-hero-glow::after { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(221, 29, 35, .35), transparent 70%); }
.tools-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; z-index: 1; }
.tools-hero-lead { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.tools-hero-back { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #e5e7eb; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); margin-top: 6px; }
.tools-hero-back:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.tools-hero-back .icon { width: 18px; height: 18px; }
.tools-hero-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: #a3a3a3; margin: 0 0 2px; }
.tools-hero h2 { margin: 0; font-size: 24px; color: #fff; }
.tools-hero-info { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; }
.tools-hero-info-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: help;
    color: #e5e7eb; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22);
}
.tools-hero-info-btn:hover, .tools-hero-info-btn:focus-visible { background: rgba(255, 255, 255, .16); color: #fff; outline: none; }
.tools-hero-info-btn .icon { width: 15px; height: 15px; }
.tools-hero-info-pop {
    display: none; position: absolute; top: calc(100% + 10px); right: 0;
    width: min(380px, calc(100vw - 48px)); padding: 14px 16px 6px;
    background: #fff; color: #27272a; border-radius: 14px; text-align: left;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .28); z-index: 5;
    font-size: 13px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none;
}
.tools-hero-info-pop::before {
    content: ""; position: absolute; top: -6px; right: 7px;
    border: 6px solid transparent; border-bottom-color: #fff; border-top: 0;
}
.tools-hero-info:hover .tools-hero-info-pop,
.tools-hero-info:focus-within .tools-hero-info-pop { display: block; }
.tools-hero .tools-hero-info-pop p { margin: 0 0 10px; color: #52525b; font-size: 13px; }
.tools-info { margin: 0; }
.tools-info div { margin: 0 0 10px; }
.tools-info dt { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #18181b; }
.tools-info dt i { width: 8px; height: 8px; border-radius: 50%; background: #a1a1aa; flex: none; }
.tools-info dt i.is-review { background: #ef4444; }
.tools-info dt i.is-late { background: #f59e0b; }
.tools-info dt i.is-ok { background: #22c55e; }
.tools-info dd { margin: 2px 0 0 16px; color: #3f3f46; }
.tools-hero p { margin: 4px 0 0; color: #cbd5e1; font-size: 14px; }
.tools-hero p a { color: #fff; }
.tools-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tools-hero-actions form { display: contents; }
.tools-hero .btn { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); color: #fff; }
.tools-hero .btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.tools-hero .btn-primary { background: var(--brand); border-color: var(--brand); }
.tools-hero .btn-primary:hover { background: #b9151b; border-color: #b9151b; }
.tools-hero .icon-btn { color: #fff; }
.tools-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 18px; position: relative; z-index: 0; }
.tools-kpi { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px 14px; }
a.tools-kpi { display: block; text-decoration: none; color: inherit; }
a.tools-kpi:hover { background: rgba(255, 255, 255, .12); color: inherit; }
a.tools-kpi.is-active { background: rgba(255, 255, 255, .16); border-color: #fff; }
.tools-kpi strong { display: block; font-size: 24px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #fff; }
.tools-kpi span { font-size: 12.5px; color: #cbd5e1; }
.tools-kpi.is-late strong { color: #fbbf24; }
.tools-kpi.is-review strong { color: #f87171; }
.tools-kpi.is-ok strong { color: #86efac; }
.tools-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; position: relative; }
.tools-pill { border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #e5e7eb; border-radius: 999px; padding: 5px 12px; font-size: 13px; text-decoration: none; }
.tools-pill:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.tools-pill small { opacity: .7; margin-left: 4px; }
.tools-pill.is-active { background: #fff; color: #0a0a0a; border-color: #fff; font-weight: 600; }
.tools-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tools-toolbar .spacer { flex: 1 1 auto; }

.tools-table-card { border-radius: 16px; padding: 0; overflow: hidden; }
.tools-table th:first-child, .tools-table td:first-child { padding-left: 16px; }
.tools-table th:last-child, .tools-table td:last-child { padding-right: 16px; }
.tools-table td { vertical-align: middle; }
.tools-table tbody tr.is-link { cursor: pointer; }
.tools-table tbody tr.is-link:hover td { background: var(--bg); }
.tools-table tbody tr.is-late td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
.tools-table tbody tr.is-review td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.tools-table .c-act { width: 1%; white-space: nowrap; }
.tools-table .c-act .btn { min-width: 150px; justify-content: center; }
.tools-table .c-num { white-space: nowrap; }
.tools-table .c-status { white-space: nowrap; }
.tools-table .c-open { width: 1%; white-space: nowrap; text-align: right; }
.tools-table .c-open .icon { color: var(--text-muted); width: 16px; height: 16px; }
.tools-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tools-number { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 700; color: #1e40af; text-decoration: none; font-size: 14px; }
a.tools-number:hover { text-decoration: underline; }
[data-theme="dark"] .tools-number { color: #93c5fd; }
.tools-code { display: block; font-size: 11.5px; color: var(--text-muted); font-family: ui-monospace, Menlo, Consolas, monospace; background: none; padding: 0; }
.tools-tag { font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.tools-title { font-weight: 600; }
.tools-sub { display: block; font-size: 12.5px; color: var(--text-muted); }
.tools-disc { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); }
.tools-ball-client { color: var(--warning); font-weight: 600; }
.tools-late { color: var(--warning); font-weight: 600; }
.tools-overdue { color: var(--danger); font-weight: 700; }
.tools-amount { font-variant-numeric: tabular-nums; }
.tools-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.tools-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tools-chip.is-solid { background: var(--danger); color: #fff; }
.tools-chip.is-solid::before { display: none; }
.tools-chip.badge-info { background: #e0e7ff; color: #3730a3; }
[data-theme="dark"] .tools-chip.badge-info { background: #1e1b4b; color: #c7d2fe; }
.tools-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); flex-wrap: wrap; }

/* Fiche */
.tools-fiche-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); text-decoration: none; margin-bottom: 10px; }
.tools-fiche-back:hover { color: var(--text); }
.tools-fiche-back .icon { width: 16px; height: 16px; }
.tools-fiche-head { border-radius: 16px; padding: 18px 22px; margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: start; }
.tools-fiche-title { min-width: 0; }
.tools-fiche-number { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tools-fiche-number .tools-number { font-size: 15px; }
.tools-fiche-number .tools-code { display: inline; }
.tools-fiche-head h2 { margin: 4px 0 8px; font-size: 20px; line-height: 1.3; }
.tools-chips { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; font-size: 13px; }
.tools-fiche-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.tools-fiche-actions form { display: contents; }
.tools-workflow { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 4px; grid-column: 1 / -1; max-width: 720px; }
.tools-wf-step { text-align: center; font-size: 12px; color: var(--text-muted); position: relative; padding-top: 20px; }
.tools-wf-step::before { content: ""; position: absolute; top: 5px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--bg); border: 2px solid var(--border); box-sizing: border-box; }
.tools-wf-step::after { content: ""; position: absolute; top: 11px; left: calc(50% + 9px); right: calc(-50% + 9px); height: 2px; background: var(--border); }
.tools-wf-step:last-child::after { display: none; }
.tools-wf-step.is-done::before { background: var(--success); border-color: var(--success); }
.tools-wf-step.is-done::after { background: var(--success); }
.tools-wf-step.is-current::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.tools-wf-step.is-current { color: var(--text); font-weight: 600; }
.tools-wf-step small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.tools-alert { border-color: var(--danger); background: var(--danger-soft); box-shadow: none; }
.tools-alert .card-header h3 { color: var(--danger); }
.tools-alert .card-header { border-bottom-color: rgba(220, 38, 38, .15); }
.tools-decisions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools-decisions form { display: contents; }

@media (max-width: 900px) {
    .tools-hero { padding: 18px 16px; border-radius: 14px; }
    .tools-hero h2 { font-size: 20px; }
    .tools-hero-actions { width: 100%; }
    .tools-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
    .tools-kpis { grid-template-columns: repeat(2, 1fr); }
    .tools-table-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
    .tools-table-card .table-wrap { overflow: visible; }
    .tools-table, .tools-table tbody { display: block; }
    .tools-table thead { display: none; }
    .tools-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; box-shadow: 0 6px 16px rgba(15, 23, 42, .05); }
    .tools-table tbody tr.is-late { box-shadow: inset 4px 0 0 var(--warning), 0 6px 16px rgba(15, 23, 42, .05); }
    .tools-table tbody tr.is-review { box-shadow: inset 4px 0 0 var(--danger), 0 6px 16px rgba(15, 23, 42, .05); }
    .tools-table tbody tr.is-link:hover td { background: transparent; }
    .tools-table tbody tr td:first-child { box-shadow: none !important; }
    .tools-table td, .tools-table th { display: block; padding: 0; border: 0; }
    .tools-table td:first-child, .tools-table td:last-child { padding: 0; }
    .tools-table .c-num { grid-column: 1; order: 1; }
    .tools-table .c-status { grid-column: 2; grid-row: 1; order: 2; text-align: right; }
    .tools-table .c-title { grid-column: 1 / -1; order: 3; margin: 2px 0 4px; }
    .tools-table .c-meta { grid-column: 1 / -1; order: 4; font-size: 13px; color: var(--text-muted); }
    .tools-table .c-meta::before { content: attr(data-label) " : "; font-weight: 600; }
    .tools-table .c-meta:empty { display: none; }
    .tools-table .c-act { grid-column: 1 / -1; order: 9; margin-top: 8px; white-space: normal; }
    .tools-table .c-act .btn { width: 100%; }
    .tools-table .c-open { display: none; }
    .tools-table .num { text-align: left; }
    .tools-table tr > td[colspan] { grid-column: 1 / -1; }
    .tools-table-foot { border-top: 0; padding: 6px 4px; }
    .tools-fiche-head { grid-template-columns: 1fr; padding: 16px; }
    .tools-fiche-actions { justify-content: stretch; }
    .tools-fiche-actions .btn { flex: 1 1 auto; justify-content: center; }
    .tools-workflow { max-width: none; }
    .tools-wf-step small { display: none; }
}