:root{

    --paper:#f3efe6;--panel:#fbf9f3;--ink:#191b12;--ink-soft:#44483a;

    --muted:#6c7059;--line:#dcd6c5;--accent:#0f6e56;--accent-ink:#0b5442;

    --shadow:0 1px 2px rgba(25,27,18,.06),0 14px 36px -14px rgba(25,27,18,.26);

  }

  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){

    --paper:#14160f;--panel:#1c1f16;--ink:#e9e7da;--ink-soft:#c3c2b2;

    --muted:#9a9e86;--line:#2f3325;--accent:#3aa98a;--accent-ink:#6fc7ae;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 46px -18px rgba(0,0,0,.62);

  }}

  :root[data-theme="dark"]{

    --paper:#14160f;--panel:#1c1f16;--ink:#e9e7da;--ink-soft:#c3c2b2;

    --muted:#9a9e86;--line:#2f3325;--accent:#3aa98a;--accent-ink:#6fc7ae;

    --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 46px -18px rgba(0,0,0,.62);

  }

  *{box-sizing:border-box}

  body{margin:0;background:var(--paper);color:var(--ink);

    font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}

  

  

  

  

  

  

  

  

  

  



  /* ============ LA CARTE ============ */

  .rangee{display:flex;flex-wrap:wrap;gap:36px 32px;align-items:flex-start}

  .carte-wrap{position:relative;width:288px;flex:0 0 288px}



  .carte{

    --r-bg:#a9e2ba;--gloss:.30;--motif:none;

    position:relative;width:100%;height:474px;

    display:flex;flex-direction:column;

    border-radius:16px;overflow:hidden;isolation:isolate;

    background:var(--motif),var(--r-bg);color:#0a0a0a;

    box-shadow:var(--shadow),inset 0 0 0 1px rgba(0,0,0,.12);

    font-family:"IBM Plex Sans",sans-serif;text-align:left;

  }

  .carte .entete{flex:0 0 auto}

  .carte .fenetre{flex:0 0 auto}

  .carte .contenu{flex:1 1 auto}

  /* motifs : grandes formes rondes uniquement (pas de lignes ni de carrés) */

  .carte[data-rarete="commune"]{--r-bg:#c8efd2;--gloss:.28;

    --motif:radial-gradient(circle at 10% 4%,rgba(255,255,255,.6) 0 24%,transparent 50%),

            radial-gradient(circle at 96% 84%,rgba(255,255,255,.42) 0 22%,transparent 48%)}

  .carte[data-rarete="peucommune"]{--r-bg:#a9d6f2;--gloss:.44;

    --motif:radial-gradient(circle at 12% 2%,rgba(255,255,255,.62) 0 20%,transparent 44%),

            radial-gradient(circle at 94% 52%,rgba(255,255,255,.44) 0 24%,transparent 50%),

            radial-gradient(circle at 46% 120%,rgba(255,255,255,.4) 0 28%,transparent 54%)}

  .carte[data-rarete="rare"]{--r-bg:#ccb6f2;--gloss:.58;

    --motif:radial-gradient(64% 42% at 16% 6%,rgba(255,255,255,.46),transparent 72%),

            radial-gradient(72% 48% at 92% 92%,rgba(255,255,255,.34),transparent 74%)}

  .carte[data-rarete="tresrare"]{--r-bg:#f5b6d6;--gloss:.70;

    --motif:radial-gradient(circle at 14% 4%,rgba(255,255,255,.54) 0 22%,transparent 48%),

            radial-gradient(circle at 90% 86%,rgba(255,255,255,.4) 0 24%,transparent 52%)}

  .carte[data-rarete="legendaire"]{--r-bg:#fba33c;--gloss:.9;

    --motif:radial-gradient(circle at 74% 22%,rgba(255,255,255,.4) 0 16%,transparent 34%),

            radial-gradient(circle at 8% 100%,rgba(255,246,224,.44) 0 30%,transparent 58%),

            radial-gradient(120% 90% at 50% -20%,rgba(255,255,255,.28),transparent 60%)}

  .carte[data-rarete="epique"]{--r-bg:#fdc70f;--gloss:1;

    --motif:radial-gradient(circle at 22% 8%,rgba(255,255,255,.6) 0 22%,transparent 48%),

            radial-gradient(circle at 84% 66%,rgba(255,252,228,.5) 0 26%,transparent 54%),

            radial-gradient(circle at 58% 122%,rgba(255,255,255,.4) 0 26%,transparent 52%)}



  /* brillance : reflet diagonal + point lumineux, monte avec la rareté */

  .carte::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:16px;

    background:

      radial-gradient(115% 55% at 80% -4%,rgba(255,255,255,calc(var(--gloss)*.85)),transparent 62%),

      linear-gradient(122deg,

        rgba(255,255,255,var(--gloss)) 0%,rgba(255,255,255,calc(var(--gloss)*.35)) 11%,

        rgba(255,255,255,0) 24%,rgba(255,255,255,0) 82%,

        rgba(255,255,255,calc(var(--gloss)*.6)) 100%);

    mix-blend-mode:screen}

  .carte .shine{position:absolute;inset:0;z-index:7;pointer-events:none;transform:translateX(-135%);

    background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.78) 50%,transparent 60%)}



  /* --- banderole BSA : calée au ras du haut de la carte, coins droits,

     effet "verre" translucide (le fond transparaît, léger flou). --- */

  .bsa{position:absolute;top:0;right:16px;z-index:20;width:33px;

    padding:6px 0 7px;text-align:center;border-radius:0;

    background:

      linear-gradient(150deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.13) 38%,

        rgba(255,255,255,.03) 60%,rgba(255,255,255,.26) 100%),

      color-mix(in srgb,var(--r-bg) 46%,transparent);

    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 1px 0 rgba(255,255,255,.75),

      0 2px 6px rgba(0,0,0,.16);

    color:#0a0a0a;font-family:"IBM Plex Mono",monospace;text-shadow:0 1px 0 rgba(255,255,255,.55)}

  .bsa .l,.bsa .n{position:relative;z-index:2}

  .bsa .l{display:block;font-size:6px;letter-spacing:.13em;opacity:.5}

  .bsa .n{font-size:14px;font-weight:700;line-height:1}

/* --- en-tête --- */

  .entete{position:relative;z-index:3;min-height:32px;padding:10px 13px 8px;display:flex;align-items:center}

  .entete .rar{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:11.5px;

    letter-spacing:.09em;text-transform:uppercase;color:#0a0a0a}



  /* --- photo pleine largeur : image ENTIÈRE (rien de coupé), l'espace

     autour comblé par une version floutée de la photo elle-même --- */

  .fenetre{position:relative;z-index:2;width:100%;aspect-ratio:4/3;overflow:hidden;background:rgba(0,0,0,.08)}

  .fenetre .bg{position:absolute;inset:0;background-size:cover;background-position:center;

    filter:blur(16px) saturate(1.15) brightness(1.03);transform:scale(1.25)}

  .fenetre img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}

  .fenetre .eteinte{position:absolute;left:8px;bottom:8px;width:21px;height:21px;display:grid;

    place-items:center;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:14px;line-height:1;z-index:3}



  /* --- pas de photo : texte "illustration non disponible" sous une vitre floue --- */

  .fenetre.sans-illu{background:#fff}

  .fenetre .ni-texte{position:absolute;inset:0;z-index:1;display:grid;place-items:center;

    padding:0 12%;text-align:center;color:#000;font-family:"IBM Plex Mono",monospace;

    font-size:12px;font-weight:700;letter-spacing:.03em;line-height:1.55}

  .fenetre .ni-verre{position:absolute;inset:0;z-index:2;pointer-events:none;

    backdrop-filter:blur(1.5px) saturate(1.05);-webkit-backdrop-filter:blur(1.5px) saturate(1.05);

    background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 42%,

      rgba(255,255,255,.02) 60%,rgba(255,255,255,.26));

    box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.32),

      inset 0 -18px 26px -18px rgba(0,0,0,.12)}



  /* --- texte directement sur le fond --- */

  .contenu{position:relative;z-index:3;padding:10px 13px 12px;color:#0a0a0a;

    display:flex;flex-direction:column}

  .titre .fr{font-family:"Fraunces",Georgia,serif;font-weight:650;font-size:1.24rem;line-height:1.12;

    letter-spacing:-.015em;color:#080808;white-space:nowrap;overflow:hidden}

  .titre .la{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:440;font-size:.84rem;

    color:#1a1a1a;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.1em}



  .taxo{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:9px 0 0}

  .taxo .cell{min-width:0}

  .taxo .k{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.1em;

    text-transform:uppercase;color:#4a4230;background:#ece2ca;border-radius:3px;padding:1.5px 5px;margin-bottom:3px}

  .taxo .v{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:#0a0a0a;font-weight:500;

    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}



  .eco{display:flex;flex-direction:column;gap:4px;margin-top:11px;padding-top:9px;

    border-top:1px solid rgba(0,0,0,.2);font-family:"IBM Plex Mono",monospace}

  .eco .row{display:flex;align-items:baseline;gap:7px;font-size:12.5px;color:#0a0a0a}

  .eco .row .ic{opacity:.6}

  .eco .row .big{font-weight:700;font-variant-numeric:tabular-nums}

  .eco .row small{opacity:.62;font-size:10px}



  .combat{display:flex;align-items:center;justify-content:space-between;margin-top:auto;

    padding:9px 2px 0;border-top:1px solid rgba(0,0,0,.2);font-family:"IBM Plex Mono",monospace}

  .combat span{display:inline-flex;align-items:baseline;gap:5px;font-size:12px;color:#0a0a0a;

    font-variant-numeric:tabular-nums}

  .combat .lbl{font-weight:700;letter-spacing:.05em}

  .combat .atk .lbl{color:#a5241a}

  .combat .def .lbl{color:#123f8a}

  .combat b{font-weight:700}



  /* ============ annexes ============ */

  

  

  

  

  

  

  

  



  

  

  

  

  



  

  

  



  

  

  

  

  

  



  @media (max-width:760px){}

  @media (prefers-reduced-motion:no-preference){

    .carte-wrap{transition:transform .18s ease}

    .rangee .carte-wrap:hover{transform:translateY(-4px)}

    .rangee .carte-wrap:hover .shine{transition:transform .8s ease;transform:translateX(135%)}

  }

.carte.verso .contenu{padding:16px 14px 14px;display:flex;flex-direction:column;gap:12px}
.carte.verso .bloc{padding-top:11px;border-top:1px solid rgba(0,0,0,.2)}
.carte.verso .bloc:first-child{padding-top:0;border-top:0}
.carte.verso .bloc.refs{margin-top:auto}
.carte.verso .bh{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;color:#4a4230;background:#ece2ca;border-radius:3px;padding:1.5px 6px;margin-bottom:7px}
.carte.verso .vr{display:flex;justify-content:space-between;gap:10px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:#0a0a0a;padding:2px 0}
.carte.verso .bloc.refs .vr{font-size:9px;padding:1px 0}
.carte.verso .vr .vk{opacity:.6;white-space:nowrap}
.carte.verso .vr .vv{font-weight:600;text-align:right;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:62%}
.carte.verso .credit{margin-top:5px;font-family:"IBM Plex Mono",monospace;font-size:8px;color:rgba(0,0,0,.5)}