/* =====================================================================
   HOTIPARTS — espaces client et fournisseur, page de réponse aux demandes de prix.
   Complète app.css (mêmes variables). Toutes les classes sont préfixées « lp- ».
   ===================================================================== */

/* ------------------------------ Titres, espacements, textes ------------------------------ */
.lp-h2 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); margin: 0 0 .6em; display: flex; align-items: center; gap: 8px; }
.lp-h3 { font-size: 1.08rem; letter-spacing: -.005em; margin: 0 0 .7em; display: flex; align-items: center; gap: 8px; }
.lp-h2 .ic, .lp-h3 .ic { color: var(--c-primary); }
.lp-h4 { font-size: .95rem; letter-spacing: 0; margin: 1.1em 0 .5em; }
.card-head .lp-h2, .card-head .lp-h3 { margin: 0; }
.lp-gap { margin-top: 14px; }
.lp-gap-t { margin-top: 20px; }
.lp-gap-b { margin-bottom: 20px; }
.lp-pre { white-space: pre-line; overflow-wrap: anywhere; }
.lp-late { color: var(--c-alert); font-weight: 600; }
.lp-back { margin: 0 0 6px; font-size: .9rem; }
.lp-back a { color: var(--c-muted); text-decoration: none; display: inline-flex; align-items: center; gap: 2px; }
.lp-back a:hover { color: var(--c-primary); }
.content-head h1 .badge { vertical-align: middle; font-family: var(--font-body); letter-spacing: 0; font-size: .8rem; }
.content-head h1 { overflow-wrap: anywhere; }
.lp-section-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lp-section-head h2 { font-size: 1.15rem; margin: 0; letter-spacing: -.01em; }
.lp-section-head > a { margin-left: auto; }
.lp-form { max-width: 860px; }
.lp-narrow select, .lp-narrow input { max-width: 460px; }
.lp-fieldset { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.lp-fieldset legend { padding: 0; margin-bottom: 6px; }
.lp-fieldset .radio-cards { margin-top: 8px; }
.field input.lp-readonly { background: var(--c-surface-2) !important; color: var(--c-muted); border-color: var(--c-line) !important; }
.lp-inline { display: inline-flex; margin: 0; vertical-align: middle; }
.lp-inline-form { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 8px; }
.lp-inline-form .field { flex: 1 1 200px; }
.lp-inline-form > .btn { margin-bottom: 16px; }
@media (max-width: 520px) { .lp-inline-form > .btn { flex: 1 1 100%; } }
.lp-collapse { display: none; }
.lp-collapse.is-open { display: block; }
.lp-address { font-style: normal; line-height: 1.5; }
.dl dd .btn--icon.btn--small { min-height: 24px; height: 24px; width: 28px; vertical-align: middle; }
.content .dl dd, .lp-quote .dl dd { min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------ Listes de cartes (offres, commandes) ------------------------------ */
.lp-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-offer-card { position: relative; overflow: hidden; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); padding-left: calc(clamp(16px, 2.5vw, 24px) + 6px); }
.lp-offer-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-accent); }
@media (min-width: 640px) { .lp-offer-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.lp-offer-main { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.lp-offer-main .ic { width: 1em; height: 1em; }
.lp-offer-act { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 639px) { .lp-offer-act .btn { flex: 1 1 auto; } }
.lp-big-link { font-size: 1.15rem; color: var(--c-ink); text-decoration: none; }
a.lp-big-link:hover { color: var(--c-primary); }
.lp-amount { font: 800 1.2rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.lp-amount--big { font-size: 1.6rem; }

/* Lignes compactes (offres d'une demande) */
.lp-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.lp-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 0; border-top: var(--border); }
.lp-rows li:first-child { border-top: 0; padding-top: 0; }
.lp-row-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; grid-column: 1 / -1; min-width: 0; }
.lp-rows .btn { justify-self: end; }
@media (min-width: 640px) { .lp-rows li { grid-template-columns: minmax(0, 1fr) auto auto; } .lp-row-main { grid-column: auto; } }

/* Tableaux dans une carte */
.card .lp-flat { border-radius: var(--radius); }
.table tr.lp-row-off { background: color-mix(in srgb, var(--c-surface-2) 40%, transparent); }
.table tr.lp-row-off td { color: var(--c-muted); }
.lp-scroll { max-height: 440px; overflow: auto; }
@media (max-width: 720px) {
  .table--stack tr.lp-row-off td.lp-na { display: none; }
  /* cellules empilées : le libellé flotte à gauche, le contenu (plusieurs éléments possibles) reste groupé à droite */
  .table--stack.lp-stack td { display: block; text-align: right; overflow: hidden; }
  .table--stack.lp-stack td::before { float: left; margin-right: 12px; padding-top: 1px; }
  .table--stack.lp-stack td.actions { display: flex; justify-content: flex-end; gap: 6px; padding-top: 8px; }
  .table--stack.lp-stack td.actions::before { display: none; }
}
/* Champ quantité (+/−) dans les formulaires : corrige la règle générale des champs */
.lp-qitem-fields .field .qty input[type=number], .lp-form .field .qty input[type=number] { width: 64px; min-height: 42px; height: 42px; padding: 0; border: 0; border-radius: 0; box-shadow: none; text-align: center; font-weight: 600; }
.lp-qitem-fields .qty, .lp-form .qty { justify-self: start; }
.lp-qitem-fields .qty button, .lp-form .qty button { height: 42px; width: 42px; }

/* Totaux */
.dl.lp-totals { grid-template-columns: minmax(0, 1fr) auto; margin-top: 14px; padding-top: 12px; border-top: var(--border); }
.dl.lp-totals dd { white-space: nowrap; }
.dl.lp-totals .lp-total-label { font-weight: 700; color: var(--c-ink); align-self: center; }
.dl.lp-totals .lp-total { font: 800 1.3rem var(--font-head); font-variant-numeric: tabular-nums; }
.lp-dl-block { margin-top: 16px; }
.lp-facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; color: var(--c-muted); }
.lp-facts li { display: flex; gap: 8px; align-items: flex-start; }
.lp-facts .ic { margin-top: 2px; color: var(--c-ok); }
.lp-note { margin-top: 14px; padding: 12px 14px; background: var(--c-surface-2); border-radius: var(--radius); }
.lp-note .badge { margin-left: 4px; }

