/* ═══════════════════════════════════════════════════════════════════
   HXC TOKYO REVENGERS RP — PROMETHEUS STORE THEME
   Fichier : tr-theme.css
   Usage   : Injecter via le panneau de personnalisation Prometheus
             (Admin > Apparence > CSS personnalisé)
             OU ajouter <link rel="stylesheet" href="tr-theme.css">
             dans le header de votre thème Prometheus.
   
   ⚠️  Ne modifie PAS les classes Prometheus existantes.
       Ce fichier AJOUTE uniquement des surcharges visuelles.
═══════════════════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS IMPORT ── */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Noto+Sans+JP:wght@300;400;700;900&family=Rajdhani:wght@400;600;700&family=Share+Tech+Mono&display=swap');

/* ════════════════════════════════════════════════════════
   1. CSS VARIABLES — PALETTE TOKYO REVENGERS
════════════════════════════════════════════════════════ */
:root {
  --tr-red:       #c8191e;
  --tr-red2:      #ff2a2a;
  --tr-red3:      #8b0000;
  --tr-black:     #060606;
  --tr-dark1:     #0f0f0f;
  --tr-dark2:     #141414;
  --tr-dark3:     #1a1a1a;
  --tr-grey:      #888;
  --tr-grey2:     #bbb;
  --tr-white:     #f0f0f0;
  --tr-silver:    #c0c0c0;
  --tr-gold:      #c8a84b;
  --tr-gold2:     #e8c060;
  --tr-font-title:'Bebas Neue', sans-serif;
  --tr-font-jp:   'Noto Sans JP', sans-serif;
  --tr-font-body: 'Rajdhani', sans-serif;
  --tr-font-mono: 'Share Tech Mono', monospace;
  --tr-radius:    2px;
  --tr-transition:.35s cubic-bezier(.2,0,0,1);
}

/* ════════════════════════════════════════════════════════
   2. BASE — RESET FOND & TYPO
════════════════════════════════════════════════════════ */
body,
html {
  background-color: var(--tr-black) !important;
  color: var(--tr-white) !important;
  font-family: var(--tr-font-body) !important;
  font-size: 15px;
  line-height: 1.65;
}

/* Scrollbar custom */
::-webkit-scrollbar            { width: 5px; height: 5px; }
::-webkit-scrollbar-track      { background: var(--tr-black); }
::-webkit-scrollbar-thumb      { background: var(--tr-red); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover{ background: var(--tr-red2); }

/* Sélection */
::selection { background: rgba(200,25,30,.35); color: #fff; }

/* ════════════════════════════════════════════════════════
   3. GRAIN + AMBIENT BACKGROUND LAYERS
════════════════════════════════════════════════════════ */

/* Grain animé (injecté via JS dans tr-theme.js) */
#tr-grain {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 190px 190px;
  animation: trGrainAnim 9s steps(9) infinite;
}
@keyframes trGrainAnim {
  0%  { background-position:   0%   0%; }
  11% { background-position:  35%  25%; }
  22% { background-position:  75%  55%; }
  33% { background-position:  15%  80%; }
  44% { background-position:  60%  10%; }
  55% { background-position:   0%  60%; }
  66% { background-position:  88%  40%; }
  77% { background-position:  25%  88%; }
  88% { background-position:  50%  35%; }
}

/* Lumière rouge ambiante */
#tr-ambient {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 35% at 70% 25%, rgba(200,25,30,.04) 0%, transparent 70%);
  animation: trAmbBreath 6s ease-in-out infinite;
}
@keyframes trAmbBreath {
  0%,100%{ opacity: .5; }
  50%    { opacity: 1.5; }
}

/* Flicker néon coin */
#tr-neon {
  position: fixed; top: 0; right: 0;
  width: 280px; height: 280px; z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 75% 25%, rgba(200,25,30,.06) 0%, transparent 60%);
  animation: trNeonFlick 9s ease-in-out infinite;
}
@keyframes trNeonFlick {
  0%,100%{opacity:1}  14%{opacity:.2} 15%{opacity:1}
  42%{opacity:.6}      43%{opacity:1}  72%{opacity:.4} 73%{opacity:1}
}

