/* OnziQ : direction « Volt Spec » 2026-2027 dans l'application (1er novembre 2026).
   Même grammaire que les cartes à partager : objet 3D sans médaillon qui déborde légèrement, halo volt discret,
   cartes de récompense noires avec fuite de lumière volt, micro-étiquettes monospace, titres en Anton.
   Polices validées conservées (Anton, Figtree) ; JetBrains Mono pour les micro-étiquettes.
   Les images gardent leurs proportions (object-fit: contain, jamais d'étirement). */
:root{--vs-volt:#D7FF00;--vs-bg:#0B0B0A;--vs-ink:#FFFFFF;--vs-muted:#B7BCB2;--vs-line:rgba(255,255,255,.10);
  --vs-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--vs-title:"Anton","Big Shoulders Display",Impact,sans-serif}

/* Médailles : plus d'anneau métal, l'objet 3D est posé sur un halo volt et déborde un peu de sa place */
html:root body .awmed{background:radial-gradient(circle at 50% 56%,rgba(215,255,0,.24) 0,rgba(215,255,0,.08) 38%,transparent 64%)!important;border-radius:0!important;overflow:visible!important}
html:root body .awmed img{width:100%!important;height:100%!important;object-fit:contain!important;transform:scale(1.14) rotate(-4deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))!important}
html:root body .awmed .oq-badge-cluster img{width:64%!important;height:64%!important;transform:none}
html:root body .bcoll .badge .awmed{background:radial-gradient(circle at 50% 56%,rgba(215,255,0,.24) 0,rgba(215,255,0,.08) 38%,transparent 64%)!important}
html:root body .bcoll .badge.locked .awmed{background:none!important}
html:root body .ldlab .awmed img,html:root body .fanlead .awmed img{transform:none}
@media (prefers-reduced-motion:no-preference){
  html:root body .awcard.awb .awmed img,html:root body .oqcs-img img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  html:root body .awcard.awb:hover .awmed img{transform:scale(1.2) rotate(-7deg)}
  html:root body .oqcs-card:hover .oqcs-img img{transform:scale(1.22) rotate(-7deg)}
}

/* Cartes de récompense dans l'application : version écran de la carte Volt Spec */
html:root body .awcard.awb{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(120% 90% at 0% 0%,rgba(215,255,0,.20) 0,rgba(215,255,0,.05) 40%,transparent 62%),var(--vs-bg)!important;
  border:1px solid var(--vs-line)!important;color:var(--vs-ink)!important}
