/* ===== Geek Factory DZ — Home v3 : header search, side rail, hero slider + hotspots ===== */

/* ---------- Header : recherche intégrée ---------- */
.header-inner { gap: 18px; }
.main-nav { flex: 0 1 auto; min-width: 0; }
.head-search { flex: 1 1 320px; max-width: 440px; min-width: 180px; margin-left: auto; height: 44px; padding: 0 5px 0 16px; gap: 10px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(236, 230, 214, .16); border-radius: 999px; }
.head-search > i { color: #8f897c; font-size: 14px; }
.head-search input { flex: 1; width: auto; min-width: 0; font-size: 13.5px; color: var(--hi); }
.head-search input::placeholder { color: #8f897c; }
.head-search button { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; opacity: .9; transition: .25s; }
.head-search button:hover { opacity: 1; color: #fff; transform: translateX(2px); box-shadow: 0 0 18px rgba(229, 50, 45, .6); }
.head-search:focus-within { background: rgba(255, 255, 255, .07); border-color: rgba(229, 50, 45, .7); box-shadow: 0 0 0 4px rgba(229, 50, 45, .12); }
.header-actions { margin-left: 0; }
.header-search-row, .header-tagline { display: none !important; }
@media (max-width: 1500px) { .main-nav .nav-cat:nth-child(n+7) { display: none; } }
@media (max-width: 1360px) { .main-nav .nav-cat:nth-child(n+5) { display: none; } }
@media (max-width: 1180px) { .main-nav .nav-cat { display: none; } }
@media (max-width: 980px) {
  .header-inner { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 10px; }
  .head-search { order: 5; flex: 1 1 100%; max-width: none; margin: 0; height: 42px; }
  .header-actions { margin-left: auto; }
}

/* ---------- Side rail (apparaît au scroll) ---------- */
.side-rail { position: fixed; left: 14px; top: 50%; z-index: 45; display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 84px; padding: 12px 6px; background: linear-gradient(180deg, rgba(var(--ink),  .96), rgba(var(--ink),  .96)); border: 1px solid rgba(236, 230, 214, .1); border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .04); backdrop-filter: blur(12px); transform: translate(calc(-100% - 30px), -50%); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.2, .9, .25, 1.1), opacity .35s; }
.side-rail::before { content: ''; position: absolute; left: -1px; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: linear-gradient(180deg, transparent, var(--red), transparent); }
body.rail-on .side-rail { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.rail-logo { display: grid; place-items: center; padding: 2px 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.rail-logo img { width: 52px; filter: drop-shadow(0 0 10px rgba(229, 50, 45, .45)); }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 2px; border-radius: 12px; color: var(--tx2); font-size: 10.5px; font-weight: 500; text-align: center; line-height: 1.15; transition: background .25s, color .25s; }
.rail-item i { font-size: 19px; color: #f0c56b; transition: transform .25s, color .25s; }
.rail-item:hover { background: rgba(229, 50, 45, .1); color: var(--hi); }
.rail-item:hover i { transform: translateY(-2px) scale(1.08); }
.rail-item.is-active { background: linear-gradient(180deg, rgba(229, 50, 45, .2), rgba(229, 50, 45, .05)); color: var(--hi); }
.rail-item.is-active::before { content: ''; position: absolute; left: -7px; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--red); box-shadow: 0 0 12px var(--red); }
.rail-item.is-vip { color: var(--gold); }
.rail-item.is-vip i { color: var(--gold); filter: drop-shadow(0 0 8px rgba(242, 163, 58, .6)); }
.rail-item .badge-count { position: absolute; top: 4px; right: 14px; left: auto; }
.rail-sep { height: 1px; margin: 4px 10px; background: var(--line); }
.rail-top { display: grid; place-items: center; height: 34px; margin-top: 4px; border-radius: 10px; background: rgba(255, 255, 255, .05); color: var(--tx2); transition: .25s; }
.rail-top:hover { background: var(--red); color: #fff; }
@media (max-width: 1600px) { body.rail-on main > section > .container, body.rail-on main > section .container { } }
@media (max-width: 980px) {
  /* Mobile : barre en bas de l'écran */
  .side-rail { top: auto; bottom: 10px; left: 10px; right: 10px; width: auto; flex-direction: row; justify-content: space-between; padding: 6px; border-radius: 16px; transform: translateY(calc(100% + 30px)); }
  body.rail-on .side-rail { transform: none; }
  .side-rail::before, .rail-logo, .rail-sep, .rail-top, .side-rail [data-rail-search] { display: none; }
  .rail-item { flex: 1; padding: 8px 0; font-size: 9.5px; gap: 4px; }
  .rail-item i { font-size: 16px; }
  .rail-item.is-active::before { left: 25%; right: 25%; top: -6px; bottom: auto; width: auto; height: 3px; }
  body.rail-on .site-footer { padding-bottom: 80px; }
  body.rail-on #toast { bottom: 90px; }
}

/* ---------- Hero slider ---------- */
.hero-slider { position: relative; height: clamp(540px, 46vw, 760px); overflow: hidden; isolation: isolate; background: var(--s0); }
.hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s 1s; }
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease; z-index: 1; }
.hero-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transform: scale(1.06); transition: transform 7s ease-out; }
.hero-slide.is-active .hero-slide-img { transform: scale(1); }
.hero-slide .hero-dz-veil { z-index: -2; }
.hs-legends .hero-dz-veil, .hs-showroom .hero-dz-veil { background: linear-gradient(90deg, rgba(var(--ink),  .92) 0%, rgba(var(--ink),  .7) 24%, rgba(var(--ink),  .1) 48%, transparent 70%), linear-gradient(180deg, rgba(var(--ink),  .35), transparent 22%, transparent 70%, var(--bg)); }
.hs-copy { position: absolute; left: max(118px, calc((100vw - 1520px) / 2 + 20px)); top: 50%; transform: translateY(-50%); width: min(480px, 42%); }
.hs-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.hs-kicker i { width: 28px; height: 2px; background: var(--red); }
.hs-title { margin: 14px 0 16px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(48px, 5.4vw, 92px); line-height: .9; text-transform: uppercase; color: var(--hi); text-shadow: 0 6px 30px rgba(0, 0, 0, .8); }
.hs-title em { font-style: normal; background: linear-gradient(180deg, #fff3c4, var(--gold) 45%, #e5322d); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #3a0605); }
.hs-copy p { margin: 0 0 26px; max-width: 400px; color: var(--tx2); font-size: 15px; line-height: 1.6; }
.hs-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-ghost-dz { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border: 1px solid rgba(236, 230, 214, .35); border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--hi); background: rgba(var(--ink),  .35); backdrop-filter: blur(6px); transition: .25s; }
.btn-ghost-dz:hover { border-color: var(--red); background: rgba(229, 50, 45, .15); }
.hero-slide.is-active .hs-copy > *, .hero-slide.is-active .hero-dz-center, .hero-slide.is-active .hero-dz-left { animation: hsIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.hero-slide.is-active .hs-copy > :nth-child(2) { animation-delay: .1s; }
.hero-slide.is-active .hs-copy > :nth-child(3) { animation-delay: .2s; }
.hero-slide.is-active .hs-copy > :nth-child(4), .hero-slide.is-active .hero-dz-left { animation-delay: .3s; }
@keyframes hsIn { from { opacity: 0; transform: translateY(24px); } }
.hero-slide.is-active .hero-dz-center { animation-name: hsInC; }
@keyframes hsInC { from { opacity: 0; transform: translate(-50%, 24px); } to { transform: translateX(-50%); } }

/* Progress (03 / 03) */
.hero-progress { position: absolute; z-index: 5; left: max(20px, calc((100vw - 1520px) / 2 + 20px)); right: max(20px, calc((100vw - 1520px) / 2 + 20px)); bottom: 28px; display: flex; align-items: center; gap: 26px; }
.hero-count { font-family: var(--f-impact); font-size: 30px; letter-spacing: .04em; color: #8d8a85; white-space: nowrap; }
.hero-count b { font-weight: 400; color: var(--hi); }
.hero-bars { display: flex; gap: 14px; flex: 0 1 760px; }
.hero-bar { flex: 1; height: 22px; display: flex; align-items: center; cursor: pointer; }
.hero-bar i { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.hero-bar i::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.hero-bar.is-done i::after { transform: scaleX(1); }
.hero-bar.is-active i::after { animation: barFill var(--hero-dur, 7s) linear forwards; }
.hero-slider.is-paused .hero-bar.is-active i::after { animation-play-state: paused; }
@keyframes barFill { to { transform: scaleX(1); } }
.hero-hint { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--tx2); white-space: nowrap; }
.hero-hint i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: #111; font-size: 10px; }

/* ---------- Hotspots ---------- */
.hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hotspot { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: auto; z-index: 1; }
.hotspot:hover, .hotspot.is-open { z-index: 5; }
.hotspot-dot { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(245, 242, 235, .92); color: #111; font-size: 17px; border: 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .18); cursor: pointer; transition: transform .3s, background .3s, color .3s, box-shadow .3s; backdrop-filter: blur(4px); }
.hotspot-dot::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); animation: hsPulse 2.4s ease-out infinite; }
.hotspot:nth-child(2) .hotspot-dot::before { animation-delay: .5s; }
.hotspot:nth-child(3) .hotspot-dot::before { animation-delay: 1s; }
.hotspot:nth-child(4) .hotspot-dot::before { animation-delay: 1.5s; }
@keyframes hsPulse { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.hotspot-dot i { transition: transform .35s; }
.hotspot:hover .hotspot-dot, .hotspot.is-open .hotspot-dot { background: var(--red); color: #fff; transform: scale(1.08); box-shadow: 0 6px 24px rgba(229, 50, 45, .6), 0 0 0 6px rgba(229, 50, 45, .25); }
.hotspot:hover .hotspot-dot i, .hotspot.is-open .hotspot-dot i { transform: rotate(45deg); }
.hero-slide.is-active .hotspot { animation: hsPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.hero-slide.is-active .hotspot:nth-child(1) { animation-delay: .5s; }
.hero-slide.is-active .hotspot:nth-child(2) { animation-delay: .65s; }
.hero-slide.is-active .hotspot:nth-child(3) { animation-delay: .8s; }
.hero-slide.is-active .hotspot:nth-child(4) { animation-delay: .95s; }
.hero-slide.is-active .hotspot:nth-child(5) { animation-delay: 1.1s; }
@keyframes hsPop { from { opacity: 0; transform: scale(.3); } }

.hotspot-card { position: absolute; z-index: 2; left: calc(100% + 14px); top: 50%; display: flex; gap: 12px; width: 290px; padding: 10px; background: rgba(var(--ink),  .96); border: 1px solid rgba(236, 230, 214, .14); border-radius: 14px; box-shadow: 0 24px 50px rgba(0, 0, 0, .7); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translate(-8px, -50%) scale(.96); transform-origin: left center; transition: opacity .25s, transform .3s, visibility 0s .3s; }
.hotspot-card::before { content: ''; position: absolute; right: 100%; top: 50%; width: 14px; height: 14px; transform: translate(50%, -50%) rotate(45deg); background: rgba(var(--ink),  .96); border-left: 1px solid rgba(236, 230, 214, .14); border-bottom: 1px solid rgba(236, 230, 214, .14); }
.hotspot-card::after { content: ''; position: absolute; right: 100%; top: 0; bottom: 0; width: 18px; } /* pont de survol */
.hotspot.hs-left .hotspot-card { left: auto; right: calc(100% + 14px); transform: translate(8px, -50%) scale(.96); transform-origin: right center; }
.hotspot.hs-left .hotspot-card::before { right: auto; left: 100%; transform: translate(-50%, -50%) rotate(-135deg); }
.hotspot.hs-left .hotspot-card::after { right: auto; left: 100%; }
.hotspot:hover .hotspot-card, .hotspot.is-open .hotspot-card, .hotspot:focus-within .hotspot-card { opacity: 1; visibility: visible; transform: translate(0, -50%) scale(1); transition: opacity .25s, transform .3s; }
.hotspot-thumb { flex: 0 0 82px; height: 82px; border-radius: 10px; overflow: hidden; background: var(--s3); }
.hotspot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hotspot-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hotspot-name { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hotspot-name:hover { color: var(--red); }
.hotspot-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.hotspot-price b { font-family: var(--f-impact); font-weight: 400; font-size: 22px; letter-spacing: .02em; color: var(--gold); }
.hotspot-price s { font-size: 11px; color: #8f897c; }
.hotspot-price em { font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--red); color: #fff; }
.hotspot-add { margin-top: auto; align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 6px; background: var(--red); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: .2s; }
.hotspot-add:hover { background: #ff4a3d; }

@media (max-width: 980px) {
  .hs-copy { left: 20px; right: 20px; width: auto; top: 12%; transform: none; }
  .hs-legends .hero-dz-veil, .hs-showroom .hero-dz-veil { background: linear-gradient(180deg, rgba(var(--ink),  .9) 0%, rgba(var(--ink),  .55) 35%, rgba(var(--ink),  .1) 60%, var(--bg)); }
  .hero-hint { display: none; }
}
@media (max-width: 640px) {
  .hero-slider { height: 680px; }
  .hero-slide.hs-legends-dz { display: flex; flex-direction: column; justify-content: space-between; padding: 26px 0 80px; }
  .hs-title { font-size: 52px; }
  .hs-copy p { font-size: 14px; }
  .hotspot { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .hotspot-dot { width: 36px; height: 36px; font-size: 14px; }
  .hotspot-card { position: fixed; left: 12px !important; right: 12px !important; top: auto !important; bottom: 76px; width: auto; transform: translateY(10px) !important; }
  .hotspot.is-open .hotspot-card { transform: none !important; }
  .hotspot-card::before, .hotspot-card::after { display: none; }
  .hotspot:hover:not(.is-open) .hotspot-card { opacity: 0; visibility: hidden; }
  .hero-progress { bottom: 22px; gap: 14px; }
  .hero-count { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hotspot-dot::before, .hero-slide-img { animation: none; transition: none; } }

/* ---------- Mobile fixes ---------- */
@media (max-width: 640px) {
  .hero-slide.is-active .hero-dz-center { animation-name: hsIn; }
  .hero-slide.hs-legends-dz .hero-dz-center { margin: 0 auto; width: 92%; }
  .hero-slide.hs-legends-dz .hero-dz-mini { display: none; }
  .hero-slide.hs-legends-dz .hero-dz-left h2 { font-size: 30px; margin-bottom: 14px; }
  /* pas de transform sur les hotspots (sinon la fiche "fixed" est piégée) */
  .hero-slide.is-active .hotspot { animation-name: hsFade; }
  .hotspot:hover .hotspot-dot, .hotspot.is-open .hotspot-dot { transform: none; }
  .hotspot-card { z-index: 60; bottom: 16px; padding: 12px; border-color: rgba(229, 50, 45, .45); }
  .hotspot-thumb { flex-basis: 74px; height: 74px; }
}
@keyframes hsFade { from { opacity: 0; } }
@media (max-width: 640px) {
  .hero-progress { transition: opacity .25s; }
  .hero-slider:has(.hotspot.is-open) .hero-progress { opacity: 0; pointer-events: none; }
  .hotspot-card { background: var(--s1); }
}
/* Réserve la place du rail latéral sous le hero (desktop) */
@media (min-width: 981px) and (max-width: 1760px) {
  body:has(#side-rail) main > section:not(#hero-section) > .container, body:has(#side-rail) .site-footer > .container, body:has(#side-rail) .footer-trust-grid { width: min(1520px, 100% - 150px); margin-left: 120px; margin-right: 30px; }
}

/* ---------- Story : sélecteur d'univers ---------- */
.story-switch { min-height: 600px; }
.story-switch .story-bg { opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 6s ease-out; background-position: 70% 30%; }
.story-switch .story-bg.is-active { opacity: 1; transform: scale(1); }
.story-switch .story-veil { background: linear-gradient(90deg, rgba(var(--ink), .97) 0%, rgba(var(--ink), .85) 30%, rgba(var(--ink), .35) 60%, rgba(var(--ink), .15) 80%, rgba(var(--ink), .55)), linear-gradient(180deg, rgba(var(--ink), .5), transparent 25%, transparent 75%, rgba(var(--ink), .7)); }
.story-switch .story-inner { grid-template-columns: 230px 1fr; gap: 48px; padding: 60px 0; }
.story-switch .story-tabs { gap: 7px; }
.story-switch .story-tab { width: 100%; text-align: left; color: var(--tx2); cursor: pointer; position: relative; overflow: hidden; }
.story-switch .story-tab::after { content: ''; position: absolute; right: 10px; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: .25s; }
.story-switch .story-tab:hover { border-color: color-mix(in srgb, var(--u) 70%, transparent); background: color-mix(in srgb, var(--u) 12%, rgba(var(--ink), .85)); }
.story-switch .story-tab.is-active { border-color: var(--u); background: linear-gradient(90deg, color-mix(in srgb, var(--u) 35%, rgba(var(--ink), .9)), rgba(var(--ink), .85)); color: var(--hi); box-shadow: 0 10px 30px -12px var(--u); transform: translateX(6px); }
.story-switch .story-tab.is-active::after { opacity: 1; }
.story-switch .story-tab:focus-visible { outline: 2px solid var(--u); outline-offset: 2px; }
.story-panels { min-width: 0; }
.story-panel { display: grid; grid-template-columns: minmax(0, 640px) 1fr; gap: 40px; align-items: center; }
.story-panel[hidden] { display: none; }
.story-panel.is-active .story-copy > * { animation: hsIn .7s cubic-bezier(.2,.8,.2,1) both; }
.story-panel.is-active .story-copy > :nth-child(2) { animation-delay: .05s; }
.story-panel.is-active .story-copy > :nth-child(3) { animation-delay: .1s; }
.story-panel.is-active .story-copy > :nth-child(4) { animation-delay: .15s; }
.story-panel.is-active .story-copy > :nth-child(5) { animation-delay: .2s; }
.story-panel.is-active .story-copy > :nth-child(n+6) { animation-delay: .25s; }
.story-panel.is-active .story-quote { animation: hsIn .9s .3s both; }
:where(.story-panel) { --tf: var(--f-impact); --tf2: var(--f-script); }
.story-panel .section-jp { color: var(--u); }
.story-panel .uni-kicker { margin-top: 10px; }
.story-panel .uni-title { font-family: var(--tf); font-size: clamp(46px, 5vw, 86px) !important; max-width: none; }
:where(.story-panel) .uni-tagline { font-family: var(--tf2); }
.story-panel .uni-tagline { margin: 14px 0 12px; }
.story-panel.t-naruto .uni-title { font-size: clamp(60px, 6.4vw, 108px) !important; }
.story-panel.t-attaque-des-titans .uni-title { white-space: normal; font-size: clamp(40px, 4vw, 66px) !important; }
.story-panel.t-bleach .uni-title { letter-spacing: .12em; }

.story-panel.t-attaque-des-titans .uni-tagline, .story-panel.t-bleach .uni-tagline { font-size: 13px; }
.story-intro { color: var(--tx2); max-width: 500px; margin: 0 0 18px; font-size: 15px; line-height: 1.6; }
.story-chars { display: flex; align-items: center; margin-bottom: 24px; }
.story-chars img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--s1); box-shadow: 0 0 0 1px var(--u); margin-right: -10px; background: var(--s2); }
.story-chars span { margin-left: 22px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--hi); }
.story-chars small { font-weight: 400; color: var(--muted); }
.story-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.story-panel .story-cta { background: linear-gradient(180deg, color-mix(in srgb, var(--u) 85%, #fff 15%), var(--u)); box-shadow: 0 12px 30px -10px var(--u); }
.story-panel.t-bleach .story-cta, .story-panel.t-yu-gi-oh .story-cta, .story-panel.t-jujutsu-kaisen .story-cta { color: #fff; }
.story-panel.t-dragon-ball .story-cta, .story-panel.t-one-piece .story-cta { color: #1a0a00; }
.story-panel .story-quote { justify-self: end; align-self: end; font-family: var(--tf2); }
.story-panel .story-quote span { color: var(--u); font-family: var(--f-body); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transform: none; }
@media (max-width: 1180px) { .story-panel { grid-template-columns: 1fr; } .story-panel .story-quote { display: none; } }
@media (max-width: 980px) {
  .story-switch .story-inner { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .story-switch .story-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; margin: 0 -20px; padding: 4px 20px 8px; }
  .story-switch .story-tab { flex: 0 0 auto; width: auto; padding-right: 14px; }
  .story-switch .story-tab::after { display: none; }
  .story-switch .story-tab.is-active { transform: translateY(-2px); }
  .story-switch .story-veil { background: linear-gradient(180deg, rgba(var(--ink), .75), rgba(var(--ink), .55) 40%, rgba(var(--ink), .92)); }
}
@media (max-width: 640px) {
  .story-panel .uni-title { font-size: 44px !important; }
  .story-panel.t-naruto .uni-title { font-size: 58px !important; }
  .story-panel.t-attaque-des-titans .uni-title { font-size: 34px !important; }
  .story-ctas .btn-red, .story-ctas .btn-ghost-dz { width: 100%; justify-content: center; }
}

/* =================== Méga-menu (Boutique / Univers / catégories) =================== */
.main-nav > a { white-space: nowrap; }
.nav-mega-trigger i { font-size: 9px; margin-left: 4px; transition: transform .25s; }
.nav-mega-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.main-nav > a.is-hot { color: var(--hi); }
.main-nav > a.is-hot::after { transform: scaleX(1); }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 49; background: linear-gradient(180deg, var(--s1), var(--s1)); border-top: 1px solid rgba(229, 50, 45, .25); border-bottom: 1px solid var(--line); box-shadow: 0 40px 80px rgba(0, 0, 0, .75); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s, transform .25s, visibility 0s .25s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .25s; }
.mega::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; } /* pont de survol */
.mega-inner { width: min(1520px, 100% - 40px); padding: 26px 0 30px; }
.mega-panel { display: grid; grid-template-columns: 240px 1fr 290px; gap: 28px; min-height: 340px; }
.mega-panel[hidden] { display: none; }
.mega-label { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8f897c; }
.mega-side { display: flex; flex-direction: column; }
.mega-link { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--tx2); transition: color .2s, padding .25s; }
.mega-link img { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; object-position: top; }
.mega-link span { flex: 1; }
.mega-link i { font-size: 11px; color: #6f6a61; transition: transform .25s, color .2s; }
.mega-link:hover, .mega-link.is-on { color: var(--mc, var(--red)); padding-left: 10px; }
.mega-link.is-on i, .mega-link:hover i { color: var(--mc, var(--red)); transform: translateX(3px); }
.mega-panel[data-mega-panel="unis"] .mega-side { max-height: 380px; }
.mega-subs { margin: 0 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #9a948a; min-height: 14px; }
.mega-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mega-products.is-swap { animation: megaIn .35s ease both; }
@keyframes megaIn { from { opacity: 0; transform: translateY(8px); } }
.mega-skel { height: 300px; border-radius: 14px; background: linear-gradient(100deg, var(--s2) 30%, var(--s3) 50%, var(--s2) 70%); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.mega-card { position: relative; display: flex; flex-direction: column; background: var(--s2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: border-color .25s, transform .25s, box-shadow .25s; }
.mega-card:hover { border-color: rgba(229, 50, 45, .5); transform: translateY(-3px); box-shadow: 0 20px 40px -18px rgba(229, 50, 45, .6); }
.mega-card-img { position: relative; display: block; aspect-ratio: 1 / .92; overflow: hidden; background: var(--s3); }
.mega-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.mega-card:hover .mega-card-img img { transform: scale(1.06); }
.mega-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 5px; background: var(--gold); color: #1a0f00; font-size: 11px; font-weight: 700; }
.mega-badge.is-promo { background: var(--red); color: #fff; }
.mega-wish { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--ink),  .65); color: #fff; font-size: 13px; }
.mega-wish.is-on { color: var(--red); }
.mega-card-body { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 14px; flex: 1; }
.mega-meta { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8f897c; }
.mega-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--hi); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.mega-rate { font-size: 11px; color: #8f897c; }
.mega-rate .stars { color: var(--gold); font-size: 10px; margin-right: 4px; }
.mega-foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.mega-price s { display: block; font-size: 11px; color: #7d776d; }
.mega-price b { font-size: 17px; font-weight: 700; color: var(--hi); }
.mega-price.is-promo b { color: var(--red); }
.mega-add { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 14px; transition: .2s; }
.mega-add:hover { background: #ff4a3d; transform: scale(1.06); }
.mega-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 14px; }
.mega-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); text-align: center; isolation: isolate; min-height: 340px; }
.mega-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s, opacity .3s; }
.mega-banner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(var(--ink),  .92)); }
.mega-banner:hover img { transform: scale(1.06); }
.mega-banner strong { font-family: var(--f-impact); font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: .02em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 20px #000; }
.mega-banner span { margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mega-banner.is-swap img { animation: megaFade .45s ease both; }
@keyframes megaFade { from { opacity: 0; transform: scale(1.08); } }
.mega-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: .25s; }
body.mega-on .mega-scrim { opacity: 1; visibility: visible; }
@media (max-width: 1360px) { .mega-panel { grid-template-columns: 220px 1fr 230px; gap: 20px; } .mega-banner strong { font-size: 28px; } }
@media (max-width: 1180px) { .mega-panel { grid-template-columns: 210px 1fr; } .mega-banner { display: none; } }
@media (max-width: 980px) { .mega, .mega-scrim { display: none !important; } }
/* Univers : menu déroulant d'origine, au-dessus du méga-menu */
.main-nav .nav-dropdown { z-index: 52; }
.nav-dropdown-menu { z-index: 52; }
body.mega-on .nav-dropdown-menu { opacity: 0; visibility: hidden; }
.site-header .head-search { margin-top: 0; margin-bottom: 0; align-self: center; }

/* ================= Footer v2 (communauté + liens) ================= */
.gf-footer { padding: 0; background: var(--s0); border-top: 1px solid var(--line); }
.gf-footer .container { width: min(1520px, 100% - 40px); }
body:has(#side-rail) .gf-footer .container { width: min(1520px, 100% - 150px); margin-left: 120px; margin-right: 30px; }

/* Bandeau communauté */
.ft-community { position: relative; padding: 34px 0; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(var(--ink), .96) 0%, rgba(var(--ink), .82) 55%, rgba(var(--ink), .55)), url('/static/img/hero-legends.webp') center / cover; }
.ft-community-grid { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 2fr) minmax(300px, 1.15fr); gap: 22px; align-items: stretch; }
.ft-comm-intro h2 { margin: 0 0 10px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(26px, 2.1vw, 34px); line-height: 1; text-transform: uppercase; letter-spacing: .02em; color: var(--hi); }
.ft-comm-intro p { margin: 0 0 18px; font-size: 13px; color: var(--tx2); max-width: 300px; }
.ft-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.ft-socials a { width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px solid var(--line-2); border-radius: 10px; font-size: 17px; color: var(--hi); transition: .25s; }
.ft-socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.ft-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr) 1.25fr; gap: 10px; min-height: 170px; }
.ft-gallery li { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-2); background: var(--img) center / cover; transition: transform .35s; }
.ft-gallery li:not(.ft-quote)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .75)); }
.ft-gallery li:not(.ft-quote):hover { transform: translateY(-4px); }
.ft-gallery li span { position: absolute; z-index: 1; left: 10px; bottom: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #fff; font-weight: 600; }
.ft-quote { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; background: rgba(var(--ink), .7) !important; backdrop-filter: blur(6px); }
.ft-quote > i { color: var(--red); font-size: 20px; }
.ft-quote blockquote { margin: 0; font-family: var(--f-impact); font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--hi); }
.ft-quote blockquote em { display: block; margin-top: 4px; font-family: var(--f-script); font-size: 17px; text-transform: none; color: var(--tx2); line-height: 1.25; }
.ft-quote cite { font-size: 12px; font-style: normal; color: var(--muted); }
.ft-join { position: relative; overflow: hidden; padding: 22px 24px; border: 1px solid rgba(229, 50, 45, .45); border-radius: 12px; background: linear-gradient(90deg, rgba(10, 10, 14, .95) 40%, rgba(10, 10, 14, .55)), url('/static/img/club.webp') right center / cover; box-shadow: 0 0 40px -12px rgba(229, 50, 45, .45) inset; color: #ece6d6; }
.ft-join h3 { margin: 0 0 4px; font-family: var(--f-impact); font-weight: 400; font-size: 26px; letter-spacing: .03em; text-transform: uppercase; color: #fff; }
.ft-join p { margin: 0 0 14px; font-size: 13px; color: #d5cfc2; max-width: 300px; }
.ft-form { display: flex; max-width: 420px; border-radius: 8px; overflow: hidden; background: #fff; }
.ft-form input { flex: 1; min-width: 0; padding: 12px 14px; border: 0; outline: 0; background: #fff; color: #1a1712; font-size: 14px; }
.ft-form .btn-red { border-radius: 0; padding: 12px 18px; font-size: 12px; box-shadow: none; white-space: nowrap; }
.ft-form .btn-red:hover { transform: none; }
.ft-join-perks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: #d5cfc2; }
.ft-join-perks i { color: var(--red); margin-right: 4px; }

/* Liens */
.ft-main { position: relative; padding: 44px 0 34px; background: radial-gradient(800px 300px at 90% 100%, rgba(229, 50, 45, .08), transparent 70%), linear-gradient(180deg, var(--s1), var(--s0)); }
.ft-main-grid { display: grid; grid-template-columns: 1.45fr repeat(3, .95fr) 1.25fr 1.2fr; gap: 0; }
.ft-main-grid > * { padding: 0 24px; }
.ft-main-grid > * + * { border-left: 1px solid var(--line); }
.ft-main-grid > :first-child { padding-left: 0; }
.ft-wordmark { display: inline-block; white-space: nowrap; font-family: var(--f-body); font-weight: 700; font-size: clamp(24px, 2vw, 30px); letter-spacing: -.01em; color: var(--hi); line-height: 1; }
.ft-wordmark b { color: var(--red); }
.ft-slogan { margin: 14px 0 0; font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--tx2); line-height: 1.7; }
.ft-script { margin: 12px 0 14px; font-family: var(--f-script); font-size: 19px; color: var(--muted); }
.ft-contact { display: grid; gap: 6px; margin: 0; font-size: 12.5px; color: var(--muted); }
.ft-contact a:hover { color: var(--red); }
.ft-contact i { color: var(--red); width: 16px; }
.ft-col h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hi); }
.ft-col a { display: block; padding: 4px 0; font-size: 13.5px; color: var(--muted); transition: color .2s, transform .2s; }
.ft-col a:hover { color: var(--red); transform: translateX(3px); }
.ft-trust { list-style: none; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12px; align-content: start; }
.ft-trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: 11.5px; color: var(--muted); }
.ft-trust i { font-size: 24px; color: var(--hi); margin-bottom: 6px; }
.ft-trust strong { font-size: 12.5px; color: var(--hi); font-weight: 600; }
.ft-kanji { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 12px; align-content: center; }
.ft-kanji span { grid-row: span 1; font-family: var(--f-jp); font-weight: 900; font-size: 74px; line-height: 1; color: var(--red); text-shadow: 0 0 28px rgba(229, 50, 45, .55); }
.ft-kanji small { white-space: nowrap; font-size: 10.5px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: var(--tx2); }
.ft-kanji em { white-space: nowrap; grid-column: span 2; font-style: normal; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }

/* Bas */
.ft-bottom { border-top: 1px solid var(--line); background: var(--s0); }
.ft-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 0; font-size: 12.5px; color: var(--muted); }
.ft-bottom-inner b { color: var(--tx2); font-weight: 600; }
.ft-motto { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--tx2); }
.ft-motto i { color: var(--red); font-style: normal; margin: 0 6px; }
.ft-pay { display: flex; gap: 6px; }
.ft-pay b { padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 5px; font-size: 10.5px; letter-spacing: .05em; color: var(--muted); }

/* Clair */
html[data-theme="light"] .ft-community { background: linear-gradient(90deg, rgba(247, 240, 231, .97), rgba(247, 240, 231, .86) 55%, rgba(247, 240, 231, .6)), url('/static/img/hero-legends.webp') center / cover; }
html[data-theme="light"] .ft-quote { background: rgba(255, 255, 255, .8) !important; }
html[data-theme="light"] .ft-main { background: radial-gradient(800px 300px at 90% 100%, rgba(176, 58, 46, .08), transparent 70%), linear-gradient(180deg, #f3e9dc, #ede0cf); }
html[data-theme="light"] .ft-bottom { background: #e9dccb; }

/* Responsive */
@media (max-width: 1280px) {
  .ft-community-grid { grid-template-columns: 1fr 1.2fr; }
  .ft-gallery { grid-column: 1 / -1; grid-row: 2; min-height: 150px; }
  .ft-main-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .ft-brand { grid-column: 1 / -1; padding: 0 !important; border: 0 !important; display: grid; grid-template-columns: auto 1fr auto; gap: 6px 30px; align-items: center; }
  .ft-brand .ft-slogan, .ft-brand .ft-script { margin: 0; }
  .ft-brand .ft-contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .ft-main-grid > :nth-child(2) { border-left: 0; padding-left: 0; }
  .ft-trust { grid-column: span 2; grid-template-columns: repeat(4, 1fr); border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 26px !important; }
  .ft-kanji { border-top: 1px solid var(--line); padding-top: 26px !important; justify-content: center; }
}
@media (max-width: 900px) {
  .ft-community-grid { grid-template-columns: 1fr; }
  .ft-gallery { grid-row: auto; grid-template-columns: repeat(3, 1fr); }
  .ft-gallery .ft-quote { grid-column: 1 / -1; }
  .ft-gallery li:not(.ft-quote) { aspect-ratio: 1; }
  .ft-brand { grid-template-columns: 1fr; }
  .ft-brand .ft-contact { display: grid; }
  .ft-trust { grid-column: 1 / -1; }
  .ft-kanji { grid-column: 1 / -1; border-left: 0 !important; padding-left: 0 !important; padding-top: 0 !important; border-top: 0; justify-content: center; }
}
@media (max-width: 640px) {
  .gf-footer .container { width: calc(100% - 32px); }
  .ft-main-grid { grid-template-columns: 1fr 1fr; }
  .ft-main-grid > * { padding: 0 !important; border-left: 0 !important; }
  .ft-brand, .ft-trust, .ft-kanji { grid-column: span 2; }
  .ft-col:nth-of-type(3) { grid-column: span 2; }
  .ft-trust { grid-template-columns: 1fr 1fr; }
  .ft-form { flex-direction: column; background: none; gap: 8px; }
  .ft-form input, .ft-form .btn-red { border-radius: 8px; }
  .ft-bottom-inner { flex-direction: column; text-align: center; }
  body.rail-on .gf-footer { padding-bottom: 80px; }
}

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================= 08 — Le dossier Kira ================= */
.kira { position: relative; overflow: hidden; background: radial-gradient(700px 500px at 15% 50%, rgba(160, 20, 20, .22), transparent 70%), #0b0b0e; color: #ece6d6; border-top: 1px solid rgba(236, 230, 214, .06); }
.kira-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.kira-art { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 640px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(229, 50, 45, .18), 0 0 80px -20px rgba(229, 50, 45, .35); }
.kira-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.kira-art:hover img { transform: scale(1.04); }
.kira-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(11, 11, 14, .7)); pointer-events: none; }
.kira-page { position: absolute; width: 34px; height: 44px; background: #e9e2d0; box-shadow: 0 4px 10px rgba(0, 0, 0, .6); opacity: .85; animation: kiraFloat 9s ease-in-out infinite; pointer-events: none; z-index: 1; }
.kira-page::before { content: ''; position: absolute; inset: 6px; background: repeating-linear-gradient(180deg, #555 0 1px, transparent 1px 5px); opacity: .5; }
.kira-page.p1 { top: 12%; right: 8%; transform: rotate(18deg); }
.kira-page.p2 { top: 46%; right: 4%; width: 26px; height: 34px; animation-delay: -3s; }
.kira-page.p3 { bottom: 12%; left: 6%; width: 28px; height: 36px; animation-delay: -6s; }
@keyframes kiraFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: -10px -16px; rotate: -14deg; } }
.kira-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #ff5a52; }
.kira-kicker i { width: 28px; height: 1px; background: currentColor; }
.kira-title { margin: 14px 0 22px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(56px, 6.4vw, 96px); line-height: .9; text-transform: uppercase; color: #f1ead8; }
.kira-title em { display: block; margin-top: 14px; font-style: normal; font-family: 'Metal Mania', 'Cinzel Decorative', serif; font-size: .62em; letter-spacing: .03em; color: #f0574f; text-shadow: 0 0 30px rgba(229, 50, 45, .45), 3px 3px 0 rgba(0, 0, 0, .6); }
.kira-lead { margin: 0 0 26px; font-size: 15px; color: #d5cfc2; line-height: 1.7; }
.kira-note { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; max-width: 470px; padding: 22px 24px 20px; background: #121216; border: 1px solid rgba(236, 230, 214, .1); border-radius: 12px; box-shadow: 16px 16px 0 -2px #070709, 16px 16px 0 -1px rgba(236, 230, 214, .06); }
.kira-line { display: block; }
.kira-line.wide { grid-column: 1 / -1; }
.kira-line input { width: 100%; padding: 14px 2px 10px; background: none; border: 0; border-bottom: 1px solid rgba(236, 230, 214, .16); outline: 0; color: #ece6d6; font-family: 'Special Elite', 'Courier New', monospace; font-size: 14px; letter-spacing: .02em; transition: border-color .25s; }
.kira-line input::placeholder { color: #77726a; }
.kira-line input:focus { border-color: #e5322d; }
.kira-btn { grid-column: 1 / -1; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 99px; background: linear-gradient(180deg, #ee3d36, #c8231e); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 14px 34px -10px rgba(229, 50, 45, .8); transition: transform .2s, filter .2s; }
.kira-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.kira-btn:disabled { opacity: .6; pointer-events: none; }
.kira-error { grid-column: 1 / -1; margin: 8px 0 0; font-size: 13px; color: #ff8d8a; }
.kira-count { grid-column: 1 / -1; margin: 10px 0 0; text-align: center; font-size: 12px; color: #77726a; letter-spacing: .04em; }
.kira-count b { color: #f0574f; }
.kira-done { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; gap: 8px; padding: 24px; text-align: center; background: #121216; border-radius: 12px; animation: pdpFade .5s ease; }
.kira-done-title { font-family: 'Metal Mania', serif; font-size: 40px; color: #f0574f; text-shadow: 0 0 24px rgba(229, 50, 45, .5); }
.kira-done p { margin: 0; font-family: 'Special Elite', monospace; font-size: 14px; color: #d5cfc2; }
.kira-done b { color: #fff; }
.kira-again { justify-self: center; margin-top: 6px; font-size: 13px; color: #a8a297; text-decoration: underline; text-underline-offset: 3px; }
.kira-again:hover { color: #f0574f; }
.kira-note.is-written .kira-line input { animation: kiraInk .6s ease forwards; }
@keyframes kiraInk { to { color: transparent; text-shadow: 0 0 6px rgba(229, 50, 45, .9); } }

/* ================= 09 — Génération Spacetoon ================= */
.spacetoon { position: relative; overflow: hidden; min-height: clamp(480px, 36vw, 620px); display: flex; align-items: center; background: #0d0b10; color: #ece6d6; }
.spacetoon-bg { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; background: url('/static/img/spacetoon.webp') 0% center / cover no-repeat; }
.spacetoon-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, transparent 70%, #0d0b10 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }
.spacetoon-inner { position: relative; z-index: 1; display: flex; justify-content: flex-start; }
.spacetoon-copy { width: min(500px, 38%); padding: 40px 0; }
.spacetoon-kicker { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #f2b544; }
.spacetoon-kicker i { width: 28px; height: 1px; background: currentColor; }
.spacetoon-ar { margin: 8px 0 -6px; font-family: 'Reem Kufi', 'Noto Kufi Arabic', sans-serif; font-weight: 700; font-size: clamp(34px, 3.4vw, 50px); line-height: 1.6; padding-top: 4px; color: #f2b544; text-align: left; text-shadow: 0 0 24px rgba(242, 181, 68, .35); }
.spacetoon-title { margin: 4px 0 22px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(54px, 5.6vw, 86px); line-height: .92; text-transform: uppercase; color: #f1ead8; }
.spacetoon-title em { display: block; margin-top: 14px; font-style: normal; font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: .52em; letter-spacing: .04em; background: linear-gradient(180deg, #ffe08a, #f2b544 55%, #b9771c); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
.spacetoon-chips { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.spacetoon-chips a { display: inline-block; padding: 7px 14px; border: 1px solid rgba(236, 230, 214, .16); border-radius: 99px; background: rgba(255, 255, 255, .03); font-size: 12.5px; color: #d5cfc2; transition: .25s; }
.spacetoon-chips a:hover { border-color: #f2b544; color: #f2b544; background: rgba(242, 181, 68, .08); }
.spacetoon-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; border-radius: 99px; background: linear-gradient(180deg, #ffd27a, #e9a53a); color: #2a1a05; font-weight: 700; font-size: 14px; box-shadow: 0 14px 34px -10px rgba(242, 181, 68, .75); transition: transform .2s, filter .2s; }
.spacetoon-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.spacetoon-ball { position: absolute; left: 36%; bottom: 10%; z-index: 1; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd27a, #e9822a 60%, #a8460e); color: #c0170f; font-size: 11px; box-shadow: 0 0 22px rgba(242, 150, 50, .8); animation: stBall 3.4s ease-in-out infinite; }
@keyframes stBall { 50% { transform: translateY(-10px); box-shadow: 0 0 34px rgba(242, 150, 50, 1); } }
.empty-kira { margin-top: 14px; }

/* le thème clair garde ces 2 scènes nocturnes, avec une transition douce */
html[data-theme="light"] .kira { border-top: 0; }

@media (max-width: 900px) {
  .kira-grid { grid-template-columns: 1fr; }
  .kira-art { max-height: 460px; aspect-ratio: 4 / 5; }
  .kira-note { max-width: none; }
  .spacetoon { flex-direction: column; align-items: stretch; min-height: 0; }
  .spacetoon-bg { position: relative; width: 100%; height: 62vw; max-height: 420px; background-position: 30% center; }
  .spacetoon-copy { width: 100%; margin-right: 0; }
  .spacetoon-bg::after { background: linear-gradient(180deg, transparent 55%, #0d0b10), repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); }
  .spacetoon-inner { justify-content: flex-start; margin-top: -40px; }
  .spacetoon-copy { padding: 0 0 50px; }
}
@media (max-width: 560px) {
  .kira-note { grid-template-columns: 1fr; padding: 18px; box-shadow: none; }
  .kira-title { font-size: 58px; }
}

/* ================= Latest Drops v2 — vitrine ================= */
.drops2 { position: relative; overflow: hidden; padding-top: 0; background: radial-gradient(700px 420px at 85% 60%, rgba(229, 50, 45, .12), transparent 70%); }
.drops2-ticker { overflow: hidden; border-block: 1px solid var(--line); background: var(--s1); margin-bottom: clamp(40px, 5vw, 70px); }
.drops2-ticker-track { display: flex; width: max-content; animation: dropTicker 32s linear infinite; }
.drops2-ticker span { padding: 12px 0; white-space: nowrap; font-family: var(--f-impact); font-size: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); }
.drops2-ticker b { margin: 0 22px; color: var(--red); font-weight: 400; }
@keyframes dropTicker { to { transform: translateX(-50%); } }
.drops2-grid { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.6fr); gap: clamp(30px, 4vw, 60px); align-items: center; }
.drops2-copy .eyebrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.drops2-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid rgba(69, 196, 107, .4); border-radius: 99px; font-style: normal; font-size: 10.5px; letter-spacing: .12em; color: #45c46b; }
.drops2-live i { width: 7px; height: 7px; border-radius: 50%; background: #45c46b; box-shadow: 0 0 0 0 rgba(69, 196, 107, .7); animation: liveDot 1.6s infinite; }
@keyframes liveDot { 70% { box-shadow: 0 0 0 8px rgba(69, 196, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(69, 196, 107, 0); } }
.drops2-title { font-size: clamp(56px, 6vw, 98px); line-height: .86; margin: 12px 0 18px; }
.drops2-title span { color: transparent; -webkit-text-stroke: 1.5px var(--hi); }
.drops2-copy > p { color: var(--tx2); max-width: 400px; margin: 0 0 24px; }
.drops2-next { max-width: 400px; padding: 16px 18px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--s1); margin-bottom: 24px; }
.drops2-next-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.drops2-next-label i { color: var(--gold); margin-right: 4px; }
.drops2-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.drops2-clock div { text-align: center; padding: 8px 0 6px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); }
.drops2-clock b { display: block; font-family: var(--f-impact); font-weight: 400; font-size: 32px; line-height: 1; color: var(--hi); font-variant-numeric: tabular-nums; }
.drops2-clock small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.drops2-next-when { display: block; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.drops2-ctas { display: flex; gap: 10px; flex-wrap: wrap; }

/* Accordéon */
.drops2-reel { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; height: clamp(440px, 38vw, 560px); }
.drops2-card { --dc: var(--red); position: relative; flex: 1; min-width: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-2); background: var(--s2); cursor: pointer; transition: flex .6s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s; outline: 0; }
.drops2-card.is-open { flex: 4.2; cursor: default; border-color: color-mix(in srgb, var(--dc) 70%, transparent); box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .9), 0 0 50px -18px var(--dc); }
.drops2-card:focus-visible { box-shadow: 0 0 0 3px var(--dc); }
.drops2-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.6); transition: filter .6s, transform 1.2s; }
.drops2-card.is-open img { filter: none; transform: scale(1.03); }
.drops2-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 45%, rgba(5, 5, 7, .92)); pointer-events: none; }
.drops2-num { position: absolute; z-index: 2; top: 14px; left: 16px; font-family: var(--f-impact); font-size: 26px; line-height: 1; color: #fff; text-shadow: 0 2px 10px #000; }
.drops2-card.is-open .drops2-num { color: var(--dc); font-size: 34px; }
.drops2-vert { position: absolute; z-index: 2; left: 50%; bottom: 22px; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: opacity .3s; }
.drops2-card.is-open .drops2-vert { opacity: 0; }
.drops2-info { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 22px 24px; color: #fff; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .45s; pointer-events: none; }
.drops2-card.is-open .drops2-info { opacity: 1; transform: none; transition-delay: .25s; pointer-events: auto; }
.drops2-tag { display: inline-block; padding: 4px 10px; border-radius: 4px; background: var(--dc); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.drops2-info h3 { margin: 10px 0 8px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; max-width: 420px; }
.drops2-info h3 a:hover { color: var(--dc); }
.drops2-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.drops2-meta strong { font-family: var(--f-impact); font-weight: 400; font-size: 30px; line-height: 1; }
.drops2-stock { font-size: 12.5px; color: #8ee0a6; }
.drops2-stock i { font-size: 7px; vertical-align: 2px; margin-right: 3px; }
.drops2-stock.hot { color: #ff8a5c; }
.drops2-stock.hot i { font-size: 12px; vertical-align: 0; }
.drops2-actions { display: flex; align-items: center; gap: 16px; }
.drops2-see { font-size: 13px; font-weight: 600; color: #fff; display: inline-flex; gap: 8px; align-items: center; }
.drops2-see:hover { color: var(--dc); }

html[data-theme="light"] .drops2-ticker { background: #efe4d6; }
html[data-theme="light"] .drops2-card { border-color: rgba(60, 30, 20, .14); }

@media (max-width: 1100px) {
  .drops2-grid { grid-template-columns: 1fr; }
  .drops2-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; align-items: end; }
  .drops2-copy > .eyebrow, .drops2-copy > .drops2-title, .drops2-copy > p { grid-column: 1; }
  .drops2-next { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
  .drops2-ctas { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .drops2-copy { display: block; }
  .drops2-reel { height: auto; flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
  .drops2-reel::-webkit-scrollbar { display: none; }
  .drops2-card, .drops2-card.is-open { flex: 0 0 78%; height: 440px; scroll-snap-align: center; }
  .drops2-card img { filter: none; }
  .drops2-card .drops2-info { opacity: 1; transform: none; pointer-events: auto; }
  .drops2-vert { display: none; }
  .drops2-ticker span { font-size: 15px; }
}

/* ===================== Méga-menu « Univers » v2 ===================== */
.mega-panel.mu { grid-template-columns: 270px minmax(0, 1fr) 270px; grid-template-areas: "intro feat feat" "intro cats promo"; gap: 14px; min-height: 0; }
.mega:has(.mu:not([hidden])) .mega-inner { padding: 16px 0 20px; }
.mu h3 { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--hi); }
.mu h3 i { color: var(--red); font-size: 15px; }
.mu-box { border: 1px solid var(--line); border-radius: 12px; background: rgba(var(--ink), .35); padding: 14px 16px 16px; min-width: 0; }
.mu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.mu-more { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--red); display: inline-flex; gap: 6px; align-items: center; }
.mu-more:hover { color: #ff6b66; }
.mu-more i { font-size: 10px; }

/* Intro + torii */
.mu-intro { grid-area: intro; position: relative; overflow: hidden; margin: 0; padding: 20px 22px; border-radius: 12px; isolation: isolate; background: #060506 url('/static/img/mega-torii.webp') center bottom / cover no-repeat; border: 1px solid var(--line); display: flex; flex-direction: column; }
.mu-intro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 5, 6, .9) 0%, rgba(6, 5, 6, .45) 45%, rgba(6, 5, 6, .25) 70%, rgba(6, 5, 6, .85)); }
.mu-kicker { margin: 0 0 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--red); }
.mu-title { margin: 0 0 10px; font-family: 'Permanent Marker', var(--f-impact); font-weight: 400; font-size: 30px; line-height: 1.02; text-transform: uppercase; color: #fff; }
.mu-title em { display: block; font-style: normal; color: var(--red); text-shadow: 0 0 24px rgba(229, 50, 45, .5); }
.mu-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: #d5cfc2; }
.mu-hobby { margin: auto 0 0; padding-top: 18px; font-family: var(--f-script); font-size: 24px; line-height: 1; color: var(--red); transform: rotate(-8deg); transform-origin: left; text-shadow: 0 2px 10px #000; }
.mu-jp { margin: 14px 0 0; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #8f897c; }
.mu-jp span { display: block; font-family: var(--f-jp); font-size: 22px; letter-spacing: .08em; color: #cfc8bb; text-transform: none; }

/* Univers en vedette */
.mu-featured { grid-area: feat; }
.mu-unis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.mu-uni { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--s2); transition: transform .3s, border-color .3s, box-shadow .3s; }
.mu-uni:hover { transform: translateY(-4px); border-color: var(--mc); box-shadow: 0 16px 34px -16px var(--mc); }
.mu-uni-img { position: relative; display: block; aspect-ratio: 1 / .92; overflow: hidden; }
.mu-uni-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transition: transform .6s; }
.mu-uni:hover .mu-uni-img img { transform: scale(1.07); }
.mu-uni-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .7)); }
.mu-uni-logo { position: absolute; z-index: 1; left: 6px; right: 6px; bottom: 8px; text-align: center; font-family: var(--f-impact); font-weight: 400; font-size: clamp(16px, 1.4vw, 22px); line-height: .95; text-transform: uppercase; color: #fff; -webkit-text-stroke: 1px var(--mc); paint-order: stroke fill; text-shadow: 0 0 14px var(--mc), 0 2px 0 rgba(0, 0, 0, .7); }
.mu-uni-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 10px 10px; }
.mu-uni-foot strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mu-uni-foot small { font-size: 11px; color: var(--red); }
.mu-uni-foot small i { font-size: 9px; }
.mu-go { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 10px; color: var(--hi); transition: .25s; }
.mu-uni:hover .mu-go { background: var(--mc); border-color: var(--mc); color: #fff; }

/* Catégories */
.mu-cats { grid-area: cats; }
.mu-cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mu-cat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s1); transition: border-color .25s, background .25s, transform .25s; }
.mu-cat > i { width: 30px; text-align: center; font-size: 22px; color: var(--red); transition: transform .3s; }
.mu-cat strong { display: block; font-size: 13px; font-weight: 600; color: var(--hi); }
.mu-cat small { font-size: 10.5px; color: var(--red); }
.mu-cat small i { font-size: 8px; }
.mu-cat:hover { border-color: rgba(229, 50, 45, .6); background: rgba(229, 50, 45, .07); transform: translateY(-2px); }
.mu-cat:hover > i { transform: scale(1.15) rotate(-6deg); }

/* Promo figurines */
.mu-promo { grid-area: promo; position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 12px; border: 1px solid rgba(229, 50, 45, .45); background: radial-gradient(circle at 75% 60%, rgba(229, 50, 45, .55), #1a0607 60%), #120405; isolation: isolate; min-height: 180px; }
.mu-promo img { position: absolute; right: -14px; bottom: 0; height: 100%; width: 58%; object-fit: cover; object-position: 50% 15%; z-index: -1; -webkit-mask: linear-gradient(90deg, transparent, #000 35%); mask: linear-gradient(90deg, transparent, #000 35%); transition: transform .6s; }
.mu-promo:hover img { transform: scale(1.06); }
.mu-promo-copy { padding: 16px 18px; max-width: 62%; }
.mu-promo-copy small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.mu-promo-copy strong { display: block; margin: 2px 0 6px; font-family: 'Permanent Marker', var(--f-impact); font-weight: 400; font-size: 24px; line-height: 1; text-transform: uppercase; color: #fff; }
.mu-promo-copy > span { display: block; font-size: 12px; color: #e3dccf; line-height: 1.4; }
.mu-promo-copy b { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 6px; background: var(--red); color: #fff; font-size: 12px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(229, 50, 45, .9); }

/* Tendances */
.mu-trend { grid-area: trend; }
.mu-trend .mu-more { margin-left: auto; }
.mu-arrows { display: flex; gap: 6px; }
.mu-arrows button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-size: 11px; color: var(--hi); transition: .2s; }
.mu-arrows button:hover { background: var(--red); border-color: var(--red); color: #fff; }
.mu-trend-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 12px) / 4); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mu-trend-rail::-webkit-scrollbar { display: none; }
.mu-trend-rail > * { scroll-snap-align: start; }
.mu-trend-rail.is-swap { animation: megaIn .35s ease both; }
.mu-trend-rail .mega-skel { height: 220px; }
.mu-trend .mega-card-img { aspect-ratio: 1 / .72; }
.mu-trend .mega-card-body { padding: 9px 12px 11px; gap: 3px; }
.mu-trend .mega-name { font-size: 12.5px; min-height: 2.5em; }
.mu-trend .mega-price b { font-size: 15px; }
.mu-trend .mega-add { width: 32px; height: 32px; border-radius: 8px; font-size: 12px; }

/* Liens rapides */
.mu-links { grid-area: links; display: flex; flex-direction: column; gap: 8px; }
.mu-links h3 { margin: 2px 0 4px; }
.mu-link { display: flex; align-items: center; gap: 14px; flex: 1; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s1); transition: border-color .25s, transform .25s, background .25s; }
.mu-link > i:first-child { width: 22px; text-align: center; font-size: 18px; color: var(--red); }
.mu-link span { flex: 1; }
.mu-link strong { display: block; font-size: 13px; font-weight: 600; color: var(--hi); }
.mu-link small { font-size: 11px; color: var(--muted); }
.mu-link > i:last-child { font-size: 11px; color: var(--red); transition: transform .25s; }
.mu-link:hover { border-color: rgba(229, 50, 45, .55); background: rgba(229, 50, 45, .07); transform: translateX(3px); }
.mu-link:hover > i:last-child { transform: translateX(3px); }

/* Mode clair : le panneau garde ses visuels sombres */
html[data-theme="light"] .mu-box { background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .mu-cat, html[data-theme="light"] .mu-link { background: #fffaf3; }

@media (max-width: 1360px) {
  .mega-panel.mu { grid-template-columns: 230px minmax(0, 1fr) 240px; }
  .mu-title { font-size: 26px; }
  .mu-cat { padding: 10px; gap: 8px; } .mu-cat > i { font-size: 18px; width: 22px; }
}
@media (max-width: 1180px) {
  .mega-panel.mu { grid-template-columns: minmax(0, 1fr) 240px; grid-template-areas: "feat feat" "cats promo"; }
  .mu-intro { display: none; }
  .mega-panel.mu .mega-banner { display: block; }
}
/* compactage */
.mu-title { font-size: 26px; letter-spacing: -.01em; }
.mu-uni-img { aspect-ratio: 1 / .78; }
.mu-uni-foot { padding: 6px 10px 8px; }
.mu-box { padding: 12px 14px 14px; }
.mu-head { margin-bottom: 10px; }
.mu-cat { padding: 10px 12px; }
.mu-trend .mega-card-img { aspect-ratio: 1 / .62; }
.mu-trend .mega-meta { display: none; }
.mu-trend .mega-name { min-height: 0; -webkit-line-clamp: 1; }
.mu-trend .mega-foot { padding-top: 2px; }
.mu-trend .mega-wish { width: 28px; height: 28px; font-size: 11px; top: 8px; right: 8px; }
.mu-trend .mega-badge { top: 8px; left: 8px; font-size: 10px; padding: 3px 7px; }
.mu-links { gap: 6px; }
.mu-link { padding: 8px 14px; }
.mega:has(.mu:not([hidden])) { max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 1360px) { .mu-title { font-size: 22px; } }

/* ===== Méga-menu Univers : s'adapte à la hauteur de l'écran ===== */
.mega:has(.mu:not([hidden])) { overscroll-behavior: contain; }
.mu-uni-img { aspect-ratio: auto; height: clamp(120px, calc(100vh * .32 - 40px), 250px); }
.mu-promo { min-height: 0; }
@media (max-height: 940px) {
  .mega:has(.mu:not([hidden])) .mega-inner { padding: 12px 0 14px; }
  .mega-panel.mu { gap: 10px; }
  .mu-box { padding: 10px 12px 12px; }
  .mu-head { margin-bottom: 8px; }
  .mu h3 { font-size: 14px; }
  /* tendances : cartes horizontales compactes */
  .mu-trend .mega-card { flex-direction: row; align-items: stretch; }
  .mu-trend .mega-card-img { flex: none; width: 92px; aspect-ratio: auto; }
  .mu-trend .mega-badge, .mu-trend .mega-wish { display: none; }
  .mu-trend .mega-card-body { padding: 8px 10px; min-width: 0; }
  .mu-trend .mega-name { font-size: 12px; -webkit-line-clamp: 2; }
  .mu-trend .mega-price b { font-size: 14px; }
  .mu-trend .mega-add { width: 28px; height: 28px; font-size: 11px; }
  .mu-trend-rail .mega-skel { height: 92px; }
  .mu-links { gap: 5px; }
  .mu-link { padding: 6px 12px; flex: none; }
  .mu-link small { display: none; }
  .mu-cat { padding: 8px 10px; }
  .mu-intro { padding: 16px 18px; }
  .mu-hobby { font-size: 20px; padding-top: 10px; }
  .mu-jp { margin-top: 8px; } .mu-jp span { font-size: 18px; }
}
@media (max-height: 760px) {
  .mu-uni-foot small { display: none; }
  .mu-uni-foot { padding: 5px 8px 6px; }
  .mu-go { width: 22px; height: 22px; }
  .mu-cat small { display: none; }
  .mu-cat { padding: 7px 10px; }
  .mu-cat > i { font-size: 16px; }
  .mu-text { display: none; }
  .mu-promo-copy > span { display: none; }
  .mu-promo-copy b { margin-top: 8px; padding: 6px 12px; }
  .mu-trend .mega-card-img { width: 74px; }
  .mu-trend .mega-rate { display: none; }
  .mu-trend-rail .mega-skel { height: 74px; }
}
.mu-uni-logo { font-size: clamp(14px, 1.2vw, 20px); }
.mu-uni-foot strong { font-size: 12px; }

/* Slide 1 : « Tes univers préférés » aligné sur les autres slides (marge gauche + bas) */
@media (min-width: 981px) {
  .hero-slide .hero-dz-left { left: max(118px, calc((100vw - 1520px) / 2 + 20px)); bottom: clamp(110px, 19%, 180px); }
}

/* Indicateur de slides : plus discret, aligné sur le texte des slides */
@media (min-width: 981px) {
  .hero-progress { left: max(118px, calc((100vw - 1520px) / 2 + 20px)); right: auto; bottom: 34px; gap: 18px; }
  .hero-count { font-size: 18px; letter-spacing: .06em; }
  .hero-bars { flex: none; width: 240px; gap: 8px; }
  .hero-bar { height: 16px; }
  .hero-bar i { height: 2px; }
}

/* =====================================================================
   Marges latérales symétriques sur tout le site : --gutter à gauche ET à droite
   (80 px sur desktop, 20 px sur mobile). Le rail latéral est affiné pour
   tenir dans la marge gauche sans décaler le contenu.
   ===================================================================== */
:root { --gutter: 20px; --wrap: min(1760px, calc(100% - 2 * var(--gutter))); }
@media (min-width: 981px) { :root { --gutter: 80px; } }
@media (min-width: 981px) and (max-width: 1199px) { :root { --gutter: 60px; } }

.header-inner, .mega-inner, .icon-bar-grid, .ub-grid, .trust-grid,
.section .container, .story .container, .spotlight .container, .club .container,
.footer-trust-grid, .footer-grid, .footer-bottom, .gf-footer .container, .universe-page .container,
body:has(#side-rail) main > section:not(#hero-section) > .container, body:has(#side-rail) main > section:not(#hero-section):not(#universes-section) > .container,
body:has(#side-rail) .site-footer > .container, body:has(#side-rail) .footer-trust-grid, body:has(#side-rail) .gf-footer .container {
  width: var(--wrap); margin-left: auto; margin-right: auto;
}
.kt-page .container, .spacetoon .container, .kira .container { width: var(--wrap); }

/* Contenus positionnés du hero alignés sur la même marge */
@media (min-width: 981px) {
  .hs-copy, .hero-slide .hero-dz-left, .hero-progress { left: max(var(--gutter), calc((100% - 1760px) / 2)); }
  .hero-dz-right { right: max(var(--gutter), calc((100% - 1760px) / 2)); }
  .uni-hero-side { right: max(var(--gutter), calc((100vw - 1760px) / 2)); }

  /* Rail latéral affiné : tient dans la marge gauche */
  .side-rail { left: 8px; width: calc(var(--gutter) - 16px); padding: 10px 4px; border-radius: 16px; }
  .rail-logo img { width: 44px; }
  .rail-item { padding: 9px 0; font-size: 9px; gap: 5px; letter-spacing: -.01em; }
  .rail-item i { font-size: 17px; }
  .rail-item.is-active::before { left: -5px; }
  .rail-item .badge-count { right: 6px; }
}
@media (min-width: 981px) and (max-width: 1199px) {
  .rail-item span, .rail-item { font-size: 0; } .rail-item i { font-size: 18px; } .rail-logo img { width: 36px; }
}

/* Header : avec 80 px de marge, on resserre pour éviter le chevauchement nav / recherche */
@media (min-width: 981px) {
  .header-inner { gap: 18px; }
  .main-nav { overflow: hidden; flex: 0 1 auto; }
  .head-search { flex: 1 1 220px; min-width: 200px; }
}
@media (max-width: 1600px) { .main-nav .nav-cat:nth-child(n+7) { display: none; } }
@media (max-width: 1480px) { .head-action span { display: none; } .main-nav > a, .main-nav > .nav-dropdown > a { padding-inline: 10px; } }
@media (max-width: 1420px) { .main-nav .nav-cat:nth-child(n+6) { display: none; } }
@media (max-width: 1300px) { .main-nav .nav-cat:nth-child(n+5) { display: none; } }
@media (max-width: 1200px) { .main-nav .nav-cat { display: none; } }

/* Grilles univers imbriquées dans un .container : pleine largeur du conteneur */
.container > .ub-grid { width: 100%; }

/* ============ Figurines d'exception : carrousel de scènes (accueil) ============ */
.fx-spot { position: relative; height: clamp(440px, 34vw, 620px); overflow: hidden; isolation: isolate; background: #0a0707; border-block: 1px solid var(--line); }
.fx-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s; }
.fx-slide.is-on { opacity: 1; visibility: visible; }
.fx-bg { position: absolute; inset: 0; background-size: cover; background-position: center 45%; transform: scale(1.06); transition: transform 8s ease-out; }
.fx-slide.is-on .fx-bg { transform: scale(1); }
.fx-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(8,6,6,.92) 0%, rgba(8,6,6,.65) 18%, rgba(8,6,6,.08) 36%, transparent 60%, rgba(8,6,6,.35) 78%, rgba(8,6,6,.85) 100%),
  linear-gradient(0deg, rgba(8,6,6,.75), transparent 30%, transparent 85%, rgba(8,6,6,.5)); }
.fx-kanji { position: absolute; z-index: 2; right: calc(var(--gutter, 26px) + 170px); top: 50%; transform: translateY(-58%); writing-mode: vertical-rl; font-family: var(--f-jp); font-weight: 900; font-size: clamp(34px, 2.9vw, 52px); line-height: 1; white-space: nowrap; letter-spacing: .1em; color: rgba(245, 238, 226, .85); text-shadow: 0 0 24px rgba(0,0,0,.8), 0 0 40px color-mix(in srgb, var(--fx) 40%, transparent); opacity: 0; transition: opacity .9s .3s, transform .9s .3s; }
.fx-slide.is-on .fx-kanji { opacity: 1; transform: translateY(-50%); }
.fx-product { position: absolute; z-index: 2; left: 64%; bottom: 11%; display: flex; flex-direction: column; gap: 4px; opacity: 0; transform: translateY(14px); transition: opacity .7s .35s, transform .7s .35s; }
.fx-slide.is-on .fx-product { opacity: 1; transform: none; }
.fx-product strong { font-size: 20px; font-weight: 700; color: #fff; text-shadow: 0 2px 10px #000; }
.fx-product span { font-size: 13px; color: #d9cfc1; text-shadow: 0 1px 6px #000; }
.fx-product b { margin: 4px 0 10px; font-family: var(--f-impact); font-size: 26px; font-weight: 400; color: var(--fx); text-shadow: 0 2px 10px #000; }
.fx-btn { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 12px 22px; border: 1px solid var(--red); border-radius: 4px; background: rgba(10,7,7,.55); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; backdrop-filter: blur(4px); transition: background .2s, transform .2s, box-shadow .2s; }
.fx-btn:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(229,50,45,.9); }
.fx-btn i { transition: transform .2s; }
.fx-btn:hover i { transform: translateX(4px); }
.fx-btn.ghost { border-color: rgba(229, 50, 45, .9); box-shadow: 0 0 0 1px rgba(229,50,45,.25) inset; }

.fx-copy { position: absolute; z-index: 3; left: var(--gutter, 26px); top: 50%; transform: translateY(-50%); display: flex; gap: 34px; align-items: flex-start; }
.fx-index { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.fx-index button { position: relative; padding: 0; border: 0; background: none; font-family: var(--f-impact); font-size: 18px; color: rgba(245,238,226,.4); cursor: pointer; transition: color .3s; }
.fx-index button::after { content: ''; position: absolute; left: calc(100% + 10px); top: 50%; width: 0; height: 2px; background: var(--red); transition: width .4s; }
.fx-index button.is-on { color: #fff; }
.fx-index button.is-on::after { width: 46px; }
.fx-index button:hover { color: #fff; }
.fx-text { margin-left: 30px; max-width: 320px; }
.fx-title { margin: 0 0 14px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(34px, 3vw, 52px); line-height: .95; text-transform: uppercase; color: #fff; text-shadow: 0 3px 14px rgba(0,0,0,.7); }
.fx-title span { font-family: var(--f-script); text-transform: none; font-size: .78em; color: #f3ece0; }
.fx-text p { margin: 0 0 22px; font-size: 14.5px; color: #d9cfc1; text-shadow: 0 1px 8px #000; }

.fx-rail { position: absolute; z-index: 3; right: var(--gutter, 26px); top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; }
.fx-thumbs { display: flex; flex-direction: column; gap: 10px; }
.fx-thumbs button { width: clamp(78px, 6.4vw, 104px); aspect-ratio: 1; padding: 0; border: 1px solid rgba(245,238,226,.22); border-radius: 6px; overflow: hidden; background: #111; cursor: pointer; opacity: .6; transition: opacity .3s, border-color .3s, transform .3s, box-shadow .3s; }
.fx-thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.fx-thumbs button:hover { opacity: .95; transform: translateX(-3px); }
.fx-thumbs button.is-on { opacity: 1; border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 10px 24px -10px rgba(229,50,45,.8); }
.fx-rail { flex-direction: row-reverse; }
.fx-rail .fx-arrow:first-child { order: 0; }
.fx-arrow { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(245,238,226,.35); border-radius: 50%; background: rgba(10,7,7,.45); color: #fff; cursor: pointer; transition: border-color .2s, background .2s; }
.fx-arrow:hover { border-color: var(--red); background: var(--red); }
.fx-rail { flex-direction: row; }
.fx-rail .fx-arrow { position: absolute; right: calc(100% + 14px); }
.fx-rail .fx-arrow[data-fx-step="-1"] { top: calc(50% - 50px); }
.fx-rail .fx-arrow[data-fx-step="1"] { top: calc(50% + 10px); }
.fx-progress { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.06); }
.fx-progress i { display: block; height: 100%; width: 0; background: var(--red); }
.fx-spot.is-playing .fx-progress i { animation: fxProg 6.5s linear forwards; }
@keyframes fxProg { to { width: 100%; } }

@media (max-width: 1100px) {
  .fx-kanji { display: none; }
  .fx-product { left: auto; right: calc(var(--gutter, 20px) + 150px); }
}
@media (max-width: 860px) {
  .fx-spot { height: auto; min-height: 640px; }
  .fx-bg { background-position: 52% 30%; height: 62%; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  .fx-veil { background: linear-gradient(180deg, rgba(8,6,6,.5), transparent 25%, transparent 45%, rgba(8,6,6,.95) 66%); }
  .fx-copy { position: relative; top: auto; left: auto; transform: none; padding: 400px var(--gutter, 20px) 24px; flex-direction: column; gap: 14px; }
  .fx-index { flex-direction: row; gap: 18px; }
  .fx-index button.is-on::after { display: none; }
  .fx-index button.is-on { color: var(--red); }
  .fx-text { margin: 0; max-width: none; }
  .fx-product { left: var(--gutter, 20px); right: auto; top: 300px; bottom: auto; }
  .fx-product .fx-btn { display: none; }
  .fx-rail { top: 24px; right: var(--gutter, 20px); transform: none; }
  .fx-thumbs { flex-direction: row; gap: 6px; }
  .fx-thumbs button { width: 46px; }
  .fx-rail .fx-arrow { display: none; }
}

/* ============ Nos catégories : 4 grandes scènes illustrées ============ */
.cat-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-scene { position: relative; aspect-ratio: 1 / 1.02; display: flex; flex-direction: column; justify-content: space-between; padding: 22px 22px 20px; border: 1px solid rgba(229, 50, 45, .28); border-radius: 6px; overflow: hidden; isolation: isolate; background: #0d0909; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); transition: border-color .35s, transform .35s, box-shadow .35s; }
.cat-scene img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.86); transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s; }
.cat-scene::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,5,5,.9) 0%, rgba(8,5,5,.45) 24%, transparent 46%, transparent 64%, rgba(8,5,5,.85) 100%); }
.cat-scene::after { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(236, 210, 170, .1); border-radius: 3px; pointer-events: none; transition: border-color .35s; }
.cat-scene:hover { border-color: var(--red); transform: translateY(-5px); box-shadow: 0 26px 50px -24px rgba(229, 50, 45, .75); }
.cat-scene:hover::after { border-color: rgba(229, 50, 45, .35); }
.cat-scene:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(.95); }
.cat-scene-head h3 { margin: 0; font-family: var(--f-impact); font-weight: 400; font-size: clamp(24px, 1.9vw, 32px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.cat-scene-head p { margin: 6px 0 0; max-width: 240px; font-size: 14px; line-height: 1.35; color: #e6ddd0; text-shadow: 0 1px 8px #000; }
.cat-scene-kanji { position: absolute; top: 16px; right: 18px; writing-mode: vertical-rl; white-space: nowrap; line-height: 1; font-family: var(--f-jp); font-weight: 900; font-size: 26px; letter-spacing: .1em; color: var(--red); opacity: .85; text-shadow: 0 0 14px rgba(229, 50, 45, .55); }
.cat-scene-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cat-scene-btn { white-space: nowrap; display: inline-flex; align-items: center; gap: 12px; padding: 11px 18px; border: 1px solid var(--red); border-radius: 3px; background: rgba(60, 8, 6, .62); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(4px); box-shadow: 0 0 18px -6px rgba(229, 50, 45, .6), inset 0 0 10px rgba(229, 50, 45, .2); transition: background .25s; }
.cat-scene-btn i { transition: transform .25s; }
.cat-scene:hover .cat-scene-btn { background: var(--red); }
.cat-scene:hover .cat-scene-btn i { transform: translateX(4px); }
.cat-scene-foot em { white-space: nowrap; font-style: normal; font-size: 11px; color: #d6ccbd; text-shadow: 0 1px 6px #000; }

.cat-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cat-more a { flex: 1 1 0; min-width: 150px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: linear-gradient(180deg, var(--s2), var(--s1)); font-size: 13px; font-weight: 600; color: var(--hi); transition: border-color .25s, transform .25s; }
.cat-more a i { color: var(--red); width: 18px; text-align: center; }
.cat-more a em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted); }
.cat-more a:hover { border-color: var(--red); transform: translateY(-2px); }

@media (max-width: 1360px) { .cat-scene-foot em { display: none; } }
@media (max-width: 1100px) { .cat-scenes { grid-template-columns: repeat(2, 1fr); } .cat-scene { aspect-ratio: 1.35; } }
@media (max-width: 640px) {
  .cat-scenes { gap: 10px; }
  .cat-scene { aspect-ratio: 1 / 1.1; padding: 14px 12px; }
  .cat-scene-head h3 { font-size: 20px; }
  .cat-scene-head p { font-size: 12px; }
  .cat-scene-kanji { display: none; }
  .cat-scene-btn { padding: 8px 10px; font-size: 9px; gap: 6px; letter-spacing: .04em; }
  .cat-scene-btn i { display: none; }
  .cat-scene-foot em { display: none; }
  .cat-more a { min-width: calc(50% - 5px); }
}