/* =========================================================
   7TH GAMES — habillage du hub /jeux/ (AJOUT 2026-10)
   Se pose PAR-DESSUS jeux.css sans le modifier : retirer ce
   fichier rend la page exactement comme avant.
   Préfixe « h7- ». Léger pour les tablettes : pas d'animation
   en boucle, pas d'image, pochettes en dégradés CSS.
   ========================================================= */
.h7-logo{ font-size:clamp(44px,10vw,92px) !important; letter-spacing:-3px !important; }
.h7-logo em{ background:linear-gradient(100deg,#FFD34E,#FD5A9A 55%,#A37BFF) !important; -webkit-background-clip:text !important; background-clip:text !important; }

.h7-filtres{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 12px; margin:-12px 0 18px; scrollbar-width:none; }
.h7-filtres::-webkit-scrollbar{ display:none; }
.h7-chip{ flex:0 0 auto; min-height:44px; padding:0 16px; border-radius:999px; border:2px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  color:#fff; font:700 14px var(--jx-corps,Arial,sans-serif); cursor:pointer; white-space:nowrap; touch-action:manipulation; }
.h7-chip.on{ background:#FFD34E; border-color:#FFD34E; color:#111; }
.h7-chip:focus-visible{ outline:3px solid #29E4C2; outline-offset:2px; }

/* Pochettes : en-tête graphique de chaque carte */
.h7-pochette{ position:relative; height:96px; overflow:hidden; display:flex; align-items:center; gap:12px; padding:0 22px; }
.h7-pochette span{ font-size:46px; line-height:1; filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)); }
.h7-pochette b{ font-family:var(--jx-titre,Arial Black,Impact,sans-serif); font-weight:900; font-style:italic; font-size:34px; letter-spacing:-1px; color:#fff;
  text-shadow:3px 3px 0 rgba(0,0,0,.35); text-transform:uppercase; }
.h7-pochette::after{ content:""; position:absolute; right:-30px; top:-30px; width:140px; height:140px; border-radius:50%; border:16px solid rgba(255,255,255,.12); }
.h7-pochette + .jx-carte-haut{ padding-top:18px; }
.h7-pochette + .jx-carte-haut .jx-emo{ display:none; }
.p-run{ background:linear-gradient(120deg,#ff9a3c,#ffd34e); }
.p-battle{ background:linear-gradient(120deg,#fd5a9a,#7a2e8a); }
.p-climb{ background:linear-gradient(120deg,#a37bff,#fd5a9a); }
.p-trouve{ background:linear-gradient(120deg,#29e4c2,#1f6fb2); }
.p-graff{ background:repeating-linear-gradient(135deg,#29e4c2 0 18px,#22c3a7 18px 36px); }
.p-yc{ background:linear-gradient(120deg,#ffd34e,#9be34a); }
.p-fighters{ background:linear-gradient(120deg,#ff3c3c,#7a1033); }
.p-bomb{ background:radial-gradient(circle at 30% 50%,#ffb400,#ff5a1f 45%,#3a1240); }
.p-race{ background:repeating-linear-gradient(90deg,#1b1838 0 26px,#24204a 26px 52px); }
.p-race::before{ content:""; position:absolute; left:0; right:0; bottom:10px; height:6px; background:repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 28px); opacity:.5; }
.p-tlc{ background:linear-gradient(120deg,#111,#3a3a3a); }
.p-tlc b{ color:#FFD34E; }
.p-djeuns{ background:linear-gradient(120deg,#7c3aed,#b4ff39); }
.p-punch{ background:linear-gradient(120deg,#E96B24,#9A3412); }
.p-fun{ background:linear-gradient(120deg,#ff6ac1,#ffd34e,#29e4c2); }
.p-empire{ background:linear-gradient(120deg,#0f1420,#2a3550); }
.p-empire b{ color:#FFD34E; }
.p-bx{ background:linear-gradient(120deg,#29e4ff,#b46bff 60%,#ff3cac); }

.h7-new{ display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 8px; border-radius:8px; background:#FFD34E; color:#111;
  font:900 10px var(--jx-corps,Arial,sans-serif); font-style:normal; letter-spacing:1.5px; }

/* TOP 4 + voir tout */
.h7-top4 .jx-cl-ligne:nth-child(n+5){ display:none; }
.h7-voir{ display:block; width:100%; min-height:44px; margin-top:8px; border-radius:12px; border:1px dashed rgba(255,255,255,.25); background:transparent;
  color:#b4b8ce; font:700 13px var(--jx-corps,Arial,sans-serif); cursor:pointer; }
.h7-voir:hover{ color:#fff; border-color:#fff; }

.h7-mojo{ margin:26px 0 0; padding:14px 16px; border-radius:14px; background:rgba(255,211,78,.08); border:1px solid rgba(255,211,78,.3); color:#e8e0c0; font-size:14px; line-height:1.6; }
.h7-adulte{ margin:30px 0 0; text-align:center; font-size:13px; }
.h7-adulte a{ color:#7d8199; text-decoration:none; border-bottom:1px dotted #7d8199; }

@media (max-width:520px){
  .h7-pochette{ height:80px; padding:0 16px; }
  .h7-pochette span{ font-size:38px; }
  .h7-pochette b{ font-size:28px; }
  .jx-cartes{ grid-template-columns:1fr !important; }
}