/* =====================================================================
   /live — Expérience plein écran type TikTok
   ===================================================================== */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overscroll-behavior: none;
}
.live-body {
    background: #0B1220;
    color: #fff;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.live {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

/* ------- TOPBAR (retour + recherche + filtres) ---------------------- */
.live-topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: max(env(safe-area-inset-top, 12px), 12px) 14px 12px;
    background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}
.live-topbar > * { pointer-events: auto; }

.live-back {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}
.live-back svg { width: 20px; height: 20px; }
.live-back:hover { background: rgba(255,255,255,.22); }

.live-search {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.live-search__icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: rgba(255,255,255,.7);
    pointer-events: none;
}
.live-search__input {
    width: 100%;
    height: 42px;
    padding: 0 38px 0 40px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    color: #fff;
    font: 500 14px/1 'Inter', sans-serif;
    outline: none;
    transition: background .15s;
}
.live-search__input::placeholder { color: rgba(255,255,255,.65); }
.live-search__input:focus { background: rgba(255,255,255,.22); }

.live-search__clear {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 30px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.live-search__clear svg { width: 14px; height: 14px; }

.live-filters-btn {
    position: relative;
    width: 42px; height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(14px);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.live-filters-btn svg { width: 20px; height: 20px; }
.live-filters-btn:hover { background: rgba(255,255,255,.22); }
.live-filters-btn__badge {
    position: absolute;
    top: -2px; right: -2px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #DC2626;
    color: #fff;
    font: 700 11px/18px 'Inter';
    text-align: center;
}

/* ------- CHIPS de filtres rapides ----------------------------------- */
.live-chips {
    position: absolute;
    top: calc(max(env(safe-area-inset-top, 12px), 12px) + 56px);
    left: 0; right: 0;
    z-index: 40;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 14px 8px;
    scrollbar-width: none;
    pointer-events: none;
}
.live-chips::-webkit-scrollbar { display: none; }
.live-chips > * { pointer-events: auto; }

.live-chip {
    flex-shrink: 0;
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(14px);
    color: #fff;
    font: 500 13px/1 'Inter';
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.live-chip:hover { background: rgba(255,255,255,.18); }
.live-chip.is-active {
    background: #0F7A4D;
    border-color: #0F7A4D;
    font-weight: 600;
}

/* ------- FEED (scroll-snap vertical) -------------------------------- */
.live-feed {
    position: absolute;
    inset: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.live-feed::-webkit-scrollbar { display: none; }

/* ------- SLIDE (un bien) -------------------------------------------- */
.live-slide {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #000;
    overflow: hidden;
}

.live-slide__gallery {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.live-slide__gallery::-webkit-scrollbar { display: none; }

.live-slide__photo {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    height: 100%;
}

/* ------- BOTTOM bloc unique (bars + titre + meta + prix) ----------- */
.live-slide__bottom {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 4;
    padding: 30px 80px 18px 16px;
    padding-bottom: max(env(safe-area-inset-bottom, 18px), 18px);
    background: linear-gradient(0deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.45) 55%,
        rgba(0,0,0,0)  100%);
    pointer-events: none;
}

/* Petites barres photos (Stories) — au-dessus du texte */
.live-slide__bars {
    display: flex;
    gap: 3px;
    margin-bottom: 10px;
}
.live-slide__bars .bar {
    flex: 1;
    height: 2.5px;
    background: rgba(255,255,255,.28);
    border-radius: 2px;
    overflow: hidden;
}
.live-slide__bars .bar.is-done { background: rgba(255,255,255,.85); }
.live-slide__bars .bar.is-active {
    background: rgba(255,255,255,.28);
    position: relative;
}
.live-slide__bars .bar.is-active::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: left;
    animation: live-bar-fill 4s linear forwards;
}
.live-slide__bars .bar.is-paused.is-active::after { animation-play-state: paused; }
@keyframes live-bar-fill {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.live-slide__title {
    margin: 0 0 3px;
    font: 700 15px/1.3 'Inter', sans-serif;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-slide__meta {
    margin: 0 0 4px;
    font: 500 12px/1.4 'Inter';
    color: rgba(255,255,255,.78);
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.live-slide__meta .dot { opacity: .5; margin: 0 5px; }

.live-slide__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font: 700 16px/1.2 'Inter', sans-serif;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.live-slide__age {
    font: 500 11px/1 'Inter';
    color: rgba(255,255,255,.7);
    font-weight: 500;
}

/* ------- ACTIONS verticales (droite) -------------------------------- */
.live-slide__actions {
    position: absolute;
    right: 8px;
    bottom: 120px;
    bottom: calc(max(env(safe-area-inset-bottom, 18px), 18px) + 100px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}
.lia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font: 600 10px/1.1 'Inter';
}
.lia svg {
    padding: 9px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
    transition: transform .15s, background .15s;
}
.lia:hover svg { background: rgba(255,255,255,.26); }
.lia:active svg { transform: scale(.92); }
.lia__count, .lia__lbl {
    font: 600 10px/1.1 'Inter';
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
    text-align: center;
    max-width: 56px;
}
.lia--wa svg   { background: rgba(34,197,94,.9); color: #fff; }
.lia--wa:hover svg { background: rgba(34,197,94,1); }
.lia--site svg { background: rgba(15,122,77,.9); color: #fff; }
.lia--site:hover svg { background: rgba(15,122,77,1); }

/* ------- PROGRESS indicator ---------------------------------------- */
.live-progress {
    position: absolute;
    bottom: max(env(safe-area-inset-bottom, 16px), 16px);
    left: 18px;
    z-index: 7;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    font: 600 12px/1 'Inter';
    color: #fff;
    pointer-events: none;
}

/* ------- HINT swipe ------------------------------------------------- */
.live-hint {
    position: absolute;
    bottom: 20%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    text-align: center;
    color: #fff;
    pointer-events: none;
    animation: live-hint-bob 1.6s ease-in-out infinite;
}
.live-hint__icon {
    width: 50px; height: 50px;
    margin: 0 auto 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    display: grid;
    place-items: center;
}
.live-hint__icon svg { width: 28px; height: 28px; }
.live-hint p { margin: 0; font: 600 13px/1.2 'Inter'; }
@keyframes live-hint-bob {
    0%, 100% { transform: translate(-50%, 0); opacity: .9; }
    50%      { transform: translate(-50%, -10px); opacity: 1; }
}

/* ------- LOADER ---------------------------------------------------- */
.live-loader {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: #0B1220;
    text-align: center;
}
.live-loader__spin {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #0F7A4D;
    border-radius: 999px;
    animation: live-spin .8s linear infinite;
    margin: 0 auto 14px;
}
.live-loader p { margin: 0; font: 500 14px/1.2 'Inter'; color: rgba(255,255,255,.7); }
@keyframes live-spin { to { transform: rotate(360deg); } }

/* ------- EMPTY ---------------------------------------------------- */
.live-empty {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: grid;
    place-items: center;
    padding: 30px;
    text-align: center;
}
.live-empty h2 { font: 700 22px/1.3 'Plus Jakarta Sans'; margin: 0 0 8px; }
.live-empty p  { color: rgba(255,255,255,.7); margin: 0 0 18px; }
.live-empty__reset {
    border: 0;
    height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: #0F7A4D;
    color: #fff;
    font: 600 14px/1 'Inter';
    cursor: pointer;
}

/* ------- DRAWER FILTRES -------------------------------------------- */
.live-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}
.live-drawer[aria-hidden="false"] { pointer-events: auto; }
.live-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    opacity: 0;
    transition: opacity .25s;
}
.live-drawer[aria-hidden="false"] .live-drawer__backdrop { opacity: 1; }

.live-drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: #fff;
    color: #0F172A;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.live-drawer[aria-hidden="false"] .live-drawer__panel { transform: translateX(0); }

.live-drawer__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
}
.live-drawer__head h2 {
    margin: 0;
    font: 700 18px/1 'Plus Jakarta Sans';
}
.live-drawer__close {
    width: 36px; height: 36px;
    border: 0;
    border-radius: 999px;
    background: #F1F5F9;
    cursor: pointer;
    display: grid; place-items: center;
}
.live-drawer__close svg { width: 18px; height: 18px; color: #0F172A; }

.live-drawer__form {
    padding: 18px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lf-label {
    display: block;
    font: 600 13px/1 'Inter';
    color: #0F172A;
    margin-bottom: 8px;
}
.lf-field select,
.lf-field input[type="number"] {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    color: #0F172A;
    font: 500 14px/1 'Inter';
    outline: none;
}
.lf-field select:focus,
.lf-field input:focus { border-color: #0F7A4D; background: #fff; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.lf-segmented {
    display: flex;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    flex-wrap: wrap;
}
.lf-segmented label {
    flex: 1;
    min-width: 0;
}
.lf-segmented input { display: none; }
.lf-segmented span {
    display: block;
    text-align: center;
    padding: 11px 8px;
    font: 500 13px/1 'Inter';
    color: #334155;
    cursor: pointer;
    border-right: 1px solid #E2E8F0;
}
.lf-segmented label:last-child span { border-right: 0; }
.lf-segmented input:checked + span {
    background: #0F7A4D;
    color: #fff;
    font-weight: 600;
}

.lf-check {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font: 500 14px/1.2 'Inter';
}
.lf-check input { width: 18px; height: 18px; accent-color: #0F7A4D; }

.live-drawer__actions {
    position: sticky;
    bottom: 0;
    left: 0; right: 0;
    margin: 12px -20px -100px;
    padding: 16px 20px;
    background: #fff;
    border-top: 1px solid #E2E8F0;
    display: flex;
    gap: 10px;
}
.btn-ghost {
    flex: 1;
    height: 46px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font: 600 14px/1 'Inter';
    cursor: pointer;
}
.btn-primary {
    flex: 2;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #0F7A4D;
    color: #fff;
    font: 600 14px/1 'Inter';
    cursor: pointer;
}
.btn-primary:hover { background: #0A5638; }

/* ------- MODALE PARTAGE -------------------------------------------- */
.live-share {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: grid;
    place-items: end center;
}
.live-share__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
}
.live-share__panel {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: #fff;
    color: #0F172A;
    border-radius: 18px 18px 0 0;
    padding: 22px 20px max(env(safe-area-inset-bottom, 20px), 20px);
    animation: live-slide-up .25s ease-out;
}
@keyframes live-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.live-share__panel h3 {
    margin: 0 0 16px;
    font: 700 18px/1 'Plus Jakarta Sans';
    text-align: center;
}
.live-share__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.live-share__opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border: 0;
    border-radius: 12px;
    background: #F8FAFC;
    color: #0F172A;
    text-decoration: none;
    cursor: pointer;
    font: 500 11px/1.2 'Inter';
    text-align: center;
}
.live-share__opt:hover { background: #E2E8F0; }
.live-share__opt svg { width: 24px; height: 24px; }
.live-share__opt--wa { color: #16A34A; }
.live-share__opt--fb { color: #1877F2; }

.live-share__cancel {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: #F1F5F9;
    color: #334155;
    font: 600 14px/1 'Inter';
    cursor: pointer;
}

/* ------- TOAST ----------------------------------------------------- */
.live-toast {
    position: fixed;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 120;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(0,0,0,.85);
    color: #fff;
    font: 500 13px/1.2 'Inter';
    pointer-events: none;
    animation: live-toast-in .2s ease-out;
}
@keyframes live-toast-in {
    from { opacity: 0; transform: translate(-50%, 10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* ------- MOBILE FINE-TUNE ------------------------------------------ */
@media (max-width: 480px) {
    .live-slide__title { font-size: 19px; }
    .live-slide__price { font-size: 22px; }
    .live-share__grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ------- DESKTOP : centrer le contenu vertical ----------------------- */
@media (min-width: 900px) {
    .live-feed { padding: 0; }
    .live-slide {
        max-width: 480px;
        margin: 0 auto;
        border-left: 1px solid rgba(255,255,255,.08);
        border-right: 1px solid rgba(255,255,255,.08);
    }
}