:root {
  /* Charte alignée sur Diaphane-DBA — thème « Tangerine » (orange = marque).
     Le couple fonctionnel de l'éditeur est conservé mais ses teintes suivent
     DBA : accent = tangerine (marque, zones, outils actifs) ; accent-2 = sky
     (sélection, découpe, draft, « vérifier »). Voir aussi --warning (caution). */
  --bg: #ece8e4; --panel: #ffffff; --panel-2: #f5f2ef; --line: #e7e2de;
  --ink: #0a0a0f; --muted: #71717a; --accent: #e05d38; --accent-2: #0ea5e9;
  --green: #16a34a; --red: #ef4444;
  --warning: #d97706; --warning-light: #fffbeb;
  --wall: #2b3442;
  --zone: rgba(224,93,56,0.10); --zone-stroke: rgba(224,93,56,0.45);
  --hover: rgba(224,93,56,0.22);
  --sel: rgba(14,165,233,0.30); --sel-stroke: #0ea5e9;
  --pick: rgba(22,163,74,0.26); --pick-stroke: #16a34a;
  /* échelle de rayons DBA (base 0.5rem) — dispo pour de futurs composants ;
     les rayons calibrés tablette déjà en place ne sont pas réécrits. */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
/* Lock the whole app to the visible viewport so the toolbar can never scroll
   off-screen (mobile/tablet URL-bar collapse used to push the tools away). */
body {
  position: fixed; top: 0; left: 0; width: 100%;
  height: 100vh; height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--ink); display: flex; flex-direction: column;
  overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
}
button { touch-action: manipulation; }

/* header */
header {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 18px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 16px; }
/* Logo officiel DIAPHANE : image fournie, affichée telle quelle (le fichier
   porte déjà la marque + le wordmark + la baseline). */
.brand-logo { display: block; height: 34px; width: auto; }
h1 { font-size: 16px; margin: 0; }
.sub { margin: 0; font-size: 12px; color: var(--muted); }
.sub .badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; cursor: help; vertical-align: 1px;
  color: var(--accent); background: var(--zone); border: 1px solid var(--zone-stroke);
}
.stats { display: flex; gap: 22px; margin-left: 8px; }
.stats .stat { display: flex; flex-direction: column; line-height: 1.1; }
.stats .stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.stats .stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.actions { margin-left: auto; display: flex; gap: 8px; }

/* menu compte SSO (en haut à droite) — confirme la connexion WordPress et
   offre le retour vers le portail MySmartisan. Mêmes teintes que la charte. */
.sso-account { position: relative; display: flex; align-items: center; }
.sso-account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 4px 12px 4px 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.sso-account-btn:hover { background: #e9edf4; }
.sso-account-btn[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.sso-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), #ea580c);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px;
}
.sso-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sso-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.sso-account-btn[aria-expanded="true"] .sso-chev { transform: rotate(180deg); }

.sso-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 250px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10,10,15,.18);
}
.sso-menu-head {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.sso-menu-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.sso-menu-email { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sso-menu-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 600; color: var(--green); }
.sso-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22,163,74,.16); }
/* Items du menu : <a> ET <button> mélangés. Réinitialiser le chrome natif des
   boutons (bordure OS, fond, police système, centrage) pour que les deux rendus
   soient IDENTIQUES — sinon le <button> hérite d'une grosse bordure sombre. */
