/* Inter (SIL OFL) auto-hébergé — police de l'app (woff2 par URL, efficace + SW-caché).
   La slide garde une copie base64 (js/inter-font.js) car le foreignObject→PNG ne charge
   aucune ressource externe. Poids 400/600/700/800 ; 500 retombe sur 400 (1 usage mineur). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/inter-latin-800.woff2") format("woff2"); }

:root {
  /* Docusign-inspired palette */
  --navy: #26065D;
  --navy-dk: #160C3A;
  --cobalt: #4C00FF;
  --yellow: #FFCB00;
  --yellow-dk: #E0B200;

  --ink: #1B1340;
  --muted: #6B6685;
  --line: #E6E2F1;
  --bg: #F4F2FA;
  --card: #FFFFFF;

  --green: #16855A;
  --green-bg: #E6F6EE;
  --red: #C42B4B;
  --red-bg: #FCE9ED;
  --amber: #B26A00;
  --amber-bg: #FFF3DC;

  --radius: 16px;
  --radius-sm: 11px;
  --shadow: 0 6px 22px rgba(38, 6, 93, 0.10);
  --shadow-sm: 0 2px 8px rgba(38, 6, 93, 0.08);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 64px;
  --financebar-h: 66px;

  /* ===== Couleurs tokenisées (valeurs existantes — zéro changement visuel) ===== */
  /* Catégories produit — couleur de texte des pills */
  --cat-identify: #0E7C6B;
  --cat-transaction: #1B5FC4;   /* + accbadge--upsell */
  --cat-flat: #5A3FB0;
  --cat-onetime: #5E586E;
  /* Fonds clairs (pills / badges) */
  --pill-identify-bg: #E4F5F2;
  --pill-transaction-bg: #E7F0FF;
  --pill-flat-bg: #EFE9FB;
  --pill-onetime-bg: #F0EEF2;
  --cobalt-pale: #EDE6FF;        /* pill--esign, qstat--draft, lockbar--on */
  --violet-pale: #F0EDFA;        /* btn--subtle, pill par défaut */
  /* Accents / états interactifs */
  --cobalt-hover: #3D00CC;       /* btn--primary:hover */
  --accent-pink: #E0218A;
  /* Texte secondaire sur fond navy (appbar / summary / financebar) */
  --navy-sub: #C9BEF0;
  --navy-chip: #EDE7FF;
  /* Indicateurs sur navy + dégradé "over" */
  --kpi-pos: #7BE6AD;
  --kpi-neg: #FF9DB0;
  --grad-over: #6BE3A6;
  /* Journal de débogage */
  --log-bg: #0F0B1E;
  --log-fg: #C9D4E0;

  /* ===== Échelle d'espacement (rythme 4/8) — définie, adoption progressive ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;

  /* ===== Échelle typographique ===== */
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-md: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.18rem;
  --fs-xl: 2rem;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
button, .tab, .chip, a.btn { touch-action: manipulation; }
.appbar, .tabbar { user-select: none; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* Pixel 10 Pro / Chrome Android: avoid pull-to-refresh & horizontal drift. */
  overscroll-behavior-y: contain;
  overflow-x: hidden;
}

/* ---------- App bar ---------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: calc(var(--safe-t) + 10px) 16px 10px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dk) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brandlogo { background: #fff; border-radius: 9px; padding: 6px 11px; display: inline-flex; align-items: center; gap: 6px; flex: none; }
.brandlogo img { height: 26px; width: auto; max-width: 120px; display: block; }
.brandlogo__iam {
  font-weight: 800; font-size: 16px; letter-spacing: .4px; line-height: 1;
  background: linear-gradient(90deg, var(--cobalt) 0%, var(--accent-pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Marque texte de l'en-tête (rebrand « Pro Quote », sans logo Docusign) */
.brandname { background:#fff; border-radius:9px; padding:7px 13px; flex:none;
  font-weight:800; font-size:1rem; letter-spacing:.3px; line-height:1; color: var(--cobalt); }