html:root body .awcard.awb::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(215,255,0,.55) 1px,transparent 1.5px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 18% 40%,#000 0,transparent 42%);mask-image:radial-gradient(circle at 18% 40%,#000 0,transparent 42%)}
html:root body .awcard.awb .awlab{font-family:var(--vs-mono)!important;font-weight:500!important;font-size:.7rem!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--vs-volt)!important}
html:root body .awcard.awb .awtxt b{font-family:var(--vs-title)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em;color:var(--vs-ink)!important}
html:root body .awcard.awb .muted{color:var(--vs-muted)!important}
html:root body .awcard.awb .awhook{color:var(--vs-ink)!important;font-style:normal;font-weight:700}
html:root body .awcard.awb .awsp{font-family:var(--vs-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vs-muted)}
html:root body .awcard.awb .btn{background:transparent!important;color:var(--vs-ink)!important;border:1.5px solid rgba(255,255,255,.4)!important;border-radius:999px!important}
html:root body .awcard.awb .btn.pri{background:var(--vs-volt)!important;color:#0B0B0A!important;border-color:var(--vs-volt)!important}
html:root body .awcard.awb .btn.warn{border-color:rgba(255,120,120,.6)!important;color:#FFB4B4!important}

/* Cartes tirées des statistiques (futsal, basket, handball, rugby) */
html:root body .oqcs-card{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(120% 80% at 0% 0%,rgba(215,255,0,.22) 0,rgba(215,255,0,.05) 42%,transparent 64%),var(--vs-bg)!important;border:1px solid var(--vs-line)}
html:root body .oqcs-img{width:84px!important;height:84px!important;background:radial-gradient(circle at 50% 56%,rgba(215,255,0,.24),transparent 64%)}
html:root body .oqcs-img img{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 8px 10px rgba(0,0,0,.55))}
html:root body .oqcs-t span{font-family:var(--vs-mono)!important;font-weight:500!important;letter-spacing:.14em!important;color:var(--vs-volt)!important}
html:root body .oqcs-t small{font-family:var(--vs-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--vs-muted)}
html:root body .oqcs-t b{text-transform:uppercase}

/* Collection de trophées (badges) : tuiles Volt Spec, la rareté reste lisible par la couleur de sa pastille */
html:root body .bcoll .badge{position:relative;isolation:isolate;overflow:hidden;border-radius:20px!important;color:var(--vs-ink)!important;
  background:radial-gradient(120% 70% at 50% 0%,rgba(215,255,0,.16) 0,rgba(215,255,0,.04) 42%,transparent 66%),var(--vs-bg)!important;
  border:1px solid var(--vs-line)!important;box-shadow:none!important}
html:root body .bcoll .badge::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(215,255,0,.55) 1px,transparent 1.5px);background-size:9px 9px;
  -webkit-mask-image:radial-gradient(circle at 50% 36%,#000 0,transparent 46%);mask-image:radial-gradient(circle at 50% 36%,#000 0,transparent 46%)}
html:root body .bcoll .badge[data-r="rar"]{--vs-r:#5CB8FF}html:root body .bcoll .badge[data-r="epi"]{--vs-r:#C08CFF}
html:root body .bcoll .badge[data-r="leg"]{--vs-r:#F2CB55;border-color:rgba(242,203,85,.38)!important}
html:root body .bcoll .badge[data-r="com"]{--vs-r:#C9CCC4}
html:root body .bcoll .badge .brar{font-family:var(--vs-mono)!important;font-style:normal!important;font-weight:700!important;font-size:.62rem!important;letter-spacing:.14em!important;text-transform:uppercase;
  background:transparent!important;color:var(--vs-r,var(--vs-volt))!important;border:1.5px solid var(--vs-r,var(--vs-volt))!important;border-radius:999px!important;padding:3px 10px!important;box-shadow:none!important}
html:root body .bcoll .badge b{font-family:var(--vs-title)!important;font-weight:400!important;text-transform:uppercase!important;letter-spacing:.01em;color:var(--vs-ink)!important}
html:root body .bcoll .badge small{font-family:var(--vs-mono)!important;font-size:.66rem!important;letter-spacing:.1em;text-transform:uppercase;color:var(--vs-muted)!important}
html:root body .bcoll .badge .bshare{background:var(--vs-volt)!important;color:#0B0B0A!important;border:0!important;border-radius:999px!important;font-weight:800}
html:root body .bcoll .badge.locked{background:#141413!important;border-style:dashed!important;border-color:rgba(255,255,255,.14)!important}
html:root body .bcoll .badge.locked::after{display:none}
html:root body .bcoll .badge.locked .brar{color:var(--vs-muted)!important;border-color:rgba(255,255,255,.25)!important}
html:root body .bcoll .badge.locked small{text-transform:none;font-family:"Figtree",Arial,sans-serif!important;font-size:.74rem!important;letter-spacing:0}
html:root body .nextb{background:radial-gradient(120% 90% at 0% 0%,rgba(215,255,0,.16),transparent 60%),var(--vs-bg)!important;color:var(--vs-ink)!important;border:1px solid var(--vs-line)!important;border-radius:20px!important}
html:root body .nextb small{color:var(--vs-muted)!important}
html:root body .nextb .nbar{background:rgba(255,255,255,.12)!important}html:root body .nextb .nbar i{background:var(--vs-volt)!important}
@media (prefers-reduced-motion:no-preference){html:root body .bcoll .badge.on .awmed img{transition:transform .35s cubic-bezier(.2,.8,.2,1)}html:root body .bcoll .badge.on:hover .awmed img{transform:scale(1.2) rotate(-7deg)}}

/* Accueil en tuiles (bento) : les blocs de l'accueil premium se rangent dans une grille, deux tuiles s'ajoutent */
html:root body .oqb-bento.oqb-bento.oqb-bento{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
html:root body .oqb-bento.oqb-bento.oqb-bento>*{grid-column:1/-1;min-width:0;margin:0!important}
html:root body .oqb-bento.oqb-bento.oqb-bento>.oqcommunity-entry,html:root body .oqb-bento.oqb-bento.oqb-bento>.oqsp-entry{grid-column:auto}
html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home{display:contents!important}
html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>*{grid-column:1/-1;min-width:0;margin:0!important}
html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqp-newslink{grid-column:1/-1}
html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqb-form,html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqb-hero,html:root body .oqb-bento.oqb-bento.oqb-bento>.oqb-form,html:root body .oqb-bento.oqb-bento.oqb-bento>.oqb-hero{grid-column:auto}
html:root body .oqb-bento.oqb-bento.oqb-bento .oqquick-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html:root body .oqb-bento.oqb-bento.oqb-bento .oqquick-grid>button{min-width:0;border-radius:16px!important}
html:root body .oqb-bento.oqb-bento.oqb-bento .oqfan-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html:root body .oqb-bento.oqb-bento.oqb-bento .oqfan-grid>.oqfan-tile:first-child{grid-column:1/-1}
@media (min-width:900px){
  html:root body .oqb-bento.oqb-bento.oqb-bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqp-hero{grid-column:1/3;grid-row:span 2}
  html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqp-sec{grid-column:3/5}
  html:root body .oqb-bento.oqb-bento.oqb-bento>.oqp-home>.oqp-newslink{grid-column:3/5}
  html:root body .oqb-bento.oqb-bento.oqb-bento>.bento.oqhome-conv,html:root body .oqb-bento.oqb-bento.oqb-bento>.oqquick{grid-column:span 2}
  html:root body .oqb-bento.oqb-bento.oqb-bento .oqfan-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  html:root body .oqb-bento.oqb-bento.oqb-bento .oqfan-grid>.oqfan-tile:first-child{grid-column:auto}
}
/* Tuiles ajoutées : forme du moment et héros du dernier match */
html:root body .oqb-tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  min-height:172px;padding:16px;border-radius:22px;border:1px solid var(--vs-line);color:var(--vs-ink);font:inherit;cursor:default;
  background:radial-gradient(130% 90% at 0% 0%,rgba(215,255,0,.18) 0,rgba(215,255,0,.04) 42%,transparent 64%),var(--vs-bg)}
html:root body button.oqb-tile{cursor:pointer}
html:root body .oqb-k{font-family:var(--vs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
html:root body .oqb-chips{display:flex;gap:5px;margin-top:4px;flex-wrap:wrap}
html:root body .oqb-r{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;font-style:normal;font-family:var(--vs-title);font-size:.95rem;line-height:1}
html:root body .oqb-r0{background:var(--vs-volt);color:#0B0B0A}html:root body .oqb-r1{background:rgba(255,255,255,.16);color:#fff}html:root body .oqb-r2{background:transparent;color:#FF8A8A;border:1.5px solid rgba(255,138,138,.6)}
html:root body .oqb-big{margin-top:auto;font-family:var(--vs-title);font-weight:400;font-size:3.6rem;line-height:.9;color:var(--vs-volt);font-variant-numeric:tabular-nums}
html:root body .oqb-big small{font-size:1.4rem;color:rgba(255,255,255,.55)}
html:root body .oqb-lab{font-family:var(--vs-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vs-volt);max-width:60%}
html:root body .oqb-name{font-family:var(--vs-title);font-weight:400;font-size:clamp(1.15rem,5.6vw,1.55rem);line-height:1;text-transform:uppercase;margin-top:auto;max-width:100%;overflow-wrap:normal;word-break:normal;text-shadow:0 2px 10px rgba(0,0,0,.7);position:relative;z-index:1}
html:root body .oqb-stat{font-family:var(--vs-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;position:relative;z-index:1}
html:root body .oqb-opp{font-size:.75rem;color:var(--vs-muted);position:relative;z-index:1}
html:root body .oqb-tile .oqb-img{position:absolute!important;right:-14px!important;top:22px!important;left:auto!important;bottom:auto!important;width:62%!important;height:auto!important;aspect-ratio:1/1;z-index:0!important;display:block!important;margin:0!important;padding:0!important;background:radial-gradient(circle at 50% 56%,rgba(215,255,0,.24),transparent 64%)}
html:root body .oqb-img img{width:100%;height:100%;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
/* Apparition en cascade à l'arrivée sur l'accueil */
@media (prefers-reduced-motion:no-preference){
  @keyframes oqbIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
  html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>*:not(.oqp-home),html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*{animation:oqbIn .45s cubic-bezier(.2,.8,.2,1) both}
  html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*:nth-child(2){animation-delay:.05s}html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*:nth-child(3){animation-delay:.1s}
  html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*:nth-child(4){animation-delay:.15s}html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*:nth-child(5){animation-delay:.2s}
  html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>.oqp-home>*:nth-child(n+6){animation-delay:.25s}
  html:root body .oqb-bento.oqb-bento.oqb-bento.oqb-in>*:nth-child(n+3):not(.oqp-home){animation-delay:.3s}
  html:root body button.oqb-tile:active{transform:scale(.98)}
}
html:root body #main>.stack.oqb-bento{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:900px){html:root body #main>.stack.oqb-bento{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Raccourcis en tuiles : sur téléphone étroit, seul le titre reste (la description chargeait la tuile) */
@media (max-width:459px){html:root body .oqb-bento.oqb-bento.oqb-bento .oqquick-grid>button small{display:none!important}
  html:root body .oqb-bento.oqb-bento.oqb-bento .oqquick-grid>button{min-height:64px!important;padding:12px 10px!important;justify-content:center!important}
  html:root body .oqb-bento.oqb-bento.oqb-bento .oqquick-grid>button b{font-size:.92rem;line-height:1.15}}
/* Arabe et chinois : pas d'espacement entre les lettres (il casse la liaison des lettres arabes), police système pour les micro-étiquettes */
html:root:lang(ar) body :is(.awlab,.oqcs-t span,.oqcs-t small,.brar,.bcoll .badge small,.oqb-k,.oqb-lab,.oqb-stat),
html:root:lang(zh) body :is(.awlab,.oqcs-t span,.oqcs-t small,.brar,.bcoll .badge small,.oqb-k,.oqb-lab,.oqb-stat){letter-spacing:0!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Arabic","Noto Sans SC",sans-serif!important;text-transform:none!important}
html:root[dir=rtl] body .oqb-tile{text-align:right;align-items:flex-start}
html:root[dir=rtl] body .oqb-tile .oqb-img{right:auto!important;left:-14px!important}
html:root[dir=rtl] body .oqb-img img{transform:scaleX(-1) rotate(-8deg)}

/* Correctif (2 novembre 2026) : en thème sombre, les onglets de rubrique (.hubseg, .vesttabs) recevaient le fond blanc
   du thème clair (onziq-premium.css) avec un texte blanc, donc illisibles. On rétablit les couleurs du thème sombre ;
   le thème clair ne change pas. */
html.ui-dark body #main .hubseg>button,html.ui-dark body #main .vesttabs>button{background:var(--fill)!important;color:var(--ink)!important;border-color:transparent!important}
html.ui-dark body #main .hubseg>button[aria-selected="true"],html.ui-dark body #main .vesttabs>button[aria-selected="true"],html.ui-dark body #main .vesttabs>button[aria-pressed="true"]{background:var(--ink)!important;color:var(--bg)!important;border-color:var(--ink)!important}