/* ═══════════════════════════════════════════════════════════════
   izlanzik.org  –  Theme Azure
   Palette exacte de Boites-interim .theme-azure
   Typographie: Inter (corps) + Newsreader (titres éditoriaux)
   ═══════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* ── Design Tokens — Azure (défaut) ─────────────────────────── */
:root {
  --bg:          #f4f8fc;   /* canvas bleu-clair froid */
  --bg2:         #ffffff;   /* surface / cartes */
  --bg3:         #eaf2fa;   /* surface douce */
  --accent:      #e94560;   /* rouge marque */
  --accent-bg:   #fde8eb;   /* tint accent */
  --text:        #0e1f33;   /* encre foncée */
  --text-soft:   #1f3a59;   /* encre douce */
  --muted:       #5b7791;   /* tertiaire */
  --border:      #d6e2ee;   /* hairline bleutée */
  --radius:      12px;
  --radius-sm:   6px;
  --sh-xs:  0 1px 3px rgba(14,31,51,.05);
  --sh-sm:  0 2px 12px rgba(14,31,51,.08);
  --sh-md:  0 6px 24px rgba(14,31,51,.10);
  --sh-lg:  0 12px 36px rgba(14,31,51,.12);
}

/* ── Dark mode — navy ────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:          #080f1a;
  --bg2:         #0d1826;
  --bg3:         #132030;
  --accent-bg:   rgba(233,69,96,.13);
  --text:        #e2eaf3;
  --text-soft:   #a8bccc;
  --muted:       #5b7791;
  --border:      #1e3348;
  --sh-xs:  0 1px 3px rgba(0,0,0,.4);
  --sh-sm:  0 2px 12px rgba(0,0,0,.5);
  --sh-md:  0 6px 24px rgba(0,0,0,.6);
  --sh-lg:  0 12px 36px rgba(0,0,0,.65);
}

/* ── Base ────────────────────────────────────────────────────── */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── Serif editorial (Newsreader) ────────────────────────────── */
.font-serif,
h1, h2,
.vp-title,
.hero-title,
.channel-info h1,
.artist-hero-info h1,
.section-title,
.nf-code { font-family: 'Newsreader', 'Playfair Display', Georgia, serif; }

h1, .hero-title        { letter-spacing: -.03em; line-height: 1.1; }
h2, .vp-related-title  { letter-spacing: -.015em; }

/* ── Header ──────────────────────────────────────────────────── */
.site-header {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
[data-theme="dark"] .site-header { background: rgba(8,15,26,.92); }

.header-inner {
  max-width: 1400px; margin: auto;
  padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  height: 60px;
}

.logo {
  font-size: 1rem; font-weight: 800; white-space: nowrap;
  letter-spacing: -.02em; color: var(--text);
}
.logo span { color: var(--accent); }
.logo em   { color: var(--muted); font-style: normal; font-size: .82em; font-weight: 400; }

/* Nav */
.header-nav { display: flex; gap: .1rem; flex: 1; }
.header-nav > a,
.header-nav > .dropdown > a {
  padding: .4rem .7rem; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; color: var(--muted);
  transition: background .15s, color .15s; white-space: nowrap;
}
.header-nav > a:hover,
.header-nav > .dropdown > a:hover { background: var(--bg3); color: var(--text); }

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 210px; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .4rem 0; z-index: 200; box-shadow: var(--sh-md);
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; font-size: .875rem; color: var(--text-soft);
  transition: background .12s;
}
.dropdown-menu a:hover { background: var(--bg3); color: var(--text); }

/* Search (pill avec bouton sombre à droite) */
.header-search { margin-left: auto; position: relative; }
.header-search form {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 24px;
  overflow: hidden; background: var(--bg2);
  transition: border-color .15s, box-shadow .15s;
}
.header-search form:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(14,31,51,.08);
}
[data-theme="dark"] .header-search form:focus-within { box-shadow: 0 0 0 3px rgba(226,234,243,.08); }
.header-search input {
  background: none; border: none; padding: .42rem .9rem;
  color: var(--text); font-size: .875rem; width: 200px;
  outline: none; font-family: inherit;
}
.header-search input::placeholder { color: var(--muted); }
.header-search button {
  background: var(--text); border: none;
  padding: .3rem .65rem; margin: .25rem .25rem;
  color: var(--bg2); cursor: pointer; border-radius: 20px;
  font-size: .9rem; line-height: 1; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center;
}
.header-search button:hover { opacity: .8; }

