/* =========================================================
   La carte en grand — visionneuse partagée (js/carte-vue.js)
   Utilisée par l'album (animateurs/collection.html) et par la
   démonstration de pochette (demo-tirage.html) : une seule
   feuille pour les deux, aucune couleur en dur.
   ========================================================= */

.cv {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(46, 31, 77, .9);
  display: none; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
.cv--ouvert { display: flex; }

/* Le fond ne défile plus derrière la carte. */
body.cv-fige { overflow: hidden; }

.cv__boite {
  position: relative; width: 100%;
  /* La largeur est bornée par la HAUTEUR de la fenêtre : une carte au
     rapport 0,706 plus son texte doivent tenir sans déborder, y compris
     sur un téléphone posé à l'horizontale. */
  max-width: min(360px, 44vh);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: max-width var(--rebond);
}

/* Carte seule : plus rien à lire autour, donc toute la hauteur est pour
   l'illustration. 62vh de large = 88vh de haut au rapport 0,706. */
.cv--seule .cv__boite { max-width: min(94vw, 520px, 62vh); }
.cv--seule .cv__site { display: none; }

.cv__scene { width: 100%; }
.cv__scene .card { width: 100%; --card-aspect: 0.706; }

/* =========================================================
   Le découpage de la brillance
   Repris de cartes-holo/zones.html, où il avait été mis au point. Il
   doit vivre ICI, dans la feuille du site : sans lui, `--zone` ne sert
   à rien et la brillance couvre la carte entière, à plat.
   ========================================================= */

/* Une carte sans masque dessiné brille quand même quelque part : plutôt
   que tout illuminer, un balayage diagonal — le reflet d'une vraie carte
   sous une lampe. Remplacé dès qu'un masque alpha existe pour la carte. */
.card.zone { --zone-defaut: linear-gradient(115deg, transparent 26%, #fff 42%, #fff 58%, transparent 74%); }

/* Le masque s'applique aux TROIS couches de brillance : leur effet empile
   .card__shine et ses deux pseudo-éléments, et masquer le parent seul
   laisserait les deux autres briller partout.
   Les PNG sont blancs avec le masque dans leur canal ALPHA — le mode par
   défaut de mask-image, donc pas de mask-mode:luminance, moins bien
   supporté sur Safari. */
.card.zone .card__shine,
.card.zone .card__shine::before,
.card.zone .card__shine::after {
  /* !important assumé : leur v-full-art.css pose « --mask: none » puis
     « mask-image: var(--mask) » sur un sélecteur à 5 classes/attributs
     (.card:not(.masked)[data-supertype][data-rarity] .card__shine), plus
     spécifique que le nôtre à 3. Sans !important le masque est écrasé et
     tout brille — la valeur calculée reste « none ». On refuse de modifier
     leurs fichiers (GPL, repris sans modification) : ça se règle ici. */
  -webkit-mask-image: var(--zone, var(--zone-defaut)) !important;
  mask-image: var(--zone, var(--zone-defaut)) !important;
  -webkit-mask-size: cover !important;             mask-size: cover !important;
  -webkit-mask-position: center center !important; mask-position: center center !important;
  -webkit-mask-repeat: no-repeat !important;       mask-repeat: no-repeat !important;
}

/* Le reflet mobile suit le même découpage, sinon il déborde visiblement
   de la zone qui brille. */
.card.zone .card__glare {
  -webkit-mask-image: var(--zone, var(--zone-defaut)) !important;
  mask-image: var(--zone, var(--zone-defaut)) !important;
  -webkit-mask-size: cover !important;             mask-size: cover !important;
  -webkit-mask-position: center center !important; mask-position: center center !important;
  -webkit-mask-repeat: no-repeat !important;       mask-repeat: no-repeat !important;
}

/* ---------- Les deux boutons ronds ---------- */
.cv__rond {
  position: absolute; top: -12px; z-index: 5;
  background: var(--blanc); color: var(--encre);
  border: 2px solid var(--encre); border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer;
  font-family: 'Baloo 2', sans-serif; font-weight: 800;
  font-size: .92rem; line-height: 1; padding: 0;
  display: grid; place-items: center;
  transition: background var(--sans-rebond), color var(--sans-rebond), opacity var(--sans-rebond);
}
.cv__fermer  { right: -6px; }
.cv__bascule { left: -6px; }
.cv__fermer:hover { background: var(--rose); color: var(--blanc); }
.cv__bascule:hover { background: var(--lilas); color: var(--blanc); }
.cv__bascule[aria-pressed="true"] { background: var(--or); }
.cv__rond:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }

/* En « carte seule », les boutons s'effacent : on regarde l'illustration,
   pas l'interface. Ils reviennent au survol et au clavier. */
.cv--seule .cv__rond { opacity: .45; }
.cv--seule .cv__rond:hover,
.cv--seule .cv__rond:focus-visible { opacity: 1; }

/* ---------- Le texte du site autour de la carte ---------- */
.cv__position {
  text-align: center; color: var(--lilas-clair);
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  margin: 0 0 6px;
}
.cv__annonce {
  font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--blanc); text-align: center; margin: 0 0 12px;
}
.cv__detail { text-align: center; color: var(--blanc); margin-top: 16px; }
.cv__detail h3 { font-size: 1.25rem; margin-bottom: 4px; }
.cv__rarete {
  font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--lilas-clair); margin: 0;
}
.cv__rarete[data-rarete="rare"]       { color: var(--cyan); }
.cv__rarete[data-rarete="epique"]     { color: var(--rose); }
.cv__rarete[data-rarete="legendaire"] { color: var(--or); }
.cv__phrase { font-size: .92rem; margin-top: 8px; opacity: .9; }
.cv__exemplaires { font-size: .82rem; margin-top: 6px; color: var(--lilas-clair); }

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