/* Sommet — styles propres à l'application réelle (connexion, mise en route, équipe, réglages) */
body.page { overflow: auto; min-height: 100%; }
.logo-lg { width: 44px; height: 44px; border-radius: 12px; background: var(--signal); display: grid; place-items: center; flex: none; }
.logo-lg svg { width: 26px; height: 26px; }

/* ---------- connexion ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 480px); }
.auth-hero { padding: 48px clamp(24px, 5vw, 72px); display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  background: linear-gradient(160deg, #0F2A40 0%, #1F5C8B 62%, #3B7EB0 100%); color: #fff; position: relative; overflow: hidden; }
.auth-hero > * { position: relative; z-index: 1; }
.auth-hero .hero-mtn { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; z-index: 0; fill: rgb(255 255 255 / .07); }
.facts { margin: 34px 0 0; max-width: 560px; border-top: 1px solid rgb(255 255 255 / .2); }
.facts > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgb(255 255 255 / .2); font-size: 15px; }
.facts dt { font-weight: 600; } .facts dd { margin: 0; opacity: .85; }
.auth-hero .brandline { display: flex; align-items: center; gap: 12px; font: 800 24px var(--font-display); letter-spacing: -.02em; }
.auth-hero h1 { font: 700 clamp(30px, 3.4vw, 44px)/1.12 var(--font-display); letter-spacing: -.025em; margin: 0 0 16px; max-width: 18ch; }
.auth-hero p { font-size: 16.5px; line-height: 1.55; max-width: 54ch; opacity: .9; margin: 0; }
.auth-hero ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; font-size: 14.5px; }
.auth-hero li { display: flex; gap: 10px; align-items: center; } .auth-hero li::before { content: "✓"; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / .16); display: grid; place-items: center; font-size: 12px; flex: none; }
.auth-hero small { opacity: .7; font-size: 12.5px; position: relative; z-index: 1; }
.auth-side { padding: 40px clamp(20px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 18px; background: var(--surface); }
.auth-side h2 { font: 700 24px var(--font-display); letter-spacing: -.02em; margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.seg button { border: 0; border-radius: 9px; padding: 9px 10px; background: transparent; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .1); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form .btn.primary { justify-content: center; padding: 11px 14px; font-size: 14.5px; }
.f-err { color: var(--bad); font-size: 12.5px; margin: 2px 0 0; }
[aria-invalid="true"] { border-color: var(--bad) !important; }
.form-msg { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); }
.form-msg.ok { background: var(--good-soft); color: var(--good); }
.muted { color: var(--ink-2); font-size: 13px; }
.linklike { color: var(--accent); font-weight: 600; text-decoration: none; } .linklike:hover { text-decoration: underline; }
.field input, .field select { font: 500 14px var(--font-body); }
.field .hint-ok { color: var(--good); font-size: 12.5px; } .field .hint-info { color: var(--ink-2); font-size: 12.5px; }
.check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; cursor: pointer; }
.check-line input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- mise en route ---------- */
.ob { max-width: 980px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 60px; display: flex; flex-direction: column; gap: 22px; }
.ob-top { display: flex; align-items: center; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.ob-top .brandline { display: flex; align-items: center; gap: 10px; font: 800 19px var(--font-display); }
.ob-top .brandline .logo-lg { width: 34px; height: 34px; border-radius: 9px; } .ob-top .brandline .logo-lg svg { width: 20px; height: 20px; }
.ob-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ob-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ob-step b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; flex: none; }
.ob-step.now { border-color: var(--accent); color: var(--ink); font-weight: 600; } .ob-step.now b { background: var(--accent); color: var(--accent-ink); }
.ob-step.done b { background: var(--good); color: #fff; }
.ob-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 18px; }
.ob-card h1 { font: 800 26px/1.15 var(--font-display); letter-spacing: -.02em; margin: 0; }
.ob-card > p.lead { margin: -8px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 70ch; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.span2 { grid-column: span 2; } .span3 { grid-column: 1 / -1; }
.fs-title { font: 600 11.5px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin: 6px 0 -4px; grid-column: 1 / -1; }
.ob-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.ob-actions .spacer { flex: 1; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.tpl-card { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.tpl-card:hover { border-color: var(--ink-2); }
.tpl-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tpl-card .mini { aspect-ratio: 1.55; border-radius: 9px; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.tpl-card .mini svg { width: 92%; height: 92%; }
.tpl-card .mini .big { font-size: 28px; }
.tpl-card b { font-size: 14px; } .tpl-card small { color: var(--ink-2); font-size: 12.5px; }
.tpl-opts { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.tpl-opts .field { width: 150px; }
.done-hero { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.done-hero .big { width: 64px; height: 64px; border-radius: 50%; background: var(--good-soft); color: var(--good); display: grid; place-items: center; font-size: 30px; }

/* ---------- équipe ---------- */
.people { display: flex; flex-direction: column; gap: 8px; }
.prow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.prow .pm b { display: block; font-size: 14px; } .prow .pm small { display: block; color: var(--ink-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pa { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.prow .btn { padding: 6px 10px; font-size: 12.5px; }
.invite-box { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 10px; background: var(--accent-soft); font-size: 12.5px; flex-wrap: wrap; }
.invite-box input { flex: 1; min-width: 200px; font: 500 12px var(--font-data); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: var(--surface); color: var(--ink); }
.add-person { border: 1.5px dashed var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.add-person .grid3 .btn { align-self: end; justify-content: center; }
.confirm-line { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; justify-content: flex-end; font-size: 13px; padding: 8px 10px; border-radius: 10px; background: var(--warn-soft); flex-wrap: wrap; }

/* ---------- application ---------- */
.status-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.status-pick button { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--ink); }
.status-pick button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); }
.status-pick button[data-s="bureau"]::before { background: var(--good); } .status-pick button[data-s="deplacement"]::before { background: var(--accent); }
.status-pick button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.dot-av[data-st="teletravail"]::after, .dot-av[data-st="vacances"]::after, .dot-av[data-st="absent"]::after { background: var(--ink-2); }
.dot-av[data-st="deplacement"]::after { background: var(--accent); }
.todo { display: flex; flex-direction: column; gap: 6px; }
.todo-item { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; }
.todo-item .tk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line); color: transparent; }
.todo-item.ok .tk { background: var(--good); border-color: var(--good); color: #fff; }
.todo-item.ok span { color: var(--ink-2); text-decoration: line-through; }
.todo-item .btn { padding: 5px 10px; font-size: 12px; }
.soon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.soon div { padding: 10px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; }
.soon b { font-size: 13px; }
.empty-office { position: absolute; inset: 0; display: grid; place-items: center; padding: 90px 20px 140px 90px; z-index: 1; }
.empty-office .card { max-width: 520px; text-align: center; align-items: center; display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.empty-office .team-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0; }
.empty-office .team-wall span.who { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; width: 76px; }
.zl-real { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%); white-space: nowrap; }
.settings-form { display: flex; flex-direction: column; gap: 14px; }
.settings-form .grid2 { gap: 10px; }
.floorbar-real { position: absolute; top: 74px; left: 76px; z-index: 4; display: flex; gap: 3px; padding: 4px; border-radius: 12px; }
.floorbar-real button { border: 0; background: transparent; border-radius: 8px; padding: 6px 10px; font-weight: 600; font-size: 12.5px; cursor: pointer; color: var(--ink-2); }
.floorbar-real button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-hero { padding: 28px 20px; } .auth-hero small, .facts { display: none; }
  .grid2, .grid3 { grid-template-columns: 1fr; } .span2 { grid-column: auto; }
  .ob-steps { grid-template-columns: repeat(4, 1fr); } .ob-step span { display: none; } .ob-step { justify-content: center; }
  .prow { grid-template-columns: auto minmax(0, 1fr); } .prow .pa { grid-column: 1 / -1; justify-content: flex-start; }
  .empty-office { padding: 70px 12px 160px; }
  .floorbar-real { top: 60px; left: 8px; }
}

/* compléments de l'application */
.topbar .top-right { margin-left: auto; }
.rail .rail-link { position: relative; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); }
.rail .rail-link svg { width: 20px; height: 20px; }
.rail .rail-link:hover { background: var(--surface-2); color: var(--ink); }
.rail .rail-link:hover .tip, .rail .rail-link:focus-visible .tip { opacity: 1; }
.rail .rail-link .tip { position: absolute; left: 52px; top: 50%; transform: translateY(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
.usermenu .mi-link { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 9px; color: var(--ink); text-decoration: none; }
.usermenu .mi-link:hover { background: var(--surface-2); }
.usermenu .mi-link b { display: block; font-size: 13px; } .usermenu .mi-link small { color: var(--ink-2); font-size: 11.5px; }
#app.editing .floorbar-real, #app.editing .empty-office, #app.editing .plan-fallback { display: none !important; }
.panel .settings-form .grid2 { grid-template-columns: 1fr 1fr; }
.panel .settings-form .span2, .panel .settings-form .fs-title { grid-column: 1 / -1; }
@media (max-width: 760px) { .rail .rail-link { display: none; } }
.invite-box > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.prow .pa .btn svg { width: 14px; height: 14px; }
.ob-actions .btn svg, .done-hero svg { width: 15px; height: 15px; }
.done-list .todo-item.ok span { text-decoration: none; color: var(--ink); }
.field .hint-bad { color: var(--bad); font-size: 12.5px; }

/* facturation */
#billing .st-head .btn svg { width: 15px; height: 15px; }
.lines textarea { width: 100%; box-sizing: border-box; resize: none; overflow: hidden; min-height: 34px; font: 500 13px/1.4 var(--font-body); border: 1px solid var(--line); border-radius: 8px; padding: 7px 8px; background: var(--surface); color: var(--ink); }
.lines textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.lines input, .lines select { width: 100%; box-sizing: border-box; }
.lines .lq, .lines .lp { text-align: right; }
.totals-box { align-self: end; font-size: 13px; }
.totals-box dt.tot, .totals-box dd.tot { border-top: 2px solid var(--ink); padding-top: 6px; font-size: 15px; }
.pdf-card { position: sticky; top: 0; }
.pdf-frame { width: 100%; aspect-ratio: 210 / 297; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
a.btn.primary { color: var(--accent-ink); }
label.btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.lines tr.opt td { color: var(--ink-2); }
.lines tr.opt textarea { font-style: italic; }
.opt-check { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-2); margin-top: 4px; cursor: pointer; }
.opt-check input { accent-color: var(--accent); }
.tab .count.info { background: var(--accent); }
.totals-box .muted { color: var(--ink-2); font-size: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

/* temps & projets */
#time .st-head .btn svg { width: 15px; height: 15px; }
.tbl.ts select { width: 100%; font: 500 13px var(--font-body); border: 1px solid var(--line); border-radius: 7px; padding: 5px 6px; background: var(--surface); color: var(--ink); }
.tbl.ts input.td { width: 100%; text-align: left; }
.tbl.ts input[aria-invalid] { border-color: var(--bad); background: var(--bad-soft); }
.tbl.ts tfoot td { font-variant-numeric: tabular-nums; }
.tbl.ts th .sub, .tbl.ts td .sub { font-size: 11.5px; }
.st-kpi .bar { height: 5px; }
.st-search select { outline: 0; }
.tbl.ts .dc { padding-left: 3px; padding-right: 3px; }
.tbl.ts input.tm { width: 54px; }
/* la fiche latérale fermée est hors écran : elle ne doit pas permettre de faire défiler la page de côté */
#app { overflow: clip; }
.ts-week { flex-wrap: wrap; }
@media (max-width: 760px) {
  /* feuille d'heures sur téléphone : une fiche par ligne, les sept jours côte à côte */
  #time .tbl-wrap:has(#tGrid) { border: 0; overflow: visible; }
  #tGrid { min-width: 0; display: block; }
  #tGrid thead { display: none; }
  #tGrid tbody, #tGrid tfoot { display: flex; flex-direction: column; gap: 10px; }
  #tGrid tfoot { margin-top: 10px; }
  #tGrid tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px 4px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
  #tGrid td { padding: 0; border: 0; background: transparent !important; }
  #tGrid td:nth-child(1), #tGrid td:nth-child(2) { grid-column: 1 / -1; }
  #tGrid tfoot td:first-child { grid-column: 1 / -1; }
  #tGrid td.dc { text-align: center; }
  #tGrid td.dc::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 2px; }
  #tGrid td.dc input { width: 100%; padding: 6px 2px; text-align: center; }
  #tGrid td.rsum { grid-column: 1 / span 5; text-align: left; }
  #tGrid td.rsum::before { content: "Total "; color: var(--ink-2); font-size: 12.5px; }
  #tGrid td.rdel { grid-column: 6 / -1; justify-self: end; }
  #tGrid tfoot td.rsum::before { content: "Total de la semaine "; }
}
.wk-range { font: inherit; }
.wk-range::before { content: " · "; }
@media (max-width: 760px) {
  .ts-week b { line-height: 1.25; }
  .wk-range { display: block; font: 500 12px var(--font-body); color: var(--ink-2); }
  .wk-range::before { content: none; }
}

/* congés & notes de frais */
#hr .st-head .btn svg, #hr .btn svg { width: 15px; height: 15px; }
.rc-thumb { width: 28px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); vertical-align: middle; background: #fff; }
.drop img { max-width: 100%; max-height: 300px; border-radius: 8px; object-fit: contain; background: #fff; }
.drop { cursor: pointer; }
#hr .check form, #hr form.check { margin: 0; }
#hr .cal td { cursor: default; }
@media (max-width: 760px) { .exp-form { grid-template-columns: 1fr; } .drop { min-height: 120px; } }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }
[hidden] { display: none !important; }
button.linklike { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.form .forgot { align-self: flex-start; font-size: 13px; }

/* comptabilité */
#compta .btn svg { width: 15px; height: 15px; }
.cbars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px; }
.cbars > div { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.cbars .cb { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.cbars i { display: block; width: 38%; min-height: 2px; border-radius: 4px 4px 1px 1px; }
.cbars i.rev { background: var(--accent); } .cbars i.exp { background: #C08A1E; }
.cbars small { font-size: 11px; color: var(--ink-2); }
.fs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.fs-group { display: flex; flex-direction: column; margin-bottom: 10px; }
.fs-row { display: grid; grid-template-columns: 1fr auto 90px; gap: 12px; align-items: center; padding: 4px 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fs-cols .fs-row { grid-template-columns: 1fr auto; }
.fs-row > :nth-child(n+2) { text-align: right; }
.fs-row > :first-child { text-align: left; }
.fs-row em { font-style: normal; color: var(--ink-2); text-align: right; font-size: 12px; }
.fs-head { border-bottom: 1px solid var(--line); font-weight: 600; }
.fs-total { border-top: 2px solid var(--ink); margin-top: 6px; padding-top: 8px; font-size: 15px; font-weight: 700; }
.jl { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.jl b { color: var(--ink); font-family: var(--font-data); font-weight: 500; }
.tbl tr.muted-row td { color: var(--ink-2); }
.tbl .btn.row-act { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }
#jSource { padding: 6px 10px; }
@media (max-width: 760px) { .fs-cols { grid-template-columns: 1fr; } .cbars { gap: 3px; } }

/* icônes SVG : grandes pastilles de l'assistant de mise en route */
.done-hero .big svg { width: 30px; height: 30px; }
.tpl-card .mini .big { display: grid; place-items: center; color: var(--ink-2); }
.tpl-card .mini .big svg { width: 30px; height: 30px; }

/* style institutionnel (voir sommet.css) */
.fs-title { text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.status-pick button { border-radius: 5px; }

/* ---------- Clients : affaires, fiches, échanges, relances ---------- */
#crm .st-head .btn svg, #crm .btn svg { width: 15px; height: 15px; }
.crm-board { display: grid; grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.crm-col { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; display: flex; flex-direction: column; min-height: 150px; }
.crm-col.over { border-color: var(--accent); background: var(--accent-soft); }
.crm-col > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.crm-col > header .muted { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.crm-cards { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.crm-cards .empty { margin: 2px; font-size: 12.5px; }
.crm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.crm-card:hover, .crm-card:focus-visible { border-color: var(--accent); }
.crm-card.dragging { opacity: .45; }
.crm-card b { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.crm-client { font-size: 12.5px; color: var(--ink-2); }
.crm-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.crm-av { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 700; }
.crm-next { display: flex; gap: 5px; align-items: flex-start; font-size: 12px; color: var(--ink-2); }
.crm-next svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.crm-next.late { color: var(--bad); }
.crm-steps { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.crm-step { flex: 1 1 0; border: 0; border-right: 1px solid var(--line); background: var(--surface); padding: 8px 10px; font: 600 12.5px var(--font-body); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.crm-step:last-child { border-right: 0; }
.crm-step:hover { color: var(--ink); background: var(--surface-2); }
.crm-step[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.crm-sheet-head { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.crm-sheet-head h3 { margin: 0 0 2px; font: 700 18px var(--font-display); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (min-width: 1101px) { .st-split.crm-split { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); } }
.crm-colmain, .crm-colside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-kinds { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-kinds button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); padding: 5px 9px; border-radius: 5px; font: 600 12.5px var(--font-body); cursor: pointer; }
.crm-kinds button svg { width: 14px; height: 14px; }
.crm-kinds button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.crm-act { display: flex; flex-direction: column; gap: 8px; }
.crm-act textarea { font: 500 14px var(--font-body); padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); resize: vertical; min-height: 58px; }
.crm-act-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.crm-act-row .field { flex: 1 1 130px; }
.crm-act-row .btn { margin-left: auto; }
.crm-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.crm-tl-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.crm-tl-item .tl-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.crm-tl-item.auto .tl-ic { background: var(--surface-2); color: var(--ink-2); }
.crm-tl-item .tl-ic svg { width: 15px; height: 15px; }
.tl-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.tl-head .muted { font-size: 12px; }
.crm-tl-item p { margin: 3px 0 0; font-size: 13.5px; white-space: pre-line; overflow-wrap: anywhere; }
.crm-tl-item.auto p { color: var(--ink-2); font-size: 13px; }
.tl-del { margin-left: auto; border: 0; background: none; color: var(--ink-2); cursor: pointer; padding: 2px; opacity: .55; }
.tl-del:hover { opacity: 1; color: var(--bad); }
.tl-del svg { width: 13px; height: 13px; }
.crm-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.crm-contact .sub { display: block; color: var(--ink-2); font-size: 12px; }
.crm-contact-links { grid-column: 1; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; overflow-wrap: anywhere; }
.crm-contact .icon-btn { grid-row: 1 / span 2; grid-column: 2; }
.crm-task { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.crm-task .sub { display: block; color: var(--ink-2); font-size: 12px; }
.crm-task.late .sub { color: var(--bad); }
.crm-task .sub .linkbtn { font-size: 12px; }
.crm-done { width: 26px; height: 26px; border: 0; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; padding: 0; }
.crm-done svg { width: 20px; height: 20px; }
.crm-done:hover { color: var(--good); }
.crm-tasks { gap: 0; padding-top: 2px; padding-bottom: 2px; }
.crm-tasks .crm-task:first-child { border-top: 0; }
.p-item .p-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.p-item .p-main small { margin-left: 0; padding-left: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-more { padding: 2px 10px 8px 48px; color: var(--ink-2); font-size: 12px; }
.p-empty { padding: 14px 10px; margin: 0; color: var(--ink-2); font-size: 13px; }
@media (max-width: 760px) {
  .crm-board { grid-template-columns: repeat(4, 80%); scroll-snap-type: x mandatory; }
  .crm-col { scroll-snap-align: start; min-height: 0; }
  .crm-step { flex: 1 1 45%; border-bottom: 1px solid var(--line); }
  .topbar .search span { display: none; }
  .topbar .search { flex: 0 0 auto; margin: 0 0 0 auto; }
}
@media (hover: none) { .palette-foot { display: none; } }

/* ---------- Matériel & IT ---------- */
#it .st-head .btn svg, #it .btn svg { width: 15px; height: 15px; }
.it-dev { display: inline-flex; gap: 10px; align-items: flex-start; }
.it-ic { width: 28px; height: 28px; flex: none; border-radius: 6px; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--ink-2); vertical-align: middle; }
.it-ic svg { width: 16px; height: 16px; }
.card-head h3 .it-ic { margin-right: 4px; }
.it-alert { border-color: var(--warn); background: color-mix(in srgb, var(--warn-soft) 55%, var(--surface)); }
.it-gone { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; font-size: 13.5px; }
.it-gone .sub, .it-row .sub, .it-ticket .sub { display: block; color: var(--ink-2); font-size: 12px; }
.it-sec, .it-users { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.it-sec legend, .it-users legend { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0 4px; }
.it-sec-grid, .it-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px; }
.it-sec .opt-check, .it-users .opt-check { font-size: 13px; color: var(--ink); margin: 0; }
.it-optional { color: var(--ink-2) !important; }
.it-log { display: flex; gap: 8px; }
.it-log input { flex: 1; min-width: 0; font: 500 13.5px var(--font-body); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.it-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.card-head + .it-row, .it-log + .it-row { border-top: 0; }
.it-tickets { gap: 0; padding: 4px 14px; }
.it-ticket { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 0; border: 0; border-top: 1px solid var(--line);
  background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; font-size: 13.5px; }
.it-tickets > :first-child { border-top: 0; }
.it-ticket:hover b { color: var(--accent); }
.it-tcard { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.it-tcard h3 { margin: 0; font: 700 15px var(--font-display); }
.it-due { color: var(--warn) !important; font-weight: 600; }
.it-myt-end { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.it-checks { display: flex; flex-direction: column; }
.it-check { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.it-checks > :first-child { border-top: 0; }
.it-check .ci { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.it-check .ci svg { width: 12px; height: 12px; }
.it-check.ok .ci { background: var(--good-soft); color: var(--good); }
.it-check.todo .ci { background: var(--warn-soft); color: var(--warn); }
.it-check .muted { font-size: 12px; }
.it-answer { margin: 6px 0 0; padding: 8px 10px; border-radius: 6px; background: var(--surface-2); font-size: 13px; white-space: pre-line; }
@media (max-width: 760px) {
  .it-ticket { grid-template-columns: minmax(0, 1fr) auto; }
  .it-ticket > :first-child { display: none; }
  #it .filters { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 2px; }
  #it .filter { flex: none; }
}


/* ======================================================================
   Structure de l'application : barre du haut, menu à gauche avec textes,
   Accueil = plan 3D au centre et tableau de bord à droite ; les autres
   espaces s'ouvrent en pages pleine largeur (adresse #/page).
   ====================================================================== */
#app { --top-h: 56px; --side-w: 232px; --dash-w: 384px; background: var(--bg); }
#app.nav-collapsed { --side-w: 64px; }

/* barre du haut */
#app .topbar { top: 0; left: 0; right: 0; height: var(--top-h); padding: 0 12px 0 14px; gap: 12px; border-radius: 0; border: 0; border-bottom: 1px solid var(--line); box-shadow: none; z-index: 20; }
#app .topbar .brand { width: calc(var(--side-w) - 26px); flex: none; }
#app.nav-collapsed .topbar .brand-text { display: none; }
#app .topbar .search { max-width: 460px; margin: 0; }
#app .topbar .top-right { gap: 8px; }
.nav-toggle { display: none; }
.new-btn { padding: 7px 12px; gap: 6px; }
.new-btn svg { width: 15px; height: 15px; }
#app .new-menu { right: auto; width: 270px; }
#app .usermenu, #app .setup-menu { top: calc(var(--top-h) - 4px); }

/* menu de gauche */
#app .rail { box-sizing: border-box; top: var(--top-h); left: 0; bottom: 0; width: var(--side-w); transform: none; border-radius: 0; border: 0; border-right: 1px solid var(--line);
  box-shadow: none; padding: 10px 8px 8px; gap: 1px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; z-index: 15; align-items: stretch; }
#app .rail .nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink-2); font: 500 13.5px var(--font-body); text-align: left; cursor: pointer; text-decoration: none; flex: none; }
#app .rail .nav-item svg { width: 18px; height: 18px; flex: none; }
#app .rail .nav-item span.nl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#app .rail .nav-item:hover { background: var(--surface-2); color: var(--ink); }
#app .rail .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
#app .rail .nav-item .nb { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; display: inline-grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
#app .rail .nav-item .nb.bad { background: var(--bad-soft); color: var(--bad); }
#app .rail .nav-item .nb.warn { background: var(--warn-soft); color: var(--warn); }
#app .rail .nav-item.alert::after { content: ""; position: absolute; left: 24px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 2px solid var(--surface); }
#app .rail .nav-sec { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 14px 10px 4px; white-space: nowrap; flex: none; }
#app .rail .nav-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 1px; }
#app .rail .tip, #app .rail hr { display: none; }
#app.nav-collapsed .rail .nav-item { justify-content: center; padding: 0; }
#app.nav-collapsed .rail .nav-item span.nl, #app.nav-collapsed .rail .nav-item .nb { display: none; }
#app.nav-collapsed .rail .nav-sec { font-size: 0; padding: 8px 0 2px; border-top: 1px solid var(--line); margin: 6px 8px 0; }
#app.nav-collapsed .rail .nav-item.alert::after { left: 30px; }

/* Accueil : plan 3D au centre, tableau de bord à droite */
#app #scene, #app #labels, #app .empty-office, #app .plan-fallback { left: var(--side-w); top: var(--top-h); right: var(--dash-w); bottom: 0; inset: var(--top-h) var(--dash-w) 0 var(--side-w); width: auto; height: auto; }
#app #scene { width: calc(100% - var(--side-w) - var(--dash-w)); height: calc(100% - var(--top-h)); }
#app .empty-office { padding: 24px; }
#app .floorbar-real { top: calc(var(--top-h) + 12px); left: calc(var(--side-w) + 12px); }
#app .hint { left: calc(var(--side-w) + 12px); bottom: 12px; }
#app .panel { top: var(--top-h); right: 0; bottom: 0; width: var(--dash-w); border-radius: 0; border: 0; border-left: 1px solid var(--line); box-shadow: none; transform: none; opacity: 1; pointer-events: auto; z-index: 6; }
#app .panel[data-view="overview"] #closePanel { display: none; }
#app .toasts { top: calc(var(--top-h) + 10px); }

/* pages (anciennes fenêtres) : pleine largeur sous la barre du haut */
#app .studio { top: var(--top-h); left: var(--side-w); right: 0; bottom: 0; border-radius: 0; border: 0; box-shadow: none; background: var(--bg); z-index: 12; }
#app .studio .st-head { background: var(--surface); padding: 10px 18px; min-height: 56px; }
#app .studio .st-body { padding: 18px 22px 28px; }
#app .studio [data-b="close"], #app .studio [data-c="close"], #app .studio [data-h="close"], #app .studio [data-i="close"],
#app .studio [data-p="close"], #app .studio [data-s="close"], #app .studio [data-t="close"] { display: none; }
#page .page-body { max-width: 980px; }
#page .settings-form { max-width: 820px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 16px 18px; margin-bottom: 18px; }
#page .page-body > section { max-width: 820px; }

/* éditeur du plan : plein écran sous la barre du haut */
#app.editing .rail, #app.editing .panel, #app.editing .hint { display: none; }
#app.editing { --side-w: 0px; --dash-w: 0px; }
#app.editing .topbar .brand { width: auto; }
#app .editor { top: var(--top-h); left: 0; bottom: 0; border-radius: 0; border: 0; border-right: 1px solid var(--line); box-shadow: none; }

/* téléphone : menu en tiroir, Accueil = plan en haut et tableau de bord dessous */
@media (max-width: 760px) {
  #app { --top-h: 52px; --side-w: 0px; --dash-w: 0px; --plan-h: 38vh; }
  #app .topbar { padding: 0 8px; gap: 6px; }
  .nav-toggle { display: grid; }
  #app .topbar .brand { width: auto; }
  #app .topbar .brand-text { display: none; }
  .new-btn span, #app .live { display: none; }
  .new-btn { padding: 7px 9px; }
  #app .rail { top: var(--top-h); bottom: 0; left: 0; right: auto; width: min(290px, 84vw); max-width: none; flex-direction: column; transform: translateX(-102%);
    z-index: 26; padding: 10px 8px 16px; }
  #app.nav-anim .rail { transition: transform .2s ease; }
  #app.nav-open .rail { transform: none; }
  #app .rail .nav-item { height: 42px; font-size: 15px; }
  #app .rail .nav-item svg { width: 20px; height: 20px; }
  .nav-shade { position: absolute; inset: var(--top-h) 0 0 0; background: rgb(10 16 22 / .32); z-index: 25; }
  #app #scene, #app #labels, #app .empty-office, #app .plan-fallback { inset: var(--top-h) 0 auto 0; height: var(--plan-h); width: 100%; }
  #app #scene { height: var(--plan-h); }
  #app .empty-office { padding: 10px; }
  #app .empty-office .card { padding: 14px; gap: 8px; }
  #app .floorbar-real { top: calc(var(--top-h) + 8px); left: 8px; }
  #app .hint { display: none; }
  #app .panel { top: calc(var(--top-h) + var(--plan-h)); left: 0; right: 0; width: auto; height: auto; max-height: none; bottom: 0; border-left: 0; border-top: 1px solid var(--line); }
  #app .panel[data-open="false"] { transform: none; }
  #app .studio { left: 0; top: var(--top-h); }
  #app .studio .st-body { padding: 14px 12px 24px; }
  #app .studio .st-head { padding: 8px 12px; }
  #app .new-menu { left: 8px; right: 8px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { #app .rail { transition: none; } }

/* tableau de bord de l'Accueil */
.dash-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dash-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.dash-fig:hover { border-color: var(--accent); }
.dash-fig small { font-size: 12px; color: var(--ink-2); }
.dash-fig b { font: 700 18px/1.25 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-fig em { font-style: normal; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dash-todo-list { display: flex; flex-direction: column; gap: 0; }
.dash-todo { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.dash-todo:first-child { border-top: 0; padding-top: 2px; }
.dash-todo b { display: block; font-size: 13px; font-weight: 600; }
.dash-todo small { display: block; font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; }
.dash-todo .btn { padding: 5px 10px; font-size: 12.5px; }
.dt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.dt-dot.bad { background: var(--bad); } .dt-dot.warn { background: var(--warn); }
.dash-todo-list .linklike { align-self: flex-start; margin-top: 6px; font-size: 12.5px; }
.dash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dash-quick .btn { justify-content: flex-start; padding: 8px 10px; font-size: 13px; }
.dash-quick .btn svg { width: 15px; height: 15px; }
.hint .linkbtn { font-size: 12px; }
@media (max-width: 760px) { .nav-collapse { display: none !important; } }

/* offre consultée en ligne par le client */
.offer-page { background: var(--bg); min-height: 100vh; }
.offer { max-width: 760px; margin: 0 auto; padding: 28px 16px 40px; display: flex; flex-direction: column; gap: 16px; }
.offer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.offer-head > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.offer-org { font: 700 18px var(--font-display); }
.offer-doc h1 { margin: 4px 0 2px; font: 700 22px/1.25 var(--font-display); }
.offer-totals { max-width: 320px; margin-left: auto; width: 100%; }
.offer-agree { font-size: 13.5px !important; color: var(--ink) !important; align-items: flex-start !important; line-height: 1.45; }
.offer-agree input { margin-top: 3px; }
.offer-foot { font-size: 12px; text-align: center; margin: 4px 0 0; }
.offer .check { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }

.online-link { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }

/* fiduciaire : lecture seule (le serveur refuse de toute façon les modifications) */
#app.read-only #billing [data-b="add-line"],
#app.read-only #billing [data-b="camt-apply"],
#app.read-only #billing [data-b="cancel-yes"],
#app.read-only #billing [data-b="del-line"],
#app.read-only #billing [data-b="del-pay"],
#app.read-only #billing [data-b="delete"],
#app.read-only #billing [data-b="duplicate"],
#app.read-only #billing [data-b="form"],
#app.read-only #billing [data-b="issue"],
#app.read-only #billing [data-b="mail"],
#app.read-only #billing [data-b="make-link"],
#app.read-only #billing [data-b="make-project"],
#app.read-only #billing [data-b="make-recurring"],
#app.read-only #billing [data-b="new-invoice"],
#app.read-only #billing [data-b="new-quote"],
#app.read-only #billing [data-b="remind"],
#app.read-only #billing [data-b="reopen"],
#app.read-only #billing [data-b="to-deposit"],
#app.read-only #billing [data-b="to-invoice"],
#app.read-only #billing [data-b="company"],
#app.read-only #billing [data-b="open-quote"],
#app.read-only #billing [data-b="tab"][data-id="paiements"],
#app.read-only #billing [data-b="tab"][data-id="recurrentes"],
#app.read-only #billing [data-b="tab"][data-id="reglages"],
#app.read-only #compta [data-c="acc-new"],
#app.read-only #compta [data-c="acc-toggle"],
#app.read-only #compta [data-c="bill-new"],
#app.read-only #compta [data-c="bill-cancel"],
#app.read-only #compta [data-c="iban-confirm"],
#app.read-only #compta [data-c="bill-delete"],
#app.read-only #compta [data-c="bill-paid"],
#app.read-only #compta [data-c="bl-add"],
#app.read-only #compta [data-c="bl-del"],
#app.read-only #compta [data-c="bstatus"],
#app.read-only #compta [data-c="camt-apply"],
#app.read-only #compta [data-c="entry-new"],
#app.read-only #compta [data-c="goto-opening"],
#app.read-only #compta [data-c="line-add"],
#app.read-only #compta [data-c="line-del"],
#app.read-only #compta [data-c="opening-start"],
#app.read-only #compta [data-c="reverse"],
#app.read-only #compta [data-c="rule-del"],
#app.read-only #compta [data-c="run-cancel"],
#app.read-only #compta [data-c="run-create"],
#app.read-only #compta [data-c="run-exec"],
#app.read-only #compta [data-c="sup-edit"],
#app.read-only #compta [data-c="tx-ignore"],
#app.read-only #compta [data-c="tx-post"],
#app.read-only #compta [data-c="tx-post-all"],
#app.read-only #compta [data-c="vfile"],
#app.read-only #compta [data-c="vpay"],
#app.read-only #compta [data-c="vset"],
#app.read-only #compta [data-c="vunfile"],
#app.read-only #compta [data-c="year-close"],
#app.read-only #compta [data-c="year-reopen"],
#app.read-only #compta label[for="billFile"],
#app.read-only #compta label.btn[for],
#app.read-only #compta [data-c="tab"][data-id="parametres"] { display: none !important; }
#app.read-only #scene, #app.read-only #labels, #app.read-only .empty-office, #app.read-only .plan-fallback, #app.read-only .hint, #app.read-only .floorbar-real { display: none !important; }
#app.read-only .panel { left: var(--side-w); width: auto; border-left: 0; }
#app.read-only .panel .panel-body { max-width: 760px; }
.fidu-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.offer-lines { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.offer-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.offer-line b { display: block; font-weight: 600; white-space: pre-line; }
.offer-line .muted { font-size: 12.5px; }
.offer-line .num { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.offer-line.opt .num { color: var(--ink-2); font-weight: 500; }
.settings-grid { display: flex; flex-direction: column; gap: 18px; }
.settings-side { display: flex; flex-direction: column; gap: 16px; }
.settings-side > section { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }
#secBox { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.sec-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
dialog.reauth { border: 1px solid var(--line); border-radius: 8px; padding: 20px; width: min(420px, calc(100% - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
dialog.reauth::backdrop { background: rgb(10 16 22 / .4); }
dialog.reauth form { display: flex; flex-direction: column; gap: 12px; }
dialog.reauth h3 { margin: 0; font: 700 17px var(--font-display); } dialog.reauth p { margin: 0; font-size: 14px; }
#app.enroll-only { --side-w: 0px; }
#app.enroll-only .rail, #app.enroll-only .nav-toggle, #app.enroll-only #setupBtn,
#app.enroll-only #userMenu [data-act]:not([data-act="logout"]):not([data-act="account"]), #app.enroll-only #userMenu .mi-link { display: none !important; }
.enroll-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 16px; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent-soft); }
.enroll-note svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.enroll-note b { display: block; margin-bottom: 2px; } .enroll-note span { font-size: 13.5px; color: var(--ink-2); }
.sec-steps { margin: 0; padding-left: 20px; }
.sec-qr { width: 200px; height: 200px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 6px; box-sizing: content-box; }
.sec-key { word-break: break-all; user-select: all; color: var(--ink); }
.sec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 28px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 6px; font-size: 15px; user-select: all; }
#page .page-body:has(.settings-grid) { max-width: 1240px; }
@media (min-width: 1180px) { .settings-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); align-items: start; } #page .settings-grid .settings-form { margin-bottom: 0; } }

/* ---------- documents contractuels (pages publiques) ---------- */
.legal-page { background: var(--bg); }
.legal-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--line); background: var(--surface); }
.legal-brand { display: flex; align-items: center; gap: 10px; font: 700 18px var(--font-display); color: var(--ink); text-decoration: none; }
.legal-head nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; } .legal-head nav a { color: var(--accent); }
.legal { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.legal-doc + .legal-doc { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.legal h2 { font: 700 26px/1.2 var(--font-display); letter-spacing: -.02em; margin: 0 0 8px; }
.legal h3 { font: 700 18px/1.3 var(--font-display); margin: 28px 0 8px; }
.legal p { margin: 0 0 12px; } .legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; } .legal li { margin-bottom: 4px; }
.legal-table { overflow-x: auto; margin: 0 0 16px; }
.legal table { border-collapse: collapse; width: 100%; font-size: 14px; } .legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal th { background: var(--surface-2); font-weight: 600; }
.legal-foot { text-align: center; color: var(--ink-2); font-size: 13px; padding: 24px 16px 40px; }
@media print { .legal-head nav, .legal-foot { display: none; } .legal { max-width: none; } }
.auth-side .legal-links { margin: 0; font-size: 13px; }

/* ---------- salles de réunion ---------- */
.rm-nav { justify-content: space-between; align-items: center; }
.rm-day { font: 600 15px var(--font-display); min-width: 210px; text-align: center; }
.rm-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.rm-plan { min-width: 1090px; }                                  /* environ 70 px par heure, défilement sur petit écran */
.rm-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); border-top: 1px solid var(--line); }
.rm-row.rm-head { border-top: 0; }
.rm-name { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); }
.rm-name b { font-weight: 600; font-size: 14px; } .rm-name small { color: var(--ink-2); font-size: 12px; }
.rm-hours { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.rm-hours span { padding: 8px 0 6px 4px; font: 12px var(--font-data); color: var(--ink-2); border-left: 1px solid var(--line); }
.rm-track { position: relative; min-height: 52px;
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--cols) - 1px), var(--line) calc(100% / var(--cols) - 1px), var(--line) calc(100% / var(--cols))); }
.rm-track.free { cursor: copy; } .rm-track.free:hover { background-color: var(--surface-2); }
.rm-b { position: absolute; top: 6px; bottom: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 2px 6px;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-2); border-radius: 6px; background: var(--surface-2); color: var(--ink);
  font: 12.5px var(--font-body); text-align: left; cursor: pointer; }
.rm-b > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-b b { font: 600 12px var(--font-data); } .rm-b small { color: var(--ink-2); font-size: 11.5px; }
.rm-b.mine { border-left-color: var(--accent); background: var(--accent-soft); }
.rm-b.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.rm-detail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@media (max-width: 760px) { .rm-row { grid-template-columns: 120px minmax(0, 1fr); } .rm-day { min-width: 0; } #bookForm .grid3 { grid-template-columns: 1fr; } #bookForm .span2 { grid-column: auto; } }