/* Kalpineo — identité propre (2026) : carnet d'installateur. Papier clair pointillé, encre sarcelle, soleil jaune.
   Chargée après app.css et pv.css : redéfinit les jetons et l'habillage, garde les composants. */
:root {
  --ink: #102a2b;
  --ink-2: #1c3d3e;
  --teal: #0b6e68;
  --teal-dark: #08524e;
  --turq: #0f8f86;
  --sun: #f4b43a;
  --sun-soft: #fff4dc;
  --leaf: #7fb23a;
  --green: #9bc53d;
  --bg: #f5f4ef;
  --paper-dot: #e4e2d8;
  --card: #ffffff;
  --text: #13292a;
  --muted: #5f7171;
  --line: #e2e3dc;
  --radius: 14px;
  --shadow: 0 1px 0 rgba(16, 42, 43, .04), 0 6px 22px -12px rgba(16, 42, 43, .22);
  --side-w: 236px;
}
body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500; letter-spacing: -.005em;
}
h1, h2, h3 { letter-spacing: -.02em; }
h1 { font-size: 1.75rem; font-weight: 800; color: var(--ink); }
h2 { font-size: 1.02rem; font-weight: 800; color: var(--ink); }
a { color: var(--teal); }

/* ---------- habillage : menu latéral ---------- */
body.shell { display: flex; min-height: 100vh; background-color: var(--bg);
  background-image: radial-gradient(var(--paper-dot) 1px, transparent 1.2px); background-size: 22px 22px; }
.side { position: sticky; top: 0; height: 100vh; flex: none; width: var(--side-w); overflow-y: auto; background: var(--ink); color: #dfeeee; display: flex; flex-direction: column;
  padding: 18px 14px 14px; z-index: 900; }
