:root{
    --bg:#111;
    --fg:#fff;
    --muted:#c8c8c8;
    --chip:#00000070;
    --accent:#ab65ff;
    --ok:#10b981;
}

html,body{height:100%;background:#000;color:var(--fg);margin:0}
*{box-sizing:border-box}

.reel{
    position:relative;
    height:100dvh;
    overflow:hidden;
    background: var(--bg);
}

/* Progress segments */
.reel-progress{
    position:fixed; inset: 8px 12px auto; z-index:10;
    display:flex; gap:6px; width: min(920px, 92vw); margin-inline:auto;
    left:0; right:0;
}
.reel-progress .seg{
    flex:1; height:3px; background:#ffffff44; border-radius:3px; overflow:hidden;
}
.reel-progress .seg > i{
    display:block; height:100%; width:0%; background:#fff; transition:width .2s linear;
}
@media (min-width:800px){ .reel-progress{ inset: 16px 16px auto } .reel-progress .seg{ height:5px } }

/* Track of stories */
.reel-track{
    height:100%; overflow-y:auto;
    scroll-snap-type:y mandatory;
}
.story{
    position:relative; height:100dvh; scroll-snap-align:start; overflow:hidden;
    display:grid; place-items:center;
    background:#000;
}
.story img, .story video{
    width:100%; height:100%; object-fit:cover; display:block;
}
.story video{ background:#000 }

/* Top bar */
.reel-topbar{
    position:fixed; inset: 12px 12px auto; z-index:15; display:flex; align-items:center; gap:10px;
    width:min(920px, 94vw); margin-inline:auto; left:0; right:0;
}
.reel-topbar .icon-btn{
    background:#00000055; border:0; color:#fff; width:40px; height:40px; border-radius:999px; display:grid; place-items:center;
}
.reel-topbar .badge.gender{
    padding:.25rem .5rem; border-radius:.5rem; font-weight:600; font-size:.9rem; background:#444;
}
.gender[data-gender="femme"]{ background:#FF69B4 }
.gender[data-gender="homme"]{ background:#1E90FF }
.gender[data-gender="trans"]{ background:#9400D3 }

.reel-topbar .meta{ display:flex; align-items:center; gap:10px; margin-left:auto }
.reel-topbar .author{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg) }
.reel-topbar .author img{ width:36px; height:36px; border-radius:999px; object-fit:cover; border:2px solid #fff3 }
.reel-topbar .author span{ font-weight:700 }
.reel-topbar .ago{ color:var(--muted); font-size:.9rem }

/* Footer */
.reel-footer{
    position:fixed; inset: auto 0 0 0; z-index:15; padding:12px 14px 16px;
    background: linear-gradient(180deg, #0000 0%, #0008 28%, #000a 60%, #000e 100%);
}
.tags{
    display:flex; gap:8px; overflow:auto; padding-bottom:8px;
    scrollbar-width:none;
}
.tags::-webkit-scrollbar{ display:none }
.tag{
    white-space:nowrap; background:var(--chip); color:#fff; border:1px solid #ffffff22;
    padding:.25rem .6rem; border-radius:999px; font-size:.95rem; text-decoration:none;
}
.tag:hover{ background:#00000099 }
.desc{
    margin:6px 2px 10px; color:#eee; font-size: clamp(.95rem, 2vw, 1.05rem);
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.pill{
    display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px;
    background:#ffffff18; border:1px solid #ffffff26; color:#fff; text-decoration:none; font-weight:700;
}
.pill:focus{ outline:2px solid #fff6; outline-offset:2px }

/* Tap zones (prev/next) */
.tap-zone{
    position:fixed; top:0; bottom:0; width:32%; z-index:14; background:transparent; border:0;
}
.tap-zone.left{ left:0 }
.tap-zone.right{ right:0 }

/* Play/Pause floating icon (optional) */
.play-indicator{
    inset:auto 0 14% 0; margin:auto; width:54px; height:54px;
    border-radius:999px; background:#00000066; border:1px solid #ffffff3a; display:grid; place-items:center; color:#fff
}

/* Desktop tweaks */
@media (min-width:900px){
    .reel-topbar{ inset: 20px 20px auto }
    .reel-footer{ padding:18px 20px 22px }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
    .reel-track{ scroll-behavior:auto }
    .reel-progress .seg > i{ transition:none }
}


/* =========================
   Vars & base
   ========================= */
:root{
    --accent: #9b87f5;
    --glass-bg: rgba(255,255,255,.08);
    --glass-br: 14px;
    --glass-blur: 10px;
    --caption-bg: rgba(0,0,0,.72);
    --caption-fg: #fff;
    --progress-fg: rgba(255,255,255,.8);
}

.reel {
    background:#000;
}

/* Progress – barre fine, propre */
.reel-progress .seg { position:relative; height:3px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; }
.reel-progress .seg + .seg{ margin-left:6px; }
.reel-progress .seg > i { position:absolute; inset:0 100% 0 0; background:var(--progress-fg); }

/* Story & media */
.story{ position:relative; width:100%; height:100svh; display:grid; place-items:center; }
.media{ width:100%; height:100%; object-fit:cover; }

/* =========================
   STYLE: Spotlight+
   ========================= */
.story[data-style="spotlight"] { isolation:isolate; }
.story[data-style="spotlight"]::after{
    content:""; position:absolute; inset:0;
    /* vignette radiale douce */
    background: radial-gradient(60% 60% at 50% 55%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
    pointer-events:none; z-index:1;
}

/* Carte glass pour les métadonnées (déjà rendue par JS en .frosted-meta) */
.story[data-style="spotlight"] .frosted-meta{
    position:absolute; bottom:5rem; left:7rem; z-index:2;
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    background:var(--glass-bg);
    backdrop-filter:saturate(120%) blur(var(--glass-blur));
    color:#fff; font-weight:600;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 6px 24px rgba(0,0,0,.35);
    text-decoration:none;
    cursor:pointer;    /* indique que c’est cliquable */
}

.reel[data-style="spotlight"] .reel-footer .cta,
.reel[data-style="spotlight"] #profileBtn {
    display: none !important;
}

.reel[data-style="captions"] .reel-footer .cta,
.reel[data-style="captions"] #profileBtn {
    margin-bottom: 2rem;
}

.reel[data-style="captions"] .reel-footer .desc,
.reel[data-style="captions"] #desc {
    display: none !important;
}

.story[data-style="spotlight"] .frosted-meta .mini-avatar{
    width:28px; height:28px; border-radius:999px; object-fit:cover;
    box-shadow:0 0 0 2px rgba(255,255,255,.75), 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
}

/* léger zoom lent sur image uniquement */
@media (prefers-reduced-motion: no-preference){
    .story[data-style="spotlight"] img.media{
        animation: spotZoom 10s linear both;
    }
}
@keyframes spotZoom{ from{ transform:scale(1.0);} to{ transform:scale(1.03);} }

/* =========================
   STYLE: Letterbox (remplace Cinema)
   ========================= */
.story[data-style="letterbox"]{ background:#000; }
.story[data-style="letterbox"] .media{
    object-fit:contain;  /* respecte le cadre original */
    background:#000;
}
/* masques top/bottom très subtils pour un rendu “projection” */
.story[data-style="letterbox"]::before,
.story[data-style="letterbox"]::after{
    content:""; position:absolute; left:0; right:0; height:10svh;
    pointer-events:none; z-index:1;
}
.story[data-style="letterbox"]::before{
    top:0; background:linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.story[data-style="letterbox"]::after{
    bottom:0; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}

/* Progress plus discret en letterbox */
.reel[data-style="letterbox"] .reel-progress .seg{ height:2px; background:rgba(255,255,255,.12); }
.reel[data-style="letterbox"] .reel-progress .seg > i{ background:rgba(255,255,255,.7); }

/* =========================
   STYLE: Captions
   ========================= */
.story[data-style="captions"] .caption-band{
    position:absolute; left:12px; right:12px; bottom:16px; z-index:3;
    background:var(--caption-bg); color:var(--caption-fg);
    padding:10px 14px; border-radius:12px;
    line-height:1.45; font-size:16px; font-weight:600;
    text-wrap:balance;
    box-shadow:0 8px 28px rgba(0,0,0,.45);
}
/* animation douce d’apparition */
@media (prefers-reduced-motion: no-preference){
    .story[data-style="captions"] .caption-band{ animation: capFade .38s ease-out both; }
}
@keyframes capFade{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* Toggle CC (si data-cc="off" sur .reel) */
.reel[data-cc="off"] .caption-band{ display:none !important; }

/* =========================
   Bouton Play/Pause (vidéo)
   ========================= */
.play-indicator{
    position:absolute; inset:auto 16px 16px auto; z-index:4;
    display:grid; place-items:center; width:44px; height:44px;
    border-radius:999px; background:rgba(0,0,0,.55);
    color:#fff; border:1px solid rgba(255,255,255,.2);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.play-indicator i{ font-size:14px; }
.play-indicator[hidden]{ display:none !important; }

/* =========================
   Topbar/Badges petits raffinements
   ========================= */
.reel-topbar .author img{
    width:28px; height:28px; border-radius:999px; object-fit:cover;
    box-shadow:0 0 0 2px rgba(255,255,255,.75);
}
.badge.gender[data-gender="femme"]{ background: color-mix(in srgb, #ff89c6 72%, #000); }
.badge.gender[data-gender="homme"]{ background: color-mix(in srgb, #7bb8ff 72%, #000); }
.badge.gender[data-gender="trans"]{ background: color-mix(in srgb, #b58bff 72%, #000); }