/* HamsiFlix — couche de finition visuelle */
:root {
  --hf-accent: #ff3348;
  --hf-accent-soft: rgba(255, 51, 72, .14);
  --hf-surface: rgba(19, 19, 25, .82);
  --hf-border: rgba(255, 255, 255, .09);
  --hf-muted: #a1a1ad;
}

html { scroll-behavior: smooth; }
body { background-color: #08080b; }
::selection { background: rgba(255, 51, 72, .42); color: #fff; }

/* Menu et navigation */
.znx-pill {
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.znx-nav-link { letter-spacing: .01em; }
.znx-nav-link.active { box-shadow: 0 5px 20px rgba(255, 35, 55, .28) !important; }
#sidebar, #mobile-nav {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Catalogues et cartes */
.custom-container {
  width: min(100% - 32px, 1600px);
  margin-inline: auto;
}
.zenix-card {
  border-radius: 16px;
  box-shadow: 0 9px 26px rgba(0,0,0,.32);
}
.zenix-card::after { border-radius: 17px; }
.zenix-card__inner { border-radius: 16px; }
.zenix-card__info {
  opacity: 1;
  transform: none;
  background: linear-gradient(to top, rgba(0,0,0,.96), rgba(0,0,0,.45) 64%, transparent);
}
.zenix-card__title { font-size: 13px; }
.zenix-card__badge--rating { opacity: 1; transform: none; }
@media (hover: hover) {
  .zenix-card:hover { transform: translateY(-4px) scale(1.015); }
  .zenix-card:hover .zenix-card__img-wrap { filter: brightness(.72); }
}

/* Titres de sections, rails et blocs de contenu */
.custom-container h1,
.custom-container h2,
.custom-container h3 { letter-spacing: -.025em; }
.zxm-rail { margin-bottom: 38px; }
.zxm-rail__title { font-size: clamp(18px, 2vw, 23px); }
.zxm-card__link { border-radius: 15px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.zxm-card__title { font-size: 13px; }
.zx-main-column > .zx-section-block,
.zx-main-column > .zx-tags-block,
.zx-main-column > .zx-comments-block,
.zx-now-panel {
  border-color: rgba(255,255,255,.085);
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
}

/* Boutons plus lisibles et cohérents */
.zx-btn, .zx-nav-btn, .zx-chip-btn, .zxm-rail__more {
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.zx-btn-primary, .zx-dl-btn {
  background: linear-gradient(135deg, #ff4356, #d90821);
  box-shadow: 0 8px 24px rgba(255, 35, 55, .22);
}
.zx-btn-primary:hover, .zx-dl-btn:hover { filter: brightness(1.08); }

/* Focus accessible et animation respectueuse */
:focus-visible {
  outline: 2px solid #ff6475 !important;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Finition de la page d'accueil : hiérarchie, profondeur et interactions */
body {
  background-image: radial-gradient(ellipse at 50% -15%, rgba(120, 25, 38, .16), transparent 58%);
  background-attachment: fixed;
}

.znx-pill {
  background: rgba(12, 12, 17, .88) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255,255,255,.045) !important;
}
.znx-logo img { filter: drop-shadow(0 3px 12px rgba(255, 45, 65, .24)); }
.znx-nav-link { white-space: nowrap; }
.znx-nav-link.active { background: linear-gradient(135deg, #ff465b, #c90d27) !important; }

.swiper-hero {
  isolation: isolate;
  overflow: hidden;
  background: #101014;
}
.swiper-hero .swiper-slide > .hero-slide-body > div:first-child {
  border-radius: 0 !important;
}
.swiper-hero .hero-slide-cta {
  min-height: 44px;
  border-radius: 999px !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.swiper-hero .hero-slide-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.swiper-hero .swiper-pagination-bullet-active { background: var(--hf-accent) !important; }

.zxm-rail { position: relative; }
.zxm-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.zxm-rail__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  line-height: 1.2;
  color: #f7f7f8;
}
.zxm-rail__title small {
  color: #ff6576;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.zxm-rail__more {
  padding: 8px 13px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #d4d4da;
}
.zxm-rail__more:hover {
  border-color: rgba(255,70,91,.45);
  color: white;
  background: rgba(255,70,91,.1);
}
.zxm-card__link {
  overflow: hidden;
  background: #15151b;
  outline: 1px solid rgba(255,255,255,.07);
  outline-offset: -1px;
  transition: transform .22s ease, outline-color .22s ease, box-shadow .22s ease;
}
.zxm-card__img { transition: transform .35s ease, filter .25s ease; }
@media (hover: hover) {
  .zxm-card:hover .zxm-card__link {
    transform: translateY(-4px);
    outline-color: rgba(255,70,91,.55);
    box-shadow: 0 16px 34px rgba(0,0,0,.45);
  }
  .zxm-card:hover .zxm-card__img { transform: scale(1.045); }
}
.zxm-card__title { color: #f2f2f4; font-weight: 650; }
.zxm-card__meta { color: #a5a5af; }
.zxm-card__add {
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(12,12,16,.78) !important;
  backdrop-filter: blur(10px);
}
.zxm-card__add:hover, .zxm-card__add[aria-pressed="true"] {
  border-color: rgba(255,70,91,.7) !important;
  background: rgba(201,13,39,.92) !important;
}

@media (max-width: 640px) {
  .custom-container { width: min(100% - 22px, 1600px); }
  .zxm-track { gap: 10px; }
  .zxm-card { flex-basis: 132px; width: 132px; }
  .zxm-card__title { font-size: 12px; }
  .zxm-rail { margin-bottom: 30px; }
  .zxm-rail__head { margin-bottom: 12px; }
  .zxm-rail__title { gap: 7px; }
  .zxm-rail__title small { font-size: 9px; }
  .swiper-hero .hero-slide-cta { min-height: 40px; }
}

/* ── MENU : sidebar & navbar ── */
#sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
  box-shadow: 8px 0 32px rgba(0,0,0,.35);
}
#sidebar a {
  position: relative;
  padding-block: 9px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
}
#sidebar a svg { transition: transform .2s ease, color .2s ease; }
#sidebar a:hover svg { transform: scale(1.12); }
#sidebar a > span:not([class*="rounded"]),
#sidebar a > .truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#sidebar a [class*="rounded-full"],
#sidebar a [class*="text-[9px]"],
#sidebar a [class*="text-[10px]"] { flex-shrink: 0; margin-left: auto; font-size: 9px; letter-spacing: .06em; }
#sidebar a.is-current-nav::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px;
  margin-top: -3px; border-radius: 50%; background: #ff465b; box-shadow: 0 0 10px #ff465b;
}
#sidebar hr, #sidebar [class*="border-t"] { border-color: rgba(255,255,255,.07) !important; }

.znx-nav-pill {
  background: rgba(16,16,22,.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.znx-nav-link { transition: color .18s ease, background .18s ease, transform .18s ease; }
.znx-nav-link:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }
.znx-nav-link.active { box-shadow: 0 0 0 1px rgba(255,70,91,.45), 0 4px 16px rgba(201,13,39,.35); }
#sidebar a { padding-block: 10px !important; column-gap: 12px !important; margin-bottom: 2px; }
#sidebar a[class*="border-"][class*="/30"] { font-size: 13px; padding-inline: 10px !important; column-gap: 10px !important; }
#sidebar a[class*="border-"][class*="/30"] > span:last-child { padding: 1px 5px; transform: scale(.92); transform-origin: right center; }
@media (max-width: 1280px) { .znx-nav-link { padding-inline: 9px !important; font-size: 12px !important; } }
@media (max-width: 1000px) { .znx-search-kbd { display: none !important; } .znx-search-desktop input { min-width: 0; } }

/* ── MENU latéral v2 : plus large, aéré ── */
@media (min-width: 1024px) {
  html body #sidebar:not(.is-compact-sidebar) { width: 296px !important; }
  #main-content:not([class*="!ml-16"]) { margin-left: 296px !important; }
  html body #sidebar:not(.is-compact-sidebar) > div { padding: 18px 14px !important; gap: 4px !important; }
  html body #sidebar a { padding: 12px 14px !important; font-size: 14.5px !important; border-radius: 14px !important; column-gap: 14px !important; margin-bottom: 3px; }
  html body #sidebar a svg, #sidebar a > span.text-base { width: 20px !important; height: 20px !important; font-size: 18px; }
  html body #sidebar a[class*="gradient"] { border: 1px solid rgba(255,255,255,.1); box-shadow: 0 2px 14px rgba(0,0,0,.28); }
  html body #sidebar a[class*="gradient"]:hover { transform: translateX(3px); border-color: rgba(255,255,255,.28); }
  html body #sidebar a:not([class*="gradient"]):hover { background: rgba(255,255,255,.07) !important; transform: translateX(3px); }
  html body #sidebar a { transition: transform .18s ease, background .18s ease, border-color .18s ease; }
  html body #sidebar a[class*="gradient"] > span:last-child { font-size: 9.5px !important; padding: 2px 7px !important; transform: none !important; }
  html body #sidebar a > div { overflow: visible !important; }
  html body #sidebar [class*="border-t"], #sidebar hr { margin: 10px 4px !important; }
}

/* ── MENU : Liquid Glass ── */
@media (min-width: 1024px) {
  html body #sidebar {
    background:
      radial-gradient(420px 260px at 18% 8%, rgba(255,70,91,.28), transparent 70%),
      radial-gradient(380px 300px at 90% 55%, rgba(124,92,255,.22), transparent 70%),
      radial-gradient(360px 260px at 10% 100%, rgba(0,190,255,.16), transparent 70%),
      rgba(14,14,20,.55) !important;
    backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
    -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.05);
    border-right: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,.06), inset 0 1px 0 rgba(255,255,255,.18), 12px 0 48px rgba(0,0,0,.45) !important;
  }
  html body #sidebar a:not([class*="gradient"]) { color: rgba(255,255,255,.82) !important; }
  html body #sidebar a:not([class*="gradient"]):hover {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    color: #fff !important;
  }
  html body #sidebar a[class*="gradient"] {
    background-color: rgba(255,255,255,.06) !important;
    backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -8px 16px rgba(255,255,255,.03), 0 4px 16px rgba(0,0,0,.3) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }
  html body #sidebar a.is-current-nav, html body #sidebar a[aria-current="page"] {
    background: linear-gradient(135deg, rgba(255,70,91,.4), rgba(255,70,91,.14)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 6px 20px rgba(255,70,91,.28) !important;
    color: #fff !important;
  }
  html body #sidebar [class*="border-t"], html body #sidebar hr { border-color: rgba(255,255,255,.12) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  html body #sidebar { backdrop-filter: none !important; background: #12121a !important; }
}

/* ══ DESIGN v2 ══ */
:root { --hf-glow: 0 0 0 1px rgba(255,70,91,.55), 0 14px 40px rgba(255,51,72,.28); }
body {
  background:
    radial-gradient(900px 520px at 85% -8%, rgba(255,51,72,.13), transparent 70%),
    radial-gradient(760px 520px at -5% 35%, rgba(110,80,255,.10), transparent 70%),
    radial-gradient(800px 600px at 60% 105%, rgba(0,170,255,.07), transparent 70%),
    #07070b !important;
  background-attachment: fixed !important;
}
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,70,91,.6); background-clip: content-box; }

/* Cartes : relief, reflet et halo au survol */
.zenix-card, .zxm-card__link {
  position: relative; border: 1px solid rgba(255,255,255,.08);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.zenix-card::before, .zxm-card__link::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 32%);
  opacity: .55; transition: opacity .28s ease;
}
@media (hover: hover) {
  .zenix-card:hover, .zxm-card__link:hover { transform: translateY(-7px) scale(1.03); border-color: rgba(255,70,91,.6); box-shadow: var(--hf-glow); }
  .zenix-card:hover::before, .zxm-card__link:hover::before { opacity: 1; }
}
.zenix-card img, .zxm-card__link img { transition: transform .5s ease; }
.zenix-card:hover img, .zxm-card__link:hover img { transform: scale(1.06); }