.side-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 2px 6px 14px; }
.side-brand b { display: block; font-size: 1.22rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.side-brand small { display: block; font-size: .68rem; color: #9fc0bf; font-weight: 600; margin-top: 3px; }
.side-company { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 16px; }
.side-logo { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.side-logo img { max-width: 26px; max-height: 26px; }
.side-initial { width: 30px; height: 30px; border-radius: 8px; background: var(--sun); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.side-company-name { font-size: .82rem; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-nav a { display: flex; align-items: center; gap: 11px; color: #c9dddd; text-decoration: none; padding: 9px 10px; border-radius: 10px; font-weight: 600; font-size: .93rem; position: relative; }
.side-nav a .ico { width: 18px; height: 18px; opacity: .85; }
.side-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.side-nav a.active { background: rgba(255,255,255,.1); color: #fff; }
.side-nav a.active::before { content: ''; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--sun); }
.side-nav a.active .ico { color: var(--sun); opacity: 1; }
.side-sep { margin: 16px 10px 4px; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: #7fa3a2; font-weight: 700; }
.side-foot { display: flex; flex-direction: column; gap: 10px; }
.side-mega { display: flex; align-items: center; gap: 10px; width: 100%; background: var(--sun); color: var(--ink); border: 0; border-radius: 12px;
  padding: 10px 12px; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; }
.side-mega .ico { width: 18px; height: 18px; }
.side-mega:hover { filter: brightness(1.05); }
.side-user { display: flex; align-items: center; gap: 6px; border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.side-user a { flex: 1; display: flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; font-size: .86rem; min-width: 0; padding: 4px; border-radius: 10px; }
.side-user a:hover, .side-user a.active { background: rgba(255,255,255,.06); }
.side-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side .avatar { background: var(--sun); color: var(--ink); flex: none; }
.side-logout { background: none; border: 0; color: #9fc0bf; cursor: pointer; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.side-logout:hover { color: #fff; background: rgba(255,255,255,.08); }
.shell-main { flex: 1; min-width: 0; }
.shell .container { max-width: 1240px; padding: 26px 28px 80px; }
.mtop { display: none; }
.side-backdrop { display: none; }
.hv-bar { background: var(--sun-soft); border-bottom: 1px solid #f1d79a; color: #5b4300; padding: 9px 28px; font-size: .86rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hv-bar .ico { width: 16px; height: 16px; }
.hv-bar a { font-weight: 800; color: #5b4300; }
@media (max-width: 900px) {
  .side { position: fixed; inset: 0 auto 0 0; height: auto; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.side-open .side { transform: none; }
  body.side-open .side-backdrop { display: block; position: fixed; inset: 0; background: rgba(16,42,43,.4); z-index: 850; }
  .shell-main { margin-left: 0; }
  .mtop { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 800; background: var(--ink); color: #fff; padding: 10px 16px; }
  .mtop-menu { background: none; border: 0; color: #fff; font-size: 1.3rem; cursor: pointer; }
  .mtop-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 800; }
  .shell .container { padding: 18px 16px 80px; }
  .hv-bar { padding: 9px 16px; }
}

/* ---------- composants ---------- */
.card { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn { border-radius: 10px; font-weight: 700; border-color: var(--line); color: var(--ink-2); }
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn-primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); color: #fff; }
.btn-sun { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.btn-sun:hover { filter: brightness(1.04); color: var(--ink); border-color: var(--sun); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn .ico { width: 16px; height: 16px; }
input, select, textarea { border-radius: 10px; border-color: #d9dbd3; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(15,143,134,.18); border-color: var(--turq); }
.page-head h1 { font-size: 1.85rem; }
.subtitle { color: var(--muted); }
.badge-teal { background: #dcefed; color: var(--teal-dark); }
.badge-sun { background: var(--sun-soft); color: #7a5600; }
.subtabs { border-bottom-color: var(--line); }
.table thead th { color: #6b7b7a; }
.flash { border-radius: 12px; }
.kpi { border-radius: var(--radius); }
.eyebrow { color: var(--teal); }

/* ---------- mégaphone ---------- */
.mega-fab { position: fixed; right: 22px; bottom: 22px; z-index: 700; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--sun); color: var(--ink);
  box-shadow: 0 8px 24px -6px rgba(16,42,43,.45); cursor: pointer; display: grid; place-items: center; }
.mega-fab .ico { width: 24px; height: 24px; }
.mega-fab:hover { transform: translateY(-1px) rotate(-6deg); }
body.shell .mega-fab { display: none; }
@media (max-width: 900px) { body.shell .mega-fab { display: grid; } }
body.full .mega-fab { right: auto; left: 14px; bottom: 14px; width: 44px; height: 44px; }
.mega { width: min(560px, calc(100vw - 32px)); }
.mega h2 { display: flex; align-items: center; gap: 8px; }
.mega h2 .ico { width: 20px; height: 20px; color: var(--teal); }
.mega-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.mega-kinds label { cursor: pointer; }
.mega-kinds input { position: absolute; opacity: 0; pointer-events: none; }
.mega-kinds span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-weight: 700; font-size: .85rem; background: #fff; }
.mega-kinds input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.mega-kinds input:focus-visible + span { outline: 3px solid rgba(15,143,134,.3); }
.mega-label, .mega-file { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 10px; }
.mega-label textarea, .mega-file input { margin-top: 4px; }
.mega-msg { min-height: 1.2em; color: var(--teal); font-weight: 600; }
.mega-done { text-align: center; padding: 24px; }
.mega-big { font-size: 1.6rem; font-weight: 800; margin: 0 0 6px; }

/* ---------- accueil ---------- */
.hello { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.hello h1 { margin: 0; font-size: 2rem; }
.hello p { margin: 4px 0 0; color: var(--muted); }
.quick { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 18px; }
.quick-new { background: var(--ink); color: #e9f3f2; border-radius: 18px; padding: 22px 24px; position: relative; overflow: hidden; }
.quick-new h2 { color: #fff; font-size: 1.25rem; margin-bottom: 4px; }
.quick-new p { margin: 0 0 16px; color: #a9c6c5; max-width: 34ch; }
.quick-new::after { content: ''; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, var(--sun) 0 34%, rgba(244,180,58,.25) 35% 52%, transparent 53%); }
.quick-search { display: flex; gap: 8px; }
.quick-search input { background: rgba(255,255,255,.95); }
.quick-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qs { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow); }
.qs span { display: block; font-size: .78rem; font-weight: 700; color: var(--muted); }
.qs b { display: block; font-size: 1.7rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1.1; margin-top: 4px; }
.qs small { color: var(--muted); font-weight: 600; }
.qs.sun { background: var(--sun-soft); border-color: #f3dfae; }
.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.pcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: var(--text); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; transition: transform .12s ease, border-color .12s ease; }
.pcard:hover { transform: translateY(-2px); border-color: #c5d8d6; }
.pcard-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.pcard-top strong { font-size: 1rem; color: var(--ink); line-height: 1.25; }
.pcard-city { font-size: .8rem; color: var(--muted); }
.pcard-kwc { font-size: 1.35rem; font-weight: 800; color: var(--teal); letter-spacing: -.02em; }
.pcard-kwc small { font-size: .75rem; color: var(--muted); font-weight: 700; }
.pcard-steps { display: flex; gap: 4px; }
.pcard-steps i { flex: 1; height: 5px; border-radius: 3px; background: #e8e9e2; }
.pcard-steps i.on { background: var(--turq); }
.pcard-steps i.sun { background: var(--sun); }
.pcard-foot { display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); font-weight: 600; }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.feed li:last-child { border-bottom: 0; }
.feed .dot { width: 30px; height: 30px; flex: none; border-radius: 50%; background: #e3f1ef; color: var(--teal); display: grid; place-items: center; }
.feed .dot.sun { background: var(--sun-soft); color: #9a6a00; }
.feed .dot .ico { width: 15px; height: 15px; }
.feed time { display: block; color: var(--muted); font-size: .76rem; }
.empty-hint { color: var(--muted); font-size: .88rem; }
@media (max-width: 1000px) { .quick, .home-grid { grid-template-columns: 1fr; } }

/* ---------- projets (liste) ---------- */
.plist-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.plist-head form { flex: 1 1 320px; display: flex; gap: 8px; }
.step-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.step-dots i { width: 18px; height: 5px; border-radius: 3px; background: #e5e6df; }
.step-dots i.on { background: var(--turq); }
.step-dots i.sun { background: var(--sun); }

/* ---------- projet : parcours ---------- */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0 0 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.journey a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; text-decoration: none; color: var(--text); border-right: 1px solid var(--line); }
.journey a:last-child { border-right: 0; }
.journey a:hover { background: #fafaf6; }
.journey .n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #eeefe8; color: var(--muted); }
.journey .done .n { background: var(--turq); color: #fff; }
.journey .sun .n { background: var(--sun); color: var(--ink); }
.journey b { display: block; font-size: .88rem; }
.journey small { display: block; font-size: .74rem; color: var(--muted); }
@media (max-width: 760px) { .journey { grid-template-columns: 1fr 1fr; } .journey a:nth-child(2) { border-right: 0; } .journey a:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- lien client ---------- */
.share-card { border: 1px solid #f0dca8; background: linear-gradient(180deg, #fffaf0, #fff); }
.share-card h2 { display: flex; align-items: center; gap: 8px; }
.share-card h2 .ico { color: #b07c00; }
.share-studies { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.share-studies label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: .88rem; margin: 0; }
.share-studies input { width: auto; }
.share-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 10px; background: #fff; }
.share-row.off { opacity: .6; }
.share-url { display: flex; gap: 6px; margin: 6px 0; }
.share-url input { font-size: .8rem; background: #f7f7f2; }
.share-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); font-weight: 600; }
.share-meta .hot { color: #8a5d00; background: var(--sun-soft); padding: 1px 8px; border-radius: 999px; }

/* ---------- hypervision ---------- */
.adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.adm-table td small { display: block; color: var(--muted); }
.adm-new { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.adm-new label { margin: 0 !important; }
.created-box { background: var(--sun-soft); border: 1px solid #f1d79a; border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.created-box code { font-size: 1rem; background: #fff; padding: 2px 8px; }
.fb-item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: #fff; }
.fb-item.done { opacity: .65; }
.fb-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.fb-msg { white-space: pre-wrap; margin: 0 0 8px; }
.fb-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fb-form select { width: auto; }
.fb-form input { flex: 1 1 240px; width: auto; }
.fb-note { background: #f2f7f6; border-radius: 10px; padding: 8px 10px; font-size: .86rem; margin-top: 6px; }
@media (max-width: 900px) { .adm-kpis { grid-template-columns: 1fr 1fr; } .adm-new { grid-template-columns: 1fr; } }

/* ---------- connexion ---------- */
body.auth-split { display: grid; grid-template-columns: minmax(320px, 0.9fr) 1.1fr; min-height: 100vh; background: var(--bg); }
.auth-side { background: var(--ink); color: #dcebea; display: flex; align-items: center; padding: 48px; position: relative; overflow: hidden; }
.auth-side::after { content: ''; position: absolute; right: -90px; bottom: -90px; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0 30%, rgba(244,180,58,.22) 31% 50%, transparent 51%); }
.auth-side-in { position: relative; z-index: 1; max-width: 420px; }
.auth-side h2 { color: #fff; font-size: 2.2rem; margin: 14px 0 6px; }
.auth-side p { font-size: 1.05rem; color: #b9d3d2; }
.auth-side ul { padding-left: 18px; color: #dcebea; line-height: 1.9; }
.auth-side small { color: #8fb1b0; }
.auth-split .auth-wrap { min-height: 100vh; }
.auth-split .auth-card { border-radius: 20px; border: 1px solid var(--line); box-shadow: var(--shadow); }
@media (max-width: 860px) { body.auth-split { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- paramètres : logo ---------- */
.logo-card { display: flex; gap: 18px; align-items: center; }
.logo-prev { width: 150px; height: 90px; flex: none; overflow: hidden; border: 1px dashed #cfd3c8; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px; box-sizing: border-box; }
.logo-prev img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.logo-prev span { color: var(--muted); font-size: .85rem; }
.logo-card h2 { margin-bottom: 2px; }
.logo-card label.btn { cursor: pointer; }
body.auth-split { place-items: stretch; }
.auth-split .auth-wrap { display: grid; place-items: center; }
.auth-split .auth-card { width: 100%; }
.adm-new .check { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.adm-new .check input { width: auto; margin: 0; }
.table-wrap > h2 { padding: 4px 4px 8px; }
.mt-6 { margin-top: 6px !important; }
.mb-10 { margin-bottom: 10px; }
.self-end { align-self: end; }
.adm-full { grid-column: 1 / -1; }

/* ---------- pré-étude express */
.btn-ghost-light { background: transparent; border-color: rgba(255,255,255,.35); color: #e9f3f2; }
.btn-ghost-light:hover { border-color: #fff; color: #fff; }
.express .card { margin-bottom: 14px; }
.express h2 { display: flex; align-items: center; gap: 10px; }
.xp-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sun); color: var(--ink); font-size: .85rem; font-weight: 800; }
.express .chips { gap: 8px; margin-bottom: 10px; }
.express .chip span { padding: 8px 14px; font-size: .88rem; border-radius: 999px; color: var(--text); }
.express .chip input:checked + span { background: var(--teal); border-color: var(--teal); color: #fff; }
.seg-radio { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; align-self: flex-end; }
.seg-radio label { margin: 0 !important; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-radio span { display: block; padding: 9px 16px; font-weight: 700; color: var(--muted); }
.seg-radio input:checked + span { background: var(--teal); color: #fff; }
.seg-radio input:focus-visible + span { outline: 2px solid var(--sun); outline-offset: -2px; }
.unit-in { display: flex; align-items: center; gap: 6px; }
.unit-in input { flex: 1; min-width: 0; }
.unit-in span { color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.xp-auto { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.xp-scale span { padding: 9px 15px; }
.xp-map .geo-map { min-height: 300px; }
.xp-ev[hidden] { display: none; }
.xp-ev { max-width: 680px; }
.xp-go { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 6px 0 40px; }

/* ---------- demandes du simulateur (accueil) */
.leads { margin-bottom: 18px; border-left: 4px solid var(--sun); }
.leads h2 { display: flex; align-items: center; gap: 8px; }
.lead-list { list-style: none; margin: 0; padding: 0; }
.lead-list li { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.lead-list li:first-child { border-top: 0; }
.lead-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ---------- offres types (paramètres) */
.offer-grid { display: grid; gap: 6px; max-width: 460px; margin: 10px 0 16px; }
.offer-head, .offer-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.offer-head span { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.embed-box { background: var(--sun-soft); border-radius: 12px; padding: 12px 14px; margin: 10px 0 14px; }
.embed-box p { margin: 8px 0 0; }

/* ---------- pré-étude : déroulé dans le dimensionnement */
.xp-run { position: absolute; inset: 0; z-index: 900; background: rgba(16,42,43,.45); display: grid; place-items: center; padding: 16px; }
.xp-run[hidden] { display: none; }
.xp-box { background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 22px 24px; width: min(560px, 100%); max-height: calc(100% - 20px); overflow: auto; }
.xp-box h2 { margin: 0 0 12px; font-size: 1.2rem; }
.xp-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.xp-steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); font-weight: 600; }
.xp-steps li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: 0 0 auto; }
.xp-steps li.run { color: var(--ink); }
.xp-steps li.run::before { border-color: var(--sun); border-top-color: transparent; animation: xpspin .8s linear infinite; }
.xp-steps li.ok { color: var(--ink); }
.xp-steps li.ok::before { background: var(--teal); border-color: var(--teal); box-shadow: inset 0 0 0 3px #fff; }
.xp-steps li.ko::before { background: #c0392b; border-color: #c0392b; }
@keyframes xpspin { to { transform: rotate(360deg); } }
.xp-msg { font-size: .9rem; margin: 6px 0 12px; }
.xp-offers { display: grid; gap: 8px; margin: 10px 0 14px; }
.xp-offer { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.xp-offer.rec { border-color: var(--sun); background: var(--sun-soft); }
.xp-offer b { font-size: 1rem; }
.xp-offer small { color: var(--muted); grid-column: 1 / -1; }
.xp-link { display: flex; gap: 6px; margin-bottom: 12px; }
.xp-link input { flex: 1; min-width: 0; }
.sz-toast.xp-bar { top: 112px; bottom: auto; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: default; }
.xp-eq { display: grid; gap: 10px; }
.xp-eq-g { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: start; }
.xp-eq-t { font-size: .8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-top: 9px; }
.xp-eq .chips { margin-bottom: 0; }
@media (max-width: 640px) { .xp-eq-g { grid-template-columns: 1fr; gap: 4px; } .xp-eq-t { padding-top: 0; } }
.xp-box.wide { width: min(980px, 100%); }
.xp-filt { margin: 4px 0 8px; display: inline-flex; }
.xp-table-wrap { overflow-x: auto; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; }
.xp-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.xp-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; background: #f7f7f3; white-space: nowrap; }
.xp-table td { padding: 8px 10px; border-top: 1px solid var(--line); white-space: nowrap; }
.xp-table tbody tr { cursor: pointer; }
.xp-table tbody tr:hover { background: #fafaf6; }
.xp-table tr.rec { background: var(--sun-soft); }
.xp-table tr[hidden] { display: none; }
.xp-table td small { color: var(--teal); font-weight: 700; }
.xp-table td small.d { display: block; color: var(--muted); font-weight: 500; }
.xp-table td.pb { font-weight: 800; color: var(--teal); }
.xp-table input { width: 18px; height: 18px; accent-color: var(--teal); }
.kit-wrap { overflow-x: auto; margin: 10px 0 6px; }
.kit-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.kit-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 4px 6px; }
.kit-table th small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.kit-table td { padding: 4px 6px; vertical-align: middle; }
.kit-table td input, .kit-table td select { width: 100%; }
.kit-table .set-input { display: flex; align-items: center; gap: 4px; }
.kit-table .kit-qty { width: 56px; }
.kit-table td.c { text-align: center; }
.kit-table td.c input { width: 18px; height: 18px; accent-color: var(--teal); }
.xp-box.wide .xp-steps { display: none; }
.kit-table select { min-width: 170px; } .kit-table td:nth-child(2) input { min-width: 150px; }
.kit-table td.kit-total { font-weight: 800; white-space: nowrap; } .kit-table select.kit-qty { min-width: 90px; width: 90px; }
.kit-table td:nth-child(5) input { min-width: 96px; } .kit-table select.kit-qty { min-width: 104px; width: 104px; } .kit-table td:nth-child(1) input { min-width: 56px; }
.xp-custom { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; background: #f7f7f3; border: 1px dashed #cfd6d2; border-radius: 12px; padding: 10px 12px; margin: 0 0 14px; }
.xp-custom > b { flex-basis: 100%; font-size: .85rem; }
.xp-custom label { font-size: .78rem; font-weight: 700; margin: 0; }
.xp-custom label input, .xp-custom label select { margin-top: 3px; }
.xp-custom label:nth-of-type(1) input { width: 70px; }
.xp-custom label:nth-of-type(3) input { width: 100px; }
.xp-custom .grow { flex: 1 1 140px; }
.xp-cact { display: flex; gap: 6px; }
.xp-cmsg { flex-basis: 100%; }
.xp-cmsg:empty { display: none; }
.xp-table tr.custom td:nth-child(2) b { color: var(--teal); }
.xp-custom select { width: auto; min-width: 90px; }
.xp-more { margin: -6px 0 14px; }

/* listes longues : recherche + défilement, en-têtes collés */
.list-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.list-tools input[type=search] { flex: 1 1 260px; max-width: 420px; }
.list-tools .check { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.scroll-list { max-height: 360px; overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.scroll-list.tall { max-height: min(620px, 70vh); }
.scroll-list table { margin: 0; }
.scroll-list thead th { position: sticky; top: 0; z-index: 2; background: #f7f7f3; }
.scroll-list tr[hidden] { display: none; }
.table-wrap > .list-tools { padding: 12px 14px 0; } .table-wrap > .scroll-list { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.tag-ref { background: #e6f3f2; color: var(--teal); }

/* ---------- version et notes de version */
.side-version { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7fa3a2; text-decoration: none;
  font-size: .72rem; font-weight: 600; padding: 2px 4px; border-radius: 8px; }
.side-version:hover, .side-version.active { color: #fff; }
.side-version span { color: #9fc0bf; }
.side-version .side-new { background: var(--sun); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-weight: 800; font-size: .66rem; }
.cl-list { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.cl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl-ver { font-weight: 800; color: var(--teal, #1f5e5b); font-size: .85rem; }
.cl-item h2 { margin: 6px 0 8px; font-size: 1.08rem; }
.cl-item ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cl-item li { line-height: 1.45; }

/* ---------- logo Kalpineo */
.side-brand { flex-direction: column; align-items: flex-start; gap: 4px; }
.side-brand .side-wordmark { width: 170px; height: auto; display: block; }
.side-brand small { margin-top: 0; padding-left: 2px; }
.mtop-brand img { height: 24px; width: auto; display: block; }
.auth-wordmark { margin: 0 0 14px; }
.auth-wordmark img { width: 260px; max-width: 100%; height: auto; display: block; }
.auth-brand .auth-logo { width: 190px; height: auto; display: block; margin-bottom: 4px; }

/* ---------- dimensionnement : carnet Kalpineo (rail d'outils à gauche, carte au centre, carnet de réglages à droite) ---------- */
.sz { --rail: 92px; --topH: 64px; --panelW: 360px;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--panelW); grid-template-rows: var(--topH) minmax(0, 1fr); background: var(--bg); }
.sz-rail { grid-column: 1; grid-row: 1 / -1; background: var(--ink); display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 12px 8px; z-index: 700; overflow-y: auto; }
.sz-home { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #9fc0bf; text-decoration: none; font-size: .66rem; font-weight: 700; padding: 6px 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; }
.sz-home img { width: 34px; height: 34px; }
.sz-home:hover { color: #fff; }
.sz-top { grid-column: 2 / -1; grid-row: 1; background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); padding: 0 18px; gap: 18px; }
.sz-title strong { font-size: 1.02rem; font-weight: 800; color: var(--ink); }
.sz-title span { color: var(--muted); opacity: 1; }
.sz-mode select { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; }
.sz-status { color: var(--muted); opacity: 1; margin-left: 0; }
.sz-status.err { color: #b4321f; }
.sz-top .btn-primary { margin-left: auto; background: var(--green); border-color: var(--green); color: var(--ink); border-radius: 10px; }
.sz-steps { display: flex; list-style: none; margin: 0 0 0 auto; padding: 0; gap: 4px; }
.sz-steps li a, .sz-steps li span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.sz-steps li b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line); font-size: .7rem; }
.sz-steps li.done b { background: var(--turq); border-color: var(--turq); color: #fff; }
.sz-steps li.cur span { background: var(--sun-soft); color: var(--ink); }
.sz-steps li.cur b { background: var(--sun); border-color: var(--sun); color: var(--ink); }
.sz-steps li a:hover { background: var(--bg); color: var(--ink); }
.sz-steps + .sz-status { margin-left: 0; }

/* rail d'outils */
.sz-toolbar { position: static; transform: none; flex-direction: column; align-items: stretch; gap: 4px; background: none; box-shadow: none; padding: 0; border-radius: 0; }
.sz-toolbar .tb { flex-direction: column; gap: 3px; padding: 9px 4px 8px; border-radius: 12px; color: #cfe1e0; font-size: 1.15rem; line-height: 1; white-space: normal; text-align: center; }
.sz-toolbar .tb span { font-size: .66rem; font-weight: 700; line-height: 1.15; }
.sz-toolbar .tb:hover { background: rgba(255,255,255,.08); color: #fff; }
.sz-toolbar .tb.active { background: var(--sun); color: var(--ink); }
.sz-toolbar .tb-group { display: flex; flex-direction: column; }
.sz-toolbar .tb-menu { bottom: auto; top: 0; left: calc(100% + 14px); }
.sz-toolbar .tb-hist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.sz-toolbar .tb-hist .tb { padding: 8px 0; font-size: 1rem; }

/* carte : barre de vue en haut à gauche, messages centrés sur la carte */
.sz-map { grid-column: 2; grid-row: 2; }
.sz-3d { grid-column: 2; grid-row: 2; }
.sz-viewbar { left: calc(var(--rail) + 16px); top: calc(var(--topH) + 14px); transform: none; border-radius: 12px; box-shadow: var(--shadow), 0 2px 10px rgba(16,42,43,.18); }
.seg-btns button.active { background: var(--ink); }
.sz-toast { left: calc(var(--rail) + (100% - var(--rail) - var(--panelW)) / 2); bottom: 24px; background: var(--ink); }
.sz-3d-ui { left: calc(var(--rail) + 16px); bottom: 16px; }

/* carnet de droite */
.sz-panel { grid-column: 3; grid-row: 2; background-color: var(--bg); background-image: radial-gradient(var(--paper-dot) 1px, transparent 1.2px); background-size: 22px 22px;
  border-right: 0; border-left: 1px solid var(--line); padding: 14px; }
.sz-estimate { position: static; width: auto; margin-bottom: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sz-estimate .est-big strong { color: var(--ink); }
.sz-estimate .est-head { padding-top: 12px; }
.sz-tabs { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; margin-bottom: 12px; }
.sz-tabs button { border: 0; border-radius: 9px; margin: 0; padding: 7px 4px; }
.sz-tabs button.active { background: var(--ink); color: #fff; }
.sz-panel section { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); }
.sz-panel section[hidden] { display: none; }

@media (max-width: 1100px) { .sz { --panelW: 310px; } .sz-steps { display: none; } }
@media (max-width: 800px) {
  .sz { --rail: 0px; --topH: 56px; grid-template-columns: 1fr; grid-template-rows: var(--topH) minmax(0, 1fr) auto 42vh; }
  .sz-top { grid-column: 1; }
  .sz-map, .sz-3d { grid-column: 1; grid-row: 2; }
  .sz-rail { grid-column: 1; grid-row: 3; flex-direction: row; overflow-x: auto; padding: 6px; }
  .sz-home { flex-direction: row; border: 0; padding: 0 6px; margin: 0; }
  .sz-toolbar { flex-direction: row; }
  .sz-toolbar .tb-hist { display: flex; margin: 0; padding: 0; border: 0; }
  .sz-panel { grid-column: 1; grid-row: 4; border-left: 0; border-top: 1px solid var(--line); }
  .sz-viewbar { left: 10px; top: calc(var(--topH) + 10px); }
  .sz-toast { left: 50%; }
}
.sz-top { min-width: 0; }
.sz-title { flex: 0 1 220px; min-width: 120px; }
.sz-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sz-mode { flex: 0 1 230px; min-width: 150px; }
.sz-mode select { width: 100%; max-width: none; }
.sz-top .btn-primary { white-space: nowrap; flex: none; }
.sz-status { flex: none; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1640px) { .sz-steps li:not(.cur) a { font-size: 0; gap: 0; padding: 6px 4px; } .sz-steps li:not(.cur) a b { font-size: .7rem; } }
@media (max-width: 800px) {
  .sz-top { gap: 8px; padding: 0 10px; }
  .sz-mode, .sz-status { display: none; }
  .sz-top .btn-primary { padding: 8px 10px; font-size: .8rem; }
  .sz-toolbar .tb-menu { top: auto; bottom: calc(100% + 8px); left: 0; }
  .sz-rail { position: relative; }
}
/* l'indicateur d'enregistrement ne doit pas faire bouger le bandeau */
.sz-status { flex: none; width: 110px; max-width: 110px; text-align: right; }
.sz-steps { flex: none; }
.sz-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* mode d'exploitation : la liste prend la place de son texte (le titre se raccourcit d'abord) */
.sz-mode { flex: none; min-width: 0; }
.sz-mode select { width: 360px; min-width: 0; padding-right: 30px; }
.sz-title { flex: 1 1 auto; min-width: 140px; }
@media (max-width: 1250px) { .sz-mode select { width: 330px; } }
@media (max-width: 1100px) { .sz-mode select { width: 300px; } }
/* carte « posée » sur le carnet : fond papier pointillé, cadre arrondi */
.sz { background-color: var(--bg); background-image: radial-gradient(var(--paper-dot) 1px, transparent 1.2px); background-size: 22px 22px; }
.sz-map, .sz-3d { margin: 14px 0 14px 14px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(16,42,43,.45), 0 1px 0 rgba(16,42,43,.05); }
.sz-panel { background: transparent; border-left: 0; padding: 14px 14px 14px 14px; }
.sz-viewbar { left: calc(var(--rail) + 28px); top: calc(var(--topH) + 28px); }
.sz-3d-ui { left: calc(var(--rail) + 28px); bottom: 30px; }
.sz-toast { bottom: 38px; }
@media (max-width: 800px) {
  .sz-map, .sz-3d { margin: 8px; border-radius: 14px; }
  .sz-viewbar { left: 18px; top: calc(var(--topH) + 18px); }
}
/* bouton « idée, bug » centré en bas du rail d'outils (rail 92 px, bouton 44 px) */
body.full:has(.sz-rail) .mega-fab { left: calc(var(--rail, 92px) / 2 - 22px); left: 24px; bottom: 16px; }
@media (max-width: 800px) { body.full:has(.sz-rail) .mega-fab { left: 14px; } }
/* carnet : bâtiments et pans lisibles (un seul pan déplié, réglages rangés) */
.sz-panel .pan-card { border-radius: 12px; background: #fff; }
.sz-panel .pan-card.bld { border-style: solid; }
.sz-panel .pan-card.bld.sel { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft); }
.sz-panel .pan-head { background: #fff; padding: 10px 12px; }
.sz-panel .pan-card.bld > .pan-head { background: var(--bg); }
.sz-panel .pan-card.sel > .pan-head { background: var(--sun-soft); }
.sz-panel .pans-in { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.sz-panel .pans-in .pan-card { margin: 0; border-left: 3px solid var(--line); }
.sz-panel .pans-in .pan-card.sel { border-left-color: var(--sun); border-color: #f1d79c; border-left-color: var(--sun); }
.sz-panel .pans-in .pan-head { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px 10px; }
.ph-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ph-main strong { font-size: .88rem; }
.ph-main .pan-kwc { font-size: .78rem; white-space: nowrap; }
.ph-sub { font-size: .74rem; color: var(--muted); font-weight: 600; }
.sz-panel .pan-body { padding: 10px 12px 12px; }
.sz-panel .pans-in .pan-body { border-top: 1px solid #f1e5c4; background: #fffdf7; }
.bld-more { margin: 0 0 4px; border-top: 0; padding-top: 0; }
.bld-more[open] { padding-bottom: 8px; border-bottom: 1px dashed var(--line); }
.sz-panel .pan-facts { margin: 8px 0 2px; }

/* ---------- prix et rentabilité : réglages à gauche, résultats à droite ---------- */
.journey a.cur { background: var(--sun-soft); box-shadow: inset 0 -3px 0 var(--sun); }
.journey a.cur b { color: var(--ink); }
.ana { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 18px; align-items: start; }
.ana-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.ana-form { margin: 0; }
.ana-form h2 { margin-bottom: 4px; }
.ana-form label { display: block; margin-bottom: 10px; }
.ana-form select, .ana-form input { width: 100%; }
.ana-sec { margin: 14px 0 8px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--turq); }
.ana-price input { font-size: 1.15rem; font-weight: 800; padding: 10px 12px; }
.ana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.ana-grid .full { grid-column: 1 / -1; }
.ana-grid-q { grid-template-columns: minmax(0, 1fr) 76px; }
.ana-form details.more { margin: 6px 0 10px; }
.ana-form .actions { margin-top: 8px; }
.ana-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ana-main > .card, .ana-main > .grid-halves, .ana-main > .kpis { margin: 0; }
.ana-roi { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 18px; align-items: center; background: var(--ink); color: #fff; border: 0; }
.ana-roi-big span { display: block; font-size: .78rem; font-weight: 700; color: #9fc0bf; text-transform: uppercase; letter-spacing: .06em; }
.ana-roi-big strong { display: block; font-size: 3rem; line-height: 1.05; font-weight: 800; color: var(--sun); letter-spacing: -.03em; }
.ana-roi-big strong small { font-size: 1.1rem; color: #fff; }
.ana-roi-big em { font-style: normal; font-size: .82rem; color: #cfe1e0; }
.ana-roi-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ana-roi-list > div { background: rgba(255,255,255,.07); border-radius: 12px; padding: 12px; }
.ana-roi-list span { display: block; font-size: .74rem; color: #9fc0bf; font-weight: 700; }
.ana-roi-list strong { display: block; font-size: 1.3rem; font-weight: 800; color: #fff; }
.ana-roi-list em { font-style: normal; font-size: .72rem; color: #9fc0bf; }
.ana-roi-empty { display: flex; flex-direction: column; gap: 4px; background: var(--sun-soft); color: var(--ink); border: 1px dashed var(--sun); grid-template-columns: none; }
.ana-roi-empty span { color: var(--muted); }
.ana-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ana-kpis .kpi { background: #fff; border: 1px solid var(--line); }
.ana-kpis .kpi strong { color: var(--ink); }
.ana-table > summary { list-style: none; cursor: pointer; }
.ana-table > summary::-webkit-details-marker { display: none; }
.ana-table > summary h2 { display: inline; }
.ana-table > summary::after { content: ' ▸'; color: var(--turq); font-weight: 800; }
.ana-table[open] > summary::after { content: ' ▾'; }
.ana-table[open] > summary { margin-bottom: 10px; }
.ana-facts .facts-wide { grid-template-columns: minmax(120px, auto) minmax(0, 1fr); }
.ana-facts .facts-wide dt { white-space: nowrap; }
@media (max-width: 1150px) { .ana { grid-template-columns: 1fr; } .ana-side { position: static; max-height: none; } .ana-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ana-roi { grid-template-columns: 1fr; } .ana-roi-list { grid-template-columns: 1fr; } .ana-facts .facts-wide dt { white-space: normal; } }
@media print { .ana { grid-template-columns: 1fr; } .ana-side { display: none; } .ana-table { display: block; } }
.ana-scroll { overflow-x: auto; max-width: 100%; }
.ana-main .card, .ana-main .grid-halves > * { min-width: 0; }
.ana-table { overflow: hidden; }
.ana-table { padding: 16px 18px !important; }
.ana-table .table th { white-space: normal; font-size: .66rem; padding: 8px 8px; vertical-align: bottom; }
.ana-table .table td { padding: 7px 8px; font-size: .84rem; }
.ana-facts { grid-template-columns: 1fr; }
.ana-facts .facts-wide { grid-template-columns: minmax(170px, auto) minmax(0, 1fr); }
.ana-facts .facts-wide dd { text-align: left; }
/* barre d'étapes compacte dans le bandeau du dimensionnement */
.journey-mini { display: flex; flex: none; margin: 0 0 0 auto; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 4px; }
.journey-mini a { padding: 5px 10px 5px 5px; border: 0 !important; border-radius: 99px; gap: 7px; }
.journey-mini a.cur { box-shadow: none; }
.journey-mini .n { width: 24px; height: 24px; font-size: .74rem; }
.journey-mini b { font-size: .8rem; white-space: nowrap; }
.journey-mini small { display: none; }
@media (max-width: 1640px) { .journey-mini a:not(.cur) > span:last-child { display: none; } .journey-mini a:not(.cur) { padding: 5px; } }
@media (max-width: 1100px) { .sz-top .journey-mini { display: none; } }
.sz-home { cursor: default; }
.sz-home:hover { color: #9fc0bf; }
.sz-top .sz-back { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 1.15rem; font-weight: 800; text-decoration: none; padding: 0; }
.sz-top .sz-back:hover { background: #fff; border-color: var(--turq); color: var(--teal); }
.sz-top { gap: 14px; }
.sz-home img { width: 37px; height: 37px; }   /* même taille que le K du logo complet du menu (170 × 37 px) */
.sz-home { font-size: .72rem; }
/* téléphone (pas tablette) : consultation seulement — ni barre de tracé, ni réglage de la course du soleil en 3D */
@media (max-width: 600px) {
  .sz { grid-template-rows: var(--topH) minmax(0, 1fr) 42vh; }
  .sz-rail, .sz-3d-ui, .cad-shift, .btn-lidar-vol { display: none !important; }
  .sz-panel { grid-row: 3; }
}
/* icônes SVG des outils du dimensionnement : encre = couleur du texte, accents soleil / turquoise / gris */
.sz-ic { width: 30px; height: 30px; display: block; margin: 0 auto; overflow: visible; }
.sz-ic .i-ink { fill: currentColor; }
.sz-ic .i-ink-s { stroke: currentColor; }
.sz-ic .i-acc { fill: var(--sun); }
.sz-ic .i-acc-s { stroke: var(--sun); }
.sz-ic .i-soft { fill: rgba(242, 182, 60, .18); }
.sz-ic .i-teal { fill: #3fb8ac; }
.sz-ic .i-grey { fill: #9db2b6; }
.sz-ic .i-grey-s { stroke: #9db2b6; }
.sz-ic .i-outline { stroke: var(--ink); stroke-width: .8; }
.sz-toolbar .tb.active .i-acc { fill: var(--ink); }
.sz-toolbar .tb.active .i-acc-s { stroke: var(--ink); }
.sz-toolbar .tb.active .i-soft { fill: rgba(16, 42, 43, .12); }
.sz-toolbar .tb.active .i-teal { fill: var(--teal); }
.sz-toolbar .tb.active .i-grey { fill: #5d7b7d; }
.sz-toolbar .tb.active .i-grey-s { stroke: #5d7b7d; }
.sz-toolbar .tb.active .i-outline { stroke: var(--sun); }
.sz-toolbar .tb-hist .sz-ic { width: 22px; height: 22px; }
.sz-toolbar .tb:disabled .sz-ic { opacity: .4; }
/* icônes de l'application : trait = couleur du texte, accent soleil, teinte douce (même charte que le dimensionnement) */
.ico { --ico-acc: var(--sun); }
.ico .a { fill: var(--ico-acc); stroke: none; }
.ico .as { stroke: var(--ico-acc); }
.ico .s { fill: currentColor; fill-opacity: .16; stroke: none; }
/* fonds jaunes ou colorés : l'accent passe en blanc / encre pour rester visible */
.btn-sun .ico, .badge-sun .ico { --ico-acc: #fff; }
.side-nav a.active .ico { color: #fff; --ico-acc: var(--sun); }
.btn-primary .ico, .btn-danger .ico { --ico-acc: var(--sun); }
.btn-primary .ico .s, .btn-danger .ico .s { fill-opacity: .25; }
.side-nav a .ico { opacity: 1; }
.side-nav a:not(.active) .ico { color: #cfe1e0; }
.star-btn .ico { --ico-acc: currentColor; }
.mtop-menu .ico { width: 22px; height: 22px; }
.eq-ico .ico { width: 20px; height: 20px; vertical-align: -4px; }
.vx-move .ico { width: 20px; height: 20px; color: var(--ink); filter: drop-shadow(0 0 2px #fff); }
@media (max-width: 600px) { .quick-new::after { display: none; } }
/* accueil : recherche sous les boutons, sur toute la largeur du bloc */
.quick-new .quick-search { position: relative; z-index: 1; margin-top: 14px; width: 100%; max-width: 560px; }
.quick-new .quick-search input { width: 100%; padding-left: 40px; height: 44px; border-radius: 12px; border: 0; font-size: .95rem; }
.quick-new .quick-search .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
@media (max-width: 600px) { .quick-new .quick-search { max-width: none; } }
/* soleil proportionné au bloc (tablette : il ne passe plus sur le texte) */
.quick-new::after { width: min(180px, 26%); height: auto; aspect-ratio: 1; right: max(-40px, -6%); top: max(-40px, -6%); }
.quick-new > h2, .quick-new > p { position: relative; z-index: 1; max-width: calc(100% - min(180px, 26%) + max(40px, 6%) - 16px); }
.quick-new > p { max-width: min(34ch, calc(100% - min(180px, 26%) + max(40px, 6%) - 16px)); }
/* mégaphone sur fond jaune : l'onde (accent) en encre, sinon elle disparaît et le dessin paraît décentré */
.mega-fab .ico, .side-mega .ico, .btn-sun .ico-megaphone { --ico-acc: var(--ink); }
.mega-fab .ico { transform: translateY(-.5px); }
/* portail client (vue 3D seule dans un cadre) : pas de rail d'outils, la 3D prend toute la place */
body.viewer .sz-rail, body.viewer .sz-top, body.viewer .sz-panel { display: none !important; }
body.viewer .sz { --rail: 0px; --topH: 0px; grid-template-columns: 1fr !important; grid-template-rows: 1fr !important; background: #cfe3ec; }
body.viewer .sz-3d { grid-column: 1 / -1 !important; grid-row: 1 / -1 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.viewer .sz-3d-ui { left: 12px !important; bottom: 12px !important; }
body.viewer [data-3d-src] { display: none !important; }

/* ---------------------------------------------------------------- transitions entre les pages
   Navigateurs récents (Chrome, Edge, Safari) : la barre de gauche se transforme en barre d'outils en entrant dans
   le dimensionnement, le logo, le titre et le bandeau d'étapes restent en place, le contenu apparaît en fondu.
   Sobre et court ; coupé si l'utilisateur a demandé moins d'animations. */
@view-transition { navigation: auto; }
.side, .sz-rail { view-transition-name: kp-side; }
.side-brand img, .sz-home img { view-transition-name: kp-logo; }
.proj-head h1, .sz-title strong { view-transition-name: kp-title; }
.journey { view-transition-name: kp-journey; }
/* en-tête du projet fixe entre Vue d'ensemble, Consommation et Démarches ; l'onglet actif glisse vers le nouvel onglet */
.proj-head, .keep-head { view-transition-name: kp-head; }   /* en-têtes fixes entre les onglets d'une même rubrique */
.proc-menu { view-transition-name: kp-procmenu; }   /* menu des pièces (Démarches) : fixe d'une pièce à l'autre */
.shell-main > main > .back { view-transition-name: kp-back; }
.subtabs { view-transition-name: kp-subtabs; }
.subtabs a.active { view-transition-name: kp-tab; }
::view-transition-old(kp-head), ::view-transition-new(kp-head), ::view-transition-old(kp-subtabs), ::view-transition-new(kp-subtabs),
::view-transition-old(kp-back), ::view-transition-new(kp-back), ::view-transition-old(kp-title), ::view-transition-new(kp-title),
::view-transition-old(kp-journey), ::view-transition-new(kp-journey) { animation-name: none; }
/* en-tête et onglets : posés tels quels, sans glissement ni fondu */
::view-transition-group(kp-head), ::view-transition-group(kp-back), ::view-transition-group(kp-subtabs), ::view-transition-group(kp-procmenu) { animation: none; }
::view-transition-old(kp-procmenu) { animation: none; opacity: 0; }
::view-transition-new(kp-procmenu) { animation: none; }
/* l'ancienne image disparaît d'un coup : rien ne « clignote » quand l'en-tête est identique */
::view-transition-old(kp-head), ::view-transition-old(kp-subtabs), ::view-transition-old(kp-back), ::view-transition-old(kp-title), ::view-transition-old(kp-journey) { opacity: 0; }
::view-transition-group(kp-tab) { animation-duration: .45s; }
::view-transition-old(kp-tab) { animation: kp-fade-out .12s ease both; }
::view-transition-new(kp-tab) { animation: kp-fade-in .2s ease .2s both; }
.shell-main > main { view-transition-name: kp-main; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root) { animation: kp-fade-out .18s ease both; }
::view-transition-new(root) { animation: kp-fade-in .4s ease .16s both; }
::view-transition-old(kp-main) { animation: kp-fade-out .16s ease both; }
::view-transition-new(kp-main) { animation: kp-rise-in .45s cubic-bezier(.2, .7, .2, 1) .17s both; }
/* barre latérale : on garde les deux images visibles pendant le changement de largeur, sans déformation */
::view-transition-old(kp-side), ::view-transition-new(kp-side) { height: 100%; object-fit: none; object-position: left top; }
::view-transition-old(kp-title), ::view-transition-new(kp-title), ::view-transition-old(kp-journey), ::view-transition-new(kp-journey) { height: 100%; width: auto; object-fit: none; object-position: left center; }
/* arrivée sur une ancre (page qui défile) : seule la page entière en fondu, voir vt.js */
html.vt-anchor .journey, html.vt-anchor .proj-head, html.vt-anchor .keep-head, html.vt-anchor .proj-head h1, html.vt-anchor .subtabs,
html.vt-anchor .subtabs a.active, html.vt-anchor .proc-menu, html.vt-anchor .shell-main > main, html.vt-anchor .shell-main > main > .back { view-transition-name: none; }
/* étapes de l'étude PAC (même page) : le contenu de l'étape se renouvelle en fondu, l'étape active glisse */
.pac-steps a.cur { view-transition-name: kp-tab; }
.pac-hero { view-transition-name: kp-pachero; }
::view-transition-old(kp-pachero) { opacity: 0; }
::view-transition-group(kp-pachero), ::view-transition-new(kp-pachero) { animation: none; }
/* en-tête de l'étude PAC (retour, titre, adresse, boutons) : immobile quand on change d'étape */
.pac-app > .back { view-transition-name: kp-pacback; }
.pac-app > .page-head { view-transition-name: kp-pachead; }
::view-transition-old(kp-pachead), ::view-transition-old(kp-pacback) { opacity: 0; }
::view-transition-group(kp-pachead), ::view-transition-new(kp-pachead), ::view-transition-group(kp-pacback), ::view-transition-new(kp-pacback) { animation: none; }
html.vt-anchor .pac-hero, html.vt-anchor .pac-app > .back, html.vt-anchor .pac-app > .page-head, html.vt-anchor .pac-steps a.cur { view-transition-name: none; }
html.kp-step::view-transition-old(kp-main) { animation: kp-fade-out .12s ease both; }
html.kp-step::view-transition-new(kp-main) { animation: kp-rise-in .34s cubic-bezier(.2, .7, .2, 1) .06s both; }
html.kp-step::view-transition-group(kp-main) { animation-duration: .3s; }
@keyframes kp-fade-out { to { opacity: 0; } }
@keyframes kp-fade-in { from { opacity: 0; } }
@keyframes kp-rise-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
@media print { @view-transition { navigation: none; } }
.sz-toast.xp-bar { max-width: min(94vw, 780px); white-space: nowrap; }
.sz-toast.xp-bar .btn { white-space: nowrap; flex: none; }
.sz-toast.xp-bar .xp-quit { color: var(--muted); border-color: var(--line); }

/* lien client permanent : ID client, options repliées, études montrées */
.share-ref { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; font-size: .82rem; }
.share-ref span { color: var(--muted); font-weight: 600; }
.share-ref strong { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .04em; background: #fff; border: 1px solid #f0dca8; border-radius: 8px; padding: 2px 8px; }
.share-empty { background: var(--sun-soft); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.share-vis { margin: 10px 0 0; }
.share-more { margin-top: 12px; border-top: 1px dashed #f0dca8; padding-top: 10px; }
.share-more summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--teal); }
.share-more .form { margin-top: 10px; }
.study-vis .link-btn { font-weight: 700; }

/* ---------- sélecteur de produit (picker.js) ---------- */
.kpk { position: fixed; inset: 0; z-index: 3000; background: rgba(9, 30, 31, .38); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 12px 12px; }
.kpk-box { width: min(620px, 100%); max-height: 84vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -18px rgba(9, 30, 31, .5); overflow: hidden; }
.kpk-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.kpk-head strong { font-size: 1rem; }
.kpk-x { border: 0; background: none; font-size: 1rem; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 8px; }
.kpk-x:hover { background: #f1f2ec; }
.kpk-search { padding: 0 16px; }
.kpk-search input { width: 100%; font-size: 1rem; padding: 10px 12px; border-radius: 10px; }
.kpk-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px; font-size: .82rem; color: var(--muted); }
.kpk-filters label { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-weight: 600; }
.kpk-filters input { width: auto; }
.kpk-hint { margin: 0 16px 6px; font-size: .8rem; color: var(--muted); }
.kpk-list { list-style: none; margin: 0; padding: 4px 8px 12px; overflow-y: auto; border-top: 1px solid var(--line); }
.kpk-brand { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); padding: 12px 10px 4px; }
.kpk-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.kpk-row.act { background: #eef6f4; }
.kpk-row.cur { box-shadow: inset 3px 0 0 var(--teal); }
.kpk-empty { padding: 18px 10px; color: var(--muted); font-size: .88rem; }
.kpk-main { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.kpk-name { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpk-sum { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpk-star { color: #c89300; margin-right: 4px; }
.kpk-none { color: var(--muted); font-style: italic; font-size: .88rem; flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpk-badge { flex: none; font-size: .7rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #eef0ea; color: var(--muted); }
.kpk-badge.lvl-ok { background: #e3f4ea; color: #1d7a45; }
.kpk-badge.lvl-warn { background: #fff4dc; color: #8a5d00; }
.kpk-badge.lvl-ko { background: #fde8e8; color: #b42318; }
.kpk-btn { min-width: 0; display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.kpk-btn:hover:not(:disabled) { border-color: var(--teal); }
.kpk-btn:disabled { cursor: default; opacity: .75; }
.kpk-chev { color: var(--muted); font-size: .8rem; }
@media (max-width: 640px) { .kpk { padding: 0; align-items: stretch; } .kpk-box { max-height: none; border-radius: 0; } }
.ana-hw { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: .86rem; }
.ana-hw li { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }