/* DT Pilot : même identité visuelle que DT Maint (Tchindora Inc).
   Polices : Inter (texte), Barlow Condensed (titres et chiffres), JetBrains Mono (numéros). */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(/fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/fonts/barlow-condensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(/fonts/barlow-condensed-700.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-display: swap; src: url(/fonts/jetbrains-mono-400.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-display: swap; src: url(/fonts/jetbrains-mono-500.woff2) format('woff2'); }

:root {
  --bg: #0c0f14;
  --side: #0a0d11;
  --panel: #141922;
  --panel2: #1a2029;
  --panel3: #212835;
  --line: #252d39;
  --line2: #2f3947;
  --tx: #e7ebf1;
  --mu: #8a96a8;
  --mu2: #5f6b7d;
  --amber: #ff8803;
  --amber-h: #ff9a2a;
  --amber-d: rgba(255, 136, 3, 0.14);
  --green: #3fb950;
  --green-d: rgba(63, 185, 80, 0.14);
  --red: #f85149;
  --red-d: rgba(248, 81, 73, 0.14);
  --blue: #4ea1ff;
  --blue-d: rgba(78, 161, 255, 0.14);
  --violet: #a78bfa;
  --violet-d: rgba(167, 139, 250, 0.14);
  --yellow: #e3b341;
  --yellow-d: rgba(227, 179, 65, 0.15);
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --radius: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--tx); font: 15px/1.5 Inter, 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--amber-h); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.15; }
h1 { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: 0.01em; }
h2 { font-size: 17px; font-weight: 600; }
h3 { font-size: 14px; font-weight: 600; }
p { margin: 0; }
.muted { color: var(--mu); }
.small { font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 0.92em; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
::selection { background: var(--amber-d); }

.boot, .boot-error { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 18px; color: var(--mu); text-align: center; padding: 20px; }
.boot img { opacity: 0.85; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.4; } }

/* ---------- Écran de connexion (repris de DT Maint) ---------- */
.login-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 560px); min-height: 100vh; background: var(--bg); }
.login-hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 20% 110%, rgba(255, 136, 3, 0.16), transparent 60%), linear-gradient(160deg, #10151c, #0a0d11); border-right: 1px solid var(--line); padding: 56px 64px; display: flex; flex-direction: column; }
.login-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.35; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); }
.login-hero > * { position: relative; }
.login-brand { display: grid; gap: 8px; justify-items: start; }
.login-brand img { width: 300px; height: auto; display: block; margin-left: -4px; }
.login-tagline { margin: 4px 0 0 2px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber); }
.login-pitch { margin-top: auto; }
.login-pitch h2 { font-family: var(--display); font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 0.01em; max-width: 640px; }
.login-pitch h2 em { font-style: normal; color: var(--amber); }
.login-pitch p { color: var(--mu); font-size: 16px; max-width: 540px; margin-top: 18px; line-height: 1.6; }
.login-features { display: flex; gap: 36px; margin: 40px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); flex-wrap: wrap; list-style: none; }
.login-features li { max-width: 200px; }
.login-features b { display: block; font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: 0.01em; }
.login-features span { display: block; color: var(--mu); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 40px 64px; }
.login-box { width: 100%; max-width: 400px; }
.login-box h1 { font-size: 34px; }
.login-sub { color: var(--mu); margin: 6px 0 30px; font-size: 14px; }
.login-note { color: var(--mu); font-size: 13.5px; line-height: 1.6; margin-bottom: 20px; }
.login-fields { display: grid; gap: 16px; }
.login-fields .field { margin: 0; }
.login-fields input:not([type=checkbox]) { height: 44px; }
.login-go { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; border: 0; border-radius: 9px; background: var(--amber); color: #1a1204; font-weight: 700; font-size: 15px; text-decoration: none; margin-top: 4px; }
.login-go:hover { filter: brightness(1.06); text-decoration: none; }
.login-go:disabled { opacity: 0.6; cursor: wait; }
.login-link { background: none; border: 0; color: var(--mu); font-size: 13.5px; padding: 4px 0; justify-self: center; }
.login-link:hover { color: var(--tx); text-decoration: underline; }
.login-error { color: var(--red); font-size: 13.5px; min-height: 0; }
.login-error:empty { display: none; }
.login-parent { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--mu2); font-size: 12.5px; text-align: center; }
.login-parent b { color: var(--mu); font-weight: 600; }
.login-mobile-brand { display: none; margin-bottom: 26px; }
.hint { color: var(--mu2); font-size: 12.5px; margin-top: -6px; }
.lang-switch { display: flex; justify-content: flex-end; margin-bottom: 34px; }
.lang-switch button { border: 1px solid var(--line2); background: var(--panel); color: var(--mu); padding: 6px 12px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; }
.lang-switch button:first-child { border-radius: 7px 0 0 7px; }
.lang-switch button:last-child { border-radius: 0 7px 7px 0; border-left: 0; }
.lang-switch button[aria-pressed='true'] { background: var(--amber-d); color: var(--amber-h); border-color: rgba(255, 136, 3, 0.45); }
.pw { position: relative; }
.pw input { padding-right: 44px; width: 100%; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--mu); padding: 6px; border-radius: 6px; display: grid; }
.pw-eye:hover { color: var(--tx); background: var(--panel2); }
@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-form { padding: 32px 20px; align-items: flex-start; }
  .login-mobile-brand { display: block; }
  .login-mobile-brand img { width: 220px; height: auto; }
  .lang-switch { margin-bottom: 18px; }
}

/* ---------- Champs ---------- */
input, select, textarea { background: #0f141b; border: 1px solid var(--line2); border-radius: 7px; padding: 8px 11px; min-height: 38px; width: 100%; color: var(--tx); transition: border-color 0.12s, box-shadow 0.12s; }
textarea { min-height: 74px; resize: vertical; line-height: 1.45; }
select { padding-right: 28px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--mu) 50%), linear-gradient(135deg, var(--mu) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(255, 136, 3, 0.7); box-shadow: 0 0 0 3px var(--amber-d); }
input::placeholder, textarea::placeholder { color: var(--mu2); }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; min-height: 0; accent-color: var(--amber); padding: 0; }
input[readonly] { color: var(--mu); }
.field { display: grid; gap: 6px; margin: 0; }
.field > span, .field > label { font-size: 12.5px; color: var(--mu); font-weight: 500; }
.field small { color: var(--mu2); font-size: 12px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--mu); cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.span2 { grid-column: span 2; }
.span3 { grid-column: span 3; }
.stack { display: grid; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel2); color: var(--tx); font-weight: 600; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.btn:hover { border-color: var(--mu2); text-decoration: none; background: var(--panel3); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: #1a1204; }
.btn.primary:hover { filter: brightness(1.07); background: var(--amber); }
.btn.success { background: var(--green); border-color: var(--green); color: #04150a; }
.btn.danger { background: transparent; border-color: rgba(248, 81, 73, 0.5); color: var(--red); }
.btn.danger:hover { background: var(--red-d); }
.btn.ghost { background: transparent; }
.btn.sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 6px; gap: 5px; }
.btn .ic { width: 16px; height: 16px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--mu); padding: 0; }
.icon-btn:hover { color: var(--tx); background: var(--panel2); border-color: var(--line); }
.icon-btn.danger:hover { color: var(--red); background: var(--red-d); }
.link-btn { background: none; border: 0; padding: 0; color: var(--amber-h); font-weight: 600; font-size: inherit; }
.link-btn:hover { text-decoration: underline; }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.seg button, .seg a { border: 0; background: var(--panel); color: var(--mu); padding: 7px 13px; font-size: 13px; font-weight: 600; border-right: 1px solid var(--line2); text-decoration: none; }
.seg > :last-child { border-right: 0; }
.seg .on, .seg [aria-pressed='true'] { background: var(--amber-d); color: var(--amber-h); }