.appbar__sub { font-size: .72rem; color: var(--navy-sub); white-space: nowrap; }
.savechip {
  font-size: .72rem;
  background: rgba(255, 255, 255, .14);
  color: var(--navy-chip);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.savechip.is-saving { background: var(--yellow); color: var(--navy-dk); }
.appbar__btn {
  border: none;
  background: rgba(255, 255, 255, .14);
  color: var(--navy-chip);
  width: 40px; height: 40px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
}
.appbar__btn svg { width: 22px; height: 22px; fill: currentColor; }
.appbar__btn:active { background: rgba(255, 255, 255, .26); }
input[type="search"] { -webkit-appearance: none; appearance: none; }

/* ---------- Layout ---------- */
.app {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabbar-h) + var(--safe-b) + 24px);
}
/* Extra bottom room when the floating financial bar is shown (quote view). */
body.has-financebar .app {
  padding-bottom: calc(var(--tabbar-h) + var(--financebar-h) + var(--safe-b) + 24px);
}
.view { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 2px 10px;
}
.section-title h2 { font-size: 1.18rem; margin: 0; }
.section-title p { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 14px;
}
.card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 12px; }
.card__head h3 { margin: 0; font-size: .95rem; letter-spacing:.2px; }
.card__hint { font-size: .78rem; color: var(--muted); margin: -4px 0 12px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.row { display: flex; gap: 10px; }
.row > .field { flex: 1; }

input, select, textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 12px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 72px; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(76, 0, 255, .12);
}
.input-affix { position: relative; display:flex; align-items:center; }
.input-affix .affix { position:absolute; right: 12px; color: var(--muted); font-size:.85rem; pointer-events:none; }
.input-affix.left .affix { left: 12px; right: auto; }
.input-affix.left input { padding-left: 28px; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236B6685' d='M6 8 0 0h12z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: right 14px center; padding-right: 34px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: transform .04s ease, background .15s, box-shadow .15s, border-color .15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; fill: currentColor; }
.btn--primary { background: var(--cobalt); color: #fff; box-shadow: 0 4px 14px rgba(76,0,255,.28); }
.btn--primary:hover { background: var(--cobalt-hover); }
.btn--accent { background: var(--yellow); color: var(--navy-dk); box-shadow: 0 4px 14px rgba(255,203,0,.35); }
.btn--accent:hover { background: var(--yellow-dk); }
.btn--ghost { background: #fff; color: var(--cobalt); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--cobalt); }
.btn--subtle { background: var(--violet-pale); color: var(--navy); }
.btn--danger { background: #fff; color: var(--red); border-color: var(--red-bg); }
.btn--danger:hover { background: var(--red-bg); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 12px; font-size: .85rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }

.iconbtn {
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  width: 44px; height: 44px; display:inline-flex; align-items:center; justify-content:center;
  cursor: pointer; color: var(--muted); flex: none;
}
.iconbtn svg { width: 18px; height: 18px; fill: currentColor; }
.iconbtn:hover { color: var(--cobalt); border-color: var(--cobalt); }
.iconbtn.danger:hover { color: var(--red); border-color: var(--red); }
/* Boutons compacts (réordonnancement produits + corbeille dans la ligne de devis) */
.iconbtn--sm { width: 36px; height: 36px; border-radius: 9px; }
.iconbtn--sm svg { width: 16px; height: 16px; }
.iconbtn:disabled { opacity: .3; cursor: default; pointer-events: none; }
.lineitem__actions { display: flex; gap: 4px; align-items: flex-start; flex: none; }

/* ---------- Summary / KPI ---------- */
.summary {
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dk) 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.summary__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.summary__label { font-size: .76rem; color: var(--navy-sub); }
.summary__acv { font-size: 2rem; font-weight: 700; letter-spacing:-.5px; margin-top: 2px; }
.summary__term { font-size: .74rem; color: var(--navy-sub); }
.badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size: .76rem; font-weight: 700; padding: 6px 11px; border-radius: 999px;
}
.badge svg { width: 14px; height: 14px; fill: currentColor; }
.badge--growth { background: var(--green-bg); color: var(--green); }
.badge--churn { background: var(--red-bg); color: var(--red); }
.badge--flat { background: var(--amber-bg); color: var(--amber); }

.progress { margin-top: 16px; }
.progress__bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.16); overflow:hidden; position:relative; }
.progress__fill { height: 100%; border-radius: 999px; transition: width .35s ease, background .3s; }
.progress__fill.under { background: var(--yellow); }
.progress__fill.over  { background: linear-gradient(90deg, var(--yellow) 0%, var(--grad-over) 100%); }
.progress__marks { display:flex; justify-content:space-between; font-size: .72rem; color:var(--navy-sub); margin-top: 7px; }

