/* ============================================================
   MYTHÉO — Kailash · écran TRÉSORS (le mur de collection).
   Style porté du CODE RD (screens/tresors.css), renommé .kailash-
   tresors-*, consolidé sur le cadre (catégorie `grid`) : décor voûte au
   trésor → .kailash-screen-bg, en-tête + compteur → slot titre fixe,
   collection (coups de cœur / trésors / médailles) → body défilant.
   Tokens du cadre uniquement (--or, --or-clair, --or-braise, --texte,
   --texte-doux, --disp, --corps, --lueur) ; aucune valeur de chrome en
   dur (marge via --kailash-body-top du cadre).
   ============================================================ */

/* ---- DÉCOR : voûte au trésor chaude & sombre ---- */
.kailash-tresors .kailash-screen-bg { background:
  radial-gradient(120% 62% at 50% -6%, rgba(var(--lueur),.30), rgba(120,84,28,.10) 42%, rgba(11,8,5,0) 72%),
  radial-gradient(90% 46% at 50% 108%, rgba(214,160,64,.26), rgba(11,8,5,0) 60%),
  linear-gradient(#1c1509 0%, #150f07 34%, #0f0a05 66%, #0a0704 100%); }
.kailash-tresors-arch { position: absolute; z-index: 1; top: var(--kailash-chrome-top); left: 50%; transform: translateX(-50%); width: 340px; height: 640px; max-width: 92vw; pointer-events: none; opacity: .5; }
.kailash-tresors-arch svg { width: 100%; height: 100%; }
.kailash-tresors .kailash-screen-stars {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 20%, rgba(var(--lueur),.75), transparent),
    radial-gradient(1.4px 1.4px at 82% 15%, rgba(var(--lueur),.6),  transparent),
    radial-gradient(1.2px 1.2px at 32% 9%,  rgba(var(--lueur),.7),  transparent),
    radial-gradient(1.5px 1.5px at 66% 28%, rgba(var(--lueur),.5),  transparent),
    radial-gradient(1.1px 1.1px at 92% 46%, rgba(var(--lueur),.55), transparent),
    radial-gradient(1.3px 1.3px at 8% 54%,  rgba(var(--lueur),.5),  transparent),
    radial-gradient(1.5px 1.5px at 50% 72%, rgba(var(--lueur),.45), transparent),
    radial-gradient(1.1px 1.1px at 24% 84%, rgba(var(--lueur),.4),  transparent),
    radial-gradient(1.4px 1.4px at 78% 90%, rgba(var(--lueur),.4),  transparent);
}

/* ---- EN-TÊTE + compteur (dans le slot titre fixe du cadre) ---- */
.kailash-tresors .kailash-screen-title h1 { font-size: 38px; }
.kailash-tresors-count { margin: 11px auto 0; width: 280px; max-width: 76vw; }
.kailash-tresors-crow { display: flex; align-items: baseline; justify-content: center; gap: 7px; font-family: var(--disp); font-weight: 700; }
.kailash-tresors-n { font-size: 19px; color: var(--or-clair); }
.kailash-tresors-t { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); }
.kailash-tresors-bar { margin-top: 9px; height: 7px; border-radius: 7px; background: rgba(240,224,178,.16); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.kailash-tresors-fill { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--or-braise), var(--or-clair)); box-shadow: 0 0 10px rgba(var(--lueur),.7); }

/* ---- CONTENU défilant (body `grid`) : conteneur borné pour grand écran ---- */
.kailash-tresors-inner { max-width: 1080px; margin: 0 auto; }
.kailash-tresors-sect { font-family: var(--disp); font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--texte-doux); text-align: center; margin: 14px 0 16px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.kailash-tresors-sect::before, .kailash-tresors-sect::after { content: ""; height: 1px; flex: 1; max-width: 56px; background: linear-gradient(90deg, transparent, rgba(var(--lueur),.5)); }
.kailash-tresors-sect::after { background: linear-gradient(90deg, rgba(var(--lueur),.5), transparent); }

/* ---- grilles de médaillons (trésors + coups de cœur) : respirent en grand écran ---- */
.kailash-tresors-grid, .kailash-tresors-favs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 18px 10px; }
.kailash-tresors-favs { margin-bottom: 6px; }
.kailash-tresors-favs.kailash-tresors-favs-empty { display: block; }