/* ---------- Coque de l'application ---------- */
body.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--side) 247px, var(--line) 247px 248px, var(--bg) 248px); }
#root { display: contents; }
body.login-page #root, body.print-mode #root, body.booting #root { display: block; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 12px 16px; }
.side-brand { display: block; padding: 2px 8px 0; }
.side-brand img { width: 190px; height: auto; display: block; }
.side-parent { color: var(--mu2); font-size: 11.5px; padding: 6px 10px 18px; }
.side-parent b { color: var(--mu); font-weight: 600; }
.nav { display: grid; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 11px; border-radius: 7px; color: var(--mu); font-weight: 500; font-size: 14px; text-decoration: none; }
.nav-item:hover { background: var(--panel2); color: var(--tx); text-decoration: none; }
.nav-item.active { background: var(--panel2); color: var(--tx); box-shadow: inset 3px 0 0 var(--amber); }
.nav-item.active .ic { color: var(--amber); }
.side-foot { margin-top: auto; padding: 16px 10px 0; border-top: 1px solid var(--line); }
.shop-name { font-weight: 600; font-size: 13px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 62px; padding: 0 26px; background: rgba(12, 15, 20, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.menu-btn { display: none; }
.global-search { position: relative; flex: 1; max-width: 460px; }
.global-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mu2); }
.global-search input { padding-left: 36px; height: 38px; background: var(--panel); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.profile { position: relative; }
.profile summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 30px; border: 1px solid var(--line); }
.profile summary::-webkit-details-marker { display: none; }
.profile summary:hover { border-color: var(--line2); }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--panel3); color: var(--amber-h); font-weight: 700; font-size: 12.5px; flex: none; }
.who { display: grid; line-height: 1.2; }
.who b { font-size: 13px; font-weight: 600; }
.who small { color: var(--mu); font-size: 11.5px; }
.dropdown { position: relative; }
.dropdown summary { list-style: none; }
.dropdown summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); padding: 6px; z-index: 50; }
.menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
.menu-head small { color: var(--mu); font-size: 12px; overflow-wrap: anywhere; }
.menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 6px; text-align: left; font-size: 13.5px; color: var(--tx); }
.menu-pop button:hover { background: var(--panel2); }
.now { display: flex; align-items: baseline; gap: 10px; padding: 0 6px; white-space: nowrap; user-select: none; }
.now-date { color: var(--mu); font-size: 14px; }
.now-time { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--tx); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.clock-badge { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--green-d); color: var(--green); font-size: 13px; font-weight: 600; }
.clock-badge b { font-family: var(--mono); font-weight: 500; }
.clock-badge:hover { text-decoration: none; filter: brightness(1.15); }
#view { outline: none; }
.page { padding: 26px 30px 60px; max-width: 1560px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.page-head p { color: var(--mu); margin-top: 4px; font-size: 14px; }
.crumb { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu2); font-weight: 600; margin-bottom: 4px; }
.crumb a { color: var(--mu); }
.eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu); font-weight: 600; }

/* ---------- Cartes, KPI, tableaux ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.card-pad { padding: 18px 20px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-body { padding: 16px 18px; }
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.kpi .eyebrow { display: block; line-height: 1.35; }
.kpi b { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: 0.01em; margin-top: 4px; line-height: 1.1; white-space: nowrap; }
.kpi small { color: var(--mu2); font-size: 12px; }
.kpi.warn b { color: var(--amber-h); }
.kpi.bad b { color: var(--red); }
a.kpi:hover { border-color: var(--line2); text-decoration: none; }
a.kpi { color: inherit; }
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu); font-weight: 600; background: var(--panel2); padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: rgba(255, 255, 255, 0.02); }
.tbl .sub { display: block; color: var(--mu); font-size: 12.5px; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl tfoot td { font-weight: 600; background: var(--panel2); }
.empty { display: grid; justify-items: center; gap: 10px; padding: 46px 20px; color: var(--mu); text-align: center; }
.empty .ic { width: 30px; height: 30px; color: var(--mu2); }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: var(--panel3); color: var(--mu); }
.st-estimate { background: var(--violet-d); color: var(--violet); }
.st-in_progress { background: var(--blue-d); color: var(--blue); }
.st-completed { background: var(--green-d); color: var(--green); }
.st-posted { background: var(--amber-d); color: var(--amber-h); }
.st-cancelled { background: var(--panel3); color: var(--mu2); text-decoration: line-through; }
.st-paid { background: var(--green-d); color: var(--green); }
.st-unpaid { background: var(--red-d); color: var(--red); }
.st-pending { background: var(--yellow-d); color: var(--yellow); }
.st-approved { background: var(--green-d); color: var(--green); }
.st-declined { background: var(--red-d); color: var(--red); }
.sync-pill { gap: 6px; text-decoration: none !important; height: 26px; }
.sync-pill .ic { width: 13px; height: 13px; }
.pill.warn { background: var(--amber-d); color: var(--amber-h); }
.pill.bad { background: var(--red-d); color: var(--red); }
.pill.ok { background: var(--green-d); color: var(--green); }
.pill.info { background: var(--blue-d); color: var(--blue); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 14px; border: 0; background: none; color: var(--mu); font-weight: 600; font-size: 13.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; text-decoration: none; display: inline-flex; gap: 7px; align-items: center; }
.tabs .on { color: var(--tx); border-bottom-color: var(--amber); }
.tabs .count { background: var(--panel3); color: var(--mu); border-radius: 9px; padding: 0 7px; font-size: 11px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .search { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.toolbar .search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--mu2); }
.toolbar .search input { padding-left: 36px; }

/* ---------- Tableau de bord (atelier) ---------- */
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lane { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; min-height: 200px; }
.lane-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.lane-head h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; display: flex; gap: 8px; align-items: center; }
.lane-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.lane-body { padding: 10px; display: grid; gap: 9px; align-content: start; }
.ro-card { display: block; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; color: inherit; text-decoration: none; transition: border-color 0.12s, transform 0.12s; }
.ro-card:hover { border-color: var(--line2); text-decoration: none; transform: translateY(-1px); }
.ro-card .top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ro-card .no { font-family: var(--mono); font-size: 12.5px; color: var(--amber-h); }
.ro-card .amt { font-family: var(--mono); font-size: 12.5px; color: var(--tx); }
.ro-card .cust { font-weight: 600; margin-top: 5px; font-size: 14px; }
.ro-card .veh { color: var(--mu); font-size: 12.5px; }
.ro-card .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.ro-card .meta { display: flex; justify-content: space-between; color: var(--mu2); font-size: 11.5px; margin-top: 8px; gap: 8px; }
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.progress span { display: block; height: 100%; background: var(--green); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.side-list { display: grid; gap: 14px; }
.list-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 16px; border-bottom: 1px solid var(--line); color: inherit; }
.list-item:last-child { border-bottom: 0; }
a.list-item:hover { background: var(--panel2); text-decoration: none; }
.list-item .time { font-family: var(--mono); font-size: 12.5px; color: var(--amber-h); min-width: 46px; }
.alert-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: var(--tx); font-size: 13.5px; }
.alert-row:last-child { border-bottom: 0; }
.alert-row .ic { color: var(--amber); }
.alert-row b { margin-left: auto; font-family: var(--mono); }
a.alert-row:hover { background: var(--panel2); text-decoration: none; }

