/* Boutique : un reliquaire. Chaque article est une niche voûtée où le skin vit sous une seule lumière ;
   la rareté se lit à la couleur de cette lumière et de la gemme. Le reste se tait. Préfixe bq-. */
body.boutique {
  --rar-defaut: #8E8073; --rar-commun: #B9B2A1; --rar-rare: #82A8D8; --rar-epique: #C77BC0; --rar-legendaire: #F2C46B; --rar-celeste: #8FE6DA; --rar-mythique: #FF5A6A;
  min-height: 100dvh;
}
.bq-app { width: min(100%, 1040px); margin: 0 auto; padding: 0 16px max(40px, env(safe-area-inset-bottom)); }
.bq-charge { padding: 40px 0; color: var(--encre-att); text-align: center; }
.rar-defaut { --rar: var(--rar-defaut); } .rar-commun { --rar: var(--rar-commun); } .rar-rare { --rar: var(--rar-rare); }
.rar-epique { --rar: var(--rar-epique); } .rar-legendaire { --rar: var(--rar-legendaire); } .rar-celeste { --rar: var(--rar-celeste); } .rar-mythique { --rar: var(--rar-mythique); }

/* ——— En-tête : retour, titre, bourse ——— */
.bq-tete {
  position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(11, 8, 9, .97), rgba(11, 8, 9, .9)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.bq-retour { display: grid; place-items: center; width: 44px; height: 44px; margin-left: -10px; color: var(--encre-att); border-radius: 50%; }
.bq-retour svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bq-retour:hover { color: var(--serment); }
.bq-titre { min-width: 0; }
.bq-titre h1 { font: 600 1.7rem/1 var(--titre); color: var(--serment); letter-spacing: .01em; }
.bq-titre p { margin: 3px 0 0; font-size: .8rem; color: var(--encre-att); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-bourse {
  margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 9px;
  border: 1px solid rgba(242, 196, 107, .45); border-radius: 999px; background: radial-gradient(ellipse at 30% 0%, rgba(242, 196, 107, .16), transparent 70%), #140D0B;
  font: 600 1.3rem/1 var(--titre); color: #F6D894;
}
.bq-bourse .pf-piece { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(242, 196, 107, .45)); }
.bq-son { position: relative; } /* sa zone tactile élargie (::after) se mesure sur lui, pas sur l’en-tête */

/* ——— Onglets ——— */
.bq-onglets {
  display: flex; justify-content: space-between; gap: 0; margin: 0 -16px; padding: 0 6px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--filet); position: sticky; top: calc(max(10px, env(safe-area-inset-top)) + 54px); z-index: 19; background: rgba(11, 8, 9, .95);
}
.bq-onglets::-webkit-scrollbar { display: none; }
.bq-onglets button {
  position: relative; flex: 1 0 auto; min-height: 46px; padding: 0 7px; border: 0; background: none;
  font: 600 1rem/1 var(--titre); color: var(--encre-att); white-space: nowrap;
}
.bq-onglets button[aria-selected="true"] { color: var(--serment); }
.bq-onglets button[aria-selected="true"]::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--serment) 20% 80%, transparent);
}
.bq-onglets button:focus-visible { outline-offset: -4px; }

.bq-rayon { padding-top: 18px; }
.bq-intro { margin: 0 0 16px; max-width: 60ch; color: var(--encre-att); font-size: .95rem; line-height: 1.5; }

/* ——— Grille de niches ——— */
.bq-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 720px) { .bq-onglets { justify-content: flex-start; gap: 8px; padding: 0 10px; } .bq-onglets button { flex: none; font-size: 1.1rem; padding: 0 12px; }
  .bq-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* Les cadres gardent trois colonnes : leurs ornements (ailes, phénix, mâchoires) débordent du portrait et veulent de l'air */
@media (min-width: 980px) { .bq-rayon--des .bq-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bq-rayon--cadres .bq-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .bq-scene--cadre .fig { --fig-h: 128px !important; --fig-w: 96px !important; } }

.bq-niche {
  position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0;
  background: linear-gradient(180deg, #1A1114, #100A0C); border: 1px solid var(--filet);
}
.bq-niche.rar-legendaire { border-color: rgba(242, 196, 107, .32); }
.bq-niche.est-porte { border-color: color-mix(in srgb, var(--serment) 55%, transparent); }

/* La niche voûtée : une seule lumière de la couleur de la rareté, venue d'en haut */
.bq-scene {
  position: relative; display: grid; place-items: center; height: 236px; padding-bottom: 36px; overflow: hidden; isolation: isolate;
  border-radius: 999px 999px 0 0 / 54px 54px 0 0; margin: 8px 8px 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--rar) 26%, transparent), transparent 72%),
    radial-gradient(ellipse 60% 18% at 50% 96%, rgba(0, 0, 0, .75), transparent 80%),
    linear-gradient(180deg, #120B0D, #070405);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 22%, transparent), inset 0 -20px 30px rgba(0, 0, 0, .5);
}
.bq-scene::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hachures); opacity: .35; }
.bq-scene .fig { margin-top: 18px; }
.bq-scene--des { cursor: pointer; }
.bq-scene--des:focus-visible { outline-offset: -3px; }
.bq-des { display: flex; gap: 8px; transform: translateY(6px); }
.bq-des .de6 { --taille: 36px; box-shadow: 0 10px 18px rgba(0, 0, 0, .6); }
.bq-scene--des { height: 186px; }
.bq-des .de6:nth-child(2) { transform: translateY(-10px) rotate(-8deg); }
.bq-des .de6:nth-child(3) { transform: rotate(7deg); }
@media (min-width: 720px) { .bq-des .de6 { --taille: 44px; } .bq-scene--des { height: 206px; } }

