/* Les parcours occupent le même emplacement ; les étapes acheteur restent intactes. */
.journey-panel { display: contents; }
.lp .trip .journey-tabs { margin: 22px auto 14px; position: relative; z-index: 2; }
.lp .trip .journey-notice { font-size: 12px; color: var(--violet-deep); padding: 10px 14px; border-radius: 10px; background: var(--violet-soft); }
#benefits, #comment { overflow-anchor: none; }
.supplier-preview .supplier-card-title { font-weight: 650; color: var(--night); font-size: 17px; margin-bottom: 18px; }
.supplier-preview dl { margin: 0; clear: both; }
.supplier-preview dl > div { padding: 12px 0; border-bottom: 1px solid var(--line-2); display: flex; justify-content: space-between; gap: 16px; }
.supplier-preview dl > div:last-child { border-bottom: 0; }
.supplier-preview dt { color: var(--ink-2); font-size: 12px; }
.supplier-preview dd { margin: 0; max-width: 60%; text-align: right; font-size: 13px; color: var(--ink); }
.supplier-chair { display: block; width: 90px; height: 90px; margin-bottom: 14px; border-radius: 12px; background: url(img/benefits-chairs.png) 0 0 / 200% 200% no-repeat; }
.lp .supplier-example { margin-top: 12px; font-size: 10px; color: var(--ink-2); text-align: right; }
.journey-panel:not([hidden]) .arret.seen { animation: journey-fade .2s ease-out; }
@keyframes journey-fade { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 640px) {
 .lp .trip .journey-tabs { width: 100%; }
 .lp .trip .journey-tabs button { padding: 10px 8px; font-size: 12px; }
 .supplier-preview dl > div { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .journey-panel:not([hidden]) .arret.seen { animation: none; } }
/* Introduction du parcours sur deux lignes sur ordinateur. */
@media (min-width: 901px) {
 .lp .trip > header > .journey-tabs + p { max-width: none; width: 100%; text-wrap: balance; }
}
@media (min-width: 901px) {
 .lp .trip[data-profile="buyers"] > header > .journey-tabs + p {
  max-width: 82ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
 }
}
/* Maquettes fournisseur : cinq compositions distinctes autour du même fauteuil. */
.lp .supplier-preview { padding: 22px; background: linear-gradient(140deg, var(--violet-soft), #e9e2fc); }
.lp .supplier-preview .sv-card { padding: 18px; border: 1px solid #ffffff80; box-shadow: 0 8px 22px #17123a08; }
.lp .sv-title { font-size: 16px; line-height: 1.35; margin: 0 0 5px; color: var(--night); }
.lp .sv-muted { font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.sv-photo { display: block; min-width: 0; background: url(img/benefits-chairs.png) 0 0 / 200% 200% no-repeat; border-radius: 12px; aspect-ratio: 1; }
.sv-company-heading { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.sv-symbol { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 40px; flex-shrink: 0; border-radius: 10px; color: var(--violet); font-size: 24px; background: var(--violet-soft); }
.sv-company-product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 12px; align-items: stretch; }
.sv-company-photo { height: 100%; min-height: 240px; background-size: 300% 300%; background-position: 12% 13%; }
.sv-material-photo { height: 80px; aspect-ratio: auto; background-size: 650% 650%; background-position: 2% 21%; }
.lp .supplier-preview .sv-facts { margin: 0; clear: none; }
.lp .supplier-preview .sv-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; padding: 8px 0; }
.lp .supplier-preview .sv-facts dt { font-size: 11px; line-height: 1.45; }
.lp .supplier-preview .sv-facts dd { max-width: none; text-align: left; font-size: 11px; line-height: 1.45; font-weight: 500; }
.lp .supplier-preview .sv-fields > div { border: 1px solid var(--line-2); border-radius: 8px; margin-top: 8px; padding: 8px; }
.sv-company-details .sv-fields > div { grid-template-columns: 1fr !important; gap: 2px !important; }
.sv-catalog { position: relative; display: flex; align-items: center; gap: 12px; margin: 18px 0 0 20%; }
.sv-catalog::before { content: ''; position: absolute; left: -36px; top: -18px; width: 35px; height: 44px; border-left: 1px dashed var(--violet); border-bottom: 1px dashed var(--violet); border-radius: 0 0 0 18px; }
.sv-request-card { max-width: 310px; margin: auto; }
.sv-request-photo { width: 100%; margin: 10px 0; }
.lp .sv-product-name { font-size: 14px; color: var(--night); margin-bottom: 6px; }
.lp .sv-deadline { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 9px; margin-top: 8px; color: var(--violet-deep); background: var(--violet-soft); font-size: 11px; border-radius: 8px; }
.sv-proposal-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 16px; }
.sv-status { display: inline-block; padding: 4px 8px; border-radius: 99px; background: var(--paper-2); font-size: 10px; color: var(--ink-2); }
.sv-proposal-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; align-items: stretch; }
.sv-proposal-photo { min-height: 250px; height: 100%; }
.lp .sv-proposal-body .sv-facts > div { grid-template-columns: 1fr; gap: 4px; border: 0; margin: 0; padding: 0 0 10px; }
.lp .sv-proposal-body .sv-facts dd { border: 1px solid var(--line); padding: 7px; border-radius: 5px; color: var(--ink-2); }
.lp .sv-document { margin-top: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-2); font-size: 11px; }
.sv-sample-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.sv-annotated { position: relative; margin-top: 12px; }
.sv-sample-photo { width: 100%; }
.sv-pin { display: flex; position: absolute; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--violet); color: #fff; font-size: 10px; box-shadow: 0 0 0 3px #ffffff55; }
.sv-pin-0 { left: 23%; top: 38%; }
.sv-pin-1 { left: 21%; top: 62%; }
.sv-pin-2 { left: 56%; top: 23%; }
.lp .sv-pin-key { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style-position: inside; padding: 0; margin-top: 12px; font-size: 10px; color: var(--ink-2); }
.sv-pin-key li::marker { color: var(--violet); font-weight: 700; }
.lp .sv-sample-grid .sv-facts > div { grid-template-columns: 1fr; gap: 3px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; }
.lp .sv-pending { margin-top: 14px; padding: 8px; border-radius: 7px; color: #946012; background: #fff4df; font-size: 10px; line-height: 1.5; }
.sv-production-overview { display: grid; grid-template-columns: 31% minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 16px; }
.sv-production-photo { width: 100%; }
.lp .sv-production-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.sv-production-timeline li { position: relative; display: flex; align-items: center; flex-direction: column; gap: 8px; text-align: center; font-size: 9px; line-height: 1.4; color: var(--ink-2); }
.sv-production-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 50%; top: 10px; height: 2px; width: 100%; background: var(--line); }
.sv-production-timeline li.sv-stage-active::before { background: var(--violet); }
.sv-stage-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.sv-stage-active .sv-stage-dot { border: 3px solid #fff; background: var(--violet); box-shadow: 0 0 0 2px var(--violet); }
.sv-production-timeline small { color: var(--violet-deep); background: var(--violet-soft); padding: 3px 6px; border-radius: 6px; font-size: 9px; }
.sv-production-bottom { display: grid; grid-template-columns: 1fr 1.1fr; gap: 12px; margin-top: 12px; }
.lp .sv-production-bottom .sv-title { font-size: 13px; }
.lp .sv-news { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; line-height: 1.5; }
.sv-documents li { padding: 10px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); font-size: 11px; }
.sv-documents li:last-child { border-bottom: 0; }
@media (max-width: 1100px) and (min-width: 1000px) {
 .lp .supplier-preview { padding: 16px; }
 .lp .supplier-preview .sv-card { padding: 14px; }
 .sv-company-product, .sv-proposal-body, .sv-sample-grid { gap: 10px; }
 .sv-production-overview { grid-template-columns: 1fr; }
 .sv-production-photo { width: 100px; margin: auto; }
}
@media (max-width: 640px) {
 .lp .supplier-preview { padding: 18px 14px; }
 .lp .supplier-preview .sv-card { padding: 14px; }
 .sv-company-product, .sv-proposal-body, .sv-sample-grid { grid-template-columns: 1fr; }
 .sv-company-photo { min-height: 0; height: auto; aspect-ratio: 1; background-size: 200% 200%; background-position: 0 0; }
 .sv-company-details { display: grid; grid-template-columns: 75px 1fr; gap: 10px; align-items: center; }
 .sv-material-photo { height: 100px; }
 .sv-proposal-photo { min-height: 0; height: auto; order: -1; }
 .sv-proposal-body .sv-photo { max-width: 220px; width: 100%; margin: auto; }
 .sv-sample-photo { max-width: 250px; margin: auto; }
 .sv-production-overview { grid-template-columns: 1fr; }
 .sv-production-photo { width: 120px; margin: auto; }
 .sv-production-bottom { grid-template-columns: 1fr; }
 .sv-production-timeline li { font-size: 10px; }
 .sv-catalog { margin-left: 10%; }
}
/* Les photos ne doivent pas imposer leur largeur aux colonnes étroites. */
.sv-proposal-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.sv-proposal-photo { aspect-ratio: auto; }
@media (max-width: 640px) {
 .sv-proposal-body { grid-template-columns: minmax(0, 1fr); }
 .sv-proposal-photo { aspect-ratio: 1; }
}
.sv-company-product { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sv-company-photo { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; align-self: center; background-size: 200% 200%; background-position: 0 0; }
.sv-symbol svg { width: 23px; height: 23px; }
@media (max-width: 640px) { .sv-company-product { grid-template-columns: minmax(0, 1fr); } }
/* Conserver le cadrage carré du fauteuil sans l’étirer avec les champs. */
.sv-proposal-photo {
 width: 100%; height: auto; min-height: 0; aspect-ratio: 1;
 align-self: center;
}