/* ══════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════ */
:root {
  --bg:        #0c0a08;
  --surface:   #141210;
  --border:    #2a221c;
  --accent:    #e07b35;
  --accent2:   #f09050;
  --text:      #ede0cc;
  --text2:     #9a8878;
  --text3:     #3d3028;
  --mono:      'JetBrains Mono', monospace;
}

/* ══════════════════════════════════════════════
   RESET
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body {
  width:100%; height:100%;
  background:#000;
  font-family:'DM Sans',-apple-system,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  overflow:hidden;
}

/* ══════════════════════════════════════════════
   FEED
══════════════════════════════════════════════ */
#feed {
  height:100dvh; width:100vw;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
#feed::-webkit-scrollbar { display:none; }

/* ══════════════════════════════════════════════
   SLIDE — différent de TikTok :
   pas de video full-bleed. La vidéo est dans un
   cadre avec bords arrondis, fond cocoa visible.
   Donne un sentiment de "carte" pas d'écran noir.
══════════════════════════════════════════════ */
.slide {
  height:100dvh; width:100vw;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--bg);
  contain:layout style paint;
}

/* Fond texturé derrière la vidéo */
.slide::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(224,123,53,.07), transparent),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(85,99,224,.04), transparent);
  pointer-events:none; z-index:0;
}

/* ── CADRE VIDÉO ── */
.video-frame {
  position:relative;
  /* Hauteur calculée pour laisser la barre de nav + top bar */
  height:calc(100dvh - 130px);
  width:min(calc((100dvh - 130px) * 9/16), calc(100vw - 20px));
  border-radius:20px;
  overflow:hidden;
  background:#000;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 24px 60px rgba(0,0,0,.8);
  z-index:1;
  flex-shrink:0;
}

/* Sur mobile étroit : vidéo prend plus de largeur */
@media (max-width:420px) {
  .video-frame {
    width:calc(100vw - 12px);
    height:calc(100dvh - 124px);
    border-radius:16px;
  }
}

/* Desktop / tablette : plus de marge */
@media (min-width:768px) {
  .video-frame {
    width:min(360px, calc(100vw - 280px));
    height:min(640px, calc(100dvh - 100px));
  }
}

.video-player {
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
  cursor:pointer;
  display:block;
  will-change:transform;
}
.video-player.landscape { object-fit:contain; }
.video-player.square    { object-fit:contain; }

/* ── Gradient bas (info desc) ── */
.frame-gradient {
  position:absolute; bottom:0; left:0; right:0; height:55%;
  background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.5) 50%,transparent 100%);
  z-index:2; pointer-events:none;
}

/* ── Overlay pause ── */
.pause-overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:6; opacity:0; pointer-events:none;
  transition:opacity .18s;
}
.pause-overlay.on { opacity:1; }
.pause-icon {
  width:58px; height:58px;
  background:rgba(0,0,0,.55);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(12px);
}

/* ── Spinner chargement ── */
.vid-spinner {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:38px; height:38px;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
  z-index:7; display:none;
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }

/* ── Progress bar — bande en haut du bottom-nav ── */
.prog-wrap {
  position:absolute;
  top:-4px; left:0; right:0;
  height:4px; z-index:51; cursor:pointer;
  touch-action:none;
  display:none;
}
.prog-wrap.active { display:block; }
.prog-buf {
  position:absolute; inset:0;
  background:rgba(255,255,255,.18); border-radius:0;
}
.prog-fill {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:0;
  transition:width .08s linear;
}
.prog-handle {
  position:absolute; top:50%; right:-1px;
  transform:translateY(-50%);
  width:13px; height:13px;
  background:var(--accent); border-radius:50%;
  border:2px solid #fff;
  opacity:0; transition:opacity .15s;
}
.prog-wrap:hover .prog-handle,
.prog-wrap:active .prog-handle { opacity:1; }

/* ── Description dans le cadre ── */
.frame-desc {
  position:absolute; bottom:18px; left:14px; right:14px;
  z-index:8; pointer-events:none;
}
.frame-desc * { pointer-events:auto; }

