/* === base (accueil) === */
:root {
  --sol: #0c0d12;
  --sol-2: #121319;
  --sol-3: #191b23;
  --trait: rgba(255,255,255,.075);
  --trait-fort: rgba(255,255,255,.14);
  --encre: #f4f2ec;
  --encre-2: #b3b2bd;
  --encre-3: #8e8d9a;
  --commun: #b9b9c3;
  --normal: #4fd67d;
  --rare: #3d9cff;
  --epique: #b777ff;
  --legendaire: #ffc53d;
  --twitch: #9146ff;
  --twitch-2: #a873ff;
  --twitch-3: #7b35ee;
  --titre: 'Unbounded', 'Onest', sans-serif;
  --texte: 'Onest', system-ui, sans-serif;
  --pixel: 'Pixelify Sans', 'Onest', sans-serif;
  --panneau: 420px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-color: #33343f var(--sol); }
body { background: var(--sol); color: var(--encre); font-family: var(--texte); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--legendaire); }
::selection { background: var(--legendaire); color: #16120a; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--sol); }
::-webkit-scrollbar-thumb { background: #2c2d37; border-radius: 10px; border: 2px solid var(--sol); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
:focus-visible { outline: 2px solid var(--legendaire); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }


/* ================= CARTE OBJET (composant partagé) =================
   Tout l'intérieur est dimensionné en cqi : la carte garde ses proportions
   à 64 comme à 200 px de large. */
.carte {
  --c: var(--commun);
  container-type: inline-size;
  position: relative; aspect-ratio: 5 / 7; border-radius: 14px;
  background:
    radial-gradient(120% 70% at 50% 18%, color-mix(in oklab, var(--c) 30%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--c) 16%, #15161d) 0%, #121319 58%, #0f1015 100%);
  border: 1px solid color-mix(in oklab, var(--c) 42%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 24px -12px rgba(0,0,0,.8);
  overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
}
.carte.normal { --c: var(--normal); } .carte.rare { --c: var(--rare); }
.carte.epique { --c: var(--epique); } .carte.legendaire { --c: var(--legendaire); }
.carte-haut { display: flex; justify-content: space-between; align-items: center; gap: 2cqi; padding: 6cqi 6cqi 0; min-height: 17cqi; }
/* Rareté en toutes lettres, en haut à gauche */
.pastille-rarete {
  font-family: var(--titre); font-weight: 800; font-size: 6cqi; line-height: 1; letter-spacing: .01em; white-space: nowrap;
  color: #101116; background: var(--c); border-radius: 3cqi; padding: 2.2cqi 3.2cqi 2.4cqi;
}
/* Améliorations (+N, puis MAX au plafond), en haut à droite, dès le premier doublon */
.niveau-tag {
  font-family: var(--titre); font-weight: 800; font-size: 6.6cqi; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap;
  color: #101116; background: var(--encre); border-radius: 3cqi; padding: 2.2cqi 2.8cqi 2.4cqi;
}
.niveau-tag.max { background: var(--c); }
.carte-art { flex: 1; min-height: 0; position: relative; }
.carte-art img { position: absolute; inset: 2cqi 10cqi; width: calc(100% - 20cqi); height: calc(100% - 4cqi); object-fit: contain; object-position: center; filter: drop-shadow(0 4cqi 5cqi rgba(0,0,0,.55)); }
/* Nom puis emplacement, centrés ; le bas reste libre pour le label « Équipé » */
.carte-texte { padding: 1cqi 7cqi 14cqi; text-align: center; }
.carte-nom { font-weight: 600; font-size: 9.6cqi; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; text-wrap: balance; }
.carte-sous { color: var(--encre-3); font-size: 7cqi; margin-top: 1.2cqi; }
/* « Imaginé par » : bandeau doré en pied de carte pour les objets créés par la communauté. */
.carte-auteur {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 2.6cqi 5cqi 3cqi; text-align: center;
  font-size: 6.2cqi; line-height: 1.15; font-weight: 500; color: #e9c466; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(255,197,61,.05), rgba(255,197,61,.2)); border-top: 1px solid rgba(255,197,61,.45);
}
.carte-auteur b { font-weight: 800; color: var(--legendaire); }
/* Le pied de carte est pris par le bandeau : « Équipé » monte en haut à droite, sous le niveau. */
.carte.forgee .equipe-tag { left: auto; right: 6cqi; bottom: auto; top: 19cqi; }
.carte.forgee .carte-texte { padding-bottom: 16cqi; }
.carte.verrouillee .carte-auteur { opacity: .55; }
.pilule.badge-abonne { --c: var(--twitch-2); color: #d9c4ff; white-space: nowrap; }
.joueur-puce .badge-abonne { margin-top: 3px; font-size: 11px; padding: 1px 7px; }
.pilule.auteur { --c: var(--legendaire); color: var(--legendaire); }
.pilule.auteur b { color: #fff3cf; }
.fiche-auteur b { color: var(--legendaire); }
/* Reflet holographique des légendaires : une bande de lumière qui balaie la carte. */
.carte.legendaire::after, .carte.brillante::after {
  content: ""; position: absolute; inset: -40%; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,236,170,.0) 42%, rgba(255,236,170,.32) 50%, rgba(255,255,255,.0) 58%, transparent 62%);
  transform: translateX(-60%); animation: reflet 4.8s var(--ease) infinite;
  mix-blend-mode: screen;
}
.carte.legendaire { box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 1px color-mix(in oklab, var(--legendaire) 30%, transparent), 0 12px 26px -12px rgba(0,0,0,.85); }
@keyframes reflet { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }


/* ================= CARTE UNIQUE : « ciel » =================
   Un seul exemplaire sur le serveur. C'est la seule carte animée au repos (exception voulue à la règle « la lueur se mérite ») :
   nuit teintée de la couleur du trait (fond uni), constellation tirée de la graine de l'exemplaire (toujours la même pour la même carte),
   aurore aux couleurs du trait au pied de la carte, objet qui flotte, vague holographique qui balaie en diagonale et liseré
   aux couleurs du trait qui fait le tour. Les teintes --c1 / --c2 sont posées par App.carte selon le trait (sinon la rareté). */
.carte.unique {
  --iris: #ff8fb3, #ffd76a, #8dffc0, #7cc4ff, #c79bff, #ff8fb3;
  --c1: var(--c); --c2: var(--c);
  background: linear-gradient(180deg, color-mix(in oklab, var(--c1) 26%, #0b0d1c) 0%, color-mix(in oklab, var(--c1) 15%, #07080f) 55%, color-mix(in oklab, var(--c1) 8%, #040407) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in oklab, var(--c1) 22%, transparent), 0 14px 30px -14px rgba(0,0,0,.95);
}
.carte.unique .carte-haut, .carte.unique .carte-texte { position: relative; z-index: 3; }
.carte.unique .carte-art { z-index: 2; }
/* L'illustration garde sa taille d'origine (236 px au plus) : réduite si la carte est petite, jamais étirée. */
.carte.unique .carte-art img { object-fit: scale-down; filter: drop-shadow(0 3.5cqi 3.5cqi rgba(0,0,0,.8)) drop-shadow(0 0 5cqi color-mix(in oklab, var(--c1) 35%, transparent)); animation: unique-flotte 3.8s ease-in-out infinite alternate; }
.carte.unique .carte-texte { padding: 1cqi 7cqi 17cqi; text-shadow: 0 .6cqi 3.5cqi rgba(0,0,0,.85); }
/* Le trait remplace le type d'objet ; il porte la teinte du trait. */
.carte-trait {
  margin-top: 1.4cqi; font-family: var(--titre); font-weight: 800; font-size: 5.8cqi; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase;
  color: color-mix(in oklab, var(--c1) 55%, #fff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* « Unique » et le pied de carte : les couleurs avancent en continu. */
.pastille-unique, .carte-serie { background: linear-gradient(90deg, var(--iris)) 0 0 / 300% 100%; color: #101116; animation: iris-avance 6s linear infinite; }
.carte-serie { z-index: 4; display: flex; align-items: center; justify-content: center; gap: 2.4cqi; border-top: 0; }
.carte-serie b { color: #101116; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.serie-no { flex: none; font-family: var(--titre); font-weight: 800; font-size: 5.4cqi; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.serie-no:not(:last-child)::after { content: "·"; margin-left: 2.4cqi; }
/* Le ciel (SVG dessiné par App.carte) : constellation, étoiles qui s'allument chacune à son rythme. */
.carte-ciel { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.carte-ciel line { stroke: rgba(255,255,255,.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte-ciel .etoile { fill: #fff; opacity: .18; animation: unique-scintille var(--d, 5s) ease-in-out infinite; animation-delay: var(--r, 0s); }
/* L'aurore : deux nappes aux couleurs du trait qui ondulent au pied de la carte. */
.carte-aurore {
  position: absolute; left: -30%; right: -30%; bottom: -12%; height: 66%; z-index: 0; pointer-events: none; filter: blur(7cqi); opacity: .8;
  background:
    radial-gradient(42% 55% at 28% 82%, color-mix(in oklab, var(--c1) 60%, transparent), transparent 70%),
    radial-gradient(36% 50% at 66% 86%, color-mix(in oklab, var(--c2) 45%, transparent), transparent 70%),
    radial-gradient(30% 45% at 92% 72%, color-mix(in oklab, var(--c1) 30%, transparent), transparent 70%);
  animation: unique-ondule 9s ease-in-out infinite alternate;
}
/* La vague holographique : une bande irisée qui balaie la carte en diagonale, puis attend. */
.carte.unique::before { content: none; }
.carte.unique::after {
  content: ""; position: absolute; inset: -40%; z-index: 5; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 40%, rgba(255,143,179,0) 43%, rgba(255,143,179,.5) 47%, rgba(255,215,106,.55) 50%, rgba(141,255,192,.55) 53%, rgba(124,196,255,.5) 56%, rgba(199,155,255,0) 60%, transparent 63%);
  transform: translateX(-70%); animation: unique-vague 6s var(--ease) infinite;
}
/* Le liseré : une lueur aux couleurs du trait, avec un point chaud blanc, qui fait le tour de la carte. */
.carte-cadre {
  position: absolute; inset: 0; z-index: 6; border-radius: inherit; padding: max(1px, .6cqi); pointer-events: none; overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.carte-cadre::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg, rgba(255,255,255,.1) 0 50%, color-mix(in oklab, var(--c2) 70%, transparent) 62%, var(--c1) 74%, #fff 82%, var(--c1) 88%, rgba(255,255,255,.1) 100%);
  animation: unique-tourne 7s linear infinite;
}
@keyframes unique-flotte { from { transform: translateY(1.8cqi) rotate(-1deg); } to { transform: translateY(-1.8cqi) rotate(1deg); } }
@keyframes unique-scintille { 0%, 62%, 100% { opacity: .18; } 70% { opacity: 1; } 78% { opacity: .3; } 84% { opacity: .9; } }
@keyframes unique-ondule { from { transform: translateX(-6%) skewX(-6deg) scaleY(1); } to { transform: translateX(6%) skewX(6deg) scaleY(1.18); } }
@keyframes unique-vague { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
@keyframes unique-tourne { to { transform: rotate(1turn); } }
@keyframes iris-avance { to { background-position: -150% 0; } }

/* ---------- Lootbox : le coffre qui tremble, s'ouvre et libère les cartes ---------- */
#lootbox .colonne { max-width: 960px; }
.cf-o { fill: var(--contour, #160f0c); } .cf-b { fill: var(--bois, #7b4a2a); } .cf-bc { fill: var(--bois-clair, #a0643a); }
.cf-bs { fill: var(--bois-sombre, #4b2c19); } .cf-m { fill: var(--metal, #9a9cae); } .cf-ms { fill: var(--metal-sombre, #5d5f70); } .cf-s { fill: var(--serrure, #ffc53d); }
.version-legendaire { --bois: #3b2566; --bois-clair: #553692; --bois-sombre: #231543; --metal: #ffc53d; --metal-sombre: #b8841f; --serrure: #fff1c2; }

.types-lootbox { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.type-lootbox {
  display: flex; gap: 14px; align-items: center; text-align: left; padding: 14px 16px; border-radius: 16px;
  background: var(--sol-2); border: 1px solid var(--trait); transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.type-lootbox:hover { border-color: var(--trait-fort); }
.type-lootbox[aria-pressed="true"] { border-color: color-mix(in oklab, var(--c-type) 70%, transparent); background: color-mix(in oklab, var(--c-type) 9%, var(--sol-2)); }
.type-lootbox[data-type="standard"] { --c-type: var(--encre-2); }
.type-lootbox[data-type="legendaire"] { --c-type: var(--legendaire); }
.type-lootbox svg { flex: none; width: 56px; height: auto; }
.type-lootbox .titre-type { display: block; font-size: 15.5px; font-weight: 700; color: var(--encre); }
.type-lootbox[data-type="legendaire"] .titre-type { color: var(--legendaire); }
.type-lootbox .texte-type { display: block; font-size: 14px; color: var(--encre-2); margin-top: 2px; line-height: 1.45; }
.type-lootbox:disabled { cursor: progress; }

.table-jeu {
  position: relative; margin-top: 14px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(55% 60% at 50% 100%, rgba(145,70,255,.13), transparent 70%), var(--sol-2);
  border: 1px solid var(--trait); height: var(--h-table, 420px);
}
.table-jeu::before { /* feutrine discrète */
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 14px 14px;
}
.table-jeu.passable { cursor: pointer; }
.table-jeu.flash-leg::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255,244,214,.95), rgba(255,197,61,.35) 35%, transparent 70%);
  animation: flash-table 1s ease-out forwards;
}
@keyframes flash-table { from { opacity: 1; } to { opacity: 0; } }

.coffre { --lueur: #f4f2ec; --force: 1; position: absolute; left: 50%; top: 50%; width: min(230px, 46%); translate: -50% -46%; z-index: 2; transition: translate .7s var(--ease); }
.coffre svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 14px rgba(0,0,0,.65)); transition: opacity .5s var(--ease), scale .6s var(--ease); }
.coffre:not(.tremble):not(.ouvert) svg { animation: flotte 3.4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-5px); } }
.coffre.tremble svg { animation: secousse .11s linear infinite; }
@keyframes secousse {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  25% { transform: translate(calc(var(--force) * -1.6px), calc(var(--force) * .6px)) rotate(calc(var(--force) * -.9deg)); }
  50% { transform: translate(calc(var(--force) * 1.4px), calc(var(--force) * -.8px)) rotate(calc(var(--force) * .7deg)); }
  75% { transform: translate(calc(var(--force) * -.8px), calc(var(--force) * -.4px)) rotate(calc(var(--force) * -.4deg)); }
}
.couvercle { transform-box: fill-box; transform-origin: 50% 50%; }
.coffre.tremble .couvercle { animation: sautille .2s steps(2) infinite; }
@keyframes sautille { 50% { transform: translateY(calc(var(--force) * -.35px)); } }
/* À l'ouverture, le couvercle saute, tournoie et retombe au sol à côté du coffre (le choc est sonorisé par lootbox.js, à 62 % de la durée). */
.coffre.ouvert .couvercle { animation: couvercle-saute .8s linear forwards; }
@keyframes couvercle-saute {
  0% { transform: translate(0, 0) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  30% { transform: translate(-9px, -24px) rotate(-170deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  62% { transform: translate(-19px, 5.5px) rotate(-432deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  78% { transform: translate(-19.5px, 3.5px) rotate(-446deg); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translate(-20px, 5.5px) rotate(-438deg); }
}
.fente { fill: var(--lueur); opacity: 0; transition: opacity .3s, fill .35s; }
.coffre.tremble .fente { opacity: calc(.3 + var(--force) * .16); }
.interieur { fill: var(--lueur); opacity: 0; transition: opacity .2s; }
.coffre.ouvert .interieur { opacity: 1; }
.halo {
  position: absolute; left: 50%; top: 40%; width: 170%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in oklab, var(--lueur) 60%, transparent), transparent 62%);
  opacity: 0; scale: .5; transition: opacity .35s, scale .45s var(--ease);
}
.coffre.tremble .halo { opacity: calc(.1 + var(--force) * .09); scale: calc(.55 + var(--force) * .09); }
.coffre.ouvert .halo { opacity: .9; scale: 1.2; }
.faisceau {
  position: absolute; left: 50%; bottom: 58%; width: 62%; height: 210%; translate: -50% 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--lueur) 80%, #fff), color-mix(in oklab, var(--lueur) 35%, transparent) 45%, transparent);
  clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0); filter: blur(5px);
  opacity: 0; transform-origin: 50% 100%; scale: 1 0; transition: opacity .3s, scale .55s var(--ease);
}
.coffre.ouvert .faisceau { opacity: .85; scale: 1 1; }
.rayons {
  position: absolute; left: 50%; top: 38%; width: 360%; aspect-ratio: 1; translate: -50% -50%; z-index: -2; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in oklab, var(--lueur) 40%, transparent) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 14%, transparent 60%); mask: radial-gradient(circle, #000 0 14%, transparent 60%);
  opacity: 0; transition: opacity .6s; animation: rayons 16s linear infinite;
}
@keyframes rayons { to { rotate: 360deg; } }
.coffre.rayonne .rayons { opacity: .75; }
.onde { position: absolute; left: 50%; top: 40%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; border: 3px solid var(--lueur); opacity: 0; pointer-events: none; }
.coffre.ouvert .onde { animation: onde .8s var(--ease) forwards; }
@keyframes onde { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(9); } }
/* Une fois les cartes sorties, le coffre s'efface : il ne reste que sa lumière derrière elles. */
.coffre.recule { translate: -50% -50%; }
.coffre.recule svg { opacity: 0; scale: .7; }
.coffre.recule .faisceau, .coffre.recule .fente { opacity: 0; }
.coffre.recule .halo { opacity: .45; scale: 1.6; }

.etincelle {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; background: var(--c); z-index: 3; pointer-events: none;
  animation: etincelle var(--d, .9s) cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes etincelle { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 50px)) scale(.4) rotate(90deg); opacity: 0; } }

.dcarte { position: absolute; left: 0; top: 0; width: var(--dw, 124px); transition: transform .75s var(--ease), opacity .35s; will-change: transform; perspective: 900px; z-index: 4; }
.dcarte-in { position: relative; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.dcarte.retournee .dcarte-in { transform: rotateY(180deg); }
.dos, .dcarte .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dcarte .face { position: absolute; inset: 0; transform: rotateY(180deg); }
.dos {
  aspect-ratio: 5 / 7; border-radius: 14px; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.045) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #2a1d4a, #15121f 60%, #0f0e15);
  border: 1px solid rgba(183,119,255,.55);
  box-shadow: inset 0 0 0 5px #15121f, inset 0 0 0 6px rgba(255,197,61,.85), 0 12px 26px -12px rgba(0,0,0,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 11.6% 0;
}
/* Le losange derrière le coffre, puis le nom (lisible dans les deux sens) et le coffre par-dessus. */
.dos::before { content: ""; position: absolute; left: 26%; top: 50%; width: 48%; aspect-ratio: 1; translate: 0 -50%; rotate: 45deg; background: #0f0e15; box-shadow: 0 0 0 1px var(--legendaire), 0 0 0 4px #15121f, 0 0 0 5px rgba(183,119,255,.7); }
.dos b { position: relative; font: 400 calc(var(--dw, 124px) * .055)/1 var(--pixel); letter-spacing: .16em; color: var(--legendaire); white-space: nowrap; }
.dos b:last-child { rotate: 180deg; }
.dos img { position: relative; width: 48%; }
/* Anticipation : le dos s'illumine de la couleur de rareté avant de se retourner. */
.dcarte.charge .dos { animation: vibre var(--vib, .5s) linear; box-shadow: inset 0 0 0 5px #15121f, inset 0 0 0 6px var(--c), 0 0 38px -4px var(--c), 0 0 90px -20px var(--c); border-color: var(--c); transition: box-shadow .3s, border-color .3s; }
@keyframes vibre { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-1.5px,1px) rotate(-.6deg) } 40% { transform: translate(1.5px,-1px) rotate(.6deg) } 60% { transform: translate(-1px,-1px) } 80% { transform: translate(1px,1px) rotate(.4deg) } }
.dcarte .libelle-rarete {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 6px); opacity: 0;
  font-family: var(--titre); font-weight: 700; font-size: clamp(10px, calc(var(--dw, 124px) * .1), 12.5px); letter-spacing: .01em; color: var(--c); white-space: nowrap;
  transition: opacity .4s, transform .4s var(--ease);
}
.dcarte.retournee .libelle-rarete { opacity: 1; transform: translate(-50%, 0); }
.dcarte.haute.retournee .face { box-shadow: 0 0 0 1px var(--c), 0 22px 44px -18px color-mix(in oklab, var(--c) 70%, transparent); }
.eclat { position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, color-mix(in oklab, var(--c) 70%, transparent) 0%, transparent 62%); opacity: 0; transform: scale(.4); }
.dcarte.eclate .eclat { animation: eclat 1.1s var(--ease) forwards; }
@keyframes eclat { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }
.btn-passer {
  position: absolute; right: 14px; bottom: 14px; z-index: 7; padding: 8px 13px; border-radius: 10px;
  background: rgba(12,13,18,.75); border: 1px solid var(--trait-fort); font-size: 13px; font-weight: 600; color: var(--encre-2);
}
.btn-passer:hover { color: var(--encre); }

.commandes-coffre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 14px; }
.boutons-ouvrir { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-ouvrir {
  font-family: var(--titre); font-weight: 700; font-size: 14.5px; letter-spacing: -.005em;
  padding: 13px 20px; border-radius: 12px; color: #16120a; background: var(--legendaire);
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.9), inset 0 -2px 0 rgba(0,0,0,.18);
  transition: transform .2s var(--ease), filter .2s, opacity .2s;
}
.btn-ouvrir.second { background: transparent; color: var(--legendaire); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--legendaire) 65%, transparent); }
.btn-ouvrir:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ouvrir:active { transform: translateY(1px); }
.btn-ouvrir:disabled { opacity: .4; cursor: progress; transform: none; }
.btn-son { display: inline-flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--trait-fort); font-size: 14px; font-weight: 600; color: var(--encre-2); }
.btn-son svg { width: 18px; height: 18px; }
.btn-son:hover { color: var(--encre); }
.btn-son[aria-pressed="false"] .onde-son { display: none; }


.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.etiquette {
  --c: var(--encre-2);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 11px; border-radius: 999px;
  background: var(--sol-2); border: 1px solid var(--trait-fort); font-size: 14px; font-weight: 600; color: var(--encre);
  transition: background .2s, border-color .2s, color .2s, transform .2s var(--ease);
}
.etiquette::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 22%, transparent); }
.etiquette .n { font-family: var(--texte); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--encre-3); font-size: 13px; }
.etiquette:hover { border-color: color-mix(in oklab, var(--c) 60%, transparent); transform: translateY(-1px); }
.etiquette[aria-pressed="true"] { background: color-mix(in oklab, var(--c) 18%, var(--sol-2)); border-color: var(--c); }
.etiquette[aria-pressed="true"] .n { color: var(--encre); }
.etiquette.sekiro { --c: #e2483d; } .etiquette.saignement { --c: #ff4d6d; } .etiquette.stun { --c: #ffd84d; }
.etiquette.poison { --c: #7ee06d; } .etiquette.brulure { --c: #ff8a3d; } .etiquette.parade { --c: #9fd6ff; }
.etiquette.soin { --c: #5ce0b8; } .etiquette.renvoi { --c: #d08bff; } .etiquette.bouclier { --c: #6ab8ff; }
.etiquette.souffle { --c: #f5f1e0; } .etiquette.antisoin { --c: #c24dff; } .etiquette.differe { --c: #ffb03d; }
.etiquette.vol { --c: #ff5e8a; } .etiquette.paralysie { --c: #fff07a; } .etiquette.stance { --c: #7aa7ff; }


.btn-twitch { margin-top: 28px; max-width: 360px; }
.pied { padding: 28px 0 40px; border-top: 1px solid var(--trait); margin-top: 90px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--encre-3); }
.pied nav { display: flex; gap: 18px; }
.pied a { color: var(--encre-2); text-decoration: none; }
.pied a:hover { color: var(--encre); }

/* ================= PANNEAU DE CONNEXION ================= */
.panneau-corps { padding: 34px 38px 0; display: flex; flex-direction: column; flex: 1; }
.panneau .marque svg { width: 40px; height: 40px; }
.panneau .marque b { font-size: 20px; }
.panneau h2 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 44px; }
.panneau .accroche { margin-top: 12px; color: var(--encre-2); font-size: 15.5px; }
.btn-twitch {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  margin-top: 28px; padding: 16px 20px; border-radius: 14px;
  background: var(--twitch); color: #fff; font-family: var(--titre); font-weight: 700; font-size: 15.5px; letter-spacing: -.005em;
  box-shadow: 0 14px 28px -14px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.2);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
  overflow: hidden;
}
.btn-twitch svg { width: 20px; height: 20px; flex: none; }
.btn-twitch:hover { background: var(--twitch-3); transform: translateY(-1px); box-shadow: 0 18px 32px -14px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 0 rgba(0,0,0,.2); }
.btn-twitch:active { transform: translateY(1px); }
.btn-twitch[aria-busy="true"] { cursor: progress; opacity: .8; }
.btn-twitch[aria-busy="true"] svg { animation: pulse-twitch 1s ease-in-out infinite; }
@keyframes pulse-twitch { 50% { opacity: .35; } }

/* ===================================================================
   COQUE DU SITE CONNECTÉ : barre latérale (bureau), barres haute/basse (mobile)
   =================================================================== */
body { overflow-x: clip; }
.coque { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 18px;
  padding: 20px 16px 16px; background: var(--sol-2); border-right: 1px solid var(--trait);
}
.lateral .marque, .barre-haute .marque-mobile { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lateral .marque b { font-family: var(--titre); font-size: 15px; white-space: nowrap; }
.lateral .marque { padding: 2px 6px; }
.ressource > div { min-width: 0; }
.lateral .marque svg, .barre-haute .marque-mobile svg { width: 32px; height: 32px; flex: none; }
.joueur-puce { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--sol-3); border: 1px solid var(--trait); text-decoration: none; }
.joueur-puce:hover { border-color: var(--trait-fort); }
.joueur-puce .avatar { width: 40px; height: 40px; flex: none; }
.joueur-puce b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joueur-puce span { font-size: 12.5px; color: var(--encre-3); }
.avatar { background: var(--sol-3); display: grid; place-items: center; font-weight: 700; color: var(--encre-2); overflow: hidden; border: 1px solid var(--trait-fort); border-radius: 50%; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.ressources { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ressource { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--sol); border: 1px solid var(--trait); text-decoration: none; min-width: 0; }
.ressource svg { width: 18px; height: 18px; flex: none; }
.ressource b { font-family: var(--titre); font-size: 14px; font-variant-numeric: tabular-nums; }
.ressource b { display: block; line-height: 1.2; white-space: nowrap; }
.ressources .ressource span, .ressources-mobile .ressource span { display: none; }   /* le nom : seulement dans la légende du menu « Plus » (et en infobulle) */
.ressource span { display: block; font-size: 11px; color: var(--encre-3); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ressource.a-faire { border-color: color-mix(in oklab, var(--legendaire) 45%, transparent); }

.nav-principale { display: grid; gap: 2px; }
.nav-principale a, .nav-bas a, .nav-bas button {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; text-decoration: none;
  color: var(--encre-2); font-size: 14.5px; font-weight: 600; transition: background .15s, color .15s; width: 100%; text-align: left;
}
.nav-principale a svg, .nav-bas a svg, .nav-bas button svg { width: 19px; height: 19px; flex: none; }
.nav-principale a:hover, .nav-bas a:hover, .nav-bas button:hover { background: var(--sol-3); color: var(--encre); }
.nav-principale a[aria-current="page"], .nav-bas a[aria-current="page"] { background: color-mix(in oklab, var(--legendaire) 12%, var(--sol-3)); color: var(--encre); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--legendaire) 35%, transparent); }
.nav-principale a[aria-current="page"] svg, .nav-bas a[aria-current="page"] svg { color: var(--legendaire); }
.nav-principale .pastille { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--legendaire); color: #16120a; font-size: 12px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.nav-bas { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--trait); }

.principal { min-width: 0; display: flex; flex-direction: column; }
.barre-haute { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 40px); background: color-mix(in oklab, var(--sol) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
.barre-haute .fil { font-size: 13.5px; color: var(--encre-3); }
.barre-haute .fil b { color: var(--encre); font-weight: 600; }
.barre-haute .outils { margin-left: auto; display: flex; gap: 8px; align-items: center; position: relative; }
.bouton-icone { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--encre-2); border: 1px solid var(--trait-fort); }
.bouton-icone:hover { color: var(--encre); background: var(--sol-2); }
.bouton-icone svg { width: 19px; height: 19px; }
.bouton-icone .point { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 0 2px var(--sol); }
.barre-haute .marque-mobile, .barre-haute .ressources-mobile { display: none; }

.contenu { width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px clamp(16px, 3vw, 40px) 80px; }
.entete-page { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 28px; }
.entete-page h1 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; }
.entete-page p { margin-top: 8px; color: var(--encre-2); font-size: 16px; max-width: 62ch; }
.entete-page .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.section-page { margin-top: 44px; }
.section-page > h2 { font-size: 22px; margin-bottom: 6px; }
.section-page > .sous { color: var(--encre-2); font-size: 14.5px; margin-bottom: 18px; max-width: 64ch; }

/* ---------- Panneaux, chiffres, onglets, champs, boutons ---------- */
.panneau-b { background: var(--sol-2); border: 1px solid var(--trait); border-radius: 18px; padding: 20px; }
.grille-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chiffre { padding: 14px 16px; border-radius: 14px; background: var(--sol-2); border: 1px solid var(--trait); min-width: 0; }
.chiffre b { display: block; font-family: var(--titre); font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.15; }
.chiffre span { font-size: 13px; color: var(--encre-3); }
.chiffre small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--encre-2); }
.onglets-b { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--sol-2); border: 1px solid var(--trait); }
.onglets-b button { padding: 8px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--encre-2); }
.onglets-b button:hover { color: var(--encre); }
.onglets-b button[aria-selected="true"], .onglets-b button[aria-pressed="true"] { background: var(--sol-3); color: var(--encre); box-shadow: inset 0 0 0 1px var(--trait-fort); }
.barre-filtres { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px; }
.champ { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 40px; border-radius: 11px; background: var(--sol-2); border: 1px solid var(--trait-fort); min-width: 0; }
.champ svg { width: 17px; height: 17px; color: var(--encre-3); flex: none; }
.champ input, .champ select { background: none; border: 0; color: var(--encre); font: inherit; font-size: 14.5px; outline: none; min-width: 0; width: 100%; }
.champ select option { background: var(--sol-2); }
.champ:focus-within { border-color: var(--legendaire); }
.btn-second { padding: 11px 16px; border-radius: 12px; border: 1px solid var(--trait-fort); font-weight: 600; font-size: 14.5px; color: var(--encre); transition: border-color .2s, background .2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn-second:hover { border-color: var(--encre-3); background: var(--sol-2); }
.btn-second:disabled { opacity: .45; cursor: not-allowed; }
.btn-second svg { width: 17px; height: 17px; }
.btn-principal { padding: 12px 18px; border-radius: 12px; background: var(--legendaire); color: #16120a; font-family: var(--titre); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 10px 22px -12px rgba(0,0,0,.9), inset 0 -2px 0 rgba(0,0,0,.18); transition: filter .2s, transform .2s var(--ease); text-decoration: none; }
.btn-principal:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-principal:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.btn-principal svg { width: 17px; height: 17px; }
.btn-danger { padding: 11px 16px; border-radius: 12px; background: #3a1418; border: 1px solid #7a2a31; color: #ffd9dc; font-weight: 700; font-size: 14.5px; }
.btn-danger:hover { background: #4a171d; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }
.interrupteur { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; background: var(--sol-3); border: 1px solid var(--trait-fort); transition: background .2s; }
.interrupteur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--encre-2); transition: transform .25s var(--ease), background .2s; }
.interrupteur[aria-checked="true"] { background: color-mix(in oklab, var(--normal) 35%, var(--sol-3)); border-color: color-mix(in oklab, var(--normal) 60%, transparent); }
.interrupteur[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }
.vide { padding: 28px; border-radius: 16px; border: 1px dashed var(--trait-fort); color: var(--encre-2); text-align: center; font-size: 15px; }
.vide b { display: block; color: var(--encre); font-size: 16px; margin-bottom: 4px; }
.mention { font-size: 13px; color: var(--encre-3); }
.pilule { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in oklab, var(--c, var(--encre-2)) 16%, transparent); color: var(--c, var(--encre-2)); border: 1px solid color-mix(in oklab, var(--c, var(--encre-2)) 35%, transparent); white-space: nowrap; }
.pilule.commun { --c: var(--commun); } .pilule.normal { --c: var(--normal); } .pilule.rare { --c: var(--rare); } .pilule.epique { --c: var(--epique); } .pilule.legendaire { --c: var(--legendaire); }
.chargement { display: grid; place-items: center; min-height: 40vh; color: var(--encre-3); font-size: 14px; }

/* ---------- Grille de cartes et états ---------- */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.case-carte { position: relative; display: grid; gap: 8px; text-align: left; min-width: 0; }
.case-carte > button.zone { display: block; border-radius: 14px; }
/* Survol des cartes (app.js, « Survol des cartes ») : la classe survolable est posée au premier survol, survol tant que la
   souris est dessus. La carte s'incline vers la souris (--rx/--ry), un reflet la suit (--px/--py), un halo léger de sa rareté
   s'allume dessous. Le halo répond au survol, pas au repos. */
.survolable { position: relative; transition: transform .45s var(--ease), box-shadow .3s; transform: perspective(720px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); }
.survolable.survol { --ty: -4px; z-index: 2; transition: transform .09s linear, box-shadow .3s; box-shadow: 0 18px 40px -12px color-mix(in oklab, var(--c, var(--trait-fort)) 80%, transparent), 0 0 0 1px color-mix(in oklab, var(--c, var(--trait-fort)) 35%, transparent); }
.survolable.survol::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.16), transparent 58%); }
.survolable:has(> .carte.commun) { --c: var(--commun); } .survolable:has(> .carte.normal) { --c: var(--normal); }
.survolable:has(> .carte.rare) { --c: var(--rare); } .survolable:has(> .carte.epique) { --c: var(--epique); }
.survolable:has(> .carte.legendaire) { --c: var(--legendaire); } .survolable:has(> .carte.unique) { --c: #c79bff; }
.survolable:has(> .carte.verrouillee) { --c: var(--trait-fort); }
@media (prefers-reduced-motion: reduce) { .survolable { transform: none !important; transition: box-shadow .3s; } }
.carte.verrouillee { filter: grayscale(1) brightness(.45); }
.carte .equipe-tag { position: absolute; left: 6cqi; bottom: 5cqi; z-index: 2; font-family: var(--titre); font-weight: 800; font-size: 6cqi; line-height: 1; color: #16120a; background: var(--legendaire); padding: 1.8cqi 3cqi 2cqi; border-radius: 3cqi; }
.jauge-niv { height: 5px; border-radius: 4px; background: var(--sol-3); overflow: hidden; }
.jauge-niv i { display: block; height: 100%; background: var(--c, var(--encre-2)); border-radius: 4px; }
.meta-carte { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--encre-3); }

/* ---------- Tiroir (fiche objet, sélecteurs) ---------- */
.voile { position: fixed; inset: 0; z-index: 60; background: rgba(5,6,9,.66); opacity: 0; transition: opacity .25s; }
.voile.ouvert { opacity: 1; }
.tiroir {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: min(580px, 100%); background: var(--sol-2); border-left: 1px solid var(--trait-fort);
  overflow-y: auto; transform: translateX(100%); transition: transform .38s var(--ease); display: flex; flex-direction: column;
}
.tiroir.ouvert { transform: none; }
.tiroir-tete { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--sol-2); border-bottom: 1px solid var(--trait); }
.tiroir-tete h2 { font-size: 18px; flex: 1; min-width: 0; }
.tiroir-corps { padding: 20px; display: grid; gap: 22px; flex: 1; align-content: start; }
.tiroir-pied { position: sticky; bottom: 0; padding: 14px 20px; background: var(--sol-2); border-top: 1px solid var(--trait); display: flex; gap: 10px; flex-wrap: wrap; }