/* « Voir en action » a sa propre bande sous l'aperçu (le padding de la scène) : il ne couvre plus le bas des cadres ni les dés */
.bq-voir {
  position: absolute; left: 50%; bottom: 8px; z-index: 35; transform: translateX(-50%); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px 0 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rar) 70%, transparent); background: rgba(11, 8, 9, .82); color: color-mix(in srgb, var(--rar) 55%, #FFF);
  font: italic 600 .95rem/1 var(--titre); box-shadow: 0 0 14px color-mix(in srgb, var(--rar) 25%, transparent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bq-voir::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.bq-voir:active { transform: translateX(-50%) scale(.96); }
.bq-scene--des .bq-des { transform: translateY(-10px); }
.bq-effets { margin: 2px 0 0; font: italic 500 .86rem/1.25 var(--titre); color: color-mix(in srgb, var(--rar) 70%, var(--encre)); text-wrap: pretty; }

/* ——— Légendaires : un liseré d'or qui tourne, un reflet, une lueur ——— */
.bq-niche.rar-legendaire { box-shadow: 0 0 26px rgba(242, 196, 107, .14), inset 0 0 30px rgba(242, 196, 107, .05); overflow: hidden; isolation: isolate; }
.bq-liseret {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; padding: 1.5px;
  -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 exclude, linear-gradient(#000 0 0);
}
.bq-liseret::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 243, 196, .2) 62%, #FFF3C4 72%, #F2C46B 78%, rgba(242, 196, 107, .2) 86%, transparent 92%);
  animation: bq-tourne 5s linear infinite;
}
/* Le reflet glisse par transform (composé par la carte graphique) au lieu de background-position (repeint à chaque image) */
.bq-niche.rar-legendaire::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 240, 200, .14) 45%, rgba(255, 255, 255, .22) 50%, rgba(255, 240, 200, .14) 55%, transparent 70%);
  transform: translateX(-110%);
  animation: bq-reflet 6s ease-in-out infinite;
}
.bq-niche.rar-legendaire h3 {
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, #E9C066, #FFF3C4 50%, #E9C066);
}
.bq-niche.rar-epique { box-shadow: 0 0 20px rgba(199, 123, 192, .1); border-color: rgba(199, 123, 192, .3); }
@keyframes bq-tourne { to { rotate: 360deg; } }
@keyframes bq-reflet { 0% { transform: translateX(-110%); } 35%, 100% { transform: translateX(110%); } }