.kpis { display:flex; gap:10px; margin-top: 16px; }
.kpi { flex:1; background: rgba(255,255,255,.08); border-radius: 12px; padding: 10px 12px; }
.kpi__k { font-size: .68rem; color:var(--navy-sub); }
.kpi__v { font-size: 1.02rem; font-weight: 700; margin-top: 2px; }
.kpi__v.pos { color: var(--kpi-pos); }
.kpi__v.neg { color: var(--kpi-neg); }

/* ---------- Line items ---------- */
.lineitem {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
}
.lineitem__head { display:flex; justify-content:space-between; gap: 10px; align-items:flex-start; }
.lineitem__name { font-weight: 700; font-size: .95rem; }
.lineitem__meta { display:flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.lineitem__pub { font-size:.78rem; color:var(--muted); margin-top:6px; }
.lineitem__pub b { color: var(--ink); font-weight:700; }
.pill { font-size: .68rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--violet-pale); color: var(--navy); }
.pill--esign { background: var(--cobalt-pale); color: var(--cobalt); }
.pill--iam { background: var(--amber-bg); color: var(--amber); }
.pill--identify { background: var(--pill-identify-bg); color: var(--cat-identify); }
.pill--proserv { background: var(--red-bg); color: var(--red); }
.pill--user { background: var(--green-bg); color: var(--green); }
.pill--transaction { background: var(--pill-transaction-bg); color: var(--cat-transaction); }
.pill--flat { background: var(--pill-flat-bg); color: var(--cat-flat); }
.pill--onetime { background: var(--pill-onetime-bg); color: var(--cat-onetime); }
.lineitem__total { text-align:right; }
.lineitem__total b { font-size: 1.02rem; }
.lineitem__total s { color: var(--muted); font-size: .76rem; display:block; }
.lineitem__grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
.lineitem__grid .field { margin: 0; }
.lineitem__foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:.78rem; color: var(--muted); }
.discount-flag { color: var(--green); font-weight: 600; }
.lineitem__prices { margin-top: 12px; background: var(--bg); border-radius: 12px; padding: 11px 13px; display:flex; flex-direction:column; gap: 6px; }
.lp { display:flex; justify-content:space-between; align-items:baseline; gap: 12px; font-size: .82rem; }
.lp__k { color: var(--muted); white-space: nowrap; }
.lp__v { font-variant-numeric: tabular-nums; text-align:right; color: var(--ink); }
.lp--support .lp__v { color: var(--cobalt); font-weight: 600; }
.lp--total { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.lp--total .lp__k { color: var(--ink); font-weight: 700; }
.lp--total .lp__v b { font-size: 1.05rem; }
.lp--term .lp__k { color: var(--ink); font-weight: 700; }
.lp--term .lp__v b { font-size: 1.05rem; color: var(--cobalt); }
.lp__hs { color: var(--muted); font-weight: 400; font-size: .85em; }
.lp__v { min-width: 0; }

.recap { margin-top: 12px; padding-top: 12px; border-top: 1.5px solid var(--line); }
.recap__row { display:flex; justify-content:space-between; align-items:center; font-size:.86rem; padding: 4px 0; color: var(--ink); }
.accbadge { display:inline-block; font-size: .64rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.accbadge--ok { background: var(--green-bg); color: var(--green); }
.accbadge--upsell { background: var(--pill-transaction-bg); color: var(--cat-transaction); }
.accbadge--risk { background: var(--amber-bg); color: var(--amber); }
.accbadge--churn { background: var(--red-bg); color: var(--red); }
.accbadge--na { background: var(--pill-onetime-bg); color: var(--muted); }

/* Liste des fichiers déposés (api/upload.php) */
.upload-row { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius: var(--radius-sm); margin-top:6px; background: var(--card); }
.upload-row__body { min-width:0; flex:1; }
.upload-row__name { font-size:.86rem; font-weight:600; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upload-row__actions { display:flex; align-items:center; gap:4px; flex:none; }

/* Pipeline (opportunités SFDC) — mobile-first */
.opp-card { display:flex; gap:0; align-items:stretch; border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); margin-top:8px; overflow:hidden; }
.opp-card__main { flex:1; min-width:0; text-align:left; background:none; border:none; padding:12px; cursor:pointer; display:flex; flex-direction:column; gap:4px; color:inherit; font:inherit; }
.opp-card__main:active { background: var(--bg); }
.opp-card__top { display:flex; align-items:center; gap:8px; justify-content:space-between; }
.opp-card__acc { font-weight:700; color: var(--ink); font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.opp-card__name { font-size:.82rem; color: var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.opp-card__meta { font-size:.82rem; color: var(--ink); }
.opp-card__done { color: var(--green); font-weight:700; }
.opp-card__cta { font-size:.78rem; font-weight:700; color: var(--cobalt); display:flex; align-items:center; gap:2px; margin-top:2px; }
.opp-card__cta svg { width:16px; height:16px; fill: currentColor; }
.opp-card__side { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; border-left:1px solid var(--line); }

/* Pipeline : comptes consolidés (accordéon) */
.pl-acc { border:1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); margin-top:10px; overflow:hidden; }
.pl-acc__sum { list-style:none; cursor:pointer; padding:12px 14px; display:flex; flex-direction:column; gap:3px; }
.pl-acc__sum::-webkit-details-marker { display:none; }
.pl-acc__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pl-acc__name { font-weight:700; color: var(--ink); font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pl-acc__chev { flex:none; color: var(--muted); transition: transform .15s; }
.pl-acc__chev svg { width:20px; height:20px; fill: currentColor; }
.pl-acc[open] .pl-acc__chev { transform: rotate(90deg); }
.pl-acc__meta { font-size:.78rem; color: var(--muted); }
.pl-acc__body { padding:0 12px 12px; }
.pl-acc__body > a { margin:2px 0 8px; }
.pl-gn--pos { color: var(--green); }
.pl-gn--neg { color: var(--red); }
.pl-gn--zero { color: var(--muted); }

.recap__row span:first-child { color: var(--muted); }
.recap__grand { margin-top: 6px; padding-top: 10px; border-top: 1.5px solid var(--line); font-size: 1.02rem; }
.recap__grand span:first-child { color: var(--ink); font-weight: 800; }
.recap__grand span:last-child { color: var(--cobalt); font-weight: 800; }

.check { display:flex; align-items:center; gap:10px; font-size:.86rem; color: var(--ink); cursor:pointer; user-select:none; }
.check input { width: 20px; height: 20px; flex:none; accent-color: var(--cobalt); }
.check--box { min-height: 44px; }

/* Sélecteur de statut du devis (Brouillon / Validé) */
.segmented { display: inline-flex; width: 100%; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; min-height: 44px; }
.seg { flex: 1; appearance: none; -webkit-appearance: none; border: 0; background: transparent; font: inherit; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; padding: 0 12px; min-height: 44px; }
.seg + .seg { border-left: 1.5px solid var(--line); }
.seg.is-active { background: var(--cobalt); color: #fff; }
.input--ghost { color: var(--muted); font-style: italic; background: var(--bg); }

/* Badges de statut dans « Mes devis » */
.qstat { display: inline-block; font-size: .64rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 2px 8px; border-radius: 6px; vertical-align: middle; }
.qstat--ok { background: var(--green-bg); color: var(--green); }
.qstat--draft { background: var(--cobalt-pale); color: var(--cobalt); }
.qstat--lock { background: var(--amber-bg); color: var(--amber); text-transform: none; }

/* Verrou devis */
.lockbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; padding:7px 8px 7px 13px; border:1.5px solid var(--line); border-radius: var(--radius-sm); font-size:.85rem; color: var(--muted); background:#fff; }
.lockbar--on { border-color: var(--cobalt); background:var(--cobalt-pale); color: var(--ink); font-weight:600; }
.lockwrap { border:0; margin:0; padding:0; min-width:0; opacity:.6; }
.confirm-word { margin-top: 4px; }

.empty {
  text-align:center; padding: 28px 16px; color: var(--muted);
  border: 1.5px dashed var(--line); border-radius: var(--radius-sm); background:#fff;
}
.empty svg { width: 40px; height:40px; fill: var(--line); margin-bottom: 8px; }

/* ---------- Catalog ---------- */
.filterbar { display:flex; gap:8px; margin-bottom: 12px; overflow-x:auto; padding-bottom: 2px; }
.chip {
  border:1.5px solid var(--line); background:#fff; color: var(--muted);
  padding: 7px 13px; border-radius:999px; font-size:.82rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.chip.is-active { background: var(--navy); color:#fff; border-color: var(--navy); }

.product {
  display:flex; align-items:center; gap: 12px; padding: 12px;
  border:1.5px solid var(--line); border-radius: var(--radius-sm); background:#fff; margin-bottom: 10px;
}
.product__body { flex: 1; min-width: 0; }
.product__name { font-weight: 700; font-size: .92rem; }
.product__desc { font-size: .76rem; color: var(--muted); overflow:hidden; text-overflow:ellipsis; }
.product__meta { display:flex; gap:6px; margin-top: 6px; flex-wrap:wrap; align-items:center; }
.product__price { font-weight:700; white-space:nowrap; }
.product__price .per { font-size:.7rem; color:var(--muted); font-weight:500; }
.price-missing { color: var(--amber); font-size:.78rem; font-weight:600; }
.product__actions { display:flex; gap:6px; flex:none; }

/* ---------- Saved quotes ---------- */
.quoterow {
  display:flex; align-items:center; gap:12px; padding: 14px;
  border:1.5px solid var(--line); border-radius: var(--radius-sm); background:#fff; margin-bottom:10px;
  cursor:pointer;
}
.quoterow.is-current { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(76,0,255,.10); }
.quoterow__body { flex:1; min-width:0; }
.quoterow__title { font-weight:700; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quoterow__sub { font-size:.76rem; color:var(--muted); }
.quoterow__val { text-align:right; }
.quoterow__val b { font-size: 1rem; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(22,12,58,.5);
  display:flex; align-items:flex-end; justify-content:center; z-index: 100; padding: 0;
  animation: fade .15s ease;
}
.modal {
  background:#fff; width:100%; max-width: 560px;
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(18px + var(--safe-b));
  max-height: 92dvh; overflow:auto;
  animation: slideup .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes slideup { from { transform: translateY(100%);} to { transform:none; } }
.modal__grip { width:40px; height:4px; border-radius:999px; background:var(--line); margin: 0 auto 14px; }
.modal h3 { margin: 0 0 14px; font-size: 1.1rem; }
.modal__actions { display:flex; gap:10px; margin-top: 18px; }
.modal__actions .btn { flex:1; }
@media (min-width: 600px) {
  .modal-backdrop { align-items:center; padding: 20px; }
  .modal { border-radius: 20px; }
}

/* ---------- Picker list (add product to quote) ---------- */
.pick { display:flex; align-items:center; gap:12px; padding: 12px; border-radius: var(--radius-sm); border:1.5px solid var(--line); margin-bottom: 8px; cursor:pointer; background:#fff; }
.pick:hover { border-color: var(--cobalt); }
.pick__body { flex:1; min-width:0; }
.pick__name { font-weight:600; font-size:.9rem; }
.pick__meta { font-size:.74rem; color:var(--muted); }

/* ---------- Floating financial bar ---------- */
.financebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  z-index: 39;
  height: var(--financebar-h);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dk) 100%);
  color: #fff;
  box-shadow: 0 -8px 24px rgba(38, 6, 93, 0.22);
  overflow: hidden;
  user-select: none;
}
.financebar[hidden] { display: none; }
.fb__track { height: 4px; background: rgba(255, 255, 255, 0.16); }
.fb__fill { height: 100%; transition: width .35s ease, background .3s; }
.fb__fill.under { background: var(--yellow); }
.fb__fill.over { background: linear-gradient(90deg, var(--yellow) 0%, var(--grad-over) 100%); }
.fb__row {
  width: 100%;
  height: calc(var(--financebar-h) - 4px);
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  text-align: left;
  box-sizing: border-box;
  touch-action: manipulation;
}
.fb__main { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.fb__k { font-size: .64rem; color: var(--navy-sub); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.fb__acv { font-size: 1.35rem; font-weight: 700; letter-spacing: -.3px; white-space: nowrap; }
.fb__sub { font-size: .64rem; color: var(--navy-sub); white-space: nowrap; margin-top: 1px; }
.fb__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.fb__side .badge { white-space: nowrap; }
.fb__more { display: inline-flex; align-items: center; gap: 2px; font-size: .64rem; color: var(--navy-sub); }
.fb__more svg { width: 13px; height: 13px; fill: currentColor; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
}
.tab {
  border: none; background: none; cursor: pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color: var(--muted); font-size: .68rem; font-weight: 600; padding-top: 6px;
}
.tab svg { width: 23px; height: 23px; fill: currentColor; }
.tab.is-active { color: var(--cobalt); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(20px);
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 16px);
  background: var(--navy-dk); color:#fff; padding: 11px 18px; border-radius: 999px;
  font-size: .85rem; box-shadow: var(--shadow); opacity: 0; pointer-events:none;
  transition: opacity .2s, transform .2s; z-index: 60; max-width: 90vw; text-align:center;
  cursor: pointer; line-height: 1.35; white-space: pre-line;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
body.has-financebar .toast { bottom: calc(var(--tabbar-h) + var(--financebar-h) + var(--safe-b) + 16px); }

/* ---------- Misc ---------- */
.muted { color: var(--muted); }
.text-right { text-align:right; }
.mt8 { margin-top:8px; } .mt12 { margin-top:12px; } .mt16 { margin-top:16px; }
.divider { height:1px; background:var(--line); margin: 12px 0; border:0; }
.helper { font-size:.76rem; color:var(--muted); margin-top:6px; }
.logview { background:var(--log-bg); color:var(--log-fg); border-radius:var(--radius-sm); padding:10px 12px; font:.68rem/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre-wrap; word-break:break-word; max-height:180px; overflow:auto; margin:0; }
.warnbox { background: var(--amber-bg); color: var(--amber); border-radius: var(--radius-sm); padding: 11px 13px; font-size:.82rem; display:flex; gap:8px; align-items:flex-start; }
.warnbox svg { width:18px; height:18px; fill: currentColor; flex:none; margin-top:1px; }

/* Gate d'accès (mot de passe temporaire) — overlay plein écran */
.gate { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display:flex; align-items:center; justify-content:center; padding: 24px; }
.gate__card { width: 100%; max-width: 340px; background: var(--card); border:1px solid var(--line); border-radius: 16px; padding: 28px 22px; text-align:center; box-shadow: 0 12px 44px rgba(38,6,93,.14); }
.gate__brand { font-weight: 800; font-size: 1.4rem; color: var(--ink); letter-spacing:.5px; }
.gate__hint { color: var(--muted); font-size: .85rem; margin: 8px 0 16px; }
.gate input { width:100%; padding: 14px; font-size:16px; border:1.5px solid var(--line); border-radius: 10px; margin-bottom: 8px; background:#fff; color: var(--ink); box-sizing:border-box; }
.gate__msg { min-height: 18px; font-size:.8rem; color: var(--red); margin-bottom: 8px; }
.gate__gbtn { display:flex; justify-content:center; margin: 10px 0 6px; min-height: 44px; }
.sf-link { color: var(--cobalt); font-weight: 700; text-decoration: underline; }
.lbl-opt { color: var(--muted); font-weight: 400; font-size: .82em; }
input[data-field="docusignQuoteId"] { text-transform: uppercase; letter-spacing: .5px; }
input[data-field="docusignQuoteId"]:invalid { border-color: var(--red); }
.qref { font-weight: 700; color: var(--ink); letter-spacing: .3px; }
/* Aperçu de la proposition (slide 1280×720 mis à l'échelle) */
.prop-stage { width: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.prop-holder { transform-origin: top left; width: 1280px; }

/* ===== Focus accessible (clavier uniquement) — ADDITIF, anneau cobalt, 0 layout shift ===== */
/* :focus-visible = ne se déclenche qu'au clavier (Tab), jamais au clic/tactile. */
.btn:focus-visible, .iconbtn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
.chip:focus-visible, .sf-link:focus-visible, a:focus-visible,
.tab:focus-visible, .check:focus-visible, .check input:focus-visible,
.opp-card__main:focus-visible, .pl-acc__sum:focus-visible,
.quoterow:focus-visible, .pick:focus-visible, [data-action]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 0, 255, .35);
}
/* Champs de formulaire : bordure cobalt (déjà existante au focus) + anneau renforcé */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(76, 0, 255, .35);
}
/* Boutons à ombre portée : composer l'anneau AVEC l'ombre (sinon le bouton « s'aplatit ») */
.btn--primary:focus-visible { box-shadow: 0 0 0 3px rgba(76, 0, 255, .35), 0 4px 14px rgba(76, 0, 255, .28); }
.btn--accent:focus-visible  { box-shadow: 0 0 0 3px rgba(76, 0, 255, .35), 0 4px 14px rgba(255, 203, 0, .35); }
/* Composants sur fond foncé/coloré : liseré blanc interne + anneau cobalt pour contraster */
.appbar__btn:focus-visible, .fb__row:focus-visible,
.chip.is-active:focus-visible, .tab.is-active:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(76, 0, 255, .35);
}
/* Segments jointifs (.seg, sans gap) : anneau en inset pour rester entièrement visible */
.seg:focus-visible { outline: none; box-shadow: inset 0 0 0 3px rgba(76, 0, 255, .35); }
.seg.is-active:focus-visible { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px rgba(76, 0, 255, .35); }
/* Souris/tactile : conserver l'ancien focus discret des champs (.12), pas l'anneau fort */
input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible) {
  box-shadow: 0 0 0 3px rgba(76, 0, 255, .12);
}

/* ============================================================
   Comparaison côte à côte — 2 devis du même compte (paysage).
   L'éditeur (gauche, modifiable) + un devis de référence
   (droite, LECTURE SEULE). Masqué en portrait / écran étroit.
   ============================================================ */
.st-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Par défaut (portrait / étroit) : pas de colonne — le panneau de
   référence est masqué, un petit rappel invite à tourner l'écran. */
.cmp { display: block; }
.cmp__ref { display: none; }
.cmp__hint {
  display: block;
  background: var(--cobalt-pale);
  color: var(--ink);
  font-size: .8rem;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
  text-align: center;
}

.ref-head { border-bottom: 2px solid var(--cobalt); padding-bottom: 9px; margin-bottom: 11px; }
.ref-head__title { font-weight: 800; font-size: .95rem; color: var(--ink); line-height: 1.25; }
.ref-head__meta { font-size: .73rem; color: var(--muted); margin-top: 3px; }
.ref-item { margin-bottom: 13px; }
.ref-item__name { font-weight: 700; font-size: .84rem; color: var(--ink); line-height: 1.3; }
.ref-item__name .muted { font-weight: 400; color: var(--muted); }
.ref-totals { margin-top: 13px; padding-top: 11px; border-top: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.ref-totals .lp__v { font-weight: 600; color: var(--ink); }

/* Paysage + assez large (laptop, ou mobile en paysage ~915px) :
   2 colonnes. Le panneau de référence est sticky → reste visible
   pendant qu'on fait défiler l'éditeur. */
@media (orientation: landscape) and (min-width: 900px) {
  body.has-compare .app { max-width: 1360px; }
  .cmp { display: flex; gap: 18px; align-items: flex-start; }
  .cmp__hint { display: none; }
  .cmp__main { flex: 1 1 0; min-width: 0; }
  .cmp__ref {
    display: block;
    flex: 0 0 clamp(320px, 32%, 400px);
    position: sticky;
    top: calc(var(--safe-t) + 12px);
    max-height: calc(100dvh - var(--tabbar-h) - 24px);
    overflow-y: auto;
    background: var(--card);
    border: 1.5px solid var(--cobalt);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
  }
}