/* Canvas poussière (injecté via JS) */
#tr-dust { position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5; }

/* Scanlines full-page très subtiles */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
  );
}

/* ════════════════════════════════════════════════════════
   4. NAVBAR / HEADER
════════════════════════════════════════════════════════ */
nav,
.navbar,
.nav,
header,
.header,
#header,
.site-header {
  background: rgba(6,6,6,.92) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(200,25,30,.18) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,.5) !important;
  font-family: var(--tr-font-body) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

.navbar-brand,
.site-title,
.logo,
nav .brand {
  font-family: var(--tr-font-title) !important;
  font-size: 22px !important;
  letter-spacing: .15em !important;
  color: var(--tr-white) !important;
  text-shadow: 0 0 20px rgba(200,25,30,.4) !important;
}

.nav-link,
.navbar-nav .nav-link,
nav a {
  font-family: var(--tr-font-body) !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--tr-grey2) !important;
  transition: color var(--tr-transition) !important;
  position: relative !important;
}
.nav-link::after,
.navbar-nav .nav-link::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px; left: 0; right: 0 !important;
  height: 1px !important;
  background: var(--tr-red) !important;
  transform: scaleX(0) !important;
  transition: transform var(--tr-transition) !important;
}
.nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--tr-white) !important;
  background: transparent !important;
}
.nav-link:hover::after,
.navbar-nav .nav-link:hover::after {
  transform: scaleX(1) !important;
}

/* ════════════════════════════════════════════════════════
   5. MISE EN PAGE PRINCIPALE
════════════════════════════════════════════════════════ */
.container,
.content,
main,
.main,
#content,
.page-content,
.store-wrapper {
  position: relative;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════
   6. TITRES DE PAGE / SECTION
════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5 {
  font-family: var(--tr-font-title) !important;
  letter-spacing: .06em !important;
  color: var(--tr-white) !important;
  line-height: .95 !important;
}

h1 { font-size: clamp(36px,5vw,72px) !important; }
h2 { font-size: clamp(28px,4vw,52px) !important; }
h3 { font-size: clamp(20px,3vw,36px) !important; }

/* page header hero band */
.page-header,
.store-header,
.category-header,
.jumbotron,
.hero-section {
  background:
    linear-gradient(135deg, rgba(200,25,30,.12) 0%, transparent 60%),
    var(--tr-dark2) !important;
  border-bottom: 1px solid rgba(200,25,30,.2) !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 48px 24px !important;
}
.page-header::before,
.store-header::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    135deg, transparent, transparent 60px,
    rgba(200,25,30,.015) 60px, rgba(200,25,30,.015) 61px
  ) !important;
  pointer-events: none !important;
}

/* Ligne décorative rouge */
.page-header h1::after,
.store-header h1::after {
  content: '' !important;
  display: block !important;
  width: 52px; height: 3px !important;
  background: var(--tr-red) !important;
  margin: 14px 0 0 !important;
}

/* ════════════════════════════════════════════════════════
   7. PANNEAUX / CARDS GÉNÉRIQUES
════════════════════════════════════════════════════════ */
.panel,
.card,
.box,
.block,
.widget,
.section-box,
[class*="panel-"],
[class*="card-"] {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--tr-radius) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.4) !important;
  transition: border-color var(--tr-transition), box-shadow var(--tr-transition) !important;
}
.panel:hover,
.card:hover {
  border-color: rgba(200,25,30,.3) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(200,25,30,.15) !important;
}

.panel-heading,
.card-header,
[class*="panel-heading"] {
  background: rgba(200,25,30,.08) !important;
  border-bottom: 1px solid rgba(200,25,30,.2) !important;
  font-family: var(--tr-font-title) !important;
  font-size: 18px !important;
  letter-spacing: .1em !important;
  color: var(--tr-white) !important;
  padding: 14px 20px !important;
}

