/* Logiciel Neatvaro : charte « Fiche de chantier » (même identité que le site).
   Chargé en dernier dans app.html ; toutes les règles sont limitées à body.app-ui. */

:root {
  --bg: #F4F2E9; --paper: #FFFFFF; --ink: #102D24; --muted: #56675E; --green: #102D24; --lime: #CFF57F; --line: #D6D2C1; --radius: 16px;
  --font: "Archivo", Arial, sans-serif;
  --ink-2: #33493F; --ink-3: #56675E; --lime-2: #BCE760; --lime-wash: #EDF7D0; --paper-2: #EBE8DA; --line-soft: #E4E0D1; --warn: #A9401D; --warn-wash: #FAE7DE; --field: #FBFAF5;
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='1' width='18' height='18' rx='5' fill='%23CFF57F' stroke='%23102D24' stroke-width='1.6'/%3E%3Cpath d='m5.6 10.3 2.9 2.9 5.9-6.3' fill='none' stroke='%23102D24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sheet-shadow: 0 26px 46px -38px rgba(16, 45, 36, .55);
}
.app-ui { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
.app-ui button, .app-ui input, .app-ui select, .app-ui textarea { font-family: var(--font); }
.app-ui :focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 3px !important; }

@media (min-width: 951px) { .app-ui .app-shell { grid-template-columns: 264px minmax(0, 1fr); } }
.app-ui .interface-language { background: var(--bg); }
.app-ui .topbar .button { text-transform: none; letter-spacing: -.005em; font-stretch: 100%; font-size: 14px; }

/* ---------- Barre latérale ---------- */
.app-ui .sidebar { background: var(--paper-2); border-right: 1.5px solid var(--line); padding: 28px 18px; }
.app-ui .brand { gap: 10px; font-size: 24px; font-weight: 800; font-stretch: 110%; letter-spacing: -.03em; color: var(--ink); }
.app-ui .brand-mark { width: auto; height: auto; margin: 0; background: none; border-radius: 0; }
.app-ui .brand-mark img { width: auto; height: 40px; display: block; }
.app-ui .brand-dot { display: none; }
.app-ui .back-to-site { display: inline-flex; margin: 14px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-2); text-underline-offset: 3px; }
.app-ui .workspace-label { margin: 30px 6px 10px; font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .14em; color: var(--ink-3); }
.app-ui .sidebar nav { gap: 4px; }
.app-ui .nav-item { min-height: 48px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 11px; color: var(--ink-2); font-size: 15px; font-weight: 650; transition: background-color .18s, border-color .18s; }
.app-ui .nav-item:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.app-ui .nav-item.active { background: var(--lime); border-color: var(--ink); color: var(--ink); }
.app-ui .nav-item > span:first-child { font-size: 17px; }
.app-ui .count { background: rgba(16, 45, 36, .08); color: var(--ink); font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px; }
.app-ui .nav-item.active .count { background: #FFF; }
.app-ui .sidebar-note { background: #FFF; border: 1.5px solid var(--ink); border-radius: 14px; padding: 16px 14px; box-shadow: var(--sheet-shadow); }
.app-ui .small-mark { width: 22px; height: 22px; margin-bottom: 10px; font-size: 0; background: var(--tick) center / contain no-repeat; }
.app-ui .sidebar-note strong { font-size: 15px; font-weight: 800; font-stretch: 106%; letter-spacing: -.01em; }
.app-ui .sidebar-note p { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 6px 0 12px; }
.app-ui .sidebar-note .button { width: 100%; }
.app-ui .prototype { font-size: 12px; color: var(--ink-3); }
.app-ui .status-dot { background: var(--lime-2); box-shadow: 0 0 0 3px rgba(207, 245, 127, .45); }

/* ---------- En-tête et bandeau de compte ---------- */
.app-ui .topbar { height: 68px; border-bottom: 1.5px solid var(--line); font-size: 12px; font-weight: 700; font-stretch: 75%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.app-ui #breadcrumb { color: var(--ink); }
.app-ui .slash { color: var(--line); }
.app-ui .private-tag { background: #FFF; border: 1.5px solid var(--line); color: var(--ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; font-stretch: 100%; }
.app-ui .account-strip { margin-top: 18px; background: #FFF; border: 1.5px solid var(--line); border-radius: 12px; font-size: 14px; }
.app-ui .account-strip strong { display: inline-flex; align-items: center; gap: 8px; }
.app-ui .account-strip strong::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 3px rgba(207, 245, 127, .5); }
.app-ui .account-strip a { color: var(--ink); text-underline-offset: 3px; }

/* ---------- Titres de page ---------- */
.app-ui .page-header { padding: 34px 0 24px; align-items: flex-end; }
.app-ui .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2) !important; font-size: 12px !important; font-weight: 700; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; }
.app-ui .eyebrow::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--tick) center / contain no-repeat; }
.app-ui .page-header h1 { margin: 12px 0 10px; font-size: clamp(32px, 1rem + 2.4vw, 50px) !important; line-height: 1.02; font-weight: 800; font-stretch: 110%; letter-spacing: -.035em !important; color: var(--ink); text-wrap: balance; }
.app-ui .page-header p { font-size: 15px !important; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }

