/* =================== Univers Dragon Ball — en-tête (maquette « Des légendes qui traversent le temps ») =================== */
.ut-dragon-ball { --dr: #e5322d; --do: #ff8a1f; --dg: #ffcf4a; }
.dbh { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(600px, 50vw, 800px); display: flex; align-items: stretch; background: #07070b; color: #ece6d6; }
.dbh-bg { position: absolute; inset: 0; z-index: -2; background: #07070b 78% center / cover no-repeat; animation: dbhZoom 26s ease-in-out infinite alternate; }
.dbh::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 7, 11, .97) 0%, rgba(7, 7, 11, .9) 26%, rgba(7, 7, 11, .45) 44%, transparent 58%), linear-gradient(0deg, #07070b 0%, transparent 18%), linear-gradient(180deg, rgba(7, 7, 11, .55), transparent 14%); }
@keyframes dbhZoom { to { transform: scale(1.05); } }
.dbh .hero-embers { z-index: -1; }
.dbh-inner { position: relative; display: flex; justify-content: space-between; padding: 38px 0 44px; }
.dbh-copy { position: relative; z-index: 2; max-width: 560px; }
.dbh-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 12px; color: rgba(236, 230, 214, .65); }
.dbh-crumb i { font-size: 8px; } .dbh-crumb a:hover { color: #fff; } .dbh-crumb span { color: var(--dr); }
.dbh-kicker { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: rgba(236, 230, 214, .7); }
.dbh-logo { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .18em; font-family: 'Bangers', 'Bowlby One', var(--f-impact); font-weight: 400; font-size: clamp(64px, 7vw, 120px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; transform: rotate(-3deg) skewX(-6deg); transform-origin: left; }
.dbh-l1 { position: relative; display: inline-flex; align-items: center; color: transparent; background: linear-gradient(180deg, #fff3a8 0%, #ffd23f 40%, #ff9d1a 75%, #e0560c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #5a1a04; paint-order: stroke fill; filter: drop-shadow(0 4px 0 #3a0e02) drop-shadow(0 0 22px rgba(255, 150, 30, .45)); }
.dbh-l2 { color: transparent; background: linear-gradient(180deg, #ff6a4a 0%, #e5322d 50%, #9e1410 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2px #3d0703; paint-order: stroke fill; filter: drop-shadow(0 4px 0 #2a0402) drop-shadow(0 0 22px rgba(229, 50, 45, .45)); }
.dbh-ball { display: inline-grid; place-items: center; width: .72em; height: .72em; margin: 0 .02em; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff6c8 0 8%, #ffc23a 20%, #ff8a10 62%, #c24f04 100%); box-shadow: 0 0 22px rgba(255, 150, 30, .7), inset -4px -6px 10px rgba(120, 40, 0, .55); transform: skewX(6deg) translateY(-.04em); }
.dbh-ball b { font-family: Arial, sans-serif; font-size: .34em; color: #e5322d; -webkit-text-stroke: 0; text-shadow: 0 0 2px #fff; line-height: 1; }
.dbh-jp { margin: 6px 0 0; font-family: var(--f-jp); font-weight: 900; font-size: 13px; letter-spacing: .5em; color: rgba(255, 207, 74, .75); }
.dbh-tag { margin: 14px 0 12px; font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); letter-spacing: .2em; text-transform: uppercase; color: #f5efe2; }
.dbh-text { margin: 0 0 24px; max-width: 480px; font-size: 15px; line-height: 1.65; color: rgba(236, 230, 214, .82); }
.dbh-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 6px; background: linear-gradient(180deg, #e8352c, #a5150f); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 0 28px -6px rgba(229, 50, 45, .85), inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .2s, box-shadow .2s; }
.dbh-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(229, 50, 45, 1); }
.dbh-btn i { transition: transform .2s; } .dbh-btn:hover i { transform: translateX(3px); }

.dbh-trust { margin-top: 30px; width: min(860px, calc(100vw - 2 * var(--gutter))); display: flex; align-items: center; gap: 22px; padding: 14px 22px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(10, 8, 8, .72); backdrop-filter: blur(6px); }
.dbh-trust-head { flex: none; display: flex; align-items: center; gap: 12px; padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .1); }
.dbh-trust-head span { display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 50%; font-family: var(--f-jp); font-weight: 900; font-size: 20px; color: #fff; }
.dbh-trust-head strong { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; line-height: 1.4; text-transform: uppercase; color: #f5efe2; white-space: nowrap; }
.dbh-trust ul { flex: 1; list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; gap: 18px; }
.dbh-trust li { display: flex; align-items: center; gap: 10px; }
.dbh-trust li i { flex: none; width: 22px; text-align: center; font-size: 18px; color: var(--dr); }
.dbh-trust li span { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.35; color: rgba(236, 230, 214, .6); white-space: nowrap; }
.dbh-trust li b { font-size: 13px; font-weight: 500; color: #f5efe2; }

.dbh-side { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; text-align: right; pointer-events: none; }
.dbh-name { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.dbh-name span { writing-mode: vertical-rl; font-family: var(--f-jp); font-weight: 900; font-size: clamp(30px, 2.8vw, 44px); line-height: 1.05; color: #ff6a3d; text-shadow: 0 0 18px rgba(255, 90, 40, .7); }
.dbh-name small { margin-top: 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(236, 230, 214, .7); }
.dbh-name em { font-style: normal; font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: rgba(236, 230, 214, .5); }
.dbh-quote { margin: 0 0 30px; font-family: var(--f-script); font-size: clamp(20px, 1.9vw, 30px); line-height: 1.2; color: #fff; transform: rotate(-5deg); text-shadow: 0 2px 16px #000; }
.dbh-kame { position: absolute; left: 0; bottom: 14px; margin: 0; font-size: 10px; letter-spacing: .4em; text-transform: uppercase; color: rgba(236, 230, 214, .4); }

/* Catégories */
.dbh-cats { position: relative; z-index: 3; margin-top: -26px; }
.dbh-cats ul { list-style: none; margin: 0; padding: 6px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(12, 10, 12, .92); backdrop-filter: blur(8px); box-shadow: 0 20px 40px -20px #000; }
.dbh-cats li + li { border-left: 1px solid rgba(255, 255, 255, .07); }
.dbh-cats a { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 10px; border-radius: 6px; font-size: 13.5px; color: #e6dccb; transition: background .2s, color .2s; }
.dbh-cats a i { font-size: 17px; color: rgba(236, 230, 214, .75); transition: color .2s, transform .2s; }
.dbh-cats a small { padding: 1px 7px; border-radius: 99px; background: rgba(255, 255, 255, .08); font-size: 10.5px; color: rgba(236, 230, 214, .65); }
.dbh-cats a:hover { background: rgba(229, 50, 45, .12); color: #fff; }
.dbh-cats a:hover i { color: var(--do); transform: translateY(-2px); }
.dbh-cats a.is-on { background: linear-gradient(180deg, rgba(229, 50, 45, .55), rgba(140, 16, 10, .55)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 90, 60, .6); }
.dbh-cats a.is-on i { color: #fff; }

/* Sélections */
.dbh-picks { padding: 30px 0 40px; background: radial-gradient(60% 80% at 80% 0%, rgba(255, 120, 30, .06), transparent 70%), #07070b; }
.dbh-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.dbh-head h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--f-impact); font-weight: 400; font-size: clamp(22px, 2vw, 30px); letter-spacing: .04em; text-transform: uppercase; color: #f5efe2; }
.dbh-head h2 i { color: var(--do); font-size: .8em; }
.dbh-head a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #ff5a48; }
.dbh-head a:hover { color: #fff; }
.dbh-picks-grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(200px, 17vw, 280px); gap: 14px; }
.dbh-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dbh-card { position: relative; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; overflow: hidden; background: #0e0e12; transition: border-color .25s, transform .25s, box-shadow .25s; }
.dbh-card:hover { border-color: rgba(255, 120, 40, .6); transform: translateY(-4px); box-shadow: 0 20px 40px -22px rgba(255, 110, 30, .7); }
.dbh-card-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #16161b; }
.dbh-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.dbh-card:hover .dbh-card-media img { transform: scale(1.06); }
.dbh-badge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; background: #3a3a44; color: #fff; }
.dbh-badge.is-best { background: linear-gradient(180deg, #ffd65a, #f2a516); color: #2a1a05; } .dbh-badge.is-new { background: #2f8f4e; } .dbh-badge.is-red { background: #e5322d; }
.dbh-wish, .dbh-peek { position: absolute; right: 10px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(7, 7, 11, .55); color: #fff; font-size: 12.5px; cursor: pointer; transition: opacity .2s, background .2s; }
.dbh-wish { top: 10px; } .dbh-peek { top: 46px; opacity: 0; }
.dbh-card:hover .dbh-peek, .dbh-peek:focus-visible { opacity: 1; }
.dbh-wish:hover, .dbh-peek:hover { background: var(--dr); }
.dbh-card-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 12px; }
.dbh-card-name { font-size: 14px; font-weight: 600; line-height: 1.3; color: #f5efe2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dbh-card-name:hover { text-decoration: underline; text-decoration-color: var(--dr); }
.dbh-card-sub { font-size: 12px; color: rgba(236, 230, 214, .55); }
.dbh-card-rate { display: flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(236, 230, 214, .55); }
.dbh-card-rate .stars { color: #f2b33d; font-size: 10.5px; }
.dbh-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dbh-price { display: flex; flex-direction: column; line-height: 1.05; }
.dbh-price strong { font-family: var(--f-impact); font-weight: 400; font-size: 23px; color: #ff4a3d; }
.dbh-price s { font-size: 11.5px; color: rgba(236, 230, 214, .45); }
.dbh-picks .dbh-add { flex: none; width: 38px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--dr); color: #fff; cursor: pointer; transition: background .2s, transform .2s; }
.dbh-picks .dbh-add:hover { background: #ff4a3d; transform: scale(1.06); }
.dbh-add:disabled { opacity: .4; cursor: not-allowed; }
.dbh-qcard { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(255, 140, 50, .3); border-radius: 10px; min-height: 280px; }
.dbh-qcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.dbh-qcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 7, 11, .55), transparent 55%); }
.dbh-qcard figcaption { position: absolute; z-index: 1; top: 22px; right: 18px; font-family: var(--f-script); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; text-align: right; color: #fff; transform: rotate(-5deg); text-shadow: 0 2px 14px #000; }

/* Responsive */
@media (max-width: 1199px) {
  .dbh-name em, .dbh-kame { display: none; }
  .dbh-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dbh-card:nth-child(4) { display: none; }
  .dbh-cats a { flex-direction: column; gap: 6px; font-size: 12.5px; padding: 12px 6px; }
  .dbh-cats a small { display: none; }
}
@media (max-width: 980px) {
  .dbh { min-height: 0; flex-direction: column; }
  .dbh-bg { position: relative; inset: auto; z-index: 0; height: 56vw; min-height: 260px; background-size: auto 100%; background-position: 82% 0; animation: none; }
  .dbh::before { z-index: 1; height: 56vw; min-height: 260px; background: linear-gradient(0deg, #07070b 0%, transparent 35%); }
  .dbh .hero-embers { display: none; }
  .dbh-inner { z-index: 2; margin-top: -30px; padding-top: 0; }
  .dbh-side { display: none; }
  .dbh-copy { max-width: 640px; }
  .dbh-trust { width: auto; flex-direction: column; align-items: stretch; gap: 12px; }
  .dbh-trust-head { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .dbh-trust ul { justify-content: flex-start; flex-wrap: wrap; gap: 12px 26px; }
  .dbh-cats { margin-top: 0; }
  .dbh-cats ul { display: flex; overflow-x: auto; scrollbar-width: none; }
  .dbh-cats li { flex: 0 0 auto; }
  .dbh-cats a { flex-direction: row; padding: 12px 16px; }
  .dbh-picks-grid { grid-template-columns: 1fr; }
  .dbh-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dbh-card:nth-child(4) { display: flex; }
  .dbh-qcard { display: none; }
}
@media (max-width: 640px) {
  .dbh-bg, .dbh::before { height: 76vw; }
  .dbh-bg { background-position: 74% 0; }
  .dbh-logo { font-size: clamp(56px, 17vw, 76px); }
  .dbh-trust ul { flex-direction: column; gap: 10px; }
  .dbh-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .dbh-card { flex: 0 0 62%; scroll-snap-align: start; }
  .dbh-peek { opacity: 1; }
  .dbh-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}