/* ——— La scène « Voir en action » ——— */
.bq-voile--theatre { align-items: center; z-index: 82; }
.bq-theatre {
  position: relative; width: min(100%, 600px); display: grid; gap: 8px; justify-items: center; padding: 16px 14px 16px; text-align: center;
  background: radial-gradient(ellipse 80% 45% at 50% 0%, color-mix(in srgb, var(--rar) 22%, transparent), transparent 70%), linear-gradient(180deg, #1F1517, #0F0A0C);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, .75), 0 0 40px color-mix(in srgb, var(--rar) 14%, transparent);
  animation: bq-monte .3s cubic-bezier(.2, .8, .3, 1) both;
}
.bq-theatre h2 { margin: 0; font: 600 1.7rem/1.1 var(--titre); color: var(--encre); }
.bq-theatre.rar-legendaire h2 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #E9C066, #FFF3C4 50%, #E9C066); }
.bq-th-fermer { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; border: 0; background: none; color: var(--encre-att); font: 300 1.9rem/1 var(--titre); z-index: 2; }
.bq-th-scene {
  position: relative; width: 100%; height: 270px; display: grid; place-items: center;
  border-radius: 999px 999px 0 0 / 60px 60px 0 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--rar) 24%, transparent), transparent 72%),
    radial-gradient(ellipse 70% 14% at 50% 94%, rgba(0, 0, 0, .8), transparent 80%), linear-gradient(180deg, #120B0D, #070405);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 22%, transparent);
}
@media (min-width: 720px) { .bq-th-scene { height: 330px; } }
.bq-th-arene { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 7% 22px; overflow: visible; }
.bq-th-acteur { position: relative; line-height: 0; }
.bq-th-ennemi { margin-bottom: 8px; }
/* Une bannière « en action » : sur sa hampe, elle se déploie puis vit comme sur le Blason */
.bq-th-blason { position: relative; width: 150px; height: 230px; margin-top: 10px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .65)); }
.bq-th-blason::before { content: ""; position: absolute; left: -14px; right: -14px; top: -5px; height: 6px; z-index: 2; border-radius: 3px; background: linear-gradient(180deg, #F0D9A0, #8A5E16); }
.bq-th-blason::after { content: ""; position: absolute; left: -22px; right: -22px; top: -8px; height: 11px; z-index: 3; pointer-events: none; background: radial-gradient(circle at 35% 30%, #FFF3CF 0 18%, #E3B550 45%, #6A4410 100%) left center / 11px 11px no-repeat, radial-gradient(circle at 35% 30%, #FFF3CF 0 18%, #E3B550 45%, #6A4410 100%) right center / 11px 11px no-repeat; }
.bq-th-blason.deploie > .sk-ban { animation: bq-deploie 1.3s cubic-bezier(.2, .8, .3, 1) both; transform-origin: 50% 0; }
@keyframes bq-deploie { 0% { transform: scaleY(.06); } 55% { transform: scaleY(1.04); } 75% { transform: scaleY(.98); } 100% { transform: scaleY(1); } }
.bq-th-tapis { display: flex; gap: 14px; align-items: flex-end; }
.bq-th-tapis .de6 { --taille: 58px; box-shadow: 0 12px 20px rgba(0, 0, 0, .6); }
.bq-th-tapis.jet { animation: bq-jet .45s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes bq-jet { from { transform: translateY(150px) rotate(-30deg) scale(.6); opacity: 0; } }
.bq-th-pari { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; font-size: .82rem; color: var(--encre-att); }
.bq-th-cri { position: absolute; left: 0; right: 0; top: 22%; margin: 0; opacity: 0; pointer-events: none; }
.bq-th-cri b { font: italic 600 2.4rem/1 var(--titre); color: #FFF8E6; text-shadow: 0 0 26px rgba(255, 244, 214, 1), 0 0 50px rgba(240, 199, 122, .8); }
.bq-th-cri.vu { animation: bq-cri 1.4s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes bq-cri { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.bq-th-legende { margin: 2px 0 0; min-height: 1.4em; font: italic 600 1.08rem/1.3 var(--titre); color: color-mix(in srgb, var(--rar) 60%, var(--encre)); }
.bq-th-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.bq-th-actions .bouton { min-height: 48px; padding: 0 12px; font-size: .9rem; }

/* Ouverte par-dessus une partie : un peu d'air sous l'encoche */
.bq-dans .bq-tete { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.bq-dans .bq-retour { margin-left: -6px; border: 0; background: none; cursor: pointer; }

.bq-corps { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 4px; padding: 12px 12px 12px; min-width: 0; }
.bq-rarete { margin: 0; display: flex; align-items: center; gap: 6px; font: 400 .86rem/1.1 var(--etiquette); color: var(--rar); }
.bq-gemme { width: 8px; height: 8px; transform: rotate(45deg); background: var(--rar); box-shadow: 0 0 8px var(--rar); flex: none; }
.rar-defaut .bq-gemme { box-shadow: none; background: transparent; border: 1px solid var(--rar); }
.bq-anime { margin-left: auto; font: italic 500 .82rem/1 var(--titre); color: var(--encre-att); }
.bq-corps h3 { font: 600 1.2rem/1.1 var(--titre); color: var(--encre); }
.bq-texte { margin: 0; font-size: .84rem; line-height: 1.4; color: var(--encre-att); text-wrap: pretty; }
.bq-attaque { margin: 0; font: italic 600 .9rem/1.2 var(--titre); color: var(--rar); }
.bq-action { display: grid; gap: 4px; margin-top: 8px; }

/* Boutons d'article : plus petits que les grands boutons du jeu */
.bq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--filet); border-radius: 2px; background: rgba(11, 8, 9, .6); color: var(--encre);
  font: 400 .95rem/1 var(--etiquette); letter-spacing: .03em;
  transition: transform .15s ease-out, border-color .15s, background-color .15s;
}
.bq-btn:not(:disabled):hover { border-color: var(--encre-att); }
.bq-btn:not(:disabled):active { transform: scale(.97); }
.bq-btn.achat:not(:disabled) { border-color: #F6E7BE; color: #1A0F0A; background: linear-gradient(180deg, #F8ECC8, #D9BC7C); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.bq-btn.achat .num { font: 600 1.05rem/1 var(--titre); }
.bq-btn.achat:disabled { opacity: 1; color: var(--encre-att); cursor: not-allowed; }
.bq-btn.achat:disabled .pf-piece { filter: grayscale(.7) brightness(.8); }
.bq-btn.porte { border-color: transparent; background: none; color: var(--serment); opacity: 1; cursor: default; }
.bq-coche { width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) translate(1px, -1px); }
.bq-manque { margin: 0; text-align: center; font-size: .78rem; color: var(--encre-att); }

/* ——— Personnages : une rangée par classe ——— */
.bq-classe { margin-bottom: 28px; }
.bq-classe h2 { margin: 0 0 12px; font: 600 1.45rem/1.1 var(--titre); color: var(--encre); }
.bq-classe h2 span { font-style: italic; font-weight: 500; color: var(--encre-att); font-size: 1.05rem; }
.bq-rayon--personnages .bq-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bq-rayon--personnages .bq-niche:first-child { grid-column: 1 / -1; grid-template-rows: none; grid-template-columns: 96px minmax(0, 1fr); align-items: center; }
.bq-rayon--personnages .bq-niche:first-child .bq-scene { height: 110px; margin: 8px 0 8px 8px; border-radius: 999px 999px 0 0 / 30px 30px 0 0; }
.bq-rayon--personnages .bq-niche:first-child .bq-scene .fig { margin-top: 8px; --fig-h: 96px !important; --fig-w: 72px !important; }
@media (min-width: 720px) {
  .bq-rayon--personnages .bq-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bq-rayon--personnages .bq-niche:first-child { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; align-items: stretch; }
  .bq-rayon--personnages .bq-niche:first-child .bq-scene { height: 200px; margin: 8px 8px 0; border-radius: 999px 999px 0 0 / 54px 54px 0 0; }
  .bq-rayon--personnages .bq-niche:first-child .bq-scene .fig { margin-top: 18px; --fig-h: 150px !important; --fig-w: 113px !important; }
}

/* ——— Hauts faits : le registre ——— */
.bq-registre-tete { display: grid; gap: 8px; margin-bottom: 14px; }
.bq-registre-compte { margin: 0; font: 500 1.15rem/1.2 var(--titre); color: var(--encre-att); }
.bq-registre-compte b { font-size: 1.6rem; color: var(--serment); }
.bq-barre { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(5, 3, 4, .9); box-shadow: inset 0 0 0 1px var(--filet); overflow: hidden; }
.bq-barre > span { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v, 0)); background: linear-gradient(90deg, #B9852A, #F2C46B); }
.bq-registre { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 720px) { .bq-registre { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.bq-hf {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px;
  border: 1px solid var(--filet); background: rgba(16, 10, 12, .8);
}
.bq-hf.obtenu { border-color: rgba(242, 196, 107, .35); background: radial-gradient(ellipse 60% 100% at 0% 50%, rgba(242, 196, 107, .09), transparent 70%), #140D0F; }
.bq-sceau { position: relative; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #4A3E40, #241A1C 70%); box-shadow: inset 0 0 0 1px #3B2A2E; }
.bq-sceau::after { content: ""; position: absolute; inset: 11px; border: 1.5px solid #5A4A4C; border-radius: 50%; border-top-color: transparent; transform: rotate(-30deg); }
.bq-hf.obtenu .bq-sceau { background: radial-gradient(circle at 38% 32%, #FFF3C4, #E9C066 40%, #8A5E16); box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(242, 196, 107, .55), 0 0 14px rgba(242, 196, 107, .4); }
.bq-hf.obtenu .bq-sceau::after { border-color: #5A3A0C; border-top-color: transparent; }
.bq-hf-corps { display: grid; gap: 2px; min-width: 0; }
.bq-hf-corps b { font: 600 1.12rem/1.15 var(--titre); color: var(--encre-att); }
.bq-hf.obtenu .bq-hf-corps b { color: var(--serment); }
.bq-hf-texte { font-size: .85rem; line-height: 1.35; color: var(--encre-att); }
.bq-hf:not(.obtenu) .bq-hf-texte { color: #7C6F66; }
.bq-hf-date { font: italic 500 .88rem/1.2 var(--titre); color: #7C6F66; }
.bq-hf.obtenu .bq-hf-date { color: var(--encre); }
.bq-hf-prog { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 4px; font-size: .8rem; color: var(--encre-att); }
.bq-hf-prime { display: inline-flex; align-items: center; gap: 4px; font: 600 1rem/1 var(--titre); color: var(--encre-att); }
.bq-hf:not(.obtenu) .bq-hf-prime .pf-piece { filter: grayscale(.85) brightness(.7); }
.bq-hf.obtenu .bq-hf-prime { color: #F6D894; }

/* ——— Compte ——— */
.bq-compte { display: grid; gap: 12px; max-width: 460px; }
.bq-compte h2 { font: 600 1.7rem/1.1 var(--titre); color: var(--serment); }
.bq-compte-statut { margin: 0; font-size: 1rem; line-height: 1.5; }
.bq-note { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--encre-att); }
.bq-bascule { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border: 1px solid var(--filet); }
.bq-bascule button { min-height: 46px; border: 0; background: none; color: var(--encre-att); font: 600 1.05rem/1 var(--titre); }
.bq-bascule button[aria-selected="true"] { background: var(--surface-2); color: var(--serment); box-shadow: inset 0 -2px 0 var(--serment); }
.bq-form { display: grid; gap: 6px; }
.bq-form label { margin-top: 8px; font: 400 .92rem/1 var(--etiquette); color: var(--encre-att); }
.bq-form input {
  min-height: 50px; padding: 0 14px; border: 1px solid var(--filet); border-radius: 2px; background: var(--surface);
  color: var(--encre); font: 400 1.05rem/1 var(--texte);
}
.bq-form input:focus { outline: none; border-color: var(--serment); }
.bq-form .bouton { margin-top: 12px; }
.bq-aide { margin: 0; min-height: 1em; font-size: .8rem; color: var(--encre-att); }
.bq-erreur { margin: 0; min-height: 1.2em; color: var(--danger); font-size: .9rem; }
.bq-erreur:empty { min-height: 0; }
.bq-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px; }
.bq-stats div { padding: 10px; border: 1px solid var(--filet); text-align: center; }
.bq-stats dt { font: 400 .82rem/1 var(--etiquette); color: var(--encre-att); }
.bq-stats dd { margin: 6px 0 0; font: 600 1.6rem/1 var(--titre); color: var(--encre); }

/* ——— Confirmation d'achat ——— */
.bq-voile { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; justify-items: center; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(5, 3, 4, .78); animation: bq-fondu .2s ease-out both; }
@media (min-width: 720px) { .bq-voile { align-items: center; } }
@keyframes bq-fondu { from { opacity: 0; } }
.bq-confirm {
  width: min(100%, 400px); display: grid; gap: 10px; justify-items: center; padding: 18px 18px 18px; text-align: center;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in srgb, var(--rar) 20%, transparent), transparent 70%), linear-gradient(180deg, #1F1517, #0F0A0C);
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent); box-shadow: 0 30px 70px rgba(0, 0, 0, .75);
  animation: bq-monte .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes bq-monte { from { opacity: 0; transform: translateY(24px); } }
.bq-confirm-apercu { display: grid; place-items: center; min-height: 150px; padding-top: 24px; }
.bq-confirm-apercu .bq-des .de6 { --taille: 52px; }
.bq-confirm h2 { font: 600 1.6rem/1.15 var(--titre); color: var(--encre); }
.bq-confirm-prix { margin: 0; display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 5px; color: var(--encre-att); }
.bq-confirm-prix .num { color: #F6D894; font: 600 1.2rem/1 var(--titre); }
.bq-confirm-actions { display: grid; gap: 8px; width: 100%; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .bq-voile, .bq-confirm, .bq-theatre, .bq-th-tapis.jet, .bq-th-cri.vu, .bq-liseret::before, .bq-niche.rar-legendaire::after { animation: none; }
  .bq-th-cri.vu { opacity: 1; }
  .bq-liseret::before { background: linear-gradient(135deg, #F2C46B, #FFF3C4 50%, #F2C46B); }
  .bq-btn { transition: none; }
}

/* ════════ Catalogue II : deux monnaies, Reliquaires, bannières, Serments, Blason, sécurité ════════ */
/* Bourse : l'Or et les Serments côte à côte */
.bq-bourse { gap: 8px; padding: 5px 6px 5px 9px; font-size: 1.12rem; }
.bq-bourse-or, .bq-bourse-serments { display: inline-flex; align-items: center; gap: 5px; }
.bq-bourse-serments { min-height: 30px; margin: 0; padding: 0 8px 0 8px; border: 0; border-left: 1px solid rgba(242, 196, 107, .3); background: none; color: #BFE9FF; font: inherit; }
.bq-bourse .pf-serment { width: 20px; height: 20px; filter: drop-shadow(0 0 6px rgba(92, 184, 255, .45)); }
.bq-bourse .pf-piece { width: 20px; height: 20px; }
/* Téléphone étroit : la bourse passe sous le titre, qui n'est plus tronqué (« Boutiqu ») */
@media (max-width: 400px) {
  .bq-tete { gap: 6px 8px; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "retour titre menu son" "bourse bourse bourse bourse"; padding-bottom: 8px; }
  .bq-retour { grid-area: retour; } .bq-titre { grid-area: titre; } .bq-bourse { grid-area: bourse; justify-self: start; }
  .bq-tete > :nth-child(4) { grid-area: menu; } .bq-tete > :nth-child(5) { grid-area: son; }
  .bq-titre h1 { font-size: 1.5rem; }
  .bq-bourse { font-size: 1.05rem; gap: 5px; padding-left: 7px; } .bq-bourse-serments { padding: 0 6px; } .bq-bourse .pf-piece, .bq-bourse .pf-serment { width: 18px; height: 18px; }
  .bq-onglets { top: calc(max(10px, env(safe-area-inset-top)) + 102px); }
}
/* Le bouton Serments dit aussi le prix en euros : sur deux lignes quand la niche est étroite */
@media (max-width: 480px) {
  .bq-prix .bq-btn.achat--serments { flex-direction: column; gap: 1px; padding: 5px 4px; line-height: 1.05; }
  .bq-prix .bq-euros { margin: 0; font-size: .66em; }
}
/* Les titres de section s'arrêtent sous l'en-tête collant, pas dessous */
.bq-rayon h2, .bq-une h2, .bq-onglet h2, main h2 { scroll-margin-top: calc(max(10px, env(safe-area-inset-top)) + 112px); }

/* Onglet Reliquaires : une braise l'annonce */
.bq-onglets .bq-onglet-reliq { padding-left: 20px; }
.bq-onglet-reliq::before { content: ""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg); background: #F2C46B; box-shadow: 0 0 8px #F2C46B; animation: bq-braise 2s ease-in-out infinite; }
@keyframes bq-braise { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.bq-lien-annales { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 36px; margin: 4px 0 -14px; color: var(--serment); font: italic 600 .98rem/1.2 var(--titre); text-decoration: none; }
.bq-lien-annales svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bq-lien-annales:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Prix : Or et Serments */
.bq-prix { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.bq-prix .bq-btn { padding: 0 4px; gap: 4px; }
.bq-btn.achat--serments:not(:disabled) { border-color: #DDF4FF; color: #061A3A; background: linear-gradient(180deg, #E6F7FF, #8FD0FF 55%, #5CB8FF); box-shadow: 0 0 14px rgba(92, 184, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .7); }
.bq-btn .pf-serment { width: 18px; height: 18px; }
.bq-btn.achat:disabled .pf-serment { filter: grayscale(.7) brightness(.8); }
.bq-btn--exclu { height: auto; padding: 8px 10px; line-height: 1.2; white-space: normal; border-color: color-mix(in srgb, var(--rar) 60%, transparent); color: color-mix(in srgb, var(--rar) 55%, #FFF); font-size: .82rem; }
.bq-exclu-ruban { position: absolute; top: 16px; right: -32px; z-index: 36; width: 124px; padding: 4px 0; transform: rotate(38deg); text-align: center; font: 400 .66rem/1 var(--etiquette); letter-spacing: .08em; color: #1A0F0A; background: linear-gradient(180deg, #FFF3C4, #D9A43A); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); pointer-events: none; }
.bq-niche.est-exclu { overflow: hidden; }

/* Bannières dans la boutique */
.bq-ban { position: relative; display: block; width: 92px; height: 140px; margin-top: 18px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .65)); }
.bq-ban::before { content: ""; position: absolute; left: -10px; right: -10px; top: -4px; height: 5px; z-index: 2; border-radius: 3px; background: linear-gradient(180deg, #F0D9A0, #8A5E16); }
/* Les pommeaux de la hampe : deux boules d'or éclairées en haut à gauche */
.bq-ban::after { content: ""; position: absolute; left: -16px; right: -16px; top: -6px; height: 9px; z-index: 3; pointer-events: none; background: radial-gradient(circle at 35% 30%, #FFF3CF 0 18%, #E3B550 45%, #6A4410 100%) left center / 9px 9px no-repeat, radial-gradient(circle at 35% 30%, #FFF3CF 0 18%, #E3B550 45%, #6A4410 100%) right center / 9px 9px no-repeat; }
.bq-confirm-apercu .bq-ban { margin-top: 0; }

/* Serments */
.bq-serments { display: grid; gap: 14px; max-width: 760px; }
.bq-serments-tete { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.bq-serments-sceau .pf-serment { width: 64px; height: 64px; filter: drop-shadow(0 0 16px rgba(92, 184, 255, .5)); }
.bq-serments h2 { font: 600 1.7rem/1.1 var(--titre); color: #BFE9FF; }
.bq-serments-tete p { margin: 4px 0 0; font-size: .94rem; line-height: 1.45; color: var(--encre-att); }
.bq-serments-solde { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 1rem; }
.bq-serments-solde b { font: 600 1.3rem/1 var(--titre); color: #BFE9FF; }
.bq-bientot { justify-self: start; margin: 0; padding: 6px 12px; font: 400 .9rem/1 var(--etiquette); letter-spacing: .12em; text-transform: uppercase; color: #1A0F0A; background: linear-gradient(180deg, #F8ECC8, #D9BC7C); }
.bq-paquets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .bq-paquets { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.bq-paquet { display: grid; justify-items: center; gap: 4px; padding: 14px 10px 10px; border: 1px solid rgba(92, 184, 255, .3); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(92, 184, 255, .18), transparent 70%), linear-gradient(180deg, #0C1424, #080A12); box-shadow: inset 0 0 20px rgba(30, 91, 255, .12); }
.bq-paquet-sceaux { display: flex; justify-content: center; height: 34px; }
.bq-paquet-sceaux .pf-serment { width: 30px; height: 30px; margin: 0 -7px; }
.bq-paquet b { font: 600 1.5rem/1 var(--titre); color: #BFE9FF; }
.bq-paquet > span:not(.bq-paquet-sceaux) { font-size: .8rem; color: var(--encre-att); }
.bq-paquet .bq-btn { margin-top: 6px; }

/* Blason : l'éditeur */
.bq-compte--connecte { margin-bottom: 26px; }
.bq-blason { display: grid; gap: 12px; max-width: 760px; margin-bottom: 30px; }
.bq-blason h2 { font: 600 1.7rem/1.1 var(--titre); color: var(--serment); }
.bq-blason a { color: var(--serment); }
.bq-blason-apercu { display: grid; justify-items: center; }
.bq-champ { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.bq-champ legend { padding: 0; margin-bottom: 8px; font: 600 1.15rem/1 var(--titre); color: var(--encre); }
.bq-compteur { margin-left: 6px; font: 400 .9rem/1 var(--texte); color: var(--encre-att); }
.bq-choix-bannieres { display: flex; gap: 10px; overflow-x: auto; padding: 8px 2px 8px; scrollbar-width: thin; }
.bq-choix-bannieres button { flex: none; display: grid; justify-items: center; align-content: start; gap: 6px; width: 88px; padding: 10px 4px 8px; border: 1px solid var(--filet); background: rgba(16, 10, 12, .8); color: var(--encre-att); font: 600 .8rem/1.1 var(--titre); text-align: center; }
.bq-choix-bannieres button[aria-checked="true"] { border-color: var(--serment); color: var(--serment); box-shadow: 0 0 14px rgba(240, 217, 160, .25); }
.bq-choix-ban { position: relative; display: block; width: 46px; height: 70px; }
.bq-choix-bannieres .bq-choix-plus { align-content: center; font-style: italic; }
.bq-champ select { min-height: 48px; padding: 0 12px; border: 1px solid var(--filet); border-radius: 2px; background: var(--surface); color: var(--encre); font: 600 1.05rem/1 var(--titre); }
.bq-vitrinables { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 720px) { .bq-vitrinables { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.bq-vitrinable {
  position: relative; display: grid; justify-items: center; gap: 2px; width: 100%; padding: 0 2px 6px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rar) 30%, var(--filet)); background: #0E090B; color: var(--encre-att); font: 600 .7rem/1.1 var(--titre);
}
.bq-vitrinable[aria-pressed="true"] { border-color: var(--serment); color: var(--encre); box-shadow: inset 0 0 0 1px var(--serment), 0 0 12px rgba(240, 217, 160, .25); }
.bq-vitrinable:disabled { opacity: .4; }
.bq-vitrinable-scene { display: grid; place-items: center; width: 100%; height: 82px; overflow: hidden; pointer-events: none; }
.bq-vitrinable-scene * { animation-play-state: paused !important; }
.bq-vitrinable-nom { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-vitrinable-n { position: absolute; top: 3px; left: 3px; z-index: 6; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--serment); color: #1A0F0A; font: 600 .8rem/1 var(--titre); }
.bq-blason-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.bq-blason-message { color: var(--serment); }

/* Sécurité */
.bq-securite { margin-bottom: 30px; }
.bq-securite h3 { margin-top: 4px; font: 600 1.15rem/1 var(--titre); color: var(--encre); }
.bq-erreur.ok { color: var(--vie); }
.bq-danger { border: 1px solid rgba(212, 84, 74, .4); padding: 0 12px; }
.bq-danger summary { min-height: 46px; display: flex; align-items: center; cursor: pointer; color: var(--danger); font: 600 1.05rem/1 var(--titre); }
.bq-danger[open] { padding-bottom: 12px; }
.bq-btn-danger { background: linear-gradient(180deg, #E0705F, #A8322A); border-color: #F2A090; color: #1A0505; }

@media (prefers-reduced-motion: reduce) { .bq-onglet-reliq::before { animation: none; } }
.bq-onglet-chasse::before { background: #BFE0FF; box-shadow: 0 0 8px #8ECBFF; }
.bq-bientot { color: #061A3A; background: linear-gradient(180deg, #E6F7FF, #8FD0FF); box-shadow: 0 0 18px rgba(92, 184, 255, .4); }
.bq-paquet-sceaux .pf-serment { filter: drop-shadow(0 0 6px rgba(92, 184, 255, .6)); }

/* ——— Boutique permanente, lignes de skins, skins retirés, tableau vivant en grand (calques.js) ——— */
.bq-une { margin-bottom: 30px; }
/* La vedette : un légendaire illustré en grand, qui vit tant qu'il est à l'écran (on voit le skin avant de le lire) */
.bq-niche--vedette { grid-column: 1 / -1; }
.bq-niche--vedette .bq-scene { height: 380px; border-radius: 999px 999px 0 0 / 90px 90px 0 0; }
.bq-niche--vedette .bq-scene .fig { margin-top: 0; }
.bq-niche--vedette h3 { font-size: 1.7rem; }
.bq-niche.bq-niche--vedette:not(.bq-hors-ecran) *, .bq-niche.bq-niche--vedette:not(.bq-hors-ecran) *::before,
.bq-niche.bq-niche--vedette:not(.bq-hors-ecran) *::after, .bq-niche.bq-niche--vedette:not(.bq-hors-ecran)::after { animation-play-state: running !important; }
@media (min-width: 720px) {
  .bq-niche--vedette { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; }
  .bq-niche--vedette .bq-scene { height: 420px; margin: 10px; }
  .bq-niche--vedette .bq-corps { padding: 24px 28px 24px 12px; }
  .bq-niche--vedette .bq-texte { font-size: 1.05rem; max-width: 44ch; }
}
.bq-une h2 { margin: 0 0 12px; font: 600 1.45rem/1.1 var(--titre); color: var(--encre); }
.bq-une h2 span { font-style: italic; font-weight: 500; color: var(--encre-att); font-size: 1.05rem; }
.bq-classe h2 .bq-lien { margin-left: 8px; font-size: .95rem; }
.bq-lien { padding: 0; border: 0; background: none; font: inherit; color: var(--serment, #F0D9A0); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }
.bq-ligne { justify-self: start; margin: 2px 0 0; padding: 3px 8px; border-radius: 999px; font: 400 .7rem/1 var(--etiquette); letter-spacing: .06em; color: #1A0F0A; background: linear-gradient(180deg, #F4D27A, #B4802A); box-shadow: 0 0 0 1px rgba(58, 32, 6, .6), 0 2px 6px rgba(0, 0, 0, .4); }
.bq-ruban-retire { background: linear-gradient(180deg, #D9D2C6, #8E8784); }
.bq-th-scene--tableau { height: auto; padding: 22px 0 14px; border-radius: 12px; overflow: visible; }
.bq-th-tableau { line-height: 0; }
.bq-th-tableau--toile { padding: 0 0 8px; } .bq-th-tableau--toile .fig { margin: 0; }
@media (min-width: 720px) { .bq-th-scene--tableau { height: auto; } }

/* ——— Économie (audit 09, P1-1) ———
   Les aperçus des grilles sont figés : seul l'article survolé, touché ou focalisé s'anime (.bq-vivant, boutique.js),
   et « Voir en action » montre l'effet complet. Une niche hors de l'écran n'est ni rendue ni animée. */
.bq-niche { content-visibility: auto; contain-intrinsic-size: auto 340px auto 470px; }
.bq-niche:not(.bq-vivant) *, .bq-niche:not(.bq-vivant) *::before, .bq-niche:not(.bq-vivant) *::after,
.bq-niche:not(.bq-vivant)::after { animation-play-state: paused !important; }
.bq-niche.bq-hors-ecran *, .bq-niche.bq-hors-ecran *::before, .bq-niche.bq-hors-ecran *::after { animation-play-state: paused !important; }
/* Au repos, pas de flou d'arrière-plan sous « Voir en action » (il se recalculait sous chaque aperçu animé) */
.bq-niche:not(.bq-vivant) .bq-voir { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 8, 9, .9); }
.bq-plus { display: flex; justify-content: center; margin: 12px 0 0; }

/* ——— Couleurs des dés : pastilles sous l'aperçu ——— */
.bq-variantes { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 8px 6px 0; }
.bq-pastille {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255, 240, 200, .25);
  background: var(--c); padding: 0; cursor: pointer; position: relative;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, .35);
}
/* Zone de toucher confortable sans grossir la pastille */
.bq-pastille::after { content: ""; position: absolute; inset: -8px; }
.bq-pastille.choisie { border-color: #f3d27a; outline: 2px solid rgba(243, 210, 122, .45); outline-offset: 2px; }
.bq-pastille:focus-visible { outline: 2px solid #f3d27a; outline-offset: 3px; }

/* ——— Les offres en euros : paquets dotés, premier achat doublé, Pacte de l'Envoyé ——— */
@media (min-width: 720px) { .bq-paquets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bq-paquet { position: relative; padding-top: 22px; }
.bq-paquet-nom { font: 600 .95rem/1.15 var(--titre) !important; color: var(--encre) !important; text-align: center; }
.bq-paquet b s { font-size: .9rem; color: var(--encre-att); text-decoration-thickness: 1px; }
.bq-paquet-ruban {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px;
  font: 400 .72rem/1.2 var(--etiquette) !important; letter-spacing: .08em; text-transform: uppercase; color: #061A3A !important; background: linear-gradient(180deg, #E6F7FF, #8FD0FF);
}
.bq-paquet-ruban--bonus { color: #1A0F0A !important; background: linear-gradient(180deg, #F8ECC8, #D9BC7C); }
.bq-paquet-ruban--premier { color: #FFF !important; background: linear-gradient(180deg, #E8584A, #9E1F1A); }
.bq-paquet--meilleur { border-color: rgba(143, 208, 255, .8); box-shadow: inset 0 0 26px rgba(92, 184, 255, .28), 0 0 22px rgba(92, 184, 255, .2); }
.bq-paquet--double { border-color: rgba(232, 88, 74, .7); }
.bq-btn--payer { min-width: 7.5em; color: #061A3A; background: linear-gradient(180deg, #E6F7FF, #8FD0FF); border-color: #CFEFFF; }
.bq-euros { margin-left: 4px; font-size: .78em; opacity: .75; }
.bq-premier { margin: 0; padding: 8px 12px; color: #FFE1DA; background: rgba(158, 31, 26, .25); border: 1px solid rgba(232, 88, 74, .55); }
.bq-paiement-retour { margin: 0; padding: 10px 12px; font-weight: 600; color: #DFF4FF; background: rgba(30, 91, 160, .3); border: 1px solid rgba(143, 208, 255, .6); }
.bq-pacte {
  display: grid; grid-template-columns: minmax(96px, 150px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px;
  border: 1px solid #E9C066; background: radial-gradient(ellipse 70% 90% at 0% 50%, rgba(233, 192, 102, .16), transparent 70%), linear-gradient(180deg, #161226, #0B0A14);
  box-shadow: 0 0 28px rgba(233, 192, 102, .15);
}
.bq-pacte-ban { position: relative; display: block; aspect-ratio: 3 / 2; }
.bq-pacte-texte { display: grid; gap: 6px; justify-items: start; }
.bq-pacte-sur { margin: 0; font: 400 .74rem/1.2 var(--etiquette); letter-spacing: .12em; text-transform: uppercase; color: #E9C066; }
.bq-pacte h3 { margin: 0; font: 600 1.45rem/1.1 var(--titre); color: var(--serment); }
.bq-pacte p { margin: 0; font-size: .92rem; line-height: 1.4; color: var(--encre-att); }
.bq-pacte-valeur { display: inline-flex; align-items: center; gap: 6px; color: var(--encre) !important; }
.bq-pacte-valeur .pf-serment { width: 20px; height: 20px; }
.bq-pacte .bouton { margin-top: 4px; }
@media (max-width: 520px) { .bq-pacte { grid-template-columns: 1fr; } .bq-pacte-ban { max-width: 180px; } }

/* ——— Rareté Céleste (hors échelle, Tour seulement) : une aurore sur la niche, le nom de la rareté en dégradé ——— */
.bq-niche.rar-celeste { border-color: rgba(143, 230, 218, .5); box-shadow: 0 0 26px rgba(143, 230, 218, .16), 0 0 40px rgba(185, 164, 255, .1), inset 0 0 30px rgba(143, 230, 218, .06); }
.bq-niche.rar-celeste h3 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #A8F0E6, #FFFFFF 45%, #CBB8FF 70%, #FFE7A8); }
.rar-celeste .bq-rarete { color: #A8F0E6; }
.rar-celeste .bq-gemme { background: conic-gradient(#8FE6DA, #B9A4FF, #FFE7A8, #8FE6DA); box-shadow: 0 0 8px rgba(143, 230, 218, .8); }

/* Inscription : âge et conditions d'utilisation */
.bq-case { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 4px 0 2px; font-size: .9rem; line-height: 1.4; text-align: left; cursor: pointer; }
.bq-case input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--serment, #F0D9A0); }
.bq-case a { color: var(--serment, #F0D9A0); }

/* Avant Stripe : les deux cases de consentement */
.bq-consent { display: grid; gap: 12px; max-width: 30rem; text-align: left; }
.bq-consent h2 { margin: 0; }
.bq-consent .bq-note { margin: 0; }

/* Soutien pendant l'alpha : un encart sobre sous les offres fermées */
.bq-soutien { display: grid; gap: 8px; justify-items: start; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--filet); border-left: 3px solid var(--serment); background: rgba(240, 217, 160, .05); }
.bq-soutien h3 { margin: 0; font-size: 1.15rem; }
.bq-soutien p { margin: 0; max-width: 40rem; color: var(--encre-att); }


.bq-facultatif { font-weight: 400; color: var(--encre-att); }

/* ——— Rareté mythique (Châsse seulement) : la niche en noir de jais, le liseré et le nom passent par tout le spectre ——— */
.bq-niche.rar-mythique {
  overflow: hidden; isolation: isolate; border-color: rgba(255, 90, 106, .45);
  background: radial-gradient(ellipse 90% 50% at 50% 0%, rgba(155, 107, 255, .14), transparent 70%), linear-gradient(180deg, #120A16, #07040A);
  box-shadow: 0 0 26px rgba(255, 90, 106, .16), 0 0 44px rgba(155, 107, 255, .12), inset 0 0 30px rgba(255, 90, 106, .06);
}
.bq-niche.rar-mythique .bq-liseret::before { background: conic-gradient(from 0deg, transparent 0 40%, #FF4D6D, #FFB547, #FFF35C, #5CF0A0, #4FD8FF, #9B6BFF, transparent 92%); animation-duration: 4s; }
.bq-niche.rar-mythique::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; transform: translateX(-110%);
  background: linear-gradient(110deg, transparent 30%, rgba(255, 77, 109, .1) 42%, rgba(255, 243, 92, .12) 47%, rgba(92, 240, 160, .12) 52%, rgba(79, 216, 255, .12) 57%, rgba(155, 107, 255, .1) 62%, transparent 72%);
  animation: bq-reflet 6.5s ease-in-out infinite;
}
.bq-niche.rar-mythique h3, .bq-theatre.rar-mythique h2 { color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(100deg, #FF8A9A, #FFE9A0 30%, #9CF5C4 55%, #9ADFFF 75%, #C9A8FF); }
.rar-mythique .bq-rarete { color: #FF8A9A; }
.rar-mythique .bq-gemme { background: conic-gradient(#FF4D6D, #FFB547, #FFF35C, #5CF0A0, #4FD8FF, #9B6BFF, #FF4D6D); box-shadow: 0 0 6px #FFFFFF, 0 0 12px rgba(255, 90, 106, .8); }
@media (prefers-reduced-motion: reduce) { .bq-niche.rar-mythique::after { animation: none; } }

/* ——— Équipement : ce que je porte, puis tout ce que je possède ——— */
.bq-eq-portes { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.bq-eq-portes li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 12px 8px 8px;
  border: 1px solid color-mix(in srgb, var(--rar) 45%, var(--filet)); background: radial-gradient(ellipse 60% 120% at 0% 50%, color-mix(in srgb, var(--rar) 14%, transparent), transparent 70%), var(--surface);
}
.bq-eq-mini { display: grid; place-items: center; height: 76px; overflow: hidden; }
.bq-eq-porte { display: grid; gap: 3px; min-width: 0; }
.bq-eq-porte small { font: 400 .74rem/1 var(--etiquette); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-att); }
.bq-eq-porte b { font: 600 1.2rem/1.1 var(--titre); color: var(--encre); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bq-eq-sorte h2 .num { font: italic 500 1rem/1 var(--titre); color: var(--encre-att); }
.bq-grille--eq { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bq-eq .bq-scene { height: 132px; }
.bq-eq .bq-scene--banniere { height: 150px; }
.bq-eq .bq-corps { gap: 4px; padding: 8px 10px 10px; }
.bq-eq h3 { font-size: 1.1rem; }
.bq-eq .bq-rarete { font-size: .76rem; }
.bq-eq-type { margin: 0; font-size: .8rem; color: var(--encre-att); }
.bq-eq .bq-btn { min-height: 40px; font-size: .9rem; }
.bq-eq-vide { margin: 0; padding: 14px; color: var(--encre-att); font-size: .95rem; border: 1px dashed var(--filet); }

/* ——— Ordinateur : les rayons en colonne à gauche (ils restent à l'écran), les articles sur toute la largeur ——— */
@media (min-width: 1100px) and (min-height: 640px) {
  .bq-app {
    width: min(100% - 48px, 1500px); display: grid; grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: "tete tete" "onglets lien" "onglets rayon"; column-gap: 40px; align-items: start;
  }
  .bq-tete { grid-area: tete; margin: 0; padding-inline: 0; }
  .bq-titre h1 { font-size: 2rem; }
  .bq-onglets {
    grid-area: onglets; position: sticky; top: 84px; flex-direction: column; justify-content: flex-start; gap: 2px;
    margin: 18px 0 0; padding: 0; overflow: visible; border-bottom: 0; border-right: 1px solid var(--filet); background: none;
  }
  .bq-onglets button { flex: none; min-height: 44px; padding: 0 16px; text-align: left; font-size: 1.15rem; }
  .bq-onglets button:hover { color: var(--encre); }
  .bq-onglets .bq-onglet-reliq { padding-left: 32px; }
  .bq-onglet-reliq::before { left: 15px; }
  .bq-onglets button[aria-selected="true"] { background: linear-gradient(90deg, rgba(240, 217, 160, .09), transparent); }
  .bq-onglets button[aria-selected="true"]::after { left: auto; right: -1px; top: 6px; bottom: 6px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--serment) 20% 80%, transparent); }
  .bq-lien-annales { grid-area: lien; }
  .bq-rayon { grid-area: rayon; min-width: 0; }
  .bq-intro { font-size: 1.02rem; max-width: 80ch; }
  .bq-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .bq-rayon--des .bq-grille, .bq-rayon--personnages .bq-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bq-rayon--cadres .bq-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bq-grille--eq { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
}
@media (min-width: 1600px) and (min-height: 640px) {
  .bq-rayon--des .bq-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bq-rayon--cadres .bq-grille { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ——— Mandats du Héraut et Bestiaire d'Aubemont ——— */
.bq-mandats { display: grid; }
.bq-mandats .md { width: 100%; max-width: 720px; }
.bq-bestiaire { margin-top: 18px; }
.bq-bestiaire h2 { margin: 0 0 10px; font: 600 1.2rem/1.2 var(--titre); color: var(--serment); }
.bq-bestiaire h2 .num { margin-left: 6px; font: 400 .85rem/1 var(--texte); color: var(--encre-att); }
.bq-bt-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.bq-bt { display: grid; grid-template-rows: auto auto auto; gap: 4px; padding: 0 0 10px; background: var(--surface); border: 1px solid var(--filet); overflow: hidden; }
.bq-bt-gravure { display: block; aspect-ratio: 4 / 3; background: linear-gradient(0deg, var(--surface) 0%, rgba(22, 16, 18, .25) 45%, rgba(22, 16, 18, 0) 75%), var(--img, none) center 28% / 150% auto no-repeat, #0B0809; }
.bq-bt-nom { padding: 0 10px; font: 600 1rem/1.15 var(--titre); color: var(--encre); }
.bq-bt-n { padding: 0 10px; font-size: .78rem; color: var(--encre-att); }
.bq-bt--calamite { border-color: rgba(200, 66, 58, .55); }
.bq-bt--calamite .bq-bt-nom { color: #F2B8A8; }
.bq-bt--sentence { border-color: rgba(240, 217, 160, .35); }
/* Pas encore vaincue : une silhouette sous un voile de suie */
.bq-bt--inconnue .bq-bt-gravure { background: radial-gradient(ellipse 40% 50% at 50% 60%, rgba(240, 217, 160, .08), transparent 70%), repeating-linear-gradient(115deg, rgba(0, 0, 0, .4) 0 1px, transparent 1px 4px), #0E0A0B; }
.bq-bt--inconnue .bq-bt-nom { color: var(--encre-att); font-style: italic; }
@media (min-width: 1100px) { .bq-bt-grille { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } }

/* ——— Les Sceaux : briser un code, parrainer ——— */
.bq-sceaux { display: grid; gap: 10px; max-width: 640px; margin-bottom: 26px; }
.bq-sceaux h2 { margin: 0; font: 600 1.3rem/1.2 var(--titre); color: var(--serment); }
.bq-sceaux .bq-intro { margin: 0; }
.bq-sceau-ligne { display: flex; gap: 10px; align-items: stretch; }
.bq-sceau-ligne input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; font: 500 1.05rem/1 var(--texte); letter-spacing: .06em; color: var(--encre); background: #0B0809; border: 1px solid var(--filet); }
.bq-sceau-ligne input:focus-visible { outline: 2px solid var(--serment); outline-offset: 2px; }
.bq-sceau-ligne .bouton { flex: none; padding-inline: 18px; }
.bq-sceau-ok { margin: 0; padding: 12px 14px; border: 1px solid rgba(201, 88, 78, .45); border-left: 3px solid #C9584E; background: radial-gradient(ellipse 60% 120% at 0% 0%, rgba(201, 88, 78, .14), transparent 70%), #110B0B; line-height: 1.45; }
.bq-sceau-ok svg { width: 16px; height: 16px; vertical-align: -3px; }
.bq-parrainage .bq-intro svg, .bq-sceaux .bq-intro svg { width: 16px; height: 16px; vertical-align: -3px; }
.bq-parrainage #lien-parrain { font-size: .9rem; letter-spacing: 0; }
@media (max-width: 519px) { .bq-sceau-ligne { flex-direction: column; } }

/* ——— Maîtrise des classes (onglet Hauts faits) ——— */
.bq-maitrise { margin-bottom: 24px; }
.bq-maitrise h2 { margin: 0 0 6px; font: 600 1.25rem/1.2 var(--titre); color: var(--serment); }
.bq-maitrise-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.bq-maitrise-ligne { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--filet); }
.bq-maitrise-fig { width: 44px; height: 44px; overflow: hidden; }
.bq-maitrise-corps { display: grid; gap: 4px; min-width: 0; }
.bq-maitrise-corps b { font: 600 1rem/1.1 var(--titre); }
.bq-maitrise-xp { font-size: .75rem; color: var(--encre-att); }
.bq-maitrise-rang { display: grid; place-items: center; width: 34px; height: 34px; font: 600 1.15rem/1 var(--titre); color: #1A0F08; background: radial-gradient(circle at 40% 35%, #FFF0B8, #E9C066 45%, #8A5E16); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }

/* ——— Présents : le lien sous l'article, et le choix de l'ami ——— */
.bq-offrir { justify-self: center; margin-top: 4px; font-size: .85rem; }
.bq-form--offrir { display: grid; gap: 6px; text-align: left; }
.bq-form--offrir select { min-height: 44px; padding: 0 10px; color: var(--encre); background: #0B0809; border: 1px solid var(--filet); font: inherit; }
.bq-form--offrir select:focus-visible { outline: 2px solid var(--serment); outline-offset: 2px; }

/* ——— Pour qui arrive sans compte : ce qui est gratuit, ce qui coûte de l'argent (rapport « 100 inconnus », 27/10/2026) ——— */
.bq-bourse small { font: 500 .75rem/1 var(--texte); color: var(--encre-att); letter-spacing: .02em; margin-left: 1px; }
.bq-bourse-serments small { color: rgba(191, 233, 255, .75); }
/* Entre 401 et 519 px, l'en-tête tient sur une ligne : les mots « Or » et « Serments » n'y entrent pas (l'encadré les explique) */
@media (min-width: 401px) and (max-width: 519px) { .bq-bourse small { display: none; } }
.bq-gratuit {
  display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px; max-width: 72ch;
  border: 1px solid rgba(240, 217, 160, .35); border-left: 3px solid var(--serment); background: rgba(22, 16, 18, .92);
  font-size: .95rem; line-height: 1.5; color: var(--encre);
}
.bq-gratuit p { margin: 0; }
.bq-gratuit b { color: var(--serment); font-weight: 600; }
.bq-gratuit .pf-piece, .bq-gratuit .pf-serment { width: 16px; height: 16px; vertical-align: -3px; }
.bq-gratuit-etat { color: #BFE9FF; }
.bq-gratuit a { color: var(--serment); }