/* Fiche objet exhaustive */
.fiche { display: grid; gap: 22px; }
.fiche-haut { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.fiche-haut .carte { width: 100%; }
.fiche-titre h3 { font-size: 22px; }
.fiche-titre .pilules { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fiche-titre p { margin-top: 10px; font-size: 14px; color: var(--encre-2); }
.pilule.pastille-unique { --iris: #ff8fb3, #ffd76a, #8dffc0, #7cc4ff, #c79bff, #ff8fb3; background: linear-gradient(90deg, var(--iris)) 0 0 / 300% 100%; color: #101116; border-color: transparent; animation: iris-avance 6s linear infinite; }
/* Fiche d'un objet unique : le trait mis en avant, aux couleurs du trait (--c1 / --c2 posées par App.blocTrait). */
.fiche-trait {
  position: relative; overflow: hidden; padding: 18px 20px 16px; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--c1) 45%, transparent);
  background: radial-gradient(90% 80% at 100% 0%, color-mix(in oklab, var(--c2) 22%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--c1) 16%, var(--sol-2)), var(--sol-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px color-mix(in oklab, var(--c1) 12%, transparent), 0 10px 30px -18px color-mix(in oklab, var(--c1) 60%, transparent);
}
.fiche-trait::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--c1), var(--c2)); }
.ft-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: color-mix(in oklab, var(--c1) 70%, #fff); }
.ft-tete .num { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--encre-2); }
.ft-nom { margin-top: 10px; font-family: var(--titre); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in oklab, var(--c1) 55%, #fff); text-shadow: 0 0 18px color-mix(in oklab, var(--c1) 55%, transparent); }
.ft-texte { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--encre); }
.ft-puissance { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #101116; background: linear-gradient(90deg, var(--c1), color-mix(in oklab, var(--c2) 60%, var(--c1))); }
.ft-puissance svg { width: 14px; height: 14px; }
.bloc-fiche h4 { font-family: var(--texte); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-3); margin-bottom: 10px; font-weight: 700; }
.lignes { display: grid; border-radius: 12px; border: 1px solid var(--trait); overflow: hidden; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 10px 14px; font-size: 14.5px; }
.ligne + .ligne { border-top: 1px solid var(--trait); }
.ligne span { color: var(--encre-2); }
.ligne b { font-variant-numeric: tabular-nums; text-align: right; }
.ligne b .gain { color: var(--normal); font-weight: 600; font-size: 12.5px; margin-left: 6px; }
.ligne b.negatif { color: #ff8a8a; }
.passif { padding: 12px 14px; border-radius: 12px; background: var(--sol-3); border: 1px solid var(--trait); font-size: 14.5px; line-height: 1.5; }
.passif + .passif { margin-top: 8px; }
.passif b { color: var(--encre); }
.passif small { display: block; margin-top: 4px; color: var(--encre-3); font-size: 12.5px; }
.curseur-niveau { display: flex; align-items: center; gap: 12px; }
.curseur-niveau input { flex: 1; accent-color: var(--legendaire); }
.curseur-niveau output { font-family: var(--titre); font-weight: 700; min-width: 76px; text-align: right; font-size: 14px; }
.scalings { display: flex; flex-wrap: wrap; gap: 8px; }
.scaling { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--sol-3); border: 1px solid var(--trait); font-size: 13.5px; }
.scaling b { font-family: var(--titre); font-size: 15px; color: var(--legendaire); }