.panel-body,
.card-body {
  padding: 20px !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════
   8. CARTES PRODUITS / STORE ITEMS — PREMIUM
════════════════════════════════════════════════════════ */
.item,
.store-item,
.product,
.product-card,
.package,
.package-card,
[class*="item-card"],
[class*="product-item"],
[class*="store-product"] {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: var(--tr-radius) !important;
  overflow: hidden !important;
  position: relative !important;
  transition:
    transform .45s cubic-bezier(.2,0,0,1),
    border-color .4s ease,
    box-shadow .45s ease !important;
  cursor: pointer !important;
}

/* Accent line top */
.item::before,
.store-item::before,
.product::before,
.package::before,
.product-card::before,
.package-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--tr-red), transparent) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .5s cubic-bezier(.2,0,0,1) !important;
  z-index: 3 !important;
}

/* Sweep light */
.item::after,
.store-item::after,
.product::after,
.package::after,
.product-card::after,
.package-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0; bottom: 0; left: -80%; width: 45% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent) !important;
  transform: skewX(-18deg) !important;
  pointer-events: none !important;
  z-index: 4 !important;
  transition: none !important;
}

/* HOVER STATE */
.item:hover,
.store-item:hover,
.product:hover,
.package:hover,
.product-card:hover,
.package-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(200,25,30,.45) !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.6),
    0 0 0 1px rgba(200,25,30,.25),
    0 0 40px rgba(200,25,30,.1) !important;
  background: #161010 !important;
}
.item:hover::before,
.store-item:hover::before,
.product:hover::before,
.package:hover::before,
.product-card:hover::before,
.package-card:hover::before {
  transform: scaleX(1) !important;
}
.item:hover::after,
.store-item:hover::after,
.product:hover::after,
.package:hover::after,
.product-card:hover::after,
.package-card:hover::after {
  transition: left 1.2s cubic-bezier(.4,0,.2,1) !important;
  left: 150% !important;
}

/* Image produit */
.item img,
.store-item img,
.product img,
.package img,
.product-card img,
[class*="item-image"] img,
[class*="product-image"] img {
  transition: transform .5s cubic-bezier(.2,0,0,1), filter .5s ease !important;
  filter: brightness(.9) !important;
}
.item:hover img,
.store-item:hover img,
.product:hover img,
.package:hover img,
.product-card:hover img {
  transform: scale(1.06) !important;
  filter: brightness(1) !important;
}

/* Nom du produit */
.item-name,
.product-name,
.package-name,
[class*="item-title"],
[class*="product-title"] {
  font-family: var(--tr-font-title) !important;
  font-size: 18px !important;
  letter-spacing: .1em !important;
  color: var(--tr-white) !important;
  transition: color .3s ease !important;
}
.item:hover .item-name,
.product:hover .product-name,
.package:hover .package-name {
  color: var(--tr-red2) !important;
}

/* Description */
.item-description,
.product-description,
.package-description {
  font-family: var(--tr-font-jp) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--tr-grey) !important;
  line-height: 1.7 !important;
}

/* PRIX — prestige or */
.price,
.item-price,
.product-price,
.package-price,
[class*="price"] {
  font-family: var(--tr-font-title) !important;
  font-size: 22px !important;
  letter-spacing: .05em !important;
  color: var(--tr-gold2) !important;
  text-shadow: 0 0 20px rgba(200,168,75,.35) !important;
}

/* Badge/étiquette */
.badge,
.tag,
.label,
.ribbon,
[class*="badge"],
[class*="tag-"] {
  font-family: var(--tr-font-mono) !important;
  font-size: 9px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  background: var(--tr-red) !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 3px 8px !important;
}

/* ════════════════════════════════════════════════════════
   9. BOUTONS PREMIUM — identité Tokyo Revengers
════════════════════════════════════════════════════════ */

/* RESET global */
.btn,
button,
[class*="btn-"],
input[type="submit"],
input[type="button"] {
  font-family: var(--tr-font-title) !important;
  font-size: 14px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform .35s cubic-bezier(.2,0,0,1),
    box-shadow .35s ease !important;
}

/* BOUTON PRINCIPAL / ACHAT — Rouge */
.btn-primary,
.btn-buy,
.btn-purchase,
.btn-add-to-cart,
[class*="btn-primary"],
[class*="btn-success"],
input[type="submit"] {
  background: linear-gradient(135deg, #a01015 0%, var(--tr-red) 45%, #e82030 100%) !important;
  color: #fff !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
  padding: 13px 28px !important;
  box-shadow:
    0 0 0 1px rgba(200,25,30,.5),
    0 6px 28px rgba(200,25,30,.35),
    inset 0 1px 0 rgba(255,120,120,.15) !important;
  animation: trPrimaryPulse 2.2s ease-in-out infinite !important;
}
@keyframes trPrimaryPulse {
  0%,100%{box-shadow:0 0 0 1px rgba(200,25,30,.4),0 6px 28px rgba(200,25,30,.25),inset 0 1px 0 rgba(255,120,120,.15)}
  50%{box-shadow:0 0 0 1px rgba(200,25,30,.7),0 6px 40px rgba(200,25,30,.45),0 0 28px rgba(200,25,30,.2),inset 0 1px 0 rgba(255,120,120,.2)}
}
.btn-primary::before,
.btn-buy::before,
.btn-purchase::before,
.btn-add-to-cart::before,
input[type="submit"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0; bottom: 0; left: -70%; width: 40% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent) !important;
  transform: skewX(-18deg) !important;
  animation: trBtnSweep 3s ease-in-out infinite !important;
  pointer-events: none !important; z-index: 2 !important;
}
@keyframes trBtnSweep {
  0%,100%{left:-70%} 40%{left:130%} 41%,100%{left:130%}
}
.btn-primary:hover,
.btn-buy:hover,
.btn-purchase:hover,
.btn-add-to-cart:hover,
input[type="submit"]:hover {
  transform: translateY(-3px) scale(1.015) !important;
  background: linear-gradient(135deg, #b8151a 0%, #e02025 40%, #ff3040 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,60,70,.7),
    0 0 50px rgba(200,25,30,.6),
    0 14px 44px rgba(200,25,30,.45),
    inset 0 1px 0 rgba(255,160,160,.2) !important;
  animation: none !important;
}

/* BOUTON SECONDAIRE — gris tech */
.btn-secondary,
.btn-default,
[class*="btn-secondary"],
[class*="btn-default"] {
  background: transparent !important;
  color: var(--tr-grey2) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
  padding: 11px 24px !important;
}
.btn-secondary:hover,
.btn-default:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.4) !important;
  color: var(--tr-white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.4) !important;
}

/* BOUTON DANGER / SUPPRIMER */
.btn-danger,
[class*="btn-danger"] {
  background: linear-gradient(135deg, #6b0808, #a01015) !important;
  color: #fff !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
  border: 1px solid rgba(200,25,30,.4) !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg, #8b0000, var(--tr-red)) !important;
  box-shadow: 0 6px 24px rgba(200,25,30,.4) !important;
  transform: translateY(-2px) !important;
}

/* BOUTON INFO / CART */
.btn-info,
[class*="btn-info"],
.btn-cart,
.cart-btn {
  background: linear-gradient(135deg, #1a2a8a, #2a3acc, #3a4adc) !important;
  color: #fff !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
  box-shadow: 0 6px 24px rgba(42,58,204,.3) !important;
}
.btn-info:hover,
.btn-cart:hover {
  box-shadow: 0 0 40px rgba(42,58,204,.5), 0 10px 32px rgba(42,58,204,.4) !important;
  transform: translateY(-2px) !important;
  animation: none !important;
}

/* BOUTON WARNING / GOLD */
.btn-warning,
[class*="btn-warning"] {
  background: linear-gradient(135deg, #8b6914, var(--tr-gold), var(--tr-gold2)) !important;
  color: #080605 !important;
  font-weight: 700 !important;
  clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%) !important;
  box-shadow: 0 6px 24px rgba(200,168,75,.25) !important;
}
.btn-warning:hover {
  box-shadow: 0 0 40px rgba(200,168,75,.5), 0 10px 32px rgba(200,168,75,.35) !important;
  transform: translateY(-2px) !important;
}

/* ════════════════════════════════════════════════════════
   10. FORMULAIRES / INPUTS
════════════════════════════════════════════════════════ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select,
.form-control {
  background: var(--tr-dark3) !important;
  color: var(--tr-white) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 0 !important;
  font-family: var(--tr-font-body) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  transition: border-color .3s ease, box-shadow .3s ease !important;
  outline: none !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: rgba(200,25,30,.6) !important;
  box-shadow: 0 0 0 3px rgba(200,25,30,.12), inset 0 0 20px rgba(200,25,30,.04) !important;
  background: #1a0f0f !important;
}
input::placeholder,
textarea::placeholder { color: var(--tr-grey) !important; }

label,
.form-label {
  font-family: var(--tr-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: var(--tr-grey2) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

select option { background: var(--tr-dark2) !important; }

/* ════════════════════════════════════════════════════════
   11. TABLEAUX
════════════════════════════════════════════════════════ */
table,
.table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--tr-font-body) !important;
}
table th,
.table th {
  font-family: var(--tr-font-title) !important;
  font-size: 13px !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--tr-grey2) !important;
  background: var(--tr-dark3) !important;
  border-bottom: 1px solid rgba(200,25,30,.25) !important;
  padding: 12px 16px !important;
}
table td,
.table td {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  padding: 12px 16px !important;
  color: var(--tr-grey2) !important;
  transition: background .2s ease !important;
}
table tr:hover td,
.table tr:hover td {
  background: rgba(200,25,30,.04) !important;
}
table tr:first-child td,
.table-striped tr:nth-child(odd) td {
  background: rgba(255,255,255,.015) !important;
}