/* ---------- Boutons ---------- */
.app-ui .button { min-height: 46px; padding: 0 18px; border-radius: 10px; border: 1.5px solid transparent; font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.app-ui .button.primary { background: var(--ink); color: #F4F2E9; border-color: var(--ink); }
.app-ui .button.primary:hover { background: #1D4436; filter: none; }
.app-ui .button.secondary { background: #FFF; color: var(--ink); border-color: var(--ink); }
.app-ui .button.secondary:hover { background: var(--lime-wash); filter: none; }
.app-ui .button.lime { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.app-ui .button.lime:hover { background: var(--lime-2); filter: none; }
.app-ui .button.danger { background: #FFF; color: var(--warn); border-color: var(--warn); }
.app-ui .button.danger:hover { background: var(--warn-wash); filter: none; }
.app-ui .text-button { min-height: 40px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Cartes « fiche » ---------- */
.app-ui .panel { background: #FFF; border: 1.5px solid var(--ink); border-radius: 16px !important; padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--sheet-shadow) !important; margin-bottom: 20px; }
.app-ui .section-title { gap: 14px; margin-bottom: 24px; }
.app-ui .step { width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--lime); color: var(--ink); font-size: 13px; font-weight: 800; font-stretch: 90%; }
.app-ui .section-title h2 { margin: 1px 0 4px; font-size: 20px !important; font-weight: 800; font-stretch: 106%; letter-spacing: -.02em; }
.app-ui .section-title p { font-size: 14px !important; color: var(--ink-3); }

/* ---------- Champs ---------- */
.app-ui label { gap: 7px; color: var(--ink); font-size: 14px; font-weight: 650; }
.app-ui input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .app-ui select, .app-ui textarea {
  height: auto; min-height: 48px; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font-size: 16px; font-weight: 500; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.app-ui textarea { line-height: 1.55; }
.app-ui input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus, .app-ui select:focus, .app-ui textarea:focus { outline: none; border-color: var(--ink); background: #FFF; box-shadow: 0 0 0 4px var(--lime); }
.app-ui input:invalid:not(:focus) { border-color: #D9B39F; }
.app-ui .input-unit input { padding-right: 104px; }
.app-ui .input-unit > span { top: 50%; transform: translateY(-50%); right: 12px; font-size: 13px; font-weight: 600; font-stretch: 85%; color: var(--ink-3); }
.app-ui label small { font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.app-ui .form-grid { gap: 18px 18px; }
.app-ui .inline-info { margin-top: 22px; padding-top: 14px; border-top: 1.5px dashed var(--line); font-size: 13px; color: var(--ink-3); }
.app-ui #monthly-visits { color: var(--ink); }
.app-ui .help-dot { width: 18px; height: 18px; border: 1.5px solid var(--ink-3); font-size: 11px; color: var(--ink-2); }
.app-ui .formula { margin-top: 20px; padding: 12px 14px; border-radius: 10px; background: var(--lime-wash); color: var(--ink-2); font-size: 13px; font-weight: 600; }
.app-ui .consent-line { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 500; line-height: 1.5; }
.app-ui input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--ink); border-radius: 6px; background: #FFF; cursor: pointer; }
.app-ui input[type="checkbox"]:checked { border-color: transparent; background: var(--tick) center / contain no-repeat; }

/* ---------- Prestations ---------- */
.app-ui .task-head { font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.app-ui .task-head, .app-ui .task-row { grid-template-columns: minmax(130px, 1.6fr) 80px minmax(70px, .65fr) minmax(76px, .8fr) 36px; gap: 8px; }
.app-ui .task-row input, .app-ui .task-row select { min-height: 44px; padding: 8px 10px; font-size: 15px; }
/* Fréquence de la prestation : une ligne sous la prestation, sur toute la largeur (S-1). */
.app-ui .task-row .task-frequency { grid-column: 1 / -1; grid-row: auto; flex-direction: row; align-items: center; gap: 10px; }
.app-ui .task-row .task-frequency > span { display: block; flex: none; font-size: 12px; font-weight: 650; color: var(--ink-3); }
.app-ui .task-row .task-frequency select { width: auto; flex: 1 1 200px; max-width: 320px; min-height: 40px; }
.app-ui .section-total strong { white-space: nowrap; }
/* Récapitulatif d'un devis enregistré (BUG-10) : visible à la place de la discussion. */
body.saved-open #calculator-view > .page-header, body.saved-open #quote-chat, body.saved-open #qc-review { display: none !important; }
.app-ui .saved-summary { padding: 26px 28px; }
.app-ui .saved-summary .ss-back { margin: 0 0 14px; }
.app-ui .saved-summary h1 { margin: 4px 0 4px; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.03em; }
.app-ui .ss-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app-ui .ss-sub { margin: 0; color: var(--ink-3); font-size: 14px; }
.app-ui .ss-dirty { margin: 14px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--lime-wash); border: 1.5px solid var(--ink); font-size: 14px; }
.app-ui .ss-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: 28px; margin-top: 18px; align-items: start; }
.app-ui .ss-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 18px; font-size: 14px; }
.app-ui .ss-facts dt { color: var(--ink-3); font-weight: 650; }
.app-ui .ss-facts dd { margin: 0; }
.app-ui .ss-h { margin: 0 0 8px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.app-ui .ss-tasks { list-style: none; margin: 0; padding: 0; }
.app-ui .ss-tasks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line, #e4e9e2); font-size: 14.5px; }
.app-ui .ss-tasks li span { color: var(--ink-3); }
.app-ui .ss-price { display: grid; gap: 4px; padding: 18px; border-radius: 14px; background: var(--ink); color: #fff; }
.app-ui .ss-price > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.app-ui .ss-price strong { font-size: 2rem; line-height: 1.1; }
.app-ui .ss-price strong small { font-size: .9rem; font-weight: 600; opacity: .85; }
.app-ui .ss-price > small { opacity: .85; font-size: 14px; }
.app-ui .ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1.5px solid var(--ink); }
.app-ui .ss-status { font-size: 13px; }
.app-ui .qc-price-change { display: block; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--lime, #cff57f); }
@media (max-width: 700px) { .app-ui .saved-summary { padding: 20px 16px; } .app-ui .ss-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .app-ui .ss-actions .button { flex: 1 1 140px; } }
.app-ui #hours-per-visit-note { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.app-ui .task-row input:disabled { background: var(--paper-2); color: var(--ink-3); }
.app-ui .icon-button { min-width: 36px; min-height: 44px; border-radius: 9px; color: var(--ink-3); }
.app-ui .icon-button:hover { background: var(--warn-wash); color: var(--warn); }
.app-ui .section-total { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid var(--ink); font-size: 14px; color: var(--ink-2); }
.app-ui .section-total strong { font-size: 17px; font-weight: 800; }

/* ---------- Étapes guidées (1 · 2 · 3) ---------- */
.app-ui .guide-heading p { font-size: 14px; color: var(--ink-2); }
.app-ui .guide-nav { gap: 4px; padding: 4px; border-radius: 13px; background: rgba(16, 45, 36, .07); }
.app-ui .guide-nav button { min-height: 50px; padding: 0 12px; border: 1.5px solid transparent; border-radius: 10px; color: var(--ink-2); font-size: 15px; font-weight: 650; }
.app-ui .guide-nav button:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.app-ui .guide-nav button span { width: 26px; height: 26px; background: #FFF; border: 1.5px solid var(--ink-3); color: var(--ink); font-size: 13px; font-weight: 800; }
.app-ui .guide-nav button[aria-current] { background: var(--lime); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.app-ui .guide-nav button[aria-current] span { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.app-ui .guide-actions > span { font-size: 13px; color: var(--ink-3); }

/* ---------- Relevé de prix (carte sombre) ---------- */
.app-ui .result-card { position: relative; background: var(--ink); color: #F4F2E9; border-radius: 18px !important; padding: 26px !important; box-shadow: 0 30px 60px -36px rgba(16, 45, 36, .9); }
.app-ui .result-top { font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .14em; color: rgba(244, 242, 233, .72); }
.app-ui .live-badge { background: var(--lime); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0; font-stretch: 100%; }
.app-ui .live-badge::before { background: var(--ink); }
.app-ui .price-label { margin: 26px 0 6px; font-size: 14px; color: rgba(244, 242, 233, .78); }
.app-ui .hero-price > span:first-child { font-size: clamp(40px, 3.2vw, 52px); font-weight: 800; font-stretch: 108%; letter-spacing: -.035em; color: var(--lime); }
.app-ui .hero-price > span:last-child, .app-ui .ttc { font-size: 13px; color: rgba(244, 242, 233, .72); }
.app-ui .result-divider { height: 0; border-top: 1.5px dashed rgba(244, 242, 233, .3); background: none; margin: 22px 0 14px; }
.app-ui .result-line { align-items: baseline; font-size: 14px; color: rgba(244, 242, 233, .82); }
.app-ui .result-line span { flex: 1; display: flex; align-items: baseline; }
.app-ui .result-line span::after { content: ""; flex: 1; min-width: 12px; margin-left: 8px; border-bottom: 1.5px dotted rgba(244, 242, 233, .3); transform: translateY(-3px); }
.app-ui .result-line strong { font-size: 15px; font-weight: 700; color: #F4F2E9; }
.app-ui .result-line.profit span, .app-ui .result-line.profit strong { color: var(--lime); }
.app-ui .margin-track { height: 8px; background: rgba(244, 242, 233, .2); }
.app-ui .track-labels { font-size: 12px; color: rgba(244, 242, 233, .7); }
.app-ui .result-details { border-color: rgba(244, 242, 233, .22); }
.app-ui .result-details div + div { border-color: rgba(244, 242, 233, .22); }
.app-ui .result-details span { font-size: 12px; color: rgba(244, 242, 233, .7); }
.app-ui .result-details strong { font-size: 17px; font-weight: 750; }
.app-ui .result-card .button { min-height: 50px; }
.app-ui .result-card .button.outline { background: transparent; color: #F4F2E9; border-color: rgba(244, 242, 233, .6); }
.app-ui .result-card .button.outline:hover { background: rgba(244, 242, 233, .1); border-color: #F4F2E9; }
.app-ui .result-footnote { font-size: 12px; color: rgba(244, 242, 233, .62); }
.app-ui #calculation-error { background: var(--warn-wash); color: var(--warn); font-size: 13px; font-weight: 600; border-radius: 10px; }

.app-ui .cost-panel { background: #FFF; border: 1.5px solid var(--ink); border-radius: 16px !important; padding: 22px; box-shadow: var(--sheet-shadow); }
.app-ui .cost-panel h3 { font-size: 16px; font-weight: 800; font-stretch: 106%; letter-spacing: -.01em; }
.app-ui .cost-line { align-items: baseline; font-size: 14px; color: var(--ink-2); }
.app-ui .cost-line span { flex: 1; }
.app-ui .cost-line span::after { content: ""; flex: 1; min-width: 10px; border-bottom: 1.5px dotted var(--line); transform: translateY(-3px); }
.app-ui .cost-line strong { font-size: 14px; font-weight: 700; color: var(--ink); }
.app-ui .legend { width: 10px; height: 10px; border-radius: 3px; }
.app-ui .labor { background: var(--ink); } .app-ui .products { background: var(--lime-2); } .app-ui .travel { background: #8FA89A; } .app-ui .overhead { background: var(--line); }
.app-ui .cost-bottom { border-top: 1.5px solid var(--ink); font-size: 13px; color: var(--ink-2); }
.app-ui .cost-bottom strong { color: var(--ink); }

/* ---------- Encarts ---------- */
.app-ui .example-note { background: var(--lime-wash); border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink-2); font-size: 14px; }
.app-ui .example-note strong { color: var(--ink); }
.app-ui .example-note button { min-width: 36px; min-height: 36px; color: var(--ink); font-size: 20px; }
.app-ui .assistant-panel > summary { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 17px; font-weight: 800; font-stretch: 104%; list-style: none; cursor: pointer; }
.app-ui .assistant-panel > summary::-webkit-details-marker { display: none; }
.app-ui .assistant-panel > summary::after { content: ""; flex: none; width: 32px; height: 32px; margin-left: 0; border: 1.5px solid var(--ink); border-radius: 8px; background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23102D24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.app-ui .assistant-panel[open] > summary::after { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23102D24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.app-ui .assistant-panel .optional { margin-left: auto; padding: 3px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper-2); font-size: 12px; font-weight: 700; }
.app-ui .brief-message { font-size: 13px; color: var(--ink-3); }
.app-ui .readiness-card, .app-ui .negotiation-card { background: #FFF; border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: var(--sheet-shadow); }
.app-ui .readiness-card li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink-3); }
.app-ui .readiness-card li::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px dashed var(--ink-3); border-radius: 5px; }
.app-ui .readiness-card li[data-ready=true] { color: var(--ink); }
.app-ui .readiness-card li[data-ready=true]::before { border: 0; background: var(--tick) center / contain no-repeat; }
.app-ui .readiness-card p, .app-ui .negotiation-card p { font-size: 14px; color: var(--ink-2); }
.app-ui .negotiation-card label { font-size: 14px; }
.app-ui .negotiation-card small { font-size: 12px; color: var(--ink-3); }

/* ---------- Mes simulations ---------- */
.app-ui .saved-card { background: #FFF; border: 1.5px solid var(--ink); border-radius: 14px; padding: 18px 20px; box-shadow: var(--sheet-shadow); }
.app-ui .saved-title h2 { font-size: 18px; font-weight: 800; font-stretch: 104%; letter-spacing: -.015em; }
.app-ui .saved-title p { font-size: 13px; color: var(--ink-3); }
.app-ui .saved-price { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.app-ui .saved-price small { font-size: 12px; color: var(--ink-3); }
.app-ui .saved-actions { flex-wrap: wrap; gap: 6px; }
.app-ui .saved-toolbar label { max-width: 520px; }
.app-ui .empty-state { background: #FFF; border: 1.5px dashed var(--ink-3); border-radius: 16px; }
.app-ui .empty-state .empty-icon { display: block; width: 44px; height: 44px; margin: 0 auto 8px; font-size: 0; background: var(--tick) center / contain no-repeat; }
.app-ui .empty-state h2 { font-size: 22px; font-weight: 800; font-stretch: 106%; }
.app-ui .empty-state p { color: var(--ink-2); }
.app-ui .compare-table { font-size: 14px; }
.app-ui .compare-table th { color: var(--ink); font-weight: 800; border-bottom: 1.5px solid var(--ink); }
.app-ui .compare-select input { accent-color: var(--ink); }

/* ---------- Mon entreprise ---------- */
.app-ui .company-panel, .app-ui .information-panel, .app-ui .billing-panel { max-width: 820px; }
.app-ui .local-note { font-size: 13px; color: var(--ink-3); }
.app-ui .information-panel { background: var(--paper-2); border-style: dashed; border-color: var(--ink-3); box-shadow: none !important; }
.app-ui .information-panel h2, .app-ui .billing-panel h2 { font-size: 20px; font-weight: 800; font-stretch: 106%; letter-spacing: -.02em; }
.app-ui .information-panel p { font-size: 14px; color: var(--ink-2); }
.app-ui .billing-panel { background: var(--lime-wash); }
.app-ui .billing-panel p { font-size: 15px; line-height: 1.55; color: var(--ink); }
.app-ui .danger-zone { max-width: 820px; margin: 0 0 20px; padding: 16px; border: 1.5px dashed var(--warn); border-radius: 14px; }

/* ---------- Fenêtres ---------- */
.app-ui dialog { border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(16, 45, 36, .6); }
.app-ui dialog::backdrop { background: rgba(16, 45, 36, .55); }
.app-ui .dialog-head { border-bottom: 1.5px solid var(--line); }
.app-ui .dialog-head h2, .app-ui .confirm-content h2 { font-size: 22px; font-weight: 800; font-stretch: 106%; letter-spacing: -.02em; }
.app-ui .confirm-content p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.app-ui .dialog-actions { background: var(--paper-2); border-top: 1.5px solid var(--line); }
.app-ui .confirm-content .dialog-actions { background: #FFF; border-top: 0; }
.app-ui #toast { background: var(--ink); color: #F4F2E9; border: 1.5px solid var(--lime); border-radius: 12px; font-size: 14px; font-weight: 600; }
.app-ui .app-footer { font-size: 12px; color: var(--ink-3); }
.app-ui .app-footer a { color: var(--ink-2); }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 950px) {
  .app-ui .sidebar { background: var(--paper-2); border-right: 0 !important; border-bottom: 1.5px solid var(--line) !important; }
  .app-ui .sidebar .brand { font-size: 21px !important; }
  .app-ui .brand-mark img { height: 34px; }
  .app-ui .sidebar nav { gap: 4px; padding: 4px; border-radius: 13px; background: rgba(16, 45, 36, .07); }
  .app-ui .sidebar .nav-item { min-height: 46px; padding: 0 6px !important; font-size: 13px !important; justify-content: center; }
  .app-ui .account-strip { font-size: 13px; }
  .app-ui .page-header { flex-direction: column; align-items: stretch; padding-top: 24px; }
  .app-ui .page-header h1 { font-size: 32px !important; }
  .app-ui .header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .app-ui .header-actions .button { flex: 1 1 auto; font-size: 14px !important; min-height: 46px; padding: 0 14px !important; }
  .app-ui .guide-nav button { min-height: 46px; font-size: 13px; padding: 0 6px; }
  .app-ui .mobile-summary { background: var(--ink); color: #F4F2E9; border-top: 0; box-shadow: 0 -12px 30px -18px rgba(16, 45, 36, .8); }
  .app-ui .mobile-summary span { color: rgba(244, 242, 233, .72); font-size: 12px; }
  .app-ui .mobile-summary strong { color: var(--lime); font-size: 20px; font-weight: 800; }
  .app-ui .mobile-summary .button { background: var(--lime); color: var(--ink); border-color: var(--lime); font-size: 14px !important; }
}
@media (max-width: 650px) {
  .app-ui .form-grid { grid-template-columns: minmax(0, 1fr); }
  .app-ui .task-head, .app-ui .task-row { grid-template-columns: minmax(84px, 1.4fr) 64px minmax(50px, .6fr) minmax(54px, .7fr) 32px; gap: 5px; }
  .app-ui .task-row input, .app-ui .task-row select { padding: 8px 6px; font-size: 14px; }
  .app-ui .saved-card { flex-wrap: wrap; }
  .app-ui .danger-zone .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .app-ui *, .app-ui *::before, .app-ui *::after { transition: none !important; animation: none !important; }
}
.app-ui .assistant-panel { background: #FFF !important; border: 1.5px solid var(--ink) !important; }
@media (max-width: 650px) {
  .app-ui .guide-nav button { gap: 5px; padding: 0 4px; font-size: 12.5px; line-height: 1.2; }
  .app-ui .guide-nav button span { width: 22px; height: 22px; font-size: 11px; }
}

/* ---------- Lot 09/10 : un seul espace, IA en avant ---------- */
.app-ui .app-nav a.nav-item { text-decoration: none; }
.app-ui #draft-status, .app-ui #refresh-account, .app-ui .interface-language { display: none !important; }
.app-ui .prototype a { color: var(--ink-2); font-weight: 650; }
.app-ui .ai-badge { display: inline-grid; place-items: center; flex: none; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 7px; background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: .04em; font-stretch: 90%; }
.app-ui .sidebar-ai { display: grid; gap: 6px; margin-top: auto; padding: 16px 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--lime); color: var(--ink); text-decoration: none; box-shadow: var(--sheet-shadow); transition: transform .18s; }
.app-ui .sidebar-ai:hover { transform: translateY(-2px); }
.app-ui .sidebar-ai strong { font-size: 15px; font-weight: 800; font-stretch: 104%; line-height: 1.2; }
.app-ui .sidebar-ai span:last-child { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.app-ui .sidebar-ai .ai-badge { justify-self: start; }

.app-ui .assistant-panel { position: relative; overflow: hidden; background: #FFF !important; border: 2px solid var(--ink) !important; box-shadow: 0 30px 60px -38px rgba(16, 45, 36, .7) !important; }
.app-ui .assistant-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, var(--ink), var(--lime-2), var(--ink)); }
.app-ui .assistant-panel > summary { font-size: 19px; }
.app-ui .assistant-panel .optional { background: var(--lime); border-color: var(--ink); color: var(--ink); }
.app-ui .assistant-panel .section-title { display: flex !important; margin-top: 18px; }
.app-ui .assistant-panel .section-title .step { width: auto; padding: 0 8px; background: var(--ink); color: var(--lime); }
.app-ui .assistant-panel .section-title h2 { font-size: clamp(22px, 1rem + 1vw, 28px) !important; line-height: 1.1; }
.app-ui .ai-steps { counter-reset: ai; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 20px; padding: 0; }
.app-ui .ai-steps li { counter-increment: ai; position: relative; padding: 14px 14px 14px 52px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.app-ui .ai-steps li::before { content: counter(ai); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 13px; }
.app-ui .ai-steps b { color: var(--ink); }
.app-ui #brief-form textarea { min-height: 120px; }
.app-ui .assistant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.app-ui #analyze-brief { min-height: 52px; padding: 0 22px; font-size: 16px; }
.app-ui .brief-message { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.app-ui .assistant-panel.is-thinking .brief-message { color: var(--ink); }
.app-ui .assistant-panel.is-thinking .brief-message::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--lime-2); box-shadow: 0 0 0 0 rgba(188, 231, 96, .7); animation: ai-pulse 1.2s infinite; vertical-align: 1px; }
@keyframes ai-pulse { 70% { box-shadow: 0 0 0 10px rgba(188, 231, 96, 0); } 100% { box-shadow: 0 0 0 0 rgba(188, 231, 96, 0); } }
.app-ui .brief-impact { display: flex; gap: 10px; margin: 18px 0 14px; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.45; }
.app-ui .brief-impact::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--tick) center / contain no-repeat; }
.app-ui .brief-result h3 { margin: 16px 0 6px; font-size: 15px; font-weight: 800; }
.app-ui .brief-result ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }

.app-ui .danger-zone { display: block; padding: 0; border: 1.5px dashed var(--line); background: transparent; }
.app-ui .danger-zone > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 16px; font-size: 14px; font-weight: 700; color: var(--ink-3); cursor: pointer; list-style: none; }
.app-ui .danger-zone > summary::-webkit-details-marker { display: none; }
.app-ui .danger-zone > summary::after { content: "+"; font-size: 20px; color: var(--ink-3); }
.app-ui .danger-zone[open] { border-color: var(--warn); }
.app-ui .danger-zone[open] > summary::after { content: "−"; }
.app-ui .danger-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 16px 16px; }
.app-ui .billing-panel { margin-bottom: 20px; }
.app-ui #create-job-link { margin-top: 0; }

/* Mon activité dans la même coque que le logiciel */
.ops-app { margin: 0; }
.ops-app .app-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.ops-app .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.ops-app .brand { display: flex; align-items: center; text-decoration: none; white-space: nowrap; }
.ops-app .sidebar nav { display: flex; flex-direction: column; }
.ops-app .nav-item { display: flex; align-items: center; gap: 11px; }
.ops-app .count, .ops-app .ops-tabs { display: none !important; }
.ops-app .workspace-label { display: block; }
.ops-app .prototype { margin-top: 18px; }
.ops-app .ops-main { min-width: 0; }
@media (max-width: 950px) {
  .ops-app .app-shell { grid-template-columns: minmax(0, 1fr); }
  .ops-app .sidebar { position: static; height: auto; padding: 14px 16px !important; }
  .ops-app .sidebar nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; }
  .ops-app .sidebar .nav-item { justify-content: center; font-size: 13px; padding: 0 6px; }
  .ops-app .sidebar .nav-item > span:first-child { display: none; }
  .ops-app .back-to-site, .ops-app .workspace-label, .ops-app .sidebar-ai, .ops-app .prototype { display: none; }
}
@media (max-width: 950px) {
  .app-ui .sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .app-ui .sidebar-ai { display: none; }
}
@media (max-width: 760px) {
  .app-ui .ai-steps { grid-template-columns: minmax(0, 1fr); }
}
.app-ui .assistant-panel h2, .app-ui .assistant-panel h3, .app-ui .assistant-panel p, .app-ui .assistant-panel label { color: var(--ink) !important; }
.app-ui .assistant-panel .section-title p { color: var(--ink-2) !important; }

/* Premiers pas */
.app-ui .premiers-pas { margin: 0 0 24px; padding: 20px 22px; background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--lime); }
.app-ui .pp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.app-ui .pp-eyebrow { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.app-ui .premiers-pas h2 { margin: 0; font-size: 22px; line-height: 1.15; color: var(--ink) !important; }
.app-ui .pp-close { flex: none; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(16,45,36,.2); background: transparent; color: var(--ink); font-size: 20px; cursor: pointer; }
.app-ui .pp-bar { height: 6px; margin: 14px 0 16px; border-radius: 99px; background: rgba(16,45,36,.08); overflow: hidden; }
.app-ui .pp-bar span { display: block; height: 100%; background: var(--ink); border-radius: inherit; transition: width .4s ease; }
.app-ui .pp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.app-ui .pp-list a { display: flex; gap: 10px; height: 100%; padding: 12px; border-radius: 12px; border: 1px solid rgba(16,45,36,.14); color: var(--ink); text-decoration: none; background: var(--paper); }
.app-ui .pp-list a:hover { border-color: var(--ink); }
.app-ui .pp-list strong { display: block; font-size: 14px; line-height: 1.3; }
.app-ui .pp-list small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.app-ui .pp-mark { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--ink); background: #fff; }
.app-ui .pp-list .is-done a { background: rgba(207,245,127,.35); }
.app-ui .pp-list .is-done .pp-mark { background: var(--lime) var(--tick) center / 70% no-repeat; }
.app-ui .pp-list .is-done strong { text-decoration: line-through; text-decoration-color: rgba(16,45,36,.4); }
@media (max-width: 1100px) { .app-ui .pp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .app-ui .pp-list { grid-template-columns: 1fr; } .app-ui .premiers-pas { padding: 16px; } }

/* Bandeaux photo des en-têtes (photos Unsplash d'équipes de nettoyage) */
.app-ui .view > .page-header, .app-ui .ops-hero { position: relative; margin-top: 18px; padding: 30px 32px; border-radius: 22px; border: 1.5px solid var(--ink); overflow: hidden; background-color: var(--bg); background-size: cover; background-position: right center; }
.app-ui #calculator-view > .page-header { background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 46%, rgba(244,242,233,.25) 78%, rgba(244,242,233,0) 100%), url("./assets/photos/bureau.webp"); }
.app-ui #saved-view > .page-header { background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 46%, rgba(244,242,233,.25) 78%, rgba(244,242,233,0) 100%), url("./assets/photos/sol.webp"); }
.app-ui #company-view > .page-header { background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 46%, rgba(244,242,233,.25) 78%, rgba(244,242,233,0) 100%), url("./assets/photos/tissu.webp"); }
.app-ui .ops-hero { margin: 0 0 22px; background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 50%, rgba(244,242,233,.2) 80%, rgba(244,242,233,0) 100%), url("./assets/photos/hotel.webp"); background-position: right 30%; }
.app-ui .ops-hero > :last-child { margin-bottom: 0; }
.app-ui .view > .page-header .header-actions { position: relative; }
@media (max-width: 760px) {
  .app-ui .view > .page-header, .app-ui .ops-hero { padding: 132px 18px 20px; background-position: center top; background-size: 100% auto, cover; }
  .app-ui #calculator-view > .page-header, .app-ui #saved-view > .page-header, .app-ui #company-view > .page-header, .app-ui .ops-hero { background-image: none; }
  .app-ui .view > .page-header::before, .app-ui .ops-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 116px; background: var(--ph) center / cover; border-bottom: 1.5px solid var(--ink); }
  .app-ui #calculator-view > .page-header { --ph: url("./assets/photos/bureau.webp"); }
  .app-ui #saved-view > .page-header { --ph: url("./assets/photos/sol.webp"); }
  .app-ui #company-view > .page-header { --ph: url("./assets/photos/tissu.webp"); }
  .app-ui .ops-hero { --ph: url("./assets/photos/hotel.webp"); }
}
.app-ui .ops-hero > *, .app-ui .view > .page-header > div:first-child { max-width: min(560px, 58%); }
@media (max-width: 760px) { .app-ui .ops-hero > *, .app-ui .view > .page-header > div:first-child { max-width: none; } }

/* Mon activité : une photo par onglet ; états vides illustrés */
.app-ui[data-tab="clients"] .ops-hero { background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 50%, rgba(244,242,233,.2) 80%, rgba(244,242,233,0) 100%), url("./assets/photos/hall-entree.webp"); background-position: right center; }
.app-ui[data-tab="reports"] .ops-hero { background-image: linear-gradient(90deg, rgba(244,242,233,.98) 0%, rgba(244,242,233,.94) 50%, rgba(244,242,233,.2) 80%, rgba(244,242,233,0) 100%), url("./assets/photos/agent-chariot.webp"); background-position: right center; }
.app-ui .ops-empty::before, .app-ui .empty-state::before { content: ""; display: block; height: 120px; margin: 0 0 16px; border-radius: 12px; background: url("./assets/photos/vitres-facade.webp") center / cover; }
.app-ui .empty-state::before { background-image: url("./assets/photos/hall-entree.webp"); }
@media (max-width: 760px) {
  .app-ui[data-tab="clients"] .ops-hero { background-image: none; --ph: url("./assets/photos/hall-entree.webp"); }
  .app-ui[data-tab="reports"] .ops-hero { background-image: none; --ph: url("./assets/photos/agent-chariot.webp"); }
}

/* Barre latérale : photo d'équipe en arrière-plan, fondue vers le haut */
@media (min-width: 761px) {
  .app-ui .sidebar { background-image: linear-gradient(180deg, rgba(235,232,218,1) 0%, rgba(235,232,218,.97) 40%, rgba(235,232,218,.72) 72%, rgba(235,232,218,.35) 100%), url("./assets/photos/agent-chariot.webp"); background-size: cover; background-position: center bottom; }
  .app-ui.ops-app .sidebar { background-image: linear-gradient(180deg, rgba(235,232,218,1) 0%, rgba(235,232,218,.97) 40%, rgba(235,232,218,.72) 72%, rgba(235,232,218,.35) 100%), url("./assets/photos/vitres-nacelle.webp"); }
}

/* Compteur du plan gratuit */
.app-ui .plan-quota { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--lime-wash); border: 1px solid rgba(16,45,36,.18); font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.app-ui .plan-quota a { color: var(--ink); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.app-ui .plan-quota.is-full { background: var(--warn-wash); border-color: rgba(169,64,29,.35); }

/* Téléphone : versions légères des photos d'en-tête ; vignettes des états vides toujours légères */
@media (max-width: 760px) {
  .app-ui #calculator-view > .page-header { --ph: url("./assets/photos/bureau-700.webp"); }
  .app-ui #saved-view > .page-header { --ph: url("./assets/photos/sol-700.webp"); }
  .app-ui #company-view > .page-header { --ph: url("./assets/photos/tissu-700.webp"); }
  .app-ui .ops-hero { --ph: url("./assets/photos/hotel-700.webp"); }
  .app-ui[data-tab="clients"] .ops-hero { --ph: url("./assets/photos/hall-entree-700.webp"); }
  .app-ui[data-tab="reports"] .ops-hero { --ph: url("./assets/photos/agent-chariot-700.webp"); }
}
.app-ui .ops-empty::before { background-image: url("./assets/photos/vitres-facade-700.webp"); }
.app-ui .empty-state::before { background-image: url("./assets/photos/hall-entree-700.webp"); }

/* Impression : seul le document (devis ou rapport) sort sur la feuille.
   refresh-v6.css force .app-shell en display:block!important sous 900 px (une page A4 l'est) :
   ces règles plus précises reprennent la main. */
@media print {
  body.app-ui { background: #FFF !important; }
  body.app-ui .app-shell, body.app-ui > dialog, body.app-ui #toast, body.app-ui .mobile-summary, body.app-ui .noscript, body.app-ui .interface-language { display: none !important; }
  body.app-ui #print-area, body.app-ui.ops-app #report-print-area { display: block !important; }
}

/* ---------- Nouveau devis : discussion avec l'IA, vérification des 3 chiffres, mode détaillé ---------- */
.app-ui .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-ui .quote-chat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; align-items: start; margin-bottom: 20px; }
.app-ui .qc-conversation { display: flex; flex-direction: column; min-width: 0; height: clamp(540px, 76vh, 780px); background: #FFF; border: 1.5px solid var(--ink); border-radius: 16px; box-shadow: var(--sheet-shadow); overflow: hidden; }
.app-ui .qc-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1.5px solid var(--line-soft); }
.app-ui .qc-head h2 { margin: 0; font-size: 18px; font-weight: 800; font-stretch: 104%; letter-spacing: -.01em; }
.app-ui .qc-head p { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
.app-ui .qc-head .text-button { margin-left: auto; font-size: 13px; }
.app-ui .qc-messages { flex: 1; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; list-style: none; overflow-y: auto; background: var(--field); overscroll-behavior: contain; }
.app-ui .qc-msg { display: flex; align-items: flex-end; gap: 8px; }
.app-ui .qc-bubble { max-width: min(78%, 62ch); padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.app-ui .qc-bubble p { margin: 0; white-space: pre-line; }
.app-ui .qc-assistant .qc-bubble { background: #FFF; border: 1.5px solid var(--line); border-bottom-left-radius: 5px; color: var(--ink); }
.app-ui .qc-user { justify-content: flex-end; }
.app-ui .qc-user .qc-bubble { background: var(--ink); color: #F4F2E9; border-bottom-right-radius: 5px; }
.app-ui .qc-action { display: inline-flex; align-items: center; min-height: 40px; margin-top: 10px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--lime); color: var(--ink); font-weight: 800; text-decoration: none; }
.app-ui .qc-action:hover { background: var(--lime-2); }
.app-ui .qc-msg .ai-badge { margin-bottom: 4px; }
.app-ui .qc-dots { display: inline-flex; gap: 5px; padding: 4px 2px; }
.app-ui .qc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: qc-dot 1.2s infinite ease-in-out; }
.app-ui .qc-dots i:nth-child(2) { animation-delay: .15s; }
.app-ui .qc-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes qc-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.app-ui .qc-status { margin: 0; padding: 10px 20px; background: var(--warn-wash); color: var(--warn); font-size: 14px; font-weight: 600; }
.app-ui .qc-gate { margin: 0; padding: 12px 20px; background: var(--lime-wash); border-top: 1.5px solid var(--line-soft); font-size: 14px; line-height: 1.5; }
.app-ui .qc-gate a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.app-ui .qc-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; padding: 14px 20px 6px; border-top: 1.5px solid var(--line-soft); }
.app-ui .qc-form textarea { width: 100%; min-height: 52px; max-height: 180px; padding: 13px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: #FFF; font-size: 15px; resize: vertical; }
.app-ui .qc-form textarea:disabled { background: var(--paper-2); border-color: var(--line); }
.app-ui .qc-form .button { min-height: 52px; }
.app-ui .qc-privacy { margin: 0; padding: 0 20px 14px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

.app-ui .qc-summary { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--ink); color: #F4F2E9; box-shadow: 0 30px 60px -36px rgba(16, 45, 36, .9); }
.app-ui .qc-summary-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .14em; }
.app-ui .qc-summary-top .live-badge { padding: 4px 8px; border-radius: 6px; }
.app-ui .qc-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 4px 0 0; font-size: 14px; }
.app-ui .qc-facts dt { color: rgba(244, 242, 233, .66); }
.app-ui .qc-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.app-ui .qc-summary h3 { margin: 6px 0 0; font-size: 11px; font-weight: 700; font-stretch: 75%; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 242, 233, .66); }
.app-ui .qc-tasks { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.app-ui .qc-tasks li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed rgba(244, 242, 233, .22); }
.app-ui .qc-tasks li span { flex: none; color: rgba(244, 242, 233, .8); }
.app-ui .qc-tasks .qc-empty { display: block; color: rgba(244, 242, 233, .66); border: 0; }
.app-ui .qc-price { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.app-ui .qc-price span { font-size: 13px; color: rgba(244, 242, 233, .75); }
.app-ui .qc-price strong { font-size: 34px; font-weight: 800; font-stretch: 108%; letter-spacing: -.03em; color: var(--lime); }
.app-ui .qc-price small { font-size: 12px; line-height: 1.45; color: rgba(244, 242, 233, .66); }
.app-ui .qc-summary .button { width: 100%; min-height: 50px; }
.app-ui .qc-summary .button:disabled { opacity: .45; cursor: not-allowed; }
.app-ui .qc-missing { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(244, 242, 233, .75); }
.app-ui .qc-missing:empty { display: none; }

.app-ui .qc-review { scroll-margin-top: 16px; }
/* Options internationales (UX-1) : repliées par défaut pour un compte français. */
.app-ui .intl-options { margin-top: 18px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--paper-2, #FBFAF5); }
.app-ui .intl-options > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 14px; color: var(--ink-2); list-style-position: inside; }
.app-ui .intl-options[open] > summary { border-bottom: 1px solid var(--line); }
.app-ui .intl-options .intl-help { margin: 12px 16px 0; font-size: 13px; color: var(--ink-3); }
.app-ui .intl-options .form-grid { padding: 14px 16px 16px; }
/* Conditions de vos devis (profil) : un texte proposé, modifiable. */
.app-ui .legal-block { margin: 22px 0 0; padding: 16px; border: 1.5px solid var(--line); border-radius: 12px; }
.app-ui .legal-block legend { padding: 0 8px; font-weight: 800; font-size: 15px; }
.app-ui .legal-block textarea { font-size: 14px; line-height: 1.5; }
.app-ui .legal-note { font-size: 12px; font-style: italic; color: var(--ink-3); }
.app-ui .legal-block > .legal-note { margin: 0 0 10px; }
.app-ui .qr-help { font-size: 12.5px; font-weight: 600; color: #8a4b1f; }
.app-ui .qr-help.is-error { color: #b3261e; }
.app-ui #qr-client[aria-invalid] { border-color: #c9733a; }
.app-ui .pending-card { border-style: dashed; background: var(--lime-wash, #eef7d0); }
.app-ui .qr-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.app-ui .qr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; }
.app-ui .qr-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 16px 58px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--field); }
.app-ui .qr-num { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--lime); font-weight: 800; }
.app-ui .qr-label { font-size: 15px; font-weight: 800; line-height: 1.3; }
.app-ui .qr-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.app-ui .qr-rates { display: flex; flex-direction: column; gap: 10px; }
.app-ui .qr-rate { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 650; }
.app-ui .qr-item .input-unit input { padding-right: 86px; }
.app-ui .qr-margin { display: flex; flex-direction: column; gap: 10px; }
.app-ui .qr-margin input[type="range"] { width: 100%; accent-color: var(--ink); }
.app-ui .qr-bottom { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); grid-template-areas: "result result" "vat actions"; gap: 16px 24px; align-items: end; margin-top: 20px; padding-top: 18px; border-top: 1.5px solid var(--line-soft); }
.app-ui .qr-result { grid-area: result; }
.app-ui .qr-vat { grid-area: vat; }
.app-ui .qr-actions { grid-area: actions; }
.app-ui .qr-vat { display: flex; flex-direction: column; }
.app-ui .qr-result { display: flex; flex-direction: column; gap: 3px; }
.app-ui .qr-result > span { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.app-ui .qr-result strong { white-space: nowrap; font-size: 32px; font-weight: 800; font-stretch: 108%; letter-spacing: -.03em; }
.app-ui .qr-result strong small { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.app-ui .qr-result > small { max-width: 72ch; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.app-ui .qr-result > small:empty { display: none; }
.app-ui .qr-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.app-ui .qr-actions .button { min-height: 52px; }
.app-ui .qr-actions .button:disabled { opacity: .45; cursor: not-allowed; }

.app-ui .detailed-mode { margin-bottom: 20px; }
.app-ui .detailed-mode > summary { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 16px 64px 16px 20px; border: 1.5px dashed var(--ink); border-radius: 14px; background: rgba(255, 255, 255, .55); list-style: none; cursor: pointer; }
.app-ui .detailed-mode > summary::-webkit-details-marker { display: none; }
.app-ui .detailed-mode > summary::after { content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 1.5px solid var(--ink); border-radius: 8px; background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23102D24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.app-ui .detailed-mode[open] > summary { margin-bottom: 20px; border-style: solid; background: #FFF; }
.app-ui .detailed-mode[open] > summary::after { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23102D24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.app-ui .dm-title { font-size: 17px; font-weight: 800; font-stretch: 104%; }
.app-ui .dm-sub { font-size: 13.5px; color: var(--ink-3); }

.app-ui .kind-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; border: 0; }
.app-ui .kind-choice legend { margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 650; }
.app-ui .kind-choice label { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--field); cursor: pointer; }
.app-ui .kind-choice label:has(input:checked) { border-color: var(--ink); background: var(--lime-wash); }
.app-ui .kind-choice input[type="radio"] { flex: none; width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 3px 0 0; padding: 0; border: 0; background: none; box-shadow: none !important; accent-color: var(--ink); }
.app-ui .qr-margin input[type="range"] { height: 28px; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none !important; }
.app-ui .kind-choice span { display: flex; flex-direction: column; gap: 2px; }
.app-ui .kind-choice b { font-size: 15px; }
.app-ui .kind-choice small { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
body.app-ui.kind-ponctuel .contract-only, body.app-ui:not(.kind-ponctuel) .oneoff-only { display: none !important; }

@media (max-width: 1100px) {
  .app-ui .quote-chat { grid-template-columns: 1fr; }
  .app-ui .qc-summary { position: static; }
  .app-ui .qr-grid { grid-template-columns: 1fr; }
  .app-ui .qr-bottom { grid-template-columns: 1fr; grid-template-areas: "result" "vat" "actions"; align-items: stretch; }
  .app-ui .qr-actions { justify-content: stretch; }
  .app-ui .qr-actions .button { flex: 1 1 auto; }
}
@media (max-width: 650px) {
  .app-ui .qc-conversation { height: 82vh; border-radius: 14px; }
  .app-ui .qc-head, .app-ui .qc-messages, .app-ui .qc-form { padding-left: 14px; padding-right: 14px; }
  .app-ui .qc-head p { display: none; }
  .app-ui .qc-privacy { padding: 0 14px 12px; }
  .app-ui .qc-bubble { max-width: 86%; }
  .app-ui .qc-form { grid-template-columns: 1fr; }
  .app-ui .qr-who, .app-ui .kind-choice { grid-template-columns: 1fr; }
  .app-ui .qr-item { padding-left: 16px; padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .app-ui .qc-dots i { animation: none; opacity: .7; } }

.app-ui .optional-tag { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.app-ui .qr-who .qr-wide { grid-column: 1 / -1; }
.app-ui .qr-who textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); font-size: 15px; resize: vertical; }
.app-ui .qc-starters { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; background: var(--field); }
.app-ui .qc-starters[hidden] { display: none; }
.app-ui .qc-starter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: #FFF; color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.app-ui .qc-starter:hover { background: var(--lime-wash); }
@media (max-width: 650px) { .app-ui .qc-starters { padding: 0 14px 12px; } }

/* Suivi des devis envoyés et fenêtre d'envoi au client */
.app-ui .quote-status { display: inline-flex; align-items: center; margin-top: 7px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; line-height: 1.35; background: var(--paper-2); color: var(--ink-2); }
.app-ui .quote-status-accepted { background: var(--lime); color: var(--ink); border: 1px solid var(--ink); }
.app-ui .quote-status-declined, .app-ui .quote-status-expired { background: var(--warn-wash); color: var(--warn); }
.app-ui .quote-status-remind { background: #FFF4D6; color: #7A5300; }
.app-ui .quote-status-late { background: #FFE6BF; color: #7A3D00; }
.app-ui .send-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; border: 1.5px solid var(--ink); border-radius: 16px; }
.app-ui .send-dialog::backdrop { background: rgba(16, 45, 36, .45); }
.app-ui .send-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; }
.app-ui .send-intro, .app-ui .send-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.app-ui .send-field { display: flex; flex-direction: column; gap: 6px; }
.app-ui .send-field input, .app-ui .send-field textarea { width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--field); font-size: 14.5px; }
.app-ui .send-field textarea { min-height: 190px; resize: vertical; line-height: 1.5; }
.app-ui .send-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.app-ui .send-buttons .button { display: inline-flex; align-items: center; text-decoration: none; }
.app-ui .send-phone { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1.5px dashed var(--line); border-radius: 12px; }
.app-ui .send-phone-title { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.app-ui .send-phone [aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.app-ui .send-status { margin: 0; min-height: 1.2em; overflow-wrap: anywhere; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.app-ui .send-body .text-button { align-self: flex-start; color: var(--warn); }
.app-ui .price-warnings { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.app-ui .price-warnings[hidden] { display: none; }
.app-ui .price-warnings li { padding: 8px 10px 8px 32px; border-radius: 10px; background: #FFF4D6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 1 18h18L10 2Z' fill='%23E3A008'/%3E%3Cpath d='M10 8v4M10 14.5v.5' stroke='%23102D24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 9px 9px / 16px no-repeat; color: #4A3200; font-size: 13px; font-weight: 600; line-height: 1.45; }
.app-ui .qc-form-buttons { display: flex; gap: 8px; }
.app-ui .qc-mic { display: inline-grid; place-items: center; width: 52px; min-height: 52px; border: 1.5px solid var(--ink); border-radius: 10px; background: #FFF; color: var(--ink); cursor: pointer; }
.app-ui .qc-mic[hidden] { display: none; }
.app-ui .qc-mic svg { width: 22px; height: 22px; }
.app-ui .qc-mic.listening { background: var(--warn); border-color: var(--warn); color: #FFF; animation: ai-pulse 1.2s infinite; }
@media (max-width: 650px) { .app-ui .qc-form-buttons .button { flex: 1; } }

/* Parcours simplifié : 4 étapes, réponses en un clic, bénéfice et prix plancher, envoi par e-mail */
.app-ui .qc-steps { display: flex; gap: 6px; margin: 0; padding: 10px 20px; list-style: none; border-bottom: 1.5px solid var(--line-soft); background: #FFF; overflow-x: auto; }
.app-ui .qc-steps li { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 11px 5px 6px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.app-ui .qc-steps li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line); border-radius: 50%; font-size: 12px; }
.app-ui .qc-steps li.current { background: var(--lime); color: var(--ink); }
.app-ui .qc-steps li.current span { border-color: var(--ink); background: #FFF; }
.app-ui .qc-steps li.done { color: var(--ink); }
.app-ui .qc-steps li.done span { border-color: var(--ink); background: var(--ink); color: var(--lime); font-size: 0; }
.app-ui .qc-steps li.done span::before { content: "✓"; font-size: 12px; }
.app-ui .qc-starters.qc-suggestions { padding-top: 2px; }
.app-ui .qc-suggestions .qc-starter { min-height: 38px; border-color: var(--ink); background: var(--lime-wash); font-size: 13.5px; }
.app-ui .qc-suggestions .qc-starter:hover { background: var(--lime); }
.app-ui .qc-gate.qc-note { padding: 8px 20px; background: var(--paper-2); font-size: 12.5px; color: var(--ink-2); }
.app-ui .qc-head p { display: none; }
.app-ui .qr-profit { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 2px; padding: 9px 12px; border-radius: 10px; background: var(--lime-wash); }
.app-ui .qr-profit:empty { display: none; }
.app-ui .qr-profit span { font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.app-ui .qr-profit b { margin-right: 6px; }
.app-ui .qr-guest-note { flex-basis: 100%; margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); text-align: right; }
.app-ui .qr-guest-note a { color: var(--ink); font-weight: 700; }
.app-ui .send-ai { margin-left: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.app-ui .send-remind { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; line-height: 1.45; }
.app-ui .send-remind input { flex: none; margin-top: 1px; }
.app-ui #send-mail-fields { display: flex; flex-direction: column; gap: 14px; }
.app-ui #send-mail-fields[hidden] { display: none; }
.app-ui .send-buttons .button[hidden] { display: none; }
.app-ui .saved-card.is-accepted { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--lime-2), var(--sheet-shadow); }
.app-ui .saved-card.is-accepted .saved-actions a[href*="activite.html"] { background: var(--lime); border-color: var(--ink); }
/* « Nouveau devis » : en-tête resserré, la discussion arrive tout de suite. */
@media (min-width: 761px) {
  .app-ui #calculator-view > .page-header { padding: 20px 26px; }
  .app-ui #calculator-view > .page-header h1 { margin: 8px 0 6px; font-size: clamp(26px, 1rem + 1.4vw, 36px) !important; }
}
@media (max-width: 760px) {
  .app-ui #calculator-view > .page-header { padding-top: 96px; }
  .app-ui #calculator-view > .page-header::before { height: 82px; }
  .app-ui #calculator-view > .page-header p { display: none; }
  .app-ui .qc-steps { padding: 8px 14px; }
}
.app-ui .invoice-notice { margin: 0; padding: 12px 14px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--lime); color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.app-ui .price-warnings a { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }