:root{
    --bg:#0f0f10; --bg2:#151518; --card:#17171a;
    --text:#f5f6f7; --muted:#a5a8ad;
    --hot:#4bc3fa; --rank:#ff8a00; --shadow:0 8px 24px rgba(0,0,0,.35);
  }
  body{background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
  .safe{padding-bottom:40px} /* space for bottom menu */

  /* ------- TOPBAR ------- */
  .topbar{position:sticky;top:0;z-index:1000;padding:16px 12px 10px;
          background:#000;}
  .search-pill{background:var(--bg2);border:1px solid rgba(255,255,255,.06);border-radius:999px;padding:10px 14px;display:flex;gap:10px;align-items:center}
  .search-pill input{background:transparent;border:0;outline:0;color:var(--text);width:100%;font-size:15px}
  .tabs{display:flex;gap:22px;overflow-x:auto;padding:14px 2px 8px;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{color:#d4d7dd;font-weight:800;opacity:.95;flex:0 0 auto;position:relative;padding-bottom:6px}
  .tab.active{color:#fff}
  .tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:#fff}

  /* ------- GRID ------- */
  .movie-card{background:#000;border:none;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
  .poster{position: relative;background:#1a1a1f}
  .poster img{width:100%;height:100%;object-fit:cover;display:block}
  .movie-title{font-size:10px;margin:8px 2px 10px;min-height:36px;line-height:1.25;
               display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ------- TITLES ------- */
  .title-xl{font-weight:900;font-size:22px;margin:16px 8px 6px}

  /* ------- H-scroll base (Incontournables) ------- */
  .snap{display:flex;gap:14px;overflow-x:auto;padding:6px 8px 2px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .snap::-webkit-scrollbar{display:none}
  .snap-item{
    scroll-snap-align: start;
    flex: 0 0 35%;
    border-radius: 6px;
    overflow: hidden;
    background: #000000;
    box-shadow: var(--shadow);
}
  @media(min-width:576px){.snap-item{flex-basis:55%}}
  @media(min-width:992px){.snap-item{flex-basis:32%}}
  .snap-item .ph{aspect-ratio:2/3;position:relative;background:#1b1b20}
  .snap-item img{width:100%;height:100%;object-fit:cover;display:block}
  .title-band{position:absolute;left:10px;right:10px;bottom:10px;background:#0e0e10;color:#fff;
              padding:10px 12px;border-radius:16px;font-weight:900;font-size:11px;
              display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

  /* ------- Carousel arrows ------- */
  .arrow{
    position:relative; display:inline-flex; width:36px; height:36px; border-radius:999px;
    align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#fff;
    border:1px solid rgba(255,255,255,.2);
  }
  .ctrl{position:relative;height:0}
  .ctrl .left, .ctrl .right{position:absolute; top:-56px}
  .ctrl .left{left:10px} .ctrl .right{right:10px}

  /* ------- TENDANCES → pages (3 per row) -------display:flex; */
  .pages{ overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; padding:6px 8px 2px; scrollbar-width:none}
  .pages::-webkit-scrollbar{display:none}
  .page{flex:0 0 100%; scroll-snap-align:start}
  .trend-mini{background:var(--card); border-radius:18px; padding:8px; box-shadow:var(--shadow)}
  .trend-ph{position:relative; width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:#1e1e23}
  .trend-ph img{width:100%; height:100%; object-fit:cover; display:block}
  .rank{position:absolute; top:8px; left:8px; width:26px; height:26px; border-radius:9px;
        background:var(--rank); color:#fff; display:grid; place-items:center; font-weight:900;
        box-shadow:0 6px 16px rgba(255,138,0,.45)}
  .trend-title{ font-size:11px; margin:8px 2px 0; line-height:1.2;
               display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
  .trend-meta{   
    font-size: 11px;
    color: #ffffff;
    direction: ltr;
    padding: 6px;
    font-family: 'bootstrap-icons';
    position: relative;}

  /* ------- BOTTOM NAV (restored) ------- */
  .app-nav{
    position:fixed; left:0; right:0; bottom:0; z-index:1000;
    background:rgba(10,10,12,.96); border-top:1px solid rgba(255,255,255,.06);
    backdrop-filter:saturate(120%) blur(6px);
  }
  .app-nav .nav-link{color:#d6d8dd; font-weight:800; font-size:13px; padding:10px 4px 12px; gap:6px}
  .app-nav .nav-link i{font-size:22px}
  .app-nav .nav-link.active{color:#fff}
  .app-nav .nav-link.active i{color:var(--hot)}

  .pf-label

 {
 
    color: #000 !important;
}.pf-chev

 {
    opacity:1 !important;
    color: #000000 !important;
}