/* Titres de rails avec barre d'accent */
.zxm-rail__title { position: relative; padding-left: 14px; font-weight: 800; }
.zxm-rail__title::before {
  content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px;
  background: linear-gradient(#ff465b, #c90d27); box-shadow: 0 0 12px rgba(255,70,91,.7);
}
.zxm-rail__more { border: 1px solid rgba(255,255,255,.14) !important; background: rgba(255,255,255,.05) !important; backdrop-filter: blur(10px); transition: all .2s ease; }
.zxm-rail__more:hover { background: rgba(255,70,91,.2) !important; border-color: rgba(255,70,91,.6) !important; transform: translateX(3px); }

/* Boutons principaux */
.zx-btn, .zx-nav-btn { transition: transform .2s ease, box-shadow .2s ease; }
.zx-btn:hover, .zx-nav-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255,51,72,.3); }
a[class*="bg-white"][class*="rounded-full"]:hover { box-shadow: 0 10px 34px rgba(255,255,255,.28); transform: translateY(-2px); }
a[class*="rounded-full"], button[class*="rounded-full"] { transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }

/* Barre du haut en verre */
.znx-nav-pill { background: rgba(14,14,20,.55) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 40px rgba(0,0,0,.5) !important; backdrop-filter: blur(24px) saturate(180%) !important; }
.znx-nav-link.active { background: linear-gradient(135deg, #ff465b, #c90d27) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 22px rgba(255,51,72,.45) !important; }

/* Entrée en douceur */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hfRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .zxm-rail, .zenix-card { animation: hfRise .55s cubic-bezier(.2,.8,.2,1) both; }
}
:focus-visible { outline: 2px solid #ff465b; outline-offset: 3px; border-radius: 8px; }

/* ══ DESIGN v3 ══ */
/* Héro : voile plus riche et titre plus marqué */
section[class*="hero"], .zx-hero, [class*="swiper"] { --hf-hero-fade: linear-gradient(to top, #07070b 2%, rgba(7,7,11,.55) 38%, transparent 75%); }
h1 { text-shadow: 0 4px 28px rgba(0,0,0,.55); letter-spacing: -.03em; }

/* Pastilles de genre / tags */
a[class*="rounded-full"][class*="border"], span[class*="rounded-full"][class*="border"] {
  backdrop-filter: blur(10px); background-color: rgba(255,255,255,.06);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
a[class*="rounded-full"][class*="border"]:hover { background-color: rgba(255,70,91,.18); border-color: rgba(255,70,91,.55); transform: translateY(-2px); }

/* Pages détail : panneaux en verre */
.zx-section-block, .zx-tags-block, .zx-comments-block, .zx-now-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  backdrop-filter: blur(14px); border-radius: 20px !important;
}
.zx-servers { border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035); backdrop-filter: blur(12px); padding: 14px; }
.zx-chip-btn { border-radius: 12px !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.zx-chip-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,51,72,.25); }
.zx-chip-btn.is-active { background: linear-gradient(135deg, #ff465b, #c90d27) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(255,51,72,.4); }
iframe { border-radius: 14px; }

/* ===== Couche v12 : plus de relief, de couleur et de mouvement ===== */
:root { --hf-grad: linear-gradient(135deg, #ff465b 0%, #c90d27 55%, #7a0b8f 120%); }

/* Titres de rails : barre d'accent + dégradé */
.zxm-rail__title { background: linear-gradient(90deg, #fff 30%, #ffb3bd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Cartes : zoom fluide, ombre colorée, image qui respire */
.zxm-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s ease; will-change: transform; }
.zxm-card:hover { transform: translateY(-8px) scale(1.04); z-index: 3; filter: saturate(1.15); }
.zxm-card__link { border-radius: 16px; overflow: hidden; transition: box-shadow .35s ease; }
.zxm-card:hover .zxm-card__link { box-shadow: 0 22px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(255,70,91,.55), 0 10px 40px rgba(255,51,72,.3); }
.zxm-card__img { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.zxm-card:hover .zxm-card__img { transform: scale(1.08); }
.zxm-card__score { background: var(--hf-grad) !important; color: #fff !important; border-radius: 999px; box-shadow: 0 4px 14px rgba(255,51,72,.45); }

/* Boutons principaux */
a[class*="bg-red-"], button[class*="bg-red-"] { background-image: var(--hf-grad); box-shadow: 0 8px 26px rgba(255,51,72,.35); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
a[class*="bg-red-"]:hover, button[class*="bg-red-"]:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 12px 34px rgba(255,51,72,.5); }

/* Apparition douce des rails */
@keyframes hf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.zxm-rail { animation: hf-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.zxm-rail:nth-of-type(2) { animation-delay: .06s; } .zxm-rail:nth-of-type(3) { animation-delay: .12s; } .zxm-rail:nth-of-type(n+4) { animation-delay: .18s; }

/* Barre de défilement du haut + focus visibles */
:focus-visible { outline: 2px solid #ff465b; outline-offset: 3px; border-radius: 8px; }
@media (hover: none) { .zxm-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .zxm-rail { animation: none; } .zxm-card, .zxm-card__img { transition: none; } }