/* Watapix Compta V2 — feuille de style commune (reprise de la maquette validée). */

:root {
  --navy: #2A3542;
  --navy-2: #3A4757;
  --ink: #07272D;
  --text: #2A3542;
  --muted: #6E6863;
  --blue: #007A90;
  --blue-dark: #005C6D;
  --cyan: #00A5C2;
  --cyan-light: #E0F4F7;
  --cyan-pale: #F7FBFC;
  --bg: #F1F2F7;
  --card: #FFFFFF;
  --line: #E3E1E0;
  --line-soft: #ECEBEA;
  --field: #C9CED6;
  --ok: #155E4B;
  --ok-bg: #DCF1EA;
  --warn: #9A4A07;
  --warn-bg: #FDEBD8;
  --grey-bg: #ECEBEA;
  --radius: 12px;
  --font: 'Open Sans', system-ui, sans-serif;
  --font-title: Montserrat, 'Open Sans', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 var(--font); }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
h1, h2, h3 { font-family: var(--font-title); color: var(--ink); margin: 0; line-height: 1.25; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: none; color: var(--text); }
.btn-primary { background: var(--blue); color: #FFF; }
.btn-primary:hover { background: var(--blue-dark); color: #FFF; }
.btn-dark { background: var(--navy); color: #FFF; }
.btn-dark:hover { background: var(--navy-2); color: #FFF; }
.btn-outline { border-color: var(--blue); color: var(--blue); background: #FFF; }
.btn-ghost { border-color: var(--field); background: #FFF; }
.btn-link { color: var(--blue); }
/* Pas de bouton « dans le vide » : contour systématique (les liens de ligne des tableaux restent des .row-action). */
.btn.btn-link { border-color: var(--field); background: #FFF; }
.btn.btn-link:hover { border-color: var(--blue); }
.btn.btn-link.danger { color: var(--warn); }
.btn.btn-link.danger:hover { border-color: var(--warn); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }

/* Formulaires */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-weight: 600; font-size: 13px; color: var(--muted); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel], input[type=number], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; font: inherit; color: var(--text); background: #FFF;
}
textarea { padding: 10px 12px; resize: vertical; min-height: 88px; }
input[type=file] { width: 100%; padding: 10px; border: 1px dashed var(--field); border-radius: 10px; background: var(--cyan-pale); font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
input[type=file]:hover { border-color: var(--cyan); }
input[type=file]::file-selector-button { margin-right: 14px; min-height: 40px; padding: 0 16px; border: 1px solid var(--field); border-radius: 8px; background: #FFF; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--cyan); color: var(--cyan); }
select { -webkit-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6863' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
input[readonly] { background: #FAFAFA; color: var(--muted); border-color: var(--line-soft); }
.field-error input, .field-error select { border-color: var(--warn); }

/* Champs date : saisie jj/mm/aaaa et calendrier (app.js) */
.datepick { position: relative; }
.datepick input[type=text] { padding-right: 44px; }
.datepick.is-invalid input[type=text] { border-color: var(--warn); }
.datepick-btn { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--muted); border-radius: 10px; cursor: pointer; }
.datepick-btn:hover, .datepick-btn[aria-expanded=true] { color: var(--cyan); }
.datepick-pop { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; width: 288px; max-width: calc(100vw - 32px); padding: 12px; background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 32px rgba(42, 53, 66, .16); }
.datepick-pop[hidden] { display: none; }
.datepick-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.datepick-head strong { font: 700 15px var(--font-title); text-transform: capitalize; color: var(--text); }
.datepick-nav { width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; font-size: 22px; line-height: 1; color: var(--text); cursor: pointer; }
.datepick-nav:hover { background: var(--cyan-pale); color: var(--cyan); }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick-dow { text-align: center; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.datepick-day { height: 36px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; }
.datepick-day:hover { background: var(--cyan-light); }
.datepick-day:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.datepick-day.is-today { font-weight: 700; color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.datepick-day.is-selected { background: var(--cyan); color: #FFF; font-weight: 700; }
.datepick-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.datepick-link { border: 0; background: none; padding: 6px 4px; font: inherit; font-size: 13px; font-weight: 600; color: var(--cyan); cursor: pointer; }
.datepick-link:hover { text-decoration: underline; }
.field-msg { font-size: 12px; color: var(--warn); }
.hint { font-size: 12px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 10px; min-height: 40px; }
input[type=checkbox] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 0; border: 1.5px solid #AEB6C2; border-radius: 4px; background: #FFF center/12px no-repeat; cursor: pointer; }
input[type=checkbox]:checked { background-color: var(--cyan); border-color: var(--cyan); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.span-all { grid-column: 1 / -1; }
.span-2 { grid-column: span 2; }
.toolbar-search { flex: 1 1 260px; width: auto; }
.avatar-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 20px; }
.history { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }

/* Cartes, alertes, badges */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.card-flush { padding: 0; overflow: hidden; gap: 0; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.alert { padding: 12px 14px; border-radius: 10px; font-size: 14px; }
.alert-error { background: var(--warn-bg); color: var(--warn); }
.alert-success { background: var(--ok-bg); color: var(--ok); }
.alert-info { background: var(--cyan-light); color: #1F5560; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-info { background: var(--cyan-light); color: #1F5560; }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-grey { background: var(--grey-bg); color: #3C3734; }
.badge-dark { background: var(--navy); color: #FFF; }
a.badge-dark:hover, a.badge-dark:focus-visible { background: var(--navy-2); color: #FFF; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stat { background: #FFF; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.stat-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.stat-value { font-family: var(--font-title); font-size: 22px; font-weight: 700; color: var(--ink); }

/* Tableaux */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { background: #FAFAFA; text-align: left; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; padding: 12px 10px; }
.table th.num { text-align: right; }
.table td { padding: 12px 10px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-left: 18px; }
.table th:last-child, .table td:last-child { padding-right: 18px; }
.table tr:hover td { background: #FAFAFA; }
.num { text-align: right; white-space: nowrap; }
.avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; background: var(--cyan-light); color: #1F5560; font: 700 13px var(--font-title); display: inline-flex; align-items: center; justify-content: center; }
.cell-main { display: flex; align-items: center; gap: 12px; }
.cell-title { font-weight: 700; color: var(--text); text-decoration: none; }
.cell-sub { font-size: 12px; color: var(--muted); }
.empty { padding: 32px; text-align: center; color: var(--muted); }

/* Mise en page du back-office */
.app { min-height: 100vh; display: flex; }
.nav { flex: 0 0 264px; background: var(--navy); color: #C9D1DB; display: flex; flex-direction: column; gap: 28px; padding: 28px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nav-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px; text-decoration: none; }
.nav-logo img { height: 26px; width: auto; }
.brand-sub { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; white-space: nowrap; text-transform: uppercase; color: #AEB6C2; }
.nav-links { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.nav a, .nav button.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; color: #C9D1DB; text-decoration: none; font: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.nav a:hover, .nav button.nav-item:hover { background: var(--navy-2); color: #FFF; }
.nav a[aria-current=page] { background: #34465A; color: #FFF; font-weight: 700; box-shadow: inset 3px 0 0 var(--cyan); }
.nav .soon { margin-left: auto; font-size: 11px; color: #8D98A8; }
.nav a.is-disabled { opacity: .6; cursor: default; }
.nav a.is-disabled:hover { background: none; color: #C9D1DB; }
.nav svg { flex: 0 0 18px; }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 16px 36px; background: #FFF; border-bottom: 1px solid var(--line); }
.topbar-mobile { display: none; }
.main { padding: 28px 36px 56px; display: flex; flex-direction: column; gap: 20px; max-width: 1240px; width: 100%; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.flashes { display: flex; flex-direction: column; gap: 8px; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.col-side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
dl.props { margin: 0; display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 10px 16px; font-size: 14px; }
dl.props dt { color: var(--muted); }
dl.props dd { margin: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmented { display: inline-flex; background: #FFF; border: 1px solid #DDDCDC; border-radius: 10px; padding: 4px; gap: 4px; }
.segmented a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 7px; text-decoration: none; color: var(--text); }
.segmented a[aria-current=true] { background: var(--navy); color: #FFF; font-weight: 600; }
.lookup-result { padding: 14px 16px; border-radius: 10px; background: var(--cyan-pale); border: 1px solid var(--cyan-light); font-size: 14px; display: none; }
.lookup-result.show { display: block; }
.lookup-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.lookup-list button { width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #FFF; font: inherit; cursor: pointer; }
.lookup-list button:hover { border-color: var(--cyan); }

/* Onglets et filtres */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid #DDDCDC; }
.tabs a { min-height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; text-decoration: none; color: var(--muted); font-weight: 600; }
.tabs a[aria-selected=true] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cyan); }
.tabs .count { background: var(--grey-bg); color: #3C3734; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.filters .field { min-width: 150px; }
.filters-q { flex: 1 1 220px; }
.num-doc { font-family: var(--font-title); }

/* Éditeur de document */
.card-pad { padding: 16px 20px; }
.lines { display: flex; flex-direction: column; }
.line { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-start; padding: 12px 16px 12px 8px; border-top: 1px solid var(--line-soft); }
.line-title { background: var(--cyan-pale); }
.line-handle { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.icon-btn { width: 30px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: #AEB6C2; cursor: pointer; font-size: 11px; }
.icon-btn:hover { background: var(--grey-bg); color: var(--text); }
.icon-danger { color: var(--warn); font-size: 14px; height: 34px; }
.line-body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.line-body textarea { min-height: 56px; font-size: 13px; }
.input-designation { font-weight: 700; text-transform: uppercase; }
.input-title { font-family: var(--font-title); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--blue); }
.input-subtitle { font-family: var(--font-title); font-weight: 700; margin-left: 16px; width: calc(100% - 16px); }
.line-nums { order: 4; flex: 1 1 100%; margin-left: 40px; display: grid; grid-template-columns: 80px 110px 110px 80px 170px 1fr; gap: 8px; align-items: start; }
.line-nums .field label { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.line-nums input, .line-nums select { min-height: 38px; padding: 0 6px; font-size: 14px; }
.line-nums select { padding-right: 26px; background-position: right 6px center; background-size: 14px; }
.line-nums input { text-align: right; }
.line-total { text-align: right; padding-top: 20px; white-space: nowrap; }
.line-total .label { display: none; }
/* Saut de page : la rangée garde la classe .line-break (lue par le JS), le trait pointillé est sur .pagebreak-mark. */
.line-break { align-items: center; }
.line-break .line-handle { padding-top: 0; }
.pagebreak-mark { flex: 1; display: flex; align-items: center; gap: 12px; min-height: 30px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.pagebreak-mark::before, .pagebreak-mark::after { content: ''; flex: 1; border-top: 1px dashed #AEB6C2; }
.btn-dashed { border-style: dashed; }
.line-add { border-top: 1px solid var(--line-soft); }
.line-grip { width: 22px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: none; color: #AEB6C2; font-size: 16px; line-height: 1; cursor: grab; touch-action: none; }
.line-grip:hover, .line-grip:focus-visible { color: var(--text); background: var(--grey-bg); }
.line-hours { display: block; font-size: 11px; color: var(--muted); text-align: right; white-space: nowrap; }
.line-hours:empty { display: none; }
.lines-head { display: none; }
.rte { border: 1px solid var(--field); border-radius: 10px; background: #FFF; overflow: hidden; }
.rte.is-focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-light); }
.rte-bar { display: flex; gap: 2px; padding: 3px 4px; border-bottom: 1px solid var(--line-soft); background: #FAFAFA; }
.rte-btn { width: 28px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--text); font: 700 14px/1 Georgia, serif; cursor: pointer; }
.rte-italic { font-style: italic; font-weight: 400; }
.rte-btn:hover { background: var(--grey-bg); }
.rte-btn[aria-pressed=true] { background: var(--cyan-light); color: #1F5560; }
.rte-area { min-height: 56px; padding: 8px 10px; font-size: 13px; line-height: 1.5; color: var(--text); outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.rte-area.is-empty::before { content: attr(data-placeholder); color: #9AA1AB; pointer-events: none; }
.rte-area b, .rte-area strong { font-weight: 700; }
#intro + .rte-area, .field .rte .rte-area { min-height: 56px; }
.lines.is-sorting { cursor: grabbing; user-select: none; }
.lines.is-sorting .line-grip { cursor: grabbing; }
.line.is-dragging { position: relative; z-index: 2; background: #FFF; box-shadow: 0 8px 24px rgba(42, 53, 66, .18); border-radius: 10px; opacity: .96; }

/* Ordinateur : une ligne = une rangée alignée sous l'en-tête des colonnes (comme la maquette). */
@media (min-width: 821px) {
  .lines-scroll { overflow-x: auto; }
  .lines-head, .line { display: grid; grid-template-columns: 22px minmax(170px, 1fr) 58px 80px 78px 54px 92px 86px 34px; column-gap: 6px; align-items: start; min-width: 760px; padding: 8px 12px; }
  .lines-head { padding: 10px 12px; background: #FAFAFA; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
  .lines-head .num { text-align: right; }
  .line-handle { padding-top: 4px; }
  .line-body { gap: 6px; }
  .line-title .line-body, .line-subtitle .line-body, .pagebreak-mark { grid-column: 2 / 9; }
  .line-break { align-items: center; }
  .line-break > [data-remove] { height: 30px; }
  .line-nums { display: contents; }
  .line-nums .field { gap: 4px; }
  .line-nums .field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .line-nums input, .line-nums select { min-height: 38px; font-size: 13px; }
  .line-nums select { padding: 0 20px 0 6px; background-position: right 4px center; background-size: 12px; }
  .line-total { padding-top: 10px; font-size: 13px; }
  .line > [data-remove] { width: 34px; height: 38px; display: inline-flex; align-items: center; justify-content: center; }
}
.doc-aside { align-self: flex-start; }
dl.totals { margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
dl.totals div { display: flex; justify-content: space-between; gap: 12px; }
dl.totals dt, dl.totals dd { margin: 0; }
dl.totals .strong { font-weight: 700; border-top: 1px solid var(--line-soft); padding-top: 8px; }
dl.totals .ttc { border-top: 2px solid var(--cyan); padding-top: 10px; font-family: var(--font-title); font-weight: 700; font-size: 18px; color: var(--ink); }
dl.totals [data-t=vatrows] { display: flex; flex-direction: column; gap: 8px; }
.delete-form { margin-top: -8px; }
.danger { color: var(--warn); }
.inline-form { display: flex; gap: 8px; }
.inline-form select { width: 96px; }
.inline-form .input-pct { width: 72px; text-align: right; }
.inline-form .pct-suffix { align-self: center; color: var(--muted); }
.stack-form { display: flex; flex-direction: column; gap: 10px; }
.line-title-view { color: var(--blue); text-transform: uppercase; font-family: var(--font-title); }

/* Tableau de bord */
.alerts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.alerts .alert { text-decoration: none; }
/* Alertes cliquables : la couleur du texte ne change pas au survol, seul le contour l'indique. */
a.alert { border: 1px solid transparent; }
a.alert-error:hover { color: var(--warn); border-color: currentColor; }
a.alert-success:hover { color: var(--ok); border-color: currentColor; }
a.alert-info:hover { color: #1F5560; border-color: currentColor; }
.up { color: var(--ok); font-weight: 600; }
.down { color: var(--warn); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.land-total { font-family: var(--font-title); font-size: 30px; font-weight: 700; color: var(--ink); }
.land-bar { position: relative; display: flex; gap: 2px; height: 28px; border-radius: 8px; overflow: visible; background: var(--bg); margin-top: 22px; }
.land-bar .seg:first-child { border-radius: 8px 0 0 8px; }
.seg-done { background: var(--navy); }
.seg-planned { background: var(--cyan); }
.seg-validated { background: #5BD0E3; }
.seg-potential { background: repeating-linear-gradient(45deg, #C9CED6 0 6px, #ECEBEA 6px 12px); }
.seg-prev { background: #D3D7DE; }
.land-bar .marker { position: absolute; top: -22px; bottom: -6px; border-left: 2px dashed var(--ink); }
.land-bar .marker span { position: absolute; top: 0; left: 6px; white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--ink); }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; font-size: 13px; color: var(--muted); }
.legend div { display: flex; gap: 10px; }
.legend i, .legend-inline i { flex: 0 0 12px; width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-top: 3px; }
.legend strong { display: block; font-family: var(--font-title); font-size: 17px; color: var(--ink); }
.legend-inline { display: flex; gap: 14px; color: var(--muted); }
.legend-inline span { display: inline-flex; align-items: center; gap: 6px; }
.legend-inline i { margin-top: 0; }
.target { border-top: 1px solid var(--line-soft); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.target-bar { height: 10px; border-radius: 5px; background: var(--line-soft); overflow: hidden; }
.target-bar span { display: block; height: 10px; background: linear-gradient(90deg, var(--navy), var(--cyan)); }
.chart-months, .chart-weeks { display: flex; gap: 8px; align-items: stretch; height: 190px; }
.chart-weeks { height: 150px; }
.month { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.month .bars { flex: 1; width: 100%; display: flex; justify-content: center; align-items: flex-end; gap: 3px; }
.bar-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 45%; max-width: 26px; height: 100%; }
.chart-weeks .bar-stack { width: 60%; max-width: 34px; }
.bar { display: block; width: 100%; border-radius: 3px 3px 0 0; }
.bar-stack .bar-cur { border-radius: 0; }
.bar-stack .bar-cur:last-child, .bar-stack .bar-planned { border-radius: 3px 3px 0 0; }
.bar-cur { background: var(--cyan); }
.bar-planned { background: repeating-linear-gradient(45deg, var(--cyan) 0 3px, #B9EAF2 3px 6px); }
.bar-prev { background: #D3D7DE; width: 45%; max-width: 26px; }
.bar-navy { background: var(--navy); width: 60%; max-width: 34px; }
.bar[data-tip] { cursor: default; outline: none; transition: filter .12s; }
.bar[data-tip]:hover, .bar[data-tip].is-tip, .bar[data-tip]:focus-visible { filter: brightness(.88) saturate(1.15); }
.bar[data-tip]:focus-visible { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px var(--cyan); }
.chart-tip { position: absolute; z-index: 60; min-width: 200px; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--navy); color: #FFF; font-size: 13px; line-height: 1.35; box-shadow: 0 10px 28px rgba(42, 53, 66, .28); pointer-events: none; }
.chart-tip[hidden] { display: none; }
.chart-tip::after { content: ''; position: absolute; left: var(--arrow, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; background: var(--navy); transform: rotate(45deg); border-radius: 2px; }
.chart-tip.is-below::after { bottom: auto; top: -6px; }
.chart-tip-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; }
.chart-tip-title i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 3px; max-width: none; }
.chart-tip dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; }
.chart-tip dt { color: #AEB6C2; }
.chart-tip dd { margin: 0; text-align: right; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.month .val { font-size: 11px; font-weight: 600; white-space: nowrap; min-height: 15px; }
.month .lbl { font-size: 12px; color: var(--muted); }
.aging-bar { display: flex; gap: 2px; height: 16px; border-radius: 8px; overflow: hidden; background: var(--bg); }
.ag-due { background: var(--cyan); }
.ag-late30 { background: #F5A25D; }
.ag-late90 { background: #D9711C; }
.ag-late90plus { background: var(--warn); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.top-client { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); }
.top-client .row { display: flex; justify-content: space-between; gap: 12px; }
.top-client .track { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.top-client .track span { display: block; height: 8px; background: var(--cyan); }
.vat-now { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--cyan-pale); border: 1px solid var(--cyan-light); font-size: 13px; font-weight: 600; }
.vat-now strong { font-family: var(--font-title); font-size: 22px; color: var(--ink); }

.portal-user { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; }
.msg { padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.msg-client { background: var(--cyan-pale); border: 1px solid var(--cyan-light); }
.msg-watapix { background: var(--bg); margin-left: 24px; }
.msg-meta { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }

/* Espace client */
body.pt { background: var(--bg); }
.pt-header { background: #FFF; border-bottom: 1px solid var(--line); }
.pt-head { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.pt-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.pt-logo img { height: 28px; width: auto; }
.pt-logo span, .pt-auth-brand span { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); }
.pt-nav { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.pt-nav form { display: inline-flex; }
.pt-nav > a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; }
.pt-nav > a:hover { background: var(--bg); }
.pt-account { margin-left: auto; display: flex; flex-direction: column; text-align: right; font-size: 14px; line-height: 1.3; }
.pt-burger { display: none; margin-left: auto; }
.pt-main { max-width: 1120px; margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-direction: column; gap: 20px; }
.pt-footer { max-width: 1120px; margin: 0 auto; padding: 0 24px 32px; }
.pt-h { font-family: var(--font-title); font-size: 24px; color: var(--ink); margin: 0; }
.pt-pending { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1px solid var(--cyan); border-radius: 12px; background: var(--cyan-pale); text-decoration: none; color: var(--text); }
.pt-pending-list { display: flex; flex-direction: column; gap: 12px; }
.pt-pending > span { display: flex; flex-direction: column; gap: 2px; }
.pt-eyebrow { font-size: 12px; font-weight: 700; color: var(--blue); text-transform: uppercase; letter-spacing: .5px; }
.pt-amount { align-items: flex-end; font-family: var(--font-title); font-size: 20px; font-weight: 700; color: var(--ink); gap: 8px !important; }
.pt-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.pt-msg-client { align-self: flex-end; margin-left: auto; background: var(--blue); color: #FFF; border-bottom-right-radius: 4px; }
.pt-msg-client .msg-meta { color: #D6F1F5; }
.pt-msg-watapix { background: #FFF; border: 1px solid var(--cyan-light); border-bottom-left-radius: 4px; }
.pt-terms { align-items: flex-start; font-size: 14px; line-height: 1.5; }
.pt-terms input { margin-top: 3px; }
body.pt-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 40px 16px; }
.pt-auth-brand { display: flex; align-items: center; gap: 12px; }
.pt-auth-brand img { height: 32px; }
.pt-auth-main { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; }

/* Écrans de connexion */
body.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-side { flex: 1 1 420px; background: var(--navy); color: #C9D1DB; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.auth-brand { display: flex; align-items: center; gap: 14px; }
.auth-logo { height: 34px; width: auto; vertical-align: middle; }
.auth-pitch { display: flex; flex-direction: column; gap: 18px; max-width: 440px; }
.auth-pitch h1 { color: #FFF; font-size: 30px; }
.auth-note { font-size: 13px; color: #AEB6C2; }
.auth-main { flex: 1 1 520px; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-card { width: 100%; max-width: 420px; padding: 36px; gap: 18px; border-radius: 16px; }
.auth-card h2 { font-size: 24px; }
.input-code { font-family: var(--font-title); font-size: 24px; letter-spacing: 8px; text-align: center; }
.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.qr { display: block; width: max-content; margin: 8px 0; padding: 6px; background: #fff; border: 1px solid var(--cyan-light); border-radius: 8px; line-height: 0; }
.qr svg { display: block; width: 200px; height: 200px; }
.secret { display: block; margin: 8px 0 4px; padding: 10px 12px; background: var(--cyan-pale); border: 1px solid var(--cyan-light); border-radius: 8px; font: 700 16px/1.4 ui-monospace, Menlo, monospace; letter-spacing: 1px; word-break: break-all; }

/* Erreurs */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

@media (max-width: 820px) {
  .pt-burger { display: inline-flex; }
  .pt-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .pt-nav.open { display: flex; }
  .pt-account { margin-left: 0; text-align: left; }
  .pt-head, .pt-main { padding-left: 16px; padding-right: 16px; }
  .app { flex-direction: column; }
  .nav { position: fixed; top: var(--nav-top, 60px); left: 0; right: 0; bottom: 0; z-index: 40; height: auto; padding: 12px 16px 24px; gap: 8px; display: none; overflow-y: auto; overscroll-behavior: contain; box-shadow: inset 0 8px 12px -10px rgba(0, 0, 0, .5); }
  .nav.open { display: flex; animation: nav-in .18s ease-out; }
  .topbar { position: sticky; top: 0; z-index: 41; }
  body.nav-locked { overflow: hidden; }
  .nav .nav-logo { display: none; }
  .topbar { padding: 12px 16px; gap: 10px; }
  .topbar-mobile { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  .topbar-mobile img { height: 24px; }
  .main { padding: 20px 16px 40px; }
  .span-2 { grid-column: 1 / -1; }
  .doc-aside { position: static; }
  .line { flex-wrap: wrap; padding-left: 4px; }
  .line-handle { flex-direction: row; order: 3; }
  .line-nums { flex-basis: 100%; margin-left: 0; grid-template-columns: repeat(3, 1fr); }
  .line-total .label { display: inline; margin-right: 8px; color: var(--muted); font-size: 12px; }
  .avatar-lg { display: none; }
  .auth-side { padding: 20px 16px; gap: 12px; flex-basis: 100%; }
  .auth-pitch, .auth-note { display: none; }
  body.auth { align-content: flex-start; }
  .auth-main { padding: 24px 16px 40px; align-items: flex-start; }
  .auth-card { padding: 24px; }
  /* Tableaux en fiches */
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
  .table-cards td { border: 0; padding: 2px 0 !important; text-align: left; }
}

/* Éditeur de facture / devis : en-tête, fiche client, panneau latéral (maquette Édition) */
.main:has(.doc-editor) { max-width: 1560px; }
.editor-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.editor-state { display: flex; align-items: center; gap: 10px; }
.editor-state .is-error { color: var(--warn); font-weight: 600; }
.client-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; align-items: start; }
.client-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 24px; }
.client-card[hidden] { display: none; }
.client-addr { line-height: 1.6; }
.mentions-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.6; }
.mentions-list li[hidden] { display: none; }
.next-number { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--cyan-pale); border: 1px solid var(--cyan-light); }
.next-number .label { font-size: 12px; font-weight: 600; color: var(--muted); }
.next-number strong { font-family: var(--font-title); font-size: 20px; color: var(--ink); letter-spacing: .3px; }
.next-number strong span { color: var(--blue); }
.fx-checks { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); }
.fx-checks > .label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.fx-check { display: flex; gap: 8px; font-size: 12px; line-height: 1.4; }
.fx-check > span:first-child { flex: 0 0 10px; font-weight: 700; }
.fx-ok { color: #1F7A4D; }
.fx-warn { color: var(--warn); }
.fx-muted { color: var(--muted); }
.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.origin-ref { font-weight: 600; }
.preview-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.preview-toggle svg { color: var(--blue); transition: transform .15s; }
.preview-toggle[aria-expanded=false] svg { transform: rotate(180deg); }
.preview-pages { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 10px; background: #E9EBEF; max-height: 640px; overflow-y: auto; }
.preview-pages[hidden] { display: none; }
.pv-page { position: relative; aspect-ratio: 210 / 297; padding: 14px 14px 22px; background: #FFF; box-shadow: 0 1px 4px rgba(42, 53, 66, .18); font-size: 8px; line-height: 1.35; color: var(--text); overflow: hidden; }
.pv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.pv-head img { height: 14px; width: auto; }
.pv-who { display: flex; flex-direction: column; text-align: right; }
.pv-who strong { font-family: var(--font-title); font-size: 10px; color: var(--blue); }
.pv-row { display: flex; justify-content: space-between; gap: 6px; padding: 2px 0; }
.pv-row span:last-child { white-space: nowrap; }
.pv-title { margin-top: 4px; font-weight: 700; color: var(--blue); }
.pv-sub { font-weight: 700; padding-left: 4px; }
.pv-item { padding-left: 6px; border-bottom: 1px solid var(--line-soft); }
.pv-total { margin-top: 6px; padding-top: 4px; border-top: 1.5px solid var(--cyan); font-weight: 700; }
.pv-num { position: absolute; right: 12px; bottom: 8px; font-size: 7px; color: var(--muted); }
.rec-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rec-fields[hidden] { display: none; }
.switch { position: relative; display: inline-flex; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch span { width: 44px; height: 26px; border-radius: 13px; background: var(--field); display: inline-flex; align-items: center; padding: 3px; transition: background .15s; }
.switch span::after { content: ''; width: 20px; height: 20px; border-radius: 50%; background: #FFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch input:checked + span { background: var(--blue); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 820px) {
  .client-pick { grid-template-columns: 1fr; }
  .client-card { padding-top: 0; }
}

/* En-têtes de tableau triables */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--ink); }
.th-sort span { font-size: 9px; color: var(--blue); }
.th-sort.is-on { color: var(--ink); }
.num .th-sort { justify-content: flex-end; }

/* Lien PDF des listes : icône de document */
.pdf-link { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; color: #AEB6C2; transition: background .12s, color .12s, transform .12s; }
.pdf-link:hover, .pdf-link:focus-visible { background: var(--cyan-pale); color: var(--blue); transform: translateY(-1px); }

/* Suivi des forfaits (maquette Suivi) */
.task-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.task-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.task-checks { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.chrono { padding: 0; border: 0; background: none; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
.chrono[aria-pressed=true] { color: var(--warn); font-weight: 600; }
.track-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.month-nav { display: flex; align-items: center; gap: 6px; }
.month-nav .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; font-size: 20px; text-decoration: none; color: var(--text); }
.gauge { display: flex; height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
/* Largeur posée par app.js (data-w) ; 0 tant qu'elle ne l'est pas, jamais une barre pleine par erreur. */
.gauge span { display: block; width: 0; height: 100%; }
.gauge .gauge-used { background: var(--navy); }
.gauge.is-alert .gauge-used { background: #F5A25D; }
.gauge .gauge-over { background: #D9711C; }
.gauge-lg { height: 22px; border-radius: 11px; }
.task-list { display: flex; flex-direction: column; }
.task { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.task.is-internal { background: repeating-linear-gradient(135deg, transparent 0 8px, #FAFAFA 8px 16px); }
.task-date { flex: 0 0 74px; }
.task-body { flex: 1; min-width: 0; font-size: 14px; }
.task-body .badge { margin-left: 4px; }
.task-dur { flex: 0 0 auto; font-weight: 700; white-space: nowrap; }
.icon-edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.track-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.overage { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; max-width: 440px; }
.segmented form { display: contents; }
.segmented button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; font: inherit; color: var(--text); cursor: pointer; }
.segmented button[aria-checked=true] { background: var(--navy); color: #FFF; font-weight: 700; }
.static-value { min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.req { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.req:first-of-type { border-top: 0; }
.req-estimate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.req-estimate select { width: auto; min-height: 36px; }
form.inline { display: inline; }
.client-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.client-badges a.badge { text-decoration: none; }
.track-link { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.track-link:hover { border-color: var(--cyan); }
.narrow { max-width: 760px; }
.nowrap { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* Espace client : suivi, demandes, notifications (maquette Portail) */
.pt-track { gap: 18px; }
.pt-track-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.pt-month { display: flex; align-items: center; gap: 8px; }
.pt-month label { font-size: 13px; font-weight: 600; color: var(--muted); }
.pt-month select { width: auto; min-height: 40px; }
.pt-gauge-wrap { display: flex; flex-direction: column; gap: 8px; }
.pt-gauge-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.pt-history { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.pt-history-card { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; font-size: 13px; text-decoration: none; color: var(--text); }
.pt-history-card:hover { border-color: var(--cyan); }
.pt-history-m { font-weight: 600; }
.pt-note-muted { font-size: 12px; color: var(--muted); }
.pt-note-over { font-size: 12px; color: var(--warn); font-weight: 600; }
.pt-note-free { font-size: 12px; color: var(--ok); font-weight: 600; }
.pt-table caption { text-align: left; padding-bottom: 8px; font-weight: 700; color: var(--ink); }
.pt-track .pt-table { min-width: 640px; }
.pt-track-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
.pt-req { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.pt-req > div:first-child { flex: 1 1 260px; }
.pt-req-form { padding: 14px; border: 1px solid var(--cyan-light); border-radius: 10px; background: var(--cyan-pale); }
.pt-req-form[hidden] { display: none; }
.pt-req-form select { width: auto; }
.file-btn { position: relative; cursor: pointer; }
.pt-notifs { display: flex; flex-direction: column; gap: 2px; }
.pt-notif-link { font-size: 14px; }

/* Espace client : documents partagés (maquette Portail) */
.pt-vault { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pt-vault-item { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; text-decoration: none; color: var(--text); }
.pt-vault-item svg { flex: 0 0 22px; color: var(--blue); }
.pt-vault-item strong { font-size: 14px; }
.pt-vault-item:hover { border-color: var(--cyan); }
.pt-vault-info { display: block; font-size: 12px; color: var(--muted); }
#notifs .btn { align-self: flex-start; }

/* Menu : compteur (récurrences actives) */
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--cyan); color: #07272D; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* Dépenses */
.exp-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.exp-form select { width: auto; min-height: 34px; font-size: 13px; padding-left: 8px; }
.exp-form .exp-year { width: 72px; min-height: 34px; font-size: 13px; }
.exp-form .check { min-height: 34px; gap: 6px; }
.exp-table td { vertical-align: middle; }
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; }

/* En-tête : recherche, actions, compte ; palette de recherche (⌘K) */
.topbar-search { flex: 1 1 320px; max-width: 520px; display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1px solid var(--field); border-radius: 10px; background: #FAFAFA; color: var(--muted); }
.topbar-search input { flex: 1; min-height: 40px; border: 0; padding: 0; background: transparent; outline: none; }
.topbar-search:focus-within { border-color: var(--cyan); background: #FFF; }
kbd { font: 600 11px var(--font-body, inherit); padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: #FFF; color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.avatar-btn { text-decoration: none; }
.palette { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(42, 53, 66, .45); }
.palette[hidden] { display: none; }
.palette-box { width: 100%; max-width: 620px; background: #FFF; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); overflow: hidden; }
.palette-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.palette-head input { flex: 1; border: 0; min-height: 32px; padding: 0; font-size: 16px; outline: none; }
.palette-results { max-height: 60vh; overflow-y: auto; padding: 6px 0 10px; }
.palette-group { padding: 10px 18px 4px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.palette-item { display: flex; flex-direction: column; padding: 8px 18px; text-decoration: none; color: var(--text); }
.palette-item span { font-size: 12px; color: var(--muted); }
.palette-item:hover, .palette-item.is-active { background: var(--cyan-pale); }
.palette-empty { margin: 0; padding: 14px 18px; color: var(--muted); font-size: 14px; }
@media (max-width: 820px) { .topbar-search { order: 3; flex-basis: 100%; max-width: none; } .topbar-actions { display: none; } kbd { display: none; } }

/* Liste des documents : bascules, sélection, Pennylane, actions, pagination (maquette Factures et devis) */
.btn-toggle { border: 1px solid var(--field); background: #FFF; color: var(--text); }
.btn-toggle[aria-pressed=true] { background: var(--navy); border-color: var(--navy); color: #FFF; }
.btn-deposit[aria-pressed=false] { color: var(--warn); font-weight: 600; }
.banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.bulk-bar { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-radius: 12px; background: var(--navy); color: #FFF; }
.bulk-bar[hidden] { display: none; }
.bulk-bar .btn-ghost { background: #FFF; }
.bulk-bar .btn-link { color: #FFF; background: transparent; border-color: rgba(255, 255, 255, .45); }
.bulk-bar .btn-link:hover { border-color: #FFF; }
.col-check { width: 36px; }
.pl-state { margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--warn); }
.pl-state.is-done { font-weight: 600; color: var(--ok); }
.row-action { margin-left: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.doc-list td { vertical-align: middle; }
.list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; border-top: 1px solid var(--line-soft); }

/* Clients : panneau « Nouveau client », fiche (maquette Clients / Fiche client) */
.new-client[hidden] { display: none; }
.lookup-card { margin: 0; display: grid; grid-template-columns: minmax(180px, auto) 1fr; gap: 8px 16px; font-size: 14px; }
.lookup-card > div { display: contents; }
.lookup-card dt { color: var(--muted); }
.lookup-card dd { margin: 0; }
.select-auto { width: auto; }
.client-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.year-bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; }
.year-bars .yb { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; font-size: 11px; }
.year-bars .yb span.bar { width: 70%; max-width: 34px; background: var(--cyan); border-radius: 3px 3px 0 0; }
.year-bars .yb.is-current span.bar { background: var(--navy); }
.year-bars .yb .val { font-weight: 700; white-space: nowrap; }
.year-bars .yb .lbl { color: var(--muted); }
.new-client .card-head .icon-btn { font-size: 22px; width: 36px; height: 36px; color: var(--muted); }

.msg-ref { margin-top: 6px; font-size: 12px; color: var(--muted); font-style: italic; }
.pt-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; font-size: 14px; line-height: 1.6; background: var(--cyan-pale); border-top: 1px solid var(--line-soft); }

/* Dépenses : enregistrement en direct et vérification */
.exp-table tr.is-reviewed td { background: #FBFCFC; }
.exp-table tr.is-reviewed td:not(:last-child) { opacity: .72; }
.exp-table tr.is-saved td { background: var(--ok-bg); transition: background .4s; }
.exp-done { font-size: 13px; font-weight: 600; color: var(--ok); }
.exp-form [hidden] { display: none; }
.exp-bulk { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; border-bottom: 1px solid var(--line-soft); }
.segmented .nav-count { margin-left: 8px; }
.exp-hidden { margin: 0; padding-top: 0; }
.vat-box p { margin: 0 0 6px; } .vat-box p:last-child { margin: 0; }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.view-link { color: #8D98A8; }
.vat-box summary { cursor: pointer; list-style: none; }
.vat-box summary::-webkit-details-marker { display: none; }
.vat-box .vat-more { margin-left: 6px; text-decoration: underline; color: var(--blue); }
.vat-box[open] .vat-more { display: none; }
.vat-box .totals { margin: 10px 0 6px; max-width: 420px; }

/* Éditeur : aperçu du vrai PDF */
/* Cadre blanc à l'extérieur : les coins arrondis ne rognent plus les pages du PDF. */
.preview-pdf { padding: 2px; border: 1px solid var(--line); border-radius: 10px; background: #FFF; }
.preview-pdf[hidden] { display: none; }
.preview-pdf iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 0; background: #FFF; }
.preview-pdf iframe[hidden] { display: none; }
.preview-pdf .hint { margin: 0; padding: 16px; }

/* Éditeur : titre sur toute la largeur, colonnes alignées en haut */
.doc-editor .editor-head { flex: 1 1 100%; }
.live-preview .hint { margin: 0; }
.live-preview .preview-pdf[hidden] ~ .hint { display: none; }

/* Aperçu PDF dessiné par PDF.js : pages blanches, ombre légère, défilement dans le cadre */
.pdf-pages { display: flex; flex-direction: column; gap: 14px; max-height: 620px; overflow-y: auto; padding: 8px; background: #FFF; }
/* Ombre douce tout autour de chaque page (marge intérieure pour qu'elle ne soit pas coupée) */
.pdf-pages canvas { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgba(42, 53, 66, .06), 0 1px 6px rgba(42, 53, 66, .10); }
.pdf-pages.is-loading { opacity: .6; transition: opacity .2s; }
.pdf-pages[hidden] { display: none; }

/* Éditeur, ordinateur : colonne de droite fixée en haut ; plus haute que la fenêtre, elle défile de l'intérieur,
   avec un fondu en bas tant qu'il reste du contenu (plus de coupure nette). */
@media (min-width: 821px) {
  .doc-aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; scrollbar-width: thin; padding: 0 4px 12px 0; }
  .doc-aside.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
}
/* Éditeur : titres de colonnes alignés à droite, sauf Désignation */
@media (min-width: 821px) {
  .lines-head span { text-align: right; }
  .lines-head span:nth-child(2) { text-align: left; }
  .line-nums select { text-align: right; text-align-last: right; }
}
.stat-link { display: block; text-decoration: none; color: inherit; }
.stat-link:hover { border-color: var(--cyan); }

/* Espace client : lignes d'interventions alignées en haut */
.pt-track .pt-table td { vertical-align: top; }

/* Espace client : bandeau de l'aperçu Watapix (lecture seule) */
.pt-preview-bar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; padding: 8px 16px; background: var(--navy); color: #FFF; font-size: 13px; }
.pt-preview-bar .btn-link { color: #9FE3EE; padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
.ext-link { display: inline-flex; align-items: center; vertical-align: middle; padding: 2px; margin-left: 2px; color: var(--blue); border-radius: 4px; }
.ext-link:hover { color: var(--blue-dark); }
.dup-form { display: grid; gap: 6px; margin-top: 4px; }
.catalog-pick { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-pick select { min-height: 44px; max-width: 320px; }
.private-note { background: #FFFBEA; border-color: #EBDDA6; }
.private-note textarea { background: #FFF; }
.sig-pad { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; height: auto; border: 1px dashed var(--field); border-radius: 10px; background: #FFF; touch-action: none; cursor: crosshair; }
.sig-field.is-missing .sig-pad { border-color: var(--warn); border-style: solid; }
.sig-field.is-missing .hint { color: var(--warn); font-weight: 600; }
.sig-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; }
.sig-view { display: block; max-width: 220px; height: auto; margin: 8px 0; border: 1px solid var(--line-soft); border-radius: 8px; background: #FFF; }
.contact-edit { flex-basis: 100%; }
.contact-edit summary { cursor: pointer; color: var(--blue); }
.checks-inline { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0; }
.checks-inline legend { width: 100%; margin-bottom: 4px; }
.contact-add { border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 6px; }
.contact-add h3 { margin: 0; font-size: 14px; }
.watch-alert { border-color: #E9C37A; background: #FFF8EA; }
.watch-alert h2 { font-size: 16px; }
.watch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.watch-list .cell-sub { margin-left: 26px; }
.inline-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.einv-quick button[aria-pressed=true] { border-color: var(--ok); color: var(--ok); }
.thread { display: grid; gap: 10px; margin-bottom: 14px; }
.thread .msg { max-width: 85%; }
.thread .msg-watapix { justify-self: end; }
.req-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; }
.req-steps li { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 6px 4px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.req-steps li.is-on { background: var(--cyan-light); color: #1F5560; }
.service-form { border-top: 1px solid var(--line-soft); }
.service-form h3 { margin: 0; font-size: 15px; }
.narrow-field { max-width: 320px; }
.warn-text { color: var(--warn); }
.kb-admin { display: grid; }
.kb-item { border-top: 1px solid var(--line-soft); padding: 12px 20px; }
.kb-item summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-actions { margin-left: auto; display: inline-flex; gap: 4px; }
.kb-body { margin-top: 10px; font-size: 14px; line-height: 1.6; }
.pt-sites { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 8px; }
.pt-site { border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; }
.pt-site-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pt-site-head .small { margin-left: auto; }
.pt-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex: none; }
.pt-site-ok .pt-dot { background: #2E9E6A; }
.pt-site-warn .pt-dot { background: #D9A21C; }
.pt-site-down .pt-dot { background: #C2412D; }
.pt-site-facts { display: grid; gap: 4px; margin: 0 0 8px; }
.pt-site-facts div { display: flex; justify-content: space-between; gap: 12px; }
.pt-site-facts dt { color: var(--muted); }
.pt-site-facts dd { margin: 0; text-align: right; }
.pt-h3 { font-size: 15px; margin: 16px 0 8px; }
.pt-kb { border-top: 1px solid var(--line-soft); padding: 10px 0; }
.pt-kb summary { cursor: pointer; font-weight: 600; }
.pt-kb-body { margin-top: 8px; font-size: 14px; line-height: 1.6; }
.tabs a[aria-current=page] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--cyan); }
.tabs { margin-bottom: 16px; }
.alert-warn { background: #FFF4E0; color: #7A4A06; }
.ano-list { display: grid; gap: 8px; margin-bottom: 12px; }
.ano { display: flex; flex-wrap: wrap; gap: 4px 12px; text-decoration: none; border: 1px solid transparent; }
.ano span { color: inherit; opacity: .9; }
a.alert-warn:hover { color: #7A4A06; border-color: currentColor; }
.pt-sepa { border-top: 1px solid var(--line-soft); }
.pt-sepa summary { cursor: pointer; }
.sepa-form { margin-top: 12px; }
.assistant { border-color: var(--cyan-light); background: linear-gradient(180deg, #F4FBFC, #FFF); }
.assistant summary { cursor: pointer; }
.assistant .stack-form { margin-top: 12px; }
.assist-result { display: flex; flex-direction: column; gap: 12px; }
.assist-result[hidden] { display: none; }
.assist-result > p { margin: 0; }
.assist-lines { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; padding: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: #FFF; }
.assist-line { font-size: 14px; }
.assist-title { font-weight: 700; margin-top: 6px; }
.brief-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); margin-bottom: 8px; }
.brief-player select { min-height: 44px; }
.brief-section h2 { font-size: 16px; margin: 14px 0 4px; }
.brief-section h2 a { color: inherit; text-decoration: none; }
.brief-section p { margin: 0 0 4px; line-height: 1.6; }
.brief-banner { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; margin-bottom: 16px; border-color: var(--cyan-light); background: linear-gradient(90deg, #F0FAFC, #FFF); }
.brief-banner > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.brief-banner .brief-icon { font-size: 26px; }
.brief-banner:hover { border-color: var(--cyan); color: inherit; }
.btn[hidden] { display: none; }
.brief-player select { width: auto; }
/* Pleine largeur sur les grands écrans (15 pouces et plus). */
.main { max-width: 1320px; }
.main:has(.doc-editor) { max-width: 1560px; }
.pt-head, .pt-main, .pt-footer { max-width: 1240px; }
/* Boutons sur une seule ligne : libellés courts, jamais de retour à la ligne. */
.btn { white-space: nowrap; }
.inline-form .btn { flex: 1; }
.einv-quick { display: flex; margin-top: 8px; }
.ano { align-items: center; justify-content: space-between; }
.ano-link { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ano-link:hover strong { text-decoration: underline; }
.ano .btn { background: #FFF; }
button.btn-link:not(.btn) { padding: 0; border: 0; background: none; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
.bar-ren { background: repeating-linear-gradient(45deg, #7B6FD0 0 3px, #D9D5F5 3px 6px); }
.bar-draft { background: repeating-linear-gradient(45deg, var(--navy) 0 3px, #B8C0CC 3px 6px); }
.bar-stack .bar-ren, .bar-stack .bar-draft { border-radius: 0; }
.avatar-btn.has-photo { padding: 0; overflow: hidden; }
.avatar-btn img, .avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.avatar-img { width: 36px; height: 36px; flex: none; }
.avatar-photo { width: 120px; height: 120px; border-radius: 24px; object-fit: cover; font-size: 40px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.profile-photo { align-items: flex-start; }
.new-ticket summary { cursor: pointer; }
.new-ticket .stack-form { margin-top: 14px; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--text); }
.icon-link:hover { background: var(--bg); color: var(--blue); }
.page-head .avatar-lg { background: var(--blue); color: #FFF; width: 76px; height: 76px; border-radius: 18px; font-size: 26px; }
.pt-pay-terms h2 { font-size: 16px; }
.pt-pay-modes { border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 4px; }
.pt-pay-modes p { margin: 0 0 6px; line-height: 1.5; }
.file-btn { max-width: 100%; min-width: 0; }
.file-btn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.profile-photo > form { align-self: stretch; min-width: 0; }
.profile-photo .file-btn { width: 100%; }
.avatar.avatar-img { border-radius: 10px; }
.pt-home-row { display: grid; gap: 16px; align-items: stretch; }
.pt-home-row-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.pt-home-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .pt-home-row-2 { grid-template-columns: 1fr; } }
.pt-home-row > .card { margin: 0; }
.pt-mini { list-style: none; margin: 0; padding: 0; display: grid; }
.pt-mini li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.pt-mini li:first-child { border-top: 0; }
.pt-mini a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.pt-mini a:hover strong { text-decoration: underline; }
.pt-mini > li > span:last-child { white-space: nowrap; }
.pt-mini-site { display: inline-flex; align-items: center; gap: 8px; }
.pt-nav a[aria-current=page] { color: var(--ink); font-weight: 700; box-shadow: inset 0 -2px 0 var(--cyan); }
.pt-head { max-width: 1360px; flex-wrap: nowrap; }
.pt-nav { flex-wrap: nowrap; gap: 2px; }
.pt-nav > a { padding: 0 9px; font-size: 15px; white-space: nowrap; }
.pt-account { max-width: 220px; }
.pt-account span, .pt-account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1180px) { .pt-head { flex-wrap: wrap; } .pt-nav { flex-wrap: wrap; } }
/* Espace client sur la mise en page du back-office. */
.pt-app .topbar .pt-account { margin: 0 auto 0 0; max-width: none; text-align: left; }
.pt-app .pt-preview-bar { position: static; }
.pt-foot { margin-top: 8px; }
@media (max-width: 820px) { .pt-app .topbar .pt-account { display: none; } }
.pt-empty { margin: 0; padding-top: 4px; padding-bottom: 24px; }

/* Burger mobile : trois traits qui deviennent une croix à l'ouverture */
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.burger-ico path { transition: transform .2s ease, opacity .15s ease; transform-box: view-box; }
.burger-ico .b1 { transform-origin: 12px 7px; }
.burger-ico .b2 { transform-origin: 12px 12px; }
.burger-ico .b3 { transform-origin: 12px 17px; }
[data-nav-toggle][aria-expanded=true] .b1 { transform: translateY(5px) rotate(45deg); }
[data-nav-toggle][aria-expanded=true] .b2 { opacity: 0; }
[data-nav-toggle][aria-expanded=true] .b3 { transform: translateY(-5px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger-ico path, .nav.open { transition: none; animation: none; } }

/* Fenêtre de confirmation (remplace la boîte du navigateur) */
.confirm-dlg { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px; background: #FFF; color: var(--text); box-shadow: 0 24px 60px rgba(7, 39, 45, .28); }
.confirm-dlg::backdrop { background: rgba(42, 53, 66, .5); backdrop-filter: blur(2px); }
.confirm-dlg[open] { animation: dlg-in .18s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.confirm-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 28px 22px; text-align: center; }
.confirm-body h2 { font-size: 20px; }
.confirm-body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.confirm-ico { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%; background: var(--cyan-light); color: var(--blue); }
.confirm-dlg.is-ok .confirm-ico { background: var(--ok-bg); color: var(--ok); }
.confirm-dlg.is-danger .confirm-ico { background: var(--warn-bg); color: var(--warn); }
.confirm-actions { display: flex; gap: 10px; padding: 0 28px 26px; }
.confirm-actions .btn { flex: 1; }
.btn-danger { background: var(--warn); color: #FFF; }
.btn-danger:hover { background: #7E3C05; color: #FFF; }
@media (max-width: 480px) { .confirm-actions { flex-direction: column-reverse; } }
@media (prefers-reduced-motion: reduce) { .confirm-dlg[open] { animation: none; } }

/* Espace client ouvert par lien personnel */
.pt-link .pt-head form { display: inline-flex; }
.pt-link .pt-account { max-width: none; }
.pt-link .pt-account span { white-space: normal; overflow: visible; }
.pt-secure { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 13px; color: var(--ok); }
.pt-secure svg, .pt-footer svg { flex: none; vertical-align: -2px; }
.pt-link .pt-footer p { margin: 0 0 6px; }
.pt-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 18px; border: 1px solid var(--cyan); border-radius: var(--radius); background: var(--cyan-pale); }
.pt-nudge p { margin: 0; flex: 1 1 320px; }
.pt-nudge .toolbar form { display: inline-flex; }
.pt-code { font-family: var(--font-title); font-size: 22px; letter-spacing: 6px; text-align: center; }
@media (max-width: 640px) { .pt-link .pt-account { order: 3; width: 100%; margin-left: 0; text-align: left; } .pt-secure { justify-content: flex-start; } .pt-link .pt-head form { margin-left: auto; } }
.pt-nudge[hidden] { display: none; }
.btn-link-inline { padding: 0; border: 0; background: none; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
.pt-space-bar { display: block; text-align: center; background: var(--ok-bg); color: var(--ok); }
.pt-space-bar svg { vertical-align: -2px; margin-right: 4px; }
.confirm-list { width: 100%; margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; text-align: left; max-height: 40vh; overflow: auto; }
.confirm-list li { display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--cyan-pale); font-size: 14px; }
.confirm-list li strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.confirm-list li span { font-size: 12px; color: var(--muted); }
.confirm-list[hidden] { display: none; }
.confirm-list li:has(.confirm-check) { padding: 0; }
.confirm-check { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; cursor: pointer; }
.confirm-check input { width: 18px; height: 18px; min-height: 0; margin-top: 2px; flex: none; }
.confirm-check > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.confirm-check > span span { font-size: 12px; color: var(--muted); }
.confirm-list li:has(input:not(:checked)) { opacity: .55; }
.send-batch + .send-batch { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.send-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 8px; font-size: 13px; }
.send-head span { color: var(--muted); }
.send-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.send-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--cyan-pale); }
.send-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.send-who strong { font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.send-who span { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.send-list .badge { flex: none; }
.send-list li.send-skipped { background: #FFF; }
.send-list li.send-skipped .send-who strong { color: var(--muted); font-weight: 400; }
.pdf-link.fx-link { width: auto; padding: 0 4px; }