/* Layout : barre d'en-tête avec deux onglets ; Devis = formulaire + aperçu papier côte à côte ; Suivi = indicateurs puis tableau */
:root {
  --bg: #f3f5f7;
  --surface: #ffffff;
  --paper: #fcfcfa;
  --ink: #121a24;
  --muted: #5b6676;
  --line: #dbe0e7;
  --accent: #2d6a2f;
  --accent-ink: #ffffff;
  --accent-soft: #e3f1d9;
  --ok: #157347; --ok-soft: #e3f3ea;
  --warn: #9a5b00; --warn-soft: #fbf0dc;
  --bad: #b3261e; --bad-soft: #fbe6e4;
  --info: #3d4f9e; --info-soft: #e8ebf7;
  --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  /* Fond « aurore énergétique » : menthe, ciel, soleil, turquoise */
  --fond-base: #ecf2ee; --fond-a: rgb(141 211 138 / .58); --fond-b: rgb(127 176 255 / .45); --fond-c: rgb(246 201 69 / .36); --fond-d: rgb(111 224 214 / .38); --fond-points: rgb(45 106 47 / .08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0e131a; --surface: #161d27; --paper: #1a2230; --ink: #e6ebf2; --muted: #95a0b0; --line: #2a3442;
  --accent: #8fd18a; --accent-ink: #0d1a0e; --accent-soft: #1c3320;
  --ok: #5fd39a; --ok-soft: #13301f; --warn: #f0b860; --warn-soft: #33270f; --bad: #ff8a80; --bad-soft: #3a1714; --info: #a9b6ff; --info-soft: #1f2444;
  --fond-base: #0b1116; --fond-a: rgb(60 154 69 / .22); --fond-b: rgb(58 111 214 / .2); --fond-c: rgb(246 201 69 / .08); --fond-d: rgb(23 154 156 / .16); --fond-points: rgb(143 209 138 / .06);
  color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0e131a; --surface: #161d27; --paper: #1a2230; --ink: #e6ebf2; --muted: #95a0b0; --line: #2a3442;
  --accent: #8fd18a; --accent-ink: #0d1a0e; --accent-soft: #1c3320;
  --ok: #5fd39a; --ok-soft: #13301f; --warn: #f0b860; --warn-soft: #33270f; --bad: #ff8a80; --bad-soft: #3a1714; --info: #a9b6ff; --info-soft: #1f2444;
  --fond-base: #0b1116; --fond-a: rgb(60 154 69 / .22); --fond-b: rgb(58 111 214 / .2); --fond-c: rgb(246 201 69 / .08); --fond-d: rgb(23 154 156 / .16); --fond-points: rgb(143 209 138 / .06);
  color-scheme: dark }

* { box-sizing: border-box; }
body { background: var(--fond-base); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; }
/* Fond : nappes de couleur qui dérivent très lentement, et une fine trame de points qui s'efface vers le bas. */
body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: -1; }
body::before { inset: -15%;
  background: radial-gradient(38% 34% at 12% 10%, var(--fond-a), transparent 70%), radial-gradient(34% 30% at 88% 8%, var(--fond-b), transparent 70%),
    radial-gradient(42% 38% at 78% 92%, var(--fond-c), transparent 70%), radial-gradient(38% 40% at 6% 88%, var(--fond-d), transparent 70%);
  animation: fond-derive 48s ease-in-out infinite alternate; }