/* ════════════════════════════════════════════════════════
   12. PANIER / CART
════════════════════════════════════════════════════════ */
.cart,
.cart-panel,
.shopping-cart,
[class*="cart-"] {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(200,25,30,.2) !important;
}

.cart-item,
.cart-row,
[class*="cart-item"] {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  transition: background .25s ease !important;
}
.cart-item:hover,
.cart-row:hover {
  background: rgba(200,25,30,.04) !important;
}

.cart-total,
.total-price,
[class*="cart-total"] {
  font-family: var(--tr-font-title) !important;
  font-size: 24px !important;
  color: var(--tr-gold2) !important;
  text-shadow: 0 0 16px rgba(200,168,75,.35) !important;
}

/* Counter badge panier */
.cart-count,
.badge-cart,
[class*="cart-count"] {
  background: var(--tr-red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  min-width: 18px; min-height: 18px !important;
  font-family: var(--tr-font-mono) !important;
  font-size: 9px !important;
  animation: cartCountPulse 2s ease-in-out infinite !important;
}
@keyframes cartCountPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(200,25,30,.4)}
  50%{box-shadow:0 0 0 5px rgba(200,25,30,0)}
}

/* ════════════════════════════════════════════════════════
   13. MODALES / POPUPS
════════════════════════════════════════════════════════ */
.modal,
.popup,
.dialog,
[class*="modal"] {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(8px) !important;
}

.modal-dialog,
.modal-content,
.popup-content {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(200,25,30,.3) !important;
  border-radius: 0 !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgba(200,25,30,.15) !important;
  animation: trModalIn .4s cubic-bezier(.2,0,0,1) !important;
}
@keyframes trModalIn {
  from{ opacity:0; transform:scale(.96) translateY(12px); }
  to  { opacity:1; transform:scale(1)   translateY(0); }
}

.modal-header,
.popup-header {
  background: rgba(200,25,30,.07) !important;
  border-bottom: 1px solid rgba(200,25,30,.2) !important;
  font-family: var(--tr-font-title) !important;
  font-size: 20px !important;
  letter-spacing: .1em !important;
  color: var(--tr-white) !important;
  padding: 16px 22px !important;
}

.modal-footer,
.popup-footer {
  background: rgba(0,0,0,.2) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}

.close,
.modal-close,
.btn-close {
  color: var(--tr-grey) !important;
  font-size: 20px !important;
  transition: color .2s ease !important;
  background: transparent !important;
  border: none !important;
}
.close:hover,
.modal-close:hover,
.btn-close:hover { color: var(--tr-white) !important; }

