/* ==========================================================================
   CRM Evo BTP : feuille commune des maquettes (étape 2)
   Charte Evo BTP : Outfit + Big Shoulders Display, indigo, platine, orange d'action.
   Mobile d'abord (mobile-native), composants et mouvement (emil-design-eng),
   contrôles ui-ux-pro-max (contrastes, cibles 44 px, filtres sans troncature, retour).
   ========================================================================== */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/outfit-latin.woff2') format('woff2'); }
@font-face { font-family: 'Big Shoulders Display'; font-style: normal; font-weight: 600 900; font-display: swap; src: url('fonts/bigshoulders-latin.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --indigo: #2d3047;
  --indigo-90: #3d4060;
  --ink: #2d3047;
  --ink-2: #5c5e72;
  --ink-3: #64667a;
  --bg: #f3f3f7;
  --surface: #ffffff;
  --surface-2: #f8f8fb;
  --line: rgba(45, 48, 71, 0.12);
  --line-strong: rgba(45, 48, 71, 0.28);
  --cta: #f26a22;
  --cta-hover: #ff7a33;
  --accent-text: #b5441f;
  --ok: #15803d;
  --ok-bg: #ecfdf3;
  --warn: #9a4a07;
  --warn-bg: #fff4e5;
  --danger: #b42318;
  --danger-bg: #fef3f2;
  --info-bg: #eef0fb;

  /* Statuts : couleur fonctionnelle, toujours accompagnée du libellé */
  --st-new: #e8613a;
  --st-to_call: #c27803;
  --st-called: #2f6fd6;
  --st-appointment: #7a4fd1;
  --st-quote_sent: #0f7f8f;
  --st-won: #15803d;
  --st-lost: #8b8da0;

  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Big Shoulders Display', 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 10px;
  --r-sheet: 16px;
  --shadow-btn: 3px 3px 0 var(--indigo);
  --shadow-btn-pressed: 1px 1px 0 var(--indigo);
  --shadow-sheet: 0 -12px 40px -12px rgba(45, 48, 71, 0.35);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --gutter: 16px;
  --header-h: 60px;
  --nav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 960px) { :root { --gutter: 32px; --nav-h: 0px; } }

/* ---------- Base (mobile-native : pas de flash au toucher, pas de zoom des champs) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; min-height: 100dvh; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, a, [role="button"], .chip, .seg__btn, .nav__item { touch-action: manipulation; }
button, .seg__btn, .nav__item, .btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, select, textarea { font-size: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; border-radius: 4px; }
.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; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; }
.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i--sm { width: 16px; height: 16px; }
.i--lg { width: 24px; height: 24px; }

/* ---------- Bandeau « maquette » ---------- */
.demo-flag { margin: 0; padding: calc(4px + var(--safe-top)) 12px 4px; background: #fff4c2; color: #5a4300; font-size: 13px; font-weight: 600; text-align: center; border-bottom: 1px solid #e6cf6b; }
.demo-flag + .top { padding-top: 0; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--r); border: 1.5px solid transparent; font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform 120ms var(--ease-out), background-color 150ms ease, border-color 150ms ease; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--block { width: 100%; }
/* Orange d'action : texte blanc gras (choix du propriétaire) en 19 px, taille de « grand texte » : 3,06:1 conforme */
.btn--primary { background: var(--cta); color: #fff; font-size: 19px; font-weight: 800; box-shadow: var(--shadow-btn); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: var(--shadow-btn-pressed); }
.btn--call { background: var(--indigo); color: #fff; }
.btn--light { background: #fff; color: var(--indigo); }
.btn--outline { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost { color: var(--ink); }
.btn--danger { background: var(--surface); color: var(--danger); border-color: rgba(180, 35, 24, 0.35); }
.btn--sm { min-height: 44px; padding: 0 14px; font-size: 15px; }
.btn--icon { width: 48px; padding: 0; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--cta-hover); }
  .btn--call:hover { background: var(--indigo-90); }
  .btn--outline:hover, .btn--ghost:hover { background: var(--surface-2); border-color: var(--indigo); }
  .btn--light:hover { background: #ececf3; }
}

/* ---------- Pastilles ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-3)); flex: none; }
.pill--plain::before { display: none; }
.pill--warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(154, 74, 7, 0.25); }
.pill--ok { background: var(--ok-bg); color: var(--ok); border-color: rgba(21, 128, 61, 0.25); }
.pill--danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(180, 35, 24, 0.25); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); }
.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cta); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; }
.badge--muted { background: rgba(45, 48, 71, 0.1); color: var(--ink); }

/* ---------- Coquille de l'application ---------- */
.top { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); padding-top: var(--safe-top); }
.top__inner { display: flex; align-items: center; gap: 12px; height: var(--header-h); padding: 0 var(--gutter); max-width: 1280px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; text-decoration: none; }
.brand__logo { width: 40px; height: 40px; flex: none; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.brand__logo svg { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand__name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__sub { font-size: 13px; color: var(--ink-2); }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.icon-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r); color: var(--ink); transition: transform 120ms var(--ease-out), background-color 150ms ease; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn .badge { position: absolute; top: 4px; right: 2px; }
.icon-btn--cancel { width: 48px; height: 48px; color: var(--danger); background: var(--danger-bg); }   /* croix « Ajouter une demande » : grande et rouge (10/11) */
.icon-btn--cancel .i { width: 28px; height: 28px; stroke-width: 2.5; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { background: var(--surface-2); } }

.assist { position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 29; background: var(--indigo); color: #fff; }
.assist__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px var(--gutter); max-width: 1280px; margin: 0 auto; font-size: 15px; }
.assist__inner strong { color: #ffd2b8; }
.assist .btn { min-height: 44px; font-size: 15px; }

.nav { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: var(--safe-bottom); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.nav__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: var(--nav-h); font-size: 13px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.nav__item[aria-current="page"] { color: var(--ink); }
.nav__item[aria-current="page"]::after { content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--cta); }
.nav__item .badge { position: absolute; top: 8px; left: calc(50% + 6px); }
.main { padding: 20px var(--gutter) calc(var(--nav-h) + var(--safe-bottom) + 48px); max-width: 1280px; margin: 0 auto; }

@media (min-width: 960px) {
  .layout { display: grid; grid-template-columns: 232px 1fr; max-width: 1280px; margin: 0 auto; }
  .nav { position: sticky; top: calc(var(--header-h) + 1px); align-self: start; height: calc(100dvh - var(--header-h) - 1px); grid-auto-flow: row; grid-auto-rows: min-content; gap: 4px; padding: 24px 16px; border-top: 0; border-right: 1px solid var(--line); background: transparent; }
  .nav__item { flex-direction: row; justify-content: flex-start; gap: 12px; height: 48px; padding: 0 14px; border-radius: var(--r); font-size: 16px; }
  .nav__item[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--cta); }
  .nav__item[aria-current="page"]::after { display: none; }
  .nav__item .badge { position: static; margin-left: auto; }
  .main { padding: 28px var(--gutter) 64px; margin: 0; max-width: 1048px; width: 100%; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) { .nav__item:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); } }

/* ---------- Titres et sections ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin-bottom: 18px; }
.page-head__text { flex: 1 1 150px; min-width: 0; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.page-title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 38px; line-height: 0.95; letter-spacing: 0.01em; }
@media (min-width: 960px) { .page-title { font-size: 48px; } }
.section { margin-top: 28px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section__title { font-size: 19px; font-weight: 700; line-height: 1.25; }
.link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.card + .card { margin-top: 12px; }
.grid-2 { display: grid; gap: 12px; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- Accueil client ---------- */
.todo { background: var(--indigo); color: #fff; border-radius: var(--r-lg); padding: 18px 16px 8px; }
.todo__head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.todo__count { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 0.9; color: #ffb38a; }
.todo__title { font-size: 18px; font-weight: 700; line-height: 1.25; }
.todo__sub { font-size: 15px; color: #d4d5e2; }
.todo__list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.todo__list li:first-child { border-top: 0; }
.todo__who { flex: 1; min-width: 0; }
.todo__name { font-weight: 700; overflow-wrap: anywhere; }
.todo__meta { font-size: 14px; color: #d4d5e2; overflow-wrap: anywhere; }
.todo__flag { color: #ffd2b8; font-weight: 600; }
.todo__more { display: flex; justify-content: flex-end; }
.todo__more .link { color: #ffd2b8; }
.todo--empty { background: var(--surface); color: var(--ink); border: 1px solid var(--line); padding: 18px 16px; }

.month { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.period { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 3px; }
.period button { min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; color: var(--ink-2); }
.period button[aria-pressed="true"] { background: var(--indigo); color: #fff; }
.cheer { margin: 12px 0 14px; font-size: 18px; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.cheer strong { color: var(--accent-text); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi__label { font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.kpi__num { font-family: var(--font-display); font-weight: 800; font-size: 48px; line-height: 1; letter-spacing: 0.01em; }
.kpi__extra { font-size: 15px; font-weight: 700; color: var(--ok); }
.kpi__compare { font-size: 13px; color: var(--ink-2); margin-top: auto; }
.kpi__note { font-size: 13px; color: var(--ink-3); }

.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--ink-2); }
.chart .chart__val { font-weight: 700; fill: var(--ink); font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 0; }
.bars__label { font-weight: 600; }
.bars__track { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: rgba(45, 48, 71, 0.08); overflow: hidden; }
.bars__fill { display: block; height: 100%; border-radius: 4px; background: var(--indigo); transform-origin: left; }
details.data-table summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--accent-text); }
.connect > summary { cursor: pointer; padding-block: 10px; }   /* cible tactile de 44 px (recette, étape 7) */
table.simple { width: 100%; border-collapse: collapse; font-size: 15px; }
table.simple th, table.simple td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
table.simple td.num, table.simple th.num { text-align: right; }

/* ---------- Liste des demandes ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.search { position: relative; flex: 1 1 220px; }
.search .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-2); pointer-events: none; }
.search input { width: 100%; min-height: 48px; padding: 0 14px 0 44px; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--surface); }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 4px; }
.seg__btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 52px; padding: 4px 6px; border-radius: var(--r); font-size: 15px; font-weight: 600; color: var(--ink-2); line-height: 1.2; text-align: center; }
.seg__btn b { font-size: 18px; color: var(--ink); }
.seg__btn[aria-selected="true"] { background: var(--indigo); color: #fff; }
.seg__btn[aria-selected="true"] b { color: #ffb38a; }
.filters-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--surface); font-size: 15px; font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.chip .i { width: 16px; height: 16px; }
.leads { display: grid; gap: 10px; }
@media (min-width: 1100px) { .leads { grid-template-columns: 1fr 1fr; } }
.lead { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 8px; transition: border-color 150ms ease; }
.lead--new { border-left: 4px solid var(--st-new); padding-left: 11px; }
.lead__top { display: flex; align-items: baseline; gap: 10px; }
.lead__open { font-size: 18px; font-weight: 700; text-align: left; line-height: 1.25; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lead__open::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.lead__age { font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.lead__age--hot { color: var(--accent-text); font-weight: 700; }
.lead__meta { font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.lead__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lead__actions { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 2px; }
.lead__actions .btn { min-height: 46px; }
@media (hover: hover) and (pointer: fine) { .lead:hover { border-color: var(--line-strong); } }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-2); }
.empty strong { display: block; color: var(--ink); font-size: 18px; margin-bottom: 4px; }

/* ---------- Panneau (fiche, ajout, filtres) ---------- */
.backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(45, 48, 71, 0.45); opacity: 0; transition: opacity 240ms ease; }
.backdrop[data-open] { opacity: 1; }
.sheet { position: fixed; z-index: 61; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--shadow-sheet); transform: translateY(100%); transition: transform 180ms var(--ease-out); }
.sheet[data-open] { transform: translateY(0); transition: transform 240ms var(--ease-drawer); }
.sheet__grab { flex: none; display: grid; place-items: center; height: 24px; cursor: grab; touch-action: none; }
.sheet__grab::before { content: ''; width: 40px; height: 5px; border-radius: 3px; background: rgba(45, 48, 71, 0.25); }
.sheet__head { flex: none; display: flex; align-items: flex-start; gap: 12px; padding: 0 var(--gutter) 12px; border-bottom: 1px solid var(--line); }
.sheet__title { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.sheet__sub { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px var(--gutter) calc(24px + var(--safe-bottom)); }
.sheet__foot { flex: none; display: flex; gap: 10px; padding: 12px var(--gutter) calc(12px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.sheet__foot .btn { flex: 1; }
@media (min-width: 960px) {
  .sheet { left: auto; top: 0; bottom: 0; width: 520px; max-height: none; border-radius: 0; transform: translateX(100%); box-shadow: -24px 0 48px -24px rgba(45, 48, 71, 0.4); }
  .sheet[data-open] { transform: translateX(0); }
  .sheet__grab { display: none; }
  .sheet__head { padding-top: 20px; }
}
.contact-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.contact-row .btn { flex-direction: column; gap: 4px; min-height: 68px; font-size: 15px; padding: 8px 4px; }
.block { margin-top: 22px; }
.block__title { font-size: 14px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.status-btn { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); font-weight: 600; text-align: left; line-height: 1.2; transition: transform 120ms var(--ease-out), border-color 150ms ease; }
.status-btn::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; }
.status-btn[aria-pressed="true"] { border-color: var(--indigo); border-width: 2px; background: var(--info-bg); font-weight: 800; }
.status-btn:active { transform: scale(0.97); }
.status-btn--lost { grid-column: 1 / -1; }
.step-form { margin-top: 12px; padding: 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 64px; transition: border-color 150ms ease; }
.fact__label { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.fact__value { font-weight: 700; }
.fact__value--empty { color: var(--ink-3); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .fact:hover { border-color: var(--line-strong); } }
.timeline li { position: relative; padding: 0 0 14px 20px; }
.timeline li::before { content: ''; position: absolute; left: 4px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--ink-3)); }
.timeline li::after { content: ''; position: absolute; left: 7.5px; top: 20px; bottom: 0; width: 1px; background: var(--line-strong); }
.timeline li:last-child::after { display: none; }
.timeline__when { font-size: 13px; color: var(--ink-2); }
.note { padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.note + .note { margin-top: 8px; }
.note__meta { font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.kv { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 8px 12px; font-size: 15px; }
.kv dt { color: var(--ink-2); }
.kv dd { overflow-wrap: anywhere; }
.callout { display: flex; gap: 10px; padding: 12px; border-radius: var(--r); background: var(--warn-bg); color: var(--warn); font-size: 15px; }
.callout--info { background: var(--info-bg); color: var(--ink); }

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span, .field > label { font-size: 15px; font-weight: 600; }
.field small { color: var(--ink-2); font-size: 14px; }
.input, .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--ink); }
.field input[type=radio], .field input[type=checkbox] { width: auto; min-height: 0; padding: 0; border: 0; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.field input:focus, .field select:focus, .field textarea:focus, .search input:focus { outline: 2px solid var(--cta); outline-offset: 0; border-color: var(--cta); }
.field--error input { border-color: var(--danger); }
.field__error { color: var(--danger); font-size: 14px; font-weight: 600; }
/* Fiche entreprise : « Quel métier ? » seulement si « Autre » est choisi (sans :has, le champ reste visible) */
.sector-other { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sector-field:not(:has(option[value="autre"]:checked)) .sector-other { display: none; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.switch input { appearance: none; width: 52px; height: 32px; border-radius: 999px; background: rgba(45, 48, 71, 0.2); position: relative; flex: none; cursor: pointer; transition: background-color 150ms ease; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 180ms var(--ease-out); }
.switch input:checked { background: var(--ok); }
.switch input:checked::after { transform: translateX(20px); }

/* ---------- Messages ---------- */
.toasts { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--nav-h) + var(--safe-bottom) + 16px); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); background: var(--indigo); color: #fff; font-weight: 600; box-shadow: 0 12px 32px -12px rgba(45, 48, 71, 0.5); transition: opacity 200ms ease, transform 200ms var(--ease-out); }
.toast button { margin-left: auto; color: #ffd2b8; font-weight: 700; min-height: 36px; padding: 0 6px; }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
@media (min-width: 960px) { .toasts { bottom: 24px; } }
body:has(.sheet[data-open]) .toasts { bottom: auto; top: calc(var(--safe-top) + 12px); }

/* ---------- Connexion ---------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 16px calc(24px + var(--safe-bottom)); background-color: var(--bg); background-image: linear-gradient(rgba(45, 48, 71, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 48, 71, 0.05) 1px, transparent 1px); background-size: 24px 24px; }
.auth__card { width: min(100%, 420px); background: var(--surface); border: 1.5px solid var(--indigo); border-radius: var(--r-lg); box-shadow: 5px 5px 0 var(--indigo); padding: 24px 20px; }
.auth__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 36px; line-height: 0.95; margin-bottom: 6px; }
.auth__intro { color: var(--ink-2); margin-bottom: 18px; }
.auth__foot { margin-top: 14px; font-size: 14px; color: var(--ink-2); text-align: center; }
.otp { letter-spacing: 0.4em; font-size: 26px !important; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.screens-switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* ---------- Administration ---------- */
.admin-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 720px) { .admin-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .admin-kpis { grid-template-columns: repeat(6, 1fr); } }
.kpi__src { font-size: 12px; color: var(--ink-3); }
.alerts li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.alerts li:first-child { border-top: 0; }
.alerts .i { margin-top: 2px; }
.rows { display: grid; gap: 8px; }
.row { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 6px 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px; }
.row__open { font-weight: 700; font-size: 17px; text-align: left; }
.row__open::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); }
.row__stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; font-size: 14px; }
.row__stats div { display: flex; flex-direction: column; }
.row__stats b { font-size: 17px; }
.row__stats span { color: var(--ink-2); }
@media (min-width: 900px) {
  .row { grid-template-columns: 44px minmax(180px, 1.4fr) 3fr; }
  .row__stats { grid-column: auto; grid-template-columns: repeat(7, 1fr); }
}
@media (hover: hover) and (pointer: fine) { .row:hover { border-color: var(--line-strong); } }
.mini-logo { width: 44px; height: 44px; border-radius: var(--r); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 15px; }
.tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 6px 0 16px; scrollbar-width: none; }
.tabs button { min-height: 46px; padding: 0 14px; font-weight: 600; color: var(--ink-2); border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--cta); }
.conn { display: flex; flex-direction: column; gap: 10px; }
.conn__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.conn__name { font-weight: 700; font-size: 18px; }
.steps-list { counter-reset: s; display: grid; gap: 8px; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.steps-list li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.steps-list li.done::before { content: ''; background: var(--ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: rgba(21, 128, 61, 0.35); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.table-wrap table.simple th { background: var(--surface-2); font-size: 14px; color: var(--ink-2); }
.select { min-height: 44px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet[data-open] { transition: opacity 160ms ease; transform: none; opacity: 0; }
  .sheet[data-open] { opacity: 1; }
  .btn, .icon-btn, .status-btn, .toast { transition: none; }
  .btn:active, .status-btn:active, .icon-btn:active { transform: none; }
}

/* Sélecteur de jeu de données (maquettes uniquement, break-ui) */
.demo-flag__mode { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #5a4300; border: 1px solid #d9bf52; background: transparent; }
.demo-flag__mode[aria-pressed="true"] { background: #5a4300; color: #fff4c2; border-color: #5a4300; }

/* ==========================================================================
   Revue du 6-7/11 : ui-ux-pro-max, dataviz, break-ui, reprise de H-Rénovation
   ========================================================================== */
:root { --data-1: #4b52a3; --data-2: #f26a22; }
html { scroll-padding-top: calc(var(--header-h) + 16px); }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--indigo); color: #fff; padding: 12px 16px; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip:focus { top: 8px; }
.page-title, .sheet__title, .section__title, .todo__title, .cheer { text-wrap: balance; }
.sheet__sub { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 379px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: 10px; } }
.period { flex-wrap: wrap; }
.period button { white-space: nowrap; }
.view-switch { display: none; }
@media (min-width: 960px) { .view-switch { display: inline-flex; } .view-switch button { display: inline-flex; align-items: center; gap: 6px; } }

/* Demandes urgentes (champ « Délai » des formulaires, comme sur H-Rénovation) */
.lead--urgent { border-left: 4px solid var(--danger); padding-left: 11px; }

/* Vue en colonnes sur ordinateur (principe H-Rénovation, 7 statuts) */
.layout--board .main { max-width: none; }
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; overscroll-behavior-x: contain; }
.col { display: grid; gap: 8px; align-content: start; min-height: 260px; padding: 10px; border-radius: var(--r-lg); border: 1.5px solid transparent; background: rgba(45, 48, 71, 0.05); transition: border-color 150ms ease, background-color 150ms ease; }
.col__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 4px; }
.col__name { background: transparent; border: 0; padding-left: 0; font-weight: 700; }
.col__sum { font-weight: 700; color: var(--ok); font-size: 15px; padding: 0 2px; }
.col__empty { border: 1.5px dashed var(--line-strong); border-radius: var(--r); padding: 18px 12px; text-align: center; color: var(--ink-2); font-size: 14px; }
.board .lead { padding: 12px; }
.board .lead--new, .board .lead--urgent { padding-left: 9px; }
.board .lead__open { font-size: 16px; }
.board .lead__actions { grid-template-columns: 1fr; }
.board .lead__actions .btn { min-height: 44px; font-size: 15px; }

/* Graphique : zones de toucher par mois, info-bulle, état vide (dataviz) */
.chart-wrap { position: relative; }
.chart-hits { position: absolute; inset: 0; }
.chart-hit { position: absolute; top: 0; bottom: 0; border-radius: var(--r-sm); }
.chart-hit:focus-visible { outline: 2px solid var(--cta); outline-offset: -2px; }
.chart-hit--on { background: rgba(45, 48, 71, 0.06); }
.chart-tip { position: absolute; top: 0; transform: translateY(-100%); max-width: 100%; background: var(--indigo); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--r-sm); pointer-events: none; z-index: 2; }
.chart-empty { padding: 24px 0; color: var(--ink-2); }
.bars__fill { background: var(--data-1); }

/* Hors connexion */
.offline { background: var(--indigo); }   /* bandeau court « Pas de réseau », aux couleurs de l'application */
.offline__inner { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px var(--gutter); font-size: 14px; color: #fff; }
.offline__inner .i { width: 16px; height: 16px; color: #ffb38a; }

/* Mot de passe : afficher / masquer */
.pw { position: relative; display: block; }
.pw input { padding-right: 52px; }
.pw__toggle { position: absolute; right: 2px; bottom: 2px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink-2); border-radius: var(--r); }
.layout > .main { min-width: 0; }
.toast button { min-height: 44px; }
.board .lead__actions .btn { min-height: 46px; }
/* Cartes compactes en colonnes, comme H-Rénovation : Appeler en bouton carré à icône (nom accessible via aria-label) */
.col__name { padding-left: 0; }
.board .lead__actions { grid-template-columns: 46px 1fr; }
.board .lead__actions .btn--call { padding: 0; }
.board .lead__actions .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.callout--danger { background: var(--danger-bg); color: var(--danger); }

/* Administration : ouverture du mode assistance (motif + bouton) */
.assist-open { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.assist-open input { min-height: 48px; padding: 0 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r); min-width: 220px; }

/* ==========================================================================
   Application (étape 3) : classes utilitaires. Aucun attribut style= dans les vues :
   la politique de sécurité (CSP style-src 'self') les bloquerait.
   ========================================================================== */
.mt-xs { margin-top: 6px; }
.mt-l { margin-top: 18px; }
.mb-xs { margin-bottom: 6px; }
.mb-s { margin-bottom: 8px; }
.mb-m { margin-bottom: 12px; }
.mb-l { margin-bottom: 14px; }
.mb-xl { margin-bottom: 16px; }
.grow { flex: 1; min-width: 0; }
.text-danger { color: var(--danger); }
.brand__logo--plain { border: 0; }
.brand__logo b { font-weight: 800; color: var(--indigo); }
.assist__actions { display: flex; gap: 8px; margin-left: auto; }
.btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.row--single { grid-template-columns: 1fr; }
.row--logo { grid-template-columns: 44px 1fr; }
.page-title--m { font-size: 34px; }
.field--inline { margin: 0; }
.card--highlight { border-color: var(--cta); }
.temp-password { font-size: 22px; font-weight: 800; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fieldset-plain { border: 0; padding: 0; }
.legend { font-weight: 600; margin-bottom: 6px; }
.logo-preview { object-fit: contain; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.switch--plain { border: 0; min-height: 48px; }
.totp-key { font-size: 18px; letter-spacing: 0.08em; overflow-wrap: anywhere; }

/* ==========================================================================
   Étape 4 : espace client réel. Classes qui remplacent les styles en ligne des maquettes (bloqués par la CSP).
   ========================================================================== */
.st-new { --c: var(--st-new); }
.st-to_call { --c: var(--st-to_call); }
.st-called { --c: var(--st-called); }
.st-appointment { --c: var(--st-appointment); }
.st-quote_sent { --c: var(--st-quote_sent); }
.st-won { --c: var(--st-won); }
.st-lost { --c: var(--st-lost); }
.chart text.chart__month--current { font-weight: 700; fill: var(--ink); }
.chart text.chart__sub { font-size: 11px; }
.chart-hits { display: flex; }
.chart-hit { position: relative; flex: 1 1 0; top: auto; bottom: auto; }
.legend i.legend__a { background: var(--data-1); }
.legend i.legend__b { background: var(--data-2); }
.section__title--m { font-size: 22px; }
.greeting { margin: 0 0 12px; font-size: 15px; color: var(--ink-2); }
.greeting::first-letter { text-transform: uppercase; }
.todo__spacer { height: 8px; }
.todo__open { display: block; color: inherit; text-align: left; overflow-wrap: anywhere; }
.fw-700 { font-weight: 700; }
.mt-s { margin-top: 8px; }
.mt-m { margin-top: 12px; }
.m-0 { margin: 0; }
.more-row { text-align: center; margin-top: 14px; }
.board-hint { margin: 4px 0 10px; }
.col__more { padding: 6px; }
.chip-radio input { accent-color: var(--indigo); }
.btn--outline-indigo { border-color: var(--indigo); color: var(--indigo); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.loading { padding: 36px 16px; text-align: center; color: var(--ink-2); }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.link--left { text-align: left; }
.switch--last { border-bottom: 0; }
/* « À traiter » de l'accueil : toute la ligne ouvre la fiche, le bouton Appeler reste au-dessus */
.todo__list li { position: relative; }
.todo__open::after { content: ''; position: absolute; inset: 0; }
.todo__list .btn { position: relative; z-index: 1; }
.todo__open:focus-visible { outline: none; }
.todo__open:focus-visible::after { outline: 2px solid #ffb38a; outline-offset: -2px; border-radius: var(--r-sm); }
/* Colonnes : une carte ne déborde jamais de sa colonne ; une pastille longue passe à la ligne */
.col > * { min-width: 0; }
.lead__tags .pill { white-space: normal; max-width: 100%; }
/* Étape 5 : onglets en liens (fiche client), chiffres plus compacts dans l'administration */
.tabs a { display: inline-flex; align-items: center; min-height: 46px; padding: 0 14px; font-weight: 600; color: var(--ink-2); border-bottom: 3px solid transparent; white-space: nowrap; text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--cta); }
.kpi__num--m { font-size: 40px; }
.table-scroll { overflow-x: auto; }
/* Vue agence : périodes en liens, barres de provenance par paliers de 10 % (sans style en ligne) */
.period__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-sm); font-size: 15px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.period__link[aria-current="page"] { background: var(--indigo); color: #fff; }
.bars__fill--0 { width: 2%; }
.bars__fill--10 { width: 10%; }
.bars__fill--20 { width: 20%; }
.bars__fill--30 { width: 30%; }
.bars__fill--40 { width: 40%; }
.bars__fill--50 { width: 50%; }
.bars__fill--60 { width: 60%; }
.bars__fill--70 { width: 70%; }
.bars__fill--80 { width: 80%; }
.bars__fill--90 { width: 90%; }
.bars__fill--100 { width: 100%; }

/* ==========================================================================
   Pipeline commerciale (10/11/2026) : cartes épurées, bouton Appeler, barre des 8 appels, choix, onglets d'étapes.
   Largeurs de la barre par classes (CSP : aucun attribut style=).
   ========================================================================== */
:root { --st-visit_done: #2f6fd6; --st-unqualified: #8b8da0; --st-unreachable: #6b6d80; }
.st-visit_done { --c: var(--st-visit_done); }
.st-unqualified { --c: var(--st-unqualified); }
.st-unreachable { --c: var(--st-unreachable); }
.lead { gap: 6px; padding: 14px; }
.lead__top { display: flex; align-items: flex-start; gap: 8px; }
.lead__name { flex: 1; min-width: 0; margin: 0; padding-top: 4px; font-size: 17px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.lead__flag { margin-top: 4px; }
.lead__call { flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; margin: -4px -4px 0 0; border-radius: 12px; background: var(--cta); color: #fff;   /* carré (choix du propriétaire, 10/11) */
  transition: transform 120ms var(--ease-out), background-color 150ms ease; -webkit-tap-highlight-color: transparent; }
.lead__call .i { width: 22px; height: 22px; }
.lead__call:active { transform: scale(0.94); }
@media (hover: hover) { .lead__call:hover { background: var(--cta-hover); } }
.lead__call--mail { background: var(--indigo); }
@media (hover: hover) { .lead__call--mail:hover { background: var(--indigo-90); } }
.lead__phone { margin: 0; font-size: 16px; font-weight: 600; }
.lead__meta { margin: 0; }
.lead__date { margin: 0; font-size: 14px; color: var(--ink-2); }
.lead__next { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.lead__next--late { color: var(--accent-text); }
.lead__next--ok { color: var(--ok); }
.lead__reached { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--ok); }
.attempts { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; margin-top: 2px; }
.attempts__label { font-size: 13px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.attempts__track { height: 4px; border-radius: 2px; background: rgba(45, 48, 71, 0.1); overflow: hidden; }
.attempts__fill { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--cta); transition: width 200ms var(--ease-out); }   /* orange dès le 1er appel (choix du propriétaire, 10/11) */
.attempts__fill--1 { width: 12.5%; }
.attempts__fill--2 { width: 25%; }
.attempts__fill--3 { width: 37.5%; }
.attempts__fill--4 { width: 50%; }
.attempts__fill--5 { width: 62.5%; }
.attempts__fill--6 { width: 75%; }
.attempts__fill--7 { width: 87.5%; }
.attempts__fill--8 { width: 100%; }
@media (prefers-reduced-motion: reduce) { .attempts__fill { transition: none; } }
.btn--soft { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
@media (hover: hover) { .btn--soft:hover { border-color: var(--line-strong); } }
.lead__detail { min-height: 44px; margin-top: 4px; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choices .btn { min-height: 46px; padding: 0 8px; white-space: normal; text-align: center; line-height: 1.15; font-size: 15px; }
.choices .btn[aria-disabled="true"], .block--exits .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.board .lead { padding: 12px; }
.board .lead__name { font-size: 16px; }
.board-foot { margin: 4px 0 0; }
.stage-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.stage-tabs::-webkit-scrollbar { display: none; }
.stage-tab { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; white-space: nowrap; }
.stage-tab b { font-size: 14px; color: var(--ink-2); }
.stage-tab[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.stage-tab[aria-pressed="true"] b { color: #ffb38a; }
.todo-mode { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 8px 8px 8px 14px;
  border-radius: var(--r-lg); background: var(--info-bg); font-size: 15px; }
.fact--static { cursor: default; }
/* Lecture seule : le toucher reste possible pour afficher « Lecture seule » (pas de pointer-events: none ici) */
.choices .btn[aria-disabled="true"], .block--exits .btn[aria-disabled="true"] { pointer-events: auto; }
.stage-now { margin: 0 0 10px; }
.after-call { display: grid; gap: 8px; }
.after-call .btn, .step-form .grid-2 .btn { white-space: normal; text-align: center; }
/* 4 colonnes tiennent à côté du menu dès 1280 px (le défilement horizontal reste possible plus étroit) */
.board { grid-auto-columns: minmax(210px, 1fr); }
.board .choices .btn { font-size: 14px; padding: 0 6px; }
.board .lead__phone { font-size: 15px; }

/* ==========================================================================
   Refonte v2 (maquettes validées par le propriétaire le 10/11/2026 : maquettes/v2) : même charte Evo BTP ;
   ombres douces au lieu des cadres, coins plus ronds, un seul bouton d'appel orange, menu du bas en bulle,
   logo du client, fiche plus lisible. Tout est regroupé ici, après les règles d'origine qu'il remplace.
   ========================================================================== */
:root {
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --cta-soft: #ffb38a;
  /* Ombre des sections : un filet très léger pour le contour, une ombre courte et nette, une longue et douce (relief, 11/11) */
  --shadow-1: 0 0 0 1px rgba(45, 48, 71, 0.06), 0 1px 2px rgba(45, 48, 71, 0.1), 0 6px 12px -4px rgba(45, 48, 71, 0.12), 0 20px 40px -14px rgba(45, 48, 71, 0.32);
  --shadow-cta: 0 1px 2px rgba(181, 68, 31, 0.25), 0 6px 16px rgba(242, 106, 34, 0.28);
}
/* Surfaces : une ombre douce ; la bordure transparente garde un contour en mode contraste élevé */
.card, .lead, .todo--empty, .kpi { border: 1px solid transparent; box-shadow: var(--shadow-1); }
/* La zone principale reçoit le focus à chaque changement d'onglet (lecteurs d'écran) : pas de cadre autour de toute la page */
.main:focus, .main:focus-visible { outline: none; }
.fact__value::first-letter { text-transform: uppercase; }
/* Demande urgente : la pastille « Urgent » à côté du nom suffit, pas de trait sur le bord gauche (11/11) */
.lead--urgent { border-left: 1px solid transparent; padding-left: 16px; }
.board .lead--urgent { padding-left: 12px; }
/* Boutons : plus d'ombre décalée ; pression douce */
.btn--primary { box-shadow: var(--shadow-cta); transition: transform 150ms var(--ease-out), background-color 150ms ease; }
.btn--primary:active { transform: scale(0.97); box-shadow: var(--shadow-cta); }
.btn--soft { border-color: transparent; }
/* « Détail » sur les cartes : un vrai bouton (contour, légère ombre, flèche) et non une simple zone grise (11/11) */
.lead__detail { background: var(--surface-2); border: 1.5px solid var(--line-strong); box-shadow: 0 1px 2px rgba(45, 48, 71, 0.08); color: var(--indigo); }
.lead__detail .i { width: 18px; height: 18px; stroke-width: 2.2; }
@media (hover: hover) and (pointer: fine) { .lead__detail:hover { border-color: var(--indigo); } }
.btn--phone { background: var(--cta); color: #fff; box-shadow: var(--shadow-cta); }
@media (hover: hover) and (pointer: fine) { .btn--phone:hover { background: var(--cta-hover); } }
.switch input:checked { background: var(--indigo); }
.page-title { font-size: 32px; }
.page-title--m { font-size: 30px; }
@media (min-width: 960px) { .page-title { font-size: 40px; } }
/* Logo du client (sinon l'initiale, blanche sur bleu foncé ; dans l'en-tête, bleu foncé sur blanc) */
.brand__logo { border: 0; border-radius: 12px; background: var(--indigo); }
.brand__logo b { color: #fff; font-size: 18px; }
.brand__logo--plain { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
/* En-tête bleu foncé, comme la barre du bas (11/11) : nom, sous-titre et cloche en blanc */
.top { background: var(--indigo); border-bottom-color: transparent; }
.top .brand { color: #fff; }
.top .brand__sub { color: rgba(255, 255, 255, 0.72); }
.top .brand__logo { background: #fff; box-shadow: none; }
.top .brand__logo b { color: var(--indigo); }
.top .icon-btn { color: #fff; }
@media (hover: hover) and (pointer: fine) { .top .icon-btn:hover { background: rgba(255, 255, 255, 0.12); } }
.top .icon-btn .badge { box-shadow: 0 0 0 2px var(--indigo); }
.top :focus-visible { outline-color: var(--cta-soft); }
.assist { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }   /* bandeaux sous l'en-tête : un filet les sépare */
.brand__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Logo du client dans l'en-tête : case carrée, le logo entier à l'intérieur avec une petite marge */
.brand .brand__logo--img { padding: 3px; }
.brand__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu du bas : une bulle blanche qui flotte au-dessus de l'écran (téléphone) ; l'onglet actif dans une pastille orange clair */
@media (max-width: 959.98px) {
  .nav { left: 12px; right: 12px; bottom: calc(10px + var(--safe-bottom)); padding-bottom: 0; border: 0; border-radius: 24px;
    background: var(--surface); box-shadow: 0 1px 2px rgba(45, 48, 71, 0.08), 0 12px 32px -8px rgba(45, 48, 71, 0.32); }
  .nav__item[aria-current="page"]::after { display: none; }
  .nav__item svg { position: relative; z-index: 1; }
  .nav__item[aria-current="page"] { color: var(--ink); }
  .nav__item[aria-current="page"] svg { color: var(--accent-text); }
  .nav__item[aria-current="page"]::before { content: ''; position: absolute; top: 8px; left: 50%; width: 58px; height: 32px; margin-left: -29px; border-radius: 16px; background: rgba(242, 106, 34, 0.14); }
  .nav__item .badge { z-index: 2; }
  /* Menu sans icônes (administration) : la pastille entoure le texte */
  .nav__item--text[aria-current="page"]::before { top: 50%; left: 4px; right: 4px; width: auto; height: 36px; margin: -18px 0 0; border-radius: 18px; z-index: -1; }
  .nav__item--text { z-index: 0; }
  .main { padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 64px); }
  .toasts { bottom: calc(var(--nav-h) + var(--safe-bottom) + 26px); }
  /* Sous la bulle, à l'infini vers le bas : un fond plein qui part du bas de la bulle et descend d'un écran entier sous le
     bord (Safari sur iPhone continue d'afficher la page sous sa barre d'adresse, 11/11) */
  .layout::before { content: ''; position: fixed; z-index: 39; left: 0; right: 0; bottom: -100vh; height: calc(100vh + 10px + var(--safe-bottom)); background: var(--bg); pointer-events: none; }
  /* Sous la bulle, jusqu'au bas de l'écran : un voile flou qui efface le texte qui défile derrière (lisibilité, 11/11).
     Couleur de fond pleine (estompée vers le haut par le masque) et collée au bas de l'écran : Safari sur iPhone prolonge
     la couleur d'un élément fixe posé au bord de l'écran sous sa propre barre d'adresse, où aucun site ne peut dessiner. */
  .layout::after { content: ''; position: fixed; z-index: 39; left: 0; right: 0; bottom: 0; height: calc(var(--nav-h) + var(--safe-bottom) + 36px); pointer-events: none;
    background-color: var(--bg);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0, rgba(0, 0, 0, 0.96) calc(10px + var(--safe-bottom)), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.55) 60%, transparent 100%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.96) 0, rgba(0, 0, 0, 0.96) calc(10px + var(--safe-bottom)), rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.55) 60%, transparent 100%); }
}
/* Liste des demandes : le nombre à gauche, « Filtres » à droite en bouton discret (maquette v2) ; filtres actifs : pastille pleine */
.filters-row { justify-content: space-between; margin: 12px 0 14px; }
.filters-row__count { font-size: 15px; color: var(--ink-2); }
.filters-row__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.chip--link { border-color: transparent; background: transparent; color: var(--indigo); font-weight: 700; padding: 0 10px; margin-right: -10px; }
.chip--link .i { width: 18px; height: 18px; }
.chip--link[aria-pressed="true"] { border-color: var(--indigo); background: var(--indigo); color: #fff; margin-right: 0; }
@media (hover: hover) and (pointer: fine) { .chip--link:hover { background: rgba(45, 48, 71, 0.06); } .chip--link[aria-pressed="true"]:hover { background: var(--indigo); } }
/* Accueil */
.hello { margin: 0 0 14px; }
.hello__name { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.hello__date { margin: 2px 0 0; font-size: 15px; color: var(--ink-2); }
.hello__date::first-letter { text-transform: uppercase; }
.todo { padding: 18px 16px 14px; box-shadow: 0 2px 4px rgba(45, 48, 71, 0.14), 0 18px 36px -12px rgba(45, 48, 71, 0.6); }
.todo__count { font-size: 52px; color: var(--cta-soft); }
.todo__sub { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.todo__list li { border-top-color: rgba(255, 255, 255, 0.12); }
.todo__meta { margin: 0; font-size: 15px; color: rgba(255, 255, 255, 0.78); }
.todo__flag { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--cta-soft); }
.todo__flag .i { width: 16px; height: 16px; }
.todo__list .lead__call { margin: 0; position: relative; z-index: 1; }
.todo__more { display: block; }
.todo__all { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 6px; border-radius: var(--r); background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; font-size: 16px; }
.todo__all .i { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .todo__all:hover { background: rgba(255, 255, 255, 0.16); } }
.todo__all:focus-visible { outline: 2px solid var(--cta-soft); outline-offset: 2px; }
.section__title .title-note { font-size: 15px; font-weight: 500; color: var(--ink-3); }
.today { list-style: none; margin: 12px 0 0; padding: 0; }
.today li + li { margin-top: 10px; }
.today__row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; text-align: left; border-radius: var(--r); color: inherit; }
.today__time { flex: none; width: 70px; height: 56px; border-radius: var(--r); background: var(--info-bg); display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.today__who { flex: 1; min-width: 0; }
.today__name { display: block; font-weight: 700; font-size: 17px; overflow-wrap: anywhere; }
.today__meta { display: block; font-size: 15px; color: var(--ink-2); }
.today__row > .i { color: var(--ink-3); }
/* Carte d'une demande */
.lead { gap: 8px; padding: 16px; }
.lead__top { align-items: flex-start; gap: 12px; }
.lead__id { flex: 1; min-width: 0; }
.lead__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-top: 0; font-size: 18px; }
.lead__name .pill { min-height: 22px; padding: 1px 9px; font-size: 13px; font-weight: 700; }
.lead__phone { margin-top: 2px; color: var(--ink-2); }
.lead__call { margin: 0; box-shadow: var(--shadow-cta); }
.lead__next--late { color: var(--danger); }
/* Fiche Détail */
.sheet__head { border-bottom: 0; }
.sheet__head .icon-btn:not(.icon-btn--cancel) { border-radius: 22px; background: var(--surface-2); }
.contact-row .btn--outline { background: var(--surface-2); border-color: transparent; }
.calls { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.calls b { color: var(--ink); }
.fact { border-color: transparent; border-radius: 14px; }
.fact__value--add { display: inline-flex; align-items: center; gap: 4px; color: var(--accent-text); font-weight: 700; }
.fact__value--late { color: var(--danger); }
.block__title { font-size: 13px; letter-spacing: 0.06em; color: var(--ink-3); }