.fd-user {
  display:flex; align-items:center; gap:8px;
  margin-bottom:7px; flex-wrap:wrap;
}
.fd-username {
  font-family:'Syne',sans-serif;
  font-weight:700; font-size:13.5px; color:#fff;
  text-decoration:none; text-shadow:0 1px 4px rgba(0,0,0,.7);
}
.fd-username:hover { color:var(--accent); }
.fd-spec {
  font-size:10px; color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.09);
  padding:2px 7px; border-radius:20px;
}
.fd-proof-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:700; color:#0c0a08;
  background:var(--accent2);
  padding:2px 8px; border-radius:20px;
  text-shadow:none;
}
.fd-proof-badge.pending {
  color:var(--accent2);
  background:rgba(224,123,53,.16);
  border:1px solid rgba(224,123,53,.5);
}
.fd-follow {
  background:rgba(224,123,53,.15);
  color:var(--accent);
  border:1.5px solid rgba(224,123,53,.5);
  padding:4px 11px; border-radius:20px;
  font-size:11px; font-weight:700;
  cursor:pointer; transition:.15s;
  font-family:'DM Sans',sans-serif;
}
.fd-follow:hover { background:rgba(224,123,53,.28); }
.fd-follow.on {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.65);
}
.fd-text {
  font-size:13px; line-height:1.5;
  color:rgba(255,255,255,.9);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
  margin-bottom:4px;
}
.fd-text.exp {
  display:block; -webkit-line-clamp:unset; overflow:visible;
}
.fd-more {
  background:none; border:none; color:rgba(255,255,255,.45);
  font-size:11px; cursor:pointer; padding:0;
  font-family:'DM Sans',sans-serif;
}
.fd-more:hover { color:var(--accent); }
.fd-tags { margin-top:4px; }
.fd-tag {
  color:var(--accent); font-size:12px; font-weight:600;
  cursor:pointer; margin-right:5px;
}

/* ── Durée top-right dans le cadre ── */
.frame-dur {
  position:absolute; top:10px; right:10px;
  font-family:var(--mono); font-size:10px;
  color:rgba(255,255,255,.65);
  background:rgba(0,0,0,.45); backdrop-filter:blur(8px);
  padding:3px 8px; border-radius:10px;
  z-index:8; pointer-events:none;
}

/* ── Like animation ── */
.like-burst {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:82px; opacity:0;
  z-index:20; pointer-events:none;
}
@keyframes burst {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(1.2); }
  60%  { opacity:1; transform:translate(-50%,-50%) scale(.95); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.7); }
}

/* ══════════════════════════════════════════════
   BARRE D'ACTIONS DROITE — verticale, hors cadre
   (différent de TikTok : sur le côté droit de
   l'interface, pas superposée sur la vidéo)
══════════════════════════════════════════════ */
.actions-rail {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column;
  align-items:center; gap:18px;
  z-index:10;
}
@media (min-width:768px) {
  .actions-rail { right:calc(50% - 220px); }
}

.ar-item {
  display:flex; flex-direction:column;
  align-items:center; gap:4px;
}
.ar-btn {
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(20,18,16,.75);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
  color:var(--text);
}
.ar-btn:hover  { background:rgba(40,32,24,.9); border-color:rgba(224,123,53,.3); }
.ar-btn:active { transform:scale(.9); }
.ar-btn.liked  {
  background:rgba(224,123,53,.18);
  border-color:rgba(224,123,53,.45);
  box-shadow:0 0 14px rgba(224,123,53,.2);
}
.ar-count {
  font-size:10.5px; font-weight:700;
  color:var(--text2);
  text-align:center; min-width:28px;
}

/* Avatar dev — carré arrondi Hokay style */
.ar-avatar {
  width:44px; height:44px;
  border-radius:12px;
  overflow:hidden;
  border:2px solid rgba(224,123,53,.6);
  display:block; transition:.15s;
}
.ar-avatar:hover { border-color:var(--accent); transform:scale(1.04); }

/* Vinyl cover — disque minimaliste */
.ar-vinyl {
  width:44px; height:44px;
  border-radius:50%;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.15);
  animation:rot 10s linear infinite paused;
  cursor:pointer;
}
.ar-vinyl.playing { animation-play-state:running; }
@keyframes rot { 100% { transform:rotate(360deg); } }