/* Étapes (frise verticale) */
.lp-timeline li { display: grid; gap: 1px; }
.lp-tl-label { font-weight: 600; line-height: 1.35; }
.lp-tl-date { font-size: .82rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.lp-tl-hint { font-size: .85rem; color: var(--c-muted); line-height: 1.4; margin-top: 2px; }
.lp-timeline li.is-todo .lp-tl-label { color: var(--c-muted); font-weight: 500; }
.lp-timeline li.is-stop::before { background: var(--c-alert); }
.lp-timeline li.is-stop .lp-tl-label { color: var(--c-alert); }

/* Messages */
.lp-thread { display: grid; gap: 10px; }
.lp-thread .msg { width: fit-content; max-width: min(70ch, 92%); }
.lp-msg-ref { margin-bottom: 4px; font-weight: 600; }
.lp-thread + .lp-msg-form { margin-top: 16px; padding-top: 16px; border-top: var(--border); }
.lp-thread .msg .badge { font-size: .72rem; }

/* Photos et fichiers */
.lp-files { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-files a { display: grid; justify-items: center; gap: 4px; width: 116px; padding: 8px; border: var(--border); border-radius: var(--radius); text-decoration: none; color: var(--c-ink); background: var(--c-surface); text-align: center; }
.lp-files a:hover { border-color: var(--c-ink); }
.lp-files img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-s); background: var(--c-surface-2); }
.lp-files .ic-lg { width: 40px; height: 40px; margin: 28px 0; color: var(--c-muted); }
.lp-files .small { overflow-wrap: anywhere; line-height: 1.25; font-size: .78rem; }

