/* FuriousTubes — header, barre latérale, hero, sections */
/* HEADER */
header{position:sticky;top:0;z-index:100;background:rgba(5,3,15,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:10px 20px;display:flex;align-items:center;gap:12px 20px;min-height:64px;min-width:0}
.logo{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:2px;background:linear-gradient(90deg,var(--fire),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0;cursor:pointer}

.search{position:relative;flex:1 1 auto;max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 14px;border-radius:12px;background:rgba(21,15,51,.72);border:1px solid var(--border);color:var(--muted);transition:border-color .2s,box-shadow .2s}
.search:focus-within{border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.25);color:var(--text)}
.search-ico{flex-shrink:0}
.search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button{display:none}
.search-filter{width:34px;height:34px;border-radius:9px;border:none;background:none;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.search-filter:hover{background:rgba(139,92,246,.28)}
.sort-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;display:none;flex-direction:column;padding:6px;border-radius:12px;background:rgba(12,8,32,.97);border:1px solid var(--border);box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 30px rgba(124,58,237,.25);z-index:20}
.sort-menu.open{display:flex}
.sort-menu button{background:none;border:none;color:var(--text);text-align:left;font-family:'DM Sans',sans-serif;font-size:13px;padding:9px 12px;border-radius:8px;cursor:pointer}
.sort-menu button:hover{background:rgba(139,92,246,.22)}
.sort-menu button.on{color:#22d3ee;font-weight:700}

.hbar{display:flex;align-items:center;gap:8px;flex-shrink:0}
#headerRight{display:contents}
header .btn,header .btn-maker{height:40px;padding:0 16px;border-radius:10px;font-size:13px;justify-content:center}
.btn-outline{background:rgba(5,3,15,.4);border:1px solid rgba(241,238,255,.35);color:var(--text)}
.btn-outline:hover{border-color:#818cf8;box-shadow:0 0 18px rgba(99,102,241,.35)}
header .btn svg,header .btn-maker svg{flex-shrink:0}

.btn{border:none;font-family:'DM Sans',sans-serif;font-size:12px;font-weight:600;cursor:pointer;border-radius:7px;transition:all .2s;display:flex;align-items:center;gap:4px;padding:7px 12px;flex-shrink:0;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,var(--fire),var(--fire2));color:#fff;box-shadow:0 0 16px rgba(124,58,237,.25)}
.btn-primary:hover{box-shadow:0 0 28px rgba(124,58,237,.45);transform:translateY(-1px)}
.btn-ghost{background:none;border:1px solid var(--border);color:var(--muted)}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.av-xs{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--fire),var(--gold));display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#000;flex-shrink:0;overflow:hidden}
.av-xs img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.btn-maker{background:linear-gradient(135deg,#8b5cf6,#c084fc);color:#000;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:6px;flex-shrink:0;transition:all .2s;white-space:nowrap}
.hbar .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* STRUCTURE : barre latérale + contenu */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);max-width:1860px;margin:0 auto;align-items:start}
.side{position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto;padding:16px 12px 28px 16px;scrollbar-width:thin}
.side-nav{display:flex;flex-direction:column;gap:2px}
.si-btn{display:flex;align-items:center;gap:14px;width:100%;height:42px;padding:0 14px;border-radius:12px;border:1px solid transparent;background:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;text-align:left;white-space:nowrap;transition:background .15s,color .15s}
.si-btn:hover{background:rgba(99,102,241,.14)}
.si-btn.active{background:rgba(70,84,200,.3);color:#fff;border-color:rgba(129,140,248,.28)}
.si-btn.active .si-ico{color:#8ea0ff}
.si-ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#c9ceee}
.si-lbl{overflow:hidden;text-overflow:ellipsis}
.side-sep{height:1px;background:var(--border);margin:14px 10px 16px;opacity:.8}
.side-title{padding:0 14px 8px;font-size:14px;color:var(--muted);font-weight:500}
.side .side-nav+.side-sep+.side-title+.side-nav .si-btn{height:38px;font-size:13px;color:#c9ceee}
.side .side-nav+.side-sep+.side-title+.side-nav .si-ico svg{width:19px;height:19px}

#content{padding:20px 28px 56px;min-width:0}

/* HERO */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:300px;padding:44px 52px;margin-bottom:34px;border-radius:20px;
  border:1px solid rgba(129,140,248,.35);box-shadow:0 0 60px rgba(79,70,229,.22);
  background-color:#0b0720;
  background-image:var(--hero-img,none),
    radial-gradient(ellipse 55% 95% at 88% 35%,rgba(34,211,238,.28),transparent 62%),
    radial-gradient(ellipse 75% 110% at 12% 0%,rgba(124,58,237,.6),transparent 65%),
    radial-gradient(ellipse 60% 80% at 60% 110%,rgba(192,38,211,.35),transparent 60%),
    linear-gradient(135deg,#150f33,#0b0720);
  background-size:cover;background-position:center}
.hero[hidden]{display:none}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(5,3,15,.94) 0%,rgba(5,3,15,.7) 40%,rgba(5,3,15,0) 78%)}
.hero-txt{position:relative;z-index:1;max-width:580px}
.hero h1{font-family:'Sora','DM Sans',sans-serif;font-weight:800;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.5px;text-shadow:0 0 40px rgba(139,92,246,.5)}
.hero p{color:#d9d3f5;margin-top:16px;font-size:15px;line-height:1.6;max-width:520px}
.hero-dots{position:absolute;right:22px;bottom:16px;z-index:2;display:flex;gap:8px}
.hero-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:rgba(241,238,255,.35);cursor:pointer;transition:background .2s,transform .2s}
.hero-dots button.on{background:#fff;transform:scale(1.15)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn-hero{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;border-radius:12px;border:none;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;color:#fff;cursor:pointer;
  background:linear-gradient(135deg,#5b6cff,#7c4dff);box-shadow:0 0 22px rgba(99,102,241,.5);transition:transform .15s,box-shadow .2s}
.btn-hero:hover{transform:translateY(-1px);box-shadow:0 0 36px rgba(129,140,248,.7)}
.btn-hero.ghost{background:rgba(5,3,15,.45);border:1px solid rgba(129,140,248,.6);box-shadow:none;backdrop-filter:blur(6px)}
.btn-hero.ghost:hover{border-color:#a78bfa;box-shadow:0 0 24px rgba(139,92,246,.4)}

/* SECTIONS */
.sec{margin-bottom:38px}
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sec-ico{display:flex;align-items:center;line-height:1}
.sec-ico svg{display:block}
.sec-head h2{font-family:'Sora','DM Sans',sans-serif;font-size:22px;font-weight:700;margin:0}
.sec-more{margin-left:auto;background:none;border:none;color:#7f93ff;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap}
.sec-more:hover{color:#b4c0ff;text-decoration:underline}
.pill{background:var(--bg3);border:1px solid var(--border);padding:2px 10px;border-radius:99px;font-size:11px;color:var(--muted)}
.row-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0 18px}
.full-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:32px 18px}

/* Grands écrans : un peu plus d'air */
@media(min-width:1600px){#content{padding:24px 40px 64px}.app{grid-template-columns:260px minmax(0,1fr)}}

/* Tablette : barre latérale réduite aux icônes */
@media(max-width:1100px){
  .app{grid-template-columns:76px minmax(0,1fr)}
  .side{padding:12px 8px 24px}
  .si-btn{justify-content:center;padding:0;gap:0}
  .si-lbl,.side-title{display:none}
  .side-sep{margin:12px 8px}
  .side .side-nav+.side-sep+.side-title+.side-nav .si-btn{height:42px}
  #content{padding:18px 20px 48px}
  .hero{padding:36px 36px;min-height:260px}
  header .hbar .long{display:none}
  .full-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
}

/* Petite tablette / grand téléphone : la barre latérale devient une rangée de pastilles */
@media(max-width:760px){
  header{flex-wrap:wrap;padding:8px 12px;gap:8px 12px;min-height:56px}
  .logo{font-size:22px}
  .hbar{margin-left:auto;gap:6px}
  header .btn,header .btn-maker{height:36px;padding:0 12px;font-size:12px}
  .search{order:3;flex:1 1 100%;max-width:none;margin:0;height:40px}
  .app{display:block}
  .side{position:static;height:auto;display:flex;align-items:center;gap:6px;overflow-x:auto;padding:10px 12px;scrollbar-width:none}
  .side::-webkit-scrollbar{display:none}
  .side-nav{flex-direction:row;gap:6px;flex-shrink:0}
  .side-sep{width:1px;height:24px;margin:0 4px;flex-shrink:0}
  .side-title{display:none}
  .si-btn,.side .side-nav+.side-sep+.side-title+.side-nav .si-btn{width:auto;height:34px;padding:0 12px;gap:6px;border-radius:99px;background:rgba(139,92,246,.14);font-size:13px;justify-content:flex-start}
  .si-btn.active{background:#f1eeff;color:#05030f;box-shadow:none}
  .si-lbl{display:inline}
  #content{padding:12px 14px 40px}
  .hero{min-height:0;padding:26px 22px 40px;border-radius:16px;margin-bottom:26px}
  .hero p{font-size:13px;margin-top:10px}
  .hero-btns{gap:8px;margin-top:18px}
  .btn-hero{height:42px;padding:0 16px;font-size:13px}
  .hero::after{background:linear-gradient(90deg,rgba(5,3,15,.88),rgba(5,3,15,.5))}
  .sec{margin-bottom:28px}
  .sec-head h2{font-size:19px}
}

/* Téléphone : rangées à défilement horizontal */
@media(max-width:640px){
  header .btn-maker svg,header .av-xs,header .ico{display:none}
  .row-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 14px;margin:0 -14px;padding:0 14px 6px;scrollbar-width:none}
  .row-grid::-webkit-scrollbar{display:none}
  .row-grid>.yt-card{flex:0 0 78%;max-width:340px;scroll-snap-align:start}
  .full-grid{grid-template-columns:1fr;gap:26px}
  .hero h1{font-size:28px}
  .hero-btns .btn-hero{flex:1 1 100%;justify-content:center}
}
@media(max-width:380px){
  header .hbar .btn-maker{display:none}
  .row-grid>.yt-card{flex-basis:86%}
}