/* ════════════════════════════════════════════════════════
   14. ALERTES / NOTIFICATIONS
════════════════════════════════════════════════════════ */
.alert,
.notification,
.toast,
[class*="alert-"],
[class*="notification-"] {
  border-radius: 0 !important;
  border: none !important;
  border-left: 3px solid !important;
  font-family: var(--tr-font-body) !important;
  font-size: 13px !important;
  padding: 12px 18px !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%) !important;
  animation: alertSlide .35s cubic-bezier(.2,0,0,1) !important;
}
@keyframes alertSlide {
  from{opacity:0;transform:translateX(-12px)}
  to  {opacity:1;transform:translateX(0)}
}
.alert-success { background:rgba(34,85,34,.3)!important; border-color:#4caf50!important; color:#90ee90!important; }
.alert-danger,
.alert-error   { background:rgba(120,15,15,.4)!important; border-color:var(--tr-red)!important; color:#ff9999!important; }
.alert-warning { background:rgba(120,90,10,.3)!important; border-color:var(--tr-gold)!important; color:var(--tr-gold2)!important; }
.alert-info    { background:rgba(30,50,140,.3)!important; border-color:#5b7fff!important; color:#99aaff!important; }

/* ════════════════════════════════════════════════════════
   15. PAGINATION
════════════════════════════════════════════════════════ */
.pagination,
[class*="pagination"] {
  display: flex !important;
  gap: 6px !important;
}
.page-item .page-link,
.pagination a,
.pagination li a {
  background: var(--tr-dark3) !important;
  color: var(--tr-grey2) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 0 !important;
  font-family: var(--tr-font-mono) !important;
  font-size: 11px !important;
  padding: 7px 12px !important;
  transition: all .25s ease !important;
  clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%) !important;
}
.page-item.active .page-link,
.pagination li.active a,
.pagination .active a {
  background: var(--tr-red) !important;
  border-color: var(--tr-red) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(200,25,30,.4) !important;
}
.page-item .page-link:hover,
.pagination a:hover {
  background: rgba(200,25,30,.15) !important;
  border-color: rgba(200,25,30,.4) !important;
  color: var(--tr-white) !important;
}

/* ════════════════════════════════════════════════════════
   16. CATÉGORIES
════════════════════════════════════════════════════════ */
.category,
.category-card,
.category-item,
[class*="category-"] {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform .4s cubic-bezier(.2,0,0,1), border-color .4s ease, box-shadow .4s ease !important;
}
.category::before,
.category-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--tr-red), rgba(200,25,30,.2)) !important;
  transform: scaleX(0); transform-origin: left !important;
  transition: transform .5s cubic-bezier(.2,0,0,1) !important;
  z-index: 3 !important;
}
.category:hover,
.category-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(200,25,30,.4) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 30px rgba(200,25,30,.1) !important;
}
.category:hover::before,
.category-card:hover::before { transform: scaleX(1) !important; }

.category-name,
[class*="category-name"],
[class*="category-title"] {
  font-family: var(--tr-font-title) !important;
  letter-spacing: .1em !important;
  color: var(--tr-white) !important;
  transition: color .3s ease !important;
}
.category:hover .category-name,
.category-card:hover [class*="category-name"] { color: var(--tr-red2) !important; }

/* ════════════════════════════════════════════════════════
   17. SIDEBAR / FILTRES
════════════════════════════════════════════════════════ */
.sidebar,
.filters,
.filter-panel,
aside {
  background: var(--tr-dark2) !important;
  border-right: 1px solid rgba(200,25,30,.12) !important;
}

.sidebar-title,
.filter-title,
.sidebar h3,
.sidebar h4 {
  font-family: var(--tr-font-title) !important;
  font-size: 16px !important;
  letter-spacing: .15em !important;
  color: var(--tr-white) !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(200,25,30,.2) !important;
  margin-bottom: 14px !important;
}

