/* La carte joueur. Tout est en unites relatives a sa largeur : la meme
   carte tient dans une vignette de 80 px comme en plein ecran. */

.carte {
  position: relative; display: block; width: 100%; aspect-ratio: 300 / 420;
  container-type: inline-size; perspective: 900px;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent;
}
button.carte { cursor: pointer; }
button.carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; }

.corps {
  position: absolute; inset: 0; font-size: 4.6cqw;
  font-family: var(--police-carte);
  transition: transform .18s ease-out; will-change: transform;
}
.plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.buste { position: absolute; left: 24%; top: 4.5%; width: 68%; height: 56%; pointer-events: none; }
.buste svg { width: 100%; height: 100%; display: block; }
.surcouche { position: absolute; inset: 0; color: var(--encre); }

.note { position: absolute; left: 11%; top: 12%; width: 22%; text-align: center; line-height: .88; }
.note b { display: block; font-size: 4.3em; font-weight: 800; letter-spacing: -.05em; }
.note i { display: block; font-style: normal; font-size: 1.75em; font-weight: 800; margin-top: .12em; }
.note .dr { display: block; width: 2.5em; height: 1.66em; margin: .55em auto 0;
  border-radius: .18em; overflow: hidden; box-shadow: 0 0 0 .06em rgba(0,0,0,.25); }
.note .dr svg { width: 100%; height: 100%; display: block; }

.nom {
  position: absolute; left: 8%; right: 8%; top: 60.5%; text-align: center;
  font-size: 2.15em; font-weight: 800; letter-spacing: .01em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stats {
  position: absolute; left: 8.5%; right: 8.5%; top: 69%;
  display: grid; grid-template-columns: repeat(6, 1fr); text-align: center;
}
.stats .l { font-size: .9em; font-weight: 700; opacity: .8; letter-spacing: .02em; }
.stats .v { font-size: 1.75em; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.badges {
  position: absolute; left: 14%; right: 14%; top: 83.5%;
  display: flex; justify-content: center; align-items: center; gap: .6em;
}
.badges .ec {
  font-size: .86em; font-weight: 800; padding: .2em .55em; letter-spacing: .03em;
  border: .1em solid currentColor; border-radius: .3em; opacity: .9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  text-transform: uppercase;
}

/* Le halo qui respire : reserve aux cartes montrees en grand. */
.carte.anime { animation: respire 3s ease-in-out infinite; }
@keyframes respire {
  0%, 100% { filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
  50% { filter: drop-shadow(0 0 18px var(--halo)) drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
}
.carte:not(.anime) { filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }

/* Le dos : meme silhouette, sans rien reveler. */
.dos { position: relative; width: 100%; aspect-ratio: 300 / 420; }
.dos svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

html.calme .carte.anime { animation: none; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }

.badges .ecu { width: 1.9em; height: 2.2em; flex: none; display: block; }
.badges .ecu svg { width: 100%; height: 100%; display: block; }
.badges .ec { flex: 0 1 auto; min-width: 0; }

.dos-bord { stroke: var(--bord, #34405e); transition: stroke .3s ease; }
.dos-coeur { fill: var(--bord, #34405e); opacity: var(--coeur, 0); transition: opacity .3s ease; filter: blur(30px); }

.flag { display: block; width: 100%; height: 100%; object-fit: cover; }