/* Speed badge dans le bouton */
.spd-lbl { font-family:var(--mono); font-size:9px; font-weight:600; }

/* ══════════════════════════════════════════════
   TOP BAR — minimaliste, différent TikTok
══════════════════════════════════════════════ */
#topbar {
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  padding:max(env(safe-area-inset-top),10px) 16px 8px;
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;
}
#topbar > * { pointer-events:auto; }

.tb-back {
  width:34px; height:34px;
  background:rgba(12,10,8,.65);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); text-decoration:none;
  transition:.15s; cursor:pointer;
}
.tb-back:hover { background:rgba(40,32,24,.8); }

.tb-logo {
  font-family:'Syne',sans-serif; font-weight:800; font-size:1.05rem;
  color:var(--text); letter-spacing:-.3px;
  background:rgba(12,10,8,.65);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:20px;
  padding:5px 14px;
}
.tb-logo span { color:var(--accent); }

.tb-right { display:flex; gap:8px; }
.tb-btn {
  width:34px; height:34px;
  background:rgba(12,10,8,.65);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--text); text-decoration:none;
  cursor:pointer; transition:.15s; position:relative;
}
.tb-btn:hover { background:rgba(40,32,24,.8); }

/* Indicateur son — dans la topbar, pas sur la vidéo */
#sound-pill {
  display:flex; align-items:center; gap:5px;
  background:rgba(12,10,8,.7);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:20px;
  padding:5px 11px;
  font-size:11px; color:var(--text2);
  cursor:pointer; transition:.15s;
}
#sound-pill.on { color:var(--accent); border-color:rgba(224,123,53,.3); }
#sound-pill:hover { background:rgba(40,32,24,.8); }

/* ══════════════════════════════════════════════
   DOTS + COMPTEUR — discrets, en bas du cadre
   (pas en haut comme TikTok)
══════════════════════════════════════════════ */
#vid-counter {
  position:fixed; bottom:76px; left:50%;
  transform:translateX(-50%);
  z-index:20; pointer-events:none;
  display:flex; align-items:center; gap:8px;
}
.counter-pill {
  font-family:var(--mono); font-size:10px; font-weight:600;
  color:rgba(255,255,255,.55);
  background:rgba(0,0,0,.4); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px; padding:3px 10px;
}
.dots-row { display:flex; gap:3px; align-items:center; }
.pdot {
  height:2px; width:14px; max-width:14px;
  background:rgba(255,255,255,.15); border-radius:2px;
  overflow:hidden; transition:.2s;
}
.pdot.cur { background:rgba(255,255,255,.4); width:22px; }
.pdot-fill {
  height:100%; width:0%;
  background:var(--accent); border-radius:2px;
  transition:width .1s linear;
}

/* ══════════════════════════════════════════════
   BOTTOM NAV
══════════════════════════════════════════════ */
#bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(10,8,6,.96);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--border);
  padding:8px 0 max(env(safe-area-inset-bottom),10px);
  z-index:50;
}
.bn-inner { display:flex; justify-content:space-around; align-items:center; }
.bn-item {
  display:flex; flex-direction:column;
  align-items:center; gap:3px;
  color:rgba(255,255,255,.35);
  transition:color .15s; padding:4px 12px;
  text-decoration:none; cursor:pointer;
}
.bn-item.cur { color:var(--accent); }
.bn-item:hover { color:rgba(255,255,255,.7); }
.bn-item span { font-size:10px; font-weight:600; }
.bn-post {
  width:46px; height:46px;
  background:var(--accent); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(224,123,53,.45);
  transition:.15s;
}
.bn-post:hover { transform:scale(1.06); }

/* ══════════════════════════════════════════════
   BOTTOM SHEET (commentaires, partage)
══════════════════════════════════════════════ */
.sheet {
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:transparent; pointer-events:none;
  transition:background .25s;
}
.sheet.open {
  background:rgba(0,0,0,.6);
  pointer-events:all;
}
.sheet-box {
  background:#141210;
  border-radius:22px 22px 0 0;
  border-top:1px solid var(--border);
  max-height:78dvh;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,0,.15,1);
  display:flex; flex-direction:column; overflow:hidden;
}
.sheet.open .sheet-box { transform:translateY(0); }
.sheet-handle {
  width:38px; height:4px;
  background:rgba(255,255,255,.12);
  border-radius:2px; margin:11px auto 3px;
  flex-shrink:0;
}
.sheet-head {
  padding:10px 18px 12px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.sheet-title {
  font-family:'Syne',sans-serif; font-weight:700;
  font-size:.95rem; color:var(--text);
}
.sheet-close {
  width:30px; height:30px;
  background:rgba(255,255,255,.07); border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--text); transition:.15s;
}
.sheet-close:hover { background:rgba(255,255,255,.13); }
.sheet-body { flex:1; overflow-y:auto; }
.sheet-body::-webkit-scrollbar { width:3px; }
.sheet-body::-webkit-scrollbar-thumb { background:var(--text3); border-radius:2px; }

/* Comments */
.cmt-item {
  display:flex; gap:11px;
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.cmt-av {
  width:32px; height:32px;
  border-radius:9px; object-fit:cover;
  background:var(--text3); flex-shrink:0;
}
.cmt-body { flex:1; min-width:0; }
.cmt-name { font-weight:700; font-size:12.5px; color:var(--text); margin-bottom:2px; }
.cmt-text { font-size:12.5px; color:rgba(255,255,255,.72); line-height:1.5; word-break:break-word; }
.cmt-time { font-size:10.5px; color:var(--text3); margin-top:4px; }

.cmt-input-row {
  padding:10px 14px;
  border-top:1px solid var(--border);
  background:#141210;
  display:flex; gap:9px; align-items:center; flex-shrink:0;
}
.cmt-input {
  flex:1; background:#1a1612;
  border:1px solid var(--border); border-radius:20px;
  padding:9px 14px; font-size:13.5px; color:var(--text);
  outline:none; font-family:'DM Sans',sans-serif;
  transition:.15s;
}
.cmt-input::placeholder { color:var(--text3); }
.cmt-input:focus { border-color:rgba(224,123,53,.4); }
.cmt-send {
  width:38px; height:38px;
  background:var(--accent); border:none; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#0c0a08; flex-shrink:0;
  transition:.15s;
}
.cmt-send:hover { background:var(--accent2); }

/* Share */
.share-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:12px; padding:18px;
}
.share-opt {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px; border-radius:12px;
  cursor:pointer; transition:.15s; border:none; background:transparent;
  font-family:'DM Sans',sans-serif;
}
.share-opt:hover { background:rgba(255,255,255,.04); }
.share-ico {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.share-lbl { font-size:10.5px; color:rgba(255,255,255,.6); font-weight:500; }
.share-link-row {
  margin:0 18px 18px;
  background:var(--bg);
  border:1px solid var(--border); border-radius:12px;
  display:flex; overflow:hidden;
}
.share-link-in {
  flex:1; background:transparent; border:none;
  padding:10px 12px; font-size:12px; color:rgba(255,255,255,.55);
  outline:none; font-family:'DM Sans',sans-serif;
}
.share-link-copy {
  padding:9px 14px; background:var(--accent); border:none;
  color:#0c0a08; font-size:11.5px; font-weight:700; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:.15s;
}
.share-link-copy:hover { background:var(--accent2); }

/* ══════════════════════════════════════════════
   TOAST NOTIFICATION — bas gauche, pas droite
══════════════════════════════════════════════ */
#toast {
  position:fixed; bottom:76px; left:14px;
  background:rgba(20,18,16,.95);
  backdrop-filter:blur(12px);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 15px;
  font-size:12.5px; font-weight:600; color:var(--text);
  z-index:500;
  display:flex; align-items:center; gap:7px;
  max-width:240px;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0; transform:translateY(6px);
  transition:.2s;
  pointer-events:none;
}
#toast.on { opacity:1; transform:translateY(0); }
#toast.s { border-left:3px solid #22c55e; }
#toast.e { border-left:3px solid #ef4444; }
#toast.i { border-left:3px solid var(--accent); }