/* ════════════════════════════════════════════════════════
   18. DROPDOWN / MENU DÉROULANT
════════════════════════════════════════════════════════ */
.dropdown-menu,
.dropdown,
[class*="dropdown-menu"] {
  background: var(--tr-dark2) !important;
  border: 1px solid rgba(200,25,30,.25) !important;
  border-radius: 0 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.7) !important;
  animation: trDropIn .25s cubic-bezier(.2,0,0,1) !important;
}
@keyframes trDropIn {
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}
.dropdown-item,
.dropdown-menu a,
[class*="dropdown-item"] {
  font-family: var(--tr-font-body) !important;
  font-size: 13px !important;
  letter-spacing: .05em !important;
  color: var(--tr-grey2) !important;
  padding: 9px 16px !important;
  transition: background .2s ease, color .2s ease !important;
  background: transparent !important;
}
.dropdown-item:hover,
.dropdown-menu a:hover {
  background: rgba(200,25,30,.1) !important;
  color: var(--tr-white) !important;
}

/* ════════════════════════════════════════════════════════
   19. BREADCRUMB
════════════════════════════════════════════════════════ */
.breadcrumb,
[class*="breadcrumb"] {
  background: transparent !important;
  font-family: var(--tr-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  padding: 0 !important;
}
.breadcrumb-item,
.breadcrumb li { color: var(--tr-grey) !important; }
.breadcrumb-item a,
.breadcrumb li a { color: var(--tr-grey2) !important; transition: color .2s !important; }
.breadcrumb-item a:hover,
.breadcrumb li a:hover { color: var(--tr-red) !important; }
.breadcrumb-item.active { color: var(--tr-red) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(200,25,30,.5) !important; content: '▸' !important; }

/* ════════════════════════════════════════════════════════
   20. FOOTER
════════════════════════════════════════════════════════ */
footer,
.footer,
#footer {
  background: var(--tr-dark2) !important;
  border-top: 1px solid rgba(200,25,30,.18) !important;
  font-family: var(--tr-font-body) !important;
  color: var(--tr-grey) !important;
  position: relative !important;
  z-index: 2 !important;
}
footer a,
.footer a { color: var(--tr-grey) !important; transition: color .2s ease !important; }
footer a:hover,
.footer a:hover { color: var(--tr-red2) !important; }

.footer-copy,
.copyright {
  font-family: var(--tr-font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  color: rgba(255,255,255,.2) !important;
}

/* ════════════════════════════════════════════════════════
   21. LOADING / SPINNER
════════════════════════════════════════════════════════ */
.spinner,
.loading,
[class*="spinner"],
[class*="loader"] {
  border-color: rgba(200,25,30,.2) !important;
  border-top-color: var(--tr-red) !important;
  animation: trSpin .7s linear infinite !important;
}
@keyframes trSpin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════
   22. SCROLL REVEAL — éléments qui apparaissent au scroll
════════════════════════════════════════════════════════ */
.tr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,0,0,1);
}
.tr-reveal.tr-visible {
  opacity: 1;
  transform: translateY(0);
}
.tr-reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,0,0,1);
}
.tr-reveal-left.tr-visible { opacity:1; transform:translateX(0); }

/* ════════════════════════════════════════════════════════
   23. LIENS GÉNÉRAUX
════════════════════════════════════════════════════════ */
a { color: var(--tr-grey2) !important; transition: color .2s ease !important; }
a:hover { color: var(--tr-white) !important; text-decoration: none !important; }

/* ════════════════════════════════════════════════════════
   24. GRILLE PRODUITS — uniform gap
════════════════════════════════════════════════════════ */
.products-grid,
.items-grid,
.store-grid,
.packages-grid,
[class*="products-grid"],
[class*="items-grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 20px !important;
}

/* ════════════════════════════════════════════════════════
   25. DIVIDERS / SÉPARATEURS
════════════════════════════════════════════════════════ */
hr,
.divider,
.separator {
  border: none !important;
  border-top: 1px solid rgba(200,25,30,.18) !important;
  margin: 24px 0 !important;
}

/* ════════════════════════════════════════════════════════
   26. RESPONSIVE
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .products-grid,
  .items-grid,
  .store-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 12px !important;
  }
  .btn-primary,
  .btn-buy,
  .btn-purchase {
    clip-path: none !important;
    width: 100% !important;
    justify-content: center !important;
  }
  h1 { font-size: clamp(28px,8vw,48px) !important; }
  h2 { font-size: clamp(22px,6vw,36px) !important; }
}