/* ==========================================================================
   v5-couleurs : mise en page V1-Fidèle (MPC Poker / Game card 63 × 88 mm, taille d'une
   carte Pokémon : 822 × 1122, coupe 36 px, sécurité 72 px ; passé du Tarot 897 × 1497 le
   2026-10-30), palette Vives et badges de rareté riches (palettes Métal et Sombre abandonnées).
   Rareté : .card[data-rarity] ; data-palette="vives" est facultatif (Vives par défaut).
   Seules les variables ci-dessous changent d'une rareté à l'autre.
   ========================================================================== */

:root {
  --card-w: 822px;
  --card-h: 1122px;
  --bleed: 36px;
  --pad: 48px;                       /* 12 px × 3,97 */
  --inset: calc(var(--bleed) + var(--pad)); /* 84 px : début du texte */
  /* Du haut du fichier à y = 590 : le bloc texte garde sa taille du Tarot (mêmes tailles de police
     à l'impression, 2 lignes de nom + 2 lignes de description + stats sur 2 lignes y tiennent),
     la photo prend le reste (≈ 53 % de la hauteur coupée). */
  --photo-h: 590px;

  --name-size: 54px;
  --sub-size: 42px;
  --stat-size: 36px;                 /* réduit (42 → 36) pour laisser 3 lignes à la description */
  --label-size: 24px;                /* minimum lisible à l'impression */

  --grain: url(textures/grain.svg);
}

/* ---------- Encres : sombre sur fond clair, claire sur fond foncé ---------- */
/* Encre sombre (fonds clairs : émeraude et or) */
.card {
  --ink: #07090c;
  --ink-sub: #07090c;
  --ink-stat: #07090c;
  --ink-label: rgba(7, 9, 12, .84);
  --rule: rgba(0, 0, 0, .28);
  --atk: #6a0a0a;
  --def: #0f2670;
}
/* Encre claire (fonds foncés : bleu roi, violet, magenta) */
.card[data-rarity="peu-commune"],
.card[data-rarity="rare"],
.card[data-rarity="super-rare"] {
  --ink: #ffffff;
  --ink-sub: #ffffff;
  --ink-stat: #ffffff;
  --ink-label: rgba(255, 255, 255, .9);
  --rule: rgba(255, 255, 255, .34);
  --atk: #ffcaca;
  --def: #cfe0ff;
}
/* Vives / Super rare (magenta) : étiquettes en blanc plein et épées plus claires, pour la marge de contraste */
.card[data-rarity="super-rare"] {
  --ink-label: #fff;
  --atk: #ffe0e0;
}

/* ---------- Textures : une par rareté (trame de coin, voir _outils/generer.py) ---------- */
.card[data-rarity="commune"]      { --texture: url(textures/vives-commune.svg);      --texture-base: #12bf78; }
.card[data-rarity="peu-commune"]  { --texture: url(textures/vives-peu-commune.svg);  --texture-base: #1a47d0; }
.card[data-rarity="rare"]         { --texture: url(textures/vives-rare.svg);         --texture-base: #7030e0; }
.card[data-rarity="super-rare"]   { --texture: url(textures/vives-super-rare.svg);   --texture-base: #c0137a; }
.card[data-rarity="legendaire"]   { --texture: url(textures/vives-legendaire.svg);   --texture-base: #ffc21a; }

/* ---------- Badges : taille et halo par rareté (réduits d'environ 16 % le 2026-10-30) ---------- */
.card[data-rarity="commune"]     { --badge-size: 108px; --badge-glow: rgba(18, 200, 120, .75); }
.card[data-rarity="peu-commune"] { --badge-size: 118px; --badge-glow: rgba(45, 106, 240, .75); }
.card[data-rarity="rare"]        { --badge-size: 128px; --badge-glow: rgba(124, 58, 237, .75); }
.card[data-rarity="super-rare"]  { --badge-size: 138px; --badge-glow: rgba(224, 23, 127, .75); }
.card[data-rarity="legendaire"]  { --badge-size: 148px; --badge-glow: rgba(255, 196, 30, .85); }

/* ---------- Carte ---------- */
.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--texture-base);
  background-image: var(--grain), var(--texture);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-blend-mode: soft-light, normal;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Photo (fond blanc dans les maquettes) ----------
   L'application insère un <img> dans .photo ; le voile (::after) se superpose alors. */
.photo {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--photo-h);
  background: #fff;
  overflow: hidden;
}
.photo > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Le voile et le dégradé ne s'appliquent que si une photo est présente :
   sans photo (maquettes), la zone reste blanc pur #ffffff. */
.photo:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .5) 0, rgba(0, 0, 0, 0) 160px),
    rgba(0, 0, 0, .2);
}

/* ---------- Badge de rareté (SVG inline : forme, facettes, sertissage métal, sigle) ----------
   Ombre portée sombre + halo de la couleur de rareté : lisible sur n'importe quelle photo. */
.badge {
  position: absolute;
  /* Plus près du coin (84 → 64 px) : la boîte déborde de 8 px de la zone de sécurité, mais le dessin
     du badge est en retrait dans son SVG et reste à plus de 2 mm de la ligne de coupe. */
  top: 64px;
  left: 64px;
  z-index: 2;
  width: var(--badge-size);
  height: var(--badge-size);
  filter:
    drop-shadow(0 5px 6px rgba(0, 0, 0, .55))
    drop-shadow(0 0 22px var(--badge-glow));
}
.badge > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Bloc texte ---------- */
.body {
  position: absolute;
  top: var(--photo-h);
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--inset) var(--inset);
}

.name {
  margin: 0;
  font: 700 var(--name-size)/1.25 'Outfit', sans-serif;
  color: var(--ink);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.subtitle {
  margin: 16px 0 0;
  font: 400 var(--sub-size)/1.375 'Inter', sans-serif;
  color: var(--ink-sub);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Paliers du sous-titre (3 lignes au maximum) : l'application prend la plus grande taille parmi
   42 / 38 / 32 / 28 px qui tient en 3 lignes sans faire déborder le bloc texte (42 par défaut, puis
   .subtitle--mid, .subtitle--long, .subtitle--xlong). Limite de saisie : 140 caractères. */
.subtitle--mid   { --sub-size: 38px; }
.subtitle--long  { --sub-size: 32px; letter-spacing: -.01em; }
.subtitle--xlong { --sub-size: 28px; letter-spacing: -.01em; }

/* ---------- Rangée de stats ---------- */
.stats {
  margin-top: auto;
  padding-top: 18px;            /* pas de filet au-dessus des stats (retiré le 2026-10-30) */
  display: flex;
  flex-wrap: nowrap;           /* jamais d'escalier : voir .stats--stacked */
  justify-content: space-between;
  align-items: baseline;
  column-gap: 32px;
  font: 700 var(--stat-size)/1.25 'Inter', sans-serif;
  color: var(--ink-stat);
  font-variant-numeric: tabular-nums;
}
.stat {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.stat--def { margin-left: auto; }

.stat svg {
  width: 1em;
  height: 1em;
  flex: none;
  align-self: center;
  margin-right: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stat--atk svg { color: var(--atk); }
.stat--def svg { color: var(--def); }

.stat-label {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-label);
  margin-right: 12px;
}
.stat-value { font-weight: 700; }

/* Repli quand « étiquette + valeur » des deux stats ne tient pas sur une ligne (l'application
   pose .stats--stacked) : chaque stat devient un bloc de 2 lignes, étiquette au-dessus, valeur
   en dessous, icône centrée à gauche ; les deux stats restent en justify-between. */
.stats--stacked { align-items: center; }
.stats--stacked .stat {
  display: grid;
  grid-template: "ico lab" auto "ico val" auto / 1em auto;
  column-gap: 16px;
  align-items: center;
}
.stats--stacked .stat svg { grid-area: ico; margin: 0; }
.stats--stacked .stat-label { grid-area: lab; margin: 0; line-height: 1; }
.stats--stacked .stat-value { grid-area: val; line-height: 1.1; }
.stats--stacked .stat--def { text-align: left; } /* bloc calé à droite (margin-left:auto), texte collé au bouclier */

/* ==========================================================================
   Verso (commun à toutes les cartes) : la texture et le logo « Kéroké » au centre.
   Le grain est intégré à verso.svg (symétrique par rotation de 180°).
   ========================================================================== */
.card--back {
  --texture: url(textures/verso.svg);
  --texture-base: #0f3022;
  --grain: none;
  background-image: var(--texture);
  background-size: 100% 100%;
  background-blend-mode: normal;
}
/* Logo « Kéroké » au centre du verso (lettrage dessin animé, SVG inline) */
.back-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 640px;
  transform: translate(-50%, -50%);
}
.back-logo > svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ==========================================================================
   Typographie validée (2026-10-30) : nom « 4A » et description « D4 ».
   Nom : Luckiest Guy (lettrage cartoon façon logo de jeu), effets qui montent avec la rareté.
   Description : Fredoka 500 (ronde, amicale) ; les paliers 42 / 38 / 32 px restent valables.
   Les contours sont des drop-shadow enchaînés (fonctionnent aussi sur un remplissage en dégradé) :
   ils restent fins pour ne pas boucher les lettres.
   ========================================================================== */
.card .name {
  font-family: 'Luckiest Guy', 'Outfit', sans-serif;
  font-weight: 400;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fff;
}
.card .subtitle {
  font-family: 'Fredoka', 'Inter', sans-serif;
  font-weight: 500;
}

/* Commune : blanc, contour fin */
.card[data-rarity="commune"] .name {
  filter: drop-shadow(2px 0 0 #0a0c12) drop-shadow(-2px 0 0 #0a0c12) drop-shadow(0 2px 0 #0a0c12) drop-shadow(0 -2px 0 #0a0c12);
}
/* Peu commune : blanc, contour et ombre portée */
.card[data-rarity="peu-commune"] .name {
  filter: drop-shadow(3px 0 0 #0a0c12) drop-shadow(-3px 0 0 #0a0c12) drop-shadow(0 3px 0 #0a0c12) drop-shadow(0 -3px 0 #0a0c12)
    drop-shadow(0 4px 0 #0a0c12);
}
/* Rare : remplissage lavande nacré, contour et ombre portée */
.card[data-rarity="rare"] .name {
  background: linear-gradient(180deg, #ffffff 0%, #ded0ff 42%, #8f6ad8 52%, #ded0ff 72%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 0 0 #0a0c12) drop-shadow(-3px 0 0 #0a0c12) drop-shadow(0 3px 0 #0a0c12) drop-shadow(0 -3px 0 #0a0c12)
    drop-shadow(0 4px 0 #0a0c12);
}
/* Super rare et Légendaire : effet « EX » (contour blanc + sombre, ombre, halo), chrome rose puis or */
.card[data-rarity="super-rare"] .name,
.card[data-rarity="legendaire"] .name {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .03em;
}
.card[data-rarity="super-rare"] .name {
  background-image: linear-gradient(180deg, #ffe3f1 0%, #ff8cc6 42%, #b3125f 52%, #ff8cc6 72%, #ffe3f1 100%);
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(2px 0 0 #0a0c12) drop-shadow(-2px 0 0 #0a0c12) drop-shadow(0 2px 0 #0a0c12) drop-shadow(0 -2px 0 #0a0c12)
    drop-shadow(0 3px 0 #0a0c12) drop-shadow(0 0 12px rgba(255, 90, 180, .7));
}
.card[data-rarity="legendaire"] .name {
  background-image: linear-gradient(180deg, #fff6c2 0%, #ffd64a 42%, #b97a06 52%, #ffd64a 72%, #fff6c2 100%);
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff)
    drop-shadow(2px 0 0 #0a0c12) drop-shadow(-2px 0 0 #0a0c12) drop-shadow(0 2px 0 #0a0c12) drop-shadow(0 -2px 0 #0a0c12)
    drop-shadow(0 3px 0 #0a0c12) drop-shadow(0 0 12px rgba(255, 200, 40, .85));
}

/* ==========================================================================
   Numéro de carte « 012 / 150 » (ajouté 2026-10-30, uniquement dans l'application).
   Pastille en haut à droite de la photo, en miroir du badge : dans la zone de sécurité
   (droite ≤ 750 px, haut ≥ 72 px), lisible sur n'importe quelle photo.
   ========================================================================== */
.card-number {
  position: absolute;
  top: 72px;
  right: 72px;
  z-index: 2;
  padding: 10px 24px;
  border-radius: 999px;
  background: rgba(10, 12, 18, .62);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .38), 0 4px 10px rgba(0, 0, 0, .35);
  color: #fff;
  font: 700 30px/1.1 'Inter', sans-serif;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}