/* ---------- Bon de travail ---------- */
.ro-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ro-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ro-title h1 { font-size: 34px; }
.steps { display: flex; gap: 0; margin: 4px 0 18px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel); }
.steps span { flex: 1; text-align: center; padding: 9px 6px; font-size: 12.5px; font-weight: 600; color: var(--mu2); border-right: 1px solid var(--line); white-space: nowrap; }
.steps span:last-child { border-right: 0; }
.steps .done { color: var(--green); background: rgba(63, 185, 80, 0.06); }
.steps .now { color: #1a1204; background: var(--amber); }
.ro-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; }
.ro-side { display: grid; gap: 14px; }
.info-card { padding: 14px 16px; border-bottom: 1px solid var(--line); }
.info-card:last-child { border-bottom: 0; }
.info-card h3 { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.info-card .big { font-weight: 600; font-size: 15px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--mu); }
.kv dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.job { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.job.declined { opacity: 0.7; }
.job.declined .job-name { text-decoration: line-through; }
.job-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); flex-wrap: wrap; }
.job-head .job-no { font-family: var(--mono); color: var(--mu2); font-size: 12.5px; }
.job-name { flex: 1; min-width: 180px; font-weight: 600; font-size: 15px; background: transparent; border-color: transparent; padding: 4px 8px; min-height: 32px; }
.job-name:hover { border-color: var(--line2); }
.job-body { padding: 12px 14px; display: grid; gap: 12px; }
.ccc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ccc textarea { min-height: 62px; font-size: 13.5px; }
.lines { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; min-width: 640px; }
.lines th.total { font-family: inherit; font-size: 10.5px; }
.lines th { white-space: nowrap; text-align: left; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu2); font-weight: 600; padding: 4px 6px; }
.lines td { padding: 3px 4px; vertical-align: middle; }
.lines input, .lines select { min-height: 32px; height: 32px; padding: 4px 8px; font-size: 13px; background: transparent; border-color: transparent; }
.lines input:hover, .lines select:hover { border-color: var(--line2); }
.lines input:focus, .lines select:focus { background: #0f141b; }
.lines .w-qty { width: 78px; }
.lines .w-money { width: 96px; }
.part-sub { display: flex; gap: 10px; align-items: center; padding: 0 8px; font-size: 11.5px; color: var(--mu2); white-space: nowrap; overflow: hidden; }
.part-sub .cost { display: inline-flex; align-items: center; gap: 4px; }
.part-sub .cost input { width: 74px; }
.part-sub input { width: 140px; min-height: 24px !important; height: 24px !important; font-size: 11.5px !important; padding: 2px 6px !important; }
.lines .w-state { width: 132px; }
.lines .w-pn { width: 130px; }
.lines .total { width: 100px; text-align: right; font-family: var(--mono); font-size: 12.5px; padding-right: 8px; }
.lines .act { width: 36px; }
.lines .kind { width: 30px; color: var(--mu2); }
.job-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); }
.job-foot .job-total { margin-left: auto; font-family: var(--mono); font-weight: 500; }
.decision { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; }
.decision button { border: 0; background: var(--panel); color: var(--mu); padding: 6px 11px; font-size: 12.5px; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; border-right: 1px solid var(--line2); }
.decision button:last-child { border-right: 0; }
.decision .on.approved { background: var(--green-d); color: var(--green); }
.decision .on.declined { background: var(--red-d); color: var(--red); }
.decision .on.pending { background: var(--yellow-d); color: var(--yellow); }
.decision button .ic { width: 14px; height: 14px; }
.totals { font-size: 13.5px; }
.totals .line { display: flex; justify-content: space-between; padding: 6px 16px; }
.totals .line span:last-child { font-family: var(--mono); font-size: 13px; }
.totals .sep { border-top: 1px solid var(--line); margin: 6px 0; }
.totals .grand { font-size: 17px; font-weight: 700; padding: 10px 16px; }
.totals .grand span:last-child { font-size: 17px; color: var(--amber-h); }
.totals .bal span:last-child { color: var(--red); font-weight: 600; }
.totals .bal.zero span:last-child { color: var(--green); }
.totals .note { color: var(--mu2); font-size: 12px; padding: 4px 16px 10px; }
.insp-section { margin-bottom: 14px; }
.insp-section h3 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mu); margin: 0 0 6px; }
.insp-item { display: grid; grid-template-columns: minmax(150px, 1fr) auto minmax(160px, 1.3fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.insp-item:last-child { border-bottom: 0; }
.insp-item input { min-height: 32px; height: 32px; font-size: 13px; }
.lights { display: inline-flex; gap: 4px; }
.lights button { width: 30px; height: 28px; border-radius: 6px; border: 1px solid var(--line2); background: var(--panel); color: var(--mu2); display: grid; place-items: center; padding: 0; font-weight: 700; font-size: 11px; }
.lights button .ic { width: 14px; height: 14px; }
.lights .on-ok { background: var(--green-d); border-color: var(--green); color: var(--green); }
.lights .on-attention { background: var(--yellow-d); border-color: var(--yellow); color: var(--yellow); }
.lights .on-urgent { background: var(--red-d); border-color: var(--red); color: var(--red); }
.lights .on-na { background: var(--panel3); border-color: var(--mu2); color: var(--tx); }
.insp-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.photo { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: var(--panel2); }
.photo img { width: 100%; height: 110px; object-fit: cover; display: block; cursor: zoom-in; }
.photo figcaption { font-size: 11.5px; color: var(--mu); padding: 5px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo .icon-btn { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, 0.6); width: 28px; height: 28px; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--mu2); font-family: var(--mono); font-size: 12px; }
.note-box { white-space: pre-wrap; overflow-wrap: anywhere; }
.declined-hint { border: 1px dashed var(--line2); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--mu); }