/* ------------------------------ Client ------------------------------ */
.lp-search { position: relative; }
.lp-search .input { min-width: 0; }
.lp-search .suggest { left: 0; right: 0; }
.lp-shortcuts .card p { margin-bottom: 12px; }
.lp-push { display: grid; gap: 12px; }
@media (min-width: 760px) { .lp-push { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.lp-push p { margin: 0 0 6px; }
.lp-ios { display: flex; gap: 6px; align-items: flex-start; }
.lp-ios .ic { flex: none; margin-top: 1px; }

/* Appel à l'action (offre à accepter) : même signature que la boîte de commande de la fiche pièce */
.lp-cta { display: grid; gap: 14px; margin-bottom: 20px; border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-accent); }
@media (min-width: 760px) { .lp-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.lp-cta .lp-h3 { margin-bottom: 4px; }
.lp-cta p { margin: 0; }
.lp-cta-act { display: flex; gap: 10px 16px; align-items: center; flex-wrap: wrap; }
@media (max-width: 759px) { .lp-cta-act .btn { flex: 1 1 100%; } }

#problem.is-open { margin-top: 18px; padding-top: 16px; border-top: var(--border); }
#problem .dropzone { margin-bottom: 12px; }
.lp-fav-remove { display: inline-flex; margin: 0; }
.lp-fav-remove .btn { color: var(--c-alert); }
.stars-input + .field, .lp-fieldset + .field { margin-top: 4px; }

/* ------------------------------ Fournisseur ------------------------------ */
.lp-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: clamp(18px, 3vw, 26px); border-radius: var(--radius-l); margin-bottom: 24px; border: 2px solid; }
.lp-banner > .ic { width: 36px; height: 36px; }
.lp-banner h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin: 0 0 6px; color: inherit; }
.lp-banner p { margin: 0 0 10px; max-width: 72ch; }
.lp-banner--wait { background: var(--c-warn-soft); border-color: color-mix(in srgb, var(--c-warn) 45%, transparent); color: color-mix(in srgb, var(--c-warn) 70%, #000); }
.lp-banner--alert { background: var(--c-alert-soft); border-color: color-mix(in srgb, var(--c-alert) 45%, transparent); color: color-mix(in srgb, var(--c-alert) 75%, #000); }
@media (max-width: 520px) { .lp-banner { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
.lp-kpi-money { font-size: 1.3rem !important; overflow-wrap: anywhere; }
.lp-shortcut { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--c-ink); }
.lp-shortcut:hover { border-color: var(--c-ink); color: var(--c-ink); }
.lp-shortcut > .ic { color: var(--c-primary); flex: none; }
.lp-shortcut > span { display: grid; gap: 2px; }
.lp-verif .badge { font-size: .85rem; padding: 4px 12px; }
.lp-danger-zone { margin-top: 28px; border-color: color-mix(in srgb, var(--c-alert) 30%, var(--c-line)); }
.lp-danger-zone summary { cursor: pointer; font-weight: 600; color: var(--c-alert); display: flex; gap: 8px; align-items: center; list-style: none; }
.lp-danger-zone summary::-webkit-details-marker { display: none; }
.lp-danger-zone[open] summary { margin-bottom: 12px; }
.radio-card.lp-radio-danger:has(input:checked) { border-color: var(--c-alert); background: var(--c-alert-soft); }
.radio-card strong .ic { vertical-align: -0.2em; }
.lp-file-name { font-weight: 600; overflow-wrap: anywhere; }
.lp-cols { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.lp-cols li { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
[data-import-form] .btn[disabled] { opacity: .45; }

/* Liste du stock sur téléphone : une pièce = trois lignes compactes */
@media (max-width: 720px) {
  .table--stack.lp-stack.lp-stock tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; padding: 12px 14px; }
  .table--stack.lp-stack.lp-stock td { display: block; padding: 0; text-align: left; overflow: visible; }
  .table--stack.lp-stack.lp-stock td::before { display: none; }
  .lp-stock td.lp-c-ref { order: 1; }
  .lp-stock td.lp-c-brand { order: 2; flex: 1 1 auto; color: var(--c-muted); font-weight: 600; font-size: .88rem; }
  .table--stack.lp-stack.lp-stock td.actions { order: 3; padding: 0; display: flex; gap: 2px; }
  .lp-stock td.lp-c-des { order: 4; flex: 1 1 100%; font-size: .92rem; }
  .lp-stock td.lp-c-cond { order: 5; font-size: .85rem; color: var(--c-muted); }
  .lp-stock td.lp-c-qty { order: 6; font-size: .85rem; }
  .table--stack.lp-stack.lp-stock td.lp-c-qty::before { display: inline; float: none; content: attr(data-label) " "; color: var(--c-muted); margin: 0; }
  .lp-stock td.lp-c-photo { order: 7; }
}

/* Import : étapes, correspondance, progression, marques */
.lp-stepper { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.lp-stepper li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--c-surface); border: var(--border); font-weight: 600; font-size: .86rem; color: var(--c-muted); }
.lp-stepper li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-2); color: var(--c-muted); font-size: .78rem; font-weight: 700; }
.lp-stepper li.is-done { color: var(--c-ink); }
.lp-stepper li.is-done span { background: var(--c-ok); color: #fff; }
.lp-stepper li.is-current { border-color: var(--c-ink); color: var(--c-ink); }
.lp-stepper li.is-current span { background: var(--c-accent); color: var(--c-on-accent); }
.lp-map select.input { min-width: 210px; min-height: 40px; padding: 6px 10px; }
.lp-samples { color: var(--c-muted); font-family: var(--font-ref); font-size: .8rem; overflow-wrap: anywhere; line-height: 1.45; }
@media (max-width: 720px) {
  .table--stack.lp-map td { display: grid; grid-template-columns: minmax(0, 1fr); text-align: left; gap: 2px; padding: 5px 0; }
  .lp-map select.input { min-width: 0; width: 100%; }
}
.lp-progress-card .progress { height: 14px; margin: 10px 0; }
.lp-progress-text { font: 700 1.1rem var(--font-head); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.lp-mini-kpis { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.lp-mini-kpis li { display: inline-flex; gap: 6px; align-items: center; }
.lp-brand-card { display: grid; gap: 12px; }
.lp-brand-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lp-brand-text { font: 700 1.1rem var(--font-ref); overflow-wrap: anywhere; }
.lp-brand-suggest { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 12px; margin: 0; background: var(--c-primary-soft); border-radius: var(--radius); }
.lp-brand-suggest span { font-weight: 600; }
.lp-brand-actions { display: grid; gap: 4px; }
.lp-brand-actions .lp-inline-form { margin: 0; }
.lp-brand-actions .lp-inline-form .field { margin-bottom: 8px; flex: 0 1 380px; }
.lp-brand-actions .lp-inline-form > .btn { margin-bottom: 8px; }
.lp-brand-more { --gap: 6px; }
.lp-brand-more form { margin: 0; }

/* ------------------------------ Page de réponse aux demandes de prix ------------------------------ */
.lp-quote { padding-bottom: 8px; }
.lp-flash { padding-top: 16px; }
.lp-flash:empty { display: none; }
.lp-flash .alert { margin-bottom: 0; }
.lp-quote-head { padding-top: 16px; }
.lp-quote-head h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); margin-bottom: 8px; overflow-wrap: anywhere; }
.lp-quote-head p { color: var(--c-muted); max-width: 64ch; }
.lp-kicker { margin: 0 0 4px !important; font-size: .85rem; font-weight: 700; color: var(--c-muted); display: flex; gap: 6px; align-items: center; }
.lp-facts-grid { list-style: none; margin: 14px 0 20px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .lp-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-facts-grid li { background: var(--c-surface); border: var(--border); border-radius: var(--radius-l); padding: 12px 14px; display: grid; gap: 2px; align-content: start; justify-items: start; min-width: 0; }
.lp-facts-grid .k { font-size: .8rem; color: var(--c-muted); font-weight: 600; display: flex; gap: 5px; align-items: center; }
.lp-facts-grid .v { font-weight: 700; font-size: 1.02rem; overflow-wrap: anywhere; }
.lp-facts-grid .badge { margin-top: 4px; white-space: normal; }

/* Pièce demandée : étiquette de casier avec languette */
.lp-qitem { position: relative; overflow: hidden; padding-left: calc(clamp(16px, 2.5vw, 24px) + 6px); }
.lp-qitem::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c-label-tab); }
.lp-qitem.is-off::before { background: var(--c-line-strong); }
.lp-qitem-head { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.lp-qitem-ref { font-size: 1.35rem; letter-spacing: .02em; overflow-wrap: anywhere; }
.lp-qitem-brand { font-weight: 700; color: var(--c-muted); }
.lp-qitem-des { margin: 2px 0 6px; font-size: 1.02rem; }
.lp-qitem-want { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0; color: var(--c-muted); }
.lp-qitem-want strong { color: var(--c-ink); }
.lp-qitem-answer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--c-line-strong); }
.lp-avail { font-weight: 700; margin-bottom: 14px; }
.lp-qitem-fields { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); transition: opacity .15s; }
.lp-qitem-fields .field { margin-bottom: 8px; }
.lp-qitem.is-off .lp-qitem-fields { opacity: .45; }
.lp-money { display: flex; align-items: stretch; }
.lp-money input { flex: 1; min-width: 0; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.lp-money span { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--c-line-strong); border-left: 0; border-radius: 0 var(--radius-input) var(--radius-input) 0; background: var(--c-surface-2); font-weight: 700; font-size: .88rem; color: var(--c-muted); }
.lp-quote-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: var(--border); font-weight: 700; flex-wrap: wrap; }
.lp-quote-total output { font: 800 1.4rem var(--font-head); font-variant-numeric: tabular-nums; }
.lp-answer-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 600px) { .lp-answer-actions .btn { flex: 1 1 100%; } }
.lp-answer.is-open, .lp-answer:not(.lp-collapse) { margin-top: 20px; }
.lp-trust { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 6px; }
.lp-trust li { display: flex; gap: 8px; align-items: flex-start; }
.lp-trust .ic { color: var(--c-ok); margin-top: 2px; flex: none; }

/* Commande payée : bloc d'expédition */
.lp-order { border: 2px solid var(--c-ink); box-shadow: 6px 6px 0 var(--c-accent); margin-bottom: 20px; }
.lp-order-grid { margin-top: 8px; }
.lp-address-box { padding: 14px 16px; background: var(--c-surface-2); border-radius: var(--radius); }
.lp-address-box .lp-h4 { margin-top: 0; }
.lp-address-box .lp-address { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; }
.lp-order-grid .lp-h4 { margin-top: 0; }
.lp-ship-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.lp-ship-list li { display: flex; gap: 8px; align-items: flex-start; }
.lp-qty { font-weight: 800; min-width: 2.2em; }
.lp-ship-form { margin-top: 16px; padding-top: 16px; border-top: var(--border); }
.lp-ship-form.lp-collapse { display: none; }
.lp-ship-form.lp-collapse.is-open { display: block; }

@media print {
  .lp-answer, #messages, .lp-trust, .lp-ship-form { display: none !important; }
  .lp-order, .lp-cta { box-shadow: none; }
}