/* ---------- Notifications et messages ---------- */
.pile-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: grid; gap: 8px; width: min(380px, calc(100% - 32px)); }
.toast { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: 14px; background: #1e1f28; border: 1px solid var(--trait-fort); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9); font-size: 14.5px; animation: toast-in .35s var(--ease); }
.toast svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--legendaire); }
.toast.erreur { background: #2a1216; border-color: #7a2a31; color: #ffd9dc; }
.toast.erreur svg { color: #ff8a8a; }
.toast div > b { display: block; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
.panneau-notifs { position: absolute; right: 0; top: calc(100% + 8px); width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; background: #1b1c24; border: 1px solid var(--trait-fort); border-radius: 16px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.95); z-index: 50; }
.panneau-notifs header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--trait); font-weight: 700; }
.panneau-notifs header a { font-size: 13px; font-weight: 600; color: var(--encre-2); }
.notif { display: flex; gap: 12px; padding: 12px 16px; font-size: 14px; }
.notif + .notif { border-top: 1px solid var(--trait); }
.notif.nouvelle { background: rgba(255,197,61,.05); }
.notif svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--legendaire); }
.notif time { display: block; font-size: 12px; color: var(--encre-3); margin-top: 2px; }
.bandeau-demo { background: #2a1d4a; color: #e8dcff; font-size: 13px; text-align: center; padding: 7px 12px; }

/* ---------- Mobile ---------- */
.barre-onglets { display: none; }
.feuille-plus { display: none; }
@media (max-width: 900px) {
  .coque { grid-template-columns: minmax(0, 1fr); }
  .lateral { display: none; }
  .barre-haute { padding: 10px 14px; }
  .barre-haute .fil { display: none; }
  .barre-haute .marque-mobile { display: inline-flex; }
  .barre-haute .marque-mobile b { display: none; }
  @media (max-width: 400px) { .barre-haute .marque-mobile { display: none; } }
  .barre-haute .ressources-mobile { display: flex; gap: 4px; overflow-x: auto; min-width: 0; }
  .barre-haute .ressources-mobile .ressource { padding: 4px 6px; gap: 5px; flex: none; }
  .barre-haute .ressources-mobile .ressource svg { width: 15px; height: 15px; }
  .barre-haute .ressources-mobile .ressource b { font-size: 12.5px; }
  .contenu { padding: 22px 16px 110px; }
  .barre-onglets {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in oklab, var(--sol-2) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--trait);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  }
  .barre-onglets a, .barre-onglets button { display: grid; justify-items: center; gap: 3px; padding: 6px 2px; border-radius: 10px; font-size: 11px; font-weight: 600; color: var(--encre-3); text-decoration: none; }
  .barre-onglets svg { width: 21px; height: 21px; }
  .barre-onglets [aria-current="page"] { color: var(--legendaire); }
  .feuille-plus.ouverte { display: block; position: fixed; left: 8px; right: 8px; bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: calc(100vh - 150px); max-height: calc(100dvh - 86px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; z-index: 45; padding: 8px; border-radius: 18px; background: #1b1c24; border: 1px solid var(--trait-fort); box-shadow: 0 24px 50px -16px rgba(0,0,0,.95); }
  .feuille-plus a, .feuille-plus button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--encre); text-decoration: none; }
  .feuille-plus svg { width: 20px; height: 20px; color: var(--encre-2); }
  .feuille-plus a[aria-current="page"] { background: var(--sol-3); }
  .fiche-haut { grid-template-columns: 110px minmax(0, 1fr); gap: 14px; }
  .grille-cartes { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
  .pile-toasts { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ================= Audit 01/10 : accessibilité et pied de page ================= */
.lien-evitement { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--legendaire); color: #16120a; font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease); }
.lien-evitement:focus { transform: none; }
.contenu:focus { outline: none; }
.pied-app { margin-top: 56px; padding: 22px clamp(16px, 4vw, 40px) calc(22px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trait); color: var(--encre-3); font-size: 13px; display: grid; gap: 8px; }
.pied-app nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-app a { color: var(--encre-2); text-decoration: none; }
.pied-app a:hover { color: var(--encre); text-decoration: underline; }
.legende-ressources { display: grid; gap: 8px; padding: 12px 4px 4px; border-top: 1px solid var(--trait); margin-top: 6px; font-size: 13px; }
.legende-ressources > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.legende-ressources a { color: var(--legendaire); }
@media (max-width: 899px) { .pied-app { margin-bottom: 72px; } }
/* Préférence « Réduire les effets » (Paramètres) : même effet que le réglage système. */
html.effets-reduits *, html.effets-reduits *::before, html.effets-reduits *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
.barre-publique { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(16px, 4vw, 40px); }
.barre-publique .marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.barre-publique .marque svg { width: 32px; height: 32px; }
.barre-publique .marque b { font-family: var(--titre); white-space: nowrap; }
@media (max-width: 620px) { .barre-publique .marque b { display: none; } }   /* le nom est long : sur téléphone, le coffre seul */

/* Réserves qui se rechargent : chrono du prochain +1 sous le nombre, toujours visible. */
.ressource .prochain { display: block; font-size: 10.5px; line-height: 1.25; color: var(--normal); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Emblème de rang de ligue (pages Ligue et Profil). Couleur de palier : --p. */
.lg-embleme { --p: #8e8d9a; position: relative; display: inline-grid; place-items: center; flex: none; color: var(--p); vertical-align: middle; }
.lg-embleme svg { width: 100%; height: 100%; fill: color-mix(in oklab, var(--p) 16%, transparent); }
.lg-embleme.fer, .lg-rang.fer { --p: #9a9aa6; } .lg-embleme.bronze, .lg-rang.bronze { --p: #d08a55; }
.lg-embleme.argent, .lg-rang.argent { --p: #cfd6e4; } .lg-embleme.or, .lg-rang.or { --p: #ffc53d; }
.lg-embleme.platine, .lg-rang.platine { --p: #5fe0d0; } .lg-embleme.diamant, .lg-rang.diamant { --p: #7fb6ff; }
.lg-embleme.maitre, .lg-rang.maitre { --p: #d79bff; }

/* Encart « réserve » (Lootbox, Duels) : compte, chrono du prochain gain passif, rappel de la règle. */
.encart-reserve { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 22px; padding: 14px 18px; border-radius: 16px; background: var(--sol-2); border: 1px solid var(--trait); }
.er-compte { display: flex; align-items: center; gap: 10px; color: var(--encre-2); font-size: 14px; }
.er-compte svg { width: 24px; height: 24px; flex: none; color: var(--legendaire); }
.er-compte b { font-size: 28px; line-height: 1; font-weight: 800; color: var(--encre); }
.er-chrono { display: grid; gap: 2px; padding-left: 22px; border-left: 1px solid var(--trait); font-size: 12.5px; color: var(--encre-2); }
.er-chrono b { font-size: 22px; line-height: 1.1; font-weight: 800; color: var(--normal); font-variant-numeric: tabular-nums; }
.er-chrono b:not(.num) { font-size: 15px; color: var(--encre-2); }
.er-note { margin: 0; font-size: 13.5px; color: var(--encre-2); }
.encart-reserve.vide .er-compte b, .encart-reserve.vide .er-compte svg { color: #ff9b9b; }
@media (max-width: 720px) { .encart-reserve { grid-template-columns: 1fr auto; } .er-note { grid-column: 1 / -1; } }

/* Texte réservé aux lecteurs d'écran (toutes les pages). */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* === Arène : historique des parcours (page Arène et profils) === */
.ap-liste { list-style: none; display: grid; gap: 10px; }
.ap-ligne { display: grid; grid-template-columns: 156px minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: 12px 24px; padding: 12px 18px; border-radius: 16px; background: var(--sol-2); border: 1px solid var(--trait); }
.ap-ligne.parfait { border-color: color-mix(in oklab, var(--legendaire) 45%, transparent); background: color-mix(in oklab, var(--legendaire) 5%, var(--sol-2)); }
.ap-ligne > * { min-width: 0; }
.ap-score { display: grid; gap: 3px; justify-items: start; }
.ap-score b { font-family: var(--titre); font-size: 26px; line-height: 1.1; font-weight: 800; white-space: nowrap; }
.ap-score .v { color: var(--normal); } .ap-score .d { color: #ff9b9b; }
.ap-score small { white-space: nowrap; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--encre-3); }
.ap-score time { font-size: 12.5px; color: var(--encre-2); }
.ap-build { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ap-objet { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: inherit; cursor: pointer; border-radius: 14px; }
.ap-objet:focus-visible { outline: 2px solid var(--legendaire); outline-offset: 2px; }
.ap-vide { aspect-ratio: 5 / 7; border-radius: 12px; border: 1px dashed var(--trait-fort); display: grid; place-content: center; text-align: center; padding: 4px; font-size: 10.5px; color: var(--encre-3); }
.ap-vide small { font-size: 10px; }
.ap-stats { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; text-align: center; max-width: 340px; justify-self: end; width: 100%; }
.ap-stats li { padding: 6px 2px; border-radius: 10px; background: rgba(255,255,255,.04); display: grid; gap: 1px; }
.ap-stats b { font-family: var(--titre); font-size: 14px; }
.ap-stats span { font-size: 10.5px; color: var(--encre-3); text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 860px) {
  .ap-ligne { grid-template-columns: 1fr; padding: 12px; }
  .ap-score { grid-template-columns: auto auto 1fr; align-items: baseline; gap: 4px 10px; }
  .ap-score time, .ap-score .pilule { justify-self: end; }
  .ap-stats { max-width: none; }
}

/* Niveau du joueur : pastille sur l'avatar, dorée après un prestige. */
.avatar[data-niveau] { position: relative; overflow: visible; }
.avatar[data-niveau] img { border-radius: 50%; }
.avatar[data-niveau]::after { content: attr(data-niveau); position: absolute; right: -6px; bottom: -4px; min-width: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: var(--sol-2); border: 1px solid var(--trait-fort); color: var(--encre); font: 700 10.5px/16px var(--titre); text-align: center; }
.avatar.prestige::after { background: var(--legendaire); border-color: var(--legendaire); color: #1b1404; }

/* Bloc d'XP animé (fin de combat, Recette) : App.blocXp */
.xp-bloc { position: relative; display: grid; gap: 6px; width: min(100%, 360px); padding: 10px 14px 9px; border-radius: 14px; background: var(--sol-3); border: 1px solid var(--trait-fort); text-align: left; }
.xp-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.xp-niveau b { display: inline-block; margin-left: 2px; transform-origin: left center; font-family: var(--titre); font-size: 19px; color: var(--legendaire); }
.xp-gain { font-family: var(--titre); font-size: 16px; color: var(--legendaire); }
.xp-barre { height: 10px; border-radius: 999px; background: var(--sol-2); border: 1px solid var(--trait); }
.xp-barre i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f0a93a, var(--legendaire)); }
/* « Niveau N ! » : un bandeau qui claque au milieu du bloc, puis s'efface. */
.xp-annonce { position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  padding: 6px 20px; border-radius: 999px; background: var(--legendaire); color: #1b1404; font-family: var(--titre); font-weight: 800; font-size: 22px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .55); }
.xp-bloc small { font-size: 12px; color: var(--encre-2); }

/* Icône d'expérience : un badge « XP » plus large que haut, lisible en petit. */
/* Personnage en pixels (App.persoPixel) : 18 × 21 points ; --t est sa largeur, à prendre multiple de 18 pour des pixels entiers. */
.perso-pixel { display: block; flex: none; width: var(--t, 54px); aspect-ratio: 18 / 21; background: center / 100% 100% no-repeat; }
/* Montant + symbole (App.montant) : le nombre et son symbole, sans le mot. */
.montant { display: inline-flex; align-items: center; gap: .3em; white-space: nowrap; }
span.montant > svg { width: 1.15em; height: 1.15em; flex: none; margin: 0; }
span.montant > svg.ico-xp { height: 1em; }
.chiffre > .montant { display: flex; color: inherit; }
.chiffre > .montant > svg { width: 22px; height: 22px; }
.xp-gain { display: inline-flex; align-items: center; gap: 5px; }
.xp-gain svg { height: 15px; flex: none; }
svg.ico-xp { width: auto !important; aspect-ratio: 7 / 4; flex: none; }