.kailash-tresors-tr { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 7px; font: inherit; }
/* Le médaillon = brique PARTAGÉE (.kailash-medallion) ; trésors ne pose que sa
   taille (via --k-med) et son survol propre. Recette/anneaux/état .is-locked
   hérités du cadre. NB : scopé sous html[data-template] pour égaler la
   spécificité de la base (--k-med:64px) — même mécanisme que --sm/--lg. */
html[data-template="kailash"] .kailash-tresors-med { --k-med: 74px; }
.kailash-tresors-tr:hover .kailash-tresors-med { transform: scale(1.09); box-shadow: 0 0 0 3px var(--or-clair), 0 0 26px rgba(var(--lueur),.6), 0 0 0 5px rgba(10,14,20,.9), 0 8px 20px rgba(0,0,0,.55); }
.kailash-tresors-shine { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(60% 42% at 34% 24%, rgba(255,247,214,.32), rgba(255,247,214,0) 60%); }
.kailash-tresors-nm { font-family: var(--disp); font-weight: 700; font-size: 13px; color: #efe4c6; line-height: 1.05; text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,.8); }

/* ---- verrouillé (silhouette + cadenas) ---- */
.kailash-tresors-tr.kailash-tresors-lock { cursor: default; }
.kailash-tresors-med.kailash-tresors-mlk { background-image: none; background: radial-gradient(120% 120% at 50% 30%, #241d12, #100b06); box-shadow: 0 0 0 2px rgba(234,220,190,.28), 0 0 0 4px rgba(10,14,20,.72), 0 6px 15px rgba(0,0,0,.5), inset 0 -11px 20px rgba(6,8,14,.55); }
.kailash-tresors-mlk .kailash-tresors-sil { position: absolute; inset: 0; display: grid; place-items: center; }
.kailash-tresors-mlk .kailash-tresors-sil svg { width: 52%; height: 52%; color: rgba(var(--lueur),.22); fill: currentColor; }
.kailash-tresors-mlk .kailash-tresors-pad { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: #0e0a05; display: grid; place-items: center; border: 1px solid rgba(var(--lueur),.4); }
.kailash-tresors-mlk .kailash-tresors-pad svg { width: 12px; height: 12px; color: var(--or); fill: none; stroke: currentColor; stroke-width: 2.2; }
.kailash-tresors-tr.kailash-tresors-lock .kailash-tresors-nm { color: rgba(201,189,160,.5); letter-spacing: .2em; }

/* ---- coups de cœur (favoris) ---- */
.kailash-tresors-tr.kailash-tresors-fav .kailash-tresors-med { box-shadow: 0 0 0 2px rgba(var(--lueur),.85), 0 0 0 4px rgba(10,14,20,.82), 0 0 18px rgba(var(--lueur),.28), 0 6px 15px rgba(0,0,0,.5), inset 0 -11px 20px rgba(6,8,14,.5); }
.kailash-tresors-heart { position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; background: #0e0a05; display: grid; place-items: center; border: 1px solid rgba(var(--lueur),.5); }
.kailash-tresors-heart svg { width: 13px; height: 13px; color: var(--or); fill: currentColor; }
.kailash-tresors-favempty { display: flex; align-items: center; gap: 12px; justify-content: center; text-align: left; padding: 6px 18px 4px; color: var(--texte-doux); }
.kailash-tresors-favempty-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(var(--lueur),.35); color: var(--or); }
.kailash-tresors-favempty-ic svg { width: 17px; height: 17px; }
.kailash-tresors-favempty-tx { font-family: var(--corps); font-size: 14.5px; font-weight: 500; line-height: 1.45; color: #cabd9c; max-width: 240px; }

/* ---- médailles ---- */
.kailash-tresors-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 14px 6px; margin-top: 6px; }
.kailash-tresors-bgi { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.kailash-tresors-medal { position: relative; width: 66px; height: 82px; }
.kailash-tresors-rib { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; }
.kailash-tresors-disc { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 56px; }
.kailash-tresors-lbl { font-family: var(--disp); font-weight: 700; font-size: 12px; line-height: 1.1; color: #efe4c6; letter-spacing: .02em; }
.kailash-tresors-bgi.kailash-tresors-off .kailash-tresors-medal { filter: grayscale(1) brightness(.5) contrast(.9); opacity: .62; }
.kailash-tresors-bgi.kailash-tresors-off .kailash-tresors-lbl { color: rgba(201,189,160,.5); }

/* prefers-reduced-motion : la coupe globale du cadre (.kailash-app *) neutralise
   déjà transitions/animations ; garde-fou explicite sur le survol des médaillons. */
@media (prefers-reduced-motion: reduce) {
  .kailash-tresors-med { transition: none; }
}