/* ---------- Fenêtres modales ---------- */
dialog.modal { border: 1px solid var(--line2); background: var(--panel); color: var(--tx); border-radius: 12px; padding: 22px 24px; width: 620px; max-width: calc(100vw - 24px); max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6); }
dialog.modal.wide { width: 980px; }
dialog.modal.small { width: 440px; }
dialog.modal::backdrop { background: rgba(3, 5, 8, 0.72); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-head h2 { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.01em; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.modal-actions .left { margin-right: auto; }
.result-list { display: grid; gap: 6px; max-height: 300px; overflow: auto; margin-top: 8px; }
.result { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--tx); }
.result:hover, .result.on { border-color: var(--amber); }
.result .sub { color: var(--mu); font-size: 12.5px; display: block; }
.chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgba(255, 136, 3, 0.4); background: var(--amber-d); border-radius: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line2); background: var(--panel2); border-radius: 16px; padding: 5px 11px; font-size: 12.5px; color: var(--tx); }
.chip.on { border-color: var(--amber); background: var(--amber-d); color: var(--amber-h); }
.section-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mu); font-weight: 600; margin: 6px 0 -4px; }
.lightbox img { max-width: 100%; max-height: 75vh; display: block; margin: auto; border-radius: 8px; }

/* ---------- Calendrier ---------- */
.cal { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.cal-head { display: grid; border-bottom: 1px solid var(--line); background: var(--panel2); }
.cal-head div { padding: 9px 8px; font-size: 12.5px; font-weight: 600; color: var(--mu); border-left: 1px solid var(--line); text-align: center; }
.cal-head div.today { color: var(--amber-h); }
.cal-body { display: grid; position: relative; }
.cal-hours { border-right: 1px solid var(--line); }
.cal-hour { height: 56px; font-size: 11px; color: var(--mu2); padding: 3px 6px; text-align: right; font-family: var(--mono); border-bottom: 1px solid var(--line); }
.cal-col { position: relative; border-left: 1px solid var(--line); }
.cal-slot { height: 28px; border-bottom: 1px dashed rgba(37, 45, 57, 0.6); cursor: pointer; }
.cal-slot:nth-child(2n) { border-bottom-style: solid; border-bottom-color: var(--line); }
.cal-slot:hover { background: rgba(255, 136, 3, 0.05); }
.appt { position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 4px 7px; font-size: 12px; line-height: 1.3; overflow: hidden; background: var(--blue-d); border-left: 3px solid var(--blue); color: var(--tx); cursor: pointer; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; }
.appt:hover { filter: brightness(1.2); }
.appt b { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt span { color: var(--mu); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appt.st-confirmed { border-left-color: var(--green); background: var(--green-d); }
.appt.st-arrived { border-left-color: var(--amber); background: var(--amber-d); }
.appt.st-no_show, .appt.st-cancelled { opacity: 0.45; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--red); z-index: 2; pointer-events: none; }

/* ---------- Graphique simple ---------- */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; padding: 10px 4px 0; border-bottom: 1px solid var(--line2); }
.bars div { flex: 1; background: var(--amber); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; opacity: 0.85; }
.bars div:hover { opacity: 1; }
.bars-x { display: flex; gap: 4px; padding: 4px 4px 0; }
.bars-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--mu2); overflow: hidden; white-space: nowrap; }

/* ---------- Notifications ---------- */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 1000; display: grid; gap: 8px; pointer-events: none; }
.toast { background: var(--panel3); border: 1px solid var(--line2); border-left: 3px solid var(--green); padding: 11px 16px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 13.5px; max-width: 380px; animation: tin 0.18s ease-out; transition: opacity 0.3s, transform 0.3s; }
.toast.error { border-left-color: var(--red); }
.toast.out { opacity: 0; transform: translateY(6px); }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Écrans plus petits ---------- */
@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .ro-layout { grid-template-columns: minmax(0, 1fr); }
  .ro-main, .ro-side { min-width: 0; }
  .ccc { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  body.app { grid-template-columns: 1fr; background: var(--bg); }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 60; transform: translateX(-100%); transition: transform 0.2s; box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5); }
  body.menu-open .side { transform: none; }
  .menu-btn { display: inline-grid; }
  .topbar { padding: 0 14px; gap: 10px; }
  .who { display: none; }
  .top-right .btn span { display: none; }
  .page { padding: 18px 14px 50px; }
  .board { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; }
  .span2, .span3 { grid-column: auto; }
  .insp-item { grid-template-columns: 1fr auto; }
  .insp-item input { grid-column: 1 / -1; }
  .steps span { font-size: 11px; padding: 8px 2px; }
  h1 { font-size: 27px; }
  .ro-title h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .global-search { display: none; }
  .clock-badge span { display: none; }
  .now-date { display: none; }
}

