/* =====================================================================
   BANDEAUX DE TITRE ANIMÉS — généré par admin/_dev_titres/publier-titres.cjs (ne pas éditer à la main)
   HTML produit par /js/titres-bandeau.js : window.fvTitreBandeau(titre, rareté).
   commun : .tb  (nouveau dessin SVG animé, version -fixe si « réduire les animations »)
   autres : .tbb (ancien dessin /boutique/cadre_*.avif intact + plaque sombre + reflet + calques de lumière)
   ===================================================================== */
.tb { position: relative; display: inline-block; width: min(400px, 100%); container-type: inline-size; vertical-align: top; line-height: 1; }
.tb > picture, .tb > picture > img { display: block; width: 100%; height: auto; pointer-events: none; }
.tb .tb-txt { position: absolute; inset: 0; padding: 0 7%; color: #efe7d3; text-shadow: 0 1px 2px #000;
  font-size: 15px; font-size: calc(clamp(10.5px, 3.75cqw, 15.5px) * var(--tbk, 1)); }
.tb-txt { display: flex; align-items: center; justify-content: center; gap: .3em; font-style: italic; font-weight: 700; letter-spacing: .02em; white-space: nowrap; pointer-events: none; -webkit-text-fill-color: currentColor; }
.tb-txt picture { display: flex; flex: none; }
.tb-txt .tb-ico { width: 1.3em; height: 1.3em; flex: none; margin: 0; }
.tb-lib { overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: .15em .05em; }
.tb-emo { font-style: normal; -webkit-text-fill-color: initial; }
.tbb { --img: url(/boutique/cadre_X.webp); position: relative; display: inline-block; width: min(400px, 100%); container-type: inline-size; vertical-align: top; line-height: 1; }
.tbb > * { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tbb-fond { inset: -18% -4% -10%; width: 108%; height: 128%; }
.tbb-plaque { background: radial-gradient(ellipse at 50% 40%, rgba(40,30,60,.92), rgba(8,8,16,.96)); -webkit-mask: var(--int) center / 100% 100% no-repeat; mask: var(--int) center / 100% 100% no-repeat; }
.tbb-cadre { background: var(--img) center / 100% 100% no-repeat; }
.tbb-reflet { overflow: hidden; -webkit-mask: var(--img) center / 100% 100% no-repeat; mask: var(--img) center / 100% 100% no-repeat; }
.tbb-reflet::before { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 13%; background: linear-gradient(100deg, transparent 0%, var(--sw) 50%, transparent 100%);
  transform: translateX(-150%) skewX(-22deg); animation: tbb-reflet var(--per) cubic-bezier(.45,0,.3,1) infinite; mix-blend-mode: screen; }
@keyframes tbb-reflet { 0% { transform: translateX(-150%) skewX(-22deg); } 40%, 100% { transform: translateX(900%) skewX(-22deg); } }
.tbb .tb-txt { position: absolute; padding: 0; display: flex; align-items: center; justify-content: center; gap: .3em; font-style: italic; font-weight: 700; letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 2px #000; }
/* titre long (> 24 caractères) : police réduite de 12 % (zone intérieure étroite des anciens cadres) */
.tbb[data-long] { --tbk: .88; }
@media (prefers-reduced-motion: reduce) { .tbb-reflet::before { animation: none; opacity: 0; } }
.tbb[data-rarity="pecommun"] { aspect-ratio: 1257 / 187; --img: url(/boutique/cadre_pecommun.webp); --img: image-set(url(/boutique/cadre_pecommun.avif) type("image/avif"), url(/boutique/cadre_pecommun.webp) type("image/webp")); --int: url(/boutique/titres/interieur-pecommun.png); --sw: rgba(255,240,190,.75); --per: 7s; }
.tbb[data-rarity="pecommun"] .tb-txt { inset: 16.6% 10.6% 18.2% 11%; width: auto; height: auto; font-size: 14.5px; font-size: calc(clamp(10.5px, 3.75cqw, 15.5px) * var(--tbk, 1)); color: #c4f7cf; text-shadow: 0 1px 2px #000, 0 0 8px rgba(80,220,120,.45); }
.tbb[data-rarity="rare"] { aspect-ratio: 1303 / 231; --img: url(/boutique/cadre_rare.webp); --img: image-set(url(/boutique/cadre_rare.avif) type("image/avif"), url(/boutique/cadre_rare.webp) type("image/webp")); --int: url(/boutique/titres/interieur-rare.png); --sw: rgba(235,248,255,.9); --per: 6s; }
.tbb[data-rarity="rare"] .tb-txt { inset: 32.5% 16.6% 26% 16.7%; width: auto; height: auto; font-size: 14.5px; font-size: calc(clamp(10.5px, 3.75cqw, 15px) * var(--tbk, 1)); color: #dcedff; text-shadow: 0 1px 2px #000, 0 0 8px rgba(80,170,255,.7); }
.tbb[data-rarity="epique"] { aspect-ratio: 1447 / 293; --img: url(/boutique/cadre_epique.webp); --img: image-set(url(/boutique/cadre_epique.avif) type("image/avif"), url(/boutique/cadre_epique.webp) type("image/webp")); --int: url(/boutique/titres/interieur-epique.png); --sw: rgba(250,235,255,.55); --per: 5.5s; }
.tbb[data-rarity="epique"] .tb-txt { inset: 31.4% 17.4% 19.1% 16.9%; width: auto; height: auto; font-size: 14.5px; font-size: calc(clamp(10.5px, 3.7cqw, 14.5px) * var(--tbk, 1)); color: #f5e6ff; text-shadow: 0 1px 2px #000, 0 0 9px rgba(190,120,255,.8); }
.tbb[data-rarity="legendaire"] { aspect-ratio: 1253 / 287; --img: url(/boutique/cadre_legendaire.webp); --img: image-set(url(/boutique/cadre_legendaire.avif) type("image/avif"), url(/boutique/cadre_legendaire.webp) type("image/webp")); --int: url(/boutique/titres/interieur-legendaire.png); --sw: rgba(255,255,235,.8); --per: 4s; }
.tbb[data-rarity="legendaire"] .tb-txt { inset: 38% 18.1% 21.6% 18.4%; width: auto; height: auto; font-size: 14.5px; font-size: calc(clamp(10.5px, 3.7cqw, 14.5px) * var(--tbk, 1)); color: #ffd34d; }
.tbb[data-rarity="legendaire"] .tbb-plaque { background: radial-gradient(ellipse at 50% 45%, rgba(60,28,6,.95), rgba(18,8,2,.97)); }
.tbb[data-rarity="legendaire"] .tb-lib { background: linear-gradient(100deg, #ffe08a 0%, #ffc53d 30%, #fffbe8 45%, #ffc53d 60%, #ffb000 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 1px rgba(0,0,0,.95)); animation: tb-or 4.5s linear infinite; }
.tbb[data-rarity="legendaire"] .tb-txt { text-shadow: none; letter-spacing: 0; }
.tbb[data-rarity="rare"] .tbb-plaque { background: radial-gradient(ellipse at 50% 40%, rgba(16,36,80,.93), rgba(6,12,30,.97)); }
.tbb[data-rarity="pecommun"] .tbb-plaque { background: radial-gradient(ellipse at 50% 40%, rgba(18,52,32,.93), rgba(6,20,12,.97)); }
.tbb[data-rarity="epique"] .tbb-plaque { background: radial-gradient(ellipse at 50% 40%, rgba(44,18,78,.93), rgba(14,6,26,.97)); }
@keyframes tb-or { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .tbb[data-rarity="legendaire"] .tb-lib { animation: none; background-position: 40% 0; } }