body::after { inset: 0; background: radial-gradient(var(--fond-points) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 75%); mask-image: linear-gradient(to bottom, #000 0%, transparent 75%); }
@keyframes fond-derive { 0% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(3%, 2%, 0) rotate(4deg); } 100% { transform: translate3d(-2%, 3%, 0) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }
@media print { body::before, body::after { display: none; } body { background: #fff; } }

.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--surface) 72%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
header.top .wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-block: 12px; }
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.04em; }
.brand span { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
nav.tabs { display: flex; gap: 4px; margin-left: auto; background: var(--bg); padding: 4px; border-radius: 10px; }
nav.tabs button { border: 0; background: transparent; color: var(--muted); font: 500 14px var(--font-body); padding: 8px 16px; border-radius: 7px; cursor: pointer; }
nav.tabs button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
nav.tabs .count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 6px; }

main { padding-block: 28px 64px; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.15; margin: 0; text-wrap: balance; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: 18px; margin: 0; }
.sub { color: var(--muted); margin: 4px 0 0; }
.pagehead { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.banner { padding: 10px 14px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); margin-bottom: 16px; font-size: 14px; }

/* Devis */
.editor { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 920px) { .editor { grid-template-columns: minmax(0, 1fr); } }
form.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 24px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
legend { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: 12px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row.cp { grid-template-columns: 140px 1fr; }
@media (max-width: 520px) { .row, .row.cp { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: 14px; font-weight: 500; }
.field label .req { color: var(--bad); margin-left: 2px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-soft); }
.err { color: var(--bad); font-size: 13px; min-height: 0; }
.err:empty { display: none; }
.unit { position: relative; }
.unit input { padding-right: 48px; font-family: var(--font-mono); }
.unit span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-family: var(--font-mono); font-size: 14px; }

.fiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.fiche label { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: var(--bg); }
.fiche input { width: auto; accent-color: var(--accent); }
.fiche label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.fiche b { font-family: var(--font-mono); font-weight: 500; font-size: 15px; }
.fiche small { display: block; color: var(--muted); font-size: 12px; }

.chauffage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chauffage:has(#ch-pac-choix:not([hidden])) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chauffage label[hidden] { display: none; }
@media (max-width: 520px) { .chauffage, .chauffage:has(#ch-pac-choix:not([hidden])) { grid-template-columns: minmax(0, 1fr); } }
.chauffage label { border: 1px solid var(--line); border-radius: 10px; padding: 12px; cursor: pointer; background: var(--bg); display: flex; gap: 8px; align-items: center; font-size: 14px; }
.chauffage input { width: auto; accent-color: var(--accent); }
.chauffage label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.chauffage.invalid label { border-color: var(--bad); }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; }
.btn { font: 600 14px var(--font-body); border-radius: 8px; padding: 10px 18px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.toast { font-size: 14px; color: var(--ok); }
.toast.bad { color: var(--bad); }

/* Suivi */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 760px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.kpi .k { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.kpi .v { font-family: var(--font-display); font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 4px; }
.kpi .h { font-size: 13px; color: var(--muted); }

.pipeline { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); margin-bottom: 10px; }
.pipeline span { display: block; height: 100%; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input { max-width: 320px; background: var(--surface); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { font: 500 13px var(--font-body); border: 1px solid var(--line); background: var(--surface); color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.tablebox { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
table.list th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.list td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list td.adresse-cell { min-width: 180px; max-width: 280px; line-height: 1.4; }
table.list tr:last-child td { border-bottom: 0; }
table.list .mono { white-space: nowrap; font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
table.list .who b { display: block; font-weight: 600; }
table.list .who span { color: var(--muted); font-size: 13px; }
table.list select { padding: 6px 8px; font-size: 13px; width: auto; border-radius: 999px; font-weight: 600; }
.st-brouillon { background: var(--bg); color: var(--muted); }
.st-envoye { background: var(--info-soft); color: var(--info); }
.st-relance { background: var(--warn-soft); color: var(--warn); }
.st-signe { background: var(--accent-soft); color: var(--accent); }
.st-termine { background: var(--ok-soft); color: var(--ok); }
.st-perdu { background: var(--bad-soft); color: var(--bad); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; background: var(--warn-soft); color: var(--warn); margin-left: 6px; vertical-align: 1px; }
.rowact { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }

@media (prefers-reduced-motion: no-preference) { .btn, nav.tabs button, .chips button { transition: background .15s, color .15s; } }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; }

/* v2 */
.brand { align-items: center; }
.brand-logo { height: 34px; width: auto; border-radius: 6px; }
.row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .row.three { grid-template-columns: minmax(0, 1fr); } }
.field.narrow { max-width: 220px; }
textarea { resize: vertical; line-height: 1.45; }
.hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.req { color: var(--bad); margin-left: 2px; }
.mono-in { font-family: var(--font-mono); }
.modele { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--accent-soft); border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { width: auto; accent-color: var(--accent); }

.lignes { display: grid; gap: 12px; }
.ligne { border: 1px solid var(--line); border-radius: 10px; padding: 14px; display: grid; gap: 10px; background: var(--bg); }
.ligne input, .ligne select, .ligne textarea { background: var(--surface); }
.ligne-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ligne-top b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ligne-nums { display: grid; grid-template-columns: 90px 80px minmax(0, 1fr) 110px; gap: 10px; }
@media (max-width: 520px) { .ligne-nums { grid-template-columns: 1fr 1fr; } }
.ligne-total { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: right; }

.recap { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; margin: 0; padding: 14px; border-radius: 10px; background: var(--bg); font-size: 14px; }
.recap dt { color: var(--muted); }
.recap dd { margin: 0; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.recap .tot { color: var(--ink); font-weight: 600; }
.recap .reste { color: var(--ink); font-weight: 700; font-size: 16px; }

.preview { position: sticky; top: 88px; }
.preview .label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.paper-scroll { max-height: calc(100vh - 140px); overflow: auto; border-radius: 6px; border: 1px solid var(--line); background: #8a8f96; padding: 12px; }
.paper { zoom: var(--paper-zoom, 0.7); width: max-content; margin: 0 auto; box-shadow: 0 6px 24px rgb(0 0 0 / .25); }
@media (max-width: 920px) { .preview { position: static; } .paper-scroll { max-height: 70vh; } }

.settings { max-width: 860px; }
.logo-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.logo-pick img { height: 56px; width: auto; max-width: 140px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 4px; }
.logo-pick input { width: auto; flex: 1; min-width: 0; }
table.list th.r, table.list td.r { text-align: right; }
a.btn { text-decoration: none; display: inline-block; }
@media (max-width: 640px) { nav.tabs { margin-left: 0; width: 100%; overflow-x: auto; } nav.tabs button { padding: 8px 12px; white-space: nowrap; } }
.field { align-content: start; }
input, select, textarea { line-height: 1.4; }
.ajuste-pick { font-size: 12.5px; color: var(--muted); margin-left: auto; display: none; }
.lignes.aligner .ajuste-pick { display: flex; }
input[readonly] { background: var(--accent-soft); color: var(--ink); cursor: default; }
.unit input { padding-right: 64px; }
.check span { line-height: 1.4; }
.synthese { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 14px; }
.synthese b { font-family: var(--font-mono); font-weight: 500; }
.avance { border-top: 1px solid var(--line); padding-top: 16px; }
.avance > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.avance[open] > summary { margin-bottom: 20px; }
.avance > fieldset + fieldset { margin-top: 24px; }
.label-like { font-size: 14px; font-weight: 500; }
.logement-info { display: flex; flex-wrap: wrap; gap: 6px 24px; padding: 10px 14px; border-radius: 10px; background: var(--bg); font-size: 14px; color: var(--muted); }
.logement-info b { color: var(--ink); font-weight: 600; }
/* Dimensionnement PAC */
.dim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
@media (max-width: 920px) { .dim { grid-template-columns: minmax(0, 1fr); } }
.dim-form { gap: 20px; }
.dim-big input { font-size: 28px; padding: 14px 64px 14px 16px; }
.dim-phase { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dim-result { display: grid; gap: 14px; }
.dim-calc { font-size: 15px; color: var(--muted); }
.dim-calc b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.dim-pac { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: 12px; background: var(--accent-soft); }
.dim-kw { white-space: nowrap; font-family: var(--font-display); font-size: 40px; font-weight: 700; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }
.dim-specs { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; margin: 0; font-size: 14px; }
.dim-specs dt { color: var(--muted); }
.dim-specs dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 13px; }
.dim-gamme { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; }
.tablebox.flat { border-radius: 8px; }
table.list.dim-table { min-width: 0; }
.dim-table tr.dim-on td { background: var(--accent-soft); }
/* Géolocalisation du logement */
.combo { position: relative; }
.suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -12px rgb(0 0 0 / .3); max-height: 320px; overflow-y: auto; }
.suggestions li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; }
.suggestions li small { color: var(--muted); font-size: 12px; }
.suggestions li:hover, .suggestions li[aria-selected="true"] { background: var(--accent-soft); }
.geo-statut.bad { color: var(--warn); }
.geo-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 12px; background: var(--bg); }
.geo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.geo-head .lien { margin-left: auto; }
.geo-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14px; }
.geo-grid dt { color: var(--muted); }
.geo-grid dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .geo-grid { grid-template-columns: minmax(0, 1fr); } .geo-grid dd { margin-bottom: 6px; } }
.geo-manque { color: var(--warn); }
.geo-alerte { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13.5px; }
.geo-note { margin: 0; font-size: 13.5px; color: var(--muted); }
.geo-note b { color: var(--ink); }
.geo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.geo-edit { display: grid; gap: 10px; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.geo-sources summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.geo-sources ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.geo-mini { font-size: 12px; color: var(--muted); font-family: var(--font-mono); }
.chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); vertical-align: 1px; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.lien { background: none; border: 0; padding: 0; color: var(--accent); font: 500 13.5px var(--font-body); text-decoration: underline; cursor: pointer; justify-self: start; }
/* Note de dimensionnement */
.dim { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.dim-note { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; align-content: start; }
.dim-note-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dim-h3 { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dim-h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dim-manque { margin: 0; padding-left: 18px; font-size: 14px; color: var(--warn); display: grid; gap: 4px; }
.dim-table td { vertical-align: top; }
.couv-ok { color: var(--ok); font-weight: 600; }
.couv-ko { color: var(--bad); }
@media print {
  body.impression-note header.top, body.impression-note .pagehead, body.impression-note #dimForm, body.impression-note #sscForm,
  body.impression-note #view-dimensionnement > .sous-onglets, body.impression-note .dim[hidden], body.impression-note #sscNote .geo-actions,
  body.impression-note main > section:not(#view-dimensionnement), body.impression-note #dimNote .geo-actions,
  body.impression-note .apercu-banner, body.impression-note .banner { display: none !important; }
  body.impression-note { background: #fff; }
  body.impression-note .dim { display: block; }
  body.impression-note .dim-note { border: 0; padding: 0; }
  body.impression-note .tablebox { overflow: visible; }
}
.dim-note, .dim-form { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.dim-calc { overflow-wrap: anywhere; }
@media (max-width: 520px) { .dim-pac { flex-wrap: wrap; } .dim-kw { font-size: 32px; } }
.dim-carte { margin: 0; display: grid; gap: 6px; }
.dim-carte img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.dim-signature { display: grid; justify-items: end; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.dim-signature p { margin: 0; font-size: 14px; }
.dim-signature img { width: 240px; max-width: 70%; height: auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dim-signature img { filter: invert(1); } }
:root[data-theme="dark"] .dim-signature img { filter: invert(1); }
@media print { body.impression-note .dim-signature img { filter: none !important; } body.impression-note .dim-carte img { max-width: 80%; } }
.dim-signature, .dim-carte { break-inside: avoid; page-break-inside: avoid; }
@media print { body.impression-note .dim-carte img { max-width: 65%; } body.impression-note .dim-signature img { width: 200px; } body.impression-note .dim-note { gap: 10px; } }
@media print { body.impression-note main { padding: 0 !important; } body.impression-note .dim { gap: 0; } body.impression-note, body.impression-note html { height: auto; } }
/* Paramètres : sous-onglets et fiches techniques */
.sous-onglets { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.sous-onglets button { border: 0; background: transparent; color: var(--muted); font: 500 14px var(--font-body); padding: 10px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sous-onglets button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.sous-onglets .count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 6px; }
.fiches { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px; align-items: start; }
@media (max-width: 920px) { .fiches { grid-template-columns: minmax(0, 1fr); } }
.fiches-liste { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; min-width: 0; }
.fiches-ajout { gap: 16px; }
table.list.fiches-table { min-width: 560px; }
/* Envoi par e-mail */
.mail-fond { position: fixed; inset: 0; z-index: 40; background: rgb(15 20 18 / .55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px)); }
.mail-fenetre { width: 100%; max-width: 760px; gap: 16px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / .45); }
.mail-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mail-pieces { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
#mailMessage { font-family: var(--font-body); }
body.mail-ouvert { overflow: hidden; }
.mail-groupe { margin-top: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fiche-toujours { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.fiche-expiree { color: var(--bad) !important; font-weight: 600; }
.synthese-alerte { flex-basis: 100%; margin: 0; }

/* ---------- Connexion ---------- */
.connexion { max-width: 420px; margin: 0 auto; padding: 56px 16px; display: grid; gap: 20px; }
.connexion-marque { display: flex; align-items: center; gap: 10px; justify-content: center; }
.connexion-marque b { font-family: var(--font-display); font-size: 22px; }
.connexion-marque span { color: var(--muted); font-size: 14px; }
.connexion-carte { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; }
.connexion-carte h1 { font-family: var(--font-display); font-size: 24px; margin: 0; }
.connexion-carte .btn { width: 100%; }
.connexion-carte pre { background: var(--bg); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.compte { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-left: 12px; white-space: nowrap; }
.compte b { color: var(--ink); font-weight: 600; }
.mdp-ligne { display: flex; gap: 8px; }
.mdp-ligne input { font-family: var(--font-mono); }
.mdp-fenetre { max-width: 440px; }
@media (max-width: 760px) { .compte { margin-left: 0; } }
.inactif td { opacity: 0.6; }
#comptesRows .rowact { flex-wrap: wrap; white-space: normal; }
#comptesRows td:first-child { min-width: 180px; overflow-wrap: anywhere; }
header.top .compte { margin-left: auto; }
/* Documents du client */
.docs-fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; max-width: 820px; }
.docs-bloc { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.docs-h3 { margin: 0; font: 600 13px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.docs-h3 .hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.docs-liste { display: grid; gap: 8px; }
.doc { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); min-width: 0; }
.doc-icone { flex: none; width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font: 700 11px var(--font-body); }
.doc-texte { flex: 1; min-width: 0; display: grid; } .doc-texte b { overflow-wrap: anywhere; } .doc-texte .hint { overflow-wrap: anywhere; }
.doc-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.doc-vide { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 14px; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.docs-outils { display: grid; gap: 10px; }
.docs-ligne-ajout { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.docs-ligne-ajout input, .docs-ligne-ajout select { width: auto; flex: 1 1 180px; }
.docs-fichier { font-size: 13.5px; color: var(--muted); }
.docs-fichier input { padding: 6px; }
.docs-choisir { cursor: pointer; display: inline-flex; align-items: center; }
.docs-resultats { display: grid; gap: 8px; }
.dpe-lettre { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; color: #fff; font: 700 14px var(--font-body); vertical-align: middle; }
.btn-docs .count { margin-left: 6px; display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 11px var(--font-mono); }
.banner-ok { background: var(--ok-soft); color: var(--ok); display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner-ok .lien { color: inherit; }
.sig-mini { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; }
.sig-mini.ok { color: var(--ok); } .sig-mini.attente { color: var(--info); } .sig-mini.ko { color: var(--muted); }
/* Documents de subvention */
.sub-demande { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.sub-cat { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.sub-tete { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sub-tete b { font-size: 15px; }
.sub-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sub-fichiers { display: grid; gap: 4px; font-size: 13.5px; }
.sub-fichiers a { color: var(--accent); overflow-wrap: anywhere; }
.sub-motif { display: flex; gap: 6px; flex-wrap: wrap; } .sub-motif input { flex: 1 1 220px; width: auto; padding: 6px 10px; }
.pastille { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pastille.non_recu { background: var(--line); color: var(--muted); }
.pastille.recu, .pastille.incomplet { background: var(--info-soft); color: var(--info); }
.pastille.valide, .pastille.complet { background: var(--ok-soft); color: var(--ok); }
.pastille.a_remplacer { background: var(--bad-soft); color: var(--bad); }
.pastille.en_attente { background: var(--warn-soft); color: var(--warn); }
.sub-mini { display: inline-block; margin-top: 4px; font-size: 12px; position: relative; }
.infobulle { position: fixed; z-index: 60; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 500 12.5px/1.35 var(--font-body); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .4); pointer-events: none; }
/* ---------- Avatars ---------- */
.av { display: inline-grid; place-items: center; width: var(--av); height: var(--av); border-radius: 50%; flex: none; overflow: hidden; vertical-align: middle; }
.av svg { display: block; width: 100%; height: 100%; }
.av-init { color: #fff; font: 700 calc(var(--av) * .38) var(--font-display); letter-spacing: .02em; }
.compte-moi { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 6px 2px 2px; border-radius: 999px; cursor: pointer; color: inherit; font: inherit; }
.compte-moi:hover { background: var(--bg); }
.compte-ligne { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.avatar-fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 16px; max-width: 760px; }
.avatar-apercu { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 12px; background: var(--bg); }
.avatar-apercu b { display: block; font: 600 17px var(--font-display); }
.avatar-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.avatar-choix { display: grid; justify-items: center; gap: 4px; padding: 12px 6px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; text-align: center; }
.avatar-choix svg { width: 64px; height: 64px; transition: transform .15s; }
.avatar-choix b { font-size: 14px; } .avatar-choix span { font-size: 12px; color: var(--muted); line-height: 1.25; }
.avatar-choix:hover svg { transform: scale(1.06); }
.avatar-choix[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.avatar-choix:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.avatar-choix.pris { opacity: .45; cursor: not-allowed; filter: grayscale(.8); } .avatar-choix.pris span { color: var(--bad); font-weight: 600; } .avatar-choix.pris:hover svg { transform: none; }
@media (max-width: 520px) { .avatar-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } .avatar-choix svg { width: 52px; height: 52px; } .avatar-choix span { display: none; } }

/* ---------- Classement ---------- */
.clt-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 16px; }
.clt-segments { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.clt-segments button { border: 0; background: transparent; color: var(--muted); font: 500 14px var(--font-body); padding: 8px 12px; border-radius: 7px; cursor: pointer; }
.clt-segments button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
.clt-dates { display: inline-flex; gap: 8px; flex-wrap: wrap; } .clt-dates label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } .clt-dates input { width: auto; padding: 7px 10px; }
.clt-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.clt-kpis.seule { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
.clt-kpis.seule .clt-kpi { text-align: center; justify-items: center; }
.clt-onglets.seule { max-width: 420px; margin-inline: auto; }
.clt-kpi { text-align: left; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 2px; }
.clt-kpi.actif { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.clt-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.clt-onglets button { flex: 1 1 160px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--font-body); padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.clt-onglets button[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.clt-perso-carte { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding: 14px 18px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line); margin-bottom: 18px; }
.clt-perso-carte .hint { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.clt-perso-carte b { font: 700 22px var(--font-display); } .clt-perso-carte small { font: 500 13px var(--font-body); color: var(--muted); }
.clt-objectif { flex: 1 1 220px; font-weight: 600; color: var(--accent); }
.clt-av { position: relative; display: inline-grid; flex: none; border-radius: 50%; }
.clt-av.cadre-1 { box-shadow: 0 0 0 3px #f5c518, 0 0 0 5px #fff3b0; } .clt-av.cadre-2 { box-shadow: 0 0 0 3px #c0c7d1, 0 0 0 5px #eef1f5; } .clt-av.cadre-3 { box-shadow: 0 0 0 3px #cd7f32, 0 0 0 5px #f6dcc4; }
.couronne { position: absolute; left: 50%; top: 0; width: 46%; height: 30%; transform: translate(-50%, -78%) rotate(-8deg); filter: drop-shadow(0 1px 1px rgb(0 0 0 / .25)); z-index: 1; }
.clt-podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 26px 0 18px; }
.marche { display: grid; justify-items: center; gap: 10px; flex: 0 1 220px; min-width: 0; }
.marche-gens { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.marche-perso { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; padding-top: 14px; }
.marche-perso b { font: 700 16px var(--font-display); overflow-wrap: anywhere; }
.marche-valeur { font: 700 20px var(--font-mono); color: var(--accent); }
.marche-perso.moi b { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.marche-socle { width: 100%; display: grid; place-items: center; gap: 2px; border-radius: 10px 10px 0 0; font: 700 14px var(--font-display); color: #3b2f00; padding-top: 8px; }
.marche-socle span { font-size: 26px; line-height: 1; }
.marche-1 .marche-socle { height: 110px; background: linear-gradient(#ffe27a, #f5c518); }
.marche-2 .marche-socle { height: 80px; background: linear-gradient(#eef1f5, #c0c7d1); color: #2f3640; }
.marche-3 .marche-socle { height: 60px; background: linear-gradient(#f6dcc4, #cd7f32); color: #3d2410; }
.clt-liste { padding: 6px 0; }
.clt-lignes { list-style: none; margin: 0; padding: 0; }
.clt-ligne { display: grid; grid-template-columns: 64px minmax(140px, 1.2fr) minmax(80px, 2fr) 140px; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.clt-ligne:last-child { border-bottom: 0; }
.clt-ligne.moi { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); }
.clt-ligne.zero { color: var(--muted); }
.clt-rang { display: inline-flex; align-items: center; gap: 4px; font: 700 16px var(--font-mono); } .clt-rang b { min-width: 1.5ch; }
.clt-qui { display: flex; align-items: center; gap: 10px; min-width: 0; } .clt-qui b { font-size: 15px; overflow-wrap: anywhere; }
.clt-barre { height: 10px; border-radius: 999px; background: var(--bg); overflow: hidden; } .clt-barre span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #7cc46b); }
.clt-valeur { text-align: right; font-variant-numeric: tabular-nums; } .clt-valeur b { font: 700 18px var(--font-mono); } .clt-valeur small { color: var(--muted); }
.clt-note { margin-top: 10px; }
@media (max-width: 760px) {
  .clt-kpis { gap: 8px; } .clt-kpi { padding: 10px; } .clt-kpi .k { font-size: 10.5px; letter-spacing: .03em; line-height: 1.25; } .clt-kpi .v { font-size: 26px; } .clt-kpi .v.euros { font-size: 17px; white-space: nowrap; } .clt-kpi .h { display: none; }
  .clt-podium { gap: 8px; } .marche-perso b { font-size: 14px; } .marche-1 .marche-socle { height: 80px; } .marche-2 .marche-socle { height: 58px; } .marche-3 .marche-socle { height: 44px; }
  .clt-ligne { grid-template-columns: 44px 1fr auto; padding: 10px 12px; }
  .clt-barre { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 420px) { .marche-perso .av { --av: 54px !important; } .marche-1 .marche-perso .av { --av: 64px !important; } }
@media (max-width: 760px) { header.top { position: static; } }
/* ---------- Mon profil ---------- */
.compte-texte { display: grid; text-align: left; line-height: 1.15; }
.compte-texte span { font-size: 11.5px; color: var(--accent); font-weight: 600; }
.profil-fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; max-width: 760px; }
.profil-entete { display: flex; align-items: center; gap: 14px; }
.profil-entete b { display: block; font: 700 20px var(--font-display); }
.profil-panneau { display: grid; gap: 14px; }
.profil-fenetre .sous-onglets { margin-bottom: 0; }
.profil-pied { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 12px; }
@media (max-width: 520px) { .compte-texte span { display: none; } .profil-fenetre { padding: 18px 16px; } }
.profil-fenetre .sous-onglets { flex-wrap: nowrap; overflow-x: auto; } .profil-fenetre .sous-onglets button { white-space: nowrap; } @media (max-width: 520px) { .profil-fenetre .sous-onglets button { padding: 10px 9px; font-size: 13.5px; } }
/* Zone climatique, commissions, nom du client cliquable */
.row.cp { grid-template-columns: 140px 1fr 110px; }
@media (max-width: 520px) { .row.cp { grid-template-columns: 1fr 1fr; } .row.cp > .field:last-child { grid-column: 1 / -1; } }
.zone-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font: 700 15px var(--font-display); background: var(--bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.zone-badge.petit { min-height: 0; padding: 1px 7px; font-size: 12px; border-radius: 6px; vertical-align: 1px; }
.zone-badge.zone-h1 { background: #e3eefc; border-color: #9cc0ef; color: #1d4f91; }
.zone-badge.zone-h2 { background: #fff1d6; border-color: #f0c674; color: #8a5a00; }
.zone-badge.zone-h3 { background: #fde4e1; border-color: #f2a39a; color: #9b2c1f; }
:root[data-theme="dark"] .zone-badge.zone-h1, :root[data-theme="dark"] .zone-badge.zone-h2, :root[data-theme="dark"] .zone-badge.zone-h3 { filter: brightness(.85); }
.com-ok { color: var(--ok); font-weight: 700; } .com-attente { color: var(--muted); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.nom-client { display: block; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: left; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.nom-client:hover { color: var(--accent); text-decoration-color: var(--accent); }
#rows .rowact { flex-wrap: wrap; white-space: normal; margin-left: auto; justify-content: flex-end; } #rows td:last-child { width: 1%; min-width: 196px; }
.com-prevu { color: var(--info); font-weight: 700; }
.com-attente { color: var(--muted); opacity: .75; }
.clt-mesures { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; } .clt-mesures > .hint { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Suivi des e-mails : cloche, bandeau, historique ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cloche-zone { position: relative; display: flex; align-items: center; }
.cloche { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.cloche:hover, .cloche[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.cloche-n { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cloche-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; z-index: 60; padding: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); white-space: normal; text-align: left; }
.cloche-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); }
.cloche-vide { padding: 14px; margin: 0; }
.alerte { display: grid; gap: 3px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); border-left: 4px solid transparent; padding: 10px 14px; cursor: pointer; }
.alerte:hover { background: var(--bg); }
.alerte.non-lue { background: var(--bad-soft); }
.alerte.non-lue.attention { background: var(--warn-soft); }
.alerte.ko { border-left-color: var(--bad); }
.alerte.attention { border-left-color: var(--warn); }
.alerte.info { border-left-color: var(--accent); }
.mail-bandeau { border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-size: 14px; line-height: 1.5; border: 1px solid; }
.mail-bandeau p { margin: 4px 0; }
.mail-bandeau .geo-actions { margin-top: 10px; }
.mail-bandeau-titre { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.mail-bandeau.ko { background: var(--bad-soft); border-color: var(--bad); color: var(--ink); }
.mail-bandeau.ko .mail-bandeau-titre { color: var(--bad); }
.mail-bandeau.attention { background: var(--warn-soft); border-color: var(--warn); }
.mail-bandeau.attention .mail-bandeau-titre { color: var(--warn); }
.mail-bandeau.corrige { background: var(--accent-soft); border-color: var(--accent); }
.mail-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.mail-contact[hidden] { display: none; }
.courriel-detail { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-word; }
.courriel-detail summary { cursor: pointer; }
.courriel-motif { font-size: 12.5px; }
.courriels-liste { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 8px; }
.courriel { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.courriel.ok { border-left-color: var(--ok); }
.courriel.warn { border-left-color: var(--warn); }
.courriel.ko { border-left-color: var(--bad); }
.courriel-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip.ko { background: var(--bad-soft); color: var(--bad); }
.mail-mini { font-size: 12px; font-weight: 600; text-decoration: none; }
.mail-mini.ko { color: var(--bad); }
.mail-mini.attention { color: var(--warn); }
.adresse-verif { font-size: 13px; }
.adresse-verif:empty { display: none; }
.retours-reglages { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

@media (max-width: 760px) { .cloche-panel { position: fixed; left: 16px; right: 16px; width: auto; } }
/* Mon profil : photo professionnelle, identifiants */
.photo-pro { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.photo-cadre { width: 112px; height: 112px; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--line); background: var(--bg); display: grid; place-items: center; }
.photo-vide { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; }
.photo-actions { display: grid; gap: 4px; flex: 1; min-width: 200px; }
.photo-actions .geo-actions { margin-top: 6px; }
.photo-pro-img { width: var(--av, 40px); height: var(--av, 40px); border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; flex: none; box-shadow: 0 0 0 1px var(--line); }
.photo-cadre .photo-pro-img { border-radius: 0; }
.profil-bloc { display: grid; gap: 12px; }
.profil-bloc + .profil-bloc { border-top: 1px solid var(--line); padding-top: 16px; }

/* ---------- Suivi → Boîte mail ---------- */
.boite-statut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 12px; font-size: 13.5px; }
.boite-statut > b { flex-basis: 100%; }
.boite-statut > span:not(.geo-actions) { flex: 1; min-width: 240px; color: var(--muted); }
.boite-statut.ok { border-color: var(--ok); }
.boite-statut.ok > b { color: var(--ok); }
.boite-statut.attention { border-color: var(--warn); background: var(--warn-soft); }
.boite-statut.ko { border-color: var(--bad); background: var(--bad-soft); }
.boite-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.boite-barre .boite-onglets { margin-bottom: 0; border-bottom: 0; }
.boite-barre input[type="search"] { flex: 1; min-width: 200px; }
.boite-nonlus { white-space: nowrap; }
.boite-nonlus[hidden] { display: none; }
.boite { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: 12px; align-items: start; }
.boite-liste { padding: 0; max-height: 72vh; overflow: auto; }
.boite-lecture { min-height: 320px; display: grid; gap: 12px; align-content: start; }
.boite-vide { padding: 18px; margin: 0; }
.boite-item { display: grid; gap: 3px; width: 100%; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding: 10px 12px; cursor: pointer; }
.boite-item:hover { background: var(--bg); }
.boite-item.actif { background: var(--accent-soft); border-left-color: var(--accent); }
.boite-item.non-lu .boite-objet, .boite-item.non-lu .boite-ligne b { font-weight: 700; }
.boite-ligne { display: flex; justify-content: space-between; gap: 8px; }
.boite-ligne b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite-objet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite-extrait { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boite-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.boite-puces:empty { display: none; }
.point-non-lu { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 1px; }
.boite-tete h2 { margin: 0 0 6px; font-size: 18px; }
.boite-tete p { margin: 4px 0; font-size: 14px; }
.boite-association { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.boite-association select { max-width: 340px; }
.boite-client { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; }
.boite-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.boite-texte { white-space: pre-wrap; word-break: break-word; font: 14px/1.55 var(--font-body); margin: 0; background: var(--bg); border-radius: 8px; padding: 12px; max-height: 60vh; overflow: auto; }
.boite-html { width: 100%; height: 60vh; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.boite-fil { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; }
.boite-fil-item { display: grid; gap: 2px; text-align: left; font: inherit; background: var(--bg); border: 0; border-left: 3px solid var(--line); border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--ink); }
.boite-fil-item.envoye { border-left-color: var(--accent); }
@media (max-width: 860px) {
  .boite { grid-template-columns: minmax(0, 1fr); }
  .boite-liste { max-height: 45vh; }
  .boite-html { height: 50vh; }
}

/* ---------- Case « Devis signés » ---------- */
.kpi.kpi-signes { position: relative; overflow: hidden; isolation: isolate; color: #fff; border: 0;
  background: radial-gradient(120% 140% at 100% 0%, #6fcf6a 0%, transparent 55%), linear-gradient(135deg, #1f5a2a 0%, #2d7a36 55%, #3c9a45 100%);
  box-shadow: 0 10px 24px -14px rgb(31 90 42 / .9); }
.kpi.kpi-signes::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .28) 48%, transparent 66%); transform: translateX(-120%); }
.kpi.kpi-signes .k { color: rgb(255 255 255 / .85); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi-signes-icone { color: #f6c945; font-size: 15px; letter-spacing: 0; }
.kpi.kpi-signes .v { font-size: 44px; color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .18); display: inline-block; transform-origin: left 70%; }
.kpi-signes-mois { font-size: 13px; color: rgb(255 255 255 / .92); margin-top: 2px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.kpi-signes-mois .mois-chiffre { font-weight: 800; color: #ffe38a; font-variant-numeric: tabular-nums; }
.kpi-signes-mois .tendance { font-size: 12px; color: rgb(255 255 255 / .75); }
.kpi-signes-mois .tendance.hausse { color: #ffe38a; font-weight: 600; }
.kpi-taux { height: 4px; border-radius: 4px; background: rgb(255 255 255 / .22); margin: 10px 0 4px; overflow: hidden; }
.kpi-taux span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #ffe38a, #f6c945); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.kpi.kpi-signes .h { color: rgb(255 255 255 / .78); }
.kpi-bravo { display: inline-block; margin-top: 8px; position: relative; z-index: 2; font-size: 12px; font-weight: 700; color: #1f3d12; background: #ffe38a; padding: 4px 9px; border-radius: 999px; box-shadow: 0 4px 12px -4px rgb(0 0 0 / .3); }
.kpi-eclats { position: absolute; left: 34px; top: 58px; pointer-events: none; }
.kpi-eclats i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--c); opacity: 0; animation: eclat 1.1s var(--d) cubic-bezier(.15, .7, .3, 1) forwards; }
.kpi-signes.fete .v { animation: chiffre-pop .9s cubic-bezier(.3, 1.6, .5, 1); }
.kpi-signes.fete::after { animation: reflet 1.2s .15s ease-out; }
.kpi-signes.fete { animation: carte-lueur 1.6s ease-out; }
.kpi-signes.fete .kpi-bravo { animation: bravo-entree .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes chiffre-pop { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes reflet { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes carte-lueur { 0% { box-shadow: 0 0 0 0 rgb(246 201 69 / .75), 0 10px 24px -14px rgb(31 90 42 / .9); } 100% { box-shadow: 0 0 0 16px rgb(246 201 69 / 0), 0 10px 24px -14px rgb(31 90 42 / .9); } }
@keyframes eclat { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(200deg) scale(1); } }
@keyframes bravo-entree { from { transform: translateY(-8px) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .kpi-signes.fete, .kpi-signes.fete .v, .kpi-signes.fete::after, .kpi-signes.fete .kpi-bravo { animation: none; }
  .kpi-signes.fete { outline: 3px solid #f6c945; outline-offset: 2px; }
  .kpi-taux span { transition: none; }
}
.kpi-bravo[hidden] { display: none; }

/* ---------- Relances automatiques ---------- */
.relances-statut { margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.relance-prochaine { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; margin-bottom: 10px; }
.relance-apercu summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.relance-apercu pre { margin-top: 8px; }
.relance-bouton { display: inline-block; background: #2d6a2f; color: #fff; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 13px; }
.relances-actions { margin-bottom: 10px; }
.relances-saisie { display: grid; gap: 8px; padding: 12px; background: var(--bg); border-radius: 8px; margin-bottom: 10px; font-size: 14px; }
.relances-saisie[hidden] { display: none; }
.relances-saisie label { display: grid; gap: 6px; }
.relances-etapes { margin: 0 0 8px; padding-left: 0; list-style: none; display: grid; gap: 6px; font-size: 13.5px; }
.relances-etapes li { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.relance-modele { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.relance-modele summary { cursor: pointer; }
.relance-modele[open] summary { margin-bottom: 10px; }
.relance-test { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.relance-test input { min-width: 220px; flex: 1; }

/* ---------- Suivi des envois et relances mail ---------- */
table.list tr:has(+ tr.ligne-suivi) td { border-bottom: 0; padding-bottom: 6px; }
table.list tr.ligne-suivi td { padding-top: 0; padding-bottom: 12px; }
.suivi-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; color: var(--muted); }
.suivi-envoi > span:not(.chip):not(:last-child)::after { content: "·"; margin: 0 8px; color: var(--line); }
.suivi-envoi > span:not(.chip) { white-space: nowrap; }
.suivi-envoi b { color: var(--ink); font-weight: 600; }
.suivi-envoi.vide { font-style: italic; }
.suivi-envoi .chip { margin-left: 10px; }
.suivi-envoi.a-relancer > span:first-child, .suivi-envoi.a-relancer > span:nth-child(2) { color: var(--warn); }
.suivi-histo-lien { font-size: 11.5px; color: var(--muted); opacity: .8; }
.suivi-fiche { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; background: var(--surface); }
.suivi-fiche.a-relancer { border-color: var(--warn); }
.suivi-fiche-ligne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.suivi-fiche-ind { display: grid; gap: 2px; align-content: start; }
.suivi-fiche-ind .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.suivi-fiche-ind b { font-size: 15px; }
.suivi-fiche-ind .suivi-nb { font: 700 26px var(--font-display); line-height: 1.1; }
.suivi-fiche-ind .hint { font-size: 12px; }
.suivi-alerte { margin: 10px 0 0; color: var(--warn); font-weight: 600; font-size: 13.5px; }
.suivi-historique { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; color: var(--ink); }
@media (max-width: 640px) { .suivi-fiche-ligne { grid-template-columns: minmax(0, 1fr); } }
button.suivi-envoi { background: none; border: 0; padding: 2px 0; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
button.suivi-envoi:hover .suivi-histo-lien { text-decoration: underline; color: var(--accent); }
@media (max-width: 760px) {
  .suivi-envoi { position: sticky; left: 14px; max-width: calc(100vw - 72px); }
  .suivi-envoi > span:not(.chip) { white-space: normal; }
  .suivi-envoi .chip { margin-left: 0; }
}

/* ---------- Cases du suivi en couleur (Devis, En cours, Montant signé, Commissions) ---------- */
.kpi.kpi-couleur { position: relative; overflow: hidden; color: #fff; border: 0;
  background: radial-gradient(120% 140% at 100% 0%, var(--kc3) 0%, transparent 55%), linear-gradient(135deg, var(--kc1) 0%, var(--kc2) 100%);
  box-shadow: 0 10px 24px -14px var(--kc1); transition: transform .2s ease, box-shadow .2s ease; }
.kpi.kpi-couleur:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -14px var(--kc1); }
.kpi.kpi-couleur .k { color: rgb(255 255 255 / .85); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi.kpi-couleur .v { color: #fff; text-shadow: 0 2px 10px rgb(0 0 0 / .15); }
.kpi.kpi-couleur .h { color: rgb(255 255 255 / .82); }
.kpi-icone { color: var(--kc4); font-size: 15px; letter-spacing: 0; }
.kpi-bleu { --kc1: #1d3f8f; --kc2: #3a6fd6; --kc3: #7fb0ff; --kc4: #bcd6ff; }
.kpi-orange { --kc1: #a4480b; --kc2: #e5891d; --kc3: #ffc46b; --kc4: #ffe2a8; }
.kpi-turquoise { --kc1: #0d5a5e; --kc2: #179a9c; --kc3: #6fe0d6; --kc4: #b8f2ea; }
.kpi-violet { --kc1: #4a2380; --kc2: #8148c9; --kc3: #c79bff; --kc4: #f6c945; }
@media (prefers-reduced-motion: reduce) { .kpi.kpi-couleur, .kpi.kpi-couleur:hover { transition: none; transform: none; } }

/* ---------- Animation de la case « Commissions » ---------- */
.kpi-bravo-com { color: #3b1d66; background: #f6c945; }
.kpi-pieces { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kpi-pieces i { position: absolute; left: var(--gx); bottom: -18px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font: 700 11px/1 var(--font-body); font-style: normal; color: #7a4d00; background: radial-gradient(circle at 35% 30%, #fff3b8, #f6c945 55%, #d39a17);
  box-shadow: 0 2px 6px rgb(0 0 0 / .25), inset 0 -2px 0 rgb(0 0 0 / .12); opacity: 0; animation: piece-monte 1.5s var(--d) cubic-bezier(.2, .7, .3, 1) forwards; }
.kpi-com.fete .v { animation: chiffre-pop .9s cubic-bezier(.3, 1.6, .5, 1); display: inline-block; transform-origin: left 70%; }
.kpi-com.fete { animation: carte-lueur-violette 1.6s ease-out; }
.kpi-com.fete .kpi-icone { animation: etoile-tourne 1.2s ease-in-out; display: inline-block; }
.kpi-com.fete .kpi-bravo { animation: bravo-entree .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes piece-monte { 0% { opacity: 0; transform: translate(0, 0) rotateY(0) scale(.7); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(-1 * var(--h))) rotateY(var(--r)) scale(1); } }
@keyframes etoile-tourne { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.6); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes carte-lueur-violette { 0% { box-shadow: 0 0 0 0 rgb(246 201 69 / .8), 0 10px 24px -14px #4a2380; } 100% { box-shadow: 0 0 0 16px rgb(246 201 69 / 0), 0 10px 24px -14px #4a2380; } }
@media (prefers-reduced-motion: reduce) {
  .kpi-com.fete, .kpi-com.fete .v, .kpi-com.fete .kpi-icone, .kpi-com.fete .kpi-bravo { animation: none; }
  .kpi-com.fete { outline: 3px solid #f6c945; outline-offset: 2px; }
  .kpi-pieces { display: none; }
}
.objet-modele { display: grid; grid-template-columns: minmax(130px, auto) minmax(0, 1fr); gap: 8px; }
@media (max-width: 520px) { .objet-modele { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Relance par SMS ---------- */
.sms-fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: grid; gap: 14px; max-width: 620px; }
@media (max-width: 520px) { .sms-fenetre { padding: 18px 16px; } }
#smsCompteur .lien { font-size: inherit; }
.sms-actions .btn.desactive { opacity: .5; pointer-events: none; }
.sms-qr { display: grid; justify-items: center; gap: 8px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.sms-qr #smsQrImage { max-width: 100%; overflow: hidden; }
.sms-qr #smsQrImage svg { max-width: 100%; height: auto; display: block; }
.sms-qr .hint { text-align: center; color: #5b6676; }
.sms-etat { padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.sms-etat p { margin: 0 0 8px; }
.suivi-historique details summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1000px) { .suivi-fiche-ligne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .suivi-fiche-ligne { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Prospection ---------- */
.prosp-go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 12px 20px; box-shadow: 0 8px 22px -12px var(--accent); }
.prosp-go-n { font-variant-numeric: tabular-nums; opacity: .85; }
.prosp-portee { display: grid; gap: 2px; } .prosp-portee select { padding: 8px 10px; }
.prosp-vues { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin-bottom: 14px; }
.prosp-vue { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: 500 13px var(--font-body); }
.prosp-vue b { font: 700 24px var(--font-display); font-variant-numeric: tabular-nums; line-height: 1.1; }
.prosp-vue span { color: var(--muted); }
.prosp-vue.vide b { color: var(--muted); font-weight: 500; }
.prosp-vue[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.prosp-vue-rappels_retard:not(.vide) b { color: var(--bad); }
.prosp-vue-rappels_jour:not(.vide) b { color: var(--warn); }
.prosp-vue-interesses:not(.vide) b, .prosp-vue-rendez_vous:not(.vide) b { color: var(--ok); }
#view-prospection .toolbar select { width: auto; padding: 9px 10px; }
table.list.prosp-table { min-width: 1180px; }
.prosp-table td .zone-badge { margin-left: 4px; }
.prosp-table .chip { white-space: nowrap; }
.prosp-danger { display: grid; justify-items: stretch; gap: 10px; margin: 0 0 12px; } .prosp-danger:not(:has(.prosp-suppr:not([hidden]))) { display: none; }
.prosp-suppr { width: 100%; padding: 14px 16px; border: 1px solid var(--bad); border-radius: 12px; background: var(--surface); display: grid; gap: 6px; } .prosp-suppr p { margin: 0; } .prosp-suppr-n b { font: 700 26px var(--font-display); color: var(--bad); } .prosp-suppr .err:empty { display: none; }
.appel-led { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .appel-led select { width: auto; padding: 6px 8px; }
.prosp-table tbody tr { cursor: pointer; }
.prosp-table tbody tr:hover td, .prosp-table tbody tr:focus-visible td { background: var(--bg); }
.prosp-tel { white-space: nowrap; font-family: var(--font-mono); font-size: 13px; }
.prosp-extrait { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prosp-retard { color: var(--bad); font-weight: 600; }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.gris { background: var(--bg); color: var(--muted); }
.prosp-import { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; display: grid; gap: 14px; margin-bottom: 24px; }
.prosp-depot { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 34px 16px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; background: var(--bg); transition: border-color .15s, background .15s; }
.prosp-depot b { font-size: 16px; }
.prosp-depot.survol, .prosp-depot:hover, .prosp-depot:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.prosp-depot.charge { opacity: .7; pointer-events: none; }
.prosp-h2 { font: 600 16px var(--font-display); margin: 6px 0 4px; }
.prosp-champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; }
.prosp-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; margin-top: 8px; align-items: start; }
.prosp-mode { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin: 0; } .prosp-mode legend { font-size: 14px; font-weight: 500; padding: 0 4px; }
.prosp-bilan { display: flex; flex-wrap: wrap; gap: 8px; }
.prosp-bilan-item { padding: 6px 12px; border-radius: 999px; font-size: 13.5px; background: var(--bg); }
.prosp-bilan-item.ok { background: var(--ok-soft); color: var(--ok); } .prosp-bilan-item.warn { background: var(--warn-soft); color: var(--warn); } .prosp-bilan-item.bad { background: var(--bad-soft); color: var(--bad); }
.prosp-apercu { max-height: 420px; overflow: auto; } .prosp-apercu table.list { min-width: 720px; font-size: 13px; } .prosp-apercu td { padding: 8px 10px; }
.prosp-apercu tr.etat-invalide td, .prosp-apercu tr.etat-opposition td { background: color-mix(in srgb, var(--bad-soft) 55%, transparent); }
.prosp-bilan-liste { margin: 6px 0 0; padding-left: 18px; }
.prosp-fin { align-items: center; }
.prosp-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.prosp-kpi .v { font-size: 28px; } .prosp-kpi-gris .v { color: var(--muted); } .prosp-kpi-ok .v { color: var(--ok); }
.prosp-perso { display: inline-flex; gap: 6px; align-items: center; } .prosp-perso input { width: auto; padding: 7px 8px; }
#prospSuiviCom { width: auto; padding: 8px 10px; }
.prosp-note { margin-top: 10px; max-width: 760px; }
.prosp-fiche { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background: var(--info-soft); color: var(--ink); font-size: 13.5px; }
.prosp-fiche summary { cursor: pointer; }
.prosp-fiche ol { margin: 8px 0 0; }
/* Fenêtre d'appel */
.appel-fenetre { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; display: grid; gap: 14px; max-width: 980px; }
.appel-barre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.appel-barre-actions { display: flex; gap: 14px; align-items: center; }
.appel-tete h2 { font: 700 26px var(--font-display); margin: 0 0 4px; }
.appel-tete p { margin: 2px 0; }
.appel-rappel { margin: 0; } .appel-rappel.retard { background: var(--bad-soft); color: var(--bad); }
.appel-bloque { background: var(--bad-soft); color: var(--bad); margin: 0; }
.appel-grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 22px; align-items: start; }
.appel-col { display: grid; gap: 12px; min-width: 0; }
.appel-numero { display: grid; gap: 6px; padding: 14px; border-radius: 12px; background: var(--accent-soft); }
.appel-appeler { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 18px; padding: 16px; text-decoration: none; border-radius: 12px; }
.appel-appeler.declenche { background: var(--surface); color: var(--accent); border-color: var(--accent); cursor: default; }
.appel-tel { font-family: var(--font-mono); font-weight: 600; letter-spacing: .02em; }
.appel-numero > .appel-tel { font-size: 20px; }
.appel-qr { display: grid; justify-items: center; gap: 6px; padding: 10px; background: #fff; border-radius: 10px; } .appel-qr .hint { color: #5b6676; text-align: center; }
.appel-infos { margin: 0; display: grid; gap: 8px; } .appel-infos div { display: grid; gap: 1px; }
.appel-infos dt { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } .appel-infos dd { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.appel-correction { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.appel-correction .geo-actions, .appel-correction .err { grid-column: 1 / -1; }
.appel-resultats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.appel-res { position: relative; display: flex; align-items: center; gap: 6px; text-align: left; padding: 12px 30px 12px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--font-body); cursor: pointer; min-height: 48px; }
.appel-res kbd, .appel-actions kbd { position: absolute; right: 8px; top: 8px; font: 500 11px var(--font-mono); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.appel-res:hover { border-color: var(--accent); }
.appel-res[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .appel-res[aria-checked="true"] kbd { color: inherit; border-color: currentColor; }
.appel-res-ne_plus_contacter[aria-checked="true"], .appel-res-mauvais_numero[aria-checked="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
#appelDetails { display: grid; gap: 10px; } #appelDetails:empty { display: none; }
.appel-rapides { display: flex; gap: 6px; flex-wrap: wrap; }
.appel-qualif { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; } .appel-qualif > .hint { grid-column: 1 / -1; margin: 0; }
.appel-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.appel-actions .btn.primary { position: relative; padding: 13px 96px 13px 22px; font-size: 15px; }
.appel-actions .btn.primary kbd { top: 50%; transform: translateY(-50%); color: inherit; border-color: currentColor; opacity: .75; }
.appel-raccourcis { margin: 0; }
.appel-histo summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.appel-histo ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.appel-histo li { padding: 8px 10px; border-left: 3px solid var(--line); background: var(--bg); border-radius: 0 8px 8px 0; font-size: 13.5px; }
.appel-histo-note { white-space: pre-line; margin-top: 2px; }
.appel-fin { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 30px 10px; }
.appel-fin-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); font-size: 28px; }
@media (hover: none) { .appel-res kbd, .appel-actions kbd, .appel-raccourcis { display: none; } .appel-res { padding-right: 12px; } .appel-actions .btn.primary { padding-right: 22px; } }
@media (max-width: 760px) {
  .prosp-options, .appel-grille { grid-template-columns: minmax(0, 1fr); }
  #prosp-leads .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  #prosp-leads .toolbar #prospQ { grid-column: 1 / -1; }
  #prosp-leads .toolbar select { width: 100%; min-width: 0; font-size: 14px; }
  .prosp-vues { display: flex; overflow-x: auto; gap: 6px; margin: 0 -16px 12px; padding: 0 16px 4px; scrollbar-width: none; }
  .prosp-vue { flex: 0 0 auto; min-width: 104px; padding: 8px 12px; } .prosp-vue b { font-size: 20px; }
  .appel-fond { padding: 0; }
  .appel-fenetre { border-radius: 0; min-height: 100%; padding: 14px 16px 96px; border: 0; align-content: start; }
  .appel-tete h2 { font-size: 22px; }
  .appel-resultats { grid-template-columns: 1fr 1fr; }
  /* Ordre sur téléphone : numéro, résultats, détails, note, puis informations et historique */
  .appel-grille { gap: 12px; } .appel-col { display: contents; }
  .appel-numero { order: 1; } .appel-resultats { order: 2; } #appelDetails { order: 3; } #appelErr { order: 4; } .appel-col > .field { order: 5; }
  .appel-infos, .appel-col > p.hint { order: 6; } #appelCorriger { order: 7; } .appel-correction { order: 8; } .appel-client { order: 9; } .appel-histo { order: 10; }
  /* Boutons d'enregistrement toujours accessibles en bas de l'écran */
  .appel-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; padding: 10px 16px max(10px, env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px -16px rgb(0 0 0 / .4); }
  .appel-actions .btn.primary { flex: 1; }
  .appel-correction, .appel-qualif { grid-template-columns: minmax(0, 1fr); }
  /* Téléphone : une carte par lead (nom et numéro, lieu, statut et LED, prochaine action, attribution) */
  table.list.prosp-table { min-width: 0; }
  .prosp-table thead { display: none; }
  table.list.prosp-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "nom nom nom tel" "ville cp region region" "statut led led led" "action action action action" "attr attr attr attr"; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.list.prosp-table td { display: block; padding: 0; border: 0; background: none; min-width: 0; }
  .prosp-table tbody tr:hover, .prosp-table tbody tr:focus-visible { background: var(--bg); }
  .prosp-table td[data-label="Raison sociale"] { grid-area: nom; }
  .prosp-table td[data-label="Téléphone"] { grid-area: tel; }
  .prosp-table td[data-label="Ville"] { grid-area: ville; } .prosp-table td[data-label="Code postal"] { grid-area: cp; } .prosp-table td[data-label="Région"] { grid-area: region; }
  .prosp-table td[data-label="Ville"], .prosp-table td[data-label="Code postal"], .prosp-table td[data-label="Région"] { font-size: 12.5px; color: var(--muted); font-family: var(--font-body); }
  .prosp-table td[data-label="Statut"] { grid-area: statut; } .prosp-table td[data-label="Statut"] .hint { display: inline; margin-left: 4px; }
  .prosp-table td[data-label="LED livré ?"] { grid-area: led; } .prosp-table td[data-label="LED livré ?"]::before { content: "LED "; font-size: 12px; color: var(--muted); }
  .prosp-table td[data-label="Prochaine action"] { grid-area: action; font-size: 13px; }
  table.list.prosp-table td[data-label="Dernier contact"] { display: none; }
  .prosp-table td[data-label="Attribution"] { grid-area: attr; font-size: 12px; color: var(--muted); }
  .prosp-table td[data-label="Attribution"]::before { content: "Attribué à "; }
  .prosp-table td[data-label="Prochaine action"] { grid-column: 1 / -1; font-size: 13px; }
}

/* Changer de session (dirigeant) */
.session-zone { position: relative; display: flex; align-items: center; }
.session-btn { white-space: nowrap; }
.session-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; position: absolute; right: 0; top: calc(100% + 8px); width: min(340px, calc(100vw - 32px)); max-height: min(70vh, 520px); overflow: auto; z-index: 60; padding: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); white-space: normal; text-align: left; display: grid; gap: 8px; }
.session-tete { display: grid; gap: 2px; }
.session-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.session-choix { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.session-choix > span:not(.av):not(.chip) { display: grid; flex: 1; min-width: 0; } .session-choix b { font-weight: 600; }
.session-choix:hover, .session-choix:focus-visible { background: var(--bg); border-color: var(--line); }
.session-choix.actuel { background: var(--accent-soft); cursor: default; }
.session-banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--info-soft); color: var(--info); }

/* Attribution de leads (dirigeant) */
.prosp-attrib { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(160px, 1fr) auto auto; gap: 10px 16px; align-items: end; padding: 14px 16px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.prosp-attrib-total { display: grid; align-self: center; line-height: 1.15; } .prosp-attrib-total b { font: 700 28px var(--font-display); font-variant-numeric: tabular-nums; } .prosp-attrib-total span { font-size: 13px; color: var(--muted); }
.prosp-attrib .field select, .prosp-attrib .field input { width: 100%; }
.prosp-attrib-msg { grid-column: 1 / -1; margin: 0; } .prosp-attrib-msg:empty { display: none; }
#prospAttribOk { margin-bottom: 12px; }
@media (max-width: 760px) { .prosp-attrib { grid-template-columns: 1fr 1fr; } .prosp-attrib-total { grid-column: 1 / -1; } #prospAttribBtn { grid-column: 1 / -1; } .prosp-attrib-suppr { grid-column: 1 / -1; } }
.session-btn-court { display: none; }
@media (max-width: 640px) { .session-btn-long { display: none; } .session-btn-court { display: inline; } .session-btn { padding: 6px 10px; } }

/* Félicitations à la signature d'un client */
.fete-fond { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 50% 40%, rgb(30 60 32 / .55), rgb(10 16 14 / .78)); backdrop-filter: blur(3px); }
.fete-confettis { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.fete-carte { position: relative; z-index: 1; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; display: grid; gap: 10px; justify-items: center;
  padding: 28px 26px 24px; border-radius: 22px; color: #13201a; background: linear-gradient(160deg, #ffffff 0%, #f6fbef 55%, #fff6d6 100%); box-shadow: 0 30px 80px -20px rgb(0 0 0 / .55), 0 0 0 1px rgb(245 197 24 / .45), 0 0 60px -10px rgb(245 197 24 / .55); }
.fete-croix { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(0 0 0 / .06); color: #13201a; font-size: 24px; line-height: 1; cursor: pointer; }
.fete-croix:hover, .fete-croix:focus-visible { background: rgb(0 0 0 / .12); }
.fete-trophee { position: relative; width: 120px; height: 112px; display: grid; place-items: center; }
.fete-trophee svg { position: relative; z-index: 1; filter: drop-shadow(0 8px 14px rgb(200 146 10 / .45)); }
.fete-rayons { position: absolute; inset: -18px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgb(245 197 24 / .28) 0 10deg, transparent 10deg 30deg); mask: radial-gradient(circle, #000 35%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); }
.fete-etincelle { position: absolute; color: #f5c518; font-size: 18px; opacity: 0; } .e1 { top: 6px; left: 8px; } .e2 { top: 18px; right: 2px; font-size: 14px; } .e3 { bottom: 14px; left: 0; font-size: 12px; }
.fete-carte h2 { font: 800 25px/1.2 var(--font-display); margin: 4px 0 0; color: #13201a; }
.fete-client { font-size: 18px; font-weight: 700; margin: 0; }
.fete-devis { font-size: 14px; color: #5b6676; margin: 2px 0 0; font-family: var(--font-mono); }
.fete-commission { display: grid; gap: 2px; justify-items: center; width: 100%; padding: 14px 12px; border-radius: 16px; background: linear-gradient(135deg, #2d6a2f, #3f8f3a 55%, #6aa83f); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25); }
.fete-etiquette { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fete-estim { text-transform: none; letter-spacing: 0; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: rgb(255 255 255 / .2); }
.fete-montant { font: 800 48px/1.1 var(--font-display); font-variant-numeric: tabular-nums; text-shadow: 0 3px 12px rgb(0 0 0 / .25); }
.fete-montant.arrive { animation: fete-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.fete-note { font-size: 12.5px; opacity: .9; }
.fete-motivation { font-size: 16px; font-weight: 600; margin: 4px 0 2px; }
.fete-bouton { font-size: 16px; padding: 14px 22px; border-radius: 12px; width: 100%; box-shadow: 0 10px 24px -10px #2d6a2f; }
.fete-suite { margin: 0; }
.fete-fond.joue .fete-carte { animation: fete-entree .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.fete-fond.joue .fete-trophee svg { animation: fete-trophee 1.1s cubic-bezier(.3, 1.5, .5, 1) .15s both, fete-flotte 2.6s ease-in-out 1.3s infinite; }
.fete-fond.joue .fete-rayons { animation: fete-tourne 9s linear infinite, fete-apparait .8s ease .3s both; }
.fete-fond.joue .fete-etincelle { animation: fete-scintille 1.6s ease-in-out infinite; } .fete-fond.joue .e2 { animation-delay: .5s; } .fete-fond.joue .e3 { animation-delay: 1s; }
@keyframes fete-entree { from { opacity: 0; transform: translateY(30px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fete-trophee { 0% { transform: scale(0) rotate(-25deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes fete-flotte { 50% { transform: translateY(-6px) rotate(-2deg); } }
@keyframes fete-tourne { to { transform: rotate(360deg); } }
@keyframes fete-apparait { from { opacity: 0; } }
@keyframes fete-scintille { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.2); } }
@keyframes fete-pop { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .fete-fond.joue .fete-carte, .fete-fond.joue .fete-trophee svg, .fete-fond.joue .fete-rayons, .fete-fond.joue .fete-etincelle, .fete-montant.arrive { animation: none; } }
@media (max-width: 420px) { .fete-carte { padding: 24px 18px 20px; } .fete-carte h2 { font-size: 21px; } .fete-montant { font-size: 40px; } }
.appel-fenetre:focus { outline: none; }

/* Listes à choix multiples (régions, départements) */
.multi { position: relative; }
.multi-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 200px; max-width: 280px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: 400 15px var(--font-body); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.multi-btn.actif { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.multi-panneau { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: max(100%, 280px); max-height: 360px; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 28px -10px rgb(0 0 0 / .3); }
.multi-panneau[hidden] { display: none; }
.multi-liste { overflow-y: auto; display: grid; gap: 2px; }
.multi-opt { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.multi-opt:hover { background: var(--bg); } .multi-opt input { width: auto; accent-color: var(--accent); } .multi-opt[hidden] { display: none; }
.multi-q { padding: 7px 10px; }
.multi-pied { display: flex; justify-content: space-between; padding: 4px 4px 0; border-top: 1px solid var(--line); }
.prosp-demo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .multi-btn { min-width: 0; width: 100%; max-width: none; } .multi-panneau { width: min(340px, calc(100vw - 32px)); } #prospDept .multi-panneau { left: auto; right: 0; } #prospZone .multi-panneau, #prospLed .multi-panneau { width: min(260px, calc(100vw - 32px)); } #prospAttribution .multi-panneau { left: auto; right: 0; } }

/* Tableau de bord des appels */
:root { --chart: #2d6a2f; --chart-grille: #e3e7ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --chart: #4f9f4b; --chart-grille: #2b3138; } }
:root[data-theme="dark"] { --chart: #4f9f4b; --chart-grille: #2b3138; }
.tdb-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.tdb-filtres select { width: auto; padding: 8px 10px; }
.tdb-maj { margin-left: auto; }
.tdb-note { font-size: 13px; color: var(--muted); margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--info-soft); }
.tdb-note b { color: var(--ink); }
.tdb-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 16px; }
.tdb-carte .v { font-size: 30px; }
.tdb-carte .h { font-size: 12.5px; }
.tdb-hero { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.tdb-ok .v { color: var(--ok); }
.tdb-graphes { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; margin-bottom: 16px; }
.tdb-graphe, .tdb-equipe { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.tdb-h2 { font: 600 15px var(--font-display); margin: 0 0 12px; }
.tdb-vide { margin: 8px 0 0; }
.tdb-donnees { margin-top: 10px; font-size: 13px; } .tdb-donnees summary { cursor: pointer; color: var(--muted); }
.tdb-donnees table.list { min-width: 0; } .tdb-donnees td, .tdb-donnees th { padding: 6px 10px; }
/* Colonnes : une couleur, barres fines arrondies en haut, grille discrète */
.col-graphe { display: grid; grid-template-columns: auto 1fr; gap: 8px; height: 220px; }
.col-axe { display: flex; flex-direction: column; justify-content: space-between; font-size: 11.5px; color: var(--muted); text-align: right; padding-bottom: 22px; font-variant-numeric: tabular-nums; }
.col-axe span { transform: translateY(-50%); } .col-axe span:last-child { transform: translateY(50%); }
.col-zone { position: relative; display: grid; grid-template-rows: 1fr 22px; min-width: 0; }
.col-grille { position: absolute; inset: 0 0 22px; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.col-grille i { border-top: 1px solid var(--chart-grille); } .col-grille i:last-child { border-top-color: var(--line); }
.col-barres { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; cursor: default; border-radius: 4px; }
.col:hover, .col:focus-visible { background: color-mix(in srgb, var(--chart) 8%, transparent); outline: none; }
.col-barre { width: min(24px, 70%); background: var(--chart); border-radius: 4px 4px 0 0; min-height: 0; }
.col-val { position: absolute; transform: translateY(-4px); font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.col-labels { display: flex; gap: 2px; font-size: 11px; color: var(--muted); } .col-labels span { flex: 1; text-align: center; white-space: nowrap; overflow: visible; }
/* Barres horizontales : répartition des résultats */
.rep-liste { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.rep-liste li { display: grid; grid-template-columns: 128px 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.rep-nom { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rep-piste { height: 14px; display: flex; align-items: center; }
.rep-barre { height: 14px; background: var(--chart); border-radius: 0 4px 4px 0; min-width: 2px; }
.rep-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .rep-val .hint { font-weight: 400; margin-left: 4px; }
.tdb-table { min-width: 860px; } .tdb-table tfoot th, .tdb-table tfoot td { border-top: 2px solid var(--line); }
@media (max-width: 760px) {
  .tdb-graphes { grid-template-columns: minmax(0, 1fr); }
  .tdb-cartes { grid-template-columns: 1fr 1fr; } .tdb-carte .v { font-size: 24px; }
  .tdb-maj { margin-left: 0; width: 100%; }
  .rep-liste li { grid-template-columns: 104px 1fr auto; }
}
/* Chronomètre et écrans de session */
.appel-chrono { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 14px; font-variant-numeric: tabular-nums; }
.appel-chrono b { font-family: var(--font-mono); }
.appel-chrono.en-pause { background: var(--warn-soft); color: var(--warn); }
.appel-fin-icone.pause { background: var(--warn-soft); color: var(--warn); }
.session-pause-temps { font-size: 28px; margin: 0; font-variant-numeric: tabular-nums; } .session-pause-temps b { font-family: var(--font-mono); }
.session-recap { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 10px 4px 6px; }
.session-recap h2 { margin: 0; font: 700 24px var(--font-display); }
.session-recap-duree { font-size: 17px; margin: 0; }
.session-recap-grille { width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.session-recap-tuile { display: grid; gap: 2px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.session-recap-tuile b { font: 700 26px var(--font-display); font-variant-numeric: tabular-nums; } .session-recap-tuile span { font-size: 12.5px; color: var(--muted); }
.session-recap-tuile.ok b { color: var(--ok); }
@media (max-width: 520px) { .session-recap-grille { grid-template-columns: 1fr 1fr; } }

/* Activité dans le CRM (dirigeant) */
.act-point { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 0.15em; background: var(--muted); }
.act-point.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .act-point.warn { background: var(--warn); }
.act-statut { display: inline-flex; align-items: center; } .act-statut .act-point { width: 7px; height: 7px; margin-right: 6px; box-shadow: none; }
table.list.act-table { min-width: 980px; }
.act-table tbody tr.act-ligne { cursor: pointer; }
.act-table tbody tr.act-ligne:hover td, .act-table tbody tr.act-ligne:focus-visible td, .act-table tr.ouvert td { background: var(--bg); }
.act-barre { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: var(--chart-grille); overflow: hidden; } .act-barre span { display: block; height: 100%; background: var(--chart); }
.act-detail td { background: var(--bg); padding-top: 4px; }
.act-sessions-titre { margin: 0 0 8px; }
.act-sessions ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.act-sessions li { padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
.act-session-tete { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.act-inactivites { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--muted); }
.act-regles { margin-top: 14px; font-size: 13px; color: var(--muted); } .act-regles summary { cursor: pointer; } .act-regles ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.info-suivi { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--info-soft); color: var(--ink); }
.profil-suivi { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--info-soft); }
@media (max-width: 760px) {
  .act-resume { grid-template-columns: 1fr 1fr; }
  table.list.act-table { min-width: 0; }
  .act-table thead { display: none; }
  table.list.act-table tr.act-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  table.list.act-table tr.act-ligne td { display: block; padding: 0; border: 0; text-align: left; font-size: 13px; }
  .act-table td[data-label="Statut"] { text-align: right; }
  .act-table td[data-label="Dernière connexion"], .act-table td[data-label="Dernière activité"], .act-table td[data-label="Connexions"], .act-table td[data-label="Connexion"], .act-table td[data-label="Actif"], .act-table td[data-label="Inactivité"] { color: var(--muted); }
  .act-table td[data-label]:not([data-label="Utilisateur"]):not([data-label="Statut"])::before { content: attr(data-label) " : "; }
  table.list.act-table tr.act-detail { display: block; } table.list.act-table tr.act-detail td { display: block; }
  table.list.act-table tr.act-ligne td { background: none !important; } .act-table tr.act-ligne.ouvert, .act-table tr.act-ligne:hover { background: var(--bg); }
}

/* Dimensionnement du système solaire combiné */
.ssc-couv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dim-pac.ssc-hors { background: var(--warn-soft, #fff4e5); }
.dim-pac.ssc-hors .dim-kw { color: var(--warn); }