/* ── Hero (homepage) ─────────────────────────────────────────── */
.hero {
  background: linear-gradient(180deg, #f0f6ff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
  padding: 4rem 1.5rem 3.5rem;
}
[data-theme="dark"] .hero { background: linear-gradient(180deg, #0a1525 0%, var(--bg) 100%); }
.hero-inner   { max-width: 680px; margin: auto; }
.hero-tag     {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 20px;
  padding: .25rem .75rem; margin-bottom: 1.25rem;
  background: var(--bg2);
}
.hero-title   {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
  color: var(--text); margin-bottom: 1rem;
}
.hero-sub     { font-size: 1rem; color: var(--muted); margin-bottom: 2rem; max-width: 520px; line-height: 1.7; }
.hero-search  {
  display: flex; align-items: center;
  border: 1px solid var(--border); border-radius: 30px;
  background: var(--bg2); overflow: hidden;
  box-shadow: var(--sh-sm); max-width: 560px;
  transition: box-shadow .2s, border-color .2s;
}
.hero-search:focus-within { border-color: var(--text); box-shadow: var(--sh-md); }
.hero-search .hero-search-icon {
  padding: 0 .75rem 0 1.1rem; color: var(--muted); font-size: 1rem;
}
.hero-search input {
  flex: 1; border: none; background: none; outline: none;
  padding: .85rem .5rem; font-size: 1rem; font-family: inherit;
  color: var(--text);
}
.hero-search input::placeholder { color: var(--muted); }
.hero-search button {
  background: var(--text); color: var(--bg2); border: none;
  margin: .3rem .3rem; padding: .6rem 1.1rem;
  border-radius: 24px; font-size: .95rem; font-weight: 600;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: opacity .15s;
}
.hero-search button:hover { opacity: .85; }

/* ── Layout ──────────────────────────────────────────────────── */
.site-main { max-width: 1400px; margin: auto; padding: 2.5rem 1.5rem; }
.section   { margin-bottom: 3rem; }
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .875rem;
  border-bottom: 1px solid var(--border);
}
.section-header h2 {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  font-family: 'Inter', sans-serif;       /* caps labels stay sans */
  display: flex; align-items: center; gap: .4rem;
}
.see-all  { font-size: .78rem; font-weight: 500; color: var(--muted); transition: color .15s; }
.see-all:hover { color: var(--accent); }

/* ── Video Grid ──────────────────────────────────────────────── */
.grid-videos  { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.grid-featured{ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-related { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* Video card */
.video-card {
  display: block; border-radius: var(--radius); overflow: hidden;
  background: var(--bg2); border: 1px solid var(--border);
  box-shadow: var(--sh-xs);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s;
}
.video-card:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); border-color: #b8cfe3; }
[data-theme="dark"] .video-card:hover { border-color: #2a4060; }

.card-thumb {
  position: relative; aspect-ratio: 16/9;
  overflow: hidden; background: var(--bg3);
}
.card-thumb picture { display: block; width: 100%; height: 100%; }
.card-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.video-card:hover .card-thumb img { transform: scale(1.04); }

.card-dur {
  position: absolute; bottom: .4rem; right: .45rem;
  background: rgba(8,15,26,.72); color: #fff;
  font-size: .68rem; font-weight: 600; padding: .1rem .38rem; border-radius: 4px;
}
.card-feat { position: absolute; top: .4rem; left: .45rem; font-size: .8rem; }
.card-new  {
  position: absolute; top: .4rem; right: .45rem;
  background: #16a34a; color: #fff;
  font-size: .58rem; font-weight: 700; letter-spacing: .07em;
  padding: .12rem .38rem; border-radius: 4px; text-transform: uppercase;
}
.card-info     { padding: .7rem .85rem .8rem; }
.card-title    {
  font-size: .82rem; font-weight: 600; line-height: 1.4; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .3rem;
}
.card-meta      { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.card-channel   { font-size: .73rem; color: var(--muted); font-weight: 500; }
.card-downloads { font-size: .71rem; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── Categories ──────────────────────────────────────────────── */
.cats-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.cat-card  {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
  padding: .45rem 1.1rem; font-size: .85rem; font-weight: 600;
  display: flex; align-items: center; gap: .5rem; box-shadow: var(--sh-xs);
  transition: background .15s, border-color .15s, color .15s;
}
.cat-card:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cat-card span  { font-size: .73rem; color: var(--muted); font-weight: 400; }
.cat-card:hover span { color: rgba(255,255,255,.75); }

/* ── Artists ─────────────────────────────────────────────────── */
.artists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.1rem; }
.artist-card  {
  text-align: center; border-radius: var(--radius);
  padding: 1.25rem .75rem; background: var(--bg2);
  border: 1px solid var(--border); box-shadow: var(--sh-xs);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.artist-card:hover { transform: translateY(-2px); box-shadow: var(--sh-sm); border-color: #b8cfe3; }
[data-theme="dark"] .artist-card:hover { border-color: #2a4060; }
.artist-card img, .artist-placeholder {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; margin: 0 auto .65rem; border: 2px solid var(--border);
}
.artist-placeholder {
  background: var(--bg3); display: flex; align-items: center;
  justify-content: center; font-size: 1.75rem; color: var(--muted);
}
.artist-name  { font-size: .875rem; font-weight: 700; letter-spacing: -.01em; }
.artist-count { font-size: .73rem; color: var(--muted); margin-top: .2rem; }

/* ── Hero: Channel / Artist ──────────────────────────────────── */
.channel-hero, .artist-hero {
  display: flex; gap: 1.5rem; align-items: flex-start;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
  margin-bottom: 2rem; box-shadow: var(--sh-xs);
}
.channel-avatar  { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.channel-info h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .35rem; }
.channel-handle  { color: var(--muted); font-size: .85rem; margin-bottom: .3rem; font-weight: 500; }
.channel-subs    { font-size: .85rem; color: var(--muted); margin-bottom: .5rem; }
.channel-desc    { font-size: .85rem; color: var(--muted); line-height: 1.65; }
.artist-hero-img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid var(--border); }
.artist-hero-info h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.artist-hero-info p  { color: var(--muted); font-size: .875rem; line-height: 1.65; }

/* ── Video Page ──────────────────────────────────────────────── */
.video-page { display: flex; flex-direction: column; gap: 1.5rem; max-width: 1100px; margin: auto; }
.vp-embed-wrap { width: 100%; }
.vp-embed {
  position: relative; aspect-ratio: 16/9;
  background: #000; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--sh-md);
}
.vp-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

.vp-info-row { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
.vp-title    { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin-bottom: .75rem; }
.vp-badges   { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge-item  {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .75rem; font-weight: 500;
  padding: .25rem .65rem; border-radius: 20px;
  background: var(--bg3); color: var(--muted); border: 1px solid var(--border);
  transition: border-color .15s, color .15s, background .15s;
}
.badge-item:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* Download box */
.vp-download {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  min-width: 280px; box-shadow: var(--sh-xs);
}
.dl-heading {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 1rem;
}
.dl-section { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.dl-label   {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); min-width: 42px; flex-shrink: 0;
}
.dl-btn {
  background: var(--bg3); color: var(--text-soft); border: 1px solid var(--border);
  padding: .35rem .8rem; border-radius: var(--radius-sm);
  font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.dl-btn:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.dl-btn:disabled { opacity: .4; cursor: not-allowed; }
.dl-status  { margin-top: .75rem; font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; }
.dl-status.error { color: var(--accent); }
.dl-progress{ height: 3px; background: var(--bg3); border-radius: 2px; margin-top: .5rem; overflow: hidden; }
#dl-bar     { height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.dl-link {
  display: block; margin-top: .9rem; background: #16a34a; color: #fff;
  text-align: center; padding: .6rem; border-radius: var(--radius-sm);
  font-weight: 700; font-size: .85rem; transition: opacity .15s;
}
.dl-link:hover { opacity: .88; }

/* Share row */
.vp-share-row {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; background: var(--bg2);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--sh-xs);
}
.vp-share-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.vp-embed-group { flex: 1; min-width: 280px; }
.share-label    {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); white-space: nowrap;
}
.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg3);
  color: var(--muted); cursor: pointer; font-size: 1rem;
  transition: background .15s, border-color .15s, color .15s;
}
.share-btn:hover { background: var(--text); border-color: var(--text); color: var(--bg2); }
.share-wa:hover  { background: #25d366; border-color: #25d366; color: #fff; }
.share-tw:hover  { background: #000;    border-color: #000;    color: #fff; }
.embed-input {
  flex: 1; background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .6rem;
  color: var(--muted); font-size: .72rem;
  font-family: ui-monospace, monospace; outline: none; min-width: 0;
}

/* Related */
.vp-related { }
.vp-related-title {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--border);
  color: var(--muted); font-family: 'Inter', sans-serif;
}

/* Description */
.vp-description { margin: 0; }
.vp-description details {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .875rem 1.1rem; box-shadow: var(--sh-xs);
}
.vp-description summary {
  cursor: pointer; font-weight: 600; color: var(--muted);
  font-size: .875rem; user-select: none; transition: color .15s;
}
.vp-description summary:hover { color: var(--text); }
.vp-desc-body {
  margin-top: .75rem; font-size: .875rem; line-height: 1.75;
  color: var(--text-soft); white-space: pre-wrap; word-break: break-word;
}

.oculto { display: none !important; }

/* ── Spinner ─────────────────────────────────────────────────── */
.spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination-nav { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.page-btn {
  padding: .4rem .85rem; border-radius: var(--radius-sm);
  background: var(--bg2); border: 1px solid var(--border);
  font-size: .83rem; color: var(--muted); cursor: pointer;
  font-family: inherit; box-shadow: var(--sh-xs);
  transition: background .15s, border-color .15s, color .15s;
}
.page-btn:hover, .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer { background: var(--bg2); border-top: 1px solid var(--border); margin-top: 4rem; }
.footer-inner {
  max-width: 1400px; margin: auto; padding: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.footer-logo  { font-weight: 800; font-size: .9rem; letter-spacing: -.015em; }
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a { color: var(--muted); font-size: .82rem; font-weight: 500; transition: color .15s; }
.footer-links a:hover { color: var(--text); }
.footer-copy  { font-size: .73rem; color: var(--muted); }

/* ── Search page ─────────────────────────────────────────────── */
.search-page { max-width: 1100px; margin: auto; }
.search-bar-big { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.search-bar-big input {
  flex: 1; background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1.1rem;
  color: var(--text); font-size: 1rem; outline: none;
  font-family: inherit; box-shadow: var(--sh-xs);
  transition: border-color .15s, box-shadow .15s;
}
.search-bar-big input::placeholder { color: var(--muted); }
.search-bar-big input:focus { border-color: var(--text); box-shadow: 0 0 0 3px rgba(14,31,51,.06); }
[data-theme="dark"] .search-bar-big input:focus { box-shadow: 0 0 0 3px rgba(226,234,243,.06); }
.search-bar-big button {
  background: var(--text); color: var(--bg2); border: none;
  padding: .75rem 1.4rem; border-radius: var(--radius);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: opacity .15s;
}
.search-bar-big button:hover { opacity: .85; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.sug-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg2); border: 1px solid var(--border); border-radius: 20px;
  padding: .35rem .9rem; font-size: .82rem; color: var(--muted);
  box-shadow: var(--sh-xs); transition: border-color .15s, color .15s;
}
.sug-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Search filter */
.search-filter-sel {
  background: var(--bg2); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-sm);
  padding: .5rem .75rem; font-size: .875rem; cursor: pointer;
  font-family: inherit; box-shadow: var(--sh-xs); transition: border-color .15s;
}
.search-filter-sel:focus { outline: none; border-color: var(--text); }

/* ── 404 ─────────────────────────────────────────────────────── */
.not-found { text-align: center; padding: 5rem 1rem 2rem; }
.nf-code   { font-size: 5rem; font-weight: 900; color: var(--accent); line-height: 1; margin-bottom: .5rem; }
.nf-title  { font-size: 1.5rem; font-weight: 700; margin-bottom: .7rem; }
.nf-msg    { color: var(--muted); margin-bottom: 2rem; }
.nf-btn    {
  display: inline-block; background: var(--text); color: var(--bg2);
  padding: .6rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; transition: opacity .15s;
}
.nf-btn:hover { opacity: .85; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 1rem; opacity: .4; }

/* ── Autocomplete ────────────────────────────────────────────── */
.ac-box {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--sh-lg); overflow: hidden; display: none;
}
.ac-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem; color: var(--text-soft); font-size: .875rem; transition: background .12s;
}
.ac-item:hover { background: var(--bg3); color: var(--text); }
.ac-label   { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-type    { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.ac-see-all {
  justify-content: center; font-size: .8rem; font-weight: 600;
  color: var(--accent); border-top: 1px solid var(--border);
}

/* ── Theme toggle ────────────────────────────────────────────── */
.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 20px;
  padding: .3rem .6rem; color: var(--muted); cursor: pointer;
  font-size: 1rem; line-height: 1; flex-shrink: 0;
  transition: border-color .15s, color .15s;
}
.theme-toggle:hover { border-color: var(--text); color: var(--text); }

/* ── Language switcher ───────────────────────────────────────── */
.lang-sw { display: flex; gap: .2rem; align-items: center; flex-shrink: 0; }
.lang-sw a {
  font-size: .7rem; font-weight: 600; padding: .2rem .45rem; border-radius: 4px;
  color: var(--muted); border: 1px solid transparent; letter-spacing: .03em;
  transition: color .15s, border-color .15s;
}
.lang-sw a:hover  { color: var(--text); border-color: var(--border); }
.lang-sw a.active { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* ── RTL ─────────────────────────────────────────────────────── */
[dir="rtl"] .header-nav, [dir="rtl"] .footer-links { direction: rtl; }
[dir="rtl"] .card-info { text-align: right; }

/* ── Trending tabs ───────────────────────────────────────────── */
.trending-tabs { display: flex; gap: .5rem; margin-bottom: 1.75rem; }
.trend-tab {
  padding: .42rem 1rem; border-radius: 20px; border: 1px solid var(--border);
  color: var(--muted); font-size: .85rem; font-weight: 500; background: var(--bg2);
  box-shadow: var(--sh-xs); transition: background .15s, color .15s, border-color .15s;
}
.trend-tab:hover  { background: var(--bg3); color: var(--text); }
.trend-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── PWA install banner ──────────────────────────────────────── */
.pwa-banner {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem 1.1rem; display: flex; align-items: center; gap: .75rem;
  box-shadow: var(--sh-lg); z-index: 9999; font-size: .875rem; white-space: nowrap;
}
.pwa-install-btn {
  background: var(--text); color: var(--bg2); border: none;
  border-radius: var(--radius-sm); padding: .3rem .85rem;
  font-size: .8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: opacity .15s;
}
.pwa-install-btn:hover { opacity: .85; }
.pwa-dismiss-btn {
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: .9rem; padding: 0 .2rem; line-height: 1;
}

/* ── Reveal animation (Boites-interim §7) ────────────────────── */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .vp-info-row { grid-template-columns: 1fr; }
  .vp-download  { min-width: unset; }
  .hero { padding: 2.5rem 1rem 2rem; }
}
@media (max-width: 640px) {
  .header-search input { width: 130px; }
  .channel-hero, .artist-hero { flex-direction: column; }
  .grid-videos   { grid-template-columns: repeat(2, 1fr); }
  .theme-toggle  { padding: .3rem .5rem; }
  .site-main     { padding: 1.5rem 1rem; }
  .hero-title    { font-size: 1.75rem; }
}