/* ---------- Documents imprimables (devis, facture, fiche atelier, commande) ---------- */
body.print-mode { background: #e9ecf1; color: #111; }
.print-bar { position: sticky; top: 0; display: flex; gap: 10px; justify-content: center; padding: 12px; background: #0c0f14; z-index: 5; }
.doc { background: #fff; color: #15191f; width: 216mm; min-height: 279mm; margin: 18px auto; padding: 16mm 15mm; font: 10.5pt/1.45 Inter, Arial, sans-serif; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18); }
.doc h1 { font-family: var(--display); font-size: 26pt; color: #091b33; letter-spacing: 0.01em; }
.doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 3px solid #ff8803; padding-bottom: 12px; margin-bottom: 14px; }
.doc .shop b { font-size: 13pt; display: block; }
.doc .shop, .doc .meta { font-size: 9.5pt; color: #3a4350; }
.doc .meta { text-align: right; }
.doc .meta .no { font-family: var(--mono); font-size: 11pt; color: #15191f; }
.doc .parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.doc .box { border: 1px solid #d5dae2; border-radius: 6px; padding: 9px 11px; font-size: 9.5pt; }
.doc .box h4 { margin: 0 0 4px; font-size: 7.5pt; letter-spacing: 0.12em; text-transform: uppercase; color: #6b7686; }
.doc table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.doc th { text-align: left; font-size: 7.5pt; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7686; border-bottom: 1.5px solid #15191f; padding: 5px 6px; }
.doc td { padding: 5px 6px; border-bottom: 1px solid #e3e7ed; vertical-align: top; }
.doc .job-row td { background: #f4f6f9; font-weight: 600; border-bottom: 1px solid #d5dae2; }
.doc .job-row .tag { font-weight: 600; font-size: 7.5pt; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7686; }
.doc .ccc-row td { font-size: 9pt; color: #3a4350; white-space: pre-wrap; }
.doc .num { text-align: right; font-family: var(--mono); font-size: 9pt; }
.doc th.num { font-family: inherit; font-size: 7.5pt; }
.doc .shop b { font-family: var(--display); font-size: 20pt; color: #091b33; margin-bottom: 4px; }
.doc .doc-totals { margin-left: auto; width: 290px; margin-top: 10px; font-size: 10pt; }
.doc .doc-totals div { display: flex; justify-content: space-between; padding: 3px 0; }
.doc .doc-totals .grand { border-top: 2px solid #15191f; margin-top: 4px; padding-top: 6px; font-size: 13pt; font-weight: 700; }
.doc .terms { margin-top: 18px; font-size: 8.5pt; color: #3a4350; white-space: pre-wrap; border-top: 1px solid #d5dae2; padding-top: 10px; }
.doc .sign { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; font-size: 8.5pt; color: #6b7686; }
.doc .sign div { border-top: 1px solid #15191f; padding-top: 4px; }
.doc .declined td { color: #8a93a0; text-decoration: line-through; }
.doc .insp { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; font-size: 9pt; }
.doc .insp span { display: flex; justify-content: space-between; border-bottom: 1px dotted #d5dae2; padding: 2px 0; }
.doc .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.doc .footer { margin-top: 22px; text-align: center; font-size: 7.5pt; color: #8a93a0; }
.doc .logo { height: 40px; background: #0c0f14; padding: 6px 10px; border-radius: 6px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
@media print {
  @page { size: letter; margin: 0; }
  body.print-mode { background: #fff; }
  .print-bar, #toasts { display: none !important; }
  .doc { margin: 0; box-shadow: none; width: auto; min-height: 0; }
  .doc tr { break-inside: avoid; }
}

/* Barres de défilement sombres (programme Windows et navigateurs Chromium) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--mu2); }
body.print-mode ::-webkit-scrollbar-track { background: #e9ecf1; }
.danger-zone { border-color: rgba(248, 81, 73, 0.35); }

/* Rôles et accès */
.roles-tbl td.c, .roles-tbl th.c { text-align: center; width: 158px; }
.roles-tbl tr.grp th { background: var(--bg2, rgba(255,255,255,.03)); color: var(--amber); font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; font-size: 12px; text-align: left; padding-top: 14px; }
.roles-tbl td .sub { display: block; font-weight: 400; }
.roles-tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--amber); cursor: pointer; }
.roles-tbl select { min-width: 0; width: 100%; font-size: 12.5px; }
.roles-tbl .ok-ic { color: var(--green); width: 18px; height: 18px; }
.roles-tbl tr.home-row td { background: rgba(255, 136, 3, 0.05); }

/* Planificateur */
.plan-kpis b { font-size: 26px; }
.plan-weeks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.pweek { display: flex; flex-direction: column; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; color: var(--tx); text-decoration: none; }
.pweek:hover { border-color: var(--line2); text-decoration: none; }
.pweek.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.pweek b { font-family: var(--display); font-size: 22px; }
.pweek b small { color: var(--mu); font-size: 15px; font-weight: 600; }
.bar { height: 7px; border-radius: 4px; background: var(--panel3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.bar.warn i { background: var(--amber); }
.bar.bad i { background: var(--red); }
.plan-body { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.plan-backlog { display: flex; flex-direction: column; max-height: calc(100vh - 150px); position: sticky; top: 76px; }
.plan-backlog .seg { margin: 0 16px 10px; align-self: flex-start; }
.plan-list { overflow: auto; padding: 0 12px 12px; display: flex; flex-direction: column; gap: 8px; }
.bjob { display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel2); }
.bjob[draggable='true'] { cursor: grab; }
.bjob .btn { align-self: flex-start; }
.bjob .sub a { color: var(--amber-h); }
.plan-grid-wrap { overflow-x: auto; }
.plan-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }
.plan-grid th, .plan-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; }
.plan-grid thead th { font-size: 12px; color: var(--mu); font-weight: 600; text-transform: capitalize; padding: 10px 8px; text-align: left; }
.plan-grid thead th.today { color: var(--amber-h); }
.plan-grid tbody th { width: 150px; text-align: left; padding: 10px; font-size: 13.5px; }
.plan-grid tbody th small { display: block; font-weight: 500; margin-top: 2px; }
.plan-grid thead th:first-child { width: 150px; }
.plan-grid .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.pcell { padding: 6px; min-height: 84px; height: 84px; position: relative; transition: background .12s; }
.pcell.today { background: rgba(255, 136, 3, 0.04); }
.pcell.past { background: rgba(0, 0, 0, 0.18); }
.drop-on { background: var(--amber-d) !important; outline: 2px dashed var(--amber); outline-offset: -3px; }
.pjob { display: flex; flex-direction: column; gap: 1px; padding: 5px 7px; margin-bottom: 5px; border-radius: 6px; background: var(--panel3); border-left: 3px solid var(--green); font-size: 12px; cursor: pointer; overflow: hidden; }
.pjob[draggable='true'] { cursor: grab; }
.pjob b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjob span { color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pjob em { font-style: normal; color: var(--tx); font-family: var(--mono); font-size: 11px; }
.pjob.rd-parts { border-left-color: var(--amber); }
.pjob.rd-approval { border-left-color: var(--blue); }
.pjob.running { box-shadow: inset 0 0 0 1px var(--green); }
.dragging { opacity: .45; }
.cell-load { height: 4px; border-radius: 2px; background: var(--panel3); overflow: hidden; margin-top: 2px; }
.cell-load i { display: block; height: 100%; background: var(--green); }
.cell-load.warn i { background: var(--amber); }
.cell-load.bad i { background: var(--red); }
@media (max-width: 1100px) { .plan-body { grid-template-columns: 1fr; } .plan-backlog { position: static; max-height: 420px; } .plan-weeks { grid-template-columns: repeat(2, 1fr); } }

/* Espace technicien */
.mywork .page-head { align-items: center; }
.wsum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.wsum-i { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: flex; align-items: baseline; gap: 10px; }
.wsum-i b { font-family: var(--display); font-size: 30px; }
.wsum-i span { color: var(--mu); font-size: 13px; }
.wsum-i.st-running b { color: var(--green); }
.wsum-i.st-paused b { color: var(--amber-h); }
.wsum-i.st-done b { color: var(--blue); }
.wrun { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--green-d); border: 1px solid var(--green); color: var(--tx); }
.wrun .ic { color: var(--green); }
.wjob { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line2); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; }
.wjob.st-running { border-left-color: var(--green); }
.wjob.st-paused { border-left-color: var(--amber); }
.wjob.st-done { border-left-color: var(--blue); opacity: .85; }
.wjob-head { display: flex; gap: 14px; align-items: flex-start; }
.wjob-head h2 { margin: 0; font-size: 19px; }
.wjob-head p { margin: 6px 0 0; }
.wjob-head a { color: var(--amber-h); }
.wjob-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; color: var(--mu); white-space: nowrap; }
.wjob-meta .ic { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.wjob-concern { margin: 12px 0 0; padding: 10px 12px; background: var(--panel2); border-radius: 8px; font-size: 14px; }
.wjob-time { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-top: 12px; font-size: 13px; color: var(--mu); }
.wjob-time b { color: var(--tx); }
.wjob-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn.big { height: 48px; padding: 0 22px; font-size: 15.5px; border-radius: 10px; }
.btn.big .ic { width: 20px; height: 20px; }
.warn-btn { background: var(--amber-d); color: var(--amber-h); border-color: rgba(255, 136, 3, .45); }
.pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; animation: pulse 1.4s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.wjob-more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.wjob-more summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.wjob-grid { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; gap: 18px; margin-top: 12px; }
.wjob-grid h3 { margin: 0; font-size: 14px; color: var(--amber-h); font-family: var(--display); letter-spacing: .05em; text-transform: uppercase; }
.wparts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wparts li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel2); border-radius: 8px; font-size: 13px; }
.wparts .sub { display: block; }
.wpart-add { display: flex; flex-direction: column; gap: 8px; }
.wpart-add .btn { align-self: flex-start; }
.wpart-results { display: flex; flex-direction: column; gap: 6px; }
.wpr { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line2); border-radius: 8px; font-size: 13px; }
.wpr .sub { display: block; }
.wpr .qty { width: 64px; }
.wphotos { display: flex; flex-wrap: wrap; gap: 8px; }
.wphotos img { width: 86px; height: 86px; object-fit: cover; border-radius: 8px; cursor: zoom-in; border: 1px solid var(--line); }
.wphoto-add { width: 86px; height: 86px; border: 2px dashed var(--line2); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--mu); cursor: pointer; font-size: 12px; }
.wphoto-add:hover { border-color: var(--amber); color: var(--amber-h); }
.wdone-title { margin: 26px 0 12px; font-size: 16px; color: var(--mu); }
@media (max-width: 1000px) { .wjob-grid { grid-template-columns: 1fr; } .wsum { grid-template-columns: repeat(2, 1fr); } .wjob-head { flex-direction: column; } .wjob-meta { align-items: flex-start; } }
.demo-banner { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 16px; border-radius: var(--radius); background: var(--amber-d); border: 1px solid rgba(255, 136, 3, .45); }
.demo-banner > .ic { color: var(--amber-h); width: 22px; height: 22px; flex: none; }
.demo-banner span { display: block; color: var(--mu); font-size: 13px; margin-top: 2px; }

/* Les cartes restent dans leur colonne, même avec des textes longs. */
.pjob { min-width: 0; max-width: 100%; box-sizing: border-box; }
.pcell { overflow-wrap: anywhere; }
.appt { box-sizing: border-box; min-width: 0; max-width: 100%; }

/* Calendrier date/heure avec validation dans le panneau. */
.dt-value { display:flex; justify-content:space-between; width:100%; }
.dt-panel { width:360px; max-width:100%; border:1px solid var(--line2); border-radius:10px; background:var(--panel); padding:12px; margin-top:8px; }
.dt-panel[hidden] { display:none; }
.dt-heading { display:flex; align-items:center; gap:5px; margin-bottom:10px; }
.dt-heading b { flex:1; }
.dt-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center; }
.dt-days span { font-size:12px; padding:5px 0; }
.dt-days button { border:0; border-radius:5px; padding:8px 0; background:transparent; color:var(--tx); cursor:pointer; }
.dt-days button:hover { background:var(--line2); }
.dt-days button.selected { background:#ff9900; color:#15191f; font-weight:700; }
.dt-time { display:flex; align-items:end; justify-content:center; gap:10px; margin-top:12px; }
.dt-time label { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.dt-time input { width:85px; }
.dt-time > span { padding-bottom:10px; }
.dt-footer { display:flex; justify-content:space-between; align-items:center; margin-top:10px; gap:8px; }
.dt-footer > div { display:flex; gap:8px; }
.dt-error:empty { display:none; }
.dt-error { color:#ff9e9e; font-size:12px; }

@media print { dialog, dialog::backdrop { display:none !important; } }

/* Commandes de durée visibles, indépendantes des contrôles natifs Windows. */
.duration-control{position:relative;display:flex;align-items:stretch}
.duration-control input{width:100%;padding-right:42px}
.duration-arrows{position:absolute;right:1px;top:1px;bottom:1px;width:34px;display:flex;flex-direction:column}
.duration-arrows button{flex:1;display:flex;align-items:center;justify-content:center;border:0;border-left:1px solid var(--border,#394554);background:transparent;color:inherit;cursor:pointer;padding:0}
.duration-arrows button:hover{background:rgba(255,145,0,.18)}
.duration-arrows button:focus-visible{outline:2px solid #ff9100;outline-offset:-2px}
.duration-arrows button:disabled{opacity:.4;cursor:default}
.triangle-up,.triangle-down{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}
.triangle-up{border-bottom:6px solid currentColor}
.triangle-down{border-top:6px solid currentColor}

.page-navigation{display:flex;gap:6px;flex-shrink:0}
.nav-btn{height:36px;padding:0 12px;gap:6px;font-weight:600}
.nav-btn .ic{width:18px;height:18px}
.nav-btn:disabled{opacity:.38;cursor:default}

.suggestion-select{margin-bottom:6px;width:100%;min-height:36px}

.suggestion-combo{position:relative;width:100%;min-width:0}
.suggestion-combo>input,.suggestion-combo>textarea{width:100%;padding-right:32px}
.suggestion-toggle{position:absolute;right:1px;top:1px;bottom:1px;width:30px;max-height:40px;padding:0;border:0;background:transparent;color:inherit;opacity:.7;cursor:pointer;font-size:16px;line-height:1}
.suggestion-toggle:hover{opacity:1;color:var(--accent,#ff9100)}
.suggestion-combo.locked>input,.suggestion-combo.locked>textarea{padding-right:10px}
.suggestion-combo.locked>.suggestion-toggle{display:none}
.suggestion-toggle:disabled{opacity:.3;cursor:default}
.suggestion-options{position:absolute;top:100%;left:0;right:0;z-index:50;max-height:190px;overflow:auto;background:var(--panel,#1b2430);border:1px solid var(--line,#435060);border-radius:6px;box-shadow:0 8px 18px #0007}
.suggestion-options[hidden]{display:none}
.suggestion-option{display:block;text-align:left;width:100%;padding:9px 12px;border:0;background:transparent;color:inherit;cursor:pointer;white-space:normal}
.suggestion-option:hover,.suggestion-option[aria-selected="true"]{background:#ff910026}
.suggestion-options p{padding:10px;margin:0}
.garage-logo{max-width:140px;max-height:55px;object-fit:contain;margin-bottom:8px;display:block}
.garage-logo-preview{max-width:300px;max-height:160px;object-fit:contain;background:#fff;padding:8px;border-radius:6px}

[data-truck-fields][hidden]{display:none}

/* Couleurs personnelles : aucune modification des couleurs imprimées des documents. */
:root[data-appearance="dark"]{--bg:#0c0f14;--side:#0a0d11;--panel:#141922;--panel2:#1a2029;--panel3:#212835;--line:#252d39;--line2:#2f3947;--tx:#e7ebf1;--mu:#8a96a8;--mu2:#8a96a8;color-scheme:dark;}
:root[data-appearance="light"]{--bg:#f1f3f6;--side:#e5e9ef;--panel:#ffffff;--panel2:#e9edf2;--panel3:#dce3eb;--line:#c5cdd8;--line2:#9aa8b8;--tx:#202833;--mu:#4f5d6b;--mu2:#4f5d6b;color-scheme:light;--amber-h:#874000;--green:#236333;--red:#a52624;--blue:#245a99;--violet:#6340a0;--yellow:#775500;}
:root[data-appearance="rose"]{--bg:#f7e7ef;--side:#ecd3e0;--panel:#fff5fa;--panel2:#f2dce7;--panel3:#e8cbd9;--line:#c79cac;--line2:#b18498;--tx:#39232e;--mu:#654957;--mu2:#654957;color-scheme:light;--amber-h:#874000;--green:#236333;--red:#a52624;--blue:#245a99;--violet:#6340a0;--yellow:#775500;}
:root[data-appearance="brown"]{--bg:#291f19;--side:#211913;--panel:#352920;--panel2:#443329;--panel3:#4a392f;--line:#725a46;--line2:#94735c;--tx:#fff1e3;--mu:#d7bfa8;--mu2:#d7bfa8;color-scheme:dark;}
:root[data-appearance="blue"]{--bg:#e7eff8;--side:#cfdeef;--panel:#f5f9ff;--panel2:#dae7f5;--panel3:#c6d8ed;--line:#96b1ce;--line2:#7b97b5;--tx:#192e46;--mu:#455d76;--mu2:#455d76;color-scheme:light;--amber-h:#874000;--green:#236333;--red:#a52624;--blue:#245a99;--violet:#6340a0;--yellow:#775500;}
:root[data-appearance="green"]{--bg:#e8f1e9;--side:#d0e1d2;--panel:#f7fbf7;--panel2:#deebdf;--panel3:#caddcd;--line:#95b098;--line2:#77997e;--tx:#203628;--mu:#45604d;--mu2:#45604d;color-scheme:light;--amber-h:#874000;--green:#236333;--red:#a52624;--blue:#245a99;--violet:#6340a0;--yellow:#775500;}
input,select,textarea,.lines input:focus,.lines select:focus{background:var(--panel2)}
.topbar,.print-bar{background:var(--side)}
.appearance-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.appearance-choices .btn{justify-content:flex-start;gap:10px;min-height:44px}
.appearance-swatch{display:inline-block;width:24px;height:24px;border-radius:50%;border:1px solid var(--mu)}
[data-swatch="dark"]{background:#0c0f14}
[data-swatch="light"]{background:#f1f3f6}
[data-swatch="rose"]{background:#f7e7ef}
[data-swatch="brown"]{background:#291f19}
[data-swatch="blue"]{background:#e7eff8}
[data-swatch="green"]{background:#e8f1e9}

/* Résumé des paramètres (lecture) */
.kv { display: grid; grid-template-columns: minmax(180px, 260px) 1fr; gap: 0; margin: 0; }
.kv-row { display: contents; }
.kv dt, .kv dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--mu); font-size: 13.5px; padding-right: 16px; }
.kv dd { white-space: pre-line; }
.kv-row:last-child dt, .kv-row:last-child dd { border-bottom: 0; }
.warn-text { color: var(--amber-h); }
.field.invalid input, .field.invalid textarea, .field.invalid select { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.sticky-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 2; }
@media (max-width: 700px) { .kv { grid-template-columns: 1fr; } .kv dt { border-bottom: 0; padding-bottom: 0; } }

/* Barre du haut : cloche des notifications et version téléphone sans débordement */
.notif-btn { position: relative; gap: 6px; }
.notif-count { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; }
.appearance-btn { gap: 6px; }
@media (max-width: 900px) {
  .notif-label, .appearance-btn span, .profile .who { display: none; }
  .topbar { gap: 8px; padding: 0 10px; }
  .top-right { gap: 6px; min-width: 0; }
  .nav-btn span { display: none; }
  .nav-btn { padding: 0 7px; }
  .topbar { gap: 6px; }
}
@media (max-width: 560px) {

  .sync-pill span { display: none; }
  .now-time { font-size: 15px; }
}
/* Logo lisible sur les thèmes clairs : le « DT » blanc devient foncé. */
html[data-appearance='light'] .side-brand img, html[data-appearance='rose'] .side-brand img, html[data-appearance='blue'] .side-brand img, html[data-appearance='green'] .side-brand img { content: url('/img/dt-pilot-logo-ink.png'); }
/* Rendez-vous opaques : les lignes de la grille ne traversent plus le texte (thèmes clairs). */
.appt { background-color: var(--panel); background-image: linear-gradient(var(--blue-d), var(--blue-d)); z-index: 1; }
.appt.st-confirmed { background: var(--panel) linear-gradient(var(--green-d), var(--green-d)); }
.appt.st-arrived { background: var(--panel) linear-gradient(var(--amber-d), var(--amber-d)); }
/* Détails d'une pièce sur le bon : retour à la ligne plutôt que texte coupé. */
.part-sub { flex-wrap: wrap; row-gap: 2px; white-space: normal; }
.appt { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.appt b, .appt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Logo du garage dans les paramètres */
.logo-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.logo-box { width: 220px; height: 110px; border: 1px dashed var(--line2); border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 10px; }
.logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-box .muted { color: #66707d; }
.pimp-map { gap: 10px 14px; }

/* Listes de choix partout (1.3.21) */
.suggestion-combo.open{z-index:60}
.suggestion-options{min-width:220px}
.suggestion-more{font-weight:600;color:var(--accent,#ff9100)}
.suggestion-hint{border-top:1px solid var(--line,#435060)}
.suggestion-combo:has(>.job-name){flex:1;min-width:180px;width:auto}
.lines .suggestion-combo:has(>.w-qty){width:78px;margin-left:auto}
.lines .suggestion-combo:has(>.w-money){width:96px;margin-left:auto}
.lines .suggestion-combo>input.num{padding-right:20px}
.lines .suggestion-combo:has(>input.num) .suggestion-toggle{width:20px;font-size:13px}
.duration-control .suggestion-combo{flex:1}
.duration-control .suggestion-combo>input{padding-right:72px}
.duration-control .suggestion-toggle{right:40px}
.row>.suggestion-combo,.inline>.suggestion-combo{width:auto;flex:1}

/* Rendez-vous à planifier (1.3.22) */
.plan-appts{margin-bottom:14px}
.plan-appt-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.plan-appt-list .bjob .btn{justify-self:start;margin-top:6px}

/* Bandeau de licence (1.3.22) */
.license-banner{display:block;padding:9px 20px;font-size:13.5px;line-height:1.7;border-bottom:1px solid var(--line)}
.license-banner[hidden]{display:none}
.license-banner .btn{margin-left:8px;vertical-align:middle}
.license-banner.warn{background:#ff910022;color:var(--tx)}
.license-banner.bad{background:#e5484d26;color:var(--tx)}
.license-banner svg{width:16px;height:16px;vertical-align:-3px;margin-right:4px}

/* Modules activés (Paramètres) */
.module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.module-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.module-item input { margin-top: 3px; }
.module-item > span { display: flex; flex-direction: column; gap: 2px; }
.tbl tr.warn-row td { background: rgba(255, 120, 60, 0.08); }
.tabs.wrap { flex-wrap: wrap; overflow-x: visible; }

/* États personnalisés des bons */
.state-pill { --sc: #8b93a1; background: color-mix(in srgb, var(--sc) 16%, transparent); color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent); margin-right: 4px; }
.state-pill::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); margin-right: 6px; vertical-align: 1px; }
.state-select { --sc: #8b93a1; display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sc) 55%, transparent); background: color-mix(in srgb, var(--sc) 14%, transparent); }
.state-select .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); }
.state-select select { background: transparent; border: 0; color: var(--tx); font-weight: 600; font-size: 13px; padding: 4px 6px; min-height: 0; width: auto; }
.state-filter { display: inline-flex; align-items: center; gap: 8px; }
.state-filter select { width: auto; }
.pjob[style*="--sc"] { border-left: 4px solid var(--sc); }
.state-row { display: flex; gap: 8px; align-items: center; }
.state-row input[type=color] { width: 44px; height: 38px; padding: 2px; border-radius: 8px; flex: none; }

/* Cédule : état du bon sur la carte du travail */
.pstate { --sc: #8b93a1; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--sc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstate::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--sc); flex: none; }

/* Cédule : jour par équipe (une colonne par équipe) */
.team-day .card-head { display: flex; justify-content: space-between; align-items: center; }
.team-day h2::first-letter { text-transform: uppercase; }
.team-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; padding: 0 14px 14px; overflow-x: auto; }
.team-col { --tc: #8b93a1; border: 1px solid var(--line); border-top: 4px solid var(--tc); border-radius: 10px; background: var(--panel2); display: flex; flex-direction: column; gap: 10px; padding: 10px; min-width: 0; }
.team-head { display: flex; flex-direction: column; gap: 4px; }
.team-head b { font-size: 15px; }
.team-head .bar { height: 5px; }
.team-tech { display: flex; flex-direction: column; gap: 4px; }
.team-tech .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.pcell.team-cell { height: auto; min-height: 70px; border: 1px dashed var(--line); border-radius: 8px; background: var(--panel); }
.pcell.team-cell.drop-on { border-color: var(--amber); }

/* Cédule en plein écran (téléviseur de l'atelier) */
.tv-head { display: none; }
body.plan-tv { grid-template-columns: minmax(0, 1fr); background: var(--bg); }
body.plan-tv .side, body.plan-tv .topbar, body.plan-tv .planning .page-head, body.plan-tv .plan-kpis, body.plan-tv .plan-appts, body.plan-tv .plan-backlog, body.plan-tv .plan-weeks, body.plan-tv .license-banner { display: none !important; }
body.plan-tv .plan-body { grid-template-columns: minmax(0, 1fr); }
body.plan-tv .page.planning { max-width: none; padding: 14px 18px; }
body.plan-tv .tv-head { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; font-size: 20px; }
body.plan-tv .tv-head span:first-of-type { color: var(--mu); }
body.plan-tv .tv-head span:first-of-type::first-letter { text-transform: uppercase; }
body.plan-tv .tv-clock { margin-left: auto; font-family: var(--mono, monospace); font-size: 26px; font-weight: 700; color: var(--amber-h); }
body.plan-tv .pjob { font-size: 14px; padding: 7px 9px; }
body.plan-tv .plan-grid tbody th { font-size: 16px; }
body.plan-tv .pcell { height: auto; min-height: 96px; }
body.plan-tv .team-head b { font-size: 18px; }
.sms-preview { display: block; margin-top: 4px; color: var(--mu); } .sms-preview b { color: var(--mu2, var(--mu)); font-weight: 600; }

.sms-twilio[hidden] { display: none; }

/* Démo publique */
.public-demo-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 20px; font-size: 13.5px; background: rgba(59, 130, 246, 0.12); border-bottom: 1px solid rgba(59, 130, 246, 0.35); }
.public-demo-bar span { flex: 1; min-width: 220px; }
.demo-roles { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.demo-role { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--tx); cursor: pointer; font: inherit; }
.demo-role:hover, .demo-role:focus-visible { border-color: var(--amber); background: var(--panel3); }
.demo-role span { color: var(--mu); font-size: 13px; }
.login-demo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; border: 1px dashed var(--amber); background: transparent; color: var(--amber-h); font: inherit; font-weight: 600; cursor: pointer; }
.topbar .switch-user { margin-left: 4px; }
.roles-tbl th:first-child, .roles-tbl td:first-child { min-width: 230px; }
/* Téléphone : en-tête sans débordement. « Changer d'utilisateur » reste dans le menu du compte. */
@media (max-width: 560px) {
  .topbar .switch-user { display: none; }
  .page-navigation #pageForward { display: none; }
}
@media (max-width: 400px) {
  .now { display: none; }
}
.rep-grid { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1100px) { .rep-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .seg { display: flex; flex-wrap: wrap; max-width: 100%; }
  .seg a, .seg button { flex: 1 1 auto; text-align: center; }
}
@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .card { min-width: 0; }
}