/* Hub v763 (07/11, agent lancement-accueil) : accueil du lancement — offre beta, securite du compte, avis qui defilent, guide.
   Sombre neutre + accent corail du logo (#FF8A5B), aucun violet. Respecte prefers-reduced-motion. */
#lp { --coral: #FF8A5B; --coral-s: rgba(255,138,91,.14); }

/* ---- hero : accroche + reassurance ---- */
#lp .lp-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px !important; color: rgba(255,255,255,.62); font-size: 13px; }
#lp .lp-trust span { display: inline-flex; align-items: center; gap: 7px; }
#lp .lp-trust svg { width: 14px; height: 14px; color: var(--coral); flex: none; }
#lp .lp-sub.lp-sub2 { max-width: 470px; }

/* ---- offre beta ---- */
#lp .hl-beta[hidden] { display: none !important; }
#lp .hl-beta { opacity: 0; transform: translateY(8px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
#lp .hl-beta.on { opacity: 1; transform: none; }
#lp #hl-beta-hero { margin-bottom: 14px !important; }
#lp #hl-beta-tarifs { max-width: 980px; margin: 0 auto 26px !important; }
#lp .hlb { position: relative; border-radius: 18px; padding: 16px 16px 14px !important; background: linear-gradient(160deg, rgba(255,138,91,.10), rgba(255,138,91,.025) 55%, rgba(255,255,255,.015)); border: 1px solid rgba(255,138,91,.28); overflow: hidden; }
#lp .hlb::after { content: ''; position: absolute; inset: -40% -10% auto auto; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,138,91,.16), transparent 70%); pointer-events: none; }
#lp .hlb.done { border-color: var(--line); background: rgba(255,255,255,.02); }
#lp .hlb-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
#lp .hlb-tag { display: inline-flex; align-items: center; gap: 8px; color: #fff; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; font-size: 11.5px; }
#lp .hlb-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 0 rgba(255,138,91,.55); animation: hlbPulse 2.4s ease-out infinite; }
#lp .hlb.done .hlb-tag i { background: rgba(255,255,255,.4); animation: none; }
@keyframes hlbPulse { 0% { box-shadow: 0 0 0 0 rgba(255,138,91,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(255,138,91,0); } }
#lp .hlb-left { color: rgba(255,255,255,.75); white-space: nowrap; font-variant-numeric: tabular-nums; }
#lp .hlb-left b { color: var(--coral); font-weight: 600; font-size: 14px; }
#lp .hlb-main { display: flex; align-items: center; gap: 14px; margin-top: 10px !important; position: relative; z-index: 1; }
#lp .hlb-txt { flex: 1; min-width: 0; }
#lp .hlb-off { display: block; font-size: 22px; font-weight: 450; letter-spacing: -.02em; color: #fff; line-height: 1.1; }
#lp .hlb-txt p { color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.45; margin-top: 4px !important; }
#lp .hlb-cta { flex: none; height: 40px; padding: 0 16px !important; border-radius: 11px; background: var(--coral); color: #160904; font-size: 13.5px; font-weight: 550; transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .2s, box-shadow .25s; box-shadow: 0 6px 22px rgba(255,138,91,.22); }
#lp .hlb-cta:hover { transform: translateY(-1px); background: #ff9c74; box-shadow: 0 10px 28px rgba(255,138,91,.3); }
#lp .hlb-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#lp .hlb-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.08); margin-top: 14px !important; overflow: hidden; position: relative; z-index: 1; }
#lp .hlb-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #ffb08f, var(--coral)); transition: width 1.4s cubic-bezier(.16,1,.3,1) .3s; }
#lp .hl-beta.on .hlb-bar i { width: var(--w); }
#lp .hlb-f { color: rgba(255,255,255,.48); font-size: 11.5px; margin-top: 8px !important; position: relative; z-index: 1; }
#lp .hlb.done .hlb-f { color: rgba(255,255,255,.66); font-size: 13px; }
#lp .hlb.wide { padding: 22px 24px 18px !important; }
#lp .hlb.wide .hlb-off { font-size: 30px; }
#lp .hlb.wide .hlb-txt p { font-size: 14px; max-width: 620px; }
#lp .hlb.wide .hlb-cta { height: 46px; padding: 0 22px !important; font-size: 14.5px; }
/* carte du haut (etroite) : texte puis bouton pleine largeur */
#lp .hlb:not(.wide) .hlb-main { flex-direction: column; align-items: stretch; gap: 12px; }
#lp .hlb:not(.wide) .hlb-cta { width: 100%; height: 44px; }
#lp .hlb:not(.wide) .hlb-off { font-size: 24px; }
@media (max-width: 560px) { #lp .hlb-main { flex-direction: column; align-items: stretch; } #lp .hlb-cta { width: 100%; } #lp .hlb.wide { padding: 18px 16px 14px !important; } #lp .hlb.wide .hlb-off { font-size: 24px; } }

/* ---- securite du compte Vinted ---- */
#lp .lp-sec-g { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { #lp .lp-sec-g { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { #lp .lp-sec-g { grid-template-columns: repeat(3, 1fr); } }
#lp .lp-sc { position: relative; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); padding: 24px 22px !important; transition: border-color .3s, transform .5s cubic-bezier(.16,1,.3,1); }
#lp .lp-sc:hover { border-color: rgba(255,255,255,.16); transform: translateY(-2px); }
#lp .lp-sc .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--coral-s); color: var(--coral); margin-bottom: 16px !important; }
#lp .lp-sc .ic svg { width: 19px; height: 19px; }
#lp .lp-sc h3 { font-size: 17px; font-weight: 450; letter-spacing: -.015em; margin-bottom: 6px !important; }
#lp .lp-sc p { color: var(--mute); font-size: 14px; line-height: 1.5; }
#lp .lp-sec-note { margin-top: 18px !important; color: rgba(255,255,255,.5); font-size: 13px; line-height: 1.55; max-width: 860px; }

/* ---- avis des membres ---- */
#lp #lp-avis[hidden] { display: none !important; }
#lp .hla-wrap { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
#lp .hla-wrap.in { opacity: 1; transform: none; }
#lp .hla-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 34px !important; }
#lp .hla-head .lp-h2 { margin-bottom: 0 !important; }
#lp .hla-sum { display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 14px !important; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
#lp .hla-avg { font-size: 40px; font-weight: 400; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
#lp .hla-sum span { display: block; color: rgba(255,255,255,.6); font-size: 12.5px; margin-top: 3px !important; }
#lp .hla-sum span b { color: #fff; font-weight: 500; }
#lp .hla-st { position: relative; display: inline-block; font-size: 13px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
#lp .hla-st .bg { color: rgba(255,255,255,.14); }
#lp .hla-st .fg { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--coral); }
#lp .hla-st.big { font-size: 17px; }
#lp .hla-rows { position: relative; display: flex; flex-direction: column; gap: 14px; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
#lp .hla-more { margin-left: 0 !important; }
#lp #lp-avis .lp-in + .hla-rows { margin-top: 0 !important; }
#lp .hla-row { overflow: hidden; }
#lp .hla-tr { display: flex; width: max-content; animation: hlaL var(--d, 40s) linear infinite; }
#lp .hla-row.r .hla-tr { animation-name: hlaR; }
#lp .hla-rows:hover .hla-tr, #lp .hla-rows:focus-within .hla-tr { animation-play-state: paused; }
#lp .hla-g { display: flex; gap: 14px; padding-right: 14px !important; }
@keyframes hlaL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hlaR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
#lp .hla-c { width: 340px; flex: none; display: flex; flex-direction: column; gap: 12px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(170deg, #131315, #0D0D0F); padding: 20px !important; transition: border-color .3s, transform .5s cubic-bezier(.16,1,.3,1); }
#lp .hla-c:hover { border-color: rgba(255,255,255,.18); transform: translateY(-3px); }
#lp .hla-c header { display: flex; align-items: center; gap: 11px; }
#lp .hla-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; background: linear-gradient(140deg, #2a2a2e, #18181b); border: 1px solid rgba(255,138,91,.35); }
#lp .hla-who { flex: 1; min-width: 0; }
#lp .hla-who b { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lp .hla-who small { display: block; color: rgba(255,255,255,.48); font-size: 12px; }
#lp .hla-t { color: rgba(255,255,255,.84); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
#lp .hla-rp { border-left: 2px solid var(--coral); padding: 2px 0 2px 12px !important; color: rgba(255,255,255,.66); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
#lp .hla-rp b { display: block; color: #fff; font-weight: 500; font-size: 12px; margin-bottom: 2px !important; }
#lp .hla-ct { color: rgba(255,255,255,.4); font-size: 11.5px; margin-top: auto !important; }
#lp .hla-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px !important; color: rgba(255,255,255,.75); font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px !important; transition: color .2s, border-color .2s; }
#lp .hla-more:hover { color: #fff; border-color: var(--coral); }
#lp .hla-legal { color: rgba(255,255,255,.42); font-size: 12px; margin-top: 10px !important; max-width: 760px; line-height: 1.5; }
/* sans animation : rangees qui defilent a la main */
#lp .hla-rows.static .hla-row { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 20px 6px !important; }
#lp .hla-rows.static .hla-tr { animation: none; }
#lp .hla-rows.static .hla-g[aria-hidden] { display: none; }
#lp .hla-rows.static .hla-c { scroll-snap-align: start; }
@media (max-width: 640px) { #lp .hla-c { width: 282px; padding: 17px !important; } #lp .hla-t { font-size: 14px; } }

/* ---- guide dans l'ordre ---- */
#lp .lp-step .lp-st-a { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px !important; color: #fff; font-size: 13.5px; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 1px !important; }
#lp .lp-step .lp-st-a:hover { border-color: var(--coral); }
#lp .lp-step em { color: var(--coral); }
#lp .lp-steps.ord .lp-step { position: relative; }
@media (min-width: 900px) { #lp .lp-steps.ord .lp-step:not(:last-child)::after { content: ''; position: absolute; top: 38px; right: -14px; width: 14px; height: 1px; background: linear-gradient(90deg, rgba(255,138,91,.6), transparent); } }

/* ---- hierarchie / rythme : kicker corail ---- */
#lp .lp-kick::before { background: linear-gradient(90deg, var(--coral), rgba(255,138,91,.15)); }

@media (prefers-reduced-motion: reduce) {
  #lp .hla-tr { animation: none !important; }
  #lp .hla-wrap, #lp .hl-beta { opacity: 1 !important; transform: none !important; }
  #lp .hlb-tag i { animation: none !important; }
}

/* ---- v767 (agent accueil-v2) : retours SHINO ---- */
/* tuile « 7 jours » : le chiffre est dans un <span> (rempli par HubFlags) qui prenait le style du texte gris de la tuile */
#lp .lp-stat b span { color: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
/* encadre beta-testeurs des Tarifs : aligne a gauche comme le reste de la section */
#lp #hl-beta-tarifs { margin: 0 0 26px !important; }
/* avis : moins de 6 avis = cartes fixes en grille, alignees a gauche (pas de defilement ni de doublons) */
#lp .hla-rows.few { -webkit-mask-image: none; mask-image: none; }
#lp .hla-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
#lp .hla-grid .hla-c { width: auto; max-width: 420px; }
@media (max-width: 640px) { #lp .hla-grid { grid-template-columns: 1fr; } #lp .hla-grid .hla-c { max-width: none; } }