/* Les cinq illustrations acheteur, avec la palette et la typographie du site. */
.lp .buyer-preview { padding: 22px; background: linear-gradient(145deg,var(--violet-soft),#ede7fc); }
.lp .buyer-preview .bv-card { padding: 16px; box-shadow: 0 8px 22px #17123a08; }
.lp .bv-title { margin: 0 0 10px; font-size: 16px; line-height: 1.35; color: var(--night); }
.bv-photo { display: block; min-width: 0; aspect-ratio: 1; border-radius: 12px; background: url(img/benefits-chairs.png) 0 0 / 200% 200% no-repeat; }
.lp .bv-example { margin-top: 14px; text-align: right; font-size: 10px; color: var(--ink-2); }
.bv-chat { display: flex; flex-direction: column; gap: 12px; }
.bv-bubble { padding: 12px 14px; border-radius: 13px; max-width: 90%; font-size: 11px; line-height: 1.55; box-shadow: 0 4px 14px #17123a06; }
.bv-user { align-self: flex-end; color: #fff; background: var(--violet); }
.bv-user:first-child { display: grid; grid-template-columns: minmax(0,1fr) 56px; gap: 10px; }
.bv-assistant { background: #fff; color: var(--night); max-width: 75%; }
.bv-chat-thumb { width: 56px; height: 56px; border: 3px solid #fff; border-radius: 8px; }
.bv-request-bottom { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 12px; align-items: center; margin-top: 16px; }
.bv-request-facts li { padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 11px; line-height: 1.5; }
.bv-request-facts li:last-child { border-bottom: 0; }
.lp .bv-handoff { margin-top: 12px; color: var(--ink-2); font-size: 10px; }
.bv-suppliers { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,1fr); gap: 12px; }
.bv-supplier-main { grid-row: span 2; }
.bv-pill { display: inline-block; padding: 4px 8px; background: var(--violet-soft); color: var(--violet-deep); border-radius: 99px; font-size: 10px; line-height: 1.4; }
.bv-pill-green { background: var(--ok-soft); color: #23613a; }
.bv-supplier-photo { margin-top: 12px; width: 100%; }
.bv-supplier-small .bv-supplier-photo { max-width: 120px; margin: 10px auto 0; }
.bv-capabilities li { padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.lp .bv-warning { margin-top: 12px; padding: 8px 10px; font-size: 10px; border-radius: 8px; background: #fff4df; color: #946012; }
.bv-project { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.bv-project .bv-photo { width: 45%; flex-shrink: 0; }
.lp .bv-project .bv-title { font-size: 20px; }
.bv-offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.lp .bv-offer-grid .bv-card { padding: 12px 10px; border: 1px solid var(--line-2); border-radius: 11px; }
.lp .bv-offer-grid .bv-title { font-size: 13px; text-align: center; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.bv-facts { margin: 0; }
.bv-facts > div { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 10px; line-height: 1.4; }
.bv-facts > div:last-child { border-bottom: 0; }
.bv-facts dt { color: var(--ink-2); }
.bv-facts dd { margin: 0; font-weight: 550; color: var(--night); }
.lp .bv-advice { margin-top: 14px; padding: 12px; background: #ffffffb3; border-radius: 10px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.bv-sample-image { position: relative; }
.bv-sample-photo { width: 100%; }
.bv-annotation { position: absolute; display: flex; gap: 8px; align-items: center; max-width: 55%; }
.bv-annotation-dot { position: relative; flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); border: 2px solid #fff; }
.bv-annotation-label { padding: 7px 9px; border-radius: 9px; background: #fff; box-shadow: 0 4px 12px #17123a13; font-size: 10px; line-height: 1.4; color: var(--night); }
.bv-annotation-0 { bottom: 13%; left: 4%; }
.bv-annotation-1 { top: 48%; left: 0; }
.bv-annotation-2 { top: 12%; right: 0; }
.lp .bv-sample-status { width: fit-content; margin: 14px 0 0 auto; border-radius: 99px; padding: 8px 12px; font-size: 11px; color: #946012; background: #fff1d2; }
.bv-tracking-header { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); gap: 16px; align-items: center; }
.lp .bv-delivery { display: grid; gap: 6px; padding: 14px; margin-top: 16px; border-radius: 10px; background: var(--violet-soft); color: var(--ink-2); font-size: 11px; }
.bv-delivery strong { font-size: 22px; color: var(--violet-deep); }
.lp .bv-timeline { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 24px 0; }
.bv-timeline li { position: relative; display: flex; align-items: center; flex-direction: column; gap: 7px; text-align: center; font-size: 10px; line-height: 1.4; }
.bv-timeline li:not(:last-child)::before { content: ''; position: absolute; left: 50%; top: 11px; width: 100%; height: 2px; background: var(--violet-mid); }
.bv-timeline li.is-done::before { background: var(--ok); }
.bv-timeline li.is-current::before { background: var(--line); }
.bv-stage-dot { display: flex; justify-content: center; align-items: center; position: relative; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); background: #fff; color: #fff; font-size: 16px; }
.is-done .bv-stage-dot { border-color: var(--ok); background: var(--ok); }
.is-current .bv-stage-dot { border-color: #fff; background: var(--violet); box-shadow: 0 0 0 3px var(--violet-mid); }
.bv-stage-title { color: var(--night); font-weight: 550; }
.bv-timeline small { border-radius: 99px; padding: 4px 6px; background: var(--paper-2); color: var(--ink-2); font-size: 9px; }
.bv-timeline .is-done small { background: var(--ok-soft); color: #23613a; }
.bv-timeline .is-current small { background: var(--violet-soft); color: var(--violet-deep); }
.bv-tracking-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
.lp .bv-tracking-bottom .bv-card { padding: 12px; background: var(--violet-soft); box-shadow: none; border-radius: 10px; }
.lp .bv-tracking-bottom .bv-title { font-size: 11px; font-weight: 500; }
.bv-tracking-bottom p, .bv-documents li { font-size: 11px; line-height: 1.5; color: var(--night); }
.bv-documents li { padding: 7px; background: #fff; border-radius: 6px; margin-top: 6px; }
@media (max-width:640px) {
 .lp .buyer-preview { padding: 18px 14px; }
 .lp .buyer-preview .bv-card { padding: 14px; }
 .bv-request-bottom { grid-template-columns: 1fr; }
 .bv-request-photo { max-width: 220px; width: 100%; margin: auto; }
 .bv-suppliers { grid-template-columns: 1fr 1fr; }
 .bv-supplier-main { grid-column: 1 / -1; grid-row: auto; }
 .bv-supplier-main .bv-supplier-photo { width: 65%; margin: 12px auto; }
 .lp .bv-supplier-small .bv-title { font-size: 13px; }
 .bv-project { gap: 12px; }
 .lp .bv-project .bv-title { font-size: 17px; }
 .bv-offer-grid { grid-template-columns: 1fr; gap: 12px; }
 .bv-facts > div { flex-direction: row; justify-content: space-between; gap: 12px; font-size: 11px; }
 .lp .bv-offer-grid .bv-title { font-size: 15px; text-align: left; }
 .bv-annotation-label { padding: 6px 7px; font-size: 9px; }
 .bv-annotation { max-width: 62%; gap: 4px; }
 .bv-tracking-header { grid-template-columns: 1fr; }
 .bv-tracking-header .bv-photo { width: 180px; max-width: 100%; margin: auto; }
 .bv-tracking-bottom { grid-template-columns: 1fr; }
 .lp .bv-timeline { grid-template-columns: 1fr; gap: 16px; }
 .bv-timeline li { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; text-align: left; }
 .bv-timeline li:not(:last-child)::before { top: 12px; left: 11px; width: 2px; height: calc(100% + 16px); }
 .bv-stage-dot { grid-row: 1 / 3; }
 .bv-timeline small { justify-self: start; }
 .bv-stage-title { font-size: 12px; }
}
@media (prefers-reduced-motion:no-preference) {
 .journey-panel:not([hidden]) .buyer-step.seen .buyer-preview { animation: journey-fade .2s ease-out; }
}
/* Fines liaisons entre les repères de l’échantillon et leurs légendes. */
.bv-annotation { gap: 20px; }
.bv-annotation-0, .bv-annotation-1 { flex-direction: row-reverse; }
.bv-annotation-dot::before { content: ''; position: absolute; top: 50%; right: 100%; width: 20px; height: 1px; background: var(--violet); }
.bv-annotation-2 .bv-annotation-dot::before { right: auto; left: 100%; }
@media (max-width: 640px) {
 .bv-annotation { gap: 10px; }
 .bv-annotation-dot::before { width: 10px; }
}
/* Style commun des titres des étapes acheteur et fournisseur. */
.lp .journey-step-badge .n {
 position: relative; display: inline-block; margin: 12px 0 14px 8px;
 padding: 9px 18px; border-radius: 12px; transform: rotate(-6deg);
 font-family: var(--font-display); font-size: 26px; font-weight: 750;
 line-height: 1.1; letter-spacing: -.025em; text-transform: none;
 color: var(--violet-deep); background: var(--violet-mid);
}
.lp .journey-step-badge .n::before, .lp .journey-step-badge .n::after {
 content: ''; position: absolute; width: 7px; height: 23px; border-radius: 5px; background: var(--violet);
}
.lp .journey-step-badge .n::before { right: -19px; top: -20px; transform: rotate(34deg); }
.lp .journey-step-badge .n::after { right: -35px; top: 4px; transform: rotate(75deg); }
.lp .journey-step-badge > div:first-of-type > h3 { margin-top: 12px; color: var(--night); font-size: clamp(34px,3.3vw,48px); line-height: 1.05; letter-spacing: -.045em; font-weight: 750; }
@media (max-width:640px) {
 .lp .journey-step-badge .n { padding: 8px 14px; font-size: 23px; }
 .lp .journey-step-badge > div:first-of-type > h3 { font-size: 36px; }
}
/* Relief de la carte « Votre demande ». */
.lp .buyer-preview.bv-request { box-shadow: 0 16px 38px -20px rgba(45,30,100,.28), inset 0 1px 0 #ffffffb3; }
.lp .bv-request .bv-user { box-shadow: 0 9px 18px -9px rgba(79,52,181,.52); }
.lp .bv-request .bv-assistant { box-shadow: 0 8px 22px -12px rgba(23,18,58,.23); }
.lp .bv-request .bv-card { box-shadow: 0 14px 26px -14px rgba(23,18,58,.28); }
.lp .bv-request .bv-request-photo { box-shadow: 0 12px 24px -13px rgba(23,18,58,.32); }
/* Proposition retenue : Dossier vivant, uniquement pour la demande acheteur. */
.lp #journey-buyers .bv-request {
 position: relative; isolation: isolate; border-radius: 10px 26px 26px;
 margin-top: 22px; background: var(--violet-soft); border: 1px solid var(--violet-mid);
 box-shadow: 7px 8px 0 #e4ddf8, 14px 16px 0 -2px #eee9fa;
}
#journey-buyers .bv-request::before {
 content: 'VOTRE PROJET'; position: absolute; left: -1px; top: -25px;
 height: 25px; padding: 5px 18px; border-radius: 12px 12px 0 0;
 background: var(--violet); color: #fff; font-size: 10px; letter-spacing: .1em;
}
#journey-buyers .bv-request .bv-chat { padding-bottom: 20px; border-bottom: 1px dashed var(--lavender); }
#journey-buyers .bv-request .bv-bubble { max-width: 94%; border-radius: 12px 12px 3px 12px; font-size: 13px; }
.lp #journey-buyers .bv-request .bv-assistant {
 border-radius: 12px 12px 12px 3px; border-left: 3px solid var(--lavender);
 box-shadow: 0 8px 16px -8px #17123a3d;
}
#journey-buyers .bv-request .bv-request-bottom { gap: 18px; }
#journey-buyers .bv-request .bv-card { transform: rotate(-1deg); }
#journey-buyers .bv-request .bv-request-photo { transform: rotate(2deg); border: 5px solid #fff; }
#journey-buyers .bv-request .bv-request-facts li { font-size: 13px; }
.lp #journey-buyers .bv-request .bv-title { font-size: 19px; }
@media (prefers-reduced-motion: no-preference) {
 #journey-buyers .bv-request .bv-bubble, #journey-buyers .bv-request .bv-card,
 #journey-buyers .bv-request .bv-request-photo { transition: transform .22s ease, box-shadow .22s ease; }
 @media (hover: hover) {
  #journey-buyers .bv-request .bv-bubble:hover,
  #journey-buyers .bv-request .bv-card:hover,
  #journey-buyers .bv-request .bv-request-photo:hover { transform: translateY(-4px); }
 }
}
@media (max-width: 640px) {
 .lp #journey-buyers .bv-request { box-shadow: 4px 5px 0 #e4ddf8, 8px 10px 0 -2px #eee9fa; }
}
@media (prefers-reduced-motion: reduce) {
 #journey-buyers .bv-request .bv-card, #journey-buyers .bv-request .bv-request-photo { transform: none; }
}
/* Titres des étapes plus discrets pour les deux profils. */
.lp .journey-step-badge>div:first-of-type>h3{font-size:clamp(26px,2.5vw,34px);line-height:1.12}
.lp .journey-step-badge .n{transform-origin:45% 65%;animation:journey-step-flow 1.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes journey-step-flow{from{transform:rotate(-9deg) translateY(-2px)}to{transform:rotate(-3deg) translateY(2px)}}
@media(max-width:640px){.lp .journey-step-badge>div:first-of-type>h3{font-size:26px}}
@media(prefers-reduced-motion:reduce){.lp .journey-step-badge .n{animation:none}}