:root {
  /* Card*/
  --pc-card-width: 333px;
  --pc-card-height: 500px;
  /* Section Colors */
  --pc-section-bg-color: white;
  --pc-section-border-color: grey;
  /* Section Title */
  --pc-title-margin-top: 6px;
  --pc-title-margin-left: 7px;
  /* Section Top */
  --pc-top-height: 242px;
  --pc-top-width: 300px;
  --pc-top-margin-top: 34px;
  --pc-top-margin-left: 16px;
  /* Section Bottom */
  --pc-bottom-margin-top: 315px;
  --pc-bottom-margin-left: 38px;
  --pc-bottom-height: 138px;
  --pc-bottom-width: 255px;
  --pc-mini-logo-margin-top: 25px;
  --pc-mini-logo-margin-left: 230px;
  --pc-mini-logo-width : 40px;

  /* Section Footer */
  --pc-footer-margin-top: 473px;
  --pc-footer-margin-left: 7px;
}

.mb-paper-card-grid {
  position: relative;
  height: 800px;
  width: min(820px, 100%);
  margin: 62px auto;
  perspective: 1200px;
  display: block;
}

.mb-paper-card {
  position: absolute;
  top: 10px;
  left: 50%;
  width: var(--pc-card-width);
  height: var(--pc-card-height);

  display: block;
  text-decoration: none;
  color: #fff;

  background-size: 100% 100%;
  background-repeat: no-repeat;

  /* frame en fond */
  transform-origin: bottom center;
  user-select: none;

  filter: none;
  transition: transform .18s ease, filter .18s ease;
  z-index: 0;
  border-radius: 12px;
  overflow: visible;
  /* outline moved to inner element so it matches the image size */

  /* Set frame image URLs via CSS variables per card color class (defaults)
     Can be overridden per-color below or per-instance via inline variables */
  --frame-border-url: url('/img/Frame/FrameBorderManaBurn.png');
  --frame-alpha-url: none;
}

.mb-paper-card.mb-paper-card-bg-blue {
  --frame-alpha-url: url('/img/Frame/FrameAlphaBlue.png');
}

.mb-paper-card.mb-paper-card-bg-red {
  --frame-alpha-url: url('/img/Frame/FrameAlphaRed.png');
}

.mb-paper-card.mb-paper-card-bg-green {
  --frame-alpha-url: url('/img/Frame/FrameAlphaGreen.png');
}

.mb-paper-card.mb-paper-card-bg-black {
  --frame-alpha-url: url('/img/Frame/FrameAlphaBlack.png');
}

.mb-paper-card.mb-paper-card-bg-white {
  --frame-alpha-url: url('/img/Frame/FrameAlphaWhite.png');
}

/* Canonical inner content container: placed above frames (::before/::after)
   Keeps border-radius/overflow so content aligns with visual frame */
.mb-paper-card.mb-paper-card-inner {
  position: relative;
  z-index: 10;
  border-radius: inherit;
  display: block;
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.mb-paper-card:hover {
  transform:
    translateX(var(--x)) translateY(var(--y)) rotateZ(var(--r)) rotateX(0deg) scale(1.05);
  filter: drop-shadow(0 28px 70px rgba(0, 0, 0, .65));
  z-index: 10;
}

.mb-paper-card-title {
  position: absolute;
  top: var(--pc-title-margin-top);
  left: var(--pc-title-margin-left);
}

.mb-paper-card-title h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.1;
  color: inherit;
}

/* Content panels inside the frame */
.mb-paper-card-top {
  position: absolute;
  left: var(--pc-top-margin-left);
  top: var(--pc-top-margin-top);
  width: var(--pc-top-width);
  height: var(--pc-top-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: black;
  border: 1px solid var(--pc-section-border-color);
  overflow: hidden;
}

/* Top image when provided */
.mb-paper-card-top-img {
  width: auto;
  height: 100%;
  display: block;
  object-fit: cover;
}

.mb-paper-card-bottom {
  position: absolute;
  left: var(--pc-bottom-margin-left);
  top: var(--pc-bottom-margin-top);
  height: var(--pc-bottom-height);
  width: var(--pc-bottom-width);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5px;
  padding-bottom: 5px;
  gap: 6px;
  color: black;
}

.mb-paper-card-footer {
  position: absolute;
  top: var(--pc-footer-margin-top);
  left: var(--pc-footer-margin-left);
}

.mb-paper-card p {
  font-family: "Card", serif;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.2px;
  margin: 0;
  font-size: 25px;
  opacity: .85;
}

.mb-paper-card-footer p {
  margin: 0;
  font-size: 10px;
  line-height: 1;
}

.mb-paper-card-desc {
  opacity: .85;
  white-space: pre-line; /* gère les \n */
}
.mb-paper-card-mini-logo {
  position: absolute;
  left: var(--pc-mini-logo-margin-left);
  top: var(--pc-mini-logo-margin-top);
  width: var(--pc-mini-logo-width, 48px);
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.8;
  transform: rotate(-10deg);
}
/* Placement éventail */
.tc1 {
  --x: -390px;
  --y: 10px;
  --r: -14deg;
  transform: translateX(-390px) translateY(20px) rotateZ(-14deg) rotateX(8deg);
  z-index: 1;
}

.tc2 {
  --x: -270px;
  --y: -20px;
  --r: -7deg;
  transform: translateX(-270px) translateY(10px) rotateZ(-7deg) rotateX(8deg);
  z-index: 2;
}

.tc3 {
  --x: -150px;
  --y: -20px;
  --r: 0deg;
  transform: translateX(-150px) translateY(0px) rotateZ(0deg) rotateX(8deg);
  z-index: 3;
}

.tc4 {
  --x: -30px;
  --y: -20px;
  --r: 7deg;
  transform: translateX(-30px) translateY(10px) rotateZ(7deg) rotateX(8deg);
  z-index: 4;
}

.tc5 {
  --x: 90px;
  --y: 10px;
  --r: 14deg;
  transform: translateX(90px) translateY(20px) rotateZ(14deg) rotateX(8deg);
  z-index: 5;
}

/* Frame image helpers: use actual <img> elements for precise pixel heights
   Alpha behind (smaller), border above it (larger), content above both */
.mb-paper-card .frame-alpha,
.mb-paper-card .frame-border {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: block;
  max-width: 200%;
}

.mb-paper-card .frame-alpha {
  z-index: 0;
  opacity: 0.95;
  height: var(--frame-alpha-height);
  width: auto;
}

.mb-paper-card .frame-border {
  z-index: 1;
  height: var(--frame-border-height);
  width: auto;
}