.sso-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; box-sizing: border-box; min-height: 44px;
  margin: 0; padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink);
  font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  text-align: left; text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background .12s ease, color .12s ease;
}
.sso-menu-item:hover { background: var(--panel-2); color: var(--accent); }
.sso-menu-item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
}
.sso-menu-item:active { background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.sso-menu-item svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* buttons */
.btn {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  min-height: 44px; padding: 0 16px; border-radius: 11px; cursor: pointer;
  font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.btn:hover { background: #e9edf4; }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #ea580c); border: 0; color: #fff; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { color: var(--red); border-color: rgba(239,68,68,.4); background: transparent; }
.btn.danger:hover { background: rgba(239,68,68,.10); }
.btn:disabled { opacity: .4; cursor: default; pointer-events: none; }
.btn.full { width: 100%; }
/* CTA héros « Finaliser la demande » : l'action centrale de l'app, la plus
   visible. Plus grand que .btn.primary, ombre tangerine, flèche d'appel. */
.btn.finalize {
  background: linear-gradient(135deg, var(--accent), #ea580c); border: 0; color: #fff;
  min-height: 50px; padding: 0 22px; font-size: 15px; font-weight: 700; letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(224,93,56,.42);
}
.btn.finalize::after { content: " →"; font-weight: 800; }
.btn.finalize:hover { filter: brightness(1.05); box-shadow: 0 8px 22px rgba(224,93,56,.5); }
.btn.finalize:disabled { box-shadow: none; }
/* Demande envoyée : le CTA devient un état « terminé » (vert, sans flèche ni
   ombre d'appel) — il ne pousse plus à finaliser, il confirme. */
.btn.finalize.sent { background: var(--green, #15803d); box-shadow: none; }
.btn.finalize.sent::after { content: ""; }
.btn.finalize.sent:hover { filter: none; box-shadow: none; }
/* CTA flottant : pastille fixe en bas d'écran, sous la vue de finalisation
   (z-index 30 < #finalize-view 40), respecte la zone sûre tablette/PWA. */
.finalize-bar {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 24px);
  padding: 10px 12px 10px 18px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(27,34,48,.28);
}
.finalize-bar .fb-count { font-size: 14px; font-weight: 700; color: var(--green); white-space: nowrap; }
.finalize-bar .btn.finalize { min-height: 50px; }
/* file input: visually hidden but kept in the tab order (keyboard-reachable) */
#uploadBtn { position: relative; }
#uploadBtn:focus-within { outline: 2px solid #fff; outline-offset: 2px; }
.file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* layout */
main { flex: 1; display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.stage { display: flex; flex-direction: column; min-width: 0; }

/* toolbar — pinned to the top of the canvas column, always visible */
.toolbar {
  position: sticky; top: 0; z-index: 6; flex: none;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 8px;
  padding: 10px 14px; background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.toolbar .spacer { flex: 1; }
.modes, .iconrow { flex: none; }
.modes { display: flex; gap: 6px; background: var(--bg); padding: 4px; border-radius: 14px; }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 70px; min-height: 58px; padding: 6px 10px;
  border: 0; background: transparent; color: var(--muted);
  border-radius: 11px; cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1;
}
.tool svg { width: 22px; height: 22px; }
.tool:hover { color: var(--ink); }
.tool.active { background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px rgba(27,34,48,.16); }
.iconrow { display: flex; align-items: center; gap: 6px; }
/* Pastilles hors édition de géométrie, au bord droit de la barre (le wrapper
   les fait passer à la ligne d'un bloc quand la barre wrappe) :
   — Besoins : action MÉTIER (affecter des besoins → Finaliser la demande),
     tonal bleu, fond accent plein quand le mode est actif ;
   — Annoter : feedback terrain, liseré pointillé orange (la couleur du tracé
     d'annotation), plein quand actif. */
.pills { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.pills .tool {
  flex-direction: row; gap: 7px; min-width: 0; min-height: 44px; padding: 0 14px;
  border-radius: 22px;
}
.tool.tool-besoins {
  border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: rgba(224,93,56,.1); color: var(--accent);
}
.tool.tool-besoins:hover { background: rgba(224,93,56,.16); color: var(--accent); }
.tool.tool-besoins.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; box-shadow: none;
}
.tool.tool-feedback {
  border: 1.5px dashed color-mix(in srgb, var(--accent-2) 55%, transparent);
  background: var(--panel); color: var(--accent-2);
}
.tool.tool-feedback:hover { background: rgba(14,165,233,.1); color: var(--accent-2); }
.tool.tool-feedback.active {
  background: rgba(14,165,233,.14); border-style: solid; border-color: var(--accent-2);
  color: var(--accent-2); box-shadow: none;
}
.icon {
  width: 44px; height: 44px; flex: none; border-radius: 11px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font-size: 19px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon:hover { background: var(--panel-2); }
.icon:disabled { opacity: .35; cursor: default; pointer-events: none; }
.sep { width: 1px; height: 26px; background: var(--line); }

/* viewport */
.viewport {
  position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab;
  touch-action: none; overscroll-behavior: contain;
  background: radial-gradient(circle at 1px 1px,#dde3ec 1px,transparent 0) 0 0/24px 24px, #ffffff;
}
.viewport.panning { cursor: grabbing; }
.viewport.draw { cursor: crosshair; }
.viewport.split, .viewport.split .zone { cursor: var(--scissor-cursor, crosshair); }
.viewport.merge { cursor: copy; }
svg#plan { width: 100%; height: 100%; display: block; }

/* calque de fond : page PDF rastérisée, atténuée pour laisser lire les pièces */
#bg { pointer-events: none; }
#bg image { opacity: .5; }
#bg.off { display: none; }

#walls line { stroke: var(--wall); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.zone {
  fill: var(--zc, var(--zone)); stroke: var(--zs, var(--zone-stroke)); stroke-width: 1.2;
  vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .08s ease;
}
.zone:hover { fill: var(--hover); }
.zone.selected { fill: var(--sel); stroke: var(--sel-stroke); stroke-width: 2.4; }
.zone.picked { fill: var(--pick); stroke: var(--pick-stroke); stroke-width: 2; }
.draw .zone { pointer-events: none; }

#draft polyline, #draft polygon { fill: rgba(14,165,233,.18); stroke: var(--accent-2); stroke-width: 2; vector-effect: non-scaling-stroke; }
#draft circle { fill: var(--accent-2); }

/* split preview */
.cut-half { vector-effect: non-scaling-stroke; pointer-events: none; }
.cut-half.cutA { fill: rgba(224,93,56,.24); stroke: var(--accent); stroke-width: 2.2; }
.cut-half.cutB { fill: rgba(14,165,233,.24); stroke: var(--accent-2); stroke-width: 2.2; }
.cut-line { stroke: #1b2230; stroke-width: 2.2; stroke-dasharray: 9 6; vector-effect: non-scaling-stroke; pointer-events: none; }
.cut-dot { fill: #1b2230; }

/* outil Forme : contour édité + poignées (sommets pleins, milieux pâles) */
#draft polygon.rs-shape { fill: rgba(224,93,56,.14); stroke: var(--accent); stroke-width: 2.2; }
#draft circle.rs-dot { fill: #ffffff; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
#draft circle.rs-dot.grab { fill: var(--accent); }
#draft circle.rs-mid { fill: var(--accent); opacity: .35; stroke: none; }
.rs-m2 {
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent);
  background: rgba(224,93,56,.1); border-radius: 8px; padding: 6px 10px; white-space: nowrap;
}

/* étiquettes des pièces : tailles en px ÉCRAN — chaque groupe .zlabel est
   contre-zoomé (scale 1/k) par app.js, le zoom ne change donc pas ces tailles */
#labels .zlabel { pointer-events: none; }
#labels text {
  fill: #28303d; font-size: 12px; text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: #ffffff; stroke-width: 3px; font-weight: 600;
}
#labels text.m2 { fill: #5a6473; font-weight: 400; font-size: 11px; stroke-width: 2.5px; }
/* pastilles besoins : fond blanc, liseré couleur du besoin (inline), texte encre */
#labels .bpill { fill: #ffffff; fill-opacity: .94; stroke-width: 1.4; }
#labels text.bpill-t { font-size: 10.5px; font-weight: 700; fill: #1b2230; stroke-width: 0; }

/* contextual help + actions — a strip pinned under the toolbar, always visible */
.actionbar {
  position: sticky; top: 0; z-index: 5; flex: none;
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.actionbar .step { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 11px; }
.actionbar .step > svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.actionbar[data-mode="split"] .step > svg { color: var(--accent-2); }
.actionbar .step .txt { min-width: 0; }
.actionbar .step .ttl {
  display: block; font-size: 14.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actionbar .step small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.actionbar .btn { min-height: 44px; padding: 0 18px; font-size: 14px; flex: none; }
.toast {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  background: #1b2230; border: 1px solid #2b3442; color: #fff;
  padding: 11px 16px; border-radius: 11px; font-size: 14px; box-shadow: 0 8px 28px rgba(27,34,48,.28);
}

/* upload progress gauge — fixed dead-centre over the WHOLE screen while the
   backend analyses. (Was absolute-in-.viewport : on tablette/portrait the grid
   shrinks .viewport to the top region, so the card sat low / off-centre — cf.
   le « parfois en bas de page ».) The wide spread box-shadow doubles as a soft
   full-screen backdrop so the card stands out, no extra DOM. */
.upload-progress {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, 80%); z-index: 90;
  background: #1b2230; border: 1px solid #2b3442; color: #fff;
  padding: 18px 20px; border-radius: 14px;
  box-shadow: 0 0 0 100vmax rgba(15,20,30,.38), 0 18px 48px rgba(27,34,48,.5);
}
.upload-progress .up-label { font-size: 14px; margin-bottom: 12px; }
.upload-progress .up-bar { height: 8px; border-radius: 5px; background: #2b3442; overflow: hidden; }
.upload-progress .up-bar div {
  height: 100%; width: 0; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), #ea580c); transition: width .3s ease;
}
.upload-progress .up-pct { margin-top: 8px; font-size: 12.5px; color: #9aa6b8; text-align: right; }

/* panel */
.panel {
  background: var(--panel); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.empty { padding: 14px 18px; }
.mode-hint { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.details { padding: 18px; border-bottom: 1px solid var(--line); }
.details.hidden, .empty.hidden { display: none; }
.title-input {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 20px; font-weight: 700; padding: 6px 2px 10px; margin-bottom: 14px;
}
.title-input:focus { outline: none; border-color: var(--accent-2); }
.details label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.details label.full { width: 100%; }
.details .lbl { display: inline-flex; align-items: center; gap: 5px; }

/* échec d'analyse — overlay persistant, lisible et actionnable (≠ toast 2,6 s) */
.analyse-error {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(27,34,48,.46);
}
.analyse-error .ae-card {
  position: relative; width: min(460px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px 26px 22px; box-shadow: 0 20px 60px rgba(27,34,48,.34);
}
.ae-close {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  border: 0; border-radius: 9px; background: transparent; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.ae-close:hover { background: var(--panel-2); color: var(--ink); }
.ae-title {
  margin: 0 28px 14px 0; font-size: 18px; font-weight: 700; line-height: 1.35;
  padding-left: 30px; position: relative;
}
.ae-title::before {
  content: "⚠"; position: absolute; left: 0; top: -1px;
  color: var(--warning); font-size: 19px;
}
.ae-causes { margin: 0 0 18px; padding-left: 20px; }
.ae-causes li { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-bottom: 5px; }
.ae-expected {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 13px 15px 13px; margin-bottom: 18px;
}
.ae-expected-head { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.ae-expected ul { margin: 0; padding-left: 20px; }
.ae-expected li { font-size: 13px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; }
.ae-actions { display: flex; justify-content: flex-end; }

/* contextual help icon — small ⓘ button with a full 44px touch target */
.help {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); cursor: pointer; flex: none;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.help::after { content: ""; position: absolute; inset: -12px; }   /* expand hit area to 44px */
.help svg { width: 15px; height: 15px; }
.help:hover, .help[aria-expanded="true"] { color: var(--accent); }
.help:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* dark bubble (matches the toast) so it stands out on both the white panel and the canvas */
.help-pop {
  position: fixed; z-index: 1000; max-width: 280px;
  background: #1b2230; color: #fff;
  border: 1px solid #2b3442; border-radius: 11px; padding: 11px 13px;
  font-size: 13px; line-height: 1.45; font-weight: 400;
  box-shadow: 0 12px 32px rgba(27,34,48,.32);
}
/* minmax(0,1fr) : sans ça les inputs imposent leur largeur intrinsèque et la
   2e colonne déborde du panneau (champ « Surface détectée » tronqué) */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* :not(.title-input) : le nom de la pièce garde son style de titre (sinon
   cette règle, plus spécifique, l'écrase en champ ordinaire) */
.details input:not(.title-input), .details select {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 10px; padding: 0 12px; min-height: 46px; font-size: 15px; font-weight: 600;
}
.details input:disabled { color: var(--muted); font-weight: 400; }
.details input:not(.title-input):focus, .details select:focus { outline: none; border-color: var(--accent); }
.details .btn.danger.full { margin-top: 4px; min-height: 50px; }
.meta { font-size: 12px; color: var(--muted); margin: 12px 0 0; }

/* ---- besoins / missions (demande d'intervention) ---- */
.demande-wrap { padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
/* switch « Par besoin / Par pièce » : un seul flux d'affectation visible à la
   fois — même langage visuel que le groupe d'outils (.modes) */
.list-head.with-seg { align-items: center; }
.seg { display: flex; gap: 2px; background: var(--bg); padding: 3px; border-radius: 999px; }
.seg button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  min-height: 36px; padding: 0 13px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; line-height: 1;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--panel); color: var(--accent); box-shadow: 0 1px 4px rgba(27,34,48,.16); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* flux « par pièce » : la palette laisse place à un hint d'une ligne */
.pal-hint { margin: 6px 0 2px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.pal-group { margin: 8px 0 5px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-size: 13px; font-weight: 600; cursor: pointer; touch-action: manipulation;
}
.chip:hover { background: var(--panel-2); }
.chip.used { border-color: var(--bc); }
/* texte encre (pas --bc) : un texte coloré sur fond teinté tombe sous 3:1 */
.chip.active { background: color-mix(in srgb, var(--bc) 16%, white); border-color: var(--bc); color: var(--ink); }
.chip .cnt {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--bc); color: #fff; font-size: 11.5px; line-height: 20px; text-align: center;
}
.zone.tagged { fill: color-mix(in srgb, var(--bc) 34%, transparent); stroke: var(--bc); stroke-width: 2.4; }
.viewport.besoins .zone { cursor: copy; }
.bdot { pointer-events: none; stroke: #fff; stroke-width: 1.5; }
/* badge code métier (RAG, LINO…) — partagé palette / fiche pièce */
.chip .code, .fp-row .code {
  flex: none; font-size: 10px; font-weight: 700; letter-spacing: .3px; line-height: 1;
  color: var(--bc); background: color-mix(in srgb, var(--bc) 9%, white);
  border: 1px solid color-mix(in srgb, var(--bc) 45%, white);
  border-radius: 6px; padding: 3px 5px;
}

/* ---- fiche pièce (flux pièce → besoins) : carte flottante sur le plan ---- */
.fiche {
  position: absolute; top: 12px; right: 12px; z-index: 8;
  width: min(330px, calc(100% - 24px)); max-height: calc(100% - 24px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 14px 36px rgba(27,34,48,.22); padding: 0 14px 12px;
}
.fiche header {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px;
  background: var(--panel); padding: 12px 0 9px; border-bottom: 1px solid var(--line);
}
.fiche header > div { flex: 1; min-width: 0; }
.fiche h3 { margin: 0; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fiche header span { font-size: 12px; color: var(--muted); }
.fiche .icon { width: 38px; height: 38px; font-size: 15px; }
.fp-row {
  display: flex; align-items: center; gap: 8px; min-height: 42px;
  padding: 2px 6px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.fp-row:hover { background: var(--panel-2); }
.fp-row input { width: 18px; height: 18px; flex: none; accent-color: var(--bc); cursor: pointer; }
.fp-row .nm { flex: 1; min-width: 0; }
.fp-row.on .nm { font-weight: 700; }
.fp-qty { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.missions { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.missions li {
  display: flex; align-items: center; gap: 10px; min-height: 46px;
  padding: 8px 10px; border-radius: 10px; background: var(--panel-2);
  font-size: 13.5px; cursor: pointer; border: 1px solid transparent;
}
.missions li:hover { border-color: var(--bc); }
.missions li .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--bc); flex: none; }
.missions li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.missions li .qty { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.missions li .ok { color: var(--green); font-weight: 700; white-space: nowrap; }
.missions .none { color: var(--muted); font-size: 13px; padding: 4px 2px; }
.bchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.bchip {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 36px; padding: 0 4px 0 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--bc) 14%, white);
  border: 1px solid var(--bc); color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.bchip button {
  width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: var(--bc); font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
}
.bchip button:hover { background: color-mix(in srgb, var(--bc) 22%, white); }

.list-wrap { padding: 12px 14px 32px; flex: none; }
.list-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.list-head h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.muted { color: var(--muted); font-size: 12px; }
.zonelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.zonelist li {
  display: flex; align-items: center; gap: 9px; padding: 3px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px; min-height: 27px; border: 1px solid transparent;
}
.zonelist li:hover { background: var(--panel-2); }
.zonelist li.active { background: var(--panel-2); border-color: var(--sel-stroke); }
.zonelist li .dot { width: 11px; height: 11px; border-radius: 4px; flex: none; }
.zonelist li .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zonelist li .m2 { color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- métré par revêtement (plans polychromie) ---- */
.coverings { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.coverings li {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px;
  font-size: 14px; border: 1px solid transparent;
}
.coverings li:hover { background: var(--panel-2); }
.coverings .cov-swatch {
  width: 16px; height: 16px; border-radius: 4px; flex: none;
  border: 1px solid rgba(0, 0, 0, .18);
}
.coverings .cov-m2 { flex: 1; font-variant-numeric: tabular-nums; font-weight: 600; }
.coverings .cov-n { font-variant-numeric: tabular-nums; }

/* ---- finalisation de la demande (vue plein écran) ---- */
/* ============ Demande d'intervention — « dossier » plein écran ============
   Aesthetic : papier chaud + trame de plan, titres en serif Fraunces, métriques
   en mono, stepper à pastilles numérotées, feuille-document. */
#finalize-view {
  --fd: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --fm: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;
  position: fixed; inset: 0; z-index: 40; overflow: auto; overscroll-behavior: contain;
  color: var(--ink);
  background:
    radial-gradient(circle at 1px 1px, rgba(27,34,48,.045) 1px, transparent 1.5px) 0 0 / 24px 24px,
    radial-gradient(120% 80% at 50% -10%, #fff6f0 0%, transparent 55%),
    linear-gradient(180deg, #fbf8f4, #f3ede7);
}
.f-display { font-family: var(--fd); font-weight: 600; letter-spacing: -.01em; }
.f-close {
  position: fixed; top: 16px; right: 16px; z-index: 6;
  width: 46px; height: 46px; border-radius: 14px; cursor: pointer; font-size: 18px;
  border: 1px solid var(--line); background: rgba(255,255,255,.85); backdrop-filter: blur(6px);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(27,34,48,.10);
}
.f-close:hover { background: #fff; }
.f-wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 80px; }
/* <header> : neutraliser le style du header global de l'app (flex/padding/fond/bordure). */
.f-topbar { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 0 22px; padding: 0; background: none; border-bottom: 0; }
.f-eyebrow {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.f-title { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.04; color: var(--ink); }
/* Stepper : pastilles numérotées reliées par un fil ; étape faite = ✓ tangerine,
   courante = surlignée, à venir = neutre. Cliquable pour naviguer. */
.f-stepper { list-style: none; display: flex; margin: 0 0 8px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.f-stepper::-webkit-scrollbar { display: none; }
.f-chip {
  position: relative; flex: 0 0 auto; display: flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--muted);
  border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.f-chip + .f-chip { margin-left: 14px; }
.f-chip + .f-chip::before { content: ""; position: absolute; left: -12px; top: 50%; width: 10px; height: 2px; background: var(--line); border-radius: 2px; }
.f-chip.done::before { background: var(--accent); }
.f-chip-mark {
  width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-family: var(--fd); font-size: 13px; font-weight: 700;
  background: #fff; border: 1.5px solid var(--line); color: var(--muted);
}
.f-chip.done .f-chip-mark { background: var(--accent); border-color: var(--accent); color: #fff; }
.f-chip.now { background: #fff; border-color: color-mix(in srgb, var(--accent) 42%, transparent); color: var(--ink); box-shadow: 0 6px 18px -4px rgba(224,93,56,.30); }
.f-chip.now .f-chip-mark { border-color: var(--accent); color: var(--accent); }
.f-chip.now.done .f-chip-mark { background: var(--accent); color: #fff; }
.f-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.f-stepmeta { margin: 0 0 16px; padding-left: 2px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.f-sheet {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 30px 26px; box-shadow: 0 18px 50px -28px rgba(27,34,48,.28);
}
/* intro (étape chantier) — le titre serif du topbar porte déjà le nom */
.f-intro { margin: 0 0 24px; }
.f-intro-title { display: none; }
.f-intro p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: #3f3a36; }
.f-intro p:last-child { margin-bottom: 0; }
.f-hello { font-family: var(--fd); font-size: 18px; font-weight: 600; color: var(--ink); }
.f-intro-contact { padding-top: 4px; color: var(--muted); }
.f-intro-contact strong { color: var(--accent); }
/* bannière « brouillon restauré » */
.f-restore {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 12px 16px; background: var(--warning-light);
  border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  border-radius: 14px; font-size: 13.5px; line-height: 1.45;
}
.f-restore span { flex: 1 1 220px; min-width: 0; }
.f-restore .btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
/* écart métré saisi / calculé : revenir au calcul live */
.f-warn {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 4px;
  padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
  border-radius: 9px; background: var(--warning-light); color: #92400e;
  font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.f-warn:hover { background: #fef3c7; }
/* eyebrow d'étape + titre serif + récap pièces */
.f-step { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.f-sent { color: var(--green); letter-spacing: 0; text-transform: none; margin-left: 8px; }
.f-sheet h2 { font-family: var(--fd); font-weight: 600; font-size: 27px; line-height: 1.1; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; letter-spacing: -.01em; }
.f-sheet h2 .dot { width: 15px; height: 15px; border-radius: 50%; flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c, var(--accent)) 18%, transparent); }
.f-sheet h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 28px 0 12px; }
.f-pieces { margin: 0 0 22px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.f-note {
  margin: 0 0 14px; padding: 12px 15px; border-left: 3px solid var(--accent-2);
  background: rgba(14,165,233,.06); border-radius: 0 10px 10px 0; font-size: 13.5px; line-height: 1.5; color: #3f3a36;
}
/* champs */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.f-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.f-field > span { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ink); }
.f-field > span small { font-weight: 500; color: var(--muted); letter-spacing: 0; }
.f-field input, .f-field textarea {
  background: #fbf9f7; border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 13px; padding: 13px 15px; min-height: 54px; font-size: 16px;
  font-weight: 500; font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
.f-field input::placeholder, .f-field textarea::placeholder { color: #b7b0a9; font-weight: 400; }
.f-field textarea { min-height: 70px; resize: vertical; line-height: 1.5; }
.f-field input:focus, .f-field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(224,93,56,.14);
}
#f-qty, #f-budget, #f-debut, #f-fin { font-family: var(--fm); font-size: 15px; letter-spacing: -.01em; }
/* champ métré : nombre seul + suffixe d'unité (m²/ml) visuel, non éditable */
.f-unit-wrap { position: relative; display: flex; }
.f-unit-wrap input { flex: 1; padding-right: 48px; }
.f-unit { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-family: var(--fm); font-size: 14px; font-weight: 600; color: var(--muted); pointer-events: none; }
/* dates : pastilles d'accélérateurs (Aujourd'hui / +N jours) + champ natif en repli */
.f-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.f-date-field { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; }
.f-date-lbl { font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--ink); }
.f-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.f-quick-chip {
  min-height: 38px; padding: 0 13px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--line); background: #fff; color: #4a443f;
  font-family: var(--fm); font-size: 13px; font-weight: 600;
  transition: border-color .12s, color .12s, background .12s;
}
.f-quick-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); color: var(--accent); }
.f-quick-chip:active { background: rgba(224,93,56,.10); border-color: var(--accent); }
.f-date-field input {
  background: #fbf9f7; border: 1.5px solid var(--line); color: var(--ink);
  border-radius: 13px; padding: 13px 15px; min-height: 54px; font-size: 15px;
  font-family: var(--fm); letter-spacing: -.01em; transition: border-color .15s, box-shadow .15s, background .15s;
}
.f-date-field input:focus { outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 4px rgba(224,93,56,.14); }
/* radios = chips tactiles */
.f-radios { display: flex; flex-wrap: wrap; gap: 8px; }
.f-radio {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 17px;
  border: 1.5px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 600; color: #4a443f; cursor: pointer; transition: all .15s;
}
.f-radio:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.f-radio input { position: absolute; opacity: 0; pointer-events: none; }
.f-radio.on { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(224,93,56,.24); }
/* actions + nav */
.f-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 6px; }
.f-actions .btn { min-height: 54px; flex: 1; }
.f-nav { display: flex; justify-content: space-between; gap: 12px; }
.f-nav .btn { min-height: 52px; min-width: 132px; }
.f-nav-wrap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.f-nav-wrap .f-nav { margin-top: 10px; }
/* sous-section « Gestion des produits » : nettement séparée (panneau teinté) */
.f-products { margin: 28px 0 6px; padding: 22px; border-radius: 18px; background: #fbf7f3; border: 1px solid var(--line); }
.f-products .f-products-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-family: var(--fd); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.f-products-ico { font-size: 22px; line-height: 1; }
.f-products .f-field:last-child { margin-bottom: 0; }
/* champ requis vidé : bordure rouge + libellé rouge */
.f-field.err input, .f-field.err textarea, .f-date-field.err input { border-color: var(--red); background: rgba(239,68,68,.04); }
.f-field.err > span, .f-date-field.err .f-date-lbl { color: var(--red); }
.f-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* ---- écran de confirmation : moment marquant ---- */
.f-done { max-width: 600px; margin: 0 auto; padding: 8px 8px 40px; text-align: center; }
.f-seal {
  width: 92px; height: 92px; margin: 8px auto 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 46px; color: #fff; background: radial-gradient(circle at 32% 28%, #2bbd6e, #16a34a);
  box-shadow: 0 0 0 10px rgba(22,163,74,.12), 0 18px 40px -12px rgba(22,163,74,.5);
}
.f-done h2 { font-family: var(--fd); font-weight: 600; font-size: clamp(30px, 6vw, 42px); line-height: 1.05; margin: 0 0 14px; letter-spacing: -.01em; }
.f-done p { margin: 0 auto 14px; max-width: 460px; font-size: 16px; line-height: 1.6; color: #3f3a36; }
.f-done-card {
  max-width: 480px; margin: 18px auto; padding: 16px 18px; border-radius: 16px;
  background: rgba(224,93,56,.07); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  font-size: 15px; line-height: 1.55; color: var(--ink);
}
.f-done-note { font-size: 13.5px; color: var(--muted); }
.f-done-actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }
.f-done-actions .btn { min-height: 52px; min-width: 168px; }
@media (max-width: 640px) {
  .f-grid, .f-dates { grid-template-columns: 1fr; }
  .f-wrap { padding: 28px 14px 64px; }
  .f-sheet { padding: 22px 18px; border-radius: 18px; }
  .f-topbar { padding-right: 54px; }   /* dégager le bouton fermer fixe */
  .f-eyebrow { font-size: 10.5px; letter-spacing: .12em; }
}

/* tablet portrait & small screens: stack the panel under the canvas */
@media (max-width: 900px) {
  main { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .panel { border-left: 0; border-top: 1px solid var(--line); max-height: 44dvh; }
  .stats { display: none; }
  /* tablette : compte réduit à la pastille (le nom reste dans le menu) pour
     garder l'en-tête sur une seule ligne malgré les 3 boutons d'action. */
  .sso-name { display: none; }
  .sso-account-btn { padding: 4px 8px 4px 5px; }
  .toolbar { padding: 8px 12px; }
  .tool { min-height: 48px; padding: 5px 8px; }
  .actionbar { min-height: 54px; padding: 8px 12px; gap: 8px; }
  .actionbar .btn { padding: 0 14px; }
}

/* phones: header actions on their own row, compact tools — at 375px the
   header used to be 542px wide (Finaliser tronqué, Réinitialiser hors écran) */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .actions { flex: 1 0 100%; flex-wrap: wrap; gap: 6px; }
  /* compte à côté du logo (rangée 1, à droite) ; les boutons passent dessous.
     Le nom revient (place dispo sur sa propre rangée) malgré le repli tablette. */
  .sso-account { order: 1; margin-left: auto; }
  .pilotes-entry { order: 1; margin-left: auto; }
  .actions { order: 2; }
  .sso-name { display: inline-block; max-width: 130px; }
  .actions .btn { flex: 1 1 auto; min-height: 42px; padding: 0 12px; font-size: 13px; }
  .modes { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
  .tool { min-width: 54px; min-height: 46px; padding: 5px 6px; font-size: 11px; }
  .tool svg { width: 20px; height: 20px; }
  .pills .tool { min-height: 42px; padding: 0 10px; }
  .icon { width: 42px; height: 42px; }
}

/* ---------- légende d'un scan zoné (modale de saisie) ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(27, 34, 48, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(27, 34, 48, .28);
  width: min(440px, 100%); max-height: 90vh; overflow-y: auto;
  padding: 20px 22px;
}
.modal-card h2 { margin: 0 0 8px; font-size: 17px; }
.modal-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.modal-note { margin: 12px 0 0; color: var(--muted); font-size: 11.5px; line-height: 1.4; }
.legend-rows { display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: grid; grid-template-columns: 1fr 96px 32px; gap: 8px; align-items: center; }
.legend-row input {
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--ink); background: var(--panel-2); min-width: 0;
}
.legend-row input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.legend-row .row-del {
  border: none; background: none; color: var(--muted); font-size: 18px;
  cursor: pointer; line-height: 1; padding: 4px;
}
.legend-row .row-del:hover { color: var(--red); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.btn-primary, .btn-ghost {
  border-radius: 9px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: var(--panel-2); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--line); }
#legendAddRow { margin-top: 10px; font-size: 12.5px; padding: 7px 12px; }

/* ---------- sas de sélection de calques (DWG sans murs reconnus) ---------- */
.modal-card-wide { width: min(580px, 100%); }
.layer-rows {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 52vh; overflow-y: auto; padding-right: 4px;
}
.layer-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2);
}
.layer-name { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.layer-name small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.layer-name .sug { color: var(--accent); font-weight: 600; }
.layer-roles { display: flex; gap: 4px; flex: none; }
.layer-role {
  min-height: 38px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--muted);
  font-size: 12px; font-weight: 600; cursor: pointer;
}
.layer-role.on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 560px) {
  .layer-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .layer-roles { justify-content: stretch; }
  .layer-role { flex: 1; }
}

/* ---------- fiches flottantes (Annoter) : actions + champ numérique ---------- */
.reject-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.reject-actions .btn { min-height: 44px; }
.annotate-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.annotate-field span { font-size: 12px; color: var(--ink); }
.annotate-field input[type=number] {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2);
}
.annotate-field input[type=number]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---------- affinage guidé : bannière de doute + questions ciblées ----------
   Une question à la fois, boutons >= 50 px (tablette de chantier), même
   vocabulaire visuel que l'actionbar (accent-2 = bleu « vérifier »). */
.review-banner {
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 16px 12px; background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--accent-2);
  box-shadow: inset 0 0 0 100vmax rgba(14, 165, 233, .055);
}
.review-banner .rb-head { display: flex; align-items: center; gap: 12px; }
.review-banner .rb-icon { font-size: 21px; line-height: 1; color: var(--accent-2); flex: none; }
.review-banner .rb-txt { flex: 1 1 auto; min-width: 0; }
.review-banner .rb-txt strong { font-size: 15px; }
.review-banner .rb-txt small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.review-banner .rb-later { flex: none; min-height: 44px; }
.review-banner .rb-q { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.review-banner .rb-q > span { flex: 1 1 280px; min-width: 0; font-size: 14.5px; font-weight: 600; }
.review-banner .rb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.review-banner .rb-actions .btn { min-height: 52px; padding: 0 22px; font-size: 15px; }
/* Bannière « PDF aplati » : conseil de marque (dépose le DWG), pas une alerte
   — accent tangerine au lieu du sky du flux de revue, pour la distinguer. */
.flat-pdf-banner { border-left-color: var(--accent);
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--accent) 5%, transparent); }
.flat-pdf-banner .rb-icon { color: var(--accent); }

/* tracé du rectangle de zone (réanalyse « plusieurs bâtiments ») */
.viewport.rectpick, .viewport.annotate { cursor: crosshair; }
.pick-rect {
  fill: rgba(14, 165, 233, .12); stroke: var(--accent-2); stroke-width: 2.5;
  stroke-dasharray: 8 5; vector-effect: non-scaling-stroke;
}
.annot-path {
  fill: rgba(224, 93, 56, .12); stroke: var(--accent); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
polyline.annot-path { fill: none; }

/* Désignation de l'anomalie en question (cartes « affinage par anomalies »).
   Retour terrain : l'encadré orange statique ne se lisait pas sur un DWG
   dense (zoomé pile dessus, il borde tout l'écran au-dessus d'une zone
   vide) -> tirets ROUGES en mouvement (fourmis) + croix au centre. */
.anomaly-rect {
  fill: rgba(224, 49, 49, .10); stroke: #e03131; stroke-width: 3;
  stroke-dasharray: 12 8; vector-effect: non-scaling-stroke;
  animation: anomaly-ants 1.2s linear infinite;
  pointer-events: none;
}
.anomaly-cross {
  stroke: #e03131; stroke-width: 2.5; vector-effect: non-scaling-stroke;
  pointer-events: none;
}
@keyframes anomaly-ants { to { stroke-dashoffset: -20; } }

/* ---------- Annoter une zone / Pièce ± : fiche flottante ---------- */
#annot-box, #fix-box {
  position: fixed; top: 76px; right: 16px; z-index: 60;
  width: min(420px, calc(100vw - 32px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 30, 50, .18);
  padding: 14px 16px;
}
#annot-box p, #fix-box p { margin: 0 0 8px; font-size: 13.5px; color: var(--ink); }
#annot-box textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2);
}
.annot-attendu { margin-top: 10px; }
.motif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.motif-chips .btn { min-height: 44px; }
/* « Autre » : verbatim optionnel avant suppression */
#fix-autre { display: flex; gap: 8px; margin: 8px 0; }
#fix-autre[hidden] { display: none; }
#fix-autre input {
  flex: 1; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2);
}
#fix-autre .btn { min-height: 44px; white-space: nowrap; }

/* Légende des tranches de surface (couleur des pièces) — coin du plan */
.size-legend {
  position: absolute; left: 10px; bottom: 10px; display: flex; gap: 12px;
  padding: 6px 12px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
  border-radius: 9px; font-size: 11px; color: var(--muted); pointer-events: none;
}
.size-legend .sl-item { display: inline-flex; align-items: center; gap: 5px; }
.size-legend .sl-dot { width: 10px; height: 10px; border-radius: 3px; opacity: .75; }

/* ===================== gestion des pilotes de chantier ===================== */
/* Bouton autonome « Mes pilotes » en haut à droite (affiché QUAND il n'y a pas
   de menu compte SSO ; sinon l'entrée vit dans le menu compte). */
.pilotes-entry {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 999px; padding: 6px 13px 6px 11px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1;
}
.pilotes-entry:hover { background: var(--line); }
.pilotes-entry svg { width: 18px; height: 18px; flex: none; color: var(--accent); }

/* Bouton de fermeture (×) commun aux modales construites en JS (pilotes). */
.modal-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.modal-x:hover { background: var(--panel-2); color: var(--ink); }
.pl-card-wrap { position: relative; width: min(480px, 100%); }
.pl-card-wrap > h2 { padding-right: 34px; }

/* Liste des pilotes (vue liste de la modale) */
.pl-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pl-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 12px; background: var(--panel-2);
}
.pl-card-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pl-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.pl-meta { font-size: 12.5px; color: var(--muted); }
.pl-desc { font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.pl-card-acts { display: flex; gap: 4px; flex: none; }
.pl-icon {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  border-radius: 9px; cursor: pointer;
}
.pl-icon:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pl-icon.danger:hover { color: var(--red); border-color: rgba(239, 68, 68, .4); }
.pl-icon svg { width: 17px; height: 17px; }
.pl-empty { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* Formulaire d'ajout/édition d'un pilote */
.pl-form { display: flex; flex-direction: column; gap: 12px; }
.pl-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pl-field { display: flex; flex-direction: column; gap: 5px; }
.pl-field > span { font-size: 12px; font-weight: 700; color: var(--ink); }
.pl-field input, .pl-field textarea {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2);
}
.pl-field textarea { resize: vertical; min-height: 56px; line-height: 1.45; }
.pl-field input:focus, .pl-field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pl-field.err input, .pl-field.err textarea { border-color: var(--red); background: rgba(239, 68, 68, .05); }
.pl-field.err > span { color: var(--red); }
.pl-err { margin: 0; color: var(--red); font-size: 12.5px; font-weight: 600; }
.pl-err[hidden] { display: none; }

/* Étape « Pilote de chantier » de la finalisation : cartes radio */
.f-pilote-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; }
.f-pilote-card {
  display: flex; flex-direction: column; gap: 2px; position: relative;
  border: 1.5px solid var(--line); border-radius: 13px; padding: 13px 15px 13px 44px;
  cursor: pointer; background: var(--panel);
}
.f-pilote-card::before {
  content: ""; position: absolute; left: 15px; top: 15px; width: 17px; height: 17px;
  border: 2px solid var(--line); border-radius: 50%; background: var(--panel);
}
.f-pilote-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.f-pilote-card input { position: absolute; opacity: 0; pointer-events: none; }
.f-pilote-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.f-pilote-card.on::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--panel); }
.f-pilote-name { font-family: var(--fd); font-weight: 600; font-size: 18px; color: var(--ink); }
.f-pilote-meta { font-size: 13.5px; color: var(--muted); }
.f-pilote-desc { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.f-pilote-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  border: 1px dashed var(--line); border-radius: 13px; padding: 18px; margin: 0 0 16px;
}
.f-pilote-empty p { margin: 0; color: var(--muted); font-size: 14px; }
.f-pilote-manage { margin: 0 0 4px; font-size: 13.5px; }

@media (max-width: 560px) {
  .pl-grid2 { grid-template-columns: 1fr; }
  .pilotes-entry-label { display: none; }
  .pilotes-entry { padding: 7px; }
}

/* ===================== vue « Mes demandes » ===================== */
.dm-card { position: relative; width: min(720px, 100%); }
.dm-card > h2 { padding-right: 34px; }
.dm-empty { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.dm-retry, .dm-filter { font: inherit; }
.dm-retry {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 8px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; margin-left: 4px;
}
.dm-retry:hover { background: var(--line); }

.dm-filter { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.dm-filter label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.dm-filter select {
  border: 1px solid var(--line); background: var(--panel-2); color: var(--ink);
  border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer;
}
.dm-filter select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.dm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dm-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2);
}
.dm-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dm-head { display: flex; align-items: center; gap: 8px; }
.dm-chantier { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.dm-sub { font-size: 12.5px; color: var(--muted); }
.dm-besoins { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.dm-chip {
  font-size: 11.5px; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
}
.dm-chip-more { color: var(--muted); }
.dm-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.dm-pilote { font-weight: 600; color: var(--ink); }
.dm-ret-purged { color: var(--red); }

.dm-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.dm-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.dm-seg-btn {
  font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; cursor: pointer;
  border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--muted);
}
.dm-seg-btn:first-child { border-left: 0; }
.dm-seg-btn:hover { background: var(--panel-2); color: var(--ink); }
.dm-seg-btn.on { color: #fff; }
.dm-seg-btn.on.dm-st-en_cours { background: #d97706; }   /* ambre : en cours */
.dm-seg-btn.on.dm-st-accepté  { background: #16a34a; }   /* vert : accepté */
.dm-seg-btn.on.dm-st-refusé   { background: var(--red, #ef4444); }  /* rouge : refusé */
.dm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.dm-act {
  font: inherit; font-size: 12px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.dm-act:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); color: var(--accent); }
.dm-act-link { color: var(--muted); }

@media (max-width: 640px) {
  .dm-row { flex-direction: column; }
  .dm-side { align-items: stretch; width: 100%; }
  .dm-seg { width: 100%; }
  .dm-seg-btn { flex: 1; text-align: center; }
  .dm-acts { justify-content: flex-start; }
}

/* ===================== menu « Administration » (réglages) ===================== */
.admin-card { position: relative; width: min(520px, 100%); }
.admin-card > h2 { padding-right: 34px; }
.adm-empty { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.adm-form { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.adm-field { display: flex; flex-direction: column; gap: 5px; }
.adm-label { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.adm-field input {
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px;
  font: inherit; font-size: 14px; color: var(--ink); background: var(--panel-2);
  width: 140px; max-width: 100%;
}
.adm-field input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.adm-help { font-size: 12px; color: var(--muted); line-height: 1.45; }