/* ------------------------------------------------------------------
   ui.css, la couche d'harmonisation des composants.

   Chargée en dernier : elle ne redessine pas l'application, elle aligne
   les composants qui se ressemblent (groupes d'onglets, cartes, boutons
   de récupération…) sur une seule règle. Les rayons suivent un principe
   simple : un élément posé dans un parent arrondi a pour rayon celui du
   parent moins la marge qui les sépare, sinon les courbes ne sont pas
   concentriques et l'œil le voit tout de suite.
------------------------------------------------------------------ */

/* ======================= groupes d'onglets =======================
   --seg-r : rayon du groupe, --seg-pad : marge intérieure. L'indicateur
   (js/ui.js) prend le rayon concentrique et glisse d'un choix à l'autre. */

.tabs, .fam-bar, .seg {
  --seg-pad: 4px;
  --seg-r: 999px;
  position: relative;
  padding: var(--seg-pad);
  border-radius: var(--seg-r);
  isolation: isolate;
}
.picker .fam-bar { --seg-r: 16px; border-radius: var(--seg-r); }

.seg-ind {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  border-radius: max(6px, calc(var(--seg-r) - var(--seg-pad)));
  pointer-events: none;
  opacity: 0;
  transition:
    transform .38s cubic-bezier(.3, 1.25, .5, 1),
    width .38s cubic-bezier(.3, 1.25, .5, 1),
    height .38s cubic-bezier(.3, 1.25, .5, 1),
    opacity .2s;
  will-change: transform;
}
.has-ind > :not(.seg-ind) { position: relative; z-index: 1; }

/* le fond passe du bouton actif à l'indicateur */
.has-ind .tab.is-active,
.has-ind .fam[aria-selected="true"],
.has-ind .seg-btn.is-active {
  background: none !important;
  box-shadow: none !important;
}
.has-ind .tab, .has-ind .fam, .has-ind .seg-btn { transition: color .25s; }

