/* ============ Pages univers thématiques (structure commune, thème par univers) ============ */
.ut-page { --ut-red: #e5322d; --ut-red-rgb: 229 50 45; --ut-gold: #d9b26a; --ut-gold-rgb: 217 178 106; --ut-bg: #0b0909; --ut-ink: 10, 8, 8; --ut-serif: 'Cinzel', 'Grenze', Georgia, serif; --ut-head: var(--ut-serif); --ut-title-size: clamp(54px, 5.6vw, 96px); background: var(--ut-bg); }
.ut-emblem-ico { flex: none; display: grid; place-items: center; width: 78px; height: 78px; border: 2px solid var(--ut-red); border-radius: 50%; font-size: 34px; color: var(--ut-red); box-shadow: 0 0 24px rgb(var(--ut-red-rgb) / .45), inset 0 0 18px rgb(var(--ut-red-rgb) / .25); }
.ut-panel header .ut-emblem-ico { width: 34px; height: 34px; font-size: 15px; border-width: 1px; }
.ut-page .container { width: var(--wrap, min(1760px, calc(100% - 40px))); margin-inline: auto; }

/* boutons */
.ut-btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 24px; border: 1px solid var(--ut-red); border-radius: 4px; background: linear-gradient(180deg, color-mix(in srgb, var(--ut-red) 90%, #fff), color-mix(in srgb, var(--ut-red) 58%, #000)); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 10px 30px -12px rgb(var(--ut-red-rgb) / .7), inset 0 1px 0 rgba(255,255,255,.15); transition: transform .2s, filter .2s, background .2s; }
.ut-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.ut-btn i { transition: transform .2s; }
.ut-btn:hover i { transform: translateX(4px); }
.ut-btn-ghost { background: rgba(var(--ut-ink), .55); box-shadow: none; }
.ut-btn-ghost:hover { background: rgb(var(--ut-red-rgb) / .18); }
.ut-btn.sm { padding: 10px 18px; font-size: 11px; }

.ut-h2 { margin: 0; font-family: var(--ut-display, var(--ut-serif)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f3ece0; }
.ut-h2-xl { font-size: clamp(38px, 3.6vw, 58px); line-height: 1; text-shadow: 0 0 30px rgb(var(--ut-red-rgb) / .35); }
.ut-h3 { margin: 0; font-family: var(--ut-head); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: #f3ece0; }
.ut-gold { color: var(--ut-gold); }
.ut-sub { margin: 10px 0 14px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #e9e1d2; }
.ut-desc { margin: 0 0 22px; max-width: 360px; color: var(--tx2); font-size: 14.5px; }
.ut-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ut-red); font-size: 13px; font-weight: 500; }
.ut-link:hover i { transform: translateX(4px); }
.ut-link i { transition: transform .2s; }

/* ---------- Hero ---------- */
.ut-hero { position: relative; min-height: clamp(600px, 48vw, 820px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.ut-hero-bg { position: absolute; inset: 0; z-index: -3; background-size: cover; background-position: 62% 30%; animation: heroZoom 28s ease-in-out infinite alternate; }
.ut-hero-veil { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(var(--ut-ink), .97) 0%, rgba(var(--ut-ink), .86) 26%, rgba(var(--ut-ink), .35) 50%, transparent 68%), linear-gradient(180deg, rgba(var(--ut-ink), .5), transparent 26%, transparent 72%, var(--ut-bg)); }
.ut-hero-inner { padding: 46px 0 64px; }
.ut-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ut-crumbs a:hover { color: #fff; }
.ut-crumbs i { font-size: 8px; opacity: .6; }
.ut-crumbs span { color: #e9e1d2; }
.ut-kicker { margin: 0 0 14px; font-family: var(--ut-serif); font-size: 13px; letter-spacing: .34em; line-height: 1.7; text-transform: uppercase; color: #cfc6b6; }
.ut-title { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .18em; font-family: var(--ut-display, var(--ut-serif)); font-weight: 900; font-size: var(--ut-title-size); line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.ut-t1 { color: #f5efe6; background: linear-gradient(180deg, #fff 0%, #ece4d8 42%, var(--ut-t-end, #a89c8c) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 rgba(0,0,0,.6)) drop-shadow(0 0 24px rgb(var(--ut-red-rgb) / .35)); }
.ut-red-first .ut-t1:first-child::first-letter { color: var(--ut-red); -webkit-text-fill-color: var(--ut-red); }
.ut-t2 { font-size: .42em; color: var(--ut-red); letter-spacing: .08em; }
.ut-jp { display: block; margin: 6px 0 0; font-family: var(--ut-jpf, var(--f-jp)); font-size: clamp(30px, 3vw, 50px); font-weight: 900; color: var(--ut-red); letter-spacing: .06em; text-shadow: 0 0 22px rgb(var(--ut-red-rgb) / .55), 0 3px 0 #000; }
.ut-jp::after { content: ''; display: block; width: 300px; max-width: 70%; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--ut-red), transparent); }
.ut-tagline { margin: 22px 0 14px; font-family: var(--ut-serif); font-size: 13.5px; letter-spacing: .24em; line-height: 1.75; text-transform: uppercase; color: #e9e1d2; }
.ut-intro { max-width: 470px; margin: 0 0 28px; color: var(--tx2); font-size: 15px; }
.ut-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 28px; margin: 38px 0 0; padding: 0; }
.ut-trust li { display: flex; align-items: center; gap: 10px; font-size: 11.5px; line-height: 1.35; color: var(--tx2); }
.ut-trust i { font-size: 18px; color: #e9e1d2; opacity: .9; }
.ut-hero-side { position: absolute; right: max(var(--gutter, 26px), calc((100vw - 1760px) / 2)); top: 52%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.ut-vertical { writing-mode: vertical-rl; max-height: 420px; font-family: var(--ut-jpf, var(--f-jp)); font-size: 46px; color: #f3ece0; letter-spacing: .1em; text-shadow: 0 0 22px rgb(var(--ut-red-rgb) / .6), 0 2px 6px #000; }
.ut-hero-side p { margin: 0; font-family: var(--ut-serif); font-size: 11.5px; letter-spacing: .2em; line-height: 1.6; text-transform: uppercase; color: #d8cfbf; text-shadow: 0 2px 10px #000; }

/* ---------- Category tiles ---------- */
.ut-tiles-section { position: relative; z-index: 2; padding: 22px 0; background: linear-gradient(180deg, var(--ut-bg), #120c0b 50%, var(--ut-bg)); border-top: 1px solid rgb(var(--ut-red-rgb) / .35); border-bottom: 1px solid rgb(var(--ut-red-rgb) / .35); }
.ut-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.ut-tile { position: relative; aspect-ratio: 1.12; border: 1px solid rgb(var(--ut-gold-rgb) / .28); border-radius: 4px; overflow: hidden; background: #140f0e; box-shadow: inset 0 0 0 4px rgba(0,0,0,.6); transition: border-color .3s, transform .3s, box-shadow .3s; }
.ut-tile::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgb(var(--ut-gold-rgb) / .18); z-index: 2; pointer-events: none; transition: border-color .3s; }
.ut-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.82); transition: transform .7s, filter .4s; }
.ut-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.88)); }
.ut-tile-label { position: absolute; left: 16px; bottom: 14px; z-index: 3; display: flex; flex-direction: column; gap: 2px; }
.ut-tile-label strong { font-family: var(--ut-head); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #f3ece0; line-height: 1.15; }
.ut-tile-label em { font-style: normal; font-size: 11px; color: var(--muted); }
.ut-tile > i { position: absolute; right: 14px; bottom: 16px; z-index: 3; color: #f3ece0; font-size: 13px; transition: transform .25s, color .25s; }
.ut-tile:hover, .ut-tile.is-active { border-color: var(--ut-red); box-shadow: inset 0 0 0 4px rgba(0,0,0,.6), 0 0 0 1px rgb(var(--ut-red-rgb) / .5), 0 18px 40px -16px rgb(var(--ut-red-rgb) / .7); }
.ut-tile:hover::before, .ut-tile.is-active::before { border-color: rgb(var(--ut-red-rgb) / .6); }
.ut-tile:hover img, .ut-tile.is-active img { filter: saturate(1) brightness(.95); }
.ut-tile:hover img { transform: scale(1.06); }
.ut-tile:hover > i { transform: translateX(4px); color: var(--ut-red); }
.ut-tiles:hover .ut-tile.is-active:not(:hover) { border-color: rgb(var(--ut-gold-rgb) / .28); box-shadow: inset 0 0 0 4px rgba(0,0,0,.6); }
.ut-tiles:hover .ut-tile.is-active:not(:hover) img { filter: saturate(.85) brightness(.82); }

/* ---------- Figurines showcase ---------- */
.ut-show { position: relative; padding-bottom: 46px; background: var(--ut-bg); }
.ut-stage { position: relative; aspect-ratio: 2752 / 1230; max-height: 880px; min-height: 460px; background-size: cover; background-position: center 45%; overflow: hidden; }
@media (min-width: 1700px) { .ut-stage { aspect-ratio: 2752 / 1100; } }
.ut-stage-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--ut-ink), .92) 0%, rgba(var(--ut-ink), .55) 30%, transparent 46%), linear-gradient(180deg, var(--ut-bg) 0%, transparent 16%, transparent 72%, var(--ut-bg) 100%); }
.ut-stage-copy { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: flex-start; gap: 22px; }
.ut-emblem { width: 78px; height: auto; flex: none; filter: drop-shadow(0 0 16px rgb(var(--ut-red-rgb) / .55)); }
.ut-plaque { position: absolute; left: clamp(125px, var(--x), calc(100% - 125px)); bottom: 3%; transform: translateX(-50%); width: 230px; padding: 10px 14px; background: linear-gradient(180deg, rgba(20, 14, 12, .92), rgba(10, 8, 8, .92)); border: 1px solid rgb(var(--ut-gold-rgb) / .45); border-radius: 3px; box-shadow: 0 16px 40px -10px #000; text-align: left; transition: border-color .25s, transform .25s; }
.ut-plaque:hover { border-color: var(--ut-red); transform: translateX(-50%) translateY(-4px); }
.ut-plaque strong { display: block; font-family: var(--ut-head); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: #f3ece0; }
.ut-plaque span { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ut-gold); margin-top: 2px; }
.ut-plaque .ut-plaque-ed { display: none; }
.ut-plaque b { display: block; text-align: right; margin-top: -4px; line-height: 1; }
.ut-plaque em { display: block; margin: 4px 0 2px; font-family: var(--f-script); font-style: normal; font-size: 15px; line-height: 1.25; color: #e9e1d2; }
.ut-plaque b { font-family: var(--f-impact); font-weight: 400; font-size: 20px; color: var(--ut-red); letter-spacing: .02em; }

.ut-phares { position: relative; margin-top: -34px; z-index: 2; }
.ut-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ut-arrows { display: flex; gap: 8px; }
.ut-arrows button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(var(--ut-ink), .7); color: #f3ece0; display: grid; place-items: center; transition: .2s; }
.ut-arrows button:hover { border-color: var(--ut-red); background: var(--ut-red); }
.ut-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 14px) / 6); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 16px; }
.ut-rail::-webkit-scrollbar { display: none; }
.ut-phares .ut-link { float: right; margin-top: 4px; }

/* carte figurine compacte */
.ut-card.product-card { scroll-snap-align: start; border-radius: 4px; border: 1px solid rgb(var(--ut-gold-rgb) / .2); background: linear-gradient(180deg, #171211, #100c0b); }
.ut-card.product-card:hover { border-color: rgb(var(--ut-red-rgb) / .75); box-shadow: 0 20px 40px -20px rgb(var(--ut-red-rgb) / .7); transform: translateY(-4px); }
.ut-card-media { position: relative; display: block; aspect-ratio: 1.15; overflow: hidden; background: #0d0a09; }
.ut-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.ut-card:hover .ut-card-media img { transform: scale(1.06); }
.ut-badge { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; background: var(--ut-gold); color: #1a1310; }
.ut-badge.is-promo { background: var(--ut-red); color: #fff; }
.ut-badge.is-new { background: #2f8f4e; color: #fff; }
.ut-card .wish-btn { top: 8px; right: 8px; width: 32px; height: 32px; }
.ut-card-body { padding: 12px 12px 12px; display: flex; flex-direction: column; flex: 1; }
.ut-card-name { font-weight: 600; font-size: 14px; color: #f3ece0; line-height: 1.25; }
.ut-card-sub { margin-top: 2px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ut-card-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.ut-price { display: flex; flex-direction: column; line-height: 1.05; }
.ut-price s { font-size: 11px; color: var(--muted); }
.ut-price strong { font-family: var(--f-impact); font-weight: 400; font-size: 21px; color: var(--ut-red); letter-spacing: .02em; }
.ut-rate { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.ut-rate .stars { font-size: 10px; color: var(--ut-gold); }
.ut-card .add-btn { width: 36px; height: 36px; border-radius: 4px; background: var(--ut-red); }

/* ---------- Triptych ---------- */
.ut-tri-section { padding: 30px 0 50px; clear: both; }
.ut-tri { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 16px; }
.ut-panel { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border: 1px solid rgb(var(--ut-gold-rgb) / .3); border-radius: 4px; background: radial-gradient(120% 80% at 50% 0%, rgb(var(--ut-red-rgb) / .08), transparent 60%), linear-gradient(180deg, #151010, #0d0a0a); box-shadow: inset 0 0 0 4px rgba(0,0,0,.55); transition: border-color .3s, box-shadow .3s; }
.ut-panel::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgb(var(--ut-gold-rgb) / .14); pointer-events: none; }
.ut-panel:hover { border-color: rgb(var(--ut-red-rgb) / .7); box-shadow: inset 0 0 0 4px rgba(0,0,0,.55), 0 22px 50px -24px rgb(var(--ut-red-rgb) / .7); }
.ut-panel header { display: flex; align-items: flex-start; gap: 12px; }
.ut-panel header img { width: 30px; height: auto; margin-top: 2px; }
.ut-panel header p { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ut-panel header.is-center { justify-content: center; text-align: center; }
.ut-panel-main .ut-h3 { font-size: 19px; }
.ut-panel-media { position: relative; flex: 1; min-height: 240px; border-radius: 3px; overflow: hidden; background: #0d0a09; }
.ut-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.ut-panel:hover .ut-panel-media img { transform: scale(1.04); }
.ut-panel-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.85)); }
.ut-panel-media.big { min-height: 300px; }
.ut-panel-media blockquote { position: absolute; left: 18px; top: 16px; z-index: 2; margin: 0; max-width: 46%; font-family: var(--ut-serif); font-size: 12.5px; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: #e9e1d2; text-shadow: 0 2px 10px #000; }
.ut-panel-tag { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.ut-panel-tag.right { left: auto; align-items: flex-end; text-align: right; max-width: 60%; }
.ut-panel-tag strong { font-size: 14px; font-weight: 600; color: #f3ece0; line-height: 1.25; }
.ut-panel-tag span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ut-gold); }
.ut-panel-tag b { font-family: var(--f-impact); font-weight: 400; font-size: 24px; color: var(--ut-red); letter-spacing: .02em; }
.ut-panel-tag s { font-size: 11px; color: var(--muted); }
.ut-badges { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tx2); }
.ut-badges i { color: var(--ut-gold); margin-right: 4px; }
.ut-panel > .ut-btn { align-self: center; }

/* ---------- Brand strip ---------- */
.ut-strip { border-top: 1px solid rgb(var(--ut-gold-rgb) / .2); border-bottom: 1px solid rgb(var(--ut-gold-rgb) / .2); background: linear-gradient(90deg, var(--ut-bg), #140d0c 50%, var(--ut-bg)); }
.ut-strip-inner { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 40px; padding: 22px 0; }
.ut-strip-item { display: flex; align-items: center; gap: 14px; font-size: 11px; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; color: var(--tx2); }
.ut-strip-item i { font-size: 30px; color: var(--ut-gold); }
.ut-strip-item:nth-child(2) i { color: var(--ut-red); }
.ut-strip-logo { justify-self: center; text-align: center; font-family: var(--f-impact); font-size: 24px; letter-spacing: .04em; color: #f3ece0; }
.ut-strip-logo b { color: var(--ut-red); font-weight: 400; }
.ut-strip-logo span { display: block; font-family: var(--f-body); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.ut-strip blockquote { margin: 0; font-family: var(--f-script); font-size: 17px; line-height: 1.35; color: #e9e1d2; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .ut-rail { grid-auto-columns: calc((100% - 4 * 14px) / 5); }
  .ut-plaque { width: 200px; }
  .ut-plaque em { font-size: 13px; }
}
@media (max-width: 1200px) { .ut-hero-side, .ut-plaque { display: none; } .ut-phares { margin-top: -10px; } .ut-tiles { gap: 10px; } .ut-tile-label strong { font-size: 12px; } }
@media (max-width: 1100px) {
  .ut-tri { grid-template-columns: 1fr 1fr; }
  .ut-panel-main { grid-column: 1 / -1; order: -1; }
  .ut-rail { grid-auto-columns: calc((100% - 3 * 14px) / 4); }
  .ut-strip-inner { grid-template-columns: 1fr 1fr; gap: 18px; }
  .ut-strip-logo { justify-self: start; text-align: left; }
}
@media (max-width: 980px) { .ut-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .ut-hero { min-height: 0; }
  .ut-hero-veil { background: linear-gradient(180deg, rgba(var(--ut-ink), .55), rgba(var(--ut-ink), .82) 45%, var(--ut-bg)); }
  .ut-hero-side { display: none; }
  .ut-stage { aspect-ratio: auto; min-height: 0; height: auto; padding: 40px 0 0; background-position: 70% center; }
  .ut-stage-veil { background: linear-gradient(180deg, var(--ut-bg) 0%, rgba(var(--ut-ink), .7) 40%, rgba(var(--ut-ink), .3) 70%, var(--ut-bg)); }
  .ut-stage-copy { position: relative; top: auto; transform: none; }
  .ut-stage::after { content: ''; display: block; height: 300px; }
  .ut-plaque { display: none; }
  .ut-phares { margin-top: 0; }
  .ut-rail { grid-auto-columns: 46%; }
}
@media (max-width: 640px) {
  .ut-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .ut-tri { grid-template-columns: 1fr; }
  .ut-trust { gap: 16px 22px; }
  .ut-strip-inner { grid-template-columns: 1fr; text-align: center; }
  .ut-strip-item { justify-content: center; }
  .ut-strip-logo { justify-self: center; text-align: center; }
  .ut-strip blockquote { text-align: center; }
  .ut-emblem { width: 54px; }
  .ut-panel-tag.right { max-width: none; left: 14px; align-items: flex-start; text-align: left; }
  .ut-panel-media blockquote { max-width: 80%; }
}
@media (prefers-reduced-motion: reduce) { .ut-hero-bg { animation: none; } }

/* Mode clair : voir light.css (sections papier + îlots illustrés sombres) */

/* ============ Variante « bannière » (en-tête illustré, ex. Naruto) ============ */
.ut-banner { position: relative; overflow: hidden; isolation: isolate; padding: 34px 0 0; }
.ut-banner-bg { position: absolute; inset: 0 0 auto; height: min(100%, 64vw, 1020px); z-index: -3; background-size: cover; background-position: 60% 30%; animation: heroZoom 30s ease-in-out infinite alternate; }
.ut-banner-veil { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(var(--ut-ink), .96) 0%, rgba(var(--ut-ink), .78) 24%, rgba(var(--ut-ink), .2) 46%, transparent 62%, rgba(var(--ut-ink), .35) 88%, rgba(var(--ut-ink), .7) 100%),
  linear-gradient(180deg, rgba(var(--ut-ink), .55), transparent 18%, transparent 46%, rgba(var(--ut-ink), .82) 62%, var(--ut-bg) 78%); }
.ut-banner-head { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: clamp(380px, 31vw, 560px); }
.ut-banner-copy { max-width: 560px; }
.ut-banner .ut-crumbs { margin-bottom: 22px; }
.ut-banner-kicker { margin: 0 0 -6px 6px; font-family: var(--ut-head); font-size: 14px; letter-spacing: .6em; text-transform: uppercase; color: #e8dccb; }
.ut-banner-title { position: relative; display: inline-flex; align-items: flex-end; gap: 10px; margin: 0; font-family: 'Permanent Marker', var(--ut-display); font-weight: 400; font-size: clamp(76px, 8vw, 148px); line-height: 1; text-transform: uppercase; letter-spacing: .01em; transform: rotate(-4deg); transform-origin: left bottom; }
.ut-banner-title span { background: linear-gradient(180deg, #ffe08a 0%, #ffb23d 32%, #ff6a1a 62%, #c3200f 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #2a0703) drop-shadow(0 0 26px rgba(255, 98, 20, .55)); }
.ut-banner-title .ut-leaf { color: #ff7a1a; margin-bottom: 18px; filter: drop-shadow(0 0 10px rgba(255,120,30,.7)); }
.ut-banner-tag { margin: 20px 0 14px; font-family: var(--ut-head); font-size: 15px; font-weight: 700; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: #f3ece0; text-shadow: 0 2px 10px #000; }
.ut-banner-text { margin: 0 0 26px; max-width: 520px; font-size: 14.5px; color: #d9cfc1; text-shadow: 0 1px 6px #000; }
.ut-banner-text strong { color: #fff; font-weight: 700; letter-spacing: .04em; }
.ut-banner-text strong b { color: var(--ut-gold); }
.ut-banner-ctas { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ut-btn-frame { padding: 15px 28px; border: 2px solid #ff4a2a; background: linear-gradient(180deg, rgba(200, 30, 20, .55), rgba(80, 8, 4, .75)); box-shadow: 0 0 24px rgba(255, 60, 30, .35), inset 0 0 14px rgba(255, 80, 40, .25); }
.ut-play { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--ut-red); }
.ut-play span { display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ut-red); border-radius: 50%; color: #fff; font-size: 13px; background: rgba(0,0,0,.4); transition: background .2s, transform .2s; }
.ut-play:hover span { background: var(--ut-red); transform: scale(1.06); }
.ut-banner-quote { align-self: center; max-width: 330px; margin: 120px 0 0; font-family: 'Kaushan Script', cursive; font-size: clamp(17px, 1.35vw, 22px); line-height: 1.45; color: #f3ece0; text-align: right; text-shadow: 0 2px 12px #000, 0 0 2px #000; }
.ut-banner-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: .85em; color: #e8dccb; }
.ut-banner-side { position: absolute; left: max(14px, calc(var(--gutter, 26px) / 2 - 22px)); top: 120px; display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 1; }
.ut-banner-side .ut-vertical { font-size: 38px; color: #f3ece0; }
.ut-banner-side-line { width: 1px; height: 46px; background: linear-gradient(#f3ece0, transparent); }
.ut-banner-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-family: var(--ut-head); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #cfc4b4; }
.has-banner .ut-banner-side { display: none; }
@media (min-width: 1500px) { .has-banner .ut-banner-side { display: flex; } }

/* barre des personnages */
.ut-chips { position: relative; display: flex; gap: 10px; padding: 12px 18px; margin-top: 10px; border: 1px solid rgba(201, 138, 72, .45); border-radius: 6px; background: linear-gradient(180deg, rgba(40, 18, 10, .9), rgba(16, 8, 5, .95)); box-shadow: 0 18px 40px -20px #000, inset 0 0 0 4px rgba(0,0,0,.45); overflow-x: auto; scrollbar-width: none; }
.ut-chips::-webkit-scrollbar { display: none; }
.ut-chips::before, .ut-chips::after { content: ''; position: absolute; top: 50%; width: 10px; height: 26px; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(90deg, #6b3a1a, #c98a48, #6b3a1a); }
.ut-chips::before { left: 4px; } .ut-chips::after { right: 4px; }
.ut-chip { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 10px; min-width: 112px; padding: 6px 14px 6px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 4px; background: rgba(0,0,0,.45); font-size: 13px; color: #e9e1d2; transition: border-color .2s, background .2s, transform .2s; }
.ut-chip img { width: 34px; height: 34px; border-radius: 3px; object-fit: cover; object-position: 50% 12%; }
.ut-chip > i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--ut-gold); font-size: 14px; }
.ut-chip.is-all { justify-content: center; padding: 6px 18px; border-color: #ff4a2a; background: linear-gradient(180deg, rgba(200, 30, 20, .5), rgba(80, 8, 4, .7)); color: #fff; font-weight: 600; }
.ut-chip.is-all .ut-leaf { color: #ff6a2a; }
.ut-chip:hover { border-color: var(--ut-red); background: rgb(var(--ut-red-rgb) / .14); transform: translateY(-2px); }

/* 3 vitrines */
.ut-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.ut-feat { position: relative; display: grid; grid-template-columns: 1fr 44%; align-items: center; min-height: 230px; padding: 24px 0 24px 24px; border: 1px solid rgba(201, 138, 72, .4); border-radius: 6px; overflow: hidden; background: radial-gradient(circle at 75% 60%, rgb(var(--ut-red-rgb) / .22), transparent 60%), linear-gradient(160deg, #1d0f0a, #0d0705); box-shadow: inset 0 0 0 5px rgba(0,0,0,.45); transition: border-color .3s, transform .3s, box-shadow .3s; }
.ut-feat::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(201, 138, 72, .18); border-radius: 4px; pointer-events: none; }
.ut-feat:hover { border-color: var(--ut-red); transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgb(var(--ut-red-rgb) / .8), inset 0 0 0 5px rgba(0,0,0,.45); }
.ut-feat-copy { position: relative; z-index: 1; }
.ut-feat-kicker { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ut-red); }
.ut-feat-title { margin: 0 0 10px; font-family: var(--ut-head); font-size: clamp(16px, 1.3vw, 21px); font-weight: 900; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; color: #f6efe4; }
.ut-feat-title small { display: block; font-size: .78em; color: #e9e1d2; }
.ut-feat p { margin: 0 0 18px; font-size: 13px; color: #c9bfb1; }
.ut-feat img { width: 100%; height: 100%; max-height: 220px; object-fit: cover; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 52%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 52%, #000 52%, transparent 100%); transition: transform .6s; }
.ut-feat:hover img { transform: scale(1.06) rotate(-1deg); }

/* garanties */
.ut-banner-trust { list-style: none; display: grid; grid-template-columns: repeat(4, auto) 1fr; align-items: center; gap: 0; margin: 26px 0 0; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.08); }
.ut-banner-trust li { display: flex; align-items: center; gap: 14px; padding: 0 28px; font-size: 11.5px; color: var(--tx2); border-right: 1px solid rgba(255,255,255,.1); }
.ut-banner-trust li:first-child { padding-left: 0; }
.ut-banner-trust i { font-size: 22px; color: #e9e1d2; }
.ut-banner-trust strong { display: block; font-size: 12.5px; color: #f3ece0; font-weight: 600; }
.ut-banner-trust .ut-cry { justify-self: end; border: 0; padding-right: 0; font-family: 'Kaushan Script', cursive; font-size: 22px; color: var(--ut-gold); letter-spacing: .04em; }
.ut-banner-trust .ut-cry .ut-leaf { color: #ff7a1a; }
.has-banner .ut-tiles-section { border-top: 0; }

@media (max-width: 1200px) {
  .ut-banner-trust { grid-template-columns: repeat(2, 1fr); gap: 16px 0; }
  .ut-banner-trust li:nth-child(odd) { padding-left: 0; }
  .ut-banner-trust .ut-cry { grid-column: 1 / -1; justify-self: center; }
  .ut-feat { grid-template-columns: 1fr 40%; }
}
@media (max-width: 980px) {
  .ut-banner-quote { display: none; }
  .ut-feats { grid-template-columns: 1fr; }
  .ut-feat { min-height: 190px; }
  .ut-feat img { max-height: 170px; }
}
@media (max-width: 860px) {
  .ut-banner-bg { height: 760px; background-size: auto 560px; background-repeat: no-repeat; background-position: 62% 0; -webkit-mask-image: linear-gradient(#000 62%, transparent 74%); mask-image: linear-gradient(#000 62%, transparent 74%); }
  .ut-banner-text { font-size: 14px; }
  .ut-banner-veil { background: linear-gradient(180deg, rgba(var(--ut-ink), .35), rgba(var(--ut-ink), .55) 30%, rgba(var(--ut-ink), .9) 55%, var(--ut-bg) 70%); }
  .ut-banner-head { min-height: 0; padding-top: 150px; }
}
@media (max-width: 640px) {
  .ut-banner-title { font-size: 74px; }
  .ut-banner-trust { grid-template-columns: 1fr; }
  .ut-banner-trust li { padding: 0; border: 0; }
  .ut-chip { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .ut-banner-bg { animation: none; } }

/* ============ Collection en vedette (carrousel bannière) ============ */
.ut-spot-section { padding: 26px 0 50px; }
.ut-spot { position: relative; height: clamp(260px, 22vw, 380px); border: 1px solid rgb(var(--ut-red-rgb) / .35); border-radius: 8px; overflow: hidden; background: #0c0705; box-shadow: 0 30px 60px -30px #000, 0 0 40px -18px rgb(var(--ut-red-rgb) / .5); }
.ut-spot-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(24px, 4vw, 64px); opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s; }
.ut-spot-slide.is-on { opacity: 1; visibility: visible; z-index: 1; }
.ut-spot-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: 60% 45%; transform: scale(1.04); transition: transform 7s ease-out; }
.ut-spot-slide.is-on .ut-spot-bg { transform: scale(1); }
.ut-spot-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,4,3,.94) 0%, rgba(8,4,3,.78) 26%, rgba(8,4,3,.15) 50%, transparent 66%, rgba(8,4,3,.55) 84%, rgba(8,4,3,.85) 100%); }
.ut-spot-copy { position: relative; max-width: 460px; margin-bottom: 26px; }
.ut-spot-kicker { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #ff3a2a; }
.ut-spot-title { margin: 0 0 14px; font-family: 'Permanent Marker', var(--ut-display); font-weight: 400; font-size: clamp(36px, 3.6vw, 60px); line-height: 1.02; text-transform: uppercase; color: #f6f1ea; text-shadow: 0 3px 0 rgba(0,0,0,.6); transform: rotate(-2deg); transform-origin: left; }
.ut-spot-title em { font-style: normal; background: linear-gradient(180deg, #ffe27a, #ffa21f 45%, #ff5a14); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 #2a0703); }
.ut-spot-copy p { margin: 0 0 22px; max-width: 400px; font-size: 15px; color: #eadfd1; text-shadow: 0 1px 6px #000; }
.ut-spot-btn { display: inline-flex; align-items: center; gap: 14px; padding: 14px 26px; border-radius: 6px; background: linear-gradient(180deg, #ff3a2a, #d51e12); color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 12px 26px -12px rgba(255,40,20,.8); transition: transform .2s, filter .2s; }
.ut-spot-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.ut-spot-btn i { transition: transform .2s; }
.ut-spot-btn:hover i { transform: translateX(4px); }
.ut-spot-quote { position: relative; max-width: 260px; margin: 0; font-size: 14px; line-height: 1.6; color: #f3ece0; text-shadow: 0 2px 10px #000; }
.ut-spot-quote cite { display: block; margin-top: 14px; font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #cfc4b4; }
.ut-spot-dots { position: absolute; left: clamp(24px, 4vw, 64px); bottom: 18px; z-index: 3; display: flex; gap: 8px; }
.ut-spot-dots button { width: 22px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.28); cursor: pointer; transition: background .3s, width .3s; }
.ut-spot-dots button.is-on { width: 30px; background: #ff3a2a; }
@media (max-width: 860px) {
  .ut-spot { height: 380px; }
  .ut-spot-slide { align-items: flex-end; padding-bottom: 54px; }
  .ut-spot-bg { background-position: 72% 40% !important; }
  .ut-spot-bg::after { background: linear-gradient(180deg, transparent 10%, rgba(8,4,3,.82) 42%, rgba(8,4,3,.96)); }
  .ut-spot-copy { margin-bottom: 0; }
  .ut-spot-quote { display: none; }
  .ut-spot-copy p { font-size: 14px; }
}

/* ============ Sagas « choisis ton camp » ============ */
.ut-sagas-section { position: relative; z-index: 2; padding: 22px 0 6px; background: var(--ut-bg); }
.ut-sagas-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 12px; flex-wrap: wrap; }
.ut-sagas-head h2 { margin: 0; font-family: var(--ut-head); font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ut-gold); }
.ut-sagas-head p { margin: 0; font-size: 12.5px; color: var(--muted); }
.ut-sagas { display: grid; grid-template-columns: repeat(5, 1fr) 150px; gap: 12px; }
.ut-saga { position: relative; aspect-ratio: 2.1; border: 1px solid rgb(var(--ut-gold-rgb) / .3); border-radius: 6px; overflow: hidden; background: #140e0a; transition: border-color .3s, transform .3s, box-shadow .3s; }
.ut-saga img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: saturate(.9) brightness(.8); transition: transform .7s, filter .4s; }
.ut-saga::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.25) 60%, transparent), linear-gradient(0deg, rgba(0,0,0,.7), transparent 60%); }
.ut-saga-label { position: absolute; left: 14px; bottom: 12px; z-index: 2; display: flex; flex-direction: column; gap: 2px; }
.ut-saga-label strong { font-family: var(--ut-head); font-size: 15px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ut-saga-label em { font-style: normal; font-size: 11.5px; color: #d6ccbd; }
.ut-saga > i { position: absolute; right: 12px; bottom: 14px; z-index: 2; color: var(--ut-gold); font-size: 12px; transition: transform .2s; }
.ut-saga:hover, .ut-saga.is-active { border-color: var(--ut-gold); box-shadow: 0 0 0 1px var(--ut-gold), 0 16px 34px -18px rgb(var(--ut-gold-rgb) / .7); }
.ut-saga:hover { transform: translateY(-3px); }
.ut-saga:hover img { transform: scale(1.07); filter: saturate(1.05) brightness(.95); }
.ut-saga:hover > i { transform: translateX(3px); }
.ut-saga-all { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed rgb(var(--ut-gold-rgb) / .45); border-radius: 6px; font-family: var(--ut-display); font-size: 22px; line-height: 1.05; text-align: center; text-transform: uppercase; color: #f3ece0; transition: background .3s, border-color .3s; }
.ut-saga-all i { font-size: 14px; color: var(--ut-gold); }
.ut-saga-all:hover { background: rgb(var(--ut-gold-rgb) / .1); border-color: var(--ut-gold); }
@media (max-width: 1100px) { .ut-sagas { grid-template-columns: repeat(3, 1fr); } .ut-saga-all { flex-direction: row; } }
@media (max-width: 640px) {
  .ut-sagas { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ut-saga { flex: 0 0 64%; scroll-snap-align: start; }
  .ut-saga-all { flex: 0 0 40%; flex-direction: column; font-size: 18px; }
}

/* ============ Affiche Wanted (hero) ============ */
.ut-wanted-wrap { gap: 30px; }
.ut-wanted { width: 200px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; background: radial-gradient(circle at 50% 40%, #f1dfb4, #d9bd84 70%, #b8935a); color: #3b2414; font-family: var(--ut-display); text-transform: uppercase; box-shadow: 0 24px 40px -14px #000, inset 0 0 26px rgba(90, 50, 15, .55); transform: rotate(3deg); clip-path: polygon(0 2%, 6% 0, 40% 1.5%, 70% 0, 100% 1%, 99% 30%, 100% 62%, 98.5% 100%, 60% 98.5%, 30% 100%, 1% 99%, 0 70%, 1.5% 35%); transition: transform .4s; }
.ut-wanted:hover { transform: rotate(0) scale(1.03); }
.ut-wanted strong { font-size: 44px; line-height: .9; letter-spacing: .02em; }
.ut-wanted img { width: 100%; aspect-ratio: 1.05; margin: 8px 0 6px; object-fit: cover; object-position: 50% 15%; border: 2px solid #5a3a1e; filter: sepia(.35) contrast(1.05); }
.ut-wanted-doa { font-size: 13px; letter-spacing: .1em; }
.ut-wanted b { font-size: 19px; line-height: 1.1; text-align: center; }
.ut-wanted em { font-style: normal; font-size: 18px; letter-spacing: .02em; }
.ut-wanted small { margin-top: 4px; font-size: 11px; letter-spacing: .3em; opacity: .8; }

/* ============ Naruto : galerie de personnages (cartes portrait) ============ */
.ut-roster { position: relative; margin-top: 12px; padding: 12px 40px; border: 1px solid rgba(201, 138, 72, .45); border-radius: 8px; background: linear-gradient(180deg, rgba(40, 18, 10, .92), rgba(14, 7, 4, .96)); box-shadow: 0 18px 40px -20px #000, inset 0 0 0 4px rgba(0, 0, 0, .45); }
.ut-roster-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 6 * 10px) / 7); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ut-roster-track::-webkit-scrollbar { display: none; }
.ut-roster-track li { scroll-snap-align: start; }
.ut-rcard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1 / 1.02; padding-top: 0; border: 1px solid rgba(255, 255, 255, .1); border-radius: 6px; overflow: hidden; background: #120905; transition: border-color .25s, transform .25s, box-shadow .25s; }
.ut-rcard img { position: absolute; left: 0; top: 0; z-index: -2; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: 50% 16%; filter: saturate(.85) brightness(.82); transition: transform .5s ease, filter .3s; }
.ut-rcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #0d0604 0, #0d0604 34px, rgba(13, 6, 4, .55) 34px, transparent 62px); }
.ut-rcard-jp { position: absolute; top: 6px; right: 7px; writing-mode: vertical-rl; font-family: var(--f-jp); font-size: 11px; font-weight: 900; letter-spacing: .1em; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 6px #000; }
.ut-rcard-count { position: absolute; top: 7px; left: 7px; padding: 2px 7px; border-radius: 3px; background: rgba(0, 0, 0, .6); font-size: 10.5px; color: #e9e1d2; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.ut-rcard-name { position: relative; display: flex; flex-direction: column; justify-content: center; height: 34px; padding: 0 8px; border-top: 1px solid rgba(201, 138, 72, .25); text-align: center; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 2px 8px #000; }
.ut-rcard-name::after { content: ''; display: block; position: absolute; left: 50%; bottom: 3px; translate: -50% 0; width: 18px; height: 2px; border-radius: 2px; background: var(--ut-red); transition: width .3s; }
.ut-rcard:hover, .ut-rcard:focus-visible { border-color: rgba(255, 120, 60, .7); transform: translateY(-3px); }
.ut-rcard:hover img, .ut-rcard:focus-visible img { transform: scale(1.08); filter: saturate(1.05) brightness(1); }
.ut-rcard:hover .ut-rcard-count, .ut-rcard:focus-visible .ut-rcard-count { opacity: 1; transform: none; }
.ut-rcard:hover .ut-rcard-name::after { width: 40px; }
.ut-rcard.is-on { border: 2px solid #ff5a2a; box-shadow: 0 0 0 1px rgba(255, 90, 42, .35), 0 0 26px -4px rgba(255, 70, 30, .85), inset 0 0 18px rgba(255, 70, 30, .35); }
.ut-rcard.is-on img { filter: saturate(1.05) brightness(1); }
.ut-rcard.is-on .ut-rcard-name { background: linear-gradient(180deg, rgba(200, 40, 20, .55), rgba(90, 12, 4, .75)); }
.ut-roster-nav { position: absolute; top: 50%; z-index: 2; width: 26px; height: 46px; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid rgba(201, 138, 72, .55); border-radius: 4px; background: linear-gradient(180deg, #5a2e14, #2a1408); color: #f0c48a; font-size: 12px; cursor: pointer; transition: background .2s, color .2s; }
.ut-roster-nav:hover { background: linear-gradient(180deg, #c0441e, #6e1a0a); color: #fff; }
.ut-roster-nav.prev { left: 7px; } .ut-roster-nav.next { right: 7px; }
.ut-roster-nav:disabled { opacity: .35; cursor: default; }
@media (max-width: 1199px) { .ut-roster-track { grid-auto-columns: calc((100% - 4 * 10px) / 5); } }
@media (max-width: 640px) {
  .ut-roster { padding: 10px 34px; }
  .ut-roster-track { grid-auto-columns: calc((100% - 2 * 8px) / 3); gap: 8px; }
  .ut-rcard { aspect-ratio: 1 / 1.1; }
  .ut-rcard-count { display: none; }
  .ut-roster-nav { width: 22px; height: 40px; } .ut-roster-nav.prev { left: 5px; } .ut-roster-nav.next { right: 5px; }
}

/* Titre en logo image (ex. L'Attaque des Titans) */
.ut-title-img { display: block; margin: 4px 0 18px -1.2%; }
.ut-title-img img { display: block; width: min(640px, 46vw); height: auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .75)) drop-shadow(0 0 30px rgb(var(--ut-red-rgb) / .25)); }
.ut-title-img::after { content: ''; display: block; width: 300px; max-width: 60%; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--ut-red), transparent); }
@media (max-width: 980px) { .ut-title-img img { width: min(560px, 88vw); } }

/* =================== Triptyque « cadre orné » (L'Attaque des Titans) =================== */
.ot-section { padding: 34px 0 56px; clear: both; }
.ot-grid { display: grid; grid-template-columns: 1fr 1.32fr 1fr; gap: 14px; }
.ot-panel { --gc: #b8925a; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 400px; padding: 26px 26px 22px; overflow: hidden; color: #efe6d6;
  background: #0b0908; border: 1px solid rgba(184, 146, 90, .55); outline: 1px solid rgba(0, 0, 0, .9); outline-offset: -5px;
  box-shadow: inset 0 0 0 6px #0b0908, inset 0 0 0 7px rgba(184, 146, 90, .28), inset 0 0 60px rgba(0, 0, 0, .9), 0 20px 50px -20px rgba(0, 0, 0, .9);
  transition: transform .4s, box-shadow .4s, border-color .4s; }
.ot-panel:hover { transform: translateY(-4px); border-color: rgba(229, 50, 45, .7); box-shadow: inset 0 0 0 6px #0b0908, inset 0 0 0 7px rgba(229, 50, 45, .35), inset 0 0 60px rgba(0, 0, 0, .9), 0 28px 60px -22px rgba(229, 50, 45, .55); }
.ot-bg { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; transition: transform 1s ease; }
.ot-bg::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(8, 6, 5, .92) 0%, rgba(8, 6, 5, .35) 26%, rgba(8, 6, 5, .05) 52%, rgba(8, 6, 5, .55) 78%, rgba(8, 6, 5, .95) 100%),
  radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7)); }
.ot-panel:hover .ot-bg { transform: scale(1.05); }
/* grain / braises */
.ot-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: radial-gradient(1.5px 1.5px at 18% 72%, #ff7a3a, transparent), radial-gradient(1.2px 1.2px at 74% 64%, #ffb067, transparent), radial-gradient(1px 1px at 46% 84%, #ff6a2a, transparent), radial-gradient(1.4px 1.4px at 88% 80%, #ff8a4a, transparent); }

/* coins & bordures filigranés */
.ot-corner { position: absolute; z-index: 3; width: 58px; height: 58px; color: var(--gc); pointer-events: none; filter: drop-shadow(0 1px 1px #000); transition: color .4s; }
.ot-corner.tl { top: 4px; left: 4px; } .ot-corner.tr { top: 4px; right: 4px; transform: scaleX(-1); }
.ot-corner.bl { bottom: 4px; left: 4px; transform: scaleY(-1); } .ot-corner.br { bottom: 4px; right: 4px; transform: scale(-1); }
.ot-panel:hover .ot-corner { color: #e0b878; }
.ot-edge { position: absolute; z-index: 3; left: 50%; width: 120px; height: 10px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--gc) 2.6px, transparent 3px), linear-gradient(90deg, transparent, var(--gc) 30%, var(--gc) 70%, transparent) center / 100% 1px no-repeat; opacity: .8; }
.ot-edge.t { top: 1px; } .ot-edge.b { bottom: 1px; }

/* en-tête */
.ot-head { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.ot-head img { width: 34px; height: auto; margin-top: 2px; filter: drop-shadow(0 2px 4px #000); }
.ot-head h3 { margin: 0; font-family: var(--ut-serif); font-weight: 700; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.15; letter-spacing: .1em; text-transform: uppercase; color: #f3ead9; text-shadow: 0 2px 8px #000; }
.ot-head p { margin: 6px 0 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #c9bba3; text-shadow: 0 1px 6px #000; }
.ot-head.is-center { justify-content: center; text-align: center; }
.ot-gold { color: #e3c38a !important; letter-spacing: .14em !important; font-size: clamp(17px, 1.5vw, 22px) !important; }
.ot-gold em { font-style: normal; color: #f3ead9; }
.ot-crest { position: absolute; z-index: 3; top: -1px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 44px; height: 30px; background: #0b0908; border: 1px solid rgba(184, 146, 90, .55); border-top: 0; border-radius: 0 0 22px 22px; }
.ot-crest img { width: 18px; height: auto; }
.ot-main .ot-head { margin-top: 10px; }

/* citation & signature (panneau central) */
.ot-quote { position: relative; margin: 26px 0 0; max-width: 42%; font-family: var(--ut-serif); font-size: clamp(13px, 1.05vw, 16px); line-height: 1.55; letter-spacing: .12em; text-transform: uppercase; color: #efe6d6; text-shadow: 0 2px 10px #000; }
.ot-sign { position: relative; margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 42%; }
.ot-sign i { font-size: 18px; color: #e3c38a; margin-left: 30px; filter: drop-shadow(0 0 8px rgba(227, 195, 138, .6)); }
.ot-sign b { font-family: var(--f-impact); font-weight: 400; font-size: 20px; letter-spacing: .06em; color: #f3ead9; }
.ot-sign span { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: #a8987f; margin-top: -3px; }

/* étiquette produit */
.ot-tag { position: relative; display: flex; flex-direction: column; gap: 3px; }
.ot-tag-right { margin: auto 0 18px auto; max-width: 52%; text-align: left; }
.ot-tag strong { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; text-shadow: 0 2px 8px #000; }
.ot-tag span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #d9c49c; }
.ot-price { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ot-price b { font-family: var(--f-impact); font-weight: 400; font-size: 26px; letter-spacing: .02em; color: var(--ut-red); text-shadow: 0 2px 10px rgba(0, 0, 0, .8); }
.ot-price s { font-size: 12px; color: #a8987f; }
.ot-cart.ot-cart { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: var(--ut-red); color: #fff; font-size: 15px; box-shadow: 0 8px 18px -6px rgba(229, 50, 45, .8); transition: transform .2s, filter .2s; }
.ot-cart.ot-cart:hover { transform: translateY(-2px); filter: brightness(1.12); }
.ot-tag-main { position: absolute; right: 30px; top: 46%; align-items: flex-end; text-align: right; max-width: 40%; }

/* badges + bouton */
.ot-badges { position: relative; list-style: none; margin: auto 0 14px; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #e9dfcd; text-shadow: 0 1px 6px #000; }
.ot-badges i { color: #e3c38a; margin-right: 6px; font-size: 13px; }
.ot-btn { position: relative; align-self: center; margin-top: auto; display: inline-flex; align-items: center; gap: 12px; padding: 11px 26px; border: 1px solid var(--ut-red); border-radius: 3px; background: rgba(10, 6, 6, .72); color: #f3ead9; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; backdrop-filter: blur(4px); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .5), 0 0 22px -6px rgba(229, 50, 45, .6); transition: background .3s, box-shadow .3s; }
.ot-btn::before, .ot-btn::after { content: ''; position: absolute; top: 50%; width: 5px; height: 5px; background: var(--ut-red); transform: translateY(-50%) rotate(45deg); }
.ot-btn::before { left: -3px; } .ot-btn::after { right: -3px; }
.ot-btn i { transition: transform .25s; }
.ot-panel:hover .ot-btn { background: var(--ut-red); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), 0 0 30px -4px rgba(229, 50, 45, .9); }
.ot-panel:hover .ot-btn i { transform: translateX(4px); }
.ot-main .ot-btn { margin-top: 0; }

@media (max-width: 1100px) {
  .ot-grid { grid-template-columns: 1fr 1fr; }
  .ot-main { grid-column: 1 / -1; order: -1; min-height: 440px; }
}
@media (max-width: 680px) {
  .ot-grid { grid-template-columns: 1fr; }
  .ot-panel { min-height: 380px; padding: 24px 20px 20px; }
  .ot-main { min-height: 520px; }
  .ot-quote, .ot-sign { max-width: 70%; }
  .ot-tag-main { position: relative; right: auto; top: auto; margin: 24px 0 14px auto; max-width: 70%; }
  .ot-tag-right { max-width: 70%; }
  .ot-badges { gap: 8px 16px; }
}
.ot-panel { min-height: 470px; }
.ot-grid > .ot-panel:first-child .ot-bg { background-position: 18% 60%; background-size: auto 112%; }
.ot-grid > .ot-panel:last-child .ot-bg { background-position: 40% 70%; background-size: auto 108%; }
.ot-main .ot-bg { background-position: 70% 60%; }
.ot-tag-right { max-width: 44%; margin-bottom: 26px; }
.ot-tag-main { top: auto; bottom: 150px; right: 34px; }
@media (max-width: 680px) { .ot-grid > .ot-panel .ot-bg { background-size: cover; } .ot-tag-main { bottom: auto; } }
.ot-tag-right, .ot-tag-main { padding: 12px 14px; background: linear-gradient(135deg, rgba(8, 6, 5, .82), rgba(8, 6, 5, .55)); border-left: 2px solid var(--ut-red); backdrop-filter: blur(3px); }
.ot-tag-main { border-left: 0; border-right: 2px solid var(--ut-red); }
.ot-tag span { color: #e3c38a; }
.ot-grid > .ot-panel:first-child .ot-bg { background-position: 0% 60%; }
.ot-tag-right { margin-right: -6px; }
.ot-price b { white-space: nowrap; }
.ot-tag-right { max-width: 50%; }
.ot-tag-right strong { font-size: 13.5px; }
@media (max-width: 680px) { .ot-tag-right { max-width: 62%; } }

/* =================== Tuiles catégories « cadre orné » =================== */
.ot-tiles-section { padding: 26px 0; background: radial-gradient(60% 120% at 50% 0%, rgba(229, 50, 45, .08), transparent 70%), linear-gradient(180deg, #0b0908, #120c0a 50%, #0b0908); border-top: 1px solid rgba(184, 146, 90, .25); border-bottom: 1px solid rgba(184, 146, 90, .25); }
.ot-tiles { --gc: #b8925a; position: relative; gap: 12px; padding: 18px; background: linear-gradient(180deg, rgba(20, 14, 11, .9), rgba(10, 8, 7, .95));
  border: 1px solid rgba(184, 146, 90, .5); box-shadow: inset 0 0 0 5px #0b0908, inset 0 0 0 6px rgba(184, 146, 90, .25), inset 0 0 50px rgba(0, 0, 0, .8), 0 20px 50px -24px #000; }
.ot-tiles > .ot-corner { width: 64px; height: 64px; }
.ot-tiles > .ot-edge { width: 180px; }
.ot-tiles .ut-tile { --gc: #a8844f; aspect-ratio: 1.08; border: 1px solid rgba(184, 146, 90, .45); border-radius: 2px; background: #0d0a09; box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .65), 0 10px 24px -14px #000; }
.ot-tiles .ut-tile::before { inset: 5px; border-color: rgba(184, 146, 90, .2); }
.ot-tiles .ut-tile .ot-corner { width: 26px; height: 26px; z-index: 4; color: var(--gc); }
.ot-tiles .ut-tile .ot-corner.tl { top: 2px; left: 2px; } .ot-tiles .ut-tile .ot-corner.tr { top: 2px; right: 2px; }
.ot-tiles .ut-tile .ot-corner.bl { bottom: 2px; left: 2px; } .ot-tiles .ut-tile .ot-corner.br { bottom: 2px; right: 2px; }
.ot-tiles .ut-tile img { filter: sepia(.25) saturate(.85) brightness(.78) contrast(1.05); }
.ot-tiles .ut-tile::after { background: linear-gradient(180deg, transparent 40%, rgba(6, 4, 3, .92)), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }
.ot-tiles .ut-tile-label { left: 16px; bottom: 16px; right: 40px; }
.ot-tiles .ut-tile-label strong { font-family: var(--f-impact); font-weight: 400; font-size: 18px; letter-spacing: .06em; line-height: 1; text-shadow: 0 2px 8px #000; }
.ot-tiles .ut-tile-label em { margin-top: 3px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #c9b48d; }
.ot-tiles .ut-tile > i { right: 16px; bottom: 18px; }
.ot-tiles .ut-tile:hover, .ot-tiles .ut-tile.is-active { --gc: #f0574f; border-color: var(--ut-red); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(229, 50, 45, .5), 0 0 30px -4px rgba(229, 50, 45, .6), 0 18px 40px -16px rgba(229, 50, 45, .7); }
.ot-tiles .ut-tile:hover img, .ot-tiles .ut-tile.is-active img { filter: sepia(0) saturate(1.05) brightness(.95); }
.ot-tiles .ut-tile.is-active::after { background: linear-gradient(180deg, rgba(229, 50, 45, .12), transparent 40%, rgba(6, 4, 3, .9)); }
.ot-tiles:hover .ut-tile.is-active:not(:hover) { --gc: #a8844f; border-color: rgba(184, 146, 90, .45); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .65), 0 10px 24px -14px #000; }
.ot-tiles:hover .ut-tile.is-active:not(:hover) img { filter: sepia(.25) saturate(.85) brightness(.78) contrast(1.05); }
@media (max-width: 980px) { .ot-tiles { padding: 14px; } .ot-tiles > .ot-corner { width: 44px; height: 44px; } }
@media (max-width: 640px) { .ot-tiles { padding: 12px; gap: 8px; } .ot-tiles .ut-tile-label strong { font-size: 15px; } .ot-tiles .ut-tile .ot-corner { width: 20px; height: 20px; } }
.ot-tiles .ut-tile > .ot-corner { position: absolute; display: block; }

/* =================== Naruto : cartes « thèmes » (Hokage, Team 7, Akatsuki…) =================== */
.nt-themes { position: relative; margin-top: 14px; padding: 14px 44px 22px; border: 1px solid rgba(201, 138, 72, .4); border-radius: 8px; background: linear-gradient(180deg, rgba(30, 14, 8, .9), rgba(12, 6, 4, .95)); box-shadow: inset 0 0 0 4px rgba(0, 0, 0, .45), 0 20px 40px -24px #000; }
.nt-track { grid-auto-columns: calc((100% - 5 * 12px) / 6); gap: 12px; }
.nt-card { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: flex-start; height: 100%; padding: 0; border: 1px solid rgba(201, 138, 72, .35); border-radius: 6px; background: #0e0705; overflow: hidden; }
.nt-card::after { display: none; }
.nt-img { position: relative; display: block; aspect-ratio: 1.45; overflow: hidden; }
.nt-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; z-index: 0; filter: saturate(.9) brightness(.85); transition: transform .6s, filter .4s; }
.nt-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 7, 5, .95)); }
.nt-jp { position: absolute; top: 8px; right: 8px; z-index: 2; writing-mode: vertical-rl; font-family: var(--f-jp); font-weight: 900; font-size: 12px; letter-spacing: .1em; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px #000; }
.nt-ico { position: relative; z-index: 2; align-self: center; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -19px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffb35a, #e0661a 60%, #9a3a0c); color: #fff; font-size: 14px; box-shadow: 0 0 0 3px #0e0705, 0 0 16px rgba(255, 120, 40, .6); transition: transform .3s; }
.nt-body { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 14px; text-align: center; }
.nt-body strong { font-family: var(--f-impact); font-weight: 400; font-size: 21px; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: #fff; }
.nt-body small { font-size: 12px; line-height: 1.35; color: #cbbfae; }
.nt-card:hover, .nt-card:focus-visible { border-color: rgba(255, 120, 60, .75); transform: translateY(-3px); }
.nt-card:hover .nt-img img, .nt-card.is-on .nt-img img { transform: scale(1.06); filter: saturate(1.08) brightness(1); }
.nt-card:hover .nt-ico, .nt-card.is-on .nt-ico { transform: scale(1.12) rotate(-8deg); }
.nt-card.is-on { border: 2px solid #ff5a2a; box-shadow: 0 0 0 1px rgba(255, 90, 42, .3), 0 0 26px -4px rgba(255, 70, 30, .85); }
.nt-card.is-on .nt-body { background: linear-gradient(180deg, transparent, rgba(160, 30, 10, .35)); }
.nt-bar { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 3px; border-radius: 3px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #ff5a2a, transparent); box-shadow: 0 0 10px rgba(255, 90, 42, .8); }
.nt-themes .ut-roster-nav.prev { left: 9px; } .nt-themes .ut-roster-nav.next { right: 9px; }
@media (max-width: 1199px) { .nt-track { grid-auto-columns: calc((100% - 3 * 12px) / 4); } }
@media (max-width: 760px) { .nt-themes { padding: 12px 34px 20px; } .nt-track { grid-auto-columns: calc((100% - 10px) / 2); gap: 10px; } .nt-body strong { font-size: 18px; } .nt-body small { font-size: 11px; } }
.nt-img { aspect-ratio: 1.25; }
.nt-img img { object-position: 50% 12%; }

/* Naruto : bande de réassurance sous « Voir la collection » */
.ut-banner-trust.ut-trust-under { display: flex; flex-wrap: nowrap; width: max-content; max-width: calc(100vw - 48px); margin: 30px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.08); position: relative; z-index: 2; }
.ut-trust-under li { padding: 0 20px; white-space: nowrap; }
.ut-trust-under li:last-child { border-right: 0; padding-right: 0; }
.ut-trust-under i { font-size: 19px; }
.ut-banner-cryline { margin: 26px 0 0; text-align: right; font-family: 'Kaushan Script', cursive; font-size: 22px; color: var(--ut-gold); letter-spacing: .04em; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.ut-banner-cryline .ut-leaf { color: #ff7a1a; }
@media (max-width: 1199px) {
  .ut-banner-trust.ut-trust-under { display: grid; grid-template-columns: repeat(2, auto); width: auto; gap: 14px 0; }
  .ut-trust-under li:nth-child(odd) { padding-left: 0; }
  .ut-trust-under li:nth-child(even) { border-right: 0; }
}
@media (max-width: 560px) {
  .ut-banner-trust.ut-trust-under { grid-template-columns: 1fr; }
  .ut-trust-under li { padding: 0; border: 0; white-space: normal; }
  .ut-banner-cryline { justify-content: center; text-align: center; }
}
.ut-banner-trust.ut-trust-under { padding: 14px 22px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: linear-gradient(90deg, rgba(10,6,4,.82), rgba(10,6,4,.62)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ut-trust-under li { padding: 0 16px; }
.ut-trust-under li:first-child { padding-left: 0; }
.ut-trust-under strong, .ut-trust-under span { text-shadow: 0 1px 6px rgba(0,0,0,.6); }
@media (max-width: 560px) { .ut-banner-trust.ut-trust-under { padding: 14px 16px; } }
/* Réassurance Naruto — style bande simple (maquette) */
.ut-banner-trust.ut-trust-under { border: 0; border-top: 1px solid rgba(255,255,255,.07); border-radius: 0; background: linear-gradient(90deg, rgba(12,8,6,.92) 0%, rgba(12,8,6,.85) 80%, rgba(12,8,6,0) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 18px 26px 18px 0; margin-top: 34px; }
.ut-trust-under li { gap: 16px; padding: 4px 30px; border-right: 1px solid rgba(255,255,255,.1); font-size: 12px; color: #d9d1c4; }
.ut-trust-under li:first-child { padding-left: 0; }
.ut-trust-under li:last-child { border-right: 1px solid rgba(255,255,255,.1); padding-right: 30px; }
.ut-trust-under i { font-size: 24px; color: #f1e9dc; width: 28px; text-align: center; }
.ut-trust-under strong { font-size: 13.5px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.ut-trust-under strong, .ut-trust-under span { text-shadow: none; }
@media (max-width: 1199px) {
  .ut-trust-under li:nth-child(even), .ut-trust-under li:last-child { border-right: 0; }
  .ut-banner-trust.ut-trust-under { background: rgba(12,8,6,.88); padding-right: 0; }
}
@media (max-width: 560px) {
  .ut-banner-trust.ut-trust-under { padding: 16px 0; background: rgba(12,8,6,.88); }
  .ut-trust-under li { padding: 0; border: 0 !important; }
}

/* ===== AOT : vitrine figurines « musée » (plaques sur socles) ===== */
.ms-stage { aspect-ratio: 2752 / 1536; max-height: 900px; background-position: center bottom; }
@media (min-width: 1700px) { .ms-stage { aspect-ratio: 2752 / 1400; } }
.ms-stage .ut-stage-veil { background: linear-gradient(90deg, rgba(8,6,6,.94) 0%, rgba(8,6,6,.7) 26%, rgba(8,6,6,.1) 44%, transparent 55%), linear-gradient(180deg, var(--ut-bg) 0%, transparent 12%, transparent 80%, rgba(11,9,9,.55) 100%); }
.ms-stage .ut-stage-copy { top: 46%; align-items: center; gap: 0; }
.ms-emblem { flex: none; display: grid; place-items: center; width: 96px; height: 116px; margin-right: 26px; padding-right: 26px; border-right: 1px solid rgb(var(--ut-red-rgb) / .55); position: relative; }
.ms-emblem::before { content: ''; position: absolute; inset: 8px 26px 8px 0; background: radial-gradient(closest-side, rgb(var(--ut-red-rgb) / .28), transparent); filter: blur(8px); }
.ms-emblem .ut-emblem { position: relative; width: 70px; }
.ms-stage .ut-h2-xl { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: .1em; font-size: clamp(40px, 3.8vw, 62px); text-shadow: 0 0 28px rgb(var(--ut-red-rgb) / .45), 0 3px 0 rgba(0,0,0,.5); }
.ms-stage .ut-sub { letter-spacing: .2em; }
.ms-stage .ut-btn-ghost { border-color: var(--ut-red); box-shadow: inset 0 0 0 1px rgb(var(--ut-red-rgb) / .2), 0 0 22px -8px rgb(var(--ut-red-rgb) / .7); }
.ms-stage .ut-btn-ghost:hover { background: rgb(var(--ut-red-rgb) / .16); }
/* plaques : gravées sur l'avant des socles */
.ms-stage .ut-plaque { bottom: 2.2%; width: 19%; max-width: 270px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.ms-stage .ut-plaque:hover { transform: translateX(-50%) translateY(-3px); }
.ms-stage .ut-plaque strong { font-family: var(--f-impact); font-weight: 400; font-size: clamp(18px, 1.55vw, 26px); letter-spacing: .08em; color: var(--ut-gold); text-shadow: 0 2px 10px #000; }
.ms-stage .ut-plaque span { margin-top: 3px; font-size: 10.5px; letter-spacing: .2em; color: #d8cfc2; }
.ms-stage .ut-plaque .ms-ed { display: block; margin-top: 2px; color: #a99f92; font-size: 10px; }
.ms-stage .ut-plaque em { position: relative; margin: 9px auto 6px; padding-top: 9px; max-width: 220px; font-family: 'Cormorant Garamond', 'Cinzel', Georgia, serif; font-style: italic; font-size: clamp(13px, 1.05vw, 16px); color: #ede4d6; }
.ms-stage .ut-plaque em::before { content: ''; position: absolute; top: 0; left: 50%; width: 46px; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--ut-gold), transparent); }
.ms-stage .ut-plaque b { text-align: center; margin: 0; font-size: clamp(18px, 1.4vw, 22px); color: var(--ut-red); text-shadow: 0 0 14px rgb(var(--ut-red-rgb) / .5); }
@media (max-width: 1200px) and (min-width: 821px) { .ms-stage .ut-plaque { display: block; } .ms-stage .ut-plaque em { display: none; } }
@media (max-width: 820px) {
  .ms-stage { aspect-ratio: auto; max-height: none; background-image: url('/static/img/aot4-scene-s.webp') !important; background-size: 175% auto; background-position: 92% bottom; background-repeat: no-repeat; background-color: var(--ut-bg); }
  .ms-stage::after { height: 340px; }
  .ms-emblem { width: 64px; height: 82px; margin-right: 16px; padding-right: 16px; }
  .ms-emblem .ut-emblem { width: 48px; }
}
.ms-stage .ut-stage-copy { align-items: flex-start; }
.ms-emblem { height: 104px; margin-top: 2px; }
.ms-stage .ut-plaque em { text-transform: none; letter-spacing: 0; }
.ms-stage + .ut-phares { margin-top: 34px; }
@media (max-width: 820px) { .ms-stage + .ut-phares { margin-top: 0; } }
.ms-stage .ut-plaque em { font-family: Georgia, 'Times New Roman', serif; }

/* Bande de réassurance identique sur tous les univers (modèle One Piece) */
:is(.ut-banner-copy, .dbh-copy) > .ut-trust { width: max-content; max-width: calc(100vw - 2 * var(--gutter, 20px)); flex-wrap: nowrap; position: relative; z-index: 2; }
@media (max-width: 1100px) { :is(.ut-banner-copy, .dbh-copy) > .ut-trust { width: auto; flex-wrap: wrap; } }
.ut-banner-copy > .ut-trust { margin-top: 34px; }
.dbh-copy > .ut-trust { margin-top: 30px; }