/* onglets du haut : le dégradé rose de la marque */
.tabs > .seg-ind {
  background: linear-gradient(180deg, #ff6ad8, #b44dff 60%, #7b3cff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 0 #3c1778;
}
/* familles du présentoir : la pastille claire */
.fam-bar > .seg-ind {
  background: linear-gradient(180deg, #ffffff, #e2d6ff);
  box-shadow: 0 2px 0 rgba(10, 6, 26, .9);
}
.has-ind .fam[aria-selected="true"] { color: #2a1a5e; }
/* groupes discrets (grouper par, effets…) */
.seg > .seg-ind {
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}

@media (prefers-reduced-motion: reduce) {
  .seg-ind { transition: none; }
}

/* la colonne des collections garde sa largeur : elle suivait la longueur
   des noms affichés, et la recherche rétrécissait d'un onglet à l'autre */
@media (min-width: 1100px) {
  #view-open.is-active { grid-template-columns: 330px minmax(0, 1fr); }
}

/* ======================= panneau des collections =======================
   Une carte : même rayon partout, une bordure égale, une ombre douce qui
   ne déborde plus en dessous. La marge est la même sur les quatre côtés ;
   seule la liste défile, à l'intérieur de la carte. */
@media (min-width: 1100px) {
  .picker-panel {
    padding: 16px !important;
    gap: 12px;
    border: 1px solid rgba(190, 150, 255, .18) !important;
    border-radius: 22px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .9) !important;
    background: linear-gradient(180deg, rgba(34, 26, 76, .9), rgba(16, 12, 38, .94)) !important;
    overflow: hidden;
  }
  .picker .rail {
    padding: 2px 2px 2px !important;
    margin: 0 -4px;
    padding-inline: 4px !important;
    /* le haut et le bas de la liste s'estompent au lieu d'être coupés net */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent);
            mask-image: linear-gradient(180deg, transparent 0, #000 12px, #000 calc(100% - 16px), transparent) !important;
  }
  .pk-sec:last-child { margin-bottom: 8px; }
}

/* l'étoile des favoris : plus grande, centrée sur la hauteur de la carte,
   après le pourcentage ; son rond de survol reste dans la carte */
.picker .fav-star {
  top: 50%;
  right: 8px;
  width: 30px; height: 30px;
  translate: 0 -50%;
  color: rgba(255, 255, 255, .3);
  transform: none !important;
}
.picker .fav-star .i { width: 17px; height: 17px; }
.picker .fav-star:hover { background: rgba(255, 255, 255, .1); color: #ffd36a; }
.picker .fav-star.is-on { color: #ffd36a; }
.picker .fav-star.is-on .i { filter: drop-shadow(0 0 5px rgba(255, 176, 32, .7)); }
.picker .coll-pct { margin-right: 34px !important; }
.picker .coll { padding-right: 8px; }

/* ============================== l'en-tête ==============================
   La marque : le pictogramme seul (net, sans texte incrusté), plus
   grand, à côté du nom écrit. */
.brand { gap: 10px; }
.brand-logo {
  width: 42px !important; height: 42px !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(255, 62, 200, .35));
}

/* Le portefeuille : 8 px entre les pastilles, 12 px entre les groupes
   (pastilles | vinyles | profil). Il ne coupe plus ce qui dépasse : les
   lueurs et l'anneau de l'avatar étaient rognés en carré par overflow. */
.wallet {
  gap: 8px !important;
  overflow: visible !important;
  padding: 4px 2px 6px;
}
.wallet-sep { margin: 0 4px; height: 20px; }
.wallet .top-av { margin-left: 0; }

/* les pastilles : une ombre posée et douce, plus de lueur qui s'étale */
.keys, .dbz {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 rgba(10, 6, 26, .9) !important;
}
.keys.is-full { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 rgba(10, 6, 26, .9), 0 0 0 1px rgba(52, 225, 255, .55) !important; }
.keys.is-prem.is-full { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 0 rgba(10, 6, 26, .9), 0 0 0 1px rgba(255, 210, 74, .6) !important; }

/* l'avatar : une taille fixe, un anneau fin, rien qui ne dépasse */
.top-av {
  width: 36px !important; height: 36px !important;
  flex: 0 0 36px;
  box-shadow: 0 0 0 2px rgba(255, 62, 200, .55) !important;
}
.top-av.is-premium { box-shadow: 0 0 0 2px #ffc93a, 0 0 10px rgba(255, 200, 80, .55) !important; }
.top-av:hover { transform: none !important; box-shadow: 0 0 0 2px rgba(255, 122, 217, .9) !important; }

@media (max-width: 759px) {
  .wallet { gap: 6px !important; padding: 4px 4px 6px 0; }
  .brand-logo { width: 38px !important; height: 38px !important; }
  .top-av { width: 34px !important; height: 34px !important; flex-basis: 34px; }
}

/* le nouveau marteau : la tête en haut, le poignet au bout du manche */
.hammer { transform-origin: 50% 96% !important; }
.hm-ico { display: block; width: 100%; height: 100%; }

/* « Disque du jour » et « Vitrine » disent déjà qu'ils sont prêts par leur
   couleur (et le disque du jour par son mouvement) : la pastille rouge
   en plus était redondante, et mal placée d'un bouton à l'autre. */
.daily-btn .tab-dot, .showcase-btn .tab-dot { display: none !important; }

/* ============================== le présentoir ==============================
   La scène garde la même hauteur quel que soit le volume : c'était le
   contenu du dessous (boutons d'ouverture ou panneau du cadenas, titre
   sur une ou deux lignes) qui la faisait grandir ou rétrécir, et avec
   elle le disque et les flèches, qu'il fallait aller rechercher. */
@media (min-width: 760px) {
  #view-open .shop-scene {
    flex: 0 0 auto;
    height: clamp(170px, calc(100dvh - 540px), 460px);
    min-height: 0;
  }
}

/* Les lueurs s'éteignent en douceur avant les bords de la scène au lieu
   d'être coupées net par elle (en haut surtout, sous l'en-tête). */
.stage-decor {
  -webkit-mask-image: radial-gradient(closest-side at 50% 48%, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side at 50% 48%, #000 55%, transparent 100%);
}

/* Hall of Fame : le décor reste dans la scène et ne passe plus sous les
   flèches ni sous les boutons du haut ; les halos tournants s'estompent
   vers l'extérieur au lieu de s'arrêter d'un coup. */
#view-open.is-hof .hof-deco { inset: 0 !important; }
.hd-halo {
  width: 72% !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 92%);
          mask-image: radial-gradient(closest-side, #000 25%, transparent 92%);
}
.hd-halo.h2 { width: 50% !important; }
.hd-beam {
  top: 0 !important;
  height: 70% !important;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
}
/* les flèches sont à mi-hauteur, les boutons du jour et de la vitrine en
   haut : disques et trophées vont dans le bas des côtés */
.hd-disc.d1 { right: 1.5% !important; left: auto !important; top: 64% !important; }
.hd-disc.d2 { left: 1.5% !important; right: auto !important; top: 64% !important; }
.hd-disc.d3 { right: 24% !important; top: 86% !important; }
.hd-disc.d4 { display: none !important; }
.hd-trophy.t1 { left: 12% !important; top: 76% !important; }
.hd-trophy.t2 { right: 12% !important; top: 74% !important; }
.hd-trophy.t3 { left: 24% !important; top: 86% !important; }
.hd-glint.g3 { left: 82% !important; top: 30% !important; }
.hd-glint.g4 { left: 16% !important; top: 30% !important; }
.hd-glint.g9 { left: 6% !important; top: 88% !important; }
.hd-glint.g8 { left: 94% !important; top: 90% !important; }

/* Pas de défilement sur le présentoir : un conteneur qui défile rogne
   tout ce qui dépasse, et le vinyle qui se soulève au survol était coupé
   net en haut (ou disparaissait quand le conteneur défilait d'un cran).
   La hauteur de la scène suffit à tout faire tenir. */

/* Le bouton du disque du jour, dans sa fenêtre : un seul relief (bordure
   et ombre portée nette), sans le halo coloré ni le reflet animé du
   gros bouton « Ouvrir » qui s'ajoutaient par-dessus. */
.daily-modal .dl-claim {
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 3px 0 rgba(90, 40, 0, .9) !important;
}
.daily-modal .dl-claim::after { display: none !important; }
.daily-modal .dl-claim:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ============================ liste déroulante ============================ */
.ui-native {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0; pointer-events: none;
  overflow: hidden; clip-path: inset(50%);
}
.ui-select { position: relative; display: inline-flex; min-width: 0; }
.ui-sel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  width: 100%;
  padding: 7px 10px 7px 13px;
  border: 1px solid rgba(190, 150, 255, .22);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(60, 46, 120, .7), rgba(34, 24, 78, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ui-sel-btn:hover, .ui-select.is-open .ui-sel-btn { border-color: rgba(214, 180, 255, .55); }
.ui-sel-btn:focus-visible { outline: 2px solid #c9a6ff; outline-offset: 2px; }
.ui-sel-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sel-chev {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: .7;
  transition: rotate .25s;
}
.ui-select.is-open .ui-sel-chev { rotate: 180deg; }

.ui-sel-list {
  position: fixed;
  z-index: 9800;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(190, 150, 255, .26);
  border-radius: 16px;
  background: linear-gradient(180deg, #2a1f5c, #17113a);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  transform-origin: top center;
  transition: opacity .16s, transform .2s cubic-bezier(.2, .9, .3, 1.2);
}
.ui-sel-list.is-on { opacity: 1; transform: none; }
.ui-sel-list li {
  position: relative;
  padding: 9px 34px 9px 12px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.ui-sel-list li:hover, .ui-sel-list li:focus { background: rgba(255, 255, 255, .09); color: #fff; }
.ui-sel-list li[aria-selected="true"] { color: #fff; background: rgba(180, 77, 255, .28); }
.ui-sel-list li[aria-selected="true"]::after {
  content: '';
  position: absolute;
  right: 12px; top: 50%;
  width: 10px; height: 6px;
  border: solid #ff9be6;
  border-width: 0 0 2px 2px;
  translate: 0 -70%;
  rotate: -45deg;
}
/* dans un champ de formulaire (mise en vente) : pleine largeur, angles du champ */
.perso-field .ui-select { display: flex; width: 100%; }
.perso-field .ui-sel-btn { border-radius: 11px; padding: 10px 12px; background: rgba(0, 0, 0, .3); border-color: var(--line-2); font-weight: 600; }
/* dans « Trier par » : le libellé et la liste forment une pastille */
.serie-pick .ui-select { max-width: 220px; }
.serie-pick .ui-sel-btn { padding: 5px 9px 5px 12px; }

/* ========================= barre d'outils de la collection =========================
   Le même habit que le panneau des collections de l'accueil : dégradé
   violet, bordure claire, un seul rayon. */
.coll-toolbar {
  border: 1px solid rgba(190, 150, 255, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(34, 26, 76, .92), rgba(16, 12, 38, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .9) !important;
  padding: 14px !important;
}
#coll-search {
  border: 1px solid rgba(190, 150, 255, .2) !important;
  background: rgba(10, 6, 30, .55) !important;
}
#coll-search:focus { border-color: rgba(214, 180, 255, .6) !important; outline: none; }
.serie-pick { border-color: rgba(190, 150, 255, .18) !important; background: rgba(10, 6, 30, .45) !important; }

.tb-reset {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: #ff9be6;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 155, 230, .45);
  cursor: pointer;
  white-space: nowrap;
}
.tb-reset:hover { color: #fff; text-decoration-color: #fff; }
.tb-reset[hidden] { display: none; }

/* ========================== contraste des couleurs ==========================
   Chaque collection a sa teinte ; posée en aplat clair (rose d'Anime, jaune
   du Hall of Fame…), elle rendait le texte blanc illisible. La teinte reste
   là où elle aide à se repérer (bordure, liseré, pastille), mais les fonds
   qui portent du texte blanc restent sombres : luminosité ≤ 30 %, soit un
   contraste d'au moins 4,5:1 quelle que soit la teinte. */
.coll[aria-selected="true"],
.picker .coll.is-on {
  background: linear-gradient(140deg, hsl(var(--hue) 55% 30%), hsl(var(--hue) 50% 17%)) !important;
  border-color: hsl(var(--hue) 85% 64%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 1px hsl(var(--hue) 85% 64% / .35), 0 0 18px -8px hsl(var(--hue) 90% 60%) !important;
  color: #fff !important;
}
.coll[aria-selected="true"] .coll-sub,
.picker .coll.is-on .coll-sub { color: rgba(255, 255, 255, .78) !important; }

.sh-hop-btn.is-on {
  background: hsl(var(--hue) 50% 24%) !important;
  border-color: hsl(var(--hue) 85% 64%) !important;
  color: #fff;
}
.sh-hop-btn i { box-shadow: 0 0 0 2px rgba(10, 6, 26, .9); }
.sh-hop-btn.is-on i { box-shadow: 0 0 0 2px #fff; }
.serie-head {
  background:
    radial-gradient(120% 140% at 0% 0%, hsl(var(--hue) 70% 40% / .32), transparent 60%),
    linear-gradient(180deg, rgba(40, 30, 88, .85), rgba(20, 14, 50, .92)) !important;
  border: 1px solid rgba(190, 150, 255, .18) !important;
  border-radius: 22px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 18px 40px -24px rgba(0, 0, 0, .9) !important;
}
.sh-vol.is-on {
  background: hsl(var(--hue) 50% 26%) !important;
  border-color: hsl(var(--hue) 85% 64%) !important;
}
.vol.is-on {
  background: linear-gradient(180deg, hsl(var(--hue) 60% 38%), hsl(var(--hue) 55% 24%)) !important;
  border-color: hsl(var(--hue) 85% 66%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 3px 0 hsl(var(--hue) 60% 12%) !important;
  color: #fff;
}
.vol.is-on span, .vol.is-on em { color: rgba(255, 255, 255, .8) !important; }
/* le Hall of Fame garde son or, mais avec un texte foncé : l'or est clair */
#view-open.is-hof .vol.is-on {
  background: linear-gradient(180deg, #ffe08a, #e0a526) !important;
  border-color: #fff1bf !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #6b4200 !important;
  color: #3a2400 !important;
}
#view-open.is-hof .vol.is-on b, #view-open.is-hof .vol.is-on span, #view-open.is-hof .vol.is-on em { color: #3a2400 !important; text-shadow: none !important; }

/* ================================ infobulle ================================ */
.info-tip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  margin-left: 6px;
  padding: 0;
  vertical-align: middle;
  border: 1px solid rgba(190, 150, 255, .35);
  border-radius: 50%;
  background: rgba(190, 150, 255, .12);
  color: #d7c9ff;
  font: italic 700 12px/1 Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: help;
}
.info-tip:hover, .info-tip:focus-visible, .info-tip.is-open { background: rgba(190, 150, 255, .28); color: #fff; }
.tip-bubble {
  position: absolute;
  left: calc(50% + var(--tip-dx, 0px)); bottom: calc(100% + 10px);
  display: none;
  z-index: 50;
  width: min(280px, 80vw);
  padding: 9px 12px;
  border: 1px solid rgba(190, 150, 255, .3);
  border-radius: 12px;
  background: #221a4d;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .8);
  color: var(--ink);
  font: 500 12.5px/1.5 var(--font-body, system-ui, sans-serif);
  font-style: normal;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  translate: -50% 4px;
  transition: opacity .15s, translate .15s, visibility .15s;
  pointer-events: none;
}
.tip-bubble::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--tip-arrow, 0px)); top: 100%;
  width: 10px; height: 10px;
  translate: -50% -5px;
  rotate: 45deg;
  background: #221a4d;
  border: solid rgba(190, 150, 255, .3);
  border-width: 0 1px 1px 0;
}
.info-tip:hover .tip-bubble, .info-tip:focus-visible .tip-bubble, .info-tip.is-open .tip-bubble {
  display: block;
  opacity: 1; visibility: visible; translate: -50% 0;
  width: min(280px, 80vw);
}

/* ============================ états vides ============================
   Plus de cadres en pointillés, qui s'empilaient sur la page des amis :
   une surface discrète, pleine, comme le reste de l'application. */
.market-empty, .reco-empty, .reco-hint, .empty-box {
  border: 1px solid rgba(190, 150, 255, .12) !important;
  background: rgba(255, 255, 255, .03);
}
.empty-box { padding: 26px 22px; }

/* =============================== les amis =============================== */
#view-social > .soc-add,
#view-social > .board,
#view-social > .recos,
#view-social > #soc-pending,
#view-social > .soc-list-h { margin-top: 32px; }
#view-social > #soc-list { margin-top: 0; }
#view-social > .page-head + .soc-add { margin-top: 8px; }
#view-social .market-h { margin-bottom: 12px; }
.soc-add-lab { display: flex; align-items: center; margin-bottom: 8px; }
.soc-add-lab label { margin: 0; }
.soc-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.soc-mine {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: #cbb6ff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(203, 182, 255, .4);
  cursor: pointer;
}
.soc-mine:hover { color: #fff; }
.bd-h { display: flex; align-items: center; }
.bd-unit { display: none; }
#view-social .market-list { gap: 10px; }

/* ======================== boutons de récupération ========================
   Un seul dessin pour tout ce qui se « récupère » (succès, défis, tout
   récupérer) : l'or, un texte brun foncé, un relief simple. Le badge garde
   la couleur de son succès ; le bouton, lui, ne change plus de teinte au
   survol (il virait au bleu, au rose… selon le succès). */
.ach-claim:not(.is-off),
.quest-claim,
#ach-claim-all {
  border: 2px solid rgba(20, 14, 51, .9) !important;
  background: linear-gradient(180deg, #fff3a8, #ffd24a 45%, #ff9f1c) !important;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .75), 0 3px 0 #9a4a00 !important;
  color: #3a1d00 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45) !important;
  transition: transform .15s, filter .15s;
}
.ach-claim:not(.is-off) b, .quest-claim b, #ach-claim-all b { color: #7a2e00 !important; }
.ach-claim:not(.is-off):hover, .quest-claim:hover, #ach-claim-all:hover:not(:disabled) {
  filter: brightness(1.07) saturate(1.05);
  transform: translateY(-1px);
}
.ach-claim:not(.is-off):active, .quest-claim:active, #ach-claim-all:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 1px 0 #9a4a00 !important;
}
#ach-claim-all:disabled { filter: grayscale(.7); opacity: .6; }

/* ================================= l'aide =================================
   Grand écran : l'introduction en pleine largeur, puis les questions à
   gauche et la réponse dans une carte à droite (js/help.js). Sur téléphone,
   l'accordéon d'origine. */
#view-about.is-active { display: flex; flex-direction: column; }
#view-about .powered { order: 5; margin-top: 26px; }
.faq:not(.is-md) .faq-nav, .faq:not(.is-md) .faq-panel { display: none; }
.faq.is-md {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  grid-template-areas: "hero hero" "nav panel";
  gap: 18px 22px;
  align-items: start;
}
.faq.is-md .faq-item:not(.faq-hero) { display: none; }
.faq.is-md .faq-hero {
  grid-area: hero;
  padding: 6px 8px;
  border: 1px solid rgba(190, 150, 255, .2);
  border-radius: 22px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(255, 106, 216, .18), transparent 55%),
    linear-gradient(180deg, rgba(34, 26, 76, .92), rgba(16, 12, 38, .94));
}
.faq.is-md .faq-hero summary { cursor: default; font-family: var(--font-display, inherit); font-weight: 400; font-size: 22px; background: none !important; }
.faq.is-md .faq-hero summary::after { display: none; }
.faq.is-md .faq-hero .faq-body { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.faq.is-md .faq-hero .faq-body p { flex: 1 1 420px; font-size: 15px; }

.faq-nav {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: calc(var(--head-h, 64px) + 16px);
}
.faq-nav button {
  padding: 13px 15px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.faq-nav button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.faq-nav button.is-on {
  border-color: rgba(214, 180, 255, .4);
  background: linear-gradient(135deg, rgba(180, 77, 255, .32), rgba(123, 60, 255, .2));
  color: #fff;
}
.faq-nav button:focus-visible { outline: 2px solid #c9a6ff; outline-offset: 2px; }
.faq-panel {
  grid-area: panel;
  min-height: 100%;
  padding: 24px 26px;
  border: 1px solid rgba(190, 150, 255, .18);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(34, 26, 76, .9), rgba(16, 12, 38, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: faq-in .25s ease-out;
}
@keyframes faq-in { from { opacity: .4; } }
.faq-panel-h { margin: 0 0 14px; font-family: var(--font-display, inherit); font-weight: 400; font-size: 24px; color: #fff; }
.faq-panel .faq-body { padding: 0 !important; display: block !important; }
.faq-panel .faq-body p { font-size: 15px; line-height: 1.65; }

/* =============================== la boutique ===============================
   Ce qui s'achète en Decibelz en haut ; les Decibelz eux-mêmes, payés en
   euros, dans une section à part, séparée par un filet et un badge. */
.shop-money {
  margin-top: 34px;
  padding: 20px;
  border: 1px solid rgba(255, 210, 74, .28);
  border-radius: 22px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(255, 190, 60, .1), transparent 60%),
    linear-gradient(180deg, rgba(40, 28, 20, .55), rgba(20, 14, 20, .7));
}
.sm-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.sm-head .shop-h { margin: 0; }
.sm-badge {
  padding: 3px 10px;
  border: 1px solid rgba(255, 210, 74, .5);
  border-radius: 999px;
  color: #ffd98a;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.sm-lead { margin: 8px 0 16px; font-size: 13px; color: var(--ink-2); }
.shop-money .market-note { margin: 14px 0 0; }
/* après le premier affichage, plus d'animation d'entrée : un achat ne doit
   pas faire disparaître puis revenir toutes les cartes */
#view-boutique.is-settled .item-card,
#view-boutique.is-settled .trk-offer:not(.is-got),
#view-boutique.is-settled .deal-card,
#view-boutique.is-settled .prem-card { animation: none !important; }
.shop-h-tracks small {
  font-family: var(--font-body, system-ui, sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--ink-3) !important;
}
.shop-why {
  border: 1px solid rgba(190, 150, 255, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(34, 26, 76, .7), rgba(16, 12, 38, .8)) !important;
}

/* L'anneau de charge n'apparaît que pendant l'appui (et son éclatement) :
   au repos, sa piste restait dessinée autour du sachet, un cercle fixe
   sans signification tant qu'on n'appuie pas. */
.charge-ring { opacity: 0; transition: opacity .25s; }
.charge-wrap.is-charging .charge-ring,
.charge-wrap.is-tearing .charge-ring { opacity: 1; }

/* Détail d'un album : le disque sortait de 30 % de sa largeur, soit 6 %
   au-delà de la colonne, qui le rognait. À 20 %, il reste entier. */
.detail-art .disc { translate: 20% 0 !important; }
.detail-art { padding-right: 6px; }

/* ============================== écrans tactiles ==============================
   Pas de rectangle bleu à chaque appui (surbrillance par défaut d'Android
   et de Chrome) : les boutons ont déjà leur propre retour visuel. Le focus
   clavier, lui, reste visible (:focus-visible). */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"], [role="tab"], label, summary { -webkit-touch-callout: none; }

/* l'affaire du jour : le ruban de remise passe à droite, hors du trajet
   de l'objet qui flotte (le marteau empiétait dessus) */
.deal-ribbon { left: auto !important; right: 16px; }
.deal-ico { animation-name: deal-float !important; }
@keyframes deal-float { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }

/* écran étroit : rien ne dépasse de sa carte */
@media (max-width: 560px) {
  .prem-head { flex-wrap: wrap; }
  .prem-price { margin-left: 0; order: 3; flex-basis: auto; white-space: normal; }
  .deal-card { flex-wrap: wrap; }
  .deal-txt { flex: 1 1 160px; }
  .deal-kicker { letter-spacing: .04em; }
  .deal-buy { flex: 1 1 100%; }
}

/* ================================ Premium ================================ */
.prem-crown-sm { display: inline-flex; vertical-align: -2px; margin-left: 6px; }
.prem-crown-sm svg { width: 17px; height: 13px; filter: drop-shadow(0 0 4px rgba(255, 200, 80, .6)); }
.me-av.is-premium { box-shadow: 0 0 0 3px #ffc93a, 0 0 18px rgba(255, 200, 80, .55); }
.me-prem {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 6px 0 4px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.me-prem[hidden] { display: none; }
.me-prem.is-on {
  padding: 4px 12px 4px 8px;
  border: 1px solid rgba(255, 210, 74, .5);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 200, 80, .22), rgba(255, 150, 40, .1));
}
.me-prem.is-on .prem-crown-sm { margin-left: 0; }
.me-prem.is-on b { color: #ffe08a; font-family: var(--font-display, inherit); font-weight: 400; font-size: 14px; }
.me-prem-go {
  padding: 3px 10px;
  border: 1px solid rgba(255, 210, 74, .5);
  border-radius: 999px;
  background: none;
  color: #ffd98a;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.me-prem-go:hover { background: rgba(255, 210, 74, .12); }
.soc-row.is-premium .soc-av { box-shadow: 0 0 0 2px #ffc93a; }

/* Le panneau des collections : seule la liste se partage la hauteur. Sur
   « Tout », la longue liste écrasait la recherche et les onglets (des
   éléments flexibles qu'on laissait rétrécir). */
.picker-head, .picker .coll-find, .picker .fam-bar { flex: 0 0 auto !important; }
.picker .rail { flex: 1 1 0 !important; min-height: 0; }
/* quand une famille est choisie, pas de titre de section : un peu d'air
   entre les onglets et la première collection */
.picker .rail > .pk-grid:first-child,
.picker .rail > .pk-sec:first-child > .pk-grid:first-child { margin-top: 8px; }
.picker .rail { padding-top: 6px !important; }

/* l'étoile de la vitrine : un dessin centré, plus un caractère dont la
   position dépendait de la police */
.sc-star { line-height: 0; }
.sc-star svg { display: block; width: 56%; height: 56%; fill: currentColor; }

/* la mosaïque d'une collection sur l'étagère */
.st-art.n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.st-art.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.st-art.n3 { grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; }
.st-art.n3 i:first-child { grid-row: 1 / 3; }
.st-art.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }